/* IERL public site — one stylesheet. Dark, sporting, legible on a phone at the venue and on a wall TV.
   Tokens on :root; nothing hard-coded below them. */
:root {
  --bg: #0d1016; --panel: #151a22; --panel-2: #1b212b; --line: #262d38; --line-2: #343d4b;
  --ink: #eef1f5; --ink-2: #aab3c0; --ink-3: #6f7a89;
  --accent: #ff6a00; --accent-2: #ffb347; --green: #37d67a; --amber: #f5b400; --red: #ff5c4d; --blue: #4ea3ff; --purple: #b794f6;
  --r: 10px; --r-s: 6px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --display: "Barlow Condensed", "Bahnschrift Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --text: "Barlow", "Segoe UI", system-ui, sans-serif; --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--text); -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; }
.top { display: flex; align-items: center; gap: var(--s5); padding: 0 var(--s5); height: 60px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 5; overflow-x: auto; scrollbar-width: none; }
.top::-webkit-scrollbar { display: none; }
.nav a { white-space: nowrap; }
.brand { display: flex; align-items: baseline; gap: var(--s3); color: var(--ink); }
.brand .mark { font: 800 26px/1 var(--display); letter-spacing: .06em; color: var(--accent); }
.brand .name { font: 500 14px/1 var(--display); letter-spacing: .04em; color: var(--ink-2); text-transform: uppercase; }
.nav { display: flex; gap: var(--s4); margin-left: var(--s4); }
.nav a { color: var(--ink-2); font: 600 15px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; padding: 22px 2px 20px; border-bottom: 2px solid transparent; }
.nav a.on { color: var(--ink); border-bottom-color: var(--accent); }
.season { margin-left: auto; color: var(--ink-3); font: 500 13px/1 var(--display); text-transform: uppercase; letter-spacing: .08em; }
.page { max-width: 1240px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); min-height: 60vh; }
.foot { max-width: 1240px; margin: 0 auto; padding: var(--s4); color: var(--ink-3); font-size: 12px; border-top: 1px solid var(--line); }
.quiet { color: var(--ink-3); } .muted { color: var(--ink-2); }
h1 { font: 700 34px/1.05 var(--display); margin: 0 0 var(--s2); letter-spacing: .01em; }
h2 { font: 600 22px/1.1 var(--display); margin: var(--s5) 0 var(--s3); }
.sub { color: var(--ink-2); margin: 0 0 var(--s4); }
.loading, .empty { color: var(--ink-3); padding: var(--s6) 0; text-align: center; }
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; margin: var(--s3) 0 var(--s4); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); background: var(--panel); font: 600 13px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #111; }
.chip.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(55,214,122,.2); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4) var(--s5); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.round-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s5); }
.round-head .meta { color: var(--ink-2); }
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font: 600 11px/1.4 var(--display); text-transform: uppercase; letter-spacing: .06em; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--ink-2); }
.badge.live { color: var(--green); border-color: rgba(55,214,122,.4); } .badge.done { color: var(--ink-3); } .badge.legacy { color: var(--amber); }
table.board { width: 100%; border-collapse: collapse; margin-top: var(--s3); }
.board th { text-align: left; font: 600 11px/1.2 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); padding: 0 10px 8px; border-bottom: 1px solid var(--line-2); }
.board td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.board tr:hover td { background: rgba(255,255,255,.02); }
.board .pos { width: 44px; font: 700 18px/1 var(--display); color: var(--ink-2); }
.board tr.p1 .pos { color: var(--accent); } .board tr.p2 .pos { color: #c6ccd6; } .board tr.p3 .pos { color: #d6a074; }
.board .drv { font: 600 17px/1.15 var(--display); } .board .drv small { display: block; font: 400 12px/1.3 var(--text); color: var(--ink-3); }
.board .time { font: 600 16px/1 var(--mono); text-align: right; white-space: nowrap; } .board .gap { color: var(--ink-3); font: 13px/1 var(--mono); text-align: right; white-space: nowrap; }
.board .venue { color: var(--ink-2); } .board .date { color: var(--ink-3); font-size: 13px; white-space: nowrap; }
@media (max-width: 560px) { .board .date { white-space: normal; font-size: 12px; } .board .time { font-size: 13px; } }
.board tr.cut td { opacity: .55; } .board tr.cutline td { border-top: 2px dashed var(--line-2); }
.tele { color: var(--purple); font-size: 12px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.stand .pts { font: 700 20px/1 var(--display); color: var(--ink); text-align: right; }
.legend { color: var(--ink-3); font-size: 12px; margin-top: var(--s3); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s3); margin: var(--s3) 0 var(--s4); }
.kpi { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 12px; }
.kpi b { display: block; font: 700 24px/1 var(--display); } .kpi span { color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.search { width: 100%; max-width: 420px; padding: 10px 12px; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); font: 15px var(--text); margin-bottom: var(--s3); }
.list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s2); }
.list li a { display: flex; justify-content: space-between; gap: var(--s2); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); color: var(--ink); background: var(--panel); }
.list li a:hover { border-color: var(--line-2); text-decoration: none; }
.list small { color: var(--ink-3); }
.rules p, .rules li { color: var(--ink-2); max-width: 72ch; }
.rules li { margin: 4px 0; }
.bare .top, .bare .foot { display: none; } .bare .page { max-width: none; padding: var(--s3); }
.show-sm { display: none; }
@media (max-width: 900px) { .nav { gap: var(--s3); } .nav a { font-size: 13px; padding: 24px 0 20px; } .brand .name { display: none; } .grid2 { grid-template-columns: 1fr; } .season { display: none; } .hide-sm { display: none !important; } .show-sm { display: inline; } }
@media (max-width: 560px) { .top { padding: 0 var(--s3); gap: var(--s3); overflow-x: auto; } .page { padding: var(--s4) var(--s3) var(--s6); } h1 { font-size: 26px; } .board td, .board th { padding-left: 6px; padding-right: 6px; } .hide-xs { display: none !important; } .board .drv { font-size: 15px; } .board .time { font-size: 14px; } .kpis { grid-template-columns: 1fr 1fr; } .kpi b { font-size: 20px; } }