/* Plus Jakarta Sans only. The Instrument Serif face was tried for headings on
2026-08-25 and REJECTED by Arnav ("the previous heading font was better,
remove the serif"), so it is no longer fetched.
The weight list still carries 500/700/900 even though the design system
retires them. They are retired in the APP (enforced by lint_content.py's
check_type_scale over app/templates) and the marketing site has not been
swept yet: 244 uses of 700 and a 900 wordmark would render SYNTHETIC bold
if the face were dropped now. Narrow the list to 400;600;800 in the pass
that cleans the marketing CSS, not before. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');
/* ===================================================================
DESIGN TOKENS
Phase 1 of the design system (ops/specs/2026-08-28-design-system-phase-1.md).
THE PALETTE IS RADIX COLORS 3.0.0, FETCHED AND MEASURED, NEVER HAND-PICKED.
Arnav, 2026-08-25: "dont try to reinvent the wheel, use standard color
palettes that are scientifically proven to go well together." The two times
a value was hand-picked instead, it failed the 4.5:1 floor (3.56, then 4.46)
and the pill fills measured 1.06 against the ground, i.e. invisible.
Radix's step model, which is why each token points where it does:
1-2 app background | 3 component fill | 6-7 borders
9 solid fill | 11 low-contrast text | 12 high-contrast text
Measured on this ground, 2026-08-28, with the package fetched fresh:
white card lift 1.06 recess 1.18 border 1.45
body text 15.45 muted 5.72 muted on recess 4.84 rail 12.53
Two traps are recorded in CLAUDE.md and both are honoured here: a contrast
ratio cannot see hue (amber-1 was 1.02 AND hueless, so cards dissolved), and
a recessed tone must sit on the GROUND's own scale (sand-3 on gold measures
1.003, identical, so the inactive tabs vanished).
NAMES: the new vocabulary (--page/--recess/--ink/--border-strong) is what
phase 2 screens should use. The old names (--bg/--bg-subtle/--border-light/
--panel-ink) are kept as ALIASES because 3,583 uses of --text-dim alone are
spread across templates this phase must not touch. An alias resolves at the
element, so redefining --page under [data-theme="dark"] moves --bg with it.
=================================================================== */
:root, [data-theme="light"] {
/* GROUND. ONE ground for the app and the website: a prospect goes
marketing site to free scan to report in one session, and a ground that
changes mid-journey reads as two products. gold-2 is a like-for-like
swap on lightness for the retired #f8f7f4 (both 96.5%), so nothing gets
darker; only the hue moves. */
--page: #faf9f2; /* gold-2 */
--card: #ffffff;
--recess: #eae6db; /* gold-4, chips / row hover / segmented controls.
NEVER a card fill: a tinted card reads as
disabled beside a white one. */
--border: #d8d0bf; /* gold-6 */
--border-strong: #cbc0aa; /* gold-7 */
--text: #21201c; /* sand-12, 15.45 on the ground */
--text-dim: #63635e; /* sand-11, 5.72. Radix gives exactly two text
steps and that is a discipline, not a
shortage, so dim and muted are one value. */
--text-muted: #63635e; /* sand-11 */
--accent: #3a5bc7; /* indigo-11, 5.68 on the ground */
--accent-solid: #3e63dd; /* indigo-9, the solid step */
--accent-soft: #edf2fe; /* indigo-3 */
--cta: #ffc53d; /* amber-9, the ACTION colour, 8.38 on the rail */
--cta-text: #21201c; /* sand-12 */
/* THE TWO ARC COLOURS. Arnav, 2026-09-29: "Try all engines donuts as amber
arc. All competitors donuts as blue arc with our arc as amber."
ONE RULE ACROSS BOTH STRIPS: amber is YOU, blue is EVERYONE ELSE. Colour
says us or them and nothing else; it never says good or bad. Every engine
donut is amber because every one of them is a measurement of the
customer.
THE STEP MUST FLIP BY THEME OR ONE OF THE TWO DISAPPEARS, measured
against the `--recess` track the arcs sit on:
light dark
--cta amber-9 1.27 9.47 <- invisible on light
amber-10 1.37 -
amber-11 #ab6400 3.70 3.24 <- the light step
indigo-9 #3e63dd 4.17 2.87 <- weak on dark
indigo-dark-11 1.65 7.25 <- the dark step
Those are re-measured values, not the spec's. It gave 9.82, 2.98 and
7.52 for the three dark figures; computed against the real token values
they are 9.47, 2.87 and 7.25. The differences change no decision (the
flip is required either way) and the corrected numbers are recorded
because a number nobody re-ran is a claim, not a measurement.
1.27 is the failure this design system already recorded once, when
hand-picked pills measured 1.06 against the ground and were invisible.
It is not amber only: indigo-9 is fine on light and weak on dark. */
--arc-you: #ab6400; /* amber-11, 3.70 on the recess track */
--arc-them: #3e63dd; /* indigo-9, 4.17 */
/* THE RAIL IS NAVY, not near-black: indigo-12 against a warm ground is a
pairing the scale was built for, where near-black on near-white reads as
an absence of a decision. */
--ink: #1f2d5c; /* indigo-12 */
--ink-text: #fdfdfc; /* sand-1, 12.99 on it */
--ink-dim: #8da4ef; /* indigo-8, 5.47 on it, same hue family */
/* SEMANTIC: step-3 fill, step-12 text, step-6 hairline, step-9 for a solid
dot or bar. amber-12 and NOT amber-11, which measures 4.37 on this ground
and 4.25 on its own step-3 fill, both under the floor, because amber is
one of the scales whose step-11 guarantee is stated against WHITE. */
--green: #203c25; /* grass-12, 11.47 on the ground */
--green-bg: #e9f6e9; /* grass-3 */
--green-line: #b2ddb5; /* grass-6 */
--green-solid: #46a758; /* grass-9, for a filled dot or progress bar */
--red: #641723; /* red-12 */
--red-bg: #feebec; /* red-3 */
--red-line: #fdbdbe; /* red-6 */
--red-solid: #e5484d; /* red-9 */
--amber: #4f3422; /* amber-12 */
--amber-bg: #fff7c2; /* amber-3 */
--amber-line: #f3d673; /* amber-6 */
--amber-solid: #ffc53d; /* amber-9 */
/* FOUR SIZES. Arnav, 2026-08-25, after measuring 33 distinct pixel sizes
and six weights across the app. Named by JOB, never by size, because
--text-sm invites --text-xs next week and --text-body does not.
--text-display is the ONE hero number per screen, one component only.
THE SMALL END GETS BIGGER: an 11px uppercase grey table header becomes
14px at 600. That is the change most likely to feel wrong for a day.
Do not soften it back. What the half-pixels were doing is now done by
weight, by colour, and by exactly two letter-spacing values. */
--text-body: 14px;
--text-title: 20px;
--text-metric: 32px;
--text-display: 44px;
/* THREE WEIGHTS: 400 body prose, 600 anything that identifies, 800 titles
and metrics. 500, 700 and 900 are RETIRED. */
--weight-body: 400;
--weight-ident: 600;
--weight-strong: 800;
/* Exactly two letter-spacing values. */
--track-caps: .08em; /* uppercase labels */
--track-tight: -.02em; /* title, metric, display */
--space-1: 4px; --space-2: 8px; --space-3: 12px;
--space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
--radius: 10px;
--radius-lg: 16px;
/* The rail: a fixed 60px slot, opening to 232px OVER the content. */
--rail: 60px;
--rail-open: 232px;
--ease: cubic-bezier(.2,.7,.3,1);
--shadow-xs: 0 1px 2px rgba(33,32,28,.05);
--shadow-sm: 0 1px 2px rgba(33,32,28,.05), 0 2px 6px -2px rgba(33,32,28,.07);
--shadow-md: 0 6px 18px -6px rgba(33,32,28,.16), 0 2px 6px -2px rgba(33,32,28,.07);
--shadow-lg: 0 18px 44px -14px rgba(33,32,28,.26);
--sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
/* ---- aliases kept so phase 1 does not have to touch eleven screens ---- */
--bg: var(--page);
--bg-card: var(--card);
--bg-input: var(--card);
--bg-subtle: var(--recess);
--border-light: var(--border-strong);
--accent-dark: var(--accent-solid);
--accent-glow: rgba(58,91,199,.10);
--cta-bg: var(--cta);
--emerald: var(--green-solid); /* the BRIGHT green: dots, bars, fills */
--yellow: var(--amber);
--yellow-bg: var(--amber-bg);
--orange: var(--amber);
--blue: var(--accent);
--shadow: var(--shadow-md);
/* The one dark emphasis panel (the "your one move" block, the dark CTA).
NOT an alias of --ink, and the difference is the whole point: the rail
goes DARKER than the page in dark mode, while an emphasis panel sitting
inside a card has to go LIGHTER than that card or it disappears exactly
where it is meant to shout. In light mode the two coincide at indigo-12,
so the product has one navy; in dark they part company. */
--panel-ink: #1f2d5c; /* indigo-12, the same navy as the rail */
--panel-ink-text: #fdfdfc; /* sand-1, 12.99 on it */
}
/* Dark mode is EXPLICIT ONLY, via the data-theme attribute the shells set from
localStorage. There is deliberately no prefers-color-scheme block here: the
product has always required the toggle, and adding one would silently flip
every system-dark user's app on a release that changed no behaviour.
Radix dark scales, same step meanings, and the rail goes DARKER than the
page rather than lighter. */
[data-theme="dark"] {
--page: #1a1915;
--card: #21201c;
--recess: #282723;
--border: #3b3a35;
--border-strong: #494844;
--text: #eeeeec; /* sand-dark-12 */
--text-dim: #b5b3ad; /* sand-dark-11 */
--text-muted: #b5b3ad;
--accent: #9eb1ff; /* indigo-dark-11 */
--accent-solid: #3e63dd; /* indigo-9 holds in both themes */
--accent-soft: #1f2c5c;
--accent-glow: rgba(158,177,255,.10);
--cta: #ffc53d;
--cta-text: #21201c;
/* See the light block: the arc steps FLIP. On dark the amber-9 action
colour is the readable one (9.47) and amber-11 drops to 3.24, while
indigo-9 drops to 2.87 and indigo-dark-11 carries it at 7.25. */
--arc-you: #ffc53d; /* amber-9, 9.47 on the dark recess */
--arc-them: #9eb1ff; /* indigo-dark-11, 7.25 */
--ink: #11162b;
--ink-text: #eeeeec;
--ink-dim: #7b8fd6;
--green: #71d083; /* grass-dark-11 */
--green-bg: #132d16;
--green-line: #2b543a;
--green-solid: #46a758;
--red: #ff9592; /* red-dark-11 */
--red-bg: #3b1219;
--red-line: #72232d;
--red-solid: #e5484d;
--amber: #ffca16; /* amber-dark-11 */
--amber-bg: #302008;
--amber-line: #5c3d05;
--amber-solid: #ffc53d;
/* Raised, not recessed: measured 1.26 above the dark card (#21201c), which
is what the retired hand-picked #2b3242 gave at 1.27, but this one is a
real step. Text on it reads 11.16, amber 8.22. */
--panel-ink: #1d2e62; /* indigo-dark-4 */
--panel-ink-text: #eeeeec; /* sand-dark-12 */
--shadow-xs: 0 1px 2px rgba(0,0,0,.6);
--shadow-sm: 0 1px 2px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.5);
--shadow-md: 0 6px 18px -6px rgba(0,0,0,.75), 0 2px 6px -2px rgba(0,0,0,.5);
--shadow-lg: 0 18px 44px -14px rgba(0,0,0,.85);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--sans);
background: var(--bg);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* Line wrapping, site-wide: balance headings/short lines so we never leave one
lone word on its own line, and forbid widows in body copy. Responsive-safe,
no hardcoded (which would just break at other screen widths). */
h1, h2, h3, h4, h5, h6, .pricing-desc, .honest-title, .happen-head { text-wrap: balance; }
p, li, blockquote, figcaption, summary { text-wrap: pretty; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
/* NAV */
nav {
padding: 16px 0;
position: sticky;
top: 0;
z-index: 100;
background: #1f2d5c;
border-bottom: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
nav .container { display: flex; align-items: center; justify-content: space-between; }
.logo { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 30px; font-weight: 900; text-decoration: none; letter-spacing: -1.2px; line-height: 1; }
.logo-icon { height: 36px; width: auto; display: block; }
.logo-tofu { color: #5a99f8; }
.logo-bofu { color: #f59e0b; }
.nav-links { display: flex; gap: 32px; align-items: center;
/* Nav icon-chip colour. Amber on the dark mobile panel; the desktop menus set their own
below (2026-10-06). It was mint #34d399, which is off-palette and is retired. */
--nav-ic: #ffc53d; --nav-ic-bg: rgba(255,197,61,0.12); --nav-ic-bd: rgba(255,197,61,0.28); --nav-ic-hover: #ffd77a;
}
.nav-links > a, .nav-dropdown-trigger { color: #d7dae3; text-decoration: none; font-size: 15px; font-weight: 600; transition: color 0.2s; letter-spacing: -0.1px; }
.nav-links > a:hover, .nav-dropdown-trigger:hover { color: #ffffff; }
.nav-auth { display: inline-flex; align-items: center; gap: 16px; }
.nav-auth-link { color: #d7dae3; text-decoration: none; font-size: 15px; font-weight: 600; transition: color 0.2s; letter-spacing: -0.1px; cursor: pointer; }
.nav-auth-link:hover { color: #ffffff; }
/* Tofu-blue login button (pairs with the Bofu-amber Free Audit) */
.nav-login { background: #3b82f6; color: #ffffff; padding: 11px 22px; border-radius: var(--radius); font-weight: 800; box-shadow: 0 3px 12px rgba(59,130,246,0.35); transition: background 0.18s, box-shadow 0.18s; }
.nav-login:hover { background: #5a99f8; color: #ffffff; box-shadow: 0 5px 16px rgba(59,130,246,0.45); }
/* In-page tabs (Scans / Monitor) */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-top: 20px; }
.tab {
padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--text-dim);
text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.2s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
/* ===================================================================
APP SHELL (authenticated product — distinct from marketing site)
=================================================================== */
body.app { background: var(--page); font-size: var(--text-body); }
/* THE RAIL OVERLAYS THE CONTENT, IT NEVER COMPRESSES IT. Arnav, 2026-08-25:
"when we hover on side nav bar the content gets compressed. Instead of that
keep the content constant, compressing may disturb the formatting."
The grid column is a FIXED 60px slot that never moves; the rail itself is
position:fixed and out of flow, so widening it draws over the page. Two
defects this shape avoids, both found building the mock: animating the width
of an in-flow child reflows the whole content column mid-transition, and a
trigger on the wrapper opens the rail whenever the pointer is anywhere on
screen. Pinning is the one case that DOES reserve space, because reserving
space is what pinning means. */
/* NOT a grid any more, and the reason is worth keeping. The layout WAS
`grid-template-columns: 1fr` with the sidebar as the first item. The
moment the sidebar became position:fixed it stopped being a grid item at all,
auto-placement put .app-main back into column one, and every screen rendered
in a 60px column 11,896px tall. It served byte-identical HTML while doing it;
only a getBoundingClientRect found it. A fixed rail needs a MARGIN, not a
track, because a margin cannot be reassigned by a change in child count. */
.app-layout { min-height: 100vh; }
.app-sidebar {
position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail); z-index: 60;
background: var(--ink); border-right: 1px solid rgba(255,255,255,0.07);
display: flex; flex-direction: column; gap: var(--space-2);
padding: var(--space-4) var(--space-3); overflow: hidden;
transition: width .2s var(--ease), box-shadow .2s var(--ease);
/* The collapsed content box: 60 less the two 12px insets, so 36px spanning
12 to 48 and an axis at 30. Every row's collapsed padding is derived from
it. See "THE COLLAPSED RAIL CENTRES ON ITS OWN AXIS" below. */
--rail-slot: calc(var(--rail) - var(--space-3) * 2);
}
.app-sidebar:hover, .app-sidebar:focus-within { width: var(--rail-open); box-shadow: var(--shadow-lg);
--rail-pad: var(--space-2); }
/* After the pin is released the pointer is still over the rail, so :hover would
hold it open and it would read as stuck. Suppressed until the pointer leaves. */
.app-sidebar.just-picked:hover { width: var(--rail); box-shadow: none; --rail-pad: initial; }
.rail-pinned .app-sidebar { width: var(--rail-open); box-shadow: none; --rail-pad: var(--space-2); }
/* Anything that is a WORD rather than a mark hides while the rail is collapsed.
nowrap plus the rail's own overflow does the clipping, so nothing reflows. */
.app-rail-word { white-space: nowrap; opacity: 0; transform: translateX(-6px);
transition: opacity .18s var(--ease), transform .22s var(--ease); }
.app-sidebar:hover .app-rail-word, .app-sidebar:focus-within .app-rail-word,
.rail-pinned .app-rail-word { opacity: 1; transform: none; }
.app-sidebar.just-picked:hover .app-rail-word { opacity: 0; transform: translateX(-6px); }
.app-logo-row { display: flex; align-items: center; min-height: 34px; }
.app-logo { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2);
min-height: 34px; font-weight: 800; font-size: var(--text-title);
letter-spacing: var(--track-tight); text-decoration: none; }
.app-logo-icon { height: 26px; width: 26px; display: block; flex: none; }
.app-logo .tofu { color: var(--ink-dim); } .app-logo .bofu { color: var(--cta); }
/* CO-BRANDED RAIL. The rail is dark and a partner's lockup usually is not:
supplied marks are commonly opaque white-ground PNGs, so a bare would
drop a white slab on the navy. Each mark therefore sits on a deliberate white
plate, which reads as a logo lockup and works identically for a transparent
file. The same decision is made in the OG card and the PDF, for the same
reason, so the three surfaces agree.
THE PLATE IS A PADDED CHIP, NOT LEFTOVER BACKGROUND (spec 2026-09-14). One
`.app-logo-plate` rule owns the fill, the radius and the padding for both
variants, so the mark visibly sits INSIDE a chip rather than the chip being
the edge of the image. The white is NOT keyed out on upload and must never
be: a logo with legitimate white in it would be destroyed silently, on a
customer's brand. The real fix is a transparent asset from the partner.
ONE IMAGE PER SLOT, AND THAT IS WHAT `--pmark` / `--plockup` ENFORCE.
Arnav, 2026-09-14, on the live rail: "we should have just 1 logo for every
partner and customer - not an icon and name separately". The rail had copied
OUR lockup's shape, an icon beside a wordmark, onto a partner mark that is a
single image, so Don's rail rendered his funnel AND his wordmark plus the
attribution: three elements for one logo.
The two variants exist to fit two SHAPES of slot, never to be composed. They
are driven by a PAIR of custom properties written together in every rule
below, so "exactly one is visible" is structural rather than a convention two
separate rules have to keep agreeing on. `tests/test_partner_logo.py` asserts
that every block setting one sets the other, and that they are never equal.
`--text-body` and weight 600 on the attribution: the four sizes and three
weights are product-wide and co-branding is not an exemption. It is legible
on purpose, because a partner mark that is a soundalike of ours will not
separate from ours on its own, and it is SUBORDINATE: one line under the one
mark, never a third storey. */
.app-logo-partner { flex-direction: row; align-items: center; --pmark: block; --plockup: none; }
.app-sidebar:hover .app-logo-partner, .app-sidebar:focus-within .app-logo-partner,
.rail-pinned .app-logo-partner { --pmark: none; --plockup: block; }
/* After a pick the pointer is still inside the rail, so the rail collapses and
the mark has to come back with it, exactly as `.app-rail-word` does. */
.app-sidebar.just-picked:hover .app-logo-partner { --pmark: block; --plockup: none; }
/* THE CHIP IS SIZED FROM THE MARK OUT, NOT FROM THE BOX IN. Measured in a
browser on a real co-branded workspace: the first cut of this rule gave the
plate 8px of padding inside boxes of 30px and 24px, so the partner's mark
was left a 14x14 and a 134x8 CONTENT box, smaller than the build Arnav had
already called bad (18x18 and 134x12). A 797x151 wordmark contained into
134x8 paints 42x8 and reads as an empty white rectangle with a sliver in it,
which is the complaint this spec exists to answer, made worse. Padding is
therefore one step (4px) and the growth goes to the MARK: 24x24 and ~127x24
of content. Both variants are the same 32px chip, so the header does not
change height when the rail opens, and 32 plus the rail's own 20px inset
still clears the 60px collapsed slot by 8px.
`align-self: flex-start` on the lockup is load-bearing, not a tidy-up. The
attribution makes `.app-rail-word` a COLUMN flex container, so an img with
`width: auto` stretches to the column's width and stops at `max-width`, and
`object-fit: contain` then letterboxes the mark inside all that white. That
stretch is what made the plate read as leftover background on both the base
build and the first cut. Shrink-to-fit makes the white hug the mark, which
is what a chip is. */
.app-logo-plate { background: #fff; border-radius: 8px; padding: var(--space-1);
object-fit: contain; }
.app-logo-pmark { display: var(--pmark); height: 32px; width: 32px; flex: none; }
.app-logo-plockup { display: var(--plockup); height: 32px; width: auto; max-width: 150px;
align-self: flex-start; }
.app-logo-partner .app-rail-word { display: flex; flex-direction: column; gap: var(--space-1); }
.app-logo-meta { font-size: var(--text-body); font-weight: 600; color: var(--ink-dim);
letter-spacing: 0; white-space: nowrap; }
/* The rail toggle everyone already knows, from ChatGPT and Claude: by the
wordmark, visible only once the rail is open, pins or unpins in one click.
The "keep menu open" pin label was tried and dropped as unfamiliar. */
.app-rail-toggle { margin-left: auto; background: none; border: 0; color: var(--ink-dim);
cursor: pointer; border-radius: var(--radius); padding: var(--space-1); opacity: 0;
display: flex; transition: opacity .18s var(--ease), background .16s var(--ease), color .16s var(--ease); }
.app-rail-toggle:hover { background: rgba(255,255,255,.09); color: var(--ink-text); }
.app-rail-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.app-sidebar:hover .app-rail-toggle, .app-sidebar:focus-within .app-rail-toggle,
.rail-pinned .app-rail-toggle { opacity: 1; }
/* THE MARK NEVER MOVES. Every row in the rail is flex-start with the SAME
padding-left in both states, so the icon sits at one x whether the rail is
60px or 232px and nothing slides sideways when it opens.
Centring the collapsed row was tried and is what this replaces. The label is
104px wide and only faded, so it keeps its box: a flex container whose
content overflows CENTRES the overflow and spills it on both sides, which
pushed every icon to a negative x where the rail's overflow:hidden clipped
it. Three rows were affected differently because each label is a different
width, so the icons landed ragged. The mobile drawer never had the bug
because it was already flex-start. Measured, not reasoned: icons now read
left=20 collapsed and left=20 open, on every page, in both themes. */
.app-new { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3);
background: var(--cta); color: var(--cta-text); border-radius: var(--radius);
padding: var(--space-3) var(--space-2); min-height: 46px; font-weight: 600; font-size: var(--text-body);
text-decoration: none; transition: box-shadow .16s var(--ease), transform .16s var(--ease); }
.app-new:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
/* An ICON IS NOT TYPE, so it is not bound by the four sizes. This one is drawn,
not set, which is why it can be 22px while every label stays at 14.
IT IS NOW ACTUALLY DRAWN, 2026-09-10. It held a TEXT "+" at font-size 22
while every other rail icon is a 22px SVG in the same 24px slot, so this one
row's mark depended on the webfont: with Plus Jakarta Sans loaded it lines up
(measured at 1440 on /overview: icon left 20, centre 32, label 50, row 46,
identical to a nav row), and with the fallback font it moves, because a
glyph's ink box is the typeface's business and an SVG's is not.
`min-height` above went 44 -> 46 in the same change. It was the one literal
in this rule that disagreed with `.app-nav a`, and it was dead rather than
visible (padding plus a 22px child already made the row 46), which is
exactly the kind of disagreement that becomes visible the next time somebody
changes the padding. WHAT WAS NOT TRUE: an earlier note claimed the two rows
put their labels at x=44 and x=42 and their icon centres 1px apart. Measured
in the browser they are identical on both counts, because `.app-nav-ico`
already gives every nav icon the same 24px slot this one has. */
.app-new-ico { flex: none; width: 24px; display: grid; place-items: center; }
.app-new-ico svg { width: 22px; height: 22px; display: block; fill: none;
stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.app-nav { display: flex; flex-direction: column; gap: 2px; }
.app-nav a {
display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3);
padding: var(--space-2); min-height: 46px; border-radius: var(--radius);
color: var(--ink-text); text-decoration: none; font-size: var(--text-body); font-weight: 600;
transition: background .16s var(--ease), color .16s var(--ease);
}
.app-nav a:hover { background: rgba(255,255,255,0.09); }
/* THE ACTIVE-STATE RAIL IS GONE, 2026-09-10, AND ARNAV REVOKED HIS OWN
EXCEPTION FOR IT: "no vertical or horizontal highlights pls - nowhere on the
product."
The reasoning that carved it out on 2026-08-25 is kept rather than deleted,
because it was a real argument and the record of it being overruled is the
useful part: the bar was allowed here on the grounds that CLAUDE.md bans
DECORATIVE rails while this one carried state, and that in a dark rail it
was the only thing saying where you are.
That second half turned out not to be true. The line below already sets
`color: var(--cta)`, so the current item is amber against white siblings and
sits on a lighter ground; the bar repeated what the colour and the ground
were both saying. Nothing is lost by removing it, which is why it goes with
the other eight rather than being argued for again. */
.app-nav a.active { background: rgba(255,255,255,0.11); color: var(--cta); }
.app-nav a .app-nav-ico { flex: none; width: 24px; display: grid; place-items: center; }
.app-nav a svg { width: 22px; height: 22px; flex-shrink: 0; stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round; }
/* THE COLLAPSED RAIL CENTRES ON ITS OWN AXIS (2026-09-14). Arnav, on the
shipped build: "just align the logo icon in collapsed side rail. and the +
icon is not center aligned."
ONE ROOT CAUSE, FOUR SYMPTOMS. Every rail row is `flex-start` with the left
padding an OPEN rail wants, where an icon sits beside a label. Nothing
re-centres when the rail collapses, so the whole icon column sat off-axis,
and each row sat off by a DIFFERENT amount because each leading element is a
different width. Measured in a browser at 1440, collapsed, before this rule:
.app-new-ico 20 to 44, centre 32 (+2)
.app-nav-ico 20 to 44, centre 32 (+2) all seven identical
.app-logo-pmark 20 to 52, centre 36 (+6)
.app-avatar 20 to 50, centre 35 (+5)
The collapsed content box is `--rail` minus the sidebar's own two insets,
36px wide, spanning 12 to 48, so THE AXIS IS 30. A leading element of width
W centres on it when the row's left padding is `(36 - W) / 2`, which is what
`--rail-ico` and the one `calc` below say out loud. Change an icon's size and
you change one number, not an offset somebody has to re-derive.
TWO CORRECTIONS TO THE SPEC, both from measuring rather than reading. The
spec computed the partner plate as `4 + 32 + 4 = 40px` and concluded it must
shrink before it can centre. `box-sizing: border-box` is global here, so the
plate is already 32px total with 24x24 of mark inside it: it fits the 36px
box with 2px to spare and NOTHING IS CLIPPED, before or after. No mark is
resized and no plate padding is traded, which also keeps the TofuBofu path
byte-identical. And the avatar is a fourth instance of the same root cause
that the spec's table does not list; leaving it at 35 would have kept the
rail ragged at the bottom while claiming it was aligned.
THIS SUPERSEDES "THE MARK NEVER MOVES" ABOVE, deliberately. That rule held
the icon at x=20 in BOTH states so nothing slid sideways on open, at the cost
of it never being centred in the state the rail is in almost all the time.
The icon now moves 2px (6px for the plate, 5px for the avatar) as the rail
opens, under a 200ms width animation that is already moving everything else.
The rest of that comment stands and is the reason this is done with PADDING:
`justify-content: center` was tried and is what it replaced, because the
label keeps its box, the content overflows, and a flex container centres
overflow by spilling it BOTH ways, which pushed icons to a negative x.
WHICH STATE THE PADDING IS IN IS WRITTEN IN THE SAME RULE AS THE WIDTH, and
that is the point of `--rail-pad`. It is set nowhere in the collapsed base,
so `var(--rail-pad, )` falls through to the calc; each of
the three rules that WIDENS the rail sets it to `var(--space-2)` in the same
declaration block, and `.just-picked` puts it back to `initial` alongside the
width it also puts back. `initial` on a custom property is the guaranteed-
invalid value, which is the specified way to make `var()` take its fallback.
This copies `--pmark`/`--plockup` on purpose: a state that is two properties
written apart is a state two rules have to remember to keep agreeing on. */
/* `.app-user` is written long because its own rule sits BELOW this one and uses
the `padding` shorthand, which would reset the longhand back. */
.app-logo, .app-new, .app-nav a, .app-sidebar .app-user {
padding-left: var(--rail-pad, calc((var(--rail-slot) - var(--rail-ico)) / 2)); }
.app-logo { --rail-ico: 26px; } /* our own mark */
.app-logo-partner { --rail-ico: 32px; } /* a partner's plate, and it wins */
.app-new, .app-nav a { --rail-ico: 24px; }
.app-user { --rail-ico: 30px; }
.app-side-foot { margin-top: auto; border-top: 1px solid rgba(255,255,255,0.08); padding-top: var(--space-3); }
.app-user { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3);
padding: var(--space-2); margin-bottom: var(--space-1); border-radius: var(--radius);
text-decoration: none; transition: background .15s; }
.app-user:hover { background: rgba(255,255,255,0.06); }
.app-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-solid);
color: #fff; display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: var(--text-body); flex-shrink: 0; }
.app-user-email { font-size: var(--text-body); color: var(--ink-dim);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-side-actions { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-2); }
.app-side-actions button, .app-side-actions a { background: none; border: none;
font-family: var(--sans); font-size: var(--text-body); font-weight: 600;
color: var(--ink-dim); cursor: pointer; text-decoration: none; padding: var(--space-2) var(--space-1); }
.app-side-actions button:hover, .app-side-actions a:hover { color: var(--ink-text); }
/* The workspace block and the log-out row are whole controls, not labels, so
they fade out entirely rather than being clipped to an unusable sliver. They
keep their box, so the rail does not jump height as it opens. */
.app-sidebar .tb-ws, .app-side-actions { opacity: 0; pointer-events: none;
transition: opacity .18s var(--ease); }
.app-sidebar:hover .tb-ws, .app-sidebar:focus-within .tb-ws, .rail-pinned .tb-ws,
.app-sidebar:hover .app-side-actions, .app-sidebar:focus-within .app-side-actions,
.rail-pinned .app-side-actions { opacity: 1; pointer-events: auto; }
/* The rail's reserved space. Pinning is the ONE case that moves it, because
reserving space is what pinning means; hovering must not. */
.app-main { display: flex; flex-direction: column; min-width: 0;
margin-left: var(--rail); transition: margin-left .2s var(--ease); }
.rail-pinned .app-main { margin-left: var(--rail-open); }
/* Page header sits inside the warm content, not a separate black bar: the rail
already says which page you are on, so this holds the title and page actions.
The title takes --text-metric, which is the half of the 2026-08-25 serif
experiment that survived: "too small and congested" was two complaints and
only one of them was about the typeface. */
.app-topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4);
padding: var(--space-6) var(--space-8) 2px; background: transparent; }
.app-topbar h1 { font-size: var(--text-metric); font-weight: 800; letter-spacing: var(--track-tight);
line-height: 1.15; color: var(--text); }
.app-topbar .sub { font-size: var(--text-body); color: var(--text-muted); font-weight: 400; margin-top: var(--space-1); }
.app-topbar .app-burger { color: var(--text); }
/* THE ACTIONS WRAP INSTEAD OF PUSHING THE PAGE SIDEWAYS (review N3,
2026-09-30). `flex-shrink: 0` with no `flex-wrap` means a row that does not
fit does not fit: measured at 1024, the actions were 763px inside a 792px bar
and ran to x=1043, giving the document a 19px horizontal overflow on every
app page. The wrap rule existed only under `max-width: 900px`, so every width
between 901 and about 1100 fell through the gap.
`flex-wrap` is the right shape because it costs nothing when it is not
needed: at 1440 the row still fits on one line and nothing moves.
WRAPPING THE CHILDREN IS HALF THE FIX, AND ON ITS OWN IT CHANGED NOTHING.
Measured after adding `flex-wrap` alone: still 763px of actions in a 728px
content box, 3px of overflow left. The container is itself a flex ITEM of
`.app-topbar`, and `flex-shrink: 0` there meant its width was never bounded
by the bar, so its children never discovered they had to wrap. The shrink
has to move from the CONTAINER to the BUTTONS: the row may now be squeezed,
and each control inside keeps its intrinsic width and wraps whole rather
than squashing its label. */
.app-topbar { flex-wrap: wrap; row-gap: var(--space-3); }
.app-topbar-actions { display: flex; align-items: center; gap: var(--space-2);
flex-shrink: 1; min-width: 0; flex-wrap: wrap; row-gap: var(--space-2);
justify-content: flex-end; }
.app-topbar-actions > * { flex-shrink: 0; }
/* 1600, not 1180. Arnav, 2026-09-05: "You're leaving lot of space on the
right, any reason for that?" -- and there was not a good one. 1180 is a
READING measure, right for a column of prose and wrong for a dashboard of
grids: on a 2000px window it stranded about 760px, which is why six engine
donuts and six competitor donuts could not sit on one row. The prose blocks
that genuinely need a reading measure cap themselves (see .ov-prose), so
widening here costs nothing and buys two full rows above the fold. */
.app-content { padding: var(--space-4) var(--space-8) 70px; width: 100%; max-width: 1600px; background: var(--page); }
.app-burger { display: none; background: none; border: none; cursor: pointer; color: var(--text);
font-size: 22px; line-height: 1; padding: 2px var(--space-2); }
.app-select { appearance: none; -webkit-appearance: none; padding: 9px 34px 9px 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: var(--text-body); font-family: var(--sans); font-weight: 600; cursor: pointer; white-space: nowrap; line-height: 1.2;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color .15s; }
.app-select:hover { border-color: var(--accent); }
.app-select:focus { outline: none; border-color: var(--accent); }
/* C1, spec 2026-09-30: THE SENTENCE, ON BOTH SCREENS.
One line above the tabs carrying every denominator the screen holds, which is
what ends three-denominators-on-one-screen. `--text-title` at weight 400: it is
prose a customer reads once and believes, not a heading competing with the cards
under it.
HERE RATHER THAN IN overview.html's style block, because it renders on the
report too and rule 2c makes a component on both screens one definition. It was
in the template and the report therefore got the markup with no styling, which
is the half-shipped shape the rule is about. */
.ov-sentence { margin: var(--space-6) 0 var(--space-4); font-size: var(--text-title);
font-weight: 400; line-height: 1.45; max-width: 78ch; letter-spacing: -.01em; }
.ov-sentence b { font-weight: 800; }
.ov-sentence .you { color: var(--cta-bg); }
/* C6, spec 2026-09-30: THE BRAND SELECTOR IS NAVY, NOT AMBER. Arnav's call, and
the reason is that amber is the ACTION colour and is already spent on Ask the
Analyst; a second amber control in one topbar would make two things compete for
one meaning. Navy is the rail's own colour, which is what this product already
uses to say "you are here", and a brand selector is exactly that statement.
The chevron is redrawn in --ink-text because the dark fill swallows the grey
one, which is the kind of detail only a render catches. */
.app-select-ink { background-color: var(--ink); border-color: var(--ink); color: var(--ink-text);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23fdfdfc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.app-select-ink:hover, .app-select-ink:focus { border-color: var(--ink); filter: brightness(1.15); }
/* AND THE SAME THING ON THE ENHANCED CONTROL, WHICH IS THE ONE ACTUALLY ON
SCREEN. `tb-listbox.js` replaces every