/* ==========================================================================
   The Drafting Table — design system

   Palette per the Brand Book, not the course deck. Deep Charcoal and Warm
   White carry the layout; Capital Green is the action accent; Muted Brass
   signals structure. The deck's lime-forward dark theme is for slides; this
   is a reading and working surface where people type numbers and print PDFs,
   and a light ground serves both better.
   ========================================================================== */

:root {
  --charcoal:  #111411;
  --charcoal-8:  rgba(17, 20, 17, 0.08);
  --charcoal-14: rgba(17, 20, 17, 0.14);
  --charcoal-55: rgba(17, 20, 17, 0.55);
  --charcoal-72: rgba(17, 20, 17, 0.72);

  --warm-white: #F4F3EE;
  --paper:      #FBFAF6;

  --capital-green: #4F9E3A;
  --green-dark:    #3C7A2C;
  --green-tint:    rgba(79, 158, 58, 0.10);

  --brass:     #B79A52;
  --champagne: #D4C08A;

  --display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --body:    "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shell: 1080px;
}

* { box-sizing: border-box; }

/* The hidden attribute must win over any component display rule. Without this,
   a .handoff-live { display:flex } quietly overrides [hidden] and the panel
   shows when it should not. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--warm-white);
  color: var(--charcoal);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; }
h2 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.012em; }
h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.008em; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--green-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--capital-green);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 10px;
}

.lede { font-size: 1.15rem; line-height: 1.5; color: var(--charcoal-72); }

/* ---- masthead ----------------------------------------------------------- */

.masthead { background: var(--charcoal); color: var(--warm-white); }
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap;
}
.wordmark { text-decoration: none; color: inherit; display: flex; align-items: baseline; gap: 7px; }
.wordmark-main {
  font-family: var(--display); font-weight: 800; font-size: 1.02rem; letter-spacing: -0.015em;
}
.wordmark-sub {
  font-family: var(--display); font-weight: 500; font-size: 0.62rem;
  letter-spacing: 0.06em; color: var(--champagne);
}
.nav { display: flex; gap: 22px; }
.nav a {
  color: rgba(244, 243, 238, 0.72); text-decoration: none;
  font-size: 0.9rem; padding: 4px 0; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--warm-white); }
.nav a[aria-current="page"] { color: var(--warm-white); border-bottom-color: var(--capital-green); }

/* ---- page head ---------------------------------------------------------- */

.page-head { padding: 56px 0 28px; max-width: 62ch; }
.page-head h1 { margin-bottom: 14px; }

/* ---- unlock ------------------------------------------------------------- */

.unlock { max-width: 27rem; margin: 0 auto; padding: 68px 0 80px; }
.unlock-brand { display: flex; align-items: baseline; gap: 7px; margin-bottom: 34px; }
.unlock-brand .wordmark-sub { color: var(--brass); }
.unlock-title { margin-bottom: 14px; }
.unlock-lede { color: var(--charcoal-72); margin-bottom: 26px; }

.unlock-form { display: flex; flex-direction: column; gap: 18px; margin-bottom: 22px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--charcoal-55);
}
.input {
  font-family: var(--body); font-size: 1rem; color: var(--charcoal);
  background: var(--paper); border: 1px solid var(--charcoal-14);
  border-radius: 2px; padding: 11px 12px; width: 100%;
}
.input:focus { border-color: var(--capital-green); }
.input-code { font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }

.unlock-note { font-size: 0.88rem; color: var(--charcoal-55); }

.alert {
  background: var(--green-tint); border-left: 3px solid var(--brass);
  padding: 12px 14px; font-size: 0.93rem; margin-bottom: 20px;
}

/* ---- buttons ------------------------------------------------------------ */

.btn {
  font-family: var(--body); font-size: 0.95rem; font-weight: 600;
  padding: 11px 20px; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--charcoal-14); background: var(--paper); color: var(--charcoal);
  text-decoration: none; display: inline-block;
}
.btn:hover { border-color: var(--charcoal-55); }
.btn-primary { background: var(--capital-green); border-color: var(--capital-green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); }

