/* ── School page (2026-08 redesign) ───────────────────────────────────────────
   Scoped under .psf-school-single throughout. The content owns generic class
   names — an unscoped `.note` rule lands on <span class="note">Yes</span> value
   chips and destroys the General School Information section. */

.psf-school-single { background: var(--psf-paper); }

/* Hero */
.psf-school-single .psf-school-hero { background: var(--psf-surface-2); border-bottom: 1px solid var(--psf-rule-warm); }
/* padding-top/padding-bottom LONGHANDS, never the shorthand: this element also
   carries .psf-container, whose `padding: 0 24px` is the page's only horizontal
   gutter. A shorthand here re-declares all four sides and zeroes that gutter, so
   the hero ran edge-to-edge and prose touched both screen edges below ~1248px.
   Longhands leave the gutter owned by .psf-container alone — one source of
   truth, and main.css's own .psf-school-layout (line ~989) already does this. */
.psf-school-single .psf-school-hero__inner { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; padding-top: 34px; padding-bottom: 30px; }
.psf-school-single .psf-school-hero__info { display: flex; align-items: center; gap: 20px; min-width: 0; flex: 1 1 320px; }
.psf-school-single .psf-school-hero__logo { flex-shrink: 0; }
.psf-school-single .psf-school-hero__title {
  font-family: var(--psf-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.04; letter-spacing: -.015em;
  color: var(--psf-ink); text-wrap: balance; margin: 0 0 6px;
}
.psf-school-single .psf-school-hero__cta { flex: 0 0 auto; margin-left: auto; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.psf-school-single .psf-deadline { font-size: 13px; color: var(--psf-text-muted); }
.psf-school-single .psf-deadline b { color: var(--psf-text); font-weight: 600; }

/* Signature strip */
.psf-school-single .psf-sits { background: var(--psf-paper); border-bottom: 1px solid var(--psf-rule-warm); padding: 30px 0 34px; }
.psf-school-single .psf-sits__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.psf-school-single .psf-sits__title { font-family: var(--psf-display); font-stretch: 108%; font-weight: 700; font-size: 19px; color: var(--psf-ink); margin: 0; }
.psf-school-single .psf-sits__note { font-size: 12.5px; color: var(--psf-text-muted); margin: 0; }
/* The strip paints its dividers by showing 1px of the container's background
   through the gaps, so an empty cell is not blank — it is a grey panel. The
   number of cells must therefore equal the number of cards ACTUALLY emitted,
   and that count varies: 65 of 147 pages omit the GPA card (the term is the
   literal string "None"), others omit class size or NAPLEX, so 69 pages carry
   3 cards or fewer. repeat(4, 1fr) left the 4th slot showing through.
   repeat(auto-fit, minmax(0, 1fr)) was measured and does fix the DESKTOP
   symptom — Chrome lays down ~W/2 tracks and collapses the empty ones, so 3
   cards give 3 equal cells and no hole — but it cannot express this strip's
   4/2/1 ladder. Applied at every width it puts all 3 cards on ONE row: 238.7px
   each at 768px and 107.7px each at 375px, under a 33px numeral. Keeping the
   media queries' fixed track counts instead just moves the hole down: with
   repeat(2, 1fr) the 3rd card still leaves 359.5px of background at 768px and
   425.5px at 900px (measured).
   Flex with flex-grow is what main.css already uses for exactly this reason on
   .psf-school-facts__grid: whatever the count, the last row's items grow to
   fill the row, so no row can end early and expose the background. The
   percentage basis is what picks the per-row count — 22% -> 4, and see the
   media queries below for 2 and 1. */
.psf-school-single .psf-metrics { display: flex; flex-wrap: wrap; gap: 1px; background: var(--psf-rule-warm); border: 1px solid var(--psf-rule-warm); border-radius: 11px; overflow: hidden; }
.psf-school-single .psf-metric { flex: 1 1 22%; min-width: 0; background: var(--psf-surface-2); padding: 17px 18px 15px; display: flex; flex-direction: column; gap: 9px; }
.psf-school-single .psf-metric__label { font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--psf-text-muted); }
.psf-school-single .psf-metric__val { font-family: var(--psf-display); font-stretch: 106%; font-weight: 800; font-size: 33px; line-height: 1; color: var(--psf-ink); }
.psf-school-single .psf-metric__read { font-size: 12.5px; line-height: 1.45; color: var(--psf-text-muted); margin: 0; }
.psf-school-single .psf-metric__read b { color: var(--psf-text); font-weight: 650; }

/* Rug plot */
.psf-school-single .psf-rug { display: block; width: 100%; height: 26px; overflow: visible; }
.psf-school-single .psf-rug .psf-tick { stroke: var(--psf-rug); stroke-width: 1.1; }
.psf-school-single .psf-rug .psf-me { stroke: var(--psf-gold-bright); stroke-width: 3.4; stroke-linecap: round; }
.psf-school-single .psf-rug .psf-medot { fill: var(--psf-gold-bright); }
.psf-school-single .psf-rug .psf-axis { stroke: var(--psf-rule-warm); stroke-width: 1; }
.psf-school-single .psf-rug .psf-cap { fill: var(--psf-text-muted); font-size: 9.5px; font-weight: 600; }

/* NAPLEX bars */
.psf-school-single .psf-naplex-legend { font-size: 12px; color: var(--psf-text-muted); display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 6px; }
.psf-school-single .psf-naplex-legend span { display: flex; align-items: center; gap: 6px; }
.psf-school-single .psf-swatch { width: 11px; height: 11px; border-radius: 2px; background: var(--psf-fill); display: inline-block; }
.psf-school-single .psf-swatch--nat { width: 2px; height: 13px; border-radius: 0; background: var(--psf-gold-bright); }
.psf-school-single .psf-naplex { display: flex; flex-direction: column; gap: 3px; margin: 0 0 12px; }
.psf-school-single .psf-nrow { display: grid; grid-template-columns: 52px minmax(0, 1fr) 96px; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--psf-rule-warm); }
.psf-school-single .psf-nrow:first-child { border-top: none; }
.psf-school-single .psf-nyear { font-size: 13px; font-weight: 700; color: var(--psf-text-muted); }
.psf-school-single .psf-nbar { position: relative; height: 22px; background: linear-gradient(var(--psf-rule-warm), var(--psf-rule-warm)) no-repeat left center / 100% 1px; }
.psf-school-single .psf-nfill { position: absolute; top: 4px; height: 14px; left: 0; background: var(--psf-fill); border-radius: 2px; }
.psf-school-single .psf-nnat { position: absolute; top: 0; height: 22px; width: 2px; background: var(--psf-gold-bright); }
.psf-school-single .psf-nval { font-size: 14px; font-weight: 700; color: var(--psf-ink); text-align: right; }
.psf-school-single .psf-nval small { display: block; font-size: 11px; font-weight: 600; color: var(--psf-text-muted); }

