/* Step 5 data use: bounded history exploration inside the water-level and
   ice disclosures — series/program picker, bounded SVG chart, and the
   50-row paginated source-observation table. */

/* Reserve the scrollbar gutter: when a filling history disclosure pushes
   the popup past its max-height, a scrollbar that steals content width
   would re-wrap every text line in every section — the dominant layout
   cost in the Step 5 rendering budget. */
.leaflet-popup .leaflet-popup-content {
  scrollbar-gutter: stable;
}

/* Isolate style/layout so filling the summary, chart, and table page
   re-lays-out this disclosure, not every sibling section of a
   shrink-to-fit popup. The history rendering budget counts browser
   layout tasks too. */
.observed-history__body {
  contain: layout style;
}

.observed-history__explore {
  margin-top: 0.85rem;
  border-top: 1px solid var(--border-color, #d7dde2);
  padding-top: 0.6rem;
  contain: layout style;
}

/* An expanded, loading-or-loaded history body is a fixed-height,
   size-contained scroller. The class is applied when the load starts —
   before the measured decode-to-render interval opens — so every staged
   commit (summaries, picker, chart, table pages) mutates only this
   contained subtree and can never trigger a popup-wide layout or repaint
   under the 4× throttled rendering budget. Every source row stays
   reachable: the section scrolls here, and pagination walks the record. */
.observed-history__body--expanded {
  height: 24rem;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  contain: size layout style paint;
  padding-right: 0.25rem;
}

.observed-history__explore h4 {
  margin: 0 0 0.4rem;
}

/* Laid out (visibility only) so the control theme initializes before the
   measured interval; replaced by the real picker when content renders. */
.observed-history__warm-select {
  position: absolute;
  visibility: hidden;
  width: 1px;
  height: 1px;
}

.observed-history__series-picker {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.85em;
}

.observed-history__series-picker select {
  width: 100%;
  max-width: 100%;
  margin-top: 0.15rem;
}

.observed-history__summary-line {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.85em;
  color: var(--text-muted);
}

.history-chart {
  margin: 0 0 0.6rem;
  /* Keep chart paint invalidation inside the figure. */
  contain: content;
}

.history-chart svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: var(--accent-soft, rgba(127, 127, 127, 0.08));
}

.history-chart__axis {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.35;
}

.history-chart__line {
  fill: none;
  stroke: var(--accent, #2c7fb8);
  stroke-width: 1.5;
}

.history-chart__points {
  fill: none;
  stroke: var(--accent, #2c7fb8);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.history-chart text {
  font-size: 10px;
  fill: currentColor;
}

.history-chart figcaption {
  margin-top: 0.2rem;
  font-size: 0.8em;
  color: var(--text-muted);
}

.observed-history__table-toggle {
  display: flex;
  gap: 0.3rem;
  margin: 0.5rem 0 0.4rem;
}

.observed-history__table-toggle button {
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--accent);
  border-radius: 0.5rem;
  font-size: 0.78em;
  line-height: 1;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}

.observed-history__table-toggle button[aria-pressed='true'] {
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 650;
}

.history-table table {
  width: 100%;
  /* Separate borders and fixed layout: collapsed borders put a 50-row
     page on Blink's slow border-resolution path, and auto layout would
     re-measure every cell's intrinsic width — both blow the 50 ms
     rendering budget under the 4× throttle. */
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85em;
  table-layout: fixed;
}

.history-table caption {
  text-align: left;
  font-weight: 650;
  padding-bottom: 0.25rem;
}

.history-table th,
.history-table td {
  text-align: left;
  padding: 0.15rem 0.5rem 0.15rem 0;
  border-bottom: 1px solid var(--border-color, #d7dde2);
  vertical-align: top;
}

.history-table__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.history-table__pager button {
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--accent);
  border-radius: 0.5rem;
  font-size: 0.78em;
  line-height: 1;
  /* Comfortably above the WCAG 2.5.8 24px pointer-target minimum. */
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}

.history-table__pager button:disabled {
  opacity: 0.45;
  cursor: default;
}

.history-table__pager button:not(:disabled):hover,
.history-table__pager button:not(:disabled):focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
  outline: none;
}

.history-table__status {
  flex-basis: 100%;
  margin: 0.1rem 0 0;
  font-size: 0.8em;
  color: var(--text-muted);
}