/* The Bid Desk: what this app adds to the Galebach App Design System (Tim, 2026-11-11: "redesign the entire
   demo based on them and get rid of the old design"). ds/tokens.css and ds/bundle.css load first and carry
   the tokens, the base and every system component (AppHeader, Tabs, Card, StatRow, Table, RowLink, FactRows,
   FactCard, Chip, Button, Segmented, Dialog, Popover, Toast, EmptyState, Chat). Only layout the system does
   not have lives here, in its tokens: no colour, font, radius or shadow of our own. */

/* base and frame: the page column scrolls, the chat sits beside it, the demo strip along its foot */
html, body { height: 100%; }
body { overflow: hidden; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-body); letter-spacing: -.01em; }
h3 { font-size: 14px; font-weight: 600; }
button:disabled { opacity: .5; cursor: default; }
summary { cursor: pointer; color: var(--blue-d); font-weight: 500; width: fit-content; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.5 var(--font-body); margin: 6px 0 0; padding: var(--space-10) var(--space-12);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-8); color: var(--ink); }
td small { display: block; font-size: 12px; color: var(--mute); font-weight: 400; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.page { height: 100%; display: flex; flex-direction: column; }
.top, .top .tabs { flex-wrap: wrap; }
.who .lk { font-size: 13px; }
.shell { display: flex; flex: 1; min-height: 0; }
.maincol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; }
.view { flex: 1; width: 100%; max-width: calc(var(--content-max) + 2 * var(--space-16)); padding: var(--space-18) var(--space-16) var(--space-40); }
main { display: flex; flex-direction: column; gap: var(--space-14); margin-top: var(--space-14); min-width: 0; }
.view > main:first-child { margin-top: 0; }
.mt, .cols { margin-top: var(--space-14); }
.scroll { overflow-x: auto; }

/* page heads: a list page's title; the trail above a record; a record's header card (the system's Card with
   .hd and, on a job, its tabs as links); a tab page's own heading; a section heading on the page */
.pagehead { display: flex; align-items: center; gap: var(--space-10); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: 0 0 var(--space-10); font-size: 13px; color: var(--ink2); }
.crumbs a { color: var(--ink2); }
.crumbs a:hover { color: var(--blue); }
.crumbs b { font-weight: 500; color: var(--ink); }
.back { margin: 0 0 var(--space-10); }
.back a { color: var(--ink2); font-size: 13px; }
.back a:hover { color: var(--blue); }
.rec .hd > div:first-child { flex: 1 1 360px; }
.jobhead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-12); margin-top: var(--space-4); }
.ctabs a { padding: 11px var(--space-12); color: var(--mute); font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; }
.ctabs a:hover { color: var(--ink); text-decoration: none; }
.ctabs a.on { color: var(--blue-d); border-bottom-color: var(--blue); font-weight: 600; }
.sect { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-12); margin-top: var(--space-18); }
.sect > div { flex: 1 1 320px; min-width: 0; }
.sect .sub { margin-top: var(--space-2); font-size: 13px; color: var(--ink2); }
.group-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-10); margin-bottom: var(--space-8); }
section[style*="flex"] > .group-h, .more-in > .group-h, .fullcmp > section > .group-h { margin-bottom: 0; }
.group-h .eyebrow { font-size: 13px; color: var(--ink2); }
.group-h .n { font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.lede { color: var(--ink2); max-width: 86ch; }
.view > main > .note, .demo-note { color: var(--ink2); margin: 0; }
.hint { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid var(--line); border-radius: 50%;
  background: var(--card); color: var(--mute); font-size: 11px; font-weight: 600; cursor: help; vertical-align: middle; }

/* a disclosure card: what is one click down (a trade's costs; the project's bid dates and recent activity) */
.more, .trade-policy { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-10); padding: 0 var(--space-16); font-size: 13px; }
.more > summary, .trade-policy > summary { list-style: none; display: flex; align-items: center; gap: var(--space-8); width: auto; margin: 0 calc(-1 * var(--space-16));
  padding: 11px var(--space-16); font-size: 14px; font-weight: 600; border-radius: var(--radius-10); }
.more > summary::-webkit-details-marker, .trade-policy > summary::-webkit-details-marker, .level-gaps > summary::-webkit-details-marker { display: none; }
.more > summary::before, .trade-policy > summary::before, .level-gaps > summary::before { content: ""; width: 6px; height: 6px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.more[open] > summary::before, .trade-policy[open] > summary::before, .level-gaps[open] > summary::before { transform: rotate(45deg); }
.more > summary:hover, .trade-policy > summary:hover { background: var(--blue-bg); }
.more[open], .trade-policy[open] { padding-bottom: var(--space-14); }
.more[open] > summary, .trade-policy[open] > summary { border-bottom: 1px solid var(--line2); border-radius: var(--radius-10) var(--radius-10) 0 0; margin-bottom: var(--space-12); }
.more-in, .trade-more { display: flex; flex-direction: column; gap: var(--space-12); }
.trade-more { gap: var(--space-10); }
.trade-policy p { margin: var(--space-6) 0; }
.candidate-actions, .row-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.chat-prompt { align-self: flex-start; }

/* sign-in and start: one card on the page */
.wall { max-width: 560px; margin: var(--space-40) auto; padding: var(--space-24) var(--space-18); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-10); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); }
.wall-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); }

/* Projects: a FactCard per project, the size and one phase indicator */
.fc-grid.jobs { margin: 0; }
.jobcard, .jobcard:hover { color: var(--ink); text-decoration: none; }
.jobcard-phase { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-10); font-size: 13px; }
.tag.project-status { white-space: normal; }

