/* Figure 1 on /tvc: the Anatomy kit's drawing rules (MIT) with its tokens
   mapped onto the site palette. Light on .tv-fig, dark in the one media query.
   The greys are the kit's ramp re-based on --fill; the blue, ink and orange
   tints mix the site's own tokens. */
.tv-fig {
  --tv-hi: #262626; --tv-mid: #878787; --tv-lo: #adadad; --tv-faint: #cfcfcf;
  --anatomy-hi: var(--tv-hi); --anatomy-mid: var(--tv-mid); --anatomy-lo: var(--tv-lo); --anatomy-faint: var(--tv-faint);
  --anatomy-paper: var(--fill); --anatomy-face: #ffffff; --anatomy-top: #fcfcfc;
  --anatomy-shade-0: #d9d9d9; --anatomy-shade-1: #e2e2e2; --anatomy-shade-2: #e9e9e9; --anatomy-shade-3: #efefef;
  --anatomy-lit-top: #ffffff; --anatomy-lit-shade: #e6e6e6; --anatomy-lit: var(--ink);
  --anatomy-halo: #8a8a8a; --anatomy-halo-opacity: .26; --anatomy-dot: #3a3a3a;
  --anatomy-weight: .6px; --anatomy-mono: var(--mono);
  --tv-glass-shine: var(--anatomy-top);
  --tv-s-face: 8%; --tv-s-top: 14%; --tv-s-shade: 28%;
}
@media (prefers-color-scheme: dark) {
  .tv-fig {
    --tv-hi: #d8d8d8; --tv-mid: #707070; --tv-lo: #454545; --tv-faint: #2d2d2d;
    --anatomy-face: #1f1f1f; --anatomy-top: #222222;
    --anatomy-shade-0: #0f0f0f; --anatomy-shade-1: #131313; --anatomy-shade-2: #171717; --anatomy-shade-3: #1b1b1b;
    --anatomy-lit-top: #3a3a3a; --anatomy-lit-shade: #2a2a2a;
    --anatomy-halo: #000000; --anatomy-halo-opacity: .9; --anatomy-dot: #e6e6e6;
    --tv-glass-shine: #4a4a4a;
    --tv-s-face: 34%; --tv-s-top: 46%; --tv-s-shade: 60%;
  }
}
.iso-svg{display:block;width:100%;height:auto;overflow:visible}
.iso-svg path,.iso-svg circle{vector-effect:non-scaling-stroke}
.iso-fill{fill:var(--anatomy-paper);stroke:none}
.iso-solid[data-lit]>.iso-fill{fill:var(--anatomy-face)}
.iso-shade,.iso-top{stroke:none}
.iso-shade[data-shade="0"]{fill:var(--anatomy-shade-0)}
.iso-shade[data-shade="1"]{fill:var(--anatomy-shade-1)}
.iso-shade[data-shade="2"]{fill:var(--anatomy-shade-2)}
.iso-shade[data-shade="3"]{fill:var(--anatomy-shade-3)}
.iso-top{fill:var(--anatomy-top)}
.iso-solid[data-lit]>.iso-top{fill:var(--anatomy-lit-top)}
.iso-solid[data-lit]>.iso-shade{fill:var(--anatomy-lit-shade)}
.iso-solid[data-seamless]>.iso-shade,.iso-solid[data-seamless]>.iso-top{stroke-width:.4;stroke-linejoin:round}
.iso-solid[data-seamless]>.iso-shade[data-shade="0"]{stroke:var(--anatomy-shade-0)}
.iso-solid[data-seamless]>.iso-shade[data-shade="1"]{stroke:var(--anatomy-shade-1)}
.iso-solid[data-seamless]>.iso-shade[data-shade="2"]{stroke:var(--anatomy-shade-2)}
.iso-solid[data-seamless]>.iso-shade[data-shade="3"]{stroke:var(--anatomy-shade-3)}
.iso-solid[data-seamless]>.iso-top{stroke:var(--anatomy-top)}
.iso-solid[data-seamless][data-lit]>.iso-top{stroke:var(--anatomy-lit-top)}
.iso-solid[data-seamless][data-lit]>.iso-shade{stroke:var(--anatomy-lit-shade)}
.iso-solid[data-lit]>.iso-edge{stroke:var(--anatomy-lit)}
.iso-halo{fill:var(--anatomy-halo);stroke:none;filter:blur(9px);opacity:var(--anatomy-halo-opacity);transform:translateY(3px)}
.iso-line{fill:none;stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);stroke-linecap:round;stroke-linejoin:round}
.iso-line[data-tone="hi"]{stroke:var(--anatomy-hi)}
.iso-line[data-tone="mid"]{stroke:var(--anatomy-mid)}
.iso-line[data-tone="lo"]{stroke:var(--anatomy-lo)}
.iso-line[data-tone="faint"]{stroke:var(--anatomy-faint)}
.iso-line[data-tone="lit"]{stroke:var(--anatomy-lit)}
.iso-line[data-tone="red"]{stroke:var(--anatomy-red)}
.iso-line[data-tone="green"]{stroke:var(--anatomy-green)}
.iso-line[data-tone="blue"]{stroke:var(--anatomy-blue)}
.iso-line[data-dotted]{stroke-dasharray:.01 3.5;stroke-width:1}
.iso-line[data-dashed]{stroke-dasharray:3 3}
.iso-line[data-flow]{stroke-dasharray:2 6}
.iso-wire-end{fill:var(--anatomy-paper);stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight)}
.iso-wire[data-tone="hi"] .iso-wire-end{stroke:var(--anatomy-hi)}
.iso-wire[data-tone="mid"] .iso-wire-end{stroke:var(--anatomy-mid)}
.iso-wire[data-tone="faint"] .iso-wire-end{stroke:var(--anatomy-faint)}
.iso-wire[data-tone="lit"] .iso-wire-end{stroke:var(--anatomy-lit)}
.iso-dots circle{fill:var(--anatomy-dot);stroke:none;opacity:.32}
.iso-dots[data-tone="hi"] circle{opacity:.85}
.iso-dots[data-tone="mid"] circle{opacity:.45}
.iso-dots[data-tone="lo"] circle{opacity:.22}
.iso-dots[data-tone="faint"] circle{opacity:.12}
.tb-body{fill:var(--anatomy-shade-2);stroke:none}
.tb-shine{fill:var(--anatomy-top);stroke:none}
.tb-shade{fill:var(--anatomy-shade-0);stroke:none}
.tb-ring{fill:none;stroke:var(--anatomy-lo);stroke-width:.45;stroke-linecap:butt;stroke-linejoin:round}
.tb-ring[data-tone="mid"]{stroke:var(--anatomy-mid)}
.tb-ring[data-tone="faint"]{stroke:var(--anatomy-faint)}
.tb-ring[data-tone="hi"]{stroke:var(--anatomy-hi)}
@keyframes iso-flow{to{stroke-dashoffset:-32}}
.iso-line[data-flow]{animation:iso-flow 1600ms linear infinite}
.iso-dots circle[data-pulse]{animation:iso-pulse 1600ms steps(1,end) infinite;animation-delay:var(--pulse-at,0ms)}
@media (prefers-reduced-motion:reduce){.iso-line[data-flow],.iso-dots circle[data-pulse]{animation:none}}
.tv-stage { position: relative; border-radius: var(--r-sm); touch-action: manipulation; }
.tv-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.tv-stage svg { display: block; width: 100%; height: auto; overflow: visible; }
/* glass: the back of the tube, then what rides inside it, then the front shine and edges */
.tv-glass .tb-body { fill: var(--anatomy-shade-1); fill-opacity: .22; }
.tv-glass .tb-shade { fill: var(--anatomy-shade-0); opacity: .45; }
.tv-glass .tb-shine { fill: var(--tv-glass-shine); opacity: .9; }
.tv-glass-back .tb-shine, .tv-glass-back .tb-edge { display: none; }
.tv-glass-front .tb-body, .tv-glass-front .tb-shade { display: none; }
.tv-cable .tb-body { fill: var(--anatomy-shade-1); }
.tv-window { fill: var(--anatomy-shade-0); stroke: none; }
.tv-recess { fill: var(--anatomy-shade-1); stroke: none; }
.tv-digit { fill: var(--anatomy-hi); font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; }
.tv-flow { display: none; stroke: var(--accent); }
.tv-fig .tv-flow[data-part="flow-up"] { stroke: var(--accent); }
.tv-fig .tv-flow[data-part="flow-down"] { stroke: var(--anatomy-hi); }
.tv-fig[data-nosample] .tv-flow[data-part="flow-up"] { stroke: var(--fault); }
.tv-fig[data-flow] .tv-flow { display: inline; }
.tv-fault-dot circle { fill: var(--fault); opacity: 1; }
/* canisters: S[k] blue, A[k] solid, a frame with no sample or the SENSOR_LOST command orange */
.tv-can[data-kind="s"] { --anatomy-lit: var(--accent); --anatomy-lit-top: color-mix(in srgb, var(--accent) var(--tv-s-top), var(--ground)); --anatomy-lit-shade: color-mix(in srgb, var(--accent) var(--tv-s-shade), var(--ground)); --anatomy-face: color-mix(in srgb, var(--accent) var(--tv-s-face), var(--ground)); }
.tv-can[data-kind="a"] { --anatomy-lit: var(--ink); --anatomy-lit-top: color-mix(in srgb, var(--ink) 66%, var(--fill)); --anatomy-lit-shade: color-mix(in srgb, var(--ink) 82%, var(--fill)); --anatomy-face: color-mix(in srgb, var(--ink) 74%, var(--fill)); }
.tv-can[data-kind="held"] { --anatomy-lit: var(--anatomy-hi); --anatomy-lit-top: var(--anatomy-top); --anatomy-lit-shade: var(--anatomy-shade-2); --anatomy-face: var(--anatomy-face); }
.tv-can[data-kind="empty"], .tv-can[data-kind="end"] { --anatomy-lit: var(--fault); --anatomy-lit-top: color-mix(in srgb, var(--fault) 16%, var(--ground)); --anatomy-lit-shade: color-mix(in srgb, var(--fault) 30%, var(--ground)); --anatomy-face: color-mix(in srgb, var(--fault) 9%, var(--ground)); }
.tv-can[data-kind="empty"] { --anatomy-lit-top: var(--anatomy-top); --anatomy-lit-shade: var(--anatomy-shade-2); --anatomy-face: var(--anatomy-face); }
.tv-lamp[data-lit] .iso-top, .tv-lamp[data-lit] .iso-shade, .tv-lamp[data-lit] .iso-fill { fill: var(--anatomy-hi); stroke: var(--anatomy-hi); }
.tv-lamp[data-lit][data-fault] .iso-top, .tv-lamp[data-lit][data-fault] .iso-shade, .tv-lamp[data-lit][data-fault] .iso-fill { fill: var(--fault); stroke: var(--fault); }
/* the hover legend: the named part's lines step up one tone */
.tv-fig [data-on] { --anatomy-mid: var(--tv-hi); --anatomy-lo: var(--tv-mid); --anatomy-faint: var(--tv-lo); }
.tv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s4); font: 400 0.8125rem/1.4 var(--sans); }
.tv-controls { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.tv-controls[hidden] { display: flex; visibility: hidden; }
.tv-seg { display: inline-flex; gap: 2px; }
.tv-controls button { white-space: nowrap; font: inherit; color: var(--ink); background: var(--fill-2); border-radius: 999px; padding: 0.3rem 0.75rem; cursor: pointer; }
.tv-seg button:first-child { border-radius: 999px 4px 4px 999px; }
.tv-seg button:last-child { border-radius: 4px 999px 999px 4px; }
.tv-seg button:not(:first-child):not(:last-child) { border-radius: 4px; }
.tv-controls button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.tv-controls button:focus-visible, .tv-parts summary:focus-visible, .tv-cap summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tv-hint { align-self: center; color: var(--muted); }
.tv-hint-touch { display: none; }
@media (hover: none) { .tv-hint-pointer { display: none; } .tv-hint-touch { display: inline; } }
.tv-kind, .tv-readout { flex: 1 0 100%; margin: 0; }
.tv-kind { color: var(--muted); }
.tv-kind b { font-weight: 600; color: var(--note); }
.tv-readout { color: var(--note); font-variant-numeric: tabular-nums; min-height: 2.8em; }
.tv-fig[data-hover] .tv-readout { color: var(--ink); }
.tv-parts { flex: 1 0 100%; color: var(--note); }
.tv-parts summary { cursor: pointer; color: var(--muted); width: max-content; }
/* the caption opens from its title; the sources stay visible below it */
.tv-cap summary { cursor: pointer; width: max-content; max-width: 100%; }
.tv-cap p { margin-top: var(--s2); }
.tv-parts dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s4); margin-top: var(--s3); }
.tv-parts dt { font-weight: 600; color: var(--ink); }
.tv-parts dd { margin: 0; }
.tv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 47.99rem) { .tv-parts dl { grid-template-columns: 1fr; } .tv-parts dd { margin-bottom: var(--s2); } }
@media (max-width: 30rem) { .tv-readout { min-height: 4.2em; } }