/* Interactive figures for the v2 posts. Colours follow sepehrelahi.com (light and dark). */
:root {
  --zf-bg: #faf9ff;
  --zf-card: #ffffff;
  --zf-text: #1e1b2e;
  --zf-muted: #6b7280;
  --zf-accent: #4f46e5;
  --zf-accent-soft: rgba(79, 70, 229, 0.09);
  --zf-divider: rgba(0, 0, 0, 0.1);
  --zf-amber: #d98e1c;
  --zf-coral: #e0584a;
  --zf-good: #0f8f63;
  --zf-r1: #4f46e5;
  --zf-r2: #d98e1c;
  --zf-r3: #e0584a;
  /* map */
  --zf-land: #ecebf5;
  --zf-block: #e1dff0;
  --zf-tree: #d7e6df;
  --zf-water: #cddbf4;
  --zf-road: #3a3e5a;
  --zf-mark: #ffffff;
  --zf-node: #ffffff;
  --zf-halo-calm: rgba(79, 70, 229, 0.22);
  --zf-halo-busy: rgba(217, 142, 28, 0.55);
  --zf-halo-jam: rgba(224, 88, 74, 0.62);
  --zf-car0: #4f46e5;
  --zf-car1: #e9a23b;
  --zf-car2: #e0584a;
  --zf-deck: #faf7ee;
  /* heat map, low → high Φ */
  --zf-heat-0: #f5f3ff;
  --zf-heat-1: #d7d3fb;
  --zf-heat-2: #a49cf3;
  --zf-heat-3: #6a5fe0;
  --zf-heat-4: #2f2690;
  --zf-heat-line: rgba(255, 255, 255, 0.95);
  --zf-radius: 10px;
}
html[data-theme="dark"] {
  --zf-bg: #161329;
  --zf-card: #1f1c33;
  --zf-text: #e5e4eb;
  --zf-muted: #9ca0af;
  --zf-accent: #a5b4fc;
  --zf-accent-soft: rgba(165, 180, 252, 0.12);
  --zf-divider: #302c4a;
  --zf-amber: #f2b45a;
  --zf-coral: #f4806f;
  --zf-good: #4fd1a1;
  --zf-r1: #a5b4fc;
  --zf-r2: #f2b45a;
  --zf-r3: #f4806f;
  --zf-land: #262243;
  --zf-block: #2d2950;
  --zf-tree: #263b43;
  --zf-water: #2b3a6b;
  --zf-road: #0f0d1e;
  --zf-mark: #8d89b8;
  --zf-node: #e5e4eb;
  --zf-halo-calm: rgba(165, 180, 252, 0.2);
  --zf-halo-busy: rgba(242, 180, 90, 0.45);
  --zf-halo-jam: rgba(244, 128, 111, 0.55);
  --zf-car0: #a5b4fc;
  --zf-car1: #f2b45a;
  --zf-car2: #f4806f;
  --zf-deck: #3a3660;
  --zf-heat-0: #1d1a36;
  --zf-heat-1: #2f2b6e;
  --zf-heat-2: #5149b8;
  --zf-heat-3: #8f8af0;
  --zf-heat-4: #dcdcff;
  --zf-heat-line: rgba(22, 19, 41, 0.9);
}

