/* "Open full profile →" affordance — emitted next to the school
   name on Map side panel, Reports cards and Compare drill-ins.
   Routes to #tab=school&urn=… via a delegated click handler in
   index.js. Visual register: small inline link, dotted underline
   on hover so the rest of the line doesn't dance when the link
   appears. Lives in school.css because every caller is a school
   appearance; keeping the rule co-located with the page it leads
   to is easier to find than scattering it across reports.css /
   map.css / compare/blocks.css. */
.school-full-profile-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  margin-left: var(--space-3);
  white-space: nowrap;
}
.school-full-profile-link:hover {
  border-bottom-color: var(--accent);
}
.school-full-profile-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: 2px;
}
/* When the link sits inside the Map side panel, the panel is
   narrow — give it its own row above the school name so it doesn't
   crowd the existing close button + meta line. */
.map-side-panel-inner > .school-full-profile-link {
  display: inline-block;
  margin: 0 0 var(--space-3) 0;
}

/* Single-school profile tab — full-width long-scroll view.

   Bias to reuse. The container compounds `.group-profile` (from
   compare/blocks.css; provides the long-scroll banner-+-stack
   layout already established for trust / LA / inspector profiles)
   with `.school-profile` so the trust styling applies and our
   school-specific tweaks override where the registers differ.

   The body content is mapPopupHtml output verbatim — same CSS
   classes the Map side panel uses (.map-popup-name, .map-popup-
   meta, .map-popup-perf-*, .sv-narrative-block, .aar-headlines-
   grid). On the school tab they sit inside a wider container so
   they read with more breathing room. */

#tab-school:not([hidden]) {
  /* Same container shape the trust profile uses: 1216px max-width,
     centred, with comfortable side gutters. Long-scroll. */
  max-width: 1216px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-7) var(--space-8);
}

/* Back-link row sits above the banner, same affordance the trust
   profile uses (.profile-backlink already styled in
   compare/blocks.css). The school-specific class is a hook for
   future overrides if needed. */
.school-profile-backlink {
  /* Inherits .profile-backlink from compare/blocks.css. */
}

/* Banner — compounded with .profile-banner so the trust banner
   layout (flex column + padded card) applies. Tighter padding +
   removed the 4-stat grid (which doesn't map cleanly to a single
   school — see plan); replaced with a clean three-line stack:
   eyebrow "School profile" + name + meta + URN/publication line. */
.school-profile-banner.profile-banner {
  /* Same .card + .profile-banner background + border + radius. */
  gap: 6px;
}
.school-profile-name.profile-banner-name {
  font-size: 28px; /* @approved: school profile banner — sits one step above the trust banner's 24px because the school name is the primary identifier on the page */
}
.school-profile-meta {
  color: var(--ink-2);
  font-size: var(--text-md);
  margin: 0;
}
.school-profile-urnline {
  color: var(--ink-3);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
/* GIAS identity-facts line — age range · gender · faith · type ·
   pupils on roll. One notch quieter than the meta line above it. */
.school-profile-facts {
  color: var(--ink-3);
  font-size: var(--text-sm);
  margin: 0;
}

/* The mapPopupHtml output inside .school-profile-body uses the
   .map-popup-* classes that were originally sized for the narrow
   side panel (~440px). Override the body to relax horizontally:
   bigger gap between sections, wider name, more readable
   .map-popup-meta. */
.school-profile-body {
  display: block;
  margin-top: var(--space-5);
}
.school-profile-body .map-popup-name {
  /* The side panel's .map-popup-name is the school heading; we've
     hoisted that role to the banner above, so suppress the
     duplicate here. */
  display: none;
}
.school-profile-body .map-popup-meta {
  /* Same role: the banner already carries the meta line. The
     mini-map illustration sits inside this block though, so we
     don't remove the meta entirely — just suppress the text
     children. */
  font-size: var(--text-base);
  color: var(--ink-3);
}
/* The mini-map "you are here" SVG sits floated inside .map-popup-
   meta. On the wider school tab, give it room to breathe. */
.school-profile-body .map-side-panel-mini-map {
  /* Inherits position rules from compare/panel.css — just give
     the standalone view a touch more margin so it doesn't crowd
     the meta text. */
  margin-left: var(--space-4);
}

/* Section rhythm — every disclosure inside the body gets a
   consistent gap above it. The side panel uses 8px between
   .sv-narrative-block elements; on the wider tab let them
   breathe. */
.school-profile-body .sv-narrative-block,
.school-profile-body .map-popup-perf-label {
  margin-top: var(--space-4);
}
.school-profile-body .map-popup-perf-label:first-child {
  margin-top: 0;
}

/* ── Full-width reading fixes (page IA review) ─────────────────────
   The body is the 440px side-panel layout reused at ~1100px. Three
   scoped corrections, none of which touch the side panel:

   1. Outcomes grid — the 8 performance disclosures were one narrow
      chart per full-width row (a 240×64 sparkline centred in ~800px
      of white). At wide widths they flow 2-up; the two table-heavy
      blocks (Results by pupil group, Subjects entered) span the
      full row via .sv-perf--wide. */
@media (min-width: 900px) {
  .school-profile-body .sv-section[data-profile-section="Outcomes"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-4);
    align-items: start;
  }
  .school-profile-body .sv-section[data-profile-section="Outcomes"] > .sv-section-head,
  .school-profile-body .sv-section[data-profile-section="Outcomes"] > .sv-perf--wide {
    grid-column: 1 / -1;
  }
}
/* 2. Chart cap — miniLineChartSvg is a 240×64 viewBox; letting it
      scale to a full column upscales 1.6px strokes into coarse
      giants (graphics audit). Cap the drawn width; the grid above
      already keeps its cell narrow, this is the safety net for the
      wide blocks + narrow viewports. */
