/* ============================================================================
   Steward Host Design Layer: theme.css
   One shared stylesheet for the public site, the customer portal and the
   operator console.

   Base system: Pico CSS v2.1.1  (MIT licence)  https://picocss.com
     vendored at  vendor/pico.min.css   sha256 fbc9a63fc9fc9f72…  (see README)
     Pico styles the semantic elements: typography, forms, tables, buttons,
     nav, card, modal, dropdown. This file themes it and adds what it lacks.

   This file (MIT-compatible with Pico) adds:
     • the palette and every design token (single source of truth)
     • light + dark themes, driven by prefers-color-scheme and [data-theme]
     • the component set: card, button, input/field, table, badge, alert,
       price block, stat, topbar, nav, footer, notice, placeholder marker

   Load order (this order matters, because later wins):
     <link rel="stylesheet" href="design/vendor/pico.min.css">
     <link rel="stylesheet" href="design/theme.css">
     <link rel="stylesheet" href="<project>/style.css">   ← optional, per project

   Everything is plain CSS. No JavaScript, no build step, no runtime fetch.
   ========================================================================= */

/* ============================================================================
   1. PALETTE: the only block to edit to re-skin everything.
   ----------------------------------------------------------------------------
   Swap the 22 values below and every surface follows, in both colour schemes.
   `--brand-*` is the primary ramp; `--neutral-*` is the ground and text ramp.
   The 600 step is the primary colour, 50–200 are tints, 700–900 are shades.
   Reference: Tailwind CSS default palette (MIT). Cool greys only, no warm.
   ========================================================================= */
:root{
  /* ---- INDIGO: the primary family --------------------------------------
     Supplied by the palette decision (12 · Indigo & Coral).
     600 is "the blue" that buttons, links and focus rings use.          */
  --brand-50:  #f3f4fb;   /* supplied */
  --brand-100: #e1e4f7;   /* supplied */
  --brand-200: #c4c8f0;   /* interpolated */
  --brand-300: #a6acea;   /* supplied */
  --brand-400: #7a82da;   /* interpolated */
  --brand-500: #646dd1;   /* interpolated */
  --brand-600: #4f57c9;   /* supplied: the primary */
  --brand-700: #383ea0;   /* supplied */
  --brand-800: #2e3386;   /* interpolated */
  --brand-900: #232766;   /* supplied */

  /* ---- NEUTRAL: ground, borders, text ---------------------------------
     Deliberately cool: no warm, green or yellow cast in the greys.      */
  --neutral-0:   #ffffff;
  --neutral-50:  #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;
  --neutral-950: #020617;

  /* ---- CORAL: the accent -----------------------------------------------
     One supplied value (--accent-500). The rest of the mini-ramp is derived
     from it. Decorative use only: rules, marks, status dots. Coral fails
     contrast as small text on white, so text stays indigo.              */
  --accent-50:  #fef1ed;   /* derived */
  --accent-100: #fde0d7;   /* derived */
  --accent-300: #f8a98f;   /* derived */
  --accent-500: #f4795b;   /* supplied */
  --accent-600: #e05a39;   /* derived */
  --accent-700: #b84428;   /* derived */
  --on-accent:  #1f1207;   /* text on a coral fill: coral needs dark text */

  /* ---- STATUS: fixed, deliberately not part of the palette swap -------- */
  --red-50:#fef2f2;   --red-200:#fecaca;   --red-700:#b91c1c;   --red-800:#991b1b;
  --green-50:#f0fdf4; --green-200:#bbf7d0; --green-700:#15803d; --green-300:#86efac;
  --amber-50:#fffbeb; --amber-200:#fde68a; --amber-700:#b45309; --amber-300:#fcd34d;
  --amber-800:#92400e;
}

/* ============================================================================
   2. SCALES: spacing, type, radius, shadow, layout.  Scheme-independent.
   ========================================================================= */
