/* Maxbox shared web client. Implements docs/ui-design-system.md.
   Order: tokens -> reset -> typography -> components -> surfaces -> pages -> responsive.
   Each section is a cascade layer in that order, so a later section wins over an earlier one
   and no section restyles an earlier selector; [hidden] stays outside the layers so it always
   wins without !important. */

@layer reset, typography, components, surfaces, pages, responsive;

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light;
  --app-height: 100dvh;
  --app-top: 0px;
  --bottom-navigation-height: 0px;

  /* Atelier surfaces and ink; explicit dark values follow */
  --paper: #f0f0e8;
  --grid: rgba(49, 91, 78, .055);
  --grid-major: rgba(49, 91, 78, .1);
  --grid-image: linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  --grid-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  --grid-position: -1px -1px;
  --surface: #fafbf6;
  --panel: #dee5d9;
  --line: #809184;
  --line-strong: #708275;
  --ink: #213c34;
  --muted: #53685e;
  --faint: #5f7066;
  --accent: #315b4e;
  --accent-strong: #213c34;
  --accent-ink: #ffffff;
  --accent-soft: #dee5d9;
  --eyebrow: #213c34;
  --danger: #8f3a30;
  --brand-dark: #315b4e;
  --danger-dark: #8f3a30;
  --label-ink: #ffffff;
  --map-plate: rgba(255, 255, 255, .82); /* the attribution plate on a road image, light in both themes like the image */
  --map-plate-ink: #3c4043;
  --scrim: rgba(35, 39, 31, .32);
  --paper-clear: rgba(240, 240, 232, 0); /* --paper at zero alpha: the far end of a scroll fade */
  --fade-to-paper: linear-gradient(to right, var(--paper-clear), var(--paper)); /* a scroll-row edge */
  /* The underline under a page's section header, fading out to the right; --line-strong is theme-paired. */
  --section-rule: linear-gradient(to right, var(--line-strong), transparent);
  --surface-clear: rgba(250, 251, 246, 0); /* --surface at zero alpha */
  --panel-clear: rgba(222, 229, 217, 0); /* --panel at zero alpha */
  --fade-to-surface: linear-gradient(to right, var(--surface-clear), var(--surface) var(--s5)); /* "More…" cutting into a teaser's last line */
  --fade-to-panel: linear-gradient(to right, var(--panel-clear), var(--panel) var(--s5)); /* the same on a hovered card */

  /* status tones: background / foreground */
  --tone-neutral-bg: #e9e6df;  --tone-neutral-fg: #53685e;
  --tone-info-bg: #dce6ec;     --tone-info-fg: #2f5568;
  --tone-working-bg: #e4e6ee;  --tone-working-fg: #414a75;
  --tone-attention-bg: #f4e7d0;--tone-attention-fg: #7a4f12;
  --warp-core: #ffffff;  --warp-glow: rgba(30, 136, 255, .9);  --warp-haze: rgba(30, 136, 255, .16); /* the time warp's electric white and blue */
  --warp-line: rgba(30, 136, 255, .55); /* the graph paper's minor lines as the warp passes */
  --warp-grid-image: linear-gradient(var(--warp-glow) 1px, transparent 1px),
    linear-gradient(90deg, var(--warp-glow) 1px, transparent 1px),
    linear-gradient(var(--warp-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--warp-line) 1px, transparent 1px);
  --warp-wave: rgba(30, 136, 255, .42); /* the shockwave's soft blue */
  --shadow-warp-flash: 0 0 0 1.5px var(--warp-core), 0 0 14px 3px var(--warp-glow);
  --shadow-warp-ring: 0 0 110px 30px var(--warp-wave), inset 0 0 110px 30px var(--warp-wave);
  --tier-watch-ink: #111111;  --tier-watch-bg: #efe4cc; /* Dates: Watch pill, black on beige */
  --tone-success-bg: #dee5d9;  --tone-success-fg: #24564a;
  --tone-danger-bg: #f3dfda;   --tone-danger-fg: #8f3a30;

  /* shape */
  --r1: 4px;
  --r2: 8px;
  --r3: 999px;
  --r4: 28px;
  --r5: 40px;
  --r6: 12px;

  /* space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* type */
  --display-font: "Inter", var(--font);
  --welcome-green: #213c34;
  --welcome-paper: #f0f0e8;
  --welcome-sage: #bbccb0;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, Consolas, "SF Mono", monospace;
  --math: "Cambria Math", "STIX Two Math", serif;
  --t11: 11px; --t12: 12px; --t13: 13px; --t14: 14px; --t15: 15px; --t16: 16px; --t17: 17px; --t20: 20px; --t28: 28px;
  --t18: 18px; --t21: 21px; --t22: 22px; --t25: 25px; --t26: 26px; --t34: 34px; --t38: 38px; --t44: 44px; --t47: 47px; --t48: 48px; --t52: 52px; --t76: 76px; --t94: 94px;

  /* depth */
  --shadow-rest: 0 1px 2px rgba(35, 39, 31, .06);
  --shadow-raise: 0 12px 32px rgba(35, 39, 31, .16);
  --shadow-recess: 0 8px 0 #dee5d9;
  --shadow-focus: 0 0 0 3px var(--accent);
  --shadow-nav: 3px 0 0 var(--ink);

  /* layout */
  --read-width: 760px;
  --list-width: 1120px;
  --prose-width: 82ch; /* a comfortable line of Summary and conversation prose on the page */
  --sheet-width: 760px;
  --reading-sheet-width: 90vw; /* agent reports, Max summaries and reports, centred above the page */
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --welcome-green: #213c34;
  --welcome-paper: #f0f0e8;
  --welcome-sage: #bbccb0;
  --paper: #121f1c;
  --grid: rgba(240, 240, 232, .045);
  --grid-major: rgba(240, 240, 232, .08);
  --surface: #1b2d28;
  --panel: #263e33;
  --line: #6d897a;
  --line-strong: #89a18f;
  --ink: #ecefe2;
  --muted: #b6c6b9;
  --faint: #a3b5a8;
  --accent: #bbccb0;
  --accent-strong: #d0ddc7;
  --accent-ink: #1c3026;
  --accent-soft: #304a3d;
  --eyebrow: #ecefe2;
  --danger: #efb3a5;
  --brand-dark: #315b4e;
  --danger-dark: #8f3a30;
  --label-ink: #ffffff;
  --map-plate: rgba(255, 255, 255, .82); /* the attribution plate on a road image, light in both themes like the image */
  --map-plate-ink: #3c4043;
  --scrim: rgba(0, 0, 0, .45);
  --paper-clear: rgba(18, 31, 28, 0);
  --surface-clear: rgba(27, 45, 40, 0);
  --panel-clear: rgba(38, 62, 51, 0);
  --tone-neutral-bg: #2b3e35;  --tone-neutral-fg: #b6c6b9;
  --tone-info-bg: #233d48;     --tone-info-fg: #b6d8e8;
  --tone-working-bg: #33394d;  --tone-working-fg: #c6cbec;
  --tone-attention-bg: #453820;--tone-attention-fg: #e7c18a;
  --warp-core: #f4fbff;  --warp-glow: rgba(96, 196, 255, .9);  --warp-haze: rgba(96, 196, 255, .14);
  --warp-line: rgba(244, 251, 255, .5);
  --warp-wave: rgba(96, 196, 255, .38);
  --tier-watch-ink: #111111;  --tier-watch-bg: #e6d9bd;
  --tone-success-bg: #263e33;  --tone-success-fg: #b3d6b7;
  --tone-danger-bg: #492d29;   --tone-danger-fg: #efb3a5;
  --shadow-rest: 0 1px 2px rgba(0, 0, 0, .2);
  --shadow-raise: 0 12px 32px rgba(0, 0, 0, .4);
  --shadow-recess: 0 8px 0 #090e0c;
}

/* Dev cells (*.killarney.llc): umber and orange in place of green, so a test bed is plain at a glance. Tokens only,
   and every token here is also in the dark block below, which outranks this one. The pages set data-cell-theme. */
:root[data-cell-theme="dev"] {
  --paper: #f3ece2;
  --grid: rgba(122, 62, 20, .055);
  --grid-major: rgba(122, 62, 20, .1);
  --surface: #fcf8f2;
  --panel: #efdfcb;
  --line: #9a7f66;
  --line-strong: #866c54;
  --ink: #3f2413;
  --muted: #6e5140;
  --faint: #77594a;
  --accent: #9a4a14;
  --accent-strong: #3f2413;
  --accent-ink: #ffffff;
  --accent-soft: #efdfcb;
  --eyebrow: #3f2413;
  --brand-dark: #9a4a14;
  --welcome-green: #4a2a14;
  --welcome-paper: #f3ece2;
  --welcome-sage: #e3bf95;
  --paper-clear: rgba(243, 236, 226, 0);
  --surface-clear: rgba(252, 248, 242, 0);
  --panel-clear: rgba(239, 223, 203, 0);
  --shadow-recess: 0 8px 0 #efdfcb;
}

:root[data-cell-theme="dev"][data-theme="dark"] {
  --paper: #1f1610;
  --grid: rgba(240, 240, 232, .045);
  --grid-major: rgba(240, 240, 232, .08);
  --surface: #2c2017;
  --panel: #3b2b1e;
  --line: #93775f;
  --line-strong: #ab917a;
  --ink: #f2ebe0;
  --muted: #d0bfae;
  --faint: #bfac9a;
  --accent: #f0b37a;
  --accent-strong: #f6cba0;
  --accent-ink: #2e1a0b;
  --accent-soft: #4a3322;
  --eyebrow: #f2ebe0;
  --brand-dark: #9a4a14;
  --welcome-green: #4a2a14;
  --welcome-paper: #f3ece2;
  --welcome-sage: #e3bf95;
  --paper-clear: rgba(31, 22, 16, 0);
  --surface-clear: rgba(44, 32, 23, 0);
  --panel-clear: rgba(59, 43, 30, 0);
  --shadow-recess: 0 8px 0 #0e0905;
}

/* ----------------------------------------------------------------- reset */
/* Outside the layers so that a hidden element never shows, whatever its component sets. */
[hidden] { display: none; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { position: fixed; inset: var(--app-top) 0 auto; height: var(--app-height); background-color: var(--paper); color: var(--ink); font: 400 var(--t15)/1.55 var(--font); }
  /* Only application fields carry the static grid; foreground surfaces stay solid. */
  body, .page, .chat, .model-loading, .auth-gate {
    background-image: var(--grid-image);
    background-size: var(--grid-size);
    background-position: var(--grid-position);
  }
  button, input, select, textarea { color: inherit; font: inherit; }
  button { cursor: pointer; }
  button, [role="button"], summary { touch-action: manipulation; }
  summary { cursor: pointer; list-style: none; }
  summary::-webkit-details-marker { display: none; }
  a { color: var(--accent); }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea {
    min-height: 36px; padding: var(--s2) var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r1);
    background: var(--surface); color: var(--ink); font-size: var(--t14); line-height: 1.3;
  }
  input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
  select { padding-block: 0; }
  textarea { resize: vertical; line-height: 1.45; }
  input[readonly] { background: var(--panel); color: var(--muted); }
  input:disabled, select:disabled, textarea:disabled { opacity: .5; }
  time { font-variant-numeric: tabular-nums; }
  @keyframes pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
  @keyframes spin { to { transform: rotate(360deg); } }
}

/* ------------------------------------------------------------ typography */
@layer typography {
  @font-face { font-family: "Inter"; src: url("/inter.woff2") format("woff2");
    font-weight: 100 900; font-style: normal; font-display: fallback; } /* preloaded by index.html: no reflow on arrival */

  .page-title { display: flex; align-items: center; gap: 0.35em; margin: 0; font-size: var(--t28); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
  .page-title > span { min-width: 0; }
  .sheet-title { margin: 0; font-size: var(--t20); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
  /* Titles and their preview line stay on one line each and truncate, so tiles keep one height. */
  .row-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; margin: 0; font-size: var(--t15); font-weight: 600; line-height: 1.35; }
  .row-main > .meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .meta { margin: 0; color: var(--muted); font-size: var(--t12); font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
  .eyebrow { margin: 0; color: var(--eyebrow); font-size: var(--t11); font-weight: 600; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; }

  /* Max's documents */
  .assistant-body { color: var(--ink); font-size: var(--t16); line-height: 1.65; overflow-wrap: anywhere; }
  .assistant-body > :first-child { margin-top: 0; }
  .assistant-body > :last-child { margin-bottom: 0; }
  .assistant-body p { margin: 0 0 1em; }
  .assistant-body h1, .assistant-body h2, .assistant-body h3, .assistant-body h4, .assistant-body h5, .assistant-body h6 { margin: 1.35em 0 .55em; font-weight: 600; line-height: 1.3; }
  .assistant-body h1 { font-size: 1.5em; }
  .assistant-body h2 { font-size: 1.25em; }
  .assistant-body h3 { font-size: 1.1em; }
  .assistant-body h4, .assistant-body h5, .assistant-body h6 { font-size: 1em; }
  .assistant-body ul, .assistant-body ol { margin: .6em 0 1em; padding-left: 1.55em; }
  .assistant-body ol { list-style: decimal outside; }
  .assistant-body li { margin: .25em 0; }
  .assistant-body blockquote { margin: 1em 0; padding-left: var(--s3); border-left: 3px solid var(--eyebrow); color: var(--muted); }
  .assistant-body a { color: var(--accent); text-decoration: none; }
  .assistant-body a:hover { text-decoration: underline; }
  .assistant-body a.citation-chip { display: inline-flex; max-width: 17em; margin: 0 .08em; padding: 1px 6px; vertical-align: .08em; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r3); background: var(--panel); color: var(--muted); font-size: .7em; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
  .assistant-body a.citation-chip:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
  .citation-missing { color: var(--muted); font-size: .85em; }
  .assistant-body code { padding: .15em .35em; border-radius: var(--r1); background: var(--panel); font-family: var(--mono); font-size: .9em; }
  /* A Markdown table sits in a .table-scroll frame that scrolls sideways; cells keep whole words, so a wide table
     scrolls instead of widening its panel or squeezing its columns to a letter. */
  .assistant-body .table-scroll { max-width: 100%; margin: 1em 0; overflow-x: auto; overscroll-behavior-x: contain; }
  .assistant-body .table-scroll:focus-visible { outline-offset: 0; }
  .assistant-body table { border-collapse: collapse; }
  .assistant-body th, .assistant-body td { min-width: 4em; padding: var(--s2) var(--s3); border: 1px solid var(--line); text-align: left; font-variant-numeric: tabular-nums; overflow-wrap: normal; word-break: normal; }
  .assistant-body th { background: var(--panel); }
  .code-block { margin: 1em 0; overflow: hidden; border-radius: var(--r2); background: var(--ink); color: var(--paper); }
  .code-header { display: flex; justify-content: space-between; padding: var(--s2) var(--s3); color: var(--paper); font-size: var(--t12); }
  .code-header button { padding: 0; border: 0; background: transparent; color: var(--paper); font-size: var(--t12); }
  .code-block pre { margin: 0; padding: var(--s3); overflow-x: auto; font-family: var(--mono); white-space: pre; }
  .code-block code { padding: 0; background: transparent; font-family: var(--mono); }
  .math-inline { display: inline-block; margin: 0 .08em; font-family: var(--math); }
  .math-block { max-width: 100%; margin: 1em 0; padding: var(--s2) var(--s3); overflow-x: auto; border-left: 3px solid var(--eyebrow); background: var(--panel); font-family: var(--math); }
  .math-block math { margin: 0; white-space: nowrap; }
}

/* ------------------------------------------------------------ components */
@layer components {
  /* Icon: one sprite, current colour */
  .icon { display: inline-block; width: 18px; height: 18px; flex: 0 0 auto; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  /* A page title starts with its main tab's icon, sized to the title's text (here, after .icon, in its layer). */
  .page-title > .icon { flex: none; width: 1em; height: 1em; stroke-width: 2; }

  /* Button */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r1); background: transparent; color: var(--ink); font-size: var(--t13); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; }
  .btn-primary { border-radius: var(--r3); border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
  .btn-primary:hover:not(:disabled) { border-color: var(--accent-strong); background: var(--accent-strong); }
  .btn-secondary { border-color: var(--line-strong); background: var(--surface); }
  .btn-secondary:hover:not(:disabled) { background: var(--panel); }
  .btn-quiet { color: var(--accent); }
  .btn-quiet:hover:not(:disabled) { background: var(--panel); }
  .btn-icon { width: 44px; padding: 0; color: var(--muted); }
  .btn-icon .icon { width: 20px; height: 20px; }
  .btn-primary.btn-icon { color: var(--accent-ink); }
  .btn-danger { color: var(--danger); }
  .btn-danger.btn-primary { border-radius: var(--r3); border-color: var(--danger); background: var(--danger); color: var(--accent-ink); }
  /* A step's review: the success fill is the theme-stable brand green with label ink (white in both themes); the
     danger outline is a 1 px danger border and danger text on the surface. */
  .btn-success { border-radius: var(--r3); border-color: var(--brand-dark); background: var(--brand-dark); color: var(--label-ink); }
  .btn-success:hover:not(:disabled) { filter: brightness(1.15); }
  .btn-danger-outline { border-radius: var(--r3); border-color: var(--danger); background: var(--surface); color: var(--danger); }
  .btn-danger-outline:hover:not(:disabled) { background: var(--tone-danger-bg); }
  .btn-sm { min-height: 32px; padding: 0 10px; }
  .btn-sm.btn-icon { width: 28px; padding: 0; }
  .btn-sm .icon { width: 16px; height: 16px; }
  .btn:disabled { opacity: .5; cursor: default; }

  /* Tones: one table, used by pills, notices, dots and calendar events */
  .pill, .notice, .status-dot, .calendar-event, .calendar-cube { --tone-bg: var(--tone-neutral-bg); --tone-fg: var(--tone-neutral-fg); }
  .tone-info { --tone-bg: var(--tone-info-bg); --tone-fg: var(--tone-info-fg); }
  .tone-working { --tone-bg: var(--tone-working-bg); --tone-fg: var(--tone-working-fg); }
  .tone-attention { --tone-bg: var(--tone-attention-bg); --tone-fg: var(--tone-attention-fg); }
  .tone-success { --tone-bg: var(--tone-success-bg); --tone-fg: var(--tone-success-fg); }
  .tone-danger { --tone-bg: var(--tone-danger-bg); --tone-fg: var(--tone-danger-fg); }

  /* Pill */
  .pill { display: inline-flex; align-items: center; gap: var(--s1); padding: 3px 9px; border: 0; border-radius: var(--r3); background: var(--tone-bg); color: var(--tone-fg); font-size: var(--t11); font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; white-space: nowrap; font-style: normal; }
  .pill-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1s ease-in-out infinite; }
  .pill .icon { width: 14px; height: 14px; }
  /* The Draft pill before approval (step chat, checkpoint sheet, summaries, update cards): blue, inline before the text
     it labels and on that text's baseline. */
  .draft-pill { vertical-align: baseline; }
  .draft-pill + span { margin-inline-start: var(--s2); }
  .status-dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--tone-fg); }

  /* Card and row */
  .card { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); }
  .list { display: grid; gap: var(--s2); }
  .message-row { min-width: 0; overflow-wrap: anywhere; }
  .message-row .row-title { white-space: normal; }
  .message-text { white-space: pre-wrap; }
  .message-reply { margin-top: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s3); }
  .message-documents { padding-left: var(--s4); }
  /* Deal cards are tall; a wider gap keeps each Deal readable as its own object. */
  #projectList, #projectArchivedList { gap: var(--s5); }
  .rows { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); }
  .rows:empty { display: none; }
  .rows > .row + .row { border-top: 1px solid var(--line); }
  .rows > .meta, .rows > .empty { padding: var(--s3) var(--s4); }
  .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); min-width: 0; padding: var(--s3) var(--s4); text-align: left; }
  .card.row { padding: var(--s3) var(--s4); }
  .row:has(> button.row-main:hover) { background: var(--panel); }
  .row-main { display: grid; flex: 1 1 200px; gap: 2px; min-width: 0; }
  button.row-main { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .row-end { display: flex; flex: 0 0 auto; align-items: center; gap: var(--s2); margin-left: auto; }
  .row-body { flex: 1 0 100%; min-width: 0; }
  .member-mail { display: grid; gap: var(--s2); }
  .member-mail .row { padding: var(--s1) 0; }
  .member-mail .row-main { overflow-wrap: anywhere; }
  .member-mail > .meta { margin: 0; }
  .mail-confirmation-page { display: grid; place-items: center; padding: var(--s4); overflow: auto; }
  .mail-confirmation-page .auth-card { overflow-wrap: anywhere; }
  .row-title-line { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s2); min-width: 0; }
  .row-title-line > .row-title { flex: 0 1 auto; }
  .row-title-line > .btn { flex: 0 0 auto; }
  .row-tools { display: inline-flex; gap: var(--s1); }
  .row .meta { overflow: hidden; text-overflow: ellipsis; }

  /* Section and page header */
  .section + .section, .section + .page-actions, .page-actions + .section { margin-top: var(--s5); }
  .section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 28px; margin-bottom: var(--s2); }
  /* Every page section header (Calendar, Needs you, Searches, Archived…) shares one thin fading underline. */
  .page .section-head { padding-bottom: var(--s1); background-image: var(--section-rule); background-position: left bottom;
    background-repeat: no-repeat; background-size: 100% 1px; }
  /* A collapsible section head (Archived): the eyebrow becomes a button with a turning chevron. */
  .section-toggle { display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px; margin: -8px 0; padding: 0 var(--s1) 0 0;
    border: 0; background: none; color: var(--eyebrow); font: inherit; cursor: pointer; }
  .section-toggle-chevron { width: 14px; height: 14px; transition: transform .15s ease; }
  .section-toggle[aria-expanded="true"] .section-toggle-chevron { transform: rotate(90deg); }
  @media (prefers-reduced-motion: reduce) { .section-toggle-chevron { transition: none; } }
  /* An empty state costs one short line under its section head, not a block. */
  .empty { margin: 0; padding: var(--s1) 0; color: var(--muted); font-size: var(--t13); }
  .page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s4); margin-bottom: var(--s5); }
  .page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

  /* Tabs */
  .tabs { display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs > button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 36px; padding: var(--s2) var(--s3); border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-size: var(--t13); font-weight: 600; white-space: nowrap; cursor: pointer; }
  .tabs > button:hover { color: var(--ink); }
  .tabs > button.active, .tabs > button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--ink); }
  .tabs > button > .icon { width: 14px; height: 14px; }
  .tabs-vertical { flex-direction: column; gap: 2px; overflow: visible; }
  .tabs-vertical > button { justify-content: flex-start; border-bottom: 0; border-left: 2px solid transparent; border-radius: 0 var(--r1) var(--r1) 0; text-align: left; }
  .tabs-vertical > button:hover { background: var(--panel); }
  .tabs-vertical > button.active { border-left-color: var(--accent); }
  /* Segmented toggle: a native radio group drawn as joined icon segments. Each radio covers its segment (transparent),
     so it keeps its name, one tab stop and arrow-key movement; the chosen segment takes the accent fill. */
  .segmented { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--r3); background: var(--surface); }
  .segment { position: relative; display: inline-grid; place-items: center; min-width: 44px; min-height: 40px; border-radius: var(--r3); color: var(--muted); cursor: pointer; }
  .segment > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
  .segment > .icon { pointer-events: none; }
  .segment > span { padding: 0 var(--s3); font-size: var(--t13); font-weight: 500; pointer-events: none; }
  .segment:hover { background: var(--panel); color: var(--ink); }
  .segment:has(> input:checked) { background: var(--accent); color: var(--accent-ink); }
  .segment:has(> input:focus-visible) { box-shadow: var(--shadow-focus); }
  .segment:has(> input:disabled) { cursor: not-allowed; opacity: .5; }
  .segment:has(> input:disabled):hover { background: transparent; color: var(--muted); }
  .segment:has(> input:disabled:checked):hover { background: var(--accent); color: var(--accent-ink); }

  /* Steps */
  .steps { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: var(--t13); line-height: 1.45; }
  .steps > li { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: var(--s2); }
  .step-mark { display: grid; place-items: center; width: 16px; height: 16px; margin-top: 2px; border: 1.5px solid var(--line-strong); border-radius: 50%; color: var(--accent); }
  .step-mark .icon { width: 10px; height: 10px; stroke-width: 3; }
  .step-body { display: grid; gap: var(--s1); min-width: 0; }
  .steps > li.active { color: var(--ink); font-weight: 500; }
  .steps > li.active > .step-mark { border-color: var(--accent); }
  .steps > li.active > .step-mark::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1s ease-in-out infinite; }
  .steps > li.complete > .step-mark { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
  .steps > li.stopped { color: var(--danger); }
  .steps > li.stopped > .step-mark { border-color: var(--danger); color: var(--danger); }
  .steps-groups { display: grid; gap: var(--s3); }
  .steps-group { display: grid; gap: var(--s2); }
  .steps-group > summary { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--t13); font-weight: 600; }
  .steps-group > summary > .meta { font-weight: 400; }

  /* Composer */
  .composer { display: grid; gap: var(--s1); padding: var(--s2) var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r2) var(--r2) var(--r4) var(--r2); background: var(--surface); }
  .composer:focus-within, .composer.drag-over { border-color: var(--accent); box-shadow: var(--shadow-focus); }
  /* Max's response rail: a 2 px KITT line (.kitt.kitt-line) as wide as the composer, directly above it. */
  .response-rail { width: 100%; margin-bottom: var(--s1); }
  .composer-input { display: flex; align-items: flex-end; gap: var(--s2); }
  .composer textarea { flex: 1 1 auto; min-width: 0; min-height: 36px; max-height: 200px; padding: var(--s2) 0; border: 0; border-radius: 0; background: transparent; font-size: var(--t15); line-height: 1.45; resize: none; overflow-y: auto; scrollbar-width: none; }
  .composer textarea::-webkit-scrollbar { display: none; }
  .composer textarea::placeholder { color: var(--muted); opacity: 1; }
  .composer textarea:focus-visible { outline: 0; }
  .composer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-height: 28px; }
  .composer-tools > .meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .composer-wait { display: flex; align-items: center; min-height: 36px; margin: 0; color: var(--muted); }
  .attachment-tray { display: flex; gap: var(--s2); padding: var(--s1) 0 var(--s2); overflow-x: auto; }
  .attachment-chip { position: relative; display: flex; flex: 0 0 auto; align-items: center; gap: var(--s2); max-width: 220px; padding: var(--s1) var(--s2); border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel); font-size: var(--t12); }
  .attachment-chip-prepared { flex-wrap: wrap; max-width: min(100%, 360px); }
  .attachment-chip-prepared .document-preparation { flex-basis: 100%; min-width: 0; }
  .attachment-chip img { width: 36px; height: 36px; object-fit: cover; border-radius: var(--r1); }
  .attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Field and notice */
  .field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .field > span { color: var(--muted); font-size: var(--t12); font-weight: 500; }
  .field > input, .field > select, .field > textarea { width: 100%; min-width: 0; }
  .field-hint { margin: 0; color: var(--muted); font-size: var(--t12); }
  .field-file-row { display: flex; align-items: center; gap: var(--s2); min-height: 28px; }
  .field-file-row > .meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .field-check { display: flex; align-items: center; gap: var(--s2); font-size: var(--t14); }
  .toggle { display: inline-flex; align-items: center; gap: var(--s2); color: var(--muted); font-size: var(--t13); white-space: nowrap; }
  .notice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0; padding: var(--s3) var(--s4); border-radius: var(--r2); background: var(--tone-bg); color: var(--tone-fg); font-size: var(--t13); line-height: 1.45; }
  .notice > .btn { margin-left: auto; }
  .notice-inline { display: block; padding: 0; background: transparent; font-size: var(--t12); white-space: pre-line; }
  .notice-inline:empty { display: none; }
  .sheet-head > .notice-inline, .dialog-head > .notice-inline, .row > .notice-inline, .page-head > .notice-inline { flex: 1 0 100%; }

  /* Confirm bar: the in-page question that replaced the native confirm and prompt dialogs */
  .confirm-bar { display: grid; flex: 1 0 100%; gap: var(--s2); width: 100%; margin: 0; padding: var(--s3) var(--s4); border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); border-radius: var(--r2); background: var(--panel); }
  .confirm-bar:has(> .confirm-actions > .btn-danger) { border-left-color: var(--danger); }
  .confirm-question { margin: 0; font-size: var(--t14); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
  .confirm-bar textarea { min-height: 36px; font-family: inherit; }
  .confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); }
  .confirm-option { display: flex; align-items: center; gap: var(--s2); font-size: var(--t13); }

  /* Max's presence and progress */
  .max-mark { display: block; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; background: var(--panel); object-fit: cover; }
  /* The KITT rail: fourteen segments on a dark track; one bright accent segment with a three-segment
     trail sweeps left to right and back. Each segment's two pseudo-elements run the same stepped
     keyframes, one per direction, offset by the segment's position (--k); no script steps it. */
  .kitt { --kitt-step: .09s; display: flex; gap: var(--s1); width: 100%; height: 8px; opacity: 0; pointer-events: none; }
  .kitt.active { opacity: 1; }
  .kitt > i { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--r3); background: var(--line-strong); }
  .kitt > i::before, .kitt > i::after { content: ''; position: absolute; inset: 0; border-radius: var(--r3); background: var(--accent); opacity: 0; animation: kitt calc(var(--kitt-step) * 26) steps(1, end) infinite; }
  .kitt > i::before { animation-delay: calc((var(--k) - 26) * var(--kitt-step)); }
  .kitt > i::after { animation-delay: calc(var(--k) * -1 * var(--kitt-step)); }
  .kitt > i:nth-child(1) { --k: 0; } .kitt > i:nth-child(2) { --k: 1; } .kitt > i:nth-child(3) { --k: 2; } .kitt > i:nth-child(4) { --k: 3; }
  .kitt > i:nth-child(5) { --k: 4; } .kitt > i:nth-child(6) { --k: 5; } .kitt > i:nth-child(7) { --k: 6; } .kitt > i:nth-child(8) { --k: 7; }
  .kitt > i:nth-child(9) { --k: 8; } .kitt > i:nth-child(10) { --k: 9; } .kitt > i:nth-child(11) { --k: 10; } .kitt > i:nth-child(12) { --k: 11; }
  .kitt > i:nth-child(13) { --k: 12; } .kitt > i:nth-child(14) { --k: 13; }
  /* One period is 26 steps (13 out, 13 back); a segment is bright for one step, then its trail decays over three. */
  @keyframes kitt { 0% { opacity: 1; } 3.85% { opacity: .55; } 7.69% { opacity: .3; } 11.54% { opacity: .12; } 15.38%, 100% { opacity: 0; } }
  /* The KITT line: the same fourteen segments and sweep as a 2 px row of small LED blocks on a soft accent track,
     for the rails on card edges (.edge-rail) and above the Ask Max composer (.response-rail). */
  .kitt.kitt-line { gap: 2px; height: 2px; opacity: 1; }
  .kitt-line > i, .kitt-line > i::before, .kitt-line > i::after { border-radius: 0; }
  .kitt-line > i { background: var(--accent-soft); }
  .job-kitt { width: min(280px, 100%); margin: var(--s1) 0; }
  .spinner { display: inline-block; width: 13px; height: 13px; flex: 0 0 13px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .75s linear infinite; }
  .section-spinner { display: block; width: 18px; height: 18px; margin: var(--s4) auto; }
  /* A section still loading holds one row's height (a Home date row is a name and a date card), so the
     sections below it do not move when the first row arrives. */
  .section-loading { min-height: 44px; align-content: center; }
  /* Content that replaces a placeholder fades in (ui-primitives arrive): the frame was already held, only the ink arrives. */
  @keyframes content-arrive { from { opacity: 0; } to { opacity: 1; } }
  .content-arrived { animation: content-arrive .18s ease-out; }
  #homeDeadlines.section-loading { min-height: 111px; }
  .loading-label { display: inline-flex; align-items: center; gap: var(--s2); }
  .stat { display: grid; align-content: start; gap: var(--s1); }
  .stat-value { font-size: var(--t20); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
}

