/* Reports tab — the per-inspection bullets / school view.

   Two view modes: Bullets (verbatim Next-steps text grouped under
   each school card) and Schools (one card per school, expandable
   detail). Plus the LA-level scope variant where SEND / ILACS
   reports get rendered as their own card type alongside school
   cards.

   Hierarchy:
   - .bullets-toolbar / .bullets-toolbar-controls — already in base.
   - .schools-list — single-column stack of school cards.
   - .la-cards-list / .la-card / .la-card-meta-grid / .la-role-tag
     — LA-level (SEND/ILACS) card variant.
   - .sv-* — school-view card chrome: .sv-head, .sv-name, .sv-meta,
     .sv-narrative-block, .sv-about-* (definition-list metadata),
     .sv-text, .sv-grade-chip, .sv-empty, .sv-headline, .sv-tags,
     .sv-mini-map, .sv-links.
   - .scope-toggle — top-of-page broad scope picker.
   - .deeplink-banner — shown when a URN deeplink misses.

   Some .sv-* selectors overflow into panel cards (.trust-school
   reuses .sv-about-grid etc.); panel-specific overrides live in
   tabs/compare.css alongside the rest of the trust profile. */

/* Bullets / School view toolbar — list-sub text on the left, view
   toggle on the right, wraps on narrow viewports. */
.bullets-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: var(--space-5); flex-wrap: wrap;
}
/* The list-sub `<p class="sub">` inside the toolbar — reset the
   user-agent block margin so it sits flush with the toggle row
   on the right (the toolbar handles its own gap). Was an inline
   `style="margin: 0"` before. */
.bullets-toolbar__sub { margin: 0; }
.bullets-toolbar-controls {
  display: flex; align-items: center; gap: var(--space-2);
}








/* Schools list (in the Bullets tab → School view). Flex-column-gap
   recipe lives on `.stack .stack--gap-3` in components.css; the
   class is retained as a JS targeting hook. */

/* LA-level cards (SEND / ILACS) on the Reports tab. Same shape as
   .school-card but tagged separately so future tweaks don't drift
   across the two card families. .stripe is shared. Flex-column-gap
   recipe lives on `.stack .stack--gap-3` in components.css. */
/* Recipe inherited from .card (components.css). Variant-specific
   geometry — the 14px stripe + 1fr body grid layout, with 16px
   20px padding to match the school-card footprint — stays on
   this selector. */
.la-card {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 14px;
  padding: 16px 20px;
}
.la-card .stripe {
  width: 3px; border-radius: 2px; background: var(--c);
  align-self: stretch; min-height: 32px;
}
/* LA cards now reuse the school card's .sv-head / .sv-name /
   .sv-meta / .sv-links / .sv-grades primitives — see laSendCardHtml
   and laIlacsCardHtml. The original .la-card-head/.la-card-name/
   .la-card-sub/.la-card-headline/.la-card-meta styles were removed
   when the markup migrated. */

/* Definition-list style metadata grid on LA cards. Two columns —
   label left, value right — with each row sitting tight against
   the next. Older records lose individual rows gracefully when
   a field is null. */
.la-card-meta-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-3);
  row-gap: 2px;
  /* 8px 14px 14px — both callsites (la-card-meta-grid lives only
     inside <details class="sv-narrative-block"> bodies on LA cards)
     previously set this inline; folded into the primitive so the
     disclosure-body padding is consistent. */
  margin: 0 0 10px;
  padding: 8px 14px 14px;
  font-size: var(--text-sm);
}
.la-card-meta-grid dt {
  color: var(--ink-3);
  font-weight: 400;
}
.la-card-meta-grid dd {
  margin: 0;
  color: var(--ink-2);
}
.la-card-meta-grid a { color: var(--accent); }
.la-card-meta-grid a:hover { text-decoration: underline; }

/* Inspector-role tag (e.g. "His Majesty's Inspector") rendered
   small + muted next to the inspector's name on the ILACS meta
   grid. */
.ilacs-meta-role {
  color: var(--ink-3);
  font-size: 11px;
}
/* Headline-summary disclosure body — wider line-height so the
   400-1000 char inspector verdict paragraph reads comfortably. */