:root{
  /* type */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --text-xs:.75rem;
  --text-sm:.8125rem;
  --text-md:.9375rem;
  --text-base:1rem;
  --text-lg:1.125rem;
  --text-xl:1.375rem;
  --text-2xl:1.75rem;
  --text-3xl:clamp(1.75rem,1.3rem + 1.6vw,2.25rem);
  --text-4xl:clamp(2rem,1.35rem + 2.9vw,3.3rem);

  /* labels: eyebrows, table headings, stat and price labels, footer heads,
     console section heads. One place to tune them all. Small capitals in the
     body font, lightly tracked, rather than a typewriter face: friendlier for
     customers, still distinct from body text. Some labels are written in lower
     case and rely on --label-case to capitalise them, so keep it uppercase
     unless every label's source text is sentence case. */
  --label-font:var(--font-sans);
  --label-size:.72rem;
  --label-weight:600;
  --label-tracking:.06em;
  --label-case:uppercase;

  /* spacing: 4px base */
  --space-1:.25rem;  --space-2:.5rem;   --space-3:.75rem;  --space-4:1rem;
  --space-5:1.5rem;  --space-6:2rem;    --space-7:3rem;    --space-8:4rem;
  --space-9:6rem;

  /* radius */
  --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:16px;
  --radius-pill:999px;

  /* elevated surfaces */
  --shadow-xs:0 1px 2px rgba(15,23,42,.05);
  --shadow-sm:0 1px 2px rgba(15,23,42,.05),0 4px 12px -8px rgba(15,23,42,.25);
  --shadow-md:0 1px 3px rgba(15,23,42,.06),0 16px 32px -24px rgba(15,23,42,.45);

  /* layout */
  --container:1120px;
  --container-narrow:820px;
  --measure:65ch;          /* comfortable reading width for prose */
  --tap:44px;              /* minimum touch target */

  --transition:140ms cubic-bezier(.2,.6,.3,1);
}

/* ============================================================================
   3. SEMANTIC TOKENS: colours in use.  Derived from the palette above.
      Three blocks, as Pico requires: light, dark-by-preference, dark-forced.
   ========================================================================= */

/* ---- light (default) ---- */
[data-theme=light],
:root:not([data-theme=dark]){
  color-scheme:light;

  --bg:var(--neutral-0);
  --bg-subtle:var(--neutral-50);
  --bg-muted:var(--neutral-100);
  --surface:var(--neutral-0);
  --surface-sunken:var(--neutral-50);
  --border:var(--neutral-200);
  --border-strong:var(--neutral-300);

  --text:var(--neutral-900);
  --text-secondary:var(--neutral-600);
  --text-muted:var(--neutral-500);

  --primary:var(--brand-600);
  --primary-hover:var(--brand-700);
  --primary-active:var(--brand-800);
  --primary-soft:var(--brand-50);
  --primary-soft-border:var(--brand-200);
  --on-primary:#ffffff;
  --ring:rgba(79,87,201,.42);
  --ring-solid:var(--brand-500);

  --accent:var(--accent-500);
  --accent-ink:var(--accent-700);
  --accent-soft:var(--accent-50);
  --accent-border:var(--accent-100);
  --surface-quiet:var(--bg-subtle);

  --danger:var(--red-700);
  --danger-soft:var(--red-50);
  --danger-border:var(--red-200);
  --success:var(--green-700);
  --success-soft:var(--green-50);
  --success-border:var(--green-200);
  --warning:var(--amber-700);
  --warning-soft:var(--amber-50);
  --warning-border:var(--amber-200);

  --mark-bg:#fef9c3;          /* placeholder marker fill */
  --mark-ink:#713f12;
  --mark-border:#e0b73e;
}

/* ---- dark (automatic) ---- */
@media only screen and (prefers-color-scheme:dark){
  :root:not([data-theme]){
    color-scheme:dark;

    --bg:var(--neutral-950);
    --bg-subtle:#0b1220;
    --bg-muted:var(--neutral-900);
    --surface:var(--neutral-900);
    --surface-sunken:#0b1220;
    --border:#243044;
    --border-strong:#334155;

    --text:#e8eef7;
    --text-secondary:#b3c0d1;
    --text-muted:#8b9bb0;

    --primary:var(--brand-400);
    --primary-hover:var(--brand-300);
    --primary-active:var(--brand-200);
    --primary-soft:rgba(59,130,246,.14);
    --primary-soft-border:rgba(96,165,250,.35);
    --on-primary:#08152e;
    --ring:rgba(166,172,234,.5);
    --ring-solid:var(--brand-300);

    --accent:var(--accent-500);
    --accent-ink:var(--accent-300);
    --accent-soft:rgba(244,121,91,.14);
    --accent-border:rgba(244,121,91,.34);
    --surface-quiet:var(--bg-subtle);

    --danger:#fca5a5;
    --danger-soft:rgba(185,28,28,.16);
    --danger-border:rgba(252,165,165,.32);
    --success:var(--green-300);
    --success-soft:rgba(21,128,61,.18);
    --success-border:rgba(134,239,172,.3);
    --warning:var(--amber-300);
    --warning-soft:rgba(180,83,9,.18);
    --warning-border:rgba(252,211,77,.32);
  }
}

