/* ShopProp 3.0, phase 1 (frontend seat). Everything here sits on brand.css
   tokens only: radius 0, no shadows, Cormorant display + Poppins UI. Built from
   the accepted mockups in docs/phase1/design (360px first, then desktop).
   Motion only where it answers the user (streaming caret, mic pulse, one slow
   skeleton fade), all of it off under prefers-reduced-motion. */

/* ── Header ──────────────────────────────────────────────────────────────── */
.nav.app-nav { flex-wrap: nowrap; }
.nav.app-nav .brand { min-height: 44px; min-width: 44px; }   /* the S|P mark alone is 32px wide: the link stays a 44px target */
/* the official logo image (views/layout.js brandLogo): the full logo 26px tall from 641px, the S|P mark 24px under it */
.nav.app-nav .brand-pic { display: block; line-height: 0; }
.nav.app-nav .brand-logo { display: block; height: 26px; width: auto; }
/* the logo file carries 10% of clear space at its left edge: pulled back so the letters start on the page's own gutter */
@media (min-width: 641px) { .nav.app-nav .brand-logo { margin-left: -10px; } .signin-mark .brand-logo { margin-left: -13px; } }
.nav.app-nav .nav-links { display: flex; align-items: center; gap: 18px; width: auto; flex-wrap: nowrap; }
.nav.app-nav a.who { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; text-decoration: none; }
.nav.app-nav a.who:hover { color: var(--heading); text-decoration: underline; text-underline-offset: 3px; }
.nav.app-nav .who { color: var(--secondary); font-size: 13px; letter-spacing: 0; text-transform: none; margin-left: 0; white-space: nowrap; }
.nav.app-nav .signout-form { display: inline-flex; margin: 0; }
.nav.app-nav .signout {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 4px;
  margin: 0; background: none; border: 0; cursor: pointer; font-family: var(--font-sans);
  color: var(--heading); font-size: 13px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase;
}
.nav.app-nav .signout:hover { color: var(--primary); }

/* ── Page column ─────────────────────────────────────────────────────────── */
.page { max-width: 760px; margin: 0 auto; padding: 28px 20px 60px; width: 100%; }
.page.wide { max-width: 1120px; padding-top: 20px; }
.app-foot { max-width: 760px; margin: 0 auto; padding: 0 20px 28px; }
.app-foot p { margin: 0; }
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 14px; margin-bottom: 18px; }
.page-head h1 { font-size: 36px; margin: 0; }
.page-head .count { font-size: 13px; color: var(--secondary); white-space: nowrap; }
.sub { font-size: 13px; color: var(--secondary); margin-bottom: 8px; }
.back { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: 13px; color: var(--secondary); gap: 8px; }
.back:hover { color: var(--heading); }
.foot-line { font-size: 12px; color: var(--body); margin-top: 22px; line-height: 1.5; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.linklike { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
table.list.ops th { width: 40%; text-transform: none; letter-spacing: 0; font-family: var(--font-sans); }

/* ── Sign in ─────────────────────────────────────────────────────────────── */
/* the sign-in page fills the screen as a column so the footer and the wire-fraud notice sit at the bottom of the
   FIRST screen (Rob 2026-09-20), never below the fold; a short phone simply scrolls */
body.signin { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.signin > main { flex: 1 0 auto; }
body.signin > .app-foot, body.signin > .sd-wire-notice { flex: 0 0 auto; width: 100%; }
.signin-page { display: flex; flex-direction: column; }
body.signin > .app-foot { max-width: 440px; padding: 0 20px 20px; }
.signin-wrap { max-width: 440px; margin: 0 auto; padding: 56px 20px 40px; width: 100%; flex: 1; }
.signin-mark { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.signin-mark .brand-pic { display: block; line-height: 0; }
.signin-mark .brand-logo { display: block; height: 32px; width: auto; }
.signin-wrap h1 { font-size: 40px; margin-bottom: 8px; }
.signin-wrap .tag { font-size: 13px; color: var(--body); letter-spacing: 0.2px; margin-bottom: 32px; }
.signin-wrap .btn { min-height: 48px; }
.signin-wrap .field input { min-height: 48px; border-color: var(--muted); color: var(--heading); font-size: 16px; }
.signin-wrap .field input:hover { border-color: var(--secondary); }
.signin-wrap .field input:focus, .signin-wrap .field input:focus-visible { border-color: var(--heading); outline: 1px solid var(--heading); outline-offset: 0; }
.signin-wrap .field input[aria-invalid="true"] { border-color: var(--danger); }
.signin-wrap .field input[aria-invalid="true"]:focus { outline-color: var(--danger); }
.pw-box { position: relative; }
.pw-box input { padding-right: 76px; }
.pw-show { position: absolute; top: 1px; right: 1px; bottom: 1px; min-width: 64px; min-height: 44px; padding: 0 14px; border: 0; background: transparent; color: var(--body); font: 500 11px/1 var(--font-sans); letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; }
.pw-show:hover { color: var(--heading); }
.pw-show:focus-visible { outline: 2px solid var(--heading); outline-offset: -3px; }
.signin-wrap .btn { transition: background-color .15s ease, border-color .15s ease; }
.signin-wrap .btn:hover { background: var(--heading); border-color: var(--heading); }
.signin-wrap .btn:active { background: var(--heading); border-color: var(--gold); }
.signin-wrap .btn[aria-busy="true"], .signin-wrap .btn:disabled { background: var(--secondary); border-color: var(--secondary); color: var(--white); cursor: progress; }
.preview-note { margin-top: 6px; color: var(--secondary); }
.test-note { font-size: 12px; color: var(--body); margin-top: 16px; line-height: 1.5; }
.err { display: block; font-size: 13px; color: var(--danger); margin: -6px 0 16px; line-height: 1.5; }
.err::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--danger); margin-right: 8px; vertical-align: 2px; }
.field input[aria-invalid="true"] { border-color: var(--danger); }

/* ── Deals list ──────────────────────────────────────────────────────────── */
.deal-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--divider); }
.deal { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 16px 4px; border-bottom: 1px solid var(--divider); color: inherit; text-decoration: none; transition: background-color .15s ease; }
.deal:hover { background: var(--bg-alt-1); color: inherit; }
.deal .body { flex: 1; min-width: 0; }
.deal .addr { font-family: var(--font-display); font-size: 22px; color: var(--heading); line-height: 1.2; overflow-wrap: anywhere; }
.deal .meta { font-size: 13px; color: var(--secondary); margin-top: 4px; }
.deal .meta .stage { color: var(--body); }
.deal .pills { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.deal .go { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 22px; }

/* ── Record header (compact, one row of chrome above the workspace) ─────── */
.rec-head { margin: 0 0 12px; }
.rec-top { display: flex; align-items: center; gap: 14px; min-height: 44px; }
.rec-top .eyebrow { display: inline-flex; align-items: center; }
.rec-top .eyebrow::before { content: ""; display: inline-block; width: 1px; height: 12px; background: var(--divider); margin-right: 14px; }
.rec-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.rec-title h1 { font-size: 30px; margin: 0; overflow-wrap: anywhere; line-height: 1.15; }
.rec-head .status { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; color: var(--secondary); min-height: 44px; }
.rec-head .status .new-request { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--heading); border-color: var(--heading); }
.rec-head .status .new-request:hover { background: var(--heading); color: var(--white); }

/* Record layout 2: ask box, then the workspace of three panels (ONE DOM copy
   of everything). Phone = tab bar + one panel at a time (public/js/record.js;
   all panels stacked without JS). Desktop (≥1000px) = a grid that fits the
   viewport, each panel scrolling on its own, no page scroll in the normal
   case (body.rec is a 100vh column; .page scrolls only when it must). */
.record { display: block; min-width: 0; }
.rec-tabs { display: none; }
.ws { display: grid; grid-template-columns: minmax(0, 1fr); }
.ws .col { display: contents; }
.panel { min-width: 0; margin-top: 28px; }
.panel .ph h2 { font-size: 22px; margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.panel .n { font-family: var(--font-sans); font-size: 12px; color: var(--secondary); font-weight: 400; letter-spacing: 0.2px; white-space: nowrap; }
.panel .lead { font-size: 12px; color: var(--secondary); margin: 2px 0 0; line-height: 1.5; }
.panel .pb { padding-top: 10px; }
.panel .pb > .entries:first-child, .panel .pb > .errline:first-child { margin-top: 0; }
.sub-h { font-family: var(--font-display); font-weight: 400; font-size: 19px; color: var(--heading); margin: 22px 0 0; display: flex; align-items: baseline; gap: 10px; line-height: 1.2; }
.sub-h + .lead { margin-bottom: 8px; }
#messages { order: 1; } #checklist { order: 2; } #documents { order: 3; } #deal { order: 4; }
.filter-line { font-size: 12px; color: var(--heading); margin: 6px 0 0; }
.filter-line a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--heading); text-decoration: underline; text-underline-offset: 3px; }
.filter-empty, .all-done { font-size: 13px; color: var(--secondary); margin: 14px 0 0; }

@media (max-width: 999px) {
  .rec-tabs { display: flex; position: sticky; top: 0; z-index: 3; background: var(--white); margin: 14px 0 0; border: 1px solid var(--divider); }
  .rec-tabs .tab { flex: 1 1 0; min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--heading); border-right: 1px solid var(--divider); text-align: center; }
  .rec-tabs .tab:last-child { border-right: 0; }
  .rec-tabs .tab:hover { background: var(--bg-alt-1); color: var(--heading); }
  .rec-tabs .tab[aria-current] { background: var(--heading); color: var(--white); }
  .record.tabbed .panel { display: none; margin-top: 18px; }
  .record.tabbed.show-messages #messages, .record.tabbed.show-checklist #checklist,
  .record.tabbed.show-documents #documents, .record.tabbed.show-deal #deal { display: block; }
}

@media (min-width: 1000px) {
  body.rec { height: 100vh; display: flex; flex-direction: column; }
  body.rec .app-nav, body.rec .app-foot, body.rec .sd-wire-notice { flex: 0 0 auto; }
  body.rec .nav.app-nav { padding-top: 12px; padding-bottom: 12px; }
  body.rec .page.wide { max-width: 1400px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 8px 20px 10px; overflow: auto; }
  body.rec .rec-head { margin-bottom: 8px; }
  body.rec .app-foot { padding-bottom: 6px; }
  body.rec .record { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .ws { grid-template-columns: 260px minmax(0, 1fr) 340px; grid-template-rows: minmax(0, 1fr); column-gap: 16px; flex: 1 1 0; min-height: 400px; margin-top: 10px; }
  .ws .col { display: block; min-height: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--divider); background: var(--white); }
  .panel { margin-top: 0; }
  .panel + .panel { border-top: 1px solid var(--divider); margin-top: 8px; }
  .panel .ph { position: sticky; top: 0; z-index: 1; background: var(--white); padding: 12px 16px 8px; border-bottom: 1px solid var(--divider); }
  .panel .pb { padding: 10px 16px 16px; }
  .panel .ph h2 { font-size: 21px; }
}
@media (min-width: 1200px) {
  .ws { grid-template-columns: 280px minmax(0, 1fr) 380px; column-gap: 20px; }
}

/* ── The one bold element: the ask box ───────────────────────────────────── */
/* THE COMPOSER IS A DOCK, NOT A BOX IN A BOX (pass 18): the pale gold ground with ONE gold hairline along its top edge and no
   other edge; the textarea inside keeps its white ground and its own 1px line. Every width. */
.askbox { border: 0; border-top: 1px solid var(--gold); background: var(--gold-bg); padding: 18px 18px 14px; }
.askbox .eyebrow { display: block; margin-bottom: 8px; }
.askbox textarea { display: block; width: 100%; min-height: 60px; max-height: 160px; resize: none; padding: 13px 14px; border: 1px solid var(--divider); background: var(--white); color: var(--body); font: inherit; font-size: 16px; line-height: 1.5; border-radius: 0; overflow-y: auto; }
.askbox textarea:focus { outline: none; border-color: var(--gold); }
.askbox textarea::placeholder { color: var(--secondary); }
.ask-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ask-actions .spacer { flex: 1; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--secondary); background: transparent; color: var(--heading); font-size: 18px; cursor: pointer; flex: 0 0 auto; font-family: inherit; padding: 0; }
.iconbtn:hover { border-color: var(--heading); }
.iconbtn[disabled] { opacity: .45; cursor: default; }
.iconbtn.on { border-color: var(--gold); color: var(--gold); animation: pulse 1.4s ease-in-out infinite; }   /* listening: a gold line icon and the pulse (pass 18) */
@keyframes pulse { 50% { background: var(--danger-bg); } }
.ask-actions .btn { min-height: 44px; padding: 12px 24px; }
.sugg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sugg button { background: var(--white); border: 1px solid var(--gold-soft); color: var(--heading); padding: 10px 12px; font: inherit; font-size: 13px; min-height: 44px; text-align: left; cursor: pointer; line-height: 1.3; }
.sugg button:hover { border-color: var(--gold); }
.ask-note { font-size: 12px; color: var(--secondary); margin: 12px 0 0; line-height: 1.5; }
@media (min-width: 1000px) {
  .askbox { padding: 12px 18px 12px; }
  .askbox form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
  .askbox textarea { flex: 1 1 320px; width: auto; min-height: 44px; height: 44px; padding: 10px 14px; }
  .askbox .ask-actions { margin-top: 0; flex: 0 0 auto; }
  .askbox .listen-line, .askbox .count { flex-basis: 100%; padding: 0; }
  .ask-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
  .ask-foot .sugg { margin-top: 0; }
  .ask-foot .ask-note { margin: 0; flex: 1 1 260px; text-align: right; }
}
.askbox.off textarea, .askbox.capped textarea { background: var(--bg-alt-1); color: var(--muted); }
.askbox .off-line { margin: 12px 0 0; padding: 0; border: 0; background: none; }

/* ── Next due strip (deterministic, computed in code) ────────────────────── */
.next-due { display: flex; gap: 2px 12px; align-items: baseline; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); margin-top: 12px; }
.next-due .k { font-size: 11px; color: var(--secondary); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 500; white-space: nowrap; flex-basis: 100%; }
.next-due .v { color: var(--heading); font-weight: 500; line-height: 1.4; }
.next-due .src { display: inline; font-size: 12px; color: var(--body); margin: 0; padding: 0; border: 0; }

/* ── Sections ────────────────────────────────────────────────────────────── */
.sec { margin-top: 36px; min-width: 0; }
.sec h2 { font-size: 26px; margin: 0 0 2px; }
.sec .lead { font-size: 13px; color: var(--secondary); margin: 0 0 12px; }

/* Stage rail: a real sequence, so it gets markers. */
.stage-rail { display: grid; grid-template-columns: repeat(var(--nodes, 5), 1fr); position: relative; margin: 14px 0 12px; list-style: none; padding: 0; }
.stage-rail.n2 { --nodes: 2; } .stage-rail.n3 { --nodes: 3; } .stage-rail.n4 { --nodes: 4; } .stage-rail.n5 { --nodes: 5; } .stage-rail.n6 { --nodes: 6; }
.stage-rail::before { content: ""; position: absolute; left: 10%; right: 10%; top: 5px; height: 1px; background: var(--divider); }
.stage-rail .node { position: relative; text-align: center; font-size: 11px; line-height: 1.3; color: var(--body); padding-top: 18px; }
.stage-rail .node::before { content: ""; position: absolute; top: 0; left: 50%; width: 11px; height: 11px; margin-left: -6px; background: var(--white); border: 1px solid var(--muted); }
.stage-rail .node.done { color: var(--secondary); }
.stage-rail .node.done::before { background: var(--secondary); border-color: var(--secondary); }
.stage-rail .node.now { color: var(--heading); font-weight: 500; }
.stage-rail .node.now::before { background: var(--gold); border-color: var(--gold); }
.stage-line { font-size: 13px; color: var(--body); margin: 0; }
.stage-line .what { color: var(--secondary); }
@media (min-width: 1000px) {
  .stage-rail { display: block; margin: 6px 0 12px; padding-left: 20px; border-left: 1px solid var(--divider); }
  .stage-rail::before { display: none; }
  .stage-rail .node { text-align: left; padding: 4px 0; font-size: 12px; line-height: 1.4; }
  .stage-rail .node::before { left: -26px; top: 7px; margin-left: 0; }
}

