/* Brace For It V2 · shared bits for tool pages (/kit-builder, /shutoffs; other V2 tool pages may load it too).
   Tokens from v2.css only. Every toggle reads in words or a shape, never colour alone. Rows and buttons are 44 px or taller. */
.tpage { padding-top: var(--s4); display: grid; gap: var(--s5); }
.tpage [hidden] { display: none !important; }
.t-head { display: grid; gap: 4px; }
#tool { padding: var(--s4); display: grid; gap: var(--s4); }
@media (min-width: 600px) { #tool { padding: var(--s5); } }
.tpage .explainer { max-width: 820px; }

/* segmented choice: aria-pressed, the pressed one is filled ink with a tick (shape + weight, not colour) */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { min-height: var(--tap); padding: 0 16px; border-radius: var(--r-md); border: 1.5px solid var(--edge); background: transparent; color: var(--ink);
  font: 700 16px/1.2 var(--f-display); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.seg button[aria-pressed="true"]::before, .seg button[aria-selected="true"]::before { content: "✓"; font: 700 14px var(--f-data); }

/* full-width checkbox row: the whole row is the target */
.krow { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 48px; padding: 8px 10px;
  border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink); font: 400 var(--t-md)/1.35 var(--f-text); text-align: left; cursor: pointer; }
.krow:hover { background: var(--panel-2); }
.krow .box { width: 24px; height: 24px; border: 2px solid var(--edge); border-radius: 4px; display: grid; place-items: center; }
.krow[aria-checked="true"] .box { background: var(--ink); border-color: var(--ink); }
.krow[aria-checked="true"] .box::after { content: "✓"; color: var(--bg); font: 700 15px/1 var(--f-data); }
.krow[aria-checked="true"] .name { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--muted); }
.krow .name small { display: block; font-size: var(--t-sm); color: var(--muted); text-decoration: none; }
.krow.opt { grid-template-columns: 24px minmax(0, 1fr); border: 1.5px solid var(--line); }

.meter { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) { .meter i { transition: width var(--d2) var(--ease); } }

/* "In your plan" rows */
.planbox { border-top: 1px solid var(--line); padding-top: var(--s4); display: grid; gap: var(--s2); }
.planbox h3 { outline-offset: 4px; }
.planbox ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: var(--tap); padding: 6px 0; border-bottom: 1px solid var(--line); }
.kp-t { font-weight: 700; }
.kp.done .kp-t { color: var(--ink-2); font-weight: 400; }

.notes { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.notes .panel { display: grid; gap: var(--s3); align-content: start; }
.tight { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.sources { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: var(--t-sm); color: var(--ink-2); }
.sources a { overflow-wrap: anywhere; }
.go { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }

.nextstep { display: grid; gap: 6px; justify-items: start; border-top: 1px solid var(--line); padding-top: var(--s5); }
.nextstep p { margin: 0; }

/* /tools: the tool directory (wave-70). A short numbered intro, then the plan (the page's one green-framed box), then the tools. */
.tdir { gap: var(--s4); padding-bottom: var(--s6); }
.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); }
.tdir #tool { padding: 0; gap: var(--s3); }
.tgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.tcard { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; min-height: 76px; height: 100%; padding: var(--s4);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; }
.v2 a.tcard { color: var(--ink); }
.tcard > svg { width: 28px; height: 28px; color: var(--ink); margin-top: 2px; }
.tc-t { display: grid; gap: 2px; }
.tc-t b { font: 700 var(--t-md)/1.3 var(--f-display); }
.tc-t b::after { content: " →"; }
.tc-t span { font-size: var(--t-md); line-height: 1.4; color: var(--ink-2); }
.tcard:hover b, .tcard:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
.tcard.is-plan { border: 2px solid var(--signal); background: var(--panel-2); }
.tnote { margin: 0; }

