/* Never Too Far, the Join the Waitlist postcard. Ticket T06 (V2 wave).
   Operator ruling R6, verbatim: "the waitlist can resemble the postcard
   design we are using for the booking journey." This sheet does NOT
   <link> css/begin.css (Level-2 decision, recorded in the T06 report) --
   the shared postcard VOCABULARY (the harsh block shadow, the tape, the
   wordless stamp, the postmark waves, var(--hand)) already lives in
   css/site.css as .card / .card .tape / .card .stamp / .card .postmark /
   var(--hand), exactly the same place begin.css itself draws it from, so
   reusing class="card" on this page's own <form> inherits it for free
   with zero risk of also inheriting begin.css's page-specific selectors
   (.js-flow gating, .pc-address, the day-kind select, the calendar
   column). Everything below is this page's OWN layout, written by
   reading begin.css for the pattern and re-declaring it scoped to this
   page's own markup -- single column (no calendar/address side exists
   here). AMEND1 (MISSION_BOARD_V2.md 3d, A2): the preferred-visit-date
   question D3 once placed in this one-by-one flow is removed entirely,
   operator ruling; the form now asks only name, email, phone, country.

   Progressive enhancement, same law as begin.css: every hiding rule below
   is scoped under .js-flow, a class waitlist.js adds only once it has
   found every element it needs. Without that class -- JS disabled, or an
   error before that line runs -- every question, the consent checkbox
   and the finish button render at once, per requirement 7. The review
   step's own summary list (built by JS) stays hidden either way (no
   meaningful non-JS content); waitlist.js also hides the consent field
   and the finish row itself once .js-flow lands, only re-showing them at
   the review step -- see waitlist.js's own header note. */

main.waitlist{max-width:760px;margin:0 auto;
  padding:clamp(120px,18vh,168px) clamp(20px,5vw,60px) clamp(90px,12vh,130px)}

/* ── the postcard shell ── */
.postcard-frame{margin:0 0 clamp(40px,6vh,64px)}
.postcard-card{position:relative;padding:clamp(58px,7vw,88px) clamp(28px,4vw,54px) clamp(34px,4.5vh,46px);
  overflow:visible}
.pc-message{min-width:0}

.pc-message h1{font-weight:300;font-size:clamp(24px,2.6vw,32px);line-height:1.24;
  margin:0 0 clamp(10px,1.6vh,14px);text-wrap:balance}
.pc-message .intro{font-family:var(--serif);font-size:clamp(15px,1.6vw,17px);
  color:var(--ink);line-height:1.5;margin:0 0 clamp(30px,4vh,40px);max-width:52ch}

/* ── the questions, one at a time ── */
.field{margin:0 0 clamp(24px,3.4vh,34px)}
.field label{display:block;font-family:var(--sans);font-weight:500;font-size:13px;
  letter-spacing:.04em;color:var(--ink);margin:0 0 8px}
.field input,.field textarea{width:100%;font-family:var(--serif);font-size:16px;color:var(--ink);
  background:none;border:0;border-bottom:1px solid rgba(43,42,38,.3);
  padding:8px 2px;outline:none;box-sizing:border-box}
.field input::placeholder,.field textarea::placeholder{color:rgba(43,42,38,.42);font-style:italic}
.field textarea{resize:vertical;min-height:130px;max-height:46vh;line-height:1.55;
  /* HANDOFF.md 825-851 defect (c): long answers must stay readable while
     typing -- a real, scrollable multi-line control (not a single-line
     input standing in for one) so the browser's own native caret-follow
     scrolling keeps the caret AND the last line in view as the visitor
     types past the visible box, at 2000 characters, at 390px wide,
     without any bespoke scroll-into-view code here. */
  overflow-y:auto}
