/* Trust-panel-specific styles.
 *
 * The SWC workforce tile reuses the AAR `.aar-insights` + `.aar-split-*`
 * recipes from styles/tabs/compare/blocks.css verbatim so each panel
 * reads identically to the AAR Income / Expenditure breakdowns above
 * it on the trust panel. This file owns ONLY the workforce-specific
 * bits the AAR pattern doesn't cover: the 2×2 grid layout, the
 * context tag, the headline-card sparkline bars, and the footnote
 * margin overrides.
 *
 * Tokens-only: colours via --accent / --ink-* / --rule, sizes via
 * --text-*, spacing via --space-*. No hex literals; no inline styles.
 */

/* ─── Headline cards (AAR top-3 idiom) ─────────────────────────── */
/* Reuses the `.aar-headlines-grid` recipe so the three headline
 * cards (Teaching / TA / Leadership FTE) layout identically to the
 * AAR Income / Expenditure / Balance cards above. Sparklines fall
 * out of the global `.card-spark-block` + `.card-spark` styling. */
.trust-workforce-headlines {
  /* aar-headlines-grid provides display:grid + repeat(3, 1fr) + gap.
   * The dl/dt/dd reset comes from the .aar-headlines-grid > div
   * descendant rules in blocks.css. */
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Sparkline bars on the headline cards — solid var(--accent) to
 * match the AAR top-3 sparklines (which Plot renders with the same
 * accent fill by default). Previously inherited currentColor from
 * the containing `.card-spark-block`'s --ink-3, which read grey/
 * faded next to the navy bars in the AAR section above. */
.trust-workforce-card-spark-bar {
  fill: var(--accent);
}

/* No --last differentiation. The AAR sparkline draws all bars in
 * the same accent fill (the colorFn-based v-positive/v-negative
 * tinting kicks in only on the in-year-balance card). Keeping
 * workforce uniform reads as a single trend rather than a
 * highlight strip. */
.trust-workforce-card-spark-bar--last {
  fill: var(--accent);
}

/* Secondary metric on headline cards — bracketed paired ratio
 * (PTR / TA-per-teacher / leadership share) shown after the big
 * FTE total. Smaller and lighter than the main dd value so the
 * eye lands on the primary first. */
.trust-workforce-headline-secondary {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--ink-3);
  margin-left: var(--space-1);
}

/* ─── 2×2 grid of domain panels ───────────────────────────────── */
/* Below the headline cards, the four panels (Size · Stability ·
 * Well-being · Cost) lay out as a responsive 2-column grid. Stacks
 * to one column on narrow viewports. */
.trust-workforce-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 760px) {
  .trust-workforce-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* ─── Ofsted framework + Geography sections ───────────────────────
 * Two top-of-panel sections. Framework = inspection count lead + the
 * grade-profile graph + characteristics. Geography = the school map
 * (with a centroid + standard-distance overlay) alongside a footprint
 * stat block. Section titles reuse .trust-insights-section-title. */
.trust-framework-section,
.trust-geography-section {
  margin-bottom: var(--space-5);
}
.trust-framework-lead {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.trust-framework-lead strong { color: var(--ink); }

/* Renewed-/previous-framework sub-sections inside the Inspections card.
 * The "previous framework" sub-section is set off with a top rule so the
 * two eras read as distinct. The era chip on the renewed heading echoes
 * the "Nov 2025" framing used in the coverage line. */
.trust-framework-sub + .trust-framework-sub { margin-top: var(--space-5); }
.trust-framework-sub--previous {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-4);
}
.trust-framework-sub-title {
  font-size: var(--text-md);
  margin: 0 0 var(--space-2);
  display: flex; align-items: baseline; gap: var(--space-2);
}
.trust-framework-sub-era {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.trust-framework-sub-lead {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-3);
}

/* Unified "Inspections under the renewed framework" block — coverage
 * line + thin progress bar, then the grade mix, the (collapsed) intake
 * characteristics, and the inspected-school cards, stacked in one
 * section (replaces the former three-across grid of insight cards). The
 * coverage bar mirrors the banner's Inspected stat tile so the two
 * read as the same measure. */
.trust-framework-coverage { margin-bottom: var(--space-4); }
.trust-framework-coverage .trust-framework-lead { margin: 0 0 var(--space-2); }
.trust-coverage-track {
  height: 4px; background: var(--paper-2); border-radius: var(--r-full);
  overflow: hidden;
}
.trust-coverage-fill { height: 100%; background: var(--accent); border-radius: var(--r-full); }
.trust-framework-caveat {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-3);
}
/* The inspected-school cards live in the same section as the summary;
 * a quiet rule sets the per-school detail apart from the picture above. */
.trust-inspected-schools {
  margin-top: var(--space-4);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-3);
}

