/* delivery-ticket.css — the delivery ticket and the Delivery box (specs/143 §7,
   INV-1308). The ticket rides the docket ticket's rail (docket-check.css, .dk-*);
   this sheet adds what a delivery says on its own: KSF's decision chips, the
   referral stub, the firms' rows, the gate on step 2, and the one box every
   surface shows. House tokens only; no solid accent fill (INV-1170); one reveal
   per state change, never a hover flourish. */

/* ── The status boxes (INV-1171 amended 2026-09-21; Bennett: "the sections shouldn't be
   touching · the colour of the headers shouldn't be related to the status · colours within
   somewhere should be · Docket needs a coloured header too · status text too big in relation
   to action · 'Rebuild room' and 'Deliveries' look just like plain text") ────────────────────
   Three SEPARATE cards. Each card's header wears its section's fixed IDENTITY colour — room
   blue, delivery plum, docket teal — the same whatever the state, so a person learns where
   each card sits. Status colour lives INSIDE: the pill in the header's right, the status
   mark and the owed door. The status line is small; the doors are real bordered buttons in
   one row; the one owed door is the loudest thing on the card. */
:root { --id-room: var(--accent-brief); --id-delivery: var(--accent-source); --id-docket: #0f766e; }
[data-theme="dark"] { --id-docket: #5eead4; }
.cl-sboxes { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:12px; align-items:start; }
.cl-sboxes > .cl-sbox--wide { grid-column:1 / -1; }
.cl-sbox { --sbox-id: var(--text-faint); --sbox-tone: var(--text-faint); min-width:0; display:flex; flex-direction:column; border:1px solid var(--border-default); border-radius:14px; background:var(--bg-surface); box-shadow:var(--shadow-sm); overflow:hidden; }
.cl-sbox[data-section="room"] { --sbox-id: var(--id-room); }
.cl-sbox[data-section="delivery"] { --sbox-id: var(--id-delivery); }
.cl-sbox[data-section="docket"] { --sbox-id: var(--id-docket); }
.cl-sbox[data-tone="green"] { --sbox-tone: var(--status-verified); }
.cl-sbox[data-tone="yellow"] { --sbox-tone: var(--status-warning); }
.cl-sbox[data-tone="blue"] { --sbox-tone: var(--accent-brief); }
.cl-sbox[data-tone="red"] { --sbox-tone: var(--status-error); }
/* the header: identity, never status */
.cl-sbox__head { display:flex; align-items:center; gap:9px; min-height:40px; padding:8px 14px; background:color-mix(in srgb, var(--sbox-id) 9%, var(--bg-surface)); border-bottom:1px solid color-mix(in srgb, var(--sbox-id) 20%, var(--border-default)); }
.cl-sbox__icon { display:grid; place-items:center; width:24px; height:24px; flex:none; border-radius:7px; background:color-mix(in srgb, var(--sbox-id) 16%, var(--bg-surface)); color:var(--sbox-id); }
.cl-sbox__icon svg { width:12px; height:12px; }
.cl-sbox__title { margin:0; font-size:13px; font-weight:600; letter-spacing:-.005em; color:var(--text-primary); }
.cl-sbox__state { margin-left:auto; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; min-width:0; }
.cl-sbox__state .cl-pill, .cl-sbox__state .cl-ksf { font-size:11px; background:var(--bg-surface); }
.cl-sbox__body { padding:10px 14px 12px; display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
/* the status block: a toned mark (✓ done · ! owed · ● live · × kill · ○ nothing) beside a
   SMALL status line and its one muted line — the status is read, the door is pressed */
.cl-sbox__status { display:grid; grid-template-columns:20px minmax(0,1fr); gap:0 9px; align-items:start; justify-items:stretch; text-align:left; }
.cl-sbox__status > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cl-sbox__status > div > b { font-size:12.5px; font-weight:600; line-height:1.35; color:var(--text-primary); overflow-wrap:anywhere; }
.cl-sbox__status > div > span { font-size:12px; line-height:1.45; color:var(--text-muted); overflow-wrap:anywhere; }
.cl-sbox__mark { width:20px; height:20px; border-radius:999px; display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--sbox-tone); background:color-mix(in srgb, var(--sbox-tone) 16%, var(--bg-surface)); }
.cl-sbox__mark::before { content:"○"; }
.cl-sbox[data-tone="green"] .cl-sbox__mark::before { content:"✓"; }
.cl-sbox[data-tone="yellow"] .cl-sbox__mark::before { content:"!"; }
.cl-sbox[data-tone="red"] .cl-sbox__mark::before { content:"×"; }
.cl-sbox[data-tone="blue"] .cl-sbox__mark::before { content:"●"; animation:dt-wink 1.6s ease-in-out infinite; }
.cl-sbox__status--live .cl-build-line { margin-top:0; font-size:12.5px; }
.cl-sbox__chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.cl-sbox__chips .cl-pill { background:var(--bg-surface); font-size:11.5px; }
/* the foot: "Next" · what to do, then the doors — real buttons in one row, the owed one loud */
.cl-sbox__next { display:flex; flex-direction:column; gap:8px; padding:9px 14px 12px; border-top:1px solid var(--border-default); background:color-mix(in srgb, var(--text-primary) 2.5%, var(--bg-surface)); }
.cl-sbox__next-line { display:flex; align-items:baseline; gap:8px; margin:0; min-width:0; }
.cl-sbox__next-label { flex:none; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--sbox-id); }
.cl-sbox__next-text { font-size:12px; line-height:1.4; color:var(--text-secondary); min-width:0; }
.cl-sbox__doors { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.cl-btn--door { height:28px; padding:0 12px; font-size:12.5px; font-weight:500; border:1px solid var(--border-strong); background:var(--bg-surface); color:var(--text-primary); }

@media (hover: hover) { .cl-btn--door:hover { background:color-mix(in srgb, var(--text-primary) 6%, var(--bg-surface)); border-color:var(--border-stronger); } }
.cl-btn--door[data-tone="yellow"] { font-weight:600; border-color:color-mix(in srgb, var(--status-warning) 65%, var(--border-default)); background:color-mix(in srgb, var(--status-warning) 12%, var(--bg-surface)); }

@media (hover: hover) { .cl-btn--door[data-tone="yellow"]:hover { border-color:var(--status-warning); background:color-mix(in srgb, var(--status-warning) 22%, var(--bg-surface)); } }
.cl-btn--door[data-tone="green"] { font-weight:600; border-color:color-mix(in srgb, var(--status-verified) 55%, var(--border-default)); background:color-mix(in srgb, var(--status-verified) 10%, var(--bg-surface)); }

@media (hover: hover) { .cl-btn--door[data-tone="green"]:hover { border-color:var(--status-verified); background:color-mix(in srgb, var(--status-verified) 18%, var(--bg-surface)); } }
.cl-btn--door[data-tone="blue"] { font-weight:600; border-color:color-mix(in srgb, var(--accent-brief) 55%, var(--border-default)); background:color-mix(in srgb, var(--accent-brief) 10%, var(--bg-surface)); }
.cl-btn--door:disabled, .cl-btn--door[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
.cl-sbox .dt-stub--compact { margin-top:10px; }
.cl-sbox .dk-cards { margin-top:12px; }
@media (max-width:700px) { .cl-sboxes { grid-template-columns:minmax(0,1fr); } }
/* THE POPUP'S BOXES (pass 3, specs/153 §10, INV-1925; Bennett 2026-10-08: "that big deadspace with the
   cards"): two rows of equal pairs — Docket · Comps, then Case room · Delivery — each pair the same height
   (the boxes stretch; a box's foot sits on its floor), never a wide box over a half box beside nothing.
   An odd last box (a surface that draws three) spans its row. One column under 700px. */
.cl-sboxes--pane { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; }
.cl-sboxes--pane > .cl-sbox--wide { grid-column:auto; }
.cl-sboxes--pane > .cl-sbox:last-child:nth-child(odd) { grid-column:1 / -1; }
@media (max-width:700px) { .cl-sboxes--pane { grid-template-columns:minmax(0,1fr); } .cl-sboxes--pane > .cl-sbox:last-child:nth-child(odd) { grid-column:auto; } }
/* "View in Work ↗" at the end of a pillar box's Next line: the unit in the register (a link, quiet) */
.cl-sbox__next-line .cl-sbox__work { margin-left:auto; flex:none; padding-left:8px; font-size:12px; font-weight:550; color:var(--accent-brief); text-decoration:none; white-space:nowrap; }

@media (hover: hover) { .cl-sbox__next-line .cl-sbox__work:hover { text-decoration:underline; text-underline-offset:3px; } }
.cl-sbox__next-line .cl-sbox__work:focus-visible { outline:2px solid var(--accent-brief); outline-offset:2px; border-radius:4px; }
.cl-sbox__head .cl-lhelp { margin-left:-3px; }
/* the popup's Delivery folded to its current step: "n more steps" opens the rest in place */
.cl-steps-more { margin:2px 0 0; }
.cl-steps-more > summary.cl-lfold__chip { height:22px; }
.cl-steps-more > .cl-steps { margin-top:4px; }

/* ── The step list on the Delivery card (specs/143 §7.9; Bennett 2026-09-21: "a clear list
   of steps … next to each step an intuitive layout of what to do … something there brings a
   popup up for the action required for that step … if step 1 hasn't been done yet, step 2
   reads as inactionable — grayed out, with a warning to complete step 1") ───────────────────
   One row per step on a thin rail: the node says done / now / live / locked / not needed /
   failed; the title is the step; the status is small and coloured by its state; the door on
   the right opens THAT step's dialog. A locked row is dimmed, its status a warning. */
.cl-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.cl-step { position:relative; display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:1px 10px; align-items:start; justify-items:stretch; padding:8px 0; text-align:left; }
/* the Case rooms panel centres its grids' items; these rows are left-bound whatever wraps them */
.cl-step__body, .cl-step__doors { justify-self:stretch; }
.cl-step + .cl-step { border-top:1px solid color-mix(in srgb, var(--text-primary) 6%, var(--bg-surface)); }
.cl-step:not(:last-child)::before { content:""; position:absolute; left:10px; top:32px; bottom:-9px; width:2px; border-radius:2px; background:color-mix(in srgb, var(--text-primary) 10%, var(--bg-surface)); }
.cl-step[data-state="done"]:not(:last-child)::before { background:color-mix(in srgb, var(--status-verified) 50%, var(--border-default)); }
.cl-step__node { grid-column:1; grid-row:1 / span 2; width:22px; height:22px; display:grid; place-items:center; border-radius:999px; border:2px solid color-mix(in srgb, var(--text-primary) 14%, var(--bg-surface)); background:var(--bg-surface); font-size:11px; font-weight:600; color:var(--text-muted); margin-top:1px; }
.cl-step__node svg { width:11px; height:11px; display:block; }
.cl-step[data-state="now"] .cl-step__node { border-color:var(--status-warning); color:var(--status-warning); box-shadow:0 0 0 3px color-mix(in srgb, var(--status-warning) 16%, transparent); }
.cl-step[data-state="live"] .cl-step__node { border-color:var(--accent-brief); color:var(--accent-brief); }
.cl-step[data-state="done"] .cl-step__node { border-color:var(--status-verified); background:var(--status-verified); color:#fff; }
.cl-step[data-state="failed"] .cl-step__node { border-color:var(--status-error); background:var(--status-error); color:#fff; }
.cl-step[data-state="locked"] .cl-step__node { border-style:solid; color:var(--text-faint); background:color-mix(in srgb, var(--text-primary) 4%, var(--bg-surface)); }
.cl-step[data-state="locked"] { opacity:.72; }
.cl-step[data-state="off"] .cl-step__node { border-style:dashed; color:var(--text-faint); }
.cl-step__body { grid-column:2; min-width:0; display:flex; flex-direction:column; gap:1px; }
.cl-step__row { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; min-width:0; }
.cl-step__title { font-size:13px; font-weight:600; color:var(--text-primary); line-height:1.35; }
.cl-step__status { font-size:11.5px; font-weight:600; line-height:1.35; color:var(--text-muted); overflow-wrap:anywhere; }
.cl-step[data-state="now"] .cl-step__status { color:var(--status-warning); }
.cl-step[data-state="live"] .cl-step__status { color:var(--accent-brief); }
.cl-step[data-state="done"] .cl-step__status { color:var(--status-verified); }
.cl-step[data-state="failed"] .cl-step__status { color:var(--status-error); }
/* THE OUTCOME'S OWN SIGN (Bennett 2026-09-22: "the big green check mark to the left of 'KSF decides' but red to
   the right"): the node says the step is done; the status says what was decided — green ✓ accepted, red × declined,
   blue waiting, amber undecided — whatever the step's state. */
.cl-step[data-state] .cl-step__status--green { color:var(--status-verified); }
.cl-step[data-state] .cl-step__status--red { color:var(--status-error); }
.cl-step[data-state] .cl-step__status--blue { color:var(--accent-brief); }
.cl-step[data-state] .cl-step__status--yellow { color:var(--status-warning); }
.cl-step__status { display:inline-flex; align-items:center; gap:4px; }
.cl-step__status > svg { display:inline-block; flex:none; }
.cl-step__status--warn { display:inline-flex; align-items:center; gap:4px; color:var(--status-warning); }
.cl-step__status--warn svg { width:11px; height:11px; flex:none; }
.cl-step__detail { font-size:12px; line-height:1.45; color:var(--text-muted); overflow-wrap:anywhere; }
.cl-step[data-state="locked"] .cl-step__title, .cl-step[data-state="off"] .cl-step__title { color:var(--text-muted); font-weight:500; }
.cl-step[data-state="locked"] .cl-step__detail, .cl-step[data-state="off"] .cl-step__detail, .cl-step[data-state="off"] .cl-step__status { color:var(--text-faint); }
.cl-step__doors { grid-column:3; grid-row:1 / span 2; display:flex; flex-direction:column; align-items:stretch; gap:4px; margin-top:1px; }
.cl-step__doors .cl-btn { white-space:nowrap; }
.cl-step__doors .cl-btn--door { height:26px; min-width:148px; padding:0 10px; font-size:12px; justify-content:center; }
@media (max-width:520px) { .cl-step { grid-template-columns:22px minmax(0,1fr); } .cl-step__doors { grid-row:auto; grid-column:2; flex-direction:row; flex-wrap:wrap; margin-top:5px; } .cl-step__chips { grid-row:auto; grid-column:2; } }
/* several firms on one row (specs/143 §7.10): a chip per firm, wrapping, never overflowing */
.cl-step__chips { grid-column:2 / -1; grid-row:3; display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; min-width:0; }
.cl-step__chip { display:inline-flex; align-items:center; gap:5px; max-width:100%; height:22px; padding:0 8px; border-radius:999px; border:1px solid var(--border-default); background:var(--bg-surface); font-size:11px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-step__chip > i { width:6px; height:6px; border-radius:999px; background:var(--text-faint); flex:none; }
.cl-step__chip[data-tone="green"] > i { background:var(--status-verified); }
.cl-step__chip[data-tone="red"] > i { background:var(--status-error); }
.cl-step__chip[data-tone="yellow"] > i { background:var(--status-warning); }
.cl-step__chip[data-tone="blue"] > i { background:var(--accent-brief); }
.cl-step[data-state="locked"] .cl-step__chip, .cl-step[data-state="off"] .cl-step__chip { opacity:.7; }

/* ── The Delivery box (the popup, the Case rooms panel, the lead page) ──── */
.dt-box--panel { margin: 0 0 14px; }
.cl-sbox--alone { }
.dt-box--page { margin: 14px 0 0; }
.dt-chip { color: var(--text-secondary); }
.dt-chip::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--text-faint); flex: none; }
.dt-chip[data-tone="green"]::before { background: var(--status-verified); }
.dt-chip[data-tone="blue"]::before { background: var(--accent-brief); }
.dt-chip[data-tone="red"]::before { background: var(--status-error); }

@media (hover: hover) { a.dt-chip:hover { border-color: var(--text-faint); color: var(--text-primary); } }

/* KSF's pill, toned by the decision (peek.css holds the base; these are the words' colours):
   undecided = amber and winking (a person's turn), accepted = green, declined = blue (it moves on). */
.cl-ksf--none { border-style: solid; border-color: color-mix(in srgb, var(--status-warning) 55%, var(--border-default)); color: var(--text-primary); }
.cl-ksf--none > i { background: var(--status-warning); animation: dt-wink 2.2s ease-in-out infinite; }
.cl-ksf--keep { border-color: color-mix(in srgb, var(--status-verified) 50%, var(--border-default)); color: var(--text-primary); }
.cl-ksf--keep > i { background: var(--status-verified); }
/* declined = red (Bennett 2026-09-22: "declined should be red / have some sort of x") */
.cl-ksf--release { border-color: color-mix(in srgb, var(--status-error) 50%, var(--border-default)); color: var(--text-primary); }
.cl-ksf--release > i { background: var(--status-error); }

/* ── The ticket: ONE step per open (specs/143 §7.9) ─────────────────────── */
.dt-ticket { width: min(720px, 100%); }
/* the stepper strip in the head: four segments, each a door to that step's dialog; the open
   one underlined in the delivery identity, done ones green, locked ones grey with a lock */
.dt-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 12px 0 -14px; padding: 0; }
.dt-stepper__step { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 8px 6px 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 500; text-align: left; cursor: pointer; border-radius: 6px 6px 0 0; }

@media (hover: hover) { .dt-stepper__step:hover { background: color-mix(in srgb, var(--text-primary) 4%, var(--bg-surface)); color: var(--text-primary); } }
.dt-stepper__step:focus-visible { outline: 2px solid var(--accent-brief); outline-offset: -2px; }
.dt-stepper__step[aria-current="step"] { color: var(--text-primary); font-weight: 600; border-bottom-color: var(--id-delivery); }
.dt-stepper__node { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--text-primary) 14%, var(--bg-surface)); font-size: 10.5px; font-weight: 600; color: var(--text-muted); background: var(--bg-surface); }
.dt-stepper__node svg { width: 10px; height: 10px; display: block; }
.dt-stepper__step[data-state="done"] .dt-stepper__node { border-color: var(--status-verified); background: var(--status-verified); color: #fff; }
.dt-stepper__step[data-state="failed"] .dt-stepper__node { border-color: var(--status-error); background: var(--status-error); color: #fff; }
.dt-stepper__step[data-state="now"] .dt-stepper__node { border-color: var(--status-warning); color: var(--status-warning); }
.dt-stepper__step[data-state="live"] .dt-stepper__node { border-color: var(--accent-brief); color: var(--accent-brief); }
.dt-stepper__step[data-state="locked"] .dt-stepper__node, .dt-stepper__step[data-state="off"] .dt-stepper__node { color: var(--text-faint); }
.dt-stepper__step[data-state="off"] .dt-stepper__node { border-style: dashed; }
.dt-stepper__step[data-state="locked"], .dt-stepper__step[data-state="off"] { color: var(--text-faint); }
.dt-stepper__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .dt-stepper__label { display: none; } .dt-stepper__step { justify-content: center; } }
/* a locked step's body: the warning and the door to the step that unlocks it */
.dt-locked { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 14px; align-items: start; padding: 16px 18px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--status-warning) 55%, var(--border-default)); background: color-mix(in srgb, var(--status-warning) 6%, var(--bg-surface)); animation: dk-rise 240ms ease-out backwards; }
.dt-locked__mark { grid-row: 1 / span 3; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--status-warning) 16%, var(--bg-surface)); color: var(--status-warning); }
.dt-locked > b { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.dt-locked > span { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); max-width: 62ch; }
.dt-locked__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dt-locked--off { border-style: solid; border-color: var(--border-default); background: color-mix(in srgb, var(--text-primary) 2.5%, var(--bg-surface)); }
.dt-locked--off .dt-locked__mark { background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-surface)); color: var(--text-muted); }
/* the step's own doors onward: "Continue" after a decision lands */
.dt-onward { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.dt-onward__hint { margin-right: auto; font-size: 12px; color: var(--text-muted); }
/* what a change of decision touches, named before it is made (INV-1312) */
.dt-consequences { margin: 0 0 10px; padding: 10px 12px 10px 34px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--status-warning) 50%, var(--border-default)); background: color-mix(in srgb, var(--status-warning) 8%, var(--bg-surface)); font-size: 12.5px; line-height: 1.5; color: var(--text-primary); position: relative; }
.dt-consequences::before { content: "!"; position: absolute; left: 11px; top: 10px; width: 16px; height: 16px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--status-warning); }
.dt-consequences b { display: block; font-weight: 650; margin-bottom: 2px; }
.dt-consequences ul { margin: 0; padding-left: 16px; }
.dt-consequences li + li { margin-top: 3px; }
/* the decision history: every decision on record, always in view */
.dt-history { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--dk-hair, var(--border-default)); }
.dt-history__title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.dt-history__title span { font-size: 11.5px; font-weight: 400; color: var(--text-muted); }
.dt-history .dk-check[data-standing="1"] .dk-check__here { color: var(--status-verified); font-weight: 600; }
.dt-history .dk-check--empty .dk-check__meta { color: var(--text-faint); }
/* the deliver step's final block: the sentence, the one wide door, the footnote */
.dt-final { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border-default); }
.dt-final__note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.dt-final__door { width: 100%; height: 40px; font-size: 13.5px; font-weight: 600; gap: 8px; }
.dt-final__door:not(:disabled) { border-color: color-mix(in srgb, var(--status-verified) 60%, var(--border-default)); background: color-mix(in srgb, var(--status-verified) 10%, var(--bg-surface)); }

