/* Compare tab — Panel content: schools toolbar, themed bullet list, panel
   coverage/grade-summary/info-blocks, ILACS trajectory, and characteristics chart.
   Split from compare.css; see compare.css for history. */

/* ────────────────────────────────────────────────────────────
   Panel content — schools-toolbar, themed bullet list, panel-block
   labels, coverage strip, per-area grade summary, SEND/ILACS info
   blocks, inspection-trajectory pills, empty-state clear button.
   Used by Trust / LA / Inspector profile panels.
   ──────────────────────────────────────────────────────────── */

/* Schools panel view-toggle bar — sits above the list, small
   buttons (Cards / Next steps / By theme / By area) with counts.
   Overflow + edge fade come from the shared .hscroll recipe in
   components.css (this class is on its opt-in list). Right
   alignment is via margin-left: auto on the group, NOT
   justify-content: flex-end: with an overflowing flex container,
   flex-end makes the left overflow unreachable (the first segment
   rendered half off-canvas on 390px viewports), whereas an auto
   margin collapses to 0 when there's no free space, giving a
   left-anchored scroller that keeps "Cards (n)" visible. */
.panel-schools-toolbar {
  margin: 0 0 10px;
  display: flex;
  scrollbar-width: none;
}
.panel-schools-toolbar::-webkit-scrollbar { display: none; }
.panel-schools-toolbar > .toggle-group { margin-left: auto; }
/* Inside the scroller the default outward focus ring would clip at
   the overflow edge — draw it inset, same treatment as .tab in the
   scrolling tab bar (base.css). */
.panel-schools-toolbar .toggle-btn:focus-visible { outline-offset: -2px; }
/* Cards view — a compact inspection summary on top, then the school
   cards two-up (collapsing to one column when the panel is narrow).
   Shared by the Trust / LA / Inspector profile panels. */
.panel-inspection-summary {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.panel-inspection-summary strong { color: var(--ink); }
.panel-school-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}
@media (max-width: 760px) {
  .panel-school-grid { grid-template-columns: 1fr; }
}
/* "Show all N / Show fewer" cards toggle — a quiet full-width text button
   under the (capped) card grid. */
.panel-cards-more {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-2);
  background: transparent;
  border: 1px dashed var(--rule);
  border-radius: var(--r-sm);
  color: var(--accent);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.panel-cards-more:hover { border-color: var(--accent); background: var(--paper-2); }
.panel-cards-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.panel-schools-toolbar .toggle-btn-count {
  color: var(--ink-3);
  font-weight: 400;
  margin-left: 2px;
}
.panel-schools-toolbar .toggle-btn.on .toggle-btn-count {
  color: inherit;
  opacity: 0.7;
}
/* Flat / themed bullet list inside the schools panel. Each row is
   a coloured theme chip on the left, the bullet text + a "School ·
   phase · date" meta-line on the right. */
/* List-reset stays on the class; flex-column-gap recipe lives
   on `.stack .stack--gap-2` in components.css. */
