/* /rank, the page a student lands on the week their result comes out.
   Design tokens only, scoped to .page-rank.

   Borrows the surface strategy from /apply for the same reason documented
   there: --navy is a SEMANTIC role that the dark theme remaps to a near white
   foreground, so using it as a surface produces a band that fades to near black
   under white headline text. Stage colours come from the raw palette, which is
   never redefined per theme. */
body.page-rank {
  --rk-line: rgba(19, 35, 75, .24);
  --rk-stage-from: var(--ice-palette-navy-800, #13234b);
  --rk-stage-to: var(--ice-palette-navy-900, #0c1a38);
  --rk-header-bg: var(--ice-palette-navy-900, #0c1a38);
  --rk-accent: var(--terracotta, #d9702c);
}

html[data-theme='dark'] body.page-rank {
  --rk-line: var(--ice-color-border, rgba(127, 127, 127, .42));
  --rk-stage-from: var(--ice-palette-graphite-800, #313338);
  --rk-stage-to: var(--ice-palette-graphite-950, #1e1f22);
  --rk-header-bg: var(--ice-palette-graphite-900, #232428);
}

/* The shared header floats transparently over a dark hero image. This page has
   no hero image, so it goes into normal flow as a solid bar. Same fix and same
   reason as /apply and /notices. */
body.page-rank header.site {
  position: relative;
  background: var(--rk-header-bg);
  border-bottom: 1px solid var(--header-hair, rgba(255, 255, 255, .14));
}
body.page-rank header.site::before { content: none; }

/* ── Stage ─────────────────────────────────────────────────────────────── */
.rk-stage {
  background: linear-gradient(160deg, var(--rk-stage-from), var(--rk-stage-to));
  color: #fff;
  padding: clamp(2.25rem, 5vw, 3.75rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.rk-stage__inner { max-width: 46rem; }

.rk-crumb { font-size: .8125rem; color: rgba(255, 255, 255, .68); margin-bottom: 1.25rem; }
.rk-crumb a { color: rgba(255, 255, 255, .84); text-decoration: none; }
.rk-crumb a:hover { text-decoration: underline; }
.rk-crumb span[aria-hidden] { margin: 0 .5ch; opacity: .6; }

.rk-eyebrow {
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rk-accent); margin: 0 0 .75rem;
}

/* Scoped through `body.page-rank main` on purpose. The shared rule
   `.page-course main h1, h2, h3, h4 { color: var(--course-ink) }` has
   specificity (0,2,2), so a bare `.rk-stage h1` (0,1,1) loses to it and the
   headline renders navy on navy: invisible, and invisible in a way that looks
   like nothing rendered at all. Same class of trap as the /courses type
   hierarchy. Do not lower this selector. */
body.page-rank main .rk-stage h1 {
  color: #fff;
  font-size: clamp(1.875rem, 5.2vw, 3rem);
  line-height: 1.08;
  margin: 0 0 1rem;
}
.rk-lede {
  color: rgba(255, 255, 255, .84);
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  line-height: 1.65;
  margin: 0 0 2rem;
  max-width: 35rem;
}

/* ── Lookup ────────────────────────────────────────────────────────────── */
.rk-form { margin: 0 0 1.5rem; }
.rk-form__label {
  display: block; font-size: .875rem; font-weight: 600;
  color: rgba(255, 255, 255, .9); margin-bottom: .5rem;
}
.rk-form__row { display: flex; gap: .625rem; flex-wrap: wrap; }
.rk-form__row input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: .875rem 1rem;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: #fff;
  border: 2px solid transparent;
  border-radius: var(--r-s, 6px);
}
.rk-form__row input:focus-visible { outline: 3px solid var(--rk-accent); outline-offset: 2px; }
.rk-form__row input[aria-invalid='true'] { border-color: var(--crimson, #c41e3a); }
.rk-form__row .btn { flex: 0 0 auto; }
.rk-form small {
  display: block; margin-top: .5rem;
  font-size: .8125rem; color: rgba(255, 255, 255, .64);
}

/* ── The answer ────────────────────────────────────────────────────────── */
.rk-panel {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-m, 10px);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.rk-panel__status {
  margin: 0; font-size: .9375rem; line-height: 1.6;
  color: rgba(255, 255, 255, .88);
}
.rk-panel[data-state='found'] .rk-panel__status {
  font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255, 255, 255, .58); margin-bottom: 1rem;
}

.rk-card__hail {
  margin: 0 0 .125rem;
  font-size: .9375rem;
  color: rgba(255, 255, 255, .72);
}
.rk-card__name {
  margin: 0 0 1rem;
  font-size: clamp(1.375rem, 3.6vw, 1.875rem);
  font-weight: 700; line-height: 1.2; color: #fff;
}
.rk-card__meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem; margin: 0 0 1.25rem;
}
.rk-card__meta dt {
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55); margin-bottom: .25rem;
}
.rk-card__meta dd {
  margin: 0; font-size: 1rem; font-weight: 600; color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Position on the published list. Deliberately a quiet bar and not a gauge,
   because a gauge invites a student to read it as a score. */
.rk-meter {
  --rk-fill: 0%;
  height: 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  position: relative; overflow: hidden;
  margin-bottom: .875rem;
}
.rk-meter::before {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: var(--rk-fill);
  background: var(--rk-accent);
}
.rk-card__reassure {
  margin: 0 0 1.25rem;
  font-size: .9375rem; line-height: 1.65;
  color: rgba(255, 255, 255, .82);
}

.rk-card__flag {
  margin: 0 0 1.25rem; padding: .875rem 1rem;
  background: rgba(217, 112, 44, .16);
  border-left: 3px solid var(--rk-accent);
  border-radius: 0 var(--r-s, 6px) var(--r-s, 6px) 0;
  font-size: .875rem; line-height: 1.6; color: rgba(255, 255, 255, .92);
}
.rk-card__actions { display: flex; flex-wrap: wrap; gap: .625rem; }
/* .btn sets display, which outranks [hidden]. Same trap the /apply stepper hit.
   Nothing here toggles a .btn yet; this keeps it true if something later does. */
.rk-card__actions .btn[hidden] { display: none; }
.rk-card__actions .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .38); }

.rk-source {
  margin: 0; font-size: .8125rem; line-height: 1.6;
  color: rgba(255, 255, 255, .58); max-width: 35rem;
}
.rk-source a { color: rgba(255, 255, 255, .82); }

/* ── Reassurance ───────────────────────────────────────────────────────── */
.rk-calm { padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
.rk-calm__card {
  max-width: 46rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--rk-accent);
  border-radius: var(--r-m, 10px);
}
.rk-calm__card h2 { margin: .5rem 0 1rem; font-size: clamp(1.375rem, 3.4vw, 1.875rem); }
.rk-calm__card p { margin: 0 0 .875rem; line-height: 1.7; color: var(--slate); }
.rk-calm__sign { margin-bottom: 0 !important; font-weight: 500; }

/* ── What we do for you ────────────────────────────────────────────────── */
.rk-hold { padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
.rk-hold__grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.rk-hold__grid article {
  padding: 1.25rem;
  background: var(--card);
  border-top: 2px solid var(--navy);
}
.rk-hold__grid h3 { margin: 0 0 .5rem; font-size: 1.0625rem; line-height: 1.35; }
.rk-hold__grid p { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--slate); }

/* ── The four years ────────────────────────────────────────────────────── */
.rk-life { padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
.rk-life__grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.rk-life__grid figcaption {
  margin-top: .625rem; font-size: .875rem; line-height: 1.6; color: var(--slate);
}
.rk-life__note { margin: 1.5rem 0 0; line-height: 1.7; color: var(--slate); max-width: 42rem; }

/* ── What makes it possible ────────────────────────────────────────────── */
.rk-safe { padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
.rk-safe__list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 1rem; }
.rk-safe__list li {
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-s, 6px);
  background: var(--card);
}
.rk-safe__tag {
  display: inline-block; margin-bottom: .5rem;
  padding: .1875rem .5rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--rk-accent);
  border-radius: 999px;
}
/* Explicit --ink, not inherited. The surrounding section resolves to --slate in
   both themes, so an inherited <b> lands on exactly the same colour as the
   supporting copy beneath it and the label stops reading as a label. Weight
   alone is not enough separation at this size. */
.rk-safe__list b { display: block; margin-bottom: .3125rem; color: var(--ink); }
.rk-safe__list li > span:not(.rk-safe__tag) {
  display: block; font-size: .9375rem; line-height: 1.65; color: var(--slate);
}
.rk-safe__note { margin: 0; line-height: 1.7; color: var(--slate); max-width: 42rem; }

/* ── Timeline ──────────────────────────────────────────────────────────── */
.rk-when { padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
.rk-timeline { list-style: none; margin: 0; padding: 0; }
.rk-timeline li {
  position: relative;
  padding: 0 0 1.75rem 1.75rem;
  border-left: 2px solid var(--hairline);
}
.rk-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.rk-timeline li::before {
  content: ''; position: absolute; left: -7px; top: .3rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--hairline);
}
.rk-timeline li.is-done::before { background: var(--slate); border-color: var(--slate); }
.rk-timeline li.is-next::before { background: var(--rk-accent); border-color: var(--rk-accent); }
.rk-timeline li.is-next { border-left-color: var(--rk-accent); }
/* See the note on .rk-safe__list b: same inheritance, same fix. */
.rk-timeline b { display: block; margin-bottom: .375rem; font-size: 1rem; color: var(--ink); }
.rk-timeline li.is-next b { color: var(--rk-accent); }
.rk-timeline p { margin: 0; line-height: 1.7; color: var(--slate); max-width: 42rem; }
.rk-when__note {
  margin: 1.5rem 0 0; font-size: .875rem; color: var(--slate);
  max-width: 42rem; font-style: italic;
}

/* ── For parents ───────────────────────────────────────────────────────── */
.rk-parents { padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
.rk-parents__card {
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: var(--surface-tint, var(--card));
  border: 1px solid var(--hairline);
  border-radius: var(--r-m, 10px);
}
.rk-parents__card h2 { margin: .5rem 0 1rem; font-size: clamp(1.375rem, 3.4vw, 1.875rem); }
.rk-parents__card p { margin: 0 0 .875rem; line-height: 1.7; color: var(--slate); max-width: 46rem; }
.rk-parents__card .cta-row { margin-top: 1.5rem; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.rk-faq { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }

@media (max-width: 34rem) {
  .rk-card__meta { grid-template-columns: 1fr 1fr; }
  .rk-form__row .btn { width: 100%; }
}