/* ---------------------------------------------------------------
   The watch. The observability hero: one system, drawn in hairline,
   then instrumented, then watched, then governed. Scroll scrubs it,
   the cursor leans it, and every fallback shows it finished.
   Loaded after main.css. Colour comes from tokens; brass is the only
   accent and amber #d98b3a appears only for the anomaly that resolves
   back to brass. Animation touches opacity, transform and
   stroke-dashoffset only. Nothing glows.
   --------------------------------------------------------------- */

/* ---------- Layout: text panel left, the object right of centre ---------- */
.watch { position: relative; height: 100svh; overflow: hidden; }
/* An ink scrim on the left keeps the panel readable if the object ever reaches it */
.watch::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to right, rgba(7,9,12,0.82) 0%, rgba(7,9,12,0.5) 22%, rgba(7,9,12,0) 44%);
}
.watch__body {
  position: absolute; z-index: 3; left: var(--gutter); top: 50%; transform: translateY(-50%);
  max-width: 30rem; padding-top: 2rem;
}
.watch .display { font-size: clamp(2.2rem, 1.3rem + 2.8vw, 4.4rem); margin: 1.4rem 0 1.6rem; }
.watch .lead { margin: 0; max-width: 26em; }

.watch__stage {
  position: absolute; z-index: 1; right: 4vw; top: 50%; width: min(52vw, 800px);
  transform: translateY(-50%); perspective: 1800px;
}
/* Scripts off: nothing can be generated, so the stage steps aside cleanly */
.watch__stage:empty { display: none; }
html:not(.js) .watch:not(.is-static) { height: auto; min-height: 80svh; }

/* ---------- The map ---------- */
.watch__map { position: relative; aspect-ratio: 16 / 10; transform-style: preserve-3d; will-change: transform; }
.watch.is-static .watch__map { transform: none !important; }
.watch__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.watch__svg text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; fill: var(--text-on-ink-faint); }

/* Edges: a hairline, then brass telemetry travelling along it, dense first and sparse once governed */
.wedge { fill: none; stroke: var(--ink-line-strong); stroke-width: 1; }
.wdash { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-linecap: round; opacity: 0; }
.wdash--dense { stroke-dasharray: 5 9; }
.wdash--sparse { stroke-dasharray: 3 25; stroke-width: 1; }
.js .watch.is-live:not(.is-static) .wdash--dense { animation: wflow-dense 1.4s linear infinite; }
.js .watch.is-live:not(.is-static) .wdash--sparse { animation: wflow-sparse 2.8s linear infinite; }
@keyframes wflow-dense { to { stroke-dashoffset: -28; } }
@keyframes wflow-sparse { to { stroke-dashoffset: -56; } }
.wlbl { font-size: 10px; text-anchor: middle; paint-order: stroke; stroke: var(--ink-0); stroke-width: 6px; stroke-linejoin: round; }

/* Compact maps (under 480px wide) drop the edge and rail labels so the nodes stay clear */
.watch__map.is-compact .wlbl, .watch__map.is-compact .wrail-lbl { display: none; }
.watch__map.is-compact .nd-name { font-size: 10.5px; }

/* Nodes: dark first, lit once an agent lands, a check once the scan has passed */
.wnode { transform-box: fill-box; transform-origin: center; transition: transform 0.5s var(--ease-out); }
.wnode.is-near { transform: scale(1.07); }
.wnode .nd-dark { fill: var(--ink-1); stroke: var(--ink-line-strong); stroke-width: 1; }
.wnode .nd-dark.nd-dashed { stroke-dasharray: 3 4; }
.wnode .nd-lit { fill: var(--ink-2); stroke: rgba(235,232,225,0.62); stroke-width: 1; }
.wnode .nd-name { text-anchor: middle; font-size: 11.5px; fill: var(--text-on-ink-faint); }
.wnode .nd-name--lit { fill: var(--text-on-ink); }
.wnode .nd-agent { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.wnode .nd-note { font-size: 10px; text-anchor: middle; }
.nd-chk { transform-box: fill-box; transform-origin: center; }
.nd-chk circle { fill: var(--ink-0); stroke: var(--accent); stroke-width: 1.2; }
.nd-chk path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nd-chk--warn circle, .nd-chk--warn path { stroke: #d98b3a; }
.nd-q circle { fill: var(--ink-0); stroke: var(--ink-line-strong); stroke-width: 1.2; }
.nd-q text { text-anchor: middle; fill: var(--text-on-ink-muted); font-size: 11px; }
.wnote { font-size: 10.5px; letter-spacing: 0.05em; }
.wnote--amber { fill: #d98b3a; }
.wnote--ok { fill: var(--accent); }

/* The pipeline rail under the map: everything flows into it, and the noisy stream is dropped there */
.wrail { stroke: var(--ink-line); stroke-width: 1; }
.wrail-dash { stroke: var(--accent); stroke-width: 1.4; opacity: 0; }
.wrail-dash--dense { stroke-dasharray: 2 4; }
.wrail-dash--sparse { stroke-dasharray: 2 14; stroke-width: 1; }
.js .watch.is-live:not(.is-static) .wrail-dash--dense { animation: wrail-dense 0.9s linear infinite; }
.js .watch.is-live:not(.is-static) .wrail-dash--sparse { animation: wrail-sparse 2.4s linear infinite; }
@keyframes wrail-dense { to { stroke-dashoffset: -12; } }
@keyframes wrail-sparse { to { stroke-dashoffset: -32; } }
.wrail-drop { stroke: var(--accent); stroke-width: 1.2; }
.wrail-lbl { font-size: 10px; }
.wrail-note { font-size: 10.5px; fill: var(--accent); text-anchor: end; letter-spacing: 0.05em; }

/* The scan: a brass band that passes top to bottom, no shadow, no glow */
.watch__scan {
  position: absolute; left: -2%; right: -2%; top: 0; height: 16%; opacity: 0; pointer-events: none; will-change: transform;
  background: linear-gradient(to bottom, transparent, rgba(201,168,106,0.06) 60%, rgba(201,168,106,0.24) 100%);
}
.watch__scan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); }

/* Caption, top left of the map: which of the four steps this is, and that the data is sample */
.watch__cap {
  position: absolute; left: 0; top: 0; pointer-events: none;
  font-family: var(--font-mono); font-size: 0.72rem; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase;
}
.watch__cap-state { position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--text-on-ink-muted); opacity: 0; will-change: opacity, transform; }
.watch__cap-state b { color: var(--accent); font-weight: 400; margin-right: 0.7em; }
.watch__cap-sub { position: absolute; left: 0; top: 1.6em; white-space: nowrap; color: var(--text-on-ink-faint); }

