/* ============================================================
   Shared chrome for the four history tools (natural / economic /
   health / infrastructure). Loaded AFTER each page's own
   <style is:inline>, so equal-specificity rules here win.
   ------------------------------------------------------------
   Two things this changes:

   1. The control panel was the only white one on the site — every
      map tool's panel is dark navy. It's the same kind of object,
      so it now looks like one.
   2. Each chart's explanatory note was always-on prose under the
      graph. On a phone that was taller than the chart itself, so
      three charts meant scrolling past three paragraphs to compare
      them. It's behind an "i" now — collapsed where space is tight,
      still open by default where there's room for it.
   ============================================================ */

/* ---- control panel: LIGHT, and fixed to the viewport ------------------
   This panel was made dark to match the map tools. That was the wrong read of
   the rule: panels sit DARK when they float ON a map (so they separate from
   the imagery underneath) and LIGHT when they sit BESIDE content, as a card on
   the page. This one is beside charts, on paper, so it is a card.

   It also has to stop growing. With every group expanded the list ran past the
   bottom of the screen and pushed the page height with it, so picking a metric
   near the end meant scrolling the whole document. The panel is now capped to
   the viewport and the metric list scrolls inside it, which keeps the range
   controls visible while you pick.
   --------------------------------------------------------------------- */
.ehside {
  padding: 6px 14px 14px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 104px);      /* sticky top:84px + a little breathing room */
}
/* Only the metric list scrolls. Scrolling the whole aside would take the range
   slider and presets with it, and those are what you adjust WHILE reading the
   list. */
.ehside #mgroups {
  flex: 1 1 auto;
  min-height: 0;                        /* without this a flex child refuses to shrink */
  overflow-y: auto;
  overscroll-behavior: contain;         /* don't chain to the page at the ends */
  padding-right: 6px;
  margin-right: -6px;                   /* keep the scrollbar off the labels */
}
.ehside #mgroups::-webkit-scrollbar { width: 8px; }
.ehside #mgroups::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.ehside #mgroups::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
.ehside { scrollbar-width: thin; }
@media (max-width: 880px) {
  /* the drawer is already pinned top:0/bottom:0, so the cap would fight it */
  .ehside { max-height: none; }
}

/* panel-sections.js styles its headers for a DARK panel (light text, white
   hairlines). This panel is light, so every one of those has to be inverted
   here or the section titles come out cream-on-white. */
.ehside .pwsec { border-bottom: 1px solid var(--line-soft); }
.ehside .pwsec-h { color: var(--ink-faint); }
.ehside .pwsec-h:hover { color: var(--navy-900); }
.ehside .pwsec-h::before { background: var(--line); }
.ehside .pwsec-h .gcx { color: var(--ink-faint); }
.ehside .pwsec.hason .pwsec-h { color: var(--navy-900); }
.ehside .pwsec.hason .pwsec-h::before { background: var(--gold); }

/* ---- per-chart chrome: info + remove ---- */
.hph { align-items: center; }
.hpacts { display: flex; align-items: center; gap: 4px; flex: none; margin-left: 6px; }
.hpbtn {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 7px;
  background: #fff; color: var(--ink-faint);
  cursor: pointer; padding: 0; line-height: 1;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  transition: color .12s, border-color .12s, background .12s;
}
.hpbtn:hover { color: var(--navy-900); border-color: var(--navy); }
/* "expanded" state — a light navy tint, not a dark fill. The note defaults to
   OPEN on desktop, so a dark `.on` made every info button read as a heavy dark
   chip against an otherwise light UI. */
.hpbtn.on { background: rgba(31,58,89,.09); border-color: var(--navy); color: var(--navy-900); }
.hpbtn.hpx:hover { color: #fff; background: var(--risk-4); border-color: var(--risk-4); }
.hpbtn svg { width: 13px; height: 13px; display: block; }
.hph .hpv { margin-left: auto; }
.hpanel .hpnote[hidden] { display: none; }

/* the header can run out of room once two buttons sit in it */
@media (max-width: 520px) {
  .hph { flex-wrap: wrap; }
  .hph .hpl { flex: 1 1 100%; }
  .hph .hpv { margin-left: 0; }
}

/* ---- freemium locks (series toggles, deep-range presets, export) ----
   Free users see every control so the depth is visible, but the paid ones are
   dimmed with a gold padlock and open the membership gate on click. */
label.histlocked { color: var(--ink-faint); cursor: pointer; }
label.histlocked input { pointer-events: none; }
button.histlocked { opacity: .72; cursor: pointer; }
.histlk { color: var(--gold-600, #B45E1C); vertical-align: middle; flex: none; }
label.histlocked .histlk { margin-left: auto; }