/* ============================================================
   Yamamah Broadcast Desk — shared theme.

   One palette, "yamamah", set by data-theme on <html>. Every
   colour is a token. The Noir and Blue palettes and the switcher
   were removed on the user's instruction (2026-11-13).
   ============================================================ */

:root{
  --radius:10px;
  /* A real monospace for anything that reads as data — the clock, bib
     numbers, speeds, times — so digits line up and look instrumented,
     not a sans font faking it with tabular-nums. */
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Inter",system-ui,sans-serif;

  /* Course loop colours, as the platform sends them. Shared by every page —
     a red loop is red whatever the commentator's board looks like. */
  --loop-white:#FFFFFF;  --loop-white-ink:#15181B;
  --loop-yellow:#FFD705; --loop-yellow-ink:#15181B;
  --loop-red:#C8102E;    --loop-red-ink:#FFFFFF;
  --loop-blue:#1D4FA0;   --loop-blue-ink:#FFFFFF;
  --loop-green:#1E9E4A;  --loop-green-ink:#FFFFFF;
  --loop-purple:#5E1A6B; --loop-purple-ink:#FFFFFF;
}

/* YAMAMAH — "Broadcast Desk v2": the near-black + amber look from the second
   KT mockup, now the default. Values are a close read of that mockup's two
   screenshots, not extracted from its source (a sandboxed canvas artifact) —
   expect these to get trued up once seen live next to it.
   Green is kept, not replaced: the mockup still uses it for the LIVE dot and
   the class-info bar, so it stays the "this is genuinely live/good" colour
   while amber takes over as the selection/accent colour green used to be. */
[data-theme="yamamah"]{
  --bg:#0B0D10;      --panel:#12151A;   --panel-2:#1A1E24;
  --line:#262B33;    --line-soft:#1D2129;
  --text:#F5F6F8;    --text-2:#A8AFBB;  --text-3:#6B7280;
  --accent:#E0A030;  --accent-2:#E8B257;
  --accent-dim:#2A2113; --accent-line:#4D3B1C; --on-accent:#1A1206;
  --good:#2FA84F;    --bad:#E5484D;     --warn:#FF8A3D;
  --warn-bg:#2B1D0E; --warn-line:#5C3D15;
  --hot-bg:#231B0C;  --plate:#FFFFFF;   --scroll:#3A4048;
  --stripe:#15181E;  --highlight:#FFD24D;
  --tag:#E8707F;     --tag-ink:#2B1013;
  /* Two different tags, two different colours — amber for a speed fact,
     rose for a recovery one, never the same badge for both. */
  --tag-fastest:#FDEEDC;     --tag-fastest-ink:#B5650D;
  --tag-rec:#FBE0E3;         --tag-rec-ink:#C0314A;
  --brand:linear-gradient(160deg,#171A21 0%,#0B0D10 100%);
  --brand-ink:#FFFFFF;
  /* Flat, not a gradient — the mockup's class-info bar is one solid green. */
  --livebar:#2F7D3A;
  --livebar-solid:#2F7D3A;
  --livebar-ink:#FFFFFF;
  --fei:#5E1A6B;     --fei-ink:#FFFFFF;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.35);
  /* The FEI-badged toolbar and the Individual/Teams row sit on this neutral
     charcoal — distinct from --panel/--panel-2, which lean blue-grey. */
  --toolbar-bg:#333338;  --toolbar-ink:#C7C9CF;
  /* The result list stays the app's own white list — the mockup keeps it
     light inside the dark v2 chrome, the one place this theme doesn't go
     dark. These are the original (pre-v2) Yamamah values, preserved here
     rather than invented fresh. */
  --list-bg:#FFFFFF;      --list-panel-2:#F4F5F6;
  --list-line:#E2E5E8;    --list-line-soft:#EFF1F3;
  --list-text:#15181B;    --list-text-2:#5A6168;  --list-text-3:#8A9199;
  --list-stripe:#F7F8F9;  --list-shadow:0 1px 2px rgba(16,24,32,.06),0 1px 3px rgba(16,24,32,.08);
  --list-accent-dim:#FBF0DC;
}

*{box-sizing:border-box;margin:0;padding:0}
/* A display rule on an element beats the hidden attribute, which had left the
   keyboard-help overlay on screen and in the tab order while "hidden". */
[hidden]{display:none !important}

/* ---------------------------- keyboard focus ----------------------------
   The Desk has to be usable without a mouse — a commentary booth is a bad
   place to be hunting for a trackpad. Every interactive element shows a ring
   when reached by keyboard, and nothing shows one on a mouse click. */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}
.skip{
  position:absolute;inset-inline-start:12px;top:-60px;z-index:100;
  background:var(--accent);color:var(--on-accent);
  padding:10px 16px;border-radius:0 0 8px 8px;
  font:700 13px var(--sans);text-decoration:none;
  transition:top .12s ease;
}
.skip:focus{top:0}