@media (hover: hover) { .dt-final__door:not(:disabled):hover { border-color: var(--status-verified); background: color-mix(in srgb, var(--status-verified) 18%, var(--bg-surface)); } }
.dt-final__door:disabled { opacity: .55; cursor: not-allowed; }
.dt-final__aside { align-self: flex-start; }
.dt-final__foot { margin: 0; font-size: 10.5px; color: var(--text-faint); }
/* an answer recorded for the firm (INV-1315): the channel, who said it, the proof */
.dt-onbehalf { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.dt-onbehalf svg { flex: none; margin-top: 3px; color: var(--text-muted); }
.dt-onbehalf a { color: var(--accent-brief); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent-brief) 40%, transparent); }
.dt-forfirm { margin-top: 12px; }
.dt-forfirm__form .dk-choices { margin-top: 4px; }
.dt-forfirm__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0 14px; }
.dt-forfirm__grid .dk-field .cl-select, .dt-forfirm__grid .dk-field .cl-input { width: 100%; margin-top: 6px; }
.dk-field__optional { font-weight: 400; color: var(--text-faint); margin-left: 4px; }
.dt-file { display: block; width: 100%; margin-top: 6px; font-size: 12.5px; color: var(--text-secondary); }
.dt-file::file-selector-button { margin-right: 10px; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-primary); font: 500 12px/1 inherit; font-family: inherit; cursor: pointer; }

