/* ===== Live ride dash (js/dash.js). Matches design/dash-mock/. =====
 * No prefers-reduced-motion rule on purpose: Throttler froze its values under
 * reduced motion, and a dash that stops updating is a broken dash. */

@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 800; font-display: swap;
  src: url("../assets/fonts/BarlowCondensed-ExtraBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 900; font-display: swap;
  src: url("../assets/fonts/BarlowCondensed-BlackItalic.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("../assets/fonts/BarlowCondensed-Bold.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/JetBrainsMono-Medium.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../assets/fonts/JetBrainsMono-ExtraBold.woff2") format("woff2"); }

#dash {
  --bg: #0a0a0a; --card: #161616; --line: #2b2b2b; --w: #fff; --mute: #a3a3a3;
  --a: #c8f53a; --on-a: #0a0a0a; --good: #43e08a; --warn: #ffc53d; --bad: #ff5a4f;
  position: fixed; inset: 0; z-index: 11000; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 8px;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: var(--bg); color: var(--w); font-family: "Barlow Condensed", sans-serif;
  overflow: hidden; touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
#dash[hidden], #dash [hidden] { display: none !important; }
/* The dash carries its own SIMULATED chip; the demo label would sit on top of it. */
body:has(#dash:not([hidden])) #demo-build { display: none; }
#dash *, #dash *::before { box-sizing: border-box; }

.dash-top { display: flex; align-items: center; gap: 8px; height: 32px; flex: none; }
.dash-tag { background: var(--a); color: var(--on-a); font: italic 900 22px/32px "Barlow Condensed";
  padding: 0 14px 0 10px; text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }
.dash-rec { display: flex; align-items: center; gap: 5px; font: 800 13px "JetBrains Mono"; color: var(--bad); white-space: nowrap; }
.dash-rec i { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); }
.dash-rec:has(span:empty) { display: none; }
.dash-sim { font: 800 11px/20px "JetBrains Mono"; color: var(--on-a); background: var(--warn);
  padding: 0 6px; border-radius: 4px; white-space: nowrap; }
.dash-sim:empty { display: none; }
.dash-sp { flex: 1; min-width: 0; }
.dash-chip { font: 500 13px "JetBrains Mono"; color: var(--mute); white-space: nowrap; }

.dash-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.dash-body::-webkit-scrollbar { display: none; }
.dash-page { display: flex; flex-direction: column; gap: 8px; height: 100%; }

.dash-card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; min-width: 0; }
.dash-l { font: 700 15px/1 "Barlow Condensed"; letter-spacing: .09em; text-transform: uppercase; color: var(--mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dash-v { font: 800 42px/1.08 "JetBrains Mono"; letter-spacing: -.04em; white-space: nowrap; }
.dash-v small { font: 700 .45em "Barlow Condensed"; letter-spacing: 0; color: var(--mute); margin-left: 4px; }
.dash-v small:empty { display: none; }
.dash-v.txt { font: italic 800 31px/1.15 "Barlow Condensed"; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; }
.dash-v.a { color: var(--a); }
.dash-v.good { color: var(--good); }
.dash-v.warn { color: var(--warn); }
/* A placeholder sets the whole line, so a big hero size cannot leave a tall empty card. */
.dash-v:has(.none) { font: 700 24px/1.75 "Barlow Condensed"; letter-spacing: 0; color: var(--mute); }
.dash-v .none { font: inherit; }

.dash-heroes { display: flex; gap: 8px; flex: none; }
.dash-hero { flex: 1; min-width: 0; }
.dash-hero .dash-v { font: italic 900 142px/.92 "Barlow Condensed"; letter-spacing: -.02em; }
.dash-hero .dash-v small { font: italic 800 .2em "Barlow Condensed"; }
.dash-hero.two .dash-v { font-size: 100px; }
.dash-hero.long .dash-v { font-size: 128px; }
.dash-hero .dash-v:has(.none) { font: 700 40px/1.4 "Barlow Condensed"; letter-spacing: 0; color: var(--mute); }
.dash-sub { font: 700 21px/1.1 "Barlow Condensed"; color: var(--w); margin-top: 2px; }
.dash-sub:empty { display: none; }

.dash-ban { display: flex; align-items: center; gap: 12px; flex: none; background: var(--a); color: var(--on-a); border-radius: 8px; padding: 8px 12px; }
.dash-ban svg { width: 46px; height: 46px; flex: none; }
.dash-ban b { font: italic 900 40px/1 "Barlow Condensed"; display: block; white-space: nowrap; }
.dash-ban span { display: block; font: 700 22px/1.05 "Barlow Condensed"; overflow-wrap: anywhere; }
.dash-ban > div { min-width: 0; flex: 1; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; flex: none; }
.dash-grid .w2 { grid-column: span 2; }
.dash-grid.p2 { flex: 1; grid-auto-rows: 1fr; }
.dash-grid.p2 .dash-card { display: flex; flex-direction: column; justify-content: center; }
.dash-grid.p2 .dash-v { font-size: 62px; }
.dash-grid.p2 .dash-v.txt { font-size: 36px; }

.dash-prof { padding-bottom: 6px; flex: 1 1 96px; display: flex; flex-direction: column; min-height: 96px; }
.dash-prof-r { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.dash-prof-r span { font: 800 16px "JetBrains Mono"; white-space: nowrap; flex: none; }
.dash-wrap { flex: 1; min-height: 0; margin-top: 4px; }
.dash-wrap svg { display: block; width: 100%; height: 100%; }

.dash-acc { display: flex; gap: 10px; align-items: center; flex: none; padding: 9px 12px; border-left: 6px solid var(--c, var(--mute)); }
.dash-acc > div:first-child { flex: 1; min-width: 0; }
.dash-acc b { display: block; font: 800 22px/1.05 "Barlow Condensed"; color: var(--c, var(--mute)); overflow-wrap: anywhere; }
.dash-acc span.d { display: block; font: 600 17px/1.1 "Barlow Condensed"; color: var(--mute); overflow-wrap: anywhere; }
.dash-acc span.d:empty { display: none; }
.dash-sample { flex: none; font: 800 12px/20px "JetBrains Mono"; color: var(--on-a); background: var(--warn); border-radius: 4px; padding: 0 7px; text-transform: uppercase; }
.dash-sample:empty { display: none; }

.dash-bot { display: flex; align-items: center; gap: 10px; height: 50px; flex: none; }
.dash-dots { display: flex; gap: 7px; align-items: center; background: none; border: 0; padding: 14px 8px 14px 0; cursor: pointer; }
.dash-dots i { width: 9px; height: 9px; border-radius: 50%; background: #444; }
.dash-dots i.on { background: var(--a); width: 24px; border-radius: 5px; }
.dash-btn { position: relative; overflow: hidden; font: italic 800 21px/46px "Barlow Condensed"; height: 50px; padding: 0 16px;
  border: 2px solid #555; border-radius: 8px; color: var(--w); background: none; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.dash-hold { padding: 0 22px; touch-action: none; }
.dash-hold::before { content: ""; position: absolute; inset: 0; width: 0; background: var(--bad); opacity: .85; }
.dash-hold.holding::before { width: 100%; transition: width 1500ms linear; }
.dash-hold span { position: relative; }

/* The narrowest phones need a tighter top bar for the longest tag plus SIMULATED. */
@media (max-width: 380px) {
  .dash-top { gap: 6px; }
  .dash-tag { font-size: 20px; padding: 0 12px 0 8px; }
  .dash-chip { font-size: 12px; letter-spacing: -.03em; }
  .dash-sim { padding: 0 4px; font-size: 10px; }
}

/* Landscape on a phone: two columns, big numbers left. The page may scroll. */
@media (orientation: landscape) and (max-height: 520px) {
  .dash-page { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 8px; height: auto; min-height: 100%; }
  .dash-heroes { grid-column: 1; grid-row: 1; }
  .dash-ban { grid-column: 1; grid-row: 2; padding: 4px 12px; }
  .dash-grid { grid-column: 2; grid-row: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-grid.p2 { grid-column: 1 / span 2; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-prof { grid-column: 2; grid-row: 2 / span 2; flex: none; min-height: 70px; }
  .dash-acc { grid-column: 1; grid-row: 3; }
  .dash-hero .dash-v { font-size: 92px; }
  .dash-hero.two .dash-v { font-size: 68px; }
  .dash-hero.long .dash-v { font-size: 84px; }
  .dash-v { font-size: 30px; }
  .dash-grid.p2 .dash-v { font-size: 44px; }
}

/* Entries on the map: Rec's neighbours in #map-controls, and the mode picker. */
#dash-sim-sheet { position: fixed; inset: 0; z-index: 11001; background: rgba(0, 0, 0, .7); display: flex; align-items: flex-end; justify-content: center; }
#dash-sim-sheet[hidden] { display: none; }
.dash-sim-list { width: 100%; max-width: 420px; background: #161616; border-radius: 14px 14px 0 0; padding: 14px 14px max(14px, env(safe-area-inset-bottom)); color: #fff; font-family: "Barlow Condensed", sans-serif; }
.dash-sim-list h3 { margin: 0 0 10px; font: 700 22px "Barlow Condensed"; }
.dash-sim-list button { display: block; width: 100%; padding: 12px; margin-top: 8px; background: #222; color: #fff; border: 1px solid #333; border-radius: 8px; font: italic 800 22px "Barlow Condensed"; text-transform: uppercase; text-align: left; cursor: pointer; }