/* ==========================================================================
   skuer — "Instrument"
   A reading instrument for retail shelves.  Rebuilt from scratch.

   Two colour systems, deliberately kept apart:
     BRAND  (indigo)  — chrome, links, primary actions.  Identity only.
     SIGNAL (green / red / amber / slate) — data states.  Meaning only.
   The previous sheet used one green for both, so "accent" and "in stock"
   were indistinguishable in the matrix.  Never reuse --brand for a data state.

   Layers:  tokens · reset · shell · controls · primitives · pages
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root{
  color-scheme: light;

  /* surfaces — cool neutrals, near-paper */
  --bg:#F7F8FA; --bg-2:#EFF1F5;
  --surface:#FFFFFF; --surface-2:#F4F6F9; --surface-3:#E9ECF2;
  --ink:#12151C; --ink-2:#39404E; --muted:#646D7E; --faint:#98A0B0;
  --line:#E1E5EC; --line-2:#CDD3DE; --hair:#EDF0F5;

  /* brand — identity only, never a data state */
  --brand:#2E4372; --brand-2:#3A5490; --brand-deep:#1E2C4C; --brand-ink:#22335B;
  --brand-soft:rgba(46,67,114,.07); --brand-glow:rgba(46,67,114,.15);
  --on-brand:#FFFFFF;

  /* signal — data states only */
  --ok:#12784A; --ok-bg:rgba(18,120,74,.10); --ok-line:rgba(18,120,74,.28);
  --bad:#C0402A; --bad-bg:rgba(192,64,42,.10); --bad-line:rgba(192,64,42,.26);
  --warn:#9A6B12; --warn-bg:rgba(154,107,18,.13); --warn-line:rgba(154,107,18,.30);
  --null:#7C8494; --null-bg:rgba(124,132,148,.10);
  --low:#0F6E6E; --low-bg:rgba(15,110,110,.11); --low-line:rgba(15,110,110,.28);

  /* legacy status aliases (analytics/status vocabulary) */
  --hit:var(--ok); --hit-bg:var(--ok-bg);
  --no_hit:var(--null); --no_hit-bg:var(--null-bg);
  --errored:var(--bad); --errored-bg:var(--bad-bg);
  --unsupported:var(--null); --unsupported-bg:var(--null-bg);
  --signal:var(--bad); --signal-bg:var(--bad-bg);
  --unknown:var(--warn); --unknown-bg:var(--warn-bg);
  --accent:var(--brand); --accent-ink:var(--brand-ink); --accent-soft:var(--brand-soft);
  --accent-contrast:var(--on-brand);

  --sans:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --display:"Inter","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono","JetBrains Mono",Menlo,Consolas,monospace;

  --sh-1:0 1px 2px rgba(18,21,28,.06);
  --sh-2:0 1px 2px rgba(18,21,28,.05),0 8px 24px -8px rgba(18,21,28,.12);
  --sh-3:0 2px 6px rgba(18,21,28,.06),0 28px 60px -24px rgba(18,21,28,.28);

  --r:8px; --r-sm:6px; --r-lg:14px; --r-pill:999px;
  --t:.15s; --ease:cubic-bezier(.2,.6,.25,1);
  --gut:clamp(1rem,4vw,2.5rem);
  --maxw:1180px;
}

/* the dark palette lives in one place and is applied by BOTH the media query
   and the explicit [data-theme] override, so the header toggle always wins */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  color-scheme: dark;
  --bg:#0C0E13; --bg-2:#090B0F;
  --surface:#14171F; --surface-2:#191D26; --surface-3:#222735;
  --ink:#E9ECF2; --ink-2:#C3C9D6; --muted:#8E97A8; --faint:#697180;
  --line:#242A36; --line-2:#333B4B; --hair:#1D222C;
  --brand:#8FA6DC; --brand-2:#A3B7E6; --brand-deep:#6E88C6; --brand-ink:#B4C4EC;
  --brand-soft:rgba(143,166,220,.10); --brand-glow:rgba(143,166,220,.20);
  --on-brand:#0E1220;
  --ok:#4FBE83; --ok-bg:rgba(79,190,131,.13); --ok-line:rgba(79,190,131,.32);
  --bad:#E4715A; --bad-bg:rgba(228,113,90,.13); --bad-line:rgba(228,113,90,.30);
  --warn:#D8AC50; --warn-bg:rgba(216,172,80,.14); --warn-line:rgba(216,172,80,.32);
  --null:#8E97A8; --null-bg:rgba(142,151,168,.12);
  --low:#49B6B6; --low-bg:rgba(73,182,182,.13); --low-line:rgba(73,182,182,.30);
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 1px 2px rgba(0,0,0,.4),0 10px 28px -10px rgba(0,0,0,.6);
  --sh-3:0 2px 8px rgba(0,0,0,.45),0 32px 64px -26px rgba(0,0,0,.75);
}}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0C0E13; --bg-2:#090B0F;
  --surface:#14171F; --surface-2:#191D26; --surface-3:#222735;
  --ink:#E9ECF2; --ink-2:#C3C9D6; --muted:#8E97A8; --faint:#697180;
  --line:#242A36; --line-2:#333B4B; --hair:#1D222C;
  --brand:#8FA6DC; --brand-2:#A3B7E6; --brand-deep:#6E88C6; --brand-ink:#B4C4EC;
  --brand-soft:rgba(143,166,220,.10); --brand-glow:rgba(143,166,220,.20);
  --on-brand:#0E1220;
  --ok:#4FBE83; --ok-bg:rgba(79,190,131,.13); --ok-line:rgba(79,190,131,.32);
  --bad:#E4715A; --bad-bg:rgba(228,113,90,.13); --bad-line:rgba(228,113,90,.30);
  --warn:#D8AC50; --warn-bg:rgba(216,172,80,.14); --warn-line:rgba(216,172,80,.32);
  --null:#8E97A8; --null-bg:rgba(142,151,168,.12);
  --low:#49B6B6; --low-bg:rgba(73,182,182,.13); --low-line:rgba(73,182,182,.30);
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 1px 2px rgba(0,0,0,.4),0 10px 28px -10px rgba(0,0,0,.6);
  --sh-3:0 2px 8px rgba(0,0,0,.45),0 32px 64px -26px rgba(0,0,0,.75);
}

/* ------------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 15px/1.6 var(--sans);
  font-feature-settings:"kern" 1,"liga" 1,"cv05" 1;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; min-height:100vh;
}
main{flex:1 0 auto}
h1,h2,h3,h4{font-family:var(--display); margin:0; letter-spacing:-.021em; line-height:1.14; font-weight:640}
h1{font-size:clamp(2rem,4.2vw,3.05rem); letter-spacing:-.032em}
h2{font-size:clamp(1.35rem,2.4vw,1.85rem); letter-spacing:-.026em}
h3{font-size:1.075rem}
p{margin:0 0 1rem}
a{color:var(--brand-ink); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
img,svg{max-width:100%}
b,strong{font-weight:650}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:3px}
::selection{background:var(--brand-glow); color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* numbers are data: always tabular so columns align and digits don't jitter */
.num,.stat b,.kpi b,.ls b,.tag,.aval,.tn,.cpr,.swpr,.c__n,.chip span,.chat__meter{
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.wrap--narrow{max-width:760px}

/* ------------------------------------------------------------------- shell */
.top{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--line);
}
.top .wrap{display:flex; align-items:center; gap:1rem; height:60px}
.brand{
  display:inline-flex; align-items:center; gap:.55rem; margin-right:auto;
  font-family:var(--display); font-weight:680; font-size:1.055rem;
  letter-spacing:-.028em; color:var(--ink); text-decoration:none;
}
.brand:hover{text-decoration:none; color:var(--brand-ink)}
/* The real mark, painted as a MASK so it takes currentColor -- i.e. --brand -- and stays
   correct in both themes from one file. 227x96 source, so the box is 2.36:1, not square. */
.brandmark{width:52px; height:22px; color:var(--brand); flex:none; background:currentColor;
  -webkit-mask:url("skuer-mark.png") center/contain no-repeat;
  mask:url("skuer-mark.png") center/contain no-repeat}
.brand .dot{color:var(--brand)}
.nav{display:flex; align-items:center; gap:.55rem}
.navcompact{display:contents}
.navcompact summary{display:none; cursor:pointer; list-style:none; color:var(--ink-2); font-size:.82rem; font-weight:620; padding:.4rem .55rem; border:1px solid var(--line); border-radius:var(--r-sm)}
.navcompact summary::-webkit-details-marker{display:none}
.navcompact>div{display:flex; align-items:center; gap:.55rem}
.navcompact a,.navcompact form{margin:0; white-space:nowrap}
.navcompact .btn--link{font-size:.82rem}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.who{
  color:var(--muted); font-size:.8rem; max-width:20ch; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.navlink{color:var(--ink-2); font-size:.875rem; font-weight:520; padding:.35rem .2rem}
.navlink:hover{color:var(--brand-ink); text-decoration:none}
.navform{margin:0; display:flex}
.themebtn{
  width:32px; height:32px; display:grid; place-items:center; flex:none;
  background:transparent; border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--muted); cursor:pointer; transition:var(--t) var(--ease);
}
.themebtn:hover{color:var(--ink); border-color:var(--line-2); background:var(--surface)}
.themebtn svg{width:15px; height:15px}
.schedule-field[hidden]{display:none}
.ic-moon{display:none} .ic-sun{display:block}
:root[data-theme="dark"] .ic-moon{display:block} :root[data-theme="dark"] .ic-sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ic-moon{display:block}
  :root:not([data-theme="light"]) .ic-sun{display:none}
}

.footer{
  margin-top:5rem; border-top:1px solid var(--line);
  background:var(--bg-2); color:var(--muted); font-size:.8rem;
}
.footer .wrap{display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  justify-content:space-between; padding-block:1.5rem}

.flashwrap{margin-top:1.25rem}
.flash{
  background:var(--brand-soft); border:1px solid var(--line);
  border-left:3px solid var(--brand); border-radius:var(--r-sm);
  padding:.7rem .95rem; font-size:.885rem; color:var(--ink-2); margin-bottom:.6rem;
}

