/* ============================================================
   Programmes page — public curriculum browser.
   Markup: PROGRAMMES.php  |  Renderer: PROGRAMMES_PAGE.js

   A two-level accordion LIST (not a card grid): programme rows open to reveal
   their classes, and a class row opens to reveal its subjects. Only one row is
   open per level, so the page stays compact on any screen.

   COLOUR — the whole page is derived from ONE anchor, --progPage-brand, which
   points at the school's main colour (--bg-color in domain_colors/<host>.css).
   Surfaces are progressively lighter tints of that single colour and the type
   is progressively darker shades of it, so the page reads as a soft gradient of
   the site theme instead of a palette of its own. Nothing below is hue-specific:
   repoint --progPage-brand and the page re-tints wholesale, so a school with a
   blue / maroon / green theme each gets a page in its own family.

   Every tinted token is declared twice — a plain colour first, then the
   color-mix() version — so browsers that cannot parse color-mix() keep the flat
   fallback (same convention as programmes_home.css / ADMISSION_LOGIN2.css).
   ============================================================ */

.progPage {
  /* Anchors: the site's main colour, plus its lighter sibling for accents.
     --primary-color is deliberately NOT used: it is gold on some tenants and
     green/blue on others, so it is not reliably in the same hue family. */
  --progPage-brand: var(--bg-color, #103d2d);
  --progPage-brand-lift: var(--hover-color, var(--progPage-brand));

  /* Page canvas the list sits on. */
  --progPage-canvas: #eef1f0;
  --progPage-canvas: color-mix(in srgb, var(--progPage-brand) 7%, #ffffff);
  --progPage-canvas-deep: #e3e9e7;
  --progPage-canvas-deep: color-mix(in srgb, var(--progPage-brand) 13%, #ffffff);
  --progPage-canvas-foot: #f7f9f8;
  --progPage-canvas-foot: color-mix(in srgb, var(--progPage-brand) 3%, #ffffff);

  /* Raised surface: near-white at the lit corner, tinted at the foot. */
  --progPage-card-top: #fbfcfc;
  --progPage-card-top: color-mix(in srgb, var(--progPage-brand) 2%, #ffffff);
  --progPage-card-bottom: #e9eeec;
  --progPage-card-bottom: color-mix(in srgb, var(--progPage-brand) 10%, #ffffff);

  /* Embossed chips / inset wells sit one step deeper than the card face. */
  --progPage-chip-top: #f4f7f6;
  --progPage-chip-top: color-mix(in srgb, var(--progPage-brand) 5%, #ffffff);
  --progPage-chip-bottom: #e6ecea;
  --progPage-chip-bottom: color-mix(in srgb, var(--progPage-brand) 12%, #ffffff);

  /* Type — deep / mid / muted, all the same hue as the brand. */
  --progPage-ink-deep: #0a251b;
  --progPage-ink-deep: color-mix(in srgb, var(--progPage-brand) 94%, #000000);
  --progPage-ink: var(--progPage-brand);
  --progPage-ink-soft: #4f6e63;
  --progPage-ink-soft: color-mix(in srgb, var(--progPage-brand) 70%, #ffffff);

  /* Hairlines + the neumorphic shade/light pair (shade is brand-tinted, the
     highlight stays white — that is the light source, not a brand colour). */
  --progPage-hair: rgba(16, 61, 45, 0.26);
  --progPage-hair: color-mix(in srgb, var(--progPage-brand) 26%, transparent);
  --progPage-hair-fade: rgba(16, 61, 45, 0.06);
  --progPage-hair-fade: color-mix(in srgb, var(--progPage-brand) 6%, transparent);
  --progPage-shade: rgba(16, 61, 45, 0.22);
  --progPage-shade: color-mix(in srgb, var(--progPage-brand) 22%, transparent);
  --progPage-shade-soft: rgba(16, 61, 45, 0.15);
  --progPage-shade-soft: color-mix(in srgb, var(--progPage-brand) 15%, transparent);
  --progPage-light: rgba(255, 255, 255, 0.92);
  --progPage-radius: 18px;

  position: relative;
  isolation: isolate;
  display: block;
  padding: 0 0 3rem;
}

/* Full-bleed canvas behind the whole page body, with two faint brand glows in
   opposite corners so it reads as one soft wash of the school colour. */
.progPage::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(50% - 50vw);
  width: 100vw;
  top: 0;
  bottom: 0;
  background: var(--progPage-canvas);
  background:
    radial-gradient(120% 42% at 10% 0%,
      color-mix(in srgb, var(--progPage-brand-lift) 8%, transparent) 0%,
      transparent 60%),
    radial-gradient(120% 46% at 90% 100%,
      color-mix(in srgb, var(--progPage-brand) 8%, transparent) 0%,
      transparent 62%),
    linear-gradient(180deg,
      var(--progPage-canvas) 0%,
      var(--progPage-canvas-deep) 46%,
      var(--progPage-canvas-foot) 100%);
  pointer-events: none;
}

/* ---------- Hero ---------- */

.progPage .progPage-hero {
  position: relative;
  z-index: 1;
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.9rem 1rem 0.4rem;
}

.progPage .progPage-heroInner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(11rem, 13.5rem) minmax(0, 1fr);
  gap: 1.45rem;
  align-items: center;
  padding: 0 0 1.15rem;
}

.progPage .progPage-heroInner::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--progPage-hair) 12%, var(--progPage-hair) 88%, transparent 100%);
  pointer-events: none;
}

.progPage .progPage-heroMeta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.85rem;
  min-height: 100%;
  padding: 0.45rem 1.25rem 0.45rem 0.25rem;
  border-right: 1px solid var(--progPage-hair);
}

.progPage .progPage-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--progPage-card-top), var(--progPage-card-bottom));
  box-shadow:
    3px 3px 7px var(--progPage-shade-soft),
    -3px -3px 7px var(--progPage-light);
  color: var(--progPage-ink);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.progPage .progPage-note {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--progPage-ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.progPage .progPage-note::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: linear-gradient(90deg, var(--progPage-hair) 0%, var(--progPage-hair-fade) 100%);
}

.progPage .progPage-heroText {
  position: relative;
  max-width: 44rem;
  padding: 0.15rem 0 0.15rem 1.2rem;
}

.progPage .progPage-heroText::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--progPage-ink-soft) 0%, var(--progPage-ink) 100%);
}