/* ---- dark (forced with data-theme="dark") ---- */
[data-theme=dark]{
  color-scheme:dark;

  --bg:var(--neutral-950);
  --bg-subtle:#0b1220;
  --bg-muted:var(--neutral-900);
  --surface:var(--neutral-900);
  --surface-sunken:#0b1220;
  --border:#243044;
  --border-strong:#334155;

  --text:#e8eef7;
  --text-secondary:#b3c0d1;
  --text-muted:#8b9bb0;

  --primary:var(--brand-400);
  --primary-hover:var(--brand-300);
  --primary-active:var(--brand-200);
  --primary-soft:rgba(59,130,246,.14);
  --primary-soft-border:rgba(96,165,250,.35);
  --on-primary:#08152e;
  --ring:rgba(166,172,234,.5);
  --ring-solid:var(--brand-300);

  --accent:var(--accent-500);
  --accent-ink:var(--accent-300);
  --accent-soft:rgba(244,121,91,.14);
  --accent-border:rgba(244,121,91,.34);
  --surface-quiet:var(--bg-subtle);

  --danger:#fca5a5;
  --danger-soft:rgba(185,28,28,.16);
  --danger-border:rgba(252,165,165,.32);
  --success:var(--green-300);
  --success-soft:rgba(21,128,61,.18);
  --success-border:rgba(134,239,172,.3);
  --warning:var(--amber-300);
  --warning-soft:rgba(180,83,9,.18);
  --warning-border:rgba(252,211,77,.32);

  --mark-bg:rgba(224,183,62,.16);
  --mark-ink:#f0d68a;
  --mark-border:rgba(224,183,62,.5);
}
@media only screen and (prefers-color-scheme:dark){
  :root:not([data-theme]){ --mark-bg:rgba(224,183,62,.16); --mark-ink:#f0d68a; --mark-border:rgba(224,183,62,.5); }
}

/* ============================================================================
   4. PICO BRIDGE: hand our tokens to Pico so its own components match.
   ========================================================================= */
:root{
  --pico-font-family:var(--font-sans);
  --pico-border-radius:var(--radius-sm);
  --pico-spacing:var(--space-4);
  --pico-transition:var(--transition);
  --pico-line-height:1.6;
  /* stop Pico scaling the root font up with the viewport; we control type */
  --pico-font-size:100%;
}
[data-theme=light],
:root:not([data-theme=dark]){
  --pico-background-color:var(--bg);
  --pico-color:var(--text);
  --pico-muted-color:var(--text-muted);
  --pico-muted-border-color:var(--border);
  --pico-primary:var(--primary);
  --pico-primary-background:var(--primary);
  --pico-primary-border:var(--primary);
  --pico-primary-underline:var(--ring);
  --pico-primary-hover:var(--primary-hover);
  --pico-primary-hover-background:var(--primary-hover);
  --pico-primary-hover-border:var(--primary-hover);
  --pico-primary-focus:var(--ring);
  --pico-primary-inverse:var(--on-primary);
  --pico-secondary:var(--neutral-600);
  --pico-secondary-background:var(--neutral-600);
  --pico-secondary-hover:var(--neutral-800);
  --pico-secondary-hover-background:var(--neutral-800);
  --pico-secondary-border:var(--neutral-600);
  --pico-secondary-inverse:#fff;
  --pico-form-element-background-color:var(--surface);
  --pico-form-element-border-color:var(--border-strong);
  --pico-form-element-color:var(--text);
  --pico-form-element-placeholder-color:var(--text-muted);
  --pico-form-element-active-border-color:var(--primary);
  --pico-form-element-focus-color:var(--primary);
  --pico-card-background-color:var(--surface);
  --pico-card-border-color:var(--border);
  --pico-card-sectioning-background-color:var(--bg-subtle);
  --pico-table-border-color:var(--border);
  --pico-table-row-stripped-background-color:var(--bg-subtle);
  --pico-mark-background-color:var(--mark-bg);
  --pico-mark-color:var(--mark-ink);
}
@media only screen and (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --pico-background-color:var(--bg);
    --pico-color:var(--text);
    --pico-muted-color:var(--text-muted);
    --pico-muted-border-color:var(--border);
    --pico-primary:var(--primary);
    --pico-primary-background:var(--primary);
    --pico-primary-border:var(--primary);
    --pico-primary-hover:var(--primary-hover);
    --pico-primary-hover-background:var(--primary-hover);
    --pico-primary-focus:var(--ring);
    --pico-primary-inverse:var(--on-primary);
    --pico-form-element-background-color:var(--surface);
    --pico-form-element-border-color:var(--border-strong);
    --pico-form-element-color:var(--text);
    --pico-card-background-color:var(--surface);
    --pico-card-border-color:var(--border);
    --pico-card-sectioning-background-color:var(--bg-subtle);
    --pico-table-border-color:var(--border);
    --pico-table-row-stripped-background-color:var(--bg-subtle);
    --pico-mark-background-color:var(--mark-bg);
    --pico-mark-color:var(--mark-ink);
    --pico-secondary:var(--neutral-400);
    --pico-secondary-background:var(--neutral-400);
    --pico-secondary-hover-background:var(--neutral-300);
    --pico-secondary-inverse:#0f172a;
  }
}
[data-theme=dark]{
  --pico-background-color:var(--bg);
  --pico-color:var(--text);
  --pico-muted-color:var(--text-muted);
  --pico-muted-border-color:var(--border);
  --pico-primary:var(--primary);
  --pico-primary-background:var(--primary);
  --pico-primary-border:var(--primary);
  --pico-primary-hover:var(--primary-hover);
  --pico-primary-hover-background:var(--primary-hover);
  --pico-primary-focus:var(--ring);
  --pico-primary-inverse:var(--on-primary);
  --pico-form-element-background-color:var(--surface);
  --pico-form-element-border-color:var(--border-strong);
  --pico-form-element-color:var(--text);
  --pico-card-background-color:var(--surface);
  --pico-card-border-color:var(--border);
  --pico-card-sectioning-background-color:var(--bg-subtle);
  --pico-table-border-color:var(--border);
  --pico-table-row-stripped-background-color:var(--bg-subtle);
  --pico-mark-background-color:var(--mark-bg);
  --pico-mark-color:var(--mark-ink);
}

