/* Tool visuals (Lee t96u, 30 Oct 2026): hero illustrations, charts, infographics and how-it-works diagrams on /tools pages.
   Markup comes from scripts/tool_visuals.py. Inline SVG coloured only through these classes, so dark and light themes both work
   and the CSP (style-src 'self') is respected: no style attributes anywhere. */
:root{--tv-1:var(--b);--tv-2:var(--g);--tv-3:#f5c542;--tv-bad:#ff6b8b;--tv-warn:#f5c542;--tv-on:#0b0d14;--tv-track:rgba(143,151,173,.16)}
[data-theme="light"]{--tv-3:#c98a00;--tv-bad:#d6334f;--tv-warn:#b97800;--tv-on:#ffffff;--tv-track:rgba(91,99,119,.12)}
.tv-fig{margin:1.2rem 0 0;padding:1rem;border:1px solid var(--line);border-radius:18px;background:var(--card);min-width:0;max-width:100%;box-sizing:border-box}
@media (min-width:700px){.tv-fig{padding:1.3rem 1.4rem}}
.tv-fig figcaption{margin-top:.8rem;font-size:.86rem;line-height:1.55;color:var(--soft-ink)}
.tv-fig figcaption a{color:var(--b-soft);text-underline-offset:2px;overflow-wrap:anywhere}
.tv-svg{display:block;width:100%;height:auto;max-width:640px;font-family:var(--sans)}
.tv-hero{margin-top:1.4rem;max-width:640px;background:transparent;border:0;padding:0}
.tv-hero figcaption{font-size:.8rem;color:var(--mut)}
.tv-n{display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--b);color:var(--tv-on);font-size:.7rem;font-weight:700;margin:0 .15rem 0 .35rem;vertical-align:.05em}
.tv-n:first-child{margin-left:0}
.tv-sec{content-visibility:auto;contain-intrinsic-size:auto 640px}
/* SVG paint */
.tv-ink{fill:var(--ink)}.tv-mut{fill:var(--mut)}.tv-on{fill:var(--tv-on)}.tv-b{fill:var(--b)}.tv-g{fill:var(--g)}.tv-y{fill:var(--tv-3)}
.tv-inkf{fill:var(--ink)}.tv-o{opacity:.55}
.tv-c1{fill:var(--tv-1)}.tv-c2{fill:var(--tv-2)}.tv-c3{fill:var(--tv-3)}
.tv-c1s{stroke:var(--tv-1)}.tv-c2s{stroke:var(--tv-2)}.tv-c3s{stroke:var(--tv-3)}
.tv-soft{fill:var(--line)}
.tv-heroh{fill:var(--card);stroke:var(--hair);stroke-width:1.5}
.tv-cardr{fill:var(--bg);stroke:var(--line);stroke-width:1.5}
.tv-num{fill:var(--b)}
.tv-frame{fill:var(--card);stroke:var(--mut);stroke-width:2}
.tv-dash{fill:none;stroke:var(--mut);stroke-width:2;stroke-dasharray:5 4}
.tv-ring{fill:none;stroke:var(--b);stroke-width:6}
.tv-arw{fill:none;stroke:var(--b);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.tv-tick{fill:none;stroke:var(--tv-on);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.tv-axisg{fill:none;stroke:var(--mut);stroke-width:2}
.tv-curve{fill:none;stroke:var(--g);stroke-width:5;stroke-linecap:round}
.tv-finder{fill:none;stroke:var(--ink);stroke-width:5}
.tv-glassr{fill:rgba(255,255,255,.22);stroke:rgba(255,255,255,.55);stroke-width:1.5}
[data-theme="light"] .tv-glassr{fill:rgba(255,255,255,.55);stroke:rgba(22,26,38,.18)}
.tv-sh2{fill:var(--mut);opacity:.25}.tv-sh3{fill:var(--mut);opacity:.14}
.tv-gradbar{fill:var(--b)}
.tv-outline{fill:none;stroke-width:3}
.tv-sw{stroke:var(--line);stroke-width:1}
.tv-track{fill:var(--tv-track)}
.tv-bar{fill:var(--b)}
.tv-good{fill:var(--g)}.tv-ok{fill:var(--b)}.tv-warn{fill:var(--tv-warn)}.tv-bad{fill:var(--tv-bad)}.tv-pal{fill:var(--b-soft)}
.tv-g1{fill:var(--b)}.tv-g2{fill:var(--g)}.tv-g3{fill:var(--tv-3)}.tv-g4{fill:var(--b-soft)}.tv-g5{fill:var(--tv-bad)}.tv-g6{fill:var(--mut)}
.tv-mark{stroke:var(--mut);stroke-width:1.5;stroke-dasharray:4 4}
.tv-plot{fill:none;stroke:var(--line);stroke-width:1.5}
.tv-grid{stroke:var(--line);stroke-width:1}
.tv-axis{stroke:var(--line);stroke-width:2}
.tv-dot{stroke:var(--card);stroke-width:2}
.tv-ln{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.tv-s1{stroke:var(--mut);stroke-dasharray:6 5}.tv-s2{stroke:var(--b)}.tv-s3{stroke:var(--g)}.tv-s4{stroke:var(--tv-3)}.tv-s5{stroke:var(--tv-bad)}
.tv-legend{display:flex;flex-wrap:wrap;gap:.35rem 1rem;list-style:none;margin:.7rem 0 0;padding:0;font-size:.82rem;color:var(--soft-ink)}
.tv-legend li{display:flex;align-items:center;gap:.4rem}
.tv-key{width:18px;height:4px;border-radius:2px;flex:none;background:var(--b)}
.tv-k1{background:var(--mut)}.tv-k2{background:var(--b)}.tv-k3{background:var(--g)}.tv-k4{background:var(--tv-3)}.tv-k5{background:var(--tv-bad)}.tv-kok{background:var(--b);height:10px}.tv-kgood{background:var(--g);height:10px}
/* Data tables (the text equivalent of each chart) */
.tv-data{margin-top:.8rem;border-top:1px solid var(--line);padding-top:.6rem}
.tv-data summary{cursor:pointer;font-size:.86rem;font-weight:600;color:var(--b-soft);min-height:32px;display:flex;align-items:center}
.tv-tw{overflow-x:auto;max-width:100%;margin-top:.5rem}
.tv-data table{width:100%;border-collapse:collapse;font-size:.8rem;line-height:1.4}
.tv-data th,.tv-data td{text-align:left;padding:.4rem .45rem;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:break-word}
.tv-data thead th{color:var(--mut);font-weight:600}
.tv-data tbody th{font-weight:600;color:var(--ink)}
/* How-it-works flow (HTML/CSS: a column on phones, a row on wider screens) */
.tv-flow{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.tv-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.2rem}}
.tv-step{position:relative;padding:.9rem 1rem;border-radius:14px;border:1px solid var(--line);background:var(--bg);display:grid;gap:.3rem;min-width:0}
.tv-step-1{border-color:var(--hair);background:var(--tint-b)}
.tv-step-k{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--b-soft)}
.tv-step-1 .tv-step-k{color:var(--g)}
.tv-step-v{font-size:.92rem;line-height:1.45;color:var(--ink)}
.tv-step+.tv-step::before{content:"";position:absolute;left:50%;top:-1.25rem;width:10px;height:10px;margin-left:-5px;border-right:2.5px solid var(--b);border-bottom:2.5px solid var(--b);transform:rotate(45deg)}
@media (min-width:760px){.tv-step+.tv-step::before{left:-1.55rem;top:50%;margin:-5px 0 0;transform:rotate(-45deg)}}
.tv-flow-k{margin:1.2rem 0 .5rem;font-size:.8rem;font-weight:600;color:var(--mut)}
.tv-stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.tv-stage{text-align:center;font-size:.74rem;padding:.45rem .1rem;background:var(--tv-track);color:var(--mut);min-width:0;overflow-wrap:anywhere}
.tv-stage:first-child{border-radius:999px 0 0 999px}.tv-stage:last-child{border-radius:0 999px 999px 0}
.tv-stage.on{background:var(--b);color:var(--tv-on);font-weight:700}
/* Infographic bits */
.tv-anatomy{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.tv-anat{display:grid;gap:.3rem;min-width:0;max-width:100%}
.tv-anat code{font-family:var(--mono);font-size:.8rem;padding:.4rem .55rem;border-radius:8px;border:1px solid var(--line);overflow-wrap:anywhere;background:var(--bg)}
.tv-anat span{font-size:.74rem;color:var(--mut)}
.tv-u1 code{border-color:var(--b);color:var(--b-soft)}.tv-u2 code{border-color:var(--g);color:var(--g)}.tv-u3 code{border-color:var(--tv-3);color:var(--tv-3)}.tv-u4 code{border-style:dashed}
.tv-codes{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.tv-code{display:grid;gap:.2rem;padding:.8rem .9rem;border-radius:12px;border:1px solid var(--line);background:var(--bg)}
.tv-code b{font-family:var(--display);font-size:1.5rem;color:var(--b-soft)}.tv-code.perm b{color:var(--g)}
.tv-code span{font-size:.86rem;color:var(--ink)}.tv-code small{font-size:.74rem;color:var(--mut)}
.tv-chips{list-style:none;margin:0 0 .9rem;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.tv-chips li{font-size:.76rem;padding:.25rem .6rem;border-radius:999px;border:1px solid var(--line);color:var(--soft-ink)}
/* /tools index overview */
.tv-overview{margin:1.6rem 0 .5rem}
.tv-ov-h{font-family:var(--display);font-size:clamp(1.3rem,4.5vw,1.7rem);margin:0}
.tv-ov-grid{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.tv-ov-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}}
.tv-joblist{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;counter-reset:job}
.tv-job{display:grid;gap:.35rem;padding:.7rem .8rem;border-radius:12px;background:var(--bg);border:1px solid var(--line);border-left:4px solid var(--b)}
.tv-job-design{border-left-color:var(--g)}.tv-job-build{border-left-color:var(--b-soft)}.tv-job-test{border-left-color:var(--tv-3)}.tv-job-launch{border-left-color:var(--tv-bad)}
.tv-job-h{margin:0;font-weight:600;font-size:.92rem;display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
.tv-job-s{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.tv-job ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.tv-job a{display:inline-flex;align-items:center;min-height:32px;font-size:.8rem;padding:.2rem .6rem;border-radius:999px;border:1px solid var(--hair);color:var(--ink);text-decoration:none;background:var(--tint-b)}
.tv-job a:hover{border-color:var(--b)}
.tv-job a:focus-visible,.tv-data summary:focus-visible{outline:2px solid var(--b);outline-offset:2px}
.tv-sec.tv-force{content-visibility:visible}
.tv-safe{stroke:var(--tv-on)}
.tv-g7{fill:var(--y)}
.tv-g8{fill:var(--tv-3);opacity:.7}
.tv-tw td,.tv-tw th{overflow-wrap:anywhere}