/* Ranges along the snake (ACQ-VIZ-3). Same tokens as the snake; colours of ACQ-VIZ-1-proof.html. */
:root {
  --range-allowed: #d5dbe0; --range-prior: #8a949c; --range-post: #24506e; --range-run: #d9822b; --range-out: #b3261e;
  --range-rung1: #b8651a; --range-rung2: #8a4a10;
}
:root[data-theme=dark] {
  --range-allowed: #34404b; --range-prior: #8b939a; --range-post: #9cc9e6; --range-run: #f0a050; --range-out: #ff7b6e;
  --range-rung1: #e08a3a; --range-rung2: #c87428;
}
@media print {
  :root, :root[data-theme=dark] { --range-allowed: #d5dbe0; --range-prior: #8a949c; --range-post: #24506e; --range-run: #d9822b; --range-out: #b3261e; }
}

.ranges-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; }
.ranges-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 8px; font-size: 13px; }
.ranges-filter .hx-btn { font-size: 12px; padding: 3px 9px; }
.ranges-pane { background: var(--snake-surface, var(--hx-card)); }
.ranges-svg { display: block; }
.ranges-svg text { fill: var(--hx-fg); font-size: 12px; }
.ranges-svg .snake-sub { fill: var(--hx-muted); font-size: 10.5px; }
.ranges-svg .ranges-label { font-weight: 500; }
.ranges-grid { stroke: var(--hx-border-soft); }
.ranges-one { stroke: var(--hx-border); stroke-width: 1.5; }

.ranges-group { cursor: pointer; outline: none; }
.ranges-hit { fill: transparent; }
.ranges-group:hover .ranges-hit { fill: var(--hx-border-soft); opacity: .35; }
.ranges-group:focus-visible .ranges-hit { stroke: var(--hx-accent); stroke-width: 2; }
.ranges-group.sel .ranges-hit { stroke: var(--snake-sel, #b3261e); stroke-width: 2; }

.range-allowed { fill: var(--range-allowed); }
.range-prior { fill: var(--range-prior); }
.range-box { fill: none; stroke: var(--range-post); stroke-width: 1.5; }
.range-ring { fill: none; stroke: var(--range-post); stroke-width: 2; }
.range-nobar { fill: var(--hx-muted) !important; font-size: 10px !important; font-style: italic; }
.range-run circle { fill: var(--range-run); }
.range-run.outside circle { stroke: var(--range-out); stroke-width: 2; }
/* ACQ-SEARCH-1 rungs: darker by rung; a pruned candidate fades with its cut marked; an audit run is hollow. */
.range-run.rung-1 circle { fill: var(--range-rung1); }
.range-run.rung-2 circle { fill: var(--range-rung2); }
.range-run.pruned { opacity: .35; }
.range-run.audit circle { fill: var(--snake-surface, var(--hx-card)); stroke: var(--range-run); stroke-width: 1.5; }
.range-cut { stroke: var(--hx-fg); stroke-width: 1.2; }

.ranges-finding { margin: 10px 0 0; font-size: 13px; line-height: 1.5; }
.ranges-outside { margin: 8px 0 0; font-size: 13px; }
.ranges-outside ul, .ranges-strip { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; }
.ranges-strip { list-style: disc; }

@media (max-width: 760px) {
  .ranges-card { padding: 12px; }
}