/* ---------- frame ---------- */
.zf-fig {
  container-type: inline-size;
  color: var(--zf-text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.92rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.zf-fig *, .zf-pop * { box-sizing: border-box; }
.zf-body {
  background: var(--zf-card);
  border: 1px solid var(--zf-divider);
  border-radius: var(--zf-radius);
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.zf-caption { color: var(--zf-muted); font-size: 0.86rem; line-height: 1.5; margin: 0.55rem 0.15rem 0; }
.zf-grid { display: grid; grid-template-columns: 1fr; gap: 0.85rem; }
@container (min-width: 760px) {
  .zf-grid { grid-template-columns: minmax(0, 1.55fr) minmax(15rem, 1fr); align-items: start; }
  .zf-grid.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.zf-stage { min-width: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.zf-side { min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.zf-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.zf-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; }
.zf-panel { border-top: 1px solid var(--zf-divider); padding-top: 0.7rem; min-width: 0; }
.zf-label { font-size: 0.78rem; font-weight: 600; color: var(--zf-muted); margin: 0 0 0.25rem; }
.zf-big { font-size: 1.9rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.05; }
.zf-big small { font-size: 0.95rem; font-weight: 500; color: var(--zf-muted); letter-spacing: 0; }
.zf-delta { font-size: 0.84rem; font-weight: 600; }
.zf-delta.good { color: var(--zf-good); }
.zf-delta.bad { color: var(--zf-coral); }
.zf-note { margin: 0; font-size: 0.86rem; color: var(--zf-text); min-height: 1.3em; }
.zf-muted { color: var(--zf-muted); }
.zf-kv { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.8rem; margin: 0; font-size: 0.86rem; }
.zf-kv dt { color: var(--zf-muted); }
.zf-kv dd { margin: 0; text-align: right; font-weight: 550; }
.zf-legend { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; font-size: 0.78rem; color: var(--zf-muted); }
.zf-legend i { display: inline-block; width: 0.8rem; height: 0.22rem; border-radius: 2px; vertical-align: middle; margin-right: 0.35rem; background: currentColor; }
.zf-legend i.dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; }
.zf-legend i.dash { background: none; border-top: 2px dashed currentColor; height: 0; }

/* ---------- controls ---------- */
.zf-btn {
  font: 600 0.86rem/1 inherit;
  font-family: inherit;
  padding: 0.55rem 0.9rem;
  border-radius: 7px;
  border: 1px solid var(--zf-accent);
  background: var(--zf-accent);
  color: var(--zf-card);
  cursor: pointer;
}
.zf-btn:hover { filter: brightness(1.08); }
.zf-btn.ghost { background: transparent; color: var(--zf-accent); }
.zf-btn.ghost:hover { background: var(--zf-accent-soft); }
.zf-btn[disabled] { opacity: 0.45; cursor: default; }
.zf-btn[aria-pressed="true"] { background: var(--zf-accent); color: var(--zf-card); }
.zf-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--zf-divider); border-radius: 7px; overflow: hidden; }
.zf-seg button { font: 550 0.82rem/1 inherit; font-family: inherit; border: 0; background: transparent; color: var(--zf-text); padding: 0.5rem 0.75rem; cursor: pointer; }
.zf-seg button + button { border-left: 1px solid var(--zf-divider); }
.zf-seg button[aria-pressed="true"] { background: var(--zf-accent-soft); color: var(--zf-accent); font-weight: 650; }
.zf-slider { display: grid; grid-template-columns: 1fr auto; gap: 0 0.6rem; align-items: baseline; font-size: 0.84rem; }
.zf-slider output { font-weight: 600; }
.zf-slider input { grid-column: 1 / -1; width: 100%; accent-color: var(--zf-accent); margin: 0.25rem 0 0; }
.zf-check { display: flex; align-items: center; gap: 0.45rem; font-size: 0.84rem; cursor: pointer; }
.zf-check input { accent-color: var(--zf-accent); width: 1rem; height: 1rem; }
.zf-drawer { border-top: 1px solid var(--zf-divider); padding-top: 0.6rem; }
.zf-drawer summary { cursor: pointer; font-size: 0.84rem; font-weight: 600; color: var(--zf-muted); }
.zf-drawer[open] summary { margin-bottom: 0.6rem; }
.zf-knobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem 1rem; }
.zf-fig :focus-visible, .zf-pop :focus-visible { outline: 2px solid var(--zf-accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- map ---------- */
.zf-map { position: relative; }
.zf-map svg { display: block; width: 100%; height: auto; }
.zf-land { fill: var(--zf-land); }
.zf-block { fill: var(--zf-block); }
.zf-tree { fill: var(--zf-tree); }
.zf-river { fill: none; stroke: var(--zf-water); stroke-width: 28; stroke-linecap: round; }
.zf-crossing { stroke: var(--zf-deck); stroke-width: 24; stroke-linecap: round; }
.zf-halo { fill: none; stroke-linecap: round; transition: stroke-width 0.35s; }
.zf-halo.calm { stroke: var(--zf-halo-calm); }
.zf-halo.busy { stroke: var(--zf-halo-busy); }
.zf-halo.jam { stroke: var(--zf-halo-jam); }
.zf-road { fill: none; stroke: var(--zf-road); stroke-linecap: round; transition: stroke-width 0.35s; }
.zf-deck-rail { fill: none; stroke: var(--zf-road); stroke-width: 23; stroke-linecap: butt; }
.zf-deck { fill: none; stroke: var(--zf-deck); stroke-width: 18; stroke-linecap: butt; }
.zf-mark { fill: none; stroke: var(--zf-mark); stroke-dasharray: 6 8; opacity: 0.75; }
.zf-chev { fill: none; stroke: var(--zf-mark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.zf-hit { fill: none; stroke: transparent; stroke-linecap: round; cursor: pointer; }
.zf-hit:hover, .zf-hit.selected { stroke: var(--zf-accent-soft); }
.zf-hit.selected { stroke: color-mix(in srgb, var(--zf-accent) 30%, transparent); }
.zf-hit:focus { outline: none; }
.zf-hit:focus-visible { stroke: color-mix(in srgb, var(--zf-accent) 45%, transparent); }
.zf-junction { fill: var(--zf-node); stroke: var(--zf-road); stroke-width: 2.5; }
.zf-home { fill: var(--zf-coral); stroke: var(--zf-road); stroke-width: 2; }
.zf-work { fill: var(--zf-accent); stroke: var(--zf-road); stroke-width: 2; }
.zf-glyph { fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
html[data-theme="dark"] .zf-glyph { stroke: #161329; }
.zf-place { font: 650 11px Inter, system-ui, sans-serif; fill: var(--zf-text); text-anchor: middle; paint-order: stroke; stroke: var(--zf-land); stroke-width: 4px; }
.zf-time text { font: 650 11px Inter, system-ui, sans-serif; fill: var(--zf-text); text-anchor: middle; paint-order: stroke; stroke: var(--zf-land); stroke-width: 4px; }
.zf-time.short text { fill: var(--zf-accent); }
.zf-car { stroke: rgba(15, 13, 30, 0.35); stroke-width: 0.8; }
.zf-car.c0 { fill: var(--zf-car0); }
.zf-car.c1 { fill: var(--zf-car1); }
.zf-car.c2 { fill: var(--zf-car2); }
.zf-route { fill: none; stroke-linecap: round; pointer-events: none; }
.zf-route.lmo-case { stroke: var(--zf-card); stroke-width: 8; opacity: 0.9; }
.zf-route.lmo { stroke: var(--zf-accent); stroke-width: 4; stroke-dasharray: 9 7; animation: zf-march 1s linear infinite; }
.zf-route.drawn { stroke: var(--zf-accent); stroke-width: 5; opacity: 0.22; }
.zf-route.picked { stroke: var(--zf-coral); stroke-width: 6; }
.zf-route.caught { stroke: var(--zf-good); stroke-width: 7; }
.zf-route.missed { stroke: var(--zf-text); stroke-width: 3; stroke-dasharray: 3 7; }
@keyframes zf-march { to { stroke-dashoffset: -18; } }
.zf-badge { cursor: pointer; }
.zf-badge rect { fill: var(--zf-card); stroke: var(--zf-road); stroke-width: 1.4; }
.zf-badge text { font: 700 10px Inter, system-ui, sans-serif; text-anchor: middle; fill: var(--zf-text); }
.zf-label-road { font: 650 11px Inter, system-ui, sans-serif; fill: var(--zf-text); text-anchor: middle; paint-order: stroke; stroke: var(--zf-land); stroke-width: 4px; }
.zf-label-road.r1 { fill: var(--zf-r1); } .zf-label-road.r2 { fill: var(--zf-r2); } .zf-label-road.r3 { fill: var(--zf-r3); }

/* ---------- popover ---------- */
.zf-pop {
  position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 14px));
  background: var(--zf-card); color: var(--zf-text); border: 1px solid var(--zf-divider); border-radius: 9px;
  box-shadow: 0 8px 24px rgba(15, 13, 30, 0.18);
  padding: 0.55rem 0.75rem 0.65rem; width: min(16.5rem, 80vw);
  display: flex; flex-direction: column; gap: 0.45rem;
  font: 400 0.84rem/1.4 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums;
}
.zf-pop[hidden] { display: none; }
.zf-pop.moved { transform: none; z-index: 50; }
.zf-pop-head { display: flex; align-items: center; gap: 0.45rem; cursor: grab; touch-action: none; user-select: none; }
.zf-pop-head strong { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.zf-pop-head:active { cursor: grabbing; }
.zf-grip { width: 9px; height: 13px; flex: none; background: radial-gradient(circle, var(--zf-muted) 1.1px, transparent 1.5px) 0 0 / 4.5px 4.5px; }
.zf-x { border: 0; background: none; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--zf-muted); padding: 0 0.1rem; }
.zf-pop-lanes { display: flex; align-items: center; justify-content: space-between; }
.zf-pop-count { font-size: 0.95rem; }
.zf-pop-count b { font-size: 1.4rem; font-weight: 650; margin-right: 0.1rem; }
.zf-round { width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--zf-accent); background: var(--zf-accent-soft); color: var(--zf-accent); font: 600 1.15rem/1 inherit; cursor: pointer; }
.zf-round:hover { background: var(--zf-accent); color: var(--zf-card); }
.zf-pop-meta { color: var(--zf-muted); font-size: 0.8rem; }
.zf-pop-msg { color: var(--zf-coral); font-size: 0.8rem; }
.zf-pop-msg:empty { display: none; }

/* ---------- charts ---------- */
.zf-chart { display: block; width: 100%; height: auto; overflow: visible; }
.zf-axis text { font: 500 10.5px Inter, system-ui, sans-serif; fill: var(--zf-muted); }
.zf-axis .zf-axis-title { font-weight: 600; }
.zf-axis line { stroke: var(--zf-divider); }
.zf-axis .zf-grid { stroke: var(--zf-divider); stroke-dasharray: 2 3; }
.zf-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke: var(--zf-accent); }
.zf-line.thin { stroke-width: 1.4; }
.zf-line.thick { stroke-width: 3; }
.zf-line.r1 { stroke: var(--zf-r1); } .zf-line.r2 { stroke: var(--zf-r2); } .zf-line.r3 { stroke: var(--zf-r3); }
.zf-line.muted { stroke: var(--zf-muted); }
.zf-line.dash { stroke-dasharray: 5 4; stroke-width: 1.5; }
.zf-ref { stroke: var(--zf-muted); stroke-dasharray: 4 4; stroke-width: 1.2; }
.zf-ref.you { stroke: var(--zf-coral); stroke-width: 1.6; }
.zf-ref-text { font: 600 10.5px Inter, system-ui, sans-serif; fill: var(--zf-muted); }
.zf-ref-text.you { fill: var(--zf-coral); }
.zf-cursor { stroke: var(--zf-text); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0.6; }
.zf-kinkline { stroke: var(--zf-coral); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0.8; }
.zf-kink { fill: var(--zf-coral); stroke: var(--zf-card); stroke-width: 2; }
.zf-here { fill: var(--zf-text); stroke: var(--zf-card); stroke-width: 2; }
.zf-tangent { stroke: var(--zf-text); stroke-width: 1.3; stroke-dasharray: 5 4; opacity: 0.5; }
.zf-chord { stroke: var(--zf-amber); stroke-width: 2.6; stroke-linecap: round; }
.zf-probe { fill: var(--zf-amber); stroke: var(--zf-card); stroke-width: 1.5; }
.zf-share.r1 { fill: var(--zf-r1); } .zf-share.r2 { fill: var(--zf-r2); } .zf-share.r3 { fill: var(--zf-r3); }
.zf-frame { fill: none; stroke: var(--zf-divider); }
.zf-tiny { font: 500 10.5px Inter, system-ui, sans-serif; fill: var(--zf-muted); }
.zf-tiny.strong { fill: var(--zf-text); font-weight: 600; }

/* ---------- commute scale (hero) ---------- */
.zf-scale { position: relative; height: 4.3rem; margin: 0.4rem 1.2rem 0; }
.zf-scale .track { position: absolute; left: 0; right: 0; top: 1.35rem; height: 2px; background: var(--zf-divider); }
.zf-scale .mark { position: absolute; top: 0.95rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-size: 0.7rem; line-height: 1.25; color: var(--zf-muted); white-space: nowrap; }
.zf-scale .mark b { font-weight: 650; color: var(--zf-text); }
.zf-scale .mark.zos b { color: var(--zf-accent); }
.zf-scale .mark::before { content: ''; width: 2px; height: 0.8rem; background: var(--zf-muted); margin-bottom: 0.3rem; }
.zf-scale .mark.zos { color: var(--zf-accent); }
.zf-scale .mark.zos::before { background: var(--zf-accent); }
.zf-scale .now { position: absolute; top: 0.85rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--zf-coral); border: 2px solid var(--zf-card); transform: translateX(-50%); transition: left 0.3s; box-shadow: 0 0 0 1px var(--zf-coral); }
.zf-scale .now-label { position: absolute; top: -0.25rem; transform: translateX(-50%); font-size: 0.72rem; font-weight: 650; color: var(--zf-coral); white-space: nowrap; transition: left 0.3s; }

.zf-routes { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; }
.zf-route-row { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: 0.55rem; }
.zf-route-row .bar { height: 0.45rem; border-radius: 9px; background: linear-gradient(90deg, var(--zf-accent) var(--w), var(--zf-accent-soft) var(--w)); }

/* ---------- scoreboard (playground) ---------- */
.zf-score { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.zf-score > div { border: 1px solid var(--zf-divider); border-radius: 8px; padding: 0.55rem 0.7rem; }
.zf-score .zos { background: var(--zf-accent-soft); }

/* ---------- triangle (landscape, goldstein) ---------- */
.zf-tri { position: relative; width: 100%; }
.zf-tri canvas, .zf-tri svg { display: block; width: 100%; height: auto; }
.zf-tri svg { position: absolute; inset: 0; height: 100%; cursor: crosshair; touch-action: none; }
.zf-tri-label { font: 600 10.5px Inter, system-ui, sans-serif; fill: var(--zf-text); paint-order: stroke; stroke: var(--zf-card); stroke-width: 3.5px; }
.zf-region { font: 600 10.5px Inter, system-ui, sans-serif; fill: var(--zf-text); text-anchor: middle; opacity: 0.85; paint-order: stroke; stroke: color-mix(in srgb, var(--zf-card) 70%, transparent); stroke-width: 3px; }
.zf-kinkcase { fill: none; stroke: var(--zf-text); stroke-width: 3.4; opacity: 0.28; }
.zf-kinkcurve { fill: none; stroke: var(--zf-heat-line); stroke-width: 1.6; stroke-dasharray: 5 4; }
.zf-outline { fill: none; stroke: var(--zf-text); stroke-width: 1.2; opacity: 0.6; }
.zf-path-zos { fill: none; stroke: var(--zf-coral); stroke-width: 2.2; stroke-linejoin: round; }
.zf-path-diff { fill: none; stroke: var(--zf-amber); stroke-width: 2.2; stroke-linejoin: round; stroke-dasharray: 6 3; }
.zf-dot-zos { fill: var(--zf-coral); stroke: var(--zf-card); stroke-width: 1.5; }
.zf-dot-diff { fill: var(--zf-amber); stroke: var(--zf-card); stroke-width: 1.5; }
.zf-probe-pair { stroke: var(--zf-text); stroke-width: 1; opacity: 0.6; }
.zf-probe-dot { fill: var(--zf-card); stroke: var(--zf-text); stroke-width: 1.2; }
.zf-start { fill: var(--zf-card); stroke: var(--zf-text); stroke-width: 2; }
.zf-opt { fill: none; stroke: var(--zf-good); stroke-width: 2.5; }
.zf-opt-sur { fill: none; stroke: var(--zf-amber); stroke-width: 2.5; stroke-dasharray: 3 2; }
.zf-ball { fill: color-mix(in srgb, var(--zf-card) 35%, transparent); stroke: var(--zf-text); stroke-width: 1.4; stroke-dasharray: 4 3; }
.zf-gpt { fill: var(--zf-accent); opacity: 0.55; }
.zf-hull { fill: var(--zf-accent-soft); stroke: var(--zf-accent); stroke-width: 1.5; }
.zf-est { fill: var(--zf-amber); opacity: 0.4; }
.zf-est-mean { fill: var(--zf-amber); stroke: var(--zf-card); stroke-width: 1.5; }
.zf-minnorm { stroke: var(--zf-good); stroke-width: 2.4; marker-end: url(#zf-arrow); }
.zf-arrowhead { fill: var(--zf-good); }
.zf-axis0 { stroke: var(--zf-divider); stroke-width: 1; }

.zf-heatscale { display: grid; grid-template-columns: auto 1fr auto; gap: 0.2rem 0.5rem; align-items: center; font-size: 0.74rem; color: var(--zf-muted); max-width: 22rem; margin: 0.1rem auto 0; }
.zf-heatscale i { height: 0.5rem; border-radius: 3px; background: linear-gradient(90deg, var(--zf-heat-0), var(--zf-heat-1), var(--zf-heat-2), var(--zf-heat-3), var(--zf-heat-4)); border: 1px solid var(--zf-divider); }
.zf-heatscale em { grid-column: 1 / -1; text-align: center; font-style: normal; }

/* ---------- sampling ---------- */
.zf-hand { display: flex; flex-wrap: wrap; gap: 0.3rem; min-height: 1.6rem; }
.zf-chip { border: 1px solid var(--zf-divider); border-radius: 6px; padding: 0.1rem 0.4rem; font-size: 0.76rem; color: var(--zf-muted); }
.zf-chip.pick { border-color: var(--zf-coral); color: var(--zf-coral); font-weight: 650; }
.zf-chip.pick.best { border-color: var(--zf-good); color: var(--zf-good); }
.zf-hist rect.count { fill: var(--zf-block); }
html[data-theme="dark"] .zf-hist rect.count { fill: #3a3566; }
.zf-hist rect.count.opt { fill: var(--zf-good); }
.zf-hist rect.mass { fill: var(--zf-accent); }
.zf-line.us { stroke: var(--zf-muted); } .zf-dot.us { fill: var(--zf-muted); }
.zf-line.ul { stroke: var(--zf-amber); } .zf-dot.ul { fill: var(--zf-amber); }
.zf-line.hl { stroke: var(--zf-accent); } .zf-dot.hl { fill: var(--zf-accent); }
.zf-dot { stroke: var(--zf-card); stroke-width: 1.5; }
.zf-line.exact { stroke: var(--zf-good); }
.zf-legend .us { color: var(--zf-muted); } .zf-legend .ul { color: var(--zf-amber); } .zf-legend .hl { color: var(--zf-accent); } .zf-legend .exact { color: var(--zf-good); }
.zf-legend .r1 { color: var(--zf-r1); } .zf-legend .r2 { color: var(--zf-r2); } .zf-legend .r3 { color: var(--zf-r3); }
.zf-legend .zos { color: var(--zf-coral); } .zf-legend .diff { color: var(--zf-amber); } .zf-legend .opt { color: var(--zf-good); }
.zf-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.zf-table th, .zf-table td { text-align: right; padding: 0.28rem 0.4rem; border-bottom: 1px solid var(--zf-divider); }
.zf-table th:first-child, .zf-table td:first-child { text-align: left; color: var(--zf-muted); font-weight: 500; }
.zf-table th { font-weight: 650; color: var(--zf-text); }

/* ---------- results ---------- */
.zf-bar-diff { fill: var(--zf-muted); opacity: 0.55; }
.zf-bar-zos { fill: var(--zf-accent); }
.zf-bar-sub { fill: var(--zf-amber); }
.zf-bar-label { font: 600 10.5px Inter, system-ui, sans-serif; fill: var(--zf-text); }
.zf-hover { cursor: default; }
.zf-hover:hover { opacity: 0.8; }

/* ---------- compact (poster tiles) ---------- */
.zf-fig.compact .zf-body { padding: 0.65rem; gap: 0.6rem; }
.zf-fig.compact .zf-big { font-size: 1.5rem; }
.zf-fig.compact .zf-hide-compact { display: none; }

@media (prefers-reduced-motion: reduce) {
  .zf-fig *, .zf-pop * { animation: none !important; transition: none !important; }
}
.zf-tri svg:focus-visible { outline: 2px solid var(--zf-accent); outline-offset: 2px; border-radius: 6px; }

/* Versus: ZOS against a short softmin unroll on the Braess toll. */
.zf-plateau { fill: var(--zf-muted); opacity: 0.08; }
.zf-dot-gd { fill: var(--zf-accent); stroke: var(--zf-card); stroke-width: 1.5; }
.zf-trail { opacity: 0.35; stroke: none; }
.zf-line.diffsur { stroke: var(--zf-amber); }
.zf-legend .gd { color: var(--zf-accent); }
.zf-booth rect { fill: var(--zf-amber); stroke: var(--zf-card); stroke-width: 1.5; }
.zf-booth text { font: 700 10.5px Inter, system-ui, sans-serif; fill: #1e1b2e; text-anchor: middle; }
.zf-versus-table td { vertical-align: top; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zf-versus-table td:first-child { white-space: normal; }
.zf-versus-table td:first-child { color: var(--zf-text); font-weight: 600; }
.zf-versus-table tr.best td { color: var(--zf-good); font-weight: 600; }
.zf-cost { font-size: 0.72rem; font-weight: 400; line-height: 1.3; margin-top: 0.1rem; max-width: 15rem; }
.zf-swatch { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.4rem; vertical-align: 0.02rem; }
.zf-swatch.zos { background: var(--zf-coral); } .zf-swatch.diff { background: var(--zf-amber); } .zf-swatch.gd { background: var(--zf-accent); }
.zf-versus-note { min-height: 2.6em; }
.zf-leader { stroke: var(--zf-muted); stroke-width: 1; }

/* The TL;DR race: one chart, then the city under each method's toll, side by side. */
.zf-cities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.zf-city { padding: 0.75rem; border: 1px solid var(--zf-divider); border-radius: 10px; border-top: 3px solid; }
.zf-city.zos { border-top-color: var(--zf-coral); }
.zf-city.diff { border-top-color: var(--zf-amber); }
.zf-city .zf-racer { margin-bottom: 0.5rem; flex-wrap: wrap; }
.zf-split { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--zf-text); }
@media (max-width: 700px) { .zf-cities { grid-template-columns: 1fr; } }
.zf-racer { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.zf-racer .dot { align-self: center; width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.zf-racer.zos .dot, .zf-city.zos .dot { background: var(--zf-coral); }
.zf-racer.diff .dot, .zf-city.diff .dot { background: var(--zf-amber); }
.zf-racer > span:first-of-type { font-weight: 600; }
.zf-racer b { font-weight: 600; }
.zf-chord.zos { stroke: var(--zf-coral); opacity: 0.45; stroke-width: 4; }