/* Reusable pieces: buttons, fields, cards, overlays — numbers from the mockup.
 *
 * The mockup draws no hover, focus, active or error state; those are added here
 * in its own language: the lime lightens a step, surfaces move to the next token
 * up, and the focus ring is always visible because a dark UI without one is
 * unusable by keyboard.
 */

/* ── eyebrow labels ───────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-xs); line-height: 15px;
  letter-spacing: .17em;
  color: var(--color-muted);
}
.eyebrow--brand { color: var(--color-brand); }
.eyebrow--brand2 { color: var(--color-brand-2); }   /* the inner pages' lime */
/* Inner pages set in the warm ink on #111311 (how-it-works, legal, help, betstop). */
.page--light-ink { background: var(--color-surface-2); color: var(--color-text-alt); }
.eyebrow--rule { display: flex; align-items: center; gap: var(--space-8); }
.eyebrow--rule::before { content: ""; width: 24px; height: 2px; background: currentColor; flex: none; }

/* ── section headings ─────────────────────────────────────────────────── */
.section-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-h2); line-height: 40px;
  color: var(--color-text);
}
.rg-section__title { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h2); line-height: 40px; }
.section-lead { color: var(--color-muted); font-size: var(--fs-sm); line-height: 21px; max-width: 60ch; }

/* ── buttons ──────────────────────────────────────────────────────────── */
/* The mockup's buttons are square (radius 0), 38–42px tall, padding 12/24,
   Unbounded 11px uppercase with 0.09em tracking. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  padding: 12px 24px;
  border: 0; border-radius: 0;
  background: transparent; color: var(--color-text);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-2xs); line-height: 14px;
  letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.btn--primary { background: var(--color-brand); color: var(--color-on-brand); font-weight: 900; }
.btn--primary:hover:not(:disabled) { background: var(--color-brand-hover); }
.btn--primary:active:not(:disabled) { background: var(--color-brand-active); }

.btn--ghost { box-shadow: inset 0 0 0 1px var(--color-border); }
.btn--ghost:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--color-brand); color: var(--color-brand); }

.btn--lg { padding: 16px 32px; font-size: var(--fs-xs); line-height: 15px; }
.btn--block { width: 100%; }

/* A text link styled as a forward action: "Access Tool →", "View All Markets →" */
.link-action {
  display: inline-flex; align-items: center; gap: var(--space-8);
  padding-block: var(--space-8);
  color: var(--color-text); text-decoration: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-3xs); line-height: 12.4px;
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}
.link-action:hover { color: var(--color-brand); gap: var(--space-12); }
.link-action--brand { color: var(--color-brand); }

.link-underline { color: var(--color-text); text-underline-offset: 4px; }
.link-underline:hover { color: var(--color-brand); }

/* ── chips and tags ───────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center;
  padding: 6px 10px;
  background: var(--color-chip); color: var(--color-text);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-3xs); line-height: 12px;
  text-transform: uppercase;
}
.chip--brand { background: var(--color-brand); color: var(--color-on-brand); }
.chip--outline { background: none; box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-muted); }

/* ── fields ───────────────────────────────────────────────────────────── */
.field { display: grid; gap: var(--space-8); }
.field__label {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-3xs); line-height: 12px;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-brand);
}
.field input:not(.visually-hidden), .field select, .field textarea {
  width: 100%; min-height: 44px; padding: 12px var(--space-16);
  border: 0; border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--color-border);
  background: var(--color-surface-2); color: var(--color-text);
  font-family: var(--font-body); font-size: var(--fs-sm); line-height: 18px;
  transition: box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
                    linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.field input:hover, .field select:hover, .field textarea:hover { background: var(--color-surface-4); }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: inset 0 0 0 1px var(--color-brand); }
/* keyboard focus keeps a ring outside the box as well — an inset line alone is easy to miss */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.field__error { color: var(--color-danger); font-size: var(--fs-2xs); line-height: 14px; }
.field.has-error input, .field.has-error select, .field.has-error textarea {
  box-shadow: inset 0 0 0 1px var(--color-danger);
}

/* A checkbox row is a field too — the label sits beside the box, and a container
   rule like `.field label{display:block}` must not win over this. */
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--space-12); }
.field--check .field__label {
  display: inline; color: var(--color-text); font-family: var(--font-body);
  font-weight: 400; font-size: var(--fs-sm); line-height: 18px;
  letter-spacing: normal; text-transform: none;
}
.field--check input[type="checkbox"] {
  width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0;
  appearance: none; flex: none;
  box-shadow: inset 0 0 0 1px var(--color-border);
  background: var(--color-surface-2); cursor: pointer;
}
.field--check input[type="checkbox"]:checked {
  background: var(--color-brand);
  box-shadow: inset 0 0 0 1px var(--color-brand);
}
.field--check input[type="checkbox"]:checked::after {
  content: "✓"; display: block; text-align: center;
  color: var(--color-on-brand); font-size: 13px; line-height: 18px; font-weight: 700;
}

