/* Widgets of the "How it works" stories (js/widgets.js). Owner: track C.
   Plain inline SVG: at most 140 px high in the column, one line on phones.
   Colours only from the tokens in css/styles.css :root: --blue, --red, --panelLight (old name --nir),
   --accent, --accent-ink, --ink, --muted, --line, --chip, --warn, and --panel-solid for dark text on the
   bright spectrum bands.
   build.mjs inlines this file like css/styles.css. */

/* ---------- shared ---------- */
.vw{position:relative;width:100%;min-width:0;font-size:.69rem;line-height:1.3;color:var(--muted);font-variant-numeric:tabular-nums;text-align:left}
.vw svg{display:block;overflow:visible}
.vw text{font-family:inherit}
.vw button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
/* the one-line phone form: 24 px high */
.vw--compact{display:flex;align-items:center;gap:7px;height:24px;white-space:nowrap}
.vwLine{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vw--compact .vwLine{font-size:.72rem}

.vwFill-blue{fill:var(--blue)}
.vwFill-red{fill:var(--red)}
.vwFill-panel{fill:var(--panelLight)}
.vwFill-accent{fill:var(--accent)}
.vwFill-warn{fill:var(--warn)}
.vwFill-dim{fill:var(--muted);opacity:.3}
.vwT-blue{color:var(--blue)}
.vwT-red{color:var(--red)}
.vwT-panel{color:var(--panelLight)}
.vwT-accent{color:var(--accent-ink)}
.vwT-warn{color:var(--warn)}

/* Illustrative / Where we are going */
.vwBadgeSlot{flex:none;display:inline-flex}
.vwBadgeSlot:empty{display:none}
.vwBadge{display:inline-block;font-size:.62rem;font-weight:500;line-height:1;padding:.24rem .5rem;border-radius:999px;white-space:nowrap}
.vwBadge--illustrative{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 38%,transparent)}
.vwBadge--roadmap{color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 38%,transparent)}

