/* Reusable pieces: buttons, fields, cards, badges, overlays.
 *
 * Numbers come from the mockup (fig-spec). The mockup draws no rounded corners
 * on controls — radius 0 is a decision there, not an omission — and no hover,
 * focus, active or error state at all: those are added here in its language.
 */

/* ── buttons ──────────────────────────────────────────────────────────── */
/* join-now 94×40, padding 0 18, Manrope ExtraBold 13/18 (fig-spec 0:26).
   Modal buttons are 56 tall with 15px text (fig-spec 0:2326). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: 40px; padding: 0 var(--space-20);
  border: 0; border-radius: 0;
  background: transparent; color: inherit;
  font-family: var(--font-body); font-weight: 800;
  font-size: var(--fs-xs); line-height: 18px;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn--block { display: flex; width: 100%; min-height: 56px; font-size: var(--fs-body-sm); line-height: 20px; }

.btn--primary { background: var(--color-brand); color: var(--color-text); }
.btn--primary:hover { background: var(--color-brand-hover); }
.btn--primary:active { background: var(--color-brand-active); }

/* the mockup's hero CTA: white block, brand text (fig-spec 0:3612) */
.btn--light { background: var(--color-text); color: var(--color-brand); }
.btn--light:hover { background: var(--color-sand); }

.btn--outline { box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-sand); }
/* On a light section the sand text disappears — the outline button goes dark there. */
.doc .btn--outline,
.sec--light .btn--outline,
.section--light .btn--outline { box-shadow: inset 0 0 0 1px var(--color-muted-dark); color: var(--color-text-dark); }
.doc .btn--outline:hover,
.sec--light .btn--outline:hover,
.section--light .btn--outline:hover { box-shadow: inset 0 0 0 1px var(--color-brand); color: var(--color-brand); }
.btn--outline:hover { box-shadow: inset 0 0 0 1px var(--color-brand); color: var(--color-brand); }

.btn--link { padding: 0; min-height: 0; color: var(--color-border-light); position: relative; }
.btn--link::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }
.btn--link:hover { color: var(--color-brand); }
.btn--link.btn--block { min-height: 40px; }

/* text link in brand colour, used inside copy and modal footers */
.link-brand {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-2xs); line-height: 16px;
  color: var(--color-brand); text-decoration: none;
  position: relative;
}
.link-brand::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }
.link-brand:hover { text-decoration: underline; }
.link-reset { font-size: var(--fs-2xs); color: var(--color-muted); }
.link-reset:hover { color: var(--color-brand); }

/* the small brand square the mockup puts before an eyebrow */
.dot { display: inline-block; width: 8px; height: 8px; background: var(--color-brand); }

.badge-18 {
  display: inline-flex; align-items: center;
  padding: var(--space-4) var(--space-10);
  background: var(--color-bg); color: var(--color-border-light);
  font-weight: 800; font-size: var(--fs-2xs); line-height: 16px;
}

/* ── fields ───────────────────────────────────────────────────────────── */
/* label 11px bold uppercase 0.08em (0:2315); input 56 tall, padding 12 16,
   fill #141a2e, 1px inset stroke #2a2f3a, radius 0 (0:2316). */
.form { display: flex; flex-direction: column; gap: var(--space-20); }
.form__row { display: grid; gap: var(--space-16); }
.form__row--2 { grid-template-columns: 1fr 1fr; }
.form__row--3 { grid-template-columns: 368fr 220fr 180fr; }

.field { display: flex; flex-direction: column; gap: var(--space-6); }
.field__labelrow { display: flex; align-items: baseline; gap: var(--space-10); }
.field__label {
  font-weight: 700; font-size: var(--fs-3xs); line-height: 15.03px;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-sand);
}
.field__hint { font-size: var(--fs-3xs); line-height: 15px; color: var(--color-muted); }
.field__toggle {
  margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer;
  font-weight: 700; font-size: var(--fs-3xs); line-height: 15px;
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-brand);
  position: relative;
}
.field__toggle::after { content: ""; position: absolute; inset: 50% -8px auto -8px; translate: 0 -50%; height: 24px; }

.field input, .field select, .field textarea {
  width: 100%; min-height: 56px; padding: var(--space-12) var(--space-16);
  border: 0; border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--color-border);      /* strokeAlign INSIDE */
  background: var(--color-surface-2); color: var(--color-sand);
  font-size: var(--fs-small); line-height: 19px;
  transition: box-shadow var(--dur-fast) var(--ease);
}
.field textarea { min-height: 140px; }
.field input::placeholder, .field textarea::placeholder { color: rgb(230 224 217 / .45); }
.field input:hover, .field select:hover, .field textarea:hover { box-shadow: inset 0 0 0 1px #3a4150; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-brand), var(--focus-ring);
}
.field__error { font-size: var(--fs-2xs); line-height: 16px; color: var(--color-error); }
.field.has-error input, .field.has-error select, .field.has-error textarea {
  box-shadow: inset 0 0 0 1px var(--color-error);
}
.form__error { font-size: var(--fs-xs); line-height: 18px; color: var(--color-error); }
.form__success {
  padding: var(--space-12) var(--space-16);
  box-shadow: inset 0 0 0 1px var(--color-success);
  font-size: var(--fs-xs); line-height: 18px; color: var(--color-success);
}

