/* thedrawer/public/css/is-this-a-business.css
 *
 * DR-003 step 4. Bench tokens only, no literals, per the purity guard.
 *
 * Two rules from the design set that the CSS has to carry rather than the
 * markup: the third answer is dashed rather than solid and sits at the same
 * size as the other two, so it never reads as a lesser option; and selection
 * is a fill, not a tick, with the unpicked card fading and losing its shadow
 * rather than disappearing, so the trade the person walked away from stays
 * visible.
 */

.itb-stage { max-width: var(--stage-max); }
.itb-root { display: flex; flex-direction: column; gap: var(--s4); }

/* ── the stage strip ───────────────────────────────────────────────────── */
/* Done, here, not yet. No count, no percentage, no ceiling. */

.itb-strip {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  border-bottom: var(--border-w) solid var(--line);
  padding-bottom: var(--s2);
}
.itb-strip-item {
  font-family: var(--font-body); font-size: var(--t-micro);
  text-transform: var(--label-case); letter-spacing: var(--label-track);
  font-weight: var(--label-weight); color: var(--ink-faint);
}
.itb-strip-item[data-state="done"] { color: var(--ink-soft); }
.itb-strip-item[data-state="done"] .itb-strip-name {
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.itb-strip-item[data-state="here"] { color: var(--accent); }
.itb-strip-item[data-state="not_yet"] { color: var(--ink-faint); opacity: 0.55; }

/* ── panels ────────────────────────────────────────────────────────────── */

.itb-panel {
  background: var(--panel); border: var(--border-w) solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s3);
  display: flex; flex-direction: column; gap: var(--s2);
}
.itb-panel--raised { background: var(--panel-raised); box-shadow: var(--shadow); }

.itb-label {
  font-family: var(--font-body); font-size: var(--t-micro);
  text-transform: var(--label-case); letter-spacing: var(--label-track);
  font-weight: var(--label-weight); color: var(--ink-faint); margin: 0;
}
.itb-title {
  font-family: var(--font-display); font-size: var(--t-title);
  font-weight: 700; line-height: 1.05; margin: 0; color: var(--ink);
}
.itb-lead { font-family: var(--font-body); font-size: var(--t-lead); color: var(--ink); margin: 0; }
.itb-body { font-family: var(--font-body); font-size: var(--t-body); color: var(--ink-soft); margin: 0; line-height: 1.5; }
.itb-micro { font-family: var(--font-body); font-size: var(--t-small); color: var(--ink-faint); margin: 0; }

/* Tim speaks before the question. Observation, not encouragement. */
.itb-tim { font-family: var(--font-body); font-size: var(--t-lead); color: var(--ink); margin: 0; line-height: 1.45; }

/* ── entry ─────────────────────────────────────────────────────────────── */

.itb-entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.itb-entry-brand { display: flex; gap: var(--s2); align-items: baseline; }
/* DR-012 item 6: reads as a link, not a caption. The old rule below set
 * this to --ink-soft in the site's label-case micro-text treatment,
 * which is exactly what made it look like plain text rather than
 * something tappable. */
.itb-entry-ideas {
  font-family: var(--font-body); font-size: var(--t-small); font-weight: 500;
  text-decoration: underline; text-underline-offset: 2px;
  color: var(--accent);
}
/* body.bench a { color: var(--accent) } already gives an anchor this same
 * colour; matched on its own terms anyway so the intent survives even if
 * that site-wide rule's specificity ever changes. */
body.bench a.itb-entry-ideas { color: var(--accent); }
.itb-question {
  font-family: var(--font-display); font-size: var(--t-display);
  font-weight: 700; line-height: 1; margin: 0; color: var(--ink);
  font-style: var(--display-style);
}
/*
 * The one control the whole tool depends on, and it was the least legible
 * thing on the page. Measured against every skin and theme before and after,
 * with the fill at --ground-sunk:
 *
 *   Typed text at --ink was already 13.3 to 16.8 to 1 and never the problem.
 *   It read as light because of the two things below it.
 *
 *   The placeholder had no rule at all, so it fell to the browser default
 *   grey: 3.26, 4.17, 3.73, 4.17. Under 4.5 on all four. Named explicitly at
 *   --ink-soft it is 6.82, 9.18, 6.19, 8.58.
 *
 *   The border was --line, which against the panel behind it is 1.59, 1.29,
 *   1.46, 1.27. A control boundary needs 3. The field effectively had no
 *   edge, which is most of why the fill read as a wash rather than a box.
 *   --line-strong does not fix it either: it only clears 3 on workshop
 *   light. --ink-faint clears it on both sides everywhere, 4.62 at worst.
 *
 * An ink token on a border is unusual here, and it is deliberate: no line
 * token in the set gives this control a compliant edge on three of the four
 * skins. That is a design set finding, not a thing to paper over locally,
 * so it is written down rather than silently absorbed.
 */
.itb-field {
  width: 100%; box-sizing: border-box; min-height: calc(var(--tap) * 2.2); resize: vertical;
  background: var(--ground-sunk); color: var(--ink);
  border: var(--border-w) solid var(--ink-faint); border-radius: var(--radius);
  padding: var(--s2); font-family: var(--font-body); font-size: var(--t-body);
  line-height: 1.5;
  /* DR-012 item 19: a long unbroken answer (no spaces to wrap on) had no
   * guaranteed break point and could spill past the box edge instead of
   * wrapping or scrolling inside it. */
  overflow-wrap: break-word; word-break: break-word; overflow-x: hidden;
}
.itb-field::placeholder { color: var(--ink-soft); opacity: 1; }
.itb-field:focus-visible { outline: var(--border-w) solid var(--focus); outline-offset: 2px; }

/* ── the wait ──────────────────────────────────────────────────────────── */
/*
 * Shown for the length of every model call. Measured: five to seven seconds
 * of pair generation, and the first question carries triage in the same
 * request on top of that. Before this there was nothing on screen for any of
 * it, and nothing on screen for ten seconds is a hang as far as anybody
 * waiting can tell.
 */
/* DR-012 round four: every action's wait now wears the same rotating-
 * lines-over-a-bar shape the verdict wait uses (.itb-wait-who,
 * .itb-wait-lines, .itb-wait-bar, .itb-wait-slow, all defined once
 * below), rather than the plain elapsed-seconds counter this used to
 * be. .itb-waiting is left as the panel's own class for layout only. */
.itb-waiting { text-align: left; }

.itb-btn {
  min-height: var(--tap); padding: 0 var(--s3);
  background: var(--accent); color: var(--accent-ink);
  border: var(--border-w) solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--font-body); font-size: var(--t-body); font-weight: 500;
  cursor: pointer; box-shadow: var(--shadow);
}
.itb-btn:active { transform: var(--press); box-shadow: none; }
.itb-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.itb-btn--quiet {
  background: transparent; color: var(--ink-soft);
  border-color: var(--line); box-shadow: none;
}
/* DR-012 round nine: the solid, "white-ish" treatment the gap control
 * (.itb-gap-dash) already uses on the stage screens, for a button that
 * is a real secondary action rather than the quiet/transparent style,
 * which reads as an afterthought. Reported directly for See the map. */
.itb-btn--raised {
  background: var(--panel-raised); color: var(--ink);
  border-color: var(--line-strong);
}
.itb-btn--raised:hover { background: var(--ground-sunk); }
/* The Bench chrome sets body.bench a { color: var(--accent) } (specificity
 * 0,1,2), which outranks a plain a.itb-btn rule (0,1,1) and, on the solid
 * button, painted the label the same colour as its own background.
 * body.bench is matched here too so this wins on specificity rather than by
 * accident of source order. */
a.itb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; box-sizing: border-box;
}
body.bench a.itb-btn { color: var(--accent-ink); }
body.bench a.itb-btn.itb-btn--quiet { color: var(--ink-soft); }

/* ── the card pair ─────────────────────────────────────────────────────── */

.itb-cards { display: flex; flex-direction: column; gap: var(--s2); }

