/* ==========================================================================
   Cehpoint Growth Blueprint — application stylesheet
   Light theme only. Framework-free plain CSS.
   Tokens mirror DESIGN.md exactly; no colour outside :root (one hero gradient).
   Sections:
     01 Tokens
     02 Reset & base elements
     03 Focus & accessibility
     04 Layout shell (topbar / sidebar / rail / main)
     05 Page & section structure
     06 Grid, stack, row, utilities
     07 Typography helpers
     08 Cards
     09 Buttons
     10 Badges, tags, chips, pills
     11 Stat tiles & KPI scoreboard
     12 Tables
     13 Progress, meters, queue
     14 Callouts
     15 Lists
     16 Stepper
     17 Wizard & onboarding
     18 Forms
     19 Tabs
     20 Hero & landing
     21 Features
     22 Footer
     23 SOP documents
     24 Icons
     25 Skeletons & empty states
     26 Toasts & modals
      27 Responsive
      28 Motion preferences
      29 Print
      26b UX overhaul: glance row, section rhythm, tables, severity groups,
          demo controls, wizard review, queue stages, landing bands
      30 Responsive for the UX overhaul
      31 Print for the UX overhaul
    ========================================================================== */


/* ==========================================================================
   01 TOKENS
   ========================================================================== */

:root {
  /* --- Colour: core spine --- */
  --c-ink: #101828;
  --c-primary: #0F2F5F;
  --c-primary-dark: #0A2247;
  --c-primary-soft: #EAF0F9;
  --c-secondary: #4A5A73;
  --c-secondary-soft: #F0F2F6;
  --c-tertiary: #0E7C66;
  --c-tertiary-dark: #0A5F4E;
  --c-tertiary-soft: #E3F3EF;
  --c-neutral: #F6F7F9;
  --c-surface: #FFFFFF;
  --c-border: #D8DEE8;
  --c-on-primary: #FFFFFF;
  --c-on-tertiary: #FFFFFF;

  /* --- Colour: semantic --- */
  --c-success: #12612F;
  --c-success-soft: #E6F4EA;
  --c-warning: #B45309;
  --c-warning-soft: #FDF1E0;
  --c-danger: #B91C1C;
  --c-danger-soft: #FCEBEB;
  --c-info: #1D4ED8;
  --c-info-soft: #E8EEFC;

  /* --- Derived surfaces (rgba of existing tokens only) --- */
  --c-scrim: rgba(16, 24, 40, 0.56);
  --c-shadow-ink-06: rgba(16, 24, 40, 0.06);
  --c-shadow-ink-14: rgba(16, 24, 40, 0.14);
  --c-focus-halo: rgba(14, 124, 102, 0.28);
  --c-border-translucent: rgba(216, 222, 232, 0.9);

  /* --- Spacing scale (strict: 4 / 8 / 16 / 24 / 32 / 48 / 80) --- */
  --s-none: 0px;
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --s-section: 80px;

  /* --- Radius --- */
  --r-none: 0px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* --- Type families --- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  /* --- Type scale: display --- */
  --fs-display: 2.75rem;
  --lh-display: 1.1;
  --fw-display: 650;
  --ls-display: -0.022em;

  /* --- Type scale: h1 --- */
  --fs-h1: 2rem;
  --lh-h1: 1.2;
  --fw-h1: 650;
  --ls-h1: -0.018em;

  /* --- Type scale: h2 --- */
  --fs-h2: 1.5rem;
  --lh-h2: 1.25;
  --fw-h2: 640;
  --ls-h2: -0.014em;

  /* --- Type scale: h3 --- */
  --fs-h3: 1.1875rem;
  --lh-h3: 1.3;
  --fw-h3: 620;
  --ls-h3: -0.01em;

  /* --- Type scale: h4 --- */
  --fs-h4: 1rem;
  --lh-h4: 1.4;
  --fw-h4: 620;
  --ls-h4: 0em;

  /* --- Type scale: body --- */
  --fs-body-lg: 1.0625rem;
  --lh-body-lg: 1.65;
  --fs-body-md: 0.9375rem;
  --lh-body-md: 1.6;
  --fs-body-sm: 0.8125rem;
  --lh-body-sm: 1.55;

  /* --- Type scale: labels --- */
  --fs-label: 0.8125rem;
  --lh-label: 1.4;
  --fw-label: 600;
  --ls-label: 0.01em;

  --fs-label-caps: 0.6875rem;
  --lh-label-caps: 1.3;
  --fw-label-caps: 650;
  --ls-label-caps: 0.08em;

  /* --- Type scale: figures (tabular) --- */
  --fs-metric: 1.75rem;
  --lh-metric: 1.15;
  --fw-metric: 600;
  --fs-metric-sm: 1rem;
  --lh-metric-sm: 1.3;
  --fw-metric-sm: 500;
  --fvs-tnum: "tnum" 1;

  /* --- Elevation --- */
  --shadow-2: 0 1px 2px var(--c-shadow-ink-06);
  --shadow-3: 0 12px 32px var(--c-shadow-ink-14);

  /* --- Shell metrics --- */
  --topbar-h: 60px;
  --sidebar-w: 264px;
  --rail-w: 216px;
  --content-max: 1280px;
  --measure-max: 68ch;
  --wizard-max: 760px;
  --gutter: var(--s-lg);
  --control-h: 44px;
  --control-h-sm: 36px;

  /* --- Motion (never longer than 200ms) --- */
  --t-fast: 120ms ease;
  --t-base: 160ms ease;
  --t-layout: 180ms ease;

  /* --- Focus --- */
  --focus-w: 2px;
  --focus-offset: 2px;
}


/* ==========================================================================
   02 RESET & BASE ELEMENTS
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + var(--s-lg));
  background-color: var(--c-surface);
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--c-neutral);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body-md);
  font-weight: 400;
  line-height: var(--lh-body-md);
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
  color: var(--c-ink);
  text-wrap: balance;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  text-align: inherit;
}

a {
  color: var(--c-tertiary-dark);
  text-decoration: none;
  transition: color var(--t-fast);
}

a:hover {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

hr {
  border: 0;
  border-top: 1px solid var(--c-border);
  margin: 0;
}

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
}

table {
  border-collapse: collapse;
  width: 100%;
}

::selection {
  background-color: var(--c-tertiary-soft);
  color: var(--c-primary-dark);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--c-surface);
}

::-webkit-scrollbar-thumb {
  background-color: var(--c-border);
  border-radius: var(--r-pill);
  border: 2px solid var(--c-surface);
}

* {
  scrollbar-color: var(--c-border) var(--c-surface);
  scrollbar-width: thin;
}


/* ==========================================================================
   03 FOCUS & ACCESSIBILITY
   ========================================================================== */

:focus {
  outline: none;
}

:focus-visible {
  outline: var(--focus-w) solid var(--c-tertiary);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-sm);
}

a:focus-visible,
.nav-link:focus-visible,
.rail-link:focus-visible,
.tab:focus-visible,
.footer-link:focus-visible,
.card-link:focus-visible,
.mono:focus-visible {
  outline-offset: 2px;
}

.btn:focus-visible,
.btn-icon:focus-visible,
.btn-group > .btn:focus-visible {
  outline-offset: 2px;
}

.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
  outline: var(--focus-w) solid var(--c-tertiary);
  outline-offset: 0;
  background-color: var(--c-tertiary-soft);
}

.option-card:focus-visible,
.step:focus-visible,
.meter-row:focus-visible,
.sop-step:focus-visible,
.queue-panel:focus-visible {
  outline: var(--focus-w) solid var(--c-tertiary);
  outline-offset: 2px;
}

.modal:focus-visible {
  outline: none;
}

.modal:focus-visible .modal-panel {
  outline: var(--focus-w) solid var(--c-tertiary);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}


/* ==========================================================================
   04 LAYOUT SHELL
   ========================================================================== */

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--c-neutral);
  color: var(--c-ink);
}

/* --- Topbar (level 2: sticky bar) --- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-h);
  flex: 0 0 var(--topbar-h);
  background-color: var(--c-surface);
  color: var(--c-primary);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow-2);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--s-lg);
  height: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  color: var(--c-primary);
  text-decoration: none;
  flex: 0 0 auto;
}

.brand:hover {
  color: var(--c-primary-dark);
  text-decoration: none;
}

.brand:focus-visible {
  outline: var(--focus-w) solid var(--c-tertiary);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-sm);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: auto;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 0;
  background-color: transparent;
  color: var(--c-on-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* The wordmark is an image wider than the 32px plate that used to hold the "GB"
   monogram, so the plate has to grow to the asset and lose its fill. */
.brand-mark img {
  width: 158px;
  height: 34px;
  display: block;
  border-radius: 0;
}

.brand-mark .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brand-text > span:first-child {
  font-size: var(--fs-body-md);
  font-weight: 650;
  letter-spacing: var(--ls-h1);
  line-height: 1.2;
  color: var(--c-primary);
  white-space: nowrap;
}