/* consent block — 0:2403: #141a2e, padding 16, gap 12 */
.consent {
  display: flex; flex-direction: column; gap: var(--space-12);
  padding: var(--space-16); background: var(--color-surface-2);
}
.consent__row { position: relative; display: grid; grid-template-columns: 16px 1fr; gap: var(--space-12); align-items: start; }
.consent__row span { font-size: var(--fs-xs); line-height: 20px; color: var(--color-sand); }
.consent__row a { color: var(--color-brand); }
.consent__row input[type="checkbox"] {
  appearance: none; width: 16px; height: 16px; margin: 2px 0 0;
  box-shadow: inset 0 0 0 1px var(--color-border); background: var(--color-bg);
  cursor: pointer; position: relative;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.consent__row input[type="checkbox"]:checked { background: var(--color-brand); box-shadow: none; }
.consent__row input[type="checkbox"]:checked::after {
  content: "✓"; position: absolute; inset: 0;
  display: grid; place-items: center; font-size: 11px; color: #fff;
}
.consent__row input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* 24px tap target over the box. It has to be positioned: as a plain grid item the
   pseudo-element took cell 1/1 and pushed the input into column 2 and the label
   text onto row 2 — into the 16px column, one word per line. */
.consent__row::after {
  content: ""; position: absolute; left: -4px; top: 0;
  width: 24px; height: 24px; pointer-events: none;
}

/* switch — cookie preferences rows */
.switch { display: inline-flex; align-items: center; cursor: pointer; position: relative; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch__track {
  width: 40px; height: 20px; background: var(--color-border);
  position: relative; transition: background-color var(--dur-fast) var(--ease);
}
.switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: var(--color-sand);
  transition: translate var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.switch input:checked + .switch__track { background: var(--color-brand); }
.switch input:checked + .switch__track::after { translate: 20px 0; background: #fff; }
.switch input:focus-visible + .switch__track { box-shadow: var(--focus-ring); }

/* ── overlays ─────────────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: var(--space-20);
  background: var(--overlay-scrim);
  overflow-y: auto;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
.overlay.is-open { opacity: 1; }
.overlay__panel {
  position: relative;
  width: min(100%, 560px);
  max-height: calc(100vh - var(--space-40));
  overflow-y: auto;
  padding: var(--space-40);
  background: var(--color-bg);
  border-top: 3px solid var(--color-brand);      /* the mockup's accent-line */
  transform: translateY(8px);
  transition: transform var(--dur-slow) var(--ease);
  display: flex; flex-direction: column; gap: var(--space-24);
}
.overlay.is-open .overlay__panel { transform: none; }
.overlay__panel--sm { width: min(100%, 560px); }
.overlay__panel--md { width: min(100%, 760px); }
.overlay__panel--lg { width: min(100%, 880px); }
.overlay__panel--gate { width: min(100%, 700px); padding: var(--space-48); }
.overlay__panel--centered { text-align: center; align-items: center; padding: var(--space-48); }

.overlay__close {
  position: absolute; top: var(--space-20); right: var(--space-20);
  width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--color-sand);
  transition: color var(--dur-fast) var(--ease);
}
.overlay__close:hover { color: var(--color-brand); }

.overlay__head { display: flex; flex-direction: column; gap: var(--space-8); padding-right: 48px; }
.overlay__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-10);
  font-weight: 700; font-size: var(--fs-3xs); line-height: 15px;
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-brand);
}
.overlay__title {
  font-family: var(--font-display); font-size: 44px; line-height: 1;
  color: var(--color-text); text-transform: uppercase;
}
.overlay__panel--lg .overlay__title,
.overlay__panel--md .overlay__title { font-size: 52px; }
.overlay__panel--centered .overlay__title { font-size: 56px; }
.overlay__title--gate { font-size: var(--fs-h1); }
.overlay__lead { font-size: var(--fs-body-sm); line-height: 23px; color: var(--color-sand); }
.overlay__panel--gate .overlay__lead { font-size: var(--fs-body); line-height: 24px; }
.overlay__lead a { color: var(--color-brand); }
.overlay__fine { font-size: var(--fs-small); line-height: 21px; color: #b8b2a8; }
.overlay__rule { height: 1px; border: 0; margin: 0; background: var(--color-border); }
.overlay__foot { font-size: var(--fs-2xs); line-height: 16px; color: var(--color-sand); text-align: center; }
.overlay__actions { display: flex; flex-direction: column; gap: var(--space-12); }
.overlay__check {
  display: grid; place-items: center;
  width: 72px; height: 72px; background: var(--color-brand);
  font-size: 32px; color: #fff;
}

/* cookie preferences rows — 0:2261 */
.cookie-rows { display: flex; flex-direction: column; }
.cookie-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-24);
  padding-block: var(--space-20);
  border-top: 1px solid var(--color-border);
}
.cookie-row:first-child { border-top: 0; }
.cookie-row__title {
  font-family: var(--font-body); font-weight: 800; font-size: var(--fs-xs); line-height: 18px;
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text);
}
.cookie-row__text { font-size: var(--fs-xs); line-height: 18px; color: var(--color-muted); }
.cookie-row__always {
  font-weight: 700; font-size: var(--fs-3xs); line-height: 15px;
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-muted);
  white-space: nowrap;
}
.cookie-actions {
  display: flex; flex-direction: column; gap: var(--space-12);
  padding-top: var(--space-24); border-top: 1px solid var(--color-border);
}