.panel-bullets-list {
  list-style: none; padding: 0; margin: 0;
}
.panel-bullet {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--rule-2);
  border-left: 3px solid var(--c, var(--rule));
  border-radius: var(--r-sm);
  background: var(--paper-2);
}
.panel-bullet-theme {
  align-self: start;
  display: inline-block;
  font-size: var(--text-nano);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  padding: 2px 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--c, var(--rule)) 18%, var(--card));
  border: 1px solid color-mix(in srgb, var(--c, var(--rule)) 40%, var(--card));
  white-space: nowrap;
}
.panel-bullet-body { min-width: 0; }
.panel-bullet-text {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.panel-bullet-meta {
  margin: 4px 0 0;
  color: var(--ink-3);
  font-size: 11px;
}
/* Themed group inside the panel — collapsible <details> with a
   coloured left stripe matching the theme palette. */
.panel-theme-group {
  border: 1px solid var(--rule-2);
  border-left: 3px solid var(--c, var(--rule));
  border-radius: var(--r-sm);
  background: var(--card);
  padding: 0;
  margin: 0 0 10px;
}
/* Disclosure chrome (summary list-style suppression, caret ▸,
   [open] rotate, caret hover-darken) is provided by the
   `.disclosure` primitive in components.css — JS composes
   `class="disclosure panel-theme-group"` on the <details>. The
   flex / space-between layout, padding, headline colour /
   font-size / font-weight, plus the count-suffix slot, are
   tab-specific and stay here. The primitive's 6px caret-to-name
   gap replaces the previous 8px margin-right (drift rationalised
   as part of this migration). */
/* @applies-to summary */
.panel-theme-group > .panel-theme-summary {
  justify-content: space-between;
  padding: 8px 12px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.panel-theme-count {
  color: var(--ink-3); font-weight: 400; font-size: 11px;
}
/* Right-hand cluster in the theme-group summary: count + the
   "Search all →" deep-link into Explore's bullet search (hash-only
   navigation, pre-filtered to the row's theme). */
.panel-theme-side {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.panel-theme-explore {
  color: var(--accent);
  font-weight: 400;
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
}
.panel-theme-explore:hover { text-decoration: underline; }
.panel-theme-group .panel-bullets-list {
  padding: 0 10px 10px;
}
/* "By area" view in the schools panel — a pill row at the top
   for picking the evaluation area, then per-school blocks each
   showing the inspector's narrative + relevant next-steps for
   that one area. Each block carries the school's grade for the
   area as a coloured left-stripe + grade chip. */
.area-pills {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  margin: 4px 0 12px;
}
/* Recipe inherited from .chip + .chip--pill (components.css). Both
   selectors are retained as JS targeting hooks (tab-specific extras
   like .groupby-row .area-pill's font-size, .inspector-region-bar
   .filter-pill-count, and .inspector-region-bar .filter-pill--clear
   compose on top). The `.on` modifier on the legacy markup is
   mirrored by `.chip--on` so the primitive's active-state chrome
   wins — kept here for any in-the-wild selectors that may still
   target the old class. */
/* @applies-to button */
/* "By area" view per-school block list — flex-column-gap recipe
   lives on `.stack .stack--gap-3` in components.css. The class is
   retained as a JS targeting hook. */
.area-school-item {
  padding: 10px 12px;
  border: 1px solid var(--rule-2);
  border-left: 3px solid var(--g, var(--rule));
  border-radius: var(--r-sm);
  background: var(--paper-2);
}
.area-school-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.area-school-name {
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.area-narrative-para {
  margin: 6px 0 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-2);
}
.area-narrative-empty { font-size: 12px; color: var(--ink-3); margin: 6px 0 0; }
.area-bullets-label {
  margin: 10px 0 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--ink-3);
  font-weight: 600;
}
.area-bullets {
  list-style: disc;
  margin: 0; padding-left: 18px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}
.area-bullets li { margin: 0 0 4px; }

.trust-school {
  padding: 10px 12px;
  border: 1px solid var(--rule-2);
  border-left: 3px solid var(--c, var(--rule));
  border-radius: var(--r-sm);
  background: var(--paper-2);
}
.trust-school-name {
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 2px;
  font-size: 13px;
}
/* Clickable school name button — appears in trust cards, bullet list,
   and by-area view. Resets button styles, inherits surrounding type. */
.school-name-btn {
  background: none; border: none; padding: 0;
  cursor: pointer; font: inherit; color: inherit; text-align: left;
}
.school-name-btn:hover { text-decoration: underline; }
.school-name-btn:focus-visible { outline: 2px solid var(--accent); border-radius: 2px; }
.trust-school-meta {
  color: var(--ink-3);
  font-size: var(--text-xs);
  margin: 0 0 6px;
}
.trust-school-meta a { color: var(--accent); }

/* Verbatim "Next steps" bullets shown under each school card in
   the trust panel. Compact and no theme tags — the panel is for
   reading the recommendations, not categorising them. */
.trust-school-bullets {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}
.trust-school-bullets li {
  padding-left: var(--space-3);
  position: relative;
}
.trust-school-bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--ink-3);
}
/* Small uppercase label that introduces each panel block (coverage,
   per-area summary, SEND, ILACS). Kept consistent across the trust
   and LA panels. Visual now comes from the .eyebrow primitive in
   base.css — the class is retained on the markup to anchor the
   inline margin-bottom: 0 override used by sibling-row patterns. */
