/* Brace For It V2 · /power-out (tools revamp, Oct 28). Loads after tool.css and render.css. */
/* 1. the tool: where the generator goes (cycle 3): one toggle, two states. CO dots leave the exhaust once per change and hold. */
.gen-fig { max-width: 720px; }
.gen-fig svg { display: block; width: 100%; height: auto; }
.gen-fig .g-roof { fill: var(--m-house-2); } .gen-fig .g-house { fill: var(--m-house); } .gen-fig .g-in { fill: var(--bg); opacity: .55; }
.gen-fig .g-win { fill: var(--m-glass-hi); } .gen-fig .g-lawn { fill: var(--m-lawn); }
.gen-fig { position: relative; }
.gen-fig .g-door { fill: var(--bg); }
.gen-fig .g-haze { fill: var(--m-co); opacity: .26; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.gen-fig[data-gen="garage"] .g-haze { transform: scaleY(.62); }
.gen-fig .g-co { font: 700 10px var(--f-display); fill: var(--ink); opacity: 0; }
.gen-fig[data-gen="garage"] .g-co { opacity: 1; }
.gen-fig .g-co0 { font: 700 10px var(--f-display); fill: var(--ink); opacity: 0; }
.gen-fig[data-gen="out"] .g-co0 { opacity: 1; }
.gen-fig[data-gen="out"] .g-w { opacity: 0; }
.gen-fig .g-sm { font: 600 9px var(--f-text); fill: var(--ink-2); }
.gen-fig .g-dot { fill: var(--m-co); }
.gen-fig .g-dist, .gen-fig .g-ok { opacity: 0; }
.gen-fig[data-gen="out"] .g-dist, .gen-fig[data-gen="out"] .g-ok { opacity: 1; }
.gen-fig[data-gen="out"] .g-x { opacity: 0; }
/* cycle 5: the colour note sits in the sky right of the roof, inside the scene, not as a row of its own */
.gen-fig .g-chip { left: auto; right: 6px; top: 6px; transform: none; white-space: normal; text-align: right; font: 600 12px/1.3 var(--f-text); letter-spacing: 0; text-transform: none; width: max-content; max-width: 31%; padding: 3px 6px; }
.gen-fig[data-gen="out"] .g-chip { display: none; }
.gen-fig .g-x { fill: none; stroke: var(--watch); stroke-width: 4; stroke-linecap: round; }
.gen-fig .g-gen { fill: var(--m-gen); stroke: var(--m-steel-2); stroke-width: 1; } .gen-fig .g-gen2 { fill: var(--m-gen-2); }
.gen-fig .g-ex { fill: none; stroke: var(--m-steel-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gen-fig .g-puff { fill: var(--m-steel-2); opacity: .5; }
.gen-fig .g-dim { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gen-fig .g-ext { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.gen-fig .g-num { font: 700 17px var(--f-data); fill: var(--ink); }
.gen-fig .g-w { font: 700 11px var(--f-display); fill: var(--ink-2); }
.gen-fig .g-ok { font: 700 16px var(--f-display); fill: var(--ink); }
.gen-say { margin: 0; font-size: var(--t-md); color: var(--ink-2); max-width: 66ch; }
.gen-say b { color: var(--ink); font-family: var(--f-display); }
.pwr .verdict.stop { margin: 0; border-left: 6px solid var(--ink); padding: 4px 0 4px 12px; font-weight: 700; }
.pwr .gen #gen-pick button { flex: 1 1 0; }
@media (prefers-reduced-motion: no-preference) {
  .gen-fig.anim .g-dot { transition: transform 1100ms cubic-bezier(.3, .2, .2, 1), opacity 900ms var(--ease); }
  .gen-fig.anim .g-unit { transition: transform var(--d4) cubic-bezier(.4, 0, .2, 1); }
  .gen-fig.anim .g-haze { transition: transform 1400ms var(--ease) 600ms; }
  .gen-fig.anim .g-co, .gen-fig.anim .g-co0, .gen-fig.anim .g-dist, .gen-fig.anim .g-ok, .gen-fig.anim .g-x { transition: opacity var(--d3) var(--ease) var(--d3); }
  /* 20 ft out (cycle 4): the exhaust keeps coming, drifts right, away from the house, and fades, on a loop.
     Reduced motion keeps the dots where placeDots froze them, mid-drift. */
  .gen-fig.drift .g-dot { transition: none; animation: g-drift 2200ms linear infinite; animation-delay: var(--dl); }
}
@keyframes g-drift { 0% { transform: translate(386px, 152px); opacity: .95; } 100% { transform: translate(var(--tx), var(--ty)); opacity: 0; } }
/* 2. the why is the clip; the blood line sits under it (cycle 5: one why per idea) */
.co-blood { margin: 0; font-size: var(--t-md); color: var(--ink-2); max-width: 66ch; }
@media (prefers-reduced-motion: no-preference) {
  .food.anim .fz-ring { transition: stroke-dashoffset var(--d4) cubic-bezier(.4, 0, .2, 1); }
  .co-art.press .co-btn { animation: press 320ms var(--ease) 1; }
  @keyframes press { 50% { transform: scale(.86); } }
}
.co { display: grid; gap: var(--s2); }
.co-h { justify-content: space-between; align-items: center; flex-wrap: nowrap; }
.co-h h2 { display: inline-flex; align-items: center; gap: 10px; }
.co-art { display: inline-block; width: 32px; height: 32px; flex: none; }
.co-art svg { width: 100%; height: 100%; display: block; }
.rnd .co-face { fill: var(--m-kit); } .rnd .co-vent { fill: var(--m-panel-2); } .rnd .co-t { font: 700 26px var(--f-display); fill: var(--m-breaker); }
.rnd .co-btn { fill: var(--m-panel-2); transform-box: fill-box; transform-origin: center; } .rnd .co-s { font: 700 6px var(--f-data); fill: var(--m-breaker); }
.co-count { font-family: var(--f-data); white-space: nowrap; }
.food { display: grid; gap: var(--s3); }
.food-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
@media (min-width: 700px) { .food-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fz { margin: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; }
.fz svg { width: 56px; height: 56px; display: block; }
.fz figcaption { display: grid; gap: 2px; } .fz figcaption b { font: 700 var(--t-md) var(--f-display); }
.fz-st { font: 600 var(--t-sm)/1.35 var(--f-text); color: var(--ink-2); }
.fz[data-past="true"] .fz-st { color: var(--close); }
.fz-track { fill: none; stroke: var(--line); stroke-width: 6; }
.fz-ring { fill: none; stroke: var(--m-o2); stroke-width: 6; stroke-linecap: round; }
.fz[data-past="true"] .fz-ring { stroke: var(--close); }
.fz-n { font: 700 11px var(--f-data); fill: var(--ink); }
.food .pick.num { flex-wrap: nowrap; } .food .pick.num > button { flex: 1 1 0; min-width: 0; padding-inline: 4px; }
@media (max-width: 599px) { .food .pick.num { flex-wrap: wrap; } .food .pick.num .pick-k { width: 100%; } }
.clist { list-style: none; margin: 0; padding: 0; }
.clist > li { border-bottom: 1px solid var(--line); }
.clist .check { padding: 12px 0; }
.clist .check b { display: block; line-height: 1.35; }
.clist .check .small { display: block; margin-top: 2px; }
.clist .check input:checked ~ span b { text-decoration: line-through; text-decoration-color: var(--muted); color: var(--ink-2); }
.pwr .pick-k { font: 700 var(--t-md)/1.3 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--ink); }
/* cycle 3: on a wide screen the picture and its answer sit side by side, so both are in view while you toggle */
@media (min-width: 900px) {
  .gen#tool { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: var(--s5); row-gap: var(--s3); align-items: center; }
  .gen#tool > h2, .gen#tool > #gen-pick { grid-column: 1 / -1; }
  .gen#tool > #gen-pick { max-width: 560px; }
  .gen#tool > .gen-fig { grid-column: 1; max-width: none; }
  .gen#tool > .gen-fig { grid-row: 3 / span 3; align-self: start; }
  .gen#tool > .gen-say { grid-column: 2; grid-row: 3; align-self: start; }
  /* cycle 5: the clip sits under the answer in the right column, beside the picture; the blood line and the sick line under both */
  .gen#tool > .clip-h { grid-column: 2; grid-row: 4; margin: 0; align-self: end; }
  .gen#tool > .clip { grid-column: 2; grid-row: 5; align-self: start; }
  .gen#tool > .co-blood, .gen#tool > .verdict { grid-column: 1 / -1; }
}