/* ---------------------------------------------------------------- controls */
/* Colours are set directly on each variant rather than routed through an
   intermediate --btn-bg custom property: one less indirection to trace, and the
   variants read as plain overrides.  Note when debugging theme switching that
   `transition` below covers background-color, so getComputedStyle during the
   150ms flip returns the OLD colour — that is the transition, not a stale
   cascade.  Reload, or suppress the transition, before concluding anything. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  background:var(--brand); color:var(--on-brand); border:1px solid var(--brand);
  padding:.6rem 1.05rem; border-radius:var(--r-sm); cursor:pointer;
  font:600 .885rem/1 var(--sans); letter-spacing:-.008em;
  text-decoration:none; white-space:nowrap; transition:var(--t) var(--ease);
}
.btn:hover{background:var(--brand-2); border-color:var(--brand-2);
  text-decoration:none; transform:translateY(-1px); box-shadow:var(--sh-2)}
.btn:active{transform:none; box-shadow:none}
.btn svg{width:15px; height:15px; flex:none}
.btn--ghost{background:var(--surface); color:var(--ink-2); border-color:var(--line-2)}
.btn--ghost:hover{background:var(--surface-2); border-color:var(--muted);
  color:var(--ink); box-shadow:var(--sh-1)}
.btn--invert{background:var(--surface); color:var(--brand-ink); border-color:transparent}
.btn--invert:hover{background:var(--surface); border-color:transparent; opacity:.92}
.btn--sm{padding:.4rem .7rem; font-size:.8rem}
.btn--lg{padding:.8rem 1.5rem; font-size:.95rem}
.btn--block{width:100%}
.btn--link{
  background:none; border:0; padding:.35rem .2rem; cursor:pointer;
  color:var(--muted); font:520 .85rem/1 var(--sans); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--line-2);
}
.btn--link:hover{color:var(--ink)}

.input{
  width:100%; background:var(--surface); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:.62rem .8rem; font:400 .93rem/1.4 var(--sans); transition:var(--t) var(--ease);
}
.input::placeholder{color:var(--faint)}
.input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.field{margin-bottom:1rem}
.field label{display:block; margin-bottom:.35rem; font-size:.815rem;
  font-weight:600; color:var(--ink-2); letter-spacing:-.005em}

/* -------------------------------------------------------------- primitives */
.eyebrow{
  font:650 .705rem/1 var(--sans); letter-spacing:.13em; text-transform:uppercase;
  color:var(--brand); margin-bottom:.8rem;
}
.lead{font-size:1.075rem; line-height:1.62; color:var(--ink-2); max-width:60ch}
.sub{color:var(--muted); max-width:66ch}
.hint{color:var(--faint); font-size:.815rem; margin:.4rem 0 0}
.backline{margin:3rem 0 0; font-size:.875rem}
.backline a{color:var(--muted)}

.pill{
  display:inline-flex; align-items:center; gap:.32rem; flex:none;
  padding:.2rem .5rem; border-radius:var(--r-pill);
  font:650 .665rem/1.45 var(--sans); letter-spacing:.075em; text-transform:uppercase;
  background:var(--null-bg); color:var(--null); border:1px solid transparent;
}
.pill::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor}
.pill--hit{background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line)}
.pill--no_hit{background:var(--null-bg); color:var(--null)}
.pill--no_hit::before{background:transparent; box-shadow:inset 0 0 0 1.5px currentColor}
.pill--errored{background:var(--bad-bg); color:var(--bad); border-color:var(--bad-line)}
.pill--unsupported{background:var(--null-bg); color:var(--null)}
.pill--unsupported::before{background:transparent; box-shadow:inset 0 0 0 1.5px currentColor}

.note{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--brand); border-radius:var(--r-sm);
  padding:.85rem 1.05rem; font-size:.865rem; color:var(--ink-2);
  margin:1.5rem 0; line-height:1.6;
}
.note b{color:var(--ink)}
.note--warn{border-left-color:var(--warn); background:var(--warn-bg)}

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1.6rem; box-shadow:var(--sh-1);
}
.card.narrow{max-width:430px; width:100%; padding:2rem; box-shadow:var(--sh-2)}

.empty{
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  padding:3.5rem 1rem; color:var(--faint); font-size:.9rem;
  border:1px dashed var(--line-2); border-radius:var(--r); background:var(--surface-2);
}
.empty svg{width:26px; height:26px; stroke:currentColor; fill:none; opacity:.65}

.spin{
  display:inline-block; width:11px; height:11px; flex:none; vertical-align:-1px;
  border:1.8px solid var(--line-2); border-top-color:var(--brand);
  border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* section head shared by report pages */
.pagehead{padding:2.5rem 0 1.5rem; border-bottom:1px solid var(--line); margin-bottom:2rem}
.pagehead--row{display:flex; flex-wrap:wrap; gap:1.25rem; align-items:flex-end;
  justify-content:space-between}
.pagehead h1{margin-bottom:.6rem}
.pagehead .actions{display:flex; gap:.55rem; flex-wrap:wrap}
.partial{color:var(--warn); font-weight:640}

/* ============================================================ LANDING page */
.hero{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center; padding:clamp(3rem,7vw,5.5rem) 0;
}
.hero h1{margin-bottom:1.15rem; max-width:14ch}
.hero .lead{margin-bottom:1.9rem}
.cta{display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:1.75rem}
.demo{display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; font-size:.8rem}
.demo .hint{margin:0}
.kw{
  padding:.25rem .55rem; border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--surface); color:var(--ink-2); font-size:.775rem; font-weight:520;
}

/* THE HERO GRAPHIC: the Summary sheet of the workbook the customer receives.
   It replaced a `.mock*` search-and-report miniature that was wrong twice over — it drew a
   search box and an on-screen report, neither of which the product still has
   (report_chat_routes.py: "THERE IS NO WEB REPORT VIEW, BY DECISION"), and it filled its
   rows with three real SKUs from a live client's catalog beside invented stock numbers.
   Structure here is real (`SUMMARY_COLS` and the sheet tabs from build_workbook.py); the
   figures are illustrative and the products are in a category no client sells. */
.sheetwrap{position:relative}
.sheet{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-3); overflow:hidden; position:relative; z-index:2;
}
.sheet__bar{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.7rem .9rem; border-bottom:1px solid var(--hair); background:var(--surface-2);
}
.sheet__file{font-weight:620; font-size:.82rem; color:var(--ink-2)}
.sheet__note{
  font-size:.62rem; text-transform:uppercase; letter-spacing:.09em; color:var(--faint);
  border:1px solid var(--hair); border-radius:var(--r-pill); padding:.12rem .45rem;
}
.sheet__tabs{display:flex; flex-wrap:wrap; gap:.3rem; padding:.6rem .9rem 0}
.sheet__tab{
  font-size:.68rem; color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--hair); border-radius:var(--r-sm) var(--r-sm) 0 0;
  padding:.26rem .5rem;
}
.sheet__tab.is-on{background:var(--brand); border-color:var(--brand); color:var(--on-brand)}
.sheet__tab--more{color:var(--faint); background:transparent; border-style:dashed}
.sheet__table{width:100%; border-collapse:collapse; font-size:.78rem}
.sheet__table th{
  text-align:right; font-weight:600; font-size:.63rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--faint); padding:.7rem .5rem .5rem;
  border-bottom:1px solid var(--line);
}
.sheet__table th:first-child,.sheet__table td:first-child{text-align:left; padding-left:.9rem}
.sheet__table th:last-child,.sheet__table td:last-child{padding-right:.9rem}
.sheet__table td{
  text-align:right; padding:.55rem .5rem; color:var(--ink-2);
  border-bottom:1px solid var(--hair);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
.sheet__table tbody tr:last-child td{border-bottom:0}
.sheet__table td:first-child{font-variant-numeric:normal; color:var(--ink); font-weight:520}
/* Qualified with `td`: `.sheet__table td` sets a colour and outranks a bare single class
   (0,1,1 beats 0,1,0), so the unqualified selectors silently lost and every OOS % rendered
   in the same body-text grey. */
.sheet__table td.sheet__ok{color:var(--ok); font-weight:600}
.sheet__table td.sheet__warn{color:var(--warn); font-weight:600}
.sheet__table td.sheet__bad{color:var(--bad); font-weight:600}

.how{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; margin:2rem 0 4.5rem}
.step{background:var(--surface); padding:1.75rem 1.5rem; position:relative}
.step .icon{width:34px; height:34px; border-radius:var(--r-sm); display:grid;
  place-items:center; background:var(--brand-soft); color:var(--brand); margin-bottom:1rem}
.step .icon svg{width:17px; height:17px}
.step .n{position:absolute; top:1.5rem; right:1.5rem; font-family:var(--mono);
  font-size:.72rem; color:var(--faint); letter-spacing:.06em}
.step h3{margin-bottom:.45rem}
.step p{margin:0; color:var(--muted); font-size:.875rem; line-height:1.6}

.duo{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.25rem; margin-bottom:4.5rem}
.panel{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1.9rem; box-shadow:var(--sh-1)}
.panel h3{font-size:1.3rem; margin-bottom:.65rem; letter-spacing:-.025em}
.panel p{color:var(--muted); font-size:.9rem; margin-bottom:1.25rem}
.pv{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}

.ctaband{
  display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center;
  justify-content:space-between; background:var(--brand); color:var(--on-brand);
  border-radius:var(--r-lg); padding:clamp(1.75rem,4vw,2.75rem); margin-bottom:4rem;
}
.ctaband h2{color:var(--on-brand); margin-bottom:.4rem}
.ctaband p{margin:0; color:var(--on-brand); opacity:.82; font-size:.95rem}

/* --- landing revamp (lp-) ------------------------------------------------- */
/* SCOPED ON PURPOSE, and the scoping is the whole safety property. `.hero`,
   `.btn`, `.eyebrow`, `.lead` and `.hint` are shared with the logged-in app --
   report.html even puts `hero` on a stat tile, so restyling it would silently move
   the coverage report's headline number. Everything below is namespaced `.lp-*`
   under one `.lp` root and redefines nothing above this line. The only shared name
   touched is `.lp .btn`, a descendant override that cannot escape the landing page.

   BRAND vs SIGNAL (see the file header) still holds. This accent is neither: it is
   a campaign colour that exists only here, so it gets its own token rather than
   borrowing --bad, which means "out of stock" everywhere else in the product. */
.lp{
  --lp-accent:#C0402A; --lp-accent-2:#9C3120;
  --lp-display:"Archivo","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --lp-text:"Public Sans","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  font-family:var(--lp-text);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .lp{
  --lp-accent:#E4715A; --lp-accent-2:#F0937F;
}}
:root[data-theme="dark"] .lp{ --lp-accent:#E4715A; --lp-accent-2:#F0937F }

.lp-eyebrow{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:1rem}
.lp h1.lp-h1{font-family:var(--lp-display); font-stretch:112%; font-variation-settings:"wdth" 112;
  font-weight:700; font-size:clamp(2.6rem,6vw,4.15rem); line-height:.95;
  letter-spacing:-.032em; color:var(--ink); margin:0; text-wrap:balance}
.lp-h1 em{font-style:normal; color:var(--lp-accent)}
.lp-lead{font-size:1.06rem; line-height:1.5; color:var(--ink-2);
  max-width:36em; margin:1.15rem 0 0}
.lp-ctarow{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem}
.lp-hint{font-size:.85rem; color:var(--muted); margin-top:.9rem}
/* the landing CTA carries the campaign accent; scoped so /login and /signup,
   which share `.btn`, are untouched */
.lp .btn{background:var(--lp-accent); border-color:var(--lp-accent)}
.lp .btn:hover{background:var(--lp-accent-2); border-color:var(--lp-accent-2)}
.lp .btn--ghost{background:transparent; border-color:var(--line-2); color:var(--ink)}
.lp .btn--ghost:hover{background:var(--surface-2); border-color:var(--line-2)}

.lp-hero{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2rem,5vw,4rem); align-items:center; padding:clamp(2.5rem,6vw,4.5rem) 0}

.lp h2.lp-h2{font-family:var(--lp-display); font-stretch:112%; font-variation-settings:"wdth" 112;
  font-weight:700; font-size:clamp(1.5rem,3vw,2.05rem); line-height:1.08;
  letter-spacing:-.024em; color:var(--ink); margin:0 0 .35rem; text-wrap:balance}
.lp-sec{padding:clamp(2rem,5vw,3.25rem) 0; border-top:1px solid var(--line)}
.lp-sec__note{color:var(--muted); font-size:.95rem; max-width:44em; margin:0}

.lp-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,3vw,2rem); margin-top:1.6rem}
.lp-card{border-top:2px solid var(--ink); padding-top:.8rem}
.lp-card__tab{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--lp-accent)}
.lp-card h3{font-size:1.02rem; letter-spacing:-.01em; margin:.35rem 0 .3rem; color:var(--ink)}
.lp-card p{font-size:.9rem; line-height:1.5; color:var(--muted); margin:0}