/* A key, as printed in the help panel and the hints. */
kbd{
  display:inline-block;min-width:20px;padding:2px 6px;
  background:var(--panel-2);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:5px;font:600 11px var(--mono);color:var(--text-2);text-align:center;
}

html,body{height:100%}
body{
  background:var(--bg);color:var(--text);
  font:16px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.num{font-variant-numeric:tabular-nums;font-family:var(--mono);font-feature-settings:"tnum" 1}

/* ------------------------------ top bar ------------------------------ */
.topbar{
  height:62px;display:flex;align-items:center;gap:22px;flex:none;
  padding:0 20px;border-bottom:1px solid var(--line);
  background:var(--panel);
}
.brand{display:flex;align-items:center;gap:11px;white-space:nowrap;text-decoration:none}
.brand img{width:38px;height:38px;flex:none;object-fit:contain}
/* YAMAMAH sits tight, not letter-spaced apart; BROADCAST DESK underneath is
   the one with room to breathe, and reads amber, the way the mockup has it. */
.brand b{display:block;font:700 18px/1 var(--display);letter-spacing:.01em}
.brand span{
  display:block;font-size:9.5px;letter-spacing:.14em;margin-top:4px;
  color:var(--accent-2);text-transform:uppercase;font-weight:700;
}
.spacer{flex:1}

/* The ride name and its running counts. The LIVE / FINISHED badge and the
   clock live in the header itself now (v2); this bar is just the identity
   strip underneath, green the way the mockup's class-info bar is. */
.livebar{
  flex:none;position:relative;display:flex;align-items:stretch;
  height:36px;overflow:hidden;
  background:var(--livebar);color:var(--livebar-ink);
  font-size:13.5px;font-weight:600;
}

.ticker{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center}
.ticker .track{display:flex;align-items:center;white-space:nowrap;will-change:transform;padding-inline-start:20px}
.ticker .seg{display:flex;align-items:center;gap:13px;padding-inline-end:56px}
.ticker .name{font-weight:700;letter-spacing:.01em}
.ticker .sep{opacity:.45}
.ticker .tally{font-weight:700}
.ticker .tally b{font-weight:400;opacity:.8}

/* Only when it actually overruns. A ticker that scrolls when it does not need
   to is just movement in the corner of a commentator's eye. */
.ticker.scroll .track{animation:tick var(--tickdur,32s) linear infinite}
.ticker.scroll:hover .track,
.ticker.scroll:focus-within .track{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* In Arabic the band is laid out from the right, so it runs the other way. */
[dir="rtl"] .ticker.scroll .track{animation-name:tick-rtl}
@keyframes tick-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* Anyone who has asked for less motion gets a band they can scroll themselves. */
@media (prefers-reduced-motion:reduce){
  .ticker.scroll .track{animation:none}
  .ticker.scroll{overflow-x:auto;scrollbar-width:none}
  .ticker.scroll::-webkit-scrollbar{display:none}
}

/* Language, as the app has it in its own top bar. */
.langs{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.langs button{
  padding:6px 11px;background:var(--panel-2);border:0;border-inline-start:1px solid var(--line);
  color:var(--text-3);font:700 11.5px var(--sans);letter-spacing:.06em;cursor:pointer;
}
.langs button:first-child{border-inline-start:0}
.langs button:hover{color:var(--text-2)}
.langs button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}

/* Keyboard help panel, shared by both pages. */
.kbdbtn{padding:7px 11px;font-size:12px;gap:6px}
.helpwrap{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(0,0,0,.55);padding:24px;
}
.helpbox{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:22px 24px;max-width:430px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.4);
}
.helpbox h2{font:600 19px var(--display);margin-bottom:14px;color:var(--text)}
.helpbox dl{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;align-items:baseline;margin-bottom:18px}
.helpbox dt{text-align:end;white-space:nowrap}
.helpbox dd{font-size:13.5px;color:var(--text-2)}
.helpbox .btn{width:100%}

.who{display:flex;align-items:center;gap:12px;white-space:nowrap}
.who .nm{font-size:13px;font-weight:600}
.who .ch{font-size:11px;color:var(--text-3);letter-spacing:.05em}

/* ------------------------------ controls ----------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);
  padding:11px 18px;border-radius:9px;cursor:pointer;
  font:700 14px var(--sans);text-decoration:none;
}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.55;cursor:default;filter:none}
.btn.ghost{background:var(--panel-2);border-color:var(--line);color:var(--text-2);font-weight:600}
.btn.ghost:hover{color:var(--text)}

.field{display:block;margin-bottom:14px}
.field span{
  display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);font-weight:700;margin-bottom:7px;
}
.field input{
  width:100%;height:46px;padding:0 14px;
  background:var(--bg);border:1px solid var(--line);border-radius:9px;
  color:var(--text);font:500 16px var(--sans);
}
.field input:focus{border-color:var(--accent)}

.panel{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.chip{
  font-size:12px;color:var(--text-2);background:var(--panel-2);
  border:1px solid var(--line);padding:4px 10px;border-radius:999px;white-space:nowrap;
}
.chip.live{color:var(--on-accent);background:var(--accent);border-color:var(--accent);font-weight:700}
.chip.done{color:var(--text-3)}

.dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 2s infinite;flex:none}
@keyframes pulse{50%{opacity:.25}}

/* ---------------------- shared race components ----------------------- */

/* Loop badge, in the course's own colour. */
.loop{
  display:inline-grid;place-items:center;min-width:28px;height:20px;padding:0 8px;
  border-radius:999px;font:700 11px var(--mono);font-variant-numeric:tabular-nums;
  background:var(--loop-bg,var(--panel-2));color:var(--loop-ink,var(--text-2));
  border:1px solid rgba(0,0,0,.12);
}
.loop[data-c="white"] {--loop-bg:var(--loop-white); --loop-ink:var(--loop-white-ink)}
.loop[data-c="yellow"]{--loop-bg:var(--loop-yellow);--loop-ink:var(--loop-yellow-ink)}
.loop[data-c="red"]   {--loop-bg:var(--loop-red);   --loop-ink:var(--loop-red-ink)}
.loop[data-c="blue"]  {--loop-bg:var(--loop-blue);  --loop-ink:var(--loop-blue-ink)}
.loop[data-c="green"] {--loop-bg:var(--loop-green); --loop-ink:var(--loop-green-ink)}
.loop[data-c="purple"]{--loop-bg:var(--loop-purple);--loop-ink:var(--loop-purple-ink)}

/* Status, as the app shows it: a mark plus the official word, never a reason. */
.status{display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1.1}
.status svg{width:22px;height:22px;display:block}
.status i{font-style:normal;font-size:17px}
.status b{font-size:11px;font-weight:400;letter-spacing:.01em}
.status.fin{color:var(--good)}
.status.out{color:var(--bad)}
.status.run{color:var(--text-3)}
.status.run.loop-on i{color:var(--good)}
.status.vet{color:var(--accent-2)}

/* Heart rate in a heart, as the app does. The number is the point, so it sits
   inside at full contrast. */
.hr{
  display:inline-grid;place-items:center;width:34px;height:30px;
  background:var(--good);color:#fff;font:700 12px var(--mono);
  clip-path:path("M17 29C17 29 2 20.5 2 11.2 2 6.1 6.1 2 11.2 2c2.4 0 4.5 1 6 2.6C18.7 3 20.8 2 23.2 2 28.3 2 32.4 6.1 32.4 11.2 32.4 20.5 17 29 17 29Z");
}
.hr.over{background:var(--bad)}

/* A row the platform has flagged — fastest loop, best recovery. The app rings
   it in amber; so does this. */
.flagged{box-shadow:inset 0 0 0 2px var(--highlight)}
.badges{display:inline-flex;gap:4px;font-size:12px}

.empty{color:var(--text-3);font-size:15px;line-height:1.6}
.error{
  color:var(--bad);background:var(--warn-bg);border:1px solid var(--warn-line);
  border-radius:8px;padding:11px 14px;font-size:14px;margin-bottom:14px;
}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:9px}
::-webkit-scrollbar-track{background:transparent}


