school_compare/nextjs-app/components/HomeView.module.css

.homeView {
  width: 100%;
}

/* ── Page rhythm ───────────────────────────────────────────────────────────
   The landing page owns the vertical gap between its bands; no band sets its
   own top or bottom margin. Previously each one did, and the gaps came out as
   24 / 32 / 24 / 16 / 48 / 32 / 16px — no scale, which is most of the reason a
   designed page read as a stack of unrelated strips. If you add a band here,
   give it padding and a ground, never a margin. */
.landing {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

/* The hero and the four reasons under it are one thought, so they sit closer
   to each other than to the next band. This is the only place that overrides
   the page gap, and it does it by grouping rather than by re-spacing. */
.heroGroup {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ── Section header ────────────────────────────────────────────────────────
   One pattern for every band: kicker, heading, optional aside. */
.sectionHead {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 1.5rem;
  margin-bottom: var(--section-head-gap);
}

.sectionKicker {
  grid-column: 1 / -1;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-strong);
  margin: 0 0 0.35rem;
}

.sectionHeading {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
  max-width: 24ch;
  text-wrap: balance;
}

.sectionAside {
  font-size: var(--step--1);
  color: var(--text-muted);
  margin: 0;
  text-align: right;
}

@media (max-width: 768px) {
  .sectionHead {
    grid-template-columns: 1fr;
  }
  .sectionHeading {
    font-size: var(--step-2);
    max-width: none;
  }
  .sectionAside {
    text-align: left;
    margin-top: 0.4rem;
  }
}

/* ── Hero ──────────────────────────────────────────────────────────────────
   The artwork fills the panel and the proposition sits on top of it, in the
   empty cream area the illustration reserves on its left. It is not a
   two-column grid: splitting the panel would crop that reserved area off and
   shrink the scene into a thumbnail, which is the one thing the artwork is
   composed not to be.

   Below the one-column breakpoint the artwork leaves the background and
   becomes a band under the search — see the 860px block. */
.heroPanel {
  position: relative;
  isolation: isolate;
  background: var(--hero-ground);
  border-radius: var(--radius-xl);
  /*
   * Deliberately NOT overflow: hidden.
   *
   * It used to be, to clip the artwork and the scrim to the rounded corners —
   * and it also clipped the search box's suggestion dropdown, which is 320px
   * tall against 145px of panel below the input. Roughly half the list was cut
   * off with no indication anything was missing.
   *
   * The two things that actually needed clipping round themselves instead, so
   * the panel can let a dropdown out. Anything absolutely positioned inside
   * this panel and taller than the space below it depends on this.
   */
}

.heroContent {
  position: relative;
  z-index: 2;
  padding: 3.5rem 1.5rem 3.5rem 3rem;
  /* Held inside the artwork's cream area. Beyond roughly this width the text
     runs onto the hillside, where the scrim below is doing all the work. */
  max-width: min(56%, 40rem);
  min-width: 0;
}

.heroArt {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Rounds itself, because the panel no longer clips it. inset: 0 makes this
     exactly the panel's own corners. */
  border-radius: inherit;
  overflow: hidden;
}

.heroArt picture,
.heroArt img {
  display: block;
  width: 100%;
  height: 100%;
}

.heroArt img {
  object-fit: cover;
  /* Centre keeps the schoolhouse in frame at every desktop panel ratio: the
     panel runs about 2.1:1 to 2.7:1 against a 1.78:1 image, so cover crops
     height only, and the school sits well inside the surviving band. */
  object-position: center;
}

/*
 * Contrast guarantee.
 *
 * The artwork's cream area is generous but it is a fixed image on a fluid
 * panel — as the panel widens the text block and the cream drift apart, and at
 * some width the headline would sit on hillside green. Rather than tune the
 * text width per breakpoint and hope, the panel fades its own ground across
 * the left of the artwork, so the copy always has a known surface under it.
 *
 * The gradient starts from --hero-ground, which is sampled from the artwork
 * itself, so in the light theme this is invisible — it reads as the
 * illustration, not as an overlay on it.
 */
.heroPanel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Same reason as .heroArt: the panel stopped clipping, so the scrim keeps
     its own corners rather than squaring off over the panel's. */
  border-radius: inherit;
  background: linear-gradient(
    to right,
    var(--hero-ground) 0%,
    rgba(var(--hero-ground-rgb), 0.97) 26%,
    rgba(var(--hero-ground-rgb), 0.72) 44%,
    rgba(var(--hero-ground-rgb), 0) 62%
  );
}

