/* Water snake (ACQ-VIZ-2). Visual language of ACQ-VIZ-1-proof.html: casing + fill pipes, status by border,
   dashes only on hollow casings, blue-orange residual hue, grey-violet uncertainty. Follows the app theme. */
:root {
  --snake-water: #3f8fc4; --snake-casing: #24506e; --snake-surface: var(--hx-card, #fff);
  --snake-low: #2f6db5; --snake-mid: #b9c2c9; --snake-high: #c46a12;
  --snake-tested: #6b4fa3; --snake-proposed: #7a7f85; --snake-found: #8f969c;
  --snake-lane: #e8ecef; --snake-lane-line: #c9d0d6; --snake-sel: #b3261e;
}
:root[data-theme=dark] {
  --snake-water: #4fa3d9; --snake-casing: #9cc9e6;
  --snake-low: #6aa2e6; --snake-mid: #55606a; --snake-high: #e8963f;
  --snake-tested: #a68ce0; --snake-proposed: #8b939a; --snake-found: #79828a;
  --snake-lane: #222c35; --snake-lane-line: #34404b; --snake-sel: #ff7b6e;
}
@media print {
  :root, :root[data-theme=dark] {
    --snake-water: #3f8fc4; --snake-casing: #24506e; --snake-low: #2f6db5; --snake-mid: #b9c2c9; --snake-high: #c46a12;
    --snake-tested: #6b4fa3; --snake-proposed: #7a7f85; --snake-found: #8f969c; --snake-lane: #e8ecef; --snake-lane-line: #c9d0d6;
  }
  .snake-controls, .snake-jumps { display: none !important; }
}

/* contain: the SVG's minimum width scrolls inside .snake-pane and never widens the page. */
.snake-card { margin-top: 16px; padding: 14px 16px 16px; border: 1px solid var(--hx-border); border-radius: 10px; min-width: 0; max-width: 100%; contain: inline-size; }
.snake-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.snake-head h3 { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--hx-fg); }
.snake-lead { margin: 6px 0 10px; font-size: 13px; line-height: 1.5; }
.snake-empty { padding: 14px; border: 1px dashed var(--hx-border); border-radius: 8px; color: var(--hx-muted); font-size: 13px; }
.map-load-error { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; text-align: center; }
.map-load-error p { margin: 0; font-size: 14px; }

.snake-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; font-size: 13px; }
.snake-period { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 0; margin: 0; }
.snake-period input { flex: 1; min-width: 0; }
.snake-month { font-variant-numeric: tabular-nums; white-space: nowrap; }
.snake-month span { font-weight: 400; color: var(--hx-muted); margin-left: 4px; }
.snake-jumps { display: flex; flex-wrap: wrap; gap: 6px; }
.snake-jumps .hx-btn { font-size: 12px; padding: 3px 9px; }
.snake-hue { display: flex; align-items: center; gap: 6px; margin: 0; }
.snake-hue select { font: inherit; font-size: 13px; padding: 3px 6px; border: 1px solid var(--hx-border); border-radius: 6px; max-width: 100%; }
/* ACQ-IA-11: a long run name in Compare with shrinks the select instead of widening the page at 390. */
.snake-hue { min-width: 0; max-width: 100%; }
.snake-hue > select { min-width: 0; flex: 0 1 auto; text-overflow: ellipsis; }

.snake-pane { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--hx-border-soft); border-radius: 8px; background: var(--snake-surface); }
.snake-svg { display: block; width: 100%; height: auto; }
.snake-svg text { fill: var(--hx-fg); font-size: 12px; }
.snake-svg .snake-sub { fill: var(--hx-muted); font-size: 10.5px; }
.snake-svg .snake-label { font-weight: 500; }
.snake-svg .snake-lane-name { font-size: 11.5px; }
.snake-labels text { paint-order: stroke; stroke: var(--snake-surface); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }

.snake-edge, .snake-node { cursor: pointer; outline: none; transition: opacity .12s; }
.snake-edge .snake-casing { fill: none; stroke: var(--snake-casing); stroke-linecap: butt; }
.snake-edge .snake-fill { fill: none; stroke: var(--snake-water); }
.snake-edge .snake-hollow { fill: none; stroke: var(--snake-surface); }
.snake-edge .snake-ref, .snake-tap .snake-ref, .snake-legend .snake-ref { fill: none; stroke: var(--snake-casing); stroke-linecap: butt; opacity: .45; }
.snake-svg .snake-compare-mark { font-style: italic; }
.snake-budget-compare { table-layout: fixed; }
.snake-budget-compare th, .snake-budget-compare td { overflow-wrap: anywhere; }
.snake-spark-wrap { margin: 8px 0 0; }
.snake-spark-wrap figcaption { font-size: 12px; color: var(--hx-muted); margin-bottom: 4px; }
.snake-spark { display: block; width: min(100%, 420px); height: 56px; }
.snake-spark-ref { fill: none; stroke: var(--snake-casing); stroke-width: 1.5; opacity: .55; }
.snake-spark-cmp { fill: none; stroke: var(--snake-water); stroke-width: 1.75; }
.snake-spark-now { stroke: var(--hx-muted); stroke-dasharray: 2 2; }
.snake-edge .snake-mark { fill: none; stroke: var(--snake-casing); stroke-width: 2; stroke-linejoin: round; }
.snake-edge.s-tested .snake-casing { stroke: var(--snake-tested); }
.snake-edge.s-proposed .snake-casing { stroke: var(--snake-proposed); }
.snake-edge.s-found .snake-casing { stroke: var(--snake-found); }

.snake-node .snake-box { fill: var(--snake-surface); stroke: var(--snake-casing); stroke-width: 2; }
.snake-node.s-tested .snake-box { stroke: var(--snake-tested); }
.snake-node .snake-inner { fill: none; stroke: var(--snake-tested); stroke-width: 1; }
.snake-node.s-proposed .snake-box { fill: none; stroke: var(--snake-proposed); stroke-dasharray: 6 4; }
.snake-node.s-found .snake-box { fill: none; stroke: var(--snake-found); stroke-dasharray: 1.5 3.5; }
.snake-node.s-proposed .snake-label, .snake-node.s-found .snake-label { font-style: italic; }
.snake-node.s-found .snake-label { fill: var(--hx-muted); }
.snake-node .snake-lane { fill: var(--snake-lane); stroke: var(--snake-lane-line); }

.snake-svg .dim { opacity: .22; }
.snake-span { fill: none; stroke: var(--snake-casing); stroke-width: 1.75; pointer-events: none; }
.snake-span.s-tested { stroke: var(--snake-tested); stroke-dasharray: 7 5; }
.snake-spandot { fill: var(--snake-casing); stroke: var(--snake-surface); stroke-width: 0.6; pointer-events: none; }
.snake-unit { fill: var(--snake-lane); stroke: var(--snake-lane-line); cursor: pointer; }
.snake-unit.open { fill: color-mix(in srgb, var(--snake-lane) 45%, transparent); }
.snake-focus { font-weight: 600; }
.snake-node.sel .snake-box, .snake-edge.sel .snake-casing, .snake-lane.sel, .snake-unit.sel { stroke: var(--snake-sel); }
.snake-node.sel .snake-box { stroke-width: 3; }
.snake-lane.sel, .snake-unit.sel { stroke-width: 3; }
.snake-node:focus-visible .snake-box { stroke: var(--hx-accent); stroke-width: 3.5; }
.snake-edge:focus-visible .snake-casing { stroke: var(--hx-accent); }
.snake-node:hover .snake-box { stroke-width: 2.6; }

.snake-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 18px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--hx-fg); }
.snake-legend li { display: flex; align-items: center; gap: 8px; }
.snake-legend svg { flex: none; }
.snake-legend-pipe .snake-casing { stroke: var(--snake-casing); }
.snake-legend-pipe.s-tested .snake-casing { stroke: var(--snake-tested); }
.snake-legend-pipe.s-proposed .snake-casing { stroke: var(--snake-proposed); }
.snake-legend-pipe.s-found .snake-casing { stroke: var(--snake-found); }
.snake-legend-pipe .snake-fill { stroke: var(--snake-water); }
.snake-legend-pipe .snake-hollow { stroke: var(--hx-card); }
.snake-legend > li > svg > .snake-casing { stroke: var(--snake-casing); }
.snake-swatch { display: inline-block; flex: none; width: 42px; height: 12px; border-radius: 2px; }

/* ACQ-VIZ-2b / ACQ-SNAKE-MAP-2: snake ~62%, map ~38%. The map stays put while the budget scrolls.
   "Bigger map" is 50/50. Below 1100px the map stacks first, about 280px tall. */
