/* BNZ client app, redesign v2 (claude/49, 20 Oct 2026), restyled to the Wave 1 design system (the founders' Wave 1 spec,
   section 1, approved Nov 5 2026): the one token sheet for the client workspace, onboarding and the team invite, and
   through them every module they load. Ink on Bone, Signal as the one accent; light follows the device, dark follows the
   device, and the dark-mode switch (Settings, the More screen) saves a choice on <html data-theme>.

   Wave 1 spec 1.3, approved Nov 5 2026: hairlines, not cards. Content is type on Bone divided by hairlines; no boxed
   panels, tints or gradients. The approval brief is the ONE elevated surface (white, 16 px corners on the desktop and 20 on
   the phone, the spec's shadow); the only other rounded things are pills (command bars, buttons, count badges), the active
   rail item (10 px), Kyle's image tiles (14 px) and round avatars and dots. Section titles are the display serif.

   Departures from the spec's mocks, on purpose (each says why):
     - ink, not white, on a Signal fill: white on #FF5C1A is 3.1:1 and fails for button text; ink is 5.9:1.
     - text in the spec's lighter colours uses a darker step of the same hue (Signal text #B73700, muted text #716A61, ok
       text #52724C, warn text #8F6114, the rail's group labels at .48): the spec values are 2.7 to 4.2:1 as small text on
       Bone, and the app's text was 4.5:1 before Wave 1 (the phone deck's Signal text was #C4470C). The canonical values
       stay on fills, dots, rules and the rail (--accent, --ok, --warn). Held for the founders' call (D1 review, Nov 6
       2026); the spec values are a token switch here (--accent-readable, --muted, --checked, --waiting, --rail-dim).
     - nothing under 12 px (the spec's 11 px labels are 12), and Inter 600 where the spec says 700 (no 700 file ships).

   The names the existing screens and modules read (--navy, --card, --soft, --done-*, --font-head...) are kept and
   pointed at the new tokens, so they are restyled by the tokens alone. The operator app keeps its own theme.css.

   Fonts are served from fonts/ (SIL Open Font License 1.1; see fonts/OFL-*.txt), so the pages make no third-party
   request and work under their own Content-Security-Policy (font-src 'self'). Instrument Serif (400 only, never bold)
   for display titles; Inter for everything else (400, 500 and 600), figures in tabular lining numerals. */

/* ---------------------------------------------------------------- fonts
   Inter, latin subset: 400, 500 and 600 upright, 400 italic (quotes). Nothing heavier is shipped or used.
   Instrument Serif, latin subset: 400 upright and italic. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/inter-latin-400-italic.woff2") format("woff2"); }
/* Instrument Serif, the display serif (Wave 1 spec 1.2, approved Nov 5 2026): weight 400 only, upright and italic. */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); }

/* ---------------------------------------------------------------- tokens (Wave 1 spec 1.1, approved Nov 5 2026)
   Light is the default. Dark follows the device (prefers-color-scheme) unless <html data-theme> says otherwise; the dark
   values are the house's dark tokens (the spec draws light only). The rail is BNZ black in both. */
:root {
  --ground: #F5F1EA;        /* Bone: the page, every content area (spec --bone) */
  --surface: #FFFFFF;       /* the white card surface: the approval brief only (and overlays: menus, sheets) */
  --hairline: rgba(23, 21, 18, .12);        /* spec --hair: row dividers, label underlines */
  --hairline-strong: rgba(23, 21, 18, .24); /* spec --hair-strong: an outlined button's edge (Do not approve) */
  --field: #ECE6DC;         /* spec --field: monogram tiles */
  --cmd-fill: #ECE6DC;      /* the command bar's fill (a light pill in both themes, dark text: the owner's white-box rule's intent) */
  --ink: #171512;           /* text, the solid rule (spec --ink) */
  --muted: #716A61;         /* supporting text: spec --muted #7A736A one step darker, 4.7:1 on Bone (see the header) */
  --accent: #FF5C1A;        /* Signal: fills, dots and markers (the main button, the lit rail item, counts). Never small text. */
  --on-accent: #171512;     /* the label on a Signal fill: ink, not the mock's white (5.9:1 against 3.1:1) */
  --accent-hover: #F0520F;  /* the primary button, hovered */
  --accent-pressed: #E2480B;/* the primary button, pressed */
  --accent-readable: #B73700; /* Signal as text, links, markers, focus and progress: 5.2:1 on Bone, 5.9:1 on white */
  --accent-on-bar: #FF8752; /* the same on an Ink bar or dark header, in both themes */
  --focus: var(--accent-readable);
  --control-border: #827B70;/* the edge of a field or control (3:1 against the ground) */
  --surface-hover: #EAE6DE; /* a hovered row; also a disabled control's fill */
  --checked: #52724C;       /* spec --ok as text (Connected, Insured, Ready): one step darker, 4.8:1 on Bone */
  --waiting: #8F6114;       /* spec --warn as text (expiring): one step darker, 4.8:1 on Bone */
  --ok: #5A7C54;            /* spec --ok: the dot before an OK tag, the ready status dot */
  --warn: #A9741A;          /* spec --warn: the dot before an expiring tag */
  --conflict: #B0362A;      /* an error sentence (not a tag: tags are the four colours of spec 1.5) */
  --rail: #141210;          /* spec --rail: the desktop's left rail, BNZ black in both themes */
  --rail-text: rgba(245, 241, 234, .66);   /* spec --rail-text: the rail's items */
  --rail-dim: rgba(245, 241, 234, .48);    /* the rail's group labels: spec .38 is 3.3:1 as 12 px text on the rail, .48 the lightest at 4.5:1 (the user line is the spec's .5) */
  --brief-shadow: 0 1px 0 rgba(23, 21, 18, .04), 0 14px 30px -20px rgba(46, 34, 22, .34), 0 2px 6px -2px rgba(46, 34, 22, .08);   /* spec 1.3: the brief's, the one shadow */
  --bar: #0A0A0A;           /* the app bar and dark headers */
  --bar-text: #F2EFE9;
  --bar-muted: #B9B3A9;
  --face-sara: #DCD4E5; --face-taylor: #E7D8BF; --face-emma: #D5DFCF;
  --on-face: #0A0A0A;       /* agent glyphs are Ink on a pale backplate */
  /* The phone deck (the founders' "BNZ, The client platform", 5 Nov 2026; section "Phone deck" below) on the Wave 1 tokens:
     the phone's paper is Bone too (Wave 1 spec 1.1), the row rule is the spec hairline, a decorative grey (spec --soft:
     chevrons and placeholders only, never text), the readable orange as text, and the five desks' colours (spec 1.1). */
  --paper: #F5F1EA;         /* the phone's page (Bone, as the desktop's) */
  --hairline-soft: var(--hairline); /* row dividers on the paper: the spec hairline */
  --faint: #A49C91;         /* spec --soft: decorative glyphs only (chevrons), never text */
  --accent-text: var(--accent-readable);   /* Signal as text on the paper: 5.2:1 on Bone, 5.9:1 on the white brief */
  --agent-sara: #A596D3; --agent-taylor: #C4922C; --agent-emma: #8DA787; --agent-kyle: #C0694B; --agent-daniel: #9A8A7A;
  --on-agent: #FFFFFF;      /* the letter on a desk's colour (the avatars are decorative: the name is beside them) */
  --scrim: rgba(10, 10, 10, .72);
  --font-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;   /* Wave 1 spec 1.2: weight 400 only */

  /* Type (spec section 2) */
  --font-ui: "Inter", system-ui, sans-serif;
  --font-display: var(--font-serif);   /* display titles are the serif (Wave 1 spec 1.2), always weight 400 */
  --font-mono: var(--font-ui);   /* the name stays; figures are Inter with tabular lining numerals (--figures-numeric) */
  --fs-title: 24px;         /* a screen title, 24/32 desktop (22/30 on the phone, below); 600, -0.02em */
  --fs-section: 22px;       /* the older screens' section headings: the serif at 22/26 (20 on the phone); 400 (Wave 1 spec 1.2: serif sections; 28 where a screen is rebuilt) */
  --fs-body: 16px;          /* body, chat and legal text, 16/26, 400 */
  --fs-secondary: 13px;
  --fs-small: 12px;         /* nothing smaller */
  --fs-total: 22px;         /* the total on the desktop job line (38 on the phone header) */
  --fs-amount: 15px;        /* a line's amount (16 on the phone) */
  --fs-count: 13px;         /* counts in mono */
  --fs-quote: 16px;         /* quoted source text, Inter italic 400, 16/26, with a quiet rule */
  --fs-mark: 12px;          /* the SAMPLE DATA mark and the byline, letter-spaced: 12 px, the house floor for any text (Wave 1 decision 1; review fix, Nov 6 2026: it was 10) */
  /* Wave 1 spec 1.2 (desktop sizes; the house floor of 12 px holds, so the spec's 11 px label is 12) */
  --fs-headline: 58px;      /* a page headline, serif 58/1, -0.012em */
  --fs-agent: 50px;         /* an agent's name in its head, serif 50/1 */
  --fs-sec: 28px;           /* a section title, serif 28/1.05 over a 1 px ink rule */
  --fs-hero: 40px;          /* a hero figure (totals, stats, facts), serif 40 to 64 */
  --fs-label: 12px;         /* a label: sans 600, uppercase, .14em, muted, a hair rule under it */
  --track-label: .14em;
  --fs-row: 15px;           /* a row's title, sans 600 */
  --fs-support: 13.5px;     /* a row's supporting line, muted */
  --lh-body: 1.625;         /* 26/16 */
  --lh-display: 1.3333;     /* the title role, 32/24 */
  --lh-title: 1.3333;
  --lh-section: 1.1818;     /* 26/22 */
  --lh-card: 1.5;           /* 24/16 (card heading 16/24, 500, -0.01em) */
  --lh-ui: 1.4286;          /* 20/14: buttons and tabs */
  --lh-meta: 1.5385;        /* 20/13: metadata */

  /* Shape (Wave 1 spec 1.3, approved Nov 5 2026): square everywhere but these */
  --radius: 0;
  --r-pill: 999px;          /* command bars, search, buttons, count badges */
  --r-brief: 16px;          /* the approval brief on the desktop (20 px on the phone, below) */
  --r-nav: 10px;            /* the lit rail item */
  --r-tile: 14px;           /* Kyle's image tiles */
  --control: 44px;          /* every control at least this; rows are 44 px */
  --bar-h: 48px;            /* the app bar */
  --rail-w: 232px;          /* the desktop job rail */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;

  /* Motion (kept from drop 1): confirms an action, shows progress, or shows where something went */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --motion-press: 120ms;
  --motion-move: 300ms;
  --motion-pop: 450ms;
  --motion-row: 500ms;
  --motion-card: 500ms;
  --motion-rise: 550ms;
  --motion-meter: 1.1s;
  --motion-draw: 1.1s;
  --motion-undo: 10s;

  /* The names the existing screens and modules read, pointed at the tokens above (restyled by the tokens alone) */
  --card: var(--surface); --soft: var(--ground); --line-2: var(--hairline); --line: var(--hairline); --line-strong: var(--ink);
  --ink-2: #47423B; --muted-2: var(--muted);   /* spec --ink-2: secondary text, notes, figures */
  --surface-2: var(--ground);
  --ember: var(--accent); --ember-hover: var(--accent-hover); --on-ember: var(--on-accent);
  /* Legacy navy: now the readable orange, with its own label colour and selection tint. Solid navy fills pair --navy with --on-navy. */
  --navy: var(--accent-readable); --on-navy: #FFFFFF; --navy-soft: #FCE4DA; --accent-soft: transparent;
  --sara: var(--face-sara); --taylor: var(--face-taylor); --emma: var(--face-emma);
  --sara-face: var(--face-sara); --taylor-face: var(--face-taylor); --emma-face: var(--face-emma);
  --sara-bubble: var(--surface); --taylor-bubble: var(--surface); --emma-bubble: var(--surface);
  --done-bg: var(--surface); --done-ink: var(--checked); --done-line: var(--checked);
  --waiting-bg: var(--surface); --waiting-ink: var(--waiting); --waiting-line: var(--waiting);
  --conflict-bg: var(--surface); --conflict-line: var(--conflict);
  --tile-drawings: var(--surface); --tile-estimate: var(--surface); --tile-money: var(--surface);
  --tile-permit: var(--surface); --tile-punch: var(--surface); --tile-papers: var(--surface);
  --font-head: var(--font-display); --font-figures: var(--font-mono); --figures-numeric: tabular-nums lining-nums;
  --sans: var(--font-ui); --serif: var(--font-display); --mono: var(--font-mono);
  --lh-head: var(--lh-display); --track-head: -0.02em;
  --fs-page: var(--fs-title); --fs-card: 16px; --fs-eyebrow: 12px; --track-eyebrow: .16em;   /* eyebrow: sans 600 12 px uppercase .16em (spec 1.2) */
  --fs-btn: 14px; --track-btn: 0; --track-lockup: 0;
  --fs-figure: var(--fs-total); --fs-figure-lg: 38px;
  --control-main: 44px; --control-camera: 44px;
  --radius-card: 0; --radius-btn: 0; --radius-input: 0; --radius-chip: 0; --radius-mark: 0;   /* --radius-btn stays 0: onboarding and the invite page round boxes with it; buttons get --r-pill by class */
  color-scheme: light;
}
@media (max-width: 860px) {
  :root { --fs-title: 22px; --lh-title: 1.3636; --lh-display: 1.3636; --fs-body: 16px; --fs-total: 38px; --fs-amount: 16px; --r-brief: 20px; --fs-section: 20px; --lh-section: 1.25; }   /* title 22/30; the brief's corners 20 on the phone */
}
@media (min-width: 861px) { :root { --fs-amount: 15.5px; } }   /* amounts 15.5 on the desktop (spec 1.2) */
/* The serif ships at 400 only: a rule that asks a heavier weight of it gets the 400 face, never a drawn-on bold (spec 1.2) */
:root { font-synthesis-weight: none; }
/* Dark: the device's choice, unless the saved switch says light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0A0A0A; --surface: #171614; --hairline: #36332E; --ink: #F2EFE9; --muted: #B9B3A9;
    --accent: #FF5C1A; --on-accent: #171512; --accent-hover: #F0520F; --accent-pressed: #E2480B;
    --accent-readable: #FF8752; --focus: #FF8752; --control-border: #8F887D; --surface-hover: #24211D;
    --on-navy: #0A0A0A; --navy-soft: #35231C;
    --checked: #6CC08F; --waiting: #D9A441; --conflict: #E07A6E; --ok: #6CC08F; --warn: #D9A441;
    --bar: #0A0A0A; --bar-text: #F2EFE9; --bar-muted: #B9B3A9;
    --paper: #0A0A0A; --faint: #6F6A62; --accent-text: #FF8752;
    --hairline-strong: rgba(242, 239, 233, .28); --field: #24211D; --ink-2: #D6D0C6;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0A0A0A; --surface: #171614; --hairline: #36332E; --ink: #F2EFE9; --muted: #B9B3A9;
  --accent: #FF5C1A; --on-accent: #171512; --accent-hover: #F0520F; --accent-pressed: #E2480B;
  --accent-readable: #FF8752; --focus: #FF8752; --control-border: #8F887D; --surface-hover: #24211D;
  --on-navy: #0A0A0A; --navy-soft: #35231C;
  --checked: #6CC08F; --waiting: #D9A441; --conflict: #E07A6E; --ok: #6CC08F; --warn: #D9A441;
  --bar: #0A0A0A; --bar-text: #F2EFE9; --bar-muted: #B9B3A9;
  --paper: #0A0A0A; --faint: #6F6A62; --accent-text: #FF8752;
  --hairline-strong: rgba(242, 239, 233, .28); --field: #24211D; --ink-2: #D6D0C6;
  color-scheme: dark;
}

/* The phone's Ink bar (on the older screens) and the desktop's black rail are dark in both themes, so the readable orange
   there is the light one. Custom properties that alias another resolve where they are declared, so the legacy navy names
   are re-pointed here too. (The dark header and its strips stand on the paper since Wave 1: they keep the page's.) */
.v2-bar, .d-rail { --accent-readable: var(--accent-on-bar); --focus: var(--accent-on-bar); --navy: var(--accent-on-bar); }