.lp-steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,3vw,2rem); margin-top:1.6rem}
.lp-step__n{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  color:var(--lp-accent); margin-bottom:.35rem}
.lp-step h3{font-size:1.02rem; letter-spacing:-.01em; margin:0 0 .3rem; color:var(--ink)}
.lp-step p{font-size:.9rem; line-height:1.5; color:var(--muted); margin:0}
.lp-nointeg{font-family:var(--mono); font-size:.85rem; color:var(--ink);
  margin-top:1.5rem; padding-left:.9rem; border-left:3px solid var(--lp-accent)}
.lp-nointeg b{color:var(--lp-accent); font-weight:500}

/* THE SIGNUP FORM, SHOWN RATHER THAN DESCRIBED. The labels are the real ones from
   subscribe.html -- Brand name / What do you sell? / How many stores carry your brand? /
   Report plan / Report recipient / IANA time zone / Day of month -- so the claim "this is
   the whole form" is checkable by anyone who then signs up. Static markup, not inputs:
   nothing here submits, and a real <form> on the landing page would be a second, broken
   path to signup. */
.lp-form{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  padding:clamp(1.1rem,2.6vw,1.6rem); margin-top:1.75rem; box-shadow:var(--sh-1)}
.lp-form__head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:.3rem 1rem; margin-bottom:1rem}
.lp-form__head span{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted)}
.lp-fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem 1.1rem}
.lp-field{display:flex; flex-direction:column; gap:.28rem; min-width:0}
.lp-field--wide{grid-column:1 / -1}
.lp-field label{font-size:.78rem; font-weight:500; color:var(--ink-2)}
.lp-field label i{font-style:normal; color:var(--muted); font-weight:400}
.lp-field__val{border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--bg); color:var(--ink); font-size:.88rem; padding:.45rem .6rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lp-field__val.is-empty{color:var(--faint)}
.lp-choices{display:flex; gap:.4rem}
.lp-choice{border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--bg);
  font-size:.82rem; padding:.4rem .7rem; color:var(--muted)}
.lp-choice.is-on{border-color:var(--lp-accent); color:var(--lp-accent); font-weight:600;
  background:transparent}
.lp-form__foot{margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--line);
  font-size:.88rem; color:var(--ink)}
.lp-form__foot b{color:var(--lp-accent); font-weight:600}
@media (max-width:640px){ .lp-fields{grid-template-columns:minmax(0,1fr)} }

/* THE WORKBOOK EXCERPTS. A spreadsheet is a white document wherever you view it, so
   these keep paper colouring in both themes rather than inverting into something the
   customer will never receive. Every stock cell keeps its TEXT, not just a fill, so
   the meaning survives if the fills are lost. Colours are sampled from a delivered
   workbook so what a visitor sees here is what they open later. */
