/* =========================================================================
   COMPONENTS — buttons, chips, cards, slip, nav, compliance plates
   ========================================================================= */

/* ---------- Buttons ---------- */
.btn{
  --_bg:var(--bg-150);--_fg:var(--fg-000);--_bd:var(--bg-300);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;
  font-size:var(--fs-400);line-height:1;
  padding:var(--sp-3) var(--sp-5);
  background:var(--_bg);color:var(--_fg);
  border:1px solid var(--_bd);border-radius:var(--r-2);
  transition:background var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.btn:hover{background:var(--bg-300)}
.btn:active{transform:translateY(1px)}
.btn--ghost{--_bg:transparent;--_bd:var(--bg-300);--_fg:var(--fg-100)}
.btn--ghost:hover{--_bg:var(--bg-100);border-color:var(--accent-2)}
.btn--steel{--_bg:var(--accent-2);--_fg:#fff;--_bd:var(--accent-2)}
.btn--steel:hover{--_bg:var(--accent-2-hi)}
.btn--block{display:flex;width:100%}
.btn--sm{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-300)}

/* The Bet button — loudest object on every screen.
   Blunt, square-jawed, full-weight hazard yellow, no gradient, no glow. */
.btn--bet{
  --_bg:var(--accent);--_fg:var(--accent-ink);--_bd:var(--accent-lo);
  font-size:var(--fs-500);
  padding:var(--sp-4) var(--sp-6);
  border-width:1px;border-bottom-width:4px;border-radius:var(--r-2);
  letter-spacing:.08em;font-weight:900;
  box-shadow:var(--sh-2);
}
.btn--bet:hover{--_bg:var(--accent-hi)}
.btn--bet:active{--_bg:var(--accent-lo);border-bottom-width:1px;
  transform:translateY(3px)}

/* ---------- Odds chips ---------- */
.odds{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:74px;
  padding:var(--sp-2) var(--sp-3);
  background:var(--bg-150);color:var(--fg-000);
  border:1px solid var(--bg-300);border-radius:var(--r-2);
  transition:background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
  text-align:center;
}
.odds:hover{background:var(--bg-300);border-color:var(--accent)}
.odds__label{font-size:var(--fs-300);color:var(--fg-300);text-transform:uppercase;
  letter-spacing:.04em;white-space:nowrap}
.odds__price{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--fs-500);font-weight:700;color:var(--accent)}
.odds[aria-pressed="true"]{background:var(--accent);border-color:var(--accent-lo)}
.odds[aria-pressed="true"] .odds__label{color:var(--accent-ink)}
.odds[aria-pressed="true"] .odds__price{color:var(--accent-ink)}
.odds[data-drift="up"] .odds__price::after{content:" ▲";color:var(--up);font-size:.7em}
.odds[data-drift="down"] .odds__price::after{content:" ▼";color:var(--down);font-size:.7em}

/* ---------- Cards & surfaces ---------- */
.card{
  background:var(--bg-100);border:1px solid var(--bg-300);border-radius:var(--r-2);
}
.card__head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--bg-300)}
.card__title{font-family:var(--font-display);text-transform:uppercase;
  font-size:var(--fs-400);letter-spacing:.04em;color:var(--fg-000)}
.card__body{padding:var(--sp-4)}

/* Section header with hazard-stripe edge as the single focal marker */
.section-head{position:relative;padding-left:var(--sp-4);margin-bottom:var(--sp-5)}
.section-head::before{content:"";position:absolute;left:0;top:2px;bottom:2px;
  width:6px;background:var(--accent)}
.section-head--hazard::before{background:var(--hazard-stripe)}

/* Market card — freight-manifest row of an event */
.market{background:var(--bg-100);border:1px solid var(--bg-300);
  border-radius:var(--r-2);margin-bottom:var(--sp-3)}
.market__top{display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--bg-300)}
.market__meta{display:flex;flex-direction:column;min-width:0;flex:1}
.market__league{font-size:var(--fs-300);color:var(--fg-300);text-transform:uppercase;
  letter-spacing:.08em}
.market__teams{font-weight:600;color:var(--fg-000);font-size:var(--fs-500)}
.market__time{font-family:var(--font-mono);font-size:var(--fs-300);color:var(--fg-300)}
.market__odds{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4)}
.market__odds--two{grid-template-columns:repeat(2,1fr)}

/* KPI / stat card */
.kpi{background:var(--bg-100);border:1px solid var(--bg-300);border-radius:var(--r-2);
  padding:var(--sp-4);border-left:4px solid var(--accent-2)}
.kpi__value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--fs-700);color:var(--fg-000);font-weight:700;line-height:1}
.kpi__label{font-size:var(--fs-300);color:var(--fg-300);text-transform:uppercase;
  letter-spacing:.08em;margin-top:var(--sp-2)}