/* Filed entries: name, then plain words, then date/source. */
.entries { border-top: 1px solid var(--divider); }
.entry { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--divider); }
.entry .body { flex: 1; min-width: 0; }
.entry .name { color: var(--heading); font-weight: 500; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.entry .what { font-size: 13px; color: var(--secondary); line-height: 1.5; margin-top: 2px; overflow-wrap: anywhere; }
.entry .when { font-size: 12px; color: var(--body); margin-top: 4px; overflow-wrap: anywhere; }
.entry .act { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.entry .act .btn.sm { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.entry .mark { flex: 0 0 11px; width: 11px; height: 11px; margin-top: 6px; border: 1px solid var(--muted); background: var(--white); }
.entry .mark.done { background: var(--secondary); border-color: var(--secondary); }
.entry .mark.you { background: var(--gold); border-color: var(--gold); }
.btn.sm.disabled, .btn.sm[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }

/* Checklist: open steps first; the Next tag on the earliest open dated step; done steps collapsed */
.entry.next { background: var(--gold-bg); margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
.done-steps { margin-top: 6px; }
.done-steps summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 500; color: var(--heading); letter-spacing: 1px; text-transform: uppercase; }
.done-steps summary::-webkit-details-marker { display: none; }
.done-steps summary::before { content: ""; width: 7px; height: 7px; border-right: 1px solid var(--secondary); border-bottom: 1px solid var(--secondary); transform: rotate(-45deg); margin: 0 4px 0 2px; transition: transform .15s ease; }
.done-steps[open] summary::before { transform: rotate(45deg); }
.done-steps summary .n { font-family: var(--font-sans); font-size: 12px; color: var(--secondary); font-weight: 400; letter-spacing: 0.2px; text-transform: none; }

/* Requests (tickets): tapping one filters Messages to it */
.tickets { border-top: 1px solid var(--divider); }
.ticket { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--divider); color: inherit; }
.ticket .body { flex: 1; min-width: 0; }
.ticket .name { font-size: 14px; color: var(--heading); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.ticket .when { font-size: 12px; color: var(--body); margin-top: 1px; }
.ticket .pill { flex: 0 0 auto; }
.ticket:hover { background: var(--bg-alt-1); color: inherit; }
.ticket[aria-current] { background: var(--gold-bg); margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
.ticket.all .name { font-weight: 400; color: var(--body); }

/* Reply composer: on top of the thread */
.reply { border: 1px solid var(--gold-soft); background: var(--gold-bg); padding: 10px 12px; margin: 0 0 10px; }
.reply textarea { display: block; width: 100%; min-height: 44px; max-height: 120px; resize: none; padding: 10px 12px; border: 1px solid var(--divider); background: var(--white); color: var(--body); font: inherit; font-size: 15px; line-height: 1.5; border-radius: 0; overflow-y: auto; }
.reply textarea:focus { outline: none; border-color: var(--gold); }
.reply textarea::placeholder { color: var(--secondary); }
.reply-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.reply-row .spacer { flex: 1; }
.reply-row select { flex: 0 1 auto; min-width: 0; max-width: 60%; min-height: 44px; padding: 0 10px; border: 1px solid var(--divider); background: var(--white); color: var(--body); font: inherit; font-size: 13px; border-radius: 0; }
.reply-row select:focus { outline: none; border-color: var(--gold); }
.reply-row .btn { min-height: 44px; padding: 12px 22px; flex: 0 0 auto; }
.reply-row .btn[disabled] { opacity: .6; cursor: default; }
.reply-err { margin: 8px 0 0; font-size: 13px; color: var(--danger); line-height: 1.5; }
.msgs .entry.pending { opacity: .65; }
.next-tag { display: inline-block; vertical-align: 2px; margin-left: 8px; padding: 2px 8px; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 500; color: var(--white); background: var(--gold); }

/* Key dates */
.dates .entry { padding: 12px 0; }
.dates .d { flex: 0 0 96px; font-size: 13px; color: var(--heading); font-weight: 500; font-variant-numeric: tabular-nums; }
.dates .d.hot { color: var(--gold); }
.dates .entry .name { font-weight: 400; color: var(--body); }
.dates .entry .what { font-size: 12px; }

/* Messages */
.msgs .from { font-size: 13px; color: var(--heading); font-weight: 500; overflow-wrap: anywhere; }
.msgs .from .about { color: var(--secondary); font-weight: 400; }
.msgs .text { margin: 6px 0 0; font-size: 14px; color: var(--body); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.msgs .entry.you .from { color: var(--body); }

/* Doors: entries in the file, not ads */
.door .name { font-family: var(--font-display); font-size: 21px; font-weight: 400; }
.door .btn.ghost { color: var(--heading); border-color: var(--heading); }
.door .btn.ghost:hover { background: var(--heading); border-color: var(--heading); color: var(--white); }
/* account page: every target ≥ 44 px (F7) */
.account .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; }
.account p { margin: 0 0 14px; }

/* ── Chat shell (port of the O&M / Family Stork shell; square, brand tokens) ── */
.chat-shell { border: 1px solid var(--divider); background: var(--white); display: flex; flex-direction: column; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--divider); }
.chat-back { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 22px; color: var(--heading); }
.chat-head .title { flex: 1; min-width: 0; }
.chat-head .eyebrow { display: block; margin: 0; }
.chat-head h1 { font-size: 20px; margin: 2px 0 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }   /* wraps, never an ellipsis (W4 / F8) */
.chat-messages { padding: 16px 14px; }
.chat-sugg { padding: 0 14px 6px; margin-top: 0; }
.msg { max-width: 88%; margin: 10px 0; padding: 12px 14px; border: 1px solid var(--divider); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.6; }
.msg.user { background: var(--bg-alt-2); margin-left: auto; }
.msg.ai { background: var(--gold-bg); border-color: var(--gold-soft); }
.msg.ai ul { margin: 6px 0 0; padding-left: 18px; white-space: normal; }
.msg.ai li { margin: 2px 0; }
.msg .time { display: block; font-size: 11px; color: var(--body); margin-top: 8px; }
.msg.error { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

/* Source line: the proven form */
.src { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--gold-soft); font-size: 13px; color: var(--secondary); line-height: 1.5; white-space: normal; }
.src .paper { margin-right: 4px; }
.src + .src { border-top: 0; padding-top: 0; margin-top: 4px; }
/* Citation chips: the variant */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--gold-soft); white-space: normal; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 12px; background: var(--white); border: 1px solid var(--gold-soft); color: var(--heading); font-size: 12px; text-decoration: none; }
.chip:hover { border-color: var(--gold); color: var(--heading); }
.chip .n { color: var(--gold); font-weight: 500; margin-right: 6px; }
sup.cite { font-size: 10px; color: var(--gold); font-weight: 500; margin-left: 2px; }

/* Dated fact list */
.facts { list-style: none; margin: 4px 0 0; padding: 0; white-space: normal; }
.facts li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid var(--gold-soft); }
.facts li:first-child { border-top: 0; }
.facts .d { font-size: 13px; color: var(--heading); font-weight: 500; font-variant-numeric: tabular-nums; }
.facts .d .next-tag { display: block; margin: 4px 0 0; width: max-content; }
.facts .f { font-size: 14px; }
.facts .f .src { display: block; margin-top: 3px; padding-top: 0; border-top: 0; font-size: 12px; }

/* Code-appended footers */
.foot-agent { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--gold-soft); font-size: 13px; color: var(--heading); font-weight: 500; white-space: normal; }
.foot-wire { display: block; margin-top: 10px; padding: 10px 12px; background: var(--white); border: 1px solid var(--gold); font-size: 13px; color: var(--heading); line-height: 1.5; white-space: normal; }
.foot-wire strong { font-weight: 500; }

/* Not in record */
.msg.ai.none { background: var(--bg-alt-1); border-color: var(--divider); }
.msg.ai.none .btn.sm { margin-top: 10px; display: flex; width: max-content; max-width: 100%; align-items: center; min-height: 44px; }
.msg.ai.none .src.plain { border-top: 0; padding-top: 0; margin-top: 6px; }

/* Streaming */
.caret { display: inline-block; width: 2px; height: 1em; background: var(--gold); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { to { opacity: 0; } }
.msg.typing { color: var(--body); font-size: 13px; }

/* Composer */
.chat-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--divider); background: var(--white); }
.chat-form textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 160px; resize: none; padding: 11px 12px; border: 1px solid var(--divider); background: var(--white); color: var(--body); font: inherit; font-size: 16px; line-height: 1.4; border-radius: 0; overflow-y: auto; }
.chat-form textarea:focus { outline: none; border-color: var(--gold); }
.chat-form .btn { min-height: 44px; padding: 12px 20px; flex: 0 0 auto; }
.chat-form .btn.stop { background: var(--white); color: var(--heading); border-color: var(--heading); }
.chat-form .btn[disabled] { opacity: .6; cursor: default; }
.listen-line { font-size: 12px; color: var(--danger); padding: 0 12px 10px; }
.chat-form.off textarea { background: var(--bg-alt-1); color: var(--muted); }
.off-line { font-size: 13px; color: var(--secondary); padding: 10px 12px 12px; border-top: 1px solid var(--divider); background: var(--bg-alt-1); line-height: 1.5; margin: 0; }
.count { font-size: 11px; color: var(--body); text-align: right; padding: 0 12px 8px; }
.count.over { color: var(--danger); }
.privacy { font-size: 12px; color: var(--body); padding: 10px 14px 0; margin: 0; }

/* ── States ──────────────────────────────────────────────────────────────── */
.sk { background: var(--bg-alt-2); height: 14px; animation: fade 1.6s ease-in-out infinite; }
.sk.t { height: 22px; width: 62%; }
.sk.s { width: 40%; height: 12px; }
.sk.p { width: 92px; height: 20px; }
.sk.box { height: 60px; width: 100%; background: var(--white); border: 1px solid var(--divider); animation: none; }
.sk.btn { height: 44px; width: 96px; }
.sk.w38 { width: 38%; } .sk.w46 { width: 46%; } .sk.w48 { width: 48%; } .sk.w54 { width: 54%; } .sk.w58 { width: 58%; } .sk.w62 { width: 62%; } .sk.w70 { width: 70%; } .sk.w78 { width: 78%; } .sk.w84 { width: 84%; }
@keyframes fade { 50% { opacity: .45; } }
.skel .deal .body, .skel .entry .body { display: flex; flex-direction: column; gap: 8px; }
.skel .sk.s.lone { margin: 10px 0 18px; }
.skel .askbox .row, .askbox.skel .row { margin-top: 10px; justify-content: flex-end; }

.empty { padding: 36px 0; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.empty h3 { font-size: 24px; margin: 0 0 8px; }
.empty p { font-size: 14px; color: var(--secondary); margin: 0 0 16px; max-width: 480px; }
.empty .btn, .empty a.linkish { display: inline-flex; align-items: center; min-height: 44px; }
.empty a.linkish { font-size: 13px; color: var(--heading); border-bottom: 1px solid var(--divider); }
.empty.small { padding: 22px 0; }
.empty.small p { margin-bottom: 0; }

.errline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--danger); background: var(--danger-bg); font-size: 13px; color: var(--danger); line-height: 1.5; }
.errline .text { flex: 1; min-width: 200px; }
.errline .btn.sm { min-height: 44px; display: inline-flex; align-items: center; border-color: var(--danger); background: var(--white); color: var(--danger); }
.errline .btn.sm:hover { background: var(--danger); color: var(--white); }
.errline.page { margin-top: 8px; }

.expired { max-width: 440px; margin: 0 auto; padding: 48px 0 20px; }
.expired h1 { font-size: 34px; margin: 8px 0 8px; }
.expired p { font-size: 14px; color: var(--secondary); margin-bottom: 20px; }
.expired .btn { min-height: 48px; }

/* ── Motion off ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .caret, .iconbtn.on, .sk { animation: none; }
  .deal, .btn, a { transition: none; }
}

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .nav.app-nav { padding: 14px 20px; }
}

/* ── Phone (≤640px) ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .nav.app-nav { flex-wrap: nowrap; padding: 12px 14px; }
  .nav.app-nav .brand-logo, .signin-mark .brand-logo { height: 24px; }   /* the S|P mark alone (the <picture> swaps the file) */
  .nav.app-nav .nav-links { width: auto; }
  .nav.app-nav .signout { font-size: 11px; }
  .page { padding: 18px 14px 44px; }
  .page.wide { padding-top: 12px; }
  .app-foot { padding: 0 14px 22px; }
  .page-head h1 { font-size: 30px; }
  .signin-wrap { padding: 32px 16px 32px; }
  .signin-wrap h1 { font-size: 32px; }
  .signin-mark { margin-bottom: 14px; }
  body.signin .signin-wrap { padding: 20px 16px 16px; }
  body.signin .signin-wrap .tag { margin-bottom: 24px; }
  body.signin > .app-foot { padding: 0 30px 12px; }
  .deal { gap: 10px; padding: 14px 2px; }
  .deal .addr { font-size: 19px; }
  .deal .go { display: none; }
  .rec-head h1, .rec-title h1 { font-size: 26px; }
  .rec-head { margin-bottom: 8px; }
  .askbox { padding: 14px 14px 12px; margin: 0 -14px; }
  .rec-tabs { margin-left: -14px; margin-right: -14px; border-left: 0; border-right: 0; }
  .reply textarea { font-size: 16px; }
  .reply-row select { max-width: 50%; }
  .sec { margin-top: 30px; }
  .sec h2 { font-size: 22px; }
  .stage-rail .node { font-size: 10px; }
  .dates .d { flex-basis: 84px; font-size: 12.5px; }
  .next-due { flex-wrap: wrap; gap: 4px 10px; }
  .chat-messages { padding: 12px 10px; }
  .chat-sugg { padding: 0 10px 6px; }
  .msg { max-width: 94%; }
  .facts li { grid-template-columns: 70px minmax(0, 1fr); }
  .empty h3 { font-size: 21px; }
  .expired { padding-top: 28px; }
  .expired h1 { font-size: 28px; }
}

/* ══ Conversation-first record (Rob 2026-09-17, mockup 06 + 06b) ═══════════
   body.conv. One reading column (the conversation, max 760px) and, from
   1000px, a 300px sticky rail (the file) to its right. Below 1000px the file
   is the same DOM opened as a bottom drawer by "The file" in the box row.
   The workspace rules above stay only for /__preview/deal-workspace. */
body.conv .page.wide { max-width: 1120px; padding-top: 16px; }
body.conv .rec-title .status .opened { color: var(--secondary); }
.rec-grid { display: block; margin-top: 2px; min-width: 0; }
body.conv .rec-head { margin-bottom: 8px; }
.convo { min-width: 0; max-width: 760px; }
@media (min-width: 1000px) {
  body.conv .nav.app-nav { padding-top: 10px; padding-bottom: 10px; }
  body.conv .page.wide { padding-top: 8px; }
  .rec-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 44px; align-items: start; }
  .file { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; overscroll-behavior: contain; }
}

/* 1. The record speaks first: Cormorant for its lines, the UI face for sources. */
.since { padding: 0; }
.since .eyebrow { display: block; }
.since .eyebrow .at { color: var(--body); letter-spacing: 0.2px; text-transform: none; font-weight: 400; margin-left: 8px; }
.since ol { list-style: none; margin: 6px 0 0; padding: 0; }
.since li { padding: 5px 0; border-top: 1px solid var(--divider); }
.since li:first-child { border-top: 0; padding-top: 2px; }
.since .line { font-family: var(--font-display); font-size: 21px; line-height: 1.28; color: var(--heading); overflow-wrap: anywhere; }
.since .line strong { font-weight: 600; }
.since .src { display: block; font-size: 12px; color: var(--secondary); margin-top: 1px; padding: 0; border: 0; line-height: 1.5; }
.since .src .paper { margin-right: 4px; }

/* The one box: Ask or reply. Two explicit buttons (Ask your deal, Send to team); the classifier
   only pre-highlights the likely one; the target line under the textarea says where the text goes. */
body.conv .askbox { margin-top: 12px; padding: 14px 18px 12px; }
body.conv .askbox form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
body.conv .askbox textarea { flex: 1 1 100%; width: 100%; min-height: 60px; max-height: 160px; padding: 13px 14px; font-size: 16px; }
.box-actions { display: contents; }   /* the tools row and the buttons row lay out in the form's own flex */
.box-tools, .box-buttons { display: flex; align-items: center; gap: 10px; min-width: 0; }
body.conv .askbox textarea { order: 1; }
.target { order: 2; }
.box-tools { order: 3; flex: 1 1 100%; }
.box-buttons { order: 4; flex: 1 1 100%; }
body.conv .askbox .listen-line, body.conv .askbox .count, body.conv .askbox .reply-err { order: 5; }
.box-buttons .btn { flex: 1 1 0; min-height: 44px; padding: 12px 14px; white-space: nowrap; }
.box-tools .spacer { flex: 1; }
.box-tools .iconbtn { background: var(--white); }
.iconbtn.plus { font-size: 24px; line-height: 1; font-weight: 300; }
.box-buttons .btn.ghost { color: var(--heading); border-color: var(--heading); }
.box-buttons .btn.ghost:hover { background: var(--heading); color: var(--white); }
.box-buttons .btn.stop { background: var(--white); color: var(--heading); border-color: var(--heading); flex: 1 1 0; }
.box-buttons .btn[disabled] { opacity: .6; cursor: default; }
.btn.thefile { display: none; }
.target { flex: 1 1 100%; display: flex; align-items: center; min-height: 24px; font-size: 12px; color: var(--secondary); line-height: 1.5; margin-top: -4px; }
.target .tl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.target .tl b { color: var(--heading); font-weight: 500; }
.target .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; flex: 0 1 auto; }
.target .chip { flex: 0 0 auto; width: auto; min-width: 0; cursor: pointer; font: inherit; font-size: 12px; line-height: 1.2; min-height: 44px; padding: 0 12px; }
.target .chip[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-bg); color: var(--heading); }
.target .clear { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--heading); font-size: 14px; cursor: pointer; font-family: inherit; margin: -10px 0; }
.target .clear:hover { color: var(--danger); }
body.conv .askbox .listen-line, body.conv .askbox .count, body.conv .askbox .reply-err { flex-basis: 100%; padding: 0; margin: 0; }
body.conv .askbox .reply-err { margin-top: -2px; }
body.conv .ask-foot { display: block; }
body.conv .ask-foot .sugg { margin-top: 10px; }
body.conv .askbox .off-line { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--divider); background: var(--white); }
@media (min-width: 1000px) {
  body.conv .askbox { padding: 8px 18px 8px; }
  body.conv .askbox form { gap: 8px; }
  body.conv .askbox .eyebrow { margin-bottom: 4px; }
  /* row 1: textarea + mic + add; row 2: the target line, the two buttons on the right */
  body.conv .askbox textarea { flex: 1 1 480px; width: auto; min-height: 44px; height: 44px; padding: 10px 14px; }
  .box-tools { order: 2; flex: 0 0 auto; }
  .target { order: 3; flex: 1 1 200px; margin-top: 0; min-height: 44px; }
  .box-buttons { order: 4; flex: 0 0 auto; }
  .box-tools .spacer { display: none; }
  .box-buttons .btn { flex: 0 0 auto; padding: 12px 18px; }
  body.conv .ask-foot .sugg { margin-top: 6px; }
  body.conv:not(.chat) .ev { padding-top: 12px; padding-bottom: 12px; }
}