.form__note { color: var(--color-muted); font-size: var(--fs-2xs); line-height: 14px; }
.form__error { color: var(--color-danger); font-size: var(--fs-sm); }
.form__success {
  padding: var(--space-24);
  background: var(--color-band);
  box-shadow: inset 0 0 0 1px var(--color-brand);
  color: var(--color-text); font-size: var(--fs-sm); line-height: 19px;
}
.form__success strong { display: block; color: var(--color-brand); font-family: var(--font-display); font-size: var(--fs-base); margin-bottom: var(--space-8); }

/* ── cards ────────────────────────────────────────────────────────────── */
.card {
  padding: var(--space-32);
  background: var(--color-surface);
  border-radius: 0;
  transition: background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.card:hover { background: var(--color-surface-hover); }
.card--outline { background: none; box-shadow: inset 0 0 0 1px var(--color-border); }
.card--outline:hover { box-shadow: inset 0 0 0 1px var(--color-border-2); }

/* ── odds ─────────────────────────────────────────────────────────────── */
.odd {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  min-width: 86px; padding: 6px 10px;
  border: 0;
  background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border);
  color: var(--color-text); cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.odd__label {
  color: var(--color-muted);
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--fs-3xs); line-height: 13px;
  letter-spacing: .05em; text-transform: uppercase;
}
.odd__value {
  color: var(--color-brand);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-sm); line-height: 16.12px;
}
.odd:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--color-brand); background: var(--color-surface-hover); }
/* Selected: the lime fill the 390 sports frame draws (36:444). Written with the
   row context too, because .market-row .odd in the page sheets would otherwise
   win the cascade at equal specificity. */
.odd.is-selected, .market-row .odd.is-selected, .runner-row .odd.is-selected, .featured-match .odd.is-selected {
  background: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand);
}
.odd.is-selected .odd__label, .odd.is-selected .odd__value { color: var(--color-on-brand); }
.odd.is-selected:hover:not(:disabled), .market-row .odd.is-selected:hover:not(.odd--void) { background: var(--color-brand-hover); box-shadow: inset 0 0 0 1px var(--color-brand-hover); }
.odd:disabled { opacity: .45; cursor: not-allowed; }
.odd:disabled .odd__value { color: var(--color-muted); }

/* ── overlays (modal, mobile menu, banners) ───────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: var(--space-16);
  background: var(--overlay-scrim);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
.overlay.is-open { opacity: 1; }
.overlay--deep { background: var(--overlay-scrim-deep); }
.overlay__panel {
  width: min(100%, 540px);
  max-height: 90vh; overflow: auto;
  background: var(--color-light-2);
  color: var(--color-bg);
  border-radius: 0;
  box-shadow: var(--shadow-modal);
  transform: translateY(8px);
  transition: transform var(--dur-slow) var(--ease);
}
.overlay.is-open .overlay__panel { transform: none; }
.overlay__panel--dark { background: var(--color-surface); color: var(--color-text); }

/* ── accordion ────────────────────────────────────────────────────────── */
.accordion__item { background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--color-border); }
.accordion__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  width: 100%; padding: var(--space-20) var(--space-24);
  background: none; border: 0; color: var(--color-text); cursor: pointer;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-sm); line-height: 18px; text-align: left;
  transition: color var(--dur-fast) var(--ease);
}
.accordion__btn:hover { color: var(--color-brand); }
.accordion__btn::after {
  content: "+"; flex: none;
  font-size: var(--fs-h5); line-height: 1; color: var(--color-brand);
  transition: transform var(--dur-base) var(--ease);
}
.accordion__btn[aria-expanded="true"]::after { transform: rotate(45deg); }
.accordion__panel > div { padding: 0 var(--space-24) var(--space-20); }
.accordion__panel p { color: var(--color-muted); font-size: var(--fs-sm); line-height: 21px; }

/* 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-danger); }

@media (max-width: 1199px) {
  .section-title, .rg-section__title { font-size: var(--fs-h2-m); line-height: 27px; }
  /* The 390 frame sets the same labels a size down and without the wide tracking. */
  .eyebrow { font-size: var(--fs-3xs); line-height: 12px; letter-spacing: .1em; }
  .btn { padding: 10px 18px; letter-spacing: 0; }
  .odd__label { letter-spacing: 0; }
  .link-action { text-transform: uppercase; letter-spacing: 0; }
}