/* the job: its trades table (the system's Table, each row a RowLink), the firms in a cell, the quiet marks */
.trade-board { table-layout: fixed; min-width: 720px; }
.trade-board td.r { white-space: nowrap; }
.trade-board th:nth-child(1) { width: 24%; }
.trade-board th:nth-child(2) { width: 12%; }
.trade-board th:nth-child(3) { width: 22%; }
.trade-board td { overflow-wrap: break-word; }
.trade-name-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
tr.rowlink > td:first-child small { color: var(--mute); font-weight: 400; }
.tfirms { display: flex; flex-direction: column; gap: 3px; }
.tfirm { display: flex; align-items: center; gap: var(--space-4) var(--space-8); }
.tfirm-name { flex: 1 1 auto; min-width: 0; }
.tfirm .chip { order: 1; }
.tfirm > .num, .tfirm-word { order: 2; white-space: nowrap; }
.tfirm.off, .tfirm-word { color: var(--mute); }
.tfirm.chosen .tfirm-name { font-weight: 600; }
.tfirm.in, .tfirm.will, .tfirm.asked, .tfirm.no { margin: 0 calc(-1 * var(--space-6)); padding: 1px var(--space-6); border-radius: var(--radius-4); color: var(--ink); }
.tfirm.in { background: var(--ok-bg); }
.tfirm.will { background: var(--blue-press); }
.tfirm.asked { background: var(--gap-bg); }
.tfirm.no { background: var(--bad-bg); }
.tfirm.no .tfirm-word, .tfirm.asked .tfirm-word, .tfirm.will .tfirm-word { color: var(--ink2); }
.tmarks { display: inline-flex; align-items: center; gap: var(--space-6); margin-left: var(--space-8); vertical-align: 1px; }
.lvdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink2); }
.lvdot.full { background: var(--ink2); }
.chip.thin { font-size: 11px; padding: 0 7px; }
.spread { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-24); }
.spread > div, .spread > button { display: flex; flex-direction: column; gap: var(--space-2); min-width: 64px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
.spread b { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.spread s { text-decoration: none; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.spread .z b { color: var(--mute); font-weight: 600; }
.dots { display: inline-flex; gap: 3px; min-height: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ghost); }
.project-summary { display: flex; flex-direction: column; gap: var(--space-10); overflow-wrap: anywhere; }
.project-metrics, .project-deadlines { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-18); }
.project-deadlines { gap: var(--space-8); }
.project-deadline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-10); padding: var(--space-6) var(--space-10);
  border: 1px solid var(--line); border-radius: var(--radius-7); }
.project-deadline b { font-size: 12px; font-weight: 600; padding: var(--space-2) 9px; border-radius: var(--radius-pill); }
.due-red b { background: var(--bad-bg); color: var(--bad); }
.due-orange b, .due-yellow b { background: var(--gap-bg); color: var(--gap); }
.coming td:first-child { width: 190px; }
.wait { font-size: 13px; color: var(--ink2); }
.wait.us { color: var(--gap); font-weight: 600; }

/* the Excel workbook tab */
.latest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-18); }
.latest-t { flex: 1 1 240px; min-width: 0; }
.latest-t .sub { color: var(--mute); font-size: 13px; }
.auto-note { margin: var(--space-8) 0 0; color: var(--ink2); }
.copies { margin-top: var(--space-12); }
.copies > .tablewrap { margin-top: var(--space-8); }

/* windows over the page: the trade, a firm, a detail (a Dialog's look, opened over the main pane only and
   non-modally, so the chat stays usable and the presenter's Next clickable; desk.js sets --main-top, --main-right) */
dialog.trade-modal { width: min(1200px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; overflow: auto;
  background: var(--page); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-12); box-shadow: var(--shadow-dialog); }
dialog.trade-modal::backdrop { background: var(--scrim); }
dialog.over-page { position: fixed; top: var(--main-top, 0px); bottom: var(--strip-h, 0px); left: 0; right: auto; margin: 0; z-index: 18; height: auto; max-height: none;
  width: min(1200px, calc((100vw - var(--main-right, 0px)) * .78)); border-left: 0; border-radius: 0 var(--radius-12) var(--radius-12) 0; }
dialog.over-page.leaving { visibility: hidden; }
dialog.over-page.sd-window { width: min(1300px, calc(100vw - var(--main-right, 0px))); }
.page-backdrop { position: fixed; inset: var(--main-top, 0px) var(--main-right, 0px) var(--strip-h, 0px) 0; z-index: 17; background: var(--scrim); opacity: 0; }
.page-backdrop.in { opacity: 1; }
.trade-modal-toolbar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: var(--space-12);
  padding: var(--space-10) var(--space-18); background: var(--card); border-bottom: 1px solid var(--line); }
.trade-modal-content, .desk-dialog-body, .sd { padding: var(--space-16) var(--space-18) var(--space-24); overflow-wrap: anywhere; }
.desk-dialog-body > * + * { margin-top: var(--space-10); }
@media (max-width: 900px) { dialog.over-page { width: calc(100vw - var(--main-right, 0px)); border-radius: 0; } dialog.trade-modal:not(.over-page) { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); } }

