/* ============================================================================
   Obscura Portal — design system (admin console redesign, Direction A).
   Architecture:
     1. @font-face          5. Primitives (btn, input, badge, dot…)
     2. Tokens              6. Composites (card, table, record page, rail…)
     3. Reset + base        7. Domain (maturity, severity, lifecycle)
     4. App shell           8. Utilities  9. Responsive  10. Print / motion
   Brand tokens (single brand; once per-tenant overridable, kept as the seam):
     --accent --accent-2 --paper --panel --ink --ink-2 --grad
     --font-heading --font-body
   Everything else derives from those nine or is deliberately fixed (semantic
   state colours, the --doc-* print family). No hex that should follow the
   brand appears outside section 2.
   ========================================================================== */

/* ---- 1 · Self-hosted fonts (CSP: same-origin only) ---------------------- */
@font-face { font-family:"Space Grotesk"; font-weight:300 700; font-display:swap; src:url("/static/fonts/space-grotesk-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family:"Public Sans"; font-weight:100 900; font-display:swap; src:url("/static/fonts/public-sans-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:100 900; font-display:swap; src:url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family:"Source Serif 4"; font-weight:200 900; font-display:swap; src:url("/static/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:100 800; font-display:swap; src:url("/static/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); }

/* ---- 2 · Tokens ---------------------------------------------------------- */
:root {
  /* 2a · tenant-overridable (defaults = current Obscura brand, verified live) */
  --paper:#0E0D13;
  --panel:#14131B;
  --ink:#EEEDF4;
  --ink-2:#A8A7BA;
  --accent:#8D74FF;
  --accent-2:#5FD9F5;
  --grad:linear-gradient(135deg,#AC97FF 0%,#8D74FF 100%);
  /* --font-heading / --font-body come from theme.css; defaults below */

  /* 2b · primitive scales */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-8:48px;
  --r-sm:6px; --r:8px; --r-lg:10px; --r-pill:999px;
  --t-micro:11px; --t-small:12.5px; --t-md:15px; --t-lg:19px;   /* --ui is the 5th (density) */
  /* motion: UI state changes 100-180ms, charts draw once in 600ms. One ease-out curve, no ease-in,
     nothing loops. Reduced motion collapses all of it to the final state (section 10). */
  --dur-fast:100ms; --dur:150ms; --dur-pop:180ms; --dur-chart:600ms;
  --ease:cubic-bezier(.23,1,.32,1);
  --z-sticky:5; --z-drawer:50; --z-overlay:80;

  /* 2c · semantic — DERIVED from the tenant nine so any palette works.
     Mixing panel toward ink guarantees separation whatever the polarity. */
  --surface:color-mix(in srgb, var(--panel) 91%, var(--ink) 9%);
  --surface-2:color-mix(in srgb, var(--panel) 84%, var(--ink) 16%);
  --line:color-mix(in srgb, var(--panel) 87%, var(--ink) 13%);
  --line-2:color-mix(in srgb, var(--panel) 77%, var(--ink) 23%);
  --ink-3:color-mix(in srgb, var(--ink-2) 74%, var(--panel) 26%);
  --accent-soft:color-mix(in srgb, var(--accent) 13%, var(--panel) 87%);
  --accent-line:color-mix(in srgb, var(--accent) 42%, var(--panel) 58%);
  --on-accent:var(--paper);          /* accent must read against paper, so paper reads on accent */
  --hover-wash:color-mix(in srgb, var(--ink) 3%, transparent);
  --focus-ring:var(--accent);
  --shadow-pop:0 12px 32px rgba(0,0,0,.45);   /* floating layers only */
  /* state colours as TEXT mix toward the tenant ink so they pass 4.5:1 on any
     panel polarity (raw --ok on a white tenant panel is 1.8:1). Percentages
     verified against both the default dark theme and a white-panel tenant. */
  --ok-text:color-mix(in srgb, var(--ok) 52%, var(--ink) 48%);
  --warn-text:color-mix(in srgb, var(--warn) 58%, var(--ink) 42%);
  --crit-text:color-mix(in srgb, var(--crit) 65%, var(--ink) 35%);
  --info-text:color-mix(in srgb, var(--accent-2) 52%, var(--ink) 48%);

  /* 2d · semantic state — NOT tenant-themed; must stay legible everywhere */
  --ok:#57D9A3; --warn:#F5A34B; --crit:#F87171;
  --sev-crit:#F87171; --sev-high:#F5A34B; --sev-med:#FFD966; --sev-low:#5CB85C; --sev-info:#8A94A8;
  --ml0:#6E7596; --ml1:#F5A34B; --ml2:#5FD9F5; --ml3:#57D9A3;
  /* print/document family — separate render target, unchanged */
  --doc-paper:#FBFCFE; --doc-surface:#F1F3F9; --doc-ink:#1B2233; --doc-ink-2:#6B7185; --doc-line:#E4E7F0;

  /* 2e · component knobs (density-mapped) */
  --sans:"Public Sans","Inter","Segoe UI",system-ui,sans-serif;
  --heading:"Space Grotesk","Public Sans",system-ui,sans-serif;
  --serif:"Source Serif 4","Iowan Old Style",Georgia,serif;
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  --side-w:232px; --side-rail:64px; --rail-w:296px;
  --card-pad:var(--s-5); --row-pad:10px; --ui:13.5px; --ctl-h:36px;
  color-scheme:dark;
}
.density-compact { --card-pad:var(--s-4); --row-pad:8px; --ui:13px; --ctl-h:32px; }

/* Derived tokens recompute inside any .theme-scope subtree, so palettes can be
   previewed side by side (styleguide; a future branding live-preview). Real
   tenant themes override :root itself and recompute there — this mirrors 2c. */
.theme-scope {
  --surface:color-mix(in srgb, var(--panel) 91%, var(--ink) 9%);
  --surface-2:color-mix(in srgb, var(--panel) 84%, var(--ink) 16%);
  --line:color-mix(in srgb, var(--panel) 87%, var(--ink) 13%);
  --line-2:color-mix(in srgb, var(--panel) 77%, var(--ink) 23%);
  --ink-3:color-mix(in srgb, var(--ink-2) 74%, var(--panel) 26%);
  --accent-soft:color-mix(in srgb, var(--accent) 13%, var(--panel) 87%);
  --accent-line:color-mix(in srgb, var(--accent) 42%, var(--panel) 58%);
  --on-accent:var(--paper);
  --hover-wash:color-mix(in srgb, var(--ink) 3%, transparent);
  --focus-ring:var(--accent);
  --ok-text:color-mix(in srgb, var(--ok) 52%, var(--ink) 48%);
  --warn-text:color-mix(in srgb, var(--warn) 58%, var(--ink) 42%);
  --crit-text:color-mix(in srgb, var(--crit) 65%, var(--ink) 35%);
  --info-text:color-mix(in srgb, var(--accent-2) 52%, var(--ink) 48%);
  background:var(--paper); color:var(--ink);
}

/* ---- 3 · Reset + base ---------------------------------------------------- */
* { box-sizing:border-box; }
html { background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; }
body { margin:0; min-height:100vh; font-family:var(--font-body, var(--sans));
  font-size:14px; line-height:1.55; color:var(--ink); background:var(--paper); }
h1,h2,h3,h4 { font-family:var(--font-heading, var(--heading)); letter-spacing:-.01em;
  line-height:1.2; margin:0 0 .5em; font-weight:600; color:var(--ink); }
h1 { font-size:var(--t-lg); } h2 { font-size:var(--t-md); } h3 { font-size:var(--ui); }
p { color:var(--ink-2); margin:0 0 1rem; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:color-mix(in srgb, var(--accent) 78%, var(--ink) 22%); }
code, kbd { font-family:var(--mono); font-size:.9em; }
::selection { background:color-mix(in srgb, var(--accent) 32%, transparent); }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.skip-link { position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent);
  color:var(--on-accent); padding:8px 14px; border-radius:0 0 var(--r) 0; font-weight:600; }
.skip-link:focus { left:0; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; }

/* ---- 4 · App shell ------------------------------------------------------- */
.app { display:flex; min-height:100vh; }
.sidebar { width:var(--side-w); flex:0 0 var(--side-w); background:var(--panel);
  border-right:1px solid var(--line); display:flex; flex-direction:column;
  padding:16px 12px; position:sticky; top:0; height:100vh; overflow-y:auto; }
.app.collapsed .sidebar { width:var(--side-rail); flex-basis:var(--side-rail); }
.app.collapsed .sidebar .label, .app.collapsed .brand-word, .app.collapsed .nav-label,
.app.collapsed .side-foot .who-block { display:none; }
.app.collapsed .nav a, .app.collapsed .nav .nav-item { justify-content:center; }
.app.collapsed .context-badge { display:none; }

.brand { display:flex; align-items:center; gap:10px; padding:4px 8px 14px; }
.brand-mk { width:28px; height:28px; flex:0 0 28px; border-radius:7px; background-image:var(--grad);
  display:flex; align-items:center; justify-content:center; }
.brand-logo { width:auto; max-height:28px; max-width:150px; border-radius:6px; object-fit:contain; }

/* context badge — platform console vs client portal must be unmistakable */
.context-badge { font:600 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  padding:6px 9px; border-radius:5px; margin:0 6px 10px; display:block; text-align:left;
  border:1px solid var(--line-2); color:var(--ink-2); }
.ctx-admin { color:var(--info-text); border-color:color-mix(in srgb, var(--accent-2) 38%, var(--panel) 62%);
  border-left-width:2px; }
.ctx-client { color:var(--ink-3); }
.app.admin-mode .sidebar { border-right-color:color-mix(in srgb, var(--accent-2) 26%, var(--line) 74%); }

.nav-label { font:600 10px/1 var(--mono); letter-spacing:.16em; color:var(--ink-3);
  text-transform:uppercase; padding:14px 10px 6px; }
.nav a, .nav .nav-item { display:flex; align-items:center; gap:10px; padding:7px 10px;
  border-radius:var(--r-sm); color:var(--ink-2); text-decoration:none; font-size:var(--ui);
  position:relative; margin:1px 0; }
.nav a svg, .nav .nav-item svg { width:16px; height:16px; flex:0 0 16px; stroke:currentColor;
  fill:none; stroke-width:1.6; }
.nav a, .nav .nav-item, .collapse-btn, .nav-toggle { transition:color var(--dur) var(--ease), background var(--dur) var(--ease); }
.nav a:hover, .nav .nav-item:hover { color:var(--ink); background:var(--hover-wash); }
.nav a.on, .nav .nav-item.on { color:var(--ink); background:var(--surface); }
.nav a.on::before, .nav .nav-item.on::before { content:""; position:absolute; left:-12px; top:8px;
  bottom:8px; width:2px; background:var(--accent); border-radius:1px; }
.app.admin-mode .nav a.on::before, .app.admin-mode .nav .nav-item.on::before { background:var(--accent-2); }
.nav .nav-item.sub { padding-left:26px; }              /* a network under its section */
.app.collapsed .nav .nav-item.sub { padding-left:10px; }
.nav button.nav-item { width:100%; background:none; border:0; font-family:inherit; text-align:left;
  cursor:pointer; }                                    /* Sign out: a button that sits in the list */

.side-foot { margin-top:auto; padding-top:12px; border-top:1px solid var(--line); display:flex;
  align-items:center; gap:9px; font-size:12px; color:var(--ink-2); overflow-wrap:anywhere; }
.av { width:28px; height:28px; flex:0 0 28px; border-radius:50%; background:var(--surface);
  border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--ink-2); }
.side-foot form { margin:0; }
.who { color:var(--ink-3); font-size:12px; }
.collapse-btn { background:none; border:0; color:var(--ink-3); cursor:pointer; font-size:15px;
  padding:6px; border-radius:var(--r-sm); margin-top:8px; }
.collapse-btn:hover { color:var(--ink); background:var(--hover-wash); }

.main { flex:1; min-width:0; padding:0 0 64px; }
.container-wide { max-width:1160px; padding:24px 32px 0; }

/* topbar (security status bar) */
.topbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:48px;
  padding:8px 32px; border-bottom:1px solid var(--line); }
.secchip { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:500;
  color:var(--ink-2); border:1px solid var(--line); padding:4px 10px; border-radius:var(--r-pill);
  line-height:1.3; }
.secchip svg { width:13px; height:13px; flex:0 0 13px; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.secchip-mut { color:var(--ink-3); }
.secchip-residency { color:var(--accent-2); border-color:color-mix(in srgb, var(--accent-2) 30%, var(--line) 70%); }
.secchip-session.is-soon { color:var(--warn-text); border-color:color-mix(in srgb, var(--warn) 35%, var(--line) 65%); }
.topbar-spacer { flex:1; }

/* footer */
.app-foot { display:flex; gap:14px; align-items:center; padding:18px 32px 0; margin-top:32px;
  border-top:1px solid var(--line); font-size:12px; color:var(--ink-3); }
.foot-powered a { color:var(--ink-2); }

/* public (logged-out) shell */
.public { min-height:100vh; display:flex; flex-direction:column; }
.public-bar { display:flex; align-items:center; height:60px; padding:0 28px; border-bottom:1px solid var(--line); }
.public-bar .brand { text-decoration:none; padding-bottom:4px; }
.public-main { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; }
.public-main > .container-wide { width:100%; }
.hero { max-width:560px; }

/* ---- 5 · Primitives ------------------------------------------------------ */
/* buttons — one primary per screen; everything else ghost/danger/link */
.btn, .btn-ghost, .btn-danger { display:inline-flex; align-items:center; justify-content:center;
  gap:7px; min-height:var(--ctl-h); padding:6px 14px; border-radius:var(--r-sm); cursor:pointer;
  font:600 var(--ui) var(--font-body, var(--sans)); text-decoration:none; border:1px solid transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease); }
.btn { background:var(--accent); color:var(--on-accent);
  border-color:color-mix(in srgb, var(--accent) 72%, var(--ink) 28%); }
.btn:hover { background:color-mix(in srgb, var(--accent) 82%, var(--ink) 18%); color:var(--on-accent); }
.btn-ghost { background:transparent; color:var(--ink-2); border-color:var(--line-2); }
.btn-ghost:hover { color:var(--ink); border-color:var(--ink-3); background:var(--hover-wash); }
.btn-ghost.on { color:var(--accent); border-color:var(--accent-line); }
.btn-danger { background:transparent; color:var(--crit-text); border-color:color-mix(in srgb, var(--crit) 38%, var(--panel) 62%); }
.btn-danger:hover { background:color-mix(in srgb, var(--crit) 10%, transparent); color:var(--crit-text); }
.btn-sm { min-height:calc(var(--ctl-h) - 6px); padding:4px 11px; font-size:var(--t-small); }
.btn-lg { min-height:44px; padding:10px 22px; font-size:14.5px; }
.btn[disabled], .btn-ghost[disabled] { opacity:.5; cursor:not-allowed; }

/* inputs */
.inp { background:var(--paper); color:var(--ink); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:7px 11px; font:var(--ui) var(--font-body, var(--sans));
  width:100%; min-height:var(--ctl-h); }
.inp { transition:border-color var(--dur) var(--ease); }
.inp:focus { outline:none; border-color:var(--accent); }
.inp:focus-visible { outline:2px solid var(--focus-ring); outline-offset:1px; }
.inp::placeholder { color:var(--ink-3); }
select.inp { width:auto; }
textarea.inp { min-height:0; line-height:1.5; }
label { display:flex; flex-direction:column; gap:6px; color:var(--ink-2); font-size:var(--t-small); }
.lbl { color:var(--ink-2); font-size:var(--t-small); }

/* badges / chips / dots */
.chip, .pill, .badge { display:inline-flex; align-items:center; gap:5px;
  font:600 10.5px var(--mono); letter-spacing:.05em; text-transform:uppercase;
  padding:2px 9px; border-radius:var(--r-pill); border:1px solid var(--line-2); color:var(--ink-2);
  background:transparent; }
.badge-neutral { color:var(--ink-3); }
.badge-ok { color:var(--ok-text); border-color:color-mix(in srgb, var(--ok) 36%, var(--panel) 64%); }
.badge-warn { color:var(--warn-text); border-color:color-mix(in srgb, var(--warn) 36%, var(--panel) 64%); }
.badge-crit { color:var(--crit-text); border-color:color-mix(in srgb, var(--crit) 36%, var(--panel) 64%); }
.badge-info { color:var(--info-text); border-color:color-mix(in srgb, var(--accent-2) 36%, var(--panel) 64%); }
.badge-active { color:var(--ok-text); border-color:color-mix(in srgb, var(--ok) 36%, var(--panel) 64%); }
.badge-disabled { color:var(--ink-3); }
.chip-soft { color:var(--accent); border-color:var(--accent-line); }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ink-3); flex:0 0 7px; }
.dot-ok { background:var(--ok); } .dot-warn { background:var(--warn); } .dot-crit { background:var(--crit); }
.dot-accent { background:var(--accent); }
.st { display:inline-flex; align-items:center; gap:6px; font-size:var(--t-small); color:var(--ink-2); }
.key { font:500 11px var(--mono); color:var(--ink-2); background:var(--surface);
  border:1px solid var(--line); border-radius:4px; padding:1px 6px; overflow-wrap:anywhere; }
kbd.key { padding:1px 5px; }

/* consent checkbox (styled proxy) */
.consent { display:flex; align-items:flex-start; gap:10px; margin:14px 0; font-size:13px;
  color:var(--ink-2); cursor:pointer; flex-direction:row; }
.consent input { margin-top:3px; }
.consent input:has(+ .consent-box) { position:absolute; opacity:0; width:0; height:0; margin:0; }
.consent-box { width:18px; height:18px; flex:0 0 18px; border:1.5px solid var(--line-2);
  border-radius:5px; background:var(--surface); display:inline-block; position:relative;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.consent input:checked + .consent-box { background:var(--accent); border-color:transparent; }
.consent input:checked + .consent-box::after { content:""; position:absolute; left:5px; top:1px;
  width:5px; height:10px; border:solid var(--on-accent); border-width:0 2px 2px 0; transform:rotate(45deg); }
.consent input:focus-visible + .consent-box { outline:2px solid var(--focus-ring); outline-offset:2px; }
.consent-label { flex:1; }
.check { display:flex; align-items:center; gap:8px; flex-direction:row; font-size:var(--t-small); color:var(--ink-2); }

/* skeleton loader */
.skeleton { position:relative; overflow:hidden; background:var(--surface); border-radius:var(--r-sm);
  min-height:14px; color:transparent !important; }

/* ---- 6 · Composites ------------------------------------------------------ */
/* card */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--card-pad); margin:0 0 var(--s-4); }
.card h2 { margin-top:0; }
.card-title { font-family:var(--font-heading, var(--heading)); }
.card-eyebrow { font:600 var(--t-micro)/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 var(--s-2); }
.form-card { max-width:560px; }
.card-wide { max-width:760px; }

