/* The rank-to-fee calculator.

   Design tokens only, scoped to .fee-calc so it can be dropped into a page
   without reaching into that page's own rules. Two tones: --light for a normal
   page band, --dark for sitting directly under /rank's navy stage.

   Same surface trap documented in rank.css and apply-form.css: --navy is a
   SEMANTIC role that the dark theme remaps to a near-white FOREGROUND, so
   using it as a background produces a panel that fades to near black under
   white text. Surfaces here come from the raw palette, which is never
   redefined per theme.

   ── WHY THE DISPLAY TYPE IS NOT IN PARAGRAPHS ─────────────────────────────

   ice-design-system.css declares an authoritative type hierarchy in which
   `body.page-course main :is(p, li, dd)` is body copy, with !important on
   every declaration. Both pages this component lands on are .page-course, so
   the first version of this file styled `p.fee-card__fee` at 34px and got 17px
   — the largest number on the page, silently rendered as a paragraph, looking
   like a deliberate choice rather than the bug it was.

   The fix is not a louder !important, which would be this component opting out
   of a system the whole site keeps. It is that an amount is a VALUE, not
   prose: the card internals are divs, the version stamp is a <small> (which
   the system already gives the caption role), and the eyebrows use the
   registered .label role. Body copy stays in paragraphs and keeps body size,
   which is correct.

   Keep the two-class selectors as well. They are what beats the ordinary
   component rules that land on the same elements. */