/* ---------------------------------------------------------------- base
   Zero-specificity (:where) so every page's own rules still win; these are floors, not overrides. */
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(body) { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-ui);
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; }
:where(button, input, select, textarea) { font-family: inherit; }
:where(code, kbd, samp, .figures, .mono) { font-family: var(--font-mono); font-variant-numeric: var(--figures-numeric); }
:where(h1, h2, h3, .display) { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-display); letter-spacing: -0.01em; }
:where(h1) { font-size: var(--fs-title); line-height: var(--lh-title); }
:where(h2) { font-size: var(--fs-section); line-height: var(--lh-section); letter-spacing: -0.005em; }
/* A card's or a row's heading stays the sans (the serif is for titles and sections, Wave 1 spec 1.2) */
:where(h3) { font-family: var(--font-ui); font-size: var(--fs-card); line-height: var(--lh-card); font-weight: 500; letter-spacing: -0.01em; }
:where(strong, b) { font-weight: 500; }
:where(a) { color: var(--ink); }
::selection { background: var(--accent); color: var(--on-accent); }

/* Every control at least 44 px. Checkboxes and radios sit inside 44 px labels instead. */
:where(button, select, summary, .btn, a.btn,
  input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"], [type="color"])) {
  min-height: var(--control);
}
:where(input[type="checkbox"], input[type="radio"]) { width: 20px; height: 20px; accent-color: var(--accent-readable); }
:where(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Corners (Wave 1 spec 1.3, approved Nov 5 2026). Square everywhere, and this outranks each screen's own radius on
   purpose, except: pills (command bars and their boxes, buttons, count badges: --r-pill), the approval brief (--r-brief:
   16 px desktop, 20 phone), the rail's items (--r-nav: 10 px, seen when lit or hovered), Kyle's image tiles (--r-tile:
   14 px), and round avatars and dots. look-check and phone-deck-check hold the same lists (keep them in step). */
.app *:not(.avatar, .face, img.face, .kyle-face, .ag-face, .desk-avatar, .jf-who, .sidebar-team b, .desk-task-dot, .m-dots > span, .m-spin, .tick, [class*="avatar"], .d-mark-dot, .d-pips > i, .cd-face, .cd-img, .cd-dots > span,
  .pd-brief, .pd-btn, .pd-pill, .pd-badge, .btn-primary, .btn-ink, .btn:not(.link), [data-send], .ky-plus, .pd-tell-row input, .ag-row-in input, .ky-row-in input,
  .talk-to input, .talk-to .icon.primary, .d-count, .d-cmd, .d-cmd input, .d-cmd button, .d-btn, .d-nav, .d-tile, .ky-tile),
.gate *, .room *, .link-page *, .frame * { border-radius: 0 !important; }
.avatar, .face, img.face, .kyle-face, .ag-face, .desk-avatar, .jf-who, .desk-task-dot, .m-dots > span, .m-spin, .d-mark-dot, .d-pips > i { border-radius: 50%; }   /* round avatars and dots (Emma's bid pips are dots) */
.pd-btn, .pd-pill, .pd-badge, .btn-primary, .btn-ink, [data-send], .ky-plus, .pd-tell-row input, .ag-row-in input, .ky-row-in input,
  .talk-to input, .talk-to .icon.primary, .d-count, .d-cmd, .d-cmd input, .d-cmd button, .d-btn { border-radius: var(--r-pill); }
.btn:not(.link) { border-radius: var(--r-pill) !important; }
.pd-brief { border-radius: var(--r-brief); }
.d-nav { border-radius: var(--r-nav); }
.d-tile, .ky-tile { border-radius: var(--r-tile); }
/* Sentence case everywhere but eyebrows and labels (Wave 1 spec 1.2, approved Nov 5 2026: uppercase with the spec's
   tracking; Signal eyebrows above page headlines only, muted labels over a hair rule) and the SAMPLE DATA mark. */
.app :not(.sample-mark, .byline, .pd-label h2, .d-eyebrow, .d-label, .d-label h2, .d-group, .d-th),
.gate :not(.sample-mark, .byline), .room :not(.sample-mark) { text-transform: none !important; }
.app :not(.sample-mark, .mono, code, h1, h2, h3, .company, .byline, .brand, .pd-label h2, .d-eyebrow, .d-label, .d-label h2, .d-group, .d-th, .d-wordmark, .pd-mark),
.gate :not(.sample-mark, h1, .byline) { letter-spacing: 0 !important; }
/* No shadows but the brief's (Wave 1 spec 1.3: the one elevated surface), no gradients, no glow */
.app *:not(.pd-brief), .gate *, .room * { box-shadow: none !important; }
.app *, .gate *, .room * { text-shadow: none !important; background-image: none !important; }
.pd-brief { box-shadow: var(--brief-shadow); }

/* Text boxes: white with dark text in both themes, so typing is always easy to read (owner's request, 20 Oct 2026). */
input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"], [type="color"], [type="submit"], [type="button"]),
textarea, select {
  background-color: #FFFFFF !important; color: #0A0A0A !important; caret-color: #0A0A0A;
  border-color: var(--control-border); color-scheme: light;
}
input::placeholder, textarea::placeholder { color: #6B665E !important; opacity: 1; }
select option { background: #FFFFFF; color: #0A0A0A; }
/* Disabled: an explicit neutral fill and text (the boxes are always light), never a faded colour */
input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"], [type="color"], [type="submit"], [type="button"]):disabled,
textarea:disabled, select:disabled {
  background-color: #EAE6DE !important; color: #625E57 !important; -webkit-text-fill-color: #625E57; border-color: #DCD7CE; opacity: 1; cursor: not-allowed;
}
/* The command bars (Wave 1 spec 1.3 and 1.6, approved Nov 5 2026): a pill in --field (#ECE6DC) with no edge, in both
   themes, with ink text. Still a light box with dark text, the owner's 20 Oct rule's intent; the placeholder keeps the
   readable grey (spec --soft is 2.2:1 on the field). */
:is(.pd-tell-row, .ag-row-in, .ky-row-in, .d-cmd, .talk-to) input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"]) {
  background-color: var(--cmd-fill) !important; color: #171512 !important; caret-color: #171512; border: 0 !important; color-scheme: light;
}
:is(.pd-tell-row, .ag-row-in, .ky-row-in, .d-cmd, .talk-to) input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"]):disabled {
  background-color: #E4DED4 !important; color: #625E57 !important; -webkit-text-fill-color: #625E57;
}
:where(button, .btn, .btn-primary, .btn-ink, .btn-plain):disabled, :where(.btn, .btn-primary, .btn-ink, .btn-plain)[aria-disabled="true"] {
  background: var(--surface-hover); color: var(--muted); border-color: var(--hairline); opacity: 1; cursor: not-allowed;
}

/* ---------------------------------------------------------------- the motif (spec section 3)
   The ruler rule: a 1 px line in --ink with five graduation ticks at the left end (tall, short, short, short, tall).
   One SVG (ctx.rulerRule in the shell draws it; screen modules never draw their own). Under every section heading and
   closing every ledger. On a dark header it uses --bar-muted for the line and --accent for the filled part when it
   doubles as a meter (.ruler-rule.on-dark, --meter 0 to 1). Row dividers are plain 1 px --hairline. */
.ruler-rule { display: block; position: relative; width: 100%; height: 8px; box-sizing: border-box; color: var(--ink); border-bottom: 1px solid currentColor; }
/* Wave 1 spec 1.3 (approved Nov 5 2026): a section opens with its serif title over a plain 1 px ink rule, so the five
   graduation ticks at the left end are no longer drawn (the rule, its meter and a meter's own ticks stay). */
.ruler-rule svg { display: none; }
.ruler-rule .tick { position: absolute; bottom: 0; width: 1px; height: 4px; background: currentColor; }
.ruler-rule .meter { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--accent-readable); }
.ruler-rule.closes { transform: scaleY(-1); }
.ruler-rule.on-dark { color: var(--bar-muted); }
.hairline { height: 1px; background: var(--hairline); border: 0; margin: 0; }
/* The open or active item: a 2 px left rule in ink (a desktop ledger) or accent (the job rail) */
.open-row { border-left: 2px solid var(--ink); background: transparent; }   /* no white panel (Wave 1 spec 1.3) */
.active-job { border-left: 2px solid var(--accent-readable); background: var(--navy-soft); }

/* ---------------------------------------------------------------- state tags (Wave 1 spec 1.5, approved Nov 5 2026)
   A tag is a word, never a pill or a badge: sans 600 13 px after a 6 px dot in its colour. Four colours: Signal (needs
   him or work ready for review, flagged, Unknown: the readable orange as text, the Signal dot), OK (done or healthy),
   Muted (waiting on someone else, filed, reported) and Warn (expiring). An Unknown is said in Signal with its reason,
   never left blank or shown as zero. An error sentence is not a tag and keeps --conflict. */
.state { font-family: var(--font-ui); font-size: var(--fs-secondary); font-weight: 600; }
.state::before, .sc-jobs .job-state.needs::before, .sc-more .sc-row.plain .end.needs::before, .sc-monday .bid .needs::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 2px; }
.state-checked { color: var(--checked); }
.state-checked::before { background: var(--ok); }
.state-reported { color: var(--muted); }
.state-waiting { color: var(--muted); }
.state-warn { color: var(--waiting); }
.state-warn::before { background: var(--warn); }
.state-unknown, .state-conflict, .state-needs { color: var(--accent-readable); }
.state-unknown::before, .state-conflict::before, .state-needs::before, .sc-jobs .job-state.needs::before, .sc-more .sc-row.plain .end.needs::before, .sc-monday .bid .needs::before { background: var(--accent); }
.state-working { color: var(--muted); }
.sample-mark { font-family: var(--font-mono); font-size: var(--fs-mark); font-weight: 500; letter-spacing: .08em; color: var(--bar-muted); text-transform: uppercase; }
/* Type roles the screens share */
.display { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-display); letter-spacing: -0.01em; }
.mono { font-family: var(--font-mono); font-variant-numeric: var(--figures-numeric); }
.quote { font-family: var(--font-ui); font-style: italic; font-weight: 400; font-size: var(--fs-quote); line-height: 1.625; padding-left: 12px; border-left: 2px solid var(--hairline); }
.secondary { font-size: var(--fs-secondary); color: var(--muted); }
/* The primary button: the one accent fill (the second permitted use when the Needs you strip is on screen too). A pill
   with an ink label (Wave 1 spec 1.3; ink, not white, on the Signal fill: see the header). */
.btn-primary { background: var(--accent); color: var(--on-accent); border: 0; min-height: var(--control); padding: 0 20px;
  font: 600 14px/20px var(--font-ui); cursor: pointer; }
.btn-primary:not(:disabled, [aria-disabled="true"]):hover { background: var(--accent-hover); }
.btn-primary:not(:disabled, [aria-disabled="true"]):active { background: var(--accent-pressed); }
.btn-ink { background: var(--ink); color: var(--ground); border: 0; min-height: var(--control); padding: 0 20px; font: 600 14px/20px var(--font-ui); cursor: pointer; }
.btn-plain { background: none; color: var(--ink); border: 0; min-height: var(--control); padding: 0; font: 500 14px/20px var(--font-ui); cursor: pointer; }
/* Avatars: initials in a coloured circle (the felt faces replace them later without a layout change) */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  color: var(--on-face); font: 500 12px/1 var(--font-ui); flex-shrink: 0; }
.avatar.sm { width: 22px; height: 22px; font-size: 10px; }
.avatar-sara { background: var(--face-sara); } .avatar-taylor { background: var(--face-taylor); } .avatar-emma { background: var(--face-emma); }

/* ---------------------------------------------------------------- motion
   CSS only. Every class answers one question: did it work, how far along is it, or where did it go. */