.lp-xlwrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.lp-xl{border-collapse:collapse; width:100%; min-width:23rem; background:#fff;
  color:#101010; font-family:Calibri,Carlito,"Segoe UI",system-ui,sans-serif;
  font-size:.7rem; border:1px solid #b9c4bf; box-shadow:var(--sh-2)}
.lp-xl td,.lp-xl th{border:1px solid #d9d9d9; padding:.19rem .34rem; text-align:left;
  font-weight:400; white-space:nowrap}
.lp-xl .rn{background:#f5f5f5; color:#666; text-align:center; width:1.6rem; font-size:.62rem}
.lp-xl .title{color:#1f6b3b; font-weight:700; font-size:.86rem}
.lp-xl .meta{color:#666; font-size:.66rem}
.lp-xl .block{background:#e2efe6; color:#1f6b3b; font-weight:700}
.lp-xl .band{background:#1f6b3b; color:#fff; font-weight:700; text-align:center;
  white-space:normal}
.lp-xl .title,.lp-xl .meta{white-space:normal}
.lp-xl .hdr{background:#1f6b3b; color:#fff; font-weight:700}
.lp-xl .fz{border-right:2px solid #9aa5a0}
.lp-xl .n{text-align:right; font-variant-numeric:tabular-nums}
.lp-xl .dash{color:#b0b0b0}
.lp-xl .s-in{background:#eaf3ec; color:#1f6b3b}
.lp-xl .s-oos{background:#fde9c8; color:#8a5300; font-weight:700; border-left:2px solid #8a5300}
.lp-xl .s-low{background:#fff6e5; color:#7a4a00}
.lp-xl .s-not{background:#f2f2f2; color:#8c8c8c}
.lp-xl .s-unk{background:#fff3cd; color:#8a6d1a}
.lp-xlcap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.3rem 1rem;
  margin-bottom:.5rem}
.lp-xlcap span{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted)}

.lp-band{display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center;
  justify-content:space-between; background:var(--ink); color:var(--bg);
  border-radius:var(--r-lg); padding:clamp(1.75rem,4vw,2.6rem); margin:0 0 4rem}
.lp-band h2{font-family:var(--lp-display); font-stretch:112%; font-variation-settings:"wdth" 112;
  font-weight:700; font-size:clamp(1.4rem,2.6vw,1.85rem); letter-spacing:-.022em;
  color:var(--bg); margin:0 0 .35rem}
.lp-band p{margin:0; color:var(--bg); opacity:.8; font-size:.95rem}
.lp-band .btn{background:var(--lp-accent); border-color:var(--lp-accent); color:#fff}

@media (max-width:900px){
  /* minmax(0,1fr), not 1fr. A `1fr` track keeps min-width:auto, so the workbook
     excerpt -- which is deliberately wider than a phone -- stretches its grid column
     instead of scrolling inside .lp-xlwrap, and the whole PAGE scrolls sideways.
     MEASURED at 375px before this: document scrollWidth 812. The explicit min-width:0
     on the children is the same fix for any future wide child. */
  .lp-hero{grid-template-columns:minmax(0,1fr); gap:2rem}
  .lp-hero>*{min-width:0}
  .lp-cards,.lp-steps{grid-template-columns:minmax(0,1fr)}
}

/* =============================================================== AUTH page */
.auth{display:grid; place-items:center; padding:clamp(2.5rem,7vw,5rem) var(--gut)}
.auth h1{font-size:1.9rem; margin-bottom:.5rem}
.auth .sub{margin-bottom:1.75rem; font-size:.9rem}
.alt{margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--line);
  font-size:.865rem; color:var(--muted); text-align:center}

/* ============================================================= SEARCH page */
.searchhero{padding:clamp(2.5rem,6vw,4.5rem) var(--gut) 1rem; text-align:center}
.searchhero .eyebrow{display:block}
.searchhero h1{margin-bottom:.9rem}
.searchhero .lead{margin:0 auto 2.25rem; text-align:center}
.searchform{max-width:660px; margin:0 auto}
.searchbar{
  display:flex; align-items:center; gap:.6rem; background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--r-lg); padding:.5rem .5rem .5rem 1rem;
  box-shadow:var(--sh-2); transition:var(--t) var(--ease);
}
.searchbar:focus-within{border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft),var(--sh-2)}
.searchbar .si{width:19px; height:19px; stroke:var(--muted); fill:none; stroke-width:2;
  stroke-linecap:round; flex:none}
.searchinput{
  flex:1; min-width:0; border:0; background:none; color:var(--ink);
  font:400 1.02rem/1.4 var(--sans); padding:.55rem 0;
}
.searchinput:focus{outline:none}
.searchinput::placeholder{color:var(--faint)}
.searchgo{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  background:var(--brand); color:var(--on-brand); border:0; border-radius:var(--r-sm);
  cursor:pointer; transition:var(--t) var(--ease);
}
.searchgo:hover{background:var(--brand-2)}
.searchgo svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.examples{display:flex; gap:.45rem; flex-wrap:wrap; justify-content:center; margin-top:1rem}
.ex{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:.32rem .75rem; font:520 .8rem/1 var(--sans); color:var(--ink-2); cursor:pointer;
  transition:var(--t) var(--ease);
}
.ex:hover{border-color:var(--brand); color:var(--brand-ink); background:var(--brand-soft)}

.runswrap{margin-top:4rem}
.runs h2{margin-bottom:1.1rem; font-size:1.2rem}
.runlist{border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--surface)}
.runrow{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.95rem 1.15rem; border-bottom:1px solid var(--hair);
}
.runrow:last-child{border-bottom:0}
.runrow:hover{background:var(--surface-2)}
.rt{font-weight:600; font-size:.925rem; letter-spacing:-.008em}
.rm{font-size:.685rem; text-transform:uppercase; letter-spacing:.09em; color:var(--faint); margin-top:.15rem}
.rr{display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; justify-content:flex-end}
.hits{display:inline-flex; align-items:center; gap:.35rem; color:var(--ok);
  font-size:.85rem; font-weight:640}
.hits svg{width:14px; height:14px; flex:none}
.runpill{font-size:.8rem; color:var(--faint)}

/* ========================================================== PROGRESS pages */
.running{max-width:660px; margin-inline:auto; text-align:center;
  padding:clamp(3rem,8vw,5.5rem) var(--gut)}
.running h1{font-size:clamp(1.6rem,3.4vw,2.3rem); margin-bottom:.85rem}
.running .sub{margin:0 auto 2.25rem}
.radar{position:relative; width:88px; height:88px; margin:0 auto 2rem}
.radar span{
  position:absolute; inset:0; border:1.5px solid var(--brand);
  border-radius:50%; opacity:0; animation:ripple 2.6s var(--ease) infinite;
}
.radar span:nth-child(2){animation-delay:1.3s}
@keyframes ripple{0%{transform:scale(.42); opacity:.55}100%{transform:scale(1); opacity:0}}
.radar .core{
  position:absolute; inset:26%; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand); border-radius:50%;
}
.radar .core svg{width:20px; height:20px}
.bar{height:5px; background:var(--surface-3); border-radius:var(--r-pill);
  overflow:hidden; margin-bottom:.85rem}
.bar i{display:block; height:100%; width:0; border-radius:inherit;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transition:width .6s var(--ease)}
.progressline{font-weight:600; font-size:.95rem; margin-bottom:.3rem}
.detailline{color:var(--muted); font-size:.83rem; margin-bottom:.3rem; min-height:1.2em}
.phaseline{color:var(--faint); font-size:.83rem; min-height:1.2em;
  transition:opacity .3s var(--ease)}
.phaseline.is-out{opacity:0}
.livestats{display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-top:2.25rem}
.livestats--2{grid-template-columns:repeat(2,1fr); max-width:420px; margin-inline:auto}
.ls{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:1rem .75rem}
.ls b{display:block; font-size:1.55rem; font-weight:650; letter-spacing:-.02em; line-height:1.1}
.ls span{font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; color:var(--faint)}
.ls--hit b{color:var(--ok)}
.pop{animation:pop .34s var(--ease)}
@keyframes pop{0%{transform:scale(1)}38%{transform:scale(1.16)}100%{transform:scale(1)}}
.cancelrow{margin-top:1.75rem}

/* ===================================================== COVERAGE REPORT page */
.report{padding-bottom:3rem}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; margin-bottom:1.75rem}
.stat{background:var(--surface); padding:1.25rem 1.35rem}
.stat b{display:block; font-size:2.1rem; font-weight:650; letter-spacing:-.03em; line-height:1.05}
.stat .l{font-size:.815rem; font-weight:620; margin-top:.3rem; color:var(--ink-2)}
.stat .m{font-size:.755rem; color:var(--faint); margin-top:.15rem; line-height:1.45}
.stat--hit b{color:var(--ok)}
.stat--no_hit b{color:var(--ink-2)}
.stat--errored b{color:var(--bad)}
.stat--unsupported b{color:var(--null)}
.stat.hero{background:linear-gradient(160deg,var(--ok-bg),transparent 62%),var(--surface)}
.stat--errored.hero{background:linear-gradient(160deg,var(--bad-bg),transparent 62%),var(--surface)}

.sweepcta{
  display:flex; flex-wrap:wrap; gap:1.1rem; align-items:center; justify-content:space-between;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:var(--r); padding:1.15rem 1.35rem; margin-bottom:2rem;
}
.sweepcta b{display:block; font-size:.95rem; margin-bottom:.15rem}
.sweepcta span{color:var(--muted); font-size:.855rem}

.toolbar{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center;
  justify-content:space-between; margin-bottom:.85rem}
.search{
  flex:1 1 240px; max-width:340px; background:var(--surface); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:.5rem .75rem; font:400 .875rem/1.4 var(--sans);
}
.search:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.chips{display:flex; gap:.4rem; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:.35rem .8rem; font:560 .82rem/1 var(--sans); color:var(--ink-2);
  transition:var(--t) var(--ease);
}
.chip span{font-size:.75rem; color:var(--faint)}
.chip:hover{border-color:var(--line-2); background:var(--surface-2)}
.chip.is-on{background:var(--brand); border-color:var(--brand); color:var(--on-brand)}
.chip.is-on span{color:var(--on-brand); opacity:.75}
.rescount{font-size:.78rem; color:var(--faint); margin-bottom:1rem}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(266px,1fr)); gap:.85rem}
.c{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.05rem 1.15rem; transition:var(--t) var(--ease);
  border-left:3px solid var(--line-2);
}
.c:hover{box-shadow:var(--sh-2); transform:translateY(-1px)}
.c--hit{border-left-color:var(--ok)}
.c--no_hit{border-left-color:var(--line-2)}
.c--errored{border-left-color:var(--bad)}
.c--unsupported{border-left-color:var(--null)}
.c__top{display:flex; align-items:flex-start; justify-content:space-between;
  gap:.6rem; margin-bottom:.35rem}
.c__name{font-size:.95rem; font-weight:640; letter-spacing:-.012em; line-height:1.3}
.c__meta{font-size:.83rem; color:var(--muted)}
.c__n{color:var(--ok); font-weight:650}
.c__prod{
  margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--hair);
  font-size:.79rem; color:var(--ink-2); line-height:1.45;
}
.c__why{
  margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--hair);
  font-size:.755rem; color:var(--faint); line-height:1.45; font-family:var(--mono);
  word-break:break-word;
}

/* ======================================================== SWEEP REPORT page */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; margin-bottom:1.5rem}
.kpi{background:var(--surface); padding:1.15rem 1.25rem; display:flex;
  align-items:center; gap:.85rem}
.kpi b{display:block; font-size:1.75rem; font-weight:650; letter-spacing:-.03em; line-height:1.05}
.kpi .l{font-size:.79rem; font-weight:620; color:var(--ink-2); margin-top:.2rem}
.kpi .m{font-size:.735rem; color:var(--faint); margin-top:.1rem; line-height:1.4}
.kpi--oos b{color:var(--bad)}
.kpi--ok b{color:var(--ok)}
.kpi--null b{color:var(--null)}
.ring{width:52px; height:52px; flex:none; transform:rotate(0deg)}
.ring__bg{fill:none; stroke:var(--surface-3); stroke-width:6}
.ring__val{fill:none; stroke:var(--bad); stroke-width:6; stroke-linecap:round}

.insights{display:grid; gap:.6rem; margin-bottom:1.75rem}
.ins{
  display:flex; gap:.75rem; align-items:flex-start; background:var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--line-2);
  border-radius:var(--r-sm); padding:.8rem 1rem; font-size:.875rem; color:var(--ink-2);
}
.ins--high{border-left-color:var(--bad)}
.ins--medium{border-left-color:var(--warn)}
.ins--low{border-left-color:var(--brand)}
.ins--data{border-left-color:var(--null)}
.ins__n{font-family:var(--mono); font-size:.72rem; color:var(--faint); flex:none; padding-top:.15rem}

.triage{display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:1rem; margin-bottom:2rem}
.tcard{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1.3rem; box-shadow:var(--sh-1)}
.tcard__head{display:flex; gap:.7rem; align-items:flex-start; margin-bottom:1.1rem}
.tdot{width:9px; height:9px; border-radius:50%; flex:none; margin-top:.4rem; background:var(--null)}
.tdot--fix{background:var(--bad)} .tdot--exp{background:var(--ok)}
.tdot--cor{background:var(--warn)} .tdot--geo{background:var(--brand)}
.tcard__h{font-size:1.02rem; letter-spacing:-.02em}
.tcard__sub{margin:.1rem 0 0; font-size:.79rem; color:var(--muted); line-height:1.45}
.tsub{font-size:.665rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--faint); margin-bottom:.6rem; font-weight:640}
.tsub--sp{margin-top:1.35rem}
.tempty{font-size:.83rem; color:var(--faint); padding:.35rem 0}
.tnat{margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--hair);
  font-size:.79rem; color:var(--muted); line-height:1.5}

.arow{display:grid; grid-template-columns:minmax(0,1fr) 84px auto;
  gap:.6rem; align-items:center; padding:.3rem 0; font-size:.83rem}
.alab{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2)}
.atrack{height:5px; background:var(--surface-3); border-radius:var(--r-pill); overflow:hidden}
.afill{display:block; height:100%; border-radius:inherit; background:var(--null)}
.afill--oos{background:var(--bad)} .afill--cov{background:var(--ok)}
.aval{font-size:.78rem; color:var(--ink-2); white-space:nowrap; text-align:right}
.aval em{font-style:normal; color:var(--faint); margin-left:.25rem}

.ttable{width:100%; border-collapse:collapse; font-size:.815rem}
.ttable td{padding:.36rem 0; border-bottom:1px solid var(--hair); vertical-align:top}
.ttable tr:last-child td{border-bottom:0}
.tp{color:var(--ink-2); padding-right:.6rem}
.tm{color:var(--faint); font-size:.765rem; text-align:right; white-space:nowrap; padding-left:.5rem}
.tn{color:var(--ink-2); text-align:right; white-space:nowrap; padding-left:.5rem; font-size:.78rem}
.tn em{font-style:normal; color:var(--faint); margin-left:.25rem}
.tn--oos{color:var(--bad)} .tn--over{color:var(--bad)} .tn--under{color:var(--ok)}