/* 2. The stream as flat entries (kept for /__preview/deal-top only; body.chat uses the bubbles below). */
.stream { margin-top: 4px; min-width: 0; }
.stream .filter-line { margin: 10px 0 0; }
body.conv:not(.chat) .day { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; font-size: 12px; font-weight: 500; color: var(--secondary); letter-spacing: 0.3px; white-space: nowrap; }
body.conv:not(.chat) .day::after { content: ""; flex: 1; height: 1px; background: var(--divider); }
body.conv:not(.chat) .ev { padding: 14px 0; border-bottom: 1px solid var(--divider); min-width: 0; }
body.conv:not(.chat) .ev .top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
body.conv:not(.chat) .ev .from { font-size: 13px; font-weight: 500; color: var(--heading); overflow-wrap: anywhere; min-width: 0; }
body.conv:not(.chat) .ev .from .about { color: var(--secondary); font-weight: 400; }
body.conv:not(.chat) .ev .t { font-size: 12px; color: var(--body); white-space: nowrap; font-variant-numeric: tabular-nums; }
body.conv:not(.chat) .ev .text { margin: 6px 0 0; font-size: 15px; color: var(--body); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
body.conv:not(.chat) .ev .text ul { margin: 4px 0 0; padding-left: 18px; white-space: normal; }
body.conv:not(.chat) .ev .text li { margin: 2px 0; }
body.conv:not(.chat) .ev .text.reading { color: var(--body); font-size: 13px; }
body.conv:not(.chat) .ev .what { font-size: 13px; color: var(--secondary); line-height: 1.5; margin: 6px 0 0; overflow-wrap: anywhere; }
body.conv:not(.chat) .ev.pending { opacity: .65; }
/* the record's answers: a gold hairline on the left edge, the question it answered, then sources */
body.conv:not(.chat) .ev.rec { border-left: 2px solid var(--gold); padding-left: 14px; }
body.conv:not(.chat) .ev.rec .from { color: var(--gold); }
body.conv:not(.chat) .ev.rec .from .about { color: var(--secondary); }
body.conv:not(.chat) .ev.rec .asked { font-size: 13px; color: var(--secondary); margin: 4px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
body.conv:not(.chat) .ev.rec .asked b { font-weight: 500; color: var(--heading); }
body.conv:not(.chat) .ev.rec .src { margin-top: 8px; padding-top: 6px; }
body.conv:not(.chat) .ev.rec .src + .src { border-top: 0; padding-top: 0; margin-top: 2px; }
body.conv:not(.chat) .ev.rec .foot-agent { margin-top: 8px; padding-top: 6px; }
.ev.rec .facts, .ev.rec .chips { white-space: normal; }
body.conv:not(.chat) .ev.rec.none { border-left-color: var(--divider); }
body.conv:not(.chat) .ev.rec.none .from { color: var(--secondary); }
/* not in the record: a 44px ghost button that loads the question into the box in message mode (never a link out) */
.ev.rec .ask-team, .msg.ai.none .ask-team { margin-top: 10px; display: inline-flex; width: max-content; max-width: 100%; align-items: center; justify-content: center; min-height: 44px; font: inherit; font-size: 13px; cursor: pointer; }
.ev.rec .ask-team-note, .msg.ai.none .ask-team-note { font-size: 13px; color: var(--body); margin: 6px 0 0; line-height: 1.5; }
body.conv:not(.chat) .ev.rec.none .src.plain { border-top: 0; padding-top: 0; margin-top: 6px; }
body.conv:not(.chat) .ev.rec.error { border-left-color: var(--danger); }
body.conv:not(.chat) .ev.rec.error .text { color: var(--danger); }
/* your messages */
body.conv:not(.chat) .ev.you .from { color: var(--body); }
/* the team's messages: a 44px Reply that targets the box at that message's request */
body.conv:not(.chat) .ev .act-row { display: flex; justify-content: flex-end; margin: 2px 0 -10px; }
.reply-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--heading); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.reply-link:hover { color: var(--gold); }
/* a filed document, inline in the stream */
body.conv:not(.chat) .ev.doc { display: flex; gap: 14px; align-items: flex-start; }
body.conv:not(.chat) .ev.doc .dmark { flex: 0 0 11px; width: 11px; height: 14px; margin-top: 5px; border: 1px solid var(--secondary); background: var(--white); }
body.conv:not(.chat) .ev.doc .body { flex: 1; min-width: 0; }
body.conv:not(.chat) .ev.doc .name { color: var(--heading); font-weight: 500; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
body.conv:not(.chat) .ev.doc .what { margin-top: 2px; }
body.conv:not(.chat) .ev.doc .when { font-size: 12px; color: var(--body); margin-top: 4px; overflow-wrap: anywhere; }
body.conv:not(.chat) .ev.doc .act { flex: 0 0 auto; }
.btn.sm.open { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.earlier { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-size: 13px; color: var(--heading); text-decoration: underline; text-underline-offset: 3px; }
.stream .empty.small { margin-top: 10px; }

/* 3. The file behind it: folded groups, counted, quiet. Type 13px, slate only. */
.file { font-size: 13px; min-width: 0; }
.file .fhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0 8px; }
.file .fhead h2 { font-size: 22px; margin: 0; }
.file .fhead .lead { font-size: 12px; color: var(--secondary); margin: 2px 0 0; line-height: 1.5; }
.file .close { display: none; }
.grp { border-top: 1px solid var(--divider); }
.grp:last-of-type { border-bottom: 1px solid var(--divider); }
.grp > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 500; color: var(--heading); }
.grp > summary::-webkit-details-marker { display: none; }
.grp > summary::before { content: ""; width: 7px; height: 7px; border-right: 1px solid var(--secondary); border-bottom: 1px solid var(--secondary); transform: rotate(-45deg); margin: 0 4px 0 2px; transition: transform .15s ease; flex: 0 0 auto; }
.grp[open] > summary::before { transform: rotate(45deg); }
.grp > summary .n { margin-left: auto; font-size: 12px; color: var(--secondary); font-weight: 400; white-space: nowrap; }
.grp .gb { padding: 0 0 10px; }
.grp .lead { font-size: 12px; color: var(--secondary); margin: 0 0 4px; line-height: 1.5; }
.grp .errline { margin: 4px 0; }
.grp .empty.small { padding: 12px 0; border: 0; }
.fe { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--divider); }
.fe:first-of-type, .lead + .fe { border-top: 0; }
.fe .body { flex: 1; min-width: 0; }
.fe .name { font-size: 13.5px; font-weight: 500; color: var(--heading); line-height: 1.4; overflow-wrap: anywhere; }
.fe .what { font-size: 12px; color: var(--secondary); line-height: 1.5; margin-top: 1px; overflow-wrap: anywhere; }
.fe .when { font-size: 11.5px; color: var(--body); margin-top: 3px; overflow-wrap: anywhere; }
.fe .mark { flex: 0 0 11px; width: 11px; height: 11px; margin-top: 5px; border: 1px solid var(--muted); background: var(--white); }
.fe .mark.done { background: var(--secondary); border-color: var(--secondary); }
.fe .mark.you { background: var(--gold); border-color: var(--gold); }
.fe .d { flex: 0 0 52px; font-size: 12.5px; color: var(--heading); font-weight: 500; font-variant-numeric: tabular-nums; }
.fe .d.hot { color: var(--gold); }
.fe .act { flex: 0 0 auto; }
.fe .act .btn.sm { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.fe.next { background: var(--gold-bg); margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
.fe .next-tag { margin-left: 6px; padding: 2px 7px; }
.nd .v { font-size: 14px; font-weight: 500; color: var(--heading); line-height: 1.4; }
.nd .src { font-size: 12px; color: var(--secondary); margin-top: 2px; padding: 0; border: 0; }
.file .done-steps { margin-top: 4px; }
.file .done-steps summary { font-size: 12px; }
.file .done-steps summary::before { width: 6px; height: 6px; }
.file .done-steps .fe:first-of-type { border-top: 1px solid var(--divider); }
.file .ticket { border-top: 1px solid var(--divider); border-bottom: 0; padding: 6px 0; }
.file .lead + .ticket { border-top: 0; }
.file .ticket[aria-current] { margin: 0; padding-left: 8px; padding-right: 8px; }   /* the rail clips a negative margin: "All requests" lost its A */
.file .ticket .name { font-size: 13.5px; }
.file .ticket .when { font-size: 11.5px; }
.file .door .name { font-family: var(--font-display); font-size: 21px; font-weight: 400; line-height: 1.15; }
.file .door .what { margin-top: 3px; }
.file .door .btn.ghost { color: var(--heading); border-color: var(--heading); text-transform: uppercase; letter-spacing: 0.6px; font-size: 12px; padding: 0 14px; }
.file .door .btn.ghost:hover { background: var(--heading); border-color: var(--heading); color: var(--white); }
.file .grp.rooms > summary { color: var(--heading); }
/* Rooms, one tap from the stream on the phone (Rob 2026-09-18): a compact row of 44px ghost buttons under the
   since strip, one per room; hidden from 1000px where the rail carries the Rooms group at its top. */
.rooms-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0 4px; margin: 0 0 4px; border-bottom: 1px solid var(--divider); }
.rooms-row .eyebrow { flex: 0 0 auto; margin: 0 4px 0 0; }
.rooms-row .btn.ghost.sm { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 14px; color: var(--heading); border-color: var(--heading); font-size: 13px; white-space: nowrap; }
.rooms-row .btn.ghost.sm:hover { background: var(--heading); color: var(--white); }
@media (min-width: 1000px) { .rooms-row { display: none; } }
.backdrop { display: none; }

/* ── The first-tap intro sheet on a room (Rob 2026-09-18): a native <dialog> on brand tokens. A bottom
   sheet on the phone (gold hairline on top, safe-area padding), a centered dialog from 1000px. Radius 0,
   no shadow, backdrop in slate; every action 44px; the slide is off under reduced motion. ── */
dialog.room-intro { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 88vh; margin: 0; padding: 0; border: 0; border-top: 2px solid var(--gold); border-radius: 0; box-shadow: none; background: var(--white); color: var(--body); overflow: auto; overscroll-behavior: contain; }
dialog.room-intro::backdrop, dialog.attach::backdrop { background: rgba(45, 55, 72, 0.45); }
dialog.room-intro[open] { animation: ri-up .22s ease-out; }
@keyframes ri-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ri { padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px)); }
.ri-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ri-close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-right: -12px; border: 0; background: none; color: var(--heading); font-size: 20px; line-height: 1; cursor: pointer; font-family: inherit; padding: 0; }
.ri-close:hover { color: var(--gold); }
.ri-title { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: -0.2px; margin: 2px 0 10px; color: var(--heading); }
.ri-line { margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: var(--body); }
.ri-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.ri-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 20px; text-align: center; }
.ri-actions .btn.ghost { color: var(--heading); border-color: var(--heading); }
.ri-actions .btn.ghost:hover { background: var(--heading); border-color: var(--heading); color: var(--white); }
.ri-later { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; font-size: 14px; color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; }
.ri-later:hover { color: var(--heading); }
body.intro-open { overflow: hidden; }
/* "About this room" under a room entry in the file: a 44px link that reopens the sheet */
.file .door .ri-about { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; background: none; border: 0; font: inherit; font-size: 12.5px; color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.file .door .ri-about:hover { color: var(--heading); }
@media (min-width: 1000px) {
  dialog.room-intro { inset: 0; margin: auto; width: min(560px, calc(100% - 32px)); max-height: min(88vh, 640px); border: 1px solid var(--divider); border-top: 2px solid var(--gold); }
  dialog.room-intro[open] { animation: ri-in .18s ease-out; }
  .ri { padding: 14px 28px 26px; }
  .ri-title { font-size: 34px; }
  .ri-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
@keyframes ri-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  dialog.room-intro[open] { animation: none; }
}

/* ── The Checklist group: the dashboard's Checklist tab, on brand tokens (Rob 2026-09-18) ──
   Room header (eyebrow kicker + Cormorant name), the hairline progress bar under
   "<pct>%, <done>/<total> done", 44px phase summaries, step rows with a square (a
   checkbox-looking one when the step is the client's, a glyph otherwise), the status
   pill, description 13px, team note, your answer, link. No writes in phase 1. */
.ck-room { padding: 6px 0 4px; }
.ck-kicker { display: block; margin-bottom: 4px; letter-spacing: 1.8px; color: var(--body); }
.ck-name { font-family: var(--font-display); font-size: 26px; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; color: var(--heading); margin: 0 0 6px; overflow-wrap: anywhere; }
.ck-progress { padding: 2px 0 10px; }
.ck-progress-line { display: flex; align-items: baseline; gap: 2px; margin: 0 0 6px; font-size: 12px; color: var(--secondary); white-space: nowrap; }
.ck-pct { font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1; color: var(--body); }
.ck-counts { margin-left: 4px; }
.ck-bar { display: block; width: 100%; height: 5px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 0; background: var(--divider); color: var(--body); overflow: hidden; }
.ck-bar::-webkit-progress-bar { background: var(--divider); border-radius: 0; }
.ck-bar::-webkit-progress-value { background: var(--body); border-radius: 0; transition: width .3s ease; }
.ck-bar::-moz-progress-bar { background: var(--body); border-radius: 0; }
.ck-complete { border: 1px solid var(--body); border-left: 3px solid var(--gold); background: var(--white); padding: 10px 12px; margin: 0 0 10px; font-size: 13px; color: var(--heading); line-height: 1.55; }
.ck-template { border: 1px solid var(--divider); padding: 0 10px 4px; margin: 0 0 10px; }
.ck-template-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 0 6px; border-bottom: 1px solid var(--divider); }
.ck-template-title { font-family: var(--font-display); font-size: 21px; font-weight: 500; color: var(--heading); letter-spacing: -0.005em; overflow-wrap: anywhere; }
.ck-template-count { font-size: 11px; color: var(--secondary); white-space: nowrap; }
.ck-phase { border-top: 1px solid var(--divider); }
.ck-phase.plain { border-top: 0; }
.ck-phase > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; padding: 0 2px; }
.ck-phase > summary::-webkit-details-marker { display: none; }
.ck-phase > summary::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-right: 1px solid var(--secondary); border-bottom: 1px solid var(--secondary); transform: rotate(-45deg); margin: 0 4px 0 0; transition: transform .15s ease; }
.ck-phase[open] > summary::before { transform: rotate(45deg); margin-top: -3px; }
.ck-phase-label { font-size: 11px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--secondary); overflow-wrap: anywhere; }
.ck-phase > summary:hover .ck-phase-label { color: var(--body); }
.ck-phase-count { margin-left: auto; font-size: 11px; color: var(--secondary); white-space: nowrap; }
.ck-steps { list-style: none; margin: 0; padding: 0 0 4px; }
.ck-row { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0 10px; border-bottom: 1px solid var(--bg-alt-2); font-size: 13.5px; color: var(--heading); line-height: 1.55; }
.ck-row:last-child { border-bottom: 0; }
.ck-row.waiting { border-left: 3px solid var(--gold); padding-left: 8px; }
.ck-row.done { opacity: .62; }
.ck-box, .ck-glyph { position: relative; flex: 0 0 17px; width: 17px; height: 17px; margin-top: 2px; box-sizing: border-box; border: 1px solid var(--muted); background: var(--white); }
.ck-box { border-color: var(--body); }
.ck-glyph[data-status="in_progress"] { border-color: var(--body); border-bottom: 3px solid var(--gold); }
.ck-box.done, .ck-glyph.done { background: var(--body); border-color: var(--body); }
.ck-box.done::after, .ck-glyph.done::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); }
.ck-body { flex: 1; min-width: 0; }
.ck-title { overflow-wrap: anywhere; }
.ck-status { display: inline-block; margin-left: 8px; padding: 1px 7px; border: 1px solid var(--divider); font-size: 9px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--secondary); vertical-align: middle; white-space: nowrap; }
.ck-status.gold { color: var(--gold); border-color: var(--gold); }
.ck-status.done { color: var(--body); border-color: var(--body); }
.ck-status[data-status="in_progress"] { color: var(--body); }
.ck-desc { font-size: 13px; color: var(--secondary); line-height: 1.5; margin-top: 2px; overflow-wrap: anywhere; }
.ck-note { font-size: 12px; color: var(--heading); background: var(--bg-alt-1); padding: 5px 10px; margin-top: 5px; line-height: 1.5; overflow-wrap: anywhere; }
.ck-note strong { font-weight: 500; }
.ck-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-size: 12px; font-weight: 500; color: var(--body); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.ck-link:hover { color: var(--gold); }
.ck-empty { font-size: 13px; color: var(--secondary); line-height: 1.5; margin: 6px 0 8px; }
@media (prefers-reduced-motion: reduce) {
  .ck-phase > summary::before, .ck-bar::-webkit-progress-value { transition: none; }
}

/* Phone and tablet: the file is a drawer opened by "The file" next to Send. ONLY the comparison page
   (/__preview/deal-top, body.conv without .chat) still uses it; the chat record has NAMED TABS instead
   (pass 13 at the end of this file overrides .file for body.chat). */
