/* interest.css — "Tell us where you train", the participant-interest page.
   One short Ink section: the invitation on the left, the form on a Chalk
   card on the right (Chalk for the practical task: Muted Plum control
   borders, Cobalt links, focus and ticked boxes). No competing actions
   beside the form. */

.interest { min-height: calc(100svh - var(--header-h) - var(--review-offset, 0px)); display: flex; align-items: center; }
.interest > .container { width: 100%; }
.interest__grid { align-items: start; row-gap: var(--space-7); }
.interest__intro, .interest__card { grid-column: 1 / -1; }
.interest__intro h1 { margin: 0 0 var(--space-5); }
.interest__intro .t-lead { margin: 0 0 var(--space-5); max-width: var(--measure); }
.interest__promise { margin: 0; max-width: var(--measure); color: var(--on-text); }
.interest__promise, .interest__intro .t-lead { text-wrap: pretty; }
@media (min-width: 1024px) {
  .interest__intro { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + var(--space-7)); }
  .interest__card { grid-column: 7 / span 6; }
}
/* landscape phones (wide but short): the opening compacts as the other
   openings do (clubs-hero.css), so the card's top and the first field
   already show on the first screen */
@media (min-width: 640px) and (max-width: 1023px) and (max-height: 540px) {
  .interest { padding-block: var(--space-6) var(--space-7); }
  .interest__grid { row-gap: var(--space-6); }
  .interest__intro h1 { font-size: clamp(2.5rem, 1rem + 3.6vw, 3rem); }   /* 40 → 48, one line */
}

.interest__card { padding: clamp(24px, 3.5vw, 48px); }
/* tablets and phones on their side: the card keeps about the desktop
   card's width (6 of 12 columns) instead of stretching every field across
   the screen */
@media (min-width: 640px) and (max-width: 1023px) { .interest__card { max-width: 40rem; } }
.interest-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.interest-form .field__input { width: 100%; min-width: 0; }
/* Required / Optional: what the form needs, so reading size, 16px (owner:
   reading text at least 16px); set apart from the label by weight and colour */
.field__req { margin-left: var(--space-2); font-size: var(--text-ui); font-weight: var(--weight-regular); color: var(--on-muted); }
/* a field's label and its marker as a wrapping row: on a narrow phone a
   marker that no longer fits starts the next line flush with the label,
   not indented by its margin. The gap is the margin plus the word space it
   followed, so a label on one line looks exactly as before. */
.interest-form .field__label { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: calc(var(--space-2) + 0.19em); }
.interest-form .field__label .field__req { margin-left: 0; }
.field__select { appearance: none; -webkit-appearance: none; padding-right: var(--space-7);
  background-image: none; text-overflow: ellipsis; }   /* a long country name ends in "…", not mid-letter */
.field__control { position: relative; display: block; }
.field__control::after {                /* a drawn chevron, no glyph or image; centred on the select alone */
  content: "";
  position: absolute;
  right: var(--space-4);
  top: calc(50% - 7px);
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--on-text);
  border-bottom: 2px solid var(--on-text);
  transform: rotate(45deg);
  pointer-events: none;
}
.interest-form :is(input, select) { scroll-margin-top: 4.5rem; }   /* labels stay clear of the sticky header */
.field__error { font-weight: var(--weight-strong); }
/* the hint and the error messages are sentences: reading size, 16px
   (owner, 9 Oct 2026: reading text at least 16px) */
.interest-form :is(.field__hint, .field__error) { font-size: var(--text-ui); line-height: 1.4; text-wrap: pretty; }   /* no lone last word on a narrow phone */

/* ---- consent checkboxes ---------------------------------------------------
   Native checkboxes drawn in the form's own terms: a 24px box edged in the
   surface's control colour (Muted Plum on Chalk, 2px so the small box holds
   its edge); ticked = the surface's selected preset (Cobalt, Chalk tick)
   plus the drawn tick, so the state is never colour alone. The label (box
   and text, at least 44px tall, no wider than its text) is the target; the
   blank space beside a short label does not tick it. Invalid: an Ink
   edge, heavier, as the text fields; the message sits under the label text.
   Focus: the site's ring on the box. Forced colours: the system checkbox
   with its own tick only. */