.progPage .progPage-heroText h1 {
  margin: 0;
  color: var(--progPage-ink-deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.38rem;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.progPage .progPage-heroText p {
  margin: 0.72rem 0 0;
  max-width: 42rem;
  color: var(--progPage-ink-soft);
  font-size: 0.97rem;
  line-height: 1.72;
}

/* ---------- Summary strip ---------- */

.progPage .progPage-summary {
  display: none;
  margin: 1.15rem 0 0;
}

.progPage .progPage-summary.is-ready {
  display: block;
}

.progPage .progPage-summaryInner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 2.4rem;
  padding: 0.85rem 1.35rem;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--progPage-card-top), var(--progPage-card-bottom));
  box-shadow:
    6px 6px 14px var(--progPage-shade-soft),
    -6px -6px 14px var(--progPage-light);
}

.progPage .progPage-summaryItem {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  color: var(--progPage-ink-soft);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.progPage .progPage-summaryItem b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--progPage-ink-deep);
}

.progPage .progPage-summaryNote {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--progPage-ink-soft);
  font-size: 0.76rem;
  font-style: italic;
}

.progPage .progPage-summaryNote i {
  font-style: normal;
}

/* ---------- List shell ---------- */

.progPage .programmes_page_wrapper {
  position: relative;
  z-index: 1;
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.35rem 1rem 0;
}

.progPage .progPage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

@keyframes progPageRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes progPagePulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.85; }
}

.progPage .progPage-skeleton {
  height: 4.6rem;
  margin-bottom: 0.85rem;
  border-radius: var(--progPage-radius);
  background: linear-gradient(145deg, var(--progPage-card-top), var(--progPage-card-bottom));
  box-shadow:
    8px 8px 18px var(--progPage-shade-soft),
    -8px -8px 18px var(--progPage-light);
  opacity: 0.75;
  animation: progPagePulse 1.5s ease-in-out infinite;
}