/*
 * Dark theme.
 *
 * The artwork is a fixed raster, so unlike the drawn hero it cannot be
 * re-graded token by token — but the failure it would otherwise reproduce is
 * the same one: a bright illustration is the brightest object on a near-black
 * page and out-shouts the H1 and the search box. Dimming it in CSS is the
 * whole treatment, and the scrim then fades it into the dark panel instead of
 * into cream.
 *
 * Raising the brightness raises the background under light dark-theme text, so
 * this value has a contrast floor, not just a taste range. Measured off
 * rendered pixels, sampling background up to 120px past each line:
 *
 *   brightness   title      body
 *   0.52         11.01:1    6.44:1
 *   0.75          9.48:1    5.21:1   ← current
 *
 * Body text is the binding one. Going much above 0.75 walks it toward the
 * 4.5:1 floor, and at that point the scrim needs to carry further right rather
 * than the artwork being dimmed less.
 */
@media (prefers-color-scheme: dark) {
  .heroArt img {
    filter: brightness(0.75) saturate(0.72) contrast(1.02);
  }
  .heroPanel::before {
    background: linear-gradient(
      to right,
      var(--hero-ground) 0%,
      rgba(var(--hero-ground-rgb), 0.96) 30%,
      rgba(var(--hero-ground-rgb), 0.66) 50%,
      rgba(var(--hero-ground-rgb), 0.15) 78%
    );
  }
}

/*
 * The one line in the first person, so it is set apart from the marketing copy
 * around it without shouting: display face, a step down in size, and a short
 * brand rule instead of a bullet or an emoji.
 *
 * No italic — Manrope ships no italic in the loaded weights, so font-style
 * would be synthesised into a slant. Same reason .heroEmph sets font-style
 * back to normal.
 */
.heroByline {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.25rem 0 0;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  font-style: normal;
  color: var(--text-secondary);
}

.heroByline::before {
  content: '';
  flex: 0 0 auto;
  width: 1.25rem;
  height: 2px;
  border-radius: 1px;
  background: var(--brand);
}

@media (max-width: 640px) {
  .heroByline {
    margin-top: 1rem;
    font-size: var(--step--2);
  }
}

.heroEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* --brand on its own 10% tint over Sand measures 4.19:1 — the tint darkens
     the ground under the label, and the token was specced against the ground,
     not against the tint. --brand-strong on the same composite is 5.85:1. */
  color: var(--brand-strong);
  background: rgba(var(--brand-rgb), 0.1);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.heroEyebrowDot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}

.heroTitle {
  font-size: var(--step-4);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-family: var(--font-display);
  max-width: 18ch;
}

/* The em is a colour change, not an emphasis change — Manrope has no italic
   in the loaded weights, so leaving font-style alone would synthesise a slant. */
.heroEmph {
  color: var(--brand);
  font-style: normal;
}

.heroDescription {
  font-size: var(--step-1);
  color: var(--text-secondary);
  margin: 0 0 1.5rem;
  max-width: 46ch;
  line-height: 1.55;
}

.heroDescription strong {
  color: var(--text-primary);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .heroContent {
    padding: 2.75rem 1.5rem 2.75rem 2rem;
    max-width: min(64%, 34rem);
  }
}

/*
 * One column: the artwork stops being a background and becomes a band under
 * the search.
 *
 * Overlaying at this width does not work — the panel is too narrow for the
 * copy to stay inside the artwork's cream area, so the scrim would have to
 * cover nearly the whole image, which is just a tinted rectangle with a
 * picture faintly behind it. Below the band, <picture> has already switched
 * to the pre-cropped file (see Illustration.tsx); this is the layout half of
 * the same decision.
 */
