/* Compare tab — Groups tab header, landing dashboard, and editorial story blocks.
   Split from compare.css; see compare.css for history. */

/* Compare tab (and the older Groups landing).

   Renamed from "Groups" (Trusts / LAs / Inspectors merged view) to
   "Compare" as the editorial story took over. The "groups" vocabulary
   survives in class names (and the legacy #tab=groups hash redirect)
   even though the merged view and its sub-view state are gone.

   Hierarchy:
   - .groups-head — the tab header row with h2 + view toggle.
   - .groups-dash-stat — the per-stat tile, reused standalone inside
     the trust explorer's context strip (.trust-context-stats).
   - .ga-track / .ga-seg — grade mini-bar (schools-list-panel).
     .ga-row-badge — status pill (trusts.js).
   - .compare-slider — the inline draggable min-N slider.
   - .compare-explore-* — the "explore similar" invitation block.

   The editorial story renderer (compare-block.js) and its
   .compare-block / .compare-grid / .compare-list / distress
   sub-classes were retired in the explorer migration (PR 753) and the
   orphaned rules removed in the dead-class sweep. The group profile
   (drill-through) and Inspectors-view side panel are deferred to a
   follow-up PR — they move with the trust / panel CSS extraction. */

/* Groups tab — the Trusts / LAs merged header. h2 on the left,
   the Trust / Local-authorities toggle on the right; same row. */
.groups-head {
  display: flex; align-items: center; gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
}
.groups-head h2 { margin: 0; }

/* "Group by" pill row that sits in the .groups-head, one per
   dimension (All / Trust / Local authority / Inspector). Replaces
   the older segmented toggle so the same primitive can grow to a
   fifth dimension (Region) without re-tuning a fixed-width control.
   Uses .area-pill (same as the inspector region pill row) for
   visual consistency with other single-select pill bars. */
.groupby-row {
  display: inline-flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap;
}
.groupby-row .area-pill { font-size: 12.5px; /* @approved: dense-table half-px; intentional between --text-sm (12px) and --text-base (13px) for compact group-by pill */ }

/* Groups landing dashboard — the per-stat tile. The 5-up grid
   container (.groups-dash-stats) was retired with the old groups
   landing; the tile recipe below is still reused as a standalone
   stat inside the trust explorer's context strip (.trust-context-
   stats), so it stays.
   Self-contained geometry (flex column with internal 4px gap for the
   k / v / n stack) lives on this selector — the JS emits
   `groups-dash-stat trust-context-stat`, not the `.card` primitive, so
   the tile owns its own layout. */
.groups-dash-stat {
  display: flex; flex-direction: column; gap: var(--space-1);
}
.groups-dash-stat .k {
  color: var(--ink-3);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.groups-dash-stat .v {
  color: var(--ink);
  font-size: 24px; /* @approved: bespoke dashboard KPI number; deliberately large for at-a-glance stat readability */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.groups-dash-stat .n {
  color: var(--ink-3);
  font-size: 12px;
}

/* Inline draggable slider used inside the block controls. The
   full .min-reports-slider layout is two-row and too tall here. */
/* @applies-to input */
.compare-slider {
  accent-color: var(--accent);
  cursor: pointer;
  width: 140px;
  height: 22px;
  vertical-align: middle;
}
.compare-slider-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
  min-width: 1.5em;
  text-align: right;
}
/* Explore invitation block */
.compare-explore {
  display: flex; flex-direction: column; gap: var(--space-3);
}
.compare-explore-search {
  display: flex; gap: var(--space-2); align-items: center;
  flex-wrap: wrap;
}
.compare-explore-input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font: inherit; font-size: 13px;
}
.compare-explore-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.compare-explore-results {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 180px;
  overflow-y: auto;
}
/* @applies-to [tabindex="0"] */
.compare-explore-result {
  padding: 5px 8px;
  border-radius: var(--r-sm);
  font-size: 13px;
  cursor: pointer;
  display: flex; justify-content: space-between; gap: var(--space-2);
}
.compare-explore-result:hover,
.compare-explore-result--active { background: var(--rule); }
.compare-explore-result-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-explore-result-n { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
/* Trailing "open" affordance — a faint arrow on the hovered / keyboard-
   active result, signalling the row opens that entity's profile. Reserves
   its width even at opacity 0 so revealing it never shifts the row. */
.compare-explore-result::after {
  content: "→";
  flex: 0 0 auto;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity var(--t-fast) ease;
}
.compare-explore-result:hover::after,
.compare-explore-result--active::after { opacity: 1; }
/* "Press Enter to open the top match" — the keyboard fast-path is
   otherwise undiscoverable. Shown only while real result rows are
   present (not the empty box or the "No … found" note), hence :has()
   on an actual option row rather than :not(:empty). */
.compare-explore-hint {
  font-size: 11px;
  color: var(--ink-3);
  padding: 1px 8px 0;
  margin: 0;
  display: none;
}
.compare-explore-results:has(.compare-explore-result) + .compare-explore-hint {
  display: block;
}
/* Loading / empty states */
.compare-loading {
  color: var(--ink-3); font-size: 13px; font-style: italic;
  padding: 8px 0;
}

/* ── Local-authority choropleth — the Area SEND / ILACS map mounted in
   the explorer's swappable pane (a map question). Needs an explicit
   height for Leaflet to size its tiles; the legend reuses the shared
   .legend recipe. */
.la-choropleth {
  height: 460px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper-2);
}
.la-choropleth-legend { margin-top: var(--space-3); }

