/* Dialed · Sign-up (join.html). Page-specific layout only, loaded after site.css.
   One question to a screen on the ground: a heavy ink rule opens each step, the question is the h2, one line says why it is
   asked, and the answers are size chips set in the figure cut, large where the size is common. The viewer's own line on the
   board sits in a tint rail beside the form on a desk and as one sideways-scrolling strip of figure-and-caption pairs on a
   phone. The step chrome itself (the progress rule, the step frame, the action row) and the provider buttons are in site.css.
   Without script every step is visible in order and the single submit posts the form; nothing here hides content by itself.
   Every color is a token. */

/* ---------------------------------------------------------------- layout: the form and the line on the board */
.jn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); gap: var(--s6) var(--s8); align-items: start; }
.jn-main { min-width: 0; }
.jn-foot { margin-top: var(--s7); max-width: 72ch; }

/* ---------------------------------------------------------------- the question: the h2 in the legend, one line of why */
.jn-step h2 { max-width: 32ch; }
.jn-why { color: var(--fg-2); max-width: 62ch; margin-bottom: var(--s5); }
.jn-aside { margin-top: var(--s4); }
.jn-note { max-width: 62ch; margin-top: var(--s3); }
.jn-note p { margin: 0; }
.jn-rows { display: grid; gap: var(--s5); }
.jn-rows .bh { margin-bottom: var(--s2); }
.jn-dest-line { margin-top: var(--s4); font-size: var(--t-1); color: var(--fg-3); max-width: 62ch; }

/* ---------------------------------------------------------------- the drawn figure beside the answers
   One illustration to a question, drawn in the board's own line: 1.5 px non-scaling strokes, the laminate and the ink, the
   figure cut for every number and the tracked label voice for every caption. It is an illustration of the answer and not
   the control, so it carries aria-hidden, holds nothing focusable, and says nothing the step's own words do not already say.
   On a desk it stands in a column beside the chips; below 820 px it sits above them, small enough that the chips keep the
   first screen. Without script it is simply there, drawn at its neutral state. */
