/* Compare tab — Group profile drill-through, inspectors view, trust panel/history/
   finance/AAR, and school card list.
   Split from compare.css; see compare.css for history. */

/* ────────────────────────────────────────────────────────────
   Compare profile drill-through (group-profile) + Inspectors view.
   ──────────────────────────────────────────────────────────── */

/* Group profile — single-column drill-through that replaces the old
   3-col-with-side-panel pattern when a trust / LA / inspector row is
   selected. Backlink + banner sit at the top; the existing panel
   content (renderTrustPanel etc.) renders into the same DOM IDs as
   before, so they keep their .trust-panel styling without change. */
.group-profile {
  display: flex; flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
/* Sticky in-page section nav (components/section-nav.js). Sits just
   below the main tab bar — the JS measures the bar and sets
   --section-nav-top. Opaque background so profile content scrolls
   cleanly underneath. */
.profile-section-nav {
  position: sticky;
  top: var(--section-nav-top, 0);
  z-index: 19;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  margin: 0;
  background: var(--card);
  border-bottom: 1px solid var(--rule);
}
/* The nav hides itself while fewer than two sections have rendered
   content (section-nav.js syncPills) — the explicit display:flex above
   would otherwise defeat the UA [hidden] rule. Same pattern as
   .aar-split-row[hidden]. */
.profile-section-nav[hidden] { display: none; }
.profile-section-nav-btn {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  white-space: nowrap;
}
.profile-section-nav-btn:hover { color: var(--ink); background: var(--paper-2); }
.profile-section-nav-btn.on {
  color: var(--accent);
  border-color: var(--rule);
  background: var(--paper-2);
  font-weight: 600;
}
.profile-section-nav-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.profile-header-row {
  display: flex; align-items: center; gap: var(--space-4);
  flex-wrap: wrap;
}
.profile-backlink {
  background: transparent; border: 0; padding: 4px 0;
  color: var(--ink-2);
  font: inherit; font-size: 13px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.profile-backlink:hover { color: var(--ink); }
.profile-backlink:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}
.profile-backlink-arrow {
  color: var(--ink-3); font-size: var(--text-lg); line-height: 1;
}

/* Rank chip + prev/next chevrons. Live on the right of the header
   row when a focused-leaderboard sort is available, otherwise hidden
   (e.g. inspector profile coming from outside the leaderboard). */
.profile-rank-row {
  display: inline-flex; align-items: center; gap: var(--space-1);
  margin-left: auto;
  color: var(--ink-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.profile-rank-chip {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 3px 8px;
  color: var(--ink-2);
}
.profile-rank-nav {
  background: transparent; border: 1px solid var(--rule);
  border-radius: 3px; padding: 2px 8px;
  color: var(--ink-2);
  cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1.2;
}
.profile-rank-nav:hover:not(:disabled) {
  color: var(--ink); border-color: var(--ink-3);
}
.profile-rank-nav:disabled {
  color: var(--ink-3); opacity: 0.4; cursor: not-allowed;
}
.profile-rank-nav:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Banner card — type label, name, descriptor, then the 4-up stat
   strip (Strong+ overall / Reports in view / Coverage / Weakest
   area). Reuses the .groups-dash-stat tiles styled above.
   Recipe inherited from .card (components.css). Despite the name,
   this is a hero card with full border + shadow, not a left-stripe
   banner — kept on plain .card. Variant-specific geometry (22px
   horizontal padding for the wider hero footprint, flex-column
   with 16px gap between label / name / descriptor / stats) stays
   on this selector. */
.profile-banner {
  padding: var(--space-5) 22px;
  display: flex; flex-direction: column;
  gap: var(--space-4);
}
.profile-banner-type {
  color: var(--ink-3);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.profile-banner-name {
  margin: 0;
  font-size: 24px; /* @approved: bespoke profile banner heading; prominent display name for trust/LA profiles, deliberately above --text-xl (22px) */
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.profile-banner-descriptor {
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  max-width: 760px;
}
/* Trust banner synthesis sentence — sits under the stat row, so it
 * needs a little separation from the numbers above it. */
.profile-banner-synthesis {
  margin-top: var(--space-2);
}

/* Recipe inherited from .card (components.css). Variant-specific
   geometry (tighter 16px 18px padding for the data-dense panel
   footprint) stays on this selector. The 13px base font-size is
   content-cell sizing, not chrome — kept here because every
   metadata row inside the panel reads at that scale. */
.trust-panel {
  padding: 16px 18px;
  font-size: 13px;
}
.trust-panel--empty {
  color: var(--ink-3);
  text-align: center;
  padding: 40px 24px;
  font-size: 13px;
  line-height: 1.5;
}
/* The dedicated schools aside is folded into the unified inspections
   block (renderTrustPanel); the empty shell element stays in the DOM as
   the extra-sections insertion anchor but is hidden. */
.trust-panel--folded { display: none; }
.trust-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}
.trust-panel-name {
  font-family: "Charter", Georgia, serif;
  font-size: 16px; /* @approved: Charter serif display heading; 16px reads well in the serif face at panel-header weight */
  line-height: 1.3;
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 4px;
}
.trust-panel-meta {
  color: var(--ink-3);
  font-size: 12px;
  margin: 0;
}

/* ────────────────────────────────────────────────────────────
   Trust-panel + initial trust-history chrome. Renders inside the
   group-profile drill-through for Trusts.
   ──────────────────────────────────────────────────────────── */

/* Two-column split inside the trust summary aside: existing graphs
   on the left, Financial on the right. Stacks single-column
   under 800px so the financial block doesn't get squeezed unreadable
   on phones. */
.profile-banner-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: var(--space-2);
}
.profile-banner-stat {
  font-size: 14px;
  color: var(--ink-2);
}
.profile-banner-stat strong { color: var(--ink); font-weight: 600; }
/* Characteristics collapsible sits below the grade mix in the unified
   inspections block — a quiet separator keeps the intake context (a
   different dimension) from blurring into the grades above it. */
.trust-framework-section > .panel-characteristics--collapsible { margin-top: var(--space-3); border-top: 1px solid var(--rule); padding-top: var(--space-3); }
/* Trust profile — two full-width stacked insight sections */
.trust-insights-section { margin-bottom: var(--space-5); }
.trust-insights-section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: 600;
  margin: 0 0 10px;
}
/* (.trust-insights-grid removed 2026-07: its last consumer — the
   never-inspected trust profile's status-card + blank-map-card pair —
   now renders a single full-width status card, so the two-up grid
   variant had no call sites left.) */
/* Recipe inherited from .card (components.css). Variant-specific
   geometry (tighter 16px 18px padding) stays on this selector.
   min-width: 0 is already provided by .card. */
.trust-insights-card {
  padding: 16px 18px;
}
.trust-insights-card > .panel-coverage,
.trust-insights-card > .panel-grade-summary,
.trust-insights-card > .panel-characteristics { margin-bottom: 0; }
/* Trust intro block — name + count line + body copy + reset
   button. Replaces four inline-style template literals at
   tabs/trusts.js renderTrustPanel that the audit was flagging. */
.trust-insights-card__name { margin: 0 0 8px 0; }
.trust-insights-card__count { margin: 0 0 6px 0; color: var(--ink-2); }
.trust-insights-card__body { margin: 6px 0 0 0; color: var(--ink-3); font-size: var(--text-sm); }
.trust-insights-card__actions { margin: 12px 0 0 0; }
.trust-insights-card--map {
  min-height: 280px;
  padding: 0;
  overflow: hidden;
  align-self: stretch;
}
/* Empty-state shown when a trust has no school coordinates at all
   (rare — usually a brand-new trust whose schools haven't been
   geocoded yet). Differs from the generic .empty-state primitive
   in that it fills the map card and is vertically centred. */
.trust-school-map-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--ink-3);
  font-size: 12px;
}
@media (max-width: 700px) {
  .trust-insights-card--map { min-height: 200px; }
}
/* CH / filings section rendered below the AAR insights when present. */
.trust-finance.chart-card {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 18px;
  border-top: none;
}
/* Spacing modifier — applied to the Companies House / filings
   section so it sits 16px below the AAR insights instead of
   flush. Replaces an inline style="margin-top:16px" the audit
   flagged on tabs/charts/finance.js. */