.detail-h{margin:2.5rem 0 .9rem; font-size:1.25rem}
.legend{display:flex; flex-wrap:wrap; gap:.5rem 1.15rem; align-items:center;
  padding:.8rem 1rem; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); margin-bottom:1.25rem; font-size:.8rem}
.lg{display:inline-flex; align-items:center; gap:.4rem; color:var(--ink-2)}
.lg em{font-style:normal; color:var(--faint); font-size:.755rem}
.sw{width:10px; height:10px; border-radius:2px; flex:none}
.sw--in{background:var(--ok)} .sw--oos{background:var(--bad)}
.sw--unk{background:var(--warn)}
.sw--nc{background:transparent; box-shadow:inset 0 0 0 1.5px var(--faint); opacity:.75}
.lg-note{flex:1 1 100%; color:var(--faint); font-size:.765rem; line-height:1.5}

.chsec{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); margin-bottom:.7rem; overflow:hidden}
.chsec > summary{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; cursor:pointer;
  padding:.85rem 1.1rem; list-style:none; user-select:none;
}
.chsec > summary::-webkit-details-marker{display:none}
.chsec > summary::before{
  content:""; width:7px; height:7px; flex:none; border-right:1.6px solid var(--faint);
  border-bottom:1.6px solid var(--faint); transform:rotate(-45deg);
  transition:transform var(--t) var(--ease);
}
.chsec[open] > summary::before{transform:rotate(45deg)}
.chsec > summary:hover{background:var(--surface-2)}
.chsec__name{font-weight:640; font-size:.94rem; letter-spacing:-.012em}
.chsec__meta{margin-left:auto; font-size:.79rem; color:var(--muted); white-space:nowrap}
.oosnum{font-style:normal; color:var(--bad); font-weight:620}
.covmini{width:52px; height:4px; background:var(--surface-3);
  border-radius:var(--r-pill); overflow:hidden; flex:none}
.covmini i{display:block; height:100%; background:var(--ok)}

.swscroll{overflow-x:auto; border-top:1px solid var(--line)}
.swtable{border-collapse:separate; border-spacing:0; width:100%; font-size:.815rem}
.swtable th,.swtable td{padding:.5rem .7rem; text-align:left; border-bottom:1px solid var(--hair)}
.swtable thead th{
  position:sticky; top:0; z-index:2; background:var(--surface-2);
  font-size:.645rem; text-transform:uppercase; letter-spacing:.085em;
  color:var(--faint); font-weight:640; white-space:nowrap; border-bottom:1px solid var(--line);
}
.swmatrix tbody th.stky,.swmatrix thead th.stky{
  position:sticky; left:0; z-index:3; background:var(--surface);
  border-right:1px solid var(--line); font-weight:560; text-align:left;
  min-width:190px; max-width:290px;
}
.swmatrix thead th.stky{z-index:4; background:var(--surface-2)}
.stname{display:block; color:var(--ink-2); font-size:.815rem}
.staddr{display:block; color:var(--faint); font-size:.71rem; line-height:1.4; margin-top:.1rem}
.swst{color:var(--faint); font-size:.7rem; font-family:var(--mono)}
.swp{color:var(--ink-2)} .swu{color:var(--faint); font-family:var(--mono); font-size:.75rem}
.swpr{color:var(--ink-2); white-space:nowrap}

.cell{white-space:nowrap; vertical-align:top}
.cs{display:inline-flex; align-items:center; gap:.32rem; font-size:.775rem; font-weight:560}
.cs::before{content:""; width:6px; height:6px; border-radius:50%;
  background:currentColor; flex:none}
.cpr{display:block; font-size:.72rem; color:var(--faint); margin-top:.1rem}
.cell--in .cs{color:var(--ok)}
.cell--oos{background:var(--bad-bg)}
.cell--oos .cs{color:var(--bad)}
.cell--unk{background:var(--warn-bg)}
.cell--unk .cs{color:var(--warn)}
.cell--nc{background:var(--surface-2)}
.cell--nc .cs{color:var(--faint); font-weight:500}
.cell--nc .cs::before{background:transparent; box-shadow:inset 0 0 0 1.5px var(--faint); opacity:.7}
.cell--na .cs{color:var(--faint)}
.cell--na .cs::before{display:none}

/* ------------------------------------------------------------- responsive */

/* --- components added for the store-check pages ------------------------- */

/* Low Stock -- the fifth state. It is ORDERABLE (it counts inside the carrying population
   everywhere in this codebase), so it must not look like OOS; it is also not a clean In Stock,
   so it must not look like that either. Hue ALONE is never the whole signal: the dot below is
   drawn hollow, so the state survives greyscale, a colour-vision deficiency, and a bad monitor. */
.sw--low{background:var(--low)}
.cell--low{background:var(--low-bg)}
.cell--low .cs{color:var(--low)}
.cell--low .cs::before{background:none; box-shadow:inset 0 0 0 2px currentColor}

/* `unreadnum` is emitted by sweep_report.html twice and was defined nowhere, so it inherited
   browser-default <em> italics in one place and nothing in the other. Unread is a COVERAGE
   caveat, not a data state, so it takes the muted neutral rather than any signal colour. */
.unreadnum{font-style:normal; color:var(--muted); font-weight:520}

/* report.html emits the `ambiguous` status seven times; none of these three rules existed, so an
   ambiguous chain silently fell back to unstyled default. Ambiguous means "we found a probable
   match and could not confirm it" -- a caution, so it maps to --warn. */
.stat--ambiguous b{color:var(--warn)}
.pill--ambiguous{background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line)}
.c--ambiguous{border-left-color:var(--warn)}

/* A STATIC badge. The lost-distribution findings were borrowing `.chip`, which is defined as an
   interactive filter control (cursor:pointer, hover state) -- it invited a click that does
   nothing. Same shape, no affordance. */
.tag{
  display:inline-block; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:.28rem .7rem; margin:.2rem .25rem 0 0;
  font:520 .8rem/1.25 var(--sans); color:var(--ink-2);
}

