/* Step 8, Explore (ACQ-IA-10). Role tokens only; no colour literals here. */
/* Higher specificity than build-steps.css .aq-step-page, which loads later and would drop this padding. */
.aq-step-page:has(.aq-explore) { padding: 24px 24px 48px; }
.aq-explore { display: flex; flex-direction: column; gap: 16px; }
.aq-explore > .hx-card { margin: 0; }

.aq-explore-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.aq-explore-title { flex: 1 1 420px; min-width: 0; }
.aq-explore-title h1 { margin: 0 0 4px; font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.aq-explore-title p { margin: 0; max-width: 720px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.aq-explore-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aq-explore-actions .run-picker { margin: 0; width: 340px; max-width: 100%; }
.aq-explore-actions .run-picker-button { height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); box-shadow: none; font-size: 13px; font-weight: 600; }
.aq-explore-actions .run-picker-button:hover { background: var(--surface-2); }
.aq-explore-actions .run-hint { display: none; }
.aq-explore-notice { margin: 0; padding: 8px 12px; border-left: 3px solid var(--danger); background: var(--danger-soft); color: var(--on-danger); font-size: 13px; border-radius: 4px; }

.aq-explore-jump { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.aq-explore-jump a { padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 120ms ease, border-color 120ms ease; }
.aq-explore-jump a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }

.aq-explore-empty { padding: 40px 24px; text-align: center; font-size: 14px; color: var(--muted); }
.aq-explore-empty a { display: inline-block; margin-left: 8px; }

.aq-explore-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; scroll-margin-top: 16px; }
.aq-explore-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aq-explore-card-head h2, .aq-explore-detail summary h2 { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.aq-explore-run { font-size: 12px; color: var(--muted); }
.aq-explore-card-head .aq-explore-run { margin-left: auto; }
.aq-explore-line { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
/* ACQ-VIZ-LIVE-1: the lead card on Results › Water in motion. */
.aq-water-lead { display: grid; gap: 8px; padding: 16px 20px; margin: 0 0 16px; }
.aq-water-lead h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.2; }
.aq-water-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.aq-explore-line strong { color: var(--ink); font-weight: 600; }

/* The review board: stat tiles, Solver first. A 3 px left bar in the status pair says "needs attention". */
.aq-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.aq-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.aq-tile[data-tone="warn"] { box-shadow: inset 3px 0 0 var(--warn); }
.aq-tile[data-tone="danger"] { box-shadow: inset 3px 0 0 var(--danger); }
.aq-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aq-tile-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.aq-tile-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; min-width: 0; }
.aq-tile-value .n { font-family: var(--mono); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.aq-tile[data-tone="ok"] .aq-tile-value .n { color: var(--ok); }
.aq-tile[data-tone="warn"] .aq-tile-value .n { color: var(--warn); }
.aq-tile[data-tone="danger"] .aq-tile-value .n { color: var(--danger); }
.aq-tile-value .u { font-size: 12px; color: var(--muted); }
.aq-tile-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }

/* Tables: 11 px uppercase header, 13 px body, 40 px rows, numbers right and tabular, no zebra. */
.aq-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.aq-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--ink); }
.aq-table th, .aq-table td { padding: 8px 12px; height: 40px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.aq-table thead th { position: sticky; top: 0; z-index: 1; height: 32px; background: var(--surface); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.aq-table tbody tr:last-child td { border-bottom: 0; }
.aq-table tfoot th, .aq-table tfoot td { border-top: 1px solid var(--line-strong); border-bottom: 0; font-weight: 600; }
.aq-table .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.aq-table tr.selected td { background: var(--soft); }
.aq-table tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.aq-table tbody tr:hover td { background: var(--surface-2); }
.aq-table tbody tr.selected:hover td { background: var(--soft); }

.aq-row-btn { padding: 0; border: 0; background: none; color: var(--accent); font-size: 13px; cursor: pointer; text-align: left; }
.aq-row-btn:hover { text-decoration: underline; }
.aq-row-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* Hydrographs: the chart beside the site list; stacked under 1024. */
.aq-hydro-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.aq-hydro-chart, .aq-hydro-sites { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.aq-hydro-site { margin: 0; font-size: 13px; color: var(--ink); }
.aq-hydro-axis { margin: 0; font-size: 12px; color: var(--muted); }
.aq-hydro { display: block; width: 100%; height: auto; }
.aq-hydro .grid { stroke: var(--line); stroke-width: 1; }
.aq-hydro .tick { fill: var(--muted); font-family: var(--mono); font-size: 11px; }
.aq-hydro .sim { fill: none; stroke: var(--accent); stroke-width: 2; }
.aq-hydro .meas { fill: var(--warn); stroke: var(--surface); stroke-width: 1.5; }
.aq-sites-wrap { max-height: 420px; overflow-y: auto; }

/* Filter chips: interactive, pressed = accent. Not status pills. */
.aq-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.aq-filter { height: 28px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 600; cursor: pointer; transition: background-color 120ms ease; }
.aq-filter:hover { background: var(--surface-2); }
.aq-filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Solver detail: one disclosure, four panels. */
.aq-explore-detail summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; list-style: none; }
.aq-explore-detail summary::-webkit-details-marker { display: none; }
.aq-explore-detail summary::before { content: "▸"; color: var(--muted); font-size: 12px; transition: transform 120ms ease; }
.aq-explore-detail[open] summary::before { transform: rotate(90deg); }
.aq-explore-detail summary .aq-explore-run { margin-left: 0; }
.aq-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.aq-detail-grid h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.aq-detail-grid > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.aq-detail-wrap { max-height: 320px; overflow-y: auto; }
.aq-meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; font-size: 13px; }
.aq-meta dt { color: var(--muted); font-weight: 400; }
.aq-meta dd { margin: 0; color: var(--ink); }
.aq-flags { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); }
.aq-flags strong { color: var(--ink); font-weight: 600; }

@media (max-width: 1280px) {
  .aq-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .aq-hydro-grid, .aq-detail-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .aq-step-page:has(.aq-explore) { padding: 16px 16px 32px; }
  .aq-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aq-explore-actions { width: 100%; }
  .aq-explore-actions .run-picker { flex: 1 1 100%; width: 100%; }
  .aq-explore-actions .hx-btn { flex: 1 1 auto; }
  .aq-explore-card { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .aq-explore-jump a, .aq-filter, .aq-explore-detail summary::before { transition: none; }
}

/* ACQ-CALSTD-1: the run against the project's standard, one criterion per row. */
.aq-standard-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.aq-standard-results li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.aq-standard-results li:first-child { border-top: 0; }
.aq-standard-results .hx-chip { justify-self: start; }
.aq-standard-results .aq-explore-line { margin: 0; }

/* ACQ-RESULTS-2 §1: per layer and the water budget between areas. Term colours are domain colour (the snake's tokens). */
.zb-stack-wrap { overflow-x: auto; }
.zb-stack { display: block; width: 100%; max-width: 760px; height: auto; }
.zb-band { fill: var(--surface-2); stroke: var(--line); }
.zb-mid { stroke: var(--line-strong); stroke-width: 1; }
.zb-name { fill: var(--ink); font: 600 13px var(--font); }
.zb-sub { fill: var(--muted); font: 400 11px var(--font); }
.zb-net { fill: var(--ink); font: 600 13px var(--mono); font-variant-numeric: tabular-nums; }
.zb-seg.out { opacity: .72; }
.zb-cross line { stroke: var(--accent); stroke-width: 2; }
.zb-cross polygon { fill: var(--accent); }
.zb-cross text { fill: var(--ink); font: 600 12px var(--mono); }
.t-recharge { fill: var(--snake-water); background: var(--snake-water); }
.t-pumping { fill: var(--snake-high); background: var(--snake-high); }
.t-springs { fill: var(--water-deep); background: var(--water-deep); }
.t-streams { fill: var(--water); background: var(--water); }
.t-edge { fill: var(--snake-tested); background: var(--snake-tested); }
.t-storage { fill: var(--snake-mid); background: var(--snake-mid); }
.t-et, .t-other { fill: var(--snake-proposed); background: var(--snake-proposed); }
.zb-legend, .hg-legend, .hg-chart-legend, .zb-chosen, .zb-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--muted); }
.zb-legend li, .hg-legend li, .hg-chart-legend li { display: inline-flex; align-items: center; gap: 6px; }
.zb-swatch { width: 14px; height: 10px; border-radius: 2px; }
.zb-pick { display: flex; flex-direction: column; gap: 12px; }
.zb-pick-tools { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.zb-pick-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.zb-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); margin-left: auto; }
.zb-check input { accent-color: var(--accent); width: 16px; height: 16px; }
.zb-map, .hg-map { position: relative; height: 420px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.zb-area-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--soft); color: var(--on-soft); font-size: 12px; font-weight: 600; }
.zb-remove { width: 22px; height: 22px; border: 0; border-radius: 999px; background: transparent; color: inherit; font-size: 14px; line-height: 1; cursor: pointer; }
.zb-remove:hover { background: var(--surface-2); }
.zb-go { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zb-go .aq-explore-line { flex: 1 1 320px; }
.zb-answer { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.zb-kicker { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.zb-headline { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); max-width: 760px; }
.zb-answer .aq-table th[scope="row"] { font-weight: 600; }
.zb-working { display: flex; align-items: center; gap: 8px; }
.zb-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); animation: zb-pulse 1.2s ease-in-out infinite; }
@keyframes zb-pulse { 50% { opacity: .35; } }
.zb-more summary, .zb-how summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); }
.zb-how .aq-meta { margin-top: 8px; }
.zb-how .aq-meta dd { max-width: 760px; line-height: 1.45; }
.zb-share { display: block; }