.trust-finance.trust-finance--spaced { margin-top: var(--space-4); }
/* trust-finance-title, trust-history-title: visuals now provided by
   the .eyebrow primitive in base.css. The 12px bottom margin previously
   here is the only thing left, since the rest collapsed to canonical
   11px / 0.06em / --ink-3. */
.trust-finance-title,
.trust-history-title { margin: 0 0 12px; }
/* Trust History section */
.trust-history.chart-card {
  margin-top: var(--space-3);
}
/* Recipe inherits from `.cards-grid` in components.css (composed
   on the JS markup as `class="cards-grid trust-history-charts"`).
   The previous standalone flex row gave each child `flex: 1`; in
   the grid model this is identical to two equal-width tracks. The
   canonical 1280px breakpoint replaces the previous always-row
   layout — viewports below 1280px stack the two charts. Documented
   in the PR body. */
.trust-history-charts {
  --cards-grid-gap: 18px;
  margin-bottom: 14px;
}
.growth-chart {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.growth-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-1);
}
/* growth-chart-label visual now provided by .eyebrow in base.css —
   was a 0.05em / 11px outlier, collapsed to the canonical 0.06em. */
/* Source-vintage hint appended to the growth-chart label (e.g. "AAR")
   so a viewer can see the pupils/schools trend is the Academy Accounts
   estate, not the GIAS in-scope count shown by the banner KPI. */