/* ── Trust landing: finder banner + question explorer (one surface) ───
   The search finder and the chip-cloud explorer share one .chart-card so
   the page reads as a single flow. Content sits in a centered, readable
   column; the leaderboard never stretches edge to edge on wide screens. */
.trust-landing {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 18px 20px;
}
.trust-finder,
.trust-explorer-head,
.trust-explorer-layout {
  width: 100%;
}
/* Explorer body — questions in a fixed-width left sidebar, the active
   graph filling the rest of the main column. Fills the card width like
   every other tab (the page already caps content at .main-inner's
   var(--page-max); an extra inner cap here just left awkward side
   gaps). Stacks to one column on narrow viewports. */
.trust-explorer-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 760px) {
  .trust-explorer-layout { grid-template-columns: 1fr; }
}
/* Search banner — prominent but compact: a tinted band with a small
   eyebrow label over a full-width, slightly enlarged search input. */
.trust-finder {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.trust-finder-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Prominent search field with a leading magnifier (a themed mask, so it
   follows --ink-3 in light/dark and carries no colour literal). The input
   sits white-on-cream for a layered feel. */
.trust-finder .compare-explore-search { position: relative; }
.trust-finder .compare-explore-search::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  background: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.415l-3.85-3.85zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.415l-3.85-3.85zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
.trust-finder .compare-explore-input {
  font-size: var(--text-md);
  padding: 11px 14px 11px 42px;
  border-radius: var(--r-md);
}
.trust-explorer-head h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
  line-height: 1.2;
}
.trust-explorer-head p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* Question sidebar — the "Show me" list. Vertical full-width buttons
   (a scannable side nav), left-aligned, label on top. Reuses the
   settingPillRow markup (.chart-customise-group of .chip--pill tabPills). */
.trust-explorer-chips .chart-customise-group {
  align-items: stretch;
  gap: var(--space-2);
  margin: 0;
}
.trust-explorer-chips .chart-customise-group-label {
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.trust-explorer-chips .chart-customise-pills {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
}
.trust-explorer-chips .chip--pill {
  width: 100%;
  text-align: left;
  font-size: var(--text-sm);
  padding: 9px 12px;
  border-radius: var(--r-md);
  transition: background 0.12s ease, color 0.12s ease;
}
/* Inactive items are borderless nav rows (not the form-y bordered boxes
   the base .chip gives); hover tints. Active keeps the accent fill from
   .chip--on. */
.trust-explorer-chips .chip--pill:not(.chip--on) {
  border-color: transparent;
  background: transparent;
  color: var(--ink-2);
}
.trust-explorer-chips .chip--pill:hover:not(.chip--on) {
  background: var(--paper-2);
  color: var(--ink);
}
@media (max-width: 760px) {
  /* Sidebar stacks above the chart — let chips wrap as a row again so
     they don't form a tall column. */
  .trust-explorer-chips .chart-customise-pills { flex-direction: row; flex-wrap: wrap; }
  .trust-explorer-chips .chip--pill { width: auto; }
}

/* Chart frame — min-width:0 lets the grid cell shrink so the responsive
   leaderboard tracks the column width instead of overflowing. */
.trust-explorer-chart {
  min-width: 0;
}
.trust-explorer-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.trust-explorer-chart-titles h4 {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.25;
}
.trust-explorer-universe {
  margin: 2px 0 0;
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.trust-explorer-graph { min-height: 320px; }
/* The cog sits flush-right in the chart head; the shared
   .chart-customise recipe owns the gear + popover styling. */
.trust-explorer-cog { flex: 0 0 auto; }
/* Disabled placeholder for map questions (no settings) — keeps the
   head slot occupied so the gear doesn't flicker in/out as you move
   between map and leaderboard questions. Greyed + non-interactive. */
.trust-explorer-cog--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  display: inline-flex;
  align-items: center;
}

/* The question sidebar stays in view as the (taller) board + context
   strip scroll past, so you can switch questions without scrolling back
   up. Static on narrow viewports where the rail stacks on top. */
.trust-explorer-chips {
  position: sticky;
  top: var(--space-4);
  align-self: start;
}
@media (max-width: 760px) {
  .trust-explorer-chips { position: static; }
}

/* Context strip below the board — fills the lower band with orientation:
   headline stat tiles, a distribution of the whole field, and the
   methodology note. Set off from the board by a quiet top rule. */
.trust-explorer-context {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.trust-context-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 640px) {
  .trust-context-stats { grid-template-columns: 1fr; }
}
.trust-context-stat {
  background: var(--paper-2);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
}
.trust-context-stat .n { line-height: 1.3; }
.trust-context-stat--link { cursor: pointer; transition: background 0.12s ease; }
.trust-context-stat--link:hover { background: var(--rule); }
.trust-context-stat--link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.trust-context-dist-label {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.trust-context-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--ink-3);
  line-height: 1.5;
}