.snake-body { display: grid; grid-template-columns: minmax(16rem, 62fr) minmax(280px, 38fr); gap: 12px; align-items: start; }
.snake-body.snake-map-wide { grid-template-columns: minmax(16rem, 1fr) minmax(16rem, 1fr); }
.snake-body.snake-no-map { grid-template-columns: 1fr; }
/* IA2-1 Results › Map: the companion map leads at full width; the diagram sits under it (the stage comes with IA2-3). */
.snake-body.snake-map-first { grid-template-columns: 1fr; }
.snake-body.snake-map-first .snake-map-panel { position: static; order: -1; }
.snake-main { min-width: 0; }
.snake-map-panel { position: sticky; top: 12px; min-width: 0; font-size: 12.5px; align-self: start; }
.snake-map-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
.snake-map-panel h4 { margin: 0; font-size: 13px; font-weight: 600; color: var(--hx-fg); }
.snake-map { position: relative; height: min(70vh, 640px); border: 1px solid var(--hx-border-soft); border-radius: 8px; overflow: hidden; background: var(--snake-lane); }
.snake-map-label {
  position: static; z-index: auto; max-width: 100%;
  padding: 4px 8px; border-radius: 8px; background: color-mix(in srgb, var(--hx-card) 90%, transparent);
  color: var(--hx-fg); font: 600 13px/1.35 var(--hx-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.snake-map-label:focus-visible { outline: 2px solid var(--hx-accent); outline-offset: 2px; }
.snake-map-label:empty { display: none; }
.snake-map-caption { margin: 6px 0 0; line-height: 1.45; }
.snake-amounts { margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.snake-amounts label { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.snake-amount-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.snake-amount-swatch { display: inline-block; width: 16px; height: 12px; border-radius: 2px; }
.snake-amount-in { background: var(--snake-low); }
.snake-amount-out { background: var(--snake-high); }
.snake-cells { margin: 8px 0 0; }
.snake-cells select, .snake-measure { width: 100%; max-width: 100%; box-sizing: border-box; }
.snake-flux { margin-top: 6px; }
.snake-measure { margin: 8px 0 0; }
.snake-measure h5 { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--hx-fg); }
.snake-measure ol { margin: 4px 0 0; padding-left: 1.2em; }
.snake-measure li { margin: 0 0 2px; }
.snake-svg .snake-pair { fill: var(--snake-sel); }

.snake-readout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-top: 14px; }
.snake-budget { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.snake-budget th, .snake-budget td { padding: 3px 6px; border-bottom: 1px solid var(--hx-border-soft); text-align: right; }
.snake-budget th:first-child, .snake-budget td:first-child { text-align: left; }
.snake-budget th { font-weight: 600; color: var(--hx-fg); }
.snake-notes { font-size: 13px; line-height: 1.5; min-width: 0; }
.snake-notes p { margin: 0 0 8px; }
.snake-scale { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 6px; font-size: 12px; color: var(--hx-muted); }
.snake-scale span { display: inline-flex; align-items: center; gap: 4px; }
.snake-scale-pipe { stroke: var(--snake-water); }
.snake-source { font-size: 12px; }

@media (max-width: 1100px) {
  .snake-body, .snake-body.snake-map-wide { grid-template-columns: 1fr; }
  .snake-map-panel { position: static; order: -1; }
  .snake-map { height: 280px; }
}
@container (max-width: 720px) {
  .snake-body, .snake-body.snake-map-wide { grid-template-columns: 1fr; }
  .snake-map-panel { position: static; order: -1; }
  .snake-map { height: 280px; }
}

@media (max-width: 760px) {
  .snake-card { padding: 12px; }
  .snake-readout { grid-template-columns: 1fr; }
  .snake-month { white-space: normal; }
}

/* ACQ-VIZ-8: Explore sits above the map. A planned edit draws a dashed outline on its element. */
.snake-explore { margin: 0 0 10px; padding: 8px; border: 1px solid var(--hx-border-soft); border-radius: 8px; min-width: 0; max-width: 100%; }
.snake-explore-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.snake-explore h4, .snake-explore h5, .snake-planned h4 { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--hx-fg); }
.snake-option { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--hx-border-soft); min-width: 0; }
.snake-option p, .snake-explore p, .snake-edit-line, .snake-planned p { margin: 0 0 6px; overflow-wrap: anywhere; }
.snake-hyp { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; font-size: 12.5px; min-width: 0; }
.snake-hyp input, .snake-hyp select { width: 100%; max-width: 100%; box-sizing: border-box; font: inherit; }
.snake-values, .snake-layers, .snake-chips { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 4px 0 8px; }
.snake-planned { margin-top: 14px; min-width: 0; max-width: 100%; }
.snake-planned ul { list-style: none; margin: 0; padding: 0; }
.snake-planned li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--hx-border-soft); }
.snake-planned li > div:first-child { min-width: 0; flex: 1 1 180px; }
.snake-preview { fill: none; stroke: var(--snake-proposed); stroke-width: 2; stroke-dasharray: 6 4; }
.snake-preview-note { fill: var(--snake-proposed); font-size: 11px; font-style: italic; }