.field .helper{font-family:var(--sans);font-size:12px;color:#6b675f;margin:8px 0 0}
.field .field-error{font-family:var(--sans);font-weight:500;font-size:12.5px;
  color:var(--verm);margin:8px 0 0}
.field.has-error input,.field.has-error textarea{border-bottom-color:var(--verm)}

/* the live question's own input writes in the postcard's script hand as
   you type, same idiom begin.css uses -- "when the answer is typed, it
   comes in looking like the script font used on the postcard." The
   placeholder stays in the plain instructional voice so the hint never
   reads as if it were already answered. */
.qactive .field input,.qactive .field textarea{font-family:var(--hand);
  font-size:clamp(19px,1.9vw,23px);padding-bottom:10px}
.qactive .field input::placeholder,.qactive .field textarea::placeholder{
  font-family:var(--serif);font-size:16px;font-style:italic;color:rgba(43,42,38,.42)}

/* D1 (MISSION_BOARD_V2.md sec 3c): the hand face draws 6 like "b" and 1
   like "l" (HANDOFF.md, decision B3) -- the phone field (AMEND1: was
   "phone and date", the date field is removed), and every echo of it,
   renders in var(--sans) instead, overriding the qactive hand-face rule
   above regardless of whether the question is currently active or
   settled. */
.field-sans input,.qactive .field-sans input{font-family:var(--sans) !important;
  font-size:16px !important;padding-bottom:8px}
.field-sans input::placeholder,.qactive .field-sans input::placeholder{
  font-family:var(--sans);font-style:normal}
/* native date-input caret/typed-segment colour inherits currentColor,
   already var(--ink) here -- no extra rule needed for the sans switch to
   reach the browser-drawn day/month/year segments themselves. */

/* one question visible at a time -- JS-only; every field renders at once
   without .js-flow, per requirement 7's plain-form law. */
.js-flow .qactive .field{display:none}
.js-flow .qactive .field.is-current{display:block}

.qflow-controls{display:none;align-items:center;justify-content:center;gap:18px;
  margin:clamp(10px,1.6vh,16px) 0 0}
.js-flow .qflow-controls{display:flex}
/* at the review step waitlist.js sets [hidden] on this element (current
   >= fields.length) -- the rule above would otherwise win the cascade
   over the browser's own [hidden]{display:none} default, since it is an
   author rule with a real selector. This one restores it, scoped to the
   one state where JS actually sets the attribute. */
.js-flow .qflow-controls[hidden]{display:none}

/* hand-inked < / > brush marks, same idiom as begin.css's own qnav (two
   closed, filled path shapes per button, tapering brush strokes, no font
   glyph, no boxed chevron) -- reused as markup, not as a begin.css link.
   44px minimum both dimensions (AA target-size floor) even though the
   painted mark itself reads smaller. */
.qnav{width:auto;height:auto;border:0;background:none;color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:10px 8px;
  min-width:44px;min-height:44px;font-family:var(--sans);font-size:12.5px;
  letter-spacing:.06em;text-transform:none;
  transition:transform .15s ease,opacity .15s ease}
.qnav svg.qmark{width:18px;height:23px;display:block;overflow:visible;flex:none}
.qnav svg.qmark path{fill:currentColor}
.qnav:hover{opacity:.72;transform:rotate(-2deg) scale(1.05)}
.qnav.qnext:hover{transform:rotate(2deg) scale(1.05)}
.qnav:focus-visible{outline:2px solid var(--indigo);outline-offset:3px}
.qnav[disabled]{opacity:.28;cursor:not-allowed;transform:none}
@media(prefers-reduced-motion:reduce){.qnav{transition:none}.qnav:hover{transform:none}}

/* the progress dots -- a simpler, independent mark language from this
   page's own qdots (small irregular ink-filled blobs, not a literal copy
   of begin.js's private SPLATS table), so nothing of the booking page's
   state logic rides along; same behaviour (current/done states, no
   shape-tweening, fixed per step). */
.qdots{display:flex;align-items:center;gap:9px}
.qdots .qdot{display:inline-block;width:9px;height:9px;
  border-radius:46% 54% 51% 49%/54% 44% 56% 46%;
  background:none;border:1px solid rgba(43,42,38,.34);
  transform:scale(.7);transform-origin:center;
  transition:transform .15s ease,background-color .15s ease,border-color .15s ease}
.qdots .qdot.is-current{transform:scale(1.15);background:var(--moss);border-color:var(--moss)}
.qdots .qdot.is-done{transform:scale(.85);background:var(--moss);border-color:var(--moss);opacity:.45}
@media(prefers-reduced-motion:reduce){.qdots .qdot{transition:none}}

/* ── the review step ── */
.qreview{margin:0 0 clamp(18px,2.6vh,24px)}
.qreview h2{font-weight:300;font-size:clamp(19px,2vw,23px);line-height:1.3;
  margin:0 0 clamp(16px,2.2vh,22px);text-wrap:balance;outline:none}
.review-list{display:grid;grid-template-columns:1fr;row-gap:0;margin:0}
.review-list dt{font-family:var(--sans);font-weight:500;font-size:12px;
  letter-spacing:.04em;color:#6b675f;margin:clamp(14px,2vh,18px) 0 4px}
.review-list dt:first-child{margin-top:0}
.review-list dd{margin:0 0 4px;padding-bottom:clamp(10px,1.4vh,14px);
  border-bottom:1px solid rgba(43,42,38,.12);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 16px}
.review-value{font-family:var(--hand);font-size:clamp(17px,1.7vw,20px);color:var(--ink);
  line-height:1.5;white-space:pre-wrap;word-break:break-word;flex:1 1 auto;min-width:0}
.review-value.review-sans{font-family:var(--sans);font-size:15px;font-weight:400}
.review-value:empty::before{content:"";display:inline-block}
.qedit{flex:none;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.03em;
  color:var(--indigo);background:none;border:0;border-bottom:1px solid rgba(60,90,120,.4);
  padding:12px 2px;margin:0;cursor:pointer;min-height:44px}
.qedit:hover{color:var(--verm);border-bottom-color:var(--verm)}
.qedit:focus-visible{outline:2px solid var(--indigo);outline-offset:3px}

/* ── consent + finish -- always present in the plain-form fallback;
   hidden by JS until the review step is reached ── */
.consent-field{margin:0 0 clamp(18px,2.4vh,24px)}
/* T06 follow-up CHANGE 3, superseded AMEND1 (MISSION_BOARD_V2.md 3d, A3):
   drawn tick box, values mirrored from src/css/partner.css's own
   .consent-label/.box (its sibling page solved this already, same
   operator brief, so the two pages' tick boxes read as one family) --
   box size, border, radius and the focus-visible outline are copied
   verbatim from partner.css; only this page's own surrounding row
   spacing (padding/gap/min-height, already 44px) is kept from the
   original rule. The native <input> stays focusable and keyboard-
   operable (never display:none/visibility:hidden, which would drop it
   from the tab order) -- just visually reduced to 1x1px/opacity 0 while
   the label still wraps it, so the whole row remains one click/tap/
   keyboard target. AMEND1: the box no longer fills solid on check (his
   words: "clearly visible" + "paper fill") -- instead it stays paper
   (var(--raised)) always, and gets the site's own red hand-drawn STRIKE
   mark, "the same way we have on the menu titles" -- svg.strike, its
   path and var(--verm) fill copied verbatim from the veil nav's own
   .mi svg.strike (site.css:562-569), same draw-on manner (scaleX 0->1,
   transform-origin left, .28s ease, instant under reduced motion), but
   gated on :checked instead of :hover, and scoped to the box only --
   never through the sentence, which would read as cancelled (Level-2
   decision: delivered as inline SVG matching the veil's own inline
   markup pattern, not a CSS background-image asset). */
/* selector is .consent-field .consent-label, not the bare class, on
   purpose: this page's existing .field label{display:block} rule (used
   by the four postcard questions' own labels) outranks a single-class
   .consent-label on specificity alone (0,1,1 beats 0,1,0), which was
   silently winning the display property and collapsing the flex row to
   block -- caught during this follow-up's own verification (the drawn
   box measured 3x20 instead of 22x22 until this was added). */
.consent-field .consent-label{position:relative;display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 2px;
  cursor:pointer;font-family:var(--serif);font-size:15px;line-height:1.55;color:var(--ink)}
.consent-label input[type="checkbox"]{position:absolute;left:2px;top:10px;
  width:1px;height:1px;opacity:0;margin:0;padding:0}
.consent-label .box{flex:0 0 auto;width:22px;height:22px;margin-top:1px;
  border:1.5px solid rgba(43,42,38,.42);border-radius:4px;background:var(--raised);
  position:relative;overflow:hidden;transition:border-color .15s ease}
.consent-label .box svg.strike{position:absolute;left:9%;top:50%;width:82%;height:24%;
  transform:translateY(-50%) rotate(-3.5deg) scaleX(0);transform-origin:left center;
  transition:transform .28s ease;pointer-events:none;overflow:visible}
.consent-label .box svg.strike path{fill:var(--verm);opacity:.9}
.consent-label input:checked + .box svg.strike{transform:translateY(-50%) rotate(-3.5deg) scaleX(1)}
.consent-label input:focus-visible + .box{outline:2px solid var(--indigo);outline-offset:3px}
/* matches the existing .field.has-error red-underline convention used by
   every other question on this page, applied to the drawn box instead of
   a border-bottom since this row has no underline of its own. */
.consent-field.has-error .box{border-color:var(--verm)}
@media(prefers-reduced-motion:reduce){.consent-label .box{transition:none}.consent-label .box svg.strike{transition:none}}

/* the one polite live region for errors (requirement 8). Visually
   hidden -- the SAME text is already visible per-field, right under the
   input it belongs to (.field-error), so this region exists purely so a
   screen-reader visitor is told a problem exists even before landing on
   the field waitlist.js already navigates them to; showing the same
   sentence twice on screen would only be noise. */
.qerror-live{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

.qsubmit-row{margin:0 0 clamp(18px,2.4vh,24px)}

.qstate{font-family:var(--serif);font-size:15px;line-height:1.55;color:var(--ink);
  background:rgba(43,42,38,.045);border-left:2px solid var(--moss);
  padding:clamp(14px,2vh,18px) clamp(16px,2.2vw,20px);margin:0 0 clamp(18px,2.4vh,24px)}
.qstate-heading{font-family:var(--serif);font-weight:500;font-size:17px;margin:0 0 6px}
.qstate-body,.qstate-single{margin:0}

.noscript-note{font-family:var(--sans);font-size:13px;color:var(--ink);
  background:rgba(43,42,38,.06);padding:14px 18px;margin:0 0 0;max-width:52ch}

@media(max-width:680px){
  .postcard-card{padding:clamp(64px,15vw,84px) clamp(20px,5vw,26px) clamp(28px,5vh,36px)}
  /* clears the card's own top-right stamp/postmark footprint (site.css
     .card .stamp/.postmark) the same way begin.css's own mobile fix does
     for its h1 -- measured against this page's shorter single-line
     heading at 390. */
  .pc-message h1{margin-top:58px}
  .review-list dd{flex-direction:column;align-items:flex-start}
  .qedit{padding-left:0}
}