.school-profile-body .map-popup-perf-chart {
  max-width: 480px;
}
/* 3. Prose measure — Next-steps bullets and the report narrative
      were running ~150+ characters a line at full width. Cap the
      text blocks at a readable measure; tables and charts are
      untouched. */
.school-profile-body .sv-narrative-body p,
.school-profile-body .map-popup-bullets {
  max-width: 70ch;
}
/* The per-area heading is a space-between flex row — cap it to the
   same measure so the grade tag sits at the end of the text column
   rather than floating at the card's far-right edge. */
.school-profile-body .sv-narrative-head {
  max-width: 70ch;
}

/* Section heads — the panel's muted eyebrow reads under-weighted as
   a full-page group anchor; bump one step on the profile only. */
.school-profile-body .sv-section-head {
  font-size: var(--text-xs);
}

/* Direct label on the history strip's latest tick (date · grade) —
   the one value a reader shouldn't need the hover for. */
.school-inspection-history__svg .sit-latest-label {
  font-size: var(--text-9);
  fill: var(--ink-2);
  font-weight: 600;
}

/* The grade-chip row in the side panel uses a flex wrap; on the
   wider tab the row should read like a banner strip rather than
   a tight chiclet row. Slightly more gap between chips, slightly
   bigger chip text. */
.school-profile-body .map-popup-grades {
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Geo row — the location map and the inspection-history strip share
   one row at wide widths instead of stacking a 320px map above a
   96px strip (which cost a full screen of scroll before the body).
   Falls back to stacking on narrow viewports. */
.school-profile-geo-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: stretch;
  margin-top: var(--space-5);
}
/* The row's grid gap owns the spacing — neutralise the children's
   own stacked-layout top margins. */
.school-profile-geo-row .school-location,
.school-profile-geo-row .school-profile-history-strip {
  margin-top: 0;
}
@media (min-width: 900px) {
  .school-profile-geo-row {
    grid-template-columns: minmax(320px, 2fr) 3fr;
  }
  /* When the row holds only one card (uninspected page: map only;
     no-coords school: strip only) let it span the full width. */
  .school-profile-geo-row > :only-child {
    grid-column: 1 / -1;
  }
}

/* Location map — Leaflet basemap with a single marker, rendered
   right under the banner. Same Carto tile recipe the Map tab uses.
   Fixed 320px height keeps it from dominating the page; the
   .school-location__caption above mirrors the eyebrow convention
   already established for trust-finance + AAR sections. */
.school-location {
  margin: var(--space-5) 0 0;
  padding: 0;
}
.school-location__caption {
  font-size: var(--text-xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: var(--space-2);
}
.school-location__map {
  width: 100%;
  height: 320px; /* @approved: school location map — bigger than the side-panel mini-map but small enough not to dominate the long-scroll profile */
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper-2);
}
.school-location__map:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Inspection-history strip — horizontal SVG modelled on the trust
   profile's master timeline, simplified to one row for one school.
   Ticks for every inspection event in s.timeline; the latest tick
   carries the lowest_grade colour, earlier ticks are ink-3. */
.school-profile-history-strip {
  margin-top: var(--space-5);
  padding: var(--space-5) 22px;
}
.school-profile-section-head {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink);
}
.school-inspection-history {
  margin: 0;
  padding: 0;
}
.school-inspection-history__caption {
  font-size: var(--text-xs);
  color: var(--ink-3);
  margin-bottom: var(--space-2);
}
.school-inspection-history__svg {
  width: 100%;
  height: auto;
  display: block;
}
.school-inspection-history__svg .sit-axis {
  stroke: var(--rule);
  stroke-width: 1;
}
.school-inspection-history__svg .sit-year {
  font-size: var(--text-9);
  fill: var(--ink-3);
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
.school-inspection-history__svg a:focus-visible .sit-tick line {
  /* Focus halo around the active tick — keyboard users land on
     a tick via Tab; without this the tick is indistinguishable
     when focused. */
  stroke-width: 5;
}
.school-inspection-history__svg a { cursor: pointer; }
.school-inspection-history__svg a:hover .sit-tick line {
  /* On hover, fatten the tick + bring the opacity up so the user
     sees which event their click will hit. */
  stroke-width: 4;
  opacity: 1 !important; /* @approved: school inspection history hover — beats the inline opacity attribute on the line element */
}

/* Responsive — at narrow viewports the tab loses its padding
   gutter and the banner condenses. */
@media (max-width: 760px) {
  #tab-school:not([hidden]) {
    padding: var(--space-3) var(--space-4) var(--space-6);
  }
  .school-profile-name.profile-banner-name {
    font-size: var(--text-xl);
  }
  .school-profile-body .map-side-panel-mini-map {
    margin-left: var(--space-2);
  }
}