/* ============================================================================
   5. BASE: small corrections on top of Pico's element styles.
   ========================================================================= */
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:1.65;
}
:where(a){ color:var(--primary); text-underline-offset:.18em; }
:where(a:hover){ color:var(--primary-hover); }
:where(hr){ border:0; border-top:1px solid var(--border); }
:where(strong){ font-weight:650; }
:where(small){ font-size:var(--text-sm); }
:where(code,kbd,samp,pre){ font-family:var(--font-mono); }
:where(mark){ background:var(--mark-bg); color:var(--mark-ink); }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ring-solid);
  outline-offset:2px;
  border-radius:var(--radius-xs);
}

::selection{ background:var(--primary-soft); color:var(--text); }

/* ============================================================================
   6. LAYOUT
   ========================================================================= */
.st-container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(18px,4vw,22px);
}
.st-container-narrow{ max-width:var(--container-narrow); }

/* reading measure: apply to a region of prose, not to whole pages */
.st-prose > :where(p,ul,ol,blockquote,dl){ max-width:var(--measure); }
.st-measure{ max-width:var(--measure); }

.st-stack > * + *{ margin-top:var(--space-4); }
.st-row{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; }
.st-grid{ display:grid; gap:var(--space-4); }
.st-grid-2{ display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.st-grid-3{ display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }

/* ============================================================================
   7. COMPONENTS
   ========================================================================= */

/* ---- skip link ---- */
.st-skip{
  position:absolute; left:-9999px; top:0; z-index:60;
  background:var(--primary); color:var(--on-primary);
  padding:var(--space-3) var(--space-4);
  border-radius:0 0 var(--radius-sm) 0;
  font-weight:600; text-decoration:none;
}
.st-skip:focus{ left:0; color:var(--on-primary); }

/* ---- draft / status notice band ---- */
.st-notice{
  background:var(--primary-soft);
  border-bottom:1px solid var(--primary-soft-border);
  color:var(--primary-hover);
  font-size:var(--text-sm);
  text-align:center;
  padding:var(--space-2) var(--space-5);
  margin:0;
}
.st-notice strong{ color:inherit; }
/* the leading dot makes the strip read as a status line, not stray text */
.st-notice::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--primary); margin-right:.5em; vertical-align:.05em;
}