/* the trade window: the pick, the subs (one disclosure row each, its Go with beside it), their messages in place */
.hd .trade-next { margin: var(--space-6) 0 0; font-size: 14px; color: var(--ink); }
.pick-card { padding: var(--space-14) var(--space-18); }
.pick-t { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.pick-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-14); margin-top: var(--space-2); font-size: 13px; color: var(--mute); }
.pick-sub .linkbtn, .pick-line .linkbtn { padding: var(--space-2) var(--space-4); }
.pick-line { font-size: 13px; color: var(--ink2); }
.sboard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-10); overflow: hidden; }
.sboard > .none { padding: var(--space-12) var(--space-16); }
.sitem { display: flex; flex-direction: column; border-bottom: 1px solid var(--line2); }
.sitem:last-child { border-bottom: 0; }
.sline { display: flex; align-items: center; gap: var(--space-8); padding-right: var(--space-12); }
.sline .srow { flex: 1 1 auto; min-width: 0; }
.srow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 16px; gap: var(--space-12); align-items: center; width: 100%;
  padding: var(--space-10) var(--space-12) var(--space-10) var(--space-16); border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.srow:hover { background: var(--blue-bg); }
.srow:focus-visible { outline-offset: -2px; }
.sname, .sname-line { min-width: 0; }
.sname-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
.sname b { font-weight: 600; }
.sd-open { color: var(--blue-d); cursor: pointer; }
.sd-open:hover { text-decoration: underline; }
.sstat { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-10); }
.sstat > .num { font-weight: 600; }
.chip.spill.off { color: var(--mute); }
.sstatus { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); flex-basis: 100%; font-size: 13px; color: var(--ink2); }
.schev { color: var(--chevron); font-size: 18px; line-height: 1; transition: transform .12s; }
.srow[aria-expanded="true"] .schev { transform: rotate(90deg); }
.sflags { display: flex; flex-direction: column; gap: 3px; padding: 0 var(--space-16) var(--space-10); font-size: 13px; color: var(--ink2); }
.sflag.us { color: var(--gap); }
.sitem .subin { margin: 0 var(--space-16) var(--space-14); }
.gowith, .gowith-space { flex: none; min-width: 86px; }
.gowith.on { background: var(--blue-bg); border-color: var(--blue-line); color: var(--blue-d); font-weight: 600; }
.gowith.dim { color: var(--mute); }
.gowith-signed { margin-right: var(--space-4); }
.lvstate, .sdecl { font-size: 12.5px; color: var(--mute); white-space: nowrap; }
.lvstate.done { color: var(--ok); }
.sdecl { font-style: italic; white-space: normal; }
.firm-tags { display: inline-flex; flex-wrap: wrap; gap: var(--space-4); }
.firm-tags .chip { padding-left: 7px; padding-right: 7px; }   /* five badges on one line in a trade window row */
.firm-tags:empty { display: none; }
.firm-tag[data-tip] { cursor: default; }
.tipbub { position: fixed; inset: auto; margin: 0; border: 0; left: 0; top: 0; z-index: 60; max-width: 260px; pointer-events: none; background: var(--ink); color: var(--card);
  border-radius: var(--radius-6); padding: var(--space-4) var(--space-8); font-size: 12px; line-height: 1.4; box-shadow: var(--shadow-toast); overflow: visible; }
.chip.level-mark { margin-left: var(--space-8); vertical-align: 1px; }
.level-heading .chip.level-mark { margin-left: 0; }
@media (prefers-reduced-motion: reduce) { .schev, .subin-chev { transition: none; } }
@media (max-width: 900px) { .srow { grid-template-columns: 1fr 16px; gap: var(--space-6) var(--space-10); } .sstat { grid-column: 1; } .schev { grid-column: 2; grid-row: 1; } }

/* a sub's calls, texts and emails, newest first */
.subin { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; padding: var(--space-10) var(--space-14); background: var(--page); border-radius: var(--radius-8); }
.subin-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-12); padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); font-size: 13px; }
.subin-h .mute { color: var(--ink2); }
.subin-open { margin-left: auto; }
.tline { display: flex; flex-direction: column; }
.tl-row { display: grid; grid-template-columns: 96px 110px minmax(0, 1fr); gap: var(--space-12); padding: var(--space-10) 0; border-bottom: 1px solid var(--line2); }
.tl-row:last-child { border-bottom: 0; }
.tl-when { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; color: var(--ink2); }
.tl-ch { display: flex; align-items: flex-start; gap: var(--space-6); font-size: 13px; color: var(--ink2); }
.chi { display: inline-flex; margin-top: 2px; color: var(--mute); }
.tl-who { display: block; font-size: 12px; color: var(--mute); }
.tl-body { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; font-size: 13px; }
.tl-body > b { font-size: 13.5px; font-weight: 600; }
.tl-text { color: var(--ink2); white-space: pre-wrap; }
.tl-sum { color: var(--ink2); }
.tl-body .file { align-self: flex-start; }
.chip.sim { margin-left: var(--space-8); font-size: 11px; vertical-align: 1px; }
.filex { display: inline-block; margin-right: var(--space-6); }
.filex[open] { display: block; }
.filex > summary { list-style: none; color: var(--ink2); }
.tscript { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); padding: var(--space-10) var(--space-12); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-8); }
.tturn { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--space-10); font-size: 13px; }
.tturn b { font-weight: 600; color: var(--ink2); }
.tturn.us b { color: var(--ink); }
@media (max-width: 900px) { .tl-row { grid-template-columns: 1fr; gap: var(--space-4); } .tl-when { flex-direction: row; gap: var(--space-8); } }

/* Leveling: one card per bid (base, priced adjustments and plugs as a proportion bar, the system's .mix
   colours), its package scope item by item; a bid being leveled step by step (a presenter scene) */