.itb-card {
  display: flex; flex-direction: column; gap: var(--s1);
  text-align: left; width: 100%;
  background: var(--panel-raised); color: var(--ink);
  border: var(--border-w) solid var(--line-strong); border-radius: var(--radius);
  padding: var(--s3); cursor: pointer; box-shadow: var(--shadow);
  font-family: var(--font-body);
}
.itb-card:active { transform: var(--press); box-shadow: none; }
/* DR-012 item 15: a long label was clipped by the frame's own
 * overflow: hidden rather than wrapping, since neither the label nor
 * its flex/grid ancestor forced a wrap point. overflow-wrap here and on
 * .itb-card2-label below guarantees the text wraps inside the card. */
.itb-card-label { font-size: var(--t-lead); font-weight: 500; overflow-wrap: anywhere; }
/* The cost line. Every option names what it gives up. */
.itb-card-reason { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.45; }

/* Selection is a fill, not a tick. */
.itb-card[data-picked="true"] { background: var(--accent-soft); border-color: var(--accent); }
/* The unpicked card fades and loses its shadow. It does not disappear: the
 * trade the person walked away from stays visible. */
.itb-card[data-picked="false"] { opacity: 0.55; box-shadow: none; cursor: default; }

/* The third answer. Dashed rather than solid, same size as the other two,
 * never styled as a lesser or skippable thing. */
.itb-card--gap { border-style: dashed; box-shadow: none; }
.itb-card--gap .itb-card-reason { color: var(--ink-faint); }

.itb-override-open {
  min-height: var(--tap); background: transparent; color: var(--ink-soft);
  border: var(--border-w) dashed var(--line); border-radius: var(--radius);
  font-family: var(--font-body); font-size: var(--t-body); cursor: pointer;
}

/* ── the four-way evidence screen ──────────────────────────────────────── */
/* Asked every run, four fixed answers, never generated. It reuses the card
 * stock rather than the override or gap shape, because these are facts being
 * picked, not opinions being typed. No ticks, no ranking, no ordering cue. */

.itb-evidence { display: flex; flex-direction: column; gap: var(--s2); }
.itb-evidence .itb-card { box-shadow: none; }
.itb-evidence .itb-card:hover { box-shadow: var(--shadow); }

/* ── refusal and mid-run stop ──────────────────────────────────────────── */
/* Same stock, never the stop token or failure colour. The mid-run stop
 * still has no button: the run itself is real and stays exactly where it
 * stopped. A refusal at the door is different, DR-012 round ten: nothing
 * was ever saved, so "try again" costs nothing and used to be a genuine
 * dead end with no way back short of finding the entry field by hand. */

.itb-refusal { display: flex; flex-direction: column; gap: var(--s3); }
.itb-refusal-hint { font-size: var(--t-small); color: var(--ink-soft); }
.itb-quote {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: var(--t-title); color: var(--ink); margin: 0; line-height: 1.15;
}
.itb-rule { height: var(--border-w); background: var(--line); border: 0; margin: 0; }

/* ── ready ─────────────────────────────────────────────────────────────── */

.itb-ready-list { display: flex; flex-direction: column; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.itb-ready-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2);
  border-bottom: var(--border-w) solid var(--line); padding-bottom: var(--s2);
}
.itb-ready-said { font-family: var(--font-body); font-size: var(--t-body); color: var(--ink); margin: 0; }
/* A gap is carried into this list in its own words and shown in faint ink,
 * so the person sees how much of their case is still guessing. */
.itb-ready-row[data-gap="true"] .itb-ready-said { color: var(--ink-faint); }
.itb-ready-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
/* Remix / Open the verdict / Archive group left, Delete grouped right.
 * Scoped to the row that actually holds the left group, since this same
 * class also lays out the two-button delete-confirm bar (Delete for
 * good / Keep it), which stays a plain flex-start row. space-between
 * keeps Delete aligned on the same row as the left group instead of
 * dropping to its own line under the old margin-left: auto push when the
 * row wraps on a narrow screen. */
.itb-ready-actions:has(> .itb-ready-actions-left) { align-items: center; justify-content: space-between; }
.itb-ready-actions-left { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ── the slip ──────────────────────────────────────────────────────────── */
/* Hierarchy is fixed: sentence, verdict, condition. */

.itb-slip { display: flex; flex-direction: column; gap: var(--s3); }
/* One. The sentence. The only part anyone forwards to a friend. */
.itb-slip-sentence {
  font-family: var(--font-display); font-size: var(--t-display); font-weight: 700;
  line-height: 1.05; color: var(--ink); margin: 0; font-style: var(--display-style);
}
/* Two. The verdict. Small on purpose. A big verdict is a grade. Four
 * verdicts, four distinct tokens, so the chip reads as a judgement rather
 * than one beige filing category regardless of which one landed. Bench
 * tokens only: each verdict borrows one of the set's existing semantic
 * colours (good, warn, stop, mark) rather than a new one, and every one of
 * those already carries its own value per skin and per theme, so the chip
 * is correct in all four without a second ruleset here. */
.itb-slip-verdict {
  display: inline-block; align-self: flex-start;
  font-family: var(--font-body); font-size: var(--t-micro);
  text-transform: var(--label-case); letter-spacing: var(--label-track);
  font-weight: var(--label-weight);
  background: var(--ground-sunk); color: var(--ink-soft);
  border: var(--border-w) solid var(--line); border-radius: var(--radius);
  padding: var(--s1) var(--s2);
}
.itb-slip-verdict[data-verdict="something_here"] { color: var(--good); border-color: var(--good); border-width: var(--border-w-heavy); }
.itb-slip-verdict[data-verdict="not_formed"]      { color: var(--mark); border-color: var(--mark); border-width: var(--border-w-heavy); }
.itb-slip-verdict[data-verdict="unsure_money"]    { color: var(--warn); border-color: var(--warn); border-width: var(--border-w-heavy); }
.itb-slip-verdict[data-verdict="nobody_finds_out"] { color: var(--stop); border-color: var(--stop); border-width: var(--border-w-heavy); }
/* Three. The condition. Opens with the word condition so it reads as a term. */
.itb-slip-condition { font-family: var(--font-body); font-size: var(--t-body); color: var(--ink); margin: 0; line-height: 1.5; }

/* What they chose and what they walked away from. Same treatment as the
 * card during the run: the unpicked option fades but keeps its place. */
.itb-slip-tradeoffs {
  display: flex; flex-direction: column; gap: var(--s2);
  border-top: var(--border-w) solid var(--line); padding-top: var(--s2);
}
.itb-slip-tradeoff-row { display: flex; flex-direction: column; gap: 2px; }
.itb-slip-tradeoff-chose { font-family: var(--font-body); font-size: var(--t-body); color: var(--ink); margin: 0; }
.itb-slip-tradeoff-row[data-gap="true"] .itb-slip-tradeoff-chose { color: var(--ink-faint); }
.itb-slip-tradeoff-walked { font-family: var(--font-body); font-size: var(--t-body); color: var(--ink-faint); margin: 0; text-decoration: line-through; }

/* Reserved, one line, empty until there is one real link worth putting there.
 * No score, no bar, no percentage, no seal, no date, no next step. */
.itb-slip-slot {
  border-top: var(--border-w) dashed var(--line); padding-top: var(--s2);
  font-family: var(--font-body); font-size: var(--t-micro); color: var(--ink-faint);
  text-transform: var(--label-case); letter-spacing: var(--label-track);
}

/* Ownership. A slip that could belong to anyone is not worth keeping. */
.itb-slip-owner {
  font-family: var(--font-body); font-size: var(--t-micro); color: var(--ink-faint);
  text-transform: var(--label-case); letter-spacing: var(--label-track);
  margin: 0;
}

/* Whatever the verdict, somewhere to go. Outside the slip stock itself: this
 * is navigation, not part of the record. */
.itb-slip-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

/* ── system states ─────────────────────────────────────────────────────── */
/* Same slip stock, half the weight, no stamp. All in voice, none technical. */

.itb-system .itb-slip-sentence { font-size: var(--t-title); }

/* ── the ideas list ────────────────────────────────────────────────────── */
/* DR-004 item 7. Ordered by date, never by quality: nothing here ranks one
 * idea against another. */

.itb-ideas-gate { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }

.itb-ideas-list { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s3); }
.itb-ideas-row {
  display: flex; flex-direction: column; gap: var(--s1);
  padding-bottom: var(--s3); border-bottom: var(--border-w) solid var(--line);
}
.itb-ideas-list .itb-ideas-row:last-child { border-bottom: 0; padding-bottom: 0; }
.itb-ideas-row-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.itb-ideas-date {
  font-family: var(--font-body); font-size: var(--t-micro); color: var(--ink-faint);
  text-transform: var(--label-case); letter-spacing: var(--label-track);
}
/* DR-008 module 6.3: the sentence at 25px display, the whole at-a-glance
 * summary a row needs to be identified without opening it. */