/* diagram nodes and links (hub, market) */
.vwNodeBox{fill:var(--chip);stroke:var(--line);stroke-width:1}
.vwNode.is-focus .vwNodeBox{fill:color-mix(in srgb,var(--accent) 12%,transparent);stroke:var(--accent)}
.vwNode.is-off .vwNodeBox{fill:none;stroke-dasharray:3 3}
.vwNode.is-off text{opacity:.5}
.vw .vwNodeName{font-size:10.5px;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.vw .vwNodeSub{font-size:9.5px;fill:var(--muted);text-anchor:middle;dominant-baseline:central}
.vwLink{fill:none;stroke:var(--accent);stroke-width:1.6}
.vwLinkGrid{stroke-width:2}
.vwLinkThick{stroke-width:2.6}
.vwLinkThin{stroke-width:1.1}
.vwLink.is-off{stroke:var(--muted);stroke-dasharray:3 3;opacity:.55}
.vwHead{fill:var(--accent)}
/* one-line diagrams: words joined by small arrows; the focused one is a pill. Text shrinks with an
   ellipsis on the narrowest phones rather than spilling out of the caption card. */
.vw--compact:not(.vw-timeline){overflow:hidden}
.vwWord{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-size:.7rem;line-height:1.2}
.vwPill{padding:.16rem .5rem;border-radius:999px;border:1px solid var(--line)}
.vwPill.is-focus{border-color:color-mix(in srgb,var(--accent) 70%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.vw-market .vwPill{flex-shrink:10}
.vwMiniArrow{flex:none;width:16px;height:10px}
.vwMiniArrow path{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.vwMiniArrow.is-off path{stroke:var(--muted);stroke-dasharray:2 2}

/* ---------- spectrum ---------- */
.vwSpec{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:8px;row-gap:4px;align-items:center}
.vwSpecLbl{white-space:nowrap}
.vwSpec svg{width:100%}
.vwSpecSun{height:6px}
.vwSunBar{fill:var(--ink);opacity:.32}
.vwSunUV{fill:var(--panel-solid);opacity:.6}
.vwSpecLane{height:16px}
.vwTrack{fill:var(--chip)}
.vw .vwBandName{font-size:9.5px;font-weight:500;fill:var(--panel-solid);text-anchor:middle;dominant-baseline:central}
.vwSpecAxis{height:12px}
.vw .vwSpecAxis text{font-size:9.5px;fill:var(--muted);text-anchor:middle}
.vwTick{stroke:var(--muted);stroke-width:1;opacity:.6}
.vwSpecMini{flex:none;width:44px;height:10px}

/* ---------- compare ---------- */
/* spacious (1-2 metrics): side label | bar | value, aligned across the metrics */
.vwCmp.is-spacious{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;column-gap:8px;row-gap:3px;align-items:center}
.vwCmpHead{grid-column:1/-1;display:flex;align-items:center;gap:8px;min-width:0;margin-top:6px;line-height:16px}
.vwCmpHead:first-child{margin-top:0}
.vwCmp .vwCmpName,.vwCmpTitle{flex:1;min-width:0;color:var(--ink);font-size:.74rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vwCmpTitle{color:var(--muted);font-size:.69rem}
.vwCmpDelta{flex:none;color:var(--accent-ink);font-size:.72rem;font-weight:500}
.vwCmpDelta:empty{display:none}
.vwCmpRow{display:contents}
.vwCmpSide{font-size:.66rem;white-space:nowrap}
.vwCmpRow.is-with .vwCmpSide{color:var(--accent-ink)}
.vwCmpBar{width:100%;height:7px}
.vwCmpTrack{fill:var(--chip)}
.vwCmpFill.is-without{fill:var(--muted)}
.vwCmpFill.is-with{fill:var(--accent)}
.vwCmp .vwV-without,.vwCmp .vwV-with{color:var(--ink);font-size:.72rem;text-align:right;white-space:nowrap}
/* dense (3 metrics): a key line, then per metric "label   40 → 15 %" over two thin bars */
.vwCmp.is-dense{display:flex;flex-direction:column}
.vwCmp.is-dense .vwCmpHead{margin-top:5px}
.vwCmp.is-dense .vwCmpHead:first-child{margin-top:0}
.vwCmpKeys{gap:12px}
.vwKey{display:inline-flex;align-items:center;gap:5px;font-size:.66rem;white-space:nowrap}
.vwKey::before{content:"";width:12px;height:4px;border-radius:2px;background:var(--muted)}
.vwKey.is-with{color:var(--accent-ink)}
.vwKey.is-with::before{background:var(--accent)}
.vwCmpKeys .vwBadgeSlot{margin-left:auto}
.vwCmpVals{flex:none;white-space:nowrap}
.vwCmp.is-dense .vwV-without{color:var(--muted)}
.vwCmp.is-dense .vwV-with{color:var(--accent-ink);font-weight:500}
.vwCmpPair{width:100%;height:10px;margin-top:2px}
/* compact: "Leaf temperature 29 → 27 °C" */
.vw--compact .vwCmpName{color:var(--ink)}
.vw--compact .vwV-with{color:var(--accent-ink);font-weight:500}
.vwArrow{color:var(--muted)}
/* a section control (Without | With Voltiron) highlights its side */
.vwCmpRow > *,.vwCmpFill,.vwV-without,.vwV-with,.vwKey{transition:opacity .2s ease}
.vw-compare.is-with .is-spacious .vwCmpRow.is-without > *,.vw-compare.is-without .is-spacious .vwCmpRow.is-with > *,
.vw-compare.is-with .is-dense :is(.vwCmpFill.is-without,.vwKey.is-without,.vwV-without),
.vw-compare.is-without .is-dense :is(.vwCmpFill.is-with,.vwKey.is-with,.vwV-with),
.vw-compare.is-with .vwLine .vwV-without,.vw-compare.is-without .vwLine .vwV-with{opacity:.4}
.vw-compare.is-without .vwCmpRow.is-without .vwCmpSide,.vw-compare.is-with .vwCmpRow.is-with .vwCmpSide{font-weight:500}

/* ---------- timeline ---------- */
.vwTl{position:relative;height:60px}
.vwTlSvg{position:absolute;left:0;top:0;width:100%;height:100%}
.vwTlTrack{fill:var(--chip)}
.vwTlDay{fill:var(--line)}
.vwTlDot{fill:var(--panel-solid);stroke:var(--muted);stroke-width:1.4}
.vwTlDot.is-done{fill:var(--accent);stroke:none;opacity:.5}
.vwTlDot.is-current{fill:var(--accent);stroke:var(--accent-ink);stroke-width:2}
/* a moment: name and time, above the strip (is-up) or below it (is-down); the button reaches the strip */
.vwTl .vwTlMoment{position:absolute;left:0;height:30px;width:max-content;display:flex;flex-direction:column;align-items:center;padding:0 3px;line-height:1.15;white-space:nowrap;border-radius:6px}
.vwTl .vwTlMoment.is-up{top:0}
.vwTl .vwTlMoment.is-down{top:30px;flex-direction:column-reverse}
.vwTlName{font-size:.66rem}
.vwTlTime{font-size:.6rem;opacity:.75}
.vwTl .vwTlMoment:hover,.vwTl .vwTlMoment.is-current{color:var(--ink)}
.vwTlMoment.is-current .vwTlName{font-weight:500}
.vwTl .vwTlMoment.is-tight{width:18px;padding:0}
.vwTlMoment.is-tight span{display:none}
/* live marker at state.time: an element as wide as the strip, moved by translateX(%) (js) */
.vwTlMarkerLayer{position:absolute;left:-3px;right:-3px;top:21px;height:18px;overflow:hidden;pointer-events:none}
.vwTlMarker{position:absolute;top:0;bottom:0;left:3px;right:3px;transition:transform .15s linear}
.vwTlMarker.is-jump{transition:none}
.vwTlMarker::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;border-radius:1px;background:var(--ink)}
.vw--compact .vwTlNow{flex:none;min-width:4.6em;color:var(--ink);font-size:.72rem;font-weight:500}
.vwTlSegs{flex:1;display:flex;gap:4px;min-width:0;height:100%;align-items:center}
.vw .vwTlSeg{flex:1;min-width:0;height:20px;display:flex;align-items:center}
.vwTlSeg svg{width:100%;height:4px}
.vwTlSegTrack{fill:var(--chip)}
.vwTlSegFill{fill:var(--accent)}
.vwTlSeg.is-done .vwTlSegFill{opacity:.45}

/* ---------- hub, market ---------- */
.vwHub,.vwMkt{width:100%}
.vwHub{height:106px}
.vwMkt{height:96px}
.vwHubPv{flex:0 10 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:.68rem}
.vwHubPv.is-off{opacity:.5}
.vwSite{fill:var(--chip);stroke:var(--muted);stroke-width:1.2;stroke-linejoin:round}
.vwSite.is-self{fill:color-mix(in srgb,var(--accent) 22%,transparent);stroke:var(--accent)}
.vwLinkSite{stroke-width:1.2;opacity:.8}
.vwMktMini{flex:none;width:30px;height:12px}

/* ---------- readout ---------- */
.vw-readout{display:flex;gap:16px}
.vwRo{display:flex;align-items:center;gap:8px;min-width:0}
.vwGauge{flex:none}
.vwGaugeTilt{width:40px;height:34px}
.vwGaugeHead{width:34px;height:34px}
.vwGaugeRef{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 2;opacity:.5}
.vwGaugeRange{fill:none;stroke:var(--line);stroke-width:5;stroke-linecap:round}
.vwGaugeRing{fill:none;stroke:var(--line);stroke-width:1.5}
.vwGaugePivot{fill:var(--ink)}
.vwNeedle{stroke:var(--accent-ink);stroke-width:2.4;stroke-linecap:round;transform-origin:20px 15px;transition:transform .15s linear}
.vwNeedleHead{fill:var(--accent-ink);transform-origin:17px 17px;transition:transform .15s linear}
.vwRoText{display:flex;flex-direction:column;min-width:0}
.vwRoVal{order:-1;color:var(--ink);font-size:1.05rem;font-weight:500;letter-spacing:-.01em;line-height:1.15}
.vwRoLbl{font-size:.7rem}
.vwRoRange{font-size:.62rem;opacity:.8}
.vw-readout.vw--compact{gap:12px}
.vw--compact .vwRo{gap:5px}
.vw--compact .vwGaugeTilt{width:22px;height:19px}
.vw--compact .vwGaugeHead{width:17px;height:17px}
.vw--compact .vwRoText{flex-direction:row;align-items:baseline;gap:4px}
.vw--compact .vwRoVal{order:0;font-size:.78rem}

/* ---------- note ---------- */
.vwNote{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px;font-size:.78rem;line-height:1.35}
.vwNote li{min-width:0}
.vwNoteLabel{color:var(--muted)}
.vwNoteValue{color:var(--ink);font-weight:500}

/* reduced motion: no easing anywhere in a widget; the marker, needles and highlights jump (the system
   setting, or ?motion=reduce through .vw--still). Last in the file, so it wins over the rules above. */
.vw--still *{transition:none}
@media (prefers-reduced-motion: reduce){
  .vw *{transition:none}
}