.interest-form__choices { display: grid; gap: var(--space-2); }
.field--check { gap: 0; }
.check {
  display: flex;
  align-self: flex-start;                /* as wide as box + text: the blank strip beside a short label never ticks it */
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 44px;
  padding: 10px 0;
  font-size: var(--text-ui);
  line-height: 1.5;                      /* a 24px first line, level with the box */
  color: var(--on-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;   /* the box answers a tap itself: no grey flash over the whole label */
}
.check__text { min-width: 0; text-wrap: pretty; }
.check .field__req { white-space: nowrap; }
.check__input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid var(--on-control);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.check__input::before {                 /* the tick, drawn (as .choice__tick) */
  content: "";
  width: 7px;
  height: 13px;
  margin-top: -3px;
  border: solid var(--on-selected-text);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  visibility: hidden;
}
/* hover only where there is one: on a touch screen the hover state would
   stick to a box after the tap that unticks it */
@media (hover: hover) { .check:hover .check__input:not(:checked) { border-color: var(--on-text); } }
.check__input:checked { background: var(--on-selected-bg); border-color: var(--on-selected-bg); }
.check__input:checked::before { visibility: visible; }
.check__input[aria-invalid="true"] { border-color: var(--on-text); border-width: 3px; }
.field--check .field__error { padding-left: calc(24px + var(--space-3)); }
@media (forced-colors: active) {
  .check__input { appearance: auto; -webkit-appearance: auto; }
  .check__input::before { content: none; }   /* the system tick only, no drawn one over it */
}

/* the spam trap stays in the form but off-screen (not display:none) */
.interest-form__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.interest-form__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-2); }
/* phones: the action fills the card's width, the end of the form rather
   than an object beside it (as the homepage's actions fill their panel) */
@media (max-width: 639px) {
  .interest-form__actions { align-items: stretch; }
  .interest-done > .btn { justify-self: stretch; }
}
.interest-form__submit[aria-disabled="true"] { cursor: progress; }
.interest-form__status { margin: 0; font-size: var(--text-ui); font-weight: var(--weight-strong); }
/* kept in the accessibility tree while empty, so messages are announced */
.interest-form__status:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.interest-form__demo {
  min-height: 44px;
  justify-self: start;
  padding: 0 var(--space-3);
  border: 1px dashed var(--on-control);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--on-text);
  font: inherit;
  font-weight: var(--weight-regular);
  cursor: pointer;
}
.interest-form__privacy { margin: 0; font-size: var(--text-ui); }
.interest-form__privacy a { display: inline-flex; align-items: center; min-height: 44px; }

.interest-done { display: grid; gap: var(--space-5); justify-items: start; }
/* the confirmation takes focus as a region, not as a control: no ring (as
   main:focus, base.css), also when the browser focuses it on a return to
   #thanks; the button inside keeps its own. Arriving at #thanks, the card's
   top edge clears the sticky header as well (scroll-margin = its padding). */
.interest-done:focus { outline: none; box-shadow: none; }
.interest-done { scroll-margin-top: clamp(24px, 3.5vw, 48px); }
.interest-done h2 { margin: 0; font-size: var(--text-h3); line-height: var(--leading-h3); }
.interest-done p { margin: 0; max-width: var(--measure); }
/* when interest.js has not run (no JavaScript, or a script that failed):
   after a native submission Netlify returns the visitor to this page at
   #thanks (the form's action); the confirmation then takes the form's
   place. Once interest.js handles the form it sets html.interest-ready, so
   #thanks never means a submission: a shared link or a reload of it keeps
   the form. Keyed on interest-ready, not html.js (10 Oct 2026): the head
   sets .js before interest.js loads, so a failed script used to leave the
   blank form after a saved entry. base.css hides [hidden] with !important,
   hence the matching weight here. */
html:not(.interest-ready) .interest-done:target[hidden] { display: grid !important; }
html:not(.interest-ready) .interest__card:has(#thanks:target) .interest-form { display: none; }
/* with JavaScript the card waits, blank, until interest.js has run: should
   a browser apply #thanks before the deferred script (Chromium does not),
   a #thanks link still never shows a confirmation that interest.js then
   takes back. A script that never runs leaves the confirmation in view
   after 3 s. Not motion: a timer, so it applies with reduced motion too. */
html.js:not(.interest-ready) .interest__card:has(#thanks:target) { animation: interest-wait 3s step-end both; }
@keyframes interest-wait { from { visibility: hidden; } }
.interest-done__preview { padding: var(--space-2) var(--space-3); border: 1px dashed var(--on-control); border-radius: var(--radius-control); font-size: var(--text-caption); }