/* Shared event timers (event-timers.js).

   Scoreboard header: TIME LEFT plus one cell per enabled timer (EVSE 티켓 발급 / Jeep IVI / CAN).
   The cells carry .ah-score-clock so they share TIME LEFT's type exactly; the rules below
   only restore the divider and spacing that the first (TIME LEFT) cell drops.

   Challenges TRACK BRIEF: the overall time-left card (title left, big number, bar below).
   Card frame and sizes for the challenge console live in challenge-page.css. */

/* More timers than fit one row wrap below instead of pushing the board sideways. */
body.ah-app .ah-score-screen .ah-score-overview .ah-score-stats:has(> .ah-score-timer) { flex-wrap: wrap; row-gap: 14px; }

/* [hidden] must win over `.ah-score-stats > div { display: flex }`. */
.ah-score-stats > [hidden] { display: none !important; }

body.ah-app .ah-score-screen .ah-score-overview .ah-score-stats > .ah-score-clock.ah-score-timer {
  padding: 0 30px;
  border-left: 1px solid #727a8d40;
}
.ah-score-timer > span { white-space: nowrap; }
.ah-score-timer-name { font-weight: inherit; }
.ah-score-timer-team { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #4aa8ff26; color: #8cc6ff; font-style: normal; font-weight: 600; }
.ah-score-timer-team:empty { display: none; }
.ah-score-timer-note { margin-left: 6px; color: #e9aa60; font-size: .85em; font-style: normal; }
.ah-score-timer-note:empty { display: none; }
body.ah-app .ah-score-screen .ah-score-stats > .ah-score-timer:is([data-state="idle"], [data-state="ended"]) strong { color: #a9b1c2; }
body.ah-app .ah-score-screen .ah-score-stats > .ah-score-timer[data-state="paused"] strong { color: #c9ced9; }

@media (max-width: 575px) {
  /* Four cells do not fit one phone row: TIME LEFT on its own row, timers wrap below. */
  body.ah-app.ah-scoreboard-page .ah-score-screen .ah-score-overview .ah-score-stats { flex-wrap: wrap; row-gap: 16px; }
  body.ah-app.ah-scoreboard-page .ah-score-screen .ah-score-overview .ah-score-stats > .ah-score-clock:not(.ah-score-timer) { width: 100%; }
  body.ah-app .ah-score-screen .ah-score-overview .ah-score-stats > .ah-score-clock.ah-score-timer { padding: 0 16px 0 0; margin-right: 16px; border-left: 0; }
}

/* TRACK BRIEF overall clock. States: upcoming, live, warning (last 5 min), ended, none. */
.ah-overall-clock {
  --ah-oc-blue: #4aa8ff;
  --ah-oc-soft: #8cc6ff;
  --ah-oc-green: #3ddc97;
  --ah-oc-orange: #ff9f43;
  --ah-oc-muted: #9aa6ba;
  --ah-oc-dim: #6c788d;
  --ah-oc-accent: var(--ah-oc-green);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.ah-overall-inner { display: flex; flex-direction: column; gap: clamp(6px, 1.1vh, 10px); min-width: 0; }
.ah-overall-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.ah-overall-title { min-width: 0; overflow: hidden; color: var(--ah-oc-muted); font-size: 13px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.ah-overall-status { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; color: var(--ah-oc-accent); font-size: 13px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.ah-overall-status:empty { display: none; }
.ah-overall-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.ah-overall-time {
  color: #fff;
  font-size: clamp(28px, 4vh, 40px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ah-overall-message { margin: 0; color: #eef2f8; font-size: 15px; font-weight: 600; line-height: 1.4; }
.ah-overall-time:empty, .ah-overall-message:empty { display: none; }

.ah-overall-bar { display: none; height: 4px; margin-top: 2px; border-radius: 99px; background: #ffffff14; overflow: hidden; }
.ah-overall-bar i { display: block; width: max(4px, var(--ah-overall-progress, 0%)); height: 100%; border-radius: inherit; background: var(--ah-oc-blue); transition: width .9s linear; }

.ah-overall-clock[data-state="upcoming"] { --ah-oc-accent: var(--ah-oc-soft); }
.ah-overall-clock[data-state="upcoming"] .ah-overall-status::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.ah-overall-clock[data-state="upcoming"] .ah-overall-time { color: var(--ah-oc-soft); }
.ah-overall-clock:is([data-state="live"], [data-state="warning"]) .ah-overall-bar { display: block; }
.ah-overall-clock[data-state="warning"] { --ah-oc-accent: var(--ah-oc-orange); }
.ah-overall-clock[data-state="warning"] .ah-overall-time { color: var(--ah-oc-orange); }
.ah-overall-clock[data-state="warning"] .ah-overall-bar i { background: var(--ah-oc-orange); }
.ah-overall-clock[data-state="ended"] { --ah-oc-accent: var(--ah-oc-dim); }
.ah-overall-clock[data-state="none"] .ah-overall-message { color: var(--ah-oc-muted); font-size: 14px; font-weight: 500; }

@media (prefers-reduced-motion: reduce) { .ah-overall-bar i { transition: none; } }

/* Short desktop screens (e.g. 1366x768): the card now shows on every track, so reclaim a little brief spacing. */
@media (min-width: 1101px) and (max-height: 860px) {
  body.ah-app .ah-challenge-console .ah-track-brief:has(.ah-overall-clock) .ah-track-identity { margin-top: 16px; }
  body.ah-app .ah-challenge-console .ah-track-brief:has(.ah-overall-clock) .ah-track-facts > div { padding-top: 12px; padding-bottom: 12px; }
}