@media (max-width: 999px) {
  .file { display: none; }
  .btn.thefile { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: var(--heading); border-color: var(--heading); white-space: nowrap; }
  body.file-open { overflow: hidden; }
  body.file-open .backdrop { display: block; position: fixed; inset: 0; background: rgba(45, 55, 72, 0.45); z-index: 19; }
  body.file-open .file { display: block; position: fixed; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow: auto; overscroll-behavior: contain; background: var(--white); border-top: 2px solid var(--gold); z-index: 20; padding: 0 14px calc(20px + env(safe-area-inset-bottom, 0px)); }
  body.file-open .file .fhead { position: sticky; top: 0; z-index: 1; background: var(--white); padding-top: 8px; border-bottom: 1px solid var(--divider); margin-bottom: 0; }
  body.file-open .file .close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--heading); font-size: 20px; cursor: pointer; font-family: inherit; flex: 0 0 auto; }
  body.file-open .sd-wire-notice { display: none; }
}
@media (max-width: 640px) {
  body.conv .page.wide { padding-top: 10px; }
  body.conv .rec-title .opened { display: none; }
  .since .line { font-size: 19px; }
  body.conv .askbox { padding: 14px 14px 12px; }
  .ev .top { align-items: flex-start; }
  .ev .t { padding-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .grp > summary::before, body.chat .since-row .chev { transition: none; }
}

/* ══ Chat-style stream (Rob 2026-09-17): body.conv.chat ═══════════════════════
   The deal record reads like a thread: oldest at the top, newest at the bottom,
   the box pinned at the bottom of the viewport, scrolling up = history. Desktop
   (>=1000px): the page is a 100vh column; the stream is its own scroll pane and
   the box a bottom block inside the same column; the file rail (300px) stays to
   the right. Phone: one column, the page scrolls, the box is sticky at the
   bottom (safe-area aware), the since strip sticky at the top. The rules above
   under body.conv still apply; /__preview/deal-top keeps that layout as it was. */
body.chat .rec-grid { margin-top: 0; }
body.chat .convo { position: relative; display: flex; flex-direction: column; min-width: 0; }
body.chat .stream { margin-top: 0; }
/* the since strip: one sticky line, the whole row is the 44px toggle; the lines fold under it */
body.chat .since { position: sticky; top: 0; z-index: 4; background: var(--white); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); padding: 0; margin: 0 0 4px; }
body.chat .since-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0; margin: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--heading); }
body.chat .since-row .eyebrow { flex: 0 0 auto; margin: 0; line-height: 1.2; }
body.chat .since-row .sum { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--heading); line-height: 1.4; overflow-wrap: anywhere; }
body.chat .since-row .chev { flex: 0 0 auto; width: 8px; height: 8px; margin: -5px 10px 0 0; border-right: 1px solid var(--secondary); border-bottom: 1px solid var(--secondary); transform: rotate(45deg); transition: transform .15s ease; }
body.chat .since.closed .since-row .chev { transform: rotate(-135deg); margin-top: 4px; }
body.chat .since-row.none { cursor: default; font-size: 13px; color: var(--secondary); }
body.chat .since-body { padding: 0 0 10px; }
body.chat .since .at { font-size: 12px; color: var(--body); margin: -2px 0 4px; line-height: 1.5; }
body.chat .since ol { margin: 0; }
body.chat .since li:first-child { padding-top: 0; }
/* "and N more": a muted 44px row that expands the folded lines in place, no navigation */
body.chat .since-row.more { font-size: 13px; color: var(--secondary); }
body.chat .since-more-row { padding: 0; }
/* the stream: Earlier at the top, the newest entry at the bottom by the box */
body.chat .stream .earlier { margin: 2px 0 6px; }
body.chat .stream .filter-line { margin: 4px 0 0; }
/* the box, pinned; the "New" pill rides on its top edge */
body.chat .askbox { position: sticky; bottom: env(safe-area-inset-bottom, 0px); z-index: 5; margin-top: 0; }
body.chat .new-pill { position: absolute; top: -54px; left: 50%; transform: translateX(-50%); z-index: 6; min-height: 44px; min-width: 44px; padding: 0 20px; border: 1px solid var(--gold); background: var(--white); color: var(--heading); font: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.3px; cursor: pointer; }
body.chat .new-pill::before { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1px solid var(--heading); border-bottom: 1px solid var(--heading); transform: rotate(45deg); margin: 0 8px 3px 0; }
body.chat .new-pill:hover { background: var(--gold-bg); }
@media (max-width: 999px) {
  /* the strip on the phone: eyebrow over the summary (two short lines), the chevron on the right; the
     expanded lines are capped so the newest entry and the box stay in view under the sticky strip */
  body.chat .since-row { flex-wrap: wrap; gap: 0 12px; padding: 6px 0; position: relative; padding-right: 32px; }
  body.chat .since-row .eyebrow, body.chat .since-row .sum { flex: 1 1 100%; }
  body.chat .since-row .sum { margin-top: 2px; }
  body.chat .since-row .chev { position: absolute; right: 10px; top: 50%; margin: -6px 0 0; }
  body.chat .since.closed .since-row .chev { margin-top: -2px; }
  body.chat .since-body { max-height: 40vh; overflow-y: auto; overscroll-behavior: contain; }   /* three lines fit whole at 740px; a fourth scrolls */
  body.chat .since .line { font-size: 18px; line-height: 1.25; }
  body.chat .since li { padding: 4px 0; }
  /* the box, tighter on the phone: the same content, less air, so the stream keeps its room */
  body.chat .askbox { padding: 10px 14px 10px; }
  body.chat .askbox .eyebrow { margin-bottom: 4px; }
  body.chat .askbox form { gap: 8px; }
  body.chat #box-target { margin-top: -2px; min-height: 22px; }
  body.chat .ask-foot .sugg { margin-top: 8px; }
  /* chips: one row that scrolls sideways, 44px each, full bleed on the phone */
  body.chat .ask-foot .sugg { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 8px -18px 0; padding: 0 18px; }
  body.chat .ask-foot .sugg::-webkit-scrollbar { display: none; }
  body.chat .sugg button { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 640px) {
  body.chat .ask-foot .sugg { margin-left: -14px; margin-right: -14px; padding: 0 14px; }
  body.chat .since { margin-left: -14px; margin-right: -14px; padding: 0 14px; }
}
@media (min-width: 1000px) {
  body.chat { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
  body.chat .app-nav, body.chat .app-foot, body.chat .sd-wire-notice { flex: 0 0 auto; }
  body.chat .page.wide { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-top: 6px; padding-bottom: 8px; overflow: hidden; }
  /* the header on one 44px row: back, request, address, pills, last filed, New request */
  body.chat .rec-head { flex: 0 0 auto; margin-bottom: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
  body.chat .rec-top { gap: 12px; }
  body.chat .rec-top .eyebrow::before { margin-right: 12px; }
  body.chat .rec-title { flex: 1 1 auto; min-width: 0; gap: 6px 16px; }
  body.chat .rec-title h1 { font-size: 26px; }
  body.chat .rec-head .status { min-height: 44px; gap: 6px 12px; }
  body.chat .rec-head .opened { display: none; }   /* the strip says what arrived and when; the file's Dates keep the rest */
  /* the strip on desktop: the source sits on the line, the lines are short, nothing folds twice */
  body.chat .since { flex: 0 0 auto; position: static; margin-bottom: 6px; }
  body.chat .since .line { font-size: 19px; display: inline; }
  body.chat .since .src { display: inline; margin: 0 0 0 12px; font-size: 12px; }
  body.chat .since li { padding: 3px 0; }
  body.chat .since .at { margin: -4px 0 2px; }
  body.chat .since-body { padding-bottom: 6px; }
  body.chat .rec-grid { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  body.chat .convo { min-height: 0; }
  body.chat .stream { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; }
  body.chat .askbox { flex: 0 0 auto; position: relative; bottom: auto; }
  body.chat .file { position: sticky; top: 0; align-self: stretch; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 28px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
  body.chat .app-foot { padding-bottom: 4px; }
}

/* ══ Bubbles and fewer words (Rob 2026-09-18): body.chat ═══════════════════════
   "It looks like a lot of words, and besides the top box the rest does not
   separate that well." Every entry is a bubble under ONE 13px meta line, and
   the ground is the voice: you = white with a 1px divider, on the right; the
   team = slate-50, no border, on the left; the record = pale gold with the 2px
   gold edge, on the left, "From your file" in gold. A filed document is a
   centered, quiet line with Open. A question and its answer are one entry
   drawn as two bubbles, 6px apart. 14px between bubbles, 24px around a day
   separator, bubble padding 12px 14px, body 15px/1.5. Tokens only, radius 0,
   no shadows. The flat entries above stay for /__preview/deal-top. */
body.chat .ev-list { display: flex; flex-direction: column; gap: 14px; padding: 2px 0 8px; }
body.chat .ev { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 0; border: 0; }
body.chat .ev.you { align-items: flex-end; }
body.chat .meta { font-size: 13px; color: var(--secondary); line-height: 1.4; margin: 0 0 4px; padding: 0 2px; max-width: 78%; overflow-wrap: anywhere; }
body.chat .ev.you .meta, body.chat .ev.rec .q .meta { text-align: right; }
body.chat .meta .tag { display: inline-block; margin-right: 8px; font-size: 10.5px; letter-spacing: 2px; vertical-align: 1px; }
body.chat .bubble { box-sizing: border-box; max-width: 78%; min-width: 0; padding: 12px 14px; }
body.chat .ev.you .bubble, body.chat .ev.rec .q .bubble { background: var(--white); border: 1px solid var(--divider); }
body.chat .ev.team .bubble { background: var(--bg-alt-1); border: 0; }
body.chat .ev.rec .a .bubble { background: var(--gold-bg); border: 0; border-left: 2px solid var(--gold); }
body.chat .ev.rec .q, body.chat .ev.rec .a { display: flex; flex-direction: column; width: 100%; min-width: 0; }
body.chat .ev.rec .q { align-items: flex-end; margin-bottom: 6px; }
body.chat .ev.rec .a { align-items: flex-start; }
body.chat .ev .text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--body); white-space: pre-wrap; overflow-wrap: anywhere; }
body.chat .ev .text ul { margin: 4px 0 0; padding-left: 18px; white-space: normal; }
body.chat .ev .text li { margin: 2px 0; }
body.chat .ev .text.reading { color: var(--body); font-size: 13px; }
body.chat .ev.pending { opacity: .65; }
body.chat .ev.rec.none .a .bubble { background: var(--bg-alt-1); border-left-color: var(--divider); }
body.chat .ev.rec.error .a .bubble { border-left-color: var(--danger); }
body.chat .ev.rec.error .text { color: var(--danger); }
body.chat .ev.rec .facts, body.chat .ev.rec .chips { white-space: normal; }
body.chat .ev.rec .chips { margin-top: 8px; padding-top: 6px; }
/* Reply sits on the team bubble's bottom-right edge, 44px tall */
body.chat .ev .act-row { display: flex; justify-content: flex-end; margin: 0 -8px -12px 0; }
/* Sources: one 44px row, closed by default; open = chips that scroll sideways on the phone */
body.chat .sources { margin: 4px 0 0; }
body.chat .sources > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-size: 13px; color: var(--secondary); }
body.chat .sources > summary::-webkit-details-marker { display: none; }
body.chat .sources > summary::after { content: ""; width: 7px; height: 7px; border-right: 1px solid var(--secondary); border-bottom: 1px solid var(--secondary); transform: rotate(45deg); margin: -4px 0 0 2px; transition: transform .15s ease; }
body.chat .sources[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
body.chat .srcs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 10px; }
body.chat .srcs .src { display: inline-flex; align-items: center; margin: 0; padding: 6px 10px; border: 1px solid var(--gold-soft); background: var(--white); font-size: 12px; line-height: 1.4; color: var(--heading); overflow-wrap: anywhere; }
body.chat .srcs .src .paper { margin-right: 6px; }
/* Footers: one short muted line each, the wire line first (its first sentence carries the weight) */
body.chat .foot-agent, body.chat .foot-wire { display: block; margin: 8px 0 0; padding: 6px 0 0; border: 0; border-top: 1px solid var(--gold-soft); background: none; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--secondary); }
body.chat .foot-wire strong { font-weight: 500; color: var(--heading); }
body.chat .foot-wire + .foot-agent { margin-top: 4px; padding-top: 0; border-top: 0; }
body.chat .ev.rec .src.plain { display: block; margin: 8px 0 0; padding: 0; border: 0; font-size: 12px; color: var(--body); }
/* A filed document: a centered one-liner, the what-this-is line under it, no ground */
body.chat .ev.doc { align-items: center; text-align: center; padding: 2px 0; }
body.chat .ev.doc .line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 10px; max-width: 100%; min-width: 0; }
body.chat .ev.doc .dmark { flex: 0 0 9px; width: 9px; height: 12px; border: 1px solid var(--secondary); background: var(--white); }
body.chat .ev.doc .name { font-size: 14px; font-weight: 500; color: var(--heading); overflow-wrap: anywhere; }
body.chat .ev.doc .when { font-size: 13px; color: var(--secondary); overflow-wrap: anywhere; }
body.chat .ev.doc .act { display: inline-flex; }
body.chat .ev.doc .what { margin: 0; font-size: 13px; color: var(--secondary); line-height: 1.5; max-width: 78%; overflow-wrap: anywhere; }
/* Day separators: centered small caps between two hairlines, 24px of air with the list gap */
body.chat .day { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0; font-size: 11px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--secondary); white-space: nowrap; }
body.chat .day::before, body.chat .day::after { content: ""; flex: 1; height: 1px; background: var(--divider); }
body.chat .ev-list > .day:first-child { margin-top: 0; }
/* The box: two chips in one row that scrolls sideways (Rob 2026-09-18 pass 7: no "To:" control at all) */
body.chat .ask-foot .sugg { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
body.chat .ask-foot .sugg::-webkit-scrollbar { display: none; }
body.chat .sugg button { flex: 0 0 auto; white-space: nowrap; min-height: 44px; padding: 0 12px; }
@media (min-width: 1000px) {
  body.chat .askbox { padding: 8px 18px 6px; }
  body.chat .askbox .eyebrow { margin-bottom: 4px; line-height: 1; }
  body.chat .ask-foot .sugg { margin-top: 4px; }
}
@media (max-width: 999px) {
  body.chat .target select { font-size: 16px; }   /* iOS does not zoom a 16px control */
  body.chat .srcs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  body.chat .srcs::-webkit-scrollbar { display: none; }
  body.chat .srcs .src { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 640px) {
  body.chat .bubble, body.chat .meta { max-width: 84%; }   /* a phone column is narrow; the bubble still reads as one */
}
@media (max-width: 399px) {
  body.chat .ev.rec .a .bubble, body.chat .ev.rec .a .meta { max-width: 100%; }   /* the record's answers use the whole width on a phone */
}
@media (prefers-reduced-motion: reduce) {
  body.chat .sources > summary::after { transition: none; }
}

/* ══ Pass 4 (Rob 2026-09-18): journey bar, documents prominent, the honest plus ══ */
/* The journey bar: one 44px row directly under the address row, the nodes on one hairline. Done = a filled
   slate square, current = gold with its label at 500, upcoming = an outline. From 1000px every label shows
   in the eyebrow style (11px, uppercase, tracked); on the phone the squares plus only the current label
   ("Step 3 of 5, Offer & Negotiate"), one line. Nothing to tap. */
.journey { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 2px 0 0; min-width: 0; }
.journey .jnodes { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; flex: 0 0 auto; min-width: 0; }
.journey .jn { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; }
.journey .jn::after { content: ""; display: block; width: 14px; height: 1px; background: var(--divider); }
.journey .jn:last-child::after { display: none; }
.journey .jsq { flex: 0 0 10px; width: 10px; height: 10px; box-sizing: border-box; border: 1px solid var(--muted); background: var(--white); }
.journey .jn.done .jsq { background: var(--body); border-color: var(--body); }
.journey .jn.now .jsq { background: var(--gold); border-color: var(--gold); }
.journey .jl { display: none; }
.journey .jphone { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--heading); font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1000px) {
  body.chat .journey { flex: 1 1 100%; margin-top: 0; }
  .journey .jnodes { flex: 1 1 auto; width: 100%; }
  .journey .jn { flex: 1 1 0; gap: 8px; }
  .journey .jn:last-child { flex: 0 0 auto; }
  .journey .jn::after { flex: 1 1 12px; width: auto; margin: 0 12px; }
  .journey .jl { display: inline-block; font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 400; color: var(--body); white-space: nowrap; line-height: 1.2; }
  .journey .jn.done .jl { color: var(--secondary); }
  .journey .jn.now .jl { color: var(--heading); font-weight: 500; }
  .journey .jphone { display: none; }
}
@media (max-width: 1199px) and (min-width: 1000px) {
  .journey .jl { letter-spacing: 1.6px; }
  .journey .jn::after { margin: 0 8px; }
}

/* Documents, the second group and open: the newest three as entries, the rest under a 44px "All documents (n)" */
.grp.docs .docs-more { border-top: 1px solid var(--divider); margin-top: 2px; }
.grp.docs .docs-more > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 500; color: var(--heading); }
.grp.docs .docs-more > summary::-webkit-details-marker { display: none; }
.grp.docs .docs-more > summary::after { content: ""; width: 7px; height: 7px; border-right: 1px solid var(--secondary); border-bottom: 1px solid var(--secondary); transform: rotate(45deg); margin: -4px 0 0 2px; transition: transform .15s ease; }
.grp.docs .docs-more[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.grp.docs .docs-more > summary .n { font-size: 12px; color: var(--secondary); font-weight: 400; }
.grp.docs .docs-rest .fe:first-of-type { border-top: 1px solid var(--divider); }
.grp.docs .docs-empty { font-size: 13px; color: var(--secondary); margin: 6px 0 4px; padding: 0; border: 0; }
@media (prefers-reduced-motion: reduce) { .grp.docs .docs-more > summary::after { transition: none; } }

/* The honest plus: the note under the tools row (writes off), the staged chips (writes on) */
.iconbtn.plus[aria-expanded="true"] { border-color: var(--gold); color: var(--gold); }
.add-note { order: 5; flex: 1 1 100%; display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 0 4px 12px; border-left: 2px solid var(--gold); background: var(--white); font-size: 13px; color: var(--body); line-height: 1.5; }
.add-note .add-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.add-note .add-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -6px 0; border: 0; background: none; color: var(--heading); font-size: 14px; cursor: pointer; font-family: inherit; }
.add-note .add-close:hover { color: var(--danger); }
.fchips { order: 5; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
/* Writes on (routes/writes.js): the upload progress line under the chips; the checklist square as a real button
   (the 17px look kept, a 44px hit area around it); the error line under a step; the "Request sent" notice; the
   new-request form. */
.up-line { order: 5; flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--secondary); line-height: 1.5; }
.up-line.err { color: var(--danger); }
button.ck-box { padding: 0; cursor: pointer; font: inherit; appearance: none; -webkit-appearance: none; border-radius: 0; }
button.ck-box::before { content: ""; position: absolute; inset: -15px; }
button.ck-box:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button.ck-box[disabled] { cursor: progress; opacity: .6; }
.ck-err, .ck-swerr { margin: 4px 0 0; font-size: 12px; color: var(--danger); line-height: 1.5; }
.notice { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--gold); background: var(--white); font-size: 14px; color: var(--heading); line-height: 1.5; }
body.chat .notice { flex: 0 0 auto; }
.req-lead { font-size: 14px; color: var(--secondary); line-height: 1.6; margin: 0 0 20px; max-width: 640px; }
.req-form { max-width: 640px; }
.req-form select, .req-form textarea { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--divider); background: var(--white); color: var(--body); font: inherit; font-size: 16px; line-height: 1.5; border-radius: 0; box-sizing: border-box; }
.req-form select:focus, .req-form textarea:focus { outline: none; border-color: var(--gold); }
.req-form textarea { min-height: 140px; resize: vertical; }
.req-form input[type="text"] { min-height: 44px; box-sizing: border-box; }   /* the address input was 43px at 1280 (pass 8 sweep) */
.req-form .hint { font-size: 12px; color: var(--body); margin: 6px 0 0; line-height: 1.5; }
.req-form .hint-inline { font-weight: 400; color: var(--body); }
.req-form .err { margin: 0 0 14px; }
.req-form .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.req-form .actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; box-sizing: border-box; }
.req-form .actions .btn.ghost { color: var(--heading); border-color: var(--heading); }
.req-form .actions .btn.ghost:hover { background: var(--heading); color: var(--white); }
.fchip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; padding: 0 0 0 12px; border: 1px solid var(--gold-soft); background: var(--white); font-size: 12px; color: var(--heading); }
.fchip .fname { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.fchip .fsize { color: var(--secondary); white-space: nowrap; }
.fchip .fx { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--heading); font-size: 13px; cursor: pointer; font-family: inherit; padding: 0; }
.fchip .fx:hover { color: var(--danger); }

/* ══ Pass 5 (Rob + reviewer 2026-09-18): the composer on one row, three doors, grouped deals ══ */
/* The box: ONE 44px row under the textarea, [mic] [+] [The file, <1000px] ... [Ask your deal]
   [Send to team]; the suggestion chips under it; the reply-to line (and "Answered from your file")
   ABOVE the textarea. Phone: the row wraps to two lines at most (the two buttons take their own line,
   44px kept). Desktop idle height <= 150px: no eyebrow on screen (still read by assistive tech), 4px
   gaps, 44px textarea, 44px row, 44px chips. Pass 7 (2026-09-18): the "To:" control is gone entirely;
   there is nothing left to show or hide in #box-target besides the reply-to and answered-from-file
   lines, so it collapses to nothing when both are hidden. */
body.chat .askbox form { gap: 6px; }
body.chat #box-target { order: 0; flex: 1 1 100%; min-height: 0; margin: 0; }
body.chat #box-target:not(:has(.tl:not([hidden]))) { display: none; }
body.chat .askbox textarea { order: 1; min-height: 48px; }
body.chat .box-row { order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
body.chat .box-row .iconbtn { background: var(--white); flex: 0 0 44px; }
body.chat .box-row .spacer { flex: 1 1 0; min-width: 0; }
body.chat .box-row .btn.thefile { flex: 0 0 auto; min-height: 44px; }
body.chat .box-row .box-buttons { display: flex; align-items: center; gap: 8px; flex: 1 1 240px; min-width: 0; }
body.chat .box-row .box-buttons .btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; white-space: nowrap; box-sizing: border-box; }
body.chat .askbox .listen-line, body.chat .askbox .count, body.chat .askbox .reply-err, body.chat .add-note, body.chat .fchips, body.chat .up-line { order: 5; }
@media (max-width: 999px) {
  body.chat #box-target { margin: 0; min-height: 0; }
}
@media (min-width: 1000px) {
  body.chat .askbox { padding: 4px 18px 4px; }
  body.chat .askbox .eyebrow { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  body.chat .askbox form { gap: 4px; }
  body.chat .askbox textarea { flex: 1 1 100%; width: 100%; min-height: 44px; height: 44px; padding: 10px 14px; }
  body.chat .box-row { flex-wrap: nowrap; gap: 8px; }
  body.chat .box-row .box-buttons { flex: 0 0 auto; }
  body.chat .box-row .box-buttons .btn { flex: 0 0 auto; padding: 0 18px; }
  body.chat .ask-foot { margin-top: 0; }   /* the 8px foot margin was collapsing over the chips' 4px: 2 + 8 + 44 + 4 + 44 + 4 + 44 = 150 */
  body.chat .ask-foot .sugg { margin-top: 4px; }
}

/* The three doors (no deal yet): Cormorant name, one line, a 44px gold Start; one column on the phone, three from 700px */
.doors { margin: 4px 0 0; }
.doors .eyebrow { display: block; margin-bottom: 12px; }
.door-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.door-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 22px 20px 20px; border: 1px solid var(--divider); background: var(--white); }
.door-name { margin: 0; font-family: var(--font-display); font-size: 32px; line-height: 1.1; color: var(--heading); font-weight: 400; }
.door-line { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--secondary); }
.door-card .door-start { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 44px; min-width: 96px; padding: 0 22px; box-sizing: border-box; }
/* from 700px each door is one ROW (name, the line, Start), so the line really is one line in the 760px column */
@media (min-width: 700px) {
  .door-list { gap: 0; border-top: 1px solid var(--divider); }
  .door-card { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; column-gap: 20px; padding: 18px 4px; border: 0; border-bottom: 1px solid var(--divider); background: transparent; }
  .door-name { font-size: 30px; }
  .door-line { margin: 0; }
  .door-card .door-start { align-self: center; }
}
/* (pass 19: the compact Buy / Sell / Rent row above the list is gone; the page head carries ONE start button, below) */
/* grouped deals: an eyebrow + count per non-empty group, the rows unchanged */
.deal-group { margin-top: 24px; }
.deal-group:first-of-type { margin-top: 0; }
.group-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.group-head .count { font-size: 12px; color: var(--secondary); }
body.deals .notice { margin-bottom: 16px; }
/* Done fold (Rob 2026-09-18 pass 7): open requests first (newest updated), everything done/completed/cancelled
   under one 44px "Done (n)" row at the bottom of the group, closed unless the group has no open deal to show
   above it. Same summary treatment as the file's other folds (docs-more, sources). */
