/* =====================================================================
   From the Trenches: viz.css
   The chart grammar shared by every module in js/visuals/.
   Modules read colour only through these roles. See build/VIZ_STYLE.md.
   ===================================================================== */

:root{
  /* colour roles (map to site tokens; never hard-code hex in a module) */
  --v-ground:var(--bg);             /* chart surface, also the 2px gap and dot ring */
  --v-ink:var(--text);              /* primary text, values */
  --v-ink-2:var(--muted);           /* labels */
  --v-ink-3:var(--faint);           /* axes, ticks, units, sources */
  --v-axis:#3A4452;                 /* baseline and axis hairline */
  --v-grid:#1B2129;                 /* gridlines, recessive */
  --v-focus:var(--accent);          /* THE series the story is about, one per chart */
  --v-focus-wash:rgba(242,169,0,.12);
  --v-context:#56606F;              /* every other series (3.1:1 on ground) */
  --v-context-2:#2E3540;            /* background series, ghosted totals */
  --v-ghost:#3A4452;                /* dashed placeholders, not-yet values */
  --v-glow:rgba(242,169,0,.55);     /* globe and focus halos only */

  /* categorical: 3 validated slots + fold (see VIZ_STYLE.md) */
  --cat-1:var(--accent);            /* production, munitions, counter-drone */
  --cat-2:var(--info);              /* Europe and Ukraine */
  --cat-3:var(--alert);             /* Gulf and chokepoints */
  --cat-other:#6B7480;              /* money, policy, trust, space (folded, always labelled) */

  /* status: reserved, always shipped with a text label */
  --st-ok:var(--go);
  --st-warn:var(--accent);
  --st-bad:var(--alert);

  /* sequential (one hue, dark to light on dark ground) */
  --seq-1:#2B2412; --seq-2:#5A4410; --seq-3:#8E6A0A; --seq-4:#C48C04; --seq-5:var(--accent);

  /* sizes */
  --v-fs-axis:11px; --v-fs-label:13px; --v-fs-value:12px; --v-fs-anno:12.5px; --v-fs-key:clamp(32px,4vw,56px);
  --v-sw-hair:1px; --v-sw-line:2px; --v-sw-focus:2.5px; --v-r-dot:4px; --v-gap:2px; --v-bar-max:24px; --v-bar-r:3px;

  /* motion (JS mirrors these in GV.util.dur and GV.util.ease) */
  --v-dur-draw:1400ms; --v-dur-grow:900ms; --v-dur-fade:500ms; --v-dur-count:1600ms; --v-stagger:60ms;
}
@media (max-width:640px){
  :root{ --v-fs-axis:10px; --v-fs-label:12px; --v-fs-value:11px; --v-fs-anno:11.5px; --v-bar-max:18px; }
}

/* ---------- surface ---------- */
.gv svg{overflow:visible;font-family:var(--font-ui);font-variant-numeric:tabular-nums;shape-rendering:geometricPrecision}
.gv svg text{fill:var(--v-ink-2);font-size:var(--v-fs-label)}
.gv canvas{width:100%;height:100%}

/* ---------- axes and grid ---------- */
.v-axis path,.v-axis line,.v-baseline{stroke:var(--v-axis);stroke-width:var(--v-sw-hair);fill:none;shape-rendering:crispEdges}
.v-axis .domain{display:none}                       /* no box; baseline drawn separately */
.v-axis text,.v-tick{fill:var(--v-ink-3)!important;font-family:var(--font-mono);font-size:var(--v-fs-axis)!important;letter-spacing:.04em}
.v-axis-title{fill:var(--v-ink-3)!important;font-family:var(--font-mono);font-size:var(--v-fs-axis)!important;letter-spacing:.14em;text-transform:uppercase}
.v-grid line,.v-grid path,line.v-grid{stroke:var(--v-grid);stroke-width:var(--v-sw-hair);shape-rendering:crispEdges}
.v-refline{stroke:var(--v-ink-3);stroke-width:var(--v-sw-hair);stroke-dasharray:2 4;fill:none}   /* average, target */