.level-bid { padding: var(--space-16) var(--space-18); }
.level-bid.leveling-now { border-color: var(--chevron); }
.level-heading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); }
.level-heading:has(.level-gaps[open]) { align-items: flex-start; }
.level-heading > b:first-child { font-size: 15px; }
.level-heading > .num { margin-left: auto; font-weight: 700; }
.level-gaps > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--space-8); padding: 3px var(--space-10); font-size: 12.5px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-7); }
.level-gaps > summary:hover { background: var(--page); }
.level-gaps ul { max-width: 380px; margin: var(--space-8) 0 0; padding: var(--space-10) var(--space-12) var(--space-10) 28px; background: var(--page); border-radius: var(--radius-8); font-size: 13px; }
.level-read, .level-lump { margin-top: var(--space-10); font-size: 13px; color: var(--ink2); }
.level-read .file { margin-left: var(--space-4); }
.level-lump { color: var(--mute); }
.level-scope { list-style: none; margin: var(--space-10) 0 0; padding: 0; font-size: 13px; }
.level-scope li { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(170px, 1fr) 2fr minmax(84px, auto); gap: var(--space-12); align-items: baseline;
  padding: var(--space-6) 0; border-top: 1px solid var(--line2); }
.level-scope li.level-line > .level-scope-label { grid-column: 1 / 4; }
.level-scope li.level-line.mark-option { grid-template-columns: auto 1fr minmax(84px, auto); }
.level-scope li.level-line.mark-option > .level-scope-label { grid-column: auto; }
.level-scope small { color: var(--mute); font-size: 12.5px; overflow-wrap: anywhere; }
.level-scope-amt { text-align: right; white-space: nowrap; }
.level-scope-mark { font-size: 12px; font-weight: 600; }
.mark-included .level-scope-mark { color: var(--ok); }
.mark-excluded .level-scope-mark { color: var(--bad); }
.mark-silent .level-scope-mark { color: var(--gap); }
.mark-option .level-scope-mark, .mark-option .level-scope-amt { color: var(--mute); }
.level-track { position: relative; height: 14px; margin: var(--space-14) 0 var(--space-8); background: var(--line2); border-radius: var(--radius-4); }
.level-segment { position: absolute; top: 0; height: 100%; }
.level-segment.base { background: var(--blue); border-radius: var(--radius-4) 0 0 var(--radius-4); }
.level-segment.priced { background: var(--blue-soft); }
.level-segment.estimate { background: repeating-linear-gradient(135deg, var(--blue-soft) 0 4px, var(--blue-bg) 4px 8px); transition: width .7s ease; }
.level-budget { position: absolute; top: -4px; height: 22px; border-left: 2px solid var(--ink); }
.level-legend { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-16); font-size: 12.5px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.level-plug { margin-top: var(--space-10); font-size: 13px; }
.level-plug > p, .level-plug > ul { margin: var(--space-6) 0; }
.level-scope li > .level-plug { grid-column: 1 / -1; margin-top: 0; }
.level-status { margin: 0 0 var(--space-10); min-height: 1.4em; font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.level-bid > .btn { margin-top: var(--space-10); }
.stage-hide { visibility: hidden; opacity: 0; }
.stage-in { animation: stage-in .45s ease; }
@keyframes stage-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .stage-in { animation: none; } .level-segment.estimate { transition: none; } }
@media (max-width: 600px) {
  .level-bid { padding: var(--space-14); } .level-heading > .num { margin-left: 0; }
  .level-scope li { grid-template-columns: 1fr 1fr auto; } .level-scope li > small { grid-column: 1 / -1; grid-row: 2; }
  .level-scope li.level-line > .level-scope-label { grid-column: 1 / 3; } .level-scope li.level-line.mark-option > .level-scope-label { grid-column: auto; } }

/* the full bid comparison (a Table): the budget column on the page grey, section rows, cells to check */
.cmp { table-layout: fixed; min-width: 640px; }
.cmp th { white-space: normal; vertical-align: bottom; }
.cmp th:first-child { width: 230px; }
.grid td.sec { padding-top: var(--space-16); border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; color: var(--mute); }
.grid .bud { background: var(--page); }
.grid .chk { background: var(--gap-bg); color: var(--gap); }
.grid .tot td { font-weight: 700; border-top: 1px solid var(--line); }
.fullcmp[open] > summary { margin-bottom: var(--space-10); }
.fullcmp > section { display: flex; flex-direction: column; gap: var(--space-8); }

