/**
 * calculator.css — The GPA calculator widget and all shared calculator UI.
 *
 * DESIGN INTENT:
 * The calculator is the product. It has its own visual identity:
 *   - 3px teal top border  (not a card shadow — a brand marker)
 *   - Spreadsheet-style rows (name / grade / credits) — feels like a gradebook
 *   - JetBrains Mono for credit values and the result number
 *   - Result panel: full-bleed dark teal (--teal-deep), GPA in Mono at 88px
 *   - Gold status label uses --gold-on-dark (#FBBF24) for WCAG AA (7.01:1)
 *
 * ARIA:
 *   - .calc-widget:          role="region" aria-label="[Calculator name]"
 *   - .course-rows:          role="list" aria-label="Course list"
 *   - .course-row:           role="listitem"
 *   - .result-panel:         aria-live="polite" aria-atomic="true"
 *   - All inputs/selects:    aria-label set in Nunjucks template
 *
 * Import order: tokens.css → reset.css → layout.css → components.css → calculator.css
 */

/* ── Widget shell ─────────────────────────────────────────── */
.calc-widget {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--teal);  /* brand marker — not a shadow */
  border-radius: var(--calc-radius);  /* 12px — modern card */
  box-shadow: var(--calc-shadow);     /* depth */
  overflow: hidden;
}

/* ── Widget header ───────────────────────────────────────── */
.calc-widget__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px var(--space-5) 13px;
  border-bottom: 1px solid var(--rule);
}

.calc-widget__title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Scale selector — top-right of header */
.calc-widget__scale {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--teal);
  background: var(--input-bg);
  border: 1px solid var(--input-bd);
  border-radius: var(--input-radius);  /* 8px — matches modern inputs */
  padding: 4px var(--space-3);
  cursor: pointer;
  transition: border-color var(--duration-sm) var(--ease-out),
              box-shadow var(--duration-sm) var(--ease-out);
}
.calc-widget__scale:hover  { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.10); }
.calc-widget__scale:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

/* ── Column headers ──────────────────────────────────────── */
.course-headers {
  display: grid;
  grid-template-columns: 1fr 80px 62px 28px;
  background: var(--input-bg);
  border-bottom: 1px solid var(--rule);
}
/* 5-column variant: name | type | grade | credits | remove
   Used by all professional school calculators with a science split */
.course-headers--typed {
  grid-template-columns: 1fr 84px 80px 52px 28px;
}

.course-headers__cell {
  padding: 6px var(--space-2) + 2px;
  padding: 6px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-muted);
  border-right: 1px solid var(--rule);
}
.course-headers__cell:last-child { border-right: none; }

/* ── Course rows container ───────────────────────────────── */
.course-rows {
  /* No extra padding — rows handle their own spacing */
}

/* ── Individual course row ───────────────────────────────── */
.course-row {
  display: grid;
  grid-template-columns: 1fr 80px 62px 28px;
  border-bottom: 1px solid var(--rule);
  align-items: stretch;
  transition: background var(--duration-sm) var(--ease-out);
}
/* 5-column typed variant — matches .course-headers--typed */
.course-row--typed {
  grid-template-columns: 1fr 84px 80px 52px 28px;
}
.course-row:last-child { border-bottom: none; }
.course-row:hover      { background: var(--teal-ghost); transition: background var(--duration-sm) var(--ease-out); }

/* Row cell — each column */
.course-row__cell {
  display: flex;
  align-items: center;
  padding: 9px 10px;
  border-right: 1px solid var(--rule);
}
.course-row__cell:last-child { border-right: none; }

/* Course name input */
.course-row__name {
  width: 100%;
  font-size: var(--text-sm);
  color: var(--ink);
  background: none;
  border: none;
  outline: none;
  line-height: 1;
}
.course-row__name::placeholder {
  color: var(--ink-muted);
  font-size: var(--text-xs);
}

/* Type selector — used in professional school split modes */
.course-row__type {
  width: 100%;
  font-size: var(--text-sm);
  color: var(--ink);
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
}

/* Grade selector */
.course-row__grade {
  width: 100%;
  font-size: var(--text-sm);
  color: var(--ink);
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
}

