/* Krischan Digital & Co. client forms (/start/, /kentucky-cryo/), v2.
   Loads after tokens.css and styles.css. Mobile first, works at 320 px.
   Contrast (WCAG 2.2 AA, see tokens.css for the full list): --ink on --picked 15.05:1 · --muted on --picked 5.87:1
   · --muted on --bone 6.41:1 · --field-line borders on --paper 4.8:1 · --err on --err-bg 6.35:1
   · --on-ink-muted on --ink 7.59:1 (intro band).
   --cta stays reserved for the one Send button. Form markup is unchanged from v1; only the styling is new. */
:root { --form-max: 46rem; }

/* Intro band (dark) */
.form-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--on-ink);
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.form-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(246, 243, 236, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 243, 236, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 95% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 80% at 95% 0%, #000 0%, transparent 72%);
}
.form-hero > .wrap { position: relative; }
.form-intro h1 {
  max-width: 16ch;
  font-size: clamp(2.375rem, 1.4rem + 4.4vw, 4.75rem);
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 0.98;
  margin-bottom: 1.25rem;
}
.form-intro .lede { margin-bottom: 0.75rem; color: var(--on-ink); font-size: var(--step-1); font-weight: 500; }
.form-intro p:not(.eyebrow):not(.lede) { max-width: 40rem; color: var(--on-ink-muted); margin: 0; }
/* v6 (2026-10-20): links in the intro band and in a part's note; inline links get 44 px of tap height. */
.form-intro p a { color: var(--on-ink); font-weight: 600; padding-block: 0.85rem; }
.part-head p a, .send-box .form-privacy a { color: var(--ink); font-weight: 600; padding-block: 0.85rem; }

/* Body layout: list of parts, then the form (side by side on wide screens) */
.form-layout { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) var(--space-5); }
.qform { margin: 0; min-width: 0; max-width: var(--form-max); }

/* The list of parts */
.parts-nav { margin: 0 0 var(--space-4); }
.parts-nav h2 {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}
.parts-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.4rem;
  counter-reset: part;
}
.parts-nav li { counter-increment: part; display: flex; }
.parts-nav a {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.4rem 0.75rem 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  font-size: var(--step--1);
  font-weight: 550;
  line-height: 1.25;
  text-decoration: none;
}
.parts-nav a::before {
  flex: none;
  content: counter(part);
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.parts-nav a:hover { border-color: var(--ink); text-decoration: underline; }

/* One part = one chapter of the form */
.part { margin-bottom: clamp(3rem, 2.5rem + 2vw, 4.5rem); scroll-margin-top: calc(var(--header-h) + 1rem); }
.part-head { margin-bottom: 0.5rem; padding-top: 1.25rem; border-top: 2px solid var(--ink); }
.part-head .eyebrow { margin-bottom: 0.6rem; }
.part-head h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); margin-bottom: 0.5rem; }
.part-head p { margin: 0 0 0.5rem; color: var(--muted); max-width: 40rem; }

/* One question: no box, a hairline between questions */
.q {
  min-width: 0;
  margin: 0;
  padding: 1.5rem 0 0.75rem;
  border: 0;
  border-top: 1px solid var(--line);
}
.part-head + .q, .part-head + .note + .q { border-top: 0; }
.q legend {
  float: left;            /* keeps the legend inside the flow of the question */
  width: 100%;
  padding: 0;
  margin: 0 0 0.75rem;
  font-size: var(--step-1);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.q legend + * { clear: both; }
.q-help { margin: 0 0 0.85rem; color: var(--muted); font-size: var(--step--1); }
.q-help ul { margin: 0.25rem 0 0; }
.q-help li { margin-bottom: 0.3rem; }
.q .field { margin: 0.75rem 0 1rem; }
.q .field label { font-size: var(--step--1); }
.qform .field input[type="email"],
.qform .field input[type="tel"] { max-width: 28rem; }
.q-rec {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The one required name box on /kentucky-cryo/ */
.start-box {
  margin-bottom: var(--space-4);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--radius);
  background: var(--bone);
}
.start-box .field { margin-bottom: 0; }
.start-box .field input { max-width: 28rem; }

/* Answer choices: big tap targets */
.choices { display: grid; gap: 0.5rem; margin: 0 0 1rem; }
.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 50px;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--paper-2);
  cursor: pointer;
  line-height: 1.4;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.choice input {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.05rem 0 0;
  accent-color: var(--ink);
  cursor: pointer;
}
.choice:hover { border-color: var(--ink); }
.choice:has(input:checked) { border-color: var(--ink); background: var(--picked); box-shadow: inset 0 0 0 1px var(--ink); }
.choice:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.choice input:focus-visible { outline: none; }
.choice small { display: block; margin-top: 0.1rem; color: var(--muted); font-size: var(--step--1); }

