/* Layout v2: shared typography, softer surfaces and deliberate action hierarchy. */
:root {
  --ink-soft:#acb8cf; --line:#33405a; --line-subtle:rgba(153,174,211,.13);
  --shadow:0 8px 28px rgba(0,0,0,.14); --shadow-sm:none;
  --radius:10px; --radius-lg:16px; --content:1400px;
  --fs-md:14px; --fs-lg:18px; --fs-xl:24px; --fs-2xl:28px;
  --danger:#ff8296;
}
body {font-size:14px; line-height:1.6}
h2 {font-size:24px; line-height:1.3; letter-spacing:-.025em; font-weight:600; margin:0 0 16px}
h3 {font-size:16px; line-height:1.5; font-weight:600}
button,input,select,textarea {font-size:14px; line-height:1.5}
button {box-shadow:none; transition:background .15s ease,border-color .15s ease}
button:where(:not(.secondary):not(.btn-secondary)) {background:#7357e6}
button:hover {filter:brightness(1.06)}
input:hover,select:hover {border-color:#61718e}
.shell-sidebar {border-right-color:var(--line-subtle); box-shadow:none; background:#10172a}
#navigation a[aria-current=page] {background:rgba(151,126,255,.17); color:#ded5ff; box-shadow:inset 3px 0 #a58aff}
#navigation a[aria-current=page]:hover {color:#eee8ff}
.nav-off {font-style:normal}
.shell-topbar {border-bottom-color:var(--line-subtle)}
.card,.panel {border-radius:var(--radius-lg); padding:24px}
#dashboard {padding:0; background:transparent!important; border:0!important; box-shadow:none}
.metric {box-shadow:none; padding:20px}
.metric::before {display:none}
.metric strong {font-size:28px}
.metric>span[data-i18n] {text-transform:none; letter-spacing:0; font-size:13px; font-weight:500}
.notice,.callout-info,.notice.callout-info {box-shadow:none; border:0; background:rgba(137,157,193,.07); line-height:1.65}
.empty-state,#empty {border-style:solid}
.rbars strong {font-size:24px}
main h2[tabindex="-1"]:focus {outline:none} /* Programmatic route focus; interactive controls retain visible rings. */
#workflows.card {background:transparent!important; border:0!important; box-shadow:none; padding:0}
#workflowsNotice {margin:0 0 16px; padding:12px 16px; color:var(--ink-soft)}
#workflowsDraft {font-size:13px; margin:0 0 12px; overflow-wrap:anywhere}
#workflowsOutcome:empty {display:none}
#workflowsOutcome:not(:empty) {padding:12px 16px; border-radius:10px; background:var(--accent-soft); margin:0 0 16px; font-size:14px}
#workflowsOutcome[data-outcome=conflict],#workflowsOutcome[data-outcome=result_unknown],#workflowsOutcome[data-outcome=unavailable] {background:var(--danger-soft)}
#workflowsTrace {display:grid; gap:8px; padding-left:24px; font-size:14px}
#workflowsTrace li {padding:8px 12px; border-radius:8px; background:var(--surface)}
#settings.panel,#reports.panel,#integrations-view {box-shadow:none}
.report-range,.report-availability,.report-metadata .rm-panel {box-shadow:none; border-radius:12px}
@media(max-width:720px) {
  main,.shell-main {padding:20px 16px 32px}
  h2 {font-size:24px}
  .card,.panel {padding:20px 16px}
  #workflows.card {padding:0}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {transition:none!important; scroll-behavior:auto!important}}
#workflowsOverview {margin:-4px 0 8px; font-size:14px}
.workflow-scope {margin-bottom:20px; font-size:13px; color:var(--ink-soft)}
.workflow-scope summary {cursor:pointer; width:fit-content; color:var(--accent-text)}
.workflow-scope > summary {min-height:44px; padding-block:12px; box-sizing:border-box} /* SCRUM-41 G1: 44px at all widths */
.workflow-scope .notice {margin-top:12px}

.shell-main>section:not([hidden]) {margin-top:0}

/* PR #103 / SCRUM-37 (Isabella 10141 / Dot 10142): >=44px only for PR103-introduced regressions at <=720px. Pre-existing shell/integrations targets left alone. */
@media(max-width:720px) {
  .workflow-scope > summary,
  .opti247-wf-designer__advanced > summary,
  .opti247-wf-designer__open-draft > summary {min-height:44px; padding-block:12px; box-sizing:border-box} /* keep list-item so the disclosure marker stays */
  /* The wrapping label is the checkbox hit area (clicking it toggles the box). */
  .opti247-wf-designer__cycle {display:inline-flex; align-items:center; min-height:44px; min-width:44px; box-sizing:border-box; cursor:pointer}
}

/* SCRUM-41: Workflows list (landing view of #workflows). Dark theme, AA contrast, 44px targets at all viewport widths. */
#workflows[data-wf-mode="list"] #workflowsDesigner,
#workflows[data-wf-mode="list"] #workflowsDraft,
#workflows[data-wf-mode="list"] #workflowsOutcome,
#workflows[data-wf-mode="list"] #workflowsTraceTitle,
#workflows[data-wf-mode="list"] #workflowsTrace {display:none!important}
/* SCRUM-41 v1.1: Edit opens the list's own builder; the compose designer stays untouched but hidden. */
#workflows[data-wf-mode="builder"] #workflowsDesigner,
#workflows[data-wf-mode="builder"] #workflowsDraft,
#workflows[data-wf-mode="builder"] #workflowsOutcome,
#workflows[data-wf-mode="builder"] #workflowsTraceTitle,
#workflows[data-wf-mode="builder"] #workflowsTrace {display:none!important}
.wf-list {margin-top:var(--sp-4,16px)}
.wf-list-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3,12px)}
.wf-list-titlewrap {display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2,8px); min-width:0}
.wf-list-head h3 {margin:0; font-size:var(--fs-lg,18px)}
.wf-synthetic-badge {display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.02em; color:#FBBF24; background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.35)}
.wf-list-note {margin:var(--sp-2,8px) 0 var(--sp-3,12px)}
.wf-list-tools {display:flex; flex-wrap:wrap; gap:var(--sp-3,12px); align-items:flex-end; margin-bottom:var(--sp-3,12px)}
.wf-tool {display:flex; flex-direction:column; gap:4px; min-width:0}
.wf-tool-search {flex:1 1 18rem}
.wf-tool-search input {width:100%; margin:0}
.wf-sort-row {display:flex; gap:var(--sp-2,8px)}
.wf-sort-row select {margin:0; min-width:10rem}
.wf-field-label {font-size:var(--fs-sm,14px); color:var(--ink-soft,#93A1BD); font-weight:600}
.wf-btn {width:auto; margin:0; padding:8px 14px; min-height:44px; box-sizing:border-box; border-radius:var(--radius,10px); border:1px solid var(--line,#26324f); background:var(--surface-2,#1a2440); color:var(--ink,#E6ECF7); font-weight:600; cursor:pointer}
.wf-btn:hover {border-color:var(--accent,#7C5CFF)}
.wf-btn[disabled] {opacity:1; color:#8794B0; cursor:not-allowed}
.wf-btn-primary {background:#6D4DF2; border-color:#6D4DF2; color:#fff}
.wf-btn-danger {background:#B42318; border-color:#B42318; color:#fff}
.wf-back {margin:var(--sp-2,8px) 0}
.wf-list-count {margin:0 0 var(--sp-2,8px)}
.wf-list-status {min-height:1.5em; margin:0 0 var(--sp-2,8px); color:var(--ink,#E6ECF7); overflow-wrap:anywhere}
.wf-table-wrap {min-height:22rem; border:1px solid var(--line,#26324f); border-radius:var(--radius,10px); overflow:visible}
.wf-table {width:100%; border-collapse:collapse; table-layout:fixed}
.wf-col-created, .wf-col-published {width:12.5rem; overflow-wrap:anywhere}
.wf-table th {text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft,#93A1BD); padding:10px 14px; border-bottom:1px solid var(--line,#26324f); background:var(--surface-2,#1a2440)}
.wf-table td {padding:12px 14px; border-bottom:1px solid var(--line,#26324f); vertical-align:top; color:var(--ink,#E6ECF7)}
.wf-table tbody tr:last-child td {border-bottom:0}
.wf-table tbody tr:hover td {background:rgba(124,92,255,.06)}
.wf-col-status {width:8.5rem} .wf-col-actions {width:6.5rem; text-align:right; white-space:nowrap}
.wf-status {display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap}
.wf-status-draft {color:#D5DCEA; background:rgba(147,161,189,.16); border:1px solid rgba(147,161,189,.4)}
.wf-status-published {color:#6EE7B7; background:rgba(16,185,129,.14); border:1px solid rgba(16,185,129,.45)}
.wf-status-stopped {color:#FCA5A5; background:rgba(239,68,68,.14); border:1px solid rgba(239,68,68,.45)}
.wf-name {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; font-weight:700; overflow-wrap:anywhere}
.wf-desc {margin:4px 0 0; color:var(--ink-soft,#93A1BD); font-size:var(--fs-sm,14px); overflow-wrap:anywhere}
.wf-desc-clamp {display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
.wf-link {width:auto; margin:2px 0 0; padding:0 6px; min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; background:none; border:0; color:var(--accent-text,#B4A3FF); font-size:var(--fs-sm,14px); font-weight:600; cursor:pointer; text-decoration:underline}
.wf-cell-main {display:block} .wf-cell-sub {display:block; color:var(--ink-soft,#93A1BD); font-size:var(--fs-sm,14px)}
.wf-muted {color:var(--ink-soft,#93A1BD)}
.wf-actions {position:relative; display:inline-block}
.wf-menu-btn {min-width:44px; min-height:44px; padding:6px 10px; box-sizing:border-box; font-size:18px; line-height:1}
.wf-menu {white-space:normal; position:absolute; right:0; top:calc(100% + 4px); z-index:30; min-width:13rem; margin:0; padding:6px; list-style:none; text-align:left; background:#121a2e; border:1px solid var(--line,#26324f); border-radius:var(--radius,10px); box-shadow:0 12px 32px rgba(0,0,0,.45)}
.wf-menu li {position:relative}
.wf-menuitem {display:block; width:100%; margin:0; padding:9px 12px; min-height:44px; box-sizing:border-box; text-align:left; background:none; border:0; border-radius:8px; color:var(--ink,#E6ECF7); font-weight:500; cursor:pointer}
.wf-menuitem:hover, .wf-menuitem:focus-visible {background:var(--surface-2,#1a2440)}
.wf-menuitem.wf-danger {color:#FCA5A5}
.wf-menuitem[aria-disabled="true"] {color:#8794B0; cursor:not-allowed}
.wf-sort-row select, #wfSearch, .wf-dialog input, .wf-dialog textarea, .wf-builder-banner .wf-btn {min-height:44px; box-sizing:border-box}
#wfOrder {min-width:44px}
.wf-tip {display:none; position:absolute; right:calc(100% + 8px); top:50%; transform:translateY(-50%); width:15rem; padding:8px 10px; border-radius:8px; background:#E6ECF7; color:#0B1020; font-size:13px; line-height:1.35; z-index:40; box-shadow:0 6px 18px rgba(0,0,0,.4)}
.wf-locked:hover .wf-tip, .wf-locked:focus-within .wf-tip {display:block}
.wf-pager {display:flex; align-items:center; justify-content:flex-end; gap:var(--sp-2,8px); margin-top:var(--sp-3,12px)}
.wf-dialog {max-width:min(30rem,calc(100vw - 32px)); width:100%; padding:var(--sp-5,20px); border:1px solid var(--line,#26324f); border-radius:14px; background:#121a2e; color:var(--ink,#E6ECF7)}
.wf-dialog::backdrop {background:rgba(5,8,18,.7)}
.wf-dialog-form h3 {margin:0 0 var(--sp-3,12px)}
.wf-dialog-form input, .wf-dialog-form textarea {width:100%; margin:4px 0 var(--sp-3,12px)}
.wf-dialog-error {color:#FCA5A5}
.wf-dialog-actions {display:flex; justify-content:flex-end; gap:var(--sp-2,8px); margin-top:var(--sp-3,12px)}
@media(max-width:720px) {
  .wf-list-head {align-items:stretch}
  #wfNew {flex:1 1 100%}
  .wf-sort-row select {flex:1 1 auto; min-width:0}
  .wf-tool-sort {flex:1 1 100%}
  .wf-table-wrap {border:0; min-height:24rem}
  .wf-table thead {position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .wf-table, .wf-table tbody, .wf-table tr, .wf-table td {display:block; width:100%}
  .wf-table tbody tr {position:relative; margin-bottom:var(--sp-3,12px); padding:12px 14px; border:1px solid var(--line,#26324f); border-radius:var(--radius,10px); background:var(--surface,#121a2e)}
  .wf-table tbody tr:hover td {background:none}
  .wf-table td {padding:4px 0; border:0}
  .wf-table td.wf-col-name {padding-right:52px}
  .wf-table td[data-label]:not(.wf-col-name):not(.wf-col-status):not(.wf-col-actions)::before {content:attr(data-label); display:block; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft,#93A1BD)}
  .wf-table td.wf-col-actions {position:absolute; top:10px; right:10px; width:auto; padding:0}
  .wf-tip {position:static; transform:none; width:auto; margin:2px 8px 6px; box-shadow:none}
  .wf-menu {min-width:min(15rem,80vw)}
}
/* SCRUM-41: designer-not-linked notice + Edit hint (pending SCRUM-38 v1.1). */
.wf-designer-notice {margin:0 0 var(--sp-3,12px); padding:10px 14px; border:1px solid #FBBF24; border-left-width:4px; border-radius:8px; background:#2A2110; color:#FDE68A; font-size:14px; line-height:1.45}
.wf-menuitem .wf-hint {display:block; margin-top:2px; font-size:12px; font-weight:400; color:#C7D2E5; line-height:1.3}
.wf-locked .wf-menuitem .wf-hint {color:inherit}
/* SCRUM-41 v1.1 builder banner (info / read-only / stale) and read-only builder. */
.wf-builder-banner {display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2,8px) var(--sp-3,12px); margin:0 0 var(--sp-3,12px); padding:10px 14px; border:1px solid #3B4A6B; border-left-width:4px; border-radius:8px; background:#121A2E; color:#E6ECF7; font-size:14px; line-height:1.45}
.wf-builder-banner[hidden] {display:none}
.wf-builder-banner[data-state="locked"] {border-color:#FBBF24; background:#2A2110; color:#FDE68A}
.wf-builder-banner[data-state="stale"], .wf-builder-banner[data-state="error"] {border-color:#F87171; background:#2A1215; color:#FECACA}
.wf-builder-banner .wf-btn {color:#E6ECF7}
.wf-builder-readonly .opti247-wf-designer__primary {display:none!important}
#wfBuilder .opti247-wf-designer button, #wfBack {min-height:44px; box-sizing:border-box}
/* SCRUM-41: read-only builder — editing controls visibly disabled; progress hidden without reflow. */
.wf-builder-readonly [data-wf-ro] button:disabled, .wf-builder-readonly [data-wf-ro] input:disabled, .wf-builder-readonly [data-wf-ro] select:disabled {opacity:.45; cursor:not-allowed}
.wf-builder-readonly .opti247-wf-designer__canvas[data-wf-ro], .wf-builder-readonly .opti247-wf-designer__inspector[data-wf-ro], .wf-builder-readonly .opti247-wf-designer__edges[data-wf-ro] {cursor:default}
.wf-builder-readonly .opti247-wf-designer__progress {visibility:hidden}
.wf-builder-readonly .opti247-wf-designer__group-title[data-wf-state="published"] {display:inline-flex; align-items:center; flex:0 0 auto; width:fit-content; max-width:100%; align-self:flex-start; box-sizing:border-box; min-height:44px; padding:2px 12px; border-radius:999px; border:1px solid #FBBF24; background:#2A2110; color:#FDE68A}
/* SCRUM-41 follow-up: list-level error states (503 / 403 / network) and the builder keyboard hint (G5). */
.wf-list-error {display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2,8px); padding:16px; border:1px solid #FBBF24; border-left-width:4px; border-radius:8px; background:#2A2110; color:#FDE68A}
.wf-list-error[data-kind="forbidden"] {border-color:#F87171; background:#2A1215; color:#FECACA}
.wf-list-error p {margin:0; color:inherit; overflow-wrap:anywhere}
.wf-list-error-title {font-weight:700}
.wf-list-error .wf-btn {color:#E6ECF7}
.wf-builder-keyhint {margin:0 0 var(--sp-2,8px); font-size:13px; line-height:1.45; color:#C7D2E5}
/* SCRUM-41 G6: 721–1099px (sidebar desktop). The five fixed columns (640px) overflowed a 433–617px card, so the page
   scrolled sideways and NAME collapsed. Here "Created by" folds under the name and the other columns narrow. Mobile cards stay at ≤720px. */
.wf-name-created {display:none; margin:4px 0 0; color:var(--ink-soft,#93A1BD); font-size:var(--fs-sm,14px); overflow-wrap:anywhere}
@media(min-width:721px) and (max-width:1099px) {
  .wf-table th.wf-col-created, .wf-table td.wf-col-created {display:none}
  .wf-name-created {display:block}
  .wf-table th, .wf-table td {padding-left:10px; padding-right:10px}
  /* SCRUM-57: 5rem so the EN "ACTIONS" header fits inside the cell padding (4.25rem ran ~10px into it). */
  .wf-col-status {width:6.25rem} .wf-col-published {width:8rem} .wf-col-actions {width:5rem}
}
/* SCRUM-41: 422 validation_failed details on publish (text only; no retry). */
.wf-validation {display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2,8px); margin:0 0 var(--sp-3,12px); padding:12px 16px; border:1px solid #F87171; border-left-width:4px; border-radius:8px; background:#2A1215; color:#FECACA}
.wf-validation[hidden] {display:none}
.wf-validation p, .wf-validation ul {margin:0; color:inherit; overflow-wrap:anywhere}
.wf-validation ul {padding-left:1.25rem}
.wf-validation-title {font-weight:700}
.wf-validation .wf-btn {color:#E6ECF7}