/* Credits input — JetBrains Mono, centered */
.course-row__credits {
  width: 44px;
  font-family: var(--font-mono);
  font-size: 0.8375rem;
  color: var(--ink);
  background: none;
  border: none;
  outline: none;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.course-row__credits::placeholder { color: var(--ink-muted); }

/* Remove row button */
.course-row__remove {
  display: grid;
  place-items: center;
  width: 28px;
  color: var(--ink-muted);
  font-size: 1.125rem;
  line-height: 1;
  opacity: 0.40;
  transition:
    opacity var(--duration-sm) var(--ease-out),
    color   var(--duration-sm) var(--ease-out),
    background var(--duration-sm) var(--ease-out);
}
.course-row__remove:hover {
  opacity: 1;
  color: var(--danger);
  background: rgba(220, 38, 38, 0.06);
}
.course-row__remove:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 0;
  border-radius: 6px;
  opacity: 1;
}

/* ── Add course button ───────────────────────────────────── */
.calc-add-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 11px var(--space-5);
  width: 100%;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--teal);
  border-top: 1px dashed var(--rule);
  border-radius: 0;
  transition: background var(--duration-sm) var(--ease-out),
              color var(--duration-sm) var(--ease-out);
  text-align: left;
}
.calc-add-row:hover { background: var(--teal-ghost); color: var(--teal-dark); }
.calc-add-row:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -2px;
}
.calc-add-row svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ── Save indicator ──────────────────────────────────────── */
/* Small "✓ Saved" line shown below Calculate button after auto-save */
[data-save-indicator] {
  display: none;
  width: 100%;
  text-align: center;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--teal);
  letter-spacing: 0.04em;
}
[data-save-indicator][data-visible="true"] {
  display: block;
}

/* ── Calculate button ────────────────────────────────────── */
.calc-widget__actions {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--rule);
}

.calc-btn {
  display: block;
  width: 100%;
  background: var(--teal);
  color: #fff;
  font-size: var(--text-base);      /* 16px — more prominent than 13px */
  font-weight: 600;
  letter-spacing: 0.025em;
  padding: var(--space-4) var(--space-5);  /* more spacious */
  border-radius: var(--btn-radius);  /* 8px — modern rounded button */
  text-align: center;
  box-shadow: var(--btn-shadow);     /* lifts button off surface */
  transition: background var(--duration-sm) var(--ease-out),
              box-shadow var(--duration-sm) var(--ease-out),
              transform var(--duration-sm) var(--ease-out);
}
.calc-btn:hover {
  background: var(--teal-dark);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}
.calc-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: var(--focus-offset);
}
.calc-btn:active {
  background: var(--teal-dark);
  box-shadow: var(--btn-shadow);
  transform: translateY(0);
}

/* ── Result panel ────────────────────────────────────────── */
/*
 * The "answer moment" — full-bleed dark teal, large JetBrains Mono GPA.
 * Hidden until first Calculate. Uses aria-live for screen reader updates.
 *
 * WCAG contrast:
 *   White GPA number on #0D3D3A:   12.03:1 ✅ (AA + AAA)
 *   --gold-on-dark on #0D3D3A:      7.01:1 ✅ (AA + AAA)
 */
/* Result panel entrance animation */
@keyframes resultFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.calc-result {
  background: var(--teal-deep);
  padding: var(--space-6) var(--space-5) var(--space-5);
  display: none;
  flex-direction: column;
  gap: var(--space-1);
}
.calc-result[data-visible="true"] {
  display: flex;
  animation: resultFadeUp 0.22s var(--ease-out) both;
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .calc-result[data-visible="true"] { animation: none; }
}

/* "YOUR GPA" micro-label */
.calc-result__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--space-1);
}

/* The GPA number — JetBrains Mono, 88px */
.calc-result__number {
  font-family: var(--font-mono);
  font-size: var(--text-result);   /* 5.5rem = 88px */
  font-weight: 700;
  color: #fff;
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* Status + credits row */
.calc-result__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-2) + 2px;
  margin-top: 10px;
}

/* "Excellent" / "Good" etc. — gold-on-dark for WCAG (7.01:1) */
.calc-result__status {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold-on-dark);
}