@media (max-width: 860px) {
  /*
   * Artwork above the copy, not below it.
   *
   * The DOM keeps .heroContent first so the desktop overlay does not depend on
   * source order, which left the band stranded under the search on phones —
   * reading as a strip stuck on the end rather than as a hero image. `order`
   * moves it visually only; it is decorative and aria-hidden, so there is no
   * reading order to disturb.
   *
   * It costs about 136px above the search. Measured on a 667px viewport (the
   * shortest phone still in use) the search still lands near 400px, well
   * inside the fold.
   */
  .heroPanel {
    display: flex;
    flex-direction: column;
  }
  .heroContent {
    padding: 1.75rem 1.5rem 1.75rem;
    max-width: none;
  }
  /* 13rem, not 11: at 860px an 11rem band is 4.5:1, and squeezing the 3.2:1
     crop into that throws away enough height to cut the flag off the roof and
     the base off the building. 13rem holds it at about 3.8:1, where the
     building stays whole. */
  .heroArt {
    position: static;
    order: -1;
    height: 13rem;
    /* Top corners only. Here the artwork is a band flush with the top of the
       panel, not a layer covering it — inheriting all four would leave it
       floating with rounded bottom corners against the copy below. */
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  /* The band crop puts the schoolhouse at 73% across — reported by
     scripts/build-hero-images.js, which derives it from the crop box rather
     than leaving the two to drift. Squeezing narrower then crops the emptier
     left side rather than the subject. */
  .heroArt img {
    object-position: 73% center;
  }
  /* The scrim exists to protect text sitting on the artwork. Nothing sits on
     it here, and leaving it would wash the band out. */
  .heroPanel::before {
    display: none;
  }
  .heroTitle {
    font-size: var(--step-3);
    max-width: none;
  }
  .heroDescription {
    font-size: var(--step-0);
    max-width: none;
  }
}

/* Above the fold on phones, every line costs. Drop the eyebrow tag and the
   long coverage sentence, leaving the proposition and the search — the data
   provenance is carried by the "Official & trusted" prop immediately below
   the hero (audit P1.7, feeds the 46% home exit rate). */
@media (max-width: 640px) {
  .heroPanel {
    border-radius: var(--radius-lg);
  }
  .heroContent {
    padding: 1.25rem 1.1rem 1.5rem;
  }
  .heroEyebrow,
  .heroDescriptionFull {
    display: none;
  }
  .heroDescription {
    font-size: 0.9rem;
    line-height: 1.45;
    margin-bottom: 1rem;
  }
  .heroTitle {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
  }
  /* 10rem, not 8.5: the band is widest-per-height right at this breakpoint —
     at 640px an 8.5rem band is 4.2:1, worse than anything above it, because
     the height steps down here while the width does not. 10rem keeps it near
     3.6:1, in line with the rest of the range. */
  .heroArt {
    height: 10rem;
  }
}

/* ── Value props ───────────────────────────────────────────────────────────
   Four reasons, straight from the guideline. The fourth is ours rather than
   theirs — see the comment on VALUE_PROPS in HomeView.tsx. */
.valueProps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.valueProp {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}

.propIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.6rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-md);
}

.propIconTrust {
  background: var(--brand-bg);
  color: var(--brand);
}
.propIconCompare {
  background: rgba(var(--sage-rgb), 0.42);
  color: var(--status-above);
}
.propIconContext {
  background: rgba(242, 201, 76, 0.26);
  color: var(--mustard-ink);
}
.propIconDeadline {
  background: rgba(221, 216, 245, 0.6);
  color: var(--phase-nursery);
}

.propTitle {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.15rem;
  letter-spacing: -0.01em;
}

.propBody {
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 900px) {
  .valueProps {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.25rem;
  }
}

@media (max-width: 560px) {
  .valueProps {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
}

/* ── Results toolbar ───────────────────────────────────────────────────────
   Search, filters and the List/Map switch in one card, pinned under the
   header. It sits above Leaflet's controls (z-index 1000), which scroll up
   beneath it, and below the comparison toast and the map's own fullscreen
   overlay. */
.resultsToolbar {
  position: sticky;
  top: calc(64px + 0.5rem);
  z-index: 1001;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0.875rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.resultsToolbar > :first-child {
  flex: 1;
  min-width: 0;
}

/* The one filled control in the toolbar: which view you are in is the first
   thing a results page should answer. */
.viewSwitch {
  flex-shrink: 0;
  display: flex;
  gap: 2px;
  padding: 1px;
  background: var(--bg-card);
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-md);
}

.viewSwitchBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0 1.125rem;
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius-md) - 3px);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--brand-strong);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.viewSwitchBtn:hover {
  background: var(--brand-bg);
}

