:root {
  color-scheme: dark;
  --bg: #08111f;
  --panel: rgba(10, 18, 32, 0.93);
  --surface: #0d1626;
  --raise: #132238;
  --line: #1c2a41;
  --ink: #e6edf6;
  --ink-2: #a8b5c7;
  --ink-3: #75839a;
  --accent: #78bcff;
  --cam-a: #3987e5;
  --cam-b: #199e70;
  --dropped: #7d8796;
  --published: #c98500;  /* CBET 3423's path: the palette's yellow, apart from both cameras' hues */
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --panel-w: 400px;
  --k: 1;  /* type scale: ?video=1 raises it for a 1920x1080 screen recording */
}
body.video { --k: 1.4; --panel-w: 560px; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: calc(14px * var(--k))/1.5 var(--sans); }
a { color: var(--accent); }
#map { position: fixed; inset: 0; }

#panel {
  position: fixed; top: 12px; left: 12px; bottom: 12px; width: var(--panel-w); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: calc(18px * var(--k)) calc(20px * var(--k)) calc(22px * var(--k));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
body.bare #panel, body.bare #legend { display: none; }
h1 { font-size: calc(21px * var(--k)); line-height: 1.2; font-weight: 600; margin: 0; }
.tagline { color: var(--ink-2); margin: 3px 0 14px; }
h2 { font-size: calc(14px * var(--k)); font-weight: 600; margin: 0 0 8px; }
section { margin-top: calc(22px * var(--k)); }
section:empty { display: none; }
p { margin: 0 0 9px; }
b { font-weight: 600; }
.when { color: var(--ink-3); font-size: calc(13px * var(--k)); margin-bottom: 6px; }
.big { font-size: calc(16px * var(--k)); line-height: 1.45; }
.num { font-variant-numeric: tabular-nums; font-weight: 500; }
.note { color: var(--ink-2); font-size: calc(13px * var(--k)); }

#cases { display: flex; gap: 3px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
#cases button {
  flex: 1; font: 500 calc(13px * var(--k))/1.25 var(--sans); color: var(--ink-2); background: none; border: 0; border-radius: 7px;
  padding: calc(7px * var(--k)) calc(8px * var(--k)); cursor: pointer; text-align: left;
}
#cases button small { display: block; color: var(--ink-3); font-weight: 400; font-size: calc(12px * var(--k)); }
#cases button[aria-pressed="true"] { background: var(--raise); color: var(--ink); }
#cases button:focus-visible, #play:focus-visible, .steps li:focus-visible, .clip-poster:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

table { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--k)); }
th, td { padding: 6px 6px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
th { color: var(--ink-3); font-weight: 500; }
th.r, td.r, th.num, td.num { text-align: right; padding-right: 0; padding-left: 8px; }
td .how, td .range { display: block; color: var(--ink-3); font: calc(12px * var(--k))/1.4 var(--sans); }
td .range { font-family: var(--mono); font-size: calc(11px * var(--k)); white-space: nowrap; }
table.cams td.num { white-space: nowrap; }
tbody th { color: var(--ink-2); font-weight: 400; }
td.ours .num { font-weight: 500; }
td .by { color: var(--ink-3); font: calc(12px * var(--k))/1.4 var(--sans); }
tr.src td, tr.src th { color: var(--ink-3); font-size: calc(12px * var(--k)); }
.dot { display: inline-block; width: calc(8px * var(--k)); height: calc(8px * var(--k)); border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.dot.hollow { border: 1.5px solid var(--dropped); }
.dot.dashed { background: none; border: 1.5px dashed var(--dropped); }

.howto { margin: 0 0 14px; padding-left: calc(20px * var(--k)); color: var(--ink-2); font-size: calc(13.5px * var(--k)); }
.howto li { margin-bottom: 3px; padding-left: 2px; }
.howto li::marker { color: var(--accent); font-weight: 600; }
.howto b { color: var(--ink); font-weight: 600; }
/* each step is a button: pressed, the map shows only what it says (setStep in app.js) */
.howto .step { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: none; cursor: pointer;
  border: 0; border-left: 2px solid transparent; border-radius: 0 6px 6px 0; padding: 3px 6px 3px 8px; margin-left: 2px; }
.howto .step:hover { background: var(--raise); }
.howto .step[aria-pressed="true"] { background: var(--raise); border-left-color: var(--accent); color: var(--ink); }
.howto .step:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.more { margin: 0 0 10px; }
.more > summary { margin-bottom: 0; }
.more[open] > summary { margin-bottom: 8px; }
.method { margin: 0; padding-left: calc(18px * var(--k)); color: var(--ink-2); font-size: calc(13px * var(--k)); }
.method li { margin-bottom: 4px; }
.method b { color: var(--ink); }

figure { margin: 0; position: relative; }
figure svg { width: 100%; height: auto; display: block; touch-action: none; }
figcaption { color: var(--ink-2); font-size: calc(13px * var(--k)); margin-bottom: 6px; }
.legend-row { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: calc(12.5px * var(--k)); color: var(--ink-2); margin-bottom: 4px; }
.legend-row .line { display: inline-block; width: 16px; height: 2px; background: var(--ink); margin-right: 6px; vertical-align: 3px; }
svg .grid { stroke: var(--line); stroke-width: 1; }
svg .tick { fill: var(--ink-3); font: 11px var(--mono); }
svg .axis-title { fill: var(--ink-3); font: 11.5px var(--sans); }
svg .label { fill: var(--ink-2); font: 500 11.5px var(--sans); }
svg .model { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg .cross { stroke: var(--ink-3); stroke-width: 1; }
.chart-tip {
  position: absolute; pointer-events: none; background: rgba(8, 16, 29, 0.96); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 8px; font-size: calc(12px * var(--k)); line-height: 1.45; white-space: nowrap; color: var(--ink);
}
.chart-tip .num { color: var(--ink); }

.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
  position: relative; margin-left: calc(10px * var(--k)); padding: 7px 8px 9px calc(22px * var(--k)); border-left: 1px solid var(--line);
  border-radius: 0 8px 8px 0;
}
.steps li::before {
  content: attr(data-step); position: absolute; left: calc(-11px * var(--k)); top: 7px; width: calc(21px * var(--k));
  height: calc(21px * var(--k)); border-radius: 50%; background: var(--surface); border: 1px solid var(--line);
  font: calc(11px * var(--k))/calc(19px * var(--k)) var(--mono); text-align: center; color: var(--ink-2);
}
.steps li.solve { cursor: pointer; }
.steps li.solve:hover, .steps li.on { background: var(--raise); }
.steps .action { font: 500 calc(12.5px * var(--k)) var(--mono); color: var(--accent); }
.steps .clips { color: var(--ink-3); font-size: calc(12.5px * var(--k)); margin-left: 6px; }
.steps .why { margin-top: 2px; }
.steps .result { color: var(--ink-2); font-size: calc(12.5px * var(--k)); margin-top: 3px; }

details summary { cursor: pointer; color: var(--ink-2); font-size: calc(13px * var(--k)); }
details[open] summary { margin-bottom: 8px; }
.report { font-size: calc(13px * var(--k)); color: var(--ink-2); }
.report strong { color: var(--ink); font-weight: 600; }
/* The witness video: YouTube's player at least 200 px tall, with nothing drawn over it; the poster is the page's own button. */
#clip summary { color: var(--ink); font-weight: 500; }
.clip-views { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; margin: 0 0 10px; }
.clip-views span { flex-basis: 100%; color: var(--ink-3); font-size: calc(11.5px * var(--k)); }
.clip-views span + button, .clip-views button + span { margin-top: 0; }
.clip-views button {
  font: 500 calc(12px * var(--k))/1.2 var(--sans); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: calc(4px * var(--k)) calc(10px * var(--k)); cursor: pointer;
}
.clip-views button:hover { color: var(--ink); }
.clip-views button[aria-pressed="true"] { background: var(--raise); color: var(--ink); border-color: var(--accent); }
.clip-views button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.clip-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 200px; margin: 0 0 8px; background: #000; }
/* below the video, SAM's track of it, drawn from the measurements */
.clip-track { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(140px * var(--k)); margin: 0 0 8px; background: #03070d; }
.clip-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; transition: opacity 0.4s; }
/* SAM's track, drawn from the measurements while a video loads (or where it cannot be shown); the player is transparent
   until it plays, and the canvas steps aside then, so nothing is drawn over a playing video. */
canvas.sam { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.clip-poster {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 12px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
  font: 600 calc(14px * var(--k))/1.35 var(--sans); text-align: center; cursor: pointer;
}
.clip-poster:hover { background: var(--raise); }
.clip-poster small { max-width: 30em; color: var(--ink-2); font-weight: 400; font-size: calc(12px * var(--k)); }
.clip-play { position: relative; width: calc(44px * var(--k)); height: calc(44px * var(--k)); border-radius: 50%; background: var(--accent); }
.clip-play::after {
  content: ''; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid;
  border-width: calc(8px * var(--k)) 0 calc(8px * var(--k)) calc(13px * var(--k)); border-color: transparent transparent transparent #06101e;
}
.clip-wait { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--ink-2); font-size: calc(13px * var(--k)); }
.clip-hint { color: var(--accent); font-size: calc(12.5px * var(--k)); }
.clip-hint:empty { display: none; }
.clip-fail { color: var(--ink-2); font-size: calc(13px * var(--k)); }
.clip-credit { color: var(--ink-3); font-size: calc(12px * var(--k)); }

/* The wall: the witness videos above the map, eight or four to a row, each with SAM's track below it; each player at least
   200 px tall, with nothing over it. */
body.wall #panel { display: none; }
body.wall #hud { left: 50%; }
#wall { position: fixed; top: 12px; left: 12px; right: 12px; background: var(--bg); border-radius: 12px; }
#wall .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#wall.one-row .tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); }
#wall .tile { padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; transition: border-color 0.2s; }
#wall .tile.sees { border-color: var(--accent); }
#wall .tile-head {
  display: flex; align-items: center; gap: 2px; margin: 0 2px 5px; overflow: hidden; white-space: nowrap;
  color: var(--ink-3); font-size: calc(12px * var(--k));
}
#wall .tile-head .dot { flex: none; }
#wall .tile-head b { margin-right: 4px; color: var(--ink-2); font-weight: 600; }
#wall .tile-head b a { color: inherit; text-decoration: none; }
#wall .tile.sees .tile-head b { color: var(--ink); }
#wall .tile-head .role { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#wall .tile-box { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 200px; background: #000; }
#wall.tracks .tile-box { min-height: 0; }  /* SAM's tracks have no minimum size; YouTube's players do */
/* below each video, SAM's track of it, drawn from the measurements; never over the player */
#wall .tile-track { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(118px * var(--k)); margin-top: 4px; background: #03070d; }
/* two rows: players at YouTube's 200 px and a lower strip for the track, so the map keeps room */
#wall:not(.one-row) .tile-box { max-height: 200px; }
#wall:not(.one-row) .tile-track { max-height: calc(64px * var(--k)); }
/* eight to a row: the camera's part on a second line, and the credit (uploader first) on up to two */
#wall.one-row .tile-head { flex-wrap: wrap; row-gap: 0; }
#wall.one-row .tile-head .role { flex-basis: 100%; padding-left: calc(14px * var(--k)); }
#wall.one-row .tile-head .sep { display: none; }
#wall.one-row .tile-credit { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#wall .tile-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; transition: opacity 0.4s; }
#wall .tile-strip {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 5px 8px; background: rgba(3, 7, 13, 0.82);
  color: var(--ink-2); font-size: calc(11.5px * var(--k)); line-height: 1.35;
}
#wall .tile-credit {
  margin: 4px 2px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-3);
  font-size: calc(11.5px * var(--k));
}
#wall .tile-credit a { color: var(--ink-2); }
#wall .tile-note {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: 12px; text-align: center;
  background: var(--surface); color: var(--ink-2); font-size: calc(12.5px * var(--k));
}
#wall .bar {
  display: flex; align-items: flex-start; gap: 14px; margin-top: 8px; padding: 7px 10px 7px 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; color: var(--ink-2); font-size: calc(12px * var(--k)); line-height: 1.45;
}
#wall .bar p { margin: 6px 0 0; }
#wall .bar details { flex: 1 1 auto; }
#wall .bar summary { color: var(--ink-2); font-size: calc(12px * var(--k)); }
#wall .bar summary::marker { color: var(--ink-3); }
#wall .bar summary .more { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
#wall .wall-hint { margin-left: 6px; color: var(--accent); }
#wall .wall-close {
  flex: none; font: 600 calc(12.5px * var(--k)) var(--sans); color: var(--ink); background: var(--raise); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 14px; cursor: pointer;
}
#wall .wall-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
footer { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: calc(12px * var(--k)); }
footer p { margin-bottom: 6px; }