/* Facts block */
.psf-school-single .psf-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 1px; background: var(--psf-rule-warm); border: 1px solid var(--psf-rule-warm); border-radius: 10px; overflow: hidden; margin: 0 0 22px; }
.psf-school-single .psf-facts > div { background: var(--psf-surface-2); padding: 12px 15px; display: flex; flex-direction: column; gap: 3px; }
.psf-school-single .psf-facts dt { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--psf-text-muted); }
.psf-school-single .psf-facts dd { margin: 0; font-size: 17px; font-weight: 700; color: var(--psf-ink); font-family: var(--psf-display); font-stretch: 104%; }

/* Layout — minmax(0,1fr), NOT 1fr: plain 1fr has an auto minimum and one long
   URL in the content stretches the track past the viewport.

   Track 1 (232px) is the sticky TOC rail, track 2 is the content. The article
   comes FIRST in the DOM, so grid AUTO-placement would put the article in the
   232px rail and the sidebar in the wide track. Placement is therefore
   EXPLICIT rather than fixed by reordering the DOM: explicit columns also
   render correctly during the deploy window, when the old (article-first)
   template is briefly live against this stylesheet.

   grid-row: 1 is NOT redundant. Sparse auto-placement walks a cursor forward
   only: the article (column 2) is placed first and leaves the cursor in
   column 2, then the sidebar asks for column 1, which is BEHIND the cursor,
   so the algorithm drops to a new row rather than stepping back. Measured
   with columns alone: the grid resolved to two rows (6515px + 770px) and the
   sidebar rendered 6.5k pixels BELOW the article — correct widths, useless
   layout. Pinning both to row 1 is what actually puts them side by side. */
.psf-school-single .psf-school-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 44px; padding-top: 38px; padding-bottom: 56px; align-items: start; }
.psf-school-single .psf-entry-content { min-width: 0; grid-column: 2; grid-row: 1; }
.psf-school-single .psf-school-sidebar { grid-column: 1; grid-row: 1; }

/* Content — headings, prose, tables, marks, map, FAQ */
.psf-school-single .psf-entry-content h2 { font-family: var(--psf-display); font-stretch: 110%; font-weight: 750; font-size: 25px; line-height: 1.15; letter-spacing: -.014em; color: var(--psf-ink); margin: 44px 0 10px; padding-top: 26px; border-top: 1px solid var(--psf-rule-warm); text-wrap: balance; }
.psf-school-single .psf-entry-content > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.psf-school-single .psf-entry-content h3 { font-family: var(--psf-display); font-stretch: 104%; font-weight: 700; font-size: 17.5px; line-height: 1.25; color: var(--psf-ink); margin: 28px 0 8px; }
.psf-school-single .psf-entry-content p { margin: 0 0 14px; max-width: 68ch; line-height: 1.68; }
.psf-school-single .psf-entry-content p,
.psf-school-single .psf-entry-content li,
.psf-school-single .psf-entry-content td { overflow-wrap: anywhere; }

