/* ui.css — shared controls and small components (PDF p.10–11).
   Every rule reads the --on-* roles of the surface it sits on, so the same
   markup is correct on Ink, Chalk, Oyster or Vermilion.

   .btn--primary    Vermilion fill, Ink Text 650 label, 8px radius, 48px;
                    hover #FF6B4D. On a Vermilion field it turns Ink.
   .btn--secondary  outline in the surface foreground, same height
   .field           persistent external label; transparent fill; border in
                    the surface's control colour (Soft Line / Muted Plum)
   .choice          a selectable option; selected = the surface's selected
                    preset (Chalk/Ink on Ink, Cobalt/Chalk on light) plus a
                    check mark, never colour alone
   .badge           status: success / error fill, Chalk label, words; on Ink
                    a Chalk outline as well
   .card            a grouped panel; give it its own surface-* class
   .faq             native <details>; open state is a shape (+ / −) too
   .media / .play   image or film frame (12px), Chalk play tab over imagery
   .facts           structured facts: upright labels, strong values */

/* ---- actions ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--target-preferred);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-primary);
  font-size: var(--text-ui);
  font-variation-settings: var(--type-text-axes);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--color-action-bg);
  color: var(--color-action-text);
  font-weight: var(--weight-strong);
}
.btn--secondary {
  background: transparent;
  color: var(--on-text);
  border-color: var(--on-text);
  font-weight: var(--weight-regular);
}
/* on a Vermilion field the primary turns Ink so it stays visible */
.surface-energy .btn--primary { background: var(--color-brand-ink); color: var(--color-text); }
.btn--block { width: 100%; }
/* hover feedback only where the pointer hovers: on touch a tapped button
   would keep it after the finger lifts (sticky hover) */
@media (hover: hover) {
  .btn--primary:hover { background: var(--color-action-hover); }
  .btn--secondary:hover { box-shadow: inset 0 0 0 1px var(--on-text); }
  .surface-energy .btn--primary:hover { background: var(--color-brand-ink); box-shadow: inset 0 0 0 2px var(--color-text); }
}
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

/* ---- inputs ---------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
fieldset.field { margin: 0; padding: 0; border: 0; min-width: 0; }
.field__label { padding: 0; font-size: var(--text-ui); font-weight: var(--weight-strong); color: var(--on-text); }
.field__hint { font-size: var(--text-caption); color: var(--on-muted); }
.field__input {
  min-height: var(--target-preferred);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  color: var(--on-text);
  border: 1px solid var(--on-control);
  border-radius: var(--radius-control);
  font-size: var(--text-ui);
  transition: border-color var(--duration-fast) var(--ease-out);
}
@media (hover: hover) { .field__input:hover { border-color: var(--on-text); } }
/* autofilled fields keep the surface's own colours (10 Oct 2026; browsers
   paint them blue or yellow with !important): the surface colour is laid
   over the browser's fill as an inset shadow, the text and caret keep the
   surface's text colour, and the browser's fill never fades in. Two rules,
   so a browser that knows only one of the selectors still applies it; a
   focused field keeps its focus gap next to the fill */
.field__input:autofill {
  -webkit-text-fill-color: var(--on-text);
  caret-color: var(--on-text);
  box-shadow: inset 0 0 0 100vmax var(--on-bg);
  transition: border-color var(--duration-fast) var(--ease-out), background-color 0s 86400s;
}
.field__input:-webkit-autofill {
  -webkit-text-fill-color: var(--on-text);
  caret-color: var(--on-text);
  box-shadow: inset 0 0 0 100vmax var(--on-bg);
  transition: border-color var(--duration-fast) var(--ease-out), background-color 0s 86400s;
}
.field__input:autofill:focus-visible { box-shadow: inset 0 0 0 100vmax var(--on-bg), 0 0 0 var(--focus-gap) var(--on-focus-gap); }
.field__input:-webkit-autofill:focus-visible { box-shadow: inset 0 0 0 100vmax var(--on-bg), 0 0 0 var(--focus-gap) var(--on-focus-gap); }
.field__input[aria-invalid="true"] { border-color: var(--on-text); border-width: 2px; }
.field__error { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-caption); color: var(--on-text); }

/* ---- status badges: words + fill (+ Chalk outline on Ink) ------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 1px var(--on-badge-outline);
  color: var(--color-text);              /* Chalk label on both fills */
  font-size: var(--text-caption);
  font-weight: var(--weight-strong);
}
.badge--success { background: var(--color-success); }
.badge--error { background: var(--color-error); }

/* ---- selectable options ------------------------------------------------------ */
.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-preferred);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--on-control);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--on-text);
  font-size: var(--text-ui);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
@media (hover: hover) { .choice:hover { border-color: var(--on-text); } }
.choice[aria-pressed="true"], .choice.is-selected {
  background: var(--on-selected-bg);
  border-color: var(--on-selected-bg);
  color: var(--on-selected-text);
  font-weight: var(--weight-strong);
}
/* the check mark is drawn (neither family has U+2713), so it looks the same everywhere */
.choice__tick, .tick { display: none; width: 0.7em; height: 0.7em; flex: none; position: relative; }
.choice__tick::before, .tick::before {
  content: "";
  position: absolute;
  left: 0.22em;
  top: 0;
  width: 0.3em;
  height: 0.55em;
  border: solid currentColor;
  border-width: 0 0.13em 0.13em 0;
  transform: rotate(45deg);
}
.tick { display: inline-block; }
.choice[aria-pressed="true"] .choice__tick, .choice.is-selected .choice__tick { display: inline-block; }

