/* Trust-profile insight styles (Phase 4, insightfulness review
 * 2026-07-02): the grade-mix national comparator on the per-area
 * grade summary (panels/schools-list-panel.js), the attainment tile
 * shell (charts/attainment-tile.js — the stat grid itself reuses the
 * .beh-tile-* recipe from behaviour-tile.css), the "schools taken on"
 * improvement summary line, and the banner active-interventions
 * status line (tabs/trusts.js).
 *
 * Tokens only — colours via var(--*), sizes via var(--text-*),
 * spacing via var(--space-*). No hex literals; no inline styles. */

/* ── Grade mix by evaluation area: national comparator ─────────────── */

/* Widen the label column (was a fixed 110px in compare/panel.css, which
 * ellipsised "Personal development…" even at 1440px) and let the number
 * column size to its two-line content. A FIXED width (not max-content)
 * because each .panel-area-row is its own grid — a content-sized column
 * would resolve per row and the bars would no longer align vertically.
 * Labels wrap instead of truncating. Scoped to the --nat variant so any
 * other .panel-area-row consumer keeps the original grid. */
.panel-grade-summary--nat .panel-area-row {
  grid-template-columns: 24ch 1fr auto;
}
.panel-grade-summary--nat .panel-area-row__label {
  white-space: normal;
  overflow: visible;
  line-height: 1.25;
}
@media (max-width: 640px) {
  .panel-grade-summary--nat .panel-area-row {
    grid-template-columns: 12ch 1fr auto;
  }
}

/* Basis + column-caption line under the section head — says how many
 * schools the bars cover and which share the right-hand % shows. */
.panel-grade-summary__meta {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-3);
}

/* Group bar + faint national bar stack in the middle column. */
.panel-area-row__bars {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* The national reference bar — same grade segments over all inspected
 * schools, deliberately thin + faded so it reads as reference, not a
 * second data row. */
.pgs-nat-track {
  height: 4px;
  opacity: 0.5;
}

/* Right-hand column: group share on top, national share beneath. */
.panel-grade-summary--nat .panel-area-row__num {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
}
.pgs-nat-num {
  font-size: var(--text-nano);
  color: var(--ink-3);
  white-space: nowrap;
}

/* ── "Schools taken on" improvement summary (Inspections card) ────── */

.trust-improvement-line {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.trust-improvement-note {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--ink-3);
}

/* ── Banner active-interventions status line ───────────────────────── */

.trust-banner-status-line {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-2);
}

/* Each part is a button that scrolls to the timeline section — styled
 * as an inline link, with the shared focus-ring token (the audit's
 * cursor-pointer-needs-focus-style rule). */
.trust-banner-status-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.trust-banner-status-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.trust-banner-status-vintage {
  font-size: var(--text-xs);
  color: var(--ink-3);
}