.jn-q { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--s5) var(--s6); align-items: start; }
.jn-q > .jn-fig { grid-column: 2; grid-row: 1; margin: 0; min-width: 0; }
.jn-q > .jn-qa { grid-column: 1; grid-row: 1; min-width: 0; }
.jn-fig svg { display: block; width: 100%; height: auto; }
/* the line vocabulary: ink outline, boundary outline, hairline, the laminate plane, the tint band, the lit tile */
.jn-fig .fo, .jn-fig .fo2, .jn-fig .fru, .jn-fig .fp, .jn-fig .fp2, .jn-fig .ftile, .jn-fig .fgar path {
  stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.jn-fig .fo { fill: none; stroke: var(--fg); }
.jn-fig .fo2 { fill: none; stroke: var(--line); }
.jn-fig .fru { fill: none; stroke: var(--rule); }
.jn-fig .fp { fill: var(--bg); stroke: var(--fg); }
.jn-fig .fp2 { fill: var(--bg); stroke: var(--line); }
.jn-fig .fplate { fill: var(--bg); stroke: none; }        /* the break in a dimension line that the figure sits in */
.jn-fig .fband { fill: var(--tint); stroke: none; }        /* the shaded clearance between two widths */
.jn-fig .ftile { fill: var(--tile); stroke: var(--tile-rule); }
/* a garment is an outline until it is chosen, then it fills: the board's filled-glyph state, in a flat sketch */
.jn-fig .fgar path { fill: var(--bg); stroke: var(--line);
  transition: fill var(--dur-2) var(--ease-out), stroke var(--dur-2) var(--ease-out); }
.jn-fig .fgar.is-on path { fill: var(--tint); stroke: var(--fg); }
.jn-fig .fgar path.fline { fill: none; }
/* every number in the figure cut, every caption in the label voice, the quiet aside in the reading face */
.jn-fig .fnum { font-family: var(--font-narrow); font-stretch: 100%; font-weight: 800; font-variant-numeric: tabular-nums lining-nums; fill: var(--figure); }
.jn-fig .flab { font-family: var(--font-semi); font-stretch: 100%; font-weight: 700; letter-spacing: .1em; fill: var(--fg-3); }
.jn-fig .ftl { font-family: var(--font-semi); font-stretch: 100%; font-weight: 700; letter-spacing: .1em; fill: var(--tile-fg-2); }
.jn-fig .fqt { font-family: var(--font); font-stretch: 100%; font-weight: 600; fill: var(--fg-3); }

/* ---------------------------------------------------------------- size chips: the chip spec with the value in the figure cut;
   the sizes most skiers buy are drawn larger, so the row reads as a board and the common answer is the easy target */
.szs { display: flex; flex-wrap: wrap; gap: 8px; }
.sz { position: relative; display: inline-flex; }
.sz input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sz > span { display: inline-flex; align-items: center; justify-content: center; min-width: 3.5rem; min-height: 44px; padding: 0 12px;
  border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--fg-2);
  font-family: var(--font-narrow); font-stretch: 100%; font-weight: 800; font-size: var(--t1); line-height: 1; letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.sz.is-common > span { min-width: 4.5rem; min-height: 54px; font-size: var(--t2); }
@media (hover: hover) and (pointer: fine) { .sz:hover > span { border-color: var(--fg); color: var(--fg); } }
.sz input:checked + span { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.sz input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.sz:active > span { transform: scale(.98); }
.sz input:active:not(:checked) + span { background: var(--bg-2); }

/* ---------------------------------------------------------------- the destination: the system's segmented control, built on
   radios so it answers without script. One shared 1.5 px border, 1.5 px dividers, the pressed cell filled with ink. */
.jn-seg { display: inline-flex; max-width: 100%; border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.jn-sg { position: relative; display: inline-flex; flex: 1 1 auto; min-width: 0; }
.jn-sg + .jn-sg { border-left: 1.5px solid var(--line); }
.jn-sg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.jn-sg > span { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 10px 16px;
  background: var(--bg); color: var(--fg-2); font-weight: 600; font-size: var(--t-1); white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .jn-sg:hover > span { color: var(--fg); background: var(--bg-2); } }
.jn-sg input:checked + span { background: var(--fg); color: var(--bg); }
.jn-sg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -2px; }
.jn-seg .short { display: none; }

/* ---------------------------------------------------------------- the account step: the recap, the providers, the address */
.jn-recap-h { margin: 0 0 var(--s2); }
.jn-recap { border-top: 2px solid var(--fg); margin: 0 0 var(--s5); max-width: 34rem; }
.jn-recap > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: 9px 0 8px; border-bottom: 1px solid var(--rule); min-width: 0; }
.jn-recap dt { font-size: var(--t-2); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); font-family: var(--font-semi); font-stretch: 100%; flex: none; line-height: 1.2; }
.jn-recap dd { margin: 0; font-size: var(--t2); font-weight: 800; font-family: var(--font-narrow); font-stretch: 100%; font-variant-numeric: tabular-nums lining-nums; line-height: 1.1; color: var(--figure); text-align: right; overflow-wrap: anywhere; min-width: 0; }
.jn-recap dd.is-empty { font-size: var(--t-1); font-weight: 600; font-family: var(--font-semi); color: var(--fg-3); letter-spacing: 0; }
/* each provider is its own column: the button, and under it the line that only an unavailable provider shows */
.jn-provs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s3) var(--s4); }
.jn-prov { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
/* not configured on the server, or no server to ask: the real mark and the real words, muted from the tokens rather than
   faded (a 50% fade would not hold 4.5:1), and with no href, so it is neither a link nor a focus stop nor pressable */
.btn.prov[aria-disabled="true"] { opacity: 1; border-color: var(--line); color: var(--fg-3); cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .btn.prov[aria-disabled="true"]:hover { background: transparent; border-color: var(--line); color: var(--fg-3); }
}
.jn-prov-off { margin: 0; font-size: var(--t-2); font-weight: 600; color: var(--fg-3); }
.jn-or { margin: var(--s4) 0 var(--s3); font-size: var(--t-1); font-weight: 600; color: var(--fg-3); }
.jn-mail { max-width: 26rem; }
.jn-mail .err[hidden] { display: none; }

/* ---------------------------------------------------------------- check your email: the board's own waiting state */
.jn-sent { border-top: 2px solid var(--fg); padding-top: var(--s4); max-width: 54ch; }
.jn-sent-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.jn-sent-p { margin-top: var(--s3); color: var(--fg-2); }
.jn-sent-p b { color: var(--fg); overflow-wrap: anywhere; }
.jn-sent .rowbtns { margin-top: var(--s4); }
.jn-sent .note { margin-top: var(--s2); }

/* ---------------------------------------------------------------- the rail: the answers so far, each one the way back to its step */
.jn-rail { position: sticky; top: var(--s5); min-width: 0; --rule: color-mix(in srgb, var(--on-tint) 26%, transparent); padding: var(--s4) var(--s5) var(--s5); border-radius: var(--radius); }
.jn-rail .bh { margin-bottom: var(--s2); }
.jn-ans { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--on-tint); }
.jn-ans li { margin: 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.jn-a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); width: 100%; min-height: 44px; padding: 7px 0; margin: 0;
  border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.jn-ak { font-size: var(--t-2); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); font-family: var(--font-semi); font-stretch: 100%; flex: none; line-height: 1.2; }