.growth-chart-source {
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: normal;
}
.growth-chart-latest {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.growth-chart-body {
  display: flex;
  gap: 6px;
  height: 60px;
}
.growth-chart-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: var(--text-nano);
  color: var(--ink-3);
  text-align: right;
  min-width: 32px;
  padding: 1px 0;
}
.growth-chart-svg {
  flex: 1;
  height: 100%;
  width: 100%;
  border-left: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
}
.growth-chart-x-axis {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-nano);
  color: var(--ink-3);
  margin-top: 3px;
  padding-left: 38px;
}
/* (Old .trust-history-chart-row / .trust-history-chart-label rules
   were retired in the eyebrow primitive sweep — JS template no
   longer emits them, only .trust-history-charts above is live.) */

/* Mini-map float in trust-school cards */
.trust-school-mini-map {
  float: right;
  margin: 0 0 6px 10px;
  opacity: 0.85;
}
/* ── Master timeline (option C) ──────────────────────────────────────
 * Single horizontal SVG showing the trust's lifecycle. One track per
 * school, joined → today, with markers for inspections + intervention
 * notices and a dashed pre-trust segment when events predate the
 * affiliation's joined-date (e.g. Kirkby Stephen Grammar's 2023 TWN
 * issued under its previous SAT before rebrokering into Cumbria).
 * Sits above the existing affiliations table — the master gives the
 * at-a-glance story; the table is the deep-dive detail view. */
.trust-master-timeline-wrap {
  background: var(--paper-2);
  border-radius: var(--r-lg);
  padding: 14px 8px 10px 8px;
  margin: 12px 0 16px 0;
}
/* Inner scroller (timeline.js wraps just the SVG; the legend stays
   outside so it never scrolls). direction: rtl makes the scroller
   OPEN at its right end — the most recent years — instead of at the
   empty 2010-ish pre-history, with zero JS and no effect at widths
   where nothing overflows. The SVG resets to ltr so its own text /
   geometry are untouched. Edge-fade affordance comes from the shared
   .hscroll recipe (components.css), re-based onto this band's
   --paper-2 surface. */
.trust-master-timeline-scroller {
  --hscroll-bg: var(--paper-2);
  direction: rtl;
}
.trust-master-timeline-scroller > .trust-master-timeline-svg {
  direction: ltr;
}
.trust-master-timeline-svg {
  display: block;
  width: 100%;
  min-width: 720px;
  height: auto;
  font-family: inherit;
}
.trust-master-timeline-svg .year-label {
  fill: var(--ink-3);
  font-size: var(--text-nano);
}
.trust-master-timeline-svg .year-guide {
  stroke: var(--rule);
  stroke-width: 0.5;
  stroke-dasharray: 2 4;
}
/* Tenure ("years in trust") axis — emphasise the join (year 0) line +
   label so the re-based origin reads clearly; a small left caption names
   the axis. */
.trust-master-timeline-svg .year-label--zero { fill: var(--accent); font-weight: 600; }
.trust-master-timeline-svg .year-guide--zero { stroke: var(--accent); opacity: 0.55; stroke-dasharray: none; }
.trust-master-timeline-svg .tl-axis-caption { fill: var(--ink-3); font-size: var(--text-nano); }
/* No-join caveat marker — hollow amber ring pinned on the 0 line in
   tenure mode, for a school with no recorded join date to re-base from. */
.trust-master-timeline-svg .marker--nojoin {
  fill: none;
  stroke: var(--rise);
  stroke-width: 1.5;
  stroke-dasharray: 2 2;
}
/* Trust-timeline controls toolbar — view-mode toggle + marker filter
   pills above the master timeline (trust profile only). Reuses the shared
   .toggle-group / .chip pill primitives; this is just the row layout. */
.trust-timeline-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;  /* right-aligned, matching the other in-page toolbars */
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}
.trust-timeline-controls-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.trust-timeline-controls-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--ink-3);
}
.trust-timeline-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.trust-master-timeline-svg .track {
  stroke: var(--ink-3);
  stroke-width: 2;
  opacity: 0.35;
}
.trust-master-timeline-svg .track--pre {
  stroke: var(--ink-3);
  stroke-width: 1.4;
  stroke-dasharray: 3 3;
  opacity: 0.45;
}
.trust-master-timeline-svg .join-mark {
  stroke: var(--accent);
  stroke-width: 2.5;
}
.trust-master-timeline-svg .leave-mark {
  stroke: var(--ink-2);
  stroke-width: 2;
}
/* Cross-trust journey ("re-brokering") tick — a dashed orange mark at a
   PRIOR trust's join date, distinct from the navy join-mark. Flags the
   disruptive event of a school moving between trusts. */
