/* Family Books: the story form (/start/) and the thank-you page (/thanks/). Linked after
   site.css, whose tokens, buttons and masthead it uses.

   The form is one sheet of writing paper on the linen table: a question at a time, the question
   in Libre Caslon Text, plain talk in Ysabeau Office, boxes to write in with faint ruled lines.
   Choices are drawn as on a printed order form (a ring for one answer, a square for several),
   help sits in the margin as a ruled note, and the only colour that acts is the bookcloth red.
   Phone first, from 320 px. Every class here that the scripts read or set is kept:
   form.js, form-recorder.js and form-upload.js build parts of these screens themselves. */

:root {
  --note-w: 15rem;
  --note-gap: 48px;
  --col: 38rem;          /* the question's column */
}

/* ---------- the page around the sheet ---------- */
.form-page { background: var(--linen); }
/* the waitlist and closed views: the heading sits on the table, its text in line with the sheet's.
   The sheet is sized in rem, like the column and the margin notes it holds, so it grows with the reader's text. */
.form-head { padding-bottom: clamp(28px, 4vw, 44px); }
.form-head .wrap { max-width: 70rem; padding-inline: calc(clamp(10px, 3vw, 48px) + clamp(18px, 5.4vw, 64px)); }
.form-area { padding: clamp(4px, 1.4vw, 16px) 0 clamp(56px, 7vw, 88px); }
.form-area > .wrap { max-width: 70rem; padding-inline: clamp(10px, 3vw, 48px); }
.form-js .form-area { min-height: 100vh; min-height: 100svh; }

/* the sheet: the story form, the waitlist form and the closed note all sit on one */
.story-form, .view-box {
  position: relative; background: var(--page); box-shadow: var(--shadow-page);
  padding: clamp(22px, 5.4vw, 64px) clamp(18px, 5.4vw, 64px) clamp(26px, 5vw, 52px);
}
.view-box > * { max-width: var(--col); }

/* the light footer under the form */
.foot-slim { background: var(--linen); color: var(--ink-soft); border-top: 1px solid var(--rule-strong); padding: 18px 0 22px; -webkit-font-smoothing: auto; }
.foot-slim a { color: var(--ink); }
.foot-slim a:hover { color: var(--cloth); }
.foot-slim :focus-visible { outline-color: var(--cloth); }
.foot-slim .wordmark-foot, .foot-slim .wordmark-foot:hover { color: var(--ink); }
.foot-slim .wordmark-foot .wordmark-from { color: var(--ink-soft); }
.foot-slim .wordmark { min-height: var(--target-min); justify-content: center; }
.foot-slim .wordmark-name { font-size: 1.375rem; }
.foot-slim .wordmark-from { font-size: 0.875rem; margin-top: 3px; }
.slim-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px; }
.slim-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-size: 1rem; }
.slim-links a { display: inline-flex; align-items: center; min-height: var(--target-min); min-width: var(--target-min); font-weight: 600; }
/* the address in its sentence: site.css's .foot-contact a gives it its 44px; the 12px row gap keeps that clear of
   Privacy and Terms when they wrap under it */
.slim-links .foot-contact a { display: inline-block; min-height: 0; }

/* ---------- the intro, on the sheet, with question 1 ---------- */
.form-intro { margin: 0 0 clamp(28px, 3.4vw, 40px); padding-bottom: clamp(24px, 3vw, 32px); border-bottom: 1px solid var(--rule); }
.form-crumb { font-size: 1rem; color: var(--ink-soft); margin: 0 0 14px; }
.form-crumb a {
  display: inline-block; padding-block: 11px; margin-block: -11px;
  color: var(--ink-soft); text-decoration-color: var(--rule-strong); text-underline-offset: 4px;
}
.form-crumb a:hover { color: var(--cloth); }
.form-h1 { font: 400 clamp(2.75rem, 1.95rem + 3.3vw, 4.5rem)/1.04 var(--display); letter-spacing: -0.014em; text-wrap: balance; }
/* phones: the Text cut, as for .giant in site.css, so the title isn't lighter than the question under it */
@media (max-width: 599px) { .form-h1 { font-family: var(--serif); letter-spacing: -0.01em; line-height: 1.08; } }
.form-lede { font-size: var(--text-lede); line-height: 1.5; margin: 16px 0 0; max-width: 34em; }
/* After question 1 the intro folds away; its h1 stays for screen readers. */
.form-intro.is-folded { margin: 0; padding: 0; border: 0; }
.form-intro.is-folded .form-crumb, .form-intro.is-folded .form-lede { display: none; }
.form-intro.is-folded .form-h1 {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* how it's made, and the notes, under question 1's button */
.q1-notes { max-width: var(--col); margin: 30px 0 0; padding: 20px 0 0; border-top: 1px solid var(--rule); }
.q1-made { font-size: 1rem; line-height: 1.55; color: var(--ink); margin: 0 0 14px; max-width: var(--measure); }
.form-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px 28px; }
@media (min-width: 600px) { .form-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-notes li { position: relative; padding-left: 18px; font-size: 1rem; line-height: 1.45; color: var(--ink-soft); }
/* an en dash as the marker: a drawn 1.5px bar lands on half pixels and comes out at two weights */
.form-notes li::before, .cues li::before {
  content: "\2013"; content: "\2013" / ""; position: absolute; left: 0; top: 0;
  color: var(--cloth); font-weight: 600;
}

/* ---------- the screens ---------- */
.story-form { min-width: 0; }
.screen { position: relative; min-width: 0; }
.screen + .screen { margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--rule); }   /* without script: one long sheet */
.form-js .screen + .screen { margin-top: 0; padding-top: 0; border-top: 0; }
.screen-main { display: flow-root; min-width: 0; max-width: var(--col); }
.form-js .screen.is-entering { animation: fb-screen-in 0.18s ease-out both; }
@keyframes fb-screen-in { from { opacity: 0; } to { opacity: 1; } }