.brand-text > span:last-child {
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-label-caps);
  letter-spacing: var(--ls-label-caps);
  text-transform: uppercase;
  color: var(--c-secondary);
  line-height: var(--lh-label-caps);
  white-space: nowrap;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  margin-left: var(--s-sm);
  overflow-x: auto;
  scrollbar-width: none;
}

.topbar-nav::-webkit-scrollbar {
  display: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  height: 36px;
  padding: 0 var(--s-sm);
  border-radius: var(--r-md);
  color: var(--c-secondary);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}

.nav-link:hover {
  background-color: var(--c-primary-soft);
  color: var(--c-primary-dark);
  text-decoration: none;
}

.nav-link.is-active {
  background-color: var(--c-primary-soft);
  color: var(--c-primary);
  box-shadow: inset 2px 0 0 0 var(--c-tertiary);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  margin-left: auto;
  flex: 0 0 auto;
}

/* --- Body split --- */

.app-body {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

.sidebar {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  background-color: var(--c-surface);
  color: var(--c-ink);
  border-right: 1px solid var(--c-border);
  padding: var(--s-lg) var(--s-md) var(--s-xl);
  overflow-y: auto;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
}

.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
}

.sidebar-group > .uppercase-label,
.sidebar-group > .eyebrow {
  padding: 0 var(--s-sm);
  color: var(--c-secondary);
}

.sidebar-group > .nav-link {
  justify-content: flex-start;
  height: 40px;
  padding: 0 var(--s-sm);
  border-radius: var(--r-md);
  color: var(--c-secondary);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}

.sidebar-group > .nav-link:hover {
  background-color: var(--c-secondary-soft);
  color: var(--c-ink);
}

.sidebar-group > .nav-link.is-active {
  background-color: var(--c-primary-soft);
  color: var(--c-primary);
  font-weight: 650;
  box-shadow: inset 2px 0 0 0 var(--c-tertiary);
}

.sidebar-group > .nav-link .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* --- Report section rail --- */

.rail {
  flex: 0 0 var(--rail-w);
  width: var(--rail-w);
  padding: var(--s-lg) var(--s-md);
  border-right: 1px solid var(--c-border);
  position: sticky;
  top: var(--topbar-h);
  align-self: flex-start;
  max-height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}

.rail-link {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  padding: var(--s-sm);
  border-left: 2px solid var(--c-border);
  color: var(--c-secondary);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  text-decoration: none;
  transition: color var(--t-fast), border-color var(--t-fast),
    background-color var(--t-fast);
}

.rail-link:hover {
  color: var(--c-primary);
  background-color: var(--c-primary-soft);
  text-decoration: none;
}

.rail-link.is-active {
  border-left-color: var(--c-tertiary);
  color: var(--c-primary);
  font-weight: var(--fw-label);
  background-color: var(--c-primary-soft);
}

/* --- Main canvas --- */

.main {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--s-xl) var(--s-lg) var(--s-xxl);
}

.main-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: var(--s-xl);
}

.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container > * + * {
  margin-top: var(--s-lg);
}


/* ==========================================================================
   05 PAGE & SECTION STRUCTURE
   ========================================================================== */

.page {
  display: flex;
  flex-direction: column;
  gap: var(--s-xl);
  min-width: 0;
  flex: 1 1 auto;
}

/* A .page rendered directly into #view (wizard, queue, retrieve) has no
   .main-inner wrapper, so it must carry the reading measure itself or its
   heading sits flush against the viewport edge. Inside the report the
   .main-inner wrapper already applies the same constraint. */
#view > .page {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* A heading that receives programmatic focus for screen readers must not paint a
   focus ring: the ring is a keyboard-navigation affordance, and drawing it around
   an H1 the router focused on navigation reads as a rendering fault. */
#view [tabindex='-1']:focus,
#view [tabindex='-1']:focus-visible,
.main [tabindex='-1']:focus,
.main [tabindex='-1']:focus-visible {
  outline: none;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-md);
  padding-bottom: var(--s-md);
  border-bottom: 1px solid var(--c-border);
}

.page-title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--c-ink);
}

.page-lede {
  max-width: var(--measure-max);
  margin-top: var(--s-sm);
  font-size: var(--fs-body-lg);
  font-weight: 400;
  line-height: var(--lh-body-lg);
  color: var(--c-secondary);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-sm);
}

.section {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  scroll-margin-top: calc(var(--topbar-h) + var(--s-lg));
}

.section + .section {
  padding-top: var(--s-xl);
  border-top: 1px solid var(--c-border);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-md);
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--c-ink);
}

.section-lede {
  max-width: var(--measure-max);
  margin-top: var(--s-sm);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--c-secondary);
}

.section-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
}

.section-body > p {
  max-width: var(--measure-max);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--c-ink);
}


/* ==========================================================================
   06 GRID, STACK, ROW, UTILITIES
   ========================================================================== */

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}

.grid-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  gap: var(--s-xl);
  align-items: start;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  min-width: 0;
}

.stack > * {
  min-width: 0;
}

.stack-sm {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  min-width: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-sm);
  min-width: 0;
}

.row-between {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  min-width: 0;
}

.row-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-sm);
  min-width: 0;
}

.spacer {
  flex: 1 1 auto;
  min-width: var(--s-sm);
  min-height: 0;
}

.divider {
  width: 100%;
  height: 1px;
  background-color: var(--c-border);
  border: 0;
  margin: var(--s-sm) 0;
}

.divider + .divider {
  margin-top: var(--s-none);
}


/* ==========================================================================
   07 TYPOGRAPHY HELPERS
   ========================================================================== */

.eyebrow {
  display: inline-block;
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-label-caps);
  line-height: var(--lh-label-caps);
  letter-spacing: var(--ls-label-caps);
  text-transform: uppercase;
  color: var(--c-tertiary-dark);
}

.title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--c-ink);
}

.subtitle {
  font-size: var(--fs-h4);
  font-weight: var(--fw-h4);
  line-height: var(--lh-h4);
  color: var(--c-secondary);
}

.lede {
  max-width: var(--measure-max);
  font-size: var(--fs-body-lg);
  font-weight: 400;
  line-height: var(--lh-body-lg);
  color: var(--c-secondary);
}

.muted {
  color: var(--c-secondary);
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-variation-settings: var(--fvs-tnum);
  font-size: var(--fs-body-sm);
  letter-spacing: 0.01em;
  color: var(--c-ink);
}

.small {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}

.strong {
  font-weight: var(--fw-label);
  color: var(--c-ink);
}

.text-danger {
  color: var(--c-danger);
}

.text-success {
  color: var(--c-success);
}

.text-warning {
  color: var(--c-warning);
}

.text-info {
  color: var(--c-info);
}

.uppercase-label {
  display: inline-block;
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-label-caps);
  line-height: var(--lh-label-caps);
  letter-spacing: var(--ls-label-caps);
  text-transform: uppercase;
  color: var(--c-secondary);
}

.citation-note {
  max-width: var(--measure-max);
  padding-left: var(--s-md);
  border-left: 2px solid var(--c-border);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
}