/* -------------------------------------------------------------- surfaces */
@layer surfaces {

  /* Welcome owns its viewport; only legal/update text scrolls. */
  .welcome-dialog { width: min(400px, calc(100vw - 48px)); height: min(820px, calc(100dvh - 48px));
    max-width: none; max-height: none; padding: 0; border: 1px solid var(--line); border-radius: var(--r5);
    margin: auto; overflow: hidden; color: var(--ink); background: var(--paper); box-shadow: var(--shadow-raise); }
  .welcome-dialog::backdrop { background: var(--scrim); }
  .welcome-viewport { width: 100%; height: 100%; overflow: hidden; overflow: clip; }
  .welcome-track { display: flex; width: 100%; height: 100%; transition: transform .45s ease; }
  .welcome-panel { flex: 0 0 100%; min-width: 0; height: 100%; display: flex; flex-direction: column;
    padding: max(var(--s7), env(safe-area-inset-top)) max(var(--s6), env(safe-area-inset-right)) max(var(--s6), env(safe-area-inset-bottom)) max(var(--s6), env(safe-area-inset-left));
    background-color: var(--paper); background-image: var(--grid-image); background-size: var(--grid-size); background-position: var(--grid-position); }
  .welcome-content { display: flex; flex-direction: column; gap: var(--s5); min-height: 0; flex: 1; }
  .welcome-eyebrow { margin: 0; font-size: var(--t12); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
  .welcome-heading { margin: 0; font: 750 var(--t44)/1.06 var(--display-font); font-optical-sizing: auto; letter-spacing: -.02em;
    padding-bottom: var(--s5); border-bottom: 1px solid var(--accent); overflow-wrap: anywhere; }
  .welcome-heading:focus { outline: none; }
  .welcome-intro { background-color: var(--welcome-green); color: var(--welcome-paper); background-image: none;
    --accent: var(--welcome-sage); --muted: var(--welcome-sage); }
  .welcome-intro .welcome-content { gap: var(--s5); }
  .welcome-cube { width: min(100%, 232px); height: min(29dvh, 264px); object-fit: contain; align-self: center; margin: auto 0; min-height: 60px; }
  .welcome-friendly { margin: 0; font-size: var(--t17); line-height: 1.55; color: var(--welcome-sage); }
  .welcome-text { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--s5);
    border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); font-size: var(--t15); white-space: pre-line; }
  .welcome-text p { margin: 0 0 var(--s4); }
  .welcome-text p:last-child { margin-bottom: 0; }
  .welcome-text ul { padding-left: var(--s5); margin: var(--s4) 0; white-space: normal; }
  .welcome-text li + li { margin-top: var(--s2); }
  .welcome-field { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s6); }
  .welcome-name { width: 100%; min-width: 0; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
    background: transparent; padding: var(--s2) 0 var(--s3); color: var(--ink); font: 750 var(--t38)/1.15 var(--display-font);
    font-optical-sizing: auto; letter-spacing: -.02em; }
  .welcome-name:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 2px 0 var(--accent); }
  .welcome-name::placeholder { color: var(--faint); }
  .welcome-role { margin-top: var(--s5); }
  .welcome-role-name { font: 750 var(--t38)/1.15 var(--display-font); font-optical-sizing: auto; letter-spacing: -.02em; margin: var(--s3) 0; overflow-wrap: anywhere; }
  .welcome-role-help { font-size: var(--t15); color: var(--muted); margin: 0; }
  .welcome-footer { flex: none; padding-top: var(--s4); display: flex; flex-direction: column; gap: var(--s5); }
  .welcome-error { min-height: 22px; font-size: var(--t13); line-height: 1.4; color: var(--danger); margin: 0; }
  .welcome-dots { display: flex; justify-content: center; align-items: center; gap: var(--s2); height: 8px; }
  .welcome-dot { width: 8px; height: 8px; border: 1px solid var(--accent); border-radius: var(--r3); }
  .welcome-dot[data-current="true"] { width: 24px; background: var(--accent); }
  .welcome-next { width: 100%; height: 52px; min-height: 52px; border-radius: var(--r3); }
  .welcome-preview-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
  .welcome-signout { align-self: center; margin-top: calc(-1 * var(--s3)); }
  .welcome-intro .welcome-next { background: var(--welcome-sage); color: var(--welcome-green); border-color: var(--welcome-sage); }
  @media (max-width: 600px) {
    .welcome-dialog { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  }
  @media (max-height: 680px) {
    .welcome-panel { padding-top: max(var(--s4), env(safe-area-inset-top)); padding-bottom: max(var(--s4), env(safe-area-inset-bottom)); }
    .welcome-content { gap: var(--s3); }
    .welcome-heading { font-size: var(--t34); padding-bottom: var(--s3); }
    .welcome-field, .welcome-role { margin-top: var(--s2); }
    .welcome-name, .welcome-role-name { font-size: var(--t28); }
    .welcome-footer { gap: var(--s3); }
    .welcome-cube { height: 15dvh; }
  }
  @media (prefers-reduced-motion: reduce) { .welcome-track { transition: none; } }

  .app-shell { display: flex; height: 100%; }
  body.auth-required .app-shell { visibility: hidden; }
  .workspace { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; height: 100%; }
  .workspace > * { grid-column: 1; }
  .workspace > main { grid-row: 2; }
  .composer-dock { grid-row: 3; width: min(var(--list-width), 100%); margin: 0 auto; padding: 0 var(--s5) max(var(--s3), env(safe-area-inset-bottom)); }
  .disclaimer { margin: var(--s2) 0 0; color: var(--faint); text-align: center; }

  /* One Ask Max surface: it takes a real grid column on desktop and overlays at smaller widths. */
  .ask-max-panel { min-width: 0; min-height: 0; overflow: hidden; background: var(--surface); border-left: 1px solid var(--line); }
  .ask-max-panel:not([hidden]) { display: flex; flex-direction: column; }
  .ask-max-head { gap: var(--s2); }
  .ask-max-head > .sheet-title { flex: 1; }
  .ask-max-actions { display: flex; flex: 1 0 100%; gap: var(--s2); }
  .ask-max-body { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: auto; }
  .ask-max-body > .chat { flex: 1; }
  .ask-max-body > .composer-start { margin: var(--s4); }
  .ask-max-body > .composer-dock { flex: none; padding: var(--s3); }
  .ask-max-panel .thread { padding: var(--s3); }
  .ask-max-panel .chat-head { gap: var(--s1); padding: var(--s2); }
  .ask-max-panel .chat-back, .ask-max-panel #closeRequest { display: none; }
  .ask-max-panel .chat-head .sheet-title { font-size: var(--t14); }
  .ask-max-panel .chat-head .sheet-actions { margin-left: auto; }
  .ask-max-recent { flex: none; max-height: 34%; overflow: auto; padding: 0 var(--s4) var(--s3); }
  .ask-max-recent[hidden] { display: none; }
  .ask-max-handle { display: none; }
  .ask-max-floating:not([hidden]), .ask-max-settings-entry:not([hidden]) { display: inline-flex; align-items: center; gap: var(--s2); position: fixed; z-index: 60; right: var(--s4); bottom: var(--s4); min-height: 48px; padding: var(--s2) var(--s4) var(--s2) var(--s2); border: 0; border-radius: var(--r3); background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-raise); }
  .ask-max-floating .max-mark, .ask-max-settings-entry .max-mark { width: 32px; height: 32px; object-fit: contain; }
  .ask-max-floating .home-mark-portrait, .ask-max-settings-entry .home-mark-portrait { border-radius: 50%; object-fit: cover; }
  .ask-max-backdrop { position: fixed; inset: 0; z-index: 100; background: var(--scrim); }


  /* Top bar and workspace tabs */
  .topbar { z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; grid-row: 1; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s1) var(--s4); border-bottom: 1px solid var(--line); background: var(--surface); }
  .topbar-start { justify-self: start; }
  .topbar-actions { justify-self: end; }
  .account-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
  .account-avatar { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--ink); font-size: var(--t14); font-weight: 600; }
  .account-label { font-size: var(--t13); font-weight: 600; }
  .workspace-tab-scroll { justify-self: center; max-width: 100%; min-width: 0; overflow: visible; }
  .workspace-tab-scroll > button { position: relative; min-height: 44px; }
  .workspace-tabs { display: flex; align-items: center; gap: var(--s2); min-width: 0; max-width: 100%; }
  .workspace-tab-scroll { flex: 1; }
  /* Main destinations keep their names. The tablet bar compacts Library destinations only. */
  .workspace-tab-scroll > button > .icon { flex: none; width: 18px; height: 18px; }
  .workspace-tab-scroll > button.active { border-color: transparent; border-radius: var(--r1); background: var(--accent); color: var(--accent-ink); }

  #openMore { display: none; }
  /* A plain divider before the Library destinations; no word (Matthew, 2026-11-10). */
  .library-label { flex: none; height: 1px; margin: var(--s2) var(--s3); padding: 0; background: var(--line); }


  /* Pages */
  .page { min-height: 0; overflow-y: auto; padding: var(--s5) var(--s5) var(--s7); background-color: var(--paper); scrollbar-gutter: stable; }
  .page > * { width: min(var(--list-width), 100%); margin-left: auto; margin-right: auto; }

  /* Chat: the header stays pinned while the thread scrolls; Back and close both return to home (.chat-head is under Sheet) */
  .chat { min-height: 0; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; background-color: var(--paper); scrollbar-gutter: stable; }
  .chat-back { flex: 0 0 auto; padding-left: var(--s1); }
  .thread { width: min(var(--list-width), 100%); margin: 0 auto; padding: var(--s4) var(--s5) var(--s5); }
  .chat.has-messages .thread { display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(100% - 57px); }
  .chat:not(.has-messages) .thread { display: none; }

  /* Sheet: a record over the page */
  .sheet { position: fixed; inset: 0 0 0 auto; width: min(var(--sheet-width), 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; overflow: hidden; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-raise); }
  /* A reading sheet is wide on purpose: its timeline and prose columns use its whole width. */
  .sheet-reading { --read-width: 100%; --prose-width: 100%; }
  .sheet[open] { display: flex; flex-direction: column; }
  .more-navigation-items { display: grid; gap: var(--s2); overflow-y: auto; padding: var(--s4) var(--s4) max(var(--s4), env(safe-area-inset-bottom)); }
  .more-navigation-items > button { justify-content: flex-start; min-height: 48px; }
  .more-navigation-items > button.active { border-color: var(--accent); color: var(--accent); }
  .sheet::backdrop { background: var(--scrim); }
  .sheet-wide { width: min(1100px, 100vw); }
  .sheet-head { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); background: var(--surface); }
  .sheet-head > .sheet-title, .sheet-head-main { flex: 1 1 240px; min-width: 0; }
  .sheet-head-main { display: grid; gap: 2px; }
  /* A sheet title keeps to one line; the full title stays in its title attribute. */
  .sheet-head .sheet-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-head { position: sticky; top: 0; z-index: 3; flex-wrap: nowrap; }
  /* Delete chat asks just below the pinned header (it hangs from it), so the question is in view however far the
     thread scrolled and the header's own line stays as it is. */
  .chat-confirm { position: absolute; top: 100%; right: 0; left: 0; display: grid; gap: var(--s2); padding: var(--s2) var(--s4);
    border-bottom: 1px solid var(--line); background: var(--surface); }
  .chat-confirm:empty { display: none; }
  .chat-head .sheet-actions { flex-wrap: nowrap; }
  .sheet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-left: auto; }
  /* A job sheet's state pill keeps the line under the title; its actions sit in the foot above the composer. */
  .sheet-foot .composer textarea::placeholder { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .job-status { display: flex; flex: 1 0 100%; align-items: center; gap: var(--s2); }
  .job-status:empty { display: none; }
  .sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s4); scrollbar-gutter: stable; }
  .sheet-foot { flex-shrink: 0; padding: var(--s2) var(--s4) max(var(--s3), env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
  /* Checkpoint Summary scrolls within the sheet; its review dock stays at the viewport's lower edge. */
  .sheet-body:has(.checkpoint-summary:not([hidden])) { display: flex; flex-direction: column; overflow: hidden; padding: 0; scrollbar-gutter: auto; }
  /* The tabbed presentation sits between the sheet and checkpoint. Every flex child
     must shrink so the narrative, not an unbounded inner scroller, owns scrolling. */
  .sheet-body > .case-presentation:has(.checkpoint-summary:not([hidden])),
  .sheet-body .case-panel:has(> .checkpoint-summary:not([hidden])) { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
  .sheet-body .case-panel:has(> .checkpoint-summary:not([hidden])) > .case-panel-head { flex-shrink: 0; padding: var(--s3) var(--s4); }
  .sheet-body:has(.checkpoint-summary:not([hidden])) > .case-as-of { flex-shrink: 0; margin-inline: var(--s4); }
  .checkpoint-summary { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
  .checkpoint-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: var(--s4); }
  .checkpoint-status { margin-bottom: 0; }
  .checkpoint-dock { max-height: min(70dvh, calc(100% - 64px)); overflow-y: auto; padding-left: max(var(--s4), env(safe-area-inset-left)); padding-right: max(var(--s4), env(safe-area-inset-right)); }
  .checkpoint-dock .job-actions { gap: var(--s2); }
  .checkpoint-dock .composer { margin-top: var(--s3); }
  .checkpoint-dock .composer-tools > .btn-secondary { margin-left: auto; }
  .checkpoint-dock .composer textarea { max-height: min(180px, 20dvh); }
  .summary-ask-max { min-height: 0; max-height: 45dvh; overflow-y: auto; }
  .summary-ask-max > .eyebrow { margin: 0 0 var(--s2); }
  .summary-ask-thread { max-height: 18dvh; overflow-y: auto; overscroll-behavior: contain; }
  .summary-ask-thread:empty { display: none; }
  .summary-ask-thread .turn { padding: var(--s2) 0; }
  .summary-ask-max textarea { max-height: 12dvh; }
  .checkpoint-fields { max-height: 20dvh; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--s2) var(--s3); }
  .checkpoint-fields:empty { display: none; }
  .checkpoint-fields label { display: grid; gap: var(--s1); font-size: var(--t14); }
  .checkpoint-hold { padding: var(--s2) 0; color: var(--tone-attention-fg); }
  .sheet-foot > .job-kitt { width: 100%; margin: 0 0 var(--s2); }
  .job-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
  .sheet-foot > .job-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); }
  .sheet-foot > .job-actions:empty { display: none; }
  .step-approved { color: var(--tone-success-fg); font-size: var(--t14); font-weight: 700; }
  .sheet-foot > .confirm-bar { margin-bottom: var(--s2); }
  /* A flyout: the same sheet anchored to the left edge (Settings). */
  .sheet-left { inset: 0 auto 0 0; width: min(520px, 100vw); border-left: 0; border-right: 1px solid var(--line); }

  /* Dialog: intake forms and chat access */
  .dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-raise); }
  .dialog::backdrop { background: var(--scrim); }
  /* One column no wider than the dialog: a long line that cannot wrap (an attached document's name) is cut with an
     ellipsis instead of widening every field past the dialog's edge. */
  .dialog-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); max-height: calc(100dvh - 32px); padding: var(--s5); overflow-y: auto; }
  /* Edit details (record-details.mjs): the State choice is the Active / Archived toggle, or a Deal's radio cards (one row
     per state, its help line under the label). */
  .state-choice { display: grid; gap: var(--s2); margin: 0; padding: 0; border: 0; min-width: 0; }
  .state-choice > legend { margin-bottom: var(--s1); padding: 0; color: var(--muted); font-size: var(--t12); font-weight: 500; }
  .state-choice > .segmented { justify-self: start; }
  .deal-state-option { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r2); cursor: pointer; }
  .deal-state-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
  .deal-state-option:has(input:disabled) { cursor: default; opacity: .6; }
  .deal-state-option > input { margin-top: 3px; }
  .deal-state-option > span { display: grid; gap: 2px; min-width: 0; }
  /* Delete: apart from the state choice (a search's Delete; Delete permanently for an archived Deal, admins only). */
  .record-delete, .report-lifecycle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); }
  .dialog-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
  .dialog-head > div { display: grid; gap: 2px; min-width: 0; }
  .dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); }

  /* Gates and notices */
  .model-loading { position: fixed; z-index: 250; inset: 0; display: grid; place-items: center; padding: var(--s5); background-color: var(--paper); }
  .model-loading-card { display: grid; justify-items: center; gap: var(--s3); width: min(420px, 100%); text-align: center; }
  .model-loading-logo { display: block; width: 96px; height: 96px; }
  .model-loading-logo img { width: 100%; height: 100%; object-fit: contain; }
  .model-loading h1 { margin: 0; font-size: var(--t28); font-weight: 600; }
  .model-loading p { margin: 0; color: var(--muted); }
  .model-loading-progress { display: flex; gap: var(--s2); }
  .model-loading-progress i { width: 7px; height: 7px; border-radius: 50%; background: var(--eyebrow); animation: pulse 1.25s ease-in-out infinite; }
  .model-loading-progress i:nth-child(2) { animation-delay: .16s; }
  .model-loading-progress i:nth-child(3) { animation-delay: .32s; }
  .auth-gate { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: var(--s5); background-color: var(--paper); }
  .auth-card { display: grid; justify-items: center; gap: var(--s3); width: min(400px, 100%); padding: var(--s6) var(--s5); text-align: center; }
  .auth-card h1 { margin: 0; font-size: var(--t28); font-weight: 600; }
  .auth-card p { margin: 0; color: var(--muted); }
  .auth-logo { width: 64px; height: 64px; object-fit: contain; }
  .auth-logo.auth-avatar { border-radius: 50%; background: var(--panel); object-fit: cover; }
  .auth-providers { display: grid; gap: var(--s2); width: 100%; }
  .service-incident { position: fixed; z-index: 100; bottom: calc(var(--bottom-navigation-height) + max(var(--s5), env(safe-area-inset-bottom))); left: 50%; display: grid; gap: var(--s2); width: min(36rem, calc(100vw - 32px)); box-shadow: var(--shadow-raise); transform: translateX(-50%); }
  .service-incident p { margin: 0; }
  .service-incident code { display: block; overflow-wrap: anywhere; font-family: var(--mono); font-size: var(--t12); user-select: all; }
  .service-incident .btn { justify-self: end; margin-left: 0; }
  .toast { position: fixed; z-index: 1200; top: max(var(--s4), env(safe-area-inset-top)); left: 50%; display: grid; gap: 2px; width: min(360px, calc(100vw - 28px)); box-shadow: var(--shadow-raise); transform: translateX(-50%); }
  .toast strong { font-size: var(--t13); }
  .toast small { font-size: var(--t12); opacity: .85; }
  /* Voice stage: while voice is on it takes the text box's place in the composer; the chat log is untouched. */
  .composer.voice-on textarea, .composer.voice-on .composer-input > button[type="submit"], .composer.voice-on .attachment-tray,
  .composer.voice-on .composer-tools > *, .composer.voice-on .job-attachment-names { display: none; }
  .composer.voice-on .composer-input { align-items: center; }
  .voice-stage { flex: 1; min-width: 0; display: grid; gap: 2px; align-content: center; }
  .voice-stage[hidden] { display: none; }
  /* The mic shows voice is on: filled while active, gently pulsing while Max listens. */
  .voice-toggle[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
  .voice-toggle[data-mode="listening"] { animation: voice-live 1.6s ease-in-out infinite alternate; }
  @keyframes voice-live { from { background: var(--accent); } to { background: var(--accent-strong); } }
  @media (prefers-reduced-motion: reduce) { .voice-toggle[data-mode="listening"] { animation: none; } }
  .voice-signal { width: 100%; height: 24px; display: block; }
  /* Right-aligned once long: new words enter at the right and older ones crawl off the left. */
  .voice-crawl { margin: 0; display: flex; justify-content: center; overflow: hidden; white-space: nowrap; font-size: var(--t14); line-height: 1.5; color: var(--ink); min-height: 1.5em; }
  .voice-crawl.is-long { justify-content: flex-end; }
  .voice-crawl:not(.is-final) { color: var(--muted); }
  .voice-stage[data-mode="speaking"] .voice-crawl, .voice-stage[data-mode="thinking"] .voice-crawl { opacity: .7; }
  .voice-word { display: inline-block; white-space: pre; animation: voice-word .24s ease-out; }
  @keyframes voice-word { from { opacity: 0; transform: translateX(.6em); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .voice-word { animation: none; } }
}

/* ----------------------------------------------------------------- pages */
@layer pages {
  /* Home: wordmark, writing tray, then the existing feeds. */
  .home-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: center; margin-bottom: var(--s6); }
  .home-banner { display: flex; align-items: center; gap: var(--s5); margin: 0; font-size: var(--t47); font-weight: 700; line-height: 1.06; letter-spacing: -.065em; }
  .home-mark { width: 72px; height: 72px; flex: 0 0 auto; border-radius: 0; background: transparent; object-fit: contain; }
  .home-mark-portrait { border-radius: 50%; background: var(--panel); object-fit: cover; }
  .home-wordmark { min-width: 0; }
  .composer-start { min-height: 176px; gap: var(--s4); margin-bottom: var(--s7); padding: var(--s5); border-radius: var(--r2) var(--r2) var(--r5) var(--r2); box-shadow: var(--shadow-recess); }
  /* Ask Max start box: ordinary composer text size (16 px avoids iOS focus zoom). */
  .composer-start textarea { min-height: 52px; font-size: var(--t16); line-height: 1.45; }
  .composer-start:focus-within { box-shadow: var(--shadow-focus); }
  .composer-start .composer-input { align-items: flex-start; }
  #requestsView .rows { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  #requestsView .row { gap: var(--s3) var(--s5); padding: 22px 0; }
  #requestsView .row-title { font-size: var(--t18); }
  #requestsView .row-main { gap: var(--s1); }
  /* Needs you: one clickable line per task (case, task, state pill, date); long titles truncate, phones wrap. */
  .review-rows { display: grid; }
  .review-row { display: flex; align-items: baseline; gap: var(--s3); width: 100%; min-height: 44px; padding: var(--s2) 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .review-row + .review-row { border-top: 1px solid var(--line); }
  .review-row:hover .review-row-title { color: var(--accent); }
  .review-row-case { flex: 0 1 auto; max-width: 35%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .review-row-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .review-row > .pill, .review-row > time { flex: 0 0 auto; }
  @media (max-width: 699px) { .review-row { flex-wrap: wrap; row-gap: var(--s1); } .review-row-case { flex-basis: 100%; max-width: 100%; } }
  .home-dates { display: grid; gap: var(--s4); min-width: 0; }
  /* Past chats: a plain list, one clickable line per chat with its title and date. */
  .chat-history-host > .empty, .chat-history-host > p { margin: 0; padding: var(--s2) 0; }
  .chat-history { display: grid; margin: 0; padding: 0; list-style: none; }
  .chat-history-item { display: flex; align-items: baseline; gap: var(--s3); width: 100%; min-height: 44px; padding: var(--s2) 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .chat-history-item:hover .chat-history-title { color: var(--accent); }
  .chat-history-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-history-item > time { flex: 0 0 auto; }
  .home-date-row { min-width: 0; }
  .home-date-pending { visibility: hidden; } /* holds a date card's height while the first dates load */

  #requestsView .pill { padding: 5px 0; background: transparent; }
  #requestsView .pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

  /* Chat turns */
  .turn { padding: var(--s4) 0; }
  .turn.user { display: flex; justify-content: flex-end; }
  .turn.user > div { display: flex; flex-direction: column; align-items: flex-end; width: 100%; min-width: 0; }
  .user-bubble { max-width: 78%; padding: var(--s3) var(--s4); border-radius: var(--r2); background: var(--panel); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
  .attachment-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); margin-bottom: var(--s2); }
  .sent-attachment { padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); font-size: var(--t13); }
  .sent-attachment img { display: block; width: min(260px, 60vw); max-height: 260px; margin-bottom: var(--s2); border-radius: var(--r1); object-fit: contain; }
  .attachment-processing { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s1); color: var(--muted); }
  .queued-turn-state { display: block; margin-top: var(--s1); text-align: right; }
  .memory-commit-notice { width: fit-content; margin: 0 0 var(--s3); }
  .plan-event { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s3); margin: var(--s3) 0; }
  .plan-event-marker { padding-top: 3px; }
  .plan-event > span:last-child, .plan-event > div { display: grid; gap: 2px; min-width: 0; }
  .plan-event strong { font-size: var(--t14); font-weight: 600; }
  .plan-event small { color: var(--muted); font-size: var(--t13); }
  .thinking { margin-bottom: var(--s3); color: var(--muted); font-size: var(--t13); }
  .thinking summary { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: var(--s2); width: 100%; padding: 2px 0; font-weight: 600; user-select: none; }
  .thinking summary::before { content: ''; width: 6px; height: 6px; margin: 0 2px 2px 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
  .thinking[open] summary::before { transform: rotate(45deg); margin-bottom: 4px; }
  .thinking-label { grid-column: 2; }
  .thinking.pending .thinking-label::after { content: '...'; animation: pulse 1s ease-in-out infinite; }
  .thinking-compact { grid-column: 3; min-width: 0; max-height: 4.7em; overflow: hidden; color: var(--faint); font-weight: 400; line-height: 1.55; white-space: pre-wrap; }
  .thinking[open] .thinking-compact { display: none; }
  .thinking-content { max-height: 260px; margin-top: var(--s2); padding: var(--s2) var(--s2) var(--s2) var(--s4); overflow-y: auto; border-left: 2px solid var(--line); color: var(--muted); line-height: 1.55; scrollbar-gutter: stable; }
  .thinking-full { white-space: pre-wrap; overflow-wrap: anywhere; }
  .thinking-preview { white-space: pre-wrap; }
  .thinking-preview a { display: block; margin-top: var(--s1); white-space: normal; }
  .response-phase { display: grid; grid-template-columns: 8px minmax(0, auto) auto; align-items: center; gap: var(--s2); width: fit-content; max-width: 100%; margin: 0 0 var(--s2); color: var(--muted); font-size: var(--t12); line-height: 1.35; }
  .response-phase i { width: 7px; height: 7px; border-radius: 50%; background: var(--eyebrow); }
  .response-phase.pending i { animation: pulse 1s ease-in-out infinite; }
  .response-phase small { color: var(--muted); font-variant-numeric: tabular-nums; }
  .response-phase.complete { opacity: 1; transition: opacity .4s ease; }
  .response-phase.faded { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; }
  /* Quiet actions share the text's left edge: the first button's padding hangs into the gutter. */
  .message-actions { position: relative; display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); opacity: 1; }
  .message-actions > .btn:first-child { margin-left: -11px; }
  .turn:hover .message-actions, .message-actions:focus-within { opacity: 1; }
  .assistant-attribution { position: relative; display: inline-flex; }
  .assistant-attribution-tooltip { position: absolute; z-index: 30; bottom: calc(100% + 6px); left: 0; width: min(390px, calc(100vw - 36px)); max-height: 240px; padding: var(--s2) var(--s3); overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--r2); background: var(--surface); color: var(--muted); box-shadow: var(--shadow-raise); font-size: var(--t12); line-height: 1.45; visibility: hidden; opacity: 0; pointer-events: none; }
  .assistant-attribution:hover .assistant-attribution-tooltip, .assistant-attribution:focus-within .assistant-attribution-tooltip, .assistant-attribution.open .assistant-attribution-tooltip { visibility: visible; opacity: 1; pointer-events: auto; }
  .assistant-attribution-tooltip p { margin: 0; }
  .assistant-source-ledger { margin-top: var(--s3); color: var(--muted); font-size: var(--t12); }
  .assistant-source-ledger > summary { width: fit-content; color: var(--muted); font-weight: 600; }
  .assistant-source-list { display: grid; gap: var(--s1); margin-top: var(--s2); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel); }
  .assistant-source-list a { overflow: hidden; color: var(--accent); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
  .assistant-source-list a:hover { text-decoration: underline; }
  .image-search-results { margin: 0 0 var(--s4); }
  .image-search-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); }
  .image-search-heading strong { font-size: var(--t14); font-weight: 600; }
  .image-tile-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(104px, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--s2); height: clamp(210px, 31vw, 330px); }
  .image-tile { min-width: 0; overflow: hidden; padding: 0; color: var(--ink); text-decoration: none; }
  .image-tile:first-child { grid-row: 1 / 3; }
  .image-tile-grid[data-count="1"] .image-tile:first-child { grid-column: 1 / 3; }
  .image-tile-grid[data-count="2"] .image-tile:nth-child(2) { grid-column: 2; grid-row: 1; }
  .image-tile img { display: block; width: 100%; height: 100%; background: var(--panel); object-fit: cover; object-position: center top; }
  .artifact-card { width: min(520px, 100%); margin: var(--s2) 0 var(--s4); padding: 0; overflow: hidden; }
  .artifact-card img { display: block; width: 100%; max-height: 620px; background: var(--panel); object-fit: contain; }
  .artifact-image-loading { min-height: 180px; background: var(--panel); animation: pulse 1.4s ease-in-out infinite; }
  .artifact-image-unavailable { display: grid; place-items: center; padding: var(--s4); color: var(--muted); animation: none; }
  .artifact-file-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); min-height: 116px; background: var(--panel); color: var(--muted); }
  .artifact-file-preview strong { display: grid; place-items: center; width: 52px; height: 60px; border-radius: var(--r1); background: var(--surface); color: var(--danger); font-size: var(--t12); }
  .artifact-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s3); color: var(--muted); font-size: var(--t12); }
  .access-guidance { display: grid; gap: var(--s2); margin: var(--s2) 0 var(--s4); }
  .access-guidance-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
  .access-guidance-heading > span { display: grid; gap: 2px; min-width: 0; }
  .access-guidance-heading strong { font-size: var(--t14); font-weight: 600; }
  .access-guidance p { margin: 0; color: var(--muted); font-size: var(--t13); }
  .access-guidance-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

  /* Pipeline stages: one chevron row at every width; only the fill is clipped so focus stays visible. */
  .pipeline-navigation { margin-block: var(--s4) var(--s3); min-width: 0; }
  .pipeline-arrows { display: flex; gap: 2px; width: 100%; }
  .pipeline-stage { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: var(--s2); flex: 1; min-width: 0; height: 38px; padding: 0 22px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: var(--t13); font-weight: 600; }
  .pipeline-stage::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--panel); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); }
  .pipeline-stage:first-child::before { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
  .pipeline-stage:hover::before { box-shadow: inset 0 0 0 100px var(--scrim); }
  .pipeline-stage[aria-current="step"] { color: var(--accent-ink); }
  .pipeline-stage[aria-current="step"]::before { background: var(--accent); box-shadow: none; }
  .pipeline-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pipeline-count { flex: none; font-weight: 400; }
  .pipeline-short { display: none; }
  /* Syndication › Buyers: a grid that scrolls sideways in its frame; on a phone each row is just its name. */
  .buyers { display: grid; gap: var(--s3); min-width: 0; }
  .buyers-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }
  .buyers-search { flex: 1 1 200px; min-width: 0; }
  .buyers-view-field { flex: 0 1 180px; min-width: 0; }
  .buyers-actions { display: flex; gap: var(--s2); margin-inline-start: auto; }
  .buyers-bulk { display: flex; align-items: center; gap: var(--s2); }
  .buyers-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .buyers-table { width: 100%; min-width: 720px; table-layout: fixed; border-collapse: collapse; background: var(--surface); font-size: var(--t13); }
  .buyers-table > :is(thead, tbody) > tr > :is(th, td) { overflow: hidden; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--panel); text-align: start; text-overflow: ellipsis; vertical-align: top; white-space: nowrap; }
  .buyers-table th[data-column="category"] { width: 11%; }
  .buyers-table th[data-column="priority"] { width: 9%; }
  .buyers-table th[data-column="raised"] { width: 15%; }
  .buyers-table > tbody > .buyers-row > td .meta, .buyers-contact, .buyers-open { display: block; overflow: hidden; max-width: 100%; text-overflow: ellipsis; }
  .buyers-table > thead > tr > th { position: sticky; top: 0; background: var(--surface); }
  .buyers-table > tbody > .buyers-row .meta { display: block; }
  .buyers-sort { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; }
  .buyers-sort:disabled { cursor: default; }
  .buyers-group th { background: var(--panel); color: var(--ink); font-weight: 600; }
  .buyers-row { cursor: pointer; }
  .buyers-row:hover { background: var(--accent-soft); }
  .buyers-open { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; text-align: start; cursor: pointer; }
  .buyers-table .buyers-tick-cell { width: 48px; overflow: visible; }
  .buyer-popup { width: min(760px, calc(100vw - 32px)); }
  .buyer-popup-tools { display: flex; gap: var(--s1); }
  .buyer-popup .btn-icon[aria-pressed="true"] { background: var(--accent-soft); }
  /* Syndication › Capital Raise (capital-raise.mjs): a card per raise; the open one holds the period grid and its entries. */
  .raise-list { display: grid; gap: var(--s3); }
  .raise { min-width: 0; padding: 0; }
  .raise-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); width: 100%; padding: var(--s3) var(--s4); border: 0; background: none; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
  .raise-head .meta { flex: 1 1 100%; }
  .raise-bar { flex: 1 1 100%; height: 6px; accent-color: var(--accent); }
  .raise-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); min-width: 0; padding: 0 var(--s4) var(--s4); }
  .raise-body .buyers-actions { flex-wrap: wrap; }
  .raise-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .raise-table { width: 100%; border-collapse: collapse; font-size: var(--t13); }
  .raise-table th, .raise-table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--panel); text-align: start; white-space: nowrap; }
  .raise-table thead th { color: var(--muted); font-weight: 600; }
  .raise-table tbody th, .raise-table tfoot th, .raise-table thead th:first-child { position: sticky; inset-inline-start: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; background: var(--surface); font-weight: 600; }
  .raise-table tfoot td, .raise-table tfoot th { font-weight: 600; }
  .raise-table .raise-amount { text-align: end; font-variant-numeric: tabular-nums; }
  .raise-cell { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
  .raise-cell:hover { color: var(--accent); text-decoration: underline; }
  .raise-entries-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
  .raise-entries { display: grid; gap: var(--s1); }
  .raise-entry { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--panel); }
  .raise-entry-words { flex: 1 1 auto; min-width: 0; }
  .raise-entry-words .meta { display: block; overflow-wrap: anywhere; }
  .raise-entry-note { margin: var(--s1) 0 0; overflow-wrap: anywhere; font-size: var(--t13); }
  .raise-buyers { display: grid; max-height: 180px; overflow-y: auto; border: 1px solid var(--panel); border-radius: var(--r1); }
  .raise-buyers .empty { padding: var(--s2) var(--s3); }
  .raise-buyer { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s3); border: 0; border-bottom: 1px solid var(--panel); background: none; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
  .raise-buyer:hover { background: var(--accent-soft); }
  .raise-buyer[aria-selected="true"] { background: var(--accent-soft); font-weight: 600; }
  .buyer-detail { display: grid; gap: var(--s3); min-width: 0; cursor: default; }
  /* Strength (Matthew, 2026-11-05): a number and ten segments, in the grid and on the popup's tiles. */
  .strength-seg { display: inline-flex; gap: 2px; vertical-align: middle; }
  .strength-seg > span { width: 6px; height: 10px; border-radius: var(--r1); background: var(--panel); }
  .strength-seg > span.on { background: var(--accent); }
  .buyers-strength { display: inline-block; min-width: 1.4em; font-size: var(--t14); }
  .buyers-table td[data-column="strength"] .strength-seg { margin-left: var(--s1); }
  /* The popup leads with Priority, Strength and Raised as tiles; Raised takes the whole second row. */
  .buyer-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); min-width: 0; }
  .buyer-hero-tile { display: grid; gap: 2px; min-width: 0; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); color: inherit; font: inherit; text-align: left; box-sizing: border-box; width: 100%; overflow: hidden; }
  button.buyer-hero-tile { cursor: pointer; }
  button.buyer-hero-tile:hover { background: var(--panel); }
  .buyer-hero-strength { border-color: var(--accent); }
  .buyer-hero-raised { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--s3); }
  .buyer-hero-raised > .buyer-hero-m { grid-column: 1 / -1; }
  .buyer-hero-k { color: var(--muted); }
  .buyer-hero-v { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: var(--t26); font-weight: 600; line-height: 1.1; min-width: 0; }
  .buyer-hero-money { justify-self: end; font-size: var(--t22); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .buyer-hero-m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .buyer-hero-tile select { max-width: 100%; }
  .buyer-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0; }
  /* Teasers: one line each, opening in place. */
  .buyer-teaser { border-top: 1px solid var(--panel); min-width: 0; }
  .buyer-teaser-head { display: flex; align-items: center; gap: var(--s3); min-height: 48px; cursor: pointer; list-style: none; }
  .buyer-teaser-head::-webkit-details-marker { display: none; }
  .buyer-teaser-head > strong { font-size: var(--t14); flex: none; }
  .buyer-teaser-meta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .buyer-teaser-caret { display: inline-flex; flex: none; color: var(--muted); transition: transform .15s; }
  .buyer-teaser-caret .icon { width: 16px; height: 16px; }
  .buyer-teaser[open] > .buyer-teaser-head > .buyer-teaser-caret { transform: rotate(90deg); }
  .buyer-teaser-body { display: grid; gap: var(--s3); padding: 0 0 var(--s3); }
  .buyer-outreach-list { margin: 0; padding-left: 1.2em; }
  /* The Strength and Raised drill-ins. */
  .buyer-drill { width: min(520px, calc(100vw - 32px)); }
  .buyer-drill-body { min-width: 0; }
  .buyer-strength-top { display: grid; gap: var(--s2); }
  .buyer-strength-score { font-size: var(--t44); font-weight: 600; line-height: 1; color: var(--ink); justify-self: start; }
  button.buyer-strength-set { border: 0; border-bottom: 2px dashed var(--line); background: transparent; padding: 0 2px; font: inherit; font-size: var(--t44); font-weight: 600; line-height: 1; cursor: pointer; }
  .buyer-strength-input { width: 5em; font-size: var(--t28); }
  .buyer-strength-top .strength-seg { width: 100%; }
  .buyer-strength-top .strength-seg > span { flex: 1; height: 14px; border-radius: var(--r1); }
  .buyer-strength-ledger { display: grid; }
  .buyer-strength-move { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: var(--s2); align-items: center; padding: 10px 0; border-top: 1px solid var(--panel); font-size: var(--t13); }
  .buyer-strength-move:first-child { border-top: 0; }
  .buyer-strength-move.now { border-top-color: var(--line); }
  .buyer-strength-delta { text-align: right; }
  .buyer-strength-move.up .buyer-strength-delta { color: var(--tone-success-fg); }
  .buyer-strength-move.down .buyer-strength-delta { color: var(--danger); }
  .buyer-raised { display: grid; gap: var(--s4); }
  .buyer-raised-group { display: grid; }
  .buyer-raised-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--s1); }
  .buyer-raised-name { margin: 0; color: var(--muted); }
  .buyer-raised-entry { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding: 10px 0; border-top: 1px solid var(--panel); font-size: var(--t13); }
  .buyer-raised-entry .pill { justify-self: start; }
  .buyer-raised-amount { white-space: nowrap; font-size: var(--t14); }
  /* Syndication › Outreach preview (outreach-demo.mjs, Matthew 2026-11-05): fixture data, no API. */
  .outreach-demo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
    min-width: 0;
  }
  .outreach-head {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    min-width: 0;
  }
  .outreach-head > .row-main {
    flex: 1 1 0;
    min-width: 0;
  }
  .outreach-head > .meta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--t12);
  }
  .outreach-demo > .outreach-head { align-items: flex-end; }
  .outreach-demo .btn,
  .outreach-dialog .btn { min-width: 0; min-height: 44px; max-width: 100%; }
  .outreach-card {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
    gap: var(--s3);
    padding: var(--s4);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .outreach-card > .icon {
    position: absolute;
    top: var(--s4);
    right: var(--s3);
    width: var(--s4);
    height: var(--s4);
    color: var(--muted);
  }
  .outreach-card > .outreach-head { padding-right: var(--s5); }
  .outreach-card .row-main > .meta,
  .outreach-dialog .row-main > .meta,
  .outreach-ellipsis,
  .outreach-draft-words > .meta,
  .outreach-demo .row-title,
  .outreach-dialog .row-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .outreach-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s2);
    min-width: 0;
  }
  .outreach-stat,
  .outreach-tile {
    display: grid;
    align-content: start;
    gap: var(--s1);
    min-width: 0;
  }
  .outreach-tile { padding: var(--s2); text-align: center; }
  .outreach-tile:last-child { border-color: var(--accent); }
  .outreach-key {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--t11);
    font-weight: 600;
    color: var(--muted);
  }
  .outreach-value { min-width: 0; font-size: var(--t25); font-weight: 600; line-height: 1.1; }
  .outreach-stat > .outreach-value { font-size: var(--t18); }
  .outreach-tile > .meta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .outreach-dialog { width: min(520px, calc(100vw - 32px)); min-width: 0; }
  .outreach-body {
    min-width: 0;
    gap: var(--s4);
    padding: var(--s4);
    overflow-x: hidden;
  }
  .outreach-body > .outreach-head { align-items: flex-start; }
  .outreach-body .sheet-title { min-width: 0; overflow-wrap: anywhere; font-size: var(--t20); }
  .outreach-icon { flex: 0 0 44px; width: 44px; min-height: 44px; }
  .outreach-back > .icon { transform: rotate(180deg); }
  .outreach-ready {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: var(--s3) var(--s4);
    border-color: var(--accent);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .outreach-ready > .pill { flex: none; }
  .outreach-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--s2);
    min-width: 0;
    padding: var(--s3);
    border-radius: var(--r2);
  }
  .outreach-section .section-title { min-width: 0; font-size: var(--t15); }
  .outreach-chart {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    overflow: hidden;
  }
  .outreach-bar-row {
    display: grid;
    grid-template-columns: minmax(0, 72px) minmax(0, 1fr) 28px;
    align-items: center;
    gap: var(--s2);
    min-width: 0;
    font-size: var(--t13);
  }
  .outreach-bar-row > .outreach-chart { height: 10px; border-radius: var(--r3); }
  .outreach-number { min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
  .outreach-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2);
    min-width: 0;
  }
  .outreach-pair .outreach-section { padding: var(--s2); }
  .outreach-pair .section-title { font-size: var(--t11); }
  .outreach-pair .outreach-bar-row {
    grid-template-columns: minmax(0, 1fr) minmax(12px, .6fr) max-content;
    gap: var(--s1);
    font-size: var(--t11);
  }
  .outreach-pair .outreach-bar-row > .outreach-chart { height: 8px; }
  .outreach-pair .outreach-section > strong { font-size: var(--t13); }
  .outreach-headlines,
  .outreach-guests { padding: 0; gap: 0; overflow: hidden; }
  .outreach-headlines > .outreach-head,
  .outreach-guests > .outreach-head { padding: var(--s3) var(--s4); }
  .outreach-headlines > .row { margin: 0; border-top: 1px solid var(--panel); }
  .outreach-headline {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: var(--s2) var(--s4);
    gap: var(--s2);
    border: 0;
    border-top: 1px solid var(--panel);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .outreach-headline > .row-title { flex: 1 1 0; font-size: var(--t14); font-weight: 500; }
  .outreach-headline > .icon,
  .outreach-draft > .icon { order: 3; flex: none; width: var(--s4); height: var(--s4); color: var(--muted); }
  .outreach-guest {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 68px 20px;
    align-items: center;
    gap: var(--s2);
    min-width: 0;
    padding: var(--s2) var(--s4);
    border-top: 1px solid var(--panel);
    font-size: var(--t13);
  }
  .outreach-guest .row-title { font-weight: 500; }
  .outreach-more { justify-self: start; margin: var(--s2) var(--s3); }
  .outreach-approval-group { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .outreach-approval-group > .eyebrow,
  .outreach-approval-group > .outreach-head { padding-bottom: var(--s2); }
  .outreach-approval-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: var(--s1);
    min-width: 0;
    padding: var(--s2) 0;
    border-top: 1px solid var(--panel);
  }
  .outreach-check {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
  }
  .outreach-check > input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
  .outreach-draft {
    display: flex;
    align-items: center;
    gap: var(--s2);
    width: 100%;
    min-width: 0;
    min-height: 44px;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .outreach-draft-words { display: grid; flex: 1 1 0; gap: var(--s1); min-width: 0; }
  .outreach-draft-words > .row-title { font-size: var(--t14); }
  .outreach-warning { color: var(--danger); }
  .outreach-remaining { min-width: 0; }
  .outreach-prose,
  .outreach-wrap {
    min-width: 0;
    margin: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .outreach-prose { font-size: var(--t14); line-height: 1.45; }
  .outreach-head > .row-main > .outreach-wrap { white-space: normal; }
  .outreach-guests > .outreach-wrap { padding: var(--s3); }
  .buyer-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s3); }
  .buyer-field > span { display: flex; align-items: center; justify-content: space-between; min-height: 24px; }
  .buyer-field > p { margin: 0; overflow-wrap: anywhere; }
  .buyer-wide { grid-column: 1 / -1; }
  .buyer-choices { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
  .buyer-choice { display: inline-flex; align-items: center; gap: var(--s1); }
  .buyer-reach { display: flex; flex-wrap: wrap; gap: var(--s3); }
  .buyer-contact .meta { display: block; overflow-wrap: anywhere; white-space: normal; }
  .buyer-import { width: min(720px, calc(100vw - 32px)); }
  .buyer-import-where { display: flex; flex-wrap: wrap; gap: var(--s3); }
  .buyer-import-where > .field { flex: 1 1 160px; }
  .buyer-import-columns, .buyer-import-summary { display: grid; gap: var(--s2); min-width: 0; }
  .buyer-import-column { align-items: center; gap: var(--s3); }
  .buyer-import-column .row-main { min-width: 0; }
  .buyer-import-column .meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .buyer-import-column select { flex: 0 0 180px; max-width: 50%; }
  .buyer-import-list { max-height: 220px; margin: var(--s2) 0 0; padding-inline-start: var(--s4); overflow-y: auto; overflow-wrap: anywhere; }
  @media (max-width: 699px) {
    .buyers-view-field { flex: 1 1 140px; }
    .buyers-actions { margin-inline-start: 0; }
    /* The controls explain themselves here; their labels stay for screen readers. */
    .buyers-tools .field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .buyers-table, .buyers-table > tbody, .buyers-table > :is(thead, tbody) > tr, .buyers-table > :is(thead, tbody) > tr > :is(td, th) { display: block; width: auto; min-width: 0; white-space: normal; }
    .buyers-table > thead { display: none; }
    .buyers-table tr.buyers-row { display: grid; grid-template-columns: auto minmax(0, 1fr); padding: var(--s2) 0; border-bottom: 1px solid var(--panel); }
    .buyers-row > td { grid-column: 2; padding: 1px var(--s2); border: 0; }
    .buyers-row > .buyers-tick-cell { grid-column: 1; }
    .buyers-row > td[data-column]:not([data-column="name"]) { display: none; }
  }
  .pipeline-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-bottom: var(--s4); }
  .pipeline-content > .section:first-child { margin-top: 0; }

  /* Leads and Deals: record cards */
  .record-card { padding: 0; }
  .record-card > summary { padding: var(--s4); }
  .case-click-target { cursor: pointer; }
  .case-click-target:hover { background: var(--panel); }
  .record-body { display: grid; gap: var(--s3); padding: var(--s3) var(--s4) var(--s4); border-top: 1px solid var(--line); }
  /* A heading and one visible line; More overlays that line, never the padded row. */
  .case-teaser-preview { position: relative; }
  .case-teaser { position: relative; text-align: left; }
  .case-teaser > h3 { margin: 0 0 var(--s2); }
  .case-teaser-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
    line-clamp: 1; max-height: 1.55em; overflow: hidden; }
  .case-teaser-text > :first-child { margin-top: 0; }
  .case-teaser-text > :last-child { margin-bottom: 0; }
  .case-teaser-clamped .case-teaser-preview::after { content: 'More…'; position: absolute; right: 0; bottom: 0; padding-left: var(--s5); background: var(--fade-to-surface); color: var(--muted); font-size: var(--t12); font-weight: 600; line-height: 1.4; }
  .case-click-target:hover .case-teaser-clamped .case-teaser-preview::after { background: var(--fade-to-panel); }
  .deal-updates { position: relative; min-width: 0; }
  .deal-updates-track { display: flex; gap: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: var(--s2) var(--s7); scrollbar-width: none; scroll-padding-inline: var(--s7); }
  .deal-updates-track::-webkit-scrollbar { display: none; }
  .deal-updates-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-rest); }
  .deal-updates-left { left: 0; }
  .deal-updates-right { right: 0; }
  .deal-update[aria-pressed="true"], .task-row.task-selected { background: var(--accent-soft); border-color: var(--accent); }
  .deal-update { flex: 0 0 160px; min-width: 0; display: grid; gap: var(--s1); padding: var(--s2) var(--s3); text-align: left; color: var(--ink); cursor: pointer; scroll-snap-align: start; font: inherit; }
  .deal-update:hover { background: var(--panel); }
  .deal-update strong { font-size: var(--t15); font-variant-numeric: tabular-nums; }
  .deal-update span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--t12); color: var(--muted); }
  .deal-update > .draft-pill { justify-self: start; font-size: var(--t11); color: var(--tone-fg); }
  .phase-card { flex: 0 0 184px; min-width: 0; display: grid; align-content: start; gap: var(--s1); padding: var(--s2) var(--s3); text-align: left; color: var(--ink); cursor: pointer; scroll-snap-align: start; font: inherit; min-height: 96px; }
  .phase-card:hover { background: var(--panel); }
  /* Progress on the carousel's phase and task cards: in progress has a darker outline, not started is faded. */
  .phase-card:is([data-progress="current"], [data-progress="later"]):not([aria-selected="true"]),
  .task-row[data-progress="current"]:not(.task-selected) { border-color: var(--ink); }
  .phase-card[data-progress="not-started"], .task-row[data-progress="not-started"] { opacity: .55; }
  .phase-card[aria-selected="true"], .lead-dashboard-tile.task-selected { background: var(--accent-soft); border-color: var(--accent); }
  .phase-card-title { font-size: var(--t15); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .phase-card-state, .phase-card-date { font-size: var(--t12); color: var(--muted); }
  .phase-card-date { font-variant-numeric: tabular-nums; }
  .phase-panel { padding-top: var(--s2); }
  .phase-panel:focus-visible { outline-offset: 2px; }
  .task-list { display: grid; gap: var(--s2); }
  .project-task-open small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--t12); }
  .task-waiting { flex: 1 0 100%; }
  .work-card { padding: 0; }
  .work-summary { align-items: flex-start; }
  .work-body { display: grid; gap: var(--s3); padding: var(--s3) var(--s4) var(--s4); border-top: 1px solid var(--line); }
  .work-actions { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0 var(--s4) var(--s4); }
  .work-body > .work-actions { padding: 0; }
  /* Go to current task: the row is brought into view and lit for two seconds. */
  .row.flash { animation: row-flash 2s ease-out; }
  @keyframes row-flash { from { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); } to { background: var(--surface); box-shadow: 0 0 0 0 var(--paper-clear); } }
  .work-result > summary { display: grid; gap: var(--s1); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); }
  .work-result-teaser { max-height: 5.4em; overflow: hidden; color: var(--muted); font-size: var(--t13); line-height: 1.5; }
  .work-result-action { color: var(--accent); font-size: var(--t12); font-weight: 600; }
  .work-result[open] .work-result-teaser { display: none; }
  .work-result > .assistant-body { padding: var(--s3) 0 0; }
  .panelist-thinking { margin: var(--s1) 0 0; font-size: var(--t12); font-weight: 400; }
  .panelist-thinking .thinking-compact { max-height: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .panelist-thinking .thinking-content { max-height: min(38vh, 320px); }

  /* Case documents (Summary · Financials · Issues) */
  .case-presentation { width: 100%; min-width: 0; }
  .case-panel { padding: var(--s3) var(--s4); }
  .sheet-body .case-panel:has(> .checkpoint-summary:not([hidden])) { padding: 0; border: 0; }
  .case-panel-teaser .case-panel { position: relative; padding: 0; border: 0; background: transparent; }
  .case-panel-teaser .case-panel-head { margin-bottom: var(--s1); }
  .case-panel-teaser .tabs { flex-wrap: nowrap; overflow-x: auto; }
  .case-panel-teaser .tabs > button { flex: 0 0 auto; }
  .case-panel-teaser .summary-preview-text { max-height: 3.3em; overflow: hidden; }
  .case-panel-teaser .summary-preview-text > :first-child { margin-top: 0; }
  .case-panel-teaser .case-panel-more { position: absolute; right: 0; bottom: 0; background: var(--fade-to-surface); padding-left: var(--s5); }
  .case-panel-teaser .summary-context { margin-block: var(--s1); }
  .case-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
  .case-panel .assistant-body > * { max-width: var(--prose-width); }
  /* One gap below the sub-tabs on every document (Summary, Financials, Decisions, Risks): the head's --s2. Whatever
     a document opens with (a heading, table, list, decision card or section) starts flush. */
  .case-panel > [role="tabpanel"] > :first-child, .case-panel > [role="tabpanel"] > :first-child > :first-child { margin-top: 0; }
  /* Financials: a table's Source citation is a second, muted line under the figure. */
  .assistant-body td > .cell-source { display: block; margin-top: 2px; color: var(--muted); font-size: var(--t12); line-height: 1.4; }
  /* Risks: one ranked list, each risk a bold title, its brief summary and an "e.g." example in <em> (the browser's
     italic; the stylesheet adds no italic rule); the top nine show and the rest fold under "Show all N". Open risks an
     older appliance leaves unranked follow under a label. */
  .risk-list > .risk-item { margin: 0 0 var(--s2); }
  .risk-more > summary { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--s6); cursor: pointer; color: var(--muted); font-size: var(--t13); }
  .risk-more > summary::before { content: ''; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); }
  .risk-more[open] > summary::before { transform: rotate(45deg); }
  .risk-more > .risk-list { margin-top: var(--s1); }
  .risk-unranked { margin-top: var(--s3); }
  .risk-unranked > .eyebrow { margin: 0 0 var(--s1); }
  .risk-unranked-list > li > .risk-rating { display: block; }
  /* Decisions: lifecycle records (advance, approvals) are muted one-line history under the principal decisions; a
     superseded decision is collapsed to one line inside its card. The Summary's "Decisions:" line is a quiet aside. */
  .decision-history { margin-top: var(--s3); }
  .decision-history > .eyebrow { margin: 0 0 var(--s1); }
  .decision-history-list { margin: 0; padding: 0; list-style: none; }
  .decision-history-item { margin: 0; padding: 2px 0; overflow-wrap: anywhere; }
  .decision-superseded-card { padding-block: var(--s2); }
  .decision-superseded > summary { cursor: pointer; color: var(--muted); font-size: var(--t13); }
  .decision-superseded[open] > summary { margin-bottom: var(--s2); }
  /* A ledger card leads with the decision in the principal's words; its references are the muted line beneath. */
  .decision-statement { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
  .decision-references { margin: 2px 0 var(--s2); }
  .summary-context { margin: var(--s2) 0; color: var(--muted); font-size: var(--t12); }
  /* The checkpoint sheet's panel has no padding, so its Draft notice takes the content's inset to sit on the title's left edge. */
  .sheet-body .case-panel:has(> .checkpoint-summary:not([hidden])) > .summary-context { margin: var(--s3) var(--s4) 0; }
  .summary-expanded-text { max-height: min(60vh, 36rem); overflow-y: auto; scrollbar-gutter: stable; }
  .summary-preview-text { max-height: 5.5em; overflow: hidden; }
  .sheet-body .summary-expanded-text, .job-extension-panel .summary-expanded-text, .job-conversation .summary-expanded-text { max-height: none; overflow: visible; }
  /* Case conversation, after the case documents: it reads like the Ask Max chat (the person's message a right-hand
     .user-bubble, Max's review on the left with no bubble). Each side starts collapsed to one line with a caret and
     expands in place. */
  .case-conversation { padding: var(--s3) var(--s4); margin-top: var(--s3); }
  .case-conversation > summary { cursor: pointer; font-weight: 600; }
  .case-turns { margin: var(--s2) 0 0; padding: 0; list-style: none; }
  .case-turn { display: grid; gap: var(--s1); padding: var(--s2) 0; min-width: 0; }
  .case-turn > .turn { padding: 0; }
  .case-bubble { min-width: 0; }
  .case-turn-person .user-bubble { max-width: min(78%, var(--prose-width)); padding: var(--s2) var(--s3); white-space: normal; }
  .case-bubble > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s2); min-width: 0; }
  .case-bubble > summary::after { content: ''; grid-column: 2; grid-row: 1; width: 6px; height: 6px; margin: 0 2px 3px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; color: var(--muted); transform: rotate(45deg); }
  .case-bubble[open] > summary::after { margin: 3px 2px 0; transform: rotate(-135deg); }
  .case-bubble-label { grid-column: 1; color: var(--muted); font-size: var(--t12); }
  .case-bubble-preview { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .case-bubble[open] .case-bubble-preview { display: none; }
  .max-contribution:not([open]) .case-turn-verdict { display: none; }
  /* Max's analysis blocks: a one-line header (chevron, title, kind, preview while collapsed, standard tag at the right). */
  .analysis-block > summary { display: flex; align-items: center; gap: var(--s2); min-height: 32px; cursor: pointer; }
  .analysis-block > summary::after { display: none; }
  .analysis-chevron { display: inline-flex; color: var(--muted); transition: transform .15s ease; }
  .analysis-chevron .icon { width: 16px; height: 16px; }
  .analysis-block[open] .analysis-chevron { transform: rotate(180deg); }
  .analysis-title { flex: 0 0 auto; font-weight: 600; font-size: var(--t13); }
  .analysis-state, .analysis-meta { flex: 0 0 auto; }
  /* On phones the header wraps rather than run past the edge; the standard tag keeps to the right. */
  @media (max-width: 699px) { .analysis-block > summary { flex-wrap: wrap; row-gap: var(--s1); } }
  .analysis-meta { font-size: var(--t12); }
  .analysis-block .case-bubble-preview { flex: 1 1 auto; min-width: 0; color: var(--muted); }
  .analysis-tag { flex: 0 0 auto; margin-left: auto; }
  .case-turn-max > .analysis-block { width: min(100%, var(--prose-width)); }
  /* The work product continues the block: no second card frame inside it. */
  .analysis-block .ledger-work-product { padding: 0; border: 0; background: transparent; box-shadow: none; }
  .ledger-work-product > .task-work-product-content > :first-child { margin-top: 0; }
  .case-turn-text { margin: var(--s1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
  .case-turn-documents { margin: var(--s1) 0 0; padding-left: 1.2em; color: var(--muted); font-size: var(--t13); overflow-wrap: anywhere; }
  /* A step's chat ledger: decisions, holds and approvals are short centred lines between the two sides. */
  .ledger-event { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--s2); margin: var(--s2) 0; font-size: var(--t12); text-align: center; }
  .ledger-event > p { margin: 0; }
  .ledger-time { display: block; font-size: var(--t11); }
  .ledger-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
  .ledger-documents { margin: var(--s1) 0 0; padding-left: 1.2em; font-size: var(--t13); overflow-wrap: anywhere; }
  .ledger-work-product { margin-top: var(--s3); }
  /* The sheet foot's review bar: Approve and advance beside Needs changes, or the decision a draft asks for. */
  .sheet-foot > .step-review { margin: 0 0 var(--s2); }
  .step-review-bar[data-mode="review"] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
  .step-review-bar .step-review-notice { flex: 1 0 100%; margin: 0; }
  .step-review-bar .step-review-notice:empty { display: none; }
  .step-decision-heading { margin: 0 0 var(--s1); font-size: var(--t15); }
  .step-decision-question { margin: 0 0 var(--s1); font-weight: 600; }
  .step-decision-recommendation { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
  .step-decision-recommendation > strong { color: var(--ink); }
  .composer-review-actions { display: inline-flex; flex-wrap: wrap; gap: var(--s2); margin-left: auto; }
  #taskChatLeadActions:empty { display: none; }
  #taskChatLeadActions { margin: 0 0 var(--s2); }
  .summary-section { margin-top: var(--s3); }
  .summary-section > summary { display: flex; align-items: center; gap: var(--s2); min-height: var(--s6); cursor: pointer; font-weight: 600; }
  .summary-section > summary::before { content: ''; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); }
  .summary-section[open] > summary::before { transform: rotate(45deg); }
  .case-turn-max { min-width: 0; display: block; }
  .case-turn-max > .case-bubble { width: fit-content; max-width: min(100%, var(--prose-width)); }
  .case-turn-max .case-bubble[open] { width: auto; }
  .case-turn-verdict { margin: 0; font-weight: 600; font-size: var(--t13); }
  .case-turn-summary { margin-top: var(--s2); }
  .case-turn-summary > * { max-width: var(--prose-width); }

  /* Task and audit views */
  .task-timeline > *, .audit-timeline > * { width: min(var(--read-width), 100%); margin-left: auto; margin-right: auto; }
  .task-quality-notes ul { margin: var(--s1) 0 0; padding-left: 17px; color: var(--muted); font-size: var(--t13); line-height: 1.5; }
  .task-work-product { margin-bottom: var(--s4); }
  .task-work-product > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
  .task-work-product h2 { margin: var(--s1) 0 0; font-size: var(--t20); font-weight: 600; }
  .task-work-product-time { white-space: nowrap; }
  .task-work-product-content { padding-top: var(--s2); }
  .task-quality-notes { padding-top: var(--s2); border-top: 1px solid var(--line); }
  .task-quality-notes summary { color: var(--muted); font-size: var(--t13); font-weight: 600; }
  .task-quality-notes.strengths summary { color: var(--tone-success-fg); }
  .audit-entry { align-items: flex-start; }
  .audit-entry > time { flex: 0 0 104px; }
  .audit-entry details { margin-top: var(--s1); font-size: var(--t13); }
  .audit-entry summary { color: var(--accent); font-weight: 600; }

  /* Dates */
  .calendar-week-row.focused, .mini-month-days > .focused { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
  .calendar-period { display: flex; align-items: center; gap: var(--s1); }
  .calendar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
  .calendar-filter { position: relative; }
  .calendar-filter > div { position: absolute; z-index: 3; top: calc(100% + var(--s1)); right: 0; display: grid; gap: var(--s2); min-width: 220px; padding: var(--s3); box-shadow: var(--shadow-raise); }
  .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .calendar-weekday { padding: var(--s2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--t12); font-weight: 600; }
  .calendar-day { position: relative; display: grid; align-content: start; gap: var(--s1); min-height: 114px; padding: var(--s2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
  .calendar-day > time { color: var(--muted); font-size: var(--t12); }
  .calendar-day.outside { background: var(--paper); }
  .calendar-day.today > time { display: grid; place-items: center; width: 22px; height: 22px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 600; }
  /* The day a Deadlines tile landed on; the next period navigation clears it. */
  .calendar-day.focused { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
  .calendar-event { padding: var(--s1) var(--s2); border: 0; border-left: 3px solid var(--tone-fg); border-radius: 0 var(--r1) var(--r1) 0; background: var(--tone-bg); color: var(--tone-fg); font-size: var(--t12); line-height: 1.35; text-align: left; }
  .week-grid { border-top: 1px solid var(--line); }
  .calendar-week-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
  .calendar-week-row > div { display: grid; gap: var(--s1); }
  .quarter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
  .mini-month { min-height: 180px; }
  .mini-month > strong { display: block; margin-bottom: var(--s2); font-size: var(--t15); font-weight: 600; }
  .mini-month-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s1); color: var(--muted); font-size: var(--t12); }
  .mini-month-days > span { display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 18px; }
  .calendar-cube { width: 9px; height: 9px; align-self: center; justify-self: center; padding: 0; border: 0; border-radius: 50%; background: var(--tone-fg); }

  /* Reports share the Deal record-card shell and row header, with explicit actions. */
  .report-card { position: relative; cursor: pointer; }
  .report-card-header { padding: var(--s4); flex-wrap: wrap; }
  .report-card .row-main { min-width: 0; overflow-wrap: anywhere; }
  /* Collapsed, the card keeps its whole outline, bottom edge included, as collapsed Deal and Campaign cards do (Matthew, 2026-10-31). */
  /* Saved searches (Leads › Searches): record cards that expand, as Lead cards do, to their candidates. */
  .search-card-header { flex-wrap: wrap; }
  .search-card .row-title-line > .row-title { flex: 1 1 0; min-width: 0; }
  .search-card .row-title-line > .pill, .search-card .row-tools { flex: 0 0 auto; }
  .search-card .row-main > .meta { white-space: normal; }
  .search-card > .record-body { border-top: 0; }
  .search-card-pending > .search-card-header { padding: var(--s4); }
  .search-card-pending .row-main > .btn { justify-self: start; margin-top: var(--s2); }
  .search-results { display: grid; gap: var(--s2); min-width: 0; }
  /* An investor search lists its firms (search-list.mjs): rank-ordered rows, each opening its detail beneath it. */
  .search-buyer-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
  .search-buyer-actions .search-detail-actions { margin: 0; }
  .search-list-row .row-main > .meta { white-space: normal; overflow-wrap: anywhere; }
  .search-list-pages { display: flex; align-items: center; gap: var(--s2); }
  /* An open firm's detail takes the row's whole width and only it is shaded, so it reads apart from the firm's own
     line and the next firm (Matthew, 2026-10-31). */
  .search-list-row > .search-detail { flex: 1 1 100%; }
  .search-list-row > .confirm-bar { flex: 1 1 100%; } /* a Known Buyer's "are you sure" spans the row */
  .rows > .search-list-row:has(> .search-detail:not([hidden])) { background: var(--surface); } /* no hover shade on an open firm */
  .search-list-row > .search-detail:not([hidden]) { padding: var(--s3); border-top: 0; border-radius: var(--r2); background: var(--accent-soft); }
  .search-list-row .row-title { white-space: normal; overflow-wrap: anywhere; } /* a firm's full name wraps; it is the row's whole point */
  .search-list-row .row-title-line { align-items: baseline; } /* a change badge sits on a wrapped name's first line */
  /* The carousel: tiles in rank order on one scroll-snapped row; the arrows are the Deal date carousel's. */
  .search-carousel { position: relative; min-width: 0; container-type: inline-size; } /* a phone tile is a share of its width */
  .search-carousel-track { display: flex; gap: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: var(--s1) var(--s7); scroll-padding-inline: var(--s7); scrollbar-width: none; }
  .search-carousel-track::-webkit-scrollbar { display: none; }
  .search-tiles { display: flex; gap: var(--s2); }
  .search-tile { position: relative; flex: 0 0 200px; display: grid; align-content: start; gap: var(--s2); padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); cursor: pointer; scroll-snap-align: start; }
  .search-tile:hover { background: var(--panel); }
  .search-tile[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
  .search-tile-map { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r1); background: var(--panel); color: var(--muted); }
  .search-tile-map > img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .search-tile-placeholder .icon { width: 24px; height: 24px; }
  .search-tile-rank { position: absolute; top: var(--s3); left: var(--s3); min-width: 22px; padding: 0 var(--s1); border-radius: var(--r1); background: var(--surface); color: var(--ink); font-size: var(--t12); font-weight: 600; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
  .search-tile-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: var(--t13); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
  .search-tile-price { font-variant-numeric: tabular-nums; }
  /* Google search links the member runs in their own browser: a candidate's or Lead's price, Ask Max's web searches. */
  .search-links { margin: 0; padding-left: var(--s4); overflow-wrap: anywhere; }
  /* + Lead from a candidate with a price search link: a side sheet on the right with a clear backdrop, so the
     candidate stays readable to its left (Matthew, 2026-10-31); the dialog shows the same link above Your price. */
  .dialog-beside { position: fixed; inset: var(--s4) var(--s4) auto auto; margin: 0; width: min(440px, calc(100vw - 32px)); }
  .dialog-beside::backdrop { background: transparent; }
  .search-tile-badge { justify-self: start; }
  .search-tile-more { flex: 0 0 auto; align-self: center; scroll-snap-align: end; }
  /* The chosen candidate: title and rank, the change line, facts, why it fits, limits, sources; Promote bottom right. */
  .search-detail { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere; }
  .search-detail > * { margin: 0; }
  .search-detail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); }
  .search-detail-title { margin: 0; font-size: var(--t16); font-weight: 600; }
  .search-detail-change { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }
  .search-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s1) var(--s3); font-size: var(--t13); }
  .search-facts > dt { color: var(--muted); }
  .search-facts > dd { margin: 0; }
  .search-criteria { display: grid; gap: var(--s2); padding-left: var(--s4); font-size: var(--t14); }
  .search-criteria .meta { display: block; font-size: var(--t12); }
  /* The candidate write-up: Max's summary, then small tables (qualifications, ranking) that scroll sideways on their own
     on a narrow screen, and the collapsed "Not checked here" footnote. */
  .search-summary { margin: 0; font-size: var(--t15); line-height: 1.55; }
  .search-table-section { display: grid; gap: var(--s1); min-width: 0; }
  .search-table-wrap { overflow-x: auto; }
  /* Words stay whole in a table cell (the panel breaks anywhere); a table too wide for a phone scrolls in its wrap. */
  .search-table { width: 100%; border-collapse: collapse; font-size: var(--t13); overflow-wrap: break-word; }
  .search-table th { padding: var(--s1) var(--s2); border-bottom: 1px solid var(--line); color: var(--muted); font-weight: 600; text-align: left; }
  .search-table td { padding: var(--s1) var(--s2); border-bottom: 1px solid var(--line); vertical-align: top; }
  .search-table th:first-child, .search-table td:first-child { padding-left: 0; }
  .search-met { display: inline-block; min-width: 1.2em; color: var(--tone-fg); font-weight: 600; text-align: center; }
  .search-met.tone-neutral { color: var(--muted); }
  .search-footnote > summary { display: inline-flex; align-items: center; gap: var(--s1); }
  .search-footnote > summary .icon { width: 14px; height: 14px; transition: transform .15s ease; }
  .search-footnote[open] > summary .icon { transform: rotate(90deg); }
  .search-footnote > p, .search-facts-toggle > dl { margin: var(--s1) 0 0; }
  .search-finds { display: block; white-space: normal; }
  .search-why { margin: var(--s1) 0 0; font-size: var(--t13); }
  .search-why-here { margin: 0; font-size: var(--t15); font-weight: 600; line-height: 1.45; } /* "Rank n: …", above the description */
  .search-limits { display: grid; gap: var(--s1); color: var(--muted); font-size: var(--t13); }
  .search-limits > p { margin: 0; }
  .search-detail-sources { font-size: var(--t13); }
  /* An investor firm's Contacts (investor-contacts.mjs): small labelled groups of plain lines and links, then a collapsed
     More (entity owners, social accounts, what could not be read, sources). The same lines make a CRM card's body. */
  .investor-contacts { min-width: 0; }
  .investor-contacts > summary { display: inline-flex; align-items: center; gap: var(--s1); cursor: pointer; }
  .investor-contacts > summary .icon { width: 14px; height: 14px; transition: transform .15s ease; }
  .investor-contacts[open] > summary .icon { transform: rotate(90deg); }
  .investor-contacts-body { display: grid; gap: var(--s2); min-width: 0; margin-top: var(--s2); }
  .investor-contacts-body > * { margin: 0; }
  .investor-contacts-group { display: grid; gap: var(--s1); min-width: 0; }
  .investor-contacts-group > .meta { margin: 0; font-weight: 600; }
  .investor-contacts-list { display: grid; gap: var(--s1); margin: 0; padding: 0; list-style: none; font-size: var(--t14); }
  .investor-contacts-more-body { display: grid; gap: var(--s2); margin-top: var(--s2); }
  /* Settings › Tabs (presentation.mjs): one row per tab and per + button. */
  .presentation-settings { display: grid; gap: var(--s3); }
  .presentation-settings > h3 { margin: 0; }
  .presentation-rows { display: grid; gap: var(--s2); }
  .presentation-row { display: grid; grid-template-columns: minmax(80px, 0.8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); align-items: center; }
  .presentation-row > input, .presentation-row select { min-width: 0; width: 100%; }
  .presentation-icon { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
  .presentation-icon-preview { display: inline-flex; flex: none; }
  .presentation-icon-preview .icon { width: 18px; height: 18px; }
  .presentation-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s2); }
  @media (max-width: 699px) {
    .presentation-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .presentation-head { display: none; }
  }
  /* Buyers › Campaigns (campaigns.mjs): each campaign a heading, then one simple card per buyer, newest first. */
  .campaign-list { display: grid; gap: var(--s3); }
  .campaign { min-width: 0; }
  .campaign-body { padding: 0 var(--s4) var(--s4); }
  .campaign-body > .empty { margin: 0; }
  /* Campaign stats: a full-width collapsed card above the buyers; its popup says Coming Soon (Matthew, 2026-10-31). */
  .campaign-stats { display: flex; align-items: center; gap: var(--s2); width: 100%; margin-bottom: var(--s3); padding: var(--s3) var(--s4);
    color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .campaign-stats:hover { border-color: var(--accent); }
  .campaign-stats .icon { width: 16px; height: 16px; flex: none; }
  /* Admin (Matthew, 2026-10-31) says only Coming Soon, centred as the Campaign stats popup says it. */
  .campaign-stats-soon { margin: 0; padding: var(--s6) 0; text-align: center; color: var(--muted); font-size: var(--t17); }
  .campaign-title { overflow-wrap: anywhere; }
  .campaign-choices:empty { display: none; }
  /* + Buyer: the identifying fields two to a row; Name and Notes take the whole row. */
  .known-buyer-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .known-buyer-fields .known-buyer-wide { grid-column: 1 / -1; }
  @media (max-width: 560px) { .known-buyer-fields { grid-template-columns: minmax(0, 1fr); } }
  /* + Investor asks how the company knows them (Matthew, 2026-11-05): three choices, one line each. */
  .known-buyer-levels { display: grid; gap: var(--s2); margin: 0; padding: 0; border: 0; min-width: 0; }
  .known-buyer-levels > legend { padding: 0; margin-bottom: var(--s1); color: var(--muted); font-size: var(--t12); font-weight: 500; }
  .known-buyer-level { align-items: flex-start; min-height: 44px; }
  .known-buyer-level > span { display: grid; gap: 1px; min-width: 0; }
  .known-buyer-level strong { font-size: var(--t14); }
  .campaign-choice { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
  /* Buyers are same-size tiles, three across a wide page and the campaign's full width (Matthew, 2026-10-31). A tile
     shows what fits; a click opens the whole card in a popup, so tiles never scroll. */
  .buyer-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 260px; gap: var(--s3); }
  .buyer-card { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; height: 100%; overflow: hidden; overflow-wrap: anywhere; cursor: pointer; }
  .buyer-card:hover { border-color: var(--accent); }
  .buyer-card-body { display: grid; gap: var(--s2); align-content: start; min-height: 0; overflow: hidden; }
  .buyer-card-body > * { margin: 0; }
  .buyer-card-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
  .buyer-card-open:hover { text-decoration: underline; }
  .buyer-dialog-body { gap: var(--s3); }
  .buyer-dialog-body > :not(.dialog-head) { margin: 0; }
  @media (max-width: 999px) { .buyer-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 699px) { .buyer-cards { grid-template-columns: minmax(0, 1fr); } }
  .buyer-card > * { margin: 0; }
  .buyer-card > .confirm-bar { flex: none; align-content: start; } /* a column card: the bar keeps its own height */
  .buyer-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); }
  .buyer-card-titles { display: grid; min-width: 0; }
  .buyer-card-titles > .row-title { white-space: normal; overflow-wrap: anywhere; }
  .investor-contacts-inline { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin: 0; padding: 0; list-style: none; font-size: var(--t14); }
  .search-detail-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); padding-top: var(--s1); }
  .search-maps-link { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--t14); }
  .search-maps-link .icon { width: 16px; height: 16px; }
  .search-promote, .investor-campaign-add { margin-left: auto; } /* the panel's one committing action, bottom right */
  /* Phones: everything stacks; a tile is most of the width so the next one peeks; swipe replaces the arrows; Promote
     is full width at the bottom of the panel. */
  @media (max-width: 699px) {
    .search-carousel-track { padding-inline: var(--s1); scroll-padding-inline: var(--s1); }
    .search-carousel .deal-updates-arrow { display: none; }
    .search-tile { flex-basis: 70cqi; }
    .search-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .search-facts > dd + dt { margin-top: var(--s2); }
    .search-promote, .investor-campaign-add { flex: 1 1 100%; margin-left: 0; }
  }
  .search-save { margin-top: var(--s2); }
  .search-save-done { margin: 0; }
  .search-save-calls { display: grid; gap: var(--s2); margin: 0; padding: 0; border: 0; }
  .search-save-calls > legend { margin-bottom: var(--s1); padding: 0; color: var(--muted); font-size: var(--t12); font-weight: 500; }
  /* Ask Max's handoff card: one line saying what the button does, the button beside it; on a narrow screen the
     button wraps under the line. */
  .handoff-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s3); }
  .handoff-question { flex: 0 1 auto; min-width: 0; }
  .handoff-card > .btn { flex: 0 1 auto; max-width: 100%; white-space: normal; }
  .job-extension-panel:not(:empty) { display: grid; gap: var(--s3); margin-bottom: var(--s4); }
  .report-draft-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
  .report-draft-heading strong { font-size: var(--t22); font-weight: 600; }
  .report-draft-actions, .report-citations { display: flex; flex-wrap: wrap; gap: var(--s2); }
  .report-question { display: grid; gap: var(--s2); padding-block: var(--s4); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
  .report-question-heading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
  .report-question p { margin: 0; }
  .report-question textarea { resize: vertical; }
  .report-question-struck .report-question-heading > span:first-child, .report-struck-value { text-decoration: line-through; color: var(--muted); }
  .report-question > .field, .report-candidate { min-width: 0; }
  .report-question > .field select, .report-question textarea { min-width: 0; width: 100%; max-width: 100%; }
  .report-other-answer[hidden] { display: none; }
  .report-candidate { display: grid; gap: var(--s2); }
  .report-section-title { margin: var(--s4) 0 0; font-size: var(--t16); }
  .report-citation { display: inline-block; min-width: 0; max-width: min(17em, 100%); padding: 2px var(--s2); overflow: hidden; border: 1px solid var(--tone-success-fg); border-radius: var(--r3); background: var(--tone-success-bg); color: var(--tone-success-fg); font-size: var(--t12); font-weight: 600; line-height: 1.35; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
  .report-citation:hover, .report-citation:focus-visible { background: var(--surface); color: var(--tone-success-fg); text-decoration: none; }
  .report-draft-body > progress { width: 100%; accent-color: var(--accent); }

  .report-draft-sheet { background: var(--paper); }
  .report-draft-sheet .sheet-head, .settings-sheet > .sheet-head { align-items: flex-start; gap: 14px; padding: 30px 36px 22px; border-top: 3px solid var(--accent); }
  .report-draft-sheet .sheet-title, .settings-sheet > .sheet-head .sheet-title { font-size: var(--t34); font-weight: 700; line-height: 1.15; letter-spacing: -.04em; white-space: normal; }
  .sheet:has(.report-progress) .sheet-head { gap: var(--s2); padding-block: var(--s4); }
  .sheet:has(.report-progress) .sheet-title { font-size: var(--t26); }
  .report-draft-sheet .sheet-body { padding: 26px 36px; }
  .report-draft-sheet .sheet-foot { padding: var(--s4) 36px max(22px, env(safe-area-inset-bottom)); }
  .report-draft-sheet .sheet-foot .btn { min-height: 44px; }

  .sheet-head > .btn-icon { border-color: var(--line-strong); }
  #reportsView .page-title { font-size: var(--t48); font-weight: 700; }

  /* Job sheet */
  .job-notice { margin: 0; padding: var(--s2) 0; }
  .job-messages { min-width: 0; }
  .job-message { overflow-wrap: anywhere; }
  .job-message-assistant > summary, .job-message-draft > summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 24px; cursor: pointer; }
  .job-message > strong, .job-message-user > div > strong { color: var(--muted); font-size: var(--t12); }
  .job-message details { margin-top: 1.2em; }
  .job-message .assistant-body { margin-top: var(--s2); }
  .job-message-harness { color: var(--muted); font-size: var(--t13); }
  .job-message-harness summary { cursor: pointer; }
  /* Max's analysis on a draft: a button-like disclosure with a chevron, open by default. */
  .job-work-detail > summary.disclosure { display: inline-flex; align-items: center; gap: var(--s2); min-height: 32px; padding: var(--s1) var(--s3); border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); font-size: var(--t13); font-weight: 600; }
  .job-work-detail > summary .disclosure-chevron { width: 14px; height: 14px; transition: transform .15s ease; }
  .job-work-detail[open] > summary .disclosure-chevron { transform: rotate(90deg); }
  .task-verdict { margin: 0 0 var(--s3); font-size: var(--t15); }
  /* Recorded source and evidence appendices of a draft stay collapsed until asked for. */
  .draft-appendix { margin-top: var(--s3); }
  .draft-appendix > summary { display: inline-flex; align-items: center; gap: var(--s2); color: var(--muted); font-size: var(--t13); font-weight: 600; }
  .draft-appendix > summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
  .draft-appendix[open] > summary::before { transform: rotate(45deg); }
  .job-attachment-names { min-width: 0; overflow-wrap: anywhere; }

  /* Workflow graph and editor */
  .job-graph-legend { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); }
  .job-graph-zoom { display: flex; align-items: center; gap: var(--s1); margin-left: auto; }
  .job-graph-zoom .job-graph-zoom-level { min-width: 56px; padding: 0 var(--s2); font-variant-numeric: tabular-nums; }
  /* The graph pans by drag, wheel and keyboard and zooms by pinch; touch gestures belong to it, not the page. */
  .job-graph-scroll { flex: 1; min-height: 0; padding: var(--s3); overflow: auto; overscroll-behavior: contain; background: var(--paper); cursor: grab; touch-action: none; user-select: none; }
  .job-graph-scroll.panning, .job-graph-scroll.panning .job-graph-node { cursor: grabbing; }
  .job-graph-scroll:focus-visible { outline-offset: -3px; }
  .job-graph-stage { position: relative; margin: 0 auto; }
  .job-graph-canvas { position: absolute; transform-origin: top left; }
  .job-graph-canvas > svg { position: absolute; inset: 0; pointer-events: none; }
  .job-graph-canvas path { fill: none; stroke: var(--line-strong); stroke-width: 1.2px; stroke-linejoin: round; }
  .job-graph-node { position: absolute; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--s1); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--r1); background: var(--surface); color: var(--ink); text-align: left; }
  .job-graph-node strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--t12); font-weight: 600; line-height: 1.35; }
  .job-graph-node > .pill { flex: 0 0 auto; }
  .job-graph-node[data-state="working"] { border-left-color: var(--tone-working-fg); }
  .job-graph-node[data-state="paused"], .job-graph-node[data-state="reviewable"] { border-left-color: var(--tone-attention-fg); }
  .job-graph-node[data-state="approved"], .job-graph-node[data-state="completed"] { border-left-color: var(--tone-success-fg); }
  .job-graph-node:disabled { opacity: 1; color: var(--muted); cursor: inherit; }
  .job-graph-node:enabled:hover { background: var(--panel); }
  /* A Deal's workflow graph: one band per phase, status on each node's left edge, the current task ringed. */
  .workflow-graph-band { fill: var(--panel); stroke: var(--line); stroke-width: 1px; }
  .workflow-graph-phase { position: absolute; top: 0; height: 36px; padding: 0 var(--s3); overflow: hidden; color: var(--muted); font-size: var(--t12); font-weight: 600; line-height: 36px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  .job-graph-canvas path.workflow-graph-edge-done { stroke: var(--tone-success-fg); }
  .workflow-graph-node[data-status="in_progress"] { border-left-color: var(--tone-working-fg); }
  .workflow-graph-node[data-status="reviewable"] { border-left-color: var(--tone-attention-fg); }
  .workflow-graph-node[data-status="complete"] { border-left-color: var(--tone-success-fg); }
  .workflow-graph-node[data-status="failed"] { border-left-color: var(--tone-danger-fg); }
  .workflow-graph-node[aria-current="step"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
  .workflow-editor-meta { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); }
  .workflow-editor-meta input[type="text"] { flex: 1 1 260px; min-width: 0; font-weight: 600; }
  .workflow-editor-status { flex-shrink: 0; padding: var(--s1) var(--s4); }
  .workflow-editor-body { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); min-height: 0; }
  .workflow-editor-graph { min-width: 0; }
  .workflow-editor-inspector { display: grid; align-content: start; gap: var(--s2); padding: var(--s3) var(--s4) var(--s5); overflow-y: auto; border-left: 1px solid var(--line); background: var(--surface); }
  .workflow-editor-section { display: grid; gap: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
  .workflow-editor-tools-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1) var(--s2); margin: 0; padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r1); font-size: var(--t12); }
  .workflow-editor-tools-list label { display: flex; align-items: center; gap: var(--s1); }
  .workflow-editor-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
  .workflow-editor-chip { padding-right: 2px; }
  .workflow-editor-danger { display: flex; flex-wrap: wrap; gap: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
  .workflow-editor-node[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
  .workflow-editor-node.connecting { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .workflow-editor-handle { position: absolute; z-index: 2; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); cursor: crosshair; touch-action: none; transform: translate(-50%, -50%); }
  .workflow-editor-handle::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
  .workflow-editor-handle:hover { border-color: var(--accent); background: var(--accent-soft); }
  .job-graph-canvas path.workflow-editor-preview { stroke: var(--accent); stroke-width: 2px; stroke-dasharray: 5 4; }

  /* Settings: a left flyout sheet; the rail sits at the top of the scrolling panel, the section beneath it,
     and the appliance status, versions and Sign out in the foot. */
  .settings-sheet > .sheet-head .sheet-title { flex-basis: 0; }
  .settings-body { display: flex; flex-direction: column; gap: 30px; padding: 20px 28px 30px; }
  /* The phone rail is a scroll row; as a flex child it keeps its height when the section beneath overflows. */
  .settings-body > * { flex-shrink: 0; }
  .settings-content { min-width: 0; }
  .settings-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding-top: var(--s3); }
  .settings-sheet .performance-headlines, .settings-sheet .health-component-grid, .settings-sheet .health-capacity-grid { grid-template-columns: 1fr; }
  .appliance-state { display: flex; align-items: center; gap: var(--s3); color: var(--muted); font-size: var(--t12); }
  .appliance-state > span { display: grid; gap: 2px; min-width: 0; }
  .appliance-state strong { color: var(--ink); font-weight: 600; }
  .runtime-versions { display: flex; flex-wrap: wrap; gap: var(--s1); }
  .settings-section { display: grid; gap: var(--s3); }
  .settings-section > .settings-section { padding-top: var(--s4); border-top: 1px solid var(--line); }
  .appliance-email { gap: var(--s1); }
  .appliance-email p { margin: 0; }
  .support-grant-card { display: grid; gap: var(--s3); }
  .support-grant-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
  .settings-intro { display: grid; gap: var(--s1); }
  .people-invite-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .invitation-result { display: grid; gap: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
  .invitation-result > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); }
  .connection-capability-group { display: grid; gap: var(--s2); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
  .connection-capability-group > header { display: grid; gap: 2px; margin: var(--s1) 0; }
  .connection-capability-group > header > strong { font-size: var(--t14); font-weight: 600; }
  .provider-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); }
  .provider-rank-controls { display: flex; gap: var(--s1); }
  .provider-credential-entry { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); }
  .provider-policy { grid-column: 1 / -1; }
  .provider-policy > summary { color: var(--accent); font-size: var(--t13); font-weight: 600; }
  .provider-policy-fields { display: grid; grid-template-columns: auto repeat(4, minmax(90px, 1fr)) auto; align-items: end; gap: var(--s2); margin-top: var(--s2); }
  .performance-headlines { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
  .health-component-grid, .health-capacity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .health-component { display: flex; align-items: center; gap: var(--s2); min-width: 0; padding: var(--s2) var(--s3); }
  .health-component div { display: grid; min-width: 0; }
  .health-component strong { font-size: var(--t13); font-weight: 600; }
  .health-component span { overflow: hidden; color: var(--muted); font-size: var(--t12); text-overflow: ellipsis; white-space: nowrap; }
  .maintenance-journal { display: grid; }
  .maintenance-journal > div { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: var(--t12); }
  .maintenance-journal strong { font-weight: 600; }
  .maintenance-journal span { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
  .appliance-events .maintenance-journal { max-height: 170px; overflow: auto; }
  /* Chats token counts: one row per period; the frame scrolls sideways on a phone. */
  .chat-usage { display: grid; gap: var(--s2); }
  .usage-table-frame { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); }
  .usage-table { width: 100%; border-collapse: collapse; font-size: var(--t13); font-variant-numeric: tabular-nums; }
  .usage-table th, .usage-table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
  .usage-table thead th { background: var(--panel); color: var(--muted); font-weight: 600; }
  .usage-table tbody th { font-weight: 500; }
  .usage-table tbody tr:last-child > * { border-bottom: 0; }
  .usage-table .usage-number { text-align: right; }
  .slot-activity-shell { max-width: 100%; overflow: hidden; }
  .slot-activity-grid { display: grid; gap: var(--s1); min-width: 0; }
  .slot-activity-heading { display: grid; grid-template-columns: 72px 1fr auto; align-items: end; gap: 2px; color: var(--muted); font-size: var(--t12); }
  .slot-activity-heading strong { font-weight: 600; color: var(--ink); }
  .slot-activity-row { display: grid; grid-template-columns: 72px repeat(30, minmax(0,1fr)); align-items: center; gap: 2px; }
  .slot-activity-row strong { color: var(--muted); font-size: var(--t12); font-weight: 500; }
  .slot-activity-row i { width: 100%; min-width: 0; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 0; background: transparent; }
  .slot-activity-row i.active { border-color: var(--accent); background: var(--accent); }
  .slot-activity-row.human i.active { border-color: var(--eyebrow); background: var(--eyebrow); }
  .intelligence-layers { display: grid; gap: var(--s3); }
  .intelligence-layer { display: grid; gap: var(--s3); }
  .intelligence-layer h3, .intelligence-layer > summary { margin: 0; font-size: var(--t17); font-weight: 600; }
  /* The Answer bank (a disclosure card under Company Details) lines its filters up with the card's text. */
  .intelligence-layer > .row { padding-inline: 0; }
  .intelligence-layer p { margin: 0; }
  .archive-transfer-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
  .steering > summary { justify-content: space-between; width: 100%; }
  .steering[open] > summary .icon { transform: rotate(180deg); }
  .steering-row { min-width: 0; margin: var(--s3) 0; padding: var(--s2); border: 0; }
  .steering .row-title { white-space: normal; }
  .steering .meta { margin-top: var(--s1); white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  #themeToggle[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
  .inference-models { display: grid; gap: var(--s3); }
  .inference-actions { display: flex; gap: var(--s2); }
  .inference-picker { position: relative; }
  .inference-picker-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 36px; padding: var(--s2) var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r1); background: var(--surface); }
  .inference-picker-trigger::after { content: ''; width: 7px; height: 7px; margin-left: var(--s2); border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  .inference-picker-trigger:disabled { opacity: .5; cursor: default; }
  /* The open model list is a raised surface over the section, above the sheet's content. */
  .inference-options { position: absolute; z-index: 10; top: calc(100% + var(--s1)); left: 0; width: 100%; padding: var(--s1); border: 1px solid var(--line-strong); border-radius: var(--r2); background: var(--surface); box-shadow: var(--shadow-raise); }
  .inference-options button { display: flex; width: 100%; padding: var(--s2); border: 0; border-radius: var(--r1); background: transparent; color: var(--ink); text-align: left; }
  .inference-options button:hover { background: var(--panel); }
  .inference-options button[aria-pressed="true"] { background: var(--accent-soft); }
  .inference-model-label, .inference-model-label > span:first-child { display: inline-flex; align-items: center; gap: var(--s2); }
  .workflow-settings-toolbar { display: flex; flex-wrap: wrap; gap: var(--s2); }
  .settings-rail { gap: 0; padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
  .settings-rail > button { min-height: 44px; padding: 9px var(--s3); }
  /* Settings opens on the rail alone: no section is chosen yet, so nothing sits under its rule. */
  .settings-home .settings-rail { padding-bottom: 0; border-bottom: 0; }
  .settings-rail > button.active { border-color: transparent; border-radius: var(--r1); background: var(--accent); color: var(--accent-ink); }
  .settings-content .sheet-title { margin-bottom: var(--s3); font-size: var(--t28); font-weight: 700; }
  .settings-foot { padding: 18px 28px; }
  .max-profile-field { width: 100%; gap: var(--s2); margin-bottom: 6px; }
  .max-profile-field > span { color: var(--ink); font-size: var(--t13); font-weight: 600; }
  .max-profile-field textarea, .max-profile-field select { padding: var(--s3); background: var(--paper); font-size: var(--t16); line-height: 1.5; }
  .max-profile-field textarea { min-height: 86px; }
  .max-identity-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
  .max-profile-field > label { color: var(--ink); font-size: var(--t13); font-weight: 600; }
  /* Max's avatar: a round preview beside the preset choice and Upload (both for admins only). */
  .max-avatar-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
  .max-avatar-row > select { flex: 1 1 160px; width: auto; min-width: 0; }
  .max-avatar-preview { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; background: var(--panel); object-fit: cover; }
  .max-avatar-preview.max-avatar-preview-mark { border-radius: 0; background: transparent; object-fit: contain; }

  .front-door-actions, .document-preparation { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
  .record-card .row-title-line { flex-wrap: wrap; }
  .record-card .row-title-line > .row-title { flex: 1 1 160px; }
  .project-card > summary { gap: var(--s1) var(--s2); }
  .project-card > summary > .row-main { flex-basis: 100%; }
  /* The teaser's tab row and carousel must never widen the card past a phone screen. */
  .project-card { min-width: 0; }
  .project-card > summary > .row-main { grid-template-columns: minmax(0, 1fr); }
  .project-card .case-panel-teaser .case-document-tabs { overflow-x: auto; scrollbar-width: none; }
  .project-card .row-title-line { flex-wrap: nowrap; }
  .project-card .row-title-line > .row-title { flex: 1 1 0; min-width: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
  /* One title line, as on a Deal card: a long name ellipsizes before the pill and the Sharing and Edit details icons. */
  .report-card .row-title-line { flex-wrap: nowrap; }
  .report-card .row-title-line > .row-title { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .report-card .row-title-line > .pill, .report-card .row-tools { flex: 0 0 auto; }
  .project-card .deal-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .project-card .deal-as-of { display: inline-block; flex: 0 1 auto; min-width: 0; margin-left: var(--s1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t12); font-weight: 600; background: transparent; border: 1.5px solid currentColor; }
  /* Outline only: green on the live Summary and on one the Deal has not changed since, red on any older one. */
  .project-card .as-of-current { color: var(--accent); }
  .project-card .as-of-historical { color: var(--danger); }
  .project-card .as-of-draft { color: var(--tone-attention-fg); border-style: dashed; }
  .draft-as-of + .job-actions { margin: var(--s2) 0 var(--s3); }
  .project-card .row-tools { flex: 0 0 auto; }
  /* Collapsed, a Deal card is its summary teaser above a divider: a thin full-width rule with a small chevron
     button centred on it, the card's only expand/collapse control. Expanded, it adds phase cards, tasks and "More…"; the divider separates them from the teaser, and the chevron turns over. */
  /* A step's draft waiting on the principal stays visible collapsed: it is the card's one call to act. */
  /* Four more narrative lines while expanded, on desktop and phone. */
  .project-card[data-state="expanded"] .case-panel-teaser .summary-preview-text { max-height: 9.9em; }
  .project-card[data-state="collapsed"] .case-panel-more { display: none; }
  .project-card[data-state="collapsed"] > .case-click-target { cursor: default; }
  .project-card[data-state="collapsed"] > .case-click-target:hover { background: var(--surface); }
  .project-card[data-state="collapsed"] > .case-click-target:hover .case-teaser-clamped .case-teaser-preview::after { background: var(--fade-to-surface); }
  .project-card > .record-body { border-top: 0; }
  .deal-card-divider { flex: 0 0 100%; display: flex; align-items: center; gap: var(--s2); margin-bottom: calc(-1 * var(--s2)); }
  .deal-card-divider::before, .deal-card-divider::after { content: ''; flex: 1 1 0; border-top: 1px solid var(--line); }
  .deal-card-caret { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--s6); height: var(--s5); padding: 0; border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); color: var(--muted); cursor: pointer; }
  .deal-card-caret:hover { background: var(--panel); border-color: var(--line-strong); color: var(--ink); }
  .deal-card-caret .icon { width: 16px; height: 16px; transition: transform .15s ease; }
  .deal-card-caret[aria-expanded="true"] .icon { transform: rotate(180deg); }
  .lead-card-caret .icon { transition: transform .15s ease; }
  .lead-card-caret[aria-expanded="true"] .icon { transform: rotate(180deg); } /* the Leads tab restyles the caret as a button; the chevron still points up when open */
  /* The date carousel's carets: quiet, flush with the span's left and right edges and as tall as its cards. */
  .project-card .deal-updates-track { padding-inline: var(--s5); scroll-padding-inline: var(--s5); }
  .project-card .deal-updates-arrow { top: var(--s2); bottom: var(--s2); width: var(--s5); min-width: 0; height: auto; min-height: 0; padding: 0; transform: none; border: 0; border-radius: var(--r1); box-shadow: none; background: var(--surface); color: var(--muted); }
  .project-card .deal-updates-arrow:hover { background: var(--panel); color: var(--ink); }
  .project-card .deal-updates-arrow .icon { width: 16px; height: 16px; }
  /* Max at work: a 2 px KITT line on the top edge of the task card and of its Deal card, clipped to its corners. */
  .project-card, .task-row, .search-card { position: relative; }
  .edge-rail { position: absolute; inset: -1px; border-radius: var(--r2); overflow: hidden; pointer-events: none; }
  .edge-rail > .kitt-line { position: absolute; top: 0; right: 0; left: 0; }
  .sharing-sheet .sheet-body { display: flex; flex-direction: column; gap: var(--s3); }
  .sharing-actions, .sharing-editor { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s2); }
  .sharing-grant { flex-wrap: wrap; }
  .sharing-actions .field, .sharing-editor .field { min-width: 0; flex: 1 1 140px; }
  .sharing-audit { overflow-wrap: anywhere; }
  .front-door-card summary { min-height: 32px; display: flex; align-items: center; }
  .front-door-card { margin-block: var(--s3); overflow-wrap: anywhere; }
  .front-door-actions { margin-top: var(--s3); }
  .proposal-manifest { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t12); }
  .document-sheet .sheet-head-main { flex-basis: 0; }
  .document-sheet .eyebrow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .document-row { flex-wrap: wrap; }
  .document-row .row-title { white-space: normal; overflow-wrap: anywhere; }

  /* Document units */
  .document-filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s3); }
  .document-filters .field { min-width: 150px; }
  /* Phones: the three filters share one row; the download and upload actions wrap below them. */
  @media (max-width: 699px) {
    .document-filters { width: 100%; }
    .document-filters .field { flex: 1 1 0; min-width: 96px; }
    .document-filters > :not(.field) { flex: none; }
  }
  .document-list { max-width: var(--list-width); display: grid; gap: var(--s5); }
  .document-month { margin: 0; }
  /* The library filed by Deal: a Deal heading (name and count) folds its months, and each month folds its rows. */
  .document-group { margin: 0; display: grid; gap: var(--s3); }
  .document-group-head, .document-month-head { margin: 0 0 var(--s2); font: inherit; }
  .document-group-toggle { max-width: 100%; text-align: left; }
  .document-group-name { color: var(--ink); font-size: var(--t16); font-weight: 600; overflow-wrap: anywhere; }
  .document-group-count { margin-left: var(--s2); }
  .document-group-body { display: grid; gap: var(--s4); padding-left: var(--s4); }
  /* Bulk drops: the page outlines while files are dragged over it; the strip lists each batch above the list. */
  #documentsView[data-drop-active] { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
  .document-batches { max-width: var(--list-width); display: grid; gap: var(--s2); margin: 0 0 var(--s4); }
  .document-batches-summary { margin: 0; }
  .document-batch-rows { display: grid; gap: var(--s2); }
  .document-batch { display: grid; gap: var(--s1); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); }
  .document-batch p { margin: 0; }
  .document-batch-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
  .document-batch-name { flex: 1 1 12em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .document-batch-actions { display: flex; gap: var(--s1); }
  .document-batch-progress { width: 100%; height: 6px; accent-color: var(--accent); }
  .document-batch-sending { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .document-batch-done { padding: 0 var(--s1); }
  .document-batch-done .section-toggle { margin: 0; min-height: 32px; max-width: 100%; text-align: left; }
  .document-batch-skipped { margin: var(--s1) 0 0; padding-left: var(--s5); color: var(--muted); font-size: var(--t12); overflow-wrap: anywhere; }
  .document-assign { display: grid; justify-items: start; gap: var(--s1); }
  .document-assign-field { min-width: 220px; }
  .document-month > .eyebrow { margin-bottom: var(--s2); }
  .document-unit-row { align-items: center; }
  .document-open { text-align: left; border: 0; background: none; color: inherit; cursor: pointer; min-height: 44px; }
  .document-open:hover .row-title { text-decoration: underline; }
  .document-unit-row .row-title { white-space: normal; overflow-wrap: anywhere; }
  /* A document card's Hide is a trashcan at its top right; Unhide stays in the end slot beside the Hidden pill. */
  .document-unit-row:has(> .document-hide) { position: relative; padding-right: calc(44px + var(--s2)); }
  .document-unit-row > .document-hide { position: absolute; top: var(--s1); right: var(--s1); }
  .document-count { margin: 0 0 var(--s3); }
  .document-unit-summary { display: grid; justify-items: start; gap: var(--s2); padding-bottom: var(--s4); }
  .document-unit-summary p { margin: 0; }
  .document-unit-pills { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
  /* A hidden document (shown only with "Show hidden") reads muted. */
  .document-unit-row.document-hidden .row-title { color: var(--muted); font-weight: 500; }
  .document-show-hidden { min-height: 36px; }
  .document-detail-content { display: grid; gap: var(--s3); }
  .document-claim { display: grid; gap: var(--s2); }
  .document-claim-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--s2); }
  .document-claim-head h3, .document-claim-field { margin: 0; }
  .document-claim-field { overflow-wrap: anywhere; }
  .document-passages blockquote { margin: var(--s2) 0; padding-left: var(--s3); border-left: 2px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
  .document-passages cite { display: block; font-style: normal; }
  .document-status-history { border-top: 1px solid var(--line); padding-top: var(--s2); }
  .document-status-history p { margin: var(--s1) 0; }
  /* A claim's detail (status, history and the admin's Set status) is a quiet disclosure under its passages. */
  .document-claim-detail { border-top: 1px solid var(--line); padding-top: var(--s2); display: grid; gap: var(--s2); }
  .document-claim-detail > summary { display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px; cursor: pointer; color: var(--muted); font-size: var(--t13); }
  .document-claim-detail > summary::before { content: ''; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); }
  .document-claim-detail[open] > summary::before { transform: rotate(45deg); }
  .document-claim-detail .document-status-history { border-top: 0; padding-top: 0; }
  .document-status-action, .document-status-chooser { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
  .document-status-chooser[hidden] { display: none; }

  /* Underwriting terms (deal-form.mjs) use the shared field controls and token spacing: one collapsed section,
     each term a label beside its value and unit. */
  .standards-form { display: grid; gap: var(--s3); }
  .terms-section, .standards-summary { border-top: 1px solid var(--line); padding-top: var(--s2); }
  .terms-section > summary, .standards-summary > summary { cursor: pointer; min-height: 44px; font-size: var(--t14); }
  .terms-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
  .terms-tools select { min-height: 44px; flex: 1 1 12rem; min-width: 0; }
  .terms-group { margin: var(--s3) 0 var(--s1); }
  .terms-field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 11rem); align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
  .terms-section > summary { display: flex; align-items: center; gap: var(--s2); }
  .terms-section > summary::before { content: ''; flex: none; width: 6px; height: 6px; margin: 0 2px 2px 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
  .terms-section[open] > summary::before { transform: rotate(45deg); margin-bottom: 4px; }
  .terms-value { display: flex; align-items: center; gap: var(--s1); min-width: 0; }
  .terms-value > input, .terms-value > select { flex: 1 1 auto; min-width: 0; }
  .terms-value > small { flex: 0 0 3.5rem; white-space: nowrap; }

  /* Comps panel (comps-panel.mjs): under the write-up of an Evaluate comps step's latest analysis. The map is the
     appliance's road image with rings and pins over it, else a schematic SVG (the regional circle and rings); the
     Lead is theme-stable red, as on a street map, and comp pins are numbered accent discs. */
  .comps-panel { display: grid; gap: var(--s3); margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
  .comps-panel > * { min-width: 0; margin: 0; }
  .comps-radius { font-size: var(--t14); font-weight: 600; }
  .comps-map-card { display: grid; gap: var(--s2); margin: 0; }
  .comps-map { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; aspect-ratio: 1; }
  /* The road image is width x height CSS pixels holding 2x pixels: drawn at most at its own size, scaled down with
     the panel, pins and rings in the same units so they stay on their streets at any width. Until the image is read
     its frame shows the panel colour. */
  .comps-street-view { position: relative; width: 100%; margin: 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r1); background: var(--panel); }
  .comps-street-view > .comps-street-map { max-width: none; aspect-ratio: auto; }
  /* The attribution sits on the image, which keeps its own light colours in both themes (--map-plate). */
  .comps-map-attribution { position: absolute; right: 0; bottom: 0; padding: 1px 6px; border-top-left-radius: var(--r1); background: var(--map-plate); color: var(--map-plate-ink); font-size: var(--t11); line-height: 16px; white-space: nowrap; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .comps-map-stale { margin: 0; }
  .comps-map text { font-family: var(--font); font-size: var(--t13); }
  .comps-map-area { fill: var(--panel); fill-opacity: .45; stroke: var(--line-strong); stroke-width: 1.5; }
  .comps-map-axis { stroke: var(--line); stroke-width: 1; stroke-opacity: .6; }
  .comps-map-ring { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
  .comps-map-ring-label { fill: var(--muted); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
  /* Rings over the road image use the image's own ink, so they read the same in both themes. */
  .comps-street-ring { fill: none; stroke: var(--map-plate-ink); stroke-opacity: .55; stroke-width: 1.5; stroke-dasharray: 4 5; }
  .comps-street-ring-outer { stroke-opacity: .8; stroke-dasharray: none; }
  .comps-street-map .comps-map-ring-label, .comps-street-map .comps-pin-label, .comps-street-map .comps-lead-label { fill: var(--map-plate-ink); stroke: var(--map-plate); }
  .comps-street-map .comps-pin circle:not(.comps-pin-halo) { stroke: var(--map-plate-ink); stroke-width: 1.5; }
  .comps-map-compass { fill: var(--muted); font-weight: 600; }
  .comps-map-scale { fill: none; stroke: var(--ink); stroke-width: 2; }
  .comps-lead-halo { fill: var(--danger-dark); fill-opacity: .14; stroke: var(--danger-dark); stroke-opacity: .45; }
  .comps-lead circle { fill: var(--danger-dark); stroke: var(--surface); stroke-width: 3; }
  .comps-lead-label { fill: var(--ink); font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
  .comps-pin { cursor: pointer; }
  .comps-pin circle { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
  .comps-pin text { fill: var(--accent-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
  .comps-pin .comps-pin-halo { fill: none; stroke: var(--accent-strong); stroke-width: 2.5; }
  .comps-pin:not(.is-active) .comps-pin-halo { display: none; }
  .comps-pin.is-active circle:not(.comps-pin-halo) { stroke-width: 3; }
  .comps-pin-outside circle:not(.comps-pin-halo) { stroke-dasharray: 5 3; }
  .comps-pin-label { fill: var(--ink); font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
  .comps-table-frame { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); }
  /* The panel sits in an analysis block's .assistant-body: its table keeps its own frame, not the Markdown table grid. */
  .comps-panel .comps-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t13); font-variant-numeric: tabular-nums; }
  .comps-panel .comps-table th, .comps-panel .comps-table td { min-width: 0; padding: var(--s2) var(--s2); border: 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; }
  .comps-panel .comps-table thead th { background: var(--panel); color: var(--muted); font-weight: 600; vertical-align: middle; }
  .comps-panel .comps-table tbody tr:last-child > * { border-bottom: 0; }
  .comps-panel .comps-table .comps-cell-number { text-align: right; }
  .comps-panel .comps-table .comps-cell-missing { color: var(--muted); }
  /* The # and Comp columns stay put while the figures scroll beside them. */
  .comps-panel .comps-table .comps-cell-index { position: sticky; left: 0; z-index: 1; box-sizing: border-box; width: 40px; min-width: 40px; background: var(--surface); }
  .comps-panel .comps-table .comps-cell-name { position: sticky; left: 40px; z-index: 1; font-weight: 400; border-right: 1px solid var(--line); background: var(--surface); }
  .comps-panel .comps-table thead .comps-cell-index, .comps-panel .comps-table thead .comps-cell-name { z-index: 2; background: var(--panel); }
  /* Comp is the name over the address, wrapping inside a fixed width so the figures keep the rest of the row. */
  .comps-panel .comps-table .comps-cell-name { min-width: 9rem; max-width: 10rem; white-space: normal; overflow-wrap: anywhere; }
  .comps-panel .comps-cell-title, .comps-panel .comps-cell-address, .comps-panel .comps-cell-outside { display: block; }
  .comps-cell-title { font-weight: 600; }
  .comps-panel .comps-table-row:hover > *, .comps-panel .comps-table-row.is-active > * { background: var(--accent-soft); }
  .comps-notes { display: grid; gap: var(--s1); }
  .comps-notes-list { display: grid; gap: var(--s1); margin: 0; padding-left: 1.6em; font-size: var(--t13); line-height: 1.5; }
  .comps-source { overflow-wrap: anywhere; }
  @media (max-width: 699px) {
    /* The map shrinks to the phone width; its text grows in map units so it still reads at about 12 px. */
    .comps-map text { font-size: var(--t18); }
    .comps-map .comps-pin-label { display: none; }
    /* The street map scales down with the phone; its marks grow about their projected points to stay tappable. */
    .comps-street-map .comps-pin-mark, .comps-street-map .comps-lead-mark { transform: scale(1.6); }
    .comps-street-map .comps-pin-mark text { font-size: var(--t13); }
    .comps-street-map .comps-lead-label { font-size: var(--t22); }
    .comps-panel .comps-table th, .comps-panel .comps-table td { padding: var(--s2) 6px; }
    .comps-panel .comps-table .comps-cell-name { min-width: 7rem; max-width: 7.5rem; }
  }
}

/* ------------------------------------------------------------ responsive */
@layer responsive {
  @media (max-width: 699px) {
    .pipeline-stage { height: 35px; gap: var(--s1); padding-inline: 14px; font-size: var(--t11); }
    .pipeline-count { display: none; }
    .pipeline-short:not(:empty) { display: inline; }
    .pipeline-stage:has(.pipeline-short:not(:empty)) .pipeline-label { display: none; }
    .pipeline-actions .btn, .buyers-actions .btn { min-height: 35px; } /* as tall as the stage arrows above them */
  }

  /* Phones and compact windows: shell, navigation and safe areas */
  @media (max-width: 960px) {
    .topbar { grid-template-columns: 44px minmax(0, 1fr) 44px; padding: max(var(--s1), env(safe-area-inset-top)) max(var(--s2), env(safe-area-inset-right)) var(--s1) max(var(--s2), env(safe-area-inset-left)); }
    .page { padding: var(--s4) max(var(--s4), env(safe-area-inset-right)) var(--s7) max(var(--s4), env(safe-area-inset-left)); }
    .thread { padding: var(--s3) max(var(--s4), env(safe-area-inset-right)) var(--s5) max(var(--s4), env(safe-area-inset-left)); }
    .composer-dock { padding: 0 max(var(--s2), env(safe-area-inset-right)) max(var(--s2), env(safe-area-inset-bottom)) max(var(--s2), env(safe-area-inset-left)); }
    .composer textarea, input:not(.welcome-name), select, textarea { font-size: var(--t16); }
    /* A composer is two 44 px lines (the input line, then the tools) with no padding above or below them. */
    .composer { gap: 0; padding: 0 var(--s3); }
    .composer textarea { min-height: 44px; padding: 10px 0; }
    /* The send button sits a touch lower on phones so it breathes above and aligns with a one-line entry. */
    .composer-input > .btn-icon { align-self: flex-start; margin-top: var(--s2); }
    /* A tighter rhythm on phones: page head, composer and sections sit --s4 apart. */
    .page-head { margin-bottom: var(--s4); }
    .section + .section, .section + .page-actions, .page-actions + .section { margin-top: var(--s4); }

  }

  /* Phones: chat and record cards */
  @media (max-width: 960px) {
    .user-bubble { max-width: 88%; }
    .message-actions { opacity: 1; }
    .image-search-heading { align-items: start; }
    .image-tile-grid { grid-template-columns: minmax(0, 1.8fr) minmax(92px, 1fr); height: clamp(190px, 58vw, 280px); }
    /* Phones: the state pill (and any action) sits at the top right of the tile; the title truncates beside it. */
    .record-card > summary .row-main { flex: 1 1 0; min-width: 0; }
    .record-card > summary .row-end, .task-row > .row-end { align-self: flex-start; }
    .project-card > summary { padding: var(--s2) var(--s3); gap: var(--s1) var(--s2); }
    .project-card > summary > .row-main { flex: 1 0 100%; }
    .project-card > .record-body { padding: var(--s2) var(--s3) var(--s3); gap: var(--s2); }
    .project-card .row-tools { gap: 0; }
    .project-card .task-row { padding: var(--s2) var(--s3); }
    .project-card .step-snapshot p { margin: 0; }
    /* A Deal task's preview keeps two lines on phones, then truncates. */
    .task-row .project-task-open small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; }
    .audit-entry > time { flex: 1 0 100%; }
    /* Dates: the stepper sits beside the month title; the view and Deals controls fill the next line. */
    #calendarView .page-actions { display: contents; }
    #calendarView .page-title { flex: 1 1 auto; }
    #calendarView .calendar-filters { flex: 1 0 100%; flex-wrap: nowrap; }
    #calendarView .calendar-filters > * { flex: 1 1 0; min-width: 0; }
    #calendarView .calendar-filter { flex: 0 0 auto; }
  }

  /* Phones: sheets and the workflow editor go full-screen; a dialog becomes a bottom sheet */
  @media (max-width: 960px) {
    .sheet, .sheet-wide { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
    .dialog { position: fixed; inset: auto 0 0 0; width: 100vw; max-width: 100vw; height: auto; max-height: 92dvh; margin: 0; border: 0; border-radius: var(--r2) var(--r2) 0 0; }
    .dialog-beside { inset: auto 0 0 0; width: 100vw; }
    .dialog-beside::backdrop { background: var(--scrim); }
    .dialog-form { max-height: 92dvh; padding: var(--s4) max(var(--s4), env(safe-area-inset-right)) max(var(--s4), env(safe-area-inset-bottom)) max(var(--s4), env(safe-area-inset-left)); }
    .sheet-head { padding-top: max(var(--s3), env(safe-area-inset-top)); }
    /* The close button keeps the top line beside the title; a record's actions wrap beneath. */
    .sheet-head-main ~ .sheet-actions { flex: 1 0 100%; order: 1; margin-left: 0; }
    .workflow-editor-dialog[open] { display: block; overflow-y: auto; overscroll-behavior: contain; }
    .workflow-editor-dialog .sheet-head { position: sticky; top: 0; z-index: 4; }
    .workflow-editor-body { display: block; }
    .workflow-editor-graph { height: 38dvh; }
    .workflow-editor-inspector { overflow: visible; padding-bottom: max(var(--s5), env(safe-area-inset-bottom)); border-top: 1px solid var(--line); border-left: 0; }
  }

  /* Phones: grids, calendars and tables collapse to one column */
  @media (max-width: 960px) {
    .people-invite-fields, .performance-headlines, .health-component-grid, .health-capacity-grid, .provider-policy-fields { grid-template-columns: 1fr; }
    /* Settings on phones: the rail becomes a scrolling tab row above the section. */
    .tabs-vertical { flex-direction: row; gap: var(--s1); overflow-x: auto; }
    .tabs-vertical > button { border-left: 0; border-bottom: 2px solid transparent; border-radius: 0; }
    .tabs-vertical > button.active { border-bottom-color: var(--accent); }
    /* The row's right edge fades into the page so a cut-off tab reads as "more"; the fade rides the viewport edge and rests after the last tab. */
    .tabs-vertical::after { content: ''; position: sticky; right: 0; flex: 0 0 var(--s6); align-self: stretch; background: var(--fade-to-paper); pointer-events: none; }
    .provider-item { grid-template-columns: auto minmax(0, 1fr); }
    .provider-rank-controls { grid-column: 1 / -1; }
    .quarter-grid { grid-template-columns: 1fr; }
    /* Seven columns cannot carry titles on a phone: the month view shows each event as a
       tone bar (its label stays in the accessible name and the tooltip); the week view keeps text. */
    .calendar-day { min-height: 56px; padding: var(--s1); }
    .month-grid .calendar-event { display: block; width: 100%; height: 20px; padding: 0; overflow: hidden; white-space: nowrap; text-indent: 100%; }
    .calendar-week-row { grid-template-columns: 1fr; gap: var(--s1); }
    .calendar-filter > div { right: auto; left: 50%; transform: translateX(-50%); }
  }

  @media (max-width: 430px) {
    .topbar { grid-template-columns: 40px minmax(0, 1fr); }
    .topbar-actions { display: none; }
  }

  @media (max-width: 960px) and (max-height: 500px) {
    .topbar { min-height: 56px; padding-top: max(var(--s2), env(safe-area-inset-top)); padding-bottom: var(--s2); }
    .composer-dock .composer textarea { max-height: 120px; }
    .page { padding-top: var(--s3); }
  }

  #requestsView .section + .section { margin-top: 38px; }
  #requestsView { padding: 54px var(--s7) 64px; }
  @media (min-width: 700px) and (max-width: 1099px) {
    #requestsView { padding: 38px var(--s6) 56px; }
    .home-banner { font-size: var(--t38); }
  }
  @media (max-width: 699px) {
    #requestsView { padding: 26px max(20px, env(safe-area-inset-right)) var(--s5) max(20px, env(safe-area-inset-left)); }
    .home-head { gap: 22px; margin-bottom: var(--s5); }
    .home-banner { gap: var(--s4); font-size: var(--t26); letter-spacing: -.055em; }
    .home-mark { width: 48px; height: 48px; }
    .composer-start { min-height: 120px; gap: var(--s2); margin-bottom: 36px; padding: 18px; border-radius: var(--r2) var(--r2) var(--r4) var(--r2); }
    .composer-start textarea { min-height: 52px; }
    #requestsView .section + .section { margin-top: 30px; }
    #requestsView .row { flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 18px 0; }
    #requestsView .row-main { flex-basis: 100%; min-height: 44px; }
    #requestsView .row-title { white-space: normal; font-size: var(--t17); overflow-wrap: anywhere; }
    #requestsView .row-end { margin-left: 0; flex-wrap: wrap; }
  }

  @media (min-width: 700px) {
    .settings-sheet { width: min(520px, 100vw); }
    .settings-rail { flex-direction: column; overflow: visible; }
    .settings-rail::after { display: none; }
  }
  /* Reading sheets (agent reports, Max summaries, reports) float centred at the shared width; phones keep them full screen. */
  @media (min-width: 700px) {
    .sheet-reading { inset: 0; width: var(--reading-sheet-width); max-width: 100vw; height: calc(100dvh - var(--s7)); max-height: calc(100dvh - var(--s7)); margin: auto; border: 1px solid var(--line); border-radius: var(--r2); }
  }
  @media (min-width: 700px) and (max-height: 500px) {
    .sheet-reading { height: 100dvh; max-height: 100dvh; border-radius: 0; }
  }
  @media (max-width: 960px) {
    /* Retain the existing stacked ledger and its header visibility for strict parity. */
  }
  @media (max-width: 699px) {
    .settings-sheet { width: 100vw; }
    .report-draft-sheet .sheet-head, .settings-sheet > .sheet-head { gap: 10px; padding: max(20px, env(safe-area-inset-top)) 20px var(--s4); }
    .report-draft-sheet .sheet-title, .settings-sheet > .sheet-head .sheet-title { font-size: var(--t26); line-height: 1.18; }
    .report-draft-sheet .sheet-body { padding: 22px 20px; }
    .report-draft-sheet .sheet-foot { padding: var(--s3) 20px max(var(--s3), env(safe-area-inset-bottom)); }
    #reportsView .page-title { font-size: var(--t34); }
    .settings-body { gap: 26px; padding: 18px 20px 28px; }
    .settings-rail { gap: 6px; margin: -6px -6px 0; padding: 6px 6px 10px; }
    .settings-rail > button { flex: 0 0 auto; padding: 10px 14px; }
    .settings-rail > button.active { border-bottom-color: var(--accent); border-radius: 0; background: var(--panel); color: var(--ink); }
    /* With no section chosen the phone rail is the list itself: one full-width line per section. */
    .settings-home .settings-rail { flex-direction: column; overflow: visible; margin: 0; padding: 0; }
    .settings-home .settings-rail::after { display: none; }
    .settings-home .settings-rail > button { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); font-size: var(--t16); }
    .settings-content .sheet-title { font-size: var(--t26); }
    .settings-foot { padding: var(--s4) 20px max(var(--s4), env(safe-area-inset-bottom)); }
  }
  .report-draft-sheet .sheet-body:has(.report-progress) { padding-block: var(--s2); }
  @media (max-height: 500px) {
    /* Compact headings retain room for controls; header and footer scroll within their allotted space. */
    .report-draft-sheet .sheet-head, .settings-sheet > .sheet-head { gap: var(--s2); padding: var(--s2) var(--s4); }
    .report-draft-sheet .sheet-title, .settings-sheet > .sheet-head .sheet-title { font-size: var(--t20); }
    .report-draft-sheet .sheet-foot, .settings-foot { padding: var(--s2) var(--s4); }
  }

  /* Navigation shell: rail, tablet bar, then the same main buttons in the phone bottom bar. */
  @media (min-width: 1100px) {
    .case-teaser-text { font-size: var(--t15); }
    .workspace { grid-template-columns: 184px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
    .workspace > * { grid-column: 2; }
    .workspace > main { grid-row: 1; }
    .composer-dock { grid-row: 2; }
    .topbar { grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column; align-items: stretch; gap: var(--s7); padding: 28px var(--s4); overflow-y: auto; border-right: 1px solid var(--line); border-bottom: 0; }
    .account-button { display: flex; gap: var(--s2); width: 100%; border-radius: var(--r1); }
    .workspace-tabs { flex-direction: column; align-items: stretch; }
    .workspace-tab-scroll { flex-direction: column; gap: var(--s2); }
    .workspace-tab-scroll > button { justify-content: flex-start; padding: var(--s2) var(--s3); border-bottom: 0; font-size: var(--t14); }
    .workspace-tab-scroll > button.active { box-shadow: var(--shadow-nav); }
  }
  /* With a mouse (PC/Mac) the rail sits a little tighter (Matthew, 2026-11-02); touch keeps 44px targets. */
  @media (min-width: 1100px) and (pointer: fine) {
    .workspace-tab-scroll { gap: var(--s1); }
    .workspace-tab-scroll > button { min-height: 38px; padding-block: var(--s1); }
  }
  @media (min-width: 700px) and (max-width: 1099px) {
    .account-label, .workspace-tab-scroll > .tab-compact > .tab-label { display: none; }
    .topbar { grid-template-columns: 44px minmax(0, 1fr); gap: var(--s4); padding-inline: var(--s5); }
    .workspace-tabs { justify-self: center; }
    .library-label { align-self: stretch; width: 1px; height: auto; margin: var(--s2) var(--s1); }
  }
  @media (min-width: 700px) and (max-width: 1099px) {
    .workspace-tab-scroll { gap: var(--s2); }
    .workspace-tab-scroll > button { padding: var(--s2) var(--s3); }
  }
  @media (max-width: 699px) {
    body { --bottom-navigation-height: calc(68px + env(safe-area-inset-bottom)); }
    .workspace { padding-top: env(safe-area-inset-top); padding-bottom: var(--bottom-navigation-height); grid-template-rows: 0 minmax(0, 1fr) auto; }
    .topbar { position: fixed; inset: auto 0 0; z-index: 96; display: block; height: var(--bottom-navigation-height); min-height: 0; padding: var(--s2) max(var(--s2), env(safe-area-inset-right)) env(safe-area-inset-bottom) max(var(--s2), env(safe-area-inset-left)); border-top: 1px solid var(--line); border-bottom: 0; }
    .topbar-start, .topbar-actions, .workspace-tab-scroll > .tab-compact, .library-label { display: none; }
    .workspace-tabs { display: block; max-width: none; }
    .workspace-tab-scroll { display: flex; width: 100%; gap: 0; padding: 0; }
    .workspace-tab-scroll > button { flex: 1 1 0; flex-direction: column; gap: var(--s1); min-width: 0; min-height: 52px; padding: var(--s1) 0; font-size: var(--t11); }
    .workspace-tab-scroll > button > .tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .workspace-tab-scroll > button.active { background: transparent; color: var(--accent); }
    #openMore { display: flex; }
    .more-navigation { inset: auto 0 0; width: 100%; height: auto; max-height: 85dvh; border-left: 0; border-top: 1px solid var(--line); border-radius: var(--r2) var(--r2) 0 0; }
    .btn, .tabs > button { min-height: 44px; }
    /* Phones: a Deal header keeps the title, the date alone (no "as of") and the icon row on one line. The icons sit
       closer, as 26 px wide targets (above the 24 px minimum); the date never shrinks, so a long name ellipsizes. */
    .project-card .as-of-prefix { display: none; }
    .project-card .row-title-line { gap: var(--s1); }
    .project-card .deal-as-of { flex: none; margin-left: 3px; padding-inline: 4px; }
    .project-card .row-tools .btn-icon { width: 26px; min-width: 26px; min-height: 32px; }
    .record-card > summary .row-main { flex-basis: 100%; }
    .record-card > summary .row-end { flex-wrap: wrap; max-width: 100%; }
  }

  @media (min-width: 700px) and (max-width: 1099px) {
    /* Reserve the full focus-outline outset around the account control. */
    .topbar { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
  }
  @media (min-width: 700px) and (max-width: 1100px) and (min-height: 501px) {
    /* Long report titles and drafts must leave a usable scrolling body. */
    .report-draft-sheet .sheet-head { max-height: 25dvh; overflow-y: auto; }
    .report-draft-sheet .sheet-foot { max-height: 55dvh; overflow-y: auto; }
  }
  @media (max-width: 699px) and (max-height: 500px) {
    /* Keep case documents reachable at desktop zoom without shrinking controls. */
    .sheet:has(.case-panel) .sheet-head { padding-block: 6px; }
    .sheet:has(.case-panel) .sheet-foot { max-height: 35dvh; overflow-y: auto; }
  }

  @media (min-width: 700px) and (max-width: 1099px) and (max-height: 500px) {
    /* Keep chat controls clear of the sticky header when the composer has attachments. */
    .topbar { min-height: 56px; row-gap: 0; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
    .chat-head { padding-block: 6px; }
  }

  /* Bound each scroll region so long headings and drafts cannot evict controls. */
  @media (max-height: 500px), (max-width: 699px) {
    .report-draft-sheet .sheet-head { max-height: 25dvh; overflow-y: auto; padding-block: var(--s3); }
    .report-draft-sheet .sheet-body { padding-block: var(--s2); }
    .report-draft-sheet .sheet-foot { max-height: 55dvh; overflow-y: auto; padding-block: var(--s2); }
  }

  @media (pointer: coarse) {
    .btn-icon { min-width: 44px; min-height: 44px; }
    .segment { min-height: 44px; }
    .btn, .tabs > button, .calendar-week-row .calendar-event, .dialog-actions .btn { min-height: 44px; }
    .workflow-editor-handle { width: 32px; height: 32px; }
    .project-card .deal-updates-arrow { min-width: var(--s5); }
    .deal-card-caret { width: 44px; height: 32px; }
    .month-grid .calendar-day-open, .calendar-week-row > .calendar-day-open { min-height: 44px; align-items: flex-start; }
  }

  /* A day opens its document dates: the number in the corner, a small count chip only when the day has dates. */
  .calendar-day-open { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); width: 100%; min-height: 28px; padding: 0; border: 0; border-radius: var(--r1); background: transparent; color: var(--muted); font-size: var(--t12); text-align: left; }
  .calendar-day-open:disabled { cursor: default; }
  .calendar-day-number { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; font-variant-numeric: tabular-nums; }
  .calendar-day:not(.outside) .calendar-day-number { color: var(--ink); }
  .calendar-day.today .calendar-day-number { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
  .calendar-day-open:hover:not(:disabled) .calendar-day-number { box-shadow: inset 0 0 0 1px var(--line); }
  .calendar-week-row > .calendar-day-open { width: auto; justify-content: flex-start; }
  .mini-month-days .calendar-day-open { min-height: 18px; }
  .mini-month-days .calendar-day-number { min-width: 18px; height: 18px; }
  .calendar-day-sheet .card { overflow-wrap: anywhere; margin-block: 12px; }
  .calendar-day-sheet .btn { white-space: normal; text-align: left; max-width: 100%; }
  .calendar-day-tiered { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
  .date-tier-markers { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); max-width: 100%; }
  .date-tier { display: inline-flex; align-items: center; gap: var(--s1); max-width: 100%; margin-block: var(--s1); padding: 0 var(--s1); border: 1px solid transparent; border-radius: var(--r1); font-size: var(--t12); font-weight: 600; line-height: 18px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .date-tier-markers .date-tier { margin: 0; min-width: 24px; min-height: 22px; justify-content: center; font-size: var(--t12); }
  .date-tier-markers .date-tier-reference { min-height: 18px; justify-content: flex-start; font-size: var(--t11); }
  /* Deadlines: deep green outline and fill, white text. Watch: black outline and text on beige. */
  .date-tier-deadline { border: 2px solid var(--accent-strong); background: var(--accent-strong); color: var(--accent-ink); }
  .date-tier-watch { border: 2px solid var(--tier-watch-ink); color: var(--tier-watch-ink); background: var(--tier-watch-bg); }
  .date-tier-reference { color: var(--muted); font-weight: 400; }
  .date-tier-reference::before { content: ''; flex: 0 0 var(--s1); width: var(--s1); height: var(--s1); border-radius: var(--r3); background: currentColor; }
  .date-carousel-centered { padding-inline: max(var(--s7), calc((100% - 160px) / 2)); }
  .home-date-card { scroll-snap-align: center; }
  .home-date-card[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
  .home-date-card .date-tier { width: fit-content; }
  /* Stretch the native day button over blank cell space; event buttons stay independent. */
  .calendar-day-open::after { content: ''; position: absolute; inset: 0; }
  .calendar-day:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
  .calendar-day > .calendar-event, .mini-month-days .calendar-cube { position: relative; z-index: 1; }
  .calendar-week-row, .mini-month-days > span { position: relative; }
  .calendar-week-row .calendar-event { position: relative; z-index: 1; }
  .mini-month-days:has(.calendar-day-tiered) { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .mini-month-days > span:has(.calendar-day-tiered) { grid-template-columns: minmax(0, 1fr); align-content: start; }

  @media (min-width: 1100px) {
    .workspace.ask-max-beside { grid-template-columns: 184px minmax(0, 1fr) 380px; }
    .workspace > .ask-max-panel { grid-column: 3; grid-row: 1 / -1; }
    .settings-sheet.ask-max-beside[open] { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto minmax(0, 1fr) auto; width: min(1100px, 100vw); }
    .settings-sheet.ask-max-beside > * { grid-column: 1; }
    .settings-sheet.ask-max-beside > .ask-max-panel { grid-column: 2; grid-row: 1 / -1; }
  }
  @media (max-width: 1099px) {
    .ask-max-panel { position: fixed; z-index: 101; inset: var(--app-top) 0 auto auto; width: min(420px, 100%); height: var(--app-height); }
  }
  @media (max-width: 699px) {
    .ask-max-floating:not([hidden]), .ask-max-settings-entry:not([hidden]) { bottom: calc(var(--bottom-navigation-height) + var(--s4)); }
    .ask-max-panel { inset: auto 0 calc(var(--bottom-navigation-height)) 0; width: 100%; height: calc((var(--app-height) - var(--bottom-navigation-height)) * .68); border-left: 0; border-top: 1px solid var(--line); border-radius: var(--r6) var(--r6) 0 0; }
    .ask-max-panel.ask-max-full { height: calc(var(--app-height) - var(--bottom-navigation-height)); }
    .ask-max-handle { display: grid; place-items: center; flex: none; width: 100%; min-height: 24px; padding: var(--s2); border: 0; border-radius: 0; background: var(--surface); touch-action: none; }
    .ask-max-handle > span { width: 32px; height: 4px; border-radius: var(--r3); background: var(--muted); }
    .ask-max-head { padding-block: var(--s2); }
  }

  @media (hover: none) {
    .case-click-target:hover, .row:has(> button.row-main:hover) { background: var(--surface); }
    .case-click-target:hover .case-teaser-clamped .case-teaser-preview::after { background: var(--fade-to-surface); }
    .tabs-vertical > button:not(.active):hover { background: transparent; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms; animation-iteration-count: 1; scroll-behavior: auto; }
    /* The rail rests with its two centre segments lit. */
    .kitt > i::before, .kitt > i::after { animation: none; }
    .kitt > i:nth-child(7)::before, .kitt > i:nth-child(8)::before { opacity: 1; }
    /* The KITT line rests as a static row: every block lit at the accent colour, 35% opacity. */
    .kitt.kitt-line > i::before { opacity: .35; }
    .response-phase { transition: none; }
    /* Go to current task: a static outline instead of the fading highlight. */
    .row.flash { animation: none; box-shadow: 0 0 0 2px var(--accent); }
  }

  @media print {
    body, .page, .chat, .model-loading, .auth-gate { background-image: none; }
  }
}

/* Historical case documents and step artifacts stay readable at phone widths. */
.case-as-of { font-size: var(--t18); margin-block: var(--s3); }
.step-snapshot { grid-column: 1 / -1; order: 3; min-width: 0; overflow-wrap: anywhere; }
.step-snapshot p { margin: 0; }

/* Published Deal updates and future workflow steps. */
.agentic-update { font-weight: 600; color: var(--ink); }
.step-snapshot.agentic-update { margin-left: auto; }
.task-pending { color: var(--muted); }
.draft-review-link { white-space: normal; text-align: left; }
.step-review-line { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; max-width: 100%; padding: var(--s1) 10px; }
.step-review-title { font-weight: 600; }
.step-review-preview { font-weight: 400; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Lead dashboard: the first-phase one-sheet inside an expanded Leads card. */
/* Capability-gated intake grid and shared Deal cards between rows. */
.intake-grid-host { min-width: 0; }
.intake-grid-table .intake-expanded > td { padding: 0; border: 0; white-space: normal; overflow: visible; font-size: var(--t15); }
.intake-expanded .record-card { margin-block: var(--s2); }
#dealIntakeFields { display: grid; gap: var(--s3); }
.intake-grid .pipeline-actions { margin-bottom: 0; }
.intake-grid-table { min-width: 0; }
.intake-grid-table thead th:first-child { width: 23%; }
.intake-grid-table thead th:nth-child(3) { width: 17%; }
.intake-grid-table thead th:nth-child(4) { width: 80px; }
.intake-grid-table thead th:nth-child(6) { width: 72px; }
.intake-grid-table thead th:nth-child(7) { width: 110px; }
.intake-grid-table thead th:nth-child(8) { width: 60px; }
.intake-deal-name { margin: 0; font-size: inherit; }
.intake-deadline-danger { color: var(--danger); }
.lead-dashboard-grid.intake-task-groups { display: flex; flex-direction: column; }
.intake-task-group { width: 100%; min-width: 0; display: grid; gap: var(--s3); }
@media (max-width: 699px) {
  .intake-grid-table { min-width: 0; }
  .intake-grid-table tr.intake-row:not([hidden]) { display: block; padding: var(--s2) 0; }
  .intake-grid-table .intake-row > td { padding: var(--s1) var(--s2); overflow-wrap: anywhere; }
  .intake-grid-table .intake-row > td:first-child { font-size: var(--t16); }
  .intake-grid-table .intake-row > td:not(:first-child) { display: none; }
  .intake-grid-table .buyers-open { white-space: normal; overflow-wrap: anywhere; }
}
.lead-dashboard { display: grid; gap: var(--s4); color: var(--ink); }
.lead-dashboard-header, .lead-dashboard-actions, .lead-dashboard-closing { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); }
.lead-dashboard-title { margin: 0; font-size: var(--t16); overflow-wrap: anywhere; }
.lead-dashboard-actions { margin-left: auto; }
.lead-dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); align-items: start; }
.lead-dashboard > * { min-width: 0; } /* a grid item's min-content (the one-line answers) must never widen the sheet */
.lead-dashboard-tile { position: relative; aspect-ratio: 1; overflow: clip; container-type: inline-size; min-width: 0; min-height: 0; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); overflow-wrap: anywhere; cursor: pointer; }
/* Match the Deal task row title and one-line objective plus its 2px gaps,
   padding and border. Phones reserve two objective lines and a wrapped update. */
.lead-dashboard-specifics { grid-column: 1 / -1; aspect-ratio: auto; height: calc(2 * var(--s3) + 1.35 * var(--t15) + 4px + 1.55 * var(--t12) + 2px); padding: var(--s3) var(--s4); }
.lead-dashboard-specifics .lead-dashboard-tile-header { margin-bottom: 2px; }
.lead-dashboard-specifics .lead-dashboard-tile-title { min-height: 24px; padding: 0; font-size: var(--t15); line-height: 1.35; }
.lead-dashboard-specifics .lead-dashboard-answer, .lead-dashboard-specifics .lead-dashboard-answer-space { margin-bottom: var(--s2); }
.lead-dashboard-tile.lead-dashboard-specifics::after { height: 32px; }
@media (max-width: 960px) {
  .lead-dashboard-specifics { height: calc(2 * var(--s2) + 1.35 * var(--t15) + 4px + 2 * 1.55 * var(--t12) + var(--s2) + 1.55 * var(--t15) + 2px); padding: var(--s2) var(--s3); }
}
.lead-dashboard-draft-label { flex-shrink: 0; }
.lead-dashboard-draft, .lead-dashboard-publication { font-size: var(--t13); }
.lead-dashboard-tile .table-scroll, .lead-dashboard-tile .code-block pre { overflow: clip; }
.lead-dashboard-tile a { pointer-events: none; } /* a tile is a preview: the click opens the task */
details[data-state="collapsed"] a { pointer-events: none; } /* links work once the card is expanded; deal-card.mjs stops the keyboard */
.lead-dashboard-tile::after { content: ''; position: absolute; inset: auto 0 0; height: 64px; background: linear-gradient(to bottom, transparent, var(--surface)); pointer-events: none; }
.lead-dashboard-tile-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3); }
.lead-dashboard-tile-title { min-width: 0; padding: var(--s1); text-align: left; white-space: normal; font-size: var(--t14); font-weight: 600; }
.lead-dashboard-status { display: inline-flex; color: var(--muted); }
.lead-dashboard-answer, .lead-dashboard-answer-space { min-height: 1.4em; margin: 0 0 var(--s3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-dashboard-stats { margin: 0; }
.lead-dashboard-stat { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: var(--s2) 0; }
.lead-dashboard-stat + .lead-dashboard-stat { border-top: 1px dashed var(--line); }
.lead-dashboard-stat dt { color: var(--muted); font-size: var(--t12); }
.lead-dashboard-stat dd { margin: 0; text-align: right; font-size: var(--t13); }
.lead-dashboard-stat-aligned { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lead-dashboard-label-nowrap { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-dashboard-value-right { min-width: 0; text-align: right; }
.lead-dashboard-value-right .lead-dashboard-citation { justify-content: flex-end; text-align: right; }
.lead-dashboard-value { color: var(--ink); font-variant-numeric: tabular-nums; }
.lead-dashboard-citation { display: inline-flex; align-items: center; min-width: var(--s5); min-height: var(--s5); border: 0; padding: 0; background: none; font: inherit; color: var(--ink); text-decoration: none; text-underline-offset: .2em; cursor: pointer; }
.lead-dashboard-citation-link, .lead-dashboard-citation:hover, .lead-dashboard-citation:focus-visible { text-decoration: underline dotted; }
.lead-dashboard-citation:disabled { color: var(--muted); cursor: default; }
.lead-dashboard-value.tone-danger { color: var(--tone-danger-fg); }
.lead-dashboard-figures { display: grid; gap: var(--s3); }
.lead-financial-band { position: relative; display: block; min-height: 112px; background: var(--panel); border-radius: var(--r6); padding: 14px 16px 16px; margin-bottom: 12px; } /* tall enough for the ring and its caption */
.lead-financial-hero { font-size: var(--t44); font-weight: 600; line-height: 1; white-space: nowrap; }
.lead-financial-basis { margin-bottom: var(--s2); color: var(--muted); font-size: var(--t11); font-weight: 400; line-height: 1.4; white-space: normal; text-transform: uppercase; letter-spacing: .06em; }
.lead-financial-yield { position: absolute; right: 12px; bottom: 10px; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; } /* bottom-right of the band, free to overlap the price */
.lead-financial-ring { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border: 2px solid var(--accent); border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 4px var(--panel); font-size: var(--t20); font-weight: 600; }
.lead-financial-ring .lead-dashboard-value { color: var(--accent); }
.lead-financial-yield-label { color: var(--muted); font-size: var(--t11); white-space: nowrap; }
.lead-financial-keys { display: flex; flex-wrap: wrap; gap: var(--s2); }
.lead-financial-key { position: relative; flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; font-size: var(--t22); font-weight: 600; white-space: nowrap; }
.lead-financial-key + .lead-financial-key { padding-left: var(--s2); }
.lead-financial-key + .lead-financial-key::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid var(--line); opacity: .4; }
.lead-financial-key-label { white-space: normal; color: var(--muted); font-size: var(--t11); font-weight: 400; }
.lead-financial-details { margin: 0; font-size: var(--t13); }
.lead-financial-detail { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s1) 0; }
.lead-financial-detail dt { color: var(--muted); }
.lead-financial-leader { flex: 1; border-bottom: 1px dotted var(--line); }
.lead-financial-detail dd { margin: 0; text-align: right; }
.lead-financial-detail .lead-dashboard-citation { min-width: 0; }
.lead-dashboard-stat[hidden] { display: none; } /* the clamp's hidden rows; the stat's own display rule would otherwise win */
.lead-dashboard-more { display: block; padding: var(--s2) 0 0; color: var(--accent); font-size: var(--t12); }
.lead-dashboard .comps-map-card { margin: 0; }
.lead-dashboard-location { display: flex; flex-direction: column; }
.lead-dashboard-location > * { flex-shrink: 0; }
.lead-dashboard-location .lead-dashboard-cover { order: -1; margin: calc(-1 * var(--s3)) calc(-1 * var(--s3)) var(--s3); }
.lead-dashboard-cover .comps-map-view { position: relative; overflow: hidden; height: 44cqi; max-height: 200px; }
.lead-dashboard-cover .comps-map { position: absolute; top: 50%; transform: translateY(-50%); display: block; width: 100%; max-width: none; height: auto; }
.lead-dashboard-cover figcaption { padding-inline: var(--s3); font-size: var(--t12); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lead-dashboard-prose { font-size: var(--t13); }
.lead-dashboard-closing { padding: var(--s3); border-top: 1px solid var(--line); background: var(--panel); border-radius: var(--r1); }
.lead-dashboard-assessment-summary { flex: 1 1 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-dashboard-closing a { min-height: 24px; display: inline-flex; align-items: center; }
@media (max-width: 599px) {
  .lead-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .lead-dashboard-actions { margin-left: 0; width: 100%; }
}

.lead-dashboard-value.lead-dashboard-value-missing { color: var(--muted); }
.comps-pin.comps-pin-outside-radius circle:not(.comps-pin-halo) { fill: var(--surface); stroke: var(--muted); }
.comps-pin.comps-pin-outside-radius text { fill: var(--muted); }
.comps-map-legend { color: var(--muted); font-size: var(--t12); }
.comps-map-legend::before { content: "○"; margin-right: var(--s2); }

/* Company Details: blank is a visible completeness cue, not a required-field error. */
.company-details-section { border-bottom: 1px solid var(--line); padding: 12px 0; }
.company-details-section summary { cursor: pointer; min-height: 28px; padding: 4px 0; font-weight: 600; }
.company-details-section .field { margin-top: 12px; }
.company-details-section textarea { width: 100%; resize: vertical; }
.company-details-section textarea.company-detail-empty { border: 2px solid var(--danger); }
.company-details-section > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.company-details-section > summary::after { content: '+'; flex: none; }
.company-details-section[open] > summary::after { content: '−'; }

/* Shared review markings: missing takes precedence over a review flag. */
.company-details-section textarea.company-detail-review,
.report-question.review-needs_review textarea,
.report-question.review-needs_review input,
.report-question.review-needs_review select { border: 2px solid var(--tone-attention-fg); }
.report-question.review-missing textarea,
.report-question.review-missing input,
.report-question.review-missing select { border: 2px solid var(--danger); }
.report-review-counts { display: flex; flex-wrap: wrap; gap: var(--s3); }
.review-count.review-missing { color: var(--danger); }
.review-count.review-needs_review { color: var(--tone-attention-fg); }
#reportAnswerBank textarea { width: 100%; resize: vertical; }
#reportAnswerBank summary { cursor: pointer; min-height: 28px; }

.company-detail-suggestion { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.company-detail-sources { align-items: center; margin: var(--s2) 0; }
.company-detail-sources > .meta { flex-basis: 100%; }

/* Lead publications fill reserved reading space instead of moving the rest of the sheet. */
.lead-project-card .case-panel-teaser .summary-preview-text { height: 9.9em; }
.lead-project-card .case-panel-status-slot { height: 2.8em; overflow: auto; }
/* Checkpoint cards keep the full narrative in a bounded reading area; the card opens Summary. */
.project-card[data-state="collapsed"] .checkpoint-card-preview .summary-preview-text { height: 1.65em; max-height: 1.65em; }
.project-card[data-state="expanded"] .checkpoint-card-preview .summary-preview-text { height: min(40vh, 24rem); max-height: min(40vh, 24rem); }

.checkpoint-card-preview { position: relative; }
.project-card[data-state="expanded"] .checkpoint-card-preview::after { content: ""; position: absolute; pointer-events: none; inset: auto 0 0; height: 2.2em; background: linear-gradient(to bottom, transparent, var(--surface)); }
.project-card[data-state="expanded"] > .case-click-target:hover .checkpoint-card-preview::after { background: linear-gradient(to bottom, transparent, var(--panel)); }

/* Compact company evidence lists wrap names and actions on phone screens. */
.company-documents ul { margin: var(--s2) 0; padding-inline-start: var(--s4); }
.company-documents li { margin-block: var(--s2); overflow-wrap: anywhere; }
.company-documents li .btn { margin-inline-start: var(--s2); min-height: 28px; }
.company-documents p { overflow-wrap: anywhere; }

/* Test Mode: the Time machine dial, fixed at the bottom left over the page. Line art on the surface,
   LED digits in the welcome green window; the knob turns, the window stays upright. */
.test-mode-settings .card { display: grid; gap: var(--s3); }
/* Feedback (Settings, admins): a list of feedback and health reports, two lines of text each; an opened one shows
   its reading and, closed, the evidence packet. */
.feedback-settings > .page-actions .tabs { flex: 1 1 auto; }
.feedback-preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.feedback-detail { display: grid; gap: var(--s3); }
.feedback-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-detail-section, .feedback-item, .feedback-field { display: grid; gap: var(--s1); }
.feedback-detail-section p, .feedback-field p { margin: 0; overflow-wrap: anywhere; }
.feedback-item + .feedback-item { padding-top: var(--s2); border-top: 1px solid var(--line); }
.feedback-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.feedback-ref-list { display: grid; gap: var(--s1); margin: 0; padding-left: var(--s4); }
.feedback-ref-list li { display: grid; overflow-wrap: anywhere; }
.feedback-packet .code-block { margin: var(--s2) 0 0; }
.feedback-packet pre { max-height: 24rem; overflow: auto; }
.time-machine { position: fixed; z-index: 90; left: max(var(--s4), env(safe-area-inset-left)); bottom: calc(var(--bottom-navigation-height) + max(var(--s4), env(safe-area-inset-bottom))); width: 184px; height: 184px; border-radius: 50%; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; filter: drop-shadow(0 6px 14px var(--scrim)); }
.time-machine[hidden], body.auth-required .time-machine { display: none; }
.time-machine.is-turning { cursor: grabbing; }
.tm-dial { display: block; width: 100%; height: 100%; overflow: visible; }
.tm-face { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.tm-tick { stroke: var(--line); stroke-width: 1.2; stroke-linecap: round; }
.tm-tick-major { stroke: var(--accent); stroke-width: 2; }
.tm-label { fill: var(--muted); font: 600 var(--t12)/1 var(--font); }
.tm-knob { transition: transform .12s ease-out; }
.time-machine.is-turning .tm-knob { transition: none; }
.tm-knob-rim { fill: var(--paper); stroke: var(--accent); stroke-width: 2; }
.tm-knob-groove { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; }
.tm-pointer { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.tm-pointer-dot { fill: var(--accent); }
.tm-led-window { fill: var(--welcome-green); stroke: var(--accent); stroke-width: 1.5; }
.tm-seg { fill: var(--welcome-sage); opacity: .12; }
.tm-seg.on { opacity: 1; filter: drop-shadow(0 0 1.5px var(--welcome-sage)); }
.time-machine.is-past .tm-pointer, .time-machine.is-past .tm-pointer-dot { stroke: var(--tone-attention-fg); fill: var(--tone-attention-fg); }
/* A past day's banner, under the top bar while the Time machine rests on a past day. */
.time-machine-banner { position: fixed; z-index: 89; top: 64px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); flex-wrap: nowrap; box-shadow: var(--shadow-raise); }
.time-machine-banner[hidden] { display: none; }
/* On phones the text wraps beside "Back to today"; the button never drops to a line of its own. */
.time-machine-banner > span { flex: 1 1 auto; min-width: 0; }
.time-machine-banner > .btn { flex: none; }
/* The time warp (time-warp.mjs): over the bottom navigation, under panels, and never in the way of a click. */
.time-warp { position: fixed; z-index: 97; inset: 0; overflow: hidden; pointer-events: none; }
.time-warp-ring { position: absolute; border-radius: 50%; box-shadow: var(--shadow-warp-ring); animation: time-warp-ring var(--warp-ms) linear both; will-change: transform, opacity; }
.time-warp-ring.is-inward { animation-direction: reverse; }
.time-warp-flash { position: absolute; background: var(--warp-haze); box-shadow: var(--shadow-warp-flash); animation: time-warp-flash var(--flash-ms) ease-out both; }
/* The graph paper's flicker sits behind a field's content, so the field is its own stacking context while it plays. */
.time-warp-paper { isolation: isolate; }
.time-warp-grid { position: fixed; z-index: -1; margin: 0; overflow: hidden; pointer-events: none; }
.time-warp-square { position: absolute; background-image: var(--warp-grid-image); background-size: var(--grid-size); background-position: var(--grid-position); animation: time-warp-flicker var(--flash-ms) linear both; }
.time-warp.is-calm { background: var(--warp-haze); animation: time-warp-calm var(--warp-ms) ease-in-out both; }
@keyframes time-warp-ring { from { transform: scale(0); opacity: 1; } 80% { opacity: 1; } to { transform: scale(1); opacity: 0; } }
@keyframes time-warp-flash { from { opacity: 0; } 15% { opacity: 1; } to { opacity: 0; } }
@keyframes time-warp-flicker { from { opacity: 0; } 12% { opacity: 1; } 30% { opacity: .25; } 48% { opacity: 1; } 66% { opacity: .35; } to { opacity: 0; } }
@keyframes time-warp-calm { from, to { opacity: 0; } 50% { opacity: 1; } }
/* The feedback bell sits in the corner; while it shows, the dial moves up and to the right of it. The box opens
   beside the bell, over everything on the page including the dial. */
body.has-feedback-bell .time-machine { left: calc(max(var(--s4), env(safe-area-inset-left)) + 30px); bottom: calc(var(--bottom-navigation-height) + max(var(--s4), env(safe-area-inset-bottom)) + 30px); }
.feedback-bell { position: fixed; z-index: 95; left: max(var(--s4), env(safe-area-inset-left)); bottom: calc(var(--bottom-navigation-height) + max(var(--s4), env(safe-area-inset-bottom))); }
.feedback-bell[hidden], body.auth-required .feedback-bell { display: none; }
.feedback-bell-button { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1.5px solid var(--accent); border-radius: 50%; background: var(--surface); color: var(--accent); box-shadow: var(--shadow-raise); cursor: pointer; }
.feedback-bell-button .icon { width: 24px; height: 24px; }
.feedback-bell-button:hover, .feedback-bell-button.active { background: var(--accent); color: var(--accent-ink); }
.feedback-panel { position: absolute; left: 64px; bottom: 0; width: min(560px, calc(100vw - 96px)); box-shadow: var(--shadow-raise); }
.feedback-panel[hidden] { display: none; }
.feedback-panel textarea { min-height: 96px; }
.feedback-panel .composer-tools { justify-content: space-between; }
.feedback-panel .composer-tools > .meta { margin: 0; white-space: normal; }
/* The preview of the activity trail the box would send: a short scrolling list under the checkbox. */
.feedback-trail-list { max-height: 12rem; overflow: auto; margin: 0; padding-left: var(--s4); }
@media (max-width: 599px) {
  .time-machine { width: 144px; height: 144px; }
  body.has-feedback-bell .time-machine { left: calc(max(var(--s4), env(safe-area-inset-left)) + 26px); bottom: calc(var(--bottom-navigation-height) + max(var(--s4), env(safe-area-inset-bottom)) + 26px); }
  .feedback-panel { left: 0; bottom: 64px; width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .tm-knob { transition: none; }
}

/* Optional buyer background retains compact summaries; More expands within the card. */
.buyer-cards:has(.buyer-card-background) { grid-auto-rows: minmax(260px, auto); }
.buyer-card-background .buyer-card-body { overflow: visible; }
.buyer-card-background .buyer-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

  /* Home: Your briefing (home-briefing.mjs). The chat box stays Max's front door, one row high; the briefing card
     starts collapsed and opens with the Deal card's divider caret, around the cell's Deal dates and Needs you. */
  .composer-home { min-height: 0; margin-bottom: var(--s5); padding: var(--s3) var(--s4); }
  .composer-home textarea { min-height: 28px; font-size: var(--t15); }
  .composer-home .composer-input { align-items: center; }
  .composer-home .composer-tools { min-height: 0; }
  .brief-stamp { margin: 0 0 var(--s3); }
  .brief { position: relative; display: grid; gap: 0; padding: var(--s4) var(--s5); }
  .brief-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s4); padding-right: 120px; padding-bottom: var(--s2); }
  .brief-card-title { flex: 1 1 100%; margin: 0; font-size: var(--t20); font-weight: 600; line-height: 1.25; }
  .brief-lead { flex: 1 1 100%; margin: 0; font-size: var(--t16); font-weight: 500; line-height: 1.4; }
  .brief-counts { flex: 1 1 auto; }
  .brief > summary > .deal-card-divider { margin-top: var(--s2); margin-bottom: 0; }
  .brief[data-state="expanded"] > summary > .brief-counts { display: none; }
  .brief-body { display: grid; gap: var(--s4); padding-top: var(--s4); }
  .brief-section { display: grid; gap: var(--s1); }
  .brief-section + .brief-section { padding-top: var(--s3); border-top: 1px solid var(--line); }
  .brief-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); margin: 0 0 var(--s1); font-size: var(--t13); }
  .brief-heading > .meta { text-transform: none; letter-spacing: 0; font-weight: 400; }
  .brief-mail-more > summary { list-style: revert; list-style-position: inside; min-height: 24px; }
  .brief-mail-more > summary::-webkit-details-marker { display: revert; }
  .brief-row { display: flex; align-items: flex-start; gap: var(--s3); min-width: 0; padding: var(--s2) 0; }
  .brief-time { flex: 0 0 64px; font-size: var(--t15); font-weight: 600; font-variant-numeric: tabular-nums; }
  .brief-who { flex: 0 0 150px; font-size: var(--t13); font-weight: 600; line-height: 1.35; }
  .brief-main { display: grid; flex: 1 1 200px; gap: 2px; min-width: 0; }
  .brief-title { font-size: var(--t15); font-weight: 600; line-height: 1.35; }
  .brief-row > .btn, .brief-row > .pill { flex: 0 0 auto; margin-left: auto; align-self: center; }
  #requestsView .brief-row > .pill { padding: 3px 9px; background: var(--tone-bg); }
  .brief-part { display: grid; gap: var(--s1); }
  .brief-part > .brief-heading { justify-content: space-between; }
  .brief-part .home-dates { gap: var(--s3); }
  @media (max-width: 699px) {
    .brief { padding: var(--s3) var(--s4); }
    .brief-row { flex-wrap: wrap; }
    .brief-who { flex-basis: 100%; }
    .brief-row > .btn, .brief-row > .pill { margin-left: 0; }
  }
  /* Example rows and review rows inside the briefing: a transient highlight on hover or focus reveals one button
     (Prep, Draft, Review); no rules between rows and no status at the right (Matthew, 2026-11-05). */
  .brief-action-row { position: relative; margin-inline: calc(-1 * var(--s2)); padding-inline: var(--s2); border-radius: var(--r1); transition: background .15s ease; }
  .brief-action-row:hover, .brief-action-row:focus-within { background: var(--panel); }
  .brief-row-action { visibility: hidden; }
  .brief-action-row:hover .brief-row-action, .brief-action-row:focus-within .brief-row-action { visibility: visible; }
  .brief-part .review-rows { display: grid; }
  .brief-part .review-row { align-items: flex-start; width: auto; min-height: 0; margin-inline: calc(-1 * var(--s2)); padding: var(--s2); border-top: 0; border-radius: var(--r1); transition: background .15s ease; }
  .brief-part .review-row + .review-row { border-top: 0; }
  .brief-part .review-row:hover, .brief-part .review-row:focus-visible { background: var(--panel); }
  .brief-part .review-row:hover .review-row-title { color: inherit; }
  .brief-part .review-row > .pill, .brief-part .review-row > time { display: none; }
  .brief-part .review-row-case { flex: 0 0 240px; max-width: none; white-space: normal; font-size: var(--t13); font-weight: 600; color: var(--ink); line-height: 1.35; }
  .brief-part .review-row-title { flex: 1 1 200px; white-space: normal; font-size: var(--t15); font-weight: 600; line-height: 1.35; }
  .brief-part .review-row::after { content: 'Review'; flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 32px; margin-left: auto; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r1); background: var(--surface); color: var(--ink); font-size: var(--t13); font-weight: 600; visibility: hidden; }
  .brief-part .review-row:hover::after, .brief-part .review-row:focus-visible::after { visibility: visible; }
  /* Touch screens have no hover: the row buttons stay visible there (coordinator, 2026-11-05). */
  @media (hover: none) { .brief-row-action, .brief-part .review-row::after { visibility: visible; } }
  /* Coming soon: a tag on the top-right of a previewed surface, raised like the Time machine banner. */
  .coming-soon { position: absolute; top: var(--s3); right: var(--s4); z-index: 1; padding: var(--s1) var(--s3); font-size: var(--t12); font-weight: 600; box-shadow: var(--shadow-raise); }
  .outreach-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
  .outreach-title-line > .coming-soon { position: static; }
  /* Marketing (2026-11-09): Voices, then Narration, one column. */
  /* Two tiles side by side on a desktop, stacked on a phone (Matthew, 2026-11-10). */
  /* Measured on the Marketing column, not the window, so an open Ask Max panel stacks the tiles rather than squeezing them. */
  #marketingContent { container-type: inline-size; }
  /* Compact tiles, equal height side by side (Matthew, 2026-11-10). */
  .narration { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: var(--s3); }
  @container (min-width: 640px) { .narration { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .narration-card { position: relative; display: grid; align-content: start; gap: var(--s2); min-width: 0; }
  .narration-card > .eyebrow { margin: 0; }
  /* The two top rows are one height, so the upload boxes line up. */
  .narration-card > .field, .narration-card > .field-check { display: flex; align-items: center; gap: var(--s2); min-height: 2.25rem; margin: 0; }
  .narration-card > .field > select { flex: 1 1 auto; min-width: 0; }
  .narration-fold { display: grid; gap: var(--s2); }
  .narration-fold-head { display: flex; align-items: center; gap: var(--s1); width: 100%; padding: var(--s1) 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; text-align: start; cursor: pointer; }
  .narration-fold-head > .icon { flex: none; }
  .narration-fold.is-open > .narration-fold-head > .icon { transform: rotate(90deg); }
  .narration-list[hidden] { display: none; }
  .narration-card > .coming-soon + .meta { padding-right: 7.5rem; }
  .narration-card > .meta { margin: 0; }
  .narration-drop { position: relative; display: grid; justify-items: center; gap: var(--s2); padding: var(--s3); border: 2px dashed var(--line); border-radius: var(--r2); background: var(--paper); text-align: center; }
  .narration-drop > p { margin: 0; }
  .narration-drop-title { font-weight: 600; }
  .narration-drop.drag-over { border-color: var(--ink); }
  .narration-drop[aria-disabled="true"] { opacity: .55; }
  .narration-notice:empty { display: none; }
  .narration-list { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
  .narration-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--line); }
  .narration-row > .row-main { flex: 1 1 12rem; min-width: 0; }
  .narration-row > .confirm-bar { flex-basis: 100%; }
  .narration-row-title { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
  .narration-row .meta { margin: 0; }
  .narration-row-actions { display: flex; gap: var(--s1); }
  .narration-chosen { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
  .narration-card > .narration-about { margin: 0; }
  /* Go sits inside the upload box at its bottom right (Matthew, 2026-11-10). */
  .narration-drop > .narration-go { position: absolute; right: var(--s2); bottom: var(--s2); margin: 0; }
  .narration-drop > .narration-chosen { text-align: center; padding-inline: 4rem; }
  .narration-chosen[hidden] { display: none; }
  .narration-progress { display: flex; align-items: center; gap: var(--s2); }
  .narration-progress[hidden] { display: none; }
  .narration-progress > progress { flex: 1 1 auto; min-width: 0; height: 8px; accent-color: var(--ink); }
  .narration-rename { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); flex: 1 1 100%; }
  .narration-rename > input { flex: 1 1 12rem; min-width: 0; }
  .brief-dialog-body { display: grid; gap: var(--s4); }
  .brief-dialog-lead { margin: 0; font-size: var(--t15); line-height: 1.45; }
  .brief-dialog-section { display: grid; gap: var(--s1); }
  .brief-dialog-list { margin: 0; padding-left: 1.2em; font-size: var(--t14); line-height: 1.45; }
  .brief-dialog-list > li + li { margin-top: var(--s1); }
  .brief-draft { display: grid; gap: var(--s3); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r2); background: var(--paper); font-size: var(--t14); line-height: 1.5; }
  .brief-draft > p { margin: 0; white-space: pre-line; }
  @media (max-width: 699px) {
    .brief-summary { padding-right: 0; padding-top: var(--s5); }
    .brief-part .review-row { flex-wrap: wrap; }
    .brief-part .review-row-case { flex-basis: 100%; }
    .brief-part .review-row::after { margin-left: 0; }
  }