/* Brace For It V2 · rendered tools (tools revamp, Oct 28, 2026). Shared by /car, /shutoffs, /trees, /kit-builder, /power-out.
   "Rendered for how, photographed for what": code-drawn, shaded SVG in overcast daylight, matte neutrals, real object
   colours (v2.css --m-*). Motion: one state change plays once and holds; nothing loops; reduced motion shows the end frame. */

/* the 3-step intro strip (page rule, Oct 25): numbers, one line each, the tool right under it */
.t-intro { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: ti; max-width: 70ch; }
.t-intro li { position: relative; padding-left: 34px; color: var(--ink-2); }
.t-intro li::before { counter-increment: ti; content: counter(ti); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font: 700 13px var(--f-data); color: var(--ink); border: 1.5px solid var(--edge); }
@media (min-width: 900px) { .t-intro { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); max-width: none; } }

/* pickers: a row of pressable options (aria-pressed) */
.pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; padding: 0; border: 0; }
.pick > button { min-height: var(--tap); min-width: 44px; padding: 0 14px; border-radius: var(--r-md); border: 1.5px solid var(--edge); background: transparent; color: var(--ink);
  font: 700 15px var(--f-display); cursor: pointer; }
.pick > button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pick.num > button { font: 700 15px var(--f-data); padding: 0 10px; }
.pick-k { font: 700 var(--t-sm)/1.4 var(--f-display); color: var(--ink-2); width: 100%; }
@media (min-width: 600px) { .pick-k { width: auto; margin-right: 4px; } }

/* the stage a render sits on */
.stage { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(180deg, var(--panel-2), var(--bg)); border: 1px solid var(--line); }
.stage > svg { display: block; width: 100%; height: auto; }
.chip-o { position: absolute; transform: translate(-50%, -50%); font: 700 12px/1 var(--f-data); color: var(--ink); background: rgba(6,10,13,.82); border: 1px solid var(--edge);
  border-radius: 999px; padding: 5px 8px; white-space: nowrap; pointer-events: none; }
.readout { display: grid; gap: 8px; }
.readout .big { font: 700 clamp(30px, 7vw, 44px)/1 var(--f-data); }
.readout p { margin: 0; font-size: var(--t-md); }
.readout .src { font: 500 var(--t-xs)/1.5 var(--f-data); color: var(--muted); }
.readout .src a { color: var(--ink-2); }

/* materials: gradient stops and fills reference --m-* only */
.rnd .s-paint-0 { stop-color: var(--m-paint-3); } .rnd .s-paint-1 { stop-color: var(--m-paint-2); } .rnd .s-paint-2 { stop-color: var(--m-paint); }
.rnd .s-glass-0 { stop-color: var(--m-glass); } .rnd .s-glass-1 { stop-color: var(--m-glass-hi); }
.rnd .s-tire-0 { stop-color: var(--m-tire-2); } .rnd .s-tire-1 { stop-color: var(--m-tire); }
.rnd .s-rim-0 { stop-color: var(--m-rim); } .rnd .s-rim-1 { stop-color: var(--m-rim-2); }
.rnd .s-road-0 { stop-color: var(--m-road); } .rnd .s-road-1 { stop-color: var(--m-road-2); }
.rnd .s-water-0 { stop-color: var(--m-water); } .rnd .s-water-1 { stop-color: var(--m-water-2); } .rnd .s-water-2 { stop-color: var(--m-water-3); }
.rnd .s-brass-0 { stop-color: var(--m-brass); } .rnd .s-brass-1 { stop-color: var(--m-brass-2); } .rnd .s-brass-2 { stop-color: var(--m-brass-3); }
.rnd .s-steel-0 { stop-color: var(--m-steel); } .rnd .s-steel-1 { stop-color: var(--m-steel-2); } .rnd .s-steel-2 { stop-color: var(--m-steel-3); }
.rnd .s-cu-0 { stop-color: var(--m-copper-3); } .rnd .s-cu-1 { stop-color: var(--m-copper); } .rnd .s-cu-2 { stop-color: var(--m-copper-hi); } .rnd .s-cu-3 { stop-color: var(--m-copper-2); }
.rnd .s-grip-0 { stop-color: var(--m-grip); } .rnd .s-grip-1 { stop-color: var(--m-grip-2); }
.rnd .s-iron-0 { stop-color: var(--m-iron); } .rnd .s-iron-1 { stop-color: var(--m-iron-2); }
.rnd .s-gas-0 { stop-color: var(--m-gaspipe); } .rnd .s-gas-1 { stop-color: var(--m-gaspipe-2); }
.rnd .s-panel-0 { stop-color: var(--m-panel); } .rnd .s-panel-1 { stop-color: var(--m-panel-2); }
.rnd .s-bark-0 { stop-color: var(--m-bark); } .rnd .s-bark-1 { stop-color: var(--m-bark-2); } .rnd .s-bark-2 { stop-color: var(--m-bark-3); }
.rnd .s-leaf-0 { stop-color: var(--m-leaf); } .rnd .s-leaf-1 { stop-color: var(--m-leaf-2); }
.rnd .s-shade-0 { stop-color: var(--bg); stop-opacity: .55; } .rnd .s-shade-1 { stop-color: var(--bg); stop-opacity: 0; }
.rnd .s-haze-0 { stop-color: var(--m-steel-2); stop-opacity: .75; } .rnd .s-haze-1 { stop-color: var(--m-steel-2); stop-opacity: 0; }
.rnd .s-sky-0 { stop-color: var(--panel-2); } .rnd .s-sky-1 { stop-color: var(--bg); }
.rnd .f-trim { fill: var(--m-trim); } .rnd .f-lamp { fill: var(--m-lamp); } .rnd .f-tail { fill: var(--m-tail); } .rnd .f-curb { fill: var(--m-curb); }
.rnd .f-tire { fill: var(--m-tire); } .rnd .f-glass { fill: var(--m-glass); } .rnd .f-shadow { fill: var(--bg); opacity: .6; }
.rnd .f-label { fill: var(--m-label); } .rnd .f-breaker { fill: var(--m-breaker); } .rnd .f-steel3 { fill: var(--m-steel-3); }
.rnd .hl { fill: none; stroke: var(--ink); stroke-opacity: .28; stroke-width: .6; stroke-linecap: round; }
.rnd .cut { fill: none; stroke: var(--m-paint-3); stroke-width: .5; }
.rnd .ink-t { fill: var(--ink); font-family: var(--f-data); font-weight: 700; }
.rnd .ann { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.rnd .ann-f { fill: var(--ink); }

/* hands only, no faces (art direction): a matte, warm-neutral glove so no skin tone is implied */
.rnd .hand { fill: var(--m-cloth); } .rnd .hand-2 { fill: var(--m-paint-3); }

@media (prefers-reduced-motion: reduce) { .rnd *, .rnd { transition: none !important; animation: none !important; } }

/* the one-line why (cycle 1, Oct 28: the mechanism behind each danger, sourced) */
.why { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); max-width: 70ch; }
.why .src { font: 500 var(--t-xs)/1.5 var(--f-data); color: var(--muted); white-space: nowrap; }

