/* WonderFonT home: the stage (design review 09-27). Loads on the home only. Tokens from wf.css.
   The chosen family and place are radio buttons read here with :has; tester.js carries the text. */
.wf-stage { display: block; min-block-size: 0; padding: var(--wf-s7) var(--wf-s5); }
.wf-stage__in { position: relative; z-index: 1; display: grid; gap: var(--wf-s4); max-inline-size: 66rem; margin-inline: auto; }
.wf-stage .wf-hero__h1 { font-size: clamp(2.5rem, 5vw, 4.25rem); text-align: start; }
.wf-stage__lede { margin: 0; font-size: var(--wf-t-md); color: var(--wf-ink-2); }
.wf-stage__field .wf-input { font-size: var(--wf-t-md); min-block-size: 3.25rem; }
.wf-stage__fonts { align-items: center; }
.wf-stage__more { align-self: center; margin-inline-start: var(--wf-s2); font-weight: 700; white-space: nowrap; }
/* Previous and next font (tester.js adds them): phone only, where the pill row scrolls. */
.wf-stage__step { display: none; flex: none; inline-size: var(--wf-tap); block-size: var(--wf-tap); border: 2px solid var(--wf-line-strong);
  border-radius: 50%; background: var(--wf-paper); color: var(--wf-ink); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
[dir="rtl"] .wf-stage__step { transform: scaleX(-1); }
.wf-stage__meta { display: none; flex-wrap: wrap; align-items: center; gap: var(--wf-s2) var(--wf-s4); padding-block-start: var(--wf-s2); }
.wf-stage__meta b { font-size: var(--wf-t-md); }
.wf-stage__meta .wf-price__n { font-size: var(--wf-t-base); letter-spacing: 0; }
.wf-stage__meta .wf-btn { margin-inline-start: auto; }
.wf-stage__meta[data-i="0"] { display: flex; }
.wf-stage:has([name="stagefont"][value="1"]:checked) .wf-stage__meta[data-i="0"],
.wf-stage:has([name="stagefont"][value="2"]:checked) .wf-stage__meta[data-i="0"] { display: none; }
.wf-stage:has([name="stagefont"][value="1"]:checked) .wf-stage__meta[data-i="1"],
.wf-stage:has([name="stagefont"][value="2"]:checked) .wf-stage__meta[data-i="2"] { display: flex; }

/* The view: the chosen family's font and palette, in the chosen place */
.wf-stage__view { font-family: var(--f0); font-weight: var(--w0); --tone: var(--t0); --tone-ink: var(--i0); container-type: inline-size; }
.wf-stage:has([name="stagefont"][value="1"]:checked) .wf-stage__view { font-family: var(--f1); font-weight: var(--w1); --tone: var(--t1); --tone-ink: var(--i1); }
.wf-stage:has([name="stagefont"][value="2"]:checked) .wf-stage__view { font-family: var(--f2); font-weight: var(--w2); --tone: var(--t2); --tone-ink: var(--i2); }
.wf-stage__comp { display: none; position: relative; aspect-ratio: 4 / 3; border-radius: var(--wf-r-l); box-shadow: var(--wf-edge); overflow: hidden; }
.wf-stage__comp--poster { display: grid; place-items: center; padding: 8%; background: var(--tone); color: var(--tone-ink); rotate: -1.5deg; }
.wf-stage:has([name="stagectx"][value="pack"]:checked) .wf-stage__comp--poster,
.wf-stage:has([name="stagectx"][value="web"]:checked) .wf-stage__comp--poster { display: none; }
.wf-stage:has([name="stagectx"][value="pack"]:checked) .wf-stage__comp--pack { display: grid; }
.wf-stage:has([name="stagectx"][value="web"]:checked) .wf-stage__comp--web { display: grid; }
/* Same fit as a sticker (catalog.css): every word on its own line, or the whole line across. */
.wf-stage__comp .wf-spec { font-size: clamp(1.5rem, max(
    min(calc(88cqi * 0.95 / var(--wf-word, 6)), calc(60cqb / var(--wf-words, 1) / 1.15)),
    min(calc(88cqi * 0.95 / var(--wf-chars, 10)), 50cqb)), 7rem); line-height: 1.05; text-align: center; overflow-wrap: normal; }
.wf-stage__cap { font-family: var(--wf-font); font-weight: 600; font-size: var(--wf-t-sm); }
.wf-stage__comp--poster .wf-stage__cap { position: absolute; inset-block-end: var(--wf-s4); inset-inline-start: var(--wf-s5); }
/* Packaging: a label on a box */
.wf-stage__comp--pack { place-items: center; padding: 10%; background: linear-gradient(160deg, #8C7B5C, #4E4331); }
.wf-stage__label { display: grid; gap: var(--wf-s3); place-items: center; inline-size: 100%; padding: 8% 6%;
  background: var(--tone); color: var(--tone-ink); border: 4px double var(--tone-ink); border-radius: var(--wf-r-s); }
/* A website: a browser frame */
.wf-stage__comp--web { grid-template-rows: auto 1fr; background: var(--wf-paper); border: 1px solid var(--wf-line); }
.wf-stage__bar { display: flex; gap: 6px; padding: var(--wf-s3) var(--wf-s4); border-block-end: 1px solid var(--wf-line); background: var(--wf-ground); }
.wf-stage__bar i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--wf-line-strong); }
.wf-stage__site { display: grid; grid-template-rows: auto 1fr auto; gap: var(--wf-s4); padding: var(--wf-s5); background: var(--tone); color: var(--tone-ink); }
.wf-stage__site .wf-spec { align-self: center; }
.wf-stage__nav { display: flex; gap: var(--wf-s5); font-size: var(--wf-t-base); opacity: .85; }
.wf-stage__go { justify-self: start; font-family: var(--wf-font); font-weight: 700; font-size: var(--wf-t-sm);
  padding: var(--wf-s2) var(--wf-s4); border-radius: var(--wf-r-pill); background: var(--tone-ink); color: var(--tone); }

@media (min-width: 900px) {
  .wf-stage__strip { display: contents; } .wf-stage__fontlabel { display: none; }   /* the phone wrapper (tester.js) must not hide the grid area */
  .wf-stage__in { grid-template-columns: 5fr 7fr; column-gap: var(--wf-s8); align-content: center;
    grid-template-areas: "h1 view" "lede view" "text view" "fonts view" "ctx view" "meta view"; }
  .wf-stage .wf-hero__h1 { grid-area: h1; } .wf-stage__lede { grid-area: lede; } .wf-stage__field { grid-area: text; }
  .wf-stage__fonts { grid-area: fonts; } .wf-stage__ctx { grid-area: ctx; } .wf-stage__meta { grid-area: meta; }
  .wf-stage__view { grid-area: view; align-self: center; }
  /* The controls sit on one paper slip, so the stickers peek out behind it instead of through it. */
  .wf-stage__in { isolation: isolate; padding: var(--wf-s6); }
  .wf-stage__in::before { content: ""; grid-column: 1; grid-row: 1 / -1; z-index: -1; margin: calc(var(--wf-s6) * -1) calc(var(--wf-s6) * -1);
    background: var(--wf-paper); border: 2px solid var(--wf-line); border-radius: var(--wf-r-l); box-shadow: 0 30px 60px -30px #000; }
}
@media (max-width: 899px) {
  /* A phone gives one poster the stage (review 10): the picture first, then the choices, one hand. */
  .wf-stage { padding: var(--wf-s5) var(--wf-s4); }
  .wf-stage .wf-hero__bg { display: none; }
  .wf-stage .wf-hero__h1 { order: 0; } .wf-stage__lede { order: 1; } .wf-stage__view { order: 2; } .wf-stage__fonts { order: 3; }
  .wf-stage__field { order: 4; } .wf-stage__ctx { order: 5; } .wf-stage__meta { order: 6; }
  .wf-stage__fonts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block-end: var(--wf-s1); }
  .wf-stage__fonts .wf-seg__opt span { white-space: nowrap; }
  .wf-stage__fontlabel { order: 3; margin: 0; } .wf-stage__strip .wf-stage__fonts > legend { display: none; }
  .wf-stage__strip { order: 3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    gap: var(--wf-s2); min-inline-size: 0; max-inline-size: 100%; }
  .wf-stage__strip .wf-stage__fonts { order: 0; min-inline-size: 0; scroll-padding-inline: var(--wf-s2); }
  .wf-stage__step { display: inline-flex; align-items: center; justify-content: center; }
  .wf-stage__comp--poster { rotate: 0deg; }
  .wf-stage__meta .wf-btn { flex-basis: 100%; justify-content: center; margin: 0; }
}