@media (hover: hover) { .dt-file::file-selector-button:hover { background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-surface)); } }
@media (max-width: 560px) { .dt-forfirm__grid { grid-template-columns: minmax(0, 1fr); } }
/* the deliver step's field block and its foot */
.dt-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.dt-field > span:first-child { font-weight: 500; color: var(--text-primary); }
.dt-field__aside { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--text-muted); }
.dt-field__aside a { color: var(--accent-brief); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent-brief) 40%, transparent); }

@media (hover: hover) { .dt-field__aside a:hover { border-bottom-color: var(--accent-brief); } }
.dt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--border-default); padding-top: 12px; }
.dt-foot__note { margin: 0 auto 0 0; font-size: 11.5px; color: var(--text-muted); max-width: 46ch; }
.dt-section { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--text-secondary); }
.dt-section + .dt-firms { margin-top: 0; }
.dt-send--another { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--dk-hair, var(--border-default)); }
/* a step the lane does not need (KSF works it alone): a dash node, muted title, one sentence */
.dk-step[data-state="off"] .dk-node { border-style: dashed; color: var(--text-faint); }
.dk-step[data-state="off"] .dk-step__title { color: var(--text-muted); font-weight: 500; }
.dk-step[data-state="off"]:not(:last-child)::before { background: repeating-linear-gradient(to bottom, var(--dk-line) 0 4px, transparent 4px 8px); }
.dk-receipt--off { color: var(--text-faint); }
.dk-decision[data-tone="blue"] { --dk-tone: var(--accent-brief); }
.dt-decision--fresh .dk-decision__dot { animation: dk-pop 420ms cubic-bezier(.2,.9,.3,1.4) both 120ms; }
.dt-decision--fresh .dk-decision__word { animation: dk-rise 300ms cubic-bezier(.2,.7,.2,1) backwards 80ms; }