/* ---- topbar (site header, portal header, console header) ---- */
.st-topbar{
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.st-topbar > .st-container{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3) var(--space-5);
  padding-block:var(--space-4);
}
.st-brand{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--text-lg); font-weight:700; letter-spacing:-.01em;
  color:var(--text); text-decoration:none;
}
.st-brand:hover{ color:var(--text); }
.st-brand::before{
  content:""; flex:none; width:15px; height:15px;
  border:1.5px solid var(--primary); border-radius:var(--radius-xs);
  box-shadow:inset 0 0 0 2.5px var(--bg), inset 0 0 0 4px var(--primary);
}
.st-brand-plain::before{ display:none; }

/* ---- nav ---- */
/* Pico makes <nav> itself a flex container; we want a plain block so the
   list sizes to its own content instead of being squeezed. */
.st-topbar .st-nav{ display:block; flex:none; }
.st-topbar .st-nav ul{ margin:0; }   /* beats Pico's nav ul:first-of-type negative margin */
.st-nav ul{
  list-style:none; display:flex; flex-wrap:wrap;
  gap:var(--space-1) var(--space-4);
  margin:0; padding:0;
}
.st-nav li{ margin:0; padding:0; flex:none; }
.st-nav a{
  display:inline-block; white-space:nowrap; margin:0;   /* Pico puts negative side margins on nav links */
  color:var(--text-secondary);
  font-size:var(--text-md);
  font-weight:500;
  text-decoration:none;
  padding:var(--space-1) 0;
  border-bottom:2px solid transparent;
}
.st-nav a:hover{ color:var(--text); border-bottom-color:var(--border-strong); }
.st-nav a[aria-current=page]{ color:var(--primary); border-bottom-color:var(--primary); }

/* ---- buttons ---- */
.st-btn,
:where(a,button,input[type=submit],input[type=button]).st-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:var(--tap);
  padding:0 var(--space-5);
  background:var(--primary);
  color:var(--on-primary);
  border:1px solid var(--primary);
  border-radius:var(--radius-sm);
  font-family:inherit; font-size:var(--text-md); font-weight:600;
  line-height:1;
  text-decoration:none; text-align:center;
  cursor:pointer;
  transition:background var(--transition),border-color var(--transition),transform var(--transition);
}
.st-btn:hover{ background:var(--primary-hover); border-color:var(--primary-hover); color:var(--on-primary); }
.st-btn:active{ background:var(--primary-active); border-color:var(--primary-active); transform:translateY(1px); }
.st-btn-outline{ background:transparent; color:var(--primary); }
.st-btn-outline:hover{ background:var(--primary-soft); color:var(--primary-hover); border-color:var(--primary); }
.st-btn-ghost{ background:transparent; border-color:transparent; color:var(--text-secondary); }
.st-btn-ghost:hover{ background:var(--bg-muted); color:var(--text); border-color:transparent; }
/* the one coral control in the system: at most one per page (see README §6) */
.st-btn-accent{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.st-btn-accent:hover{ background:var(--accent-600); border-color:var(--accent-600); color:var(--on-accent); }
.st-btn-accent:active{ background:var(--accent-700); border-color:var(--accent-700); color:var(--on-accent); }
.st-btn-secondary{ background:var(--bg-subtle); border-color:var(--border-strong); color:var(--text); }
.st-btn-secondary:hover{ background:var(--bg-muted); border-color:var(--border-strong); color:var(--text); }
.st-btn-danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.st-btn-danger:hover{ filter:brightness(.92); color:#fff; }
.st-btn-sm{ min-height:34px; padding:0 var(--space-4); font-size:var(--text-sm); }
/* A form whose only child is a button: without this the form is a block and
   Pico's `button{width:100%}` resolves against its own longest word, so the
   label wraps even when there is room for it on one line. */
.st-inline-form{ display:inline-flex; margin:0; }
.st-inline-form .st-btn{ white-space:nowrap; }
.st-btn[disabled],.st-btn[aria-disabled=true]{ opacity:.5; pointer-events:none; }

/* ---- card ---- */
.st-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-5) calc(var(--space-5) + 2px);
  box-shadow:var(--shadow-xs);
}
.st-card > :first-child{ margin-top:0; }
.st-card > :last-child{ margin-bottom:0; }
.st-card-title{ font-size:var(--text-base); font-weight:650; margin:0 0 var(--space-2); }
.st-card-body{ font-size:var(--text-md); color:var(--text-secondary); margin:0; }
.st-card-hover{ transition:border-color var(--transition),box-shadow var(--transition); }
.st-card-hover:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.st-card-grid{
  list-style:none; padding:0; margin:0;
  display:grid; gap:var(--space-4);
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
}
.st-card-grid > li{ margin:0; }