/* Wording to approve */
.wording {
  margin: 0 0 1rem;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--ink);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bone);
}
.wording p { margin: 0 0 0.6rem; }
.wording p:last-child { margin-bottom: 0; }
.wording ol { margin: 0; padding-left: 1.25rem; }
.wording li { margin-bottom: 0.75rem; }
.blank { padding: 0 0.25em; border-radius: 3px; background: var(--picked); color: var(--ink); font-style: italic; }
details.more { margin: 0 0 1rem; }
details.more summary {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 0.5rem 0.9rem;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: "+"; margin-left: auto; padding-left: 0.75rem; font-size: 1.375rem; line-height: 1; }
details.more[open] summary::after { content: "\2212"; }
details.more[open] summary { margin-bottom: 0.75rem; }

/* Before-and-after thumbnails */
.q-photo img {
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-bottom: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

/* Info notes */
.note {
  margin: 0.5rem 0 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-sm);
  background: var(--bone);
  font-size: var(--step--1);
}
.note p:last-child, .note ul:last-child { margin-bottom: 0; }

/* File uploads */
.qform input[type="file"] {
  width: 100%;
  min-height: 52px;
  padding: 0.6rem;
  border: 1.5px dashed var(--field-line);
  border-radius: 10px;
  background: var(--paper-2);
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
}
.qform input[type="file"]::file-selector-button {
  min-height: 40px;
  margin-right: 0.75rem;
  padding: 0.4rem 0.95rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.file-clear {
  min-height: 44px;
  margin-top: 0.4rem;
  padding: 0.4rem 0.95rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
}
.files-status { margin: 0 0 1rem; color: var(--muted); font-size: var(--step--1); }
.files-status:empty { display: none; }

/* Errors (shown inline by forms.js; the browser's own messages without it) */
.error-msg {
  display: block;
  margin: 0.4rem 0 0;
  padding: 0.45rem 0.7rem;
  border-left: 4px solid var(--err);
  border-radius: 4px;
  background: var(--err-bg);
  color: var(--err);
  font-size: var(--step--1);
  font-weight: 600;
}
.qform [aria-invalid="true"] { border-color: var(--err); }
.files-status.is-error {
  display: block;
  padding: 0.55rem 0.8rem;
  border-left: 4px solid var(--err);
  border-radius: 4px;
  background: var(--err-bg);
  color: var(--err);
  font-weight: 600;
}

/* Send */
.send-box {
  margin-top: 1.5rem;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--radius);
  background: var(--bone);
}
.send-box .choice { background: var(--paper); }
.send-box .btn { width: 100%; min-height: 58px; font-size: var(--step-1); }
.send-box .form-privacy { margin-top: 1rem; }