/* ==========================================================================
   08 CARDS
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--s-lg);
  background-color: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-sm);
  margin-bottom: var(--s-md);
}

.card-title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-h4);
  line-height: var(--lh-h4);
  color: var(--c-ink);
}

.card-sub {
  margin-top: var(--s-xs);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  flex: 1 1 auto;
  min-width: 0;
}

.card-body > p {
  max-width: var(--measure-max);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--c-ink);
}

.card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-sm);
  margin-top: var(--s-lg);
  padding-top: var(--s-md);
  border-top: 1px solid var(--c-border);
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  color: var(--c-tertiary-dark);
  text-decoration: none;
}

.card-link:hover {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.card-link .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--t-fast);
}

.card-link:hover .icon {
  transform: translateX(2px);
}

.card-muted {
  background-color: var(--c-secondary-soft);
  border-color: var(--c-border);
  border-radius: var(--r-md);
  padding: var(--s-md);
}

.card-muted .card-title {
  color: var(--c-primary-dark);
}

.card-muted .card-body > p {
  color: var(--c-secondary);
}


/* ==========================================================================
   09 BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  height: var(--control-h);
  padding: 12px 20px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast),
    color var(--t-fast);
}

.btn:hover {
  text-decoration: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.btn-primary {
  background-color: var(--c-tertiary);
  color: var(--c-on-tertiary);
  border-color: var(--c-tertiary);
}

.btn-primary:hover {
  background-color: var(--c-tertiary-dark);
  border-color: var(--c-tertiary-dark);
  color: var(--c-on-tertiary);
}

.btn-primary:active {
  background-color: var(--c-tertiary-dark);
  border-color: var(--c-primary-dark);
}

.btn-secondary {
  background-color: var(--c-surface);
  color: var(--c-primary);
  border-color: var(--c-primary);
}

.btn-secondary:hover {
  background-color: var(--c-primary-soft);
  color: var(--c-primary-dark);
  border-color: var(--c-primary-dark);
}

.btn-quiet {
  background-color: var(--c-neutral);
  color: var(--c-secondary);
  border-color: var(--c-border);
  height: var(--control-h-sm);
  padding: 8px 14px;
}

.btn-quiet:hover {
  background-color: var(--c-secondary-soft);
  color: var(--c-ink);
  border-color: var(--c-border);
}

.btn-danger {
  background-color: var(--c-surface);
  color: var(--c-danger);
  border-color: var(--c-danger);
}

.btn-danger:hover {
  background-color: var(--c-danger-soft);
  color: var(--c-danger);
  border-color: var(--c-danger);
}

.btn-sm {
  height: var(--control-h-sm);
  padding: 8px 14px;
  font-size: var(--fs-body-sm);
}

.btn-lg {
  height: 48px;
  padding: 14px 24px;
  font-size: var(--fs-body-md);
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  width: var(--control-h);
  height: var(--control-h);
  padding: 0;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background-color: var(--c-surface);
  color: var(--c-secondary);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast),
    border-color var(--t-fast);
}

.btn-icon:hover {
  background-color: var(--c-secondary-soft);
  color: var(--c-ink);
  border-color: var(--c-border);
}

.btn-icon .icon {
  width: 18px;
  height: 18px;
}

.btn-group {
  display: inline-flex;
  align-items: stretch;
  gap: var(--s-xs);
}

.btn-group > .btn {
  border-radius: var(--r-md);
}

.btn-group > .btn:not(:first-child) {
  margin-left: calc(var(--s-xs) * -1 + 1px);
}


/* ==========================================================================
   10 BADGES, TAGS, CHIPS, PILLS
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-label-caps);
  line-height: var(--lh-label-caps);
  letter-spacing: var(--ls-label-caps);
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.badge .icon {
  width: 12px;
  height: 12px;
  stroke-width: 2;
}

.badge-neutral {
  background-color: var(--c-secondary-soft);
  color: var(--c-secondary);
  border-color: var(--c-border);
}

.badge-primary {
  background-color: var(--c-primary-soft);
  color: var(--c-primary);
  border-color: var(--c-border);
}

.badge-success {
  background-color: var(--c-success-soft);
  color: var(--c-success);
  border-color: var(--c-success-soft);
}

.badge-warning {
  background-color: var(--c-warning-soft);
  color: var(--c-warning);
  border-color: var(--c-warning-soft);
}

.badge-danger {
  background-color: var(--c-danger-soft);
  color: var(--c-danger);
  border-color: var(--c-danger-soft);
}

.badge-info {
  background-color: var(--c-info-soft);
  color: var(--c-info);
  border-color: var(--c-info-soft);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  padding: 2px 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background-color: var(--c-surface);
  color: var(--c-secondary);
  font-size: var(--fs-body-sm);
  line-height: 1.4;
}

.tag .mono {
  font-size: var(--fs-body-sm);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  padding: 4px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background-color: var(--c-primary-soft);
  color: var(--c-primary);
  font-size: var(--fs-body-sm);
  line-height: 1.4;
}

.chip.is-removable {
  padding-right: 6px;
}

.chip .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background-color: var(--c-secondary-soft);
  color: var(--c-secondary);
  font-family: var(--font-mono);
  font-size: var(--fs-label-caps);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}


/* ==========================================================================
   11 STAT TILES & KPI SCOREBOARD
   ========================================================================== */

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  padding: 20px;
  background-color: var(--c-surface);
  color: var(--c-primary);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  min-width: 0;
}

.stat-label {
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-label-caps);
  line-height: var(--lh-label-caps);
  letter-spacing: var(--ls-label-caps);
  text-transform: uppercase;
  color: var(--c-secondary);
}

.stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-variation-settings: var(--fvs-tnum);
  font-size: var(--fs-metric);
  font-weight: var(--fw-metric);
  line-height: var(--lh-metric);
  letter-spacing: -0.01em;
  color: var(--c-primary-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-meta {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
}

.stat-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  align-self: flex-start;
  margin-top: var(--s-xs);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  background-color: var(--c-secondary-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-label-caps);
  font-weight: 600;
  line-height: 1.6;
  color: var(--c-secondary);
}

.stat-delta.is-up {
  background-color: var(--c-success-soft);
  border-color: var(--c-success-soft);
  color: var(--c-success);
}

.stat-delta.is-down {
  background-color: var(--c-danger-soft);
  border-color: var(--c-danger-soft);
  color: var(--c-danger);
}

.stat-delta.is-flat {
  background-color: var(--c-secondary-soft);
  border-color: var(--c-border);
  color: var(--c-secondary);
}

.kpi-scoreboard {
  display: flex;
  flex-direction: column;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.kpi-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  padding: var(--s-md) var(--s-lg);
  border-top: 1px solid var(--c-border);
  background-color: var(--c-surface);
}

.kpi-row:first-child {
  border-top: 0;
}

.kpi-row:hover {
  background-color: var(--c-primary-soft);
}

.kpi-row > .stat-label {
  flex: 1 1 220px;
  min-width: 0;
}

.kpi-row > .stat-value {
  font-size: var(--fs-metric-sm);
  font-weight: var(--fw-metric-sm);
  line-height: var(--lh-metric-sm);
  text-align: right;
}


/* ==========================================================================
   12 TABLES
   ========================================================================== */

.table-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  margin: 0;
  min-width: 0;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

/* A long table gets its own scroll box so the header row can actually stick. */
.table-wrap--tall {
  max-height: min(64vh, 560px);
  overflow-y: auto;
}

.table-wrap > .data-table {
  border: 0;
  border-radius: 0;
}

.table-note {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  padding: 0 var(--s-xs);
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-label-caps);
  line-height: var(--lh-label-caps);
  letter-spacing: var(--ls-label-caps);
  text-transform: uppercase;
  color: var(--c-secondary);
}

.table-note .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  stroke-width: 2;
}

.table-empty {
  padding: var(--s-md);
  background-color: var(--c-secondary-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
}

.data-table {
  width: 100%;
  min-width: 640px;
  background-color: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}

.data-table--compact {
  min-width: 420px;
}

.data-table caption {
  caption-side: top;
  padding: var(--s-md) var(--s-md) var(--s-sm);
  text-align: left;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-label);
  line-height: var(--lh-body-sm);
  color: var(--c-primary-dark);
}

.table-caption {
  font-weight: var(--fw-label);
  color: var(--c-primary-dark);
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px var(--s-md);
  background-color: var(--c-secondary-soft);
  color: var(--c-primary);
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-label-caps);
  line-height: var(--lh-label-caps);
  letter-spacing: var(--ls-label-caps);
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--c-border);
}

.data-table thead th:first-child {
  border-top-left-radius: var(--r-sm);
}

.data-table thead th:last-child {
  border-top-right-radius: var(--r-sm);
}

.data-table tbody th {
  padding: 12px var(--s-md);
  text-align: left;
  font-weight: var(--fw-label);
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-border);
}

.data-table td {
  padding: 12px var(--s-md);
  text-align: left;
  vertical-align: top;
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-border);
}

.data-table tbody tr:last-child > td,
.data-table tbody tr:last-child > th {
  border-bottom: 0;
}

.data-table tbody tr {
  background-color: var(--c-surface);
  transition: background-color var(--t-fast);
}

.data-table tbody tr:hover {
  background-color: var(--c-primary-soft);
}

.data-table tbody th,
.data-table tbody td {
  padding: 14px var(--s-md);
  vertical-align: top;
}

.data-table tbody tr:last-child > td,
.data-table tbody tr:last-child > th {
  border-bottom: 0;
}

.data-table tbody tr {
  background-color: var(--c-surface);
  transition: background-color var(--t-fast);
}

.data-table tbody tr:hover {
  background-color: var(--c-primary-soft);
}

/* Totals row: a heavier top rule and a tinted fill so it never reads as data. */
.data-table tfoot td,
.data-table tfoot th {
  padding: 14px var(--s-md);
  background-color: var(--c-primary-soft);
  color: var(--c-primary-dark);
  font-weight: var(--fw-label);
  vertical-align: top;
  border-top: 2px solid var(--c-primary);
}

.data-table tfoot td.td-num {
  font-weight: 600;
}

.td-num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-variation-settings: var(--fvs-tnum);
  font-size: var(--fs-body-sm);
  white-space: nowrap;
}

.data-table thead th.td-num {
  font-family: var(--font-sans);
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-label-caps);
  letter-spacing: var(--ls-label-caps);
  text-align: right;
}

.scroll-x {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   13 PROGRESS, METERS, QUEUE
   ========================================================================== */

.progress {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  min-width: 0;
}

.progress > .row-between > .uppercase-label,
.progress > .row-between > .stat-label {
  flex: 0 0 auto;
}

.progress > .row-between > .mono {
  flex: 0 0 auto;
  color: var(--c-secondary);
}

.progress-track {
  width: 100%;
  height: 8px;
  background-color: var(--c-secondary-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  min-width: 8px;
  background-color: var(--c-tertiary);
  color: var(--c-on-tertiary);
  border-radius: var(--r-pill);
  transition: width var(--t-layout);
}

.progress-fill.is-warning {
  background-color: var(--c-warning);
}

.progress-fill.is-danger {
  background-color: var(--c-danger);
}

.meter {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  min-width: 0;
}

.meter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  min-width: 0;
}

.meter-label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  min-width: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-label);
  color: var(--c-ink);
}

