/* 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}
.kpi-demo,.demo-badge {font-size:12px; letter-spacing:0; border-color:rgba(245,158,11,.22)}
.dash-chart-card {box-shadow:none; padding:20px}
.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 .notice {margin-top:12px}

.shell-main>section:not([hidden]) {margin-top:0}
.demo-ws h2[tabindex="-1"]:focus {outline:none}
.demo-tabs button[aria-current="page"] {background:#7357e6!important; box-shadow:none}

/* PR #103 / SCRUM-37 (Isabella 10141 / Dot 10142): >=44px only for PR103-introduced regressions at <=720px. Pre-existing shell/demo/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}
  .demo-tabs button {min-height:44px}
}