@media (min-width: 40em) {
  .choices.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .send-box .btn { width: auto; padding-inline: 2rem; }
}
@media (min-width: 48em) {
  .q-photo .photo-row { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: start; }
  .q-photo img { margin-bottom: 0; }
}
/* Wide screens: the parts list becomes a sticky side column */
@media (min-width: 64em) {
  .form-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; align-items: start; }
  /* Short laptop screens: the list scrolls inside itself instead of running off the bottom. */
  .parts-nav {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    max-height: calc(100vh - var(--header-h) - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: -8px;          /* room inside the scroll box for the 3px focus ring */
    padding: 8px;
    scrollbar-width: thin;
  }
  .parts-nav ol { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
  .parts-nav a { min-height: 46px; padding-inline: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
  .parts-nav a:hover { border-color: var(--line); }
  .parts-nav a::before { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; }
}

@media (forced-colors: active) {
  .choice:has(input:checked) { outline: 2px solid CanvasText; }
  .parts-nav a::before { border: 1px solid CanvasText; }
}
@media print {
  .parts-nav, .send-box .btn, .form-hero::before { display: none; }
  .form-hero { background: #fff; color: #000; }
}

/* ---------- 2026-10-14: the /start/ chooser and the coach and creator form (/start/coach/) ----------
   New selectors only; nothing above this line changed. Contrast: --ink on --paper 18.55:1 ·
   --muted on --paper 7.24:1 · --ink on --bone 16.44:1 (card hover) · --on-ink on --ink-2 14.82:1 (child note)
   · --on-ink-muted on --ink 7.59:1 (small lines in the dark band). The cards are links, not the main action,
   so they stay paper and ink; coral is still only the Send button. */

/* Chooser: two big tappable cards in the dark intro band */
.path-nav { margin: 1.75rem 0 0; max-width: 62rem; }
.path-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.path-list li { display: flex; }
.path-card {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 1rem;
  min-height: 96px;
  padding: 1.15rem 1.15rem 1.15rem 1.35rem;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.path-card:hover { background: var(--bone); }
.path-text { display: grid; gap: 0.3rem; flex: 1; min-width: 0; }
.path-title { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.path-note { color: var(--muted); font-size: var(--step--1); line-height: 1.45; }
.path-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  transition: transform 0.25s var(--ease);
}
.path-card:hover .path-arrow { transform: translateX(3px); }
.path-card[href^="#"]:hover .path-arrow { transform: translateY(3px); }
.path-else, .path-switch { max-width: 40rem; margin: 1.25rem 0 0; color: var(--on-ink-muted); font-size: var(--step--1); line-height: 1.6; }
/* Inline links in the dark band: padding grows the tap area without moving the text. */
.path-else a, .path-switch a { padding-block: 0.85rem; color: var(--on-ink); font-weight: 600; }

/* The business form's own intro, now under the chooser (#business) */
.path-intro { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem) 0; }
.path-intro h2 { max-width: 18ch; font-size: clamp(2.125rem, 1.5rem + 3vw, 3.75rem); font-weight: 750; letter-spacing: -0.04em; line-height: 1; margin-bottom: 1rem; }
.path-intro .lede { margin-bottom: 0.75rem; font-size: var(--step-1); font-weight: 500; }
.path-intro p:not(.eyebrow):not(.lede):not(.child-note) { max-width: 40rem; margin: 0; color: var(--muted); }
/* The note about children's names and photos, on light (the coach form's .kid-note sits on dark) */
.child-note {
  max-width: 40rem;
  margin: 1.25rem 0 0;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--ink);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bone);
  color: var(--ink);
  line-height: 1.5;
}

/* Coach form: the note about children, in the dark band */
.kid-note {
  max-width: 40rem;
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--on-ink);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--ink-2);
  color: var(--on-ink);
  line-height: 1.5;
}

/* Hints placed beside the label (not inside it), so screen readers read them once */
.qform .field > .hint { display: block; margin: -0.15rem 0 0.45rem; color: var(--muted); font-size: var(--step--1); font-weight: 400; line-height: 1.4; }

/* A question title that isn't a legend (the prices block) */
.q-title { margin: 0 0 0.5rem; font-size: var(--step-1); font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; }

/* One offer: price, per what, how long */
.offer {
  min-width: 0;
  margin: 0 0 0.75rem;
  padding: 1rem 1rem 0.25rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--paper-2);
}
.q .offer legend { margin-bottom: 0.25rem; font-size: var(--step-0); }
.offer .field { margin: 0.5rem 0 1rem; }
.per { min-width: 0; margin: 0 0 0.5rem; padding: 0; border: 0; }
.q .per legend { margin-bottom: 0.4rem; font-size: var(--step--1); font-weight: 600; letter-spacing: 0; line-height: 1.4; }
.offer .choice { background: var(--paper); }
details.more .offer { margin-top: 0; }

/* Short answers side by side, wrapping as needed (seasons, per what) */
.choices.row { display: flex; flex-wrap: wrap; }
.choices.row .choice { flex: 0 1 auto; padding-right: 1.1rem; }

/* The photo-permission box: the whole box ticks it, and forms.js's message drops below the text */
.choice.consent { position: relative; flex-wrap: wrap; }
.choice.consent label { flex: 1 1 0; min-width: 0; cursor: pointer; }
.choice.consent label::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.choice.consent .error-msg { order: 3; flex: 1 0 100%; }

@media (min-width: 48em) {
  .path-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .path-card { min-height: 128px; padding: 1.5rem 1.5rem 1.5rem 1.75rem; }
}
@media (forced-colors: active) {
  .path-card, .offer { border: 2px solid CanvasText; }
  .path-arrow { border: 1px solid CanvasText; }
}