/* the past-job estimate and the cost breakdown, the scope allowance (forms in .fld's look) */
.trade-history-cost { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); padding: var(--space-6) var(--space-10); border-left: 3px solid var(--line); }
.trade-history-cost small { display: block; color: var(--mute); font-size: 12.5px; }
.trade-history-evidence { max-width: 420px; }
.trade-history-evidence p { margin: var(--space-6) 0; font-size: 12.5px; }
.evid { margin: var(--space-6) 0 0; padding-left: var(--space-18); font-size: 13px; }
.evidence-note { font-size: 12.5px; color: var(--ink2); }
p.evidence-note { padding: var(--space-10) var(--space-12); background: var(--page); border-radius: var(--radius-8); font-weight: 500; }
.scope-quantity { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); font-size: 12.5px; color: var(--mute); text-transform: capitalize; }
.scope-quantity input { width: 90px; }
.component-cost-row { padding: var(--space-12) 0; border-top: 1px solid var(--line2); }
.component-cost-row h3 { margin: 0 0 var(--space-8); }
.component-cost-fields, .level-override, .history-fix { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-10); }
.level-override, .history-fix { margin-top: var(--space-10); }
.component-cost-fields label, .level-override label, .history-fix label, .scope-allowance label { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; font-size: 12.5px; color: var(--mute); }
.component-cost-fields label:has(input[type=checkbox]) { flex-direction: row; align-items: center; align-self: center; color: var(--ink2); }
.component-cost-fields input[type=number], .scope-allowance input[type=number] { width: 120px; }
.component-cost-fields input[type=text] { width: 280px; max-width: 100%; }
.component-cost-fields select { max-width: 300px; }
.level-override [role=status], .history-fix [role=status] { flex-basis: 100%; }
.component-total { margin: var(--space-8) 0; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.component-gaps { margin: var(--space-10) 0 var(--space-16); }
.cost-category-totals { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-18); padding: var(--space-8) 0; font-weight: 600; }
.cost-category-section > h2 { margin: var(--space-18) 0 var(--space-8); font-size: 16px; }
.new-cost-item { margin-top: var(--space-18); padding: var(--space-14) var(--space-16); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-10); }
.new-cost-item h3 { margin: 0 0 var(--space-10); }
.cost-comparisons, .component-evidence { margin-top: var(--space-12); font-size: 13px; }
.scope-allowance fieldset { padding: var(--space-12) var(--space-14); border: 1px solid var(--line); border-radius: var(--radius-10); }
.scope-allowance legend { padding: 0 var(--space-4); font-weight: 600; color: var(--ink2); }
.scope-allowance fieldset input { width: 180px; }
.scope-allowance textarea { width: 100%; min-height: 90px; }

/* finding more subs: the directory search and each candidate as a card */
.directory-search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.directory-search input[type=search] { flex: 1 1 260px; min-width: 0; }
.directory-search label { display: flex; align-items: center; gap: var(--space-6); font-size: 13px; color: var(--ink2); }
.evidence-card { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; padding: var(--space-14) var(--space-16); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-10); }
.evidence-card p { overflow-wrap: anywhere; }
.evidence-card h3 { font-size: 15px; }
.candidate { margin-top: var(--space-10); }
.directory-evidence { padding: var(--space-10) 0; border-top: 1px solid var(--line2); font-size: 13px; }
.directory-evidence dt { margin-top: var(--space-6); font-weight: 600; }
.directory-evidence dd { margin-left: var(--space-14); }
.directory-evidence small { display: block; color: var(--mute); }
.source-text { font-size: 12.5px; }

/* the budget tab: the jobs behind a suggestion, a past-job check answered in place */
.detail { margin-top: var(--space-6); font-size: 13px; color: var(--ink2); }
td.r .detail > summary { margin-left: auto; }
.history-check { margin: var(--space-8) 0; padding: var(--space-14) var(--space-16); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-10); }
.history-check h3 { margin: 0 0 var(--space-6); }
.history-peer { margin: var(--space-10) 0; font-size: 13px; }
.history-peer-track { max-width: 560px; height: 8px; margin-top: var(--space-4); background: var(--line2); border-radius: var(--radius-4); overflow: hidden; }
.history-peer-track span { display: block; height: 100%; background: var(--blue-soft); }
.history-source { font-size: 12.5px; color: var(--mute); overflow-wrap: anywhere; }
.history-answer { font-size: 13px; font-weight: 600; }

/* the invite list: a card per trade, each firm a checkbox you cross off and a name that opens it */
.card .kk-head { margin: 0 0 var(--space-6); font-size: 15px; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: -.01em; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-2) var(--space-24); }
.kk { display: flex; align-items: center; gap: var(--space-10); min-width: 0; padding: 3px 0; font-size: 14px; }
.kk-on, .kk-add, .todo .box { flex: none; width: 18px; height: 18px; padding: 0; border: 1.5px solid var(--chevron); border-radius: var(--radius-4); background: var(--card);
  color: var(--on-blue); font: 700 12px/15px var(--font-body); text-align: center; cursor: pointer; }