.jn-av { font-size: var(--t2); font-weight: 800; font-family: var(--font-narrow); font-stretch: 100%; font-variant-numeric: tabular-nums lining-nums; line-height: 1.1; color: var(--figure); text-align: right; overflow-wrap: anywhere; min-width: 0; }
.jn-av.is-empty { font-size: var(--t-1); font-weight: 600; font-family: var(--font-semi); color: var(--fg-3); letter-spacing: 0; }
.jn-av.is-text { font-size: var(--t-1); font-weight: 700; font-family: var(--font); font-stretch: 100%; letter-spacing: 0; color: var(--tint-fg); }
/* the step being answered is marked the way the nav marks the current page: an inset rule under the row, never a side stripe */
.jn-ans li[aria-current="step"] .jn-ak { color: var(--tint-fg); font-weight: 800; }
.jn-ans li[aria-current="step"] { box-shadow: inset 0 -2px 0 var(--on-tint); }
@media (hover: hover) and (pointer: fine) { .jn-a:hover .jn-av, .jn-a:hover .jn-ak { text-decoration: underline; text-underline-offset: .18em; } }
.jn-a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.jn-a:active { transform: scale(.99); opacity: .72; }
.jn-rail-p { margin-top: var(--s3); font-size: var(--t-1); line-height: 1.45; }