.meter-label > .mono {
  color: var(--c-secondary);
  font-weight: 400;
}

.meter > .meter-row > .mono,
.meter > .meter-row + .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-variation-settings: var(--fvs-tnum);
  font-size: var(--fs-body-sm);
  color: var(--c-secondary);
  white-space: nowrap;
}

.meter-fill {
  position: relative;
  height: 8px;
  min-width: 4px;
  background-color: var(--c-secondary-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.meter-fill::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--meter-value, 0%);
  background-color: var(--c-tertiary);
  border-radius: var(--r-pill);
  transition: width var(--t-layout);
}

.meter-fill.is-success::after {
  background-color: var(--c-success);
}

.meter-fill.is-warning::after {
  background-color: var(--c-warning);
}

.meter-fill.is-danger::after {
  background-color: var(--c-danger);
}

.meter-fill.is-neutral::after {
  background-color: var(--c-secondary);
}

.queue-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  padding: var(--s-md);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.queue-position {
  display: flex;
  align-items: baseline;
  gap: var(--s-sm);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
}

.queue-position > .mono {
  font-size: var(--fs-metric-sm);
  font-weight: 600;
  color: var(--c-primary-dark);
}

.queue-bar {
  position: relative;
  height: 8px;
  background-color: var(--c-secondary-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.queue-bar > span,
.queue-bar > .queue-bar-fill {
  display: block;
  height: 100%;
  width: var(--queue-value, 0%);
  background-color: var(--c-tertiary);
  border-radius: var(--r-pill);
  transition: width var(--t-layout);
}

.queue-panel > .small {
  color: var(--c-secondary);
}


/* ==========================================================================
   14 CALLOUTS
   ========================================================================== */

.callout {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  padding: var(--s-md);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  max-width: var(--measure-max);
}

.callout-title {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  color: inherit;
}

.callout-title .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.callout p,
.callout > p {
  color: inherit;
}

.callout > .small,
.callout > .citation-note {
  color: inherit;
  opacity: 0.92;
}

.callout-info {
  background-color: var(--c-info-soft);
  border-color: var(--c-info);
  color: var(--c-info);
}

.callout-warning {
  background-color: var(--c-warning-soft);
  border-color: var(--c-warning);
  color: var(--c-warning);
}

.callout-success {
  background-color: var(--c-success-soft);
  border-color: var(--c-success);
  color: var(--c-success);
}

.callout-danger {
  background-color: var(--c-danger-soft);
  border-color: var(--c-danger);
  color: var(--c-danger);
}


/* ==========================================================================
   15 LISTS
   ========================================================================== */

.list-check,
.list-bullet,
.list-dash {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  list-style: none;
  max-width: var(--measure-max);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--c-ink);
}

.list-check > li,
.list-bullet > li,
.list-dash > li {
  position: relative;
  padding-left: var(--s-lg);
  min-width: 0;
}

.list-check > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.34em;
  width: 6px;
  height: 10px;
  border: 2px solid var(--c-tertiary);
  border-top: 0;
  border-left: 0;
  border-radius: 1px;
  transform: rotate(40deg);
}

.list-bullet > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background-color: var(--c-primary);
}

.list-dash > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 10px;
  height: 2px;
  border-radius: var(--r-pill);
  background-color: var(--c-border);
}

.list-check > li > .small,
.list-bullet > li > .small,
.list-dash > li > .small {
  display: block;
  margin-top: var(--s-xs);
  color: var(--c-secondary);
}


/* ==========================================================================
   16 STEPPER
   ========================================================================== */

.stepper {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--s-sm);
  list-style: none;
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: var(--s-sm);
  flex: 1 1 168px;
  min-width: 0;
  padding: var(--s-sm) var(--s-md);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background-color: var(--c-surface);
  color: var(--c-secondary);
  text-decoration: none;
  transition: background-color var(--t-fast), border-color var(--t-fast),
    color var(--t-fast);
}

.step:hover {
  background-color: var(--c-primary-soft);
  color: var(--c-primary-dark);
  text-decoration: none;
}

.step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.step-meta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-variation-settings: var(--fvs-tnum);
  font-size: var(--fs-label-caps);
  font-weight: 500;
  letter-spacing: var(--ls-label-caps);
  text-transform: uppercase;
  color: var(--c-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.step.is-done .step-meta {
  color: var(--c-tertiary-dark);
}

.step-index {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background-color: var(--c-neutral);
  color: var(--c-secondary);
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.step-label {
  min-width: 0;
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  /* Step names are real words ("Market and customer"), so a truncated label reads
     as a rendering fault. Wrap to a second line instead of clipping. */
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: break-word;
}

.step.is-incomplete {
  border-style: dashed;
  border-color: var(--c-border);
}

.step.is-active {
  background-color: var(--c-primary-soft);
  border-color: var(--c-tertiary);
  border-style: solid;
  color: var(--c-primary-dark);
}

.step.is-active .step-index {
  background-color: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-on-primary);
}

.step.is-active .step-meta {
  color: var(--c-primary);
}

.step.is-done {
  background-color: var(--c-tertiary-soft);
  border-color: var(--c-tertiary-soft);
  color: var(--c-tertiary-dark);
}

.step.is-done .step-index {
  background-color: var(--c-tertiary);
  border-color: var(--c-tertiary);
  color: var(--c-on-tertiary);
  position: relative;
}

.step.is-done .step-index::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  width: 5px;
  height: 9px;
  border: 2px solid var(--c-on-tertiary);
  border-top: 0;
  border-left: 0;
  border-radius: 1px;
  transform: rotate(40deg);
}

.step.is-done .step-index > * {
  visibility: hidden;
}


/* ==========================================================================
   17 WIZARD & ONBOARDING
   ========================================================================== */

.wizard {
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
  width: 100%;
  max-width: var(--wizard-max);
  margin: 0 auto;
}

.wizard-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
  padding: var(--s-xl);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

.wizard-progress {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  width: 100%;
}

.wizard-progress > .progress-track {
  height: 6px;
}

.wizard-footer {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  margin: 0 calc(var(--s-xl) * -1) calc(var(--s-xl) * -1);
  padding: var(--s-md) var(--s-xl);
  background-color: var(--c-surface);
  border-top: 1px solid var(--c-border);
  box-shadow: var(--shadow-2);
}

.wizard-foot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-sm);
  min-width: 0;
}

.wizard-foot-top > .mono {
  flex: 0 0 auto;
  color: var(--c-primary-dark);
}

.wizard-progress {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  width: 100%;
}

.wizard-progress > .progress-track {
  height: 6px;
}

.wizard-foot-actions {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  min-width: 0;
}

.wizard-foot-actions > .btn {
  flex: 0 0 auto;
}

.wizard-next-note {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--s-xs);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
}

.wizard-next-note .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin-top: 2px;
}

.wizard-next-note strong {
  font-weight: var(--fw-label);
  color: var(--c-ink);
}

.wizard-hint {
  min-height: 22px;
}

.wizard-hint.is-error {
  color: var(--c-danger);
}

.question {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  min-width: 0;
}

.question > .label,
.question > .title {
  color: var(--c-ink);
}

.question-help {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
  max-width: var(--measure-max);
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-sm);
  margin-top: var(--s-xs);
}

.option-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  padding: 14px 16px;
  background-color: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast),
    color var(--t-fast);
}

.option-card:hover {
  background-color: var(--c-primary-soft);
  color: var(--c-primary-dark);
  border-color: var(--c-primary);
}

.option-card.is-selected {
  background-color: var(--c-tertiary-soft);
  border-color: var(--c-tertiary);
  border-width: 2px;
  padding: 13px 15px;
  color: var(--c-primary-dark);
  font-weight: var(--fw-label);
}

/* A card that cannot be picked because a cap or an exclusive choice is active. */
.option-card:disabled,
.option-card[aria-disabled="true"] {
  background-color: var(--c-neutral);
  border-color: var(--c-border);
  border-style: dashed;
  color: var(--c-secondary);
  cursor: not-allowed;
  opacity: 1;
}

.option-card:disabled .option-hint,
.option-card[aria-disabled="true"] .option-hint {
  color: var(--c-secondary);
}

.option-card.is-exclusive {
  border-color: var(--c-secondary);
  background-color: var(--c-secondary-soft);
}

.option-card.is-exclusive.is-selected {
  border-color: var(--c-tertiary);
  background-color: var(--c-tertiary-soft);
}

.option-flag {
  align-self: flex-start;
  padding: 1px 6px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background-color: var(--c-surface);
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-label-caps);
  line-height: 1.6;
  letter-spacing: var(--ls-label-caps);
  text-transform: uppercase;
  color: var(--c-secondary);
  white-space: nowrap;
}

.option-grid-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-sm);
  margin-top: var(--s-xs);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
}

.option-grid-meta .pill-count {
  flex: 0 0 auto;
}