/* ACQ-RESULTS-2 §2–3: the residual map and the hydrograph. */
.hg-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hg-count { margin-left: 2px; font-weight: 400; opacity: .75; font-variant-numeric: tabular-nums; }
.hg-dot { width: 12px; height: 12px; border-radius: 999px; border: 1px solid var(--surface); }
.hg-dot.low3, .hg-dot.low1 { background: var(--snake-low); }
.hg-dot.low1 { opacity: .55; }
.hg-dot.high3, .hg-dot.high1 { background: var(--snake-high); }
.hg-dot.high1 { opacity: .55; }
.hg-dot.close { background: var(--snake-mid); }
.hg-dot.none { background: var(--surface); border: 1.5px solid var(--muted); }
.hg-title { margin: 0; font-size: 14px; color: var(--ink); }
.hg-chart .aq-well-chart { max-width: 900px; }
.hg-line { width: 18px; height: 2px; background: var(--accent); }
.hg-meas { width: 8px; height: 8px; border-radius: 999px; background: var(--warn); }
/* The map readout is one line of fixed height inside the map, so a longer text never moves the page. */
.results-map-readout { box-sizing: border-box; height: 32px; max-width: min(520px, 100%); padding: 0 10px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-1); font-size: 12px; color: var(--ink); pointer-events: none; }
/* The pick: a ring with a pin and a label, drawn above the dots so it reads at any zoom. */
.results-pick { position: relative; width: 34px; height: 34px; pointer-events: none; }
.results-pick-ring { position: absolute; inset: 0; border: 3px solid var(--accent); border-radius: 999px; box-shadow: 0 0 0 2px var(--surface), var(--shadow-1); }
.results-pick-ring::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 999px; background: var(--accent); }
.results-pick-label { position: absolute; left: 40px; top: 5px; white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 600 12px var(--font); box-shadow: var(--shadow-1); }
@media (prefers-reduced-motion: reduce) { .zb-dot { animation: none; } }
@media (max-width: 640px) {
  .zb-map, .hg-map { height: 320px; }
  .zb-check { margin-left: 0; }
}