/* ══════════════════════════════════════════════════════════════════
   CONSOLIDATED 8 Oct 2026 — and this file is edited in place now.

   It had reached 7,928 lines, of which 6,211 were appended snippets.
   3,051 rule blocks defined 990 distinct selectors: `.sop-bar` was
   declared 28 times, `.askai-list` twenty. The browser used the last
   copy of each and discarded the rest on every page load, silently,
   for weeks.

   That was my doing. After once shipping a partial tokens.css that
   would have stripped the base layer, I switched to append-only
   snippets — safe, and each one restated its whole block. Every
   snippet's header said "if you already added an earlier one, this
   replaces it", which was never an achievable instruction: nobody
   finds and deletes a 200-line block inside a 7,000-line file by
   hand. So they all went in. Eleven of them.

   2,088 dead rule blocks removed. Nothing changed on screen — the
   cascade had already discarded every one of them. That is not an
   assertion: test/styles.js reads getComputedStyle for 9,396 elements
   across five board states at three viewport widths, and all ~498,000
   values are identical either side of the cut.

   NO MORE APPENDING. The reason the snippets existed is gone: this
   file is small enough to edit in place, and there is a test that
   catches a single hex digit moving.

       node test/styles.js --save      take the baseline
       …edit…
       node test/styles.js             prove only what you meant moved

   A rule added at the bottom of a stylesheet is a rule nobody will
   find. Put it with its family.
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   TOKENS.css  —  v2 design tokens

   Extracted from v1, not reinvented. The palette is v1's actual
   most-used colors by frequency, so v2 looks like v1 on purpose.

   WHY THIS FILE EXISTS
     v1 carried 8,120 inline style="" attributes — 662 KB of CSS
     written as JavaScript string concatenation. Inline styles beat
     stylesheet rules, so a print stylesheet had no way in. That is
     why v1 has zero print rules and three orphaned @media print
     blocks stranded inside JS strings.

   THE RULE
     No color, spacing, radius or font-size literal in any JS file.
     Modules emit class names. Values live here.
   ═════════════════════════════════════════════════════════════════ */

:root {
  /* I AM HERE. 9 Oct. index.html reads this after boot. A stylesheet
     that 404s fails silently — no console error a tester would look
     at, no amber bar, nothing. The page still renders, just wrong,
     and the wrongness can hide for days in a path nobody looks at
     every session. One custom property per file is the whole check. */
  --rb-tokens: 1;

  /* ── surfaces (v1 slate ramp) ───────────────────────────────── */
  --bg:            #0f172a;   /* page          — 312 uses in v1 */
  --surface:       #1e293b;   /* card          — 459 */
  --surface-2:     #26334a;   /* raised/inset — darkened, so labels on a
                                 panel keep the contrast they have on the page */
  --border:        #475569;   /* 246 */
  --border-soft:   #334155;

  /* ── text ───────────────────────────────────────────────────── */
  /* Contrast measured against --surface-2, the worst case, because most
     labels sit on a raised panel rather than on the page. The old ramp
     put text-4 at 2.18:1 there and text-3 at 4.04 — grey on near-black,
     which is exactly how it read. */
  --text:          #f8fafc;   /* 15.9 on surface-2 */
  --text-2:        #e2e8f0;   /*  8.4 */
  --text-3:        #b6c2d2;   /*  5.7 — the label colour, used everywhere */
  --text-4:        #9caabb;   /*  4.3 — secondary only, never body copy */

  /* ── semantic: value judgement ("is this number good?") ─────── */
  --good:          #10b981;   /* 1007 */
  --good-soft:     #6ee7b7;
  --good-bg:       #064e3b;
  --warn:          #f59e0b;   /* 597 */
  --warn-soft:     #fde68a;
  --bad:           #dc2626;   /* 328 */
  --bad-soft:      #f87171;
  --accent:        #6366f1;
  --accent-soft:   #a5b4fc;

  /* ── the lens ────────────────────────────────────────────────
     A different exit for the same deal. Not a warning, not a
     recommendation, not a readiness state — so it cannot borrow amber
     (which means "needs you"), indigo (his voice) or emerald (healthy).
     Teal is unused elsewhere and reads as "another route".            */
  --lens:          #14b8a6;
  --lens-soft:     #5eead4;

  /* ── semantic: READINESS ("do we have enough inputs?") ───────
     DELIBERATELY DISTINCT FROM VALUE JUDGEMENT.

     --good is already the "this number is healthy" color in 1007
     places. If readiness also painted things emerald, an all-green
     screen would mean both "fully informed" and "great deal" — and
     the first time someone saw green on a losing deal they'd stop
     trusting the color.

     So: readiness is EDGE ONLY (border / left rule). Value judgement
     is FILL (text color, badges). Different visual channels.        */
  --ready:         #10b981;
  --ready-edge:    rgba(16, 185, 129, 0.35);   /* quiet on purpose */
  --prov:          #f59e0b;
  --prov-edge:     rgba(245, 158, 11, 0.55);
  --blocked:       #64748b;
  --blocked-edge:  rgba(100, 116, 139, 0.45);

  /* ── type ───────────────────────────────────────────────────── */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --fs-xs:  11px;
  --fs-sm:  13px;
  --fs-md:  15px;
  --fs-lg:  18px;
  --fs-xl:  24px;
  --fs-2xl: 32px;

  /* ── THE SCALE IS BIMODAL, AND THAT IS THE POINT ──────────────
     8 Oct. Measured, not guessed: of 843 elements visible on an open
     board, 790 were at 15, 13 or 11px and 817 of 843 were weight 400.
     The cash flow figure the whole deal turns on was set in the same
     type as "Lot acres 1.29".

     A deal board is not an even hierarchy. It is ONE answer, a handful
     of figures that decide it, and four hundred facts of evidence. So
     the scale is deliberately bimodal — a lot of small, a few very
     large, almost nothing between. An even 1.25 ratio would fill the
     middle with 18s and 24s, which is the mush this is escaping.      */
  --fs-verdict: 40px;   /* Call / Don't call / Hung. One per board.    */
  --fs-hero:    28px;   /* the figures that decide it                  */

  /* ── WEIGHT IS THE FREE AXIS ──────────────────────────────────
     Density is this app's job, not a flaw — it is read down a phone
     line while an agent waits. Size costs space; weight costs none.
     A figure at 500 against its label at 400 separates them with no
     layout change at all, which is why weight moves first here and
     size moves only at the top of the scale.                         */
  --fw-figure:  500;    /* a number in a row, against its label        */
  --fw-sum:     600;    /* a section summary                          */
  --fw-hero:    650;
  --fw-verdict: 700;

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

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
}

/* ══ base ════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}

/* ══ READINESS ═══════════════════════════════════════════════════
   Applied by the renderer from D.rollup(keys).status. Never set by
   hand — it's derived, same as the numbers.                        */

.rd { border-left: 3px solid transparent; transition: border-color .2s; }

.rd-ready   { border-left-color: var(--ready-edge); }
.rd-prov    { border-left-color: var(--prov-edge); }
.rd-blocked { border-left-color: var(--blocked-edge); }

/* section-level: full outline */
.card.rd-prov    { box-shadow: inset 0 0 0 1px var(--prov-edge); }
.card.rd-blocked { box-shadow: inset 0 0 0 1px var(--blocked-edge); }

/* a field some blocked value is waiting on */
.field-needed {
  border-color: var(--prov) !important;
  background: rgba(245, 158, 11, 0.06);
}

/* ══ THE MASTHEAD ════════════════════════════════════════════════
   The app's name, what it is, and the fact that it is a beta. See
   js/app.js masthead(). The "ai" is a different colour because the
   name is display + AI sharing two letters: a reader who cannot see
   the join cannot spell it after hearing it. */
.mast { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3);
        align-items: baseline; justify-content: space-between;
        padding-bottom: var(--s4); margin-bottom: var(--s5);
        border-bottom: 1px solid var(--border-soft); }
.mast-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3); }
/* THE MARK IS THE BIGGEST THING ON THE PAGE EXCEPT THE ANSWER.
   40px is the verdict — Call, Don't call, Hung — and nothing is
   allowed to out-shout it, so this lands at 32: not quite double the
   18 it was, far above everything else, and still clearly second to
   the one word the whole app exists to print. */
.mast-mark { font-family: var(--font); font-size: 32px; font-weight: 700;
             letter-spacing: -1.4px; line-height: 1; white-space: nowrap; }
/* THE THREE HAVE TO BE TELLABLE APART AT A GLANCE or the split is
   decoration. text-3 against text is a hair of difference at this
   size, so RE takes the dimmer grey and carries a lighter weight
   too — colour and weight together, because colour alone is a
   thing some readers cannot use. */
.mk-re   { color: var(--text-4); font-weight: 500; }
.mk-disp { color: var(--text); }
.mk-ai   { color: var(--accent-soft); }
.mast-desc { font-size: var(--fs-sm); color: var(--text-4); letter-spacing: .2px; }

@media (max-width: 560px) {
  .mast-mark { font-size: 26px; letter-spacing: -1px; }
}
/* The badge is a button: it warns you this is unfinished and it is
   the way to say what broke. See js/modules/feedback.js. */
.mast-beta { font-family: var(--font); font-size: var(--fs-xs);
             font-weight: 600; letter-spacing: .6px;
             text-transform: uppercase; color: var(--warn-soft);
             background: none; border: 1px solid var(--prov-edge);
             border-radius: 999px; padding: 4px 11px; white-space: nowrap;
             cursor: pointer; }
.mast-beta:hover { color: var(--text); border-color: var(--prov);
                   background: rgba(245, 158, 11, .10); }
.mast-beta:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }



/* status chip — carries the "why" */
.rd-chip {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-size: var(--fs-xs); padding: 2px var(--s2);
  border-radius: 999px; cursor: help; border: 1px solid;
}
.rd-chip-ready   { color: var(--ready);   border-color: var(--ready-edge); }
.rd-chip-prov    { color: var(--prov);    border-color: var(--prov-edge); }
.rd-chip-blocked { color: var(--blocked); border-color: var(--blocked-edge); }

/* a provisional number reads slightly quieter than a real one */
.val-prov    { opacity: .75; }
.val-blocked { color: var(--text-4); }

/* ══ primitives ══════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s5);
  margin-bottom: var(--s4);
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums;
       font-weight: var(--fw-figure); }
.num-good { color: var(--good); }
.num-bad  { color: var(--bad); }
.num-warn { color: var(--warn); }

.label { font-size: var(--fs-sm); color: var(--text-3); letter-spacing: .1px;
         font-family: var(--font); }

.stat       { display: flex; flex-direction: column; gap: var(--s1); }
/* THE STAT TILE. Small quiet label, figure carrying the weight —
   the one pattern worth taking from the references Sam collected,
   and the only one that survives having no photographs. */
.stat-value { font-family: var(--mono); font-size: var(--fs-xl);
              font-variant-numeric: tabular-nums;
              font-weight: var(--fw-hero);
              letter-spacing: -.5px; line-height: 1.1; }

.row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.row + .row { margin-top: var(--s2); }

.act-facts   { --act: var(--accent); }
.act-sandbox { --act: var(--warn); }
.act-results { --act: var(--good); }@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
}

/* ══ MEMO ════════════════════════════════════════════════════════
   Ported from v1's Acquisitions Memo. Monospace tabular figures,
   section counters, quiet rules. The layout was already right.      */

.memo { max-width: 900px; margin: 0 auto; }

.memo-header { padding: 0 0 var(--s5); border-bottom: 1px solid var(--border); margin-bottom: var(--s5); }
.memo-header h1 { font-size: var(--fs-xl); margin: var(--s2) 0; font-weight: 600; }

.memo-actions { margin-bottom: var(--s4); }
.memo-actions button {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: var(--s2) var(--s4);
  font-size: var(--fs-sm); font-family: var(--font); cursor: pointer;
}
.memo-actions button:hover { border-color: var(--accent); }
.memo-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.memo-head { display: flex; justify-content: space-between; align-items: baseline;
             border-bottom: 1px solid var(--border-soft); padding-bottom: var(--s2);
             margin-bottom: var(--s3); }
.memo-num  { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-4); }

.memo-lead { font-size: var(--fs-lg); margin-bottom: var(--s4); }

.memo-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
              gap: var(--s4); margin-bottom: var(--s4); }

.memo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s6); }
.memo-grid .row { padding: var(--s2) 0; border-bottom: 1px solid var(--border-soft); margin: 0; }

.memo-p { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6;
          margin: var(--s3) 0 0; max-width: 70ch; }
.memo-state { color: var(--text-3); border-left: 2px solid var(--border); padding-left: var(--s3); }

.memo-flag { margin-top: var(--s3); padding: var(--s3);
             background: rgba(245,158,11,.08); border-left: 2px solid var(--prov);
             font-size: var(--fs-sm); color: var(--text-2); }

.memo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.chk { font-size: var(--fs-sm); padding: var(--s1) 0; color: var(--text-2); }
.chk-done::before { content: "\2713  "; color: var(--good); }
.chk-open::before { content: "\25CB  "; color: var(--text-4); }

.verdict { padding: var(--s3) var(--s4); border-radius: var(--r-sm); font-size: var(--fs-sm);
           border: 1px solid var(--border); color: var(--text-2); }
.verdict b { color: var(--text); }
.verdict-pending { border-color: var(--blocked-edge); }
.verdict-prov    { border-color: var(--prov-edge); }

.pills { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pill { font-size: var(--fs-xs); padding: 3px var(--s3); border-radius: 999px;
        background: var(--surface-2); color: var(--text-2); }@media (max-width: 700px){
  .memo-grid, .memo-cols { grid-template-columns: 1fr; }
}

/* ══ APP SHELL — the three acts ══════════════════════════════════ */

.act { margin-bottom: var(--s7); }
.act-head { display: flex; gap: var(--s4); align-items: flex-start; margin-bottom: var(--s4); }
.act-head h2 { font-size: var(--fs-lg); margin: 0 0 var(--s1); font-weight: 600; }

/* ══ ONE TYPE SCALE ══════════════════════════════════════════════
   There were five competing heading sizes doing three jobs. The rule
   now: a MAJOR card that makes an argument gets h-major; a section of
   inputs gets h-section; the small uppercase line above either is an
   eyebrow. Nothing else declares its own size.                      */
.h-major   { font-size: var(--fs-2xl); font-weight: 600; color: var(--text);
             line-height: 1.15; letter-spacing: -.3px; }
.h-section { font-size: var(--fs-md); font-weight: 500; color: var(--text);
             line-height: 1.3; }
.eyebrow   { font-size: var(--fs-xs); color: var(--text-4);
             text-transform: uppercase; letter-spacing: 1px; }@media (max-width:780px){ .h-major { font-size: var(--fs-xl); } }
.act-num {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: var(--fs-sm);
  background: var(--surface-2); color: var(--act, var(--text-3));
  border: 1px solid var(--act, var(--border));
}

textarea {
  width: 100%; margin-top: var(--s2); padding: var(--s3);
  background: var(--bg); color: var(--text); font-family: var(--mono);
  font-size: var(--fs-sm); border: 1px solid var(--border);
  border-radius: var(--r-sm); resize: vertical;
}
textarea:focus, input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.btnrow { display: flex; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; }
button {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: var(--s2) var(--s4);
  font-size: var(--fs-sm); font-family: var(--font); cursor: pointer;
}
button:hover { border-color: var(--accent); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }

.parse-ok { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--good); }
.parse-notes { margin: var(--s2) 0 0; padding-left: var(--s4);
               font-size: var(--fs-sm); color: var(--warn-soft); }
.parse-notes li { margin: var(--s1) 0; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.chip { font-size: var(--fs-sm); padding: var(--s2) var(--s3); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.nfrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); }
.nf { display: flex; flex-direction: column; gap: var(--s1); }
.nf input {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: var(--s2); font-family: var(--mono);
  font-size: var(--fs-md); width: 100%;
}

/* ══ COACH'S PLAYBOOK ════════════════════════════════════════════ */
.plays { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
         gap: var(--s2); margin: var(--s2) 0 var(--s4); }
.play { text-align: left; padding: var(--s3); border-radius: var(--r-md);
        background: var(--surface-2); border: 1px solid var(--border-soft);
        display: flex; flex-direction: column; gap: 3px; position: relative; }
.play.on  { border-color: var(--accent); background: rgba(99,102,241,.12); }
.play.top { border-color: var(--good); }
.play-top { font-size: var(--fs-xs); color: var(--good); }
.play-label { font-size: var(--fs-md); color: var(--text); }
.play-stars { font-size: var(--fs-sm); color: var(--warn); letter-spacing: 1px; }
.play-tag { font-size: var(--fs-xs); color: var(--text-4); }
.play-why { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.4; margin-top: 2px; }
.play-out { opacity: .45; cursor: not-allowed; }
.play-out .play-label { text-decoration: line-through; }
.play-copy { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6;
             max-width: 70ch; padding: var(--s3); border-left: 2px solid var(--accent);
             background: rgba(99,102,241,.06); }

/* ══ FACTS — editable act 1 ══════════════════════════════════════ */
.fact { padding: var(--s4); }
.fact-head { width: 100%; display: flex; justify-content: space-between; align-items: center;
             background: none; border: none; padding: 0; text-align: left; cursor: pointer; }
.fact-title { font-size: var(--fs-md); font-weight: 500; color: var(--text);
              line-height: 1.3; }
.fact-sum   { font-size: var(--fs-md); color: var(--text-2); margin-top: 3px;
              font-family: var(--font); font-weight: var(--fw-sum);
              letter-spacing: -.1px; }
.fact-caret { font-family: var(--mono); color: var(--text-4); font-size: var(--fs-lg); }
.fact-body  { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border-soft); }

.label.sub { margin: var(--s4) 0 var(--s2); color: var(--text-4); }
.fldgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s3); }
.fld { display: flex; flex-direction: column; gap: 3px; }
.fld-wide { margin-top: var(--s3); }
.fld input, .fld select, .fld textarea {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: var(--s2); font-size: var(--fs-sm);
  font-family: var(--mono); width: 100%;
}
.fld textarea { font-family: var(--font); resize: vertical; }
.sfx { color: var(--text-4); }

.preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
           gap: var(--s4); padding: var(--s3); border-radius: var(--r-md);
           background: var(--surface-2); margin-bottom: var(--s3); }

.tiers { display: flex; gap: var(--s2); flex-wrap: wrap; }
.tier { display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
        padding: var(--s2) var(--s3); }
.tier span { font-size: var(--fs-xs); color: var(--text-4); }
.tier.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tier.on span { color: rgba(255,255,255,.8); }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s3); }
.slot { padding: var(--s3); background: var(--surface-2); border-radius: var(--r-md); }
.slot-head { display: flex; justify-content: space-between; font-size: var(--fs-sm);
             margin-bottom: var(--s2); }
.lvls { display: flex; gap: 2px; flex-wrap: wrap; }
.lvl { font-size: var(--fs-xs); padding: 3px var(--s2); border-radius: var(--r-sm); }
.lvl.on { background: var(--warn); border-color: var(--warn); color: #111; }
.slot-custom { margin-top: var(--s2); width: 100%; background: var(--bg); color: var(--text);
               border: 1px solid var(--border-soft); border-radius: var(--r-sm);
               padding: 3px var(--s2); font-size: var(--fs-xs); font-family: var(--mono); }

.lien { padding: var(--s3); background: var(--surface-2); border-radius: var(--r-md);
        margin-bottom: var(--s3); }
.lien-head { display: flex; justify-content: space-between; align-items: center;
             margin-bottom: var(--s3); }
.lien-x { font-size: var(--fs-xs); padding: 2px var(--s2); color: var(--bad-soft); }
.add { font-size: var(--fs-sm); }
.chk-inline { display: inline-flex; align-items: center; gap: var(--s2);
              font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--s2); }

/* ══ MAKE OFFER — restored from v1 ═══════════════════════════════ */
.step-head { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s4); }
.step-n { width: 24px; height: 24px; flex: none; border-radius: 50%; display: flex;
          align-items: center; justify-content: center; font-family: var(--mono);
          font-size: var(--fs-xs); background: var(--surface-2); color: var(--warn);
          border: 1px solid var(--warn); }

.offer-head { display: flex; gap: var(--s5); align-items: flex-end; flex-wrap: wrap;
              margin-bottom: var(--s4); }
.offer-input { display: flex; flex-direction: column; gap: var(--s1); }
.offer-input input {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: var(--s2) var(--s3);
  font-family: var(--mono); font-size: var(--fs-xl); width: 200px;
  font-variant-numeric: tabular-nums;
}
.offer-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
               gap: var(--s4); flex: 1; min-width: 260px; }

/* the slider — five reference markers, sweet-spot band */
.offer-slider { position: relative; margin: var(--s7) 0 var(--s6); height: 46px; }
.offer-slider input[type=range] {
  position: absolute; top: 0; left: 0; width: 100%; height: 20px;
  opacity: 0; margin: 0; cursor: grab; z-index: 2;
}
.offer-slider .track { position: relative; height: 4px; top: 8px;
                       background: var(--surface-2); border-radius: 2px; }
.ss-band { position: absolute; top: -3px; height: 10px; border-radius: 5px;
           background: rgba(16,185,129,.20); border: 1px solid var(--ready-edge); }
.mark { position: absolute; top: 0; transform: translateX(-50%); }
.mark-tick { display: block; width: 1px; height: 12px; background: var(--border);
             margin: -4px auto 0; }
.mark-lbl { display: block; font-size: 10px; line-height: 1.3; color: var(--text-4);
            text-align: center; white-space: nowrap; margin-top: 3px;
            font-family: var(--mono); }

.coach-read { padding: var(--s3); border-left: 2px solid var(--good);
              background: rgba(16,185,129,.06); margin-bottom: var(--s4); }
.coach-lbl   { font-size: var(--fs-xs); color: var(--good); }
.coach-range { font-family: var(--mono); font-size: var(--fs-md); margin: 2px 0 var(--s2); }
.coach-why   { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55; max-width: 70ch; }

.temp { font-size: var(--fs-sm); padding: var(--s3); border-radius: var(--r-sm);
        margin-bottom: var(--s4); color: var(--text-2);
        border: 1px solid var(--border-soft); line-height: 1.55; }
.temp b { color: var(--text); }
.temp-warm { border-color: var(--ready-edge); }
.temp-cool { border-color: var(--prov-edge); }
.temp-cold { border-color: var(--bad-soft); }

.presets { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.mini { background: var(--bg); color: var(--text); border: 1px solid var(--border);
        border-radius: var(--r-sm); padding: var(--s2); font-family: var(--mono);
        font-size: var(--fs-sm); width: 100%; margin-top: var(--s2); }
.col { background: var(--surface-2); border-radius: var(--r-md); padding: var(--s4); }
.col-total { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); }
.col-note { font-size: var(--fs-xs); color: var(--text-4); margin-top: var(--s3); line-height: 1.5; }@media (max-width: 700px){ .cols { grid-template-columns: 1fr; } }