.option-grid-meta .pill-count.is-at-cap {
  background-color: var(--c-warning-soft);
  color: var(--c-warning);
}

.option-label {
  padding-right: var(--s-xl);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  color: inherit;
}

.option-hint {
  font-size: var(--fs-body-sm);
  font-weight: 400;
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
}

.option-check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background-color: var(--c-surface);
  pointer-events: none;
}

.option-check::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  width: 5px;
  height: 9px;
  border: 2px solid var(--c-on-tertiary);
  border-top: 0;
  border-left: 0;
  border-radius: 1px;
  transform: rotate(40deg) scale(0);
  transform-origin: center;
  transition: transform var(--t-fast);
}

.option-card.is-selected .option-check {
  background-color: var(--c-tertiary);
  border-color: var(--c-tertiary);
}

.option-card.is-selected .option-check::after {
  transform: rotate(40deg) scale(1);
}


/* ==========================================================================
   18 FORMS
   ========================================================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  min-width: 0;
}

.label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  color: var(--c-ink);
}

.required-mark {
  color: var(--c-danger);
  font-weight: 700;
}

.input,
.textarea,
.select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--control-h);
  padding: 10px 12px;
  background-color: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: var(--fs-body-md);
  line-height: 1.4;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--c-secondary);
  opacity: 1;
}

.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--c-secondary);
}

.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--c-tertiary);
}

.input:disabled,
.textarea:disabled,
.select:disabled {
  background-color: var(--c-neutral);
  color: var(--c-secondary);
  cursor: not-allowed;
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select[aria-invalid="true"] {
  border-color: var(--c-danger);
  background-color: var(--c-danger-soft);
}

.textarea {
  min-height: 120px;
  resize: vertical;
  line-height: var(--lh-body-md);
}

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: none;
  cursor: pointer;
}

.select-wrap {
  position: relative;
  display: block;
}

.select-wrap::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--c-secondary);
  border-bottom: 2px solid var(--c-secondary);
  border-radius: 1px;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.help {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
  max-width: var(--measure-max);
}

.help-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
}

.help-inline .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.error-text {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: var(--lh-body-sm);
  color: var(--c-danger);
}

.error-text .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}


/* ==========================================================================
   19 TABS
   ========================================================================== */

.tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--s-lg);
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  flex: 0 0 auto;
  padding: var(--s-sm) 0;
  border-bottom: 2px solid transparent;
  color: var(--c-secondary);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.tab:hover {
  color: var(--c-primary);
  text-decoration: none;
}

.tab.is-active {
  color: var(--c-primary);
  border-bottom-color: var(--c-tertiary);
}

.tab .pill-count {
  margin-left: var(--s-xs);
}

.tabpanel {
  padding-top: var(--s-lg);
}


/* ==========================================================================
   20 HERO & LANDING
   ========================================================================== */

.hero {
  display: flex;
  flex-direction: column;
}

.hero-band {
  position: relative;
  background-color: var(--c-primary);
  background-image: linear-gradient(
    180deg,
    var(--c-primary) 0%,
    var(--c-primary-dark) 100%
  );
  color: var(--c-on-primary);
  padding: var(--s-section) 0;
}

.hero-inner {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-xl);
  align-items: start;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
  min-width: 0;
}

/* The single-column measure a reader actually wants, set once here rather than
   on each text node. Above 1024px the copy and the expectation panel sit side by
   side so the band does not leave half the viewport empty. */
.hero-title {
  max-width: 24ch;
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--c-on-primary);
}

.hero-lede {
  max-width: 58ch;
  font-size: var(--fs-body-lg);
  font-weight: 400;
  line-height: var(--lh-body-lg);
  color: var(--c-on-primary);
  opacity: 0.9;
}

.hero-inner .eyebrow {
  color: var(--c-on-primary);
  opacity: 0.85;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-sm);
  padding-top: var(--s-sm);
}

/* Secondary routes are links, not buttons: a button on a hero competes with the
   primary action and four equal-weight controls read as an unresolved decision. */
.hero-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-lg);
  padding-top: var(--s-xs);
}

.hero-secondary-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  min-height: 32px;
  font-size: var(--fs-body-md);
  font-weight: var(--fw-label);
  color: var(--c-on-primary);
  opacity: 0.82;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: opacity var(--t-fast), border-color var(--t-fast);
}

.hero-secondary-link:hover {
  opacity: 1;
  border-bottom-color: currentColor;
}

.btn-outline-inverse {
  background-color: transparent;
  color: var(--c-on-primary);
  border: 1px solid rgb(255 255 255 / 42%);
}

.btn-outline-inverse:hover {
  background-color: rgb(255 255 255 / 10%);
  border-color: var(--c-on-primary);
  color: var(--c-on-primary);
}

.hero-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  padding: var(--s-lg);
  background-color: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--r-lg);
  min-width: 0;
}

.hero-panel .eyebrow {
  color: var(--c-on-primary);
  opacity: 0.7;
}

.hero-meta {
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
  padding-top: var(--s-lg);
  border-top: 1px solid rgb(255 255 255 / 14%);
}

.callout-inverse {
  background-color: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 16%);
  color: var(--c-on-primary);
}

.callout-inverse .callout-title {
  color: var(--c-on-primary);
}

.callout-inverse p {
  color: var(--c-on-primary);
  opacity: 0.86;
}

.hero-actions .btn-quiet {
  background-color: var(--c-primary-dark);
  color: var(--c-on-primary);
  border-color: var(--c-primary);
}

.hero-actions .btn-quiet:hover {
  background-color: var(--c-primary);
  color: var(--c-on-primary);
  border-color: var(--c-primary-soft);
}


/* ==========================================================================
   21 FEATURES
   ========================================================================== */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  padding: var(--s-section) 0;
}

.feature {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  padding: var(--s-lg);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  min-width: 0;
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: var(--r-md);
  background-color: var(--c-tertiary-soft);
  color: var(--c-tertiary-dark);
}

.feature-icon .icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
}

.feature-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--c-ink);
}

.feature-body {
  max-width: var(--measure-max);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--c-secondary);
}


/* ==========================================================================
   22 FOOTER
   ========================================================================== */

.footer {
  background-color: var(--c-primary-dark);
  color: var(--c-on-primary);
  padding: var(--s-xxl) 0 var(--s-xl);
  margin-top: var(--s-section);
}

.footer-inner {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  min-width: 0;
}

.footer-col > .uppercase-label {
  color: var(--c-on-primary);
  opacity: 0.75;
}

.footer-col > p {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-on-primary);
  opacity: 0.8;
  max-width: 32ch;
}

.footer-link {
display: inline-block;
  /* Comfortable on a phone: the row, not the glyphs, carries the 32px target. */
  padding: 6px 0;
  min-height: 32px;
  color: var(--c-on-primary);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  opacity: 0.85;
  text-decoration: none;
}

.footer-link:hover {
  color: var(--c-on-primary);
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer > .divider {
  background-color: var(--c-primary);
  opacity: 0.4;
  margin: var(--s-xl) 0;
}

.footer-base {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-sm);
  font-size: var(--fs-body-sm);
  color: var(--c-on-primary);
  opacity: 0.8;
}


/* ==========================================================================
   23 SOP DOCUMENTS
   ========================================================================== */

.sop {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  padding: var(--s-lg);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  min-width: 0;
}

.sop-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-sm);
  padding-bottom: var(--s-md);
  border-bottom: 1px solid var(--c-border);
}

.sop-head > .stack {
  flex: 1 1 260px;
}

.sop-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-sm);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
}

.sop-meta .mono {
  color: var(--c-primary-dark);
}

.sop-meta > .divider {
  width: 1px;
  height: 14px;
  margin: 0;
  background-color: var(--c-border);
}

.sop-steps {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  list-style: none;
  counter-reset: sop-step;
}

.sop-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  padding: var(--s-md);
  padding-left: 52px;
  background-color: var(--c-neutral);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  counter-increment: sop-step;
  min-width: 0;
}

.sop-step::before {
  content: counter(sop-step);
  position: absolute;
  left: var(--s-md);
  top: var(--s-md);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-md);
  background-color: var(--c-primary);
  color: var(--c-on-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1;
}

.sop-step > .label {
  color: var(--c-ink);
}

.sop-step > p {
  max-width: var(--measure-max);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-ink);
}

.sop-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  list-style: none;
  padding-top: var(--s-sm);
  border-top: 1px solid var(--c-border);
}

.sop-checklist > li {
  position: relative;
  padding-left: var(--s-lg);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
}

.sop-checklist > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 12px;
  height: 12px;
  border: 1px solid var(--c-tertiary);
  border-radius: var(--r-sm);
  background-color: var(--c-surface);
}

.sop-checklist > li.is-done::before {
  background-color: var(--c-tertiary);
}


/* ==========================================================================
   24 ICONS
   ========================================================================== */

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  vertical-align: middle;
  color: inherit;
}

.icon-lg {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
}

.icon-sm {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  stroke-width: 2;
}


/* ==========================================================================
   25 SKELETONS & EMPTY STATES
   ========================================================================== */

