/* fraud-watch — arcade skin on top of Tailwind utilities.
   Dark base #0b0f14, sky accent #38bdf8, siren red/amber for drama. */
:root { color-scheme: dark; }
body { background: #05070a; font-family: 'Inter', system-ui, sans-serif; }
.font-orbitron { font-family: 'Orbitron', 'Inter', system-ui, sans-serif; }

/* ---- HUD ---- */
.hud-pill {
  display: flex; align-items: baseline; gap: .4rem;
  background: #0d1420; border: 1px solid #1c2531; border-radius: .6rem;
  padding: .35rem .7rem;
}
.hud-label { font-size: .62rem; color: #64748b; letter-spacing: .08em; }
.hud-value { font-size: 1.05rem; font-weight: 700; }

/* ---- Stage ---- */
#stage { background: radial-gradient(ellipse at 50% 30%, #0e1522 0%, #05070a 70%); }
.lane-track { stroke: #182130; stroke-width: 1; stroke-dasharray: 5 9; }
.depot { fill: #0e1520; stroke: #38bdf8; stroke-width: 1.5; }
.depot-glow { fill: #38bdf8; opacity: .06; }

/* ---- Trucks ---- */
.truck { cursor: pointer; }
.truck:hover .truck-body { stroke: #38bdf8; stroke-width: 2; }
.truck-body { rx: 4; }
.truck-cab { fill: #263447; }
.truck-clue-dot { fill: #facc15; animation: pulse 1s ease-in-out infinite; }
.truck.spotlighted .spotlight-ring { opacity: 1; }
.spotlight-ring { opacity: 0; fill: none; stroke: #38bdf8; stroke-width: 1.5; animation: ring 1.4s ease-out infinite; }

@keyframes pulse { 0%,100% { opacity: .35; r: 3; } 50% { opacity: 1; r: 4.5; } }
@keyframes ring { 0% { r: 16; opacity: .8; } 100% { r: 34; opacity: 0; } }

/* ---- Radio feed ---- */
.radio-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 999px;
  background: #f87171; animation: blink 1.2s steps(2) infinite;
}
@keyframes blink { 50% { opacity: .15; } }
.alert-item {
  animation: slidein .2s ease-out;
  border-left: 2px solid #38bdf8;
  font-family: 'Inter', monospace;
}
@keyframes slidein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Inspector popup ---- */
#inspector { animation: pop .15s ease-out; }
@keyframes pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }

/* ---- Reveal drama ---- */
#reveal-flash.flash-good { background: radial-gradient(circle at 50% 40%, rgba(52,211,153,.35), transparent 70%); animation: flash .5s ease-out; }
#reveal-flash.flash-bad { background: radial-gradient(circle at 50% 40%, rgba(248,113,113,.4), transparent 70%); animation: flashbad .6s ease-out; }
@keyframes flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@keyframes flashbad { 0%,20%,40% { opacity: 1; } 10%,30% { opacity: .3; } 100% { opacity: 0; } }

.verdict-text {
  font-family: 'Orbitron', sans-serif; font-weight: 800; letter-spacing: .04em;
  text-shadow: 0 0 24px currentColor;
  animation: verdictpop .35s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes verdictpop { 0% { opacity: 0; transform: scale(.6) translateY(10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }

.siren {
  display: inline-block; animation: sirenspin 1s linear infinite;
}
@keyframes sirenspin { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }

.reveal-detail { animation: fadeup .3s ease-out .15s both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.scrollbar-thin::-webkit-scrollbar { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #1c2531; border-radius: 3px; }

.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 600; letter-spacing: .02em; }
.tab-btn.active { background: #38bdf8; color: #0b0f14; }

/* ---- Phase 37: shift tint on the Live Sim view ---- */
#sim-root{position:relative;transition:background 1.2s linear;border-radius:1rem}
#sim-root::before{content:"";position:absolute;inset:-8px -8px auto -8px;height:3px;border-radius:3px;transition:background 1.2s linear;background:#334155}
#sim-root.fw-shift-night::before{background:linear-gradient(90deg,#312e81,#4338ca,#1e1b4b)}
#sim-root.fw-shift-morning::before{background:linear-gradient(90deg,#0369a1,#38bdf8,#7dd3fc)}
#sim-root.fw-shift-peak::before{background:linear-gradient(90deg,#b45309,#f59e0b,#fcd34d)}
#sim-root.fw-shift-evening::before{background:linear-gradient(90deg,#7c2d12,#ea580c,#c2410c)}
#sim-root.fw-shift-night{background:radial-gradient(120% 60% at 50% 0%,rgba(49,46,129,.16),transparent 70%)}
#sim-root.fw-shift-morning{background:radial-gradient(120% 60% at 50% 0%,rgba(56,189,248,.10),transparent 70%)}
#sim-root.fw-shift-peak{background:radial-gradient(120% 60% at 50% 0%,rgba(245,158,11,.10),transparent 70%)}
#sim-root.fw-shift-evening{background:radial-gradient(120% 60% at 50% 0%,rgba(234,88,12,.12),transparent 70%)}
.shift-chip{padding:1px 6px;border-radius:9999px;font-size:10px;letter-spacing:.06em}
.shift-chip-night{background:rgba(67,56,202,.25);color:#a5b4fc}
.shift-chip-morning{background:rgba(56,189,248,.18);color:#7dd3fc}
.shift-chip-peak{background:rgba(245,158,11,.18);color:#fcd34d}
.shift-chip-evening{background:rgba(234,88,12,.18);color:#fdba74}

/* ---- Slice 85: control-tower legibility ----------------------------------
   CASE FOCUS IS ONE CLASS. Entering it writes `fw-focus` on the svg element
   and nothing else: no marker is rebuilt, no list of elements is walked, and
   the cost of dimming does not grow with the number of trucks or places drawn.
   The layers named below are the ones staticSvg builds once; #fm-route and
   #fm-focus-chain are deliberately absent from the list, because those two ARE
   the lit chain.

   fw-select is the same mechanism at a much lower strength. A reader who
   clicked one truck is asking about it; burying the network they clicked it out
   of would answer a question they did not ask. */
#freight-map-svg #fm-roads,
#freight-map-svg #fm-road-labels,
#freight-map-svg #fm-places,
#freight-map-svg #fm-place-labels,
#freight-map-svg #fm-activity,
#freight-map-svg #fm-legend,
#freight-map-svg .fm-truck { transition: opacity .32s ease }

#freight-map-svg.fw-focus #fm-roads,
#freight-map-svg.fw-focus #fm-road-labels,
#freight-map-svg.fw-focus #fm-places,
#freight-map-svg.fw-focus #fm-place-labels,
#freight-map-svg.fw-focus #fm-activity,
#freight-map-svg.fw-focus #fm-legend { opacity: .16 }
#freight-map-svg.fw-focus .fm-truck { opacity: .12 }
#freight-map-svg.fw-focus .fm-truck[data-chain="1"] { opacity: 1 }

#freight-map-svg.fw-select .fm-truck { opacity: .5 }
#freight-map-svg.fw-select .fm-truck[data-chain="1"] { opacity: 1 }

/* The lit chain fades IN once when a case is focused, and then holds still.
   Nothing on this layer pulses: a marker that keeps moving after the reader has
   arrived is asking for attention it has already been given. */
#fm-focus-chain { animation: fmChainIn .38s ease-out both }
@keyframes fmChainIn { from { opacity: 0 } to { opacity: 1 } }

.fm-rung-badge {
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid #1c2531; border-radius: .3rem; padding: .05rem .3rem;
  white-space: nowrap;
}
.fm-focus-banner {
  border-left: 2px solid #f87171; background: rgba(248,113,113,.06);
  padding: .35rem .5rem; margin-bottom: .5rem; border-radius: 0 .35rem .35rem 0;
}

/* NOISE REDUCTION. Seven panels below the map each carried a 1px slate border
   and a 1rem radius, which gave a calibration ledger the same visual weight as
   the network. They keep their own background and lose the box: one hairline at
   the top is enough to separate two panels, and the map is the only thing on
   the page still drawn inside a border. Nothing is hidden and nothing is
   removed -- the panels are exactly as reachable as before. */
.fw-panel { border: 0; border-top: 1px solid #131a24; border-radius: 0; padding-left: 0; padding-right: 0 }
.fw-panel > h3 { letter-spacing: .12em }

/* Long explanatory prose collapses behind a summary rather than being deleted.
   The full text is one press away and is still in the document for anything
   that reads it. */
.fw-note > summary {
  cursor: pointer; list-style: none; color: #64748b; font-size: .625rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.fw-note > summary::-webkit-details-marker { display: none }
.fw-note > summary::before { content: "\203a "; display: inline-block; transition: transform .2s ease }
.fw-note[open] > summary::before { transform: rotate(90deg) }
.fw-note > div { color: #64748b; font-size: .625rem; line-height: 1.5; margin-top: .35rem }