/* ===========================================================================
   The drawings (src/drawings.py, inline SVG in HTML widgets): the hero gauges,
   the long-draw schematic and its legend, the maintenance cycle, the region
   map. Colour lives here, not in the SVG, so the drawings follow the palette.
   Motion is decoration only: every drawing is complete at rest, and reduced
   motion stops all of it.
   =========================================================================== */

/* ---------------------------------------------------------------- gauges */

.dl .gauge-panel{
  position:relative;padding:1.6rem 1.5rem 1.2rem;border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.18);
  color:var(--on-dark);max-width:420px;margin-left:auto;
}
.dl .gauge-panel p{margin:0}
.dl .gp-k{font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.dl .gp-title{margin:.35rem 0 1rem;font-family:var(--font-display);font-size:1.55rem;font-weight:800;line-height:1;text-transform:uppercase;color:var(--white)}
.dl .gp-list{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.dl .gp-item{display:flex;align-items:center;gap:1rem;padding:.6rem 0;border-top:1px dashed rgba(255,255,255,.16)}
.dl .gp-txt{display:grid;gap:.1rem;min-width:0}
.dl .gp-tag{font-family:var(--font-mono);font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-3)}
.dl .gp-v{font-family:var(--font-display);font-size:2rem;font-weight:800;line-height:1;color:var(--white)}
.dl .gp-l{font-size:.84rem;line-height:1.35;color:var(--on-dark-2)}
.dl .gp-src{margin-top:.9rem;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.12);font-size:.74rem;color:var(--on-dark-3)}
.dl .dial{width:78px;height:78px;flex:none}
.dl .dial-track{fill:none;stroke:rgba(255,255,255,.14);stroke-width:7;stroke-linecap:round}
.dl .dial-fill{fill:none;stroke:var(--gold);stroke-width:7;stroke-linecap:round}
.dl .dial-tick{stroke:rgba(255,255,255,.4);stroke-width:1.5}
.dl .dial-needle line{stroke:var(--white);stroke-width:3;stroke-linecap:round}
.dl .dial-needle{transform-origin:60px 60px;transform:rotate(var(--to))}
.dl .dial-hub{fill:var(--gold);stroke:var(--stout);stroke-width:2}
@keyframes dl-needle{from{transform:rotate(-135deg)}to{transform:rotate(var(--to))}}
html.js .dl .hero .dial-needle{animation:dl-needle 1.6s .5s cubic-bezier(.3,1.4,.5,1) both}
@media (max-width:1024px){ .dl .gauge-panel{margin-left:0;max-width:none} .dl .gp-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem} .dl .gp-item{flex-direction:column;align-items:flex-start} }
@media (max-width:600px){ .dl .gp-list{grid-template-columns:1fr} .dl .gp-item{flex-direction:row;align-items:center} .dl .dial{width:62px;height:62px} }

/* ------------------------------------------------------------- schematic */