/* the question's number, as a folio in the sheet's top corner (wider screens; it repeats the label) */
.q-folio { display: none; }
@media (min-width: 760px) {
  .q-folio {
    display: block; position: absolute; top: -10px; right: 0; margin: 0;
    font: 400 4rem/1 var(--display); color: var(--cloth); font-variant-numeric: lining-nums;
  }
}

/* progress: the running head above each step, three ticks for three steps */
.screen-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0 0 24px; padding-right: 72px; }
.progress-label {
  margin: 0; font: 700 var(--text-caps)/1.35 var(--sans); text-transform: uppercase; letter-spacing: var(--caps-track); color: var(--ink-soft);
}
.progress-bar {
  position: relative; flex: 1 1 150px; max-width: 260px; height: 4px; background: var(--rule-strong);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc((100% + 5px) / 3 - 5px), transparent 0 calc((100% + 5px) / 3));
  mask: repeating-linear-gradient(90deg, #000 0 calc((100% + 5px) / 3 - 5px), transparent 0 calc((100% + 5px) / 3));
}
.progress-bar > span { display: block; height: 100%; width: 0; background: var(--ink-soft); }
/* the step you are on: one tick in bookcloth, just after the finished ones */
.progress-bar > span::after {
  content: ""; position: absolute; top: 0; height: 100%; width: calc((100% + 5px) / 3 - 5px); background: var(--cloth);
}
.progress-bar > [data-fill="0"]::after { left: 0; }
.progress-bar > [data-fill="1"]::after { left: calc((100% + 5px) / 3); }
.progress-bar > [data-fill="2"]::after { left: calc((100% + 5px) * 2 / 3); }
.progress-bar > [data-fill="3"]::after { display: none; }
/* all three done: the gate and the optional screens show the ticks in bookcloth */
.progress-bar > [data-fill="3"] { background: var(--cloth); }
.screen-gate .progress-label, .screen-check .progress-label { color: var(--cloth); }
.screen-gate .progress-label::before, .screen-check .progress-label::before {
  content: ""; display: inline-block; width: 5px; height: 10px; margin: 0 10px 2px 2px;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
@media (max-width: 759px) { .screen-top { padding-right: 0; } }

/* the question */
.screen-title {
  font: 400 clamp(1.875rem, 1.2rem + 2.9vw, 2.75rem)/1.15 var(--serif); letter-spacing: -0.01em;
  margin: 0; text-wrap: balance;
}
.screen-title:focus { outline: none; }
.screen-title label { cursor: default; }
.screen-intro { font-size: clamp(1.125rem, 1.08rem + 0.2vw, 1.1875rem); line-height: 1.55; margin: 14px 0 24px; max-width: 36em; }

/* A floated legend lays out like a block; the gap under it lives inside it, because the
   next element's top margin is taken up by its clearance. */
.q-set, .sub-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.q-legend, .sub-set > legend { float: left; width: 100%; padding: 0; margin: 0; }
.q-legend + *, .sub-set > legend + * { clear: both; margin-top: 0; }
.q-legend { padding-bottom: 14px; }
.sub-set > legend { padding-bottom: 10px; }
.sub-set + .sub-set { margin-top: 26px; }

/* help, kind one: a ruled note (cues and examples), in the margin on wide screens */
.side-note { margin: 0 0 22px; }
.cues { border-left: 1px solid var(--rule-strong); padding: 2px 0 4px 18px; max-width: 36em; }
.cues-head { font: italic 400 1.0625rem/1.4 var(--serif); margin: 0 0 8px; color: var(--ink); }
.cues ul { list-style: none; margin: 0; padding: 0; }
.cues li { position: relative; padding-left: 18px; margin: 0 0 6px; font-size: 1.0625rem; line-height: 1.5; }
.cues li:last-child { margin-bottom: 0; }
.example { font: italic 400 1.0625rem/1.55 var(--serif); color: var(--ink-soft); margin: 0 0 12px; max-width: 36em; }
.example.side-note { border-left: 1px solid var(--rule-strong); padding: 2px 0 4px 18px; margin-bottom: 22px; }
/* In the margin only when the column and the note both fit. In em (1180px at the usual 16px), because the
   column and the note are in rem: with the browser's text set larger, the notes stay under the question. */
@media (min-width: 73.75em) {
  .side-note {
    float: right; clear: right; width: var(--note-w);
    margin: 4px calc(-1 * (var(--note-w) + var(--note-gap))) 22px 0;
  }
  .cues li { font-size: 1rem; }
}
/* help, kind two: one quiet line */
.privacy-line, .nudges-head, .rec-meta, .quiet-line, .saved-line { font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.privacy-line { margin: 0 0 16px; max-width: 36em; }
.quiet-line { margin: 20px 0 0; max-width: 36em; font: italic 400 1.0625rem/1.5 var(--serif); }
.saved-line { margin: 0; }
.form-foot { margin-top: 28px; }
.form-foot:empty, .form-foot:has(> [hidden]:only-child) { margin-top: 0; }

/* ---------- answers ---------- */
.q-answer { margin: 0; }
/* a step holds several fields: each one is a block with room above it, and its side notes stay inside it */
.step-fields { margin: 28px 0 0; }
.fld { display: flow-root; min-width: 0; }
.fld + .fld { margin-top: 38px; }
@media (max-width: 599px) { .fld + .fld { margin-top: 32px; } }
.field { margin: 0 0 26px; }
.follow-up { margin: 22px 0 0; }
.field-label { display: block; font: 700 1.0625rem/1.4 var(--sans); margin: 0 0 6px; padding: 0; }
.help { font-size: 1rem; line-height: 1.5; color: var(--ink-soft); margin: 0 0 10px; max-width: min(var(--col), 36em); }
.req { margin-left: 8px; font: italic 400 1rem/1 var(--serif); color: var(--ink-soft); white-space: nowrap; }

.text-in, .story-form textarea {
  display: block; width: 100%; max-width: var(--col); margin: 0;
  background-color: var(--field); color: var(--ink); border: 1px solid var(--edge); border-radius: var(--radius);
  padding: 13px 16px; font: 500 1.125rem/1.45 var(--sans); box-shadow: none;
  -webkit-appearance: none; appearance: none;
}
.text-in { min-height: 56px; }
/* a box to write in: faint ruled lines that scroll with the words */
.story-form textarea {
  min-height: 0; resize: vertical; overflow-y: auto;
  padding: 10px 16px 12px; font: 400 1.1875rem/2rem var(--serif);
  max-height: calc(16 * 2rem + 24px);   /* grows with the text, to 16 lines */
  background-image: linear-gradient(to bottom, transparent calc(100% - 1px), var(--rule) calc(100% - 1px));
  background-size: calc(100% - 32px) 2rem; background-position: 16px 10px; background-repeat: repeat-y;
  background-attachment: local;
}
.text-in:hover, .story-form textarea:hover { border-color: var(--ink); }
.text-in:focus-visible, .story-form textarea:focus-visible { border-color: var(--ink); outline: var(--ring); outline-offset: var(--ring-offset-box); }
.text-in[aria-invalid="true"], .story-form textarea[aria-invalid="true"] { border: 2px solid var(--error); }
.text-in[aria-invalid="true"] { padding: 12px 15px; }
.story-form textarea[aria-invalid="true"] { padding: 9px 15px 11px; background-position: 15px 9px; }
.text-in, .story-form textarea, .chip { scroll-margin: 96px 0 120px; }

.err { font: 700 1rem/1.45 var(--sans); color: var(--error); margin: 8px 0 0; max-width: var(--col); }
.err:empty { display: none; }
.err:focus { outline: none; }
.err .link { color: var(--error); }
.count { font-size: 1rem; color: var(--ink-soft); margin: 6px 0 0; }
.count.is-full { color: var(--error); font-weight: 700; }

/* ---------- choices: real radios and checkboxes, drawn as on a printed form ---------- */
.chips { display: grid; gap: 8px; max-width: var(--col); }
.chips-stack, .chips-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 520px) { .chips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chips-wrap { display: flex; flex-wrap: wrap; }
.chips-wrap .chip { flex: 0 0 auto; }
.chip { position: relative; display: block; min-width: 0; }
.chip input {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; z-index: 1;
}
.chip input:disabled { cursor: not-allowed; }
.chip-face {
  position: relative; display: flex; align-items: center; height: 100%; min-height: var(--btn-h);
  padding: 12px 16px 12px 50px; background: var(--field); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  font: 500 1.0625rem/1.4 var(--sans); color: var(--ink);
  transition: border-color 0.12s, box-shadow 0.12s;
}
/* the mark: a ring for one answer, a square for several */
.chip-face::before {
  content: ""; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
  border: 1.5px solid var(--edge); border-radius: 50%; background: var(--field);
}
.chip-box .chip-face::before { border-radius: var(--radius); }
.chip:hover .chip-face { border-color: var(--ink-soft); }
.chip:hover .chip-face::before { border-color: var(--ink); }
.chip input:checked + .chip-face { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.chip input:checked + .chip-face::before { border-color: var(--ink); }
.chip-radio input:checked + .chip-face::after {
  content: ""; position: absolute; left: 21px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--ink);
}
.chip-box input:checked + .chip-face::before { background: var(--ink); }
.chip-box input:checked + .chip-face::after {
  content: ""; position: absolute; left: 23px; top: 50%; width: 6px; height: 11px; margin-top: -8px;
  border: solid var(--field); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.chip input:focus-visible + .chip-face { outline: var(--ring); outline-offset: var(--ring-offset-box); }
/* At most two on M6 and M7: the others wait, readable, until one is unticked. */
.chip input:disabled + .chip-face { background: transparent; border-style: dashed; color: var(--ink-soft); }
.chip input:disabled + .chip-face::before { border-style: dashed; background: transparent; }
.chip:hover input:disabled + .chip-face { border-color: var(--rule-strong); }
.q-set.has-error .chip-face { border-color: var(--error); }

/* ages: boxes with the book's numerals; the chosen one filled in ink. With no ring to show they can be
   chosen, their edge is drawn as dark as a field's. */
.chips-age { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 26rem; }
.chip-num .chip-face {
  justify-content: center; min-height: 64px; padding: 6px 2px; border-color: var(--edge);
  font: 400 2rem/1 var(--display); font-variant-numeric: lining-nums;
}
.chip-num .chip-face::before, .chip-num input:checked + .chip-face::after { display: none; }
.chip-num input:checked + .chip-face { background: var(--ink); color: var(--page); box-shadow: none; }
/* the two ages we can't make a book for: there, but quieter */
.chips-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 26rem; margin-top: 8px; }
.chips-pair .chip-face { min-height: 48px; padding: 8px 10px 8px 42px; background: transparent; color: var(--ink-soft); font-size: 1rem; line-height: 1.3; }
.chips-pair .chip-face::before { left: 13px; width: 18px; height: 18px; margin-top: -9px; }
.chips-pair .chip-radio input:checked + .chip-face { color: var(--ink); }
.chips-pair .chip-radio input:checked + .chip-face::after { left: 18px; width: 8px; height: 8px; margin-top: -4px; }

/* a single box to tick: the consents, Christmas, "no words yet" */
.check-card, .check-line { position: relative; display: block; max-width: var(--col); cursor: pointer; }
.check-card input, .check-line input {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.check-face { position: relative; display: block; }
.check-face::before {
  content: ""; position: absolute; left: 0; top: 11px; width: 22px; height: 22px;
  border: 1.5px solid var(--edge); border-radius: var(--radius); background: var(--field);
}
.check-line .check-face { min-height: var(--target-min); padding: 10px 0 10px 36px; font: 600 1.0625rem/1.45 var(--sans); }
.check-card .check-face {
  padding: 16px 18px 16px 54px; background: var(--field); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  font-size: 1.0625rem; line-height: 1.55;
}
.check-card .check-face::before { left: 18px; top: 18px; }
.check-card:hover .check-face { border-color: var(--ink-soft); }
.check-card:hover .check-face::before, .check-line:hover .check-face::before { border-color: var(--ink); }
input:checked + .check-face::before { background: var(--ink); border-color: var(--ink); }
input:checked + .check-face::after {
  content: ""; position: absolute; left: 8px; top: 15px; width: 6px; height: 11px;
  border: solid var(--field); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.check-card input:checked + .check-face { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.check-card input:checked + .check-face::after { left: 26px; top: 22px; }
input:focus-visible + .check-face { outline: var(--ring); outline-offset: var(--ring-offset-box); }
input[aria-invalid="true"] + .check-face::before { border-color: var(--error); }
.check-card input[aria-invalid="true"] + .check-face { border-color: var(--error); }
@media (max-width: 599px) {
  .check-card .check-face { padding: 14px 14px 14px 48px; font-size: 1rem; }
  .check-card .check-face::before { left: 14px; top: 16px; }
  .check-card input:checked + .check-face::after { left: 22px; top: 20px; }
}
.consent { margin: 0 0 18px; max-width: var(--col); }
.consent .help { margin: 8px 0 0; }
.check-help { margin: 2px 0 0 36px; }
.answer-extra { margin: 16px 0 0; }

/* ---------- "Add more" ---------- */
.add-more {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--target); margin: 14px 0 0; padding: 8px 2px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font: 700 1.0625rem/1.4 var(--sans); color: var(--cloth);
}
.add-more::before {
  content: ""; flex: none; width: 13px; height: 13px;
  background: linear-gradient(currentColor, currentColor) center / 13px 1.5px no-repeat,
              linear-gradient(currentColor, currentColor) center / 1.5px 13px no-repeat;
}
.add-more:hover { color: var(--cloth); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 6px; }
.more-panel { margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--rule); max-width: var(--col); }
.more-panel .example, .more-panel .help { margin-bottom: 10px; }
.more-panel textarea, .more-panel .text-in { margin-top: 2px; }

/* Q6: lines to start from, set as quiet suggestions under the box, not answers to choose */
.nudges { margin: 14px 0 0; }
.nudges-head { margin: 0 0 2px; }
.nudge-row { display: flex; flex-wrap: wrap; gap: 0 22px; }
.nudge {
  display: inline-flex; align-items: center; min-height: var(--target); padding: 4px 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font: italic 400 1.125rem/1.3 var(--serif); color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--rule-strong); text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.nudge:hover { color: var(--cloth); text-decoration-color: currentColor; }

/* ---------- the recorder: one ruled strip under the box, part of the same answer ---------- */
.rec { margin: 24px 0 0; padding: 18px 0 20px; max-width: var(--col); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.rec-lead { font-weight: 600; color: var(--ink); margin: 0 0 12px; }
.rec-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0 0; }
.rec-lead + .rec-row { margin-top: 0; }
.rec-meta { margin: 10px 0 0; }
.rec-row + .rec-meta { margin-top: 12px; }
.rec-meta + .rec-meta { margin-top: 2px; }
.rec-unavailable { margin: 0; color: var(--ink); }
.rec[data-state="off"] { display: none; }   /* recordings switched off: no empty strip under the box */
.rec-note { font-weight: 600; color: var(--ink); margin: 12px 0 0; padding-left: var(--notice-gap); border-left: var(--notice-rule); }
.rec-body > .rec-note:first-child { margin-top: 0; }
.rec-status { font-weight: 600; margin: 0; }
.rec-status:focus, .rec-note:focus, .rec-title:focus, .rec-notice-title:focus { outline: none; }
.btn-rec {
  display: inline-flex; align-items: center; gap: 12px; min-height: var(--btn-h); padding: 10px 22px 10px 18px;
  background: var(--field); color: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--radius); cursor: pointer;
  font: 700 1.0625rem/1.2 var(--sans);
}
.btn-rec::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--error); box-shadow: 0 0 0 3px rgba(var(--error-rgb), 0.15); }
.btn-rec:hover { background: var(--hover-tint); }
.rec-live { display: flex; align-items: center; gap: 12px; margin: 0; font-weight: 600; font-size: 1.0625rem; }
.rec-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--error); animation: fb-rec-pulse 1.6s ease-in-out infinite; }
.rec-live.is-paused .rec-dot { animation: none; background: var(--ink-soft); }
@keyframes fb-rec-pulse { 50% { opacity: 0.3; } }
.rec-time { font-variant-numeric: tabular-nums; }
.btn-stop::before { content: ""; flex: none; width: 10px; height: 10px; background: currentColor; }
.rec-title { font-weight: 700; margin: 0 0 10px; }
.rec-confirm { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--rule); }
.rec-ask { font-weight: 600; color: var(--ink); margin: 0; }
/* its two answers, like every confirmation's (see .confirm-row) */
.rec-confirm .rec-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.rec-confirm .btn { width: 100%; }
@media (min-width: 600px) { .rec-confirm .rec-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* wider: the Record button on the left, its lines beside it */
@media (min-width: 640px) {
  .rec[data-state="ready"] .rec-body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .rec[data-state="ready"] .rec-row { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
  .rec[data-state="ready"] .rec-lead, .rec[data-state="ready"] .rec-meta, .rec[data-state="ready"] .rec-note { grid-column: 2; }
  .rec[data-state="ready"] .rec-lead { margin: 0 0 4px; }
  .rec[data-state="ready"] .rec-meta { margin-top: 2px; }
}
/* the notice before the first recording: a framed slip, the one moment the strip is boxed */
.rec[data-state="notice"] { padding: 20px 20px 16px; background: var(--field); border: 1px solid var(--ink); border-radius: var(--radius); }
.rec-notice-title { font: 400 var(--text-h3)/1.25 var(--serif); margin: 0 0 10px; }
.rec-notice p:not(.rec-notice-title) { margin: 0 0 10px; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }
.rec-notice p:nth-of-type(2) { font-size: 1.0625rem; font-weight: 700; color: var(--ink); }   /* "record it yourself" */
.rec-notice .rec-row { margin-top: 16px; }

/* the player (form-recorder.js): a Play button like Record's, the time, and a hairline to move
   along, filled in bookcloth as it plays. The audio element itself has no controls, so it doesn't show. */
.player {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "btn time" "bar bar";
  gap: 6px 16px; align-items: center; max-width: 28rem;
}
.review-rec .player { max-width: 26rem; }
.player-btn {
  grid-area: btn; display: inline-flex; align-items: center; gap: 10px; min-width: 7rem; min-height: 48px;
  padding: 8px 18px 8px 16px; background: var(--field); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: var(--radius); cursor: pointer; font: 700 1rem/1.2 var(--sans);
}
.player-btn:hover { background: var(--hover-tint); }
/* a triangle to play, two bars to pause */
.player-btn::before {
  content: ""; flex: none; width: 12px; height: 14px;
  border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor;
}
.player.is-playing .player-btn::before { border-width: 0 4px; border-color: currentColor; }
.player-time { grid-area: time; margin: 0; font: 600 1rem/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
/* the whole width under the button, 44px to touch, drawn as a 1px line; --at (0 to 1) is set as it plays */
.player-bar {
  grid-area: bar; display: block; width: 100%; height: 44px; margin: 0; padding: 0;
  background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.player-bar::-webkit-slider-runnable-track {
  height: 44px; border: 0;
  background: linear-gradient(var(--cloth), var(--cloth)) left center / calc(var(--at, 0) * (100% - 14px) + 7px) 3px no-repeat,
    linear-gradient(var(--edge), var(--edge)) left center / 100% 1px no-repeat;
}
.player-bar::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: 15px;
  border: 0; border-radius: 50%; background: var(--cloth);
}
.player-bar::-moz-range-track { height: 1px; border: 0; background: var(--edge); }
.player-bar::-moz-range-progress { height: 3px; background: var(--cloth); }
.player-bar::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--cloth); }
.player-bar:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset-box); }