.ilacs-headline-summary > p {
  margin: 0;
  padding: 10px 14px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  border-top: 1px solid var(--rule-2);
}
/* Per-judgement narrative — summary line carries the judgement
   label + a small grade pill so readers can spot what they're
   about to open. The label takes the available space; the chip
   and paragraph count sit tight at the right. */
.ilacs-judgement-narrative > summary {
  gap: var(--space-2);
}
.ilacs-jn-label {
  flex: 1 1 auto;
  min-width: 0;
}
/* Per-judgement grade tag on the disclosure summary line —
   same tinted treatment as .sv-grade-chip so the right-edge
   marker reads as a peer of the top grade chips rather than
   a louder competing style.

   Chrome inherited from .chip--graded (components.css). The
   summary-line variant softens the tint (22%/40% vs 25%/45%
   default) so the chip recedes against the disclosure caret +
   label rather than competing with them, narrows the stripe
   (3px vs 4px), and tightens vertical + left padding (1×8×1×6
   vs 3×8×3×4) so the chip fits inside the 18px summary line.
   Font drops to 10px so the chip reads quieter than the label
   text. flex-shrink:0 stops the label growth from squeezing
   the chip into a single character. */
.ilacs-jn-chip {
  --chip-tint: 22%;
  --chip-border-tint: 40%;
  --chip-stripe: 3px;
  --chip-py: 1px;
  --chip-pl: 6px;
  font-size: var(--text-nano);
  font-weight: 500;
  flex-shrink: 0;
}
.ilacs-jn-body {
  padding: 8px 14px 14px;
  border-top: 1px solid var(--rule-2);
}
.ilacs-jn-body p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.ilacs-jn-body p:first-child { margin-top: 6px; }
/* Headline-summary disclosure body — wider line-height so the
   400-1000 char inspector verdict paragraph reads comfortably. */
.ilacs-headline-summary > p {
  margin: 0;
  padding: 10px 14px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  border-top: 1px solid var(--rule-2);
}


/* LA bullets list — flex-column-gap recipe lives on
   `.stack .stack--gap-3` in components.css. */

/* Top-level scope toggle above the Reports toolbar — broader visual
   weight than the existing toolbar toggles because it's switching
   between different corpora, not just chart views. */
.reports-scope {
  margin-bottom: 14px;
}

/* Deep-link landing banner — shown when a URN deeplink doesn't
   resolve to a card in the dataset. Two flavours, both calm: a
   muted left-stripe so the panel is recognisably an explanation,
   not an error.
   Recipe inherited from .card + .card--banner (components.css).
   --card-stripe paints the 3px left edge — defaults to
   var(--ink-3) for the out-of-scope flavour, overridden by the
   --not-found modifier to a quieter var(--rule). Variant-specific
   geometry (16px 18px padding + bottom margin) stays here; the
   --r-sm radius from .card--banner reads more authored than the
   r-md hero card. */
.schools-banner {
  --card-stripe: var(--ink-3);
  padding: 16px 18px;
  margin: 0 0 16px;
}
.schools-banner--not-found { --card-stripe: var(--rule); }
.schools-banner h3 {
  margin: 0 0 6px;
  font-size: var(--text-md, 14px);
  font-weight: 600;
  color: var(--ink);
}
.schools-banner p {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: var(--text-sm, 12px);
  line-height: 1.5;
}
.schools-banner__phase {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px 8px;
  background: var(--surface-hover);
  border-radius: var(--r-full);
  font-size: var(--text-xs, 11px);
  font-weight: 500;
  color: var(--ink-2);
  vertical-align: middle;
}
.schools-banner a { color: var(--accent); text-decoration: underline; }
/* Recipe inherited from .card (components.css). Variant-specific
   geometry — the 14px stripe + 1fr body grid layout, with 16px
   20px padding — stays on this selector. */
