/* ════════════════════════════════════════════════════════════════════════════
   PAGES — page-head, page-grid, race-card, forms, legal, etc.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── page-head (sports/racing/legal/help) ───────────────────────────── */
.page-head { padding: var(--space-5) 0 var(--space-5); border-bottom: 1px solid var(--rule); margin-bottom: var(--space-5); }
.page-head__path { font: 600 var(--fs-xs)/1 var(--ff-mono); text-transform: uppercase; letter-spacing: .18em; color: var(--dim); margin-bottom: var(--space-3); }
.page-head__path::before { content: "$ "; color: var(--amber); }
.page-head h1 { font: 800 var(--fs-2xl)/1.05 var(--ff-display); letter-spacing: -.02em; margin-bottom: var(--space-3); color: var(--ink); }
.page-head h1::before { content: "// "; color: var(--amber); font-weight: 600; }
.page-head h1::after { display: none; }
.page-head p { font-family: var(--ff-sans); font-size: 15px; color: var(--ink-1); line-height: 1.7; max-width: 75ch; }

/* ─── page-grid (sports/racing main + slip side) ─────────────────────── */
.page-grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-5); align-items: start; }
@media (max-width: 1200px) { .page-grid { grid-template-columns: 1fr; } .page-grid > .slip-side { display: none; } }

/* ─── race cards ─────────────────────────────────────────────────────── */
.races { display: grid; gap: var(--space-5); }
.race-card { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-1); position: relative; }
.race-card::before { content: "RACE"; position: absolute; top: var(--space-3); right: var(--space-4); font: 600 var(--fs-xs)/1 var(--ff-mono); letter-spacing: .14em; color: var(--amber); }
.race-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border-bottom: 1px solid var(--rule); }
.race-card__meta { font: 600 var(--fs-xs)/1.4 var(--ff-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin-bottom: var(--space-2); }
.race-card__title { font: 700 var(--fs-xl)/1 var(--ff-display); }
.race-card__title::after { display: none; }
.race-card__discipline { font: 600 var(--fs-xs)/1 var(--ff-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-1); padding: var(--space-1) var(--space-2); background: var(--bg-1); border: 1px solid var(--rule); border-radius: var(--r-1); }
.race-card__field-wrap { overflow-x: auto; }
.race-card__field { min-width: 540px; }
.race-card__field thead th { text-align: left; font: 600 var(--fs-xs)/1 var(--ff-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--dim); padding: var(--space-3) var(--space-4); background: var(--bg-1); border-bottom: 1px solid var(--rule); }
.race-card__field tbody td { padding: var(--space-3) var(--space-4); font: 500 var(--fs-sm)/1.4 var(--ff-mono); color: var(--ink-1); border-bottom: 1px solid var(--rule); }
.race-card__field tbody tr:last-child td { border-bottom: 0; }
.race-card__field tbody tr:hover td { background: var(--bg-1); }
.race-card__field tbody td.num { font-weight: 700; color: var(--amber); width: 48px; }
.race-card__field tbody td.num::before { content: "#"; color: var(--muted); }
.race-card__field tbody td.runner { color: var(--ink); font-weight: 600; }
.race-card__field tbody td.price { width: 110px; text-align: right; }
.race-card__field tbody td.price .chip { min-width: 80px; padding: var(--space-2) var(--space-3); }
.race-card__field tbody td.price .chip__price { font-size: var(--fs-sm); }

/* ─── forms (signup/login/contact) ───────────────────────────────────── */
.form-block { padding: 0; }
.form-narrow { max-width: 680px; }
.field-set { border: 1px solid var(--rule); border-radius: var(--r-1); padding: var(--space-5); margin-bottom: var(--space-4); background: var(--panel); }
.field-set legend { padding: 0 var(--space-2); font: 600 var(--fs-xs)/1 var(--ff-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--amber); }
.field-set legend::before { content: "// "; color: var(--dim); }
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.field > span { font: 600 var(--fs-xs)/1 var(--ff-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--dim); }
.field > span::before { content: "▸ "; color: var(--muted); }
.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea {
  padding: var(--space-3) var(--space-4); background: var(--bg-1); border: 1px solid var(--rule); border-radius: var(--r-1);
  font: 500 var(--fs-md)/1 var(--ff-mono); color: var(--ink); width: 100%; transition: border-color var(--d-fast);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--amber); outline: none; box-shadow: 0 0 0 3px rgba(212,167,44,.15); }