.trust-master-timeline-svg .rebroker-mark {
  stroke: var(--accent-2);
  stroke-width: 1.6;
  stroke-dasharray: 1.5 1.5;
}
.trust-master-timeline-svg .school-label {
  fill: var(--ink);
  font-size: 11px;
  cursor: pointer;
}
.trust-master-timeline-svg .school-label:hover {
  fill: var(--accent);
  text-decoration: underline;
}
.trust-master-timeline-svg .marker { cursor: pointer; }
/* s5-no-areas + s8 render as single vertical lines (like one
 * grade-strip band), so they're solid fills with no circle ring. */
.trust-master-timeline-svg .marker--s8 { fill: var(--ink-3); }
.trust-master-timeline-svg .marker--monitoring { fill: var(--ink-3); fill-opacity: 0.5; }
/* Keyboard focus — markers + school-labels are focusable buttons
 * (tabindex/role set in timeline.js _masterMarker / school-label).
 * Show a clear ring so keyboard users can see the active marker. */
.trust-master-timeline-svg .marker:focus-visible,
.trust-master-timeline-svg .school-label:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Grade-strip — same pattern as per-row timeline. Thin coloured
 * bands per Ofsted-area grade; hover thickens the outline so a
 * dense cluster of strips is still individually pickable. */
.trust-master-timeline-svg .grade-strip rect { stroke: var(--card); stroke-width: 0.5; }
.trust-master-timeline-svg .grade-strip:hover rect { stroke: var(--ink-2); stroke-width: 1; }
/* Short (ungraded) S8 inspections stay NEUTRAL (the .marker--s8 rule above)
 * — they don't re-grade, so they must not read as a grade colour. The
 * conclusion lives in the hover. Monitoring inspections DO carry a genuine
 * progress judgement, so the diamond is coloured: green = taking effective
 * action, red = not; neutral grey (default above) when none recorded. */
.trust-master-timeline-svg .marker--monitoring.outcome--effective     { fill: var(--g-strong); fill-opacity: 1; }
.trust-master-timeline-svg .marker--monitoring.outcome--not_effective { fill: var(--g-urgent); fill-opacity: 1; }
/* DfE/ESFA warning-notice triangles. The NtI/TWN severity tiers are
   merged into one "warning notice" type (a single red), so colour is
   kind-agnostic; status drives the fill. In-force = a plain solid red
   triangle (no halo, no white edge). Lifted/closed = the same triangle
   "hollowed" via a faint fill + red outline, so status still reads
   (filled = in force, outlined = lifted/closed) without a white edge.
   The faint fill (not `fill: none`) keeps the lifted marker clickable. */
.trust-master-timeline-svg .marker--ntI.status--open { fill: var(--g-urgent); }
.trust-master-timeline-svg .marker--ntI.status--lifted,
.trust-master-timeline-svg .marker--ntI.status--closed_unknown_date {
  fill: var(--g-urgent);
  fill-opacity: 0.18;
  stroke: var(--g-urgent);
  stroke-width: 1.5;
}
/* RISE targeted-support marker — the SAME triangle as the warning notice,
   in amber (--rise), at the cohort-entry date. Treated as RISE targeted
   support, not a warning notice. Plain fill, no halo, no edge. Passive
   (title-only tooltip), so no pointer cursor / focus ring.
   Status mirrors the notice open-vs-lifted convention: a `currently
   eligible` member reads as a solid amber triangle, a `no_longer_eligible`
   member as the same triangle "hollowed" via a faint fill + amber outline
   (the DfE list carries no exit date, only an undated eligibility flip — so
   the hollow encodes "no longer eligible", not a dated exit). */
.trust-master-timeline-svg .marker--rise { fill: var(--rise); }
.trust-master-timeline-svg .marker--rise.status--no_longer_eligible {
  fill: var(--rise);
  fill-opacity: 0.18;
  stroke: var(--rise);
  stroke-width: 1.5;
}
/* Legend wrapper — collapsed by default so the timeline reads
 * clean on first view. The <summary> is a single-line "Legend —
 * grades, inspection types, notices" affordance; click to expand. */