/* ══ INCOME — slider, mode rows, NOI waterfall ═══════════════════ */
.mark-be .mark-tick { background: var(--warn); height: 16px; }
.mark-be .mark-lbl  { color: var(--warn); }

.modes { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--s4); }
.mode {
  display: grid; grid-template-columns: 1.4fr .9fr .7fr 1fr .9fr;
  gap: var(--s3); align-items: baseline; text-align: left;
  padding: var(--s2) var(--s3); background: var(--surface-2);
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.mode.on { border-color: var(--accent); background: rgba(99,102,241,.12); }
.mode-l  { color: var(--text); }
.mode-x  { font-size: var(--fs-xs); color: var(--text-4); }
.mode-out { opacity: .5; grid-template-columns: 1.4fr 3.5fr; }
.mode-out .mode-l { text-decoration: line-through; }
.mode-why { font-size: var(--fs-xs); color: var(--text-4); }

.wf { background: var(--surface-2); border-radius: var(--r-md); padding: var(--s4); }
.wf-row { display: flex; justify-content: space-between; align-items: baseline;
          padding: var(--s2) 0; }
.wf-sub { padding-left: var(--s4); }
.wf-sub .label { color: var(--text-4); }
.wf-total { border-top: 1px solid var(--border); margin-top: var(--s2);
            padding-top: var(--s3); }
.wf-total .label { color: var(--text); }
.wf-total .num   { font-size: var(--fs-lg); }
.wf-note { border-top: 1px solid var(--border-soft); margin-top: var(--s2);
           padding-top: var(--s3); }@media (max-width: 700px){
  .mode { grid-template-columns: 1fr 1fr; gap: var(--s1) var(--s3); }
}

/* ══ ONBOARDING — ported from v1's welcome block ═════════════════ */
.ob { border-color: var(--accent); }
.ob-hd { display: flex; gap: var(--s3); align-items: center; margin-bottom: var(--s2); }
.ob-badge { width: 40px; height: 40px; flex: none; border-radius: var(--r-md);
            background: var(--accent); display: flex; align-items: center;
            justify-content: center; font-size: 20px; }
.ob-h1 { font-size: var(--fs-2xl); font-weight: 600; color: var(--text);
         line-height: 1.15; letter-spacing: -.3px; }

.ob-step { background: var(--bg); border: 1px solid var(--border-soft);
           border-radius: var(--r-md); margin-bottom: var(--s2); overflow: hidden; }
.ob-step.ob-on { border-color: var(--accent); }
.ob-head { width: 100%; display: flex; align-items: center; gap: var(--s3);
           padding: var(--s3) var(--s4); background: none; border: none;
           text-align: left; cursor: pointer; }
.ob-num { width: 30px; height: 30px; flex: none; border-radius: var(--r-sm);
          background: var(--surface-2); color: var(--text-3);
          display: flex; align-items: center; justify-content: center;
          font-family: var(--mono); font-size: var(--fs-sm); }
.ob-on .ob-num { background: var(--accent); color: #fff; }
.ob-titles { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ob-title { font-size: var(--fs-sm); color: var(--text); }
.ob-on .ob-title { color: var(--accent-soft); }
.ob-sub { font-size: var(--fs-xs); color: var(--text-3); }
.ob-chev { color: var(--text-4); font-size: var(--fs-xs); }
.ob-body { padding: 0 var(--s4) var(--s4); }

.ob-prompt { background: #0a0f1a; border: 1px solid var(--border-soft);
             border-radius: var(--r-sm); padding: var(--s3);
             max-height: 260px; overflow-y: auto; margin-bottom: var(--s3); }
.ob-prompt pre { margin: 0; color: var(--text-3); font-size: var(--fs-xs);
                 line-height: 1.7; white-space: pre-wrap; font-family: var(--mono); }

.ob-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
           gap: var(--s2); align-items: center; margin-bottom: var(--s4); }
.ob-src { background: var(--surface-2); border-radius: var(--r-md);
          padding: var(--s3); text-align: center; }
.ob-src.ob-ai { background: rgba(99,102,241,.15); border: 1px solid var(--accent); }
.ob-ico { font-size: 20px; margin-bottom: var(--s1); }
.ob-src-t { font-size: var(--fs-sm); color: var(--text-2); }
.ob-arrow { color: var(--border); text-align: center; }

.ob-tip { background: rgba(16,185,129,.07); border: 1px solid var(--ready-edge);
          border-radius: var(--r-md); padding: var(--s3); font-size: var(--fs-sm);
          color: var(--text-2); line-height: 1.6; margin-bottom: var(--s3); }
.ob-tip b { color: var(--good-soft); }

.ob-cta { width: 100%; background: rgba(16,185,129,.10);
          border: 1px solid var(--ready-edge); color: var(--good-soft);
          padding: var(--s3); border-radius: var(--r-md); font-size: var(--fs-sm); }

.ob-or { display: flex; align-items: center; gap: var(--s3); margin: var(--s4) 0 var(--s3); }
.ob-or::before, .ob-or::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); }
.ob-or span { font-size: var(--fs-xs); color: var(--text-4);
              text-transform: uppercase; letter-spacing: 1px; }

.ob-manual { width: 100%; padding: var(--s3); border: 1px dashed var(--accent);
             background: rgba(99,102,241,.06); color: var(--accent-soft);
             border-radius: var(--r-md); font-size: var(--fs-sm); }

.ob-warn { margin-top: var(--s3); padding: var(--s3); border-radius: var(--r-md);
           background: rgba(245,158,11,.08); border: 1px solid var(--prov-edge);
           font-size: var(--fs-sm); color: var(--warn-soft); line-height: 1.55; }

.ob-loaded { margin-top: var(--s4); padding: var(--s3); border-radius: var(--r-md);
             background: rgba(16,185,129,.08); border: 1px solid var(--ready-edge);
             font-size: var(--fs-sm); color: var(--text-2); }@media (max-width: 700px){ .ob-flow { grid-template-columns: 1fr; } .ob-arrow { display: none; } }

/* ══ DUE DILIGENCE — ported from v1 ══════════════════════════════ */
.dd-prog { background: var(--surface-2); border-radius: var(--r-md);
           padding: var(--s3); margin-bottom: var(--s3); }
.dd-bar { background: var(--border-soft); border-radius: 4px; height: 6px;
          margin: var(--s2) 0; overflow: hidden; }
.dd-bar i { display: block; height: 100%; background: var(--good);
            border-radius: 4px; transition: width .3s; }
.dd-counts { display: flex; gap: var(--s4); align-items: center;
             font-size: var(--fs-sm); font-family: var(--mono); }
.dd-spacer { flex: 1; }

.dd-titleco { display: flex; gap: var(--s3); align-items: center;
              flex-wrap: wrap; margin-bottom: var(--s3); }
.dd-titleco input { flex: 1; min-width: 200px; background: var(--bg);
                    color: var(--text); border: 1px solid var(--border);
                    border-radius: var(--r-sm); padding: var(--s2);
                    font-size: var(--fs-sm); }

.dd-state { background: rgba(99,102,241,.07); border: 1px solid var(--accent);
            border-radius: var(--r-md); padding: var(--s3); margin-bottom: var(--s3); }
.dd-state-h { color: var(--accent-soft); font-size: var(--fs-sm); margin-bottom: var(--s3); }

.dd-cat { background: var(--surface-2); border: 1px solid transparent;
          border-radius: var(--r-md); margin-bottom: var(--s2); overflow: hidden; }
.dd-cat.dd-done { border-color: var(--ready-edge); }
.dd-cat-h { width: 100%; display: flex; align-items: center; gap: var(--s3);
            padding: var(--s3); background: none; border: none;
            text-align: left; cursor: pointer; }
.dd-cat-i { flex: none; }
.dd-cat-t { flex: 1; font-size: var(--fs-sm); color: var(--text); }
.dd-cat-b { padding: 0 var(--s3) var(--s3); }

.dd-q { padding: var(--s3) 0; border-top: 1px solid var(--border-soft); }
.dd-qt { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: var(--s2);
         line-height: 1.5; max-width: 75ch; }
.dd-opts { display: flex; gap: var(--s1); flex-wrap: wrap; }
.dd-o { font-size: var(--fs-xs); padding: 3px var(--s3); border-radius: var(--r-sm); }
.dd-o-yes.on     { background: var(--good); border-color: var(--good); color: #04180f; }
.dd-o-no.on      { background: var(--bad); border-color: var(--bad); color: #fff; }
.dd-o-unknown.on { background: var(--warn); border-color: var(--warn); color: #1a1204; }
.dd-o-na.on      { background: var(--border); border-color: var(--border); color: var(--text); }

.dd-guide { margin-top: var(--s2); padding: var(--s2) var(--s3);
            background: rgba(245,158,11,.08); border-left: 2px solid var(--prov);
            font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55;
            max-width: 75ch; }

.dd-todo { margin-top: var(--s5); padding: var(--s4); border-radius: var(--r-md);
           background: var(--surface-2); }
.dd-todo-h { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--s3);
             padding-bottom: var(--s2); border-bottom: 1px solid var(--border-soft); }
.dd-todo-i { font-size: var(--fs-sm); color: var(--text-2); padding: var(--s2) 0;
             padding-left: var(--s5); position: relative; line-height: 1.5; }
.dd-todo-i::before { position: absolute; left: 0; }
.dd-todo-no::before      { content: "\2717"; color: var(--bad); }
.dd-todo-unknown::before { content: "?";     color: var(--warn); }
.dd-todo-g { display: block; font-size: var(--fs-xs); color: var(--text-4); }

/* ══ SAVE BAR — the deal file ════════════════════════════════════ */
.savebar { margin-top: var(--s4); padding: var(--s4); border-radius: var(--r-md);
           background: rgba(99,102,241,.06); border: 1px dashed var(--accent); }
.savebar-t { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6;
             margin-bottom: var(--s3); max-width: 68ch; }
.savebar-t b { color: var(--accent-soft); }

/* ══ STEP 2 — gather the data ════════════════════════════════════ */
.src-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: var(--s2); margin-bottom: var(--s4); }
.src { background: var(--surface-2); border-radius: var(--r-md); padding: var(--s3); }
.src-h { display: flex; align-items: center; gap: var(--s2); margin-bottom: 2px; }
.src-i { font-size: 16px; }
.src-n { font-size: var(--fs-sm); color: var(--text); flex: 1; }
.src-tag { font-size: 10px; color: var(--text-4); font-family: var(--mono); }
.src-w { font-size: var(--fs-xs); color: var(--accent-soft); margin-bottom: var(--s2); }
.src-d { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.55; }

.ob-alt { background: rgba(245,158,11,.06); border: 1px solid var(--prov-edge);
          border-radius: var(--r-md); padding: var(--s3); font-size: var(--fs-sm);
          color: var(--text-2); line-height: 1.6; margin-bottom: var(--s3); }
.ob-alt b { color: var(--warn-soft); }
.ob-alt ul { margin: var(--s2) 0; padding-left: var(--s4); }
.ob-alt li { margin: var(--s1) 0; }
.ob-alt li b { color: var(--text-2); }

.ob-fmt { background: var(--surface-2); border-radius: var(--r-md);
          padding: var(--s3); font-size: var(--fs-sm); margin-bottom: var(--s3); }
.ob-fmt b { color: var(--text-2); }
.ob-fmt-g { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s2); }
.ob-fmt-g > div { color: var(--text-3); line-height: 1.55; font-size: var(--fs-xs); }
.ob-fmt .ok   { color: var(--good); font-family: var(--mono); margin-right: var(--s2); }
.ob-fmt .warn { color: var(--warn); font-family: var(--mono); margin-right: var(--s2); }
.ob-fmt code { font-family: var(--mono); color: var(--accent-soft); }

.manual-hdr { border-color: var(--accent); }

/* ══ TUNER — the cockpit ═════════════════════════════════════════
   Controls left, live numbers pinned right. You're on the phone with
   a seller: everything that matters is in one view, and the numbers
   don't move when you drag a slider.                                */

.tuner { padding: var(--s4); }
.tn-head { margin-bottom: var(--s4); }

.tn-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px;
            gap: var(--s4); align-items: start; }
.tn-controls { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }

.tn-mod { background: var(--surface-2); border-radius: var(--r-md); padding: var(--s3); }
.tn-mod.tn-fixed { opacity: .92; }
.tn-h { display: flex; align-items: baseline; gap: var(--s2);
        font-size: var(--fs-sm); color: var(--text); margin-bottom: var(--s3);
        padding-bottom: var(--s2); border-bottom: 1px solid var(--border-soft); }
.tn-tag { margin-left: auto; font-family: var(--mono); font-size: var(--fs-sm);
          color: var(--text-3); }

.tn-fixed-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px,1fr));
              gap: var(--s3); }
.tn-fixed-g > div { display: flex; flex-direction: column; gap: 2px; }
.tn-fixed-g .num { font-size: var(--fs-md); }

.tn-row { display: flex; gap: var(--s3); align-items: flex-end;
          flex-wrap: wrap; margin-bottom: var(--s3); }
.tn { display: flex; flex-direction: column; gap: 3px; min-width: 110px; }
.tn input { background: var(--bg); color: var(--text); border: 1px solid var(--border);
            border-radius: var(--r-sm); padding: var(--s2); font-family: var(--mono);
            font-size: var(--fs-md); width: 100%; }
.tn-presets { display: flex; gap: var(--s1); flex-wrap: wrap; padding-bottom: 2px; }
.tn-presets .chip { padding: 4px var(--s2); font-size: var(--fs-xs); }

.tn-slide { margin-bottom: var(--s4); }
.tn-slide input[type=range] { width: 100%; margin-top: var(--s2); accent-color: var(--accent);
                              cursor: grab; }

.tn-out { margin-top: var(--s3); padding-top: var(--s3);
          border-top: 1px solid var(--border-soft); }
.tn-note { font-size: var(--fs-xs); color: var(--text-4); line-height: 1.55;
           margin-top: var(--s3); max-width: 60ch; }

.tn-ceiling { margin-top: var(--s3); padding: var(--s3); border-radius: var(--r-sm);
              background: rgba(16,185,129,.07); border-left: 2px solid var(--good);
              font-size: var(--fs-xs); color: var(--text-2); line-height: 1.6; }
.tn-ceiling.tn-over { background: rgba(220,38,38,.08); border-left-color: var(--bad); }
.tn-ceiling b { color: var(--text); }
.tn-max { margin-left: var(--s2); font-size: var(--fs-xs); padding: 2px var(--s2); }

/* ── the live panel ── */
.cockpit { position: sticky; top: var(--s3); background: var(--bg);
           border: 1px solid var(--border); border-radius: var(--r-md);
           padding: var(--s4); }
.ck-hero { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--s3);
           margin-bottom: var(--s3); border-bottom: 1px solid var(--border-soft); }
.ck-big { font-family: var(--mono); font-size: var(--fs-2xl);
          font-variant-numeric: tabular-nums; line-height: 1.1; }
.ck-good .ck-big { color: var(--good); }
.ck-bad  .ck-big { color: var(--bad); }

.ck-grid { display: flex; flex-direction: column; gap: 1px; }
.ck-row { display: flex; justify-content: space-between; align-items: baseline;
          padding: var(--s1) 0; }
.ck-row .label { font-size: var(--fs-xs); }
.ck-sep { font-size: var(--fs-xs); color: var(--text-4); text-transform: uppercase;
          letter-spacing: 1px; margin: var(--s3) 0 var(--s2);
          padding-top: var(--s2); border-top: 1px solid var(--border-soft); }
.ck-foot { margin-top: var(--s3); }

/* The cockpit column is 300px wide. Collapsing the split at 860px meant
   a desktop window narrowed to anything under that stacked the results
   under the controls — with 520px of room still going spare in the left
   column. Match the mobile breakpoint instead. */
@media (max-width: 780px) {
  .tn-split { grid-template-columns: 1fr; }
  .cockpit { position: static; }
}@media print{ .cockpit { position: static; } }

.step-lbl { font-size: var(--fs-xs); color: var(--text-4); text-transform: uppercase;
            letter-spacing: 1px; margin-bottom: var(--s3); }

/* ══════════════════════════════════════════════════════════════════
   MOBILE
   The case that matters: standing in a driveway with a seller on the
   phone. The desktop cockpit pins the numbers to the right — on a
   narrow screen that column drops below the controls and scrolls away,
   which is the exact failure we're trying to beat.
   So on mobile the key numbers become a sticky BOTTOM bar. Tune with
   your thumb, read the answer without moving.
   ═════════════════════════════════════════════════════════════════ */

@media (max-width: 780px) {

  /* room for the offer panel tab, which is the only fixed thing left */
  #app { padding: 12px 10px 76px; }
  .card { padding: var(--s3); border-radius: var(--r-md); }
  .act { margin-bottom: var(--s5); }
  .act-head { gap: var(--s3); }
  .ob-h1 { font-size: var(--fs-xl); }

  /* ── one column everywhere ── */
  .memo-grid, .memo-cols, .tn-split, .cols, .panels,
  .terms, .src-grid, .fldgrid, .nfrow {
    grid-template-columns: 1fr !important;
  }
  .memo-stats, .preview, .offer-stats, .tn-fixed-g {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--s3) !important;
  }

  /* ── the cockpit just sits under the controls ──
     It used to become a fixed bottom bar, which on a phone is a panel
     you cannot dismiss, sitting on top of the offer panel and eating
     42% of the screen. Inline is better: you scroll to it, you read it,
     you scroll past it.                                                */
  .cockpit {
    position: static; margin-top: var(--s4);
    border-radius: var(--r-md); border: 1px solid var(--border-soft);
    box-shadow: none; padding: var(--s4);
    max-height: none; overflow: visible;
  }
  .ck-hero { flex-direction: row; align-items: baseline; justify-content: space-between;
             padding-bottom: var(--s2); margin-bottom: var(--s2); }
  .ck-big { font-size: var(--fs-xl); }
  .ck-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--s4); }
  .ck-sep { margin: var(--s2) 0 var(--s1); padding-top: var(--s2); }
  .ck-foot { margin-top: var(--s2); }

  /* ── touch targets ── */
  button, .chip, .lvl, .dd-o, .play, .mode { min-height: 38px; }
  .dd-o { flex: 1; min-width: 62px; text-align: center; }
  .dd-opts { gap: var(--s2); }
  .lvl { flex: 1 1 30%; text-align: center; }
  .chip, .tn-presets .chip { padding: var(--s2) var(--s3); }

  /* ── sliders: bigger thumb, more room for the labels ── */
  .offer-slider { height: 60px; margin: var(--s6) 0 var(--s5); }
  .offer-slider input[type=range] { height: 40px; top: -10px; }
  .mark-lbl { font-size: 9px; }
  .mark:nth-child(even) .mark-lbl { transform: translateY(16px); }  /* stagger */
  input[type=range] { height: 32px; }

  /* ── inputs at 16px so iOS doesn't zoom on focus ── */
  .fld input, .fld select, .fld textarea,
  .tn input, .mini, .nf input, .offer-input input, textarea {
    font-size: 16px;
  }
  .offer-input input { width: 100%; font-size: 22px; }
  .offer-head { flex-direction: column; align-items: stretch; gap: var(--s3); }

  /* ── tiles ── */
  .plays { grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .play { padding: var(--s2); }
  .play-tag, .play-why { display: none; }         /* keep tiles scannable */
  .play.on .play-why, .play.top .play-why { display: block; }

  .slots { grid-template-columns: 1fr; }
  .mode { grid-template-columns: 1fr auto; gap: 2px var(--s2); }
  .mode-x { display: none; }

  /* ── memo prints and reads narrow ── */
  .memo-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .memo-grid .row { padding: var(--s2) 0; }
  .wf-sub { padding-left: var(--s3); }

  .ob-body { padding: 0 var(--s3) var(--s3); }
  .ob-prompt { max-height: 200px; }
  .dd-cat-h { padding: var(--s2) var(--s3); }
  .dd-qt { font-size: var(--fs-sm); }
}@media (max-width: 420px){
  .plays { grid-template-columns: 1fr; }
  .memo-stats, .preview, .offer-stats, .tn-fixed-g {
    grid-template-columns: 1fr !important;
  }
  .ck-grid { grid-template-columns: 1fr; }
}

/* The bottom bar is a screen affordance only. */
@media print {
  .cockpit { position: static; max-height: none; box-shadow: none; }
  #app { padding: 0; }
}

/* ══ CHECK BANNERS ═══════════════════════════════════════════════
   Silence when passing. Three per section, worst first. The fix is a
   disclosure, not a paragraph. That is what stops this becoming v1,
   where guidance showed whether or not anything was wrong.            */

.bns { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s3); }

.bn { border-radius: var(--r-sm); padding: var(--s2) var(--s3);
      border-left: 2px solid var(--border); background: var(--surface-2);
      font-size: var(--fs-sm); }
.bn-unfavorable { border-left-color: var(--bad);  background: rgba(220,38,38,.07); }
.bn-impossible  { border-left-color: var(--bad);  background: rgba(220,38,38,.14); }
.bn-incomplete  { border-left-color: var(--text-4); }
.bn-ack         { border-left-color: var(--border); opacity: .6; }

.bn-top { display: flex; align-items: baseline; gap: var(--s2); }
.bn-i { font-family: var(--mono); flex: none; }
.bn-unfavorable .bn-i, .bn-impossible .bn-i { color: var(--bad-soft); }
.bn-ack .bn-i { color: var(--text-4); }
.bn-t { flex: 1; color: var(--text); line-height: 1.5; }
.bn-ack .bn-t { color: var(--text-3); text-decoration: line-through; }

.bn-more, .bn-ack-btn, button.bn-ack {
  flex: none; font-size: var(--fs-xs); padding: 2px var(--s2);
  background: none; border: 1px solid var(--border); color: var(--text-3);
  border-radius: var(--r-sm); cursor: pointer;
}
.bn-more:hover, button.bn-ack:hover { border-color: var(--accent); color: var(--text); }

.bn-fix { margin: var(--s2) 0 0; padding-left: var(--s5); }
.bn-fix li { color: var(--text-2); line-height: 1.6; margin: var(--s1) 0;
             font-size: var(--fs-sm); }
.bn-note { font-size: var(--fs-xs); color: var(--text-4); margin-top: 2px; }

/* summary line in the cockpit */
.ck-sum { margin-top: var(--s3); padding-top: var(--s3);
          border-top: 1px solid var(--border-soft);
          font-size: var(--fs-xs); color: var(--text-3); }
.ck-sum b { color: var(--text-2); }
.sum-clear b { color: var(--good); }
.sum-open  b { color: var(--warn); }
.sum-block b { color: var(--bad); }

/* the memo verdict */
.vd-list { margin-top: var(--s3); display: flex; flex-direction: column; gap: 2px; }
.vd-row { display: flex; gap: var(--s2); align-items: baseline;
          font-size: var(--fs-sm); line-height: 1.5; }
