/* Shared chart tokens and marks for the workspace.
   One brand-green ramp carries ordered things (stages, magnitudes); state
   wears the workspace status tokens; every label wears a text token. The
   dark ramp is its own set, validated against the dark surface, not a flip
   of the light one. Marks stay thin, grids are solid hairlines, and every
   chart has a table twin so nothing is readable only by colour or hover.
   Meters and deltas also stand alone in tables and tiles, so they carry
   the tokens themselves, as do a compact stack in a table row and its key. */
.viz, .viz-meter, .viz-delta, .viz-stack-mini, .viz-legend {
  --viz-o1:#78b497; --viz-o2:#659f83; --viz-o3:#518b70; --viz-o4:#3e785e; --viz-o5:#2a654c; --viz-o6:#15533a; --viz-o7:#00412a;
  --viz-good:var(--brand); --viz-warn:var(--warn); --viz-bad:var(--bad); --viz-info:var(--info); --viz-neutral:var(--text-4); --viz-accent:var(--accent);
  --viz-track:var(--surface-2); --viz-grid:var(--line); --viz-axis:var(--line-strong); --viz-surface:var(--surface);
  margin:0; min-width:0; color:var(--text); font:13px/1.5 var(--sans, Inter, system-ui, sans-serif);
}
:root[data-theme="dark"] :is(.viz, .viz-meter, .viz-delta, .viz-stack-mini, .viz-legend) {
  --viz-o1:#1c6447; --viz-o2:#327759; --viz-o3:#468a6b; --viz-o4:#5a9e7e; --viz-o5:#6eb292; --viz-o6:#82c7a6; --viz-o7:#97dcba;
}
.viz-tone-o1 { --viz-fill:var(--viz-o1); } .viz-tone-o2 { --viz-fill:var(--viz-o2); } .viz-tone-o3 { --viz-fill:var(--viz-o3); }
.viz-tone-o4 { --viz-fill:var(--viz-o4); } .viz-tone-o5 { --viz-fill:var(--viz-o5); } .viz-tone-o6 { --viz-fill:var(--viz-o6); }
.viz-tone-o7 { --viz-fill:var(--viz-o7); } .viz-tone-good { --viz-fill:var(--viz-good); } .viz-tone-warn { --viz-fill:var(--viz-warn); }
.viz-tone-bad { --viz-fill:var(--viz-bad); } .viz-tone-info { --viz-fill:var(--viz-info); } .viz-tone-neutral { --viz-fill:var(--viz-neutral); }
.viz-tone-accent { --viz-fill:var(--viz-accent); }

.viz figcaption { display:flex; flex-direction:column; gap:2px; margin-bottom:14px; }
.viz figcaption strong { font-size:13px; font-weight:600; letter-spacing:-.1px; }
.viz figcaption span { font-size:12px; color:var(--text-3); }
.viz-empty, .viz-note { margin:0; font-size:12px; color:var(--text-3); line-height:1.6; }
.viz-note { margin-top:10px; }

/* A grid of chart cards. */
.viz-grid { display:grid; gap:14px; }
.viz-grid > .viz { padding:18px 20px 16px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }

/* Bars: one hue, length is the encoding, the value sits at the tip. */
.viz-bars { display:grid; gap:9px; }
.viz-bar-row { display:grid; grid-template-columns:minmax(72px, min(36%, 220px)) 1fr auto; align-items:center; gap:10px; min-height:22px; color:inherit; text-decoration:none; border-radius:6px; outline-offset:4px; }
.viz-bar-label { font-size:12px; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.viz-bar-track { position:relative; height:10px; border-left:1px solid var(--viz-axis); }
.viz-bar-fill { display:block; height:100%; min-width:0; border-radius:0 4px 4px 0; background:var(--viz-fill, var(--viz-o5)); transition:filter .12s; }
.viz-bar-fill:not(.viz-bar-zero) { min-width:2px; } /* a tiny value still shows; only zero draws nothing */
.viz-bar-fill.viz-bar-zero { background:transparent; }
.viz-bar-value { font-size:12px; color:var(--text-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
.viz-bar-row:hover .viz-bar-fill, .viz-bar-row:focus-visible .viz-bar-fill { filter:brightness(1.12); }
a.viz-bar-row:hover .viz-bar-label { color:var(--brand); text-decoration:underline; text-underline-offset:3px; }

/* One stacked bar with a surface gap between parts. */
.viz-stack { display:flex; gap:2px; height:12px; }
.viz-seg { display:block; flex:0 1 auto; min-width:3px; height:100%; background:var(--viz-fill, var(--viz-o5)); transition:filter .12s; }
.viz-seg:first-child { border-radius:6px 0 0 6px; }
.viz-seg:last-child { border-radius:0 6px 6px 0; }
.viz-seg:only-child { border-radius:6px; }
.viz-seg:hover { filter:brightness(1.12); }

/* Stages: one segment per step. The shape carries the state with the word:
   solid done, outlined running, hatched stopped, dashed waiting, dotted for
   a step that belongs to a person. Phones wrap the strip into rows of four. */
.viz-stages { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--viz-stage-count, 7), minmax(0, 1fr)); gap:10px 4px; }
.viz-stage { display:flex; flex-direction:column; gap:4px; min-width:0; min-height:44px; border-radius:6px; outline-offset:3px; font-size:11px; line-height:1.3; color:var(--text-2); }
.viz-stage-seg { display:block; box-sizing:border-box; height:10px; border-radius:3px; }
.viz-stage-done .viz-stage-seg { background:var(--viz-o5); }
.viz-stage-running .viz-stage-seg { border:2px solid var(--viz-o5); background:color-mix(in srgb, var(--viz-o5) 20%, transparent); animation:viz-stage-pulse 1s ease-in-out infinite alternate; }
.viz-stage-blocked .viz-stage-seg { border:2px solid var(--viz-warn); background:repeating-linear-gradient(135deg, var(--viz-warn) 0 2px, transparent 2px 5px); }
.viz-stage-waiting .viz-stage-seg { border:1.5px dashed var(--viz-axis); }
.viz-stage-later .viz-stage-seg { border:1.5px dotted var(--viz-neutral); }
.viz-stage-gap { padding-left:6px; border-left:1px solid var(--viz-grid); border-radius:0; }
.viz-stage-n { font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
.viz-stage-word { overflow-wrap:break-word; }
.viz-stage-blocked .viz-stage-word { color:var(--warn-text, var(--warn)); font-weight:600; }
.viz-stage-waiting .viz-stage-word, .viz-stage-later .viz-stage-word { color:var(--text-3); }
.viz-stage-time { display:flex; flex-direction:column; gap:3px; color:var(--text-3); white-space:nowrap; font-variant-numeric:tabular-nums; }
.viz-stage-dur { display:block; height:3px; border-radius:2px; background:var(--viz-track); overflow:hidden; }
.viz-stage-dur i { display:block; height:100%; background:var(--viz-o4); }
.viz-stage-absent .viz-stage-seg { border:1.5px dashed var(--viz-neutral); background:repeating-linear-gradient(45deg, var(--viz-grid) 0 2px, transparent 2px 6px); }
.viz-stage-absent .viz-stage-word { color:var(--text-2); font-style:italic; }
/* The timeline: one step per line, the segment turned upright, name and reason in the open. */
.viz-stages.viz-stages-list { display:flex; flex-direction:column; gap:0; }
.viz-stages-list .viz-stage { display:grid; grid-template-columns:8px 1.6em minmax(0, 1fr) auto; column-gap:10px; align-items:start; padding:8px 0; font-size:13px; border-top:1px solid var(--viz-grid); border-radius:0; }
.viz-stages-list .viz-stage:first-child { border-top:0; }
.viz-stages-list .viz-stage-seg { width:8px; height:auto; align-self:stretch; min-height:18px; }
.viz-stages-list .viz-stage-gap { padding-left:0; border-left:0; border-top:2px solid var(--viz-axis); margin-top:6px; }
.viz-stage-main { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; min-width:0; }
.viz-stage-label { color:var(--text); font-weight:500; overflow-wrap:anywhere; }
.viz-stages-list .viz-stage-word { font-size:12px; }
.viz-stage-why { flex-basis:100%; font-size:12px; line-height:1.45; color:var(--text-2); overflow-wrap:anywhere; }
.viz-stages-list .viz-stage-time { text-align:right; font-size:12px; }
@media (max-width:600px) { .viz-stages-list .viz-stage { grid-template-columns:8px 1.4em minmax(0, 1fr); } .viz-stages-list .viz-stage-time { grid-column:3; text-align:left; } }
.viz-stage-reason { margin:12px 0 0; font-size:12px; line-height:1.5; color:var(--text-2); }
.viz-stage-reason strong { color:var(--warn-text, var(--warn)); font-weight:600; }
@keyframes viz-stage-pulse { from { opacity:1; } to { opacity:.5; } }
@media (prefers-reduced-motion: reduce) { .viz-stage-running .viz-stage-seg { animation:none; } }
@media (forced-colors: active) {
  .viz-stage-done .viz-stage-seg, .viz-stage-dur i { forced-color-adjust:none; background:CanvasText; }
  .viz-stage-blocked .viz-stage-seg { forced-color-adjust:none; background:repeating-linear-gradient(135deg, CanvasText 0 2px, Canvas 2px 5px); }
}
@media (max-width:600px) { .viz-stages { grid-template-columns:repeat(4, minmax(0, 1fr)); } .viz-stage-gap { padding-left:0; border-left:0; } }

/* Legend: a mark beside text, never coloured text. */
.viz-legend { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--text-2); }
.viz-legend li { display:flex; align-items:center; gap:7px; min-width:0; }
.viz-legend strong { color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
/* A legend with counts is a grid, so a wrapped label never pushes its count
   out of line: in each column the counts share one right edge. */
.viz-legend-count { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap:6px 20px; }
.viz-legend-count li { align-items:flex-start; }
.viz-legend-count li > span { flex:1; min-width:0; overflow-wrap:anywhere; }
.viz-legend-count strong { margin-left:auto; text-align:right; }
.viz-legend-count .viz-swatch { margin-top:3px; }
.viz-swatch { display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--viz-fill, var(--viz-o5)); flex:none; }
.viz-key { display:inline-block; width:14px; height:2px; border-radius:1px; background:var(--viz-fill, var(--viz-o5)); flex:none; }
.viz-key-dash { background:linear-gradient(90deg, var(--viz-fill, var(--viz-o5)) 0 6px, transparent 6px 8px, var(--viz-fill, var(--viz-o5)) 8px); }

/* Meter: a same-ramp track, the fill is the reading. */
.viz-meter { display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:100%; }
.viz-meter-track { flex:1 1 80px; min-width:48px; height:6px; border-radius:3px; background:color-mix(in srgb, var(--viz-fill, var(--viz-o5)) 26%, transparent); }
.viz-meter-fill { display:block; height:100%; border-radius:3px; background:var(--viz-fill, var(--viz-o5)); }
.viz-meter-text { font-size:12px; color:var(--text-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
.viz-meter-empty { font-size:12px; color:var(--text-3); }

/* Delta: a signed change in words, coloured only when direction has a value. */
.viz-delta { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--text-3); }
.viz-delta-good { color:var(--brand); }
.viz-delta-bad { color:var(--bad); }

/* Lines: 2px strokes, 8px markers with a surface ring, solid hairline grid. */
.viz-svg { display:block; width:100%; height:auto; overflow:visible; }
.viz-grid-line, .viz-grid { stroke:var(--viz-grid); stroke-width:1; vector-effect:non-scaling-stroke; }
.viz-ref { stroke:var(--viz-axis); stroke-width:1; vector-effect:non-scaling-stroke; }
.viz-axis-text { fill:var(--text-3); font-size:11px; font-family:inherit; font-variant-numeric:tabular-nums; }
.viz-band { fill:var(--text-4); opacity:.14; }
.viz-band:hover { opacity:.24; }
.viz-band:focus-visible { opacity:.3; outline:none; stroke:var(--text); stroke-width:2; vector-effect:non-scaling-stroke; }
.viz-tick:focus-visible { outline:none; stroke:var(--text); stroke-width:3; }
.viz-tick { stroke:var(--text-3); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.viz-line { fill:none; stroke:var(--viz-fill, var(--viz-o5)); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.viz-dot { fill:var(--viz-fill, var(--viz-o5)); stroke:var(--viz-surface); stroke-width:2; vector-effect:non-scaling-stroke; cursor:default; }
.viz-line-dash { stroke-dasharray:6 4; }
/* A change the product computed (a radar fall): a dashed rule, the fall
   drawn thick over the line, and a triangle, so shape carries it too. */
.viz-event-rule { stroke:var(--viz-warn); stroke-width:1; stroke-dasharray:3 3; vector-effect:non-scaling-stroke; }
.viz-event-fall { stroke:var(--viz-warn); stroke-width:3.5; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.viz-event-mark { fill:var(--viz-warn); stroke:var(--viz-surface); stroke-width:1; vector-effect:non-scaling-stroke; }
.viz-event-label { fill:var(--text); font-weight:600; paint-order:stroke; stroke:var(--viz-surface); stroke-width:3px; stroke-linejoin:round; }
.viz-event:focus-visible { outline:none; }
.viz-event:focus-visible .viz-event-rule { stroke:var(--text); stroke-width:2; stroke-dasharray:none; }
.viz-key-event { height:0; background:none; border-top:2px dashed var(--viz-warn); }
.viz-event-rise .viz-event-rule { stroke:var(--viz-o5); } .viz-event-rise .viz-event-mark { fill:var(--viz-o5); }
.viz-key-event.viz-event-rise { border-top-color:var(--viz-o5); }
/* The clear hit circle takes the pointer; focus draws a text-colour ring on the dot. */
.viz-hit { fill:transparent; stroke:none; pointer-events:all; }
.viz-pt { outline:none; cursor:default; }
a.viz-pt { cursor:pointer; }
.viz-pt:hover .viz-dot { r:5.5; }
.viz-pt:focus-visible .viz-dot { r:5.5; stroke:var(--text); stroke-width:2; }

/* Columns: thin, rounded at the data end, square at the baseline. */
.viz-columns { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:6px; height:150px; padding-top:20px; }
.viz-col { display:flex; flex-direction:column; min-width:0; height:100%; color:inherit; text-decoration:none; border-radius:6px; outline-offset:4px; }
.viz-col-track { position:relative; flex:1; display:flex; align-items:flex-end; justify-content:center; border-bottom:1px solid var(--viz-axis); }
.viz-col-fill { display:block; width:100%; max-width:24px; border-radius:4px 4px 0 0; background:var(--viz-fill, var(--viz-o5)); transition:filter .12s; }
.viz-col-fill:not(.viz-bar-zero) { min-height:2px; }
.viz-col-fill.viz-bar-zero { background:transparent; }
.viz-col:hover .viz-col-fill, .viz-col:focus-visible .viz-col-fill { filter:brightness(1.12); }
.viz-col-value { position:absolute; left:50%; transform:translate(-50%, -5px); font-size:11px; color:var(--text-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
.viz-col-label { font-size:11px; color:var(--text-3); text-align:center; margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Plots as small multiples: one tile per plot at one shared scale. A plot
   without an outline is hatched and says so in words. */
.viz-plots { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:12px; }
.viz-plot { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:4px 8px; align-items:center; padding:6px; border-radius:10px; }
.viz-plot:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.viz-plot:hover .viz-plot-shape { filter:brightness(1.12); }
.viz-plot-svg { grid-column:1 / -1; display:block; width:100%; height:auto; aspect-ratio:1; border:1px solid var(--viz-grid); border-radius:8px; background:var(--viz-track); }
.viz-plot-shape { fill:color-mix(in srgb, var(--viz-o5) 22%, transparent); stroke:var(--viz-o5); stroke-width:2; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.viz-plot-ring { fill:none; stroke:var(--viz-neutral); stroke-width:1; stroke-dasharray:2 2; vector-effect:non-scaling-stroke; }
.viz-plot-scale line, .viz-plot-scale-key { stroke:var(--text-2); stroke-width:2; vector-effect:non-scaling-stroke; }
.viz-plot-none { fill:none; stroke:var(--viz-axis); stroke-dasharray:4 3; vector-effect:non-scaling-stroke; }
.viz-plot-svg-none { background:repeating-linear-gradient(45deg, var(--viz-grid) 0 1.5px, var(--viz-track) 1.5px 7px); }
.viz-plot-none-text { font-size:10px; fill:var(--text-3); }
.viz-plot-point { fill:var(--viz-o5); stroke:var(--viz-surface); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.viz-plot-name { grid-column:1 / -1; font:500 12px/1.3 var(--mono, ui-monospace, monospace); color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.viz-plot-area-track { display:block; height:6px; border-left:1px solid var(--viz-axis); }
.viz-plot-area-track i { display:block; height:100%; border-radius:0 3px 3px 0; background:var(--viz-o5); }
.viz-plot-area-none { border-left-style:dashed; }
.viz-plot-area { font-size:12px; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.viz-plot-key { display:flex; align-items:center; gap:8px; margin:10px 0 0; font-size:12px; color:var(--text-3); }
.viz-plot-key svg { flex:none; }
@media (max-width:600px) { .viz-plots { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; } }
@media (forced-colors: active) {
  .viz-plot-shape, .viz-plot-scale line, .viz-plot-scale-key { stroke:CanvasText; }
  .viz-plot-area-track i, .viz-plot-point { forced-color-adjust:none; background:CanvasText; fill:CanvasText; }
}

/* The table twin. */
.viz-table { margin-top:10px; font-size:12px; }
.viz-table > summary { cursor:pointer; color:var(--text-3); list-style:none; display:inline-block; border-radius:6px; }
.viz-table > summary:hover { color:var(--text); }
.viz-table > summary::-webkit-details-marker { display:none; }
.viz-table > summary::before { content:"＋ "; }
.viz-table[open] > summary::before { content:"− "; }
.viz-table table { width:100%; margin-top:8px; border-collapse:collapse; font-size:12px; }
.viz-table th, .viz-table td { padding:6px 10px; text-align:left; border-bottom:1px solid var(--line); font-weight:500; color:var(--text-2); }
.viz-table thead th { color:var(--text-3); font-weight:500; }
.viz-table td { font-variant-numeric:tabular-nums; text-align:right; }
.viz-table thead th:not(:first-child) { text-align:right; }
/* Ordered steps: the part lost since the step before is hatched on the
   track, and the count lost is said in words beside the value. */
.viz-bar-drop { position:absolute; top:0; height:100%; background:repeating-linear-gradient(135deg, var(--viz-axis) 0 1.5px, transparent 1.5px 5px); border:1px dashed var(--viz-axis); border-left:0; border-radius:0 4px 4px 0; box-sizing:border-box; }
.viz-bar-change { display:block; font-size:11px; color:var(--text-3); text-align:right; }
.viz-bars-steps .viz-bar-row { min-height:32px; }
.viz-bars-steps .viz-bar-value { text-align:right; }

/* Texture as a second cue for a state, on a segment and on its swatch. */
.viz-pat-hatch { background:repeating-linear-gradient(135deg, var(--viz-fill) 0 2px, transparent 2px 5px); box-shadow:inset 0 0 0 1px var(--viz-fill); }
.viz-pat-cross { background:repeating-linear-gradient(45deg, var(--viz-fill) 0 1.5px, transparent 1.5px 5px), repeating-linear-gradient(135deg, var(--viz-fill) 0 1.5px, transparent 1.5px 5px); box-shadow:inset 0 0 0 1px var(--viz-fill); }
.viz-pat-dots { background:radial-gradient(circle, var(--viz-fill) 1.1px, transparent 1.4px) 0 0/4px 4px; box-shadow:inset 0 0 0 1px var(--viz-fill); }
.viz-pat-outline { background:transparent; box-shadow:inset 0 0 0 1.5px var(--viz-fill); }
/* One compact stack per table row; its words sit in the cell beside it. */
.viz-stack-mini { display:flex; width:100%; min-width:96px; max-width:220px; height:10px; margin:2px 0 4px; }

/* Dates and ids do not wrap mid-value; the table scrolls inside its card. */
.viz-table-nowrap th, .viz-table-nowrap td { white-space:nowrap; }

/* One tooltip for the page, shown on hover and on keyboard focus alike. */
.viz-tooltip { position:absolute; top:0; left:0; z-index:80; max-width:280px; padding:8px 10px; border-radius:8px; background:var(--text); color:var(--surface); font:12px/1.45 var(--sans, Inter, system-ui, sans-serif); box-shadow:var(--e-2); pointer-events:none; }
.viz-tooltip[hidden] { display:none; }

@media (forced-colors: active) {
  .viz-bar-fill, .viz-seg, .viz-meter-fill, .viz-col-fill, .viz-swatch, .viz-key { forced-color-adjust:none; background:CanvasText; }
  .viz-line { stroke:CanvasText; }
  .viz-event-rule, .viz-event-fall { stroke:CanvasText; } .viz-event-mark { fill:CanvasText; }
  .viz-dot { fill:CanvasText; stroke:Canvas; }
  .viz-pat-hatch, .viz-bar-drop { background:repeating-linear-gradient(135deg, CanvasText 0 2px, Canvas 2px 5px); }
  .viz-pat-cross { background:repeating-linear-gradient(45deg, CanvasText 0 1.5px, Canvas 1.5px 5px), repeating-linear-gradient(135deg, CanvasText 0 1.5px, Canvas 1.5px 5px); }
  .viz-pat-dots { background:radial-gradient(circle, CanvasText 1.1px, Canvas 1.4px) 0 0/4px 4px; }
  .viz-pat-outline { background:Canvas; box-shadow:inset 0 0 0 1.5px CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .viz-bar-fill, .viz-seg, .viz-col-fill { transition:none; }
}
@media (max-width:600px) {
  .viz-bar-row { grid-template-columns:minmax(64px, 40%) 1fr auto; gap:8px; }
  .viz-columns { height:130px; }
  .viz-grid > .viz { padding:16px; }
  .viz-col-label-alt { visibility:hidden; }
  /* The label that shows may use its hidden neighbours' room, centred on its column. */
  .viz-columns-dense .viz-col-label { display:flex; justify-content:center; overflow:visible; }
  .viz-table > summary { display:inline-flex; align-items:center; gap:4px; min-height:44px; }
  /* A bar that opens its record is a row a thumb can hit. */
  a.viz-bar-row { min-height:44px; }
}
/* A reference-level label sits on the line; a surface halo keeps it legible over marks. */
.viz-ref-label { paint-order:stroke; stroke:var(--viz-surface); stroke-width:3px; stroke-linejoin:round; }

/* Maps. One outline for the plot on every map, from the theme tokens,
   with a halo so it holds on the paper basemap and on imagery alike.
   Suggested outlines differ by dash as well as colour. */
.leaflet-container { --map-plot:var(--brand); --map-halo:rgba(255,255,255,.9); --map-cand-1:var(--info); --map-cand-2:var(--accent); --map-cand-3:var(--warn); --map-cand-4:var(--text-2); --map-cand-5:var(--info); }
:root[data-theme="dark"] .leaflet-container { --map-halo:rgba(0,0,0,.85); }
.leaflet-overlay-pane path.map-plot { stroke:var(--map-plot); filter:drop-shadow(0 0 1.5px var(--map-halo)); }
.leaflet-overlay-pane path.map-plot:not([fill="none"]) { fill:var(--map-plot); }
.leaflet-overlay-pane path.map-cand { filter:drop-shadow(0 0 1.5px var(--map-halo)); }
.leaflet-overlay-pane path.map-cand-1, .map-cand-key.map-cand-1 line { stroke:var(--map-cand-1); }
.leaflet-overlay-pane path.map-cand-1:not([fill="none"]) { fill:var(--map-cand-1); }
.leaflet-overlay-pane path.map-cand-2, .map-cand-key.map-cand-2 line { stroke:var(--map-cand-2); }
.leaflet-overlay-pane path.map-cand-2:not([fill="none"]) { fill:var(--map-cand-2); }
.leaflet-overlay-pane path.map-cand-3, .map-cand-key.map-cand-3 line { stroke:var(--map-cand-3); }
.leaflet-overlay-pane path.map-cand-3:not([fill="none"]) { fill:var(--map-cand-3); }
.leaflet-overlay-pane path.map-cand-4, .map-cand-key.map-cand-4 line { stroke:var(--map-cand-4); }
.leaflet-overlay-pane path.map-cand-4:not([fill="none"]) { fill:var(--map-cand-4); }
.leaflet-overlay-pane path.map-cand-5, .map-cand-key.map-cand-5 line { stroke:var(--map-cand-5); }
.leaflet-overlay-pane path.map-cand-5:not([fill="none"]) { fill:var(--map-cand-5); }
.map-cand-key { --map-cand-1:var(--info); --map-cand-2:var(--accent); --map-cand-3:var(--warn); --map-cand-4:var(--text-2); --map-cand-5:var(--info);
  display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border:1px solid var(--line-strong); border-radius:999px;
  font:600 12px/1.4 var(--sans, system-ui, sans-serif); color:var(--text); font-variant-numeric:tabular-nums; }
/* The basemap is context, never the brightest thing on a dark page; the
   overlays sit outside the tile pane, so outlines keep their colour. */
:root[data-theme="dark"] .leaflet-tile-pane { filter:grayscale(.35) brightness(.62) contrast(1.08); }
.leaflet-control-scale-line { background:color-mix(in oklab, var(--surface) 88%, transparent); border-color:var(--text-2); color:var(--text);
  font:11px/1.3 var(--mono, ui-monospace, monospace); font-variant-numeric:tabular-nums; }

/* Season columns: a reading is as wide as the days it covers; days no
   reading covers are hatched, so a gap never reads as a zero. */
.viz-span { fill:var(--viz-fill, var(--viz-o5)); }
.viz-span-zero { stroke:var(--viz-fill, var(--viz-o5)); stroke-width:2; vector-effect:non-scaling-stroke; }
.viz-pt:hover .viz-span, .viz-pt:focus-visible .viz-span { stroke:var(--text); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.viz-pt:focus-visible .viz-gap { stroke:var(--text); stroke-width:2; vector-effect:non-scaling-stroke; }
.viz-hatch { stroke:var(--viz-axis); stroke-width:1.5; }
.viz-axis { stroke:var(--viz-axis); stroke-width:1; vector-effect:non-scaling-stroke; }
.viz-swatch-gap { background:repeating-linear-gradient(45deg, var(--viz-axis) 0 1.5px, transparent 1.5px 5px); border:1px solid var(--viz-axis); border-radius:2px; }

/* Date ranges: one lane each, label, track, state in a word. */
.viz-ranges { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.viz-range-row { display:grid; grid-template-columns:minmax(0, 9em) minmax(0, 1fr) minmax(0, 9em); gap:10px; align-items:center; min-height:32px; border-radius:6px; outline:none; }
.viz-range-row:hover, .viz-range-row:focus-visible { background:var(--viz-track); }
.viz-range-row:focus-visible { box-shadow:0 0 0 2px var(--text); }
.viz-range-label { font:12px/1.3 var(--mono, ui-monospace, monospace); color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.viz-range-track { position:relative; height:14px; border-left:1px solid var(--viz-axis); overflow-x:clip; }
.viz-range-window { position:absolute; top:-6px; bottom:-6px; background:var(--viz-track); }
.viz-range-bar { position:absolute; top:2px; bottom:2px; min-width:4px; border-radius:3px; background:var(--viz-fill, var(--viz-o5)); }
.viz-range-today { position:absolute; top:-6px; bottom:-6px; width:0; border-left:1.5px dashed var(--text-2); }
.viz-range-open { position:absolute; top:2px; bottom:2px; width:4px; border-radius:3px 0 0 3px; background:var(--viz-fill, var(--viz-o5)); }
.viz-range-open::after { content:""; position:absolute; left:4px; top:50%; width:22px; border-top:2px dashed var(--viz-fill, var(--viz-o5)); transform:translateY(-1px); }
.viz-range-none { position:absolute; left:6px; top:-2px; font-size:12px; color:var(--text-3); }
.viz-range-state { font-size:12px; color:var(--text-2); }
.viz-range-axis { display:grid; grid-template-columns:minmax(0, 9em) minmax(0, 1fr) minmax(0, 9em); gap:10px; margin-top:4px; }
.viz-range-ticks { grid-column:2; position:relative; height:16px; border-top:1px solid var(--viz-axis); }
.viz-range-ticks span { position:absolute; top:2px; transform:translateX(-50%); font-size:11px; color:var(--text-3); white-space:nowrap; }
.viz-range-ticks .viz-tick-start { transform:none; }
.viz-range-ticks .viz-tick-end { transform:translateX(-100%); }
.viz-swatch-window { background:var(--viz-track); border:1px solid var(--viz-axis); }
.viz-key-open { height:0; background:none; border-top:2px dashed var(--viz-o5); }
.viz-key-today { height:0; background:none; border-top:1.5px dashed var(--text-2); }
@media (max-width:600px) {
  .viz-range-row, .viz-range-axis { grid-template-columns:minmax(0, 8.5em) minmax(0, 1fr) minmax(0, 5.5em); gap:6px; }
  .viz-range-row { min-height:44px; }
}
@media (forced-colors: active) {
  .viz-span { fill:CanvasText; }
  .viz-range-bar, .viz-range-open { forced-color-adjust:none; background:CanvasText; }
  .viz-range-open::after, .viz-key-open { border-top-color:CanvasText; }
}

/* Intervals: a bar from low to high on a scale that holds zero, a dot at
   the middle, and a rule at zero so a loss reads left of it. */
.viz-iv-track { overflow:visible; border-left:0; }
.viz-iv-zero { position:absolute; top:-6px; bottom:-6px; width:0; border-left:1px solid var(--viz-axis); }
.viz-iv-bar { position:absolute; top:3px; bottom:3px; min-width:4px; border-radius:3px; background:var(--viz-fill, var(--viz-o5)); opacity:.55; }
.viz-iv-mid { position:absolute; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--text); box-shadow:0 0 0 2px var(--viz-surface, var(--surface)); }
.viz-iv-value { font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.viz-key-iv { height:8px; opacity:.55; }
.viz-key-mid { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--text); flex:none; }
@media (forced-colors: active) {
  .viz-iv-bar { forced-color-adjust:none; background:GrayText; opacity:1; }
  .viz-iv-mid, .viz-key-mid { forced-color-adjust:none; background:CanvasText; }
}