/* "10 credits" */
.calc-result__credits {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
  font-variant-numeric: tabular-nums;
}

/* ── Dual result panel (Major GPA Calculator) ───────────── */
/* Two halves side by side inside the teal panel */
.calc-result--dual {
  flex-direction: row;
  gap: 0;
  padding: 0;
  align-items: stretch;
}
.calc-result--dual .calc-result__half {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-5) var(--space-5);
}
.calc-result--dual .calc-result__half + .calc-result__half {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
/* Smaller number font in dual mode so both fit */
.calc-result--dual .calc-result__number {
  font-size: 3.5rem; /* 56px — fits side-by-side at widget width */
}

/* ── Target GPA result variant ───────────────────────────── */
/* Used on the target GPA calculator — shows "required GPA" */
.calc-result__required {
  font-family: var(--font-mono);
  font-size: var(--text-result);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
/* Colour shifts based on feasibility */
.calc-result__required[data-feasible="yes"]        { color: #6EE7B7; } /* teal-300 */
.calc-result__required[data-feasible="stretch"]    { color: var(--gold-on-dark); }
.calc-result__required[data-feasible="impossible"] { color: #FCA5A5; } /* red-300 */

/* ── Input validation states ─────────────────────────────── */
.course-row__cell--error { background: var(--danger-muted); }
.course-row__cell--error input,
.course-row__cell--error select { color: var(--danger); }

/* Inline error message (below the widget or individual field) */
.field-error {
  font-size: var(--text-xs);
  color: var(--danger);
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ── Disclaimer text (for approximation converters) ──────── */
/*
 * Any converter that uses an approximation formula must show this block.
 * The UI must require the user to acknowledge it before seeing the result.
 */
.calc-disclaimer {
  background: var(--teal-ghost);
  border-left: 3px solid var(--teal);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  line-height: var(--leading-normal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-top: var(--space-3);
}
.calc-disclaimer strong { color: var(--ink); font-weight: 600; }

/* ── Institution selector (CGPA systems) ─────────────────── */
.institution-selector {
  padding: var(--space-4);
  border-top: 1px solid var(--rule);
}
.institution-selector__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-bottom: var(--space-2);
}
.institution-selector select {
  width: 100%;
  background: var(--input-bg);
  border: 1.5px solid var(--input-bd);
  border-radius: var(--input-radius);  /* 8px */
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--duration-sm) var(--ease-out),
              box-shadow var(--duration-sm) var(--ease-out);
}
.institution-selector select:hover  { border-color: var(--teal); }
.institution-selector select:focus  {
  border-color: var(--input-bd-focus);
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}

/* ── Weighted Grade Calculator — Grade% + Weight% columns ── */
/* Name / Grade% / Weight% / Remove */
.wg-headers,
.wg-row.course-row {
  grid-template-columns: 1fr 80px 80px 28px;
}

/* ── Grade Weight Distribution Calculator — Earned + Possible ─ */
/* Name / Earned / Possible / Remove */
.gd-headers,
.gd-row.course-row {
  grid-template-columns: 1fr 80px 80px 28px;
}

/* ── Grade Calculator — Assignment / Score / Out of / Remove ── */
.gc-headers,
.gc-row.course-row {
  grid-template-columns: 1fr 80px 80px 28px;
}

/* ── High School calculator row — wider Type column ─────── */
/* Replaces Credits col (62px) with Type col (96px) for hs-calc.js rows */
.hs-headers,
.hs-row.course-row {
  grid-template-columns: 1fr 72px 96px 28px;
}

/* ── Weighted GPA calculator row — 5 columns (adds Credits) ── */
/* Name / Grade / Type / Credits / Remove */
.w-headers,
.w-row.course-row {
  grid-template-columns: 1fr 68px 104px 58px 28px;
}

/* ── Target GPA Calculator — static form layout ─────────── */
.target-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--rule);
}
.target-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.target-form__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.target-form__input {
  background: var(--input-bg);
  border: 1.5px solid var(--input-bd);
  border-radius: var(--input-radius);   /* 8px — modern input */
  padding: 11px var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--duration-sm) var(--ease-out),
              box-shadow var(--duration-sm) var(--ease-out);
  /* Hide browser number spinners — clean numeric field */
  -moz-appearance: textfield;
  appearance: textfield;
}
.target-form__input::-webkit-outer-spin-button,
.target-form__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.target-form__input:hover        { border-color: var(--teal); }
.target-form__input:focus        {
  border-color: var(--input-bd-focus);
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);  /* teal focus glow */
}
.target-form__input::placeholder { color: var(--ink-muted); }

