/* /merit-list — ICE's first merit list 2083.
   Design tokens only, scoped to .page-merit-list.

   Surface strategy copied from /rank and /apply, for the 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. Surfaces come from the raw palette, which is never
   redefined per theme; the per-theme block below swaps them deliberately.

   There is no green in this palette and none is invented here. "You have a
   seat" is carried by the navy field and a terracotta flag; "not on this list"
   by paper and a crimson rule. */

body.page-merit-list {
  --mt-line: rgba(19, 35, 75, .18);
  --mt-line-strong: rgba(19, 35, 75, .32);
  --mt-field-from: var(--ice-palette-navy-800, #13234b);
  --mt-field-to: var(--ice-palette-navy-900, #0c1a38);
  --mt-header-bg: var(--ice-palette-navy-900, #0c1a38);
  --mt-accent: var(--ice-palette-terracotta-600, #d9702c);
  --mt-accent-on-field: var(--ice-palette-terracotta-400, #e8915a);
  --mt-paper: var(--ice-color-surface, #fff);
  --mt-paper-muted: var(--ice-color-surface-muted, #f3efe9);
  --mt-zebra: rgba(19, 35, 75, .035);
  --mt-hit: rgba(217, 112, 44, .16);
  --mt-hit-edge: var(--ice-palette-terracotta-600, #d9702c);
  /* Crimson as INK, which is not the same colour as crimson as a fill. The
     dark theme's muted surface is light enough that crimson-600 measures
     2.36:1 on it — the palette carries crimson-200 as the dark-mode text
     tint for exactly this reason (see the note beside it in
     site-20260716b.css). Crimson stays the fill on buttons and the open
     countdown, where the text on top of it is white. */
  --mt-ink-action: var(--ice-color-action, #c41e3a);
  --mt-shell: min(100% - 2rem, var(--ice-container, 1280px));
  /* The site docks a FIXED chrome stack once you scroll — nav + identity ribbon
     + TU ribbon — measured at 150px here and 130px under 900px. Anything that
     sticks or gets scrolled to on this page has to clear it, or it lands
     underneath and is simply invisible. That is what happened to the table's
     own sticky header: it sat at top:0, behind 150px of navy. */
  --mt-dock: 150px;
  /* Sheet ruling. Lighter than --mt-line so a full grid does not turn the pane
     into a cage; the strong one marks the header and the row gutter. */
  --mt-grid: rgba(19, 35, 75, .13);
  --mt-grid-strong: rgba(19, 35, 75, .28);
  --mt-sheet-head: #EFEBE4;
  /* The selected pager pill. It cannot be --mt-field-to: in dark that token is
     graphite-950, which is also the page canvas, so the SELECTED section
     rendered as plain text while the unselected ones kept visible borders —
     the active state reading weaker than the inactive ones. */
  --mt-pager-on: var(--ice-palette-navy-900, #0c1a38);
  --mt-pager-on-ink: #fff;
}

@media (max-width: 900px) {
  body.page-merit-list { --mt-dock: 130px; }
}

html[data-theme='dark'] body.page-merit-list {
  --mt-line: var(--ice-color-border, rgba(127, 127, 127, .32));
  --mt-line-strong: rgba(181, 186, 193, .46);
  --mt-field-from: var(--ice-palette-graphite-800, #313338);
  --mt-field-to: var(--ice-palette-graphite-950, #1e1f22);
  --mt-header-bg: var(--ice-palette-graphite-900, #232428);
  --mt-accent: var(--ice-palette-terracotta-300, #f0a97a);
  --mt-paper: var(--ice-palette-graphite-900, #232428);
  --mt-paper-muted: var(--ice-palette-graphite-850, #2b2d31);
  --mt-zebra: rgba(255, 255, 255, .035);
  --mt-hit: rgba(240, 169, 122, .18);
  --mt-ink-action: var(--ice-palette-crimson-200, #f79aaa);
  --mt-grid: rgba(181, 186, 193, .17);
  --mt-grid-strong: rgba(181, 186, 193, .34);
  --mt-sheet-head: #2B2D31;
  /* Inverted in dark: a dark pill on a dark canvas measured 1.62:1, under the
     3:1 floor for a non-text boundary, so the selected section was barely a
     shape. A light pill with dark ink clears it at 8.5:1 both ways. */
  --mt-pager-on: var(--ice-palette-graphite-200, #dbdee1);
  --mt-pager-on-ink: var(--ice-palette-graphite-950, #1e1f22);
}

/* 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 /rank, /apply and /notices. It also has to stop floating before the
   table's sticky header can sit at top: 0. */
body.page-merit-list header.site {
  position: relative;
  background: var(--mt-header-bg);
  border-bottom: 1px solid var(--header-hair, rgba(255, 255, 255, .14));
}
body.page-merit-list header.site::before { content: none; }

.merit-shell {
  width: var(--mt-shell);
  max-width: 74rem;
  margin-inline: auto;
}

/* ── Hero: headline, search, verdict, facts — in that order ─────────────── */

.merit-hero {
  background: linear-gradient(160deg, var(--mt-field-from), var(--mt-field-to));
  color: #fff;
  padding: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(2rem, 5vw, 3rem);
}
/* The hero shares the page's shell width so its left edge lines up with every
   section below it. Capping the SHELL at 54rem instead centred the hero and
   left it starting ~150px inboard of "What happens next" — two left edges on
   one page. The measure is capped on the contents, which keeps the reading
   width honest without moving the margin. */
.merit-hero h1,
.merit-hero .merit-lede,
.merit-hero .merit-find,
.merit-hero .merit-verdict,
.merit-hero__facts { max-width: 46rem; }

.merit-crumb { font-size: .8125rem; color: rgba(255, 255, 255, .68); margin: 0 0 1rem; }
.merit-crumb a { color: rgba(255, 255, 255, .86); text-decoration: none; }
.merit-crumb a:hover { text-decoration: underline; }
.merit-crumb span[aria-hidden] { margin: 0 .55ch; opacity: .55; }

body.page-merit-list main .merit-hero h1 {
  color: #fff;
  font-size: clamp(1.875rem, 5.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 .625rem;
}

.merit-lede {
  margin: 0 0 1.75rem;
  max-width: 40rem;
  color: rgba(255, 255, 255, .84);
  font-size: clamp(.9375rem, 2.2vw, 1.0625rem);
  line-height: 1.55;
}
.merit-lede strong { color: #fff; font-weight: 600; }

/* One line of facts, under the search rather than over it. The old four-cell
   grid printed 192 twice — names and sanctioned seats are the same number this
   year — and cost a full phone screen above the input. */
.merit-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem 1.25rem;
  margin: 1.5rem 0 0;
  padding-top: 1.125rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .8125rem;
  color: rgba(255, 255, 255, .66);
}
.merit-hero__facts b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

/* ── The search ─────────────────────────────────────────────────────────── */

.merit-find { margin: 0; }
/* A plain, sentence-case instruction that names the action — not an uppercase
   eyebrow. The Nepali runs alongside for the parent reading over a shoulder. */
.merit-find__label {
  display: block;
  margin: 0 0 .625rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
}
.merit-find__ne {
  display: inline-block;
  margin-left: .45rem;
  font-size: .95em;
  font-weight: 600;
  color: var(--mt-accent-on-field);
}
.merit-find__row { display: flex; flex-wrap: wrap; gap: .625rem; align-items: stretch; }

/* The box: a magnifier icon INSIDE the field says "search here" to a reader who
   would not read a bare input as one. */
.merit-find__box {
  flex: 1 1 17rem;
  min-width: 0;
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid #fff;
  border-radius: var(--ice-radius-control, 4px);
}
.merit-find__box:focus-within { outline: 3px solid var(--mt-accent-on-field); outline-offset: 2px; }
.merit-find__icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-left: .875rem;
  fill: none;
  stroke: #8a8f98;
  stroke-width: 2;
  stroke-linecap: round;
}
.merit-find__box input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 56px;
  padding: .75rem .625rem;
  font-size: 1.1875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
  color: var(--ice-palette-ink-900, #131722);
  background: transparent;
  border: 0;
}
.merit-find__box input:focus { outline: none; }
.merit-find__box input::placeholder { color: #8a8f98; }

.merit-find__clear {
  flex: none;
  align-self: center;
  margin-right: .375rem;
  padding: .5rem .75rem;
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  color: #5a6478;
  background: var(--mt-paper-muted, #f3efe9);
  border: 0;
  border-radius: var(--ice-radius-control, 4px);
  cursor: pointer;
}
.merit-find__clear:hover { color: #131722; background: #e7e1d6; }

/* A real, filled button to press. Filtering is live, but a parent needs
   something obvious to tap, and it declares the box is a search. */
.merit-find__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 56px;
  padding: 0 1.375rem;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: var(--ice-color-action, #c41e3a);
  border: 2px solid var(--ice-color-action, #c41e3a);
  border-radius: var(--ice-radius-control, 4px);
  box-shadow: 0 6px 16px rgba(196, 30, 58, .34);
}
.merit-find__go svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.merit-find__go:hover { background: var(--ice-color-action-hover, #a81830); border-color: var(--ice-color-action-hover, #a81830); }
.merit-find__go:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.merit-find__hint {
  margin: .75rem 0 0;
  max-width: 44rem;
  font-size: .875rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .82);
}

/* ── The verdict ────────────────────────────────────────────────────────── */

.merit-verdict { margin-top: 1.5rem; }
.merit-verdict__card--in { border: 1px solid rgba(255, 255, 255, .22); }

/* Control radius, not surface radius, on anything carrying the 3px accent rule.
   A 3px edge curving through an 8px arc is the clash the Impeccable hook names,
   and the shipped precedent for this pattern — `.fee-cards .fee-card`, 1px all
   round with a 3px top accent — already pairs it with `--r-s` (4px). All three
   verdict states take it together: two states of one component must not round
   differently just because only two of them carry the accent. */
.merit-verdict__card {
  border-radius: var(--ice-radius-control, 4px);
  padding: clamp(1.25rem, 3vw, 1.875rem);
}
.merit-verdict__card--in {
  background: linear-gradient(160deg, var(--mt-field-from), var(--mt-field-to));
  color: #fff;
}
/* A rule ACROSS THE TOP, not a rail down the side. The side-tab accent is the
   commonest tell of a generated interface and this section already ruled against
   it once, on the /apply CTA, 2026-08-21. The top rule is the form the degree
   stories, the fee calculator and the tools chrome all use. */
.merit-verdict__card--out,
.merit-verdict__card--many {
  background: var(--mt-paper-muted);
  border: 1px solid var(--mt-line);
  border-top: 3px solid var(--mt-ink-action);
  color: var(--ice-color-text, #131722);
}
.merit-verdict__card--many { border-top-color: var(--mt-accent); }

.merit-verdict__flag {
  margin: 0 0 .625rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* The Nepali half of the headline: no uppercasing or letter-spacing, which
   Devanagari does not take. */
.merit-verdict__flag-ne {
  margin-left: .5rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: .85;
}
.merit-verdict__card--in .merit-verdict__flag { color: var(--mt-accent-on-field); }
.merit-verdict__card--out .merit-verdict__flag { color: var(--mt-ink-action); }
.merit-verdict__card--many .merit-verdict__flag { color: var(--ice-color-text-accent, #9e4814); }

.merit-verdict__name {
  margin: 0 0 1.125rem;
  font-size: clamp(1.375rem, 3.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  font-weight: 600;
}
.merit-verdict__card--out .merit-verdict__name,
.merit-verdict__card--many .merit-verdict__name {
  font-size: clamp(1rem, 2.4vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.55;
}

.merit-verdict__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1px;
  margin: 0 0 1.25rem;
  border: 1px solid rgba(255, 255, 255, .18);
}
.merit-verdict__facts > div {
  background: var(--mt-field-to);
  padding: .75rem .875rem;
  /* outline, not border: it lands in the 1px gap instead of adding to it, so
     neighbouring cells share one hairline and the row keeps its width. */
  outline: 1px solid rgba(255, 255, 255, .18);
}
.merit-verdict__facts dt {
  margin: 0 0 .25rem;
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.merit-verdict__facts dd {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.merit-verdict__next {
  margin: 0 0 1.25rem;
  max-width: 46rem;
  font-size: .9375rem;
  line-height: 1.6;
}
.merit-verdict__card--in .merit-verdict__next { color: rgba(255, 255, 255, .82); }
.merit-verdict__card--out .merit-verdict__next { color: var(--ice-color-text-muted, #5a6478); }

.merit-verdict__actions { display: flex; flex-wrap: wrap; gap: .625rem; }

.merit-verdict__choices { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.merit-verdict__choice {
  display: block;
  width: 100%;
  text-align: left;
  padding: .75rem .875rem;
  font: inherit;
  background: var(--mt-paper);
  border: 1px solid var(--mt-line);
  border-radius: var(--ice-radius-control, 4px);
  cursor: pointer;
}
.merit-verdict__choice:hover { border-color: var(--mt-accent); }
.merit-verdict__choice-name { display: block; font-weight: 600; color: var(--ice-color-text, #131722); }
.merit-verdict__choice-meta {
  display: block;
  margin-top: .1875rem;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--ice-color-text-muted, #5a6478);
}
.merit-verdict__more { margin: .75rem 0 0; font-size: .8125rem; color: var(--ice-color-text-muted, #5a6478); }

/* ── The money, inside the verdict ───────────────────────────────────────────
   Lives on the navy card, so everything here is light-on-dark and none of it
   may reach for a paper token. A rule across the top rather than a rail down
   the side, for the reason recorded above .merit-verdict__card--out. */

.merit-fee {
  margin: 0 0 1.25rem;
  padding: 1.125rem 1.125rem 1rem;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .18);
  border-top: 3px solid var(--mt-accent-on-field);
  border-radius: var(--ice-radius-control, 4px);
}

.merit-fee__label {
  margin: 0 0 .25rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mt-accent-on-field);
}

.merit-fee__amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .625rem;
  margin: 0 0 .3125rem;
}
.merit-fee__figure {
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.merit-fee__unit {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
}

.merit-fee__band {
  margin: 0 0 1rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
}

.merit-fee__wins { list-style: none; margin: 0 0 .875rem; padding: 0; display: grid; gap: .5rem; }
.merit-fee__win {
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) 1fr;
  gap: .25rem .75rem;
  align-items: baseline;
  font-size: .875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}
.merit-fee__win-figure {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
/* The one line that is an argument rather than an inclusion: it is the gap
   between this rank and the bottom of the same table, so it gets the accent. */
.merit-fee__win--cut {
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.merit-fee__win--cut .merit-fee__win-figure { color: var(--mt-accent-on-field); font-size: 1.0625rem; }
.merit-fee__win-text b { font-weight: 700; color: #fff; }

.merit-fee__month {
  margin: 0 0 .875rem;
  font-size: .875rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .82);
}
.merit-fee__emi { color: #fff; text-decoration: underline; text-underline-offset: .18em; }

.merit-fee__clock {
  margin: 0 0 .75rem;
  padding: .625rem .75rem;
  font-size: .875rem;
  line-height: 1.55;
  font-weight: 600;
  color: #fff;
  background: rgba(196, 30, 58, .3);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--ice-radius-control, 4px);
}
.merit-fee__clock.is-open { background: rgba(196, 30, 58, .42); }
.merit-fee__clock.is-closed { background: rgba(255, 255, 255, .1); font-weight: 400; }

.merit-fee__fine {
  margin: 0;
  font-size: .75rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .62);
}
.merit-fee__fine a { color: rgba(255, 255, 255, .86); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

/* Big enough to hit, and FILLED so it reads as a button. A transparent outline
   is not recognised as clickable by this audience; every secondary action is a
   filled light button, every primary a filled crimson one, both with a hair of
   depth so they look pressable. */
.merit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .75rem 1.25rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--ice-radius-control, 4px);
  color: var(--ice-color-text, #131722);
  background: var(--mt-paper-muted, #f3efe9);
  border: 1.5px solid var(--mt-line-strong);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
.merit-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.merit-btn:not(.merit-btn--solid):hover { background: #e7e1d6; border-color: var(--mt-accent); }
.merit-btn:active { transform: translateY(1px); box-shadow: none; }
.merit-btn--solid {
  min-height: 52px;
  color: #fff;
  background: var(--ice-color-action, #c41e3a);
  border-color: var(--ice-color-action, #c41e3a);
  box-shadow: 0 6px 16px rgba(196, 30, 58, .3);
}
.merit-btn--solid:hover { background: var(--ice-color-action-hover, #a81830); border-color: var(--ice-color-action-hover, #a81830); }

/* Per-surface secondary-button contrast: translucent-white on the navy verdict
   card, plain white on the beige cards, so the button never disappears into the
   surface it sits on. */
.merit-verdict__card--in .merit-btn:not(.merit-btn--solid) {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .42);
  color: #fff;
  box-shadow: none;
}
.merit-verdict__card--in .merit-btn:not(.merit-btn--solid):hover { background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .6); }
.merit-verdict__card--out .merit-btn:not(.merit-btn--solid),
.merit-verdict__card--many .merit-btn:not(.merit-btn--solid) { background: var(--mt-paper); }

/* ── What happens next ──────────────────────────────────────────────────── */

.merit-when { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.merit-when__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}
body.page-merit-list main .merit-when h2,
body.page-merit-list main .merit-admit h2,
body.page-merit-list main .merit-fees h2,
body.page-merit-list main .merit-programs h2,
body.page-merit-list main .merit-list-section h2,
body.page-merit-list main .merit-notes h2,
body.page-merit-list main .merit-cta h2 {
  margin: 0;
  font-size: clamp(1.375rem, 3.4vw, 2rem);
  line-height: 1.18;
  letter-spacing: -.015em;
}

.merit-countdown {
  margin: 0;
  padding: .5rem .875rem;
  font-size: .875rem;
  font-weight: 600;
  border-radius: var(--ice-radius-control, 4px);
  background: var(--mt-paper-muted);
  border: 1px solid var(--mt-line);
  color: var(--ice-color-text, #131722);
}
.merit-countdown.is-open {
  background: var(--ice-color-action, #c41e3a);
  border-color: var(--ice-color-action, #c41e3a);
  color: #fff;
}
.merit-countdown.is-closed { opacity: .72; }

.merit-stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  background: var(--mt-line);
  border: 1px solid var(--mt-line);
}
.merit-stage { background: var(--mt-paper); padding: 1.25rem 1.25rem 1.5rem; }
.merit-stage__when {
  margin: 0 0 .375rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ice-color-text-accent, #9e4814);
}
.merit-stage__date {
  margin: 0 0 .625rem;
  font-size: .9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ice-color-text, #131722);
}
body.page-merit-list main .merit-stage h3 {
  margin: 0 0 .5rem;
  font-size: 1.0625rem;
  line-height: 1.3;
}
.merit-stage p:last-child {
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--ice-color-text-muted, #5a6478);
}
.merit-stage--admit { background: var(--mt-paper-muted); }

.merit-source {
  margin: 1.25rem 0 0;
  max-width: 52rem;
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--ice-color-text-muted, #5a6478);
}

/* ── Programme cards ────────────────────────────────────────────────────── */

.merit-programs { padding: 0 0 clamp(2.5rem, 5vw, 4rem); }
.merit-programs__sub,
.merit-programs__foot {
  max-width: 46rem;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--ice-color-text-muted, #5a6478);
}
.merit-programs__sub { margin: .75rem 0 1.75rem; }
.merit-programs__foot { margin: 1.5rem 0 0; }

.merit-program-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  background: var(--mt-line);
  border: 1px solid var(--mt-line);
}
.merit-program { background: var(--mt-paper); padding: 1.5rem 1.375rem; }
.merit-program__code {
  margin: 0 0 .5rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ice-color-text-accent, #9e4814);
}
body.page-merit-list main .merit-program h3 {
  margin: 0 0 1.125rem;
  font-size: 1.125rem;
  line-height: 1.3;
}
.merit-program h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--mt-line-strong); }
.merit-program h3 a:hover { border-bottom-color: currentColor; }

.merit-program dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .875rem 1rem;
  margin: 0 0 1rem;
}
.merit-program dt {
  margin: 0 0 .1875rem;
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ice-color-text-muted, #5a6478);
}
.merit-program dd {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ice-color-text, #131722);
}
.merit-program__cut dd { color: var(--ice-color-text-accent, #9e4814); font-size: 1.75rem; }
.merit-program__note { margin: 0; font-size: .8125rem; color: var(--ice-color-text-muted, #5a6478); }

/* ── What the rank is worth ─────────────────────────────────────────────────
   The legend for the sheet's last column, and the page's answer to the question
   that follows "am I in?" by about four seconds. Same hairline-grid card set as
   the programme cards above it, so the two read as one system. */

.merit-fees { padding: 0 0 clamp(2.5rem, 5vw, 4rem); }
.merit-fees__sub {
  max-width: 46rem;
  margin: .75rem 0 1.75rem;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--ice-color-text-muted, #5a6478);
}
.merit-fees__sub strong { color: var(--ice-color-text, #131722); }

.merit-band-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  background: var(--mt-line);
  border: 1px solid var(--mt-line);
}
.merit-band { background: var(--mt-paper); padding: 1.375rem 1.25rem; }
/* The top band is the one the page is arguing about, so it carries the accent
   rule — across the top, never down the side. */
.merit-band--top { border-top: 3px solid var(--mt-accent); }

.merit-band__range {
  margin: 0 0 .875rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ice-color-text-accent, #9e4814);
}
.merit-band__count { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 1rem; }
.merit-band__n {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ice-color-text, #131722);
}
.merit-band__of { font-size: .75rem; line-height: 1.35; color: var(--ice-color-text-muted, #5a6478); }

.merit-band__flat { margin: 0; }
.merit-band__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4375rem; }
.merit-band__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .4375rem;
  border-top: 1px solid var(--mt-grid);
}
.merit-band__list li:first-child { padding-top: 0; border-top: 0; }
.merit-band__prog { font-size: .8125rem; color: var(--ice-color-text-muted, #5a6478); }
.merit-band__fee {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ice-color-text, #131722);
}
.merit-band__flat .merit-band__fee { font-size: 1.375rem; }
.merit-band__any {
  display: block;
  margin-top: .1875rem;
  font-size: .75rem;
  color: var(--ice-color-text-muted, #5a6478);
}

.merit-fees__incl { margin: 1.5rem 0 0; }
.merit-fees__incl-title {
  margin: 0 0 .75rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ice-color-text-muted, #5a6478);
}
.merit-fees__incl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  background: var(--mt-line);
  border: 1px solid var(--mt-line);
}
.merit-fees__incl-list li { background: var(--mt-paper); padding: .875rem 1rem; }
.merit-fees__zero {
  display: inline-block;
  margin-right: .5rem;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ice-color-text-accent, #9e4814);
}
.merit-fees__incl-label { font-size: .9375rem; font-weight: 600; color: var(--ice-color-text, #131722); }
.merit-fees__incl-detail {
  display: block;
  margin-top: .25rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--ice-color-text-muted, #5a6478);
}

.merit-fees__basis,
.merit-fees__stamp {
  max-width: 46rem;
  margin: 1.25rem 0 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--ice-color-text-muted, #5a6478);
}
.merit-fees__basis strong { color: var(--ice-color-text, #131722); }
.merit-fees__stamp { margin-top: .625rem; }

/* ── Booking the seat ───────────────────────────────────────────────────────
   Four steps and a slip. The whole section is measured against one claim in the
   copy above it — "about a minute" — so nothing here may need reading twice:
   one number per step, one button per step, and the slip writes the message the
   student would otherwise have to compose themselves. */

.merit-admit {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--mt-paper-muted);
  border-block: 1px solid var(--mt-line);
}
.merit-admit__eyebrow {
  margin: 0 0 .5rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ice-color-text-accent, #9e4814);
}
.merit-admit__sub {
  max-width: 46rem;
  margin: .75rem 0 2rem;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--ice-color-text-muted, #5a6478);
}
.merit-admit__sub strong { color: var(--ice-color-text, #131722); }

/* TWO columns, not four, and the reason is in step 2. Four across gave each
   step a 295px measure, and the payment panel inside the second one broke the
   account number across two lines mid-digit — the exact transcription hazard
   the copy button exists to remove. A payment destination needs room more than
   the flow needs to be one row wide. */
.merit-admit-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: var(--mt-line);
  border: 1px solid var(--mt-line);
}
@media (min-width: 48rem) {
  .merit-admit-steps { grid-template-columns: repeat(2, 1fr); }
}
.merit-admit-step {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0 .875rem;
  background: var(--mt-paper);
  padding: 1.375rem 1.25rem;
}
/* The step that costs money is the one the eye should land on first. */
.merit-admit-step--pay { border-top: 3px solid var(--mt-accent); }

.merit-admit-step__n {
  margin: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mt-pager-on-ink);
  background: var(--mt-pager-on);
  border-radius: 50%;
}
body.page-merit-list main .merit-admit-step h3 { margin: .25rem 0 .5rem; font-size: 1.0625rem; line-height: 1.3; }
.merit-admit-step__body p { margin: 0 0 .625rem; font-size: .875rem; line-height: 1.6; color: var(--ice-color-text-muted, #5a6478); }
.merit-admit-step__body p:last-child { margin-bottom: 0; }
.merit-admit-step__note strong { color: var(--ice-color-text, #131722); }
.merit-admit-step__act { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .875rem !important; }
.merit-admit-step__act .merit-btn { min-height: 44px; padding: .5rem .875rem; font-size: .875rem; }
.merit-admit-step__act .merit-btn--solid { min-height: 44px; }

.merit-pay { margin: 0 0 .875rem; }
.merit-pay__qr { margin: 0 0 .875rem; }
.merit-pay__qr img {
  display: block;
  width: 100%;
  max-width: 13rem;
  height: auto;
  padding: .625rem;
  background: #fff;
  border: 1px solid var(--mt-line-strong);
  border-radius: var(--ice-radius-control, 4px);
}
.merit-pay__qr figcaption { margin-top: .4375rem; font-size: .75rem; color: var(--ice-color-text-muted, #5a6478); }

.merit-pay__who { display: grid; gap: .5rem; margin: 0; }
.merit-pay__who > div { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.merit-pay__who dt {
  margin: 0;
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ice-color-text-muted, #5a6478);
}
.merit-pay__who dd {
  margin: 0;
  font-size: .9375rem;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
  color: var(--ice-color-text, #131722);
}
.merit-pay__remark dd { font-weight: 400; font-size: .8125rem; color: var(--ice-color-text-muted, #5a6478); }

.merit-pay__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; margin: 0 0 .875rem !important; }
.merit-pay__figure {
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ice-color-text, #131722);
}
.merit-pay__unit { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ice-color-text-muted, #5a6478); }

/* The account number is the one string on this page a person retypes by hand,
   so it gets monospace, generous tracking and a copy control. */
/* nowrap is load-bearing: a sixteen-digit account number split across two
   lines is read wrong and typed wrong. It is the one string on this page that
   must never break, so it keeps its own line even if that means the row wraps
   around it. */
.merit-pay__account {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9375rem;
  letter-spacing: .04em;
  white-space: nowrap;
}
.merit-pay__num dd { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }

.merit-copy {
  flex: none;
  min-height: 32px;
  padding: .25rem .625rem;
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--ice-color-text, #131722);
  background: var(--mt-paper-muted);
  border: 1px solid var(--mt-line-strong);
  border-radius: var(--ice-radius-control, 4px);
}
.merit-copy:hover { border-color: var(--mt-accent); }
.merit-copy.is-done { color: #fff; background: var(--ice-color-action, #c41e3a); border-color: var(--ice-color-action, #c41e3a); }

/* Why the account says Janakpur. Not a footnote — it sits directly under the
   name it explains, because that is where the hesitation happens. */
.merit-pay__reassure {
  margin: .875rem 0 0 !important;
  padding: .5rem .625rem;
  font-size: .8125rem !important;
  line-height: 1.55;
  color: var(--ice-color-text, #131722) !important;
  background: var(--mt-paper-muted);
  border: 1px solid var(--mt-line);
  border-radius: var(--ice-radius-control, 4px);
}

.merit-pay--pending { padding: .875rem 1rem; background: var(--mt-paper-muted); border: 1px solid var(--mt-line); border-radius: var(--ice-radius-control, 4px); }
.merit-pay__pending-title {
  margin: 0 0 .5rem !important;
  font-size: 1.0625rem !important;
  font-weight: 700;
  color: var(--ice-color-text, #131722) !important;
}

/* ── The slip ────────────────────────────────────────────────────────────── */

.merit-slip { margin-top: 1.75rem; }
.merit-slip__locked {
  padding: 1.375rem 1.25rem;
  background: var(--mt-paper);
  border: 1px dashed var(--mt-line-strong);
  border-radius: var(--ice-radius-control, 4px);
}
.merit-slip__lock-title {
  margin: 0 0 .5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ice-color-text, #131722);
}
.merit-slip__locked p { margin: 0 0 .625rem; font-size: .875rem; line-height: 1.6; color: var(--ice-color-text-muted, #5a6478); }

/* Open, it is the navy field again — same surface as the verdict card, because
   it is the same student being told the same thing one step further on. */
.merit-slip__open {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: linear-gradient(160deg, var(--mt-field-from), var(--mt-field-to));
  border: 1px solid rgba(255, 255, 255, .22);
  border-top: 3px solid var(--mt-accent-on-field);
  border-radius: var(--ice-radius-control, 4px);
  color: #fff;
}
.merit-slip__flag {
  margin: 0 0 .3125rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mt-accent-on-field);
}
.merit-slip__name {
  margin: 0 0 1.125rem;
  font-size: clamp(1.25rem, 3.2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
}
.merit-slip__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  margin: 0 0 1.125rem;
  border: 1px solid rgba(255, 255, 255, .18);
}
.merit-slip__facts > div {
  background: rgba(0, 0, 0, .22);
  padding: .75rem .875rem;
  outline: 1px solid rgba(255, 255, 255, .18);
}
.merit-slip__facts dt {
  margin: 0 0 .25rem;
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.merit-slip__facts dd {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.merit-slip__how {
  margin: 0 0 1.125rem;
  max-width: 46rem;
  font-size: .875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}
.merit-slip__actions { display: flex; flex-wrap: wrap; gap: .625rem; margin-bottom: 1rem; }
.merit-slip__clock { margin-bottom: 0; }

/* ── The table ──────────────────────────────────────────────────────────── */

.merit-list-section { padding: clamp(1.75rem, 4vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.merit-list__lead {
  margin: .5rem 0 1.5rem;
  max-width: 44rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ice-color-text-muted, #5a6478);
}

/* Programme buttons: big, filled, and they WRAP onto the next line — a control
   is never hidden off the edge of a scroll bar. This is the primary way to
   browse now, so it is the boldest thing in the section. */
.merit-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin: 0 0 1rem;
}
.merit-tab {
  flex: 1 1 8rem;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .625rem 1.125rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--ice-color-text, #131722);
  background: var(--mt-paper);
  border: 1.5px solid var(--mt-line-strong);
  border-radius: var(--ice-radius-control, 4px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
.merit-tab__n {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--ice-color-text-muted, #5a6478);
}
.merit-tab:hover { border-color: var(--mt-accent); }
.merit-tab:active { transform: translateY(1px); }
.merit-tab.is-active {
  color: #fff;
  background: var(--mt-field-to);
  border-color: var(--mt-field-to);
  box-shadow: 0 4px 12px rgba(12, 26, 56, .28);
}
.merit-tab.is-active .merit-tab__n { color: rgba(255, 255, 255, .82); }

.merit-count {
  margin: 0 0 1rem;
  font-size: .9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ice-color-text, #131722);
}
.merit-list__foot { margin: 1.25rem 0 0; }

/* ── The signed sheet ─────────────────────────────────────────────────────
   The scans are the record IOE's procedure asks for. They lead the section
   visually because a parent looking for the letterhead and the seal should not
   have to hunt for them. */

.merit-signed {
  margin: 0 0 1.75rem;
  padding: 1.125rem 1.25rem 1.375rem;
  background: var(--mt-paper);
  border: 1px solid var(--mt-line-strong);
  border-top: 3px solid var(--mt-accent);
  border-radius: var(--ice-radius-control, 4px);
}
.merit-signed__head { max-width: 46rem; }
body.page-merit-list main .merit-signed__head h3 { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
.merit-signed__head p {
  margin: .375rem 0 0;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--ice-color-text-muted, #5a6478);
}

.merit-signed__strip {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin: 1rem 0 0;
  padding: 0;
}

.merit-scan {
  display: block;
  width: 7rem;
  padding: .375rem;
  cursor: pointer;
  background: var(--mt-paper);
  border: 1px solid var(--mt-grid-strong);
  border-radius: var(--ice-radius-control, 4px);
  text-align: left;
}
.merit-scan:hover { border-color: var(--mt-accent); }
.merit-scan:focus-visible { outline: 3px solid var(--mt-accent); outline-offset: 2px; }
.merit-scan img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1237 / 1600;
  object-fit: cover;
  object-position: top center;
  background: #fff;
  border: 1px solid var(--mt-grid);
}
.merit-scan__label {
  display: block;
  margin-top: .375rem;
  line-height: 1.25;
}
.merit-scan__label b {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--ice-color-text, #131722);
}
.merit-scan__label small {
  display: block;
  font-size: .6875rem;
  color: var(--ice-color-text-muted, #5a6478);
}

/* ── The viewer ───────────────────────────────────────────────────────────
   A native <dialog>: Esc closes it, focus is trapped for free, and there is no
   library. Arrow keys page through the four sheets. */

.merit-viewer {
  /* Centred explicitly. The UA centres a dialog with `margin: auto` against its
     own `max-width`, and overriding max-width to `none` — which this needs, to
     go wider than the UA's calc(100% - 6px - 2em) — dropped it against the left
     edge of the viewport. inset:0 plus auto margins puts it back in the middle
     on both axes. */
  inset: 0;
  margin: auto;
  width: min(96vw, 60rem);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: 1px solid var(--mt-grid-strong);
  border-radius: 0;
  background: var(--mt-paper);
  color: var(--ice-color-text, #131722);
  overflow: hidden;
}
.merit-viewer::backdrop { background: rgba(6, 12, 26, .78); }

.merit-viewer__bar {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .625rem .875rem;
  background: var(--mt-sheet-head);
  border-bottom: 1px solid var(--mt-grid-strong);
}
.merit-viewer__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.merit-viewer__acts { display: flex; gap: .5rem; flex: none; }
.merit-viewer__link,
.merit-viewer__close {
  padding: .375rem .75rem;
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  color: var(--ice-color-text, #131722);
  background: var(--mt-paper);
  border: 1px solid var(--mt-grid-strong);
  border-radius: 0;
}
.merit-viewer__link:hover,
.merit-viewer__close:hover { border-color: var(--mt-accent); }

.merit-viewer__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: .75rem;
  background: var(--mt-paper-muted);
  max-height: calc(94vh - 7rem);
  overflow: auto;
}
.merit-viewer__stage img {
  display: block;
  max-width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--mt-grid-strong);
}

.merit-viewer__step {
  position: sticky;
  top: 50%;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--mt-paper);
  border: 1px solid var(--mt-grid-strong);
  border-radius: 0;
  color: var(--ice-color-text, #131722);
  grid-area: 1 / 1;
  justify-self: start;
}
.merit-viewer__step--next { justify-self: end; }
.merit-viewer__step:disabled { opacity: .35; cursor: default; }
.merit-viewer__step span {
  width: .5rem;
  height: .5rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(1px, -1px);
}
.merit-viewer__step--next span { transform: rotate(-135deg) translate(1px, -1px); }
.merit-viewer__stage img { grid-area: 1 / 1; }

.merit-viewer__hint {
  margin: 0;
  padding: .5rem .875rem;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ice-color-text-muted, #5a6478);
  background: var(--mt-sheet-head);
  border-top: 1px solid var(--mt-grid-strong);
}

/* ── The sheet ────────────────────────────────────────────────────────────
   Modelled on a real spreadsheet window, not on a card: one sheet fills the
   view, edge to edge, square-cornered and flat. A grey column band across the
   top, a grey row-number gutter down the left, a hairline on every cell edge,
   and a tab strip underneath naming every sheet in the book.

   Reference captured to artifacts/ref/calc.png (LibreOffice Calc) rather than
   recalled — the anatomy that matters is the band, the gutter, the corner where
   they meet, and the flatness. */

/* ── The vertical list ─────────────────────────────────────────────────────
   One column of section tables. The reader scrolls DOWN — the one gesture every
   phone user already has from Facebook and TikTok — instead of swiping a
   horizontal deck of sheets, which assumed a spreadsheet literacy this audience
   does not have. Going vertical is also what makes a real sticky header
   possible, which the horizontal track could not. */
.merit-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* A reading measure, not the full 1280px shell: at full width the four
     columns hand the name column ~1000px of empty space. */
  max-width: 54rem;
}
.merit-tabs { max-width: 54rem; }

.merit-sheet {
  /* padding:0 is load-bearing: `.merit-sheet` is a <section>, and a global
     section rule otherwise adds 48px of top padding — the empty band that used
     to sit above each programme bar. */
  padding: 0;
  margin: 0;
  scroll-margin-top: calc(var(--mt-dock) + 3.5rem);
  display: block;
  background: var(--mt-paper);
  border: 1px solid var(--mt-line-strong);
  border-radius: var(--ice-radius-control, 4px);
}

/* A bold, STICKY programme label: whichever programme's rows you are scrolling,
   its name stays pinned under the site chrome so you never lose your place. */
.merit-sheet__bar {
  position: sticky;
  top: var(--mt-dock);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 48px;
  padding: .625rem 1rem;
  background: var(--mt-field-to);
  color: #fff;
  border-radius: var(--ice-radius-control, 4px) var(--ice-radius-control, 4px) 0 0;
}
.merit-sheet__bar--wait { background: var(--ice-palette-terracotta-800, #9e4814); }

body.page-merit-list main .merit-sheet__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
.merit-sheet__range {
  flex: none;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .78);
}
.merit-sheet__n { color: #fff; font-weight: 700; }

/* ── The grid ─────────────────────────────────────────────────────────────
   Airy on purpose. The first attempt at this was called congested, and it was:
   .375rem cell padding at 13px. These rows breathe. */

.merit-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
}

.merit-table__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The column band. Not sticky, and it does not need to be: a sheet is sixteen
   rows and fits the view. */
.merit-table thead th {
  /* Sticky, just under the sticky programme bar, so the column names follow you
     down a long section. Vertical scrolling is what makes this possible. */
  position: sticky;
  top: calc(var(--mt-dock) + 48px);
  z-index: 2;
  padding: .625rem .75rem;
  text-align: left;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--mt-sheet-head);
  color: var(--ice-color-text, #131722);
  border-bottom: 2px solid var(--mt-grid-strong);
  border-right: 1px solid var(--mt-grid);
}
.merit-table thead th:last-child { border-right: 0; }
/* The fee header runs to two lines — the amount has to carry its basis in
   words, which is the standing rule for every surface that prints one. Centring
   the band stops the one-line headers beside it from leaving a dead strip. */
.merit-table thead th { vertical-align: middle; }
.merit-table thead th.merit-col-sn { text-align: center; border-right: 1px solid var(--mt-grid-strong); }

.merit-table td {
  padding: .625rem .6875rem;
  font-size: .9375rem;
  line-height: 1.45;
  border-bottom: 1px solid var(--mt-grid);
  border-right: 1px solid var(--mt-grid);
  color: var(--ice-color-text, #131722);
}
.merit-table td:last-child { border-right: 0; }
.merit-table tbody tr:last-child td { border-bottom: 0; }

/* The row-number gutter, banded like the column header — the two meet at a
   corner, which is what makes a grid read as a sheet. */
.merit-col-sn {
  width: 3rem;
  text-align: center;
  font-size: .75rem;
  color: var(--ice-color-text-muted, #5a6478);
}
.merit-table tbody td.merit-col-sn {
  background: var(--mt-sheet-head);
  border-right: 1px solid var(--mt-grid-strong);
  font-variant-numeric: tabular-nums;
}

.merit-col-roll { width: 7.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; }
.merit-col-rank { width: 4.5rem; font-weight: 700; text-align: right; }
.merit-col-name { font-weight: 400; overflow-wrap: break-word; }

/* What the seat costs at that rank.
   Quieter than the name on purpose, and it took a look at the rendered sheet to
   get there: at the name's own weight, in the accent, forty-eight identical
   amounts down one column read as the subject of every row and the student read
   as its label. It is an annotation. The accent is spent on the row the reader
   actually searched for, below. */
.merit-col-fee {
  /* Wide enough for its own HEADER, not just its values. At 8.5rem "FEE AT THIS
     RANK" overflowed a nowrap cell and rendered as "FEE AT THIS RANI" — the
     kind of defect that only shows in a screenshot. */
  width: 11rem;
  text-align: right;
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* `.merit-table td` already sets a colour and outranks a bare class, so the
   quiet ink has to be claimed at the same specificity or the column silently
   keeps the name's own colour — which is exactly what it did on the first pass. */
.merit-table td.merit-col-fee { color: var(--ice-color-text-muted, #5a6478); }
.merit-table thead th.merit-col-fee { text-align: right; }
.merit-col-fee__unit {
  display: block;
  margin-top: .125rem;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--ice-color-text-muted, #5a6478);
}

/* Which band the rank fell in. The quietest column on the sheet — it is the
   REASON for the two figures either side of it, not a figure itself. */
.merit-col-band {
  width: 6.5rem;
  text-align: right;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.merit-table td.merit-col-band { color: var(--ice-color-text-muted, #5a6478); }
.merit-table thead th.merit-col-band { text-align: right; }

/* What the rank took off the same programme's top-band price.
   This is the column that makes the sheet argue rather than merely list: read
   down it and the cost of a worse rank is visible without searching for
   anything. It carries the accent because it is the only cell on the row that
   is a claim rather than a record. */
.merit-col-save {
  width: 9rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.merit-col-save__amount {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--ice-color-text-accent, #9e4814);
}
.merit-col-save__pc {
  display: block;
  margin-top: .0625rem;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--ice-color-text-muted, #5a6478);
}
/* The last band saves nothing against itself. An em dash says "nothing here"
   without the row looking unfinished, and "Rs 0 saved" would be worse than
   both. */
.merit-col-save__none { color: var(--mt-line-strong); }

/* The narrow-screen copy of the same figures. Printed inside the name cell and
   swapped in below 560px, where five columns leave the name about 14px. */
.merit-cell-fee { display: none; }

/* The top band, marked on the row rather than announced in a badge. 19 of the
   192 carry it, and seeing that thin down as you scroll is the honest version
   of scarcity — the same argument #merit-fees makes in words. */
.merit-table tbody tr[data-band='b1'] td.merit-col-fee { color: var(--ice-color-text-accent, #9e4814); font-weight: 700; }

.merit-table tbody tr:hover td { background: var(--mt-hit); }
.merit-table tbody tr:hover td.merit-col-sn { background: var(--mt-hit); color: var(--ice-color-text, #131722); }
.merit-table tbody tr { scroll-margin-top: calc(var(--mt-dock) + 3rem); }

.merit-table tbody tr.is-hit td,
.merit-table tbody tr.is-hit td.merit-col-sn {
  background: var(--mt-hit);
  box-shadow: inset 0 1px 0 var(--mt-hit-edge), inset 0 -1px 0 var(--mt-hit-edge);
}
/* One row on the sheet is the reader's own. That is where the amount is worth
   shouting, and it is the only place on the page a fee is in the accent twice. */
.merit-table tbody tr.is-hit td.merit-col-fee {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--ice-color-text-accent, #9e4814);
}

/* ── The tab strip ────────────────────────────────────────────────────────
   A spreadsheet's sheet tabs: steppers, then every sheet named and one click
   away. It is the gallery — you can see where you are and what comes next
   without swiping to find out. */

.merit-tabs-strip {
  /* Lines up with the sheet, not with the page shell — the strip is the sheet's
     own chrome, the way a spreadsheet's tabs sit under its grid. */
  max-width: 49.625rem;
  margin-inline: auto;
  display: flex;
  align-items: stretch;
  gap: .25rem;
  margin-block: -1px 1.25rem;
  padding: .3125rem;
  background: var(--mt-sheet-head);
  border: 1px solid var(--mt-grid-strong);
}

.merit-tabs-strip__scroll {
  display: flex;
  /* Fades the clipped edge so a half-visible tab looks scrollable. */
  mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
  gap: .1875rem;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-width: 0;
}
.merit-tabs-strip__scroll::-webkit-scrollbar { display: none; }

.merit-tabs-strip__scroll button {
  flex: none;
  padding: .3125rem .625rem;
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  color: var(--ice-color-text-muted, #5a6478);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
}
.merit-tabs-strip__scroll button:hover { color: var(--ice-color-text, #131722); background: var(--mt-paper); }
.merit-tabs-strip__scroll button[aria-selected='true'] {
  background: var(--mt-paper);
  border-color: var(--mt-grid-strong);
  border-bottom-color: var(--mt-paper);
  color: var(--ice-color-text, #131722);
  font-weight: 700;
}

.merit-step--wide {
  /* A boundary, so the tab strip clipping behind it reads as a scroll edge
     rather than as a broken tab. */
  margin-left: .375rem;
  width: auto;
  padding: 0 .75rem;
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
}

.merit-step {
  flex: none;
  width: 1.875rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--mt-paper);
  border: 1px solid var(--mt-grid-strong);
  border-radius: 0;
  color: var(--ice-color-text-muted, #5a6478);
}
.merit-step:hover:not(:disabled) { color: var(--ice-color-text, #131722); }
.merit-step:disabled { opacity: .35; cursor: default; }
/* Chevrons drawn from borders — no glyph standing in for an icon. */
.merit-step span {
  width: .4375rem;
  height: .4375rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
[data-merit-prev] span { transform: rotate(45deg) translate(1px, -1px); }
[data-merit-next] span { transform: rotate(-135deg) translate(1px, -1px); }

.merit-swipe-hint {
  margin: 0 0 .625rem;
  font-size: .75rem;
  color: var(--ice-color-text-muted, #5a6478);
}
@media (hover: hover) and (pointer: fine) {
  .merit-swipe-hint { display: none; }
}



.merit-empty {
  margin: 0;
  padding: 1.5rem;
  font-size: .9375rem;
  line-height: 1.65;
  background: var(--mt-paper-muted);
  border: 1px solid var(--mt-line);
  border-radius: var(--ice-radius-control, 4px);
  color: var(--ice-color-text-muted, #5a6478);
}

/* A class rule with `display` outranks the UA's `[hidden]{display:none}`, so
   this strip stayed on screen permanently — an empty panel offering "Show all
   programmes" when nothing was filtered. Any element on this page that is
   toggled by the `hidden` attribute AND carries its own display needs this. */
.merit-elsewhere[hidden],
.merit-sheet[hidden],
.merit-verdict[hidden] { display: none !important; }

.merit-elsewhere {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  align-items: center;
  margin: 0;
  padding: 1.25rem 1.5rem;
  font-size: .9375rem;
  line-height: 1.6;
  background: var(--mt-paper-muted);
  border: 1px solid var(--mt-line-strong);
  border-radius: var(--ice-radius-control, 4px);
  color: var(--ice-color-text, #131722);
}
.merit-elsewhere .merit-btn { flex: none; color: var(--ice-color-text, #131722); }

/* ── Notes and provenance ───────────────────────────────────────────────── */

.merit-notes { padding: clamp(2.5rem, 5vw, 3.5rem) 0; background: var(--mt-paper-muted); }
.merit-notes p {
  max-width: 46rem;
  margin: 1rem 0 0;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--ice-color-text-muted, #5a6478);
}
.merit-notes strong { color: var(--ice-color-text, #131722); }
.merit-notes__legal { font-size: .8125rem !important; opacity: .85; }



/* ── Closing CTA ────────────────────────────────────────────────────────── */

.merit-cta { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.merit-cta__grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  margin-top: 1.75rem;
  background: var(--mt-line);
  border: 1px solid var(--mt-line);
}
.merit-cta__grid > div { background: var(--mt-paper); padding: 1.75rem 1.5rem; }
body.page-merit-list main .merit-cta h3 { margin: 0 0 .75rem; font-size: 1.1875rem; }
.merit-cta p { margin: 0 0 1.25rem; font-size: .9375rem; line-height: 1.65; color: var(--ice-color-text-muted, #5a6478); }
.merit-cta__links { display: flex; flex-wrap: wrap; gap: .625rem; margin: 0; }
/* The consequence of the deadline, said once, in ink rather than in a banner. */
.merit-cta p.merit-cta__warn {
  padding: .625rem .75rem;
  border: 1px solid var(--mt-line);
  border-top: 3px solid var(--mt-ink-action);
  border-radius: var(--ice-radius-control, 4px);
  background: var(--mt-paper-muted);
  color: var(--ice-color-text, #131722);
  font-weight: 600;
}

/* ── Small screens ──────────────────────────────────────────────────────── */

@media (max-width: 900px) and (min-width: 561px) {
  /* The band column goes first: it explains the two figures either side of it
     rather than adding one, so the sheet survives without it. Its 6.5rem is
     handed to the name, and the saving column keeps its full width — narrowing
     it to 7.5rem clipped its own "SAVED BY RANK" header at 880px. */
  .merit-table .merit-col-band { display: none; }
}

@media (max-width: 560px) {
  /* S.N. is the college's own bookkeeping. On a phone the three columns a
     student actually reads — roll, rank, name — matter more than it. */
  /* S.N. is the college's own bookkeeping. On a phone the three columns a
     student actually reads — roll, rank, name — matter more than it. Table
     layout is `fixed` everywhere now: with `auto`, the browser hands spare
     width to the two short numeric columns in proportion to their content, and
     the names — the longest strings on the row — get what is left. */
  .merit-scan { width: 5.5rem; }
  .merit-toolbar { margin: .75rem 0 .5rem; }
  .merit-tabs button { padding: .375rem .625rem; font-size: .8125rem; }
  .merit-sheet__bar { padding: .4375rem .5rem; gap: .4375rem; }
  body.page-merit-list main .merit-sheet__title { font-size: .8125rem; }
  .merit-sheet__range { font-size: .6875rem; }
  /* Sized so the longest name in the data — "Suraj Narayan Chaudhary", 23
     characters — still sits on ONE line. A spreadsheet has uniform row heights;
     one wrapping cell breaks the grid and costs a row of the sheet. */
  .merit-table td { padding: .5625rem .4375rem; font-size: .8125rem; }
  .merit-table thead th { padding: .5rem .4375rem; font-size: .625rem; }
  .merit-col-sn { width: 2.125rem; font-size: .6875rem; }
  .merit-col-roll { width: 5.5rem; font-size: .6875rem; }
  .merit-col-rank { width: 2.875rem; }
  .merit-table .merit-col-fee,
  .merit-table .merit-col-band,
  .merit-table .merit-col-save { display: none; }
  .merit-fee { padding: 1rem .875rem .875rem; }
  .merit-fee__win { grid-template-columns: 1fr; gap: .125rem; }
  .merit-admit-step { grid-template-columns: 1fr; gap: .625rem; }
  .merit-pay__who > div { display: grid; gap: .125rem; }
  .merit-pay__who dd { text-align: left; }
  .merit-pay__num dd { justify-content: flex-start; }
  .merit-cell-fee {
    display: block;
    margin-top: .1875rem;
    font-size: .75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ice-color-text-accent, #9e4814);
  }
  /* The saving follows the fee onto the same line rather than becoming a third
     row per student: 192 rows three lines deep is a different page. */
  .merit-cell-save {
    font-weight: 600;
    color: var(--ice-color-text-muted, #5a6478);
  }
  .merit-cell-save::before { content: ' · '; }
  .merit-find__row input { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Print: the page becomes the sheet ──────────────────────────────────────
   A parent will print this, and a college office will file it. What belongs on
   paper is the masthead and the four columns — not the search box, not the
   countdown, not a call to action. Rows hidden by a filter stay hidden, so
   printing after searching prints exactly what is on screen. */

@media print {
  body.page-merit-list header.site,
  body.page-merit-list footer,
  body.page-merit-list .merit-when,
  body.page-merit-list .merit-cta,
  body.page-merit-list .merit-toolbar,
  body.page-merit-list .merit-find,
  body.page-merit-list .merit-verdict,
  body.page-merit-list .merit-elsewhere,
  body.page-merit-list .merit-programs__foot,
  body.page-merit-list .skip-link { display: none !important; }

  body.page-merit-list .merit-hero {
    background: none !important;
    color: #000 !important;
    padding: 0 0 .5rem;
    border-bottom: 2px solid #000;
  }
  body.page-merit-list .merit-crumb,
  body.page-merit-list .merit-lede { display: none; }
  body.page-merit-list main .merit-hero h1 { color: #000 !important; font-size: 18pt; }
  body.page-merit-list .merit-hero__facts { border-top: 0; color: #000 !important; padding: 0; margin: 2pt 0 0; }
  body.page-merit-list .merit-hero__facts b { color: #000 !important; }

  /* The deck unrolls into a plain stack on paper. A horizontal scroll track
     would otherwise print the first pane and silently drop the rest. */
  body.page-merit-list .merit-deck {
    display: block !important;
    overflow: visible !important;
    gap: 0;
  }
  body.page-merit-list .merit-sheet { border: 0; break-inside: auto; margin-bottom: 8pt; }
  body.page-merit-list .merit-sheet__bar { background: none !important; padding: 6pt 0 3pt; border: 0; break-after: avoid; }
  body.page-merit-list .merit-sheet__cell { background: none !important; color: #000 !important; border: 1px solid #000; }
  body.page-merit-list main .merit-sheet__title { font-size: 11pt; color: #000 !important; }
  body.page-merit-list .merit-sheet__range { color: #000 !important; }
  body.page-merit-list .merit-tabs-strip,
  body.page-merit-list .merit-scans,
  body.page-merit-list .merit-viewer,
  body.page-merit-list .merit-swipe-hint { display: none !important; }
  body.page-merit-list .merit-deck { max-width: none; margin: 0; }

  body.page-merit-list .merit-table { font-size: 9.5pt; margin-bottom: 6pt; }
  body.page-merit-list .merit-table { border: .5pt solid #000; }
  body.page-merit-list .merit-table thead th { background: none !important; color: #000 !important; border-bottom: 1pt solid #000; border-right: .5pt solid #000; }
  body.page-merit-list .merit-table td { color: #000 !important; padding: 2pt 4pt; border-bottom: .5pt solid #000; border-right: .5pt solid #000; }
  body.page-merit-list .merit-table tbody tr:nth-child(even) td,
  body.page-merit-list .merit-table tbody td.merit-col-sn { background: none !important; }
  body.page-merit-list .merit-table thead th { background: none !important; }
  body.page-merit-list .merit-table tbody tr { break-inside: avoid; }

  body.page-merit-list .merit-notes { background: none; padding: .5rem 0 0; }
  body.page-merit-list .merit-notes p { font-size: 8pt; color: #000; }
}

/* ── 2026-08-23 rebuild: disclosure, CTA cards, and print fixes ──────────── */

/* Provenance is now behind a disclosure so it is not in the path to "am I in?". */
.merit-notes__box {
  max-width: 52rem;
  background: var(--mt-paper);
  border: 1px solid var(--mt-line);
  border-radius: var(--ice-radius-control, 4px);
}
.merit-notes__box summary {
  padding: 1rem 1.25rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ice-color-text, #131722);
  cursor: pointer;
  list-style: none;
}
.merit-notes__box summary::-webkit-details-marker { display: none; }
.merit-notes__box summary::after {
  content: "";
  float: right;
  width: .55rem;
  height: .55rem;
  margin-top: .35rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.merit-notes__box[open] summary::after { transform: rotate(-135deg); }
.merit-notes__box summary:focus-visible { outline: 3px solid var(--mt-accent); outline-offset: -3px; }
.merit-notes__body { padding: 0 1.25rem 1.25rem; }
.merit-notes__body p:first-child { margin-top: 0; }

/* CTA cards: the page's green-free language — navy accent for "you're in",
   crimson for "not on the list". */
.merit-cta__card--in { border-top: 3px solid var(--mt-accent); }
.merit-cta__card--out { border-top: 3px solid var(--mt-ink-action); }

/* Print overrides for the rebuilt structure: drop the controls, un-stick the
   headers, and let the vertical list flow onto paper as-is. */
@media print {
  body.page-merit-list .merit-tabs,
  body.page-merit-list .merit-count,
  body.page-merit-list .merit-list__lead,
  body.page-merit-list .merit-list__foot,
  body.page-merit-list .merit-fees,
  body.page-merit-list .merit-admit-steps,
  body.page-merit-list .merit-admit__sub,
  body.page-merit-list .merit-admit__eyebrow,
  body.page-merit-list .merit-slip__locked,
  body.page-merit-list .merit-slip__actions,
  body.page-merit-list .merit-table .merit-col-fee,
  body.page-merit-list .merit-table .merit-col-band,
  body.page-merit-list .merit-table .merit-col-save,
  body.page-merit-list .merit-cell-fee,
  body.page-merit-list .merit-signed { display: none !important; }
  body.page-merit-list .merit-sheet__bar,
  body.page-merit-list .merit-table thead th { position: static !important; background: none !important; color: #000 !important; }
  body.page-merit-list .merit-sheet { border: 0 !important; }
  body.page-merit-list main .merit-sheet__title { color: #000 !important; }
  body.page-merit-list .merit-sheet__range { color: #000 !important; }
  body.page-merit-list .merit-notes__box { border: 0 !important; }
  /* The slip prints as a slip: flat, black on white, no gradient to eat toner. */
  body.page-merit-list .merit-admit { background: none !important; border: 0 !important; padding: 0 !important; }
  body.page-merit-list .merit-slip__open {
    background: none !important;
    color: #000 !important;
    border: 1pt solid #000 !important;
  }
  body.page-merit-list .merit-slip__open * { color: #000 !important; }
  body.page-merit-list .merit-slip__facts > div { background: none !important; outline: .5pt solid #000 !important; }
  body.page-merit-list .merit-notes__box summary::after { display: none; }
}