/* ---------- cycle 2 (Oct 28): every tool page is three blocks. (a) the tool, its answer on a 390 × 844 phone without
   scrolling; (b) one "why" panel built on the shared force meter (.fm); (c) one dated source list. Everything else sits in
   one closed "More" disclosure. One crumb, one source format, one next-step button. Mono is for numbers and data only. */
.tp-head { display: grid; gap: 2px; }
.tp-crumb { font: 700 var(--t-sm)/1.4 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--ink-2); text-decoration: none; justify-self: start; min-height: 44px; margin-block: -6px; display: inline-flex; align-items: center; }   /* 44 px to tap (gate 05), 32 px in the layout */
.v2 a.tp-crumb { color: var(--ink-2); }
.tp-crumb::before { content: "← "; }
.tp-crumb:hover { text-decoration: underline; }
.t-intro li::before { font-family: var(--f-display); }

/* inline citations: the publisher's name, small and quiet, in the text face */
.v2 .src, .v2 .readout .src, .v2 .why .src { font: 500 var(--t-xs)/1.5 var(--f-text); color: var(--muted); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.v2 a.src { color: var(--ink-2); }

/* (b) the why panel */
.whyp { display: grid; gap: var(--s3); }
.whyp > p { margin: 0; color: var(--ink-2); max-width: 66ch; }
.whyp .why { font-size: var(--t-md); }

/* the force meter: one bar holds, one pushes; whichever is longer wins. Bars are a drawn model (no numbers) unless a row
   carries a value. --v (0–1) sets the length; data-k sets the job: hold (ink), force (amber), water (water), co (haze). */
.fm { display: grid; gap: 10px; margin: 0; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-2); }
.fm-row { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.fm-k { font: 700 var(--t-sm)/1.25 var(--f-display); color: var(--ink); }
.fm-v { font: 700 var(--t-sm)/1 var(--f-data); color: var(--ink-2); min-width: 3ch; text-align: right; }
.fm-bar { position: relative; height: 14px; border-radius: 7px; background: var(--line); overflow: hidden; }
.fm-bar > i { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--v, 0)); background: var(--ink-2); border-radius: 7px; }
.fm-row[data-k="force"] .fm-bar > i { background: var(--close); }
.fm-row[data-k="water"] .fm-bar > i { background: var(--m-water-hi); }
.fm-row[data-k="co"] .fm-bar > i { background: var(--advisory); }
.fm-bar > b { position: absolute; top: -3px; bottom: -3px; left: calc(var(--at, .5) * 100%); width: 2px; background: var(--ink); }
.fm-say { margin: 2px 0 0; font: 700 var(--t-md)/1.35 var(--f-display); color: var(--ink); }
.fm-say small { display: block; font: 400 var(--t-sm)/1.45 var(--f-text); color: var(--ink-2); margin-top: 2px; }
@media (max-width: 420px) { .fm-row { grid-template-columns: minmax(0, 1fr) auto; } .fm-bar { grid-column: 1 / -1; grid-row: 2; } }
@media (prefers-reduced-motion: no-preference) { .fm-bar > i { transition: transform 600ms cubic-bezier(.4, 0, .2, 1); } }

