/* Solva Customers: Gold Book. The flat working page sits inside a warm ink frame.
   Gold is reserved for selected navigation, primary actions and numbers on ink.
   Existing component contracts remain; the book and shell are rebuilt below. */
:root {
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22,.68,0,1); --ease-out: cubic-bezier(.16,1,.3,1);
  --r-card: 12px; --r-ctl: 8px; --appbar: 68px; --tabbar: 68px; --rail: 208px;
  color-scheme: light;
  --bg: #FAF8F4; --surface: #FFFDF9; --surface-2: #EEEAE2; --hairline: #DAD4C9; --ctrl: #82786A;
  --ink: #211D17; --ink-2: #554E43; --ink-3: #6B6256; --primary: #F9A01B; --on-primary: #16130C;
  --late: #A13619; --their: #F0EAE1; --mark: #000000; --on-mark: #FFFFFF; --focus: #265FA0;
  --need-bg: #FFFBEE; --need-chip: #FBECC2; --need-ink: #7A5A00; --soon-bg: #F2E9D3; --soon-line: #E3D3A8; --soon-ink: #7A5A00;
  --frame: #201A14; --frame-ink: #FAF5EC; --frame-muted: #C7BEB0; --frame-hover: #393127;
  --scrim: rgba(22,19,12,.36); --shadow-card: none; --pop-shadow: 0 18px 60px rgba(22,19,12,.20);
  --w400: 400; --w500: 500; --w600: 600;
  --print-paper: #FFFFFF; --print-ink: #16130C; --print-ink-3: #554E43; --print-line: #CCCCCC;
  /* 23 Oct 2026 spec: Sand surfaces (Jordan, 19 Oct; business.css), the scales and motion. */
  --page: #EDE7DC; --panel: #FFFFFF; --panel-line: #DCD3C4; --tile: #F6F2EB; --summary: var(--frame);
  --t-cap: 400 12px/16px var(--sans); --t-meta: 400 13px/18px var(--sans); --t-body: 400 15px/22px var(--sans);
  --t-title: 600 17px/24px var(--sans); --t-section: 400 22px/28px var(--serif); --t-figure: 400 30px/32px var(--serif); --t-h1: 400 38px/44px var(--serif);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-in: 6px; --r-page: 16px; --row-h: 56px; --row-h-phone: 64px;
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 260ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: #191714; --surface: #201E1A; --surface-2: #2C2923; --hairline: #49443B; --ctrl: #918777;
  --ink: #F5F1E8; --ink-2: #D0C8BC; --ink-3: #B1A99C; --primary: #F9A01B; --on-primary: #16130C;
  --late: #FFB69B; --their: #302A23; --mark: #000000; --on-mark: #FFFFFF; --focus: #B1CCFF;
  --need-bg: #2E2812; --need-chip: #4A3A0A; --need-ink: #FFD98A; --soon-bg: #3A3118; --soon-line: #5A4A1E; --soon-ink: #FFD98A;
  --scrim: rgba(0,0,0,.55); --shadow-card: none; --pop-shadow: 0 18px 60px rgba(0,0,0,.45);
  --w400: 400; --w500: 500; --w600: 600;
  --page: #1C1A16; --panel: #27241F; --panel-line: #3B362E; --tile: #302C26; --summary: #34302A; --frame: #0B0A08; --frame-hover: #2A241D;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #191714; --surface: #201E1A; --surface-2: #2C2923; --hairline: #49443B; --ctrl: #918777;
  --ink: #F5F1E8; --ink-2: #D0C8BC; --ink-3: #B1A99C; --primary: #F9A01B; --on-primary: #16130C;
  --late: #FFB69B; --their: #302A23; --mark: #000000; --on-mark: #FFFFFF; --focus: #B1CCFF;
  --need-bg: #2E2812; --need-chip: #4A3A0A; --need-ink: #FFD98A; --soon-bg: #3A3118; --soon-line: #5A4A1E; --soon-ink: #FFD98A;
  --scrim: rgba(0,0,0,.55); --shadow-card: none; --pop-shadow: 0 18px 60px rgba(0,0,0,.45);
  --w400: 400; --w500: 500; --w600: 600;
  --page: #1C1A16; --panel: #27241F; --panel-line: #3B362E; --tile: #302C26; --summary: #34302A; --frame: #0B0A08; --frame-hover: #2A241D;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.5 var(--sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; min-height: 100dvh; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: 16px; }
button { cursor: pointer; }
/* Links are ink with an underline, never the browser's blue. */
a { color: var(--ink); text-decoration-color: var(--ctrl); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
.sprite { display: none; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; font-weight: var(--w400); }
/* The mark is artwork, the same in both themes (Mark, 4 Oct 2026): black tile, white S, its top piece in the app's gold. */
.mk-bg { fill: var(--mark); }
.mk-fg { fill: var(--on-mark); }
.mk-accent { fill: var(--primary); }
/* Status glyphs (12px, the ink of the words beside them). The late triangle is the only coloured one. */
.glyph { width: 12px; height: 12px; flex: none; fill: currentColor; stroke: none; }
/* Styled on the symbol itself: a <use> copy only takes rules that match the original element. */
.g-line { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.g-dash { stroke-dasharray: 2 1.6; }
.g-cut { fill: none; stroke: var(--surface); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- buttons: quiet filled, never outlined or dashed (23 Oct spec). One gold primary per view. ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-ctl);
  border: 0; background: var(--tile); color: var(--ink); font: 600 15px/1 var(--sans); white-space: nowrap; text-decoration: none; transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.btn:hover { background: var(--panel-line); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--primary); color: var(--on-primary); }
.btn.primary:hover, .btn.primary:active { background: var(--primary); }
.btn.ghost, .btn.quiet, .btn.text { background: transparent; }
.btn.ghost:hover, .btn.quiet:hover { background: var(--tile); }
.btn.text { padding: 0 var(--s2); }
.btn.text:hover { background: transparent; text-decoration: underline; text-decoration-color: var(--ctrl); text-underline-offset: 3px; }
.btn.small { min-height: 44px; padding: 0 14px; }
.btn.square { width: 44px; flex: none; padding: 0; }
.btn.danger { background: var(--ink); color: var(--bg); }
/* Disabled: grey words on the quiet fill (ink-3 on tile is 5.37:1 light, 5.96:1 dark), never faded below AA. */
.btn[disabled], .btn.primary[disabled], .btn[disabled]:hover { cursor: not-allowed; background: var(--tile); color: var(--ink-3); transform: none; }
a.btn { color: var(--ink); }
a.btn.primary { color: var(--on-primary); }
.btn .ico { width: 18px; height: 18px; }
.icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; border-radius: var(--r-ctl); color: var(--ink); }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn .ico { width: 24px; height: 24px; }
/* A status word: small grey capitals, never a pill or a tint (words first, shape second). */
.chip, .st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: var(--w600); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 600; line-height: 18px;
  display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }

/* ---------- the app bar (paper, a hairline under it) ---------- */
#page { min-height: 100dvh; display: flex; flex-direction: column; }
/* viewport-fit=cover: the bar owns the iPhone status strip, so it reserves the top inset (0 everywhere else). */
.appbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; height: calc(var(--appbar) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; background: var(--bg); border-bottom: 1px solid var(--hairline); }
.brand { display: flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; text-decoration: none; color: var(--ink); }
.brand .mark { width: 28px; height: 28px; flex: none; }
.brand b { display: block; font-size: 17px; line-height: 22px; font-weight: 600; white-space: nowrap; }
.brand small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-3); font-weight: var(--w400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar .spacer { flex: 1; }
.nav-btn { position: relative; display: none; }
.nav-btn .count, .find-btn .count { position: absolute; top: -6px; right: -6px; }
.walkin .walkin-label { display: none; }
/* Outline buttons in the bar sit on the paper itself (the canon draws them unfilled). */
.appbar .btn { background: transparent; }
.appbar .btn:hover { background: var(--surface-2); }
.walkin { width: 44px; flex: none; padding: 0; }
.walkin .ico { width: 20px; height: 20px; }
.me { position: relative; flex: none; }
.me-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: 13px; flex: none; }
.menu { position: absolute; right: 0; top: 52px; min-width: 240px; padding: 6px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: var(--pop-shadow); z-index: 45; }
.menu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--hairline); margin-bottom: 4px; }
.menu .who b { display: block; font-weight: 600; }
.menu .who small { display: block; color: var(--ink-3); font-size: 13px; font-weight: var(--w400); }
.menu button { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border: 0; background: none; border-radius: 8px; text-align: left; font-size: 15px; }
.menu button:hover { background: var(--surface-2); }
.viewas-row { display: grid; gap: 4px; padding: 6px 10px 10px; border-bottom: 1px solid var(--hairline); margin-bottom: 4px; font-size: 13px; font-weight: var(--w400); color: var(--ink-3); }
.viewas-row select { min-height: 44px; border-radius: var(--r-ctl); border: 1px solid var(--ctrl); background: var(--surface); color: var(--ink); padding: 0 8px; }