/* ---------- Pills / badges ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-300);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;
  padding:3px 10px;border-radius:var(--r-pill);border:1px solid var(--bg-300);
  color:var(--fg-100)}
.pill--live{color:var(--status);border-color:color-mix(in srgb,var(--status) 50%,transparent)}
.pill--live::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--status);box-shadow:0 0 0 0 var(--status);
  animation:pulse 1.6s var(--ease) infinite}
.pill--hot{color:var(--accent-ink);background:var(--accent);border-color:var(--accent-lo)}
.badge{font-family:var(--font-mono);font-size:var(--fs-300);background:var(--bg-150);
  border:1px solid var(--bg-300);border-radius:var(--r-1);padding:2px 6px;color:var(--fg-100)}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--status) 60%,transparent)}
  70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- Trust strip ---------- */
.trust{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;
  justify-content:center;padding:var(--sp-4);background:var(--bg-050);
  border-block:1px solid var(--bg-300)}
.trust__item{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-300);
  color:var(--fg-300);text-transform:uppercase;letter-spacing:.06em}
.trust__item strong{color:var(--fg-100);font-family:var(--font-mono)}

/* ---------- Data tables ---------- */
.table{font-size:var(--fs-400)}
.table th,.table td{padding:var(--sp-3) var(--sp-4);text-align:left;
  border-bottom:1px solid var(--bg-300)}
.table th{font-family:var(--font-display);text-transform:uppercase;
  font-size:var(--fs-300);letter-spacing:.06em;color:var(--fg-300)}
.table td.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}
.table tbody tr:hover{background:var(--bg-100)}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.field label{font-size:var(--fs-300);text-transform:uppercase;letter-spacing:.06em;
  color:var(--fg-100);font-weight:600}
.input,.select,textarea.input{
  width:100%;padding:var(--sp-3) var(--sp-4);background:var(--bg-150);
  border:1px solid var(--bg-300);border-radius:var(--r-2);color:var(--fg-000);
  transition:border-color var(--t-fast) var(--ease)}
.input:focus,.select:focus,textarea.input:focus{border-color:var(--accent);outline:none}
.input[aria-invalid="true"]{border-color:var(--down)}
.field__error{font-size:var(--fs-300);color:var(--down);min-height:1em}
.field__hint{font-size:var(--fs-300);color:var(--fg-300)}
.checkbox{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-400);
  color:var(--fg-100)}
.checkbox input{width:18px;height:18px;accent-color:var(--accent);margin-top:2px}

/* =========================================================================
   COMPLIANCE UI (mandatory)
   ========================================================================= */

/* RG bar — persistent, rotating harm-minimisation messages */
.rg-bar{position:sticky;top:0;z-index:60;min-height:var(--rgbar-h);
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-1) var(--sp-4);
  background:var(--bg-050);border-bottom:1px solid var(--bg-300);
  font-size:var(--fs-300)}
.rg-bar__tag{font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.1em;color:var(--accent);white-space:nowrap}
.rg-bar__msg{color:var(--fg-100);transition:opacity var(--t-slow) var(--ease)}
.rg-bar__msg.is-fading{opacity:0}
.rg-bar__age{margin-left:auto;font-family:var(--font-mono);font-weight:700;
  color:var(--accent-ink);background:var(--accent);padding:1px 8px;border-radius:var(--r-1)}

