/*
 * HTSA SMS — application styles.
 * Calm, warm, committee-friendly. No third-party UI kit; plain CSS on the
 * tokens in tokens.css. Mobile: the sidebar collapses to a drawer at 1024px,
 * verified clean down to 360px.
 */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  background-image: var(--page-bg);
  background-attachment: fixed;
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--maroon); }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
.display { font-family: var(--font-serif); font-weight: 700; }

/* ------------------------------------------------------------------ *
 * Shell
 * ------------------------------------------------------------------ */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: linear-gradient(180deg, #fffaf2, #f4ead8);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
}
.brand__mark {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--grad-maroon);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-serif); font-size: 22px; font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.brand__name { font-weight: 800; font-size: 17px; }
.brand__sub { font-size: var(--fs-xs); color: var(--muted); }

.nav { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3) var(--space-4); }
.nav__item {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-sm);
  border: 1px solid transparent;
}
.nav__item:hover { background: var(--maroon-wash); color: var(--maroon); }
.nav__item.is-active {
  background: var(--nav-active);
  color: var(--maroon-deep);
  border-color: rgba(123, 30, 43, 0.18);
  box-shadow: inset 3px 0 0 var(--maroon);
}
.nav__num {
  width: 22px; height: 22px; flex: 0 0 22px;
  border-radius: 7px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  background: var(--surface-3); color: var(--muted);
}
.nav__item.is-active .nav__num { background: var(--maroon); color: #fff; }

.sidebar__foot {
  margin-top: auto;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--muted);
  display: flex; align-items: center; gap: var(--space-2);
}

/* Workspace */
.workspace { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 250, 244, 0.7);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.topbar__eyebrow { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.topbar__heading { min-width: 0; }
.topbar__title { font-size: var(--fs-h4); font-weight: 700; }
.topbar__spacer { margin-left: auto; }
.topbar__user { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); flex-wrap: wrap; }

.main { padding: var(--space-6); max-width: var(--content-max); width: 100%; }

/* Drawer toggle (mobile, no JS) */
.drawer-toggle { display: none; }
.drawer-btn, .drawer-scrim { display: none; }

/* ------------------------------------------------------------------ *
 * Page header & layout helpers
 * ------------------------------------------------------------------ */
.page-head { margin-bottom: var(--space-6); }
.page-head__eyebrow { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); font-weight: 700; }
.page-head__title { font-size: var(--fs-display); margin: 4px 0; }
.page-head__desc { color: var(--muted); max-width: 70ch; }

.guide-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  border-left: 4px solid var(--gold);
}
.guide-intro__title { font-size: var(--fs-h4); font-weight: 700; margin-bottom: 4px; }
.guide-intro p { color: var(--muted); max-width: 62ch; }
.guide { max-width: 980px; }
.guide__content { max-width: 82ch; }
.guide__content > :first-child { margin-top: 0; }
.guide__content h1 { font-family: var(--font-serif); font-size: var(--fs-display); margin: var(--space-8) 0 var(--space-4); }
.guide__content h2 { font-family: var(--font-serif); font-size: var(--fs-title); margin: var(--space-7) 0 var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.guide__content h3 { font-size: var(--fs-h4); margin: var(--space-5) 0 var(--space-2); color: var(--maroon); }
.guide__content .heading-permalink { display: inline-block; width: 0; overflow: hidden; color: inherit; text-decoration: none; }
.guide__content p, .guide__content li { line-height: 1.7; }
.guide__content ul, .guide__content ol { padding-left: var(--space-6); margin: var(--space-3) 0; }
.guide__content li + li { margin-top: 6px; }
.guide__content blockquote { margin: var(--space-4) 0; padding: var(--space-4) var(--space-5); border: 1px solid #ead7ab; border-left: 4px solid var(--gold); border-radius: var(--radius-sm); background: #fff8e9; color: var(--text); }
.guide__content blockquote p { margin: 0; }
.guide__content blockquote p + p { margin-top: var(--space-2); }
.guide__content table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; font-size: var(--fs-sm); }
.guide__content th { background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); letter-spacing: .05em; text-align: left; text-transform: uppercase; }
.guide__content th, .guide__content td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.guide__content tr:last-child td { border-bottom: 0; }
.guide__content a { font-weight: 600; }

@media (max-width: 600px) {
  .guide-intro { align-items: flex-start; flex-direction: column; }
  .guide__content h1 { font-size: 28px; }
  .guide__content h2 { font-size: 23px; }
  .guide__content table { display: block; overflow-x: auto; white-space: nowrap; }
}

.stack { display: flex; flex-direction: column; gap: var(--space-6); }
.row { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.card__title { font-size: var(--fs-h4); font-weight: 700; margin-bottom: var(--space-2); }
.card__desc { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--space-4); }

.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Stat cards */
.stat {
  background: linear-gradient(180deg, #fffaf2, #f2e7d5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.stat__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.stat__value { font-size: 32px; font-weight: 800; color: var(--maroon-deep); line-height: 1.1; margin-top: 4px; }
.stat__sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }

/* Quick links */
.quicklinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.quicklink {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #fffaf2, #f2e7d5);
  border: 1px solid var(--line);
  text-decoration: none; color: var(--text);
  min-height: var(--tap);
}
.quicklink:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.quicklink strong { font-size: var(--fs-body); }
.quicklink span { font-size: var(--fs-xs); color: var(--muted); }

/* Empty / placeholder state */
.empty {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-5); border-radius: var(--radius-md);
  background: var(--gold-wash); border: 1px solid var(--gold-soft);
  color: #6b4f12; font-size: var(--fs-sm);
}
.empty__icon { font-size: 22px; }

/* Key / value */
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-6); }
.kv__row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.kv__row:last-child { border-bottom: none; }
.kv__key { color: var(--muted); font-size: var(--fs-sm); }
.kv__val { font-weight: 600; text-align: right; }

/* Tables */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th {
  text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); padding: var(--space-3); border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
.table td { padding: var(--space-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table .num { text-align: center; font-variant-numeric: tabular-nums; }
.table tr.is-disabled td { opacity: .55; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 700;
  background: var(--surface-3); color: var(--muted);
}
.badge--maroon { background: var(--maroon-wash); color: var(--maroon); }
.badge--gold { background: var(--gold-wash); color: #6b4f12; }
.badge--sage { background: rgba(82,105,90,0.14); color: var(--sage); }
.badge--red { background: rgba(179,48,58,0.12); color: var(--red); }

/* Tag list — compact sample chips (data quality, profiles) */
.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; }
.tag-list li {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 4px 12px;
  font-size: var(--fs-xs); font-weight: 600;
}
.tag-list a { text-decoration: none; }

/* Section note (small intro, not a full card) */
.section-note {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--maroon-wash);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.section-note strong { color: var(--maroon-deep); }

/* ------------------------------------------------------------------ *
 * Forms & buttons
 * ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap); padding: 0 var(--space-5);
  border-radius: var(--radius-pill); border: 1px solid transparent;
  font-weight: 700; font-size: var(--fs-sm); cursor: pointer; text-decoration: none;
  background: var(--surface-3); color: var(--text);
}
.btn--primary { background: var(--grad-maroon); color: #fff; }
.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--maroon); }
.btn--danger { background: transparent; border-color: var(--red); color: var(--red); }
.btn--danger:hover { background: var(--red); color: #fff; }
.btn--sm { min-height: 36px; padding: 0 var(--space-3); font-size: var(--fs-xs); }
.btn:hover { box-shadow: var(--shadow-sm); }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.field-hint { font-size: var(--fs-xs); color: var(--muted); }
.field-error { font-size: var(--fs-xs); font-weight: 600; color: var(--red); }
.form-errors {
  margin: var(--space-3) 0; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--red); border-left-width: 4px;
  border-radius: var(--radius-sm); background: rgba(179, 48, 58, 0.07); color: var(--maroon-deep);
}
.form-errors ul { margin: 6px 0 0; padding-left: 1.2em; }
.form-errors li { font-size: var(--fs-sm); }
.input, .select, .textarea {
  min-height: var(--tap); padding: 10px var(--space-3);
  border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: #fffdf9; color: var(--text); font: inherit; font-size: var(--fs-sm); width: 100%;
}
.textarea { min-height: 80px; }

/* Search autocomplete (progressive enhancement; the form works without JS) */
.ac { position: relative; flex: 1 1 220px; min-width: 200px; }
.filters .ac .input, .ac .input { width: 100%; min-width: 0; }
.ac__panel {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
  max-height: 340px; overflow-y: auto; padding: 4px;
}
.ac__panel[hidden] { display: none; }
.ac__item {
  display: block; text-decoration: none; color: var(--text);
  padding: 8px 10px; border-radius: var(--radius-sm);
}
.ac__item:hover, .ac__item.is-active { background: var(--surface-3); }
.ac__label { display: block; font-weight: 700; font-size: var(--fs-sm); }
.ac__meta { display: block; font-size: var(--fs-xs, 12px); color: var(--muted); }
.ac__msg { padding: 10px; font-size: var(--fs-sm); color: var(--muted); }
.ac__section {
  padding: 8px 10px 4px; font-size: var(--fs-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold);
}
.ac__section + .ac__section { border-top: 1px solid var(--line); }
.ac__reason { display: block; font-size: var(--fs-xs, 12px); color: var(--maroon); font-weight: 600; }
.application-filters .ac { min-width: 0; flex-basis: 260px; }
.guardian-picker { flex: none; min-width: 0; width: 100%; }
.guardian-picker [data-picker-search] { position: relative; }
.guardian-picker .ac__panel { top: var(--tap, 44px); }
.guardian-picker .ac__item { min-height: 44px; }
.guardian-picker .ac__item, .guardian-picker [data-picker-selected] { overflow-wrap: anywhere; }
.guardian-picker [hidden] { display: none; }

/* Form theme helpers */
.field-check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); font-weight: 600; color: var(--text); cursor: pointer; margin-bottom: var(--space-3); }
.field-check input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; }
.field-errors { margin: 4px 0 0; padding-left: 1.1em; }
.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--red); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-5); }

/* Configuration hub tiles */
.confgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.conftile {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--space-5); border-radius: var(--radius-md);
  background: linear-gradient(180deg, #fffaf2, #f2e7d5); border: 1px solid var(--line);
  text-decoration: none; color: var(--text); min-height: var(--tap);
}
.conftile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.conftile__name { font-weight: 700; font-size: var(--fs-body); color: var(--maroon-deep); }
.conftile__count { font-size: var(--fs-xs); color: var(--muted); }
.conftile__desc { font-size: var(--fs-xs); color: var(--muted); }

/* Toolbar above a config list */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }

/* Fees actions stay together, including toolbars inside detail/payment pages.
   The containing stack supplies vertical spacing; do not add a second margin. */
.main--fees .toolbar {
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0;
}
.main--fees .toolbar .row { gap: var(--space-2); }
.main--fees .btn {
  min-height: 36px;
  padding: 0 var(--space-3);
  font-size: var(--fs-xs);
}
.main--fees .toolbar .btn { flex: 0 1 auto; }
.main--fees .table .btn { white-space: nowrap; }
.main--fees [data-scope-class][hidden] { display: none; }
.main--fees .kv__row,
.main--fees .kv__val { min-width: 0; overflow-wrap: anywhere; }
.main--fees #guardian-search-form .input { flex: 1 1 280px; min-width: 0; }
@media (max-width: 560px) {
  .main--fees .btn { min-height: 40px; }
  .main--fees .kv__row { flex-direction: column; gap: 4px; }
  .main--fees .kv__val { text-align: left; }
}

/* Inline filter bar (roster search) */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.filters .input, .filters .select { width: auto; min-width: 150px; flex: 0 1 auto; }
.filters .field-check { margin-bottom: 0; }

/* Profile quick-jump segmented nav */
.subnav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.subnav a {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 var(--space-4);
  border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 700;
  text-decoration: none; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line);
}
.subnav a:hover { color: var(--maroon); background: var(--maroon-wash); }

/* Section header with an action on the right */
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }

/* Flash messages */
.flashes { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.flash { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; }
.flash--success { background: rgba(82,105,90,0.14); color: var(--sage); border: 1px solid rgba(82,105,90,0.25); }
.flash--error { background: rgba(179,48,58,0.12); color: var(--red); border: 1px solid rgba(179,48,58,0.25); }
.flash--warning { background: var(--gold-wash); color: #6b4f12; border: 1px solid rgba(199,155,58,0.35); }

/* Privacy note */
.privacy {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  background: var(--maroon-wash); border: 1px solid rgba(123,30,43,0.16);
  font-size: var(--fs-xs); color: var(--maroon-deep);
}

/* ------------------------------------------------------------------ *
 * School calendar — premium planning view (Stage A composition).
 * All dates, terms, filters and session times remain DB/config driven.
 * ------------------------------------------------------------------ */
.calendar-planner-head { margin-bottom: var(--space-6); }
.calendar-planner-head__eyebrow {
  display: inline-flex; padding: 7px 12px; border-radius: var(--radius-pill);
  background: var(--maroon-wash); color: var(--maroon);
  font-size: var(--fs-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
}
.calendar-planner-head__title { margin: var(--space-3) 0 4px; font-size: var(--fs-display); }
.calendar-planner-head__desc { margin: 0; max-width: 72ch; color: var(--muted); }
.calendar-planner-head__action { margin-top: var(--space-5); }

.calendar-term-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.calendar-term {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(123, 30, 43, .06), rgba(199, 155, 58, .10));
  border: 1px solid rgba(123, 30, 43, .14); color: var(--text); text-decoration: none;
}
a.calendar-term { transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; }
a.calendar-term:hover { border-color: rgba(123, 30, 43, .28); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.calendar-term__name { color: var(--maroon); font-weight: 800; overflow-wrap: anywhere; }
.calendar-term__dates { color: var(--text); font-size: var(--fs-sm); }
.calendar-term__sessions { color: var(--muted); font-size: var(--fs-sm); }
.calendar-term--empty { grid-column: 1 / -1; }

/* Key dates is the dominant section (~75% of the width); the summary
   sidebar is a compact ~25% column. */
.calendar-planner-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); gap: var(--space-4); align-items: start; min-width: 0; }
.calendar-planner-grid > *, .calendar-keydates, .calendar-planner-side { min-width: 0; }
.calendar-keydates__head { margin-bottom: var(--space-4); }
.calendar-next { color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
/* One compact row, never wrapping onto a second line. When the row is
   wider than the column it scrolls INSIDE itself (scrollbar visually
   minimised; keyboard focus and touch scrolling still work) — the page
   itself never scrolls sideways. */
.calendar-category-filters {
  display: flex; flex-wrap: nowrap; gap: 6px; max-width: 100%;
  margin-bottom: var(--space-4); overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none;
}
.calendar-category-filters::-webkit-scrollbar { display: none; }
.calendar-category-filter {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 30px; padding: 0 10px;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: rgba(255, 251, 245, .86); color: var(--text);
  text-decoration: none; font-size: var(--fs-xs); font-weight: 700;
  white-space: nowrap;
}
.calendar-category-filter:hover { background: var(--maroon-wash); color: var(--maroon); }
/* Selected = tint + a solid underline bar, so state is never colour alone. */
.calendar-category-filter.is-active {
  background: var(--nav-active); color: var(--maroon);
  border-color: rgba(123, 30, 43, .18);
  box-shadow: inset 0 -3px 0 var(--maroon);
}
.calendar-advanced-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-3); padding: var(--space-2);
  border-radius: var(--radius-md); background: rgba(243, 232, 215, .55);
}
.calendar-advanced-filters .select { width: auto; min-width: 130px; }
.calendar-result-count { margin: 0 0 var(--space-4); color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }

.calendar-entry-list { display: grid; gap: var(--space-3); }
.calendar-entry {
  display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: var(--space-4);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: linear-gradient(180deg, #fffaf2, #f2e7d5);
  border: 1px solid rgba(120, 88, 52, .12); color: var(--text); text-decoration: none;
  transition: border-color .13s ease, box-shadow .13s ease, transform .13s ease;
}
.calendar-entry:hover { border-color: rgba(123, 30, 43, .20); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.calendar-entry:focus-visible, .calendar-term:focus-visible, .calendar-category-filter:focus-visible { outline: 3px solid var(--maroon); outline-offset: 2px; }
.calendar-entry.is-past { opacity: .68; }
.calendar-entry.is-disabled { opacity: .52; }
.calendar-entry__date { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.calendar-entry__date strong { color: var(--maroon-deep); }
.calendar-entry__date small { color: var(--muted); font-size: var(--fs-xs); }
.calendar-entry__body { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.calendar-entry__heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.calendar-entry__heading > strong { overflow-wrap: anywhere; }
.calendar-entry__badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex-shrink: 0; max-width: 45%; }
.calendar-entry__detail { color: var(--muted); font-size: var(--fs-sm); }
.calendar-entry__meta { color: var(--maroon); font-size: var(--fs-xs); font-weight: 700; }
.calendar-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-7); border-radius: var(--radius-md);
  background: var(--gold-wash); color: var(--muted); text-align: center;
}
.calendar-empty strong { color: var(--text); }

/* The sidebar is a compact summary column — informational rows, not big
   nested cards. */
.calendar-planner-side { display: grid; gap: var(--space-3); align-content: start; }
.calendar-side-card { padding: var(--space-4); }
.calendar-side-card .card__title { margin-bottom: var(--space-2); font-size: 15px; }
.calendar-pattern-list { display: grid; gap: var(--space-2); }
.calendar-pattern {
  display: flex; flex-direction: column; gap: 1px;
  padding: 4px 0 4px 10px;
  border-left: 3px solid var(--gold-soft);
}
.calendar-pattern strong { color: var(--maroon); font-size: var(--fs-sm); }
.calendar-pattern span { color: var(--muted); font-size: var(--fs-xs); }
.calendar-detail-note { margin-top: var(--space-4); }
/* Tight two-column statistic grid: small label above a clear value. */
.calendar-glance {
  margin: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
}
.calendar-glance div { display: flex; flex-direction: column; gap: 1px; padding: 2px 0; border-bottom: 0; }
.calendar-glance dt { color: var(--muted); font-size: var(--fs-xs); }
.calendar-glance dd { margin: 0; color: var(--maroon-deep); font-size: 17px; font-weight: 800; }

@media (max-width: 1100px) {
  .calendar-term-grid { grid-template-columns: 1fr; }
  .calendar-planner-grid { grid-template-columns: 1fr; }
  .calendar-planner-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .calendar-planner-head__title { font-size: 28px; }
  .calendar-planner-head__action { width: 100%; }
  .calendar-category-filter { min-height: var(--tap); padding: 0 12px; }
  .calendar-advanced-filters { align-items: stretch; flex-direction: column; }
  .calendar-advanced-filters .select, .calendar-advanced-filters .btn { width: 100%; }
  .calendar-planner-side { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .calendar-entry { grid-template-columns: 1fr; gap: var(--space-2); }
  .calendar-entry__date { flex-direction: row; align-items: baseline; gap: var(--space-2); }
  .calendar-entry__heading { flex-direction: column; }
  .calendar-entry__badges { justify-content: flex-start; max-width: none; }
}

/* ------------------------------------------------------------------ *
 * Student roster — premium searchable list (Stage A composition).
 * Real production filters remain server-rendered and config-driven.
 * ------------------------------------------------------------------ */
.student-roster-head { margin-bottom: var(--space-6); }
.student-roster-head__eyebrow {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--maroon-wash);
  color: var(--maroon);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.student-roster-head__title { margin: var(--space-3) 0 4px; font-size: var(--fs-display); }
.student-roster-head__desc { margin: 0; max-width: 72ch; color: var(--muted); }
.student-roster-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.student-roster-warning { border-left: 4px solid var(--gold); }
.student-roster-matchreason { color: var(--maroon); font-weight: 600; }

/* Promotion transitions on the student profile: inconsistency flag + calm
   completed summary. Small text, no nested cards. */
.promo-flag { display: block; margin-top: 2px; color: var(--red); font-weight: 600; font-size: var(--fs-xs); }
.promo-done { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); }

.student-roster-filters { display: grid; gap: var(--space-3); padding: 0; }
.student-roster-filters__primary { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.student-roster-search { flex: 1 1 440px; min-width: 260px; }
.student-roster-search .input {
  width: 100%; min-height: var(--tap); padding-left: 42px;
  border-radius: var(--radius-md); background: rgba(255, 253, 249, 0.94);
  box-shadow: var(--shadow-sm);
}
.student-roster-search__icon {
  position: absolute; z-index: 1; left: 16px; top: 50%;
  transform: translateY(-50%); color: var(--muted); font-size: 18px;
  pointer-events: none;
}
.student-roster-statuses { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.student-roster-status {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 0 12px;
  border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: rgba(255, 251, 245, 0.86); color: var(--text);
  text-decoration: none; font-size: var(--fs-xs); font-weight: 800; white-space: nowrap;
}
.student-roster-status:hover { background: var(--maroon-wash); color: var(--maroon); }
.student-roster-status.is-active {
  background: var(--nav-active); border-color: rgba(123, 30, 43, 0.18); color: var(--maroon);
}
.student-roster-filters__advanced { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.student-roster-filters__advanced .select { width: auto; min-width: 160px; }
.student-roster-archived { margin: 0 var(--space-2) 0 0; }
.student-roster-count { margin: 0; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }

.student-roster-table {
  padding: var(--space-3); overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-xl);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.student-roster-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.55fr) minmax(120px, .85fr) minmax(220px, 1.8fr) minmax(100px, .7fr) minmax(110px, .75fr);
  align-items: center; gap: var(--space-4); min-width: 0;
  padding: var(--space-4); border: 1px solid transparent;
  border-radius: var(--radius-md); color: var(--text); text-decoration: none;
}
.student-roster-row--head {
  padding-top: var(--space-3); padding-bottom: var(--space-3);
  color: var(--muted); font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
a.student-roster-row { transition: background .13s ease, border-color .13s ease, box-shadow .13s ease; }
a.student-roster-row:hover {
  background: linear-gradient(180deg, #fffaf2, #f4ebda);
  border-color: rgba(123, 30, 43, 0.14); box-shadow: var(--shadow-sm);
}
a.student-roster-row:focus-visible { outline: 3px solid var(--maroon); outline-offset: -1px; }
.student-roster-row.is-archived { opacity: .62; }
.student-roster-cell { min-width: 0; }
.student-roster-cell--student { display: flex; align-items: center; gap: var(--space-3); }
.student-roster-avatar {
  display: grid; place-items: center; flex: 0 0 40px;
  width: 40px; height: 40px; border-radius: 13px;
  background: var(--grad-brand); color: #fff;
  font-size: var(--fs-sm); font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.student-roster-name { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.student-roster-name strong { overflow-wrap: anywhere; }
.student-roster-name small { color: var(--muted); font-size: var(--fs-xs); }
.student-roster-name .badge { margin-top: 4px; }
.student-roster-mainstream { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.student-roster-mainstream small {
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--gold-wash); color: #7a5c18;
  font-size: var(--fs-xs); font-weight: 700;
}
.student-roster-subjects { display: flex; flex-wrap: wrap; gap: 6px; }
.student-roster-chip {
  padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface-2);
  color: #5f4d39; font-size: var(--fs-xs); font-weight: 600;
}
.student-roster-guardians { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.student-roster-muted { color: var(--muted); }
.student-roster-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-8); text-align: center; color: var(--muted);
}
.student-roster-empty strong { color: var(--text); }
.student-roster-empty .btn { margin-top: var(--space-2); }

@media (max-width: 1120px) {
  .student-roster-filters__primary { align-items: stretch; flex-direction: column; }
  .student-roster-search { flex-basis: auto; width: 100%; }
  .student-roster-row--head { display: none; }
  .student-roster-row {
    grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-3);
    border-color: var(--line); background: linear-gradient(180deg, #fffaf2, #f4ebda);
  }
  .student-roster-row:last-child { margin-bottom: 0; }
  .student-roster-cell[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 4px;
    color: var(--muted); font-size: var(--fs-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
  }
}

@media (max-width: 720px) {
  .student-roster-head__title { font-size: 28px; }
  .student-roster-head__actions .btn { flex: 1 1 auto; }
  .student-roster-search { min-width: 0; }
  .student-roster-statuses { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .student-roster-status { flex: 0 0 auto; min-height: 40px; }
  .student-roster-filters__advanced { align-items: stretch; flex-direction: column; }
  .student-roster-filters__advanced .select,
  .student-roster-filters__advanced .btn { width: 100%; }
  .student-roster-head__actions .btn--sm,
  .student-roster-filters__advanced .btn--sm { min-height: 40px; }
  .student-roster-archived { min-height: var(--tap); }
  .student-roster-table { padding: var(--space-2); border-radius: var(--radius-lg); }
  .student-roster-row { padding: var(--space-4); }
}

/* ------------------------------------------------------------------ *
 * Guardian roster — family cards mirror the approved Stage A layout.
 * Production filtering, links and field-level privacy remain intact.
 * ------------------------------------------------------------------ */
.guardian-roster-head { margin-bottom: var(--space-6); }
.guardian-roster-head__eyebrow {
  display: inline-flex; padding: 7px 12px; border-radius: var(--radius-pill);
  background: var(--maroon-wash); color: var(--maroon);
  font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
}
.guardian-roster-head__title { margin: var(--space-3) 0 4px; font-size: var(--fs-display); }
.guardian-roster-head__desc { margin: 0; max-width: 72ch; color: var(--muted); }
.guardian-roster-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.guardian-roster-warning { border-left: 4px solid var(--gold); }

.guardian-roster-filters { display: grid; gap: var(--space-3); padding: 0; }
.guardian-roster-filters__primary { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.guardian-roster-search { position: relative; flex: 1 1 430px; min-width: 250px; }
.guardian-roster-search .input {
  width: 100%; min-height: var(--tap); padding-left: 42px;
  border-radius: var(--radius-md); background: rgba(255, 253, 249, .94); box-shadow: var(--shadow-sm);
}
.guardian-roster-search__icon { position: absolute; z-index: 1; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 18px; pointer-events: none; }
.guardian-roster-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.guardian-roster-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: rgba(255, 251, 245, .86);
  color: var(--text); text-decoration: none; font-size: var(--fs-xs); font-weight: 800; white-space: nowrap;
}
.guardian-roster-link:hover { background: var(--maroon-wash); color: var(--maroon); }
.guardian-roster-link.is-active { background: var(--nav-active); color: var(--maroon); border-color: rgba(123, 30, 43, .18); }
.guardian-roster-filters__advanced { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.guardian-roster-filters__advanced .select { width: auto; min-width: 208px; }
.guardian-roster-archived { margin: 0 var(--space-2) 0 0; }
.guardian-roster-count { margin: 0; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }

.guardian-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.guardian-card {
  min-width: 0; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-xl);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.guardian-card.is-archived { opacity: .65; }
.guardian-card__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); min-width: 0; }
.guardian-card__avatar {
  display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 15px;
  color: #fff; background: var(--grad-brand); font-size: var(--fs-sm); font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.guardian-card__identity { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.guardian-card__identity a { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.guardian-card__identity a:hover { color: var(--maroon); text-decoration: underline; }
.guardian-card__identity span { color: var(--muted); font-size: var(--fs-sm); }
.guardian-card__flags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.guardian-card__contact { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); }
.guardian-card__contact div {
  display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3);
  border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--fs-sm);
}
.guardian-card__contact dt { color: var(--muted); font-weight: 700; }
.guardian-card__contact dd { min-width: 0; margin: 0; overflow-wrap: anywhere; text-align: right; }
.guardian-card__privacy { margin: 0 0 var(--space-4); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--maroon-wash); color: var(--maroon-deep); font-size: var(--fs-sm); }
.guardian-card__students > span { display: block; margin-bottom: var(--space-2); color: var(--muted); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.guardian-card__students ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.guardian-card__students a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px 14px;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: rgba(123, 30, 43, .05);
  color: var(--maroon); text-decoration: none;
}
.guardian-card__students a:hover { border-color: rgba(123, 30, 43, .16); background: rgba(123, 30, 43, .1); }
.guardian-card__students a strong { overflow-wrap: anywhere; }
.guardian-card__students a small { flex: none; color: var(--muted); font-weight: 600; }
.guardian-card__unlinked { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); font-size: var(--fs-sm); }
.guardian-roster-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8); border-radius: var(--radius-xl); background: var(--gold-wash); color: var(--muted); text-align: center; }
.guardian-roster-empty strong { color: var(--text); }

@media (max-width: 1120px) {
  .guardian-roster-filters__primary { align-items: stretch; flex-direction: column; }
  .guardian-roster-search { flex-basis: auto; width: 100%; }
}

@media (max-width: 720px) {
  .guardian-roster-head__title { font-size: 28px; }
  .guardian-roster-head__actions .btn { flex: 1 1 auto; }
  .guardian-roster-search { min-width: 0; }
  .guardian-roster-links { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .guardian-roster-link { flex: 0 0 auto; min-height: 40px; }
  .guardian-roster-filters__advanced { align-items: stretch; flex-direction: column; }
  .guardian-roster-filters__advanced .select, .guardian-roster-filters__advanced .btn { width: 100%; }
  .guardian-roster-head__actions .btn--sm,
  .guardian-roster-filters__advanced .btn--sm { min-height: 40px; }
  .guardian-roster-archived { min-height: var(--tap); }
  .guardian-card-grid { grid-template-columns: 1fr; }
  .guardian-card { padding: var(--space-4); border-radius: var(--radius-lg); }
}

@media (max-width: 420px) {
  .guardian-card__head { align-items: flex-start; flex-wrap: wrap; }
  .guardian-card__flags { justify-content: flex-start; width: 100%; }
  .guardian-card__contact div { align-items: flex-start; flex-direction: column; gap: 4px; }
  .guardian-card__contact dd { text-align: left; }
  .guardian-card__students a { align-items: flex-start; flex-direction: column; gap: 4px; }
}

/* ------------------------------------------------------------------ *
 * Student profile — premium identity hero + pill tabs (Stage A design).
 * Page-scoped; only alpha variants of the shared tokens are introduced.
 * Tabs are progressive enhancement: the strip ships hidden and JS reveals
 * it; without JS every panel stays visible and the noscript jump nav shows.
 * ------------------------------------------------------------------ */
.student-profile__lead { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }

.student-profile__back {
  width: fit-content;
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--maroon); text-decoration: none;
}
.student-profile__back:hover { text-decoration: underline; }