.trust-master-timeline-legend-wrap {
  margin-top: var(--space-2);
  padding: 6px 4px 0 4px;
  border-top: 1px solid var(--rule-2);
  font-size: 11px;
}
.trust-master-timeline-legend-wrap > summary {
  cursor: pointer;
  color: var(--ink-3);
  padding: 2px 0;
  list-style-position: inside;
  user-select: none;
}
.trust-master-timeline-legend-wrap > summary:hover {
  color: var(--ink-2);
}
.trust-master-timeline-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 8px 0 0 0;
  color: var(--ink-2);
}
.trust-master-timeline-legend .legend-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.trust-master-timeline-legend .legend-section {
  font-weight: 600;
  color: var(--ink-3);
  min-width: 140px;
}
.trust-master-timeline-legend .legend-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.trust-master-timeline-legend .legend-section {
  font-weight: 600;
  color: var(--ink-3);
  min-width: 140px;
}
.trust-master-timeline-legend .leg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.trust-master-timeline-legend .legend-note {
  color: var(--ink-3);
  font-style: italic;
}
.trust-master-timeline-legend svg { flex-shrink: 0; }
.trust-history-timeline-tip {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  font-size: var(--text-nano);
  color: var(--ink);
  pointer-events: none;
  z-index: 1000;
  max-width: 260px;
  min-width: 200px;
}
.trust-history-timeline-tip-header {
  font-size: var(--text-nano);
  color: var(--ink-3);
  margin-bottom: var(--space-1);
  /* Wrap the meta line inside the tip box. With `nowrap` the long
     "date · type · framework" string (e.g. "22 May 2018 · Section 5
     (full inspection) · OEIF (2014–2024)") overflowed the 260px
     max-width to the right, spilling past the tip's border — and the
     JS position-clamp reads offsetWidth (the 260px box), so it can't
     compensate for the overflowing text. Wrapping keeps it contained. */
  overflow-wrap: break-word;
}
/* Keep the date itself on one line so it never breaks mid-date. */
.trust-history-timeline-tip-header strong { color: var(--ink-2); white-space: nowrap; }
.trust-history-timeline-tip-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.trust-history-timeline-tip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: var(--text-nano);
}
.trust-history-timeline-tip-row-overall {
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--rule-2);
  margin-bottom: 2px;
}
.trust-history-timeline-tip-label {
  color: var(--ink-3);
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trust-history-timeline-tip-outcome {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px dashed var(--rule-2);
  color: var(--ink-2);
  font-size: var(--text-nano);
  line-height: 1.3;
}
.trust-history-timeline-tip-hint {
  margin-top: var(--space-1);
  font-size: var(--text-9);
  color: var(--ink-3);
  text-align: center;
  font-style: italic;
}
.trust-history-popover {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 10px 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  font-size: 11px;
  color: var(--ink);
  z-index: 1100;
  min-width: 240px;
  max-width: 320px;
}
.trust-history-popover-header {
  font-size: var(--text-nano);
  color: var(--ink-3);
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.trust-history-popover-header a {
  color: var(--ink-3);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--rule);
}
.trust-history-popover-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.trust-history-popover-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 11px;
}
.trust-history-popover-row-overall {
  font-weight: 600;
  color: var(--ink);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--rule-2);
  margin-bottom: 2px;
}
.trust-history-popover-label {
  color: var(--ink-3);
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trust-history-popover-empty {
  font-size: var(--text-nano);
  color: var(--ink-3);
  font-style: italic;
}
/* Scrape-provenance line — shown on timeline events the payload-time
 * merge sourced from the published report because Ofsted's MI feed
 * hasn't published them yet (src === "report"). Shared by the hover
 * tip and the click popover. */
.trust-history-tip-src {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px dashed var(--rule-2);
  font-size: var(--text-nano);
  color: var(--ink-3);
  font-style: italic;
}

/* ────────────────────────────────────────────────────────────
   S8/monitoring outcome callouts, CH status chip, AAR snapshot
   (2x4 stats grid, sparkline + year-axis, in-year balance,
   reserves, ranking bar, median tick, position dot), and the
   unified AAR insights section + percentile split-charts. All
   Trust-profile financial/context content.
   ──────────────────────────────────────────────────────────── */

/* S8 / monitoring outcome callout — bordered box, accent colour by class.
 * Improving + Effective action share --g-strong (clear positives);
 * Confirmed uses --g-expected (softer "stable positive"); concerns and
 * not-effective shift through amber and red. */
.trust-history-popover-outcome {
  margin: 6px 0;
  padding: 6px 8px;
  border-left: 3px solid var(--ink-3);
  background: color-mix(in srgb, var(--ink-3) 6%, transparent);
  font-size: var(--text-nano);
  line-height: 1.4;
  color: var(--ink-2);
}
/* Short (ungraded) inspection conclusions — improving / confirmed /
 * concerns — stay NEUTRAL (the base rule above): they're not re-grades, so
 * they must not borrow a grade accent. Only the monitoring progress
 * judgements get a green/red accent. */
.trust-history-popover-outcome--effective {
  border-left-color: var(--g-strong);
  background: color-mix(in srgb, var(--g-strong) 10%, transparent);
}
.trust-history-popover-outcome--not_effective {
  border-left-color: var(--g-urgent);
  background: color-mix(in srgb, var(--g-urgent) 10%, transparent);
}
.trust-history-popover-outcome-label {
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
  font-size: var(--text-nano);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.trust-history-popover-footer {
  margin-top: var(--space-2);
  padding-top: 6px;
  border-top: 1px solid var(--rule-2);
  font-size: var(--text-nano);
}
.trust-history-popover-footer a {
  color: var(--ink-2);
  text-decoration: underline;
}
.trust-history-grade-chip {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: var(--text-nano);
  font-weight: 600;
  background: var(--chip-bg, var(--rule));
  color: var(--chip-ink, var(--ink));
  white-space: nowrap;
}
.trust-history-anchor {
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
  margin: 4px 0 0;
}
.trust-finance-ch-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-2); margin-bottom: var(--space-2);
}
/* CH status chip — uses the same rounded-rect pill language as
   .sv-grade-chip on school cards. Active = green-tinted; everything
   else falls through to the neutral chip background (we deliberately
   don't colour 'dissolved' red — most academy-trust dissolutions are
   routine winddowns after rebrokering, not failures). */