/* mobile menu panel — mobile-menu-open 0:4150 */
.overlay--menu { padding: 0; place-items: stretch; }
.menu-panel {
  width: 100%; max-width: none; min-height: 100vh; max-height: none;
  padding: var(--space-20); gap: var(--space-24);
  border-top: 0;
}
.menu-panel__head { display: flex; align-items: center; justify-content: space-between; }
.menu-panel__close { border: 0; background: none; color: var(--color-sand); font-size: 28px; cursor: pointer; width: 44px; height: 44px; }
.menu-panel__age { font-family: var(--font-note); font-size: var(--fs-3xs); color: #b3b3b3; }
.menu-panel__list { display: flex; flex-direction: column; }
.menu-panel__list a {
  display: block; padding-block: var(--space-16);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display); font-size: 24px; line-height: 1;
  text-transform: uppercase; color: var(--color-text); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.menu-panel__list a:hover, .menu-panel__list a[aria-current] { color: var(--color-brand); }
.menu-panel__actions { display: flex; flex-direction: column; gap: var(--space-12); }
.menu-panel__note {
  margin-top: auto;
  display: flex; align-items: center; gap: var(--space-8);
  font-size: var(--fs-2xs); line-height: 18px; color: var(--color-muted);
}

/* ── cards (event, race, sport) ───────────────────────────────────────── */
.card {
  background: var(--color-text); color: var(--color-text-dark);
  border-radius: 0;
  padding: var(--space-16);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.card--dark { background: var(--color-surface); color: var(--color-text); }

/* Icons inherit colour and take their size from CSS. */
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; }
.icon--missing { display: inline-block; width: 1em; height: 1em; outline: 1px dashed var(--color-error); }

@media (max-width: 1199px) {
  .overlay { padding: var(--space-16); align-items: start; }
  .overlay__panel { padding: var(--space-24); gap: var(--space-20); }
  .overlay__panel--gate, .overlay__panel--centered { padding: var(--space-24); }
  .overlay__title { font-size: 32px; }
  .overlay__panel--lg .overlay__title,
  .overlay__panel--md .overlay__title,
  .overlay__panel--centered .overlay__title { font-size: 36px; }
  .overlay__title--gate { font-size: 40px; }
  .form__row--2, .form__row--3 { grid-template-columns: 1fr; }
  .cookie-row { flex-direction: row; align-items: flex-start; gap: var(--space-16); }
}

/* ── dialogs on a short window ──────────────────────────────────────────
   The register form is eleven rows tall: at the mockup's own spacing it needs
   1129px and no laptop has that under the chrome, so the panel scrolled inside
   itself. Above 1100 the mockup's rhythm stands untouched; below it the dialog
   tightens step by step until it fits the window instead of scrolling. */
@media (max-height: 1099px) {
  .overlay__panel { padding: var(--space-28); gap: var(--space-20); }
  .overlay__panel .form { gap: var(--space-16); }
  .overlay__panel .form__row { gap: var(--space-12); }
  .overlay__panel .field input,
  .overlay__panel .field select { min-height: 48px; padding-block: var(--space-10); }
  .overlay__panel .btn--block { min-height: 48px; }
  .overlay__panel .overlay__title { font-size: 40px; line-height: 44px; }
}

@media (max-height: 940px) {
  .overlay__panel { padding: var(--space-20) var(--space-24); gap: var(--space-16); }
  .overlay__panel .form { gap: var(--space-10); }
  .overlay__panel .field { gap: var(--space-4); }
  .overlay__panel .field input,
  .overlay__panel .field select { min-height: 44px; }
  .overlay__panel .btn--block { min-height: 44px; }
  .overlay__panel .overlay__title { font-size: 32px; line-height: 36px; }
  .overlay__panel .overlay__lead { display: none; }   /* the heading already says it */
  /* Password and its confirmation pair up — the two shortest labels on the form. */
  .overlay__panel .form__row--pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  .overlay__panel .consent { padding: var(--space-12); gap: var(--space-8); }
}