.target-error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 var(--space-5) var(--space-3);
  font-size: var(--text-xs);
  color: var(--danger);
}
.target-error[hidden] { display: none; }

/* ── GPA Projection Calculator — base inputs ─────────────── */
/* Row 1: GPA + Credits (2 equal cols). Row 2: Scale (spans both). */
.proj-base-form {
  grid-template-columns: 1fr 1fr;
}
.proj-scale-row {
  grid-column: 1 / -1;  /* span full width */
}

/* ── Major GPA Calculator — Checkbox / Course / Grade / Credits / Remove ─ */
/* 5-col: checkbox(24px) / name(1fr) / grade(72px) / credits(58px) / remove(28px) */
.major-headers,
.major-row.course-row,
.transfer-headers,
.transfer-row.course-row {
  grid-template-columns: 24px 1fr 72px 58px 28px;
}

/* ── GPA Projection + Dean's List + Latin Honors — Course / Grade / Credits ─ */
/* 4-col: name(1fr) / grade(72px) / credits(68px) / remove(28px) */
.proj-headers,
.proj-row.course-row,
.dl-headers,
.dl-row.course-row,
.lh-headers,
.lh-row.course-row,
.cr-headers,
.cr-row.course-row {
  grid-template-columns: 1fr 72px 68px 28px;
}