.itb-ideas-sentence { font-family: var(--font-display); font-weight: 700; font-size: 25px; line-height: 1.25; color: var(--ink); margin: 0; }
.itb-ideas-condition { font-family: var(--font-body); font-size: var(--t-small); color: var(--ink-soft); margin: 0; }
.itb-ideas-number {
  font-family: var(--font-body); font-size: var(--t-micro); font-weight: var(--label-weight);
  text-transform: var(--label-case); letter-spacing: var(--label-track); color: var(--ink-faint);
}

.itb-ideas-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.itb-ideas-new { margin: var(--s3) 0; }
.itb-ideas-count { display: flex; gap: 6px; }
.itb-ideas-count-seg { display: block; background: var(--line); }
.itb-ideas-count-seg--filled { background: var(--accent); }
.itb-ideas-count--dots .itb-ideas-count-seg { width: 8px; height: 8px; border-radius: 50%; }
.itb-ideas-count--bar .itb-ideas-count-seg { width: 10px; height: 8px; border-radius: 1px; }

.itb-ideas-free-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  padding: var(--s3); border: var(--border-w-heavy) solid var(--gold-ink);
  border-radius: var(--radius-lg); margin-bottom: var(--s3); color: var(--ink);
}
.itb-ideas-free-banner p { margin: 0; flex: 1 1 260px; }

.itb-ideas-well {
  border: var(--border-w) dashed var(--line-strong); border-radius: var(--radius-lg);
  padding: var(--s3); margin-top: var(--s3); display: flex; flex-direction: column; gap: 4px;
}
.itb-ideas-well .itb-label { color: var(--ink-soft); }

.itb-ideas-delete-confirm {
  background: var(--accent-soft); border-radius: var(--radius);
  padding: var(--s2); display: flex; flex-direction: column; gap: var(--s2);
  color: var(--ink);
}

/* Remixes: side by side with a dimmed echo of the parent, never an
 * arrow, never a delta. The pairing is the only way movement shows. */
.itb-ideas-remix-pair {
  display: grid; grid-template-columns: 220px 1fr; gap: var(--s3);
  align-items: start;
}
.itb-ideas-parent-echo {
  opacity: 0.55; padding: var(--s2); border: var(--border-w) dashed var(--line);
  border-radius: var(--radius); display: flex; flex-direction: column; gap: 4px;
}
.itb-ideas-parent-echo .itb-ideas-sentence { font-size: var(--t-small); font-weight: 500; }

@media (max-width: 899px) {
  .itb-ideas-remix-pair { grid-template-columns: 1fr; }
}

/* Dashed rather than solid at the cap: the same third-answer treatment the
 * card already uses for an option that is not the one being pushed. */
.itb-btn--dashed {
  background: transparent; color: var(--ink-faint);
  border: var(--border-w) dashed var(--line); box-shadow: none; cursor: default;
}

.itb-ideas-archived { margin-top: var(--s3); }
.itb-ideas-archived .itb-label { color: var(--ink-faint); }

@media (max-width: 899px) {
  .itb-entry-head { flex-direction: column; align-items: flex-start; gap: var(--s1); }
  .itb-ready-row { flex-direction: column; }
}

/* The .itb-open-run panel is gone, DR-008 module 1: re-entry restores the
 * run's position on its own instead of offering it beside a fresh field. */

/* ── the numbers beat (DR-008 module 1) ────────────────────────────────── */
/*
 * Labelled fields on the standing panel stock. Module 2 rebuilds the whole
 * question page; this is the minimum the capture needs to stand up in the
 * current layout, no new tokens and no new shapes.
 */
.itb-numbers-field { margin-bottom: var(--s2); }
.itb-numbers-field .itb-label { display: block; margin-bottom: var(--s1); }
.itb-numbers-field .itb-field { min-height: 0; }

/* DR-012 round eight: gives the numbers box its own gap before whatever
 * sits below it (the gap control), matching .itb-own's pattern instead of
 * sitting flush the way bare .itb-panel does. */
.itb-numbers-box { margin-bottom: var(--s2); }

/* DR-012 round eight: the live Annual total/costs/left over preview,
 * shown only on a return trip through Change, never on the first pass.
 * Same dt/dd row shape as the readback's own .itb-rb-annual, so the
 * number this shows and the number the readback shows after Send read
 * as the same kind of thing. */
.itb-numbers-preview {
  display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s2);
  margin: var(--s2) 0 0; padding: var(--s3) 0 0;
  border-top: var(--border-w) dashed var(--line);
}

/* ── dev nav (DR-008, ruling one) ──────────────────────────────────────── */
/*
 * Carried from interview-room.css rather than read across: this page never
 * links that stylesheet, and a class styled only by a sheet a page does not
 * load is the exact bug the Work Board's front door shipped with. Rendered
 * only behind ?dev=1.
 */
.dev-nav {
  position: fixed;
  right: var(--s3);
  top: 76px;
  z-index: 400;
  width: 210px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.dev-nav-head {
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--ink-faint);
  padding: var(--s1) var(--s2);
}

.dev-nav-btn {
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-micro);
  color: var(--ink-soft);
  text-align: left;
  padding: 6px var(--s2);
  border-radius: var(--radius);
  cursor: pointer;
}

.dev-nav-btn:hover { background: var(--ground-sunk); color: var(--ink); }
.dev-nav-btn.is-active { background: var(--accent-soft); color: var(--accent); }

.dev-nav-note {
  font-size: 10px;
  color: var(--ink-faint);
  margin: var(--s1) 0 0;
  padding: 0 var(--s2);
}

/* ── the question page (DR-008 module 2, mock 2a) ──────────────────────── */
/*
 * One frame, two columns: the 300px rail and the question column. Fits a
 * desktop viewport without scrolling; under 900px the columns stack with
 * the question first. Every value reads tokens.
 */
.itb-frame {
  background: var(--ground);
  background-image: var(--pattern);
  background-size: var(--pattern-size);
  border: var(--border-w-heavy) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

/* DR-012 items 8 and 10: With AI Tim moved under the title instead of
 * beside it; Quit this idea stays on the title's own row, right-aligned. */
.itb-frame-head {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--s2) var(--s4);
  background: var(--panel);
  border-bottom: var(--border-w-heavy) solid var(--line-strong);
}
.itb-frame-head-top { display: flex; align-items: center; gap: var(--s3); }
.itb-frame-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 19px; margin-right: auto; color: var(--ink);
}
.itb-frame-with {
  font-size: var(--t-micro); text-transform: var(--label-case);
  letter-spacing: var(--label-track); color: var(--ink-faint);
}

/* DR-012 item 11: a stepped progress tracker, not a tab bar, rebuilt
 * against the item 7 design spec's own stage-strip ruling (done, here,
 * not yet; no fill, no percentage, no count). The old version read as
 * site navigation because it borrowed a tab bar's own visual grammar,
 * an underlined active item inside a horizontally-scrolling row that
 * cut stage names off on a narrow screen with no scroll affordance.
 * flex-wrap here is a safety net; dropping the trailing count (see
 * frameTabs' own comment) is most of what makes five stages actually
 * fit on a 390px viewport without it. */