.trust-finance-ch-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  background: color-mix(in srgb, var(--ink-3) 12%, var(--card));
  color: var(--ink-2);
  text-transform: capitalize;
  line-height: 1.4;
}
.trust-finance-ch-status.is-active {
  background: color-mix(in srgb, var(--g-expected) 18%, var(--card));
  color: var(--ink);
}
.trust-finance-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3); row-gap: 3px;
  margin: 0;
  font-size: 13px;
}
.trust-finance-dl dt {
  color: var(--ink-3);
  font-weight: normal;
}
.trust-finance-dl dd { margin: 0; color: var(--ink); }
.trust-finance-overdue {
  background: var(--g-urgent);
  color: var(--paper);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: var(--text-nano);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: var(--space-1);
}
.trust-finance-filings h5 {
  margin: 14px 0 6px;
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
}
.trust-finance-aar-year {
  color: var(--ink-3);
  font-weight: normal;
  font-size: 11px;
  margin-left: 6px;
}
.trust-finance-filings ul {
  list-style: none; padding: 0; margin: 0;
  font-size: 12px;
  line-height: 1.5;
}
.trust-finance-filings li {
  padding: 2px 0;
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}
.trust-finance-filings a {
  color: var(--claude-accent);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.trust-finance-filings a:hover { text-decoration: underline; }
.trust-finance-filing-desc {
  color: var(--ink-3);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* AAR snapshot — 2×4 grid of stats. Each tile is the same primitive
   as .groups-dash-stat (white surface, soft border, 6px radius)
   so the financial cards read as the same UI element as the
   top-of-page banner stats. Visual coherence across the whole
   trust profile. */
.trust-finance-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: 0;
}
.trust-finance-stats > div {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 10px 12px;
  /* Each tile is internally split: card-left holds the label/value,
     card-right holds the sparkline + percentile bar. Both columns
     share the available width 50/50. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: stretch;
}
.trust-finance-stats > div > .card-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center;
}
.trust-finance-stats > div > .card-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
/* Sparkline + year-axis pair. The SVG fills the column width;
   preserveAspectRatio="none" lets it stretch horizontally so the
   trend visual scales to fit. Stroke inherits from currentColor so
   per-card colour rules (positive=green, negative=orange) propagate. */
.card-spark-block {
  width: 100%;
  color: var(--ink-3);
  opacity: 0.85;
}
.card-spark {
  width: 100%;
  height: 32px;
  display: block;
}
.card-spark-axis {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-9);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
  line-height: 1;
}
/* In-year balance card colours its sparkline to match the value
   (green when positive, orange when negative). Other cards stay
   neutral ink-3. Uses :has() so the colour on .v-positive (a dd
   nested in .card-left) reaches across to .card-right's
   sparkline block. */
.trust-finance-stats > div:has(.v-positive) .card-spark-block { color: var(--g-expected); opacity: 1; }
.trust-finance-stats > div:has(.v-negative) .card-spark-block { color: var(--g-attention); opacity: 1; }
.trust-finance-stats dt {
  font-size: 11px;
  color: var(--ink-3);
  margin: 0;
  font-weight: normal;
}
.trust-finance-stats dd {
  margin: 2px 0 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.trust-finance-stats .v-positive { color: var(--g-expected); }
.trust-finance-stats .v-negative { color: var(--g-attention); }
/* Reserves-as-%-of-income annotation. DfE's published academy
   benchmarking expects ≥5% of total income held as reserves; we
   colour the line green when met, attention-orange when below. */
.trust-finance-reserves-ratio {
  display: inline;
  font-size: 0.78em;
  font-variant-numeric: tabular-nums;
}
.trust-finance-reserves-ratio.is-ok    { color: var(--g-expected); }
.trust-finance-reserves-ratio.is-below { color: var(--g-attention); }
/* Per-card ranking bar — shows where this trust sits in the
   distribution of its peer bucket (MAT vs MAT, SAT vs SAT). Borrows
   the horizontal-bar idiom from "Characteristics vs national
   average" on the left column. The fill is positioned at the
   trust's percentile; the tick at p50 marks the median.
   Layout: thin label line + 1-row bar; positioned BELOW the
   sparkline (which sits absolutely in the bottom-right) so the
   two don't collide. */
.trust-finance-rank {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-nano);
  color: var(--ink-3);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  /* Wraps (was nowrap): the chip now carries explicit direction /
     population wording — "87th percentile (better than most peers)" —
     which must wrap in a narrow card rather than clip. */
}
.trust-finance-rank-hint {
  color: color-mix(in srgb, var(--ink-3) 75%, transparent);
  font-variant-numeric: normal;
}
.trust-finance-rank-bar {
  position: relative;
  margin-top: 3px;
  height: 5px;
  background: color-mix(in srgb, var(--ink-3) 15%, transparent);
  border-radius: var(--r-full);
  overflow: visible;
}
/* Median tick — a small vertical line at the 50% mark so the
   reader has a reference point without having to read the
   label. */
.trust-finance-rank-bar::before {
  content: "";
  position: absolute;
  top: -1px; bottom: -1px;
  left: 50%;
  width: 1px;
  background: var(--ink-3);
  opacity: 0.45;
}
/* The trust's position — a small filled dot at the percentile
   point. Colour mirrors the meaning: positive=green for "better
   than median", negative=orange for "worse than median". For
   metrics where higher is better (income, reserves), set
   `data-direction="higher-better"`; for lower-is-better
   (staff-cost-%, per-pupil spend can argue both ways but we
   don't colour those — neutral). */
.trust-finance-rank-dot {
  position: absolute;
  top: -3px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--claude-accent);
  border: 2px solid var(--card);
  box-sizing: border-box;
  transform: translateX(-50%);
}
.trust-finance-rank-dot.is-below { background: var(--g-attention); }
/* Empty state — shown briefly while the sidecar is loading on
   cold-start (rare, since idle-prefetch usually has it cached). */