.school-card {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 14px;
  padding: 16px 20px;
}
.school-card .stripe {
  width: 3px; border-radius: 2px; background: var(--c);
  align-self: stretch; min-height: 32px;
}
.sv-body { min-width: 0; }
.sv-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.sv-name {
  font-family: "Charter", Georgia, serif;
  font-size: 18px; /* @approved: Charter serif school name heading; 18px in the serif face gives the school name appropriate prominence in the report card */
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.sv-meta {
  color: var(--ink-3);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
  line-height: 1.5;
}
/* Subtle inline link inside a meta line — inherits the surrounding
   ink colour and shows a quiet dotted underline; hover lifts to
   accent. Shared between school-card meta rows and bullet-card
   footers. */
.sv-meta a,
.bullet .footer a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.sv-meta a:hover,
.bullet .footer a:hover { color: var(--accent); }
/* Trust (MAT) / LA-maintained marker on the meta line. Trust name
   reads as slightly more emphatic since it's a real proper noun;
   "LA-maintained" gets a quieter italic since it's a category. */
.sv-trust { color: var(--ink-2); font-weight: 500; }
.sv-trust--la { color: var(--ink-3); font-weight: 400; font-style: italic; }
/* In-site navigation chip — trust or LA name on a school card
   that, when clicked, jumps the user to the Trusts / LAs tab with
   that entity pre-selected. Renders as a styled inline button so
   it reads as "clickable text" rather than competing with the
   external-links row underneath. */
.nav-chip {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.nav-chip:hover,
.nav-chip:focus-visible {
  text-decoration-style: solid;
  outline: none;
}
/* Trust + LA nav chips share the same quieter "ink-2 + accent on
   hover" treatment so when both appear on a card meta line they
   read as peers rather than one being louder than the other. */
.nav-chip--trust,
.nav-chip--la { font-weight: 500; color: var(--ink-2); }
.nav-chip--trust:hover,
.nav-chip--trust:focus-visible,
.nav-chip--la:hover,
.nav-chip--la:focus-visible { color: var(--accent); }
/* Copy-shareable-link button — small icon button rendered next to
   a heading (school name, trust name, LA name). Click → copies a
   permalink hash for that entity to the clipboard, with a brief
   "✓" flash on success. */
.copy-link-btn {
  background: transparent; border: 0; padding: 2px 5px;
  margin-left: 6px;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: var(--r-sm);
  /* em-relative size so the 🔗 icon scales with whatever heading
     it sits next to (18px sv-name vs 16px trust-panel-name) and
     always reads as proportional. */
  font-size: 0.7em;
  line-height: 1;
  vertical-align: middle;
  transition: background var(--t-fast), color var(--t-fast);
}
.copy-link-btn:hover,
.copy-link-btn:focus-visible {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  outline: none;
}
.copy-link-btn--ok {
  color: var(--g-strong);
  background: color-mix(in srgb, var(--g-strong) 12%, transparent);
}

/* Mini-map in the top-right of school cards — coarse England
   outline + a "you are here" dot. Aligns visually with the
   context-bands strip above it. */
.mini-map {
  display: block; flex-shrink: 0;
  margin-top: 2px;
}

.sv-grades {
  display: flex; flex-wrap: wrap; gap: 6px;
  /* Match the 4px adjacency between disclosure blocks below — was
     14px, which made the gap below the dashed separator visibly
     bigger than every other inter-row gap on the card. */
  margin-bottom: var(--space-1);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--rule);
}
/* Inspector narrative + "What it's like" disclosures — collapsed
   by default so cards stay scannable, expand on click to reveal
   the verbatim Ofsted text. Two blocks stack vertically with a
   subtle border-left in the area's grade colour. */
.sv-narrative-stack {
  display: flex; flex-direction: column; gap: var(--space-1);
  /* No margin — adjacent-sibling rules below handle the gap to
     whatever block follows. This keeps the spacing identical
     inside the stack (flex gap) and around it (margin-top on
     the next block). */
  margin: 0;
}
.sv-narrative-block {
  border: 1px solid var(--rule-2);
  border-radius: var(--r-sm);
  background: var(--paper-2);
}
/* Adjacent disclosures and stacks always sit 4px apart, whether
   they're inside the stack (flex gap), siblings, or one of each.
   Tight but not touching — 8px felt airy when several disclosures
   were stacked on a single card. */
.sv-narrative-stack + .sv-narrative-block,
.sv-narrative-block + .sv-narrative-block,
.sv-narrative-block + .sv-narrative-stack {
  margin-top: var(--space-1);
}
/* Disclosure chrome (summary list-style suppression, caret ▸,
   [open] rotate) is provided by the `.disclosure` primitive in
   components.css — `narrativeBlock()` composes
   `class="disclosure sv-narrative-block"`. The padding, summary
   weight + colour, and the parent-hover-driven darken (rather than
   the primitive's caret-only hover) are sv-narrative-block-specific
   and stay here. */
.sv-narrative-block > summary {
  padding: 8px 12px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-2);
}
.sv-narrative-block:hover > summary { color: var(--ink); }
.sv-narrative-count {
  color: var(--ink-3);
  font-weight: 400;
  font-size: 11px;
  margin-left: auto;
}
/* Summary hint — key-stage / status annotations in a disclosure
   summary ("(GCSE)", "(A level)", "(loading…)"). Visually the same
   register as the count chip, but a distinct class so the `(N)`
   slot stays item-counts only (school-card appraisal F6). */