.itb-frame-tabs {
  display: flex; flex-wrap: wrap; align-items: center;
  padding: 10px var(--s4);
  background: var(--panel);
  border-bottom: var(--border-w) solid var(--line);
}
.itb-tab {
  position: relative;
  padding: 2px 0;
  font-size: var(--t-micro); text-transform: var(--label-case);
  letter-spacing: var(--label-track); white-space: nowrap;
  color: var(--ink-faint);
}
/* A light sequence cue between steps, not a connecting line: the design
 * source stays flat text with colour and weight doing the work, this
 * only helps the row read left-to-right as a sequence rather than a set
 * of unrelated labels. */
.itb-tab + .itb-tab::before {
  content: "\203A"; display: inline-block;
  margin: 0 8px; color: var(--ink-faint); opacity: 0.6;
}

/* DR-012, round two: five stage names at full label tracking (the
 * workshop skin's own 0.16em, ~1.7px a letter on top of the letters
 * themselves) plus 8px on each side of four separators do not fit a
 * 390px phone; flex-wrap's own fallback then orphaned "VERDICT" alone
 * on a second line, which reads as broken rather than designed. Below
 * the isDesktop breakpoint the row tightens instead of wrapping:
 * smaller type, flat tracking, and a narrower gap around each
 * separator claw back the room five words need on one line. */
@media (max-width: 899px) {
  .itb-frame-tabs { padding: 8px var(--s3); gap: 0; }
  .itb-tab { font-size: 9px; letter-spacing: 0.02em; }
  .itb-tab + .itb-tab::before { margin: 0 5px; font-size: 9px; }
}
/* Done: struck through and faint, a step already behind. Here: accent
 * and medium weight, no underline, so the current step is emphasised by
 * colour and weight the way the source treats it, not by borrowing the
 * underlined-active-tab convention of a nav bar. Not yet: plain faint. */
.itb-tab[data-state="done"] { color: var(--ink-faint); text-decoration: line-through; }
.itb-tab[data-state="here"] { color: var(--accent); font-weight: var(--label-weight); }

.itb-frame-grid { display: grid; grid-template-columns: 300px 1fr; min-height: 0; }
/* DR-013 item 4: the very first question, before the step panel has
 * anything to show. */
.itb-frame-grid--no-rail { grid-template-columns: 1fr; }

/* The rail. What stops the question floating in an empty column. */
.itb-rail {
  padding: var(--s4) var(--s3);
  border-right: var(--border-w) solid var(--line);
  background: color-mix(in srgb, var(--panel) 50%, transparent);
  display: flex; flex-direction: column; gap: var(--s3);
}
.itb-rail-who { display: flex; align-items: center; gap: var(--s2); }
.itb-avatar {
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-size: 12px;
  border: var(--border-w) solid var(--line-strong); flex-shrink: 0;
}
.itb-rail-name { font-size: 15px; color: var(--ink); margin: 0; }
.itb-rail-presence, .itb-rail-label {
  font-size: 10px; text-transform: var(--label-case);
  letter-spacing: var(--label-track); color: var(--ink-faint); margin: 0;
}
.itb-rail-idea { border-top: var(--border-w) solid var(--line); padding-top: var(--s3); }
.itb-rail-idea .itb-rail-label { margin-bottom: var(--s2); }
.itb-rail-idea-line {
  font-family: var(--font-display); font-weight: 600;
  font-size: 15px; line-height: 1.35; color: var(--ink); margin: 0;
}
.itb-rail-sofar { border-top: var(--border-w) solid var(--line); padding-top: var(--s3); }
.itb-rail-sofar .itb-rail-label { margin-bottom: var(--s2); }
/* DR-013 items 12-14: one row per answered question plus the current
 * one, replacing the old per-stage dt/dd summary. */
/* Bounded on purpose: a run can run past ten questions, and an
 * unbounded list would push the footer (how many stages are left) and
 * the header both out of reach, growing the whole frame with it. The
 * list scrolls in place; everything around it stays put. */
.itb-step-nav-scroll { position: relative; }
.itb-step-nav-list {
  display: flex; flex-direction: column; gap: var(--s3);
  max-height: min(46vh, 420px); overflow-y: auto; padding-right: 10px;
  /* The native bar is hidden everywhere and replaced by the themed
   * thumb below (js/is-this-a-business.js, stepNavFor's syncThumb). Not
   * a cosmetic choice: macOS Safari's own overlay scrollbar ignores
   * both scrollbar-color and the -webkit-scrollbar pseudo-elements, so
   * styling the native bar themes it everywhere except the one browser
   * where the unthemed version was actually reported. */
  scrollbar-width: none;
}
.itb-step-nav-list::-webkit-scrollbar { display: none; }
.itb-step-nav-scrollbar-track {
  position: absolute; top: 0; right: 0; width: 4px; height: 100%;
  display: none;
}
.itb-step-nav-scroll--scrollable .itb-step-nav-scrollbar-track { display: block; }
.itb-step-nav-scrollbar-thumb {
  position: absolute; left: 0; width: 100%;
  background: var(--line-strong); border-radius: var(--radius-pill);
  cursor: grab;
}
.itb-step-nav-scrollbar-thumb:active { cursor: grabbing; }
.itb-step-nav-row { display: flex; flex-direction: column; gap: 4px; }
.itb-step-nav-head { display: flex; align-items: baseline; gap: 6px; }
.itb-step-nav-q {
  font-size: 10px; font-weight: var(--label-weight); color: var(--ink-faint);
}
.itb-step-nav-stage {
  font-size: 10px; text-transform: var(--label-case);
  letter-spacing: var(--label-track); color: var(--ink-faint);
}
.itb-step-nav-question {
  font-size: var(--t-small); line-height: 1.35; color: var(--ink);
  overflow-wrap: break-word;
}
.itb-step-nav-said {
  font-size: var(--t-small); line-height: 1.4; color: var(--ink-soft);
  overflow-wrap: break-word;
}
.itb-step-nav-edit {
  align-self: flex-start; background: none; border: 0; padding: 0;
  margin-top: 2px; font-family: inherit; font-size: 12px;
  color: var(--accent); text-decoration: underline; cursor: pointer;
}
.itb-step-nav-row--active .itb-step-nav-stage { color: var(--accent); font-weight: var(--label-weight); }
.itb-step-nav-here {
  font-size: var(--t-small); font-style: italic; color: var(--ink-faint);
}
.itb-rail-foot {
  margin: auto 0 0; padding-top: var(--s2);
  border-top: var(--border-w) solid var(--line);
  font-size: 13px; line-height: 1.5; color: var(--ink-faint);
}

/* The question column. */
.itb-qcol { padding: var(--s3) var(--s4) var(--s4); display: flex; flex-direction: column; min-width: 0; }
.itb-question-number {
  font-size: 11px; text-transform: var(--label-case);
  letter-spacing: var(--label-track); color: var(--ink-faint);
  margin: 0 0 var(--s2);
}
.itb-question2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px; line-height: 1.18; color: var(--ink);
  margin: 0 0 var(--s3); max-width: none;
}

/* His two ideas, side by side, each carrying its trade-off, now behind
 * a closed-by-default accordion (DR-013 items 9-10). Accent-coloured
 * summary, round two item 2, so it reads as a live control rather than
 * muted text easy to miss. */
.itb-cards2-accordion { margin: 0 0 var(--s3); }
.itb-cards2-summary {
  cursor: pointer; list-style: none; font-size: 13px;
  font-weight: var(--label-weight); color: var(--accent); padding: var(--s2) 0;
}
.itb-cards2-summary::-webkit-details-marker { display: none; }
.itb-cards2-summary::before { content: '\203A  '; }
.itb-cards2-accordion[open] .itb-cards2-summary::before { content: '\2304  '; }
/* Round two item 3: named in accent, above the cards, since clicking one
 * now only fills the write-in box rather than answering on its own. */