/* 112 of 147 pages carry a hardcoded <iframe width="1431">. Only WP Rocket's
   inlined critical CSS currently stops those blowing out the track — a cache
   artifact, not a rule this stylesheet may depend on. */
.psf-school-single .psf-entry-content iframe { max-width: 100%; }

.psf-school-single .psf-tablewrap { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--psf-rule-warm); border-radius: 10px; }
.psf-school-single .psf-tablewrap table { width: 100%; border-collapse: collapse; font-size: 14px; }
.psf-school-single .psf-tablewrap th { background: var(--psf-fill); color: var(--psf-on-fill); text-align: left; font-size: 12px; font-weight: 650; padding: 10px 14px; }
.psf-school-single .psf-tablewrap td { padding: 10px 14px; border-top: 1px solid var(--psf-rule-warm); vertical-align: top; }

.psf-school-single .psf-entry-content .check-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--psf-rule-warm); border: 1px solid var(--psf-rule-warm); border-radius: 10px; overflow: hidden; }
.psf-school-single .psf-entry-content .check-list li { background: var(--psf-surface-2); padding: 11px 14px; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; margin: 0; }
.psf-school-single .psf-mark { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; margin-top: 2px; }
.psf-school-single .psf-mark--y { background: var(--psf-fill); color: var(--psf-on-fill); }
.psf-school-single .psf-mark--n { background: transparent; border: 1.5px solid var(--psf-rule-warm); color: var(--psf-text-muted); }
.psf-school-single .psf-mark--i { background: var(--psf-rule-warm); color: var(--psf-text-muted); }

/* Content-owned .note chips — scoped so the value badges keep working */
.psf-school-single .psf-entry-content .note { display: inline-block; background: color-mix(in srgb, var(--psf-gold-bright) 20%, transparent); border: 1px solid color-mix(in srgb, var(--psf-gold-bright) 45%, transparent); color: var(--psf-text); font-size: 13px; font-weight: 650; padding: 1px 8px; border-radius: 5px; }
.psf-school-single .psf-entry-content p:has(> .note) { line-height: 2.1; max-width: 74ch; }

.psf-school-single .psf-map-caption { font-size: 13.5px; color: var(--psf-text-muted); margin: 0 0 10px; }
.psf-school-single .psf-map-caption b { color: var(--psf-text); font-weight: 600; }

.psf-school-single .psf-faq { margin: 44px 0 0; padding-top: 26px; border-top: 1px solid var(--psf-rule-warm); }
.psf-school-single .psf-entry-content .psf-faq h2 { margin: 0 0 14px; padding-top: 0; border-top: none; }
.psf-school-single .psf-faq h3 { position: relative; padding: 20px 0 6px 30px; margin: 0; border-top: 1px solid var(--psf-rule-warm); font-family: var(--psf-font); font-size: 16px; font-weight: 650; color: var(--psf-text); }
.psf-school-single .psf-faq h3:first-of-type { border-top: none; padding-top: 4px; }
.psf-school-single .psf-faq h3::before { content: "?"; position: absolute; left: 0; top: 19px; width: 20px; height: 20px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--psf-fill); background: var(--psf-gold-bright); border-radius: 5px; }
.psf-school-single .psf-faq h3:first-of-type::before { top: 3px; }
.psf-school-single .psf-faq p { padding: 0 0 16px 30px; margin: 0; font-size: 15px; color: var(--psf-text-muted); max-width: 66ch; }

/* TOC */
.psf-school-single .psf-toc { position: sticky; top: 20px; }
.psf-school-single .psf-toc__title { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--psf-text-muted); margin: 0 0 10px; }
.psf-school-single .psf-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--psf-rule-warm); }
.psf-school-single .psf-toc a { display: block; padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: 13.5px; color: var(--psf-text-muted); text-decoration: none; }
.psf-school-single .psf-toc a:hover { color: var(--psf-ink); border-left-color: var(--psf-rule-warm); }
/* No [aria-current] rule: there is no scroll-spy, so nothing legitimately
   carries the attribute. The template used to hardcode it on the first link,
   which told a screen reader the first section was current on every page. */

