.xsection{position:relative;width:100%}
.xsection svg{width:100%;height:auto;display:block;overflow:visible}
.xs-frame{
  position:relative;border:1px solid var(--line-navy);border-radius:3px;
  background:linear-gradient(180deg,rgba(16,37,57,.5),rgba(11,27,46,.2));
  padding:clamp(1rem,2.5vw,1.8rem);
}
:is(.surface-paper,.surface-paper-2) .xs-frame{border-color:var(--line);background:linear-gradient(180deg,var(--paper-2),var(--paper))}
.xs-titlebar{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-navy-faint);padding-bottom:.9rem;margin-bottom:.4rem;border-bottom:1px solid var(--line-navy);
}
:is(.surface-paper,.surface-paper-2) .xs-titlebar{color:var(--ink-faint);border-color:var(--line)}
.xs-titlebar .dot{width:6px;height:6px;border-radius:50%;background:var(--blue);display:inline-block;margin-right:.5em;box-shadow:0 0 0 4px rgba(108,151,194,.15)}

/* svg line vocabulary */
.xs-line{fill:none;stroke:var(--blue);stroke-width:1.4;vector-effect:non-scaling-stroke}
.xs-line-soft{fill:none;stroke:var(--line-navy-2);stroke-width:1;vector-effect:non-scaling-stroke}
.xs-fill-navy{fill:var(--navy-2)}
.xs-concrete{fill:rgba(157,177,198,.09);stroke:var(--blue);stroke-width:1.2;vector-effect:non-scaling-stroke}
.xs-label{font-family:var(--f-mono);font-size:11px;fill:var(--on-navy-soft);letter-spacing:.06em}
:is(.surface-paper,.surface-paper-2) .xs-label{fill:var(--ink-soft)}
.xs-num{font-family:var(--f-mono);font-size:11px;font-weight:500;fill:var(--navy)}
.xs-water{fill:var(--steel);opacity:.28}
.xs-rain line{stroke:var(--blue-bright);stroke-width:1.4;opacity:.55;vector-effect:non-scaling-stroke}
.xs-gravel circle{fill:var(--blue);opacity:.5}
.xs-flow{fill:none;stroke:var(--blue-bright);stroke-width:2;stroke-dasharray:5 9;vector-effect:non-scaling-stroke;opacity:.9}
.xs-radon{stroke:var(--blue-bright);stroke-width:1.6;fill:none;vector-effect:non-scaling-stroke}

/* animated states (added by JS when in view / not reduced motion) */
.xs-anim .xs-rain line{animation:rainFall linear infinite}
.xs-anim .xs-flow{animation:dash 1.1s linear infinite}
.xs-anim .xs-radon-p{animation:radonRise 2.6s ease-in infinite}
.xs-anim .xs-wt{animation:wtStorm 11s ease-in-out infinite}
.xs-anim .xs-flow{animation:dash 1.1s linear infinite}
@keyframes rainFall{from{transform:translateY(-26px)}to{transform:translateY(26px)}}
@keyframes dash{to{stroke-dashoffset:-28}}
@keyframes radonRise{0%{opacity:0;transform:translateY(6px)}20%{opacity:.9}100%{opacity:0;transform:translateY(-52px)}}
@keyframes wtStorm{0%{transform:translateY(6px)}42%{transform:translateY(-42px)}58%{transform:translateY(-42px)}100%{transform:translateY(6px)}}

/* interactive callouts - collapsible component list */
.xs-legend{list-style:none;display:grid;gap:.5rem;margin-top:1.4rem}
.xs-legend li{margin:0}
.xs-li{border:1px solid var(--line-navy);border-radius:5px;overflow:hidden;align-self:start;transition:border-color .25s var(--ease)}
:is(.surface-paper,.surface-paper-2) .xs-li{border-color:var(--line)}
.xs-li.open{border-color:var(--steel)}
.xs-li-head{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;color:inherit;
  display:grid;grid-template-columns:auto 1fr auto;gap:.85rem;align-items:center;
  padding:.95rem 1rem;transition:background .2s var(--ease);
}
.xs-li-head:hover,.xs-li.open .xs-li-head{background:var(--navy-2)}
:is(.surface-paper,.surface-paper-2) .xs-li-head:hover,:is(.surface-paper,.surface-paper-2) .xs-li.open .xs-li-head{background:var(--paper-2)}
.xs-li .n{
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;color:var(--paper);
  background:var(--steel);width:1.9em;height:1.9em;border-radius:50%;display:grid;place-items:center;
}
.xs-li .t{font-family:var(--f-display);font-weight:600;font-size:.98rem;line-height:1.25;letter-spacing:-.01em}
.xs-li .pm{position:relative;width:13px;height:13px;flex:none;opacity:.85}
.xs-li .pm::before,.xs-li .pm::after{content:"";position:absolute;background:var(--blue);transition:transform .25s var(--ease)}
:is(.surface-paper,.surface-paper-2) .xs-li .pm::before,:is(.surface-paper,.surface-paper-2) .xs-li .pm::after{background:var(--steel)}
.xs-li .pm::before{top:5.5px;left:0;width:13px;height:2px}
.xs-li .pm::after{top:0;left:5.5px;width:2px;height:13px}
.xs-li.open .pm::after{transform:scaleY(0)}
.xs-li-body{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.xs-li-inner{padding:0 1rem 1.05rem calc(1rem + 1.9em + .85rem)}
.xs-li .d{font-family:var(--f-body);font-size:.92rem;color:var(--on-navy-soft);line-height:1.55;margin:0}
:is(.surface-paper,.surface-paper-2) .xs-li .d{color:var(--ink-soft)}
.xs-marker{fill:var(--steel);stroke:var(--paper);stroke-width:1.5;transition:fill .2s ease,r .2s ease}
.xs-hit{fill:transparent;stroke:none}
.xs-marker-t{font-family:var(--f-mono);font-size:11px;font-weight:500;fill:var(--paper)}
.xs-part{transition:opacity .3s var(--ease)}
.xsection.dimmed .xs-part:not(.hot){opacity:.22}
.xsection.dimmed .xs-part.hot{opacity:1}
/* water-story additions */
.xs-membrane{fill:var(--blue-bright);opacity:.85}
.xs-drainboard circle{fill:var(--steel);opacity:.7}
.xs-foam{fill:#a9bdcf;opacity:.92}
.xs-geo{fill:none;stroke:#D9B85C;stroke-width:1.8;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.xs-pipe{fill:none;stroke:var(--blue-bright);stroke-width:2;vector-effect:non-scaling-stroke}
.xs-pipe-dot{fill:var(--blue-bright)}
.xs-dry{font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;fill:var(--on-navy);opacity:.72}
:is(.surface-paper,.surface-paper-2) .xs-dry{fill:var(--ink)}
.xs-dry-sub{font-family:var(--f-body);font-size:12px;fill:var(--on-navy-soft)}
:is(.surface-paper,.surface-paper-2) .xs-dry-sub{fill:var(--ink-soft)}
.xs-mini{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;fill:#6C97C2}
.xs-rise-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;fill:#AECBEA;font-weight:500}
:is(.surface-paper,.surface-paper-2) .xs-rise-label{fill:var(--steel)}
/* ---- full-bleed interactive assembly ---- */
.assembly-full{position:relative}
.assembly-full .xs-frame{padding:clamp(1rem,2vw,1.6rem)}
.assembly-full .xs-fig{position:relative}
.xs-hint{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-navy-faint);display:flex;align-items:center;gap:.6rem;margin-top:1rem;
}
:is(.surface-paper,.surface-paper-2) .xs-hint{color:var(--ink-faint)}
.xs-hint::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}

/* number chips under the drawing */
.xs-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem;list-style:none}
.xs-chip{
  display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;color:inherit;
  background:none;border:1px solid var(--line-navy);border-radius:999px;
  padding:.45rem .95rem .45rem .45rem;transition:border-color .2s var(--ease),background .2s var(--ease);
}
:is(.surface-paper,.surface-paper-2) .xs-chip{border-color:var(--line)}
.xs-chip .n{
  font-family:var(--f-mono);font-size:.7rem;font-weight:500;color:var(--paper);background:var(--steel);
  width:1.75em;height:1.75em;border-radius:50%;display:grid;place-items:center;flex:none;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.xs-chip .t{font-family:var(--f-display);font-weight:500;font-size:.82rem;letter-spacing:-.005em;white-space:nowrap}
.xs-chip:hover{border-color:var(--steel)}
.xs-chip.active{border-color:var(--blue-bright);background:var(--navy-2)}
:is(.surface-paper,.surface-paper-2) .xs-chip.active{background:var(--paper-2)}
.xs-chip.active .n{background:var(--blue-bright);color:var(--navy)}
@media(max-width:700px){.xs-chip .t{display:none}.xs-chip{padding:0;min-width:44px;min-height:44px;justify-content:center;gap:0}}

/* anchored popup */
.xs-pop{
  position:absolute;z-index:6;width:min(21rem,74vw);pointer-events:none;
  opacity:0;transform:translateY(6px);transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.xs-pop.on{opacity:1;transform:none;pointer-events:auto}
.xs-pop-card{
  background:rgba(11,27,46,.97);border:1px solid var(--line-navy);border-left:2px solid var(--blue-bright);
  border-radius:6px;padding:1rem 1.15rem;box-shadow:0 22px 48px -20px rgba(0,0,0,.75);
  display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;
}
:is(.surface-paper,.surface-paper-2) .xs-pop-card{background:rgba(255,255,255,.98);border-color:var(--line);box-shadow:0 22px 48px -22px rgba(11,27,46,.4)}
.xs-pop-n{
  font-family:var(--f-mono);font-size:.7rem;font-weight:500;color:var(--navy);background:var(--blue-bright);
  width:1.8em;height:1.8em;border-radius:50%;display:grid;place-items:center;
}
.xs-pop-t{font-family:var(--f-display);font-weight:600;font-size:.95rem;line-height:1.25;letter-spacing:-.01em;margin:0 0 .3rem;color:var(--on-navy)}
:is(.surface-paper,.surface-paper-2) .xs-pop-t{color:var(--navy)}
.xs-pop-d{font-family:var(--f-body);font-size:.86rem;line-height:1.5;color:var(--on-navy-soft);margin:0}
:is(.surface-paper,.surface-paper-2) .xs-pop-d{color:var(--ink-soft)}

.xs-mk{transition:opacity .25s var(--ease)}
.xs-mk.on .xs-marker{fill:var(--blue-bright);r:12}
.xs-mk.on .xs-marker-t{fill:var(--navy)}
@media (prefers-reduced-motion:reduce){.xs-pop{transition:none}}
.xs-interior{fill:#FFFFFF}
.surface-navy .xs-interior{fill:#ffffff}

/* elements drawn over the white interior */
/* The sump riser and the radon stack both cross the interior, so the
   dry-basement label carries a halo and paints its stroke behind the
   glyphs rather than over them. */
.xs-dry{fill:var(--navy);opacity:1;font-weight:500;font-size:12.5px;letter-spacing:.11em;
  paint-order:stroke fill;stroke:#FFFFFF;stroke-width:5px;stroke-linejoin:round}
.xs-dry-sub{fill:var(--ink-soft);font-size:12.5px;
  paint-order:stroke fill;stroke:#FFFFFF;stroke-width:4px;stroke-linejoin:round}
.surface-navy .xs-dry,.surface-navy .xs-dry-sub{stroke:#ffffff}
:is(.surface-paper,.surface-paper-2) .xs-dry{fill:var(--navy)}
:is(.surface-paper,.surface-paper-2) .xs-dry-sub{fill:var(--ink-soft)}
.xs-win{fill:none;stroke:var(--line-2);stroke-width:1;vector-effect:non-scaling-stroke}
.xs-riser{fill:none;stroke:var(--steel);stroke-width:1.5;vector-effect:non-scaling-stroke}
.xs-flow-dark{stroke:var(--steel);opacity:1}
.xs-radon-p{fill:var(--steel)}
.xs-radon{stroke:var(--steel)}

/* labels: darker on light surfaces */
:is(.surface-paper,.surface-paper-2) .xs-label{fill:var(--ink)}
:is(.surface-paper,.surface-paper-2) .xs-mini{fill:var(--steel)}
:is(.surface-paper,.surface-paper-2) .xs-rise-label{fill:var(--navy)}
:is(.surface-paper,.surface-paper-2) .xs-dry-sub{fill:var(--ink-soft)}

/* numbered markers: navy disc, cream numeral, legible on white and on navy */
.xs-marker{fill:var(--navy);stroke:var(--paper);stroke-width:1.6}
.xs-marker-t{fill:var(--paper);font-weight:500}
.diagram-band{padding:clamp(24px,4vw,65px) 0;--line-navy:#526878;--line-navy-2:#587182;--navy-2:#233c50;--steel:#6587a4;--blue:#a0c4df;--blue-bright:#b2d7f0;--on-navy:#fff;--on-navy-soft:#d5e2e7;--on-navy-faint:#bfccd3;--ink-soft:#344d5a;--f-display:var(--sans);--f-body:var(--sans);--f-mono:var(--sans);--ease:ease-out}
.assembly-full{max-width:980px;margin:auto}.xs-fig{max-width:800px;margin:auto}.xs-chips{padding:0}.xs-chip{min-height:44px}.xs-frame{overflow:clip}.xs-hint{font-size:.76rem}.xs-pop{max-width:95%}.xs-titlebar{font-size:.75rem}
@media(max-width:700px){.xs-chips{display:grid;grid-template-columns:1fr 1fr}.xs-chip{border-radius:3px;padding:5px 9px;gap:7px;justify-content:start;width:100%;text-align:left}.xs-chip .t{display:inline;white-space:normal;line-height:1.2}.xs-pop{position:static;display:none;width:100%;max-width:none}.xs-pop.on{display:block}}