.trust-finance-loading {
  color: var(--ink-3);
  font-size: 12px;
  font-style: italic;
}
.trust-finance-closed-notice {
  font-size: 11px;
  color: var(--ink-3);
  margin: 0 0 10px;
  padding: 5px 8px;
  background: color-mix(in srgb, var(--ink-3) 8%, transparent);
  border-radius: var(--r-sm);
}
/* Unified AAR insights section — 8 metrics (context + financial)
   in a flat 4×2 grid without individual card borders. */
.trust-aar-section {
  margin-top: 6px;
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}
/* Tight 2px margin pulls the .aar-insights-source caption directly
   beneath the title; the rest of the eyebrow recipe comes from
   .eyebrow in base.css. */
.aar-insights-title { margin: 0 0 2px; }
.aar-insights-source {
  margin: 0 0 14px;
  font-size: 11px;
  color: var(--ink-3);
}
/* New AAR layout: 4 headlines + context row + percentile chart */
.aar-headlines-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: var(--space-4);
}
.aar-headlines-grid > div {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
/* Reset the user-agent default 40px left margin on <dd> so the value
   sits flush with the label above it, and shape the dt / dd
   typography for the headline-card register. Without this, every
   card on the trust profile + school side panel shows its value
   indented 40px from the left-aligned label, with a visible gap to
   the percentile chip below — looked centred-ish on narrow cards.
   Cards use <dt>/<dd> directly (not wrapped in <dl>) because the
   flex container already gives them their own row, and the
   semantic <dl> wrapper would add layout that doesn't fit the
   visual rhythm. */
.aar-headlines-grid > div dt,
.aar-headlines-grid > div dd {
  margin: 0;
}
.aar-headlines-grid > div dt {
  font-size: var(--text-xs);
  color: var(--ink-3);
  letter-spacing: 0.01em;
}
.aar-headlines-grid > div dd {
  font-size: 22px; /* @approved: headline card value — sits between --text-lg (17px) and --text-xl (22px) for trust + school finance cards */
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  margin-bottom: var(--space-1);
}
.aar-headline-trend {
  margin-top: 10px;
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
}
.aar-headline-trend-label {
  display: block;
  font-size: var(--text-9);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 3px;
}
.aar-headline-trend .card-spark { height: 24px; }
/* Filled percentile bar — used in headline cards and split charts.
   Fill width = percentile position; colour = site accent (navy/blue).
   Width travels as the --w custom property (same pass-through recipe
   as home.css .lp-w): JS sets style="--w:X%" / setProperty("--w", …),
   this rule consumes it. Legacy inline style="width:X%" callers
   (tabs/map.js) still win over this rule per CSS precedence. */
.aar-fill-bar {
  margin-top: var(--space-1);
  height: 5px;
  background: color-mix(in srgb, var(--ink-3) 14%, transparent);
  border-radius: 3px;
  overflow: hidden;
}
.aar-fill-bar > div {
  height: 100%;
  width: var(--w, 0%);
  background: var(--accent);
  border-radius: 3px;
  transition: width var(--t-fast);
}
/* Median-reference variant (school-card percentile bars): a tick at
   the 50th percentile so a 70%-filled bar reads as "above the
   median", not as a value of 70. On a percentile axis the median is
   the 50% point by construction. */
.aar-fill-bar--median {
  overflow: visible;
  position: relative;
}
.aar-fill-bar--median::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--ink-3);
}
/* Two half-width split charts (income left, expenditure right) */
.aar-split-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 6px;
}
.aar-split-chart {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 12px 14px 14px;
  background: var(--card);
  min-width: 0;
}
.aar-split-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 10px;
  /* Mobile-layout triage (2026-07): the 7-button control cluster is
     wider than a 390px card once the ≤1000px touch-target bump lands
     on .sort-btn, and it used to clip at the card edge and push the
     whole page wide. Let the cluster wrap under the heading instead;
     min-width: 0 is the shrink-inside-grid backstop. */
  flex-wrap: wrap;
  min-width: 0;
}
.aar-split-chart-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin: 0;
}
.aar-split-chart-ctrls {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
  /* Second wrap tier: when even a full row is too narrow for all
     three toggle groups + cog (≤390px), the groups wrap within the
     cluster rather than overflowing the card. max-width is what
     makes this fire: with flex-shrink: 0 the cluster's hypothetical
     size is max-content, so after wrapping under the heading it
     would still keep its full one-line width and poke past the card
     edge — capping at the head's width forces the inner groups to
     wrap instead. */
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}
.aar-split-row {
  display: grid;
  grid-template-columns: 160px 1fr 52px;
  column-gap: 10px;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 50%, transparent);
}
.aar-split-row[hidden] { display: none !important; }
.aar-split-row:last-child { border-bottom: none; }
.aar-split-name {
  font-size: var(--text-xs);
  color: var(--ink-2);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aar-split-sub {
  font-size: var(--text-xs);
  color: var(--ink-3);
  display: block;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.aar-split-track {
  height: 7px;
  background: color-mix(in srgb, var(--ink-3) 14%, transparent);
  border-radius: var(--r-sm);
  overflow: hidden;
}
/* Fill width via the --w pass-through — see .aar-fill-bar > div. */
.aar-split-fill {
  height: 100%;
  width: var(--w, 0%);
  background: var(--accent);
  border-radius: var(--r-sm);
  transition: width var(--t-fast);
}
.aar-split-badge {
  font-size: var(--text-xs);
  color: var(--ink-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Peer-group toggle row (above the split charts) */
.aar-split-charts-wrap { margin-top: var(--space-3); }
/* Field-picker panel (opened by cog button) */
.aar-split-picker { border-top: 1px solid var(--rule); padding: 8px 14px 12px; }
.aar-split-picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; gap: var(--space-2); }
/* aar-split-picker-label visual now provided by .eyebrow .eyebrow--sm
   in base.css (10px variant for this dense picker). */
.aar-split-picker-peer { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.aar-split-picker-peer-label { font-size: 11px; color: var(--ink-3); }
.aar-split-picker-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; max-height: 190px; overflow-y: auto; }
/* @applies-to label */
.aar-split-picker-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-2); cursor: pointer; padding: 3px 0; overflow: hidden; }
.aar-split-picker-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aar-split-picker-item input[type=checkbox] { flex-shrink: 0; accent-color: var(--accent); width: 12px; height: 12px; cursor: pointer; }
@media (max-width: 900px) {
  .aar-split-charts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .aar-headlines-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .aar-split-row { grid-template-columns: 110px 1fr 46px; }
}
/* Trust / LA / inspector schools-panel school-card list. The
   <ul>-specific list-reset stays here; flex-column-gap recipe
   lives on `.stack .stack--gap-3` in components.css. */
.trust-school-list {
  list-style: none; padding: 0; margin: 0;
}