.student-profile__hero {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--space-5); align-items: center;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  color: #fff8f0;
  background: linear-gradient(135deg, rgba(123, 30, 43, 0.96), rgba(199, 155, 58, 0.90));
  box-shadow: var(--shadow);
}
.student-profile__identity { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.student-profile__id-text { min-width: 0; }
.student-profile__avatar {
  display: grid; place-items: center; flex: none;
  width: 72px; height: 72px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff; font-size: 24px; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.student-profile__avatar--sm {
  width: 44px; height: 44px;
  border-radius: 14px; font-size: 16px;
  background: var(--grad-brand); border: none;
}
.student-profile__name { font-size: 28px; color: #fff8f0; overflow-wrap: anywhere; }
.student-profile__meta { margin: 6px 0 0; color: rgba(255, 248, 240, 0.88); font-size: var(--fs-sm); }
.student-profile__chips { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
.student-profile__chip {
  display: inline-flex; padding: 9px 13px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff8f0;
  font-size: var(--fs-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
  text-align: center;
}
.student-profile__chip--warn { background: rgba(93, 20, 32, 0.45); border-color: rgba(255, 255, 255, 0.3); }

/* Pill tabs */
.student-profile-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.student-profile-tabs[hidden] { display: none; }
.student-profile-tab {
  min-height: var(--tap); padding: 10px 18px;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  background: var(--maroon-wash); color: var(--maroon);
  font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.student-profile-tab:hover { background: rgba(123, 30, 43, 0.14); }
.student-profile-tab[aria-selected="true"] {
  background: var(--grad-maroon); color: #fff;
  box-shadow: 0 8px 20px rgba(123, 30, 43, 0.22);
}
.student-profile-tab:focus-visible,
.student-profile__back:focus-visible,
.student-profile-panel:focus-visible { outline: 3px solid var(--maroon); outline-offset: 2px; }
.student-profile-panel[hidden] { display: none; }

/* Overview / guardian card grids */
.student-profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.student-profile-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.student-profile-card {
  min-width: 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fffaf2, #f7eedd);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.student-profile-card__title { font-size: var(--fs-body); font-weight: 800; color: var(--maroon-deep); margin-bottom: var(--space-3); }
.student-profile-card .kv { grid-template-columns: 1fr; }
.student-profile-card__note { margin: var(--space-3) 0 0; color: var(--muted); font-size: var(--fs-sm); }
.student-profile-card__figure { margin: var(--space-3) 0 0; font-size: 30px; font-weight: 800; color: var(--maroon-deep); }
.student-profile-card__figure span { margin-left: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }

.student-profile-mini { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.student-profile-mini li { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.student-profile-mini li:last-child { border-bottom: 0; padding-bottom: 0; }
.student-profile-mini span { color: var(--muted); font-size: var(--fs-sm); }

/* Guardian cards */
.student-profile-guardian__head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.student-profile-guardian__name { display: block; font-weight: 700; color: var(--maroon-deep); text-decoration: none; overflow-wrap: anywhere; }
.student-profile-guardian__name:hover { text-decoration: underline; }
.student-profile-guardian__rel { color: var(--muted); font-size: var(--fs-sm); }
.student-profile-guardian__flags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.student-profile-contact { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; }
.student-profile-contact div {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.55); border: 1px solid var(--line);
}
.student-profile-contact dt { color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.student-profile-contact dd { margin: 0; font-size: var(--fs-sm); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.student-profile-guardian__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* Year timeline (status / enrolments / reports) */
.student-profile-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.student-profile-timeline__item { position: relative; padding-left: var(--space-5); border-left: 2px solid rgba(123, 30, 43, 0.14); }
.student-profile-timeline__item::before {
  content: ""; position: absolute; left: -6px; top: 7px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px rgba(199, 155, 58, 0.25);
}
.student-profile-timeline__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.student-profile-timeline__marker { font-weight: 800; color: var(--maroon-deep); }
.student-profile-timeline__action { margin-left: auto; }
.student-profile-timeline__note { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--fs-sm); }
.student-profile-timeline__item .tablewrap { margin-top: var(--space-3); }

/* Fee stat cards */
.student-profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }

@media (max-width: 1000px) {
  .student-profile-grid, .student-profile-grid--2 { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .student-profile__hero { grid-template-columns: 1fr; padding: var(--space-5); }
  .student-profile__identity { flex-wrap: wrap; }
  .student-profile__chips { flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: var(--space-2); }
  .student-profile__name { font-size: 24px; }
  .student-profile__avatar { width: 56px; height: 56px; font-size: 20px; border-radius: 18px; }
  .student-profile__avatar--sm { width: 44px; height: 44px; font-size: 16px; border-radius: 14px; }
  .student-profile-stats { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ *
 * Login (standalone, outside the shell) — split demo-style committee gate.
 * Production keeps real email/password auth only; no demo verification code.
 * Mobile-first: full-width card, 48px tap targets, no overflow at 360px.
 * ------------------------------------------------------------------ */
.login {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}
.login__side {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 5vw, 72px);
  color: #fff9f2;
  background:
    radial-gradient(circle at 86% 6%, rgba(255, 255, 255, 0.16), transparent 24%),
    linear-gradient(160deg, rgba(93, 20, 32, 0.98), rgba(123, 30, 43, 0.96) 56%, rgba(199, 155, 58, 0.92));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login__side::before {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: -90px;
  top: -80px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 60%);
  pointer-events: none;
}
.login__eyebrow {
  display: inline-flex;
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.09);
  color: #fff9f2;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
}
.login__headline {
  max-width: 13ch;
  margin: 20px 0 14px;
  font-size: clamp(2rem, 1.6rem + 1.4vw, 3rem);
  line-height: 1.02;
  color: #fff9f2;
}
.login__lede {
  max-width: 54ch;
  margin: 0;
  color: rgba(255, 249, 242, 0.88);
  font-size: var(--fs-body);
  line-height: 1.55;
}
.login__features {
  display: grid;
  gap: var(--space-3);
  margin-top: clamp(28px, 5vw, 52px);
  max-width: 56ch;
}
.login__feature {
  padding: var(--space-4);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.login__feature strong {
  display: block;
  margin-bottom: 5px;
  color: #fff;
  font-size: var(--fs-body);
}
.login__feature span {
  color: rgba(255, 249, 242, 0.84);
  font-size: var(--fs-sm);
}
.login__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 6vw, 72px);
  background: linear-gradient(180deg, #fffaf3, #f7efdf);
}
.login__card {
  width: 100%;
  max-width: 430px;
  box-sizing: border-box;
  padding: var(--space-7);
  border-radius: 26px;
  background: rgba(255, 252, 246, 0.9);
  border: 1px solid rgba(120, 88, 52, 0.14);
  box-shadow: 0 18px 42px rgba(67, 42, 17, 0.11);
}
.login__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.login__crest {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: linear-gradient(135deg, var(--maroon), var(--gold));
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 30px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(93, 20, 32, 0.22);
}
.login__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--text);
}
.login__logo small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}
.login__notice,
.login__error {
  margin-bottom: var(--space-4);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.45;
}
.login__notice {
  background: var(--gold-wash);
  border: 1px solid rgba(199, 155, 58, 0.4);
  color: #6b4f12;
}
.login__error {
  background: var(--maroon-wash);
  border: 1px solid rgba(179, 48, 58, 0.35);
  color: var(--maroon-deep);
}
.login__card .field {
  display: block;
  margin: var(--space-4) 0 0;
}
.login__card .field label {
  display: block;
  margin-bottom: var(--space-2);
  color: #5f4d39;
  font-size: 13px;
  font-weight: 700;
}
.login__card .input {
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 15px;
  border: 1px solid rgba(120, 88, 52, 0.16);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font-size: 16px;
}
.login__card .input::placeholder { color: #9c8a74; }
.login__submit {
  width: 100%;
  min-height: 50px;
  margin-top: var(--space-5);
  border-radius: 15px;
  font-size: var(--fs-body);
  font-weight: 800;
}
.login__helper {
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: #f5ebd8;
  border: 1px solid rgba(199, 155, 58, 0.22);
  color: #6e5530;
  font-size: 13px;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; }
  .login__side {
    min-height: auto;
    padding: var(--space-7);
  }
  .login__headline { max-width: 15ch; }
  .login__features { display: none; }
  .login__panel { padding: var(--space-6) var(--space-5) var(--space-8); }
}
@media (max-width: 420px) {
  .login__side { padding: var(--space-6) var(--space-5); }
  .login__headline { font-size: 2rem; }
  .login__panel { padding: var(--space-5) var(--space-4) var(--space-7); }
  .login__card { padding: var(--space-5); border-radius: 22px; }
  .login__crest { width: 52px; height: 52px; flex-basis: 52px; border-radius: 17px; }
  .login__title { font-size: 24px; }
}

/* ------------------------------------------------------------------ *
 * Responsive — sidebar becomes a drawer at 1024px
 * ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid--3, .quicklinks, .confgrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kv { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .drawer-btn {
    display: inline-grid; place-items: center;
    width: var(--tap); height: var(--tap);
    border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
    background: var(--surface); cursor: pointer; font-size: 20px; color: var(--maroon);
  }
  .sidebar {
    position: fixed; z-index: 60; left: 0; top: 0;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow);
  }
  .drawer-toggle:checked ~ .shell .sidebar { transform: translateX(0); }
  .drawer-toggle:checked ~ .shell .drawer-scrim { display: block; }
  .drawer-scrim {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(35,27,21,0.4);
  }
}

@media (min-width: 1025px) {
  .drawer-scrim { display: none !important; }
}

@media (max-width: 720px) {
  .main { padding: var(--space-4); }
  .grid--2, .grid--3, .grid--4, .quicklinks, .confgrid { grid-template-columns: 1fr; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar .row { justify-content: stretch; }
  .toolbar .btn { flex: 1 1 auto; }
  .topbar { padding: var(--space-3) var(--space-4); gap: var(--space-3); flex-wrap: nowrap; }
  /* Long titles on a phone: the title keeps its words whole ("Fees & Reminders"
     wraps at the space; "Communications" stays one word) and it is the user
     chip that yields, truncating with an ellipsis. Only a single word wider
     than the title's cap would ever be broken, as the last resort. */
  .topbar__heading { flex: 1 0 auto; max-width: 58%; }
  .topbar__title { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
  .topbar__user { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; gap: var(--space-2); }
  .topbar__user .badge { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar__user .btn { white-space: nowrap; }
  .tablewrap .table { min-width: 520px; }
  .filters .input, .filters .select { width: 100%; flex: 1 1 100%; }
  .stat__value { font-size: 26px; }
  .page-head__title { font-size: 26px; }
}

/* ---- Blank class registers (manual 1/0/L marking) ------------------- */

.register-datefield { display: flex; flex-direction: column; gap: 4px; }
.register-datefield .input { min-width: 170px; }

/* Step 1: configured period vs custom range — a compact accessible
   segmented control built from real radios, fully usable without JS. */
.register-mode { border: 0; padding: 0; margin: 0 0 var(--space-3); }
.register-mode legend { padding: 0 0 6px; }
.segmented {
  display: inline-flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: rgba(255, 251, 245, 0.86); overflow: hidden;
}
.segmented__option {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap); padding: 0 16px; cursor: pointer;
  font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
}
.segmented__option + .segmented__option { border-left: 1px solid var(--line); }
.segmented__option input { accent-color: var(--maroon); margin: 0; }
.segmented__option:hover { background: var(--maroon-wash); }
.segmented__option:has(input:checked) { background: var(--nav-active); color: var(--maroon); }
.segmented__option:has(input:focus-visible) { outline: 2px solid var(--maroon); outline-offset: -2px; }

.register-rangepanes { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
.register-rangepane { flex: 1 1 280px; min-width: 0; }
/* Only the ACTIVE mode's pane is shown — the inactive pane is hidden (and
   its fields disabled, so they are never submitted). Belt-and-braces: honour
   the hidden attribute whatever display the pane would otherwise get. */
.register-rangepane[hidden] { display: none; }
.register-mode noscript { display: block; margin-top: var(--space-2); }
.register-rangepane .select { min-width: 0; max-width: 100%; }
.register-rangepane__empty { display: block; font-size: var(--fs-xs); color: var(--muted); margin: 0 0 var(--space-3); }

/* A padded hit area around each class checkbox — the box itself stays
   compact but the touch target meets the 44px minimum. */
.register-classpick {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap); margin: -10px; cursor: pointer;
}
.register-classpick input { width: 18px; height: 18px; accent-color: var(--maroon); }

/* On small screens every register-flow control meets the 44px tap minimum —
   including the toolbar pills that stay compact on desktop. */
@media (max-width: 720px) {
  .register-flow .btn--sm { min-height: var(--tap); }
}

/* Screen-reader-only label, for a column header that is visual clutter but
   still needs a name for anyone navigating by keyboard or screen reader. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Compact fee rows, and the Actions menu that replaced a row of six buttons.
   <details> gives a keyboard-operable disclosure with no JavaScript, so the
   menu works with scripting off and focus behaves the way the browser
   already knows how to do. */
.fee-rows__name { font-weight: 700; }
.fee-rows__group > th {
  background: var(--gold-wash); font-weight: 700; color: var(--maroon);
  text-align: left; padding-top: var(--space-3); padding-bottom: var(--space-3);
}
.fee-rows__controls { white-space: nowrap; }
.fee-rows__detail > td { padding-top: 0; border-top: 0; }
.fee-rows__detail summary { font-size: var(--fs-xs); color: var(--muted); cursor: pointer; min-height: var(--tap); display: flex; align-items: center; }

.fee-actions { position: relative; display: inline-block; }
.fee-actions > summary { list-style: none; cursor: pointer; }
.fee-actions > summary::-webkit-details-marker { display: none; }
.fee-actions__menu {
  position: absolute; right: 0; z-index: 20; min-width: 15rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: var(--space-2); display: flex; flex-direction: column;
}
.fee-actions__menu a,
.fee-actions__menu button {
  display: flex; align-items: center; min-height: var(--tap);
  padding: 0 var(--space-3); border: 0; background: none; text-align: left;
  font: inherit; color: var(--text); text-decoration: none; cursor: pointer;
  border-radius: var(--radius-sm); width: 100%;
}
.fee-actions__menu a:hover, .fee-actions__menu button:hover { background: var(--gold-wash); }
.fee-actions__menu a:focus-visible, .fee-actions__menu button:focus-visible { outline: 2px solid var(--maroon); outline-offset: -2px; }
.fee-actions__menu form { margin: 0; }

@media (max-width: 720px) {
  /* On a phone the menu is not worth floating — let it sit in the flow so it
     can never be clipped off the side of the screen. */
  .fee-actions__menu { position: static; min-width: 0; box-shadow: none; }
}

/* Record-payment form: one tickable row per fee, and a compact detail grid.
   Rows are generous enough to tap and to read — "compact" here means fewer
   repeated labels, not smaller text. */
.pay-fee {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md);
  margin-bottom: var(--space-2); background: var(--surface); cursor: pointer;
  min-height: var(--tap);
}
.pay-fee:hover { border-color: var(--maroon); }
.pay-fee:focus-within { outline: 2px solid var(--maroon); outline-offset: 2px; }
.pay-fee input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--maroon); flex: 0 0 auto; }
.pay-fee__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pay-fee__name { font-weight: 700; }
.pay-fee__amount { flex: 0 0 auto; white-space: nowrap; }

.pay-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

@media (max-width: 720px) {
  /* Stack the money under the name rather than squeezing both onto one line. */
  .pay-fee { flex-wrap: wrap; }
  .pay-fee__amount { width: 100%; text-align: right; }
  .pay-grid { grid-template-columns: 1fr; }
}

/* Messages pager. The page links are btn--sm so they stay compact beside the
   "Page 2 of 3" caption on desktop; on a phone they take the shared 44px
   target, exactly as the register-flow pills above do. Wrapping is allowed so
   a narrow screen stacks Newer/Older rather than overflowing the page. */
.msg-pager { flex-wrap: wrap; row-gap: var(--space-2); }
@media (max-width: 720px) {
  .msg-pager .btn--sm { min-height: var(--tap); }
}

/* Step 2: saved override vs calendar recommendation. */
.register-conflict {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
.register-conflict__text {
  display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--maroon);
}
.register-mixed {
  display: block; margin-top: 4px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
}

/* Saturday planner (step 2): teaching / holiday / event per generated date */
.register-daytypes { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.register-daytype {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap); padding: 0 12px; cursor: pointer;
  border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: rgba(255, 251, 245, 0.86);
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
}
.register-daytype input { accent-color: var(--maroon); margin: 0; }
.register-daytype:hover { background: var(--maroon-wash); }
.register-daytype:has(input:checked) { background: var(--nav-active); border-color: rgba(123, 30, 43, 0.28); color: var(--maroon); }
.register-daytype--holiday:has(input:checked) { background: var(--gold-wash); border-color: rgba(199, 155, 58, 0.4); color: #8a6620; }
.register-daytype--event:has(input:checked) { background: rgba(123, 30, 43, 0.10); border-color: rgba(123, 30, 43, 0.3); color: var(--maroon); }

.register-plan__row--holiday td { background: rgba(237, 228, 210, 0.45); }
.register-plan__row--event td { background: rgba(243, 226, 220, 0.45); }
.register-plan .input--sm { min-width: 150px; }

/* Blank register grid (step 3 preview): shaded holiday/event columns with
   compact HORIZONTAL dd/mm headings + a small H/E marker (print-safe when
   shading disappears in black-and-white copies). Full labels live in the
   "Special dates" line above the grid. Wide ranges scroll horizontally
   inside .tablewrap only. */
.register-blank th, .register-blank td { white-space: nowrap; }
.register-blank__specials {
  margin: var(--space-2) 0 0; font-size: var(--fs-xs); font-weight: 700; color: var(--maroon);
}
.register-blank__day {
  width: 48px; min-width: 48px; max-width: 48px;
  height: 48px; padding: 5px 3px;
  text-align: center; vertical-align: middle;
}
.register-blank__date {
  display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.02em;
}
.register-blank__marker {
  display: block; margin-top: 1px;
  font-size: 10px; font-weight: 800; color: inherit; opacity: 0.9;
}
.register-blank__day--holiday, .register-blank__cell--holiday { background: #ede4d2; color: #8a7a5f; }
.register-blank__day--event, .register-blank__cell--event { background: #f3e2dc; color: #8a5f57; }
.register-blank__cell--holiday, .register-blank__cell--event { text-align: center; }
.register-blank td.register-blank__cell { min-width: 48px; max-width: 52px; height: 34px; }

.input--sm { min-height: 36px; padding: 6px 10px; font-size: var(--fs-xs); }

@media (max-width: 720px) {
  .register-daytypes { gap: var(--space-2); }
  .register-daytype { flex: 1 1 auto; justify-content: center; }
  .register-datefield .input { width: 100%; }
}

/* ---------- Year transition (Promote / prepare next year) ------------------
   A clean table-like roster inside ONE card (never nested cards): a sticky
   header row and one grid row per student — Student | Current class |
   Decision | Target class. The decision is a polished segmented control; the
   target select only appears for Promote / Keep (JS adds `.js` to the list —
   with JavaScript off everything stays visible and the form still works).
   Below 1025px the grid collapses to labelled cards, so the whole roster
   stays usable at 360px with no page-level horizontal scrolling. */
.promote-legend { margin: 0; padding-left: 1.15em; display: grid; gap: var(--space-2); }
.promote-legend li { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.promote-legend strong { color: var(--maroon-deep); }

.promote-prepare { border-left: 4px solid var(--gold); }

.promote-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}
.promote-toolbar__bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.promote-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.promote-filter {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 36px; padding: 0 var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: transparent; color: var(--muted); text-decoration: none;
  font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
}
.promote-filter:hover { background: var(--maroon-wash); color: var(--maroon); }
.promote-filter.is-active { background: var(--nav-active); color: var(--maroon); border-color: rgba(123, 30, 43, 0.18); }
.promote-filter:focus-visible { outline: 3px solid var(--maroon); outline-offset: 2px; }
.promote-filter__n { opacity: 0.75; font-variant-numeric: tabular-nums; }

.promote-list { display: grid; }
.promote-row {
  display: grid; gap: var(--space-2) var(--space-4);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr) minmax(0, 1.55fr) minmax(0, 1.25fr);
  align-items: center;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--line);
}
.promote-row:last-child { border-bottom: 0; }
.promote-row[hidden] { display: none; }
.promote-row--head {
  /* Sticks just below the (sticky, z-20) topbar while the roster scrolls.
     The desktop topbar is 81px tall (eyebrow + title + padding + border). */
  position: sticky; top: 81px; z-index: 5;
  background: var(--surface);
  padding: var(--space-3) 0;
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  border-bottom: 1px solid var(--line-strong);
}
.promote-row.is-settled { background: rgba(82, 105, 90, 0.05); }
.promote-row.is-blocked { background: rgba(179, 48, 58, 0.06); }
.promote-row > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; justify-content: center; }
.promote-row__meta { font-size: var(--fs-xs); color: var(--muted); }
.promote-row__nowline { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.promote-row__notready { font-size: var(--fs-sm); color: var(--muted); }
.promote-row__label { display: none; }
.promote-row .select { width: 100%; min-width: 0; }
.promote-row__target [data-promotion-hint] { line-height: 1.35; }

/* Target class appears only once Promote or Keep is chosen (JS on). */
.promote-list.js .promote-row[data-choice="undecided"] .promote-row__target .select,
.promote-list.js .promote-row[data-choice="undecided"] .promote-row__target [data-promotion-hint],
.promote-list.js .promote-row[data-choice="remove"] .promote-row__target .select,
.promote-list.js .promote-row[data-choice="remove"] .promote-row__target [data-promotion-hint] { display: none; }
.promote-list.js .promote-row[data-choice="undecided"] .promote-row__target::after,
.promote-list.js .promote-row[data-choice="remove"] .promote-row__target::after {
  content: "—"; color: var(--line-strong); font-weight: 700;
}
.promote-list.js .promote-row[data-choice="remove"] .promote-row__target::after { content: "No enrolment next year"; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }

/* Segmented decision control — four real radios presented as ONE compact
   joined control (dividers, no gaps), always on a single row. The radios stay
   real inputs (visually hidden), so grouping, arrow-key movement and screen
   readers all behave natively; the selected segment fills maroon/gold, Keep
   sage, Remove red. Height stays a comfortable tap target and grows to the
   house 44px on touch layouts. */
.segmented {
  display: inline-flex; flex-wrap: nowrap; max-width: 100%;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface); overflow: hidden;
}
.segmented__opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 10px;
  color: var(--muted); font-size: var(--fs-xs); font-weight: 700;
  white-space: nowrap; cursor: pointer; position: relative;
}
.segmented__opt + .segmented__opt { border-left: 1px solid var(--line); }
.segmented__opt input {
  /* Real radio, visually hidden but focusable — never display:none. */
  position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0;
  pointer-events: none;
}
.segmented__opt:hover { background: var(--maroon-wash); color: var(--maroon); }
.segmented__opt:has(input:focus-visible) { outline: 3px solid var(--maroon); outline-offset: -3px; z-index: 1; }
.segmented__opt:has(input:checked) { background: var(--nav-active); color: var(--maroon); box-shadow: inset 0 0 0 1px rgba(123, 30, 43, 0.22); }
.segmented__opt--keep:has(input:checked) { background: rgba(82, 105, 90, 0.16); color: var(--sage); box-shadow: inset 0 0 0 1px rgba(82, 105, 90, 0.30); }
.segmented__opt--remove:has(input:checked) { background: rgba(179, 48, 58, 0.12); color: var(--red); box-shadow: inset 0 0 0 1px rgba(179, 48, 58, 0.28); }

.promote-stats .stat__value { font-size: 28px; }
.promote-block { border-left: 4px solid var(--red); }

/* Tablet and mobile: labelled cards instead of table columns. */
@media (max-width: 1024px) {
  .promote-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; padding: var(--space-4) 0; }
  .promote-row--head { display: none; }
  .promote-row__label { display: block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
  .promote-row__who { order: 1; }
  .promote-row__now { order: 2; }
  .promote-row__now .promote-row__label { display: none; }
  .promote-row__now { align-items: flex-end; text-align: right; }
  .promote-row__decision { order: 3; grid-column: 1 / -1; }
  .promote-row__target { order: 4; grid-column: 1 / -1; }
  .promote-list.js .promote-row[data-choice="undecided"] .promote-row__target,
  .promote-list.js .promote-row[data-choice="remove"] .promote-row__target .promote-row__label { display: none; }
}

@media (max-width: 1024px) {
  /* Touch layouts: full-width control, equal segments, 44px tap height. */
  .segmented { display: flex; width: 100%; }
  .segmented__opt { flex: 1 1 0; min-height: var(--tap); padding: 0 6px; }
}

@media (max-width: 720px) {
  .promote-toolbar { justify-content: flex-start; }
  .promote-toolbar__bulk .btn { flex: 1 1 auto; }
  .promote-filter { flex: 1 1 auto; min-height: var(--tap); }
  .promote-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
  /* Keep all four segments on one row even at 360px. */
  .segmented__opt { font-size: 11px; padding: 0 4px; letter-spacing: -0.01em; }
}

/* ---- Browser print: blank class registers ---------------------------
   Registers print term by term on A4 landscape with narrow printer-safe
   margins. The app shell (navigation, topbar, toolbars, buttons, flashes)
   disappears; each class register keeps every date column, every student
   row, its headings, Special dates line and borders, and a normal term
   stays on one page per class. */
@media print {
  @page { size: A4 landscape; margin: 7mm; }

  .sidebar, .topbar, .drawer-toggle, .drawer-scrim, .drawer-btn,
  .toolbar, .btn, button, .flashes, .flash, noscript, form.filters { display: none !important; }

  body { background: #fff; }
  .shell { display: block; min-height: 0; }
  .main { padding: 0; max-width: none; }
  .page-head__title { font-size: 20px; }

  .card {
    box-shadow: none; border: 0; background: #fff;
    padding: 0; margin: 0 0 10px;
  }

  /* Wide tables scroll on screen; in print they must be fully visible. */
  .tablewrap { overflow: visible; }

  /* One class register per page: break before each class card (the first
     card after the summary starts a fresh page) and never split a term
     table across pages. Cells print compact — screen-sized 34px rows would
     make a 25-student table taller than one page and force a split. */
  .register-flow .card + .card { page-break-before: always; break-before: page; }
  .register-blank { page-break-inside: avoid; break-inside: avoid; font-size: 10px; width: auto; }
  .card__title { font-size: 14px; }
  .card__desc, .register-blank__specials { font-size: 10px; }
  .register-blank th, .register-blank td { border: 1px solid #b9a88b; padding: 2px 4px; }
  .register-blank td.register-blank__cell { height: 20px; min-width: 32px; max-width: none; }
  .register-blank__day { width: 36px; min-width: 36px; max-width: none; height: 30px; padding: 2px 3px; }
  .register-blank__day--holiday, .register-blank__cell--holiday,
  .register-blank__day--event, .register-blank__cell--event {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* ============================================================================
   Fees dashboard — the Stage A premium treatment, scoped to this screen.

   Adapted from the approved demo (../htsa-sms fees page): warm cream surfaces,
   restrained gold accent, rounded cards, soft borders. Every colour, radius and
   space here is an existing shared token, so the dashboard cannot drift from
   the rest of the back office.

   Everything is under .fees-dash except the .fee-stat/.fee-row family, which is
   only ever rendered inside it. The status pills deliberately REUSE the roster's
   own .student-roster-status class rather than cloning it, so Students,
   Guardians and Fees stay one control at one size — 36px on desktop, 40px at
   720px and below.
   ========================================================================== */

/* ---- Heading strip: year, destinations, one primary action ---- */
.fees-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3) var(--space-4); justify-content: space-between;
}
.fees-bar__year { display: flex; align-items: center; gap: var(--space-2); margin: 0; flex-wrap: wrap; }
.fees-bar__yearlabel {
  font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
}
.fees-bar__year .select { width: auto; min-width: 10rem; min-height: 36px; }
.fees-bar__nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }

.fees-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 36px; padding: 0 12px;
  border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: rgba(255, 251, 245, 0.86); color: var(--text);
  text-decoration: none; font-size: var(--fs-xs); font-weight: 800; white-space: nowrap;
}
.fees-link:hover { background: var(--maroon-wash); color: var(--maroon); }

/* "More" — a disclosure, so it is keyboard-operable with no JavaScript. */
.fees-more { position: relative; display: inline-block; }
.fees-more > summary { list-style: none; cursor: pointer; }
.fees-more > summary::-webkit-details-marker { display: none; }
.fees-more[open] > summary { background: var(--nav-active); color: var(--maroon); border-color: rgba(123, 30, 43, 0.18); }
.fees-more__menu {
  position: absolute; right: 0; z-index: 30; min-width: 16rem; margin-top: var(--space-2);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  padding: var(--space-2);
}
.fees-more__menu a {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap); padding: 0 var(--space-3);
  border-radius: var(--radius-sm); color: var(--text); text-decoration: none;
  font-size: var(--fs-sm); font-weight: 600;
}
.fees-more__menu a:hover { background: var(--gold-wash); }
.fees-more__menu a:focus-visible { outline: 2px solid var(--maroon); outline-offset: -2px; }

/* ---- Summary cards ---- */
.fees-stats { display: grid; gap: var(--space-4); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .fees-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .fees-stats { grid-template-columns: 1fr; } }
.fee-stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
/* One restrained gold-and-maroon wash, on the figure the committee acts on. */
.fee-stat--accent {
  background: linear-gradient(135deg, rgba(123, 30, 43, 0.06), rgba(199, 155, 58, 0.10));
  border-color: rgba(123, 30, 43, 0.16);
}
.fee-stat__label {
  color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: 0.07em; font-weight: 800;
}
.fee-stat__value { font-size: 28px; font-weight: 800; color: var(--maroon-deep); line-height: 1.15; }
.fee-stat__value--alert { color: var(--red); }
.fee-stat__sub { color: var(--muted); font-size: var(--fs-sm); }

/* ---- Status pills ---- */
.fees-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fees-filter__count {
  margin-left: var(--space-2); padding: 1px 8px;
  border-radius: var(--radius-pill); background: rgba(123, 30, 43, 0.12);
  font-size: var(--fs-xs);
}

/* ---- Compact family list ---- */
.fee-list { display: grid; gap: var(--space-2); }
.fee-row {
  display: grid; align-items: center; gap: var(--space-4);
  grid-template-columns: 1.4fr 1.8fr 1fr 1fr 1.1fr;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
}
.fee-row--head {
  color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 800; padding-bottom: 0;
}
.fee-row:not(.fee-row--head) {
  background: linear-gradient(180deg, #fffaf2, #f4ebda);
  border: 1px solid rgba(120, 88, 52, 0.10);
}
.fee-cell { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fee-cell small { color: var(--muted); font-size: var(--fs-xs); }
.fee-family { font-weight: 800; color: var(--maroon); text-decoration: none; }
.fee-family:hover { text-decoration: underline; }
.fee-children small strong { color: var(--text); font-weight: 700; }
.fee-num { text-align: right; }
.fee-num strong { color: var(--maroon-deep); font-weight: 800; }
.fee-statuses { flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---- Disclosures ---- */
.fees-disclosure > summary {
  cursor: pointer; min-height: var(--tap); display: flex; align-items: center;
  color: var(--maroon);
}

/* Five columns need room; below this the rows stack and label themselves. */
@media (max-width: 1100px) {
  .fee-row--head { display: none; }
  .fee-row { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .fee-cell[data-label]::before {
    content: attr(data-label);
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--muted); font-weight: 800;
  }
  .fee-num { text-align: left; }
}

@media (max-width: 720px) {
  /* Same touch target as the Students and Guardians rosters. */
  .fees-link { min-height: 40px; }
  .fees-bar__year .select { min-height: 40px; width: 100%; }
  .fees-bar, .fees-bar__year, .fees-bar__nav { width: 100%; }
  .fees-bar__nav { flex-wrap: wrap; }
  .fees-bar__primary { flex: 1 1 100%; justify-content: center; }
  /* In the flow rather than floating, so it can never be clipped off-screen. */
  .fees-more { width: 100%; }
  .fees-more__menu { position: static; min-width: 0; box-shadow: none; }
  .fees-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .fees-filters .student-roster-status { flex: 0 0 auto; }
}

@media (max-width: 560px) {
  .fee-row { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ *
 * Invoice communications — batch emailing of existing invoices.
 * Reuses the Fees bar, pills, badges and tables; adds only compact
 * grouping so controls sit together with an 8px gap, never spread out.
 * ------------------------------------------------------------------ */
.comms .comms-inline { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
.comms .comms-actions,
.comms .comms-select { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.comms .comms-select .field-hint { flex: 1 1 22rem; margin: 0; }
.comms .comms-filters__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2) var(--space-3); }
.comms .comms-filters__search { grid-column: span 2; }
.comms .field--inline { display: flex; flex-direction: column; gap: 4px; }
.comms .field--inline .field__label { font-size: var(--fs-xs); color: var(--muted); }
.comms .comms-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.comms .comms-pill { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); font-size: var(--fs-sm); }
.comms .comms-pill[hidden] { display: none; }
.comms .comms-results__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.comms .comms-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.comms .comms-table { min-width: 760px; } /* scrolls inside .tablewrap on narrow screens instead of squeezing rows */
.comms .comms-table th.num, .comms .comms-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.comms .comms-table__tick { width: 2.5rem; text-align: center; }
.comms .comms-table__noselect { color: var(--muted); }
.comms .comms-table__row--out td { color: var(--muted); }
.comms .comms-table__sel { max-width: 28rem; }
.comms .comms-table__students { max-width: 22rem; }
.comms .comms-student--sibling { color: var(--muted); }
.comms .comms-table__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }
.comms .comms-details > summary { list-style: none; cursor: pointer; }
.comms .comms-details > summary::-webkit-details-marker { display: none; }
.comms .comms-mini { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); min-width: 16rem; }
.comms .comms-reason { max-width: 26rem; margin-top: 4px; }
@media (max-width: 720px) {
  .comms .comms-pill, .comms .btn--sm { min-height: 40px; }
  .comms .comms-filters__search { grid-column: span 1; }
}

/* Skip link: off-screen until it receives focus, then a visible pill. */
.comms .comms-skip { position: absolute; left: -9999px; top: auto; }
.comms .comms-skip:focus { position: static; display: inline-block; min-height: 36px; padding: 0 var(--space-3); line-height: 36px; border-radius: var(--radius-pill); background: var(--maroon); color: #fff; outline: 2px solid var(--gold); outline-offset: 2px; }

/* ------------------------------------------------------------------ *
 * Invoice communications workspace (Phase 3b): summary cards, the list
 * beside the email preview, recipient cards whenever the list pane is
 * narrow (a container query, so the phone layout and the desktop pane
 * beside the preview share one rule), a List / Preview switch and an
 * action bar below 1024px. Scoped to .comms; the shell is untouched.
 * ------------------------------------------------------------------ */
.comms .comms-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
.comms .comms-summary .fee-stat { padding: var(--space-4); gap: 2px; }
.comms .comms-summary .fee-stat__value { font-size: 24px; }
.comms .comms-summary .fee-stat__sub { font-size: var(--fs-xs); }
.comms .comms-filters__row--main { grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); }
.comms .comms-filters__row--main .comms-filters__search { grid-column: auto; }
.comms .comms-advanced > summary { gap: var(--space-2); flex-wrap: wrap; font-weight: 700; }
.comms .comms-advanced__summary { color: var(--muted); font-weight: 400; font-size: var(--fs-sm); }
.comms .comms-advanced .comms-filters__row { margin-top: var(--space-2); }
.comms .comms-views { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.comms .comms-view {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3);
  border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface);
  text-decoration: none; color: var(--text); font-weight: 700; font-size: var(--fs-sm);
}
.comms .comms-view.is-on { background: var(--maroon-wash); border-color: rgba(123, 30, 43, 0.3); color: var(--maroon); }
.comms .comms-note { border-left: 4px solid var(--gold); background: var(--gold-wash); padding: var(--space-3) var(--space-4); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--fs-sm); }
.comms .comms-problem { border-left: 4px solid var(--red); }
.comms .comms-panes { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.comms .comms-pane { min-width: 0; container-type: inline-size; container-name: comms-pane; }
.comms .comms-pane--preview { position: sticky; top: var(--space-4); }
.comms .comms-switch { display: none; }
.comms .comms-actionbar { display: none; }
.comms .comms-table--cards { min-width: 0; }
.comms .comms-table--cards td { vertical-align: top; }
.comms .comms-table__meta, .comms .comms-table__students, .comms .comms-table__addr { display: block; font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }
.comms .comms-table__status .badge { display: inline-block; margin-top: 4px; }
.comms .comms-table__status .comms-reason { display: block; }
.comms .comms-resolve { display: inline-block; margin-top: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--maroon); }
.comms .comms-resolve__why, .comms .comms-resolve__step { display: block; margin-top: 6px; }
.comms .comms-resolve__why { font-weight: 600; color: var(--text); }
.comms .comms-previewcard__head { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; align-items: flex-start; }
.comms .comms-previewcard__which { font-weight: 400; color: var(--muted); font-size: var(--fs-sm); }
.comms .comms-previewcard__tools { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.comms .comms-previewcard__tools .is-on { background: var(--maroon-wash); color: var(--maroon); }
.comms .comms-previewcard__empty { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.comms .comms-previewcard__frame { width: 100%; height: min(72vh, 820px); border: 1px solid var(--line); border-radius: var(--radius-sm); background: #e9e1d3; }
.comms .comms-approve .comms-select { align-items: center; }

/* Recipient cards whenever the list pane is narrower than the table needs —
   beside the preview on a laptop, or on any phone or tablet. One DOM, one
   set of tick boxes; only the presentation changes. */
@container comms-pane (max-width: 759px) {
  .comms-tablewrap { overflow: visible; }
  .comms-table--cards thead { display: none; }
  .comms-table--cards, .comms-table--cards tbody { display: block; }
  .comms-table--cards tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--space-3);
    padding: var(--space-3); margin-bottom: var(--space-2);
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fffdf9;
  }
  .comms-table--cards tr.comms-table__row--out { background: #fbf7f0; }
  .comms-table--cards td { display: block; padding: 0; border: 0; }
  .comms-table--cards td.comms-table__tick { grid-row: 1 / span 5; width: auto; padding-top: 2px; }
  .comms-table--cards td:not(.comms-table__tick) { grid-column: 2; }
  .comms-table--cards td.num { text-align: left; font-weight: 800; color: var(--maroon-deep); }
  .comms-table--cards td[data-label="Total"]::before,
  .comms-table--cards td[data-label="Outcome"]::before {
    content: attr(data-label) ': '; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 800;
  }
  .comms-table--cards input[type="checkbox"] { width: 22px; height: 22px; }
  .comms-table--cards .comms-table__actions { padding-top: 4px; }
}

@media (max-width: 1023px) {
  .comms .comms-panes { grid-template-columns: minmax(0, 1fr); }
  .comms .comms-pane--preview { position: static; }
  .comms .comms-switch {
    display: flex; gap: 4px; padding: 4px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface-2);
  }
  .comms .comms-switch button {
    flex: 1; min-height: var(--tap); border: 0; border-radius: var(--radius-pill);
    background: transparent; font: inherit; font-weight: 800; color: var(--muted); cursor: pointer;
  }
  .comms .comms-switch button[aria-selected="true"] { background: var(--maroon); color: #fff; }
  .comms .comms-pane--hidden { display: none !important; }

  .comms .comms-actionbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--surface); border-top: 1px solid var(--line-strong); box-shadow: 0 -8px 24px rgba(60, 35, 20, 0.08);
  }
  .comms .comms-actionbar[hidden] { display: none; }
  .comms .comms-actionbar__btns { display: flex; gap: var(--space-2); }
  .comms .comms-actionbar .btn--sm { min-height: var(--tap); }
  /* Room for the fixed bar, so it never sits on the last row. */
  .comms.comms-workspace { padding-bottom: 88px; }
  /* Touch targets inside the panes: the shared 44px --tap on every control. */
  .comms .comms-panes .btn--sm, .comms .comms-panes .comms-pill, .comms .comms-panes .comms-view,
  .comms .comms-panes .comms-resolve, .comms .comms-panes .msg-pager a { min-height: var(--tap); display: inline-flex; align-items: center; }
  .comms .comms-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .comms .comms-filters__row--main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .comms .comms-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comms .comms-previewcard__frame { height: min(80vh, 900px); }
}
/* Phones: the approved email needs about 400px, so the frame is laid out at
   4/3 of the card's width and shown at three quarters — the whole email fits
   without touching the email itself. The negative margin returns the layout
   height the transform does not shrink. */
@media (max-width: 600px) {
  .comms .comms-previewcard { overflow: hidden; }
  .comms .comms-previewcard__frame {
    width: 133.34%; transform: scale(0.75); transform-origin: 0 0;
    height: calc(min(80vh, 900px) / 0.75); margin-bottom: calc(min(80vh, 900px) * -0.3334);
  }
}

/* ------------------------------------------------------------------ *
 * Communications workspace (Phase 3) — the approved composition on the
 * real routes: module tabs, four icon-led cards, the list beside a BOUNDED
 * preview stage with the dispatch choice beneath it. Measured against the
 * reference at 1586×992: 12px card radius, 1px warm borders, 48px icon
 * discs, 26px step discs, 38px controls, 44px rows, a 282px stage.
 * Scoped to .cd; uses the shared tokens; the shell is untouched. The
 * dev/test design page carries an identical frozen copy of these rules.
 * ------------------------------------------------------------------ */
.cd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: 8px; }
.cd-head .page-head__title { font-size: 34px; line-height: 1.1; color: var(--maroon-deep); margin: 0; }
.cd-head .page-head__desc { font-size: 15px; color: var(--muted); margin: 3px 0 0; }
.cd-head__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 2px; }
.cd-btn { min-height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14.5px; font-weight: 700; gap: 8px; }
.cd-btn svg { width: 18px; height: 18px; }
.cd-btn--outline { background: #fff; color: var(--maroon); border: 1.5px solid var(--maroon); }
.cd-btn--outline:hover { background: var(--maroon-wash); }
.cd-btn--wide { flex: 1 1 auto; justify-content: center; }
.cd-btn[disabled] { opacity: .55; cursor: not-allowed; }

.cd { display: grid; gap: 12px; min-width: 0; }
.cd > * { min-width: 0; }
.cd-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line-strong); overflow-x: auto; scrollbar-width: none; min-width: 0; max-width: 100%; }
.cd-tab { position: relative; padding: 8px 2px 10px; color: #5a4c3e; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }
.cd-tab.is-on { color: var(--maroon); }
.cd-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--maroon); border-radius: 2px 2px 0 0; }

