/* Interactive 9.1.5 explorer. Colours follow the Material light/dark scheme. */
#ux {
  --ux-ink: var(--md-default-fg-color);
  --ux-muted: var(--md-default-fg-color--light);
  --ux-line: var(--md-default-fg-color--lightest);
  --ux-accent: #00897b;
  --ux-orange: #d84315;
  --ux-red: #c62828;
  --ux-soft: rgba(0, 137, 123, .12);
  --ux-pipe: #54757e;
}
[data-md-color-scheme="slate"] #ux {
  --ux-accent: #4db6ac;
  --ux-orange: #ffab76;
  --ux-red: #ff8a80;
  --ux-soft: rgba(77, 182, 172, .16);
}
#ux:not(.ready)::before { content: "Loading…"; color: var(--ux-muted); }

/* ---- controls ---- */
#ux .ux-bar { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; margin: 0 0 1rem; }
#ux .ux-field { display: flex; flex-direction: column; gap: .25rem; }
#ux .ux-lab { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ux-muted); font-weight: 700; }
#ux .ux-seg { display: inline-flex; border: 1.5px solid var(--ux-accent); border-radius: 10px; overflow: hidden; }
#ux .ux-seg button, #ux .ux-tabs button, #ux .ux-ctl button {
  font: inherit; cursor: pointer; border: 0; background: transparent; color: var(--ux-ink);
  padding: .5rem .95rem; min-height: 2.6rem; line-height: 1.1;
}
#ux .ux-seg button + button { border-left: 1.5px solid var(--ux-accent); }
#ux .ux-seg button small { display: block; font-size: .62rem; opacity: .75; font-weight: 400; }
#ux .ux-seg button.on { background: var(--ux-accent); color: #fff; font-weight: 700; }
[data-md-color-scheme="slate"] #ux .ux-seg button.on { color: #00201c; }
#ux button:focus-visible, #ux select:focus-visible { outline: 3px solid var(--md-accent-fg-color); outline-offset: 2px; }

#ux .ux-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.2rem; margin: .4rem 0 .6rem; }
#ux .ux-head h2 { margin: 0; font-size: 1.5rem; }
#ux .ux-keys { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
#ux .ux-keys li { margin: 0; padding: .25rem .65rem; border-radius: 999px; background: var(--ux-soft); font-size: .8rem; }
#ux .ux-keys li span { color: var(--ux-muted); margin-right: .4em; }

#ux .ux-rigwrap { border: 1px solid var(--ux-line); border-radius: 12px; background: var(--md-default-bg-color); overflow-x: auto; }
#ux .ux-rigwrap svg { display: block; width: 100%; height: auto; min-width: 760px; }
#ux .ux-rigwrap.narrow { max-width: 640px; }
#ux .ux-rigwrap.narrow svg { min-width: 480px; }
#ux .ux-note { font-size: .75rem; color: var(--ux-muted); margin: .4rem 0 1rem; }

#ux .ux-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; border-bottom: 2px solid var(--ux-line); }
#ux .ux-tabs button { border-radius: 10px 10px 0 0; font-weight: 600; margin-bottom: -2px; border-bottom: 3px solid transparent; }
#ux .ux-tabs button.on { border-bottom-color: var(--ux-accent); color: var(--ux-accent); background: var(--ux-soft); }
#ux .ux-panel[hidden] { display: none; }

/* ---- value cards ---- */
#ux .ux-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .9rem; }
#ux .ux-card { border: 1px solid var(--ux-line); border-radius: 12px; padding: .8rem 1rem; background: var(--md-default-bg-color); }
#ux .ux-card h3 { margin: 0 0 .5rem; font-size: .95rem; color: var(--ux-accent); }
#ux .ux-card dl { margin: 0; }
#ux .ux-card dl > div { padding: .4rem 0; border-top: 1px solid var(--ux-line); }
#ux .ux-card dl > div:first-child { border-top: 0; }
#ux .ux-card dt { font-size: .72rem; color: var(--ux-muted); margin: 0; }
#ux .ux-card dd { margin: 0; font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; }
#ux .ux-card dd small { display: block; font-weight: 400; font-size: .68rem; color: var(--ux-muted); }
#ux .ux-tag { font-style: normal; font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .08rem .4rem; border-radius: 6px; margin-left: .3rem; vertical-align: middle; }
#ux .ux-tag.spec { background: var(--ux-soft); color: var(--ux-accent); }
#ux .ux-tag.int { background: rgba(255, 143, 0, .18); color: var(--ux-orange); }
#ux .ux-tag.ref { background: var(--ux-line); color: var(--ux-muted); }
#ux .ux-tablewrap { overflow-x: auto; }
#ux table.ux-parts { width: 100%; font-size: .8rem; }