.vd-m { font-family: var(--mono); flex: none; width: 14px; }
.vd-pass .vd-m { color: var(--good); }
.vd-fail .vd-m { color: var(--bad); }
.vd-ack  { color: var(--text-3); }
.vd-ack .vd-m { color: var(--text-4); }
.vd-note { color: var(--text-4); font-size: var(--fs-xs); }
.verdict-clear { border-color: var(--ready-edge); }
.verdict-open  { border-color: var(--prov-edge); }
.verdict-block { border-color: var(--bad); }@media print{
  .bn-more, button.bn-ack { display: none !important; }
  .bn { break-inside: avoid; }
}

/* ══ STRATEGY TUNER ══════════════════════════════════════════════ */
.pl-facts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3);
            padding-top: var(--s3); border-top: 1px solid var(--border-soft); }
.pl-facts span { font-size: var(--fs-xs); font-family: var(--mono);
                 color: var(--text-3); background: var(--surface-2);
                 padding: 3px var(--s2); border-radius: var(--r-sm); }

/* ══ WHOLESALE LENS ══════════════════════════════════════════════ */
.ws-shut { padding: 0; }
.ws-toggle { width:100%; display:flex; align-items:center; gap:var(--s3);
             padding:var(--s4); background:none; border:none; text-align:left;
             cursor:pointer; }
.ws-i { font-size:22px; flex:none; }
.ws-toggle b { color: var(--text); }
.ws-toggle .label { line-height:1.55; }

.ws { border-color: var(--lens); }
.ws-head { display:flex; justify-content:space-between; align-items:flex-start;
           margin-bottom:var(--s4); }
.ws-close { font-size:var(--fs-xs); padding:2px var(--s3); }

.ws-verdict { padding:var(--s3); border-radius:var(--r-md); font-size:var(--fs-sm);
              color:var(--text-2); line-height:1.6; margin-bottom:var(--s4);
              border:1px solid var(--border); }
.ws-verdict b { color: var(--text); }
.ws-strong   { border-color:var(--ready-edge); background:rgba(16,185,129,.07); }
.ws-workable { border-color:var(--ready-edge); }
.ws-tight    { border-color:var(--prov-edge); background:rgba(245,158,11,.06); }
.ws-blocked  { border-color:var(--bad); background:rgba(220,38,38,.09); }

.ws-sec { margin-bottom: var(--s5); }
.ws-sec-h { font-size:var(--fs-xs); color:var(--text-4); text-transform:uppercase;
            letter-spacing:1px; margin-bottom:var(--s3);
            padding-bottom:var(--s2); border-bottom:1px solid var(--border-soft); }
.ws-item { font-size:var(--fs-sm); color:var(--text-2); line-height:1.6;
           padding:var(--s3); border-radius:var(--r-sm); margin-bottom:var(--s2);
           border-left:2px solid var(--border); max-width:78ch; }
