/* Our Future — only what base.css does not already give us: the chapter chrome (tinted chip + gradient
   progress bar), the three answer inputs, the two-colour reveal pair, the verdict chips, and the board.
   Everything else (buttons, cards, scene column, HUD, modal) comes from base.css. */

/* ---------- START preview ---------- */
.fu-preview { display: flex; flex-direction: column; gap: 14px; align-items: center; width: 78%; }
.fu-preview__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.fu-preview__card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--r8); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; text-align: left; box-shadow: var(--shadow-1); }
.fu-preview__card.pink { border-color: var(--pink); background: linear-gradient(160deg, var(--pink-tint), var(--paper-raised) 70%); }
.fu-preview__card.blue { border-color: var(--blue); background: linear-gradient(160deg, var(--blue-tint), var(--paper-raised) 70%); }
.fu-preview__card .cap { font: 700 10px var(--mono); letter-spacing: .16em; color: var(--ink-soft); }
.fu-preview__card .v { font-weight: 700; font-size: 14px; }
.fu-preview__chip { background: var(--yellow-tint); color: var(--on-yellow-tint); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 13px; }

/* ---------- PACK: the briefing ---------- */
.fu-brief { width: min(760px, calc(100vw - 32px)); min-height: calc(100svh - var(--bar-h, 0px)); justify-content: center; gap: 18px; }
.fu-chapters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: 100%; }
.fu-chapter {
  border: 1px solid var(--line); border-radius: var(--r8); box-shadow: var(--shadow-1);
  padding: 16px 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
}
.fu-chapter .emoji { font-size: 26px; line-height: 1.2; }
.fu-chapter .t { font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
.fu-chapter .d { font-size: 13px; color: var(--ink-soft); }
.fu-chapter .n { font: 12px var(--mono); color: var(--ink-soft); }
.fu-chapter .v { font: 700 12px var(--mono); letter-spacing: .02em; }
.fu-chapter[data-verdict="match"] .v { color: var(--green); }
.fu-chapter[data-verdict="close"] .v { color: #1E5FBF; }
.fu-chapter[data-verdict="talk"] .v { color: #B4633A; }
.fu-chapter[data-verdict="blank"] .v { color: var(--ink-faint); }
.fu-start { min-width: 220px; }

/* ---------- the chapter chrome shared by QUESTION and REVEAL ---------- */
.fu-head { display: flex; align-items: center; gap: 12px; width: 100%; }
.fu-chip-ch { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: 14px; flex: none; }
.fu-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.fu-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--grad); transition: width .35s ease; }
.fu-count { font: 700 13px var(--mono); color: var(--ink-soft); letter-spacing: .06em; flex: none; }
.fu-timer { font: 700 15px var(--mono); letter-spacing: .04em; flex: none; }
.fu-timer.is-low { color: var(--red); }

/* ---------- QUESTION ---------- */
.fu-play { min-height: calc(100svh - var(--bar-h, 0px)); justify-content: center; gap: 16px; }
.fu-q { max-width: 24ch; }
.fu-hint { font-size: 14px; color: var(--ink-soft); margin-top: -6px; }
.fu-options { gap: 12px; }
.fu-option { display: flex; align-items: center; gap: 10px; }
.fu-option .e { font-size: 20px; line-height: 1; flex: none; }
.fu-option .l { font-weight: 700; font-size: 15px; line-height: 1.25; }
.fu-option[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.fu-number-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(360px, 100%); }
.fu-number { width: 100%; height: 60px; font: 800 26px/1 var(--mono); letter-spacing: .02em; }
.fu-number::-webkit-outer-spin-button, .fu-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fu-number { -moz-appearance: textfield; appearance: textfield; }
.fu-unit { font: 12px var(--mono); color: var(--ink-soft); letter-spacing: .06em; text-transform: uppercase; }
.fu-text { width: 100%; text-align: center; font-size: 17px; }
.fu-secret { color: var(--ink-faint); }

/* ---------- REVEAL ---------- */
.fu-reveal { min-height: calc(100svh - var(--bar-h, 0px)); justify-content: center; gap: 16px; }
.fu-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.fu-said { text-align: left; padding: 14px 16px; border-radius: var(--r8); border: 1px solid var(--line); background: var(--paper-raised); display: flex; flex-direction: column; gap: 6px; }
.fu-said[data-color="pink"] { border-color: var(--pink); background: linear-gradient(160deg, var(--pink-tint) 0%, var(--paper-raised) 75%); }
.fu-said[data-color="blue"] { border-color: var(--blue); background: linear-gradient(160deg, var(--blue-tint) 0%, var(--paper-raised) 75%); }
.fu-said__cap { font: 700 11px var(--mono); letter-spacing: .16em; color: var(--ink-soft); }
.fu-said__v { font-size: 17px; font-weight: 700; word-break: break-word; }
.fu-said__v.is-quiet { color: var(--ink-faint); font-weight: 500; font-style: italic; }
.fu-verdict { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; font-weight: 800; font-size: 15px; border: 1px solid transparent; }
/* three verdicts, three warm colours — none of them is red, because none of them is a failure */
.fu-verdict--match { background: var(--green-tint); color: var(--on-green-tint); }
.fu-verdict--close { background: var(--blue-tint); color: var(--on-blue-tint); }
.fu-verdict--talk { background: var(--yellow-tint); color: var(--on-yellow-tint); }
.fu-verdict--blank { background: var(--paper-raised); color: var(--ink-soft); border-color: var(--line); }
.fu-beat { color: var(--ink-soft); font-size: 15px; max-width: 44ch; margin: 0; text-wrap: balance; }

/* ---------- BOARD ---------- */
.fu-board { width: min(760px, calc(100vw - 32px)); padding-top: 40px; gap: 18px; }
.fu-band__emoji { font-size: 52px; line-height: 1; }
.fu-band__title { text-wrap: balance; }
.fu-same { font: 700 13px var(--mono); letter-spacing: .04em; color: var(--ink-soft); text-wrap: balance; }
.fu-chapters--read { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fu-chapters--read .fu-chapter { min-height: 0; padding: 14px 10px; }
.fu-startwith { text-wrap: balance; }
.fu-reading { color: var(--ink-soft); }
.fu-commentary { width: 100%; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.fu-note { border-left: 3px solid var(--line); padding-left: 14px; }
.fu-note__h { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.fu-note__p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }

/* The gate is the brightest card on the page — pink at one corner, blue at the other, the two of
   them meeting over the thing they would keep. That was three literal pastels, so at night it went
   on being a white card with near-white text on it. Same three-corner wash, lamplit. */
:root { --fu-gate-wash: linear-gradient(120deg, #FFF1F5 0%, #FFFFFF 45%, #EDF4FF 100%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --fu-gate-wash: linear-gradient(120deg, #2C1F26 0%, #26242D 45%, #1D2635 100%); }
}
:root[data-theme="dark"] { --fu-gate-wash: linear-gradient(120deg, #2C1F26 0%, #26242D 45%, #1D2635 100%); }
.fu-gate {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r8); box-shadow: var(--shadow-1);
  background: var(--fu-gate-wash);
  padding: 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.fu-gate__art { font-size: 40px; line-height: 1; }
.fu-gate__list { margin: 0; padding: 0 0 0 20px; text-align: left; color: var(--ink-soft); font-size: 14px; display: flex; flex-direction: column; gap: 4px; align-self: center; max-width: 46ch; }
.fu-gate__cta { min-width: 260px; margin-top: 4px; }
.fu-gate__fine { color: var(--ink-soft); font-size: 13px; }  /* --ink-faint is 4.35:1 on the wash */
.fu-gate__done { display: flex; flex-direction: column; gap: 4px; }
.fu-gate__done .t { font-weight: 800; color: var(--green); }
.fu-print { align-self: center; }
.plan-card--board { grid-column: 1 / -1; }

.fu-recap { width: 100%; display: flex; flex-direction: column; gap: 20px; text-align: left; }
.fu-recap__h { font-weight: 800; font-size: 15px; padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.fu-recap__row { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; }
.fu-recap__q { font-weight: 700; font-size: 15px; }
.fu-recap__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fu-recap__a { border-radius: var(--r4); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.fu-recap__a[data-color="pink"] { background: var(--pink-tint); }
.fu-recap__a[data-color="blue"] { background: var(--blue-tint); }
.fu-recap__a .n { font: 700 10px var(--mono); letter-spacing: .14em; color: var(--ink-soft); }
.fu-recap__a .v { font-size: 14px; font-weight: 600; word-break: break-word; }
.fu-recap__a .v.is-quiet { color: var(--ink-soft); font-weight: 400; font-style: italic; }
.fu-recap__chip { font: 700 12px var(--mono); letter-spacing: .02em; color: var(--ink-soft); }
.fu-recap__chip[data-verdict="match"] { color: var(--green); }
.fu-recap__chip[data-verdict="close"] { color: #1E5FBF; }
.fu-recap__chip[data-verdict="talk"] { color: #B4633A; }

/* ---------- phones ---------- */
@media (max-width: 720px) {
  .fu-chapters, .fu-chapters--read { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fu-options { grid-template-columns: 1fr; }
  .fu-pair { grid-template-columns: 1fr; }
  .fu-recap__pair { grid-template-columns: 1fr; }
  .fu-head { flex-wrap: wrap; row-gap: 8px; }
  .fu-bar { order: 3; flex-basis: 100%; }
  .fu-q { max-width: none; }
}

/* ---------- the board itself (phase 7c) ---------- */
/* The canvas is painted at 1240 × 1754 and shown at whatever width there is: a keepsake has a
   fixed geometry, and letting CSS reflow it would make the thing on screen a different picture
   from the file that downloads. Everything below is presentation of one bitmap. */
.fu-keepsake { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 0 6px; border-top: 1px solid var(--line); }
.fu-canvas { width: min(520px, 100%); border-radius: var(--r8); overflow: hidden; box-shadow: var(--shadow-2); background: var(--paper); }
.fu-canvas__img { display: block; width: 100%; height: auto; }
.fu-painting { color: var(--ink-soft); }
.fu-keepsake__acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.fu-saved { color: var(--ink-faint); font-size: 13px; text-align: center; }

/* The printable plan. On screen it is a stack of pages; on paper each one is a page. */
.fu-plan { width: 100%; display: flex; flex-direction: column; gap: 20px; text-align: left; }
.fu-plan__page { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--r8); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.fu-plan__head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.fu-plan__eyebrow { font: 700 11px var(--mono); letter-spacing: .16em; color: var(--teal-deep, #0C6F78); }
.fu-plan__title { font-family: var(--serif); font-size: 26px; margin: 0; }
.fu-plan__who { display: flex; gap: 10px; flex-wrap: wrap; }
.fu-plan__name { font-weight: 800; }
.fu-plan__name[data-color="pink"] { color: var(--pink); }
.fu-plan__name[data-color="blue"] { color: var(--blue); }
.fu-plan__meta { font: 400 12px var(--mono); color: var(--ink-soft); }
.fu-plan__chapter { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 14px 0 2px; font-size: 17px; }
.fu-plan__chapter .v { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.fu-plan__note { flex-basis: 100%; margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); font-style: italic; }
.fu-plan__row { padding: 6px 0; border-bottom: 1px dotted var(--line); }
.fu-plan__q { font-size: 13px; color: var(--ink-soft); }
.fu-plan__a { display: flex; gap: 8px; align-items: baseline; }
.fu-plan__a .n { font: 700 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; min-width: 74px; }
.fu-plan__a[data-color="pink"] .n { color: var(--pink); }
.fu-plan__a[data-color="blue"] .n { color: var(--blue); }
.fu-plan__a[data-color="both"] .n { color: var(--teal-deep, #0C6F78); }
.fu-plan__a .v { font-family: var(--serif); font-size: 15px; }
.fu-plan__foot { font: 400 11px var(--mono); color: var(--ink-faint); text-align: right; margin-top: auto; padding-top: 10px; }

/* ---------- print: the free plan, on paper ---------- */
@media print {
  .hud, .reactions, .react-together, .nextup, .feedback-pill, .fu-print, .fu-gate__cta, .topbar, .connbar { display: none !important; }
  .fu-board { width: 100%; padding-top: 0; }
  body.has-activitybar .fu-board { padding-top: 0; }
  .fu-chapter, .fu-recap__a { box-shadow: none; }
  .fu-keepsake__acts, .fu-saved, .fu-painting { display: none !important; }
  .fu-plan__page { break-after: page; page-break-after: always; border: 0; padding: 0; background: none; }
  .fu-plan__page:last-child { break-after: auto; page-break-after: auto; }
  /* "Print the plan" means the plan and nothing else — the board above it is a picture to
     download, not four more pages of ink. The class comes off after printing (or four seconds
     later, if the dialog was cancelled), so a cancelled print never leaves the page hiding itself. */
  body.printing-plan .fu-board > *:not(.fu-keepsake) { display: none !important; }
  body.printing-plan .fu-keepsake > *:not(.fu-plan) { display: none !important; }
  body.printing-plan .fu-keepsake { border-top: 0; padding: 0; }
}

/* ---------- room for the activity bar (docs/R2-INTERFACE.md S5) ----------
   These top paddings exist to hold a scene off the top of the WINDOW. With the 44px bar there,
   the bar already does that, and the two together push the first line of a scene ~9%% of an
   iPhone's screen down before anything is said. Trimmed by 20px, so the gap a person sees is the
   gap that was designed. Nothing moves on a page with no bar. */
body.has-activitybar .fu-board { padding-top: 20px; }