.kk-on[aria-pressed="true"], .todo .box[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); }
.kk-on:hover, .kk-add:hover, .todo button.box:hover { border-color: var(--blue); }
.kk-add { color: var(--mute); border-style: dashed; }
.kk-name { min-width: 0; padding: 0; border: 0; background: none; color: var(--blue-d); font: 500 14px var(--font-body); text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.kk-name:hover { text-decoration: underline; }
.kk.off .kk-name { color: var(--mute); text-decoration: line-through; }
.kk.pool .kk-name { font-weight: 400; }
.pool-line { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--line2); }
.pool-line > summary { font-size: 13px; }
.pool-list { margin-top: var(--space-6); }
/* the sub detail page's Invite / Don't invite, for the trade it was opened from (the invite list's own checkbox) */
.sd-invite { display: flex; align-items: center; gap: var(--space-12); margin-top: var(--space-12); }
.sd-invite-state { display: inline-flex; align-items: center; gap: var(--space-8); font-size: 14px; color: var(--ink2); }
.sd-invite-state .kk-on { cursor: default; }
.sd-invite .btn { margin-left: auto; }
/* one firm a row, its badges in columns so firms compare down the list (Tim, 2026-11-11) */
.checks.kk-rows { display: flex; flex-direction: column; gap: 0; }
.kk-rows .kk { display: grid; grid-template-columns: 18px minmax(0, 1fr) 62px 50px 88px 108px 82px; gap: var(--space-10); padding: 5px 0; border-top: 1px solid var(--line2); }
/* the rule's line above the list, a trade's Read the invite, a left-off firm's reason under its name (Tim, 2026-11-12) */
.kk-rule { margin: 0 0 var(--space-12); font-size: 13px; }
.kk-headline { display: flex; align-items: baseline; gap: var(--space-12); }
.kk-headline .kk-read { margin-left: auto; font-size: 13px; }
.kk-invite > .mute + .mute { margin-bottom: var(--space-8); }
.kk-invite { margin: 0 0 var(--space-10); padding: var(--space-8) var(--space-12); background: var(--page); border-radius: var(--radius-8); font-size: 13.5px; white-space: pre-wrap; }
/* an unsent invite edited in place (Tim, 2026-11-12): quiet links under it, the fields in its own type */
.inv-acts { display: flex; align-items: baseline; gap: var(--space-12); margin-top: var(--space-8); white-space: normal; font-size: 13px; }
.inv-subj { margin-bottom: var(--space-8); }
.inv-edit { display: flex; flex-direction: column; gap: var(--space-6); white-space: normal; }
.inv-edit .inv-subject, .inv-edit .inv-body { width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-7); padding: var(--space-6) var(--space-8); }
.inv-edit .inv-body { resize: vertical; line-height: 1.45; }
.kk-who { display: flex; flex-direction: column; min-width: 0; }
.kk-why { font-size: 12px; color: var(--mute); }
.chip.firm-tag.stale { background: transparent; color: var(--mute); box-shadow: inset 0 0 0 1px var(--line); }
.kk-rows .kk:first-child { border-top: 0; }
.kk-badge { min-width: 0; }
@media (max-width: 900px) {
  .kk-rows .kk { grid-template-columns: 18px minmax(0, 1fr); row-gap: var(--space-4); }
  .kk-rows .kk-badge { grid-column: 2; display: inline; }
  .kk-rows .kk-badge:empty { display: none; }
}

/* Waiting on you: a card per decision, its approve button, the sub inline, the drafts and the demo's suggestion */
.wlist { display: flex; flex-direction: column; gap: var(--space-10); }
.wrow { padding: var(--space-14) var(--space-16); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-10); }
.more .wrow { padding: var(--space-10) 0; border: 0; border-top: 1px solid var(--line2); border-radius: 0; }
.whead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.wt { margin-top: var(--space-6); font-size: 15px; font-weight: 600; line-height: 1.4; }
.wt.clamp { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.wlinks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-14); margin-top: var(--space-8); font-size: 13px; }
.wlinks .linkbtn { padding: var(--space-2) 0; }
.wlinks button[aria-expanded="true"] { font-weight: 600; }
.subin-chev { display: inline-block; margin-left: 2px; transition: transform .12s; }
.wlinks button[aria-expanded="true"] .subin-chev { transform: rotate(90deg); }
.wrow > div > .subin { margin-top: var(--space-10); }
.wmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-14); margin-top: var(--space-10); font-size: 13px; color: var(--ink2); }
.wmeta .linkbtn { padding-left: 0; }
.opts { margin: var(--space-6) 0 0; padding-left: var(--space-18); font-size: 13px; color: var(--ink2); }
.drafts { display: flex; flex-direction: column; gap: var(--space-6); max-width: 860px; margin-top: var(--space-8); }
.draftx, .sugg, .draft { padding: var(--space-8) var(--space-12); background: var(--page); border-radius: var(--radius-8); }
.draftx > summary { font-size: 13px; color: var(--ink); font-weight: 400; }
.draftx .dhead b { font-weight: 600; }
.draftx .dbody { margin-top: var(--space-6); font-size: 13.5px; white-space: pre-wrap; }
/* who a card's messages go to: a firm a row, its name opens it, Read opens its message (Tim, 2026-11-11) */
.sendlist { display: flex; flex-direction: column; max-width: 860px; margin-top: var(--space-6); }
.sendrow { padding: var(--space-4) 0; border-top: 1px solid var(--line2); }
.sendrow:first-child { border-top: 0; }
.sendline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-10); font-size: 13.5px; }
.sendline .kk-name { font-size: 13.5px; }
.sendline .linkbtn { margin-left: auto; font-size: 13px; }
.sendmore { align-self: flex-start; margin-top: var(--space-6); font-size: 13px; }
.sendrow .dbody { margin: var(--space-6) 0 var(--space-4); padding: var(--space-8) var(--space-12); background: var(--page); border-radius: var(--radius-8); font-size: 13.5px; white-space: pre-wrap; }
.sugg { display: flex; flex-direction: column; gap: var(--space-4); max-width: 860px; margin-top: var(--space-8); }
.sugg-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); }
.sugg-why, .draft .to { font-size: 12.5px; color: var(--mute); }
.draft { margin-top: var(--space-8); }

/* To-dos: one row per to-do, a checkbox to tick it done */
.todo { display: flex; align-items: center; gap: var(--space-12); margin-top: var(--space-6); padding: var(--space-10) var(--space-14); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-10); }
.todo button.box { position: relative; }
.todo button.box::after { content: ""; position: absolute; inset: -12px; }
.todo .tt { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.todo .tt small { font-size: 12.5px; color: var(--mute); }
.todo.is-done .tt > span { text-decoration: line-through; color: var(--mute); }
.done-list > div { margin-top: var(--space-8); }

/* a sub's own page: who we know there; the job's messages */
.people { display: flex; flex-direction: column; gap: var(--space-8); min-width: 260px; max-width: 440px; font-size: 13px; }
.person { display: flex; flex-direction: column; gap: var(--space-2); }
.person.gone { opacity: .6; }
.person.gone b { text-decoration: line-through; }
.pmeta { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); font-size: 12.5px; color: var(--mute); overflow-wrap: anywhere; }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.msglist { padding: 0 var(--space-14); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-10); }
.msglist .row { display: grid; grid-template-columns: 150px 40px 180px 1fr; gap: var(--space-10); align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line2); font-size: 13px; cursor: pointer; }
.msglist .row:hover { background: var(--blue-bg); }
.msglist .row .d { color: var(--mute); font-variant-numeric: tabular-nums; }
.msglist .row .dir { font-size: 11px; font-weight: 600; letter-spacing: .05em; color: var(--mute); }
.msglist .row .pv { color: var(--ink2); }
.msglist .full { padding: var(--space-6) 0 var(--space-12); }
@media (max-width: 760px) { .msglist .row { grid-template-columns: 90px 40px 1fr; } .msglist .row .pv { grid-column: 1 / -1; } }