/* Coverage strip — hero number ("N") + caption ("of M schools · X%")
   + progress bar. Hero number is the headline; bar provides the
   visual sense of proportion at a glance. */
.panel-coverage { margin-bottom: 14px; }
.panel-coverage--fallback { font-size: 12px; color: var(--ink-2); margin-bottom: var(--space-3); }
.panel-coverage-hero {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 4px 0 8px;
}
.panel-coverage-hero__num {
  font-size: 38px; /* @approved: bespoke hero size; large display number for panel coverage KPI, intentionally prominent */
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.panel-coverage-hero__meta {
  font-size: 12px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.panel-coverage-hero__pct { color: var(--ink-3); }
.panel-coverage__track {
  height: 8px;
  background: var(--paper-2);
  border-radius: var(--r-sm); overflow: hidden;
}
.panel-coverage__fill { height: 100%; background: var(--accent); }
.panel-coverage-grade-bar {
  display: flex;
  height: 10px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 14px;
}
.panel-coverage-grade-seg { height: 100%; }
.panel-coverage-grade-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.panel-coverage-grade-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: var(--space-1);
  vertical-align: middle;
  flex-shrink: 0;
}
/* Grade-coloured fills on the panel coverage stacked-bar segments
   and their matching legend dots. Selecting by `data-grade` keeps the
   per-segment width inline (legitimate — varies per data point) while
   pulling the colour into CSS, so dark-mode and tokens.css token-swaps
   cascade without a JS round-trip. */
.panel-coverage-grade-seg[data-grade="Exceptional"],
.panel-coverage-grade-dot[data-grade="Exceptional"]        { background: var(--g-exceptional); }
.panel-coverage-grade-seg[data-grade="Strong standard"],
.panel-coverage-grade-dot[data-grade="Strong standard"]    { background: var(--g-strong); }
.panel-coverage-grade-seg[data-grade="Expected standard"],
.panel-coverage-grade-dot[data-grade="Expected standard"]  { background: var(--g-expected); }
.panel-coverage-grade-seg[data-grade="Needs attention"],
.panel-coverage-grade-dot[data-grade="Needs attention"]    { background: var(--g-attention); }
.panel-coverage-grade-seg[data-grade="Urgent improvement"],
.panel-coverage-grade-dot[data-grade="Urgent improvement"] { background: var(--g-urgent); }
/* Per-area grade summary — one stacked bar per evaluation area. */
.panel-grade-summary { margin-bottom: 14px; }
.panel-grade-summary__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
/* In flex-row containers (alongside a sort-toggle) and inside the
   striped .panel-info-block, the eyebrow's default 6px bottom margin
   would add a phantom gap below the heading. Both contexts want a
   flush heading; consolidated here so callsites don't need an inline
   `margin-bottom: 0` override on each `.panel-section-head`. */
.panel-grade-summary__head .panel-section-head,
.panel-info-block .panel-section-head {
  margin-bottom: 0;
}
.panel-area-row {
  display: grid; grid-template-columns: 110px 1fr 38px; gap: var(--space-2);
  align-items: center; margin-bottom: 3px;
  font-size: 11px; color: var(--ink-2);
}
.panel-area-row__label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.panel-area-row__num {
  text-align: right; font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
/* SEND and ILACS info blocks on the LA panel. Left-edge stripe
   colour is set inline via --c (the canonical stripe-token name
   used by every other striped card variant — la-card, school-
   card, bullet, trust-school, etc.). */
.panel-info-block {
  border-left: 4px solid var(--c, var(--rule));
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--paper-2); border-radius: var(--r-sm);
}
.panel-info-block__headline {
  font-family: "Charter", Georgia, serif;
  font-size: 16px; /* @approved: Charter serif display heading; info-block panel headline in serif face */
  line-height: 1.3;
  font-weight: 600;
  margin-top: var(--space-1);
  color: var(--ink);
}
.panel-info-block__meta {
  font-size: 12px; color: var(--ink-2); margin-top: var(--space-1);
}
.panel-info-block__meta--soft { font-style: italic; }
.panel-info-block details { margin-top: var(--space-2); }
.panel-info-block details > summary {
  font-size: 12px; color: var(--ink-3); cursor: pointer;
}
.panel-info-block details > p {
  font-size: 12px; color: var(--ink-2); margin: 6px 0 0; line-height: 1.45;
}
.panel-info-block details > ul {
  font-size: 12px; color: var(--ink-2); margin: 6px 0 0;
  padding-left: 18px; line-height: 1.5;
}
.panel-info-block details > ul li { margin-bottom: var(--space-1); }
/* Nested sub-bullets (extracted from inline PDF markers). Slightly
   tighter, indented under the parent list-item. */
.panel-info-block .bullet-sublist {
  margin: 4px 0 4px;
  padding-left: 18px;
  list-style: disc;
  color: var(--ink-2);
}
.panel-info-block .bullet-sublist li { margin-bottom: 2px; }
/* Compact key-value table used by the LA-panel Financial profile
   block. Two columns: label (left, ink-3) + value (right, ink-1
   tabular). Sized to read on a 280-300px side panel. */
.finance-mini-table {
  width: 100%;
  margin: 8px 0 6px;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.finance-mini-table th,
.finance-mini-table td {
  padding: 4px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  font-weight: 400;
}
.finance-mini-table th { color: var(--ink-3); }
.finance-mini-table td {
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.finance-mini-table tr:last-child th,
.finance-mini-table tr:last-child td { border-bottom: 0; }
/* CFR 3-year trend sparkline — a 4th column on the % rows. The data
   was already in la_financial_data.json's `trend`; this draws it. */
.finance-mini-table td.finance-mini-spark {
  width: 64px;
  padding-left: 10px;
}
.la-trend-spark {
  width: 56px;
  height: 16px;
  vertical-align: middle;
  display: inline-block;
}
/* LA Geography mini-map — needs an explicit height for Leaflet to
   size its tiles. Mirrors the trust map card's min-height. */
.la-school-map-card {
  min-height: 280px;
  border-radius: var(--r-sm);
  overflow: hidden;
}
/* Inspection-trajectory pills — one grade-coloured pill per past
   ILACS inspection, oldest left → newest right, connected by a
   small arrow. Each pill shows the year + headline grade short
   label. Renders only when the LA has 2+ inspections on record.
   Pills (not dot-on-line) because the time gaps between
   inspections are uneven (5 years here, 3 there); a uniformly-
   spaced ribbon would imply a false linear time axis. */
.ilacs-trajectory {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 10px 0;
  font-size: var(--text-sm);
}
.ilacs-traj-label {
  color: var(--ink-3);
  font-size: var(--text-xs, 11px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  flex-shrink: 0;
}
/* "No previous-framework inspection" state — rendered (rather than
   omitted) so sibling school cards in the grid keep an even height. */
.ilacs-traj-none {
  color: var(--ink-3);
  font-size: var(--text-sm);
  font-style: italic;
}
.ilacs-traj-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}
/* Trajectory pills share the same tinted treatment as
   .sv-grade-chip so the trajectory reads as a sequence of the
   same chip family the card uses up top. Every pill (including
   the latest) uses the same tint — distinguishing "latest" by
   colour weight read as a different chip style, which is the
   opposite of what we want here.

   Chrome inherited from .chip--graded (components.css). The
   trajectory variant tweaks the baseline alignment (year + grade
   sit on the same baseline rather than centred), tightens the
   inter-span gap from the default 7px → 6px, and sets line-height
   1.4 to keep the pill height stable when a label wraps. Cursor
   defaults to help (non-link span pill); anchor pills use the
   primitive's a.chip--graded hover. */
.ilacs-traj-pill {
  align-items: baseline;
  --chip-gap: 6px;
  line-height: 1.4;
  cursor: help;
}
.ilacs-traj-pill-year { font-weight: 600; color: var(--ink); }
/* Grade label uses --ink (not --ink-2) so it passes WCAG AA
   against the lighter grade fills (Expected green, Attention
   orange) where --ink-2 dipped to ~3.5:1 contrast. */
.ilacs-traj-pill-grade { font-weight: 400; color: var(--ink); }
.ilacs-traj-arrow {
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1;
}
/* Neutral separator between the two trajectory pills — replaces the
   previous "→" arrow. The arrow implied a direction of travel
   between two incomparable grade scales (old overall vs new six-
   area lowest); the centred dot reads as "two inspections" rather
   than "trajectory". Larger / heavier than typical · so it remains
   visible at the trajectory row's spacing. */
.ilacs-traj-sep {
  color: var(--ink-3);
  font-size: var(--text-md);
  line-height: 1;
  padding: 0 2px;
}
/* Pupil & school characteristics chart — used inside Trust + LA
   panels. Same band semantics as the dashboard ctx bars. */

/* Pupil & school characteristics chart on the Trust + LA panels.
   One row per banded characteristic (FSM, SEN support, EHC, school
   size, area deprivation); each row is a stacked horizontal bar
   where the five segments represent the school's distance from the
   national average. Sequential blue ramp so darker = more of the
   thing measured (more FSM, more SEN, larger school etc.). */
.panel-characteristics { margin-bottom: 14px; }
/* Collapsible variant — used on the trust profile where intake
   characteristics live behind a disclosure so the grade-mix chart
   stays the primary read. */
.panel-characteristics--collapsible { padding: 0; }
/* Disclosure chrome (summary list-style suppression, caret ▸,
   [open] rotate, caret hover-darken) is provided by the
   `.disclosure` primitive in components.css — JS composes
   `class="disclosure panel-characteristics panel-characteristics--collapsible"`.
   Tab-specific small-print padding / margin / font-size / colour
   stay as overrides. */
.panel-characteristics--collapsible > summary {
  padding: 4px 0;
  margin: 0;
  font-size: 11px;
  color: var(--ink-2);
}
.panel-characteristics__body { margin-top: var(--space-2); }
.panel-char-row {
  display: grid;
  grid-template-columns: 110px 1fr 38px;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: 3px;
  font-size: 11px;
  color: var(--ink-2);
}
.panel-char-row__label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.panel-char-row__num {
  text-align: right; font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.panel-char-track {
  height: 12px;
  display: flex;
  border-radius: 2px;
  overflow: hidden;
  background: var(--paper-2);
}
.panel-char-seg { height: 100%; }
/* Band-ramp colours via tokens (--comp-band-5 → --comp-band-1). Dark-mode
   overrides are handled by the token definitions in tokens.css so no
   html[data-theme="dark"] overrides are needed here. */
.panel-char-seg[data-band="Well above average"] { background: var(--comp-band-5); }
.panel-char-seg[data-band="Above average"]      { background: var(--comp-band-4); }
.panel-char-seg[data-band="Close to average"]   { background: var(--comp-band-3); }
.panel-char-seg[data-band="Below average"]      { background: var(--comp-band-2); }
.panel-char-seg[data-band="Well below average"] { background: var(--comp-band-1); }