/* ---- vault cards -------------------------------------------------------- */

.group { margin-bottom: 40px; }
.group-label {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--capital-green); font-weight: 500;
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
}
.group-label::after { content: ""; flex: 1; height: 1px; background: var(--charcoal-8); }

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.card {
  background: var(--paper); border: 1px solid var(--charcoal-8);
  padding: 20px; display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; color: inherit;
}
.card h3 { color: var(--charcoal); }
.card p { font-size: 0.93rem; color: var(--charcoal-55); margin: 0; }
.card-live { border-left: 3px solid var(--capital-green); }
.card-live:hover { border-color: var(--charcoal-14); border-left-color: var(--capital-green); background: #fff; }
.card-soon { opacity: 0.62; }
.card-status {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--charcoal-55); margin-top: auto; padding-top: 8px;
}
.card-status-live { color: var(--capital-green); }

/* ---- explainer ---------------------------------------------------------- */

.explainer { border-top: 1px solid var(--charcoal-8); border-bottom: 1px solid var(--charcoal-8); margin-bottom: 34px; }
.explainer summary {
  cursor: pointer; padding: 16px 0; font-family: var(--display);
  font-weight: 600; font-size: 1rem;
}
.explainer-body { padding-bottom: 20px; max-width: 62ch; }
.components { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 1em; }
.components dt { font-weight: 600; }
.components dd { margin: 0; color: var(--charcoal-72); }

/* ---- the model ---------------------------------------------------------- */

.scenario-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px; gap: 0 20px;
  padding-bottom: 10px; border-bottom: 1px solid var(--charcoal-14);
  position: sticky; top: 0; background: var(--warm-white); z-index: 2;
}
.scenario-col {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--charcoal-55); text-align: right;
  padding-top: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.scenario-col-ext { color: var(--brass); }

.line {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px; gap: 0 20px;
  padding: 22px 0; border-bottom: 1px solid var(--charcoal-8); align-items: start;
}
.line-head { grid-column: 1; grid-row: 1; max-width: 54ch; }
.line-inputs { grid-column: 1; grid-row: 2; margin-top: 12px; }
.line-no {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brass); display: block; margin-bottom: 3px;
}
.line-hint { font-size: 0.92rem; color: var(--charcoal-55); margin: 6px 0 0; }
.line-note { font-size: 0.9rem; color: var(--charcoal-55); font-style: italic; margin: 8px 0 0; }
.pct { font-family: var(--mono); font-size: 0.8rem; color: var(--brass); font-weight: 400; }

.line-out {
  grid-row: 1 / -1; text-align: right;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1rem; color: var(--charcoal); padding-top: 2px;
}
.line-out[data-out$="-real"] { grid-column: 2; }
.line-out-ext { grid-column: 3; color: var(--charcoal-55); }

.line-computed { background: rgba(17, 20, 17, 0.022); }
.line-computed .line-out { font-weight: 500; }