/* ---------- moving on ---------- */
.screen-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: var(--col);
  margin: 32px 0 0; padding: 22px 0 0; border-top: 1px solid var(--rule);
}
/* straight after the recorder, its bottom rule is the one above the buttons */
.rec + .screen-actions { margin-top: 0; border-top: 0; }
.screen-actions .btn-next, .screen-actions .btn-send { margin-left: auto; min-width: 10rem; }
.screen-actions .btn-send { min-width: 13.5rem; }
/* On the optional screens, Skip is an outline; it fills once something is answered. */
.btn-next.is-skip { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-next.is-skip:hover { background: var(--hover-tint); }
/* Back: a text button, the same height as the others */
.btn-back {
  display: inline-flex; align-items: center; flex-shrink: 0; min-height: var(--target); min-width: var(--target-min); padding: 8px 6px 8px 2px;
  background: none; border: 0; cursor: pointer; font: 700 1.0625rem/1.2 var(--sans); color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--rule-strong); text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.btn-back:hover { color: var(--cloth); text-decoration-color: currentColor; }
.screen-actions-quiet { margin-top: 16px; padding-top: 0; border-top: 0; }
.skip-rest { margin: 6px 0 0; max-width: var(--col); text-align: right; }
@media (max-width: 599px) {
  .screen-actions { margin-top: 26px; padding-top: 18px; }
  .screen-actions .btn-next { min-width: 0; flex: 0 1 62%; padding-inline: 18px; }
  .screen-actions .btn-send { min-width: 0; flex: 1 1 auto; padding-inline: 18px; }
  .is-edit .screen-actions .btn-next { flex: 1 1 auto; }
  .skip-rest { text-align: left; }
}

/* the gate: the two choices first, then what "tell us more" will ask, set like a contents list */
.gate-buttons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 4px 0 0; max-width: var(--col); }
.gate-buttons .btn { width: 100%; padding-inline: 18px; }
@media (min-width: 600px) { .gate-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gate-head { font: italic 400 1.1875rem/1.4 var(--serif); margin: 34px 0 10px; }
.gate-list { list-style: none; counter-reset: g; margin: 0; padding: 0; max-width: var(--col); border-top: 1px solid var(--ink); }
/* block, not grid: an item holds the child's name in a span, which a grid would split into cells */
.gate-list li {
  counter-increment: g; position: relative; padding: 11px 0 11px 2.25rem;
  border-bottom: 1px solid var(--rule); font: 400 1.125rem/1.4 var(--serif);
}
.gate-list li::before { content: counter(g); position: absolute; left: 0; top: 12px; font: 400 1.5rem/1 var(--display); color: var(--cloth); }
.gate-line { font-size: 1rem; line-height: 1.5; color: var(--ink-soft); margin: 14px 0 0; max-width: var(--col); }

/* ---------- check and send: the answers read back as a proof ---------- */
/* no margin note here, so on wide sheets the answers take more of the width */
@media (min-width: 73.75em) { .screen-check { --col: 46rem; } }
.review { max-width: var(--col); margin: 0 0 30px; }
.review-head {
  margin: 26px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--ink);
  font: 700 var(--text-caps)/1.3 var(--sans); text-transform: uppercase; letter-spacing: var(--caps-track); color: var(--ink-soft);
}
.review-head:first-child { margin-top: 6px; }
.review-list { margin: 0; }
.review-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label change" "answer answer";
  column-gap: 12px; padding: 8px 0 14px; border-bottom: 1px solid var(--rule);
}
.review-label { grid-area: label; align-self: center; font-weight: 600; font-size: 1rem; color: var(--ink-soft); }
.review-answer { grid-area: answer; margin: 0; min-width: 0; }
.review-change { grid-area: change; margin: 0; }
.review-change .link-btn { color: var(--cloth); font-weight: 700; text-decoration-color: currentColor; }
.review-text { margin: 0; font: 400 1.125rem/1.55 var(--serif); white-space: pre-wrap; overflow-wrap: anywhere; }
.review-answer > * + * { margin-top: 6px; }
.review-sub { font: 500 1rem/1.5 var(--sans); color: var(--ink-soft); }
.review-long .link-btn { padding: 4px 0; }
.review-missing { font-family: var(--sans); font-size: 1rem; color: var(--ink-soft); }
.review-rec { padding-top: 2px; }
.review-rec-line { font-weight: 600; font-size: 1rem; margin: 0 0 8px; }
.review-empty { font-size: 1rem; line-height: 1.5; color: var(--ink-soft); margin: 12px 0 0; }
.review-more { margin: 4px 0 0; }
@media (min-width: 700px) {
  .review-row { grid-template-columns: 10.5rem minmax(0, 1fr) auto; grid-template-areas: "label answer change"; column-gap: 20px; padding: 14px 0; }
  .review-label { align-self: start; padding-top: 3px; }
  .review-change { align-self: start; margin-top: -11px; }   /* Change's word level with the label's (its box is 48px) */
}