.skeleton {
  display: block;
  width: 100%;
  background-color: var(--c-secondary-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton-line {
  display: block;
  width: 100%;
  height: 12px;
  background-color: var(--c-secondary-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton-line + .skeleton-line {
  margin-top: var(--s-sm);
}

.skeleton-line.is-short {
  width: 60%;
}

.skeleton-line.is-medium {
  width: 80%;
}

@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-sm);
  padding: var(--s-xl);
  background-color: var(--c-surface);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-lg);
  text-align: center;
}

.empty .icon {
  color: var(--c-secondary);
  margin-bottom: var(--s-xs);
}

.empty-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--c-ink);
}

.empty-body {
  max-width: 46ch;
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--c-secondary);
}

.empty > .btn,
.empty > .row {
  margin-top: var(--s-sm);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   26 TOASTS & MODALS
   ========================================================================== */

.toast {
  position: fixed;
  right: var(--s-lg);
  bottom: var(--s-lg);
  z-index: 60;
  width: min(360px, calc(100vw - var(--s-xl)));
}

.toast-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-sm);
  padding: var(--s-md);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-primary);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-ink);
}

.toast-inner > .stack {
  flex: 1 1 auto;
}

.toast.is-success .toast-inner,
.toast-success .toast-inner {
  border-left-color: var(--c-success);
}

.toast.is-warning .toast-inner,
.toast-warning .toast-inner {
  border-left-color: var(--c-warning);
}

.toast.is-danger .toast-inner,
.toast-danger .toast-inner {
  border-left-color: var(--c-danger);
}

.toast.is-info .toast-inner,
.toast-info .toast-inner {
  border-left-color: var(--c-info);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-lg);
  background-color: var(--c-scrim);
  overflow-y: auto;
}

.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
}

.modal-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - var(--s-xxl));
  background-color: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

.modal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-sm);
  padding: var(--s-lg);
  border-bottom: 1px solid var(--c-border);
}

.modal-body {
  flex: 1 1 auto;
  padding: var(--s-lg);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
}

.modal-body > p {
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--c-ink);
}

.modal-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-sm);
  padding: var(--s-md) var(--s-lg);
  background-color: var(--c-secondary-soft);
  border-top: 1px solid var(--c-border);
}


/* ==========================================================================
   26b UX OVERHAUL
   Report reading rhythm, at-a-glance figures, demo controls, the queue stage
   strip, the landing page bands and the review step.
   ========================================================================== */

/* --- Report: at a glance --- */

.glance {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  padding: var(--s-lg);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-primary);
  border-radius: var(--r-lg);
}

.glance-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-sm);
  padding-bottom: var(--s-sm);
  border-bottom: 1px solid var(--c-border);
}

.glance-note {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
}

.glance-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-md);
}

.glance-tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  min-width: 0;
  padding: var(--s-sm) var(--s-md);
  background-color: var(--c-neutral);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.glance-tile .stat-value {
  font-size: 1.375rem;
  line-height: 1.2;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* --- Report: section reading rhythm --- */

.section-head-main {
  display: flex;
  align-items: flex-start;
  gap: var(--s-md);
  min-width: 0;
}

.section-index {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  flex: 0 0 auto;
  padding: 0 var(--s-sm);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background-color: var(--c-surface);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-variation-settings: var(--fvs-tnum);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1;
  color: var(--c-primary);
}

.section > .section-head {
  padding-bottom: var(--s-md);
  border-bottom: 2px solid var(--c-primary);
}

.section-owner {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  padding-top: var(--s-sm);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
}

.section-owner .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

/* A labelled unit of content inside a section: the label sits on the block. */
.block {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  min-width: 0;
}

.block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-sm);
}

.block-head > .uppercase-label {
  color: var(--c-primary);
}

.block-note {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
}

.rail-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-sm);
  min-width: 0;
}

.rail-index {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-variation-settings: var(--fvs-tnum);
  font-size: var(--fs-label-caps);
  font-weight: 500;
  color: var(--c-secondary);
  opacity: 0.8;
}

.rail-link.is-active .rail-index {
  color: var(--c-tertiary-dark);
  opacity: 1;
}

.rail-links {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
}

.rail-foot {
  padding: var(--s-sm);
  background-color: var(--c-neutral);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
}

.rail-toggle {
  display: none;
}

/* --- Report: severity triage --- */

.severity-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-sm);
  padding: var(--s-md);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.issue-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  padding-top: var(--s-md);
  border-top: 1px solid var(--c-border);
}

.issue-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-sm);
}

.issue-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-variation-settings: var(--fvs-tnum);
  font-size: var(--fs-body-sm);
  color: var(--c-secondary);
}

.issue-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
}

/* --- Demo controls --- */

.demo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  padding: var(--s-md) var(--s-lg);
  background-color: var(--c-neutral);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

.demo-bar-copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  flex: 1 1 260px;
  min-width: 0;
}

.demo-bar-copy > p {
  max-width: var(--measure-max);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
}

.demo-bar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-sm);
  flex: 0 1 auto;
}

.segmented {
  display: inline-flex;
  align-items: stretch;
  gap: var(--s-xs);
  padding: 3px;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.segmented-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  height: 32px;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background-color: transparent;
  color: var(--c-secondary);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-label);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast),
    border-color var(--t-fast);
}

.segmented-btn:hover {
  background-color: var(--c-secondary-soft);
  color: var(--c-ink);
}

.segmented-btn[aria-pressed="true"] {
  background-color: var(--c-tertiary-soft);
  border-color: var(--c-tertiary);
  color: var(--c-tertiary-dark);
}

.demo-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--s-md);
  padding: var(--s-md);
  background-color: var(--c-warning-soft);
  border: 1px solid var(--c-warning);
  border-radius: var(--r-md);
}

.demo-notice-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: var(--r-md);
  background-color: var(--c-surface);
  color: var(--c-warning);
}

.demo-notice-icon .icon {
  width: 18px;
  height: 18px;
}

.demo-notice-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  flex: 1 1 auto;
  min-width: 0;
}

.demo-notice-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-sm);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  color: var(--c-warning);
}

.demo-notice-body > p {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-warning);
}

.demo-notice-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid var(--c-warning);
  border-radius: var(--r-md);
  background-color: var(--c-surface);
  color: var(--c-warning);
  cursor: pointer;
  transition: background-color var(--t-fast);
}

.demo-notice-close:hover {
  background-color: var(--c-warning-soft);
}

.demo-notice-close .icon {
  width: 16px;
  height: 16px;
}

.demo-chip {
  background-color: var(--c-surface);
  border-color: var(--c-warning);
  color: var(--c-warning);
}

/* --- Wizard review step --- */

.review-coverage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-md);
  padding: var(--s-md) var(--s-lg);
  background-color: var(--c-secondary-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.review-coverage > .stat-value {
  font-size: 1.375rem;
}

.review-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  min-width: 0;
}

.review-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-sm);
  padding-bottom: var(--s-sm);
  border-bottom: 1px solid var(--c-border);
}

.review-list {
  display: flex;
  flex-direction: column;
}

.review-row {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: var(--s-md);
  align-items: start;
  padding: var(--s-sm) 0;
  border-bottom: 1px solid var(--c-border);
  min-width: 0;
}

.review-row:last-child {
  border-bottom: 0;
}

.review-key {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  min-width: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
}

.review-key .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.review-val {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-xs);
  min-width: 0;
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--c-ink);
  overflow-wrap: anywhere;
}

.review-val.is-empty {
  color: var(--c-secondary);
}

.review-val .tag {
  font-size: var(--fs-body-sm);
}

/* --- Queue stage strip --- */

.queue-panel {
  gap: var(--s-md);
  padding: var(--s-lg);
}

.queue-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-md);
  padding-bottom: var(--s-md);
  border-bottom: 1px solid var(--c-border);
}

.queue-title {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  min-width: 0;
}

.queue-title > strong {
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--c-ink);
}

.queue-stages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.queue-stage {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  flex: 1 1 120px;
  min-width: 0;
  padding: var(--s-sm) var(--s-md);
  background-color: var(--c-neutral);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
}

.queue-stage-index {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background-color: var(--c-surface);
  font-family: var(--font-mono);
  font-size: var(--fs-label-caps);
  font-weight: 600;
  line-height: 1;
  color: var(--c-secondary);
}

.queue-stage.is-done {
  background-color: var(--c-success-soft);
  border-color: var(--c-success);
  color: var(--c-success);
}

.queue-stage.is-active {
  background-color: var(--c-primary-soft);
  border-color: var(--c-primary);
  color: var(--c-primary-dark);
  font-weight: var(--fw-label);
}

.queue-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-md);
  padding: var(--s-md);
  background-color: var(--c-neutral);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.queue-fact {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  min-width: 0;
}

.queue-fact-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-variation-settings: var(--fvs-tnum);
  font-size: var(--fs-metric-sm);
  font-weight: var(--fw-metric-sm);
  line-height: var(--lh-metric-sm);
  color: var(--c-primary-dark);
  overflow-wrap: anywhere;
}