/* ── Dean's List verdict styling ─────────────────────────────── */
[data-dl-verdict] {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-top: var(--space-2);
}
[data-dl-verdict][data-verdict="met"]   { color: #6EE7B7; } /* teal-300 — met */
[data-dl-verdict][data-verdict="short"] { color: var(--gold-on-dark); } /* amber — short */

/* ── Latin Honors verdict styling ───────────────────────────── */
[data-lh-honors] {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-top: var(--space-2);
}
[data-lh-honors][data-honors="summa"]     { color: #FCD34D; } /* gold — summa */
[data-lh-honors][data-honors="magna"]     { color: #6EE7B7; } /* teal-300 — magna */
[data-lh-honors][data-honors="cum-laude"] { color: #93C5FD; } /* blue-300 — cum laude */
[data-lh-honors][data-honors="none"]      { color: var(--gold-on-dark); } /* amber — short */

/* ── AP GPA Calculator — Course / Grade / Type / Credits / Remove ── */
/* 5-col with Type dropdown: same as weighted (.w-row) */
.ap-headers,
.ap-row.course-row {
  grid-template-columns: 1fr 68px 104px 58px 28px;
}

/* ── IB GPA Calculator — Subject / IB Score / Credits / Remove ── */
/* 4-col: name(1fr) / IB score select(80px) / credits(62px) / remove(28px) */
.ib-headers,
.ib-row.course-row {
  grid-template-columns: 1fr 90px 62px 28px;
}

/* ── A-Level GPA Calculator — Subject / Grade / Remove ── */
/* 3-col: no credits column (simple average) */
.al-headers,
.al-row.course-row {
  grid-template-columns: 1fr 90px 28px;
}

/* ── GCSE GPA Calculator — Subject / Grade / Remove ── */
/* 3-col: no credits column (simple average) */
.gs-headers,
.gs-row.course-row {
  grid-template-columns: 1fr 90px 28px;
}

/* ── IGCSE GPA Calculator — Subject / Grade / Remove ── */
/* 3-col: no credits column (simple average) */
.ig-headers,
.ig-row.course-row {
  grid-template-columns: 1fr 90px 28px;
}

/* ── Dual Enrollment GPA — Course / Grade / Credits / Type / Remove ── */
/* 5-col: name(1fr) / grade(68px) / credits(62px) / type(76px) / remove(28px) */
.de-headers,
.de-row.course-row {
  grid-template-columns: 1fr 68px 62px 76px 28px;
}

/* ── ECTS GPA Calculator — Module / Grade / ECTS credits / Remove ── */
/* 4-col: name(1fr) / grade(72px) / ects(62px) / remove(28px) */
.ec-headers,
.ec-row.course-row {
  grid-template-columns: 1fr 72px 62px 28px;
}

/* ── WAM Calculator — Subject / Mark / Credits / Remove ── */
/* 4-col: name(1fr) / mark(72px) / credits(62px) / remove(28px) */
.wm-headers,
.wm-row.course-row {
  grid-template-columns: 1fr 72px 62px 28px;
}

/* ── Letter Grade Reference Widget — 3-input static form ── */
/* Current GPA / Current Credits / New Credits at this grade */
.lg-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--rule);
}
.lg-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.lg-form__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ── Grade info strip inside widget header ── */
.grade-ref-strip {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--rule);
  background: var(--input-bg);
}
.grade-ref-strip__badge {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--teal);
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.grade-ref-strip__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
}
.grade-ref-strip__fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.grade-ref-strip__fact-label {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 600;
}
.grade-ref-strip__fact-value {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ── Grade Scale Navigation (interlinking chips) ────────── */
.grade-scale-nav {
  margin-top: var(--space-10);
  padding: var(--space-6) var(--space-5);
  background: var(--input-bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.grade-scale-nav__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--ink-muted);
  margin: 0 0 var(--space-3);
}
.grade-scale-nav__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.grade-scale-nav__chip {
  display: inline-flex;
  align-items: center;
  padding: 5px var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: 6px;
  border: 1.5px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--duration-sm) var(--ease-out),
              color var(--duration-sm) var(--ease-out);
}
.grade-scale-nav__chip:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.grade-scale-nav__chip--current {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  cursor: default;
}
.grade-scale-nav__chip--numeric {
  border-style: dashed;
  color: var(--ink-muted);
}
.grade-scale-nav__chip--numeric:hover {
  color: var(--teal);
  border-color: var(--teal);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Slightly reduce column widths on very small screens */
  .course-headers,
  .course-row {
    grid-template-columns: 1fr 64px 52px 24px;
  }
  .hs-headers,
  .hs-row.course-row {
    grid-template-columns: 1fr 60px 82px 24px;
  }
  .w-headers,
  .w-row.course-row {
    grid-template-columns: 1fr 52px 84px 48px 24px;
  }
  /* Grade calculators: narrow columns on small screens */
  .wg-headers,
  .wg-row.course-row,
  .gd-headers,
  .gd-row.course-row {
    grid-template-columns: 1fr 62px 62px 24px;
  }
  .proj-headers,
  .proj-row.course-row,
  .dl-headers,
  .dl-row.course-row,
  .lh-headers,
  .lh-row.course-row,
  .cr-headers,
  .cr-row.course-row {
    grid-template-columns: 1fr 58px 52px 24px;
  }
  /* AP calculator: narrow Type col */
  .ap-headers,
  .ap-row.course-row {
    grid-template-columns: 1fr 56px 84px 48px 24px;
  }
  /* IB, ECTS, WAM: 4-col narrow */
  .ib-headers,
  .ib-row.course-row,
  .ec-headers,
  .ec-row.course-row,
  .wm-headers,
  .wm-row.course-row {
    grid-template-columns: 1fr 72px 50px 24px;
  }
  /* A-Level, GCSE, IGCSE: 3-col narrow */
  .al-headers,
  .al-row.course-row,
  .gs-headers,
  .gs-row.course-row,
  .ig-headers,
  .ig-row.course-row {
    grid-template-columns: 1fr 76px 24px;
  }
  /* Dual Enrollment: 5-col narrow */
  .de-headers,
  .de-row.course-row {
    grid-template-columns: 1fr 56px 50px 60px 24px;
  }
  .target-form,
  .lg-form {
    grid-template-columns: 1fr;
  }
  /* proj-base-form stays 2-col; scale already full-width via grid-column span */

  .calc-result__number {
    font-size: 4.5rem; /* 72px — still large, fits 375px */
  }
  /* Dual-panel halves get even smaller on mobile */
  .calc-result--dual .calc-result__number {
    font-size: 2.2rem; /* 35px — safe for split layout at 375px */
  }
}