/* step 1's chips: Accept (green) · Decline (blue), each with its one-line meaning */
.dt-decide .dk-choices { margin-top: 12px; }
.dt-decide .dk-choice { height: auto; padding: 9px 16px 9px 12px; align-items: center; }
.dk-choice[data-tone="accept"] { --dk-tone: var(--status-verified); }
.dk-choice[data-tone="decline"] { --dk-tone: var(--accent-brief); }
.dk-choice__text { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.dk-choice__text small { font-size: 10.5px; font-weight: 400; color: var(--text-muted); }
.dk-choice:has(> input:checked) .dk-choice__text small { color: inherit; opacity: .85; }
.dt-decide .dk-record { margin-top: 14px; }
.dk-choice[data-current="1"] { opacity: .55; cursor: default; border-style: dashed; }

@media (hover: hover) { .dk-choice[data-current="1"]:hover { background: var(--bg-surface); border-color: var(--border-default); } }
.dt-decide .dk-note { margin-top: 8px; }

/* step 2: the send block, gated until step 1 is recorded */
.dt-send { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.dt-send--gated > *:not(.dt-gate) { opacity: .42; pointer-events: none; filter: saturate(.5); }
.dt-gate { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--status-warning) 55%, var(--border-default)); background: color-mix(in srgb, var(--status-warning) 7%, var(--bg-surface)); color: var(--text-primary); font-size: 12.5px; line-height: 1.45; animation: dk-rise 240ms ease-out both; }
.dt-gate svg { color: var(--status-warning); flex: none; }
.dt-manage { margin-right: auto; margin-left: 0 !important; }
.dt-send .cl-input { font-size: 13px; }
.dk-row__body > .dt-send { margin-top: 2px; }

