/* The questionnaire — storybook pages, not form steps.
   Ported from "Personalise Santa Letter.dc.html". Desktop: questions left,
   live preview in a sticky right rail. Mobile (<=990px): the rail becomes a
   bottom sheet behind a "Peek at the letter" button, styled ink-on-parchment
   rather than the rail's cream-on-dark. */

.q { max-width: 1200px; margin: 0 auto; padding: 122px 24px 90px;
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 26px; align-items: start; }
/* Every child is placed explicitly. .q__keep sets `grid-column: 1`, which puts
   it in row 2 — and that advances the auto-placement cursor, so an unplaced
   .q__rail landed in row 2 of column 2, level with the keep link, leaving a
   tall dead gap under the form. The rail must span both rows of column 2. */
.q__paper { grid-column: 1; grid-row: 1; }
.q__rail  { grid-column: 2; grid-row: 1 / span 2; }

/* ---- The paper ---------------------------------------------------------- */
.q__paper { position: relative; border-radius: var(--radius-cta); padding: 40px 36px 32px;
  box-shadow: 0 20px 46px -26px rgba(0,0,0,.6); overflow: hidden; }
.q__paper > h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin-bottom: 6px; }
.q__eyebrow { font-size: .6875rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--postbox); margin: 0 0 10px; }

/* Folded page corner carrying the progress marker. */
.q__corner { position: absolute; top: 0; right: 0; width: 118px; height: 118px;
  background: linear-gradient(225deg, rgba(94,74,14,.16) 0 50%, transparent 50%);
  font-size: .625rem; letter-spacing: .12em; color: var(--ink-faint);
  text-align: right; padding: 12px 12px 0 0; transform-origin: top right; }

.q__progress { display: flex; gap: 6px; list-style: none; margin: 18px 0 26px; padding: 0; }
.q__progress li { width: 34px; height: 4px; border-radius: 2px; background: rgba(42,36,22,.16); }
.q__progress .is-done { background: var(--forest); }
.q__progress .is-now { background: var(--gold); }

.q__lede { color: var(--ink-muted); margin: 0 0 22px; }
.q__nudge { background: rgba(201,162,39,.14); border-left: 3px solid var(--gold);
  border-radius: 6px; padding: 12px 14px; margin: 0 0 22px; font-size: .9375rem; }

.q__field { margin-bottom: 24px; }
.q__field .field__label em { font-style: normal; color: var(--ink-faint); font-weight: 400; }
.q__cards { display: grid; gap: 10px; margin-top: 4px; }
.q__cards .radio-card { cursor: pointer; }
.q__cards .radio-card.is-on { border-color: var(--gold); background: rgba(201,162,39,.13); }
.q__cards input { position: absolute; opacity: 0; pointer-events: none; }
.q__cards .radio-card:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: 2px; }

.q__nav { display: flex; gap: 12px; align-items: center; margin-top: 30px; flex-wrap: wrap; }
.q__nav .btn--primary { margin-left: auto; }
.q__saved { font-size: .8125rem; color: var(--ink-faint); margin-top: 12px; }

/* ---- Read-back ---------------------------------------------------------- */
.q__recap { border-top: 1px solid rgba(42,36,22,.16); padding-top: 14px; margin-bottom: 18px; }
.q__recap h2 { font-size: 1.0625rem; font-family: var(--font-body); font-weight: 700;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.q__recap h2 a { font-size: .875rem; font-weight: 600; }
.q__recap dl { margin: 10px 0 0; }
.q__recap dl > div { display: flex; gap: 14px; justify-content: space-between;
  padding: 5px 0; font-size: .9375rem; }
.q__recap dt { color: var(--ink-muted); flex: 1; }
.q__recap dd { margin: 0; font-weight: 600; text-align: right; max-width: 55%; }
.q__total { display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-display); border-top: 2px solid rgba(42,36,22,.2);
  padding-top: 14px; margin: 8px 0 26px; }
.q__total b { font-size: 1.625rem; }

/* ---- Preview rail ------------------------------------------------------- */
.q__rail { position: sticky; top: 96px; }
.q__preview { background: rgba(0,0,0,.2); border: 1px solid rgba(234,217,143,.2);
  border-radius: var(--radius-cta); padding: 14px; }
.q__tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.q__tabs button { flex: 1; min-height: 40px; padding: 8px 6px; border: none; cursor: pointer;
  border-radius: var(--radius-pill); background: rgba(247,241,227,.1);
  color: var(--gold-pale); font-family: var(--font-body); font-size: .875rem; font-weight: 600; }
.q__tabs button[aria-selected="true"] { background: var(--gold); color: var(--ink); }

.q__pane { background: var(--parchment-letter); color: var(--ink);
  border-radius: 8px; padding: 22px 20px; max-height: 62vh; overflow-y: auto; }