/* ---- panel / box (Pico article style, our look) ---- */
.st-panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--space-5);
}

/* ---- field: label + input + hint ---- */
.st-field{ display:block; margin:0 0 var(--space-4); }
.st-label{
  display:block; font-size:var(--text-sm); font-weight:600;
  color:var(--text-secondary); margin:0 0 var(--space-2);
}
.st-field :where(input,select,textarea){ margin-bottom:0; }
.st-hint{ font-size:var(--text-sm); color:var(--text-muted); margin:var(--space-2) 0 0; }
.st-error{ font-size:var(--text-sm); color:var(--danger); margin:var(--space-2) 0 0; }

/* ---- table ---- */
.st-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.st-table{ width:100%; max-width:100%; margin:0 0 var(--space-5); font-size:var(--text-md); }
.st-table caption{ text-align:left; font-size:var(--text-sm); color:var(--text-muted); padding-bottom:var(--space-3); }
.st-table th,.st-table td{
  text-align:left; vertical-align:top;
  padding:var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom:1px solid var(--border);
}
.st-table thead th{
  font-family:var(--label-font); font-size:var(--label-size); font-weight:600;
  letter-spacing:var(--label-tracking); text-transform:var(--label-case); color:var(--text-secondary);
  border-bottom-color:var(--border-strong);
}
.st-table th + th, .st-table td + td{ padding-left:var(--space-5); }
.st-table th:first-child, .st-table td:first-child{
  color:var(--text); padding-right:var(--space-6);
  border-right:1px solid var(--border);
}
.st-table-numeric td, .st-table td.st-num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* Column tables stack into cards once the viewport can no longer give each
   column a readable width. 780px is the measured need of the widest stack built
   on this component (a nine column operator table); a data table with more than
   that should stack even earlier and can carry its own breakpoint. */
@media (max-width:780px){
  .st-table-stack thead{ display:none; }
  .st-table-stack tbody tr{
    display:block; width:100%; background:var(--surface-sunken);
    border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:var(--space-4); margin:0 0 var(--space-3);
  }
  /* the table and the row group have to become blocks too: while they stay
     table boxes the browser wraps the block cells in anonymous table rows and
     the columns survive, which is not the card layout this promises.
     The td rules need the descendant specificity of the desktop rules above,
     otherwise the column padding and the column divider survive the stack. */
  .st-table-stack, .st-table-stack tbody,
  .st-table-stack td, .st-table-stack td:first-child, .st-table-stack td + td{
    display:block; width:100%; border:0; padding:0;
  }
  .st-table-stack td + td{ margin-top:var(--space-3); padding-top:var(--space-3); border-top:1px dashed var(--border-strong); }
  /* the label wording belongs to the page, not to the component, so it is read
     from data-label on the cell (the standard responsive-table pattern) */
  .st-table-stack td::before{
    content:attr(data-label);
    display:block; font-family:var(--label-font); font-size:var(--label-size);
    letter-spacing:var(--label-tracking); text-transform:var(--label-case); font-weight:var(--label-weight); color:var(--text-muted);
    margin-bottom:var(--space-1);
  }
  .st-table-stack td:nth-child(2)::before{ color:var(--primary); }
}

/* A data table with many columns stops being readable well before a phone
   width, so it stacks earlier. Same body as above, at the wider breakpoint.
   1120px is measured, not guessed: a seven column operator table with mono
   figures needs that much card width before any cell starts to spill, and the
   console's own table is laid out as a fixed grid on top of this. */