/* ACQ-VIZ-11b: the Water layer on the companion map. The bar sits under the map heading; the caption, legend and hover
   readout float on the map, matching the Layers control (plan.css .map-stack-*) in tone. Everything here is static. */
.snake-flow-bar { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0 0 6px; font-size: 12.5px; }
.snake-flow-bar[hidden] { display: none; }
.snake-flow-modes { display: inline-flex; border: 1px solid var(--hx-border); border-radius: 7px; overflow: hidden; }
.snake-flow-chip {
  appearance: none; -webkit-appearance: none;
  border: 0; border-right: 1px solid var(--hx-border); border-radius: 0; padding: 3px 10px;
  font: inherit; font-size: 12.5px; background: var(--hx-card); color: var(--hx-fg); -webkit-text-fill-color: var(--hx-fg); cursor: pointer;
}
.snake-flow-chip:last-child { border-right: 0; }
.snake-flow-chip.on { background: var(--hx-accent); color: var(--aq-on-accent); -webkit-text-fill-color: var(--aq-on-accent); }
.snake-flow-chip:disabled { color: var(--hx-muted); cursor: default; }
.snake-flow-chip:focus-visible, .snake-flow-pause:focus-visible, .snake-flow-badge:focus-visible { outline: 2px solid var(--hx-accent); outline-offset: 1px; }
.snake-flow-field { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.snake-flow-field select { font: inherit; font-size: 12.5px; padding: 2px 6px; max-width: 220px; }
.snake-flow-pause { font: inherit; font-size: 12.5px; padding: 3px 10px; border: 1px solid var(--hx-border); border-radius: 6px; background: var(--aq-hover); color: var(--hx-fg); cursor: pointer; }
.snake-flow-pause:disabled { color: var(--hx-muted); cursor: default; }
.snake-flow-note { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.snake-flow-missing { color: var(--hx-muted); }
.snake-flow-export {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--hx-border);
  background: var(--hx-card);
  color: var(--hx-accent);
  cursor: pointer;
  text-align: left;
}
.snake-flow-spin {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid var(--hx-border);
  border-top-color: var(--hx-accent);
  display: inline-block;
  vertical-align: middle;
  animation: snake-flow-spin 800ms linear infinite;
}
.snake-flow-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--aq-scrim);
}
.snake-flow-dialog {
  width: min(440px, 100%);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--hx-border);
  background: var(--hx-card);
  color: var(--hx-fg);
  box-shadow: 0 12px 40px var(--aq-shadow);
}
.snake-flow-dialog p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; }
.snake-flow-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.snake-flow-dialog-actions .hx-btn { min-height: 36px; border-radius: 8px; }
.snake-flow-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 41;
  max-width: min(440px, calc(100% - 32px));
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--hx-accent);
  color: var(--aq-on-accent);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 12px 40px var(--aq-shadow);
}
.snake-compare { gap: 8px; }
.snake-compare select, .snake-compare-button, .snake-compare-find {
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid var(--hx-border);
  background: var(--hx-card);
  color: var(--hx-fg);
  font: inherit;
  font-size: 13px;
  padding: 0 12px;
}
.snake-compare-pick { position: relative; }
.snake-compare-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  width: min(420px, 70vw);
  max-height: 320px;
  overflow: auto;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--hx-border);
  background: var(--hx-card);
  box-shadow: 0 12px 40px var(--aq-shadow);
}
.snake-compare-find { width: 100%; box-sizing: border-box; margin-bottom: 0; }
.snake-compare-group {
  margin: 12px 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hx-muted);
}
.snake-compare-menu button {
  display: block;
  width: 100%;
  min-height: 32px;
  margin: 0 0 8px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--hx-fg);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.snake-compare-menu button:hover, .snake-compare-menu button[aria-selected="true"] { background: var(--aq-hover); }