/* ---------- labels ---------- */
.v-label{fill:var(--v-ink-2)!important;font-size:var(--v-fs-label)!important}
.v-label--strong{fill:var(--v-ink)!important;font-weight:600}
.v-label--mono{font-family:var(--font-mono);font-size:var(--v-fs-axis)!important;letter-spacing:.12em;text-transform:uppercase}
.v-value{fill:var(--v-ink)!important;font-family:var(--font-mono);font-size:var(--v-fs-value)!important;font-variant-numeric:tabular-nums}
.v-value--focus{fill:var(--v-ink)!important;font-weight:600}
.v-key{fill:var(--v-ink)!important;font-size:var(--v-fs-key)!important;font-weight:600;letter-spacing:-.04em;font-variant-numeric:proportional-nums}
.v-key--focus{fill:var(--v-focus)!important}
.v-unit{fill:var(--v-ink-3)!important;font-family:var(--font-mono);font-size:var(--v-fs-axis)!important;letter-spacing:.12em;text-transform:uppercase}

/* ---------- annotation ---------- */
.v-anno{fill:var(--v-ink-2)!important;font-size:var(--v-fs-anno)!important;line-height:1.4}
.v-anno--strong{fill:var(--v-ink)!important;font-weight:600}
.v-anno-line{stroke:var(--v-ink-3);stroke-width:var(--v-sw-hair);fill:none}
.v-anno-dot{fill:var(--v-ink-3)}
.v-bracket{stroke:var(--v-focus);stroke-width:var(--v-sw-hair);fill:none}

/* ---------- marks ---------- */
.v-bar{fill:var(--v-context)}
.v-bar--focus{fill:var(--v-focus)}
.v-bar--bg{fill:var(--v-context-2)}
.v-bar--ghost{fill:none;stroke:var(--v-ghost);stroke-width:var(--v-sw-hair);stroke-dasharray:3 3}
.v-line{fill:none;stroke:var(--v-context);stroke-width:var(--v-sw-line);stroke-linejoin:round;stroke-linecap:round}
.v-line--focus{stroke:var(--v-focus);stroke-width:var(--v-sw-focus)}
.v-line--ghost{stroke:var(--v-ghost);stroke-dasharray:3 4}
.v-area{fill:var(--v-context);opacity:.1}
.v-area--focus{fill:var(--v-focus);opacity:.12}
.v-dot{fill:var(--v-context);stroke:var(--v-ground);stroke-width:var(--v-gap)}
.v-dot--focus{fill:var(--v-focus)}
.v-link{fill:none;stroke:var(--v-context);stroke-opacity:.35}
.v-link--focus{stroke:var(--v-focus);stroke-opacity:.75}
.v-cell{fill:var(--v-context-2)}
.v-cell--on{fill:var(--v-context)}
.v-cell--focus{fill:var(--v-focus)}
.v-gap-shade{fill:var(--st-bad);opacity:.16}
.v-cat-1{fill:var(--cat-1);stroke:var(--cat-1)} .v-cat-2{fill:var(--cat-2);stroke:var(--cat-2)}
.v-cat-3{fill:var(--cat-3);stroke:var(--cat-3)} .v-cat-other{fill:var(--cat-other);stroke:var(--cat-other)}
.v-ok{fill:var(--st-ok)} .v-warn{fill:var(--st-warn)} .v-bad{fill:var(--st-bad)}

/* hover: the hovered mark lifts, siblings recede */
.v-hit{fill:transparent;stroke:none;cursor:pointer}
.gv .is-dim{opacity:.28;transition:opacity var(--dur-fast,180ms) var(--ease-out)}
.gv .is-hot{filter:brightness(1.18)}