.field--inline { display: flex; align-items: center; gap: var(--space-3); flex-direction: row; }
.field--inline input { width: auto; }
.optout { border: 1px dashed var(--rule); border-radius: var(--r-1); padding: var(--space-4); margin-top: var(--space-4); background: var(--bg-1); }
.optout summary { font: 600 var(--fs-sm)/1.4 var(--ff-mono); color: var(--dim); cursor: pointer; text-transform: uppercase; letter-spacing: .08em; }
.optout summary::before { content: "[+] "; color: var(--amber); margin-right: var(--space-1); }
.optout[open] summary::before { content: "[-] "; }
.optout[open] { padding-bottom: var(--space-5); }
.optout > * { margin-top: var(--space-3); }
.signup-steps { border: 1px solid var(--rule); border-radius: var(--r-1); background: var(--panel); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
.signup-steps li { padding: var(--space-3) 0; border-bottom: 1px dashed var(--rule); font: 500 var(--fs-sm)/1.55 var(--ff-mono); color: var(--ink-1); list-style: none; }
.signup-steps li:last-child { border-bottom: 0; }
.signup-steps li strong { color: var(--amber); font-weight: 700; margin-right: var(--space-2); }

/* ─── legal pages ─────────────────────────────────────────────────────── */
.legal { padding: 0 0 var(--space-7); }
.legal .wrap { max-width: 900px; padding: 0; }
.legal h1 { font: 800 var(--fs-2xl)/1.05 var(--ff-display); letter-spacing: -.02em; margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--rule); }
.legal h1::after { display: none; }
.legal h1::before { content: "§ "; color: var(--amber); font-weight: 400; }
.legal h2 { font: 700 var(--fs-xl)/1.2 var(--ff-display); margin: var(--space-6) 0 var(--space-3); letter-spacing: -.01em; color: var(--ink); }
.legal h2::before { content: "› "; color: var(--amber); }
.legal h2::after { display: none; }
.legal h3 { font: 600 var(--fs-md)/1 var(--ff-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--dim); margin: var(--space-5) 0 var(--space-2); }
.legal h3::after { display: none; }
.legal p { font-family: var(--ff-sans); font-size: 15px; color: var(--ink-1); line-height: 1.75; margin-bottom: var(--space-3); max-width: 75ch; }
.legal ul, .legal ol { font-family: var(--ff-sans); font-size: 15px; color: var(--ink-1); line-height: 1.75; padding-left: var(--space-5); margin-bottom: var(--space-3); }
.legal ul li, .legal ol li { margin-bottom: var(--space-2); list-style: none; position: relative; }
.legal ul li::before { content: "—"; position: absolute; left: calc(-1 * var(--space-4)); color: var(--amber); }
.legal ol { counter-reset: lit; }
.legal ol li { counter-increment: lit; }
.legal ol li::before { content: counter(lit) "."; position: absolute; left: calc(-1 * var(--space-5)); color: var(--amber); font-family: var(--ff-mono); font-weight: 600; }
.legal em { font-style: italic; color: var(--ink); }
.legal a { color: var(--reg); border-bottom: 1px solid rgba(88,166,255,.3); }
.legal a:hover { color: var(--amber); border-bottom-color: var(--amber); }

/* ─── help / contact ─────────────────────────────────────────────────── */
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: var(--space-5) 0; }
.help-card { padding: var(--space-5); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-1); }
.help-card h3::after { display: none; }
.help-card h3 { font: 700 var(--fs-md)/1 var(--ff-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--amber); margin-bottom: var(--space-3); }
.help-card h3::before { content: "▣ "; color: var(--dim); }
.help-card p { font-size: var(--fs-sm); color: var(--ink-1); line-height: 1.65; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 760px) { .help-grid, .contact-grid { grid-template-columns: 1fr; } }

/* ─── not-available / 404 ────────────────────────────────────────────── */
.bigstate { padding: var(--space-9) 0; text-align: left; }
.bigstate h1 { font: 800 90px/1 var(--ff-display); letter-spacing: -.04em; color: var(--amber); margin-bottom: var(--space-4); }
.bigstate h1::after { display: none; }
.bigstate p { font-size: var(--fs-md); color: var(--ink-1); max-width: 60ch; margin-bottom: var(--space-4); }

/* ─── promotions auth gate ───────────────────────────────────────────── */
.promo-gate { padding: 0; }
.promo-gate .wrap { max-width: 720px; padding: 0; }
.promo-gate__panel { padding: var(--space-6); background: var(--panel); border: 1px solid var(--rule); border-left: 3px solid var(--amber); border-radius: var(--r-1); }

/* ─── reveal on intersect ────────────────────────────────────────────── */
.reveal { transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js .reveal:not(.is-in) { opacity: 0; transform: translateY(12px); }
.reveal.is-in { opacity: 1; transform: none; }

/* ─── wrap helper for legacy elements ────────────────────────────────── */
.wrap { padding: 0; max-width: none; }

/* utility */
.cursor { display: inline-block; color: var(--amber); margin-left: 4px; animation: blink 1.05s steps(2,end) infinite; }
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* RG block + chrome from base — keep some used; older selectors no-op'd */
.rg-block { border: 1px solid var(--amber-soft); border-left: 3px solid var(--amber); border-radius: var(--r-1); padding: var(--space-5); background: rgba(212,167,44,.04); margin-top: var(--space-5); }
.rg-block::before { content: "⚠ RESPONSIBLE WAGERING"; display: block; font: 600 var(--fs-xs)/1 var(--ff-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--amber); margin-bottom: var(--space-3); }
.rg-block__line { font: 600 var(--fs-md)/1.4 var(--ff-mono); color: var(--ink); margin-bottom: var(--space-3); }
.rg-block p { font-size: var(--fs-sm); }
.rg-block a { color: var(--amber); border-bottom-color: var(--amber-soft); }

/* ─── form chrome (alerts, errors, rows, actions) ────────────────────── */
.form-alert { border: 1px solid var(--rule); border-left: 3px solid var(--dim); border-radius: var(--r-1); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); font: 500 var(--fs-sm)/1.55 var(--ff-mono); color: var(--ink-1); background: var(--panel); }
.form-alert--ok { border-left-color: var(--up); color: var(--ink); }
.form-alert--error { border-left-color: var(--down); color: var(--ink); }
.field-err { display: block; font: 500 var(--fs-xs)/1.4 var(--ff-mono); color: var(--hot); margin-top: var(--space-1); }
.field-err::before { content: "✗ "; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0; }
.step-no { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid var(--amber-soft); color: var(--amber); font: 700 var(--fs-xs)/1 var(--ff-mono); margin-right: var(--space-2); }
.muted { color: var(--dim); font-family: var(--ff-sans); font-size: var(--fs-sm); line-height: 1.7; }
.muted a, .form-block a, .acct-panel a { color: var(--reg); border-bottom: 1px solid rgba(88,166,255,.3); }
.muted a:hover, .form-block a:hover, .acct-panel a:hover { color: var(--amber); border-bottom-color: var(--amber); }

/* ─── header balance pill ─────────────────────────────────────────────── */
.navbar__balance { display: inline-flex; align-items: baseline; gap: 4px; padding: var(--space-2) var(--space-3); border: 1px solid var(--rule-1); border-radius: var(--r-1); font: 600 var(--fs-xs)/1 var(--ff-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); background: var(--bg-1); }
.navbar__balance .mono { color: var(--amber); font-size: var(--fs-md); }
.navbar__balance:hover { border-color: var(--amber-soft); }

/* ─── bet-slip placement message ──────────────────────────────────────── */
.slip-msg { font: 500 var(--fs-xs)/1.5 var(--ff-mono); padding: var(--space-3); border: 1px solid var(--rule); border-left: 3px solid var(--dim); border-radius: var(--r-1); margin: var(--space-3) 0; }
.slip-msg.is-ok { border-left-color: var(--up); color: var(--ink); }
.slip-msg.is-error { border-left-color: var(--down); color: var(--hot); }

/* ─── ACCOUNT CABINET ─────────────────────────────────────────────────── */
.acct-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); margin-bottom: var(--space-4); background: var(--panel); border: 1px solid var(--rule); border-left: 3px solid var(--amber); border-radius: var(--r-1); }
.acct-balance__label { display: block; font: 600 var(--fs-xs)/1 var(--ff-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--dim); margin-bottom: var(--space-2); }
.acct-balance__amount { font: 800 var(--fs-3xl)/1 var(--ff-display); color: var(--amber); }
.acct-balance__amount small { font-size: var(--fs-md); color: var(--dim); font-weight: 600; }
.acct-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.acct-badge { font: 600 var(--fs-xs)/1 var(--ff-mono); text-transform: uppercase; letter-spacing: .08em; padding: var(--space-2) var(--space-3); border: 1px solid var(--rule-1); border-radius: var(--r-1); color: var(--ink-1); background: var(--bg-1); }
.acct-badge.is-ok { border-color: var(--up-soft); color: var(--up); }
.acct-badge.is-warn { border-color: var(--amber-soft); color: var(--amber); }
.acct-badge.is-stop { border-color: var(--down-soft); color: var(--hot); }

.acct-verify { padding: var(--space-5); margin-bottom: var(--space-4); background: rgba(212,167,44,.04); border: 1px solid var(--amber-soft); border-radius: var(--r-1); }
.acct-verify h2 { font: 700 var(--fs-lg)/1.2 var(--ff-display); color: var(--amber); margin-bottom: var(--space-3); }
.acct-verify p { font-family: var(--ff-sans); font-size: 14px; color: var(--ink-1); line-height: 1.7; margin-bottom: var(--space-4); max-width: 75ch; }

.acct-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); position: sticky; top: var(--statusbar-h); z-index: 5; padding: var(--space-2) 0; margin-bottom: var(--space-5); border-bottom: 1px solid var(--rule); background: var(--bg); }
.acct-nav a { font: 600 var(--fs-xs)/1 var(--ff-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--r-1); }
.acct-nav a:hover { color: var(--amber); border-color: var(--rule-1); }

.acct-panel { padding: var(--space-5); margin-bottom: var(--space-4); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-1); scroll-margin-top: 80px; }
.acct-panel h2 { font: 700 var(--fs-lg)/1.2 var(--ff-display); color: var(--ink); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--rule); }
.acct-panel h2::before { content: "// "; color: var(--amber); }
.acct-panel p { font-family: var(--ff-sans); font-size: 14px; color: var(--ink-1); line-height: 1.7; margin-bottom: var(--space-3); max-width: 80ch; }

.acct-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.acct-stat { padding: var(--space-4); background: var(--bg-1); border: 1px solid var(--rule); border-radius: var(--r-1); text-align: left; }
.acct-stat span { display: block; font: 800 var(--fs-2xl)/1 var(--ff-display); color: var(--amber); }
.acct-stat small { display: block; font: 600 var(--fs-xs)/1 var(--ff-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin-top: var(--space-2); }

.acct-form { max-width: 520px; }
.acct-form-inline { margin-top: var(--space-3); }

.acct-table-wrap { overflow-x: auto; }
.acct-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.acct-table th { text-align: left; font: 600 var(--fs-xs)/1 var(--ff-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--dim); padding: var(--space-3); border-bottom: 1px solid var(--rule-1); }
.acct-table td { padding: var(--space-3); border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); color: var(--ink-1); vertical-align: top; }
.acct-table .mono { font-family: var(--ff-mono); color: var(--ink); }
.acct-table .up { color: var(--up); }
.acct-table .down { color: var(--hot); }

.bet-leg { padding: var(--space-1) 0; }
.bet-leg__sel { display: block; font: 600 var(--fs-sm)/1.3 var(--ff-mono); color: var(--ink); }
.bet-leg__mkt { display: block; font-size: var(--fs-xs); color: var(--dim); }
.bet-leg__res { display: inline-block; margin-top: 2px; font: 600 var(--fs-xs)/1 var(--ff-mono); text-transform: uppercase; }
.bet-leg__res--won { color: var(--up); }
.bet-leg__res--lost { color: var(--hot); }
.bet-status { display: inline-block; font: 600 var(--fs-xs)/1 var(--ff-mono); text-transform: uppercase; letter-spacing: .08em; padding: var(--space-1) var(--space-2); border: 1px solid var(--rule-1); border-radius: var(--r-1); }
.bet-status.is-pending { color: var(--amber); border-color: var(--amber-soft); }
.bet-status.is-won { color: var(--up); border-color: var(--up-soft); }
.bet-status.is-lost { color: var(--hot); border-color: var(--down-soft); }

.acct-details { display: grid; gap: 0; }
.acct-details > div { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px dashed var(--rule); }
.acct-details dt { font: 600 var(--fs-xs)/1.4 var(--ff-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.acct-details dd { font-family: var(--ff-mono); font-size: var(--fs-sm); color: var(--ink); }
@media (max-width: 560px) { .acct-details > div { grid-template-columns: 1fr; gap: var(--space-1); } }

/* ─── partner badges (sports / racing) ───────────────────────────────── */
.partner-badges { margin: var(--space-5) 0; padding: var(--space-4) var(--space-5); background: var(--bg-1); border: 1px solid var(--rule); border-radius: var(--r-1); }
.partner-badges__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-3); }
.partner-badges__tag { font: 700 var(--fs-xs)/1 var(--ff-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--dim); white-space: nowrap; }
.partner-badges__row { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.partner-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r-1); }
.partner-badge__mark { display: inline-flex; width: 18px; height: 18px; }
.partner-badge__mark svg { width: 100%; height: 100%; }
.partner-badge__name { font: 600 var(--fs-xs)/1 var(--ff-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }
.partner-badges__note { font: var(--fs-xs)/1.55 var(--ff-mono); color: var(--dim); margin-top: var(--space-2); }

/* ─── auth form fineprint ─────────────────────────────────────────────── */
.form-fineprint { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed var(--rule); }
.form-fineprint p { font: var(--fs-xs)/1.6 var(--ff-mono); color: var(--dim); margin: 0 0 var(--space-2); }
.form-fineprint p:last-child { margin-bottom: 0; }

/* ─── signup collection notice ────────────────────────────────────────── */
.collection-notice { padding: var(--space-4) 0 0; }
.collection-notice .form-narrow { background: var(--bg-1); border: 1px solid var(--rule); border-left: 3px solid var(--amber); border-radius: var(--r-1); padding: var(--space-4) var(--space-5); }
.collection-notice h2 { font: 700 var(--fs-md)/1.2 var(--ff-mono); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--space-3); }
.collection-notice h2::after { display: none; }
.collection-notice p { font: var(--fs-sm)/1.6 var(--ff-mono); color: var(--ink-1); margin: 0 0 var(--space-2); }
.collection-notice p:last-child { margin-bottom: 0; }

/* ─── NCPF ribbon (page-top compliance message) ───────────────────────── */
.ncpf-ribbon { background: var(--amber); color: #0b0b0b; }
.ncpf-ribbon .wrap { padding: var(--space-2) var(--space-4); font: 700 var(--fs-xs)/1.5 var(--ff-mono); text-transform: uppercase; letter-spacing: .08em; text-align: center; }
.ncpf-ribbon a { color: #0b0b0b; text-decoration: underline; }

/* ─── prose table (legal data tables) ─────────────────────────────────── */
.prose-table-wrap { overflow-x: auto; margin: var(--space-3) 0 var(--space-4); }
.prose-table { width: 100%; border-collapse: collapse; font: var(--fs-sm)/1.5 var(--ff-mono); }
.prose-table th, .prose-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose-table th { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-xs); color: var(--dim); background: var(--bg-1); }
.prose-table td { color: var(--ink-1); }