/* ==========================================================================
   PAGE · THE UNIFIED HUB (p-hub / HubsController#show) — the composition the hub
   adds on top of the systems it reuses (s1 lens · s2 leaderboard/coverage/bar ·
   s3 collect/tray · the op-figure map · op-plans · crosslink). One template for
   the three zoom levels (domain / subdomain / factor); only the HERO's
   page-order inversion is new furniture here.

   The redesign's central move: the COUNTRY LEADERBOARD leads (the wide lead
   column), and the choropleth + the scoring legend are DEMOTED into a sidebar —
   never the old full-width legend banner on top. Everything else is composed
   from the shared components unchanged.

   Tokens only, below 01-settings; sorts after every 06-components file, so a
   page rule always out-cascades the component it extends.
   ========================================================================== */


/* --------------------------------------------------------------------------
   THE HERO — leaderboard lead + map/legend sidebar. Two columns on a wide
   viewport (the ranking the centrepiece, the sidebar narrow); a single stack on
   a narrow one, the leaderboard still first so the lead never falls below the
   map.
   -------------------------------------------------------------------------- */
.op-hub-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: var(--space-xl);
  align-items: start;
}
@media (max-width: 60rem) {
  .op-hub-hero { grid-template-columns: 1fr; }
}

.op-hub-hero__lead { min-width: 0; }

/* The sidebar sits beside the lead on a wide viewport; it carries the inset map
   and the demoted scoring legend, stacked. */
.op-hub-hero__aside {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
}
@media (min-width: 60.0625rem) {
  .op-hub-hero__aside { position: sticky; top: var(--space-md); }
}


/* --------------------------------------------------------------------------
   THE SCORING LEGEND — demoted from any full-width top banner into the sidebar,
   beneath the inset map. A calm key (good / moderate / poor / N-A) plus one line
   pointing at the published scale.
   -------------------------------------------------------------------------- */
.op-hub-hero__legend {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.op-hub-hero__legend-head {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text);
}
.op-hub-hero__legend-note {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}
.op-hub-hero__legend-note a { color: var(--text-secondary); }
.op-hub-hero__legend-note a:hover { color: var(--accent); }