/* On a desktop, placeHud() in app.js moves the bar clear of the map key and sets its max-width; the readout wraps inside it. */
#hud {
  position: fixed; bottom: 26px; left: calc(var(--panel-w) + 24px + (100vw - var(--panel-w) - 24px) / 2); transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; padding: 5px 14px 5px 5px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; font-size: 13px; color: var(--ink-2); width: max-content;
}
#hud[hidden] { display: none; }
body.bare #hud { left: 50%; }
#play { flex: none; font: 600 13px var(--sans); color: #06101e; background: var(--accent); border: 0; border-radius: 999px; padding: 7px 16px; cursor: pointer; }
#readout { min-width: 13em; }
/* the replay's instant, to drag */
#scrub { flex: none; width: 170px; margin: 0; accent-color: var(--accent); cursor: pointer; }
#scrub:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body.video #scrub { width: 260px; }
body.bare #scrub { display: none; }  /* ?panel=0, the GIF's view: the bar shows only the button and the readout */
#wall .tile.picked { box-shadow: 0 0 0 2px var(--ink-2); }
body.video #hud { gap: 16px; padding: 7px 22px 7px 7px; font-size: 20px; }
body.video #play { font-size: 20px; padding: 10px 24px; }

#legend {
  position: fixed; right: 12px; bottom: 34px; width: calc(250px * var(--k)); padding: calc(10px * var(--k)) calc(12px * var(--k));
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-size: calc(12.5px * var(--k)); color: var(--ink-2);
}
#legend label, #legend .key { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
#legend .key[hidden] { display: none; }
#legend label { cursor: pointer; }
#legend summary { cursor: pointer; color: var(--ink); font-weight: 500; }
#legend details[open] summary { margin-bottom: 6px; }
#legend input { accent-color: var(--accent); margin: 0; }
#legend .sw { flex: none; width: calc(20px * var(--k)); height: 0; border-top: 2px solid; }
#legend .sw.glow { border-top: 3px solid #fff; box-shadow: 0 0 6px 2px rgba(108, 182, 255, 0.55); }
#legend .sw.dash { border-top-style: dashed; }
#legend .sw.faint { border-top-color: rgba(143, 211, 255, 0.5); }
#legend .sw.dot-line { border-top: 2px dotted var(--ink-3); }  /* the directions only estimated */
#legend .sw.dot { width: calc(9px * var(--k)); height: calc(9px * var(--k)); border: 0; border-radius: 50%; margin: 0 calc(5px * var(--k)); }
#legend .sw.asked { background: var(--accent); box-shadow: 0 0 0 1.5px var(--ink); }
#legend .sw.box {
  width: calc(14px * var(--k)); height: calc(10px * var(--k)); border: 1px solid var(--cam-b); background: rgba(25, 158, 112, 0.25);
  margin: 0 calc(3px * var(--k));
}