.itb-cards2-hint { margin: 0 0 var(--s2); font-size: 13px; color: var(--accent); }
.itb-cards2-accordion .itb-cards2 { margin-top: var(--s2); }
.itb-cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-bottom: var(--s3); }
.itb-card2 {
  /* min-width: 0 overrides the grid item default of sizing to its
   * content's intrinsic width, which let a long unbroken label force
   * its column wider than the frame and get clipped by .itb-frame's
   * own overflow: hidden (DR-012 item 15). */
  min-width: 0;
  text-align: left; background: var(--panel-raised);
  border: var(--border-w) solid var(--line-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: var(--s3) var(--s3) var(--s2);
  display: flex; flex-direction: column; gap: var(--s2);
  cursor: pointer; font-family: inherit; color: var(--ink);
  transition: opacity 120ms ease;
}
.itb-card2-head { display: flex; align-items: baseline; gap: 8px; }
/* Round two item 4: "Path A" read too small at the old 10px label size;
 * this is now a real title, plain text, no separate letter badge. */
.itb-card2-title { font-size: 17px; font-weight: 600; color: var(--ink); }
/* Item 17, napkin-math framing: pushed to the far end of the head row so
 * it reads as a caveat on the card, not competing with the title for the
 * reader's first look. */
.itb-card2-guess {
  margin-left: auto; font-size: 12px; font-style: italic;
  color: var(--ink-faint); opacity: 0.85; white-space: nowrap;
}
.itb-card2-label { font-size: 17px; line-height: 1.35; font-weight: 400; overflow-wrap: anywhere; }
.itb-card2-cost {
  display: block; border-top: 2px dotted var(--line); padding-top: 9px;
  font-size: 13px; line-height: 1.45; color: var(--ink-soft);
}
.itb-card2-costword { color: var(--accent); }
/* Selection is a fill, not a tick; the card not taken keeps its place. */
.itb-card2[data-picked="true"] { background: var(--accent-soft); }
.itb-card2[data-picked="false"] { opacity: 0.45; }

/* The third box is an input, not a refusal. Always live. */
.itb-own {
  background: var(--panel); border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-lg); padding: var(--s2) var(--s2) var(--s2);
  margin-bottom: var(--s2);
}
.itb-own-label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }
.itb-own-field { width: 100%; box-sizing: border-box; resize: none; }
.itb-own-row { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.itb-own-hint { font-size: 12px; color: var(--ink-faint); margin-right: auto; }
.itb-own-send { flex-shrink: 0; }

/* The named out: an answer, recorded as a gap. DR-012 round two: this
 * read as a flat, washed-out box rather than a pressable one, next to
 * two option cards that both carry a real shadow. Filled background,
 * a real shadow, and hover/press feedback borrow the same tactile
 * language the cards above already use (and the small per-card toggle
 * this fix pass tried and dropped had, which is the "effect" asked
 * for) so this reads as a button on first glance, not a placeholder.
 * Still dashed, still the same size as the two cards above it, per
 * DR-008: never a lesser or skippable third option. */
.itb-gap-dash {
  width: 100%; text-align: left; font-family: inherit;
  background: var(--panel-raised);
  border: var(--border-w) dashed var(--line-strong); border-radius: var(--radius-lg);
  padding: 11px var(--s2); cursor: pointer;
  display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
  box-shadow: var(--shadow);
  transition: border-color 120ms ease, background 120ms ease;
}
.itb-gap-dash:hover { border-color: var(--ink-faint); background: var(--ground-sunk); }
.itb-gap-dash:active { transform: var(--press); box-shadow: none; }
.itb-gap-label { font-size: 15px; color: var(--ink); }
.itb-gap-note { font-size: 13px; color: var(--ink-faint); }

/* ── the verdict wait (DR-008 module 2, mock 2b) ───────────────────────── */
/*
 * Two rules, learned the expensive way and written into the brief. Every
 * delayed animation carries animation-fill-mode: backwards, or elements
 * sit at full opacity through their delay and the lines stack. And the
 * accumulating clauses never share one keyframe staggered by delay: each
 * clause owns its keyframe with zero delay, because staggered delays
 * stagger the reset too. Here nothing accumulative loops at all: the
 * clauses assemble once and hold, so a fast response replaces a sentence
 * that was correct at every moment of its assembly.
 */
.itb-wait { padding: var(--s4); }
.itb-waiting.itb-panel { padding: var(--s4); }
.itb-wait-who { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }

/* DR-012 round four: brought back, this time shared by every wait
 * screen, not just the verdict's. Duration and delay are set per
 * instance in JS (renderWaitLines), not fixed here, so one keyframe
 * serves a five-line set at the same per-line pace as a two-line set. */
.itb-wait-lines { position: relative; height: 62px; margin-bottom: var(--s3); }
.itb-wait-line {
  position: absolute; inset: 0; margin: 0;
  font-family: var(--font-display); font-size: 23px; line-height: 1.3; color: var(--ink);
  opacity: 0;
  animation-name: itbWaitLine; animation-iteration-count: infinite; animation-fill-mode: backwards;
}
@keyframes itbWaitLine {
  0%, 2%   { opacity: 0; transform: translateY(6px); }
  5.5%, 15% { opacity: 1; transform: none; }
  18%, 100% { opacity: 0; transform: translateY(-6px); }
}
.itb-wait-bar {
  height: 8px; border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius); overflow: hidden; background: var(--ground-sunk);
  margin-bottom: var(--s3);
}
.itb-wait-fill {
  height: 100%; background: var(--accent); width: 0;
  animation-name: itbWaitFill; animation-timing-function: ease-out; animation-fill-mode: forwards;
}
@keyframes itbWaitFill { 0% { width: 0; } 92%, 100% { width: 96%; } }

.itb-wait-box {
  background: var(--panel); border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-lg); padding: var(--s3);
}
.itb-wait-sentence {
  font-family: var(--font-display); font-size: 21px; line-height: 1.45;
  margin: 0 0 var(--s3); min-height: 92px; color: var(--ink);
}
.itb-clause { opacity: 0; animation-duration: 12s; animation-fill-mode: forwards; animation-timing-function: ease; }
.itb-clause-1 { animation-name: itbClause1; }
.itb-clause-2 { animation-name: itbClause2; }
.itb-clause-3 { animation-name: itbClause3; }
.itb-clause-4 { animation-name: itbClause4; }
@keyframes itbClause1 { 0%, 2%  { opacity: 0; } 6%, 100%  { opacity: 1; } }
@keyframes itbClause2 { 0%, 24% { opacity: 0; } 28%, 100% { opacity: 1; } }
@keyframes itbClause3 { 0%, 48% { opacity: 0; } 52%, 100% { opacity: 1; } }
@keyframes itbClause4 { 0%, 70% { opacity: 0; } 74%, 100% { opacity: 1; } }
.itb-wait-caret { color: var(--accent); animation: itbCaret 1s steps(1) infinite; }
@keyframes itbCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.itb-wait-stamp {
  display: inline-block; border: var(--border-w) dashed var(--ink-faint);
  border-radius: var(--radius); padding: 6px 12px;
  font-size: var(--t-micro); text-transform: var(--label-case);
  letter-spacing: var(--label-track); color: var(--ink-faint);
  opacity: 0.4; animation: itbStampFirm 12s forwards;
}
@keyframes itbStampFirm { 0%, 74% { opacity: 0.4; } 80%, 100% { opacity: 1; } }

/* The one delayed reveal, and it carries backwards fill for its delay. */
.itb-wait-slow {
  margin: var(--s3) 0 0; font-size: var(--t-small); color: var(--ink-faint);
  opacity: 0; animation: itbSlowReveal 400ms ease 30s backwards forwards;
}
@keyframes itbSlowReveal { from { opacity: 0; } to { opacity: 1; } }

/* ── module 2, under 900px: the columns stack, question first ──────────── */
@media (max-width: 899px) {
  .itb-frame-grid { grid-template-columns: 1fr; }
  .itb-rail { order: 2; border-right: 0; border-top: var(--border-w) solid var(--line); }
  .itb-qcol { order: 1; }
  .itb-cards2 { grid-template-columns: 1fr; }
  .itb-question2 { font-size: 24px; }
  /* Reported directly, from a live screenshot: the hint between Example
   * answer and Send had no room of its own on a phone width, so it
   * squeezed down to two or three words a line between the two buttons.
   * The buttons keep one row to themselves; the hint gets a full-width
   * row under them instead of fighting them for the same one. */
  .itb-own-row { flex-wrap: wrap; }
  .itb-own-example { order: 1; }
  .itb-own-send { order: 2; margin-left: auto; }
  .itb-own-hint { order: 3; flex: 1 0 100%; margin-right: 0; }
}