.dl .sx{display:block;width:100%;height:auto;margin-top:1rem;font-family:var(--font-mono)}
.dl .sx-bg{opacity:1}
.dl .rmap-bg{opacity:1}
.dl .sx-gridline{fill:none;stroke:rgba(150,158,230,.09);stroke-width:1}
.dl .sx-floor{stroke:rgba(198,203,236,.35);stroke-width:2;stroke-dasharray:2 8}
.dl .sx-cooler{fill:rgba(59,64,160,.22);stroke:rgba(150,170,255,.55);stroke-width:2;stroke-dasharray:10 6}
.dl .sx-label{fill:var(--on-dark-2);font-size:13px;font-weight:600;letter-spacing:.14em}
.dl .sx-dim{fill:var(--gold);font-size:12px;font-weight:600;letter-spacing:.12em}
.dl .sx-keg rect{fill:#AEB5C9;stroke:#E4E8F3;stroke-width:2}
.dl .sx-keg line{stroke:#7F879E;stroke-width:3}
.dl .sx-coupler{fill:var(--gold);stroke:#fff;stroke-width:1.5}
.dl .sx-jumper{fill:none;stroke:var(--amber);stroke-width:3;stroke-linecap:round;opacity:.9}
.dl .sx-gasline{fill:none;stroke:#8FA3FF;stroke-width:2;stroke-dasharray:5 5;opacity:.85}
.dl .sx-gas rect{fill:#3B40A0;stroke:#AAB4FF;stroke-width:2}
.dl .sx-gas .sx-reg{fill:#C6CBDA;stroke:#fff}
.dl .sx-gauge{fill:var(--stout);stroke:#C6CBDA;stroke-width:2}
.dl .sx-glycol rect{fill:#22265E;stroke:#AAB4FF;stroke-width:2}
.dl .sx-glycol .sx-vent{fill:rgba(170,180,255,.4);stroke:none}
.dl .sx-fan{fill:none;stroke:#AAB4FF;stroke-width:2}
.dl .sx-fan-blade{stroke:var(--gold);stroke-width:3;stroke-linecap:round;transform-origin:372px 100px}
.dl .sx-glycol-line{fill:none;stroke:#6FD3FF;stroke-width:3;stroke-dasharray:6 6}
.dl .sx-trunk{fill:none;stroke:#2B2F6E;stroke-width:22;stroke-linecap:round;stroke-linejoin:round}
.dl .sx-trunk-core{fill:none;stroke:rgba(111,211,255,.45);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.dl .sx-flow{fill:none;stroke:var(--gold);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14 16}
.dl .sx-bar{fill:#6B4A2E;stroke:#A07850;stroke-width:1.5}
.dl .sx-bar-front{fill:rgba(107,74,46,.45);stroke:rgba(160,120,80,.6)}
.dl .sx-tray{fill:#C6CBDA}
.dl .sx-tower rect{fill:#D9DEEA;stroke:#fff;stroke-width:1.5}
.dl .sx-faucet rect{fill:#E9ECF4;stroke:#9AA2B8;stroke-width:1}
.dl .sx-faucet .sx-handle{fill:var(--navy-hi);stroke:var(--gold);stroke-width:1.5}
.dl .sx-glass{fill:rgba(255,255,255,.12);stroke:#fff;stroke-width:1.5}
.dl .sx-beer-top{stop-color:#FFD566}
.dl .sx-beer-bot{stop-color:#E89A1C}
.dl .sx-foam{fill:#FFF8E6}
.dl .sx-pint{stroke:none}
.dl .sx-pour{stroke:var(--gold);stroke-width:3;stroke-linecap:round}
.dl .sx-num circle{fill:var(--gold);stroke:var(--stout);stroke-width:3;transition:transform .25s var(--ease)}
.dl .sx-num text{fill:var(--stout);font-family:var(--font-display);font-size:17px;font-weight:800}
.dl .sx-num{transform-box:fill-box;transform-origin:center}
.dl .sx-num.is-lit circle{fill:var(--white)}
.dl .sx-num.is-lit{transform:scale(1.25)}
@keyframes dl-flow{to{stroke-dashoffset:-60}}
@keyframes dl-spin{to{transform:rotate(360deg)}}
html.js .dl .sx-flow{animation:dl-flow 1.4s linear infinite}
html.js .dl .sx-glycol-line{animation:dl-flow 2.4s linear infinite}
html.js .dl .sx-fan-blade{animation:dl-spin 2.2s linear infinite}

/* the legend under the drawing: numbered, four across */
.dl .sx-legend{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem 1.4rem}
.dl .sx-legend li{position:relative;display:grid;gap:.15rem;padding:.9rem 0 0 2.6rem;border-top:1px solid var(--line-dark);transition:border-color .2s var(--ease)}
.dl .sx-legend li::before{content:attr(data-n);position:absolute;left:0;top:.85rem;width:1.8rem;height:1.8rem;display:grid;place-items:center;border-radius:50%;
  background:var(--gold);color:var(--stout);font-family:var(--font-display);font-size:1rem;font-weight:800}
.dl .sx-legend li.is-lit{border-top-color:var(--gold)}
.dl .sx-legend strong{color:var(--white);font-family:var(--font-display);font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em}
.dl .sx-legend span{color:var(--on-dark-2);font-size:.9rem;line-height:1.5}
@media (max-width:1024px){ .dl .sx-legend{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .dl .sx-legend{grid-template-columns:1fr} }
/* on a phone the drawing scrolls sideways inside its frame rather than shrinking to illegible */
@media (max-width:767px){
  body .elementor .schematic{overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  body .elementor .schematic::-webkit-scrollbar{display:none}
  .dl .schematic .sx{min-width:720px}
}

/* ------------------------------------------------------------------ cycle */

.dl .cyc{display:block;width:min(640px,100%);height:auto;margin-inline:auto;overflow:visible}
.dl .cyc-ring-bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:26}
.dl .cyc-ring{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round}
.dl .cyc-inner{fill:rgba(15,17,51,.55);stroke:var(--line-dark-strong);stroke-width:1}
.dl .cyc-arrow path{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.dl .cyc-node circle{fill:var(--navy);stroke:var(--gold);stroke-width:3}
.dl .cyc-node .cyc-node-core{fill:var(--gold);stroke:none}
.dl .cyc-dot{fill:var(--white);filter:drop-shadow(0 0 8px rgba(254,194,43,.9))}
.dl .cyc-orbit{transform-origin:260px 260px}
html.js .dl .cyc-orbit{animation:dl-spin 14s linear infinite}
.dl .cyc-t{fill:var(--white);font-family:var(--font-display);font-size:25px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.dl .cyc-s{fill:var(--on-dark-2);font-family:var(--font-text);font-size:15px}
.dl .cyc-center-k{fill:var(--gold);font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.18em}
.dl .cyc-center{fill:var(--white);font-family:var(--font-display);font-size:40px;font-weight:800;text-transform:uppercase}

/* -------------------------------------------------------------- region map */

.dl .rmap{display:block;width:100%;height:auto;border-radius:var(--r-lg);background:rgba(9,10,32,.45);border:1px solid var(--line-dark-strong);box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.dl .rmap-gridline{fill:none;stroke:rgba(150,158,230,.09);stroke-width:1}
.dl .rmap-glow-in{stop-color:rgba(254,194,43,.2)}
.dl .rmap-glow-out{stop-color:rgba(254,194,43,0)}
.dl .rmap-ring{fill:none;stroke:rgba(254,194,43,.4);stroke-width:1.2;stroke-dasharray:4 6}
.dl .rmap-ring-l{fill:rgba(254,194,43,.75);font-family:var(--font-mono);font-size:10px;letter-spacing:.14em}
.dl .rmap-border{stroke:rgba(198,203,236,.35);stroke-width:1.5;stroke-dasharray:10 6 2 6}
.dl .rmap-river{fill:none;stroke:#5BB8F0;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.dl .rmap-ohio{stroke-width:6;opacity:.95}
.dl .rmap-minor{stroke-width:2.5;opacity:.55}
.dl .rmap-water{fill:#8CD0F7;font-family:var(--font-text);font-size:14px;font-style:italic;letter-spacing:.06em}
.dl .rmap-state{fill:rgba(198,203,236,.32);font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:.3em}
.dl .rmap-pin{fill:var(--gold);stroke:var(--stout);stroke-width:2.5}
.dl .rmap-pin.is-home{fill:var(--white);stroke:var(--gold);stroke-width:4}
.dl .rmap-pulse{fill:none;stroke:var(--gold);stroke-width:2;transform-box:fill-box;transform-origin:center}
@keyframes dl-pulse{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}
html.js .dl .rmap-pulse{animation:dl-pulse 2.4s var(--ease) infinite}
.dl .rmap-city{fill:var(--white);font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:.03em;paint-order:stroke;stroke:rgba(15,17,51,.85);stroke-width:4px;stroke-linejoin:round}
.dl .rmap-city.is-home{fill:var(--gold);font-size:21px;font-weight:800}
.dl .rmap-note{fill:var(--on-dark-3);font-family:var(--font-mono);font-size:9px;letter-spacing:.14em}

@media (prefers-reduced-motion:reduce){
  html.js .dl .sx-flow,html.js .dl .sx-glycol-line,html.js .dl .sx-fan-blade,html.js .dl .cyc-orbit,html.js .dl .rmap-pulse,html.js .dl .hero .dial-needle{animation:none}
}