/* ------------------------------ right to left ------------------------------
   Arabic mode sets dir="rtl" on <html> (lang.js). Layout is flex and grid with
   logical margins and paddings, so it mirrors on its own. What is left here is
   what cannot mirror by itself.

   Text: the labels are still English and the names are Arabic, so each piece
   of text takes its direction from its own content. English sentences keep
   their punctuation in the right place and Arabic names read right to left,
   wherever the two meet. */
[dir="rtl"] body *{unicode-bidi:plaintext}
/* That rule would also align each line by its own language, leaving English
   lines on the left and Arabic ones on the right. In Arabic mode everything
   starts from the right instead. */
[dir="rtl"] body{text-align:right}
[dir="rtl"] .helpbox dt{text-align:left}
/* Numbers, times and gaps always read left to right: "+00:19", "ETA 11:29:36". */
[dir="rtl"] :is(.num,.bib,.arrval,.arrsub,.trail,.avgplain,.avgpill,.pos,.loop,.hbib2,.clock,time,
  .sp > span,.gatestat,.avstat b,.stat b,.count,.cnt){direction:ltr;unicode-bidi:isolate}
/* …except where a value is a phrase rather than a bare number. */
[dir="rtl"] :is(.records dd,.atglance dd,.prevpromo dd).num{direction:rtl;unicode-bidi:plaintext}
/* Arrows that mean "back" point the other way. */
[dir="rtl"] .backlive svg{display:inline-block;transform:scaleX(-1)}