/* the gate box and the stamp (INV-1311): the offer is a row inside the amber box; its body is a
   red-ringed warning and a reason field — loud on purpose, this is the firm overriding its check */
.dt-gatebox--fresh { animation: dk-rise 260ms cubic-bezier(.2,.7,.2,1) backwards; }
/* the reading names its version (specs/143 §7.4, 2026-09-25): the picker is directly above, so the
   box says which pick it read — the stamp inside it can then never be about another version */
.dt-gatebox__of { margin: 2px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }
.dt-gatebox__of b { font-weight: 650; color: var(--text-secondary); }
/* who at KSF receives it (INV-1814): quick picks, then one chip per person by role */
.dt-people { margin: 0; padding: 10px 12px 12px; border: 1px solid var(--border-default); border-radius: 12px; background: color-mix(in srgb, var(--text-primary) 2%, var(--bg-surface)); display: flex; flex-direction: column; gap: 10px; }
.dt-people > legend { padding: 0 6px; margin: 0; display: flex; align-items: baseline; gap: 8px; }
.dt-people__count { font-weight: 500; font-size: 11.5px; color: var(--text-muted); }
.dt-people__picks { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-people__group { display: flex; flex-direction: column; gap: 5px; }
.dt-people__label { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.dt-people__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-person { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--bg-surface); font-size: 12px; color: var(--text-secondary); cursor: pointer; user-select: none; transition: border-color 120ms, background 120ms, color 120ms; }

@media (hover: hover) { .dt-person:hover { border-color: var(--border-strong); color: var(--text-primary); } }
.dt-person input { margin: 0; width: 13px; height: 13px; accent-color: var(--accent-brief); }
.dt-person__name { font-weight: 500; color: var(--text-primary); }
.dt-person__role { font-size: 10.5px; color: var(--text-faint); }
.dt-person__has { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--status-verified); }
.dt-person:has(> input:checked) { border-color: color-mix(in srgb, var(--accent-brief) 60%, var(--border-default)); background: color-mix(in srgb, var(--accent-brief) 9%, var(--bg-surface)); }
.dt-person--has { border-style: dashed; }
/* what each firm holds, beside the receiving firm: one plain line per live delivery */
.dt-holds { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--text-muted); }
/* the options a firm already lives under, carried into the dialog as its initials (INV-1338) */
.dt-carried { margin: 2px 0 8px; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); border-left: 2px solid var(--border-default); padding-left: 8px; }
.dt-stamp { margin-top: 10px; border-top: 1px solid color-mix(in srgb, var(--status-warning) 35%, var(--border-default)); }
.dt-stamp > summary { padding-left: 2px; }
.dt-stamp__warn { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--status-error) 50%, var(--border-default)); background: color-mix(in srgb, var(--status-error) 8%, var(--bg-surface)); color: var(--text-primary); font-size: 12.5px; line-height: 1.5; }
.dt-stamp__warn svg { color: var(--status-error); flex: none; margin-top: 2px; }
.dt-stamp__warn b { font-weight: 650; }
.dt-stamp__form { display: flex; flex-direction: column; gap: 2px; }
.dt-stamp__form .dk-field { margin-top: 0; }
.dt-stamp__form .cl-btn { align-self: flex-start; margin-top: 10px; }
.dt-send .cl-btn:disabled { opacity: .5; cursor: not-allowed; }