/* ---------- HTML chrome inside a figure ---------- */
.gv-legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 var(--s4,16px);padding:0;list-style:none;font-size:var(--fs-micro,12.5px);color:var(--v-ink-2)}
.gv-legend li{display:inline-flex;align-items:center;gap:8px}
.gv-legend .k{width:10px;height:10px;border-radius:2px;background:var(--k,var(--v-context))}
.gv-legend .k--line{width:16px;height:2px;border-radius:1px}
.gv-legend .k--dot{width:8px;height:8px;border-radius:50%}
.gv-legend .k--dash{width:16px;height:0;border-top:1px dashed var(--v-ghost);background:none}

.gv-chips{display:flex;flex-wrap:wrap;gap:0;margin:var(--s4,16px) 0 0;padding:0;list-style:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gv-chips li{flex:1 1 0;min-width:90px;padding:12px 16px 12px 0;font-family:var(--font-mono);font-size:var(--v-fs-axis);letter-spacing:.12em;text-transform:uppercase;color:var(--v-ink-3)}
.gv-chips li + li{padding-left:16px;border-left:1px solid var(--line)}
.gv-chips b{display:block;font-family:var(--font-ui);font-size:22px;font-weight:600;letter-spacing:-.02em;text-transform:none;color:var(--v-ink);margin-bottom:2px}

/* scrubber / playhead control (globe, chokepoints) */
.gv-scrub{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-top:var(--s4,16px);font-family:var(--font-mono);font-size:var(--v-fs-axis);letter-spacing:.12em;text-transform:uppercase;color:var(--v-ink-3)}
.gv-scrub button{appearance:none;background:none;border:1px solid var(--line);border-radius:6px;padding:6px 10px;color:var(--v-ink-2);cursor:pointer;font:inherit;letter-spacing:inherit}
.gv-scrub button:hover{border-color:var(--line-2,#3A4452);color:var(--v-ink)}
.gv-scrub input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:20px;background:transparent;margin:0}
.gv-scrub input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--v-axis)}
.gv-scrub input[type=range]::-moz-range-track{height:1px;background:var(--v-axis)}
.gv-scrub input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--v-focus);border:2px solid var(--v-ground)}
.gv-scrub input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--v-focus);border:2px solid var(--v-ground)}
.gv-scrub output{color:var(--v-ink);min-width:6ch;text-align:right}

/* ---------- tooltip (one per page, owned by core.js: GV.util.tip) ---------- */
.gv-tip{position:fixed;left:0;top:0;z-index:70;pointer-events:none;min-width:140px;max-width:280px;padding:10px 12px;
  background:var(--surface-2);border:1px solid var(--line-2,#3A4452);border-radius:6px;opacity:0;transform:translate3d(0,4px,0);
  transition:opacity 140ms var(--ease-out),transform 140ms var(--ease-out);font-size:12.5px;line-height:1.4;color:var(--v-ink-2)}
.gv-tip.is-on{opacity:1;transform:none}
.gv-tip .t-h{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--v-ink-3);margin-bottom:6px}
.gv-tip .t-r{display:grid;grid-template-columns:12px 1fr;column-gap:8px;align-items:baseline}
.gv-tip .t-r + .t-r{margin-top:4px}
.gv-tip .t-k{width:12px;height:2px;border-radius:1px;background:var(--v-context);align-self:center}
.gv-tip .t-v{font-weight:600;color:var(--v-ink);font-variant-numeric:tabular-nums}
.gv-tip .t-l{grid-column:2;color:var(--v-ink-2)}
.gv-tip .t-b{color:var(--v-ink-2);margin-top:4px}

/* ---------- static (reduced motion) and print ---------- */
.gv[data-mode="static"] *{transition:none!important;animation:none!important}
@media (forced-colors:active){
  .v-bar--focus,.v-line--focus,.v-dot--focus,.v-cell--focus{forced-color-adjust:none}
}