/* --- Landing --- */

.hero-deliverables {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs) var(--s-sm);
  max-width: none;
}

.hero-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-lg);
  width: 100%;
  margin: 0;
}

.hero-fact {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  padding: 0;
  background-color: transparent;
  min-width: 0;
}

.hero-fact dt {
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-label-caps);
  line-height: var(--lh-label-caps);
  letter-spacing: var(--ls-label-caps);
  text-transform: uppercase;
  color: var(--c-on-primary);
  opacity: 0.75;
}

.hero-fact dd {
  margin: 0;
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--c-on-primary);
}

.hero-facts .mono {
  color: var(--c-on-primary);
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  counter-reset: how-step;
}

.how-step {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  min-width: 0;
  padding-top: var(--s-md);
  border-top: 2px solid var(--c-primary);
}

.how-step-index {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-variation-settings: var(--fvs-tnum);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-tertiary-dark);
}

.how-step-title {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  font-size: var(--fs-h4);
  font-weight: var(--fw-h4);
  line-height: var(--lh-h4);
  color: var(--c-ink);
}

.how-step-title .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--c-secondary);
}

.how-step-body {
  max-width: var(--measure-max);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
}

.limit-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  padding: var(--s-lg);
  background-color: var(--c-secondary-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

.limit-item {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  min-width: 0;
}

.limit-item-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-variation-settings: var(--fvs-tnum);
  font-size: var(--fs-body-md);
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-primary-dark);
}

.demo-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
  padding: var(--s-xl);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

.demo-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}

.demo-option {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  min-width: 0;
  padding: var(--s-lg);
  background-color: var(--c-neutral);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}

.demo-option:hover {
  background-color: var(--c-primary-soft);
  border-color: var(--c-primary);
  text-decoration: none;
}

.demo-option-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-sm);
}

.demo-option-name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--c-ink);
}

.demo-option-body {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-secondary);
}

.demo-option-go {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  margin-top: auto;
  padding-top: var(--s-sm);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  color: var(--c-tertiary-dark);
}

.demo-option-go .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  transition: transform var(--t-fast);
}

.demo-option:hover .demo-option-go .icon {
  transform: translateX(2px);
}

.grounding-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.grounding-list > li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-md);
  min-width: 0;
}

.grounding-list .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 2px;
  color: var(--c-primary);
}

.grounding-text {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  min-width: 0;
}

.grounding-text > strong {
  font-weight: var(--fw-label);
  color: var(--c-ink);
}

.grounding-text > span {
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--c-secondary);
}

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-lg);
  padding: var(--s-xl);
  background-color: var(--c-primary-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

.cta-band-copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  min-width: 0;
  flex: 1 1 320px;
}

.cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-sm);
  flex: 0 1 auto;
}


/* ==========================================================================
   27 RESPONSIVE  (1440 -> 360)
   ========================================================================== */

@media (max-width: 1440px) {
  :root {
    --content-max: 1200px;
  }
}

@media (max-width: 1200px) {
  .main-inner {
    gap: var(--s-lg);
  }

  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rail {
    --rail-w: 184px;
  }
}

@media (max-width: 1024px) {
  :root {
    --sidebar-w: 232px;
  }

  .main {
    padding: var(--s-lg) var(--s-md) var(--s-xl);
  }

  .topbar-inner {
    gap: var(--s-md);
  }

  .topbar-nav {
    order: 3;
    flex: 1 1 100%;
  }

  .topbar {
    height: auto;
    flex: 0 0 auto;
    min-height: var(--topbar-h);
  }

  .app-body {
    flex-direction: column;
  }

  .sidebar {
    position: static;
    width: 100%;
    flex: 0 0 auto;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--c-border);
    padding: var(--s-md);
  }

  .sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s-sm);
  }

  .sidebar-group {
    flex: 1 1 200px;
  }

  .rail {
    display: none;
  }

  .grid-3,
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .option-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  :root {
    --gutter: var(--s-md);
  }

  .grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .wizard-card {
    padding: var(--s-lg);
  }

  .wizard-footer {
    margin: 0 calc(var(--s-lg) * -1) calc(var(--s-lg) * -1);
    padding: var(--s-md) var(--s-lg);
  }

  .hero-band {
    padding: var(--s-xxl) 0;
  }

  .hero-title {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
  }

  .feature-grid {
    padding: var(--s-xl) 0;
  }

  .section + .section {
    padding-top: var(--s-lg);
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: var(--s-md);
  }

  .grid-3,
  .grid-4,
  .feature-grid,
  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-head,
  .section-head,
  .card-head,
  .sop-head,
  .modal-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-actions,
  .hero-actions,
  .row-end {
    width: 100%;
  }

  .page-actions .btn,
  .hero-actions .btn {
    flex: 1 1 auto;
  }

  .stepper {
    flex-direction: column;
  }

  .step {
    flex: 1 1 auto;
  }

  .stat-value {
    font-size: var(--fs-metric-sm);
    line-height: var(--lh-metric-sm);
  }

  .card,
  .feature,
  .sop,
  .stat-tile {
    padding: var(--s-md);
  }

  .kpi-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .kpi-row > .stat-value {
    text-align: left;
  }

  .toast {
    right: var(--s-sm);
    left: var(--s-sm);
    bottom: var(--s-sm);
    width: auto;
  }

  .modal-backdrop {
    padding: var(--s-sm);
  }

  .wizard-footer {
    padding: var(--s-md) var(--s-lg);
  }

  .wizard-foot-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--s-sm);
  }

  .wizard-foot-actions > .btn {
    width: 100%;
  }

  .wizard-next-note {
    flex: 0 0 auto;
    padding-top: var(--s-xs);
    border-top: 1px solid var(--c-border);
  }

  .wizard-foot-top > .uppercase-label {
    text-align: left;
  }
}

@media (max-width: 420px) {
  :root {
    --gutter: var(--s-sm);
  }

  .main {
    padding: var(--s-md) var(--s-sm) var(--s-xl);
  }

  .topbar-inner {
    padding: 0 var(--s-md);
  }

  .brand-text > span:last-child {
    display: none;
  }

  .hero-title {
    font-size: 1.75rem;
  }

  .page-title {
    font-size: 1.75rem;
    line-height: 1.25;
  }

  .section-title {
    font-size: 1.375rem;
  }

  .btn {
    padding: 12px 16px;
  }

  .btn-block {
    width: 100%;
  }

  .stat-tile,
  .card,
  .feature,
  .sop,
  .option-card,
  .callout {
    padding: var(--s-md);
  }

  .kpi-scoreboard {
    border-radius: var(--r-md);
  }
}


/* ==========================================================================
   30 RESPONSIVE FOR THE UX OVERHAUL  (1200 -> 360)
   ========================================================================== */

@media (max-width: 1200px) {
  .glance-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .how-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-facts {
    max-width: 100%;
  }
}

@media (max-width: 1024px) {
  /* The rail becomes a scrolling strip of section chips under the topbar. */
  .sidebar:has(> .rail) {
    padding: var(--s-sm) var(--s-md);
  }

  .rail {
    display: block;
    position: static;
    flex: 0 0 auto;
    width: 100%;
    padding: 0;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .rail::-webkit-scrollbar {
    display: none;
  }

  .rail > .eyebrow,
  .rail > .divider,
  .rail-foot {
    display: none;
  }

  .rail-links {
    flex-direction: row;
    gap: var(--s-sm);
    width: max-content;
    min-width: 100%;
    padding: 2px;
  }

  .rail-link {
    border-left: 0;
    border-bottom: 2px solid var(--c-border);
    border-radius: var(--r-pill);
    padding: 6px var(--s-md);
    white-space: nowrap;
  }

  .rail-link.is-active {
    border-bottom-color: var(--c-tertiary);
    box-shadow: none;
  }

  .demo-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .limit-strip {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-md);
  }
}

@media (max-width: 860px) {
  .hero-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .glance {
    padding: var(--s-md);
  }

  .glance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-sm);
  }

  .glance-tile {
    padding: var(--s-sm);
  }

  .glance-tile .stat-value {
    font-size: var(--fs-metric-sm);
  }

  .review-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-xs);
  }

  .queue-head {
    flex-direction: column;
    align-items: stretch;
  }

  .demo-bar {
    padding: var(--s-md);
  }

  .demo-bar-actions {
    width: 100%;
  }

  .cta-band {
    padding: var(--s-lg);
  }
}

@media (max-width: 640px) {
  .how-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .glance-head,
  .block-head,
  .severity-summary,
  .review-coverage {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-sm);
  }

  .queue-stages {
    flex-direction: column;
  }

  .queue-stage {
    flex: 1 1 auto;
  }

  .segmented {
    width: 100%;
  }

  .segmented-btn {
    flex: 1 1 0;
    justify-content: center;
  }

  .demo-bar-actions .btn {
    flex: 1 1 auto;
  }

  .demo-panel {
    padding: var(--s-lg);
  }

  .data-table {
    font-size: var(--fs-body-sm);
  }

  .data-table tbody th,
  .data-table tbody td,
  .data-table tfoot td,
  .data-table tfoot th,
  .data-table thead th {
    padding: 10px var(--s-sm);
  }
}