/* the firm window: the subs database's company page (the reference app's additions to Card, FactRows, RowLink) */
.who-name { padding-top: var(--space-4); padding-bottom: var(--space-4); margin-bottom: var(--space-8); }
.who-name.rowlink { margin-left: -8px; margin-right: -8px; padding-left: var(--space-8); }
.who-name.rowlink > b, .recs.callto > .rowlink .kvv { color: var(--blue-d); font-weight: 600; }
.who-name.rowlink:hover > b, .recs.callto > .rowlink:hover .kvv > span:not(.dim) { text-decoration: underline; }
.recs > .rowlink .mute { color: var(--mute); font-weight: 400; }
.recs > .rowlink > span:first-child > .mute { display: inline-block; width: 100%; }
.recs.callto li { justify-content: flex-start; gap: var(--space-14); }
.recs.callto .kl { flex: none; width: 62px; color: var(--mute); }
.recs.callto .kvv { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; text-align: left; overflow-wrap: anywhere; }
.recs.callto > .rowlink > span:first-child, .recs.callto > .rowlink:hover > span:first-child { color: var(--mute); font-weight: 400; text-decoration: none; }
.pad .scroll .grid th:first-child, .pad .scroll .grid td:first-child { padding-left: 0; }
@media (max-width: 520px) { .pad { padding: var(--space-14); } .stat { padding: var(--space-10) var(--space-14); } }

/* the chat: the system's Chat as a column beside the page; collapsed, a bar that brings it back */
.chat { flex: 0 0 var(--chat-width); width: var(--chat-width); height: 100%; min-width: 0; z-index: 16; }
body.chat-off .chat { display: none; }
.chat__msgs > * { flex-shrink: 0; }   /* one continuous conversation: a reply never squeezes to fit (Tim, 2026-10-05) */
.chat__me { white-space: pre-wrap; }
.chat__bot ul, .chat__bot ol { margin: 0 0 var(--space-8); padding-left: var(--space-18); }
.chat__bot table { display: block; overflow-x: auto; margin: var(--space-4) 0 var(--space-8); border-collapse: collapse; font-size: 12.5px; }
.chat__bot th, .chat__bot td { padding: 5px 7px; border-top: 1px solid var(--line2); text-align: left; vertical-align: top; }
.chat__bot th { border-top: 0; font-weight: 600; color: var(--mute); }
/* a reply's table fits the panel: cells wrap at spaces only (never inside a word or an amount), and a
   table wider than the panel scrolls sideways (rehearsal 2026-11-12: "$781,0 00", "Irrigati on") */
.chat__bot table { max-width: 100%; }
.chat__bot th, .chat__bot td { overflow-wrap: normal; word-break: normal; hyphens: none; }
.chat__bot .amt { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* a letter shown in the chat: set apart, its own line breaks kept */
.chat__bot blockquote { margin: var(--space-4) 0 var(--space-8); padding: var(--space-8) var(--space-12); border-left: 3px solid var(--line); background: var(--page); }
.chat__bot blockquote p { white-space: pre-line; }
.chat__bot blockquote p:last-child { margin-bottom: 0; }
.chat__bot pre { margin: var(--space-4) 0 var(--space-8); font: 12px/1.5 var(--font-mono); background: var(--page); border: 0; }
.chat__compose { flex-wrap: wrap; }
.chat__compose textarea { max-height: 240px; overflow-y: auto; }
.wacts { display: flex; align-items: center; gap: var(--space-12); }   /* the thin warning: Acknowledge, then the chat */
.chat__compose textarea.suggested { color: var(--mute); }   /* the page's suggested message: muted, replaced by typing */
.chat-bar { display: none; }
body.chat-off .chat-bar { position: fixed; right: var(--space-24); bottom: calc(var(--strip-h, 0px) + var(--space-16)); z-index: 40; display: flex; align-items: center; gap: var(--space-10);
  width: 340px; max-width: calc(100vw - 32px); padding: 11px var(--space-14); background: var(--card); color: var(--ink2); border: 1px solid var(--line);
  border-radius: var(--radius-10); box-shadow: var(--shadow-popover); font: 14px var(--font-body); text-align: left; cursor: pointer; }
.chat-bar span { flex: 1; }
.chat-bar svg { flex: none; color: var(--blue); }
.chat-bar:hover { color: var(--ink); border-color: var(--blue-line); }

/* the demo strip: the clock, the presenter's Next, Back and Restart; the rest behind the arrow. Quiet: a white
   bar along the foot of the page column, buttons in the system's quiet style */
.strip { position: sticky; bottom: 0; z-index: 15; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8) var(--space-16);
  background: var(--card); border-top: 1px solid var(--line); color: var(--ink2); font-size: 13px; }