.viewSwitchBtn[aria-pressed='true'] {
  background: var(--brand);
  color: var(--brand-on);
}

/* Phones: a full-bleed band flush under the header, and the switch gives way
   to the floating button in .mobileDock. */
@media (max-width: 640px) {
  .resultsToolbar {
    top: 56px;
    margin: -1rem -1rem 1rem;
    padding: 0.75rem 1rem;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.06);
  }

  .viewSwitch {
    display: none;
  }
}

.results {
  margin-top: 1rem;
}

.mapViewResults {
  margin-top: 0;
}

/* ── Map view ──────────────────────────────────────────────────────────────
   The list on the left, the map filling the rest, in one card that runs from
   under the pinned toolbar to the bottom of the screen. --toolbar-h is the
   toolbar's measured height, written by HomeView. */
/* Where the split starts before any scrolling: header, the page's top
   padding (globals.css .main), the toolbar and its margin. */
.homeView {
  --map-top: calc(64px + 1.25rem + var(--toolbar-h, 76px) + 1.25rem);
  --map-bottom: 1rem;
}

@media (max-width: 768px) {
  .homeView {
    --map-top: calc(64px + 1rem + var(--toolbar-h, 76px) + 1.25rem);
  }
}

.mapViewContainer {
  display: grid;
  grid-template-columns: minmax(360px, 460px) minmax(0, 1fr);
  height: calc(100dvh - var(--map-top) - var(--map-bottom));
  min-height: 480px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.mapListPane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-primary);
  border-right: 1px solid var(--border);
}

/* One line: the count takes what the sort leaves, and truncates rather than
   wrap if a narrow pane cannot fit both. */
.mapListPane .resultsHeader {
  flex-wrap: nowrap;
  gap: 0.75rem;
  padding: 0.875rem 1rem 0.75rem;
}