/* page head */
.crumb, .eyebrow { font:600 var(--t-micro) var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); }
.page-head { margin-bottom:20px; }
.page-head h1 { margin:6px 0 2px; }
.subtitle { color:var(--ink-3); font-size:var(--t-small); margin:0 0 18px; max-width:70ch; }

/* breadcrumbs */
.crumbs { font-size:var(--ui); color:var(--ink-3); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.crumbs a { color:var(--ink-3); } .crumbs a:hover { color:var(--ink); }
.crumbs .sep { color:var(--line-2); }
.crumbs .here { color:var(--ink); }

/* record page (Direction A) */
.record-head { padding:20px 32px 0; }
/* inside .container-wide the container already provides the gutters */
.container-wide .record-head, .container-wide .section-nav, .container-wide .record-body {
  padding-left:0; padding-right:0; }
.container-wide .record-head { padding-top:0; }
.record-title { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.record-title h1 { margin:0; }
.record-meta { margin-top:6px; font-size:var(--t-small); color:var(--ink-3); display:flex; gap:8px;
  align-items:center; flex-wrap:wrap; }
.record-actions { margin-left:auto; display:flex; gap:8px; align-self:flex-start; flex-wrap:wrap; }
.section-nav { display:flex; gap:2px; padding:12px 32px 0; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--paper); z-index:var(--z-sticky); overflow-x:auto; }
.section-nav a { font:500 var(--ui) var(--font-body, var(--sans)); color:var(--ink-2);
  padding:8px 12px 10px; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
.section-nav a:hover { color:var(--ink); }
.section-nav a.on { color:var(--ink); border-bottom-color:var(--accent); }
.record-body { display:grid; grid-template-columns:minmax(0,1fr) var(--rail-w); gap:0 32px;
  padding:24px 32px 0; max-width:1280px; }
.record-main { min-width:0; }
.sect { margin:0 0 36px; }
.sect > h2 { padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:0; }
.subsect { margin-top:20px; }
.subsect h3 { margin-bottom:8px; }
.hint { font-size:var(--t-small); color:var(--ink-3); margin:8px 0 0; max-width:64ch; }

/* metadata rail */
.rail { position:sticky; top:56px; align-self:start; display:flex; flex-direction:column; gap:16px; }
.rail-box { border:1px solid var(--line); border-radius:var(--r); background:var(--panel); padding:14px 16px; }
.rail-box h3 { font:600 var(--t-micro)/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 10px; }
.rail-links { display:flex; flex-direction:column; gap:2px; }
.rail-links a { font-size:var(--ui); color:var(--ink-2); padding:6px 8px; border-radius:var(--r-sm);
  display:flex; justify-content:space-between; }
.rail-links a:hover { color:var(--ink); background:var(--surface); }
.rail-links a span { color:var(--ink-3); }
.danger { border-color:color-mix(in srgb, var(--crit) 28%, var(--line) 72%); }
.danger p { font-size:var(--t-small); color:var(--ink-3); margin:8px 0 0; }

/* field grid (key-value) */
.fields { display:grid; grid-template-columns:minmax(96px,max-content) 1fr; gap:7px 14px;
  font-size:var(--t-small); }
.fields dt { color:var(--ink-3); margin:0; }
.fields dd { margin:0; color:var(--ink); overflow-wrap:anywhere; }
.fields dd.mono { font-size:11.5px; padding-top:1px; }

/* tables */
.data-table { width:100%; border-collapse:collapse; }
.data-table th { text-align:left; font:600 10.5px var(--mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); padding:var(--row-pad) var(--s-3);
  border-bottom:1px solid var(--line); }
.data-table td { padding:var(--row-pad) var(--s-3); border-top:1px solid var(--line);
  color:var(--ink); font-size:var(--ui); }
.data-table tbody tr:hover td { background:var(--hover-wash); }
.data-table td a { color:var(--ink); font-weight:500; }
.data-table td a:hover { color:var(--accent); }
.data-table .cell-meta { font-family:var(--mono); color:var(--ink-3); font-size:12px; }
.data-table tfoot td { border-top:1px solid var(--line-2); color:var(--ink); }
.data-table .rowact, .data-table td.num, .data-table th.num { text-align:right; }
td.num, th.num, .num { font-variant-numeric:tabular-nums; text-align:right; }
.data-table.sticky thead th { position:sticky; top:0; background:var(--panel); z-index:1; }
th.sort a { color:var(--ink-3); display:inline-flex; gap:4px; align-items:center; }
th.sort a:hover, th.sort a.on { color:var(--ink); }
.empty { color:var(--ink-3); text-align:center; padding:18px; font-size:var(--t-small); }
.actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.actions form { display:inline; margin:0; }

/* filter bar (list pages) */
.filter-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 14px; }
.filter-bar .inp { width:auto; flex:0 1 260px; }
.filter-bar .spacer { flex:1; }

/* pagination */
.pagination { display:flex; gap:4px; align-items:center; margin:14px 0 0; font-size:var(--t-small); }
.pagination a, .pagination span.cur { min-width:28px; height:28px; display:inline-flex;
  align-items:center; justify-content:center; border-radius:var(--r-sm); color:var(--ink-2);
  border:1px solid transparent; padding:0 6px; }
.pagination a:hover { color:var(--ink); border-color:var(--line-2); }
.pagination span.cur { color:var(--ink); border-color:var(--accent-line); }
.pagination .meta { margin-left:auto; color:var(--ink-3); }

/* timeline (audit / record history) */
.timeline { list-style:none; margin:0; padding:0; }
.timeline li { position:relative; padding:0 0 18px 22px; }
.timeline li::before { content:""; position:absolute; left:5px; top:6px; width:7px; height:7px;
  border-radius:50%; background:var(--ink-3); }
.timeline li.tl-accent::before { background:var(--accent); }
.timeline li:not(:last-child)::after { content:""; position:absolute; left:8px; top:17px; bottom:-2px;
  width:1px; background:var(--line); }
.timeline .tl-head { font-size:var(--ui); color:var(--ink); display:flex; gap:8px; flex-wrap:wrap; align-items:baseline; }
.timeline .tl-meta { font-family:var(--mono); font-size:11.5px; color:var(--ink-3); }
.timeline .tl-body { font-size:var(--t-small); color:var(--ink-2); margin-top:2px; }

/* banners (aria-live in markup) */
.ok-banner, .error-banner, .banner { display:flex; gap:10px; align-items:flex-start;
  border-radius:var(--r); padding:10px 14px; margin-bottom:14px; font-size:var(--t-small);
  border:1px solid var(--line-2); color:var(--ink-2); background:var(--panel); }
.ok-banner { color:var(--ok-text); border-color:color-mix(in srgb, var(--ok) 34%, var(--line) 66%); }
.error-banner { color:var(--crit-text); border-color:color-mix(in srgb, var(--crit) 34%, var(--line) 66%); }
.error { color:var(--warn-text); border:1px solid color-mix(in srgb, var(--warn) 34%, var(--line) 66%);
  background:var(--panel); border-radius:var(--r); padding:10px 14px; margin-bottom:14px;
  font-size:var(--t-small); }
.ok-banner code, .error-banner code { overflow-wrap:anywhere; }

/* modal / confirm dialog */
dialog.modal { background:var(--panel); color:var(--ink); border:1px solid var(--line-2);
  border-radius:var(--r-lg); padding:20px; max-width:440px; width:calc(100vw - 48px);
  box-shadow:var(--shadow-pop); }
dialog.modal::backdrop { background:rgba(0,0,0,.55); }
dialog.modal[open] { animation:modal-in var(--dur-pop) var(--ease) both; }
dialog.modal[open]::backdrop { animation:fade-in var(--dur-pop) var(--ease) both; }
@keyframes modal-in { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
dialog.modal h2 { font-size:var(--t-md); margin-bottom:8px; }
dialog.modal p { font-size:var(--t-small); color:var(--ink-2); }
dialog.modal .modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }

/* command palette */
dialog.palette { background:var(--panel); color:var(--ink); border:1px solid var(--line-2);
  border-radius:var(--r-lg); padding:0; width:min(560px, calc(100vw - 48px));
  margin-top:10vh; box-shadow:var(--shadow-pop); }
dialog.palette::backdrop { background:rgba(0,0,0,.5); }
.palette-input { width:100%; background:transparent; color:var(--ink); border:0;
  border-bottom:1px solid var(--line); padding:14px 16px; font:14px var(--font-body, var(--sans)); }
.palette-input:focus { outline:none; }
.palette-list { list-style:none; margin:0; padding:6px; max-height:320px; overflow-y:auto; }
.palette-list li { padding:8px 10px; border-radius:var(--r-sm); font-size:var(--ui);
  color:var(--ink-2); display:flex; gap:10px; align-items:center; cursor:pointer; }
.palette-list li .pal-kind { font:600 10px var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); flex:0 0 74px; }
.palette-list li.sel, .palette-list li:hover { background:var(--surface); color:var(--ink); }
.palette-empty { padding:14px 16px; color:var(--ink-3); font-size:var(--t-small); }
.palette-hint { display:flex; gap:10px; padding:8px 16px; border-top:1px solid var(--line);
  color:var(--ink-3); font-size:11px; }

/* empty state */
.empty-state { display:flex; flex-direction:column; align-items:center; gap:var(--s-2);
  padding:var(--s-6) var(--s-4); color:var(--ink-3); text-align:center; }
.empty-state svg { width:30px; height:30px; color:var(--ink-3); stroke:currentColor; fill:none; }
.empty-state h3 { color:var(--ink-2); margin:0; }
.empty-state p { color:var(--ink-3); margin:0; max-width:46ch; font-size:var(--t-small); }

