/* Epoch bar, observation ribbon and hexagon legend: adjustments owned by UI-1 (css/presentation.css belongs
   to UI-2 from 14/11 01:40; see web/INTEGRATION.md). Loaded after presentation.css. */

/* Results layout: the map is the hero. The analysis page grows past the viewport on this tab (the .main column
   scrolls); the map takes ~62 % of the viewport height, the ribbon follows under it, and the right panel stays
   in view beside the map (sticky, own scroll). */
#page-analysis.on-results { height: auto; min-height: 0; }
#page-analysis.on-results .workspace { flex: none; align-items: start; }
#page-analysis.on-results .stage { min-height: 0; }
#page-analysis.on-results #view-results { position: relative; inset: auto; }
#page-analysis.on-results .res-map { flex: none; height: max(420px, 62vh); min-height: 0; }
#page-analysis.on-results .rightpanel { position: sticky; top: 8px; max-height: calc(100vh - 96px); }

/* the evaluation-only reference (ALOS-4) is a fainter tick, not a hollow box that reads like a zero */
.rb-acq-ref rect { fill: var(--text); stroke: none; opacity: .5; }

/* the selected epoch tag is the one place the ribbon uses the accent */
.rb-epoch[aria-pressed="true"] .rb-epoch-hit { stroke: var(--accent); stroke-dasharray: none; stroke-opacity: .5; }

/* same-orbit shortcuts sit on the tool row: compact, track as a quiet suffix */
.eb-fair .seg-tab { padding: 4px 7px; }
.seg-sub { margin-left: 4px; font-size: var(--fs-11); color: var(--muted); font-weight: 600; }
.eb-type { padding: 6px 9px; }

/* chips and selects keep their numbers aligned */
.eb-select, .eb-change, .seg-tab { font-variant-numeric: tabular-nums; }
.eb-select:focus-visible, .eb-type:focus-visible, .eb-change:focus-visible, .eb-swap:focus-visible, .seg-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.eb-type:focus-visible { outline-offset: -3px; }

@media (max-width: 900px) {
  #page-analysis.on-results .rightpanel { position: static; max-height: none; }
  #page-analysis.on-results .res-map { height: 62vh; }
  .map-legend { max-width: 210px; font-size: var(--fs-11); padding: 6px 8px; bottom: 20px; }
  .map-legend .note { font-size: var(--fs-11); margin: 2px 0; }
}