/* The two-column frame needs the wide stage. The standing 760px reading
 * width stays for every other screen; a screen carrying the frame widens
 * to the site frame max, the same move Practicing made for its own two
 * column screen. */
.itb-stage:has(.itb-frame) { max-width: var(--frame-max); }
.itb-own-field { min-height: calc(var(--tap) * 1.4); }

/* ── the readback (DR-008 module 3, mock 3a) ───────────────────────────── */
/*
 * Four stage cards and a 350px right column inside the standing frame.
 * The stage word is said once per card; rows are dotted-separated; a gap
 * row is faint italic and its control says Answer it on the accent
 * border, because there is nothing there to change.
 */
.itb-ready-grid { display: grid; grid-template-columns: 1fr 350px; min-height: 0; }
.itb-rb-col { padding: var(--s3) var(--s4) var(--s4); border-right: var(--border-w) solid var(--line); min-width: 0; }
.itb-rb-lead { display: flex; align-items: flex-start; gap: var(--s2); margin-bottom: var(--s3); }
.itb-rb-leadline {
  font-family: var(--font-display); font-size: 27px; line-height: 1.25;
  margin: 0; color: var(--ink);
}
.itb-rb-card {
  background: var(--panel); border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--s2);
}
.itb-rb-head {
  display: flex; align-items: center; gap: var(--s2);
  padding: 8px var(--s3); background: var(--ground);
  border-bottom: var(--border-w) solid var(--line-strong);
}
/* DR-012 item 14: the Spark card's <summary> reuses .itb-rb-head as-is,
 * plus a chevron so it reads as a toggle. The other three cards are a
 * plain div and never match this selector. */
summary.itb-rb-head { cursor: pointer; list-style: none; }
summary.itb-rb-head::-webkit-details-marker { display: none; }
summary.itb-rb-head::after {
  content: "\2304"; margin-left: 8px; color: var(--ink-faint);
  transition: transform 0.15s ease;
}
details[open] > summary.itb-rb-head::after { transform: rotate(180deg); }
.itb-rb-stage {
  font-size: 10px; text-transform: var(--label-case);
  letter-spacing: var(--label-track); font-weight: var(--label-weight); color: var(--ink);
}
.itb-rb-count { margin-left: auto; font-size: 11px; color: var(--ink-faint); }
.itb-rb-count[data-gaps="true"] { color: var(--accent); }
.itb-rb-row {
  display: flex; align-items: center; gap: var(--s2);
  padding: 10px var(--s3);
  border-bottom: 2px dotted var(--line);
}
.itb-rb-row:last-child { border-bottom: 0; }
.itb-rb-said { flex: 1; font-size: 17px; line-height: 1.4; color: var(--ink-soft); }
.itb-rb-row[data-gap="true"] .itb-rb-said { font-style: italic; color: var(--ink-faint); }
.itb-rb-change {
  font-family: inherit; font-weight: 300; font-size: 13px; color: var(--ink);
  background: none; border: var(--border-w) solid var(--line);
  border-radius: var(--radius-pill); padding: 3px 14px; cursor: pointer; flex-shrink: 0;
}
.itb-rb-change--gap { border-color: var(--accent); }

/* The right column: the sentence, the money, the stamp, the lock. */
.itb-rb-right {
  padding: var(--s3) var(--s3) var(--s4);
  background: color-mix(in srgb, var(--panel) 50%, transparent);
  display: flex; flex-direction: column; gap: var(--s3);
}
.itb-rb-sentence {
  font-family: var(--font-display); font-size: 21px; line-height: 1.4;
  margin: var(--s2) 0 0; color: var(--ink);
}
/* font-weight pinned to 600, matching .itb-quote: the Google Fonts link
 * only loads Cormorant Garamond italic at weight 600, and this span's
 * inherited weight (300, off the body copy) has no italic face of its
 * own, so a bare font-style: italic here fell through to the fallback
 * serif in the stack instead of the display font used everywhere else
 * on the page. Reported directly, from a live readback. */
.itb-rb-gap { font-style: italic; font-weight: 600; color: var(--ink-faint); }
.itb-rb-moneyline { font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
/* DR-012 item 18: Annual total / Annual costs / Annual left over,
 * directly under the per-unit money line above. */
.itb-rb-annual {
  display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s2);
  margin: var(--s2) 0 0; padding: var(--s2) 0 0;
  border-top: var(--border-w) dotted var(--line);
}
.itb-rb-annual-label {
  font-size: 12px; color: var(--ink-faint); margin: 0;
  grid-column: 1; align-self: center;
}
.itb-rb-annual-value {
  font-size: 15px; font-weight: 500; color: var(--ink); margin: 0;
  grid-column: 2; text-align: right; align-self: center;
}
.itb-rb-stamp { text-align: center; }
.itb-rb-lock { margin-top: auto; border-top: var(--border-w) solid var(--line); padding-top: var(--s3); }
.itb-rb-warn { font-size: var(--t-small); line-height: 1.5; color: var(--ink-soft); margin: 0 0 var(--s2); }
.itb-rb-go { width: 100%; border-radius: var(--radius-lg); }
.itb-rb-back {
  width: 100%; margin-top: 10px; font-family: inherit; font-weight: 300;
  font-size: var(--t-small); color: var(--ink-soft); background: none;
  border: 0; padding: var(--s1); cursor: pointer;
}

@media (max-width: 899px) {
  .itb-ready-grid { grid-template-columns: 1fr; }
  .itb-rb-col { border-right: 0; }
  .itb-rb-right { border-top: var(--border-w) solid var(--line); }
}

/* ── the verdict page (DR-008 module 4, mocks 4a and 6a) ───────────────── */
/*
 * The page renders complete before the work cards exist. The cards arrive
 * from their own later request into their column, per the split rule; a
 * page without them still stands, so nothing here reserves visible space
 * for them beyond the quiet wait line.
 */

/* 4.1 the persistence bar */
.itb-persist {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s4);
  background: var(--panel);
  border-bottom: var(--border-w) solid var(--line);
}
.itb-persist-saved {
  margin: 0; font-size: var(--t-small); color: var(--ink-soft);
  display: flex; align-items: baseline; gap: 8px;
}
.itb-persist-check { color: var(--good); font-weight: 700; }
.itb-persist-pills { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin-left: auto; }
/* A button and an anchor share this class (Copy as text / Print are
 * buttons, Email it to me is a mailto anchor). Left as inline-block they
 * pick up different UA line-height and box defaults per element and drift
 * out of baseline alignment; inline-flex plus an explicit box model and
 * line-height makes all three read as one row regardless of element. */
.itb-pill {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; margin: 0; appearance: none;
  min-height: 30px; padding: 6px 14px; line-height: 1;
  font-family: inherit; font-size: var(--t-micro);
  text-transform: var(--label-case); letter-spacing: var(--label-track);
  color: var(--ink-soft); background: var(--panel-raised);
  border: var(--border-w) solid var(--line-strong); border-radius: 999px;
  cursor: pointer; text-decoration: none;
}
.itb-pill:hover { color: var(--ink); border-color: var(--ink-faint); }
.itb-persist-link { flex-basis: 100%; margin: 0; }

/* 4.2 the headline block: the sentence at display size, the stamp beside */
.itb-vp-head {
  display: grid; grid-template-columns: 1fr 300px; gap: var(--s4);
  padding: var(--s4);
  border-bottom: var(--border-w) solid var(--line);
}
.itb-vp-sentence {
  font-family: var(--font-display); font-size: 42px; line-height: 1.15;
  margin: var(--s2) 0 0; color: var(--ink);
}
/* Same latent bug as .itb-rb-gap, same fix: pin the weight the loaded
 * italic face actually exists at. */