.ws-item b { color: var(--text); }
.ws-block { border-left-color:var(--bad); background:rgba(220,38,38,.07); }
.ws-warn  { border-left-color:var(--warn); background:rgba(245,158,11,.06); }
.ws-sigs { display:flex; flex-wrap:wrap; gap:var(--s2); }
.ws-cols { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.ws-foot { font-size:var(--fs-sm); color:var(--lens-soft); padding:var(--s3);
           border-top:1px solid var(--border-soft); line-height:1.6; }
.chip-sug { border-color:var(--good); color:var(--good); }@media (max-width: 780px){ .ws-cols { grid-template-columns:1fr; } }

/* ══ WHO PAYS ════════════════════════════════════════════════════ */
.payer-row { margin-top: -6px; margin-bottom: var(--s3); }
.chip-sm { font-size: var(--fs-xs); padding: 3px var(--s2); }
.payer-note { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.6;
              padding: var(--s3); background: var(--surface-2);
              border-radius: var(--r-sm); margin-top: var(--s3); }
.payer-note b { color: var(--text); font-family: var(--mono); }

/* ══ SETTLEMENT — where the money goes ═══════════════════════════ */
.tn-settle { border-left: 2px solid var(--accent); }
.st-row { padding: 3px 0; }
.st-less .num { color: var(--text-4); }
.st-sub  { color: var(--text-2); }
.st-sub .num { font-size: var(--fs-md); }
.st-urgent .num { color: var(--warn); }
.st-total { margin-top: 2px; }
.st-total .label { color: var(--text); text-transform: uppercase;
                   font-size: var(--fs-xs); letter-spacing: 1px; }
.st-total .num { font-size: var(--fs-lg); }
.st-rule { height: 1px; background: var(--border-soft); margin: var(--s2) 0; }
.st-detail { font-size: var(--fs-xs); color: var(--text-4); padding-left: var(--s3);
             margin: 2px 0 var(--s2); line-height: 1.5; }
.st-warn { border-left: 2px solid var(--warn); padding-left: var(--s3);
           background: rgba(245,158,11,.06); }

/* ══ OFFER PANEL — floats over everything ════════════════════════
   The offer is the number you change most. Open it from anywhere,
   drag while reading the DD checklist or the memo.                  */

.pn-tab, .pn {
  position: fixed; right: var(--s4); bottom: var(--s4); z-index: 80;
  background: var(--bg); border: 1px solid var(--accent);
  border-radius: var(--r-lg); box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.pn-tab { display: flex; align-items: baseline; gap: var(--s3);
          padding: var(--s3) var(--s4); cursor: pointer; }
.pn-tab-l { font-size: var(--fs-xs); color: var(--text-3); }
.pn-tab-c { font-size: var(--fs-xs); color: var(--text-4); }
.pn-unset { font-size: var(--fs-sm); color: var(--warn); }


/* ══ THE MEMO AS A SHEET ═════════════════════════════════════════
   js/modules/memo.js. The one section of this app that is a
   document rather than an instrument, so it looks like one: white,
   letter-width, lying on a backdrop in the middle of a dark scroll.

   THE PALETTE BELOW IS THE SAME ONE print.css USES. Two copies,
   deliberately — CSS cannot share a declaration block between a
   class and an @media print :root — and test/styles.js holds them
   together by rendering the memo both ways and comparing. Change
   one, change both, run styles.
   ═════════════════════════════════════════════════════════════════ */
.paper {
  --bg:          #ffffff;
  --surface:     #ffffff;
  --surface-2:   #f8fafc;
  --border:      #94a3b8;
  --border-soft: #cbd5e1;

  --text:        #000000;
  --text-2:      #1e293b;
  --text-3:      #475569;
  --text-4:      #64748b;

  --good:        #047857;
  --good-soft:   #047857;
  --good-bg:     #ecfdf5;
  --warn:        #b45309;
  --warn-soft:   #b45309;
  --bad:         #b91c1c;
  --bad-soft:    #b91c1c;
  --accent:      #3730a3;
  --accent-soft: #3730a3;

  --ready-edge:   #047857;
  --prov-edge:    #b45309;
  --blocked-edge: #94a3b8;
}

/* the viewer backdrop — a shade off the board, so the sheet reads
   as an object lying on it rather than a hole cut in it */
.paper-stage { background: #0b1220; margin: 0 calc(-1 * var(--s4));
               padding: var(--s5) var(--s4) var(--s6);
               border-top: 1px solid var(--border);
               border-bottom: 1px solid var(--border); position: relative; }
.paper-stage .memo-actions,
.paper-stage .dd-actions { max-width: 816px; margin: 0 auto var(--s4);
                           display: flex; justify-content: flex-end; gap: var(--s2); }

/* ══ THE DUE-DILIGENCE SHEET ═════════════════════════════════════
   10 Oct. The app's second document: what happens after a yes.
   Deliberately the same paper, letterhead and letter width as the
   memo — two documents that look like documents, and one gesture
   that gets either of them out.

   Save as PDF is the primary and wears the accent; Copy and Download
   are quiet. Three equal buttons at the top of the section is what
   made the real one unfindable. */
.dd-actions button {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: var(--s2) var(--s4);
  font-size: var(--fs-sm); font-family: var(--font); cursor: pointer;
}
.dd-actions #dd-print { background: var(--accent); border-color: var(--accent);
                        color: #fff; font-weight: 600; }
.dd-actions button:hover { border-color: var(--accent); }
.dd-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dd-second { opacity: .75; }
.dd-hint { font-size: var(--fs-xs); color: var(--text-3); }

.paper .ddsheet { max-width: none; margin: 0; }

/* the clock, before the work */
.ds-clock { display: flex; flex-wrap: wrap; gap: var(--s5);
            padding: var(--s3) 0 var(--s4); margin-bottom: var(--s4);
            border-bottom: 1px solid #cbd5e1; }
.ds-clock span { display: flex; flex-direction: column; gap: 2px; }
.ds-clock i { font-style: normal; font-size: 9px; letter-spacing: .08em;
              text-transform: uppercase; color: #64748b; }
.ds-clock span { font: 600 13px/1.3 var(--mono); color: #000; }
.ds-clock .ds-hot { color: #b91c1c; }
.ds-clock-none { display: block; font: 400 12px/1.5 var(--font); color: #64748b; }

/* what can still unwind this */
.ds-haz { margin-bottom: var(--s5); }
.ds-haz-i { margin-bottom: var(--s3); }
.ds-haz-i b { display: block; font-size: 12px; font-weight: 700; color: #000; }
.ds-haz-i span { display: block; font-size: 12px; line-height: 1.55; color: #1e293b; }

.ds-block { margin-bottom: var(--s5); break-inside: auto; }
.ds-h { font: 700 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
        color: #000; padding-bottom: 6px; margin-bottom: var(--s3);
        border-bottom: 2px solid #000; display: flex; justify-content: space-between; }
.ds-n { font-family: var(--mono); font-weight: 600; }
.ds-note { font-size: 11px; color: #475569; margin: -6px 0 var(--s3); }
.ds-must   .ds-h { border-bottom-color: #b91c1c; color: #b91c1c; }
.ds-verify .ds-h { border-bottom-color: #b45309; color: #b45309; }
.ds-unseen .ds-h { border-bottom-color: #b91c1c; color: #b91c1c; }

.ds-item { display: flex; gap: 10px; padding: 7px 0;
           border-bottom: 1px solid #e2e8f0; break-inside: avoid; }
/* A BOX YOU DRAW, NOT A CHARACTER YOU ASK FOR. The checklist used
   `content: "\2610"` and printed as the digit 1, because the print
   font had no glyph for it. A border always exists. */
.ds-box { flex: 0 0 auto; width: 11px; height: 11px; margin-top: 2px;
          border: 1.5px solid #334155; border-radius: 2px; }
.ds-body { flex: 1 1 auto; min-width: 0; }
.ds-what { font-size: 12px; line-height: 1.5; color: #000; }
.ds-crit { color: #b91c1c; font-weight: 700; text-transform: uppercase;
           font-size: 9px; letter-spacing: .08em; }
.ds-from { font-size: 10px; color: #64748b; margin-top: 2px; }
/* category once per group, WHO/BY once per pile */
.ds-grp { margin-bottom: var(--s3); }
.ds-grp-h { font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
            color: #475569; margin: var(--s2) 0 2px; }
.ds-cols { display: flex; justify-content: flex-end; gap: var(--s5);
           padding-right: 2px; margin-bottom: 2px; }
.ds-cols span { flex: 0 0 170px; font-size: 9px; letter-spacing: .06em;
                text-transform: uppercase; color: #94a3b8; }
/* rules to write on — a coordinator fills these in on the phone */
.ds-fill { display: flex; justify-content: flex-end; gap: var(--s5); margin-top: 6px; }
.ds-fill span { flex: 0 0 170px; border-bottom: 1px solid #cbd5e1; padding-bottom: 11px; }

.ds-pw { margin-bottom: var(--s3); }
.ds-pw-h { font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
           color: #475569; margin-bottom: 2px; }

.ds-wrow { display: flex; align-items: baseline; gap: var(--s3);
           padding: 5px 0; border-bottom: 1px solid #e2e8f0; }
.ds-wrow i { font-style: normal; flex: 0 0 150px; font-size: 10px;
             letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.ds-wrow span { flex: 1 1 auto; font-size: 12px; color: #000; }
.ds-wrow b { font: 600 12px/1 var(--mono); color: #000; }

.ds-clear { font-size: 12px; color: #047857; padding: var(--s4) 0; }
.ds-done { font: 400 11px/1.5 var(--mono); color: #475569;
           padding-top: var(--s3); border-top: 1px solid #cbd5e1; }
.ds-sign { display: flex; gap: var(--s6); margin: var(--s5) 0 var(--s4); }
.ds-sign span { flex: 1 1 0; border-bottom: 1px solid #334155; padding-bottom: 22px; }
.ds-sign i { font-style: normal; font-size: 9px; letter-spacing: .08em;
             text-transform: uppercase; color: #64748b; }

/* LETTER WIDTH ON PURPOSE. 816px is 8.5in at 96dpi, so the measure
   on screen is the measure on paper and the two columns below hold
   the same number of words in both. */
.paper { width: 816px; max-width: 100%; margin: 0 auto;
         background: #fdfdfb; color: #000;
         padding: var(--s5) 52px var(--s4);
         box-shadow: 0 18px 50px rgba(0,0,0,.55);
         position: relative; }
.paper .memo { max-width: none; margin: 0; }
.paper .card { background: none; box-shadow: none; }

/* letterhead */
.memo-letterhead { display: flex; align-items: center;
                   /* centre, not baseline: an uploaded logo is an image
                      with no baseline to share, and the document kind
                      on the right was dropping half a line below it. */
                   justify-content: space-between;
                   border-bottom: 2px solid #000; padding-bottom: var(--s2); }
.memo-mark { font-size: var(--fs-md); letter-spacing: -.3px; color: #000; }
.memo-mark b { font-weight: 700; }
.memo-kind { font-size: var(--fs-xs); text-transform: uppercase;
             letter-spacing: 1.4px; color: #475569; margin-left: auto; }

/* THE UPLOADED LOGO, BOUNDED. Whatever shape somebody uploads, the
   letterhead stays one line tall — a tall mark would push the whole
   first page down and a wide one would collide with the document
   kind on the right. object-fit keeps the aspect ratio inside it. */
.memo-logo { max-height: 34px; max-width: 220px; width: auto; height: auto;
             object-fit: contain; display: block; }
.memo-co { font-size: var(--fs-sm); color: #000; font-weight: 600;
           margin-left: var(--s3); align-self: center; }

/* ── the upload, in the identity card ────────────────────────── */
.id-logo { display: flex; gap: var(--s4); align-items: flex-start;
           margin-top: var(--s3); padding-top: var(--s3);
           border-top: 1px solid var(--border-soft); }
.id-logo-p { flex: 0 0 auto; width: 104px; height: 56px; display: flex;
             align-items: center; justify-content: center;
             /* white, because that is the paper it will sit on */
             background: #fff; border: 1px solid var(--border);
             border-radius: var(--r-sm); overflow: hidden; }
.id-logo-p img { max-width: 92px; max-height: 46px; object-fit: contain; }
.id-logo-e { font-size: var(--fs-xs); color: #94a3b8; }
.id-logo-c { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.id-logo-b { display: flex; gap: var(--s2); margin-top: var(--s2); }
.id-logo-up, .id-logo-x {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 4px var(--s3);
  font-size: var(--fs-xs); font-family: var(--font); cursor: pointer; }
.id-logo-up:hover, .id-logo-x:hover { border-color: var(--accent); }
.id-logo-m:not(:empty) { font-size: var(--fs-xs); color: var(--bad-soft);
                         margin-top: var(--s2); }

.paper .memo-header { border-bottom: 1px solid #cbd5e1; padding: var(--s3) 0;
                      margin-bottom: var(--s4); }
.paper .memo-header h1 { font-size: 26px; margin: 0 0 var(--s3); color: #000;
                         letter-spacing: -.4px; }
.memo-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.memo-meta span { font-size: var(--fs-xs); color: #1e293b; }
.memo-meta i { display: block; font-style: normal; font-size: 10px;
               text-transform: uppercase; letter-spacing: .8px; color: #64748b; }

/* THE STAMP — what underwriting concluded, on the face of the
   document, the way a real memo carries it. */
/* INSIDE THE PAGE. It first hung off the right edge, which read
   as a clipping bug rather than a stamp — paper does not have
   things sticking out of it. */
.paper-stamp { position: absolute; top: 92px; right: 52px;
               transform: rotate(-9deg);
               font-size: var(--fs-md); font-weight: 700; letter-spacing: 2px;
               text-transform: uppercase; padding: 6px 48px;
               border: 2px solid currentColor; border-radius: 3px;
               opacity: .5; pointer-events: none; }
.stamp-good { color: #047857; }
.stamp-walk { color: #b91c1c; }
.stamp-unknown, .stamp-ok { color: #b45309; }

/* TWO COLUMNS, ROW BY ROW. See the note in memo.js: a grid keeps
   reading order and visual order the same thing, which column-count
   on a scrolling page does not. */
/* STRETCH, NOT START. Sections in a row are rarely the same
   height — Why this deal against Property details is two lines
   against twelve — and with align-items:start the shorter one
   stopped dead and left a hole that read as a rendering fault.
   Stretched, its rule runs to the bottom of the row and the white
   below it is margin rather than a gap. */
/* TIGHTER THAN THE BOARD, LOOSER THAN A SPREADSHEET. A sheet is
   read, so it keeps its measure and its type size — what comes out
   is the air between things, which is where a long document's
   length actually lives. */
.memo-sheet { display: grid; grid-template-columns: 1fr 1fr;
              gap: var(--s3) var(--s5); align-items: stretch; }
.memo-wide { grid-column: 1 / -1; }
.paper .memo-section { padding: 0 0 var(--s3); margin: 0;
                       border: none; border-bottom: 1px solid #e2e8f0; }
.paper .memo-grid .row { padding: 3px 0; }
.paper .memo-p { line-height: 1.55; margin-bottom: var(--s2); }
.paper .memo-lead { margin-bottom: var(--s3); }
.paper .memo-stats { gap: var(--s3) var(--s4); margin: var(--s3) 0; }
.paper .verdict { padding: var(--s3) var(--s4); }
.paper .vd-row { padding: 1px 0; }
.paper .memo-flag, .paper .memo-ok { margin-top: var(--s2); padding: var(--s2) var(--s3); }
/* the see-the-property panel is the single biggest block before the
   document starts, and most of it is two wrapped URLs */
.paper .photos { padding: var(--s3) var(--s4); margin-bottom: var(--s3); }
.paper .ph-l { word-break: break-all; }
/* inside half a sheet there is room for one column of rows, not two */
.memo-sheet > :not(.memo-wide) .memo-grid,
.memo-sheet > :not(.memo-wide) .memo-cols { grid-template-columns: 1fr; }
/* A FULL-WIDTH SECTION HAS TO USE THE WIDTH. Section 1 spans the
   sheet because the recommendation should not be hunted for — and
   then printed twelve one-line checks down the left with half a
   page of nothing beside them. The list splits; each line is short
   and self-contained, so there is no read-down-then-up here. */
/* display:flex beats column-count — the list has to stop being a
   flex container before it can be a multi-column one. */
.memo-wide .vd-list { display: block; column-count: 2; column-gap: var(--s6); }
.memo-wide .vd-row { break-inside: avoid; }
.paper .memo-head { border-bottom: none; padding-bottom: 2px; }
.paper .memo-num { color: #94a3b8; }

.memo-foot { display: flex; justify-content: space-between; flex-wrap: wrap;
             gap: var(--s2); margin-top: var(--s5); padding-top: var(--s3);
             border-top: 1px solid #cbd5e1;
             font-size: 10px; color: #64748b; }

@media (max-width: 900px) {
  .memo-sheet { grid-template-columns: 1fr; }
  .paper { padding: var(--s5) var(--s4); }
  .paper-stamp { right: -20px; padding: 5px 30px; }
}
/* On paper the stage and the shadow are nothing — the page IS the
   page. Everything else here is already what prints. */
@media print {
  .paper-stage { background: none; border: none; margin: 0; padding: 0; }
  .paper { width: auto; box-shadow: none; padding: 0; background: none; }
  .paper-stamp { opacity: .45; }
}

/* ══ THE DESK ════════════════════════════════════════════════════
   js/modules/desk.js. One floating surface where there used to be
   two — the readiness bar bottom-left and the offer panel
   bottom-right, each counting the same findings and printing a
   different total at opposite corners of the screen.

   It borrows .pn's frame deliberately: same fixed corner, same
   border, same shadow, because it IS that panel with four more
   tabs, and a second visual language for the same box would say
   they were different things.                                     */
/* DOWN THE RIGHT, NOT ACROSS THE BOTTOM.
   Full width was the fix for a 360px box whose six tabs wrapped and
   whose open body ran half the screen tall. It fixed both and
   overshot: a strip across the whole bottom edge is enormous, and
   the board it floats over is left-aligned, so the panel was
   covering the one column anybody reads.
   Anchored to the bottom-RIGHT at 40% and opening upwards keeps
   everything the width bought — four tabs on one row, no dragging,
   no stored position — and gives the board its left column back. */
.dk { position: fixed; right: var(--s4); left: auto; bottom: 0; z-index: 80;
      width: 40%; min-width: 360px; max-width: 560px;
      background: var(--bg);
      border: 1px solid var(--accent); border-bottom: none;
      border-radius: var(--r-lg) var(--r-lg) 0 0;
      box-shadow: 0 -8px 32px rgba(0,0,0,.5); }
.dk-inner { padding: 0 var(--s4); width: 100%; }

/* folded — one line, and the line is the most useful thing there is */
.dk-min-b { display: flex; align-items: center; gap: var(--s3); cursor: pointer;
            padding: var(--s3) var(--s4); text-align: left;
            background: none; border: none; }
.dk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
          flex: none; }
.dk-min-l { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.4;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-min-c { font-size: var(--fs-xs); color: var(--text-4); margin-left: auto;
            white-space: nowrap; letter-spacing: .3px; text-transform: uppercase; }

.dk-open .dk-inner { display: flex; flex-direction: column; max-height: 62vh; }
/* the tabs ARE the title bar — there is room for them on one row
   now, which was the whole reason for going full width */
.dk-head { display: flex; align-items: stretch; gap: var(--s3);
           border-bottom: 1px solid var(--border); }
/* The state line is the first thing to give up room — the tabs and
   the close button are controls, it is a caption, and at 40% there
   is not room for all three to be comfortable. */
.dk-state { font-size: var(--fs-xs); color: var(--text-4); margin-left: auto;
            align-self: center; white-space: nowrap; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; }
.dk-x { font-size: var(--fs-xs); padding: 2px var(--s2); align-self: center;
        flex: none; white-space: nowrap; }
.dk-tabs { flex: none; }

.dk-tabs { display: flex; gap: 2px; }
.dk-tab { font-size: var(--fs-xs); padding: var(--s2) var(--s3);
          background: none; border: none; border-bottom: 2px solid transparent;
          color: var(--text-4); cursor: pointer; }
.dk-tab-on { color: var(--text); border-bottom-color: var(--accent); }

.dk-body { padding: var(--s4) 0; overflow-y: auto; }
.dk-empty { font-size: var(--fs-sm); color: var(--text-4); }

/* Next */
.dk-count { font-size: var(--fs-xs); color: var(--text-4); letter-spacing: .3px;
            text-transform: uppercase; margin-bottom: var(--s2); }
.dk-todo { font-size: var(--fs-md); color: var(--text); line-height: 1.5;
           margin-bottom: var(--s3); }
.dk-moves { display: flex; flex-direction: column; gap: var(--s2);
            margin-bottom: var(--s4); }
.dk-move { align-self: flex-start; font-size: var(--fs-sm);
           padding: var(--s2) var(--s3); background: var(--accent);
           color: #fff; border: none; border-radius: var(--r-sm); cursor: pointer; }
.dk-why { font-size: var(--fs-xs); color: var(--text-4); line-height: 1.5; }

.dk-rungs { list-style: none; margin: 0 0 var(--s3); padding: 0; }
.dk-rungs li { display: flex; align-items: baseline; gap: var(--s2);
               font-size: var(--fs-sm); padding: 3px 0; flex-wrap: wrap; }
.dk-box { font-size: var(--fs-xs); width: 1em; flex: none; }
.dk-on  { color: var(--text-3); }
.dk-on .dk-box { color: var(--good); }
.dk-off { color: var(--text); }
.dk-off .dk-box { color: var(--text-4); }
.dk-rwhy { font-size: var(--fs-xs); color: var(--text-4); flex: 1 1 100%;
           padding-left: calc(1em + var(--s2)); }

/* settling a finding — one gesture, where you can see it */
.dk-acc { border-top: 1px solid var(--border-soft); padding-top: var(--s3); }
.dk-acc-h { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .3px;
            color: var(--text-4); margin-bottom: var(--s2); }
.dk-acc-i { font-size: var(--fs-sm); color: var(--text-3);
            line-height: 1.5; padding: var(--s2) 0;
            border-top: 1px solid var(--border-soft); }
.dk-acc-i:first-of-type { border-top: none; }
.dk-acc-t { display: block; }
.dk-acc-x { display: flex; gap: var(--s2); margin-top: var(--s2); }
/* TINY, AND THEY LOOK THE SAME EVERYWHERE. The same control sits
   under a question and under a number, so it is one class — and it
   is a link with a hit area rather than a button with a slab, or
   twelve of them down one column read as a form to fill in. */
.dk-acc-b { font-size: var(--fs-xs); white-space: nowrap;
            padding: 1px 6px; line-height: 1.6;
            background: none; border: 1px solid var(--border);
            border-radius: var(--r-sm); color: var(--text-4); cursor: pointer; }
.dk-acc-b:hover { color: var(--text); border-color: var(--text-4); }

/* Control — the verbs.
   Two rows of three, then two halves, then the paste box. The
   widths are deliberate: the one thing you press most is the full
   width of the panel, and the two that leave the app for the house
   are a matched pair rather than two of five things in a wrap. */
.dk-ctl-r { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s2); }
.dk-ctl-r button { font-size: var(--fs-xs); }
.dk-ctl-wide .primary { flex: 1 1 100%; font-size: var(--fs-sm); }
.dk-ctl-links { margin-top: var(--s3); }
.dk-ctl-links .lnkbs { display: flex; gap: var(--s2); width: 100%; }
.dk-ctl-links .lnkb { flex: 1 1 48%; justify-content: center; }
/* the panels askai still writes — inside a tab, not floating */
.dk-ctl-body { margin-top: var(--s3); }
.dk-ctl-body .sop-body { background: none; border: none; padding: 0; box-shadow: none; }

/* ready — the payoff */
.dk-ready-h { font-size: var(--fs-md); color: var(--good); margin-bottom: var(--s2); }
.dk-ready-w { font-size: var(--fs-sm); color: var(--text-3); }
.dk-ready-t { display: block; font-family: var(--mono); font-size: var(--fs-xl);
              color: var(--text); margin: var(--s2) 0 var(--s3); }
.dk-go { font-size: var(--fs-sm); }

/* Monthly — the chain */
.dk-mr { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--s3);
         padding: var(--s2) 0; font-size: var(--fs-sm); }
.dk-mg { grid-column: 1 / -1; margin-top: 4px; }
.dk-ml { color: var(--text-2); }
.dk-mv { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.dk-mn { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--text-4);
         line-height: 1.5; }
.dk-mt { border-top: 1px solid var(--border-soft); margin-top: var(--s1); }
.dk-mt .dk-ml, .dk-mt .dk-mv { color: var(--text); font-weight: 600; }
.dk-prov .dk-ml, .dk-prov .dk-mv { opacity: .68; }
.dk-note { font-size: var(--fs-xs); color: var(--text-4); line-height: 1.5;
           margin-top: var(--s3); }

/* Changes */
.dk-ch { display: flex; gap: var(--s3); align-items: baseline;
         font-size: var(--fs-sm); padding: var(--s2) 0; }
.dk-ch-n { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-4); }
.dk-ch-w { flex: 1; color: var(--text-3); line-height: 1.5; }

/* Place — one at a time, which is the whole difference from the card */
.dk-pf { font-size: var(--fs-lg); color: var(--text); line-height: 1.5;
         min-height: 4.5em; }
.dk-pf-w { color: var(--text-3); }
.dk-pn { display: flex; justify-content: space-between; align-items: baseline;
         font-size: var(--fs-xs); color: var(--text-4); margin-top: var(--s3); }

/* ONE COLUMN. The two-column rules here were written for a panel
   that spanned the window and keyed off the VIEWPORT being 900px —
   which stayed true when the panel became 40% of it, so the chain
   tried to run two columns inside 500px. The panel scrolls instead;
   a scroll is honest and a crushed column is not. */
@media (max-width: 780px) {
  .dk { left: var(--s2); right: var(--s2); width: auto;
        min-width: 0; max-width: none; }
  .dk-open .dk-inner { max-height: 72vh; }
  .dk-tabs { overflow-x: auto; }
}
@media print { .dk { display: none !important; } }

.pn { width: 320px; max-height: 78vh; overflow-y: auto; padding: var(--s4); }
/* inside the desk it is a tab body, not a window */
.dk .pn-price { margin-top: 0; }
.pn-head { display: flex; justify-content: space-between; align-items: baseline;
           margin-bottom: var(--s2); }
.pn-x { font-size: var(--fs-xs); padding: 2px var(--s2); }

.pn-price input {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: var(--s2) var(--s3); font-family: var(--mono);
  font-size: var(--fs-xl); font-variant-numeric: tabular-nums;
}
.pn input[type=range] { width: 100%; margin: var(--s3) 0 var(--s2); accent-color: var(--accent); }
.pn-warn { font-size: var(--fs-xs); color: var(--warn-soft); line-height: 1.5;
           margin-top: var(--s2); }

.pn-rows { border-top: 1px solid var(--border-soft); padding-top: var(--s2); }
.pn-row { display: flex; justify-content: space-between; align-items: baseline;
          padding: 3px 0; font-size: var(--fs-sm); }

.pn-range { display: flex; align-items: baseline; gap: var(--s2);
            padding: var(--s1) 0; font-size: var(--fs-xs); }
.pn-range:first-of-type { border-top: 1px solid var(--border-soft);
                          margin-top: var(--s2); padding-top: var(--s2); }
.pn-range .label { flex: 1; }
.pn-range .num { font-size: var(--fs-sm); }
.pn-gap { font-family: var(--mono); }
.pn-gap.ok    { color: var(--good); }
.pn-gap.under { color: var(--bad-soft); }

.pn-struct { width: 100%; display: flex; justify-content: space-between;
             align-items: center; gap: var(--s2); margin-top: var(--s3);
             padding: var(--s2) var(--s3); font-size: var(--fs-xs);
             text-align: left; }
.pn-switch { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s2); }
.pn-alt { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--s2);
          text-align: left; padding: var(--s2); font-size: var(--fs-xs); }
.pn-alt.on { border-color: var(--accent); background: rgba(99,102,241,.12); }
.pn-alt-n { color: var(--text); }
.pn-alt-v { font-family: var(--mono); color: var(--good); }
.pn-alt-s { grid-column: 1 / -1; color: var(--text-4); font-family: var(--mono); }

.pn-checks { margin-top: var(--s3); padding-top: var(--s2);
             border-top: 1px solid var(--border-soft);
             font-size: var(--fs-xs); color: var(--bad-soft); }
.pn-checks.pn-ok { color: var(--good); }@media (max-width: 780px){
  .pn, .pn-tab { left: var(--s2); right: var(--s2); bottom: var(--s2); }
  .pn { width: auto; max-height: 70vh; }
  .cockpit { bottom: 64px; }          /* clear the collapsed tab */
}@media print{ .pn, .pn-tab { display: none !important; } }

/* ══ THE PRICE SLIDER AND ITS THREE LANDMARKS ════════════════════
   10 Oct. The track was the operating system's — a blue iOS pill in
   the middle of a slate panel, the one control in the app that had
   never been dressed. Beneath it sat three unlabelled coloured bars
   whose names lived in title= attributes, which is to say nowhere.

   --pn-thumb is half the thumb's width. It sets the thumb size AND
   the inset the marks are positioned by, so the two cannot drift:
   a mark on the asking price sits under the thumb when the offer is
   the asking price, which is the thing you can actually look at to
   know the scale is honest. */
.pn-slider { --pn-thumb: 8px; position: relative; margin: 0 0 var(--s2); }

#pn-range { -webkit-appearance: none; appearance: none;
            display: block; width: 100%; height: 18px;
            background: transparent; cursor: pointer; margin: 0; }
#pn-range::-webkit-slider-runnable-track {
    height: 4px; border-radius: 2px; background: var(--surface-2);
    border: 1px solid var(--border-soft); }
#pn-range::-moz-range-track {
    height: 4px; border-radius: 2px; background: var(--surface-2);
    border: 1px solid var(--border-soft); }
#pn-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: calc(var(--pn-thumb) * 2); height: calc(var(--pn-thumb) * 2);
    border-radius: 50%; background: var(--text);
    border: 2px solid var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.45);
    margin-top: calc(2px - var(--pn-thumb)); }
#pn-range::-moz-range-thumb {
    width: calc(var(--pn-thumb) * 2); height: calc(var(--pn-thumb) * 2);
    border: 2px solid var(--surface); border-radius: 50%;
    background: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.45); }
#pn-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The marks sit ON the track, each carrying its own word. */
.pn-ticks { position: absolute; left: 0; right: 0; top: 0;
            height: 100%; pointer-events: none; }
.pn-tick { position: absolute; top: 0; transform: translateX(-50%);
           display: flex; flex-direction: column; align-items: center; }
.pn-tick i { display: block; width: 2px; height: 12px; border-radius: 1px; }
.pn-tick b { font: 500 9px/1 var(--mono); letter-spacing: .04em;
             text-transform: uppercase; white-space: nowrap;
             margin-top: 3px; }

/* BOTH ENDS ARE WALLS. The floor was red and the ceiling green, which
   read as bad-end/good-end — but you cannot go below the floor OR
   above the ceiling, and the rows underneath already colour the ROOM
   you have between them. The asking price is a reference, not a wall,
   so it is the one that looks different. */
.tk-wall i { background: var(--bad-soft); }
.tk-wall b { color: var(--bad-soft); }
.tk-ask  i { background: var(--text-3); }
.tk-ask  b { color: var(--text-4); }

/* Room for the words. The strip the marks used to live in is gone,
   so the panel pays for the labels instead of for empty space. */
.pn-slider { padding-bottom: 16px; }
.pn-ask .label  { color: var(--text-3); }
.pn-gap.here { color: var(--accent-soft); }

/* ══ SCRIPTS ═════════════════════════════════════════════════════ */
.sc-flags { margin-bottom: var(--s4); }
.sc-flag { background: rgba(220,38,38,.07); border-left: 2px solid var(--bad);
           border-radius: var(--r-sm); padding: var(--s3); margin-bottom: var(--s2); }
.sc-flag-t { font-size: var(--fs-sm); color: var(--text); margin-bottom: var(--s1); }
.sc-flag-b { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6; max-width: 76ch; }
.sc-say { margin-top: var(--s2); padding: var(--s2) var(--s3);
          background: var(--surface-2); border-radius: var(--r-sm);
          font-size: var(--fs-sm); color: var(--accent-soft); line-height: 1.6;
          font-style: italic; max-width: 76ch; }

.sc-pacing { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6;
             padding: var(--s3); background: rgba(245,158,11,.06);
             border-left: 2px solid var(--warn); border-radius: var(--r-sm);
             margin-bottom: var(--s3); max-width: 76ch; }

.sc-tid { margin-bottom: var(--s4); }
.sc-tid-i { font-size: var(--fs-sm); color: var(--text-3); padding: 3px 0 3px var(--s4);
            position: relative; }
.sc-tid-i::before { content: "\00b7"; position: absolute; left: var(--s2); color: var(--accent); }

.sc-body { background: var(--surface-2); border-radius: var(--r-md);
           padding: var(--s4); font-family: var(--font); font-size: var(--fs-md);
           line-height: 1.75; color: var(--text-2); white-space: pre-wrap;
           max-width: 74ch; margin: 0 0 var(--s3); }

.sc-objs { display: flex; flex-direction: column; gap: var(--s2); }
.sc-obj { background: var(--surface-2); border-radius: var(--r-md); padding: var(--s3); }
.sc-obj-q { font-size: var(--fs-sm); color: var(--warn-soft); margin-bottom: var(--s2); }
.sc-obj-a { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.7; max-width: 74ch; }

.sc-receipts { margin-top: var(--s5); }
.sc-r { display: grid; grid-template-columns: 24px 1fr auto; gap: var(--s2);
        align-items: baseline; padding: var(--s1) 0; font-size: var(--fs-sm); }
.sc-r-i { text-align: center; }
.sc-r-l { color: var(--text-2); }
.sc-r-d { color: var(--text-4); font-family: var(--mono); font-size: var(--fs-xs); }@media (max-width:780px){ .sc-r { grid-template-columns: 20px 1fr; } .sc-r-d { grid-column: 2; } }

/* ══ WHO YOU ARE ═════════════════════════════════════════════════ */
.id-card { border-color: var(--warn); }
.id-card.id-done { border-color: var(--border-soft); }
.id-head { display: flex; gap: var(--s3); align-items: flex-start; }
.id-i { font-size: 18px; flex: none; }
.id-done .id-i { color: var(--good); }
.id-hint { font-size: var(--fs-xs); color: var(--text-4); margin-top: 2px; }
.id-switch { margin-left: auto; font-size: var(--fs-xs); padding: 2px var(--s2);
             color: var(--text-4); background: none; border: 1px solid var(--border-soft); }
.id-switch:hover { color: var(--text-2); border-color: var(--border); }

/* ══ AI DOCUMENTS ════════════════════════════════════════════════ */
.ad-g { font-size: var(--fs-xs); color: var(--text-4); text-transform: uppercase;
        letter-spacing: 1px; margin: var(--s3) 0 var(--s2); }
.ad-list { display: flex; flex-direction: column; gap: 2px; }
.ad-doc { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s2);
          align-items: baseline; padding: var(--s2) var(--s3);
          background: var(--surface-2); border-radius: var(--r-sm);
          border: 1px solid transparent; cursor: pointer; font-size: var(--fs-sm); }
.ad-doc.on { border-color: var(--accent); background: rgba(99,102,241,.10); }
.ad-doc input { accent-color: var(--accent); }
.ad-l { color: var(--text); }
.ad-w { font-size: var(--fs-xs); color: var(--text-4); text-align: right; }
.ad-dim { opacity: .62; }

/* ── FIND vs WRITE ────────────────────────────────────────────
   Two piles, and they should not look alike. The find pile is
   amber because it is a caution, not a feature: these are the
   documents where the useful answer is for an AI to refuse. */
.ad-pile { margin-bottom: var(--s4); }
.ad-pile-h { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1px;
             color: var(--text-2); font-weight: 600;
             padding-bottom: var(--s2); margin-bottom: var(--s2);
             border-bottom: 1px solid var(--border); }
.ad-pile-find .ad-pile-h { color: var(--warn); border-bottom-color: var(--warn); }
.ad-pile-write .ad-pile-h { color: var(--accent-soft); border-bottom-color: var(--accent); }
.ad-pile-n { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.6;
             max-width: 74ch; margin-bottom: var(--s3); }
.ad-pile-find .ad-pile-n b { color: var(--warn); }

/* the source and the signatories sit under the name, not beside it —
   the row is a grid of three and these are a second line */
.ad-doc { grid-template-columns: auto 1fr auto; }
.ad-src, .ad-sig { grid-column: 2; font-size: var(--fs-xs); color: var(--text-4);
                   line-height: 1.45; }
/* a document the checklist asked for says so, in the checklist's
   own words — the reason is what tells you whether to care */
.ad-ask { grid-column: 2; font-size: var(--fs-xs); color: var(--warn);
          line-height: 1.5; margin-top: 2px; }
.ad-sig { color: var(--text-3); }
.ad-find.on { border-color: var(--warn); background: rgba(245,158,11,.09); }
.ad-find input { accent-color: var(--warn); }
.ad-others { margin-top: var(--s2); display: flex; flex-direction: column; gap: 2px; }
.ad-more { width: 100%; margin-top: var(--s3); font-size: var(--fs-xs);
           color: var(--text-3); background: none; border: 1px dashed var(--border); }
.ad textarea { margin-top: var(--s2); }
.ad-priv { margin-top: var(--s4); padding: var(--s3); border-radius: var(--r-sm);
           background: rgba(99,102,241,.06); border-left: 2px solid var(--accent);
           font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6; max-width: 76ch; }
.ad-priv b { color: var(--accent-soft); }@media (max-width:780px){ .ad-doc { grid-template-columns: auto 1fr; }
                          .ad-w { grid-column: 2; text-align: left; } }

/* an inferred assumption is information, not a warning */
.rd-chip-info { color: var(--text-4); border-color: var(--border-soft); }
.fld-needed .label { color: var(--warn); }
.fld-needed input { border-color: var(--prov) !important;
                    background: rgba(245,158,11,.06); }

/* ══ DD LEAD-IN ══════════════════════════════════════════════════ */
.dd-brief { background: var(--surface-2); border-radius: var(--r-md);
            padding: var(--s4); margin-bottom: var(--s4);
            border-left: 2px solid var(--accent); }
.dd-brief-h { font-size: var(--fs-xs); color: var(--accent-soft);
              text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--s2); }
.dd-brief-b { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.65;
              max-width: 76ch; }
.dd-brief-b b { color: var(--text); }
.dd-pts { margin-top: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.dd-pt-t { font-size: var(--fs-sm); color: var(--text); margin-bottom: 2px; }
.dd-pt-b { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.65; max-width: 76ch; }

/* ══ CLOSING TERMS ═══════════════════════════════════════════════ */
.ct-head, .ct-line { display: grid;
  grid-template-columns: minmax(150px,1.4fr) minmax(160px,1fr) 110px minmax(190px,auto);
  gap: var(--s3); align-items: center; }
.ct-head { font-size: var(--fs-xs); color: var(--text-4); text-transform: uppercase;
           letter-spacing: 1px; padding: 0 var(--s3) var(--s2);
           border-bottom: 1px solid var(--border-soft); }
.ct-line { padding: var(--s3); border-bottom: 1px solid var(--border-soft); }
.ct-line:last-of-type { border-bottom: none; }
.ct-l { display: flex; flex-direction: column; gap: 2px; }
.ct-name { font-size: var(--fs-md); color: var(--text); }
.ct-note { font-size: var(--fs-xs); color: var(--text-4); }
.ct-pct { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ct-pct input { width: 66px; background: var(--bg); color: var(--text);
                border: 1px solid var(--border); border-radius: var(--r-sm);
                padding: var(--s2); font-family: var(--mono); font-size: var(--fs-md); }
.ct-presets { display: flex; gap: 2px; }
.ct-amt { font-family: var(--mono); font-size: var(--fs-lg); color: var(--text);
          font-variant-numeric: tabular-nums; text-align: right; }
.ct-who { display: flex; gap: 2px; justify-content: flex-end; }
.ct-simple .ct-pct input { width: 110px; }

.ct-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4);
            margin: var(--s4) 0; padding: var(--s3) var(--s4);
            background: var(--surface-2); border-radius: var(--r-md); }
.ct-split > div { display: flex; flex-direction: column; gap: 2px; }
.ct-split .num { font-family: var(--mono); font-size: var(--fs-xl);
                 font-variant-numeric: tabular-nums; }

.rd-go { cursor: pointer; }
.rd-go:hover { border-color: var(--accent); color: var(--text); }
.go-flash { animation: goflash 1.4s ease-out; }
@keyframes goflash {
  0%,100% { box-shadow: none; }
  15%     { box-shadow: 0 0 0 2px var(--accent); }
}@media (max-width: 780px){
  .ct-head { display: none; }
  .ct-line { grid-template-columns: 1fr auto; gap: var(--s2) var(--s3); }
  .ct-l    { grid-column: 1; }
  .ct-amt  { grid-column: 2; }
  .ct-pct  { grid-column: 1 / -1; }
  .ct-who  { grid-column: 1 / -1; justify-content: flex-start; }
  .ct-split { grid-template-columns: 1fr; gap: var(--s3); }
}

/* ══ MONTHLY / ANNUAL PAIRS ══════════════════════════════════════ */
.pair { display: grid; grid-template-columns: minmax(150px,1.2fr) 120px 120px;
        gap: var(--s3); align-items: end; padding: var(--s3) 0;
        border-bottom: 1px solid var(--border-soft); }
.pair-l { display: flex; flex-direction: column; gap: 2px; }
.pair-l .label { font-size: var(--fs-md); color: var(--text); }
.pair-f { display: flex; flex-direction: column; gap: 3px; }
.pair-f .label { font-size: var(--fs-xs); color: var(--text-4); }
.pair-f input { background: var(--bg); color: var(--text);
                border: 1px solid var(--border); border-radius: var(--r-sm);
                padding: var(--s2); font-family: var(--mono);
                font-size: var(--fs-md); width: 100%; }
.pair-derived { border-color: var(--accent) !important; }
.pair-note { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--text-4);
             line-height: 1.5; margin-top: 2px; }

.taxpick { margin-top: var(--s4); padding: var(--s3); background: var(--surface-2);
           border-radius: var(--r-md); }
.taxpick-opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2);
                margin-top: var(--s2); }
.taxopt { display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
          text-align: left; padding: var(--s3); }
.taxopt.on { border-color: var(--accent); background: rgba(99,102,241,.12); }
.taxopt-t { font-size: var(--fs-sm); color: var(--text); }
.taxopt .num { font-size: var(--fs-lg); }
.taxopt-n { font-size: var(--fs-xs); color: var(--text-4); }@media (max-width:780px){
  .pair { grid-template-columns: 1fr 1fr; }
  .pair-l { grid-column: 1 / -1; }
  .taxpick-opts { grid-template-columns: 1fr; }
}

/* ══ OPERATING COST ══════════════════════════════════════════════ */
.opex { background: var(--surface-2); border-radius: var(--r-md);
        padding: var(--s4); margin-bottom: var(--s4); }
.opex-top { display: flex; justify-content: space-between; align-items: flex-start;
            gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s3); }
.opex-big { font-family: var(--mono); font-size: var(--fs-2xl); color: var(--text);
            line-height: 1.1; }
.opex-amt { font-size: var(--fs-md); color: var(--text-3); }
.opex-total { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.opex-total .num { font-size: var(--fs-xl); }
.opex-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
                gap: var(--s2); }
.opexo { display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
         text-align: left; padding: var(--s2) var(--s3); }
.opexo.on { border-color: var(--accent); background: rgba(99,102,241,.12); }
.opexo-p { font-family: var(--mono); font-size: var(--fs-md); color: var(--text); }
.opexo-t { font-size: var(--fs-xs); color: var(--text-4); }
.opex-foot { margin-top: var(--s3); font-size: var(--fs-xs); color: var(--text-4);
             line-height: 1.55; }
.lnk { background: none; border: none; color: var(--accent-soft);
       text-decoration: underline; padding: 0; font-size: inherit; cursor: pointer; }
.wf-carry { border-top: 1px solid var(--border-soft); margin-top: var(--s2);
            padding-top: var(--s2); }
.wf-carry .label { color: var(--text-2); }

/* ══ OPEX COMPONENTS ═════════════════════════════════════════════ */
.op-collapsed { display: flex; flex-direction: column; gap: var(--s3);
                align-items: flex-start; }
.op-guide { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.65;
            max-width: 72ch; }
.op-guide b { color: var(--text); font-family: var(--mono); }

.op-list { display: flex; flex-direction: column; gap: 1px; }
.op-row { display: grid; grid-template-columns: minmax(180px,1fr) 150px;
          gap: var(--s2) var(--s3); align-items: center;
          padding: var(--s2) var(--s3); border-radius: var(--r-sm); opacity: .55; }
.op-row.on { opacity: 1; background: rgba(99,102,241,.07); }
.op-check { display: flex; align-items: center; gap: var(--s2); cursor: pointer; }
.op-check input { accent-color: var(--accent); }
.op-name { font-size: var(--fs-md); color: var(--text); }
.op-in { display: flex; align-items: center; gap: var(--s2); justify-content: flex-end; }
.op-in input { width: 62px; background: var(--bg); color: var(--text);
               border: 1px solid var(--border); border-radius: var(--r-sm);
               padding: var(--s1) var(--s2); font-family: var(--mono);
               font-size: var(--fs-md); text-align: right; }
.op-in input:disabled { opacity: .4; }
.op-range { font-size: var(--fs-xs); color: var(--text-4); font-family: var(--mono);
            min-width: 46px; }
.op-why { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--text-4);
          line-height: 1.5; max-width: 74ch; }@media (max-width:780px){ .op-row { grid-template-columns: 1fr; }
                          .op-in { justify-content: flex-start; } }
.op-direct { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }
.op-set { display: flex; flex-direction: column; gap: 3px; }
.op-setin { display: flex; align-items: center; gap: var(--s1); }
.op-setin input { width: 84px; background: var(--bg); color: var(--text);
                  border: 1px solid var(--border); border-radius: var(--r-sm);
                  padding: var(--s2); font-family: var(--mono);
                  font-size: var(--fs-lg); text-align: right; }
.op-or { color: var(--text-4); font-size: var(--fs-sm); padding-bottom: var(--s2); }


/* ══ RENT SLIDER ═════════════════════════════════════════════════
   The markers used to print on top of each other whenever two values
   were close — HUD FMR, the low end and break-even can sit within $50
   on the same deal. They now stack into rows with clearance.          */
.rentslider { position: relative; margin: var(--s5) 0 var(--s3); }
.rentslider input[type=range] {
  width: 100%; height: 28px; accent-color: var(--accent); cursor: grab;
  position: relative; z-index: 2;
}
.rentslider input[type=range]:active { cursor: grabbing; }
.rentslider .marks { position: absolute; left: 0; right: 0; top: 24px;
                     height: 0; pointer-events: none; }
.rentslider .mark { position: absolute; transform: translateX(-50%); }
.rentslider .mark-tick { display: block; width: 1px; background: var(--border);
                         margin: 0 auto; }
.rentslider .mark-lbl { display: block; font-size: var(--fs-xs); color: var(--text-3);
                        text-align: center; white-space: nowrap;
                        line-height: 1.4; margin-top: 3px; }
.rentslider .mark-lbl b { display: block; font-family: var(--mono);
                          font-size: var(--fs-sm); color: var(--text); font-weight: 500; }

/* each marker means something different — colour says which */
.mk-range .mark-tick { background: var(--text-4); }
.mk-hud   .mark-tick { background: var(--accent); }
.mk-hud   .mark-lbl  { color: var(--accent-soft); }
.mk-str   .mark-tick { background: var(--good); }
.mk-str   .mark-lbl  { color: var(--good-soft); }
.mk-be    .mark-tick { background: var(--warn); width: 2px; }
.mk-be    .mark-lbl  { color: var(--warn-soft); }
.mk-be    .mark-lbl b { color: var(--warn); }

/* ══ WHOLESALE — the closed state has to earn a stop ══════════════ */
.ws-shut { border: 1px solid var(--lens); border-left-width: 3px;
           background: linear-gradient(90deg, rgba(20,184,166,.08), transparent 60%); }
.ws-toggle { align-items: flex-start; gap: var(--s4); }
.ws-shut .ws-i { font-size: 26px; margin-top: 2px; }
.ws-shut-body { display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.ws-shut-h { font-size: var(--fs-lg); color: var(--lens-soft); font-weight: 600; }
.ws-shut-body .label { line-height: 1.6; max-width: 68ch; }
.ws-shut-nums { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
                margin-top: var(--s1); }
.ws-shut-nums span { font-size: var(--fs-xs); color: var(--text-4); }
.ws-shut-nums b { font-family: var(--mono); font-size: var(--fs-md);
                  color: var(--text); display: block; }
.ws-shut-go { font-size: var(--fs-sm); color: var(--lens-soft); white-space: nowrap;
              align-self: center; }
.ws-h1 { font-size: var(--fs-2xl); font-weight: 600; color: var(--text);
         line-height: 1.15; }@media (max-width:780px){
  .ws-toggle { flex-wrap: wrap; }
  .ws-shut-go { width: 100%; text-align: right; }
}

/* ══ RENT CONTROL ════════════════════════════════════════════════ */
.rentrow { display: flex; align-items: flex-end; gap: var(--s4);
           flex-wrap: wrap; margin-bottom: var(--s2); }
.rentnum { display: flex; flex-direction: column; gap: 3px; }
.rentnum-in { display: flex; align-items: baseline; gap: var(--s2); }
.rentnum-in input { width: 130px; background: var(--bg); color: var(--text);
                    border: 1px solid var(--border); border-radius: var(--r-sm);
                    padding: var(--s2) var(--s3); font-family: var(--mono);
                    font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.rentread { font-family: var(--mono); font-size: var(--fs-sm);
            padding-bottom: var(--s2); }
.rentread.ok  { color: var(--good); }
.rentread.bad { color: var(--bad-soft); }
.rentread.hot { color: var(--warn); }

/* the zones sit behind the track — green where it cash flows, amber
   where you have gone past what the research supports */
.rentslider .zones { position: absolute; left: 0; right: 0; top: 12px;
                     height: 4px; border-radius: 2px; overflow: hidden;
                     pointer-events: none; }
.rentslider .zone { position: absolute; top: 0; bottom: 0; }
.zone-ok  { background: rgba(16,185,129,.35); }
.zone-hot { background: rgba(245,158,11,.35); }

/* ══ WHOLESALE BANNER ════════════════════════════════════════════ */
.ws-wrap { margin-top: var(--s6); }
.ws-banner { display: flex; align-items: baseline; gap: var(--s3);
             flex-wrap: wrap; padding: 0 var(--s2) var(--s3); }
.ws-banner-t { font-size: var(--fs-2xl); font-weight: 600; color: var(--lens);
               letter-spacing: -.2px; }
.ws-banner-s { font-size: var(--fs-sm); color: var(--text-3); }
.ws-banner::before { content: ""; position: absolute; }
.ws-banner-open .ws-banner-t { color: var(--lens); }@media (max-width:780px){ .ws-banner-t { font-size: var(--fs-xl); } }

/* ══ THE READ ════════════════════════════════════════════════════
   The first thing on the page. Ten seconds, then a direction.        */
.theread { border-radius: var(--r-lg); padding: var(--s5) var(--s5) var(--s4);
           margin-bottom: var(--s5); border: 1px solid var(--border);
           background: var(--surface); }
.rd-walk    { border-color: var(--bad);  background: linear-gradient(180deg, rgba(220,38,38,.10), var(--surface) 55%); }
.rd-good    { border-color: var(--good); background: linear-gradient(180deg, rgba(16,185,129,.10), var(--surface) 55%); }
.rd-ok      { border-color: var(--border); }
.rd-unknown { border-color: var(--prov); background: linear-gradient(180deg, rgba(245,158,11,.08), var(--surface) 55%); }

.rd-top { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s4); }
.rd-ic { font-size: 22px; line-height: 1.1; flex: none; }
.rd-walk .rd-ic { color: var(--bad); }
.rd-good .rd-ic { color: var(--good); }
.rd-unknown .rd-ic { color: var(--warn); }
.rd-label { font-size: var(--fs-verdict); font-weight: var(--fw-verdict);
            color: var(--text); line-height: 1.15;
            /* display type at 40px needs the tracking pulled in; this
               rule carried two letter-spacing declarations and the
               loose one was winning. */
            letter-spacing: -1.2px; }
.rd-addr { font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; }

.rd-shape { font-size: var(--fs-lg); color: var(--text); line-height: 1.5;
            max-width: 62ch; margin: 0 0 var(--s3); }
.rd-line, .rd-p { font-size: var(--fs-md); color: var(--text-2); line-height: 1.72;
                  max-width: 68ch; margin: 0 0 var(--s3); }
.rd-human { color: var(--text-3); }

/* THE FINDINGS, SIDE BY SIDE. See js/modules/theread.js. Two columns
   from 900px up — below that one, because a 45ch measure is not
   reading. Grid rather than CSS columns: columns would balance the
   text and split a finding across the fold. */
.rd-args { margin: 0; }
.rd-args .rd-p { margin-bottom: 0; }
@media (min-width: 900px) {
  .rd-args { display: grid; grid-template-columns: 1fr 1fr;
             gap: var(--s4) var(--s5); align-items: start; }
  .rd-args .rd-p { max-width: none; }
}
@media (max-width: 899px) {
  .rd-args .rd-p { margin-bottom: var(--s3); }
}
.rd-flip { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.65;
           max-width: 68ch; padding-left: var(--s4); border-left: 2px solid var(--border);
           margin: var(--s4) 0 0; }

.rd-acts { display: flex; gap: var(--s2); flex-wrap: wrap;
           margin-top: var(--s5); padding-top: var(--s4);
           border-top: 1px solid var(--border-soft); }
.rd-go { background: var(--surface-2); }
.rd-good .rd-go { border-color: var(--good); color: var(--good-soft); }

/* the one-line version, once you have dug in */
.rd-bar { width: 100%; display: flex; align-items: center; gap: var(--s3);
          padding: var(--s3) var(--s4); border-radius: var(--r-md);
          margin-bottom: var(--s4); text-align: left;
          background: var(--surface); border: 1px solid var(--border); }
.rd-bar .rd-lab { font-size: var(--fs-md); color: var(--text); }
.rd-bar .rd-addr { flex: 1; margin: 0; }@media (max-width:780px){
  .rd-label { font-size: var(--fs-xl); }
  .rd-shape { font-size: var(--fs-md); }
  .rd-acts button { flex: 1; }
  .rd-bar .rd-addr { display: none; }
}

/* ══ THE PLACE ═══════════════════════════════════════════════════
   js/core/place.js, rendered between the address and the four
   numbers. Teal, because it is the same move as the wholesale lens
   and the opener beside the phone: not a judgement and not a
   warning, another way of seeing the same property.

   It is the only thing on the board written to be read rather than
   scanned, so it gets a reading measure and a reading line-height
   and nothing else gets to be bigger than it in this card except
   the verdict itself.                                              */
/* It closes the card now, so the space goes above it — and it needs
   that space, because .rd-flip directly above also carries a left
   border and the two were touching. */
.place { margin: var(--s4) 0 0; padding: var(--s3) var(--s4);
         border-left: 2px solid var(--lens); border-radius: 0 var(--r-sm) var(--r-sm) 0;
         background: rgba(20, 184, 166, .06); }

.place-h { display: flex; align-items: baseline; gap: var(--s3);
           font-size: var(--fs-xs); font-weight: 600; letter-spacing: .4px;
           text-transform: uppercase; color: var(--lens-soft);
           margin-bottom: var(--s2); }
.place-t { font-size: var(--fs-xs); white-space: nowrap; margin-left: auto;
           text-transform: none; letter-spacing: 0; }

/* THE STORY, THEN THREE BULLETS. Not a wall of prose: the open
   state is an introduction, and an introduction that runs four
   hundred pixels is not one. The inventory is one press away. */
.place-lead { margin: var(--s3) 0 0; padding-left: 18px; max-width: 70ch; }
.place-lead li { font-size: var(--fs-sm); line-height: 1.7; color: var(--text-2);
                 padding: 2px 0; }
.place-more { font-size: var(--fs-xs); margin-top: var(--s2); display: inline-block; }
.place-watch ul { margin: var(--s2) 0 0; padding-left: 18px; max-width: 70ch; }
.place-watch li { font-size: var(--fs-sm); line-height: 1.7; padding: 2px 0; }
.place-p { font-size: var(--fs-md); color: var(--text); line-height: 1.75;
           max-width: 66ch; margin: 0; }
/* The minuses are the same paragraph in a quieter colour. Not red,
   not an icon, no box: a place with no supermarket is a description
   of a place, and dressing it as an alarm would be the board taking
   a side it has not earned. */
.place-watch { color: var(--text-3); }
.place-watch b { color: var(--text-2); font-weight: 600; }

/* folded — one line, and the count carries the rest */
.place-thin { display: flex; flex-wrap: wrap; align-items: baseline;
              gap: var(--s2) var(--s3); padding: var(--s2) var(--s4); }
.place-mk { color: var(--lens); font-size: var(--fs-xs); flex: none; }
.place-one { flex: 1 1 28ch; font-size: var(--fs-md); line-height: 1.5;
             color: var(--text-2); }

/* the full set, as reference — the call sheet and the printed memo */
.place-set ul { margin: 0; padding-left: 18px; }
.place-set-h { font-family: var(--font); font-size: var(--fs-sm); font-weight: 600;
               color: var(--text-2); margin-bottom: var(--s2); }
.place-li-w { color: var(--text-4); }

@media (max-width:780px){
  .place-p { font-size: var(--fs-sm); }
}
@media print {
  /* On paper the fold is meaningless and the colour is ink. The sheet
     carries everything, in one voice, in black. */
  .place { border-left: none; background: none; padding: 0; }
  .place-t { display: none !important; }
  .place-h { color: #000; }
  .place-watch, .place-li-w { color: #333; }
}

/* ══ HIS VOICE, IN A SECTION ═════════════════════════════════════
   Same guy as The Read at the top. Looks the same everywhere so it
   reads as one person talking, not a set of tooltips.               */
.aside { border-left: 2px solid var(--accent); padding: var(--s1) 0 var(--s1) var(--s4);
         margin: 0 0 var(--s4); }
.aside-p { font-size: var(--fs-md); color: var(--text-2); line-height: 1.7;
           max-width: 70ch; margin: 0 0 var(--s3); }
.aside-p:last-child { margin-bottom: 0; }
.rd-scroll { align-self: center; margin-left: auto; font-size: var(--fs-xs);
             color: var(--text-4); }@media print{ .aside { border-left-color: #94a3b8; } }

/* ══ WHAT I WOULD DO ═════════════════════════════════════════════ */
.theplay { border: 1px solid var(--accent); border-radius: var(--r-lg);
           padding: var(--s5); margin-bottom: var(--s4);
           background: linear-gradient(180deg, rgba(99,102,241,.10), var(--surface) 60%); }
.theplay.tp-on { border-color: var(--good);
                 background: linear-gradient(180deg, rgba(16,185,129,.09), var(--surface) 60%); }
.tp-head { margin-bottom: var(--s3); }
.tp-title { font-size: var(--fs-2xl); font-weight: 600; color: var(--text);
            line-height: 1.15; letter-spacing: -.3px; margin-top: 2px; }
.tp-plus { color: var(--text-4); font-weight: 400; margin: 0 var(--s1); }
.tp-why { font-size: var(--fs-md); color: var(--text-2); line-height: 1.72;
          max-width: 70ch; margin: 0 0 var(--s4); }
.tp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
            gap: var(--s3); padding: var(--s3) 0;
            border-top: 1px solid var(--border-soft);
            border-bottom: 1px solid var(--border-soft); }
.tp-stat { display: flex; flex-direction: column; gap: 2px; }
.tp-stat .num { font-size: var(--fs-lg); }
.tp-alt { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--text-3);
          line-height: 1.6; }
.tp-acts { display: flex; align-items: center; gap: var(--s3);
           flex-wrap: wrap; margin-top: var(--s4); }@media (max-width:780px){ .tp-title { font-size: var(--fs-xl); } }

/* ══ THREE ANGLES ════════════════════════════════════════════════
   Not the top three by score — three different answers to "what do
   you want out of this".                                            */
.tp-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr));
           gap: var(--s3); margin: var(--s4) 0 var(--s3); }
.tp-opt { background: var(--surface-2); border: 1px solid transparent;
          border-radius: var(--r-md); padding: var(--s3);
          display: flex; flex-direction: column; gap: var(--s2); }
.tp-opt.tp-best { border-color: var(--accent); background: rgba(99,102,241,.10); }
.tp-opt.on { border-color: var(--good); background: rgba(16,185,129,.10); }
.tp-opt-tag { font-size: var(--fs-xs); color: var(--text-4);
              text-transform: uppercase; letter-spacing: 1px; }
.tp-best .tp-opt-tag { color: var(--accent-soft); }
.tp-opt.on .tp-opt-tag { color: var(--good); }
.tp-opt-name { font-size: var(--fs-md); color: var(--text); line-height: 1.35; }
.tp-opt-nums { display: flex; gap: var(--s4); }
.tp-opt-nums span { font-size: var(--fs-xs); color: var(--text-4);
                    display: flex; flex-direction: column; }
.tp-opt-nums b { font-family: var(--mono); font-size: var(--fs-md); color: var(--text);
                 font-weight: 500; }
.tp-opt-note { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.55;
               flex: 1; }
.tp-opt-go { margin-top: auto; font-size: var(--fs-xs); padding: var(--s2); }
.tp-best .tp-opt-go { border-color: var(--accent); color: var(--accent-soft); }
.tp-opt-on { margin-top: auto; font-size: var(--fs-xs); color: var(--good); }
.tp-foot { font-size: var(--fs-xs); color: var(--text-4); }

/* a field the app filled in for you — empty, but showing what it used */
.fld-derived input { border-style: dashed; }
.fld-derived input::placeholder { color: var(--accent-soft); opacity: .9; }
.fld-tag { font-size: 10px; color: var(--accent-soft); margin-left: var(--s2);
           text-transform: uppercase; letter-spacing: .5px; }

/* the buyer's case, framed for the buyer this deal actually suits */
.ws-buyer-case { margin-top: var(--s3); padding-top: var(--s3);
                 border-top: 1px solid var(--border-soft); }
.ws-case-tag { font-size: var(--fs-xs); color: var(--lens-soft);
               text-transform: uppercase; letter-spacing: 1px;
               margin-bottom: var(--s2); }
.ws-case-sub { display: block; font-size: var(--fs-xs); color: var(--text-4);
               text-align: right; margin: -4px 0 var(--s2); }
.ws-case-note { margin-top: var(--s3); font-size: var(--fs-xs); color: var(--text-3);
                line-height: 1.6; }

/* can they actually fund it? */
.tp-fund { font-size: var(--fs-sm); line-height: 1.6; padding: var(--s2) var(--s3);
           border-radius: var(--r-sm); margin-bottom: var(--s3); max-width: 68ch; }
.tp-ok   { color: var(--good-soft);  background: rgba(16,185,129,.09); }
.tp-over { color: var(--warn-soft);  background: rgba(245,158,11,.10); }

/* ══ WHO IS ASKING ═══════════════════════════════════════════════ */
.pos-ask, .pos-bar { width: 100%; text-align: left; display: flex; gap: var(--s3);
                     align-items: center; padding: var(--s3) var(--s4);
                     border-radius: var(--r-md); margin-bottom: var(--s4);
                     background: var(--surface); border: 1px solid var(--border); }
.pos-ask { align-items: flex-start; border-style: dashed; }
.pos-ask b { font-size: var(--fs-md); color: var(--text); }
.pos-ask .label { line-height: 1.6; display: block; margin-top: 2px; max-width: 64ch; }
.pos-ic { font-size: 16px; color: var(--accent); flex: none; }
.pos-sum { flex: 1; font-size: var(--fs-sm); color: var(--text-2); }
.pos-bar .label { white-space: nowrap; }

.pos .pos-q { padding: var(--s4) 0; border-bottom: 1px solid var(--border-soft); }
.pos .pos-q:last-of-type { border-bottom: none; }
.pos-qt { font-size: var(--fs-md); color: var(--text); margin-bottom: 2px; }
.pos-qs { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.55;
          margin-bottom: var(--s3); max-width: 66ch; }
.pos-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
            gap: var(--s2); margin-top: var(--s2); }
.pos-o { display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
         text-align: left; padding: var(--s2) var(--s3); }
.pos-o.on { border-color: var(--accent); background: rgba(99,102,241,.12); }
.pos-o-l { font-size: var(--fs-sm); color: var(--text); }
.pos-o-h { font-size: var(--fs-xs); color: var(--text-4); }@media (max-width:780px){ .pos-opts { grid-template-columns: 1fr 1fr; } }

/* what you have looked at */
.rd-pipe { font-size: var(--fs-xs); color: var(--text-4); padding: var(--s2) var(--s3);
           margin-bottom: var(--s2); display: flex; gap: var(--s2);
           align-items: baseline; flex-wrap: wrap; }
.rd-pipe b { color: var(--text-2); font-family: var(--mono); }
.rd-pipe .lnk { margin-left: auto; font-size: var(--fs-xs); }

/* ══ M8 · THE CLOCK AND THE PERSON ═══════════════════════════════ */
.tn-distress { border-left: 2px solid var(--warn); }
.tn-sub { font-size: var(--fs-xs); color: var(--text-4); text-transform: uppercase;
          letter-spacing: 1px; margin: var(--s4) 0 var(--s2); }
.tn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3);
           margin: var(--s2) 0; }
.tn-in { display: flex; flex-direction: column; gap: 3px; }
.tn-in input { background: var(--bg); color: var(--text); border: 1px solid var(--border);
               border-radius: var(--r-sm); padding: var(--s2); font-family: var(--mono);
               font-size: var(--fs-md); width: 100%; }
.tn-in .sfx { font-size: var(--fs-xs); color: var(--text-4); }

/* working backwards from the sale date */
.clock { background: var(--surface-2); border-radius: var(--r-md);
         padding: var(--s3); margin: var(--s2) 0; }
.clock-row { display: grid; grid-template-columns: 1fr auto 72px; gap: var(--s3);
             align-items: baseline; padding: 3px 0; font-size: var(--fs-sm); }
.clock-row span { color: var(--text-2); }
.clock-row b { font-family: var(--mono); color: var(--text); font-weight: 500; }
.clock-row i { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-4);
               font-style: normal; text-align: right; }
.clock-sub span, .clock-sub b { color: var(--text-4); font-size: var(--fs-xs); }
.clock-key { border-top: 1px solid var(--border); margin-top: var(--s2);
             padding-top: var(--s2); }
.clock-key span { color: var(--warn-soft); }
.clock-key b { font-size: var(--fs-lg); color: var(--warn); }
.clock-key i { color: var(--warn-soft); }
.clock-late .clock-key span, .clock-late .clock-key b, .clock-late .clock-key i {
  color: var(--bad-soft); }@media (max-width:780px){ .tn-pair { grid-template-columns: 1fr; } }
.tn-hint { font-size: var(--fs-xs); color: var(--text-4); }
.tn-warn { color: var(--warn-soft); }
.tn-note b { color: var(--text); font-family: var(--mono); }

/* per unit, or the whole property */
.basisrow { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
            margin-bottom: var(--s3); }
.basisopts { display: flex; gap: var(--s2); }
.basis { display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
         text-align: left; padding: var(--s2) var(--s3); }
.basis.on { border-color: var(--accent); background: rgba(99,102,241,.12); }
.basis-l { font-size: var(--fs-sm); color: var(--text); }
.basis-s { font-size: var(--fs-xs); color: var(--text-4); font-family: var(--mono); }
.basis-auto { font-size: var(--fs-xs); color: var(--text-4); }
.basis-nudge { font-size: var(--fs-sm); color: var(--warn-soft); line-height: 1.6;
               padding: var(--s2) var(--s3); border-left: 2px solid var(--warn);
               border-radius: var(--r-sm); background: rgba(245,158,11,.07);
               margin-bottom: var(--s3); max-width: 70ch; }

/* ══ SHORT-TERM, CALCULATED ══════════════════════════════════════ */
.strcalc { background: var(--surface-2); border-radius: var(--r-md);
           padding: var(--s3) var(--s4); margin-bottom: var(--s3); }
.strin { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }
.strin .fld { max-width: 130px; }
.strx { color: var(--text-4); font-size: var(--fs-sm); padding-bottom: var(--s2); }
.strout { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
          margin-top: var(--s3); padding-top: var(--s3);
          border-top: 1px solid var(--border-soft); }
.stramt { font-family: var(--mono); font-size: var(--fs-xl); color: var(--text);
          display: flex; flex-direction: column; line-height: 1.15; }
.stramt span { font-family: var(--font); font-size: var(--fs-xs); color: var(--text-4); }
.stramt-b { color: var(--good); }
.stron { font-size: var(--fs-sm); color: var(--good); margin-left: auto; }
.strwarn { font-size: var(--fs-sm); color: var(--bad-soft); margin-left: auto; }
.strout .primary { margin-left: auto; }
.fld-both { font-size: var(--fs-xs); color: var(--text-4); margin-left: var(--s2);
            font-family: var(--mono); }

/* ══ THE INCOME CALCULATOR ═══════════════════════════════════════ */
.calc { background: var(--surface-2); border-radius: var(--r-md);
        padding: var(--s4); margin-bottom: var(--s4); }
.calcrow { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }
.calcfld { max-width: 150px; }
.calcin { display: flex; align-items: baseline; gap: var(--s1); }
.calcin input { width: 100%; background: var(--bg); color: var(--text);
                border: 1px solid var(--border); border-radius: var(--r-sm);
                padding: var(--s2); font-family: var(--mono); font-size: var(--fs-lg); }
.calcx, .calceq { color: var(--text-4); font-size: var(--fs-md);
                  padding-bottom: var(--s2); white-space: nowrap; }
.calceq { color: var(--text-3); font-size: var(--fs-lg); }
.calcout { display: flex; flex-direction: column; gap: 2px; padding-bottom: 2px; }
.calcout .num { font-size: var(--fs-xl); }
.calcout-t .num { color: var(--good); }
.calcnote { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.6;
            margin-top: var(--s3); max-width: 70ch; }
.calcbad { color: var(--bad-soft); }@media (max-width:780px){ .calcfld { max-width: none; flex: 1 1 120px; } }
.strstat { margin-top: var(--s3); padding-top: var(--s3);
           border-top: 1px solid var(--border-soft); }
.strstat-l { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

/* the fix, on the row it unblocks */
.mode-fix { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.mode-btn { font-size: var(--fs-xs); padding: 3px var(--s3);
            border-color: var(--accent); color: var(--accent-soft); }
.mode-btn:hover { background: rgba(99,102,241,.14); }
.mode-in { display: flex; align-items: center; gap: var(--s2); }
.mode-in input { width: 82px; background: var(--bg); color: var(--text);
                 border: 1px solid var(--border); border-radius: var(--r-sm);
                 padding: 3px var(--s2); font-family: var(--mono);
                 font-size: var(--fs-sm); }
.mode-out { opacity: 1; }
.mode-out .mode-l, .mode-out .mode-why { opacity: .55; }
.calcwarn { color: var(--warn-soft); }

/* ══ 2 · BACK TO THE TOP ═════════════════════════════════════════
   The page is four acts long. There was no way back.               */
#totop { position: fixed; left: var(--s4); bottom: 64px; z-index: 70;
         width: 38px; height: 38px; border-radius: 50%; display: none;
         align-items: center; justify-content: center; padding: 0;
         background: var(--surface); border: 1px solid var(--border);
         color: var(--text-3); font-size: 15px; cursor: pointer;
         box-shadow: 0 2px 12px rgba(0,0,0,.4); }
#totop.on { display: flex; }
#totop:hover { color: var(--text); border-color: var(--accent); }

/* ══ 3 · UNSAVED WORK ════════════════════════════════════════════ */
.unsaved { display: inline-flex; align-items: center; gap: var(--s2);
           font-size: var(--fs-xs); color: var(--warn-soft); }
.unsaved::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                   background: var(--warn); }

/* ══ 4 · JUMP TO A DD CATEGORY ═══════════════════════════════════ */
.dd-jump { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4);
           padding-bottom: var(--s3); border-bottom: 1px solid var(--border-soft); }
.dd-jump button { font-size: var(--fs-xs); padding: 3px var(--s3); }
.dd-jump .done { opacity: .45; }
.dd-jump .open { border-color: var(--warn); color: var(--warn-soft); }

/* ══ 5 · ACT 1 GETS OUT OF THE WAY ═══════════════════════════════ */
.ob-done { display: flex; align-items: center; gap: var(--s3);
           padding: var(--s3) var(--s4); border-radius: var(--r-md);
           background: var(--surface); border: 1px solid var(--border-soft);
           margin-bottom: var(--s4); width: 100%; text-align: left; }
.ob-done .num { font-size: var(--fs-sm); }
.ob-done-t { flex: 1; font-size: var(--fs-sm); color: var(--text-2); }
.pos { position: relative; }
.pos-x { position: absolute; top: var(--s3); right: var(--s3);
         width: 26px; height: 26px; padding: 0; border-radius: 50%;
         background: none; border: 1px solid var(--border-soft);
         color: var(--text-4); font-size: 15px; line-height: 1; }
.pos-x:hover { color: var(--text); border-color: var(--border); }

/* ══ WHEN THE BALLOON COMES DUE ══════════════════════════════════ */
.exitbox { margin-top: var(--s3); padding: var(--s3) var(--s4);
           background: var(--surface-2); border-radius: var(--r-md);
           border-left: 2px solid var(--accent); }
.exitbox-bad { border-left-color: var(--bad); }
.exitgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px,1fr));
            gap: var(--s3); margin: var(--s2) 0 var(--s1); }
.exitcell { display: flex; flex-direction: column; gap: 1px; }
.exitcell .num { font-size: var(--fs-lg); }
.exitsub { font-size: var(--fs-xs); color: var(--text-4); line-height: 1.4; }
.tn-dim { color: var(--text-4); }
.st-sub { border-top: 1px solid var(--border-soft); margin-top: var(--s1);
          padding-top: var(--s2); }
.st-sub .num { color: var(--text); }
.col-warn { color: var(--warn-soft); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5);
        margin-top: var(--s4); }
.col-sub { padding-left: var(--s4); border-left: 1px solid var(--border-soft);
           margin: var(--s1) 0 var(--s2); }
.col-sub .label, .col-sub .num { color: var(--text-4); font-size: var(--fs-xs); }@media (max-width:780px){ .cols { grid-template-columns: 1fr; gap: var(--s5); } }

/* a total under the lien list */
.lientot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4);
           padding: var(--s3) var(--s4); margin-top: var(--s2);
           background: var(--surface-2); border-radius: var(--r-md); }
.lientot-r { display: flex; flex-direction: column; gap: 1px; }
.lientot-r .num { font-size: var(--fs-lg); }
.lientot-s { font-size: var(--fs-xs); color: var(--text-4); }@media (max-width:780px){ .lientot { grid-template-columns: 1fr; gap: var(--s3); } }
.lien-note { font-size: var(--fs-xs); color: var(--text-4); line-height: 1.5;
             margin-top: 3px; display: block; max-width: 44ch; }

/* what they already decided, and why */
.decided { border-left: 2px solid var(--accent); padding: 0 0 var(--s4) var(--s4);
           margin-bottom: var(--s4); }
.decided-t { font-size: var(--fs-md); color: var(--text); margin: 2px 0 var(--s2); }
.decided-w { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.65;
             max-width: 70ch; margin: 0; }
.memo-ok { font-size: var(--fs-sm); color: var(--good-soft); line-height: 1.6;
           padding: var(--s2) var(--s3); border-left: 2px solid var(--good);
           background: rgba(16,185,129,.06); border-radius: var(--r-sm);
           margin: var(--s3) 0; }
.tp-opt-over { font-size: var(--fs-xs); color: var(--warn-soft); margin-top: var(--s2);
               padding: 2px var(--s2); background: rgba(245,158,11,.10);
               border-radius: var(--r-sm); display: inline-block; }
.ws-shut-no span { color: var(--text-4); font-size: var(--fs-sm); }
.tp-opt-fatal { font-size: var(--fs-xs); color: var(--bad-soft); margin-top: var(--s2);
                padding: 2px var(--s2); background: rgba(220,38,38,.10);
                border-radius: var(--r-sm); display: inline-block; }
.askai-paste { margin-top: var(--s3); }
.askai-paste summary { font-size: var(--fs-sm); color: var(--text-3); cursor: pointer; }
.askai-paste textarea { width: 100%; margin-top: var(--s2); background: var(--bg);
                        color: var(--text); border: 1px solid var(--border);
                        border-radius: var(--r-sm); padding: var(--s3);
                        font-family: var(--mono); font-size: var(--fs-xs); }
                        
                        
                        
.askai { border: 1px solid var(--border); border-left: 3px solid var(--accent);
         border-radius: var(--r-md); padding: var(--s4); margin-bottom: var(--s5);
         background: var(--surface); }
.askai-h { font-size: var(--fs-md); color: var(--text); margin-bottom: var(--s3); }
.askai-list li { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.65;
                 margin-bottom: var(--s2); max-width: 74ch; }
.askai-note { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.6;
              margin-bottom: var(--s3); max-width: 74ch; }
.askai-hint { margin-top: var(--s2); display: block; max-width: 74ch; }

/* the button and the box, side by side */
.askai-go { display: flex; gap: var(--s3); align-items: stretch; flex-wrap: wrap;
            margin-top: var(--s3); }
button.big { font-size: var(--fs-md); padding: var(--s3) var(--s5); white-space: nowrap; }
.askai-go textarea { flex: 1 1 280px; min-height: 46px; resize: vertical;
                     background: var(--bg); color: var(--text);
                     border: 1px solid var(--border); border-radius: var(--r-sm);
                     padding: var(--s2) var(--s3); font-family: var(--mono);
                     font-size: var(--fs-xs); }

/* what would change */
.askai-pending { border-left-color: var(--warn); }
.askai-done    { border-left-color: var(--good); }@media (max-width:780px){
  .askai-row { grid-template-columns: 1fr auto 1fr; }
  .askai-f { grid-column: 1 / -1; }
}@media print{ .sop { display: none !important; } }@media print{ .sop { display: none !important; } }@media print{ .sop { display: none !important; } }@media print{ .sop { display: none !important; } }@media (max-width:780px){
  .eff-r { grid-template-columns: 1fr auto 1fr; }
  .eff-l { grid-column: 1 / -1; }
}@media print{ .sop { display: none !important; } }@media (max-width:780px){
  .eff-r { grid-template-columns: 1fr auto 1fr; }
  .eff-l { grid-column: 1 / -1; }
}@media (max-width:780px){
  .sop-nx { display: none; }
  .lad-r { grid-template-columns: 16px 1fr; }
  .lad-w { grid-column: 2; }
}@media print{ .sop { display: none !important; } }@media (max-width:780px){
  .eff-r { grid-template-columns: 1fr auto 1fr; }
  .eff-l { grid-column: 1 / -1; }
}@media (max-width:780px){
  .sop-nx { display: none; }
  .lad-r { grid-template-columns: 16px 1fr; }
  .lad-w { grid-column: 2; }
}@media (max-width:780px){
  .eff-r { grid-template-columns: 1fr auto 1fr; }
  .eff-l { grid-column: 1 / -1; }
}@media (max-width:780px){
  .sop-nx { display: none; }
  .lad-r { grid-template-columns: 16px 1fr; }
  .lad-w { grid-column: 2; }
}@media (max-width:780px){
  .eff-r { grid-template-columns: 1fr auto 1fr; }
  .eff-l { grid-column: 1 / -1; }
}@media (max-width:780px){
  .sop-nx { display: none; }
  .lad-r { grid-template-columns: 16px 1fr; }
  .lad-w { grid-column: 2; }
}
@keyframes rb-flash {
  0%   { box-shadow: 0 0 0 2px var(--accent); }
  60%  { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}@media (max-width:780px){
  .eff-r { grid-template-columns: 1fr auto 1fr; }
  .eff-l { grid-column: 1 / -1; }
}@media (max-width:780px){
  .sop-nx { display: none; }
  .lad-r { grid-template-columns: 16px 1fr; }
  .lad-w { grid-column: 2; }
}
@keyframes rb-flash {
  0%   { box-shadow: 0 0 0 2px var(--accent); }
  60%  { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}@media (max-width:780px){
  .eff-r { grid-template-columns: 1fr auto 1fr; }
  .eff-l { grid-column: 1 / -1; }
}@media (max-width:780px){
  .sop-nx { display: none; }
  .lad-r { grid-template-columns: 16px 1fr; }
  .lad-w { grid-column: 2; }
}
@keyframes rb-flash {
  0%   { box-shadow: 0 0 0 2px var(--accent); }
  60%  { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}@media (max-width:780px){
  .eff-r { grid-template-columns: 1fr auto 1fr; }
  .eff-l { grid-column: 1 / -1; }
}@media (max-width:780px){
  .sop-nx { display: none; }
  .lad-r { grid-template-columns: 16px 1fr; }
  .lad-w { grid-column: 2; }
}
@keyframes rb-flash {
  0%   { box-shadow: 0 0 0 2px var(--accent); }
  60%  { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}@media (max-width:780px){
  .eff-r { grid-template-columns: 1fr auto 1fr; }
  .eff-l { grid-column: 1 / -1; }
}@media (max-width:780px){
  .sop-nx { display: none; }
  .lad-r { grid-template-columns: 16px 1fr; }
  .lad-w { grid-column: 2; }
}
@keyframes rb-flash {
  0%   { box-shadow: 0 0 0 2px var(--accent); }
  60%  { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}@media (max-width:780px){
  .eff-r { grid-template-columns: 1fr auto 1fr; }
  .eff-l { grid-column: 1 / -1; }
}@media (max-width:780px){
  .sop-nx { display: none; }
  .lad-r { grid-template-columns: 16px 1fr; }
  .lad-w { grid-column: 2; }
}
@keyframes rb-flash {
  0%   { box-shadow: 0 0 0 2px var(--accent); }
  60%  { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}@media (max-width:780px){
  .eff-r { grid-template-columns: 1fr auto 1fr; }
  .eff-l { grid-column: 1 / -1; }
}@media (max-width:780px){
  .sop-nx { display: none; }
  .lad-r { grid-template-columns: 16px 1fr; }
  .lad-w { grid-column: 2; }
}
@keyframes rb-flash {
  0%   { box-shadow: 0 0 0 2px var(--accent); }
  60%  { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}@media (max-width:780px){
  .eff-r { grid-template-columns: 1fr auto 1fr; }
  .eff-l { grid-column: 1 / -1; }
}@media (max-width:780px){
  .sop-nx { display: none; }
  .lad-r { grid-template-columns: 16px 1fr; }
  .lad-w { grid-column: 2; }
}
@keyframes rb-flash {
  0%   { box-shadow: 0 0 0 2px var(--accent); }
  60%  { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}@media (max-width:780px){
  .eff-r { grid-template-columns: 1fr auto 1fr; }
  .eff-l { grid-column: 1 / -1; }
}@media (max-width:780px){
  .sop-nx { display: none; }
  .lad-r { grid-template-columns: 16px 1fr; }
  .lad-w { grid-column: 2; }
}
@keyframes rb-flash {
  0%   { box-shadow: 0 0 0 2px var(--accent); }
  60%  { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}@media (max-width:780px){
  .eff-r { grid-template-columns: 1fr auto 1fr; }
  .eff-l { grid-column: 1 / -1; }
}@media (max-width:780px){
  .sop-nx { display: none; }
  .lad-r { grid-template-columns: 16px 1fr; }
  .lad-w { grid-column: 2; }
}
@keyframes rb-flash {
  0%   { box-shadow: 0 0 0 2px var(--accent); }
  60%  { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}@media (max-width: 560px){
  .sop-shrow { align-items: flex-start; }
  .sop-shacts { width: 100%; }
  .sop-shacts button { flex: 1 1 0; }
}


.savemenu-f {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

/* ─── A FACT IN DISPUTE IS NOT A JUDGEMENT ──────────────────────── */
/*
   Most findings are opinions about a deal and sit in a plain list. A
   fact finding is the app saying a number on screen cannot be true —
   $1,995.20 a month does not come from a 3.09% loan — and it needs to
   look like a different kind of thing, because it has a different kind
   of answer. You cannot decide to proceed anyway; you have to go and
   find out which number is wrong.
*/
.sop-fact {
  border-left: 2px solid var(--warn);
  padding-left: 10px;
  margin: 10px 0;
}


.savemenu-f {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}@media (max-width: 560px){
  .opr-sw { min-width: 0; }
  .opr-top b { flex-basis: 100%; }
}


/* ─── send a file, or send a link ───────────────────────────────── */
.savemenu-f {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}@media (max-width: 560px){
  .opr-sw { min-width: 0; }
  .opr-top b { flex-basis: 100%; }
  .sop-shrow { align-items: flex-start; }
  .sop-shacts { width: 100%; }
  .sop-shacts button { flex: 1 1 0; }
}


.maoband { margin: var(--s3) 0; padding-top: var(--s3);
           border-top: 1px solid var(--border-soft); }
.mao-chips { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.mao-chip { display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
            padding: var(--s2) var(--s3); text-align: left; }
.mao-chip.on { border-color: var(--good); background: rgba(16,185,129,.12); }
.mao-l { font-size: var(--fs-xs); color: var(--text-4); }
.mao-v { font-size: var(--fs-md); color: var(--text); font-family: var(--mono); }
.mao-chip.on .mao-v { color: var(--good); }
.mao-note { font-size: var(--fs-xs); color: var(--text-4); line-height: 1.5;
            margin-top: var(--s2); max-width: 44ch; }


.sop { position: fixed; left: var(--s4); bottom: var(--s4); z-index: 75;
       width: min(520px, calc(100vw - 2 * var(--s4)));
       display: flex; flex-direction: column; gap: 0; }

/* the bar, always on screen */
.sop-bar { display: flex; gap: var(--s2); align-items: stretch;
           background: var(--surface); border: 1px solid var(--border);
           border-radius: var(--r-md); padding: var(--s2);
           box-shadow: 0 4px 20px rgba(0,0,0,.45); }
.sop-open .sop-bar { border-radius: 0 0 var(--r-md) var(--r-md); border-top: none; }
.sop-bar .primary { white-space: nowrap; }
.sop-bar input { flex: 1 1 120px; min-width: 90px; background: var(--bg);
                 color: var(--text); border: 1px solid var(--border);
                 border-radius: var(--r-sm); padding: var(--s2);
                 font-family: var(--mono); font-size: var(--fs-xs); }

/* the count of doubts, which opens the list */
.sop-count { width: 30px; flex: none; padding: 0; border-radius: var(--r-sm);
             border-color: var(--warn); color: var(--warn);
             background: rgba(245,158,11,.12); font-family: var(--mono); }
.sop-count:hover { background: rgba(245,158,11,.22); }

/* what expands above it */
.sop-body { background: var(--surface); border: 1px solid var(--border);
            border-bottom: none; border-radius: var(--r-md) var(--r-md) 0 0;
            padding: var(--s4); max-height: 52vh; overflow-y: auto;
            box-shadow: 0 -4px 20px rgba(0,0,0,.35); }
.sop-pending { border-top: 3px solid var(--warn); }
.sop-done    { border-top: 3px solid var(--good); }
.sop-h { font-size: var(--fs-md); color: var(--text); margin-bottom: var(--s3);
         display: flex; align-items: baseline; gap: var(--s2); }
.sop-x { margin-left: auto; padding: 0 var(--s2); background: none;
         border: none; color: var(--text-4); font-size: 18px; line-height: 1; }
.sop-x:hover { color: var(--text); }
.sop-modes { font-size: var(--fs-xs); margin-top: var(--s2); }
.sop-modes b { color: var(--text-3); }

.askai-list { margin: 0 0 var(--s3); padding-left: var(--s4); }
.askai-list li { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6;
                 margin-bottom: var(--s2); }
.askai-list b { color: var(--text); }
.askai-note { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.6;
              margin-bottom: var(--s3); }
.askai-warn { color: var(--warn-soft); }

/* what would change */
.askai-changes { margin: var(--s2) 0 var(--s3); }
.askai-row { display: grid; grid-template-columns: 150px 1fr 14px 1fr;
             gap: var(--s1) var(--s3); align-items: baseline;
             padding: var(--s2) 0; border-bottom: 1px solid var(--border-soft);
             font-size: var(--fs-sm); }
.askai-f     { color: var(--text-3); }
.askai-was   { font-family: var(--mono); color: var(--text-4); text-decoration: line-through; }
.askai-arrow { color: var(--text-4); }
.askai-now   { font-family: var(--mono); color: var(--good); }
.askai-why   { grid-column: 2 / -1; font-size: var(--fs-xs); color: var(--text-4);
               line-height: 1.5; }
.askai-row-x .askai-now { color: var(--warn); }
.askai-row-x .askai-why { color: var(--warn-soft); }

/* on a phone it spans the width and sits above the offer tab */
@media (max-width: 780px) {
  .sop { left: var(--s3); right: var(--s3); width: auto; bottom: 68px; }
  .sop-body { max-height: 46vh; }
  .askai-row { grid-template-columns: 1fr auto 1fr; }
  .askai-f { grid-column: 1 / -1; }
}
/* In print the bar is useless but the WHEEL is the summary — show the
   state, drop the controls. A printed memo with no readiness line was
   missing the one thing a reader wants first. */
@media print {
  .sop { position: static; width: auto; box-shadow: none; margin-bottom: 12px; }
  .sop-bar, .sop-x, .sop-cmp, .sop-go, .btnrow { display: none !important; }
  .sop-state { display: flex !important; border-radius: 8px; box-shadow: none; }
  .sop-body { max-height: none; overflow: visible; box-shadow: none; }
}

/* getting back to ten minutes ago */
.sop-back { flex: none; padding: 0 var(--s3); border-radius: var(--r-sm);
            font-family: var(--mono); font-size: var(--fs-xs);
            color: var(--text-3); white-space: nowrap; }
.sop-back:hover { color: var(--text); border-color: var(--accent); }
.sop-vers { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--s3); }
.sop-ver { display: grid; grid-template-columns: 34px 1fr auto; gap: var(--s3);
           align-items: baseline; text-align: left; padding: var(--s2) var(--s3);
           background: none; border: 1px solid transparent; border-radius: var(--r-sm); }
.sop-ver:hover { border-color: var(--border); background: var(--surface-2); }
.sop-ver.on { border-color: var(--accent); background: rgba(99,102,241,.10); }
.sop-vn { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-4); }
.sop-vl { font-size: var(--fs-sm); color: var(--text-2); }
.sop-ver.on .sop-vl { color: var(--text); }
.sop-va { font-size: var(--fs-xs); color: var(--text-4); }

/* side by side */
.sop-cmp { margin-left: auto; padding: 2px var(--s3); font-size: var(--fs-xs);
           border-radius: var(--r-sm); color: var(--text-3); }
.sop-cmp.on { border-color: var(--accent); color: var(--accent-soft); }
.sop-h .sop-cmp + .sop-x { margin-left: var(--s2); }
.cmp { display: flex; flex-direction: column; gap: 0; margin-bottom: var(--s3);
       overflow-x: auto; }
.cmp-r { display: grid; grid-template-columns: 88px repeat(var(--cmp-n), minmax(96px, 1fr));
         gap: var(--s2); align-items: baseline; padding: var(--s2) 0;
         border-bottom: 1px solid var(--border-soft); }
.cmp-head { border-bottom: 1px solid var(--border); padding-bottom: var(--s2); }
.cmp-c { display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
         background: none; border: none; padding: 0; text-align: left; }
.cmp-c b { font-family: var(--mono); font-size: var(--fs-xs); color: var(--accent-soft); }
.cmp-c span { font-size: var(--fs-xs); color: var(--text-4); line-height: 1.3; }
.cmp-c:hover b { color: var(--accent); }
.cmp-c:hover span { color: var(--text-2); }
.cmp-l { font-size: var(--fs-xs); color: var(--text-4); }
.cmp-v { font-family: var(--mono); font-size: var(--fs-sm); color: var(--text-2); }
.cmp-v.win { color: var(--good); }

/* what it does to the deal */
.eff { margin-bottom: var(--s3); }
.eff-r { display: grid; grid-template-columns: 96px 1fr 16px 1fr;
         gap: var(--s3); align-items: baseline; padding: var(--s2) 0;
         border-bottom: 1px solid var(--border-soft); }
.eff-l { font-size: var(--fs-xs); color: var(--text-4); }
.eff-w { font-family: var(--mono); font-size: var(--fs-sm); color: var(--text-4); }
.eff-a { color: var(--text-4); }
.eff-n { font-family: var(--mono); font-size: var(--fs-md); color: var(--text); }
.eff-n.better { color: var(--good); }
.eff-n.worse  { color: var(--warn); }
.sop-det { margin-bottom: var(--s3); }
.sop-det summary { font-size: var(--fs-xs); color: var(--text-4); cursor: pointer;
                   padding: var(--s2) 0; }
.sop-det summary:hover { color: var(--text-2); }@media (max-width:780px){
  .eff-r { grid-template-columns: 1fr auto 1fr; }
  .eff-l { grid-column: 1 / -1; }
}

/* where you are — the ladder */
.sop-state { display: flex; align-items: center; gap: var(--s3); width: 100%;
             text-align: left; padding: var(--s3) var(--s4);
             background: var(--surface); border: 1px solid var(--border);
             border-bottom: none; border-radius: var(--r-md) var(--r-md) 0 0;
             box-shadow: 0 -4px 20px rgba(0,0,0,.35); }
.sop-open .sop-state { display: none; }
.sop-pips { display: flex; gap: 3px; flex: none; }
.sop-pips i { width: 14px; height: 3px; border-radius: 2px; background: var(--border);
              display: block; }
.sop-pips i.on { background: var(--accent); }
.sop-state.rung-5 .sop-pips i.on { background: var(--good); }
.sop-st { font-size: var(--fs-sm); color: var(--text); white-space: nowrap; }
.sop-state.rung-5 .sop-st { color: var(--good); }
.sop-nx { font-size: var(--fs-xs); color: var(--text-4); overflow: hidden;
          text-overflow: ellipsis; white-space: nowrap; }
.sop-state:hover .sop-nx { color: var(--text-2); }

.ladder { margin-bottom: var(--s3); }
.lad-r { display: grid; grid-template-columns: 16px 150px 1fr; gap: var(--s3);
         align-items: baseline; padding: var(--s2) 0; }
.lad-d { color: var(--border); }
.lad-r.on .lad-d { color: var(--accent); }
.lad-l { font-size: var(--fs-sm); color: var(--text-4); }
.lad-r.on .lad-l { color: var(--text); }
.lad-r.now .lad-l { color: var(--warn); }
.lad-w { font-size: var(--fs-xs); color: var(--text-4); }
.lad-next { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6;
            padding: var(--s3); background: var(--surface-2);
            border-radius: var(--r-sm); margin-bottom: var(--s3); }
.lad-next b { color: var(--warn); }@media (max-width:780px){
  .sop-nx { display: none; }
  .lad-r { grid-template-columns: 16px 1fr; }
  .lad-w { grid-column: 2; }
}

/* how close, at a glance */
.sop-ring { position: relative; flex: none; width: 32px; height: 32px;
            display: inline-flex; align-items: center; justify-content: center; }
.sop-ring svg { position: absolute; inset: 0; }
.rg-track { fill: none; stroke: var(--border); stroke-width: 3; }
.rg-fill  { fill: none; stroke: var(--warn); stroke-width: 3; stroke-linecap: round;
            transition: stroke-dasharray .4s ease, stroke .3s ease; }
.rg-n { position: relative; font-family: var(--mono); font-size: 11px;
        color: var(--text-3); line-height: 1; }
.rung-3 .rg-fill, .rung-4 .rg-fill { stroke: var(--accent); }
.rung-5 .rg-fill { stroke: var(--good); }
.rung-4 .rg-n { color: var(--text-2); }
.rung-5 .rg-n { color: var(--good); font-size: 14px; }
.sop-sts { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lad-h { align-items: center; gap: var(--s3); }
.lad-h .sop-ring { width: 38px; height: 38px; }
.lad-h .sop-ring svg { width: 38px; height: 38px; }
.lad-h .rg-n { font-size: 13px; }

/* where do I go to fix it */
.sop-go { padding: 1px var(--s2); font-size: var(--fs-xs); border-radius: var(--r-sm);
          color: var(--accent-soft); border-color: var(--border);
          background: none; white-space: nowrap; }
.sop-go:hover { color: var(--accent); border-color: var(--accent);
                background: rgba(99,102,241,.10); }

/* the section you were sent to */
.flash { animation: rb-flash 1.6s ease-out; }
@keyframes rb-flash {
  0%   { box-shadow: 0 0 0 2px var(--accent); }
  60%  { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}

/* set a doubt aside */
.sop-set { padding: 0 var(--s2); font-size: var(--fs-xs); border: none;
           background: none; color: var(--text-4); text-decoration: underline;
           text-underline-offset: 2px; white-space: nowrap; }
.sop-set:hover { color: var(--text-2); }

/* ten percent of what */
.tn-basis { align-items: baseline; gap: var(--s2); margin-top: -4px; }
.tn-basis .label { font-size: var(--fs-xs); }

/* the flip rule, where it does not govern */
.maoband-soft .label { color: var(--text-4); }
.maoband-soft .mao-chip { opacity: .72; }
.maoband-soft .mao-chip:hover { opacity: 1; }

/* ══ SAVE AND SEND ═══════════════════════════════════════════════ */
.rd-save { font-size: var(--fs-md); }
.savemenu { margin-top: var(--s4); padding: var(--s4);
            border: 1px solid var(--border); border-left: 2px solid var(--accent);
            border-radius: var(--r-md); background: var(--surface-2); }
.savopt { display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
          width: 100%; text-align: left; margin-top: var(--s2);
          padding: var(--s3); background: none; border: 1px solid transparent;
          border-radius: var(--r-sm); }
.savopt:hover { border-color: var(--accent); background: var(--surface); }
.savopt-t { font-size: var(--fs-md); color: var(--text); }
.savopt-n { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.5; }
.savopt-w { font-size: var(--fs-xs); color: var(--text-4); }
.savemenu-f { margin-top: var(--s3); display: block; max-width: 56ch; }

/* the AI's own figure, beside yours */
.wf-ai .label { color: var(--text-4); }
.wf-ai .num   { color: var(--text-4); font-family: var(--mono); }
.wf-off .num  { color: var(--warn); }

/* day one, on the rent in place */
.wf-today .label { color: var(--text-4); }
.wf-today .num   { color: var(--text-3); font-family: var(--mono); }

/* the two rents, as positions you can tap */
.mark.mk-rent { background: none; border: none; padding: 0; cursor: pointer; }
.mk-rent .mark-tick { background: var(--text-4); }
.mk-rent .mark-lbl  { color: var(--text-4); }
.mk-rent:hover .mark-tick { background: var(--accent); }
.mk-rent:hover .mark-lbl  { color: var(--text-2); }
.mk-rent.mk-on .mark-tick { background: var(--accent); width: 2px; }
.mk-rent.mk-on .mark-lbl  { color: var(--accent-soft); }
.mk-rent.mk-on .mark-lbl b { color: var(--accent); }

/* done with the opex parts */
.opex-foot { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s3); }


/* ─── send a file, or send a link ───────────────────────────────── */
.savemenu-f {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}


/* ─── send a file, or send a link ───────────────────────────────── */
.savemenu-f {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.sop-bar #askai-in { flex: 1 1 150px; min-width: 0; }@media (max-width: 560px){
  .opr-sw { min-width: 0; }
  .opr-top b { flex-basis: 100%; }
  .sop-shrow { align-items: flex-start; }
  .sop-shacts { width: 100%; }
  .sop-shacts button { flex: 1 1 0; }
}


/* ─── send a file, or send a link ───────────────────────────────── */
.savemenu-f {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.savemenu-f .label { margin-top: 8px; line-height: 1.6; }
.savemode {
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
}
.savemode:hover { border-color: var(--accent-soft); color: var(--text); }

/* ─── "Show someone", in the stripe ─────────────────────────────── */
.sop-bar { flex-wrap: wrap; }
/* The paste field used to live in this row. It is a surface, not a
   verb, and it is now the drop — see THE DROP, below. */

.sop-share-b { font-size: 12px; white-space: nowrap; }
.sop-share-b.on { border-color: var(--accent); color: var(--text); }

.sop-share { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 10px; }
.sop-shrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.sop-shrow:last-child { border-bottom: 0; }
.sop-shwho { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.sop-shn { font-size: 13px; color: var(--text); }
.sop-shd { font-size: 11px; color: var(--text-3); }
.sop-shw { font-size: 10px; color: var(--text-4); }
.sop-shacts { display: flex; gap: 8px; flex: 0 0 auto; }
.sop-shacts button {
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 7px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
}
.sop-shacts button:hover { border-color: var(--accent-soft); color: var(--text); }
.sop-shlink { border-color: var(--accent-soft) !important; color: var(--text) !important; }

/* ─── steps on a finding ─────────────────────────────────────────── */
.sop-steps { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 8px; }
.sop-step {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.5;
  padding-left: 12px;
  position: relative;
}
.sop-step::before { content: '\2192'; position: absolute; left: 0; color: var(--text-4); }

/* ═══ THE OPEN REGISTER ═════════════════════════════════════════════
   One list, sorted by what each item would change. The left column is
   the point of the design — the engine's own answer to "how much does
   this matter", set in the monospace face so the figures line up.
   ═════════════════════════════════════════════════════════════════ */
.openreg { list-style: none; padding: 0; margin: 8px 0 0; }

.opr {
  padding: 12px 0 12px 12px;
  border-top: 1px solid var(--border-soft);
  border-left: 2px solid transparent;
}
.opr:first-child { border-top: 0; }
.opr-d { border-left-color: var(--warn); }

.opr-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.opr-top b { font-weight: 500; flex: 1 1 240px; min-width: 0; line-height: 1.45; }

.opr-sw {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  flex: 0 0 auto;
  min-width: 86px;
}
/* Not priced is not zero. Zero is a claim. */
.opr-sw-none { color: var(--text-4); font-style: italic; }

.opr-k {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-4);
  flex: 0 0 auto;
}
.opr-d .opr-k { color: var(--warn); }

.opr-why { font-size: 12px; color: var(--text-3); line-height: 1.6; margin: 5px 0 0; }

.opr-acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.sop-ask1 {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 7px;
  background: var(--surface-2);
  border: 1px solid var(--accent-soft);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.sop-ask1:hover { border-color: var(--accent); }

/* ─── a banner at level "blocked" ───────────────────────────────── */
.bn-blocked {
  border-color: var(--warn);
  background: var(--warn-bg, rgba(245, 158, 11, .08));
}
.bn-blocked .bn-i { color: var(--warn); }

/* ─── THE DEAL, READ THE OTHER WAY ──────────────────────────────── */
/*
   Sits under the cash flow figure while a lien is disputed. Quieter
   than the figure above it, because it is not the answer — it is the
   answer the app did not take, shown so the headline cannot be read
   as settled. It removes itself when the question is resolved.
*/
.ck-alt {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-3);
  font-family: var(--mono);
}

/* ═══ THE TWO BUTTONS ═══════════════════════════════════════════════
   See the listing · See the street.

   The only two controls in the app that leave it. They are links, not
   buttons, and they look like it — no fill, an underline on hover —
   because every filled control on this bar changes the deal and these
   two do not. Somebody who has learnt that the accent colour means
   "this acts on your numbers" should not have to unlearn it here.

   The sub-label (.lnkb-p) is the domain and a short path. Hidden on
   screen, where the button says what it does; shown on paper, where
   there is nothing to click and the reader is going to type it.
   ═════════════════════════════════════════════════════════════════ */
.lnkbs { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.lnkb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1;
  padding: 7px 11px;
  border-radius: 8px;
  background: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border, currentColor);
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.lnkb:hover {
  border-color: var(--accent-soft);
  color: var(--text);
  background: var(--surface-2);
}
.lnkb-i { font-size: 13px; line-height: 1; }
.lnkb-p { display: none; }

/* On the shared page they are the first thing under the address, and
   the reader has never seen this app. Bigger, and the full sentence. */
.lnkbs-view { margin-top: 12px; gap: 8px; }
.lnkbs-view .lnkb {
  font-size: 13px;
  padding: 9px 14px;
  border-color: var(--accent-soft);
  color: var(--text);
}
.lnkbs-view .lnkb:hover { border-color: var(--accent); }

/* Why the street button went to a map instead of the kerb. */
.lnkb-why {
  display: block;
  flex: 1 1 100%;
  font-size: 11px;
  color: var(--warn);
  line-height: 1.5;
  margin-top: 2px;
}

/* The echo under the two inputs in the Facts panel. Same buttons, so
   typing a URL up there visibly produces the thing down in the bar. */
.lnk-echo { margin: 2px 0 10px; }
.fldgrid-wide {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}
.fldgrid-wide .fld { min-width: 0; }@media (max-width: 560px){ .fldgrid-wide { grid-template-columns: 1fr; } }

/* The listing in the memo, as a line of text. */
.memo-url { color: var(--text); text-decoration: none; border-bottom: 1px dotted var(--border); }
.memo-url:hover { border-bottom-color: var(--accent); }

/* ─── AND ON PAPER ──────────────────────────────────────────────── */
/*
   A printed button is a lie — there is nothing to press. So the icon
   and the verb go, and the address it would have taken you to stays.
   "See the listing" becomes "zillow.com/homedetails/…/2518-Fern-Palm-Dr",
   which is the only form of this a reader on a phone call can use.
*/
@media print {
  /* The pair in the fixed bar is screen furniture, and the memo carries
     the listing as a row of its own. Printing both put the same URL on
     the page twice. */
  .lnkbs-ledge, .lnk-echo { display: none !important; }

  /* A button with no printable address has nothing to say on paper.
     The street button falls back to the address when the coordinates
     are not vouched for — and printing the address under a masthead
     that is already the address is a line that repeats itself. */
  .lnkb-screen { display: none !important; }
  /* A button with no printable address has nothing to say on paper. */
  .lnkb-screen { display: none !important; }

  .lnkbs { display: block; margin: 6px 0 0; }
  .lnkb {
    display: block;
    border: 0;
    padding: 0;
    margin: 2px 0;
    font-size: 10pt;
    color: #000;
    white-space: normal;
  }
  .lnkb-i, .lnkb-t { display: none; }
  .lnkb-p {
    display: inline;
    font-family: var(--mono);
    font-size: 9pt;
    word-break: break-all;
  }
  .lnkb-why { color: #000; font-size: 9pt; }
  .memo-url { border: 0; color: #000; }
}

/* ═══ THE DROP ══════════════════════════════════════════════════════
   One surface, three places, identical shape.

   The bar is a row of verbs. A text field is not a verb, and wedging
   one in among them is why the most important gesture in the app kept
   getting missed. So the surface comes out of the row and becomes an
   object of its own — the same object, everywhere something gets
   pasted in: where the deal arrives, where the AI's reply comes back,
   and (later) where a reader's reply lands on the shared page.

   DASHED, BECAUSE DASHED MEANS PUT SOMETHING HERE. Nothing else in
   this app has a dashed border, so the shape carries the meaning on
   its own and the label above only has to say WHICH thing.
   ═════════════════════════════════════════════════════════════════ */
.drop {
  /* LONGHANDS, NOT THE SHORTHAND. `border: 1.5px dashed var(--token)`
     is one declaration: if the token is ever missing the WHOLE thing
     is invalid and the style computes to `border-style: none`. The
     dashes are the component's entire identity, so they do not get to
     depend on a colour resolving. Split, only the colour can fail. */
  border-width: 1.5px;
  border-style: dashed;
  border-color: var(--border, currentColor);
  border-radius: 12px;
  padding: 14px 16px 16px;
  background: var(--surface-2);
  transition: border-color .15s;
}
.drop:hover { border-color: var(--border-soft); }
.drop:focus-within { border-color: var(--accent-soft); }

.drop-l {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  margin-bottom: 10px;
}
.drop-h {
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  color: var(--text-4);
}
.drop-x {
  background: none;
  border: 0;
  color: var(--text-4);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.drop-x:hover { color: var(--text); }

/* A PARSE IS DATA, SO IT IS SET LIKE DATA. Proportional type makes a
   column of "Label: value" lines look like prose and hides a missing
   colon; the monospace face is how you can see the shape of what you
   pasted without reading it.

   The id selector is in there because #pastebox has its own rules
   from before this component existed, and an id outranks a class. */
.drop-i,
#pastebox.drop-i {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 108px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  resize: vertical;
  color: var(--text);
  font: 12px/1.65 var(--mono);
}
.drop-i::placeholder { color: var(--text-4); }

.drop-a {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
}
.drop-n {
  font-size: 11px;
  color: var(--text-4);
  line-height: 1.6;
  margin-top: 10px;
}

/* The copy did not go through. Amber, because the ask is still
   recoverable from the console and nothing about the deal is wrong. */
.drop-warn { border-color: var(--warn, currentColor); }
.drop-warn .drop-h { color: var(--warn); }

/* A button that reads as a link. Used for the second way into the
   drop, which is a footnote on the ladder rather than a control. */
.sop-already { margin-top: 10px; }
.sop-linkb {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.sop-linkb:hover { color: var(--text); }

/* In the stripe the drop is already inside a panel, so it drops the
   second frame and keeps only the dashes. */
.sop-drop { padding-bottom: 2px; }
.sop-drop .drop { background: transparent; }@media print{ .drop { display: none !important; } }@media (max-width: 560px){
  .drop { padding: 12px; }
  .drop-a button { flex: 1 1 auto; }

  .opr-sw { min-width: 0; }
  .opr-top b { flex-basis: 100%; }
  .sop-shrow { align-items: flex-start; }
  .sop-shacts { width: 100%; }
  .sop-shacts button { flex: 1 1 0; }
}


/* Same weight as Show someone — both are "take this elsewhere", and
   neither competes with Talk to my AI, which is the primary. The width
   is pinned so the confirmation text ("✓ the whole board, copied")
   does not shunt the rest of the bar sideways for two seconds. */
.sop-board-b {
  font-size: 12px;
  white-space: nowrap;
  min-width: 132px;
  text-align: center;
}
.sop-board-b:hover { border-color: var(--accent); color: var(--text); }@media print{ .sop-board-b { display: none !important; } }


/* ══ 1 · A SETTLEMENT IS NOT "WAS → NOW" ═════════════════════════
   checkAcks and doubtsAccepted are objects, and the row machinery
   printed them through String(), so the most important line in the
   paste panel read "checkAcks: — → [object Object]". They are things
   being set aside on purpose, each with the reason it was — so the row
   has no old value and no arrow, and the id takes the middle columns
   rather than leaving two empty cells before it. */
.askai-row-ok .askai-now { grid-column: 2 / 4; }

/* ══ 2 · THE WHEEL, WHICH IS THE ROW ANYBODY READS FIRST ═════════
   The effect panel listed cash flow, DSCR and break-even and never
   said where the deal had got to, so the one thing the round trip was
   for was the one thing you had to dismiss the panel to find out. It
   is a sentence rather than a figure, so it flows across the row
   instead of being squeezed into the money column, and it sits above a
   rule because it leads. */
.eff-lead { display: flex; flex-wrap: wrap; align-items: baseline;
            gap: var(--s1) var(--s2); padding-bottom: var(--s2);
            margin-bottom: var(--s2); border-bottom: 1px solid var(--border-soft); }
.eff-lead .eff-l { flex: 0 0 96px; }
.eff-lead .eff-w, .eff-lead .eff-n { font-family: inherit; font-size: var(--fs-sm); }

/* ══ 3 · WHERE EACH PAYMENT GOES ═════════════════════════════════
   Two columns: the first payment, which is the worst the split ever
   is, and the whole run to the balloon. Figures are monospaced and
   right-aligned so the two columns can be read down rather than
   across, and the total is ruled off above rather than bolded — the
   parts are the interesting part. */
.amort { margin-top: var(--s3); padding-top: var(--s3);
         border-top: 1px solid var(--border-soft); }
.am-head, .am-r { display: grid; grid-template-columns: 1fr 108px 108px;
                  gap: var(--s2); align-items: baseline; }
.am-head { margin-bottom: var(--s1); }
.am-head .label { text-align: right; font-size: var(--fs-xs); color: var(--text-4); }
.am-head .label:first-child { text-align: left; }
.am-r { padding: 3px 0; }
.am-r .label { font-size: var(--fs-sm); color: var(--text-3); }
.am-r .num   { font-family: var(--mono); font-size: var(--fs-sm);
               color: var(--text); text-align: right; }
/* A NEGATIVE PRINCIPAL IS A DIFFERENT DIRECTION, NOT A SMALLER NUMBER.
   The minus sign is doing real work, so it gets the warning colour. */
.am-r .num[data-neg], .am-tot .num { color: var(--text); }
.am-tot { margin-top: var(--s1); padding-top: var(--s2);
          border-top: 1px solid var(--border-soft); }
.am-tot .label { color: var(--text-4); }@media (max-width: 780px){
  .am-head, .am-r { grid-template-columns: 1fr 88px 88px; gap: var(--s1); }
}


/* ═══ THE STAT BAND ═════════════════════════════════════════════
   Directly under the verdict, because the whole first screen of this
   app was prose and the figures that justify the answer were three
   scrolls below it.

   The figure carries and the label gets out of the way: 28px against
   11px is a ratio you read rather than scan, and the label sits UNDER
   its number so the eye lands on the figure first. Tabular numerals so
   four of them line up, tight tracking because large figures set loose
   look like a price tag.

   No card, no border, no shadow. It sits inside the verdict card, and
   a box inside a box is how a design starts looking like a form. One
   hairline above, to say the figures belong to the answer.          */
.rd-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s4) var(--s3);
  margin: var(--s4) 0 var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--border-soft);
}
.rd-stat-v {
  font-family: var(--font); font-variant-numeric: tabular-nums;
  font-size: var(--fs-hero); font-weight: var(--fw-hero);
  letter-spacing: -.8px; line-height: 1.05; color: var(--text);
  white-space: nowrap;
}
.rd-stat-v.st-good { color: var(--good); }
.rd-stat-v.st-bad  { color: var(--bad-soft); }
/* The unit rides along at label size — "$306" is the figure, "/mo" is
   grammar, and setting them the same size makes you read the grammar. */
.st-unit {
  font-size: var(--fs-md); font-weight: 500; letter-spacing: 0;
  opacity: .62; margin-left: 2px; vertical-align: baseline;
}
.rd-stat-k {
  font-family: var(--font); font-size: var(--fs-xs);
  color: var(--text-4); margin-top: 3px; letter-spacing: .2px;
}

/* Two across on a phone, and the figures drop a step so a long one
   like $86,160 does not run off the edge. */
@media (max-width: 560px) {
  .rd-band { grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
  .rd-stat-v { font-size: var(--fs-xl); }
}

/* A CHIP HOLDS A WORD, NOT A PARAGRAPH. "repairs \2190 0" is a pill.
   "the 70% rule is irrelevant when the seller carries" is a sentence,
   and crammed into an 11px pill the width of the card it reads as a
   validation error rather than an explanation. js/core/ui.js adds
   .rd-chip-note past 34 characters; past that length this is a line of
   text with a rule beside it, in the colour of its own state. */
.rd-chip-note {
  display: block; width: auto; border: 0;
  border-left: 2px solid currentColor;
  border-radius: 0; padding: 1px 0 1px var(--s3); margin-top: 2px;
  background: none; cursor: default;
  font-size: var(--fs-sm); line-height: 1.5; text-align: left;
  white-space: normal; max-width: 68ch;
}
.rd-chip-note.rd-chip-info    { border-left-color: var(--border);        color: var(--text-4); }
.rd-chip-note.rd-chip-prov    { border-left-color: var(--prov-edge);     color: var(--text-3); }
.rd-chip-note.rd-chip-blocked { border-left-color: var(--blocked-edge);  color: var(--text-3); }
.rd-chip-note.rd-go           { cursor: pointer; }
.rd-chip-note.rd-go:hover     { color: var(--text); }

.rd-because::before {
    content: "\00a0\00b7\00a0";
    opacity: 0.55;
}

.rd-because {
    font-weight: 400;
    font-size: 0.78em;
    letter-spacing: 0;
    color: currentColor;
    opacity: 0.62;
    /* The middot is part of the sentence, so it must not be the thing
       that wraps on a phone. */
    white-space: normal;
}

/* On a narrow screen the reason goes under the verdict rather than
   squeezing it. The dot would be stranded at the start of the line, so
   it is hidden and the indent does the joining instead. */
@media (max-width: 460px) {
    .rd-because {
        display: block;
        margin-top: 2px;
        font-size: 0.86em;
    }
    .rd-because::before { content: none; }
}

/* ══ the beta report panel ═══════════════════════════════════════
   AT THE END OF THE FILE ON PURPOSE. .fb-card is a .card variant and
   both are one class, so the one that wins is the one that comes
   last. Written next to the masthead it lost its border and its tint
   to the .card primitive further down and rendered as an ordinary
   grey card — invisible in the source, obvious in a screenshot. */
.fb-card { border-color: var(--prov-edge);
           background: linear-gradient(180deg, rgba(245,158,11,.07), var(--surface) 55%); }
.fb-hd { display: flex; gap: var(--s4); align-items: flex-start;
         justify-content: space-between; }
.fb-note { width: 100%; box-sizing: border-box; background: var(--bg);
           color: var(--text-2); border: 1px solid var(--border);
           border-radius: var(--r-md); padding: 12px 14px;
           font-family: var(--font); font-size: var(--fs-md);
           line-height: 1.6; resize: vertical; }
.fb-note:focus { outline: none; border-color: var(--accent); }
.fb-acts { display: flex; flex-wrap: wrap; gap: var(--s3);
           align-items: center; margin-top: var(--s4); }
.fb-said { font-size: var(--fs-sm); color: var(--text-4); }
.fb-said.fb-ok { color: var(--good-soft); }
.fb-said.fb-no { color: var(--warn-soft); }

/* masthead controls — see js/app.js masthead() */
.mast-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.mast-btn { font-family: var(--font); font-size: var(--fs-xs); font-weight: 500;
            letter-spacing: .3px; color: var(--text-4); background: none;
            border: 1px solid var(--border-soft); border-radius: 999px;
            padding: 4px 11px; cursor: pointer; white-space: nowrap; }
.mast-btn:hover { color: var(--text-2); border-color: var(--border); }
.mast-btn:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
/* armed: it is about to throw work away, so it stops looking like furniture */
.mast-arm { color: var(--bad-soft); border-color: var(--bad);
            background: rgba(220, 38, 38, .10); font-weight: 600; }
.mast-arm:hover { color: #fff; background: var(--bad); border-color: var(--bad); }

/* the way out of the type-it-in-yourself screen — see js/modules/facts.js */
.mh-top { display: flex; flex-wrap: wrap; gap: var(--s3);
          align-items: baseline; justify-content: space-between; }

.fb-nuke { margin-top: var(--s4); padding-top: var(--s3);
           border-top: 1px solid var(--border-soft); }
.fb-nuke .label { line-height: 1.6; max-width: 72ch; display: block; }
.fb-danger { color: var(--bad-soft); font-weight: 600; }
.fb-danger:hover { color: var(--bad); }

/* THE CONVERSATION STEP — see js/modules/onboard.js step2().
   It is the part people skip, so it does not look like the tip box it
   replaced: indigo edge (his voice elsewhere in the app), room to
   breathe, and the cue line set as the thing you say out loud. */
.ob-talk { border: 1px solid var(--accent); border-radius: var(--r-lg);
           background: linear-gradient(180deg, rgba(99,102,241,.10), var(--surface-2) 60%);
           padding: var(--s4) var(--s4) var(--s3); margin: var(--s4) 0; }
.ob-talk-h { font-family: var(--font); font-size: var(--fs-lg); font-weight: 600;
             color: var(--text); letter-spacing: -.3px; margin-bottom: var(--s3); }
.ob-talk p { margin: 0 0 var(--s3); font-size: var(--fs-md); line-height: 1.7;
             color: var(--text-2); max-width: 72ch; }
.ob-talk-cue { border-top: 1px solid var(--border-soft); padding-top: var(--s3);
               margin-bottom: var(--s2) !important; }
.ob-talk-cue b { display: block; font-family: var(--mono); font-size: var(--fs-lg);
                 font-weight: 600; letter-spacing: .5px; color: var(--accent-soft);
                 margin: var(--s2) 0; }
.ob-talk-cue span { display: block; font-size: var(--fs-sm); line-height: 1.6;
                    color: var(--text-4); }

/* ══ THE LISTING-HISTORY CHART ═══════════════════════════════════
   See js/modules/facts.js listingChart(). The line is quiet — it is
   evidence, not a verdict — and the only emphasised mark is where
   the price stands today. Hollow dots are periods off the market. */
.lh-wrap { margin: var(--s4) 0 var(--s3); padding: var(--s3) var(--s4) var(--s2);
           border: 1px solid var(--border-soft); border-radius: var(--r-md);
           background: var(--surface-2); }
.lh-hd { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3);
         align-items: baseline; justify-content: space-between; }
.lh-sum { font-family: var(--font); font-variant-numeric: tabular-nums;
          font-size: var(--fs-sm); color: var(--text-2); }
.lh-svg { display: block; width: 100%; height: auto; margin: 1px 0 2px; }
.lh-line { fill: none; stroke: var(--text-4); stroke-width: 1.6;
           stroke-linejoin: round; stroke-linecap: round;
           /* the box scales with the card; the line must not thicken */
           vector-effect: non-scaling-stroke; }
.lh-dot { fill: var(--text-3); stroke: none; }
/* off the market: nobody could buy it, so the mark is empty */
.lh-dot.lh-off { fill: var(--surface-2); stroke: var(--text-4); stroke-width: 1.4; }
.lh-dot.lh-now { fill: var(--accent-soft); stroke: var(--surface-2); stroke-width: 1.5; }
/* labels are HTML, not SVG text, so they keep their size at any width */
.lh-ax { display: flex; justify-content: space-between; align-items: baseline;
         font-family: var(--font); font-variant-numeric: tabular-nums;
         font-size: var(--fs-xs); color: var(--text-4); }
.lh-ax-t { margin-top: var(--s2); }
.lh-now-t { color: var(--accent-soft); font-weight: 600; font-size: var(--fs-sm); }
.lh-foot { font-size: var(--fs-xs); color: var(--text-4); line-height: 1.5;
           margin-top: 2px; }

@media print {
  /* the page is white and the ink has to survive it */
  .lh-wrap { background: none; border-color: #999; }
  .lh-line { stroke: #444; }
  .lh-dot { fill: #444; }
  .lh-dot.lh-off { fill: #fff; stroke: #444; }
  .lh-dot.lh-now { fill: #000; stroke: #fff; }
  .lh-ax { color: #444; }
  .lh-now-t { color: #000; }
}

/* ══ SEE THE PROPERTY ════════════════════════════════════════════
   js/core/ui.js photoPanel(). This file has no photographs in it and
   never will, so the link to them is not a footnote — on the page a
   reader opens first, it is the answer to their first question. */
.photos { border: 1px solid var(--border); border-radius: var(--r-md);
          background: var(--surface-2); padding: var(--s3) var(--s4) var(--s4);
          margin: var(--s4) 0; max-width: 74ch; }
.ph-h { font-family: var(--font); font-size: var(--fs-md); font-weight: 600;
        color: var(--text); letter-spacing: -.2px; }
.ph-why { margin: 4px 0 var(--s3); font-size: var(--fs-sm);
          line-height: 1.6; color: var(--text-4); }
.ph-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3);
        padding: var(--s2) 0; border-top: 1px solid var(--border-soft);
        text-decoration: none; }
.ph-l:hover .ph-k { color: var(--accent-soft); }
.ph-k { font-family: var(--font); font-size: var(--fs-sm); font-weight: 600;
        color: var(--text-2); min-width: 15ch; }
.ph-u { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-4);
        word-break: break-all; flex: 1 1 24ch; }

@media print {
  /* ON PAPER THE WHOLE URL, because the short form is a dead end:
     nobody can type "zillow.com/homedetails/…" into anything. */
  .photos { border: 1.5pt solid #000; background: none; border-radius: 0;
            padding: 8pt 10pt; margin: 0 0 12pt; max-width: none;
            break-inside: avoid; }
  .ph-h { font-size: 12pt; color: #000; }
  .ph-why { color: #000; font-size: 9.5pt; margin-bottom: 6pt; }
  .ph-l { border-top: 0.5pt solid #999; padding: 4pt 0; display: block; }
  .ph-k { color: #000; font-size: 9.5pt; display: block; }
  .ph-u { color: #000; font-size: 9pt; display: block; margin-top: 1pt; }
}

/* ══ PHOTOS ══════════════════════════════════════════════════════
   js/modules/photos.js. Two renderings of the same pictures: a strip
   with controls where you work, and a plain grid in the document. */
.phos { border: 1px solid var(--border-soft); border-radius: var(--r-md);
        background: var(--surface-2); padding: var(--s3) var(--s4);
        margin: var(--s4) 0; }
.phos.is-over { border-color: var(--accent); background: rgba(99,102,241,.10); }
.phos-h { display: flex; align-items: baseline; justify-content: space-between;
          gap: var(--s3); margin-bottom: var(--s3); }
.phos-n { font-size: var(--fs-xs); color: var(--text-4);
          font-variant-numeric: tabular-nums; }
.phos-grid { display: flex; flex-wrap: wrap; gap: var(--s3); }
.pho { position: relative; margin: 0; width: 112px; height: 84px;
       border-radius: var(--r-sm); overflow: hidden; background: var(--bg);
       border: 1px solid var(--border-soft); }
.pho img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pho-x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px;
         border-radius: 999px; border: 0; cursor: pointer; line-height: 1;
         font-size: 15px; font-family: var(--font);
         color: #fff; background: rgba(15,23,42,.78); }
.pho-x:hover { background: var(--bad); }
.pho-add { display: flex; align-items: center; justify-content: center;
           width: 112px; height: 84px; border-radius: var(--r-sm);
           border: 1px dashed var(--border); cursor: pointer;
           font-size: var(--fs-sm); color: var(--text-4); }
.pho-add:hover { border-color: var(--accent); color: var(--accent-soft); }
.pho-add.is-busy { opacity: .6; cursor: default; }
.pho-add input { position: absolute; width: 1px; height: 1px;
                 opacity: 0; pointer-events: none; }
.phos-note { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--warn-soft); }
.phos-why { margin-top: var(--s2); font-size: var(--fs-xs); line-height: 1.55;
            color: var(--text-4); max-width: 64ch; }

/* in the document: no controls, nothing to press */
.phom { display: grid; gap: var(--s3); margin: 0 0 var(--s4); }
.phom-1 { grid-template-columns: minmax(0, 420px); }
.phom-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.phom-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.phom .pho { width: auto; height: 170px; border-color: var(--border); }

@media (max-width: 560px) {
  .phom-2, .phom-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phom .pho { height: 120px; }
}

@media print {
  /* the strip is a control surface; the document keeps the pictures */
  .phos { display: none !important; }
  .phom { display: grid !important; gap: 6pt; margin: 0 0 10pt;
          break-inside: avoid; }
  .phom .pho { height: 150pt; border: 0.5pt solid #999; border-radius: 0; }
  .pho-x { display: none !important; }
  /* Without this the browser drops every photograph on the page:
     printing backgrounds and images off is the default. */
  .phom img { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* the way back out of the reopened setup card — js/modules/onboard.js */
.ob-hd { position: relative; }
.ob-shut { position: absolute; top: 0; right: 0; font-size: var(--fs-sm); }

/* ══ WHO YOU ARE RINGING ═════════════════════════════════════════
   js/modules/scripts.js contactCard(). The pair to the identity
   card: that one is you, this one is them. The number is the
   largest thing in it because on this screen it is the point. */
.who-card { border-color: var(--border); }
.who-card.who-ready { border-color: var(--good);
  background: linear-gradient(180deg, rgba(16,185,129,.07), var(--surface) 55%); }
.who-tel { margin-left: auto; font-family: var(--font);
           font-variant-numeric: tabular-nums; font-size: var(--fs-xl);
           font-weight: var(--fw-hero); letter-spacing: -.5px;
           color: var(--good-soft); text-decoration: none; white-space: nowrap; }
.who-tel:hover { color: var(--text); }
.who-none { font-size: var(--fs-md); font-weight: 500; color: var(--warn-soft);
            letter-spacing: 0; }
/* two parties, two columns — js/modules/scripts.js contactCard() */
.who-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
           gap: var(--s4); margin-top: var(--s4); }
.who-side { display: flex; flex-direction: column; gap: var(--s2);
            padding: var(--s3); border-radius: var(--r-md);
            border: 1px solid transparent; }
/* the one the scripts are written to */
.who-side.who-live { border-color: var(--ready-edge);
                     background: rgba(16, 185, 129, .06); }
.who-side-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2);
              font-family: var(--font); font-size: var(--fs-sm); font-weight: 600;
              color: var(--text-2); margin-bottom: 2px; }
.who-flag { font-size: var(--fs-xs); font-weight: 500; letter-spacing: .3px;
            color: var(--good-soft); }
.who-side .fld { display: flex; flex-direction: column; gap: 3px; }

@media (max-width: 640px) {
  .who-two { grid-template-columns: 1fr; gap: var(--s3); }
}

.who-rule { margin-top: var(--s3); padding-top: var(--s3);
            border-top: 1px solid var(--border-soft);
            font-size: var(--fs-sm); line-height: 1.6;
            color: var(--text-4); max-width: 76ch; }

@media (max-width: 560px) {
  .who-tel { margin-left: 0; font-size: var(--fs-lg); }
}
@media print {
  /* ON PAPER, THE NAME AND THE NUMBER — nothing else. A printed call
     script is something you hold while dialling, so the number has to
     be on it; the input boxes and the explanation of which person the
     scripts address are a screen surface and print as empty rectangles
     and a paragraph you have already read. */
  .who-card { border: 1pt solid #000; background: none; break-inside: avoid; }
  .who-tel { color: #000; font-size: 15pt; font-weight: 700; }
  .who-two, .who-rule { display: none !important; }
}

/* ══ THE HANDOFF ═════════════════════════════════════════════════
   js/modules/scripts.js handoff(). Indigo, because indigo is the
   app's voice for "your AI" everywhere else, and because this is
   not a seventh script — it is a door out to the conversation. */
.ho { border-color: var(--accent);
      background: linear-gradient(180deg, rgba(99,102,241,.09), var(--surface) 60%); }
.ho-h { font-family: var(--font); font-size: var(--fs-lg); font-weight: 600;
        color: var(--text); letter-spacing: -.3px; }
.ho-p { margin: 6px 0 var(--s4); font-size: var(--fs-md); line-height: 1.7;
        color: var(--text-2); max-width: 72ch; }
.ho-said { font-size: var(--fs-sm); color: var(--text-4); }
.ho-said.ho-ok { color: var(--good-soft); }
.ho-said.ho-no { color: var(--warn-soft); }
@media print { .ho { display: none !important; } }

/* what clearing an open item actually does — js/modules/askai.js */
.opr-what { margin: 6px 0 8px; font-size: var(--fs-sm); line-height: 1.55;
            color: var(--text-4); max-width: 64ch; }
.opr-d .opr-what { color: var(--warn-soft); }
.opr-hint { display: block; margin-top: 2px; font-size: var(--fs-xs);
            font-weight: 400; color: var(--text-4); }

/* ══ ONE TO OPEN WITH ════════════════════════════════════════════
   js/modules/scripts.js contactCard(). A single hyperlocal fact,
   beside the number, at the second you dial. Teal: it is neither a
   judgement nor a warning, it is another way of seeing the place —
   the same reason the wholesale lens uses it. */
.who-tid { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3);
           margin-top: var(--s4); padding: var(--s3);
           border-left: 2px solid var(--lens); border-radius: 0 var(--r-sm) var(--r-sm) 0;
           background: rgba(20, 184, 166, .07); }
.who-tid-l { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .4px;
             text-transform: uppercase; color: var(--lens-soft); }
.who-tid-t { flex: 1 1 24ch; font-size: var(--fs-md); line-height: 1.5; color: var(--text); }
.who-tid-n { font-size: var(--fs-xs); white-space: nowrap; }

/* and the whole set, on the sheet you print — js/modules/memo.js */
.memo-tid { margin-top: var(--s4); padding-top: var(--s3);
            border-top: 1px solid var(--border-soft); }
.memo-tid-h { font-family: var(--font); font-size: var(--fs-sm); font-weight: 600;
              color: var(--text-2); margin-bottom: var(--s2); }
.memo-tid ul { margin: 0; padding-left: 18px; }
.memo-tid li { font-size: var(--fs-sm); line-height: 1.7; color: var(--text-3); }
/* the local-colour paragraph that leads it — parsed on every deal
   since the beginning and rendered by nothing until 9 Oct */
.memo-tid-p { margin: 0 0 var(--s3); max-width: 70ch; }

@media print {
  .who-tid { display: none !important; }   /* the sheet carries the full set */
  .memo-tid-h { color: #000; }
  .memo-tid li { color: #222; font-size: 9.5pt; }
}

/* the handoff card now holds the seller documents above the open
   question, so the two halves need a line between them */
.ho-hr { border: none; border-top: 1px solid var(--border-soft);
         margin: var(--s4) 0; }
.ho .ad-list { margin: var(--s3) 0; }
.ws .ad-list { margin-top: var(--s2); }