/* the firms that have the room (step 2's receipts) */
.dt-firms { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.dt-firm { display: grid; grid-template-columns: 8px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--dk-hair, var(--border-default)); font-size: 12.5px; animation: dk-rise 220ms ease-out both; }
.dt-firm__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--text-faint); }
.dt-firm[data-state="opened"] .dt-firm__dot { background: var(--accent-brief); }
.dt-firm[data-state="accepted"] .dt-firm__dot { background: var(--status-verified); }
.dt-firm[data-state="declined"] .dt-firm__dot { background: var(--status-error); }
.dt-firm[data-state="revoked"] { opacity: .6; }
.dt-firm > b { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.dt-firm__meta { color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-firm__door { font-size: 12px; color: var(--accent-brief); text-decoration: none; white-space: nowrap; border-bottom: 1px solid color-mix(in srgb, var(--accent-brief) 40%, transparent); }

@media (hover: hover) { .dt-firm__door:hover { border-bottom-color: var(--accent-brief); } }

/* step 3: waiting on a firm */
.dt-wait { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px 12px; align-items: center; margin-top: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--status-warning) 40%, var(--border-default)); background: color-mix(in srgb, var(--status-warning) 6%, var(--bg-surface)); font-size: 12.5px; animation: dk-rise 240ms ease-out both; }
.dt-wait__dot { grid-column: 1; grid-row: 1 / span 2; width: 10px; height: 10px; border-radius: 999px; background: var(--status-warning); animation: dt-wink 2.2s ease-in-out infinite; }
.dt-wait > b { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.dt-wait > span:not(.dt-wait__dot) { grid-column: 2; color: var(--text-secondary); line-height: 1.5; }
.dt-answer { margin-top: 10px; }
.dt-answer + .dt-answer, .dt-answer + .dt-wait, .dt-wait + .dt-answer, .dt-wait + .dt-wait { margin-top: 8px; }
.dt-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; }
.dt-links > b { font-weight: 600; color: var(--text-primary); flex: 0 0 100%; }
.dt-links__url { flex: 1 1 220px; min-width: 0; height: 26px; padding: 0 8px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-surface); color: var(--text-secondary); font-family: var(--font-mono); font-size: 11px; }
.dt-links + .dt-links { border-top: 1px solid var(--dk-hair, var(--border-default)); }

/* ── The firm's link: ONE click-to-copy control (Bennett 2026-09-22: "I hate 'copy x' buttons…
   stuff in kaices should be click to copy and interactive"; of the first cut: "no clear label,
   too big, no styling, and the font is horrible"). A label, the URL in mono, the copy glyph; the
   whole row is the button; .cl-copied is frame.js's 1.6 s flash. ── */
/* THE FIRM'S LINK (2026-09-23, after GitHub's clone box): a read-only mono field the eye can read and
   a click selects; beside it one 14px copy icon that becomes a check + "Copied" for 1.6 s. No copy
   cursor, no dashed box that shifts on hover. */
.dt-link { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; height: 30px; padding: 0 4px 0 10px; border-radius: 8px; border: 1px solid var(--border-default); background: color-mix(in srgb, var(--text-primary) 3%, transparent); }
.dt-link__kind { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; cursor: help; }
/* the field beats the global input rule (Inter 16px, a 38px bordered box) by specificity */
.dt-link input.dt-link__url, .dt-link input.dt-link__url:focus { flex: 1 1 60px; min-width: 0; height: 22px !important; min-height: 0 !important; margin: 0; padding: 0 4px !important; border: 0 !important; border-radius: 0; box-shadow: none !important; background: transparent !important; color: var(--text-secondary); font-family: var(--font-mono) !important; font-size: 12px !important; line-height: 22px !important; letter-spacing: .01em; text-overflow: ellipsis; outline: none; cursor: text; }  /* !important: the page's own input rule (Inter 16px, 38px box) otherwise wins by order */
.dt-link input.dt-link__url:focus { color: var(--text-primary); }
.dt-link input.dt-link__url::selection { background: color-mix(in srgb, var(--accent-brief) 30%, transparent); }
.dt-link__copy { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; transition: color .12s ease, background .12s ease, border-color .12s ease; }

@media (hover: hover) { .dt-link__copy:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 8%, transparent); border-color: var(--border-default); } }
.dt-link__copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dt-link__copy > svg { flex: none; }
.dt-link__copy > svg:nth-of-type(2), .dt-link__copied { display: none; }
.dt-link__copied { font-size: 11px; font-weight: 600; }
.dt-link__copy.cl-copied { color: var(--status-verified); border-color: color-mix(in srgb, var(--status-verified) 45%, transparent); background: color-mix(in srgb, var(--status-verified) 10%, transparent); }
.dt-link__copy.cl-copied > svg:nth-of-type(1) { display: none; }
.dt-link__copy.cl-copied > svg:nth-of-type(2), .dt-link__copy.cl-copied .dt-link__copied { display: inline-flex; }
.dt-links .dt-link { flex: 1 1 220px; width: auto; }