/* ---------- Programme row ---------- */

.progPage .progPage-item {
  position: relative;
  border-radius: var(--progPage-radius);
  background: linear-gradient(145deg, var(--progPage-card-top) 0%, var(--progPage-card-bottom) 100%);
  box-shadow:
    8px 8px 18px var(--progPage-shade),
    -8px -8px 18px var(--progPage-light);
  animation: progPageRise 0.5s cubic-bezier(0.22, 0.72, 0.3, 1) both;
  transition: box-shadow 0.3s ease;
}

.progPage .progPage-item.is-open {
  box-shadow:
    11px 11px 24px var(--progPage-shade),
    -11px -11px 24px var(--progPage-light);
}

/* The accent rail on the left edge fills in as the row opens. */
.progPage .progPage-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  bottom: 1.05rem;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--progPage-ink-soft) 0%, var(--progPage-ink) 100%);
  opacity: 0;
  transition: opacity 0.3s ease, top 0.3s ease, bottom 0.3s ease;
  pointer-events: none;
}

.progPage .progPage-item.is-open::before,
.progPage .progPage-item:hover::before {
  opacity: 1;
}

.progPage .progPage-itemHead {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin: 0;
  padding: 1.15rem 1.35rem;
  border: 0;
  border-radius: var(--progPage-radius);
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.progPage .progPage-itemHead:focus-visible {
  outline: 2px solid var(--progPage-ink);
  outline-offset: 3px;
}

.progPage .progPage-index {
  flex: 0 0 auto;
  min-width: 2.35rem;
  padding: 0.42rem 0.5rem;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--progPage-chip-bottom), var(--progPage-chip-top));
  box-shadow:
    inset 2px 2px 4px var(--progPage-shade-soft),
    inset -2px -2px 4px var(--progPage-light);
  color: var(--progPage-ink-soft);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
}

.progPage .progPage-itemText {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.progPage .progPage-itemName {
  color: var(--progPage-ink-deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.32rem;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.005em;
}

.progPage .progPage-itemStats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.15rem;
}

.progPage .progPage-stat {
  color: var(--progPage-ink-soft);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.progPage .progPage-stat b {
  color: var(--progPage-ink);
  font-size: 0.8rem;
  letter-spacing: 0;
}

.progPage .progPage-itemCaret {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--progPage-chip-top), var(--progPage-chip-bottom));
  box-shadow:
    3px 3px 7px var(--progPage-shade-soft),
    -3px -3px 7px var(--progPage-light);
  color: var(--progPage-ink);
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 0.3s ease, box-shadow 0.2s ease;
}

.progPage .progPage-itemHead:hover .progPage-itemCaret {
  box-shadow:
    4px 4px 9px var(--progPage-shade),
    -4px -4px 9px var(--progPage-light);
}

.progPage .progPage-item.is-open .progPage-itemCaret {
  transform: rotate(180deg);
  box-shadow:
    inset 2px 2px 5px var(--progPage-shade-soft),
    inset -2px -2px 5px var(--progPage-light);
}

/* ---------- Collapsible panels ----------
   Both accordion levels collapse the same way: max-height 0 with the content
   clipped, animated open by PROGRAMMES_PAGE.js writing an inline max-height and
   then releasing it to "none". `visibility` is delayed by the full duration on
   the way out so a collapsed panel drops out of the tab order and out of screen
   readers once it has finished closing, and switches back instantly on the way
   in. Keep the durations here in step with programmes_page_slide_ms_v1. */

.progPage .progPage-panel,
.progPage .progPage-subjects {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    max-height 0.3s cubic-bezier(0.22, 0.72, 0.3, 1),
    opacity 0.24s ease,
    visibility 0s linear 0.3s;
}

.progPage .progPage-item.is-open > .progPage-panel,
.progPage .progPage-class.is-open > .progPage-subjects {
  opacity: 1;
  visibility: visible;
  transition:
    max-height 0.3s cubic-bezier(0.22, 0.72, 0.3, 1),
    opacity 0.24s ease,
    visibility 0s linear 0s;
}