.done-fold { border-top: 1px solid var(--divider); margin-top: 2px; }
.done-fold > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 500; color: var(--heading); }
.done-fold > summary::-webkit-details-marker { display: none; }
.done-fold > summary::after { content: ""; width: 7px; height: 7px; border-right: 1px solid var(--secondary); border-bottom: 1px solid var(--secondary); transform: rotate(45deg); margin: -4px 0 0 2px; transition: transform .15s ease; }
.done-fold[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.done-fold > summary .n { font-size: 12px; color: var(--secondary); font-weight: 400; }
.done-fold .deal-list.done .deal-row:first-child { border-top: 1px solid var(--divider); }
@media (prefers-reduced-motion: reduce) { .done-fold > summary::after { transition: none; } }

/* ══ Pass 6 (Rob 2026-09-18): the deals list by ops stage: a 44px tab row + the client's archive ══ */
/* Pass 7 (2026-09-18, flatten): one flat tab row, Buying | Selling | Renting | Own | Sold | Archived, each a
   44px tab in the eyebrow style; a tab renders ONLY with at least one deal (selected = slate ground); with
   fewer than two non-empty tabs the row does not render at all. Without JS every rendered panel stacks. */
.deal-tabs { margin-top: 4px; }
.tab-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px 10px; margin: 0 0 18px; border: 0; background: none; }
.tab-row .tab { flex: 0 0 auto; min-width: 72px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px; border: 1px solid var(--divider); background: var(--white); font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--heading); text-decoration: none; text-align: center; white-space: nowrap; box-sizing: border-box; }

.tab-row .tab .n { font-size: 11px; color: var(--secondary); letter-spacing: 0; }
.tab-row .tab:hover { background: var(--bg-alt-1); color: var(--heading); }
.tab-row .tab[aria-selected="true"], .tab-row .tab[aria-selected="true"] .n { background: var(--heading); color: var(--white); }
.tab-row .tab[aria-selected="true"] { border-color: var(--heading); }
.tab-row .tab[aria-selected="true"] .n { opacity: .8; }
.tab-row .tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.tab-panel[hidden], .deal-group[hidden], .deals-status[hidden] { display: none; }
html.js .tab-panel.single[aria-labelledby] .group-head { display: none; }
html.js .tab-panel.single .deal-group { margin-top: 0; }
/* one status line under the tabs: "<address> archived." + a 44px Undo */
.deals-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: -6px 0 14px; }
.deals-status .undo { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--heading); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
/* the row: the link stays the whole row; the actions sit on its right edge. Phone: a 44px "..." opens the
   44px ghost Archive / Unarchive next to it. Desktop with a pointer: no "...", the ghost shows on hover or focus. */
.deal-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--divider); transition: background-color .15s ease; }
.deal-row:hover, .deal-row:focus-within { background: var(--bg-alt-1); }   /* the whole row, action slot included */
.deal-row .deal { flex: 1 1 auto; min-width: 0; border-bottom: 0; }
.deal-actions { position: relative; display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.deal-actions .more { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--secondary); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.deal-actions .more:hover, .deal-row.open .more { color: var(--heading); }
.deal-actions .act-form { display: none; margin: 0; }
.deal-actions .act { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 14px; box-sizing: border-box; color: var(--heading); border-color: var(--heading); font-size: 13px; white-space: nowrap; }
.deal-actions .act:hover { background: var(--heading); color: var(--white); }
.deal-actions .act[disabled] { opacity: .6; cursor: default; }
.deal-row.open .act-form, html:not(.js) .act-form { display: block; }
html:not(.js) .deal-actions .more { display: none; }
/* phone and tablet: the "..." stays on the row's line; the opened Archive / Unarchive takes its own line under the
   row, right-aligned, so the address never squeezes (the actions box becomes its children in the row's flex) */
@media (max-width: 999px) {
  .deal-row { flex-wrap: wrap; }
  .deal-row .deal { flex: 1 1 0; }   /* a zero basis keeps the link and the "..." on one line; only the action wraps */
  .deal-actions { display: contents; }
  .deal-actions .more { order: 2; align-self: center; }
  .deal-row.open .act-form, html:not(.js) .act-form { display: flex; order: 3; flex: 1 1 100%; justify-content: flex-end; padding: 0 2px 12px; }
}
/* desktop with a pointer: no "..." and no chevron; the action slot sits at the row's right edge and the ghost
   shows on hover or focus (it keeps its space, so nothing jumps) */
@media (hover: hover) and (min-width: 1000px) {
  .deal-row .deal .go { display: none; }
  .deal-actions { margin-left: 12px; }
  .deal-actions .more { display: none; }
  .deal-actions .act-form { display: block; opacity: 0; transition: opacity .15s ease; }
  .deal-row:hover .act-form, .deal-row:focus-within .act-form, .deal-row.open .act-form { opacity: 1; }
}
@media (max-width: 640px) {
  .tab-row { margin-left: 0; margin-right: 0; }
  .tab-row .tab { flex: 1 1 auto; padding: 0 12px; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .deal-actions .act-form, .deal-row { transition: none; } }
/* the deal page of an archived deal: one line + a 44px Unarchive (a plain form post) */
.archived-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.archived-note .inline-form { margin: 0; display: inline-flex; }
.archived-note .unarchive { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--heading); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.archived-note .unarchive:hover { color: var(--gold); }

/* ── Pass 8: the room's live line (Rooms group) ─────────────────────────────
   One line under the room's what-this-is line, computed in code from the listing's room (lib/room.js):
   "2 offers, 1 active" / "No offers yet". A small gold square, never a colored pill. */
.fe.door .live { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 12.5px; font-weight: 500; color: var(--heading); line-height: 1.4; overflow-wrap: anywhere; }
.fe.door .live .dot { flex: 0 0 6px; width: 6px; height: 6px; background: var(--gold); }

/* ── Pass 8: the Rent door's chooser (GET /rent, views/rent.js) ─────────────
   Two paths on one 760px column: the landlord's Show & Lease start, then the homes our landlords have for lease.
   360px first; a home is photo / words / one 44px button, stacked on the phone, one row from 700px. */
.rent-path { padding: 22px 0 24px; border-top: 1px solid var(--divider); }
.rent-path .eyebrow { display: block; margin-bottom: 8px; }
.rent-h { margin: 0 0 8px; font-family: var(--font-display); font-size: 30px; line-height: 1.12; font-weight: 400; color: var(--heading); }
.rent-line { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--secondary); max-width: 60ch; }
.rent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rent-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; box-sizing: border-box; }
.rent-none { margin: 0; padding: 16px 0 2px; font-size: 14px; color: var(--heading); border-top: 1px solid var(--divider); }
.rent-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--divider); }
.rent-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--divider); min-width: 0; }
.rent-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--divider); }
.rent-body { min-width: 0; }
.rent-addr { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 1.15; font-weight: 400; color: var(--heading); overflow-wrap: anywhere; }
.rent-where { margin: 2px 0 0; font-size: 13px; color: var(--secondary); }
.rent-price { margin: 8px 0 0; font-size: 15px; color: var(--heading); }
.rent-price strong { font-weight: 500; }
.rent-facts { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--secondary); overflow-wrap: anywhere; }
.rent-home .rent-apply { display: inline-flex; align-items: center; justify-content: center; justify-self: start; min-height: 44px; padding: 0 22px; box-sizing: border-box; white-space: nowrap; }
@media (max-width: 480px) {
  .rent-actions .btn, .rent-home .rent-apply { width: 100%; }
}
@media (min-width: 700px) {
  .rent-home { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; }
  .rent-home.has-photo { grid-template-columns: 180px minmax(0, 1fr) auto; }
  .rent-home .rent-apply { justify-self: end; }
}

/* ── Pass 8: the request form's lines under the select ──────────────────────
   The Sell note and the text-is-fastest line are muted 13px hints; "Text <number>" is its own 44px target. Two
   links, one shown: sms: where the pointer is coarse (a phone), tel: everywhere else. No JS. */
.req-form .hint.sell-note, .req-form .hint.text-first { font-size: 13px; color: var(--secondary); margin: 8px 0 0; }
.req-form .text-links { display: block; }
.req-form .text-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--heading); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.req-form .text-link.sms { display: none; }
@media (pointer: coarse) {
  .req-form .text-link.sms { display: inline-flex; }
  .req-form .text-link.tel { display: none; }
}
.rent-line.rent-have { margin-bottom: 12px; color: var(--heading); }

/* ══ Pass 11 (Rob 2026-09-18): Archived is always there + the Favorites tab ══
   Archived at 0 is a muted tab (still a 44px target, still selectable); its panel is one quiet line. A favorite is
   an entry in the deals list's own language: hairline rows, the address in Cormorant, one line of numbers with the
   status pill, the what-this-is line, and two 44px ghost actions (side by side, stacked full width on the phone).
   A photo only when the server kept its url (and widened img-src for it). */
.tab-row .tab.zero:not([aria-selected="true"]), .tab-row .tab.zero:not([aria-selected="true"]) .n { color: var(--secondary); }
.tab-row .tab.zero:not([aria-selected="true"]) { background: var(--bg-alt-1); }
.empty-line { margin: 0; padding: 16px 0 2px; font-size: 14px; line-height: 1.55; color: var(--secondary); border-top: 1px solid var(--divider); }
.empty-line[hidden] { display: none; }
.fav-solo { margin-top: 28px; }
.fav-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--divider); }
.fav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--divider); min-width: 0; }
.fav-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--divider); }
.fav-body { min-width: 0; }
.fav-photo-link { display: block; line-height: 0; }
.fav-addr-link { display: inline-block; padding: 8px 0; margin: -8px 0; min-height: 44px; box-sizing: border-box; color: inherit; text-decoration: none; }   /* a 44px target without moving the heading */
.fav-addr-link:hover { color: var(--gold); }
.fav-view { margin: 2px 0 0; }
.fav-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13px; font-weight: 500; letter-spacing: .4px; color: var(--heading); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); }
.fav-link:hover { color: var(--gold); }
.fav-addr { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 1.15; font-weight: 400; color: var(--heading); overflow-wrap: anywhere; }
.fav-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 0; font-size: 14px; color: var(--heading); }
.fav-facts .fav-nums { min-width: 0; overflow-wrap: anywhere; }
.fav .what { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--secondary); }
.fav-actions { display: flex; flex-wrap: wrap; gap: 8px 10px; min-width: 0; }
.fav-actions .fav-act { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 16px; box-sizing: border-box; color: var(--heading); border-color: var(--heading); text-align: center; }
.fav-actions .fav-act:hover { background: var(--heading); border-color: var(--heading); color: var(--white); }
.fav-err, .fav-note { margin: 0; padding: 16px 0 2px; font-size: 14px; line-height: 1.55; color: var(--heading); border-top: 1px solid var(--divider); }
.fav-note { border-top: 0; font-size: 13px; color: var(--secondary); }
@media (max-width: 480px) {
  .fav-actions .fav-act { flex: 1 1 100%; white-space: normal; }
}
@media (min-width: 700px) {
  .fav { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; }
  .fav.has-photo { grid-template-columns: 160px minmax(0, 1fr) auto; }
  .fav-actions { flex-direction: column; align-items: stretch; }
}

/* ── Pass 12 (Rob 2026-09-18): three document scopes. WHO CAN SEE a document is one 13px muted line under the
   what-this-is line, everywhere a document renders or is about to be filed (the words come from lib/doc_scope.js).
   The file's Documents group opens with its tools (Add a document, Attach from your documents) and stages picks in
   place; /deals has the "Your documents" tab; "Attach from your documents" is a native <dialog>. Brand tokens only,
   square corners, flat, every target 44px. ── */
.vis { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--body); overflow-wrap: anywhere; }
.fe .vis { margin-top: 2px; }
body.chat .ev.doc .vis { margin: 0; max-width: 78%; }
.askbox .stage-vis { order: 5; flex: 1 1 100%; margin: 0; }
.docs-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 4px 0 6px; min-width: 0; }
.docs-tools .docs-add, .ydocs-tools .ydocs-add { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 16px; box-sizing: border-box; color: var(--heading); border-color: var(--heading); text-align: center; }
@media (hover: hover) { .docs-tools .docs-add:hover, .ydocs-tools .ydocs-add:hover { background: var(--heading); border-color: var(--heading); color: var(--white); } }
.docs-tools .docs-attach { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-size: 13px; color: var(--heading); text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.docs-tools .docs-attach:hover { color: var(--gold); }
.docs-tools button:disabled, .ydocs-tools button:disabled, .docs-stage-actions button:disabled, .at-actions button:disabled { opacity: .5; cursor: default; }
.docs-stage { margin: 2px 0 8px; padding: 10px 0 10px 12px; border-left: 2px solid var(--gold); background: var(--white); min-width: 0; }
.docs-stage .fchips { margin-bottom: 6px; }
.docs-stage .stage-vis { margin: 0 0 10px; }
.docs-stage-actions { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.docs-stage-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 18px; box-sizing: border-box; text-align: center; }
.docs-stage-actions .btn.ghost { color: var(--heading); border-color: var(--heading); }
@media (hover: hover) { .docs-stage-actions .btn.ghost:hover { background: var(--heading); border-color: var(--heading); color: var(--white); } }
.grp.docs .up-line, .ydocs-tools .up-line { margin: 4px 0 6px; }
.grp.docs .reply-err, .ydocs-tools .reply-err { margin: 4px 0 6px; }
.grp.docs .add-note, .ydocs-tools .add-note { margin: 2px 0 8px; }
.docs-new .fe:first-of-type { border-top: 1px solid var(--divider); }
.file .fchip .fname { max-width: 130px; }

@media (hover: none) { .docs-tools .docs-add:hover, .ydocs-tools .ydocs-add:hover, .docs-stage-actions .btn.ghost:hover, .at-actions .btn.ghost:hover { background: transparent; border-color: var(--heading); color: var(--heading); } }

/* Your documents, on /deals */
.ydocs-lead { margin: 0; padding: 14px 0 4px; font-size: 14px; line-height: 1.55; color: var(--secondary); border-top: 1px solid var(--divider); }
.ydocs-lead .vis { display: block; margin-top: 2px; }
.ydocs-tools { padding: 8px 0 12px; min-width: 0; }
.ydocs-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--divider); }
.ydocs-list:empty { border-top: 0; }
.ydoc { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--divider); min-width: 0; }
.ydoc-body { flex: 1; min-width: 0; }
.ydoc-name { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.2; font-weight: 400; color: var(--heading); overflow-wrap: anywhere; }
.ydoc .what { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--secondary); overflow-wrap: anywhere; }
.ydoc .when { margin: 3px 0 0; font-size: 12px; color: var(--body); }
.ydoc-act { flex: 0 0 auto; }
.ydoc-act .btn.sm { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; box-sizing: border-box; }
#ydocs-empty { border-top: 0; padding-top: 4px; }

/* Attach from your documents: the same sheet recipe as the room intro (bottom sheet on the phone, centered from 1000px) */
dialog.attach { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 88vh; margin: 0; padding: 0; border: 0; border-top: 2px solid var(--gold); background: var(--white); color: var(--body); overflow: auto; overscroll-behavior: contain; }
dialog.attach[open] { animation: ri-up .22s ease-out; }
dialog.attach .at { margin: 0; padding: 10px 18px calc(20px + env(safe-area-inset-bottom, 0px)); }
.at-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.at-title { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.1; margin: 0; color: var(--heading); }
.at-vis { margin: 4px 0 10px; }
.at-state { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--secondary); }
.at-list { list-style: none; margin: 0 0 6px; padding: 0; border-top: 1px solid var(--divider); max-height: 46vh; overflow: auto; }
.at-row { border-bottom: 1px solid var(--divider); min-width: 0; }
.at-label { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 0; cursor: pointer; min-width: 0; }
.at-check { flex: 0 0 auto; width: 20px; height: 20px; margin: 0 2px 0 4px; accent-color: var(--gold); }
.at-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.at-name { font-size: 14px; font-weight: 500; color: var(--heading); line-height: 1.4; overflow-wrap: anywhere; }
.at-when { font-size: 12px; color: var(--body); }
.at-check:disabled + .at-text { opacity: .5; }
.at-actions { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; }
.at-actions .btn { flex: 1 1 140px; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; box-sizing: border-box; text-align: center; }
.at-actions .btn.ghost { color: var(--heading); border-color: var(--heading); }
@media (hover: hover) { .at-actions .btn.ghost:hover { background: var(--heading); border-color: var(--heading); color: var(--white); } }
@media (min-width: 1000px) {
  dialog.attach { inset: 0; margin: auto; width: min(520px, calc(100% - 32px)); max-height: min(88vh, 620px); border: 1px solid var(--divider); border-top: 2px solid var(--gold); }
  dialog.attach[open] { animation: ri-in .18s ease-out; }
}
@media (prefers-reduced-motion: reduce) { dialog.attach[open] { animation: none; } }

/* ══ Pass 13 (Rob 2026-09-18, "when you scale to phone this loses a lot ... the UI should catch this"): THE PHONE TEST ══
   PHONE ONLY (<1000px); from 1000px nothing here applies: .rec-stick is display:contents, the tabs, the
   Rooms tab's New request and the tab anchors take no room. At 360x740 the conversation gets at least 45% of
   the viewport at rest and the chrome (header + tabs + since line + box) at most half (team/00-PROCESS.md).
   1. NAMED TABS replace the drawer: a sticky 44px segmented row under the header, Chat | Checklist | Documents |
      Rooms, each with its small count. ONE DOM copy: body[data-ptab] (public/js/record.js) shows the conversation
      or the matching groups of the file. No JS (no body.tabbed) = the links jump, every section stacked.
   2. COMPACT HEADER: a 44px chevron back + the request eyebrow over the address (22px Cormorant, wraps), the
      pills on one line, the journey as its one-line label with the five squares. It rides in .rec-stick with the
      tabs: on Chat the whole block stays (the page rests at the newest entry, so the address would scroll away)
      while the chrome fits in half the viewport; on the other tabs, or past that budget (a four-line address, a
      notice, a keyboard), only the tab row (+ the since line) sticks: top = minus --stick-up, set by record.js.
   3. SINCE YOU LAST LOOKED is ONE 44px line with the count, closed until tapped (.opened), remembered.
   4. COMPACT BOX: a one-line textarea (grows to 120px), ONE 44px row [mic] [+] [Ask] [Send]; the chips only while
      the textarea is focused AND empty (.sugg-on), sliding in above the row. Idle height <= 120px. */
