.workflow-designer-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.workflow-canvas { height: 520px; overflow: hidden; position: relative; background: #fff; direction: ltr; touch-action: none; }
.workflow-canvas:focus-visible, .workflow-divider:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.workflow-selected { filter: drop-shadow(0 0 3px #246582); }
.workflow-property { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; min-width: 0; }
.workflow-input { width: 100%; padding: .6rem; border: 1px solid var(--color-outline-variant); border-radius: .5rem; background: var(--color-surface); color: var(--color-on-surface); min-width: 0; }
.workflow-input[type=checkbox] { width: 1.1rem; height: 1.1rem; }
.workflow-input:focus-visible, .workflow-small-button:focus-visible, .workflow-file-button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.workflow-input:disabled { opacity: .7; }
.workflow-small-button, .workflow-file-button { padding: .5rem .7rem; border: 1px solid var(--color-outline-variant); border-radius: .5rem; background: var(--color-surface); color: var(--color-on-surface); cursor: pointer; font-size: .8rem; overflow-wrap: anywhere; }
.workflow-file-button[aria-pressed=true] { outline: 2px solid var(--color-primary); font-weight: 600; }
.workflow-field-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; border-bottom: 1px solid var(--color-outline-variant); padding-bottom: .7rem; }
.workflow-field-row > * { flex: 1 1 8rem; }
.workflow-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; --workflow-split: 50%; }
.workflow-details, .workflow-preview { min-width: 0; }
.workflow-divider { display: none; }
.workflow-preview { position: relative; }
.workflow-preview-content { overflow: auto; max-height: 65dvh; min-height: 3rem; }
.workflow-preview-content img { max-width: none; width: 100%; height: auto; object-fit: contain; }
.workflow-preview-content canvas { max-width: none; }
.workflow-spinner { display: inline-block; width: 1.2rem; height: 1.2rem; border: 2px solid var(--color-outline-variant); border-top-color: var(--color-primary); border-radius: 50%; animation: workflow-spin 1s linear infinite; vertical-align: middle; margin-inline-end: .5rem; }
@keyframes workflow-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .workflow-spinner { animation: none; } }
@media (min-width: 1100px) {
  .workflow-designer-grid { grid-template-columns: 10rem minmax(0, 1fr) 16rem; }
  .workflow-designer-grid:not(:has(> aside:first-child[aria-label])) { grid-template-columns: minmax(0, 1fr) 16rem; }
}
@media (min-width: 1100px) {
  .workflow-split { grid-template-columns: minmax(300px, var(--workflow-split)) 10px minmax(300px, 1fr); gap: 0; }
  .workflow-details { padding-inline-end: .5rem; }
  .workflow-divider { display: block; cursor: col-resize; background: var(--color-outline-variant); border: 3px solid var(--color-surface); border-radius: 5px; touch-action: none; }
  .workflow-preview { position: sticky; top: 5.5rem; max-height: calc(100dvh - 6.5rem); overflow: auto; align-self: start; }
  .workflow-split.preview-collapsed { grid-template-columns: minmax(0, 1fr); }
  .preview-collapsed > .workflow-divider, .preview-collapsed > .workflow-preview { display: none; }
  .workflow-split.preview-expanded { grid-template-columns: minmax(0, 1fr); }
  .preview-expanded > .workflow-details, .preview-expanded > .workflow-divider { display: none; }
}
@media (max-width: 1099px) {
  .workflow-split:not(.preview-collapsed):has([data-document-preview-target=empty][hidden]) > .workflow-preview { position: fixed; inset: 5rem .5rem .5rem; z-index: 60; overflow: auto; }
}