@media (max-width:1120px){
  .st-table-stack-wide thead{ display:none; }
  .st-table-stack-wide tbody tr{
    display:block; width:100%; background:var(--surface-sunken);
    border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:var(--space-4); margin:0 0 var(--space-3);
  }
  .st-table-stack-wide, .st-table-stack-wide tbody,
  .st-table-stack-wide td, .st-table-stack-wide td:first-child, .st-table-stack-wide td + td{
    display:block; width:100%; border:0; padding:0;
  }
  .st-table-stack-wide td + td{ margin-top:var(--space-3); padding-top:var(--space-3); border-top:1px dashed var(--border-strong); }
  .st-table-stack-wide td::before{
    content:attr(data-label);
    display:block; font-family:var(--label-font); font-size:var(--label-size);
    letter-spacing:var(--label-tracking); text-transform:var(--label-case); font-weight:var(--label-weight); color:var(--text-muted);
    margin-bottom:var(--space-1);
  }
  .st-table-stack-wide td:nth-child(2)::before{ color:var(--primary); }
}

/* ---- badge ---- */
.st-badge{
  display:inline-flex; align-items:center; gap:var(--space-1);
  padding:2px var(--space-3);
  border-radius:var(--radius-pill);
  border:1px solid var(--border-strong);
  background:var(--bg-subtle);
  color:var(--text-secondary);
  font-family:var(--font-sans); font-size:var(--text-xs); font-weight:600;
  letter-spacing:.02em; line-height:1.7; white-space:nowrap;
}
.st-badge-brand{ background:var(--primary-soft); border-color:var(--primary-soft-border); color:var(--primary-hover); }
.st-badge-success{ background:var(--success-soft); border-color:var(--success-border); color:var(--success); }
.st-badge-warning{ background:var(--warning-soft); border-color:var(--warning-border); color:var(--warning); }
.st-badge-danger{ background:var(--danger-soft); border-color:var(--danger-border); color:var(--danger); }

/* ---- alert / callout (also used for the lawyer banner and draft notes) ---- */
.st-alert{
  border:1px solid var(--border);
  border-left:3px solid var(--border-strong);
  border-radius:var(--radius-sm);
  background:var(--surface-quiet);
  color:var(--text-secondary);
  padding:var(--space-5);
  margin:var(--space-5) 0;
}
.st-alert > :first-child{ margin-top:0; }
.st-alert > :last-child{ margin-bottom:0; }
.st-alert p,.st-alert ul,.st-alert ol{ max-width:none; }
.st-alert-title{ font-weight:650; color:var(--text); margin:0 0 var(--space-2); }
.st-alert-info{ background:var(--primary-soft); border-color:var(--primary-soft-border); border-left-color:var(--primary); }
.st-alert-success{ background:var(--success-soft); border-color:var(--success-border); border-left-color:var(--success); }
.st-alert-warning{ background:var(--warning-soft); border-color:var(--warning-border); border-left-color:var(--warning); color:var(--warning); }
.st-alert-warning .st-alert-title{ color:var(--warning); }
.st-alert-danger{ background:var(--danger-soft); border-color:var(--danger-border); border-left-color:var(--danger); color:var(--danger); }

/* ---- price block (two cost lines, side by side) ---- */
.st-price-block{
  display:grid; gap:var(--space-4);
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  margin:var(--space-5) 0;
}
.st-price{
  background:var(--surface);
  border:1px solid var(--border);
  border-top:2px solid var(--accent);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  padding:var(--space-6);
  box-shadow:var(--shadow-sm);
}
.st-price-label{
  font-family:var(--label-font); font-size:var(--label-size);
  letter-spacing:var(--label-tracking); text-transform:var(--label-case); font-weight:var(--label-weight);
  color:var(--text-muted); margin:0 0 var(--space-4);
}
.st-price-amount{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--space-2);
  font-family:var(--font-sans); font-weight:700; line-height:1;
  font-size:clamp(1.75rem,1.4rem + 1.7vw,2.6rem);   /* the number should land first */
  letter-spacing:-.03em; color:var(--text);
  font-variant-numeric:tabular-nums;
  margin:0 0 var(--space-4);
}
.st-price-amount .st-per{ font-size:var(--text-sm); font-weight:400; letter-spacing:0; color:var(--text-muted); }
.st-price-note{ margin:0; font-size:var(--text-md); color:var(--text-secondary); max-width:none; }