.rec-stick { display: contents; }
.ptabs, .file-tools { display: none; }
.tab-anchor { display: block; height: 0; }
@media (max-width: 999px) {
  /* the sticky block: header + tabs + since line, full bleed on the page's white */
  body.chat .page.wide { padding-top: 0; }
  body.chat .rec-stick { display: block; background: var(--white); margin: 0 -20px; padding: 0 20px; }
  body.chat.tabbed .rec-stick { position: sticky; top: calc(-1 * var(--stick-up, 0px)); z-index: 7; }   /* without JS nothing sticks: the since lines are open there and the block would be tall */
  /* 2. the compact header */
  body.chat .rec-head { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 2px; align-items: center; margin: 0; padding: 4px 0 8px; }
  body.chat .rec-top, body.chat .rec-title { display: contents; }
  body.chat .rec-top .back { grid-column: 1; grid-row: 1 / span 2; align-self: start; justify-content: center; width: 44px; min-width: 44px; min-height: 44px; margin-left: -14px; gap: 0; font-size: 24px; line-height: 1; color: var(--heading); }
  body.chat .rec-top .back .back-l { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  body.chat .rec-top .eyebrow { grid-column: 2; grid-row: 1; align-self: end; display: block; margin: 0; padding-top: 6px; font-size: 10px; letter-spacing: 2.4px; line-height: 1.2; }
  body.chat .rec-top .eyebrow::before { display: none; }
  body.chat .rec-title h1 { grid-column: 2; grid-row: 2; align-self: start; margin: 1px 0 0; font-size: 21px; line-height: 1.15; text-wrap: balance; }   /* wraps to two lines when it must, never an ellipsis */
  body.chat .rec-head .status { grid-column: 1 / -1; grid-row: 3; flex-wrap: wrap; gap: 6px; min-height: 0; margin: 6px 0 0; }
  body.chat .rec-head .status .pill { flex: 0 0 auto; font-size: 10px; letter-spacing: 1px; padding: 3px 8px; white-space: nowrap; }
  body.chat .rec-head .status .opened { display: none; }
  body.chat .rec-head .status .new-request { flex: 0 0 auto; margin: -11px 0 -11px auto; min-height: 44px; min-width: 44px; padding: 0 2px; border: 0; background: none; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
  body.chat .rec-head .status .new-request:hover { background: none; color: var(--heading); }
  body.chat.tabbed[data-ptab="dates"] .rec-head .status .new-request { visibility: hidden; }   /* the Dates tab carries its own 44px New request: never two on one screen */
  /* a 44px target on a 22px line (nothing above or below it on that side is tappable); record.js hides it when it would wrap to a second line: then New request lives at the top of the Rooms tab only */
  body.chat .journey { grid-column: 1 / -1; grid-row: 4; min-height: 0; margin: 7px 0 0; gap: 10px; }
  body.chat .journey .jn::after { width: 10px; }
  body.chat .journey .jsq { flex-basis: 8px; width: 8px; height: 8px; }
  body.chat .notice { margin: 0 0 8px; }
  /* 1. the named tabs */
  body.chat .ptabs { display: flex; margin: 0; border: 0; outline: 1px solid var(--divider); outline-offset: -1px; background: var(--white); }   /* the hairline is drawn inside, so the row is 44px, not 46 */
  body.chat .ptabs .tab { flex: 1 1 auto; min-width: 44px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 4px; font-size: 11px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; color: var(--heading); text-decoration: none; white-space: nowrap; border-right: 1px solid var(--divider); }
  body.chat .ptabs .tab:last-child { border-right: 0; }
  body.chat .ptabs .tab .n { font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--secondary); }
  body.chat .ptabs .tab:hover { background: var(--bg-alt-1); color: var(--heading); }
  body.chat .ptabs .tab[aria-current] { background: var(--heading); color: var(--white); }
  body.chat .ptabs .tab[aria-current] .n { color: var(--white); opacity: .8; }
  body.chat .ptabs .tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
  /* what each tab shows: ONE DOM copy, shown or hidden. Without JS (no .tabbed) everything is stacked. */
  body.chat .file { display: block; margin-top: 24px; font-size: 14px; }
  body.chat .file-tools { display: flex; padding: 12px 0 4px; }
  body.chat .file-tools .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 18px; box-sizing: border-box; color: var(--heading); border-color: var(--heading); }
  body.chat .file-tools .btn:hover { background: var(--heading); color: var(--white); }
  body.chat.tabbed .file { margin-top: 0; padding-bottom: 28px; }
  body.chat.tabbed .file .fhead { display: none; }
  body.chat.tabbed[data-ptab="chat"] .file { display: none; }
  body.chat.tabbed:not([data-ptab="chat"]) .convo, body.chat.tabbed:not([data-ptab="chat"]) .since { display: none; }
  body.chat.tabbed[data-ptab="checklist"] .file > :not(#grp-checklist) { display: none; }
  body.chat.tabbed[data-ptab="documents"] .file > :not(#grp-documents):not(#grp-notes) { display: none; }
  /* FIVE tabs (fix round 2026-09-19, QC B5): Dates = New request, Next due, Key dates and Requests, each under its own
     heading (the three summaries stay: one tab, three named sections); Rooms = the rooms alone */
  body.chat.tabbed[data-ptab="dates"] .file > :not(#file-tools):not(#grp-next):not(#grp-dates):not(#grp-requests):not(#grp-contacts):not(#grp-rebate) { display: none; }
  body.chat.tabbed[data-ptab="rooms"] .file > :not(#grp-rooms) { display: none; }
  /* the tab already names these three groups: no second heading, no top rule under the tab row (record.js keeps them open) */
  body.chat.tabbed #grp-checklist > summary, body.chat.tabbed #grp-documents > summary, body.chat.tabbed #grp-rooms > summary { display: none; }
  body.chat.tabbed #grp-checklist, body.chat.tabbed #grp-documents, body.chat.tabbed #grp-rooms { border-top: 0; }
  body.chat.tabbed #grp-documents > .gb, body.chat.tabbed #grp-rooms > .gb, body.chat.tabbed #grp-checklist > .gb { padding-top: 10px; }
  /* a phone column is for reading: the rail's 12 to 13px type steps up */
  body.chat .file .grp > summary { font-size: 14px; }
  body.chat .file .fe { padding: 12px 0; }
  body.chat .file .fe .name { font-size: 15px; }
  body.chat .file .fe .what, body.chat .file .fe .vis, body.chat .file .grp .lead, body.chat .file .nd .src { font-size: 13px; }
  body.chat .file .fe .when { font-size: 12px; }
  body.chat .file .nd .v { font-size: 15px; }
  body.chat .file .ticket .name { font-size: 15px; }
  body.chat .file .ticket .when { font-size: 12px; }
  body.chat .file .ticket { padding: 10px 0; }
  body.chat .docs-tools { gap: 4px 12px; }
  body.chat .docs-tools .docs-add { padding: 0 12px; }
  /* 3. the since line: static inside the sticky block, ONE 44px line with the count, closed until tapped */
  body.chat .since { position: static; margin-bottom: 0; border-top: 0; }
  body.chat .since-row { flex-wrap: nowrap; gap: 10px; min-height: 44px; padding: 0 32px 0 0; }
  body.chat .since-row .eyebrow { flex: 0 1 auto; min-width: 0; }
  body.chat .since-row .sum { flex: 1 1 auto; margin-top: 0; white-space: nowrap; font-size: 0; }   /* the phone line prints the count alone (data-n); the sentence stays the text */
  body.chat .since-row .sum::before { content: attr(data-n); font-size: 13px; }
  body.chat.tabbed .since:not(.opened) .since-body { display: none; }
  body.chat.tabbed .since:not(.opened) .since-row .chev { transform: rotate(45deg); margin-top: -6px; }
  body.chat.tabbed .since.opened .since-row .chev { transform: rotate(-135deg); margin-top: -2px; }
  body.chat .since-body { max-height: 46vh; }   /* opened by a tap: three lines and "and N more" fit whole at 740px; a scroll or a second tap folds it */
  body.chat .since .at { padding: 0; margin: 0 0 4px; }   /* the attach dialog's .at padding (pass 12) must not reach this line */
  /* 4. the compact box */
  body.chat .askbox { padding: 8px 20px 8px; }
  body.chat .askbox > .eyebrow { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  body.chat .askbox form { gap: 6px; }
  body.chat .askbox textarea { min-height: 44px; height: 44px; max-height: 120px; padding: 10px 12px; line-height: 1.45; }
  body.chat .box-row { flex-wrap: nowrap; }
  body.chat .box-row .spacer { display: none; }
  body.chat .box-row .box-buttons { flex: 1 1 auto; }
  body.chat .box-row .box-buttons .btn { padding: 0 8px; }
  body.chat .box-buttons .btn .lx { display: none; }
  body.chat .askbox .ask-foot { order: 2; flex: 1 1 100%; min-width: 0; margin: 0; }
  body.chat .askbox .ask-foot .sugg { margin-top: 0; }
  body.chat.tabbed .askbox:not(.sugg-on) .ask-foot { display: none; }
  /* QC 2026-09-19 B2: the chips are an OVERLAY above the box, out of the flow. The box keeps ONE height whether the
     textarea has focus or not, so a blur never moves the stream between a tap's touchstart and its click (the first
     tap on "Send this question to my ShopProp team" and on Reply used to land on whatever slid under the finger). */
  body.chat.tabbed .askbox .ask-foot { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 1; margin: 0; padding: 6px 20px; box-sizing: border-box; background: var(--white); border-top: 1px solid var(--divider); }
  body.chat .askbox.sugg-on .ask-foot { animation: sugg-in .16s ease-out; }
}
@media (max-width: 640px) {
  body.chat .rec-stick { margin: 0 -14px; padding: 0 14px; }
  body.chat .askbox { padding: 8px 14px 8px; }
  body.chat.tabbed .askbox .ask-foot { padding: 6px 14px; }
  /* THE DEALS PAGE on the phone (the phone test, 360x740): six named tabs wrapped to THREE rows and pushed the first
     deal to 54% of the screen. The same buttons now sit on ONE 44px line that scrolls sideways (every tab keeps its
     name and count; the fade at the right edge says there is more; public/js/deals.js brings the current tab into view). */
  .tab-row { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -14px 14px; padding: 0 14px; scroll-padding: 0 14px; }
  .tab-row::-webkit-scrollbar { display: none; }
  .tab-row .tab { flex: 0 0 auto; }
  .tab-row::after { content: ""; position: sticky; right: -14px; flex: 0 0 28px; align-self: stretch; margin-left: -10px; background: linear-gradient(90deg, transparent, var(--white)); pointer-events: none; }   /* its own place is AFTER the last tab, so at the end of the row it covers nothing */
}
/* the five names on ONE 44px row: the full words from 420px, "Docs" at 360, "List" too under 350 (views/deal.js prints
   the variants as spans; aria-label always carries the full name) */
.ptabs .tw.tm, .ptabs .tw.ts { display: none; }
@media (max-width: 419px) { .ptabs .tw.tl { display: none; } .ptabs .tw.tm { display: inline; } body.chat .ptabs .tab { letter-spacing: 0.5px; gap: 4px; padding: 0 2px; } }
@media (max-width: 349px) { .ptabs .tw.tm { display: none; } .ptabs .tw.ts { display: inline; } body.chat .ptabs .tab { font-size: 10.5px; letter-spacing: 0.2px; gap: 3px; padding: 0 2px; } }   /* a 320px phone: the five names and counts still fit one row */
@keyframes sugg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body.chat .askbox.sugg-on .ask-foot { animation: none; } }
@media (min-width: 1000px) {
  /* the chips moved INSIDE the form (one DOM copy, the phone orders them above the row): same place, same 4px, on desktop */
  body.chat .askbox .ask-foot { order: 6; flex: 1 1 100%; min-width: 0; margin: 0; }
  body.chat .askbox .ask-foot .sugg { margin-top: 0; }
}

/* ══ Pass 15 (Rob 2026-09-19): SEVERAL REQUESTS OPEN AT ONCE (e.g. Under contract, Inspection, Rebate) ══
   1. THE REQUEST STRIP (#rq-strip, only with 2+ open requests): ONE 44px row that scrolls sideways with a fade at the
      edge: All + a chip per open request (label, "Waiting on you" as a small gold word, a 6px gold dot for news) +
      "Closed (n)". Every chip is a 44px target drawn as a 30px box (the look stays light). On the phone it rides in
      the sticky block directly under the since line, Chat tab only; from 1000px record.js moves the ONE node to the
      top of the conversation column, above the stream.
   2. "Going to: <request>. Change": ONE quiet 13px line above the button row; Change is a 44px hit area over a native
      select (invisible, 16px so iOS never zooms). It takes no room until there is something to route.
   3. The checklist switcher: a 44px chip row above the checklist, the same chip recipe.
   Brand tokens only, square corners, flat. */
.rq-strip { position: relative; min-width: 0; background: var(--white); border-bottom: 1px solid var(--divider); }
.rq-row { display: flex; align-items: center; gap: 6px; min-height: 44px; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
.rq-row::-webkit-scrollbar { display: none; }
.rq-row::after { content: ""; position: sticky; right: 0; flex: 0 0 28px; align-self: stretch; margin-left: -6px; background: linear-gradient(90deg, transparent, var(--white)); pointer-events: none; }   /* its own place is AFTER the last chip: at the end of the row it covers nothing */
.rq, .ck-chip { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; min-width: 44px; padding: 0 12px; box-sizing: border-box; margin: 0; border: 0; background: none; font: inherit; font-size: 13px; line-height: 1.2; color: var(--heading); text-decoration: none; white-space: nowrap; cursor: pointer; }
.rq::before, .ck-chip::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; bottom: 7px; border: 1px solid var(--divider); background: var(--white); }
.rq > *, .ck-chip > * { position: relative; }
.rq.all { position: sticky; left: 0; z-index: 2; justify-content: center; font-weight: 500; background: var(--white); }   /* the way back never scrolls out of the row */
.rq.closed { color: var(--secondary); }
.rq.closed::before { border-style: dashed; }
.rq[aria-current]::before, .ck-chip[aria-pressed="true"]::before { background: var(--heading); border-color: var(--heading); }
.rq[aria-current], .ck-chip[aria-pressed="true"] { color: var(--white); }
.rq:focus-visible, .ck-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: -5px; }
.rq-dot { flex: 0 0 6px; width: 6px; height: 6px; background: var(--gold); }
.rq-w { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 400; line-height: 1; padding: 0; border: 0; background: none; color: inherit; opacity: .85; }   /* a status, not a button inside a button (Rob 2026-09-20) */
.rq-wd { width: 6px; height: 6px; background: var(--gold); display: inline-block; flex: 0 0 6px; }
.rq-h { flex: 0 0 auto; font-size: 11px; font-weight: 500; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold); padding-right: 6px; white-space: nowrap; }
@media (hover: hover) { .rq:not([aria-current]):hover::before, .ck-chip:not([aria-pressed="true"]):hover::before { border-color: var(--heading); } }
.ck-chip:disabled { opacity: .55; cursor: default; }
.ck-switch { display: flex; align-items: center; gap: 6px; min-height: 44px; min-width: 0; margin: 0 0 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ck-switch::-webkit-scrollbar { display: none; }
.ck-chip span { position: relative; }
#checklist-switch-err { margin: 0 0 8px; }
/* the stream's filter header: "Showing: <request>. Show all" (the link is 44px) */
body.chat .stream .filter-line { font-size: 13px; }
.rq-row { scroll-padding-left: 60px; }
#grp-requests { scroll-margin-top: 56px; }
/* Going to: one quiet line. 32px tall; the Change hit area is 44px (it reaches 6px into the form's own gaps, never over another control) */
body.chat .going { order: 2; flex: 1 1 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; min-width: 0; min-height: 32px; margin: 0; font-size: 13px; line-height: 1.4; color: var(--secondary); }
body.chat .going b { color: var(--heading); font-weight: 500; }
body.chat .going .going-t { min-width: 0; overflow-wrap: anywhere; }
body.chat .going-change { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; margin: -6px 0; padding: 0 6px; box-sizing: border-box; color: var(--heading); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
body.chat .going-change select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer; appearance: none; -webkit-appearance: none; }
body.chat .going-change:focus-within { outline: 2px solid var(--gold); outline-offset: -8px; }
@media (max-width: 999px) {
  body.chat .rq-strip { border-bottom: 1px solid var(--divider); }   /* the since line above already draws the hairline between them */
  body.chat.tabbed:not([data-ptab="chat"]) .rq-strip { display: none; }
  /* The phone: a chosen chip IS the filter's header (it is dark, All is pinned beside it), so "Showing: <request>. Show
     all" stays where it was, at the top of the filtered stream, and costs the first screen nothing. Only a filter on a
     request that has NO chip (a closed one, picked in the Requests group: body.rq-loose) pins the line under the sticky
     block: one 32px line, the link's 44px hit area reaching into the line's own margins (record.js sets --stick-h and
     counts the line in the half-viewport budget). */
  body.chat.tabbed.rq-loose .stream .filter-line { position: sticky; top: var(--stick-h, 0px); z-index: 3; min-height: 32px; line-height: 32px; margin: 0 -14px; padding: 0 14px; background: var(--white); border-bottom: 1px solid var(--divider); }
  body.chat.tabbed.rq-loose .stream .filter-line a { margin: -6px 0; vertical-align: middle; }
}
@media (min-width: 1000px) {
  body.chat .rq-strip { flex: 0 0 auto; margin: 0 0 4px; }
  body.chat.rq-on .stream .filter-line { position: sticky; top: 0; z-index: 3; margin: 0; background: var(--white); border-bottom: 1px solid var(--divider); }   /* with the strip up the header stays in view while the filtered stream scrolls */
}

/* ── pass 16 (Rob 2026-09-19): DOCUMENTS ORGANIZE THEMSELVES. Every document list is grouped by category
   (views/doc_groups.js): one 44px <details> per non-empty category, the uppercase label left, the count right, the
   same chevron as the checklist's phases; the "Recent" strip above the deal's groups; the small muted scope word
   next to the who-can-see-it sentence; the mail reader's line. Brand tokens only. ── */
.dcats { min-width: 0; }
.dcat { border-top: 1px solid var(--divider); min-width: 0; }
.dcat > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; padding: 0 2px; }
.dcat > summary::-webkit-details-marker { display: none; }
.dcat > summary::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-right: 1px solid var(--secondary); border-bottom: 1px solid var(--secondary); transform: rotate(-45deg); margin: 0 4px 0 0; transition: transform .15s ease; }
.dcat[open] > summary::before { transform: rotate(45deg); margin-top: -3px; }
.dcat-l { font-size: 11px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--secondary); overflow-wrap: anywhere; }
.dcat > summary:hover .dcat-l { color: var(--body); }
.dcat-n { margin-left: auto; font-size: 11px; color: var(--secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dcat-rows { list-style: none; margin: 0; padding: 0 0 6px; min-width: 0; }
.dcat-rows > .fe:first-child { border-top: 0; padding-top: 2px; }
.dcat-rows > .ydoc:first-child { padding-top: 6px; }
.dcat-rows > .ydoc:last-child { border-bottom: 0; }
.visline { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--body); overflow-wrap: anywhere; }
.visline .vis { display: inline; margin: 0; }
.scope-w { display: inline-block; margin-right: 3px; padding: 0 6px; border: 1px solid var(--divider); font-size: 10.5px; line-height: 1.65; letter-spacing: .6px; text-transform: uppercase; color: var(--body); white-space: nowrap; vertical-align: 1px; }
.fe .when.by-reader, .ydoc .when.by-reader { color: var(--secondary); }
.docs-recent { padding: 0 0 8px; min-width: 0; }
.docs-h { padding: 10px 2px 2px; font-size: 11px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--secondary); }
.docs-recent .docs-new:empty + .fe, .docs-recent .docs-new > .fe:first-child { border-top: 0; }
.docs-recent .docs-new:not(:empty) + .fe { border-top: 1px solid var(--divider); }
.fe.recent { align-items: center; padding: 3px 0; }
.fe.recent .when { margin-top: 1px; }
.ydocs-list { border-top: 0; }
@media (prefers-reduced-motion: reduce) { .dcat > summary::before { transition: none; } }

/* ── CONTRAST (QC 2026-09-19, finding 17) ────────────────────────────────────
   --muted on white is 2.26:1 and it was the colour of every small line a person has to READ: the document
   VISIBILITY lines, hints, filed dates, the footer. AA needs 4.5:1; --secondary is 4.02:1, so those lines now use the
   brand's --body (7.5:1) and stay quiet by their SIZE, not by being faint. brand.css is untouched (ShopProp is the
   locked model): the rules above were changed in this file, and the two brand classes 3.0 prints are overridden here.
   --muted stays for what is not text: borders, glyphs, a disabled box. Placeholders use --secondary. White on gold
   buttons and gold eyebrows are the brand's own and stay. */
.app-foot .muted, .app-foot .small, .page .muted, .page .small.muted { color: var(--body); }
.fav-off { margin: 0; font-size: 13px; line-height: 1.5; color: var(--body); }

/* the request strip's last chip (the phone only): New request, a plain link with the gold edge of an action */
.rq.new { font-weight: 500; }
.rq.new::before { border-color: var(--gold); }
@media (min-width: 1000px) { .rq.new { display: none; } }   /* desktop has the header's New request button */
.src.plain.stopped { font-weight: 500; }
.at-rowvis { display: block; margin: 2px 0 0; font-size: 12px; }