.lt-head { text-align: left; border-bottom: 2px solid var(--postbox); padding-bottom: 8px; }
.lt-crest { color: var(--gold); font-size: 1rem; }
.lt-head b { display: block; font-size: .6875rem; letter-spacing: .16em; color: var(--postbox); }
.lt-head em { font-size: .6875rem; color: var(--ink-muted); font-style: italic; }
/* Same reason as print: an unbroken run of characters otherwise widens the
   pane and puts a horizontal scrollbar under the letter, which is the buyer's
   first sign that something is wrong -- and by then it looks like our bug
   rather than their input. */
.lt-body { font-size: .9375rem; line-height: 1.6; overflow-wrap: break-word; }
.lt-body p { margin: 10px 0 0; }
.lt-greet { font-size: 1.75rem !important; margin-top: 14px !important; }
.lt-signoff { margin-top: 16px !important; }
.lt-sign { font-size: 2rem; color: var(--postbox); margin-top: 2px !important; }
.lt-foot { font-size: .5625rem; letter-spacing: .14em; color: var(--ink-faint);
  border-top: 1px solid rgba(42,36,22,.15); margin-top: 18px; padding-top: 8px; }

/* Envelope tab */
.env { background: var(--envelope-kraft); border-radius: 6px; padding: 22px;
  min-height: 200px; position: relative; box-shadow: inset 0 0 0 1px rgba(94,74,14,.16); }
.env__stamp { position: absolute; top: 14px; right: 14px; width: 52px; height: 62px;
  background: var(--parchment-input); border: 1px dashed rgba(142,43,32,.5);
  display: grid; place-items: center; text-align: center;
  font-size: .5rem; font-weight: 700; letter-spacing: .1em; color: var(--postbox); }
.env__pm { position: absolute; top: 26px; right: 76px; font-size: .5625rem; font-weight: 700;
  letter-spacing: .12em; color: rgba(35,48,91,.6); border: 1.5px solid rgba(35,48,91,.5);
  border-radius: 999px; padding: 4px 8px; transform: rotate(-8deg); mix-blend-mode: multiply; }
.env__lines { display: block; margin-top: 72px; font-style: normal; line-height: 1.7; }
.env__lines span { display: block; }
.env__lines span:first-child { font-family: var(--font-script); font-size: 1.75rem; line-height: 1.1; }

/* Tap-page tab */
.q__pane--tap { background: none; padding: 8px 0; }
.phone { width: 224px; margin: 0 auto; background: #14181c; border-radius: var(--radius-phone);
  padding: 10px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.8); }
/* The screen draws itself from the TAP PAGE's own tokens, not this
   stylesheet's -- see partials/tap_tokens.html, included into the page for
   every look. Before this the mockup was parchment whichever look the buyer
   picked, so the picker looked broken. Defaults inline so it is still
   Snowfall if the class is missing. */
/* NO TRANSITION HERE, and that is not an oversight.
   The colours come from custom properties (partials/tap_tokens.html) that
   change when the buyer picks a different look. A transition on a property
   whose value is a var() substitution does not re-run when only the custom
   property moves: the screen kept its old colour while --ground had already
   changed, which is precisely how the picker looked broken. Both the
   shorthand and the longhand behave that way. An instant swap is also the
   honest one -- it is a mockup, not the page itself. */