@media (max-width: 900px) {
  .psf-school-single .psf-school-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  /* Single track now, so BOTH explicit columns must come back to 1 or the
     article is placed in a column the grid no longer has. grid-row must be
     released too: the desktop rules pin both to row 1, and leaving that
     pinned here would stack the TOC and the article in the SAME cell
     instead of one above the other. */
  .psf-school-single .psf-entry-content { grid-column: 1; grid-row: auto; }
  .psf-school-single .psf-school-sidebar { grid-column: 1; grid-row: auto; }   /* inert once display:contents applies below, kept so the reset is complete if that line is ever dropped */
  /* Spec §4.3: the TOC moves above the content below 900px. `order` on the
     TOC alone does nothing — it only ranks the sidebar's own children, and
     the sidebar is a sibling of the article. Flattening the sidebar into the
     grid makes the TOC and the article true siblings, so order applies across
     both. Only the TOC moves up: the related-schools card and the lead widget
     stay below the content rather than burying it. */
  .psf-school-single .psf-school-sidebar { display: contents; }
  .psf-school-single .psf-school-sidebar > * { grid-column: 1; }
  .psf-school-single .psf-school-sidebar > :not(.psf-toc) { order: 1; }
  .psf-school-single .psf-toc { position: static; order: -1; border: 1px solid var(--psf-rule-warm); border-radius: 10px; padding: 14px 16px; background: var(--psf-surface-2); }
  .psf-school-single .psf-metric { flex-basis: 44%; }   /* 2 per row; a 3rd card grows to fill its own row */
  .psf-school-single .psf-entry-content .check-list { grid-template-columns: 1fr; }
  .psf-school-single .psf-school-hero__cta { margin-left: 0; flex: 1 1 100%; min-width: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
}
@media (max-width: 560px) {
  .psf-school-single .psf-metric { flex-basis: 100%; }  /* 1 per row */
  .psf-school-single .psf-nrow { grid-template-columns: 44px minmax(0, 1fr) 78px; gap: 10px; }
}

/* Phone hero. Below ~480px the side-by-side logo/title arrangement stops
   working, and four separate things go wrong at once. Measured at 393px:

   1. __info reserves 80px for the logo plus a 20px gap, leaving the title a
      245px column, so "University of California, Irvine" broke into three
      ragged lines (191/155/85px — the last barely a third of the measure).
   2. The meta row wrapped, and since `gap: 20px` sets the ROW gap too,
      "4-year PharmD" landed 42px below its siblings as a stranded orphan.
   3. align-items:center then centred the 80px logo against a 158px-tall text
      block, so the logo floated at mid-height and nothing shared an edge.
   4. The 900px rule makes __cta a row, but the button (179px) and the deadline
      (200px) cannot fit one at this width, so it wrapped into a stack it was
      never styled for.

   Stacking the logo hands the title the full 345px: three ragged lines become
   two balanced ones (177/229) and the meta collapses to one 22px row from
   64.8px. Verified at 320px as well, and against the longest names in the
   corpus (Philadelphia College of Osteopathic Medicine, Massachusetts College
   of Pharmacy and Health Sciences) — no horizontal overflow at either width.

   This block must stay AFTER the 900px block: same specificity, so the __cta
   direction is decided by source order. */
@media (max-width: 480px) {
  /* main.css gives .psf-school-hero `padding: 40px 0` and this file gives
     __inner another 34/30, so the hero carried ~65px of dead space above and
     below its content on a phone. Zero the outer one and let __inner own the
     vertical padding — the same one-source-of-truth rule the gutter follows
     at the top of this file. */
  .psf-school-single .psf-school-hero { padding-top: 0; padding-bottom: 0; }
  .psf-school-single .psf-school-hero__inner { gap: 18px; padding-top: 26px; padding-bottom: 26px; }

  .psf-school-single .psf-school-hero__info { display: block; }
  .psf-school-single .psf-school-hero__logo { margin: 0 0 14px; }
  .psf-school-single .psf-school-hero__logo img { width: 60px; height: 60px; }
  .psf-school-single .psf-school-hero__title { font-size: 26px; line-height: 1.08; margin-bottom: 8px; }

  /* Separators, because three unpunctuated fragments on one line read as three
     stray labels rather than one line of detail. ::after on all but the last,
     never ::before on all but the first: the meta still wraps where a long
     city meets the direct-entry label ("Fort Lauderdale, FL / Public /
     Direct-entry PharmD (6 or 7 years)"), and a leading separator would then
     open the second line with a floating dot.
     margin-left is 2px, not 8px: main.css sets `display: flex; gap: 6px` on
     these spans, so the ::after is a flex item and already inherits 6px of
     lead — 2px brings it to 8px, matching the 8px column gap that follows. */
  .psf-school-single .psf-school-hero__meta { gap: 4px 8px; }
  .psf-school-single .psf-school-hero__meta span:not(:last-child)::after {
    content: "\00B7"; margin-left: 2px; opacity: .5;
  }

  .psf-school-single .psf-school-hero__cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .psf-school-single .psf-school-hero__cta .psf-btn { width: 100%; justify-content: center; }
}