/* Row tracking for the store tables -- Safeway is 879 rows, ALDI 2,615, with no aid at all. */
.swtable tbody tr:hover{background:var(--surface-2)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr; gap:3rem}
  .hero h1{max-width:none}
  .ctaband{flex-direction:column; align-items:flex-start}
}
@media (max-width:620px){
  .top .wrap{height:54px; gap:.5rem}
  .who{display:none}
  .brand{font-size:.98rem}
  .stats,.kpis{grid-template-columns:1fr 1fr}
  .livestats{grid-template-columns:1fr 1fr}
  .runrow{flex-direction:column; align-items:flex-start; gap:.6rem}
  .rr{justify-content:flex-start}
  .toolbar{flex-direction:column; align-items:stretch}
  .search{max-width:none}
  .pagehead--row{flex-direction:column; align-items:flex-start}
  .chsec__meta{margin-left:0; flex-basis:100%}
  .swmatrix tbody th.stky,.swmatrix thead th.stky{min-width:140px}
  .footer .wrap{flex-direction:column; gap:.35rem}
}
@media print{
  .top,.footer,.toolbar,.sweepcta,.actions,.backline,.themebtn{display:none !important}
  body{background:#fff}
  .chsec{break-inside:avoid; border-color:#ccc}
  .swscroll{overflow:visible}
}

/* --- two-part search: brand x chain ------------------------------------- */
.duobar{position:relative}
.duobar .duosep{width:1px; height:26px; background:var(--line-2); flex:none}
.duofield{position:relative; flex:1; min-width:0; display:flex}
.duofield .searchinput{width:100%}
.acx{
  position:absolute; z-index:40; top:calc(100% + .55rem); left:-.6rem; right:-.6rem;
  margin:0; padding:.3rem; list-style:none; background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--sh-3);
  max-height:19rem; overflow-y:auto;
}
.acx__i{
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
  padding:.5rem .7rem; border-radius:var(--r-sm); cursor:pointer; text-align:left;
}
.acx__i.is-on{background:var(--brand-soft)}
.acx__n{font:520 .95rem/1.3 var(--sans); color:var(--ink)}
.acx__i.is-on .acx__n{color:var(--brand-ink)}
.acx__m{font:400 .78rem/1 var(--sans); color:var(--muted); flex:none; white-space:nowrap}
@media (max-width:560px){
  .duobar{flex-wrap:wrap}
  .duobar .duosep{display:none}
  .duofield{flex-basis:100%; order:3}
  .acx{left:0; right:0}
}

/* --- scheduled-report onboarding and account --------------------------- */
.wrap--account{max-width:980px; padding-top:clamp(2.5rem,6vw,5rem)}
.account-head{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:2rem}
.account-head .lead{max-width:620px; margin:.75rem 0 0}
.identity-card,.subscribe-card,.subscription-card,.account-empty{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1)
}
.identity-card{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.25rem; margin-bottom:1.25rem}
.account-badge,.billing-state{
  display:inline-flex; margin-left:.55rem; padding:.2rem .55rem; border-radius:var(--r-pill);
  background:var(--ok-bg); color:var(--ok); font:650 .69rem/1.4 var(--sans); text-transform:uppercase; letter-spacing:.07em
}
.account-badge--warn{background:var(--warn-bg); color:var(--warn)}
.account-note,.verify-note,.form-error{padding:.8rem 1rem; border-radius:var(--r-sm); margin-bottom:1rem}
.account-note,.verify-note{background:var(--brand-soft); color:var(--brand-ink); border:1px solid var(--brand-glow)}
.form-error{background:var(--bad-bg); color:var(--bad); border:1px solid var(--bad-line)}
.subscribe-card{max-width:760px; padding:clamp(1.25rem,4vw,2rem)}
.plan-choices{border:0; padding:0; margin:0 0 1.25rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem}
.plan-choices legend{grid-column:1/-1; margin-bottom:.4rem; font-size:.815rem; font-weight:620; color:var(--ink-2)}
.plan-choice{display:grid; gap:.35rem; padding:1rem; border:1px solid var(--line); border-radius:var(--r); cursor:pointer}
.plan-choice:has(input:checked){border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.plan-choice input{position:absolute; opacity:0; pointer-events:none}
.plan-choice span{display:flex; justify-content:space-between; gap:1rem; color:var(--ink)}
.plan-choice em{font-style:normal; font-family:var(--mono); color:var(--brand-ink)}
.plan-choice small{color:var(--muted)}
.delivery-grid,.delivery-form{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1rem}
.delivery-grid .field:last-child,.delivery-form .field:nth-child(4){grid-column:1/-1}
.subscription-list{display:grid; gap:1rem}
.subscription-card{padding:clamp(1.1rem,3vw,1.5rem)}
.subscription-card__head{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding-bottom:1rem; margin-bottom:1rem; border-bottom:1px solid var(--hair)}
.subscription-card__head .billing-state{margin:0}
.billing-state--past_due,.billing-state--unpaid,.billing-state--inactive{background:var(--warn-bg); color:var(--warn)}
.billing-state--canceled{background:var(--null-bg); color:var(--null)}
.delivery-form .btn{align-self:end; justify-self:start; margin-bottom:1rem}
.subscription-card__actions{display:flex; justify-content:flex-end; padding-top:1rem; border-top:1px solid var(--hair)}
.subscription-card__actions form{margin:0}
.account-empty{text-align:center; padding:clamp(2rem,7vw,4rem)}
.account-empty p{color:var(--muted); margin:.7rem auto 1.25rem; max-width:460px}
@media (max-width:700px){
  .account-head{align-items:flex-start; flex-direction:column}
  .plan-choices,.delivery-grid,.delivery-form{grid-template-columns:1fr}
  .delivery-grid .field:last-child,.delivery-form .field:nth-child(4){grid-column:auto}
}

/* --- administrator operations console ----------------------------------
   A dense industrial/editorial register inside the existing Instrument UI.
   Customer surfaces intentionally do not inherit these rules. */
.ops-shell{
  --ops-display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --ops-rule:color-mix(in srgb,var(--line-2) 78%,transparent);
  background:
    linear-gradient(90deg,transparent 0,transparent calc(100% - 1px),var(--hair) calc(100% - 1px)) 0 0/72px 100%,
    var(--bg);
  padding:clamp(2rem,5vw,4.5rem) 0 1rem;
}
.ops-shell h1,.ops-shell h2{font-family:var(--ops-display); font-weight:600; letter-spacing:-.035em}
.ops-shell h1{font-size:clamp(2.5rem,6vw,5.4rem); line-height:.92}
.ops-shell h2{font-size:clamp(1.6rem,3vw,2.35rem)}
.ops-mast{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; padding-bottom:2rem; border-bottom:1px solid var(--ops-rule)}
.ops-kicker{margin:0 0 .55rem; color:var(--muted); font:650 .67rem/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase}
.ops-kicker span{display:inline-block; width:1.7rem; height:2px; margin:0 .55rem .2rem 0; background:var(--brand)}
.ops-deck{max-width:650px; margin:.9rem 0 0; color:var(--muted); font-size:1rem}
.ops-stamp{flex:none; min-width:260px; padding:1rem 0 0 1rem; border-left:3px double var(--line-2); display:grid; gap:.1rem}
.ops-stamp span,.ops-stamp small{color:var(--muted); font:.69rem/1.45 var(--mono)}
.ops-stamp strong{font:580 .82rem/1.4 var(--mono); color:var(--ink)}
.ops-filter-panel{margin-top:1.2rem; padding:1rem; border:1px solid var(--ops-rule); background:var(--surface); box-shadow:var(--sh-1)}
.ops-filter-head{display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:.8rem}
.ops-filter-head h2{font-size:1.55rem}
.ops-filter-head>a{font:650 .68rem/1.2 var(--mono)}
.ops-filter-form{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; align-items:end}
.ops-filter-form label{display:grid; min-width:0; gap:.25rem; color:var(--muted); font:600 .61rem/1.2 var(--mono); letter-spacing:.05em; text-transform:uppercase}
.ops-filter-form input,.ops-filter-form select{width:100%; min-width:0; min-height:36px; padding:.45rem .5rem; border:1px solid var(--line-2); border-radius:3px; background:var(--surface); color:var(--ink); font:400 .74rem/1.2 var(--sans); text-transform:none; letter-spacing:0}
.ops-filter-form .btn{justify-self:start}
.ops-scoreboard{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding-top:1.2rem; padding-bottom:1.2rem}
.ops-score{min-height:142px; padding:1rem 1.15rem; border:1px solid var(--ops-rule); border-right:0; background:color-mix(in srgb,var(--surface) 90%,transparent); display:flex; flex-direction:column; justify-content:space-between}
.ops-score:last-child{border-right:1px solid var(--ops-rule)}
.ops-score__index{color:var(--muted); font:650 .64rem/1.2 var(--mono); letter-spacing:.09em; text-transform:uppercase}
.ops-score strong{font:600 clamp(2rem,4vw,3.4rem)/.95 var(--ops-display); font-variant-numeric:tabular-nums}
.ops-score small{color:var(--muted); line-height:1.35}
.ops-score--review{border-top:3px solid var(--warn)}
.ops-score--money{border-top:3px solid var(--brand)}
.ops-score--risk{background:var(--bad-bg); border-top:3px solid var(--bad)}
.ops-score .ops-na{font-family:var(--mono); font-size:1.6rem; color:var(--faint)}
.ops-grid,.ops-report-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(245px,300px); align-items:start; gap:1.2rem; margin-top:1.2rem}
.ops-main{display:grid; gap:1.2rem; min-width:0}
.ops-panel,.ops-railcard{background:var(--surface); border:1px solid var(--ops-rule); box-shadow:var(--sh-1)}
.ops-panel__head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding:1.2rem 1.3rem; border-bottom:1px solid var(--ops-rule)}
.ops-count{color:var(--muted); font:.7rem/1.2 var(--mono); padding:.3rem .55rem; border:1px solid var(--line); border-radius:var(--r-pill)}
.ops-table-wrap{overflow-x:auto}
.ops-table{width:100%; border-collapse:collapse; font-size:.78rem}
.ops-table th{padding:.62rem .8rem; background:var(--surface-2); color:var(--muted); font:650 .61rem/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; text-align:left; border-bottom:1px solid var(--ops-rule)}
.ops-table td{padding:.8rem; vertical-align:top; border-bottom:1px solid var(--hair)}
.ops-table tbody tr:last-child td{border-bottom:0}
.ops-table tbody tr:hover{background:color-mix(in srgb,var(--brand-soft) 55%,transparent)}
.ops-table td strong{display:block; color:var(--ink); font-weight:650}
.ops-table td small{display:block; margin-top:.18rem; color:var(--muted); line-height:1.35}
.ops-table__action{text-align:right; white-space:nowrap}
.ops-arrow{font-weight:650; color:var(--brand-ink)}
.ops-arrow span{display:inline-block; transition:transform var(--t) var(--ease)}
.ops-arrow:hover span{transform:translateX(3px)}
.ops-mono{font-family:var(--mono); font-size:.7rem; font-variant-numeric:tabular-nums}
.ops-state,.ops-signal{display:inline-flex; align-items:center; width:max-content; padding:.22rem .48rem; border-radius:2px; font:650 .61rem/1.25 var(--mono); letter-spacing:.045em; text-transform:uppercase; background:var(--null-bg); color:var(--null)}
.ops-state--active,.ops-state--delivered,.ops-state--available,.ops-state--selected,.ops-signal--ok{background:var(--ok-bg); color:var(--ok)}
.ops-state--awaiting_review,.ops-state--past_due,.ops-state--queued,.ops-state--blocked_billing,.ops-signal--warn{background:var(--warn-bg); color:var(--warn)}
.ops-state--running,.ops-state--delivery_queued,.ops-state--sent{background:var(--low-bg); color:var(--low)}
.ops-state--failed,.ops-state--unpaid,.ops-state--canceled,.ops-state--invalid,.ops-state--rejected{background:var(--bad-bg); color:var(--bad)}
.ops-state--large{padding:.42rem .65rem; font-size:.68rem}
.ops-signal--null{background:var(--null-bg); color:var(--null)}
.ops-empty{padding:2rem !important; text-align:center; color:var(--muted)}
.ops-rail{display:grid; gap:1rem; position:sticky; top:78px}
.ops-railcard{padding:1rem}
.ops-railcard h3{font-family:var(--ops-display); font-size:1.22rem; font-weight:600; margin-bottom:.8rem}
.ops-pair{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.48rem 0; border-top:1px solid var(--hair); color:var(--muted); font-size:.78rem}
.ops-pair strong{color:var(--ink); font:650 .88rem/1 var(--mono)}
.ops-pair strong.ops-warn{color:var(--warn)}
.ops-unavailable,.ops-note{margin:.6rem 0 0; padding:.7rem; border-left:2px solid var(--line-2); background:var(--surface-2); color:var(--muted); font-size:.73rem; line-height:1.45}
.ops-worker,.ops-artifact{position:relative; margin:.6rem 0 0; padding:.6rem 0 .1rem 1rem; border-top:1px solid var(--hair); display:grid}
.ops-worker b,.ops-artifact b{font:600 .7rem/1.3 var(--mono); overflow-wrap:anywhere}
.ops-worker small,.ops-artifact small{color:var(--muted); font-size:.67rem}
.ops-pulse{position:absolute; left:0; top:.8rem; width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px var(--ok-bg)}
.ops-pulse--bad{background:var(--bad); box-shadow:0 0 0 3px var(--bad-bg)}
.ops-subscriptions{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(390px,100%),1fr)); gap:1px; background:var(--ops-rule)}
.ops-subscription{background:var(--surface); padding:1rem}
.ops-subscription>header{display:flex; align-items:start; justify-content:space-between; gap:1rem; margin-bottom:.85rem}
.ops-subscription>header p{margin:.2rem 0 0; color:var(--muted); font-size:.72rem}
.ops-facts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; border-top:1px solid var(--hair)}
.ops-facts div{padding:.55rem 0; border-bottom:1px solid var(--hair)}
.ops-facts dt{color:var(--muted); font:600 .61rem/1.2 var(--mono); text-transform:uppercase; letter-spacing:.06em}
.ops-facts dd{margin:.2rem 0 0; color:var(--ink); font-size:.75rem; overflow-wrap:anywhere}
.ops-subscription__forms{display:grid; gap:.6rem; margin-top:.85rem}
.ops-inline-form{display:grid; grid-template-columns:1.5fr 1.2fr .45fr; gap:.45rem; align-items:end}
.ops-mode-form{display:flex; align-items:end; gap:.45rem}
.ops-inline-form label,.ops-mode-form label,.ops-actions label{display:grid; gap:.22rem; color:var(--muted); font:600 .61rem/1.2 var(--mono); text-transform:uppercase; letter-spacing:.05em}
.ops-inline-form input,.ops-mode-form select,.ops-actions input,.ops-actions textarea{
  width:100%; min-height:34px; padding:.43rem .5rem; border:1px solid var(--line-2); border-radius:3px;
  background:var(--surface); color:var(--ink); font:400 .75rem/1.25 var(--sans); text-transform:none; letter-spacing:0
}
.ops-inline-form .btn{grid-column:1/-1; justify-self:start}
.ops-audit{margin-top:1.2rem}
.ops-audit-list,.ops-mini-audit{list-style:none; margin:0; padding:0}
.ops-audit-list li{display:grid; grid-template-columns:150px 70px minmax(180px,1fr) minmax(180px,1fr); gap:.7rem; align-items:center; padding:.65rem 1rem; border-bottom:1px solid var(--hair); font-size:.72rem}
.ops-audit-list li:last-child{border-bottom:0}
.ops-audit-list time,.ops-audit-list small{font-family:var(--mono); color:var(--muted); overflow-wrap:anywhere}
.ops-report-shell{padding-top:2rem}
.ops-back{display:inline-block; margin-bottom:1.5rem; color:var(--muted); font:600 .72rem/1.2 var(--mono)}
.ops-report-title{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; padding-bottom:1.5rem; border-bottom:1px solid var(--ops-rule)}
.ops-report-title h1{font-size:clamp(2.5rem,5vw,4.3rem)}
.ops-decision{border-top:3px solid var(--brand)}
.ops-facts--report{grid-template-columns:repeat(4,minmax(0,1fr)); padding:0 1.3rem}
.ops-callout{display:grid; gap:.1rem; margin:1rem 1.3rem; padding:.75rem; font-size:.75rem; border-left:3px solid var(--brand); background:var(--brand-soft)}
.ops-callout--warn{border-color:var(--warn); background:var(--warn-bg); color:var(--warn)}
.ops-quality-strip{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:1rem 1.3rem; border:1px solid var(--line)}
.ops-quality-strip span{padding:.65rem; color:var(--muted); font-size:.7rem; border-right:1px solid var(--line)}
.ops-quality-strip span:last-child{border-right:0}
.ops-quality-strip b{display:block; color:var(--ink); font:650 1rem/1 var(--mono)}
.ops-actions{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; padding:1.3rem; border-top:1px solid var(--ops-rule); background:var(--surface-2)}
.ops-actions form{display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; margin:0; padding:.8rem; border:1px solid var(--line); background:var(--surface)}
.ops-actions form label{width:100%}
.ops-actions form small{color:var(--muted); font-size:.68rem}
.btn--danger{background:var(--bad); color:#fff; border-color:var(--bad)}
.btn--danger:hover{background:color-mix(in srgb,var(--bad) 85%,#000); border-color:var(--bad)}
.ops-attempts{display:grid; gap:1px; background:var(--ops-rule)}
.ops-attempts article{padding:1rem; background:var(--surface)}
.ops-attempts article>header{display:flex; justify-content:space-between; gap:1rem}
.ops-attempts dl{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:.7rem 0 0}
.ops-attempts dt{color:var(--muted); font:.61rem var(--mono); text-transform:uppercase}
.ops-attempts dd{margin:.2rem 0 0; font-size:.72rem}
.ops-artifact-card{display:grid; gap:.3rem; padding:.75rem 0; border-top:1px solid var(--hair)}
.ops-artifact-card b{font-size:.75rem; overflow-wrap:anywhere}
.ops-artifact-card small{color:var(--muted); font-size:.67rem}
.ops-artifact-card code{display:block; overflow:hidden; text-overflow:ellipsis; color:var(--faint); font-size:.6rem}
.ops-mini-audit li{display:grid; gap:.08rem; padding:.55rem 0; border-top:1px solid var(--hair); font-size:.7rem}
.ops-mini-audit time,.ops-mini-audit small{color:var(--muted); font:400 .62rem/1.3 var(--mono)}
.ops-pagination{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem;color:var(--muted);font:600 .7rem/1 var(--mono)}
.navlink--ops{position:relative}
.navlink--ops::before{content:""; display:inline-block; width:5px; height:5px; margin:0 .35rem .1rem 0; border-radius:50%; background:var(--ok)}
@media (prefers-reduced-motion:no-preference){
  .ops-score,.ops-panel,.ops-railcard{animation:ops-enter .38s var(--ease) both}
  .ops-score:nth-child(2){animation-delay:.035s}.ops-score:nth-child(3){animation-delay:.07s}.ops-score:nth-child(4){animation-delay:.105s}
  @keyframes ops-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
}
@media (max-width:980px){
  .ops-scoreboard{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-score:nth-child(2){border-right:1px solid var(--ops-rule)}
  .ops-score:nth-child(n+3){border-top-width:1px}.ops-grid,.ops-report-layout{grid-template-columns:1fr}.ops-rail{position:static; grid-template-columns:repeat(2,minmax(0,1fr))}
  .ops-subscriptions{grid-template-columns:1fr}
  .ops-filter-form{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .navcompact{display:block;position:relative}
  .navcompact summary{display:block}
  .navcompact>div{position:absolute;z-index:30;right:0;top:calc(100% + .45rem);min-width:190px;padding:.45rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-2);display:grid}
  .navcompact a,.navcompact form{padding:.55rem .65rem}.navcompact a{color:var(--ink-2)}
  .top .wrap{min-width:0}.brand{min-width:0;font-size:.98rem}.nav{min-width:0;gap:.35rem}
  .ops-shell{padding-top:2rem;background:var(--bg)}.ops-mast,.ops-report-title{align-items:flex-start; flex-direction:column}.ops-stamp{width:100%;min-width:0}
  .ops-filter-form{grid-template-columns:1fr}.ops-filter-panel{padding:.85rem}
  .ops-scoreboard{grid-template-columns:1fr}.ops-score{min-height:120px;border-right:1px solid var(--ops-rule);border-top-width:1px}.ops-score:first-child{border-top:3px solid var(--brand)}
  .ops-table thead{display:none}.ops-table,.ops-table tbody,.ops-table tr,.ops-table td{display:block;width:100%}.ops-table tr{padding:.55rem .8rem;border-bottom:1px solid var(--ops-rule)}
  .ops-table td{display:grid;grid-template-columns:95px minmax(0,1fr);gap:.7rem;padding:.35rem 0;border:0}.ops-table td::before{content:attr(data-label);color:var(--muted);font:650 .6rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em}
  .ops-table__action{text-align:left}.ops-table__action::before{content:"" !important}.ops-rail{grid-template-columns:1fr}.ops-inline-form{grid-template-columns:1fr}.ops-inline-form .btn{grid-column:auto}
  .ops-audit-list li{grid-template-columns:1fr;gap:.2rem}.ops-facts--report{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-actions{grid-template-columns:1fr}.ops-attempts dl{grid-template-columns:1fr;gap:.6rem}
}
/* ------------------------------------------------------------------- chat */
/* The report conversation.  Built from the EXISTING tokens only -- no new custom property is
   introduced here, deliberately: the dark palette is duplicated across a media query and a
   [data-theme] block that must stay byte-identical, so a token added for this page would have to
   be added twice and would rot the first time only one was touched.  Everything below resolves
   through --surface/--ink/--line/--brand, which are already defined in both. */
.wrap--chat{max-width:860px}

.chat__head{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; padding:1.5rem 0 1rem}
.chat__ident h1{margin:.15rem 0 0; font-family:var(--display); font-size:1.5rem;
  letter-spacing:-.02em}
.chat__headacts{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.chat__meter{font-size:.78rem; color:var(--muted); white-space:nowrap}

.chat{display:flex; flex-direction:column; gap:.75rem}
.chat__thread{display:flex; flex-direction:column; gap:1.15rem; padding:.25rem 0 .5rem}
.chat__turn{display:flex; flex-direction:column; gap:.6rem}
.chat__msg{display:flex; flex-direction:column; gap:.4rem; max-width:82%}
.chat__msg--you{align-self:flex-end; align-items:flex-end}
.chat__msg--bot{align-self:flex-start; align-items:flex-start}

.chat__bubble{padding:.7rem .9rem; border-radius:var(--r-lg); font-size:.925rem; line-height:1.55;
  white-space:pre-wrap; overflow-wrap:anywhere}
/* The reader's own words carry BRAND because they are identity, not a data state. */
.chat__msg--you .chat__bubble{background:var(--brand); color:var(--on-brand);
  border-bottom-right-radius:var(--r-sm)}
.chat__msg--bot .chat__bubble{background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-bottom-left-radius:var(--r-sm); box-shadow:var(--sh-1)}
.chat__flag{display:block; margin-top:.4rem; font-size:.75rem; color:var(--warn)}

.chat__system{align-self:center; font-size:.83rem; color:var(--muted); background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:.35rem .8rem}

.chat__empty{padding:1.5rem 0 .5rem}
.chat__emptylede{margin:0 0 .75rem; color:var(--muted); font-size:.92rem}
.chat__suggests{display:flex; flex-wrap:wrap; gap:.45rem}
.chat__chip{background:var(--surface); border:1px solid var(--line-2); color:var(--ink-2);
  border-radius:var(--r-pill); padding:.4rem .75rem; font:inherit; font-size:.82rem;
  cursor:pointer; transition:border-color var(--t) var(--ease), background var(--t) var(--ease)}
.chat__chip:hover{border-color:var(--brand); background:var(--brand-soft)}

/* A pending offer.  Never coloured with a signal token: this is an action the reader may take,
   not a fact about a shelf. */
.chat__card{margin-top:.15rem; background:var(--surface-2); border:1px solid var(--line-2);
  border-radius:var(--r); padding:.7rem .85rem; max-width:100%}
.chat__cardhead{font-size:.8rem; font-weight:650; letter-spacing:-.008em; color:var(--ink-2)}
.chat__cardnote{margin:.35rem 0 0; font-size:.83rem; color:var(--muted); line-height:1.5}
.chat__cardacts{display:flex; gap:.45rem; margin-top:.6rem; flex-wrap:wrap}
.chat__card--inert{background:transparent; border-style:dashed}
.chat__card--done{background:var(--surface-2); border-color:var(--line)}

.chat__pending .chat__bubble--typing{display:flex; gap:.28rem; align-items:center; padding:.8rem .9rem}
.chat__dot{width:6px; height:6px; border-radius:50%; background:var(--faint);
  animation:chatdot 1.2s infinite ease-in-out}
.chat__dot:nth-child(2){animation-delay:.16s}
.chat__dot:nth-child(3){animation-delay:.32s}
@keyframes chatdot{0%,80%,100%{opacity:.28; transform:translateY(0)}
  40%{opacity:1; transform:translateY(-3px)}}

.chat__notice{font-size:.85rem; color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r); padding:.55rem .8rem}
.chat__notice--bad{color:var(--bad); background:var(--bad-bg); border-color:var(--bad-line)}

.chat__composer{position:sticky; bottom:0; display:flex; gap:.5rem; align-items:flex-end;
  padding:.6rem 0 .35rem; background:linear-gradient(to bottom,transparent,var(--bg) 22%)}
.chat__input{flex:1; resize:none; min-height:44px; max-height:160px; padding:.65rem .8rem;
  font:inherit; font-size:.925rem; line-height:1.5; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r);
  box-shadow:var(--sh-1)}
.chat__input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-glow)}
.chat__send{min-height:44px; white-space:nowrap}
.chat__send[disabled]{opacity:.55; cursor:not-allowed}
.chat__hint{margin:0 0 1.25rem; font-size:.78rem; color:var(--faint); line-height:1.5}

.chat__rebuild{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1rem 1.15rem; margin-bottom:2rem; box-shadow:var(--sh-1)}
.chat__rebuild .lead{margin:.3rem 0 0; font-size:.85rem; color:var(--muted); max-width:56ch}

@media (max-width:620px){
  .chat__msg{max-width:92%}
  .chat__head{padding-top:1rem}
  .chat__rebuild{flex-direction:column; align-items:stretch}
}

.chat__standing ul{list-style:none; margin:.5rem 0 0; padding:0; display:flex;
  flex-direction:column; gap:.4rem}
.chat__standinglist li{display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  font-size:.87rem; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:.45rem .6rem}

.chat__reset{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1rem 1.15rem; margin-bottom:1.25rem}
.chat__resetrow{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.6rem; align-items:center}

@media (max-width:360px){
  :root{--gut:.625rem}
  .top .wrap{gap:.35rem}.brand{gap:.3rem;font-size:.82rem}.brandmark{width:43px;height:18px}
  .nav{gap:.2rem}.navlink--ops{font-size:.72rem}.navcompact summary{padding:.3rem}
  .themebtn{width:24px;height:24px;min-width:24px;min-height:24px}
}


/* ------------------------------------------------- legal prose (/privacy, /terms) */
/* Long-form reading, which nothing else in this app is. Measure is capped near 68ch
   because a legal page people actually read is worth more than one that fills the
   viewport. Tokens only -- no new colours -- so both themes come for free. */
.legal{max-width:44rem; padding:3rem 0 4.5rem}
.legal__eyebrow{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin:0 0 .5rem}
.legal h1{font-size:2.1rem; line-height:1.15; margin:0 0 .4rem; color:var(--ink)}
.legal__date{color:var(--muted); font-size:.88rem; margin:0 0 1.8rem}
.legal__lead{font-size:1.06rem; line-height:1.65; color:var(--ink-2);
  padding-bottom:1.2rem; border-bottom:1px solid var(--line); margin:0 0 .6rem}
.legal h2{font-size:1.12rem; line-height:1.3; margin:2rem 0 .6rem; color:var(--ink)}
.legal p, .legal li{font-size:.97rem; line-height:1.68; color:var(--ink-2)}
.legal p{margin:0 0 .9rem}
.legal ul{margin:0 0 1rem; padding-left:1.15rem}
.legal li{margin:0 0 .55rem}
.legal strong{color:var(--ink); font-weight:600}
.legal a{color:var(--brand-2)}
.legal__table{width:100%; border-collapse:collapse; margin:.4rem 0 .8rem; font-size:.93rem}
.legal__table th{text-align:left; font-weight:600; color:var(--ink); padding:.5rem .75rem .5rem 0;
  border-bottom:1px solid var(--line-2)}
.legal__table td{padding:.5rem .75rem .5rem 0; border-bottom:1px solid var(--hair);
  color:var(--ink-2); vertical-align:top}
.legal__table td:first-child{color:var(--ink); font-weight:500; white-space:nowrap}
.legal__note{font-size:.88rem; color:var(--muted)}
.legal__foot{margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid var(--line);
  font-size:.92rem}
@media (max-width:640px){
  .legal{padding:2rem 0 3rem}
  .legal h1{font-size:1.7rem}
  .legal__table{display:block; overflow-x:auto}
}
.footer__legal{display:inline-flex; gap:1rem}
.footer__legal a{color:inherit; text-decoration:none; opacity:.85}
.footer__legal a:hover{text-decoration:underline; opacity:1}

/* ---- landing pricing table (lp-) ---- */
.lp-pricewrap{overflow-x:auto; margin-top:1.1rem}
.lp-price{border-collapse:collapse; width:100%; min-width:32rem;
  font-variant-numeric:tabular-nums}
.lp-price th,.lp-price td{text-align:left; padding:.72rem .9rem;
  border-bottom:1px solid var(--line)}
.lp-price thead th{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:600; border-bottom:2px solid var(--ink)}
.lp-price td{font-size:1rem; color:var(--ink-2)}
.lp-price td:first-child{color:var(--ink); font-weight:500}
.lp-price td.p{color:var(--ink); font-weight:600}
.lp-price tbody tr:last-child td{border-bottom:none}
@media (max-width:640px){ .lp-price th,.lp-price td{padding:.6rem .7rem} }

/* ── offer modal (lp-offer) ─────────────────────────────────────────────────
   Namespaced like the rest of the landing page. Colours come from the tokens
   at the top of this file, so the card follows the light/dark switch without a
   second palette here. */
.lp-offer[hidden]{display:none}
.lp-offer{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:1.25rem}
.lp-offer__scrim{position:absolute;inset:0;background:rgba(18,21,28,.55);
  backdrop-filter:saturate(1.2) blur(3px)}
.lp-offer__card{position:relative;width:min(30rem,100%);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  padding:clamp(1.5rem,4vw,2.25rem);text-align:center;
  animation:lp-offer-in .22s var(--ease) both}
@keyframes lp-offer-in{from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lp-offer__card{animation:none}}
.lp-offer__x{position:absolute;top:.5rem;right:.5rem;width:2.25rem;height:2.25rem;
  display:grid;place-items:center;font-size:1.5rem;line-height:1;color:var(--muted);
  background:none;border:0;border-radius:var(--r-sm);cursor:pointer}
.lp-offer__x:hover{background:var(--surface-2);color:var(--ink)}
.lp-offer__eyebrow{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand)}
.lp-offer__h{margin:.4rem 0 .5rem;font-family:var(--display);font-size:clamp(1.4rem,4vw,1.85rem);
  line-height:1.15;color:var(--ink)}
.lp-offer__p{margin:0 0 1.1rem;color:var(--ink-2);font-size:.95rem;line-height:1.5}
.lp-offer__form{display:flex;flex-direction:column;gap:.6rem}
.lp-offer__input{width:100%;padding:.75rem .9rem;font:inherit;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r)}
.lp-offer__input:focus{outline:2px solid var(--brand);outline-offset:1px;
  background:var(--surface)}