@keyframes bnz-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bnz-slideup { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes bnz-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bnz-pop { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
@keyframes bnz-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes bnz-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bnz-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes bnz-spin { to { transform: rotate(360deg); } }
@keyframes bnz-draw { from { stroke-dashoffset: var(--draw-length, 400); } to { stroke-dashoffset: 0; } }
@keyframes bnz-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Message arrives: rises 14 px and fades in (stagger with --delay, 0.1-0.3 s) */
.m-rise { animation: bnz-rise var(--motion-rise) var(--ease-out) var(--delay, 0s) both; }
/* Tiles and rows: a page opens, children rise in 50 ms apart */
.m-stagger > * { animation: bnz-rise var(--motion-row) var(--ease-out) both; }
.m-stagger > :nth-child(2) { animation-delay: 50ms; }
.m-stagger > :nth-child(3) { animation-delay: 100ms; }
.m-stagger > :nth-child(4) { animation-delay: 150ms; }
.m-stagger > :nth-child(5) { animation-delay: 200ms; }
.m-stagger > :nth-child(6) { animation-delay: 250ms; }
.m-stagger > :nth-child(7) { animation-delay: 300ms; }
.m-stagger > :nth-child(n+8) { animation-delay: 350ms; }
/* Pinned card: slides up from the reply box */
.m-slideup { animation: bnz-slideup var(--motion-card) var(--ease-out) var(--delay, 0s) both; }
/* Sent, Confirmed, Connect: the check mark pops 0.4 -> 1.15 -> 1 */
.m-pop { animation: bnz-pop var(--motion-pop) var(--ease-out) var(--delay, 0s) both; }
/* The undo bar drains over 10 s */
.m-drain { transform-origin: left center; animation: bnz-drain var(--motion-undo) linear forwards; }
/* Meter: the bar fills from the left */
.m-fill { transform-origin: left center; animation: bnz-fill var(--motion-meter) var(--ease-out) var(--delay, .2s) both; }
/* Working: typing dots, 1.2 s loop (three <span>s inside) */
.m-dots { display: inline-flex; gap: 5px; align-items: center; }
.m-dots > span { width: 7px; height: 7px; border-radius: 50%; background: var(--checked); animation: bnz-dot 1.2s infinite; }
.m-dots > span:nth-child(2) { animation-delay: .15s; }
.m-dots > span:nth-child(3) { animation-delay: .3s; }
/* Connect: a spinner while a connection is under way (the only other loop allowed) */
.m-spin { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--navy); animation: bnz-spin .8s linear infinite; }
/* Confirmed: a progress bar slides while the desk acts on the answer */
.m-sweep { position: relative; overflow: hidden; }
.m-sweep::after { content: ""; position: absolute; inset: 0; background: var(--checked); opacity: .35; animation: bnz-sweep 1.4s ease-in-out infinite; }
/* Note highlight: a navy outline draws itself around the number that was read (SVG stroke) */
.m-draw { stroke-dasharray: var(--draw-length, 400); animation: bnz-draw var(--motion-draw) var(--ease-out) .5s both; }
/* Action moves: the chip cross-fades, the row slides to its new group */
.m-xfade { transition: background-color var(--motion-move) ease, color var(--motion-move) ease, border-color var(--motion-move) ease; }
.m-move { transition: transform var(--motion-move) var(--ease-out); }
/* Press: any button scales to 0.97 */
:where(button, .btn, [role="button"]) { transition: transform var(--motion-press) ease; }
:where(button, .btn, [role="button"]):not(:disabled, [aria-disabled="true"]):active { transform: scale(.97); }
/* Shown only with motion, or only without it (the undo countdown becomes "Undo, 10 s" in text) */
.m-reduced-only { display: none !important; }

/* Reduced motion: nothing moves. Things fade in place; loops stop on their still frame. */
@media (prefers-reduced-motion: reduce) {
  .m-rise, .m-stagger > *, .m-slideup, .m-pop { animation-name: bnz-fade; animation-duration: 200ms; }
  .m-drain, .m-fill, .m-draw, .m-dots > span, .m-spin, .m-sweep::after { animation: none; }
  .m-dots > span { opacity: .6; }
  .m-xfade, .m-move, :where(button, .btn, [role="button"]) { transition: none; }
  :where(button, .btn, [role="button"]):active { transform: none; }
  .m-motion-only { display: none !important; }
  .m-reduced-only { display: revert !important; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- desktop width (Jose, 8 Oct)
   On desktop the screens fill the window instead of a 1,120 px column centred in it. Above the phone
   breakpoint only (861 px and up), so the phone layout is untouched. The :root prefix outranks the
   page's own single-class caps in index.html (.content 1120, .thread 780, Usage 720, More and
   Actions 640, the bid room 860). The side padding matches the top bar so content lines up with the
   logo. Readability stays guarded: chat bubbles and the intro line under each page title keep a
   reading width. Classes used only by index.html; onboard and team-invite don't use them. */
@media (min-width: 861px) {
  :root .frame-bar,
  :root .content,
  :root .room { padding-left: clamp(24px, 2.5vw, 48px); padding-right: clamp(24px, 2.5vw, 48px); }
  :root .content,
  :root .room,
  :root .thread,
  :root .more-list, :root .more-also, :root .more-foot,
  :root .usage-hero, :root .usage-units, :root .usage-observations, :root .usage-help,
  :root #usage-terms, :root .usage-details,
  :root .actions-time { max-width: none; }
  :root .more-list { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  :root .msg:not(.mine) .msg-body { max-width: min(82%, 880px); }
  :root .msg.mine .msg-body { max-width: min(70%, 720px); }
  :root .content p.sub { max-width: 90ch; }
}

/* ---------------------------------------------------------------- the screens (spec section 5; folded in by the integration session)
   The twelve screen modules under screens/ draw into #view with these classes. The shell's frame (the app bar, the
   job rail, the bottom bar, the dark header, the Needs you strip and the talk-to line) is styled in index.html; the
   shared row, section and form rules the screens share live here, once, so no module carries a <style> of its own.
   sc-*: Jobs, Sara, the Monday report, More, Usage and Start a job. est-v2 and ans-v2: the estimate ledger and the
   answer screen. v2b-*: Subs and bids, Papers, Bid requirements and Approvals. */

/* The shared section heading, rows, links, fields and the footer row */
.sc-screen { padding: 18px 20px 24px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
@media (min-width: 861px) { .sc-screen { padding: 20px 24px 24px; } }   /* the same desktop inset as the job screens (.v2b, .est-v2) */
.sc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 20px 0 6px; }
.sc-head:first-child { padding-top: 0; }
.sc-head h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-section); line-height: var(--lh-section); letter-spacing: -0.015em; margin: 0; }
.sc-head .secondary { font-size: var(--fs-secondary); color: var(--muted); }
.sc-rows { list-style: none; margin: 0; padding: 0; }
.sc-row { display: flex; flex-direction: column; gap: 5px; padding: 14px 0 12px; border-bottom: 1px solid var(--hairline); color: var(--ink); text-decoration: none; min-height: var(--control); box-sizing: border-box; }
.sc-rows > li:last-child > .sc-row, .sc-row.last { border-bottom: 0; }
a.sc-row:hover .name, a.sc-row:focus-visible .name { color: var(--accent-readable); }
.sc-row .top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.sc-row .name { font-size: 16px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.sc-row .amt { font-family: var(--font-mono); font-variant-numeric: var(--figures-numeric); font-size: var(--fs-amount); white-space: nowrap; }
.sc-row .amt.unknown { color: var(--accent-text); font-weight: 600; }   /* a withheld total: Unknown, in Signal (Wave 1 spec 1.5) */
.sc-row .line { font-size: var(--fs-secondary); color: var(--muted); }
.sc-row .state { font-size: 14px; }
.sc-row.plain { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; }
.sc-row.plain .name { font-weight: 400; flex: 1 1 auto; }
.sc-row.plain .end { font-size: var(--fs-secondary); color: var(--muted); text-align: right; flex: 0 1 auto; max-width: 62%; }
.sc-row.plain .end .mono { font-family: var(--font-mono); }
.sc-link { color: var(--accent-readable); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; min-height: var(--control); display: inline-flex; align-items: center; gap: 10px; }
.sc-link.plain { color: var(--ink); text-decoration: none; }
.sc-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.sc-p { margin: 0; }
.sc-muted { color: var(--muted); }
.sc-small { font-size: var(--fs-secondary); }
.sc-mono { font-family: var(--font-mono); font-variant-numeric: var(--figures-numeric); }
.sc-foot { margin-top: 22px; padding-top: 10px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sc-error { color: var(--conflict); margin: 12px 0 0; }
.sc-btn-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.sc-loading { color: var(--muted); margin: 14px 0; }
.sc-field { display: flex; flex-direction: column; gap: 8px; }
.sc-field label { font-size: var(--fs-secondary); color: var(--muted); }
.sc-field input[type="text"], .sc-field select, .sc-field textarea { height: var(--control); border: 0 !important; border-bottom: 1px solid var(--ink) !important; background: none !important; padding: 0; font-family: var(--font-ui); font-size: 16px; color: var(--ink) !important; width: 100%; box-sizing: border-box; }
.sc-field textarea { height: auto; min-height: var(--control); padding: 10px 0; resize: vertical; }
.sc-avatars { display: inline-flex; }
.sc-avatars .avatar { width: 28px; height: 28px; font-size: 11px; border: 2px solid var(--ground); box-sizing: content-box; }
.sc-avatars .avatar + .avatar { margin-left: -8px; }

/* Jobs */
.sc-jobs .job-state.needs { color: var(--accent-readable); font-weight: 500; }
.sc-jobs .job-state.waiting { color: var(--waiting); }
.sc-jobs .job-state.checked { color: var(--checked); }
.sc-jobs .job-state.conflict { color: var(--conflict); }
.sc-jobs .job-state.muted { color: var(--muted); }
.sc-jobs .start { padding: 16px 0; }

/* More */
.sc-more .sc-row.plain .name { font-size: 16px; }
.sc-more .sc-row.plain .end.checked { color: var(--checked); }
.sc-more .sc-row.plain .end.needs { color: var(--accent-readable); font-weight: 500; }
.sc-more .desk { flex-direction: row; align-items: center; gap: 12px; }
.sc-more .desk .words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-more .desk .words .name { font-weight: 400; }
.sc-more .theme { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: var(--control); padding: 2px 0; }
.sc-more .theme button { background: none; border: 0; padding: 0 0 0 12px; min-height: var(--control); font: 400 var(--fs-secondary) var(--font-ui); color: var(--muted); cursor: pointer; }
.sc-more .theme button:hover, .sc-more .theme button:focus-visible { color: var(--accent-readable); }
.sc-more .foot { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sc-more .foot .by { font-size: var(--fs-secondary); color: var(--muted); }
.sc-more .foot .help { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: var(--fs-secondary); color: var(--muted); }
.sc-more .foot .help a { color: var(--ink); min-height: var(--control); display: inline-flex; align-items: center; }
.sc-more .signout { background: none; border: 0; padding: 0; min-height: var(--control); font: 500 14px var(--font-ui); color: var(--ink); cursor: pointer; }

/* The Monday report */
.sc-monday .bid .line b { font-weight: 500; }
.sc-monday .bid .needs { color: var(--accent-readable); font-weight: 500; }
.sc-monday .bid .waiting { color: var(--waiting); }
.sc-monday .week { display: flex; align-items: center; gap: 10px; font-size: var(--fs-secondary); color: var(--muted); padding: 0 0 14px; }
.sc-monday .week select { height: var(--control); border: 0 !important; border-bottom: 1px solid var(--hairline) !important; background: none !important; color: var(--ink) !important; font-family: var(--font-ui); font-size: 14px; }
.sc-monday .people label { display: flex; align-items: center; gap: 10px; min-height: var(--control); font-size: 15px; }
.sc-monday .people .who { font-size: var(--fs-secondary); color: var(--muted); }
.sc-monday .ok { color: var(--checked); font-size: var(--fs-secondary); margin: 8px 0 0; }
.sc-monday .pdf { font-size: 14px; font-weight: 500; }
@media print {
  body > :not(#root), #root .v2-bar, #root .v2-rail, #root .v2-tabs, #root #talk-to, #root #needs-you, #root .back, .sc-monday .week, .sc-monday .sc-foot, .sc-monday .people { display: none !important; }
  #root .dark-head, #root .head-counts { background: none !important; color: #0A0A0A !important; }
  .sc-monday { padding: 0; }
}

/* Usage */
.sc-usage .pace { padding: 22px 0 8px; font-size: 15px; line-height: 1.5; margin: 0; }
.sc-usage .pace .sc-mono { font-weight: 500; }
.sc-usage .insight { margin: 0; padding: 6px 0; font-size: 15px; line-height: 1.5; }
.sc-usage .insight.over { color: var(--waiting); }
.sc-usage details { margin-top: 10px; }
.sc-usage summary { list-style: none; cursor: pointer; min-height: var(--control); display: flex; align-items: center; font-size: 14px; font-weight: 500; }
.sc-usage summary::-webkit-details-marker { display: none; }
.sc-usage .records { font-size: 14px; color: var(--ink); }
.sc-usage .records p { margin: 8px 0; }
.sc-usage .records table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sc-usage .records th, .sc-usage .records td { text-align: left; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--hairline); font-weight: 400; }
.sc-usage .records th { color: var(--muted); }
.sc-usage .records td.n, .sc-usage .records th.n { text-align: right; font-family: var(--font-mono); font-variant-numeric: var(--figures-numeric); }
.sc-usage .months { display: flex; gap: 18px; margin-top: 14px; }
.sc-usage .months a, .sc-usage .months button { color: var(--ink); text-decoration: none; min-height: var(--control); display: inline-flex; align-items: center; background: none; border: 0; padding: 0; font: 400 14px var(--font-ui); cursor: pointer; }
.sc-usage .ask { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.sc-usage .ask .sc-btn-row button.btn-plain { font-weight: 500; }
.sc-usage .status { font-size: var(--fs-secondary); color: var(--muted); margin: 0; }

/* Sara */
.sc-sara-screen { min-height: 100%; display: flex; flex-direction: column; }
.sc-sara { display: flex; flex-direction: column; gap: 18px; }
.sc-sara .turn { display: flex; flex-direction: column; gap: 18px; }
.sc-sara .q { display: flex; flex-direction: column; gap: 4px; }
.sc-sara .q .meta { font-size: 12px; color: var(--muted); }
.sc-sara .q .text { font-size: 17px; line-height: 1.4; font-weight: 500; overflow-wrap: anywhere; }
.sc-sara .a { display: flex; flex-direction: column; gap: 6px; padding-left: 14px; border-left: 2px solid var(--agent-rule, var(--face-sara)); }
.sc-sara .a .meta { font-size: 12px; color: var(--muted); }
.sc-sara .a .s { font-size: 16px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.sc-sara .a .s a.cite { font-size: 12px; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--hairline); margin-left: 6px; white-space: nowrap; }
.sc-sara .a .s a.cite:hover, .sc-sara .a .s a.cite:focus-visible { color: var(--accent-readable); border-bottom-color: var(--accent-readable); }
.sc-sara .a .s .state { margin-left: 6px; font-size: 12px; }
.sc-sara .a .asof { font-size: 12px; color: var(--muted); }
.sc-sara .acts { display: flex; flex-wrap: wrap; gap: 0 18px; padding-top: 2px; font-size: 14px; font-weight: 500; }
.sc-sara .acts a, .sc-sara .acts button { color: var(--ink); text-decoration: none; min-height: var(--control); display: inline-flex; align-items: center; background: none; border: 0; padding: 0; font: 500 14px var(--font-ui); cursor: pointer; }
.sc-sara .acts a.accent, .sc-sara .acts button.accent { color: var(--accent-readable); }
.sc-sara .working { display: flex; flex-direction: column; gap: 4px; padding-left: 14px; border-left: 2px solid var(--agent-rule, var(--face-sara)); font-size: 13px; color: var(--muted); }
.sc-sara .working .dots { display: inline-flex; align-items: center; gap: 10px; min-height: 24px; }
.sc-sara .working .m-dots > span { background: var(--muted); }
.sc-sara .starters { display: flex; flex-direction: column; }
.sc-sara .starters a, .sc-sara .starters button { color: var(--ink); text-decoration: none; min-height: var(--control); display: flex; align-items: center; width: 100%; padding: 10px 0; box-sizing: border-box; background: none; border: 0; border-bottom: 1px solid var(--hairline); font: 400 16px/1.4 var(--font-ui); text-align: left; cursor: pointer; }
.sc-sara .starters a:last-child, .sc-sara .starters button:last-child { border-bottom: 0; }
.sc-sara .note { font-size: var(--fs-secondary); color: var(--muted); margin: 0; }
.sc-sara .error { color: var(--conflict); margin: 0; }

/* ---------------------------------------------------------------- Agent screens: Sara, Kyle (Taylor and Emma next)
   One look for every agent's workspace (Kyle's layout, the founders' base, 4 Nov 2026). Top to bottom: the head (a round
   44 px face and one status line; the dark header or the job line carries the name), the picker pinned under it, the
   conversation, and the composer (the box at 16 px and a visible accent Send), which sits above the phone's bar. Sara is
   drawn by screens/agent-frame.js (.ag-*); Kyle keeps his own markup (.ky-*, .kyle-*), so every shared rule names both.
   The rest of Kyle (the sheet, the tray, the drop overlay, Project files) follows below. Tokens only; radius 0 but the faces. */
[data-agent="sara"] { --agent-rule: var(--face-sara); }
[data-agent="taylor"] { --agent-rule: var(--face-taylor); }
[data-agent="emma"] { --agent-rule: var(--face-emma); }
/* The shell's older .note (a dashed box) and .error (a bordered box) are plain lines here, and its centred .working
   line starts at the rule like an answer */
.sc-sara-screen .note, .sc-sara-screen .error { border: 0; padding: 0; }
.sc-sara-screen .working { align-items: flex-start; flex-wrap: nowrap; }
.ky-top, .ag-top { position: sticky; top: 0; z-index: 3; display: flex; flex-direction: column; gap: 8px; padding: 2px 0 6px; background: var(--ground); }
.kyle-head, .ag-head { display: flex; align-items: center; gap: 12px; min-height: var(--control); }
img.kyle-face, img.ag-face { display: block; flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--surface); }
/* The face's state words (working, talking) are not the thread's .working line */
.sc-sara img.kyle-face.working, .sc-sara img.kyle-face.talking, .sc-sara img.ag-face.working, .sc-sara img.ag-face.talking { display: block; padding: 0; border-left: 0; }
.kyle-head .note, .ag-status { margin: 0; font-size: 15px; line-height: 1.4; color: var(--muted); min-width: 0; }
.ag-face { animation: ag-bob 6s ease-in-out infinite; }
.ag-face.working { animation: ag-sway 1.8s ease-in-out infinite; }
.ag-face.talking { animation: ag-nod 1s ease-in-out infinite; }
@keyframes ag-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes ag-sway { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-2px) rotate(1deg); } }
@keyframes ag-nod { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) {
  img.kyle-face, img.kyle-face.working, img.kyle-face.talking, img.ag-face, img.ag-face.working, img.ag-face.talking { animation: none; }
}
/* The picker: a closed button (name, a second line, the caret). Sara's is the native list laid over it, transparent, at
   16 px, so a tap opens the iPhone's own list. */
.ky-pick, .ag-pick { position: relative; display: flex; flex-direction: column; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.ky-proj, .ag-proj { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 6px 0; box-sizing: border-box; background: none; border: 0; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.ky-proj .w, .ag-proj .w { display: flex; flex-direction: column; min-width: 0; }
.ky-proj .n, .ag-proj .n { font-size: 16px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.ky-proj .a, .ag-proj .a { display: block; padding-left: 0; border-left: 0; font-size: var(--fs-secondary); line-height: var(--lh-meta); color: var(--muted); overflow-wrap: anywhere; }
.ky-proj .a[hidden], .ag-proj .a:empty { display: none; }
.ky-proj svg, .ag-proj svg { flex: none; }
.ag-select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ag-pick:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.ag-pick:hover .ag-proj .n { color: var(--accent-readable); }
.ky-line { align-self: flex-start; min-height: var(--control); padding: 0; background: none; border: 0; color: var(--ink); font: 500 var(--fs-secondary)/var(--lh-meta) var(--font-ui); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.ky-link { display: inline; min-height: 0; padding: 0; background: none; border: 0; color: var(--accent-readable); font: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* The conversation: 18 px between turns; a turn scrolled into view clears the pinned top and the composer */
#kyle-thread, .ag-thread { display: flex; flex-direction: column; gap: 18px; }
#kyle-thread > *, .ag-thread > * { scroll-margin-top: 180px; scroll-margin-bottom: 96px; }
/* The screen fills the window, so the composer sits at the bottom of it even when the conversation is short */
.v2-work > main:has(> .ag-screen), .v2-work > main:has(> .ky-screen) { display: flex; flex-direction: column; }
.ag-screen, .ky-screen { flex: 1 1 auto; box-sizing: border-box; padding-bottom: 0; }
.ag-screen > .sc-sara, .ky-screen > .sc-sara { flex: 1 1 auto; }
/* The composer */
.ky-composer, .ag-composer { position: sticky; bottom: 0; z-index: 2; margin: auto 0 0; background: var(--ground); padding: 8px 0; border-top: 1px solid var(--hairline); }
.ag-composer { display: flex; flex-direction: column; gap: 6px; }
/* The error line sits in the composer, above the box it is about, so a refused Send is seen where the thumb is */
.ag-composer .error, .ky-composer .error { font-size: 15px; line-height: 1.4; }
.ky-composer > .error { margin: 0 0 6px; }
.ky-row-in, .ag-row-in { display: flex; gap: 8px; align-items: center; }
.ky-row-in input, .ag-row-in input { flex: 1 1 auto; min-width: 0; height: var(--control); min-height: var(--control); box-sizing: border-box; margin: 0; padding: 0 18px; border: 0; font: 400 16px/1.3 var(--font-ui); }   /* the command bar's pill (Wave 1 spec 1.6) */
.ky-row-in button[data-send], .ag-row-in button[data-send] { flex: none; min-width: 72px; height: var(--control); min-height: var(--control); padding: 0 20px; background: var(--accent); color: var(--on-accent); border: 0; font: 600 16px/20px var(--font-ui); cursor: pointer; }
.ky-row-in button[data-send]:not(:disabled):hover, .ag-row-in button[data-send]:not(:disabled):hover { background: var(--accent-hover); }
.ky-row-in button[data-send]:not(:disabled):active, .ag-row-in button[data-send]:not(:disabled):active { background: var(--accent-pressed); }
.ky-row-in button[data-send]:disabled, .ag-row-in button[data-send]:disabled { background: var(--surface-hover); color: var(--muted); cursor: not-allowed; }
.ky-plus { flex: none; width: var(--control); min-width: var(--control); display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 1px solid var(--hairline-strong); color: var(--ink); cursor: pointer; }
.ky-plus:disabled { background: var(--surface-hover); color: var(--muted); border-color: var(--hairline); }
.ky-screen .sr, .ag-screen .sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 860px) {
  /* The pinned top stays near 150 px on the phone, so the conversation keeps the room */
  .ky-top, .ag-top { gap: 4px; padding: 6px 0 4px; }
  .ky-proj, .ag-proj { min-height: 48px; padding: 4px 0; }
  #kyle-thread > *, .ag-thread > * { scroll-margin-top: 160px; scroll-margin-bottom: calc(96px + 60px + env(safe-area-inset-bottom)); }
  /* Outside a job the composer rides on the four-word bar, never under it; while the keyboard is up the bar steps aside */
  .app.v2[data-in-job="false"] .ky-composer, .app.v2[data-in-job="false"] .ag-composer { bottom: calc(60px + env(safe-area-inset-bottom)); }
  .app.v2.typing[data-in-job] .ky-composer, .app.v2.typing[data-in-job] .ag-composer { bottom: 0; }
}

/* Kyle: project context (migration 0140). The sheet (bottom sheet on the phone, an anchored panel on the desktop), the
   attach tray, the drop overlay and Project files. Tokens only; radius 0, no shadows. */

.ky-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(10, 10, 10, .45); }
.ky-sheet { position: fixed; z-index: 41; display: flex; flex-direction: column; gap: 10px; padding: 16px; overflow: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--ink); }
.ky-sheet:focus { outline: none; }
.ky-sheet.phone { left: 0; right: 0; bottom: 0; max-height: 86vh; border-width: 2px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.ky-sheet.desk { max-height: 70vh; width: min(440px, calc(100vw - 32px)); }
.ky-sheet.desk.files { top: 10vh; left: 50%; transform: translateX(-50%); width: min(600px, calc(100vw - 32px)); max-height: 80vh; }
.ky-scrim.clear { background: transparent; }
.ky-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ky-sheet-h h2 { margin: 0; font-size: var(--fs-section); line-height: var(--lh-section); }
.ky-x { min-height: var(--control); padding: 0 4px; background: none; border: 0; color: var(--ink); font: 500 14px/20px var(--font-ui); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.ky-sheet input[type="text"] { width: 100%; min-height: var(--control); padding: 8px 12px; border: 1px solid var(--control-border); font: inherit; }
.ky-sheet label { display: block; margin-top: 10px; font-weight: 500; }
.ky-h { margin: 8px 0 0; font-size: var(--fs-secondary); font-weight: 600; color: var(--muted); }
.ky-list { list-style: none; margin: 0; padding: 0; }
.ky-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 6px 10px; background: none; border: 0; border-bottom: 1px solid var(--hairline); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.ky-row:hover { background: var(--surface-hover); }
.ky-row[aria-current="true"] { background: var(--navy-soft); }
.ky-row .w { display: flex; flex-direction: column; min-width: 0; }
.ky-row .n { font-weight: 500; overflow-wrap: anywhere; }
.ky-row .a { font-size: var(--fs-secondary); color: var(--muted); overflow-wrap: anywhere; }
.ky-row .ck { flex: none; color: var(--accent-readable); display: inline-flex; }
.ky-new { padding-top: 6px; }
.ky-add { width: 100%; min-height: var(--control); background: none; border: 1px solid var(--ink); color: var(--ink); font: 500 14px/20px var(--font-ui); cursor: pointer; }
.ky-add:hover { background: var(--surface-hover); }
.ky-btns { display: flex; gap: 12px; align-items: center; padding-top: 12px; }

.ky-tray { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; background: transparent; border: 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }   /* a hairline section, not a card (Wave 1 spec 1.3) */
.ky-tray-h { margin: 0; font-size: var(--fs-secondary); }
.ky-tray ul { list-style: none; margin: 0; padding: 0; max-height: 30vh; overflow: auto; }
.ky-tray > .btn-primary:disabled { background: var(--surface-hover); color: var(--muted); border-color: var(--hairline); cursor: default; }
#ky-tray:not(:empty) { padding-bottom: 8px; }
.ky-tray li { display: flex; align-items: center; gap: 10px; min-height: var(--control); border-bottom: 1px solid var(--hairline); }
.ky-tray li .n { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ky-tray li .note, .ky-tray li .error { font-size: var(--fs-secondary); margin: 0; }
/* A file that can't be added says why on its own line under the name, so a phone never squeezes the name to a letter a line */
.ky-tray li { flex-wrap: wrap; }
.ky-tray li .note { flex: none; }
.ky-tray li .error { flex: 1 0 100%; order: 3; padding-bottom: 8px; }
.ky-tray li button { flex: none; min-height: var(--control); padding: 0 4px; background: none; border: 0; color: var(--ink); font: 500 14px/20px var(--font-ui); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.ky-tray > .btn-primary { align-self: flex-start; }
.ky-drop { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; background: rgba(242, 239, 233, .94); border: 3px dashed var(--ink); color: var(--ink); font: 600 20px/1.3 var(--font-ui); pointer-events: none; }
.ky-drop[hidden] { display: none; }

.ky-card ul { margin: 2px 0 6px; padding-left: 18px; }
.ky-card li { margin: 2px 0; }
.ky-flag { margin: 4px 0 0; padding: 8px 10px; border-left: 3px solid var(--warn); background: transparent; font-size: var(--fs-secondary); }
.ky-welcome { padding: 16px 0; background: transparent; border: 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.ky-files { list-style: none; margin: 0; padding: 0; }
.ky-file { padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.ky-file .top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.ky-file .n { font-weight: 500; overflow-wrap: anywhere; }
.ky-file .st { flex: none; font-size: var(--fs-secondary); font-weight: 600; }
.ky-file .st[data-state="attention"] { color: var(--waiting); }
.ky-file .st[data-state="failed"] { color: var(--conflict); }
.ky-file .st[data-state="ready"] { color: var(--checked); }
.ky-file .note { margin: 2px 0; }

/* Start a job */
.sc-start { display: flex; flex-direction: column; gap: 22px; }
.sc-start .sources { display: flex; flex-direction: column; }
.sc-start .source { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 56px; padding: 14px 0; border-bottom: 1px solid var(--hairline); background: none; border-left: 0; border-right: 0; border-top: 0; color: var(--ink); font-family: var(--font-ui); text-align: left; cursor: pointer; width: 100%; box-sizing: border-box; }
.sc-start .source:last-child { border-bottom: 0; }
.sc-start .source .w { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sc-start .source .t { font-size: 16px; font-weight: 500; }
.sc-start .source .l { font-size: var(--fs-secondary); color: var(--muted); }
.sc-start .source .s { font-size: var(--fs-secondary); white-space: nowrap; color: var(--muted); }
.sc-start .source .s.ready { color: var(--checked); }
.sc-start .source[aria-checked="true"] { border-left: 2px solid var(--ink); padding-left: 12px; background: transparent; }
.sc-start .source[aria-checked="true"] .s.pick { color: var(--ink); font-weight: 500; }
.sc-start .source:disabled { cursor: default; color: var(--muted); }
.sc-start .source:disabled .t { font-weight: 400; }
.sc-start .next { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0; }
.sc-start .sc-foot { margin-top: 0; }
.sc-start-error { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; border: 1px solid var(--conflict); border-radius: 8px; padding: 12px 14px; }
.sc-start-error .t { margin: 0; font-size: 14px; line-height: 1.5; color: var(--conflict); }
.sc-start-error .btn { flex: none; }

/* Job › Estimate: the ledger */
.est-v2 { padding: 18px 20px 24px; }
.est-v2 .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.est-v2 .ev-sect { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 6px; }
.est-v2 .ev-sect h2 { font-family: var(--font-display); font-size: var(--fs-section); font-weight: 400; letter-spacing: -0.015em; margin: 0; line-height: var(--lh-section); }
.est-v2 .ev-sect .ev-note { font-size: var(--fs-secondary); color: var(--muted); }
.est-v2 .ev-said { font-size: var(--fs-secondary); color: var(--muted); margin: 0 0 12px; }
.est-v2 .ev-said.err { color: var(--conflict); }
.est-v2 .ev-said a { color: var(--ink); }
.est-v2 .ev-head { display: none; }
.est-v2 .ev-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); width: 100%; background: none; border-top: 0; border-left: 0; border-right: 0; color: var(--ink); text-align: left; font: inherit; cursor: pointer; min-height: var(--control); }
.est-v2 .ev-row:last-of-type { border-bottom: 0; }
.est-v2 .ev-row .ev-name { display: block; font-size: var(--fs-body); font-weight: 500; line-height: 1.3; }
.est-v2 .ev-row .ev-src { display: block; font-size: var(--fs-secondary); color: var(--muted); line-height: 1.35; margin-top: 3px; }
.est-v2 .ev-row .ev-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.est-v2 .ev-row .ev-amt .mono { font-size: var(--fs-amount); }
.est-v2 .ev-row .ev-amt .mono.ev-none { color: var(--muted); }
.est-v2 .ev-row .state { font-size: var(--fs-small); }
.est-v2 .ev-row .ev-chev { display: none; }
.est-v2 .ev-row[aria-expanded="true"] { border-left: 2px solid var(--ink); background: transparent; margin: 0 -20px; padding-left: 18px; padding-right: 20px; width: calc(100% + 40px); border-bottom: 0; }
.est-v2 .ev-open { border-left: 2px solid var(--ink); background: transparent; margin: 0 -20px; padding: 2px 20px 14px 18px; border-bottom: 1px solid var(--hairline); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.est-v2 .ev-open > * { min-width: 0; }
.est-v2 .ev-open .ev-how { overflow-wrap: anywhere; font-size: var(--fs-small); color: var(--muted); }
.est-v2 .ev-open .quote { padding-left: 12px; border-left: 1px solid var(--hairline); margin: 6px 0; }
.est-v2 .ev-open .quote .pg { font-family: var(--font-ui); font-style: normal; font-size: var(--fs-small); color: var(--muted); }
.est-v2 .ev-open .fig { font-family: var(--font-mono); font-variant-numeric: var(--figures-numeric); font-style: normal; font-size: 14px; background: var(--hairline); padding: 0 5px; color: var(--ink); }
.est-v2 .ev-open .ev-acts { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.est-v2 .ev-open .ev-acts button, .est-v2 .ev-open .ev-acts a { background: none; border: 0; padding: 0; min-height: var(--control); font: 500 var(--fs-secondary) var(--font-ui); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.est-v2 .ev-open .ev-acts .ev-ask { color: var(--muted); }
.est-v2 .ev-facts { display: flex; flex-direction: column; font-size: var(--fs-secondary); }
.est-v2 .ev-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--hairline); }
.est-v2 .ev-facts div:last-child { border-bottom: 0; }
.est-v2 .ev-facts span:first-child { color: var(--muted); flex-shrink: 0; }
.est-v2 .ev-facts span:last-child { text-align: right; }
.est-v2 .ev-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 6px 0; font-size: var(--fs-secondary); color: var(--muted); }
.est-v2 .ev-foot .ev-l { display: flex; flex-direction: column; gap: 2px; }
.est-v2 .ev-foot .ev-r2 { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.est-v2 .ev-foot .ev-st:empty, .est-v2 .ev-foot .ev-why:empty { display: none; }
.est-v2 .ev-foot .mono { color: var(--ink); font-size: 14px; }
.est-v2 .ev-foot.ev-total .mono { font-size: var(--fs-amount); }
.est-v2 .ev-foot.ev-total .ev-n { color: var(--ink); }
.est-v2 .ev-foot .ev-why { font-size: var(--fs-small); }
.est-v2 .ev-foot > span:last-child { display: none; }
.est-v2 .ev-links { display: flex; flex-wrap: wrap; gap: 0 18px; padding-top: 6px; font-size: 14px; }
.est-v2 .ev-links a { text-decoration: none; min-height: var(--control); min-width: var(--control); display: inline-flex; align-items: center; color: var(--ink); }
.est-v2 .ev-links .mono { margin-left: 5px; color: var(--muted); font-size: var(--fs-count); }
.est-v2 .ev-asked { margin-top: 14px; padding-top: 10px; border-top: 1px dotted var(--muted); font-size: var(--fs-secondary); color: var(--muted); }
.est-v2 .ev-asked b { color: var(--ink); font-weight: 500; }
.est-v2 .ev-asked a { color: var(--ink); }
.est-v2 .ev-empty { font-size: var(--fs-body); color: var(--muted); margin: 14px 0 0; }
.est-v2 form.ev-change { display: grid; gap: 10px; padding: 4px 0 6px; }
.est-v2 form.ev-change label { display: grid; gap: 4px; font-size: var(--fs-secondary); color: var(--muted); min-width: 0; }
.est-v2 form.ev-change input, .est-v2 form.ev-change select, .est-v2 form.ev-change textarea { font: var(--fs-body) var(--font-ui); border: 1px solid var(--hairline); padding: 0 10px; min-height: var(--control); width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.est-v2 form.ev-change .ev-two > * { min-width: 0; }
.est-v2 form.ev-change textarea { padding: 10px; min-height: 88px; }
.est-v2 form.ev-change .ev-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.est-v2 form.ev-change .ev-acts { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.est-v2 form.ev-change .ev-msg { font-size: var(--fs-secondary); color: var(--conflict); }
.est-v2 .btn-ink { font-size: 14px; }
.est-v2 .btn-link { background: none; border: 0; padding: 0; min-height: var(--control); font: 500 14px var(--font-ui); color: var(--ink); cursor: pointer; }
.est-v2 .ev-top { display: block; }
.est-v2 .ruler-rule.closes { margin-top: 0; }
.est-v2 .ev-skel { color: var(--muted); font-size: var(--fs-body); margin: 12px 0; }
@media (min-width: 861px) {
  .est-v2 { padding: 10px 24px 24px; }
  .est-v2 .ev-head, .est-v2 .ev-row, .est-v2 .ev-foot { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 130px 170px 28px; gap: 16px; align-items: center; }
  .est-v2 .ev-head { padding: 8px 0 6px; font-size: var(--fs-small); color: var(--muted); border-bottom: 1px solid var(--ink); }
  .est-v2 .ev-head .ev-r { text-align: right; }
  .est-v2 .ev-row { padding: 11px 0; }
  .est-v2 .ev-row .ev-src { margin: 0; }
  .est-v2 .ev-row .ev-l, .est-v2 .ev-row .ev-amt { display: contents; }
  .est-v2 .ev-top { display: none; }
  .est-v2 .ev-row .ev-amt .mono { text-align: right; }
  .est-v2 .ev-row .state { font-size: var(--fs-secondary); justify-self: start; }   /* the dashed Unknown underline fits the word, not the column */
  .est-v2 .ev-row .ev-chev { display: block; width: 14px; height: 14px; color: var(--bar-muted); }
  .est-v2 .ev-row[aria-expanded="true"] .ev-chev { color: var(--ink); }
  .est-v2 .ev-row[aria-expanded="true"] { margin: 0 -24px; padding: 10px 24px 8px 22px; width: calc(100% + 48px); }
  .est-v2 .ev-open { margin: 0 -24px; padding: 4px 24px 14px 22px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 28px; }
  .est-v2 .ev-foot { padding: 4px 0; }
  .est-v2 .ev-foot .ev-l, .est-v2 .ev-foot .ev-r2 { display: contents; }
  .est-v2 .ev-foot .ev-st:empty, .est-v2 .ev-foot .ev-why:empty, .est-v2 .ev-foot > span:last-child { display: block; }
  .est-v2 .ev-foot .ev-why { font-size: var(--fs-secondary); }
  .est-v2 .ev-foot .mono { text-align: right; }
  .est-v2 .ev-foot.ev-total { padding-top: 8px; }
  .est-v2 .ev-sect { display: none; }
  .est-v2 .ev-links { display: none; }
  .est-v2 form.ev-change { grid-column: 1 / -1; }
}

/* Needs you: answer an item. On the phone the shell's accent header carries the question (darkHeader with accent);
   the module's own question block shows on desktop under the job line. */
.ans-v2 { display: flex; flex-direction: column; }
.ans-v2 .an-head { background: var(--accent); color: var(--on-accent); padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.ans-v2 .an-head .an-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--fs-secondary); }
.ans-v2 .an-head .an-top a { color: var(--on-accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--control); font-size: 14px; }
.ans-v2 .an-head h1 { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; margin: 0; }
.ans-v2 .an-head p { margin: 0; font-size: var(--fs-body); line-height: 1.45; }
.ans-v2 .an-body { padding: 18px 20px 0; display: flex; flex-direction: column; gap: 18px; }
.ans-v2 .an-src { display: flex; flex-direction: column; gap: 8px; }
.ans-v2 .an-src .an-cite { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: var(--fs-secondary); color: var(--muted); }
.ans-v2 .an-src .an-cite button { background: none; border: 0; padding: 0; min-height: var(--control); font: 500 14px var(--font-ui); color: var(--ink); cursor: pointer; }
.ans-v2 .an-src img { display: block; width: 100%; max-height: 360px; object-fit: contain; object-position: left top; background: var(--surface); border: 1px solid var(--hairline); }
.ans-v2 .an-src .an-scan { height: 150px; background: var(--hairline); position: relative; }
.ans-v2 .an-src .an-scan i { position: absolute; left: 32px; height: 7px; background: var(--muted); opacity: .35; }
.ans-v2 .an-src .an-scan span { position: absolute; left: 32px; bottom: 12px; font-size: var(--fs-small); color: var(--muted); border-bottom: 1px dashed var(--muted); }
.ans-v2 .an-sect { font-family: var(--font-display); font-size: var(--fs-section); line-height: var(--lh-section); letter-spacing: -0.015em; padding-bottom: 6px; margin: 0; font-weight: 400; }
.ans-v2 .an-said { margin: 0; font-size: var(--fs-secondary); color: var(--muted); }
.ans-v2 .an-said.err { color: var(--conflict); }
.ans-v2 .an-said a { color: var(--ink); }
.ans-v2 .an-choices { display: flex; flex-direction: column; }
.ans-v2 .an-choice { min-height: 56px; border: 0; border-bottom: 1px solid var(--hairline); background: none; color: var(--ink); font: var(--fs-body) var(--font-ui); text-align: left; padding: 14px 0; display: flex; flex-direction: column; gap: 3px; cursor: pointer; width: 100%; }
.ans-v2 .an-choice b { font-weight: 500; }
.ans-v2 .an-choice small { font-size: var(--fs-secondary); color: var(--muted); }
.ans-v2 .an-choice.an-primary { background: var(--ink); color: var(--ground); padding: 0 16px; margin-top: 14px; min-height: 56px; flex-direction: row; align-items: center; justify-content: space-between; border-bottom: 0; }
.ans-v2 .an-choice.an-primary b { font-weight: 500; }
.ans-v2 .an-choice.an-primary small { color: var(--ground); opacity: .8; }
.ans-v2 .an-choice.an-primary + .an-choice { border-top: 0; }
.ans-v2 .an-choice.an-unknown { color: var(--muted); border-bottom: 0; min-height: 48px; padding: 12px 0; }
.ans-v2 .an-choice[aria-expanded="true"] { border-bottom: 0; }
.ans-v2 form.an-pick { display: grid; gap: 10px; padding: 0 0 14px; border-bottom: 1px solid var(--hairline); }
.ans-v2 form.an-pick label { display: grid; gap: 4px; font-size: var(--fs-secondary); color: var(--muted); min-width: 0; }
.ans-v2 form.an-pick input, .ans-v2 form.an-pick select, .ans-v2 form.an-pick textarea { font: var(--fs-body) var(--font-ui); border: 1px solid var(--hairline); padding: 0 10px; min-height: var(--control); max-width: 100%; min-width: 0; box-sizing: border-box; width: 100%; }
.ans-v2 form.an-pick .an-two > * { min-width: 0; }
.ans-v2 form.an-pick textarea { padding: 10px; min-height: 96px; }
.ans-v2 form.an-pick .an-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ans-v2 form.an-pick .an-acts { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.ans-v2 form.an-pick .an-msg { font-size: var(--fs-secondary); color: var(--conflict); }
.ans-v2 .btn-ink { font-size: 14px; }
.ans-v2 .btn-link { background: none; border: 0; padding: 0; min-height: var(--control); font: 500 14px var(--font-ui); color: var(--ink); cursor: pointer; }
.ans-v2 .an-foot { margin-top: 18px; padding: 12px 20px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; border-top: 1px solid var(--hairline); font-size: var(--fs-secondary); color: var(--muted); }
.ans-v2 .an-foot a { font-size: 14px; font-weight: 500; text-decoration: none; min-height: var(--control); display: inline-flex; align-items: center; color: var(--ink); text-align: right; margin-left: auto; }
.ans-v2 .an-empty { padding: 18px 20px; font-size: var(--fs-body); color: var(--muted); }
.ans-v2 .an-empty a { color: var(--ink); }
.ans-v2 .an-skel { padding: 18px 20px; color: var(--muted); }
@media (max-width: 860px) { .ans-v2 .an-head { display: none; } }
@media (min-width: 861px) {
  .ans-v2 .an-head { padding: 18px 24px 22px; }
  .ans-v2 .an-head h1 { font-size: 28px; }
  .ans-v2 .an-body { padding: 18px 24px 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 28px; align-items: start; }
  .ans-v2 .an-body.no-src { grid-template-columns: minmax(0, 720px); }
  .ans-v2 .an-src img { max-height: 520px; }
  .ans-v2 .an-foot { padding: 12px 24px 24px; }
  .ans-v2 .an-empty, .ans-v2 .an-skel { padding: 18px 24px; }
}

/* Subs and bids, Papers, Bid requirements, Approvals: one set of rows (the four modules' near-identical blocks, as one) */
.v2b { padding: 18px 20px 24px; display: flex; flex-direction: column; }
.v2b-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 6px; }
.v2b-head h2 { font-size: var(--fs-section); margin: 0; }
.v2b-head .state { white-space: nowrap; }
.v2b-gap { padding-top: 22px; }
.v2b-approvals .v2b-head { padding-top: 26px; }
.v2b-row { padding: 12px 0; display: flex; flex-direction: column; gap: 4px; }
.v2b .ruler-rule + .v2b-row, .v2b .ruler-rule + .v2b-rowbtn { padding-top: 14px; }
.v2b-requirements .v2b-row { padding: 11px 0; gap: 6px; }
.v2b-row.is-open { border-left: 2px solid var(--ink); padding-left: 12px; margin-left: -14px; }
.v2b-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.v2b-name { font-size: 16px; font-weight: 500; }
.v2b-requirements .v2b-name { font-size: 15px; line-height: 1.3; }
.v2b-who .v2b-name, .v2b-col .v2b-name { font-size: 15px; line-height: 1.2; }
.v2b-big { font-size: 18px; }
.v2b-new { font-size: var(--fs-secondary); font-weight: 500; color: var(--accent-readable); white-space: nowrap; }
.v2b-amt { font-size: 15px; white-space: nowrap; }
.v2b-amt.muted { color: var(--muted); }
.v2b-sub .state { white-space: nowrap; flex-shrink: 0; }
.v2b-note { font-size: var(--fs-secondary); line-height: 1.45; padding-left: 12px; border-left: 2px solid var(--face-emma); margin-top: 4px; }
.v2b-note a { color: var(--ink); }
.v2b-arrival { display: flex; flex-direction: column; gap: 8px; padding-bottom: 18px; }
.v2b-arrival p { margin: 0; font-size: 14px; line-height: 1.5; }
.v2b-diff { margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--ink); list-style: none; font-size: var(--fs-secondary); line-height: 1.6; }
.v2b-rowbtn { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; background: none; border: 0; padding: 0; text-align: left; font: inherit; color: var(--ink); cursor: pointer; min-height: var(--control); text-decoration: none; box-sizing: border-box; }
.v2b-approvals .v2b-rowbtn { padding: 11px 0; }
div.v2b-rowbtn { cursor: default; }
.v2b-rowbtn .state { white-space: nowrap; flex-shrink: 0; }
.v2b-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v2b-detail { display: flex; flex-direction: column; gap: 4px; padding-left: 12px; border-left: 2px solid var(--ink); }
.v2b-detail p { margin: 0; }
.v2b-acts { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.v2b-approvals .v2b-acts { padding-top: 4px; }
.v2b-acts .btn-plain, .v2b-acts .btn-ink, .v2b-acts .btn-primary, .v2b-line a { min-height: var(--control); min-width: var(--control); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.v2b-approvals .v2b-acts .btn-primary, .v2b-approvals .v2b-acts .btn-ink, .v2b-approvals .v2b-acts .btn-plain { min-height: 48px; font-size: 15px; }
.v2b-acts .btn-plain.muted { color: var(--muted); font-weight: 400; }
.v2b-card { display: flex; flex-direction: column; gap: 10px; }
.v2b-who { display: flex; align-items: center; gap: 10px; }
.v2b-to { line-height: 1.5; }
.v2b-words { font-size: 15px; line-height: 1.55; padding: 12px 0 12px 14px; border-left: 2px solid var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.v2b-plain { margin: 0; font-size: 15px; }
.v2b-ask p { margin: 0; font-size: 15px; }
.v2b-drive { font-size: 14px; }
.v2b-form { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 2px; }
.v2b-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-secondary); color: var(--muted); }
.v2b-form input:not([type="checkbox"], [type="radio"]), .v2b-form select, .v2b-form textarea { font: inherit; font-size: 15px; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--ink); padding: 0; min-height: var(--control); line-height: 1.5; }
.v2b-check { display: flex; flex-direction: row !important; align-items: center; gap: 10px; min-height: var(--control); color: var(--ink) !important; font-size: 15px !important; }
.v2b-msg { margin: 0; font-size: var(--fs-secondary); color: var(--conflict); min-height: 0; }
.v2b-msg:empty { display: none; }
.v2b-said { margin: 0; font-size: var(--fs-secondary); color: var(--checked); }
.v2b-said.bad { color: var(--conflict); }
.v2b-said.v2b-top { padding: 12px 0 0; }
.v2b-papers .v2b-said { margin: 0 0 14px; }
.v2b-all { padding: 12px 0 0; font-size: 14px; align-self: flex-start; }
.v2b-empty, .v2b-foot { margin: 14px 0 0; }
.v2b-approvals .v2b-empty { margin: 0; }
.v2b-footer { margin-top: 22px; padding-top: 10px; border-top: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.v2b-photo { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.v2b-footer .btn-ink { font-size: 15px; }
@media (min-width: 861px) { .v2b { padding: 20px 24px 24px; } }

/* ---------------------------------------------------------------- print
   White paper, Ink text, no dark backgrounds, whichever theme is on screen. Token values are set on :root three
   times over so this outranks the dark blocks above (it comes last, too). */
@media print {
  :root:root:root {
    --ground: #FFFFFF; --surface: #FFFFFF; --hairline: #DCD7CE; --ink: #0A0A0A; --muted: #625E57;
    --accent-readable: #B73700; --focus: #B73700; --navy: #B73700; --navy-soft: #FFFFFF; --on-navy: #FFFFFF;
    --control-border: #827B70; --surface-hover: #FFFFFF;
    --checked: #2E6B4E; --waiting: #8A5D0B; --conflict: #B0362A;
    --bar: #FFFFFF; --bar-text: #0A0A0A; --bar-muted: #625E57; --accent-on-bar: #B73700;
    color-scheme: light;
  }
  html, body { background: #FFFFFF !important; color: #0A0A0A !important; }
  .v2-bar, .dark-head, .head-counts, .head-cap { background: #FFFFFF !important; color: #0A0A0A !important; }
  a { color: #0A0A0A; text-decoration: underline; }
}

/* ---------------------------------------------------------------- Phone deck: Home, Decisions, Team, Brain
   The founders' approved phone design ("BNZ, The client platform", 9 slides, 5 Nov 2026) on the Wave 1 tokens (spec
   section 1, approved Nov 5 2026): Bone paper, Instrument Serif titles at 38 to 46 px, Inter for everything else, the one
   accent fill on the one main action, letter avatars in the desks' colours, uppercase labels over a hair rule, pill
   buttons and Tell box, and the brief as the one white card (20 px corners, the spec's shadow). Drawn by screens/home.js,
   screens/approvals.js (the briefs), screens/team.js, the desks' pages and screens/brain.js inside .pd; the bar under them
   is the shell's (index.html, .v2-tabs). Kept from the house rules where the slides differ: nothing under 12 px, ink
   labels on the orange (white on it is 3:1), the readable orange (--accent-text) for every orange word, 44 px controls
   and 16 px boxes. The desktop draws its own layout of the same pages (the "Desktop views" section at the end, D1 part B). */
:root { --pd-radius: var(--r-brief); --pd-pill: var(--r-pill); }   /* the deck's two corner names, kept for old readers */
@media (max-width: 860px) {
  .app.v2 { --ground: var(--paper); }
}
.pd { padding: calc(env(safe-area-inset-top) + 14px) 20px 24px; color: var(--ink); font: 400 16px/1.5 var(--font-ui); }
.pd :where(h1, h2, h3, p, ul) { margin: 0; }
@media (max-width: 359px) { .pd { padding-left: 16px; padding-right: 16px; } }
/* Type: the serif roles (weight 400, slightly tight), sized for a 390 px phone and a step smaller below 360 */
.pd .pd-greet, .pd .pd-title, .pd .pd-line { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; color: var(--ink); }
.pd .pd-greet { font-size: 46px; line-height: 50px; }
.pd .pd-title { font-size: 38px; line-height: 44px; }
.pd .pd-line { font-size: 30px; line-height: 36px; }
@media (max-width: 359px) {
  .pd .pd-greet { font-size: 38px; line-height: 44px; }
  .pd .pd-title { font-size: 34px; line-height: 40px; }
  .pd .pd-line { font-size: 26px; line-height: 32px; }
}
.pd .sample-mark { color: var(--muted); }
/* Home's top row: the wordmark (and SAMPLE DATA) left, the person's round initial right (Settings) */
.pd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--control); }
.pd-top .lead { display: flex; align-items: center; flex-wrap: wrap; gap: 0 12px; min-width: 0; }
.pd .pd-mark { font: 600 15px/20px var(--font-ui); letter-spacing: .2em; color: var(--ink); }   /* the wordmark's tracking (spec 1.4) */
.pd-me { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--control); height: var(--control); margin-right: -6px; text-decoration: none; }
.pd-me .pd-me-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 600 14px/1 var(--font-ui); }
.pd-hello { margin-top: 10px; padding-bottom: 3px; border-bottom: 1px solid var(--ink); }
/* The decisions line: the count in the readable orange, the words in ink, Review on the right */
.pd-waiting { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 65px; padding: 8px 0; box-sizing: border-box; border-bottom: 1px solid var(--hairline-soft); }
.pd-waiting .n { color: var(--accent-text); }
.pd-waiting .pd-line.quiet { color: var(--muted); }
/* Buttons (pills, Wave 1 spec 1.3 and 1.7): the main one is the accent fill with an ink label; the other is outlined in the
   strong hairline on whatever it stands on (the white brief, the paper) */
.pd-pill, .pd-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: var(--control); padding: 0 20px; box-sizing: border-box;
  border: 0; border-radius: var(--r-pill); font: 600 15px/20px var(--font-ui); text-align: center; text-decoration: none; cursor: pointer; }
.pd-pill, .pd-btn.main { background: var(--accent); color: var(--on-accent); }
.pd-pill:hover, .pd-btn.main:not(:disabled):hover { background: var(--accent-hover); }
.pd-pill:active, .pd-btn.main:not(:disabled):active { background: var(--accent-pressed); }
.pd-btn.alt { background: transparent; color: var(--ink); border: 1px solid var(--hairline-strong); }
.pd-btn.ink { background: var(--ink); color: var(--paper); }
.pd-quiet { display: inline-flex; align-items: center; min-height: var(--control); padding: 0; background: none; border: 0; color: var(--ink);
  font: 500 15px/20px var(--font-ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* A section: its label (Wave 1 spec 1.2: uppercase, .14em, muted, 12 px at the house floor), an optional See all, the
   hair rule, then rows */
.pd-sec { margin-top: 30px; }
.pd-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; padding-bottom: 6px; box-sizing: border-box; border-bottom: 1px solid var(--hairline-soft); }
.pd-label h2 { font: 600 12px/18px var(--font-ui); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.pd-all { display: inline-flex; align-items: center; gap: 2px; min-height: var(--control); margin: -10px 0 -6px; font: 600 14px/20px var(--font-ui); color: var(--accent-text); text-decoration: none; }
.pd-all svg { flex: none; }
.pd-rows { list-style: none; padding: 0; }
.pd-row { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 12px 0; box-sizing: border-box; border-bottom: 1px solid var(--hairline-soft); color: var(--ink); text-decoration: none; }
a.pd-row:hover .n, a.pd-row:focus-visible .n { color: var(--accent-text); }
.pd-row .t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pd-row .n { font: 600 16px/22px var(--font-ui); overflow-wrap: anywhere; }
.pd-row .s { font: 400 14px/20px var(--font-ui); color: var(--muted); overflow-wrap: anywhere; }
.pd-row .end { flex: none; text-align: right; font: 600 14px/20px var(--font-ui); }
.pd-chev { flex: none; display: block; color: var(--faint); }
.pd-row.plain .end { color: var(--muted); font-weight: 400; }
/* A row that opens a drafted email in place (Decisions, Waiting on someone else): a button that reads as the rows */
button.pd-row { width: 100%; margin: 0; padding-left: 0; padding-right: 0; background: none; border: 0; border-bottom: 1px solid var(--hairline-soft);
  border-radius: 0; font: inherit; text-align: left; cursor: pointer; }
button.pd-row:hover .n, button.pd-row:focus-visible .n { color: var(--accent-text); }
.pd-row[aria-expanded="true"] { border-bottom-color: transparent; }
.pd-row[aria-expanded="true"] .pd-chev { transform: rotate(90deg); }
.pd-rows li > .pd-words { margin: 0; padding: 12px 0 16px; border-bottom: 1px solid var(--hairline-soft); }
/* Team's rows: the 42 px letter, the name a size up */
.pd-row.pd-dept { min-height: 85px; }
.pd-row.pd-dept .n { font-size: 17px; }
/* Today's rows: a 2 px bar in the desk's colour (a row no desk owns keeps the hairline) */
.pd-bar { flex: none; align-self: stretch; width: 2px; min-height: 38px; background: var(--hairline); }
.pd-bar.sara { background: var(--agent-sara); } .pd-bar.taylor { background: var(--agent-taylor); } .pd-bar.emma { background: var(--agent-emma); }
.pd-bar.kyle { background: var(--agent-kyle); } .pd-bar.daniel { background: var(--agent-daniel); }
/* State words on the paper: 14 px, 600; the needs-you marker is 6 px */
.pd .state { font-family: var(--font-ui); font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.pd .state-needs { color: var(--accent-text); }
.pd .state-needs::before { width: 6px; height: 6px; margin-right: 6px; vertical-align: 2px; }
.pd .state-working, .pd .state-reported { font-weight: 400; }
/* Letter avatars in the desks' colours (decorative: the name is always beside them) */
.pd-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-hover); color: var(--ink); font: 600 15px/1 var(--font-ui); }
.pd-avatar.s24 { width: 24px; height: 24px; font-size: 12px; }
.pd-avatar.s42 { width: 42px; height: 42px; font-size: 18px; }
.pd-avatar.s58 { width: 58px; height: 58px; font-size: 24px; }
.pd-avatar.s64 { width: 64px; height: 64px; font-size: 25px; }
.pd-avatar-sara { background: var(--agent-sara); color: var(--on-agent); } .pd-avatar-taylor { background: var(--agent-taylor); color: var(--on-agent); }
.pd-avatar-emma { background: var(--agent-emma); color: var(--on-agent); } .pd-avatar-kyle { background: var(--agent-kyle); color: var(--on-agent); }
.pd-avatar-daniel { background: var(--agent-daniel); color: var(--on-agent); }
.pd-avatar-none { background: none; border: 1.5px solid var(--hairline); box-sizing: border-box; }
/* Home's last line: who is on, the avatars overlapping on a paper ring */
.pd-crew { display: flex; align-items: center; gap: 12px; min-height: var(--control); margin-top: 14px; color: var(--muted); font: 400 14px/20px var(--font-ui); text-decoration: none; }
.pd-stack { display: inline-flex; flex: none; }
.pd-stack .pd-avatar { border: 2px solid var(--paper); box-sizing: content-box; }
.pd-stack .pd-avatar + .pd-avatar { margin-left: -6px; }
.pd-note { margin-top: 12px; font: 400 15px/21px var(--font-ui); color: var(--muted); }
.pd-note.bad { color: var(--conflict); }
/* A page's title (Decisions, Team, Brain): the serif title, a short suffix on its baseline, SAMPLE DATA under it */
.pd-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; padding-top: 6px; }
.pd-head .suffix { font: 600 14px/20px var(--font-ui); color: var(--accent-text); }
.pd-head .suffix.quiet { font-weight: 400; color: var(--muted); }
.pd-head + .sample-mark { display: block; margin-top: 4px; }
.pd-body { margin-top: 20px; }
/* The brief (Decisions): who drafted it, one line of what would happen, the facts, two buttons */
.pd-briefs { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
/* The one elevated surface in the product (Wave 1 spec 1.3 and 1.7): white, no edge, 20 px corners on the phone (16 on the
   desktop: --r-brief), the spec's shadow. The who line reads "Emma · Subs and bids". */
.pd-brief { display: flex; flex-direction: column; padding: 18px 18px 18px 20px; background: var(--surface); border: 0; border-radius: var(--r-brief); box-shadow: var(--brief-shadow); scroll-margin-top: 16px; }
.pd-brief .hd { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; min-height: 24px; font: 500 14px/20px var(--font-ui); color: var(--muted); }
.pd-brief .hd .who { font-weight: 600; color: var(--ink); }
.pd-brief .hd .dept::before { content: "\00B7"; margin-right: 6px; }
.pd-brief .ti { margin-top: 14px; font: 600 18px/24px var(--font-ui); overflow-wrap: anywhere; }
.pd-brief .fa { margin-top: 6px; font: 400 14.5px/21px var(--font-ui); color: var(--muted); overflow-wrap: anywhere; }
.pd-brief .pd-how { margin: 8px 0 0; font: 400 13px/18px var(--font-ui); color: var(--muted); }
.pd-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pd-acts > .pd-btn { flex: 1 1 136px; min-height: 48px; padding: 0 8px; }
.pd-links { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 4px; }
.pd-said { margin-top: 12px; font: 500 15px/21px var(--font-ui); color: var(--checked); }
.pd-said.bad { color: var(--conflict); }
.pd-said.quiet { color: var(--muted); font-weight: 400; }
.pd-words { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; font: 400 15px/21px var(--font-ui); }
.pd-words .to { color: var(--muted); overflow-wrap: anywhere; }
.pd-words .body { padding: 10px 0 10px 12px; border-left: 2px solid var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.pd-words .as { font-size: 13px; line-height: 18px; color: var(--muted); }
.pd-ask { margin-top: 14px; }
.pd-ask p { font: 400 15px/21px var(--font-ui); }
.pd-brief .v2b-form { margin-top: 14px; }
.pd .v2b-form input:not([type="checkbox"], [type="radio"]), .pd .v2b-form textarea { font-size: 16px; }
.pd-empty { margin-top: 20px; }
.pd-empty .sub { margin-top: 8px; font: 400 15px/21px var(--font-ui); color: var(--muted); }
/* The five desks' pages (part 2): the head (the way back to Team, the letter, the name in the serif and the department,
   the status word on the right), the Tell box under it where a real call takes the words, then the desk's own content.
   Sara and Kyle keep their conversation and the composer at the bottom; their head is this one on the phone. */
.pd-avatar.s44 { width: 44px; height: 44px; font-size: 18px; }
.pd-ahead { display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.pd-ahead-top { display: flex; align-items: center; flex-wrap: wrap; gap: 0 12px; min-height: var(--control); }
.pd-back { display: inline-flex; align-items: center; gap: 4px; min-height: var(--control); min-width: var(--control); margin-left: -4px; padding-right: 8px;
  color: var(--muted); font: 400 15px/20px var(--font-ui); text-decoration: none; }
.pd-back:hover span { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pd-ahead-top .sample-mark { color: var(--muted); }
.pd-ahead-row { display: flex; align-items: center; gap: 12px; }
.pd-ahead-row > .ag-head, .pd-ahead-row > .kyle-head { display: contents; }
.pd-ahead-row .pd-avatar { order: 1; }
.pd-ahead-row .pd-who { order: 2; flex: 1 1 auto; min-width: 0; }
.pd-ahead-row .pd-duty { order: 3; flex: 0 0 auto; max-width: 44%; }
.pd-ahead .pd-aname { margin: 0; font: 400 38px/42px var(--font-serif); letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
.pd-ahead .pd-seat { margin: 0; font: 400 14px/20px var(--font-ui); color: var(--muted); overflow-wrap: anywhere; }
/* The status word: ready in the green, working and off in the grey, away in the amber; a small square marker before it */
.pd-ahead .pd-duty { margin: 0 0 0 auto; padding: 0; border: 0; font: 600 14px/20px var(--font-ui); color: var(--muted); text-align: right; overflow-wrap: anywhere; }
.pd-ahead .pd-duty:empty { display: none; }
.pd-ahead .pd-duty::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; vertical-align: 1px; border-radius: 50%; background: currentColor; }
.pd-ahead .pd-duty[data-s="ready"] { color: var(--checked); }
.pd-ahead .pd-duty[data-s="ready"]::before { background: var(--ok); outline: 4px solid color-mix(in srgb, var(--ok) 15%, transparent); }   /* the soft ring (an outline, not a shadow) */
/* Needs attention is Signal and Paused muted, as on the desktop's head (Wave 1 spec 1.6, approved Nov 5 2026; review fix,
   Nov 6 2026: the phone said "Away right now" in amber where the desktop said "Needs attention") */
.pd-ahead .pd-duty[data-s="away"] { color: var(--accent-text); }
.pd-ahead .pd-duty[data-s="away"]::before { background: var(--accent); }
.pd-ahead .pd-duty[data-s="working"], .pd-ahead .pd-duty[data-s="off"], .pd-ahead .pd-duty[data-s="paused"] { font-weight: 400; }
@media (max-width: 359px) {
  .pd-ahead .pd-aname { font-size: 32px; line-height: 38px; }
  /* a narrow phone: the status word goes under the name, in line with it, rather than squeezed to its right */
  .pd-ahead-row { flex-wrap: wrap; row-gap: 2px; }
  .pd-ahead-row .pd-duty { flex: 1 0 calc(100% - 56px); max-width: none; }
  .pd-ahead .pd-duty { margin-left: 56px; text-align: left; }
}
/* A letter in place of a face: it stands still, sways while a question is worked on and nods after the answer, as the
   faces do; the conversation's .working line style never reaches it */
.pd-avatar.ag-face, .pd-avatar.kyle-face { animation: none; }
.pd-avatar.ag-face.working, .pd-avatar.kyle-face.working { animation: ag-sway 1.8s ease-in-out infinite; }
.pd-avatar.ag-face.talking, .pd-avatar.kyle-face.talking { animation: ag-nod 1s ease-in-out 2; }
.sc-sara .pd-avatar.working, .sc-sara .pd-avatar.talking { display: inline-flex; flex-direction: row; gap: 0; padding: 0; border-left: 0; font-size: 18px; color: var(--on-agent); }
@media (prefers-reduced-motion: reduce) { .pd-avatar.ag-face, .pd-avatar.ag-face.working, .pd-avatar.ag-face.talking, .pd-avatar.kyle-face, .pd-avatar.kyle-face.working, .pd-avatar.kyle-face.talking { animation: none; } }
/* Sara's and Kyle's pages on the phone: the head on the paper, the pinned top is the picker */
.pd-agent-chat { padding-top: calc(env(safe-area-inset-top) + 8px); }
.pd-agent-chat .ag-top, .pd-agent-chat .ky-top { top: env(safe-area-inset-top); }
/* The Tell box (the command bar, Wave 1 spec 1.6): a --field pill, the 16 px box and the accent Send in one row; a quiet
   line under it says where the answer shows */
.pd-tell { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.pd-tell-row { display: flex; align-items: stretch; gap: 8px; }
/* Send inside the pill (Wave 1 spec 1.6 and the deck's slides 5 and 6; review fix, Nov 6 2026: it stood outside it): the
   row carries .d-cmd, the desktop's command bar (a 54 px --field pill, the box and the 44 px Signal Send inside); the box
   keeps 16 px type so the iPhone doesn't zoom into it */
.pd-tell-row.d-cmd { align-items: center; gap: 8px; padding: 0 5px 0 20px; }
.pd-tell-row.d-cmd input { height: 44px; min-height: 44px; padding: 0 2px; font-size: 16px; }
.pd-tell-row input { flex: 1 1 auto; min-width: 0; height: 52px; min-height: 52px; box-sizing: border-box; margin: 0; padding: 0 20px; border: 0;
  border-radius: var(--r-pill); font: 400 16px/1.3 var(--font-ui); }
.pd-tell-row .pd-btn { min-height: 52px; min-width: 76px; }
.pd-tell-row .pd-btn:disabled { background: var(--surface-hover); color: var(--muted); cursor: not-allowed; }
.pd-tell-err { margin: 0; font: 500 15px/21px var(--font-ui); color: var(--conflict); }
.pd-tell-note { margin: 0; font: 400 13px/18px var(--font-ui); color: var(--muted); }
.pd-agent .sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The content title (the job the page is about), in the serif; with more than one job it is the picker (the iPhone's
   own list behind it), with the facts under the name */
.pd-ctitle { margin-top: 24px; }
.pd-ctitle .pd-cname { font: 400 26px/32px var(--font-serif); letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
.pd-ctitle .pd-csub { margin-top: 2px; font: 400 14px/20px var(--font-ui); color: var(--muted); }
.pd-ctitle.plain { padding-bottom: 10px; border-bottom: 1px solid var(--hairline-soft); }
.pd .ag-pick { position: relative; margin-top: 24px; border-top: 0; border-bottom: 1px solid var(--hairline-soft); }
.pd .ag-proj { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 0 10px; color: var(--ink); }
.pd .ag-proj .w { display: flex; flex-direction: column; min-width: 0; }
.pd .ag-proj .n { font: 400 26px/32px var(--font-serif); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.pd .ag-proj .a { margin-top: 2px; font: 400 14px/20px var(--font-ui); color: var(--muted); overflow-wrap: anywhere; }
.pd .ag-proj .a:empty { display: none; }
.pd .ag-proj svg { flex: none; color: var(--muted); }
.pd .ag-select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pd .ag-pick:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Amounts on a row: the figure (16/600, tabular), a state word under it when there is one */
.pd-row .end .amt { display: block; font: 600 16px/22px var(--font-ui); font-variant-numeric: var(--figures-numeric); color: var(--ink); }
.pd-row .end .state { display: block; }
.pd-row .t .state { align-self: flex-start; }
/* Taylor's total: a 2 px ink rule, Total on the left, the figure in the serif on the right, the reason under it */
.pd-total { margin-top: 0; padding-top: 14px; border-top: 2px solid var(--ink); }
.pd-total .line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pd-total .k { font: 600 13px/18px var(--font-ui); color: var(--muted); }
.pd-total .v { font: 400 44px/48px var(--font-serif); font-variant-numeric: var(--figures-numeric); color: var(--ink); }
.pd-total .v.quiet { font-size: 26px; line-height: 32px; color: var(--muted); }
.pd-total .why { margin-top: 4px; text-align: right; font: 400 14px/20px var(--font-ui); color: var(--muted); }
@media (max-width: 359px) { .pd-total .v { font-size: 38px; line-height: 42px; } }
/* A department that isn't switched on: one plain sentence, nothing to tap */
.pd-off { margin-top: 24px; font: 400 16px/24px var(--font-ui); color: var(--ink); }
.pd-off + .pd-off { margin-top: 10px; }
/* Brain: what the company has taught the office, in the serif, its numbers in the readable orange; then the tools */
.pd-para { margin-top: 18px; font: 400 20px/27px var(--font-serif); color: var(--ink); }
.pd-para .num { color: var(--accent-text); }
.pd-h2 { margin: 36px 0 0; padding-top: 24px; border-top: 1px solid var(--ink); font: 400 28px/34px var(--font-serif); letter-spacing: -0.01em; color: var(--ink); }
.pd-tile { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 37px; height: 37px; border-radius: 0;
  background: var(--field); color: var(--ink-2); font: 600 15px/1 var(--font-ui); }   /* a monogram tile: square (not on spec 1.3's list) */
.pd-row.pd-tool { min-height: 73px; padding: 14px 0; }
.pd-sec .pd-more { margin-top: 10px; font: 400 14px/20px var(--font-ui); color: var(--muted); }
.pd-para.quiet { color: var(--muted); }
.pd-h2 + .pd-sec { margin-top: 12px; }
.pd-row .s .st.needs { color: var(--accent-text); font-weight: 600; }

/* ---------------------------------------------------------------- Desktop views (Wave 1 D1 part B)
   The founders' Wave 1 spec, section 1 (approved Nov 5 2026): the eight desktop views (Home, Approvals, Sara, Taylor,
   Emma, Kyle, Daniel, Company Brain) and the page heads of Jobs and Settings, drawn by the screens with screens/desk.js
   inside the shell's frame (the rail and the top bar, index.html). Spec 1.4 and 1.6: a page head (the Signal eyebrow, the
   serif headline at 58) or an agent head (the 64 px letter, the serif name at 50, the department, the duty word), the
   command bar (a --field pill, 54 px, Send inside), then two columns (the main list fluid, the side summary 352 px, 290 on
   Approvals, 64 px apart; they stack under 1180 px). Sections: a serif title at 28 over a 1 px ink rule, or a muted label
   over a hair rule. Rows are type divided by hairlines. Nothing rounded but the spec's list (theme.css's corner rule),
   no shadow but the brief's. Text in Signal uses the readable step (--accent-text), as everywhere. */
.d-view { color: var(--ink); font: 400 15px/1.45 var(--font-ui); }
.d-view :where(h1, h2, h3, p, ul, ol) { margin: 0; }
.d-view .sr, .d-switch .sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.d-view .sample-mark { color: var(--muted); }
/* The page head */
.d-eyebrow { font: 600 12px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.d-view .d-headline, .d-headline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 0; font: 400 var(--fs-headline)/1 var(--font-serif); letter-spacing: -0.012em; color: var(--ink); }
.d-phead > .d-headline:first-child { margin-top: 0; }
.d-headline .w { min-width: 0; overflow-wrap: anywhere; }
.d-headline .suffix { font: 600 16px/1 var(--font-ui); letter-spacing: 0; color: var(--accent-text); }
.d-headline .suffix.quiet { font-weight: 500; color: var(--muted); }
.d-lede { margin-top: 10px; max-width: 640px; font: 400 16px/1.45 var(--font-ui); color: var(--ink-2); }
.d-lede .num { color: var(--accent-text); font-weight: 500; }
/* The agent head (spec 1.6) */
.d-ahead { display: flex; align-items: center; gap: 18px; }
.d-ahead .d-who { flex: 1 1 auto; min-width: 0; }
.d-view .d-aname, .d-aname { margin: 0; font: 400 var(--fs-agent)/1 var(--font-serif); letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
.d-dept { margin-top: 5px; font: 500 14px/1.2 var(--font-ui); color: var(--muted); }
.d-state { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 40%; text-align: right; }
.d-duty { display: inline-flex; align-items: center; gap: 8px; font: 600 13.5px/1.2 var(--font-ui); color: var(--muted); }
.d-duty::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.d-duty[data-d="on"] { color: var(--checked); }
.d-duty[data-d="on"]::before { background: var(--ok); outline: 4px solid color-mix(in srgb, var(--ok) 15%, transparent); }   /* the soft ring: an outline, not a shadow */
.d-duty[data-d="attention"] { color: var(--accent-text); }
.d-duty[data-d="attention"]::before { background: var(--accent); }
.d-duty[data-d="paused"], .d-duty[data-d="off"] { font-weight: 500; }
.d-duty:empty { display: none; }   /* no word until the desk's record is read (review fix, Nov 6 2026) */
/* The live question line under the duty word (Sara, Kyle): shown while a question is worked on or waits */
.d-ahead .d-live { margin: 0; font: 400 13px/1.3 var(--font-ui); color: var(--muted); }
.d-ahead .d-live:empty, .d-ahead .d-live[data-s="ready"], .d-ahead .d-live[data-s="off"], .d-ahead .d-live[data-s="paused"], .d-ahead .d-live[data-s="away"] { display: none; }   /* the duty word says these */
.d-ahead .pd-avatar.s64 { font-size: 25px; }
/* The command bar (spec 1.6): a --field pill, the box and the Signal Send inside it; off, it says why on one line */
.d-cmd-form { display: flex; flex-direction: column; gap: 8px; margin-top: 26px; }
.d-cmd { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 5px 0 22px; box-sizing: border-box; background: var(--cmd-fill); border-radius: var(--r-pill); }
.d-cmd:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.d-cmd .d-cmd-ic { flex: none; color: #8A8378; }
.d-cmd input { flex: 1 1 auto; min-width: 0; height: 44px; min-height: 44px; box-sizing: border-box; margin: 0; padding: 0 4px; border: 0; font: 400 15.5px/1.2 var(--font-ui); }
.d-cmd input:focus-visible { outline: none; }
.d-cmd .d-send, .d-cmd button[data-send] { flex: none; min-width: 76px; height: 44px; min-height: 44px; padding: 0 22px; border: 0; background: var(--accent); color: var(--on-accent); font: 600 14px/1 var(--font-ui); cursor: pointer; }
.d-cmd .d-send:not(:disabled):hover, .d-cmd button[data-send]:not(:disabled):hover { background: var(--accent-hover); }
.d-cmd.off { background: #E4DED4; }
.d-cmd.off .d-send, .d-cmd .d-send:disabled, .d-cmd button[data-send]:disabled { background: var(--surface-hover); color: var(--muted); cursor: not-allowed; }
.d-cmd-note { margin: 0; padding-left: 22px; font: 400 13px/1.4 var(--font-ui); color: var(--muted); }
.d-cmd-err { margin: 0; padding-left: 22px; font: 500 15px/1.4 var(--font-ui); color: var(--conflict); }
.d-cmd-err[hidden] { display: none; }
/* Two columns (spec 1.4) */
.d-cols { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 64px; align-items: start; margin-top: 40px; }
.d-cols.tight { margin-top: 26px; }
.d-cols.narrow { grid-template-columns: minmax(0, 1fr) 290px; }
.d-col { min-width: 0; }
.d-col > * + * { margin-top: 34px; }
@media (max-width: 1279px) { .d-cols { gap: 40px; grid-template-columns: minmax(0, 1fr) 300px; } .d-cols.narrow { grid-template-columns: minmax(0, 1fr) 260px; } }
@media (max-width: 1179px) { .d-cols, .d-cols.narrow { grid-template-columns: minmax(0, 1fr); } }
/* Sections: a serif title over a 1 px ink rule (an aside on the right), or a muted label over a hair rule (See all) */
.d-sech { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.d-sech h2 { min-width: 0; font: 400 var(--fs-sec)/1.05 var(--font-serif); letter-spacing: -0.005em; color: var(--ink); overflow-wrap: anywhere; }
.d-aside { flex: none; max-width: 55%; font: 500 13px/1.3 var(--font-ui); color: var(--muted); text-align: right; }
.d-aside.act { color: var(--accent-text); font-weight: 600; }
.d-aside b { font-weight: 600; color: var(--ink); }
.d-sum { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 24px; }
.d-label { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 28px; padding-bottom: 6px; box-sizing: border-box; border-bottom: 1px solid var(--hairline); }
.d-label h2 { font: 600 var(--fs-label)/1.2 var(--font-ui); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.d-more { display: inline-flex; align-items: center; gap: 2px; min-height: var(--control); margin: -10px 0 -6px; font: 600 13px/1 var(--font-ui); color: var(--accent-text); text-decoration: none; white-space: nowrap; }
.d-more:hover { text-decoration: underline; text-underline-offset: 3px; }
button.d-more { padding: 0; background: none; border: 0; cursor: pointer; }
/* Rows */
.d-rows { list-style: none; margin: 0; padding: 0; }
.d-row { display: flex; align-items: center; gap: 14px; min-height: var(--control); padding: 14px 0; box-sizing: border-box; border-bottom: 1px solid var(--hairline); color: var(--ink); text-decoration: none; }
a.d-row:hover .t, a.d-row:focus-visible .t, button.d-row:hover .t { color: var(--accent-text); }
button.d-row { width: 100%; margin: 0; background: none; border: 0; border-bottom: 1px solid var(--hairline); font: inherit; text-align: left; cursor: pointer; }
.d-rb { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.d-rb.line { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0 10px; }
.d-row .t { font: 600 var(--fs-row)/1.3 var(--font-ui); overflow-wrap: anywhere; }
.d-row .s { font: 400 var(--fs-support)/1.4 var(--font-ui); color: var(--muted); overflow-wrap: anywhere; }
.d-row .hl { color: var(--accent-text); font-weight: 500; }
.d-end { flex: none; max-width: 45%; text-align: right; font: 600 13.5px/1.3 var(--font-ui); color: var(--ink-2); }
.d-end .amt { display: block; font: 600 15.5px/1.2 var(--font-ui); font-variant-numeric: var(--figures-numeric); color: var(--ink); }
.d-end .state { display: inline-block; }
.d-chev { flex: none; display: block; color: var(--faint); }
.d-view .state { font-size: 13px; line-height: 1.3; white-space: nowrap; }
.d-view .state-working, .d-view .state-reported, .d-view .state-waiting { font-weight: 600; }
.d-view .pd-avatar { flex: none; }
.d-view .pd-avatar.s24 { width: 24px; height: 24px; font-size: 12px; }
.d-roomy .d-row { padding: 19px 0; }
.d-compact .d-row { padding: 12px 0; }
/* Today's stripe: 3 px in the desk's colour (square: not on spec 1.3's list); a row no desk owns keeps the hairline */
.d-stripe { flex: none; align-self: stretch; width: 3px; min-height: 38px; background: var(--hairline); }
.d-stripe.sara { background: var(--agent-sara); } .d-stripe.taylor { background: var(--agent-taylor); } .d-stripe.emma { background: var(--agent-emma); }
.d-stripe.kyle { background: var(--agent-kyle); } .d-stripe.daniel { background: var(--agent-daniel); }
.d-when { flex: none; width: 64px; font: 600 13.5px/1.2 var(--font-ui); color: var(--ink-2); font-variant-numeric: var(--figures-numeric); }
.d-note { margin-top: 14px; font: 400 15px/1.45 var(--font-ui); color: var(--muted); }
.d-note.bad { color: var(--conflict); }
.d-sec > .d-note:first-child, .d-block > .d-note:first-child { margin-top: 0; }
.d-foot { margin-top: 14px; font: 400 13.5px/1.4 var(--font-ui); color: var(--muted); }
/* Buttons: the Signal pill (ink label) and the outlined one */
.d-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: var(--control); padding: 0 22px; box-sizing: border-box; border: 0; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent); font: 600 14px/1 var(--font-ui); text-decoration: none; white-space: nowrap; cursor: pointer; }
.d-btn:hover { background: var(--accent-hover); }
.d-btn.alt { background: transparent; color: var(--ink); border: 1px solid var(--hairline-strong); }
/* Home: the decisions line */
.d-decide { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 26px; padding: 20px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hairline); }
.d-decide .lead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; min-width: 0; }
.d-decide .big { font: 400 32px/1.1 var(--font-serif); color: var(--ink); }
.d-decide .big em { font-style: normal; color: var(--accent-text); }
.d-decide .big.quiet { color: var(--muted); }
.d-decide .sub { margin: 0; font: 500 13.5px/1.3 var(--font-ui); color: var(--muted); }   /* margin 0: the shell's legacy .sub (28 px under) reached it (review fix, Nov 6 2026) */
/* Approvals: the brief on the desktop (spec 1.7): the body on the left, the two 156 px buttons stacked on the right; the
   exact words open under them, full width, read-only */
.d-briefs { display: flex; flex-direction: column; gap: 14px; }
.pd-brief.d-brief { padding: 20px 22px 20px 24px; }
.d-brief .d-brow { display: flex; align-items: center; gap: 28px; }
.d-brief .d-bbody { flex: 1 1 auto; min-width: 0; }
.d-brief .hd { font-size: 13px; }
.d-brief .ti { margin-top: 11px; font: 600 18px/1.3 var(--font-ui); letter-spacing: -0.005em; }
.d-brief .fa { margin-top: 4px; font: 400 14.5px/1.45 var(--font-ui); }
.d-brief .d-acts { flex: none; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 8px; width: 156px; margin: 0; }
.d-brief .d-acts > .pd-btn { flex: none; width: 156px; height: var(--control); min-height: var(--control); padding: 0 12px; font-size: 14px; }
.d-brief .pd-how { margin-top: 8px; }
.d-brief .pd-links { margin-top: 2px; }
.d-brief .pd-words { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.d-brief .v2b-form, .d-brief .pd-ask { margin-top: 16px; }
.d-brief .v2b-form .pd-acts, .d-brief .pd-ask .pd-acts { max-width: 360px; }
.d-brief.done .ti { color: var(--muted); }
/* Approvals' side: how it works, in numbered steps (the counter in the serif, Signal) */
.d-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.d-step { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.d-step::before { counter-increment: s; content: counter(s); flex: none; width: 22px; font: 400 26px/1 var(--font-serif); color: var(--accent-text); }
.d-step .t { display: block; font: 600 14.5px/1.3 var(--font-ui); }
.d-step .s { display: block; margin-top: 3px; font: 400 13.5px/1.45 var(--font-ui); color: var(--muted); }
/* Stats (Sara's week) */
.d-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.d-stats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.d-stat { padding: 20px 0 0; min-width: 0; }
.d-stat + .d-stat { padding-left: 18px; border-left: 1px solid var(--hairline); }
.d-stat b { display: block; font: 400 46px/1 var(--font-serif); font-variant-numeric: var(--figures-numeric); color: var(--ink); }
.d-stat span { display: block; margin-top: 6px; font: 500 12.5px/1.35 var(--font-ui); color: var(--muted); }
/* Taylor's estimate table and Emma's matrix: header cells are the uppercase labels */
.d-th { font: 600 var(--fs-label)/1.2 var(--font-ui); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.d-tr { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.6fr) 120px; align-items: center; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--hairline); color: var(--ink); text-decoration: none; }
.d-tr.d-thead { padding: 12px 0 10px; }
.d-tr .item { font: 600 15px/1.3 var(--font-ui); overflow-wrap: anywhere; }
.d-tr .src { display: flex; align-items: baseline; gap: 8px; font: 400 13.5px/1.4 var(--font-ui); color: var(--muted); overflow-wrap: anywhere; min-width: 0; }
.d-tr .src::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); transform: translateY(-2px); }
.d-tr .src.unknown { color: var(--accent-text); font-weight: 500; }
.d-tr .src.unknown::before { background: var(--accent); }
.d-tr .num { text-align: right; font: 600 15.5px/1.2 var(--font-ui); font-variant-numeric: var(--figures-numeric); }
.d-tr .num.unknown { color: var(--accent-text); }
.d-tr .r { text-align: right; }
a.d-tr:hover .item { color: var(--accent-text); }
.d-total { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; margin-top: -1px; padding-top: 18px; border-top: 1.5px solid var(--ink); }
.d-total .v { font: 400 40px/1 var(--font-serif); font-variant-numeric: var(--figures-numeric); color: var(--ink); }
.d-total .v.quiet { color: var(--muted); }
.d-total .v.unknown, .pd-total .v.unknown { color: var(--accent-text); }   /* a withheld total is Unknown, in Signal, with its reason (spec 1.5) */
.d-total .why { flex: 1 0 100%; text-align: right; font: 400 13.5px/1.4 var(--font-ui); color: var(--muted); }
.d-quote { padding-top: 14px; font: italic 400 19px/1.4 var(--font-serif); color: var(--ink-2); }
.d-matrix .d-tr { grid-template-columns: minmax(0, 1.6fr) 84px 110px minmax(0, 1fr); gap: 16px; padding: 27px 0; }   /* the Emma mock's 27 px (.page:has(.matrix)) */
.d-matrix .d-tr.d-thead { padding: 12px 0 10px; }
.d-matrix .c { font: 500 14.5px/1.2 var(--font-ui); font-variant-numeric: var(--figures-numeric); color: var(--ink-2); }
.d-matrix .sub { display: block; margin: 3px 0 0; font: 400 13px/1.35 var(--font-ui); color: var(--muted); }   /* margin: the legacy .sub's 28 px no longer leaks in (review fix, Nov 6 2026) */
.d-matrix .r .state { white-space: normal; }   /* "Nobody invited" wraps in its cell at 1280 rather than run past the column */
.d-pips { display: flex; flex-wrap: wrap; gap: 5px; }
.d-pips i { display: block; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--hairline-strong); }
.d-pips i.in { background: var(--agent-emma); border-color: var(--agent-emma); }
/* Brain: the tools and the facts */
.d-tooltile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: var(--field); color: var(--ink-2); font: 600 15px/1 var(--font-ui); }   /* square: spec 1.3 rounds only Kyle's image tiles */
.d-fact { display: flex; align-items: baseline; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--hairline); color: var(--ink); text-decoration: none; }
a.d-fact:hover .l { color: var(--accent-text); }
.d-fact b { flex: none; min-width: 86px; font: 400 38px/1 var(--font-serif); font-variant-numeric: var(--figures-numeric); color: var(--accent-text); }
.d-fact .l { display: flex; flex-direction: column; gap: 2px; font: 500 14.5px/1.35 var(--font-ui); color: var(--ink-2); }
.d-fact .l small { font: 400 13px/1.35 var(--font-ui); color: var(--muted); }
.d-privacy { display: flex; gap: 14px; align-items: flex-start; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--ink); }
.d-privacy svg { flex: none; margin-top: 4px; color: var(--ink); }
.d-privacy p { font: 400 22px/1.3 var(--font-serif); color: var(--ink); }
/* Kyle and Sara on the desktop: the head, the command bar in a band that stays at the top while the conversation scrolls,
   then the conversation (main) and the side summary. Their composers keep their ids and the agent screens' rules; here they
   are the command bar. */
.d-agent.sc-screen { padding: 0; }
.d-agent > .sc-sara { gap: 0; }
.d-agent .d-band { position: sticky; top: 0; z-index: 4; margin-top: 18px; padding: 8px 0 12px; background: var(--ground); }
.d-agent .ag-composer, .d-agent .ky-composer { position: static; margin: 0; padding: 0; border-top: 0; background: transparent; display: flex; flex-direction: column; gap: 8px; }
.d-agent .ky-composer > #ky-tray { order: 3; }
.d-agent .ky-composer > .error, .d-agent .ag-composer > .error { margin: 0; padding-left: 22px; }
.d-agent .d-cmd.ag-row-in, .d-agent .d-cmd.ky-row-in { gap: 10px; padding-left: 14px; }
.d-agent .d-cmd input { height: 44px; padding: 0 8px; font-size: 15.5px; background-color: var(--cmd-fill) !important; }
.d-agent .ky-plus { width: 44px; min-width: 44px; height: 44px; border-color: rgba(23, 21, 18, .24); background: transparent; color: #171512; }   /* the bar is a light pill in both themes: its + is ink on it */
.d-agent .d-cols { margin-top: 28px; }
/* Kyle's project on the desktop is the section title (spec 1.6 (3): the switcher is the top bar's, F5): the name in the
   serif, the address and the files line beside it on one line, the 1 px ink rule under; no chevron (review fix, Nov 6
   2026: it read as a second switcher under the top bar's and grew to three lines). The name still opens his own sheet
   (his new project and his files live there). */
.d-agent .ky-pick { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; border: 0; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.d-agent .ky-proj { flex: 1 1 auto; width: auto; min-height: var(--control); padding: 0; min-width: 0; }
.d-agent .ky-proj > svg { display: none; }
.d-agent .ky-proj .w { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 2px 14px; }
.d-agent .ky-proj .n { font: 400 var(--fs-sec)/1.05 var(--font-serif); letter-spacing: -0.005em; }
.d-agent .ky-proj .a { margin-top: 0; font: 500 13px/1.3 var(--font-ui); color: var(--muted); }
.d-agent .ky-line { margin: 0; flex: none; }
.d-agent #kyle-thread, .d-agent .ag-thread { margin-top: 20px; }
.d-agent #kyle-thread > *, .d-agent .ag-thread > * { scroll-margin-top: 110px; scroll-margin-bottom: 24px; }
.d-agent img.ky-tile { display: block; max-width: 100%; max-height: 250px; object-fit: cover; }
/* The project switcher in the top bar (ticket F5): the job and its type, a chevron; a panel with the active jobs, a filter
   box over six, New project at the foot. An overlay with a 1 px edge, no shadow. */
.d-switch { position: relative; min-width: 0; }
.d-switch-btn { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: min(460px, 42vw); min-height: var(--control); padding: 0 4px; background: none; border: 0; color: var(--ink); font: 600 13.5px/1.2 var(--font-ui); cursor: pointer; }
.d-switch-btn .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-switch-btn .ty { flex: none; font-weight: 500; color: var(--muted); white-space: nowrap; }
.d-switch-btn svg { flex: none; color: var(--muted); }
.d-switch-btn:hover .n { color: var(--accent-text); }
.d-switch-pop { position: absolute; left: 0; top: calc(100% + 4px); z-index: 45; width: 380px; max-width: calc(100vw - 300px); max-height: 60vh; overflow: auto; padding: 6px 0; box-sizing: border-box;
  background: var(--surface); color: var(--ink); border: 1px solid var(--control-border); }
.d-switch-pop[hidden] { display: none; }
.d-switch-q { display: block; width: calc(100% - 24px); margin: 4px 12px 6px; box-sizing: border-box; min-height: var(--control); padding: 0 12px; border: 1px solid var(--control-border); font: 400 15px/1 var(--font-ui); }
.d-switch-list { list-style: none; margin: 0; padding: 0; }
.d-switch-list li[hidden] { display: none; }
.d-switch-opt { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 16px; box-sizing: border-box; color: var(--ink); text-decoration: none; }
.d-switch-opt .n { flex: 1 1 auto; min-width: 0; font: 600 14px/1.3 var(--font-ui); overflow-wrap: anywhere; }
.d-switch-opt .st { flex: none; font: 500 12.5px/1.3 var(--font-ui); color: var(--muted); text-align: right; }
.d-switch-opt svg { flex: none; color: var(--accent-text); }
.d-switch-opt:hover, .d-switch-opt:focus-visible, .d-switch-new:hover, .d-switch-new:focus-visible { background: var(--surface-hover); outline-offset: -3px; }
.d-switch-opt:hover .st, .d-switch-opt:focus-visible .st { color: var(--ink-2); }   /* muted is 4.3:1 on the hover fill; ink-2 is 8:1 (review fix, Nov 6 2026) */
.d-switch-opt[aria-current="true"] .n { color: var(--accent-text); }
.d-switch-none { margin: 8px 16px; font: 400 14px/1.4 var(--font-ui); color: var(--muted); }
.d-switch-none[hidden] { display: none; }
.d-switch-new { display: flex; align-items: center; gap: 8px; min-height: var(--control); margin-top: 4px; padding: 0 16px; border-top: 1px solid var(--hairline); color: var(--accent-text); font: 600 14px/1 var(--font-ui); text-decoration: none; }
.d-empty .d-decide-line { font: 400 32px/1.15 var(--font-serif); color: var(--ink); }
.d-empty .d-note { margin-top: 8px; }
.d-prows .pd-row { min-height: var(--control); padding: 14px 0; }
.d-prows .pd-row .n { font-size: 15px; line-height: 1.3; }
.d-prows .pd-row .s { font-size: 13.5px; }
.d-view .state-ink { color: var(--ink-2); }
.d-agent .d-cmd:has(input:disabled) { background: #E4DED4; }   /* the bar off (no project chosen, not switched on): one fill, box and pill alike */
/* Jobs and Settings on the desktop (decision 6): the page head, then their sections in the Wave 1 section style (a serif
   title at 28 over the 1 px ink rule) */
.d-paper > .d-phead + .sc-head { padding-top: 40px; }
.d-paper .sc-head h2 { font-size: var(--fs-sec); line-height: 1.05; }
/* The phone's Jobs and Settings section titles at the deck's 26 px serif (review fix, Nov 6 2026: they were 20) */
@media (max-width: 860px) { .sc-jobs .sc-head h2, .sc-more .sc-head h2 { font-size: 26px; line-height: 32px; } }
/* Home's Active jobs: one line per job (the name, the due date, the stage), the name cut short rather than wrapping */
#home-jobs .d-rb.line { flex-wrap: nowrap; }
#home-jobs .d-rb.line .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
#home-jobs .d-rb.line .s { flex: none; white-space: nowrap; }
.d-paper .sc-head + .ruler-rule { height: 1px; margin-top: 6px; }
/* The head's letter while a question is worked on (it sways) or answered (it nods): the thread's .working line style never
   reaches it, so the letter stays centred at the head's size */
.d-ahead .pd-avatar.s64.working, .d-ahead .pd-avatar.s64.talking { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 0; padding: 0; border-left: 0;
  font-size: 25px; color: var(--on-agent); }
#sara-side > * + * { margin-top: 34px; }   /* her side's sections, spaced as the columns' own blocks are */
.d-agent .ky-plus:disabled { color: #8A8378; border-color: rgba(23, 21, 18, .14); cursor: not-allowed; }

/* The chat dock (Jose's client-app tasks, Nov 6 2026; client-agents/chat-dock.js): one dock pinned under Home and the
   agent desks. The row is the command bar's pill (.d-cmd) with the agent's face at its start and, on Home, who to ask;
   the answer above it is paper on a hairline (hairlines, not cards: the approval brief stays the only raised card).
   The face has three states: idle breathes, working wears a turning halo, talking pulses when the answer lands. */
.cd-dock { position: sticky; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding: 10px 0 12px; background: var(--ground); }
/* The page fills the window, so the dock sits at its bottom even when the page is short (Sara's composer does the same) */
.v2-work > main:has(.cd-dock) { display: flex; flex-direction: column; }
.v2-work > main:has(> * > .cd-dock) > :has(> .cd-dock) { flex: 1 1 auto; display: flex; flex-direction: column; }
:has(> .cd-dock) > :nth-last-child(2) { margin-bottom: 34px; }
.cd-form { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.d-cmd.cd-row { padding-left: 6px; gap: 10px; }
.d-cmd.cd-row input { font-size: 16px; color: #171512; background: transparent; }
.d-cmd.cd-row:not(.typed) button[data-send]:not(:disabled) { background: #171512; color: #F4EFE7; }   /* ink until there are words (one accent per page) */
.d-cmd.cd-row:not(.typed) button[data-send]:not(:disabled):hover { background: #2B2723; }
.cd-err { margin: 0; padding-left: 22px; font: 500 15px/1.4 var(--font-ui); color: var(--conflict); }
.cd-note { margin: 0; padding-left: 22px; font: 400 13px/1.4 var(--font-ui); color: var(--muted); }
.cd-err[hidden], .cd-note[hidden], .cd-panel[hidden], .cd-stop[hidden] { display: none; }
.cd-dock .sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cd-face { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--agent-sara); color: var(--on-agent); }
.cd-face[data-seat="taylor"] { background: var(--agent-taylor); } .cd-face[data-seat="emma"] { background: var(--agent-emma); }
.cd-face[data-seat="kyle"] { background: var(--agent-kyle); } .cd-face[data-seat="daniel"] { background: var(--agent-daniel); }
.cd-face .cd-img { display: block; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.cd-face .cd-letter { font: 600 17px/1 var(--font-ui); }
.cd-face::after { content: ''; position: absolute; inset: -4px; border: 2px solid transparent; border-radius: 50%; pointer-events: none; }
.cd-face[data-state="working"]::after { border-top-color: var(--accent); border-right-color: var(--accent); }
.cd-face[data-state="talking"]::after { border-color: var(--accent); }
.cd-pick { position: relative; flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 12px 0 2px; border-right: 1px solid rgba(23, 21, 18, .14); font: 600 15px/1 var(--font-ui); color: #171512; }
.cd-pick:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.cd-select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; font-size: 16px; cursor: pointer; }
.cd-stop { flex: none; height: 44px; min-height: 44px; padding: 0 18px; border: 1px solid rgba(23, 21, 18, .3); border-radius: var(--r-pill); background: transparent; color: #171512; font: 600 14px/1 var(--font-ui); cursor: pointer; }
.cd-panel { display: flex; flex-direction: column; gap: 6px; max-height: 42vh; overflow: auto; padding: 12px 18px 6px; background: var(--paper); border: 1px solid var(--hairline); }
.cd-ph { display: flex; align-items: center; gap: 10px; }
.cd-who { font: 600 14px/1.3 var(--font-ui); }
.cd-st { font: 400 13px/1.3 var(--font-ui); color: var(--muted); }
.cd-st[data-s="away"] { color: var(--waiting); }
.cd-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; margin: -8px -12px -8px auto; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.cd-q { margin: 0; font: 400 14px/1.45 var(--font-ui); color: var(--muted); }
.cd-a { margin: 0; font: 400 16px/1.5 var(--font-ui); white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; }
.cd-open { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font: 500 14px/1.3 var(--font-ui); color: var(--accent-readable); text-underline-offset: 3px; }
.cd-dots { display: flex; align-items: center; gap: 5px; height: 24px; }
.cd-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .cd-face[data-state="idle"] { animation: cd-breathe 4.5s ease-in-out infinite; }
  .cd-face[data-state="working"]::after { animation: bnz-spin 1.1s linear infinite; }
  .cd-face[data-state="talking"] { animation: cd-pulse 1s ease-in-out infinite; }
  .cd-face[data-state="talking"]::after { animation: cd-ring 1s ease-out infinite; }
  .cd-dots span { animation: bnz-dot 1.2s ease-in-out infinite; }
  .cd-dots span:nth-child(2) { animation-delay: .15s; } .cd-dots span:nth-child(3) { animation-delay: .3s; }
  /* Sara's and Kyle's own faces breathe while idle too, so every agent face has the same three states */
  .sc-sara img.ag-face:not(.working):not(.talking), .sc-sara img.kyle-face:not(.working):not(.talking) { animation: cd-breathe 4.5s ease-in-out infinite; }
}
@keyframes cd-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes cd-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes cd-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.3); } }
@media (max-width: 860px) {
  .cd-dock { padding: 8px 0 10px; }
  :has(> .cd-dock) > :nth-last-child(2) { margin-bottom: 24px; }
  .cd-note, .cd-err { padding-left: 14px; }
  .cd-panel { max-height: 38vh; padding: 10px 14px 4px; }
  .v2-work > main > .cd-dock { padding-left: 20px; padding-right: 20px; }   /* Home's dock sits outside the page's own gutter */
  /* Outside a job the dock rides on the four-word bar, never under it; while the keyboard is up the bar steps aside */
  .app.v2[data-in-job="false"] .cd-dock { bottom: calc(60px + env(safe-area-inset-bottom)); }
  .app.v2.typing[data-in-job] .cd-dock { bottom: 0; }
}

/* Home: Your business (Jose's client-app tasks, Nov 6: 2.2; client-ui/home-metrics.js). Cells on hairlines, not raised
   cards (the approval brief stays the only one): the label, one value in the serif, what it means, how complete the data
   is (a dot in the state colour) apart from the health word, then the next step. A missing value reads "No data". */
.hm { margin-top: 30px; }
.hm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--hairline); border-block: 1px solid var(--hairline); }
.hm-grid + .hm-grid { border-top: 0; }
.hm-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hm-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 22px 16px; background: var(--ground); }
.hm-grid > .hm-card:first-child { padding-left: 0; }
.hm-label { margin: 0; font: 500 14px/1.3 var(--font-ui); letter-spacing: 0; color: var(--muted); }   /* sentence case: capitals are for eyebrows and labels only (spec 1.2) */
.hm-value { margin: 4px 0 0; font: 400 40px/1.05 var(--font-serif); letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hm-value.none { font-size: 30px; color: var(--muted); }
.hm-interp { margin: 0; font: 400 14px/1.4 var(--font-ui); color: var(--ink); }
.hm-tags { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; font: 500 13px/1.35 var(--font-ui); }
.hm-cov { white-space: nowrap; }
.hm-cov::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.hm-cov[data-c="ready"] { color: var(--checked); }
.hm-cov[data-c="partial"], .hm-cov[data-c="stale"] { color: var(--waiting); }
.hm-cov[data-c="missing"] { color: var(--muted); }
.hm-health { color: var(--muted); white-space: nowrap; }
.hm-act { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; font: 600 14px/1.3 var(--font-ui); color: var(--accent-readable); text-decoration: none; }
.hm-act:hover { text-decoration: underline; text-underline-offset: 3px; }
.hm-plan { margin: auto 0 0; padding-top: 10px; font: 400 13px/1.35 var(--font-ui); color: var(--muted); }
@media (max-width: 1180px) and (min-width: 861px) {
  .hm-grid, .hm-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-grid > .hm-card:nth-child(odd) { padding-left: 0; }
  .hm-grid-5 > .hm-card:last-child { grid-column: 1 / -1; }
}
/* The phone: one row each, the value on the right */
.hm-row .hm-tags { margin-top: 4px; }
.hm-row .end { align-self: flex-start; }
.hm-v { font: 600 16px/1.3 var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-v.none { font-weight: 500; color: var(--muted); }