/* Fluids explorer (fluids.js), the back of the Piping & materials card. */
.pipes.flip-ready .flip-back{padding:14px;background:#efebe1 linear-gradient(#7f8c801a 1px,transparent 1px) 0 0/22px 22px;box-shadow:inset 0 3px 0 var(--rust)}
.fl-head{display:flex;align-items:center;margin-bottom:8px;font:500 18px/1.2 var(--font-display)}
.fl-auto{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:4px 8px;border:1px solid #8c938a;background:transparent;color:var(--soft);font:var(--t-label)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.fl-auto span{position:relative;width:8px;height:8px;border-radius:50%;background:#8c938a}
.fl-auto[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.fl-auto[aria-pressed="true"] span{background:var(--rust)}
.fl-auto.is-on span::after{content:"";position:absolute;inset:-3px;border:1px solid var(--rust);border-radius:50%;animation:fl-pulse 1.4s ease-out infinite}
@keyframes fl-pulse{from{transform:scale(.6);opacity:1}to{transform:scale(1.5);opacity:0}}
.fl-auto:hover,.fl-auto:focus-visible{outline:2px solid var(--rust-text);outline-offset:1px}
.fl-chips{display:flex;flex-wrap:wrap;gap:5px}
.fl-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid #8c938a;background:var(--white);color:var(--ink);font:var(--t-label)/1.1 var(--font-mono);letter-spacing:.04em;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.fl-chip i{width:9px;height:9px;border-radius:50%;flex:none}
.fl-chip[aria-checked="true"]{border-color:var(--ink);background:var(--ink);color:var(--white)}
.fl-chip:hover,.fl-chip:focus-visible{outline:2px solid var(--rust-text);outline-offset:1px}

.fl-iso{display:block;width:100%;height:auto;max-height:320px;margin:10px 0 6px}
.fl-iso path{fill:none;stroke-linejoin:round;stroke-linecap:butt}
/* Supports */
.fl-iso .fl-plinth{fill:#9aa29b;stroke:#2b302d;stroke-width:1.2}
.fl-iso .fl-plinth-top{fill:#c3c9c2;stroke:#2b302d;stroke-width:1.2}
/* Flanges */
.fl-iso .fl-fl-back{fill:#3d433f;stroke:#1f2624;stroke-width:1.2}
.fl-iso .fl-fl-face{fill:#8d958e;stroke:#1f2624;stroke-width:1.2}
.fl-bolt{fill:#2b302d}
/* Lagging for hot and cryogenic lines */
.fl-clad,.fl-clad-seam,.fl-frost{opacity:0;transition:opacity .5s}
.fl-clad{stroke:#c9ced0;stroke-width:40}
.fl-clad-seam{stroke:#9aa3a6;stroke-width:40;stroke-dasharray:1.2 26}
.fl-frost{stroke:#ffffff;stroke-width:42;stroke-dasharray:2 6;stroke-linecap:round}
.fl-iso.is-insulated .fl-clad,.fl-iso.is-insulated .fl-clad-seam{opacity:1}
.fl-iso.is-frost .fl-frost{opacity:.8}
/* Steel tube, cut open along its length */
.fl-wall{stroke:#2b302d;stroke-width:26}
.fl-steel{stroke:#aab1ab;stroke-width:23}
.fl-shine{stroke:#f4f6f2;stroke-width:1.8;opacity:.85}
.fl-shade{stroke:#6c746e;stroke-width:3}
.fl-bore{stroke:#e9ece7;stroke-width:15}
.fl-rim{stroke:#2b302d;stroke-width:1;opacity:.55}
.fl-band{stroke:var(--band);stroke-width:24;transition:stroke .5s}
/* Fluid layers */
.fl-flow path{transition:stroke .4s,opacity .4s}
.fl-fluid{stroke:var(--fluid);stroke-width:13}
.fl-depth{stroke:#000;stroke-width:3.6;opacity:.14}
.fl-gloss{stroke:#fff;stroke-width:1.6;opacity:.45}
.fl-streak,.fl-p1,.fl-p2{stroke:#fff;stroke-linecap:round;animation:fl-run var(--speed,1s) linear infinite}
.fl-streak{--cyc:64;stroke-width:1.6;stroke-dasharray:18 46;opacity:.55}
.fl-p1{--cyc:37;stroke-width:2.6;stroke-dasharray:0 37;opacity:.75;animation-duration:calc(var(--speed,1s) * 1.3)}
.fl-p2{--cyc:53;stroke-width:1.8;stroke-dasharray:0 53;opacity:.6;animation-duration:calc(var(--speed,1s) * .9)}
@keyframes fl-run{from{stroke-dashoffset:0}to{stroke-dashoffset:calc(var(--cyc) * -1px)}}
/* Gas: a thin body with fast particles */
.fl-iso[data-style="gas"] .fl-bore{stroke:#f4f2ea}
.fl-iso[data-style="gas"] .fl-fluid{opacity:.45}
.fl-iso[data-style="gas"] .fl-depth,.fl-iso[data-style="gas"] .fl-gloss{opacity:0}
.fl-iso[data-style="gas"] .fl-streak{stroke:var(--fluid);filter:brightness(.8);--cyc:30;stroke-dasharray:8 22;stroke-width:2;opacity:.8}
.fl-iso[data-style="gas"] .fl-p1{stroke:#5d6660;--cyc:11;stroke-dasharray:0 11;stroke-width:2;opacity:.55}
.fl-iso[data-style="gas"] .fl-p2{stroke:#5d6660;--cyc:17;stroke-dasharray:0 17;stroke-width:1.5;opacity:.45}
/* Steam: soft wisps */
.fl-iso[data-style="steam"] .fl-bore{stroke:#cfd6d9}
.fl-iso[data-style="steam"] .fl-fluid{opacity:.5}
.fl-iso[data-style="steam"] .fl-depth{opacity:.06}
.fl-iso[data-style="steam"] .fl-streak{filter:url(#fl-blur);--cyc:38;stroke-width:7;stroke-dasharray:14 24;opacity:.95}
.fl-iso[data-style="steam"] .fl-p1,.fl-iso[data-style="steam"] .fl-p2{filter:url(#fl-blur);stroke-width:4;opacity:.8}
/* Dirty: suspended solids */
.fl-iso[data-style="dirty"] .fl-p1{stroke:#3e2c1a;--cyc:9;stroke-dasharray:0 9;stroke-width:2.4;opacity:.7}
.fl-iso[data-style="dirty"] .fl-p2{stroke:#5a4128;--cyc:14;stroke-dasharray:0 14;stroke-width:1.8;opacity:.6}
.fl-iso[data-style="dirty"] .fl-streak{opacity:.3}
/* Heavy: slow, viscous, glossy */
.fl-iso[data-style="heavy"] .fl-depth{opacity:.24}
.fl-iso[data-style="heavy"] .fl-gloss{opacity:.6}
.fl-iso[data-style="heavy"] .fl-streak{--cyc:90;stroke-dasharray:46 44;stroke-width:2.2;opacity:.4}
.fl-iso[data-style="heavy"] .fl-p1,.fl-iso[data-style="heavy"] .fl-p2{opacity:0}
/* New fluid pushing through */
.fl-fill{stroke:var(--fluid);stroke-width:13;opacity:0}
.fl-iso.is-filling .fl-fill{opacity:1}

.fl-tagbox{fill:var(--white);stroke:var(--band);stroke-width:2;transition:stroke .5s,width .3s}
.fl-tagtext{fill:var(--ink);font:700 9px var(--font-mono);letter-spacing:.06em}
.fl-info{display:grid;gap:4px;margin:0;font:var(--t-note)/1.4 var(--font-body)}
.fl-info div{display:grid;grid-template-columns:110px 1fr;gap:8px}
.fl-info dt{color:var(--rust-text);font:700 10px/1.6 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.fl-info dd{margin:0;color:var(--ink)}
.fl-swatch{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;border:1px solid var(--ink)}
.fl-note{margin:8px 0 0;color:var(--soft);font:11px/1.4 var(--font-mono)}
.flip-back-btn{align-self:flex-start;margin-top:8px;padding:6px 10px;border:1px solid var(--ink);background:transparent;color:var(--rust-text);font:700 var(--t-label)/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.flip-back-btn:hover,.flip-back-btn:focus-visible{background:var(--ink);color:var(--white);outline:none}
/* Interactive backs: the whole-card flip button only covers the front. */
.flip-live.is-flipped>.flip-btn{display:none}
/* No hover tilt while you are using the back. */
.flip-live.is-flipped:hover .flip-in,.flip-live.is-flipped:focus-within .flip-in{transform:rotateY(180deg)!important}
.flip-live .flip-back .flip-hint{display:none!important}
:root[data-night-shift="true"] .pipes.flip-ready .flip-back{background-color:#1c2925;background-image:linear-gradient(#788d801c 1px,transparent 1px)}
:root[data-night-shift="true"] .fl-bore{stroke:#33433c}
:root[data-night-shift="true"] .fl-steel{stroke:#7d877f}
@media(max-width:620px){.fl-info div{grid-template-columns:1fr;gap:0}}
@media(prefers-reduced-motion:reduce){.fl-streak,.fl-p1,.fl-p2,.fl-auto.is-on span::after{animation:none}}