/* NCPF plate — MANDATED black text on white background */
.ncpf{background:var(--plate-bg);color:var(--plate-fg)}
.ncpf__inner{width:min(100% - 2*var(--sp-4),var(--maxw));margin-inline:auto;
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  padding:var(--sp-3) 0}
.ncpf__tag{font-family:var(--font-display);text-transform:uppercase;
  font-size:var(--fs-500);color:#000;letter-spacing:.01em}
.ncpf__sub{font-size:var(--fs-300);color:#000}
.ncpf__sub a{color:#000;text-decoration:underline}
/* Plate is white — force any inherited light text (e.g. global strong) back to black. */
.ncpf strong{color:#000}
.ncpf__18{font-family:var(--font-display);font-size:.95rem;line-height:1;color:#000;
  border:3px solid #000;border-radius:50%;width:46px;height:46px;
  display:grid;place-items:center;flex:none}

/* Licence plate */
.licence{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;
  padding:var(--sp-4);background:var(--bg-050);border:1px solid var(--bg-300);
  border-left:var(--bd-hazard);border-radius:var(--r-2);font-size:var(--fs-300)}
.licence dt{color:var(--fg-300);text-transform:uppercase;letter-spacing:.06em}
.licence dd{color:var(--fg-000);font-family:var(--font-mono)}
.licence__pair{display:flex;flex-direction:column;gap:2px}

/* Age-gate modal */
.age-gate{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  padding:var(--sp-4);background:rgba(8,9,10,.92);backdrop-filter:blur(3px)}
.age-gate[hidden]{display:none}
.age-gate__card{width:min(100%,480px);background:var(--bg-100);
  border:1px solid var(--bg-300);border-top:6px solid var(--accent);
  border-radius:var(--r-2);padding:var(--sp-6);box-shadow:var(--sh-3)}
.age-gate__brand{font-family:var(--font-display);text-transform:uppercase;
  font-size:var(--fs-600);color:var(--fg-000);letter-spacing:.02em}
.age-gate__brand b{color:var(--accent)}
.age-gate h2{margin:var(--sp-4) 0 var(--sp-2)}
.age-gate__actions{display:flex;gap:var(--sp-3);margin-top:var(--sp-5)}
.age-gate__deny{font-size:var(--fs-300);color:var(--fg-300);margin-top:var(--sp-4)}

/* Cookie banner */
.cookie{position:fixed;left:var(--sp-4);right:var(--sp-4);bottom:var(--sp-4);
  z-index:120;max-width:560px;margin-inline:auto;
  background:var(--bg-100);border:1px solid var(--bg-300);
  border-left:var(--bd-hazard);border-radius:var(--r-2);
  padding:var(--sp-4);box-shadow:var(--sh-3)}
.cookie[hidden]{display:none}
.cookie p{font-size:var(--fs-300);color:var(--fg-100);max-width:none}
.cookie__actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}

/* ---------- Bet slip ---------- */
.slip{background:var(--bg-100);border:1px solid var(--bg-300);border-radius:var(--r-2);
  position:sticky;top:calc(var(--rgbar-h) + var(--sp-3))}
.slip__head{display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-3) var(--sp-4);background:var(--bg-050);
  border-bottom:1px solid var(--bg-300);border-top:4px solid var(--accent)}
.slip__title{font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.06em;color:var(--fg-000)}
.slip__count{font-family:var(--font-mono);background:var(--accent);color:var(--accent-ink);
  padding:1px 8px;border-radius:var(--r-1);font-weight:700}
.slip__body{padding:var(--sp-3);max-height:46vh;overflow:auto}
.slip__empty{color:var(--fg-300);font-size:var(--fs-300);text-align:center;
  padding:var(--sp-6) var(--sp-4)}
.slip__item{display:grid;grid-template-columns:1fr auto;gap:var(--sp-2);
  padding:var(--sp-3);background:var(--bg-150);border:1px solid var(--bg-300);
  border-radius:var(--r-2);margin-bottom:var(--sp-2)}
.slip__sel{font-weight:600;color:var(--fg-000);font-size:var(--fs-400)}
.slip__mkt{font-size:var(--fs-300);color:var(--fg-300)}
.slip__price{font-family:var(--font-mono);color:var(--accent);font-weight:700}
.slip__rm{color:var(--fg-300);font-size:var(--fs-500);line-height:1;padding:0 4px}
.slip__rm:hover{color:var(--down)}
.slip__foot{padding:var(--sp-4);border-top:1px solid var(--bg-300)}
.slip__row{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:var(--sp-3);font-size:var(--fs-400)}
.slip__row .mono{color:var(--fg-000);font-weight:700}
.slip__payout .mono{color:var(--accent);font-size:var(--fs-600)}
.slip__stake{display:flex;align-items:center;gap:var(--sp-2)}
.slip__stake .input{text-align:right}
.slip__chips{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.slip__chip{flex:1;font-family:var(--font-mono);font-size:var(--fs-300);
  padding:var(--sp-2);background:var(--bg-150);border:1px solid var(--bg-300);
  border-radius:var(--r-1);color:var(--fg-100)}
.slip__chip:hover{border-color:var(--accent);color:var(--fg-000)}

/* Mobile bet-slip bottom sheet */
.slip-toggle{display:none}
/* Hidden on desktop — only the in-grid slip shows above 1180px.
   Without this the sheet falls into normal flow as a 2nd full-width slip. */
.app-shell__slip--sheet{display:none}
@media (max-width:1180px){
  .app-shell__slip--sheet{display:block;position:fixed;left:0;right:0;bottom:0;
    z-index:110;transform:translateY(calc(100% - 52px));
    transition:transform var(--t-slow) var(--ease)}
  .app-shell__slip--sheet.is-open{transform:translateY(0)}
  .app-shell__slip--sheet .slip{border-radius:0;max-height:80vh;
    display:flex;flex-direction:column}
  .app-shell__slip--sheet .slip__head{cursor:pointer}
  .slip-toggle{display:flex}
}

/* Touch-target sizing on small screens (WCAG 2.5.5) — keep secondary controls ≥44px.
   The Bet button and odds chips are already large; this lifts the small ones. */
@media (max-width:880px){
  .btn--sm{min-height:44px}
  .slip__chip{min-height:44px}
}