/* openpiste-results — all colours are tokens. Pages and components use
   var(--…) only; never a literal colour outside this :root block. */

:root {
  /* Chrome — light */
  --clr-bg:          #f5f7fa;
  --clr-surface:     #ffffff;
  --clr-surface-2:   #eef2f6;
  --clr-border:      #d6dde5;
  --clr-text:        #17202a;
  --clr-text-muted:  #5d6b7a;
  --clr-brand:       #1a6bab;
  --clr-brand-text:  #ffffff;
  --clr-live:        #c0392b;
  --clr-live-bg:     #fbddd8;
  --clr-upcoming-bg: #dce6f3;
  --clr-upcoming:    #3a5a87;
  --clr-past-bg:     #e5e8ec;
  --clr-offline:     #8c8f92;

  /* Signal colours — fixed real-world meanings (FIE lamps and cards),
     deliberately identical in light and dark mode. */
  --sig-left:        #d62828;
  --sig-right:       #1e9e4a;
  --sig-white:       #f4f4f4;
  --sig-lamp-off:    #3a3f44;
  --sig-yellow:      #f5c400;
  --sig-red:         #d62828;
  --sig-black:       #111111;
  --sig-board:       #101418;
  --sig-board-text:  #f2f4f6;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --clr-bg:          #0f1418;
    --clr-surface:     #182028;
    --clr-surface-2:   #202a34;
    --clr-border:      #2e3a46;
    --clr-text:        #e6ebf0;
    --clr-text-muted:  #97a5b3;
    --clr-brand:       #5aa0da;
    --clr-brand-text:  #0f1418;
    --clr-live:        #ff7a6b;
    --clr-live-bg:     #4a1f1a;
    --clr-upcoming-bg: #1f2e44;
    --clr-upcoming:    #9fbde6;
    --clr-past-bg:     #262e36;
    --clr-offline:     #6b7680;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--clr-bg);
  color: var(--clr-text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--clr-brand); text-decoration: none; }
a:hover { text-decoration: underline; }
[x-cloak] { display: none !important; }

/* ── Layout ─────────────────────────────────────────── */
.site-header {
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  padding: .75rem 0;
}
.site-header .inner, main { max-width: 1100px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.site-header .brand { font-weight: 700; color: var(--clr-text); }
.site-header .brand span { color: var(--clr-brand); }
main { padding-top: 1rem; padding-bottom: 3rem; }
h1 { font-size: 1.5rem; margin: .5rem 0 .25rem; }
h2 { font-size: 1.05rem; margin: 1.75rem 0 .5rem; color: var(--clr-text-muted); font-weight: 600; }
.muted { color: var(--clr-text-muted); }
.crumbs { font-size: .9rem; color: var(--clr-text-muted); }
.crumbs a { color: var(--clr-text-muted); }
.empty { color: var(--clr-text-muted); padding: 1rem 0; }

/* ── Filters ────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.filters input, .filters select {
  font: inherit; padding: .45rem .6rem; border-radius: 8px;
  border: 1px solid var(--clr-border); background: var(--clr-surface); color: var(--clr-text);
}
.filters input { flex: 1 1 220px; min-width: 0; }

/* ── Cards / lists ──────────────────────────────────── */
.card-list { display: grid; gap: .6rem; }
.card {
  display: block; background: var(--clr-surface); border: 1px solid var(--clr-border);
  border-radius: 10px; padding: .8rem 1rem; color: var(--clr-text);
}
a.card:hover { text-decoration: none; border-color: var(--clr-brand); }
.card .title { font-weight: 600; }
.card .meta { font-size: .9rem; color: var(--clr-text-muted); }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.chip {
  font-size: .78rem; padding: .1rem .5rem; border-radius: 999px;
  background: var(--clr-surface-2); color: var(--clr-text-muted);
}
.badge { font-size: .72rem; font-weight: 700; letter-spacing: .03em; padding: .1rem .45rem; border-radius: 4px; text-transform: uppercase; }
.badge.live     { background: var(--clr-live-bg); color: var(--clr-live); }
.badge.upcoming { background: var(--clr-upcoming-bg); color: var(--clr-upcoming); }
.badge.past     { background: var(--clr-past-bg); color: var(--clr-text-muted); }
.row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }

/* ── Piste tiles ────────────────────────────────────── */
.tiles { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tile {
  display: block; background: var(--sig-board); color: var(--sig-board-text);
  border-radius: 10px; padding: .6rem .75rem .7rem; overflow: hidden;
}
a.tile:hover { text-decoration: none; outline: 2px solid var(--clr-brand); }
.tile.offline { opacity: .55; }
.tile-head { display: flex; justify-content: space-between; font-size: .8rem; opacity: .8; margin-bottom: .35rem; }
.tile-body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; }
.fencer { min-width: 0; }
.fencer.right { text-align: right; }
.fencer .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fencer .nation { font-size: .75rem; opacity: .75; }
.fencer.left  .name { border-left: 4px solid var(--sig-left); padding-left: .4rem; }
.fencer.right .name { border-right: 4px solid var(--sig-right); padding-right: .4rem; }
.scores { display: flex; align-items: center; gap: .4rem; font-variant-numeric: tabular-nums; }
.score { font-size: 1.9rem; font-weight: 800; min-width: 1.6ch; text-align: center; }
.score.prio { text-decoration: underline; text-underline-offset: 4px; }
.clock { font-size: .95rem; text-align: center; font-variant-numeric: tabular-nums; opacity: .9; }
.tile-foot { display: flex; justify-content: space-between; align-items: center; margin-top: .4rem; min-height: 14px; }
.lamps { display: flex; gap: 4px; }
.lamp { width: 14px; height: 14px; border-radius: 3px; background: var(--sig-lamp-off); }
.lamp.on-left  { background: var(--sig-left); }
.lamp.on-right { background: var(--sig-right); }
.lamp.on-white { background: var(--sig-white); }
.cards { display: flex; gap: 3px; }
.card-y, .card-r, .card-b { width: 9px; height: 13px; border-radius: 2px; }
.card-y { background: var(--sig-yellow); }
.card-r { background: var(--sig-red); }
.card-b { background: var(--sig-black); outline: 1px solid var(--sig-board-text); }
.state { font-size: .72rem; opacity: .75; }

/* ── Single-piste board ─────────────────────────────── */
body.board { background: var(--sig-board); color: var(--sig-board-text); }
.board-wrap { min-height: 100vh; display: flex; flex-direction: column; padding: 16px; }
.board-head { display: flex; justify-content: space-between; opacity: .8; font-size: clamp(.9rem, 2vw, 1.2rem); }
.board-head a { color: var(--sig-board-text); }
.board-main {
  flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2vw;
  grid-template-areas: "left scores right";
}
.board-main .fencer.left  { grid-area: left; }
.board-main .fencer.right { grid-area: right; }
.board-main .scores       { grid-area: scores; justify-content: center; }
.board-main .fencer .name { font-size: clamp(1.1rem, 4vw, 2.6rem); white-space: normal; overflow-wrap: anywhere; }
.board-main .fencer .nation { font-size: clamp(.9rem, 2vw, 1.3rem); }
.board-main .score { font-size: clamp(4rem, 18vw, 14rem); }
.board-clock { text-align: center; font-size: clamp(2rem, 8vw, 6rem); font-variant-numeric: tabular-nums; }
.board-lamps { display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; }
.board-lamps .pair { display: flex; gap: 1vw; }
.board-lamps .pair.right { justify-content: flex-end; }
.board-lamps .lamp { width: 12vw; height: 5vh; border-radius: 6px; }
.board-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
.board-foot .card-y, .board-foot .card-r, .board-foot .card-b { width: 18px; height: 26px; }

/* Portrait phone: names get their own row above the score. */
@media (max-width: 600px) {
  .board-main {
    grid-template-columns: 1fr 1fr; grid-template-areas: "left right" "scores scores";
    align-content: center; row-gap: 4vh;
  }
  .board-main .fencer .name { font-size: 1.4rem; }
  .board-main .score { font-size: clamp(4rem, 28vw, 9rem); }
}

@media (max-width: 480px) {
  .tiles { grid-template-columns: 1fr; }
  .score { font-size: 1.6rem; }
}