.sv-summary-hint {
  color: var(--ink-3);
  font-weight: 400;
  font-size: 11px;
  margin-left: auto;
}
/* Named school-card sections (school-card appraisal F4/F5) — the
   grouping wrapper mapPopupHtml / uninspectedShellHtml emit around
   the block stacks (Inspection / Outcomes / Behaviour & inclusion /
   Context & finance), mirroring the trust/LA panels'
   [data-profile-section] convention. The eyebrow heading gives the
   13-block panel scan anchors without shouting over the block
   summaries. */
.sv-section {
  margin-top: var(--space-4);
}
.sv-section--identity {
  margin-top: 0;
}
.sv-section-head {
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-1);
  font-size: var(--text-nano);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule-2);
}
/* Source / vintage footer — ONE visible attribution line per
   data-bearing section (school-card appraisal F2; data-spine
   §3.20–3.21 mandate on-page vintage, not tooltip-only). Same
   low-weight register as the old .excl-source / .growth-chart-source
   recipes it generalises. */
.sv-source {
  font-size: var(--text-nano);
  color: var(--ink-3);
  margin: var(--space-2) 0 0;
}
.sv-narrative-body {
  padding: 4px 14px 14px;
  border-top: 1px solid var(--rule-2);
}
.sv-narrative-body p {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.sv-narrative-area {
  padding: 4px 0 0 10px;
  border-left: 3px solid var(--g, var(--rule));
  margin-top: 14px;
}
.sv-narrative-area:first-child { margin-top: 6px; }
/* Verbatim outcome text inside the LA SEND card's "Full outcome
   statement" disclosure. The disclosure body wraps the `<p>`
   directly (no `.sv-narrative-body` container) so the padding +
   margin reset lives on the paragraph itself. */
.sv-narrative-block > .sv-narrative-block__outcome-text {
  padding: 8px 14px 14px;
  margin: 0;
}

/* SEND monitoring follow-up — sits inside an .sv-narrative-block
   so it inherits the disclosure framing. The findings list reads
   like a numbered to-do list, one item per area-for-priority-
   action, with the inspector's verdict + narrative inline. */
.mon-findings {
  margin: 6px 0 0;
  padding: 4px 14px 12px 30px;
  list-style: decimal;
}
.mon-finding {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.mon-finding:first-child { margin-top: 0; }
.mon-finding-head { font-weight: 500; }
.mon-finding-head em { color: var(--ink-3); font-style: normal; }
.mon-finding-narrative { margin: 4px 0 0; color: var(--ink-3); }
.la-card-meta-soft {
  padding: 4px 14px 8px;
  font-size: 12px;
  color: var(--ink-3);
}
.sv-narrative-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.sv-area-grade {
  color: var(--g);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Inside the trust/LA panel cards the narrative block sits inside
   a 10px-padded .trust-school, so trim its own margins a touch
   and shrink the text so the panel doesn't feel wall-of-text. */
.trust-school .sv-narrative-stack { /* spacing now handled by the
     shared adjacent-sibling rules; no override needed */ }
.trust-school .sv-narrative-body p { font-size: 12px; }

/* Compact "Links" row under the card meta — external destinations
   from the Ofsted report (DfE performance tables, Ofsted explore,
   school website, plus the existing reports search link). */
.sv-links {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.sv-links a {
  color: var(--accent);
  text-decoration: none;
}
.sv-links a:hover { text-decoration: underline; }
.sv-links-sep {
  color: var(--rule);
  user-select: none;
}
.trust-school .sv-links {
  margin: 4px 0 6px;
  font-size: 11px;
  gap: var(--space-1);
}

/* "About this inspection" disclosure — full prose paragraphs at
   the top (when the extractor captured them), then a structured
   two-column grid below. A thin separator between the two when
   both are present. */
.sv-about-prose {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.sv-about-prose:last-of-type { margin-bottom: 0; }
.sv-about-prose + .sv-about-grid {
  margin-top: var(--space-3);
  padding-top: 10px;
  border-top: 1px dashed var(--rule-2);
}
.sv-about-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  font-size: var(--text-sm);
}
.sv-about-row {
  display: contents;
}
.sv-about-key {
  color: var(--ink-3);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  align-self: start;
  padding-top: 2px;
}
.sv-about-val {
  color: var(--ink-2);
  line-height: 1.5;
}

/* ────────────────────────────────────────────────────────────
   Bullets-view content + auxiliary card chrome: panel-card grid
   tightening, inspection-history (.sv-timeline), context-band
   strip (.ctx-*), immediate CSS tooltip, bullet cards with
   theme/phase/region/date tags, footer line, .stats and .seg
   colour-by-grade/phase shared atoms.
   ──────────────────────────────────────────────────────────── */

/* Panel cards: tighter alignment so the label column doesn't eat
   too much of the limited width. */
.trust-school .sv-about-grid { grid-template-columns: 110px 1fr; gap: 4px 8px; font-size: 12px; }
.trust-school .sv-about-key { font-size: var(--text-nano); }

/* Inspection-history disclosure — a tight table-like list of past
   events on this URN, with a direct PDF link for each. Newest
   first; the current inspection is excluded (already shown in the
   meta line). */
.sv-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
}
.sv-timeline-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: var(--space-3);
  padding: 4px 0;
  border-bottom: 1px dotted var(--rule-2);
  align-items: baseline;
}
.sv-timeline-row:last-child { border-bottom: 0; }
.sv-timeline-date {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.sv-timeline-type {
  color: var(--ink-2);
}
.sv-timeline-link a {
  color: var(--accent);
  font-size: var(--text-xs);
  text-decoration: none;
}
.sv-timeline-link a:hover { text-decoration: underline; }
.sv-timeline-nopdf { color: var(--ink-3); }
/* Panel cards: tighter still */
.trust-school .sv-timeline { font-size: var(--text-xs); }
.trust-school .sv-timeline-row { grid-template-columns: 96px 1fr auto; gap: var(--space-2); padding: 3px 0; }
/* Chrome inherited from .chip--graded (components.css). The
   OKLCH-tinted background + 4px left stripe + 11px font-size +
   3×8×3×4 padding match the primitive's defaults exactly, so
   no overrides are needed here — the legacy class is kept on
   the JS markup so any in-the-wild selectors (.school-card
   .sv-grade-chip, etc.) still resolve. */

/* Context-band strip at the top of each school card. Each indicator
   reads as a small horizontal bar — fill level (1–5) shows how
   extreme the cohort is on that dimension (FSM%, SEN%, area
   deprivation, school size). Neutral colour throughout: these are
   magnitudes, not "good vs bad" judgements. */
.context-bands {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-bottom: var(--space-3);
}
.ctx-bar {
  display: inline-grid;
  grid-template-columns: auto 56px auto;
  align-items: center; gap: 6px;
  font-size: var(--text-xs);
  color: var(--ink-2);
  cursor: help;
  position: relative;
}
/* Immediate CSS tooltip — the native `title` attribute has a 1-2s
   show delay that left users staring at a question-mark cursor
   with no info. data-tip on the element makes the tooltip appear
   on the first hover frame. */
.ctx-bar[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 4px);
  transform: translateX(-50%);
  background: var(--surface-strong); color: var(--surface-strong-ink);
  font-size: 11px; padding: 4px 8px; border-radius: var(--r-sm);
  white-space: nowrap; pointer-events: none;
  z-index: 5;
}
.ctx-bar-key   { color: var(--ink-3); font-size: 11px; }
.ctx-bar-val   { color: var(--ink); font-weight: 500; }
.ctx-bar-track {
  width: 56px; height: 6px;
  background: var(--rule-2);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.ctx-bar-fill {
  display: block;
  width: calc(var(--lvl, 0) * 20%);
  height: 100%;
  background: var(--ink-3);
  border-radius: 2px;
}
/* Capacity meter variant — a true ratio-against-limit meter (not
   the banded 1–5 fill): fill ∝ actual utilisation on a 0–120%
   track, with a reference tick at the 100%-of-capacity point so an
   over-subscribed school visibly crosses the limit. `--cap-fill`
   travels via the custom-property pass-through recipe. */
.ctx-bar--capacity .ctx-bar-fill { width: var(--cap-fill, 0%); }
.ctx-bar-track--meter { overflow: visible; }
.ctx-bar-track--meter::after {
  content: "";
  position: absolute;
  left: calc(100% / 1.2); /* 100% capacity on the 0–120% track */
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--ink-2);
}

/* Dot pseudo-element removed — the solid border-left replaces it
   as the primary grade-colour indicator. */
.sv-grade-name { color: var(--ink-3); font-size: 11px; }
.sv-grade-val { font-weight: 500; color: var(--ink); }

.sv-bullets {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.sv-bullets li {
  display: grid;
  grid-template-columns: minmax(80px, 110px) 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding-left: 0;
}
/* Theme tag on each bullet inside the school card list. Neutral —
   consistent with the bullet-card tag treatment on the Bullets
   view. The grade-coloured chips above the bullets carry the
   grade signal; the theme label is just a category name. */
.sv-theme {
  font-size: var(--text-xs);
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
  align-self: start;
}
.sv-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.sv-empty {
  color: var(--ink-3); font-style: italic; font-size: 13px;
  margin: 0; padding: 4px 0;
}
/* Roomier empty-state padding for panel-body contexts where the
   default 4px block padding sits too tight against surrounding
   toggles / lists. Used by schools-list-panel's bullet/theme/area
   views when the active filter has hidden everything. */
.sv-empty--pad-block-3 { padding-block: var(--space-3); }

/* Bullets list (Bullet view). Flex-column-gap recipe lives on
   `.stack .stack--gap-2` in components.css. */
/* Recipe inherited from .card .card--list-item (components.css):
   no shadow + smaller radius, so a vertical stack of bullets
   reads as a list rather than a deck of cards. Variant-specific
   geometry — the 14px stripe + 1fr body grid layout, with 16px
   20px padding — stays on this selector. */
.bullet {
  padding: 16px 20px;
  display: grid; grid-template-columns: 14px 1fr; gap: 14px;
  align-items: stretch;
}
.bullet .stripe {
  width: 3px; border-radius: 2px; background: var(--c);
  align-self: stretch; min-height: 32px;
}
.bullet .meta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-bottom: 6px;
}
.tag {
  font-size: var(--text-xs); padding: 3px 9px; border-radius: var(--r-full);
  border: 1px solid; font-weight: 500; white-space: nowrap;
}
/* Theme + phase + region + date tags on bullet cards. Neutral grey
   across the board — too many coloured chips per card was visual
   noise; the theme label itself is the information, and the grade
   pill on the right plus the side stripe already carry the
   grade-colour signal. */
.tag.theme,
.tag.phase,
.tag.region,
.tag.date {
  color: var(--ink-2); border-color: var(--rule); background: var(--paper-2);
  font-weight: 500;
}
.tag.date { font-variant-numeric: tabular-nums; }
.tag.needs-review {
  color: var(--needs-review-ink);
  border-color: var(--needs-review-border);
  background: var(--needs-review-bg);
  font-weight: 600;
  cursor: help;
}
/* Dark-mode flip is handled in tokens.css via --needs-review-* overrides
   in html[data-theme="dark"]. No CSS selector override needed here. */
.bullet--needs-review {
  background: linear-gradient(90deg, var(--needs-review-bg) 0, var(--needs-review-bg) 4px, var(--card) 4px);
}
.bullet .text { font-size: var(--text-md); color: var(--ink); line-height: 1.5; }
/* Bullet footer — school name + URN link in one quiet line, replacing
   the previous .tag.school chip in the meta row. Saves a tag slot and
   ties the source identifier (URN) to its school name. */
.bullet .footer {
  color: var(--ink-3); font-size: 12px; margin-top: var(--space-2);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
}
.bullet .footer .school-name { color: var(--ink-2); font-weight: 500; }
/* .bullet .footer a styling lives in the consolidated subtle-link
   rule up top alongside .sv-meta a. */

.empty-state {
  text-align: center; padding: var(--empty-state-pad, 60px 20px); color: var(--ink-3); font-size: 14px;
}

.pagination {
  display: flex; justify-content: center; align-items: center; gap: var(--space-3);
  padding: 24px 0;
}
.pagination button {
  border: 1px solid var(--rule); background: var(--card); color: var(--ink-2);
  border-radius: var(--r-md); padding: 6px 14px; font-size: var(--text-base); cursor: pointer;
  font-family: inherit;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.pagination button:hover:not(:disabled) {
  border-color: var(--accent); color: var(--ink);
}
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination .info { font-size: 13px; color: var(--ink-3); }

/* Stats — shared */
.key-vals {
  display: grid; grid-template-columns: 1fr auto;
  gap: 8px 14px;
  font-size: 13px;
  margin-top: var(--space-2);
}
/* Looser top-margin modifier — used on the bullets-per-report
   stats block on the Themes tab where the stats sit below a
   substantial chart and a single 8px gap reads as cramped. */
.key-vals--mt-md { margin-top: 14px; }
.key-vals .k { color: var(--ink-3); }
.key-vals .v { font-weight: 500; font-variant-numeric: tabular-nums; }

footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 44px 28px 56px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.7;
}
footer .wrap { max-width: 1080px; margin: 0 auto; }
footer p { max-width: 760px; margin: 0 0 14px; }
footer p:last-child { margin-bottom: 0; }
footer strong { color: var(--ink-2); }
footer a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 3px;
}
footer a:hover { text-decoration-color: var(--accent); }

.seg[data-grade="Exceptional"]      { background: var(--g-exceptional); }
.seg[data-grade="Strong standard"]  { background: var(--g-strong); }
.seg[data-grade="Expected standard"]{ background: var(--g-expected); }
.seg[data-grade="Needs attention"]  { background: var(--g-attention); }
.seg[data-grade="Urgent improvement"]{ background: var(--g-urgent); }
.seg[data-grade="None"]             { background: var(--rule); }

.seg[data-phase="Primary"]    { background: var(--phase-primary); }
.seg[data-phase="Secondary"]  { background: var(--phase-secondary); }
.seg[data-phase="Special"]    { background: var(--phase-special); }

/* CSV download — rehomed from the retired Big picture tab
   (2026-06-10). A button styled as inline accent text so it doesn't
   compete with the toolbar; click triggers a Blob download of the
   current filter set (render.js downloadFilteredCsv, wired by the
   delegated [data-download-csv] handler in index.js). Hidden on the
   non-schools Reports views — the CSV writes one row per school. */
.dataset-stats-download {
  border: 0; background: transparent;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.dataset-stats-download:hover { text-decoration: underline; }
.dataset-stats-download:focus-visible {
  outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: 3px;
}