.progPage .progPage-panelInner {
  margin: 0 1rem 1rem;
  padding: 1rem 1.05rem 1.1rem;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--progPage-chip-top), var(--progPage-chip-bottom));
  box-shadow:
    inset 3px 3px 7px var(--progPage-shade-soft),
    inset -3px -3px 7px var(--progPage-light);
}

.progPage .progPage-panelLabel {
  margin-bottom: 0.8rem;
  color: var(--progPage-ink-soft);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.progPage .progPage-classes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* ---------- Class row ---------- */

.progPage .progPage-class {
  border-radius: 12px;
  background: linear-gradient(145deg, var(--progPage-card-top), var(--progPage-card-bottom));
  box-shadow:
    4px 4px 9px var(--progPage-shade-soft),
    -4px -4px 9px var(--progPage-light);
  transition: box-shadow 0.25s ease;
}

.progPage .progPage-class.is-open {
  box-shadow:
    6px 6px 13px var(--progPage-shade),
    -6px -6px 13px var(--progPage-light);
}

.progPage .progPage-classHead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem 0.75rem;
  width: 100%;
  padding: 0.72rem 0.95rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.progPage .progPage-classHead:focus-visible {
  outline: 2px solid var(--progPage-ink);
  outline-offset: 2px;
}

.progPage .progPage-classCaret {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 6px;
  color: var(--progPage-ink);
  font-size: 0.8rem;
  line-height: 1;
  transition: transform 0.25s ease;
}

.progPage .progPage-class.is-open .progPage-classCaret {
  transform: rotate(90deg);
}

.progPage .progPage-className {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--progPage-ink-deep);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  word-break: break-word;
}

.progPage .progPage-classYear {
  flex: 0 0 auto;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--progPage-chip-bottom), var(--progPage-chip-top));
  box-shadow:
    inset 1px 1px 3px var(--progPage-shade-soft),
    inset -1px -1px 3px var(--progPage-light);
  color: var(--progPage-ink-soft);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.progPage .progPage-classMeta {
  flex: 0 0 auto;
  color: var(--progPage-ink-soft);
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ---------- Subjects panel ---------- */

.progPage .progPage-subjectsInner {
  padding: 0.15rem 0.95rem 0.95rem 2.2rem;
}

.progPage .progPage-subjectGroup + .progPage-subjectGroup {
  margin-top: 0.9rem;
}

.progPage .progPage-groupHead {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.progPage .progPage-groupLabel {
  color: var(--progPage-ink-soft);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.progPage .progPage-groupCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--progPage-chip-bottom), var(--progPage-chip-top));
  box-shadow:
    inset 1px 1px 3px var(--progPage-shade-soft),
    inset -1px -1px 3px var(--progPage-light);
  color: var(--progPage-ink);
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1.4;
}

.progPage .progPage-groupHead::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--progPage-hair) 0%, var(--progPage-hair-fade) 100%);
}

.progPage .progPage-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.progPage .progPage-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--progPage-chip-top) 0%, var(--progPage-chip-bottom) 100%);
  box-shadow:
    3px 3px 7px var(--progPage-shade-soft),
    -3px -3px 7px var(--progPage-light);
  color: var(--progPage-ink);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.progPage .progPage-chip:hover {
  transform: translateY(-1px);
  box-shadow:
    4px 4px 9px var(--progPage-shade),
    -4px -4px 9px var(--progPage-light);
}

/* ---------- Notes and empty state ---------- */

.progPage .progPage-emptyNote {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--progPage-ink-soft);
  font-size: 0.82rem;
  font-style: italic;
}

.progPage .progPage-emptyNote i {
  font-style: normal;
}

.progPage .progPage-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 2.6rem 1.35rem;
  border-radius: var(--progPage-radius);
  background: linear-gradient(145deg, var(--progPage-card-top), var(--progPage-card-bottom));
  box-shadow:
    8px 8px 18px var(--progPage-shade-soft),
    -8px -8px 18px var(--progPage-light);
  text-align: center;
}

.progPage .progPage-empty i {
  color: var(--progPage-ink);
  font-size: 1.9rem;
}