.strip.busy { opacity: .85; }
.strip.presenting { z-index: 19; }
.strip.presenting .strip-tag { display: none; }
.strip-row, .strip-present, .tools-slot .strip-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); }
.strip-present { flex: 1 1 0; }
.strip-more { width: 30px; padding-left: 0; padding-right: 0; text-align: center; font-size: 10px; }
.strip-time { font-weight: 600; color: var(--ink); white-space: nowrap; }
.strip-hour { font-weight: 500; color: var(--mute); }
.strip-tools { display: contents; }
.tools-slot { grid-column: 1 / -1; padding-bottom: var(--space-6); }
.tools-slot .strip-next { margin-left: 0; }
.strip-jump, .strip-confirm, .p-end { display: inline-flex; align-items: center; gap: var(--space-6); }
.strip-jump input { padding: 3px var(--space-8); font-size: 13px; }
.strip-confirm { color: var(--ink); }
.strip-next { margin-left: auto; color: var(--mute); }
#p-next { font-weight: 600; }
.p-wrap { position: relative; display: inline-flex; }
.p-note { position: absolute; left: 0; bottom: calc(100% + 8px); width: max-content; max-width: min(420px, 80vw); padding: var(--space-6) var(--space-10); background: var(--card);
  color: var(--ink2); border: 1px solid var(--line); border-radius: var(--radius-8); box-shadow: var(--shadow-popover); font-size: 12.5px; line-height: 1.4; pointer-events: none; visibility: hidden; }
.p-wrap:hover .p-note, #p-next:focus-visible + .p-note { visibility: visible; }
.p-note:empty { display: none; }
.p-wrap.p-quiet .p-note { visibility: hidden; }
.p-end { margin-left: auto; white-space: nowrap; }
.p-pos { font-size: 12px; color: var(--mute); }
.p-end .btn.quiet { color: var(--ink2); }
.strip-note { font-size: 12.5px; color: var(--ink2); }
.strip-note.bad { color: var(--bad); }
.strip-note.working { display: flex; align-items: center; gap: var(--space-8); }
.strip-note.working .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: gc-pulse 1.2s infinite; }
.strip-panel { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-8) var(--space-24); max-height: 40vh; padding: var(--space-4) 0 var(--space-8); border-bottom: 1px solid var(--line2); }
.strip-panel > div { min-height: 0; max-height: 38vh; overflow-y: auto; }
.strip-panel > .tools-slot { max-height: none; overflow: visible; }
.strip-h { padding-bottom: var(--space-4); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; color: var(--mute); }
.strip-line { display: grid; grid-template-columns: auto auto 1fr; gap: var(--space-10); align-items: baseline; padding: var(--space-4) 0; border-top: 1px solid var(--line2); font-size: 12.5px; }
#subs .strip-line, #coming .strip-line.nojob { grid-template-columns: auto 1fr; }
.strip-line .w { white-space: nowrap; color: var(--mute); font-variant-numeric: tabular-nums; }
.strip-line b { font: 600 11px var(--font-mono); color: var(--ink); }
.strip-line.big { color: var(--ink); font-weight: 500; }
.day-feed { display: flex; flex-direction: column; font-size: 12.5px; }
.feed-line { display: grid; grid-template-columns: 42px 118px minmax(0, 1fr); gap: var(--space-8); align-items: baseline; padding: 3px 0; border-top: 1px solid var(--line2); }
.feed-line .ft { font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
.feed-line .fk { font-size: 11px; font-weight: 600; letter-spacing: .05em; color: var(--mute); }
.feed-line.k-done .fk { color: var(--ok); }
.feed-line.k-error .fk, .feed-line.k-error .fx { color: var(--bad); }
.feed-line.running .fx { color: var(--mute); font-style: italic; }
.spin { display: inline-block; justify-self: start; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--blue-bg); border-top-color: var(--blue); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin, .strip-note.working .dot { animation: none; } }
.starts { display: flex; flex-direction: column; gap: var(--space-4); max-height: 40vh; overflow-y: auto; padding: var(--space-6) 0 var(--space-8); border-bottom: 1px solid var(--line2); }
.start-opt { display: flex; align-items: baseline; gap: var(--space-12); padding: 7px var(--space-10); background: var(--card); color: var(--ink2); border: 1px solid var(--line);
  border-radius: var(--radius-7); font: 13px var(--font-body); text-align: left; cursor: pointer; }
.start-opt:hover { background: var(--blue-bg); border-color: var(--blue-line); }
.start-opt b { font-weight: 600; color: var(--blue-d); white-space: nowrap; }

/* a phone: the chat full screen from a bar along the bottom (as the reference app), the strip compact */
@media (max-width: 900px) {
  .chat { position: fixed; inset: 0; width: auto; height: auto; display: none; z-index: 50; }
  body.chat-open .chat { display: flex; }
  body.chat-off .chat-bar { left: 0; right: 0; bottom: 0; width: auto; max-width: none; min-height: 52px; padding: 0 var(--space-18); background: var(--blue); color: var(--on-blue);
    border: 0; border-radius: 0; box-shadow: none; }
  body.chat-off .chat-bar svg { color: var(--on-blue); }
  body.chat-off .maincol { margin-bottom: 52px; }
  .toast { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .strip { max-height: 45vh; overflow: auto; padding: var(--space-8) var(--space-12); }
  .strip-panel { grid-template-columns: 1fr; }
  .strip-next { display: none; }
}
@media (max-width: 760px) { .top .who { display: none; } }
.pills:empty { display: none; }
@media (max-width: 600px) { .pills { width: 100%; } .pills button { flex: 1 1 auto; } }