/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── Today-first dashboard ───────────────────────────────────────────── */
.today-dashboard-page {
  --today-navy: #12365f;
  --today-navy-deep: #0b294b;
  --today-navy-soft: #eaf1f8;
  --today-gold: #f2bd45;
  --today-gold-soft: #fff7df;
  --today-ink: #192536;
  --today-muted: #667487;
  --today-line: #dce4ec;
  --today-green: #247a53;
  --today-red: #a33d37;
  --today-shadow: 0 10px 32px rgba(21, 45, 78, .08);
  background: #f4f6f8;
  color: var(--today-ink);
  font-family: var(--font);
}
.today-dashboard-page .material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1;
}
.today-nav {
  align-items: center;
  align-self: stretch;
  display: flex;
  gap: 4px;
  min-width: 0;
}
.today-nav a {
  align-items: center;
  border-bottom: 3px solid transparent;
  color: #d8e1eb;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  height: 100%;
  padding: 0 15px;
  white-space: nowrap;
}
.today-nav a:hover, .today-nav a.active { color: #fff; }
.today-nav a.active { border-bottom-color: var(--today-gold); }
.today-account-menu > summary::-webkit-details-marker {
  display: none;
}
.today-account-menu > summary > .material-symbols-rounded { color: #cdd9e7; font-size: 18px; }
.today-dashboard-main { margin: 0 auto; max-width: 1240px; padding: 34px 28px 56px; }
.today-welcome {
  align-items: end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 24px;
}
.today-eyebrow {
  color: var(--today-navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  margin: 0 0 6px;
  text-transform: uppercase;
}
.today-welcome h1 {
  color: var(--today-ink);
  font-size: 34px;
  letter-spacing: -.04em;
  line-height: 1.12;
  margin: 0;
}
.today-welcome > div > p:last-child { color: var(--today-muted); font-size: 15px; margin: 8px 0 0; }
.today-priority {
  align-items: center;
  background: linear-gradient(110deg, var(--today-gold-soft), #fff 74%);
  border: 1px solid #eed38d;
  border-radius: 16px;
  box-shadow: var(--today-shadow);
  display: flex;
  gap: 18px;
  min-height: 126px;
  padding: 24px 26px;
}
.today-priority-clear { background: linear-gradient(110deg, #eef8f2, #fff 74%); border-color: #c9e4d4; }
.today-priority-icon {
  align-items: center;
  background: var(--today-gold);
  border-radius: 14px;
  color: var(--today-navy-deep);
  display: flex;
  flex: 0 0 auto;
  height: 52px;
  justify-content: center;
  width: 52px;
}
.today-priority-clear .today-priority-icon { background: #d8efe1; color: var(--today-green); }
.today-priority-icon .material-symbols-rounded { font-size: 28px; }
.today-priority-copy { flex: 1; min-width: 0; }
.today-priority-copy > span {
  color: #866010;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.today-priority-clear .today-priority-copy > span { color: var(--today-green); }
.today-priority-copy h2 {
  color: var(--today-ink);
  font-size: 21px;
  letter-spacing: -.02em;
  margin: 4px 0;
}
.today-priority-copy p { color: var(--today-muted); font-size: 14px; margin: 0; }
.today-button {
  align-items: center;
  background: var(--today-navy);
  border-radius: 10px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  min-height: 44px;
  padding: 0 17px;
}
.today-button:hover { background: var(--today-navy-deep); color: #fff; }
.today-section { margin-top: 30px; }
.today-section-heading {
  align-items: end;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 14px;
}
.today-section-heading h2 {
  color: var(--today-ink);
  font-size: 20px;
  letter-spacing: -.025em;
  margin: 0;
}
.today-section-heading p { color: var(--today-muted); font-size: 13px; margin: 3px 0 0; }
.today-section-heading > a {
  color: var(--today-navy);
  font-size: 13px;
  font-weight: 700;
  padding: 4px 0;
}
.today-task-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.today-task-card {
  background: #fff;
  border: 1px solid var(--today-line);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(21, 45, 78, .045);
  color: var(--today-ink);
  display: flex;
  flex-direction: column;
  min-height: 166px;
  padding: 18px 20px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.today-task-card:hover {
  border-color: #b9c9da;
  box-shadow: var(--today-shadow);
  color: var(--today-ink);
  transform: translateY(-2px);
}
.today-task-icon {
  align-items: center;
  background: var(--today-navy-soft);
  border-radius: 12px;
  color: var(--today-navy);
  display: flex;
  height: 44px;
  justify-content: center;
  margin-bottom: 20px;
  width: 44px;
}
.today-task-notice .today-task-icon, .today-task-event .today-task-icon {
  background: var(--today-gold-soft);
  color: #6d520a;
}
.today-task-setup .today-task-icon, .today-task-timetable .today-task-icon, .today-task-extras .today-task-icon {
  background: #e8f5ee;
  color: #31694d;
}
.today-task-movement .today-task-icon, .today-task-duty .today-task-icon {
  background: #f0ebfb;
  color: #674da0;
}
.today-task-card h3 { color: var(--today-ink); font-size: 17px; margin: 0; }
.today-task-card > p {
  color: var(--today-muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 7px 0 18px;
}
.today-task-meta {
  align-items: center;
  color: var(--today-navy);
  display: flex;
  font-size: 12px;
  font-weight: 700;
  justify-content: space-between;
  margin-top: auto;
}
.today-task-meta.is-pending { color: var(--today-red); }
.today-task-meta .material-symbols-rounded { font-size: 20px; }
/* Management & setup owns this row now that "At a glance" is gone: the cards
   are wider, carry their description, and are not behind a dropdown. */
.today-management-grid {
  gap: 10px;
  /* Flex, not grid: a grid leaves empty cells when the count does not divide
     by the column count, and five cards never do. These stretch instead, so
     the last row fills the width however many are on it. */
  display: flex;
  flex-wrap: wrap;
}
.today-management-card {
  align-items: center;
  /* Wide enough that three sit on a full-width row, so five wrap 3 + 2. */
  flex: 1 1 22rem;
  background: #fff;
  border: 1px solid var(--today-line);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(21, 45, 78, .04);
  color: var(--today-navy);
  display: flex;
  gap: 11px;
  min-height: 66px;
  padding: 14px 16px;
  transition: background .15s, box-shadow .15s, transform .15s;
}
.today-management-card:hover {
  background: var(--today-navy-soft);
  box-shadow: 0 8px 22px rgba(21, 45, 78, .09);
  transform: translateY(-1px);
}
.today-management-card > span:not(.material-symbols-rounded) { display: grid; min-width: 0; }
.today-management-card strong { color: var(--today-navy); font-size: 13.5px; }
.today-management-card small {
  color: var(--today-muted);
  font-size: 11px;
  line-height: 1.3;
  margin-top: 3px;
}
@media (max-width: 980px) {
  .today-header-inner { gap: 14px; }
  .today-brand { min-width: 190px; }
  .today-nav a { padding: 0 9px; }
  .today-task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .today-management-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .today-header-inner { flex-wrap: wrap; min-height: 68px; padding: 10px 18px 0; }
  .today-brand { min-width: 0; }
  .today-brand > span { display: none; }
  .today-account-menu > summary > span:nth-child(2), .today-account-menu > summary > .material-symbols-rounded {
    display: none;
  }
  .today-nav {
    flex: 0 0 calc(100% + 36px);
    margin: 0 -18px;
    order: 3;
    overflow-x: auto;
    padding: 0 12px;
    scrollbar-width: none;
  }
  .today-nav::-webkit-scrollbar { display: none; }
  .today-nav a { flex: 0 0 auto; min-height: 44px; }
  .today-account-popover { position: fixed; right: 16px; top: 64px; }
  .today-dashboard-main { padding: 25px 18px 40px; }
  .today-welcome h1 { font-size: 28px; }
  .today-priority { align-items: flex-start; flex-wrap: wrap; padding: 20px; }
  .today-priority-copy { min-width: calc(100% - 70px); }
  .today-priority .today-button { width: 100%; }
  .today-task-grid { grid-template-columns: 1fr; }
  .today-task-card { min-height: 155px; }
  .today-management-grid { grid-template-columns: 1fr; }
}
html { font-size: 15px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
/* ── Top bar ──────────────────────────────────────────────── */
.brand img {
  width: 32px;
  height: 38px;
  object-fit: contain;
  opacity: .92;
}
.brand span { display: flex; flex-direction: column; line-height: 1.2; }
.brand strong { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }
.brand small { color: rgba(255,255,255,.55); font-size: .72rem; font-weight: 500; }
.topbar nav {
  display: flex;
  align-items: center;
  gap: 2px;
  /* Not wrap: .topbar is a fixed 60px, so a second row is simply clipped.
     Anything that does not fit goes to the More menu instead. The mobile
     rules below switch this to a stacked column. */
  flex-wrap: nowrap;
  min-width: 0;
}
.topbar nav > a { white-space: nowrap; }
/* Links and menu labels are sized together: a summary inherits none of the
   anchor rules, so anything set on one alone shows up as two font sizes in
   the same bar. */
.topbar nav a, .topbar nav .nav-menu > summary {
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,.78);
  font-size: .86rem;
  font-weight: 500;
  padding: 6px 10px;
  transition: background .15s, color .15s;
}
.topbar nav a:hover { background: rgba(255,255,255,.14); color: #fff; }
.topbar nav a.active { background: var(--gold); color: var(--navy); }
.logout-form span {
  color: rgba(255,255,255,.65);
  font-size: .83rem;
  font-weight: 500;
}
.logout-form small {
  color: rgba(255,255,255,.5);
  display: block;
  font-size: .65rem;
  line-height: 1;
}
.view-as-form {
  align-items: center;
  border-left: 1px solid rgba(255,255,255,.14);
  display: flex;
  gap: 7px;
  margin-left: 8px;
  padding-left: 12px;
}
.view-as-form label {
  color: rgba(255,255,255,.62);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
}
.view-as-form select {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-sm);
  color: #fff;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  max-width: 190px;
  min-height: 30px;
  padding: 4px 8px;
}
.view-as-form option { color: var(--text); }
.logout-form button {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,.9);
  cursor: pointer;
  font: inherit;
  font-size: .83rem;
  font-weight: 500;
  padding: 5px 12px;
  transition: background .15s;
}
.logout-form button:hover { background: rgba(255,255,255,.18); }
/* ── Shared edit bar ──────────────────────────────────────── */
.management-edit-bar.hidden { display: none; }
.management-edit-bar.dirty { border-bottom-color: var(--gold); }
.management-edit-info { display: grid; gap: 1px; }
.management-edit-info strong { color: var(--navy); font-size: .9rem; font-weight: 650; }
.management-edit-info span { color: var(--slate-light); font-size: .78rem; }
.management-edit-actions { display: flex; gap: 8px; }
.management-edit-icon {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--navy);
  cursor: pointer;
  font: inherit;
  font-size: .82rem;
  font-weight: 650;
  min-height: 34px;
  padding: 6px 12px;
}
.management-edit-icon:hover:not(:disabled) { background: var(--navy-pale); }
.management-edit-icon.primary { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.management-edit-icon.primary:hover:not(:disabled) { background: #e5a700; border-color: #e5a700; }
.management-edit-icon:disabled { cursor: not-allowed; opacity: .45; }
/* ── Page shell ───────────────────────────────────────────── */
/* ── Cards / Panels ───────────────────────────────────────── */
.panel, .hub-panel, .module-card, .login-card, .notice-page, .attendance-workspace, .system-notes, .hero, .dashboard-hero, .detail-header {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.panel, .hub-panel { padding: 20px; }
.hero, .dashboard-hero, .detail-header {
  padding: 28px 32px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  box-shadow: var(--shadow-sm);
}
.dashboard-hero, .detail-header { align-items: flex-start; }
/* ── Typography helpers ───────────────────────────────────── */
.hero h1,
.dashboard-hero h1,
.detail-header h1 {
  color: var(--navy);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
/* ── Buttons & Actions ────────────────────────────────────── */
.primary-link,
.module-action,
.tool-button,
.danger-button {
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: .88rem;
  font-weight: 500;
  min-height: 36px;
  padding: 7px 14px;
  white-space: nowrap;
  transition: background .15s, box-shadow .15s, opacity .15s;
}
/* Primary — SPIC gold CTA */
.primary-link,
.module-action {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--navy);
  font-weight: 650;
}
.primary-link:hover,
.module-action:hover {
  background: #e5a700;
  border-color: #e5a700;
}
/* Secondary — outlined */
.secondary-link, .module-action.subtle, .tool-button {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--navy);
}
.secondary-link:hover, .module-action.subtle:hover, .tool-button:hover {
  background: var(--navy-pale);
  border-color: #c5d4e8;
}
/* Muted */
.module-action.muted { background: var(--line-soft); border: 1px solid var(--line); color: var(--slate); }
.module-action.muted:hover { background: var(--line); }
/* Danger */
.module-action.danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}
.module-action.danger:hover { background: #fee2e2; }
.danger-button { background: #dc2626; border: 1px solid #dc2626; color: #fff; }
.danger-button:hover { background: #b91c1c; }
.module-action:disabled, .tool-button:disabled { cursor: not-allowed; opacity: .45; }
.hero-actions, .module-actions, .link-row, .hub-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* ── Form elements ────────────────────────────────────────── */
input,
select,
textarea {
  background: var(--white);
  border: 1px solid #d1d9e0;
  border-radius: var(--radius-md);
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  min-height: 36px;
  padding: 7px 10px;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255,188,26,.22);
  outline: none;
}
input[type="date"] { max-width: 100%; min-width: 0; }
.inline-form input[type="date"] { width: 150px; }
textarea { line-height: 1.45; resize: vertical; }
/* Form labels */
label { display: grid; gap: 5px; }
label > span, .account-form label span, .account-row label span, .account-name span, .role-create-form label span, .role-row label span, .student-form label span, .attendance-toolbar span, .note-field span, .event-form label span, .event-row label span {
  color: var(--slate-light);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* ── Login ────────────────────────────────────────────────── */
.login-card {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  display: grid;
  gap: 16px;
  max-width: 400px;
  padding: 32px;
  width: min(100%, 400px);
}
.login-brand {
  align-items: center;
  display: flex;
  gap: 14px;
  margin-bottom: 4px;
}
.login-brand img { height: 52px; object-fit: contain; width: 42px; }
.login-brand h1 { color: var(--navy); font-size: 1.35rem; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.login-brand p { color: var(--slate-light); font-size: .82rem; margin-top: 3px; }
.login-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  color: #991b1b;
  font-size: .88rem;
  padding: 10px 12px;
}
.password-change-card { max-width: 460px; }
.password-requirement {
  color: var(--slate-light);
  font-size: .78rem;
  line-height: 1.45;
  margin: 0;
}
/* ── Dashboard ────────────────────────────────────────────── */
.dashboard-overview {
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 28px 32px;
}
.dashboard-overview h1 {
  color: var(--navy);
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.2;
  margin-bottom: 6px;
}
.dashboard-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
}
.dashboard-summary article {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  border-top: 3px solid var(--gold);
  display: grid;
  gap: 4px;
  min-height: 112px;
  padding: 18px;
}
.dashboard-summary span {
  color: var(--slate-light);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.dashboard-summary strong {
  color: var(--text);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
}
.dashboard-summary small { color: var(--slate); font-size: .82rem; }
.dashboard-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.dashboard-column { display: grid; gap: 16px; min-width: 0; }
.dashboard-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  min-height: 190px;
  padding: 20px;
}
.dashboard-panel-primary { border-top: 3px solid var(--gold); }
.dashboard-actions-list { display: grid; gap: 8px; }
.dashboard-actions-list a {
  align-items: center;
  background: var(--navy-pale);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  color: var(--navy);
  display: flex;
  font-size: .9rem;
  font-weight: 600;
  justify-content: space-between;
  min-height: 42px;
  padding: 10px 12px;
}
.dashboard-actions-list a::after { color: var(--slate-light); content: ">"; font-weight: 700; }
.compact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-student-list { display: grid; gap: 8px; }
.dashboard-student-list div {
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  display: grid;
  gap: 2px 10px;
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 54px;
  padding: 9px 10px;
}
.dashboard-student-list span {
  align-items: center;
  background: var(--navy-pale);
  border-radius: 50%;
  color: var(--navy);
  display: inline-flex;
  font-size: .78rem;
  font-weight: 700;
  grid-row: span 2;
  height: 32px;
  justify-content: center;
  width: 32px;
}
.dashboard-student-list strong { color: var(--text); font-size: .9rem; font-weight: 600; }
.dashboard-student-list small { color: var(--slate-light); font-size: .78rem; }
.dashboard-large-number {
  color: var(--navy);
  font-size: 3rem !important;
  font-weight: 750;
  line-height: 1;
  margin: 8px 0 6px !important;
}
.dashboard-overview-refined h1 { margin-bottom: 4px; }
.dashboard-attendance-card {
  align-items: stretch;
  background: var(--white);
  border: 1px solid #d8e3ef;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(210px, .58fr) minmax(0, 1.42fr);
  margin-bottom: 14px;
  overflow: hidden;
  padding: 20px;
}
.dashboard-attendance-heading { align-items: start; display: grid; gap: 10px; }
.dashboard-attendance-copy span {
  color: var(--navy-mid);
  font-size: .73rem;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.dashboard-week-picker { display: grid; gap: 4px; }
.dashboard-period-controls {
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(90px, .38fr) minmax(0, 1fr);
}
.dashboard-week-picker label {
  color: var(--slate-light);
  font-size: .7rem;
  font-weight: 750;
}
.dashboard-week-picker select,
.dashboard-week-picker input {
  background: #fff;
  border: 1px solid #cddaea;
  border-radius: 6px;
  color: var(--navy);
  font-size: .78rem;
  font-weight: 750;
  min-height: 34px;
  padding: 5px 8px;
  width: 100%;
}
.dashboard-attendance-copy h2 {
  color: var(--navy);
  font-size: 2.25rem;
  line-height: 1;
  margin: 4px 0;
}
.dashboard-attendance-copy p {
  color: var(--slate);
  font-size: .88rem;
  line-height: 1.4;
  margin: 0;
}
.dashboard-attendance-kpis {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 8px;
}
.dashboard-attendance-kpis article {
  background: #fff;
  border: 1px solid #dbe7f4;
  border-radius: 10px;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
}
.dashboard-attendance-kpis article span {
  color: var(--slate-light);
  font-size: .64rem;
  letter-spacing: .04em;
}
.dashboard-attendance-kpis article strong {
  color: var(--navy);
  font-size: 1.18rem;
  line-height: 1;
}
.dashboard-attendance-visual { display: grid; gap: 14px; min-width: 0; }
.dashboard-attendance-chart.month-chart {
  grid-template-columns: repeat(var(--attendance-days), minmax(48px, 1fr));
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 2px;
}
.attendance-bar-item {
  align-items: center;
  color: inherit;
  display: grid;
  gap: 5px;
  grid-template-rows: minmax(118px, 1fr) auto auto auto;
  min-width: 0;
  text-align: center;
  transition: transform .12s ease;
}
.attendance-bar-item:hover { transform: translateY(-2px); }
.attendance-bar-item:nth-child(2) .attendance-bar-fill { background: #2f80ed; }
.attendance-bar-item:nth-child(3) .attendance-bar-fill { background: #28a86b; }
.attendance-bar-item:nth-child(4) .attendance-bar-fill { background: #f2b536; }
.attendance-bar-item:nth-child(5) .attendance-bar-fill { background: #0f766e; }
.attendance-bar-item.pending .attendance-bar-track {
  background: repeating-linear-gradient(
    45deg,
    #f2f5f8,
    #f2f5f8 7px,
    #e7edf3 7px,
    #e7edf3 14px
  );
  border-color: #d8e0e8;
}
.attendance-bar-item strong { color: var(--text); font-size: .86rem; line-height: 1.1; }
.attendance-bar-item span { color: var(--navy); font-size: .78rem; font-weight: 850; }
.attendance-bar-item small { color: var(--slate-light); font-size: .72rem; }
.dashboard-attendance-period {
  color: var(--navy);
  display: block;
  font-size: .78rem;
  font-weight: 800;
  margin-top: -2px;
}
.attendance-bar-item.today span {
  background: var(--navy);
  border-radius: 999px;
  color: #fff;
  padding: 3px 7px;
}
.dashboard-workspace {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.dashboard-today-panel, .dashboard-workflows-panel { min-height: 0; }
.dashboard-focus-stat:nth-child(2) { border-top-color: var(--gold); }
.dashboard-focus-stat span, .dashboard-section-headline span {
  color: var(--slate-light);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.dashboard-focus-stat strong { color: var(--navy); font-size: 1.65rem; line-height: 1; }
.dashboard-focus-stat a {
  align-self: end;
  color: var(--navy-mid);
  font-size: .84rem;
  font-weight: 750;
}
.dashboard-section-headline {
  align-items: center;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-top: 14px;
}
.dashboard-section-headline h3 { color: var(--navy); font-size: .95rem; margin: 0; }
.dashboard-exception-list { max-height: 360px; overflow: auto; }
.dashboard-watchlist {
  background: #fbfdff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 12px;
}
.compact-watchlist-head { border-top: 0; margin-bottom: 9px; padding-top: 0; }
.dashboard-watchlist-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-watchlist-grid a {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-left: 4px solid #e85d75;
  border-radius: 10px;
  color: var(--text);
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.dashboard-watchlist-grid a:hover { background: #fff7f8; border-color: #f4a8b6; transform: translateY(-1px); }
.dashboard-watchlist-grid strong { color: var(--navy); font-size: .88rem; line-height: 1.18; }
.dashboard-watchlist-grid span { color: var(--slate-light); font-size: .76rem; font-weight: 700; }
.dashboard-workflow-list { display: grid; gap: 9px; }
.dashboard-workflow-list a {
  background: #fbfdff;
  border: 1px solid var(--line-soft);
  border-left: 4px solid #2f80ed;
  border-radius: var(--radius-md);
  display: grid;
  gap: 4px;
  min-height: 66px;
  padding: 12px 14px;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.dashboard-workflow-list a:hover {
  background: var(--navy-pale);
  border-color: #c5d5e6;
  transform: translateY(-1px);
}
.dashboard-workflow-list a:nth-child(2) { border-left-color: #28a86b; }
.dashboard-workflow-list a:nth-child(3) { border-left-color: var(--gold); }
.dashboard-workflow-list a:nth-child(4) { border-left-color: #0f766e; }
.dashboard-workflow-list a:nth-child(5) { border-left-color: #7c3aed; }
.dashboard-workflow-list a:nth-child(6) { border-left-color: #e85d75; }
.dashboard-workflow-list span { color: var(--navy); font-size: .9rem; font-weight: 800; }
.dashboard-workflow-list strong {
  color: var(--slate);
  font-size: .82rem;
  font-weight: 550;
  line-height: 1.35;
}
body:has(.school-dashboard-shell) { background: #aeb8df; }
body:has(.school-dashboard-shell) .topbar { display: none; }
body:has(.school-dashboard-shell) .page { max-width: none; padding: 70px 68px; }
.school-dashboard-shell {
  background: #f8f8ff;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(43, 62, 130, .18);
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  margin: 0 auto;
  max-width: 1280px;
  min-height: 770px;
  overflow: visible;
}
.dashboard-rail {
  align-items: stretch;
  background: var(--navy-mid);
  border-radius: 8px;
  box-shadow: 18px 24px 40px rgba(50, 100, 220, .24);
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: -32px 0 74px 24px;
  padding: 26px 18px;
  position: relative;
  z-index: 2;
}
.rail-logo {
  align-items: center;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  display: inline-flex;
  gap: 10px;
  height: auto;
  justify-content: flex-start;
  margin: 0;
  width: 100%;
}
.rail-logo img {
  background: rgba(255,255,255,.15);
  border-radius: 9px;
  height: 30px;
  object-fit: contain;
  padding: 4px;
  width: 30px;
}
.rail-logo strong {
  color: #fff;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: 0;
}
.dashboard-rail nav {
  align-items: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
}
.dashboard-rail nav a {
  align-items: center;
  border-radius: 14px;
  display: inline-flex;
  gap: 12px;
  min-height: 44px;
  justify-content: flex-start;
  opacity: .62;
  padding: 0 13px;
  position: relative;
  transition: background .15s, opacity .15s;
  width: 100%;
}
.dashboard-rail nav a:hover, .dashboard-rail nav a.active { background: rgba(255,255,255,.18); opacity: 1; }
.dashboard-rail nav a strong {
  color: #fff;
  font-size: .83rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}
.dashboard-rail nav span, .dashboard-rail nav span::before, .dashboard-rail nav span::after {
  background: rgba(255,255,255,.92);
  content: "";
  display: block;
  flex: 0 0 auto;
  position: relative;
}
.rail-grid, .rail-grid::before, .rail-grid::after { border-radius: 3px; height: 7px; width: 7px; }
.rail-grid {
  box-shadow: 11px 0 rgba(255,255,255,.92), 0 11px rgba(255,255,255,.92), 11px 11px rgba(255,255,255,.92);
  margin: -8px 11px 0 0;
}
.rail-calendar { border-radius: 3px; height: 17px; width: 18px; }
.rail-calendar::before {
  height: 3px;
  left: 0;
  position: absolute;
  top: 4px;
  width: 18px;
}
.rail-check {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 5px;
  height: 19px;
  width: 19px;
}
.rail-check::before {
  height: 2px;
  left: 4px;
  position: absolute;
  top: 9px;
  transform: rotate(45deg);
  width: 6px;
}
.rail-check::after {
  height: 2px;
  left: 8px;
  position: absolute;
  top: 7px;
  transform: rotate(-45deg);
  width: 10px;
}
.rail-move {
  border-radius: 50%;
  height: 8px;
  width: 8px;
  margin-left: 10px;
  margin-right: 1px;
}
.rail-move::before {
  border-radius: 50%;
  height: 8px;
  left: -10px;
  position: absolute;
  top: 0;
  width: 8px;
}
.rail-move::after {
  border-radius: 50%;
  height: 8px;
  left: 10px;
  position: absolute;
  top: 0;
  width: 8px;
}
.rail-note { border-radius: 3px; height: 18px; width: 15px; }
.rail-note::before {
  height: 2px;
  left: 3px;
  position: absolute;
  top: 5px;
  width: 9px;
}
.rail-note::after {
  height: 2px;
  left: 3px;
  position: absolute;
  top: 10px;
  width: 9px;
}
.rail-cog { border-radius: 50%; height: 18px; width: 18px; }
.rail-cog::before {
  background: var(--navy-mid) !important;
  border-radius: 50%;
  height: 7px;
  left: 5px;
  position: absolute;
  top: 5px;
  width: 7px;
}
.dashboard-canvas {
  background: #fbfbff;
  border-radius: 0 8px 8px 0;
  display: grid;
  gap: 22px;
  min-width: 0;
  padding: 30px 26px 26px;
}
.dashboard-topline {
  align-items: center;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(51, 70, 120, .06);
  display: grid;
  gap: 24px;
  grid-template-columns: auto minmax(260px, 1fr) auto;
  min-width: 0;
  padding: 22px 24px;
}
.dashboard-topline h1 {
  color: #171323;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
}
.dashboard-search {
  align-items: center;
  background: #fafaff;
  border-radius: 14px;
  display: flex;
  gap: 10px;
  max-width: 520px;
  min-width: 0;
  padding: 0 14px;
}
.dashboard-search span {
  border: 2px solid #c9c4d7;
  border-radius: 50%;
  display: inline-block;
  height: 16px;
  position: relative;
  width: 16px;
}
.dashboard-search span::after {
  background: #c9c4d7;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  right: -6px;
  top: 11px;
  transform: rotate(45deg);
  width: 7px;
}
.dashboard-search input {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 46px;
  padding: 0 4px;
}
.dashboard-user {
  align-items: center;
  display: flex;
  gap: 12px;
  white-space: nowrap;
}
.user-avatar, .student-dot, .quick-avatar {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
}
.user-avatar {
  background: #f2c8ad;
  color: #4d2a18;
  font-weight: 700;
  height: 44px;
  width: 44px;
}
.dashboard-user strong {
  color: #171323;
  display: block;
  font-size: .96rem;
  line-height: 1.1;
}
.dashboard-user small {
  color: #8c8798;
  display: block;
  font-size: .78rem;
  margin-top: 2px;
}
.dashboard-main-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) 330px;
  min-width: 0;
}
.dashboard-left-column, .dashboard-right-column { display: grid; gap: 22px; min-width: 0; }
.dashboard-welcome-card {
  background: var(--navy-mid);
  border-radius: 8px;
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  min-height: 158px;
  overflow: hidden;
  padding: 28px 28px 0;
  position: relative;
}
.dashboard-welcome-card p {
  color: var(--gold);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.dashboard-welcome-card h2 {
  color: #fff;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.45;
  max-width: 430px;
}
.module-action.warm {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  margin-top: 18px;
  min-height: 30px;
  padding: 5px 13px;
}
.welcome-illustration {
  bottom: 0;
  height: 150px;
  position: absolute;
  right: 28px;
  width: 260px;
}
.person-head {
  background: #ffc197;
  border-radius: 50%;
  height: 42px;
  position: absolute;
  right: 72px;
  top: 14px;
  width: 42px;
  z-index: 3;
}
.person-head::before {
  background: #7b3525;
  border-radius: 24px 24px 20px 20px;
  content: "";
  display: block;
  height: 54px;
  left: -7px;
  position: absolute;
  top: -11px;
  width: 52px;
  z-index: -1;
}
.person-body {
  background: #8797e5;
  border-radius: 42px 42px 0 0;
  bottom: 0;
  height: 84px;
  position: absolute;
  right: 40px;
  width: 116px;
}
.desk {
  background: #1d2145;
  bottom: 0;
  height: 14px;
  position: absolute;
  right: 0;
  width: 250px;
}
.laptop {
  background: #202747;
  border-radius: 8px 8px 0 0;
  bottom: 12px;
  height: 58px;
  position: absolute;
  right: 140px;
  transform: skew(-10deg);
  width: 88px;
}
.dashboard-stat-row { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-card {
  border-radius: 8px;
  min-height: 82px;
  overflow: hidden;
  padding: 18px 42px 16px 16px;
  position: relative;
}
.stat-card::after {
  border-radius: 50%;
  bottom: -14px;
  content: "";
  height: 62px;
  position: absolute;
  right: -18px;
  width: 62px;
}
.stat-card span {
  color: #777184;
  display: block;
  font-size: .82rem;
  margin-bottom: 3px;
}
.stat-card strong {
  color: #171323;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.2;
}
.stat-card.blue { background: var(--navy-pale); }
.stat-card.green { background: #e8f7ec; }
.stat-card.pink { background: #fde6fb; }
.stat-card.orange { background: #fff0d8; }
.stat-card.blue::after { background: var(--navy-mid); }
.stat-card.green::after { background: #33a852; }
.stat-card.pink::after { background: #f350c9; }
.stat-card.orange::after { background: var(--gold); }
.dashboard-table-card, .side-panel {
  background: #fff;
  border: 1px solid #f0edf6;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(33, 23, 61, .08);
  min-width: 0;
}
.dashboard-table-card { padding: 20px 16px 14px; }
.dashboard-section-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}
.dashboard-section-head h2, .side-panel h2 {
  color: #171323;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0;
}
.dashboard-section-head a { color: #a39cad; font-size: .84rem; font-weight: 600; }
.student-info-table-wrap { overflow-x: auto; }
.student-info-table { border-collapse: collapse; min-width: 620px; width: 100%; }
.student-info-table th {
  color: #595466;
  font-size: .72rem;
  font-weight: 600;
  padding: 10px 12px;
  text-align: left;
}
.student-info-table td {
  border-top: 1px solid #f4f1f8;
  color: #6c6675;
  font-size: .84rem;
  padding: 11px 12px;
}
.student-info-table tr.is-highlighted {
  background: var(--navy-mid);
  box-shadow: 0 8px 18px rgba(47, 107, 233, .2);
}
.student-info-table tr.is-highlighted td { border-top-color: var(--navy-mid); color: #fff; }
.student-dot {
  background: #f2c8ad;
  color: #4d2a18;
  font-size: .78rem;
  font-weight: 800;
  height: 28px;
  margin-right: 8px;
  vertical-align: middle;
  width: 28px;
}
.student-status {
  background: var(--navy-pale);
  border-radius: 5px;
  color: var(--navy-mid);
  display: inline-flex;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 8px;
}
.is-highlighted .student-status { background: var(--gold-soft); color: var(--navy); }
.student-info-table td:last-child a { color: #b8b3c0; font-size: 1.1rem; letter-spacing: 2px; }
.side-panel { padding: 22px; }
.chart-legend {
  align-items: center;
  color: #8b8496;
  display: flex;
  font-size: .75rem;
  gap: 9px;
  justify-content: flex-end;
  margin: 10px 0 16px;
}
.chart-legend span, .chart-legend em {
  border-radius: 2px;
  display: inline-block;
  height: 12px;
  width: 12px;
}
.chart-legend span { background: var(--navy-mid); }
.chart-legend em { background: #f0eef4; }
.mini-bar-chart {
  align-items: end;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(5, 1fr);
  height: 275px;
  padding: 8px 6px 0;
}
.mini-bar-chart div {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  justify-content: end;
}
.mini-bar-chart span {
  background: var(--navy-mid);
  border-radius: 8px 8px 0 0;
  display: block;
  height: var(--bar);
  min-height: 40px;
  position: relative;
  width: 18px;
}
.mini-bar-chart span::before {
  background: #f2f0f5;
  border-radius: 8px 8px 0 0;
  bottom: 0;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  opacity: .75;
  position: absolute;
  transform: translateX(-20px);
  width: 18px;
}
.mini-bar-chart small { color: #6f6878; font-size: .8rem; }
.quick-panel { display: grid; gap: 8px; }
.quick-action-list { display: grid; gap: 10px; }
.quick-action-list a {
  align-items: center;
  background: #fbf9fd;
  border-radius: 12px;
  color: #4d465c;
  display: flex;
  font-size: .88rem;
  font-weight: 650;
  gap: 10px;
  min-height: 46px;
  padding: 8px 10px;
}
.quick-avatar { height: 30px; width: 30px; }
.quick-avatar.purple { background: var(--navy-pale); }
.quick-avatar.green { background: #def7e8; }
.quick-avatar.orange { background: #ffedd5; }
.quick-avatar.pink { background: #ffe0f7; }
.hub-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .15s;
}
.hub-panel:hover { box-shadow: var(--shadow-sm); }
.primary-hub { border-color: #c8d6e5; }
.hub-panel-head {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: flex-start;
}
.hub-panel h2 {
  color: var(--navy);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.hub-panel p { color: var(--slate); font-size: .88rem; line-height: 1.45; }
.hub-stats { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hub-stats div {
  background: var(--navy-pale);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.hub-stats dt {
  color: var(--slate-light);
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hub-stats dd {
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 2px;
}
/* ── Status strip ─────────────────────────────────────────── */
.status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.status-strip > div {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-xs);
}
.status-strip .label {
  color: var(--slate-light);
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.status-strip strong { color: var(--text); font-size: 1.2rem; font-weight: 600; }
/* ── Module grid ──────────────────────────────────────────── */
.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.module-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 180px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .15s, transform .15s;
}
.module-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.module-card.primary { border-color: #c8d6e5; }
.module-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.module-head h2 { color: var(--navy); font-size: .98rem; font-weight: 600; }
.module-card p {
  color: var(--slate);
  line-height: 1.45;
  font-size: .88rem;
  flex: 1;
}
.mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mini-stats div {
  background: var(--navy-pale);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.mini-stats dt {
  color: var(--slate-light);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.mini-stats dd {
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 2px;
}
.compact-modules { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.compact-modules .module-card { min-height: 145px; }
/* ── Status badges ────────────────────────────────────────── */
.status {
  border-radius: var(--radius-pill);
  font-size: .72rem;
  font-weight: 600;
  padding: 4px 10px;
  white-space: nowrap;
  letter-spacing: .02em;
}
.status.live { background: #dcfce7; color: #15803d; }
.status.offline { background: #fee2e2; color: #b91c1c; }
.status.planned { background: var(--line-soft); color: var(--slate); }
.status.active { background: var(--navy-light); color: var(--navy-mid); }
/* Cover picked up from an absent colleague. Gold rather than a warning red:
   it is a normal part of a day, not a problem, but it is not their own class
   either, so it should not read as the ordinary case. */
.status.cover { background: var(--gold-soft); color: #8a5a00; }
/* ── Panel headings ───────────────────────────────────────── */
.panel-heading {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 16px;
}
.panel-heading.compact { align-items: center; margin-bottom: 12px; }
.panel-heading p {
  color: var(--slate-light);
  font-size: .87rem;
  line-height: 1.4;
  margin-top: 2px;
}
.panel h2 {
  color: var(--navy);
  font-size: .98rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.panel p {
  color: var(--slate);
  line-height: 1.45;
  font-size: .9rem;
  margin-bottom: 12px;
}
/* ── Messages / banners ───────────────────────────────────── */
.save-banner {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-md);
  color: #15803d;
  font-size: .88rem;
  font-weight: 500;
  margin-bottom: 14px;
  padding: 10px 14px;
}
.save-banner.warning { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.message-stack { display: grid; gap: 8px; margin-bottom: 14px; }
.message-stack .save-banner { margin-bottom: 0; }
.form-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  color: #991b1b;
  font-size: .88rem;
  margin-bottom: 14px;
  padding: 10px 14px;
}
/* ── Detail layout ────────────────────────────────────────── */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr); gap: 14px; }
.panel.wide { grid-column: span 2; }
.data-list { display: grid; gap: 0; }
.data-list div {
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
}
.data-list div:last-child { border-bottom: 0; padding-bottom: 0; }
.data-list dt { color: var(--slate-light); font-size: .87rem; font-weight: 500; }
.data-list dd { color: var(--text); font-size: .87rem; font-weight: 600; }
.term-list {
  color: var(--slate);
  line-height: 1.6;
  list-style-position: inside;
  font-size: .9rem;
}
.system-notes { margin-top: 18px; padding: 18px; }
.system-notes h2 {
  color: var(--navy);
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.system-notes p { color: var(--slate); font-size: .9rem; line-height: 1.45; }
/* ── Attendance ───────────────────────────────────────────── */
.attendance-workspace {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  padding: 18px;
}
.attendance-toolbar {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}
.inline-form {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.attendance-toolbar label, .note-field { display: grid; gap: 5px; }
.attendance-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.attendance-summary div { background: var(--white); }
.roll-year-group {
  background: var(--navy-pale);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.roll-year-group + .roll-year-group { margin-top: 12px; }
.student-roll-grid {
  display: grid;
  gap: 8px;
  /* 320px, not 200px: at 200px a wide screen produced seven cramped columns
     and names truncated. This gives 4 on a desktop, 3 on a laptop, 2 on a
     tablet, 1 on a phone. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-top: 12px;
}
.student-roll-card input[type="checkbox"] {
  accent-color: #16a34a;
  flex: 0 0 auto;
  height: 18px;
  min-height: auto;
  width: 18px;
}
.student-roll-card strong {
  color: var(--text);
  display: block;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.2;
}
.student-roll-card small {
  color: var(--slate-light);
  display: block;
  font-size: .78rem;
  margin-top: 2px;
}
.absent-panel { margin-top: 14px; }
.absent-panel .panel-heading strong { color: #b91c1c; white-space: nowrap; }
.absent-table-wrap { overflow-x: auto; }
.absent-table { min-width: 600px; }
.absent-table select { min-width: 145px; width: 100%; }
.absent-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.absent-list div {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--radius-md);
  display: grid;
  gap: 2px;
  padding: 10px 12px;
}
.absent-list strong { color: #7f1d1d; font-size: .9rem; font-weight: 600; }
.absent-list span { color: #9a3412; font-size: .8rem; font-weight: 500; }
/* ── Daily Notice ─────────────────────────────────────────── */
.notice-page {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.notice-header {
  align-items: flex-start;
  background: var(--navy);
  color: #fff;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 26px 30px;
}
.notice-title-block { display: grid; gap: 8px; min-width: 0; }
.notice-header .eyebrow { color: var(--gold); margin: 0; }
.notice-header h1 {
  color: #fff;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
}
.notice-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.notice-meta span {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-pill);
  color: rgba(255,255,255,.9);
  display: inline-flex;
  font-size: .78rem;
  font-weight: 650;
  line-height: 1;
  padding: 6px 11px;
}
.notice-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.notice-date-form { display: flex; gap: 8px; }
.notice-date-chip, .section-count {
  border-radius: var(--radius-pill);
  display: inline-flex;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1;
  padding: 6px 11px;
  white-space: nowrap;
}
.section-count { background: var(--navy-light); border: 1px solid #c5d4e8; color: var(--navy); }
.notice-header .module-action {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.3);
  color: #fff;
}
.notice-header .module-action:hover { background: rgba(255,255,255,.24); }
.notice-header .module-action.subtle {
  background: transparent;
  border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.85);
}
.notice-header .module-action.subtle:hover { background: rgba(255,255,255,.12); color: #fff; }
.notice-header input[type="date"] { min-height: 36px; width: 150px; }
.notice-quote {
  background: var(--gold-soft);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-md);
  margin: 18px 24px 0;
  padding: 14px 16px;
}
.notice-quote span {
  color: #8a5a00;
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.notice-quote p {
  color: var(--text);
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
}
.notice-quote strong {
  color: #8a5a00;
  display: block;
  font-size: .82rem;
  font-weight: 600;
  margin-top: 6px;
}
.notice-section {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  margin-left: 24px;
  margin-right: 24px;
  padding: 16px;
}
.notice-section:first-of-type { margin-top: 18px; }
.notice-quote + .notice-section { margin-top: 18px; }
.notice-section + .notice-section { margin-top: 14px; }
.notice-section h3 {
  color: var(--navy);
  font-size: .98rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.notice-section-heading {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 8px;
}
.notice-section-heading h3 { margin-bottom: 2px; }
.notice-help { color: var(--slate-light); font-size: .87rem; margin-bottom: 10px; }
.notice-table-wrap { overflow-x: auto; }
.notice-table {
  border-collapse: collapse;
  min-width: 700px;
  table-layout: fixed;
  width: 100%;
}
.notice-table th, .notice-table td {
  border-bottom: 1px solid var(--line-soft);
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
  font-size: .88rem;
}
.notice-table th {
  background: var(--navy);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 8px 10px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.notice-table tr:last-child td { border-bottom: 0; }
.supervision-table { min-width: 700px; }
.notice-list-table { min-width: 700px; }
.student-absence-table { min-width: 0; table-layout: fixed; }
.notice-list-table th:first-child:nth-last-child(2), .notice-list-table th:first-child:nth-last-child(2) ~ th {
  width: 50%;
}
.notice-list-table.student-absence-table th:first-child, .notice-list-table.student-absence-table td:first-child {
  width: auto;
}
.notice-list-table.student-absence-table th:nth-child(2), .notice-list-table.student-absence-table td:nth-child(2) {
  width: 76px;
}
.notice-year-cell {
  color: var(--navy);
  font-weight: 750;
  white-space: nowrap;
  width: 120px;
}
.notice-inline-list { display: flex; flex-wrap: wrap; gap: 6px; }
.notice-inline-list span {
  background: var(--navy-pale);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--slate);
  display: inline-flex;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 5px 9px;
}
.notice-inline-list.compact span { background: var(--white); padding: 4px 8px; }
.notice-subheading { margin-top: 4px; }
.notice-subheading-spaced { margin-top: 16px; }
.notice-events { display: grid; gap: 10px; }
.notice-event-card {
  align-items: stretch;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  overflow: hidden;
}
.notice-event-date {
  background: var(--navy-pale);
  border-right: 1px solid var(--line);
  color: var(--navy);
  display: grid;
  gap: 2px;
  justify-items: center;
  align-content: center;
  padding: 12px 8px;
  text-align: center;
}
.notice-event-date span {
  color: var(--slate-light);
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.notice-event-date strong { color: var(--navy); font-size: .98rem; font-weight: 800; }
.notice-event-date em {
  color: var(--slate);
  font-size: .74rem;
  font-style: normal;
  font-weight: 650;
}
/* A repeat carries its run in one card, so it says how many dates that is. */
.notice-event-repeat {
  background: var(--gold-soft);
  border-radius: var(--radius-pill);
  color: #8a5a00;
  font-size: .66rem;
  font-weight: 700;
  margin-top: 2px;
  padding: 2px 8px;
  white-space: nowrap;
}
/* The standing instructions the printed notice carries. Quiet: they are the
   same every day and must not compete with the day's own news. */
.notice-standing-note {
  color: var(--slate);
  font-size: .78rem;
  font-style: italic;
  line-height: 1.5;
  margin: 8px 0 0;
}
.notice-footer-note {
  border-top: 1px solid var(--line);
  margin: 18px 0 0;
  padding-top: 10px;
}
.notice-event-main {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 11px 13px;
}
.notice-event-title-row {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.notice-event-type {
  color: var(--slate-light);
  display: block;
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .06em;
  line-height: 1.1;
  margin-bottom: 2px;
  text-transform: uppercase;
}
.notice-event-title-row h4 {
  color: var(--navy);
  font-size: .96rem;
  font-weight: 750;
  line-height: 1.25;
  margin: 0;
}
.notice-event-year {
  background: var(--gold-soft);
  border: 1px solid #f1cf72;
  border-radius: var(--radius-pill);
  color: #805600;
  flex: 0 0 auto;
  font-size: .76rem;
  font-weight: 800;
  padding: 4px 9px;
  white-space: nowrap;
}
.notice-event-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.notice-event-meta span {
  background: var(--navy-pale);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  color: var(--slate);
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.2;
  padding: 4px 8px;
}
.notice-event-detail {
  border-top: 1px solid var(--line-soft);
  color: var(--slate);
  font-size: .84rem;
  line-height: 1.42;
  margin: 0;
  padding-top: 8px;
}
.notice-event-students { margin-top: 2px; }
.notice-event-students > strong {
  color: var(--slate-light);
  display: block;
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .06em;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.notice-attendee-groups {
  display: grid;
  gap: 5px;
  max-height: 150px;
  overflow: auto;
}
.notice-attendee-group {
  align-items: start;
  background: #fbfdff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 8px;
  grid-template-columns: 82px minmax(0, 1fr);
  padding: 7px 9px;
}
.notice-attendee-group span {
  color: var(--navy);
  font-size: .78rem;
  font-weight: 750;
  white-space: nowrap;
}
.notice-attendee-group p {
  color: var(--slate);
  font-size: .82rem;
  line-height: 1.35;
  margin: 0;
}
.notice-student-chips { max-height: 130px; overflow: auto; }
.notice-student-table { min-width: 340px; }
.notice-footer-space { height: 22px; }
/* ── Events ───────────────────────────────────────────────── */
.event-panel { margin-bottom: 14px; }
.event-create-panel { border-top: 3px solid var(--navy); }
.event-create-details summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  list-style: none;
}
.event-create-details summary::-webkit-details-marker { display: none; }
.event-create-details summary > span:first-child { display: grid; gap: 2px; }
.event-create-details summary strong { color: var(--navy); font-size: .98rem; }
.event-create-details summary small { color: var(--slate-light); font-size: .84rem; }
.event-create-details[open] summary {
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  padding-bottom: 12px;
}
.event-layout {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.35fr) minmax(290px, .75fr);
}
.event-workbench {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(280px, .42fr) minmax(0, 1fr);
}
.event-calendar-workbench { grid-template-columns: 1fr; }
.event-sidebar {
  display: grid;
  gap: 12px;
  min-width: 0;
  position: sticky;
  top: 76px;
}
.event-calendar-head {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: -2px -2px 12px;
  padding: 0 2px 12px;
}
.event-calendar-head span {
  color: var(--slate-light);
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.event-calendar-head h2 {
  color: var(--navy);
  font-size: 1rem;
  line-height: 1.2;
  margin: 2px 0 0;
}
.event-calendar-nav { display: flex; flex: 0 0 auto; gap: 6px; }
.calendar-control-stack {
  align-items: flex-end;
  display: grid;
  flex: 0 0 auto;
  gap: 8px;
  justify-items: end;
}
.calendar-view-tabs a {
  border-radius: 999px;
  color: var(--slate);
  font-size: .78rem;
  font-weight: 800;
  padding: 6px 11px;
  transition: background .12s, color .12s, box-shadow .12s;
}
.calendar-view-tabs a:hover, .calendar-view-tabs a.active {
  background: var(--navy);
  box-shadow: 0 4px 10px rgba(30, 60, 114, .16);
  color: #fff;
}
.calendar-nav-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.term-calendar-head { align-items: flex-start; }
.term-calendar-head p { color: var(--slate-light); font-size: .86rem; margin-top: 4px; }
.event-calendar-panel, .event-list-panel, .event-detail-panel { min-width: 0; }
.term-calendar-panel {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, .35) rgba(15, 23, 42, .06);
}
.term-calendar-panel::-webkit-scrollbar { height: 10px; }
.term-calendar-panel::-webkit-scrollbar-track { background: rgba(15, 23, 42, .06); border-radius: 999px; }
.term-calendar-panel::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .3); border-radius: 999px; }
.term-calendar-panel::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, .45); }
.term-calendar-grid {
  display: grid;
  grid-template-columns: minmax(96px, .58fr) repeat(7, minmax(138px, 1fr));
  min-width: 1080px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.week-calendar-grid { min-width: 980px; }
.month-calendar-grid { min-width: 1040px; }
.term-calendar-dayhead:last-child { border-right: 0; }
.term-week-cell {
  background: var(--navy-pale);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  color: var(--slate);
  display: grid;
  gap: 3px;
  min-height: 112px;
  padding: 10px 9px;
}
.term-week-cell strong { color: var(--navy); font-size: .9rem; }
.term-week-cell span, .term-week-cell em, .term-week-cell small {
  color: var(--slate-light);
  font-size: .72rem;
  font-style: normal;
  font-weight: 700;
}
.term-day-cell:nth-child(8n) { border-right: 0; }
.term-day-cell.out-term { background: #f8fafc; color: #aab4c2; }
.term-day-cell.today { box-shadow: inset 0 0 0 2px var(--navy-mid); }
.term-day-cell.selected { background: var(--gold-soft); box-shadow: inset 0 0 0 2px var(--gold); }
.term-day-number { align-items: baseline; display: flex; gap: 5px; }
.term-day-number strong { color: var(--navy); font-size: .94rem; }
.term-day-number span {
  color: var(--slate-light);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.term-event-list { display: grid; gap: 5px; }
.term-event-pill {
  background: #fffaf0;
  border: 1px solid #f7d782;
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  color: var(--text);
  display: grid;
  gap: 2px;
  padding: 6px 7px;
  transition: background .12s, border-color .12s, transform .12s;
}
.term-event-pill:hover, .term-event-pill.active {
  background: #fff4cc;
  border-color: var(--gold);
  transform: translateY(-1px);
}
.term-event-pill.inactive { opacity: .58; }
.term-event-pill strong {
  color: var(--navy);
  display: -webkit-box;
  font-size: .78rem;
  line-height: 1.16;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.term-event-pill span {
  color: var(--slate-light);
  display: -webkit-box;
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.18;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.term-no-event { color: #c5ceda; font-size: .82rem; }
.day-calendar-card {
  background: linear-gradient(135deg, #fff 0%, #f8fbff 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: grid;
  gap: 14px;
  padding: 16px;
}
.day-calendar-card-head {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-bottom: 12px;
}
.day-calendar-card-head span {
  color: var(--slate-light);
  display: block;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.day-calendar-card-head h3 {
  color: var(--navy);
  font-size: 1.08rem;
  line-height: 1.25;
  margin-top: 3px;
}
.day-calendar-card-head strong {
  background: var(--gold-soft);
  border: 1px solid #f4d06f;
  border-radius: 999px;
  color: #7a5800;
  flex: 0 0 auto;
  font-size: .78rem;
  padding: 6px 10px;
}
.day-event-list { display: grid; gap: 10px; }
.day-event-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  color: var(--text);
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.day-event-card:hover, .day-event-card.active {
  border-color: var(--gold);
  box-shadow: 0 12px 24px rgba(17, 24, 39, .1);
  transform: translateY(-1px);
}
.day-event-card.inactive { opacity: .58; }
.day-event-card span {
  color: var(--slate-light);
  font-size: .73rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.day-event-card strong { color: var(--navy); font-size: .98rem; line-height: 1.25; }
.day-event-card em {
  color: var(--slate);
  font-size: .84rem;
  font-style: normal;
  font-weight: 650;
}
.event-term-calendar { display: grid; gap: 14px; }
.event-month { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.event-month h3 {
  background: var(--navy-pale);
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  font-size: .95rem;
  font-weight: 750;
  padding: 10px 12px;
}
.event-month.compact { border-radius: var(--radius-sm); }
.event-month.compact .event-day { gap: 2px; min-height: 44px; padding: 5px; }
.event-month.compact .event-day em { display: none; }
.event-month.compact .event-day strong { font-size: .75rem; }
.event-month.compact .event-day span { font-size: .62rem; min-width: 16px; padding: 3px 5px; }
.event-weekdays, .event-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.event-weekdays span {
  background: #fbfdff;
  border-bottom: 1px solid var(--line-soft);
  color: var(--slate-light);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 6px 4px;
  text-align: center;
  text-transform: uppercase;
}
.event-day {
  background: var(--white);
  border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  color: var(--slate);
  display: grid;
  gap: 3px;
  min-height: 76px;
  min-width: 0;
  padding: 7px;
}
.event-day:nth-child(7n) { border-right: 0; }
.event-day strong { color: var(--slate); font-size: .82rem; line-height: 1; }
.event-day span {
  align-self: start;
  background: var(--gold);
  border-radius: var(--radius-pill);
  color: var(--navy);
  display: inline-flex;
  font-size: .68rem;
  font-weight: 850;
  justify-content: center;
  line-height: 1;
  min-width: 19px;
  padding: 4px 6px;
  width: fit-content;
}
.event-day em {
  color: var(--navy);
  display: -webkit-box;
  font-size: .7rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.event-day.outside, .event-day.out-term { background: #f8fafc; color: #aab4c2; }
.event-day.has-events {
  box-shadow: inset 0 0 0 1px rgba(255,188,26,.55);
  transition: background .12s, box-shadow .12s;
}
.event-day.has-events:hover, .event-day.selected {
  background: var(--gold-soft);
  box-shadow: inset 0 0 0 2px var(--gold);
}
.event-compact-list {
  display: grid;
  gap: 8px;
  max-height: 760px;
  overflow: auto;
}
.event-compact-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  overflow: hidden;
}
.event-compact-item summary {
  cursor: pointer;
  display: grid;
  gap: 3px;
  list-style: none;
  padding: 10px 12px;
}
.event-compact-item summary::-webkit-details-marker { display: none; }
.event-compact-item summary span {
  color: var(--slate-light);
  font-size: .72rem;
  font-weight: 750;
  text-transform: uppercase;
}
.event-compact-item summary strong { color: var(--text); font-size: .9rem; line-height: 1.25; }
.event-compact-item summary em { color: var(--slate-light); font-size: .78rem; font-style: normal; }
.event-compact-item[open] summary { background: var(--navy-pale); border-bottom: 1px solid var(--line-soft); }
.event-compact-item > div { display: grid; gap: 8px; padding: 10px 12px 12px; }
.event-compact-item p {
  color: var(--slate);
  font-size: .82rem;
  line-height: 1.35;
  margin: 0;
}
.event-detail-panel { scroll-margin-top: 84px; }
.event-detail-header {
  align-items: start;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin: -2px -2px 14px;
  padding: 2px 2px 14px;
}
.event-detail-header > div { min-width: 0; }
.event-detail-header span { color: var(--slate-light); font-size: .78rem; font-weight: 700; }
.event-detail-header h2 {
  color: var(--navy);
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 3px 0 8px;
}
.event-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.event-detail-tags span {
  background: var(--navy-pale);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  color: var(--slate);
  font-size: .78rem;
  padding: 4px 8px;
}
.event-detail-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
.event-preview {
  background: #fbfdff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 14px;
  min-width: 0;
}
.primary-event { border-top: 3px solid var(--gold); box-shadow: var(--shadow-sm); }
.event-notice-preview {
  background: var(--white);
  border-color: var(--line);
  box-shadow: inset 0 0 0 1px rgba(0,36,82,.02);
  padding: 22px;
}
.event-preview h3 { color: var(--navy); font-size: .98rem; margin: 0 0 11px; }
.event-preview h3:not(:first-child) { margin-top: 16px; }
.event-rich-text {
  color: var(--slate);
  display: grid;
  gap: 11px;
  font-size: .94rem;
  line-height: 1.58;
  overflow-x: auto;
}
.event-rich-text p, .event-rich-text h3, .event-rich-text h4, .event-rich-text h5, .event-rich-text blockquote {
  margin: 0;
}
.event-rich-text h3, .event-rich-text h4, .event-rich-text h5 {
  color: var(--navy);
  font-weight: 800;
  line-height: 1.25;
}
.event-rich-text blockquote { border-left: 3px solid var(--gold); color: var(--slate); padding-left: 10px; }
.event-rich-text ul, .event-rich-text ol { margin: 0; padding-left: 20px; }
.event-rich-text table { border-collapse: collapse; min-width: 420px; width: 100%; }
.event-rich-text th, .event-rich-text td {
  border: 1px solid var(--line);
  font-size: .82rem;
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
}
.event-rich-text th { background: var(--navy-pale); color: var(--navy); font-weight: 800; }
.event-rich-table-wrap { overflow-x: auto; }
.event-rich-table { border-collapse: collapse; min-width: 420px; width: 100%; }
.event-rich-table th, .event-rich-table td {
  border: 1px solid var(--line);
  font-size: .82rem;
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
}
.event-rich-table th { background: var(--navy-pale); color: var(--navy); font-weight: 800; }
.event-format-help {
  align-items: center;
  background: #fbfdff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
}
.event-format-help span {
  color: var(--slate-light);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  margin-right: 4px;
  text-transform: uppercase;
}
.event-format-help code {
  background: var(--navy-pale);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: var(--slate);
  font-size: .75rem;
  padding: 3px 6px;
}
.rich-text-source { display: none !important; }
.rich-editor {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: grid;
  overflow: hidden;
  min-width: 0;
}
.rich-editor:focus-within { border-color: var(--navy-mid); box-shadow: 0 0 0 3px rgba(0, 74, 139, .12); }
.rich-editor-toolbar {
  align-items: center;
  background: #f8fbff;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 7px;
}
.rich-editor-toolbar button {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--slate);
  cursor: pointer;
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  min-height: 30px;
  padding: 4px 8px;
}
.rich-editor-toolbar button:hover { background: var(--navy-pale); border-color: #bfd0e3; color: var(--navy); }
.rich-editor-surface {
  color: var(--slate);
  font-size: .92rem;
  line-height: 1.55;
  min-height: 190px;
  overflow-x: auto;
  padding: 12px;
}
.rich-editor-surface:focus { outline: none; }
.rich-editor-surface:empty::before {
  color: var(--slate-light);
  content: "Type or paste formatted description from Word...";
}
.rich-editor-surface p, .rich-editor-surface h3, .rich-editor-surface h4, .rich-editor-surface h5 {
  margin: 0 0 9px;
}
.rich-editor-surface ul, .rich-editor-surface ol { margin: 0 0 9px; padding-left: 22px; }
.rich-editor-surface table {
  border-collapse: collapse;
  margin: 4px 0 10px;
  min-width: 420px;
  width: 100%;
}
.rich-editor-surface th, .rich-editor-surface td {
  border: 1px solid var(--line);
  min-width: 90px;
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
}
.rich-editor-surface th { background: var(--navy-pale); color: var(--navy); font-weight: 800; }
.event-form, .event-row { display: grid; gap: 10px; }
.event-form { align-items: end; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.event-row {
  background: var(--navy-pale);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 10px;
  overflow: hidden;
  padding: 14px;
}
.event-form label, .event-row label { display: grid; gap: 5px; min-width: 0; }
.event-form input, .event-form select, .event-form textarea, .event-row input, .event-row select, .event-row textarea {
  min-width: 0;
  width: 100%;
}
/* The title gets two columns. Keyed to a class rather than the third label in
   the form: the repeat controls sit above it on the create form, and counting
   positions moved the wide column onto the wrong field. */
.event-title-field { grid-column: span 2; }
.event-wide { grid-column: span 3; }
.event-attendees.event-wide { grid-column: 1 / -1; }
.event-attendees {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: grid;
  gap: 10px;
  padding: 12px;
}
.event-attendees legend {
  color: var(--slate-light);
  font-size: .72rem;
  font-weight: 600;
  padding: 0 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.event-attendee-list { display: grid; gap: 8px; }
.event-attendee-row {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(60px, .35fr) minmax(80px, auto);
  min-width: 0;
}
.event-attendee-row .tool-button {
  min-height: 36px;
  padding-left: 10px;
  padding-right: 10px;
  white-space: nowrap;
}
/* Bulk paste sits under the typed rows, inside the attendee box. */
.event-attendee-paste { display: grid; gap: 5px; }
.event-attendee-paste textarea {
  font-family: var(--font);
  font-size: .85rem;
  min-height: 78px;
  resize: vertical;
  white-space: pre;
}
.event-attendee-paste small { color: var(--slate-light); font-size: .74rem; line-height: 1.4; }
.event-row .account-actions { grid-column: 1 / -1; justify-content: flex-end; }
.event-manage-details {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fbfdff;
  overflow: hidden;
}
.event-manage-details summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  list-style: none;
  padding: 13px 14px;
}
.event-manage-details summary::-webkit-details-marker { display: none; }
.event-manage-details summary > span:first-child { display: grid; gap: 2px; }
.event-manage-details summary strong { color: var(--navy); font-size: .95rem; }
.event-manage-details summary small { color: var(--slate-light); font-size: .82rem; }
.event-manage-details[open] summary { border-bottom: 1px solid var(--line-soft); }
.event-manage-details .event-row { border: 0; border-radius: 0; margin-top: 0; }
.event-browser {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(230px, .68fr) minmax(0, 1.6fr);
}
.event-picker {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: grid;
  max-height: 700px;
  overflow: auto;
}
.event-list-item {
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  gap: 3px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .12s;
}
.event-list-item:last-child { border-bottom: 0; }
.event-list-item:hover { background: var(--navy-pale); }
.event-list-item.active { background: #e8f0f9; border-left: 3px solid var(--navy); }
.event-list-item span {
  color: var(--slate-light);
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.event-list-item strong { color: var(--text); font-size: .9rem; line-height: 1.2; }
.event-list-item small { color: var(--slate-light); font-size: .8rem; line-height: 1.25; }
.event-editor { margin-top: 0; }
.event-editor-heading {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  grid-column: 1 / -1;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 4px;
}
.event-editor-heading span:not(.status) { color: var(--slate-light); font-size: .78rem; font-weight: 500; }
.event-editor-heading h3 {
  color: var(--navy);
  font-size: 1rem;
  font-weight: 600;
  margin-top: 2px;
}
/* Horizontal scroll affordance: edge shadows appear only when a wide table
   can still be scrolled, so hidden columns are discoverable on tablets/phones. */
.roll-table-wrap, .absent-table-wrap, .notice-table-wrap, .activity-table-wrap {
  background:
    linear-gradient(to right, var(--white) 24%, rgba(255, 255, 255, 0)) 0 0 / 34px 100% no-repeat local,
    linear-gradient(to left, var(--white) 24%, rgba(255, 255, 255, 0)) 100% 0 / 34px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, .22), rgba(15, 23, 42, 0)) 0 0 / 15px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, .22), rgba(15, 23, 42, 0)) 100% 0 / 15px 100% no-repeat scroll;
}
/* ── Roll / Saved rolls ───────────────────────────────────── */
.roll-table-wrap { overflow-x: auto; margin-top: 14px; }
.roll-table { border-collapse: collapse; min-width: 880px; width: 100%; }
.roll-table th, .roll-table td {
  border-bottom: 1px solid var(--line-soft);
  padding: 9px 10px;
  text-align: left;
  vertical-align: middle;
  font-size: .88rem;
}
.roll-table th {
  color: var(--slate-light);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.roll-table td:nth-child(3), .roll-table td:nth-child(4), .roll-table td:nth-child(5), .roll-table td:nth-child(6) {
  width: 90px;
}
.roll-table input[type="number"] { max-width: 76px; }
.roll-table input[type="text"] { min-width: 200px; }
/* ── Students ─────────────────────────────────────────────── */
.year-group { border-top: 1px solid var(--line-soft); padding-top: 16px; margin-top: 16px; }
.year-group.drop-target {
  background: var(--navy-pale);
  border: 1px dashed #c8d6e5;
  border-radius: var(--radius-md);
  padding: 16px;
}
.year-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.year-heading h3 { color: var(--navy); font-size: 1rem; font-weight: 600; }
.year-heading span { color: var(--slate-light); font-size: .83rem; }
/* Fixed layout so the three name columns share the width evenly instead of
   the action column taking what it likes. Names sit on one line and are cut
   with an ellipsis when they run long - the full value is on the cell's
   title, and the row is one click from the edit form. */
.student-table { min-width: 620px; table-layout: fixed; }
.student-table .col-select { width: 48px; }
.student-table .col-actions { width: 184px; }
.student-table th, .student-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.student-table td:has(.table-actions) { overflow: visible; }
.student-table .empty-row { text-overflow: clip; white-space: normal; }
.bulk-status {
  background: var(--navy-pale);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  color: var(--slate);
  font-size: .88rem;
  margin-bottom: 10px;
  padding: 9px 12px;
}
.row-check { min-height: auto; }
.selected-row { background: var(--navy-pale); }
.empty-row { color: var(--slate-light); font-style: italic; font-size: .88rem; }
.table-link { color: var(--navy-mid); font-weight: 500; font-size: .88rem; }
.table-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  white-space: nowrap;
}
.table-link, .table-danger { white-space: nowrap; }
.table-actions form { display: inline; }
.table-danger {
  background: transparent;
  border: 0;
  color: #dc2626;
  cursor: pointer;
  font: inherit;
  font-size: .85rem;
  padding: 0;
}
.table-danger:hover { color: #991b1b; }
/* ── Student form ─────────────────────────────────────────── */
.form-panel { max-width: 700px; margin: 0 auto; }
.student-form { display: grid; gap: 14px; }
.edit-toolbar {
  align-items: center;
  background: var(--navy-pale);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 12px 16px;
}
.edit-toolbar strong { color: var(--slate); font-size: .88rem; font-weight: 500; }
.edit-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.danger-zone {
  align-items: center;
  border-top: 1px solid var(--line-soft);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 20px;
}
.danger-zone h2 {
  color: #991b1b;
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: 3px;
}
.danger-zone p { color: var(--slate-light); font-size: .87rem; margin: 0; }
/* ── Accounts ─────────────────────────────────────────────── */
.account-panel { margin-bottom: 14px; }
.account-form, .account-row { align-items: end; display: grid; gap: 10px; }
.account-create {
  grid-template-columns: minmax(130px, 1fr) minmax(110px, .6fr) minmax(140px, 1fr) minmax(170px, 1fr) auto auto;
}
.account-list { display: grid; gap: 8px; }
.account-directory-heading { align-items: end; margin-bottom: 12px; }
.account-directory-heading .eyebrow { margin-bottom: 3px; }
.account-directory-filter {
  align-items: end;
  background: #f7fbff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 1.4fr) minmax(145px, .65fr) minmax(180px, .75fr) auto auto;
  margin-bottom: 10px;
  padding: 12px;
}
.account-directory-filter label { display: grid; gap: 4px; min-width: 0; }
.account-directory-filter label > span {
  color: var(--slate-light);
  font-size: .7rem;
  font-weight: 750;
}
.account-directory-filter input, .account-directory-filter select { width: 100%; }
.account-results-bar {
  align-items: center;
  color: var(--slate-light);
  display: flex;
  font-size: .76rem;
  font-weight: 650;
  justify-content: space-between;
  min-height: 28px;
  padding: 0 2px 6px;
}
.account-item {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.account-item[open] { border-color: #a9c3dd; box-shadow: 0 8px 22px rgba(18, 58, 91, .08); }
.account-summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-areas: "avatar name role link statuses edit";
  grid-template-columns: 38px minmax(150px, 1.15fr) minmax(100px, .65fr) minmax(150px, 1fr) auto 68px;
  list-style: none;
  min-height: 62px;
  padding: 10px 13px;
}
.account-summary::-webkit-details-marker { display: none; }
.account-summary:hover { background: #f7fbff; }
.account-item[open] .account-summary { background: var(--navy-pale); border-bottom: 1px solid var(--line-soft); }
.account-avatar {
  align-items: center;
  background: linear-gradient(145deg, var(--navy), var(--navy-mid));
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: .82rem;
  font-weight: 800;
  grid-area: avatar;
  height: 36px;
  justify-content: center;
  width: 36px;
}
.account-summary-name { display: grid; gap: 2px; grid-area: name; min-width: 0; }
.account-summary-name strong { color: var(--text); font-size: .88rem; overflow-wrap: anywhere; }
.account-summary-name small { color: var(--slate-light); font-size: .72rem; overflow-wrap: anywhere; }
.account-summary-role {
  color: var(--navy);
  font-size: .76rem;
  font-weight: 750;
  grid-area: role;
}
.account-summary-link { color: var(--slate); font-size: .76rem; grid-area: link; overflow-wrap: anywhere; }
.account-summary-statuses { display: flex; flex-wrap: wrap; gap: 5px; grid-area: statuses; justify-content: flex-end; }
.account-status-badge {
  background: var(--line-soft);
  border-radius: 999px;
  color: var(--slate);
  font-size: .65rem;
  font-weight: 800;
  padding: 4px 7px;
  white-space: nowrap;
}
.account-status-badge.active { background: #dcfce7; color: #15803d; }
.account-status-badge.inactive { background: #fee2e2; color: #b91c1c; }
.account-status-badge.warning { background: var(--gold-soft); color: #825700; }
.account-edit-label {
  color: var(--navy-mid);
  font-size: .75rem;
  font-weight: 800;
  grid-area: edit;
  text-align: right;
  white-space: nowrap;
}
.account-edit-label span { display: inline-block; margin-left: 2px; transition: transform .16s ease; }
.account-item[open] .account-edit-label span { transform: rotate(180deg); }
.account-row {
  background: #fbfdff;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 14px;
}
.account-row .account-teacher-field { grid-column: span 2; }
.account-row .account-teacher-field small { display: block; margin-top: 4px; }
.account-row .account-actions { align-self: end; justify-content: flex-end; }
.account-name {
  align-self: center;
  display: grid;
  gap: 3px;
  min-width: 0;
}
.account-name strong { color: var(--text); font-size: .9rem; overflow-wrap: anywhere; }
.account-teacher-match { color: var(--navy-mid); font-size: .72rem; font-weight: 700; }
.account-teacher-match.unmatched { color: var(--slate-light); }
.account-check { align-items: center; display: flex !important; gap: 8px !important; min-height: 36px; }
.account-check input { accent-color: var(--navy); min-height: auto; }
.account-actions { display: flex; gap: 8px; }
.account-empty-state {
  align-items: center;
  background: #f7fbff;
  border: 1px dashed #b8cce0;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 30px 18px;
  text-align: center;
}
.account-empty-state strong { color: var(--navy); }
.account-empty-state p { color: var(--slate-light); font-size: .84rem; margin: 0; }
.account-pagination {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}
.account-pagination .disabled { cursor: default; opacity: .42; pointer-events: none; }
.account-page-links { display: flex; gap: 4px; }
.account-page-links a {
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  color: var(--navy);
  display: flex;
  font-size: .78rem;
  font-weight: 750;
  height: 34px;
  justify-content: center;
  min-width: 34px;
}
.account-page-links a:hover { background: var(--navy-pale); border-color: var(--navy-mid); }
.account-page-links a.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.account-types-heading { align-items: center; }
.account-type-add { position: relative; }
.account-type-add > summary { cursor: pointer; list-style: none; }
.account-type-add > summary::-webkit-details-marker { display: none; }
.account-type-add[open] > summary { background: var(--navy); color: #fff; }
.role-create-form {
  align-items: end;
  background: #fff;
  border: 1px solid #cddaea;
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(120px, .7fr) minmax(150px, 1fr) auto;
  padding: 12px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: min(500px, calc(100vw - 36px));
  z-index: 6;
}
.account-type-toolbar {
  align-items: end;
  background: #f7fbff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
  padding: 10px;
}
.account-type-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.account-type-chips a {
  background: #fff;
  border: 1px solid #cddaea;
  border-radius: 6px;
  color: var(--navy);
  padding: 7px 9px;
}
.account-type-chips a:hover { border-color: var(--navy-mid); }
.account-type-chips a.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.account-type-chips span { align-items: center; display: flex; gap: 7px; }
.account-type-chips strong { font-size: .78rem; }
.account-type-chips small {
  background: var(--navy-pale);
  border-radius: 999px;
  color: var(--navy);
  font-size: .64rem;
  font-weight: 800;
  min-width: 20px;
  padding: 2px 5px;
  text-align: center;
}
.account-type-chips a.active small { background: rgba(255,255,255,.18); color: #fff; }
.account-type-editor {
  align-items: end;
  background: #fff;
  border: 1px solid #cddaea;
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  display: grid;
  gap: 7px;
  grid-template-columns: minmax(120px, 1fr) auto auto;
  padding: 10px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: min(470px, calc(100vw - 36px));
  z-index: 6;
}
.account-type-manage { justify-self: end; position: relative; }
.account-type-manage > summary { cursor: pointer; list-style: none; white-space: nowrap; }
.account-type-manage > summary::-webkit-details-marker { display: none; }
.account-type-manage[open] > summary { background: var(--navy); color: #fff; }
.permission-workspace { min-width: 0; }
.permission-role-menu { min-width: 210px; position: relative; z-index: 5; }
.permission-role-menu summary {
  align-items: center;
  background: #fff;
  border: 1px solid #cddaea;
  border-radius: 6px;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  list-style: none;
  min-height: 42px;
  padding: 7px 10px;
}
.permission-role-menu summary::-webkit-details-marker { display: none; }
.permission-role-menu summary > span:first-child { display: grid; gap: 1px; }
.permission-role-menu summary small {
  color: var(--slate-light);
  font-size: .64rem;
  font-weight: 750;
  text-transform: uppercase;
}
.permission-role-menu summary strong { font-size: .86rem; }
.permission-role-menu[open] summary {
  border-color: var(--navy-mid);
  box-shadow: 0 0 0 2px rgba(0, 74, 139, .1);
}
.permission-role-menu nav {
  background: #fff;
  border: 1px solid #cddaea;
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  display: grid;
  gap: 3px;
  margin-top: 5px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: 100%;
  width: min(300px, calc(100vw - 36px));
}
.permission-role-menu a {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 5px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 9px;
}
.permission-role-menu a:hover { background: var(--navy-pale); border-color: var(--line-soft); }
.permission-role-menu a.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.permission-role-menu a span { display: grid; gap: 2px; min-width: 0; }
.permission-role-menu a strong { font-size: .84rem; overflow-wrap: anywhere; }
.permission-role-menu a small, .permission-role-menu a em {
  color: var(--slate-light);
  font-size: .7rem;
  font-style: normal;
}
.permission-role-menu a.active small, .permission-role-menu a.active em { color: rgba(255,255,255,.74); }
.permission-role-menu a em { white-space: nowrap; }
.permission-role-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  min-width: 0;
  overflow: hidden;
}
.permission-role-heading {
  align-items: center;
  background: #f7fbff;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  padding: 13px 14px;
}
.permission-role-heading > div { display: grid; gap: 2px; }
.permission-role-heading strong { color: var(--navy); }
.permission-role-heading span { color: var(--slate-light); font-size: .78rem; }
.permission-grid { display: grid; min-width: 0; overflow: hidden; }
.permission-grid-head, .permission-grid-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(170px, 1fr) 72px 72px;
  padding: 9px 14px;
}
.permission-grid-head {
  background: #fbfdff;
  color: var(--slate-light);
  font-size: .7rem;
  text-transform: uppercase;
}
.permission-grid-row { border-top: 1px solid var(--line-soft); }
.permission-grid-row > span { color: var(--text); font-size: .88rem; font-weight: 700; }
.permission-check {
  align-items: center;
  display: flex !important;
  gap: 6px !important;
  min-height: 28px;
}
.permission-check input { accent-color: var(--navy); min-height: auto; }
.permission-check span { font-size: .75rem; }
.permission-na { color: var(--slate-light); font-size: .7rem; min-width: 0; }
.permission-na b { display: none; }
.permission-fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}
.activity-heading { align-items: center; }
.activity-filter-bar {
  align-items: end;
  background: #f7fbff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
}
.activity-filter-bar form { align-items: end; display: flex; gap: 8px; }
.activity-filter-bar label { display: grid; gap: 4px; }
.activity-filter-bar label span { color: var(--slate-light); font-size: .7rem; font-weight: 750; }
.activity-filter-bar input { min-height: 36px; min-width: 170px; }
/* ── Activity log ─────────────────────────────────────────── */
.activity-table-wrap { overflow-x: auto; }
.activity-table { border-collapse: collapse; min-width: 800px; width: 100%; }
.activity-table th, .activity-table td {
  border-bottom: 1px solid var(--line-soft);
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
  font-size: .88rem;
}
.activity-table th {
  color: var(--slate-light);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.activity-table td { color: #334155; }
.activity-table td:last-child { max-width: 320px; word-break: break-word; }
/* ── Misc ─────────────────────────────────────────────────── */
code {
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: #334155;
  font-size: .85em;
  padding: 1px 5px;
}
.timetable-options { margin-bottom: 20px; }
/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 760px) {
  .topbar { height: auto; padding: 12px 16px; flex-wrap: wrap; }
  .topbar nav { flex-wrap: wrap; gap: 2px; }
  .hero, .dashboard-hero, .detail-header, .dashboard-overview {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
  }
  .dashboard-summary, .dashboard-grid, .dashboard-workspace, .dashboard-notice-strip, .dashboard-focus-grid, .student-management-summary, .student-management-grid, .dashboard-attendance-card, .compact-list {
    grid-template-columns: 1fr;
  }
  .dashboard-today-grid { grid-template-columns: 1fr; }
  .dashboard-attendance-chart { min-height: 170px; }
  .dashboard-attendance-card-expanded, .dashboard-period-controls, .dashboard-watchlist-grid {
    grid-template-columns: 1fr;
  }
  .attendance-bar-track { height: 108px; width: min(38px, 100%); }
  .dashboard-panel { min-height: 0; }
  .status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-grid { grid-template-columns: 1fr; }
  .panel.wide { grid-column: auto; }
  .mini-stats, .hub-stats { grid-template-columns: repeat(2, 1fr); }
  .panel-heading, .hub-panel-head { flex-direction: column; }
  .danger-zone, .edit-toolbar { align-items: stretch; flex-direction: column; }
  .attendance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-roll-grid, .absent-list { grid-template-columns: 1fr; }
  .account-create, .account-row { grid-template-columns: 1fr; }
  .account-actions { flex-wrap: wrap; }
  .account-type-add { width: 100%; }
  .account-type-add > summary { text-align: center; width: 100%; }
  .role-create-form {
    grid-template-columns: 1fr;
    left: 0;
    right: auto;
    width: 100%;
  }
  .account-type-toolbar { grid-template-columns: 1fr; }
  .account-type-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .account-type-chips a { flex: 0 0 auto; }
  .account-type-manage { justify-self: stretch; width: 100%; }
  .account-type-manage > summary { text-align: center; width: 100%; }
  .account-type-editor {
    grid-template-columns: 1fr;
    left: 0;
    right: auto;
    width: 100%;
  }
  .permission-role-menu { min-width: 0; width: 100%; }
  .permission-role-menu nav { left: 0; right: auto; width: 100%; }
  .permission-grid-head, .permission-grid-row {
    gap: 4px;
    grid-template-columns: minmax(0, 1fr) 44px 44px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .permission-grid-row > span { font-size: .78rem; overflow-wrap: anywhere; }
  .permission-check { justify-content: center; }
  .permission-check span { display: none; }
  .permission-na { text-align: center; }
  .permission-na span { display: none; }
  .permission-na b { display: inline; font-weight: 700; }
  .activity-filter-bar, .activity-filter-bar form { align-items: stretch; flex-direction: column; }
  .activity-filter-bar input { width: 100%; }
  .event-layout, .event-workbench, .event-detail-grid { grid-template-columns: 1fr; }
  .event-sidebar { position: static; }
  .event-calendar-head { align-items: stretch; flex-direction: column; }
  .calendar-control-stack { align-items: stretch; justify-items: stretch; }
  .calendar-view-tabs {
    border-radius: 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .calendar-view-tabs a { text-align: center; }
  .calendar-nav-buttons { justify-content: stretch; }
  .calendar-nav-buttons .module-action { flex: 1 1 0; justify-content: center; }
  .term-calendar-panel { margin-left: -2px; margin-right: -2px; }
  .event-detail-header { align-items: stretch; flex-direction: column; }
  .event-day { min-height: 64px; padding: 5px; }
  .event-day em { display: none; }
  .event-form, .event-row { grid-template-columns: 1fr; }
  .event-browser { grid-template-columns: 1fr; }
  .event-picker { max-height: 340px; }
  .event-form label:nth-of-type(3), .event-row label:nth-of-type(3), .event-wide { grid-column: auto; }
  .event-attendee-row { grid-template-columns: 1fr; }
  .notice-header, .notice-section-heading { align-items: stretch; flex-direction: column; gap: 10px; }
  .notice-actions { align-items: center; flex-wrap: wrap; justify-content: flex-start; }
  .notice-date-form { flex: 1 1 100%; }
  .notice-header input[type="date"] { flex: 1 1 auto; width: auto; min-width: 0; }
  .notice-section, .notice-quote { margin-left: 14px; margin-right: 14px; }
  .student-absence-table { min-width: 0; width: 100%; }
  .student-absence-table th, .student-absence-table td { padding-left: 7px; padding-right: 7px; }
  .notice-list-table.student-absence-table th:first-child, .notice-list-table.student-absence-table td:first-child {
    width: auto;
  }
  .notice-list-table.student-absence-table th:nth-child(2), .notice-list-table.student-absence-table td:nth-child(2) {
    width: 58px;
  }
  .student-absence-table .notice-year-cell { font-size: .78rem; white-space: normal; }
  .student-absence-table .notice-inline-list { gap: 4px; }
  .student-absence-table .notice-inline-list.compact span {
    border-radius: var(--radius-sm);
    font-size: .76rem;
    line-height: 1.18;
    max-width: 100%;
    padding: 4px 6px;
    white-space: normal;
    word-break: normal;
  }
  .notice-event-card { grid-template-columns: 1fr; }
  .notice-event-date {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    grid-template-columns: auto auto auto;
    justify-content: start;
    justify-items: start;
    padding: 9px 12px;
  }
  .notice-event-title-row { align-items: flex-start; flex-direction: column; gap: 7px; }
  .notice-attendee-group { grid-template-columns: 1fr; gap: 3px; }
}
@media (max-width: 520px) {
  .dashboard-summary { gap: 10px; }
}
/* ── Additions kept from previous stylesheet ──────────────── */
.roll-form .panel { margin-top: 0; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--navy-mid);
  outline-offset: 1px;
}
.late-toggle {
  align-items: center;
  color: #92400e;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 600;
  gap: 4px;
  margin-left: auto;
  text-transform: uppercase;
}
.late-toggle input[type="checkbox"] {
  accent-color: #8a5a00;
  height: 15px;
  min-height: auto;
  width: 15px;
}
.error-page {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin: 48px auto;
  max-width: 520px;
  padding: 44px 36px;
  text-align: center;
}
.error-page .error-code {
  color: #9ec5fe;
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
}
.error-page h1 { color: var(--navy); font-size: 1.5rem; margin: 10px 0 8px; }
.error-page .error-message { color: var(--slate); line-height: 1.5; margin-bottom: 22px; }
.error-page .hub-actions { display: flex; gap: 10px; justify-content: center; }
/* ── Word game (admin-only) ───────────────────────────────── */
.word-game-shell { display: grid; gap: 16px; }
.word-game-hero {
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding: 24px 28px;
}
.word-game-score {
  background: var(--navy-pale);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  min-width: 96px;
  padding: 12px;
  text-align: center;
}
.word-game-score span {
  color: var(--slate-light);
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.word-game-score strong {
  color: var(--navy);
  display: block;
  font-size: 1.8rem;
  line-height: 1.1;
}
.word-board, .word-admin-panel { display: grid; gap: 16px; }
.word-board h2 { color: var(--navy); font-size: 1.2rem; }
.answer-slots, .letter-rack {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.answer-slot, .letter-tile {
  align-items: center;
  border-radius: var(--radius-md);
  display: inline-flex;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 600;
  height: 52px;
  justify-content: center;
  width: 52px;
}
.answer-slot { background: var(--navy-pale); border: 2px solid #c5d4e8; color: var(--navy); }
.letter-tile {
  background: #f6d78c;
  border: 1px solid #d2a74c;
  box-shadow: 0 3px 0 #a77c2f;
  color: #3b2a13;
  cursor: pointer;
}
.letter-tile:disabled {
  background: var(--line-soft);
  border-color: var(--line);
  box-shadow: none;
  color: #94a3b8;
  cursor: default;
}
.game-status {
  color: var(--slate);
  font-weight: 600;
  min-height: 24px;
  text-align: center;
}
.game-status.correct { color: #166534; }
.game-status.incorrect { color: #b91c1c; }
.word-game-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.word-admin-form { display: grid; gap: 12px; }
.game-shell { display: grid; gap: 18px; }
.game-frame {
  background: #edf2f7;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-height: min(980px, calc(100vh - 190px));
  width: 100%;
}
.study-assistant-frame {
  background: #f7f9f8;
  border: 0;
  min-height: min(1000px, calc(100vh - 205px));
  width: 100%;
}
@media (max-width: 760px) {
  .word-game-hero { align-items: stretch; flex-direction: column; }
  .answer-slot, .letter-tile { height: 44px; width: 44px; }
}
/* ── Roster search ────────────────────────────────────────── */
.roster-search {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.roster-search input { max-width: 320px; }
.roster-search-count { color: var(--slate-light); font-size: .82rem; font-weight: 600; }
.form-section-heading {
  border-top: 1px solid var(--line);
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 6px;
  padding-top: 16px;
}
/* ── Sign-in / sign-out ───────────────────────────────────── */
.signinout-form {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}
.signinout-form .form-actions { grid-column: 1 / -1; }
.movement-tag {
  border-radius: var(--radius-pill);
  display: inline-block;
  font-size: .76rem;
  font-weight: 600;
  padding: 3px 9px;
  white-space: nowrap;
}
.movement-tag.out { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.movement-tag.in { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
@media (max-width: 760px) {
  .signinout-form { grid-template-columns: 1fr; }
}
.report-range {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.report-range label { gap: 5px; }
.report-range input[type="date"] { width: 160px; }
/* ── Modern visual refresh ──────────────────────────────────
   Shared surface polish applied last so every tab benefits
   without rewriting each feature template. */
body {
  background:
    radial-gradient(circle at top left, rgba(21, 81, 137, .13), transparent 34rem),
    radial-gradient(circle at top right, rgba(246, 189, 43, .15), transparent 30rem),
    linear-gradient(180deg, #f8fbff 0%, var(--bg) 44%, #eef4fb 100%);
  color: var(--text);
}
body::before {
  background:
    linear-gradient(90deg, rgba(8, 36, 74, .045) 1px, transparent 1px),
    linear-gradient(rgba(8, 36, 74, .04) 1px, transparent 1px);
  background-size: 42px 42px;
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}
.brand img {
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .2));
}
.brand strong {
  font-weight: 800;
  letter-spacing: -.03em;
}
.brand small {
  color: rgba(255, 255, 255, .68);
}
.topbar nav a, .topbar nav .nav-menu > summary {
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  font-weight: 700;
  padding: 7px 12px;
}
.topbar nav a:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.12);
  color: #fff;
}
.topbar nav a.active {
  background: linear-gradient(135deg, var(--gold), #ffd76c);
  box-shadow: 0 8px 18px rgba(246, 189, 43, .26);
  color: var(--navy);
}
.logout-form button, .management-edit-icon { border-radius: 999px; }
.panel, .hub-panel, .module-card, .login-card, .notice-page, .attendance-workspace, .system-notes, .hero, .dashboard-hero, .detail-header, .dashboard-overview, .dashboard-panel, .dashboard-attendance-card, .event-panel, .account-panel, .form-panel, .word-admin-panel, .game-frame {
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(211, 224, 239, .92);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}
.panel, .hub-panel, .dashboard-panel, .account-panel, .event-panel, .attendance-workspace {
  border-radius: var(--radius-xl);
}
.hero::after, .dashboard-hero::after, .detail-header::after, .dashboard-overview::after {
  background: linear-gradient(180deg, rgba(246,189,43,.9), rgba(21,81,137,.9));
  border-radius: 999px;
  content: "";
  inset: 18px auto 18px 0;
  position: absolute;
  width: 5px;
}
.hero h1, .dashboard-hero h1, .detail-header h1, .dashboard-overview h1 {
  color: var(--navy);
  font-size: clamp(1.65rem, 2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -.045em;
}
.intro {
  max-width: 640px;
  line-height: 1.5;
  font-size: .93rem;
  color: #56667c;
}
.panel-heading, .hub-panel-head, .event-calendar-head, .dashboard-section-head, .notice-section-heading {
  border-color: rgba(223, 231, 241, .9);
}
.primary-link,
.module-action,
.tool-button,
.danger-button {
  border-radius: 999px;
  box-shadow: 0 7px 16px rgba(8, 36, 74, .07);
  font-weight: 800;
  letter-spacing: -.01em;
  min-height: 38px;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
.primary-link,
.module-action {
  background: linear-gradient(135deg, var(--gold), #ffd66b);
  border-color: rgba(224, 157, 0, .34);
  color: var(--navy);
}
.primary-link:hover,
.module-action:hover {
  background: linear-gradient(135deg, #edaa11, #ffd05a);
  box-shadow: 0 12px 22px rgba(246, 189, 43, .24);
  transform: translateY(-1px);
}
.module-action.subtle,
.tool-button,
.secondary-link {
  background: rgba(255, 255, 255, .9);
  border-color: #d5e0ec;
  color: var(--navy);
}
.module-action.danger {
  box-shadow: none;
}
input,
select,
textarea {
  background: rgba(255,255,255,.96);
  border-color: #d5e0ec;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  min-height: 40px;
}
input:hover, select:hover, textarea:hover { border-color: #bfd0e4; }
input:focus,
select:focus,
textarea:focus {
  border-color: var(--navy-mid);
  box-shadow: 0 0 0 4px rgba(21,81,137,.13);
}
.status-strip article, .status-strip div, .dashboard-summary article, .dashboard-focus-stat, .dashboard-attendance-kpis article, .dashboard-watchlist, .dashboard-watchlist-grid a, .dashboard-workflow-list a, .year-group, .student-roll-card, .account-row, .event-create-details, .event-month, .term-day-cell, .term-week-cell, .day-calendar-card, .notice-event-card {
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15, 35, 64, .06);
}
.notice-table, .student-info-table, .absent-table { border-collapse: separate; border-spacing: 0; }
.notice-table th, .student-info-table th, .absent-table th {
  background: linear-gradient(180deg, var(--navy), #123d72);
  color: #fff;
  font-weight: 800;
}
.notice-table td,
.student-info-table td,
.absent-table td {
  background: rgba(255,255,255,.9);
}
.notice-table tbody tr:hover td, .student-info-table tbody tr:hover td, .absent-table tbody tr:hover td {
  background: #f8fbff;
}
.dashboard-overview-refined, .dashboard-attendance-card { border-color: rgba(196, 214, 234, .9); }
.login-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(248,251,255,.94)),
    radial-gradient(circle at top right, rgba(246,189,43,.18), transparent 18rem);
}
.login-brand h1 {
  font-weight: 800;
}
@media (max-width: 760px) {
  .page { max-width: 100%; padding: 22px 14px 44px; }
  .topbar { border-radius: 0 0 20px 20px; }
  .hero, .dashboard-hero, .detail-header, .dashboard-overview { border-radius: 22px; }
}
/* ── Refined polish layer ─────────────────────────────────── */
::selection {
  background: rgba(246, 189, 43, .32);
  color: var(--navy);
}
a, button, summary, input, select, textarea { -webkit-tap-highlight-color: transparent; }
.brand::before {
  background: radial-gradient(circle, rgba(246,189,43,.32), transparent 68%);
  border-radius: 50%;
  content: "";
  filter: blur(2px);
  height: 44px;
  left: -8px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  z-index: -1;
}
.topbar nav {
  scrollbar-width: thin;
}
.topbar nav a {
  position: relative;
}
.hero::before,
.dashboard-hero::before,
.detail-header::before,
.dashboard-overview::before {
  background:
    radial-gradient(circle, rgba(246,189,43,.28), transparent 64%),
    radial-gradient(circle at 25% 75%, rgba(21,81,137,.16), transparent 58%);
  border-radius: 50%;
  content: "";
  height: 180px;
  pointer-events: none;
  position: absolute;
  right: -56px;
  top: -74px;
  width: 180px;
}
.panel, .dashboard-panel, .event-panel, .account-panel, .attendance-workspace, .notice-page {
  box-shadow:
    0 16px 42px rgba(15, 35, 64, .08),
    inset 0 1px 0 rgba(255,255,255,.78);
}
.panel-heading h2, .dashboard-section-head h2, .notice-section-heading h2, .event-detail-header h2 {
  letter-spacing: -.025em;
}
.panel-heading h2::before, .dashboard-section-head h2::before, .notice-section-heading h2::before {
  background: linear-gradient(180deg, var(--gold), var(--navy-mid));
  border-radius: 999px;
  content: "";
  display: inline-block;
  height: .82em;
  margin-right: 8px;
  transform: translateY(1px);
  width: 4px;
}
.status-strip article, .status-strip div, .dashboard-focus-stat, .dashboard-attendance-kpis article {
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,251,255,.94)),
    radial-gradient(circle at 100% 0%, rgba(246,189,43,.16), transparent 8rem);
  position: relative;
}
.status-strip article::after,
.status-strip div::after,
.dashboard-focus-stat::after,
.dashboard-attendance-kpis article::after {
  background: linear-gradient(90deg, rgba(246,189,43,.78), rgba(21,81,137,.54));
  border-radius: 999px;
  content: "";
  height: 3px;
  left: 14px;
  position: absolute;
  right: 14px;
  top: 0;
}
.module-card, .dashboard-workflow-list a, .dashboard-watchlist-grid a, .term-event-pill, .day-event-card, .notice-event-card, .student-roll-card, .account-row {
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.module-card:hover, .dashboard-workflow-list a:hover, .dashboard-watchlist-grid a:hover, .term-event-pill:hover, .day-event-card:hover, .notice-event-card:hover, .student-roll-card:hover, .account-row:hover {
  border-color: #bed0e4;
  box-shadow: 0 18px 40px rgba(15, 35, 64, .12);
  transform: translateY(-2px);
}
.module-action, .primary-link, .tool-button { position: relative; }
.module-action::before, .primary-link::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  content: "";
  inset: 0;
  opacity: 0;
  position: absolute;
  transform: translateX(-55%);
  transition: transform .3s ease, opacity .3s ease;
}
.module-action:hover::before, .primary-link:hover::before { opacity: 1; transform: translateX(55%); }
input,
select,
textarea {
  color: #12233d;
}
label > span, .account-form label span, .account-row label span, .student-form label span, .attendance-toolbar span, .event-form label span, .event-row label span {
  color: #65758a;
  font-weight: 800;
}
.notice-table th:first-child, .student-info-table th:first-child, .absent-table th:first-child {
  border-top-left-radius: 12px;
}
.notice-table th:last-child, .student-info-table th:last-child, .absent-table th:last-child {
  border-top-right-radius: 12px;
}
.notice-table td,
.student-info-table td,
.absent-table td {
  border-color: rgba(223,231,241,.85);
}
.calendar-view-tabs, .account-type-chips, .notice-inline-list.compact, .event-detail-tags {
  background: rgba(244,248,255,.78);
  border-radius: 999px;
}
.calendar-view-tabs {
  background: var(--navy-pale);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: flex;
  gap: 3px;
  padding: 4px;
  box-shadow: inset 0 1px 3px rgba(15,35,64,.08);
}
.term-calendar-weekhead, .term-calendar-dayhead {
  border-right: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .05em;
  padding: 9px 8px;
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--navy), #143f75);
}
.term-day-cell {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line-soft);
  display: grid;
  gap: 7px;
  min-height: 112px;
  min-width: 0;
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,252,255,.96));
}
.student-roll-card.present {
  border-color: #86efac;
  background:
    linear-gradient(145deg, rgba(240,253,244,.98), rgba(255,255,255,.95));
}
.student-roll-card.late {
  border-color: var(--gold);
  background:
    linear-gradient(145deg, rgba(255,247,237,.98), rgba(255,255,255,.95));
}
.login-shell {
  display: grid;
  min-height: calc(100vh - 120px);
  place-items: center;
  position: relative;
}
.login-shell::before {
  background:
    radial-gradient(circle, rgba(246,189,43,.22), transparent 62%),
    radial-gradient(circle at 70% 30%, rgba(21,81,137,.18), transparent 58%);
  border-radius: 42px;
  content: "";
  height: min(420px, 62vw);
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  width: min(560px, 82vw);
  z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
/* ── SPIC colour refinement ─────────────────────────────────
   Palette shifted toward the school colours: royal blue, cool
   grey, light blue, and restrained warm accents. */
body {
  background:
    radial-gradient(circle at top left, rgba(40, 103, 173, .13), transparent 34rem),
    radial-gradient(circle at top right, rgba(125, 185, 232, .17), transparent 30rem),
    linear-gradient(180deg, #fbfdff 0%, var(--bg) 48%, #eef5fb 100%);
}
body::before {
  background:
    linear-gradient(90deg, rgba(22, 63, 115, .035) 1px, transparent 1px),
    linear-gradient(rgba(22, 63, 115, .03) 1px, transparent 1px);
  background-size: 44px 44px;
}
.brand::before {
  background: radial-gradient(circle, rgba(125,185,232,.38), transparent 68%);
}
.topbar nav a.active {
  background: linear-gradient(135deg, #dbeaf8, #ffffff);
  box-shadow: 0 8px 18px rgba(125, 185, 232, .24);
  color: var(--spic-deep);
}
.hero::after,
.dashboard-hero::after,
.detail-header::after,
.dashboard-overview::after,
.panel-heading h2::before,
.dashboard-section-head h2::before,
.notice-section-heading h2::before {
  background: linear-gradient(180deg, var(--spic-sky), var(--spic-royal));
}
.hero::before,
.dashboard-hero::before,
.detail-header::before,
.dashboard-overview::before {
  background:
    radial-gradient(circle, rgba(125,185,232,.28), transparent 64%),
    radial-gradient(circle at 25% 75%, rgba(22,63,115,.15), transparent 58%);
}
.primary-link,
.module-action {
  background: linear-gradient(135deg, var(--spic-royal), #3c82c6);
  border-color: rgba(40, 103, 173, .38);
  color: #fff;
}
.primary-link:hover,
.module-action:hover {
  background: linear-gradient(135deg, var(--spic-deep), var(--spic-royal));
  box-shadow: 0 12px 22px rgba(40, 103, 173, .22);
}
.module-action.subtle,
.tool-button,
.secondary-link {
  background: rgba(255,255,255,.92);
  border-color: #cbddea;
  color: var(--spic-deep);
}
.module-action.subtle:hover, .tool-button:hover, .secondary-link:hover {
  background: var(--spic-ice);
  border-color: #afcce2;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--spic-royal);
  box-shadow: 0 0 0 4px rgba(40,103,173,.13);
}
.status-strip article::after,
.status-strip div::after,
.dashboard-focus-stat::after,
.dashboard-attendance-kpis article::after {
  background: linear-gradient(90deg, var(--spic-sky), var(--spic-royal));
}
.status-strip article,
.status-strip div,
.dashboard-focus-stat,
.dashboard-attendance-kpis article,
.dashboard-attendance-copy {
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,251,255,.95)),
    radial-gradient(circle at 100% 0%, rgba(125,185,232,.16), transparent 8rem);
}
.calendar-view-tabs a.active,
.attendance-bar-item.today span {
  background: var(--spic-royal);
}
.term-calendar-weekhead,
.term-calendar-dayhead,
.notice-table th,
.student-info-table th,
.absent-table th {
  background: linear-gradient(180deg, var(--spic-deep), #235d9d);
}
.attendance-bar-item:nth-child(2) .attendance-bar-fill, .attendance-bar-item:nth-child(3) .attendance-bar-fill, .attendance-bar-item:nth-child(4) .attendance-bar-fill, .attendance-bar-item:nth-child(5) .attendance-bar-fill {
  background: linear-gradient(180deg, #7db9e8, #2867ad);
}
.module-action.danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
::selection {
  background: rgba(125,185,232,.34);
  color: var(--spic-deep);
}
/* ── Preferred gold accent restoration ──────────────────────
   Keep the modern refreshed surfaces, but return the warmer
   blue-and-gold personality. */
body {
  background:
    radial-gradient(circle at top left, rgba(21, 81, 137, .13), transparent 34rem),
    radial-gradient(circle at top right, rgba(246, 189, 43, .15), transparent 30rem),
    linear-gradient(180deg, #fbfdff 0%, var(--bg) 48%, #eef5fb 100%);
}
.brand::before {
  background: radial-gradient(circle, rgba(246,189,43,.34), transparent 68%);
}
.topbar nav a.active {
  background: linear-gradient(135deg, var(--gold), #ffd76c);
  box-shadow: 0 8px 18px rgba(246, 189, 43, .25);
  color: var(--navy);
}
.hero, .dashboard-hero, .detail-header, .dashboard-overview {
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 20px 55px rgba(15, 35, 64, .11),
    inset 0 1px 0 rgba(255,255,255,.82);
  background:
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(244,248,255,.92)),
    radial-gradient(circle at 96% 12%, rgba(246,189,43,.22), transparent 22rem);
}
.hero::after,
.dashboard-hero::after,
.detail-header::after,
.dashboard-overview::after,
.panel-heading h2::before,
.dashboard-section-head h2::before,
.notice-section-heading h2::before {
  background: linear-gradient(180deg, var(--gold), var(--navy-mid));
}
.hero::before,
.dashboard-hero::before,
.detail-header::before,
.dashboard-overview::before {
  background:
    radial-gradient(circle, rgba(246,189,43,.28), transparent 64%),
    radial-gradient(circle at 25% 75%, rgba(21,81,137,.16), transparent 58%);
}
.primary-link,
.module-action {
  background: linear-gradient(135deg, var(--gold), #ffd66b);
  border-color: rgba(224, 157, 0, .34);
  color: var(--navy);
}
.primary-link:hover,
.module-action:hover {
  background: linear-gradient(135deg, #edaa11, #ffd05a);
  box-shadow: 0 12px 22px rgba(246, 189, 43, .24);
  color: var(--navy);
}
.module-action.subtle,
.tool-button,
.secondary-link {
  color: var(--navy);
}
.status-strip article::after,
.status-strip div::after,
.dashboard-focus-stat::after,
.dashboard-attendance-kpis article::after {
  background: linear-gradient(90deg, rgba(246,189,43,.92), rgba(21,81,137,.62));
}
.status-strip article,
.status-strip div,
.dashboard-focus-stat,
.dashboard-attendance-kpis article,
.dashboard-attendance-copy {
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,251,255,.95)),
    radial-gradient(circle at 100% 0%, rgba(246,189,43,.16), transparent 8rem);
}
.calendar-view-tabs a.active,
.attendance-bar-item.today span {
  background: var(--navy-mid);
}
/* ── Safety pass: contrast, overflow, activities hub ──────── */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  isolation: isolate;
  position: relative;
  min-width: 0;
}
.brand span {
  min-width: 0;
}
.brand strong, .brand small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar nav {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  /* The More menu is a child of this nav; overflow-x clipped it. */
  overflow: visible;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a, .logout-form { flex: 0 0 auto; }
.logout-form span {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-overview-refined, .dashboard-attendance-copy { color: #fff; }
.dashboard-overview-refined :where(h1, h2, h3, p, span, small, strong, .eyebrow, .intro), .dashboard-attendance-copy :where(h1, h2, h3, p, span, small, strong, label) {
  color: #fff;
}
.dashboard-attendance-copy :where(select, input, option) { color: var(--navy); }
.dashboard-overview-refined .module-action:not(.subtle) { color: var(--navy); }
.panel, .dashboard-panel, .event-panel, .account-panel, .attendance-workspace, .notice-page, .dashboard-workflow-list a, .dashboard-watchlist-grid a, .activity-card {
  min-width: 0;
  overflow-wrap: anywhere;
}
.activities-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.activity-card {
  align-items: flex-start;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,251,255,.9));
  border: 1px solid rgba(211, 224, 239, .86);
  border-radius: 26px;
  box-shadow: var(--premium-shadow-soft, var(--shadow-sm));
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 22px;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.activity-card:hover {
  border-color: #bed0e4;
  box-shadow: 0 20px 50px rgba(4, 23, 51, .13);
  transform: translateY(-3px);
}
.activity-card-icon {
  align-items: center;
  background: linear-gradient(135deg, var(--gold), #ffd76c);
  border-radius: 20px;
  color: var(--navy);
  display: inline-flex;
  font-size: 1.25rem;
  font-weight: 850;
  height: 54px;
  justify-content: center;
  width: 54px;
}
.activity-card small {
  color: var(--slate-light);
  display: block;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .07em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.activity-card strong {
  color: var(--navy);
  display: block;
  font-size: 1.05rem;
  letter-spacing: -.025em;
}
.activity-card p {
  color: var(--slate);
  font-size: .9rem;
  line-height: 1.45;
  margin-top: 4px;
}
@media (max-width: 900px) {
  .topbar { align-items: stretch; flex-wrap: wrap; height: auto; }
  .topbar nav { order: 3; width: 100%; }
}
@media (max-width: 520px) {
  .brand small { display: none; }
  .logout-form { width: 100%; }
  .logout-form button { margin-left: auto; }
  .activity-card { grid-template-columns: 1fr; }
}
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
/* Main menu should scroll away with the page, not stay sticky. */
/* ── Product dashboard refinement ───────────────────────────
   Inspired by contemporary school-dashboard UI patterns:
   soft product canvas, floating navigation, richer dashboard
   cards, and calmer premium depth. */
body {
  background:
    linear-gradient(135deg, var(--premium-bg-top) 0%, var(--premium-bg-mid) 42%, #eef4fb 100%);
  isolation: isolate;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}
body::before {
  background:
    radial-gradient(circle at 12% 8%, rgba(0, 36, 82, .16), transparent 28rem),
    radial-gradient(circle at 86% 4%, rgba(246, 189, 43, .22), transparent 24rem),
    radial-gradient(circle at 72% 72%, rgba(125, 185, 232, .18), transparent 30rem);
  content: "";
  filter: blur(2px);
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: -2;
}
body::after {
  background:
    linear-gradient(90deg, rgba(0,36,82,.035) 1px, transparent 1px),
    linear-gradient(rgba(0,36,82,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.52), transparent 78%);
  pointer-events: none;
  position: fixed;
  z-index: -1;
}
.topbar nav {
  gap: 4px;
}
.topbar nav a, .topbar nav .nav-menu > summary {
  min-height: 34px;
}
.management-edit-bar {
  align-items: center;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  min-height: 52px;
  padding: 8px 28px;
  position: sticky;
  z-index: 90;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  border-radius: 18px;
  margin: 10px auto 0;
  max-width: min(1480px, calc(100vw - 28px));
  top: 92px;
}
.page {
  margin: 0 auto;
  padding: 32px 24px 56px;
  max-width: min(1500px, calc(100vw - 28px));
  padding-top: 28px;
  position: relative;
  z-index: 1;
}
.hero, .dashboard-hero, .detail-header, .dashboard-overview, .panel, .dashboard-panel, .event-panel, .account-panel, .attendance-workspace, .notice-page, .login-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(250,252,255,.86));
  border-color: rgba(207, 221, 236, .82);
  box-shadow: var(--premium-shadow-soft), inset 0 1px 0 rgba(255,255,255,.84);
}
.dashboard-overview-refined .eyebrow, .dashboard-overview-refined .intro, .dashboard-overview-refined h1 {
  color: #fff;
}
.dashboard-overview-refined .intro { opacity: .78; }
.dashboard-overview-refined .module-action.subtle {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.24);
  color: #fff;
}
.dashboard-attendance-card-expanded {
  grid-template-columns: minmax(260px, .48fr) minmax(0, 1.52fr);
  background:
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(247,250,255,.86));
  border-radius: 30px;
  box-shadow: var(--premium-shadow);
  padding: 24px;
}
.dashboard-attendance-copy {
  border: 1px solid var(--line-soft);
  display: grid;
  gap: 5px;
  padding: 16px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 86% 0%, rgba(31,138,87,.12), transparent 13rem),
    linear-gradient(155deg, #f1faf4 0%, #ffffff 62%);
  border-color: #cfe8d8;
  box-shadow: 0 12px 30px rgba(15,60,38,.08);
  color: var(--navy);
}
.dashboard-attendance-copy span, .dashboard-attendance-copy p, .dashboard-attendance-period {
  color: var(--navy);
}
.dashboard-attendance-copy h2 {
  color: #1f7a4d;
}
.dashboard-attendance-copy p {
  opacity: .68;
}
.dashboard-week-picker label {
  color: #5b6b80;
}
.dashboard-week-picker select,
.dashboard-week-picker input {
  background: #ffffff;
  border-color: #cfdbe8;
}
.dashboard-attendance-kpis article {
  background: #ffffff;
  border-color: #d8e6dd;
  box-shadow: var(--shadow-xs);
}
.dashboard-attendance-kpis article span {
  color: #5b6b80;
}
.dashboard-attendance-kpis article strong {
  color: var(--navy);
}
.dashboard-report-link {
  justify-content: center;
  margin-top: 4px;
  background: #ffffff !important;
  border-color: #cfe0d4 !important;
  color: #1f7a4d !important;
}
.dashboard-watchlist, .dashboard-focus-stat, .dashboard-workflow-list a, .student-roll-card, .term-day-cell, .day-calendar-card, .account-row, .notice-event-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,251,255,.9));
  border-color: rgba(211, 224, 239, .86);
}
.dashboard-workflow-list a, .dashboard-watchlist-grid a { border-left-width: 5px; }
.dashboard-workflow-list a span, .dashboard-watchlist-grid strong, .dashboard-focus-stat strong {
  letter-spacing: -.025em;
}
.panel:hover, .dashboard-panel:hover, .event-panel:hover, .account-panel:hover {
  box-shadow: 0 20px 55px rgba(4, 23, 51, .11), inset 0 1px 0 rgba(255,255,255,.88);
}
@media (max-width: 760px) {
  .topbar {
    margin-top: 0;
    max-width: 100%;
    top: 0;
    width: 100%;
  }
  .management-edit-bar { top: 0; }
  .page { max-width: 100%; }
}
.attendance-bar-fill, .attendance-bar-item:nth-child(2) .attendance-bar-fill, .attendance-bar-item:nth-child(3) .attendance-bar-fill, .attendance-bar-item:nth-child(4) .attendance-bar-fill, .attendance-bar-item:nth-child(5) .attendance-bar-fill {
  background: linear-gradient(180deg, #7db9e8, var(--navy-mid));
}
.term-event-pill, .day-event-card {
  background: linear-gradient(145deg, #fffdf5, #fff7dc);
  border-color: #f3d47d;
  border-left-color: var(--gold);
}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(246, 189, 43, .45);
  outline-offset: 2px;
  outline-color: rgba(246, 189, 43, .5);
}
::selection {
  background: rgba(246,189,43,.32);
  color: var(--navy);
}
/* ── Original navy restoration ────────────────────────────── */
:root {
  --white:       #ffffff;
  --radius-pill: 999px;
  --font: "Inter", "Segoe UI", system-ui, sans-serif;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --shadow-xs:   0 1px 2px rgba(15, 23, 42, .05);
  --shadow-sm:   0 10px 30px rgba(15, 35, 64, .08);
  --shadow-md:   0 20px 55px rgba(15, 35, 64, .12);
  --shadow-soft: 0 14px 34px rgba(15, 35, 64, .09);
  --slate:       #4e5967;
  --slate-light: #748191;
  --line:        #d9e4ee;
  --line-soft:   #edf4fa;
  --bg:          #f5f8fb;
  --text:        #172234;
  --spic-grey:   #6f7782;
  --gold:        #f6bd2b;
  --gold-soft:   #fff5d8;
  --spic-warm:   #f6bd2b;
  --premium-bg-top: #edf3fb;
  --premium-bg-mid: #f7f9fd;
  --premium-card: rgba(255,255,255,.88);
  --premium-card-strong: rgba(255,255,255,.96);
  --premium-shadow: 0 24px 70px rgba(4, 23, 51, .12);
  --premium-shadow-soft: 0 14px 38px rgba(4, 23, 51, .08);
  --navy:        #002452;
  --navy-mid:    #003a70;
  --navy-light:  #e6eef8;
  --navy-pale:   #f3f7fb;
  --spic-royal:  #003a70;
  --spic-deep:   #002452;
  --spic-sky:    #7db9e8;
  --spic-ice:    #e6eef8;
}
.hero::after,
.dashboard-hero::after,
.detail-header::after,
.dashboard-overview::after,
.panel-heading h2::before,
.dashboard-section-head h2::before,
.notice-section-heading h2::before {
  background: linear-gradient(180deg, var(--gold), var(--navy-mid));
}
.term-calendar-weekhead,
.term-calendar-dayhead,
.notice-table th,
.student-info-table th,
.absent-table th {
  background: linear-gradient(180deg, var(--navy), var(--navy-mid));
}
.calendar-view-tabs a.active,
.attendance-bar-item.today span {
  background: var(--navy-mid);
}
/* ════════════════════════════════════════════════════════════
   Elegance refinements — additive, conservative (keeps navy/gold).
   ════════════════════════════════════════════════════════════ */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -.005em;
}
/* Softer, more lifted cards & headers (layered shadow) */
.panel, .hub-panel, .module-card, .notice-page, .attendance-workspace, .system-notes {
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
}
.hero, .detail-header { box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 28px rgba(15,23,42,.07); }
/* Crisper headings */
.hero h1, .dashboard-hero h1, .detail-header h1 { letter-spacing: -.025em; }
.eyebrow {
  font-size: .72rem;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--navy-mid);
  font-weight: 800;
  letter-spacing: .1em;
}
/* Button tactility — subtle lift & press */
.primary-link, .module-action, .tool-button, .danger-button, .secondary-link {
  transition: background .15s, box-shadow .18s, transform .12s, border-color .15s;
}
.primary-link:hover, .module-action:hover { box-shadow: 0 5px 16px rgba(255,188,26,.34); }
.tool-button:hover, .secondary-link:hover { box-shadow: var(--shadow-xs); }
.primary-link:active, .module-action:active, .tool-button:active, .danger-button:active {
  transform: translateY(1px);
}
/* Inputs — a touch more breathing room */
input, select, textarea { min-height: 38px; }
/* ── Dashboard fine-tuning ───────────────────────────────────── */
/* Glossy sheen over the attendance bar fills (keeps each day's hue) */
.attendance-bar-fill {
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32);
  width: 100%;
  background: linear-gradient(180deg, #ffd76c 0%, var(--gold) 38%, var(--navy-mid) 100%);
  background-image: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 55%, rgba(0,0,0,.07));
}
/* Interactive lift on the stat / KPI / workflow tiles */
.dashboard-focus-stat {
  background: #fbfdff;
  border: 1px solid var(--line-soft);
  border-top: 3px solid #2f80ed;
  border-radius: var(--radius-md);
  display: grid;
  gap: 5px;
  min-height: 112px;
  padding: 14px;
  transition: box-shadow .18s ease, transform .12s ease, border-color .15s ease;
}
.dashboard-focus-stat:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.dashboard-attendance-kpis article { transition: box-shadow .18s ease, transform .12s ease; }
.dashboard-attendance-kpis article:hover { transform: translateY(-1px); box-shadow: var(--shadow-xs); }
.dashboard-workflow-list a {
  transition: background .12s ease, border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.dashboard-workflow-list a:hover { transform: translateY(-1px); box-shadow: var(--shadow-xs); }
/* ── Squared main menu treatment ─────────────────────────────
   More formal school-admin navigation: rectangular container
   and rectangular tabs, while keeping cards softly rounded. */
.topbar {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
  z-index: 100;
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  padding-left: clamp(16px, 2.4vw, 34px);
  padding-right: clamp(16px, 2.4vw, 34px);
  box-sizing: border-box;
  /* Not hidden: the More menu hangs below the bar and was being clipped away
     entirely. Nothing spills now that .topbar nav is nowrap and the overflow
     links live in that menu. */
  overflow: visible;
  position: relative;
  border: 1px solid rgba(255,255,255,.16);
  top: 12px;
  background:
    linear-gradient(135deg, rgba(0, 36, 82, .98), rgba(0, 58, 112, .96));
  box-shadow: 0 16px 36px rgba(0, 36, 82, .22);
  border-radius: 0;
  margin: 0 auto;
  max-width: 100%;
  min-height: 62px;
  padding: 8px 24px;
  width: 100%;
}
.topbar nav a, .topbar nav .nav-menu > summary {
  border-radius: 6px;
  min-height: 34px;
  padding: 7px 11px;
}
.topbar nav a.active {
  border-radius: 6px;
}
.topbar nav a.active::after {
  content: "";
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  background: rgba(8,36,74,.38);
  border-radius: 0;
  bottom: 2px;
  height: 2px;
  width: calc(100% - 16px);
}
.logout-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.14);
  min-width: 0;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  padding: 5px 6px 5px 12px;
  border-radius: 6px;
}
@media (max-width: 760px) {
  .topbar { border-radius: 0; padding: 10px 14px; }
}
/* ── Responsive containment: accounts/admin forms ─────────────────── */
.account-list, .account-row, .account-row > *, .account-actions, .activity-table-wrap { min-width: 0; }
.account-row input, .account-row select, .account-row button, .account-create input, .account-create select, .account-create button {
  max-width: 100%;
  min-width: 0;
}
@media (max-width: 980px) {
  .account-create, .account-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-name, .account-row > input[type="hidden"] { grid-column: 1 / -1; }
  .account-row > label:nth-of-type(3) { grid-column: 1 / -1; }
  .account-row .account-check, .account-actions { align-self: center; }
  .account-actions { flex-wrap: wrap; justify-content: flex-start; }
  .account-directory-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-directory-filter .account-search-field { grid-column: 1 / -1; }
  .account-summary {
    grid-template-areas:
      "avatar name statuses edit"
      "avatar role link edit";
    grid-template-columns: 38px minmax(150px, 1fr) minmax(130px, auto) 60px;
    row-gap: 4px;
  }
}
.account-check {
  justify-content: flex-start;
  min-width: max-content;
}
.account-check span, .permission-check span, .permission-grid-head strong, .permission-na span {
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: normal;
}
.account-check input {
  flex: 0 0 auto;
  height: 16px;
  min-height: 0;
  padding: 0;
  width: 16px;
}
.permission-check input {
  flex: 0 0 auto;
  height: 15px;
  min-height: 0;
  padding: 0;
  width: 15px;
}
@media (max-width: 560px) {
  .account-create, .account-row { grid-template-columns: minmax(0, 1fr); }
  .account-create .account-check, .account-row .account-check { min-width: 0; }
  .account-actions { width: 100%; }
  .account-directory-filter { grid-template-columns: minmax(0, 1fr); }
  .account-directory-filter .account-search-field { grid-column: auto; }
  .account-directory-filter .module-action { text-align: center; width: 100%; }
  .account-results-bar { align-items: flex-start; flex-direction: column; gap: 2px; }
  .account-summary {
    grid-template-areas:
      "avatar name edit"
      "role role role"
      "link link statuses";
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }
  .account-summary-statuses { justify-content: flex-end; }
  .account-edit-label { align-self: center; }
  .account-row .account-teacher-field { grid-column: auto; }
  .account-pagination { justify-content: space-between; }
  .account-page-links a:not(.active) { display: none; }
}
/* ════════════════════════════════════════════════════════════
   Premium dashboard direction (hero stat strip, unified bars,
   workflow rows with icons). Appended last for precedence.
   ════════════════════════════════════════════════════════════ */
.dashboard-overview-refined {
  border-left: 4px solid var(--gold);
  border-top: 0;
  margin-bottom: 14px;
  padding-bottom: 24px;
  padding-top: 24px;
  background:
    radial-gradient(circle at 84% 8%, rgba(246,189,43,.30), transparent 18rem),
    linear-gradient(135deg, #15558a 0%, #1c5d97 52%, #2e74b0 100%);
  border-color: rgba(255,255,255,.18);
  box-shadow: var(--premium-shadow);
  color: #fff;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.dashboard-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.dashboard-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.dashboard-hero-stats > div { display: grid; gap: 3px; }
.dashboard-overview-refined .dashboard-hero-stats span {
  color: rgba(255,255,255,.62);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: 1;
}
.dashboard-overview-refined .dashboard-hero-stats strong {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
}
.dashboard-overview-refined .dashboard-hero-stats > div:last-child strong { color: var(--gold-soft); }
/* Unified navy bars with the current day in gold (keeps the glossy sheen) */
.attendance-bar-track {
  align-items: end;
  border-radius: 999px 999px 7px 7px;
  display: flex;
  height: 128px;
  justify-content: center;
  overflow: hidden;
  width: min(44px, 100%);
  box-shadow: inset 0 1px 4px rgba(15, 35, 64, .08);
  border: 1px solid rgba(190, 211, 231, .84);
  background: #eef2f7;
  border-color: #dbe3ee;
}
.attendance-bar-item:nth-child(n) .attendance-bar-fill {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 55%, rgba(0,0,0,.07)),
    linear-gradient(180deg, #2f5f9e, #002452);
}
.attendance-bar-item.today .attendance-bar-fill {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 55%, rgba(0,0,0,.06)),
    linear-gradient(180deg, #ffd56b, #ffbc1a);
}
.attendance-bar-item.pending .attendance-bar-fill { background-image: none; background: #cbd5e1; }
/* Workflow rows: icon + text + chevron, cohesive accent */
.dashboard-workflow-list a {
  display: flex; align-items: center; gap: 12px;
  border-left: 1px solid var(--line-soft);
}
.dashboard-workflow-list a:nth-child(n) { border-left-color: var(--line-soft); }
.dashboard-workflow-list .wf-ic { flex: none; color: var(--navy-mid); }
.dashboard-workflow-list .wf-tx {
  display: grid;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.dashboard-workflow-list .wf-cv { flex: none; color: #aebccd; }
.dashboard-workflow-list a:hover .wf-cv { color: var(--navy-mid); }
/* Attendance roll cards — gentle hover affordance */
.student-roll-card {
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  gap: 10px;
  min-height: 54px;
  padding: 10px 12px;
  transition: box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.student-roll-card:hover { box-shadow: var(--shadow-xs); border-color: #c5d4e8; }
/* Clickable hero stats — each number links to its detail surface */
.dashboard-hero-stats > .hero-stat { display: grid; gap: 3px; }
.dashboard-overview-refined .dashboard-hero-stats > .hero-stat:last-child strong { color: var(--gold-soft); }
a.hero-stat { text-decoration: none; transition: opacity .15s ease; }
a.hero-stat:hover { opacity: .85; }
a.hero-stat:hover strong { text-decoration: underline; text-underline-offset: 3px; }
/* Today panel now carries a single, full-width actionable roll-status card */
.dashboard-today-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  grid-template-columns: 1fr;
}
/* Attendance chart: non-colour "Today" cue (badge) above the current day's bar */
.dashboard-attendance-chart {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 190px;
  padding-top: 16px;
}
.attendance-bar-item.today { position: relative; }
.attendance-today-tag {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--navy);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(15, 35, 64, .2);
  white-space: nowrap;
  z-index: 2;
}
.role-dashboard-hero .dashboard-hero-top { align-items: flex-start; }
.role-dashboard-intro { margin-top: 5px; }
.dashboard-notice-strip {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}
.dashboard-notice-strip article {
  background: var(--white);
  border: 1px solid #d8e3ef;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  display: grid;
  gap: 5px;
  min-height: 94px;
  padding: 15px;
}
.dashboard-notice-strip span {
  color: var(--slate-light);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.dashboard-notice-strip strong { color: var(--navy); font-size: 1.55rem; line-height: 1; }
.dashboard-focus-grid, .student-management-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.dashboard-focus-grid article, .dashboard-focus-grid a, .student-management-summary article {
  background: #fbfdff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  color: inherit;
  display: grid;
  gap: 5px;
  min-height: 96px;
  padding: 13px;
}
.dashboard-focus-grid span, .student-management-summary span {
  color: var(--slate-light);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.dashboard-focus-grid strong, .student-management-summary strong {
  color: var(--navy);
  font-size: 1.35rem;
  line-height: 1;
}
.student-management-summary { margin-bottom: 14px; }
.student-management-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.student-management-card { color: inherit; }
/* Hub pages are grouped into the same sections as the matching nav menu, so
   the cards need a heading strip to sit under. */
.hub-section { margin-top: 26px; }
.hub-section-head { margin-bottom: 12px; }
.hub-section-head h2 {
  font-size: 1.02rem;
  letter-spacing: .04em;
  margin: 0;
  text-transform: uppercase;
}
.hub-section-head p { color: var(--slate-light, #6b7a8d); font-size: .85rem; margin: 2px 0 0; }
.student-management-card h3 { font-size: 1.05rem; margin: 0 0 4px; }
/* ── Inner-page headers: simplified ───────────────────────────────────────
   The rich banner treatment is reserved for the dashboard hero. Every other
   page (.detail-header) gets a clean title + actions row with a hairline. */
.detail-header {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  box-shadow: none;
  padding: 2px 0 14px;
  margin-bottom: 22px;
}
.detail-header::before, .detail-header::after { content: none; }
.detail-header h1 { color: var(--navy); }
/* ── 40th anniversary brand badge ───────────────────────────────── */
.brand-anniversary {
  align-items: center;
  border: 1px solid rgba(255, 188, 26, .42);
  border-radius: 999px;
  color: #fff7df;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  margin-right: auto;
  min-width: 0;
  padding: 4px 11px 4px 5px;
}
.brand-anniversary img {
  background: #fff;
  border-radius: 50%;
  height: 32px;
  object-fit: contain;
  width: 32px;
}
.brand-anniversary span { display: grid; line-height: 1.05; }
.brand-anniversary strong { color: #fff7df; font-size: .8rem; font-weight: 900; }
.brand-anniversary small { color: rgba(255,255,255,.72); font-size: .63rem; font-weight: 800; }
@media (max-width: 1620px) {
  .brand-anniversary { display: none; }
}
/* ── Mobile hamburger navigation ─────────────────────────── */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.nav-toggle svg { width: 17px; height: 17px; }
.nav-toggle:hover { background: rgba(255,255,255,.18); }
/* Compact the nav on mid-size screens so View-as and Logout stay visible */
@media (max-width: 1620px) {
  .topbar nav a, .topbar nav .nav-menu > summary { font-size: .82rem; padding: 7px 8px; }
  .view-as-form label { display: none; }
  .view-as-form { margin-left: 4px; padding-left: 8px; }
  .logout-form { margin-left: 4px; padding-left: 8px; }
}
/* Just above the hamburger breakpoint the bar carries the most it ever has to:
   eight entries plus View-as and Logout, with no room left for the 8px link
   padding. The nav does not scroll - overflow is visible so the More menus are
   not clipped - so anything that does not fit spills over the account
   controls. Tighten the links through that band instead. */
@media (max-width: 1320px) {
  .topbar nav a, .topbar nav .nav-menu > summary { font-size: .8rem; padding: 7px 5px; }
}
/* Closing the gaps buys more room than shrinking the padding further, and keeps
   the labels legible. Measured, not guessed: nine entries plus View-as, Logout
   and the help mark do not fit a 1400px bar at the padding above. */
@media (max-width: 1400px) {
  .topbar nav { gap: 1px; }
  .topbar nav a, .topbar nav .nav-menu > summary { padding: 7px 4px; }
}
/* Last stop before the hamburger. */
@media (max-width: 1220px) {
  .topbar nav a, .topbar nav .nav-menu > summary { padding: 7px 3px; }
  .topbar-help { padding: 3px 6px; }
}
@media (max-width: 1200px) {
  .nav-toggle { display: inline-flex; flex: 0 0 auto; }
  .topbar { align-items: center; }
  /* The open menu is a second row inside the bar, but .topbar is pinned to a
     60px height by a later rule that outranks the height:auto in the 900px
     and 760px queries. Left pinned, the menu hangs below the navy bar over
     the pale page, where its white links are unreadable. Grow the bar instead,
     so the menu keeps the dark background it is coloured for. */
  .topbar.nav-open {
    align-items: flex-start;
    flex-wrap: wrap;
    height: auto;
  }
  .topbar nav { display: none; }
  .topbar.nav-open nav {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 5px;
    order: 3;
    overflow: visible;
    width: 100%;
    border-top: 1px solid rgba(255,255,255,.14);
    margin-top: 10px;
    padding: 10px 2px 8px;
  }
  /* Direct children only. Unscoped, this also caught the links inside an open
     dropdown, and centring a link that is a title stacked over a description
     centred both lines against the left-aligned headings beside them. */
  .topbar.nav-open nav > a {
    align-items: center;
    display: flex;
    min-height: 42px;
    padding: 9px 14px;
  }
  .topbar.nav-open .view-as-form, .topbar.nav-open .logout-form {
    border-left: 0;
    margin-left: 0;
    padding-left: 14px;
    width: 100%;
  }
  .topbar.nav-open .view-as-form label { display: block; white-space: nowrap; }
  .topbar.nav-open .view-as-form select { flex: 1 1 auto; max-width: none; }
  .topbar.nav-open .logout-form { justify-content: space-between; padding-right: 4px; }
}
/* ── Stacked card layout for report tables on phones ─────── */
@media (max-width: 640px) {
  .absent-table-wrap:has(> .responsive-cards) { background: none; overflow-x: visible; }
  .responsive-cards { display: block; min-width: 0; }
  .responsive-cards thead { display: none; }
  .responsive-cards tbody { display: grid; gap: 10px; }
  .responsive-cards tr {
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    display: grid;
    gap: 2px;
    padding: 12px 14px;
  }
  .responsive-cards td {
    align-items: baseline;
    border-bottom: 0;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 3px 0;
    text-align: right;
  }
  .responsive-cards td::before {
    color: var(--slate-light);
    content: attr(data-label);
    flex-shrink: 0;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
  }
  .responsive-cards td:first-child {
    border-bottom: 1px solid var(--line-soft);
    font-weight: 600;
    margin-bottom: 4px;
    padding-bottom: 7px;
  }
}
/* ── Class rolls ─────────────────────────────────────────────────────── */
.roll-status-options { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.roll-status-option {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border, #d8dee9);
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.roll-status-option:has(input:checked) {
  background: var(--accent-soft, #eef2ff);
  border-color: var(--accent, #4c6ef5);
  font-weight: 600;
}
.roll-status-option:has(input:disabled) { opacity: 0.6; cursor: default; }
.roll-status-option input { margin: 0; }
.roll-all-classes { margin-top: 1.5rem; }
.roll-all-classes summary { cursor: pointer; font-weight: 600; padding: 0.5rem 0; }
td small.muted { display: block; opacity: 0.7; font-size: 0.78rem; }
/* Roll marking table: the Mark column holds four radio pills, so give it room
   and let the name column take the slack. */
/* The roll card holds two independent labels (present, late), so the card
   itself is a plain div. .roll-pick stretches to fill it, keeping the
   click-anywhere-to-tick behaviour without swallowing the Late control. */
.student-roll-card > .roll-pick {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex: 1 1 auto;
  gap: 10px;
  min-width: 0;
}
.student-roll-card > .roll-pick > span { min-width: 0; }
.student-roll-card > .late-toggle { cursor: pointer; }
/* ── Who's Where / day timeline ──────────────────────────────────────── */
.whereabouts-search { flex: 1 1 260px; }
.whereabouts-search input { width: 100%; }
.whereabouts-hits { margin-top: 14px; }
.whereabouts-hits h2 { font-size: .95rem; margin: 12px 0 6px; }
.whereabouts-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.whereabouts-list li {
  align-items: baseline;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: flex;
  gap: 8px;
  padding: 7px 12px;
}
.whereabouts-list small { color: var(--slate-light); font-size: .76rem; }
.day-person { margin-top: 18px; }
.day-person-head {
  align-items: baseline;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding-bottom: 10px;
}
.day-person-meta {
  color: var(--slate-light);
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: .85rem;
}
.day-person-meta strong { color: var(--navy); font-size: 1.05rem; }
.day-timeline {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.day-slot {
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-md);
  display: flex;
  gap: 14px;
  padding: 10px 14px;
}
.day-slot.duty { background: var(--navy-pale); }
.day-slot.free { opacity: .62; }
/* The current period is the one thing a reader should find without scanning. */
.day-slot.now { border-left-color: #16a34a; box-shadow: var(--shadow-xs); opacity: 1; }
.day-slot.now .day-slot-when strong { color: #15803d; }
.day-slot-when { flex: 0 0 5.5rem; }
.day-slot-when strong { color: var(--navy); display: block; font-size: .9rem; }
.day-slot-when small { color: var(--slate-light); font-size: .72rem; }
.day-slot-what {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  min-width: 0;
}
.day-slot-what > strong { font-size: .92rem; }
.day-slot-what > span { color: var(--slate); font-size: .85rem; }
.day-slot-empty { color: var(--slate-light); font-size: .85rem; font-style: italic; }
@media (max-width: 620px) {
  .day-slot { flex-direction: column; gap: 4px; }
  .day-slot-when {
    flex: none;
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
}
/* Overflow menu for accounts entitled to more links than fit the bar. */
.nav-more { position: relative; }
.nav-more > summary { cursor: pointer; list-style: none; white-space: nowrap; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary::after { content: " \25be"; }
.nav-more > div {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
}
@media (max-width: 1200px) {
  /* Matches the hamburger breakpoint: below it the nav is already a stacked
     menu, where an absolutely positioned popover would sit off-screen. Also
     drop the white card: the links inside turn white for the dark bar, so a
     white panel behind them left the whole menu white on white. */
  .nav-more > div {
    position: static;
    background: transparent;
    box-shadow: none;
    border: 0;
    padding: 0;
    min-width: 0;
  }
}
/* Sticky save for long rolls: the whole-school roll is 105 students and a
   Year 11 class is 40, so the primary action must stay reachable. */
.roll-save-bar {
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  bottom: 12px;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin: 16px 0;
  padding: 10px 14px;
  position: sticky;
  z-index: 20;
}
.roll-save-bar > span { color: var(--slate); font-size: .85rem; }
/* The primary action was rendering identically to secondary buttons because
   .module-action.primary was never defined. */
.module-action.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.module-action.primary:hover {
  background: var(--navy-deep, #0b294b);
  border-color: var(--navy-deep, #0b294b);
}
/* Week-at-a-glance strip on the class rolls page. */
.roll-week { margin: 16px 0 18px; }
.roll-week-head {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}
.roll-week-days {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.roll-week-days a {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-md);
  display: block;
  padding: 9px 12px;
}
.roll-week-days strong { display: block; font-size: .85rem; }
.roll-week-days span { color: var(--slate-light); font-size: .78rem; }
.roll-week-days li.today a { border-left-color: var(--navy); }
.roll-week-days li.done a { border-left-color: #16a34a; }

/* ── Class roll marking ──────────────────────────────────────────────────
   A reflowing list, not a table: the four status pills plus a note field
   never fit fixed columns, and card mode squeezed them into half a row. */
.roll-mark-list { display: grid; gap: 6px; list-style: none; margin: 14px 0 0; padding: 0; }
.roll-mark-row {
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 9px 14px;
}
.roll-mark-row.absent, .roll-mark-row.left_early { border-left-color: #dc2626; background: #fffafa; }
.roll-mark-row.late { border-left-color: #d97706; background: #fffdf6; }
.roll-mark-row.present { border-left-color: #16a34a; }

.roll-mark-who { flex: 1 1 12rem; min-width: 0; }
.roll-mark-who strong { display: block; font-size: .9rem; font-weight: 500; }
.roll-mark-who strong a { color: inherit; text-decoration: none; }
.roll-mark-who strong a:hover { text-decoration: underline; }
.roll-mark-who small { color: var(--slate-light); display: block; font-size: .76rem; }

.roll-mark-list .roll-status-options {
  border: 0;
  flex: 0 1 auto;
  margin: 0;
  padding: 0;
}
.roll-mark-note { flex: 1 1 11rem; min-width: 0; }

@media (max-width: 620px) {
  /* Stack rather than shrink: the pills must stay tappable. */
  .roll-mark-row { align-items: stretch; flex-direction: column; gap: 8px; }
  .roll-mark-note { width: 100%; }
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ── Teacher "your day" panel ────────────────────────────────────────────
   Sits above the task cards: between classes a teacher needs one line about
   the next thirty minutes, not a menu. */
.teacher-now {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
  padding: 16px 18px;
}
.teacher-now-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: space-between;
}
.teacher-now-summary { color: var(--slate); font-size: .92rem; margin: 2px 0 0; }
.teacher-now-summary strong { color: var(--navy); }
.teacher-now-empty { color: var(--slate-light); font-size: .9rem; margin: 4px 0 0; }

.teacher-slot {
  align-items: center;
  background: var(--navy-pale);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 10px 14px;
}
.teacher-slot > div { flex: 1 1 12rem; min-width: 0; }
.teacher-slot strong { display: block; font-size: 1rem; }
.teacher-slot span { color: var(--slate); font-size: .85rem; }
.teacher-slot-tag {
  align-self: flex-start;
  background: var(--navy);
  border-radius: 999px;
  color: #fff;
  flex: 0 0 auto;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .18rem .55rem;
  text-transform: uppercase;
}
/* The current period is the one thing that must be findable without reading. */
.teacher-slot.now { background: #f0fdf4; box-shadow: inset 0 0 0 1px #86efac; }
.teacher-slot.now .teacher-slot-tag { background: #16a34a; }

.teacher-now-full { margin-top: 4px; }
.teacher-now-full summary { color: var(--navy-mid, var(--navy)); cursor: pointer; font-size: .88rem; font-weight: 600; }
.teacher-now-full .day-person-head { border-bottom: 0; padding-bottom: 0; }
.teacher-now-full .day-person-head h2 { display: none; }

@media (max-width: 560px) {
  .teacher-slot { align-items: flex-start; }
  .teacher-slot .module-action { width: 100%; text-align: center; }
}

/* Login shown beneath the person's name once a display name is set. */
.account-login { color: var(--slate-light); display: block; font-size: .74rem; }

/* The More popover sits on white, but .topbar nav a is white text for the
   dark bar - so its links were white on white and effectively invisible. */
.nav-more > div a {
  border-radius: var(--radius-sm);
  color: var(--ink, #16202e);
  padding: 8px 10px;
  white-space: nowrap;
}
.nav-more > div a:hover { background: var(--navy-pale, #eaf1f8); color: var(--navy); }
.nav-more > div a.active { background: var(--gold); color: var(--navy); }
.nav-more > div { max-height: min(70vh, 26rem); overflow-y: auto; }
.nav-more > summary { color: rgba(255,255,255,.78); padding: 6px 10px; border-radius: var(--radius-sm); }
.nav-more > summary:hover { background: rgba(255,255,255,.14); color: #fff; }
.nav-more[open] > summary { background: rgba(255,255,255,.14); color: #fff; }

@media (max-width: 1200px) {
  /* Matches the hamburger breakpoint above, not 900px: between the two the
     nav is already the stacked menu, where a popover would sit off-screen. */
  .nav-more > div a { color: rgba(255,255,255,.78); padding: 9px 14px; }
  .nav-more > div a:hover { background: rgba(255,255,255,.14); color: #fff; }
  .nav-more > div { max-height: none; }
}

/* Section headings inside a long More menu. */
.nav-more-heading {
  color: var(--slate-light);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  margin: 8px 0 2px;
  padding: 0 10px;
  text-transform: uppercase;
}
.nav-more-heading:first-child { margin-top: 2px; }
@media (max-width: 1200px) {
  .nav-more-heading { color: rgba(255,255,255,.55); padding: 0 14px; }
}

/* ── Help link ───────────────────────────────────────────────────────────
   A question mark in the account cluster: reachable from every page without
   spending any of the width the pages compete for. The word only appears on a
   bar wide enough to spare it. */
.topbar-help {
  align-items: center;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px;
  color: rgba(255,255,255,.86);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 700;
  gap: 6px;
  min-height: 30px;
  padding: 3px 10px;
  transition: background .15s, color .15s;
}
.topbar-help:hover { background: rgba(255,255,255,.18); color: #fff; }
.topbar-help.active { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.topbar-help-mark { font-size: .9rem; font-weight: 900; line-height: 1; }
/* A bare question mark leaves someone guessing, so hovering it names the page.
   A bubble rather than the pill growing to fit the word: the bar is measured to
   the pixel at its tightest, and a control that widens on hover would shove the
   account controls out of it. */
.topbar-help { position: relative; }
.topbar-help-label {
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  color: var(--navy);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .01em;
  opacity: 0;
  padding: 4px 9px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  transform: translateY(-3px);
  transition: opacity .14s ease, transform .14s ease;
  white-space: nowrap;
  z-index: 60;
}
.topbar-help:hover .topbar-help-label,
.topbar-help:focus-visible .topbar-help-label { opacity: 1; transform: none; }
@media (max-width: 1200px) {
  /* Stacked menu: it is a row in a list now, so the word sits in the row
     itself. Nothing to hover on a touch screen, so the bubble would never be
     seen. */
  .topbar-help { border: 0; justify-content: flex-start; padding: 9px 14px; width: 100%; }
  .topbar-help-label {
    background: none;
    box-shadow: none;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    opacity: 1;
    padding: 0;
    position: static;
    transform: none;
  }
}

/* Account controls sit hard right, past the pages. */
.topbar-account {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  margin-left: auto;
}
@media (max-width: 1200px) {
  /* Stacked nav: "hard right" means nothing in a column, so they go back to
     sitting in order at the end of the list. */
  .topbar-account { flex-wrap: wrap; margin-left: 0; width: 100%; }
}

/* ── Grouped nav menus ───────────────────────────────────────────────────
   The bar carries named menus (Students, Timetable, School, Admin) rather
   than a flat list ending in "More". Each item is a title over a line of
   description, so the menu answers "what is this page for" without anyone
   having to open it and find out. */
.nav-menu > div {
  left: 0;
  right: auto;
  min-width: 21rem;
  padding: 8px;
}
/* The last menu would otherwise run off the right edge of the bar. */
.nav-menu:last-of-type > div { left: auto; right: 0; }
.nav-menu > div a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 10px;
  white-space: normal;
}
.nav-menu > div a strong {
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.25;
}
.nav-menu > div a small {
  color: var(--slate-light, #6b7a8d);
  font-size: .74rem;
  line-height: 1.3;
}
.nav-menu > div a:hover small { color: var(--navy); }
.nav-menu > div a.active small { color: var(--navy); }
/* A summary is not an anchor, so none of the .topbar nav a rules reached it and
   the menu labels rendered at the browser's default weight beside bold links.
   Match the link box exactly: same font, weight, height and padding. */
.topbar nav .nav-menu > summary {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  display: inline-flex;
  min-height: 34px;
}
.nav-menu > summary.active { background: var(--gold); color: var(--navy); }
.nav-menu > summary.active:hover { background: var(--gold); color: var(--navy); }

@media (max-width: 1200px) {
  /* Stacked menu: the popover is inline, so it may use the full width and the
     descriptions stay legible against the dark bar. */
  .nav-menu > div { min-width: 0; padding: 0; }
  .nav-menu > div a { padding: 8px 14px; }
  .nav-menu > div a small { color: rgba(255,255,255,.55); }
  .nav-menu > div a:hover small,
  .nav-menu > div a.active small { color: #fff; }
  .nav-menu > summary.active { background: rgba(255,255,255,.14); color: #fff; }
}

/* The rail that used to sit down the left is gone; the bar's menus carry
   the same list. .app-shell stays as the page wrapper. */
.app-shell { display: block; }

/* ── Student roster toolbar ──────────────────────────────────────────────
   .module-actions had no rule at all, so the five controls in the roster
   heading (add, export, the year-group export form, JSON) stacked instead of
   sitting in a row. */
.module-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.module-actions .inline-form { align-items: center; display: flex; gap: 6px; margin: 0; }
.module-actions select { max-width: 11rem; }

@media (max-width: 760px) {
  /* Stack the heading so the buttons get the full width rather than being
     squeezed against the title. */
  .panel-heading { flex-direction: column; }
  .module-actions { justify-content: flex-start; width: 100%; }
  .module-actions .inline-form { flex: 1 1 100%; }
  .module-actions select { flex: 1 1 auto; max-width: none; }
}

/* ── Help ────────────────────────────────────────────────────────────────
   One page per account type: what the account is for, the order its work is
   done in, and every page it can open. The page index is generated from the
   nav catalogue, so the three columns below hold whatever that account has
   rather than a fixed set. */
.help-page { display: grid; gap: 26px; max-width: 68rem; }
.help-header h1 { font-size: 1.6rem; letter-spacing: -.02em; margin-top: 2px; }
.help-summary {
  color: var(--slate);
  font-size: 1.02rem;
  line-height: 1.5;
  margin-top: 8px;
  max-width: 46rem;
}
.help-section {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: 20px 22px;
}
.help-section h2 { font-size: 1.12rem; letter-spacing: -.01em; }
.help-note { color: var(--slate-light); font-size: .82rem; margin-top: 4px; }

/* Numbered, because the number is the content: these are steps in an order,
   not a menu of equally good starting points. */
.help-steps { counter-reset: help-step; display: grid; gap: 12px; list-style: none; margin-top: 16px; }
.help-step {
  align-items: center;
  background: var(--navy-pale);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 16px 14px 54px;
  position: relative;
}
.help-step::before {
  align-items: center;
  background: var(--navy);
  border-radius: 999px;
  color: #fff;
  content: counter(help-step);
  counter-increment: help-step;
  display: flex;
  font-size: .82rem;
  font-weight: 800;
  height: 26px;
  justify-content: center;
  left: 16px;
  position: absolute;
  top: 14px;
  width: 26px;
}
.help-step-body { flex: 1 1 22rem; min-width: 0; }
.help-step-body strong { display: block; font-size: .98rem; font-weight: 700; }
.help-step-body p { color: var(--slate); font-size: .88rem; line-height: 1.5; margin-top: 3px; }
.help-step .module-action { flex: 0 0 auto; }

.help-page-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 16px;
}
.help-page-group h3 {
  border-bottom: 1px solid var(--line-soft);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .07em;
  padding-bottom: 6px;
  text-transform: uppercase;
}
.help-group-heading {
  color: var(--slate-light);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin: 10px 0 2px;
  text-transform: uppercase;
}
.help-page-link {
  border-radius: var(--radius-sm);
  display: block;
  margin-top: 2px;
  padding: 7px 9px;
  transition: background .12s;
}
.help-page-link:hover { background: var(--navy-pale); }
.help-page-link strong { display: block; font-size: .9rem; font-weight: 600; }
.help-page-link small { color: var(--slate-light); display: block; font-size: .76rem; line-height: 1.35; }

.help-questions { display: grid; gap: 8px; margin-top: 16px; }
.help-question {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}
.help-question > summary {
  cursor: pointer;
  font-size: .93rem;
  font-weight: 600;
  list-style: none;
}
.help-question > summary::-webkit-details-marker { display: none; }
.help-question > summary::after { content: " +"; color: var(--slate-light); font-weight: 800; }
.help-question[open] > summary::after { content: " \2212"; }
.help-question[open] > summary { margin-bottom: 6px; }
.help-question p { color: var(--slate); font-size: .88rem; line-height: 1.5; }
.help-question .module-action { margin-top: 10px; }
@media (max-width: 640px) {
  .help-section { padding: 16px 14px; }
  .help-step { padding: 14px 14px 14px 48px; }
  .help-step::before { left: 12px; }
}

/* Help card, sitting under everything else on the dashboard. Deliberately
   quieter than the task cards above it - it is the thing you want on your
   first week, not your first hour of the day. */
.today-help-card {
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  display: flex;
  gap: 14px;
  margin-top: 18px;
  padding: 14px 18px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.today-help-card:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.today-help-icon {
  align-items: center;
  background: var(--navy-pale);
  border-radius: 999px;
  color: var(--navy);
  display: flex;
  flex: 0 0 auto;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.today-help-copy { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.today-help-copy strong { font-size: 1rem; font-weight: 700; }
.today-help-copy small { color: var(--slate); font-size: .85rem; line-height: 1.4; }
.today-help-arrow { color: var(--slate-light); flex: 0 0 auto; }
.today-help-card:hover .today-help-arrow { color: var(--navy); }
@media (max-width: 640px) {
  .today-help-card { padding: 12px 14px; }
  .today-help-arrow { display: none; }
}

/* ── Dashboard depth ─────────────────────────────────────────────────────
   The page was white cards on an almost-white gradient: nothing had an edge,
   the pastel icon tiles read as one wash, and the top bar carried the only
   real colour on the screen. Deepen the ground the cards sit on so white
   reads as raised, give the borders and shadows enough weight to separate
   them, and let each task keep a colour of its own.

   Scoped to the dashboard body class - every other page keeps the paler
   ground, which suits a page that is mostly a table. */
.today-dashboard-page {
  background:
    radial-gradient(circle at top left, rgba(0, 58, 112, .18), transparent 38rem),
    radial-gradient(circle at top right, rgba(246, 189, 43, .14), transparent 32rem),
    linear-gradient(180deg, #dde8f4 0%, #e5edf6 44%, #d9e4f1 100%);
}
.today-dashboard-page .today-task-card,
.today-dashboard-page .today-management-card,
.today-dashboard-page .today-help-card {
  border-color: #c3d3e5;
  box-shadow: 0 6px 18px rgba(10, 35, 70, .09);
}
.today-dashboard-page .today-task-card:hover,
.today-dashboard-page .today-management-card:hover,
.today-dashboard-page .today-help-card:hover {
  border-color: var(--today-navy);
  box-shadow: 0 14px 34px rgba(10, 35, 70, .17);
}

/* A strip of the task's own colour, so the four cards are told apart before
   the labels are read. */
.today-dashboard-page .today-task-card { overflow: hidden; position: relative; }
.today-dashboard-page .today-task-card::before {
  background: var(--task-accent, #12365f);
  content: '';
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.today-dashboard-page .today-task-notice,
.today-dashboard-page .today-task-event { --task-accent: #dda419; }
.today-dashboard-page .today-task-setup,
.today-dashboard-page .today-task-timetable,
.today-dashboard-page .today-task-extras { --task-accent: #2c7a57; }
.today-dashboard-page .today-task-movement,
.today-dashboard-page .today-task-duty { --task-accent: #6a51ad; }

/* The tiles were pale enough that all four read as the same grey-blue. Solid
   colour with a white glyph instead: at 44px this is the only place on the
   page with room for colour that is not decoration - it is what tells the
   four cards apart from across a desk. */
.today-dashboard-page .today-task-icon { background: #17457c; color: #fff; }
.today-dashboard-page .today-task-notice .today-task-icon,
.today-dashboard-page .today-task-event .today-task-icon { background: #a8720a; color: #fff; }
.today-dashboard-page .today-task-setup .today-task-icon,
.today-dashboard-page .today-task-timetable .today-task-icon,
.today-dashboard-page .today-task-extras .today-task-icon { background: #23724f; color: #fff; }
.today-dashboard-page .today-task-movement .today-task-icon,
.today-dashboard-page .today-task-duty .today-task-icon { background: #5b429b; color: #fff; }

/* The banner is the one thing on the page that is asking to be acted on, and
   it was fading to white halfway across. */
.today-dashboard-page .today-priority:not(.today-priority-clear) {
  background: linear-gradient(110deg, #fdeec2, #fffaf0 78%);
  border-color: #e8c983;
  box-shadow: 0 8px 24px rgba(120, 88, 10, .13);
}
/* The all-clear state stays green. It reads as "nothing to do here", and
   painting it the same amber as a pending roll would say the opposite. */
.today-dashboard-page .today-priority-clear {
  background: linear-gradient(110deg, #d9f0e4, #f6fbf8 78%);
  border-color: #a4d4ba;
  box-shadow: 0 8px 24px rgba(16, 82, 54, .12);
}
.today-dashboard-page .today-priority-clear .today-priority-icon {
  background: #1d6b4a;
  color: #fff;
}
.today-dashboard-page .today-management-card .material-symbols-rounded,
.today-dashboard-page .today-help-icon { background: #dfeaf7; color: var(--today-navy); }

/* Headings were the same weight of blue as the body text around them. */
.today-dashboard-page .today-section-heading h2 { padding-left: 13px; position: relative; }
.today-dashboard-page .today-section-heading h2::before {
  background: var(--today-gold);
  border-radius: 2px;
  bottom: .16em;
  content: '';
  left: 0;
  position: absolute;
  top: .16em;
  width: 4px;
}

/* ── Attendance charts ────────────────────────────────────────────────────
   Built from markup rather than a charting library: the school network cannot
   reach a CDN, so every chart on the attendance reports is a bar, a stack or
   one inline SVG. Colours come from attendance_charts.py, which is where the
   palette is documented; nothing here hard-codes a series colour.

   The chrome stays quiet on purpose — hairline rules a step off the surface,
   thin marks, and labels in ordinary text colours so a value is never carried
   by its hue alone. */
.viz-figure { margin: 0 0 22px; }
.viz-figure:last-child { margin-bottom: 0; }
.viz-figure > figcaption {
  color: var(--text);
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.viz-note {
  color: var(--slate-light);
  font-size: .78rem;
  margin: 6px 0 0;
}
.viz-visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Hero figure and the tiles beside it. Proportional figures: tabular digits
   make a number like 121 look loose at this size. */
.viz-hero {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 22px;
}
.viz-hero-figure {
  background: var(--navy-pale);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  padding: 16px 20px;
}
.viz-hero-label,
.viz-tile-label {
  color: var(--slate);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.viz-hero-figure strong {
  color: var(--navy);
  font-size: 3rem;
  font-weight: 650;
  line-height: 1.05;
}
.viz-hero-note,
.viz-tile-note { color: var(--slate-light); font-size: .78rem; }
.viz-tiles {
  display: grid;
  flex: 2 1 320px;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.viz-tile {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  padding: 12px 14px;
}
.viz-tile strong { color: var(--text); font-size: 1.5rem; font-weight: 600; line-height: 1.1; }

/* Stacked share bar. The 2px gap is the separator — no border is drawn round
   a segment, which would add ink that is not data. */
.viz-stack {
  border-radius: 5px;
  display: flex;
  gap: 2px;
  height: 18px;
  overflow: visible;
  width: 100%;
}
.viz-stack-seg {
  border-radius: 1px;
  min-width: 3px;
  position: relative;
}
.viz-stack-seg:first-child { border-radius: 4px 1px 1px 4px; }
.viz-stack-seg:last-child { border-radius: 1px 4px 4px 1px; }
.viz-stack-seg:only-child { border-radius: 4px; }

/* A legend is always present once there are two or more series: identity must
   never rest on colour matching alone. */
.viz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.viz-legend li {
  align-items: center;
  color: var(--slate);
  display: flex;
  font-size: .82rem;
  gap: 7px;
}
.viz-legend strong { color: var(--text); font-weight: 600; }
.viz-swatch {
  border-radius: 3px;
  display: inline-block;
  flex: 0 0 auto;
  height: 10px;
  width: 10px;
}

/* Horizontal bars. Capped well under the 24px mark ceiling, with the value at
   the tip so the chart reads without the axis. */
.viz-bars { display: flex; flex-direction: column; gap: 2px; }
.viz-bar-row {
  align-items: center;
  border-radius: var(--radius-sm);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(70px, 116px) 1fr auto;
  min-height: 28px;
  padding: 3px 4px;
  position: relative;
}
.viz-bar-row:hover { background: var(--navy-pale); }
.viz-bar-label {
  color: var(--slate);
  font-size: .82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viz-bar-track {
  background: var(--line-soft);
  border-radius: 4px;
  display: block;
  height: 10px;
  position: relative;
  width: 100%;
}
.viz-bar-fill {
  border-radius: 1px 4px 4px 1px;
  display: block;
  height: 100%;
  min-width: 2px;
}
.viz-bar-target {
  background: var(--slate-light);
  bottom: -3px;
  position: absolute;
  top: -3px;
  width: 1px;
}
.viz-bar-value {
  color: var(--text);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 3.2rem;
  text-align: right;
}
.viz-bar-value.below { color: #b3312f; }

/* Meter for one student: the fill carries the state, the track is a lighter
   step of the same blue so the whole bar reads at a glance. */
.viz-meter { align-items: center; display: flex; gap: 14px; }
.viz-meter-track {
  background: #dbeafe;
  border-radius: 6px;
  display: block;
  flex: 1 1 auto;
  height: 14px;
  position: relative;
}
.viz-meter-fill { border-radius: 6px; display: block; height: 100%; }
.viz-meter-value {
  color: var(--text);
  font-size: 1.4rem;
  font-weight: 650;
  min-width: 4rem;
  text-align: right;
}

/* One cell per marked day. Colour is doubled by the legend and by the table
   below, so nothing here is colour-only. */
.viz-cells { display: flex; flex-wrap: wrap; gap: 3px; }
.viz-cell {
  border-radius: 3px;
  cursor: default;
  display: block;
  height: 18px;
  position: relative;
  width: 18px;
}
.viz-cell:hover { outline: 2px solid var(--navy); outline-offset: 1px; }

/* Trend line. The SVG keeps its aspect ratio and scrolls rather than squashing
   its labels on a narrow screen. */
.viz-scroll { overflow-x: auto; }
/* Capped: the SVG keeps its aspect ratio, so a full-width stretch on a wide
   monitor turns a 720x220 chart into a 400px-tall wall of empty plot. */
.viz-line { display: block; margin: 0 auto; max-width: 960px; min-width: 420px; width: 100%; }
.viz-axis-text { fill: #7c8797; font-size: 11px; }
.viz-point-text { fill: var(--text); font-size: 12px; font-weight: 600; }

/* Hover labels. A tooltip only ever repeats what the table already carries. */
.viz-tip {
  background: var(--navy);
  border-radius: 6px;
  bottom: calc(100% + 8px);
  color: #fff;
  font-size: .76rem;
  left: 50%;
  opacity: 0;
  padding: 5px 9px;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  transition: opacity .12s;
  white-space: nowrap;
  z-index: 5;
}
.viz-stack-seg:hover > .viz-tip,
.viz-bar-row:hover .viz-tip { opacity: 1; }
.viz-bar-row .viz-tip { bottom: calc(100% + 2px); }

.viz-split {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.viz-table-toggle { margin-top: 14px; }
.viz-table-toggle > summary {
  color: var(--navy);
  cursor: pointer;
  font-size: .84rem;
  font-weight: 600;
}
.viz-table-toggle > summary::marker { color: var(--slate-light); }
.viz-table-toggle[open] > summary { margin-bottom: 10px; }

@media (max-width: 640px) {
  .viz-hero-figure strong { font-size: 2.4rem; }
  .viz-bar-row { grid-template-columns: minmax(56px, 90px) 1fr auto; gap: 8px; }
  .viz-tip { white-space: normal; max-width: 60vw; }
}

/* ── Attendance report layout ─────────────────────────────────────────────
   The page has one headline, one trend, one pair of breakdowns and one
   roster. Everything that used to be its own panel of equal weight is now
   ranked: the range is chrome, the rate is the loudest thing on the page,
   and the roster carries its own controls instead of a second table. */

/* Range controls. Not a panel: a bordered card round a filter reads as a
   section with content, which it is not. */
.report-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-bottom: 18px;
}
.report-toolbar .report-range { gap: 10px; margin-left: auto; }
.report-toolbar-note {
  color: var(--slate-light);
  flex: 1 0 100%;
  font-size: .82rem;
  margin: 0;
}
.range-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.range-chip,
.filter-chip {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--slate);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  padding: 6px 13px;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.range-chip:hover,
.filter-chip:hover { background: var(--navy-pale); color: var(--navy); }
.range-chip.active,
.filter-chip.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* Headline band: the rate, its two comparisons, and the split that explains
   it -- one thought, one surface. */
.headline-band {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(240px, 340px) minmax(280px, 1fr);
}
.headline-figure {
  background: var(--navy-pale);
  border: 1px solid var(--line);
  border-left: 3px solid var(--slate-light);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  padding: 20px 22px;
}
.headline-figure strong {
  color: var(--navy);
  font-size: 3.4rem;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1;
}
/* The state is carried by an edge rule and by words in the same breath, never
   by the colour alone. */
.headline-figure.state-at { border-left-color: #2a78d6; }
.headline-figure.state-below { border-left-color: #eda100; }
.headline-figure.state-well-below { border-left-color: #d03b3b; }
.headline-state {
  color: var(--text);
  font-size: .88rem;
  font-weight: 600;
  margin-top: 4px;
}
.headline-change { color: var(--slate); font-size: .82rem; }
.headline-change::before { font-weight: 700; margin-right: 5px; }
.headline-change.dir-up::before { color: #1f6f3f; content: "\2191"; }
.headline-change.dir-down::before { color: #b3312f; content: "\2193"; }
.headline-change.dir-level::before { color: var(--slate-light); content: "\2192"; }
.headline-side { display: flex; flex-direction: column; gap: 16px; }
.headline-side .viz-tiles { flex: 0 0 auto; }
.headline-split { margin: 0; }
.panel-heading-aside {
  color: var(--slate-light);
  font-size: .82rem;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

/* Roster controls sit above the table they act on, in one row. */
.roster-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 14px;
}
.roster-controls .roster-search { margin: 0; }
.roster-controls .roster-search input { min-width: 260px; }
.roster-controls .filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Sortable headers. The button is the whole cell so the hit target matches
   what the header looks like. */
.roster-table th { padding: 0; }
.th-sort {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 10px 12px;
  text-align: inherit;
  width: 100%;
}
.th-sort::after {
  color: var(--slate-light);
  content: "\2195";
  font-size: .78em;
  margin-left: 6px;
  opacity: .45;
}
.roster-table th.sorted-asc .th-sort::after { content: "\2191"; opacity: 1; }
.roster-table th.sorted-desc .th-sort::after { content: "\2193"; opacity: 1; }

/* Rate cell: a short bar under the number, so a long roster can be scanned
   by shape and read by value. */
.rate-cell {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.rate-cell b { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3.4rem; text-align: right; }
.rate-cell .rate-none { color: var(--slate-light); }
.rate-meter {
  background: var(--line-soft);
  border-radius: 3px;
  display: block;
  flex: 1 1 auto;
  height: 6px;
  max-width: 110px;
  min-width: 54px;
  position: relative;
}
.rate-meter-fill { border-radius: 3px; display: block; height: 100%; min-width: 2px; }
.rate-meter-target {
  background: var(--slate-light);
  bottom: -2px;
  position: absolute;
  top: -2px;
  width: 1px;
}

/* ── Whole-school roll ────────────────────────────────────────────────────
   The card keeps its row of controls and gains a second line that only
   appears while the student is unticked. Wrapping rather than restructuring
   keeps the .student-roll-card > .roll-pick rules working for the class list
   editor, which uses the same card without the absence line. */
.roll-mark-card { flex-wrap: wrap; }
/* A class that sets display beats the browser's own [hidden] rule, so both
   the filtered-out card and the absence line have to say it themselves. */
.roll-mark-card[hidden],
.roll-absence[hidden],
.roll-year-group[hidden] { display: none !important; }
.roll-absence {
  align-items: center;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex: 1 0 100%;
  gap: 10px;
  margin-top: 2px;
  padding-top: 8px;
}
.roll-absence input[type="text"] {
  flex: 1 1 auto;
  font-size: .84rem;
  min-height: 34px;
  min-width: 0;
  padding: 5px 9px;
}
.approve-toggle {
  align-items: center;
  color: var(--slate);
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  font-size: .8rem;
  font-weight: 600;
  gap: 6px;
  white-space: nowrap;
}
/* An absence with neither a reason nor an approval is the row the office has
   to chase, so the card says so on its own edge rather than only in a count. */
.roll-mark-card.needs-reason { border-left: 3px solid #eda100; }
.roll-mark-card.present.needs-reason { border-left-color: var(--line); }

.roll-status {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.roll-status-figure {
  background: var(--navy-pale);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex: 1 1 200px;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  padding: 14px 18px;
}
.roll-status-figure strong { color: var(--navy); font-size: 2.2rem; font-weight: 650; line-height: 1.05; }
.roll-status-of { color: var(--slate); font-size: 1rem; font-weight: 500; }
.roll-status .viz-tiles { flex: 3 1 420px; }

.year-heading .link-button {
  background: none;
  border: 0;
  color: var(--navy);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  padding: 0;
}
.year-heading .link-button:hover { text-decoration: underline; }

.reason-missing { color: #b3312f; font-size: .84rem; }
.pill-approved {
  background: var(--navy-pale);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy);
  font-size: .76rem;
  font-weight: 700;
  padding: 3px 9px;
}
.roll-danger-row {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.roll-danger-row span { color: var(--slate-light); font-size: .82rem; }

/* ── Daily notice ─────────────────────────────────────────────────────────
   The notice is read on screen in the staff room and printed for the office,
   so the screen version folds the long attendee lists away and the print
   rules open them again. */
.notice-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}
.notice-summary a {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--slate);
  display: flex;
  flex: 1 1 130px;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  text-decoration: none;
  transition: border-color .12s, background .12s;
}
.notice-summary a:hover { background: var(--navy-pale); border-color: #c5d4e8; }
.notice-summary strong { color: var(--navy); font-size: 1.6rem; font-weight: 650; line-height: 1.05; }
.notice-summary span { font-size: .78rem; font-weight: 600; }
/* The two counts that mean someone has a phone call to make. */
.notice-summary-flag { border-left: 3px solid #eda100; }
.notice-summary-flag strong { color: #b3312f; }

/* The period sits beside the name, not welded to it. */
.notice-inline-list span em {
  color: var(--slate-light);
  font-size: .78rem;
  font-style: normal;
  font-weight: 600;
  margin-left: 6px;
}
.notice-row-flag td:first-child { box-shadow: inset 3px 0 0 #eda100; }
.notice-event-today {
  background: var(--gold-soft, #fdf0cf);
  border-radius: 999px;
  color: #6b4c00;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  margin-left: 8px;
  padding: 3px 8px;
  text-transform: uppercase;
}
.notice-event-card.is-today { border-color: #e3c169; }
.notice-event-students > summary {
  color: var(--navy);
  cursor: pointer;
  font-size: .84rem;
  font-weight: 700;
  padding: 4px 0;
}
.notice-event-students > summary::marker { color: var(--slate-light); }
.notice-event-students[open] > summary { margin-bottom: 8px; }

@media print {
  /* Everything that is chrome on screen and noise on paper. */
  .navbar, .notice-actions, .notice-summary, .module-action, .nav-menu { display: none !important; }
  .notice-page { border: 0; box-shadow: none; padding: 0; }
  .notice-event-students > summary { display: none; }
  .notice-event-students[open] > summary { display: none; }
  .notice-event-card, .notice-section, tr { break-inside: avoid; }
  .notice-table th { background: #e8eef6 !important; color: #16202e !important; }
  body { background: #fff; }
}

@media (max-width: 900px) {
  .headline-band { grid-template-columns: 1fr; }
  .report-toolbar .report-range { margin-left: 0; }
}
@media (max-width: 640px) {
  .headline-figure strong { font-size: 2.6rem; }
  .panel-heading-aside { text-align: left; }
  .rate-cell { justify-content: flex-start; }
}

/* Clinic on the daily roll: present, but out of the room. Amber rather than
   the late toggle's plain look, so a glance down the roll separates "here but
   elsewhere" from "here late". */
.clinic-toggle {
  align-items: center;
  color: #8a5a00;
  display: inline-flex;
  font-size: .82rem;
  font-weight: 600;
  gap: 5px;
}
.clinic-toggle[hidden] { display: none; }
.clinic-toggle input { accent-color: #b98900; margin: 0; }
.student-roll-card:has([data-roll-clinic]:checked) { border-color: var(--gold); }