.phone__screen { background-color: var(--ground, #F7F1E3);
  border-radius: var(--radius-phone-inner);
  padding: 18px 14px; text-align: center; color: var(--ink, #1F2430); }
.phone__brand { font-size: .5rem; font-weight: 700; letter-spacing: .34em;
  color: var(--ink-soft, rgba(31,36,48,.65)); }
.phone__kicker { font-size: .5rem; font-weight: 700; letter-spacing: .18em;
  color: var(--gold-deep, #8A6F1E); margin-top: 20px; }
.phone__screen h3 { font-family: Georgia, serif; font-size: 1.0625rem; font-weight: 600;
  margin: 6px 0 0; line-height: 1.2; }
.phone__seal { width: 62px; height: 62px; margin: 20px auto 0; border-radius: 50%;
  background: var(--postbox); box-shadow: 0 0 0 4px rgba(201,162,39,.35),
    inset 0 2px 6px rgba(255,255,255,.25), inset 0 -3px 8px rgba(90,20,12,.4); position: relative; }
.phone__seal::after { content: ""; position: absolute; left: 54%; top: 50%;
  transform: translate(-50%, -50%); border-left: 15px solid var(--parchment-paper);
  border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.phone__time { font-size: .625rem; color: var(--ink-soft, rgba(31,36,48,.65)); margin-top: 16px; }
.phone__foot { font-size: .5rem; color: var(--ink-soft, rgba(31,36,48,.65)); margin-top: 22px; }
.q__caption { font-size: .8125rem; color: var(--gold-pale); text-align: center; margin-top: 12px; }

/* The look picker, under the phone it repaints.
   The cards themselves are opaque parchment tiles and need nothing: they read
   the same on the dark rail as they do on the page. Their LABEL does not --
   default ink on a dark rail is ink on dark -- so it takes the caption's
   colour here for exactly the reason the caption does, and the mobile sheet
   turns both back to ink below. */
.q__field--inpane { margin: 18px 0 0; border-top: 1px solid rgba(234,217,143,.2);
  padding-top: 16px; }
.q__field--inpane .field__label { color: var(--gold-pale); }
.q__field--inpane .field__hint { color: rgba(234,217,143,.72); }
/* The chosen card, opaque.
   Everywhere else on the site a selected radio card is rgba(201,162,39,.13)
   -- 13% gold -- and it sits on parchment, so it reads as a pale gold tint.
   On the rail it sits on rgba(0,0,0,.2) over the dark theme instead, and 13%
   of anything over that is dark: the chosen look came out dark olive with the
   card's own dark ink on top of it, so the one card the buyer had picked was
   the one they could not read. This is the same colour that translucency
   produces over parchment, mixed once and stated flatly. */
.q__field--inpane .radio-card[aria-checked="true"],
.q__field--inpane .radio-card.is-on,
.q__field--inpane .radio-card:has(input:checked) { background: #F8F1DB; }

/* ---- Mobile: preview becomes a bottom sheet ---------------------------- */
.q__peek { display: none; }

@media (max-width: 990px) {
  .q { grid-template-columns: minmax(0, 1fr); padding-bottom: 96px; }
  .q__paper, .q__rail, .q__keep { grid-column: 1; grid-row: auto; }
  .q__paper { padding: 32px 20px 26px; }

  /* Ink-on-parchment in the sheet — deliberately NOT the rail's cream-on-dark
     (design handoff calls this out explicitly). */
  .q__rail { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    transform: translateY(100%); transition: transform 320ms ease; max-height: 86vh; }
  .q__rail.is-open { transform: none; }
  /* The bottom padding clears the floating "Hide the letter" button, which is
     fixed 18px off the bottom of the VIEWPORT and therefore sits on top of the
     last thing in the sheet. That was harmless while the sheet ended in a
     caption. It is not harmless now the look picker lives down here: the
     button landed squarely on the cards, which is the same complaint the
     picker moved to answer. */
  .q__preview { background: var(--parchment-page); border: none;
    border-radius: 18px 18px 0 0; padding: 18px 16px 84px;
    box-shadow: 0 -18px 40px -14px rgba(0,0,0,.6); max-height: 86vh; overflow-y: auto; }
  .q__tabs button { background: rgba(42,36,22,.1); color: var(--ink); }
  .q__caption { color: var(--ink-muted); }
  .q__field--inpane { border-top-color: rgba(42,36,22,.18); }
  .q__field--inpane .field__label { color: var(--ink); }
  .q__field--inpane .field__hint { color: var(--ink-muted); }
  /* The sheet IS parchment, so the ordinary translucent tint is
     right again here and the opaque override would be a second,
     slightly different gold sitting beside the real one. */
  .q__field--inpane .radio-card[aria-checked="true"],
  .q__field--inpane .radio-card.is-on,
  .q__field--inpane .radio-card:has(input:checked) {
    background: rgba(201,162,39,.13); }
  .q__pane { max-height: none; }

  .q__peek { display: inline-flex; position: fixed; left: 50%; bottom: 18px; z-index: 90;
    transform: translateX(-50%); background: var(--forest); box-shadow: 0 6px 20px -6px rgba(0,0,0,.7); }
  .q__peek:hover { filter: brightness(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .q__rail { transition: none; }
}

/* Save and come back later — deliberately quiet: it sits beside "Next page"
   and must never compete with it. */
.q__keep { grid-column: 1; grid-row: 2; margin-top: -14px; }
.q__keeplink { background: none; border: none; padding: 6px 0; cursor: pointer;
  font-family: var(--font-body); font-size: .9375rem; color: var(--gold-pale);
  text-decoration: underline; text-underline-offset: 3px; min-height: 0; }
.q__keeplink:hover { color: var(--parchment-paper); }
@media (max-width: 990px) { .q__keep { margin-bottom: 8px; } }

/* The character counter. Present from the first keystroke, so it reads as a
   budget rather than as an error that appears when you hit the wall. */
.field__counter { font-variant-numeric: tabular-nums; }
.field__counter.is-near { color: #8a6d1f; }
.field__counter.is-full { color: var(--postbox); font-weight: 700; }

/* The message picker: these ARE the words, not options about them, so they
   read as quotations on slips of paper -- serif, italic, a hanging mark, a
   dashed edge -- rather than another row of choice cards identical to the
   mode picker above (founder, 26 Aug). */
.q__cards--quotes .radio-card {
  background: transparent;
  border-style: dashed;
}
.q__cards--quotes .radio-card.is-on,
.q__cards--quotes .radio-card:has(input:checked),
.q__cards--quotes .radio-card[aria-checked="true"] { border-style: solid; }
.q__cards--quotes .radio-card__body strong {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400; font-style: italic;
  font-size: 1.0625rem; line-height: 1.5;
}
.q__cards--quotes .radio-card__body strong::before { content: "\201C"; }
.q__cards--quotes .radio-card__body strong::after { content: "\201D"; }