.itb-vp-unknown { font-style: italic; font-weight: 600; color: var(--ink-faint); }
.itb-vp-stamp-col {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s2); padding-top: var(--s3);
}
/* "Not formed yet" sits on dashed stock, per mock 6a. */
.itb-vp .itb-slip-verdict[data-verdict="not_formed"] { border-style: dashed; }
.itb-vp-stamp-line { margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--ink-soft); }

/* 4.4 the work cards, left, and 4.3 what this actually means, 420px right */
.itb-vp-band { display: grid; grid-template-columns: 1fr 420px; }
.itb-vp-cards { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.itb-work-wait { margin: 0; font-size: var(--t-small); color: var(--ink-faint); }
.itb-work-card {
  background: var(--panel); border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-lg); padding: var(--s3);
}
.itb-work-card[data-lead="true"] { border-color: var(--accent); border-width: var(--border-w-heavy); }
.itb-work-head { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: var(--s2); }
.itb-work-badge {
  font-size: var(--t-micro); text-transform: var(--label-case);
  letter-spacing: var(--label-track); padding: 2px 8px;
  border: var(--border-w) solid currentColor; border-radius: 999px;
}
.itb-work-badge--start { color: var(--accent); }
.itb-work-badge--furthest { color: var(--good); }
.itb-work-said { margin: 0 0 4px; font-size: var(--t-small); line-height: 1.5; color: var(--ink-faint); }
.itb-work-implies { margin: 0 0 var(--s2); font-size: var(--t-body); line-height: 1.5; color: var(--ink); }
.itb-work-actions {
  margin: 0; padding-left: 20px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: var(--t-small); line-height: 1.5; color: var(--ink-soft);
}
.itb-work-why { margin: 0; font-size: var(--t-small); color: var(--ink-faint); }

/* DR-012 round nine: one fully enclosed card, not a border-left-only
 * column with its own full-bordered box floating inside it. Reported
 * directly: "it just kind of sits there with a border on left and
 * against the wall... is it supposed to be a floating box? It's neither
 * right now." margin-top clears the primary actions row above it, since
 * the two used to read as crowded against each other with no breathing
 * room at the seam. */
.itb-vp-means {
  padding: var(--s4);
  margin: var(--s2) var(--s4) 0 0;
  border: var(--border-w) solid var(--line-strong); border-radius: var(--radius-lg);
  background: var(--panel);
  display: flex; flex-direction: column; gap: var(--s3);
  align-self: start;
}
.itb-vp-means-head {
  font-family: var(--font-display); font-size: 21px; line-height: 1.35;
  margin: 0; color: var(--ink);
}
.itb-vp-means-lead { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--ink-soft); }
.itb-vp-means-line { margin: 0; font-size: var(--t-body); line-height: 1.55; color: var(--ink); }
/* The condition and what-would-move-it sections read as parts of the one
 * card above, set off by a rule rather than boxed again inside it. */
.itb-vp-cond, .itb-vp-move {
  padding-top: var(--s3); border-top: var(--border-w) dashed var(--line);
}
.itb-vp-cond-line { margin: var(--s1) 0 0; font-size: var(--t-body); line-height: 1.55; color: var(--ink); }
.itb-vp-move-line { margin: var(--s1) 0 0; font-size: var(--t-small); line-height: 1.55; color: var(--ink-soft); }

/* 4.6 the gaps box: answered or blank, nothing else. No green, no tick,
 * no quality signal. The work cards carry the diagnosis and their
 * ordering wins. */
.itb-vp-gaps {
  border: var(--border-w) dashed var(--ink-faint); border-radius: var(--radius);
  padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2);
}
.itb-vp-gap-row { display: grid; grid-template-columns: 84px auto 1fr; gap: var(--s2); align-items: baseline; }
.itb-vp-gap-stage {
  font-size: var(--t-micro); text-transform: var(--label-case);
  letter-spacing: var(--label-track); color: var(--ink-soft);
}
.itb-vp-gap-status {
  font-size: var(--t-micro); text-transform: var(--label-case);
  letter-spacing: var(--label-track); color: var(--ink-faint);
}
.itb-vp-gap-row[data-status="blank"] .itb-vp-gap-status { color: var(--accent); font-weight: var(--label-weight); }
.itb-vp-gap-said {
  font-size: var(--t-small); color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* See the map, then I'm going to do it: stacked directly under the
 * verdict content, See the map first, ahead of the rest of the action
 * bar below. */
.itb-vp-primary-actions {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s3) var(--s4) 0; margin-top: 0;
}
.itb-vp-primary-actions .itb-btn { width: 100%; }

/* 4.5 the action bar, inside the frame */
.itb-vp-actions { padding: var(--s3) var(--s4) 0; margin-top: 0; }
.itb-vp-remix-note { padding: var(--s1) var(--s4) 0; margin: 0; }
.itb-vp .itb-slip-owner { padding: 0 var(--s4) var(--s3); }

@media (max-width: 899px) {
  .itb-vp-head { grid-template-columns: 1fr; }
  .itb-vp-sentence { font-size: 30px; }
  .itb-vp-band { grid-template-columns: 1fr; }
  /* What it means reads before the work on a narrow screen. */
  /* Full width, stacked: the right-hand breathing room only makes sense
   * beside a narrower neighbouring column, which mobile does not have. */
  .itb-vp-means { order: -1; margin-right: 0; }
  .itb-vp-cards { border-top: var(--border-w) solid var(--line); }
}

/* Print keeps the page and drops the chrome: the pills, the actions and
 * the jumper have no meaning on paper. */
@media print {
  .itb-persist-pills, .itb-vp-primary-actions, .itb-vp-actions, .itb-vp-remix-note, .dev-nav { display: none; }
  .itb-frame { box-shadow: none; }
}

/* ── the map (DR-008 module 5) ─────────────────────────────────────────── */
/*
 * A square plot, a dashed cross dividing it into the four verdicts drawn
 * as a taxonomy, one dot for this run and, above the cold-start
 * threshold, a faint scatter for everyone else's. Position only: nothing
 * on this screen is a label, a name or a count.
 */
.itb-map-panel { display: flex; flex-direction: column; gap: var(--s2); }
.itb-map-plot {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1; max-height: 520px;
  background: var(--ground-sunk);
  border: var(--border-w-heavy) solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: visible;
}
.itb-map-cross { position: absolute; background: var(--line-strong); opacity: 0.6; }
.itb-map-cross--h { left: 0; right: 0; top: 50%; height: var(--border-w); }
.itb-map-cross--v { top: 0; bottom: 0; left: 50%; width: var(--border-w); }
.itb-map-quad {
  position: absolute; max-width: 42%;
  font-size: var(--t-micro); text-transform: var(--label-case);
  letter-spacing: var(--label-track); color: var(--ink-faint);
  line-height: 1.4;
}
.itb-map-quad--tl { top: var(--s2); left: var(--s2); }
.itb-map-quad--tr { top: var(--s2); right: var(--s2); text-align: right; }
.itb-map-quad--br { bottom: var(--s2); right: var(--s2); text-align: right; }
.itb-map-quad--bl { bottom: var(--s2); left: var(--s2); }

.itb-map-dot-other {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-faint); opacity: 0.4;
  transform: translate(-50%, -50%);
}
.itb-map-dot-yours {
  position: absolute; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  border: var(--border-w) dashed var(--panel);
  pointer-events: none;
}
.itb-map-dot-yours--hollow {
  background: var(--panel); border: 3px solid var(--ink);
  box-shadow: none;
}
/* Anchored to the same coordinate as the dot, pushed clear of it by a
 * fixed pixel offset rather than by flex order, so a dot pinned to an
 * edge (every hollow dot sits in the bottom-left corner) still gets a
 * label that reads inside the plot. Below the dot by default; the
 * --above modifier flips it for a dot in the bottom half, where "below"
 * would spill past the plot's own edge. */
.itb-map-yours-label {
  position: absolute; transform: translate(-50%, 14px);
  font-size: var(--t-micro); text-transform: var(--label-case);
  letter-spacing: var(--label-track); color: var(--ink);
  background: var(--panel); border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius); padding: 2px 8px; white-space: nowrap;
  pointer-events: none;
}
.itb-map-yours-label--above { transform: translate(-50%, calc(-100% - 14px)); }