/* Christmas and the price: ruled entries, not boxes */
.xmas-box { max-width: var(--col); margin: 0 0 22px; padding: 10px 0 16px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.xmas-closed { margin: 0 0 22px; }
.price-box { max-width: var(--col); margin: 0 0 24px; padding: 0 0 18px; border-bottom: 1px solid var(--rule); font: 400 1.125rem/1.55 var(--serif); }
.xmas-box + .xmas-closed + .price-box, .xmas-box[hidden] + .xmas-closed[hidden] + .price-box { padding-top: 0; }
/* the rule above Back and Send closes the price; a second one just above it would double it */
.screen-check .price-box { padding-bottom: 0; border-bottom: 0; }
.price-box p { margin: 0; }
.rec-send-note { max-width: var(--col); margin: 0 0 22px; padding: 2px 0 2px var(--notice-gap); border-left: var(--notice-rule); font-weight: 600; }
/* the alert at the top of the form, ruled in red; a failure beside its button reads like .err, as on every other page */
.form-alert { max-width: var(--col); margin: 0 0 22px; padding: 10px 0 10px 16px; border-left: 3px solid var(--error); font-weight: 700; color: var(--ink); }
.form-alert:empty { display: none; }
.form-alert.calm { padding-left: var(--notice-gap); border-left: var(--notice-rule); font-weight: 600; }
.form-alert[data-send-alert], .form-alert[data-wl-alert] { padding: 0; border-left: 0; font: 700 1rem/1.45 var(--sans); color: var(--error); }
.form-alert[data-send-alert] .link, .form-alert[data-wl-alert] .link { color: var(--error); }
.form-alert:focus { outline: none; }
.after-send { font-size: 1rem; line-height: 1.5; color: var(--ink-soft); margin: 18px 0 0; max-width: var(--col); }
.clear-row { max-width: var(--col); margin: 32px 0 0; padding: 18px 0 0; border-top: 1px solid var(--rule); font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.clear-row p { margin: 0 0 4px; }
/* "Are you sure?": the question, then two answers of one size, side by side from 600px, the answer first in
   bookcloth and the way back in outline (as on the first page and in the book) */
.confirm { margin: 10px 0 0; padding: 14px 16px 16px; background: var(--field); border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--ink); }
.confirm p { margin: 0 0 10px; font-weight: 600; }
.confirm-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.confirm-row .btn { width: 100%; }
@media (min-width: 600px) { .confirm-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-note { max-width: var(--col); margin: 0 0 28px; padding: 4px 0 4px var(--notice-gap); border-left: var(--notice-rule); }
.form-note p { margin: 0 0 2px; }
.form-lead > .form-note:first-child, .form-intro.is-folded + .form-note { margin-top: 0; }

/* the email, read back; the hint region is always there, and takes no room when empty */
.email-hint { font-size: 1rem; line-height: 1.45; margin: 8px 0 0; max-width: var(--col); overflow-wrap: anywhere; }
.email-hint:empty { margin: 0; }
.email-hint .link-btn { margin-left: 8px; color: var(--cloth); }
.email-echo { font-size: 1.0625rem; line-height: 1.5; margin: 10px 0 0; max-width: var(--col); overflow-wrap: anywhere; }

/* ---------- sending the recordings ---------- */
.screen-upload .screen-title { margin-bottom: 0; }
.up-list { list-style: none; margin: 8px 0 0; padding: 0; max-width: var(--col); border-top: 1px solid var(--ink); }
.up-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.up-name { font: 400 1.125rem/1.4 var(--serif); }
.up-state { font-weight: 700; font-size: 1rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.up-row[data-state="done"] .up-state { color: var(--cloth); }
.up-row[data-state="failed"] .up-state { color: var(--error); }
.up-overall { max-width: var(--col); margin: 20px 0 0; }
.up-count { font-weight: 700; font-size: 1rem; margin: 0 0 8px; }
.up-bar { flex: none; max-width: none; height: 4px; -webkit-mask: none; mask: none; background: var(--rule); }
.up-bar > span { background: var(--cloth); }
.up-bar > span::after { display: none; }
.up-actions { justify-content: flex-start; flex-wrap: wrap; }
@media (max-width: 599px) { .up-actions .btn { flex: 1 1 100%; } }

/* ---------- other views: no script, waitlist, closed ---------- */
.noscript-note { max-width: 46rem; margin: 0 0 24px; padding: 14px 0 14px var(--notice-gap); border-left: var(--notice-rule); font-weight: 600; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.view-box .btn { margin-top: 8px; }
.view-box .lede { margin-bottom: 18px; }

/* ---------- the thank-you page: a letter on the table ---------- */
.thanks-page { background: var(--linen); }
/* the letter is centred on the table, and the title above it lines up with its text */
.thanks-page .page-head .wrap { max-width: calc(46rem + 2 * var(--gutter)); padding-inline: calc(var(--gutter) + clamp(20px, 5.4vw, 60px)); }
.thanks-sheet { padding: 0 0 var(--section); }
.thanks-page .page-head [tabindex="-1"]:focus { outline: none; }   /* focused by script only, to read out a change */
.thanks-sheet .wrap > div {
  max-width: 46rem; margin-inline: auto; background: var(--page); box-shadow: var(--shadow-page);
  padding: clamp(24px, 5.4vw, 60px) clamp(20px, 5.4vw, 60px) clamp(28px, 5vw, 52px);
}
.thanks-sheet p { max-width: 38em; }
/* space between paragraphs, counting only the ones that show (the first lines are often hidden) */
.thanks-sheet p:not([hidden]) ~ p { margin-top: 1em; }
.thanks-sheet .h3 { margin: 36px 0 14px; }
.thanks-sheet .btn { margin-top: 30px; }
/* /reprint/: the way back is a page's one button, in bookcloth as on /thanks/ and /paid/, except under Send or
   Try again, where it steps back to an outline */
[data-rp-state="open"] .rp-exit, [data-rp-state="offline"] .rp-exit { background: transparent; color: var(--ink); border-color: var(--ink); }
[data-rp-state="open"] .rp-exit:hover, [data-rp-state="offline"] .rp-exit:hover { background: var(--hover-tint); color: var(--ink); }
.ref { font-size: 1.0625rem; line-height: 1.6; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--rule); }
/* the reference, set like a docket number in the line: kept whole, and broken only if a line can't hold it */
.ref code {
  display: inline-block; max-width: 100%; margin: 0; overflow-wrap: anywhere;
  font: 700 1.0625rem/1.4 var(--sans); letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
}
.thanks-note { margin: 0 0 1.2em; padding: 4px 0 4px var(--notice-gap); border-left: var(--notice-rule); font-weight: 600; }
.thanks-slot:empty { display: none; }
/* the first page's progress on the thank-you page: a quiet bordered block, like the notes above it */
.tp { margin: 20px 0 32px; padding: 18px 20px 20px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper); }
.tp .h3, .thanks-sheet .tp .h3 { margin: 0 0 10px; }
.tp p { margin: 0 0 12px; }
.tp p:last-child { margin-bottom: 0; }
.thanks-sheet .tp .btn { margin-top: 6px; }
.tp .fine { margin-top: 12px; }
/* the four steps, numbered like every step list on the private pages (page.css .fp-steps, book.css
   .bk-contents): 2.25rem numerals in a 2.75rem column; "Now" is where the family stands */
.timeline { list-style: none; counter-reset: step; margin: 0 0 30px; padding: 0; border-top: 1px solid var(--ink); }
.timeline li {
  counter-increment: step; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 14px;
  padding: 18px 0 20px; border-bottom: 1px solid var(--rule);
}
.timeline li::before { content: counter(step); grid-row: 1 / span 2; font: 400 2.25rem/1 var(--display); color: var(--cloth); }
.timeline .when { grid-column: 2; font: italic 400 1.125rem/1.35 var(--serif); color: var(--ink-soft); margin-bottom: 4px; }
.timeline li:first-child .when { color: var(--cloth); }
.timeline p { grid-column: 2; margin: 0; }

/* ---------- Windows high contrast ---------- */
@media (forced-colors: active) {
  .chip input:checked + .chip-face, .check-card input:checked + .check-face { outline: 3px solid Highlight; outline-offset: -4px; }
  .chip-box input:checked + .chip-face::before, .chip-radio input:checked + .chip-face::after, input:checked + .check-face::before { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  .progress-bar > span, .progress-bar > span::after { forced-color-adjust: none; background: Highlight; }
  .add-more::before { forced-color-adjust: none; background: linear-gradient(LinkText, LinkText) center / 13px 2px no-repeat, linear-gradient(LinkText, LinkText) center / 2px 13px no-repeat; }
  .player-btn::before, .player-bar { forced-color-adjust: none; }
  .player-bar::-webkit-slider-runnable-track {
    background: linear-gradient(Highlight, Highlight) left center / calc(var(--at, 0) * (100% - 14px) + 7px) 3px no-repeat,
      linear-gradient(CanvasText, CanvasText) left center / 100% 1px no-repeat;
  }
  /* one engine's pseudo-elements per rule: a list with the other engine's is dropped whole */
  .player-bar::-webkit-slider-thumb { background: Highlight; }
  .player-bar::-moz-range-thumb { background: Highlight; }
  .player-bar::-moz-range-progress { background: Highlight; }
  .player-bar::-moz-range-track { background: CanvasText; }
}

/* ---------- Phone panel ---------- */
/* "Rather talk? Call us." (phone spec 8): form-call.js sets data-state and shows one block. A slip laid on the
   sheet, above the question; with the line off it stays hidden. Text 1.125rem and up, the number and the code
   2rem and up, buttons 48px and up (8.6). */
.call-panel {
  max-width: var(--col); margin: 0 0 clamp(28px, 3.4vw, 40px); padding: 18px clamp(14px, 3vw, 24px) 20px;
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  font-size: 1.125rem; line-height: 1.6;
}
/* the offer folds away with the intro after question 1; every other state stays on every screen. After question 1
   "ended" keeps its first line and New code, so the question Check and send opened stays in view on a phone */
.form-intro.is-folded ~ .call-panel[data-state="offer"] { display: none; }
.form-intro.is-folded ~ .call-panel[data-state="ended"] [data-call-state="ended"] > p:not(:first-child),
.form-intro.is-folded ~ .call-panel[data-state="ended"] [data-call-do="check"] { display: none; }
.call-title { font: 400 var(--text-h3)/1.25 var(--serif); margin: 0 0 10px; text-wrap: balance; }
.call-title:focus { outline: none; }
.call-panel p { margin: 0 0 12px; max-width: 36em; }
.call-aside { color: var(--ink-soft); }
.call-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.call-actions:not(:has(> :not([hidden]))) { display: none; }
.call-panel .btn { font-size: 1.125rem; }   /* the panel's text is 1.125rem and up (8.6), its buttons too */
@media (max-width: 599px) { .call-actions .btn { flex: 1 1 100%; } }

/* the number and the code, large */
.call-figs { display: grid; gap: 12px 40px; margin: 4px 0 16px; }
@media (min-width: 520px) { .call-figs { grid-template-columns: auto auto; justify-content: start; } }
.call-figs dt { font-weight: 700; color: var(--ink-soft); }
.call-figs dd { margin: 0; }
.call-number, .call-code {
  display: inline-block; font: 700 clamp(2rem, 1.7rem + 1.2vw, 2.5rem)/1.15 var(--sans);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.call-code { white-space: nowrap; }
/* the number to dial: 44px to touch, and it breaks only if a line can't hold it (large text on a phone) */
.call-number {
  display: inline-flex; align-items: center; min-height: var(--target-min); max-width: 100%; overflow-wrap: anywhere;
  color: var(--cloth); text-decoration-thickness: 2px; text-underline-offset: 0.16em;
}

/* the answers as they arrive, labelled as on Check and send; the newest row keeps its background until the next */
.call-list { margin: 4px 0 16px; border-top: 1px solid var(--ink); }
.call-row { padding: 10px 10px 12px; border-bottom: 1px solid var(--rule); transition: background-color 0.3s ease; }
.call-row dt { font-weight: 600; color: var(--ink-soft); }
.call-row dd { margin: 2px 0 0; min-width: 0; }
.call-row dd p { margin: 0; font: 400 1.125rem/1.6 var(--serif); white-space: pre-wrap; overflow-wrap: anywhere; }
.call-row dd p + p { margin-top: 4px; }
.call-row.is-new { background: var(--linen); box-shadow: inset 3px 0 0 var(--cloth); }
@media (forced-colors: active) { .call-row.is-new { border-left: 3px solid Highlight; } }