/* Trust "context" block in the profile banner — two finance-style cards
 * (Schools / Pupils). Reuses the `.aar-headlines-grid` recipe (card
 * chrome + dt/dd reset + the .aar-fill-bar percentile bar + the
 * .aar-headline-trend "Historical trend" divider), so the banner reads
 * as the same UI element as the Financial-position section. Only the
 * 2-up column count + top margin are banner-specific. */
.trust-context-tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-3);
}
/* Match the base .aar-headlines-grid collapse breakpoint (640px) so the
 * 2-up override and the primitive's 1-col fallback don't fight in a
 * narrow band. */
@media (max-width: 640px) {
  .trust-context-tiles { grid-template-columns: 1fr; }
}
/* Growth sparkline inside each banner tile — the AAR growth-chart body
 * (header stripped by renderTrustContextTiles). Constrain its height so
 * the tile stays compact next to the big count. */
.ctx-tile-spark .growth-chart { margin: 0; }
.ctx-tile-spark .growth-chart-body { height: 38px; }

/* Vacancies headline KPI in the trust banner — a compact inline stat
 * between the Schools/Pupils tiles and the external-links row. Only
 * rendered when the trust has a row in the Teaching Vacancies rollup
 * (partial-coverage: trusts not posting through the DfE service have
 * no row and the mount stays empty). Never shown as "0 vacancies". */
.trust-banner-vacancies { margin-top: var(--space-2); }
.trust-banner-vac {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.trust-banner-vac-count {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* Source / freshness hint — matches the .trust-vacancies-vintage style
 * in the Open Vacancies tile further down the profile. */
.trust-banner-vac-source {
  font-size: var(--text-xs);
  color: var(--ink-3);
}

/* Links row reverts to the shared `.sv-links` recipe (inline dotted,
 * matching the map side-panel + Reports cards) — see
 * renderTrustExternalLinks. Only the top margin is banner-specific. */
.trust-context-links { margin-top: var(--space-3); }
/* Touch-target bump for the banner's external links — the bare inline
 * anchors are ~19px tall, well under the 44px floor. Same ≤1000px
 * breakpoint as the base.css touch-target block; scoped to the trust
 * banner so the denser .sv-links rows inside school cards / the map
 * side panel keep their compact metrics. */
@media (max-width: 1000px) {
  .trust-context-links .sv-links a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target-min);
    padding-inline: var(--space-1);
  }
}

/* Geography: map + stats side by side (inherits .cards-grid; 2-col at
 * 1280px+, single column below). Matches the insights-grid gap. */
.trust-geo-cards {
  --cards-grid-gap: 14px;
}
.trust-geo-stats-card {
  padding: 16px 18px;
}
.trust-geo-lead {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-2);
}
.trust-geo-lead strong { color: var(--ink); }
/* Footprint label pill — Local cluster / Sub-regional / Regional /
 * National. Neutral chrome; the word does the work. */
.trust-geo-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-full);
  padding: var(--space-1) var(--space-2);
  margin-right: var(--space-1);
}
/* Shape archetype chip (single cluster / corridor / hub-and-spoke /
 * archipelago) — sits beside the scale badge; a distinct accent so the
 * two descriptors don't read as one word. */
.trust-geo-badge--shape { color: var(--accent-2); }
/* Dispersion stat grid — one cell per measure, label over value. */
.trust-geo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
}
.trust-geo-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trust-geo-grid dt {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.trust-geo-grid dd {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.trust-geo-note {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--ink-3);
  line-height: 1.5;
}

/* Nearest-sibling swarm — full-width card beneath the map + stats grid.
 * One dot per school by distance to its nearest sibling, coloured by
 * phase; the Any/Same-phase toggle re-renders it and hovering a dot
 * highlights the school + draws its sibling link on the map. */
.trust-geo-swarm-card {
  padding: 16px 18px;
  margin-top: var(--space-4);
}
.trust-geo-swarm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.trust-geo-swarm-title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
}
.trust-geo-swarm-control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.trust-geo-swarm-control-label {
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.trust-geo-swarm-plot { min-height: 156px; }
.trust-geo-swarm-caption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.5;
}
.trust-geo-swarm-caption strong { color: var(--ink); }
.trust-geo-swarm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-2);
}
.trust-geo-swarm-key { display: inline-flex; align-items: center; gap: var(--space-1); }
.trust-geo-swarm-dot {
  width: 10px; height: 10px;
  border-radius: var(--r-full);
  display: inline-block;
}
.trust-geo-swarm-dot--primary { background: var(--phase-primary); }
.trust-geo-swarm-dot--secondary { background: var(--phase-secondary); }
.trust-geo-swarm-dot--special { background: var(--phase-special); }
.trust-geo-swarm-dot--none {
  background: var(--card);
  border: 2px solid var(--g-urgent);
}

/* "How this trust compares" — national-percentile strip under the stat
 * grid. Each row: label · bar · percentile (higher = more spread out).
 * Bar width rides the --tgc-pct custom property set per row in the JS. */