.snake-compare-menu button:disabled { opacity: .5; cursor: default; }
.snake-context-menu button:disabled { opacity: .5; cursor: default; }
.snake-compare-menu button:focus-visible, .snake-compare-button:focus-visible, .snake-compare-find:focus-visible,
.snake-flow-dialog-actions .hx-btn:focus-visible {
  outline: 2px solid var(--hx-accent);
  outline-offset: 2px;
}
.snake-flow-export:focus-visible { outline: 2px solid var(--hx-accent); outline-offset: 2px; }
.snake-flow-caption { position: static; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: 100%; min-width: 0; pointer-events: none; }
.snake-flow-caption[hidden], .snake-flow-legend[hidden], .snake-flow-hover[hidden] { display: none; }
.snake-flow-cap, .snake-flow-badge {
  pointer-events: auto; font: 600 12px/1.4 var(--hx-sans); padding: 2px 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--hx-card) 88%, transparent); border: 1px solid var(--hx-border); color: var(--hx-fg);
}
.snake-flow-cap { font-weight: 400; min-width: 0; }
.snake-flow-cap-extra { color: var(--hx-muted); }
.snake-flow-badge { cursor: pointer; font-weight: 600; background: var(--hx-ok-soft); color: var(--hx-ok); border-color: color-mix(in srgb, var(--hx-ok) 40%, transparent); }
.snake-flow-badge.warn { background: var(--hx-warn-soft); color: var(--hx-warn); border-color: var(--hx-warn-border); }
.snake-flow-hover[data-idle="1"] { color: var(--hx-muted); }
.snake-flow-legend {
  position: static; max-width: 100%; padding: 8px; border-radius: 8px;
  font: 12px/1.4 var(--hx-sans); background: color-mix(in srgb, var(--hx-card) 90%, transparent); border: 1px solid var(--hx-border); color: var(--hx-fg);
}
.snake-flow-ramp { display: inline-block; width: 110px; height: 8px; border-radius: 4px; vertical-align: middle; margin: 0 4px; }
/* ACQ-RESULTS-2 §7: four lines tall whatever it says (the readout is 2 to 4 lines), so nothing above it moves. */
.snake-flow-hover {
  position: static; box-sizing: border-box; height: calc(4 * 1.4em + 16px); width: 280px; overflow: hidden;
  max-width: 100%; min-width: 0; padding: 8px; border-radius: 8px; white-space: pre-line;
  font: 12px/1.4 var(--hx-sans); background: color-mix(in srgb, var(--hx-card) 92%, transparent); border: 1px solid var(--hx-border); color: var(--hx-fg); pointer-events: none;
}
.map-stack-water-note { font-size: 11px; color: var(--hx-muted); margin: 0 0 2px 20px; }
/* ACQ-FLOW-EXPORT-UX-1: the flow export line on the map bar, the 3D page and the Runs rows. */
.flow-line { position: relative; display: inline-flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; font-size: 12.5px; }
.flow-line-main { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.flow-line-text { color: var(--hx-fg); }
.flow-line[data-state="waiting"] .flow-line-text, .flow-line[data-state="unreachable"] .flow-line-text { color: var(--hx-muted); }
.flow-line[data-state="failed"] .flow-line-text, .flow-line[data-state="empty"] .flow-line-text { color: var(--hx-fail); font-weight: 600; }
.flow-line[data-state="unavailable"] .flow-line-text { color: var(--hx-warn); font-weight: 600; }
.flow-line-reason { color: var(--hx-fg); overflow-wrap: anywhere; }
.flow-line-bar { display: inline-block; width: 120px; max-width: 30vw; height: 8px; border-radius: 4px; background: var(--hx-border-soft); border: 1px solid var(--hx-border); overflow: hidden; vertical-align: middle; }
.flow-line-bar > span { display: block; height: 100%; background: var(--hx-accent); transition: width 400ms ease; }
.flow-line-more {
  font: inherit; font-size: 12px; min-width: 28px; min-height: 28px; padding: 0 6px; border-radius: 6px;
  border: 1px solid var(--hx-border); background: var(--hx-card); color: var(--hx-fg); cursor: pointer;
}
.flow-line-more:focus-visible { outline: 2px solid var(--hx-accent); outline-offset: 2px; }
.flow-line-pop {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; width: min(380px, calc(100vw - 32px));
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--hx-border); background: var(--hx-card); color: var(--hx-fg);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--hx-fg) 18%, transparent); font-size: 12px; line-height: 1.45;
}
.flow-line-pop dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 0; }
.flow-line-pop dt { color: var(--hx-muted); }
.flow-line-pop dd { margin: 0; overflow-wrap: anywhere; }
.flow-line-pop-head { margin: 8px 0 2px; color: var(--hx-muted); font-weight: 600; }
.flow-line-pop ul { margin: 0; padding-left: 16px; }
.flow-line-pop li { overflow-wrap: anywhere; }
.flow-line.compact { font-size: 12px; }
/* The 3D page's alert strip scrolls (overflow: auto), so a floating popup would be clipped: open the details inline there. */
.scene-alerts-flow .flow-line-pop { position: static; width: auto; margin-top: 2px; box-shadow: none; }
.hx-chip.flow-badge { font-size: 10.5px; }
.hx-chip.flow-badge[data-flow="waiting"], .hx-chip.flow-badge[data-flow="running"] { background: var(--hx-accent-soft); color: var(--hx-accent-fg); }
.hx-chip.flow-badge[data-flow="ready"] { background: var(--hx-ok-soft); color: var(--hx-ok-fg); }
.hx-chip.flow-badge[data-flow="failed"], .hx-chip.flow-badge[data-flow="empty"] { background: var(--hx-fail-soft); color: var(--hx-fail); }
.hx-chip.flow-badge[data-flow="unavailable"] { background: var(--hx-warn-soft); color: var(--hx-warn); }
@keyframes snake-flow-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .snake-flow-spin { animation: none; }
}
@media (max-width: 600px) {
  .snake-flow-field select { max-width: 150px; }
}
@media print {
  .snake-flow-bar, .snake-flow-hover { display: none !important; }
}