/* The alert that rises under the amber node, then reads resolved */
.watch__alert {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.45em 0.8em; white-space: nowrap; pointer-events: none; opacity: 0; will-change: opacity, transform;
  font-family: var(--font-mono); font-size: 0.9rem; line-height: 1; letter-spacing: 0.02em; color: var(--text-on-ink);
  background: var(--ink-0); border: 1px solid var(--ink-line-strong); border-radius: 4px;
}
.watch__alert::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.watch__alert--on { color: #d98b3a; }
.watch__alert--ok { color: var(--accent); }
.watch__alert span { color: var(--text-on-ink-muted); }

/* ---------- Cards under the map: inventory, telemetry, governance, one at a time ---------- */
.watch__cards { position: relative; height: 12rem; margin-top: 1rem; }
.wcard {
  position: absolute; right: 0; top: 0; width: 15.5rem; padding: 0.85rem 1rem 0.55rem; opacity: 0; will-change: opacity, transform;
  background: rgba(7,9,12,0.86); border: 1px solid var(--ink-line-strong); border-radius: 6px;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; color: var(--text-on-ink-muted);
}
.wcard h5 {
  display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 0.55rem;
  font-family: var(--font-display); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-on-ink-faint);
}
.wcard h5 em { font-style: normal; color: var(--accent); }
.wcard h5 em::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 6px; transform: translateY(-1px); }
.js .watch.is-live:not(.is-static) .wcard--tele h5 em::before { animation: wblink 1.8s var(--ease-in-out) infinite; }
@keyframes wblink { 50% { opacity: 0.25; } }
.wcard .row { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.32rem 0; border-top: 1px solid rgba(233,230,223,0.08); }
.wcard .row b { font-weight: 500; font-size: 0.9rem; color: var(--text-on-ink); white-space: nowrap; }
.wspark { display: block; width: 100%; height: auto; margin: 0.1rem 0 0.45rem; overflow: visible; }
.wspark .wspark-line { fill: none; stroke: var(--text-on-ink); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; opacity: 0.9; }
.wspark .wspark-thr { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 5; opacity: 0.6; }
.wspark .wspark-dot { fill: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .watch__stage { width: min(50vw, 640px); }
  .watch__body { max-width: 26rem; }
}
@media (max-width: 1024px) {
  .watch__stage { width: 46vw; }
  .watch__body { max-width: 24rem; }
  .watch__cards { height: 11rem; }
}
/* Small screens: no pin, no cursor, the finished object stacked under the text */
@media (max-width: 860px) {
  .watch { height: auto; overflow: visible; padding: 7.5rem var(--gutter) 3rem; display: flex; flex-direction: column; }
  .watch::before { display: none; }
  .watch__body { order: 1; position: static; transform: none; max-width: none; padding: 0; margin-bottom: 2.5rem; }
  .watch__stage { order: 2; position: relative; right: auto; top: auto; transform: none; width: 100%; perspective: none; }
  .watch__cards { height: auto; margin-top: 1.2rem; }
  .wcard { position: static; width: 100%; }
  .wcard--tally, .wcard--tele, .watch__alert { display: none; }
  html:not(.js) .watch:not(.is-static) { min-height: 0; }
}