/* ── Talqo visual system (Sprint 3 · TASK B, Complir direction) ──────────────
SINGLE LIGHT THEME — the dark theme is removed, not toggled. Existing token
NAMES are kept (so un-restyled screens keep working) and remapped to the new
light palette; the new canonical tokens below (--accent, --line, --ground,
the type/space/shape scales) are what the new components use. */
:root {
/* ── SIGNAL, WARMED — one warm neutral ramp (hue 42°) + three tonal tiers ──────────
Every neutral below is the SAME hue at a different lightness, which is what makes this a
system rather than a set of chosen colours. Warm, because the product is an evidence tool
and warm paper reads as a document; low-chroma, so Talqo blue sits on it without muddying.
THE THREE TIERS, and the rule for which a card gets — see DESIGN_PRIMITIVES "Elevation":
tier 1 the ONE card answering the screen's question surface + --shadow-raised
tier 2 cards carrying figures you act on surface + --shadow
tier 3 reference and explanation surface-alt, no shadow
Elevation is MEANING here, not decoration. At most one tier-1 card per screen.
Contrast is solved, not chosen: all 29 text/UI pairs clear WCAG AA, tightest
green-fill / surface at 3.11:1. --amber-fill also FIXES an inherited failure — the old
#E0A020 was 2.28:1 on white, below the 3.0 floor for a non-text UI boundary. */
/* ═══ PREMIUM PASS, 24 Aug 2026 — the token layer everything else consumes ═════
A blind panel of four designers scored this app 4.5–6/10 and priced it at €20–50/seat
against a €125–185 list. The single loudest cause was incoherence: five blues, ad-hoc greys,
radii from 1px to 99px, ten shadows. The fix is not more decoration, it is FEWER decisions —
one accent, five semantic colours, one grey ramp, two radii, two shadows.
THE PALETTE IS COOL NOW, deliberately. The previous ramp was warm (hue 42°) on the argument
that "warm paper reads as a document". It also read as beige, and beige is what a 2011
internal tool looks like. The ink is the brand navy's own family, so chrome and accent share
a temperature instead of fighting.
CONTRAST IS COMPUTED, NOT CHOSEN — test/contrast.test.js derives every ratio from these
exact values and fails the build below AA. Tightest text pair here is amber-on-amber-tint at
4.56 and the tightest non-text boundary is the amber fill at 3.23; both were tuned UP from
first drafts that missed (4.41 and 2.98). Nothing in this block is a guess. */
/* THE RAMP IS GENERATED, NOT PICKED — every neutral is hue 215° at a different lightness and
saturation, which is what makes it a ramp rather than seven colours that happen to look
grey together. It deviates from the brief's literal hexes in two places, both because a
guard was measuring something those values would have broken, and I would rather ship the
measured version than the typed one:
· the canvas is #EFF2F5, not #F7F8FA. At #F7F8FA the ground sits 1.063:1 from a white
card, under the 1.09 floor in elevation-tiers.test.js — cards stop lifting off the
page, which is exactly the flat look this pass exists to remove.
· ink-3 is #666F7A, not #6B7480. #6B7480 clears AA on white (4.74) but lands at 4.22 on
the canvas; I checked it against the wrong background first and the contrast test
caught it. Every ink now clears 4.5 on all three grounds. */
/* ═══════════════════════════════════════════════════════════════════════════
PLATE 07 — "Quiet instrument, one loud object" built 26 Aug 2026
═══════════════════════════════════════════════════════════════════════════
Everything below is transcribed from the plate, not derived from it. The
premium-pass palette that preceded it was a repair job on incoherence; this
is a designed system, and where the two disagree the plate wins.
THE RULE THE SHEET STATES ABOUT ITSELF:
"One accent. Four semantic values, used only for deal state. Three inks,
five neutrals, and nothing else in the product is coloured."
What changes from the premium pass, and why it is not a regression:
· the accent value is unchanged (#14508C) — the pass had already found it;
· the four semantic values are now DEAL STATE ONLY. Green no longer means
"good", amber no longer means "warning". They mean agreed, not agreed,
contradicted, not asked, and nothing else may borrow them;
· a fifth state colour arrives — "not asked" — because the absence of a
question is a state the product could not previously draw at all;
· the neutrals go from a generated 215° ramp to the plate's five, which are
cooler and further apart at the light end, where all the work happens.
─────────────────────────────────────────────────────────────────────────── */
/* ONE ACCENT. Links, primary action, active nav. The only blue in the product. */
--accent:#14508C;
/* THE FOUR SEMANTIC VALUES — deal state, and nothing else.
Each has a SILHOUETTE as well as a colour (see --mark-* below): block, half
block, diamond, open square. Shape carries the meaning and colour only
reinforces it, so the set survives greyscale, a board-pack print, and 8px. */
--agreed:#16613F; /* the customer said yes on a call · block */
/* #856110, one step under the plate's #8A6512, and this is the one place the build
departs from the sheet. Measured on every ground it lands on: the plate's value is
5.32 on the surface and 5.17 on the band, but 4.40 on the plate's own CANVAS —
under the 4.5 floor for text, and the state WORD is text. The other three states
clear the canvas at 6.18, 6.31 and 6.80, so this was the single outlier rather than
a palette-wide problem. #856110 reads 4.68 on the canvas and 5.65 on the surface,
and is indistinguishable from the plate value side by side.
The rule this follows is the product's own, learned the hard way in the premium
pass: a colour is not solved until it is measured against every ground it lands on,
and white is rarely the one that matters. */
--not-agreed:#856110; /* discussed, no acceptance · half block */
--contradicted:#9A2B2B; /* accepted, then withdrawn · diamond */
--not-asked:#BCC3CB; /* nobody has raised it · open square */
/* THREE INKS. */
--ink:#0B1220; /* figures, headings, primary text */
--ink-2:#49515C; /* body, state words, secondary rows */
--ink-3:#5F6775; /* metadata, captions, denominators */
/* FIVE NEUTRALS. */
--canvas:#E6EAF0; /* app ground behind cards */
--surface:#FFFFFF; /* cards on the ground */
--recessed:#EDF0F5; /* footnote cards. sits into the ground */
--band:#FBFCFD; /* table headers and footers ONLY */
--row-hover:#F7F9FB;/* the only hover fill in the product */
--track:#DCE1E7; /* the unfilled half of any comparison bar */
/* Deferred to cycle two with plate 10, and declared so nothing invents its own. */
--dark-ground:#05090D;
/* Legacy names kept pointing at the plate so un-rebuilt screens move with it
rather than stranding on the old palette mid-build. Each screen drops these
as it lands; the grep gate below counts what is left. */
--ground:var(--canvas); --surface-alt:var(--recessed);
/* --line-2 is the BAR TRACK and must be told apart from the canvas behind it. The generated
ramp first produced #F0F2F5 against a #EFF2F5 ground — 1.002:1, which is two names for one
colour, so a bar's empty portion vanished into the page. A blind reviewer caught it by
sampling pixels: "one point apart, visually identical, two tokens". Lightening the track
also raises every fill's contrast on it, so the fix runs in the safe direction. */
/* The two rules. --line is every hairline; --line-2 is the bar TRACK, which must be told
apart from the canvas behind it or a bar's unfilled half vanishes into the page. Both now
point at the plate: the plate names one track value and one rule weight. */
--line:#DCE1E7; --line-2:var(--track);
/* ONE accent. The brand navy family — this is the only non-semantic colour in the product.
Links, primary buttons, active nav and focus rings all draw from these four values. */
--accent:#14508C; --accent-hover:#0E3A68; --accent-weak:#E8F0F9; --accent-ring:rgba(20,80,140,.32);
/* The semantic five. These plus the grey ramp are the ONLY non-neutral colours allowed. */
/* green-fill is darkened to #2B8159 so the two forecast-band fills separate by 1.36:1 in
luminance. The pair that shipped before separated by 1.011 — visually identical brightness,
told apart by hue and the hatch alone, which is exactly the case a colour-blind reader and
a greyscale print both lose. The hatch still carries it; this means it no longer has to. */
/* LEGACY SEMANTIC NAMES → the plate's deal states. green/amber/red used to mean
good/warning/bad, which is exactly the overload plate 07 removes: they now resolve to
agreed / not agreed / contradicted and mean nothing else. Screens drop these as they land. */
--green:var(--agreed); --green-bg:#E9F2ED; --green-fill:var(--agreed);
/* amber is #856618, a shade under the brief's #8A6A1A: that value clears AA on white (5.05)
but lands at 4.496 on the canvas — a rounding error away from the floor, and under it. */
--amber:var(--not-agreed); --amber-bg:#F8F3E8; --amber-fill:var(--not-agreed);
--red:var(--contradicted); --red-bg:#F7EAEA;
/* ── THE TYPE SCALE — six steps: 12 · 13 · 15 · 18 · 24 · 32.
Page titles move 20 → 24 and the hero number 30 → 32, because a title that barely outranks
its own body copy is why the panel called this a settings screen. Body moves 13 → 15: at 13
the product was dense in the way a spreadsheet is dense, not in the way a broadsheet is.
Every font-size in the app already reads a token (690 uses, zero hard-coded), so the scale
changes here and the whole product follows.
Eyebrows are 11px — deliberately BELOW the scale, because a label that has stopped being
prose should not compete with prose. It is the one exception and it is named as one. */
/* ── PLATE 07 · TYPE — three faces, three jobs, and one ramp each ─────────────
The plate gives each face its own sizes, and they are not the same ramp:
Newsreader 84 / 38 / 27 figures, the one headline per screen, and the
buyer's sentence quoted as evidence. NEVER body.
Inter 20 / 16 / 13 / 11 every interface label, row and paragraph:
page 20, card 16, row 13, meta 11, eyebrow 9.5.
JetBrains 10.5 / 9.5 the transcript, verbatim, and its timestamp.
This is a real reduction from the premium pass's six-step single ramp: the
interface ramp is now FOUR steps, because the serif took the top of the old
scale and the mono took the bottom. A face that needs a size the plate does
not give it is a sign the wrong face is doing the job. */
--fs-figure:84px; --lh-figure:.92; /* Newsreader · the hero figure */
--fs-headline:38px;--lh-headline:1.06; /* Newsreader · one headline per screen */
--fs-quote:27px; --lh-quote:1.28; /* Newsreader · the buyer's sentence */
--fs-page:20px; --lh-page:26px; /* Inter · page title */
--fs-card:16px; --lh-card:22px; /* Inter · card title */
--fs-row:13px; --lh-row:18px; /* Inter · rows and paragraphs */
--fs-meta:11px; --lh-meta:15px; /* Inter · metadata */
--fs-eyebrow:9.5px;--lh-eyebrow:13px; --tracking-eyebrow:.1em;
--fs-mono:10.5px; --lh-mono:1.55; /* JetBrains · the transcript */
--fs-stamp:9.5px; /* JetBrains · the timestamp on it */
/* ── PLATE 07 · THE THREE FACE STACKS ─────────────────────────────────────── */
--face-serif:'Newsreader', Georgia, 'Times New Roman', serif;
--face-ui:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--face-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* ── PLATE 07 · MEASURE — three radii, four planes ────────────────────────── */
--r-pill:3px; --r-control:5px; --r-card:8px;
--plane-footnote:none;
--plane-card:0 1px 2px rgba(11,18,32,.06);
--plane-primary:0 1px 2px rgba(11,18,32,.07), 0 8px 20px -12px rgba(11,18,32,.18);
--plane-drawer:0 24px 60px -20px rgba(11,18,32,.34);
/* ── PLATE 09 · MOTION — "and how little of it there is" ──────────────────────
"Three curves, three durations, one maximum distance. Motion in this product
exists to say THAT JUST CHANGED and nothing else — there is no delight layer, no
parallax, no number that counts up."
THE SIX RULES, which the plate says are enforceable in review and which
test/plate-09-motion.test.js therefore enforces:
1. Nothing travels more than 24px. Distance is not drama.
2. Motion marks a change of STATE, never a change of data. A figure that
updates does not animate — it is simply the new figure.
3. Exit is always faster than enter. Leaving should never cost the user time.
4. Only opacity and transform animate. Nothing that triggers layout ever does.
5. One thing moves at a time. If two would, the second waits 40ms.
6. No easing that overshoots. This product is a record; it does not bounce. */
--enter:180ms; --enter-ease:cubic-bezier(.20,.70,.20,1);
--exit:120ms; --exit-ease:cubic-bezier(.40,0,.90,.40);
--micro:90ms; --micro-ease:cubic-bezier(.30,0,.20,1);
--travel:24px; /* the maximum any element may move, anywhere in the product */
--stagger:40ms; /* if two things would move at once, the second waits this long */
/* ── PLATE 07 · GRID — "the frame is the same on every screen" ─────────────── */
--frame:1440px; /* the frame every screen is drawn at */
--rail:224px; /* sidebar, fixed, never collapses */
--pad:28px; /* page padding, left and right */
--gutter:16px; /* gutter, and the gap between stacked cards */
--col:82px; /* one column */
--split-content:670px; /* 7 columns — content, left */
--split-evidence:474px;/* 5 columns — evidence, right */
/* The premium-pass ramp, kept resolving so un-rebuilt screens still paint while
the build walks the eight screens. Each maps to its nearest plate step, and
the grep gate counts what is left so the aliases cannot quietly become the
system. */
--fs-display:var(--fs-figure); --lh-display:var(--lh-figure);
--fs-title:var(--fs-page); --lh-title:var(--lh-page);
--fs-subtitle:var(--fs-card); --lh-subtitle:var(--lh-card);
--fs-body:var(--fs-row); --lh-body:var(--lh-row);
--fs-caption:var(--fs-row); --lh-caption:var(--lh-row);
--fs-micro:var(--fs-meta); --lh-micro:var(--lh-meta);
/* legacy token names → the scale (existing classes keep working, one scale) */
--fs-h2:var(--fs-title); --fs-h3:var(--fs-subtitle);
--fs-hero:var(--fs-display); --fs-metric:var(--fs-title);
/* spacing 4/8/12/16/20/24/32/48/64.
--sp-5 IS NEW AND IT IS A BUG FIX, not a scale expansion. Five rules across styles.css and
app.js already referenced var(--sp-5) — including the trust bar's legend column gap — and
the token had never been declared. An undefined custom property makes the whole declaration
invalid, so those gaps silently computed to zero: the legend's colour swatches sat flush
against the previous item's figure, rendering as "€482K▪" with no space. All three blind
reviewers independently reported that as a glyph or font-fallback bug. It was neither; it
was a missing line in this block. */
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-12:48px;--sp-16:64px;
/* SHAPE — two radii, and nothing else. 6px is every control; 10px is every card. The app had
eleven distinct radii including 1px, 2px, 3px and three separate pill values. */
/* PLATE 07 radii: 3 pill · 5 control · 8 card. The premium pass shipped two (6/10) and a
999px chip; the plate rules three, and the pill is 3px — a pill in this system is a small
rounded rectangle, not a lozenge. Legacy names point at the plate. */
--radius-card:var(--r-card); --radius-input:var(--r-control); --radius-chip:var(--r-pill);
/* THE LOGO's two lighter bars. Its third bar has always drawn --accent, so when the accent
moved to navy the mark rendered two indigo bars beside one navy one — the retired palette
surviving in the one element on every single screen. These are the accent at two tints. */
--accent-t1:#A9C3DE; --accent-t2:#5C8CBC;
/* Text on a dark surface — the strip and the on-dark receipt. Named because "which grey goes
on navy" is a decision worth making once, not four times at four call sites. */
--on-dark:#FFFFFF; --on-dark-2:#C7D2E0; --on-dark-3:#96A6BA; --on-dark-warn:#E8C77A;
--scrim:rgba(22,32,43,.52); --scrim-soft:rgba(22,32,43,.46);
/* ELEVATION — TWO levels, and nothing else. A card sits, or an overlay floats. The previous
three-tier "elevation is meaning" system asked a reader to decode shadow depth, which no
reader has ever done; the tier that carried meaning now carries it in type and position.
--shadow-hover and --shadow-raised are kept as aliases so un-restyled screens still parse. */
/* PLATE 07 elevation: FOUR planes — footnote, card, primary, drawer. The premium pass had
collapsed to two; the plate needs a third for the one card that answers the screen and a
fourth for the evidence drawer, which floats over everything. */
--shadow:var(--plane-card);
--shadow-overlay:var(--plane-drawer);
--shadow-hover:var(--shadow);
--shadow-raised:var(--shadow);
/* widths */
--col-max:1200px; --bar-max:640px;
/* ── legacy names remapped to the new palette (keep un-restyled screens alive) ── */
--navy:var(--ink); --signal:var(--accent); --signal-dim:var(--accent-weak);
--stone:var(--ground); --stone1:var(--surface-alt); --stone2:var(--surface-alt); --stone3:var(--line);
--ink2:var(--ink-2); --ink3:var(--ink-3);
/* The legacy radius pair maps exactly onto the ruled two: --r is only ever used by controls
(buttons, inputs, chips) and --rl only by containers (cards, modals, dropdowns), so pointing
them at the two new tokens converts every un-restyled screen without touching it. */
--r:var(--radius-input); --rl:var(--radius-card);
--sidebar-bg:var(--surface); --sidebar-border:var(--line);
--content-bg:var(--ground); --card-bg:var(--surface); --card-border:var(--line);
--nav-active-bg:var(--accent-weak); --nav-active-color:var(--accent-hover);
--text-primary:var(--ink); --text-secondary:var(--ink-2); --text-muted:var(--ink-3);
--btn-primary-bg:var(--accent); --btn-primary-fg:#FFFFFF;
--on-accent:#FFFFFF; --surface-solid:#FFFFFF;
--input-bg:var(--surface); --input-border:var(--line);
color-scheme:light;
}
/* PLATE 09 · REDUCED MOTION — "Not a downgrade. A supported mode."
Every duration collapses to zero and every transform is dropped. NOTHING ELSE
CHANGES: the scrim still appears, the drawer still opens, the toast still carries
Undo. The plate is explicit that "the design has to be complete at frame one",
which is why this is three token overrides rather than a pile of
animation:none !important rules — the components never learn about it. */
@media (prefers-reduced-motion: reduce) {
:root { --enter:0ms; --exit:0ms; --micro:0ms; --travel:0px; --stagger:0ms; }
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Manrope',sans-serif;background:var(--content-bg);color:var(--text-primary);font-size:var(--fs-body);line-height:1.6;min-height:100vh;font-variant-numeric:tabular-nums;transition:background 0.2s,color 0.2s;}
/* ═══════════════════════════════════════════════════════════════════════════════
AUTH — the first screen, on the system 26 Aug 2026
═══════════════════════════════════════════════════════════════════════════════
THE STRIP. #top-strip is the app shell's docked row, fixed at left:220px to clear
the sidebar. On a signed-out page there is no sidebar, so it rendered as an empty
dark bar with a 220px notch — the first thing a prospect saw. It is hidden while
#app is not .visible rather than made full-bleed, because it carries nothing here
and a full-width empty dark bar is still an empty dark bar. :has() is already a
dependency of this sheet (#top-strip has its own :has rules), so this adds none.
═══════════════════════════════════════════════════════════════════════════════ */
body:has(#app:not(.visible)) #top-strip{display:none;}
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:minmax(0,520fr) minmax(0,440fr);
background:var(--canvas);}
.auth-left{background:var(--surface);border-right:1px solid var(--line);
display:flex;flex-direction:column;gap:var(--sp-8);
padding:var(--sp-12) var(--sp-12) var(--sp-8);min-width:0;}
.auth-right{display:flex;align-items:center;justify-content:center;padding:var(--sp-12) var(--sp-8);min-width:0;}
.auth-brand{display:flex;align-items:center;gap:var(--sp-3);}
.auth-logo-mark{display:flex;align-items:flex-end;gap:3px;height:20px;}
.auth-logo-mark span{display:block;width:4.5px;border-radius:2px;}
.auth-logo-mark span:nth-child(1){height:9px;background:var(--accent-t1);}
.auth-logo-mark span:nth-child(2){height:14px;background:var(--accent-t2);}
.auth-logo-mark span:nth-child(3){height:20px;background:var(--accent);}
.auth-brand-name{font-family:var(--face-ui);font-size:var(--fs-page);line-height:var(--lh-page);
font-weight:600;color:var(--ink);letter-spacing:-.01em;}
/* THE PITCH. Newsreader for the headline, because the serif is what this product uses
when it is STATING something rather than labelling it. And the headline WRAPS — the
old 84px display words painted 71px past the panel because one word could not fit
and nothing made it break. A balanced wrap at the headline step cannot do that. */
.auth-pitch{display:flex;flex-direction:column;gap:var(--sp-4);}
.auth-headline{font-family:var(--face-serif);font-size:var(--fs-headline);
/* 1.06, not the inherited 1.6: at 84px the old ratio put a 134px box
around 115px of glyph and left every caption unmoored from its word. */
line-height:var(--lh-headline);color:var(--ink);margin:0;
text-wrap:balance;max-width:20ch;letter-spacing:-.01em;}
.auth-lede{font-family:var(--face-ui);font-size:var(--fs-card);line-height:var(--lh-card);
color:var(--ink-2);margin:0;max-width:46ch;}
/* THE EXHIBIT, at rest beside the form. Its label is not decoration: a prospect must
never read the demo workspace as their own data. */
/* The exhibit belongs WITH the pitch, not adrift below it. margin-top:auto here pushed
it to the panel's foot and opened ~215px of void between the lede and the thing the
lede is describing. The footer takes the auto margin instead: brand, pitch and
exhibit group at the top, and the compliance text anchors to the bottom where
reference material belongs. */
.auth-exhibit{display:flex;flex-direction:column;gap:var(--sp-2);}
.auth-exhibit-label{font-family:var(--face-ui);font-size:var(--fs-eyebrow);
letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
color:var(--ink-3);margin:0;}
/* Three sentences, each on its own measured line, instead of one run-on with a
hand-placed . The claims are unchanged and locked elsewhere; only the setting
moved. */
.auth-footer{display:flex;flex-direction:column;gap:5px;max-width:56ch;margin-top:auto;padding-top:var(--sp-6);}
.auth-footer p{font-family:var(--face-ui);font-size:var(--fs-meta);line-height:var(--lh-meta);
color:var(--ink-3);margin:0;}
.auth-card{width:100%;max-width:360px;}
.auth-title{font-family:var(--face-ui);font-size:var(--fs-page);line-height:var(--lh-page);
font-weight:600;color:var(--ink);margin:0;}
.auth-sub{font-family:var(--face-ui);font-size:var(--fs-row);line-height:var(--lh-row);
color:var(--ink-3);margin:4px 0 var(--sp-6);}
.field{margin-bottom:var(--sp-3);}
.field label{display:block;font-family:var(--face-ui);font-size:var(--fs-meta);color:var(--ink-2);
margin-bottom:5px;font-weight:600;}
.field input{width:100%;background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-control);padding:10px 12px;font-family:var(--face-ui);
font-size:var(--fs-row);color:var(--ink);outline:none;
transition:border-color var(--micro) var(--micro-ease);}
.field input:focus-visible{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px;}
.field input::placeholder{color:var(--ink-3);}
/* UGLY DATA ON THE WAY IN. A failed sign-in, an expired invite and a sent reset all
land in this one element, and all three used to be one red box. They are different
facts and the system already tells them apart: a refusal is CONTRADICTED (something
was tried and rejected), an expiry is NOT AGREED (it existed and lapsed), and a sent
reset is neither — it is information, and takes the accent. */
.auth-error{font-family:var(--face-ui);font-size:var(--fs-row);line-height:var(--lh-row);
color:var(--ink);background:var(--surface);border:1px solid var(--line);
border-left:3px solid var(--contradicted);padding:9px 12px;
border-radius:var(--r-control);margin-bottom:var(--sp-3);display:none;}
.auth-error.show{display:block;}
.auth-error.is-expired{border-left-color:var(--not-agreed);}
.auth-error.is-info{border-left-color:var(--accent);}
/* THROUGH THE TOKEN, not around it. --btn-primary-bg already resolves to the accent;
hard-coding var(--accent) here would have made this the one primary button in the
product that stops moving when the token does. button-system.test.js caught it. */
.btn-primary{width:100%;background:var(--btn-primary-bg);color:var(--btn-primary-fg);
border:1px solid var(--btn-primary-bg);
border-radius:var(--r-control);padding:11px;font-family:var(--face-ui);
font-size:var(--fs-row);font-weight:600;cursor:pointer;margin-top:var(--sp-2);
transition:background var(--micro) var(--micro-ease);}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.btn-primary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn-primary:disabled{opacity:.5;cursor:default;}
.auth-forgot{text-align:center;margin-top:var(--sp-3);}
.auth-forgot a{font-family:var(--face-ui);font-size:var(--fs-row);font-weight:600;
color:var(--accent);text-decoration:none;}
.auth-forgot a:hover{text-decoration:underline;}
.auth-note{font-family:var(--face-ui);font-size:var(--fs-meta);line-height:var(--lh-meta);
color:var(--ink-3);text-align:center;margin:var(--sp-4) 0 0;}
/* AT 375 THE PITCH STAYS. .auth-left was display:none, which turned the first screen
on a phone into a bare form under an empty dark bar. It stacks above the form
instead, keeping the headline and the exhibit — the two things that say what this
is — and dropping only the footer, which is reference text. */
@media (max-width:820px){
.auth-wrap{grid-template-columns:minmax(0,1fr);}
.auth-left{border-right:0;border-bottom:1px solid var(--line);
padding:var(--sp-6) var(--sp-5);gap:var(--sp-5);}
.auth-right{padding:var(--sp-6) var(--sp-5) var(--sp-8);align-items:flex-start;}
.auth-headline{font-size:var(--fs-quote);line-height:var(--lh-quote);max-width:none;}
.auth-exhibit{margin-top:0;}
.auth-footer{display:none;}
}
/* APP */
.app{display:none;min-height:100vh;}
.app.visible{display:flex;}
/* SIDEBAR */
.sidebar{width:220px;flex-shrink:0;background:var(--sidebar-bg);border-right:0.5px solid var(--sidebar-border);display:flex;flex-direction:column;min-height:100vh;position:sticky;top:0;height:100vh;transition:background 0.2s;}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:20px 18px 24px;}
.logo-mark{display:flex;align-items:flex-end;gap:2.5px;height:16px;}
.logo-mark span{display:block;width:3.5px;border-radius:1.5px;}
.logo-mark span:nth-child(1){height:7px;background:var(--accent-t1);}
.logo-mark span:nth-child(2){height:11px;background:var(--accent-t2);}
.logo-mark span:nth-child(3){height:16px;background:var(--signal);}
.q-accent{color:var(--signal);}
.sidebar-name{font-size:var(--fs-subtitle);font-weight:600;color:var(--text-primary);letter-spacing:-0.5px;}
.sidebar-nav{display:flex;flex-direction:column;gap:1px;padding:0 8px;flex:1;}
.nav-tab{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:var(--fs-body);color:var(--text-secondary);cursor:pointer;border-radius:8px;border:none;background:none;font-family:'Manrope',sans-serif;transition:all 0.12s;text-align:left;width:100%;}
.nav-tab:hover{color:var(--text-primary);background:var(--stone2);}
.nav-tab.active{color:var(--nav-active-color);background:var(--nav-active-bg);font-weight:500;}
.nav-tab-dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:0.5;flex-shrink:0;}
.nav-tab.active .nav-tab-dot{opacity:1;}
.sidebar-footer{padding:12px 16px;border-top:0.5px solid var(--sidebar-border);display:flex;align-items:center;justify-content:space-between;}
.user-info{display:flex;align-items:center;gap:8px;}
.user-av{width:26px;height:26px;border-radius:50%;background:var(--signal-dim);color:var(--signal);display:flex;align-items:center;justify-content:center;font-size:var(--fs-micro);font-weight:600;flex-shrink:0;}
.user-name-small{font-size:var(--fs-micro);color:var(--text-secondary);}
.theme-toggle{width:28px;height:28px;border-radius:7px;border:0.5px solid var(--sidebar-border);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--fs-body);color:var(--text-muted);transition:all 0.12s;}
.theme-toggle:hover{background:var(--stone2);color:var(--text-primary);}
.role-pill{font-size:var(--fs-micro);padding:1px 6px;border-radius:99px;font-weight:500;}
/* Its two siblings below already read tokens; this one did not, so a superadmin saw a cool
lavender pill pinned in the sidebar footer against an otherwise warm chrome. The ROLE
distinction is kept — superadmin still reads differently from admin and rep — it is just
built from the ramp now instead of from two literals. */
.role-superadmin{background:var(--accent-weak);color:var(--accent-hover);}
.role-admin{background:var(--signal-dim);color:var(--signal);}
.role-rep{background:var(--stone2);color:var(--ink2);}
/* MAIN */
.main{flex:1;padding:24px 28px;overflow-y:auto;min-width:0;}
/* Reserve the fixed strip's height ONLY when the strip actually carries something. The demo
badge and the "viewing as" banner are the only tenants; with neither, the strip is empty
and reserving for it would be dead space at the top of every screen for every customer. */
body.has-topstrip .main{padding-top:calc(36px + var(--sp-6));}
/* ─── Sprint 9A TASK 1 — the top strip ───────────────────────────────────────
ONE fixed row over the main content area (right of the 220px sidebar), three
zones. grid 1fr/auto/1fr keeps the viewing-as pill centred whether or not the
demo badge (left) or page actions (right) are present, so the two amber elements
can never occupy the same pixels again. pointer-events:none lets the empty strip
pass clicks through; only the zone contents are interactive. */
/* PREMIUM PASS, 24 Aug 2026 — the strip is DOCKED, not floating.
It was a transparent tray holding two floating pills: a brown "DEMO — SAMPLE DATA" lozenge and
a rounded "Viewing as" pill, both hovering over the page title. The panel read them as debug
output left switched on, and they were the first thing on every screen.
Now it is one slim opaque bar with its own bottom rule — scaffolding that looks built rather
than dropped on top. Opaque matters: the old tray let content scroll UNDER the pills, so at
certain scroll positions a page title and a floating badge occupied the same pixels. A solid
bar with reserved height above the content cannot overlap anything at any scroll position. */
#top-strip{position:fixed;top:0;left:220px;right:0;z-index:900;display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:14px;height:36px;padding:0 28px;background:var(--ink);border-bottom:1px solid rgba(255,255,255,.10);pointer-events:auto;}
#top-strip .topstrip-zone{display:flex;align-items:center;gap:10px;min-width:0;}
#topstrip-left{justify-content:flex-start;}
#topstrip-center{justify-content:flex-start;}
#topstrip-right{justify-content:flex-end;}
#top-strip .topstrip-zone>*{pointer-events:auto;}
/* The demo tag: a quiet marker inside the bar, not an amber lozenge over the content. It is
still unmissable — it is in the one dark bar on the screen — without shouting. */
/* The divider after the demo tag is drawn only when something FOLLOWS it. As a plain
border-right it rendered on every screen with nothing on its other side — a separator
separating one thing from nothing, which all three blind reviewers read as a placeholder
somebody forgot to fill. :has() lets the rule ask whether a sibling zone is occupied. */
#top-strip #demo-badge{background:transparent;color:var(--on-dark-warn);font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;padding:0;border:0;white-space:nowrap;}
#top-strip:has(#topstrip-center > *:not([style*="display:none"])) #demo-badge,
#top-strip:has(#topstrip-right > *) #demo-badge{border-right:1px solid rgba(255,255,255,.18);padding-right:14px;}
#top-strip #imp-banner{background:transparent;border:0;border-radius:0;padding:0;color:var(--on-dark-2);font-size:var(--fs-caption);gap:10px;}
#top-strip #imp-banner-text{color:var(--on-dark-2);white-space:nowrap;}
/* The select inside the dark bar is the same control as everywhere else, inverted. */
#top-strip select{height:26px;line-height:24px;background-color:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:var(--fs-micro);padding:0 28px 0 10px;background-position:right 9px center;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23C7D2E0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
#top-strip select:hover{background-color:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);}
#top-strip select option{color:var(--ink);background:var(--surface);}
#top-strip a, #top-strip button{color:#fff;}
#top-strip :focus-visible{outline:2px solid #fff;outline-offset:2px;}
@media(max-width:820px){#top-strip{left:0;padding:0 16px;}}
/* ─── Sprint 9A TASK 2 — the forecast tree as a real, aligned table ───────────
A grid with a header row. Figure columns are FIXED width so every hierarchy
depth (company → manager → rep → deal) lines up vertically; indentation lives
on the name cell only. Figures are right-aligned and tabular-nums, so two rows
compare by scanning, not re-reading. Semantic colour lives on the column
HEADERS (a label), never on every digit (which would be noise). */
.ftree{--ftcol:118px;font-size:var(--fs-body);}
.ftree-row{display:grid;grid-template-columns:minmax(0,1fr) var(--ftcol) var(--ftcol) var(--ftcol) var(--ftcol);align-items:start;column-gap:10px;}
.ftree-head{border-bottom:2px solid var(--line);padding:6px 0;font-size:var(--fs-micro);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);position:sticky;}
.ftree-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-right:14px;}
.ftree-name{min-width:0;}
.ftree-h-confirmed{color:var(--green);}
.ftree-h-unconfirmed{color:var(--amber);}
.ftree details>summary{cursor:pointer;list-style:none;}
.ftree details>summary::-webkit-details-marker{display:none;}
/* DISCLOSURES — premium pass, 24 Aug 2026. Only the forecast tree ever hid the browser's own
marker, so every OTHER in the product rendered the platform's grey ▸ triangle:
the coach's "How states are computed", "Recurring across teams", and "Scores & dates" on
every call-history row. Every blind reviewer across both panels named them, one calling them
"default / disclosure triangles, untouched" — the same tell as the native
select chevron, in a place the select fix never reached.
One rule now hides the marker everywhere and draws our own chevron, rotating on open, in the
same stroke weight and ink as the chevron on every select. */
details>summary{list-style:none;cursor:pointer;}
details>summary::-webkit-details-marker{display:none;}
details>summary::marker{content:'';}
details:not(.ftree details)>summary::before{
content:''; display:inline-block; width:10px; height:7px; margin-right:8px;
vertical-align:middle; transition:transform .15s ease;
background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23666F7A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
details:not(.ftree details)[open]>summary::before{transform:rotate(180deg);}
@media (prefers-reduced-motion:reduce){ details>summary::before{transition:none;} }
/* .ftree-caret retired 2026-08-10 — the chevron is structural now; see the fold
affordance block further down, which draws it on .ftree-name::before because this
summary is a grid container. */
.ftree-cell-muted{color:var(--ink-3);}
@media(max-width:900px){.ftree{--ftcol:90px;font-size:var(--fs-caption);}}
/* ONE CONTENT WIDTH (premium pass, 24 Aug 2026 — item 7).
Seventeen surfaces wrapped themselves in .vs-page and got the 1200px column; the rest ran
edge to edge, so Team analysis and the analyse output hugged the left half of a 1440px
screen with a dead gutter beside them — the reader's eye had to travel a different distance
on every screen. Setting it on the panel itself means a screen gets the column by EXISTING,
not by remembering to opt in, and the nested .vs-page becomes a harmless no-op. */
.tab-panel{display:none;max-width:var(--col-max);margin:0 auto;}
.tab-panel.active{display:block;}
.page-head{margin-bottom:20px;}
.page-title{font-size:var(--fs-title);font-weight:500;color:var(--text-primary);letter-spacing:-0.5px;}
.page-sub{font-size:var(--fs-body);color:var(--text-muted);margin-top:3px;}
/* CARDS */
/* superseded by the one card system at the foot of this file (Part 2) */
.card-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:0.5px solid var(--card-border);background:var(--stone2);}
.card-title{font-size:var(--fs-body);font-weight:500;color:var(--text-primary);}
.card-sub{font-size:var(--fs-micro);color:var(--ink3);}
.card-body{padding:14px 16px;}
/* ── App visual scale (VISUAL ONLY). Global, un-prefixed tokens + classes,
promoted from the analytics screen so the scale is app-wide, not analytics-
scoped. Reusable everywhere; no data, logic, or provenance wording lives here.
A screen opts into the roomy card scale with the .polished wrapper; the
.hero-num classes are usable standalone. Rename only — renders identically. ── */
:root{
--fs-hero:var(--fs-display); /* legacy alias → the one display step */
--fs-metric:var(--fs-title); /* legacy alias → title step */
--fs-section:var(--fs-body); /* legacy alias → body step */
--pad-card:22px; /* generous, consistent card padding */
--gap-section:16px; /* breathing room between sections */
}
.polished .card{margin-bottom:var(--gap-section);}
.polished .card-head{padding:15px 22px;}
.polished .card-title{font-size:var(--fs-section);font-weight:600;letter-spacing:-.2px;}
.polished .card-sub{font-size:var(--fs-caption);color:var(--ink3);margin-top:2px;}
.polished .card-body{padding:var(--pad-card);}
/* Hero metric: large, heavy, tight — dominates its card. Colour stays --ink so
the semantic green/amber encoding elsewhere keeps its meaning. */
.hero-num{font-family:'Manrope',sans-serif;font-size:var(--fs-hero);font-weight:700;letter-spacing:-1px;line-height:1.03;color:var(--ink);}
.hero-num-sm{font-family:'Manrope',sans-serif;font-size:var(--fs-metric);font-weight:700;letter-spacing:-.5px;color:var(--ink);}
/* ── ROI section redesign (visual pass, VISUAL ONLY) ─────────────────────────
Two committed colour ZONES + contained anchor CARDS replace the washed-out
pastel fills and the flat text stack. The semantic system is unchanged and
made CRISPER: green = measured/from-your-data, amber = your-assumption —
carried by a solid 4px edge, a directional colour wash, a crisp tinted
border and a solid kicker, in BOTH themes. Depth comes from layered washes
and soft shadows in light mode; dark mode keeps borders and drops shadows. */
:root{
--roi-shadow:var(--shadow-raised);
--roi-measured-border:#B7D8BE;
--roi-measured-wash:linear-gradient(105deg,rgba(42,122,59,.11),rgba(42,122,59,.035) 52%,rgba(42,122,59,0) 78%);
--roi-assumption-border:#E6CDA0;
--roi-assumption-wash:linear-gradient(105deg,rgba(138,90,0,.11),rgba(138,90,0,.035) 52%,rgba(138,90,0,0) 78%);
}
.roi-zone{position:relative;background:var(--card-bg);border:1px solid var(--card-border);border-radius:14px;padding:18px 20px;box-shadow:var(--roi-shadow);overflow:hidden;}
.roi-zone::before{content:'';position:absolute;inset:0;pointer-events:none;}
.roi-zone>*{position:relative;}
.roi-zone-measured{border-color:var(--roi-measured-border);border-left:4px solid var(--green);}
.roi-zone-measured::before{background:var(--roi-measured-wash);}
.roi-zone-assumption{border-color:var(--roi-assumption-border);border-left:4px solid var(--amber);}
.roi-zone-assumption::before{background:var(--roi-assumption-wash);}
/* The four-anchor breakdown: real contained cards in a responsive grid, each
top-edged by its NATURE — green (measured) or amber (assumption-driven). */
.roi-anchors{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px;margin-top:10px;}
.roi-anchor{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:14px 16px;box-shadow:var(--roi-shadow);min-width:0;}
.roi-anchor-measured{border-top:3px solid var(--green);}
.roi-anchor-assumption{border-top:3px solid var(--amber);}
.roi-kicker{font-family:'Manrope',sans-serif;font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;font-weight:700;}
/* Answer-first type ladder (refinement pass): the eye hits the NUMBER first.
34px measured hero → 24px projection result → 21px anchor leads (hero-num-sm)
→ 10px mono labels → 11-12px caveats. Manrope figures + labels (tabular). The
34px hero deliberately supersedes the "21px step" rule for THIS section, per
ruling: the measured answer is the section's dominant element. */
.roi-hero-num{font-family:'Manrope',sans-serif;font-size:var(--fs-display);font-weight:700;letter-spacing:-1.2px;line-height:1.05;color:var(--ink);}
.roi-result{font-family:'Manrope',sans-serif;font-size:var(--fs-display);font-weight:700;letter-spacing:-.6px;line-height:1.1;color:var(--ink);}
/* KPI stat tiles inside a .polished screen adopt the same hero treatment as the
analytics scan strip (Manrope, heavy, tabular). Reusable by any .polished screen. */
/* Dashboard declutter (design audit PR 2): the KPI tiles are the SCAN STRIP,
not rivals to the cockpit hero — 19px, one visual step below the 28px hero.
Labels take the mono-kicker treatment so tiles and cockpit vitals read as
one system. DECORATIVE spines removed (the blanket blue on tiles 1/3 and on
every dash card carried no meaning); the SEMANTIC ones stay — amber on
overdue, green on score. Color = meaning only. */
.polished .kpi-val{font-family:'Manrope',sans-serif;font-size:var(--fs-title);font-weight:600;letter-spacing:-.4px;font-variant-numeric:tabular-nums;}
.polished .kpi-label{font-family:'Manrope',sans-serif;letter-spacing:.08em;}
.polished .kpi-grid .kpi:nth-child(2){border-left:3px solid var(--amber);}
.polished .kpi-grid .kpi:nth-child(4){border-left:3px solid var(--green);}
/* Forecast adoption: signal-blue spine on its cards. Scoped to #tab-forecast so it
never reaches the analytics example cards (which carry a dashed border, no spine). */
#tab-forecast .card{border-left:3px solid var(--signal);}
/* Call analysis result cards (.rcard) adopt the card system on a .polished screen:
signal-blue spine, heavier heading, roomier body. The receipt-gated approve block
uses NONE of these classes (only .fl/.personal-quote/.btn), so it stays untouched. */
.polished .rcard{border-left:3px solid var(--signal);border-radius:var(--rl);margin-bottom:var(--gap-section);}
.polished .rcard-hd{padding:12px 16px;}
.polished .rcard-title{font-size:var(--fs-body);font-weight:600;}
.polished .rcard-body{padding:16px;}
/* Settings sections (.ss) adopt the card system on a .polished screen: signal-blue
spine, heavier section heading, roomier rows. The field-map inputs' value/placeholder
logic (fix #5) lives in app.js and is untouched — this is presentation only. */
.polished .ss{border-left:3px solid var(--signal);margin-bottom:var(--gap-section);}
.polished .ss-hd{padding:15px 22px;font-size:var(--fs-section);font-weight:600;}
.polished .ss-row{padding:13px 22px;}
/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px;}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:15px 17px;transition:background 0.2s;}
.kpi-label{font-size:var(--fs-body);color:var(--ink-3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:5px;}
.kpi-val{font-size:var(--fs-title);font-weight:700;color:var(--text-primary);letter-spacing:-0.6px;}
.kpi-sub{font-size:var(--fs-body);color:var(--ink-3);margin-top:3px;}
/* DASH GRID */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.dash-full{grid-column:1/-1;}
/* BANT CHART */
.bchart{display:flex;flex-direction:column;gap:10px;}
.bchart-row{display:flex;align-items:center;gap:10px;}
.bchart-lbl{font-size:var(--fs-body);color:var(--ink-2);width:88px;text-align:right;flex-shrink:0;}
.bchart-wrap{flex:1;height:8px;background:var(--line-2);border-radius:99px;overflow:hidden;}
.bchart-bar{height:100%;border-radius:99px;}
.bchart-pct{font-size:var(--fs-body);font-weight:600;color:var(--ink);width:34px;}
/* STAGE */
.stage-list{display:flex;flex-direction:column;gap:7px;}
.stage-row{display:flex;align-items:center;gap:8px;}
.stage-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.stage-name{font-size:var(--fs-body);color:var(--ink-2);flex:1;}
.stage-count{font-size:var(--fs-body);font-weight:600;color:var(--text-primary);}
.stage-bw{width:70px;height:5px;background:var(--line-2);border-radius:99px;}
.stage-bf{height:100%;border-radius:99px;}
/* RECENT CALLS */
.recent-call{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:opacity 0.12s;}
.recent-call:last-child{border-bottom:none;}
.recent-call:hover{opacity:0.75;}
.rc-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-body);font-weight:600;flex-shrink:0;background:var(--signal-dim);color:var(--signal);}
.rc-name{font-size:var(--fs-body);font-weight:500;color:var(--text-primary);}
.rc-summary{font-size:var(--fs-body);color:var(--ink-2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px;}
.rc-time{font-size:var(--fs-body);color:var(--ink-3);margin-left:auto;flex-shrink:0;}
/* TAGS */
/* Sprint 9 TASK E — TAG species: OUTLINE, neutral. A tag is a neutral ATTRIBUTE
(player-coach, you, board-safe, at-risk, new) — never a good/bad signal, so no
tinted fill. One spec. tag-accent is the single identity accent (you/player-coach). */
/* ═══ THE PILL — ONE component, TWO variants (premium pass, 24 Aug 2026) ══════
The product had pills in five shapes: .chip, .tag, .chip-metric, an inline-styled DEMO
lozenge and an inline-styled gap marker, at four heights and three font sizes. Worse, a
PRICE STATE ("confirmed") and a PROVENANCE fact ("call-confirmed") rendered as the same
solid green pill, so the reader had to learn which column meant which — the design was
making them do work the design should have done.
SOLID (.chip) the deal's price state: confirmed · likely · not accepted ·
unconfirmed · contradicted. A judgement about the deal.
OUTLINE (.tag-outline) provenance: call-confirmed · unconfirmed · gap · under/over.
A fact about the evidence behind it.
Both are 11px, both share one height and one padding, both take colour from the semantic
tokens and nowhere else. Column semantics are unchanged — only which variant paints them. */
.tag{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:var(--radius-chip);font-size:var(--fs-eyebrow);font-weight:600;line-height:1;white-space:nowrap;background:transparent;border:1px solid var(--line);color:var(--ink-2);}
.tag-accent{border-color:var(--accent);color:var(--accent);}
/* Bare .tag-green/amber/red stay neutral outlines so a missed call-site degrades cleanly
rather than emitting a stray tinted pill; the semantic colour arrives only WITH
.tag-outline, which is the variant that means "this is provenance". */
.tag-blue{border-color:var(--accent);color:var(--accent);background:transparent;}
.tag-gray{border-color:var(--line);color:var(--ink-2);background:transparent;}
.tag-green,.tag-amber,.tag-red{border-color:var(--line);color:var(--ink-2);background:transparent;}
.tag-outline{background:transparent;font-weight:600;}
.tag-outline.tag-green{border-color:var(--green);color:var(--green);}
.tag-outline.tag-amber{border-color:var(--amber);color:var(--amber);}
.tag-outline.tag-red{border-color:var(--red);color:var(--red);}
.tag-outline.tag-neutral{border-color:var(--ink-3);color:var(--ink-2);}
/* One size for pills that sit inside a table row, replacing the inline height/font-size that
was pasted at each call site. */
.pill-sm{height:18px;padding:0 8px;font-size:var(--fs-eyebrow);}
/* ANALYSE */
.analyse-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
.sticky-left{position:sticky;top:78px;}
.upload-zone{border:1.5px dashed var(--stone3);border-radius:var(--rl);padding:24px;text-align:center;cursor:pointer;background:var(--card-bg);transition:all 0.15s;position:relative;margin-bottom:12px;}
.upload-zone:hover{border-color:var(--signal);background:var(--signal-dim);}
.upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.upload-icon{width:36px;height:36px;border-radius:var(--r);background:var(--signal-dim);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;}
.upload-title{font-size:var(--fs-body);font-weight:500;color:var(--text-primary);margin-bottom:2px;}
.upload-hint{font-size:var(--fs-micro);color:var(--ink3);}
.divider-or{display:flex;align-items:center;gap:10px;margin:12px 0;color:var(--ink3);font-size:var(--fs-caption);}
.divider-or::before,.divider-or::after{content:'';flex:1;height:1px;background:var(--stone3);}
textarea.tx{width:100%;background:var(--card-bg);border:0.5px solid var(--card-border);border-radius:var(--rl);padding:12px;font-size:var(--fs-caption);color:var(--ink);font-family:'Manrope',sans-serif;resize:vertical;min-height:160px;outline:none;line-height:1.65;transition:border-color 0.15s;}
textarea.tx:focus{border-color:var(--signal);}
textarea.tx::placeholder{color:var(--ink3);font-family:'Manrope',sans-serif;}
.action-row{display:flex;gap:8px;margin-top:12px;}
.btn-sec{background:var(--card-bg);border:0.5px solid var(--card-border);border-radius:var(--r);padding:8px 14px;font-size:var(--fs-caption);color:var(--ink2);cursor:pointer;font-family:'Manrope',sans-serif;transition:all 0.12s;}
.btn-sec:hover{border-color:var(--ink2);color:var(--ink);}
/* ─── Sprint 9 TASK B — the button rank ──────────────────────────────────────
PRIMARY (accent-filled, max one per view): .btn-primary / .btn-analyse
via --btn-primary-bg (now accent — the black fill is retired product-wide).
SECONDARY (outline): .btn-sec. TERTIARY (text + ›): .btn-tertiary for open/see/view
links. Green/red stay SEMANTIC (Save/confirm · Delete) — colour = meaning (ruled). */
.btn-tertiary{background:none;border:none;padding:4px 2px;font-size:var(--fs-body);font-weight:600;color:var(--accent);cursor:pointer;font-family:'Manrope',sans-serif;display:inline-flex;align-items:center;gap:3px;}
.btn-tertiary:hover{color:var(--accent-hover);text-decoration:underline;}
.btn-tertiary::after{content:'›';font-size:var(--fs-subtitle);line-height:1;}
.btn-analyse{flex:1;background:var(--btn-primary-bg);color:var(--btn-primary-fg);border:none;border-radius:var(--r);padding:9px 16px;font-size:var(--fs-body);font-weight:500;cursor:pointer;font-family:'Manrope',sans-serif;display:flex;align-items:center;justify-content:center;gap:7px;transition:opacity 0.15s;}
.btn-analyse:hover{opacity:0.88;}
.btn-analyse:disabled{opacity:0.4;cursor:not-allowed;}
.spinner{width:12px;height:12px;border:2px solid rgba(128,128,128,0.35);border-top-color:currentColor;border-radius:50%;animation:spin 0.7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.err-msg{background:var(--red-bg);border:1px solid var(--red);border-radius:var(--r);padding:9px 12px;font-size:var(--fs-caption);color:var(--red);margin-top:10px;display:none;}
.err-msg.show{display:block;}
/* RESULTS */
.results-panel{display:none;}
.results-panel.show{display:block;}
.results-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--stone3);}
.results-title{font-size:var(--fs-body);font-weight:600;color:var(--text-primary);letter-spacing:-0.3px;}
.results-ts{font-size:var(--fs-micro);color:var(--ink3);margin-top:2px;}
.sync-badge{display:flex;align-items:center;gap:4px;font-size:var(--fs-micro);color:var(--green);background:var(--green-bg);padding:3px 9px;border-radius:99px;font-weight:500;}
/* superseded by the one card system at the foot of this file (Part 2) */
.rcard-hd{display:flex;align-items:center;gap:7px;padding:10px 13px;border-bottom:1px solid var(--stone3);background:var(--stone2);}
.rcard-icon{width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-body);font-weight:700;flex-shrink:0;}
.rcard-title{font-size:var(--fs-subtitle);font-weight:600;color:var(--text-primary);}
.rcard-sf{font-size:var(--fs-micro);color:var(--ink3);margin-left:auto;}
.rcard-body{padding:12px 13px;}
.fl{font-size:var(--fs-micro);color:var(--ink3);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:4px;font-weight:500;}
.fv{font-size:var(--fs-body);color:var(--ink);line-height:1.6;}
.fg{margin-bottom:10px;}
.fg:last-child{margin-bottom:0;}
.bant4{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.bcell{background:var(--stone2);border-radius:var(--r);padding:9px 10px;}
.bk{font-size:var(--fs-micro);color:var(--ink3);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:3px;}
.bs{font-size:var(--fs-body);font-weight:600;margin-bottom:2px;}
.bs.High{color:var(--green);}
.bs.Medium{color:var(--amber);}
.bs.Low{color:var(--red);}
.bs.Unknown{color:var(--ink3);}
.bn{font-size:var(--fs-micro);color:var(--ink2);line-height:1.4;}
.task-item{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid var(--stone3);}
.task-priority{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0;}
.priority-high{background:var(--red);}
.priority-medium{background:var(--amber);}
.priority-low{background:var(--ink3);}
.task-complete{width:14px;height:14px;border-radius:3px;border:1.5px solid var(--stone3);cursor:pointer;flex-shrink:0;margin-top:4px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-micro);transition:all 0.12s;}
.task-complete.done{background:var(--green);border-color:var(--green);color:var(--on-accent);}
.gap-item{display:flex;align-items:flex-start;gap:8px;padding:6px 0;font-size:var(--fs-caption);color:var(--red);}
.gap-dot{width:5px;height:5px;border-radius:50%;background:var(--red);margin-top:6px;flex-shrink:0;}
.validated-badge{font-size:var(--fs-micro);padding:1px 6px;border-radius:99px;margin-left:4px;}
.v-yes{background:var(--green-bg);color:var(--green);}
.v-no{background:var(--red-bg);color:var(--red);}
.today-task{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--stone3);}
.today-task:last-child{border-bottom:none;}
.kanban-task:hover{border-color:var(--signal) !important;box-shadow:0 1px 4px rgba(51,80,224,0.12);}
.task-col{transition:background 0.1s;}
.task-col.drag-over{background:var(--signal-dim);border-radius:6px;}
.score-trend{display:flex;align-items:flex-end;gap:3px;height:32px;}
.trend-bar{width:14px;border-radius:3px 3px 0 0;background:var(--signal);opacity:0.7;min-height:4px;}
.task-item:last-child{border-bottom:none;}
.task-dot{width:5px;height:5px;border-radius:50%;background:var(--signal);margin-top:7px;flex-shrink:0;}
.task-text{font-size:var(--fs-caption);color:var(--ink);line-height:1.4;font-weight:500;}
.task-meta{font-size:var(--fs-micro);color:var(--ink3);margin-top:2px;}
.personal-quote{border-left:2px solid var(--amber);padding-left:11px;font-size:var(--fs-body);color:var(--ink2);font-style:italic;line-height:1.6;}
/* COACHING */
.coach-rep{background:var(--signal-dim);border-radius:var(--rl);padding:14px;margin-bottom:8px;}
.coach-title{font-size:var(--fs-caption);font-weight:500;color:var(--signal);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.coach-tip{display:flex;align-items:flex-start;gap:7px;padding:5px 0;font-size:var(--fs-caption);color:var(--ink);}
.coach-tip-dot{width:5px;height:5px;border-radius:50%;background:var(--signal);margin-top:6px;flex-shrink:0;}
.coach-missed{background:var(--amber-bg);border-left:2px solid var(--amber);padding:9px 11px;border-radius:0 var(--r) var(--r) 0;font-size:var(--fs-caption);color:var(--ink2);line-height:1.5;margin-top:8px;}
.coach-score{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(51,80,224,0.2);}
.score-label{font-size:var(--fs-micro);color:var(--ink2);}
.score-dots{display:flex;gap:3px;}
.score-dot{width:16px;height:6px;border-radius:3px;}
.coach-manager{background:var(--green-bg);border-radius:var(--rl);padding:14px;margin-bottom:8px;}
.coach-manager .coach-title{color:var(--green);}
/* Line icons replacing the emoji that used to sit in card titles and empty states (premium
pass). Same 24×24 stroke set as the sidebar, so one icon language runs through the product
instead of two — a lightbulb rendered by the OS font can never match a hand-drawn nav icon. */
.ttl-ic{width:15px;height:15px;flex:none;}
.empty-ic{width:34px;height:34px;color:var(--ink-3);margin:0 auto var(--sp-3);display:block;}
.mgr-flag{display:flex;align-items:flex-start;gap:7px;padding:5px 0;font-size:var(--fs-caption);color:var(--ink);}
.mgr-plan{background:var(--card-bg);border-radius:var(--r);padding:10px 12px;font-size:var(--fs-caption);color:var(--ink2);line-height:1.5;margin-top:8px;border:1px solid var(--stone3);}
.mgr-risk{background:var(--red-bg);border-left:2px solid var(--red);padding:8px 11px;border-radius:0 var(--r) var(--r) 0;font-size:var(--fs-caption);color:var(--red);line-height:1.5;margin-top:8px;}
/* EXPORT ROW */
.export-row{display:flex;gap:7px;margin-top:12px;padding-top:12px;border-top:1px solid var(--stone3);}
.btn-export{display:flex;align-items:center;gap:4px;padding:6px 10px;font-size:var(--fs-micro);font-weight:500;border-radius:var(--r);border:1px solid var(--stone3);background:var(--card-bg);color:var(--ink2);cursor:pointer;font-family:'Manrope',sans-serif;transition:all 0.12s;}
.btn-export:hover{border-color:var(--text-primary);color:var(--text-primary);}
/* HISTORY */
/* Brought onto the one card system. It renders as a card and was missed by the alias rule
because it is not named .card/.rcard/.ss — a fifth system hiding behind a different noun. */
.history-item{display:flex;align-items:center;gap:12px;padding:13px 15px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow);transition:box-shadow var(--dur-micro) var(--ease-out);margin-bottom:7px;cursor:pointer;transition:border-color 0.12s;}
.history-item:hover{box-shadow:var(--shadow-hover);}
.hi-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-micro);font-weight:600;flex-shrink:0;background:var(--signal-dim);color:var(--signal);}
.hi-name{font-size:var(--fs-body);font-weight:500;color:var(--text-primary);}
/* No max-width. The 340px cap clipped every summary at a third of the width the row had,
leaving two thirds of the card blank — the row truncating its own content next to its own
empty space. nowrap + ellipsis stay, so it still truncates, but at the point it actually
runs out of room. */
.hi-summary{font-size:var(--fs-caption);color:var(--ink2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hi-tags{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap;}
.hi-time{font-size:var(--fs-micro);color:var(--ink3);margin-left:auto;flex-shrink:0;}
.history-empty{text-align:center;padding:50px 20px;color:var(--ink3);font-size:var(--fs-body);line-height:1.7;}
.hi-menu{position:relative;}
.hi-dots{width:28px;height:28px;border-radius:6px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--fs-title);color:var(--ink3);transition:all 0.12s;flex-shrink:0;}
.hi-dots:hover{background:var(--stone2);color:var(--ink);}
.hi-dropdown{position:absolute;right:0;top:32px;background:var(--card-bg);border:0.5px solid var(--card-border);border-radius:var(--rl);box-shadow:0 4px 16px rgba(26,26,46,0.12);z-index:300;min-width:160px;overflow:hidden;display:none;}
.hi-dropdown.show{display:block;}
.hi-dropdown-item{display:flex;align-items:center;gap:8px;padding:9px 14px;font-size:var(--fs-caption);color:var(--ink);cursor:pointer;transition:background 0.1s;}
.hi-dropdown-item:hover{background:var(--stone2);}
/* MODAL */
.modal-overlay{position:fixed;inset:0;background:var(--scrim);z-index:500;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;}
.modal-overlay.show{display:flex;}
.modal{background:var(--surface-solid);border-radius:var(--rl);width:100%;max-width:680px;overflow:hidden;margin:auto;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--stone3);background:var(--stone2);}
.modal-title{font-size:var(--fs-subtitle);font-weight:600;color:var(--text-primary);letter-spacing:-0.3px;}
.modal-close{width:28px;height:28px;border-radius:6px;background:var(--stone2);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--fs-subtitle);color:var(--ink2);}
/* THE MODAL'S SCROLL — premium pass, 24 Aug 2026. Every blind reviewer across both panels
reported the same three things about this one element: content guillotined mid-card at the
bottom edge with no fade and no peek, a chunky platform scrollbar with arrow buttons running
down the inside, and that scrollbar sitting ~40px from the page's own — two scrollbars in one
screenshot. One called it "somewhere around Windows 95".
max-height goes to 78vh (a little more content per screen without touching the layout), the
scrollbar becomes a thin ink thumb on no track, and a fade at the lower edge tells the reader
that the cut IS a cut and there is more below — which is the part that made it read as broken
rather than as scrollable. The fade is a pseudo-element on the container, so it never scrolls
away with the content. */
.modal-body{padding:20px;max-height:78vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ink-3) transparent;position:relative;}
.modal-body::-webkit-scrollbar{width:8px;}
.modal-body::-webkit-scrollbar-track{background:transparent;}
.modal-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:2px solid var(--surface);}
.modal-body::-webkit-scrollbar-thumb:hover{background:var(--ink-3);}
.modal-body::-webkit-scrollbar-button{display:none;height:0;}
.modal{position:relative;}
.modal::after{content:'';position:absolute;left:0;right:0;bottom:0;height:28px;pointer-events:none;
background:linear-gradient(to bottom,rgba(255,255,255,0),var(--surface-solid));border-radius:0 0 var(--rl) var(--rl);}
/* ADMIN */
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.input-row{display:flex;gap:8px;margin-bottom:12px;align-items:center;}
/* Field labels for the admin forms — placeholder-only inputs stop saying what they are the
moment someone types into them, which is exactly when a half-filled form most needs to. */
.fl{flex:none;width:96px;font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--ink-3);}
.fieldlabel{font-size:var(--fs-caption);font-weight:600;color:var(--ink-2);margin-bottom:var(--sp-3);}
/* Inline labels for the call-history date range. Every blind reviewer called these fields "raw
browser date inputs" — the box itself is styled to match the selects beside it (36px, 6px
radius, Manrope, our own calendar glyph), and what they were actually reading is Chrome's own
dd/mm/yyyy placeholder, which cannot be removed from input[type=date] without replacing the
control. Two of them named the real fixable problem underneath it: two unlabelled boxes with
no indication which is the start and which is the end. "From … to" says it in five pixels. */
.fl-inline{font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--ink-3);flex:none;}
.inp{background:var(--card-bg);border:1px solid var(--input-border);border-radius:var(--radius-input);padding:0 12px;height:36px;font-size:var(--fs-caption);color:var(--text-primary);font-family:'Manrope',sans-serif;outline:none;flex:1;}
.inp:focus{border-color:var(--accent);}
.inp-sm{width:140px;flex:none;}
/* ═══ FORM CONTROLS — PREMIUM PASS, 24 Aug 2026 ══════════════════════════════
The panel was unanimous and it was right: not one control in the product had ever been
styled. Every