/* ── The referral stub: a ticket stub with a perforation, the code in mono ── */
.dt-stub { position: relative; margin-top: 12px; padding: 12px 14px 12px 24px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--status-verified) 38%, var(--border-default)); background: var(--bg-surface); overflow: hidden; animation: dk-rise 260ms cubic-bezier(.2,.7,.2,1) both; }
.dt-stub::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; border-left: 2px dashed color-mix(in srgb, var(--text-primary) 24%, transparent); }
.dt-stub__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dt-stub__kind { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
.dt-stub__state { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }
.dt-stub__state > i { width: 7px; height: 7px; border-radius: 999px; background: var(--status-warning); }
.dt-stub__state[data-state="linked"] > i { background: var(--status-verified); }
.dt-stub__state[data-state="minted"] > i { background: var(--accent-brief); }
.dt-stub__row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.dt-stub__code { white-space: nowrap; }
/* the code is a button: click copies it (no Copy door) */
/* the code is the house click-to-copy control now (`_copy_value.html`, .cl-copyval--code in peek.css) */
.dt-stub--fresh .dt-stub__code .cl-copyval__value { animation: dt-type 720ms steps(14, end) both 200ms; }
.dt-stub__steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.dt-stub__steps li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; animation: dk-rise 220ms ease-out both; }
.dt-stub__steps li:nth-child(1) { animation-delay: 120ms; } .dt-stub__steps li:nth-child(2) { animation-delay: 180ms; } .dt-stub__steps li:nth-child(3) { animation-delay: 240ms; }
.dt-stub__steps li::before { content: "○"; font-size: 11px; color: var(--text-faint); line-height: 1.6; text-align: center; }
.dt-stub__steps li[data-ok="1"]::before { content: "✓"; color: var(--status-verified); font-weight: 700; }
.dt-stub__steps b { font-weight: 600; color: var(--text-primary); }

/* the box's one-line stub */
.dt-stub--compact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; padding: 6px 10px 6px 20px; animation: none; }
.dt-stub--compact::before { top: 6px; bottom: 6px; left: 9px; }

.dt-stub--compact .dt-stub__kind { cursor: help; }
.dt-stub--compact .dt-stub__state { margin-left: auto; cursor: help; }
.dt-stub__copy { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-secondary); font: 500 11px/1 inherit; font-family: inherit; cursor: pointer; transition: background-color .12s ease, border-color .12s ease, color .12s ease; }

@media (hover: hover) { .dt-stub__copy:hover { background: color-mix(in srgb, var(--text-primary) 12%, var(--bg-surface)); border-color: var(--text-faint); color: var(--text-primary); } }
.dt-stub__copy svg { color: var(--text-muted); }

/* ── The Case rooms page's scope toggle: built rooms by default ─────────── */
.rw-rooms-scope { display: inline-flex; }
.rw-rooms-scope .cl-seg-tab { height: 26px; padding: 0 11px; font-size: 12px; }
.rw-rooms-scope .cl-seg-tab b { font-family: var(--font-mono); font-weight: 600; font-size: 11px; margin-left: 6px; opacity: .8; }
.rw-scope-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ── Motion ─────────────────────────────────────────────────────────────── */
@keyframes dt-wink { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes dt-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .cl-ksf--none > i, .dt-wait__dot, .dt-stub, .dt-stub__code, .dt-stub__steps li, .dt-firm, .dt-wait, .dt-gate, .dt-decision--fresh .dk-decision__dot, .dt-decision--fresh .dk-decision__word { animation: none !important; }
}
@media (max-width: 640px) {
  .dt-firm { grid-template-columns: 8px minmax(0, 1fr); }
  .dt-firm__meta, .dt-firm__door { grid-column: 2; }
  .dt-stub--compact .dt-stub__state { margin-left: 0; flex-basis: 100%; }
}
/* KSF changes a firm's recorded answer (specs/143 §7.18): the change row wears the danger edge;
   the Record door takes the new answer's tone. */
.dt-forfirm--change > summary .dk-row__title { color:var(--text-primary); }
.dt-forfirm--change .dt-consequences { margin:0 0 12px; }
.dt-forfirm--change .dk-record[data-tone="red"]:not(:disabled) { border-color:var(--status-error); color:var(--status-error); box-shadow:0 0 0 4px color-mix(in srgb, var(--status-error) 12%, transparent); }
.dt-forfirm--change .dk-record[data-tone="green"]:not(:disabled) { border-color:var(--status-verified); color:var(--status-verified); box-shadow:0 0 0 4px color-mix(in srgb, var(--status-verified) 12%, transparent); }
/* KSF clears a firm's answer — back to awaiting (specs/143 §7.31, INV-1434): the third lane wears the
   waiting tone; the standing clear sits inside the awaiting block as one quiet line with its reason. */
.dt-forfirm--clear > summary .dk-row__title { color:var(--text-primary); }
.dt-forfirm--clear .dt-consequences { margin:0 0 12px; }
.dt-forfirm--clear .dk-record[data-tone="yellow"]:not(:disabled) { border-color:var(--status-warning); color:var(--status-warning); box-shadow:0 0 0 4px color-mix(in srgb, var(--status-warning) 12%, transparent); }
.dt-wait--cleared { --dk-tone: var(--status-warning); grid-template-rows: auto auto auto; }
.dt-wait--cleared .dt-wait__dot { grid-row: 1 / span 2; }
.dt-wait__cleared { grid-column: 2; display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin-top:6px; padding-top:6px; border-top:1px solid color-mix(in srgb, var(--status-warning) 28%, transparent); font-size:12px; line-height:1.5; color:var(--text-secondary); }
.dt-wait__cleared > svg { flex:none; color:var(--status-warning); }
.dt-wait__cleared a { color:var(--accent-source); text-decoration:underline; text-underline-offset:2px; }
.dt-wait__why { flex-basis:100%; font-style:italic; color:var(--text-muted); }
.dt-wait.dk-decision--stamped { box-shadow:0 0 0 3px color-mix(in srgb, var(--status-warning) 14%, transparent); }
/* the answer just recorded IS its decision block, stamped — no separate Recorded badge */
.dk-decision--stamped { animation: dk-rise 260ms cubic-bezier(.2,.7,.2,1) backwards; box-shadow:0 0 0 3px color-mix(in srgb, var(--dk-tone) 14%, transparent); }
.dk-decision__stampmark { width:28px; height:28px; border-radius:999px; display:grid; place-items:center; background:var(--dk-tone); color:#fff; flex:none; animation: dk-pop 420ms cubic-bezier(.2,.9,.3,1.4) both 120ms; }
.dk-decision__stamp { margin-left:auto; display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; font-size:11.5px; font-weight:600; letter-spacing:.01em; color:var(--dk-tone); background:color-mix(in srgb, var(--dk-tone) 14%, var(--bg-surface)); border:1px solid color-mix(in srgb, var(--dk-tone) 40%, transparent); }
@media (prefers-reduced-motion: reduce) { .dk-decision--stamped, .dk-decision__stampmark { animation:none; } }

/* ── THE TICKET'S TYPE SCALE (Bennett 2026-09-22: "the font sizes of headings and subheadings are
   sometimes quite strange … be consistent and organize sections and subsections better"). Four
   levels, top down, and nothing inside a step outranks the step's title:
     title      .dk-head__title            16px / 600   the dialog's one title ("3. The firm's answer")
     headline   .dk-stamp__word, .dk-decision__word   17px / 650  the stamp's word inside its box
     section    .dt-section                11px / 700 uppercase, tracked, faint — the house eyebrow
                                           (REFERRAL CODE, THEIR LINK, the bands' headings)
     subheading .dt-links > b, .dt-history__title, .dt-forfirm summary b   13px / 600
     body 13px · small 12px muted. ── */
.dk-stamp__word, .dk-decision__word { font-size: 17px; font-weight: 650; }
.dt-section { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); margin: 14px 0 6px; }
/* DEF-RC-64: a kicker is TWO words in the eyebrow's caps (`.cl-eyebrow`, the
   section's own voice); a SENTENCE is never set in them — the move's sentence
   reads at body size, sentence case, under its kicker. */