.mapListPane .resultsHeader h2 {
  flex: 1;
  min-width: 0;
  font-size: var(--step-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mapListPane .resultsHeaderActions {
  flex-shrink: 0;
}

/* A select is as wide as its longest option ("Highest Reading, Writing &
   Maths %", 281px), more than half the pane. Cap it; a long choice truncates. */
.mapListPane .sortSelect {
  max-width: 11rem;
  text-overflow: ellipsis;
}

.mapContainer {
  height: 100%;
  min-height: 0;
}

.compactList {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.125rem 1rem 1rem;
  scrollbar-width: thin;
  /* The rows lay themselves out by this list's width (SchoolRow.module.css),
     which here is always narrow, whatever the screen. */
  container: results / inline-size;
}

/* A row in the list beside the map: clicking it picks its pin. */
.mapRow {
  position: relative;
  cursor: pointer;
  border-radius: 10px;
}

.mapRowSelected > :last-child {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* Visually hidden until focused, then a pill over the row's top edge. */
.showOnMap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.showOnMap:focus-visible {
  top: -0.5rem;
  right: 0.75rem;
  z-index: 1;
  width: auto;
  height: auto;
  padding: 0.375rem 0.75rem;
  overflow: visible;
  clip-path: none;
  background: var(--brand);
  color: var(--brand-on);
  border: 0;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 700;
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}



.sectionHeader {
  margin-bottom: 1rem;
}

.sectionHeader h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  font-family: var(--font-display);
}

/* Decorative coral bar under section headings */
.sectionHeader h2::after {
  content: '';
  display: block;
  width: 50px;
  height: 2px;
  background: var(--brand);
  border-radius: 1px;
  margin-top: 0.5rem;
}

.sectionDescription {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.schoolList {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  /* The rows lay themselves out by this list's width (SchoolRow.module.css). */
  container: results / inline-size;
}

/* Staggered fade-in for rows */
.schoolList > *:nth-child(1) { animation-delay: 0ms; }
.schoolList > *:nth-child(2) { animation-delay: 30ms; }
.schoolList > *:nth-child(3) { animation-delay: 60ms; }
.schoolList > *:nth-child(4) { animation-delay: 90ms; }
.schoolList > *:nth-child(5) { animation-delay: 120ms; }
.schoolList > *:nth-child(6) { animation-delay: 150ms; }
.schoolList > *:nth-child(7) { animation-delay: 180ms; }
.schoolList > *:nth-child(8) { animation-delay: 210ms; }
.schoolList > *:nth-child(9) { animation-delay: 240ms; }
.schoolList > *:nth-child(n+10) { animation-delay: 270ms; }

.emptyState {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.emptyStateTitle {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.375rem;
  font-family: var(--font-display);
}

.emptyStateDescription {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  max-width: 380px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .resultsHeader {
    flex-direction: column;
    align-items: flex-start;
  }

  .resultsHeaderActions {
    width: 100%;
    justify-content: space-between;
  }

  /* The sort <select> sizes to its widest option ("Highest Reading, Writing
     & Maths %"), which overflows a phone viewport — beside the view toggle it
     ran off the right edge. Let it flex into the remaining space and shrink;
     the selected label truncates instead of pushing past the screen. */
  .sortSelect {
    flex: 1;
    min-width: 0;
  }

  .emptyState {
    padding: 2rem 1.25rem;
  }
}

/* ── Mobile dock ───────────────────────────────────────────────────────────
   The floating List/Map button (phones only) above the selected pin's card.
   A column, so the button always clears the card instead of covering it. */
.mobileDock {
  display: none;
}

.viewFab {
  display: none;
}

@media (max-width: 768px) {
  .mobileDock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1002;
    padding: 1rem;
    pointer-events: none;
  }

  .mobileDock > * {
    pointer-events: auto;
  }

  .bottomSheet {
    align-self: stretch;
    position: relative;
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 -4px 24px rgba(var(--shadow-rgb), 0.15);
    pointer-events: auto;
    animation: slideUpSheet 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }


  /* A 30px circle, drawn by ::before, inside a 44px target (MOBILE.md). */
  .closeSheetBtn {
    position: absolute;
    top: -19px;
    right: -15px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--text-secondary);
    cursor: pointer;
    z-index: 10;
  }

  .closeSheetBtn::before {
    content: '';
    position: absolute;
    inset: 7px;
    z-index: -1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.1);
  }

  @keyframes slideUpSheet {
    from {
      transform: translateY(120%);
    }
    to {
      transform: translateY(0);
    }
  }

  /* Map only: the pane keeps its heading, the cards give way to the pins and
     the bottom sheet. */
  .mapViewContainer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    border-radius: var(--radius-md);
  }

  .mapListPane {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .mapListPane .sortSelect,
  .compactList {
    display: none;
  }

  /* The sheet holds one results row, which is the card itself. It is not
     inside a `results` container, so give it one: a phone-width sheet takes
     the row's narrow layout. */
  .bottomSheet {
    container: results / inline-size;
  }

  .mapListPane .resultsHeader {
    padding: 0.625rem 0.875rem;
  }
}

/* Above the tab bar, and riding with it when iOS Chrome's URL bar hides
   (MOBILE.md, check 4). */
@media (max-width: 640px) {
  .mobileDock {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    padding: 0.75rem;
    transform: translate3d(0, var(--mobile-bar-offset, 0px), 0);
  }

  .viewFab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0 1.375rem;
    background: var(--text-primary);
    color: var(--bg-primary);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(var(--shadow-rgb), 0.32);
    font-family: var(--font-ui);
    font-size: var(--step--1);
    font-weight: 700;
    cursor: pointer;
  }

  /* Room under the last card so the floating button never sits on it. */
  .hasViewFab {
    padding-bottom: 4.5rem;
  }

  /* The map runs down to the tab bar; the button floats over the map. */
  .mapViewResults.hasViewFab {
    padding-bottom: 0;
  }

  .homeView {
    --map-top: calc(56px + var(--toolbar-h, 124px) + 1rem);
    --map-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 1rem);
  }
}