.lp-offer__err{margin:.75rem 0 0;color:var(--bad);background:var(--bad-bg);
  border:1px solid var(--bad-line);border-radius:var(--r-sm);padding:.5rem .7rem;font-size:.875rem}
.lp-offer__err[hidden],.lp-offer__done[hidden]{display:none}
.lp-offer__code{margin:.5rem 0 .75rem;font-family:var(--mono);font-size:1.5rem;font-weight:700;
  letter-spacing:.14em;color:var(--brand-ink);background:var(--brand-soft);
  border:1px dashed var(--brand-glow);border-radius:var(--r);padding:.7rem .5rem;
  user-select:all}
.lp-offer__fine{margin:.9rem 0 0;color:var(--muted);font-size:.78rem;line-height:1.45}

/* ── signup clarity + form ergonomics ───────────────────────────────────────
   Added 2026-08-23 after measuring that ~33 signup views produced ~5 submits. */

/* iOS Safari ZOOMS the page when a focused input is under 16px, and does not zoom back out. The
   base .input is .93rem = 14.88px, so the first tap on any auth field shoved the layout sideways
   and left it there -- a punishment for engaging, landing on whoever is on a phone. Applied by
   VIEWPORT rather than by pointer type: a small window on a desktop keeps working normally, and
   iPadOS reports a fine pointer while behaving like Safari on this. */
