/* ==========================================================================
   Fee structure  —  /page/fee-structure/
   Loaded alongside page-head.css.

   A page of numbers people compare, so the numbers get the work: tabular
   figures so digits line up column to column, the two that matter (payable at
   admission, total course fee) carried in weight and colour, and everything
   else deliberately quiet.

   TWO SHAPES OF THE SAME DATA. The table is the honest form of a fee sheet and
   is used wherever there is room. Under 900px it is swapped for one card per
   course, because ten columns on a phone is either a pinch-zoom or a
   horizontal scroll people never find - and the total is the number they came
   for, so it must not be the one off-screen.
   ========================================================================== */

.fee-section { background: var(--page-alt); }

.fee-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 22px;
}
.fee-lead {
  max-width: 60ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: .96rem;
  line-height: 1.8;
}
.fee-sheet {
  flex: 0 0 auto;
  display: inline-block;
  padding: 11px 24px;
  border-radius: var(--radius-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--accent-deep);
  font-size: .87rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}
.fee-sheet:hover { border-color: var(--accent); color: var(--ink); }
.fee-sheet:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ---------------------------------------------------------- jump strip --- */
.fee-jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}
.fee-jump a {
  display: inline-block;
  padding: 8px 17px;
  border-radius: var(--radius-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .83rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}
.fee-jump a:hover { border-color: var(--accent); color: var(--ink); }

/* -------------------------------------------------------------- blocks --- */
.fee-block { margin: 0 0 34px; scroll-margin-top: 90px; }
.fee-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 11px;
  margin: 0 0 13px;
  color: var(--ink);
  font-size: 1.16rem;
  font-weight: 800;
}
.fee-block__count {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* --------------------------------------------------------- the table --- */
.fee-table-wrap {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  overflow-x: auto;          /* a very narrow laptop still scrolls, not clips */
}
.fee-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .87rem;
}
.fee-table th,
.fee-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.fee-table tbody tr:last-child th,
.fee-table tbody tr:last-child td { border-bottom: 0; }
.fee-table thead th {
  /* 8%, not 10%. --accent-deep on a 10% tint is 4.48:1 - two hundredths under
     what this 12px heading needs. Lightening the tint fixes it without
     touching the token, which is 4.80:1 on plain white and used everywhere. */
  background: rgb(var(--accent-rgb) / 8%);
  color: var(--accent-deep);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.fee-table tbody tr:hover { background: rgb(var(--accent-rgb) / 5%); }

/* The course name is the row's heading and the only cell allowed to wrap. */
.fee-course {
  white-space: normal;
  min-width: 20ch;
  color: var(--ink);
  font-weight: 600;
}

/* Right-aligned with tabular figures: digits then sit in columns, which is
   what makes a fee sheet scannable rather than merely present. */
.fee-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fee-muted { color: var(--muted); }
.fee-strong { font-weight: 700; color: var(--ink); }
.fee-total {
  font-weight: 800;
  color: var(--accent-deep);
}

/* --------------------------------------------------- cards, on phones --- */
.fee-cards { display: none; list-style: none; margin: 0; padding: 0; }
.fee-card {
  padding: 15px 16px;
  margin-bottom: 12px;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.fee-card__course {
  margin: 0 0 3px;
  color: var(--ink);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.35;
}
.fee-card__meta {
  margin: 0 0 11px;
  color: var(--muted);
  font-size: .79rem;
}
.fee-card__rows { margin: 0; }
.fee-card__rows > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.fee-card__rows dt { color: var(--ink-soft); font-size: .84rem; }
.fee-card__rows dd {
  margin: 0;
  color: var(--ink);
  font-size: .87rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* The two figures somebody actually came for. */
.fee-card__key dt { color: var(--ink); font-weight: 700; }
.fee-card__key dd { color: var(--accent-deep); font-weight: 800; }

/* ---------------------------------------------------------- the foot --- */
.fee-foot {
  display: grid;
  gap: 22px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.fee-notes {
  margin: 0;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.8;
}
.fee-notes li { margin-bottom: 5px; }

.fee-account {
  padding: 18px 20px;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.fee-account__head {
  margin: 0 0 11px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.fee-account dl { margin: 0; }
.fee-account dl > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 5px 0;
}
.fee-account dt { min-width: 15ch; color: var(--ink-soft); font-size: .87rem; }
.fee-account dd {
  margin: 0;
  color: var(--ink);
  font-size: .88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fee-account__pay { margin: 12px 0 0; font-size: .88rem; color: var(--ink-soft); }
.fee-account__pay a { color: var(--accent-deep); font-weight: 700; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 900px) {
  .fee-foot { grid-template-columns: 1fr auto; align-items: start; }
}

@media (max-width: 899.98px) {
  /* The swap. Ten columns do not survive a phone, and the total - the number
     most people opened this page for - is the one that would end up off the
     right-hand edge. */
  .fee-table-wrap { display: none; }
  .fee-cards { display: block; }
}

@media (max-width: 575.98px) {
  .fee-top { gap: 12px; }
  .fee-sheet { width: 100%; text-align: center; }
  .fee-block__head { font-size: 1.06rem; }
  .fee-account dt { min-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .fee-sheet, .fee-jump a { transition: none; }
}

@media print {
  .fee-jump, .fee-sheet { display: none; }
  .fee-table-wrap { display: block; box-shadow: none; }
  .fee-cards { display: none; }
  .fee-block { break-inside: auto; }
}