/* ---- grouping ---------------------------------------------------------------- */
.card {
  background: var(--on-bg);
  color: var(--on-text);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}
.card--outline { box-shadow: inset 0 0 0 1px var(--on-line); }

/* ---- FAQ ----------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--on-line); }
.faq details { border-bottom: 1px solid var(--on-line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding: var(--space-4) 0;
  font-size: var(--text-body);
  font-weight: var(--weight-strong);
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary > span { flex: 1 1 auto; min-width: 0; }
.faq summary::after {
  content: "+";
  content: "+" / "";  /* the open state is announced by <details>; the sign is decoration */
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--on-control);
  border-radius: var(--radius-control);
  font-weight: var(--weight-regular);
  font-size: 1.25rem;
  line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; content: "\2212" / ""; }
.faq details p { max-width: var(--measure); margin: 0 0 var(--space-5); }

/* ---- media ----------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-brand-ink);
}
.media > img, .media > video, .media > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* a focused film draws its ring around the whole frame, on the section's
   surface (an inset ring would sit on the picture and vanish on bright
   footage) */
.media:has(> video:focus-visible, > iframe:focus-visible) {
  outline: var(--focus-width) solid var(--on-focus);
  outline-offset: var(--focus-gap);
  box-shadow: 0 0 0 var(--focus-gap) var(--on-focus-gap);
}
.media > video:focus-visible, .media > iframe:focus-visible { outline: none; box-shadow: none; }
/* an embedded player fills the frame; focus inside its document never matches
   :focus-visible here, so the frame shows the ring while it holds focus */
.media > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media.is-playing:has(> iframe):focus-within {
  outline: var(--focus-width) solid var(--on-focus);
  outline-offset: var(--focus-gap);
  box-shadow: 0 0 0 var(--focus-gap) var(--on-focus-gap);
}
.media__caption { margin-top: var(--space-3); font-size: var(--text-caption); color: var(--on-muted); }
/* play control over imagery: a Chalk tab with an Ink mark, reading preset */
.play {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target-preferred);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--color-bg-reading);
  color: var(--color-text-reading);
  font-size: var(--text-ui);
  font-weight: var(--weight-strong);
  cursor: pointer;
  --on-focus: var(--color-focus-reading);
  --on-focus-gap: var(--color-bg-reading);
  transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.play { text-decoration: none; }
.play:hover { text-decoration: none; }
@media (hover: hover) { .play:hover { background: var(--color-surface-reading); } }
.play:active { transform: translateY(1px); }
.play__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--color-brand-ink);
  forced-color-adjust: none; /* keep the triangle a triangle in forced colours */
}
.play__icon::before {
  content: "";
  margin-left: 3px;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent var(--color-text);
}

/* ---- ordered steps ------------------------------------------------------------ */
.steps { margin: var(--space-4) 0; padding-left: 1.4em; }
.steps li { margin: 0 0 var(--space-3); padding-left: var(--space-1); }
.steps li::marker { font-weight: var(--weight-strong); }

/* ---- structured facts ------------------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0 var(--grid-gutter); margin: 0; }
.facts__item { padding: var(--space-5) 0; border-top: 1px solid var(--on-line); }
.facts__label { font-variation-settings: var(--type-text-axes); margin: 0 0 var(--space-2); font-size: var(--text-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--on-muted); }
.facts__value { margin: 0; font-size: var(--text-h3); font-weight: var(--weight-strong); line-height: var(--leading-h3); }
.facts__value--text { font-size: var(--text-body); line-height: 1.4; }
.facts--compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.facts--compact .facts__value { font-size: var(--text-lead); }

/* ---- browser analytics exclusion confirmation ------------------------- */
.analytics-note {
  position: fixed;
  bottom: var(--space-5);
  inset-inline: var(--space-4);
  z-index: 10000;
  width: fit-content;
  max-width: calc(100vw - var(--space-6));
  margin-inline: auto;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--on-control);
  border-radius: var(--radius-control);
  background: var(--on-bg);
  color: var(--on-text);
  font-size: var(--text-ui);
}

/* ---- scroll cue: one shared component for the openings that fill the
   screen (homepage hero, For Clubs C01, …; 9 Oct 2026). A discreet round
   button with a down chevron, no text (aria-label on the link), bottom
   right of its section, which must be position: relative. It bobs gently;
   static under reduced motion. Wide screens only: phones and tablets scroll
   without it. On a film it takes an Ink panel (hero-film.css); on a plain
   surface a Soft Line edge. */
.scroll-cue {
  position: absolute;
  right: var(--page-margin);
  bottom: var(--space-6);
  z-index: 1;
  display: none;
  place-items: center;
  width: var(--target-preferred);
  height: var(--target-preferred);
  border-radius: 50%;
  background: var(--scroll-cue-bg, transparent);
  box-shadow: inset 0 0 0 1px var(--scroll-cue-edge, var(--on-control));
  color: var(--on-text);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
@media (hover: hover) { .scroll-cue:hover { box-shadow: inset 0 0 0 1px var(--on-text); } }
@media (min-width: 1024px) { .scroll-cue { display: grid; } }
.scroll-cue__arrow { width: 12px; height: 12px; margin-top: -5px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue__arrow { animation: scroll-cue 2.2s var(--ease-out) infinite; }
}
@keyframes scroll-cue { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }