/* app.css — RACECARD shell tokens + page frame + border classes (DESIGN.md §0,§3,§4) */
@import url('https://fonts.googleapis.com/css2?family=Sigmar&family=Playfair+Display:wght@400;700&family=Ruda:wght@400;500;700&family=Tourney:wght@400;500;700&display=swap');

:root{
  --unit: calc(100vw / 1920); /* 1 unit = 1px at 1920 */
  --paper: #108A25;
  --turf-brand: #14C53D;
  --ivory: #F5F0E4;
  --ink: #080B10;
  --rule: #697078;
  --signal-red: #FC1B0D;
  --arc-blue: #0145DC;
  --success: #078C31;

  --bg: var(--paper);
  --mute: var(--rule);
  --a: var(--signal-red);
  --b: var(--arc-blue);
  --font-display: "Playfair Display", serif;
  --font-wordmark: "Sigmar", "Impact", sans-serif;
  --font-body: "Ruda", Arial, sans-serif;
  --font-mono: "Tourney", monospace;

  --gutter-l: calc(42 * var(--unit));
  --gutter-r: calc(40 * var(--unit));
  --container: calc(1838 * var(--unit));
}

html,body{background:var(--paper);color:var(--ink)}
body{font-family:var(--font-body)}

/* ---- ONE PAGE FRAME (LUAT 53 / USER FIX) ---- */
.page{
  width:100%;
  max-width:none;
  margin:0 auto;
  padding-left:var(--gutter-l);
  padding-right:var(--gutter-r);
  background:var(--paper);
  box-sizing:border-box;
}

h1,h2,h3,.display{font-family:var(--font-display);font-weight:700}
.wordmark{font-family:var(--font-wordmark)}
.mono,[data-cell-mono]{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---- BORDER TABLE CLASSES (DESIGN.md §4b, hairlines max(1px, value)) ---- */
.rule-masthead{border-bottom:max(1px, calc(1.6 * var(--unit))) solid var(--rule)}
.rule-cta-accent{border-bottom:max(1px, calc(1.1 * var(--unit))) solid var(--arc-blue)}
.rule-panel{border:max(1px, calc(2.3 * var(--unit))) solid var(--rule);background:var(--ivory)}
.rule-panel-highlight{border:max(1px, calc(2.3 * var(--unit))) solid var(--signal-red)}
.rule-row{border-bottom:max(1px, calc(1.5 * var(--unit))) solid var(--rule)}
.rule-row:last-child{border-bottom:0}
.rule-row.rule-panel-highlight{border:max(1px, calc(2.3 * var(--unit))) solid var(--signal-red)}
.rule-row:has(+ .rule-panel-highlight){border-bottom:0}
.rule-pill{border:max(1px, calc(2.2 * var(--unit))) solid var(--rule);background:var(--ivory)}
.rule-pill-active{border:max(1px, calc(2.2 * var(--unit))) solid var(--signal-red);background:var(--signal-red);color:#fff}
.rule-cell{border:max(1px, calc(2.3 * var(--unit))) solid var(--rule)}
.rule-chart-frame{border:max(1px, calc(2.3 * var(--unit))) solid var(--rule);background:var(--ivory)}
.rule-modal{border:max(1px, calc(2.3 * var(--unit))) solid var(--rule);background:var(--ivory)}
.rule-art-frame{border:max(1px, calc(2.2 * var(--unit))) solid var(--success)}
.rule-input{border:max(1px, calc(2 * var(--unit))) solid var(--rule);background:#fff}
:where(button,input,select){border:0;font:inherit}
.rule-sheet{border:max(1px, calc(1.3 * var(--unit))) solid #00761A}
.rule-seg>.rule-pill+*,.rule-seg>.rule-pill-active+*{border-left:0}
.rule-end>.rule-row:last-child,thead>.rule-row:last-child{border-bottom:max(1px, calc(1.5 * var(--unit))) solid var(--rule)}
.rule-row:has(+ .rule-end > .rule-panel-highlight:first-child){border-bottom:0}

/* ---- NAV (USER FIX R1: one-row racecard bar, sticky) ---- */
.rule-foot{border-top:max(1px, calc(1.6 * var(--unit))) solid var(--rule)}
.soc svg{width:1em;height:1em;flex:none}
[data-chrome="nav"]{background:var(--ivory);color:var(--ink);position:sticky;top:0;z-index:30}
[data-chrome="nav"] .nav-bar{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:calc(24*var(--unit));
  height:max(64px, calc(88*var(--unit)));box-sizing:border-box;padding:0 var(--gutter-r) 0 var(--gutter-l);
}
[data-chrome="nav"] .brand{display:flex;align-items:center;gap:max(8px, calc(14*var(--unit)));min-width:0}
[data-chrome="nav"] .mark{height:max(40px, calc(58*var(--unit)));width:auto;object-fit:contain;flex:none}
[data-chrome="nav"] .brand-txt{display:flex;flex-direction:column;min-width:0}
[data-chrome="nav"] .word{font-family:var(--font-wordmark);font-size:max(22px, calc(34*var(--unit)));line-height:1;letter-spacing:.01em;white-space:nowrap}
[data-chrome="nav"] .brand-sub{font-size:max(11px, calc(13*var(--unit)));font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#4A5058;margin-top:max(3px, calc(5*var(--unit)));white-space:nowrap}
[data-chrome="nav"] nav.nav-desktop{display:flex;align-items:center;gap:max(4px, calc(8*var(--unit)));background:var(--ink);padding:max(4px, calc(6*var(--unit)))}
[data-chrome="nav"] nav.nav-desktop a{
  display:flex;align-items:center;gap:max(7px, calc(10*var(--unit)));
  font-family:var(--font-body);font-weight:700;font-size:max(14px, calc(17*var(--unit)));letter-spacing:.06em;text-transform:uppercase;
  color:var(--ivory);text-decoration:none;padding:max(8px, calc(11*var(--unit))) max(14px, calc(22*var(--unit)));white-space:nowrap;
  transition:background-color 150ms ease-out,color 150ms ease-out;
}
[data-chrome="nav"] nav.nav-desktop .nn{
  display:inline-grid;place-items:center;width:max(20px, calc(24*var(--unit)));height:max(20px, calc(24*var(--unit)));border-radius:50%;
  background:var(--ivory);color:var(--ink);font-size:max(11px, calc(13*var(--unit)));letter-spacing:0;line-height:1;
}
[data-chrome="nav"] nav.nav-desktop a:hover{background:#262B33}
[data-chrome="nav"] nav.nav-desktop a.is-active,[data-chrome="nav"] nav.nav-desktop a[aria-current="page"]{background:#A8150C;color:#fff;box-shadow:inset 0 -4px 0 var(--signal-red)}
[data-chrome="nav"] nav.nav-desktop a.is-active .nn,[data-chrome="nav"] nav.nav-desktop a[aria-current="page"] .nn{background:var(--signal-red);color:#fff}
[data-chrome="nav"] .nav-right{display:flex;align-items:center;justify-content:flex-end;gap:max(8px, calc(12*var(--unit)));min-width:0}
[data-chrome="nav"] .block-chip{display:inline-flex;align-items:center;gap:6px;font-size:max(12px, calc(14*var(--unit)));color:#4A5058;white-space:nowrap}
[data-chrome="nav"] .block-chip b{color:var(--ink);font-weight:700}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex:none;animation:live-pulse 1.6s ease-in-out infinite}
@keyframes live-pulse{50%{opacity:.35}}
.soc{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink);font-weight:700;white-space:nowrap}
[data-chrome="nav"] .soc{font-size:max(13px, calc(15*var(--unit)));padding:max(8px, calc(10*var(--unit))) max(9px, calc(12*var(--unit)));background:#E7E0CF;transition:background-color 150ms}
[data-chrome="nav"] .soc:hover{background:#DCD3BE}
[data-chrome="nav"] .wallet{background:var(--arc-blue);color:#fff;font-weight:700;padding:max(9px, calc(12*var(--unit))) max(14px, calc(20*var(--unit)));font-size:max(13px, calc(15*var(--unit)));cursor:pointer;white-space:nowrap;transition:background-color 150ms}
[data-chrome="nav"] .wallet:hover{background:#0038B5}
[data-chrome="nav"] .wallet.is-connected{background:var(--ink)}
[data-chrome="nav"] .nav-toggle{display:none;background:var(--ink);color:var(--ivory);font-weight:700;font-size:14px;padding:10px 14px;cursor:pointer}
@media (max-width:1600px){[data-chrome="nav"] .soc span{display:none}}
@media (max-width:1366px){[data-chrome="nav"] .brand-sub,[data-chrome="nav"] .block-chip{display:none}}

/* ---- FOOTER (USER FIX R1: four-column racecard credits, matches nav) ---- */
[data-chrome="footer"]{background:var(--ivory);color:var(--ink);font-family:var(--font-body);padding:0 var(--gutter-r) 0 var(--gutter-l)}
[data-chrome="footer"] .foot-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.6fr) minmax(0,1.6fr) minmax(0,.9fr);column-gap:calc(64*var(--unit));padding:calc(48*var(--unit)) 0 calc(40*var(--unit))}
[data-chrome="footer"] .brand{display:flex;align-items:center;gap:max(8px, calc(14*var(--unit)))}
[data-chrome="footer"] .mark{height:max(40px, calc(56*var(--unit)));width:auto}
[data-chrome="footer"] .word{font-family:var(--font-wordmark);font-size:max(22px, calc(32*var(--unit)));line-height:1}
[data-chrome="footer"] .foot-brand p{margin:max(12px, calc(18*var(--unit))) 0 0;font-size:max(14px, calc(16*var(--unit)));line-height:1.5;max-width:36em;color:#3A4048}
[data-chrome="footer"] .foot-soc{display:flex;gap:10px;margin-top:max(14px, calc(20*var(--unit)))}
[data-chrome="footer"] .soc{font-size:max(13px, calc(15*var(--unit)));padding:max(9px, calc(11*var(--unit))) max(12px, calc(16*var(--unit)));background:var(--ink);color:var(--ivory);transition:background-color 150ms}
[data-chrome="footer"] .soc:hover{background:var(--signal-red)}
[data-chrome="footer"] h3{font-family:var(--font-body);font-weight:700;font-size:max(12px, calc(13*var(--unit)));letter-spacing:.14em;text-transform:uppercase;color:#4A5058;margin:max(6px, calc(8*var(--unit))) 0 max(12px, calc(16*var(--unit)))}
[data-chrome="footer"] ul{list-style:none;margin:0;padding:0}
[data-chrome="footer"] .foot-links li+li{margin-top:max(8px, calc(10*var(--unit)))}
[data-chrome="footer"] .foot-links a{color:var(--ink);text-decoration:none;font-weight:700;font-size:max(14px, calc(17*var(--unit)))}
[data-chrome="footer"] .foot-links a:hover{color:var(--signal-red)}
[data-chrome="footer"] .foot-runners ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(4,auto);column-gap:calc(32*var(--unit));row-gap:max(8px, calc(10*var(--unit)))}
[data-chrome="footer"] .foot-runners li{display:flex;align-items:center;gap:10px;min-width:0;font-size:max(14px, calc(16*var(--unit)))}
[data-chrome="footer"] .foot-runners b{font-weight:700;white-space:nowrap}
[data-chrome="footer"] .foot-runners em{font-style:normal;color:#4A5058;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
[data-chrome="footer"] .fn{display:inline-grid;place-items:center;flex:none;width:max(22px, calc(26*var(--unit)));height:max(22px, calc(26*var(--unit)));border-radius:50%;background:var(--c);color:var(--ci);font-weight:700;font-size:max(12px, calc(13*var(--unit)))}
[data-chrome="footer"] .foot-data{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:max(8px, calc(10*var(--unit)));margin:0;font-size:max(14px, calc(16*var(--unit)))}
[data-chrome="footer"] .foot-data dt{font-weight:700}
[data-chrome="footer"] .foot-data dd{margin:0;color:#3A4048}
[data-chrome="footer"] .foot-base{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:max(14px, calc(18*var(--unit))) 0;font-size:max(13px, calc(14*var(--unit)));color:#4A5058}

/* ---- Tablet / mobile: nav drawer, stacked footer ---- */
@media (max-width:1024px){
  [data-chrome="nav"] .nav-bar{grid-template-columns:minmax(0,1fr) auto;height:64px}
  [data-chrome="nav"] .nav-toggle{display:block}
  [data-chrome="nav"] nav.nav-desktop{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;display:none;z-index:20;padding:6px}
  [data-chrome="nav"] nav.nav-desktop.is-open{display:flex!important}
  [data-chrome="nav"] nav.nav-desktop a{padding:14px 18px}
  [data-chrome="footer"] .foot-grid{grid-template-columns:1fr 1fr;row-gap:32px;padding:32px 0}
}
@media (max-width:600px){
  [data-chrome="nav"] .wallet{padding:9px 10px;font-size:12px}
  [data-chrome="nav"] .soc{padding:8px}
  [data-chrome="nav"] .word{font-size:20px}
  [data-chrome="nav"] .mark{height:34px}
  [data-chrome="nav"] .nav-right{gap:6px}
  [data-chrome="footer"] .foot-grid{grid-template-columns:1fr}
  [data-chrome="footer"] .foot-base{flex-direction:column;gap:6px}
}
@media (max-width:480px){[data-chrome="nav"] .brand-txt{display:none}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}

/* ---- Wallet / Coming-soon modals ---- */
.wallet-modal,.soon-modal{position:fixed;inset:0;background:rgba(8,11,16,.55);display:flex;align-items:center;justify-content:center;z-index:50}
.wallet-modal[hidden],.soon-modal[hidden]{display:none}
.wallet-modal-card,.soon-modal-card{background:var(--ivory);color:var(--ink);padding:28px;min-width:280px;display:flex;flex-direction:column;gap:10px}
.wallet-modal-card button,.soon-modal-card button{padding:12px 16px;background:#fff;border:max(1px, calc(2*var(--unit))) solid var(--rule);cursor:pointer;font:inherit;text-align:left}
.wallet-modal-card .wallet-modal-close,.soon-modal-card button[data-soon-close]{background:var(--ink);color:#fff;text-align:center}

/* ---- Gate-wipe route transition (DESIGN.md §8) ---- */
main{position:relative}
main.is-leaving{opacity:1;transition:none}
main.is-leaving::before,main.is-leaving::after{content:"";position:fixed;top:0;bottom:0;width:50vw;background:repeating-linear-gradient(90deg,var(--ink) 0 12px,var(--rule) 12px 24px);z-index:40;animation:gate-wipe 240ms ease-out forwards}
main.is-leaving::before{left:0;transform-origin:left}
main.is-leaving::after{right:0;transform-origin:right}
@keyframes gate-wipe{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){main.is-leaving::before,main.is-leaving::after{display:none}}

/* ---- Motion helpers (count-up, reveal, flip) off under reduced-motion ---- */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 300ms ease-out, transform 300ms ease-out}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}
[data-flip]{transition:transform 200ms ease-out}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  [data-flip]{transition:none!important}
}