/* everything else: one closed disclosure */
.more { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.more > summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 var(--s4); cursor: pointer; list-style: none;
  font: 700 var(--t-md)/1.3 var(--f-display); }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "+"; font: 700 22px/1 var(--f-display); color: var(--ink-2); }
.more[open] > summary::after { content: "–"; }
.more-b { display: grid; gap: var(--s5); padding: 0 var(--s4) var(--s4); }
.more-b > section { display: grid; gap: var(--s2); border-top: 1px solid var(--line); padding-top: var(--s4); }
.more-b h3 { font-size: var(--t-lg); margin: 0; }
.more-b p { margin: 0; color: var(--ink-2); }

/* (c) sources: one numbered list, "Publisher: title · checked date", always visible */
.srcs { display: grid; gap: var(--s2); }
.srcs .sources { margin: 0; }

/* the next step: one filled button back to the plan */
.nextstep { display: grid; gap: var(--s3); justify-items: start; border-top: 1px solid var(--line); padding-top: var(--s5); }
.nextstep .row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.done-line { margin: 0; font: 700 var(--t-md)/1.4 var(--f-display); color: var(--ink); }

/* the beta bar is one short line on a tool page, so the tool clears the fold on a phone */
@media (max-width: 640px) {
  body[data-nav="tools"] .beta-bar .beta-txt { display: none; }
  body[data-nav="tools"] .beta-bar .wrap { padding-block: 0; }
  body[data-nav="tools"] .beta-bar a { font-size: 13px; }
}

/* ---------- cycle 3 (Oct 28): the why lives in the tool card. .st3 is the shared three-state meter for schematic forces
   (holds · slipping · gone, or any three named states): drawn states, never a precise-looking bar. data-on (0–2) lights one
   segment; segment 0 is calm ink, 1 amber (--close), 2 orange (--advisory). Put it right under the picture, above the control. */
.st3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; counter-reset: none; }
.st3 > li { margin: 0; padding: 7px 6px; border-radius: var(--r-sm); background: var(--line); color: var(--muted); text-align: center;
  font: 700 var(--t-sm)/1.2 var(--f-display); }
.st3 > li::before { content: none; }
.st3 > li.on { color: var(--bg, #060a0d); background: var(--ink-2); }
.st3[data-on="1"] > li.on { background: var(--close); }
.st3[data-on="2"] > li.on { background: var(--advisory); }
@media (prefers-reduced-motion: no-preference) { .st3 > li { transition: background-color 240ms var(--ease, ease), color 240ms var(--ease, ease); } }

/* the "why" clips (cycle 4, Oct 29): a strip of five stills by default (no JS, reduced motion, Save-Data, 2G/3G); with JS,
   a tap-to-play clip, poster first, held on its last frame. Portrait 4:5, capped so it never fills a desktop screen. */
.clip { margin: 0; display: grid; gap: 6px; }
.clip-v { position: relative; max-width: 360px; width: 100%; }
.clip-v video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--line); }
/* cycle 5: a small pill bottom-left, off the poster's picture; on a phone the poster is a 280 px band until it plays */
.clip-play { position: absolute; left: 8px; bottom: 8px; min-height: 44px; padding: 0 16px; border-radius: 22px; white-space: nowrap; background: rgba(6,10,13,.86); font-family: var(--f-data); }
@media (max-width: 599px) { .clip:not(.played) .clip-v video { aspect-ratio: auto; height: 280px; object-fit: cover; object-position: 50% 30%; } }
.clip.playing .clip-play { display: none; }
.clip-strip { list-style: none; margin: 0; padding: 0 0 4px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; }
.clip-strip li { scroll-snap-align: start; }
.clip-strip img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); border: 1px solid var(--line); }
@media (min-width: 900px) { .clip-strip { grid-auto-columns: minmax(0, 1fr); overflow: visible; } }
.clip figcaption { margin: 0; }
.clip-h { margin: var(--s3) 0 0; font: 700 var(--t-md)/1.3 var(--f-display); color: var(--ink); }
.clip-strip[hidden], .clip-v[hidden] { display: none; }

/* cycle 4 (Oct 29): the 3-step intro a little tighter on a phone, so the tool rises (review 3, cross-cutting 5) */
@media (max-width: 599px) { .t-intro li { font-size: 15px; line-height: 1.35; } }