.quickSearches {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.quickSearchLabel {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.quickSearchChip {
  padding: 0.375rem 0.875rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition);
}

.quickSearchChip:hover {
  background: var(--brand-strong);
  color: var(--brand-on);
  border-color: var(--brand-strong);
}

/* ── How it works section ─────────────────────────────────────────────────
   A Sand band, borrowing the hero panel's ground and radius so the page has
   two anchored bands rather than one designed element and a long tail of
   unstyled strips. */

.howItWorks {
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem;
}

.hiwGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.hiwCard {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/*
 * The preview panel sits on the card surface, not on Sand.
 *
 * Everything inside it is a translucent status or brand tint, and those tokens
 * are specced to clear AA over --bg-card. Over Sand the same tints composite
 * darker, which put the report-card chips at 4.22:1 and 4.29:1 against a 4.5
 * floor — the ratio depended on a ground two levels up. On the card surface
 * they are 5.69:1 and 5.81:1. The border keeps it reading as an inset frame
 * now that panel and card share a colour.
 */
.hiwVisual {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
}

.hiwPhaseBlock {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.hiwPhaseLabel {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hiwPhaseLabel strong {
  color: var(--brand);
  font-weight: 700;
}

.hiwCardBody {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.hiwStep {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-strong);
}

.hiwTitle {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
}

.hiwDesc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

/* Mini cascade (performance card) */
.miniCascade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.miniCascadeCol {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.miniSubj {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.1rem;
}

.miniRowHead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.2rem;
  font-size: 0.44rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.miniRowHead strong {
  font-family: var(--font-display);
  font-size: 0.62rem;
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.miniTrack {
  height: 5px;
  border-radius: 2px;
  background: rgba(var(--status-above-rgb), 0.08);
  position: relative;
  overflow: visible;
}

.miniBarExp {
  height: 100%;
  border-radius: 2px;
  background: var(--brand);
}

.miniBarExc {
  height: 100%;
  border-radius: 2px;
  background: var(--brand);
}

.miniNatPill {
  position: absolute;
  top: -9px;
  transform: translateX(-50%);
  background: var(--brand);
  color: var(--text-inverse);
  font-size: 0.4rem;
  font-weight: 700;
  padding: 0.05rem 0.2rem;
  border-radius: 3px;
  z-index: 2;
  white-space: nowrap;
  pointer-events: none;
}

/* Attainment 8 mini bar */
.att8Row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  align-items: center;
}

.att8BarWrap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.att8BarHead {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.att8Track {
  height: 7px;
  background: rgba(var(--status-above-rgb), 0.08);
  border-radius: 3px;
  position: relative;
}

.att8Fill {
  height: 100%;
  background: var(--brand);
  border-radius: 3px;
}

.att8NatLine {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 1.5px;
  background: rgba(var(--brand-rgb), 0.6);
  z-index: 2;
}

.att8Score {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.att8Value {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--status-above);
  line-height: 1;
}

.att8Delta {
  font-variant-numeric: tabular-nums;
  font-size: 0.55rem;
  color: var(--status-above);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.15rem;
}

/* Ofsted preview */
.ofstedPreview {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.2rem;
}

.ofstedHead {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1.5px solid var(--border);
}

.ofstedBullet {
  display: block;
  width: 3px;
  height: 1em;
  background: var(--brand);
  border-radius: 2px;
  flex-shrink: 0;
}

.ofstedTitle {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.ofstedFramework {
  align-self: flex-start;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: rgba(var(--phase-secondary-rgb), 0.12);
  color: var(--phase-secondary-text);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rcList {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.rcRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.rcArea {
  font-size: 0.62rem;
  color: var(--text-secondary);
}

.rcChip {
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}

.rcChipGood {
  background: rgba(var(--status-above-rgb), 0.12);
  color: var(--status-above);
}

.rcChipNeutral {
  background: var(--status-below-bg);
  color: var(--status-below);
}

/* Safeguarding is a separate binary met/not-met judgement, not a graded area,
   so it sits below the five-point list behind a divider with its own chip. */
.rcSafeguarding {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.05rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--border);
}

.rcSep {
  color: var(--text-muted);
  font-style: italic;
}

.rcChipMet {
  background: transparent;
  color: var(--status-above);
  border: 1px solid rgba(var(--status-above-rgb), 0.4);
}

.ofstedMeta {
  font-size: 0.6rem;
  color: var(--text-muted);
}

/* Compare preview */
.comparePreview {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.6rem;
}

.compareHead {
  display: grid;
  grid-template-columns: 1fr repeat(2, 1fr);
  background: rgba(var(--status-above-rgb), 0.1);
  padding: 0.35rem 0.5rem;
  gap: 0.35rem;
}

.compareHeadCell {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--status-above);
  line-height: 1.2;
}

.compareHeadLabel {
  font-family: inherit;
  font-size: 0.48rem;
  /* --text-muted on the header row's tint is 4.45:1 in the dark theme —
     under the floor by a hair, because the tint darkens the ground beneath
     the label. --text-secondary clears it on both grounds. */
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.compareRow {
  display: grid;
  grid-template-columns: 1fr repeat(2, 1fr);
  padding: 0.3rem 0.5rem;
  gap: 0.35rem;
  border-top: 1px solid var(--border);
  align-items: baseline;
}

.compareRowLabel {
  font-size: 0.55rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.compareRowVal {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-primary);
}

.compareRowValHi {
  color: var(--status-above);
}

.compareFoot {
  font-size: 0.52rem;
  color: var(--text-muted);
  padding: 0.35rem 0.5rem;
  background: var(--bg-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  border-top: 1px solid var(--border);
}

@media (max-width: 768px) {
  .hiwGrid {
    grid-template-columns: 1fr;
  }
  .howItWorks {
    padding: 1.75rem 1.25rem;
    border-radius: var(--radius-lg);
  }
}

/* On phones, hide the scaled-down preview visuals (text becomes illegible
   at this size) and let the explanatory text carry each card. */
@media (max-width: 640px) {
  .hiwVisual {
    display: none;
  }
  .hiwCard {
    padding: 1rem 1.1rem;
    gap: 0.45rem;
  }
  .hiwTitle {
    font-size: 1.05rem;
  }
  .hiwDesc {
    font-size: 0.9rem;
  }
}

/* ── Editorial section ───────────────────────────────── */

/* Heading beside the prose rather than above it. The fact box used to occupy
   the right-hand column; with it gone, a single column left the card half
   empty, because the prose is capped at a 62ch reading measure and the card
   is not. */
.editorialCard {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  column-gap: 3rem;
  padding: 2rem 2.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* The shared header pattern spaces itself for a header sitting above its
   content; here it sits beside it. */
.editorialCard .sectionHead {
  margin-bottom: 0;
  display: block;
}

.editorialCard .coverageLine {
  grid-column: 1 / -1;
}

.editorialText {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* Running prose is the one place the serif appears. Slightly larger than the
   UI around it because Literata's x-height sits lower than the grotesque's. */
.editorialText p {
  font-family: var(--font-prose);
  font-size: 0.97rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
  max-width: 62ch;
}

/* One line of live coverage figures, replacing a six-row table whose headline
   number was its own hardcoded fallback. Quiet by design: it is provenance,
   not a claim. */
.coverageLine {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .editorialCard {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }
  .editorialCard .sectionHead {
    margin-bottom: var(--section-head-gap);
  }
}

.resultsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0 0 1rem;
}

.resultsHeaderActions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.sortSelect {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
}

.activeFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.filterChip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.chipRemove {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1;
  transition: color var(--transition, 0.2s ease);
}

.chipRemove:hover {
  color: var(--text-primary);
}

.loadMoreSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 0;
}

.loadMoreCount {
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
}

.loadMoreButton {
  min-width: 160px;
}
/* =========================================================
   Next admissions deadline

   One bar, replacing four equally-weighted countdown cards. Those gave the
   page's largest numeral to things up to 245 days away, and two of the four
   counted down to offer days — dates you receive something on, which cannot
   be missed. The headline is the next real deadline; the rest stay on the
   page as one supporting line, so no fact was lost, only its weight.
   ========================================================= */

.admissions {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.nextDeadline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  position: relative;
  overflow: hidden;
  padding: 1.15rem 1.5rem 1.15rem 1.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* A brand rule down the leading edge — the same device the countdown cards
   used along their top edge, kept so the band still reads as admissions. */
.nextDeadline::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--brand);
}

.nextDeadline:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-medium);
}

.nextDeadlineBody {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.nextDeadlineKicker {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-strong);
}

.nextDeadlineTitle {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
}

.nextDeadlineDate {
  font-size: var(--step--1);
  color: var(--text-muted);
}

.nextDeadlineCount {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-shrink: 0;
}

.nextDeadlineDays {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--brand-strong);
}

.nextDeadlineUnit {
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* Inside a fortnight the count changes hue rather than size, so urgency is
   legible without the bar growing. Terracotta is the status hue, not the
   action hue — this is a state, not a button. */
.nextDeadlineUrgent .nextDeadlineDays {
  color: var(--status-below);
}

.laterDates {
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.laterDatesLink {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.laterDatesLink:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .nextDeadline {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.1rem 1rem 1.35rem;
  }
  .nextDeadlineCount {
    align-items: baseline;
  }
}