/* ── THE PHONE TEST on the request pages (QC 2026-09-19, B5: rules 3 and 4) ─────
   Below 1000px: the lead is ONE short line (the paragraph shows from 1000px), the text line is one 44px row ("A text is
   fastest." + the number), the long helper lines fold into ONE native details at the end ("Help with this form",
   closed), the details box is three rows, and the actions are a STICKY BOTTOM BAR: Send request is on the first screen
   at 360x740 and in the bottom third. The wire sentence under Details always shows. */
.req-lead .lead-short, .req-form .tf-short, .req-help { display: none; }
@media (max-width: 999px) {
  .req-lead { margin: 0 0 10px; }
  .req-lead .lead-full, .req-form .hint.long, .req-form .long-inline, .req-form .tf-full { display: none; }
  .req-lead .lead-short, .req-form .tf-short { display: inline; }
  .req-head { margin-bottom: 4px; }
  .req-form .field { margin-bottom: 10px; }
  .req-form .hint.text-first { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; min-height: 44px; margin: 0; }
  .req-form .text-links { display: inline-block; }
  .req-form textarea { height: 92px; min-height: 92px; }
  .req-help { display: block; margin: 0 0 4px; border-top: 1px solid var(--divider); }
  .req-help > summary { display: flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--body); cursor: pointer; list-style: none; }
  .req-help > summary::-webkit-details-marker { display: none; }
  .req-help > summary::before { content: ""; width: 7px; height: 7px; border-right: 1px solid var(--secondary); border-bottom: 1px solid var(--secondary); transform: rotate(-45deg); margin: 0 10px 0 2px; transition: transform .15s ease; }
  .req-help[open] > summary::before { transform: rotate(45deg); }
  .req-help-body p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--body); }
  .req-form .actions { position: sticky; bottom: 0; z-index: 4; flex-wrap: nowrap; margin: 8px -20px 0; padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--white); border-top: 1px solid var(--divider); }
  .req-form .actions .btn.gold { flex: 1 1 auto; }
}
@media (max-width: 640px) { .req-form .actions { margin: 8px -14px 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 999px) {
  /* the request page's top row stays ONE line: the way back is cut with an ellipsis, the eyebrow never wraps */
  .req-head .rec-top { flex-wrap: nowrap; min-width: 0; }
  .req-head .rec-top .back { flex: 0 1 auto; min-width: 44px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; }
  .req-head .rec-top .eyebrow { flex: 0 0 auto; white-space: nowrap; }
  .req-lead { margin: 0 0 14px; }
}
/* a short page on the phone (the Rooms tab, a deals tab with one row): the footer and the wire notice sit at the
   bottom of the screen, never above a band of white (QC 2026-09-19, the deals page note) */
@media (max-width: 999px) {
  body.has-wire-notice { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
  body.has-wire-notice > main.page { flex: 1 0 auto; }
}

/* ══ Pass 17 (Rob 2026-09-20): QUIETER SUGGESTIONS ══
   The suggestion chips are an OVERLAY above the box on EVERY width (the phone's pass 13 overlay, now the desktop's
   too: the desktop used to show them all the time, under the row). They show only while the textarea is focused AND
   empty (.sugg-on, public/js/record.js + public/js/ask-ideas.js), so the box keeps ONE height and nothing on the
   page moves. After three completed asks in this browser they retire; the small "Ideas" link in the tool row (a
   44px target, hidden until then) brings them back on demand. No chips at all where AI is off. */
body.chat .askbox:not(.sugg-on) .ask-foot { display: none; }
body.chat .askbox .ask-foot { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 1; margin: 0; padding: 6px 18px; box-sizing: border-box; background: var(--white); border-top: 1px solid var(--divider); }
body.chat .askbox .ask-foot .sugg { margin-top: 0; }
body.chat .askbox.sugg-on .ask-foot { animation: sugg-in .16s ease-out; }
body.chat .box-row .ideas { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px; font-size: 13px; color: var(--body); text-decoration: underline; text-underline-offset: 3px; }
body.chat .box-row .ideas:hover, body.chat .box-row .ideas[aria-expanded="true"] { color: var(--heading); }
body.chat .box-row .ideas:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (max-width: 640px) { body.chat .askbox .ask-foot { padding: 6px 14px; } }
@media (prefers-reduced-motion: reduce) { body.chat .askbox.sugg-on .ask-foot { animation: none; } }

/* ══ Pass 17 (Rob 2026-09-20): YOUR DEALS WITH SUBSTANCE (restrained: no banner, gradient, icon or illustration) ══
   1. THE LIBRARY PAIR (views/layout.js .nav-lib): Favorites and Your documents left the deals tab row for the header,
      two 44px links beside the person's name. Phone: ONE 44px row under the wordmark.
   2. THE PAGE SPEAKS FIRST (.speak): one or two Cormorant lines under the heading, computed in code.
   3. RICHER ROWS: a 96x72 photo (only when one was let through), the address, what the person is doing + the stage
      in words, the deal header's journey squares as a mini-bar, the pill, Next and Last. Still ONE link per row.
      Phone: the photo sits beside the address block; Next, Last and the pill run the full width under it.
   4. The two library pages (/favorites, /your-documents): a 44px way back over the heading. */
.nav.app-nav .nav-lib { display: flex; align-items: center; gap: 0 20px; margin-left: auto; min-width: 0; }
.nav.app-nav .lib-link { display: inline-block; min-width: 44px; height: 44px; line-height: 44px; box-sizing: border-box; font-size: 13px; color: var(--heading); text-decoration: none; white-space: nowrap; }   /* inline, so the current page's underline runs unbroken under the name and its count */
.nav.app-nav .lib-link .n { font-size: 12px; color: var(--secondary); }
.nav.app-nav .lib-link:hover { color: var(--primary); }
.nav.app-nav .lib-link[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav.app-nav .lib-link:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.page-head:has(+ .speak) { margin-bottom: 8px; }
.speak { margin: 0 0 20px; }
.speak-line { margin: 0; font-family: var(--font-display); font-size: 23px; font-weight: 500; line-height: 1.3; color: var(--heading); overflow-wrap: anywhere; }
.speak-line + .speak-line { margin-top: 2px; }
.speak-line strong { font-weight: 600; }
.deal-row .deal { align-items: flex-start; }
.deal-row .deal .go { align-self: center; }
/* /ops/usage: a wide numbers table scrolls inside its own box, never the page */
.ops-scroll { overflow-x: auto; max-width: 100%; }
.ops-scroll table { min-width: 640px; font-variant-numeric: tabular-nums; }
.ops-scroll th, .ops-scroll td { white-space: nowrap; padding: 6px 12px 6px 0; text-align: right; }
.ops-scroll th:first-child { text-align: left; }
/* STRUCTURED REQUEST FORMS (views/request_new.js typeFields): the chosen type's own questions */
.req-fields { margin: 4px 0 18px; padding: 16px 16px 4px; border: 1px solid var(--divider); background: var(--bg-alt-1); min-width: 0; }
.req-fields legend { padding: 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); }
.req-fields .field { margin-bottom: 14px; }
.req-fields .field select, .req-fields .field input, .req-fields .field textarea { min-height: 48px; font-size: 16px; background: var(--white); border-color: var(--muted); color: var(--heading); width: 100%; box-sizing: border-box; }
.req-fields .field select:focus, .req-fields .field input:focus, .req-fields .field textarea:focus { border-color: var(--heading); outline: 1px solid var(--heading); outline-offset: 0; }
.req-fields [aria-invalid="true"] { border-color: var(--danger) !important; }
.req-fields .money { position: relative; }
.req-fields .money-s { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--secondary); font-size: 16px; }
.req-fields .money input { padding-left: 30px; font-variant-numeric: tabular-nums; }
.req-fields .field-caution { padding: 12px; border-left: 3px solid var(--gold); background: var(--gold-bg); }
.req-fields .hint.caution { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--heading); }
@media (min-width: 720px) { .req-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .req-fields legend, .req-fields .field-caution, .req-fields .field:has(textarea) { grid-column: 1 / -1; } }
/* YOUR REBATE on the deal file (views/deal.js fileRebate, public/js/rebate.js) */
.rebate-amount { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 12px; border-bottom: 1px solid var(--divider); }
.rebate-n { font-family: var(--font-display); font-size: 34px; line-height: 1.1; font-weight: 500; color: var(--heading); font-variant-numeric: lining-nums tabular-nums; }
.rebate-by { font-size: 12.5px; color: var(--secondary); }
.rebate-lines { margin: 8px 0 10px; }
.rebate-lines div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--divider); font-size: 13.5px; }
.rebate-lines dt { color: var(--secondary); flex: 0 0 auto; }
.rebate-lines dd { margin: 0; color: var(--heading); text-align: right; overflow-wrap: anywhere; }
/* YOUR NOTES on the deal file (views/deal.js fileNotes, public/js/notes.js) */
#notes-text { width: 100%; box-sizing: border-box; min-height: 140px; padding: 12px; border: 1px solid var(--muted); background: var(--white); color: var(--heading); font: inherit; font-size: 15px; line-height: 1.55; resize: vertical; }
#notes-text:focus { border-color: var(--heading); outline: 1px solid var(--heading); outline-offset: 0; }
.notes-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; }
.notes-acts .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; color: var(--heading); border-color: var(--heading); }
.notes-acts .btn:disabled { opacity: .5; cursor: default; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* CONTACTS on the deal file (views/deal.js fileContacts, public/js/contacts.js) */
.contact-kind { margin: 12px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); }
.contact { padding: 6px 0 8px; border-bottom: 1px solid var(--divider); }
.contact-name { font-size: 14px; font-weight: 500; color: var(--heading); overflow-wrap: anywhere; }
.contact a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 14px; color: var(--heading); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); font-size: 13.5px; overflow-wrap: anywhere; }
.contacts-wire { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--gold); background: var(--gold-bg); font-size: 12.5px; line-height: 1.5; color: var(--heading); }
/* HELP (views/help.js) + the footer's Help link */
.app-foot p { display: flex; align-items: center; flex-wrap: wrap; gap: 0 18px; }
body.signin .foot-help { display: none; }   /* the sign-in column already carries its own help link; the wire notice must stay on the first screen */
body.signin .signin-wrap { padding-top: 24px; padding-bottom: 12px; }
body.signin .signin-wrap .tag { margin-bottom: 22px; }
body.signin > .app-foot { padding-bottom: 10px; }
@media (max-width: 640px) { body.signin .signin-wrap { padding-top: 10px; padding-bottom: 4px; } body.signin .signin-wrap .tag { margin-bottom: 14px; } body.signin .signin-wrap h1 { margin-bottom: 4px; } body.signin > .app-foot { padding-bottom: 6px; } }
body.signin .signin-alt { margin-top: 8px; }
body.signin .test-note { margin-top: 10px; }
/* a 44x44 target that adds NO height to the footer (the deal page's column is measured to the pixel) */
.foot-help { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; margin: -12px 0 -12px -8px; color: var(--heading); text-decoration: underline; text-underline-offset: 3px; }
.help { max-width: 640px; }
.help-sec { margin: 0 0 8px; }
.help-p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.65; color: var(--body); }
.help-lines { list-style: none; margin: 0 0 14px; padding: 0; border-top: 1px solid var(--divider); }
.help-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; min-height: 52px; padding: 4px 0; border-bottom: 1px solid var(--divider); }
.help-where { font-size: 14px; font-weight: 500; color: var(--heading); }
.help-acts { display: inline-flex; align-items: center; gap: 16px; }
.help-num, .help-call { display: inline-flex; align-items: center; min-height: 44px; color: var(--heading); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.help-call { font-size: 13px; color: var(--body); }
.help-q { border-bottom: 1px solid var(--divider); }
.help-q:first-of-type { border-top: 1px solid var(--divider); }
.help-q > summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 48px; font-family: var(--font-display); font-size: 21px; font-weight: 500; color: var(--heading); }
.help-q > summary::-webkit-details-marker { display: none; }
.help-q > summary::after { content: '+'; margin-left: auto; font-family: var(--font-sans); font-size: 18px; color: var(--gold); }
.help-q[open] > summary::after { content: '\2212'; }
.help-q .help-p { margin: 0 0 16px; }
.test-note a { color: var(--heading); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 12px 0; margin: -12px 0; }
/* REMOVE A DOCUMENT (public/js/doc-remove.js): a quiet control under Open; the question is asked in place */
.doc-remove { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 4px; font-size: 12.5px; color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; }
.doc-remove:hover { color: var(--danger); }
.fe .act, .ydoc-act { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
/* the question takes its OWN full-width line under the row (a flex row wraps; a grid row spans), never a column beside the name */
.fe:has(> .doc-ask), .ydoc:has(> .doc-ask) { flex-wrap: wrap; }
.doc-ask { flex: 1 1 100%; width: 100%; box-sizing: border-box; grid-column: 1 / -1; order: 99; margin: 6px 0 2px; padding: 10px 12px; border: 1px solid var(--divider); background: var(--bg-alt-1); }
.doc-ask p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--heading); overflow-wrap: anywhere; }
.doc-ask .row { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-ask .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; }
.doc-ask .btn.ghost { color: var(--heading); border-color: var(--heading); }
.doc-ask .err { display: block; margin-top: 6px; }
/* UPDATES: the header link and the page (views/deals.js updatesPage) */
.nav.app-nav .upd-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; font-size: 13px; color: var(--heading); text-decoration: none; white-space: nowrap; }
.nav.app-nav .upd-link:hover, .nav.app-nav .upd-link[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--gold); }
.nav.app-nav .upd-link .n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; background: var(--gold); color: var(--white); font-size: 11px; font-weight: 600; box-sizing: border-box; }
.upd-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--divider); }
.upd { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 20px; padding: 16px 0; border-bottom: 1px solid var(--divider); }
.upd-body { flex: 1 1 280px; min-width: 0; }
.upd-title { margin: 2px 0 4px; font-family: var(--font-display); font-size: 22px; line-height: 1.2; font-weight: 500; color: var(--heading); overflow-wrap: anywhere; }
.upd .what { margin: 0 0 4px; font-size: 14px; line-height: 1.55; color: var(--body); overflow-wrap: anywhere; }
.upd .when { margin: 0; font-size: 12.5px; color: var(--secondary); }
.upd-act { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.upd-form { margin: 0; }
.upd .upd-act .upd-open { display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; color: var(--heading); border-color: var(--heading); text-decoration: none; }
.upd .upd-act .upd-open:hover { background: var(--heading); color: var(--white); }
.upd-read { min-height: 44px; min-width: 44px; padding: 0 4px; font-size: 13px; color: var(--body); text-decoration: underline; text-underline-offset: 3px; }
.upd-read:hover { color: var(--heading); }
/* the account page (views/profile.js): details, alerts, password */
.acct { max-width: 560px; }
.acct-who { margin: 0 0 18px; color: var(--body); overflow-wrap: anywhere; }
.acct-h { margin: 26px 0 12px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.acct-form .field input { min-height: 48px; font-size: 16px; border-color: var(--muted); color: var(--heading); }
.acct-form .field input:focus { border-color: var(--heading); outline: 1px solid var(--heading); outline-offset: 0; }
.acct-form .field input[aria-invalid="true"] { border-color: var(--danger); }
.acct-form .hint { margin: 6px 0 0; font-size: 12px; color: var(--secondary); }
.acct-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; cursor: pointer; }
.acct-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--gold); }
.acct-check input:disabled + span { opacity: .55; }
.acct-check strong { display: block; font-weight: 500; font-size: 14px; color: var(--heading); }
.acct-check small { display: block; font-size: 12.5px; line-height: 1.55; color: var(--body); }
.acct-consent { margin: 4px 0 8px; padding: 12px; background: var(--bg-alt-1); border: 1px solid var(--divider); }
.acct-consent a { display: inline-block; padding: 14px 0; margin: -14px 0; color: var(--heading); text-decoration: underline; text-underline-offset: 3px; }   /* a 44px target inside the sentence */
.acct-save { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 160px; margin-top: 12px; }
.acct .btn.ghost { color: var(--heading); border-color: var(--heading); }
.acct-pw { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--divider); }
.acct-out { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--divider); }
.acct-out .btn { min-height: 44px; }
.acct .err { display: block; margin: 8px 0 0; }
/* sign in, create an account, forgot password (views/signin.js, views/account_pages.js): the small links */
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.label-row label { margin-bottom: 8px; }
.label-link { display: inline-flex; align-items: center; min-height: 44px; margin: -14px 0 -6px; font-size: 11px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--body); text-decoration: none; }
.label-link:hover { color: var(--heading); text-decoration: underline; text-underline-offset: 3px; }
.signin-alt { margin: 14px 0 0; font-size: 14px; color: var(--body); }
.signin-alt a, .account-alt a { display: inline-flex; align-items: center; min-height: 44px; color: var(--heading); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); }
.account-wrap .hint { margin: 6px 0 0; font-size: 12px; color: var(--secondary); }
.account-wrap .btn { display: flex; align-items: center; justify-content: center; min-height: 48px; text-decoration: none; box-sizing: border-box; }
.account-wrap .btn.ghost { color: var(--heading); border-color: var(--heading); }
.account-wrap .inv-form { margin: 10px 0 0; }
.account-again .linklike { min-height: 44px; padding: 0; color: var(--heading); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.account-wrap .notice { margin: 0 0 14px; }
.signin-wrap #signin-notice { margin: 0 0 18px; }
/* the invited person's page (views/invite.js): the sign-in page's column */
.invite-wrap .eyebrow { margin: 0 0 6px; }
.invite-wrap h1 { margin-bottom: 14px; }
.inv-p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--body); overflow-wrap: anywhere; }
.inv-note { margin: 18px 0 0; font-size: 13px; line-height: 1.55; color: var(--secondary); }
.inv-form { margin: 0 0 10px; }
.invite-wrap .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; text-decoration: none; box-sizing: border-box; }
.invite-wrap .btn.block { display: flex; width: 100%; }
.invite-wrap .btn.ghost { color: var(--heading); border-color: var(--heading); }
.invite-wrap .btn.gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
/* SHARE THIS DEAL (views/deal.js shareDialog): the attach dialog's recipe (bottom sheet on a phone, centered from
   1000px) + who is on the deal, the add form, the two confirms */