.print-only { display: none; }
@media print {
  :root { color-scheme: light; }
  html, body.v2 { background: #fff !important; }
  .print-only { display: block; }
  .site-foot, .skip, .tpage .explainer, .t-head, .notes, .nextstep { display: none !important; }
  main.tpage { padding: 0 !important; }
  #tool { border: 0; padding: 0; }
  .panel.hero::before, .panel.hero::after { display: none; }
}

/* /tools cycle 2 (Oct 28): every tool, each card a small code-drawn picture of its own tool (16:9), two across on a phone */
.tdir .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .tdir .tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tcard.tthumbcard { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 0 var(--s3); overflow: hidden; align-content: start; }
.tthumbcard .tc-t { padding: 0 var(--s3); }
.tthumbcard .tc-t span { font-size: var(--t-sm); }
.tcard > svg.tthumb { width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0; display: block; border-bottom: 1px solid var(--line); }
.tthumb .th-bg { fill: var(--panel-2); } .tthumb .th-water { fill: var(--m-water); opacity: .62; } .tthumb .th-surf { stroke: var(--m-water-hi); stroke-width: 1.5; }
.tthumb .th-cal { fill: none; stroke: var(--edge); } .tthumb .th-wait { fill: var(--line); } .tthumb .th-hatch { stroke: var(--muted); stroke-width: 1.2; }
.tthumb .th-cov { fill: var(--ink-2); } .tthumb .th-t { fill: var(--ink); font: 700 11px var(--f-display); } .tthumb .th-cov + .th-t { fill: var(--bg); } .tthumb .th-n { fill: var(--ink-2); font: 700 10px var(--f-data); }
.tthumb .th-shelf { fill: var(--m-bark-2); } .tthumb .th-jug { fill: var(--m-jug); } .tthumb .th-cap { fill: var(--m-cap); }
.tthumb .th-cu { fill: var(--m-copper); } .tthumb .th-brass { fill: var(--m-brass); } .tthumb .th-steel { fill: var(--m-steel); } .tthumb .th-grip { fill: var(--m-grip); }
.tthumb .th-lawn { fill: var(--m-lawn); } .tthumb .th-house { fill: var(--m-house); stroke: var(--edge); } .tthumb .th-win { fill: var(--m-glass-hi); } .tthumb .th-gen { fill: var(--m-gen); stroke: var(--m-steel-2); }
.tthumb .th-dim { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.tthumb .th-bark { fill: var(--m-bark); } .tthumb .th-leaf { fill: var(--m-leaf); } .tthumb .th-leaf2 { fill: var(--m-leaf-2); } .tthumb .th-dead { stroke: var(--m-leaf-dead); stroke-width: 3; stroke-linecap: round; }
.tthumb .th-paint { fill: var(--m-paint); } .tthumb .th-glass { fill: var(--m-glass); } .tthumb .th-tire { fill: var(--m-tire); stroke: var(--m-rim-2); stroke-width: 3; }
.tthumb .th-grid { stroke: var(--line); } .tthumb .th-old { fill: none; stroke: var(--muted); stroke-width: 1.5; } .tthumb .th-now { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; } .tthumb .th-dot { fill: var(--ink); }
@media (max-width: 420px) { .tthumbcard .tc-t b { font-size: 16px; } .tthumbcard .tc-t b::after { content: ""; } }

/* /tools, cycle 3 (Oct 28): El Niño is a full-width "This winter" banner above the six tools (2 × 3 on a phone, 3 × 2 on
   desktop); the plan is a quiet line under the grid; thumbnails share one zoom and the material tokens */
.tdir .tlist { display: grid; gap: var(--s3); }
.tdir .tc-wide > svg.tthumb { aspect-ratio: 2 / 1; }
.tdir .tc-k { display: block; font: 700 var(--t-xs)/1.3 var(--f-display); color: var(--signal); text-transform: none; margin-bottom: 2px; }
@media (min-width: 760px) {
  .tdir .tc-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: 0; gap: var(--s4); }
  .tdir .tc-wide > svg.tthumb { border-bottom: 0; border-right: 1px solid var(--line); }
  .tdir .tc-wide .tc-t { padding-right: var(--s4); }
  .tdir .tc-wide b { font-size: var(--t-lg); }
}
.tdir .tplan { margin: var(--s2) 0 0; font: 700 var(--t-md)/1.4 var(--f-display); color: var(--ink-2); }
.tdir .tplan a { color: var(--ink); }
.tthumb .th-strong { stroke: var(--edge); stroke-dasharray: 4 4; } .tthumb .th-big { fill: var(--ink); font: 700 18px var(--f-data); }
.tdir .tc-wide .th-now { stroke: var(--signal); } .tdir .tc-wide .th-dot { fill: var(--signal); }
.tthumb .th-grass { fill: var(--m-grass); } .tthumb .th-soil { fill: var(--m-soil); } .tthumb .th-ring { fill: none; stroke: var(--close); stroke-width: 2.5; }
.tthumb .th-cu-hi { stroke: var(--m-copper-hi); stroke-width: 1.5; opacity: .7; } .tthumb .th-brass2 { fill: var(--m-brass-2); }
.tthumb .th-hand { fill: var(--m-cloth); } .tthumb .th-hand2 { fill: var(--m-paint-3); }
.tthumb .th-tick { stroke: var(--edge); stroke-width: 1; } .tthumb .th-wait-o { stroke: var(--edge); } .tthumb .th-on { fill: var(--bg); }

/* /tools, cycle 4 (Oct 29): the kit thumbnail is the kit page's pile; the El Niño banner is a 96 px row on a phone, so the
   first tools show above the fold, and 180 px tall on a wide screen (no empty half) */
.tthumb .th-floor { stroke: var(--line); stroke-width: 1.5; } .tthumb .th-wat { fill: var(--m-water-hi); }
.tthumb .th-jar { fill: var(--m-copper-2); } .tthumb .th-lid { fill: var(--m-paint-3); } .tthumb .th-can { fill: var(--m-can); } .tthumb .th-kit { fill: var(--m-kit); }
.tthumb .th-laba, .tthumb .th-boxa { fill: var(--m-label-a); } .tthumb .th-labb, .tthumb .th-boxb { fill: var(--m-label-b); } .tthumb .th-labc, .tthumb .th-boxc { fill: var(--m-label-c); }
.tthumb .th-jug { opacity: .6; }
@media (max-width: 499px) {
  .tdir .tc-wide { grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: var(--s3); padding: 12px; min-height: 96px; }
  .tdir .tc-wide > svg.tthumb { width: 120px; height: 72px; aspect-ratio: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
  .tdir .tc-wide .tc-t { padding: 0; }
  .tdir .tc-wide .tc-t > span:not(.tc-k) { display: none; }
  .tdir .tc-wide b::after { content: " →"; }
}
@media (min-width: 760px) {
  .tdir .tc-wide { grid-template-columns: 360px minmax(0, 1fr); gap: var(--s5); }
  .tdir .tc-wide > svg.tthumb { height: 180px; width: 360px; aspect-ratio: auto; }
  .tdir .tc-wide .tc-t span { font-size: var(--t-md); max-width: 46ch; }
}

/* 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; } }

/* cycle 5: each card says how long it takes; the shutoff and generator thumbnails show the answer (OFF, CO drifting away);
   on a wide screen the El Niño banner fills its right half with the Jul–Sep readings it is about */
.tdir .tc-t .tc-time { order: -1; font: 500 var(--t-xs)/1.3 var(--f-data); color: var(--muted); }
.tthumb .th-tag { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; } .tthumb .th-tagt { fill: var(--ink); font: 700 11px var(--f-data); }
.tthumb .th-co { fill: var(--m-co); } .tthumb .th-ex { stroke: var(--m-steel-2, #7d8a93); stroke-width: 2; stroke-linecap: round; }
.tdir .tc-stat { display: none; }
@media (min-width: 900px) {
  .tdir .tc-wide .tc-t > .tc-stat { display: flex; gap: var(--s5); margin-top: var(--s3); }
  .tdir .tc-wide .tc-stat > span { display: grid; font: 500 var(--t-sm)/1.3 var(--f-data); color: var(--muted); }
  .tdir .tc-wide .tc-stat b { font: 700 32px/1.1 var(--f-data); color: var(--ink-2); } .tdir .tc-stat b::after { content: none; }
  .tdir .tc-wide .tc-stat > span:first-child b { color: var(--signal); }
}
/* /tools: "Every tool, by plan area" (flow-tools, Oct 29): one compact list in the plan's order under the featured grid */
.tall { margin-top: var(--s5); display: grid; gap: var(--s3); }
.tareas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.tareas > li { display: grid; gap: 4px; min-width: 0; }
.v2 .ta-k { font: 500 var(--t-xs)/1.4 var(--f-data); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tareas ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.v2 a.ta-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); min-height: var(--tap); padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.ta-s { min-width: 0; }
.ta-go { flex: none; font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; }
.v2 a.ta-row:hover .ta-s, .v2 a.ta-row:focus-visible .ta-s { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 760px) { .tareas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s6); } }