/* ---------------------------------------------------------------- breakpoints */
@media (max-width: 1100px) {
  .jn { grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); gap: var(--s6); }
  .jn-q { grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--s4) var(--s5); }
}
@media (max-width: 820px) {
  /* the figure leaves the side and sits above the chips, capped so the answers keep the first screen at 390 */
  .jn-q { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .jn-q > .jn-fig { grid-column: 1; grid-row: 1; max-width: 15rem; }
  .jn-q > .jn-qa { grid-column: 1; grid-row: 2; }
  /* the rail leaves the side and becomes one strip under the step: figure over caption, the board's clock, scrolling sideways */
  .jn { grid-template-columns: minmax(0, 1fr); }
  .jn-rail { position: static; padding: var(--s3) var(--s4) var(--s4); }
  .jn-rail .bh { margin-bottom: var(--s2); }
  /* the strip bleeds to the block's padding edge and fades over its last 32 px, so a clipped answer reads as more to the right */
  .jn-ans { display: flex; gap: var(--s5); overflow-x: auto; overscroll-behavior-x: contain; padding: 2px var(--s4) 4px 2px; margin-right: calc(var(--s4) * -1); scrollbar-color: var(--on-tint) transparent;
    -webkit-mask-image: linear-gradient(to right, rgb(0 0 0) calc(100% - 32px), transparent); mask-image: linear-gradient(to right, rgb(0 0 0) calc(100% - 32px), transparent); }
  .jn-ans li { border-bottom: 0; flex: none; }
  .jn-ans li[aria-current="step"] { box-shadow: none; }
  .jn-ans li[aria-current="step"] .jn-av { box-shadow: inset 0 -2px 0 var(--on-tint); }
  .jn-a { flex-direction: column-reverse; align-items: flex-start; justify-content: flex-end; gap: 5px; min-height: 44px; min-width: 44px; }
  .jn-ak, .jn-av { text-align: left; }
  .jn-av { font-size: var(--t3); white-space: nowrap; }
  .jn-rail-p { display: none; }
}
@media (max-width: 560px) {
  .jn-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .jn-seg .long { display: none; }
  .jn-seg .short { display: inline; }
  .jn-sg > span { padding: 10px 6px; }
  .sz > span { min-width: 3.25rem; }
  .jn-rows .sz > span { min-width: 3rem; padding: 0 8px; }   /* six apparel chips stay on one line at 390 */
  .sz.is-common > span { min-width: 4rem; min-height: 50px; }
  .jn-recap dd { font-size: var(--t1); }
  .jn-prov { flex: 1 1 100%; }
  .jn-foot { margin-top: var(--s6); }
}

/* ===== motion. Tokens from site.css :root; the reduced-motion path is at the end. ===== */
/* a step arrives like a board row: from 6 px below to rest over --dur-2, from the visible default, only when a press moved it */
@keyframes jn-in { from { opacity: 0; transform: translateY(6px); } }
.jn-step.is-in { animation: jn-in var(--dur-2) var(--ease-out) both; }
/* the boot note opens under its button; without script it is simply there, so only a press animates it */
@keyframes jn-note-in { from { opacity: 0; transform: translateY(-6px); } }
.jn-note.is-in { animation: jn-note-in var(--dur-2) var(--ease-out) both; }
/* the check-your-email panel settles in once it is written (it is hidden in the markup, so this never runs on load) */
.jn-sent:not([hidden]) { animation: jn-in var(--dur-2) var(--ease-out) both; }
/* the figure answers the chip. Every moving part is a group the script translates or scales in the viewBox's own units, so
   the change is one transform over --dur-2 and the 1.5 px line never thickens; a value that appears or leaves fades with it. */
.jn-fig .fm { transform-box: view-box; transform-origin: 0 0;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
/* the one thing that plays: the figure draws itself in along its own box the first time its step is shown, the way a grade
   glyph wipes in on how-we-grade. Once per figure per page view, and never again as the step is walked back to. */
@keyframes jn-fig-draw { from { clip-path: inset(0 100% 0 0); opacity: .35; } }
.jn-fig.is-draw svg { animation: jn-fig-draw var(--dur-3) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  .jn-step.is-in, .jn-note.is-in, .jn-sent:not([hidden]) { animation: none; }
  .jn-fig.is-draw svg { animation: none; }
  .jn-fig .fm, .jn-fig .fgar path { transition: none; }
  .jn-a:active { transform: none; }
}


/* On a phone the figure is an aid, not the question: it gives way so the answers reach the first viewport. The boot
   step has the most chips and the least room, so this is where it counts. */
@media (max-width: 560px) {
  .jn-q > .jn-fig { max-width: 9.5rem; }
  .jn-q > .jn-fig figcaption { margin-top: 2px; }
}