/* ACQ-VIZ-11g: the section through the picked cell, under the companion map. The canvas draws from the tokens. */
.flow-section { margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--hx-border); }
.flow-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.flow-section-title { margin: 0; font-size: 14px; font-weight: 600; }
.flow-section-axes { display: inline-flex; border: 1px solid var(--hx-border); border-radius: 999px; overflow: hidden; }
.flow-section-axis {
  appearance: none; -webkit-appearance: none; border: 0; border-right: 1px solid var(--hx-border); border-radius: 0;
  min-height: 28px; padding: 0 12px; font: inherit; font-size: 12px; font-weight: 600; background: var(--hx-card); color: var(--hx-fg); cursor: pointer;
}
/* ACQ-RESULTS-2 §7: the W–E / N–S toggle keeps its place while hidden, so the head row never changes height. */
.flow-section-axes[hidden] { display: inline-flex; visibility: hidden; }
.flow-section-axis:last-child { border-right: 0; }
.flow-section-axis.on { background: var(--hx-accent); color: var(--aq-on-accent); -webkit-text-fill-color: var(--aq-on-accent); }
.flow-section-axis:focus-visible { outline: 2px solid var(--hx-accent); outline-offset: -2px; }
.flow-section-caption { margin: 8px 0 4px; min-height: 1.45em; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-section-frame { position: relative; border: 1px solid var(--hx-border-soft); border-radius: 8px; overflow: hidden; background: var(--hx-card); }
.flow-section-canvas { display: block; width: 100%; height: 240px; }
.flow-section-canvas[hidden] { display: none; }
.flow-section-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 240px; box-sizing: border-box; padding: 24px 16px; text-align: center; font-size: 14px; color: var(--hx-muted); }
.flow-section-empty[hidden] { display: none; }
.flow-section-empty p { margin: 0; }
.flow-section-note, .flow-section-hint { margin: 4px 0 0; min-height: 1.45em; font-size: 12px; font-variant-numeric: tabular-nums; }
/* The caption, note and hint keep their lines while there is no section, so the page does not move when one is picked. */
.flow-section-caption[hidden], .flow-section-note[hidden], .flow-section-hint[hidden] { display: block; visibility: hidden; }
.flow-section-hint { margin-top: 0; }
@media (max-width: 640px) { .flow-section-canvas { height: 200px; } }

/* ACQ-RESULTS-2 §4: snake zoom. The layer brackets appear from 150 % or for the selection. */
.snake-zoom { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; flex-wrap: wrap; }
.snake-zoom .hx-btn.icon { width: 32px; padding: 0; justify-content: center; }
.snake-zoom-level { min-width: 48px; text-align: center; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink); }
.snake-zoom-note { font-size: 12px; }
/* ACQ-RESULTS-2 §6: the "leaving the layer" marks in the flow legend; the same pair as the residual hue. */
.snake-flow-leaving { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; margin-top: 4px; }
.snake-flow-leave-dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; border: 1px solid var(--surface); }
.snake-flow-leave-dot.up { background: var(--snake-high); }
.snake-flow-leave-dot.down { background: var(--snake-low); }