.progPage .progPage-empty p {
  margin: 0;
  max-width: 32rem;
  color: var(--progPage-ink-soft);
  font-size: 0.95rem;
  line-height: 1.65;
}

.progPage .progPage-emptyBtn {
  display: inline-flex;
  align-items: center;
  margin-top: 0.35rem;
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--progPage-chip-top), var(--progPage-chip-bottom));
  box-shadow:
    3px 3px 7px var(--progPage-shade-soft),
    -3px -3px 7px var(--progPage-light);
  color: var(--progPage-ink-deep);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.progPage .progPage-emptyBtn:hover {
  color: var(--progPage-ink-deep);
  box-shadow:
    4px 4px 9px var(--progPage-shade),
    -4px -4px 9px var(--progPage-light);
}

/* ---------- Tablet ---------- */

@media (max-width: 991.98px) {
  .progPage .progPage-summaryNote {
    margin-left: 0;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 767.98px) {
  .progPage {
    padding-bottom: 2rem;
  }

  .progPage .progPage-hero {
    padding-top: 1.35rem;
  }

  .progPage .progPage-heroInner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
    padding-bottom: 0.9rem;
  }

  .progPage .progPage-heroMeta {
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
    padding: 0;
    border-right: 0;
  }

  .progPage .progPage-note::before {
    width: 1.4rem;
  }

  .progPage .progPage-heroText {
    padding-left: 0.95rem;
  }

  .progPage .progPage-heroText h1 {
    font-size: 1.72rem;
  }

  .progPage .progPage-heroText p {
    font-size: 0.9rem;
    line-height: 1.62;
  }

  .progPage .progPage-summaryInner {
    gap: 0.35rem 1.4rem;
    padding: 0.75rem 1rem;
  }

  .progPage .progPage-summaryItem {
    font-size: 0.64rem;
    letter-spacing: 0.12em;
  }

  .progPage .progPage-summaryItem b {
    font-size: 1.1rem;
  }

  .progPage .progPage-summaryNote {
    display: none;
  }

  .progPage .programmes_page_wrapper {
    padding-top: 1.1rem;
  }

  .progPage .progPage-itemHead {
    gap: 0.75rem;
    padding: 0.95rem 1rem;
  }

  .progPage .progPage-index {
    min-width: 2.05rem;
    padding: 0.36rem 0.4rem;
    font-size: 0.62rem;
  }

  .progPage .progPage-itemName {
    font-size: 1.14rem;
  }

  .progPage .progPage-stat {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }

  .progPage .progPage-itemCaret {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.85rem;
  }

  .progPage .progPage-panelInner {
    margin: 0 0.7rem 0.8rem;
    padding: 0.85rem 0.75rem 0.9rem;
  }

  .progPage .progPage-classHead {
    padding: 0.65rem 0.7rem;
  }

  .progPage .progPage-className {
    flex: 1 1 100%;
    order: 2;
    font-size: 0.9rem;
  }

  .progPage .progPage-classCaret {
    order: 1;
  }

  .progPage .progPage-classYear {
    order: 1;
  }

  .progPage .progPage-classMeta {
    order: 3;
    margin-left: auto;
  }

  .progPage .progPage-subjectsInner {
    padding: 0.15rem 0.7rem 0.85rem 0.7rem;
  }

  .progPage .progPage-chip {
    font-size: 0.74rem;
    padding: 0.36rem 0.75rem;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .progPage .progPage-item,
  .progPage .progPage-class,
  .progPage .progPage-chip,
  .progPage .progPage-itemCaret,
  .progPage .progPage-classCaret,
  .progPage .progPage-item::before {
    transition: none;
  }

  /* Panels still need the visibility switch, just without the travel. */
  .progPage .progPage-panel,
  .progPage .progPage-subjects,
  .progPage .progPage-item.is-open > .progPage-panel,
  .progPage .progPage-class.is-open > .progPage-subjects {
    transition: visibility 0s linear 0s;
  }

  .progPage .progPage-item {
    animation: none;
  }

  .progPage .progPage-skeleton {
    animation: none;
  }
}