/* =====================================================================================
   PaveX PCI Viewer — "survey instrument"
   The map is the work surface; panels are docked flush to it, separated by rules, like
   desktop GIS software. The one expressive element is the PCI ruler: a 0–100 scale banded
   in the ASTM D6433 condition colours, used for the network and for every segment.
   PaveX red is reserved for the survey vehicle on the map and the primary action, because
   the PCI scale itself uses oranges and reds.
   Type: Barlow, drawn from US highway signage; Barlow Semi Condensed for figures.
   ===================================================================================== */

:root {
  --asphalt: #20262a;      /* text, active states */
  --graphite: #5d666d;     /* secondary text */
  --aggregate: #8c959b;    /* tertiary text, scale labels */
  --rule: #d8dcdf;
  --rule-soft: #e8ebed;
  --ground: #eef0f1;       /* app background, hover */
  --panel: #ffffff;
  --signal: #ea3323;       /* PaveX red */
  --signal-dark: #c4241a;
  --stage: #191d20;        /* behind videos */
  --focus: #1f6fd1;
  --rail-w: 328px;
  --drawer-w: 560px;
  --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14px/1.45 var(--font); color: var(--asphalt); background: var(--ground); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, p { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: right; }

.btn { border: 1px solid var(--rule); background: var(--panel); border-radius: 4px; padding: 7px 14px; font-weight: 600; }
.btn:hover { border-color: #b9c0c4; }
.btn.primary { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn.primary:hover { background: var(--signal-dark); border-color: var(--signal-dark); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--graphite); font-weight: 500; }
.btn.ghost:hover { color: var(--asphalt); background: var(--ground); }
.btn.small { padding: 4px 10px; font-size: 13px; font-weight: 500; }
.linkish { border: 0; background: none; padding: 0; color: var(--focus); text-decoration: underline; }
.icon-btn { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: var(--graphite); flex-shrink: 0; }
.icon-btn:hover { background: var(--ground); color: var(--asphalt); }
.icon-btn:disabled { opacity: .35; cursor: default; background: transparent; }
.icon-btn svg { width: 18px; height: 18px; }

.boot { position: fixed; inset: 0; display: grid; place-items: center; color: var(--graphite); }

/* ------------------------------------------------------------------ notice (no access / errors) */
.notice { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; background: var(--ground); }
.notice-card { width: 100%; max-width: 420px; background: var(--panel); border-top: 4px solid var(--asphalt);
  padding: 30px 30px 26px; display: grid; gap: 12px; }
.notice-logo { height: 30px; width: auto; justify-self: start; margin-bottom: 8px; }
.notice-card h1 { font: 600 22px/1.2 var(--font); }
.notice-card p { color: var(--graphite); font-size: 15px; }
.notice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ------------------------------------------------------------------ frame */
.app { height: 100%; display: flex; flex-direction: column; }
.topbar { height: 52px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 10px 0 16px;
  background: var(--panel); border-bottom: 1px solid var(--rule); position: relative; z-index: 1001; }
.topbar-logo { height: 22px; width: auto; display: block; }
.topbar-product { font: 600 15px/1 var(--font); color: var(--graphite); }
.topbar-divider { width: 1px; height: 24px; background: var(--rule); margin: 0 2px; }
.project-pick select { appearance: none; border: 1px solid transparent; background: transparent; border-radius: 4px;
  padding: 6px 28px 6px 8px; font-weight: 600; font-size: 15px; max-width: 40vw; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%235d666d' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; background-size: 16px; }
.project-pick select:hover:not(:disabled) { border-color: var(--rule); }
.project-pick select:disabled { background-image: none; padding-right: 8px; opacity: 1; cursor: default; }
.spacer { flex: 1; }
.who { color: var(--graphite); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28vw; }
.rail-toggle { display: none; }

.workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }

/* ------------------------------------------------------------------ left rail */
.rail { display: none; width: var(--rail-w); background: var(--panel); border-right: 1px solid var(--rule);
  flex-direction: column; min-height: 0; z-index: 1000; overflow-y: auto; overscroll-behavior: contain; }
body.rail-open .rail { display: flex; }

.net { padding: 14px 10px 12px 16px; border-bottom: 1px solid var(--rule); }
.net-head { display: flex; align-items: flex-start; gap: 6px; }
.net-head > div { flex: 1; min-width: 0; }
#net-toggle svg { transition: transform .15s; }
#net-toggle.collapsed svg { transform: rotate(180deg); }
.net-body { padding-right: 6px; }
.net-title { font: 600 17px/1.25 var(--font); }
.net-meta { color: var(--graphite); font-size: 13px; margin-top: 1px; }
.net-score { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; }
.net-num { font: 700 46px/0.85 var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.net-cat { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.net-cat::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--cat, var(--rule)); }
.net-label { color: var(--graphite); font-size: 12.5px; }

/* ---------- the PCI ruler */
.ruler { position: relative; user-select: none; }
.r-hist { position: relative; height: 0; }
.ruler-network .r-hist { height: 46px; margin-top: 10px; border-bottom: 1px solid transparent; }
.r-hist span { position: absolute; bottom: 2px; margin-left: 1px; border-radius: 1px 1px 0 0; transition: opacity .2s; }
.r-band { position: relative; height: 10px; border-radius: 2px; overflow: hidden; background: var(--ground); }
.r-band span { position: absolute; top: 0; bottom: 0; transition: opacity .2s; }
.r-band span + span { box-shadow: inset 1px 0 0 rgba(255,255,255,.55); }
.r-hist span.off, .r-band span.off { opacity: .14; }
.r-scale { position: relative; height: 17px; font: 500 11px/1 var(--font-num); color: var(--aggregate); }
.r-scale span { position: absolute; top: 5px; transform: translateX(-50%); }
.r-scale span::before { content: ""; position: absolute; left: 50%; top: -5px; width: 1px; height: 4px; background: var(--rule); }
.r-scale span:first-child { transform: none; }
.r-scale span:first-child::before { left: 0; }
.r-scale span:last-child { transform: translateX(-100%); }
.r-scale span:last-child::before { left: auto; right: 0; }
.r-marks-top { position: relative; height: 0; }
.r-marks-bottom { position: relative; height: 22px; }
.r-mark { position: absolute; transform: translateX(-50%); white-space: nowrap; }
/* network average: a caret under the band with the value */
.r-mark.avg { top: -15px; font: 700 12px/1 var(--font-num); padding: 3px 5px; background: var(--asphalt); color: #fff; border-radius: 2px; }
.r-mark.avg::before { content: ""; position: absolute; left: 50%; top: -5px; margin-left: -4px;
  border: 4px solid transparent; border-top: 0; border-bottom: 5px solid var(--asphalt); }
/* segment: a pointer above the band; lanes: labelled ticks below */
.ruler-segment .r-marks-top { height: 12px; }
.ruler-segment .r-marks-bottom { height: 8px; }
.ruler-segment.has-lanes .r-marks-bottom { height: 40px; }
.ruler-segment .r-scale { display: none; }
.r-mark.seg { top: 0; width: 0; height: 0; border: 6px solid transparent; border-bottom: 0; border-top: 9px solid var(--asphalt); margin-left: 0; }
.r-mark.r-lane { top: 4px; font: 600 11px/1 var(--font-num); color: var(--graphite); padding: 3px 4px 2px; border: 1px solid var(--rule); border-radius: 2px; background: var(--panel); }
.r-mark.r-lane::before { content: ""; position: absolute; left: 50%; top: -5px; width: 1px; height: 5px; background: var(--aggregate); }
.r-mark.r-lane.low { top: 22px; }
.r-mark.r-lane.low::before { top: -23px; height: 23px; }
.r-mark.r-lane.on { background: var(--asphalt); border-color: var(--asphalt); color: #fff; z-index: 1; }
.r-mark.r-lane.on::before { background: var(--asphalt); }

/* ---------- legend (also the map filter) */
.legend { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 4px; }
.legend th { font: 500 12px/1 var(--font); color: var(--aggregate); text-align: left; padding: 0 0 6px; }
.legend th.num { text-align: right; }
.legend td { padding: 3px 0; }
.legend tr[role="switch"] { cursor: pointer; }
.legend tr[role="switch"]:hover td { background: var(--ground); }
.legend tr.none { color: #b0b7bc; }
.legend tr.off td:not(.sw) { color: #a8afb4; text-decoration: line-through; }
.legend tr.off .sw span { background: transparent; box-shadow: inset 0 0 0 2px var(--c); }
.legend .sw { width: 20px; padding-left: 2px; }
.legend .sw span { display: block; width: 12px; height: 12px; border-radius: 2px; background: var(--c); }
.legend tr.none .sw span { opacity: .3; }
.legend .rg { color: var(--aggregate); width: 52px; }
.legend .ln { width: 58px; }
.legend .pc { width: 44px; padding-right: 2px; color: var(--graphite); }

/* ---------- segment list */
.seglist { flex: 1 0 auto; display: flex; flex-direction: column; }
.seglist-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 12px 16px 8px; }
.seglist-head h2 { font: 600 15px/1 var(--font); }
.seg-filter { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: 6px; border: 1px solid var(--rule); border-radius: 4px; padding: 0 8px; color: var(--aggregate); }
.seg-filter:focus-within { border-color: var(--focus); }
.seg-filter svg { width: 15px; height: 15px; flex-shrink: 0; }
.seg-filter input { border: 0; outline: 0; padding: 6px 0; width: 100%; min-width: 0; background: transparent; color: var(--asphalt); }

.level-switch, .seg-control { display: inline-flex; border: 1px solid var(--rule); border-radius: 4px; padding: 2px; background: var(--ground); justify-self: start; }
.level-switch button, .seg-control button { border: 0; background: transparent; border-radius: 3px; padding: 4px 9px; font-size: 13px; font-weight: 500; color: var(--graphite); white-space: nowrap; }
.level-switch button[aria-checked="true"], .seg-control button[aria-checked="true"] { background: var(--panel); color: var(--asphalt); font-weight: 600; box-shadow: 0 0 0 1px var(--rule); }
.seglist-head .level-switch, .seglist-head h2 { grid-column: 1; grid-row: 1; }
.filter-btn { grid-column: 2; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule); background: var(--panel); border-radius: 4px; padding: 4px 10px; font-size: 13px; font-weight: 600; }
.filter-btn svg { width: 15px; height: 15px; }
.filter-btn:hover { border-color: #b9c0c4; }
.filter-btn.on { background: var(--asphalt); border-color: var(--asphalt); color: #fff; }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--signal); color: #fff; font: 700 11px/18px var(--font-num); text-align: center; }

.filters { margin: 0 16px 10px; padding: 12px; background: var(--ground); border-radius: 4px; display: grid; gap: 10px; }
.f-row { display: flex; align-items: center; gap: 8px; }
.f-label { width: 70px; flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--graphite); }
.f-num { width: 64px; padding: 4px 6px; border: 1px solid var(--rule); border-radius: 3px; background: var(--panel); font-family: var(--font-num); }
.f-num:focus { outline: none; border-color: var(--focus); }
.f-to { font-size: 12.5px; color: var(--aggregate); }
.f-cats { align-items: flex-start; }
.f-cats .f-label { padding-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--rule); background: var(--panel); border-radius: 3px; padding: 2px 7px 2px 5px; font-size: 12px; }
.chip::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--c); }
.chip[aria-pressed="false"] { color: #a2a9ae; text-decoration: line-through; background: transparent; }
.chip[aria-pressed="false"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }
.f-error { font-size: 12.5px; color: #b42318; }
.f-error:empty { display: none; }
.f-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.results-line { padding: 0 16px 6px; font-size: 12.5px; color: var(--graphite); }
.seglist-cols, .seg-row { display: grid; grid-template-columns: 56px 1fr 44px 70px; align-items: center; gap: 6px; padding: 0 16px 0 20px; }
.seglist-cols { border-bottom: 1px solid var(--rule); padding-top: 5px; padding-bottom: 5px; position: sticky; top: 0; z-index: 2; background: var(--panel); }
.seglist-cols .sort { border: 0; background: none; padding: 0; text-align: left; font: 500 12px/1 var(--font); color: var(--aggregate); white-space: nowrap; }
.seglist-cols.cols-segment .sort:first-child { grid-column: 1 / 3; }
.seglist-cols .sort.num { text-align: right; }
.seglist-cols .sort:hover, .seglist-cols .sort.on { color: var(--asphalt); }
.seglist-cols .sort.on::after { content: ""; display: inline-block; margin-left: 4px; vertical-align: middle;
  border: 4px solid transparent; border-top: 5px solid currentColor; border-bottom: 0; }
.seglist-cols .sort.on[data-dir="desc"]::after { border-top: 0; border-bottom: 5px solid currentColor; }
.seglist-cols .sort sup { font: 700 9px/1 var(--font-num); margin-left: 2px; color: var(--graphite); }
.seg-rows { list-style: none; margin: 0; padding: 0; }
.seg-row { position: relative; height: 32px; cursor: pointer; border-bottom: 1px solid var(--rule-soft); }
.seg-row::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 4px; border-radius: 1px; background: var(--cat); }
.seg-row:hover { background: var(--ground); }
.seg-row.on { background: #e3e7ea; }
.seg-row.on::before { left: 0; top: 0; bottom: 0; width: 4px; border-radius: 0; background: var(--asphalt); }
.sr-id { font: 600 14px/1 var(--font-num); }
.sr-cat { color: var(--graphite); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-pci { font: 700 15px/1 var(--font-num); }
.sr-len { color: var(--graphite); font-size: 13px; }
.sr-lane { font-size: 13.5px; }
.seg-row.novideo .sr-id { color: var(--graphite); }
.seglist-empty { padding: 16px 20px; color: var(--graphite); }

/* ------------------------------------------------------------------ map */
.map-wrap { position: relative; min-width: 0; }
.map { position: absolute; inset: 0; background: #e6e9e9; }
.map-hint { position: absolute; z-index: 999; left: 12px; bottom: 12px; max-width: calc(100% - 90px); background: rgba(255,255,255,.92);
  color: var(--graphite); font-size: 13px; padding: 6px 10px; border-radius: 3px; border: 1px solid var(--rule); pointer-events: none; }
.leaflet-container { font-family: var(--font); }
.map.bm-grey .leaflet-tile-pane { filter: grayscale(1) brightness(1.05) contrast(.86); }
.leaflet-bar { border: 1px solid var(--rule) !important; box-shadow: none !important; border-radius: 4px !important; }
.leaflet-bar a { color: var(--asphalt) !important; }
.map-tip { font: 600 13px/1.3 var(--font); color: var(--asphalt); border: 1px solid var(--rule); border-radius: 3px; box-shadow: none; padding: 4px 8px; }
.leaflet-control-attribution { font-size: 11px; }
.bm-switch { display: inline-flex; background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; padding: 2px; }
.bm-switch button { border: 0; background: transparent; border-radius: 3px; padding: 4px 10px; font: 500 12.5px/1.2 var(--font); color: var(--graphite); }
.bm-switch button:hover { color: var(--asphalt); }
.bm-switch button[aria-checked="true"] { background: var(--asphalt); color: #fff; }
.drawer.mode-segment .ln-pci { display: none; }

/* ------------------------------------------------------------------ segment drawer */
.drawer { width: var(--drawer-w); background: var(--panel); border-left: 1px solid var(--rule); display: flex; flex-direction: column;
  min-height: 0; z-index: 1000; transition: width .22s ease; }
.drawer-head { display: flex; align-items: center; gap: 2px; padding: 12px 8px 12px 18px; border-bottom: 1px solid var(--rule); }
.seg-heading { flex: 1; min-width: 0; }
.seg-title { font: 700 21px/1.15 var(--font-num); }
.seg-sub { color: var(--graphite); font-size: 13px; }
.drawer-scroll { flex: 1; overflow: auto; padding: 16px 18px 18px; display: flex; flex-direction: column; }

.seg-score { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.seg-num { font: 700 46px/0.85 var(--font-num); font-variant-numeric: tabular-nums; }
.seg-cat { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.seg-cat::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--cat, var(--rule)); }
.seg-label { color: var(--graphite); font-size: 12.5px; }
.ruler-segment { margin-bottom: 10px; }

.lanes { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin-bottom: 14px; }
.lane { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 8px;
  text-align: left; padding: 7px 10px 7px 14px; border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); }
.lane::before { content: ""; position: absolute; left: 5px; top: 7px; bottom: 7px; width: 3px; border-radius: 1px; background: var(--cat); }
.lane:hover { border-color: #b9c0c4; }
.ln-name { font-weight: 600; font-size: 13.5px; }
.ln-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-pci { font: 700 22px/1 var(--font-num); }
.ln-cat { grid-column: 1 / -1; color: var(--graphite); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane.novideo { background: var(--ground); }
.lane.novideo .ln-name { font-weight: 500; color: var(--graphite); }
.lane.on { border-color: var(--asphalt); box-shadow: inset 0 0 0 1px var(--asphalt); }

/* ---------- player: forward on top, rear left | rear right below, in every size */
.player { background: var(--ground); border: 1px solid var(--rule); border-radius: 4px; padding: 6px; display: grid; gap: 6px; }
.vid { position: relative; background: #000; border-radius: 2px; overflow: hidden; aspect-ratio: 16 / 9; cursor: pointer; }
.vid video { width: 100%; height: 100%; object-fit: contain; display: block; }
.vid-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vid-tag { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.62); color: #fff; font-size: 12px; font-weight: 500;
  padding: 1px 6px; border-radius: 2px; pointer-events: none; }
.vid-max { position: absolute; top: 6px; right: 6px; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 3px; background: rgba(0,0,0,.55); color: #fff; opacity: 0; transition: opacity .15s; }
.vid-max svg { width: 16px; height: 16px; }
.vid-max .i-min { display: none; }
.vid:hover .vid-max, .vid-max:focus-visible, .player.solo .vid-max { opacity: 1; }
.player.solo .vid-max .i-max { display: none; }
.player.solo .vid-max .i-min { display: block; }
.vid.empty .vid-max, .vid.failed .vid-max { display: none; }
@media (hover: none) { .vid-max { opacity: 1; } }
.vid-empty { display: none; position: absolute; inset: 0; place-items: center; color: #8f979c; font-size: 13px; text-align: center; padding: 8px; }
.vid.empty, .vid.failed { cursor: default; }
.vid.empty .vid-empty, .vid.failed .vid-empty { display: grid; }
.vid.failed video { visibility: hidden; }
.vid::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 3px solid rgba(255,255,255,.22); border-top-color: #fff; border-radius: 50%; opacity: 0; pointer-events: none;
  transition: opacity .15s; animation: vid-spin .8s linear infinite; }
.player.buffering .vid:not(.empty):not(.failed)::after { opacity: 1; }
@keyframes vid-spin { to { transform: rotate(360deg); } }

.controls { display: flex; align-items: center; gap: 10px; color: var(--asphalt); padding: 2px 2px 0; }
.play-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--asphalt); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.play-btn svg { width: 16px; height: 16px; }
.play-btn .i-pause, body.is-playing .play-btn .i-play { display: none; }
body.is-playing .play-btn .i-pause { display: block; }
.play-btn:disabled { opacity: .4; cursor: default; }
.controls input[type=range] { flex: 1; min-width: 60px; accent-color: var(--asphalt); }
.time { font: 500 13.5px/1 var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.controls select { background: var(--panel); border: 1px solid var(--rule); color: var(--asphalt); border-radius: 3px; padding: 3px 4px; }
/* ---------- full screen video
   A strict 2x2 grid of identical 16:9 frames, so every edge lines up:
     details panel | forward (GoPro)
     rear left     | rear right
   Each cell is a size container; its frame is the largest 16:9 box that fits, centred. */
.vid-frame { position: absolute; inset: 0; }
.fs-side { display: none; }
.player.fs { position: fixed; inset: 0; z-index: 5000; border: 0; border-radius: 0; padding: 10px; gap: 10px; background: var(--ground);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-template-areas: "side fwd" "rear2 rear1" "ctl ctl"; }
.player.fs .vid-pair { display: contents; }
.player.fs .vid.gopro { grid-area: fwd; }
.player.fs .vid[data-cam="cam2"] { grid-area: rear2; }
.player.fs .vid[data-cam="cam1"] { grid-area: rear1; }
.player.fs .fs-side { grid-area: side; display: block; }
.player.fs .vid, .player.fs .fs-side { aspect-ratio: auto; position: relative; min-width: 0; min-height: 0; background: transparent;
  container-type: size; display: grid; place-items: center; border-radius: 0; overflow: visible; }
.player.fs .vid-frame, .player.fs .fs-side-inner { position: relative; inset: auto;
  width: min(100cqw, 100cqh * 16 / 9); height: min(100cqh, 100cqw * 9 / 16); }
.player.fs .vid-frame { background: #000; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--rule); }
.player.fs .controls { grid-area: ctl; padding: 0 2px; }
.player.fs .vid-tag { font-size: 13px; left: 10px; bottom: 10px; }
.player.fs .play-btn { width: 42px; height: 42px; }
body.video-fs { overflow: hidden; }
/* one camera enlarged: it takes the whole screen; the others keep playing, hidden */
.player.fs.solo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "solo" "ctl"; }
.player.fs.solo .fs-side, .player.fs.solo .vid { display: none; }
.player.fs.solo[data-solo="gopro"] .vid.gopro, .player.fs.solo[data-solo="cam2"] .vid[data-cam="cam2"],
.player.fs.solo[data-solo="cam1"] .vid[data-cam="cam1"] { display: grid; grid-area: solo; }
.player.fs.solo .vid-tag { font-size: 15px; }
.player.fs.solo .vid-max { width: 38px; height: 38px; top: 12px; right: 12px; }

/* the details panel inside its frame */
.player.fs .fs-side-inner { display: flex; flex-direction: column; gap: 9px; color: var(--asphalt); background: var(--panel); border: 1px solid var(--rule); border-radius: 3px;
  padding: 12px 14px; overflow: hidden; }
.fs-brand { display: flex; align-items: center; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--rule); }
.fs-brand img { height: 22px; width: auto; }
.fs-product { font: 600 14px/1 var(--font); color: var(--graphite); }
.fs-project { font: 600 14px/1 var(--font); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-head { display: flex; align-items: center; gap: 4px; }
.fs-seg { font: 700 20px/1 var(--font-num); margin-right: 6px; }
.fs-icon { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 3px; background: var(--panel); color: var(--graphite); }
.fs-icon:hover { background: var(--ground); color: var(--asphalt); }
.fs-icon svg { width: 16px; height: 16px; }
.fs-exit { border: 1px solid var(--rule); background: var(--panel); color: var(--asphalt); border-radius: 3px; padding: 5px 12px; font-weight: 500; }
.fs-exit:hover { background: var(--ground); }
.fs-scores { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.fs-score { display: flex; align-items: center; gap: 10px; }
.fs-num { font: 700 46px/0.85 var(--font-num); font-variant-numeric: tabular-nums; }
.fs-num.small { font-size: 28px; color: var(--graphite); }
.fs-cat { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.fs-cat::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--cat, #555); }
.fs-label { font-size: 12.5px; color: var(--graphite); }
.player.fs-segmode .fs-score-lane { display: none; }
.player.fs-segmode .fs-num.small { font-size: 46px; color: var(--asphalt); }
.fs-lanes { display: flex; gap: 6px; flex-wrap: wrap; }
.fs-lanes button { border: 1px solid var(--rule); background: var(--panel); color: var(--asphalt); border-radius: 3px; padding: 5px 10px 5px 8px;
  display: inline-flex; align-items: center; gap: 8px; font: 600 13.5px/1.2 var(--font); }
.fs-lanes button::before { content: ""; width: 3px; height: 16px; border-radius: 1px; background: var(--cat); }
.fs-lanes button .v { font: 700 16px/1 var(--font-num); }
.fs-lanes button[aria-selected="true"] { border-color: var(--asphalt); box-shadow: inset 0 0 0 1px var(--asphalt); }
.fs-lanes button:disabled { opacity: .35; cursor: default; }
.fs-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 9px; }
.fs-info { display: flex; flex-direction: column; gap: 9px; }
.fs-map { flex: 1; min-height: 0; border-radius: 3px; overflow: hidden; background: #e6e9e9; border: 1px solid var(--rule); }
.fs-ruler.has-lanes .r-marks-bottom { height: 36px; }
.fs-map .leaflet-control-attribution { font-size: 10px; }
/* short screens: tighter panel, mini-map hidden when there's no room for it */
/* shorter screens (e.g. 1366x768): details on the left, mini-map beside them */
@container (max-height: 460px) {
  .fs-side-inner { gap: 7px; padding: 9px 12px; }
  .fs-body { flex-direction: row; gap: 12px; }
  .fs-info { flex: 0 0 58%; min-width: 0; gap: 7px; }
  .fs-num { font-size: 36px; }
  .fs-num.small { font-size: 24px; }
}
@container (max-height: 300px) { .fs-map { display: none; } .fs-info { flex: 1; } }

.no-video { padding: 14px; border-radius: 4px; background: var(--ground); color: var(--graphite); }

/* ------------------------------------------------------------------ smaller screens */
@media (max-width: 1180px) { :root { --drawer-w: 480px; --rail-w: 300px; } }
@media (max-width: 900px) {
  .rail-toggle { display: grid; }
  .topbar-product, .topbar-divider, .who { display: none; }
  .workspace { position: relative; display: block; }
  .map-wrap { position: absolute; inset: 0; }
  .rail { position: absolute; top: 0; left: 0; bottom: 0; width: min(var(--rail-w), 88vw); box-shadow: 8px 0 24px rgba(20,22,24,.12); }
  .drawer { position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: 72%;
    border-left: 0; border-top: 1px solid var(--rule); box-shadow: 0 -8px 24px rgba(20,22,24,.12); }
  }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: 0s !important; }
}