.maplibregl-ctrl-attrib.maplibregl-compact { background: rgba(8, 16, 29, 0.8); color: var(--ink-3); }
.maplibregl-ctrl-attrib a { color: var(--ink-2); }
.maplibregl-ctrl-group { background: var(--panel); border: 1px solid var(--line); box-shadow: none; }
.maplibregl-ctrl-group button + button { border-top-color: var(--line); }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(0.85); }

@media (max-width: 760px) {
  :root { --panel-w: 100vw; }
  #panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 50vh; border-radius: 14px 14px 0 0; padding: 14px 16px 20px; }
  #hud { left: 50%; bottom: calc(50vh + 10px); max-width: calc(100vw - 32px); }
  #readout { min-width: 0; }
  #hud { flex-wrap: wrap; border-radius: 18px; }
  #scrub { order: 3; flex: 1 1 100%; width: auto; }
  body.bare #hud { bottom: 26px; }
  #legend { top: 10px; left: 10px; right: auto; bottom: auto; width: auto; max-width: 230px; padding: 7px 10px; font-size: 12px; }
  .clip-frame { width: min(100%, 356px); margin-inline: auto; }  /* YouTube's 200 px minimum height, no larger */
}
/* A phone on its side: the sheet grows so the whole player fits in it (padding() in app.js matches the 65%). */
@media (max-width: 760px) and (max-height: 500px) {
  #panel { max-height: 65vh; }
  #hud { bottom: calc(65vh + 10px); }
}