/* Document workspace: shared MiMinds surfaces, with a clear reading order. */
.workflow-icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.workflow-process-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: .25rem 0 .5rem; }
.workflow-process-header h1 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 650; letter-spacing: -.035em; line-height: 1.3; margin-top: .3rem; }
.workflow-back-link { display: inline-flex; gap: .4rem; align-items: center; font-size: .8rem; color: var(--color-on-surface-variant); }
.workflow-back-link .workflow-icon { transform: rotate(180deg); width: .9rem; }
[dir=rtl] .workflow-back-link .workflow-icon { transform: none; }
.workflow-eyebrow { font-size: .68rem; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; font-weight: 650; color: var(--color-on-surface-variant); }
[dir=rtl] .workflow-eyebrow { letter-spacing: normal; }
.workflow-process-state { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; border: 1px solid var(--color-outline-variant); border-radius: 2rem; padding: .4rem .75rem; background: var(--color-surface); }
.workflow-process-state > span { font-size: .5rem; }
.workflow-compact-button { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; }
.workflow-overview { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 1.5rem; padding: 1.15rem 1.4rem; border: 1px solid var(--color-outline-variant); border-radius: .85rem; background: var(--color-surface); }
.workflow-overview-progress { display: flex; gap: 1.2rem; align-items: center; }
.workflow-overview-progress > div { flex: 1; font-size: .8rem; }
.workflow-progress-number { font-size: 2rem; line-height: 1; font-weight: 600; letter-spacing: -.06em; white-space: nowrap; }
.workflow-progress-number small { font-size: 1rem; color: var(--color-on-surface-variant); font-weight: 400; letter-spacing: 0; }
.workflow-completion { width: 100%; height: .35rem; margin-top: .5rem; accent-color: var(--color-primary); border: 0; border-radius: 1rem; overflow: hidden; }
.workflow-completion::-webkit-progress-bar { background: var(--color-outline-variant); }
.workflow-completion::-webkit-progress-value { background: var(--color-primary); border-radius: 1rem; }
.workflow-next-action { display: flex; align-items: center; gap: .85rem; border-inline-start: 1px solid var(--color-outline-variant); padding-inline-start: 1.5rem; }
.workflow-next-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-secondary-container); flex-shrink: 0; }
[dir=rtl] .workflow-next-icon .workflow-icon-arrow { transform: rotate(180deg); }
.workflow-next-title { display: inline-block; font-size: 1rem; font-weight: 650; margin: .15rem 0; }
.workflow-next-title:hover { text-decoration: underline; }
.workflow-collection-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: .75rem 0 .4rem; }
.workflow-collection-heading h2 { font-size: 1.2rem; font-weight: 650; margin-top: .15rem; }
.workflow-collection-heading > span { font-size: .75rem; color: var(--color-on-surface-variant); max-width: 12rem; text-align: end; }
.workflow-document-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.workflow-document-sequence { list-style: none; padding-inline-start: 2.5rem; margin: 0; }
.workflow-document-sequence > li { position: relative; min-width: 0; }
.workflow-document-sequence > li:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: -1.6rem; top: 3rem; bottom: -2rem; border-inline-start: 1px solid var(--color-outline-variant); }
.workflow-document-card { position: relative; min-width: 0; border: 1px solid var(--color-outline-variant); border-radius: .85rem; background: var(--color-surface); scroll-margin-top: 5rem; overflow-wrap: anywhere; }
.workflow-sequence-marker { display: grid; place-items: center; position: absolute; top: 1.55rem; inset-inline-start: -2.5rem; width: 1.85rem; height: 1.85rem; border: 1px solid var(--color-outline-variant); border-radius: 50%; background: var(--color-surface); font-size: .75rem; font-weight: 650; z-index: 1; }
.workflow-card-heading { display: flex; align-items: center; gap: .85rem; padding: 1.2rem 1.25rem .8rem; }
.workflow-document-symbol { display: grid; place-items: center; width: 2.65rem; height: 3.1rem; background: var(--color-secondary-container); border-radius: .6rem; flex-shrink: 0; color: var(--color-on-surface); }
.workflow-document-symbol .workflow-icon { width: 1.45rem; height: 1.45rem; }
.workflow-card-title { flex: 1; min-width: 0; }
.workflow-card-title h3 { font-size: 1.15rem; line-height: 1.3; font-weight: 650; letter-spacing: -.02em; margin-top: .25rem; }
.workflow-card-title button { cursor: pointer; text-align: start; }
.workflow-card-title button:hover { text-decoration: underline; text-underline-offset: .2rem; }
.workflow-card-title .workflow-eyebrow span { font-weight: 400; letter-spacing: 0; text-transform: none; }
.workflow-document-badge { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border-radius: 1.5rem; padding: .35rem .6rem; font-size: .68rem; font-weight: 650; background: var(--color-secondary-container); color: var(--color-on-surface); max-width: 40%; flex-shrink: 0; }
.workflow-document-badge .workflow-icon { width: .85rem; height: .85rem; }
.workflow-card-body { padding: 0 1.25rem 1.15rem; display: grid; gap: .9rem; }
.workflow-document-guidance, .workflow-card-description { font-size: .8rem; color: var(--color-on-surface-variant); line-height: 1.6; }
.workflow-card-metadata { display: flex; align-items: start; flex-wrap: wrap; gap: .75rem 1.75rem; }
.workflow-card-metadata > span { display: flex; align-items: center; gap: .5rem; font-size: .75rem; }
.workflow-card-metadata .workflow-icon { color: var(--color-on-surface-variant); width: 1rem; }
.workflow-card-metadata small { display: block; font-size: .65rem; color: var(--color-on-surface-variant); margin-bottom: .1rem; }
.workflow-document-card[data-card-state=ready] { border-color: var(--color-primary-700); box-shadow: 0 2px 6px #00000005; }
.workflow-document-card[data-card-state=ready] .workflow-sequence-marker { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.workflow-document-card[data-card-state=done] .workflow-sequence-marker { background: var(--color-secondary-container); }
.workflow-document-card[data-card-state=upcoming], .workflow-document-card[data-card-state=excluded] { background: var(--color-surface-container-low); }
.workflow-document-card[data-card-state=excluded] { border-style: dashed; }
.workflow-document-card[data-card-state=upcoming] .workflow-document-symbol, .workflow-document-card[data-card-state=excluded] .workflow-document-symbol { background: transparent; border: 1px solid var(--color-outline-variant); color: var(--color-on-surface-variant); }
.workflow-document-card[data-card-state=attention] .workflow-document-badge, .workflow-review-feedback { background: var(--color-error-container); color: var(--color-on-error-container); }
.workflow-review-feedback { display: flex; align-items: start; gap: .6rem; padding: .85rem; font-size: .8rem; border-radius: .6rem; }
.workflow-review-panel { padding: .85rem; background: var(--color-surface-container-low); border: 1px solid var(--color-outline-variant); border-radius: .6rem; font-size: .8rem; }
.workflow-review-panel p:empty { display: none; }
.workflow-card-disclosure { font-size: .75rem; }
.workflow-card-disclosure > summary { display: flex; align-items: center; gap: .45rem; list-style: none; cursor: pointer; font-weight: 600; padding: .25rem 0; }
.workflow-card-disclosure > summary::after { content: "+"; margin-inline-start: auto; font-size: 1.1rem; font-weight: 400; }
.workflow-card-disclosure[open] > summary::after { content: "−"; }
.workflow-card-disclosure > summary::-webkit-details-marker { display: none; }
.workflow-submission { border: 1px solid var(--color-outline-variant); border-radius: .65rem; overflow: hidden; }
.workflow-attachment-row { display: flex; align-items: center; gap: .75rem; padding: .85rem; }
.workflow-file-type { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .1rem; width: 2.2rem; height: 2.6rem; flex-shrink: 0; background: var(--color-secondary-container); border-radius: .35rem; }
.workflow-file-type small { font-size: .5rem; font-weight: 700; }
.workflow-document-file { display: flex; align-items: center; justify-content: space-between; flex: 1; min-width: 0; gap: .5rem; padding: .25rem; border: 0; text-align: start; background: transparent; }
.workflow-document-file > span:first-child { flex: 1; min-width: 0; }
.workflow-document-file strong { display: block; font-size: .8rem; font-weight: 600; overflow-wrap: anywhere; }
.workflow-document-file small { display: block; font-size: .7rem; margin-top: .25rem; color: var(--color-on-surface-variant); }
.workflow-view-label { display: flex; align-items: center; gap: .35rem; font-size: .65rem; white-space: nowrap; }
.workflow-submission-footer { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding: .5rem .85rem; font-size: .65rem; color: var(--color-on-surface-variant); border-top: 1px solid var(--color-outline-variant); }
.workflow-dropzone { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; gap: .15rem .8rem; padding: 1rem; border: 1.5px dashed var(--color-primary-700); border-radius: .65rem; cursor: pointer; transition: background-color .15s, border-color .15s; }
.workflow-dropzone > .font-semibold { font-size: .85rem; }
.workflow-dropzone > .text-sm { font-size: .75rem; }
.workflow-upload-icon { display: grid; place-items: center; grid-row: span 2; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-secondary-container); }
.workflow-upload-icon .workflow-icon { width: 1.2rem; height: 1.2rem; }
.workflow-dropzone:hover, .workflow-dropzone:focus-within, .workflow-dropzone.is-dragging { border-color: var(--color-primary); background: var(--color-secondary-container); }
.workflow-dropzone:focus-within, .workflow-card-title button:focus-visible, .workflow-card-disclosure > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.workflow-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.workflow-upload-submit { padding: .65rem 1rem; font-size: .8rem; font-weight: 600; }
.workflow-upload-submit:disabled { opacity: .4; cursor: not-allowed; }
.workflow-upload-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.workflow-upload-dates label { min-width: 0; font-size: .8rem; }
.workflow-preview { scroll-margin-top: 5rem; }
.workflow-preview:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.workflow-preview-content { background: var(--color-surface-container); border-radius: .5rem; }
.workflow-preview-content canvas { margin-inline: auto; }
.workflow-preview-placeholder { display: grid; justify-items: center; align-content: center; text-align: center; padding: 3rem 1rem; gap: .75rem; min-height: 18rem; color: var(--color-on-surface-variant); }
.workflow-preview-placeholder > .workflow-icon { width: 2rem; height: 2rem; }
.workflow-preview-placeholder strong { font-size: 1rem; color: var(--color-on-surface); }
.workflow-preview-placeholder p { font-size: .8rem; max-width: 18rem; line-height: 1.7; }
.workflow-document-card:has([data-preview-url][aria-pressed=true]) { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
@media (max-width: 699px) {
  .workflow-overview { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1rem; }
  .workflow-next-action { border-inline-start: 0; border-top: 1px solid var(--color-outline-variant); padding-inline-start: 0; padding-top: 1rem; }
  .workflow-document-sequence { padding-inline-start: 1.8rem; }
  .workflow-sequence-marker { inset-inline-start: -1.8rem; width: 1.3rem; height: 1.3rem; top: 1.35rem; font-size: .6rem; }
  .workflow-sequence-marker .workflow-icon { width: .9rem; height: .9rem; }
  .workflow-document-sequence > li:not(:last-child)::before { inset-inline-start: -1.15rem; top: 2.5rem; }
  .workflow-card-heading { padding: 1rem .85rem .7rem; gap: .6rem; flex-wrap: wrap; }
  .workflow-card-title h3 { font-size: 1.05rem; }
  .workflow-document-symbol { width: 2rem; height: 2.5rem; }
  .workflow-document-symbol .workflow-icon { width: 1.2rem; }
  .workflow-document-badge { margin-inline-start: 2.6rem; max-width: 100%; }
  .workflow-card-body { padding: 0 .85rem 1rem; }
  .workflow-collection-heading > span { display: none; }
  .workflow-document-file { flex-wrap: wrap; }
  .workflow-view-label { font-size: .65rem; }
  .workflow-upload-dates { grid-template-columns: minmax(0, 1fr); }
}

.workflow-preview-placeholder[hidden] { display: none; }
.workflow-document-card[data-card-state=done] .workflow-document-guidance { display: none; }
.workflow-card-metadata small { display: inline; margin-inline-end: .3rem; }
.workflow-parallel-hint { display: flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--color-on-surface-variant); padding-inline-start: 2.5rem; }
@media (max-width: 699px) { .workflow-parallel-hint { padding-inline-start: 1.8rem; } }
.workflow-document-card[data-card-state=ready] .workflow-document-badge { background: var(--color-primary); color: var(--color-on-primary); }
.workflow-document-card[data-card-state=upcoming] .workflow-document-badge, .workflow-document-card[data-card-state=excluded] .workflow-document-badge { background: transparent; border: 1px solid var(--color-outline-variant); color: var(--color-on-surface-variant); }

/* Semantic status cues always accompany readable labels and icons. */
.workflow-document-card[data-card-state=done] .workflow-document-badge,
.workflow-document-card[data-card-state=done] .workflow-sequence-marker { background: var(--status-success-bg); color: var(--status-success-fg); border-color: var(--status-success-border); }
.workflow-document-card[data-card-state=ready] .workflow-document-badge,
.workflow-document-card[data-card-state=review] .workflow-document-badge,
.workflow-document-card[data-card-state=upcoming] .workflow-document-badge { background: var(--status-pending-bg); color: var(--status-pending-fg); border-color: var(--status-pending-border); }
.workflow-document-card[data-card-state=attention] .workflow-document-badge,
.workflow-document-card[data-overdue=true] .workflow-document-badge { background: var(--status-danger-bg); color: var(--status-danger-fg); border-color: var(--status-danger-border); }
.workflow-document-card[data-overdue=true], .workflow-document-card[data-card-state=attention] { border-color: var(--status-danger-border); }
.workflow-document-card[data-card-state=review] { border-color: var(--status-pending-border); }
.workflow-review-panel[data-task-status=pending] { background: var(--status-pending-bg); border-color: var(--status-pending-border); }
.workflow-review-panel[data-task-status=approved], .workflow-review-panel[data-task-status=completed] { background: var(--status-success-bg); border-color: var(--status-success-border); }
.workflow-review-panel[data-task-status=rejected], .workflow-review-panel[data-task-status=correction_requested] { background: var(--status-danger-bg); border-color: var(--status-danger-border); }
.workflow-approval-heading { display: flex; align-items: center; gap: .65rem; }
.workflow-approval-heading > .workflow-icon { width: 1.6rem; height: 1.6rem; color: var(--status-pending-fg); }
.workflow-review-panel[data-task-status=approved] .workflow-approval-heading > .workflow-icon { color: var(--status-success-fg); }
.workflow-review-panel[data-task-status=rejected] .workflow-approval-heading > .workflow-icon { color: var(--status-danger-fg); }
.workflow-process-title { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.workflow-edit-name { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--color-on-surface-variant); padding: .35rem; border-radius: .3rem; }
.workflow-edit-name:hover { background: var(--color-secondary-container); color: var(--color-on-surface); }
.workflow-edit-name:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.workflow-process-state[data-process-status=completed][data-standing=valid] { background: var(--status-success-bg); color: var(--status-success-fg); border-color: var(--status-success-border); }
.workflow-process-state[data-standing=pending_requirements] { background: var(--status-pending-bg); color: var(--status-pending-fg); border-color: var(--status-pending-border); }
.workflow-process-state[data-standing=expired_documents] { background: var(--status-danger-bg); color: var(--status-danger-fg); border-color: var(--status-danger-border); }
.workflow-document-card[data-card-state=ready] .workflow-sequence-marker,
.workflow-document-card[data-card-state=review] .workflow-sequence-marker,
.workflow-document-card[data-card-state=upcoming] .workflow-sequence-marker { background: var(--status-pending-bg); color: var(--status-pending-fg); border-color: var(--status-pending-border); }
.workflow-document-card[data-card-state=attention] .workflow-sequence-marker,
.workflow-document-card[data-overdue=true] .workflow-sequence-marker { background: var(--status-danger-bg); color: var(--status-danger-fg); border-color: var(--status-danger-border); }

/* Workflow administration: contain action controls and keep the diagram prominent. */
.workflow-setup-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.25rem; flex-wrap: wrap; }
.workflow-setup-header > div { min-width: 0; }
.workflow-setup-header h1, .workflow-template-name { overflow-wrap: anywhere; }
.workflow-setup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
.workflow-setup-actions > form { margin: 0; min-width: 0; }
.workflow-setup-actions :is(a,button), .workflow-setup-header > a { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; font-size: .8rem; line-height: 1.4; }
.workflow-setup-actions button:disabled { opacity: .45; cursor: not-allowed; }
.workflow-setup-filters { display: grid; grid-template-columns: minmax(0,1fr) minmax(10rem,14rem); gap: .75rem; align-items: center; }
.workflow-template-table { table-layout: fixed; }
.workflow-template-table th:first-child { width: 47%; }
.workflow-template-table th:nth-child(2) { width: 14%; }
.workflow-template-table td { vertical-align: top; padding-block: 1.25rem; }
.workflow-template-table tbody tr:hover { background: var(--color-surface-container-low); }
.workflow-template-identity { display: flex; align-items: flex-start; gap: .85rem; }
.workflow-template-icon { display: flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: .75rem; background: var(--color-secondary-container); color: var(--color-on-secondary-container); flex-shrink: 0; }
.workflow-template-name { font-size: .95rem; font-weight: 650; line-height: 1.5; }
.workflow-template-name:hover { text-decoration: underline; }
.workflow-template-meta { display: flex; gap: .45rem .8rem; flex-wrap: wrap; margin-top: .6rem; font-size: .73rem; color: var(--color-on-surface-variant); }
.workflow-template-status { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem; border-radius: 999px; font-size: .73rem; font-weight: 600; border: 1px solid var(--color-outline-variant); }
.workflow-template-status.is-active { background: var(--status-success-bg); color: var(--status-success-fg); border-color: var(--status-success-border); }
.workflow-template-status.is-inactive { background: var(--color-surface-container); color: var(--color-on-surface-variant); }
.workflow-template-versions { margin-top: .6rem; font-size: .75rem; }
.workflow-template-versions summary, .workflow-editor-details summary { cursor: pointer; }
.workflow-version-link { display: inline-block; padding: .3rem .5rem; border: 1px solid var(--color-outline-variant); border-radius: .4rem; }
.workflow-setup-notice { display: flex; gap: .7rem; align-items: flex-start; background: var(--color-surface-container); border: 1px solid var(--color-outline-variant); border-radius: .6rem; padding: .9rem 1rem; font-size: .85rem; color: var(--color-on-surface-variant); }
.workflow-editor-details > :not(summary) { margin-top: 1rem; }
.workflow-designer-grid > aside { min-width: 0; }
.workflow-properties { max-height: 75dvh; overflow-y: auto; }
.workflow-properties [data-name-translations-target=fields] { grid-template-columns: minmax(0,1fr); }
.workflow-properties [data-controller=name-translations] :is(button,select,label) { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.workflow-properties [data-controller=name-translations] button { font-size: .75rem; }
@media (max-width: 767px) {
  .workflow-setup-filters { grid-template-columns: minmax(0,1fr); }
  .workflow-template-table, .workflow-template-table tbody, .workflow-template-table tr, .workflow-template-table td { display: block; width: 100%; }
  .workflow-template-table thead { display: none; }
  .workflow-template-table td { padding-block: .5rem; }
  .workflow-template-table tr { padding-block: .75rem; }
  .workflow-template-table tr[hidden] { display: none; }
  .workflow-properties { max-height: none; }
}

.workflow-template-library .bg-transparent:not(:disabled), [data-controller=workflow-designer] .bg-transparent:not(:disabled) { color: var(--color-on-surface); border-color: var(--color-outline-variant); }