/* ---- player ---- */
#ux .ux-ctl { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
#ux .ux-ctl button { border: 1.5px solid var(--ux-accent); border-radius: 10px; min-width: 2.8rem; }
#ux .ux-ctl .ux-play { background: var(--ux-accent); color: #fff; font-weight: 700; min-width: 7.5rem; }
[data-md-color-scheme="slate"] #ux .ux-ctl .ux-play { color: #00201c; }
#ux .ux-speed { margin-left: auto; font-size: .8rem; color: var(--ux-muted); display: flex; gap: .4rem; align-items: center; }
#ux .ux-speed select { font: inherit; padding: .35rem; border-radius: 8px; border: 1.5px solid var(--ux-accent); background: var(--md-default-bg-color); color: var(--ux-ink); }
#ux .ux-bar2 { height: 6px; border-radius: 3px; background: var(--ux-line); margin: .7rem 0; overflow: hidden; }
#ux .ux-bar2 i { display: block; height: 100%; width: 0; background: var(--ux-accent); }
#ux .ux-now { border-left: 4px solid var(--ux-accent); background: var(--ux-soft); border-radius: 0 10px 10px 0; padding: .6rem .9rem; }
#ux .ux-now-t { display: block; font-size: 1.05rem; }
#ux .ux-now-k { display: inline-block; margin: .25rem 0; padding: .1rem .55rem; border-radius: 6px; background: var(--ux-accent); color: #fff; font-size: .8rem; font-weight: 700; }
[data-md-color-scheme="slate"] #ux .ux-now-k { color: #00201c; }
#ux .ux-now-p { margin: .2rem 0 0; font-size: .85rem; }
#ux ol.ux-steps { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
#ux ol.ux-steps li { margin: 0; }
#ux ol.ux-steps button { font: inherit; font-size: .75rem; cursor: pointer; border: 1.5px solid var(--ux-line); border-radius: 8px; background: transparent; color: var(--ux-muted); padding: .35rem .6rem; }
#ux ol.ux-steps li.done button { border-color: var(--ux-accent); color: var(--ux-ink); }
#ux ol.ux-steps li.on button { background: var(--ux-accent); border-color: var(--ux-accent); color: #fff; font-weight: 700; }
[data-md-color-scheme="slate"] #ux ol.ux-steps li.on button { color: #00201c; }
#ux .ux-tracewrap { margin-top: .8rem; border: 1px solid var(--ux-line); border-radius: 12px; overflow-x: auto; }
#ux .ux-tracewrap svg { display: block; width: 100%; min-width: 480px; height: auto; }

/* ---- SVG parts ---- */
#ux svg text { font-family: inherit; }
#ux .ux-pipes path, #ux .ux-pipe-hose, #ux .ux-pipe-stub { fill: none; stroke: var(--ux-pipe); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
#ux .ux-pipes path.thin { stroke: var(--ux-ink); stroke-width: 2.5; }
#ux .ux-dots path, #ux .ux-stubdots { fill: none; stroke: #fff; stroke-width: 3.5; stroke-dasharray: 1 15; stroke-linecap: round; opacity: 0; }
#ux .ux-part { fill: var(--md-default-bg-color); stroke: var(--ux-ink); stroke-width: 2.5; }
#ux .ux-act { stroke-dasharray: none; }
#ux .ux-valve { stroke-linejoin: round; }
#ux .ux-valve.ux-open { fill: var(--ux-accent); }
#ux .ux-thin { fill: none; stroke: var(--ux-ink); stroke-width: 2.2; }
#ux .ux-plug { fill: #ffcc80; stroke: #e65100; stroke-width: 3; }
#ux .ux-sock { fill: #ffe0b2; stroke: #e65100; stroke-width: 3; }
#ux #ux-pair .ux-qd { fill: #4e342e; }
#ux .ux-lbl { font-size: 17px; font-weight: 700; fill: var(--ux-ink); text-anchor: middle; }
#ux .ux-sub { font-size: 13px; fill: var(--ux-muted); text-anchor: middle; }
#ux .ux-sub.ux-b { font-weight: 700; fill: var(--ux-ink); }
#ux .ux-sub.ux-small { font-size: 11px; }
#ux .ux-sub.ux-dim { fill: var(--ux-orange); font-weight: 700; }
#ux .ux-sub.ux-qd { letter-spacing: .06em; font-size: 12px; }
#ux .ux-dimline { fill: none; stroke: var(--ux-orange); stroke-width: 1.6; }
#ux .ux-dash { stroke-dasharray: 3 3; }
#ux .ux-fillink { fill: var(--ux-orange); }
#ux .ux-chip { fill: var(--md-default-bg-color); stroke: var(--ux-ink); stroke-width: 1.5; }
#ux .ux-chipt { font-size: 14px; font-weight: 700; fill: var(--ux-ink); text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; }
#ux g.ux-hi .ux-chip, #ux .ux-chip.ux-hi { stroke: var(--ux-accent); stroke-width: 2.5; fill: var(--ux-soft); }
#ux g.ux-bad .ux-chip { stroke: var(--ux-red); stroke-width: 3; }
#ux g.ux-bad .ux-chipt { fill: var(--ux-red); }
#ux .ux-leader { stroke: var(--ux-muted); stroke-width: 1.2; stroke-dasharray: 3 3; fill: none; }
#ux .ux-liq { fill: var(--ux-accent); opacity: .35; }
#ux .ux-imp { fill: none; stroke: var(--ux-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#ux .ux-lens { fill: none; stroke: var(--ux-ink); stroke-width: 3; stroke-linecap: round; }
#ux .ux-stroke { fill: var(--ux-accent); }
#ux .ux-trace { fill: none; stroke: var(--ux-accent); stroke-width: 2.2; stroke-linejoin: round; }
#ux .ux-limit { stroke: var(--ux-red); stroke-width: 1.5; stroke-dasharray: 5 4; }
#ux .ux-zone-bad { fill: var(--ux-red); opacity: .07; }
#ux .ux-limt { fill: var(--ux-red); }

@media screen and (max-width: 44.984em) {
  #ux .ux-bar { gap: .7rem; }
  #ux .ux-seg button { padding: .5rem .7rem; }
  #ux .ux-head h2 { font-size: 1.25rem; }
  #ux .ux-speed { margin-left: 0; }
}
@media print {
  #ux .ux-tabs, #ux .ux-ctl, #ux .ux-player { display: none; }
}

/* ---------- 9.1.4 Pressure drop page ---------- */
#ux .ux-badge { fill: var(--ux-ink); }
#ux .ux-badget { font-size: 12px; font-weight: 700; fill: var(--md-default-bg-color); text-anchor: middle; dominant-baseline: central; }
#ux .ux-tap { fill: var(--ux-ink); }
#ux .ux-bubble { fill: none; stroke: var(--ux-red); stroke-width: 1.6; }
#ux .ux-bar0 { fill: var(--ux-line); }
#ux .ux-bar1 { fill: var(--ux-accent); }
#ux .ux-adp { fill: var(--md-default-bg-color); stroke: var(--ux-ink); stroke-width: 2.2; }
#ux .ux-clamp { fill: var(--ux-ink); }
#ux .ux-tareadp { fill: #cfd8dc; stroke: var(--ux-ink); stroke-width: 2.5; }
[data-md-color-scheme="slate"] #ux .ux-tareadp { fill: #455a64; }
#ux #ux-tareadp .ux-sub { fill: var(--ux-ink); }
#ux #ux-dims.ux-pulse .ux-dimline { stroke-width: 3; }
#ux #ux-dims.ux-pulse .ux-d { font-size: 16px; }
#ux .ux-band { fill: var(--ux-accent); opacity: .14; }
#ux .ux-grid { stroke: var(--ux-line); stroke-width: 1; fill: none; }
#ux .ux-axis { stroke: var(--ux-ink); stroke-width: 1.5; fill: none; }
#ux .ux-fit { fill: none; stroke: var(--ux-accent); stroke-width: 2.2; }
#ux .ux-fit-b { stroke: var(--ux-orange); stroke-dasharray: 6 3; }
#ux .ux-fit-t { stroke: var(--ux-muted); stroke-dasharray: 3 3; }
#ux .ux-pt-a { fill: var(--ux-accent); stroke: var(--md-default-bg-color); stroke-width: 1.5; }
#ux .ux-pt-b { fill: var(--ux-orange); stroke: var(--md-default-bg-color); stroke-width: 1.5; }
#ux .ux-pt-t { fill: none; stroke: var(--ux-muted); stroke-width: 2; }
#ux .ux-row-hi td { background: var(--ux-soft); }
#ux .ux-muted { color: var(--ux-muted); font-size: .85rem; }

#ux .ux-calc-tools { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin: .8rem 0; font-size: .85rem; }
#ux .ux-calc-tools button, #ux table.ux-in + .ux-result + .ux-calc-tools button, #ux .ux-calc button[data-c] {
  font: inherit; cursor: pointer; border: 1.5px solid var(--ux-accent); border-radius: 10px; background: transparent; color: var(--ux-ink); padding: .45rem .9rem; min-height: 2.4rem;
}
#ux .ux-calc button[data-c="add"] { background: var(--ux-accent); color: #fff; font-weight: 700; }
[data-md-color-scheme="slate"] #ux .ux-calc button[data-c="add"] { color: #00201c; }
#ux .ux-calc button:disabled { opacity: .45; cursor: not-allowed; }
#ux .ux-calc input[type=range] { width: 11rem; vertical-align: middle; accent-color: var(--ux-accent); }
#ux .ux-calc select { font: inherit; padding: .35rem; border-radius: 8px; border: 1.5px solid var(--ux-accent); background: var(--md-default-bg-color); color: var(--ux-ink); }
#ux table.ux-in input { width: 100%; min-width: 5.5rem; font: inherit; padding: .4rem .5rem; border: 1.5px solid var(--ux-line); border-radius: 8px; background: var(--md-default-bg-color); color: var(--ux-ink); font-variant-numeric: tabular-nums; }
#ux table.ux-in input:focus { border-color: var(--ux-accent); outline: 2px solid var(--md-accent-fg-color); }
#ux .ux-net { font-variant-numeric: tabular-nums; font-weight: 700; }
#ux .ux-res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin: .8rem 0; }
#ux .ux-res-grid > div { border: 1px solid var(--ux-line); border-radius: 10px; padding: .5rem .7rem; }
#ux .ux-res-grid span { display: block; font-size: .7rem; color: var(--ux-muted); }
#ux .ux-res-grid b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
#ux .ux-res-grid small { display: block; font-size: .7rem; color: var(--ux-muted); }
#ux .ux-res-grid .ok { border-color: var(--ux-accent); background: var(--ux-soft); }
#ux .ux-res-grid .ok small { color: var(--ux-accent); font-weight: 700; }
#ux .ux-res-grid .bad { border-color: var(--ux-red); }
#ux .ux-res-grid .bad small { color: var(--ux-red); font-weight: 700; }
#ux .ux-verdicts { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .4rem; }
#ux .ux-verdicts li { margin: 0; padding: .5rem .8rem; border-radius: 10px; border: 1px solid var(--ux-line); font-size: .85rem; }
#ux .ux-verdicts li.ok { border-color: var(--ux-accent); background: var(--ux-soft); }
#ux .ux-verdicts li.bad { border-color: var(--ux-red); }
#ux .ux-ok { color: var(--ux-accent); font-weight: 700; }
#ux .ux-bad-t { color: var(--ux-red); font-weight: 700; }