/* ============================================================================
Z Brand UI kit — chrome.css · v2.0.0 · 2026-08-25 · THE STANDARD
One light system, every app. Serif where the brand talks, grotesque where
the interface works. SSOT: orchestrator/docs/BRAND_IDENTITY.md v2.1 + build
spec §8 ("The Standard in apps") in
orchestrator/shared-memory/reference_zbrand_standard_build_spec.md.
Source of truth: 5202307/zbrand-ui.
Vendored copy — do not edit in the app; run `npm run sync-ui` instead.
Every class is prefixed `zb-` so it never collides with app-local CSS.
v2.0.0 keeps the FULL v1.0.3 class inventory — same names, new tokens:
radius 0 everywhere, no shadows, espresso the one accent, DM Mono retired.
========================================================================== */
/* ---------- 0 · Fonts (Google Fonts, OFL — Source Serif 4 + Hanken Grotesk).
Apps include this ONE in (Typekit ntv7kpw is retired):
--------------------------------------------------------------------------- */
/* ---------- 1 · Tokens ----------------------------------------------------- */
:root {
/* surfaces — paper ground, stone washes (never pure white) */
--bg: #FAF9F6; --bg2: #FAF9F6; --bg3: #ECE9E2; --bg4: #E4E1D8; --bg5: #DAD5C8;
/* borders — hairline draws the page; border is control hardware */
--border: #E2DED4; --border2: #C9C4B8; --border3: rgba(27,26,24,0.28);
/* ink, 4 tiers (fg3 = taupe, the secondary-text voice) */
--fg: #1B1A18; --fg2: #57524A; --fg3: #857E71; --fg4: #A6A093;
/* espresso = the ONE accent (eyebrows, hovers, active states). Ink = ACTION. */
--accent: #4A3B2F; --accent2: #3A2E24;
--accent-tint: rgba(74,59,47,0.08); --accent-tint2: rgba(74,59,47,0.16);
/* semantic — tooling, not brand; text and thin washes only, never chrome */
--danger: #B23A2E; --danger-tint: rgba(178,58,46,0.10);
--warn: #B07A37; --warn-tint: rgba(176,122,55,0.12);
--success:#4E7A52; --success-tint:rgba(78,122,82,0.12);
/* heatmap — the ONLY intensity scale for tables (espresso, 5 steps) */
--heat-1: rgba(74,59,47,0.06); --heat-2: rgba(74,59,47,0.14);
--heat-3: rgba(74,59,47,0.26); --heat-4: rgba(74,59,47,0.42); --heat-5: rgba(74,59,47,0.62);
/* channel identity — chips only, never chrome */
--ch-meta:#1877F2; --ch-google:#F4B400; --ch-tiktok:#EE1D52; --ch-pinterest:#E60023;
--ch-klaviyo:#9333EA; --ch-email:#4A3B2F; --ch-organic:#4E7A52; --ch-geo:#5B8A72;
/* studio mat — every product/model/scene thumbnail ground (§8.6) */
--mat: #E0DFDB;
/* type — serif is the brand voice (titles, sections, entity names, one aside);
Hanken is EVERYTHING interactive. --fm survives as a variable so app-local
rules keep resolving, but it now points at Hanken: DM Mono is retired —
pair numeric uses with .zb-num / font-variant-numeric: tabular-nums. */
--fp: "Source Serif 4", Georgia, "Times New Roman", serif; /* brand voice */
--fs: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; /* interface */
--fm: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; /* numbers: use tabular-nums */
--fa: "Source Serif 4", Georgia, "Times New Roman", serif; /* asides: italic 400 */
/* radii — ONE scale, and the scale is zero. Variables kept so app-local
rules referencing them resolve to The Standard's square hardware. */
--r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-2xl: 0;
/* micro tracking */
--track-micro: 0.16em;
/* chrome dimensions — fixed across apps (§8.3: the bones survive) */
--zb-top-h: 52px; --zb-side-w: 220px; --zb-content-max: 1400px;
/* motion — §8.10: opacity and transform only, nothing springy */
--zb-fast: 120ms; --zb-med: 200ms;
/* z */
--z-top: 30; --z-drop: 40; --z-modal: 50; --z-toast: 60; --z-tip: 70;
}
/* ---------- 2 · Base ------------------------------------------------------- */
.zb-app, .zb-app * { box-sizing: border-box; }
.zb-app {
background: var(--bg); color: var(--fg);
font-family: var(--fs); font-size: 13px; line-height: 1.5;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
font-variant-numeric: tabular-nums;
}
/* Links are opt-in: bare inherits colour (apps style anchors per component).
Add .zb-link (or wrap prose in .zb-prose) for espresso text links. */
.zb-app :where(a) { text-decoration: none; }
.zb-app :where(a.zb-link, .zb-prose a) { color: var(--accent); }
.zb-app :where(a.zb-link, .zb-prose a):hover { color: var(--accent2); text-decoration: underline; text-underline-offset: 2px; }
/* Focus ring — 1px ink, offset 2px (§8.4). Never change radius on focus. */
.zb-app :where(:focus-visible) { outline: 1px solid var(--fg); outline-offset: 2px; }
/* Hardened ring for interactive elements. The :where() form above has ZERO specificity,
so any app-local `outline: none` reset silently removed the ring — the QA crawler's
focus-ring-missing class hit ~25 views on 2026-08-20. This rule outweighs those resets
for keyboard focus. Form fields and .zb-info are excluded: they paint their own ring
(border + outline below), and a second outline would double it. */
.zb-app :is(a, button, [role="button"], summary, [tabindex]:not(.zb-info)):not(.zb-input):not(.zb-select):not(.zb-textarea):focus-visible {
outline: 1px solid var(--fg); outline-offset: 2px;
}
/* ZERO specificity on the whole selector — :where() must wrap .zb-app too. With a
bare `.zb-app` prefix this reset is (0,1,0): it TIES with app-local component
classes like `.btn-primary{color:...}` and wins on load order (chrome.css loads
after app styles), painting ink-on-ink buttons. Found live on Loom's sign-in
during the v2 re-skin. */
:where(.zb-app) :where(button, input, select, textarea) { font-family: inherit; font-size: inherit; color: inherit; }
.zb-app ::placeholder { color: var(--fg4); }
.zb-app ::selection { background: var(--accent-tint2); }
@media (prefers-reduced-motion: reduce) { .zb-app * { transition: none !important; animation: none !important; } }
/* Type roles — the §8.2 app ramp */
.zb-h1 { font-family: var(--fp); font-weight: 500; font-size: 27px; line-height: 1.15; letter-spacing: 0; color: var(--fg); margin: 0; text-wrap: balance; }
.zb-h2 { font-family: var(--fp); font-weight: 500; font-size: 19px; line-height: 1.25; color: var(--fg); margin: 0; }
.zb-h3 { font-family: var(--fs); font-weight: 600; font-size: 13px; color: var(--fg); margin: 0; }
.zb-eyebrow { font-family: var(--fs); font-size: 10px; font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--accent); }
.zb-sub { font-size: 11.5px; color: var(--fg3); }
.zb-num { font-family: var(--fs); font-weight: 500; font-variant-numeric: tabular-nums; }
.zb-kpi { font-family: var(--fs); font-size: 24px; font-weight: 500; letter-spacing: -0.01em; color: var(--fg); line-height: 1.1; font-variant-numeric: tabular-nums; }
.zb-muted { color: var(--fg3); }
.zb-faint { color: var(--fg4); }
/* ---------- 3 · App frame -------------------------------------------------- */
.zb-frame { display: grid; grid-template-rows: var(--zb-top-h) 1fr; grid-template-columns: var(--zb-side-w) 1fr; min-height: 100vh; }
.zb-frame.zb-no-side { grid-template-columns: 1fr; }
.zb-main { min-width: 0; padding: 24px 28px 48px; }
.zb-main > .zb-container { max-width: var(--zb-content-max); }
/* ---------- 4 · Top bar ---------------------------------------------------- */
.zb-top {
grid-column: 1 / -1; position: sticky; top: 0; z-index: var(--z-top);
height: var(--zb-top-h); display: flex; align-items: center; gap: 12px;
padding: 0 16px; background: var(--bg); border-bottom: 1px solid var(--border);
}
.zb-wordmark {
display: inline-block; width: 123px; height: 20px; flex-shrink: 0;
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjQ3LjQ4IDYxLjI1NCA2OTguOTM0IDExMy41MjMiIGZpbGw9IiMyMzFGMjAiIGZpbGwtcnVsZT0ibm9uemVybyI+PHRpdGxlPlogQnJhbmQ8L3RpdGxlPjxwYXRoIGQ9Ik0gMzI5LjA3IDExMy44IEwgMzEzLjg0IDExMy43NiBDIDMxMi45NCAxMTMuNzYgMzEyLjExIDExMi43OSAzMTIuMTEgMTExLjgyIEwgMzEyLjExIDc3LjA4IEMgMzEyLjExIDc0LjU5IDMxMS45NSA3My44MyAzMTIuMTQgNzEuOTQgQyAzMTIuMyA3MC4zMSAzMTMuMDUgNjkuNTkgMzEzLjc2IDY4Ljg2IEMgMzE0LjQ2IDY4LjEyIDMxNS42OSA2Ny4zMSAzMTcuNiA2Ny4yOSBDIDMxOS40NSA2Ny4yNiAzMTkuOTkgNjcuMjkgMzIyLjA0IDY3LjI5IEwgMzI5LjQ1IDY3LjI5IEMgMzM1LjIgNjcuMjkgMzM5Ljc0IDY5LjE0IDM0My44NyA3My4xOCBDIDM0OC4yNiA3Ny41MiAzNTAuNDYgODMuMjQgMzUwLjQ2IDkwLjM1IEMgMzUwLjQ2IDk3LjEyIDM0OC40NCAxMDIuNjggMzQ0LjM5IDEwNy4wNCBDIDM0MC4zNSAxMTEuNCAzMzUuNDcgMTEzLjggMzI5LjA3IDExMy44IE0gMjczLjcyIDY3LjI5IEwgMjgzLjI5IDY3LjI5IEMgMjg0Ljg3IDY3LjI5IDI4Ni40NyA2Ny40MiAyODcuNjkgNjcuOTMgQyAyODguOTEgNjguNDUgMjg5LjY0IDY5LjE0IDI5MC4zOCA2OS45IEMgMjkxLjEgNzAuNjYgMjkxLjU3IDcxLjY1IDI5MS43NyA3Mi44OSBDIDI5MS45NyA3NC4xNCAyOTIuMDcgNzYuMTggMjkyLjA3IDc2LjE4IEwgMjkyLjA3IDE1Mi4yNCBDIDI5Mi4wNyAxNjAuMzYgMjkxLjkxIDE2Mi4wOSAyOTEuNTkgMTYzLjQxIEMgMjkxLjI3IDE2NC43MiAyOTAuODQgMTY2LjI3IDI4OS45MSAxNjcuMTcgQyAyODguOTggMTY4LjA3IDI4OS4xIDE2OC4wNCAyODguMTMgMTY4LjUgQyAyODYuNzMgMTY5LjE2IDI4NC45OCAxNjkuMTkgMjgzLjM2IDE2OS4xOSBMIDI3NC4xMyAxNjkuMTkgTCAyNzQuMTMgMTcyLjg1IEwgMzMwLjIzIDE3Mi44OSBMIDMzMC4yNSAxNjkuMjMgQyAzMzAuMjUgMTY5LjIzIDMxOS43IDE2OS4yMyAzMTguMTggMTY5LjE4IEMgMzE2LjIyIDE2OC45NCAzMTUuMDIgMTY4LjE5IDMxNC4wNCAxNjcuMTcgQyAzMTIuNzUgMTY1LjkgMzEyLjI2IDE2NC43IDMxMi4xNCAxNjMuMjcgQyAzMTIuMDMgMTYxLjkzIDMxMi4wMyAxNjAuNjMgMzEyLjAzIDE1OC42OCBMIDMxMi4wNyAxMTkuMzQgQyAzMTIuMDcgMTE4LjM3IDMxMi44NSAxMTcuNTggMzEzLjgxIDExNy41OCBMIDMyMy40MSAxMTcuNjEgQyAzMjkuNzYgMTE3LjU5IDMzNC40NyAxMTcuMzEgMzM2LjUgMTE5Ljg3IEMgMzM5Ljc0IDEyMi43NCAzMzkuMTQgMTQwLjA0IDM0MC42NiAxNTAuMTggQyAzNDIuMTEgMTU5Ljk1IDM0My4wNSAxNjEuNjkgMzQ0LjY4IDE2NC42MiBDIDM0Ny45OSAxNzAuNTggMzUzLjI1IDE3NC4wNSAzNjEuNTggMTc0LjA1IEMgMzY4LjI4IDE3NC4wNSAzNzAuOCAxNzEuMTQgMzc0IDE2NC4xOSBDIDM3NiAxNTkuODQgMzc2Ljk0IDE1NC42NSAzNzYuOTQgMTQ4LjA3IEMgMzc2Ljk0IDE0Ny40NCAzNzYuODkgMTQ2LjQ4IDM3Ni44IDE0NS4xOSBDIDM3Ni44IDE0NS4wOCAzNzYuNzUgMTQ0LjMzIDM3Ni41OSAxNDMuNzkgQyAzNzYuMzIgMTQyLjYyIDM3NS43MyAxNDAuOTYgMzczLjUyIDE0MS4xMSBDIDM3MS45MSAxNDEuMjEgMzcxLjEgMTQyLjU2IDM3MS4zNCAxNDMuOTIgQyAzNzEuMzQgMTQzLjk1IDM3MS4zNCAxNDMuOTYgMzcxLjM0IDE0My45OCBDIDM3MS4zNCAxNDMuOTkgMzcxLjQxIDE0NC4zNCAzNzEuNCAxNDQuMzUgQyAzNzEuNCAxNDQuMzUgMzcyLjE3IDE0Ny4wOSAzNzIuOCAxNTAuNjEgQyAzNzMuMzQgMTU1LjQzIDM3MS45NCAxNjAuOTcgMzcwLjUzIDE2My4yNyBDIDM2OS4wNyAxNjQuOTggMzY3Ljg5IDE2NS41NiAzNjYuMTYgMTY0LjkxIEMgMzY0LjIgMTY0LjE4IDM2My42MiAxNjAuMzkgMzYyLjg2IDE1Ni43NSBDIDM2Mi44NSAxNTYuNyAzNjIuODQgMTU2LjY0IDM2Mi44MyAxNTYuNTggQyAzNjIuMzEgMTUyLjU3IDM2MS44MiAxNDguNTUgMzYxLjM2IDE0NC41NCBDIDM2MC42NiAxMzkuMDQgMzYwLjQ1IDEzMy41NSAzNTYuNSAxMjMuMjYgQyAzNTQuODcgMTE5LjgzIDM1MC4zMyAxMTYuNjQgMzQ2LjE5IDExNS4xNCBDIDM0NC43IDExNC41MSAzNDMuODQgMTE0LjMzIDM0My42NiAxMTQuMTEgQyAzNDMuOTMgMTEzLjk1IDM0My45NCAxMTQuMDIgMzQ0Ljk0IDExMy43NCBDIDM1MS4xOCAxMTIuODcgMzU2LjE4IDExMS41NCAzNjAuOCAxMDcuODYgQyAzNjcuNDMgMTAyLjU1IDM2OS42MyA5OS4xMiAzNjkuNjMgODkuNzcgQyAzNjkuNjMgODEuNDkgMzY3LjQgNzMuODYgMzU4Ljk2IDY4LjcgQyAzNTEuNDUgNjQuMTIgMzQzLjg0IDYzLjY5IDMzMy4wNCA2My43MiBMIDI3My43MiA2My42OCBaIE0gMjczLjcyIDY3LjI5Ii8+PHBhdGggZD0iTSAxMzAuNjYgMTQ1LjkxIEMgMTI4LjU0IDE1MC44NSAxMjUuMjkgMTU2LjU1IDEyMi4zNiAxNTkuMzQgQyAxMTguNDUgMTYzLjA5IDExNS41NyAxNjUuMDUgMTEwLjEgMTY2Ljg4IEMgMTA0LjYzIDE2OC43MSA5NS44NiAxNjkuMjEgODkuMzIgMTY5LjIxIEwgNzQuMjYgMTY5LjIgTCAxMzYuNzMgNjcuOSBMIDEzOC43MyA2NC40NSBDIDEzOC45MyA2NC4xMSAxMzguNjggNjMuNjggMTM4LjI5IDYzLjY4IEwgNTYuMzEgNjMuNzEgTCA1NS40OSAxMDIuOTggTCA1OS4xNCAxMDIuOTggQyA1OS4xNCA5OC41IDYwLjMxIDkxLjQ2IDYxLjM2IDg3Ljc2IEMgNjIuMzkgODQuMDUgNjQuMzYgODAuMSA2Ni41NiA3Ny4zMSBDIDcxLjIgNzEuMzkgNzYuNjMgNjcuNTkgODQuNzcgNjcuMzMgQyA4OS4yIDY3LjE4IDExMi41MyA2Ny4zMSAxMTIuNTMgNjcuMzEgTCA0Ny42OSAxNzIuMTIgQyA0Ny40OCAxNzIuNDYgNDcuNzEgMTcyLjk1IDQ4LjIzIDE3Mi45NSBMIDEzNS4yMiAxNzIuOTEgTCAxMzcuOCAxMjkuODkgTCAxMzQuMDUgMTI5Ljg5IEMgMTM0LjA1IDEzNC41NiAxMzMuMDcgMTQwLjI4IDEzMC42NiAxNDUuOTEiLz48cGF0aCBkPSJNIDU3MC4wMyA2Ny4zMSBMIDU3Ny4wNSA2Ny4zMSBDIDU3OS4xNiA2Ny4zMSA1ODEuMjcgNjcuNDMgNTgyLjczIDY4LjA5IEMgNTgzLjggNjguNTcgNTg0LjIgNjguODIgNTg1LjE4IDY5LjYzIEMgNTg2LjI4IDcwLjUzIDU4Ny4wNyA3MS41OSA1ODcuNzcgNzMuNCBDIDU4OC40NiA3NS4yMSA1ODguNDYgNzcuNDEgNTg4LjQ2IDgwLjAxIEwgNTg3Ljk5IDEzNy44NyBMIDUzMC4xNCA2My42NyBMIDQ5NS43IDYzLjc0IEwgNDk1LjczIDY3LjMzIEwgNTAwLjkgNjcuMzMgQyA1MDIuNzQgNjcuMzMgNTAzLjk4IDY3LjMzIDUwNS44OSA2Ny44IEMgNTA3LjQyIDY4LjE3IDUwOS4xNiA2OS4wOCA1MTAuNTggNzAuNjUgQyA1MTEuNjEgNzEuNzggNTE0LjE1IDc0LjkxIDUxNC4xNSA3OS41OCBMIDUxNC4xNSAxNTcuNjMgQyA1MTQuMTUgMTU5LjggNTEzLjkxIDE2MS40NSA1MTMuNDQgMTYyLjU5IEMgNTEyLjk3IDE2My43MiA1MTIuMjUgMTY0Ljc4IDUxMS4yNyAxNjUuNzcgQyA1MTAuMyAxNjYuNzYgNTA5LjMyIDE2Ny41NCA1MDguMzIgMTY4LjEyIEMgNTA2LjgxIDE2OC45OSA1MDQuMzQgMTY5LjE4IDUwMi45IDE2OS4xOCBMIDQ5NS42NSAxNjkuMTggTCA0OTUuNjUgMTcyLjkyIEwgNTM5LjE1IDE3Mi45MiBMIDUzOS4xNSAxNjkuMTQgTCA1MzQuMTUgMTY5LjE0IEMgNTMyLjcgMTY5LjE0IDUyOS4yNSAxNjguODggNTI3Ljc4IDE2OC4zOCBDIDUyNi4zMSAxNjcuODcgNTI0Ljk5IDE2Ny4xMSA1MjMuODIgMTY2LjEgQyA1MjEuNjUgMTY0LjMyIDUyMC41NyAxNjEuNzggNTIwLjU3IDE1Ny45MiBMIDUyMC41NyA4My43NCBMIDU5My4zIDE3NC40IEMgNTkzLjYgMTc0Ljc4IDU5NC4yMSAxNzQuNTYgNTk0LjIxIDE3NC4wNyBMIDU5NC40NyA3Ny44OCBDIDU5NC40NyA3Ni4yOSA1OTQuNTMgNzQuNzggNTk1LjExIDczLjA5IEMgNTk1LjcgNzEuNDEgNTk2LjcxIDcwLjA1IDU5OC4xNiA2OS4wNCBDIDU5OS4xIDY4LjQxIDYwMC4xMiA2Ny45NSA2MDEuMiA2Ny42MyBDIDYwMi4yOSA2Ny4zMiA2MDMuNTYgNjcuMzEgNjA1LjEyIDY3LjMxIEwgNjEyLjc3IDY3LjMxIEwgNjEyLjc4IDYzLjcxIEwgNTcwLjAyIDYzLjcyIFogTSA1NzAuMDMgNjcuMzEiLz48cGF0aCBkPSJNIDY5Ny4xIDE1Mi45NiBDIDY5NC4zMiAxNTkuNSA2OTAuNTQgMTY0LjEyIDY4NS43NiAxNjYuODIgQyA2ODIuNyAxNjguNTUgNjgxLjg5IDE2OC42NSA2NzYuNzcgMTY5LjEgTCA2NjcuMDYgMTY5LjE5IEMgNjY1LjQ1IDE2OS4xOSA2NjQuMDggMTY5LjIxIDY2Mi41OCAxNjguOCBDIDY2MS4wOCAxNjguMzkgNjU5Ljg4IDE2Ny44NiA2NTguOTkgMTY3LjE4IEMgNjU3LjIxIDE2NS44OCA2NTYuMDYgMTY0LjIgNjU1LjU0IDE2Mi4xMyBDIDY1NSAxNjAuMDYgNjU0Ljc0IDE1Ny4zNiA2NTQuNzQgMTU0LjA0IEwgNjU0Ljc0IDc3Ljg2IEMgNjU0Ljc0IDc2LjAzIDY1NC45MiA3NC40OCA2NTUuMjkgNzMuMiBDIDY1NS45NiA3MS4wNSA2NTYuOTQgNjkuMTEgNjYwLjczIDY3LjggQyA2NjEuODcgNjcuNDMgNjYyLjg2IDY3LjMyIDY2NC41OCA2Ny4zMiBMIDY3NC4yNSA2Ny4zMiBDIDY4My40MiA2Ny4zMiA2ODkuNTEgNzEuMzYgNjk0LjUxIDc5LjQ1IEMgNjk5Ljc5IDg3LjkxIDcwMi40MyAxMDEuMTMgNzAyLjQzIDExNy41NCBDIDcwMi40MyAxMzEuODMgNzAwLjY1IDE0NC41NCA2OTcuMSAxNTIuOTYgTSA2NzMuNTcgNjMuNzEgTCA2MTYuMzYgNjMuNyBMIDYxNi4zOCA2Ny4zIEwgNjI1LjcxIDY3LjMgQyA2MjcuMDMgNjcuMzMgNjI4LjMyIDY3LjU2IDYyOS42NiA2OC4xMSBDIDYzMC45OSA2OC42NiA2MzIuMTMgNjkuNTIgNjMzLjA4IDcwLjY3IEMgNjMzLjY5IDcxLjQ0IDYzNC4xMiA3Mi4yOSA2MzQuMzcgNzMuMiBDIDYzNC42MiA3NC4xMSA2MzQuNzUgNzUuNTggNjM0Ljc1IDc3LjYgTCA2MzQuNzUgMTU5LjE0IEMgNjM0Ljc1IDE2MC4zOSA2MzQuNjIgMTYxLjU2IDYzNC4zNyAxNjIuNjQgQyA2MzQuMTIgMTYzLjcyIDYzMy42NiAxNjQuNzIgNjMzIDE2NS42NCBDIDYzMS45OSAxNjYuODQgNjMwLjYzIDE2Ny43NSA2MjguOTEgMTY4LjM4IEMgNjI3LjUyIDE2OC44NiA2MjYuMTQgMTY5LjE5IDYyNC42MyAxNjkuMTkgTCA2MTYuMzQgMTY5LjI2IEwgNjE2LjM0IDE3Mi45IEwgNjY1Ljk1IDE3Mi45NCBDIDY5My4yMyAxNzMuMTIgNjk5LjQ4IDE3MC4yIDcwOS4yNiAxNTkuMTMgQyA3MTguNTQgMTQ4LjU5IDcyMy4xOCAxMzMuMjMgNzIzLjE4IDExNy4zOSBDIDcyMy4xOCAxMDEuMzIgNzE4LjYxIDg2LjUzIDcwOC41IDc2IEMgNjk4LjgzIDY1Ljk0IDY4OC4yNyA2My43MSA2NzMuNTcgNjMuNzEiLz48cGF0aCBkPSJNIDIzOS41OCAxNjMuODYgQyAyMzQuMzggMTY4LjYzIDIzMS4xIDE2OS4xNCAyMjAuNTggMTY5LjE4IEwgMjE0LjI1IDE2OS4xOCBDIDIxMC43NSAxNjkuMTggMjA4LjAyIDE2OC40NyAyMDYuMDggMTY2LjMgQyAyMDUuMjQgMTY1LjI5IDIwNC42NCAxNjQuMTQgMjA0LjI5IDE2Mi44NCBDIDIwMy45MiAxNjEuNTQgMjAzLjc0IDE2MC4wNSAyMDMuNzQgMTU4LjM2IEwgMjAzLjc0IDExNy42MSBMIDIxNC4yNyAxMTcuNTkgQyAyMTcuMDIgMTE3LjYzIDIxOS4zOCAxMTcuNTQgMjIxLjcgMTE3LjU5IEMgMjI5LjQ5IDExNy43NyAyMzQuNCAxMTkuNDIgMjM4Ljc1IDEyMi41MSBDIDI0NC4yOCAxMjYuNDMgMjQ3LjA0IDEzNC42MyAyNDcuMDQgMTQzLjExIEMgMjQ3LjA0IDE1MS4xNiAyNDQuNSAxNTkuMzYgMjM5LjU4IDE2My44NiBNIDIwMy40MSA3OC42MyBMIDIwMy40MSA3NC44NCBDIDIwMy40MSA3My4xMSAyMDQuMDMgNzAuNiAyMDQuOTggNjkuNjQgQyAyMDUuNzkgNjguNDggMjA3LjMyIDY3LjUgMjA4LjcxIDY3LjM2IEMgMjEwLjg5IDY3LjE2IDIxMS42NSA2Ny4zNiAyMTMuMTggNjcuMzUgTCAyMjAuMSA2Ny4zNSBDIDIyNi44MiA2Ny4zNSAyMzEuNTIgNjkuNiAyMzUuODggNzMuNjIgQyAyNDAuMjQgNzcuNjQgMjQyLjQyIDgzLjg5IDI0Mi40MiA5MC4zOSBDIDI0Mi40MiA5Ny4wNyAyNDAuMTcgMTAzLjUgMjM1LjY3IDEwNy42NiBDIDIzMS4xNyAxMTEuODIgMjI2Ljg5IDExMy45IDIyMC4xNyAxMTMuOSBMIDIwMy40MSAxMTMuOSBaIE0gMTY0LjkxIDE3Mi45MSBMIDIyNy4yIDE3Mi45MSBDIDIzOC4zMiAxNzIuOTEgMjQ3LjUxIDE3MS40MiAyNTUuMDEgMTY2LjE4IEMgMjYzLjE4IDE2MC41IDI2Ny4yNyAxNTIuODIgMjY3LjI3IDE0My4xNSBDIDI2Ny4yNyAxMzQuNTQgMjYzLjcxIDEyNy41OCAyNTYuNTkgMTIyLjI5IEMgMjUwLjE1IDExNy40OCAyNDIuNDggMTE1LjA3IDIzMy41OSAxMTUuMDcgQyAyNDEuMDkgMTE0LjQ5IDI0Ny42OCAxMTEuNzkgMjUzLjM0IDEwNi45NSBDIDI1OS4wMSAxMDIuMTEgMjYxLjg1IDk2LjUgMjYxLjg1IDkwLjEgQyAyNjEuODUgODEuNTggMjU3LjkzIDc0Ljc5IDI1MC4wOSA2OS43NCBDIDI0Mi45OCA2NS4xNyAyMzQgNjMuNTggMjIzLjI4IDYzLjY5IEwgMTY0LjkyIDYzLjcxIEwgMTY0Ljk1IDY3LjMxIEwgMTc1LjU4IDY3LjI4IEMgMTc3Ljc5IDY3LjM1IDE3OS4wMSA2OCAxODAuMDEgNjguODMgQyAxODIuMTQgNzAuMTQgMTgyLjc5IDcyLjU3IDE4Mi45NiA3NC43OSBDIDE4My4wOSA3NS44NSAxODMuMTYgNzcuMjIgMTgzLjE2IDc4LjkxIEwgMTgzLjE2IDE1Ny4wOCBDIDE4My4wOCAxNTguOTUgMTgzIDE1OS45MSAxODIuNyAxNjEuNTEgQyAxODIuNDQgMTYyLjk0IDE4Mi4wNCAxNjQuNDUgMTgxLjQ1IDE2NS41IEMgMTgwLjY4IDE2Ni44MyAxNzkuNzUgMTY3LjcxIDE3OC40MyAxNjguNDEgQyAxNzcuMDQgMTY5LjE1IDE3NC4wMSAxNjkuMTggMTcyLjQyIDE2OS4xOCBMIDE2NC45IDE2OS4xOCBaIE0gMTY0LjkxIDE3Mi45MSIvPjxwYXRoIGQ9Ik0gNDQ4LjA2IDEyOS40MSBMIDQzMy45OSA4Ny4zOCBDIDQzMy45OSA4Ny4zNyA0MzMuOTcgODcuMzcgNDMzLjk3IDg3LjM4IEwgNDE2LjYxIDEyOS4zMyBDIDQxNi42MSAxMjkuMzQgNDE2LjYxIDEyOS4zNCA0MTYuNjIgMTI5LjM0IEwgNDQ4LjA1IDEyOS40MyBDIDQ0OC4wNiAxMjkuNDMgNDQ4LjA3IDEyOS40MiA0NDguMDYgMTI5LjQxIE0gMzc3LjgyIDE2OS4yMyBMIDM4My4yNSAxNjkuMjMgQyAzODQuOTIgMTY5LjIzIDM4Ny43MyAxNjguOTYgMzg5LjM5IDE2OC4xNCBDIDM5MC42NyAxNjcuNTIgMzkxLjkxIDE2Ni40OSAzOTMuMTkgMTY1LjMzIEMgMzk0LjA4IDE2NC41NiAzOTUuMDEgMTYzLjgxIDM5NS45OCAxNjIuMzkgQyAzOTYuOTYgMTYwLjk3IDM5Ny43NSAxNTkuNDQgMzk4LjM2IDE1Ny44IEwgNDM5LjA0IDYxLjY3IEMgNDM5LjIxIDYxLjI1IDQzOS44IDYxLjI1IDQzOS45OCA2MS42NyBMIDQ4MC4wNSAxNTYuMzcgQyA0ODEuMjEgMTU5LjMgNDgyLjQxIDE2MS42NSA0ODMuNjMgMTYzLjQgQyA0ODQuODUgMTY1LjE2IDQ4Ni40MSAxNjYuNjYgNDg4LjMgMTY3LjkxIEMgNDg5LjAyIDE2OC4zNSA0ODkuNTggMTY4LjU4IDQ5MC44NSAxNjguODcgQyA0OTEuOTIgMTY5LjExIDQ5My4zMyAxNjkuMTkgNDk0Ljg5IDE2OS4xOSBMIDUwMS4yNCAxNjkuMjIgQyA1MDEuMjUgMTY5LjIyIDUwMS4yNSAxNjkuMjIgNTAxLjI1IDE2OS4yMyBMIDUwMS4yOSAxNzIuODggQyA1MDEuMjkgMTcyLjg5IDUwMS4yOCAxNzIuODkgNTAxLjI3IDE3Mi44OSBMIDQ0MS4zMiAxNzIuODkgQyA0NDEuMzIgMTcyLjg5IDQ0MS4zMSAxNzIuODkgNDQxLjMxIDE3Mi44OCBMIDQ0MS4zMSAxNjkuMTcgQyA0NDEuMzEgMTY5LjE2IDQ0MS4zMiAxNjkuMTYgNDQxLjMyIDE2OS4xNiBMIDQ0OC42MyAxNjkuMTYgQyA0NTAuODYgMTY5LjE2IDQ1Mi42MiAxNjguOTMgNDUzLjkzIDE2OC40OCBDIDQ1NS4yMyAxNjguMDIgNDU2LjMzIDE2Ny4zMyA0NTcuMjIgMTY2LjQyIEMgNDU4LjM5IDE2NS4wNyA0NTkuMDMgMTYzLjU4IDQ1OS4wMyAxNjEuMjcgQyA0NTkuMDMgMTYwLjQ2IDQ1OC45NiAxNTkuOTEgNDU4Ljg4IDE1OS40NSBDIDQ1OC44MSAxNTkuMDQgNDU4LjYxIDE1OC40NSA0NTguMjUgMTU3LjY4IEwgNDQ5LjMyIDEzMy43NiBDIDQ0OS4zMiAxMzMuNzYgNDQ5LjMxIDEzMy43NSA0NDkuMyAxMzMuNzUgTCA0MTUuMTUgMTMzLjc4IEMgNDE1LjE0IDEzMy43OCA0MTUuMTQgMTMzLjc4IDQxNS4xNCAxMzMuNzkgTCA0MDQuNjEgMTU4LjcyIEMgNDA0LjI2IDE1OS41MiA0MDQuMTMgMTYwLjc3IDQwNC4wNyAxNjEuNzUgQyA0MDMuOTkgMTYzLjE5IDQwNC4zOCAxNjQuNDIgNDA0Ljk5IDE2NS40MyBDIDQwNS42IDE2Ni40NCA0MDYuMjQgMTY3LjIxIDQwNy4wMiAxNjcuNjkgQyA0MDguMTMgMTY4LjM2IDQwOS41IDE2OS4xMSA0MTAuOTcgMTY5LjE4IEMgNDEzLjQ2IDE2OS4yOSA0MjEuODYgMTY5LjE5IDQyMS44NiAxNjkuMTkgQyA0MjEuODcgMTY5LjE5IDQyMS44OCAxNjkuMiA0MjEuODggMTY5LjIgTCA0MjEuODggMTcyLjg1IEMgNDIxLjg4IDE3Mi44NSA0MjEuODcgMTcyLjg2IDQyMS44NiAxNzIuODYgTCAzNzcuODIgMTcyLjg5IFogTSAzNzcuODIgMTY5LjIzIi8+PHBhdGggZD0iTSA3NDQuNjkgMTcyLjg2IEwgNzQ0LjA5IDE2Mi43MyBDIDc0NC4wNSAxNjEuODUgNzQ0IDE2MC43NiA3NDMuOTYgMTU5LjU1IEwgNzQzLjg3IDE1OS41NSBDIDc0My41NSAxNjAuNDMgNzQzLjE4IDE2MS45NiA3NDIuODcgMTYzLjExIEwgNzQwIDE3Mi42NCBMIDczOC4xNCAxNzIuNjQgTCA3MzUuMjMgMTYyLjg0IEMgNzM1IDE2MS45MSA3MzQuNTQgMTYwLjQ4IDczNC4zMiAxNTkuNTUgTCA3MzQuMjMgMTU5LjU1IEMgNzM0LjIzIDE2MC41NCA3MzQuMTggMTYxLjU4IDczNC4xNCAxNjIuNzMgTCA3MzMuNTQgMTcyLjg2IEwgNzMxLjkxIDE3Mi44NiBMIDczMi45MSAxNTcuOTYgTCA3MzUuMzIgMTU3Ljk2IEwgNzM4LjIzIDE2Ny40OSBDIDczOC41OSAxNjguNTkgNzM4LjgyIDE2OS42MyA3MzkuMDkgMTcwLjYyIEwgNzM5LjE4IDE3MC42MiBDIDczOS40NiAxNjkuNTcgNzM5Ljc3IDE2OC4zNyA3MzkuOTYgMTY3LjYgTCA3NDIuODcgMTU3Ljk2IEwgNzQ1LjMyIDE1Ny45NiBMIDc0Ni40MSAxNzIuODYgWiBNIDczMS4yNyAxNTcuOTYgTCA3MzEuMjcgMTU5LjY2IEwgNzI3LjA5IDE1OS42NiBMIDcyNy4wOSAxNzIuODYgTCA3MjUuNDUgMTcyLjg2IEwgNzI1LjQ1IDE1OS42NiBMIDcyMS4yNyAxNTkuNjYgTCA3MjEuMjcgMTU3Ljk2IFogTSA3MzEuMjcgMTU3Ljk2Ii8+PC9zdmc+") left center / contain no-repeat;
font-size: 0; line-height: 0; color: transparent;
}
a.zb-wordmark:hover { opacity: 0.8; text-decoration: none; }
.zb-crumb-sep { color: var(--fg4); font-size: 13px; padding: 0 2px; }
.zb-crumb { color: var(--fg2); font-size: 13px; font-weight: 500; white-space: nowrap; }
.zb-crumb.zb-active { color: var(--fg); }
.zb-crumb.zb-live { color: var(--accent); }
.zb-top-spacer { flex: 1; }
/* Top-bar tabs (small apps: ≤5 sections — Zinema, ZProfit). Tabs are caps-micro;
active = ink + 2px espresso underline. No fills, no rounding. */
.zb-top-tabs { display: flex; gap: 4px; margin-left: 8px; align-self: stretch; }
.zb-top-tab { display: inline-flex; align-items: center; padding: 0 12px; border-bottom: 2px solid transparent; color: var(--fg2); font-size: 10px; font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; text-decoration: none; }
.zb-top-tab:hover { color: var(--fg); text-decoration: none; }
.zb-top-tab.zb-active { color: var(--fg); border-bottom-color: var(--accent); }
/* KPI strip in the top bar (Zephyr) */
.zb-top-stats { display: flex; gap: 18px; margin-left: 12px; }
.zb-top-stat { display: flex; flex-direction: column; line-height: 1.15; }
.zb-top-stat .zb-eyebrow { font-size: 9px; color: var(--fg3); }
.zb-top-stat .zb-num { font-size: 12px; color: var(--fg); }
/* The Loom button — icon + label, always. A 1px-bordered caps-micro pill (§8.3). */
.zb-loom {
height: 30px; padding: 0 11px 0 9px; display: inline-flex; align-items: center; gap: 7px;
background: transparent; border: 1px solid var(--border2); border-radius: 0;
color: var(--fg2); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
text-decoration: none; flex-shrink: 0;
transition: border-color var(--zb-fast), color var(--zb-fast);
}
.zb-loom:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.zb-loom svg { width: 14px; height: 14px; }
/* Avatar — an ink SQUARE, serif initial. No circular avatars (§8.6). */
.zb-avatar {
width: 28px; height: 28px; border-radius: 0; display: inline-flex; align-items: center; justify-content: center;
background: var(--fg); color: var(--bg); font-family: var(--fp); font-size: 12px; font-weight: 600; flex-shrink: 0;
border: 0; cursor: pointer;
}
.zb-tenant { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border: 1px solid var(--border2); border-radius: 0; background: var(--bg); font-size: 12px; color: var(--fg2); }
.zb-tenant .zb-dot { width: 6px; height: 6px; border-radius: 0; background: var(--success); }
/* ---------- 5 · Sidebar ---------------------------------------------------- */
.zb-side {
background: var(--bg); border-right: 1px solid var(--border);
padding: 12px 0; display: flex; flex-direction: column; gap: 1px;
position: sticky; top: var(--zb-top-h); height: calc(100vh - var(--zb-top-h)); overflow-y: auto;
}
.zb-side-head { padding: 12px 14px 5px; font-family: var(--fs); font-size: 10px; font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--fg3); }
.zb-side-head:first-child { padding-top: 4px; }
/* Items 34px; active = stone wash + ink at 600 + a 2px espresso left rule (§8.3).
The left rule rides every item (transparent) so activation never shifts text. */
.zb-nav {
display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 12px;
border-left: 2px solid transparent; border-radius: 0;
color: var(--fg2); font-size: 13px; cursor: pointer; text-decoration: none; border-top: 0; border-right: 0; border-bottom: 0; background: transparent; width: 100%; text-align: left;
transition: background var(--zb-fast), color var(--zb-fast);
}
.zb-nav:hover { background: var(--bg3); color: var(--fg); text-decoration: none; }
.zb-nav.zb-active { background: var(--bg3); color: var(--fg); font-weight: 600; border-left-color: var(--accent); }
.zb-nav svg { width: 16px; height: 16px; stroke-width: 2; flex-shrink: 0; color: currentColor; }
.zb-nav-badge { margin-left: auto; font-family: var(--fs); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--fg3); background: var(--bg3); padding: 1px 6px; border-radius: 0; }
.zb-nav.zb-active .zb-nav-badge { background: var(--accent-tint2); color: var(--accent); }
.zb-side-foot { margin-top: auto; padding: 12px 14px 4px; font-family: var(--fs); font-size: 10px; color: var(--fg4); }
.zb-side-cta { margin: 4px 12px 8px; }
/* Collapsible sidebar group */
.zb-side-group[data-collapsed="true"] > .zb-nav { display: none; }
.zb-side-group > .zb-side-head { cursor: pointer; user-select: none; }
.zb-side-group > .zb-side-head::after { content: "▾"; float: right; opacity: 0.6; }
.zb-side-group[data-collapsed="true"] > .zb-side-head::after { content: "▸"; }
/* ---------- 6 · Buttons ---------------------------------------------------- */
/* Hierarchy: ONE primary per view. primary = ink fill. secondary = 1px ink
outline. tertiary = text. hover = espresso. Labels are caps-micro verbs
carrying the count when there is one ("Generate 4"). 44px; 40px floor in
dense toolbars via .zb-btn-sm (§8.4). */
.zb-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 44px; padding: 0 20px; border-radius: 0;
font-family: var(--fs); font-size: 11px; font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; line-height: 1; white-space: nowrap;
border: 1px solid transparent; cursor: pointer; text-decoration: none; user-select: none;
transition: background var(--zb-fast), border-color var(--zb-fast), color var(--zb-fast), opacity var(--zb-fast);
}
.zb-btn:hover { text-decoration: none; }
/* Disabled = hairline border + border-colored text — never an opacity fog
over a live-looking control (§8.4). */
.zb-btn:disabled, .zb-btn[aria-disabled="true"] { background: transparent; color: var(--border2); border-color: var(--border); cursor: not-allowed; pointer-events: none; }
.zb-btn svg { width: 14px; height: 14px; }
.zb-btn-primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.zb-btn-primary:hover { background: var(--accent); border-color: var(--accent); }
.zb-btn-secondary { background: transparent; color: var(--fg); border-color: var(--fg); }
.zb-btn-secondary:hover { color: var(--accent); border-color: var(--accent); }
.zb-btn-tertiary { background: transparent; color: var(--fg2); border-color: transparent; padding: 0 10px; }
.zb-btn-tertiary:hover { color: var(--accent); }
.zb-btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.zb-btn-danger:hover { background: var(--danger-tint); }
.zb-btn-sm { height: 40px; padding: 0 14px; font-size: 10px; border-radius: 0; }
.zb-btn-sm.zb-btn-tertiary { padding: 0 8px; }
.zb-btn-lg { height: 44px; padding: 0 26px; }
.zb-btn-icon { width: 44px; padding: 0; }
.zb-btn-sm.zb-btn-icon { width: 40px; }
.zb-btn-block { width: 100%; }
/* Icon-only buttons MUST carry aria-label; kbd hint slot */
.zb-btn .zb-kbd { margin-left: 4px; }
.zb-btn-primary .zb-kbd { background: rgba(250,249,246,0.18); border-color: transparent; color: var(--bg); }
/* ---------- 7 · Controls --------------------------------------------------- */
/* Inputs 38px, 1px border, transparent fill; focus ring 1px ink offset 2px (§8.4). */
.zb-input, .zb-select, .zb-textarea {
height: 38px; padding: 0 12px; width: auto; min-width: 0;
background: transparent; border: 1px solid var(--border2); border-radius: 0;
color: var(--fg); font-family: var(--fs); font-size: 13px;
transition: border-color var(--zb-fast);
}
.zb-textarea { height: auto; min-height: 84px; padding: 9px 12px; line-height: 1.5; resize: vertical; }
/* Controls size to their context: inline (toolbars, filter rows) they hug content;
inside a .zb-field or .zb-search they fill the column. */
.zb-field > .zb-input, .zb-field > .zb-select, .zb-field > .zb-textarea, .zb-search > .zb-input, .zb-textarea { width: 100%; }
.zb-select { min-width: 96px; }
.zb-input:hover, .zb-select:hover, .zb-textarea:hover { border-color: var(--border3); }
.zb-input:focus, .zb-select:focus, .zb-textarea:focus { border-color: var(--fg); outline: 1px solid var(--fg); outline-offset: 2px; box-shadow: none; }
.zb-input.zb-mono { font-family: var(--fs); font-variant-numeric: tabular-nums; }
.zb-input.zb-sm, .zb-select.zb-sm { height: 32px; font-size: 12px; padding: 0 10px; }
.zb-select {
appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23857E71' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 10px center;
}
.zb-input[type="date"] { font-family: var(--fs); font-size: 12px; font-variant-numeric: tabular-nums; }
.zb-input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
.zb-label { display: block; font-size: 12px; font-weight: 500; color: var(--fg2); margin-bottom: 6px; }
.zb-hint { display: block; font-size: 11.5px; color: var(--fg3); margin-top: 5px; line-height: 1.5; }
.zb-field { display: flex; flex-direction: column; }
.zb-field + .zb-field { margin-top: 14px; }
.zb-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg2); cursor: pointer; }
.zb-check input { width: 15px; height: 15px; accent-color: var(--accent); margin: 0; }
.zb-search { position: relative; }
.zb-search .zb-input { padding-left: 32px; }
.zb-search::before {
content: ""; position: absolute; left: 11px; top: 50%; width: 13px; height: 13px; transform: translateY(-50%);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857E71' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ---------- 8 · Chips · segmented · filter pills --------------------------- */
/* Chips and filters: 30px, 1px border, square; active = ink fill, paper text (§8.4).
Small flat sets ONLY (≤6). More than that, or per-item metadata → rows / pills. */
.zb-chip {
display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
border-radius: 0; background: transparent; border: 1px solid var(--border2);
color: var(--fg2); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; cursor: default;
}
.zb-chip.zb-mono { font-family: var(--fs); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
button.zb-chip, a.zb-chip { cursor: pointer; transition: background var(--zb-fast), color var(--zb-fast), border-color var(--zb-fast); }
button.zb-chip:hover { color: var(--accent); border-color: var(--accent); }
.zb-chip.zb-on { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.zb-chip.zb-success { background: var(--success-tint); border-color: transparent; color: var(--success); }
.zb-chip.zb-warn { background: var(--warn-tint); border-color: transparent; color: var(--warn); }
.zb-chip.zb-danger { background: var(--danger-tint); border-color: transparent; color: var(--danger); }
.zb-chip .zb-dot { width: 5px; height: 5px; border-radius: 0; background: currentColor; }
/* Segmented control — bordered squares; the on segment is ink (§8.4). */
.zb-seg { display: inline-flex; gap: 0; padding: 0; background: transparent; border: 1px solid var(--border2); border-radius: 0; }
.zb-seg-btn { height: 30px; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--fg3); font-size: 12px; font-weight: 500; cursor: pointer; transition: background var(--zb-fast), color var(--zb-fast); }
.zb-seg-btn:hover { color: var(--fg); }
.zb-seg-btn.zb-on { background: var(--fg); color: var(--bg); box-shadow: none; }
/* Filter bar: one row of pills; each pill is a dropdown; "Clear" at the end */
.zb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zb-pill {
display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 12px;
border-radius: 0; background: transparent; border: 1px solid var(--border2); color: var(--fg2);
font-size: 12px; cursor: pointer; transition: border-color var(--zb-fast), background var(--zb-fast), color var(--zb-fast); position: relative;
}
.zb-pill:hover { border-color: var(--border3); color: var(--fg); }
.zb-pill .zb-pill-k { color: var(--fg3); }
.zb-pill .zb-pill-v { color: var(--fg); font-weight: 500; }
.zb-pill.zb-on { border-color: var(--fg); background: var(--fg); color: var(--bg); }
.zb-pill.zb-on .zb-pill-k { color: rgba(250,249,246,0.65); }
.zb-pill.zb-on .zb-pill-v { color: var(--bg); }
.zb-pill::after { content: "▾"; font-size: 10px; color: var(--fg4); }
.zb-pill.zb-on::after { color: rgba(250,249,246,0.65); }
.zb-pill-menu {
position: absolute; top: calc(100% + 4px); left: 0; min-width: 160px; z-index: var(--z-drop);
background: var(--bg); border: 1px solid var(--border2); border-radius: 0; padding: 4px;
box-shadow: none;
}
.zb-pill-menu[hidden] { display: none; }
.zb-pill-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 0; font-size: 12px; color: var(--fg2); cursor: pointer; }
.zb-pill-item:hover { background: var(--bg3); color: var(--fg); }
.zb-pill-item.zb-on { background: var(--bg3); color: var(--fg); font-weight: 600; }
.zb-filters .zb-clear { margin-left: 2px; }
/* ---------- 9 · Cards · tables --------------------------------------------- */
/* Hairline rules draw the page, not boxed cards; stone washes group (§8.7). */
.zb-card { background: var(--bg); border: 1px solid var(--border); border-radius: 0; padding: 16px; }
.zb-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.zb-card-title { font-size: 13px; font-weight: 600; color: var(--fg); }
.zb-card.zb-inset { background: var(--bg3); border-color: transparent; }
.zb-divider { height: 1px; background: var(--border); border: 0; margin: 16px 0; }
.zb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.zb-table th { text-align: left; padding: 8px 10px; font-family: var(--fs); font-size: 10px; font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--fg3); border-bottom: 1px solid var(--border2); white-space: nowrap; }
.zb-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); color: var(--fg2); vertical-align: middle; }
.zb-table tr:hover td { background: var(--bg3); }
.zb-table .zb-num, .zb-table td.zb-r, .zb-table th.zb-r { text-align: right; }
.zb-table td.zb-num { font-family: var(--fs); font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }
.zb-table-wrap { overflow-x: auto; }
.zb-up { color: var(--success); } .zb-down { color: var(--danger); } .zb-flat { color: var(--fg4); }
/* KPI tile */
.zb-kpi-tile { background: var(--bg); border: 1px solid var(--border); border-radius: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.zb-kpi-tile .zb-kpi-label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg3); }
.zb-kpi-tile .zb-kpi-foot { font-family: var(--fs); font-size: 10.5px; color: var(--fg4); }
/* ---------- 10 · Tooltip · info · help panel ------------------------------- */
/* Usage: … or
chrome.js renders the bubble on hover AND keyboard focus, and gives every .zb-info tabindex=0 + an aria-label. */
.zb-info {
display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 0;
border: 1px solid var(--fg4); color: var(--fg3); font-family: var(--fs); font-size: 9px; font-style: normal; font-weight: 600;
cursor: help; vertical-align: -2px; margin-left: 4px; transition: border-color var(--zb-fast), color var(--zb-fast); flex-shrink: 0;
}
.zb-info::before { content: "i"; }
.zb-info:hover, .zb-info:focus-visible { border-color: var(--accent); color: var(--accent); outline: 1px solid var(--accent); outline-offset: 2px; box-shadow: none; }
[data-tip] { cursor: help; }
[data-tip].zb-tip-inline { text-decoration: underline dotted var(--fg4); text-underline-offset: 3px; }
.zb-tip {
position: fixed; z-index: var(--z-tip); max-width: 280px; padding: 9px 11px;
background: var(--fg); color: var(--bg); font-family: var(--fs); font-size: 12px; line-height: 1.45; font-weight: 400;
border-radius: 0; box-shadow: none; pointer-events: none;
opacity: 0; transform: translateY(2px); transition: opacity var(--zb-fast), transform var(--zb-fast);
}
.zb-tip.zb-show { opacity: 1; transform: none; }
.zb-tip .zb-tip-t { display: block; font-weight: 600; margin-bottom: 2px; }
.zb-tip .zb-tip-m { display: block; font-size: 10.5px; opacity: 0.7; margin-top: 4px; }
/* "How this works" — collapsible, remembered per app+key in localStorage by chrome.js */
.zb-help { background: var(--bg); border: 1px solid var(--border); border-radius: 0; padding: 14px 16px; }
.zb-help[data-collapsed="true"] .zb-help-body { display: none; }
.zb-help-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zb-help-title { font-size: 13px; font-weight: 600; color: var(--fg); }
.zb-help-body { margin-top: 8px; font-size: 13px; color: var(--fg2); line-height: 1.55; }
.zb-help-body ol { margin: 6px 0 0; padding-left: 0; list-style: none; counter-reset: zbh; }
.zb-help-body ol li { position: relative; padding-left: 26px; margin: 6px 0; counter-increment: zbh; }
.zb-help-body ol li::before { content: counter(zbh); position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 0; background: var(--bg3); border: 1px solid var(--border2); font-family: var(--fs); font-size: 10px; display: flex; align-items: center; justify-content: center; color: var(--fg3); }
.zb-help-body b { color: var(--fg); font-weight: 600; }
/* ---------- 11 · States: skeleton · empty · error · toast ------------------ */
@keyframes zb-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.zb-skel { position: relative; overflow: hidden; border-radius: 0; background: var(--bg3); color: transparent !important; pointer-events: none; }
.zb-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(250,249,246,0.65) 50%, transparent 100%); background-size: 200% 100%; animation: zb-shimmer 1.4s ease-in-out infinite; }
.zb-skel-line { height: 12px; width: 60%; margin: 6px 0; }
.zb-skel-line.zb-w40 { width: 40%; } .zb-skel-line.zb-w80 { width: 80%; } .zb-skel-line.zb-w100 { width: 100%; }
.zb-skel-kpi { height: 24px; width: 72px; }
.zb-skel-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px; padding: 9px 10px; border-bottom: 1px solid var(--border); }
.zb-skel-row .zb-skel { height: 11px; margin: 0; }
.zb-skel-card { height: 120px; border-radius: 0; }
/* Empty states: one plain sentence plus at most one action, meta type (§8.8). */
.zb-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 44px 24px; gap: 6px; }
.zb-empty .zb-empty-title { font-size: 13px; font-weight: 500; color: var(--fg2); }
.zb-empty .zb-empty-body { font-size: 11.5px; color: var(--fg3); max-width: 46ch; line-height: 1.5; }
.zb-empty .zb-empty-actions { display: flex; gap: 8px; margin-top: 10px; }
.zb-empty.zb-quiet { padding: 24px 16px; }
.zb-empty.zb-quiet .zb-empty-title { font-size: 12px; font-weight: 500; color: var(--fg3); }
.zb-alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 0; border: 1px solid var(--border); background: var(--bg); font-size: 12px; color: var(--fg2); line-height: 1.5; }
.zb-alert.zb-warn { background: var(--warn-tint); border-color: transparent; color: var(--warn); }
.zb-alert.zb-danger { background: var(--danger-tint); border-color: transparent; color: var(--danger); }
.zb-alert.zb-success { background: var(--success-tint); border-color: transparent; color: var(--success); }
.zb-alert b { font-weight: 600; }
.zb-alert .zb-alert-fix { margin-left: auto; white-space: nowrap; }
.zb-toasts { position: fixed; right: 16px; bottom: 16px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; }
.zb-toast { min-width: 220px; max-width: 360px; padding: 11px 13px; background: var(--fg); color: var(--bg); border-radius: 0; font-size: 12px; box-shadow: none; display: flex; align-items: center; gap: 10px; animation: zb-toast-in var(--zb-med) ease-out; }
.zb-toast.zb-danger { background: var(--danger); }
.zb-toast.zb-success { background: var(--success); }
@keyframes zb-toast-in { from { opacity: 0; transform: translateY(6px); } }
.zb-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg3); }
.zb-status .zb-dot { width: 6px; height: 6px; border-radius: 0; background: var(--fg4); }
.zb-status.zb-live .zb-dot { background: var(--success); } .zb-status.zb-beta .zb-dot { background: var(--warn); } .zb-status.zb-dev .zb-dot { background: var(--fg4); }
/* ---------- 12 · Image frame ---------------------------------------------- */
/* Always reserve the box; never let a card collapse while its image loads.
Every thumbnail sits on the studio mat, square corners — including people (§8.6). */
.zb-img { position: relative; display: block; overflow: hidden; background: var(--mat); border-radius: 0; aspect-ratio: 4 / 5; }
.zb-img.zb-square { aspect-ratio: 1 / 1; } .zb-img.zb-wide { aspect-ratio: 16 / 10; } .zb-img.zb-tall { aspect-ratio: 3 / 4; }
.zb-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--zb-med); }
.zb-img > img.zb-loaded, .zb-img > img[data-loaded="1"] { opacity: 1; }
.zb-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(250,249,246,0.5) 50%, transparent 100%); background-size: 200% 100%; animation: zb-shimmer 1.6s ease-in-out infinite; }
.zb-img.zb-done::before, .zb-img.zb-none::before { animation: none; background: none; }
.zb-img.zb-none::after { content: attr(data-empty); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; font-family: var(--fs); font-size: 10px; font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--fg4); }
.zb-img > .zb-img-badge { position: absolute; top: 8px; left: 8px; }
.zb-img > .zb-img-check { position: absolute; top: 8px; right: 8px; }
/* ---------- 13 · Modal · menu · kbd ---------------------------------------- */
.zb-modal-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(27,26,24,0.28); display: flex; align-items: center; justify-content: center; padding: 24px; }
.zb-modal { width: min(560px, 100%); max-height: 90vh; overflow: auto; background: var(--bg); border: 1px solid var(--border2); border-radius: 0; box-shadow: none; }
.zb-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 0; }
.zb-modal-body { padding: 14px 20px 20px; font-size: 13px; color: var(--fg2); }
.zb-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 18px; }
.zb-menu { min-width: 180px; background: var(--bg); border: 1px solid var(--border2); border-radius: 0; padding: 4px; box-shadow: none; z-index: var(--z-drop); }
.zb-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 9px; border: 0; background: transparent; border-radius: 0; font-size: 12px; color: var(--fg2); cursor: pointer; text-align: left; text-decoration: none; }
.zb-menu-item:hover { background: var(--bg3); color: var(--fg); text-decoration: none; }
.zb-menu-item.zb-danger { color: var(--danger); }
.zb-menu-div { height: 1px; background: var(--border); margin: 4px 0; }
.zb-kbd { display: inline-block; padding: 1px 5px; border-radius: 0; background: var(--bg3); border: 1px solid var(--border2); font-family: var(--fs); font-size: 10px; color: var(--fg2); line-height: 1.4; }
/* ---------- 14 · Command palette (⌘K) ------------------------------------- */
.zb-pal-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(27,26,24,0.22); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.zb-pal { width: min(560px, 92vw); background: var(--bg); border: 1px solid var(--border2); border-radius: 0; box-shadow: none; overflow: hidden; }
.zb-pal-input { width: 100%; height: 46px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--border); background: transparent; font-size: 14px; color: var(--fg); outline: none; }
.zb-pal-list { max-height: 50vh; overflow: auto; padding: 6px; }
.zb-pal-group { padding: 8px 10px 3px; font-family: var(--fs); font-size: 10px; font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--fg3); }
.zb-pal-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 0; font-size: 13px; color: var(--fg2); cursor: pointer; }
.zb-pal-item .zb-kbd { margin-left: auto; }
.zb-pal-item.zb-on, .zb-pal-item:hover { background: var(--bg3); color: var(--fg); }
.zb-pal-empty { padding: 20px; text-align: center; font-size: 12px; color: var(--fg3); }
.zb-pal-foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--fg4); }
/* ---------- 15 · Utilities ------------------------------------------------ */
.zb-row { display: flex; align-items: center; gap: 8px; }
.zb-row.zb-between { justify-content: space-between; }
.zb-stack { display: flex; flex-direction: column; gap: 8px; }
.zb-grid { display: grid; gap: 16px; }
.zb-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zb-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .zb-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .zb-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.zb-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.zb-page-head .zb-actions { display: flex; gap: 8px; align-items: center; }
.zb-section { margin-top: 28px; }
.zb-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.zb-hide { display: none !important; }
.zb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zb-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zb-version { font-family: var(--fs); font-size: 10px; color: var(--fg4); }
@media (max-width: 900px) {
.zb-frame { grid-template-columns: 1fr; }
.zb-side { display: none; }
.zb-main { padding: 16px; }
.zb-grid-3, .zb-grid-4, .zb-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}