.rec-head .status .share-open { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--heading); border-color: var(--heading); }
.rec-head .status .share-open:hover { background: var(--heading); color: var(--white); }
@media (max-width: 999px) {
  /* the phone header: Share is a quiet 44px text control at the row's end (the recipe New request had there), so the
     pills row keeps its height; the bordered button lives in the Dates tab's tools, beside New request */
  body.chat .rec-head .status .share-open { flex: 0 0 auto; margin: -11px 0 -11px auto; min-height: 44px; min-width: 44px; padding: 0 2px; border: 0; background: none; font-size: 13px; font-weight: 500; letter-spacing: .4px; text-transform: none; text-decoration: underline; text-underline-offset: 3px; color: var(--heading); }
  body.chat .rec-head .status .share-open:hover { background: none; color: var(--heading); }
  body.chat .file-tools { gap: 10px; flex-wrap: wrap; }
}
@media (max-width: 640px) { .rec-head .share-open .share-l { display: none; } }
.share-sub { margin: 14px 0 6px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.share-list { list-style: none; margin: 0 0 8px; padding: 0; border-top: 1px solid var(--divider); }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--divider); }
.share-who { flex: 1 1 160px; min-width: 0; font-size: 14px; font-weight: 500; color: var(--heading); overflow-wrap: anywhere; }
.share-none { color: var(--secondary); font-size: 14px; }
.share-remove { min-height: 44px; min-width: 44px; padding: 0 6px; color: var(--heading); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }
.share-remove:hover { color: var(--danger); }
.share-ask { flex: 1 1 100%; padding: 4px 0 8px; }
.share-ask .at-actions { margin-top: 6px; }
.share-note { margin: 8px 0; font-size: 13px; line-height: 1.55; color: var(--body); }
.share-add .field { margin: 0 0 4px; }
.share-add .field input { min-height: 48px; font-size: 16px; border-color: var(--muted); }
.share-add .field input:focus { border-color: var(--heading); outline: 1px solid var(--heading); outline-offset: 0; }
.share-add .field input[readonly] { background: var(--bg-alt-1); }
.share-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; font-size: 14px; line-height: 1.5; color: var(--heading); cursor: pointer; }
.share-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--gold); }
.share-confirm { border-top: 1px solid var(--divider); margin-top: 8px; padding-top: 4px; }
#share-confirm-line { font-weight: 500; color: var(--heading); overflow-wrap: anywhere; }
/* THE THREE DOCUMENT FOLDERS on the deal file (Rob 2026-09-20): Your documents, Transaction documents, General
   disclosures. A folder is a BAR (a details summary): the name in gold caps, its count, and ONE who-can-see line, so all
   three read at a glance even folded; opened, the category sections sit inside it */
.dfolder { margin: 0 0 8px; border: 1px solid var(--divider); background: var(--white); }
.dfolder:last-child { margin-bottom: 0; }
.dfolder[open] { border-color: var(--muted); }
.dfolder > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 56px; padding: 10px 12px 10px 34px; position: relative; }
.dfolder > summary::-webkit-details-marker { display: none; }
.dfolder > summary::before { content: ''; position: absolute; left: 14px; top: 22px; width: 7px; height: 7px; border-right: 1.5px solid var(--secondary); border-bottom: 1.5px solid var(--secondary); transform: rotate(-45deg); transition: transform .15s ease; }
.dfolder[open] > summary::before { transform: rotate(45deg); top: 20px; }
.dfolder > summary:hover { background: var(--bg-alt-1); }
.dfolder > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.dfolder-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dfolder-h { margin: 0; font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.dfolder-n { font-size: 13px; font-weight: 500; color: var(--heading); font-variant-numeric: tabular-nums; }
.dfolder-vis { display: block; font-size: 12px; line-height: 1.45; color: var(--secondary); }
.dfolder-body { padding: 4px 12px 12px; border-top: 1px solid var(--divider); }
.dfolder-body .docs-recent { margin-top: 8px; }
.dfolder-empty { margin: 10px 0 2px; }
.dfolder .fe .visline { display: none; }   /* said once, on the folder's bar; a message attachment keeps its own line */
.dfolder .fe .visline:has([data-scope="attachment"]) { display: block; }
@media (prefers-reduced-motion: reduce) { .dfolder > summary::before { transition: none; } }
.dfolder-more { margin: 2px 0 0; }
.dfolder-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13px; font-weight: 500; color: var(--heading); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); }
.dfolder-link:hover { color: var(--gold); }
/* Your documents page: the same three bars as a deal's Documents (.dfolder), page width. Transaction documents and
   General disclosures list BY DEAL (.ddeal: the deal's link, then its documents) */
.dfolders { margin-top: 8px; }
.lib-dfolder > summary { min-height: 64px; padding-right: 16px; }
.lib-dfolder .dfolder-h { font-size: 12px; }
.lib-dfolder .dfolder-vis { font-size: 13px; }
.lib-dfolder .dfolder-body { padding: 8px 16px 16px 16px; }
.lib-dfolder .deal-group { margin: 0; }
.ddeal { padding: 6px 0 14px; border-bottom: 1px solid var(--divider); }
.ddeal:last-of-type { border-bottom: 0; }
.ddeal .deal-docs-link { min-height: 52px; }
.ddeal-rows { list-style: none; margin: 0; padding: 0; }
.ddeal-rows .ydoc-name { font-size: 18px; }
.ddeal-none { margin: 2px 0 0; }
.lib-dfolder .deal-docs-done { margin-top: 14px; }
/* (the link row recipe below is shared by the deal blocks and the Done list) */
.deal-docs-list { list-style: none; margin: 8px 0 0; padding: 0; }
.deal-docs-list li { border-bottom: 1px solid var(--divider); }
.deal-docs-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 10px 0; color: inherit; text-decoration: none; }
.deal-docs-link:hover { background: var(--bg-alt-1); }
.ddl-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ddl-addr { font-family: var(--font-display); font-size: 20px; line-height: 1.2; font-weight: 500; color: var(--heading); overflow-wrap: anywhere; }
.ddl-go { flex: 0 0 auto; font-size: 13px; font-weight: 500; color: var(--heading); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); white-space: nowrap; }
.deal-docs-done { margin-top: 12px; }
/* the street-number tile: the photo's box when an active deal has no listing photo (views/deals.js numberTile) */
.deal .deal-photo.deal-tile { display: flex; align-items: center; justify-content: center; background: var(--bg-alt-2); color: var(--heading); font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1; letter-spacing: .5px; font-variant-numeric: lining-nums; overflow: hidden; }
.deal .deal-photo.deal-tile.mark img { display: block; width: 40px; height: 30px; object-fit: contain; opacity: .7; }
.deal .deal-photo { flex: 0 0 96px; display: block; width: 96px; height: 72px; object-fit: cover; background: var(--divider); margin-top: 3px; }
.deal .journey.mini { display: flex; align-items: center; gap: 0; min-height: 0; margin: 9px 0 0; }
.journey.mini .jn { display: flex; align-items: center; flex: 0 0 auto; gap: 0; }
.journey.mini .jn::after { flex: 0 0 10px; width: 10px; margin: 0; }
.journey.mini .jsq { flex: 0 0 8px; width: 8px; height: 8px; }
.deal .row-next, .deal .row-last { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.deal .row-next { margin-top: 8px; color: var(--body); }
.deal .row-next .step { color: var(--heading); font-weight: 500; }
.deal .row-last { margin-top: 2px; color: var(--secondary); }
.deal .row-journey + .row-last { margin-top: 8px; }
.lib-top { margin: -8px 0 2px; }
body.library .page-head { margin-bottom: 14px; }
body.library .fav-list, body.library .fav-err { border-top: 1px solid var(--divider); }
@media (max-width: 640px) {
  .nav.app-nav.has-lib { flex-wrap: wrap; row-gap: 0; padding-bottom: 0; }
  .nav.app-nav.has-lib .nav-lib { order: 3; flex: 1 1 100%; margin: 0; gap: 0 22px; }
  .speak { margin-bottom: 12px; }
  .speak-line { font-size: 19px; line-height: 1.25; }
  /* the phone test (360x740): with the speaking lines on the page the first deal must still start in the top half,
     so the deal tabs sit a little tighter and four of them fit the row without a scroll (the start button: pass 19 below) */
  body.deals .tab-row { gap: 6px; margin-bottom: 10px; }
  body.deals .tab-row .tab { min-width: 56px; padding: 0 7px; }
  body.deals .page-head { margin-bottom: 6px; }
  .deal-row .deal { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-items: start; }
  .deal-row .deal.has-photo { grid-template-columns: 96px minmax(0, 1fr); }
  .deal-row .deal .body { display: contents; }
  .deal-row .deal .deal-photo { grid-column: 1; grid-row: 1 / span 2; margin-top: 2px; }
  .deal-row .deal .row-side, .deal-row .deal .addr { grid-column: -2 / -1; }
  .deal-row .deal .row-journey, .deal-row .deal .row-next, .deal-row .deal .row-last, .deal-row .deal .pills { grid-column: 1 / -1; }
  .deal-row .deal.has-photo .row-next { margin-top: 10px; }
  .deal-row .deal .pills { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px; margin-top: 8px; }
}

/* ══ Pass 17 (Rob 2026-09-20): CORMORANT READS SOFT WHEN IT IS SMALL ══
   Now that the brand fonts really load (QC 2026-09-19 B1), Cormorant Garamond at 400 is thin and soft under 28px,
   and the brand's antialiased smoothing thins it further on a Mac. Two fixes, in THIS app only (brand.css untouched):
   1. the browser's own smoothing (auto) instead of the brand's antialiased / grayscale;
   2. display text UNDER 28px uses a heavier LOADED weight (the fonts link loads 400 / 500 / 600): display-font text
      at 18 to 27px is 500. Display text at 28px and up keeps 400.
   The explicit list (no global rule):
     (the header and the sign-in page carry the official logo IMAGE since 2026-09-20: no typed wordmark is left to weigh)
     500  .deal .addr (22 / 19)         .sub-h (19)               .speak-line (23 / 19)
          .door .name, .file .door .name (21, room names)       .since .line (21 / 19 / 18)
          .rent-addr (24)  .fav-addr (24)  .ydoc-name (22)      .panel .ph h2 (22 / 21)   .sec h2 (26 / 22)
          .file .fhead h2 (22, "The file")                      .chat-head h1 (20)        .empty h3 (24 / 21)
          body.chat .rec-title h1 (26 desktop, 21 phone)        .rec-head h1, .rec-title h1 at <= 640px (26)
     (already 500: .ck-name 26, .ck-pct 22, .ck-template-title 21.  Kept at 400, 28px and up: .page-head h1, .door-name,
      .rent-h, .ri-title, .at-title, .signin-wrap h1, .expired h1, .rec-title h1 at 30px on the request pages.) */
html, body { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
.deal .addr, .sub-h, .door .name, .file .door .name, .since .line, .rent-addr, .fav-addr, .ydoc-name,
.panel .ph h2, .sec h2, .file .fhead h2, .chat-head h1, .empty h3, body.chat .rec-title h1 { font-weight: 500; }
@media (max-width: 640px) { .rec-head h1, .rec-title h1 { font-weight: 500; } }

/* ══ Pass 18 (Rob 2026-09-20): LINE ICONS, AND THE STARTER BLOCK FOR A SPARSE DEAL ══
   1. THE MIC AND THE + ARE LINE ICONS (views/deal_bits.js icon()): inline SVG, 20px, stroke currentColor 1.5, no fill,
      in the same square 44x44 button with its 1px line. Idle = var(--heading); listening (.on) = var(--gold) and the
      pulse. The paperclip on a source line is the same kind of icon at 14px in var(--secondary); no emoji anywhere.
   2. THE STARTER BLOCK (views/deal.js starterBlock, public/js/record.js syncStarter): while the stream has fewer than
      three entries, a quiet block in the stream's empty space: one Cormorant line, one 14px line, up to three 44px
      starters and a ghost "Write to my team". Desktop: centered in the free space above the first entry. Phone: at the
      top of the conversation, and the sparse stream is as tall as a busy one (the box rests at the bottom of the
      screen, in reach). At three entries it fades out IN PLACE (.gone keeps its room for this page view: no jump). */
.iconbtn .ico { display: block; flex: 0 0 auto; pointer-events: none; }
.iconbtn.mic, .iconbtn.plus { color: var(--heading); }
.iconbtn.mic.on, .iconbtn.plus[aria-expanded="true"] { color: var(--gold); }
.src .paper, .paper { display: inline-flex; vertical-align: -2px; color: var(--secondary); }
.paper .ico { display: block; }
.starter { margin: 0; padding: 20px 0 16px; opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
.starter.gone, .starter.wait { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }
.starter .st-head { margin: 0 0 6px; font-family: var(--font-display); font-size: 26px; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--heading); }
.starter .st-line { margin: 0 0 16px; max-width: 560px; font-size: 14px; line-height: 1.55; color: var(--body); }
.starter .st-phone { display: none; }
.starter .st-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.starter .st-q { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--gold-soft); background: var(--white); color: var(--heading); font: inherit; font-size: 13px; line-height: 1.3; text-align: left; cursor: pointer; }
.starter .st-write { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; box-sizing: border-box; color: var(--heading); border-color: var(--heading); }
@media (hover: hover) { .starter .st-write:hover { background: var(--heading); color: var(--white); } }
.starter .st-head + .st-btns, .starter.ai-off .st-btns { margin-top: 14px; }   /* AI off: no second line, the button keeps its air */
.starter .st-q:focus-visible, .starter .st-write:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (hover: hover) { .starter .st-q:hover { border-color: var(--gold); background: var(--gold-bg); } }
.starter.ai-off .st-q, .starter.ai-off .st-line { display: none; }
@media (min-width: 1000px) {
  body.chat .stream.sparse { display: flex; flex-direction: column; }
  body.chat .stream.sparse > * { flex: 0 0 auto; }
  body.chat .stream.sparse > .starter { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
}
@media (max-width: 999px) {
  .starter { padding: 14px 0 10px; }
  .starter .st-head { font-size: 22px; }
  .starter .st-line { margin-bottom: 12px; }
  .starter .st-desk { display: none; }
  .starter .st-phone { display: inline; }
  .starter .st-q, .starter .st-write { flex: 1 1 100%; }
  .starter .st-write { justify-content: center; }
  /* a sparse stream is as tall as a busy one: the page rests with the box at the bottom of the screen (record.js toBottom) */
  body.chat.tabbed[data-ptab="chat"] .stream.sparse { min-height: calc(100vh - var(--stick-h, 241px) - var(--box-h, 112px)); min-height: calc(100dvh - var(--stick-h, 241px) - var(--box-h, 112px)); box-sizing: border-box; }
}
@media (prefers-reduced-motion: reduce) { .starter, .starter.gone, .starter.wait { transition: none; } }

/* ══ Pass 19 (Rob 2026-09-20, SMALL): /deals, ONE START ACTION, ACTIVE DEALS AS CARDS, NO JOINED STRING ══
   1. ONE START ACTION (views/deals.js startMenu): a gold 44px "Start something new" in the page head, a native
      <details> whose menu holds Buy / Sell / Rent with their one line each. From 641px it sits on the heading's line,
      right-aligned, and the menu hangs from its right edge; on the phone it is its own 44px row under the speaking
      lines, as wide as its words, and the menu opens under it inside the page's gutters. No shadow: the menu is told
      from the page by a 1px var(--heading) line. The tab row is now the only row of its kind.
   2. ACTIVE DEALS ARE CARDS (li.deal-row[data-card] = at least one open request): the brand card recipe, 1px var(--divider),
      20px 22px of padding (16px on the phone), white, 12px between cards, the border goes var(--primary) on hover and
      focus-within, and the ground does NOT tint. Still one link; the "..." / Archive slot stays outside it.
      Rows in the Done fold stay flat hairline rows and read a step quieter.
   3. NO JOINED STRING: .row-side = the gold eyebrow over the address; .row-journey = the squares + the step sentence. */
.deals-top { display: grid; grid-template-columns: minmax(0, 1fr); }
.start-menu { position: relative; justify-self: start; margin: 0 0 12px; }
.start-menu > .start-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; box-sizing: border-box; list-style: none; white-space: nowrap; user-select: none; -webkit-user-select: none; }
.start-menu > .start-btn::-webkit-details-marker { display: none; }
.start-menu > .start-btn::after { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-right: 1px solid var(--white); border-bottom: 1px solid var(--white); transform: rotate(45deg); margin-top: -4px; transition: transform .15s ease; }
.start-menu[open] > .start-btn::after { transform: rotate(-135deg); margin-top: 3px; }
.start-menu > .start-btn:focus-visible { outline: 2px solid var(--heading); outline-offset: 2px; }
.start-list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 332px; max-width: calc(100vw - 28px); box-sizing: border-box; list-style: none; margin: 0; padding: 0; background: var(--white); border: 1px solid var(--heading); }
.start-list li + li { border-top: 1px solid var(--divider); }
.start-item { display: block; min-height: 44px; padding: 12px 16px 13px; box-sizing: border-box; color: inherit; text-decoration: none; }
.start-item:hover, .start-item:focus-visible { background: var(--bg-alt-1); color: inherit; }
.start-item:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.start-name { display: block; font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--heading); }
.start-line { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--body); }
@media (min-width: 641px) {
  .deals-top.has-start { grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; }
  .deals-top.has-start > .page-head { grid-column: 1; grid-row: 1; }
  .deals-top.has-start > .speak { grid-column: 1 / -1; grid-row: 2; }
  .deals-top.has-start > .start-menu { grid-column: 2; grid-row: 1; justify-self: end; margin: 0 0 8px; }
  .deals-top.has-start > .start-menu .start-list { left: auto; right: 0; }
}
@media (prefers-reduced-motion: reduce) { .start-menu > .start-btn::after { transition: none; } }

/* the list: no top hairline of its own any more (a card carries its own border); a FLAT row draws the hairline over
   itself when it opens a list or follows a card (deals.js can move a flat row in beside cards) */
.deal-list { border-top: 0; }
.deal-row:not(.deal-row[data-card]):first-child, .deal-row[data-card] + .deal-row:not(.deal-row[data-card]) { border-top: 1px solid var(--divider); }
.deal-row[data-card] { border: 1px solid var(--divider); background: var(--white); margin: 0 0 12px; transition: border-color .15s ease; }
.deal-row[data-card]:last-child { margin-bottom: 0; }
.deal-row[data-card]:hover, .deal-row[data-card]:focus-within { background: var(--white); border-color: var(--primary); }
.deal-row[data-card] .deal { padding: 20px 22px; min-height: 0; }
.deal-row[data-card] .deal:hover { background: transparent; }
/* a card never draws the row chevron: between 641 and 999px it floated mid-card beside the "..." (Rob's screenshot
   2026-09-20); the border, the hover and the whole-card link already say it opens */
.deal-row[data-card] .deal .go { display: none; }
.deal-row[data-card] .deal:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.deal-list:has(.deal-row[data-card]) + .done-fold { margin-top: 16px; }
.deal .row-side { display: block; margin: 0 0 5px; line-height: 1.3; }
.deal .row-journey { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 10px 0 0; min-width: 0; }
.deal .row-journey .journey.mini { margin: 0; flex: 0 0 auto; }
.deal .row-step { font-size: 13px; line-height: 1.4; color: var(--body); min-width: 0; overflow-wrap: anywhere; }
/* the Done fold: flat, hairline, a step quieter */
.done-fold .deal .addr { font-size: 19px; color: var(--body); }
.done-fold .deal .row-side { color: var(--secondary); }
.done-fold .deal .row-step, .done-fold .deal .row-last { color: var(--secondary); }
@media (hover: hover) and (min-width: 1000px) {
  .deal-row[data-card] .deal-actions { margin-left: 0; padding-right: 22px; }
}
/* phone and tablet: the card's "..." sits in its top right corner (the link keeps the card's whole width, so the
   journey line stays ONE line at 360px); the opened Archive still takes its own line under the link */
@media (max-width: 999px) {
  .deal-row[data-card] { position: relative; }
  .deal-row[data-card] .deal-actions .more { position: absolute; top: 4px; right: 4px; z-index: 1; }
  .deal-row[data-card] .deal .row-side, .deal-row[data-card] .deal .addr { padding-right: 30px; }
  /* tablet: the pill column sits beside the corner "..."; keep it clear of the 44px button (the phone stacks the pill under the body) */
  @media (min-width: 641px) { .deal-row[data-card] .deal .pills { margin-right: 34px; } }
  .deal-row[data-card].open .act-form, html:not(.js) .deal-row[data-card] .act-form { padding: 0 16px 14px; }
}
@media (max-width: 640px) {
  .start-menu { margin-bottom: 10px; }
  .deal-row[data-card] .deal { padding: 16px; }
  .deal .row-journey { gap: 4px 10px; }
  .done-fold .deal .addr { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .deal-row[data-card] { transition: none; } }