/* Moved from app.css (Codex on #873): app.css also reaches printed paperwork, this file does not. */
#tools-form .btn{margin-top:10px}
/* ===== The 6 Nov redesign: two looks, "Fresh light" and "Night". Spec: streams/jeevz/app/docs/design-system.md.
Approved mockups: docs/redesign/light/ and docs/redesign/night/. Fonts: Cabinet Grotesk (display and money numbers)
and Switzer (body) from Fontshare, linked in core/base.html, with system fallbacks.
comes from the person's own choice (Settings > Look, accounts.User.look).
"auto" follows the phone. Public token pages and printed paperwork are always light.
Loads after app.css on every app page (not on printed paperwork, which keeps the firm's look on white).
Every rule reads --jz-* tokens. None reads the firm-brand variables core/brand.py injects (--ink --text --font
--brand --accent --on-brand --on-accent --needs-bg --needs-fg): a firm's colours stay on its logo tile and paperwork.
A difference between the looks is a token, never a second rule: the dark block and the auto block below must stay
identical (core/test_look.py checks), so "auto" on a dark phone is exactly "dark".
Order: tokens, base, shell (top bar, bottom bar), page header, Dock, buttons, cards and hero, rows, chips, tiles,
tool rows, empty states, forms, switches, segmented control, choice cards, alerts, bubbles, steps, plain links,
safety line, strips, quote paper, jobs board, older classes, login, utilities, shared primitives, shell passes,
and (section 40 on) the redesign components. */
/* ---------- 1. Tokens ----------
Colour roles (WCAG 2 contrast measured for every text pair, both looks; the table is in docs/design-system.md):
--jz-page the ground --jz-surface cards --jz-surface-2 inner panels, wells, quiet buttons
--jz-edge 1.5px card edge (survives glare) --jz-hair hairlines inside lists
--jz-ink text, headings, numbers --jz-ink-2 quiet text (meta). Nothing lighter for words
--jz-accent the mint-to-lime gradient: the one main button and hero moments, always under ink text
--jz-on-accent text on the gradient
--jz-forest the only green text, the selected state, the chart line; --jz-on-forest text on a forest fill
--jz-wash soft green fill (active tab, "Jeevz did", selected)
--jz-danger danger text; --jz-danger-fill + --jz-on-danger the solid danger card; --jz-danger-soft a tint
--jz-late late money or time text; --jz-late-fill + --jz-on-late the late chip; --jz-late-edge the edge bar
--jz-done done fill; --jz-on-done its text --jz-info + --jz-info-soft a neutral fact */
:root,[data-theme=light]{
color-scheme:light;
--jz-page:#e6ebe7; --jz-surface:#ffffff; --jz-surface-2:#eef3f0; --jz-edge:#d3dad5; --jz-hair:rgba(23,33,29,.10);
--jz-ink:#17211d; --jz-ink-2:#4a5650; --jz-faint:#5f6b65;
--jz-accent:linear-gradient(135deg,#7cf7d4 0%,#c6ff5e 100%); --jz-on-accent:#17211d;
--jz-forest:#306d55; --jz-on-forest:#ffffff; --jz-wash:#d7f5e8; --jz-wash-edge:#bfe6d4;
--jz-danger:#b42318; --jz-danger-fill:#b42318; --jz-on-danger:#ffffff; --jz-danger-soft:#fef1ef;
--jz-danger-call:#ffffff; --jz-on-danger-call:#b42318; --jz-chip-danger:#fbddd8; --jz-on-chip-danger:#b42318;
--jz-late:#9a3412; --jz-late-fill:#f59e0b; --jz-on-late:#17211d; --jz-late-edge:#d97706; --jz-late-soft:#fff4ec; --jz-late-arc:#c2410c;
--jz-done:#306d55; --jz-on-done:#ffffff; --jz-info:#1f4f8a; --jz-info-soft:#e8f0fb;
--jz-on-ink:#ffffff; --jz-press:rgba(23,33,29,.05); --jz-chev:rgba(23,33,29,.32);
--jz-off-bg:#dde3df; --jz-off-fg:#4a5650; --jz-switch-off:#c4ccc7; --jz-ring-track:#e3eae6;
--jz-glass:color-mix(in srgb,#fff 88%,transparent);
--jz-air:radial-gradient(circle,rgba(124,247,212,.34),rgba(198,255,94,.12) 45%,transparent 68%);
--jz-shadow:0 0 0 1.5px var(--jz-edge),0 2px 0 rgba(23,33,29,.04),0 14px 30px -16px rgba(23,33,29,.22);
--jz-shadow-2:0 0 0 1.5px var(--jz-edge),0 18px 40px -12px rgba(23,33,29,.28);
--jz-shadow-danger:0 22px 40px -18px rgba(180,35,24,.55);
--jz-shadow-btn:0 14px 28px -14px rgba(48,109,85,.6),inset 0 -2px 0 rgba(23,33,29,.07);
/* the shell: a floating white bar in light, an edge-to-edge graphite bar at night */
--jz-bar:var(--jz-glass); --jz-bar-solid:#ffffff; --jz-tabs-h:80px; --jz-tabs-inset:12px; --jz-tabs-lift:14px; --jz-r-tabs:30px; --jz-tabs-pad-b:0px;
--jz-tabs-shadow:var(--jz-shadow-2); --jz-tab-on:var(--jz-ink); --jz-tab-pill:var(--jz-wash); --jz-tab-pill-fg:var(--jz-forest);
--jz-tab-dot:var(--jz-forest); --jz-tab-tick:none;
/* cards that differ by look: a late card has a left edge bar in light and a top band at night */
--jz-late-bar:6px; --jz-band:0px; --jz-r-btn:999px;
/* headline accent word: Switzer italic forest in light, the gradient at night */
--jz-em-font:"Switzer",-apple-system,BlinkMacSystemFont,sans-serif; --jz-em-style:italic; --jz-em-weight:600;
--jz-em-fill:none; --jz-em-fg:var(--jz-forest);
/* secondary button and "today" */
--jz-btn2-bg:var(--jz-surface); --jz-btn2-fg:var(--jz-ink); --jz-btn2-ring:var(--jz-ink);
--jz-now-bg:#17211d; --jz-now-fg:#c6ff5e; --jz-now-muted:#c9d2cd;
/* the dark hero card (old .hero, .stat.hero): graphite in both looks */
--jz-night:#141a20; --jz-night-2:#1c242c; --jz-on-night:#f4f5f2; --jz-night-muted:#c3ccc6; --jz-night-line:rgba(255,255,255,.12);
--jz-hero-num:#c6ff5e; --jz-night-late:#ffb547; --jz-dot-dark:#9be84a; --jz-highlight:#c6ff5e;
}
[data-theme=dark]{
color-scheme:dark;
--jz-page:#07090d; --jz-surface:#141a20; --jz-surface-2:#1c242c; --jz-edge:#2a3038; --jz-hair:rgba(255,255,255,.10);
--jz-ink:#f4f5f2; --jz-ink-2:#c3ccc6; --jz-faint:#a3ada7;
--jz-accent:linear-gradient(135deg,#7cf7d4 0%,#c6ff5e 100%); --jz-on-accent:#06100c;
--jz-forest:#7cf7d4; --jz-on-forest:#06100c; --jz-wash:#1d3532; --jz-wash-edge:#2c5049;
--jz-danger:#ff6b6b; --jz-danger-fill:#ff5c5c; --jz-on-danger:#06100c; --jz-danger-soft:#3a252a;
--jz-danger-call:#06100c; --jz-on-danger-call:#ffffff; --jz-chip-danger:#ff5c5c; --jz-on-chip-danger:#06100c;
--jz-late:#ffb547; --jz-late-fill:#ffb547; --jz-on-late:#06100c; --jz-late-edge:#ffb547; --jz-late-soft:#353025; --jz-late-arc:#ffb547;
--jz-done:#9be84a; --jz-on-done:#06100c; --jz-info:#8cb8ff; --jz-info-soft:#1b2a40;
--jz-on-ink:#06100c; --jz-press:rgba(255,255,255,.06); --jz-chev:rgba(244,245,242,.4);
--jz-off-bg:#1c242c; --jz-off-fg:#c3ccc6; --jz-switch-off:#3a434d; --jz-ring-track:#2a333c;
--jz-glass:color-mix(in srgb,#0b0e12 92%,transparent);
--jz-air:radial-gradient(circle,rgba(124,247,212,.20),rgba(198,255,94,.06) 45%,transparent 70%);
--jz-shadow:0 0 0 1.5px var(--jz-edge),0 18px 36px -22px rgba(0,0,0,.7);
--jz-shadow-2:0 0 0 1.5px var(--jz-edge),0 18px 40px -12px rgba(0,0,0,.75);
--jz-shadow-danger:0 22px 44px -20px rgba(255,92,92,.45);
--jz-shadow-btn:0 14px 30px -16px rgba(124,247,212,.45);
--jz-bar:#0b0e12; --jz-bar-solid:#0b0e12; --jz-tabs-h:72px; --jz-tabs-inset:0px; --jz-tabs-lift:0px; --jz-r-tabs:0px; --jz-tabs-pad-b:var(--jz-safe-b);
--jz-tabs-shadow:0 -1.5px 0 #1e252d; --jz-tab-on:#c6ff5e; --jz-tab-pill:transparent; --jz-tab-pill-fg:#c6ff5e;
--jz-tab-dot:transparent; --jz-tab-tick:linear-gradient(135deg,#7cf7d4 0%,#c6ff5e 100%);
--jz-late-bar:0px; --jz-band:8px; --jz-r-btn:20px;
--jz-em-font:inherit; --jz-em-style:normal; --jz-em-weight:inherit;
--jz-em-fill:linear-gradient(135deg,#7cf7d4 0%,#c6ff5e 100%); --jz-em-fg:transparent;
--jz-btn2-bg:#1c242c; --jz-btn2-fg:#f4f5f2; --jz-btn2-ring:#46505a;
--jz-now-bg:linear-gradient(135deg,#7cf7d4 0%,#c6ff5e 100%); --jz-now-fg:#06100c; --jz-now-muted:#1d3a2c;
--jz-night:#141a20; --jz-night-2:#1c242c; --jz-on-night:#f4f5f2; --jz-night-muted:#c3ccc6; --jz-night-line:rgba(255,255,255,.12);
--jz-hero-num:#c6ff5e; --jz-night-late:#ffb547; --jz-dot-dark:#9be84a; --jz-highlight:#c6ff5e;
}
@media (prefers-color-scheme:dark){
[data-theme=auto]{
color-scheme:dark;
--jz-page:#07090d; --jz-surface:#141a20; --jz-surface-2:#1c242c; --jz-edge:#2a3038; --jz-hair:rgba(255,255,255,.10);
--jz-ink:#f4f5f2; --jz-ink-2:#c3ccc6; --jz-faint:#a3ada7;
--jz-accent:linear-gradient(135deg,#7cf7d4 0%,#c6ff5e 100%); --jz-on-accent:#06100c;
--jz-forest:#7cf7d4; --jz-on-forest:#06100c; --jz-wash:#1d3532; --jz-wash-edge:#2c5049;
--jz-danger:#ff6b6b; --jz-danger-fill:#ff5c5c; --jz-on-danger:#06100c; --jz-danger-soft:#3a252a;
--jz-danger-call:#06100c; --jz-on-danger-call:#ffffff; --jz-chip-danger:#ff5c5c; --jz-on-chip-danger:#06100c;
--jz-late:#ffb547; --jz-late-fill:#ffb547; --jz-on-late:#06100c; --jz-late-edge:#ffb547; --jz-late-soft:#353025; --jz-late-arc:#ffb547;
--jz-done:#9be84a; --jz-on-done:#06100c; --jz-info:#8cb8ff; --jz-info-soft:#1b2a40;
--jz-on-ink:#06100c; --jz-press:rgba(255,255,255,.06); --jz-chev:rgba(244,245,242,.4);
--jz-off-bg:#1c242c; --jz-off-fg:#c3ccc6; --jz-switch-off:#3a434d; --jz-ring-track:#2a333c;
--jz-glass:color-mix(in srgb,#0b0e12 92%,transparent);
--jz-air:radial-gradient(circle,rgba(124,247,212,.20),rgba(198,255,94,.06) 45%,transparent 70%);
--jz-shadow:0 0 0 1.5px var(--jz-edge),0 18px 36px -22px rgba(0,0,0,.7);
--jz-shadow-2:0 0 0 1.5px var(--jz-edge),0 18px 40px -12px rgba(0,0,0,.75);
--jz-shadow-danger:0 22px 44px -20px rgba(255,92,92,.45);
--jz-shadow-btn:0 14px 30px -16px rgba(124,247,212,.45);
--jz-bar:#0b0e12; --jz-bar-solid:#0b0e12; --jz-tabs-h:72px; --jz-tabs-inset:0px; --jz-tabs-lift:0px; --jz-r-tabs:0px; --jz-tabs-pad-b:var(--jz-safe-b);
--jz-tabs-shadow:0 -1.5px 0 #1e252d; --jz-tab-on:#c6ff5e; --jz-tab-pill:transparent; --jz-tab-pill-fg:#c6ff5e;
--jz-tab-dot:transparent; --jz-tab-tick:linear-gradient(135deg,#7cf7d4 0%,#c6ff5e 100%);
--jz-late-bar:0px; --jz-band:8px; --jz-r-btn:20px;
--jz-em-font:inherit; --jz-em-style:normal; --jz-em-weight:inherit;
--jz-em-fill:linear-gradient(135deg,#7cf7d4 0%,#c6ff5e 100%); --jz-em-fg:transparent;
--jz-btn2-bg:#1c242c; --jz-btn2-fg:#f4f5f2; --jz-btn2-ring:#46505a;
--jz-now-bg:linear-gradient(135deg,#7cf7d4 0%,#c6ff5e 100%); --jz-now-fg:#06100c; --jz-now-muted:#1d3a2c;
--jz-night:#141a20; --jz-night-2:#1c242c; --jz-on-night:#f4f5f2; --jz-night-muted:#c3ccc6; --jz-night-line:rgba(255,255,255,.12);
--jz-hero-num:#c6ff5e; --jz-night-late:#ffb547; --jz-dot-dark:#9be84a; --jz-highlight:#c6ff5e;
}
}
/* A paper island (.jz-paper): at night, task and late-money cards are light paper on the graphite page (the approved
Night look). It re-points the colour roles inside the card, so every component in it just works. In the light look
it changes nothing: the card is white. Same rule for dark and auto-on-a-dark-phone (kept identical, as above). */
[data-theme=dark] .jz-paper{
color-scheme:light;
--jz-surface:#f4f5f2; --jz-surface-2:#e3e7e3; --jz-edge:#f4f5f2; --jz-hair:rgba(6,16,12,.12);
--jz-ink:#06100c; --jz-ink-2:#3d4842; --jz-faint:#4f5a54; --jz-forest:#306d55; --jz-on-forest:#ffffff; --jz-wash:#d7f5e8;
--jz-danger:#b42318; --jz-late:#8a4b00; --jz-on-ink:#ffffff; --jz-danger-soft:#fef1ef; --jz-late-soft:#fff4ec; --jz-press:rgba(6,16,12,.06); --jz-chev:rgba(6,16,12,.35);
--jz-btn2-bg:transparent; --jz-btn2-fg:#06100c; --jz-btn2-ring:#06100c; --jz-ring-track:#dfe3df;
--jz-shadow:0 18px 36px -22px rgba(0,0,0,.7); color:var(--jz-ink);
}
@media (prefers-color-scheme:dark){
[data-theme=auto] .jz-paper{
color-scheme:light;
--jz-surface:#f4f5f2; --jz-surface-2:#e3e7e3; --jz-edge:#f4f5f2; --jz-hair:rgba(6,16,12,.12);
--jz-ink:#06100c; --jz-ink-2:#3d4842; --jz-faint:#4f5a54; --jz-forest:#306d55; --jz-on-forest:#ffffff; --jz-wash:#d7f5e8;
--jz-danger:#b42318; --jz-late:#8a4b00; --jz-on-ink:#ffffff; --jz-danger-soft:#fef1ef; --jz-late-soft:#fff4ec; --jz-press:rgba(6,16,12,.06); --jz-chev:rgba(6,16,12,.35);
--jz-btn2-bg:transparent; --jz-btn2-fg:#06100c; --jz-btn2-ring:#06100c; --jz-ring-track:#dfe3df;
--jz-shadow:0 18px 36px -22px rgba(0,0,0,.7); color:var(--jz-ink);
}
}
:root{
/* type: Cabinet Grotesk for display and money numbers, Switzer for everything you read */
--jz-display:"Cabinet Grotesk",ui-rounded,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
--jz-sans:"Switzer",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--jz-t-hero:64px; /* hero money and counts, Cabinet 800 */
--jz-t-display:40px; /* Home headline, Cabinet 800 */
--jz-t-title:32px; /* screen title, Cabinet 700 */
--jz-t-card:24px; /* card title, Cabinet 700 */
--jz-t-h2:22px; /* section heading, Cabinet 700 */
--jz-t-say:20px; /* the customer's own words, Switzer 500 */
--jz-t-body:17px; /* body floor, Switzer 500 */
--jz-t-meta:15px; /* meta, Switzer 500 */
--jz-t-small:15px;
--jz-t-label:13px; /* labels only, Switzer 600: tab names, stage names */
--jz-t-chip:15px;
--jz-t-eyebrow:13px;
--jz-track-display:-.03em; --jz-track-num:-.04em; --jz-track-h2:-.015em;
--jz-eyebrow-case:none; --jz-eyebrow-track:0;
--jz-mint:#7cf7d4; --jz-lime:#c6ff5e;
/* space: a 4px scale */
--jz-s1:4px; --jz-s2:8px; --jz-s3:12px; --jz-s4:16px; --jz-s5:20px; --jz-s6:24px; --jz-s7:28px; --jz-s8:32px; --jz-s10:40px;
--jz-gutter:20px;
/* shape: cards 28, inner panels 20, buttons, chips and day pills fully round (Night buttons 20) */
--jz-r-card:28px; --jz-r-inner:20px; --jz-r-tab:24px;
--jz-r-s:10px; --jz-r-m:20px; --jz-r:28px; --jz-r-l:28px; --jz-r-full:999px; --jz-r-icon:30%;
--jz-r-bubble:20px; --jz-r-tail:6px;
--jz-shadow-dock:none;
--jz-shadow-hero:0 18px 36px -22px rgba(7,9,13,.55);
/* sizes: 48px least target, 56px secondary, 64px primary */
--jz-tap:48px; --jz-btn:56px; --jz-btn-l:64px; --jz-row:64px;
--jz-topbar:56px; --jz-tabbar:calc(var(--jz-tabs-h) + var(--jz-tabs-lift)); --jz-dock-gap:12px;
--jz-safe-t:env(safe-area-inset-top,0px); --jz-safe-b:env(safe-area-inset-bottom,0px);
/* motion: all off under prefers-reduced-motion (section 2) */
--jz-ease-out:cubic-bezier(.2,.8,.2,1);
--jz-dur-press:120ms; --jz-dur-quick:200ms; --jz-dur-rise:600ms; --jz-dur-sweep:900ms; --jz-dur-count:1000ms; --jz-stagger:70ms;
--jz-ease:var(--jz-dur-quick) var(--jz-ease-out);
/* legacy names re-pointed so old rules follow. The firm brand never sets these. */
--r:var(--jz-r);
}
/* Older colour names, re-pointed to the roles so screens not yet rebuilt follow the look. Declared on .jz-paper too,
so they re-resolve inside a paper island. The firm brand never sets these. */
:root,.jz-paper{
--jz-grad:var(--jz-accent); --jz-on-grad:var(--jz-on-accent);
--jz-paper:var(--jz-page); --jz-card:var(--jz-surface); --jz-field:var(--jz-surface-2); --jz-line:var(--jz-hair);
--jz-muted:var(--jz-ink-2); --jz-forest-ink:var(--jz-forest); --jz-soft:var(--jz-wash); --jz-field-line:var(--jz-faint);
--jz-red:var(--jz-danger); --jz-red-soft:var(--jz-danger-soft); --jz-red-line:var(--jz-danger);
--jz-amber:var(--jz-late); --jz-amber-soft:var(--jz-late-soft); --jz-amber-line:var(--jz-late-edge); --jz-amber-dot:var(--jz-late-edge);
--jz-ok:var(--jz-forest); --jz-ok-soft:var(--jz-wash); --jz-tab-off:var(--jz-ink-2);
--b1:var(--jz-ink); --b2:var(--jz-forest); --b2ink:var(--jz-forest); --b3:var(--jz-wash); --label2:var(--jz-ink-2); --label3:var(--jz-faint);
--hair:var(--jz-hair); --field:var(--jz-surface-2); --canvas:var(--jz-page); --muted:var(--jz-ink-2); --line:var(--jz-hair);
--soft:var(--jz-surface-2); --red:var(--jz-danger); --green:var(--jz-forest); --shadow:var(--jz-shadow);
}
/* ---------- 2. Base ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--jz-paper)}
body{margin:0;background:var(--jz-paper);color:var(--jz-ink);font:500 var(--jz-t-body)/1.42 var(--jz-sans);letter-spacing:0;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
#app{max-width:430px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--jz-air) right -200px top -240px/520px 520px no-repeat,var(--jz-paper);color:var(--jz-ink);overflow-x:clip;padding-bottom:calc(var(--jz-tabbar) + var(--jz-safe-b) + 24px)}
#app.plain{padding-bottom:calc(var(--jz-safe-b) + 16px)}
body:has(.dock) #app{padding-bottom:calc(var(--jz-tabbar) + var(--jz-safe-b) + var(--jz-btn) + 2*var(--jz-dock-gap) + 24px)}
body:has(.dock) #app.plain{padding-bottom:calc(var(--jz-safe-b) + var(--jz-btn) + 48px)}
a{color:var(--jz-forest);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--jz-forest);outline-offset:2px}
.hero :focus-visible,.alert.success :focus-visible,.alert.info :focus-visible{outline-color:var(--jz-hero-num)}
.num,.amt,.money,.tm,.tot span:last-child,.lt{font-variant-numeric:tabular-nums}
code{font-family:var(--jz-sans);font-variant-numeric:tabular-nums}
p{margin:0 0 var(--jz-s3)}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* The two page wrappers most screens use today. The gutter comes from the wrapper,
so components inside drop their own side margins. New screens can skip the wrapper:
every component carries its own 16px gutter at the top level. */
.body,.pad{padding:var(--jz-s2) var(--jz-gutter) var(--jz-s6)}
.body.flush{padding:0}
:is(.body,.pad) :is(.card,.group,.figure,.hero,.plainlinks,details.fold,.empty,.seg,.usual,.clear,.steps,.safe,.hint,.note,.lead,.label,.none,h2,.need,.sec){margin-left:0;margin-right:0}
:is(.body,.pad) .phead{padding-left:0;padding-right:0}
:is(.body,.pad) .back{padding-left:0;padding-right:var(--jz-s3)}
:is(.body,.pad) .daystrip{margin-left:calc(-1 * var(--jz-gutter));margin-right:calc(-1 * var(--jz-gutter))}
:is(.body,.pad) .dock{margin:0}
/* ---------- 3. Top bar ----------
Redesign (6 Nov): one quiet line over the page's own air. The firm sits at the left (its 32px tile), alerts and you
(your initials) at the right as 48px targets. The bar is see-through at the top of the page and picks up the page
colour and a hairline once you scroll (CSS scroll timeline; older browsers just get the glass). */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:flex-start;gap:var(--jz-s2);box-sizing:border-box;min-height:calc(var(--jz-topbar) + var(--jz-safe-t));padding:var(--jz-safe-t) 12px 0 var(--jz-gutter);background:color-mix(in srgb,var(--jz-paper) 86%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:none;color:var(--jz-ink)}
@supports (animation-timeline:scroll()){
.top{animation:jz-top linear both;animation-timeline:scroll(root);animation-range:0 32px}
@keyframes jz-top{from{background-color:color-mix(in srgb,var(--jz-paper) 0%,transparent);box-shadow:0 1px 0 transparent;-webkit-backdrop-filter:none;backdrop-filter:none}to{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:color-mix(in srgb,var(--jz-paper) 86%,transparent);box-shadow:0 1px 0 var(--jz-hair)}}
}
/* Jeevz's own mark: the J tile and the lowercase wordmark */
.top .mark{display:inline-flex;align-items:center;gap:10px;flex:none;min-height:var(--jz-tap);padding:0;margin:0;background:none;border-radius:0;box-shadow:none;color:var(--jz-ink);font:800 21px/1 var(--jz-display);letter-spacing:-.03em;text-transform:lowercase;text-decoration:none}
.top .mark::before{content:"";flex:none;width:32px;height:32px;background:url("mark.ea52a70d0fb1.svg") center/contain no-repeat;border-radius:var(--jz-r-icon)}
.top .mark::after{content:".";color:var(--jz-forest);margin-left:-9px}
.top .firmname{flex:1;min-width:0;text-align:left;font:600 15px/1.2 var(--jz-sans);color:var(--jz-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the firm's own header (custom brand): its tile (logo, or first letter) and its name, never lowercased. The tile is
the one place the firm's colour shows in the chrome. A logo shows from its left edge, where most keep their symbol. */
.top .mark.firm{display:block;flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:var(--jz-tap);text-transform:none;font:600 17px/var(--jz-tap) var(--jz-sans);letter-spacing:-.01em;color:var(--jz-ink)}
.top .mark.firm::before,.top .mark.firm::after{content:none}
.top .flogo{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:-3px 10px 0 0;vertical-align:middle;overflow:hidden;border-radius:var(--jz-r-icon);background:var(--brand,var(--jz-ink));color:var(--on-brand,var(--jz-on-ink));font:700 15px/32px var(--jz-sans);letter-spacing:0;box-shadow:0 0 0 1.5px var(--jz-edge)}
.top .flogo:has(img){justify-content:flex-start;background:#fff}
.top .flogo img{display:block;flex:none;width:auto;height:32px;max-width:none;max-height:none;object-fit:contain;object-position:left center}
/* a customer or payer link page (proof, price check, wait, snags, gas, EICR) wears the firm: its tile and name, never the Jeevz mark. */
#app>.top.pubtop .mark.firm{display:inline-flex;align-items:center;font:600 17px/48px var(--jz-sans);color:var(--jz-ink);letter-spacing:-.01em;overflow:hidden}
#app>.top.pubtop .mark.firm .flogo{margin:-3px 10px 0 0;width:32px;height:32px;font-size:15px;line-height:32px}
.topright{margin-left:auto;display:flex;align-items:center;gap:4px;flex:none}
.top .phonelink,.top .settings{flex:none;width:var(--jz-tap);height:var(--jz-tap);min-height:0;margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:var(--jz-ink);font-size:0;text-decoration:none;transition:background var(--jz-ease)}
.top .phonelink svg,.top .settings svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.top .phonelink:active,.top .settings:active{background:var(--jz-press)}
.top .phonelink[aria-current=page],.top .settings[aria-current=page]{background:var(--jz-soft);color:var(--jz-forest-ink)}
@media (max-width:359px){.top{padding-left:12px;padding-right:4px}.top .firmname{display:none}}
/* ---------- 4. Bottom bar ----------
Redesign (6 Nov). Every tab is labelled (13px semibold), and the lit tab says so three ways, never by colour alone.
Light: a floating white bar, 80px tall, 12px in from each side and 14px off the bottom (plus the home indicator);
the lit tab's icon sits in a soft green pill, its label is ink and bold, a forest dot sits under it.
Night: an edge-to-edge graphite bar; the lit tab is lime with a gradient tick on its top edge.
Both come from the shell tokens (--jz-bar, --jz-tabs-*, --jz-tab-*), so there is one rule for both looks.
The Inbox badge is red with an edge in the bar's colour. A fade of the page colour under the bar keeps content from
showing through its edges. */
#tabs{position:fixed;left:50%;bottom:calc(var(--jz-tabs-lift) + var(--jz-safe-b) - var(--jz-tabs-pad-b));transform:translateX(-50%);width:calc(100% - 2 * var(--jz-tabs-inset));max-width:calc(430px - 2 * var(--jz-tabs-inset));box-sizing:border-box;z-index:30;display:flex;gap:0;padding:6px 6px calc(6px + var(--jz-tabs-pad-b));border-radius:var(--jz-r-tabs);background:var(--jz-bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border:0;box-shadow:var(--jz-tabs-shadow)}
#tabs::before{content:"";position:absolute;left:calc(-1 * var(--jz-tabs-inset));right:calc(-1 * var(--jz-tabs-inset));bottom:calc(var(--jz-tabs-pad-b) - var(--jz-tabs-lift) - var(--jz-safe-b));height:calc(122px + var(--jz-safe-b));background:linear-gradient(color-mix(in srgb,var(--jz-paper) 0%,transparent),var(--jz-paper) 45%);z-index:-1;pointer-events:none}
#tabs a{flex:1 1 0;min-width:0;height:calc(var(--jz-tabs-h) - 12px);min-height:var(--jz-tap);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0 2px;border-radius:var(--jz-r-tab);position:relative;color:var(--jz-ink-2);font:600 var(--jz-t-label)/1.1 var(--jz-sans);letter-spacing:0;text-decoration:none;box-shadow:none;white-space:nowrap;transition:color var(--jz-ease),transform var(--jz-dur-press) ease}
#tabs .ti{display:grid;place-items:center;width:56px;height:32px;border-radius:var(--jz-r-full);transition:background var(--jz-ease)}
#tabs svg,#tabs a.on svg{display:block;width:26px;height:26px;padding:0;box-sizing:content-box;border-radius:0;background:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
#tabs svg>*{fill:none}
#tabs svg .dt{fill:currentColor;stroke:none}
#tabs .tl{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tabs a.on,#tabs a[aria-current=page]{color:var(--jz-tab-on);font-weight:700;box-shadow:none}
#tabs a.on .ti,#tabs a[aria-current=page] .ti{background:var(--jz-tab-pill);color:var(--jz-tab-pill-fg)}
#tabs a.on::after,#tabs a[aria-current=page]::after{content:"";position:absolute;bottom:1px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--jz-tab-dot)}
#tabs a.on::before,#tabs a[aria-current=page]::before{content:"";position:absolute;top:-6px;left:50%;width:32px;height:4px;margin-left:-16px;border-radius:0 0 var(--jz-r-s) var(--jz-r-s);background:var(--jz-tab-tick)}
#tabs a.on svg,#tabs a[aria-current=page] svg{background:none}
#tabs a:active{transform:scale(.94)}
#tabs a:active svg{background:none}
#tabs em{position:absolute;top:2px;left:calc(50% + 8px);box-sizing:border-box;min-width:24px;height:24px;padding:0 6px;border-radius:var(--jz-r-full);background:var(--jz-danger-fill);color:var(--jz-on-danger);font:700 14px/20px var(--jz-sans);font-style:normal;font-variant-numeric:tabular-nums;letter-spacing:0;text-align:center;border:2px solid var(--jz-bar-solid);box-shadow:none}
@media (max-width:359px){#tabs{padding-left:2px;padding-right:2px}#tabs a{font-size:12px}#tabs .ti{width:46px}}
/* ---------- 5. Page header ---------- */
.phead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--jz-s2) var(--jz-s3);padding:var(--jz-s3) var(--jz-gutter) var(--jz-s2)}
.phead>:is(.eyebrow,.lead,.count,small,p){flex-basis:100%}
.phead>.eyebrow{margin-bottom:-4px}
.phead .btn{margin:0}
h1{margin:0;font:700 var(--jz-t-title)/1.08 var(--jz-display);letter-spacing:var(--jz-track-display);color:var(--jz-ink)}
.phead h1{white-space:normal;font-size:var(--jz-t-title);min-width:0}
.body>h1,.pad>h1{margin:var(--jz-s2) 0 var(--jz-s3)}
#app>h1{padding:var(--jz-s3) var(--jz-gutter) 0;margin:0 0 var(--jz-s3)}
h1 .stop{color:var(--jz-forest)}
.eyebrow{display:block;margin:0 0 6px;font:600 var(--jz-t-eyebrow)/1.3 var(--jz-sans);letter-spacing:var(--jz-eyebrow-track);text-transform:var(--jz-eyebrow-case);color:var(--jz-muted)}
.phead .count{display:block;margin-top:6px;font:500 var(--jz-t-small)/1.3 var(--jz-sans);letter-spacing:0;color:var(--jz-muted)}
.lead{margin:var(--jz-s2) var(--jz-gutter) var(--jz-s6);font-size:15px;line-height:1.4;color:var(--jz-muted);max-width:36ch}
.phead .lead{margin:var(--jz-s1) 0 0}
.back{display:inline-flex;align-items:center;gap:2px;min-height:var(--jz-tap);padding:0 var(--jz-gutter);margin:0;font:600 17px/1.2 var(--jz-sans);color:var(--jz-forest);text-decoration:none}
h2{margin:var(--jz-s8) var(--jz-gutter) var(--jz-s3);font:700 var(--jz-t-h2)/1.2 var(--jz-display);letter-spacing:var(--jz-track-h2);color:var(--jz-ink)}
h3{margin:var(--jz-s5) 0 var(--jz-s2);font:600 17px/1.3 var(--jz-sans);letter-spacing:-.01em;color:var(--jz-ink)}
.card h2,.card h3,.sec h2{margin:0 0 var(--jz-s3)}
/* section header: sentence case, 13/600, muted, lined up with the text inside the cards */
.label{display:block;margin:var(--jz-s8) var(--jz-gutter) var(--jz-s2);padding:0 4px;font:600 15px/1.3 var(--jz-sans);letter-spacing:0;text-transform:none;color:var(--jz-muted)}
.label .val{float:right;font-family:var(--jz-sans);font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none}
/* ---------- 6. The Dock: the one action, in a tray above the bar ----------
A tray of paper with a blur, sitting right on the tab bar. The page gets bottom padding the size of the tray
(section 2), so nothing scrolls under it unseen. */
.dock{position:fixed;z-index:25;left:50%;transform:translateX(-50%);width:100%;max-width:430px;box-sizing:border-box;bottom:calc(var(--jz-tabbar) + var(--jz-safe-b));margin:0;padding:var(--jz-dock-gap) var(--jz-gutter);background:color-mix(in srgb,var(--jz-paper) 90%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 -.5px 0 var(--jz-hair);pointer-events:auto}
.dock::before{content:none}
.dock form{margin:0}
.dock .btn,.dock button{display:flex;width:100%;margin:0;box-shadow:none}
#app.plain .dock{bottom:0;padding-bottom:calc(var(--jz-dock-gap) + var(--jz-safe-b))}
@media (max-height:620px){
.dock{position:static;transform:none;width:auto;max-width:none;padding:var(--jz-s4) var(--jz-gutter) 0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
body:has(.dock) #app{padding-bottom:calc(var(--jz-tabbar) + var(--jz-safe-b) + 24px)}
}
/* ---------- 7. Buttons ----------
Primary: 52px pill, forest solid, 17/600. One per screen. The gradient is only for sending and getting paid
(.btn.is-send, section 31; core/test_buttons.py holds the allow-list). Secondary: white with a soft shadow, no outline.
Plain: forest text, no underline. Pressed: a little smaller. */
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--jz-btn);padding:0 24px;margin:0;border:0;border-radius:var(--jz-r-full);background:var(--jz-forest);color:var(--jz-on-forest);font:600 18px/1.1 var(--jz-sans);letter-spacing:-.01em;text-align:center;text-decoration:none;box-shadow:none;cursor:pointer;filter:none;transition:transform 120ms ease,filter 120ms ease}
.btn:hover{filter:none}
.btn:active{transform:scale(.97);filter:brightness(.94)}
.btn.block,button.btn.block{display:flex;width:100%}
.btn+.btn,.btn+form,form+.btn{margin-left:var(--jz-s2)}
.btn.block+.btn.block,.btn.block+form,form+.btn.block,.btn.block+.btn,.btn+.btn.block{margin-left:0;margin-top:var(--jz-s2)}
form:has(>.btn.block)+form:has(>.btn.block){margin-top:var(--jz-s2)}
/* secondary: white */
.btn.ghost,button.ghost{background:var(--jz-btn2-bg);color:var(--jz-btn2-fg);border:0;border-radius:var(--jz-r-full);box-shadow:inset 0 0 0 1.5px var(--jz-btn2-ring);font-weight:600;padding:0 22px}
.btn.ghost:active,button.ghost:active{background:var(--jz-field)}
/* strong but not final: ink */
.btn.ink,button.ink{background:var(--jz-ink);color:var(--jz-on-ink);border:0}
/* small: still a full tap target */
.btn.small,button.small,.phead .btn.small{min-height:var(--jz-tap);padding:0 18px;font-size:15px;border-radius:var(--jz-r-full)}
/* talk button keeps class="btn small ghost talk-btn" */
.talk-btn{width:100%;gap:8px}
.talk-btn::before{content:"";flex:none;width:10px;height:16px;border:2px solid currentColor;border-radius:var(--jz-r-full);box-shadow:0 6px 0 -4px currentColor}
.talk-btn[aria-pressed=true]{background:var(--jz-red-soft);color:var(--jz-red);box-shadow:none}
.talk-btn[aria-pressed=true]::before{width:12px;height:12px;border:0;border-radius:var(--jz-r-icon);background:currentColor;box-shadow:0 0 0 0 rgba(196,35,26,.45);animation:jz-rec 1.4s infinite}
@keyframes jz-rec{to{box-shadow:0 0 0 10px rgba(196,35,26,0)}}
/* plain text button */
.btn.quiet,button.quiet,.linkbtn{display:inline-flex;align-items:center;background:none;border:0;min-height:var(--jz-tap);padding:0 12px;margin:0;color:var(--jz-forest);font:600 17px/1.2 var(--jz-sans);text-decoration:none;box-shadow:none;cursor:pointer}
/* danger: red words on white, never a red slab */
.btn.danger,button.danger{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:var(--jz-btn);padding:0 20px;margin:0;border:0;border-radius:var(--jz-r-full);background:var(--jz-card);color:var(--jz-red);box-shadow:inset 0 0 0 1.5px var(--jz-red);font:600 18px/1.1 var(--jz-sans)}
.btn.danger::before,button.danger::before{content:"";flex:none;width:12px;height:12px;border-radius:var(--jz-r-icon);background:currentColor}
/* round icon buttons: mint, forest glyph */
.iconbtn,button.iconbtn{flex:none;width:var(--jz-tap);height:var(--jz-tap);min-height:var(--jz-tap);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;background:var(--jz-soft);border:0;color:var(--jz-forest-ink);font:600 20px/1 var(--jz-sans);text-decoration:none;cursor:pointer;transition:transform 120ms ease}
.iconbtn:active{transform:scale(.94)}
.iconbtn.call{background:var(--jz-forest);color:var(--jz-on-forest);border:0} /* a black button is a fault (design-learnings) */
.iconbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--jz-s2);margin-top:var(--jz-s3)}
.acts>*{flex:1 1 auto}
.acts form{margin:0;display:flex}
.acts form>.btn,.acts form>button{flex:1}
.acts .btn,.acts button{margin:0}
button:disabled,.btn[aria-disabled=true],button.btn:disabled{background:var(--jz-field);color:var(--jz-faint);border-color:var(--jz-field);box-shadow:none;cursor:not-allowed}
/* ---------- 8. Cards, folds, hero ----------
One white surface per idea: 16px corners, a soft shadow, no border. */
.card,.sec{margin:0 var(--jz-gutter) var(--jz-s4);padding:var(--jz-s4);background:var(--jz-card);border:0;border-radius:var(--jz-r);box-shadow:var(--jz-shadow);color:var(--jz-ink)}
.card>:first-child,.sec>:first-child{margin-top:0}
.card>:last-child,.sec>:last-child{margin-bottom:0}
.card.flush{padding:0;overflow:hidden}
.card.risk{background:var(--jz-red-soft);box-shadow:none}
.card form+form,.card .btn+form,.card form+.btn{margin-top:var(--jz-s2)}
.group{margin:0 var(--jz-gutter) var(--jz-s4);padding:0;background:var(--jz-card);border:0;border-radius:var(--jz-r);box-shadow:var(--jz-shadow);overflow:hidden}
/* a bare .stat outside .stats, .figs and .clear (older screens) */
.stat{margin:0;padding:14px 16px;background:var(--jz-card);border:0;border-radius:var(--jz-r-m);box-shadow:var(--jz-shadow);color:var(--jz-ink)}
.stat b{display:block;font:800 26px/1.05 var(--jz-sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--jz-ink)}
.stat small{font-size:15px;color:var(--jz-muted)}
/* the dark hero: one per top-level screen. Deep green-black, a soft glow of the gradient in the corner, no stripe. */
.hero{position:relative;overflow:hidden;display:block;margin:var(--jz-s2) var(--jz-gutter) var(--jz-s6);padding:var(--jz-s6);border:0;border-radius:var(--jz-r-l);background:var(--jz-night);color:var(--jz-on-night);text-decoration:none;box-shadow:var(--jz-shadow-hero);isolation:isolate}
.hero::before{content:none}
.hero::after{content:"";position:absolute;right:-90px;top:-110px;width:260px;height:260px;border-radius:50%;background:var(--jz-grad);opacity:.12;filter:blur(48px);pointer-events:none;z-index:-1}
.hero .eyebrow{color:var(--jz-night-muted)}
.hero .big,.hero>b{display:block;margin:6px 0;font:800 var(--jz-t-hero)/1.05 var(--jz-sans);letter-spacing:-.035em;color:var(--jz-hero-num);font-variant-numeric:tabular-nums}
.hero p,.hero small{margin:0;color:var(--jz-night-muted);font-size:15px;line-height:1.4}
.hero a:not(.go){color:var(--jz-on-night)}
.hero .go{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--jz-btn);margin-top:var(--jz-s5);padding:0 24px;border-radius:var(--jz-r-full);background:rgba(255,255,255,.1);color:var(--jz-on-night);font:600 17px/1 var(--jz-sans);text-decoration:none}
.hero.lead-action .go{width:100%;background:#fff;color:#17211d}
.hero .meta{display:flex;flex-wrap:wrap;gap:var(--jz-s6);margin-top:var(--jz-s4);padding-top:var(--jz-s4);border-top:.5px solid var(--jz-night-line)}
.hero .meta a,.hero .meta div{display:flex;flex-direction:column;gap:2px;min-height:44px;justify-content:center;color:var(--jz-on-night);text-decoration:none}
.hero .meta b{font:700 20px/1.1 var(--jz-sans);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--jz-on-night)}
.hero .meta b.late{color:var(--jz-night-late)}
.hero .meta b.late::before{content:none}
.hero .meta small{font:500 13px/1.3 var(--jz-sans);letter-spacing:0;text-transform:none;color:var(--jz-night-muted)}
.hero.calm{text-align:left}
.hero.calm .big,.hero.calm>b{color:var(--jz-on-night);font-size:34px;margin-top:var(--jz-s4)}
.hero.calm .tick{display:inline-flex;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);align-items:center;justify-content:center}
.hero.calm .tick::after{content:"";width:9px;height:16px;border:solid var(--jz-hero-num);border-width:0 2.5px 2.5px 0;transform:translateY(-2px) rotate(45deg)}
/* a white "hero-lite" for one number on a tool page */
.figure{margin:var(--jz-s2) var(--jz-gutter) var(--jz-s4);padding:var(--jz-s5);background:var(--jz-card);border:0;border-radius:var(--jz-r);box-shadow:var(--jz-shadow)}
.figure b{display:block;margin:2px 0 4px;font:800 44px/1.05 var(--jz-sans);letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--jz-ink)}
.figure.late b{color:var(--jz-red)} .figure.warn b{color:var(--jz-amber)}
.figure small{font-size:15px;color:var(--jz-muted)}
/* folds for rare fields: a row with a chevron that turns */
details.fold{margin:0 var(--jz-gutter) var(--jz-s3);padding:0;background:var(--jz-card);border:0;border-radius:var(--jz-r);box-shadow:var(--jz-shadow)}
details.fold>summary{list-style:none;position:relative;min-height:var(--jz-row);margin:0;padding:var(--jz-s3) 48px var(--jz-s3) var(--jz-s4);display:flex;flex-direction:column;justify-content:center;gap:2px;cursor:pointer;font:600 17px/1.3 var(--jz-sans);color:var(--jz-ink);border-radius:var(--jz-r)}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary small{font:400 15px/1.35 var(--jz-sans);color:var(--jz-muted)}
details.fold>summary::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-6px;border:solid var(--jz-chev);border-width:0 1.75px 1.75px 0;transform:rotate(45deg);transition:transform var(--jz-ease)}
details.fold[open]>summary{margin-bottom:0}
details.fold[open]>summary::after{transform:translateY(3px) rotate(-135deg)}
details.fold[open]>:not(summary){padding-left:var(--jz-s4);padding-right:var(--jz-s4)}
details.fold[open]>:last-child{padding-bottom:var(--jz-s4)}
details.fold[open]>.card,details.fold[open]>.group{margin:0 var(--jz-s4) var(--jz-s3);padding:var(--jz-s4);box-shadow:none;background:var(--jz-paper)}
/* ---------- 9. List rows ----------
56-60px rows inside one white card. Hairlines inset to the text, a quiet drawn chevron, no stripes. */
.row,.group .row{display:flex;align-items:center;gap:var(--jz-s3);width:100%;box-sizing:border-box;min-height:var(--jz-row);margin:0;padding:10px var(--jz-s4);background:var(--jz-card);border:0;border-radius:0;box-shadow:none;color:var(--jz-ink);font:inherit;text-align:left;text-decoration:none;position:relative;transition:background 120ms ease}
#app>.row,.body>.row{border-bottom:.5px solid var(--jz-hair)}
.group .row+.row::before{content:"";position:absolute;top:0;left:68px;right:0;height:1.5px;background:var(--jz-hair)}
.group .row:not(:has(.av,.ticon))+.row:not(:has(.av,.ticon))::before{left:var(--jz-s4)}
.row:active,.group .row:active{background:var(--jz-press)}
.av{flex:none;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--jz-soft);color:var(--jz-forest-ink);font:700 15px/1 var(--jz-sans);letter-spacing:0}
.unread .av{background:var(--jz-soft);color:var(--jz-forest-ink)}
.av.xs,.pc .av.xs{width:28px;height:28px;font-size:12px;display:inline-flex}
.rb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.r1{display:flex;justify-content:space-between;align-items:baseline;gap:var(--jz-s2)}
.r2{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px}
.r1 b{font:600 17px/1.3 var(--jz-sans);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unread .r1 b{font-weight:700}
.tm,.unread .tm{font:400 15px/1.2 var(--jz-sans);font-variant-numeric:tabular-nums;color:var(--jz-muted);white-space:nowrap;flex:none}
.pv,.rb small,.unread .pv{font-size:15px;line-height:1.35;color:var(--jz-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb .r2 .pv{flex:1 0 100%}
.rt{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.amt,.qrow .amt{font:700 17px/1.2 var(--jz-sans);letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--jz-ink)}
a.row:not(:has(.amt)):not(.unread)::after{content:"";flex:none;width:8px;height:8px;border:solid var(--jz-chev);border-width:1.75px 1.75px 0 0;transform:rotate(45deg);margin:0 4px 0 var(--jz-s1)}
/* needs you: a dot in the gutter and a heavier name */
.row.unread::after{content:"";position:absolute;left:5px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--jz-forest)}
.unread .pv{color:var(--jz-ink)}
.unread .tm{color:var(--jz-forest);font-weight:600}
.needs{display:inline-flex;align-items:center;min-height:22px;margin:0;padding:0 8px;border-radius:var(--jz-r-full);background:var(--jz-amber-soft);color:var(--jz-amber);font:600 13px/1 var(--jz-sans);letter-spacing:0}
.late{color:var(--jz-red);font-weight:600}
.late::before{content:none}
.qrow{font-size:17px}
.qrow .rb b{display:block}
/* ---------- 10. Chips and status: a word with a dot, no boxes ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:0 9px;margin:0;border-radius:var(--jz-r-full);background:var(--jz-field);color:var(--jz-ink);font:600 var(--jz-t-chip)/1 var(--jz-sans);white-space:nowrap}
.chip.money,.chip.warn{background:var(--jz-amber-soft);color:var(--jz-amber)}
.chip.risk{background:var(--jz-red-soft);color:var(--jz-red)}
.chip.ok{background:var(--jz-ok-soft);color:var(--jz-ok)}
.chip.doubt{background:var(--jz-field);color:var(--jz-muted)}
.chip.risk::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.ok::before{content:"\2713";font-weight:700}
.pill{display:inline-flex;align-items:center;gap:6px;padding:0;margin:0;border-radius:0;background:none;font:600 var(--jz-t-chip)/1.2 var(--jz-sans);color:var(--jz-muted);white-space:nowrap}
.pill::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.st-draft{background:none;color:var(--jz-muted)}
.pill.st-draft::before{background:currentColor;box-shadow:none}
.pill.st-ready{background:none;color:var(--jz-info)}
.pill.st-ready::before{background:currentColor;box-shadow:none}
.pill.st-sent{background:none;color:var(--jz-forest)}
.pill.st-accepted,.pill.st-paid{background:none;color:var(--jz-ok)}
.pill.st-accepted::before,.pill.st-paid::before{content:"\2713";width:auto;height:auto;background:none;font-weight:700}
.pill.st-void{background:none;color:var(--jz-muted);text-decoration:line-through}
.pill.price-needed{color:var(--jz-amber)}
.pill.price-needed::before{background:currentColor}
.cnt{display:inline-flex;align-items:center;min-height:20px;padding:0 7px;border-radius:var(--jz-r-full);background:var(--jz-field);color:var(--jz-ink);font:600 13px/1 var(--jz-sans);font-variant-numeric:tabular-nums}
.due{display:inline-flex;align-items:center;min-height:24px;margin-top:6px;padding:0 9px;border-radius:var(--jz-r-full);background:var(--jz-field);color:var(--jz-ink);font:600 13px/1 var(--jz-sans)}
.due.late{background:var(--jz-red-soft);color:var(--jz-red)}
/* ---------- 11. Today tiles (test-safe order: labelnnote) ---------- */
.stat.risk b{color:var(--jz-red)}
.stat.risk small:last-of-type::before{content:"\25B2\00a0";color:var(--jz-red);font-size:.75em}
/* the hero tile: an a.stat.hero */
.stat.hero{display:grid;grid-template-columns:1fr;grid-template-areas:"lbl" "n" "nt" "go";row-gap:4px;border:0;padding:var(--jz-s6) var(--jz-s5) var(--jz-s5)}
.stat.hero b{grid-area:n;display:block;margin:2px 0 4px;font:800 var(--jz-t-hero)/.95 var(--jz-sans);letter-spacing:-.05em;color:var(--jz-hero-num)}
.stat.hero small:first-of-type{grid-area:lbl;order:0;color:var(--jz-on-night);font:700 19px/1.3 var(--jz-sans)}
.stat.hero small:last-of-type{grid-area:nt;color:var(--jz-night-muted);font-size:17px}
.stat.hero small:only-of-type{grid-area:lbl}
.stat.hero .go{grid-area:go}
.stat.hero.risk b{color:var(--jz-night-late)}
/* all clear: zero tiles as small quiet chips, still tappable, still read out */
.clear{display:flex;flex-wrap:wrap;gap:var(--jz-s2);margin:0 var(--jz-gutter) var(--jz-s5)}
.clear .stat,.clear .stat.zero{display:inline-flex;align-items:center;gap:6px;min-height:var(--jz-tap);margin:0;padding:0 14px;border:0;border-radius:var(--jz-r-full);background:var(--jz-press);box-shadow:none;color:var(--jz-muted);text-decoration:none}
.clear .stat b{order:-1;font-size:0;line-height:0;color:var(--jz-ok)}
.clear .stat b::before{content:"\2713";font:900 15px/1 var(--jz-sans)}
.clear .stat small:first-of-type{font:700 15px/1 var(--jz-sans);color:var(--jz-muted)}
.clear .stat small:last-of-type:not(:first-of-type){display:none}
.clear .stat:active{background:var(--jz-soft)}
/* ---------- 12. Tool icons (Settings > Your tools switches) ---------- */
.ticon{flex:none;width:48px;height:48px;border-radius:var(--jz-r-icon);background:var(--jz-soft);display:inline-flex;align-items:center;justify-content:center;color:var(--jz-forest-ink);font:800 26px/1 var(--jz-sans)}
.ticon svg{width:26px;height:26px;fill:none;stroke:var(--jz-forest-ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.onbar{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;margin-left:6px;border-radius:var(--jz-r-full);background:var(--jz-ink);color:var(--jz-on-ink);font:800 12px/1 var(--jz-sans);vertical-align:2px}
.switchrow:has(.switch:not(:checked)) .ticon{background:var(--jz-field)}
.switchrow:has(.switch:not(:checked)) .ticon svg{stroke:var(--jz-faint)}
.usual{margin:0 var(--jz-gutter) var(--jz-s4);padding:var(--jz-s4);border-radius:var(--jz-r-m);background:var(--jz-soft);color:var(--jz-forest-ink);font:600 15px/1.45 var(--jz-sans)}
.usual b{color:var(--jz-ink)}
/* ---------- 13. Empty states: no box, a faint line icon, a title, one line ---------- */
.empty{display:flex;flex-direction:column;align-items:center;gap:4px;margin:var(--jz-s8) var(--jz-gutter);padding:var(--jz-s6) var(--jz-s4);text-align:center;background:transparent;border:0;border-radius:0;box-shadow:none;color:var(--jz-muted);font-size:15px;line-height:1.45}
.empty::before{content:"";width:56px;height:56px;margin-bottom:12px;border-radius:0;background:var(--jz-muted);opacity:.4;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 13.5L6 5.6A1.5 1.5 0 0 1 7.45 4.5h9.1A1.5 1.5 0 0 1 18 5.6l2.5 7.9V18a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z'/%3E%3Cpath d='M3.5 13.5h4.5l1.25 2.25h5.5L16 13.5h4.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 13.5L6 5.6A1.5 1.5 0 0 1 7.45 4.5h9.1A1.5 1.5 0 0 1 18 5.6l2.5 7.9V18a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z'/%3E%3Cpath d='M3.5 13.5h4.5l1.25 2.25h5.5L16 13.5h4.5'/%3E%3C/svg%3E") center/contain no-repeat}
.empty b,.empty strong{display:block;font:700 22px/1.25 var(--jz-sans);letter-spacing:-.02em;color:var(--jz-ink)}
.empty .btn{margin-top:var(--jz-s4)}
.none{margin:var(--jz-s2) var(--jz-gutter);padding:0;background:none;border:0;box-shadow:none;text-align:left;font-size:15px;color:var(--jz-muted)}
.group .none{margin:0;padding:var(--jz-s4)}
/* ---------- 14. Forms: filled wells, no outlines, a forest ring on focus ---------- */
.field,label.field{display:flex;flex-direction:column;gap:6px;margin:0 0 var(--jz-s4);font:600 13px/1.3 var(--jz-sans);color:var(--jz-muted)}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not(.switch),select,textarea{display:block;width:100%;box-sizing:border-box;min-height:var(--jz-btn);margin:0;padding:14px 16px;border:0;border-radius:var(--jz-r-m);background-color:var(--jz-field);color:var(--jz-ink);font:400 17px/1.35 var(--jz-sans);font-variant-numeric:tabular-nums;box-shadow:none;-webkit-appearance:none;appearance:none;transition:box-shadow var(--jz-ease),background-color var(--jz-ease)}
textarea{min-height:108px;resize:none;field-sizing:content}
select{padding-right:44px;text-overflow:ellipsis;white-space:nowrap;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d867f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");background-position:calc(100% - 14px) 50%;background-size:18px 18px;background-repeat:no-repeat}
input:focus,select:focus,textarea:focus{outline:0;border-color:transparent;box-shadow:0 0 0 2px var(--jz-forest);background-color:var(--jz-card)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:0}
input[readonly]{background-color:var(--jz-field);color:var(--jz-muted)}
input::placeholder,textarea::placeholder{color:var(--jz-faint);opacity:1}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{opacity:0;position:absolute;inset:0;width:auto;height:auto;cursor:pointer}
input[type=date],input[type=time]{position:relative}
input[inputmode=decimal],input[type=number],input[type=tel]{font-family:var(--jz-sans);font-variant-numeric:tabular-nums}
input[type=checkbox]:not(.switch),input[type=radio]{display:inline-block;width:24px;height:24px;min-height:0;margin:0;padding:0;flex:none;accent-color:var(--jz-forest);background:none;border:0}
.field:has(>input[type=checkbox]:not(.switch)){display:flex;flex-direction:row;align-items:center;gap:12px;min-height:var(--jz-tap);margin:var(--jz-s2) 0;font:400 17px/1.3 var(--jz-sans);color:var(--jz-ink)}
input[type=file]{display:block;width:100%;box-sizing:border-box;min-height:64px;margin:0;padding:10px;border:0;border-radius:var(--jz-r);background:var(--jz-card);box-shadow:var(--jz-shadow);font:400 15px var(--jz-sans);color:var(--jz-muted)}
input[type=file]::file-selector-button{min-height:44px;margin-right:12px;padding:0 18px;border:0;border-radius:var(--jz-r-full);background:var(--jz-soft);color:var(--jz-forest-ink);font:600 15px var(--jz-sans);cursor:pointer}
.errorlist{list-style:none;margin:0 0 12px;padding:12px 16px;border-radius:var(--jz-r-m);background:var(--jz-red-soft);color:var(--jz-red);font-weight:600;font-size:15px}
.err{color:var(--jz-red);font-weight:600}
.hint,.note{margin:var(--jz-s2) var(--jz-gutter) var(--jz-s4);padding:0 4px;font-size:13px;line-height:1.4;color:var(--jz-muted)}
.note.pad{padding:0}
:is(.card,.sec,.fold,.need,.figure) :is(.hint,.note){margin:var(--jz-s2) 0 0;padding:0}
.grid2,.work .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--jz-s3)}
@media (max-width:359px){.grid2,.work .grid2{grid-template-columns:1fr}}
form{margin:0}
/* ---------- 15. Switches: iOS size, forest when on ---------- */
input.switch{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:51px;height:31px;min-height:0;margin:0;padding:0;border:0;border-radius:var(--jz-r-full);background:var(--jz-switch-off);box-shadow:none;cursor:pointer;transition:background var(--jz-ease)}
input.switch::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:transform var(--jz-ease)}
input.switch:checked{background:var(--jz-forest);box-shadow:none}
input.switch:checked::after{transform:translateX(20px)}
input.switch:focus-visible{outline:3px solid rgba(48,109,85,.4);outline-offset:2px}
.switchrow{cursor:pointer}
/* ---------- 16. Segmented control (Inbox views, Week | Day): iOS size ---------- */
.seg.inline{display:flex;flex-direction:row;gap:2px;padding:2px;margin:0 var(--jz-gutter) var(--jz-s4);background:rgba(118,124,120,.12);border:0;border-radius:var(--jz-r-m)}
.seg.inline button{flex:1;min-height:34px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;border:0;border-radius:calc(var(--jz-r-m) - 2px);background:transparent;color:var(--jz-ink);font:500 15px/1 var(--jz-sans);text-decoration:none;box-shadow:none}
.seg.inline button.on,.seg.inline button[aria-pressed=true]{background:var(--jz-surface);color:var(--jz-ink);font-weight:600;border:0;box-shadow:0 3px 8px rgba(0,0,0,.08),0 1px 1px rgba(0,0,0,.04)}
/* ---------- 17. Choice cards (Assistant mode, .seg) ---------- */
.seg{display:flex;flex-direction:column;gap:var(--jz-s2);margin:0 var(--jz-gutter) var(--jz-s4);padding:0;background:none;border:0;border-radius:0;overflow:visible}
.seg form{margin:0;display:contents}
.seg button,.seg button:last-child{position:relative;flex:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;width:100%;min-height:var(--jz-row);margin:0;padding:12px 16px 12px 56px;background:var(--jz-card);border:0;box-shadow:var(--jz-shadow);border-radius:var(--jz-r);color:var(--jz-ink);font:800 18px/1.1 var(--jz-sans);text-align:left;box-shadow:none;cursor:pointer}
.seg button::before{content:"";position:absolute;left:18px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;box-shadow:inset 0 0 0 2.5px var(--jz-faint)}
.seg button.on,.seg button[aria-pressed=true]{background:var(--jz-card);color:var(--jz-ink);border-color:var(--jz-ink);box-shadow:0 0 0 1px var(--jz-ink)}
.seg button.on::before,.seg button[aria-pressed=true]::before{box-shadow:inset 0 0 0 7px var(--jz-ink)}
.seg button small,.seg button.on small{display:block;font:500 15px/1.3 var(--jz-sans);color:var(--jz-muted)}
/* ---------- 18. Toasts and alerts ---------- */
.flash{position:sticky;top:calc(var(--jz-topbar) + var(--jz-safe-t));z-index:18;padding:var(--jz-s2) var(--jz-gutter) 0}
/* Q7c: the alert is one paragraph (display:flow-root) and its mark floats at the start of the first line, so text
and links wrap beside it as one block. It used to be a wrapping flex row (".alert>:not(:first-child){flex-basis:100%}"),
which put a long line, and so the mark, on a line of its own. A float works whatever padding a screen gives the
alert, a pinned mark (.mn, .pck-pub) still wins, and a flex alert (toasts, .mn info) ignores the float. */
.alert{display:flow-root;flex-wrap:wrap;margin:0 0 var(--jz-s2);padding:14px 16px;border:1px solid var(--jz-amber-line);border-left:1px solid var(--jz-amber-line);border-radius:var(--jz-r-m);background:var(--jz-amber-soft);color:var(--jz-ink);font:600 15px/1.4 var(--jz-sans);box-shadow:none}
.alert::before{content:"!";float:left;margin:-1px 12px 0 0;width:24px;height:24px;border-radius:50%;background:var(--jz-late-fill);color:var(--jz-on-late);display:inline-flex;align-items:center;justify-content:center;font:900 15px/1 var(--jz-sans)}
/* a screen that makes its alert a flex row (.mn info and success) keeps the row it had: these two only act on flex items */
.alert>:not(:first-child){flex-basis:100%}
.alert form{margin-top:var(--jz-s2)}
.alert.error,.alert[role=alert]{background:var(--jz-red-soft);border-color:var(--jz-red-line);color:var(--jz-ink)}
.alert.error::before,.alert[role=alert]::before{background:var(--jz-red)}
.alert.success,.alert.info{background:var(--jz-ink);border-color:var(--jz-ink);color:var(--jz-on-ink);box-shadow:var(--jz-shadow)}
.alert.success::before{content:"\2713";background:var(--jz-grad);color:var(--jz-on-grad)}
.alert.info::before{content:"i";background:rgba(255,255,255,.18)}
.alert.success a,.alert.info a{color:var(--jz-hero-num)}
#needs-price,.need.money{background:var(--jz-amber-soft);border-color:var(--jz-amber-line)}
.need{margin:0 var(--jz-gutter) var(--jz-s3);padding:var(--jz-s4) var(--jz-s5);background:var(--jz-card);border:0;box-shadow:var(--jz-shadow);border-radius:var(--jz-r);box-shadow:var(--jz-shadow)}
.need b{display:block;font-weight:800}
.need p{margin:6px 0;font-size:15px}
.need.risk{background:var(--jz-red-soft);border-color:var(--jz-red-line)}
.danger-line{margin:6px 0;color:var(--jz-red);font-weight:800;font-size:17px}
.result{margin:var(--jz-s3) 0;padding:14px 16px;border-radius:var(--jz-r-m);background:var(--jz-amber-soft);color:var(--jz-ink);font-weight:700}
.result.passed{background:var(--jz-ink);color:var(--jz-on-ink)}
.result.waiting{background:var(--jz-field);color:var(--jz-ink);font-weight:500}
/* ---------- 19. Chat bubbles ---------- */
.tv{background:var(--jz-paper);min-height:50vh}
.thread{display:flex;flex-direction:column;gap:6px;padding:16px var(--jz-gutter)}
.msg{max-width:82%;padding:10px 14px;border-radius:var(--jz-r-bubble);font-size:17px;line-height:1.4;white-space:pre-line;box-shadow:none}
.msg.in{align-self:flex-start;background:var(--jz-card);border:0;box-shadow:var(--jz-shadow);color:var(--jz-ink);border-bottom-left-radius:var(--jz-r-tail)}
.msg.out{align-self:flex-end;background:var(--jz-soft);color:var(--jz-ink);border-bottom-right-radius:var(--jz-r-tail)}
.msg.flat{max-width:none;margin:6px 0;border-bottom-right-radius:var(--jz-r-bubble)}
.msg small{display:block;margin-top:4px;font:500 13px/1.2 var(--jz-sans);font-variant-numeric:tabular-nums;color:var(--jz-muted)}
.evt{align-self:center;display:inline-flex;gap:8px;align-items:center;min-height:32px;margin:10px 0;padding:0 14px;border:0;border-radius:var(--jz-r-full);background:var(--jz-field);box-shadow:none;font:500 13px/1.2 var(--jz-sans);letter-spacing:0;text-transform:none;color:var(--jz-muted)}
.evt span,.evt small{text-transform:none;letter-spacing:0;font-weight:500;color:inherit}
.evt[data-kind=missed_call]{background:var(--jz-red-soft);color:var(--jz-red)}
.theirs{margin:6px 0;padding:12px 16px;background:var(--jz-field);border-radius:var(--jz-r-bubble) var(--jz-r-bubble) var(--jz-r-bubble) var(--jz-r-tail);font-size:17px;line-height:1.4;color:var(--jz-ink);white-space:pre-line}
.quote{margin:6px 0;padding:12px 16px;background:var(--jz-field);border:0;border-radius:var(--jz-r-bubble) var(--jz-r-bubble) var(--jz-r-bubble) var(--jz-r-tail);color:var(--jz-ink);font-size:17px;white-space:pre-line}
textarea.draftbox{background:var(--jz-card);border:1.5px solid var(--jz-field-line);border-left:1.5px solid var(--jz-field-line);border-radius:var(--jz-r-bubble) var(--jz-r-bubble) var(--jz-r-tail) var(--jz-r-bubble);min-height:140px}
.bk{width:48px;height:48px;flex:none;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:50%;font-size:26px;line-height:1;color:var(--jz-ink);text-decoration:none}
/* ---------- 20. Steps and progress ---------- */
.steps{display:flex;gap:4px;list-style:none;margin:var(--jz-s3) var(--jz-gutter) var(--jz-s5);padding:0}
.steps li{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;font:700 12px/1.2 var(--jz-sans);color:var(--jz-muted);position:relative}
.steps li i{display:block;width:100%;height:8px;border-radius:var(--jz-r-full);background:var(--jz-line)}
.steps li.done i{background:var(--jz-forest)}
.steps li.now i,.steps li[aria-current=step] i{background:var(--jz-grad)}
.steps li.now,.steps li[aria-current=step]{color:var(--jz-ink);font-weight:800}
.steps li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:359px){.steps li:not(.now):not([aria-current=step]) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
.prog{height:8px;margin:6px 0 2px;border-radius:var(--jz-r-full);background:var(--jz-field);overflow:hidden}
.prog i{display:block;height:100%;background:var(--jz-forest);border-radius:var(--jz-r-full)}
.bar{display:block;height:8px;margin-top:4px;border-radius:var(--jz-r-full);background:var(--jz-field);overflow:hidden}
.bar i{display:block;height:100%;max-width:100%;background:var(--jz-forest)}
/* ---------- 21. Plain links list ---------- */
.plainlinks{display:flex;flex-direction:column;margin:0 var(--jz-gutter) var(--jz-s5);padding:0;background:var(--jz-card);border:0;box-shadow:var(--jz-shadow);border-radius:var(--jz-r);box-shadow:var(--jz-shadow);overflow:hidden}
.plainlinks form{margin:0}
.plainlinks a,.plainlinks button{display:flex;align-items:center;justify-content:space-between;gap:var(--jz-s3);width:100%;box-sizing:border-box;min-height:56px;margin:0;padding:0 var(--jz-s4);background:none;border:0;border-bottom:.5px solid rgba(23,33,29,.12);border-radius:0;font:400 17px/1.25 var(--jz-sans);color:var(--jz-ink);text-decoration:none;text-align:left;cursor:pointer}
.plainlinks>a:last-child,.plainlinks>form:last-child button{border-bottom:0}
.plainlinks a::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border:solid var(--jz-chev);border-width:1.75px 1.75px 0 0;transform:rotate(45deg)}
.plainlinks .val{margin-left:auto;font-weight:500;color:var(--jz-muted)}
.plainlinks .danger-text,.danger-text{color:var(--jz-red)}
.plainlinks a:active,.plainlinks button:active{background:var(--jz-soft)}
/* ---------- 22. Safety line ---------- */
.safe{display:block;margin:var(--jz-s6) var(--jz-gutter);padding:0 var(--jz-s3);font:500 13px/1.45 var(--jz-sans);color:var(--jz-muted);text-align:center;text-wrap:balance}
.safe::before{content:"";display:inline-block;width:11px;height:13px;margin-right:6px;vertical-align:-2px;background:var(--jz-forest);clip-path:polygon(50% 0,100% 18%,100% 55%,50% 100%,0 55%,0 18%)}
/* ---------- 23. Stage strip and day strip ---------- */
.daystrip{position:sticky;top:calc(var(--jz-topbar) + var(--jz-safe-t));z-index:9;display:flex;gap:var(--jz-s2);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 0 var(--jz-s4);padding:var(--jz-s2) var(--jz-gutter);background:var(--jz-paper);scrollbar-width:none}
.daystrip::-webkit-scrollbar{display:none}
.daystrip a{flex:none;scroll-snap-align:start;width:48px;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:var(--jz-r);background:var(--jz-card);border:0;box-shadow:var(--jz-shadow);color:var(--jz-ink);text-decoration:none;position:relative}
.daystrip a small{font:600 13px/1 var(--jz-sans);letter-spacing:0;color:var(--jz-muted)}
.daystrip a b{font:800 20px/1 var(--jz-sans)}
.daystrip a.today{background:var(--jz-ink);border-color:var(--jz-ink);color:var(--jz-on-ink)}
.daystrip a.today small{color:var(--jz-night-muted)}
.daystrip a.has::after{content:"";position:absolute;bottom:6px;width:6px;height:6px;border-radius:50%;background:var(--jz-forest)}
.daystrip a.today.has::after{background:var(--jz-hero-num)}
/* ---------- 24. Quote paper and the highlighter total (screen only; print pages never load this file) ---------- */
.card.paper{padding:var(--jz-s6)}
.line{display:flex;align-items:center;gap:var(--jz-s3);min-height:64px;padding:8px 0;border-bottom:1px solid var(--jz-line)}
.ld b{display:block;font:700 17px/1.3 var(--jz-sans)}
.ld small{font:500 15px/1.3 var(--jz-sans);color:var(--jz-muted)}
.ld{flex:1;min-width:0}
.lt{font:800 17px/1 var(--jz-sans);font-variant-numeric:tabular-nums}
.x{flex:none;width:48px;height:48px;min-height:48px;padding:0;border:1.5px solid var(--jz-field-line);border-radius:50%;background:var(--jz-card);color:var(--jz-ink);font:700 20px/1 var(--jz-sans);cursor:pointer}
.tot{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;font-size:15px;color:var(--jz-muted);font-variant-numeric:tabular-nums}
.tot.grand,.tot.big{margin-top:8px;padding-top:12px;border-top:2px solid var(--jz-ink);color:var(--jz-ink);font:800 17px/1.2 var(--jz-sans)}
.tot.grand span:last-child,.tot.big span:last-child{font:800 32px/1 var(--jz-sans);font-size:clamp(24px,8.5vw,32px);overflow-wrap:anywhere;text-align:right;min-width:0;letter-spacing:-.03em;font-variant-numeric:tabular-nums;background:none;padding:0}
.paper .qhead{display:flex;justify-content:space-between;align-items:center;gap:var(--jz-s3);padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--jz-line)}
.kv{display:flex;justify-content:space-between;gap:10px;margin:10px 0 0;padding-top:10px;border-top:1px solid var(--jz-line)}
.kv b{min-width:0;color:var(--jz-muted);font-weight:600;font-size:15px}
.or{margin:var(--jz-s2) 0;text-align:center;color:var(--jz-muted);font-size:15px}
table{width:100%;border-collapse:collapse;font-size:15px}
td,th{padding:10px 4px;border-bottom:1px solid var(--jz-line);text-align:left}
td button{min-width:48px;min-height:48px;border:1.5px solid var(--jz-field-line);background:var(--jz-card);border-radius:50%;color:var(--jz-ink);font:700 18px/1 var(--jz-sans)}
/* ---------- 25. Jobs board: stages stack vertically ---------- */
#board{display:block;overflow:visible;margin:0;padding:0}
.col{width:auto;max-width:none;margin:0 0 var(--jz-s6);padding:0;background:none;scroll-margin-top:calc(var(--jz-topbar) + var(--jz-safe-t) + 72px)}
.col h3{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 var(--jz-s2);padding:0;font:800 12px/1.2 var(--jz-sans);letter-spacing:var(--jz-eyebrow-track);text-transform:var(--jz-eyebrow-case);color:var(--jz-muted)}
.col h3 span{display:inline-flex;align-items:center;gap:8px}
.col h3 small{font:700 13px/1 var(--jz-sans);letter-spacing:0;color:var(--jz-ink)}
.col h3 i{width:8px;height:8px;border-radius:50%;background:var(--st,var(--jz-muted))}
.st-new{--st:var(--jz-info)}.st-contacted{--st:var(--jz-forest)}.st-quote_sent{--st:var(--jz-amber-dot)}.st-won{--st:var(--jz-ok)}.st-lost{--st:var(--jz-faint)}
.pc{display:block;margin:0 0 var(--jz-s2);padding:var(--jz-s4) var(--jz-gutter);background:var(--jz-card);border:0;box-shadow:var(--jz-shadow);border-radius:var(--jz-r-m);box-shadow:none;color:var(--jz-ink);text-decoration:none;position:relative;font-size:17px}
.group .pc{margin:0;border:0;border-radius:0}
.group .pc+.pc{border-top:1px solid var(--jz-line)}
.pc b{display:block;font:700 17px/1.3 var(--jz-sans)}
.pc span,.pc small{display:block;color:var(--jz-muted)}
.pc small{margin-top:4px;font-size:15px}
.who{display:flex;align-items:center;gap:8px;margin-top:6px;color:var(--jz-muted)}
.who.big{margin:0 0 10px;color:var(--jz-ink)}
.who.big>span:nth-child(2){flex:1;min-width:0}
.who.big>span a{color:inherit;text-decoration:none;font-weight:700}
.who.big small{display:block;color:var(--jz-muted);font:500 15px var(--jz-sans)}
.who.big .btn{margin:0}
.mv,.pc .mv{display:flex;align-items:center;gap:var(--jz-s2);margin-top:var(--jz-s3)}
.mv form,.pc .mv form{margin:0}
.mv .grow,.pc .mv .grow{flex:1}
.pc .mv button{min-width:48px;min-height:48px;padding:0;border:1.5px solid var(--jz-field-line);border-radius:50%;background:var(--jz-card);color:var(--jz-ink);font:700 18px/1 var(--jz-sans)}
/* ---------- 26. Older classes in the new look (until each screen moves over) ---------- */
.sums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--jz-s2);margin:var(--jz-s2) 0 var(--jz-s4)}
.sum{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px;background:var(--jz-card);border:0;box-shadow:var(--jz-shadow);border-radius:var(--jz-r-m);box-shadow:none}
.sum small{color:var(--jz-muted);font-size:13px;font-weight:700}
.sum b{font:800 20px/1.1 var(--jz-sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--jz-ink)}
.sum.late b{color:var(--jz-red)}
.trow{display:flex;align-items:center;gap:var(--jz-s3);min-height:var(--jz-row);margin:0;padding:12px 0;border-bottom:1px solid var(--jz-line)}
.trow:last-child{border-bottom:0}
.trow .tl{flex:1;min-width:0;font-size:15px}
.trow .tl b{display:block;font-size:17px;font-weight:700}
.trow .tl small{color:var(--jz-muted);font-size:15px}
.trow .btn{margin:0;min-width:84px}
.sentrow{padding:12px 0;border-bottom:1px solid var(--jz-line);font-size:15px}
.sentrow:last-child{border-bottom:0}
.sentrow small{display:block;color:var(--jz-muted)}
.sentrow .msg{max-width:100%;margin:6px 0}
details.allow .confirm{margin-top:8px;padding:var(--jz-s4);border:0;box-shadow:var(--jz-shadow);border-radius:var(--jz-r-m);background:var(--jz-card);font-size:15px}
.zero summary{color:var(--jz-forest);min-height:48px;display:inline-flex;align-items:center}
.faq{border-top:1px solid var(--jz-line);padding-top:var(--jz-s2);margin-top:var(--jz-s2)}
.clash{color:var(--jz-red);font-weight:800}
.clash::before{content:"\25B2\00a0";font-size:.75em}
.work h2{margin:var(--jz-s6) 0 var(--jz-s2);font-size:var(--jz-t-h2)}
.work li{padding:12px 0;border-bottom:1px solid var(--jz-line)}
.work .sub{font-size:15px;color:var(--jz-muted)}
.work details summary{min-height:48px;display:flex;align-items:center;font-weight:700;cursor:pointer}
.mailbox textarea,#mail-body{width:100%;font:inherit}
.jznum{font:800 22px/1.2 var(--jz-sans);letter-spacing:.02em}
code.dial{font:700 17px/1.3 var(--jz-sans);background:var(--jz-field);border-radius:var(--jz-r-s);padding:2px 8px;word-break:break-all}
.guide h3{font-size:18px;margin:var(--jz-s5) 0 6px}
.guide h4{font-size:17px;margin:var(--jz-s4) 0 4px}
.guide li{margin:6px 0}
.sheet td,.sheet th{border-bottom:1px solid var(--jz-line)}
.pwr{margin:var(--jz-s8) 0 var(--jz-s2);padding:0 var(--jz-gutter);text-align:center;font:500 13px/1.3 var(--jz-sans);letter-spacing:0;text-transform:none;color:var(--jz-faint)}
/* ---------- 27. Login (#app.plain) ---------- */
.login{min-height:100vh;min-height:100dvh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:calc(40px + var(--jz-safe-t)) 24px calc(40px + var(--jz-safe-b));background:var(--jz-paper);color:var(--jz-ink)}
.lhead{text-align:center;margin-bottom:28px}
.lmark{display:block;margin:0 auto;width:76px;height:76px;filter:drop-shadow(0 10px 22px rgba(48,109,85,.22))}
.lhead h1,.lword{margin:18px 0 6px;font:800 40px/1 var(--jz-sans);letter-spacing:-.04em;text-transform:none;color:var(--jz-ink)}
.lword span{color:var(--jz-forest)}
.lhead p{margin:0;color:var(--jz-muted);font-size:17px}
.lgroup{margin:0 0 var(--jz-s4);background:none;border-radius:0;overflow:visible;box-shadow:none}
.lgroup:focus-within{box-shadow:none}
.lgroup label{display:flex;flex-direction:column;gap:6px;margin:0 0 var(--jz-s4);padding:0;border:0}
.lgroup span{display:block;font:700 15px/1.3 var(--jz-sans);color:var(--jz-ink);text-transform:none;letter-spacing:0}
.lform .btn,.login .btn.lgo{display:flex;width:100%;margin:0;padding:0 24px;min-height:var(--jz-btn);background:var(--jz-grad);color:var(--jz-on-grad);font-weight:800;border-radius:var(--jz-r-full)}
.lform .errorlist{margin:0 0 12px}
.lfoot{margin-top:22px;text-align:center;color:var(--jz-muted);font-size:15px}
.lfoot a,.login .lfoot a{color:var(--jz-forest)}
/* ---------- 28. Utilities ---------- */
.muted{color:var(--jz-muted)}
.mono{font-family:var(--jz-sans);font-variant-numeric:tabular-nums}
.center{text-align:center}
.stack>*+*{margin-top:var(--jz-s3)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ---------- 29. Shared primitives (pass 3): one hand for every area ----------
Area kits (screens/*.css) style what is unique to an area. These are the parts every area shares, so
they look the same everywhere. Includes: core/_back.html, core/_lt.html, core/_new.html, core/_who.html.
Classes:
.jz-back back link: drawn 24px chevron + parent name, 44px tall
.jz-lt h1 .jz-sub large-title row: 34/800 title, optional 15 muted line, optional + on the right
.jz-new the one "new" control: 44px mint circle, forest + (aria-label "New quote" etc.)
.jz-sec sentence-case 13/600 section header above a group
.jz-group white grouped card; rows inside get hairlines inset 16px
.jz-row .k one row: name left (17/400), value right
.jz-sel native