.fee-calc {
  --fc-accent: var(--terracotta, #d9702c);
  --fc-surface: var(--card);
  --fc-line: var(--hairline);
  --fc-ink: var(--ink);
  --fc-muted: var(--slate);
  --fc-zero: #1f7a4d;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

html[data-theme='dark'] .fee-calc { --fc-zero: #4ec38a; }

/* Under the navy stage on /rank: one continuous dark surface rather than a
   light band that reads as a different page starting. */
.fee-calc--dark {
  background: var(--ice-palette-navy-900, #0c1a38);
  --fc-surface: rgba(255, 255, 255, .06);
  --fc-line: rgba(255, 255, 255, .16);
  --fc-ink: #fff;
  --fc-muted: rgba(255, 255, 255, .78);
  --fc-zero: #6fdba6;
}
html[data-theme='dark'] .fee-calc--dark {
  background: var(--ice-palette-graphite-900, #232428);
}

.fee-calc__inner { max-width: 62rem; }

/* ── Heading ─────────────────────────────────────────────────────────────── */
.fee-calc__head { max-width: 42rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.fee-calc__head .label {
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fc-accent); margin: 0 0 .625rem;
}
/* Scoped through the section rather than a bare `.fee-calc h2`: the shared
   `.page-course main h1, h2, h3, h4 { color: var(--course-ink) }` rule has
   specificity (0,2,2) and would otherwise win on every page this component
   lands on, painting the headline navy-on-navy in the dark tone. Same trap as
   the /rank stage headline. Do not lower these selectors. */
.fee-calc .fee-calc__head h2 {
  margin: 0 0 .875rem;
  font-size: clamp(1.5rem, 3.8vw, 2.25rem);
  line-height: 1.15;
  color: var(--fc-ink);
}
.fee-calc .fee-calc__head p { margin: 0; line-height: 1.7; color: var(--fc-muted); }

/* ── The rank field ──────────────────────────────────────────────────────── */
.fee-calc__form { margin: 0 0 1.5rem; max-width: 30rem; }
.fee-calc__label {
  display: block; font-size: .875rem; font-weight: 600;
  color: var(--fc-ink); margin-bottom: .5rem;
}
.fee-calc__row { display: flex; gap: .625rem; flex-wrap: wrap; }
.fee-calc__row input {
  flex: 1 1 10rem;
  min-width: 0;
  padding: .875rem 1rem;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  /* `--ink` follows the theme and a hard-coded white did not: in dark mode
     this was the light ink on a white field, 1.11:1. The field token moves
     with it, and stays light under `.fee-calc--dark`, which is a dark CARD in
     the light theme rather than a theme of its own. */
  background: var(--field, #fff);
  border: 2px solid var(--hairline);
  border-radius: var(--r-s, 6px);
}
.fee-calc--dark .fee-calc__row input { border-color: transparent; }
.fee-calc__row input:focus-visible { outline: 3px solid var(--fc-accent); outline-offset: 2px; }
.fee-calc__row input[aria-invalid='true'] { border-color: var(--crimson, #c41e3a); }
.fee-calc__row .btn { flex: 0 0 auto; }
.fee-calc__form small {
  display: block; margin-top: .5rem;
  font-size: .8125rem; color: var(--fc-muted);
}

/* ── The answer ──────────────────────────────────────────────────────────── */
.fee-calc__panel {
  background: var(--fc-surface);
  border: 1px solid var(--fc-line);
  border-radius: var(--r-m, 10px);
  padding: clamp(1rem, 2.5vw, 1.5rem);
}
.fee-calc .fee-calc__status {
  margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--fc-muted);
}
/* Quiet through size and tracking, never through opacity. --slate is already
   a muted token; fading it further drops small text under 4.5:1 on white,
   which is how the first version of this file failed axe on three selectors
   at once. */
.fee-calc__panel[data-state='found'] .fee-calc__status {
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 1rem;
}

.fee-result .fee-result__hail {
  margin: 0 0 .25rem;
  font-size: clamp(1.25rem, 3.2vw, 1.75rem);
  font-weight: 700; line-height: 1.2; color: var(--fc-ink);
}
.fee-result .fee-result__band {
  margin: 0 0 1.25rem;
  font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--fc-muted);
}

/* ── One card per programme, cheapest first ──────────────────────────────── */
.fee-cards {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: grid; gap: .875rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
/* On /apply the list narrows to the programme the student actually chose.
   Without a ceiling, auto-fit stretches a single card the full width of the
   panel and the one number on it floats in a field of nothing. */
.fee-cards[data-count='1'] { grid-template-columns: minmax(0, 24rem); }
.fee-cards[data-count='2'] { grid-template-columns: repeat(auto-fit, minmax(15rem, 24rem)); }
.fee-cards .fee-card {
  padding: 1.125rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--fc-accent);
  border-radius: var(--r-s, 6px);
  display: flex; flex-direction: column;
}
.fee-cards .fee-card__prog {
  margin: 0 0 .625rem;
  font-size: .8125rem; font-weight: 700; line-height: 1.35;
  letter-spacing: .04em; text-transform: uppercase; color: var(--slate);
  /* Two lines for BEI's long name, one for the others, so the fee below it
     starts at the same height on every card in the row. */
  min-height: 2.4em;
}
/* The one number that is allowed to be large. */
.fee-cards .fee-card__fee {
  margin: 0;
  font-size: clamp(1.625rem, 4.4vw, 2.125rem);
  font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.fee-cards .fee-card__basis {
  margin: .25rem 0 .875rem;
  font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--slate);
}
.fee-cards .fee-card__saving {
  margin: 0 0 .625rem; padding: .5rem .625rem;
  background: color-mix(in srgb, var(--fc-accent) 12%, transparent);
  border-left: 3px solid var(--fc-accent);
  border-radius: 0 var(--r-s, 6px) var(--r-s, 6px) 0;
  font-size: .8125rem; line-height: 1.5; font-weight: 600; color: var(--ink);
}
.fee-cards .fee-card__monthly {
  margin: 0 0 .5rem; font-size: .875rem; line-height: 1.5; color: var(--slate);
}
.fee-cards .fee-card__emi { font-size: .8125rem; color: var(--navy); }
.fee-cards .fee-card__seats {
  margin: auto 0 0; padding-top: .875rem;
  font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--slate);
}

/* ── What is already inside the amount ───────────────────────────────────── */
.fee-incl {
  padding: 1rem 1.125rem;
  background: color-mix(in srgb, var(--fc-zero) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--fc-zero) 34%, transparent);
  border-radius: var(--r-s, 6px);
  margin-bottom: 1.25rem;
}
.fee-incl .fee-incl__title {
  margin: 0 0 .75rem;
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--fc-ink);
}
.fee-incl .fee-incl__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.fee-incl .fee-incl__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .125rem .75rem;
  align-items: baseline;
  font-size: .9375rem;
}
.fee-incl .fee-incl__zero {
  grid-row: span 2;
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--fc-zero);
  font-size: .9375rem;
  min-width: 3.25rem;
}
.fee-incl .fee-incl__list b { font-size: .9375rem; color: var(--fc-ink); }
.fee-incl .fee-incl__detail { font-size: .8125rem; line-height: 1.5; color: var(--fc-muted); }

.fee-result .fee-result__basis {
  margin: 0 0 1.25rem;
  font-size: .8125rem; line-height: 1.65; color: var(--fc-muted);
}
.fee-result .fee-result__basis b { color: var(--fc-ink); }

.fee-result__actions { display: flex; flex-wrap: wrap; gap: .625rem; }
/* .btn sets display, which outranks [hidden]. Same trap the /apply stepper hit. */
.fee-result__actions .btn[hidden] { display: none; }
.fee-calc--dark .fee-result__actions .btn-ghost {
  color: #fff; border-color: rgba(255, 255, 255, .38);
}

.fee-calc .fee-calc__stamp {
  margin: 1rem 0 0;
  font-size: .8125rem; line-height: 1.6; color: var(--fc-muted);
  max-width: 42rem;
}

/* ── The published structure, as a reference table ───────────────────────── */
.fee-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fee-table {
  width: 100%; min-width: 34rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.fee-table caption {
  text-align: left; padding-bottom: .75rem;
  font-size: .8125rem; line-height: 1.6; color: var(--slate);
}
.fee-table th, .fee-table td {
  padding: .75rem .875rem;
  border-bottom: 1px solid var(--hairline);
  text-align: right;
}
.fee-table thead th {
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--slate); white-space: nowrap;
}
.fee-table tbody th {
  text-align: left; font-weight: 700; color: var(--ink);
}
.fee-table tbody th small {
  display: block; font-weight: 400; font-size: .75rem; color: var(--slate);
}
.fee-table td { font-weight: 600; color: var(--ink); }
/* The top-band column is the one number that carries the whole poster. */
/* `--crimson` is the action fill, not an ink: on the dark card it measures
   2.36:1. The design system's text step for the action family is the one that
   moves with the theme. */
.fee-table td.is-top { color: var(--ice-color-text-action, #c41e3a); }
.fee-table tbody tr:last-child th, .fee-table tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 30rem) {
  .fee-card__prog { min-height: 0; }
}