.trust-geo-compare {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}
.trust-geo-compare-head {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}
.trust-geo-compare-head span {
  font-weight: 400;
  color: var(--ink-3);
  font-size: var(--text-xs);
}
.tgc-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr 2.75rem;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.tgc-label { font-size: var(--text-xs); color: var(--ink-2); }
.tgc-track {
  position: relative;
  height: 6px;
  background: var(--paper-2);
  border-radius: var(--r-full);
  overflow: hidden;
}
.tgc-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--tgc-pct, 0%);
  background: var(--accent);
  border-radius: var(--r-full);
}
.tgc-val {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tgc-sup { font-size: var(--text-nano); color: var(--ink-3); margin-left: 1px; }

/* ── Subjects & qualifications tile (DfE KS4 subject data) ─────────────
 * Trust rollup of the KS4 subject/qualification mix (charts/trust-
 * subjects.js), mounted after Workforce. Reuses the .aar-insights card
 * shell, the .results-subj-table / .results-subj-bar grade recipe from
 * map.css, and the .tgc-* / .trust-geo-compare percentile-strip recipe
 * above. Only the genuinely new bits live here. Tokens only. */
.trust-subjects { margin-top: var(--space-4); }
.ts-block { margin-top: var(--space-4); }
.ts-block:first-of-type { margin-top: var(--space-3); }
.ts-block-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}
/* Entry-mix table scroller — the .hscroll edge-fade recipe
 * (components.css) plus a min-width floor on the table, so on narrow
 * viewports the grades column scrolls sideways (with a fade
 * affordance) instead of the bars clipping mid-track at the card
 * edge. 34rem keeps every column at a readable width; at desktop
 * card widths the table is 100% and the scroller is inert. */
.results-subj-scroll .results-subj-table { min-width: 34rem; }
/* Entry-mix "% of cohort entered" cell — a bar + the value, sharing one
 * grid cell. The bar scales to the widest subject (a relative read). */
.ts-mix-pctcell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 7rem;
}
.ts-mix-track {
  position: relative;
  flex: 1;
  height: 6px;
  background: var(--paper-2);
  border-radius: var(--r-full);
  overflow: hidden;
}
.ts-mix-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--ts-w, 0%);
  background: var(--accent);
  border-radius: var(--r-full);
}
.ts-mix-pctval {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 2.25rem;
  text-align: right;
}
/* Qualification-type distribution — a single stacked bar + a labelled
 * legend. The bar reuses .results-subj-bar / .results-subj-seg. */
.ts-qual-bar { height: 14px; margin-bottom: var(--space-2); }
.ts-qual-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}
.ts-qual-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--ink-2);
}
.ts-qual-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--r-sm);
  background: var(--seg-bg, var(--ink-3));
  flex: 0 0 auto;
}
/* Percentile strip — reuses .trust-geo-compare + .tgc-* (above); the
 * raw-value note sits inline in the label. */
.ts-compare .tgc-row { grid-template-columns: 11rem 1fr 2.75rem; }
.ts-pct-raw { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ── Open-vacancies tile (DfE Teaching Vacancies) ──────────────────────
 * Shared by the trust + LA panels (charts/vacancies.js), mounted after the
 * Workforce tile. Tokens only. The category label uses the static
 * pill-label recipe (cf. .trust-geo-badge above) — NOT the interactive
 * .chip, which carries cursor/hover affordances a label shouldn't. */
.trust-vacancies { margin-top: var(--space-4); }
.trust-vacancies-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}
.trust-vacancies-title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ink);
}
.trust-vacancies-count {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--paper);
  background: var(--accent);
  border-radius: var(--r-full);
  vertical-align: middle;
}
.trust-vacancies-vintage {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.trust-vacancies-caveat {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--ink-3);
  line-height: 1.5;
}
/* Two-column split — "Teaching & leadership" | "Support". Column count is
   passed through as --vac-cols (1 when one side is empty) so the grid lays
   out only the populated columns; collapses to a single column on narrow
   screens via the media query below. */
.vac-cols {
  display: grid;
  grid-template-columns: repeat(var(--vac-cols, 1), minmax(0, 1fr));
  gap: var(--space-3) var(--space-5);
}
.vac-col { min-width: 0; }
.vac-col-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--rule);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-2);
}
.vac-col-count {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.vac-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vac-row {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--rule);
}
.vac-row:first-child { border-top: 0; }
.vac-row-title {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
a.vac-row-title:hover { text-decoration: underline; color: var(--accent); }
.vac-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
}
.vac-row-school { font-size: var(--text-xs); color: var(--ink-2); }
.vac-row-closes {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vac-show-all {
  margin-top: var(--space-3);
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.vac-show-all:hover { text-decoration: underline; }
.vac-show-all:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Stack the two columns on narrow screens — the rows are too wide to read
   side-by-side once the panel drops below ~tablet width. Overrides the
   --vac-cols grid above. */
@media (max-width: 640px) {
  .vac-cols { grid-template-columns: minmax(0, 1fr); }
}