@media (max-width: 420px) {
  .glance-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .table-block {
    gap: 0;
  }

  .table-note {
    padding-top: var(--s-xs);
  }
}


/* ==========================================================================
   31 PRINT FOR THE UX OVERHAUL
   ========================================================================== */

@media print {
  .glance,
  .demo-bar,
  .demo-notice,
  .demo-options,
  .rail-toggle,
  .table-note,
  .queue-panel,
  .severity-summary {
    display: none !important;
  }

  .glance-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8pt;
  }

  .glance-tile {
    border: 1px solid var(--print-rule);
    background: var(--print-paper);
    padding: 6pt;
  }

  .glance-tile .stat-value {
    font-size: 12pt;
    color: var(--print-ink) !important;
  }

  .section > .section-head {
    border-bottom: 1pt solid var(--print-rule);
  }

  .section-index {
    border: 1pt solid var(--print-rule);
    background: var(--print-paper);
    color: var(--print-ink) !important;
  }

  .section + .section {
    padding-top: 12pt;
  }

  .table-block {
    break-inside: auto;
  }

  .table-wrap,
  .table-wrap--tall {
    max-height: none !important;
    overflow: visible !important;
  }

  .data-table thead {
    display: table-header-group;
  }

  .data-table tfoot {
    display: table-row-group;
  }

  .data-table tfoot td,
  .data-table tfoot th {
    background: var(--print-paper) !important;
    color: var(--print-ink) !important;
    border-top: 1pt solid var(--print-rule);
  }

  .data-table tbody th,
  .data-table tbody td,
  .data-table tfoot td,
  .data-table tfoot th {
    padding: 4pt 6pt;
  }

  .table-empty {
    border: 1pt solid var(--print-rule);
    background: var(--print-paper);
    color: var(--print-ink) !important;
  }

  .issue-group {
    break-inside: avoid;
  }

  .review-row {
    grid-template-columns: 45% 55%;
  }

  .queue-panel {
    border: 1pt solid var(--print-rule);
  }
}


/* ==========================================================================
   28 MOTION PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .skeleton,
  .skeleton-line {
    animation: none;
    opacity: 0.7;
  }

  .card-link:hover .icon,
  .option-check::after,
  .progress-fill,
  .meter-fill::after,
  .queue-bar > span,
  .queue-bar > .queue-bar-fill {
    transition: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --c-border: var(--c-secondary);
  }

  .card,
  .option-card,
  .input,
  .textarea,
  .select,
  .btn-secondary,
  .data-table,
  .table-wrap {
    border-color: var(--c-secondary);
  }
}


/* ==========================================================================
   29 PRINT
   ========================================================================== */

@media print {
  :root {
    --gutter: 0px;
    --print-paper: #ffffff;
    --print-ink: #000000;
    --print-rule: #000000;
  }

  html,
  body {
    background: var(--print-paper);
    color: var(--print-ink);
    font-size: 12pt;
  }

  .topbar,
  .sidebar,
  .rail,
  .page-actions,
  .section-head > .row-end,
  .topbar-actions,
  .topbar-nav,
  .hero-actions,
  .wizard-footer,
  .toast,
  .modal-backdrop,
  .queue-panel,
  .btn,
  .btn-group,
  .btn-icon,
  .card-foot,
  .tabs,
  .skeleton,
  .skeleton-line,
  .footer {
    display: none !important;
  }

  .app-shell,
  .app-body,
  .main,
  .main-inner,
  .page,
  .section,
  .section-body {
    display: block;
    padding: 0;
    margin: 0;
    max-width: none;
    background: var(--print-paper);
  }

  .card,
  .feature,
  .sop,
  .stat-tile,
  .table-wrap,
  .kpi-scoreboard,
  .callout,
  .empty {
    border: 1px solid var(--print-rule);
    border-radius: 0;
    box-shadow: none;
    background: var(--print-paper);
    color: var(--print-ink);
    break-inside: avoid;
  }

  .card-muted,
  .badge,
  .callout,
  .data-table thead th,
  .progress-track,
  .stat-delta,
  .card-muted,
  .kpi-row:hover,
  .data-table tbody tr:hover {
    background: var(--print-paper) !important;
    color: var(--print-ink) !important;
  }

  .page-title,
  .section-title,
  .title,
  .hero-title,
  .stat-value,
  .card-title,
  .feature-title,
  .mono,
  .td-num,
  .uppercase-label,
  .eyebrow,
  .badge,
  .callout,
  .meter-label {
    color: var(--print-ink) !important;
  }

  .divider {
    background-color: var(--print-rule);
    opacity: 0.5;
  }

  .table-wrap,
  .scroll-x {
    overflow: visible;
  }

  .data-table {
    min-width: 0;
  }

  .section,
  .sop-step,
  .step {
    break-inside: avoid;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: var(--print-ink);
  }

  .citation-note,
  .callout,
  .list-check > li::before,
  .list-bullet > li::before,
  .list-dash > li::before,
  .option-check,
  .step-index,
  .sop-step::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}


/* ---------------------------------------------------------------------------
   Hero composition
   The band is a two-column composition from 1024px up: the promise on the left,
   the expectation panel on the right, and the full-width metadata strip beneath
   both. Below that it collapses to the single reading column a phone needs.
   --------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    column-gap: var(--s-xxl);
  }

  .hero-meta {
    grid-column: 1 / -1;
  }

  .hero-panel {
    position: sticky;
    top: calc(var(--topbar-h) + var(--s-lg));
  }
}

@media (min-width: 1440px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.5fr) minmax(360px, 0.5fr);
  }
}

/* Below 1024px the panel is a bordered block under the copy, so it needs air
   above it and must not read as a second hero. */
@media (max-width: 1023px) {
  .hero-panel {
    margin-top: var(--s-sm);
  }

  .hero-copy {
    gap: var(--s-md);
  }
}

/* ---------------------------------------------------------------------------
   Tool entry
   The landing is a front door, not a marketing page: one hero that states what
   the tool produces, one console that starts it, and one list of what comes out.
   --------------------------------------------------------------------------- */

.tool-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-xl);
  padding: var(--s-xl) 0 var(--s-section);
  border-top: 1px solid var(--c-border);
}

.tool-entry-main {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  min-width: 0;
}

.tool-entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
  padding: var(--s-sm) 0;
}

.tool-entry-side {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  padding: var(--s-lg);
  background-color: var(--c-neutral);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  min-width: 0;
}

.tool-entry-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tool-entry-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-sm);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--c-ink);
}

.tool-entry-list li .icon {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--c-tertiary);
}

@media (min-width: 900px) {
  .tool-entry {
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    gap: var(--s-xxl);
    align-items: start;
  }

  .tool-entry-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-sm) var(--s-md);
  }
}

/* Tool bar: the single secondary action zone under the hero. */
.tool-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-lg);
  padding: var(--s-xl) 0;
}

.tool-bar-copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  max-width: 68ch;
  min-width: 0;
}

.tool-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
}

.hero-footnote {
  max-width: 54ch;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--c-on-primary);
  opacity: 0.78;
}

.hero-panel-rule {
  height: 1px;
  background-color: rgb(255 255 255 / 14%);
  margin: var(--s-xs) 0;
}

.hero-panel .tool-entry-list li {
  color: var(--c-on-primary);
}

/* ---------------------------------------------------------------------------
   Fact strip
   Three facts about how the console runs, set as one horizontal row rather than
   stacked in the hero panel. Keeping them out of the panel is what lets the
   panel stay a single clean column and keeps the hero's two columns the same
   height.
   --------------------------------------------------------------------------- */

.fact-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-lg);
  margin: 0;
  padding: var(--s-lg) 0;
  border-bottom: 1px solid var(--c-border);
}

.fact-strip-item {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  padding-left: var(--s-md);
  border-left: 2px solid var(--c-tertiary);
  min-width: 0;
}

.fact-strip dt {
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-label-caps);
  letter-spacing: var(--ls-label-caps);
  text-transform: uppercase;
  color: var(--c-secondary);
}

.fact-strip dd {
  margin: 0;
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--c-ink);
}

@media (min-width: 860px) {
  .fact-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-xl);
  }
}

/* The panel list is one column at every width: a two-column checklist inside a
   360px panel wraps each title to a different line count and reads as broken. */
.hero-panel .tool-entry-list {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-sm);
}

.hero-panel .tool-entry-list li {
  min-height: 24px;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  }
}

/* ---------------------------------------------------------------------------
   Wizard frame
   The wizard and the queue are a single 760px reading column per the design
   system. Without this the page heading sits in the 1280px content container
   while the card below it is a 760px centred column, so the two read as
   belonging to different pages.
   --------------------------------------------------------------------------- */

.wizard-frame {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wizard-frame > .page-head,
.wizard-frame > .wizard,
.wizard-frame > #wizardHost,
.wizard-frame > .row {
  width: 100%;
  max-width: var(--wizard-max);
  margin-inline: auto;
}