.cd-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cd-card { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(60, 35, 20, .04); min-height: 92px; }
.cd-card__icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 48px; }
.cd-card__icon svg { width: 22px; height: 22px; }
.cd-card__icon--maroon { background: var(--maroon-wash); color: var(--maroon); }
.cd-card__icon--green { background: rgba(63, 125, 82, .14); color: #2f6b45; }
.cd-card__icon--amber { background: rgba(199, 155, 58, .18); color: #8a6a1f; }
.cd-card__icon--purple { background: rgba(97, 78, 150, .14); color: #5a4a8f; }
.cd-card__body { display: flex; flex-direction: column; min-width: 0; }
.cd-card__label { font-size: 14px; color: #5a4c3e; font-weight: 600; line-height: 1.2; }
.cd-card__value { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.15; }
.cd-card--text .cd-card__value { font-size: 15px; overflow-wrap: anywhere; }
.cd-card__sub { font-size: 12px; color: var(--muted); line-height: 1.3; }

.cd-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.cd-grid--wide { grid-template-columns: minmax(0, 1fr); }
.cd .card { border-radius: 12px; padding: 16px 18px; }
.cd-main__head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
.cd-h2 { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--maroon-deep); margin: 0; }
.cd-h3 { font-family: var(--font-serif); font-size: 19px; font-weight: 700; color: var(--maroon-deep); margin: 0; }
.cd-h3--gap { margin-top: var(--space-5); margin-bottom: var(--space-2); }
.cd-sub { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.cd-muted { display: block; color: var(--muted); font-size: 12.5px; }

.cd-steps { display: flex; align-items: center; list-style: none; margin: 12px 0 10px; padding: 0; gap: 0; }
.cd-step { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; font-size: 14px; color: #5a4c3e; white-space: nowrap; }
.cd-step:not(:last-child)::after { content: ""; flex: 1 1 20px; height: 1px; background: var(--line-strong); margin: 0 12px; }
.cd-step__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; background: #fff; border: 1.5px solid var(--line-strong); color: #5a4c3e; flex: 0 0 26px; }
.cd-step.is-on .cd-step__n { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.cd-step.is-on .cd-step__l { color: var(--text); font-weight: 700; }

/* One compact row on a desktop: subject → class · due date · search · Show. */
.cd-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.05fr) minmax(0, 1.5fr) auto; gap: 10px; align-items: end; margin: 0 0 10px; }
.cd-field { display: grid; gap: 3px; min-width: 0; }
.cd-field > span { font-size: 12.5px; color: #5a4c3e; font-weight: 600; }
.cd-field .input, .cd-field .select { min-height: 38px; border-radius: 8px; border: 1px solid #d9cdbb; background: #fff; font-size: 14px; width: 100%; padding: 0 10px; }
.cd-filters__go { min-height: 38px; }

.cd-banner { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 12px; border-radius: 8px; font-size: 14px; color: #244b31; background: #e8f2ea; border: 1px solid #cfe3d3; }
.cd-banner svg { width: 18px; height: 18px; color: #2f6b45; flex: 0 0 18px; }
.cd-banner--quiet { background: var(--surface-2); border-color: var(--line); color: #5a4c3e; }
.cd-banner--quiet svg { color: var(--muted); }

.cd-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 8px; }
.cd-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 13px; border-radius: 999px; background: var(--surface-2); color: #4a3d30; font-weight: 700; font-size: 13.5px; text-decoration: none; border: 1px solid transparent; }
.cd-pill.is-on { background: var(--maroon); color: #fff; }
.cd-pill__n { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: 12px; }
.cd-pill:not(.is-on) .cd-pill__n { background: #fff; color: #4a3d30; border: 1px solid var(--line); }

.cd-tablewrap { overflow-x: auto; }
.cd-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cd-table thead th { text-align: left; font-size: 12.5px; color: #5a4c3e; font-weight: 700; padding: 8px 8px; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.cd-table tbody td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cd-table tbody tr.is-out td { color: var(--muted); }
.cd-table__tick { width: 36px; }
.cd-table__tick input, .cd-tablefoot__count input { width: 18px; height: 18px; accent-color: var(--maroon); vertical-align: middle; }
.cd-table__family strong { font-weight: 700; color: var(--text); }
.cd-table__children span, .cd-table__invoice span { display: block; }
.cd-table__children { max-width: 22rem; }
.cd-table__invoice a { color: var(--text); text-decoration: none; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cd-table__invoice strong { white-space: nowrap; }
.cd-table__more { width: 40px; text-align: right; }
.cd-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.cd-status--ready { background: rgba(63, 125, 82, .14); color: #2f6b45; }
.cd-status--held { background: rgba(199, 155, 58, .18); color: #7a5a12; }
.cd-status--out { background: rgba(179, 48, 58, .12); color: var(--red); }
.cd-status--sent { background: var(--surface-3); color: #5a4c3e; }
.cd-reason { display: block; font-size: 12px; color: var(--muted); max-width: 24rem; margin-top: 2px; }
.cd-menu { position: relative; display: inline-block; }
.cd-menu > summary { list-style: none; cursor: pointer; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: #5a4c3e; font-size: 20px; }
.cd-menu > summary::-webkit-details-marker { display: none; }
.cd-menu > summary:hover, .cd-menu > summary:focus-visible { background: var(--surface-2); }
.cd-menu__list { position: absolute; right: 0; z-index: 20; min-width: 15rem; margin-top: 4px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); padding: 6px; display: flex; flex-direction: column; text-align: left; }
.cd-menu__list a, .cd-menu__list .comms-resolve { display: block; padding: 8px 10px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 600; }
.cd-menu__list a:hover, .cd-menu__list a:focus-visible { background: var(--gold-wash); }
.cd-menu__list .field-hint, .cd-menu__list .comms-resolve__why, .cd-menu__list .comms-resolve__step { display: block; padding: 4px 10px; font-size: 12px; color: var(--muted); }
.cd-ladder { display: inline-flex; gap: 4px; }
.cd-ladder i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.cd-ladder i.is-done { background: var(--maroon); color: #fff; border-color: var(--maroon); }
.cd-tablefoot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: 10px 8px 2px; }
.cd-tablefoot__count { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; }
.cd-tablefoot__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cd-foot { margin: 6px 0 0; padding: 0 8px; color: var(--muted); font-size: 13px; }
.cd-foot--center { text-align: center; }
.cd-empty { padding: 18px 8px; }

/* The aside's single column must be minmax(0, 1fr): with an implicit auto
   column, a non-wrapping preview title would widen the column past its track
   and push the page sideways. */
.cd-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cd-side > * { min-width: 0; }
/* The head is two single lines whatever the preview is called — the title
   (with "— INV-…" once something is shown) and the badge — each truncated with
   an ellipsis rather than wrapped, so choosing a preview never moves what sits
   below the card; the frame's own PREVIEW bar carries the full reference. */
.cd-preview__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: nowrap; }
.cd-preview__titles { min-width: 0; flex: 1 1 auto; }
.cd-preview__titles .cd-h3, .cd-preview__badge { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-preview__head .cd-seg { flex: 0 0 auto; }
.cd-preview__which { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--muted); }
.cd-preview__badge { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.cd-seg { display: inline-flex; padding: 3px; border-radius: 8px; background: var(--surface-2); }
.cd-seg button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: #4a3d30; cursor: pointer; }
.cd-seg button.is-on { background: var(--maroon); color: #fff; }
/* The stage is BOUNDED and has ONE footprint whatever it holds — nothing yet,
   "Loading…", the email, its plain text, or a failure notice — so the
   scheduling card and the principal action sit at the same place in every
   state. The frame fills the stage and the email scrolls inside it; its own
   PREVIEW bar names the recipient and subject, as the reference shows no
   separate subject line. `[hidden]` must win over the frame's display rule. */
.cd .cd-preview__stage { position: relative; height: 282px; border: 1px solid var(--line); border-radius: 10px; background: #e9e1d3; overflow: hidden; margin-top: 8px; }
.cd .cd-preview__stage > [hidden] { display: none !important; }
.cd .cd-preview__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 22px 20px; color: var(--muted); font-size: 14px; text-align: center; }
.cd .cd-preview__empty > span { max-width: 30rem; }
.cd-preview__frame { width: 100%; border: 0; display: block; background: #e9e1d3; }
/* Specificity (0,3,0): the live workspace's `.comms .comms-previewcard__frame` sets min(72vh, 820px); here the frame fills the bounded stage. */
.cd .cd-preview__stage .cd-preview__frame { height: 100%; border: 0; border-radius: 0; }
/* (0,4,0): the Mobile width must beat the workspace's `width: 100%` for the frame. */
.cd .cd-preview__stage .cd-preview__frame.is-mobile { width: 375px; max-width: 100%; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.cd-preview__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cd-preview__foot--tools { justify-content: flex-end; }
.cd-attach { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1.5px solid var(--maroon); border-radius: 8px; background: #fff; color: var(--maroon); font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.cd-attach svg { width: 16px; height: 16px; }
.cd-preview__tools { font-size: 13px; color: var(--muted); white-space: nowrap; }
/* "Open in a new tab" appears once a preview is loaded; its space is reserved
   while hidden (invisible, not focusable) so the footer row — and everything
   under the card — sits at the same place before and after a preview. */
.cd-preview__tools [data-comms-preview-open][hidden] { display: inline !important; visibility: hidden; }
.cd-link { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--maroon); cursor: pointer; text-decoration: underline; }
.cd-link[aria-pressed="true"] { font-weight: 800; text-decoration: none; }

/* Scheduling: "Send after approval" on its own line, then "Schedule for later"
   with its date · time · zone on one line, then the two actions — the
   reference composition, so the principal action stays inside the viewport. */
.cd-schedule__grid { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 8px 10px; align-items: end; margin-top: 8px; }
.cd-schedule__grid .cd-radio--row { grid-column: 1 / -1; }
.cd-radio { display: flex; align-items: center; gap: 8px; font-size: 14px; min-height: 38px; white-space: nowrap; }
.cd-radio input { width: 18px; height: 18px; accent-color: var(--maroon); }
.cd-schedule .cd-field .input, .cd-schedule .cd-field .select { min-height: 36px; font-size: 13.5px; padding: 0 8px; }
.cd-schedule__actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cd-schedule__actions .cd-btn { min-height: 44px; }
.cd-policy { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; flex-wrap: wrap; }
.cd-policy .cd-muted { margin-top: 4px; }
.cd-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: #4a3d30; white-space: nowrap; }
.cd-toggle i { width: 38px; height: 22px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-strong); position: relative; }
.cd-toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1px solid var(--line-strong); }
.cd-details { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 2px 14px; }
.cd-details > summary { cursor: pointer; min-height: 38px; display: flex; align-items: center; font-weight: 700; color: var(--maroon); font-size: 14px; }
.cd-details p { font-size: 14px; color: #4a3d30; }
.cd-details--page { margin-top: 2px; }
.cd-details__body p { margin: 8px 0; }

.cd-templates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.cd-template { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: grid; gap: 8px; background: #fffdf9; }
.cd-template > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cd-template .cd-btn { min-height: 38px; padding: 0 14px; font-size: 14px; }
.cd-template__row { display: flex; gap: 8px; flex-wrap: wrap; }

.cd .comms-switch { display: none; }
.cd :focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }

/* Laptop widths: the list pane is narrower, so the filters take two rows. */
@media (max-width: 1439px) {
  .cd-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cd-filters .cd-field--search { grid-column: 1 / 3; }
}
@media (max-width: 1023px) {
  .cd-grid { grid-template-columns: minmax(0, 1fr); }
  .cd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd .comms-switch { display: flex; }
  .cd .comms-pane--hidden { display: none !important; }
  .cd-tabs { gap: 18px; }
  .cd-steps { flex-wrap: wrap; gap: 8px 0; }
  .cd-templates { grid-template-columns: minmax(0, 1fr); }
  /* One column: the preview may be taller, it no longer shares the viewport with the list. */
  .cd .cd-preview__stage { height: min(60vh, 560px); }
}
@media (max-width: 720px) {
  .cd-head .page-head__title { font-size: 30px; }
  .cd-head__actions .cd-btn { min-height: 44px; }
  .cd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cd-card { padding: 12px 14px; gap: 12px; }
  .cd-card__icon { width: 44px; height: 44px; flex-basis: 44px; }
  .cd-card__value { font-size: 22px; }
  .cd .card { padding: 16px; }
  .cd-filters { grid-template-columns: 1fr; }
  .cd-filters .cd-field--search { grid-column: auto; }
  .cd-schedule__grid { grid-template-columns: 1fr 1fr; }
  .cd-schedule__grid .cd-radio { grid-column: 1 / -1; }
  .cd-step__l { display: none; }
  .cd-step.is-on .cd-step__l { display: inline; }
  .cd-tab { min-height: 44px; display: inline-flex; align-items: center; }
  .cd-pill, .cd-btn, .cd-menu > summary, .cd-seg button, .cd-attach { min-height: 44px; }
  /* Rows become cards: one DOM, the same tick boxes. */
  .cd-table thead { display: none; }
  .cd-table, .cd-table tbody { display: block; }
  .cd-table tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fffdf9; }
  .cd-table tbody td { display: block; padding: 0; border: 0; }
  .cd-table tbody td.cd-table__tick { grid-row: 1 / span 4; }
  .cd-table tbody td.cd-table__more { grid-column: 3; grid-row: 1; }
  .cd-table tbody td:not(.cd-table__tick):not(.cd-table__more) { grid-column: 2; }
  .cd-table__invoice a, .cd-table__invoice strong, .cd-step { white-space: normal; }
  .cd-preview__tools { white-space: normal; }
  .cd-menu__list { right: auto; left: 0; }
}
/* Phones keep the live workspace's scaled frame (assets/styles/app.css
   @media (max-width: 600px)): the stage only needs to let it overflow. */
@media (max-width: 600px) {
  .cd .cd-preview__stage { height: auto; min-height: 96px; overflow: hidden; }
  .cd .cd-preview__empty { position: static; min-height: 96px; }
  .cd .cd-preview__stage .cd-preview__frame { height: calc(min(80vh, 900px) / 0.75); }
}

/* Production-only additions: the attachment chip is a real link that follows
   the previewed row; scheduling fields dim while "Send after approval" is
   chosen; menus hold small forms (leave out, test copy); a Missed banner. */
a.cd-attach { text-decoration: none; }
.cd-attach[hidden] { display: none; }
.cd-toggle i.is-on { background: var(--maroon); border-color: var(--maroon); }
.cd-toggle i.is-on::after { left: 18px; border-color: var(--maroon); }
.cd-banner--warn { background: rgba(179, 48, 58, .08); border-color: rgba(179, 48, 58, .25); color: var(--red); }
.cd-banner--warn svg { color: var(--red); }
.cd-schedule__grid .cd-field.is-off { opacity: .55; }
.cd-schedule__grid .cd-radio[aria-disabled="true"] { color: var(--muted); }
.cd-schedule .comms-pill { margin-top: 10px; align-items: flex-start; min-height: 0; padding: 8px 12px; }
.cd-menu__list form { display: grid; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); margin-top: 4px; }
.cd-menu__list form .input { min-height: 36px; font-size: 13.5px; }
.cd-menu__list form .field-check { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: #4a3d30; }
.cd .cd-schedule__actions .comms-inline { margin: 0; }
.cd .cd-table td .badge { display: inline-block; }
.cd-head__actions .badge { min-height: 26px; display: inline-flex; align-items: center; }
/* A control that receives focus is scrolled clear of the sticky topbar, so a
   keyboard user always sees the focus ring. */
.cd a, .cd button, .cd input, .cd select, .cd summary, .cd [tabindex] { scroll-margin-top: 96px; scroll-margin-bottom: 16px; }
/* The batch screen's item table becomes recipient cards whenever its pane is
   narrower than the six columns need (beside the preview on a laptop) — the
   Phase 2 rule, so nothing scrolls sideways inside the pane. */
@container comms-pane (max-width: 700px) {
  .cd-table--items thead { display: none; }
  .cd-table--items, .cd-table--items tbody { display: block; }
  .cd-table--items tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fffdf9; }
  .cd-table--items tbody td { display: block; padding: 0; border: 0; }
  .cd-table--items tbody td.cd-table__more { grid-column: 2; grid-row: 1; width: auto; }
  .cd-table--items tbody td:not(.cd-table__more) { grid-column: 1; }
  .cd-table--items .cd-table__invoice a, .cd-table--items .cd-table__invoice strong { white-space: normal; }
  .cd-table--items .cd-menu__list { right: 0; left: auto; }
}
/* Children on one line in the invoice rows; policy values as label · value pairs on the settings screen. */
.cd-table__children .cd-child { display: inline; }
.comm-policy__value { display: inline-block; margin: 0 12px 4px 0; }
.comm-policy__value .field-hint { display: block; }
.comm-policy__head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; flex-wrap: wrap; }
.comm-policy__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }

/* ------------------------------------------------------------------ *
 * Enrolment review — "Review changes" window (approved demo, 14 Sep 2026).
 * A compact comparison table over the conversion form: Field | Current
 * value | New value | Ignore, grouped by record, stacking on small screens.
 * ------------------------------------------------------------------ */
.record-review {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(35, 27, 21, 0.45);
  font-size: 14px; line-height: 1.55; color: var(--text);
}
.record-review[hidden] { display: none; }
.record-review__dialog {
  width: 100%; max-width: 760px; max-height: calc(100vh - 32px); overflow: auto;
  background: #fffdf9; border: 1px solid #e6dacb; border-radius: 14px; padding: 18px;
  box-shadow: 0 12px 36px rgba(35, 27, 21, 0.08);
}
.record-review__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.record-review__title { font-family: Georgia, "Playfair Display", serif; font-weight: 400; font-size: 23px; line-height: 1.2; margin: 0; color: var(--text); }
.record-review__badge { background: #edf2eb; color: var(--sage); padding: 4px 10px; border-radius: 20px; font-size: 12px; }
.record-review__muted { color: #6c6056; margin: 8px 0 0; }
.record-review__dialog strong { font-weight: 500; }
.record-review__error { margin: 10px 0 0; padding: 9px 12px; border-left: 3px solid var(--red); background: rgba(179, 48, 58, 0.08); font-size: 13px; }
.record-review__table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 14px; font-size: 13px; }
.record-review__table th { font-weight: 500; text-align: left; }
.record-review__table thead th { color: #6c6056; font-size: 12px; padding: 6px 8px; border-bottom: 1px solid #e6dacb; }
.record-review__table thead th:last-child { text-align: center; }
.record-review__group th { padding: 7px 8px; background: var(--bg); }
.record-review__group span { color: #6c6056; font-weight: 400; }
.record-review__change th, .record-review__change td { padding: 0 8px; border-bottom: 1px solid #e6dacb; vertical-align: middle; overflow-wrap: anywhere; }
.record-review__ignore { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; margin: 0; }
.record-review__ignore input { width: 19px; height: 19px; margin: 0; accent-color: var(--maroon); }
.record-review__new { color: var(--sage); }
.record-review__change[data-ignored="true"] .record-review__new { color: #6c6056; }
.record-review__change[data-ignored="true"] .record-review__current { font-weight: 500; }
.record-review__note { border-left: 3px solid #c79b3a; background: #faf0d9; padding: 9px 12px; margin-top: 12px; font-size: 12px; }
.record-review__key { display: block; color: #6c6056; font-size: 12px; margin: 8px 0 0; }
.record-review__status { color: var(--sage); margin: 12px 0 0; }
.record-review__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.record-review__btn { min-height: 44px; padding: 10px 16px; border: 1px solid #e6dacb; border-radius: 9px; background: #fffdf9; color: var(--text); font: 500 14px/1.4 var(--font-sans); text-decoration: none; }
.record-review__btn.btn--primary { background: var(--maroon); color: #fff; border-color: var(--maroon); }
@media (max-width: 520px) {
  .record-review { padding: 8px; }
  .record-review__dialog { padding: 12px; }
  .record-review__actions { flex-direction: column-reverse; }
  .record-review__actions .record-review__btn { width: 100%; text-align: center; }
  .record-review__table, .record-review__table tbody { display: block; }
  .record-review__table colgroup, .record-review__table thead { display: none; }
  .record-review__group, .record-review__group th { display: block; }
  .record-review__change { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid #e6dacb; padding: 4px 0 8px; }
  .record-review__change th, .record-review__change td { border: 0; padding: 4px 6px; }
  .record-review__change th { grid-column: 1; grid-row: 1; align-self: center; }
  .record-review__change td:last-child { grid-column: 2; grid-row: 1; justify-self: end; }
  .record-review__change td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: #6c6056; margin-bottom: 3px; }
  .record-review__ignore { gap: 8px; }
  .record-review__ignore::before { content: 'Ignore'; color: #6c6056; font-size: 12px; }
}

/* Enrolment review — Processed: records exist. A filled sage pill so the
   finished state reads differently from Accepted (sage wash) in the queue. */
.badge--processed { background: var(--sage); color: #fff; }

/* Enrolment review — application detail values (email addresses, street
   addresses) wrap inside their row instead of pushing the page wide on a
   phone. Mirrors the `.main--fees .kv__val` rule; pre-existing overflow found
   while verifying the September 2026 review-status work. */
.appsec .kv__val { min-width: 0; overflow-wrap: anywhere; }

/* Enrolment review — historical correction screen: the Review changes table
   rendered in-page, with evidence flags and a "held" state whose decision is
   an explicit Apply tick rather than an Ignore tick. */
.correction-review .record-review__table { margin-top: 10px; }
.correction-review .record-review__change th, .correction-review .record-review__change td { padding: 8px; vertical-align: top; }
.correction-review .record-review__ignore { justify-content: flex-start; gap: 8px; min-height: 36px; }
.correction-review .record-review__ignore span { font-size: 12px; color: #6c6056; }
.correction-review .correction-held .record-review__new { color: var(--text); }
.correction-flag { display: block; font-size: 12px; color: #6c6056; margin-top: 4px; }
.correction-flag--warn { color: #6b4f12; }
@media (max-width: 520px) {
  .correction-review .record-review__ignore::before { content: none; }
  .correction-review .record-review__change { grid-template-columns: minmax(0, 1fr) auto; }
  .correction-review .record-review__change td { grid-column: 1 / -1; }
  .correction-review .record-review__change td:last-child { grid-column: 2; grid-row: 1; }
}
/* …and its inventory table: six columns that fit beside the sidebar, with the
   reference, the conversion date and the action each on one line. */
.correction-list td:first-child, .correction-list td:nth-child(3), .correction-list td:last-child { white-space: nowrap; }
.correction-list td:last-child { width: 1%; }
.correction-list__sub { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
/* …and its per-field decision: two radios, nothing preselected. */
.correction-choice { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.correction-choice__option { display: flex; align-items: center; gap: 8px; min-height: 30px; font-size: 13px; cursor: pointer; }
.correction-choice__option input { width: 17px; height: 17px; margin: 0; accent-color: var(--maroon); }
.correction-review .record-review__change[data-choice="apply"] .record-review__new { color: var(--sage); font-weight: 500; }
.correction-review .record-review__change[data-choice="keep"] .record-review__current { font-weight: 500; }
.correction-flag--evidence { color: #6c6056; font-style: italic; }

/* Potential duplicate profiles: the match-evidence list inside the table. */
.dup-evidence {
  margin: 4px 0 0;
  padding-left: 16px;
  color: var(--muted);
}

.dup-evidence li {
  margin: 2px 0;
}

/* Configuration → Fee amounts: the read-only "Which rule wins?" check and its highlighted row. */
.fee-rule-check .field { margin-bottom: 0; }
.fee-rule-check .form-actions { grid-column: 1 / -1; margin-top: 0; }
.table tr.is-winner td { background: rgba(82,105,90,0.14); }

/* ============================================================================
   Family account WORKSPACE — the approved "Tabbed workspace".

   Header (identity, school year, Record payment / Manage family, four balance
   cards, four tabs) above one section at a time: Overview · Fees & invoices ·
   Payments & credit · History, with Manage family behind the header. A flow
   (record a payment, correct one, an invoice, a fee…) shows inside the section
   it belongs to and nothing else.

   Built only from the shared tokens — the demo's cream, maroon, gold and sage
   are the app's own — and scoped to .fws-head / .fws, so no other screen moves.
   ========================================================================== */
.fws-head { margin-bottom: var(--space-2); }
.fws-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  color: #6b4f12; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
}
.fws-crumbs a { color: inherit; text-decoration: none; }
.fws-crumbs a:hover, .fws-crumbs a:focus-visible { text-decoration: underline; }
.fws-title {
  font-family: var(--font-serif); font-weight: 600; font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.2; letter-spacing: -.02em; margin: 6px 0 8px; overflow-wrap: anywhere;
}
.fws-family { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.fws-states { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-2) 0 0; }
.fws-banner {
  margin-top: var(--space-3); padding: 12px 15px; border-radius: 10px;
  background: var(--maroon-wash); border-left: 3px solid var(--maroon); font-size: var(--fs-sm);
}
.fws-head-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--space-3); margin: 15px 0 22px;
}
.fws-yearctx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.fws-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Buttons: one solid primary, everything else quiet, all comfortable to tap. */
.fws-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); padding: 9px 16px; border-radius: 24px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--maroon);
  font-size: 13px; font-weight: 700; line-height: 1.3; text-decoration: none; cursor: pointer;
}
.fws-btn:hover { background: var(--surface-2); }
.fws-btn:focus-visible, .fws-tab:focus-visible, .fws-link:focus-visible,
.fws-manage__item:focus-visible, .fws-head summary:focus-visible, .fws summary:focus-visible {
  outline: 3px solid var(--maroon); outline-offset: 2px;
}
.fws-btn--primary { background: var(--maroon); border-color: var(--maroon); color: #fff7ef; }
.fws-btn--primary:hover { background: var(--maroon-deep); }
.fws-btn[aria-current] { background: var(--surface-2); border-color: rgba(123, 30, 43, 0.28); }

/* Badges */
.fws-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 10px;
  background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700;
  line-height: 1.4; white-space: nowrap;
}
.fws-badge a { color: inherit; }
.fws-badge--gold { background: var(--gold-wash); color: #6b4f12; }
.fws-badge--sage { background: rgba(82, 105, 90, 0.14); color: var(--sage); }
.fws-badge--red { background: rgba(179, 48, 58, 0.12); color: var(--red); }
.fws-badge--maroon { background: var(--maroon-wash); color: var(--maroon); }

/* School-year switcher: a disclosure of links, no form. */
.fws-yearpick { position: relative; }
.fws-yearpick > summary {
  list-style: none; cursor: pointer; color: var(--maroon); font-size: 12px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; min-height: 32px; display: inline-flex; align-items: center;
}
.fws-yearpick > summary::-webkit-details-marker { display: none; }
.fws-yearpick__menu {
  position: absolute; z-index: 30; left: 0; margin: 6px 0 0; padding: 6px; list-style: none; min-width: 12rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.fws-yearpick__menu a {
  display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px;
  border-radius: 8px; color: var(--text); text-decoration: none; font-size: var(--fs-sm); font-weight: 600;
}
.fws-yearpick__menu a:hover { background: var(--gold-wash); }
.fws-yearpick__menu a[aria-current] { color: var(--maroon); background: var(--maroon-wash); }

/* The four balance cards, in the approved order. */
.fws-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 23px; }
.fws-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 14px; min-width: 0; }
.fws-card__label { color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.fws-card__value { color: var(--maroon); font-size: 26px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
.fws-card__sub { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.fws-card__extra { display: block; }

/* The four tabs. Links underneath, so each is an address of its own. */
.fws-tabs {
  display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 23px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.fws-tab {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap);
  padding: 10px 15px; border-radius: 9px; color: var(--muted); font-size: 13px; font-weight: 700;
  text-decoration: none;
}
.fws-tab:hover { background: var(--surface-2); color: var(--maroon); }
.fws-tab[aria-current] { background: var(--maroon); color: #fff7ef; }

/* Sections, panels and records */
.fws { min-width: 0; }
/* `hidden` always wins inside the workspace — a section, or a message that
   belonged to the last action, is never kept on screen by a display rule. */
.fws [hidden] { display: none !important; }
.fws-section:focus { outline: none; }
.fws-section:focus-visible { outline: 3px solid var(--maroon); outline-offset: 4px; border-radius: 6px; }
.fws-notices { display: grid; gap: var(--space-2); margin-bottom: 18px; }
.fws .flash { border-radius: 10px; }
.fws .flash--info { background: var(--gold-wash); color: #6b4f12; border: 1px solid rgba(199, 155, 58, 0.35); }
.fws-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px; margin-bottom: 16px; min-width: 0;
}
.fws-panel--attention { border-left: 3px solid var(--gold); }
.fws-panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.fws-panel__head h2, .fws-panel > summary { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.fws-subhead { margin: 18px 0 6px; font-size: 15px; font-weight: 700; color: var(--maroon-deep); }
.fws-subtle { color: var(--muted); font-size: 12.5px; }
.fws-small { color: var(--muted); font-size: 12px; }
.fws-empty { color: var(--muted); font-size: 13px; padding: 10px 0; margin: 0; }
.fws-eyebrow { color: #6b4f12; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.fws-link {
  color: var(--maroon); font-size: 13px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
.fws-record {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 15px 0; border-top: 1px solid var(--line);
}
.fws-record__main { min-width: 0; }
.fws-record__main strong, .fws-record__title strong { display: block; font-weight: 700; overflow-wrap: anywhere; }
.fws-record__title { color: inherit; text-decoration: none; }
.fws-record__title:hover strong { text-decoration: underline; }
.fws-record__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.fws-record__note { margin: -6px 0 10px; }
.fws-amount { font-variant-numeric: tabular-nums; }
.fws-inline-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; }
.fws-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.fws-inline-form .input { width: auto; flex: 1 1 14rem; min-width: 0; }
.fws-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fws-split > .fws-panel { margin-bottom: 16px; }
.fws-callout { background: var(--gold-wash); border-left: 3px solid var(--gold); border-radius: 10px; padding: 12px 15px; margin: 12px 0; font-size: 13px; }
.fws-callout--alert { background: rgba(179, 48, 58, 0.06); border-left-color: var(--red); }
.fws-callout ul { margin: 6px 0 0; padding-left: 1.2em; }
.fws-disclosure { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 2px; }
.fws-disclosure > summary, .fws-receipt__more > summary, .fws-reverse > summary, .fws-history__details > summary {
  cursor: pointer; color: var(--maroon); font-size: 12.5px; font-weight: 700;
  min-height: 36px; display: flex; align-items: center;
}
.fws-receipt__more { margin: -6px 0 10px; }
.fws-receipt__more > .tablewrap, .fws-disclosure > .tablewrap { margin-top: 6px; }
.fws-reverse > summary { min-height: 32px; font-size: 12px; }
.fws-regfee { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.fws-regfee__label { font-weight: 700; }
.fws-uninvoiced { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; margin: 12px 0; }
.fws .fee-rows { margin-top: 6px; }
.fws .fee-rows tr:target > td, .fws .fws-record:target { background: var(--gold-wash); }
.fws-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 8px; }
.fws-figures > div { background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.fws-figures dt { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.fws-figures dd { margin: 2px 0 0; font-size: 17px; font-weight: 700; color: var(--maroon-deep); font-variant-numeric: tabular-nums; }
.fws-statement {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 12px; margin-bottom: 12px;
  background: var(--bg); border-radius: 10px; font-size: 13px; font-variant-numeric: tabular-nums;
}
.fws-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fws-choice__option { background: var(--bg); border-radius: 10px; padding: 12px 15px; min-width: 0; }
.fws-choice__option .fws-subhead { margin-top: 0; }
.fws-explain > summary { cursor: pointer; list-style-position: inside; min-height: 36px; display: flex; align-items: center; gap: 6px; color: var(--maroon); font-size: 15px; }
.fws-explain dl, .fws-kv { margin: 10px 0 0; display: grid; gap: 8px; }
.fws-explain dt { font-weight: 700; }
.fws-explain dd { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.fws-kv > div { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); gap: 2px 12px; font-size: 12.5px; }
.fws-kv dt { color: var(--muted); }
.fws-kv dd { margin: 0; overflow-wrap: anywhere; }
.fws-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.fws-form-grid > div { grid-column: 1 / -1; }

/* History: a date column beside each event, details on demand. */
.fws-history { width: 100%; border-collapse: collapse; table-layout: fixed; }
.fws-history td { padding: 16px 0; border-top: 1px solid var(--line); vertical-align: top; }
.fws-history tr:first-child td { border-top: 0; }
.fws-history__when { width: 96px; padding-right: 14px !important; }
.fws-history__day { display: block; font-size: 13px; font-weight: 700; }
.fws-history__what { min-width: 0; overflow-wrap: anywhere; }
.fws-history__type { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fws-history__title { margin: 2px 0 4px; font-size: 15px; font-weight: 700; }
.fws-history__item p { margin: 2px 0; }
.fws-evidence { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg); }
.fws-history code, .fws-evidence code { font-size: 11px; color: var(--muted); }

/* Manage family: four ways in, then each section. */
.fws-manage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.fws-manage__item {
  display: flex; flex-direction: column; gap: 4px; min-height: var(--tap); padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none;
}
.fws-manage__item:hover { background: var(--surface-2); }
.fws-manage__item strong { font-size: 13px; }
.fws-manage__item span { color: var(--muted); font-size: 12px; }

/* Flows: a heading bar naming the work and the way back, then the work. */
.fws-flow { min-width: 0; }
.fws-flow__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px;
  background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 16px 20px; margin-bottom: 16px;
}
.fws-flow__heading { min-width: 0; flex: 1 1 24rem; }
.fws-flow__title { margin: 2px 0 4px; font-size: 20px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.fws-flow__intro { color: var(--muted); font-size: 13px; max-width: 75ch; }
.fws-flow > .stack, .fws-flow > .card { gap: 16px; }
.fws .stack { gap: 16px; }
.fws .card { border-radius: 16px; padding: 20px; box-shadow: none; background: var(--surface); }
.fws .card__title { font-size: 18px; }
.fws .btn:not(.btn--sm) { min-height: var(--tap); }
.fws .btn:disabled, .fws .btn[aria-busy] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.fws .btn--danger:disabled:hover { background: transparent; color: var(--red); }
.fws .field__label { font-size: 13px; font-weight: 600; color: var(--muted); }
.fws .kv__key { min-width: 7rem; overflow-wrap: normal; }

@media (max-width: 1100px) {
  .fws-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  /* The shared 44px touch target on every control in the workspace. */
  .fws .btn, .fws .btn--sm { min-height: var(--tap); }
  .fws-inline-actions .fws-link, .fws-record__side .fws-link, .fws-panel__head .fws-link,
  .fws-disclosure > summary, .fws-receipt__more > summary, .fws-reverse > summary,
  .fws-history__details > summary, .fws-yearpick > summary {
    min-height: var(--tap); display: inline-flex; align-items: center;
  }
  .fws-choice, .fws-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .fws-head-row { margin: 12px 0 18px; }
  .fws-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The demo's phone arrangement: the four tabs as a two-by-two grid. */
  .fws-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fws-tab { padding: 10px 8px; text-align: center; }
  .fws-split, .fws-manage, .fws-figures { grid-template-columns: 1fr; }
  .fws-panel, .fws .card { padding: 16px; }
  .fws-flow__head { padding: 14px 16px; }
  .fws-record { grid-template-columns: 1fr; gap: 8px; }
  .fws-record__side { align-items: flex-start; text-align: left; }
  .fws-inline-actions { justify-content: flex-start; }
  .fws-history__when { width: 70px; }
  .fws-kv > div { grid-template-columns: 1fr; }
  .fws-yearpick__menu { position: static; box-shadow: none; }
}

@media (max-width: 380px) {
  .fws-card { padding: 12px 10px; }
  .fws-card__value { font-size: 22px; }
  .fws-card__label { letter-spacing: 0; }
}

/* ------------------------------------------------------------------ *
 * Fees & Reminders dashboard (/fees) — the approved October 2026 design.
 * Every rule is scoped under .fdash, so nothing here can reach another
 * screen; the family account workspace (.fws-*) is untouched. Colours come
 * from the shared tokens; the few the design adds are defined on .fdash.
 * ------------------------------------------------------------------ */
.fdash {
  --fdash-solid: #fffaf4;
  --fdash-field: #fffdf9;
  --fdash-gold-text: #6b4f12;
  --fdash-soft: #5f5040;
  --fdash-red-wash: rgba(179, 48, 58, 0.1);
  --fdash-sage-wash: rgba(82, 105, 90, 0.14);
  container-type: inline-size; container-name: fdash;
  min-width: 0; color: var(--text); font-size: 16px; line-height: 1.5;
}
.fdash [hidden] { display: none !important; }
:where(.fdash) :where(p, h1, h2, h3, ul, ol, dl, dd) { margin: 0; }
:where(.fdash) :where(ul, ol) { padding: 0; list-style: none; }
:where(.fdash) :where(button, select, input) { font: inherit; color: inherit; }
.fdash :focus-visible { outline: 3px solid var(--maroon); outline-offset: 2px; }
.fdash-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.fdash-narrow { display: none; }

/* Shared controls */
.fdash-eyebrow { color: var(--fdash-gold-text); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.fdash-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap);
  padding: 9px 18px; border: 1px solid var(--line-strong); border-radius: 24px; background: var(--fdash-solid);
  color: var(--maroon); font-size: 14px; font-weight: 700; line-height: 1.3; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.fdash-btn:hover { background: var(--surface-2); color: var(--maroon); }
.fdash-btn--primary { background: var(--maroon); border-color: var(--maroon); color: #fff7ef; }
.fdash-btn--primary:hover { background: var(--maroon-deep); color: #fff7ef; }
.fdash-btn--quiet { background: transparent; }
.fdash-btn__note { color: var(--muted); font-weight: 600; }
.fdash-link {
  display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); padding: 0; border: 0; background: none;
  color: var(--maroon); font-size: 14px; font-weight: 700; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.fdash-link:hover { color: var(--maroon-deep); text-decoration-thickness: 2px; }
.fdash-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.fdash-hint { margin-top: 6px; color: var(--muted); font-size: 12.5px; }
.fdash-select {
  min-height: var(--tap); padding: 0 40px 0 14px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--fdash-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237b1e2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  font-size: 15px; -webkit-appearance: none; appearance: none;
}
.fdash-scope {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--gold-wash);
  color: var(--fdash-gold-text); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; vertical-align: 2px;
}
.fdash-badge {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 9px; border-radius: 10px;
  background: var(--surface-2); color: var(--fdash-soft); font-size: 12px; font-weight: 700; line-height: 1.4;
}
.fdash-badge--red { background: var(--fdash-red-wash); color: var(--red); }
.fdash-badge--sage { background: var(--fdash-sage-wash); color: var(--sage); }
.fdash-badge--gold { background: var(--gold-wash); color: var(--fdash-gold-text); }
.fdash-badge--maroon { background: var(--maroon-wash); color: var(--maroon); }
.fdash-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.fdash-badge--sage-outline { background: transparent; box-shadow: inset 0 0 0 1px rgba(82, 105, 90, 0.5); color: var(--sage); }
.fdash-badge--inline { margin-left: 8px; vertical-align: 1px; }
.fdash-num { text-align: right; font-variant-numeric: tabular-nums; }

/* A. Page context */
.fdash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 20px; }
.fdash-head__text { min-width: 0; }
.fdash-title {
  margin: 6px 0 8px; font-family: var(--font-serif); font-size: clamp(30px, 3.4vw, 42px); font-weight: 600;
  line-height: 1.15; letter-spacing: -0.02em;
}
.fdash-lede { max-width: 62ch; color: var(--muted); }
.fdash-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fdash-head__tools { display: none; }

.fdash-yearbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 14px; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
}
.fdash-yearbar.is-other { border-left: 4px solid var(--gold); background: #fbf2e1; }
.fdash-yearbar__pick { display: flex; flex-direction: column; gap: 4px; }
.fdash-yearbar__pick label { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.fdash-yearbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fdash-select--year { min-width: 230px; min-height: 52px; color: var(--maroon); font-size: 18px; font-weight: 700; }
.fdash-yearbar__ctx { flex: 1 1 320px; display: grid; gap: 4px; color: var(--muted); font-size: 14px; }
.fdash-yearbar__ctx strong { color: var(--text); }
.fdash-yearbar__note { color: var(--fdash-gold-text); }

.fdash-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.fdash-quick__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: 22px; background: var(--fdash-solid);
  color: var(--text); font-size: 14px; font-weight: 700; text-decoration: none;
}
.fdash-quick__link:hover { background: var(--surface-2); color: var(--maroon); }
.fdash-quick__link--more { background: transparent; color: var(--maroon); }
.fdash-quick__link--find { border-color: rgba(123, 30, 43, 0.35); background: var(--maroon-wash); color: var(--maroon-deep); }

/* The phone search block; wide screens search inside the Families panel. */
.fdash-find {
  display: none; margin-bottom: 14px; padding: 14px; background: var(--surface);
  border: 1px solid rgba(123, 30, 43, 0.22); border-radius: 16px; box-shadow: var(--shadow-sm);
}
.fdash-find .fdash-label { font-size: 15px; }

/* B. Money for the year */
.fdash-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.fdash-card {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 16px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
}
.fdash-card__label { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.fdash-card__scope { letter-spacing: 0.03em; }
.fdash-card__value { color: var(--maroon); font-size: 28px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fdash-card__value.is-alert { color: var(--red); }
.fdash-card__sub { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.fdash-card__sub strong { color: var(--sage); }
.fdash-card__bar { display: block; height: 6px; margin: 2px 0; overflow: hidden; border-radius: 3px; background: var(--surface-3); }
.fdash-card__bar > span { display: block; height: 100%; border-radius: 3px; background: var(--sage); }
.fdash-card__action { margin-top: auto; padding-top: 4px; color: var(--muted); font-size: 13px; font-weight: 700; }
.fdash-card__action .fdash-link { font-size: 13px; }
.fdash-cards__note { margin: 0 0 20px; color: var(--muted); font-size: 13px; }

/* Panels */
.fdash-panel {
  min-width: 0; margin-bottom: 20px; padding: 20px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 18px;
}
.fdash-panel__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.fdash-panel__title { font-size: 20px; font-weight: 700; }
.fdash-panel__desc { margin-top: 2px; color: var(--muted); font-size: 14px; }

/* C. Find a family */
.fdash-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; margin-bottom: 12px; }
.fdash-search { flex: 1 1 420px; min-width: 0; }
.fdash-search__box { position: relative; }
.fdash-search__icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.fdash-input {
  width: 100%; min-height: 52px; padding: 0 46px 0 42px; border: 1px solid var(--line-strong); border-radius: 14px;
  background: var(--fdash-field); font-size: 16px;
}
.fdash-input::placeholder { color: #8c7b67; }
.fdash-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.fdash-search__clear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: var(--tap); height: var(--tap);
  display: grid; place-items: center; border-radius: 10px; color: var(--muted);
}
.fdash-search__clear:hover { background: var(--surface-2); color: var(--maroon); }
.fdash-sort { flex: 0 0 auto; }
.fdash-sort__row { display: flex; gap: 8px; }
.fdash-sort .fdash-select { min-width: 220px; min-height: 52px; }

.fdash-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.fdash-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 12px 0 16px;
  border: 1px solid var(--line-strong); border-radius: 22px; background: var(--fdash-field);
  color: var(--text); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.fdash-pill:hover { border-color: rgba(123, 30, 43, 0.4); color: var(--maroon); }
.fdash-pill[aria-current="true"] { background: var(--nav-active); border-color: rgba(123, 30, 43, 0.5); color: var(--maroon-deep); box-shadow: inset 0 0 0 1px rgba(123, 30, 43, 0.25); }
.fdash-pill__count {
  min-width: 26px; padding: 1px 7px; border-radius: 12px; background: var(--surface-2); color: var(--fdash-soft);
  font-size: 12px; text-align: center; font-variant-numeric: tabular-nums;
}
.fdash-pill[aria-current="true"] .fdash-pill__count { background: var(--maroon); color: #fff7ef; }

.fdash-results { scroll-margin-top: 88px; }
.fdash-results.is-loading { opacity: 0.6; transition: opacity 0.15s; }
.fdash-resultbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px;
  min-height: 56px; padding: 6px 0; border-top: 1px solid var(--line);
}
.fdash-result { font-size: 14px; font-weight: 600; }
.fdash-result:focus { outline: none; }
.fdash-result:focus-visible { outline: 3px solid var(--maroon); outline-offset: 2px; }
.fdash-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fdash-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px;
  border: 1px solid rgba(123, 30, 43, 0.3); border-radius: 22px; background: var(--maroon-wash);
  color: var(--maroon-deep); font-size: 13px; font-weight: 700; text-decoration: none; overflow-wrap: anywhere;
}
.fdash-chip:hover { background: rgba(123, 30, 43, 0.14); color: var(--maroon-deep); }
.fdash-viewnote { margin-bottom: 10px; padding: 10px 12px; border-radius: 10px; background: var(--gold-wash); color: var(--fdash-gold-text); font-size: 13.5px; }

/* D. The family list: stacked by default, a table-like row once the list
   itself is wide enough. */
.fdash-list { container-type: inline-size; container-name: fdashlist; }
.fdash-listhead { display: none; }
.fdash-rows { display: grid; gap: 10px; }
.fdash-row { border: 1px solid var(--line); border-radius: 14px; background: var(--fdash-field); scroll-margin-top: 88px; }
.fdash-row.is-open { border-color: rgba(123, 30, 43, 0.3); box-shadow: var(--shadow-sm); }
.fdash-row__main {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px;
  padding: 12px 14px 14px 6px; align-items: start;
}
.fdash-row__toggle {
  grid-column: 1; grid-row: 1; width: var(--tap); height: var(--tap); display: grid; place-items: center;
  border-radius: 12px; color: var(--maroon);
}
.fdash-row__toggle:hover { background: var(--surface-2); }
.fdash-row__toggle svg { transition: transform 0.15s; }
.fdash-row__toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.fdash-cell { min-width: 0; }
.fdash-cell--family { grid-column: 2 / 4; grid-row: 1; padding-top: 9px; }
.fdash-cell--due { grid-column: 2; grid-row: 2; }
.fdash-cell--billed { grid-column: 3; grid-row: 2; }
.fdash-cell--status { grid-column: 2 / 4; grid-row: 3; }
.fdash-cell--action { grid-column: 2 / 4; grid-row: 4; }
.fdash-cell--num { text-align: left; }
.fdash-cell__label { display: block; margin-bottom: 2px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.fdash-row__name { font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.fdash-row__meta { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.fdash-warn { color: var(--red); font-weight: 700; }
.fdash-kids { display: grid; gap: 2px; margin-top: 6px; font-size: 13px; }
.fdash-kids__studies { color: var(--muted); }
.fdash-row__reason {
  display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 8px;
  background: var(--gold-wash); color: var(--fdash-gold-text); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere;
}
.fdash-amount { display: block; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fdash-amount--due { color: var(--maroon); }
.fdash-amount--due.is-zero { color: var(--muted); }
.fdash-small { display: block; color: var(--muted); font-size: 12.5px; }
.fdash-small--red { color: var(--red); font-weight: 600; }
.fdash-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.fdash-btn--open { padding: 9px 16px; }

@container fdashlist (min-width: 820px) {
  .fdash-listhead, .fdash-row__main {
    grid-template-columns: 44px minmax(0, 1.7fr) minmax(108px, 0.7fr) minmax(136px, 0.8fr) minmax(0, 1.05fr) auto;
    column-gap: 14px;
  }
  .fdash-listhead {
    display: grid; padding: 0 16px 8px 8px; color: var(--muted);
    font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  }
  .fdash-row__main { padding: 14px 16px 14px 8px; align-items: center; }
  .fdash-row__main > * { grid-row: 1; grid-column: auto; }
  .fdash-cell--family { padding-top: 0; }
  .fdash-cell--num { text-align: right; }
  .fdash-cell__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* The short summary a row opens. It summarises; the family account acts. */
.fdash-summary { display: grid; gap: 16px; margin: 0 14px; padding: 14px 0 16px; border-top: 1px dashed var(--line-strong); }
.fdash-summary__title { margin-bottom: 4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.fdash-summary__lines li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 16px; padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.fdash-summary__who { min-width: 0; font-size: 14px; }
.fdash-summary__who .fdash-small { display: inline; }
.fdash-summary__studies { display: block; color: var(--muted); font-size: 13px; }
.fdash-summary__money { display: flex; flex-direction: column; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.fdash-summary__money strong { color: var(--maroon); }
.fdash-summary__money strong.is-zero { color: var(--muted); font-weight: 600; }
.fdash-summary__facts { display: grid; align-content: start; gap: 10px; }
.fdash-summary__facts dt { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.fdash-summary__facts dd { font-size: 14px; overflow-wrap: anywhere; }
.fdash-summary__invoices { display: grid; gap: 2px; }
.fdash-summary__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
@container fdashlist (min-width: 820px) {
  .fdash-summary { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 32px; margin-left: 60px; margin-right: 16px; }
  .fdash-summary__actions { grid-column: 1 / -1; }
}

.fdash-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }
.fdash-pager__pages { display: flex; flex-wrap: wrap; gap: 6px; }
.fdash-pager__page, .fdash-pager__step {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: var(--tap); min-height: var(--tap); padding: 0 14px; border: 1px solid var(--line-strong);
  border-radius: 12px; background: var(--fdash-field); color: var(--text); font-weight: 700; text-decoration: none;
}
.fdash-pager__page:hover, a.fdash-pager__step:hover { border-color: rgba(123, 30, 43, 0.4); color: var(--maroon); }
.fdash-pager__page[aria-current="page"] { background: var(--maroon); border-color: var(--maroon); color: #fff7ef; }
.fdash-pager__step.is-disabled { opacity: 0.45; }
.fdash-pager__gap { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 4px; color: var(--muted); }

.fdash-empty {
  display: grid; justify-items: center; gap: 10px; padding: 28px 20px; text-align: center;
  border: 1px dashed var(--line-strong); border-radius: 14px; background: rgba(255, 253, 249, 0.6);
  color: var(--muted); font-size: 14px;
}
.fdash-empty p { max-width: 62ch; }
.fdash-empty .fdash-empty__title { color: var(--text); font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.fdash-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* E. Needs attention */
.fdash-attn {
  margin-bottom: 20px; padding: 18px 20px; background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 16px;
}
.fdash-attn__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.fdash-attn__head h2 { font-size: 18px; font-weight: 700; }
.fdash-attn__list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; }
.fdash-attn__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 14px 0 6px; border-top: 1px solid var(--line); }
.fdash-attn__count {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px;
  background: var(--maroon-wash); color: var(--maroon); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.fdash-attn__item[data-attn="overdue"] .fdash-attn__count { background: var(--fdash-red-wash); color: var(--red); }
.fdash-attn__title { font-size: 15px; font-weight: 700; }
.fdash-attn__why { margin-top: 2px; color: var(--muted); font-size: 13.5px; }
.fdash-attn__clear { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--sage); font-size: 13.5px; font-weight: 600; }
/* The exception (drafts with no school year) is gold, apart from routine work. */
.fdash-attn__item[data-attn="undated"] .fdash-attn__count,
.fdash-attn-chip[data-attn="undated"] .fdash-attn-chip__count { background: var(--gold-wash); color: var(--fdash-gold-text); }
.fdash-attn__toggle { margin-left: auto; }
.fdash-attn.is-compact { padding: 14px; }
.fdash-attn.is-compact .fdash-attn__head { flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px; }
.fdash-attn__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fdash-attn-chip {
  width: 100%; min-height: 52px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--fdash-field); text-decoration: none;
}
.fdash-attn-chip:hover { border-color: rgba(123, 30, 43, 0.35); }
.fdash-attn-chip__count {
  min-width: 30px; height: 30px; display: grid; place-items: center; padding: 0 6px; border-radius: 9px;
  background: var(--maroon-wash); color: var(--maroon); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.fdash-attn-chip[data-attn="overdue"] .fdash-attn-chip__count { background: var(--fdash-red-wash); color: var(--red); }
.fdash-attn-chip__label { color: var(--text); font-size: 13px; font-weight: 700; line-height: 1.25; }
.fdash-attn-chip__go { color: var(--maroon); font-weight: 700; }

/* F. Fee tools */
.fdash-tools__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 18px 20px; }
.fdash-toolgroup__title { margin-bottom: 8px; color: var(--fdash-gold-text); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.fdash-toolgroup ul { display: grid; gap: 6px; }
.fdash-tool {
  min-height: var(--tap); display: grid; gap: 2px; padding: 10px 12px; text-align: left; text-decoration: none;
  border: 1px solid var(--line); border-radius: 12px; background: var(--fdash-field); color: var(--text);
}
.fdash-tool:hover { border-color: rgba(123, 30, 43, 0.3); background: #fff; color: var(--text); }
.fdash-tool__label { color: var(--maroon); font-size: 14px; font-weight: 700; }
.fdash-tool__arrow { font-weight: 600; }
.fdash-tool__desc { color: var(--muted); font-size: 12.5px; }
.fdash-tool__tag { justify-self: start; margin-top: 4px; }

/* Reference disclosures */
.fdash-disclosure > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: var(--tap);
  list-style: none; cursor: pointer;
}
.fdash-disclosure > summary::-webkit-details-marker { display: none; }
.fdash-disclosure > summary::before {
  content: ""; width: 8px; height: 8px; margin: 0 6px 0 4px; border-right: 2px solid var(--maroon);
  border-bottom: 2px solid var(--maroon); transform: rotate(-45deg); transition: transform 0.15s;
}
.fdash-disclosure[open] > summary::before { transform: rotate(45deg); }
.fdash-disclosure__title { color: var(--maroon); font-size: 16px; font-weight: 700; }
.fdash-defs { display: grid; gap: 12px; margin-top: 12px; }
.fdash-defs > div { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.fdash-defs dt { font-weight: 700; }
.fdash-defs dd { color: var(--muted); font-size: 14px; }
.fdash-tablewrap { margin-top: 12px; overflow-x: auto; }
.fdash-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.fdash-table th, .fdash-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.fdash-table thead th { color: var(--muted); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; }
.fdash-table tbody th { font-weight: 700; }
.fdash-table .fdash-num { text-align: right; }

@container fdash (min-width: 900px) {
  .fdash-attn__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container fdash (min-width: 760px) {
  .fdash-defs > div { grid-template-columns: 210px minmax(0, 1fr); gap: 16px; }
}
@container fdash (max-width: 760px) {
  .fdash-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* Phones: a short heading, the year, then the search itself; the summary
   cards in two columns; Needs attention as a compact row of counts. */
@media (max-width: 720px) {
  .fdash-wide { display: none; }
  .fdash-narrow { display: inline; }
  .fdash-head { display: grid; gap: 10px; margin-bottom: 12px; }
  .fdash-eyebrow, .fdash-lede, .fdash-head__generate { display: none; }
  .fdash-title { margin: 0; font-size: 28px; }
  .fdash-head__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .fdash-head__actions .fdash-btn { width: 100%; }
  .fdash-head__tools { display: inline-flex; }
  .fdash-yearbar { gap: 8px 16px; margin-bottom: 12px; padding: 14px; }
  .fdash-yearbar__pick, .fdash-yearbar__row { width: 100%; }
  .fdash-yearbar__row { flex-wrap: nowrap; }
  .fdash-select--year { flex: 1 1 auto; min-width: 0; min-height: 48px; font-size: 17px; }
  .fdash-yearbar__ctx { font-size: 13px; }
  .fdash-quick { display: none; }
  .fdash-find { display: block; }
  .fdash-toolbar .fdash-search { display: none; }
  .fdash-card { padding: 12px; }
  .fdash-card__value { font-size: 22px; }
  .fdash-cards { margin-bottom: 16px; }
  .fdash-cards__note, .fdash-families .fdash-panel__desc { display: none; }
  .fdash-panel, .fdash-attn { padding: 16px 14px; border-radius: 16px; }
  .fdash-families .fdash-panel__head { align-items: center; margin-bottom: 10px; }
  .fdash-families .fdash-panel__title { font-size: 18px; }
  .fdash-sort, .fdash-sort__row { width: 100%; }
  .fdash-sort .fdash-select { flex: 1 1 auto; min-width: 0; width: 100%; }
  /* While a search narrows the list, sorting steps aside and the hint gives
     way to the results; screen readers keep the hint. */
  .fdash.is-searching .fdash-toolbar { display: none; }
  .fdash.is-searching .fdash-find .fdash-hint {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  /* The filter pills scroll in one row, the pattern the rosters use. */
  .fdash-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px 8px; padding: 2px 14px 6px; scrollbar-width: thin; }
  .fdash-pill { flex: 0 0 auto; }
  .fdash-cell--action .fdash-btn { width: 100%; }
  .fdash-summary__actions .fdash-btn { flex: 1 1 auto; }
  .fdash-pager { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .fdash *, .fdash *::before { transition: none !important; }
}
.fdash-families { scroll-margin-top: 88px; }
.fdash-date { white-space: nowrap; }