.line-total { border-bottom: 2px solid var(--charcoal); background: transparent; }
.line-total h2 { font-size: 1.15rem; font-weight: 800; }
.line-total .line-out { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
.line-total .line-out-ext { color: var(--brass); }

/* Extra bottom room for the absolutely-positioned info links below. */
.line-inputs-multi {
  display: flex; flex-wrap: wrap; gap: 16px 22px;
  align-items: flex-end; padding-bottom: 24px;
}
/* The info link is taken out of flow so a field that has one still baselines
   with the fields that don't. In flow it made its own column taller and
   flex-end pushed that input up out of line with its neighbours. */
.sub { display: flex; flex-direction: column; gap: 5px; position: relative; }
.sub .info { position: absolute; top: 100%; left: 0; margin-top: 5px; white-space: nowrap; }
.with-unit { display: flex; align-items: center; gap: 8px; }
.unit { font-family: var(--mono); font-size: 0.78rem; color: var(--charcoal-55); }
.input-money { max-width: 190px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.input-months { max-width: 84px; font-family: var(--mono); text-align: right; }

.info {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--body); font-size: 0.8rem; color: var(--green-dark);
  text-decoration: underline; text-underline-offset: 2px; align-self: flex-start;
}
.info-panel {
  grid-column: 1 / -1; background: var(--green-tint); border-left: 2px solid var(--capital-green);
  padding: 13px 16px; font-size: 0.9rem; margin: 12px 0 0; max-width: 62ch; width: 100%;
}

/* ---- targets ------------------------------------------------------------ */

.targets { margin: 40px 0; padding: 28px; background: var(--charcoal); color: var(--warm-white); }
.targets h2 { color: var(--warm-white); margin-bottom: 20px; font-weight: 800; }
.target-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 22px; }
.target-label {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--champagne); margin: 0 0 6px;
}
.target-value {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 0 0 8px; line-height: 1.1;
}
.target-approval .target-value { color: #A8D98F; }
.target-note { font-size: 0.9rem; color: rgba(244, 243, 238, 0.66); margin: 0; }
.targets-body { color: rgba(244, 243, 238, 0.82); font-size: 0.95rem; max-width: 66ch; }
.targets-ext {
  border-left: 2px solid var(--brass); padding-left: 14px;
  color: var(--champagne); margin-top: 18px;
}

/* ---- closing ------------------------------------------------------------ */

.closing { max-width: 62ch; padding-bottom: 20px; }
.closing-emphasis { font-family: var(--display); font-weight: 800; font-size: 1.1rem; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.saved-note { font-size: 0.87rem; color: var(--green-dark); margin-top: 10px; min-height: 1.2em; }

/* ---- footer ------------------------------------------------------------- */

.footer { border-top: 1px solid var(--charcoal-8); margin-top: 56px; padding: 26px 0 44px; }
.disclaimer { font-size: 0.85rem; color: var(--charcoal-55); max-width: 70ch; }
.privacy { font-size: 0.85rem; color: var(--charcoal-55); margin: 0; }

.print-footer { display: none; }

/* ---- responsive --------------------------------------------------------- */

@media (max-width: 820px) {
  .cards, .target-pair { grid-template-columns: 1fr; }

  .scenario-head { display: none; }

  .line { grid-template-columns: 1fr; gap: 0; }
  .line-head, .line-inputs { grid-column: 1; grid-row: auto; }
  /* The desktop column assignments are attribute selectors, so they outrank a
     bare .line-out reset and would leave phantom grid columns 2 and 3 here —
     which scrolls the whole page sideways. Match their specificity. */
  .line-out,
  .line-out[data-out$="-real"],
  .line-out-ext {
    grid-column: 1; grid-row: auto; text-align: left; margin-top: 14px;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 16px; border-top: 1px dashed var(--charcoal-8); padding-top: 8px;
    min-width: 0;
  }
  /* On a phone the column headers are gone, so each figure names itself. */
  .line-out[data-out$="-real"]::before { content: "Realistic"; }
  .line-out-ext::before { content: "Twice as long"; }
  .line-out::before {
    font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--charcoal-55);
    white-space: nowrap; flex: none;
  }
  /* The total row keeps its emphasis but must not let the label wrap. */
  .line-total .line-out { font-size: 1.25rem; }
  .line-inputs-multi { padding-bottom: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- print -------------------------------------------------------------- */

@page { margin: 18mm 16mm 24mm; }

@media print {
  body { background: #fff; font-size: 11pt; }
  .masthead, .nav, .footer, .actions, .saved-note, .info, .info-panel,
  .card-soon, .explainer { display: none !important; }

  .shell { max-width: none; padding: 0; }
  .page-head { padding: 0 0 12pt; }

  .line { break-inside: avoid; padding: 10pt 0; border-bottom: 0.5pt solid #ccc; }
  .line-hint, .line-note { display: none; }
  .scenario-head { position: static; border-bottom: 1pt solid #111; }

  .input {
    border: 0; border-bottom: 0.5pt solid #999; background: transparent;
    padding: 2pt 0; font-size: 11pt;
  }

  .targets { background: transparent; color: #111; border: 1pt solid #111; padding: 12pt; }
  .targets h2, .target-value { color: #111; }
  .target-approval .target-value { color: #111; }
  .target-note, .targets-body { color: #333; }
  .targets-ext { color: #111; border-left-color: #999; }

  .print-footer {
    display: block; position: fixed; bottom: 0; left: 0; right: 0;
    font-size: 7.5pt; color: #555; border-top: 0.5pt solid #ccc;
    padding-top: 4pt; text-align: center;
  }
}

/* ==========================================================================
   Application Sequence
   ========================================================================== */

.handoff { margin: 0 0 30px; }
.handoff-live {
  background: var(--charcoal); color: var(--warm-white);
  padding: 20px 24px; display: flex; flex-direction: column; gap: 4px;
}
.handoff-label {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--champagne); margin: 0;
}
.handoff-value {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 1.9rem);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 0; color: #A8D98F;
}
.handoff-live .handoff-note { font-size: 0.88rem; color: rgba(244,243,238,0.66); margin: 0; }
.handoff-missing {
  background: var(--paper); border: 1px solid var(--charcoal-14);
  border-left: 3px solid var(--brass); padding: 20px 24px; margin-top: 10px;
}
.handoff-missing .handoff-label { color: var(--brass); margin-bottom: 8px; }
.handoff-missing .handoff-note { font-size: 0.93rem; color: var(--charcoal-72); margin: 0 0 16px; max-width: 60ch; }
.handoff-actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; }
.handoff-manual { display: flex; flex-direction: column; gap: 5px; }

.step { padding: 26px 0; border-top: 1px solid var(--charcoal-8); }
.step h2 { margin-bottom: 10px; }
.step-no {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brass); display: block;
  font-weight: 400; margin-bottom: 3px;
}
.step-hint { font-size: 0.95rem; color: var(--charcoal-72); max-width: 64ch; }
.caution {
  font-size: 0.88rem; color: var(--charcoal-55); border-left: 2px solid var(--charcoal-14);
  padding-left: 13px; max-width: 64ch;
}

.placeholder-panel {
  border: 1px dashed var(--charcoal-14); padding: 15px 18px; margin: 18px 0;
  max-width: 64ch; background: var(--paper);
}
.placeholder-label {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brass); margin: 0 0 5px;
}
.placeholder-panel p:last-child { font-size: 0.9rem; color: var(--charcoal-55); margin: 0; }

/* Wide content scrolls inside its own container, never the page body. */
.table-scroll { overflow-x: auto; margin: 18px 0 14px; }
.apps { border-collapse: collapse; width: 100%; min-width: 900px; }
/* Positioned so an .sr-only label inside resolves its containing block HERE,
   inside the scroll container. Without this its containing block is the
   initial one, and the invisible label drags the whole page sideways on a
   phone — a real horizontal-scroll bug caused by an accessibility label. */
.apps th {
  position: relative;
  text-align: left; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--charcoal-55);
  font-weight: 400; padding: 0 8px 8px; border-bottom: 1px solid var(--charcoal-14);
}
.apps td { padding: 5px 8px; vertical-align: middle; }
.apps tr + tr td { border-top: 1px solid var(--charcoal-8); }
.apps .input { padding: 7px 9px; font-size: 0.9rem; }
.apps select.input { min-width: 132px; }
.col-seq {
  width: 32px; font-family: var(--mono); font-size: 0.8rem;
  color: var(--charcoal-55); text-align: right;
}
.col-num { text-align: right; }
.col-num .input { text-align: right; }
.col-x { width: 34px; }
.row-x {
  background: none; border: 0; cursor: pointer; font-size: 1.2rem; line-height: 1;
  color: var(--charcoal-55); padding: 4px 6px;
}
.row-x:hover { color: #8B2F2F; }

.checks { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.check {
  font-size: 0.93rem; padding-left: 26px; position: relative; max-width: 66ch;
}
.check::before {
  position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 0.85rem;
}
.check-pass::before { content: "✓"; color: var(--capital-green); }
.check-flag::before { content: "!"; color: var(--brass); font-weight: 600; }
.check-info::before { content: "·"; color: var(--charcoal-55); }
.check-flag { color: var(--charcoal); }
.check-pass, .check-info { color: var(--charcoal-72); }

/* The application-day sheet exists only on paper. */
.day-sheet { display: none; }

@media print {
  .day-sheet { display: block; break-before: page; }
  .day-sheet h2 { margin-bottom: 10pt; }
  .day-table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .day-table th, .day-table td {
    border: 0.5pt solid #999; padding: 7pt 5pt; text-align: left; vertical-align: top;
  }
  .day-table th { font-size: 8pt; text-transform: uppercase; letter-spacing: 0.06em; }
  /* Room to write the outcome in by hand on the day. */
  .day-table td:nth-child(n+5) { min-width: 70pt; height: 26pt; }

  .table-scroll, .step > .btn, .placeholder-panel, .handoff-missing, .caution { display: none !important; }
  .step { border-top: 0; padding: 8pt 0; break-inside: avoid; }
  .handoff-live { background: transparent; color: #111; border: 1pt solid #111; padding: 10pt; }
  .handoff-live .handoff-label, .handoff-value, .handoff-live .handoff-note { color: #111; }
}

@media (max-width: 820px) {
  .handoff-actions { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Assessments, reference, tracker
   ========================================================================== */

/* Nav scrolls sideways in its own box rather than wrapping to three lines. */
.nav { overflow-x: auto; max-width: 100%; scrollbar-width: thin; }
.nav a { white-space: nowrap; flex: none; }

.vault-note { font-size: 0.9rem; color: var(--charcoal-55); margin-top: 8px; }

/* ---- questions ---------------------------------------------------------- */

.assess { margin: 0; padding: 0; border: 0; }
.q {
  border: 0; border-top: 1px solid var(--charcoal-8);
  margin: 0; padding: 26px 0; max-width: 66ch;
}
.q legend {
  font-family: var(--display); font-weight: 800; font-size: 1.12rem;
  letter-spacing: -0.015em; padding: 0; color: var(--charcoal);
}
.q-flag {
  display: block; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass);
  margin-bottom: 5px;
}
.q-ask { font-size: 1rem; color: var(--charcoal); margin: 8px 0 0; }
.q-hint { font-size: 0.93rem; color: var(--charcoal-55); margin: 8px 0 0; }
.q-source {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--charcoal-55); margin: 12px 0 0;
}
.q-voice {
  margin: 14px 0 0; padding: 0 0 0 16px; border-left: 2px solid var(--brass);
  font-size: 0.94rem; color: var(--charcoal-72); font-style: italic;
}
.q-voice span { display: block; margin-top: 10px; font-style: normal; color: var(--charcoal); }

.q-choices { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.choice {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--charcoal-14); background: var(--paper);
  padding: 9px 16px; border-radius: 2px; font-size: 0.95rem;
}
.choice:hover { border-color: var(--charcoal-55); }
.choice input { margin: 0; accent-color: var(--capital-green); }
.choice:has(input:checked) {
  border-color: var(--capital-green); background: var(--green-tint); font-weight: 600;
}
.choice:has(input:focus-visible) { outline: 2px solid var(--capital-green); outline-offset: 2px; }
.q-answered legend { color: var(--charcoal-72); }

.pull-quotes {
  margin: 30px 0; padding: 20px 24px; background: var(--paper);
  border-left: 3px solid var(--brass); max-width: 66ch;
}
.pull-quotes p { font-size: 0.98rem; color: var(--charcoal-72); }

/* ---- results ------------------------------------------------------------ */

.result { margin: 34px 0; padding: 26px 28px; background: var(--charcoal); color: var(--warm-white); }
.result h2 { color: var(--warm-white); font-weight: 800; margin-bottom: 18px; }
.result-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; }
.result-item {
  display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid rgba(244,243,238,0.12); font-size: 0.94rem;
}
.result-q { color: rgba(244,243,238,0.82); }
.result-a {
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--champagne); flex: none;
}
.result-item-flag .result-a, .result-item-notyet .result-a { color: #E8A87C; }
.result-note { font-size: 0.95rem; color: rgba(244,243,238,0.82); max-width: 66ch; margin: 0; }

.result-band {
  font-family: var(--display); font-weight: 800; font-size: 1.16rem;
  line-height: 1.4; margin: 0 0 20px; max-width: 60ch;
}
.band-clear { color: #A8D98F; }
.band-some  { color: var(--champagne); }
.band-many  { color: #E8A87C; }

/* ---- reference ---------------------------------------------------------- */

.finder { margin-bottom: 24px; max-width: 26rem; }
.finder-count {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--charcoal-55); margin: 7px 0 0; min-height: 1em;
}
.ref-group { margin-bottom: 30px; }
.ref { border-bottom: 1px solid var(--charcoal-8); }
.ref summary {
  cursor: pointer; padding: 15px 0; font-family: var(--display);
  font-weight: 600; font-size: 1rem; line-height: 1.35;
}
.ref-key summary { color: var(--charcoal); }
.ref-key { border-left: 3px solid var(--brass); padding-left: 14px; }
.ref-body { padding: 0 0 20px; max-width: 64ch; }
.ref-body p { font-size: 0.95rem; color: var(--charcoal-72); }
.ref-body p strong { color: var(--charcoal); }
.ref mark { background: var(--green-tint); color: inherit; padding: 0 2px; }
.six { display: grid; grid-template-columns: 1fr; gap: 4px 0; margin: 0 0 16px; }
.six dt { font-weight: 600; margin-top: 12px; }
.six dd { margin: 0; font-size: 0.95rem; color: var(--charcoal-72); }
.no-results { color: var(--charcoal-55); font-size: 0.95rem; padding: 20px 0; }

/* ---- tracker ------------------------------------------------------------ */

.tracker-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 6px; }
.tracker-note { width: 100%; font-size: 0.88rem; color: var(--charcoal-55); margin: 8px 0 0; }
.fields {
  font-family: var(--mono); font-size: 0.85rem; line-height: 2;
  color: var(--charcoal-72); max-width: 64ch;
}
.moments { padding-left: 1.2em; max-width: 64ch; }
.moments li { margin-bottom: 10px; color: var(--charcoal-72); font-size: 0.96rem; }
.moments strong { color: var(--charcoal); }

/* ---- print -------------------------------------------------------------- */

@media print {
  .q { break-inside: avoid; padding: 9pt 0; }
  .q-choices, .q-source, .q-voice, .pull-quotes, .finder, .placeholder-panel { display: none !important; }
  .result { background: transparent; color: #111; border: 1pt solid #111; padding: 12pt; }
  .result h2, .result-q, .result-note, .result-band { color: #111 !important; }
  .result-a { color: #111; font-weight: 600; }
  .result-item { border-bottom: 0.5pt solid #ccc; }
  /* The reference prints as the one-pager: every section open, chrome gone. */
  .ref { border-bottom: 0.5pt solid #ccc; break-inside: avoid; }
  .ref[hidden] { display: block !important; }
  .ref summary { list-style: none; font-size: 10.5pt; padding: 6pt 0 2pt; }
  .ref-body { padding-bottom: 8pt; }
  .tracker-links, .moments { break-inside: avoid; }
}