/* Hallmark · component: waterworks board · genre: playful · theme: existing Hum
 * pre-emit critique: P5 H4 E4 S5 R5 V4. Browser proof belongs to integration.
 * Original collar SVGs and mechanical fixtures retain every live channel.
 */
.pipes-app[data-depth-art="pocket-pipes"] {
  --craft-metal: var(--pipe-rivet);
  --craft-metal-edge: var(--pipe-rivet-shadow);
  --craft-water: var(--water-mid);
  --craft-paper: var(--pipe-channel);
  --craft-bench: var(--color-paper-2);
  --craft-mark: var(--ink);
  --craft-target: 44px;
  overflow: clip;
}

[data-depth-art="pocket-pipes"] .screen--play {
  padding-inline: 0.25rem;
}
[data-depth-art="pocket-pipes"] .board-shell {
  background-color: var(--craft-bench);
  background-image: url("assets/depth-workbench.svg");
  background-size: 144px 144px;
  box-shadow: 5px 7px 0 var(--pump), 0 0.8rem 1.6rem var(--water-cast);
}
[data-depth-art="pocket-pipes"] .pipes-board {
  grid-template-columns: repeat(var(--cols), minmax(var(--craft-target), 1fr));
}
[data-depth-art="pocket-pipes"] .pipe-tile {
  min-width: var(--craft-target);
  min-height: var(--craft-target);
}
.pipe-craft { pointer-events: none; }
.craft-lug { fill: var(--craft-metal); stroke: var(--craft-metal-edge); stroke-width: 1.8; }
.craft-lug-edge { fill: none; stroke: var(--craft-paper); stroke-width: 1.3; stroke-linecap: round; }
.craft-bolt { fill: var(--craft-mark); stroke: var(--craft-paper); stroke-width: 0.9; }
.craft-bolt-slot { fill: none; stroke: var(--craft-metal); stroke-width: 0.9; }
.craft-shoulder { fill: none; stroke: var(--craft-metal); stroke-width: 2; stroke-linecap: round; }
.craft-joint-bolt { fill: var(--craft-metal); stroke: var(--craft-metal-edge); stroke-width: 1; }
[data-depth-art="pocket-pipes"] .pipe-water-body { stroke: var(--craft-water); }
[data-depth-art="pocket-pipes"] .pipe-water-joint { fill: var(--craft-water); }

.depth-station-art {
  position: absolute;
  z-index: 0;
  inset: -8%;
  display: block;
  width: 116%;
  height: 116%;
  pointer-events: none;
  object-fit: contain;
}
[data-depth-art="pocket-pipes"] .pump-fixture {
  border: 0;
  background: transparent;
  box-shadow: none;
}
[data-depth-art="pocket-pipes"] .fixture-gauge,
[data-depth-art="pocket-pipes"] .pump-rotor,
[data-depth-art="pocket-pipes"] .outlet-tank { z-index: 1; }
[data-depth-art="pocket-pipes"] .outlet-tank {
  inset: 8% 15% 9%;
  border-radius: 38% 38% 15% 15%;
  box-shadow: none;
}
[data-depth-art="pocket-pipes"] .outlet-tank i { background: var(--craft-water); }
.depth-station-art--outlet { inset: -8% -19%; width: 138%; }

.craft-legend {
  width: min(100%, 32rem);
  margin: 0.75rem auto;
  padding: 0.6rem 0.55rem;
  border-block: 1px solid var(--rule);
  color: var(--ink);
  background: var(--paper-2);
}
.craft-legend-heading {
  margin: 0 0 0.35rem;
  font: 700 0.74rem / 1.4 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.craft-legend ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.craft-legend li {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.3rem;
  font: 600 0.72rem / 1.35 var(--font-mono);
}
.craft-legend li span { min-width: 0; overflow-wrap: anywhere; }
.craft-legend-icon { flex: 0 0 24px; width: 24px; height: 24px; overflow: visible; }
.craft-icon-pump { fill: var(--pump); stroke: var(--ink); stroke-width: 2; }
.craft-icon-channel { fill: var(--craft-paper); stroke: var(--ink); stroke-width: 2; }
.craft-icon-water { fill: var(--craft-water); }
.craft-icon-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.craft-icon-casing { fill: none; stroke: var(--ink); stroke-linecap: round; }
.craft-icon-bore { fill: none; stroke: var(--craft-paper); stroke-linecap: round; }
.craft-icon-flow { fill: none; stroke: var(--craft-water); stroke-linecap: round; }
.craft-icon-preview { fill: var(--outlet); stroke: var(--ink); stroke-width: 2; }

[data-depth-art="pocket-pipes"] :is(button, select) {
  min-height: var(--craft-target);
}
body[data-pipes-depth-art="active"] .edge-nav :is(button, .edge-nav__brand),
body[data-pipes-depth-art="active"] .inline-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}
body[data-pipes-depth-art="active"] .edge-nav__link { min-height: 44px; min-width: 44px; }
body[data-pipes-depth-art="active"] .edge-nav { flex-wrap: wrap; gap: 0.2rem; }
body[data-pipes-depth-art="active"] .inline-footer nav { gap: 0.35rem 0.7rem; }
[data-depth-art="pocket-pipes"] :is(button, select):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
[data-depth-art="pocket-pipes"] .pipe-tile:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 1px;
  z-index: var(--z-water-effect);
}
[data-depth-art="pocket-pipes"] .button-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.7rem;
}
[data-depth-art="pocket-pipes"] .button-row .button {
  max-width: 100%;
  white-space: nowrap;
  padding-inline: 0.6rem;
}
/* Longer trial commands get a whole row on small phones. */
@media (max-width: 25.875rem) {
  [data-depth-art="pocket-pipes"] .line-header {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 0.3rem;
  }
  [data-depth-art="pocket-pipes"] .line-header > div { grid-column: 1 / -1; }
  [data-depth-art="pocket-pipes"] .metric { min-width: 0; text-align: left; }
  [data-depth-art="pocket-pipes"] .metric dd { font-size: var(--step-1); }
  [data-depth-art="pocket-pipes"] .rehearsal-controls { grid-template-columns: minmax(0, 1fr); }
  [data-depth-art="pocket-pipes"] .rehearsal-button { white-space: nowrap; }
  /* Keep the tile hit box full size while pressing or water is filling it. */
  [data-depth-art="pocket-pipes"] .pipe-tile:active { transform: translateY(2px); }
  [data-depth-art="pocket-pipes"] .pipe-tile.just-filled { animation: none; }
}
@media (min-width: 30rem) {
  .craft-legend ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-depth-art="pocket-pipes"] .button-row { display: flex; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  [data-depth-art="pocket-pipes"] .depth-station-art,
  [data-depth-art="pocket-pipes"] .pipe-craft { animation: none; transition: none; }
  [data-depth-art="pocket-pipes"] .pipe-tile:active { transform: none; }
}
@media (forced-colors: active) {
  .craft-legend-icon { forced-color-adjust: auto; }
  [data-depth-art="pocket-pipes"] .pipe-tile:focus-visible { outline-color: Highlight; }
}