/* /showcase/build-plant: "The plant drawing". Stylesheet for this page only.

   The page is one drawing sheet: a Paper field on an 8px grid at 4% Ink,
   an outer and an inner Ink frame with zones 1 to 8 and A to F between
   them, and a Band title block in the bottom right corner. Linework is
   two pen weights only, 1.25px and 2.5px, and every colour keeps its site
   meaning: Teal on an open valve and a confirmed count, Blue on the one
   changed fact, Amber on the disqualifier buffer stops, Slate on the
   disqualifier trays.

   THE JOINS ARE ARITHMETIC. The drawing is an SVG (sources, header,
   vessel) beside an HTML manifold whose riser is a CSS border, so the
   tags can open in normal flow without breaking a line. Three numbers
   hold the lines together and are set once, per layout, as custom
   properties on .wp-plant:
     --up    width of the upstream SVG, which is where the riser sits
     --rx    x of the return line's vertical run (its centre)
     --ry    y of the return line's top run (its centre)
   The SVGs are drawn at 1:1 so their coordinates are pixels. */

.wp-wrap { padding: 8px 20px 56px; }

.wp-sheet {
  --pen: 1.25px;
  --pen2: 2.5px;
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid var(--ink);
  background: var(--bg);
}
.wp-sheet ::selection { background: var(--pill-new-bg); color: var(--ink); }

/* ── Zones ─────────────────────────────────────────────────────── */
.wp-zone {
  position: absolute;
  display: flex;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.02em;
  color: var(--muted);
  user-select: none;
}
.wp-zone span { flex: 1; display: flex; align-items: center; justify-content: center; }
.wp-zone-top, .wp-zone-bottom { left: 20px; right: 20px; height: 20px; }
.wp-zone-top { top: 0; }
.wp-zone-bottom { bottom: 0; }
.wp-zone-top span + span, .wp-zone-bottom span + span { border-left: 1px solid var(--ink); }
.wp-zone-left, .wp-zone-right { top: 20px; bottom: 20px; width: 20px; flex-direction: column; }
.wp-zone-left { left: 0; }
.wp-zone-right { right: 0; }
.wp-zone-left span + span, .wp-zone-right span + span { border-top: 1px solid var(--ink); }

.wp-field {
  position: relative;
  border: 1px solid var(--ink);
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M8 .5H.5V8' fill='none' stroke='%2311161B' stroke-opacity='.04'/%3E%3C/svg%3E");
  padding: 8px 24px 0;
}

/* The drawing caption: what this sheet is a drawing of, underlined the
   way a drawing titles a view, a heavy pen over a light one. */
.wp-caption {
  display: table;
  margin: 0 0 6px;
  padding-bottom: 3px;
  border-bottom: var(--pen2) solid var(--ink);
  font: 500 12px/1.35 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.wp-caption::after {
  content: "";
  display: block;
  height: 0;
  margin-bottom: -3px;
  transform: translateY(6px);
  border-bottom: var(--pen) solid var(--ink);
}

/* ── The first viewport: intro left, plant right ───────────────── */
.wp-first {
  display: grid;
  grid-template-columns: minmax(330px, 4fr) minmax(0, 8fr);
  gap: 28px;
  align-items: start;
}

.wp-intro { padding-top: 0; max-width: 30em; }
.wp-intro h1 {
  font-size: clamp(40px, 4.2vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.032em;
  color: var(--ink);
}
.wp-l { display: block; }
.wp-lede {
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--body);
}
.wp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ── The plant ─────────────────────────────────────────────────── */
.wp-plant {
  --up: 410px;
  --rx: 8px;
  --ry: 22px;
  --tee: 262px;      /* x of the return drop inside the receivers SVG */
  --bot: 28px;       /* room under the plant for the return line's run */
  --run: 12px;       /* distance of that run from the plant's foot */
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  padding-bottom: var(--bot);
}

.wp-return {
  position: absolute;
  left: calc(var(--rx) - var(--pen) / 2);
  top: calc(var(--ry) - var(--pen) / 2);
  bottom: var(--run);
  width: calc(var(--up) + var(--tee) + var(--pen) / 2 - var(--rx) + var(--pen) / 2);
  border-left: var(--pen) solid var(--ink);
  border-bottom: var(--pen) solid var(--ink);
  pointer-events: none;
}

.wp-glass-sym {
  position: absolute;
  left: 188px;
  bottom: calc(var(--run) + var(--pen) / 2 - 11px);
  width: 44px;
  height: 22px;
}
.wp-flange { fill: var(--ink); }
.wp-glass-body { fill: var(--surface); stroke: var(--ink); stroke-width: var(--pen); }

.wp-callout {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: var(--pen) solid var(--ink);
  border-radius: 50%;
  background: var(--surface);
  font: 500 12px/1 var(--mono);
  color: var(--ink);
  transition: background 160ms ease, color 160ms ease;
}
.wp-callout::before { content: ""; position: absolute; inset: -9px; }
.wp-callout:hover { background: var(--ink); color: var(--bg); }
.wp-callout-b { left: 197px; bottom: calc(var(--run) + 16px); }
.wp-callout-a { left: 276px; top: 36px; }

.wp-upstream { flex: none; width: var(--up); }
.wp-svg { display: block; overflow: visible; }
.wp-svg-v { display: none; }

/* SVG linework and lettering */
.wp-p1, .wp-p2, .wp-src { fill: none; stroke: var(--ink); }
.wp-p1 { stroke-width: var(--pen); }
.wp-p2 { stroke-width: var(--pen2); }
.wp-arrow { fill: var(--ink); }
.wp-t {
  font: 500 12px var(--mono);
  letter-spacing: 0.02em;
  fill: var(--ink);
  font-variant-numeric: tabular-nums;
}
.wp-t-m { fill: var(--muted); }
.wp-t-end { text-anchor: end; }
.wp-t-mid { text-anchor: middle; }
.wp-t-count { fill: var(--teal-deep); }
.wp-t-slate { fill: var(--muted); }
.wp-note { font: 400 13px var(--text); fill: var(--muted); }
.wp-vessel { fill: var(--surface); stroke: var(--ink); stroke-width: var(--pen2); }
.wp-tray line { stroke: var(--ink); stroke-width: var(--pen); }
.wp-tray-neg line { stroke: var(--slate); stroke-width: var(--pen2); }
.wp-hit { fill: transparent; }
/* A buffer stop: a bar across the line end, with its two stop blocks. */
.wp-stop { fill: none; stroke: var(--amber); stroke-width: var(--pen2); }
.wp-drum { fill: var(--surface); stroke: var(--ink); stroke-width: var(--pen); }

/* ── The manifold ──────────────────────────────────────────────── */
.wp-down {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Everything above the riser's top, which is the vessel outlet's line. */
.wp-mhead {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  height: calc(66px - var(--pen2) / 2);
  padding: 0 0 12px 0;
}

.wp-flowtag {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: var(--pen) solid var(--ink);
  border-radius: 12px;
  background: var(--surface);
  font: 500 12px/1.3 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* A leader from the flow tag down into the corner where the outlet
   meets the riser. */
.wp-mhead > .wp-flowtag { margin-left: -10px; }
.wp-mhead > .wp-flowtag::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 100%;
  width: var(--pen);
  height: 12px;
  background: var(--ink);
}

.wp-mctl { display: flex; gap: 14px; }
.wp-mctl[hidden] { display: none; }
.wp-textbtn {
  background: none;
  border: 0;
  padding: 6px 0;
  font: 500 12px/1.3 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--slate);
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.wp-textbtn:hover { color: var(--teal-deep); text-decoration-color: currentColor; }

.wp-manifold {
  flex: 1 0 auto;
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  border-left: var(--pen2) solid var(--ink);
}
.wp-row { position: relative; }
.wp-row + .wp-row { margin-top: 0; }
.wp-row-h {
  margin: 0;
  font: inherit;
  letter-spacing: normal;
  line-height: inherit;
}

.wp-op {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 10px 0 0;
  border: 0;
  border-radius: 0 6px 6px 0;
  background: none;
  font: 500 16px/1.25 var(--text);
  color: var(--body);
  text-align: left;
}
button.wp-op { cursor: pointer; }
.wp-valve { flex: none; display: block; width: 108px; height: 39px; overflow: visible; }
.wp-name { padding: 4px 0; transition: color 160ms ease; }
button.wp-op:hover .wp-name { color: var(--ink); text-decoration: underline; text-decoration-color: var(--slate); text-underline-offset: 4px; }
.is-open .wp-name { color: var(--ink); font-weight: 600; }

.wp-in, .wp-stem, .wp-wheel line { stroke: var(--ink); stroke-width: var(--pen); }
.wp-rim { fill: var(--surface); stroke: var(--ink); stroke-width: var(--pen); }
.wp-knob { fill: var(--ink); }
.wp-wheel {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.is-open .wp-wheel { transform: rotate(90deg); }

/* Closed is a filled bowtie, open is drawn in outline: the P&ID
   convention, and the difference reads without colour. */
.wp-bow {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: var(--pen);
  stroke-linejoin: round;
  transition: fill 220ms ease;
}
.is-open .wp-bow { fill: var(--surface); }

.wp-stub { stroke: var(--slate); stroke-width: var(--pen); }
.is-open .wp-stub { stroke: var(--ink); stroke-width: var(--pen2); }
.is-flowing .wp-stub {
  stroke-dasharray: 5 4;
  animation: wp-flow 1.6s linear;
}
@keyframes wp-flow {
  from { stroke-dashoffset: 72; }
  to { stroke-dashoffset: 0; }
}

.wp-bub { fill: var(--surface); stroke: var(--ink); stroke-width: var(--pen); transition: fill 160ms ease, stroke 160ms ease; }
.wp-bub-t { font: 500 12px var(--mono); letter-spacing: 0.02em; text-anchor: middle; fill: var(--ink); }
.is-open .wp-bub { fill: var(--pill-yes-bg); stroke: var(--teal); stroke-width: var(--pen2); }
.is-open .wp-bub-t { fill: var(--teal-deep); }

/* ── Tags ──────────────────────────────────────────────────────── */
/* The string hangs from the bubble's foot (x 93 in the valve) to the
   tag's top edge; the tag draws the rest of it, on through the grommet. */
.wp-tag {
  position: relative;
  padding: 10px 0 6px 30px;
}
.wp-tag[hidden] { display: none; }
.wp-tag::before {
  content: "";
  position: absolute;
  left: calc(93px - var(--pen) / 2);
  top: -3px;
  width: var(--pen);
  height: 15px;
  background: var(--ink);
  transform-origin: top;
}
/* An equipment tag, not a card: square, with its two top corners cut.
   It is an Ink shape with the Surface face 1px inside it, so the cut
   edges carry the same line as the sides. */
.wp-card {
  --cut: 12px;
  position: relative;
  max-width: 460px;
  padding: 6px 16px 12px;
  background: var(--ink);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut));
}
.wp-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--surface);
  clip-path: polygon(calc(var(--cut) - 0.41px) 0, calc(100% - var(--cut) + 0.41px) 0, 100% calc(var(--cut) - 0.41px), 100% 100%, 0 100%, 0 calc(var(--cut) - 0.41px));
}
.wp-card > * { position: relative; }
.wp-card-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 16px;
  margin-bottom: 4px;
}
/* The grommet: a reinforced double ring, filled Paper, centred under the
   string at x 63 of the tag, with the string drawn on through the hole. */
.wp-grommet {
  position: absolute;
  left: 35px;
  top: -6px;
  width: 24px;
  height: 26px;
  overflow: visible;
}
.wp-gr-o, .wp-gr-i { fill: var(--bg); stroke: var(--ink); stroke-width: var(--pen); }
.wp-gr-s { stroke: var(--ink); stroke-width: var(--pen); stroke-linecap: round; }
.wp-tag-code {
  position: absolute;
  left: 66px;
  top: 2px;
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--ink);
}
.wp-demo {
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--pill-none-bg);
  font: 600 12px/1.2 var(--text);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.wp-tag-t {
  max-width: 34em;
  font-size: 15px;
  line-height: 1.5;
  color: var(--body);
}
.wp-tag-a {
  display: inline-block;
  margin-top: 8px;
  font: 600 14.5px/1.4 var(--text);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--slate);
  text-underline-offset: 4px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.wp-tag-a:hover { color: var(--teal-deep); text-decoration-color: currentColor; }

/* The two plates keep fit and timing apart, as every reading does. */
.wp-plates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.wp-plates .wp-tag-a { margin: 0 0 0 auto; padding-left: 8px; }
.wp-plate {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 12px 5px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--bg);
}
.wp-plate .k, .wp-bar-v, .wp-tick-v {
  font: 500 12px/1.3 var(--mono);
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.wp-plate .k { text-transform: uppercase; }
.wp-plate .v { font: 500 22px/1.1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }

.wp-bars-h {
  margin: 10px 0 -2px;
  font: 500 12px/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
  color: var(--muted);
}
.wp-bars { list-style: none; display: grid; gap: 5px; margin: 0; padding: 0; }
.wp-bars li { display: grid; grid-template-columns: minmax(0, 1fr) 34px; column-gap: 10px; align-items: center; }
.wp-bar-n { grid-column: 1 / -1; font-size: 13.5px; line-height: 1.35; color: var(--body); }
.wp-bar-track { height: 6px; border-radius: 2px; background: var(--track); overflow: hidden; }
.wp-bar-fill { display: block; height: 100%; border-radius: 2px; background: var(--ink); }
.wp-bar-v { text-align: right; color: var(--ink); }

.wp-ticks {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  height: 58px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.wp-ticks li { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wp-tick { display: block; width: var(--pen2); background: var(--ink); }

/* Operating a valve: the tag drops 8px along a growing string. Only
   with the script running; without it every tag is simply open. */
.wp-js .wp-tag:not([hidden]) .wp-card { animation: wp-drop 180ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.wp-js .wp-tag:not([hidden])::before { animation: wp-string 180ms cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes wp-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@keyframes wp-string {
  from { transform: scaleY(0.6); }
  to { transform: none; }
}

/* ── Receivers at the foot of the riser ────────────────────────── */
.wp-receivers { position: relative; flex: none; }
.wp-recv { display: block; width: 300px; max-width: 100%; height: auto; overflow: visible; }
/* The return drop, continued from the receivers SVG to the run below. */
.wp-receivers::after {
  content: "";
  position: absolute;
  left: calc(var(--tee) - var(--pen) / 2);
  top: 100%;
  width: var(--pen);
  height: calc(var(--bot) - var(--run) - var(--pen) / 2);
  background: var(--ink);
}

/* ── Details ───────────────────────────────────────────────────── */
.wp-details {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px 48px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.wp-detail { min-width: 0; scroll-margin-top: 90px; }
.wp-dh {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font: 500 12px/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.wp-dbub {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: var(--pen) solid var(--ink);
  border-radius: 50%;
  background: var(--surface);
  font: 500 13px/1 var(--mono);
}
.wp-recv-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.wp-dsvg { display: block; width: 100%; max-width: 300px; height: auto; overflow: visible; }
.wp-dlabel {
  margin-top: 12px;
  font: 500 12px/1.45 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink);
}
.wp-dline {
  max-width: 30em;
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--body);
}

.wp-g-rim { fill: var(--surface); stroke: var(--ink); stroke-width: var(--pen); }
.wp-g-tick { stroke: var(--ink); stroke-width: var(--pen); }
.wp-g-needle { stroke: var(--ink); stroke-width: var(--pen2); stroke-linecap: round; }
.wp-g-hub { fill: var(--ink); }
.wp-g-v { text-anchor: middle; font-size: 15px; }

.wp-sheetdoc { fill: var(--surface); stroke: var(--ink); stroke-width: var(--pen); }
.wp-ruled { stroke: var(--slate); stroke-width: var(--pen); }
.wp-m-yes { fill: var(--teal); }
.wp-m-new { fill: var(--blue); }
.wp-m-none { fill: var(--slate); }
.wp-v-yes { fill: var(--teal-deep); }
.wp-v-new { fill: var(--blue-deep); }
.wp-v-none { fill: var(--muted); }
.wp-m-ink { fill: var(--ink); }

/* Detail B: a sight glass on the return line, drawn with the pipe
   running through it and a flange either side of the window. */
.wp-glass { position: relative; padding: 0 16px; }
.wp-glass::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--pen);
  background: var(--ink);
}
.wp-glass-win {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: var(--pen2) solid var(--ink);
  border-radius: 14px;
  background: var(--surface);
}
.wp-glass-win::before, .wp-glass-win::after {
  content: "";
  position: absolute;
  top: 18%;
  bottom: 18%;
  width: 5px;
  background: var(--ink);
}
.wp-glass-win::before { left: -11px; }
.wp-glass-win::after { right: -11px; }
.wp-frame {
  margin: 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg);
}
.wp-frame-new { border-color: var(--blue); background: var(--pill-new-bg); }
.wp-frame-d { font: 500 12px/1.3 var(--mono); letter-spacing: 0.04em; color: var(--muted); }
.wp-frame-new .wp-frame-d { color: var(--blue-deep); }
.wp-login {
  display: block;
  margin-top: 6px;
  padding: 4px 8px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--surface);
  font: 500 12px/1.3 var(--mono);
  letter-spacing: 0.02em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.wp-frame-new .wp-login { border-color: var(--blue); color: var(--blue-deep); }
.wp-frame-c { margin-top: 8px; font-size: 14.5px; line-height: 1.4; color: var(--body); }
.wp-frame-new .wp-frame-c { color: var(--blue-deep); }
.wp-detail-b .wp-dline { margin-top: 16px; }

/* ── Zone F: notes and the title block ─────────────────────────── */
.wp-foot {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px 48px;
  align-items: end;
  margin: 48px -24px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.wp-notes { padding-bottom: 24px; }
.wp-notes ol {
  max-width: 36em;
  margin: 0;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.wp-notes li + li { margin-top: 8px; }
.wp-notes li::marker { font: 500 12px var(--mono); color: var(--ink); }

.wp-title-block {
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
  background: var(--band);
}
.wp-tb-cta { padding: 26px 28px 28px; border-bottom: 1px solid var(--ink); }
.wp-tb-h {
  max-width: 21em;
  font: 700 clamp(24px, 2.2vw, 31px)/1.12 var(--display);
  letter-spacing: -0.024em;
  color: var(--ink);
}
.wp-tb-cta .wp-actions { margin-top: 22px; }
.wp-tb-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; }
.wp-tb-cells > div {
  grid-column: span 2;
  min-width: 0;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
.wp-tb-cells > .wp-tb-wide { grid-column: span 3; }
.wp-tb-cells > div:nth-child(-n+2) { border-top: 0; }
.wp-tb-cells > div:nth-child(1), .wp-tb-cells > div:nth-child(3) { border-left: 0; }
.wp-tb-cells dt {
  font: 500 12px/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.wp-tb-cells dd {
  margin: 2px 0 0;
  font: 600 16px/1.3 var(--display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

/* The legend, in the drawing's own notation. */
.wp-legend {
  display: grid;
  gap: 8px;
  margin: 32px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--ink);
  background: var(--surface);
  max-width: 300px;
}
.wp-legend > div { display: flex; align-items: center; gap: 12px; }
.wp-legend dt { flex: none; width: 34px; display: flex; justify-content: center; }
.wp-legend dd { margin: 0; font: 500 12px/1.35 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); }
.wp-legend svg { display: block; }
.wp-lg-closed { fill: var(--ink); stroke: var(--ink); stroke-width: var(--pen); stroke-linejoin: round; }
.wp-lg-open { fill: var(--surface); stroke: var(--ink); stroke-width: var(--pen); stroke-linejoin: round; }
.wp-lg-count { font: 500 12px/1 var(--mono); color: var(--teal-deep); font-variant-numeric: tabular-nums; }

/* Visually hidden, still read. */
.wp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Narrower desktops: intro above the plant ──────────────────── */
/* Fine pointers get a 40px row; a thumb keeps 44. */
@media (min-width: 900px) and (pointer: fine) {
  .wp-op { min-height: 40px; }
  .wp-tag::before { top: -2px; height: 14px; }
}

@media (max-width: 1239px) {
  .wp-first { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .wp-intro { max-width: 40em; }
  .wp-legend { display: none; }
}

/* ── Phone and small tablet: the plant redrawn vertically ──────── */
@media (max-width: 899px) {
  .wp-wrap { padding: 8px 6px 40px; }
  .wp-sheet { padding: 20px 6px; }
  .wp-zone-top, .wp-zone-bottom { left: 6px; right: 6px; }
  .wp-zone-left, .wp-zone-right { width: 6px; }
  .wp-zone-left span, .wp-zone-right span { font-size: 0; }
  .wp-field { padding: 14px 12px 0; }

  .wp-intro h1 { font-size: 40px; }
  .wp-lede { font-size: 17px; margin-top: 18px; }
  .wp-actions { margin-top: 22px; }
  .wp-actions .btn { flex: 1 1 100%; text-align: center; }

  .wp-plant {
    --up: 24.75px;   /* the riser's left edge under the vertical drawing */
    --rx: 4px;
    --ry: 20px;
    --bot: 60px;
    --run: 34px;
    display: block;
  }
  .wp-hero-2 { display: none; }
  .wp-upstream { width: auto; }
  .wp-svg-h { display: none; }
  .wp-svg-v { display: block; width: 100%; max-width: 340px; height: auto; }
  .wp-down { display: block; }
  .wp-mhead,
  .wp-manifold,
  .wp-receivers { margin-left: var(--up); }
  .wp-mhead {
    height: auto;
    align-items: center;
    padding: 8px 0 8px 12px;
    border-left: var(--pen2) solid var(--ink);
  }
  .wp-mhead > .wp-flowtag { margin-left: 0; }
  .wp-mhead > .wp-flowtag::after { display: none; }
  .wp-textbtn { padding: 13px 0; }
  .wp-return { width: calc(var(--up) + var(--tee) + var(--pen) / 2 - var(--rx) + var(--pen) / 2); }
  .wp-glass-sym { left: 110px; }
  .wp-callout-b { left: 166px; bottom: calc(var(--run) - 28px); }

  .wp-tag { padding-left: 30px; }
  .wp-card { max-width: none; }

  .wp-details { grid-template-columns: minmax(0, 1fr); margin-top: 36px; padding-top: 28px; }
  .wp-foot { grid-template-columns: minmax(0, 1fr); margin: 36px -12px 0; }
  .wp-notes { padding: 0 12px 0; }
  .wp-title-block { border-left: 0; }
  .wp-tb-cta { padding: 22px 16px 24px; }
}

/* A phone: the first screen keeps the intake and the vessel in view. */
@media (max-width: 479px) {
  .wp-caption { margin-bottom: 8px; }
  .wp-intro h1 { font-size: 36px; line-height: 1.04; }
  .wp-l { display: inline; }
  .wp-lede { font-size: 16px; line-height: 1.55; margin-top: 12px; }
  .wp-lede-2 { display: none; }
  .wp-actions { margin-top: 16px; }
  .wp-first { gap: 18px; }
}

@media (max-width: 560px) {
  .wp-recv-pair { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .wp-glass-win { grid-template-columns: minmax(0, 1fr); }
  .wp-tb-cells > div, .wp-tb-cells > .wp-tb-wide { grid-column: span 3; }
  .wp-tb-cells > div:nth-child(-n+2) { border-top: 0; }
  .wp-tb-cells > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--ink); }
  .wp-tb-cells > div:nth-child(4) { border-left: 1px solid var(--ink); }
  .wp-tb-cells > div:nth-child(5) { grid-column: 1 / -1; border-left: 0; }
}

/* The caption's one-line form for a phone, where the long one wraps. */
.wp-cap-short { display: none; }
@media (max-width: 479px) {
  .wp-cap-long { display: none; }
  .wp-cap-short { display: inline; }
}

/* Between 1240 and 1359px the manifold head cannot hold the flow tag and
   the valve controls on one line. The controls take the upper line, so the
   tag stays on the riser line with its leader into the outlet corner. */
@media (min-width: 1240px) and (max-width: 1359px) {
  .wp-mctl { order: -1; width: 100%; justify-content: flex-end; }
}