.cl-eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); }
.dt-move { margin: 14px 0 8px; }
.dt-move__eyebrow { margin: 0 0 3px; }
.dt-move__line { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--text-primary); }
.dt-links > b, .dt-history__title, .dt-forfirm > summary b { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.dt-history__title span { font-size: 12px; font-weight: 500; }


/* Tooltip lines (frame.js renderTipLines, 2026-09-23): a bare line spans both columns of the rows grid. */
.cl-tip__line { grid-column:1 / -1; color:var(--text-secondary); font-size:11px; font-weight:500; line-height:1.45; }
.cl-tip__line + .cl-tip__k, .cl-tip__v + .cl-tip__line { margin-top:1px; }

/* THE UPDATE'S OPTIONS in the deliver dialog (specs/143 §7.27) */
.dt-update { margin:6px 0 2px; padding:10px 12px 8px; border:1px solid color-mix(in srgb, var(--accent-brief) 35%, var(--border-default)); border-radius:10px; background:color-mix(in srgb, var(--accent-brief) 6%, transparent); }
.dt-update > legend { padding:0 6px; }
.dt-field__hint { display:block; font-size:11.5px; color:var(--text-muted); }

/* INV-1338: the delivery options (KSF only) — a days field inline in its sentence */
.dt-days { display:inline-block; width:58px; height:24px; padding:0 6px; margin:0 4px; font-size:12px; text-align:right; }
.dt-field__label { display:block; font-size:12px; font-weight:600; color:var(--text-primary); margin-bottom:4px; }

/* ── Step 3's lanes are ONE list (2026-09-24) ───────────────────────────────
   The change / clear lanes and the record-for-firm lanes render as two
   `.dk-list` blocks because they come from two loops over different data. They
   are the same list to a reader — every lane is a KSF admin writing a firm's
   answer on the record — so when both are present they close the seam and
   continue each other's hairline rhythm instead of drifting apart by 10px.
   `.dt-forfirm`'s own top margin is what a lane needs when it stands ALONE
   (outside a list), so it is zeroed only inside a lane list. */
.dt-lanes + .dt-lanes { margin-top: 0; border-top: 1px solid var(--dk-hair, var(--border-default)); }
.dt-lanes > .dt-forfirm { margin-top: 0; }
.dt-lanes > .dt-forfirm > summary { padding-top: 10px; padding-bottom: 10px; }

/* the consequences box, read rather than skimmed: a touch more leading and
   room between the lines it lists, and a badge that states rather than shouts */
.dt-consequences { line-height: 1.55; }
.dt-consequences li + li { margin-top: 5px; }
.dt-consequences::before {
  background: color-mix(in srgb, var(--status-warning) 88%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-warning) 16%, transparent);
}

/* THE THIRD PATH on step 1 (specs/143 §7.33): a quiet door under the decision */
.dt-third { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; padding-top:10px; border-top:1px dashed var(--border-default); font-size:12.5px; color:var(--text-muted); }
.dt-third__takes { font-size:11.5px; color:var(--text-secondary); }


/* WHAT TO SEND (specs/161, INV-LS5): the room as a whole, or its lead sheet alone — two
   objects in the deliver dialog's step 2, between the version picker and its reading. */
.dt-scope { margin:4px 0 2px; padding:10px 12px 8px; border:1px solid var(--border-default); border-radius:10px; background:var(--bg-surface); }
.dt-scope > legend { padding:0 6px; font-size:12px; font-weight:600; color:var(--text-primary); }
.dt-scope__choices { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:8px; }
.dt-scope__choice { display:flex; align-items:flex-start; gap:8px; padding:8px 10px; border:1px solid var(--border-default); border-radius:9px; font-size:12px; line-height:1.55; color:var(--text-secondary); cursor:pointer; background:var(--bg-surface); }

@media (hover: hover) { .dt-scope__choice:hover { border-color:var(--border-strong); background:var(--bg-surface-2); } }
.dt-scope__choice:has(input:checked) { border-color:var(--accent-brief); background:color-mix(in srgb, var(--accent-brief) 7%, transparent); }
.dt-scope__choice input { margin-top:3px; flex:none; }
.dt-scope__choice b { display:block; color:var(--text-primary); }
.dt-scope__alone { display:flex; align-items:center; gap:8px; margin:0; font-size:12.5px; color:var(--text-secondary); }
.rp-head__scope { flex:none; }