@media (max-width: 768px) {
  .input { font-size: 16px; }
}

/* The reassurance line under the sub-heading: same voice as .sub, set apart from it. */
.sub--reassure {
  margin-top: -.35rem; padding: .7rem .85rem;
  background: var(--surface-2); border: 1px solid var(--hair);
  border-radius: var(--r-sm); color: var(--ink-2); font-size: .875rem; line-height: 1.5;
}

/* "(optional)" was an inline style attribute on the label. */
.field__opt { color: var(--faint); font-weight: 400; }

.fineprint { margin: 1rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }

/* A REJECTION MUST NOT LOOK LIKE A CONFIRMATION. Every flash rendered in one style, so
   "An account with that email already exists" was painted exactly like "Verification email
   sent." -- the same colour, the same brand-tinted left rule. */
.flash--error {
  background: var(--bad-bg); border-color: var(--bad-line);
  border-left-color: var(--bad); color: var(--ink);
}
.flash--error a { color: var(--bad); font-weight: 600; }

/* Password reveal. The control sits INSIDE the field box so the input keeps its full width and
   the button cannot be mistaken for the submit button underneath it. */
.field__wrap { position: relative; }
.field__wrap .input { padding-right: 4.2rem; }
.field__reveal {
  position: absolute; top: 50%; right: .4rem; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: .35rem .5rem;
  font: 600 .78rem/1 var(--sans); color: var(--muted); border-radius: var(--r-sm);
}
.field__reveal:hover { color: var(--ink); background: var(--surface-2); }
.field__reveal:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }