/* visuals' own components. The shared styles, colours included, are in base.css, which loads first.
   The 3D view is always dark, as a night scene, so its overlay has its own colours, which pass AA on it. */

/* ── The traffic page ─────────────────────────────────────────────────────── */
.scene-page {
  --scene-bg: #05070b; --scene-fg: #e6ebf2; --scene-muted: #9aa6b8; --scene-line: rgba(140, 170, 220, .22);
  --scene-panel: rgba(10, 14, 22, .78);
  --served: #4cc9f0; --signed-in: #52e08a; --refused: #f2c14e; --sign-in-failed: #ff8a3d; --error: #b48cff;
  --banned: #ff6fb5; --blocked: #ff4040;
}
.stage { position: relative; height: calc(100vh - 53px); height: calc(100dvh - 53px); min-height: 520px; max-width: none; padding: 0;
  background: var(--scene-bg); color: var(--scene-fg); overflow: hidden; }
.view { position: absolute; inset: 0; z-index: 0; }  /* its own stack: the labels' order never covers the panels */
.view canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#labels.off { display: none; }

.hud { position: absolute; z-index: 1; background: var(--scene-panel); border: 1px solid var(--scene-line); border-radius: 8px; padding: 12px 16px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 13px; }
.hud h1 { font-size: 20px; margin: 0; }
.hud h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--scene-muted); margin: 0 0 8px; font-weight: 600; }
.hud .eyebrow, .hud .hint { color: var(--scene-muted); }
.hud .hint { margin: 8px 0 0; }
.hud button.secondary { color: var(--scene-fg); border-color: var(--scene-line); background: transparent; }
.hud button[aria-pressed="true"] { background: var(--scene-fg); color: var(--scene-bg); border-color: var(--scene-fg); }
.hud button:focus-visible, .hud input:focus-visible { outline: 2px solid var(--served); outline-offset: 1px; }
.hud-top { top: 16px; left: 16px; max-width: min(420px, calc(100% - 32px)); }
.status { margin: 4px 0 10px; color: var(--scene-muted); }
.status.live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--signed-in);
  margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 8px var(--signed-in); }
.status.bad { color: #ffb4b4; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; }
.segmented { display: inline-flex; }
.segmented button { border-radius: 0; margin-left: -1px; }
.segmented button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.segmented button:last-child { border-radius: 0 6px 6px 0; }

.hud-legend { top: 16px; right: 16px; width: 250px; }
.legend { list-style: none; margin: 0; padding: 0; }
.legend li { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.legend .swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; background: currentColor; }
.legend .what { flex: 1; }
.legend .n { font-variant-numeric: tabular-nums; }
.legend .where { color: var(--scene-muted); font-size: 12px; }

.hud-feed { left: 16px; bottom: 16px; width: min(460px, calc(100% - 32px)); max-height: 40%; overflow: hidden; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 64px 110px 1fr; gap: 8px; padding: 2px 0; white-space: nowrap; overflow: hidden;
  animation: arrive .4s ease-out; }
.feed li.empty { display: block; color: var(--scene-muted); white-space: normal; animation: none; }
.feed time, .feed .who { color: var(--scene-muted); font-variant-numeric: tabular-nums; }
.feed .who { overflow: hidden; text-overflow: ellipsis; }
.feed .act::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  margin-right: 6px; vertical-align: 0; }
@keyframes arrive { from { opacity: 0; transform: translateY(-4px); } }

.hud-layers { right: 16px; bottom: 16px; }
.hud-layers label { flex-direction: row; align-items: center; gap: 6px; margin: 0 0 2px; color: var(--scene-fg); font-size: 13px; }
.hud-layers input { margin: 0; accent-color: var(--served); }

.tip { position: absolute; z-index: 2; pointer-events: none; background: var(--scene-panel); border: 1px solid var(--scene-line); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; min-width: 160px; transform: translate(12px, 12px); }
.tip strong { display: block; margin-bottom: 4px; }
.tip table { background: none; width: auto; }
.tip td { padding: 1px 12px 1px 0; border: none; color: var(--scene-fg); }
.nogl { position: absolute; inset: 0; margin: auto; height: fit-content; color: var(--fg); }

/* Labels drawn over the 3D view, beside the thing they name. */
.lbl { color: var(--scene-fg); font-size: 12px; line-height: 1.3; text-align: center; white-space: nowrap; text-shadow: 0 1px 3px #000, 0 0 2px #000; }
.lbl b { display: block; font-size: 13px; }
.lbl span { color: var(--scene-muted); }
.lbl.layer { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--scene-muted); }
.lbl.place { font-size: 11px; color: var(--scene-muted); }

/* Colours of what happened, on the dark view. Each is always shown with its word. */
.c-served { color: var(--served); } .c-signed-in { color: var(--signed-in); } .c-refused { color: var(--refused); }
.c-sign-in-failed { color: var(--sign-in-failed); } .c-error { color: var(--error); } .c-banned { color: var(--banned); }
.c-blocked { color: var(--blocked); }

.numbers { max-width: 1200px; margin: 0 auto; padding: 16px 24px 0; }
.numbers summary { cursor: pointer; color: var(--accent); }

@media (max-width: 720px) {
  .stage { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .view { position: relative; height: 60vh; order: 1; margin-top: 8px; }
  .hud { position: static; margin: 8px 16px 0; max-width: none; width: auto; }
  .hud-top { order: 0; margin-top: 16px; }
  .hud-legend { order: 2; }
  .hud-feed { order: 3; max-height: none; }
  .hud-layers { order: 4; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
  .hud-layers h2 { width: 100%; margin: 0; }
  .feed li { grid-template-columns: 60px 100px 1fr; }
  .numbers { padding: 16px 16px 0; }
}
@media (prefers-reduced-motion: reduce) { .feed li { animation: none; } }