/* message / ticket thread (was phantom — now real) */
.thread { list-style:none; margin:14px 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.thread-msg { border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  padding:10px 14px; }
.thread-msg > .cell-meta, .thread-meta { font-family:var(--mono); font-size:11.5px; color:var(--ink-3);
  margin-bottom:4px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.thread-msg p, .thread-body { margin:0; color:var(--ink); font-size:var(--ui); white-space:pre-line; }
.thread-admin, .thread-msg.thread-admin { border-left:2px solid var(--accent-line); }

/* forms — layout helpers */
.row-form { display:flex; gap:8px; align-items:center; margin:14px 0; flex-wrap:wrap; }
.row-form .inp { width:auto; flex:1 1 220px; }
.row-form.left { justify-content:flex-start; }
.col-form { display:flex; flex-direction:column; gap:12px; max-width:460px; margin:14px 0; }
.stack-form { display:flex; flex-direction:column; gap:12px; max-width:560px; margin:14px 0; }
.stack-form input:not([type=checkbox]), .stack-form select, .stack-form textarea {
  background:var(--paper); color:var(--ink); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:7px 11px; font:var(--ui) var(--font-body, var(--sans)); min-height:var(--ctl-h); }
.stack-form textarea { min-height:0; }
.field-group { border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; margin:0; }
.field-group legend { font:600 var(--t-micro) var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); padding:0 6px; }
.field-group .check + .check, .coverage-hosts { margin-top:8px; }
.coverage-hosts { display:flex; flex-direction:column; gap:6px; padding-left:24px; }
.field-inline { display:flex; flex-direction:row; align-items:center; gap:8px; }
.field-inline .inp { width:auto; }
.field { margin-bottom:12px; }
.upload-row { display:flex; gap:10px; margin-bottom:10px; align-items:center; }
.upload-row .inp[type=file] { flex:1; }
.upload-row select.inp { flex:0 0 140px; }

/* ---- 7 · Domain components ---------------------------------------------- */
/* severity — fixed colours, filled for instant recognition */
.sev-critical { color:#fff; background:#C0392B; }
.sev-high { color:#2a1400; background:var(--sev-high); }
.sev-medium { color:#2a2400; background:var(--sev-med); }
.sev-low { color:#04210f; background:var(--sev-low); }
.sev-informational { color:#1c2430; background:var(--sev-info); }
.sev-tag { font:600 10px var(--mono); padding:1px 7px; border-radius:var(--r-pill); }
.sev-tag.sev-critical { color:#fff; background:#C0392B; } .sev-tag.sev-high { color:#2a1400; background:var(--sev-high); }
.sev-tag.sev-medium { color:#2a2400; background:var(--sev-med); } .sev-tag.sev-low { color:#04210f; background:var(--sev-low); }
.sev-tag.sev-informational { color:#1c2430; background:var(--sev-info); }

/* contract / invoice lifecycle */
.status-draft { color:var(--ink-3); }
.status-sent { color:var(--info-text); border-color:color-mix(in srgb, var(--accent-2) 36%, var(--panel) 64%); }
.status-signed { color:var(--ok-text); border-color:color-mix(in srgb, var(--ok) 36%, var(--panel) 64%); }
.status-void { color:var(--crit-text); border-color:color-mix(in srgb, var(--crit) 36%, var(--panel) 64%); }

/* maturity ring */
.ring-card { display:flex; flex-direction:column; align-items:center; gap:14px; }
.ring-wrap { width:220px; max-width:100%; }
.ring { width:100%; height:auto; display:block; }
.ring .seg { stroke:var(--paper); stroke-width:1.5; transition:opacity var(--dur) var(--ease); }
.ring .seg:hover { opacity:.82; cursor:default; }
.seg.ml-0 { fill:var(--ml0); } .seg.ml-1 { fill:var(--ml1); }
.seg.ml-2 { fill:var(--ml2); } .seg.ml-3 { fill:var(--ml3); }
.seg.unassessed { fill:var(--line-2); }
.ring-num { font-family:var(--font-heading, var(--heading)); font-weight:600; font-size:30px; fill:var(--ink); }
.ring-cap { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; fill:var(--ink-3); }
.ramp-legend { list-style:none; display:flex; gap:var(--s-2) var(--s-4); padding:0; margin:0;
  font-size:11px; color:var(--ink-3); flex-wrap:wrap; align-items:center; }
.ramp-legend li { display:flex; align-items:center; gap:5px; }
.sw { width:10px; height:10px; border-radius:3px; display:inline-block; }
.sw.ml-0 { background:var(--ml0); } .sw.ml-1 { background:var(--ml1); }
.sw.ml-2 { background:var(--ml2); } .sw.ml-3 { background:var(--ml3); }

/* maturity pips */
.mbar { display:inline-flex; gap:4px; flex:0 0 auto; }
.pip { width:18px; height:6px; border-radius:3px; background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line-2); }
.pip.on { box-shadow:none; }
.pip.on.ml-0 { background:var(--ml0); } .pip.on.ml-1 { background:var(--ml1); }
.pip.on.ml-2 { background:var(--ml2); } .pip.on.ml-3 { background:var(--ml3); }
.pip.tgt { outline:2px solid var(--accent); outline-offset:1px; }

/* compliance editor + E8 detail */
.ctl-edit { padding:14px 0; border-bottom:1px solid var(--line); }
.ctl-edit:last-child { border-bottom:0; }
.ctl-edit-head { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.ctl-edit-row { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.ctl-edit-row label { font-size:11.5px; }
.ctl-edit-row .inp { width:auto; }
.ctl-edit-row label.grow { flex:1 1 240px; }
.ctl-edit-row label.grow .inp { width:100%; }
.controls { margin:16px 0; }
.control { border:1px solid var(--line); border-radius:var(--r); background:var(--panel); margin:8px 0; }
.control > summary { display:flex; align-items:center; gap:14px; padding:13px 16px; cursor:pointer; list-style:none; }
.control > summary::-webkit-details-marker { display:none; }
.control > summary:hover { background:var(--hover-wash); }
.ctl-code { font-family:var(--mono); font-size:11px; color:var(--info-text); flex:0 0 44px; }
.ctl-name { flex:1; color:var(--ink); font-weight:500; font-size:var(--ui); }
.ctl-level { font-family:var(--mono); font-size:12px; font-weight:600; flex:0 0 auto; }
.ctl-level.ml-0 { color:var(--ml0); } .ctl-level.ml-1 { color:var(--ml1); }
.ctl-level.ml-2 { color:var(--ml2); } .ctl-level.ml-3 { color:var(--ml3); }
.control.is-unassessed .ctl-level { color:var(--ink-3); }
.ctl-body { padding:0 16px 14px 74px; }
.ctl-desc { color:var(--ink-2); font-size:var(--t-small); }
.ctl-why { display:flex; gap:8px; margin:6px 0; }
.ctl-rationale { color:var(--ink-2); font-size:var(--t-small); margin:6px 0; }
.ctl-muted { color:var(--ink-3); }
.evidence { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.evidence-label { font:600 10.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.evidence ul { list-style:none; padding:0; margin:8px 0 0; }
.evidence li { display:flex; align-items:center; gap:8px; font-size:var(--t-small); color:var(--ink); padding:4px 0; }
.ev-type { font-family:var(--mono); font-size:10px; color:var(--ink-3); text-transform:uppercase; }

/* methodology meter — the one gradient-permitted element */
.meth { margin-top:4px; }
.meth-head { display:flex; justify-content:space-between; font-size:12px; color:var(--ink-2); margin-bottom:6px; }
.meter { height:8px; border-radius:var(--r-pill); background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; }
.meter span { display:block; height:100%; background-image:var(--grad); border-radius:var(--r-pill); }

/* stats / tiles (nav-with-count, not decorative) */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.tile { display:flex; flex-direction:column; gap:4px; padding:18px; border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--panel); text-decoration:none;
  transition:border-color var(--dur) var(--ease); }
.tile:hover { border-color:var(--accent-line); }
.tile-count { font-family:var(--font-heading, var(--heading)); font-size:1.7rem; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.tile-label { font-weight:600; color:var(--ink); } .tile-desc { font-size:var(--t-small); color:var(--ink-3); }
.stat-card { display:flex; flex-direction:column; gap:12px; }
.stat-big { font-family:var(--font-heading, var(--heading)); font-size:2.2rem; line-height:1;
  font-weight:600; color:var(--ink); display:flex; align-items:center; gap:10px; font-variant-numeric:tabular-nums; }
.stat-muted { color:var(--ink-3); }
.stat-sub { font-size:var(--t-small); color:var(--ink-3); margin:0; }
.quick-actions { display:flex; flex-wrap:wrap; gap:var(--s-2); }

/* next actions list */
.action-list { list-style:none; padding:0; margin:0; }
.action-list li { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.action-list li:last-child { border-bottom:0; }
.act-code { font-family:var(--mono); font-size:11px; color:var(--info-text); flex:0 0 44px; }
.act-name { flex:1; color:var(--ink); font-size:var(--ui); }
.act-uplift { font-size:12px; color:var(--ink-2); white-space:nowrap; }
.act-uplift .arrow { color:var(--accent); }

/* contracts / e-sign / certificates */
.doc-render .doc-body { margin-top:12px; }
.hash { word-break:break-all; font-size:11px; color:var(--ink-3); font-family:var(--mono); }
.cert { border-color:color-mix(in srgb, var(--ok) 26%, var(--line) 74%); }
.cert-list { list-style:none; padding:0; margin:0; }
.cert-list li { display:flex; gap:14px; padding:7px 0; border-bottom:1px solid var(--line); font-size:var(--ui); }
.cert-list li:last-child { border-bottom:0; }
.cert-list li span { flex:0 0 150px; color:var(--ink-3); }
.cert-list li strong { color:var(--ink); font-weight:500; overflow-wrap:anywhere; }
.ok-text { color:var(--ok-text); } .crit-text { color:var(--crit-text); } .warn-text { color:var(--warn-text); }
.sign-box { margin-top:14px; }
.share-link { display:flex; gap:8px; align-items:center; font-size:12px; }
.share-link .mono { word-break:break-all; }

/* trust page (public snapshot) */
.trust { width:100%; max-width:760px; margin:0 auto; }
.trust h1 { margin-top:8px; }
.trust-foot { margin-top:18px; font-size:11.5px; color:var(--ink-3); text-align:center;
  letter-spacing:.02em; border-top:1px solid var(--line); padding-top:14px; }

/* ---- 8 · Utilities (small, deliberate) ----------------------------------- */
.mono { font-family:var(--mono); }
.gradient-text { color:var(--ink); }   /* banned effect neutralised; class kept for legacy markup */
.grid-2 { display:grid; grid-template-columns:1.4fr 1fr; gap:16px; margin:16px 0; align-items:start; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); }
.mt-2 { margin-top:var(--s-2); } .mt-3 { margin-top:var(--s-3); } .mt-4 { margin-top:var(--s-4); }
.mb-0 { margin-bottom:0; } .m-0 { margin:0; }
.flex-1 { flex:1; } .wrap-any { overflow-wrap:anywhere; word-break:break-all; }
.maxw-72 { max-width:720px; } .maxw-76 { max-width:760px; } .w-auto { width:auto; }
.row-split { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.inp-xs { width:80px; flex:0 0 80px; }
.inp-md { width:120px; flex:0 0 120px; }
.inp-sm { width:200px; flex:0 0 200px; }
.gap-4 { gap:var(--s-4); }
.inline-form { display:inline-flex; margin:0; vertical-align:middle; }
/* operator email preview: each email framed from its own route (see email_preview.html) */
.email-preview { margin:24px 0; }
.email-preview-h { font-size:1rem; margin:0 0 10px; }
.email-frame { display:block; width:100%; height:520px; margin-top:12px; background:#fff;
  border:1px solid var(--line); border-radius:8px; }
.card-reveal { border-color:var(--accent); }
.maxw-none { max-width:none; }
.text-center { text-align:center; }
.center-block { text-align:center; max-width:540px; margin-left:auto; margin-right:auto; }
.center-block .actions { justify-content:center; }
.w-full { width:100%; }
.mb-3 { margin-bottom:var(--s-3); } .mb-4 { margin-bottom:var(--s-4); }

/* operator: email templates (list beside the selected email) */
.mailbook { display:grid; grid-template-columns:260px minmax(0,1fr); gap:20px; align-items:start; }
.mailbook-list { position:sticky; top:16px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--panel); padding:8px; }
.mailbook-list ul { list-style:none; margin:0 0 6px; padding:0; }
.mailbook-group { display:flex; justify-content:space-between; align-items:baseline; margin:0;
  padding:10px 10px 6px; font:600 var(--t-micro)/1 var(--mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); }
.mailbook-list a { display:block; padding:7px 10px; border-radius:var(--r-sm); color:var(--ink-2);
  font-size:var(--ui); }
.mailbook-list a:hover { color:var(--ink); background:var(--hover-wash); }
.mailbook-list a.on { color:var(--ink); background:var(--surface); box-shadow:inset 2px 0 0 var(--accent-2); }
.mailbook-view { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel);
  padding:var(--card-pad); min-width:0; }
.mailbook-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap;
  margin-bottom:14px; }
.mailbook-head h2 { margin:4px 0 0; font-size:var(--t-lg); }
.mailbook-meta { padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--paper);
  margin:0 0 16px; }
.mailbook-frame { height:680px; margin-top:0; }
.mailbook-text { margin-top:14px; }
.mailbook-text summary { cursor:pointer; color:var(--ink-2); font-size:var(--t-small); }
.mailbook-text pre { white-space:pre-wrap; font:12px/1.55 var(--mono); color:var(--ink-2); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; margin:10px 0 0; overflow-wrap:anywhere; }
@media (max-width:980px) {
  .mailbook { grid-template-columns:1fr; }
  .mailbook-list { position:static; }
}

/* CSP-safe data-driven meter: SVG presentation attributes are not blocked
   by style-src, so the fill width travels as a rect attribute. */
svg.meter-svg { width:100%; height:8px; display:block; border-radius:var(--r-pill);
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); }
svg.meter-svg rect { fill:var(--accent); }

/* legacy aliases still referenced by unmigrated templates */
.tbl { width:100%; border-collapse:collapse; margin:14px 0; }
.tbl th { text-align:left; font:600 10.5px var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); padding:var(--row-pad) var(--s-3); border-bottom:1px solid var(--line); }
.tbl td { padding:var(--row-pad) var(--s-3); border-bottom:1px solid var(--line); color:var(--ink); }
.tbl tr:last-child td { border-bottom:0; }
.tbl td a { color:var(--ink); font-weight:500; }

/* ---- 9 · Responsive ------------------------------------------------------ */
.nav-toggle { display:none; background:none; border:0; color:var(--ink-2); cursor:pointer;
  padding:6px; border-radius:var(--r-sm); }
.nav-toggle:hover { color:var(--ink); background:var(--hover-wash); }
.drawer-backdrop { display:none; }

@media (max-width:1080px) {
  .record-body { grid-template-columns:1fr; }
  .rail { position:static; order:-1; flex-direction:row; flex-wrap:wrap; }
  .rail-box { flex:1 1 260px; }
}
@media (max-width:860px) {
  .grid-2 { grid-template-columns:1fr; }
  .ctl-body { padding-left:16px; }
}
@media (max-width:768px) {
  .nav-toggle { display:inline-flex; align-items:center; }
  .sidebar { position:fixed; top:0; left:0; bottom:0; z-index:var(--z-drawer);
    transform:translateX(-100%); transition:transform 200ms var(--ease); box-shadow:var(--shadow-pop); }
  .app.drawer-open .sidebar { transform:translateX(0); }
  .app.drawer-open .drawer-backdrop { display:block; position:fixed; inset:0;
    z-index:calc(var(--z-drawer) - 10); background:rgba(0,0,0,.6); animation:fade-in 200ms var(--ease) both; }
  .main { margin-left:0; }
  .container-wide { padding:16px 16px 0; }
  .topbar { padding:8px 16px; }
  .record-head { padding:16px 16px 0; }
  .section-nav { padding:10px 16px 0; }
  .record-body { padding:16px 16px 0; }
  .grid-3 { grid-template-columns:1fr; }
}

/* ---- 10 · Print + reduced motion ----------------------------------------- */
.doc { background:var(--doc-paper); color:var(--doc-ink); border:1px solid var(--doc-line);
  border-radius:var(--r-lg); padding:var(--s-6); max-width:72ch; }
.doc h1,.doc h2,.doc h3,.doc h4 { color:var(--doc-ink); font-family:var(--serif); }
.doc p,.doc li,.doc td { color:var(--doc-ink); }
.doc a { color:#4f46e5; }
.doc hr { border:0; border-top:1px solid var(--doc-line); }
.doc .muted,.doc small { color:var(--doc-ink-2); }
.doc table { max-width:none; }
@media print {
  .sidebar, .topbar, .nav-toggle, .drawer-backdrop, .btn, form, .no-print,
  .section-nav, .rail, .skip-link { display:none !important; }
  .main { margin:0 !important; padding:0 !important; }
  .record-body { grid-template-columns:1fr; padding:0; }
  body { background:#fff !important; }
  .doc { box-shadow:none; border:0; max-width:none; color:#000; background:#fff; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:.001ms !important; animation-duration:.001ms !important;
      animation-delay:0s !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}

/* ============================================================================
   11 · Customer experience (single brand)
   The customer shell is calmer than the operator console: comfortable density,
   sentence-case labels, one focal point per page. Operator styles above are
   untouched; everything here is scoped to .app.customer or to new components.
   ========================================================================== */
.app.customer { --ui:14.5px; --t-small:13.5px; --ctl-h:40px; --card-pad:24px; --row-pad:12px;
  --side-w:248px; font-size:15px; }
.app.customer .sidebar { background:var(--paper); padding:18px 14px; }
.brand-link { display:inline-flex; text-decoration:none; color:inherit; border-radius:var(--r); }
.brand-link:hover { color:inherit; }
.brand { display:flex; align-items:center; gap:10px; padding:4px 8px 14px; }
.brand-mark { width:28px; height:28px; flex:0 0 28px; border-radius:7px; display:block; }
.brand-word { height:18px; width:auto; display:block; } /* as tall as the 28px mark's room */
.public-bar .brand { padding:0; }
.app.customer .nav-label { font:600 12px/1 var(--font-body, var(--sans)); letter-spacing:0;
  text-transform:none; color:var(--ink-3); padding:18px 12px 8px; }
.app.customer .nav a, .app.customer .nav .nav-item { padding:9px 12px; border-radius:var(--r);
  font-size:14.5px; gap:12px; }
.app.customer .nav a svg { width:18px; height:18px; flex-basis:18px; }
.app.customer .nav a.on::before { left:-14px; top:9px; bottom:9px; width:3px; border-radius:2px; }
.nav-badge { margin-left:auto; font:600 11px/1 var(--mono); color:var(--on-accent); background:var(--accent);
  border-radius:var(--r-pill); padding:3px 7px; font-variant-numeric:tabular-nums; }
.who-block { display:flex; flex-direction:column; min-width:0; }
.who-email { color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.side-logout { margin:10px 0 0; }
.btn-block { width:100%; }

/* customer topbar: sticky, quiet; the brand shows only when the sidebar is a drawer */
.topbar-customer { position:sticky; top:0; z-index:var(--z-sticky); min-height:56px;
  background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(10px); }
.topbar-brand { display:none; }
.topbar-brand .brand { padding:0; }
.secchip-search .secchip-label { color:var(--ink-2); }
.chip-scan { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:5px 12px; }
.chip-scan .dot { width:6px; height:6px; flex-basis:6px; }

/* customer page head */
.app.customer .page-head { margin:6px 0 24px; }
.app.customer .page-head .crumb { font:500 13px var(--font-body, var(--sans)); letter-spacing:0;
  text-transform:none; color:var(--ink-3); }
.app.customer .page-head h1, .ov-title { font-size:28px; font-weight:600; letter-spacing:-.02em;
  line-height:1.15; text-wrap:balance; margin:4px 0 0; }
.app.customer .container-wide { max-width:1240px; padding:28px 40px 0; }
.app.customer .card { border-radius:14px; }
.app.customer .card-eyebrow { font:600 12.5px/1.2 var(--font-body, var(--sans)); letter-spacing:0;
  text-transform:none; color:var(--ink-2); margin-bottom:14px; }
.app.customer .subtitle { font-size:14px; }
.app.customer .btn, .app.customer .btn-ghost { border-radius:var(--r); }
.btn:active, .btn-ghost:active { transform:scale(.97); }
.tnum { font-variant-numeric:tabular-nums; }

/* ---- severity system (identical on site + portal; colour never alone) ----
   Status steps from the dataviz status palette (validated against the dark
   card surface: all >= 3:1). Red and orange cannot reach categorical
   separation on a dark surface, so every severity mark ships with its text
   label (pill, legend, tooltip, table) -- colour is never the only cue, and
   text always wears an ink token, never the severity colour. */
:root { --risk-c:#d03b3b; --risk-h:#ec835a; --risk-m:#fab219; --risk-l:#4fa3d9; }
.sev { display:inline-flex; align-items:center; gap:6px; font:600 12px/1 var(--font-body, var(--sans));
  padding:4px 9px 4px 8px; border-radius:var(--r-pill); white-space:nowrap;
  border:1px solid var(--line-2); color:var(--ink); background:var(--surface); }
.sev::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--dot, var(--ink-3)); flex:0 0 8px; }
.sev-c { --dot:var(--risk-c); } .sev-h { --dot:var(--risk-h); }
.sev-m { --dot:var(--risk-m); } .sev-l { --dot:var(--risk-l); }
.fill-c { fill:var(--risk-c); } .fill-h { fill:var(--risk-h); }
.fill-m { fill:var(--risk-m); } .fill-l { fill:var(--risk-l); }
.bg-c { background:var(--risk-c); } .bg-h { background:var(--risk-h); }
.bg-m { background:var(--risk-m); } .bg-l { background:var(--risk-l); }

/* ---- Overview (dashboard) ---------------------------------------------- */
.ov { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:20px; }
.ov > * { min-width:0; margin:0; }
.span-12 { grid-column:span 12; } .span-8 { grid-column:span 8; } .span-7 { grid-column:span 7; }
.span-6 { grid-column:span 6; } .span-5 { grid-column:span 5; } .span-4 { grid-column:span 4; }

/* hero: the focal point. The score and the one sentence that matters. */
.ov-hero { display:grid; grid-template-columns:minmax(240px, 300px) 1fr; gap:40px; align-items:center;
  padding:28px 34px; background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 55%),
    var(--panel); }
.ov-hero .ov-eyebrow { font-size:13px; color:var(--ink-3); margin:0 0 6px; }
.ov-hero .ov-title { font-size:32px; margin:0 0 10px; }
.ov-hero .ov-sub { font-size:15px; color:var(--ink-2); margin:0 0 20px; max-width:56ch; text-wrap:pretty; }
.ov-hero .actions { gap:10px; }
.ov-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }

/* focus-ring gauge (lens barrel engraving) */
.gauge { width:100%; max-width:300px; display:block; margin:0 auto; overflow:visible; }
.gauge .g-track { fill:none; stroke:var(--surface-2); stroke-linecap:round; }
.gauge .g-fill { fill:none; stroke-linecap:round; stroke-dasharray:1 1; stroke-dashoffset:0;
  animation:g-draw var(--dur-chart) var(--ease) .1s both; }
@keyframes g-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
.gauge .g-marker { animation:fade-in var(--dur) var(--ease) .55s both; }
.gauge .g-fill.tone-ok { stroke:var(--ok); } .gauge .g-fill.tone-warn { stroke:var(--warn); }
.gauge .g-fill.tone-crit { stroke:var(--risk-c); }
.gauge .g-tick { stroke:var(--line-2); stroke-width:1.2; }
.gauge .g-tick.major { stroke:var(--ink-3); stroke-width:1.6; }
.gauge .g-label { font:500 10px var(--mono); fill:var(--ink-3); }
.gauge .g-marker { fill:var(--paper); stroke-width:3; }
.gauge .g-marker.tone-ok { stroke:var(--ok); } .gauge .g-marker.tone-warn { stroke:var(--warn); }
.gauge .g-marker.tone-crit { stroke:var(--risk-c); }
.gauge .g-value { font:600 56px/1 var(--font-heading, var(--heading)); fill:var(--ink);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.gauge .g-grade { font:600 14px var(--font-body, var(--sans)); }
.gauge .g-grade.tone-ok { fill:var(--ok-text); } .gauge .g-grade.tone-warn { fill:var(--warn-text); }
.gauge .g-grade.tone-crit { fill:var(--crit-text); }
.delta { font:600 12.5px var(--font-body, var(--sans)); }
.delta-up { color:var(--ok-text); } .delta-down { color:var(--crit-text); } .delta-flat { color:var(--ink-3); }

/* stat row inside cards */
.stat-line { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 12px; }
.stat-line .big { font:600 32px/1 var(--font-heading, var(--heading)); letter-spacing:-.02em;
  color:var(--ink); font-variant-numeric:tabular-nums; }
.stat-line .unit { color:var(--ink-3); font-size:13.5px; }

/* severity donut */
.donut-wrap { display:grid; grid-template-columns:150px 1fr; gap:22px; align-items:center; }
.donut { width:150px; height:150px; display:block; }
.donut .d-seg { stroke:var(--panel); stroke-width:2; }
.donut .d-empty { fill:var(--surface-2); }
.donut .d-num { font:600 30px/1 var(--font-heading, var(--heading)); fill:var(--ink); font-variant-numeric:tabular-nums; }
.donut .d-cap { font:500 11px var(--font-body, var(--sans)); fill:var(--ink-3); }
.legend { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.legend li { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; font-size:13.5px; }
.legend .lg-sw { width:10px; height:10px; border-radius:3px; }
.legend .lg-name { color:var(--ink); }
.legend .lg-name small { display:block; color:var(--ink-3); font-size:11.5px; }
.legend .lg-n { font:600 15px var(--font-heading, var(--heading)); color:var(--ink); font-variant-numeric:tabular-nums; }

/* fix-by bullet bar */
.fixby-bar { display:flex; height:12px; border-radius:var(--r-pill); overflow:hidden; background:var(--surface-2);
  margin:14px 0 16px; }
.fixby-bar svg { width:100%; height:12px; display:block; }
.fb-overdue { fill:var(--risk-c); background:var(--risk-c); } .fb-week { fill:var(--risk-m); background:var(--risk-m); }
.fb-later { fill:var(--ink-3); background:var(--ink-3); } .fb-submitted { fill:var(--accent); background:var(--accent); }
.fixby-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.fixby-list li { display:flex; flex-direction:column; gap:2px; }
.fixby-list .n { font:600 22px/1 var(--font-heading, var(--heading)); color:var(--ink); font-variant-numeric:tabular-nums; }
.fixby-list .l { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-3); }
.fixby-list .l i { width:8px; height:8px; border-radius:2px; display:inline-block; }

/* trend (issues over time) */
.trend { width:100%; height:auto; display:block; overflow:visible; }
.trend .t-grid { stroke:var(--line); stroke-dasharray:2 4; }
.trend .t-area { fill:color-mix(in srgb, var(--accent) 10%, transparent); }
.trend .t-line { fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:1 1; animation:g-draw var(--dur-chart) var(--ease) .1s both; }
.trend .t-hit { fill:transparent; cursor:default; }
.trend-empty { padding:8px 0 4px; }
.donut .d-hole { fill:var(--panel); }
.ov-hero-welcome { grid-template-columns:1fr; }
.d-seg, .h-bar, .t-hit, .fixby-bar rect { outline:none; }
.tip { position:fixed; z-index:var(--z-overlay); pointer-events:none; background:var(--surface-2); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r); padding:6px 10px; font-size:12.5px; box-shadow:var(--shadow-pop);
  opacity:0; transform:translateY(4px); transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); white-space:nowrap; }
.tip.on { opacity:1; transform:none; }

/* ---- marketing stats ----------------------------------------------------------------------
   One fixed colour per network (a network keeps its colour whichever are shown). Validated with
   the dataviz skill's validate_palette.js on the dark surface (#14131B), on the adjacent AND the
   all-pairs list, so any filtered set of networks is safe: lightness band, chroma floor, CVD
   separation (worst 9.5), normal-vision floor (worst 15.4), contrast >= 3:1. Never a status colour. */
:root { --net-linkedin:#4167CA; --net-instagram:#EF4E86; --net-tiktok:#17A1C8; --net-facebook:#9B72FF; }
.net-linkedin { fill:var(--net-linkedin); stroke:var(--net-linkedin); }
.net-instagram { fill:var(--net-instagram); stroke:var(--net-instagram); }
.net-tiktok { fill:var(--net-tiktok); stroke:var(--net-tiktok); }
.net-facebook { fill:var(--net-facebook); stroke:var(--net-facebook); }
.sw.net-linkedin { background:var(--net-linkedin); } .sw.net-instagram { background:var(--net-instagram); }
.sw.net-tiktok { background:var(--net-tiktok); } .sw.net-facebook { background:var(--net-facebook); }
/* The best-times ramp is sequential (one hue, light to dark), so the categorical validator is not run on it. */
.hm-0 { fill:var(--surface-2); }
.hm-1 { fill:color-mix(in srgb, var(--accent) 18%, var(--panel)); }
.hm-2 { fill:color-mix(in srgb, var(--accent) 34%, var(--panel)); }
.hm-3 { fill:color-mix(in srgb, var(--accent) 52%, var(--panel)); }
.hm-4 { fill:color-mix(in srgb, var(--accent) 70%, var(--panel)); }
.hm-5 { fill:var(--accent); }
/* The Stats page: filter row, tiles, charts, top posts. */
.stats-meta { margin:14px 0 8px; color:var(--ink-3); font-size:var(--t-small); }
.filters { display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin:18px 0 4px; }
.filter-group { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.filters .seg, .filters .chip { display:inline-flex; align-items:center; gap:7px; min-height:calc(var(--ctl-h) - 6px);
  padding:4px 12px; border:1px solid var(--line-2); border-radius:var(--r-pill); color:var(--ink-2);
  font:600 var(--t-small) var(--font-body, var(--sans)); letter-spacing:0; text-transform:none; }
.filters .seg:hover, .filters .chip:hover { color:var(--ink); border-color:var(--ink-3); }
.filters .seg[aria-pressed="true"], .filters .chip[aria-pressed="true"] { color:var(--ink); border-color:var(--accent-line); background:var(--accent-soft); }
.filters .chip[aria-pressed="false"] .sw { opacity:.45; }
.filters .lbl { display:inline; margin:0; color:var(--ink-3); font-size:var(--t-small); }
.filters .inp { width:auto; }
.stiles { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:12px; margin:12px 0 16px; }
.stiles-extra { grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:-4px; }
.stile { display:flex; flex-direction:column; gap:3px; min-width:0; padding:14px 14px 12px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r-lg); }
.stile-l { color:var(--ink-3); font-size:var(--t-small); }
.stile-v { font:600 26px/1.15 var(--font-heading, var(--heading)); color:var(--ink); }
.stile-v.is-quiet { color:var(--ink-3); font-size:var(--t-lg); }
.stile .delta small { display:block; color:var(--ink-3); font-weight:400; font-size:11.5px; }
.stile .spark { margin-top:6px; }
.spark polyline { fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.stile-f { margin-top:auto; padding-top:8px; color:var(--ink-3); font-size:11.5px; line-height:1.35; }
.stats-pair > .card { min-width:0; }
.chart { position:relative; margin:0; overflow-x:auto; }
.chart figcaption { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; margin-bottom:10px; }
.chart-title { margin:0; font:600 var(--t-md) var(--font-heading, var(--heading)); color:var(--ink); }
.chart-sub { color:var(--ink-3); font-size:var(--t-small); }
ul.chart-key { list-style:none; padding:0; margin:0; }
.chart-key li { display:inline-flex; align-items:center; gap:6px; }
.chart-svg { width:100%; min-width:420px; height:auto; display:block; }
.chart-svg.heatmap { width:auto; max-width:100%; min-width:0; }
.chart-svg .ax { font:500 11.5px var(--font-body, var(--sans)); fill:var(--ink-3); }
.gb-grid, .ln-grid { stroke:var(--line); stroke-width:1; }
.gb-bar { stroke:none; }
.ln-path { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.ln-dot { stroke:var(--panel); stroke-width:2; }
.ln-leader { fill:none; stroke:var(--line-2); stroke-width:1; }
.ln-end { fill:var(--ink-2); font:500 11.5px var(--font-body, var(--sans)); }
.gb-bar:hover, .hm-cell:hover { opacity:.8; }
.gb-hit, .ln-hit { fill:transparent; }
.chart-table-wrap { margin-top:12px; overflow-x:auto; }
.chart-table .sw { vertical-align:baseline; margin-right:4px; }
.top-posts th a { color:inherit; }
.top-posts th[aria-sort] a { color:var(--ink); }
.tp-post { display:flex; align-items:center; gap:10px; min-width:200px; }
.thumb { width:36px; height:36px; flex:0 0 36px; border-radius:var(--r-sm); object-fit:cover; background:var(--surface-2); }
.thumb-video { display:inline-block; border:1px solid var(--line-2); }
.ratebar { width:80px; height:8px; vertical-align:middle; border-radius:4px; }
.rb-track { fill:var(--surface-2); }
.rb-fill { fill:var(--accent); }
.tp-rate, .tp-nowrap { white-space:nowrap; }
.chart-note { color:var(--ink-3); font-size:var(--t-small); margin:8px 0 24px; max-width:70ch; }
/* charts.js on: each chart's table is read by screen readers but hidden, until "Show as table". */
.charts-toggle { display:none; }
.charts-js .charts-toggle { display:inline-flex; }
.charts-js .chart .chart-table-wrap { position:absolute; top:0; left:0; width:1px; height:1px; margin:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.charts-js .chart.as-table .chart-table-wrap { position:static; width:auto; height:auto; margin-top:12px;
  max-height:380px; overflow:auto; clip:auto; white-space:normal; }
.charts-js .chart.as-table .chart-svg, .charts-js .chart.as-table .chart-key { display:none; }
.ln-cross { stroke:var(--line-2); stroke-width:1; display:none; }
.lines.is-hover .ln-cross { display:block; }
@media (max-width:1000px) { .stiles { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:900px) { .stats-pair { grid-template-columns:minmax(0,1fr); } }
@media (max-width:720px) { .stiles { grid-template-columns:repeat(2, minmax(0,1fr)); } .stiles-extra { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.trend .t-dot { fill:var(--panel); stroke:var(--accent); stroke-width:2; }
.trend .t-found { fill:var(--risk-h); }
.trend .t-fixed { fill:var(--ok); }
.trend .t-axis { font:500 12px var(--font-body, var(--sans)); fill:var(--ink-3); }
.trend .t-year { font-weight:600; fill:var(--ink-2); }
.trend .t-val { font:600 12px var(--font-body, var(--sans)); fill:var(--ink-2); font-variant-numeric:tabular-nums;
  paint-order:stroke; stroke:var(--panel); stroke-width:3px; stroke-linejoin:round; }
.trend .t-val-now { fill:var(--ink); }
.trend .t-area, .trend .t-dot, .trend .t-val { animation:fade-in var(--dur-pop) var(--ease) .4s both; }
.trend .t-found, .trend .t-fixed { transform-box:fill-box; transform-origin:center bottom;
  animation:ov-grow-y var(--dur-chart) var(--ease) .1s both; }
.delta-good { color:var(--ok-text); } .delta-bad { color:var(--crit-text); }
.chart-head { margin-bottom:14px; }
.chart-key .key-note { margin-left:auto; }
.chart-key { display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-3); margin-top:10px; }
.chart-key span { display:inline-flex; align-items:center; gap:6px; }
.chart-key i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.chart-key .k-open { background:var(--accent); } .chart-key .k-found { background:var(--risk-h); }
.chart-key .k-fixed { background:var(--ok); }

/* where the issues are (host bars) */
.hbars { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.hbars li { display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center; }
.hbars .h-host { font:500 13px var(--mono); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hbars .h-n { font:600 13.5px var(--font-body, var(--sans)); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.hbars svg { grid-column:1 / -1; width:100%; height:8px; display:block; }
.hbars .h-track { fill:var(--surface-2); }

/* fix-these-first list */
.fixlist { list-style:none; margin:0; padding:0; }
.fixlist li { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:14px; align-items:center;
  padding:14px 4px; border-top:1px solid var(--line); }
.fixlist li:first-child { border-top:0; }
.fixlist .f-title { color:var(--ink); font-weight:500; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fixlist .f-where { display:block; font:400 12.5px var(--mono); color:var(--ink-3); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fixlist .f-due { font-size:12.5px; color:var(--ink-3); white-space:nowrap; }
.fixlist .f-due.overdue { color:var(--crit-text); }
.card-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px; }
.card-head .card-eyebrow { margin:0; }
.card-head a { font-size:13px; }

/* essential eight, plain English */
.e8 { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 32px; }
.e8 li { display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:center; font-size:13.5px; }
.e8 .e8-n { color:var(--ink); } .e8 .e8-l { color:var(--ink-3); font-variant-numeric:tabular-nums; font-size:12.5px; }
.e8 .e8-pips { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.e8 .e8-pips i { height:6px; border-radius:3px; background:var(--surface-2); display:block; }
.e8 .e8-pips i.on { background:var(--accent-2); }

/* upsell */
.upsell { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center;
  border-color:var(--accent-line); background:
    linear-gradient(110deg, color-mix(in srgb, var(--accent) 12%, var(--panel)) 0%, var(--panel) 60%); }
.upsell h2 { font-size:19px; margin:0 0 6px; }
.upsell p { margin:0; color:var(--ink-2); }

/* onboarding checklist (new customers) */
.steps { list-style:none; margin:0; padding:0; }
.steps li { display:grid; grid-template-columns:32px 1fr auto; gap:14px; align-items:center;
  padding:14px 0; border-top:1px solid var(--line); }
.steps li:first-child { border-top:0; }
.steps .s-ico { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--line-2); color:var(--ink-3); font:600 12px var(--font-body, var(--sans)); }
.steps li.done .s-ico { background:var(--ok); border-color:var(--ok); color:var(--paper); }
.steps li.now .s-ico { border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.steps .s-ico svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.6; }
.steps .s-label { color:var(--ink); font-weight:500; }
.steps li.done .s-label { color:var(--ink-2); }
.steps .s-detail { display:block; color:var(--ink-3); font-size:13px; font-weight:400; margin-top:2px; }
.preview-blur { position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); margin:0; }
.preview-blur img { display:block; width:100%; height:auto; filter:blur(2px) saturate(.9); opacity:.6; }
.preview-blur figcaption { position:absolute; inset:auto 0 0 0; padding:18px 22px; font-size:13.5px; color:var(--ink-2);
  background:linear-gradient(transparent, color-mix(in srgb, var(--paper) 92%, transparent)); }

/* issues page */
.filter-chips { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px; }
.filter-chips a { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); color:var(--ink-2); font-size:13.5px; }
.filter-chips a:hover { color:var(--ink); border-color:var(--ink-3); }
.filter-chips a.on { color:var(--ink); border-color:var(--accent); background:var(--accent-soft); }
.filter-chips .n { font-variant-numeric:tabular-nums; color:var(--ink-3); }
.issue { border:1px solid var(--line); border-radius:12px; background:var(--panel); margin:0 0 10px; scroll-margin-top:72px; }
.issue[open] { border-color:var(--line-2); }
.issue > summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px; align-items:center; padding:16px 18px; border-radius:12px; }
.issue > summary::-webkit-details-marker { display:none; }
.issue > summary:hover { background:var(--hover-wash); }
.issue .i-title { color:var(--ink); font-weight:500; }
.issue .i-where { display:block; font:400 12.5px var(--mono); color:var(--ink-3); margin-top:3px; overflow-wrap:anywhere; }
.issue .i-meta { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-3); white-space:nowrap; }
.issue .i-body { padding:4px 18px 18px 18px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.issue .i-body h4 { font:600 12.5px var(--font-body, var(--sans)); color:var(--ink-2); margin:0 0 6px; }
.issue .i-body p { color:var(--ink); font-size:14px; margin:0; white-space:pre-line; }
.issue .i-body .i-when { grid-column:1 / -1; color:var(--ink-3); font-size:var(--t-small); }
.issue .i-foot { grid-column:1 / -1; display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:14px; }
.state { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; }
.state-submitted { color:var(--accent); } .state-fixed { color:var(--ok-text); } .state-open { color:var(--ink-3); }
.retest-form { display:flex; gap:8px; flex:1; flex-wrap:wrap; margin:0; }
.retest-form .inp { flex:1 1 260px; min-height:38px; }

/* documents */
.card-attention { border-color:var(--accent-line); background:
  linear-gradient(110deg, color-mix(in srgb, var(--accent) 8%, var(--panel)) 0%, var(--panel) 55%); }
.doc-list { list-style:none; margin:0; padding:0; }
.doc-list li { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:16px; align-items:center;
  padding:12px 0; border-top:1px solid var(--line); }
.doc-list li:first-child { border-top:0; }
.doc-list .doc-title { color:var(--ink); font-weight:500; overflow-wrap:anywhere; }
.doc-list .cell-meta { font-size:13px; color:var(--ink-3); white-space:nowrap; }
@media (max-width:768px) { .doc-list li { grid-template-columns:1fr auto; } .doc-list .cell-meta { grid-column:1; } }

/* scans page */
.scanlog { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px; }
.scanlog li { border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--panel); }
.scanlog .sl-date { font:600 15px var(--font-heading, var(--heading)); color:var(--ink); }
.scanlog .sl-meta { font-size:12.5px; color:var(--ink-3); margin-top:4px; }
.scanlog .sl-bar { margin-top:12px; }
.scanlog .sl-bar svg { width:100%; height:6px; display:block; border-radius:3px; }
.scanlog .sl-links { margin:10px 0 0; font-size:13px; }
.fill-ok { fill:var(--ok); }
.sites { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.sites li { font:500 13px var(--mono); color:var(--ink); border:1px solid var(--line-2); border-radius:var(--r);
  padding:6px 10px; background:var(--surface); }

/* chart entrance: transform/opacity only; static under reduced motion */
@keyframes ov-rise { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes ov-grow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes ov-grow-y { from { transform:scaleY(0); } to { transform:scaleY(1); } }
.ov > .card { animation:ov-rise 240ms var(--ease) both; }
.ov > .card:nth-child(2) { animation-delay:30ms; } .ov > .card:nth-child(3) { animation-delay:60ms; }
.ov > .card:nth-child(n+4) { animation-delay:90ms; }
.hbars .h-bar, .fixby-bar svg rect { transform-box:fill-box; transform-origin:left center;
  animation:ov-grow var(--dur-chart) var(--ease) .1s both; }
.donut .d-seg { animation:fade-in 400ms var(--ease) .1s both; }
.mbars .mb-bar { transform-box:fill-box; transform-origin:center bottom;
  animation:ov-grow-y var(--dur-chart) var(--ease) .1s both; }
/* Marketing stats. Bars rise from the baseline and lines draw once. charts.js marks a chart
   .is-settled before it toggles to the table view, so switching back does not replay them. */
.gb-bar { transform-box:fill-box; transform-origin:center bottom;
  animation:ov-grow-y var(--dur-chart) var(--ease) .1s both; }
.ln-path { stroke-dasharray:1 1; animation:g-draw var(--dur-chart) var(--ease) .1s both; }
.ln-dot, .ln-end, .ln-leader { animation:fade-in var(--dur-pop) var(--ease) .45s both; }
.chart.is-settled *, .chart.is-settled *::before { animation:none !important; }
@media (prefers-reduced-motion: reduce) {
  .ov > .card, .hbars .h-bar, .fixby-bar svg rect, .gauge .g-fill, .gauge .g-marker, .trend *, .donut .d-seg,
  .mbars .mb-bar, .gb-bar, .ln-path, .ln-dot, .ln-end, .ln-leader { animation:none; }
}

/* customer responsive */
@media (max-width:1100px) {
  .span-8, .span-7, .span-6, .span-5, .span-4 { grid-column:span 12; }
  .ov-hero { grid-template-columns:1fr; }
  .issue .i-body { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .topbar-brand { display:inline-flex; }
  .app.customer .container-wide { padding:20px 16px 0; }
  .ov { gap:14px; }
  .ov-hero { padding:22px 18px; gap:18px; }
  .ov-hero .ov-title { font-size:25px; }
  .donut-wrap { grid-template-columns:1fr; justify-items:center; }
  .e8 { grid-template-columns:1fr; }
  .topbar-customer { flex-wrap:nowrap; }
  .topbar-customer .chip-scan { display:none; }
  .gauge { max-width:250px; }
  .fixlist li { grid-template-columns:1fr auto; gap:8px 12px; }
  .fixlist li > .sev { grid-column:1; grid-row:1; justify-self:start; }
  .fixlist .f-due { grid-column:2; grid-row:1; }
  .fixlist li > span:nth-child(2) { grid-column:1 / -1; grid-row:2; }
  .fixlist .f-title, .fixlist .f-where { white-space:normal; }
  .fixlist .f-go { display:none; }
  .upsell { grid-template-columns:1fr; }
  .secchip-search .secchip-label, .secchip-search kbd { display:none; }
  .issue > summary { grid-template-columns:auto minmax(0,1fr); }
  .issue .i-meta { grid-column:2; }
}

/* ==========================================================================
   12 · Buy online (/start, /start/done, /account/paused)
   Same voice as the customer area: sentence-case labels, one accent, the
   price as the focal point, the form beside it.
   ========================================================================== */
.start { width:100%; max-width:1080px; margin:0 auto; }
.start-head { margin-bottom:22px; }
.start-head h1 { font-size:34px; line-height:1.1; margin:6px 0 8px; letter-spacing:-.02em; }
.start-head .subtitle { font-size:15px; margin:0; }
.start .eyebrow, .start .card-eyebrow { font:600 12.5px/1.2 var(--font-body, var(--sans)); letter-spacing:0;
  text-transform:none; color:var(--ink-3); }
.start .eyebrow { color:var(--accent); }
.start .field-group legend { font:600 13px/1.2 var(--font-body, var(--sans)); letter-spacing:0;
  text-transform:none; color:var(--ink); padding:0 6px; }
.start .stack-form label { color:var(--ink); font-weight:500; }
.start-grid { align-items:start; }
.start-price { display:flex; align-items:baseline; gap:8px; margin:10px 0 4px; }
.start-amount { font:600 44px/1 var(--font-heading, var(--heading)); letter-spacing:-.03em; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.start-per { color:var(--ink-2); font-size:14px; }
.start-terms { color:var(--ink); font-weight:600; }
.start-first { margin:12px 0 0; padding:9px 12px; border-radius:var(--r-sm); font-size:13.5px; font-weight:600;
  color:var(--ink); background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.start-list { list-style:none; margin:18px 0 0; padding:18px 0 0; border-top:1px solid var(--line);
  display:grid; gap:10px; }
.start-list li { display:grid; grid-template-columns:18px 1fr; gap:10px; color:var(--ink); font-size:14px;
  line-height:1.45; }
.start-tick { width:16px; height:16px; margin-top:2px; fill:none; stroke:var(--ok); stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round; }
.start-steps li { grid-template-columns:28px 1fr; gap:12px; padding:10px 0; }
.start-steps .s-ico { width:24px; height:24px; font-size:12px; }
.start-form .stack-form { max-width:none; }
.start-form h2 { margin-top:0; }
.start-submit { align-self:flex-start; }
.start-narrow { max-width:560px; }
.start-done h1 { font-size:28px; line-height:1.15; margin:6px 0 8px; letter-spacing:-.02em; }
.start-done .card-eyebrow { margin:22px 0 2px; }
.start-done-ico { display:inline-flex; width:40px; height:40px; border-radius:50%; align-items:center;
  justify-content:center; background:color-mix(in srgb, var(--ok) 16%, transparent); margin-bottom:12px; }
.start-done-ico svg { width:20px; height:20px; fill:none; stroke:var(--ok); stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round; }
.start-foot { margin-top:16px; text-align:center; }
.start-foot form { margin-top:8px; }
@media (min-width:1101px) {
  /* Form on the left across both rows; the order and next steps beside it. */
  .start-form { order:1; grid-row:span 2; }
  .start-summary { order:2; }
  .start-next { order:3; }
}
@media (max-width:768px) {
  .public-main { padding:24px 16px; }
  .start-head h1 { font-size:28px; }
  .start-submit { align-self:stretch; }
  .start-amount { font-size:38px; }
}


/* ==========================================================================
   13 · Customer page frame
   Every customer page opens the same way: what this page is, one plain line
   about it, and the two or three numbers that answer "where am I?" on the
   right. Below it, the content fills the width: a working column plus an
   aside of things that help on that page (never decoration).
   The track is the one new mark: the gauge's engraved scale, straightened.
   It shows how much of a window is used: a fix deadline, the monthly cycle.
   ========================================================================== */
.app.customer .container-wide { max-width:1560px; margin:0 auto; padding:32px 48px 0; }
/* the footer rule spans the content, not the gutters */
.app.customer .app-foot { max-width:1464px; width:calc(100% - 96px); margin:40px auto 0; padding:18px 0 0; }

/* page header */
.phead { display:flex; align-items:flex-end; justify-content:space-between; gap:24px 48px;
  flex-wrap:wrap; padding:0 0 26px; margin:0 0 28px; border-bottom:1px solid var(--line); }
.phead-main { flex:1 1 440px; min-width:0; }
.phead-eyebrow { font:500 13px/1.2 var(--font-body, var(--sans)); color:var(--ink-3); margin:0 0 8px; }
.phead h1 { font-size:34px; font-weight:600; letter-spacing:-.025em; line-height:1.08; margin:0;
  text-wrap:balance; }
.phead-lede { font-size:15px; line-height:1.55; color:var(--ink-2); margin:12px 0 0; max-width:64ch;
  text-wrap:pretty; }
.phead-side { display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; }

/* readouts: label over value, divided by hairlines like an instrument panel */
.readouts { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; row-gap:14px; }
.readouts li { display:flex; flex-direction:column; gap:7px; padding:2px 26px; min-width:0;
  border-left:1px solid var(--line); }
.readouts li:first-child { padding-left:0; border-left:0; }
.readouts li:last-child { padding-right:0; }
.ro-l { font-size:12.5px; line-height:1.2; color:var(--ink-3); white-space:nowrap; }
.ro-v { font:600 24px/1 var(--font-heading, var(--heading)); letter-spacing:-.02em; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.ro-v small { font:500 13px var(--font-body, var(--sans)); letter-spacing:0; color:var(--ink-3); margin-left:5px; }
.ro-v.is-crit { color:var(--crit-text); } .ro-v.is-ok { color:var(--ok-text); }
.ro-v.is-accent { color:var(--accent); } .ro-v.is-quiet { color:var(--ink-3); }

/* working column + aside */
.cols { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:24px; align-items:start; }
.cols-main { min-width:0; display:flex; flex-direction:column; gap:20px; }
.cols-aside { position:sticky; top:80px; display:flex; flex-direction:column; gap:16px; min-width:0; }
.cols-main > .card, .cols-aside > .card { margin:0; }
.app.customer .aside-card { padding:20px 22px; }
.aside-card p { font-size:13.5px; color:var(--ink-2); margin:0 0 12px; text-wrap:pretty; }
.aside-card p:last-child { margin-bottom:0; }
.aside-card .card-eyebrow { color:var(--ink); }
.aside-link { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:500; }

/* numbered how-it-works steps (aside, vertical) */
.howto { list-style:none; margin:0; padding:0; counter-reset:howto; display:flex; flex-direction:column; gap:14px; }
.howto li { counter-increment:howto; display:grid; grid-template-columns:24px 1fr; gap:12px; font-size:13.5px;
  color:var(--ink-3); line-height:1.45; }
.howto li::before { content:counter(howto); width:24px; height:24px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font:600 12px/1 var(--font-body, var(--sans));
  color:var(--accent); border:1.5px solid var(--accent-line); }
.howto strong { display:block; color:var(--ink); font-weight:500; margin-bottom:1px; }

/* the same steps laid out across a card */
.flow { list-style:none; margin:0; padding:0; counter-reset:flow; display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.flow li { counter-increment:flow; padding:16px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line); font-size:13px; color:var(--ink-3); line-height:1.45; }
.flow li::before { content:counter(flow); display:flex; width:22px; height:22px; border-radius:50%;
  align-items:center; justify-content:center; font:600 11.5px/1 var(--font-body, var(--sans)); color:var(--accent);
  border:1.5px solid var(--accent-line); margin-bottom:12px; }
.flow strong { display:block; color:var(--ink); font-weight:500; font-size:14px; margin-bottom:3px; }

/* two plain boxes side by side (People: who can do what) */
.duo { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.duo li { padding:16px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line);
  font-size:13.5px; color:var(--ink-3); line-height:1.45; }
.duo strong { display:block; color:var(--ink); font-weight:500; font-size:14px; margin-bottom:3px; }

/* quick answers (support) */
.qa { list-style:none; margin:0; padding:0; }
.qa li { padding:12px 0; border-top:1px solid var(--line); }
.qa li:first-child { border-top:0; padding-top:2px; }
.qa li:last-child { padding-bottom:0; }
.qa strong { display:block; color:var(--ink); font-weight:500; font-size:14px; margin-bottom:3px; }
.qa p { margin:0; font-size:13.5px; color:var(--ink-3); }

/* severity rows (aside on Issues): swatch, name + fix window, count */
.sevrows { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.sevrows li { display:grid; grid-template-columns:10px 1fr auto; gap:10px; align-items:center; font-size:13.5px; }
.sevrows .sw { width:10px; height:10px; border-radius:3px; }
.sevrows .sv-name { color:var(--ink); } .sevrows .sv-name small { display:block; color:var(--ink-3); font-size:12px; }
.sevrows .sv-n { font:600 15px var(--font-heading, var(--heading)); color:var(--ink); font-variant-numeric:tabular-nums; }
.sevrows li.is-zero .sv-name, .sevrows li.is-zero .sv-n { color:var(--ink-3); }
.sevrows li.is-zero .sw { opacity:.35; }
.sharebar { display:block; width:100%; height:8px; border-radius:4px; background:var(--surface-2); }

/* track: a straightened gauge scale. Drawn as stretched SVG; strokes keep their
   width (vector-effect), so it stays crisp at any length. */
.trk { display:block; width:100%; height:12px; overflow:visible; }
.trk-lg { height:22px; }
.trk .trk-bed { fill:var(--surface-2); }
.trk .trk-fill { fill:var(--ink-3); }
.trk .trk-tick { stroke:var(--line-2); stroke-width:1; }
.trk .trk-mark { stroke:var(--ink); stroke-width:2; stroke-linecap:round; }
.trk.tone-warn .trk-fill { fill:var(--risk-m); } .trk.tone-warn .trk-mark { stroke:var(--risk-m); }
.trk.tone-crit .trk-fill { fill:var(--risk-c); } .trk.tone-crit .trk-mark { stroke:var(--risk-c); }
.trk.tone-paused .trk-fill { fill:var(--accent); opacity:.45; } .trk.tone-paused .trk-mark { stroke:var(--accent); }
.trk.tone-accent .trk-fill { fill:var(--accent); } .trk.tone-accent .trk-mark { stroke:var(--ink); }

/* overview hero: the latest scan's own numbers beside the headline */
.ov-hero { grid-template-columns:minmax(240px, 300px) minmax(0,1fr) auto; }
.ov-hero.ov-hero-welcome { grid-template-columns:minmax(0,1fr) minmax(240px, 300px); }
.ov-hero-welcome .term-pips { margin:0; }
.ov-since { align-self:stretch; display:flex; flex-direction:column; justify-content:center; gap:20px;
  padding-left:36px; border-left:1px solid var(--line); min-width:210px; }
.ov-since-h { font-size:13px; color:var(--ink-3); margin:0; }
.ov-since .readouts { flex-direction:column; gap:18px; }
.ov-since .readouts li { padding:0; border:0; flex-direction:row; align-items:baseline; gap:12px; }
.ov-since .ro-v { min-width:44px; font-size:30px; }
.ov-since .ro-l { font-size:13.5px; color:var(--ink-2); }

/* monthly cycle (Scans, Overview) */
.cycle-ends { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:10px; }
.cycle-ends > div { display:flex; flex-direction:column; gap:5px; }
.cycle-ends .cycle-r { text-align:right; align-items:flex-end; }
.cycle-l { font-size:12.5px; color:var(--ink-3); }
.cycle-d { font:600 22px/1 var(--font-heading, var(--heading)); letter-spacing:-.02em; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.cycle-r .cycle-d { color:var(--accent); }
.cycle-cap { display:flex; justify-content:space-between; gap:12px; margin:10px 0 0; font-size:13px; color:var(--ink-3); }
.cycle-cap strong { color:var(--ink-2); font-weight:500; }
.cycle-sm .cycle-d { font-size:17px; }
.cycle-sm .cycle-ends { margin-bottom:8px; }
.card-sect { margin-top:24px; }
.card-sect > .card-eyebrow { margin-bottom:12px; }
.rescan-foot { padding-top:20px; border-top:1px solid var(--line); }
.rescan-foot .ro-v { font-size:20px; }

/* overview: the soonest deadline under the fix-by numbers */
.next-due { margin:18px 0 4px; padding-top:16px; border-top:1px solid var(--line); }
.next-due-h { font-size:12.5px; color:var(--ink-3); margin:0 0 10px; }
.next-due-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center;
  color:var(--ink); margin-bottom:10px; }
.next-due-row:hover { color:var(--ink); }
.next-due-row:hover .next-due-t { color:var(--accent); }
.next-due-t { font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.next-due-d { font-size:12.5px; color:var(--ink-3); white-space:nowrap; }

/* issue rows: due text over its track, and a chevron that turns when open */
.issue > summary { grid-template-columns:auto minmax(0,1fr) auto 16px; }
.issue > summary::after { content:""; width:8px; height:8px; justify-self:end; margin:0 3px 4px 0;
  border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3); transform:rotate(45deg);
  transition:transform var(--dur) var(--ease); }
.issue[open] > summary::after { transform:rotate(-135deg); margin:4px 3px 0 0; }
.i-due { display:flex; flex-direction:column; align-items:flex-end; gap:7px; min-width:104px; }
.i-due .trk { width:104px; }
.issue-list { display:flex; flex-direction:column; }
.issue-list .issue:last-child { margin-bottom:0; }
.cols-main .filter-chips { margin:0; }
.cols-main > .ok-banner { margin:0; }

/* scan history rows */
.scanrows { list-style:none; margin:0; padding:0; }
.scanrows li { display:grid; grid-template-columns:minmax(150px, 220px) minmax(0,1fr) 150px 172px; gap:28px;
  align-items:center; padding:18px 0; border-top:1px solid var(--line); }
.scanrows li:first-child { border-top:0; padding-top:6px; }
.scanrows li:last-child { padding-bottom:2px; }
.sr-date { font:600 17px/1.2 var(--font-heading, var(--heading)); color:var(--ink); display:flex; align-items:center;
  gap:10px; flex-wrap:wrap; }
.sr-kind { display:block; font-size:12.5px; color:var(--ink-3); margin-top:5px; }
.sr-bar svg { width:100%; height:8px; display:block; border-radius:4px; }
.sr-legend { display:flex; gap:6px 14px; flex-wrap:wrap; margin-top:9px; font-size:12.5px; color:var(--ink-3); }
.sr-legend span { display:inline-flex; align-items:center; gap:6px; }
.sr-legend i { width:8px; height:8px; border-radius:2px; display:inline-block; }
.sr-total { display:flex; flex-direction:column; gap:5px; }
.sr-total .n { font:600 22px/1 var(--font-heading, var(--heading)); color:var(--ink); font-variant-numeric:tabular-nums; }
.sr-total .u { font-size:12.5px; color:var(--ink-3); display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.sr-links { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }

/* reports: the latest one as a document, older ones as rows */
.report-lead { display:grid; grid-template-columns:132px minmax(0,1fr); gap:32px; align-items:center; }
.rl-page { width:132px; aspect-ratio:210 / 297; border-radius:6px; background:var(--doc-paper);
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.4); padding:14px 12px;
  display:flex; flex-direction:column; gap:6px; transform:rotate(-2deg); }
.rl-page i { display:block; height:4px; border-radius:2px; background:var(--doc-line); }
.rl-page .rl-h { height:7px; width:62%; background:var(--doc-ink); opacity:.8; margin-bottom:4px; }
.rl-page .rl-w60 { width:60%; } .rl-page .rl-w80 { width:80%; } .rl-page .rl-w40 { width:40%; }
.rl-page .rl-sev { display:flex; gap:4px; margin:6px 0 4px; }
.rl-page .rl-sev b { width:16px; height:4px; border-radius:2px; display:block; }
.rl-title { font-size:24px; letter-spacing:-.02em; line-height:1.2; margin:0 0 6px; }
.rl-meta { font-size:13.5px; color:var(--ink-3); margin:0 0 16px; }
.rl-bar { max-width:520px; }
.rl-bar svg { width:100%; height:8px; display:block; border-radius:4px; }
.report-lead .actions { margin:20px 0 0; gap:10px; }
.replist { list-style:none; margin:0; padding:0; }
.replist li { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto; gap:24px; align-items:center;
  padding:14px 0; border-top:1px solid var(--line); }
.replist li:first-child { border-top:0; padding-top:4px; }
.replist li:last-child { padding-bottom:0; }
.rp-name a { color:var(--ink); font-weight:500; }
.rp-name a:hover { color:var(--accent); }
.rp-meta { display:block; font-size:12.5px; color:var(--ink-3); margin-top:3px; }
.rp-found { display:flex; flex-direction:column; gap:7px; font-size:12.5px; color:var(--ink-3); }
.rp-found svg { width:100%; max-width:240px; height:6px; display:block; border-radius:3px; }
.rp-act { display:flex; gap:8px; }

/* billing: plan, what's included, minimum term */
.plan-top { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.plan-name { font:600 30px/1.1 var(--font-heading, var(--heading)); letter-spacing:-.025em; color:var(--ink); margin:0 0 10px; }
.plan-price { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:0; }
.plan-price .amt { font:600 22px/1 var(--font-heading, var(--heading)); color:var(--ink); font-variant-numeric:tabular-nums; }
.plan-price .per { color:var(--ink-3); font-size:13.5px; }
.included { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 28px; }
.included li { display:grid; grid-template-columns:16px 1fr; gap:10px; font-size:14px; color:var(--ink-2); line-height:1.45; }
.included svg { width:14px; height:14px; margin-top:3px; fill:none; stroke:var(--ok); stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round; }
.term-pips { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; margin:0 0 10px; }
.term-pips i { height:8px; border-radius:4px; background:var(--surface-2); display:block; }
.term-pips i.on { background:var(--accent); }
.term-cap { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13.5px; color:var(--ink-3); margin:0; }
.term-cap strong { color:var(--ink); font-weight:600; }

/* people */
.people { list-style:none; margin:0; padding:0; }
.people li { display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:14px; align-items:center;
  padding:12px 0; border-top:1px solid var(--line); }
.people li:first-child { border-top:0; padding-top:2px; }
.people li:last-child { padding-bottom:0; }
.people .av { width:36px; height:36px; flex-basis:36px; font-size:13px; font-weight:600; color:var(--ink); }
.people li.is-owner .av { border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent); }
.people .p-email { color:var(--ink); font-weight:500; overflow-wrap:anywhere; }
.people .p-email small { color:var(--ink-3); font-weight:400; font-size:12.5px; margin-left:6px; }
.people .p-role { display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px; }

.people-requests li.is-pending .av { border-style:dashed; color:var(--ink-3); background:transparent; }
.people-requests li.is-declined .p-email { color:var(--ink-2); }
.add-form { margin:4px 0 0; gap:8px; }
.add-form label { display:block; color:var(--ink); font-weight:500; font-size:13px; }
.add-form .opt { color:var(--ink-3); font-weight:400; }
.add-form .btn { margin-top:6px; align-self:flex-start; }

/* settings */
.settings-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; align-items:start; }
.settings-col { display:flex; flex-direction:column; gap:20px; min-width:0; }
.settings-col > .card { margin:0; }
.settings-grid .cert-list li span { flex-basis:160px; }
.mail-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.mail-list li { display:grid; grid-template-columns:18px 1fr; gap:12px; font-size:13.5px; color:var(--ink-3); }
.mail-list svg { width:18px; height:18px; margin-top:1px; fill:none; stroke:var(--ink-3); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.mail-list strong { display:block; color:var(--ink); font-weight:500; font-size:14px; }

/* customer forms that sit in the working column */
.stack-form.form-wide { max-width:none; margin:0; }
.form-row { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.form-row select.inp { width:100%; }
.cols-main .doc-render .doc { max-width:none; }
.cols-main > .doc-render { margin:0; }

/* a compact empty state inside a card that already has a heading */
.empty-state.is-compact { padding:22px 16px 14px; }

@media (max-width:1480px) {
  .ov-hero { grid-template-columns:minmax(220px, 270px) minmax(0,1fr); }
  .ov-since { grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:flex-start;
    flex-wrap:wrap; gap:14px 32px;
    padding:18px 0 0; border-left:0; border-top:1px solid var(--line); }
  .ov-since .readouts { flex-direction:row; flex-wrap:wrap; gap:14px 32px; }
  .ov-hero.ov-hero-welcome { grid-template-columns:1fr; }
  .ov-hero-welcome .term-pips { flex:1 1 100%; }
}
@media (max-width:1180px) {
  .cols { grid-template-columns:minmax(0,1fr) 300px; }
  .scanrows li { grid-template-columns:minmax(130px, 170px) minmax(0,1fr) 120px; }
  .scanrows .sr-links { grid-column:1 / -1; justify-content:flex-start; }
}
@media (max-width:1100px) {
  .app.customer .container-wide { padding:28px 32px 0; }
  .app.customer .app-foot { width:calc(100% - 64px); }
  .cols { grid-template-columns:1fr; }
  .cols-aside { position:static; display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
  .ov-hero { grid-template-columns:1fr; }
  .settings-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .app.customer .container-wide { padding:20px 16px 0; }
  .app.customer .app-foot { width:calc(100% - 32px); margin-top:32px; flex-wrap:wrap; gap:6px 14px; }
  .phead { padding-bottom:20px; margin-bottom:20px; gap:18px; }
  .phead h1 { font-size:28px; }
  .phead-lede { font-size:14.5px; }
  .phead-side { width:100%; }
  .readouts li { padding:2px 18px; }
  .ro-v { font-size:21px; }
  .flow, .duo, .form-row { grid-template-columns:1fr; }
  .flow li { display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:12px; padding:14px; }
  .flow li::before { grid-row:span 2; margin:0; }
  .scanrows li { grid-template-columns:1fr auto; gap:12px 16px; }
  .scanrows .sr-bar { grid-column:1 / -1; grid-row:2; }
  .scanrows .sr-total { grid-column:2; grid-row:1; text-align:right; align-items:flex-end; }
  .scanrows .sr-links { grid-column:1 / -1; }
  .report-lead { grid-template-columns:1fr; }
  .rl-page { display:none; }
  .replist li { grid-template-columns:1fr; gap:10px; }
  .included { grid-template-columns:1fr; }
  .issue > summary { grid-template-columns:auto minmax(0,1fr) 16px; }
  .issue > summary::after { grid-column:3; grid-row:1; }
  .issue .i-meta { grid-column:2; }
  .i-due { align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .issue > summary::after { transition:none; }
}

/* ==========================================================================
   14 · Signed-out pages
   One centred column for everything a visitor sees before signing in: the
   content and the footer share the same width, so nothing floats. The landing
   is a two-part sign-in (what you get / what it looks like); every message page
   (sign-in problem, no access, errors) is one centred card.
   ========================================================================== */
.public { overflow-x:clip; }   /* the preview's glow must not widen the page */
.public-bar { padding:0 32px; }
.public-main { justify-content:flex-start; padding:0 32px; }
.public-main > .container-wide { width:100%; max-width:1160px; margin:auto; padding:56px 0; }
.public .app-foot { width:100%; max-width:1160px; margin:0 auto; padding:18px 0 28px; }

/* landing: sign in */
.signin { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); gap:64px; align-items:center; }
.signin-eyebrow { font:600 13px/1.2 var(--font-body, var(--sans)); color:var(--accent); margin:0 0 14px; }
.signin h1 { font-size:46px; line-height:1.05; letter-spacing:-.03em; margin:0; text-wrap:balance; max-width:17ch; }
.signin-lede { font-size:16.5px; line-height:1.55; color:var(--ink-2); margin:18px 0 28px; max-width:46ch; text-wrap:pretty; }
.signin .actions { gap:10px; margin:0; }
.signin-points { list-style:none; margin:40px 0 0; padding:24px 0 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.signin-points li { display:flex; flex-direction:column; gap:10px; font-size:13px; color:var(--ink-3); line-height:1.45; }
.signin-points svg { width:20px; height:20px; fill:none; stroke:var(--accent); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.signin-points strong { display:block; color:var(--ink); font-weight:500; font-size:14px; margin-bottom:2px; }
.signin-shot { position:relative; margin:0; border-radius:18px; padding:10px;
  background:var(--panel); border:1px solid var(--line-2);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.02); }
.signin-shot::before { content:""; position:absolute; inset:-40px -30px -30px; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 60% at 60% 40%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
.signin-shot img { display:block; width:100%; height:auto; border-radius:10px; }

/* Trust Centre (and any public page built on page_head + grid-2): the same
   voice as the customer pages, two even columns. CSS only, so the template
   stays as it is. */
.public .page-head { margin:0 0 12px; }
.public .page-head .crumb { font:600 13px/1.2 var(--font-body, var(--sans)); letter-spacing:0;
  text-transform:none; color:var(--accent); }
.public .page-head h1 { font-size:34px; letter-spacing:-.025em; margin:10px 0 0; }
.public .page-head + .subtitle { font-size:15px; color:var(--ink-2); margin:0 0 28px; }
.public .page-head ~ .grid-2 { grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; margin:0;
  align-items:stretch; }
.public .page-head ~ .grid-2 > .card { margin:0; border-radius:14px; }
.public .page-head ~ .grid-2 .card-eyebrow { font:600 13.5px/1.2 var(--font-body, var(--sans)); letter-spacing:0;
  text-transform:none; color:var(--ink); margin-bottom:10px; }
.public .page-head ~ .grid-2 p { font-size:14px; line-height:1.6; margin:0; }

/* message pages: one centred card */
.notice { max-width:540px; margin:0 auto; padding:36px 36px 32px; background:var(--panel);
  border:1px solid var(--line); border-radius:16px; }
.notice-ico { display:inline-flex; width:44px; height:44px; border-radius:12px; align-items:center; justify-content:center;
  background:var(--accent-soft); border:1px solid var(--accent-line); margin-bottom:18px; }
.notice-ico svg { width:20px; height:20px; fill:none; stroke:var(--accent); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.notice-eyebrow { font:500 13px/1.2 var(--font-body, var(--sans)); color:var(--ink-3); margin:0 0 6px; }
.notice h1 { font-size:26px; line-height:1.15; letter-spacing:-.02em; margin:0 0 12px; text-wrap:balance; }
.notice-body { font-size:14.5px; line-height:1.6; color:var(--ink-2); margin:0 0 24px; text-wrap:pretty; }
.notice .actions { margin:0; gap:10px; }
.notice-ref { font-size:12.5px; color:var(--ink-3); margin:-10px 0 22px; }
.notice-foot { margin:18px 0 0; padding-top:18px; border-top:1px solid var(--line); }
.notice-center { text-align:center; }
.notice-center .actions { justify-content:center; }
.notice-code { font:600 64px/1 var(--font-heading, var(--heading)); letter-spacing:-.04em; margin:0 0 14px;
  color:color-mix(in srgb, var(--accent) 70%, var(--ink) 30%); font-variant-numeric:tabular-nums; }

@media (max-width:1000px) {
  .signin { grid-template-columns:1fr; gap:40px; }
  .signin h1 { font-size:38px; max-width:none; }
  .signin-shot { max-width:620px; }
}
@media (max-width:768px) {
  .public-bar { padding:0 16px; }
  .public-main { padding:0 16px; }
  .public-main > .container-wide { padding:32px 0; }
  .signin h1 { font-size:32px; }
  .signin-lede { font-size:15.5px; }
  .signin-points { grid-template-columns:1fr; gap:14px; margin-top:28px; }
  .signin-points li { flex-direction:row; gap:12px; }
  .notice { padding:28px 22px 24px; }
  .public .page-head ~ .grid-2 { grid-template-columns:1fr; }
  .public .page-head h1 { font-size:28px; }
  .public .app-foot { flex-wrap:wrap; gap:6px 14px; }
}

/* ==========================================================================
   15 · Operator console
   The same frame as the customer pages, at the operator's density: a wide,
   centred column; a header with the page's readouts on the right; a working
   column plus an aside. One customer is one page with tabs. Menus are
   <details>, so they work with no script (CSP).
   ========================================================================== */
.app.admin-mode .container-wide { max-width:1560px; margin:0 auto; padding:28px 40px 0; }
.app.admin-mode .app-foot { max-width:1480px; width:calc(100% - 80px); margin:40px auto 0; padding:18px 0 0; }
.app.admin-mode .page-head { padding:0 0 20px; margin:0 0 24px; border-bottom:1px solid var(--line); }
.app.admin-mode .page-head .crumb { font:500 13px/1.2 var(--font-body, var(--sans)); letter-spacing:0;
  text-transform:none; color:var(--ink-3); }
.app.admin-mode .page-head h1 { font-size:28px; font-weight:600; letter-spacing:-.02em; line-height:1.1; margin:8px 0 0; }
.app.admin-mode .phead { padding-bottom:22px; margin-bottom:0; }
.app.admin-mode .phead h1 { font-size:30px; }
.app.admin-mode .phead-eyebrow a { color:var(--ink-3); }
.app.admin-mode .phead-eyebrow a:hover { color:var(--ink); }
.app.admin-mode .phead + :not(.tabs) { margin-top:24px; }
.app.admin-mode .page-head:has(+ .tabs) { border-bottom:0; margin-bottom:0; padding-bottom:6px; }
.app.admin-mode .aside-card { padding:18px 20px; }
.app.admin-mode .cols { grid-template-columns:minmax(0,1fr) 340px; gap:20px; }
.app.admin-mode .cols-main { gap:16px; }
.app.admin-mode .cols-aside { top:20px; gap:16px; }
.app.admin-mode .cols .card { margin-bottom:0; }
.app.admin-mode .cust-body > .ok-banner, .app.admin-mode .cust-body > .error-banner { margin:0 0 16px; }

/* a card whose body is a table runs the table to the card's edges */
.card-table { padding:0; overflow:hidden; }
.card-table > .data-table th:first-child, .card-table > .data-table td:first-child { padding-left:var(--card-pad); }
.card-table > .data-table th:last-child, .card-table > .data-table td:last-child { padding-right:var(--card-pad); }
.card-table > .empty-state { padding:28px var(--card-pad) 30px; }
.card-head-pad { padding:var(--card-pad) var(--card-pad) 10px; margin:0; align-items:center; }
.data-table td .cell-sub, .cell-sub { display:block; font-size:12px; color:var(--ink-3); margin-top:3px;
  font-weight:400; line-height:1.35; }
.cell-sub.mono { font-family:var(--mono); font-size:11.5px; }
.muted { color:var(--ink-3); }
.muted-p { color:var(--ink-3); font-size:13.5px; margin:0; }
.nowrap { white-space:nowrap; }
.tx-crit { color:var(--crit-text); } .tx-warn { color:var(--warn-text); }
.tx-ok { color:var(--ok-text); } .tx-info { color:var(--info-text); }

/* details menus: a summary button and a panel that floats under it */
.menu { position:relative; display:inline-block; }
.menu > summary { list-style:none; cursor:pointer; }
.menu > summary::-webkit-details-marker { display:none; }
.menu > summary::after { content:""; width:6px; height:6px; margin:-3px 0 0 2px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(45deg); opacity:.7; }
.menu[open] > summary::after { transform:rotate(-135deg); margin-top:3px; }
.menu-panel { position:absolute; z-index:var(--z-drawer); top:calc(100% + 6px); left:0; width:300px;
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:16px;
  box-shadow:var(--shadow-pop); text-align:left; }
.menu-right .menu-panel { left:auto; right:0; }
.menu-panel-sm { width:240px; padding:8px; display:flex; flex-direction:column; gap:4px; }
.menu-panel-sm form { margin:0; display:block; }
.menu-panel-sm .btn-ghost, .menu-panel-sm .btn-danger { justify-content:flex-start; border-color:transparent; }
.menu-panel .stack-form { margin:0; gap:10px; max-width:none; }
.menu-panel .stack-form .btn, .menu-panel .stack-form .btn-ghost { align-self:flex-start; }
.menu-sect { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.menu-note { font-size:12.5px; color:var(--ink-3); margin:0; line-height:1.45; }
.menu-sect .menu-note { margin-top:8px; }

/* list pages: filter chips, search and the main action on one line */
.list-tools { display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; margin:24px 0 16px; }
.list-tools .filter-chips { margin:0; flex:1 1 auto; }
.list-search { display:flex; gap:8px; align-items:center; margin:0; }
.list-search .inp { width:240px; }

/* the customer list */
.cust-table td { vertical-align:top; padding-top:12px; padding-bottom:12px; }
.cust-table .cust-name { font-size:14px; font-weight:600; }
.reasons { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:5px; }
.reason { display:inline-flex; align-items:center; gap:6px; font-size:12px; line-height:1.3; color:var(--ink-2);
  padding:2px 8px 2px 7px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line); }
.reason::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ink-3); flex:0 0 6px; }
.reason.tone-crit::before { background:var(--crit); } .reason.tone-warn::before { background:var(--warn); }
.reason.tone-info::before { background:var(--accent-2); } .reason.tone-ok::before { background:var(--ok); }
.score-n { font:600 15px var(--font-heading, var(--heading)); font-variant-numeric:tabular-nums; }
.score-n.tone-crit { color:var(--crit-text); } .score-n.tone-warn { color:var(--warn-text); }
.score-n.tone-ok { color:var(--ok-text); }

/* the customer page: header, then tabs */
.cust-title { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cust-title h1 { margin:0; }
.cust-head .phead-lede { font-size:14px; margin-top:10px; }
.cust-head .phead-side { align-items:center; }
.tabs { display:flex; gap:2px; margin:0 0 24px; border-bottom:1px solid var(--line); overflow-x:auto;
  scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tabs a { display:inline-flex; align-items:center; gap:7px; padding:12px 14px 11px; margin-bottom:-1px;
  font:500 13.5px var(--font-body, var(--sans)); color:var(--ink-2); border-bottom:2px solid transparent;
  white-space:nowrap; }
.tabs a:hover { color:var(--ink); }
.tabs a.on { color:var(--ink); border-bottom-color:var(--accent-2); }
.tab-n { font:600 11px var(--mono); color:var(--ink-3); background:var(--surface); border-radius:var(--r-pill);
  padding:1px 7px; font-variant-numeric:tabular-nums; }
.tab-dot { width:7px; height:7px; border-radius:50%; background:var(--warn); }

/* overview: onboarding steps */
.obsteps { list-style:none; margin:6px 0 0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); }
.ob-step { position:relative; display:flex; flex-direction:column; gap:4px; padding:0 10px 0 0; font-size:13px; }
.ob-step-mark { position:relative; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line-2);
  background:var(--panel); margin-bottom:8px; z-index:1; }
.ob-step:not(:last-child)::after { content:""; position:absolute; left:20px; right:2px; top:8.5px; height:1.5px;
  background:var(--line-2); }
.ob-step.is-done .ob-step-mark { background:var(--ok); border-color:var(--ok); }
.ob-step.is-done .ob-step-mark::after { content:""; position:absolute; left:5px; top:2px; width:4px; height:8px;
  border:solid var(--paper); border-width:0 2px 2px 0; transform:rotate(45deg); }
.ob-step.is-done:not(:last-child)::after { background:color-mix(in srgb, var(--ok) 55%, var(--line-2) 45%); }
.ob-step.is-now .ob-step-mark { border-color:var(--accent-2); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent-2) 18%, transparent); }
.ob-step.is-na .ob-step-mark { border-style:dashed; }
.ob-step-label { color:var(--ink); font-weight:500; }
.ob-step:not(.is-done):not(.is-now) .ob-step-label { color:var(--ink-3); }
.ob-step-note { color:var(--ink-3); font-size:12px; line-height:1.35; }
.ob-step-now { margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink-2); }
.ob-step-now strong { color:var(--ink); font-weight:600; }

/* overview: what needs a look */
.looklist { list-style:none; margin:4px 0 0; padding:0; }
.looklist li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0;
  border-top:1px solid var(--line); }
.looklist li:first-child { border-top:0; padding-top:2px; }
.looklist .reason { background:transparent; border:0; padding-left:0; font-size:13.5px; color:var(--ink); }
.look-who { font-size:12px; color:var(--ink-3); white-space:nowrap; }

/* overview: security summary */
.sec-row { display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px; align-items:center; margin:8px 0 18px; }
.sec-score { display:flex; flex-direction:column; align-items:center; justify-content:center; width:104px; height:104px;
  border-radius:50%; border:6px solid var(--surface-2); }
.sec-score.tone-ok { border-color:color-mix(in srgb, var(--ok) 55%, var(--surface-2) 45%); }
.sec-score.tone-warn { border-color:color-mix(in srgb, var(--warn) 55%, var(--surface-2) 45%); }
.sec-score.tone-crit { border-color:color-mix(in srgb, var(--crit) 55%, var(--surface-2) 45%); }
.sec-n { font:600 32px/1 var(--font-heading, var(--heading)); letter-spacing:-.02em; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.sec-g { font-size:11.5px; color:var(--ink-3); margin-top:4px; }
.sec-line { color:var(--ink); font-size:14px; margin:0 0 12px; }
.sevcount { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px; }
.sevcount li { display:inline-flex; align-items:center; gap:8px; }
.sevcount .sv-n { font:600 16px var(--font-heading, var(--heading)); font-variant-numeric:tabular-nums; color:var(--ink); }
.sevcount li.is-zero { opacity:.45; }
.readouts-sm { padding-top:16px; border-top:1px solid var(--line); }
.readouts-sm .ro-v { font-size:20px; }
.fields-wide { grid-template-columns:minmax(120px,max-content) 1fr; gap:10px 18px; font-size:13.5px; }
.fields-wide .key { margin:0 4px 4px 0; display:inline-block; }

/* aside lists */
.doclist { list-style:none; margin:0; padding:0; }
.doclist li { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0;
  border-top:1px solid var(--line); font-size:13.5px; }
.doclist li:first-child { border-top:0; padding-top:0; }
.doclist a { color:var(--ink); }
.doclist a:hover { color:var(--accent); }
.timeline-sm li { padding-bottom:12px; }
.timeline-sm .tl-head { font-size:13px; }
.timeline-sm .tl-meta { font-size:11px; }

/* people rows on the customer page */
.people .p-main { min-width:0; display:flex; flex-direction:column; }
.people .actions { justify-content:flex-end; flex-wrap:nowrap; }
.actions-end { justify-content:flex-end; flex-wrap:nowrap; }
.row-retest td { background:color-mix(in srgb, var(--accent-2) 5%, transparent); }

/* the operator's own account sits at the foot of the sidebar */
.side-foot a.who-block { color:inherit; }
.side-foot a.who-block:hover .who { color:var(--ink-2); }

/* tabs that are mostly tables give the table the full width sooner */
@media (max-width:1400px) {
  .app.admin-mode .cols-data { grid-template-columns:1fr; }
  .app.admin-mode .cols-data .cols-aside { position:static; display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); align-items:start; }
}
.people-requests .inp-sm { width:150px; flex-basis:150px; }
@media (max-width:1100px) {
  .app.admin-mode .cols { grid-template-columns:1fr; }
  .app.admin-mode .cols-aside { position:static; display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
}
@media (max-width:900px) {
  .obsteps { grid-template-columns:1fr; gap:12px; }
  .ob-step { flex-direction:row; align-items:baseline; flex-wrap:wrap; gap:4px 10px; }
  .ob-step-mark { margin:0; flex:0 0 18px; align-self:center; }
  .ob-step:not(:last-child)::after { display:none; }
  .ob-step-note { flex-basis:100%; padding-left:28px; }
  .cust-table thead { display:none; }
  .cust-table, .cust-table tbody, .cust-table tr, .cust-table td { display:block; width:100%; }
  .cust-table tr { padding:12px var(--card-pad); border-top:1px solid var(--line); }
  .cust-table td { border:0; padding:3px 0 !important; text-align:left; }
  .cust-table td.num { text-align:left; }
}
@media (max-width:768px) {
  .app.admin-mode .container-wide { padding:20px 16px 0; }
  .app.admin-mode .app-foot { width:calc(100% - 32px); }
  .list-search, .list-search .inp { width:100%; }
  .menu-panel { width:min(300px, calc(100vw - 32px)); }
  .sec-row { grid-template-columns:1fr; justify-items:start; }
}

/* ---- Today: the needs-you queue, the two monthly charts, the side numbers ---- */
.queue { list-style:none; margin:0; padding:0; }
.q { display:grid; grid-template-columns:10px minmax(0,1fr) 130px auto; gap:4px 16px; align-items:center;
  padding:14px var(--card-pad); border-top:1px solid var(--line); }
.q-dot { width:8px; height:8px; border-radius:50%; background:var(--ink-3); align-self:start; margin-top:6px; }
.q.tone-crit .q-dot { background:var(--crit); }
.q.tone-warn .q-dot { background:var(--warn); }
.q.tone-info .q-dot { background:var(--accent-2); }
.q-main { min-width:0; }
.q-kind { margin:0 0 3px; font:600 10.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.q-who { font-weight:500; letter-spacing:.04em; }
.q-title { margin:0; font-size:14px; font-weight:500; color:var(--ink); overflow-wrap:anywhere; }
.q-title a { color:var(--ink); }
.q-title a:hover { color:var(--accent); }
.q-meta { margin:3px 0 0; font-size:12.5px; color:var(--ink-3); line-height:1.45; }
.q-meta a { color:var(--ink-2); }
.q-meta a:hover { color:var(--ink); }
.q-when { display:flex; flex-direction:column; font-size:13px; color:var(--ink-2); }
.q.tone-crit .q-when-main { color:var(--crit-text); font-weight:600; }
.q.tone-warn .q-when-main { color:var(--warn-text); font-weight:500; }
.q-act { display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
.q-act form { margin:0; }
.q-act .row-form { margin:0; flex-wrap:nowrap; }
.q-act .inp-sm { width:150px; flex-basis:150px; }
.q.q-them .q-title, .q.q-them .q-title a { color:var(--ink-2); }
/* inline forms get their own line under the item, so the text keeps its width */
.q.q-form .q-act { grid-column:2 / -1; justify-content:flex-start; margin-top:6px; }

.chart-pair { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.chart-pair > .card { margin:0; }
.chart-sub { margin:0 0 10px; font-size:12.5px; color:var(--ink-3); }
.mbars { width:100%; height:auto; display:block; overflow:visible; }
.mbars .mb-grid { stroke:var(--line); stroke-width:1; }
.mbars .mb-axis { fill:var(--ink-3); font:11px var(--font-body, var(--sans)); font-variant-numeric:tabular-nums; }
.mbars .mb-bar { fill:color-mix(in srgb, var(--accent) 55%, var(--panel) 45%); }
.mbars .mb-bar.is-now { fill:var(--accent); }
.mbars .mb-hit { fill:transparent; outline:none; }
.mbars .mb-hit:hover { fill:var(--hover-wash); }

.stat-list { margin:0; display:flex; flex-direction:column; }
.stat-list > div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 0;
  border-top:1px solid var(--line); font-size:13.5px; }
.stat-list > div:first-child { border-top:0; padding-top:2px; }
.stat-list dt { color:var(--ink-2); margin:0; }
.stat-list dt a { color:var(--ink-2); }
.stat-list dt a:hover { color:var(--ink); }
.stat-list dd { margin:0; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }
.stat-list dd small { color:var(--ink-3); font-weight:400; font-size:12px; }
.syslist { list-style:none; margin:0; padding:0; }
.syslist li { display:flex; justify-content:space-between; gap:12px; padding:8px 0 8px 16px; position:relative;
  border-top:1px solid var(--line); font-size:13.5px; color:var(--ink-2); }
.syslist li:first-child { border-top:0; padding-top:2px; }
.syslist li::before { content:""; position:absolute; left:0; top:calc(50% - 3px); width:6px; height:6px; border-radius:50%;
  background:var(--ink-3); }
.syslist li:first-child::before { top:calc(50% - 6px); }
.syslist li.is-ok::before { background:var(--ok); }
.syslist li.is-bad::before { background:var(--crit); }
.syslist li span:last-child { color:var(--ink); text-align:right; }

@media (max-width:1180px) {
  .chart-pair { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .q { grid-template-columns:10px minmax(0,1fr); }
  .q-when { grid-column:2; flex-direction:row; gap:8px; align-items:baseline; }
  .q-when .cell-sub { margin:0; }
  .q-act { grid-column:2; justify-content:flex-start; }
  .q-act .row-form { flex-wrap:wrap; }
}

/* ---- Scans: the board and the scan workspace --------------------------------- */
.board { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; align-items:start; margin-top:24px; }
.lane { background:color-mix(in srgb, var(--panel) 60%, var(--paper) 40%); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:14px; min-width:0; }
.lane-h { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 2px 12px;
  font:600 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.lane-n { font:600 11px var(--mono); color:var(--ink-3); background:var(--surface); border-radius:var(--r-pill); padding:1px 8px; }
.lane-due .lane-h { color:var(--ink); }
.lane-cards { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.lane-empty { margin:4px 2px 2px; font-size:13px; color:var(--ink-3); }
.bcard { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px;
  border-left:3px solid var(--line-2); display:flex; flex-direction:column; gap:4px; }
.bcard.tone-crit { border-left-color:var(--crit); }
.bcard.tone-warn { border-left-color:var(--warn); }
.lane-progress .bcard { border-left-color:var(--accent-2); }
.lane-published .bcard { border-left-color:var(--ok); }
.bcard p { margin:0; }
.bcard-org { font-size:12px; }
.bcard-org a { color:var(--ink-3); }
.bcard-org a:hover { color:var(--ink); }
.bcard-title { font-size:14px; font-weight:600; line-height:1.3; }
.bcard-title a { color:var(--ink); }
.bcard-title a:hover { color:var(--accent); }
.bcard-due { font-size:12.5px; color:var(--ink-2); }
.bcard-due span { color:var(--ink-3); }
.bcard.tone-crit .bcard-due { color:var(--crit-text); font-weight:600; }
.bcard-note { font-size:12.5px; color:var(--ink-3); line-height:1.4; }
.bcard form, .bcard .btn-ghost { margin-top:6px; align-self:flex-start; }

/* the workspace: a step bar, then the four steps as cards */
.wsteps { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0; margin:24px 0;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.wstep { display:flex; align-items:center; gap:10px; padding:12px 16px; color:var(--ink-3); font-size:13.5px;
  font-weight:500; border-left:1px solid var(--line); background:var(--panel); }
.wstep:first-child { border-left:0; }
.wstep:hover { color:var(--ink); background:var(--hover-wash); }
.wstep-n { width:22px; height:22px; flex:0 0 22px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; font:600 11.5px var(--font-body, var(--sans)); border:1.5px solid var(--line-2); color:var(--ink-3); }
.wstep.is-done { color:var(--ink-2); }
.wstep.is-done .wstep-n { background:var(--ok); border-color:var(--ok); color:var(--paper); }
.wstep.is-now { color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent-2); }
.wstep.is-now .wstep-n { border-color:var(--accent-2); color:var(--accent-2); }
.ws .card { scroll-margin-top:16px; }
.ws-n { display:inline-flex; width:18px; height:18px; border-radius:50%; align-items:center; justify-content:center;
  margin-right:8px; font:600 10.5px var(--font-body, var(--sans)); letter-spacing:0; color:var(--accent-2);
  border:1.5px solid var(--accent-line); vertical-align:-1px; }
.ws-help { font-size:13px; color:var(--ink-3); margin:0 0 12px; }
.card-table > .ws-help { padding:0 var(--card-pad); }
.ws-upload { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin:10px 0 0; }
.ws-upload label { flex:1 1 320px; color:var(--ink); font-weight:500; font-size:13px; }
.ws-upload .opt { color:var(--ink-3); font-weight:400; }
.ws-more { margin-top:12px; }
.ws-more > summary { cursor:pointer; font-size:13px; color:var(--ink-2); }
.ws-more > summary:hover { color:var(--ink); }
.ws-quote { white-space:pre-wrap; font-size:14px; color:var(--ink-2); margin:0; padding:12px 14px;
  border-left:2px solid var(--line-2); background:var(--surface); border-radius:0 var(--r-sm) var(--r-sm) 0; }
.ws-org { color:var(--ink); font-weight:600; font-size:15px; margin:0 0 6px !important; }
.row-muted td { color:var(--ink-3); }
.row-muted .sev-tag { opacity:.55; }

@media (max-width:1280px) {
  .board { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:768px) {
  .board { grid-template-columns:1fr; }
  .wsteps { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .wstep:nth-child(3) { border-left:0; }
  .wstep:nth-child(n+3) { border-top:1px solid var(--line); }
}

/* ---- Support: the conversation; Money: the small term meter ------------------ */
.convo { list-style:none; margin:4px 0 20px; padding:0; display:flex; flex-direction:column; gap:12px; }
.msg { border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 16px; background:var(--panel);
  max-width:86%; }
.msg-them { align-self:flex-start; }
.msg-you { align-self:flex-end; background:color-mix(in srgb, var(--accent) 7%, var(--panel) 93%);
  border-color:var(--accent-line); }
.msg-note { align-self:stretch; max-width:none; border-style:dashed;
  background:color-mix(in srgb, var(--warn) 5%, var(--panel) 95%);
  border-color:color-mix(in srgb, var(--warn) 40%, var(--line) 60%); }
.msg-meta { margin:0 0 6px; font-size:12px; color:var(--ink-3); }
.msg-meta strong { color:var(--ink-2); font-weight:600; }
.msg-body { margin:0; color:var(--ink); font-size:14px; line-height:1.55; white-space:pre-line;
  overflow-wrap:anywhere; }
.reply-form { padding-top:16px; border-top:1px solid var(--line); }
.reply-form > label { color:var(--ink); font-weight:500; font-size:13px; }
.reply-vis { border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px 20px; }
.doclist-stack li { flex-direction:column; align-items:flex-start; gap:2px; }
.term-mini { display:inline-flex; gap:3px; margin-right:6px; vertical-align:1px; }
.term-mini i { width:10px; height:6px; border-radius:2px; background:var(--surface-2); display:block; }
.term-mini i.on { background:var(--accent); }

/* ---- Scope: sites with a stop-testing control, and requests in flight ---------- */
.sites li { display:inline-flex; align-items:center; gap:6px; }
.site-rm .btn-ghost { min-height:0; padding:1px 7px; font-size:11.5px; border-color:transparent; color:var(--ink-3); }
.site-rm .btn-ghost:hover { color:var(--crit-text); }
.scope-reqs { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.scope-reqs li { display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; padding:10px 12px;
  border:1px dashed var(--line-2); border-radius:var(--r); font-size:13.5px; color:var(--ink-2); }
.scope-reqs .cell-sub { margin:0; flex:1 1 auto; }
.site-add { margin:14px 0 6px; }
.board-tools { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:24px 0 0; }
.board-tools + .board { margin-top:16px; }

/* ---- Folded cards (<details class="card fold">): rarely-needed setup, one click away ---- */
.fold > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; }
.fold > summary::-webkit-details-marker { display:none; }
.fold > summary::before { content:""; width:7px; height:7px; border-right:1.5px solid var(--ink-3);
  border-bottom:1.5px solid var(--ink-3); transform:rotate(-45deg); transition:transform var(--dur) var(--ease); }
.fold[open] > summary::before { transform:rotate(45deg); }
.fold > summary .card-eyebrow { margin:0; }
.fold[open] > summary { margin-bottom:14px; }
.app.admin-mode .fold { margin-bottom:16px; }

/* ---- Server-side scanning: the scanner panel in step 1 of a scan ---------------- */
.runbox { margin-top:16px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); }
.runbox-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:10px; }
.runbox-head .card-eyebrow { margin:0; }
.joblist { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.job { display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:12px; align-items:center;
  padding:10px 12px; border-radius:var(--r); background:var(--panel); border:1px solid var(--line); font-size:13px; }
.job-state { font:600 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.job-running .job-state, .job-queued .job-state { color:var(--info-text); }
.job-done .job-state { color:var(--ok-text); }
.job-failed .job-state, .job-stalled .job-state { color:var(--crit-text); }
.job-what { min-width:0; overflow-wrap:anywhere; color:var(--ink); }
/* --- LinkedIn posts (operator console) ------------------------------------------------- */
.li-day { padding:0 0 12px; }
.li-day-h { font-size:var(--t-small); color:var(--ink-3); margin:12px 0 8px; text-transform:uppercase; letter-spacing:.04em; }
.li-post { border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:0 0 10px; background:var(--panel); }
.li-post-head { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin-bottom:6px; }
.li-post-head .cell-sub { margin:0; }
.li-who { font-weight:600; }
.li-text { white-space:pre-line; margin:0 0 8px; max-width:62ch; overflow-wrap:anywhere; }
.li-more { color:var(--ink-3); }
.li-images { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-start; margin:0 0 8px; }
.li-images img, .li-image-row img { border-radius:8px; border:1px solid var(--line); object-fit:cover; }
/* Each preview keeps its image's shape (a landscape screenshot isn't cropped to the portrait
   box its width and height attributes reserve); a very tall one is cut at the bottom. */
.li-images img { height:auto; max-height:240px; }
.li-image-row img { height:auto; max-height:144px; }
.li-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.li-actions form { margin:0; }
.li-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.li-image-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.li-image-row .row-form { margin:0; flex:1 1 320px; }
.li-empty { padding:0; }
.card-table .li-empty { padding:0 var(--card-pad) var(--card-pad); }
.li-stack { flex-direction:column; gap:4px; }
.li-stack p, .li-stack ul { margin:0; }
.li-stack ul { padding-left:18px; }
.li-toolbar { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:0 0 var(--s-4); }
.li-weeknav { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.li-weeknav a[aria-current] { color:var(--ink); font-weight:600; text-decoration:none; }
.li-weekhead { flex-wrap:wrap; row-gap:4px; }
.li-weekhead .card-eyebrow { white-space:nowrap; }
.li-gap { color:var(--ink-3); font-size:var(--t-small); }
.li-over { color:var(--crit-text); }
.li-alt-hint { margin:0; }
/* A fieldset is min-content wide by default; the file picker pushed it past a 320px screen. */
.li-fieldset { min-width:0; }
.li-fieldset input[type=file] { max-width:100%; }

/* === Marketing calendar === */
:root { --net-linkedin:#4F8EE8; --net-tiktok:#5FD9F5; --net-instagram:#F26B9A; --net-facebook:#B59CFF; }
.cal [hidden] { display:none; }
.cal-bar { display:flex; gap:var(--s-3); align-items:center; justify-content:space-between; flex-wrap:wrap; margin:var(--s-4) 0 var(--s-3); }
.cal-nav { display:flex; gap:var(--s-2); align-items:center; }
.cal-title { font-size:var(--t-lg); margin:0 var(--s-2); white-space:nowrap; }
.cal-views { display:flex; gap:2px; border:1px solid var(--line-2); border-radius:var(--r); padding:2px; }
.cal-views a { padding:4px 12px; border-radius:var(--r-sm); color:var(--ink-2); text-decoration:none; font-size:var(--t-small); }
.cal-views a.on { background:var(--accent-soft); color:var(--ink); }
.cal-filters { margin:0 0 var(--s-3); }
.cal-filters > summary { display:none; }
.cal-filters .row-form { margin:0; }
.cal-networks { display:flex; gap:var(--s-2); flex-wrap:wrap; border:0; padding:0; margin:0; min-width:0; }
.cal-networks .chip { flex-direction:row; cursor:pointer; text-transform:none; font-size:var(--t-small); letter-spacing:0; }
.cal-week { display:grid; grid-template-columns:44px repeat(7, minmax(0, 1fr)); grid-template-rows:auto repeat(3, minmax(52px, auto)); gap:4px; }
.cal-day { display:contents; }
.cal-rowlabel { grid-column:1; font:500 10px var(--mono); color:var(--ink-3); text-align:right; padding:3px 6px 0 0; }
.cal-rowlabel:nth-child(1) { grid-row:2; } .cal-rowlabel:nth-child(2) { grid-row:3; } .cal-rowlabel:nth-child(3) { grid-row:4; }
.cal-day:nth-child(4) > * { grid-column:2; } .cal-day:nth-child(5) > * { grid-column:3; }
.cal-day:nth-child(6) > * { grid-column:4; } .cal-day:nth-child(7) > * { grid-column:5; }
.cal-day:nth-child(8) > * { grid-column:6; } .cal-day:nth-child(9) > * { grid-column:7; }
.cal-day:nth-child(10) > * { grid-column:8; }
.cal-dayhead { grid-row:1; margin:0; padding:4px 0 6px; text-align:center; font:500 11px var(--font-body, var(--sans)); color:var(--ink-3); }
.cal-dayhead b { display:block; color:var(--ink); font-size:14px; font-weight:600; }
.cal-day.is-today .cal-dayhead b { color:var(--accent); }
.cal-day.is-picked .cal-dayhead b { text-decoration:underline; text-decoration-color:var(--accent-line); text-underline-offset:4px; }
.cal-slot { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); padding:3px; min-width:0; }
.cal-slot[data-row="morning"] { grid-row:2; } .cal-slot[data-row="midday"] { grid-row:3; } .cal-slot[data-row="evening"] { grid-row:4; }
.cal-day.is-picked .cal-slot { border-color:var(--accent-line); }
.cal-new { display:flex; align-items:center; justify-content:center; min-height:30px; border:1px dashed transparent;
  border-radius:var(--r-sm); color:transparent; font-size:11px; text-decoration:none; }
.cal-slot:hover .cal-new, .cal-new:focus-visible { color:var(--accent); border-color:var(--accent-line); }
.cal-slot.is-empty .cal-new { min-height:44px; }
.cal-dayhead .cal-new-head { display:none; }
.cal-card { position:relative; display:flex; gap:6px; align-items:center; margin:0 0 3px; padding:4px 6px 4px 5px;
  border-left:3px solid var(--ink-3); border-radius:var(--r-sm); background:var(--surface); font-size:11px; line-height:1.25; }
.cal-card[draggable="true"] { cursor:grab; }
.cal-thumb { width:22px; height:22px; flex:0 0 22px; border-radius:4px; object-fit:cover; background:var(--surface-2); }
.cal-thumb-video { background:linear-gradient(135deg, var(--line-2), var(--surface)); }
.cal-card-main { display:block; min-width:0; flex:1 1 auto; color:var(--ink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-card-main small { display:block; overflow:hidden; text-overflow:ellipsis; color:var(--ink-3); font-size:10px; }
.net { flex:0 0 auto; padding:0 4px; border-radius:3px; font:700 10px var(--mono); color:var(--paper); background:var(--ink-3); }
.net-linkedin { background:var(--net-linkedin); } .net-tiktok { background:var(--net-tiktok); }
.net-instagram { background:var(--net-instagram); } .net-facebook { background:var(--net-facebook); }
.cal-move { position:absolute; right:4px; bottom:2px; padding:0 4px; border-radius:4px; background:var(--surface-2);
  font-size:10px; color:var(--ink-2); opacity:0; }
.cal-card:hover .cal-move, .cal-card:focus-within .cal-move { opacity:1; }
.cal-s-draft { border-color:var(--ink-3); }
.cal-s-approved, .cal-s-publishing { border-color:var(--accent); }
.cal-s-published { border-color:var(--ok); }
.cal-s-failed, .cal-s-unknown { border-color:var(--crit); background:color-mix(in srgb, var(--crit) 12%, var(--surface) 88%); }
.cal-s-missed { border-color:var(--warn); }
.cal-s-cancelled { border-color:var(--ink-3); opacity:.5; }
.cal-month { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; }
.cal-mhead { padding:4px 0; text-align:center; font:500 11px var(--font-body, var(--sans)); color:var(--ink-3); }
.cal-md { display:flex; flex-direction:column; gap:4px; min-height:64px; padding:4px 6px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-sm); color:var(--ink-2); font-size:var(--t-micro); text-decoration:none; }
.cal-md:hover, .cal-md:focus-visible { border-color:var(--accent-line); color:var(--ink); }
.cal-md.is-out { opacity:.45; }
.cal-md.is-today { border-color:var(--accent); }
.cal-dots { display:flex; gap:3px; flex-wrap:wrap; align-items:center; }
.cal-dot { width:9px; height:9px; border-radius:50%; background:var(--ink-3); border:0; }
.cal-dot.cal-s-approved, .cal-dot.cal-s-publishing { background:var(--accent); }
.cal-dot.cal-s-published { background:var(--ok); }
.cal-dot.cal-s-failed, .cal-dot.cal-s-unknown { background:var(--crit); }
.cal-dot.cal-s-missed { background:var(--warn); }
.cal-more { font-size:10px; color:var(--ink-3); }
.cal-slot.is-over { border-color:var(--accent); background:var(--accent-soft); }
.cal-card.is-dragging { opacity:.55; cursor:grabbing; }
[data-cal-problems] { margin:var(--s-3) 0 0; }
[data-cal-problems]:focus { outline:2px solid var(--focus-ring); outline-offset:2px; }
.cal-move-card { max-width:420px; margin:0 0 var(--s-4); }
.cal-move-page .row-form label { flex:0 1 180px; }
.cal-move-page .row-form .inp, .cal-filters .row-form .inp { flex:0 0 auto; }
.cal-key { display:flex; gap:var(--s-2) var(--s-4); flex-wrap:wrap; list-style:none; margin:var(--s-3) 0 0; padding:0; font-size:11px; color:var(--ink-3); }
.cal-key i { display:inline-block; width:10px; height:10px; margin-right:4px; vertical-align:-1px; border-left:3px solid var(--ink-3);
  border-radius:2px; background:var(--surface); }
.cal-key i.cal-s-approved { border-left-color:var(--accent); }
.cal-key i.cal-s-published { border-left-color:var(--ok); }
.cal-key i.cal-s-missed { border-left-color:var(--warn); }
.cal-key i.cal-s-failed { border-left-color:var(--crit); }
.cal-key i.cal-s-cancelled { opacity:.5; }
/* Phone (the spec's 720px, not the 768px the sidebar uses): the week is a list of days, each
   with the rows that have posts in them. Nothing is dragged on touch, so the Move link is
   always there, and the one "+ New post" per day sits in the day's heading. */
@media (max-width:720px) {
  .cal-week { display:block; }
  .cal-day { display:block; margin-bottom:var(--s-4); }
  .cal-rowlabel { display:none; }
  .cal-dayhead { display:flex; align-items:center; gap:var(--s-2); margin:0 0 var(--s-2); padding:0 0 var(--s-2);
    border-bottom:1px solid var(--line); text-align:left; font-size:var(--t-md); color:var(--ink-2); }
  .cal-dayhead b { display:inline; font-size:var(--t-lg); }
  .cal-dayhead .cal-new-head { display:inline-flex; margin-left:auto; min-height:32px; padding:0 var(--s-3);
    color:var(--accent); border-color:var(--accent-line); }
  .cal-slot { margin:0 0 var(--s-2); }
  .cal-slot::before { content:attr(data-label); display:block; margin:0 0 3px; font:500 10px var(--mono);
    letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
  .cal-slot.is-empty { display:none; }
  .cal-slot .cal-new { display:none; }
  .cal-card { padding:8px 8px 8px 6px; font-size:12px; }
  .cal-card-main { white-space:normal; }
  .cal-move { position:static; opacity:1; padding:4px 8px; font-size:11px; }
  .cal-filters > summary { display:list-item; cursor:pointer; padding:var(--s-2) 0; color:var(--ink-2); font-size:var(--t-small); }
  .cal-md { min-height:44px; padding:3px; }
  .cal-dot { width:6px; height:6px; }
  .cal-dots { gap:2px; }
}
.li-scroll { overflow-x:auto; position:relative; }
.li-scroll > .data-table th:first-child, .li-scroll > .data-table td:first-child { padding-left:var(--card-pad); }
.li-scroll > .data-table th:last-child, .li-scroll > .data-table td:last-child { padding-right:var(--card-pad); }

/* --- Marketing media library --- */
.media-grid { list-style:none; margin:0; padding:0; display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
.media-item { display:flex; flex-direction:column; gap:6px; padding:var(--s-3); border:1px solid var(--line); border-radius:10px; background:var(--panel); min-width:0; }
.media-pic { position:relative; }
.media-thumb { display:block; width:100%; height:160px; object-fit:cover; border-radius:8px; border:1px solid var(--line); background:var(--line); }
.media-duration { position:absolute; right:6px; bottom:6px; padding:1px 6px; border-radius:6px; font-size:var(--t-small); background:rgba(0,0,0,.7); color:#fff; font-variant-numeric:tabular-nums; }
.media-name { margin:0; font-weight:600; overflow-wrap:anywhere; }
.media-meta { margin:0; font-size:var(--t-small); color:var(--ink-3); overflow-wrap:anywhere; }
.media-item .row-form, .media-item form { margin:0; }
.upload-log { list-style:none; margin:var(--s-3) 0 0; padding:0; font-size:var(--t-small); color:var(--ink-2); }
.upload-log:empty { display:none; }

/* --- marketing composer (cx-) and previews (pv-) --- */
.cx-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:14px; align-items:start; }
.cx-main, .cx-preview { min-width:0; }
.cx-preview { position:sticky; top:var(--s-4); }
.cx-form [hidden] { display:none; }
.cx-chips { display:flex; gap:var(--s-2); flex-wrap:wrap; }
.cx-chip { display:inline-flex; align-items:center; gap:6px; cursor:pointer; position:relative; }
.cx-chip input { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.cx-chip span { border:1px solid var(--line-2); border-radius:var(--r-pill); padding:4px 12px; font-size:var(--t-small); color:var(--ink-2); background:var(--panel); }
.cx-chip input:checked + span { color:var(--ink); border-color:var(--accent); background:var(--accent-soft); }
.cx-chip input:checked + span::before { content:"\2713  "; color:var(--accent); }
.cx-chip input:disabled + span { opacity:.45; cursor:not-allowed; }
.cx-chip input:focus-visible + span { outline:2px solid var(--focus-ring); outline-offset:2px; }
.cx-chip small { color:var(--ink-3); font-size:11px; }
.cx-media-list { display:flex; flex-direction:column; gap:var(--s-3); }
.cx-media { display:flex; gap:var(--s-3); align-items:flex-start; padding:var(--s-3); border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
.cx-media.cx-dropped { opacity:.45; }
.cx-thumb { width:64px; height:64px; flex:0 0 64px; object-fit:cover; border-radius:8px; border:1px solid var(--line-2); background:var(--surface-2); }
.cx-minfo { display:flex; flex-direction:column; gap:4px; flex:1 1 auto; min-width:0; font-size:var(--t-small); color:var(--ink-2); }
.cx-minfo b { color:var(--ink); overflow-wrap:anywhere; }
.cx-minfo input[type=range] { width:100%; max-width:260px; }
.cx-drop { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:var(--t-small); color:var(--ink-3); }
.cx-drop input { flex:0 0 auto; width:auto; margin:0; }
.cx-who { font-size:var(--t-small); color:var(--ink-3); }
.cx-picker { margin:var(--s-3) 0; }
.cx-picker summary { cursor:pointer; color:var(--ink-2); font-size:var(--t-small); }
.cx-picker-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); gap:var(--s-2); margin-top:var(--s-2); }
.cx-pick { position:relative; display:flex; align-items:center; justify-content:center; min-height:72px; padding:4px; border:1px solid var(--line); border-radius:var(--r); cursor:pointer; font-size:11px; color:var(--ink-2); text-align:center; }
.cx-pick:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
.cx-pick input { position:absolute; top:4px; left:4px; }
.cx-form input[type=file] { max-width:100%; }
.cx-upload-note { margin:var(--s-2) 0 0; font-size:var(--t-small); color:var(--crit-text); }
.cx-upload-note:empty { display:none; }
.cx-nettabs, .cx-prevtabs { display:flex; gap:4px; flex-wrap:wrap; margin:0 0 var(--s-2); }
.cx-prevtabs { justify-content:center; margin-bottom:var(--s-3); }
.cx-tab, .cx-prevtab { padding:4px 10px; border:1px solid var(--line-2); border-radius:6px; background:var(--paper); color:var(--ink-3); font:inherit; font-size:11.5px; cursor:pointer; }
.cx-tab.on { color:var(--ink); border-color:var(--accent-2); background:color-mix(in srgb, var(--accent-2) 10%, var(--panel) 90%); }
.cx-tab.has-own::after { content:" \2022"; color:var(--accent); }
.cx-prevtab { border-radius:var(--r-pill); }
.cx-prevtab.on { color:var(--ink); border-color:var(--accent); background:var(--accent-soft); }
.cx-body { width:100%; min-height:120px; line-height:1.45; resize:vertical; }
.cx-own { margin:var(--s-2) 0; }
.cx-own summary { cursor:pointer; color:var(--ink-2); font-size:var(--t-small); }
.cx-counter { display:block; margin:6px 0 0; font-size:11px; color:var(--ink-3); }
.cx-counter b { color:var(--ink); font-weight:500; }
.cx-counter.cx-over, .cx-alt-hint.cx-over { color:var(--crit-text); }
.cx-net { margin:0 0 var(--s-4); padding:var(--card-pad); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); }
.cx-field { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); padding:7px 0; border-top:1px solid var(--line); }
.cx-field:first-of-type { border-top:0; }
.cx-field .lbl { flex:1 1 140px; }
.cx-field .hint { flex:1 1 100%; margin:0; }
.cx-req, .cx-stale { color:var(--warn-text); font-size:11px; }
.cx-when { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); }
.cx-hint { font-size:11px; color:var(--ok-text); }
.cx-checks { margin:0; padding:0; list-style:none; font-size:var(--t-small); line-height:1.7; }
.cx-checks li.ok::before { content:"\2713  "; color:var(--ok-text); }
.cx-checks li.bad::before { content:"\2715  "; color:var(--crit-text); }
.cx-checks li.cx-wait { color:var(--ink-3); }
.cx-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--s-2); margin:0 0 var(--s-4); }
.cx-actions .hint { margin:0 auto 0 0; }
.cx-previewnote { text-align:center; }
.pv-phone { position:relative; max-width:272px; margin:0 auto; aspect-ratio:9/16; overflow:hidden; border:6px solid var(--line); border-radius:26px; background:#000; }
.pv-phone .pv-media { position:absolute; inset:0; }
.pv-video { display:block; width:100%; height:100%; object-fit:cover; }
.pv-screen { width:100%; height:100%; background:linear-gradient(180deg, var(--surface-2), #000); }
.pv-overlay { position:absolute; left:14px; right:14px; top:34%; text-align:center; font:700 15px/1.2 var(--heading); color:#fff; text-shadow:0 2px 0 #000, 0 0 6px #000; }
.pv-caption { position:absolute; left:10px; right:52px; bottom:26px; margin:0; font-size:10.5px; line-height:1.35; color:#fff; text-shadow:0 1px 2px #000; }
.pv-handle { display:block; margin-bottom:3px; }
.pv-sound { position:absolute; left:10px; bottom:10px; margin:0; font-size:9.5px; color:#fff; opacity:.85; }
.pv-phone .pv-more { color:#fff; opacity:.7; }
.pv-feed, .pv-page, .pv-linkedin { overflow:hidden; border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--paper); color:var(--ink); font-size:12px; }
.pv-head { display:flex; align-items:center; gap:8px; padding:8px 10px; }
.pv-avatar { flex:0 0 24px; width:24px; height:24px; border-radius:50%; background:var(--grad); }
.pv-45 { position:relative; aspect-ratio:4/5; background:#000; }
.pv-45 .pv-media { position:absolute; inset:0; }
.pv-dots { position:absolute; left:0; right:0; bottom:6px; text-align:center; font-size:8px; letter-spacing:2px; color:#fff; opacity:.85; }
.pv-cap, .pv-text { margin:0; padding:6px 10px 12px; line-height:1.4; white-space:pre-wrap; overflow-wrap:anywhere; }
.pv-pics { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:2px; }
.pv-pics:empty { display:none; }
.pv-pics > :only-child { grid-column:1 / -1; }
.pv-img { display:block; width:100%; height:auto; }
.pv-link { margin:0 10px 10px; padding:8px; border:1px solid var(--line); border-radius:var(--r); font-size:11px; color:var(--ink-2); overflow-wrap:anywhere; }
.pv-more { color:var(--ink-3); }
[data-cx-off] { display:none; }
.cx-form [data-cx-off] { display:none; }
/* Phone: the preview stacks under the form (below the sidebar's 768px: the spec's 720px). */
@media (max-width:1000px) {
  .cx-layout { grid-template-columns:1fr; }
  .cx-preview { position:static; }
}
@media (max-width:720px) {
  .cx-layout { grid-template-columns:1fr; }
  .cx-media { flex-direction:column; }
  .cx-field .inp { flex:1 1 100%; }
  .cx-actions { justify-content:stretch; }
  .cx-actions .btn, .cx-actions .btn-ghost { flex:1 1 auto; }
}