/* DR-012 round nine: the plot and the Y axis sit side by side, not
 * stacked as two horizontal rows (both axes used to render along the
 * bottom, because .itb-map-axis-y had only ever inherited .itb-map-axis-x's
 * own horizontal layout rather than being given a vertical one of its
 * own), and the axis sits flush against the plot rather than stranded
 * out at the panel's own edge with a gap between the two.
 *
 * Moved from the right side to the left, the conventional side for a Y
 * axis: asked for once, before this build reached it. The X axis moves
 * into the same grid, placed under the plot's own column, rather than a
 * full-width sibling below the row: at full panel width it happened to
 * start flush with the plot's left edge, but its own high end ran on
 * past the plot's right edge into where the Y axis column sat, a
 * mismatch this grid removes regardless of which side the Y axis is on. */
.itb-map-row {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  gap: var(--s2); align-items: stretch;
}
.itb-map-row .itb-map-plot { min-width: 0; grid-column: 2; grid-row: 1; }
.itb-map-row .itb-map-axis-y { grid-column: 1; grid-row: 1; }
.itb-map-row .itb-map-axis-x { grid-column: 2; grid-row: 2; }

.itb-map-axis-x {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--t-micro); color: var(--ink-faint);
}
.itb-map-axis-y {
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: center; width: 46px;
  font-size: var(--t-micro); color: var(--ink-faint); text-align: center;
}
.itb-map-axis-y .itb-map-axis-name {
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
}
.itb-map-axis-name {
  text-transform: var(--label-case); letter-spacing: var(--label-track);
  color: var(--ink-soft); font-weight: var(--label-weight);
}
.itb-map-axis-end { color: var(--ink-faint); }
.itb-map-caption { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--ink-soft); }
.itb-map-caption--cold { color: var(--ink-faint); font-style: italic; }

/* DR-012 round nine: what the four corners mean, since the quadrant
 * labels on the plot itself carry no explanation. */
.itb-map-glossary { display: flex; flex-direction: column; gap: var(--s2); }
.itb-map-glossary-list { margin: 0; display: flex; flex-direction: column; gap: var(--s2); }
.itb-map-glossary-list dt {
  font-size: var(--t-small); font-weight: var(--label-weight); color: var(--ink);
}
.itb-map-glossary-list dd {
  margin: 2px 0 0; font-size: var(--t-small); line-height: 1.5; color: var(--ink-soft);
}

@media (max-width: 899px) {
  .itb-map-plot { max-height: none; }
  .itb-map-quad { font-size: 10px; max-width: 38%; }
  .itb-map-axis-y { width: 40px; }
}

/* ── 6.4: the landing page fix ─────────────────────────────────────────── */
/*
 * The shared after-stage chrome (Was this any use, Send Is this a
 * business plus add a note, Next: ...) used to render before anything had
 * been typed. Held here, on the ITB page only: the class comes off the
 * body once a run actually closes or the page opens straight onto a
 * destination screen. Nothing about bench.js or any other Thing changes;
 * this rule reaches only the three ids that page mounts on this page.
 */
body.itb-chrome-hold #bench-feedback,
body.itb-chrome-hold #bench-send-slot,
body.itb-chrome-hold #bench-discovery-slot {
  display: none;
}

/* ── the gold action, and the celebration page (DR-008 module 6) ───────── */
/*
 * Exactly two new tokens, ruling four: --gold and --gold-ink, reaching
 * only the gold-stock surfaces this file draws. No third gold-adjacent
 * token: the account box below borrows --gold-ink for its border and
 * sits on --panel, rather than a --gold-soft this module was never ruled.
 */
.itb-btn--gold { background: var(--gold); color: var(--gold-ink); border-color: var(--gold-ink); }

.itb-panel--gold {
  background: var(--gold); border: var(--border-w-heavy) solid var(--gold-ink);
  position: relative; overflow: hidden;
}

/* Confetti, decorative only, in the two lanes the brief allows: left
 * under 14%, right over 86%. Nothing here may cross the display type. */
.itb-cel-confetti { position: absolute; inset: 0; overflow: hidden; }
.itb-cel-confetti-piece {
  position: absolute; top: -24px; width: 8px; height: 14px; opacity: 0.85;
  animation: itbConfettiFall 3.6s ease-in infinite;
}
.itb-cel-confetti-piece--0 { background: var(--accent); }
.itb-cel-confetti-piece--1 { background: var(--good); }
.itb-cel-confetti-piece--2 { background: var(--mark); }
.itb-cel-confetti-piece--3 { background: var(--gold-ink); }
@keyframes itbConfettiFall {
  0%   { transform: translateY(-24px) rotate(0deg); opacity: 0.9; }
  100% { transform: translateY(420px) rotate(240deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .itb-cel-confetti-piece { animation: none; opacity: 0; }
}

.itb-cel-head { position: relative; text-align: left; }
.itb-cel-sentence {
  font-family: var(--font-display); font-size: 40px; line-height: 1.1;
  margin: var(--s2) 0; color: var(--gold-ink);
}
.itb-cel-lead { margin: 0 0 var(--s1); font-size: var(--t-body); color: var(--ink); }
.itb-cel-persist-link { position: relative; margin: 0; }

.itb-cel-band { position: relative; display: grid; grid-template-columns: 1fr 340px; gap: var(--s4); margin: var(--s4) 0; }
.itb-cel-principles-lead { font-family: var(--font-display); font-size: 21px; margin: 0 0 var(--s2); color: var(--ink); }
.itb-cel-written-for { margin: 0 0 var(--s2); font-style: italic; }
.itb-cel-principles-list {
  margin: 0 0 var(--s4); padding-left: 20px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: var(--t-body); color: var(--ink);
}

.itb-cel-name, .itb-cel-account {
  background: var(--panel); border: var(--border-w) solid var(--gold-ink);
  border-radius: var(--radius-lg); padding: var(--s3);
}
.itb-cel-account { display: flex; flex-direction: column; gap: var(--s1); }
.itb-cel-name-row { display: flex; gap: var(--s2); margin: var(--s2) 0; }
.itb-cel-name-field {
  flex: 1; min-height: var(--tap); padding: 0 var(--s2);
  border: var(--border-w) solid var(--ink-faint); border-radius: var(--radius);
  background: var(--ground-sunk); color: var(--ink);
  font-family: var(--font-body); font-size: var(--t-body);
}
.itb-cel-name-saved { color: var(--good); min-height: 1em; display: block; }

.itb-cel-closing {
  position: relative; text-align: right; margin-top: var(--s3);
  font-style: italic; color: var(--gold-ink);
}

@media (max-width: 899px) {
  .itb-cel-band { grid-template-columns: 1fr; }
  .itb-cel-sentence { font-size: 28px; }
  .itb-cel-closing { text-align: left; }
}

/* ── quit without saving, reachable any time a run is open ─────────────── */
/*
 * A plain text control in the frame head, arming an inline two-tap
 * confirm in place: no modal, the same discipline the ideas list's own
 * delete confirm already uses. Deliberately quiet: this is an exit, not
 * an action to reach for by accident, but it is never hidden or a second
 * screen away.
 */
.itb-frame-quit-wrap {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-micro);
}
.itb-frame-quit {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: var(--t-micro);
  text-transform: var(--label-case); letter-spacing: var(--label-track);
  color: var(--ink-faint); text-decoration: underline; text-underline-offset: 2px;
}
.itb-frame-quit:hover { color: var(--stop); }
.itb-frame-quit-lead { color: var(--ink-soft); white-space: nowrap; }
.itb-frame-quit-go, .itb-frame-quit-stay {
  background: none; border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius); padding: 2px 10px; cursor: pointer;
  font-family: var(--font-body); font-size: var(--t-micro);
  text-transform: var(--label-case); letter-spacing: var(--label-track);
}
.itb-frame-quit-go { color: var(--stop); border-color: var(--stop); }
.itb-frame-quit-stay { color: var(--ink-soft); }

@media (max-width: 899px) {
  .itb-frame-quit-lead { white-space: normal; }
}