/* ---- stat tile (console / portal KPIs) ----
   150px, not 170px: a phone container is about 354px wide once
   .st-container's inset is honoured, and two 150px tiles plus the gap still fit,
   so a row of four tiles stays 2x2 instead of collapsing to one per row. */
.st-stat-grid{
  display:grid; gap:var(--space-4);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin:0; padding:0; list-style:none;
}
.st-stat-grid > li{ margin:0; }
.st-stat{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5);
  box-shadow:var(--shadow-xs);
}
.st-stat-label{
  font-family:var(--label-font); font-size:var(--label-size);
  letter-spacing:var(--label-tracking); text-transform:var(--label-case); font-weight:var(--label-weight); color:var(--text-muted);
  margin:0 0 var(--space-2);
}
.st-stat-value{
  font-family:var(--font-sans); font-variant-numeric:tabular-nums;
  font-size:var(--text-2xl); font-weight:700; letter-spacing:-.02em;
  color:var(--text); margin:0; line-height:1.1;
}
.st-stat-delta{ font-size:var(--text-sm); color:var(--text-muted); margin:var(--space-2) 0 0; }

/* ---- eyebrow / kicker ---- */
.st-eyebrow{
  font-family:var(--label-font); font-size:var(--label-size);
  letter-spacing:var(--label-tracking); text-transform:var(--label-case); font-weight:var(--label-weight);
  color:var(--primary); margin:0 0 var(--space-3);
}

/* ---- footer ---- */
.st-footer{
  margin-top:var(--space-9);
  background:var(--bg-subtle);
  border-top:1px solid var(--border);
  padding:var(--space-7) 0 var(--space-6);
  font-size:var(--text-md);
  color:var(--text-muted);
}
.st-footer-grid{ display:grid; gap:var(--space-6) var(--space-7); grid-template-columns:1fr; }
@media (min-width:680px){ .st-footer-grid{ grid-template-columns:1.6fr 1fr 1fr; } }
.st-footer p{ margin:0 0 var(--space-2); color:var(--text-muted); max-width:44ch; }
.st-footer-brand{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--text-base); font-weight:700; color:var(--text);
  margin:0 0 var(--space-3);
}
.st-footer-brand::before{
  content:""; flex:none; width:12px; height:12px;
  border:1.5px solid var(--primary); border-radius:var(--radius-xs);
}
.st-footer-head{
  font-family:var(--label-font); font-size:var(--label-size);
  letter-spacing:var(--label-tracking); text-transform:var(--label-case); font-weight:var(--label-weight);
  color:var(--text-secondary); margin:0 0 var(--space-3);
}
.st-footer ul{ list-style:none; margin:0; padding:0; }
.st-footer li{ margin:0 0 var(--space-2); padding:0; }
.st-footer a{ color:var(--text-secondary); text-decoration:none; }
.st-footer a:hover{ color:var(--primary); text-decoration:underline; }
.st-footer-legal{
  margin-top:var(--space-6); padding-top:var(--space-5);
  border-top:1px solid var(--border);
  font-size:var(--text-sm); color:var(--text-muted);
}
.st-footer-legal p{ max-width:70ch; }

/* ---- placeholder marker ----
   Square-bracket facts that are not settled yet.  Used the same way on the
   site, in the portal and in the console. */
.st-ph{
  background:var(--mark-bg);
  color:var(--mark-ink);
  border-bottom:1px dashed var(--mark-border);
  border-radius:2px;
  padding:0 2px;
  font-family:var(--font-mono);
  font-size:.86em;
  letter-spacing:-.01em;
}

/* ---- component lists ----
   Pico sets `ul li { list-style: square }` on the <li> itself and block-level
   list items keep their marker inside a grid or flex parent, so every component
   list has to say so explicitly. Components also opt out of any reading
   measure a page applies to bare <ul>/<ol>. */
.st-card-grid, .st-stat-grid, .st-nav ul, .st-footer ul { max-width:none; }
.st-card-grid > li, .st-stat-grid > li, .st-nav li, .st-footer li { list-style:none; }

/* ---- utilities ---- */
.st-small{ font-size:var(--text-sm); color:var(--text-muted); }
.st-muted{ color:var(--text-muted); }
.st-secondary{ color:var(--text-secondary); }
.st-center{ text-align:center; }
.st-vh{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms!important; animation-duration:.01ms!important; }
}