/* The search field: its own row under the bar on a phone, inside the bar on a desk. */
.searchrow { padding: 4px 16px; }
.searchrow:empty { display: none; }
.search { position: relative; flex: 1; min-width: 0; }
.search input { width: 100%; height: 44px; padding: 0 14px 0 42px; border-radius: var(--r-ctl); border: 1px solid var(--ctrl); background: var(--surface); color: var(--ink); }
.search .ico { position: absolute; left: 13px; top: 12px; color: var(--ink-2); pointer-events: none; }
.recent { position: absolute; left: 0; right: 0; top: 50px; z-index: 35; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: var(--pop-shadow); padding: 6px; }
.recent-title { margin: 6px 10px 4px; font-size: 12px; font-weight: var(--w600); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.recent ul { list-style: none; margin: 0; padding: 0; }
.recent a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.recent a:hover, .recent a:focus-visible { background: var(--surface-2); }
/* Demo data: a strip on a phone, a pill in the bar on a desk. Neutral: it is a fact, not an alarm. */
.demo { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; padding: 7px 16px; background: var(--surface-2); color: var(--ink-2); font-size: 13px; line-height: 18px; font-weight: var(--w400); text-align: center; }
.demo .ico { width: 14px; height: 14px; stroke-width: 1.8; }

main#view { flex: 1; min-width: 0; padding: 24px 16px 40px; }
body.today-page main#view { padding: 0 0 24px; }

/* ---------- the phone tab bar ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: calc(var(--tabbar) + env(safe-area-inset-bottom));
  padding: 0 4px env(safe-area-inset-bottom); background: var(--bg); border-top: 1px solid var(--hairline); }
.tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; border: 0; background: none;
  color: var(--ink-3); text-decoration: none; font-size: 12px; line-height: 16px; font-weight: var(--w400); }
.tabbar .ico { width: 24px; height: 24px; stroke-width: 1.6; }
.tabbar a[aria-current="page"], .tabbar button.on { color: var(--ink); font-weight: 600; }
.tabbar a[aria-current="page"] .ico, .tabbar button.on .ico { stroke-width: 2.3; }
.tabbar a[aria-current="page"]::before, .tabbar button.on::before { content: ''; position: absolute; top: -1px; left: 14px; right: 14px; height: 2px; background: var(--ink); border-radius: 0 0 2px 2px; }
.tabbar .count { position: absolute; top: 6px; left: calc(50% + 6px); }
body:not(.out) main#view { padding-bottom: calc(var(--tabbar) + 24px + env(safe-area-inset-bottom)); }

/* ---------- page headings (sections other than Today) ---------- */
.bar { display: flex; align-items: flex-end; gap: 12px 16px; margin: 0 0 20px; flex-wrap: wrap; }
.bar .titles { margin-right: auto; min-width: 0; }
.bar h1 { margin: 0; font: 400 30px/1.15 var(--serif); letter-spacing: -.01em; }
.bar h1 em { font-style: italic; }
.bar .date { display: block; margin-top: 4px; color: var(--ink-3); font-size: 13px; font-weight: var(--w400); }
/* Two-way switch (Mine / Everyone): the chosen half in the selection style. */
.seg { display: inline-flex; flex: none; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px; border: 0; border-radius: var(--r-ctl); background: var(--tile); }
/* A switch too wide for the screen scrolls sideways, with the chip row's fade to say so. */
.seg button { flex: none; min-height: 40px; padding: 0 var(--s3); border: 0; border-radius: var(--r-in); background: transparent; color: var(--ink); font: 400 15px/1 var(--sans); }
.seg button:hover { background: var(--panel-line); }
.seg button[aria-pressed="true"], .seg button[aria-pressed="true"]:hover { background: var(--primary); color: var(--on-primary); font-weight: 600; }

/* ---------- Today ---------- */

/* ---------- groups and rows (the other sections) ---------- */
.groups { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.groups.one { grid-template-columns: minmax(0, 1fr); }
.group { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 4px 0 4px; box-shadow: var(--shadow-card); scroll-margin-top: 84px; }
.group > header { display: flex; align-items: center; gap: 10px; padding: 12px 16px 8px; }
.group > header h2 { margin: 0; font: 400 22px/26px var(--serif); }
.group > header .n { min-width: 28px; height: 26px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.group > header p { margin: 0 0 0 auto; color: var(--ink-3); font-size: 12px; font-weight: var(--w600); letter-spacing: .06em; text-transform: uppercase; }
.group .empty { padding: 4px 16px 16px; color: var(--ink-3); font-size: 15px; margin: 0; }
.empty.roomy { padding: 24px 16px; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { position: relative; display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--hairline); cursor: pointer; min-height: 64px; }
.rows > .row:first-child { border-top-color: transparent; }
.row:hover, .row:focus-within { background: var(--surface-2); }
.row .main { flex: 1; min-width: 0; }
a.main { display: block; color: inherit; text-decoration: none; border-radius: 8px; }
.row .name { font-weight: 600; font-size: 15px; display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.row .name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .sub { color: var(--ink-2); font-size: 13px; font-weight: var(--w400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.row .said { margin-top: 2px; color: var(--ink-2); font: italic 400 15px/1.4 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .side { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.row.static { cursor: default; }
.row.static:hover { background: none; }
.row.mini { padding: 10px 0; min-height: 0; cursor: default; border-top: 1px solid var(--hairline); }
.results > .row.mini:first-child { border-top: 0; }
.row.mini:hover { background: none; }
.main.link { cursor: pointer; }
/* Clocks elsewhere (Team, Showroom, the enquiry list): grey words and numbers; no colour. */
.clock { font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
.clock svg { width: 14px; height: 14px; }
.owner { font-size: 13px; color: var(--ink-3); white-space: nowrap; font-weight: var(--w400); }
.row .side .mini-actions { margin-top: 2px; }

/* ---------- lists, filters, tables ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 12px; margin: -4px 0 20px; align-items: flex-end; }
.filter { display: grid; gap: 4px; font-size: 13px; font-weight: var(--w400); color: var(--ink-3); }
.filter select, .filter input[type=search] { min-height: 44px; border-radius: var(--r-ctl); border: 1px solid var(--ctrl); background: var(--surface); color: var(--ink); padding: 0 12px; }
.filter.grow { flex: 1 1 220px; }
.filter.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; color: var(--ink-2); }
.filter.check input, .tick input { width: 20px; height: 20px; accent-color: var(--ink); }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 18px; }
.bulk { display: flex; gap: 8px; padding: 0 16px 12px; flex-wrap: wrap; }
.bulk select { min-height: 44px; border-radius: var(--r-ctl); border: 1px solid var(--ctrl); background: var(--surface); color: var(--ink); padding: 0 12px; }
.tick { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15px; }
.table th, .table td { text-align: left; padding: 12px 16px; border-top: 1px solid var(--hairline); }
.table th { font-size: 12px; color: var(--ink-3); font-weight: var(--w600); letter-spacing: .06em; text-transform: uppercase; border-top: 0; }
.table td.num, .table th.num { text-align: right; }
.table a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ctrl); text-underline-offset: 3px; }
.table-wrap { overflow-x: auto; }
.table td:first-child { white-space: nowrap; }
tr.off td { color: var(--ink-3); }
.views { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 18px; align-items: center; }
.view-chip { display: inline-flex; align-items: center; border: 0; border-radius: var(--r-ctl); background: var(--tile); }
.view-chip.on { background: var(--primary); }
.view-chip.on a, .view-chip.on button { color: var(--on-primary); }
.view-chip a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px 0 14px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 13px; }
.view-chip.on a { font-weight: 600; }
.view-chip button { width: 44px; height: 44px; border: 0; background: none; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-ctl); }
.warn { margin: -8px 0 20px; padding: 12px 16px; border-radius: var(--r-ctl); background: var(--surface-2); border: 1.5px solid var(--ink); color: var(--ink); font-size: 15px; }

/* ---------- the customer card ---------- */
.sheet { position: fixed; inset: 0; z-index: 40; display: flex; justify-content: flex-end; }
.sheet .scrim { position: absolute; inset: 0; background: var(--scrim); }
.sheet .panel { position: relative; width: min(640px, 100%); height: 100%; background: var(--bg); border-left: 1px solid var(--hairline); box-shadow: var(--pop-shadow); display: flex; flex-direction: column; }
@media (prefers-reduced-motion: no-preference) {
  .sheet.enter .panel { animation: slide .24s var(--ease-out); } .sheet.enter .scrim { animation: fade .24s var(--ease-out); }
  @keyframes slide { from { transform: translateX(40px); opacity: .4; } } @keyframes fade { from { opacity: 0; } }
}
.sheet .head { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 16px 0 8px; padding-top: env(safe-area-inset-top); background: var(--bg); border-bottom: 1px solid var(--hairline); }
.sheet .head h2 { margin: 0; font: 400 22px/28px var(--serif); letter-spacing: -.005em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet .head h2:focus { outline: none; }
.sheet .head .close-x { display: none; }
.sheet .body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.col-main, .col-history { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0; }
.card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 12px; box-shadow: var(--shadow-card); }
.card-title { margin: 0 0 8px; font: 400 22px/26px var(--serif); }
/* The everyday actions: icon over word, outline; Call and Text drawn disabled (dashed) on demo numbers. */
.menu-wrap { position: relative; flex: none; }
.menu-wrap > .btn .ico { width: 16px; height: 16px; }
.more-list { list-style: none; margin: 0; padding: 0; display: grid; }
.more-list a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; border-radius: var(--r-ctl); color: var(--ink); text-decoration: none; font-size: 15px; }
.more-list a:hover { background: var(--surface-2); }
.more-list a[aria-current="page"] { background: var(--surface-2); font-weight: 600; }
.more-list .ico { width: 22px; height: 22px; color: var(--ink-2); }
.more-list .count { margin-left: auto; }
.pop-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 45; min-width: 220px; padding: 6px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: var(--pop-shadow); display: grid; }
.pop-menu button { min-height: 44px; padding: 0 12px; border: 0; background: none; border-radius: 8px; text-align: left; font-size: 15px; color: var(--ink); }
.pop-menu button:hover, .pop-menu button:focus-visible { background: var(--surface-2); }
.dnc { margin: 12px 0 0; padding: 10px 14px; border-radius: var(--r-ctl); background: var(--surface-2); border: 1.5px solid var(--ink); color: var(--ink); font-size: 15px; }
.hint { color: var(--ink-3); font-size: 13px; font-weight: var(--w400); margin: 8px 0 0; }
.sub-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; }
.sub-head h3, .sub-head h4 { margin: 0; font: 400 17px/24px var(--serif); }
.btn.tight { padding: 0 4px; }
.sub-head .btn.text { font-size: 15px; }
.latest .sub-head { margin-bottom: 8px; }
/* Worth a call, on the card. */
.opp-card .st { margin-bottom: 4px; }
.opp-item + .opp-item { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.opp-item b { display: block; font-size: 17px; line-height: 24px; font-weight: 400; }
.opp-item .sub { font-size: 13px; line-height: 20px; color: var(--ink-2); font-weight: var(--w400); }
.opp-item .mini-actions { justify-content: flex-start; margin-top: 12px; }
/* The enquiry. */
/* Status is a row of words; the one it is at, in the selection style with a check. */
.field select, .field input, .next input, .stage-pick select { width: 100%; min-height: 44px; border-radius: var(--r-ctl); border: 1px solid var(--ctrl); background: var(--surface); color: var(--ink); padding: 0 12px; }
/* Every placeholder in ink-3 (5.33:1 light, 6.27:1 dark on the page); the browser's own grey fails in dark. */
::placeholder { color: var(--ink-3); opacity: 1; }
.mini-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.results { list-style: none; margin: 0; padding: 0; }
.extras { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.extra-line { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; font-size: 15px; }
.stage-pick { display: inline-flex; align-items: center; gap: 12px; flex: 1; }
.stage-pick > span { font-size: 13px; color: var(--ink-3); white-space: nowrap; font-weight: var(--w400); }
.stage-pick select { max-width: 280px; }
.sub-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.sub-block + .sub-block { border-top: 0; padding-top: 0; }
.quote { border: 1px solid var(--hairline); border-radius: var(--r-ctl); padding: 12px; display: grid; gap: 4px; }
.quote .amt { font-size: 22px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.quote .st { color: var(--ink-2); }
.quote .sub { font-size: 13px; line-height: 20px; color: var(--ink-3); font-weight: var(--w400); }
.quote .mini-actions { justify-content: flex-start; margin-top: 8px; }
.quote .mini-actions .btn { min-height: 48px; font-size: 15px; }
.quote.off { opacity: .75; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist label { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; cursor: pointer; }
.checklist input { width: 22px; height: 22px; accent-color: var(--ink); flex: none; }

/* Everything so far: grouped by day; what people said is full size, what the system did is quiet. */
.timeline { display: grid; gap: 12px; }
.day { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 12px; line-height: 16px; font-weight: var(--w600); letter-spacing: .06em; text-transform: uppercase; margin: 4px 0 0; }
.day::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }
.bubble { font-size: 15px; line-height: 22px; white-space: pre-wrap; word-wrap: break-word; color: var(--ink); }
.bubble .tag { display: block; font-size: 12px; line-height: 16px; font-weight: var(--w600); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.bubble .by { display: block; font-size: 13px; line-height: 18px; margin-top: 2px; color: var(--ink-3); font-weight: var(--w400); }
.bubble.said .words { font: italic 500 16px/23px var(--serif); }
.bubble.note { padding: 10px 12px; border-radius: var(--r-ctl); background: var(--surface-2); }
.sys { color: var(--ink-3); font-size: 13px; line-height: 18px; font-weight: var(--w400); }
.older { justify-self: start; }
/* Latest: the last two things said, as bubbles: ours on the right, theirs on the left in their colour. */
.latest .timeline { gap: 8px; }
.latest .bubble { max-width: 92%; padding: 10px 12px; border-radius: 12px; }
.latest .bubble.out { justify-self: end; background: var(--surface-2); }
.latest .bubble.in { justify-self: start; background: var(--their); border: 1px solid var(--hairline); }
.latest .bubble .tag { color: var(--ink-2); }
.latest .bubble .by { color: var(--ink-2); }

/* The composer. Phone: a slim bar that opens after a call or a tap. Desk: always open. */
.composer { background: var(--bg); border-top: 1px solid var(--hairline); padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.composer.resting { display: flex; align-items: center; justify-content: space-around; height: calc(64px + env(safe-area-inset-bottom)); padding: 0 8px env(safe-area-inset-bottom); }
.composer.resting button { min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--ink); font-size: 15px; font-weight: 600; }
.composer.resting button.last { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.comp-head { display: flex; align-items: center; gap: 8px; margin: -4px 0 8px; }
.comp-head h3 { flex: 1; margin: 0; font: 400 22px/26px var(--serif); }
.modes { display: flex; gap: 8px; margin-bottom: 8px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.modes button { flex: none; min-height: 44px; padding: 0 16px; border-radius: var(--r-ctl); border: 1.5px solid transparent; background: none; color: var(--ink); font-weight: 400; font-size: 15px; white-space: nowrap; }
.modes button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.opt-row { display: grid; gap: 8px; margin-bottom: 8px; }
.outcomes { display: flex; gap: 8px; flex-wrap: wrap; }
.outcomes button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: var(--r-ctl); border: 0; background: var(--tile); font-weight: 400; font-size: 15px; color: var(--ink); white-space: nowrap; }
.outcomes button .ico { display: none; width: 16px; height: 16px; stroke-width: 2.2; }
.outcomes button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.outcomes button[aria-pressed="true"] .ico { display: inline-block; }
.compose-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.compose-row textarea { flex: 1 1 100%; min-height: 48px; max-height: 160px; resize: none; border-radius: var(--r-ctl); border: 1px solid var(--ctrl); background: var(--surface); padding: 12px 14px; line-height: 22px; }
.compose-row .grow { flex: 1; }
.compose-row .btn.primary { min-height: 48px; font-size: 15px; padding: 0 20px; }
.about, .when { min-height: 44px; border-radius: var(--r-ctl); border: 1px solid var(--ctrl); background: var(--surface); color: var(--ink); padding: 0 12px; }
.about { width: 100%; margin-bottom: 8px; }
.when { flex: 0 1 220px; }
.tpl-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tpl-tools { display: inline-flex; gap: 8px; }

/* ---------- dialogs, forms, sign-in ---------- */
dialog { border: 1px solid var(--hairline); padding: 0; border-radius: var(--r-card); background: var(--surface); color: var(--ink); box-shadow: var(--pop-shadow); width: min(480px, calc(100% - 24px)); }
dialog::backdrop { background: var(--scrim); }
dialog form { padding: 24px 24px 20px; display: grid; gap: 14px; }
dialog h2 { margin: 0 0 2px; font: 400 22px/30px var(--serif); }
dialog p { margin: 0; color: var(--ink-2); }
label.f { display: grid; gap: 4px; font-size: 13px; font-weight: var(--w400); color: var(--ink-3); }
label.f input, label.f select, label.f textarea { min-height: 44px; border-radius: var(--r-ctl); border: 1px solid var(--ctrl); background: var(--surface); padding: 0 12px; color: var(--ink); }
label.f textarea { padding: 10px 12px; min-height: 80px; resize: vertical; }
label.f small { font-size: 13px; }
.actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.err { background: var(--surface-2); border: 1.5px solid var(--ink); color: var(--ink); border-radius: var(--r-ctl); padding: 10px 14px; font-size: 15px; }
.signed-out { max-width: 460px; margin: 48px auto; }
.signed-out h1 { margin: 0 0 6px; font: 400 38px/1.15 var(--serif); }
.signed-out p { margin: 0; }
.signin { display: grid; gap: 14px; padding: 28px; }
/* Two-step (30 Sep): the QR keeps a white ground in both themes (scanners need it); everything else is tokens. */
.mfa-qr { display: block; width: 184px; height: 184px; margin: 0 auto; border-radius: 12px; }
.mfa-key { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 13px; letter-spacing: .06em; word-spacing: .25em; text-align: center; color: var(--ink); overflow-wrap: anywhere; margin: 8px 0 0; user-select: all; }
.mfa-codes { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 13px; color: var(--ink); columns: 2; column-gap: 24px; padding-left: 24px; margin: 0; line-height: 1.8; }
.mfa-tick { display: flex; gap: 10px; align-items: center; min-height: 44px; color: var(--ink); font-size: 15px; }
.mfa-tick input { width: 20px; height: 20px; }
.signin a, .err a { color: var(--ink); font-weight: 600; }
.account { display: grid; gap: 14px; padding: 20px; max-width: 560px; }
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--bg);
  padding: 12px 18px; border-radius: 12px; font-size: 15px; font-weight: 600; box-shadow: var(--pop-shadow); max-width: calc(100% - 32px); }
.sheet:not([hidden]) ~ .toast { bottom: 96px; }

/* ---------- the dealership workflow: showroom, stock, deliveries, reports, settings, quotes ---------- */
.link-btn { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ctrl); text-underline-offset: 4px; font-size: 15px; font-variant-numeric: tabular-nums; }
.visit .main { display: grid; gap: 2px; }
.visit-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
label.inline select { min-height: 44px; border-radius: var(--r-ctl); border: 1px solid var(--ctrl); background: var(--surface); color: var(--ink); padding: 0 10px; }
.row .name a, .row.mini a, .results a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ctrl); text-underline-offset: 3px; }
/* Name links in lists and tables: the tap area is padded to 44px tall, the text and the layout do not move. */
.row .name a, .table td a, .desk-head .card-title a { display: inline-block; padding-block: 11px; margin-block: -11px; }
.status-line { margin: 10px 0 0; }
.card-title.spaced { margin-top: 22px; }
dialog.wide { width: min(720px, calc(100% - 24px)); }
.panel-head { display: flex; align-items: center; gap: 8px; padding: 16px 12px 4px 24px; }
.panel-head h2 { flex: 1; }
.panel-body { padding: 4px 24px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-height: min(78dvh, 760px); overflow-y: auto; }
.panel-body p { margin: 0; }
a.tile { color: inherit; text-decoration: none; cursor: pointer; }
.report-detail, #team-due { scroll-margin-top: calc(var(--appbar) + 12px); }
.report-detail { margin-bottom: 24px; }
.report-detail header .btn { margin-left: auto; }
.with-us .sub-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.with-us .sub-head h3 { margin: 0; font: 400 22px/26px var(--serif); }
.hist-facts { margin: 0 0 6px; font-size: 13px; color: var(--ink-2); }
.hist-due { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; font-weight: var(--w600); color: var(--ink); }
.hist-due.late { color: var(--late); }
.with-us .row.mini .sub { white-space: normal; }
.with-us .btn.text { margin-top: 6px; }
.hist-jump { display: block; width: 100%; min-height: 44px; text-align: left; white-space: normal; font-size: 13px; }
.with-us { scroll-margin-top: 12px; }
.group p.late-label, .late-label { color: var(--late); font-weight: 600; }
.progress { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
.bar-track { width: 120px; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; flex: none; }
.bar-fill { display: block; height: 100%; background: var(--ink-2); border-radius: 999px; }
.w0 { width: 0; } .w1 { width: 10%; } .w2 { width: 20%; } .w3 { width: 30%; } .w4 { width: 40%; } .w5 { width: 50%; }
.w6 { width: 60%; } .w7 { width: 70%; } .w8 { width: 80%; } .w9 { width: 90%; } .w10 { width: 100%; }
.report { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.section-title { margin: 22px 0 0; font: 400 22px/1.25 var(--serif); }
.report > .section-title:first-child { margin-top: 0; }
.report .hint { margin: -6px 0 4px; }
.report-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.groups.spaced { margin-top: 16px; }
.groups.settings { grid-template-columns: minmax(0, 1fr); }
.settings-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.settings-card .card-title { margin: 0; }
.hint.lede { margin: 0; }
.stamp { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
fieldset.routine { border: 1px solid var(--hairline); border-radius: var(--r-ctl); padding: 8px 14px 14px; margin: 0; display: grid; gap: 8px; }
fieldset.routine legend { padding: 0 6px; font-weight: 600; }
.row.mini.off .main, li.off .main { color: var(--ink-3); }
.quote-sheet { max-width: 760px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.quote-sheet header { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-end; border-bottom: 1px solid var(--hairline); padding-bottom: 14px; }
.quote-sheet h2 { margin: 0; font: 400 38px/1.1 var(--serif); }
.quote-sheet h3 { margin: 10px 0 0; font: 400 22px/1.2 var(--serif); }
.quote-sheet p { margin: 0; }
.eyebrow { font-size: 12px; font-weight: var(--w600); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.quote-meta { display: grid; gap: 2px; text-align: left; color: var(--ink-3); font-size: 13px; }
.quote-table th { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--ink); font-weight: 400; border-top: 1px solid var(--hairline); }
.quote-table tr:last-child th, .quote-table tr:last-child td { font-weight: 600; }
.quote-notes { white-space: pre-wrap; }
.quote-sheet footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--ink-3); font-size: 13px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.draft-flag { padding: 10px 14px; border-radius: var(--r-ctl); background: var(--surface-2); border: 1.5px solid var(--ink); color: var(--ink); font-weight: 600; }
.dlg-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.rot { list-style: none; margin: 0; padding: 0 0 4px; }
.rot-item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 16px; border-top: 1px solid var(--hairline); flex-wrap: wrap; }
.rot-item:first-child { border-top-color: transparent; }
.rot-n { flex: none; width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rot-item.up .rot-n { background: var(--surface-2); border: 1.5px solid var(--ink); color: var(--ink); font-weight: 600; }
.rot-name { flex: 1; min-width: 0; display: grid; font-weight: 600; font-size: 15px; }
.rot-state { color: var(--ink-3); font-size: 13px; font-weight: var(--w400); }
.rot-item.up .rot-state { color: var(--ink); font-weight: 600; }
.rot-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 16px 12px; }
.desk { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); margin-top: 12px; }
.desk-card { padding: 16px; }
.desk-head { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.desk-head .card-title { margin: 0; }
.desk-nums { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; margin: 14px 0; font-size: 15px; }
.desk-nums dt { color: var(--ink-3); }
.desk-nums dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.desk-nums .total { border-top: 1px solid var(--hairline); padding-top: 8px; color: var(--ink); font-weight: 600; }
.card .meta { color: var(--ink-3); font-size: 13px; font-weight: var(--w400); margin: 4px 0 0; }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

@media print {
  :root, :root[data-theme="dark"] { color-scheme: light; --bg: var(--print-paper); --surface: var(--print-paper); --surface-2: var(--print-paper);
    --ink: var(--print-ink); --ink-2: var(--print-ink); --ink-3: var(--print-ink-3); --hairline: var(--print-line); --ctrl: var(--print-line); }
  .appbar, .searchrow, .demo, .tabbar, .no-print, .toast, .sheet { display: none !important; }
  main#view { padding: 0; }
  .tile, .group { break-inside: avoid; box-shadow: none; }
}

/* ---------- signed out: just the brand ---------- */
body.out .search, body.out #walkin-btn, body.out .nav-btn, body.out .find-btn, body.out .searchrow, body.out .tabbar { display: none !important; }

/* ---------- a phone held one-handed (up to 640px) ---------- */
@media (max-width: 640px) {
  .sheet .panel { width: 100%; border-left: 0; box-shadow: none; }
  .sheet .scrim { display: none; }
  .bar h1 { font-size: 30px; }
  .row.mini { flex-wrap: wrap; }
  .row.visit { flex-direction: column; align-items: stretch; gap: 8px; }
  .row.visit .side { order: -1; align-items: flex-start; }
  .rows > .row:has(.side .mini-actions) { flex-wrap: wrap; }
  .row .side:has(.mini-actions) { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
  .mini-actions { justify-content: flex-start; }
  .compose-row .when { flex: 1 1 100%; order: -1; }
  .toast { bottom: calc(var(--tabbar) + 16px + env(safe-area-inset-bottom)); }
  /* Over an open card the composer owns the bottom of the screen, so a note shows at the top instead. */
  .sheet:not([hidden]) ~ .toast { bottom: auto; top: calc(64px + env(safe-area-inset-top)); }
}

/* ---------- tablet and up: no tab bar; the sections button, search in the bar ---------- */
@media (min-width: 641px) {
  .tabbar { display: none !important; }
  body:not(.out) main#view { padding-bottom: 40px; }
  .appbar { height: calc(64px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 24px 0; gap: 12px; }
  .nav-btn { display: inline-flex; }
  .brand { gap: 12px; }
  .brand { flex: none; }
  .appbar .search { flex: 0 1 480px; min-width: 0; }
  main#view { padding: 32px 32px 40px; }
  .bar h1 { font-size: 38px; }
  .groups.two, .report-cols, .groups.settings { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sheet .body { padding: 16px 24px; }
}
@media (min-width: 900px) {
  .walkin { width: auto; padding: 0 16px; font-size: 15px; }
  .walkin .walkin-label { display: inline; }
  .groups { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .groups.one { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- a desk (1280px and up): Today is three columns, Up next | the card | everything so far ---------- */
@media (min-width: 1280px) {
  /* The canon's columns at 1440 (480 | 560 | 400); a smaller desk keeps the card at the canon's 560 or more
     and narrows the list and the history (400 | rest | 320). */
  :root { --list: 400px; --hist: 320px; }
  .appbar .demo { min-height: 36px; padding: 0 14px; border-radius: var(--r-ctl); flex: none; }

  /* The card, beside the list on Today; a page of its own from anywhere else. Never a modal on a desk. */
  .sheet { top: 64px; background: var(--bg); justify-content: center; }
  .sheet .scrim { display: none; }

  .sheet .panel { width: 960px; max-width: 100%; border-left: 0; box-shadow: none; display: grid; grid-template-columns: minmax(0, 1fr) var(--hist); grid-template-rows: auto minmax(0, 1fr) auto; }
  body.today-page .sheet .panel { width: 100%; }
  .sheet.enter .panel { animation: none; }
  .sheet .head { grid-column: 1; grid-row: 1; min-height: 0; padding: 8px 24px 4px 20px; border-bottom: 0; }
  /* A laptop's height is short: the desk card keeps the canon's parts in a tighter rhythm (review 28 Sep),
     so status, owner, next step and the quote are in view at 1280 by 800 and 1366 by 768. */
  .card.contact { padding: 10px 12px; }
  .composer.resting { height: 48px; }
  .quote .mini-actions { align-self: start; }
  .col-main { gap: 12px; }
  .extras { margin-top: 8px; gap: 8px; }
  .sub-block { padding-top: 8px; gap: 4px; }
  /* The title row keeps a 44px target for "New quote" but lays out at 32px tall (the target overhangs the gap). */
  .sub-head { min-height: 32px; }
  .sub-head .btn { margin: -6px 0; }
  .sheet .head h2 { font-size: 38px; line-height: 38px; }
  body.today-page .sheet .head .icon-btn { display: none; }
  body.today-page .sheet .head .close-x { display: inline-flex; margin-left: auto; }
  body.today-page .sheet .head { padding-left: 24px; }
  .sheet .body { display: contents; }
  .col-main { grid-column: 1; grid-row: 2; overflow-y: auto; padding: 0 24px 24px; }
  .col-history { grid-column: 2; grid-row: 1 / span 3; overflow-y: auto; padding: 24px 20px; background: var(--surface); border-left: 1px solid var(--hairline); }
  .col-history > #c-history { border: 0; box-shadow: none; padding: 0; background: none; }
  /* The enquiry on a desk: what to do first (status, owner, next step, quotes), then what they need. The
     same content as the canon, reordered so it is in view at 1440 by 900 (review 28 Sep). */
  .latest { display: none; }
  .composer { grid-column: 1; grid-row: 3; padding: 12px 16px 16px; }
  .quote { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
  .quote > :not(.mini-actions) { grid-column: 1; }
  .quote .mini-actions { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
}
/* The canon's own desk (1440 and up): 480 | 560 | 400. Last, so it wins over the 1280 rule above. */
@media (min-width: 1440px) {
  :root { --list: 480px; --hist: 400px; }
}

/* Gold Book shell and shared finish. */
::selection { background: var(--primary); color: var(--on-primary); }
input, textarea { caret-color: var(--ink); }
button, a, input, select, textarea { touch-action: manipulation; }
.icon-btn, .row, .book-row, .table tbody td { transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
button:active, .btn:active { transform: translateY(1px); }
button:disabled { cursor: not-allowed; }
button:not(.btn):disabled { color: var(--ink-3); }
body { background: var(--frame); }
#page { background: var(--page); }
.appbar { background: var(--frame); color: var(--frame-ink); border: 0; height: calc(68px + env(safe-area-inset-top)); gap: 16px; padding-inline: 24px; }
.brand, .brand small { color: var(--frame-ink); }
.brand b { font: 500 24px/1.1 var(--serif); }
.brand small { color: var(--frame-muted); font-size: 12px; margin-top: 3px; }
.brand .mark { width: 30px; height: 30px; }
.appbar .spacer { display: none; }
.appbar .search { margin-left: auto; max-width: 460px; }
.appbar .btn, .appbar .icon-btn { color: var(--frame-ink); border-color: var(--frame-muted); background: transparent; }
.appbar .btn:hover { background: var(--frame-hover); }
.appbar .walkin, .appbar .walkin:hover { color: var(--on-primary); background: var(--primary); border-color: transparent; }
.appbar .demo { display: none; }
.avatar { background: var(--frame-hover); color: var(--frame-ink); border-radius: 8px; }
.appbar .menu { color: var(--ink); }
.appbar .menu .btn { color: var(--ink); }
.appbar :focus-visible, .side-nav :focus-visible { outline-color: var(--frame-ink); }
.demo { font-size: 12px; min-height: 32px; padding-block: 8px; }
.search input { border-radius: 8px; }
main#view, body.today-page main#view { position: relative; width: auto; inset: auto; overflow: visible; border: 0; padding: var(--s6) var(--s6) var(--s7); min-height: calc(100dvh - 68px); background: var(--page); }
.bar h1 { margin: 0; font: var(--t-h1); letter-spacing: -.025em; }
.bar .date { font-size: 13px; margin-top: 6px; }
.side-nav { display: none; }
.section-tabs { display: flex; gap: var(--s1); margin: calc(-1 * var(--s2)) 0 var(--s5); overflow-x: auto; scrollbar-width: none; }
.section-tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s3); flex: none; border-radius: var(--r-ctl); text-decoration: none; color: var(--ink-2); font: 400 15px/1 var(--sans); }
.section-tabs a[aria-current=page], .section-tabs a[aria-current=page]:hover { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.section-tabs a:hover { background: var(--tile); color: var(--ink); }
.card, .group, .tile { box-shadow: none; }
.group { border-radius: 12px; }
.group > header { padding: 16px 18px; }
.group > header h2, .card-title { font-family: var(--sans); font-weight: 600; font-size: 17px; }
.row { padding: 10px 18px; }
.row .name { font-size: 15px; }
.group > header p { text-transform: none; letter-spacing: 0; }
.table th { text-transform: none; letter-spacing: 0; font-size: 13px; }
.table th, .table td { padding: 12px 16px; }
.settings .card, .account { background: var(--surface); }
fieldset.routine { border-radius: 8px; }
.sheet .panel { background: var(--bg); }
.sheet .head { border-bottom: 1px solid var(--hairline); }
.sheet .head h2 { font-family: var(--serif); font-weight: 400; }
.sheet .card { border-radius: 12px; }
.sheet .composer { background: var(--surface); }
.quote-sheet { padding: 28px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; margin-inline: auto; }
.quote-sheet .eyebrow { text-transform: none; font-size: 13px; letter-spacing: 0; }
body.out #page { background: var(--page); min-height: 100dvh; }
body.out .appbar { justify-content: center; }
body.out .appbar .spacer { display: none; }
body.out main#view { margin: 0; border-radius: 0; }
.signed-out { max-width: 430px; margin: 7vh auto; border: 0; background: transparent; box-shadow: none; }
.signed-out h1 { font-size: 38px; font-weight: 400; }
.signin { padding: 28px 16px; gap: 20px; }
.signin > .btn.primary { width: 100%; min-height: 48px; }
@media (min-width: 1000px) {
  .appbar .brand { min-width: calc(var(--rail) - 24px); } /* grows for a longer name (Solva Connect) instead of wrapping it */
  .nav-btn { display: none; }
  .side-nav { display: flex; position: fixed; top: 68px; bottom: 0; left: 0; width: var(--rail); padding: 18px 12px; flex-direction: column; gap: 5px; background: var(--frame); color: var(--frame-ink); overflow-y: auto; z-index: 25; }
  .side-nav a { min-height: 42px; padding: 10px 12px; border-radius: 8px; display: flex; gap: 12px; align-items: center; color: var(--frame-ink); text-decoration: none; font-size: 15px; }
  .side-nav a:hover, .side-nav summary:hover { background: var(--frame-hover); }
  .side-nav a[aria-current=page], .side-nav summary.current { background: var(--primary); color: var(--on-primary); font-weight: 600; }
  .side-nav .ico { width: 18px; height: 18px; }
  .side-nav details { margin-top: 12px; }
  .side-nav summary { min-height: 42px; padding: 10px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; }
  .side-nav details a { padding-left: 22px; font-size: 15px; color: var(--frame-muted); }
  .side-nav details a[aria-current=page] { color: var(--on-primary); }
  .side-nav .nav-foot { margin-top: auto; padding: 24px 12px 6px; color: var(--frame-muted); font-size: 12px; line-height: 1.6; }
  body:not(.out) main#view, body.today-page:not(.out) main#view { margin-left: var(--rail); border-radius: 16px 0 0 0; }
  #page { background: var(--frame); }
  main#view { background: var(--page); }
  body.out .side-nav { display: none; }
  .demo { display: none; }
}
@media (min-width: 1280px) {
  body.today-page main#view { width: auto; }
  .sheet, body.today-page .sheet { top: 68px; left: var(--rail); background: var(--bg); }
  .sheet .panel, body.today-page .sheet .panel { width: 100%; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); }
  .sheet .head .icon-btn { display: inline-flex !important; }
  .sheet .head .close-x { margin-left: auto; }
  .sheet .head { padding: 20px 24px 12px; }
  .sheet .body { display: contents; }
}
@media (min-width: 1700px) {
  main#view, body.today-page main#view { padding: 40px 56px 56px; }
}
@media (max-width: 1100px) and (min-width: 641px) {
  main#view, body.today-page main#view { padding: 28px 24px 40px; }
}
@media (max-width: 640px) {
  .appbar { padding-inline: 16px; gap: 8px; }
  .appbar .brand { flex: 1; }
  .brand b { font-size: 23px; }
  .brand small { max-width: 150px; }
  .searchrow { padding: 12px 16px 8px; background: var(--page); }
  main#view, body.today-page main#view { padding: 22px 16px calc(90px + env(safe-area-inset-bottom)); }
  .bar h1 { font: var(--t-h1); }
  .icon-btn { min-width: 44px; min-height: 44px; }
  .seg button, .section-tabs a { min-height: 44px; }
  .tabbar { background: var(--frame); border: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); gap: 3px; }
  .tabbar a, .tabbar button { color: var(--frame-muted); border-radius: 8px; font-size: 12px; }
  .tabbar a[aria-current=page], .tabbar button.on { color: var(--on-primary); background: var(--primary); }
  .tabbar a[aria-current=page]::before, .tabbar button.on::before { display: none; }
  .tabbar .ico { width: 21px; height: 21px; }
  .tabbar :focus-visible { outline-color: var(--frame-ink); }
  .quote-sheet { padding: 18px; }
  .sheet .contact-line .btn { min-height: 44px; }
  .signed-out { margin: 24px auto; }
}
@media print {
  .side-nav, .section-tabs { display: none !important; }
  #page, body { background: var(--print-paper); }
  main#view, body:not(.out) main#view { margin: 0; padding: 0; border-radius: 0; }
  .quote-sheet { border: 0; padding: 0; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* The phone's first screen prioritises people over controls. */
@media (max-width: 640px) {
}
/* Refinement: more customer context, readable metadata, and one explicit department per working list. */
.department-select { min-height: 44px; max-width: 150px; padding: 0 28px 0 12px; background: var(--frame-hover); color: var(--frame-ink); border: 1px solid var(--frame-muted); border-radius: var(--r-ctl); font-size: 13px; }
@media (min-width: 641px) and (max-width: 1100px) {
}
@media (max-width: 640px) {
  .appbar { gap: 8px; padding-inline: 12px; }
  .brand { min-width: 0; gap: 6px; }
  .brand b { font-size: 17px; }
  .brand small { max-width: 95px; }
  .brand .mark { width: 24px; height: 24px; }
  .department-select { flex: none; max-width: 126px; width: 126px; font-size: 13px; padding-left: 8px; padding-right: 20px; }
  .appbar .brand .mark { display: none; }
  main#view, body.today-page main#view { padding-top: 12px; }
}

/* Operational controls follow the existing book, form and row system. */
.check-options{display:flex;flex-wrap:wrap;gap:8px 20px}.check-options label{display:flex;align-items:center;gap:8px;min-height:44px}.check-options input{width:20px;height:20px}.settings-card fieldset{margin:18px 0;padding:12px;border:1px solid var(--line)}

.operations-page>.group{margin:0 0 24px}.operations-page>.group>h2,.operations-page>.group>p{margin:16px 18px}.operations-page>.group>.btn{margin:0 18px 16px}.operations-page>.settings-card{padding:20px 0;margin-bottom:24px}.settings-card fieldset{border-color:var(--hairline)}.operations-page .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.operations-page fieldset{min-width:0}

/* Connection status must remain readable on narrow screens. */
.operations-page .sub { white-space: normal; overflow: visible; text-overflow: clip; }

/* ---------- the side bar at icon width (the same as Lori: 64px, labels gone, Ctrl+\) ---------- */
.rail-toggle { display: none; }
@media (min-width: 900px) {
  .side-nav, body:not(.out) main#view, .sheet { transition: width .26s cubic-bezier(.3,.7,.1,1), margin-left .26s cubic-bezier(.3,.7,.1,1), left .26s cubic-bezier(.3,.7,.1,1), padding .26s cubic-bezier(.3,.7,.1,1); }
  .side-nav { overflow-x: hidden; }
  .side-nav a, .side-nav summary, .rail-toggle { white-space: nowrap; overflow: hidden; }
  .side-nav a span, .rail-toggle span { transition: opacity .16s ease; }
  .side-nav .ico { flex: none; }
  .rail-toggle { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 10px 12px; margin-top: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--frame-muted); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
  .rail-toggle:hover { background: var(--frame-hover); color: var(--frame-ink); }
  .rail-toggle .ico { width: 18px; height: 18px; transition: transform .26s cubic-bezier(.3,.7,.1,1); }
  body.rail-min { --rail: 64px; }
  body.rail-min .side-nav { padding: 18px 10px; }
  body.rail-min .side-nav a, body.rail-min .rail-toggle { padding: 10px 13px; gap: 0; }
  body.rail-min .side-nav details a { padding-left: 13px; }
  body.rail-min .side-nav a span, body.rail-min .rail-toggle span { opacity: 0; width: 0; pointer-events: none; }
  body.rail-min .side-nav summary, body.rail-min .side-nav .nav-foot { display: none; }
  body.rail-min .side-nav details { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--frame-hover); }
  body.rail-min .rail-toggle .ico { transform: rotate(180deg); }
  body.rail-min .rail-toggle { margin-top: auto; }
  body.rail-min .appbar .brand { width: auto; }
}
@media (prefers-reduced-motion: reduce) { .side-nav, body:not(.out) main#view, .sheet, .side-nav a span, .rail-toggle span, .rail-toggle .ico { transition: none; } }


/* ---------- customer card: calm pass (Mark, 5 Oct 2026: "how would Apple make this area look") ----------
   One row of actions that never orphans the sixth. The status as filled segments, the chosen one in the
   brand colour. With, Stage, Next step and When as one grouped list of rows (label left, value right)
   in place of four boxed fields. Quiet filled buttons in place of outlines. */
@media (max-width: 899px) {
}

/* Daniel's workspace. Activated only by the server-confirmed tenant. */
.dealer-workspace .work-tools { display:flex; align-items:center; gap:12px; margin:4px 0 16px; }
.dealer-workspace .work-search { display:flex; align-items:center; gap:10px; flex:1; max-width:480px; background:var(--surface); border:1px solid var(--ctrl); border-radius:8px; padding:0 12px; }
.dealer-workspace .work-search input { border:0; background:transparent; min-width:0; width:100%; min-height:44px; color:var(--ink); }
.dealer-workspace .work-search:focus-within { outline:2px solid var(--focus); outline-offset:2px; }
.dealer-workspace .work-sort { display:flex; align-items:center; gap:8px; color:var(--ink-2); }
.dealer-workspace .work-sort select { min-height:44px; }
.dealer-workspace .work-tools > .btn { margin-left:auto; }
.dealer-workspace .work-queue { display:flex; align-items:center; gap:4px; flex:none; margin-left:auto; font:400 13px var(--sans); font-variant-numeric:tabular-nums; color:var(--ink-2); }
.dealer-workspace .work-queue .icon-btn { width:44px; height:44px; }
.dealer-workspace .work-queue button:disabled { opacity:.5; cursor:default; }
.dealer-workspace .follow-shortcuts { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.dealer-workspace .follow-shortcuts .btn { min-height:36px; color:var(--ink); background:var(--surface-2); padding:0 10px; }
.dealer-workspace .draft-note { color:var(--ink-2); font-size:13px; margin:0 0 12px; }
@media(min-width:1000px){
 .dealer-workspace main#view { padding-top:24px; }
}
@media(max-width:640px){
 .dealer-workspace .work-tools { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
 .dealer-workspace .work-search { grid-column:1/-1; max-width:none; }
 .dealer-workspace .work-sort { min-width:0; }
 .dealer-workspace .work-sort select { min-width:0; width:100%; }
 .dealer-workspace .work-tools > .btn { padding:0 12px; }
 .dealer-workspace .work-queue { gap:0; }
 .dealer-workspace #c-name { font-size:22px; min-width:0; }
 .dealer-workspace .work-queue .icon-btn { width:44px; }
 .dealer-workspace .follow-shortcuts .btn { min-height:44px; }
}

.dealer-workspace .work-sort select { font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--ctrl); border-radius:8px; padding:0 12px; }
@media(max-width:640px){
 .dealer-workspace .table-wrap td a { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; }
}
@media(max-width:640px){.dealer-workspace .work-drafts{grid-column:1/-1;grid-row:3;margin-left:0!important;justify-self:start}}

/* Daniel delivery handoffs reuse the existing checklist and staff records. */
.dealer-workspace .handoff-filters { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 24px; }
.dealer-workspace .handoff-filters .btn { gap:12px; color:var(--ink); }
.dealer-workspace .handoff-filters [aria-pressed=true] { background:var(--primary); color:var(--on-primary); }
.dealer-workspace .handoff-filters span { font-variant-numeric:tabular-nums; }
.dealer-workspace .handoff-row { border-top:1px solid var(--ctrl); padding:20px 0 0; margin-bottom:24px; }
.dealer-workspace .handoff-row > header { display:flex; align-items:start; justify-content:space-between; gap:24px; padding:0 16px 14px; }
.dealer-workspace .handoff-customer { display:inline-flex; align-items:center; min-height:44px; font-size:17px; font-weight:600; }
.dealer-workspace .handoff-row header p { margin:0; color:var(--ink-2); font-size:13px; }
.dealer-workspace .handoff-date { display:flex; flex-direction:column; align-items:end; gap:8px; padding-top:10px; flex:none; }
.dealer-workspace .handoff-date small,.dealer-workspace .handoff-meta { color:var(--ink-2); font-size:13px; }
.dealer-workspace .handoff-steps { background:var(--surface); border-radius:8px; }
.dealer-workspace .handoff-steps summary,.dealer-workspace .handoff-history summary { min-height:48px; padding:12px 16px; cursor:pointer; box-sizing:border-box; }
.dealer-workspace .handoff-flags { color:var(--late); font-size:13px; margin-left:16px; }
.dealer-workspace .handoff-steps ul { list-style:none; margin:0; padding:0 16px; }
.dealer-workspace .handoff-step { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,320px); align-items:center; gap:24px; border-top:1px solid var(--hairline); min-height:60px; }
.dealer-workspace .handoff-check { display:flex; gap:12px; align-items:center; min-height:44px; cursor:pointer; }
.dealer-workspace .handoff-check input { width:20px; height:20px; flex:none; accent-color:var(--primary); }
.dealer-workspace .handoff-assignment { width:100%; display:flex; justify-content:space-between; gap:12px; color:var(--ink); font-size:13px; }
.dealer-workspace .handoff-assignment span:last-child { font-size:13px; }
.dealer-workspace .handoff-step.is-done .handoff-check { color:var(--ink-2); }
.dealer-workspace .handoff-history { border-top:1px solid var(--hairline); margin-top:32px; }
@media(max-width:640px){
 .dealer-workspace .handoff-filters { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:16px 0; }
 .dealer-workspace .handoff-filters .btn { justify-content:space-between; }
 .dealer-workspace .handoff-row > header { flex-direction:column; gap:8px; padding:0 4px 16px; }
 .dealer-workspace .handoff-date { align-items:start; padding:0; }
 .dealer-workspace .handoff-step { grid-template-columns:minmax(0,1fr); gap:0; padding:8px 0; }
 .dealer-workspace .handoff-assignment { padding-left:32px; }
 .dealer-workspace .handoff-flags { display:block; margin:4px 0 0 18px; }
 .dealer-workspace .handoff-meta { padding-left:32px; min-height:24px; }
}

/* Daniel customer flow: immediate feedback, short navigation and folded past enquiries. */
.dealer-workspace .customer-loading { grid-column:1/-1; padding:24px 12px; color:var(--ink-2); }
.dealer-workspace .customer-loading p { margin:0 0 20px; }
.dealer-workspace .loading-line { height:52px; border-radius:8px; background:var(--surface-2); margin:12px 0; max-width:560px; }
.dealer-workspace .loading-line.short { max-width:360px; height:20px; }
.dealer-workspace .customer-jumps { display:flex; gap:8px; padding:6px 16px; background:var(--bg); border-bottom:1px solid var(--hairline); flex:none; }
.dealer-workspace .customer-jumps .btn { min-height:44px; gap:8px; font-size:13px; color:var(--ink); }
.dealer-workspace .customer-jumps span { color:var(--ink-2); font-variant-numeric:tabular-nums; }
.dealer-workspace .past-enquiry { border-top:1px solid var(--hairline); }
.dealer-workspace .past-enquiry > summary { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:52px; padding:8px 12px; cursor:pointer; font-weight:600; }
.dealer-workspace .past-enquiry > summary::before { content:'+'; font-size:17px; font-weight:400; }
.dealer-workspace .past-enquiry[open] > summary::before { content:'-'; }
.dealer-workspace .past-enquiry > summary span { margin-left:auto; color:var(--ink-2); font-size:13px; font-weight:400; }
.dealer-workspace .past-enquiry .card { margin-top:4px; }
.dealer-workspace #c-history,.dealer-workspace .next input { scroll-margin-top:12px; }
@media(max-width:640px){.dealer-workspace .customer-jumps{padding:4px 8px;gap:4px}.dealer-workspace .customer-jumps .btn{flex:1;padding:0 8px}}

@media(min-width:1280px){
 .dealer-workspace .sheet .panel { grid-template-rows:auto auto minmax(0,1fr) auto; }
 .dealer-workspace .customer-jumps { grid-column:1; grid-row:2; padding:0 24px 8px; }
 .dealer-workspace .sheet .col-main { grid-row:3; }
 .dealer-workspace .sheet .col-history { grid-row:1 / span 4; }
 .dealer-workspace .sheet .composer { grid-row:4; }
 .dealer-workspace .customer-loading { grid-row:2 / span 3; }
}
.dealer-workspace .sheet .composer:not(.resting) {
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ==================== 23 Oct 2026 spec layer ====================
   One type scale (12, 13, 15, 17, 22, 30, 38), sans 400 and 600, radii 6, 8, 12, 16, the 4px spacing scale.
   White panels on the Sand page with no outline in light; a hairline edge in dark, where a dark panel on a
   dark page needs one. Selected is a solid gold fill. Nothing underlined at rest: a clickable figure is ink
   600, an empty one ink-3 400, and the underline comes on hover or focus. */

b, strong { font-weight: 600; }

/* ---------- surfaces ---------- */
#view, .sheet, dialog, .menu, .recent, .pop-menu { --surface: var(--panel); --surface-2: var(--tile); }
.group, .card, .week-day, .book-list, .tiles, .quote-sheet, .f-group, .report .table-wrap, .account { background: var(--panel); border: 0; border-radius: var(--r-card); box-shadow: none; }
:root[data-theme="dark"] :is(.group, .card, .week-day, .book-list, .tiles, .quote-sheet, .f-group, .report .table-wrap, .account) { border: 1px solid var(--panel-line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.group, .card, .week-day, .book-list, .tiles, .quote-sheet, .f-group, .report .table-wrap, .account) { border: 1px solid var(--panel-line); } }
.card .card { border: 0; }
.appbar .btn:not(.walkin), .appbar .icon-btn { background: var(--frame-hover); color: var(--frame-ink); }
.department-select { border: 0; max-width: 180px; }

/* ---------- page heads ---------- */
.bar { align-items: flex-end; gap: var(--s3) var(--s4); margin: 0 0 var(--s5); }
.bar .date { display: block; margin-top: var(--s1); font: var(--t-meta); color: var(--ink-3); }
.section-title { margin: var(--s6) 0 0; font: var(--t-section); }
.report > .section-title:first-child { margin-top: 0; }
.hint { font: var(--t-meta); color: var(--ink-3); }

/* ---------- the list row: one component for every list ---------- */
.groups { gap: var(--s4); }
.group { padding: 0; scroll-margin-top: calc(var(--appbar) + var(--s3)); }
.group > header { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s4) var(--s4) var(--s2); }
.group > header h2, .group > h2, .card-title { margin: 0; font: var(--t-title); }
.group > h2 { padding: var(--s4) var(--s4) var(--s2); }
.group > header .n, .book-sub .n { min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; display: inline; font: var(--t-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.group > header p { margin: 0 0 0 auto; font: var(--t-cap); color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.group > header .btn { margin: calc(-1 * var(--s2)) 0 calc(-1 * var(--s2)) auto; }
.group > p { margin: 0; padding: 0 var(--s4) var(--s3); }
.group .empty { padding: var(--s2) var(--s4) var(--s4); font: var(--t-body); color: var(--ink-3); }
.empty.roomy { padding: var(--s6) var(--s4); }
.row { gap: var(--s4); min-height: var(--row-h); padding: var(--s2) var(--s4); border-top: 1px solid var(--hairline); }
.rows > .row:first-child { border-top-color: transparent; }
.group { overflow: clip; }
.row:hover, .row:focus-within { background: var(--tile); }
.row.static:hover { background: none; }
.row .name { font: 600 15px/22px var(--sans); }
.row .name a { text-decoration: none; }
.row .name a:hover, .row .name a:focus-visible { text-decoration: underline; text-decoration-color: var(--ctrl); text-underline-offset: 3px; }
.row .sub { margin-top: 2px; font: var(--t-meta); color: var(--ink-2); }
.row .said { margin-top: 2px; font: italic 400 15px/22px var(--serif); color: var(--ink-2); }
.row .side { flex-direction: row; align-items: center; gap: var(--s4); font: var(--t-meta); color: var(--ink-2); }
.row .side .clock { font-weight: 600; color: var(--ink); }
.clock { font: 600 13px/18px var(--sans); color: var(--ink); }
.owner { font: var(--t-meta); color: var(--ink-2); }
.row.mini { min-height: 0; padding: var(--s3) 0; }
.row.mini .main { font: var(--t-body); }
.row .main > a, .row.mini a, .results a { text-decoration: none; font-weight: 600; color: var(--ink); }
.row .main > a:hover, .row.mini a:hover, .results a:hover { text-decoration: underline; text-decoration-color: var(--ctrl); text-underline-offset: 3px; }
.rows > .row > .btn { flex: none; margin-left: auto; }

/* ---------- tables: words for headings, no capitals, numbers underline only on hover ---------- */
.table { font: var(--t-body); }
.table th { font: var(--t-cap); color: var(--ink-3); text-transform: none; letter-spacing: 0; padding: var(--s3) var(--s4); border-top: 0; }
.table td { padding: var(--s3) var(--s4); }
.table a, .table td a, .tile b, a.tile b, #view .card-title a { text-decoration: none; }
.table td a { font-weight: 600; color: var(--ink); }
.table a:hover, .table a:focus-visible, a.tile:hover b, a.tile:focus-visible b, #view .card-title a:hover { text-decoration: underline; text-decoration-color: var(--ctrl); text-underline-offset: 3px; }
.table td.zero, .table td .zero { color: var(--ink-3); font-weight: 400; }
.table tbody tr:hover td { background: var(--tile); }
.link-btn { display: inline-block; min-height: 0; padding: 11px 0; margin: -11px 0; font: 600 15px/22px var(--sans); color: var(--ink); text-decoration: none; }
.link-btn:hover, .link-btn:focus-visible { text-decoration: underline; text-decoration-color: var(--ctrl); text-underline-offset: 3px; }
.table-wrap { overflow-x: auto; }

/* ---------- words, never capitals ---------- */
.chip, .st, .tile-label, .day, .table th, .group > header p, .bubble .tag, .recent-title, .eyebrow { text-transform: none; letter-spacing: 0; }
.chip, .st { font: 600 13px/18px var(--sans); color: var(--ink-2); }
.tile-label { font: var(--t-meta); color: var(--ink-2); }
.day { font: 600 13px/18px var(--sans); color: var(--ink-2); }
.bubble .tag { font: 600 13px/18px var(--sans); color: var(--ink-2); }
.recent-title { font: 600 13px/18px var(--sans); color: var(--ink-3); }
.eyebrow { font: var(--t-meta); color: var(--ink-3); }

/* ---------- banners and messages: a quiet panel, words first ---------- */
.warn, .dnc, .draft-flag, .err { border: 0; border-radius: var(--r-ctl); background: var(--panel); color: var(--ink); font: var(--t-body); padding: var(--s3) var(--s4); }
.warn { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); margin: 0 0 var(--s4); }
.warn b { font-weight: 600; }
.warn a, .err a { font-weight: 600; color: var(--ink); text-decoration-color: var(--ctrl); text-underline-offset: 3px; }
.warn { padding: var(--s2) var(--s2) var(--s2) var(--s4); }
.warn .btn { margin-left: auto; min-height: 36px; }
@media (max-width: 640px) { .warn .btn { min-height: 44px; } }
.err { background: var(--tile); }
.draft-flag { background: var(--tile); font-weight: 600; }
.toast { border-radius: var(--r-card); font: 600 15px/22px var(--sans); }
@media (prefers-reduced-motion: no-preference) {
  .toast:not([hidden]) { animation: toast-in var(--dur-2) var(--ease-out); }
  @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
}

/* ---------- Today: the hero screen ---------- */
.today-head { display: flex; align-items: flex-end; gap: var(--s4); margin: 0 0 var(--s5); }
.today-head .titles { flex: 1; min-width: 0; }
.hello { margin: 0; font: var(--t-h1); letter-spacing: -.025em; color: var(--ink); }
.today-head .date { display: block; margin-top: var(--s1); font: var(--t-meta); color: var(--ink-3); }
.book-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); margin: 0 0 var(--s4); padding: var(--s3) var(--s5); border-radius: var(--r-card); background: var(--summary); color: var(--frame-ink); }
.summary-jump { display: inline-flex; align-items: baseline; gap: var(--s2); min-height: 44px; margin: 0 calc(-1 * var(--s3)); padding: var(--s1) var(--s3); border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--frame-ink); font: var(--t-body); cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.summary-jump b { font: var(--t-figure); color: var(--primary); font-variant-numeric: tabular-nums; }
.summary-jump:hover { background: var(--frame-hover); }
.summary-jump[aria-pressed="true"], .summary-jump[aria-pressed="true"] b { background: var(--primary); color: var(--on-primary); }
.summary-jump.late-jump { margin-left: auto; }
.book-summary :focus-visible { outline-color: var(--frame-ink); }
.book-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: 0 0 var(--s4); }
.book-date { display: flex; align-items: center; gap: var(--s1); margin-right: auto; }
.book-date input, .book-filter select { min-height: 40px; padding: 0 var(--s2); border: 1px solid var(--ctrl); border-radius: var(--r-ctl); background: var(--panel); color: var(--ink); font: var(--t-body); }
.book-date input { max-width: 170px; }
.book-date .icon-btn { width: 40px; height: 40px; }
.book-date .ico { width: 18px; height: 18px; }
.book-filter { display: flex; align-items: center; gap: var(--s2); font: var(--t-meta); color: var(--ink-2); }
.book-toolbar .work-tools { order: 9; flex: 1 1 100%; margin: 0; }
@media (min-width: 1600px) { .book-toolbar .work-tools { order: 0; flex: 1 1 auto; } }
.book-list { overflow: clip; scroll-margin-top: calc(var(--appbar) + var(--s3)); }
.book-list ul { list-style: none; margin: 0; padding: 0; }
.book-columns, .book-row { display: grid; grid-template-columns: 96px minmax(180px, 1fr) 128px minmax(240px, 1.8fr) 156px; gap: var(--s4); align-items: center; padding: 0 var(--s4); }
.book-columns { min-height: 40px; font: var(--t-cap); color: var(--ink-3); border-bottom: 1px solid var(--hairline); }
.book-acts-head { text-align: right; }
.book-sub { position: sticky; top: calc(var(--appbar) + env(safe-area-inset-top)); z-index: 2; display: flex; align-items: center; gap: var(--s2); min-height: 40px; margin: 0; padding: 0 var(--s4); background: var(--tile); font: 600 13px/18px var(--sans); color: var(--ink-2); border-bottom: 1px solid var(--hairline); }
.book-part + .book-part .book-sub { border-top: 1px solid var(--hairline); }
.book-row { min-height: var(--row-h); padding-block: var(--s2); border-top: 1px solid var(--hairline); transition: background-color var(--dur-1) var(--ease-out); }
.book-list ul > .book-row:first-child { border-top: 0; }
.book-row:hover, .book-row:focus-within { background: var(--tile); }
.book-time { font: var(--t-meta); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.book-time.waiting { color: var(--ink); font-weight: 600; }
.book-person { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.book-person a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px/22px var(--sans); color: var(--ink); text-decoration: none; }
.book-person a:hover, .book-person a:focus-visible { text-decoration: underline; text-decoration-color: var(--ctrl); text-underline-offset: 3px; }
.book-person small { flex: none; font: var(--t-meta); color: var(--ink-3); white-space: nowrap; }
.book-mobile { font: var(--t-meta); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.book-mobile.none { color: var(--ink-3); }
.book-job { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; font: var(--t-meta); }
.book-job > span { flex: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.book-job .late-label { color: var(--late); }
.book-job small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; color: var(--ink-2); }
.book-job .said { font: italic 400 15px/18px var(--serif); color: var(--ink-2); }
.book-actions { display: flex; gap: 2px; justify-content: flex-end; }
.book-actions .icon-btn { width: 36px; height: 36px; border-radius: var(--r-ctl); color: var(--ink-3); }
.book-actions .ico { width: 18px; height: 18px; }
.book-row:hover .book-actions .icon-btn, .book-row:focus-within .book-actions .icon-btn, .week-entry:hover .book-actions .icon-btn { color: var(--ink); }
.book-actions .icon-btn:hover { background: var(--panel-line); }
.book-actions .btn { min-height: 36px; }
.col-sort { display: inline-flex; align-items: baseline; gap: var(--s1); padding: var(--s3) 0; margin: calc(-1 * var(--s3)) 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.col-sort:hover { color: var(--ink); }
.col-sort[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.col-sort small { font: inherit; font-weight: 400; color: var(--ink-2); }
.book-none { margin: 0; padding: var(--s3) var(--s4); font: var(--t-meta); color: var(--ink-3); }
.book-more { display: flex; margin: var(--s4) auto 0; }
.week-scroll { overflow-x: auto; margin-top: var(--s4); padding-bottom: var(--s2); }
.book-week { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: var(--s3); min-width: 1100px; align-items: start; }
.week-day { overflow: hidden; }
.week-day > header { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: var(--s3); font: var(--t-meta); }
.week-day > header b { font-weight: 600; }
.week-day > header span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.week-day.is-today > header { background: var(--summary); color: var(--frame-ink); }
.week-day.is-today > header span { color: var(--primary); }
.week-day ul { list-style: none; margin: 0; padding: 0 var(--s3); }
.week-entry { display: grid; gap: 2px; padding: var(--s3) 0; border-top: 1px solid var(--hairline); }
.week-entry a { font: 600 15px/22px var(--sans); color: var(--ink); text-decoration: none; }
.week-entry a:hover { text-decoration: underline; text-decoration-color: var(--ctrl); }
.week-entry small { font: var(--t-meta); color: var(--ink-3); }
.week-entry .book-actions { justify-content: flex-start; margin: var(--s1) 0 0 -6px; }
@media (hover: hover) and (min-width: 641px) {
  .week-entry { position: relative; }
  .week-entry .book-actions { position: absolute; top: var(--s1); right: calc(-1 * var(--s1)); margin: 0; padding: 2px; border-radius: var(--r-ctl); background: var(--panel); opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--ease-out); }
  .week-entry:hover .book-actions, .week-entry:focus-within .book-actions { opacity: 1; pointer-events: auto; }
}
.book-empty { margin: 0; padding: var(--s3); border: 0; font: var(--t-meta); color: var(--ink-3); }

/* ---------- one empty state ---------- */
.empty-state { max-width: 56ch; padding: var(--s7) var(--s5); text-align: left; }
.empty-state h3 { margin: 0 0 var(--s2); font: var(--t-section); color: var(--ink); }
.empty-state p { margin: 0 0 var(--s4); font: var(--t-body); color: var(--ink-2); }
.group > .empty-state { padding: var(--s5) var(--s4); }

/* ---------- motion: opacity and transform, 120 to 260ms; the reduced-motion rule above stops all of it ---------- */
@media (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: dlg var(--dur-2) var(--ease-out); }
  @keyframes dlg { from { opacity: 0; transform: translateY(4px) scale(.98); } }
}

/* ---------- Today on a phone: a two-line card per person, actions on their own line ---------- */
@media (max-width: 640px) {
  .today-head { margin-bottom: var(--s3); align-items: center; }
  .today-head .seg button { min-width: 44px; padding: 0 var(--s2); }
  .book-summary { gap: 0 var(--s2); padding: var(--s2) var(--s3); margin-bottom: var(--s3); }
  .summary-jump { gap: 6px; margin: 0; padding: 0 var(--s2); font: var(--t-meta); white-space: nowrap; }
  .summary-jump b { font: 400 22px/28px var(--serif); }
  .summary-jump.late-jump { margin: 0; }
  .book-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); margin-bottom: var(--s3); }
  .book-date { grid-column: 1 / -1; margin: 0; }
  .book-date input { flex: 1; max-width: none; min-height: 44px; font-size: 16px; }
  .book-date .icon-btn { width: 44px; height: 44px; }
  .book-toolbar .seg { min-width: 0; }
  .book-toolbar .seg button { flex: 1; min-height: 44px; padding: 0 var(--s2); }
  .book-filter > span { display: none; }
  .book-filter select { min-height: 44px; max-width: 150px; font-size: 16px; }
  .book-diary { display: none; }
  .book-toolbar .work-tools { grid-column: 1 / -1; }
  .book-columns { display: none; }
  .book-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); min-height: var(--row-h-phone); padding: var(--s3) var(--s4); }
  .book-time { grid-row: 1; grid-column: 2; text-align: right; }
  .book-person { grid-row: 1; grid-column: 1; }
  .book-person a { display: flex; align-items: center; min-height: 44px; margin-block: -11px; font: 600 17px/22px var(--sans); }
  .book-person small { display: none; }
  .book-job { grid-row: 2; grid-column: 1 / -1; flex-wrap: wrap; row-gap: 2px; }
  .book-job small { flex-basis: 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .book-mobile { grid-row: 3; grid-column: 1; }
  .book-actions { grid-row: 3; grid-column: 2; gap: 0; }
  .book-actions .icon-btn { width: 44px; height: 44px; color: var(--ink-2); }
  .book-actions .btn { min-height: 44px; }
  .book-week { display: flex; flex-direction: column; min-width: 0; }
  .week-scroll { overflow: visible; }
  .week-entry { grid-template-columns: minmax(0, 1fr) auto; }
  .week-entry .book-actions { grid-row: 1 / span 3; grid-column: 2; margin: 0; }
  .week-entry > a { display: flex; align-items: center; min-height: 44px; }
  .week-entry small, .week-entry > a { grid-column: 1; }
  .empty-state { padding: var(--s6) var(--s4); }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .book-columns, .book-row { grid-template-columns: 80px minmax(140px, 1fr) minmax(170px, 1.6fr) 156px; }
  .book-columns .book-mobile, .book-row .book-mobile { display: none; }
}

/* ---------- the customer record: who, what to do, then the enquiry; Next and history on the right ---------- */
.sheet .panel, .sheet .head { background: var(--page); }
.sheet .head { border-bottom: 0; }
.sheet .head h2 { font: var(--t-section); }
.sheet .body { gap: var(--s3); }
.col-main, .col-history { gap: var(--s3); }
.sheet .card { padding: var(--s4); }
.identity { display: grid; gap: var(--s1); margin: 0 0 var(--s4); }
.id-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); margin: 0; font: var(--t-meta); color: var(--ink-2); }
.id-line .num { font: 600 15px/22px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.id-line .st { font: 600 13px/18px var(--sans); color: var(--ink); }
.id-line .st.late-label, .id-line .st.late-label .glyph { color: var(--late); }
.dot { color: var(--ink-3); }
.contact-line { display: flex; flex-wrap: wrap; gap: var(--s2); }
.contact-line .btn, .contact-line .menu-wrap > .btn { min-height: 40px; padding: 0 var(--s3); gap: var(--s2); }
.contact-line .btn .ico { width: 18px; height: 18px; }
.contact-line .menu-wrap { display: flex; margin-left: auto; }
.contact-card-note, .card.contact .reason { margin: var(--s2) 0 0; font: var(--t-meta); color: var(--ink-2); }
@media (min-width: 900px) { .contact-line { flex-wrap: nowrap; gap: 6px; } .contact-line .btn { flex: 1 1 auto; padding: 0 10px; } .contact-line .menu-wrap { flex: none; } }
.menu-wrap > .btn .ico { width: 16px; height: 16px; }
.next-card .card-title { margin-bottom: var(--s3); }
.fields, .next { display: block; margin: var(--s3) 0 0; border-radius: var(--r-ctl); background: var(--panel); box-shadow: inset 0 0 0 1px var(--hairline); }
.next-card .next { margin-top: 0; }
.fields .field, .next .field { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 48px; padding: 0 var(--s2) 0 var(--s4); font: var(--t-body); color: var(--ink-2); }
.fields .field + .field, .next .field + .field { border-top: 1px solid var(--hairline); }
.fields .field > span, .next .field > span { flex: none; }
.fields .field b { min-height: 0; padding-right: var(--s2); font: 400 15px/22px var(--sans); color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.fields .field select, .next .field input { flex: 1 1 auto; min-width: 0; max-width: 70%; min-height: 44px; padding: 0 var(--s2); border: 0; background: transparent; color: var(--ink); font: var(--t-body); text-align: right; text-align-last: right; }
.next .field input[name=step] { max-width: none; text-align: left; }
.next .field:focus-within, .fields .field:focus-within { background: var(--tile); }
.fields .resp b { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.fields .resp.late b, .fields .resp.late .glyph { color: var(--late); font-weight: 600; }
.next:has(.next-acts) { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.next .field { grid-column: 1 / -1; }
.next .field.at { grid-column: 1; }
.next-acts { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s2); border-top: 1px solid var(--hairline); }
.next-acts .btn { min-height: 36px; }
.next:not(:has(.field)) { display: flex; gap: var(--s2); padding: var(--s2); }
.next:not(:has(.field)) input { flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--s3); border: 0; background: transparent; color: var(--ink); }
.enq { display: flex; flex-direction: column; }
.enq-head { display: flex; align-items: flex-start; gap: var(--s3); }
.enq-head h3 { flex: 1; margin: 0; font: var(--t-section); }
.steps.seg { align-self: flex-start; margin-top: var(--s3); }
.steps.seg button { min-height: 40px; }
.steps.seg button[disabled] { color: var(--ink-3); }
.enq.closed .steps.seg { display: none; }
.extras { display: grid; gap: var(--s3); margin-top: var(--s4); }
.extra-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); font: var(--t-body); }
.stage-pick { display: inline-flex; align-items: center; gap: var(--s3); flex: 1; }
.stage-pick > span { font: var(--t-meta); color: var(--ink-3); }
.sub-block { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--hairline); }
.sub-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 32px; font: var(--t-body); }
.sub-head h3, .sub-head h4 { margin: 0; font: var(--t-title); }
.sub-head .btn { margin: -6px 0; }
.quote { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); align-items: center; padding: var(--s3); border: 0; border-radius: var(--r-ctl); background: var(--tile); }
.quote > :not(.mini-actions) { grid-column: 1; }
.quote .mini-actions { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
.quote .mini-actions .btn { min-height: 40px; }
.quote .amt { font: 600 17px/24px var(--sans); font-variant-numeric: tabular-nums; }
.quote .sub { font: var(--t-meta); color: var(--ink-2); }
.opp-card .card-title .glyph { vertical-align: 1px; }
.opp-item b { font: 600 15px/22px var(--sans); }
.opp-item .sub { font: var(--t-meta); color: var(--ink-2); }
.plans .row.mini .main .ico, .row.mini .main > .ico { width: 16px; height: 16px; color: var(--ink-3); vertical-align: -3px; }
.plans .mini-actions { flex-wrap: nowrap; }
.timeline { gap: var(--s3); }
.day { gap: var(--s3); margin: var(--s2) 0 0; }
.bubble { font: var(--t-body); }
.bubble .by { font: var(--t-meta); color: var(--ink-3); }
.bubble.said .words { font: italic 400 17px/24px var(--serif); }
.bubble.note { background: var(--tile); }
.sys { font: var(--t-meta); color: var(--ink-3); }
.older { justify-self: start; }
.hist-facts, .hist-due { font: var(--t-meta); }
.hist-jump { font: var(--t-meta); }
.composer { background: var(--page); }
.composer.resting button { font: 600 15px/1 var(--sans); }
.composer.resting button.last { text-decoration: none; background: var(--tile); border-radius: var(--r-ctl); }
.comp-head h3 { font: var(--t-title); }
.modes button { font-weight: 400; }
@media (min-width: 1280px) {
  .sheet .head { padding: var(--s5) var(--s5) var(--s3); }
  .sheet .head h2 { font: var(--t-figure); }
  .col-main { padding: var(--s4) var(--s5) var(--s5); }
  .col-history { padding: var(--s5) var(--s5) var(--s5) var(--s2); background: var(--page); border-left: 0; }
  .col-history > #c-history { padding: var(--s4); background: var(--panel); }
  .sheet .composer { background: var(--page); border-top: 1px solid var(--hairline); }
}
@media (max-width: 899px) {
  .contact-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-line .btn, .contact-line .menu-wrap > .btn { min-height: 44px; padding: 0 var(--s2); }
  .contact-line .menu-wrap { margin: 0; display: grid; }
  .contact-line .here { order: 1; }
  .contact-line .menu-wrap { order: 2; }
  .steps.seg { align-self: stretch; }
  .steps.seg button { flex: 1; min-height: 44px; }
}

/* ---------- dialogs and forms: grouped rows, label beside value, the footer always in view ---------- */
dialog { padding: 0; border: 0; border-radius: var(--r-card); background: var(--page); color: var(--ink); box-shadow: var(--pop-shadow); width: min(520px, calc(100% - 24px)); max-height: min(88dvh, 820px); overflow: hidden; }
:root[data-theme="dark"] dialog { border: 1px solid var(--panel-line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) dialog { border: 1px solid var(--panel-line); } }
dialog.wide { width: min(720px, calc(100% - 24px)); }
dialog.book-popup { width: min(560px, calc(100% - 24px)); }
dialog form { display: flex; flex-direction: column; gap: 0; padding: 0; max-height: min(88dvh, 820px); }
dialog .form-head { padding: var(--s5) var(--s5) var(--s2); }
dialog h2 { margin: 0; font: var(--t-section); }
dialog p { margin: 0; color: var(--ink-2); }
dialog .form-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: var(--s3); padding: var(--s3) var(--s5) var(--s5); }
dialog .actions, .settings-card .actions { display: flex; justify-content: flex-end; gap: var(--s2); margin: 0; }
dialog form > .actions { position: sticky; bottom: 0; padding: var(--s3) var(--s5); background: var(--page); border-top: 1px solid var(--hairline); }
.book-popup form { max-height: calc(min(88dvh, 820px) - 64px); }
.book-popup .contact-context { font: var(--t-meta); color: var(--ink-3); }
.panel-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s4) var(--s3) var(--s2) var(--s5); }
.panel-head h2 { flex: 1; }
.panel-body { display: grid; gap: var(--s3); padding: var(--s2) var(--s5) var(--s5); max-height: calc(min(88dvh, 820px) - 72px); overflow-y: auto; }
label.f { display: grid; gap: var(--s1); font: var(--t-meta); color: var(--ink-2); }
label.f input, label.f select, label.f textarea { min-height: 44px; padding: 0 var(--s3); border: 1px solid var(--ctrl); border-radius: var(--r-ctl); background: var(--panel); color: var(--ink); font: var(--t-body); }
label.f textarea { padding: var(--s2) var(--s3); min-height: 88px; resize: vertical; }
.f-group { overflow: hidden; }
.f-group label.f, .f-group .f { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: var(--s3); min-height: 48px; padding: 0 var(--s4); font: var(--t-body); color: var(--ink-2); }
.f-group > * + * { border-top: 1px solid var(--hairline); }
.f-group label.f :is(input, select) { min-height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: var(--t-body); text-align: right; text-align-last: right; }
.f-group label.f :is(input, select):focus-visible { outline-offset: -2px; }
.f-group label.f:focus-within { background: var(--tile); }
.f-group label.f.wide { grid-template-columns: minmax(0, 1fr); gap: var(--s1); padding-block: var(--s3); }
.f-group label.f.wide textarea { min-height: 88px; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: left; }
.f-group label.f.check input { justify-self: end; width: 22px; height: 22px; min-height: 0; accent-color: var(--ink); }
.f-group label.f .follow-shortcuts { grid-column: 1 / -1; padding-bottom: var(--s2); }
.f-group .f-val { text-align: right; color: var(--ink); }
.f-group .f-val.off { color: var(--ink-3); }
.f-group input[type=number] { justify-self: end; width: 88px; }
.f-hint { margin: calc(-1 * var(--s2)) var(--s4) 0; font: var(--t-meta); color: var(--ink-3); }
.dlg-tools { display: flex; flex-wrap: wrap; gap: var(--s2); }
.err { margin: 0; }
@media (max-width: 640px) {
  .f-group label.f, .f-group .f { grid-template-columns: minmax(0, 1fr); gap: var(--s1); padding-block: var(--s2); }
  .f-group label.f :is(input, select) { min-height: 44px; text-align: left; text-align-last: left; font-size: 16px; }
  .f-group label.f.check { grid-template-columns: minmax(0, 1fr) auto; }
  .f-group .f-val { text-align: left; }
  .f-group input[type=number] { justify-self: start; }
  dialog .form-head { padding: var(--s4) var(--s4) var(--s2); }
  dialog .form-body { padding: var(--s2) var(--s4) var(--s4); }
  dialog form > .actions { padding: var(--s3) var(--s4); }
  dialog form > .actions .btn { flex: 1; }
  .panel-body { padding: var(--s2) var(--s4) var(--s4); }
}

/* ---------- Settings and Connections: grouped lists, one card per subject ---------- */
.groups.settings { gap: var(--s4); }
.settings-card { display: grid; gap: var(--s3); align-content: start; padding: var(--s5); }
.settings-card > h2 { margin: 0; font: var(--t-title); }
.settings-card .hint.lede { margin: 0; color: var(--ink-2); }
.settings-card .f-group { background: var(--tile); }
.settings-card .f-group > * + * { border-top-color: var(--panel-line); }
.stamp { margin: 0; font: var(--t-meta); color: var(--ink-3); }
fieldset.routine { border: 0; border-radius: var(--r-ctl); padding: var(--s3) var(--s4); background: var(--tile); }
fieldset.routine legend { float: left; width: 100%; padding: 0 0 var(--s1); font: var(--t-title); }
.check-options { gap: var(--s1) var(--s5); }
.operations-page .group > h2 { margin: 0; padding: var(--s4) var(--s4) var(--s2); }
.operations-page .group > p, .operations-page .group > .hint { margin: 0; padding: 0 var(--s4) var(--s3); }
.operations-page .group > .btn { margin: 0 var(--s4) var(--s4); }
.operations-page .group > .f-group, .operations-page .group > .table-wrap { margin: 0 var(--s4) var(--s3); }
.operations-page .group > .f-list { background: var(--tile); }
.operations-page > .settings-card { margin-bottom: var(--s5); }
.operations-page .error { color: var(--late); font-weight: 600; }

/* ---------- Reports: tiles fill whole rows; one hairline between them ---------- */
.tiles { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 1px; margin: 0 0 var(--s4); overflow: hidden; background: var(--hairline); }
.tile { display: grid; gap: var(--s1); align-content: start; padding: var(--s4); border: 0; border-radius: 0; background: var(--panel); color: inherit; text-decoration: none; }
a.tile { cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
a.tile:hover { background: var(--tile); }
.tile b { font: var(--t-figure); color: var(--ink); font-variant-numeric: tabular-nums; }
.tile.zero b { color: var(--ink-3); }
.tile small { font: var(--t-meta); color: var(--ink-3); }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.report { gap: var(--s3); }
.report .hint { margin: calc(-1 * var(--s2)) 0 var(--s1); }
.report-detail header .btn { margin-left: auto; }

/* ---------- the deal desk: cards no wider than they need ---------- */
.desk-page > * { max-width: 1040px; }
.desk { gap: var(--s4); margin-top: var(--s3); }
.desk-card { padding: var(--s5); }
.desk-head .card-title { font: var(--t-title); }
.desk-nums { font: var(--t-body); }
.desk-nums dt { color: var(--ink-2); }
.desk-nums .total { font-weight: 600; }
.card .meta { font: var(--t-meta); color: var(--ink-2); }

/* ---------- Showroom: one line per visitor ---------- */
.row.visit { flex-wrap: wrap; }
.visit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0; }
.visit-actions .clock { margin-right: var(--s2); }
label.inline select { min-height: 40px; padding: 0 var(--s2); border: 1px solid var(--ctrl); border-radius: var(--r-ctl); background: var(--panel); color: var(--ink); font: var(--t-body); }
.rot-item { padding: var(--s2) var(--s4); min-height: var(--row-h); }
.rot-n { width: 28px; height: 28px; background: var(--tile); font: 600 13px/1 var(--sans); }
.rot-item.up .rot-n { border: 0; background: var(--primary); color: var(--on-primary); }
.rot-name { font: 600 15px/22px var(--sans); }
.rot-state { font: var(--t-meta); color: var(--ink-2); }
.rot-actions { padding: var(--s2) var(--s4) var(--s4); }
@media (max-width: 640px) {
  .row.visit { flex-direction: column; align-items: stretch; gap: var(--s2); }
  .row.visit .side { order: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); }
  .row.visit .side .clock { grid-column: 1 / -1; }
  .row.visit label.inline { grid-column: 1 / -1; }
  .row.visit label.inline select { width: 100%; min-height: 44px; font-size: 16px; }
  .row.visit .side .btn, .row.visit .side .menu-wrap > .btn { width: 100%; min-height: 44px; }
}

/* ---------- Team: the give bar appears once something is ticked ---------- */
.give-bar { position: sticky; bottom: var(--s4); z-index: 3; display: flex; align-items: center; gap: var(--s2); margin: var(--s2) var(--s3) var(--s3); padding: var(--s2); border-radius: var(--r-card); background: var(--summary); }
.give-bar select { flex: 1; min-height: 44px; max-width: 320px; padding: 0 var(--s3); border: 0; border-radius: var(--r-ctl); background: var(--frame-hover); color: var(--frame-ink); font: var(--t-body); }
.tick { min-width: 44px; min-height: 44px; }
@media (max-width: 640px) { .give-bar { bottom: calc(var(--tabbar) + var(--s2) + env(safe-area-inset-bottom)); } }

/* ---------- lists with filters ---------- */
.filters { gap: var(--s3); margin: 0 0 var(--s4); }
.filter { font: var(--t-meta); color: var(--ink-2); }
.filter select, .filter input[type=search] { min-height: 40px; background: var(--panel); font: var(--t-body); }
.filter.check { font: var(--t-body); }
.views { margin: calc(-1 * var(--s2)) 0 var(--s4); }
.view-chip a { font: 600 15px/1 var(--sans); }
.phone-filters { flex-wrap: nowrap; align-items: center; }
.phone-filters .filter.grow { flex: 1; }
.phone-filters input[type=search] { min-height: 44px; font-size: 16px; }
.filters.in-panel { display: grid; margin: 0; }
.filters.in-panel .filter select { min-height: 44px; font-size: 16px; }
.people-table .cell-sub { margin-top: 2px; font: var(--t-meta); color: var(--ink-3); white-space: normal; }
.people-table td { vertical-align: top; }
.people-table td:first-child { white-space: normal; }
.click-row { cursor: pointer; }
.due-soon { font-weight: 600; }
.book-seg button small { margin-left: 6px; font: var(--t-meta); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.book-seg button[aria-pressed="true"] small { color: inherit; }
.pager { gap: var(--s3); margin-top: var(--s4); font: var(--t-meta); }
.feed-age { margin: 0 0 var(--s3); font: var(--t-meta); color: var(--ink-2); }

/* ---------- the quote ---------- */
.quote-sheet { padding: var(--s6); }
.quote-sheet h2 { font: var(--t-figure); }
.quote-sheet h3 { font: var(--t-section); }
.quote-table th, .quote-table td { font: var(--t-body); color: var(--ink); }
.quote-meta, .quote-sheet footer { font: var(--t-meta); }

/* ---------- Account, sign-in ---------- */
.account { padding: var(--s5); gap: var(--s3); }
.account + .account { margin-top: var(--s4); }
body.out main#view { display: grid; place-items: center; min-height: calc(100dvh - var(--appbar)); padding: var(--s5) var(--s4); }
.signed-out { width: 100%; max-width: 420px; margin: 0; }
.signed-out h1 { margin: 0; font: var(--t-h1); }
.signin { gap: var(--s4); padding: var(--s6) var(--s5); background: var(--panel); border-radius: var(--r-card); }
.signin .dealer-line { margin: 0 0 calc(-1 * var(--s3)); font: var(--t-meta); color: var(--ink-3); }

/* ---------- the shell: collapsed rail shows the mark only; phone keeps the dealer's name ---------- */
@media (min-width: 900px) { body.rail-min .appbar .brand span { display: none; } }
@media (max-width: 640px) {
  .department-select { display: none; }
  .brand small { max-width: 180px; }
}
.more-list a { font: var(--t-body); }
.more-list a[aria-current="page"] { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.more-list a[aria-current="page"] .ico { color: var(--on-primary); }
.panel-body > .f-group { margin-bottom: var(--s2); }

/* ---------- the command bar (Ctrl+K): the search box, with Go to rows above the people ---------- */
@media (min-width: 1000px) {
  .search::after { content: 'Ctrl K'; position: absolute; right: var(--s3); top: 50%; transform: translateY(-50%); padding: 2px 6px; border-radius: var(--r-in); background: var(--tile); font: var(--t-cap); color: var(--ink-3); pointer-events: none; }
  .search:focus-within::after, .search:has(input:not(:placeholder-shown))::after { display: none; }
}
.recent .cmd { display: flex; align-items: center; gap: var(--s3); }
.recent .cmd .ico { width: 18px; height: 18px; color: var(--ink-3); }
.recent .cmd kbd { margin-left: auto; font: var(--t-cap); color: var(--ink-3); }
.recent [aria-selected="true"] { background: var(--tile); }
.recent-title { margin: var(--s2) var(--s3) var(--s1); }
.kbd-list { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); margin: 0; font: var(--t-body); }
.kbd-list dt { font-weight: 600; }
.kbd-list dd { margin: 0; color: var(--ink-2); }

/* ---------- phone: every target at least 44 by 44 (WCAG 2.5.8, and Mark's rule) ---------- */
@media (max-width: 640px) {
  #view .table td a, #view .table td .link-btn { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 44px; min-height: 44px; margin-block: -11px; padding: 0; }
  #view .table td:first-child a { justify-content: flex-start; }
  label:has(> input[type=checkbox]) { min-height: 44px; display: flex; align-items: center; gap: var(--s3); }
  #view .row .name a, #view .book-person a, #view a.tile { min-height: 44px; }
  #view .row .name a { display: inline-flex; align-items: center; padding: 0; margin-block: -11px; }
  .warn a { display: inline-flex; align-items: center; min-height: 44px; }
  .table th .col-sort { min-height: 44px; min-width: 44px; margin: calc(-1 * var(--s3)) 0; padding: 0; align-items: center; }
  .filter select, .filter input[type=search], label.inline select { min-height: 44px; font-size: 16px; }
  .row a.main { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
}
fieldset.routine, .settings-card fieldset.routine { margin: 0; }
@media (max-width: 640px) {
  .group > header { flex-wrap: wrap; }
  .group > header p { flex-basis: 100%; margin: 0; }
}
@media (max-width: 480px) { .contact-line .here .ico { display: none; } }
@media (max-width: 640px) { .next-acts .btn, .quote .mini-actions .btn { min-height: 44px; } }
@media (max-width: 640px) { .next-acts .btn, .quote .mini-actions .btn { min-height: 44px; } }
.empty-state, .week-scroll { scroll-margin-top: calc(var(--appbar) + var(--s3)); }
.steps.seg button[aria-pressed="true"][disabled] { color: var(--on-primary); }
@media (max-width: 640px) {
  .rows > .row:not(:has(> .tick)):has(> .side:not(:empty)) { flex-wrap: wrap; row-gap: var(--s1); }
  .rows > .row:not(:has(> .tick)):has(> .side:not(:empty)) > .main { flex-basis: 100%; }
  .rows > .row:not(:has(> .tick)) > .side { flex-wrap: wrap; justify-content: flex-start; gap: var(--s1) var(--s3); }
}

/* ---------- Today as the next-action queue (council 25 Oct 2026; setting today_queue) ---------- */
.q-cap { display: block; font: 600 12px/16px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s2); }
.q-now { margin: 0 0 var(--s4); }
.q-now-row { display: flex; gap: var(--s3); overflow-x: auto; padding-bottom: var(--s1); }
.q-card { flex: 0 0 250px; display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s4); border: 1px solid var(--panel-line); border-radius: var(--r-card); background: var(--panel); }
.q-card.is-soon { background: var(--soon-bg); border-color: var(--soon-line); }
.q-card .q-t { font: 600 12px/16px var(--sans); color: var(--ink-3); }
.q-card.is-soon .q-t { color: var(--soon-ink); }
.q-card b { font: var(--t-title); }
.q-card small { font: var(--t-meta); color: var(--ink-2); }
.q-card .q-acts { margin-top: var(--s2); }
.q-tiles { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0 0 var(--s4); }
.q-tile { flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: var(--s3) var(--s4); border: 1px solid var(--panel-line); border-radius: var(--r-card); background: var(--panel); color: var(--ink); text-align: left; cursor: pointer; min-height: 44px; font-family: var(--sans); }
.q-tile small { font: 600 12px/16px var(--sans); color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.q-tile small.sub { text-transform: none; letter-spacing: 0; font-weight: 400; }
.q-tile .n { font: var(--t-figure); font-variant-numeric: tabular-nums; }
.q-tile[aria-pressed="true"] { background: var(--frame); color: var(--frame-ink); border-color: var(--frame); }
.q-tile[aria-pressed="true"] .n { color: var(--primary); }
.q-tile[aria-pressed="true"] small { color: var(--frame-muted); }
.q-body { display: flex; gap: var(--s4); align-items: flex-start; }
.q-list { flex: 1 1 0; min-width: 0; background: var(--panel); border-radius: var(--r-page); overflow: clip; }
.q-list ul { list-style: none; margin: 0; padding: 0; }
.q-head, .q-row { display: grid; grid-template-columns: 140px minmax(160px, 1.2fr) 130px minmax(200px, 1.6fr) auto; gap: var(--s3); align-items: center; padding: var(--s2) var(--s4); }
.q-head { min-height: 36px; background: var(--tile); font: 600 12px/16px var(--sans); color: var(--ink-3); }
.q-row { min-height: 60px; border-top: 1px solid var(--hairline); }
.q-row:hover, .q-row:focus-within { background: var(--tile); }
.q-row small, .q-row .muted { display: block; font: var(--t-meta); color: var(--ink-3); }
.q-row b { font-weight: var(--w600); }
.q-person a { font-weight: var(--w600); text-decoration: none; color: var(--ink); }
.q-person a:hover { text-decoration: underline; }
.q-late { color: var(--late); font-weight: var(--w600); }
.q-next .said { font-family: var(--serif); font-style: italic; }
.q-lad { display: flex; gap: 3px; margin-bottom: 3px; }
.q-lad span { flex: 1; height: 5px; border-radius: 2px; background: var(--hairline); }
.q-lad span.on { background: var(--ctrl); }
.q-lad span.now { background: var(--primary); }
.q-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.q-acts .btn.ink { background: var(--frame); color: var(--frame-ink); border-color: var(--frame); }
.q-need-row { background: var(--need-bg); }
.q-need { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/16px var(--sans); color: var(--need-ink); background: var(--need-chip); border-radius: 6px; padding: 3px 8px; }
.q-need::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.q-peek { flex: 0 0 340px; position: sticky; top: calc(var(--appbar) + var(--s3)); display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) var(--s5); background: var(--panel); border-radius: var(--r-page); box-shadow: var(--pop-shadow); }
.q-peek-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); }
.q-peek h2 { margin: 0; font: var(--t-section); font-size: 24px; }
.q-peek h3 { margin: var(--s2) 0 0; font: 600 12px/16px var(--sans); color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.q-peek small, .q-peek .muted { font: var(--t-meta); color: var(--ink-3); }
.q-steps { display: flex; }
.q-steps span { flex: 1; text-align: center; font: 500 11px/14px var(--sans); color: var(--ink-3); padding: 6px 2px; border-bottom: 3px solid var(--hairline); }
.q-steps span.done { border-color: var(--ctrl); color: var(--ink); }
.q-steps span.now { border-color: var(--primary); color: var(--ink); font-weight: 700; }
.q-move, .q-kind { border: 1px solid var(--hairline); border-radius: var(--r-ctl); padding: 6px 8px; font: var(--t-meta); background: var(--surface); color: var(--ink); min-height: 34px; }
.q-add { display: flex; gap: 6px; align-items: center; background: var(--tile); border-radius: var(--r-ctl); padding: var(--s2); }
.q-add input { flex: 1; min-width: 0; border: 1px solid var(--hairline); border-radius: var(--r-ctl); padding: 7px 9px; font: var(--t-meta); background: var(--surface); color: var(--ink); min-height: 34px; }
.q-hist { list-style: none; margin: 0; padding: 0; }
.q-hist li { display: grid; grid-template-columns: 56px 1fr; gap: 2px 10px; padding: var(--s2) 0; border-top: 1px solid var(--surface-2); font: var(--t-meta); color: var(--ink); }
/* Stacked rows: on a phone, and beside the open peek on any screen (the list keeps its width, the row folds). */
.q-body.has-peek .q-head { display: none; }
.q-body.has-peek .q-row { grid-template-columns: 1fr 1fr; grid-template-areas: "when stage" "person person" "next next" "acts acts"; min-height: 0; padding: var(--s3) var(--s4); }
.q-body.has-peek .q-row > :nth-child(1) { grid-area: when; } .q-body.has-peek .q-row > :nth-child(2) { grid-area: person; } .q-body.has-peek .q-row > :nth-child(3) { grid-area: stage; justify-self: end; width: 90px; } .q-body.has-peek .q-row > :nth-child(4) { grid-area: next; } .q-body.has-peek .q-row > :nth-child(5) { grid-area: acts; }
@media (max-width: 1000px) {
  .q-body { flex-direction: column; }
  .q-peek { position: fixed; inset: 0; z-index: 40; flex: none; border-radius: 0; box-shadow: none; overflow: auto; padding: var(--s4); padding-bottom: calc(var(--s7) + var(--tabbar)); }
  .q-head { display: none; }
  .q-row { grid-template-columns: 1fr 1fr; grid-template-areas: "when stage" "person person" "next next" "acts acts"; min-height: 0; padding: var(--s3) var(--s4); }
  .q-row > :nth-child(1) { grid-area: when; } .q-row > :nth-child(2) { grid-area: person; } .q-row > :nth-child(3) { grid-area: stage; justify-self: end; width: 90px; } .q-row > :nth-child(4) { grid-area: next; } .q-row > :nth-child(5) { grid-area: acts; }
  .q-acts .btn { flex: 1; min-height: 44px; }
  .q-tiles { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--s1); }
  .q-tile { flex: 0 0 118px; padding: var(--s2) var(--s3); }
  .q-tile .n { font-size: 24px; line-height: 28px; }
}

/* Today queue, 25 Oct follow-up: no stage column when nobody has a stage; missed calls; the outcome panel. */
.q-list.no-stage .q-head, .q-list.no-stage .q-row { grid-template-columns: 140px minmax(160px, 1.2fr) minmax(200px, 1.8fr) auto; }
.q-need-row.is-stale .q-need { background: var(--surface-2); color: var(--ink-2); }
.q-call-row .q-person b { font-weight: var(--w600); }
.q-panel-row { padding: 0 var(--s4) var(--s4); background: var(--need-bg); border-top: 0; }
.q-panel { display: grid; gap: var(--s3); max-width: 760px; padding: var(--s3) var(--s4) var(--s4); border: 1px solid var(--panel-line); border-radius: var(--r-card); background: var(--panel); }
.q-seg { display: flex; gap: var(--s2); }
.q-seg button { flex: 1; min-height: 48px; border: 1px solid var(--hairline); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); font: 600 15px/20px var(--sans); cursor: pointer; }
.q-seg button[aria-pressed="true"] { background: var(--frame); border-color: var(--frame); color: var(--frame-ink); }
.q-panel textarea, .q-panel input, .q-panel select { border: 1px solid var(--hairline); border-radius: var(--r-ctl); padding: 10px; font: var(--t-body); background: var(--surface); color: var(--ink); min-height: 44px; box-sizing: border-box; }
.q-panel textarea { width: 100%; resize: vertical; }
.q-next-row { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--s2); }
.q-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.q-chip { border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 13px/18px var(--sans); padding: 6px 12px; min-height: 36px; cursor: pointer; }
.q-chip:hover { background: var(--tile); }
.q-panel-foot { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; justify-content: flex-end; }
.q-panel-foot select { margin-right: auto; }
@media (max-width: 1000px) {
  .q-list.no-stage .q-row { grid-template-areas: "when when" "person person" "next next" "acts acts"; }
  .q-next-row { grid-template-columns: 1fr; }
  .q-panel-row { padding: 0 var(--s2) var(--s3); }
  .q-panel-foot .btn { flex: 1; min-height: 44px; }
  .q-panel-foot select { flex-basis: 100%; margin-right: 0; }
}