:root {
  --sharpena-primary: #2563EB;
  --sharpena-primary-dark: #1D4ED8;
  --sharpena-primary-soft: #EFF6FF;
  --sharpena-sky: #38BDF8;
  --sharpena-navy: #0F172A;
  --sharpena-text: #111827;
  --sharpena-muted: #64748B;
  --sharpena-border: rgba(148, 163, 184, 0.22);
  --sharpena-card: rgba(255, 255, 255, 0.72);
  --sharpena-card-solid: #FFFFFF;
  --sharpena-background: #F8FBFF;
  --sharpena-glass: rgba(255, 255, 255, 0.66);
  --sharpena-glass-strong: rgba(255, 255, 255, 0.82);
  --sharpena-success: #16A34A;
  --sharpena-warning: #D97706;
  --sharpena-danger: #DC2626;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-soft: 0 12px 40px rgba(15, 23, 42, 0.08);
  --shadow-card: 0 20px 60px rgba(37, 99, 235, 0.10);
  --shadow-glass: 0 24px 80px rgba(15, 23, 42, 0.12);
  --blur-glass: blur(22px);
  --color-primary: var(--sharpena-primary);
  --color-primary-dark: var(--sharpena-primary-dark);
  --color-primary-soft: var(--sharpena-primary-soft);
  --color-sky: var(--sharpena-sky);
  --color-navy: var(--sharpena-navy);
  --color-text: var(--sharpena-text);
  --color-muted: var(--sharpena-muted);
  --color-border: var(--sharpena-border);
  --color-card: var(--sharpena-card-solid);
  --color-background: var(--sharpena-background);
  --color-success: var(--sharpena-success);
  --color-warning: var(--sharpena-warning);
  --color-danger: var(--sharpena-danger);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --card-padding: 24px;
  --card-padding-lg: 32px;
  --header-gap: 10px;
  --section-gap: 28px;
  --z-base: 1;
  --z-card: 10;
  --z-sticky: 50;
  --z-sidebar: 80;
  --z-topbar: 100;
  --z-dropdown: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
  --sidebar-collapsed-width: 88px;
  --sidebar-expanded-width: 260px;
  --blue: var(--color-primary);
  --blue-strong: var(--color-primary-dark);
  --sky: var(--color-sky);
  --navy: var(--color-navy);
  --bg: var(--color-background);
  --panel: var(--color-card);
  --border: var(--color-border);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
}

/* Grade settings is a dense working surface: primary choices stay visible while audit tools stay disclosed. */
.grade-settings-page {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.grade-settings-context,
.grade-settings-header,
.grade-settings-header-actions,
.grade-settings-context-copy,
.grade-settings-select,
.grade-settings-card-heading,
.grade-settings-card-heading > div,
.grade-settings-layout,
.grade-settings-policy-grid,
.grade-settings-sidebar,
.grade-calculation-cards,
.grade-weight-warning,
.grade-amendment-toggles,
.health-issue,
.family-preview-title,
.family-preview-row,
.family-preview-final,
.grade-confirm-checkbox > span {
  min-width: 0;
}

.grade-settings-context {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.grade-settings-select {
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.04);
  color: var(--ink, #102348);
}

.grade-settings-select > span {
  color: var(--muted, #64748b);
  font-size: 0.78rem;
  font-weight: 700;
}

.grade-settings-select select,
.settings-field select,
.grade-weights-row input {
  min-width: 0;
  width: 100%;
  min-height: 34px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink, #102348);
  font: inherit;
}

.grade-settings-select select,
.settings-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #4d638b 50%), linear-gradient(135deg, #4d638b 50%, transparent 50%);
  background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 24px;
}

.grade-settings-context-copy {
  color: var(--muted, #64748b);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.grade-settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}

.grade-settings-header h1 {
  margin: 4px 0 6px;
}

.grade-settings-header p,
.grade-settings-card-heading p,
.settings-inline-note,
.family-preview-message {
  margin: 0;
  color: var(--muted, #64748b);
  line-height: 1.5;
}

.grade-settings-header-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.grade-settings-header-actions .primary-button,
.grade-settings-header-actions .secondary-button {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  min-height: 42px;
  white-space: nowrap;
}

.grade-settings-header-actions .icon-svg,
.grade-settings-text-link .icon-svg,
.health-issue .icon-svg {
  width: 17px;
  height: 17px;
}

.grade-settings-form {
  min-width: 0;
}

.grade-settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(270px, 0.72fr);
  gap: 18px;
  align-items: start;
}

.grade-settings-main,
.grade-settings-sidebar {
  display: grid;
  gap: 16px;
}

.grade-settings-policy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.grade-settings-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.055);
}

.grade-settings-card-wide {
  grid-column: 1 / -1;
}

.grade-settings-card-heading {
  display: grid;
  gap: 5px;
  margin-bottom: 16px;
}

.grade-settings-card-heading > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.grade-settings-card-heading h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
}

.grade-settings-card-heading p {
  font-size: 0.83rem;
}

.grade-settings-split-heading {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.8fr);
  align-items: start;
  gap: 18px;
}

.step-number {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #e8f0ff;
  color: #155eef;
  font-size: 0.76rem;
  font-weight: 800;
}

.grade-calculation-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.grade-calculation-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 158px;
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 9px;
  background: rgba(248, 250, 252, 0.7);
  color: var(--ink, #102348);
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.grade-calculation-card:hover,
.grade-calculation-card:focus-visible {
  border-color: #4384ff;
  background: #f7faff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11);
}

.grade-calculation-card.is-selected {
  border-color: #2167e8;
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.95), rgba(255, 255, 255, 0.88));
  box-shadow: inset 0 0 0 1px rgba(33, 103, 232, 0.12), 0 8px 20px rgba(33, 103, 232, 0.1);
}

.grade-calculation-card strong {
  font-size: 0.84rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.grade-calculation-card small {
  color: var(--muted, #64748b);
  font-size: 0.74rem;
  line-height: 1.43;
}

.calculation-card-icon,
.panel-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.calculation-card-icon .icon-svg,
.panel-icon .icon-svg {
  width: 20px;
  height: 20px;
}

.calculation-card-icon.blue,
.panel-icon.blue { background: #e8f0ff; color: #155eef; }
.calculation-card-icon.violet,
.panel-icon.violet { background: #f0eaff; color: #7348d8; }
.calculation-card-icon.green,
.panel-icon.green { background: #e6f8ed; color: #0d9b53; }
.calculation-card-icon.gold,
.panel-icon.gold { background: #fff2df; color: #d97706; }

.settings-inline-note {
  margin-top: 12px;
  font-size: 0.78rem;
}

.grade-weights-table {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
}

.grade-weights-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, 0.36fr);
  min-height: 39px;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  color: var(--ink, #102348);
  font-size: 0.82rem;
}

.grade-weights-row:first-child { border-top: 0; }
.grade-weights-head { min-height: 34px; background: #f8fafc; color: #425778; font-size: 0.69rem; font-weight: 800; text-transform: uppercase; }
.grade-weights-row > span:last-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.grade-weights-row input { min-height: 27px; padding: 3px 7px; border: 1px solid rgba(148, 163, 184, 0.32); border-radius: 6px; background: #fff; text-align: right; }
.grade-weights-row b { color: var(--muted, #64748b); font-size: 0.78rem; }

.grade-weight-warning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  background: #fffaf0;
}

.grade-weight-warning strong { font-size: 0.83rem; }
.grade-weight-warning p { margin: 3px 0 0; color: #7a4d0a; font-size: 0.75rem; line-height: 1.4; }
.grade-weight-tools {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 7px;
  padding-left: 42px;
}
.grade-weight-balance-target { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; color: var(--muted, #64748b); font-size: 0.74rem; font-weight: 700; }
.grade-weight-balance-target select { min-height: 34px; max-width: 124px; padding: 5px 25px 5px 8px; border: 1px solid rgba(148, 163, 184, 0.32); border-radius: 6px; background: #fff; color: var(--ink, #102348); font: inherit; }
.grade-weight-warning .secondary-button,
.grade-weight-warning .text-button { min-height: 34px; padding: 7px 9px; font-size: 0.75rem; white-space: nowrap; }
.grade-weight-warning .text-button { color: #155eef; font-weight: 700; text-decoration: none; }

.settings-field {
  display: grid;
  gap: 6px;
  margin-top: 11px;
}

.settings-field > span {
  color: var(--ink, #102348);
  font-size: 0.8rem;
  font-weight: 700;
}

.settings-field select,
.settings-field input,
.settings-field textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--ink, #102348);
  font: inherit;
}

.settings-field textarea { min-height: 82px; resize: vertical; }
.settings-field small { color: var(--muted, #64748b); font-size: 0.74rem; line-height: 1.4; }
.settings-secondary { margin-top: 11px; }
.settings-secondary summary { color: #155eef; cursor: pointer; font-size: 0.77rem; font-weight: 700; }

.settings-toggle {
  display: block;
  margin-top: 10px;
  cursor: pointer;
}

.settings-toggle > span {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.settings-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.settings-toggle i {
  position: relative;
  display: block;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 150ms ease;
}

.settings-toggle i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.23);
  content: "";
  transition: transform 150ms ease;
}

.settings-toggle input:checked + i { background: #2167e8; }
.settings-toggle input:checked + i::after { transform: translateX(14px); }
.settings-toggle input:focus-visible + i { box-shadow: 0 0 0 3px rgba(33, 103, 232, 0.18); }
.settings-toggle b { color: var(--ink, #102348); font-size: 0.8rem; line-height: 1.35; }
.settings-toggle.is-disabled { opacity: 0.52; pointer-events: none; }

.grade-amendment-toggles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.grade-amendment-toggles .settings-toggle {
  min-height: 65px;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: #fbfdff;
}

.grade-settings-confirmation {
  border-color: rgba(33, 103, 232, 0.28);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.91), rgba(255, 255, 255, 0.88));
}

.grade-confirm-checkbox { display: grid; gap: 5px; margin-top: 13px; cursor: pointer; }
.grade-confirm-checkbox > span { display: flex; align-items: center; gap: 9px; }
.grade-confirm-checkbox input { width: 17px; height: 17px; accent-color: #155eef; }
.grade-confirm-checkbox b { font-size: 0.84rem; }
.grade-confirm-checkbox small { color: var(--muted, #64748b); font-size: 0.75rem; line-height: 1.4; }

.gradebook-health-card .grade-settings-card-heading { grid-template-columns: minmax(0, 1fr); align-items: start; }
.gradebook-health-card .status-pill { justify-self: start; }
.gradebook-health-summary { margin: -2px 0 0; color: var(--muted, #64748b); font-size: 0.76rem; line-height: 1.45; overflow-wrap: anywhere; }
.health-issue-list { display: grid; gap: 8px; }
.health-issue { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid rgba(148, 163, 184, 0.17); border-radius: 8px; color: var(--ink, #102348); text-decoration: none; }
.health-issue:hover { border-color: rgba(33, 103, 232, 0.38); background: #fbfdff; }
.health-issue strong, .health-issue small { display: block; overflow-wrap: anywhere; }
.health-issue strong { font-size: 0.79rem; }
.health-issue small { margin-top: 3px; color: var(--muted, #64748b); font-size: 0.72rem; line-height: 1.35; }
.health-issue.warning { background: #fffdf7; }
.health-issue.success { background: #f5fdf8; }
.grade-settings-text-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 13px; color: #155eef; font-size: 0.78rem; font-weight: 700; text-decoration: none; }

.family-preview-surface { overflow: hidden; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 8px; background: linear-gradient(180deg, #fff, #f7faff); }
.family-preview-title { display: flex; justify-content: space-between; gap: 10px; padding: 11px; border-bottom: 1px solid rgba(148, 163, 184, 0.16); }
.family-preview-title strong { font-size: 0.78rem; overflow-wrap: anywhere; }
.family-preview-title small { color: var(--muted, #64748b); font-size: 0.7rem; white-space: nowrap; }
.family-preview-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 9px; padding: 7px 11px; border-bottom: 1px solid rgba(148, 163, 184, 0.12); font-size: 0.74rem; }
.family-preview-row span:nth-child(2) { color: var(--muted, #64748b); }
.family-preview-final { display: flex; justify-content: space-between; gap: 10px; padding: 11px; background: #eaf2ff; color: #123b82; font-size: 0.8rem; }
.family-preview-message { padding: 10px 11px; font-size: 0.73rem; }

.grade-settings-disclosures { display: grid; gap: 10px; }
.grade-settings-disclosures .disclosure-panel { margin: 0; }
.grade-settings-errors { margin: 0; }

.grade-settings-confirm-dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 22px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.grade-settings-confirm-dialog::backdrop { background: rgba(15, 23, 42, 0.35); backdrop-filter: blur(2px); }
.grade-settings-confirm-dialog h2 { margin: 11px 0 7px; font-size: 1.12rem; }
.grade-settings-confirm-dialog p { margin: 0; color: var(--muted, #64748b); line-height: 1.5; }
.grade-settings-confirm-dialog .action-row { margin-top: 20px; justify-content: flex-end; }

@media (max-width: 1180px) {
  .grade-settings-layout { grid-template-columns: minmax(0, 1fr) 290px; }
  .grade-calculation-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-calculation-card { min-height: 130px; }
}

@media (max-width: 980px) {
  .grade-settings-layout { grid-template-columns: minmax(0, 1fr); }
  .grade-settings-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .family-preview-card { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .grade-settings-page { padding-bottom: max(88px, calc(env(safe-area-inset-bottom) + 80px)); }
  .grade-settings-header { display: grid; gap: 14px; }
  .grade-settings-header-actions { justify-content: stretch; }
  .grade-settings-header-actions .primary-button { flex: 1 1 100%; justify-content: center; position: sticky; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: var(--z-sticky, 50); }
  .grade-settings-header-actions .secondary-button { flex: 1 1 calc(50% - 5px); justify-content: center; }
  .grade-settings-context { display: grid; grid-template-columns: 1fr 1fr; }
  .grade-settings-select { grid-template-columns: 1fr; gap: 2px; }
  .grade-settings-context-copy { grid-column: 1 / -1; }
  .grade-settings-card { padding: 16px; }
  .grade-settings-policy-grid, .grade-settings-sidebar, .grade-amendment-toggles { grid-template-columns: minmax(0, 1fr); }
  .family-preview-card { grid-column: auto; }
  .grade-settings-split-heading { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .grade-weight-warning { grid-template-columns: auto minmax(0, 1fr); }
  .grade-weight-tools { padding-left: 0; justify-content: stretch; }
  .grade-weight-tools .secondary-button,
  .grade-weight-tools .text-button,
  .grade-weight-balance-target { flex: 1 1 calc(50% - 4px); justify-content: center; }
}

@media (max-width: 460px) {
  .grade-calculation-cards { grid-template-columns: minmax(0, 1fr); }
  .grade-calculation-card { min-height: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .grade-calculation-card small { grid-column: 2; }
  .grade-weights-row { grid-template-columns: minmax(0, 1fr) minmax(98px, 0.46fr); padding-inline: 9px; }
  .grade-settings-header-actions .secondary-button span { font-size: 0.75rem; }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-height: 100%;
  overflow-x: hidden;
  scroll-padding-top: 104px;
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: clip;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 8%, rgba(56, 189, 248, 0.18), transparent 30%),
    radial-gradient(circle at 82% 10%, rgba(37, 99, 235, 0.12), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--sharpena-background) 44%, #f3f7ff 100%);
  background-attachment: fixed;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

main,
section,
article,
aside,
header,
footer,
nav,
div {
  min-width: 0;
}

h1,
h2,
h3,
h4,
p,
li,
td,
th,
label,
small,
strong,
span,
a {
  overflow-wrap: anywhere;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.74), rgba(239, 246, 255, 0.34)),
    repeating-linear-gradient(90deg, rgba(37, 99, 235, 0.028) 0 1px, transparent 1px 96px);
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.34);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
  padding: 0 28px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.app-shell {
  display: grid;
  grid-template-columns: calc(var(--sidebar-collapsed-width) + 16px) minmax(0, 1fr);
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  overflow-x: clip;
  transition: grid-template-columns 180ms ease;
}

.app-shell:has(.app-sidebar:hover),
.app-shell:has(.app-sidebar:focus-within) {
  grid-template-columns: calc(var(--sidebar-expanded-width) + 16px) minmax(0, 1fr);
}

.app-sidebar {
  position: sticky;
  top: 0;
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: var(--sidebar-collapsed-width);
  height: calc(100vh - 16px);
  margin: 8px 0 8px 8px;
  padding: 18px 12px;
  overflow: visible;
  color: #dbeafe;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sharpena-nav-bg) 76%, #020617),
    color-mix(in srgb, var(--sharpena-nav-bg) 92%, #020617)
  );
  border: 1px solid rgba(219, 234, 254, 0.16);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  transition: width 180ms ease, padding 180ms ease;
}

.app-sidebar:hover,
.app-sidebar:focus-within {
  width: var(--sidebar-expanded-width);
  padding-inline: 14px;
}

.app-sidebar .brand {
  width: 100%;
  justify-content: center;
  color: #ffffff;
}

.app-sidebar:hover .brand,
.app-sidebar:focus-within .brand {
  justify-content: flex-start;
}

.app-sidebar .brand-mark {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 1.15rem;
  background: linear-gradient(135deg, var(--blue), var(--sky));
}

.app-sidebar .school-brand-logo {
  display: block;
  object-fit: cover;
}

.school-login-brand-mark,
.school-login-card-mark {
  padding: 0;
  overflow: hidden;
}

.school-login-brand-mark img,
.school-login-card-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-label,
.nav-label,
.sidebar-school,
.sidebar-footer {
  max-width: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 160ms ease, transform 160ms ease, max-width 180ms ease;
}

.app-sidebar:hover .brand-label,
.app-sidebar:focus-within .brand-label,
.app-sidebar:hover .nav-label,
.app-sidebar:focus-within .nav-label,
.app-sidebar:hover .sidebar-school,
.app-sidebar:focus-within .sidebar-school,
.app-sidebar:hover .sidebar-footer,
.app-sidebar:focus-within .sidebar-footer {
  max-width: 180px;
  opacity: 1;
  transform: translateX(0);
}

.brand-label,
.nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-school,
.sidebar-footer {
  display: grid;
  gap: 4px;
  height: 0;
  padding: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  border-radius: var(--radius-md);
}

.app-sidebar:hover .sidebar-school,
.app-sidebar:focus-within .sidebar-school,
.app-sidebar:hover .sidebar-footer,
.app-sidebar:focus-within .sidebar-footer {
  height: auto;
  padding: 12px;
  border: 1px solid rgba(219, 234, 254, 0.16);
}

.sidebar-school {
  align-items: center;
  grid-template-columns: 32px minmax(0, 1fr);
  border-left: 3px solid var(--sharpena-primary);
}

.school-identity-logo,
.school-identity-mark {
  display: grid;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--sharpena-primary), var(--blue));
  border: 1px solid rgba(219, 234, 254, 0.46);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
  font-size: 0.84rem;
  font-weight: 900;
  object-fit: cover;
}

.school-identity-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sidebar-school .school-identity-copy > span,
.sidebar-footer span {
  color: #93c5fd;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.sidebar-school .school-identity-copy strong,
.sidebar-footer strong {
  overflow: hidden;
  color: #ffffff;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-nav {
  display: grid;
  flex: 1 1 auto;
  gap: 6px;
  min-height: 0;
  min-width: 0;
  overflow-x: visible;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.side-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  color: #dbeafe;
  border-radius: var(--radius-sm);
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.app-sidebar:hover .side-nav-link,
.app-sidebar:focus-within .side-nav-link {
  justify-content: flex-start;
  padding-inline: 12px;
}

.nav-icon {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  color: inherit;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(219, 234, 254, 0.14);
  border-radius: 12px;
}

.icon-svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.side-nav-link:hover,
.side-nav-link.is-active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  text-decoration: none;
}

.side-nav-link.is-active {
  background: color-mix(in srgb, var(--sharpena-primary) 34%, rgba(255, 255, 255, 0.12));
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.28);
}

.side-nav-link.is-active .nav-icon {
  color: #ffffff;
  background: linear-gradient(135deg, var(--sharpena-primary), var(--blue-strong));
  border-color: rgba(147, 197, 253, 0.42);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.22);
}

.side-nav-link:hover {
  transform: translateX(2px);
}

.sidebar-footer {
  margin-top: auto;
}

.sidebar-logout-form {
  flex: 0 0 auto;
  margin: 0;
}

.sidebar-logout-button {
  color: #dbeafe;
}

.app-sidebar:not(:hover):not(:focus-within) .side-nav-link[data-tooltip]::after,
.app-sidebar:not(:hover):not(:focus-within) .sidebar-logout-button[data-tooltip]::after {
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);
  z-index: var(--z-dropdown);
  max-width: min(240px, calc(100vw - 140px));
  padding: 7px 10px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  content: attr(data-tooltip);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
  white-space: nowrap;
}

.app-sidebar:not(:hover):not(:focus-within) .side-nav-link[data-tooltip]:hover::after,
.app-sidebar:not(:hover):not(:focus-within) .side-nav-link[data-tooltip]:focus-visible::after,
.app-sidebar:not(:hover):not(:focus-within) .sidebar-logout-button[data-tooltip]:hover::after,
.app-sidebar:not(:hover):not(:focus-within) .sidebar-logout-button[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.app-main {
  min-width: 0;
  max-width: 100%;
  padding-top: 10px;
  overflow: visible;
}

.utility-bar {
  position: sticky;
  top: 10px;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  min-height: 64px;
  max-width: calc(100% - 20px);
  padding: 10px 24px;
  margin: 0 10px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border);
  border-top: 3px solid var(--sharpena-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: visible;
}

.utility-context,
.utility-actions,
.academic-year-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.utility-actions {
  overflow: visible;
}

.utility-context {
  flex: 0 1 auto;
  min-width: 0;
}

.school-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: min(320px, 34vw);
  color: var(--navy);
}

.school-switcher .school-identity-copy > span,
.academic-year-form label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.school-switcher .school-identity-copy strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--navy);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.school-switcher:hover {
  color: var(--blue);
  text-decoration: none;
}

.academic-year-form {
  flex: 0 1 220px;
  min-height: 40px;
  padding: 0 8px;
  background: rgba(239, 246, 255, 0.78);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.academic-year-form select {
  flex: 1 1 104px;
  max-width: 100%;
  min-width: 0;
  min-height: 30px;
  color: var(--navy);
  background: var(--sharpena-glass-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
}

.academic-year-form button {
  min-height: 30px;
  padding: 0 10px;
  color: #ffffff;
  background: var(--blue);
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.academic-year-form button:hover {
  background: var(--blue-strong);
}

.utility-muted {
  color: var(--muted);
  font-weight: 700;
}

.utility-actions {
  flex: 0 1 auto;
  margin-left: auto;
  min-width: 0;
}

.utility-profile-menu {
  flex: 0 1 auto;
  min-width: 0;
}

.utility-actions a,
.utility-actions .link-button {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  color: var(--navy);
  border-radius: var(--radius-sm);
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.utility-actions a:hover,
.utility-actions .link-button:hover {
  color: var(--blue);
  background: rgba(239, 246, 255, 0.82);
  text-decoration: none;
}

.utility-profile-menu > summary {
  max-width: min(220px, 34vw);
  min-height: 38px;
  padding-inline: 10px;
  color: var(--navy);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.utility-profile-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.utility-profile-menu > summary:hover,
.utility-profile-menu[open] > summary {
  color: var(--blue);
  background: rgba(239, 246, 255, 0.82);
}

.utility-profile-menu .more-menu-panel form {
  margin: 0;
}

.utility-profile-menu .more-menu-panel .link-button {
  width: 100%;
  justify-content: flex-start;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  font-weight: 800;
  white-space: nowrap;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--sky));
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.24);
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  flex: 1;
}

.top-nav a,
.user-menu a,
.link-button {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  color: var(--navy);
  border-radius: var(--radius-sm);
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.top-nav a:hover,
.user-menu a:hover,
.link-button:hover {
  color: var(--blue);
  background: rgba(239, 246, 255, 0.82);
  text-decoration: none;
}

.user-menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.global-search {
  display: flex;
  flex: 1 1 340px;
  align-items: center;
  width: min(520px, 38vw);
  min-width: min(260px, 100%);
  max-width: 100%;
  background: var(--sharpena-glass-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.global-search input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 10px;
  color: var(--text);
  border: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  font: inherit;
  background: transparent;
}

.global-search input:focus {
  outline: 2px solid #bfdbfe;
  outline-offset: 1px;
}

.global-search button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 12px;
  color: #ffffff;
  background: var(--blue);
  border: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.global-search button:hover {
  background: var(--blue-strong);
}

.mobile-bottom-nav {
  display: none;
}

.user-menu form {
  margin: 0;
}

.public-header {
  justify-content: space-between;
  flex-wrap: wrap;
}

.public-nav,
.public-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.public-nav {
  min-width: 0;
}

.public-actions {
  justify-content: flex-end;
  min-width: 0;
}

.public-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  color: var(--navy);
  border-radius: var(--radius-sm);
  font-weight: 700;
}

.public-nav a:hover {
  color: var(--blue);
  background: rgba(239, 246, 255, 0.82);
  text-decoration: none;
}

.page-shell {
  width: min(1240px, calc(100% - 32px));
  margin: 24px auto 64px;
  padding-bottom: env(safe-area-inset-bottom);
  overflow: visible;
}

.primary-button,
.secondary-button,
.ghost-button,
.soft-button,
.danger-button,
button,
select,
input,
textarea,
summary {
  max-width: 100%;
}

.school-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding: 10px 14px;
  color: var(--navy);
  background: var(--sharpena-glass-strong);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.school-strip span {
  color: var(--muted);
  font-size: 0.92rem;
}

.content-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 18px;
}

.content-header.compact {
  margin-top: 28px;
}

.content-header h1,
.content-header h2,
.tool-panel h2,
.item-card h2 {
  margin: 0;
  color: var(--navy);
  line-height: 1.15;
}

.content-header h1 {
  font-size: clamp(1.8rem, 2.4vw, 2.6rem);
}

.content-header h2,
.tool-panel h2,
.item-card h2 {
  font-size: 1.05rem;
}

.content-header p,
.item-card p {
  max-width: 72ch;
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.action-row > * {
  min-width: 0;
}

.primary-button,
.secondary-button,
.ghost-button,
.soft-button,
.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}

.primary-button {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--blue-strong));
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.18);
}

.primary-button:hover {
  background: linear-gradient(135deg, var(--blue-strong), #1e40af);
  transform: translateY(-1px);
  text-decoration: none;
}

.secondary-button {
  color: var(--blue);
  background: var(--sharpena-glass-strong);
  border-color: var(--border);
}

.secondary-button:hover {
  background: rgba(239, 246, 255, 0.92);
  transform: translateY(-1px);
  text-decoration: none;
}

.ghost-button {
  color: var(--navy);
  background: transparent;
  border-color: transparent;
}

.ghost-button:hover {
  color: var(--blue);
  background: rgba(239, 246, 255, 0.82);
  text-decoration: none;
}

.soft-button {
  color: var(--blue-strong);
  background: rgba(239, 246, 255, 0.86);
  border-color: var(--border);
}

.soft-button:hover {
  background: rgba(219, 234, 254, 0.96);
  text-decoration: none;
}

.danger-button {
  color: #ffffff;
  background: var(--danger);
}

.danger-button:hover {
  background: #b91c1c;
  text-decoration: none;
}

.primary-button:disabled,
.secondary-button:disabled,
.ghost-button:disabled,
.soft-button:disabled,
.danger-button:disabled,
.attendance-status-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  box-shadow: none;
  filter: saturate(0.55);
  transform: none;
}

.primary-button:disabled:hover,
.secondary-button:disabled:hover,
.ghost-button:disabled:hover,
.soft-button:disabled:hover,
.danger-button:disabled:hover {
  transform: none;
}

.metric-grid,
.grid-list,
.dashboard-grid,
.setup-grid {
  display: grid;
  gap: 16px;
}

.metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.compact-metrics {
  gap: 12px;
  margin-bottom: 14px;
}

.action-center {
  margin-bottom: 18px;
}

.dashboard-live-pulse {
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) minmax(0, 2.28fr);
  gap: 12px;
  align-items: stretch;
  min-width: 0;
  margin-bottom: 16px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(239, 246, 255, 0.74)),
    var(--sharpena-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid rgba(191, 219, 254, 0.78);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.dashboard-live-pulse-heading,
.dashboard-live-pulse-item {
  min-width: 0;
  padding: 12px;
  border-radius: var(--radius-md);
}

.dashboard-live-pulse-heading {
  display: grid;
  align-content: center;
  gap: 4px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(219, 234, 254, 0.84);
}

.dashboard-live-pulse-heading strong {
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.dashboard-live-pulse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
  min-width: 0;
}

.dashboard-live-pulse-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(226, 232, 240, 0.9);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.dashboard-live-pulse-item:hover {
  border-color: rgba(37, 99, 235, 0.32);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transform: translateY(-1px);
}

.dashboard-live-pulse-item > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.dashboard-live-pulse-item small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.dashboard-live-pulse-item strong {
  color: var(--navy);
  font-size: 1.18rem;
  line-height: 1.1;
}

/* Keep compact operational labels readable instead of squeezing a badge per letter. */
.dashboard-live-pulse-item .status-pill {
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: normal;
}

.dashboard-focus-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 16px;
}

.action-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
}

.action-card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  min-height: 168px;
  padding: 16px;
  background: var(--sharpena-glass-strong);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.action-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.action-card .primary-button {
  justify-self: start;
  align-self: end;
}

.action-card-empty {
  grid-column: 1 / -1;
  min-height: 120px;
}

.live-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.live-status-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  min-height: 184px;
  padding: 16px;
  background: var(--sharpena-glass-strong);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.live-status-card h2 {
  margin: 0;
  color: var(--navy);
  font-size: 0.98rem;
}

.live-status-card strong {
  color: var(--navy);
  font-size: 2rem;
  line-height: 1.05;
}

.live-status-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.live-status-card .secondary-button {
  justify-self: start;
  align-self: end;
}

.grid-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-dashboard-grid,
.compact-grid-list,
.compact-live-status {
  gap: 12px;
  margin-top: 12px;
}

.setup-grid {
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  align-items: start;
}

.metric-card,
.ui-card,
.item-card,
.tool-panel,
.table-wrap,
.auth-panel {
  min-width: 0;
  overflow-wrap: anywhere;
  background: var(--sharpena-glass-strong);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.metric-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  min-height: 138px;
  padding: 18px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.compact-metrics .metric-card {
  min-height: 106px;
  padding: 14px;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.metric-card-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.metric-card span,
.metric-card p {
  min-width: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.metric-card strong {
  min-width: 0;
  color: var(--navy);
  font-size: 2rem;
  letter-spacing: 0;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.metric-card p {
  margin: 0;
  line-height: 1.45;
}

.compact-metrics .metric-card strong {
  font-size: 1.55rem;
}

.dashboard-disclosures {
  display: grid;
  gap: 10px;
}

.section-hub[hidden],
.section-hub-disclosures .disclosure-panel[hidden] {
  display: none;
}

.section-tabs {
  margin-bottom: 16px;
}

.section-hub-disclosures .disclosure-panel {
  margin-bottom: 0;
}

.disclosure-panel {
  display: block;
  margin-bottom: 12px;
}

.disclosure-panel > summary,
.more-menu > summary,
.inline-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 0 14px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
  cursor: pointer;
  list-style: none;
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

.disclosure-panel > summary::-webkit-details-marker,
.more-menu > summary::-webkit-details-marker,
.inline-disclosure > summary::-webkit-details-marker {
  display: none;
}

.disclosure-panel > summary::after,
.inline-disclosure > summary::after {
  color: var(--muted);
  content: "+";
  font-weight: 900;
}

.disclosure-panel[open] > summary::after,
.inline-disclosure[open] > summary::after {
  content: "-";
}

.disclosure-panel > summary span {
  color: var(--navy);
  font-weight: 850;
}

.disclosure-panel > summary small {
  color: var(--muted);
  font-weight: 700;
}

.inline-tools {
  grid-column: 1 / -1;
  margin: 0;
}

.inline-tools > summary {
  min-height: 40px;
}

.more-menu {
  position: relative;
  z-index: var(--z-dropdown);
}

.content-header,
.panel-title,
.action-row,
.dashboard-focus-grid,
.dashboard-grid,
.tool-panel,
.item-card,
.action-card {
  overflow: visible;
}

.content-header .more-menu[open],
.panel-title .more-menu[open],
.action-row .more-menu[open],
.tool-panel .more-menu[open],
.item-card .more-menu[open],
.action-card .more-menu[open] {
  z-index: var(--z-dropdown);
}

.more-menu > summary {
  min-height: 40px;
  padding-inline: 14px;
  color: var(--blue);
  font-weight: 800;
}

.more-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-dropdown);
  display: grid;
  width: max-content;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
  max-height: min(70vh, 480px);
  padding: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

.message-thread-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 148px;
}

.more-menu-panel a,
.mobile-more-popover a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  color: var(--navy);
  border-radius: var(--radius-sm);
  font-weight: 750;
}

.more-menu-panel a:hover,
.mobile-more-popover a:hover {
  color: var(--blue);
  background: rgba(239, 246, 255, 0.92);
  text-decoration: none;
}

.metric-trend {
  color: var(--success);
  font-weight: 800;
}

.metric-trend.warning {
  color: var(--warning);
}

.metric-trend.danger {
  color: var(--danger);
}

.item-card,
.tool-panel,
.ui-card {
  padding: 18px;
}

.compact-item-card {
  display: grid;
  gap: 12px;
}

.workspace-launch-list {
  display: grid;
  gap: 10px;
}

.workspace-launch-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(240px, auto) auto auto;
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 12px;
  background: rgba(248, 251, 255, 0.74);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.workspace-launch-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.workspace-launch-main strong {
  color: var(--navy);
  line-height: 1.25;
}

.workspace-launch-main span,
.workspace-launch-meta {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.workspace-launch-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.mini-action-form {
  margin: 0;
}

.review-focus-panel {
  display: grid;
  gap: 14px;
}

.review-preview-list {
  display: grid;
  gap: 10px;
}

.review-preview-card {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 82px;
  padding: 12px;
  background: rgba(248, 251, 255, 0.74);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.review-preview-card > div:first-child {
  display: grid;
  justify-items: start;
  gap: 4px;
  min-width: 0;
}

.review-preview-card strong {
  max-width: 100%;
  color: var(--navy);
  line-height: 1.25;
}

.review-preview-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.compact-review-list {
  grid-column: 1 / -1;
  margin: 0;
}

.compact-review-list li,
.compact-support-list li {
  align-items: start;
}

.compact-table-wrap {
  margin-top: 12px;
}

.ui-card.glass {
  background: var(--sharpena-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

.ui-card.elevated,
.ui-card.interactive {
  box-shadow: var(--shadow-card);
}

.ui-card.interactive {
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.ui-card.interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glass);
}

.icon-tile {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--blue-strong);
  background: linear-gradient(135deg, #dbeafe, rgba(56, 189, 248, 0.2));
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  font-weight: 900;
}

.icon-tile .icon-svg {
  width: 21px;
  height: 21px;
}

.icon-tile.success {
  color: #166534;
  background: #dcfce7;
}

.icon-tile.warning {
  color: #92400e;
  background: #fef3c7;
}

.icon-tile.danger {
  color: #991b1b;
  background: #fee2e2;
}

.icon-tile.neutral {
  color: #334155;
  background: #e2e8f0;
}

.setup-summary {
  margin-bottom: 16px;
}

.setup-focus-grid .setup-summary {
  margin-bottom: 0;
}

.setup-next-card {
  display: grid;
  gap: 12px;
  align-content: start;
}

.setup-next-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.setup-next-card .primary-button,
.setup-next-card .secondary-button {
  justify-self: start;
}

.progress-track {
  height: 10px;
  margin: 12px 0;
  overflow: hidden;
  background: rgba(219, 234, 254, 0.78);
  border-radius: 999px;
}

.progress-track span {
  display: block;
  height: 100%;
  background: var(--blue);
  border-radius: inherit;
}

.progress-track span.success {
  background: var(--success);
}

.progress-track span.warning {
  background: var(--warning);
}

.progress-track span.danger {
  background: var(--danger);
}

.performance-track-list {
  display: grid;
  gap: 12px;
}

.performance-track-row {
  display: grid;
  gap: 6px;
}

.performance-track-row > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.performance-track-row span,
.performance-track-row strong {
  overflow-wrap: anywhere;
}

.mini-progress-track {
  height: 8px;
  margin: 0;
}

.setup-checklist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.check-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--sharpena-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.check-item.is-complete {
  background: rgba(248, 251, 255, 0.82);
}

.check-marker {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--blue-strong);
  background: rgba(219, 234, 254, 0.82);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
}

.check-item small {
  display: block;
  margin-top: 2px;
}

.setup-form-card {
  padding: 0;
  overflow: hidden;
}

.setup-form-card > summary {
  display: grid;
  gap: 4px;
  min-height: 76px;
  padding: 16px;
  cursor: pointer;
  list-style: none;
}

.setup-form-card > summary::-webkit-details-marker {
  display: none;
}

.setup-form-card > summary span {
  color: var(--navy);
  font-size: 1rem;
  font-weight: 850;
}

.setup-form-card > summary small {
  line-height: 1.4;
}

.setup-form-card > form {
  padding: 0 16px 16px;
}

.setup-form-card > .create-course-wizard {
  padding: 0 16px 16px;
}

.course-wizard-card {
  grid-column: 1 / -1;
}

.create-course-wizard .wizard-heading {
  padding: 14px;
  background:
    radial-gradient(circle at 12% 18%, rgba(96, 165, 250, 0.20), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(34, 211, 238, 0.16), transparent 30%),
    rgba(248, 251, 255, 0.78);
  border: 1px solid rgba(191, 219, 254, 0.58);
  border-radius: var(--radius-md);
}

.create-course-wizard .wizard-stepper {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.create-course-wizard .wizard-step {
  min-width: 0;
  padding: 14px;
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(226, 232, 240, 0.78);
  border-radius: var(--radius-md);
}

.create-course-wizard .wizard-field-grid {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.search-results {
  display: grid;
  gap: 10px;
}

.command-search-shell {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.command-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.command-search-form input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.command-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.command-suggestions a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  color: var(--blue-strong);
  background: rgba(219, 234, 254, 0.68);
  border: 1px solid rgba(147, 197, 253, 0.34);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
}

.command-suggestions a:hover {
  color: #ffffff;
  background: var(--blue);
}

.command-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.command-group-card {
  display: grid;
  gap: 14px;
  align-content: start;
}

.command-group-card .panel-title p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.command-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.command-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  color: var(--text);
  background: rgba(248, 251, 255, 0.78);
  border: 1px solid rgba(219, 234, 254, 0.86);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.command-card:hover {
  background: rgba(239, 246, 255, 0.96);
  text-decoration: none;
}

.command-icon,
.search-result-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--blue);
  background: rgba(219, 234, 254, 0.76);
  border: 1px solid rgba(147, 197, 253, 0.30);
  border-radius: var(--radius-sm);
}

.command-card strong,
.search-result strong {
  display: block;
  min-width: 0;
  color: var(--navy);
  overflow-wrap: anywhere;
}

.command-card small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.search-result-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 2px;
}

.search-result-summary p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.search-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--sharpena-glass-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.search-result p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.portal-student-card {
  display: grid;
  gap: 12px;
}

.portal-focus-panel {
  display: grid;
  gap: 14px;
}

.portal-focus-list {
  display: grid;
  gap: 10px;
}

.portal-focus-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.7fr) minmax(270px, 1.15fr) minmax(180px, 0.8fr) minmax(108px, auto);
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.portal-focus-row .portal-next-item {
  grid-column: 1 / span 3;
}

.portal-focus-row > .secondary-button {
  grid-column: 4;
  grid-row: 2;
  justify-self: end;
  min-width: 108px;
  white-space: nowrap;
}

.portal-focus-student,
.portal-schedule-item,
.portal-next-item {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.portal-focus-student strong,
.portal-schedule-item strong,
.portal-next-item strong {
  color: var(--navy);
  line-height: 1.25;
}

.portal-focus-student span,
.portal-schedule-item span,
.portal-schedule-item small,
.portal-next-item span,
.portal-next-item small {
  color: var(--muted);
}

.portal-card-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.portal-card-metrics span {
  display: grid;
  gap: 2px;
  padding: 10px;
  background: rgba(239, 246, 255, 0.84);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.portal-card-metrics small,
.portal-card-metrics strong {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}

.portal-card-metrics small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-card-metrics strong {
  color: var(--navy);
  font-size: 1.25rem;
  line-height: 1.16;
}

.portal-focus-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.portal-focus-actions a {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 86px;
  padding: 10px;
  color: var(--text);
  background: rgba(239, 246, 255, 0.72);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.portal-focus-actions a:hover {
  color: var(--blue);
  text-decoration: none;
}

.portal-focus-actions strong {
  color: var(--navy);
}

.portal-focus-actions small {
  color: var(--muted);
}

.today-mode-actions {
  margin-top: 10px;
}

.today-mode-actions a {
  min-height: 78px;
}

.marketing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
  gap: 28px;
  align-items: center;
  min-height: calc(100vh - 160px);
  margin: 8px 0 32px;
  padding: 52px 34px 52px;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 18%, rgba(56, 189, 248, 0.20), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(239, 246, 255, 0.66)),
    linear-gradient(120deg, rgba(56, 189, 248, 0.12), rgba(37, 99, 235, 0.08));
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-glass);
}

.hero-copy {
  display: grid;
  gap: 18px;
  align-content: center;
}

.eyebrow {
  justify-self: start;
  padding: 6px 10px;
  color: var(--blue-strong);
  background: rgba(239, 246, 255, 0.78);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
}

.hero-copy h1,
.marketing-section h2,
.visibility-section h2,
.report-preview-section h2,
.final-cta h2 {
  margin: 0;
  color: var(--navy);
  line-height: 1.05;
}

.hero-copy h1 {
  max-width: 780px;
  font-size: clamp(2.7rem, 5.6vw, 5.35rem);
}

.hero-copy p,
.visibility-section p,
.report-preview-section p,
.final-cta p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.6;
}

.hero-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.hero-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-trust-row span::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--blue);
  border-radius: 999px;
}

.dashboard-mockup {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: var(--sharpena-glass-strong);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}

.mockup-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.mockup-topbar span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue), var(--sky));
  border-radius: var(--radius-sm);
  font-weight: 900;
}

.mockup-topbar strong {
  color: var(--navy);
}

.mockup-grid,
.insight-stack,
.value-strip,
.feature-grid,
.role-grid,
.security-grid {
  display: grid;
  gap: 12px;
}

.mockup-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mockup-grid div,
.mockup-panel,
.mockup-list,
.value-strip article,
.feature-card,
.role-card,
.security-grid article,
.report-preview-card {
  background: var(--sharpena-glass-strong);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.mockup-grid div {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.mockup-grid span,
.mockup-list span,
.value-strip span,
.feature-card p,
.role-card p,
.security-grid span {
  color: var(--muted);
}

.mockup-grid strong {
  color: var(--navy);
  font-size: 1.55rem;
}

.mockup-analytics {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1fr;
  gap: 12px;
}

.mockup-ring,
.mockup-bars,
.mockup-events {
  min-height: 150px;
  padding: 14px;
  background: var(--sharpena-glass-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.mockup-ring {
  display: grid;
  place-items: center;
  align-content: center;
  background:
    radial-gradient(circle at center, #ffffff 0 46%, transparent 47%),
    conic-gradient(var(--blue) 0 88%, #dbeafe 88% 100%);
}

.mockup-ring strong {
  color: var(--navy);
  font-size: 1.35rem;
}

.mockup-ring span {
  color: var(--muted);
  font-weight: 800;
}

.mockup-bars {
  display: flex;
  align-items: end;
  gap: 10px;
}

.mockup-bars span {
  flex: 1;
  min-height: 26px;
  background: linear-gradient(180deg, var(--blue), var(--sky));
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.mockup-events {
  display: grid;
  align-content: start;
  gap: 10px;
}

.mockup-events strong {
  color: var(--navy);
}

.mockup-panel {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.mockup-panel strong {
  color: var(--navy);
}

.mockup-list {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.mockup-list span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.mockup-list strong {
  color: var(--navy);
}

.value-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 56px;
}

.value-strip article,
.security-grid article {
  display: grid;
  gap: 6px;
  padding: 16px;
}

.value-strip strong,
.security-grid strong,
.feature-card h3,
.role-card h3 {
  color: var(--navy);
}

.marketing-section,
.visibility-section,
.report-preview-section,
.final-cta {
  margin: 0 0 64px;
}

.section-heading {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin-bottom: 18px;
}

.marketing-section h2,
.visibility-section h2,
.report-preview-section h2,
.final-cta h2 {
  font-size: clamp(2rem, 3vw, 3.2rem);
}

.feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feature-card,
.role-card {
  display: grid;
  gap: 8px;
  padding: 18px;
}

.feature-card h3,
.feature-card p,
.role-card h3,
.role-card p {
  margin: 0;
}

.feature-card,
.role-card {
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.feature-card:hover,
.role-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.visibility-section,
.report-preview-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1fr);
  gap: 22px;
  align-items: center;
  padding: 28px;
  background: var(--sharpena-glass-strong);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.insight-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.consistency-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.consistency-flow article {
  display: grid;
  gap: 6px;
  padding: 16px;
  background: rgba(239, 246, 255, 0.78);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.consistency-flow strong {
  color: var(--navy);
}

.consistency-flow span {
  color: var(--muted);
}

.insight-stack article {
  display: grid;
  gap: 6px;
  padding: 16px;
  background: rgba(239, 246, 255, 0.78);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.insight-stack span {
  color: var(--muted);
  font-size: 0.88rem;
}

.insight-stack strong {
  color: var(--navy);
  font-size: 1.35rem;
}

.role-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.report-preview-card {
  padding: 18px;
}

.report-preview-card h3 {
  margin: 0;
  color: var(--navy);
}

.security-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 30px 34px;
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.96), rgba(56, 189, 248, 0.88)),
    radial-gradient(circle at 86% 42%, rgba(255, 255, 255, 0.24), transparent 30%);
  border: 1px solid rgba(219, 234, 254, 0.8);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-glass);
}

.final-cta h2,
.final-cta p {
  color: #ffffff;
}

.final-cta .secondary-button {
  color: var(--blue-strong);
  border-color: rgba(255, 255, 255, 0.8);
}

.final-cta .ghost-button {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.42);
}

.registration-hero {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 46px 24px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(191, 219, 254, 0.72), transparent 42%),
    rgba(255, 255, 255, 0.62);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

.registration-hero h1 {
  margin: 8px 0;
  color: var(--navy);
  font-size: clamp(2.2rem, 6vw, 4rem);
  letter-spacing: 0;
}

.registration-hero p {
  max-width: 760px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.registration-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
}

.registration-card,
.generated-code-panel {
  display: grid;
  gap: 18px;
  min-height: 100%;
  padding: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(239, 246, 255, 0.70)),
    rgba(255, 255, 255, 0.72);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

.registration-card h2 {
  margin: 6px 0;
  color: var(--navy);
  font-size: 1.55rem;
}

.registration-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.registration-form-disclosure > summary {
  min-height: 44px;
}

.registration-code-form input,
.registration-form input,
.registration-form textarea {
  font-size: 1rem;
}

.success-state {
  border-color: rgba(22, 163, 74, 0.22);
  background: rgba(220, 252, 231, 0.58);
}

.registration-application-shell {
  gap: 18px;
}

.registration-code-display {
  display: block;
  width: 100%;
  padding: 16px;
  color: var(--navy);
  background: rgba(239, 246, 255, 0.86);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: normal;
  word-break: break-word;
}

.compact-field {
  max-width: none;
  min-width: 0;
}

.status-pill.in_progress,
.status-pill.expired {
  color: #92400e;
  background: rgba(254, 243, 199, 0.84);
  border-color: rgba(245, 158, 11, 0.22);
}

.check-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  color: var(--muted);
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.check-list li::before {
  content: "✓";
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #166534;
  background: #dcfce7;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
}

.public-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -32px 0 24px;
  color: var(--muted);
  font-size: 0.86rem;
}

.public-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.tab-row {
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
  overflow-x: auto;
}

.tab-row a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  color: var(--blue-strong);
  background: var(--sharpena-glass-strong);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.tab-row a:hover {
  background: rgba(219, 234, 254, 0.86);
  text-decoration: none;
}

.event-card {
  border-left-width: 5px;
}

.calendar-smart-strip {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}

.calendar-smart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.calendar-smart-card {
  display: grid;
  gap: 10px;
  min-height: 156px;
}

.calendar-smart-card p,
.calendar-smart-strip > .utility-muted {
  margin: 0;
  color: var(--muted);
}

.intervention-smart-strip {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}

.intervention-smart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.intervention-smart-card {
  display: grid;
  gap: 10px;
  min-height: 164px;
}

.intervention-smart-card p,
.intervention-smart-strip > .utility-muted {
  margin: 0;
  color: var(--muted);
}

.announcement-smart-strip {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}

.announcement-smart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.announcement-smart-card {
  display: grid;
  gap: 10px;
  min-height: 168px;
}

.announcement-smart-card p,
.announcement-smart-strip > .utility-muted {
  margin: 0;
  color: var(--muted);
}

.portal-report-card-strip {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}

.portal-report-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.portal-report-card-card {
  display: grid;
  gap: 10px;
  min-height: 180px;
}

.portal-report-card-card p,
.portal-report-card-strip > .utility-muted {
  margin: 0;
  color: var(--muted);
}

.transcript-timeline-strip {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}

.transcript-timeline-preview {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.transcript-timeline-card {
  display: grid;
  gap: 10px;
}

.transcript-timeline-card p,
.transcript-timeline-strip > .utility-muted {
  margin: 0;
  color: var(--muted);
}

.transcript-preview-header {
  align-items: center;
}

.transcript-preview-actions {
  justify-content: flex-end;
}

.transcript-action-menu .more-menu-panel form {
  margin: 0;
}

.transcript-action-menu .link-button {
  display: block;
  width: 100%;
  padding: 9px 10px;
  text-align: left;
}

.transcript-issue-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 86%, var(--accent-soft));
}

.transcript-issue-callout strong,
.transcript-issue-callout p {
  margin: 0;
}

.transcript-issue-callout p {
  margin-top: 3px;
  color: var(--muted);
}

.transcript-paper {
  width: min(100%, 960px);
  margin: 0 auto 20px;
  overflow: hidden;
  border: 1px solid #c7d6e8;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

.transcript-paper-accent {
  display: grid;
  grid-template-columns: 43% 25% 16% 16%;
  height: 9px;
}

.transcript-paper-accent span:nth-child(1) { background: #00a6b4; }
.transcript-paper-accent span:nth-child(2) { background: #f6c400; }
.transcript-paper-accent span:nth-child(3) { background: #111827; }
.transcript-paper-accent span:nth-child(4) { background: var(--sharpena-document-navy); }

.transcript-paper-header {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(210px, 0.72fr);
  gap: 14px;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #bfd3ea;
}

.transcript-school-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border: 2px solid #f6c400;
  border-radius: 50%;
  background: #052a5f;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
}

.transcript-school-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.transcript-school-copy,
.transcript-document-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.transcript-school-copy h2,
.transcript-document-copy strong,
.transcript-paper-section h2,
.transcript-paper-certification h2 {
  margin: 0;
  color: var(--sharpena-document-navy);
}

.transcript-school-copy h2 {
  font-size: 19px;
  line-height: 1.15;
}

.transcript-school-copy p,
.transcript-school-copy small,
.transcript-document-copy small {
  margin: 0;
  overflow-wrap: anywhere;
  color: #475569;
}

.transcript-school-copy p {
  color: #0095a3;
  font-weight: 700;
}

.transcript-document-copy {
  align-items: end;
  text-align: right;
}

.transcript-document-copy strong {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.transcript-student-record {
  display: grid;
  grid-template-columns: 70px repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: center;
  margin: 16px 24px;
  padding: 14px;
  border: 1px solid #bfd3ea;
  border-radius: 6px;
  background: #fbfdff;
}

.transcript-student-avatar {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #0f4c81;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
}

.transcript-student-record > div:not(.transcript-student-avatar) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.transcript-student-record span,
.transcript-student-record small {
  color: #475569;
}

.transcript-student-record strong,
.transcript-student-record small {
  overflow-wrap: anywhere;
}

.transcript-paper-section,
.transcript-paper-certification {
  margin: 0 24px 18px;
}

.transcript-paper-section > h2,
.transcript-paper-certification h2 {
  padding: 8px 12px;
  background: var(--sharpena-document-navy);
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
}

.transcript-year-group {
  margin-top: 12px;
}

.transcript-year-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 2px;
  border-bottom: 1px solid #00a6b4;
  color: #052a5f;
}

.transcript-year-heading strong {
  color: #0095a3;
}

.transcript-year-heading span {
  color: #475569;
  font-size: 12px;
}

.transcript-paper-table {
  margin-top: 4px;
  border: 1px solid #bfd3ea;
}

.transcript-paper-table table {
  min-width: 650px;
  margin: 0;
  color: #0f172a;
}

.transcript-paper-table th {
  background: #eaf6f8;
  color: #052a5f;
  font-size: 11px;
}

.transcript-paper-table td {
  vertical-align: middle;
  font-size: 12px;
}

.transcript-paper-table td small {
  display: block;
  margin-top: 2px;
  color: #64748b;
}

.transcript-letter {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 24px;
  border-radius: 4px;
  background: #d9f7e5;
  color: #0b7a42;
  font-weight: 800;
}

.transcript-paper-empty {
  padding: 18px;
  border: 1px solid #bfd3ea;
  border-top: 0;
  color: #475569;
}

.transcript-paper-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 24px 18px;
  border: 1px solid #bfd3ea;
  background: #f1f8fb;
}

.transcript-paper-summary article {
  display: grid;
  gap: 4px;
  padding: 12px;
  text-align: center;
}

.transcript-paper-summary article + article {
  border-left: 1px solid #d9e6f2;
}

.transcript-paper-summary span {
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.transcript-paper-summary strong {
  color: #052a5f;
  font-size: 17px;
  overflow-wrap: anywhere;
}

.transcript-paper-certification {
  border: 1px solid #bfd3ea;
}

.transcript-paper-certification p {
  margin: 0;
  padding: 12px;
  color: #334155;
}

.transcript-paper-certification > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  padding: 16px 12px 12px;
}

.transcript-paper-certification > div span {
  border-top: 1px solid #0f172a;
  padding-top: 5px;
  color: #334155;
  font-size: 12px;
}

.transcript-certification-signatures > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.transcript-certification-signatures strong,
.transcript-certification-signatures small {
  display: block;
  overflow-wrap: anywhere;
}

.transcript-certification-signatures small {
  color: #64748b;
}

.transcript-paper-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 24px;
  border-top: 1px solid #bfd3ea;
  color: #475569;
  font-size: 11px;
}

.transcript-paper-footer span {
  overflow-wrap: anywhere;
}

.transcript-details {
  margin-top: 16px;
}

@media (max-width: 760px) {
  .transcript-preview-actions {
    justify-content: flex-start;
  }

  .transcript-issue-callout,
  .transcript-paper-header {
    align-items: start;
  }

  .transcript-issue-callout {
    display: grid;
  }

  .transcript-paper-header {
    grid-template-columns: 54px minmax(0, 1fr);
    padding: 16px;
  }

  .transcript-document-copy {
    grid-column: 1 / -1;
    align-items: start;
    text-align: left;
  }

  .transcript-student-record {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    margin: 14px 16px;
  }

  .transcript-student-record > div:nth-child(3),
  .transcript-student-record > div:nth-child(4) {
    grid-column: 1 / -1;
  }

  .transcript-paper-section,
  .transcript-paper-certification,
  .transcript-paper-summary {
    margin-left: 16px;
    margin-right: 16px;
  }

  .transcript-paper-summary {
    grid-template-columns: 1fr;
  }

  .transcript-paper-summary article + article {
    border-top: 1px solid #d9e6f2;
    border-left: 0;
  }

  .transcript-paper-certification > div {
    grid-template-columns: 1fr;
  }

  .transcript-paper-footer {
    display: grid;
    padding: 10px 16px;
  }
}

.transcript-directory-strip {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}

.transcript-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.transcript-directory-card {
  display: grid;
  gap: 10px;
  min-height: 154px;
}

.transcript-directory-card p,
.transcript-directory-strip > .utility-muted {
  margin: 0;
  color: var(--muted);
}

.people-directory-strip {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}

.people-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.people-directory-card {
  display: grid;
  gap: 10px;
  min-height: 154px;
}

.people-directory-card p,
.people-directory-strip > .utility-muted {
  margin: 0;
  color: var(--muted);
}

.student-profile-header {
  align-items: flex-start;
}

.student-profile-hub {
  display: grid;
  gap: 14px;
}

.profile-tabs {
  position: sticky;
  top: 76px;
  z-index: var(--z-sticky);
  align-items: center;
  flex-wrap: wrap;
  padding: 8px;
  padding-bottom: 4px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

.profile-tabs a.is-active,
.profile-section-menu .more-menu-panel a.is-active {
  color: #ffffff;
  background: var(--blue);
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
}

.profile-section-menu > summary {
  min-height: 34px;
  padding: 0 10px;
  color: var(--blue-strong);
  background: var(--sharpena-glass-strong);
  border-radius: 999px;
  font-size: 0.9rem;
}

.profile-section-menu .more-menu-panel {
  right: auto;
  left: 0;
}

.student-overview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.student-profile-event-list li {
  align-items: center;
}

.student-profile-event-list small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.student-schedule-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
}

.student-event-card {
  border-left: 4px solid var(--blue);
}

.student-profile-disclosures {
  margin-top: 16px;
}

.student-profile-disclosures .disclosure-panel[hidden],
.student-profile-hub[hidden] {
  display: none;
}

.parent-contact-row {
  align-items: center;
}

.parent-contact-row > span:first-child {
  min-width: 0;
}

.parent-contact-row small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.compact-action-button {
  min-height: 34px;
  padding-inline: 12px;
  white-space: nowrap;
}

.parent-contact-drawer {
  border-top: 4px solid var(--sharpena-primary);
}

.parent-contact-drawer .drawer-average strong {
  min-width: 0;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.compact-table-wrap {
  margin-top: 12px;
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.table-wrap.wide {
  max-width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

th,
td {
  min-width: 0;
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--border);
}

th {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

tr:last-child td {
  border-bottom: 0;
}

small {
  color: var(--muted);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 24px;
  padding: 0 8px;
  color: var(--blue-strong);
  background: rgba(219, 234, 254, 0.78);
  border: 1px solid rgba(147, 197, 253, 0.28);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: center;
}

.status-pill.success,
.status-pill.active,
.status-pill.approved,
.status-pill.completed,
.status-pill.ready,
.status-pill.published,
.status-pill.excused {
  color: #166534;
  background: rgba(220, 252, 231, 0.82);
  border-color: rgba(22, 163, 74, 0.18);
}

.status-pill.warning,
.status-pill.draft,
.status-pill.pending,
.status-pill.submitted,
.status-pill.medium,
.status-pill.late,
.status-pill.tardy,
.status-pill.missing {
  color: #92400e;
  background: rgba(254, 243, 199, 0.86);
  border-color: rgba(217, 119, 6, 0.18);
}

.status-pill.danger,
.status-pill.revoked,
.status-pill.failed,
.status-pill.high,
.status-pill.absent {
  color: #991b1b;
  background: rgba(254, 226, 226, 0.88);
  border-color: rgba(220, 38, 38, 0.18);
}

.status-pill.muted,
.status-pill.neutral,
.status-pill.low,
.status-pill.archived,
.status-pill.expired,
.status-pill.locked {
  color: var(--muted);
  background: rgba(241, 245, 249, 0.84);
  border-color: rgba(148, 163, 184, 0.20);
}

.school-branding-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.color-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.branding-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
  align-items: start;
  gap: 18px;
}

.identity-policy-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--sharpena-primary) 22%, var(--border));
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.82));
  box-shadow: var(--shadow-soft);
}

.identity-policy-card h2,
.identity-policy-card p {
  margin: 0;
}

.identity-policy-card p {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.5;
}

.identity-policy-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--sharpena-primary);
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 12px;
  background: #ffffff;
}

.identity-policy-icon .icon-svg {
  width: 23px;
  height: 23px;
}

.branding-preview-panel {
  position: sticky;
  top: 88px;
  gap: 16px;
}

.branding-preview-card {
  display: grid;
  gap: 16px;
  padding: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--sharpena-primary) 10%, transparent), transparent 46%),
    rgba(255, 255, 255, 0.78);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

/* The branding preview lives in a deliberately narrow side panel. Keep the
   document title readable without splitting ordinary school names mid-word. */
.branding-preview-card .report-card-letterhead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.branding-preview-card .report-card-brand,
.branding-preview-card .report-card-brand > div {
  min-width: 0;
}

.branding-preview-card .report-card-letterhead h2 {
  font-size: clamp(1.14rem, 1.7vw, 1.5rem);
  overflow-wrap: normal;
  word-break: normal;
}

.branding-preview-card .report-card-status-stack {
  justify-items: start;
  min-width: 0;
  max-width: none;
  text-align: left;
}

.branding-preview-card .report-card-signature-grid {
  grid-template-columns: 1fr;
}

.branding-preview-accent {
  width: 100%;
  height: 5px;
  background: var(--sharpena-primary);
  border-radius: 999px;
}

.branding-logo-mark {
  display: grid;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  place-items: center;
  color: #ffffff;
  background: var(--sharpena-primary);
  border-radius: var(--radius-md);
  font-size: 1.4rem;
  font-weight: 900;
}

.brand-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.brand-mini-preview {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.72);
}

.brand-mini-preview > div {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
}

.brand-mini-preview strong {
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.2;
}

.brand-mini-preview small {
  overflow-wrap: anywhere;
}

.brand-mini-preview small {
  color: var(--muted);
}

.sidebar-mini-preview {
  color: #ffffff;
  background: var(--sharpena-nav-bg);
}

.sidebar-mini-preview small {
  color: rgba(255, 255, 255, 0.72);
}

.brand-mini-mark {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  overflow: hidden;
  place-items: center;
  color: #ffffff;
  background: var(--sharpena-primary);
  border-radius: 9px;
  font-size: 0.82rem;
  font-weight: 900;
}

.brand-mini-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.signature-capture-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(248, 251, 255, 0.72);
}

.signature-capture-panel p {
  margin: 0;
  color: var(--muted);
}

.school-signature-settings {
  display: grid;
  gap: 12px;
}

.signature-identity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.signature-identity-grid label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.signature-identity-grid input {
  width: 100%;
  min-width: 0;
}

@media (max-width: 520px) {
  .signature-identity-grid {
    grid-template-columns: 1fr;
  }
}

.signature-saved-preview {
  display: grid;
  min-height: 58px;
  padding: 8px 12px;
  place-items: center start;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.signature-saved-preview[hidden] {
  display: none;
}

.signature-saved-preview img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 42px;
  object-fit: contain;
}

.signature-canvas {
  display: block;
  width: 100%;
  height: 164px;
  touch-action: none;
  cursor: crosshair;
  background: #ffffff;
  border: 1px dashed color-mix(in srgb, var(--blue) 42%, var(--border));
  border-radius: var(--radius-sm);
}

.signature-capture-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.parent-child-switcher {
  position: relative;
  z-index: var(--z-card);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 0 0 18px;
  padding: 16px;
  overflow: visible;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(239, 246, 255, 0.68)),
    rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(191, 219, 254, 0.74);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(22px);
}

.parent-child-current {
  min-width: 0;
}

.parent-child-current h2 {
  margin: 2px 0 4px;
  overflow-wrap: anywhere;
}

.parent-child-current p {
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.parent-child-menu {
  justify-self: end;
}

.parent-child-menu-panel {
  right: 0;
  min-width: min(640px, calc(100vw - 48px));
  max-width: min(720px, calc(100vw - 48px));
}

.parent-child-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.parent-child-grid form {
  min-width: 0;
}

.parent-child-option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 78px;
  padding: 12px;
  text-align: left;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.parent-child-option:hover,
.parent-child-option.is-active {
  border-color: rgba(37, 99, 235, 0.42);
  background: rgba(219, 234, 254, 0.84);
}

.parent-child-option strong,
.parent-child-option small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.parent-child-option small {
  margin-top: 2px;
  color: var(--muted);
  font-weight: 700;
}

.child-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #ffffff;
  font-weight: 900;
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.24);
}

.portal-recent-grade-meta {
  display: grid;
  gap: 6px;
  justify-items: end;
  min-width: min(220px, 100%);
  text-align: right;
}

.portal-recent-grade-meta .pill-row {
  justify-content: flex-end;
}

.stack-form,
.inline-form {
  display: grid;
  gap: 14px;
}

.inline-form {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  align-items: end;
}

.form-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 12px;
  margin-top: 12px;
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--navy);
  font-weight: 700;
}

.field input,
.field select,
.field textarea,
td input,
td select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 9px 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
td input:focus,
td select:focus {
  outline: 3px solid rgba(37, 99, 235, 0.18);
  border-color: rgba(37, 99, 235, 0.42);
}

.field textarea {
  min-height: 108px;
  resize: vertical;
}

.field-wide {
  grid-column: 1 / -1;
}

.checkbox-field {
  align-content: start;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
}

.checkbox-field span,
.checkbox-field small,
.checkbox-field .field-error {
  grid-column: 1 / -1;
}

.field input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
}

/* Native controls remain keyboard and mobile accessible while matching Sharpena's glass surface. */
.sharpena-control,
.sharpena-select,
.field select,
.inline-form select,
.compact-selector-grid select,
select:not([multiple]) {
  min-height: 44px;
  color: var(--text);
  background-color: rgba(255, 255, 255, 0.92);
  border-color: rgba(148, 163, 184, 0.38);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 1px 2px rgba(15, 23, 42, 0.03);
}

.sharpena-select,
.field select,
.inline-form select,
.compact-selector-grid select,
select:not([multiple]) {
  padding-right: 38px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px;
}

.sharpena-control:hover,
.sharpena-select:hover,
.field select:hover,
select:not([multiple]):hover {
  border-color: rgba(37, 99, 235, 0.36);
}

.sharpena-control:focus,
.sharpena-select:focus,
.field select:focus,
select:not([multiple]):focus {
  outline: 3px solid rgba(37, 99, 235, 0.16);
  border-color: rgba(37, 99, 235, 0.62);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.1);
}

.sharpena-check {
  width: 20px !important;
  min-height: 20px !important;
  accent-color: var(--blue);
}

.sharpena-choice-list {
  accent-color: var(--blue);
}

.wizard-shell {
  display: grid;
  gap: 16px;
  scroll-margin-top: 104px;
}

.compact-wizard-shell {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.wizard-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.wizard-heading h2,
.wizard-step-header h2 {
  margin: 0;
  color: var(--navy);
}

.wizard-heading p,
.wizard-step-header p {
  max-width: 720px;
  margin: 6px 0 0;
  color: var(--muted);
}

.wizard-stepper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 8px;
}

.wizard-stepper-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.wizard-stepper-item:hover,
.wizard-stepper-item.is-active {
  color: var(--blue-strong);
  background: rgba(239, 246, 255, 0.9);
  border-color: rgba(37, 99, 235, 0.24);
  text-decoration: none;
}

.wizard-step-index {
  display: grid;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  place-items: center;
  color: var(--blue-strong);
  background: rgba(219, 234, 254, 0.92);
  border-radius: 999px;
  font-size: 0.78rem;
}

.wizard-step {
  display: none;
  gap: 14px;
  scroll-margin-top: 116px;
}

.wizard-step.is-active {
  display: grid;
}

.wizard-step[hidden] {
  display: none;
}

.wizard-step-header {
  display: grid;
  gap: 4px;
}

.wizard-field-grid {
  margin-top: 0;
}

.wizard-form {
  gap: 16px;
}

.wizard-actions {
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

/* Keep compact desktop forms fully visible; taller screens retain pinned wizard actions. */
@media (min-width: 761px) and (min-height: 900px) {
  .wizard-actions {
    position: sticky;
    bottom: 12px;
  }
}

.wizard-actions [hidden] {
  display: none;
}

.wizard-actions button,
.wizard-actions a {
  min-height: 44px;
}

.wizard-save-message {
  min-height: 20px;
  margin-left: auto;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.wizard-cancel-row {
  margin-top: -4px;
}

.review-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: rgba(248, 251, 255, 0.72);
  border: 1px solid rgba(191, 219, 254, 0.72);
  border-radius: var(--radius-md);
}

.review-card h3,
.review-card p {
  margin: 0;
}

.inline-validation-message {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.progress-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  color: var(--blue-strong);
  background: rgba(219, 234, 254, 0.88);
  border: 1px solid rgba(147, 197, 253, 0.44);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 900;
  white-space: nowrap;
}

.quick-create-drawer {
  position: fixed;
  top: 84px;
  right: 18px;
  z-index: var(--z-drawer);
  display: grid;
  width: min(420px, calc(100vw - 36px));
  max-height: calc(100vh - 112px);
  gap: 14px;
  padding: 18px;
  overflow: auto;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

.quick-create-drawer[hidden] {
  display: none;
}

.field ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.field li {
  display: inline-flex;
  align-items: center;
  margin: 0 12px 8px 0;
  font-weight: 600;
}

.field-error,
.form-errors {
  color: var(--danger);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  padding: 14px;
}

.messages {
  width: min(1240px, calc(100% - 32px));
  margin: 16px auto 0;
  position: relative;
  z-index: var(--z-toast);
}

.message {
  padding: 12px 14px;
  background: var(--sharpena-glass-strong);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.message.error {
  border-left-color: var(--danger);
}

.message.success {
  border-left-color: var(--success);
}

.clean-list {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.compact-list {
  gap: 6px;
}

.panel-footnote {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.calculation-details {
  margin-top: 8px;
  color: var(--text);
}

.calculation-details summary {
  cursor: pointer;
  color: var(--blue-strong);
  font-size: 0.86rem;
  font-weight: 700;
}

.calculation-details p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.calculation-method {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 12px;
  background: rgba(239, 246, 255, 0.72);
}

.calculation-method span,
.calculation-method small {
  color: var(--muted);
  font-size: 0.82rem;
}

.calculation-details .clean-list li {
  align-items: flex-start;
  flex-wrap: wrap;
}

.calculation-details strong {
  color: var(--navy);
}

.action-list,
.activity-feed {
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.action-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(248, 251, 255, 0.78);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.action-list li > *,
.activity-feed li > *,
.clean-list li > *,
.panel-title > * {
  min-width: 0;
}

.action-list p,
.activity-feed p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.activity-feed li {
  padding: 12px;
  background: rgba(248, 251, 255, 0.78);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.dashboard-focus-grid .activity-feed > li {
  align-items: start;
  grid-template-columns: auto minmax(0, 1fr);
}

.dashboard-focus-grid .activity-feed > li > :last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  grid-column: 2;
  justify-self: start;
}

.school-admin-card {
  display: grid;
  gap: 10px;
}

.policy-history-card {
  display: grid;
  gap: 12px;
}

.policy-history-card h3,
.policy-history-card h4 {
  margin: 0;
  color: var(--navy);
}

.policy-history-card .policy-audit-context {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px;
  margin-top: 0;
}

.policy-history-card .policy-audit-context li {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
  min-height: 54px;
  padding: 10px;
  background: rgba(248, 251, 255, 0.72);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.policy-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.policy-compare-grid > div {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: rgba(248, 251, 255, 0.78);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.clean-list li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.clean-list li > span:first-child,
.action-list li > span:first-child,
.activity-feed li > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.academic-audit-list li {
  align-items: flex-start;
}

.academic-audit-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
  max-width: min(280px, 100%);
  text-align: right;
}

.academic-audit-meta small {
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.clean-list li:last-child {
  border-bottom: 0;
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.timeline {
  display: grid;
  gap: 12px;
}

.timeline-item {
  padding: 16px;
  background: var(--sharpena-glass-strong);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.timeline-year-card {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 18px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(239, 246, 255, 0.78)),
    var(--sharpena-glass-strong);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid rgba(191, 219, 254, 0.78);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.timeline-year-card::before {
  position: absolute;
  inset: 20px auto 20px 18px;
  width: 3px;
  content: "";
  background: linear-gradient(180deg, var(--blue), rgba(56, 189, 248, 0.38));
  border-radius: 999px;
}

.timeline-year-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-left: 18px;
  min-width: 0;
}

.timeline-year-header h2,
.timeline-year-header p,
.timeline-term-title h3,
.timeline-term-title p {
  margin: 0;
}

.timeline-year-header h2,
.timeline-term-title h3 {
  color: var(--navy);
  overflow-wrap: anywhere;
}

.timeline-year-header p,
.timeline-term-title p {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.4;
}

.timeline-year-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  padding-left: 18px;
}

.timeline-year-stats > div,
.timeline-mini-stats > span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(219, 234, 254, 0.9);
  border-radius: var(--radius-md);
}

.timeline-year-stats span,
.timeline-mini-stats span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.timeline-year-stats strong,
.timeline-mini-stats strong {
  color: var(--navy);
  font-size: 1.15rem;
}

.timeline-term-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-left: 18px;
}

.timeline-term-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  background: rgba(248, 251, 255, 0.82);
  border: 1px solid rgba(219, 234, 254, 0.9);
  border-radius: var(--radius-lg);
}

.timeline-term-card.is-empty {
  border-style: dashed;
}

.timeline-term-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.timeline-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.timeline-record-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.timeline-record-list li {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: var(--radius-sm);
}

.timeline-record-list strong {
  color: var(--navy);
}

.timeline-class-strip,
.timeline-report-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.timeline-class-strip a,
.timeline-report-strip a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 32px;
  padding: 7px 10px;
  color: var(--blue-strong);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
  background: rgba(219, 234, 254, 0.68);
  border: 1px solid rgba(147, 197, 253, 0.32);
  border-radius: 999px;
}

.timeline-report-strip a {
  justify-content: space-between;
  min-width: 150px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.76);
}

.timeline-final-report {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  margin-left: 18px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(219, 234, 254, 0.72), rgba(255, 255, 255, 0.88)),
    rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(147, 197, 253, 0.42);
  border-radius: var(--radius-lg);
}

.timeline-final-report h3,
.timeline-final-report p {
  margin: 0;
}

.timeline-final-report h3 {
  color: var(--navy);
}

.timeline-final-report p {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.timeline-report-strip.is-final {
  justify-content: flex-end;
}

.empty-state {
  color: var(--muted);
}

.empty-state-card {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  align-content: start;
  min-height: 120px;
  padding: 18px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.72);
  border: 1px dashed rgba(147, 197, 253, 0.72);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.empty-state-inline {
  display: grid;
  gap: 8px;
  color: var(--muted);
}

.empty-state-card strong,
.empty-state-inline strong {
  color: var(--navy);
}

.empty-state-card p,
.empty-state-inline p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.empty-state-card .action-row,
.empty-state-inline .action-row {
  justify-content: flex-start;
}

.clean-list li.empty-list-item {
  display: block;
  padding-bottom: 0;
  border-bottom: 0;
}

.report-card-preview {
  gap: 18px;
  border-top: 4px solid var(--sharpena-document-navy);
}

.report-card-letterhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.report-card-brand {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  gap: 12px;
}

.report-card-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  padding: 6px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.report-card-status-stack {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 160px;
  text-align: right;
}

.report-card-letterhead span,
.report-card-student-grid span,
.report-card-signature-grid span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.report-card-letterhead h2 {
  margin: 4px 0;
  color: var(--navy);
  font-size: 1.5rem;
}

.report-card-letterhead p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
}

.report-card-student-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.report-card-student-grid div,
.report-card-signature-grid div {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: rgba(248, 251, 255, 0.78);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.report-card-student-grid strong,
.report-card-signature-grid strong {
  color: var(--navy);
}

.report-card-signature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.report-card-signature-grid strong {
  min-height: 34px;
  padding-top: 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.24);
}

.report-card-primary-metrics {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.report-card-primary-metrics .metric-card-primary {
  border-color: color-mix(in srgb, var(--sharpena-document-navy) 38%, var(--border));
  background: color-mix(in srgb, var(--sharpena-document-navy) 7%, #ffffff);
}

.report-card-primary-metrics .metric-card small {
  color: var(--muted);
  font-size: 0.78rem;
}

.report-card-parent-signature-panel,
.report-card-signature-confirmation,
.report-card-signature-status {
  margin-top: 16px;
}

.report-card-parent-signature-panel .signature-capture-panel {
  max-width: 760px;
}

.report-card-parent-signature-panel label {
  display: grid;
  gap: 6px;
  color: var(--navy);
  font-weight: 800;
}

.report-card-parent-signature-panel input[type="text"],
.report-card-parent-signature-panel input:not([type]) {
  min-width: 0;
}

.report-card-parent-signature-panel .segmented-control {
  width: fit-content;
  max-width: 100%;
}

.report-card-parent-signature-panel .segmented-control label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.document-signature {
  display: block;
  width: min(160px, 100%);
  height: 38px;
  object-fit: contain;
  object-position: left bottom;
}

.report-card-default-mark {
  display: grid;
  place-items: center;
  color: var(--sharpena-document-navy);
  background: color-mix(in srgb, var(--sharpena-document-navy) 12%, white);
}

.report-card-default-mark svg {
  width: 1.45rem;
  height: 1.45rem;
}

td .empty-state-inline {
  padding: 4px 0;
}

.result-json {
  max-width: 440px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--muted);
  font: 0.8rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.auth-layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(280px, 420px);
  gap: 18px;
  min-height: calc(100vh - 160px);
  place-items: center;
  justify-content: center;
}

.auth-panel {
  width: 100%;
  padding: 28px;
}

.auth-panel h1 {
  margin-top: 0;
}

.auth-panel p {
  color: var(--muted);
  line-height: 1.5;
}

.auth-side-panel {
  align-self: stretch;
  display: grid;
  align-content: center;
  background: rgba(248, 251, 255, 0.72);
}

.compact-field {
  gap: 4px;
}

.compact-field span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.gradebook-header {
  align-items: flex-start;
}

.gradebook-command-bar,
.gradebook-selectors,
.gradebook-toolbar,
.attendance-toolbar {
  display: grid;
  gap: 14px;
  min-width: 0;
  margin-bottom: 16px;
}

.gradebook-selectors,
.gradebook-toolbar,
.attendance-toolbar {
  grid-template-columns: minmax(180px, 240px) minmax(160px, 220px) minmax(280px, 1fr);
  align-items: end;
}

.policy-summary {
  display: grid;
  gap: 6px;
  min-width: 0;
  min-height: 56px;
  padding: 12px;
  background: rgba(239, 246, 255, 0.72);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.policy-summary strong {
  color: var(--navy);
}

.policy-summary span,
.policy-summary small {
  color: var(--muted);
}

.compact-policy {
  min-height: 54px;
}

.inline-disclosure {
  display: grid;
  gap: 8px;
}

.inline-disclosure > summary {
  justify-content: flex-start;
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.78rem;
  box-shadow: none;
}

.gradebook-status-row,
.attendance-save-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.gradebook-filter-group,
.gradebook-selection-tools,
.attendance-quick-actions,
.attendance-counts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.gradebook-selection-tools {
  grid-column: 1 / -1;
}

.compact-toolbar {
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: start;
}

.compact-toolbar .gradebook-save-actions {
  justify-content: flex-end;
}

.inline-tools[open] {
  display: grid;
  gap: 12px;
}

.inline-tools > .gradebook-filter-group,
.inline-tools > .gradebook-selection-tools,
.inline-tools > .attendance-quick-actions,
.inline-tools > .attendance-counts {
  margin-top: 12px;
}

.gradebook-selection-tools input,
.change-reason-field input {
  max-width: 100%;
  min-width: 0;
  min-height: 40px;
}

.change-reason-field {
  grid-column: span 2;
}

.gradebook-save-actions {
  align-self: end;
}

.gradebook-grid-shell {
  max-height: min(72vh, 760px);
  margin-bottom: 18px;
  padding: 0;
  overflow: auto;
}

.gradebook-secondary-section {
  scroll-margin-top: 110px;
}

.gradebook-grid {
  min-width: max(100%, 920px);
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.gradebook-grid th,
.gradebook-grid td {
  background: rgba(255, 255, 255, 0.78);
  min-width: 0;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.gradebook-grid thead th {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky) + 1);
  min-width: 144px;
  max-width: 190px;
  background: rgba(248, 251, 255, 0.94);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

.gradebook-grid .sticky-student-col {
  position: sticky;
  left: 0;
  z-index: calc(var(--z-sticky) + 2);
  min-width: 220px;
  width: 240px;
  max-width: 280px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 10px 0 24px rgba(15, 23, 42, 0.05);
}

.gradebook-grid thead .sticky-student-col {
  z-index: calc(var(--z-sticky) + 3);
}

.gradebook-grid .final-average-col {
  position: sticky;
  right: 0;
  z-index: calc(var(--z-sticky) + 2);
  min-width: 160px;
  width: 168px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: -10px 0 24px rgba(15, 23, 42, 0.05);
}

.gradebook-grid .final-average-col strong {
  display: block;
  color: var(--navy);
  font-size: 1rem;
  line-height: 1.2;
}

.gradebook-grid .final-average-col small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.gradebook-grid .final-average-col.is-live-updated {
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.96));
}

.assessment-header {
  vertical-align: bottom;
}

.assessment-header strong,
.assessment-header span,
.assessment-header small,
.student-cell strong,
.student-cell span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assessment-header strong,
.student-cell strong {
  white-space: nowrap;
}

.assessment-header span,
.student-cell span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: none;
}

.grade-grid-cell {
  width: 148px;
  min-width: 148px;
  max-width: 180px;
  transition: background 160ms ease, box-shadow 160ms ease;
}

.grade-grid-cell.is-selected {
  background: rgba(239, 246, 255, 0.96);
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.34);
}

.grade-grid-cell.is-dirty {
  background: rgba(255, 251, 235, 0.88);
}

.grade-grid-cell.has-error {
  background: rgba(254, 226, 226, 0.76);
  box-shadow: inset 0 0 0 2px rgba(220, 38, 38, 0.24);
}

.grade-grid-cell.has-client-error {
  background: rgba(254, 226, 226, 0.82);
  box-shadow: inset 0 0 0 2px rgba(220, 38, 38, 0.32);
}

.student-cell-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.student-cell-actions > span {
  min-width: 0;
}

.student-quick-view-button {
  max-width: 100%;
  min-height: 30px;
  padding: 0 9px;
  color: var(--blue-strong);
  background: rgba(239, 246, 255, 0.82);
  border: 1px solid rgba(147, 197, 253, 0.34);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.grade-cell-input,
.grade-cell-comment {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 700;
  text-overflow: ellipsis;
}

.grade-cell-input:focus,
.grade-cell-comment:focus {
  outline: 3px solid rgba(37, 99, 235, 0.18);
  border-color: rgba(37, 99, 235, 0.44);
}

.grade-cell-comment {
  display: none;
  margin-top: 6px;
  font-size: 0.84rem;
  font-weight: 600;
}

.grade-grid-cell:focus-within .grade-cell-comment,
.grade-grid-cell.is-dirty .grade-cell-comment,
.grade-grid-cell.has-error .grade-cell-comment {
  display: block;
}

.cell-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.cell-meta small {
  flex-basis: 100%;
  font-size: 0.72rem;
}

.status-pill.warning {
  color: #92400e;
  background: rgba(254, 243, 199, 0.86);
  border-color: rgba(217, 119, 6, 0.18);
}

.student-drawer {
  position: fixed;
  top: 92px;
  right: 24px;
  z-index: var(--z-drawer);
  display: grid;
  gap: 14px;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 124px);
  overflow: auto;
  padding: 18px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(203, 213, 225, 0.74);
  border-radius: var(--radius-lg);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

.student-drawer[hidden] {
  display: none;
}

.profile-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.profile-definition-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 14px 0 0;
  overflow: hidden;
  background: rgba(203, 213, 225, 0.7);
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: var(--radius-md);
}

.profile-definition-list div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  background: rgba(255, 255, 255, 0.68);
}

.profile-definition-list div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.profile-definition-list dt {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.profile-definition-list dd {
  min-width: 0;
  margin: 0;
  color: var(--navy);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.profile-section-actions {
  margin: 0 0 14px;
}

.profile-edit-drawer {
  position: fixed;
  top: 92px;
  right: 24px;
  z-index: var(--z-drawer);
  display: grid;
  gap: 16px;
  width: min(560px, calc(100vw - 40px));
  max-height: calc(100vh - 116px);
  overflow: auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(191, 219, 254, 0.92);
  border-top: 4px solid var(--sharpena-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 34px 84px rgba(15, 23, 42, 0.24);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

.profile-edit-drawer[hidden] {
  display: none;
}

.guardian-context-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 16px;
  color: var(--navy);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(236, 253, 245, 0.78));
  border: 1px solid rgba(191, 219, 254, 0.76);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.guardian-context-card p,
.guardian-link-card p {
  margin: 4px 0 0;
  color: var(--muted);
}

.guardian-context-card .status-pill {
  margin-left: auto;
}

.guardian-context-icon,
.guardian-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #ffffff;
  font-weight: 900;
  background: linear-gradient(135deg, var(--blue), #38bdf8);
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2);
}

.guardian-link-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.guardian-link-card {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) minmax(180px, 0.75fr) minmax(240px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: var(--radius-md);
}

.guardian-link-card-main {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.guardian-link-card h2 {
  margin: 0;
  color: var(--navy);
  font-size: 0.98rem;
}

.guardian-link-card small {
  color: var(--muted);
}

.guardian-link-statuses,
.guardian-link-permissions,
.guardian-link-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.guardian-link-permissions span {
  padding: 4px 8px;
  color: #1e3a8a;
  background: rgba(219, 234, 254, 0.7);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 750;
}

.guardian-link-actions {
  justify-content: flex-end;
}

.guardian-link-actions form {
  margin: 0;
}

.guardian-revoke-menu .more-menu-panel {
  width: min(320px, calc(100vw - 32px));
}

.guardian-revoke-menu .more-menu-panel p {
  margin: 0;
  color: var(--muted);
}

.guardian-link-wizard {
  max-width: 980px;
  margin: 0 auto;
}

.guardian-link-wizard > form {
  display: grid;
  gap: 16px;
}

.guardian-link-review-form {
  display: grid;
  gap: 16px;
}

.guardian-link-review-form > .primary-button {
  justify-self: start;
}

.guardian-permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.guardian-permission-grid .field {
  min-height: 76px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(203, 213, 225, 0.76);
  border-radius: var(--radius-md);
}

.drawer-average {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px;
  background: rgba(239, 246, 255, 0.72);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.drawer-average span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.drawer-average strong {
  color: var(--navy);
  font-size: 1.35rem;
}

.drawer-grade-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.assessment-settings-drawer {
  border-top: 4px solid var(--sharpena-primary);
}

.assessment-settings-drawer .stack-form {
  gap: 12px;
}

.grade-detail-drawer {
  border-top: 4px solid var(--sharpena-primary);
}

.grade-amendment-reason-drawer {
  border-top: 4px solid #f59e0b;
}

.grade-amendment-reason-drawer textarea {
  min-height: 118px;
  resize: vertical;
}

.grade-detail-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(248, 251, 255, 0.78);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.grade-detail-status-row span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.grade-detail-flag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.grade-detail-flag-row .secondary-button[aria-pressed="true"],
.grade-detail-flag-row .secondary-button.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue), var(--blue-strong));
  border-color: rgba(37, 99, 235, 0.42);
}

.report-card-preview-drawer {
  border-top: 4px solid var(--sharpena-primary);
}

.report-card-preview-drawer .clean-list {
  margin-top: 0;
}

.report-card-smart-strip {
  gap: 14px;
  margin-top: 18px;
}

.report-card-smart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.report-card-smart-card {
  display: grid;
  gap: 10px;
}

.report-card-smart-card .action-row {
  gap: 8px;
}

.compact-report-average {
  padding: 10px;
}

.compact-report-average strong {
  font-size: 1.1rem;
}

.today-mode-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.today-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.today-mode-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

.today-mode-card strong,
.today-mode-card span {
  display: block;
}

.today-mode-card > div:first-child span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.compact-overflow-disclosure {
  margin-top: 2px;
}

.compact-overflow-disclosure .clean-list {
  padding: 12px;
  background: rgba(248, 251, 255, 0.68);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.report-readiness-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 18px;
}

.report-readiness-strip h2,
.report-readiness-strip p {
  margin: 0;
}

.report-readiness-strip p {
  color: var(--muted);
}

.attendance-entry {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.attendance-date-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.compact-selector-grid {
  grid-template-columns: minmax(220px, 1.25fr) minmax(170px, 0.75fr) minmax(180px, 0.8fr) auto;
  align-items: end;
}

.attendance-date-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  background: rgba(248, 251, 255, 0.74);
  border: 1px solid rgba(219, 234, 254, 0.84);
  border-radius: var(--radius-md);
}

.attendance-date-result p {
  min-width: min(100%, 280px);
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.attendance-toolbar {
  grid-template-columns: minmax(180px, 260px) minmax(280px, 1fr);
}

.attendance-counts,
.attendance-live-summary,
.attendance-save-actions,
.attendance-correction-reason-field {
  grid-column: 1 / -1;
}

.attendance-live-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.attendance-roster {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.attendance-row {
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(280px, 1fr) minmax(120px, 180px);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  background: rgba(248, 251, 255, 0.78);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: background 160ms ease, box-shadow 160ms ease;
}

.attendance-row.is-dirty {
  background: rgba(255, 251, 235, 0.86);
  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.18);
}

.attendance-student {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.attendance-student-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.attendance-student strong {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendance-student span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendance-current-status {
  justify-self: start;
  margin-top: 4px;
}

.attendance-student-initials {
  display: inline-flex;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 50%;
  color: var(--navy);
  background: rgba(226, 232, 240, 0.8);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
}

.attendance-row[data-status="present"] .attendance-student-initials,
.attendance-current-status.attendance-present {
  color: #166534;
  background: rgba(220, 252, 231, 0.9);
  border-color: rgba(22, 163, 74, 0.24);
}

.attendance-row[data-status="absent"] .attendance-student-initials,
.attendance-row[data-status="sick"] .attendance-student-initials,
.attendance-current-status.attendance-absent {
  color: #991b1b;
  background: rgba(254, 226, 226, 0.92);
  border-color: rgba(220, 38, 38, 0.22);
}

.attendance-row[data-status="tardy"] .attendance-student-initials,
.attendance-current-status.attendance-tardy {
  color: #92400e;
  background: rgba(254, 243, 199, 0.94);
  border-color: rgba(217, 119, 6, 0.22);
}

.attendance-row[data-status="excused_absent"] .attendance-student-initials,
.attendance-current-status.attendance-excused {
  color: #1d4ed8;
  background: rgba(219, 234, 254, 0.92);
  border-color: rgba(37, 99, 235, 0.24);
}

.attendance-row[data-status="early_dismissal"] .attendance-student-initials,
.attendance-current-status.attendance-early {
  color: #7e22ce;
  background: rgba(243, 232, 255, 0.94);
  border-color: rgba(147, 51, 234, 0.22);
}

.attendance-current-status.attendance-neutral,
.attendance-current-status.attendance-unmarked {
  color: var(--muted);
  background: rgba(241, 245, 249, 0.9);
  border-color: rgba(148, 163, 184, 0.22);
}

.attendance-status-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.attendance-correction-actions {
  display: flex;
  justify-content: flex-end;
  align-self: stretch;
  align-items: center;
  min-width: 0;
}

.attendance-correction-button {
  width: auto;
  max-width: 100%;
  min-height: 36px;
  justify-content: center;
}

.attendance-status-button {
  flex: 0 1 auto;
  max-width: 100%;
  min-height: 36px;
  padding: 0 10px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.15;
  cursor: pointer;
  white-space: normal;
}

.attendance-status-button[aria-pressed="true"] {
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue), var(--blue-strong));
  border-color: rgba(37, 99, 235, 0.44);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.16);
}

.attendance-correction-drawer {
  border-top: 4px solid var(--sharpena-primary);
}

.attendance-confirmation-drawer {
  border-top: 4px solid var(--blue);
}

.calendar-month-panel {
  overflow: visible;
}

.calendar-month-navigation {
  flex-wrap: nowrap;
}

.calendar-month-weekdays,
.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-month-weekdays {
  gap: 1px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-align: center;
}

.calendar-month-grid {
  gap: 1px;
  overflow: hidden;
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--border);
}

.calendar-month-day {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 112px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.74);
}

.calendar-month-day > time {
  justify-self: end;
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 900;
}

.calendar-month-day.is-outside-month {
  background: rgba(248, 250, 252, 0.72);
}

.calendar-month-day.is-outside-month > time {
  color: #94a3b8;
}

.calendar-month-day.is-today > time {
  color: #ffffff;
  background: var(--blue);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.2);
}

.calendar-month-events {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.calendar-month-event {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 4px 6px;
  overflow: hidden;
  color: var(--navy);
  background: color-mix(in srgb, var(--event-color) 12%, white);
  border-left: 3px solid var(--event-color);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 3px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.calendar-month-event span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-month-event:hover,
.calendar-month-event:focus-visible {
  color: var(--navy);
  background: color-mix(in srgb, var(--event-color) 20%, white);
  outline: 2px solid color-mix(in srgb, var(--event-color) 45%, white);
  outline-offset: 1px;
}

.calendar-month-schedule-block {
  display: block;
  min-width: 0;
  padding: 4px 6px;
  border: 1px dashed #9cc5ff;
  border-radius: 5px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.25;
}

.calendar-month-schedule-block:hover,
.calendar-month-schedule-block:focus-visible { color: #1e40af; background: #dbeafe; outline: 2px solid #93c5fd; text-decoration: none; }
.calendar-month-schedule-block span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-more-schedule { color: #1d4ed8; }

.calendar-event-detail-drawer {
  border-top: 4px solid var(--event-color, var(--sharpena-primary));
}

.calendar-event-detail-list li {
  display: grid;
  grid-template-columns: minmax(84px, 0.55fr) minmax(0, 1.45fr);
  gap: 12px;
  align-items: start;
}

.calendar-event-detail-list li[hidden] {
  display: none;
}

.calendar-event-detail-list li > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.calendar-event-detail-list li > strong {
  color: var(--navy);
  text-align: right;
}

.calendar-event-detail-description {
  padding: 12px;
  color: var(--text);
  background: rgba(248, 250, 252, 0.82);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  line-height: 1.5;
  white-space: pre-wrap;
}

.calendar-more-events {
  color: var(--blue-strong);
  font-size: 0.72rem;
  font-weight: 800;
}

.attendance-drawer-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.attendance-reason {
  display: grid;
  gap: 4px;
}

.attendance-reason span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.attendance-reason select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
}

.attendance-note input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
}

@media (max-width: 980px) {
  .app-shell {
    display: block;
  }

  .app-sidebar {
    display: none;
  }

  .app-main {
    padding-top: 0;
  }

  .utility-bar {
    position: static;
    align-items: stretch;
    flex-direction: column;
    margin: 0 10px 12px;
    padding: 12px 16px;
  }

  .utility-context,
  .utility-actions,
  .academic-year-form {
    flex-wrap: wrap;
  }

  .utility-context,
  .utility-actions {
    width: 100%;
  }

  .school-switcher {
    flex: 1 1 180px;
    max-width: 100%;
  }

  .academic-year-form {
    flex: 1 1 180px;
  }

  .utility-bar .global-search {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }

  .utility-actions {
    margin-left: 0;
    justify-content: space-between;
  }

  .utility-profile-menu {
    flex: 0 1 min(180px, 48vw);
    margin-left: auto;
  }

  .utility-profile-menu > summary {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }

  .action-list li {
    grid-template-columns: 1fr;
  }

  .action-list .secondary-button {
    justify-self: start;
  }

  .public-header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .public-nav,
  .public-actions {
    flex-wrap: wrap;
  }

  .marketing-hero,
  .visibility-section,
  .report-preview-section,
  .auth-layout,
  .registration-card-grid {
    grid-template-columns: 1fr;
  }

  .marketing-hero {
    min-height: auto;
  }

  .value-strip,
  .feature-grid,
  .role-grid,
  .security-grid,
  .mockup-analytics,
  .consistency-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timeline-year-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .command-group-grid,
  .command-card-grid {
    grid-template-columns: 1fr;
  }

  .timeline-term-grid {
    grid-template-columns: 1fr;
  }

  .app-header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
  }

  .brand,
  .user-menu,
  .global-search {
    width: 100%;
  }

  .global-search {
    min-width: 0;
  }

  .top-nav {
    width: 100%;
  }

  .dashboard-focus-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-live-pulse {
    grid-template-columns: 1fr;
  }

  .dashboard-live-pulse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-focus-row,
  .portal-focus-actions {
    grid-template-columns: 1fr;
  }

  .portal-focus-row .portal-next-item,
  .portal-focus-row > .secondary-button {
    grid-column: auto;
    grid-row: auto;
    justify-self: start;
  }

  .metric-grid,
  .grid-list,
  .action-card-grid,
  .live-status-grid,
  .dashboard-grid,
  .branding-workspace,
  .policy-history-card .policy-audit-context,
  .policy-compare-grid,
  .report-card-student-grid,
  .setup-grid,
  .setup-checklist,
  .inline-form,
  .form-field-grid {
    grid-template-columns: 1fr;
  }

  .content-header,
  .school-strip {
    align-items: stretch;
    flex-direction: column;
  }

  .action-row {
    justify-content: flex-start;
  }

  .action-row .more-menu {
    flex: 1 1 180px;
    width: 100%;
  }

  .action-row .more-menu > summary {
    width: 100%;
    justify-content: center;
  }

  .action-row .more-menu-panel {
    right: auto;
    left: 0;
    width: min(100%, 320px);
    min-width: 0;
    max-width: 100%;
  }

  .registration-card .primary-button,
  .registration-card .secondary-button,
  .registration-card button {
    width: 100%;
  }

  .branding-preview-panel {
    position: static;
  }

  .identity-policy-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .identity-policy-card > .status-pill {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .gradebook-selectors,
  .gradebook-toolbar,
  .compact-selector-grid,
  .attendance-toolbar,
  .review-preview-card,
  .attendance-row,
  .workspace-launch-row {
    grid-template-columns: 1fr;
  }

  .workspace-launch-meta {
    justify-content: flex-start;
  }

  .compact-toolbar .gradebook-save-actions,
  .attendance-correction-actions {
    justify-content: flex-start;
  }

  .gradebook-selection-tools,
  .change-reason-field,
  .attendance-counts,
  .attendance-save-actions,
  .inline-tools {
    grid-column: auto;
  }

  .disclosure-panel > summary {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding-block: 10px;
  }

  .report-readiness-strip {
    align-items: stretch;
    flex-direction: column;
  }

  .student-drawer {
    inset: auto 12px 12px 12px;
    width: auto;
    max-height: min(70vh, 620px);
  }

  .profile-tabs {
    top: 8px;
    border-radius: var(--radius-md);
  }

  .wizard-heading,
  .wizard-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .wizard-stepper {
    display: flex;
    gap: 8px;
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .wizard-stepper-item {
    flex: 0 0 min(220px, 72vw);
    scroll-snap-align: start;
  }

  .wizard-save-message {
    margin-left: 0;
  }

  .quick-create-drawer {
    inset: auto 10px 10px 10px;
    width: auto;
    max-height: min(78vh, 680px);
  }
}

@media (max-width: 760px) {
  .page-shell {
    width: min(100% - 20px, 1240px);
    margin-top: 16px;
    margin-bottom: calc(132px + env(safe-area-inset-bottom));
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
  }

  .parent-child-switcher {
    grid-template-columns: 1fr;
  }

  .calendar-month-panel .panel-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .calendar-month-navigation {
    width: 100%;
    justify-content: flex-end;
    gap: 6px;
  }

  .calendar-month-navigation .secondary-button {
    flex: 0 0 auto;
    width: auto;
  }

  .calendar-month-weekdays {
    margin-top: 12px;
    font-size: 0.66rem;
  }

  .calendar-month-day {
    min-height: 78px;
    padding: 5px;
  }

  .calendar-month-day > time {
    width: 22px;
    height: 22px;
    font-size: 0.68rem;
  }

  .calendar-month-events {
    gap: 3px;
  }

  .calendar-month-event {
    padding: 3px 4px;
    font-size: 0.62rem;
  }

  .calendar-more-events {
    font-size: 0.62rem;
  }

  .parent-child-menu {
    justify-self: stretch;
  }

  .parent-child-menu > summary {
    width: 100%;
    justify-content: center;
  }

  .parent-child-menu-panel {
    right: auto;
    left: 0;
    min-width: 100%;
    max-width: 100%;
  }

  .portal-recent-grade-meta {
    justify-items: start;
    text-align: left;
  }

  .portal-recent-grade-meta .pill-row {
    justify-content: flex-start;
  }

  .hero-copy h1 {
    font-size: 2.45rem;
  }

  .mockup-grid,
  .value-strip,
  .feature-grid,
  .role-grid,
  .security-grid,
  .insight-stack,
  .mockup-analytics,
  .consistency-flow {
    grid-template-columns: 1fr;
  }

  .timeline-year-card {
    padding: 16px;
  }

  .timeline-year-card::before {
    inset: 18px auto 18px 14px;
  }

  .timeline-year-header,
  .timeline-year-stats,
  .timeline-term-grid,
  .timeline-final-report {
    padding-left: 14px;
  }

  .timeline-year-header,
  .timeline-term-title,
  .timeline-final-report {
    display: grid;
  }

  .timeline-final-report {
    margin-left: 14px;
  }

  .timeline-year-stats,
  .timeline-mini-stats,
  .timeline-record-list,
  .dashboard-live-pulse-grid {
    grid-template-columns: 1fr;
  }

  .timeline-class-strip a,
  .timeline-report-strip a {
    width: 100%;
  }

  .command-search-form,
  .search-result,
  .command-card {
    grid-template-columns: 1fr;
  }

  .command-search-form {
    display: grid;
  }

  .command-search-form .primary-button,
  .command-card .status-pill,
  .search-result .status-pill {
    width: 100%;
  }

  .marketing-hero {
    padding: 28px 16px;
  }

  .final-cta,
  .public-footer {
    align-items: stretch;
    flex-direction: column;
    text-align: left;
  }

  .mobile-bottom-nav {
    position: fixed;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 10px;
    z-index: var(--z-topbar);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    padding: 5px;
    background: var(--sharpena-glass-strong);
    backdrop-filter: var(--blur-glass);
    -webkit-backdrop-filter: var(--blur-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
  }

  .mobile-bottom-nav.mobile-nav-portal {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .mobile-bottom-nav a,
  .mobile-more-menu > summary {
    display: grid;
    gap: 1px;
    min-width: 0;
    min-height: 40px;
    place-items: center;
    color: var(--navy);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    font-size: 0.68rem;
    font-weight: 800;
    list-style: none;
  }

  .mobile-bottom-nav .nav-icon {
    width: 24px;
    height: 24px;
    background: rgba(239, 246, 255, 0.72);
    border-radius: 9px;
  }

  .mobile-bottom-nav .icon-svg {
    width: 16px;
    height: 16px;
  }

  .mobile-bottom-nav a > span:last-child,
  .mobile-more-menu > summary > span:last-child {
    display: block;
    max-width: 100%;
    overflow: hidden;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-nav-portal a,
  .mobile-nav-portal .mobile-more-menu > summary {
    font-size: 0.68rem;
  }

  .mobile-more-menu > summary::-webkit-details-marker {
    display: none;
  }

  .mobile-bottom-nav a:hover,
  .mobile-bottom-nav a.is-active,
  .mobile-more-menu[open] > summary {
    color: var(--blue);
    background: rgba(239, 246, 255, 0.86);
    text-decoration: none;
  }

  .mobile-more-menu {
    position: relative;
  }

  .mobile-more-popover {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    z-index: var(--z-dropdown);
    display: grid;
    min-width: min(260px, calc(100vw - 32px));
    padding: 8px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-glass);
    backdrop-filter: var(--blur-glass);
    -webkit-backdrop-filter: var(--blur-glass);
  }

  .mobile-more-popover a {
    justify-content: flex-start;
    justify-items: start;
    min-height: 38px;
    padding: 0 10px;
  }

  .portal-card-metrics {
    grid-template-columns: 1fr;
  }

  .wizard-actions {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 4px;
  }

  .wizard-actions button,
  .wizard-actions a {
    width: 100%;
    min-height: 40px;
    justify-content: center;
  }

  .wizard-actions [data-wizard-next],
  .wizard-actions [data-wizard-submit] {
    grid-column: 1 / -1;
  }

  .wizard-shell {
    gap: 12px;
  }

  .create-course-wizard .wizard-stepper {
    display: flex;
    gap: 8px;
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .create-course-wizard .wizard-stepper-item {
    flex: 0 0 min(220px, 72vw);
    scroll-snap-align: start;
  }

  .create-course-wizard .wizard-field-grid {
    grid-template-columns: 1fr;
  }

  .form-actions,
  .action-row {
    align-items: center;
    justify-content: flex-start;
  }

  .action-row .primary-button,
  .action-row .secondary-button,
  .action-row .ghost-button,
  .action-row .soft-button,
  .action-row .danger-button,
  .action-row button,
  .action-row a {
    flex: 1 1 180px;
    min-height: 42px;
  }

  .calendar-month-navigation .secondary-button {
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
  }

  .content-header .action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .content-header .action-row > *,
  .content-header .action-row .more-menu {
    width: 100%;
  }

  .content-header .action-row > .primary-button,
  .content-header .action-row > .secondary-button,
  .content-header .action-row .more-menu > summary {
    min-height: 44px;
  }

  .content-header .action-row > :only-child,
  .content-header .action-row > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .table-wrap {
    border-radius: var(--radius-md);
  }

  .review-card {
    padding: 12px;
  }
}

@media (max-width: 420px) {
  .mobile-bottom-nav {
    right: 8px;
    bottom: calc(4px + env(safe-area-inset-bottom));
    left: 8px;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-md);
  }

  .mobile-bottom-nav a,
  .mobile-more-menu > summary {
    min-height: 30px;
  }

  .mobile-bottom-nav > a > span:last-child,
  .mobile-bottom-nav > .mobile-more-menu > summary > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .mobile-more-popover a > span:last-child {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .mobile-nav-portal .nav-icon {
    display: grid;
    width: 20px;
    height: 20px;
  }

  .mobile-bottom-nav .nav-icon {
    width: 20px;
    height: 20px;
  }

  .mobile-bottom-nav .icon-svg {
    width: 14px;
    height: 14px;
  }

  .mobile-nav-portal a,
  .mobile-nav-portal .mobile-more-menu > summary {
    min-height: 40px;
    font-size: 0.64rem;
  }

  .report-card-letterhead,
  .report-card-brand {
    display: grid;
  }

  .report-card-status-stack {
    justify-items: start;
    text-align: left;
  }

  .report-card-student-grid,
  .report-card-signature-grid {
    grid-template-columns: 1fr;
  }

  .profile-definition-list,
  .guardian-permission-grid {
    grid-template-columns: 1fr;
  }

  .guardian-context-card {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .guardian-context-card .status-pill {
    margin-left: 0;
  }

  .guardian-link-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .guardian-link-actions {
    justify-content: flex-start;
  }

  .guardian-link-actions > *,
  .guardian-link-actions .secondary-button,
  .guardian-link-actions .more-menu {
    flex: 1 1 150px;
  }

  .profile-edit-drawer {
    inset: 0;
    width: auto;
    max-height: none;
    padding: calc(20px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
    border-width: 4px 0 0;
    border-radius: 0;
  }
}

/* Individual Assignments keeps student-specific work in one gradebook surface. */
.individual-assignment-workspace { min-width: 0; }
.individual-assignment-filters { display: grid; grid-template-columns: minmax(180px, 1.2fr) repeat(2, minmax(150px, 0.8fr)) auto auto; align-items: end; gap: 10px; margin: 0 0 14px; }
.individual-assignment-filters .field { min-width: 0; }
.individual-assignment-bulk { margin-bottom: 14px; }
.individual-assignment-bulk-grid,
.individual-assignment-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.individual-assignment-bulk-grid .field-wide,
.individual-assignment-edit-grid .field-wide { grid-column: 1 / -1; }
.individual-assignment-bulk .field > small { display: block; margin-top: 4px; color: var(--muted); font-size: 0.7rem; line-height: 1.35; }
.individual-assignment-table-wrap { margin: 0; border: 1px solid rgba(203, 213, 225, 0.8); border-radius: 9px; }
.individual-assignment-table { min-width: 920px; }
.individual-assignment-table th:first-child,
.individual-assignment-table td:first-child { width: 42px; text-align: center; }
.individual-assignment-table td { vertical-align: middle; }
.individual-assignment-table td small { display: block; margin-top: 3px; color: var(--muted); font-size: 0.7rem; line-height: 1.35; }
.individual-assignment-table td .status-pill { margin-top: 5px; }
.individual-assignment-select { width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; }
.individual-assignment-mobile-list { display: none; }
.individual-assignment-drawer { width: min(560px, calc(100vw - 32px)); border-top: 4px solid var(--sharpena-primary); }
.individual-assignment-drawer .panel-title p { margin: 3px 0 0; color: var(--muted); font-size: 0.74rem; }
.individual-assignment-current-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px; color: #17345d; background: linear-gradient(135deg, #eff6ff, #f0fdfa); border: 1px solid #bfdbfe; border-radius: 8px; }
.individual-assignment-current-summary > span:first-child { display: grid; gap: 3px; min-width: 0; }
.individual-assignment-current-summary small { color: var(--muted); font-size: 0.72rem; }
.individual-assignment-current-summary > strong { display: grid; color: #047857; font-size: 0.9rem; text-align: right; }
.individual-assignment-history { display: grid; gap: 8px; padding-top: 2px; border-top: 1px solid var(--border); }
.individual-assignment-history .panel-title { margin: 0; }
.individual-assignment-history .panel-title h3 { margin: 2px 0 0; color: var(--navy); font-size: 0.9rem; }
.individual-assignment-history .panel-title > span { color: var(--muted); font-size: 0.72rem; }
.individual-assignment-history details > summary { color: var(--blue); font-size: 0.75rem; font-weight: 800; cursor: pointer; }
.individual-assignment-history details > ul { margin-top: 8px; }
.individual-assignment-drawer-navigation { display: flex; justify-content: space-between; gap: 10px; padding-top: 2px; }
.individual-assignment-drawer-navigation [aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

@media (max-width: 860px) {
  .individual-assignment-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .individual-assignment-filters { grid-template-columns: 1fr; }
  .individual-assignment-filters .secondary-button,
  .individual-assignment-filters .soft-button { width: 100%; justify-content: center; }
  .individual-assignment-bulk-grid,
  .individual-assignment-edit-grid { grid-template-columns: 1fr; }
  .individual-assignment-bulk-grid .field-wide,
  .individual-assignment-edit-grid .field-wide { grid-column: auto; }
  .individual-assignment-table-wrap { display: none; }
  .individual-assignment-mobile-list { display: grid; gap: 10px; }
  .individual-assignment-card { display: grid; gap: 9px; padding: 14px; background: #fff; border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04); }
  .individual-assignment-card > div:not(.action-row) { display: grid; gap: 3px; min-width: 0; }
  .individual-assignment-card small { color: var(--muted); font-size: 0.72rem; }
  .individual-assignment-card .action-row { align-items: stretch; }
  .individual-assignment-card .action-row > * { flex: 1 1 130px; justify-content: center; }
  .individual-assignment-drawer { inset: 8px; width: auto; max-height: calc(100vh - 16px); border-radius: 10px; }
  .individual-assignment-drawer-navigation { align-items: stretch; flex-direction: column; }
  .individual-assignment-drawer-navigation > * { justify-content: center; }
}

/* Override the shared compact horizontal stepper after its responsive rules.
   These short parent-link workflows stay fully visible rather than scrolling
   sideways across the decisions that affect child access. */
@media (min-width: 641px) and (max-width: 980px) {
  .parent-invitation-wizard .wizard-stepper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }

  .parent-link-request-wizard .wizard-stepper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .parent-invitation-wizard .wizard-stepper-item,
  .parent-link-request-wizard .wizard-stepper-item {
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .parent-invitation-wizard .wizard-stepper,
  .parent-link-request-wizard .wizard-stepper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .parent-invitation-wizard .wizard-stepper-item,
  .parent-link-request-wizard .wizard-stepper-item {
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
    white-space: normal;
  }
}

/* Teacher workspace: denser daily controls without changing the shared data model. */
/* Gradebook directory and principal leadership portal. */
.gradebook-landing-header,
.principal-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.gradebook-landing-header h1,
.principal-page-header h1 {
  margin: 4px 0 6px;
  color: #0b1f47;
}

.gradebook-landing-header p,
.principal-page-header p {
  max-width: 700px;
  margin: 0;
  color: #607093;
}

.gradebook-landing-header-actions,
.principal-header-actions {
  flex: 0 0 auto;
}

.gradebook-landing-metric-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 20px;
}

.gradebook-landing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(285px, 360px);
  gap: 20px;
  align-items: start;
}

.gradebook-directory-panel,
.principal-panel {
  min-width: 0;
  overflow: visible;
  border: 1px solid rgba(137, 161, 207, 0.2);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 34px rgba(23, 53, 107, 0.07);
}

.gradebook-landing-side {
  display: grid;
  gap: 20px;
}

.gradebook-landing-side .teacher-panel {
  min-width: 0;
  overflow: visible;
}

.gradebook-landing-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin: 12px 0 16px;
}

.gradebook-landing-filters .compact-field {
  min-width: 150px;
  margin: 0;
}

.gradebook-landing-filters .compact-field span {
  display: block;
  margin-bottom: 5px;
  color: #617094;
  font-size: 0.72rem;
  font-weight: 750;
}

.gradebook-landing-filters select {
  min-height: 38px;
  padding: 7px 31px 7px 11px;
  border-color: #d8e3f5;
  background-color: #fff;
  font-size: 0.82rem;
}

.gradebook-directory-table-wrap,
.principal-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5ecf8;
  border-radius: 10px;
}

.gradebook-directory-table,
.principal-table-wrap table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

.gradebook-directory-table th,
.principal-table-wrap th {
  padding: 10px 12px;
  border-bottom: 1px solid #dce6f4;
  color: #627091;
  background: #f7faff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: uppercase;
}

.gradebook-directory-table td,
.principal-table-wrap td {
  padding: 12px;
  border-bottom: 1px solid #edf1f8;
  color: #1b2c52;
  font-size: 0.82rem;
  vertical-align: middle;
}

.gradebook-directory-table tbody tr:last-child td,
.principal-table-wrap tbody tr:last-child td { border-bottom: 0; }
.gradebook-directory-table tbody tr:hover { background: rgba(237, 246, 255, 0.72); }

.gradebook-class-link {
  display: flex;
  align-items: center;
  min-width: 175px;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.gradebook-class-link strong,
.gradebook-class-link small,
.gradebook-date small { display: block; }
.gradebook-class-link strong { color: #10234c; font-size: 0.84rem; }
.gradebook-class-link small,
.gradebook-date small { margin-top: 2px; color: #72809e; font-size: 0.7rem; }

.gradebook-class-initial {
  display: grid;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(135deg, #1765ee, #2bb7e9);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 850;
}

.gradebook-method-label { color: #536487; font-weight: 650; }
.gradebook-completion { display: grid; grid-template-columns: minmax(64px, 1fr) auto; align-items: center; gap: 8px; min-width: 105px; }
.gradebook-completion i { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: #e6ecf7; }
.gradebook-completion i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1f7aff, #24c59a); }
.gradebook-completion strong { color: #1d4d96; font-size: 0.72rem; }
.gradebook-danger-count { color: #dc3636; font-weight: 800; }
.gradebook-directory-actions { white-space: nowrap; }

.gradebook-row-more { position: relative; display: inline-block; margin-left: 6px; }
.gradebook-row-more summary { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #d9e5f7; border-radius: 8px; color: #395377; cursor: pointer; list-style: none; }
.gradebook-row-more summary::-webkit-details-marker { display: none; }
.gradebook-row-more .more-menu-panel { position: absolute; z-index: var(--z-dropdown, 200); top: calc(100% + 6px); right: 0; width: 215px; padding: 7px; border: 1px solid #d8e4f5; border-radius: 10px; background: #fff; box-shadow: 0 18px 40px rgba(20, 42, 85, 0.18); }
.gradebook-row-more .more-menu-panel a { display: block; padding: 8px 10px; border-radius: 6px; color: #1b3565; font-size: 0.78rem; text-decoration: none; }
.gradebook-row-more .more-menu-panel a:hover { background: #eef5ff; }

.gradebook-landing-details { margin-top: 16px; padding: 12px 14px; border: 1px solid #e0e9f7; border-radius: 9px; background: #f8fbff; color: #617094; }
.gradebook-landing-details summary { cursor: pointer; color: #163d80; font-weight: 780; }
.gradebook-landing-details summary small { margin-left: 10px; color: #667799; font-weight: 500; }
.gradebook-landing-details p { margin: 10px 0 0; font-size: 0.8rem; line-height: 1.55; }

.gradebook-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gradebook-quick-actions a { display: flex; align-items: center; min-height: 76px; gap: 9px; padding: 11px; border: 1px solid #e2eaf7; border-radius: 9px; color: #19366f; text-decoration: none; }
.gradebook-quick-actions a:hover { border-color: #9dc1ff; background: #f8fbff; transform: translateY(-1px); }
.gradebook-quick-actions strong,
.gradebook-quick-actions small { display: block; }
.gradebook-quick-actions strong { font-size: 0.78rem; }
.gradebook-quick-actions small { margin-top: 3px; color: #71809f; font-size: 0.67rem; }

.principal-workspace .app-sidebar {
  background: linear-gradient(180deg, #071c43 0%, #082b5d 55%, #071b3f 100%);
  border-radius: 0 8px 8px 0;
}

.principal-workspace .side-nav-link.is-active,
.principal-workspace .side-nav-more.is-active > summary {
  background: linear-gradient(135deg, #1466ed, #268cff);
  box-shadow: 0 8px 18px rgba(0, 103, 255, 0.26);
}

.principal-tabbar {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 5px;
  margin: 0 0 20px;
  border: 1px solid #dce7f6;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.76);
  scrollbar-width: thin;
}

.principal-tabbar a {
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 7px;
  color: #5b6b8c;
  font-size: 0.76rem;
  font-weight: 720;
  text-decoration: none;
  white-space: nowrap;
}

.principal-tabbar a:hover { background: #edf4ff; color: #1762d7; }
.principal-tabbar a.is-active { background: #e9f2ff; color: #1260dd; box-shadow: inset 0 -2px #1f76ff; }

[data-principal-portal-content] { position: relative; transition: opacity 140ms ease; }
[data-principal-portal-content].is-loading { opacity: 0.58; pointer-events: none; }
[data-principal-portal-content].is-loading::after {
  position: absolute;
  z-index: var(--z-sticky);
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border: 2px solid #c9dcfb;
  border-top-color: #1d70f4;
  border-radius: 50%;
  animation: principal-tab-loading 620ms linear infinite;
  background: rgba(255, 255, 255, 0.9);
  content: "";
}

@keyframes principal-tab-loading { to { transform: rotate(360deg); } }

.principal-metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.principal-metric-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.principal-metric-card {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  min-height: 105px;
  padding: 15px;
  border: 1px solid #e1e9f6;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 22px rgba(28, 53, 102, 0.06);
  color: #163167;
  text-decoration: none;
}

.principal-metric-card:hover { transform: translateY(-2px); border-color: #bdd5ff; }
.principal-metric-icon { display: grid; flex: 0 0 auto; width: 43px; height: 43px; place-items: center; border-radius: 13px; color: #1264ed; background: #e8f1ff; }
.principal-metric-card.tone-green .principal-metric-icon { color: #0baf70; background: #e7fbf1; }
.principal-metric-card.tone-gold .principal-metric-icon { color: #e98b10; background: #fff3df; }
.principal-metric-card.tone-violet .principal-metric-icon { color: #8051db; background: #f0eaff; }
.principal-metric-card.tone-danger .principal-metric-icon { color: #df4242; background: #fff0f1; }
.principal-metric-card span:last-child { min-width: 0; }
.principal-metric-card small,
.principal-metric-card strong,
.principal-metric-card em { display: block; }
.principal-metric-card small { overflow: hidden; color: #617092; font-size: 0.7rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.principal-metric-card strong { margin: 2px 0; color: #0d214e; font-size: 1.42rem; line-height: 1.12; }
.principal-metric-card em { overflow: hidden; color: #6f7e9c; font-size: 0.67rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.principal-dashboard-grid { display: grid; gap: 20px; align-items: start; margin-bottom: 20px; }
.principal-dashboard-grid-top { grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.65fr); }
.principal-dashboard-grid-bottom { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.principal-panel { padding: 16px; border-radius: 11px; }
.principal-panel-heading { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 14px; }
.principal-panel-heading > div { min-width: 0; flex: 1; }
.principal-panel-heading h2 { margin: 1px 0 3px; color: #0e2450; font-size: 0.98rem; }
.principal-panel-heading p { margin: 0; color: #6a7897; font-size: 0.73rem; line-height: 1.4; }
.principal-panel-heading > a { flex: 0 0 auto; color: #1266e7; font-size: 0.7rem; font-weight: 750; text-decoration: none; }

.principal-overview-split { display: grid; grid-template-columns: minmax(210px, 0.85fr) minmax(230px, 1.15fr); gap: 20px; min-height: 205px; }
.principal-donut-section,
.principal-demographic-grid { display: flex; align-items: center; gap: 16px; }
.principal-donut { position: relative; display: grid; flex: 0 0 auto; width: 126px; height: 126px; place-items: center; border-radius: 50%; background: conic-gradient(#19b878 calc(var(--principal-donut, 75) * 1%), #edf1f6 0); }
.principal-donut::before { position: absolute; width: 93px; height: 93px; border-radius: 50%; background: #fff; content: ""; }
.principal-donut strong { position: relative; z-index: 1; color: #102550; font-size: 1.34rem; text-align: center; }
.principal-donut small { display: block; margin-top: 2px; color: #74829d; font-size: 0.59rem; font-weight: 600; }
.principal-demographic-donut { --principal-donut: 68; background: conic-gradient(#1d72f6 0 25%, #28ba83 25% 51%, #f5a526 51% 76%, #8b5ce2 76% 100%); }
.principal-legend-list { display: grid; width: 100%; gap: 9px; margin: 0; padding: 0; list-style: none; }
.principal-legend-list li { display: flex; align-items: center; gap: 7px; color: #4d5e7d; font-size: 0.73rem; }
.principal-legend-list li b { margin-left: auto; color: #152a55; font-size: 0.72rem; }
.principal-legend-list i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #1872f7; }
.principal-legend-list i.is-success { background: #16b879; }.principal-legend-list i.is-danger { background: #ea4d57; }.principal-legend-list i.is-gold { background: #f0a127; }

.principal-line-section { display: grid; align-content: space-between; gap: 10px; padding: 12px 14px 8px; border-left: 1px solid #e5ecf7; }
.principal-line-chart { display: flex; height: 137px; align-items: end; gap: 8px; padding: 10px 0; border-bottom: 1px solid #dce7f5; background: linear-gradient(to bottom, transparent 24%, #f1f5fb 25%, transparent 26%, transparent 49%, #f1f5fb 50%, transparent 51%, transparent 74%, #f1f5fb 75%, transparent 76%); }
.principal-line-chart i { flex: 1; min-width: 7px; border-radius: 5px 5px 1px 1px; background: linear-gradient(180deg, #1d78f9, #4aa7ff); opacity: 0.9; }
.principal-chart-caption { display: flex; justify-content: space-between; gap: 14px; color: #6b7a98; font-size: 0.75rem; }.principal-chart-caption strong { color: #183a76; }

.principal-attention-list,
.principal-activity-list,
.principal-task-list,
.principal-event-list { display: grid; }
.principal-attention-row,
.principal-activity-row,
.principal-task-list > a,
.principal-event-list a { display: flex; min-width: 0; align-items: center; gap: 9px; padding: 10px 4px; border-bottom: 1px solid #e9eff8; color: #1a315e; text-decoration: none; }
.principal-attention-row:last-child,.principal-activity-row:last-child,.principal-task-list > a:last-child,.principal-event-list a:last-child { border-bottom: 0; }
.principal-attention-row span,
.principal-activity-row > span:nth-child(2),
.principal-task-list > a > span,
.principal-event-list a > span { min-width: 0; flex: 1; }
.principal-attention-row strong,.principal-attention-row small,.principal-activity-row strong,.principal-activity-row small,.principal-task-list strong,.principal-task-list small,.principal-event-list strong,.principal-event-list small { display: block; }
.principal-attention-row strong,.principal-activity-row strong,.principal-task-list strong,.principal-event-list strong { overflow: hidden; color: #192d56; font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }.principal-attention-row small,.principal-activity-row small,.principal-task-list small,.principal-event-list small { overflow: hidden; margin-top: 2px; color: #70809e; font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.principal-attention-row > b { display: grid; min-width: 28px; min-height: 22px; place-items: center; padding: 2px 6px; border-radius: 8px; background: #fff0f1; color: #d93d48; font-size: 0.7rem; }.principal-attention-row.tone-success > b { background: #e8fbf2; color: #119967; }.principal-attention-row.tone-primary > b { background: #eaf2ff; color: #1266e7; }
.principal-activity-row .panel-icon { width: 31px; height: 31px; border-radius: 9px; }.principal-activity-row time { flex: 0 0 auto; color: #7584a0; font-size: 0.66rem; white-space: nowrap; }

.principal-bar-chart { display: flex; min-height: 190px; align-items: end; gap: 12px; padding: 12px 4px 2px; border-bottom: 1px solid #e3eaf6; }
.principal-bar-chart > span { display: grid; flex: 1; min-width: 32px; height: 168px; align-items: end; justify-items: center; gap: 5px; }.principal-bar-chart i { display: block; width: min(30px, 70%); min-height: 5px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #3b8bff, #1d61da); }.principal-bar-chart b { color: #1b376b; font-size: 0.7rem; }.principal-bar-chart small { overflow: hidden; max-width: 100%; color: #6d7d9c; font-size: 0.62rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.principal-support-list { display: grid; }.principal-support-list a { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid #e9eff8; color: inherit; text-decoration: none; }.principal-support-list a:last-child { border-bottom: 0; }.principal-support-list span { min-width: 0; flex: 1; }.principal-support-list strong,.principal-support-list small { display:block; }.principal-support-list strong { overflow: hidden; color: #1a315e; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }.principal-support-list small { overflow: hidden; margin-top: 3px; color:#70809e; font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }.principal-support-list b { color:#d84b50; font-size:.78rem; }

.principal-prepared-state { display: flex; max-width: 760px; align-items: flex-start; gap: 16px; margin-inline: auto; padding: 42px; }.principal-prepared-state h2 { margin: 5px 0 8px; color: #102755; }.principal-prepared-state p { max-width: 560px; margin: 0 0 17px; color: #60718f; line-height: 1.6; }
.principal-report-grid,.principal-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }.principal-report-card,.principal-settings-card { display: flex; min-height: 132px; align-items: flex-start; gap: 12px; padding: 17px; border: 1px solid #e1e9f6; border-radius: 10px; background:#fff; box-shadow:0 8px 22px rgba(24,49,96,.05); color:#18386d; text-decoration:none; }.principal-report-card:hover,.principal-settings-card:hover { border-color:#aacbff; transform:translateY(-2px); }.principal-report-card strong,.principal-report-card small,.principal-settings-card strong,.principal-settings-card small { display:block; }.principal-report-card strong,.principal-settings-card strong { color:#163269; font-size:.86rem; }.principal-report-card small,.principal-settings-card small { margin-top:5px; color:#6e7d9a; font-size:.72rem; line-height:1.45; }.principal-settings-card > span:nth-child(2) { min-width:0; flex:1; }.principal-settings-arrow { align-self:center; color:#1d70f4; font-size:1.3rem; }
.principal-resource-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.principal-resource-grid a { display:flex; min-width:0; align-items:center; gap:10px; padding:12px; border:1px solid #e4ebf6; border-radius:9px; color:#1b376d; text-decoration:none; }.principal-resource-grid a:hover{background:#f8fbff;border-color:#afd0ff}.principal-resource-grid a>span:last-child{min-width:0}.principal-resource-grid strong,.principal-resource-grid small{display:block}.principal-resource-grid strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem}.principal-resource-grid small{overflow:hidden;margin-top:3px;color:#70809e;font-size:.67rem;text-overflow:ellipsis;white-space:nowrap}.principal-event-list time { display:grid; flex:0 0 auto; width:37px; height:39px; place-items:center; border:1px solid #dfe9f7; border-radius:8px; color:#1b69e8; font-size:.63rem; font-weight:800; }.principal-event-list time strong{font-size:.9rem;}

@media (max-width: 1500px) {
  .gradebook-landing-grid { grid-template-columns: 1fr; }
  .gradebook-landing-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1280px) {
  .gradebook-landing-metric-grid,.principal-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .principal-dashboard-grid-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .gradebook-landing-grid,.principal-dashboard-grid-top { grid-template-columns: 1fr; }
  .gradebook-landing-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }.gradebook-landing-side > :last-child { grid-column: 1 / -1; }
  .principal-dashboard-grid-bottom { grid-template-columns: 1fr; }
  .principal-metric-grid,.principal-metric-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principal-report-grid,.principal-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .gradebook-landing-header,.principal-page-header { display:grid; gap:15px; }.gradebook-landing-header-actions,.principal-header-actions { width:100%; }.gradebook-landing-header-actions .primary-button,.gradebook-landing-header-actions .secondary-button,.principal-header-actions .primary-button,.principal-header-actions .secondary-button { flex:1; justify-content:center; }
  .gradebook-landing-metric-grid,.principal-metric-grid,.principal-metric-grid-four { grid-template-columns: 1fr 1fr; gap:10px; }.principal-metric-card { min-height:92px; padding:12px; gap:9px; }.principal-metric-icon { width:36px;height:36px;border-radius:11px; }.principal-metric-card strong {font-size:1.13rem;}.principal-metric-card small,.principal-metric-card em { white-space:normal; }
  .gradebook-landing-side,.principal-report-grid,.principal-settings-grid,.principal-resource-grid { grid-template-columns:1fr; }.gradebook-landing-side > :last-child { grid-column:auto; }.gradebook-quick-actions { grid-template-columns:1fr 1fr; }
  .gradebook-landing-filters { display:grid; grid-template-columns:1fr 1fr; }.gradebook-landing-filters .compact-field { min-width:0; }.gradebook-landing-filters .teacher-row-action { grid-column:1 / -1; }
  .gradebook-directory-table-wrap { overflow: visible; border: 0; }.gradebook-directory-table { min-width:0; }.gradebook-directory-table thead { display:none; }.gradebook-directory-table,.gradebook-directory-table tbody,.gradebook-directory-table tr,.gradebook-directory-table td { display:block; width:100%; }.gradebook-directory-table tr { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-bottom:12px; border:1px solid #e0e9f6; border-radius:9px; overflow:hidden; }.gradebook-directory-table td { min-height:42px; padding:9px 11px; border-bottom:1px solid #edf1f8; }.gradebook-directory-table td::before { display:block; margin-bottom:3px; color:#71809e; content:attr(data-label); font-size:.61rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }.gradebook-directory-table td:first-child,.gradebook-directory-table td:last-child { grid-column:1 / -1; }.gradebook-directory-table td:first-child::before,.gradebook-directory-table td:last-child::before { display:none; }.gradebook-directory-table td:nth-last-child(2) { border-bottom:0; }.gradebook-directory-table .gradebook-class-link { min-width:0; }.gradebook-directory-actions { display:flex; align-items:center; gap:6px; justify-content:space-between; border-bottom:0; }.gradebook-directory-actions .teacher-row-action { font-size:.72rem; }
  .gradebook-landing-details summary small { display:block; margin:5px 0 0; }.principal-overview-split { grid-template-columns:1fr; }.principal-line-section { border-top:1px solid #e5ecf7; border-left:0; }.principal-donut-section,.principal-demographic-grid { align-items:flex-start; }.principal-prepared-state { padding:24px; }.principal-tabbar { margin-inline:-2px; }.principal-panel-heading { gap:7px; }.principal-panel-heading > a { font-size:.66rem; }
}

/* Student portal: compact progress workspace, driven by the same scoped portal records. */
.student-workspace .app-sidebar { background: #06275a; }
.student-workspace .sidebar-school { display: none; }
.student-workspace .utility-context { display: none; }
.student-workspace .global-search { max-width: 420px; }
.student-workspace .utility-bar { justify-content: space-between; }
.student-workspace .utility-profile-menu summary { min-width: 0; }
.student-profile-avatar,
.student-initials { align-items: center; background: #6679ed; border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 auto; font-weight: 800; justify-content: center; letter-spacing: 0; }
.student-profile-avatar { height: 34px; width: 34px; }
.student-page-header { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; margin-bottom: 16px; }
.student-page-header h1 { color: #10285a; font-size: clamp(1.55rem, 2vw, 2rem); margin: 3px 0 5px; }
.student-page-header p { color: #697b99; margin: 0; }
.student-banner { align-items: center; background: #f4f8ff; border: 1px solid #cfe0ff; border-radius: 10px; display: flex; gap: 18px; margin-bottom: 18px; min-height: 116px; overflow: hidden; padding: 20px 24px; position: relative; }
.student-banner::after { border: 1px solid #dce9ff; border-radius: 50%; content: ""; height: 190px; position: absolute; right: -28px; top: -75px; width: 190px; }
.student-banner::before { background: #e5efff; border-radius: 50%; content: ""; height: 145px; position: absolute; right: 55px; top: 22px; width: 145px; }
.student-banner > * { position: relative; z-index: 1; }
.student-banner.compact { min-height: 92px; padding-block: 16px; }
.student-banner h2 { color: #112c5b; font-size: 1.4rem; margin: 0; }
.student-banner p { color: #627391; font-size: 0.9rem; margin: 5px 0; }
.student-banner small { color: #526b91; font-size: 0.82rem; }
.student-initials { font-size: 1.45rem; height: 76px; width: 76px; }
.student-metric-grid { display: grid; gap: 14px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 12px; }
.student-metric-card { align-items: center; background: rgba(255, 255, 255, 0.86); border: 1px solid #e4ebf6; border-radius: 9px; color: #15325f; display: flex; gap: 12px; min-height: 104px; padding: 15px; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.student-metric-card:hover { border-color: #93b9ff; box-shadow: 0 10px 24px rgba(37, 86, 171, .11); transform: translateY(-1px); }
.student-metric-card > span:last-child { display: grid; gap: 2px; min-width: 0; }
.student-metric-card small { color: #5d6f90; font-size: .74rem; font-weight: 750; line-height: 1.2; overflow-wrap: anywhere; }
.student-metric-card strong { color: #132d5e; font-size: 1.45rem; line-height: 1.1; }
.student-metric-card em { color: #0b63db; font-size: .73rem; font-style: normal; font-weight: 750; }
.student-metric-card.tone-green strong { color: #11824c; }
.student-metric-card.tone-gold strong { color: #cc6b00; }
.student-metric-card.tone-violet strong { color: #7046dd; }
.student-dashboard-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.62fr) minmax(320px, .9fr); }
.student-side-stack { display: grid; gap: 18px; min-width: 0; }
.student-mini-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.student-panel { background: rgba(255, 255, 255, .88); border: 1px solid #e4ebf6; border-radius: 10px; box-shadow: 0 10px 24px rgba(27, 62, 113, .05); min-width: 0; padding: 18px; }
.student-panel-heading { align-items: center; display: flex; gap: 11px; margin-bottom: 14px; min-width: 0; }
.student-panel-heading > div { min-width: 0; }
.student-panel-heading h2 { color: #142e5d; font-size: 1rem; margin: 0; }
.student-panel-heading p { color: #6d7f9c; font-size: .75rem; margin: 3px 0 0; }
.student-focus-split { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.22fr) minmax(250px, .8fr); }
.student-today-summary { border-left: 1px solid #e7edf7; padding-left: 20px; }
.student-list-heading { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 9px; }
.student-list-heading h3 { color: #17335f; font-size: .89rem; margin: 0; }
.student-list-heading a { color: #0d63dc; font-size: .75rem; font-weight: 800; text-decoration: none; }
.student-list-heading span { color: #6a7c99; font-size: .71rem; }
.student-today-summary > p { color: #72819b; font-size: .73rem; line-height: 1.45; margin: 0 0 10px; }
.student-course-list,
.student-schedule-list,
.student-activity-list,
.student-mini-list { display: grid; }
.student-course-list > a,
.student-schedule-list > a,
.student-activity-list > a,
.student-mini-list > a { align-items: center; border-top: 1px solid #e9eef7; color: #17335f; display: grid; gap: 10px; min-width: 0; padding: 10px 0; text-decoration: none; }
.student-course-list > a { grid-template-columns: 34px minmax(0, 1fr) auto; }
.student-schedule-list > a { grid-template-columns: 32px minmax(0, 1fr); }
.student-activity-list > a { grid-template-columns: 32px minmax(0, 1fr) auto; }
.student-mini-list > a { grid-template-columns: minmax(0, 1fr) auto; }
.student-course-list span:nth-child(2),
.student-schedule-list span:nth-child(2),
.student-activity-list span:nth-child(2),
.student-mini-list span { display: grid; gap: 3px; min-width: 0; }
.student-course-list strong,
.student-schedule-list strong,
.student-activity-list strong,
.student-mini-list strong { color: #17335f; font-size: .8rem; overflow-wrap: anywhere; }
.student-course-list small,
.student-schedule-list small,
.student-activity-list small,
.student-mini-list small { color: #72819b; font-size: .7rem; overflow-wrap: anywhere; }
.student-course-list b { color: #117943; font-size: .82rem; overflow-wrap: anywhere; text-align: right; }
.student-activity-list time { color: #72819b; font-size: .68rem; white-space: nowrap; }
.student-mini-list b { color: #1464d8; font-size: .73rem; text-align: right; }
.student-course-icon { align-items: center; background: #e9f1ff; border-radius: 9px; color: #1864e8; display: inline-flex; height: 33px; justify-content: center; width: 33px; }
.student-course-icon .icon-svg { height: 18px; width: 18px; }
.student-quick-actions { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 13px; }
.student-quick-actions a { border: 1px solid #dfe8f7; border-radius: 7px; color: #175dcc; font-size: .72rem; font-weight: 800; padding: 9px; text-align: center; text-decoration: none; }
.student-quick-actions a:hover { background: #f3f7ff; border-color: #8cb3fa; }
.student-class-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.student-class-card { display: grid; gap: 13px; }
.student-class-card > div:not(.action-row) { display: grid; gap: 4px; }
.student-class-card h2 { color: #153260; font-size: 1rem; margin: 0; }
.student-class-card p { color: #6e809d; font-size: .79rem; margin: 0; }
.student-class-card dl { border-block: 1px solid #e8eef6; display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 2px 0; padding: 12px 0; }
.student-class-card dl div { display: grid; gap: 4px; min-width: 0; }
.student-class-card dt { color: #7686a1; font-size: .66rem; }
.student-class-card dd { color: #19355f; font-size: .76rem; font-weight: 750; margin: 0; overflow-wrap: anywhere; }
.student-dashboard-more { margin: 0 0 18px; }
.student-dashboard-more summary {
  align-items: center;
  color: #165fcf;
  cursor: pointer;
  display: inline-flex;
  font-size: .76rem;
  font-weight: 800;
  list-style: none;
  min-height: 40px;
}
.student-dashboard-more summary::-webkit-details-marker { display: none; }
.student-dashboard-more > div { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 10px; }
.student-dashboard-more a { border: 1px solid #dbe7f7; border-radius: 7px; color: #173d7b; font-size: .74rem; font-weight: 750; padding: 8px 10px; text-decoration: none; }
.principal-dashboard-more { position: relative; }
.principal-dashboard-more summary { align-items: center; border: 1px solid #d9e4f5; border-radius: 7px; color: #193660; cursor: pointer; display: inline-flex; font-size: .78rem; font-weight: 800; min-height: 38px; padding: 0 12px; }
.principal-readiness-summary { background: #f6f9ff; border: 1px solid #dbe8ff; display: grid; gap: 5px; padding: 14px; }
.principal-readiness-summary strong { color: #185fcf; font-size: 1.35rem; }
.principal-readiness-summary span { color: #375173; font-size: .82rem; }
.principal-readiness-summary small { color: #70819c; font-size: .73rem; }

@media (min-width: 981px) {
  .student-workspace .app-shell { grid-template-columns: calc(var(--sidebar-expanded-width) + 16px) minmax(0, 1fr); }
  .student-workspace .app-sidebar { width: var(--sidebar-expanded-width); padding-inline: 14px; }
  .student-workspace .app-sidebar .brand { justify-content: flex-start; }
  .student-workspace .app-sidebar .brand-label,
  .student-workspace .app-sidebar .nav-label { max-width: 180px; opacity: 1; transform: translateX(0); }
  .student-workspace .app-sidebar .side-nav-link { justify-content: flex-start; padding-inline: 12px; }
  .student-workspace .sidebar-footer {
    display: grid;
    gap: 8px;
    max-width: 100%;
    height: auto;
    min-height: 68px;
    padding: 12px;
    overflow: visible;
  }
  .student-workspace .sidebar-user {
    align-items: flex-start;
  }
  .student-workspace .sidebar-user-meta {
    max-width: min(172px, calc(100% - 56px));
    overflow: visible;
    opacity: 1;
  }
  .student-workspace .sidebar-user-name,
  .student-workspace .sidebar-user-role {
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }
}

/* Gradebook completion pass: give leadership a compact, fixed-priority desktop
   row and switch to cards before columns become too narrow to read. */
.academic-completion-table {
  width: 100%;
  min-width: 1120px !important;
  table-layout: fixed;
}
.academic-completion-table .completion-class-col { width: 22%; }
.academic-completion-table .completion-teacher-col { width: 13%; }
.academic-completion-table .completion-method-col { width: 16%; }
.academic-completion-table .completion-policy-col { width: 10%; }
.academic-completion-table .completion-progress-col { width: 16%; }
.academic-completion-table .completion-missing-col { width: 7%; }
.academic-completion-table .completion-status-col { width: 9%; }
.academic-completion-table .completion-action-col { width: 15%; }
.academic-completion-table td { overflow-wrap: normal; word-break: normal; }
.academic-completion-table td > strong,
.academic-completion-table td > small { min-width: 0; }
.academic-completion-class-name,
.academic-completion-teacher { overflow-wrap: break-word; word-break: normal; }
.academic-completion-progress { display: grid; grid-template-columns: minmax(38px, 1fr) auto; gap: 4px 8px; align-items: center; min-width: 0; }
.academic-completion-progress > span { display: block; height: 6px; overflow: hidden; background: #e2e8f0; border-radius: 999px; }
.academic-completion-progress i { display: block; height: 100%; min-width: 2px; background: linear-gradient(90deg, #2563eb, #14b8a6); border-radius: inherit; }
.academic-completion-progress strong { color: #173d7a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.academic-completion-progress small { grid-column: 1 / -1; margin-top: 0 !important; white-space: nowrap; }
.academic-completion-action { min-width: 142px; justify-content: center; white-space: nowrap; }

.gradebook-context-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid #d9e6f7; border-radius: 10px; background: linear-gradient(135deg, #f8fbff, #fff); }
.gradebook-context-summary { display: grid; min-width: 0; gap: 3px; }
.gradebook-context-summary strong { color: var(--navy); font-size: 0.95rem; }
.gradebook-context-summary small { color: var(--muted); font-size: 0.74rem; }
.gradebook-context-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.gradebook-context-actions > a:not(.primary-button) { display: inline-flex; min-height: 36px; align-items: center; padding: 0 10px; border: 1px solid #dce6f5; border-radius: 7px; color: #52698f; font-size: 0.75rem; font-weight: 800; white-space: nowrap; }
.gradebook-context-actions > a:not(.primary-button):hover,
.gradebook-context-actions > a:not(.primary-button).is-active { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; text-decoration: none; }
.weighted-category-workspace { display: grid; gap: 12px; }
.weighted-category-card { overflow: hidden; border: 1px solid #dce7f4; border-radius: 9px; background: #fff; }
.weighted-category-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; background: #f8fbff; border-bottom: 1px solid #e7eef8; }
.weighted-category-card h3 { margin: 0; color: var(--navy); font-size: 0.9rem; }
.weighted-category-card h3 span { color: #2563eb; font-size: 0.77rem; }
.weighted-category-card p { margin: 4px 0 0; color: var(--muted); font-size: 0.73rem; }
.weighted-category-card p strong { color: #0f766e; }
.weighted-category-card .table-wrap { margin: 0; border: 0; border-radius: 0; }
.individualized-coursework-entry { scroll-margin-top: 16px; }
.individual-coursework-form { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.individual-coursework-form .field:nth-of-type(1),
.individual-coursework-form .field:nth-of-type(2) { grid-column: span 2; }
.individual-coursework-form .field:nth-of-type(3),
.individual-coursework-form .field:nth-of-type(4),
.individual-coursework-form .field:nth-of-type(5),
.individual-coursework-form .field:nth-of-type(6) { grid-column: span 1; }
.individual-coursework-form .field:nth-of-type(7),
.individual-coursework-form .field:nth-of-type(8),
.individual-coursework-form .field:nth-of-type(9) { grid-column: span 2; }
.individual-coursework-form > .action-row { grid-column: 1 / -1; }
.student-category-groups { display: grid; gap: 12px; margin-top: 14px; }
.student-category-group { overflow: hidden; border: 1px solid #dce7f4; border-radius: 9px; }
.student-category-group-heading { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; background: #f8fbff; }
.student-category-group h3 { margin: 0; color: var(--navy); font-size: 0.88rem; }
.student-category-group h3 small { color: #2563eb; font-size: 0.74rem; }
.student-category-group p { margin: 3px 0 0; color: var(--muted); font-size: 0.72rem; }
.student-category-group p strong { color: #0f766e; }
.student-category-group .table-wrap { margin: 0; border: 0; border-radius: 0; }
.gradebook-individualized-assessment-notice { display: grid; max-width: 760px; gap: 10px; }
.gradebook-individualized-assessment-notice h2 { margin: 0; color: var(--navy); }
.gradebook-individualized-assessment-notice p { max-width: 640px; margin: 0; color: var(--muted); line-height: 1.5; }

@media (max-width: 980px) {
  .academic-completion-table-wrap { overflow: visible; border: 0; }
  .academic-completion-table { min-width: 0 !important; }
  .academic-completion-table,
  .academic-completion-table tbody,
  .academic-completion-table tr,
  .academic-completion-table td { display: block; width: 100%; }
  .academic-completion-table colgroup,
  .academic-completion-table thead { display: none; }
  .academic-completion-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0 0 12px; border: 1px solid #dce7f4; border-radius: 10px; overflow: hidden; }
  .academic-completion-table td { min-height: 0; padding: 10px 12px; border-bottom: 1px solid #e7eef8; }
  .academic-completion-table td::before { display: block; margin-bottom: 4px; color: #6b7e9d; content: attr(data-label); font-size: 0.62rem; font-weight: 850; letter-spacing: .02em; text-transform: uppercase; }
  .academic-completion-table td:first-child,
  .academic-completion-table td:last-child { grid-column: 1 / -1; }
  .academic-completion-table td:first-child::before,
  .academic-completion-table td:last-child::before { display: none; }
  .academic-completion-table td:last-child { border-bottom: 0; }
  .academic-completion-class-name { font-size: 0.9rem; }
  .academic-completion-progress small { white-space: normal; }
  .academic-completion-action { width: 100%; min-width: 0; }
  .individual-coursework-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .individual-coursework-form .field { grid-column: span 1 !important; }
  .individual-coursework-form .field:nth-of-type(1),
  .individual-coursework-form .field:nth-of-type(2),
  .individual-coursework-form .field:nth-of-type(7) { grid-column: 1 / -1 !important; }
}

@media (max-width: 640px) {
  .gradebook-context-toolbar,
  .weighted-category-card > header { align-items: stretch; flex-direction: column; }
  .gradebook-context-actions { justify-content: stretch; }
  .gradebook-context-actions > a { flex: 1 1 130px; justify-content: center; }
  .weighted-category-card > header .secondary-button { justify-content: center; }
  .individual-coursework-form { grid-template-columns: 1fr; }
  .individual-coursework-form .field { grid-column: 1 / -1 !important; }
  .academic-completion-table tr { grid-template-columns: 1fr; }

  /* Publication dates must remain readable in the document header instead of
     forcing a narrow right-aligned status column. */
  .report-card-letterhead { flex-wrap: wrap; }
  .report-card-status-stack {
    width: 100%;
    min-width: 0;
    justify-items: start;
    text-align: left;
  }
}

@media (max-width: 1250px) {
  .student-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .student-dashboard-grid { grid-template-columns: 1fr; }
  .student-side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-side-stack > .student-mini-grid { grid-column: 1 / -1; }
}

@media (min-width: 981px) and (max-width: 1320px) {
  .student-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .student-dashboard-grid { grid-template-columns: 1fr; }
  .student-side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-side-stack > .student-mini-grid { grid-column: 1 / -1; }
}

@media (min-width: 1251px) and (max-width: 1500px) {
  .student-mini-grid { grid-template-columns: 1fr; }
}

@media (max-width: 880px) {
  .student-workspace .app-sidebar { background: #06275a; }
  .student-side-stack { grid-template-columns: 1fr; }
  .student-focus-split { grid-template-columns: 1fr; }
  .student-today-summary { border-left: 0; border-top: 1px solid #e7edf7; padding: 16px 0 0; }
}

@media (max-width: 680px) {
  .student-workspace .global-search { max-width: none; }
  .student-page-header { align-items: stretch; }
  .student-banner { align-items: flex-start; min-height: 0; padding: 16px; }
  .student-banner::before,
  .student-banner::after { display: none; }
  .student-initials { font-size: 1.12rem; height: 54px; width: 54px; }
  .student-banner h2 { font-size: 1.1rem; }
  .student-banner small { font-size: .74rem; }
  .student-metric-grid { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-metric-card { min-height: 92px; padding: 12px; }
  .student-metric-card .panel-icon { height: 37px; width: 37px; }
  .student-metric-card strong { font-size: 1.17rem; }
  .student-metric-card em { display: none; }
  .student-panel { padding: 14px; }
  .student-mini-grid { grid-template-columns: 1fr; }
  .student-activity-list > a { grid-template-columns: 30px minmax(0, 1fr); }
  .student-activity-list time { grid-column: 2; }
  .student-mini-list > a { grid-template-columns: 1fr; }
  .student-mini-list b { text-align: left; }
  .student-class-card dl { grid-template-columns: 1fr 1fr; }
  .student-class-card dl div:last-child { grid-column: 1 / -1; }
  .student-quick-actions { grid-template-columns: 1fr; }
}



.teacher-workspace .app-sidebar {
  gap: 12px;
  padding-block: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sharpena-nav-bg) 80%, #020617), color-mix(in srgb, var(--sharpena-nav-bg) 92%, #020617)),
    linear-gradient(135deg, color-mix(in srgb, var(--sharpena-primary) 28%, transparent), transparent 56%);
  border-radius: 8px;
}

.teacher-workspace .app-sidebar .brand-mark {
  background: linear-gradient(145deg, #ffffff, #dbeafe);
  color: #0f3b93;
  box-shadow: 0 12px 26px rgba(2, 132, 199, 0.28);
}

.teacher-workspace .app-sidebar .brand-mark .icon-svg {
  width: 22px;
  height: 22px;
}

.teacher-workspace .side-nav {
  gap: 4px;
}

.teacher-workspace .side-nav-link,
.teacher-workspace .side-nav-more > summary {
  min-height: 42px;
  border-radius: 8px;
}

.teacher-workspace .side-nav-link.is-active {
  background: linear-gradient(135deg, var(--sharpena-primary), color-mix(in srgb, var(--sharpena-primary) 78%, #020617));
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.36), 0 10px 20px rgba(2, 51, 148, 0.26);
}

.teacher-workspace .side-nav-link .nav-icon,
.teacher-workspace .side-nav-more > summary .nav-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: transparent;
  border-color: transparent;
}

.teacher-workspace .side-nav-link.is-active .nav-icon {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.side-nav-count {
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  margin-left: auto;
  padding: 0 5px;
  color: #ffffff;
  background: #ef4444;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
}

.side-nav-more {
  position: relative;
  min-width: 0;
}

.side-nav-more > summary {
  list-style: none;
}

.side-nav-more > summary::-webkit-details-marker {
  display: none;
}

.side-nav-more[open] > summary {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.11);
}

.sidebar-more-panel {
  position: absolute;
  bottom: 0;
  left: calc(100% + 12px);
  z-index: var(--z-dropdown);
  display: grid;
  min-width: 196px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(191, 219, 254, 0.9);
  border-radius: 8px;
  box-shadow: var(--shadow-glass);
}

.sidebar-more-panel a {
  padding: 9px 10px;
  color: var(--navy);
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 750;
}

.sidebar-more-panel a:hover {
  color: var(--blue);
  background: #eff6ff;
  text-decoration: none;
}

.teacher-sidebar-school {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 10px;
  color: #dbeafe;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(191, 219, 254, 0.14);
  border-radius: 8px;
}

.teacher-sidebar-school .school-identity-logo,
.teacher-sidebar-school .school-identity-mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.teacher-sidebar-school .school-identity-copy strong {
  display: block;
  color: #ffffff;
  font-size: 0.8rem;
}

.teacher-sidebar-school .school-identity-copy span,
.teacher-sidebar-school small {
  color: #bfdbfe;
  font-size: 0.68rem;
  line-height: 1.3;
}

.teacher-sidebar-school small {
  grid-column: 1 / -1;
  display: block;
  padding-top: 6px;
  border-top: 1px solid rgba(191, 219, 254, 0.14);
}

.teacher-workspace .sidebar-footer {
  margin-top: auto;
}

.teacher-workspace .utility-bar {
  justify-content: flex-end;
  min-height: 72px;
  border-top-color: transparent;
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035);
}

.teacher-workspace .global-search {
  flex: 0 1 min(640px, 54vw);
  margin-right: auto;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
}

.teacher-workspace .global-search input {
  min-height: 42px;
  padding-left: 16px;
  border-radius: 8px;
}

.teacher-workspace .global-search button {
  min-width: 52px;
  border-radius: 0 7px 7px 0;
  font-size: 0.75rem;
}

.teacher-workspace .utility-actions {
  flex-wrap: nowrap;
  gap: 8px;
}

.teacher-add-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue), var(--blue-strong));
  border: 0;
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
  font-weight: 800;
}

.teacher-add-menu > summary:hover,
.teacher-add-menu[open] > summary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue-strong), #1e40af);
}

.teacher-add-icon {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
}

.utility-icon-link {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.utility-icon-link:hover {
  color: var(--blue);
  background: #eff6ff;
  text-decoration: none;
}

.utility-icon-link .nav-icon {
  width: 22px;
  height: 22px;
  background: transparent;
  border: 0;
}

.teacher-workspace .utility-profile-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  max-width: 220px;
  padding: 0 8px;
  border-radius: 8px;
}

.teacher-profile-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, #0f766e, #2563eb);
  border-radius: 50%;
  font-size: 0.76rem;
  font-weight: 900;
}

.teacher-page-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.teacher-page-header > div {
  display: grid;
  gap: 8px;
}

.teacher-page-header h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1.06;
}

.teacher-page-header p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.teacher-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 12px;
  color: #1e40af;
  background: rgba(239, 246, 255, 0.82);
  border: 1px solid rgba(191, 219, 254, 0.8);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 800;
}

.teacher-date-chip .icon-svg {
  width: 17px;
  height: 17px;
}

.teacher-metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.teacher-metric-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 114px;
  padding: 14px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(203, 213, 225, 0.62);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.teacher-metric-card:hover {
  color: var(--text);
  border-color: rgba(147, 197, 253, 0.9);
  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.12);
  text-decoration: none;
  transform: translateY(-2px);
}

.teacher-metric-icon,
.panel-icon,
.teacher-task-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 8px;
}

.teacher-metric-icon .icon-svg,
.panel-icon .icon-svg,
.teacher-task-icon .icon-svg {
  width: 21px;
  height: 21px;
}

.teacher-metric-card.tone-blue .teacher-metric-icon,
.panel-icon.blue { color: #2563eb; background: #dbeafe; }
.teacher-metric-card.tone-green .teacher-metric-icon,
.panel-icon.green { color: #059669; background: #d1fae5; }
.teacher-metric-card.tone-gold .teacher-metric-icon,
.panel-icon.gold { color: #d97706; background: #fef3c7; }
.teacher-metric-card.tone-violet .teacher-metric-icon,
.panel-icon.violet { color: #7c3aed; background: #ede9fe; }
.teacher-metric-card.tone-teal .teacher-metric-icon,
.panel-icon.teal { color: #0f766e; background: #ccfbf1; }

.teacher-metric-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.teacher-metric-copy strong {
  color: var(--navy);
  font-size: 1.65rem;
  line-height: 1;
}

.teacher-metric-copy span {
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.25;
}

.teacher-metric-copy small {
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.3;
}

.teacher-metric-arrow {
  color: #94a3b8;
  font-size: 1.1rem;
}

.teacher-dashboard-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.teacher-primary-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.1fr) minmax(260px, 0.9fr);
}

.teacher-secondary-grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr) minmax(250px, 0.8fr);
}

.teacher-panel {
  min-width: 0;
  padding: 16px;
  overflow: visible;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(203, 213, 225, 0.6);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
}

.teacher-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.teacher-panel-heading > div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.teacher-panel-heading .panel-icon {
  width: 31px;
  height: 31px;
}

.teacher-panel-heading .panel-icon .icon-svg {
  width: 18px;
  height: 18px;
}

.teacher-panel-heading h2 {
  margin: 0;
  color: var(--navy);
  font-size: 1rem;
}

.teacher-panel-heading > a,
.teacher-panel-footer {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.teacher-panel-heading > a:hover,
.teacher-panel-footer:hover {
  text-decoration: underline;
}

.teacher-schedule-list,
.teacher-activity-list,
.teacher-event-list,
.teacher-task-list {
  display: grid;
}

.teacher-schedule-row {
  display: grid;
  grid-template-columns: minmax(72px, auto) 3px minmax(140px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  padding: 10px 0;
  border-top: 1px solid rgba(226, 232, 240, 0.84);
}

.teacher-schedule-row:first-child,
.teacher-activity-row:first-child,
.teacher-event-row:first-child,
.teacher-task-row:first-child {
  border-top: 0;
}

.teacher-time-block,
.teacher-schedule-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.teacher-time-block strong,
.teacher-schedule-copy strong {
  color: var(--navy);
  font-size: 0.8rem;
}

.teacher-time-block small,
.teacher-schedule-copy span,
.teacher-student-count,
.teacher-activity-row small,
.teacher-event-row small,
.teacher-task-row small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.teacher-schedule-line {
  display: block;
  width: 3px;
  height: 36px;
  background: linear-gradient(#2563eb, #60a5fa);
  border-radius: 99px;
}

.teacher-schedule-row:nth-child(3n + 2) .teacher-schedule-line { background: linear-gradient(#10b981, #6ee7b7); }
.teacher-schedule-row:nth-child(3n) .teacher-schedule-line { background: linear-gradient(#f59e0b, #fcd34d); }

.teacher-student-count {
  white-space: nowrap;
}

.teacher-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  padding: 0 9px;
  color: var(--blue);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.teacher-row-action:hover { text-decoration: none; background: #dbeafe; }

.teacher-class-table {
  display: grid;
}

.teacher-class-head,
.teacher-class-row {
  display: grid;
  grid-template-columns: minmax(118px, 1.35fr) minmax(62px, 0.5fr) minmax(60px, 0.55fr) minmax(84px, 0.65fr);
  gap: 8px;
  align-items: center;
}

.teacher-class-head {
  padding: 0 0 8px;
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 850;
  text-transform: uppercase;
  white-space: nowrap;
}

.teacher-class-row {
  min-height: 53px;
  padding: 9px 0;
  color: var(--text);
  border-top: 1px solid rgba(226, 232, 240, 0.84);
  font-size: 0.78rem;
}

.teacher-class-row:hover {
  color: var(--blue);
  text-decoration: none;
}

.teacher-class-row > span:first-child {
  display: grid;
  gap: 2px;
}

.teacher-class-row strong { color: var(--navy); font-size: 0.78rem; }
.teacher-class-row small { color: var(--muted); font-size: 0.68rem; }
.teacher-attendance-value { color: #059669; font-weight: 850; }

.teacher-panel-footer {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 10px -2px -2px;
  padding: 10px 0 0;
  border-top: 1px solid rgba(226, 232, 240, 0.84);
}

.teacher-activity-row,
.teacher-event-row,
.teacher-task-row {
  display: grid;
  align-items: center;
  min-height: 56px;
  padding: 9px 0;
  border-top: 1px solid rgba(226, 232, 240, 0.84);
}

.teacher-activity-row { grid-template-columns: 9px minmax(0, 1fr) auto; gap: 9px; }
.teacher-event-row { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; color: var(--text); }
.teacher-task-row { grid-template-columns: 31px minmax(0, 1fr) auto; gap: 9px; color: var(--text); }

.teacher-activity-row:hover,
.teacher-event-row:hover,
.teacher-task-row:hover { color: var(--blue); text-decoration: none; }

.teacher-activity-row > span:nth-child(2),
.teacher-event-row > span,
.teacher-task-row > span:nth-child(2) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.teacher-activity-row strong,
.teacher-event-row strong,
.teacher-task-row strong {
  color: var(--navy);
  font-size: 0.78rem;
  line-height: 1.25;
}

.teacher-activity-row time { color: var(--muted); font-size: 0.68rem; white-space: nowrap; }
.teacher-activity-dot { width: 8px; height: 8px; background: #94a3b8; border-radius: 50%; }
.teacher-activity-dot.success { background: #10b981; }
.teacher-activity-dot.warning { background: #f59e0b; }
.teacher-activity-dot.danger { background: #ef4444; }

.teacher-event-row time {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  align-content: center;
  color: var(--blue);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 7px;
  line-height: 1.05;
}

.teacher-event-row time strong { color: var(--blue); font-size: 0.63rem; text-transform: uppercase; }
.teacher-event-row time span { color: var(--navy); font-size: 0.93rem; font-weight: 900; }
.teacher-task-icon { width: 31px; height: 31px; color: #2563eb; background: #dbeafe; }
.teacher-task-icon .icon-svg { width: 17px; height: 17px; }

.teacher-task-tabs {
  display: flex;
  gap: 18px;
  margin: -2px 0 3px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
}

.teacher-task-tabs span {
  padding: 6px 0;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  font-size: 0.72rem;
  font-weight: 800;
}

.teacher-task-tabs .is-active { color: var(--blue); border-bottom-color: var(--blue); }

.teacher-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.teacher-quick-actions a {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-height: 86px;
  padding: 10px 6px;
  color: var(--navy);
  background: rgba(248, 250, 252, 0.82);
  border: 1px solid rgba(219, 234, 254, 0.9);
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

.teacher-quick-actions a:hover { color: var(--blue); background: #eff6ff; text-decoration: none; }
.teacher-quick-actions .panel-icon { width: 31px; height: 31px; }
.teacher-quick-actions .panel-icon .icon-svg { width: 17px; height: 17px; }

.teacher-empty-state {
  display: grid;
  gap: 5px;
  min-height: 92px;
  padding: 14px 2px;
  align-content: center;
}

.teacher-empty-state strong { color: var(--navy); font-size: 0.84rem; }
.teacher-empty-state span { color: var(--muted); font-size: 0.76rem; line-height: 1.4; }

.teacher-more-tools { margin-top: 2px; }
.teacher-more-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; }
.teacher-more-links a { padding: 8px 10px; background: #eff6ff; border-radius: 6px; font-size: 0.8rem; font-weight: 800; }

.teacher-class-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.teacher-class-page-grid { grid-template-columns: minmax(0, 1.65fr) minmax(250px, 0.72fr); }
.teacher-class-list-panel { min-width: 0; }
.teacher-class-directory { display: grid; }
.teacher-directory-head,
.teacher-directory-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.35fr) minmax(68px, 0.6fr) minmax(120px, 1fr) minmax(56px, 0.5fr) minmax(68px, 0.6fr) minmax(72px, 0.7fr) minmax(185px, auto);
  gap: 9px;
  align-items: center;
}
.teacher-directory-head { padding: 0 0 8px; color: var(--muted); font-size: 0.66rem; font-weight: 850; text-transform: uppercase; }
.teacher-directory-row { min-height: 62px; padding: 10px 0; border-top: 1px solid rgba(226, 232, 240, 0.84); color: var(--text); font-size: 0.76rem; }
.teacher-directory-row > span:first-child { display: grid; gap: 2px; }
.teacher-directory-row strong { color: var(--navy); font-size: 0.8rem; }
.teacher-directory-row small { color: var(--muted); font-size: 0.69rem; }
.teacher-directory-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.teacher-directory-actions a { padding: 6px 7px; color: var(--blue); background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 5px; font-size: 0.68rem; font-weight: 800; white-space: nowrap; }
.teacher-directory-actions a:hover { background: #dbeafe; text-decoration: none; }
.teacher-side-actions { display: grid; }
.teacher-side-actions a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: center; min-height: 54px; padding: 9px 0; color: var(--text); border-top: 1px solid rgba(226, 232, 240, 0.84); }
.teacher-side-actions a:first-child { border-top: 0; }
.teacher-side-actions a:hover { color: var(--blue); text-decoration: none; }
.teacher-side-actions strong { color: var(--navy); font-size: 0.78rem; }
.teacher-side-actions small { color: var(--muted); font-size: 0.7rem; }
.teacher-side-actions a > span { grid-column: 2; grid-row: 1 / span 2; color: var(--blue); font-size: 1rem; }

.teacher-student-directory-panel,
.teacher-assignment-directory-panel { min-height: 300px; }
.teacher-student-grid { display: grid; gap: 9px; }
.teacher-student-card { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-height: 66px; padding: 10px; background: rgba(248, 250, 252, 0.84); border: 1px solid rgba(219, 234, 254, 0.9); border-radius: 7px; }
.teacher-student-avatar { display: grid; width: 36px; height: 36px; place-items: center; color: #1d4ed8; background: #dbeafe; border-radius: 50%; font-size: 0.75rem; font-weight: 900; }
.teacher-student-card > div { display: grid; gap: 3px; }
.teacher-student-card strong { color: var(--navy); font-size: 0.78rem; }
.teacher-student-card small { color: var(--muted); font-size: 0.68rem; }
.teacher-student-card > a { padding: 6px 7px; color: var(--blue); background: #eff6ff; border-radius: 5px; font-size: 0.68rem; font-weight: 800; }
.teacher-student-card > a:hover { background: #dbeafe; text-decoration: none; }
.teacher-student-card-rich { grid-template-columns: 36px minmax(150px, 1.1fr) minmax(230px, 1fr) auto; min-height: 80px; }
.teacher-student-copy { display: grid; gap: 3px; min-width: 0; }
.teacher-student-copy span { color: var(--blue); font-size: 0.66rem; font-weight: 750; overflow-wrap: anywhere; }
.teacher-student-stats { display: grid; grid-template-columns: repeat(3, minmax(60px, 1fr)); gap: 8px; }
.teacher-student-stats > span { display: grid; gap: 2px; min-width: 0; }
.teacher-student-stats small { color: var(--muted); font-size: 0.62rem; font-weight: 750; text-transform: uppercase; }
.teacher-student-stats strong { color: var(--navy); font-size: 0.76rem; }
.teacher-student-stats .is-warning { color: #d97706; }
.teacher-student-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.teacher-student-actions a { padding: 6px 7px; color: var(--blue); background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 5px; font-size: 0.68rem; font-weight: 800; white-space: nowrap; }
.teacher-student-actions a:hover { background: #dbeafe; text-decoration: none; }

.teacher-assignment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.teacher-assignment-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 70px; padding: 10px; color: var(--text); background: rgba(248, 250, 252, 0.84); border: 1px solid rgba(219, 234, 254, 0.9); border-radius: 7px; }
.teacher-assignment-card:hover { color: var(--blue); background: #eff6ff; text-decoration: none; }
.teacher-assignment-card > span:nth-child(2) { display: grid; gap: 3px; }
.teacher-assignment-card strong { color: var(--navy); font-size: 0.8rem; }
.teacher-assignment-card small { color: var(--muted); font-size: 0.69rem; line-height: 1.35; }

@media (max-width: 1360px) {
  .teacher-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .teacher-primary-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .teacher-activity-panel { grid-column: 1 / -1; }
  .teacher-secondary-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .teacher-quick-panel { grid-column: 1 / -1; }
  .teacher-quick-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .teacher-class-head,
  .teacher-class-row {
    grid-template-columns: minmax(108px, 1.35fr) minmax(54px, 0.5fr) minmax(54px, 0.55fr) minmax(72px, 0.65fr);
    gap: 6px;
  }
  .teacher-class-head {
    font-size: 0.6rem;
    line-height: 1.2;
    white-space: normal;
  }
  .teacher-class-page-grid { grid-template-columns: 1fr; }
  .teacher-student-card-rich { grid-template-columns: 36px minmax(140px, 1fr) minmax(210px, 1fr); }
  .teacher-student-actions { grid-column: 2 / -1; justify-content: flex-start; }
}

@media (max-width: 860px) {
  .teacher-workspace .utility-bar { min-height: 64px; padding-inline: 14px; }
  .teacher-workspace .global-search { flex-basis: min(420px, 48vw); }
  .teacher-workspace .utility-profile-name { display: none; }
  .teacher-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teacher-primary-grid,
  .teacher-secondary-grid { grid-template-columns: 1fr; }
  .teacher-activity-panel,
  .teacher-quick-panel { grid-column: auto; }
  .teacher-quick-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .teacher-class-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teacher-directory-head,
  .teacher-directory-row { grid-template-columns: minmax(150px, 1.4fr) minmax(62px, 0.6fr) minmax(70px, 0.65fr) minmax(130px, auto); }
  .teacher-directory-head span:nth-child(2),
  .teacher-directory-row > span:nth-child(2),
  .teacher-directory-head span:nth-child(3),
  .teacher-directory-row > span:nth-child(3),
  .teacher-directory-head span:nth-child(5),
  .teacher-directory-row > span:nth-child(5) { display: none; }
}

@media (max-width: 640px) {
  .teacher-workspace .utility-bar { position: sticky; top: 0; gap: 8px; margin: 0; max-width: 100%; border-width: 0 0 1px; }
  .teacher-workspace .global-search { order: 2; flex: 1 0 100%; width: 100%; }
  .teacher-workspace .global-search input { min-height: 38px; }
  .teacher-workspace .teacher-add-menu > summary { min-height: 38px; padding: 0 11px; }
  .teacher-workspace .utility-icon-link { width: 38px; height: 38px; }
  .teacher-page-header { align-items: start; flex-direction: column; }
  .teacher-date-chip { font-size: 0.75rem; }
  .teacher-metric-grid { grid-template-columns: 1fr; }
  .teacher-metric-card { min-height: 86px; }
  .teacher-panel { padding: 14px; }
  .teacher-schedule-row { grid-template-columns: 62px 3px minmax(0, 1fr); gap: 8px; }
  .teacher-schedule-row .teacher-student-count { grid-column: 3; }
  .teacher-schedule-row .teacher-row-action { grid-column: 3; justify-self: start; }
  .teacher-class-head,
  .teacher-class-row { grid-template-columns: minmax(110px, 1.5fr) 0.55fr 0.7fr; }
  .teacher-class-head span:nth-child(3),
  .teacher-class-row span:nth-child(3) { display: none; }
  .teacher-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teacher-class-metrics { grid-template-columns: 1fr; }
  .teacher-student-card-rich { grid-template-columns: 36px minmax(0, 1fr); }
  .teacher-student-stats,
  .teacher-student-actions { grid-column: 2; justify-content: flex-start; }
  .teacher-directory-head,
  .teacher-directory-row { grid-template-columns: minmax(100px, 1fr) 0.5fr minmax(116px, auto); }
  .teacher-directory-head span:nth-child(5),
  .teacher-directory-row > span:nth-child(5) { display: none; }
}

/* Message and attendance workspaces: fast operational views with quiet, clear hierarchy. */
.workspace-page-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 16px;
}

.workspace-page-header h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.75rem, 2.4vw, 2.45rem);
  line-height: 1.1;
}

.workspace-page-header p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.workspace-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.attendance-stat-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.workspace-stat-card {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 106px;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.workspace-stat-card > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.workspace-stat-card > div > span,
.workspace-stat-card small {
  min-width: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.workspace-stat-card strong {
  color: var(--navy);
  font-size: 1.55rem;
  line-height: 1.05;
}

.workspace-stat-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--blue);
  background: #eaf2ff;
  border-radius: 14px;
}

.workspace-stat-icon .icon-svg {
  width: 22px;
  height: 22px;
}

.tone-green .workspace-stat-icon { color: #11995a; background: #e7f9ef; }
.tone-violet .workspace-stat-icon { color: #7041d8; background: #f1ecff; }
.tone-amber .workspace-stat-icon { color: #c87500; background: #fff4dd; }
.tone-red .workspace-stat-icon { color: #d53939; background: #fff0f0; }

.message-workspace {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(430px, 1.46fr) minmax(240px, 0.72fr);
  gap: 14px;
  align-items: stretch;
  min-height: 620px;
}

.message-thread-list,
.message-thread-panel,
.message-context-column {
  min-width: 0;
}

.message-thread-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.message-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  min-height: 58px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
}

.message-tabs a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.message-tabs a.is-active { color: var(--blue); }
.message-tabs a.is-active::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; content: ""; background: var(--blue); }
.message-tabs a span,
.conversation-meta b {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  place-items: center;
  color: #fff;
  background: var(--blue);
  border-radius: 99px;
  font-size: 0.66rem;
}

.message-search {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.message-search input {
  min-width: 0;
  flex: 1;
  height: 38px;
}

.icon-button {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}

.icon-button:hover,
.icon-button:focus-visible { color: var(--blue); border-color: rgba(37, 99, 235, 0.45); }
.icon-button .icon-svg { width: 18px; height: 18px; }

.message-conversation-items {
  display: grid;
  overflow-y: auto;
}

.message-conversation-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  color: var(--navy);
  border-bottom: 1px solid var(--border);
}

.message-conversation-item:hover { background: rgba(239, 246, 255, 0.74); }
.message-conversation-item.is-selected { background: #edf5ff; box-shadow: inset 3px 0 0 var(--blue); }

.conversation-avatar {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--blue);
  background: #e8f0ff;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 850;
}

.conversation-avatar.large { width: 46px; height: 46px; font-size: 0.78rem; }
.conversation-avatar.tiny { width: 30px; height: 30px; font-size: 0.64rem; }

.conversation-copy,
.conversation-meta {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.conversation-copy strong,
.conversation-copy small,
.conversation-copy span,
.conversation-meta time {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-copy strong { font-size: 0.82rem; }
.conversation-copy small,
.conversation-copy span,
.conversation-meta time { color: var(--muted); font-size: 0.7rem; }
.conversation-copy span { margin-top: 3px; }
.conversation-meta { justify-items: end; gap: 6px; }

.message-thread-panel {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.message-thread-header,
.message-subject-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.thread-person { display: flex; align-items: center; min-width: 0; gap: 10px; }
.thread-person h2 { margin: 0; font-size: 1rem; }
.thread-person p,
.message-subject-line span { margin: 3px 0 0; color: var(--muted); font-size: 0.75rem; overflow-wrap: anywhere; }
.message-subject-line { padding-block: 10px; }
.message-subject-line strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }

.message-bubble-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-height: 260px;
  max-height: 480px;
  padding: 16px;
  overflow-y: auto;
  background: rgba(248, 251, 255, 0.56);
}

.message-bubble { display: flex; align-items: end; gap: 8px; max-width: 84%; }
.message-bubble.is-outbound { align-self: flex-end; }
.message-bubble > div { padding: 12px 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; box-shadow: 0 5px 16px rgba(15, 23, 42, 0.04); }
.message-bubble.is-outbound > div { color: #173a78; background: #eaf2ff; border-color: #d6e6ff; border-radius: 14px 14px 4px 14px; }
.message-bubble p { margin: 0; line-height: 1.48; overflow-wrap: anywhere; }
.message-bubble time { display: block; margin-top: 7px; color: var(--muted); font-size: 0.68rem; text-align: right; }
.message-attachment-list { display: grid; gap: 6px; margin-top: 9px; }
.message-attachment-list a { display: flex; align-items: center; min-width: 0; gap: 6px; padding: 7px 8px; color: var(--blue); background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(37, 99, 235, 0.16); border-radius: 8px; font-size: 0.72rem; font-weight: 750; }
.message-attachment-list .icon-svg { width: 15px; height: 15px; flex: 0 0 auto; }
.message-attachment-list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.message-composer { margin: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.message-composer > summary { min-height: 42px; padding: 11px 13px; color: var(--blue); font-weight: 800; cursor: pointer; }
.message-compose-form { display: grid; gap: 10px; padding: 0 13px 13px; }
.message-compose-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.message-compose-meta .field { min-width: 0; }
.message-compose-form textarea { min-height: 88px; resize: vertical; }

.message-context-column { display: grid; align-content: start; gap: 14px; }
.message-context-card { display: grid; gap: 12px; }
.message-context-card .panel-title { margin: 0; }
.message-mobile-context-sheet { display: none; }
.context-detail-list { display: grid; gap: 9px; margin: 0; }
.context-detail-list div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; }
.context-detail-list dt { color: var(--muted); font-size: 0.74rem; }
.context-detail-list dd { min-width: 0; margin: 0; color: var(--navy); font-size: 0.78rem; font-weight: 750; overflow-wrap: anywhere; }
.context-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.context-action-grid a { display: grid; min-height: 58px; padding: 10px; place-items: center; color: var(--blue); background: #f8fbff; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.76rem; font-weight: 800; text-align: center; }
.context-action-grid a:last-child:nth-child(odd) { grid-column: 1 / -1; }
.subtle-context-card { background: rgba(239, 246, 255, 0.72); }
.subtle-context-card p { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.5; }

.notification-page-header {
  margin-bottom: 14px;
}

.notification-inbox {
  padding: 0;
  overflow: hidden;
}

.notification-inbox-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.notification-inbox-header h2 {
  margin: 3px 0 0;
  color: var(--navy);
  font-size: 1rem;
}

.notification-filter-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #f3f6fb;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.notification-filter-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  color: var(--muted);
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.notification-filter-tabs a:hover,
.notification-filter-tabs a.is-active {
  color: var(--blue);
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(20, 44, 86, 0.08);
  text-decoration: none;
}

.notification-filter-tabs a span {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  place-items: center;
  color: #ffffff;
  background: var(--blue);
  border-radius: 99px;
  font-size: 0.64rem;
}

.notification-list {
  display: grid;
}

.notification-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.notification-row:last-child {
  border-bottom: 0;
}

.notification-row.is-unread {
  background: #f7faff;
  box-shadow: inset 3px 0 0 var(--blue);
}

.notification-kind-icon {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--blue);
  background: #eaf2ff;
  border-radius: 12px;
}

.notification-kind-icon .icon-svg {
  width: 19px;
  height: 19px;
}

.notification-row-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.notification-row-copy > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.notification-row-copy h3,
.notification-row-copy p,
.notification-row-copy small {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.notification-row-copy h3 {
  color: var(--navy);
  font-size: 0.86rem;
}

.notification-row-copy p {
  color: #44536d;
  font-size: 0.78rem;
  line-height: 1.42;
}

.notification-row-copy small {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.notification-list > .workspace-empty-state {
  min-height: 260px;
  align-content: center;
  justify-items: center;
}

.workspace-empty-state { display: grid; min-width: 0; gap: 6px; padding: 24px; color: var(--muted); text-align: center; }
.workspace-empty-state strong { color: var(--navy); }
.workspace-empty-state p { margin: 0; font-size: 0.82rem; line-height: 1.45; }
.large-empty-state { align-self: center; justify-items: center; padding: 56px 24px; }

.attendance-control-bar { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.attendance-control-form { display: grid; grid-template-columns: minmax(190px, 1.3fr) minmax(150px, 0.85fr) minmax(130px, 0.72fr) auto; align-items: end; gap: 10px; min-width: min(760px, 100%); }
.attendance-control-form .field { min-width: 0; margin: 0; }
.attendance-control-form .field span { font-size: 0.68rem; }

.attendance-calendar-layout { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(280px, 0.78fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.attendance-calendar-panel { min-width: 0; padding: 0; overflow: hidden; }
.calendar-workspace-header { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--border); }
.calendar-workspace-header h2 { min-width: 0; margin: 0; color: var(--navy); font-size: 1rem; text-align: center; white-space: nowrap; }
.calendar-workspace-header .action-row { flex-wrap: nowrap; justify-self: end; }
.calendar-workspace-header .secondary-button { min-width: 66px; padding-inline: 10px; white-space: nowrap; }
.attendance-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.attendance-calendar-weekday { min-height: 40px; padding: 13px 5px 7px; color: var(--muted); font-size: 0.7rem; font-weight: 800; text-align: center; }
.attendance-calendar-cell { display: grid; align-content: start; min-width: 0; min-height: 105px; gap: 7px; padding: 8px; color: var(--navy); border-top: 1px solid var(--border); border-right: 1px solid var(--border); }
.attendance-calendar-cell:nth-child(7n) { border-right: 0; }
.attendance-calendar-cell.is-outside { color: #a9b4c6; background: rgba(248, 251, 255, 0.54); }
.attendance-calendar-cell.is-selected { background: #f1f6ff; outline: 2px solid var(--blue); outline-offset: -2px; }
.attendance-calendar-cell:hover { background: #f8fbff; }
.attendance-calendar-date { font-size: 0.78rem; font-weight: 800; }
.attendance-calendar-chips { display: flex; flex-wrap: wrap; gap: 4px; align-content: start; }
.attendance-chip { display: inline-grid; min-width: 24px; height: 22px; padding: 0 4px; place-items: center; color: #536174; background: #edf1f6; border-radius: 99px; font-size: 0.6rem; font-style: normal; font-weight: 850; }
.attendance-chip.present { color: #168653; background: #e4f8ed; }
.attendance-chip.absent,
.attendance-chip.sick { color: #cf3434; background: #fff0f0; }
.attendance-chip.tardy { color: #b66a00; background: #fff3df; }
.attendance-chip.excused_absent,
.attendance-chip.early_dismissal { color: #7351c7; background: #f1ecff; }
.attendance-chip.school_activity,
.attendance-chip.remote { color: #2d69c7; background: #e9f2ff; }
.attendance-chip.more { color: var(--muted); background: #eff3f7; }
.attendance-calendar-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 14px; color: var(--muted); border-top: 1px solid var(--border); font-size: 0.7rem; }
.attendance-calendar-legend span::before { display: inline-block; width: 8px; height: 8px; margin-right: 5px; content: ""; background: #cbd5e1; border-radius: 50%; }
.attendance-calendar-legend .present::before { background: #35c879; }
.attendance-calendar-legend .absent::before { background: #f15f5f; }
.attendance-calendar-legend .tardy::before { background: #f4ae3d; }
.attendance-calendar-legend .excused_absent::before { background: #9568ec; }

.attendance-day-panel { display: grid; gap: 14px; }
.attendance-day-panel .panel-title { margin: 0; }
.attendance-day-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; background: #f8fbff; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.attendance-day-counts span { display: grid; gap: 2px; color: var(--muted); font-size: 0.7rem; }
.attendance-day-counts b { color: var(--navy); font-size: 1rem; }
.attendance-day-roster { display: grid; max-height: 330px; overflow-y: auto; }
.attendance-day-roster > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; padding: 9px 0; border-bottom: 1px solid var(--border); }
.attendance-day-roster > div:last-child { border-bottom: 0; }
.attendance-day-roster strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; }
.full-width-button { width: 100%; }
.attendance-history-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); gap: 14px; }
.attendance-monthly-list { display: grid; gap: 0; }
.attendance-monthly-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.attendance-monthly-list > div:last-child { border-bottom: 0; }
.attendance-monthly-list span { min-width: 0; color: var(--navy); font-size: 0.8rem; font-weight: 750; }
.attendance-monthly-list strong { color: var(--success); font-size: 0.9rem; }
.attendance-monthly-list small { color: var(--muted); font-size: 0.7rem; }
.portal-day-records small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.68rem; }
.tiny-icon { width: 30px; height: 30px; border-radius: 10px; }
.tiny-icon .icon-svg { width: 16px; height: 16px; }
.attendance-read-only-note { padding: 12px; border-radius: var(--radius-sm); }

/* Academic overview, status, and reporting pages share the operational shell
   while keeping grade-entry work distinct from published-result analysis. */
.academic-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.academic-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(270px, 0.78fr); gap: 14px; margin-bottom: 14px; }
.academic-action-stack { display: grid; align-content: start; gap: 14px; }
.academic-action-stack .tool-panel { display: grid; gap: 10px; }
.academic-action-stack h2 { margin: 0; color: var(--navy); font-size: 1rem; }
.academic-action-stack .secondary-button { justify-self: start; }
.academic-attention-panel { min-width: 0; }
.academic-course-panel { margin-top: 14px; }
.academic-table-shell { overflow-x: auto; }
.academic-table-shell .data-table { min-width: 680px; }
.academic-table-shell td small { display: block; margin-top: 3px; color: var(--muted); font-size: 0.7rem; }
.academic-filter-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.academic-filter-tabs a { display: inline-flex; min-height: 34px; align-items: center; padding: 0 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; background: #f8fbff; font-size: 0.75rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.academic-filter-tabs a:hover, .academic-filter-tabs a.is-active { color: var(--blue); border-color: #9bc3ff; background: #eaf3ff; }
.attendance-history-controls { display: grid; gap: 12px; margin-bottom: 16px; }
.attendance-history-controls .panel-title { margin: 0; }
.attendance-history-custom-range { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }
.attendance-history-custom-range .field { min-width: 150px; margin: 0; }
.attendance-history-custom-range .field span { font-size: 0.7rem; }
.attendance-history-custom-range .secondary-button { min-height: 38px; }

@media (max-width: 1180px) {
  .academic-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .message-workspace { grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.22fr); }
  .message-context-column { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .attendance-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .workspace-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attendance-calendar-layout,
  .attendance-history-grid,
  .academic-dashboard-grid { grid-template-columns: 1fr; }
  .attendance-control-form { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 100%; }
  .attendance-control-form .secondary-button { width: 100%; }
  .message-workspace { grid-template-columns: minmax(220px, 0.65fr) minmax(0, 1.35fr); }
  .message-context-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .workspace-page-header { align-items: stretch; }
  .workspace-page-header .action-row { justify-content: stretch; }
  .workspace-page-header .action-row > * { flex: 1 1 auto; }
  .workspace-stat-grid.notification-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notification-inbox-header { align-items: stretch; flex-direction: column; }
  .notification-filter-tabs { display: flex; width: 100%; }
  .notification-filter-tabs a { flex: 1 1 0; padding-inline: 7px; }
  .notification-row { align-items: start; grid-template-columns: 34px minmax(0, 1fr); padding: 12px; }
  .notification-kind-icon { width: 34px; height: 34px; border-radius: 10px; }
  .notification-row > .teacher-row-action,
  .notification-row > .status-pill { grid-column: 2; justify-self: start; }
  .workspace-stat-grid,
  .message-context-column { display: none; }
  .academic-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .academic-stat-grid .workspace-stat-card { min-height: 96px; padding: 12px; gap: 8px; }
  .academic-stat-grid .workspace-stat-icon { width: 36px; height: 36px; border-radius: 11px; }
  .academic-stat-grid .workspace-stat-card strong { font-size: 1.2rem; }
  .attendance-history-custom-range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .attendance-history-custom-range .field { min-width: 0; }
  .attendance-history-custom-range .secondary-button { grid-column: 1 / -1; width: 100%; }
  .academic-table-shell .data-table { min-width: 600px; }
  .workspace-stat-card { min-height: 84px; }
  .message-workspace { grid-template-columns: 1fr; min-height: 0; }
  .message-thread-list { max-height: 360px; }
  .message-thread-panel { min-height: 500px; }
  .message-context-column { grid-column: auto; }
  .message-bubble { max-width: 94%; }
  .message-compose-meta { grid-template-columns: 1fr; }
  .message-mobile-context-sheet {
    display: block;
    margin: 10px 12px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #ffffff;
  }
  .message-mobile-context-sheet > summary {
    display: flex;
    align-items: center;
    min-height: 42px;
    gap: 8px;
    padding: 9px 11px;
    color: var(--blue);
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
  }
  .message-mobile-context-sheet > summary::-webkit-details-marker { display: none; }
  .message-mobile-context-sheet > summary .icon-svg { width: 18px; height: 18px; }
  .message-mobile-context-sheet[open]::before {
    position: fixed;
    z-index: calc(var(--z-drawer) - 1);
    inset: 0;
    content: "";
    background: rgba(9, 23, 48, 0.44);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  .message-mobile-context-body {
    position: fixed;
    z-index: var(--z-drawer);
    right: 0;
    bottom: calc(70px + env(safe-area-inset-bottom));
    left: 0;
    display: grid;
    max-height: min(68vh, 560px);
    gap: 16px;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -18px 48px rgba(9, 23, 48, 0.22);
  }
  .message-mobile-context-body .panel-title { margin: 0; }
  .attendance-control-bar { align-items: stretch; }
  .attendance-control-form { grid-template-columns: 1fr; }
  .attendance-calendar-cell { min-height: 78px; padding: 6px 4px; }
  .attendance-calendar-weekday { padding-inline: 2px; font-size: 0.62rem; }
  .attendance-chip { min-width: 18px; height: 18px; padding: 0 2px; font-size: 0.52rem; }
  .attendance-calendar-legend { gap: 8px; font-size: 0.62rem; }
  .attendance-day-roster { max-height: none; }
}

/* LMS workspaces */
.lms-page-header { margin-bottom: 14px; }
.teacher-lms-create-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 15px;
  color: #ffffff;
  background: #2563eb;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
  font-weight: 850;
}
.teacher-lms-create-menu > summary:hover,
.teacher-lms-create-menu[open] > summary { color: #ffffff; background: #1d4ed8; }
.teacher-lms-create-menu > summary > span { font-size: 1.25rem; font-weight: 400; line-height: 1; }
.lms-metric-grid .teacher-metric-card { min-height: 104px; }
.lms-teacher-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.25fr) minmax(260px, 0.86fr) minmax(260px, 0.92fr);
  gap: 14px;
  align-items: start;
}
.lms-assignment-panel { grid-row: auto; }
.lms-quick-panel { grid-column: 1 / -1; }
.lms-assignment-list,
.lms-deadline-list,
.lms-feedback-list { display: grid; }
.lms-assignment-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto 18px;
  gap: 9px;
  align-items: center;
  min-height: 72px;
  padding: 10px 0;
  color: var(--text);
  border-top: 1px solid rgba(226, 232, 240, 0.84);
}
.lms-assignment-row:first-child,
.lms-deadline-list > a:first-child,
.lms-feedback-list > a:first-child { border-top: 0; }
.lms-assignment-row:hover,
.lms-deadline-list > a:hover,
.lms-feedback-list > a:hover { color: var(--blue); text-decoration: none; }
.lms-assignment-row > span:nth-child(2),
.lms-deadline-list > a > span,
.lms-feedback-list > a > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.lms-assignment-row strong,
.lms-deadline-list strong,
.lms-feedback-list strong { color: var(--navy); font-size: 0.78rem; line-height: 1.25; }
.lms-assignment-row small,
.lms-deadline-list small,
.lms-feedback-list small { color: var(--muted); font-size: 0.68rem; line-height: 1.35; }
.lms-assignment-row > span:nth-child(2) small:last-child { color: #64748b; }
.lms-type-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #2563eb;
  background: #dbeafe;
  border-radius: 8px;
}
.lms-type-icon .icon-svg { width: 17px; height: 17px; }
.lms-type-icon.quiz { color: #7c3aed; background: #ede9fe; }
.lms-type-icon.project { color: #047857; background: #d1fae5; }
.lms-type-icon.exam { color: #c2410c; background: #ffedd5; }
.lms-type-icon.activity { color: #0f766e; background: #ccfbf1; }
.lms-type-icon.document { color: #475569; background: #e2e8f0; }
.lms-row-progress { display: grid; justify-items: end; gap: 2px; color: var(--navy); white-space: nowrap; }
.lms-row-progress strong { font-size: 0.75rem; }
.lms-row-progress small { color: var(--muted); font-size: 0.63rem; }
.lms-row-more { color: #94a3b8; font-size: 1.1rem; letter-spacing: 0; }
.lms-progress-overview {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 210px;
}
.lms-progress-ring {
  display: grid;
  width: 128px;
  aspect-ratio: 1;
  place-content: center;
  justify-items: center;
  color: var(--navy);
  background: radial-gradient(circle at center, #ffffff 58%, transparent 59%), conic-gradient(#10b981 calc(var(--progress) * 1%), #e2e8f0 0);
  border-radius: 50%;
}
.lms-progress-ring strong { font-size: 1.45rem; line-height: 1; }
.lms-progress-ring span { margin-top: 4px; color: var(--muted); font-size: 0.67rem; font-weight: 800; }
.lms-progress-legend { display: grid; gap: 12px; }
.lms-progress-legend span { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 8px; color: var(--muted); font-size: 0.74rem; }
.lms-progress-legend i { display: block; width: 8px; height: 8px; border-radius: 50%; }
.lms-progress-legend .is-submitted { background: #10b981; }
.lms-progress-legend .is-review { background: #f59e0b; }
.lms-progress-legend .is-late { background: #ef4444; }
.lms-progress-legend strong { color: var(--navy); font-size: 0.78rem; }
.lms-deadline-list > a,
.lms-feedback-list > a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 10px 0;
  color: var(--text);
  border-top: 1px solid rgba(226, 232, 240, 0.84);
}
.lms-deadline-list time {
  display: grid;
  width: 38px;
  height: 38px;
  place-content: center;
  justify-items: center;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 7px;
  line-height: 1;
}
.lms-deadline-list time strong { color: #2563eb; font-size: 0.61rem; text-transform: uppercase; }
.lms-deadline-list time span { color: var(--navy); font-size: 0.92rem; font-weight: 900; }
.lms-quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.assignment-filter-panel { margin-bottom: 14px; }
.assignment-filter-form { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.assignment-filter-form label:first-child { flex: 1 1 280px; }
.assignment-filter-form label:not(:first-child) { flex: 0 1 190px; }
.assignment-filter-form input,
.assignment-filter-form select { width: 100%; min-height: 38px; }
.assignment-management-head,
.assignment-management-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.55fr) minmax(110px, 0.9fr) minmax(105px, 0.8fr) minmax(96px, 0.65fr) minmax(90px, 0.65fr) minmax(82px, 0.6fr) auto;
  gap: 10px;
  align-items: center;
}
.assignment-management-head { padding: 2px 0 9px; color: var(--muted); font-size: 0.64rem; font-weight: 850; text-transform: uppercase; }
.assignment-management-row { min-height: 74px; padding: 10px 0; border-top: 1px solid rgba(226, 232, 240, 0.84); color: var(--text); font-size: 0.73rem; }
.assignment-management-row > span:not(.assignment-management-title) { display: grid; gap: 3px; min-width: 0; }
.assignment-management-row small { color: var(--muted); font-size: 0.65rem; line-height: 1.3; }
.assignment-management-title { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: center; min-width: 0; }
.assignment-management-title > span:last-child { display: grid; gap: 3px; min-width: 0; }
.assignment-management-title strong { color: var(--navy); font-size: 0.78rem; }
.assignment-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.assignment-row-actions .secondary-button { min-height: 31px; padding: 0 8px; font-size: 0.68rem; }
.assignment-copy-menu { position: relative; }
.assignment-copy-menu > summary { min-height: 31px; padding: 0 8px; color: var(--blue); background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 5px; font-size: 0.68rem; font-weight: 800; cursor: pointer; list-style: none; }
.assignment-copy-menu > summary::-webkit-details-marker { display: none; }
.assignment-copy-menu .more-menu-panel { right: 0; left: auto; min-width: 210px; padding: 10px; }
.assignment-copy-menu form { display: grid; gap: 8px; }
.assignment-copy-menu label { display: grid; gap: 5px; color: var(--muted); font-size: 0.68rem; font-weight: 800; }
.assignment-copy-menu select { width: 100%; min-height: 34px; padding: 0 8px; color: var(--text); background: #ffffff; border: 1px solid #cbd5e1; border-radius: 5px; font: inherit; }
.assignment-copy-menu .primary-button { min-height: 34px; padding: 0 9px; font-size: 0.68rem; }
.assignment-edit-panel { max-width: 820px; }

.student-lms-header { margin-bottom: 12px; }
.student-learning-path {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.student-learning-path > a {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 68px;
  gap: 9px;
  padding: 10px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
}
.student-learning-path > a:hover { border-color: rgba(37, 99, 235, 0.42); text-decoration: none; }
.student-learning-path > a > span:last-child { display: grid; min-width: 0; gap: 2px; }
.student-learning-path strong,
.student-learning-path small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-learning-path strong { font-size: 0.73rem; }
.student-learning-path small { color: var(--muted); font-size: 0.62rem; }
.student-learning-path .panel-icon { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; }
.student-learning-path .icon-svg { width: 17px; height: 17px; }
.student-lms-today { margin-bottom: 12px; }
.student-lms-today-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.student-lms-today-list > a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  gap: 9px;
  padding: 10px;
  color: var(--navy);
  background: #f8fbff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.student-lms-today-list > a > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.student-lms-today-list strong,
.student-lms-today-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-lms-today-list strong { font-size: 0.76rem; }
.student-lms-today-list small { color: var(--muted); font-size: 0.65rem; }
.compact-empty-state { min-height: 66px; padding: 8px; }
.student-lms-tabs { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 12px; padding: 0 4px; border-bottom: 1px solid rgba(203, 213, 225, 0.85); }
.student-lms-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 0; color: var(--muted); border-bottom: 2px solid transparent; font-size: 0.78rem; font-weight: 800; }
.student-lms-tabs a:hover { color: var(--blue); text-decoration: none; }
.student-lms-tabs a.is-active { color: var(--blue); border-bottom-color: var(--blue); }
.student-lms-tabs span { display: grid; min-width: 18px; height: 18px; place-items: center; color: #475569; background: #f1f5f9; border-radius: 9px; font-size: 0.62rem; }
.student-lms-tabs .is-active span { color: #1d4ed8; background: #dbeafe; }
.student-lms-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(270px, 0.62fr); gap: 14px; align-items: start; }
.student-lms-side { display: grid; gap: 14px; }
.student-lms-table-head {
  display: grid;
  grid-template-columns: minmax(170px, 1.4fr) minmax(105px, 0.85fr) minmax(95px, 0.8fr) minmax(74px, 0.55fr) minmax(94px, 0.7fr) auto;
  gap: 10px;
  align-items: center;
}
.student-lms-row {
  display: grid;
  grid-template-columns: 34px minmax(160px, 1.4fr) minmax(105px, 0.85fr) minmax(95px, 0.8fr) minmax(74px, 0.55fr) minmax(94px, 0.7fr) auto;
  gap: 10px;
  align-items: center;
}
.student-lms-table-head { padding: 2px 0 9px 44px; color: var(--muted); font-size: 0.63rem; font-weight: 850; text-transform: uppercase; }
.student-lms-row { min-height: 76px; padding: 11px 0; color: var(--text); border-top: 1px solid rgba(226, 232, 240, 0.84); font-size: 0.72rem; }
.student-lms-row > span:not(.lms-type-icon):not(.status-pill) { display: grid; gap: 3px; min-width: 0; }
.student-lms-row strong { color: var(--navy); font-size: 0.78rem; }
.student-lms-row > span:nth-child(6) strong { font-size: 0.72rem; white-space: nowrap; }
.student-lms-row small { color: var(--muted); font-size: 0.65rem; line-height: 1.3; }
.student-progress-overview { min-height: 170px; }
.student-feedback-panel .teacher-panel-heading a { font-size: 0.72rem; font-weight: 800; }

.assignment-detail-header { margin-bottom: 14px; }
.assignment-detail-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr); gap: 14px; margin-bottom: 14px; }
.assignment-instructions-copy { color: var(--text); line-height: 1.65; overflow-wrap: anywhere; }
.assignment-detail-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(226, 232, 240, 0.9); }
.assignment-detail-meta span { display: grid; gap: 3px; min-width: 0; }
.assignment-detail-meta small { color: var(--muted); font-size: 0.65rem; }
.assignment-detail-meta strong { color: var(--navy); font-size: 0.76rem; overflow-wrap: anywhere; }
.student-submission-panel,
.assignment-submissions-panel { margin-top: 14px; }
.assignment-feedback { margin: 2px 0 15px; padding: 12px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 7px; }
.assignment-feedback strong { color: #1d4ed8; font-size: 0.76rem; }
.assignment-feedback p { margin: 7px 0 10px; color: var(--text); line-height: 1.5; }
.assignment-submission-head,
.assignment-submission-row { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(85px, 0.65fr) minmax(105px, 0.75fr) minmax(70px, 0.45fr) minmax(150px, 1.25fr) auto; gap: 10px; align-items: center; }
.assignment-submission-head { padding: 2px 0 9px; color: var(--muted); font-size: 0.64rem; font-weight: 850; text-transform: uppercase; }
.assignment-submission-row { min-height: 64px; padding: 9px 0; border-top: 1px solid rgba(226, 232, 240, 0.84); color: var(--text); font-size: 0.73rem; }
.assignment-submission-row > span { min-width: 0; overflow-wrap: anywhere; }
.assignment-submission-row > span:first-child { display: grid; gap: 3px; }
.assignment-submission-row strong { color: var(--navy); font-size: 0.77rem; }
.assignment-submission-row small { color: #d97706; font-size: 0.65rem; font-weight: 800; }

@media (max-width: 1180px) {
  .lms-teacher-grid { grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr); }
  .lms-deadline-panel { grid-column: 1; }
  .lms-quick-panel { grid-column: 1 / -1; }
  .student-lms-grid { grid-template-columns: 1fr; }
  .student-lms-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .student-lms-side .lms-progress-overview { grid-template-columns: 102px minmax(0, 1fr); }
  .student-lms-side .lms-progress-ring { width: 102px; }
  .student-learning-path { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .lms-teacher-grid { grid-template-columns: 1fr; }
  .lms-deadline-panel,
  .lms-quick-panel { grid-column: auto; }
  .lms-quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .assignment-management-head,
  .assignment-management-row { grid-template-columns: minmax(185px, 1.45fr) minmax(105px, 0.8fr) minmax(88px, 0.65fr) minmax(80px, 0.6fr) auto; }
  .assignment-management-head span:nth-child(4),
  .assignment-management-row > span:nth-child(4),
  .assignment-management-head span:nth-child(5),
  .assignment-management-row > span:nth-child(5) { display: none; }
  .student-lms-side { grid-template-columns: 1fr; }
  .student-lms-table-head { grid-template-columns: minmax(150px, 1.35fr) minmax(98px, 0.75fr) minmax(82px, 0.6fr) auto; }
  .student-lms-row { grid-template-columns: 34px minmax(150px, 1.35fr) minmax(98px, 0.75fr) minmax(82px, 0.6fr) auto; }
  .student-lms-table-head { padding-left: 44px; }
  .student-lms-table-head span:nth-child(2),
  .student-lms-row > span:nth-child(3),
  .student-lms-table-head span:nth-child(5),
  .student-lms-row > span:nth-child(6) { display: none; }
  .assignment-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .lms-page-header .more-menu { width: 100%; }
  .teacher-lms-create-menu > summary { justify-content: center; width: 100%; }
  .lms-metric-grid { grid-template-columns: 1fr; }
  .lms-assignment-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .lms-assignment-row > .lms-row-progress,
  .lms-assignment-row > .lms-row-more { display: none; }
  .lms-progress-overview { grid-template-columns: 106px minmax(0, 1fr); min-height: 160px; }
  .lms-progress-ring { width: 106px; }
  .lms-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assignment-filter-form { display: grid; grid-template-columns: 1fr; }
  .assignment-filter-form label:first-child,
  .assignment-filter-form label:not(:first-child) { width: 100%; }
  .assignment-management-head { display: none; }
  .assignment-management-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .assignment-management-row > span:not(.assignment-management-title):not(:nth-child(6)) { display: none; }
  .assignment-management-row > .assignment-management-title { grid-column: 1; }
  .assignment-management-row > span:nth-child(6) { grid-column: 1; justify-self: start; }
  .assignment-management-row > .teacher-row-action { grid-column: 2; grid-row: 1 / span 2; }
  .assignment-management-row > .assignment-row-actions { grid-column: 2; grid-row: 1 / span 2; justify-content: end; }
  .student-lms-tabs { gap: 4px 12px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 1px; }
  .student-learning-path {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(148px, 44vw);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .student-learning-path::-webkit-scrollbar { display: none; }
  .student-learning-path > a { min-height: 64px; }
  .student-lms-today-list { grid-template-columns: 1fr; }
  .student-lms-tabs a { flex: 0 0 auto; }
  .student-lms-table-head { display: none; }
  .student-lms-row { grid-template-columns: 34px minmax(0, 1fr) auto; min-height: 84px; }
  .student-lms-row > span:nth-child(3):not(.lms-type-icon):not(.status-pill),
  .student-lms-row > span:nth-child(4):not(.lms-type-icon):not(.status-pill) { display: none; }
  .student-lms-row > .status-pill { grid-column: 2; justify-self: start; }
  .student-lms-row > span:nth-child(6) { grid-column: 2; grid-row: 2; justify-self: end; }
  .student-lms-row > .teacher-row-action { grid-column: 3; grid-row: 1 / span 2; }
  .assignment-detail-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assignment-submission-head { display: none; }
  .assignment-submission-row { grid-template-columns: minmax(0, 1fr) auto; }
  .assignment-submission-row > span:nth-child(3),
  .assignment-submission-row > span:nth-child(4),
  .assignment-submission-row > span:nth-child(5) { display: none; }
  .assignment-submission-row > .teacher-row-action { grid-column: 2; grid-row: 1 / span 2; }
}

.gradebook-health-message,
.gradebook-health-panel {
  border: 1px solid var(--border, #d8e4f4);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
}

.gradebook-health-message {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 0.86rem;
}

.gradebook-health-message a {
  margin-left: auto;
  color: var(--sharpena-primary);
  font-weight: 700;
}

/* LMS quizzes: a focused assessment surface that keeps the rest of the LMS light. */
.quiz-page-header { margin-bottom: 14px; }
.quiz-wizard { max-width: 1020px; }
.quiz-wizard .wizard-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
.quiz-wizard .wizard-stepper-item { justify-content: center; min-width: 0; }
.quiz-wizard .field-span-2 { grid-column: span 2; }
.quiz-builder-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; }
.quiz-builder-list { display: grid; gap: 12px; }
.quiz-question-card { display: grid; gap: 14px; padding: 16px; background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(191, 219, 254, 0.84); border-radius: 8px; box-shadow: 0 8px 22px rgba(37, 99, 235, 0.06); }
.quiz-question-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.question-order { color: var(--navy); font-size: 0.83rem; font-weight: 900; }
.question-card-actions { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.icon-button { display: inline-grid; width: 30px; height: 30px; place-items: center; padding: 0; color: #2563eb; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px; font: inherit; font-weight: 900; cursor: pointer; }
.icon-button:hover { color: #1d4ed8; background: #dbeafe; }
.icon-button.danger { color: #dc2626; background: #fef2f2; border-color: #fecaca; }
.quiz-question-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.quiz-question-grid label,
.question-answer-builder > label { display: grid; gap: 6px; color: var(--text); font-size: 0.78rem; font-weight: 800; }
.quiz-question-grid input,
.quiz-question-grid select,
.quiz-question-grid textarea,
.question-answer-builder input,
.question-answer-builder select,
.question-answer-builder textarea { width: 100%; box-sizing: border-box; }
.choice-editor { display: grid; gap: 8px; }
.choice-editor-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--navy); font-size: 0.78rem; }
.choice-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 30px; gap: 8px; align-items: center; margin-top: 7px; }
.choice-row input[type="radio"] { width: 16px; height: 16px; }
.text-action { padding: 0; color: #2563eb; background: transparent; border: 0; font: inherit; font-weight: 800; cursor: pointer; }
.question-disclosure { border-top: 1px solid rgba(226, 232, 240, 0.92); }
.question-disclosure > summary { padding-top: 12px; color: var(--blue); font-size: 0.76rem; font-weight: 850; cursor: pointer; }
.question-disclosure > div { margin-top: 12px; }
.question-type-note,
.quiz-lock-notice { margin: 0; padding: 12px; color: #7c2d12; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 7px; font-size: 0.82rem; line-height: 1.5; }
.quiz-lock-notice { display: grid; gap: 3px; color: #475569; background: #f8fafc; border-color: #cbd5e1; }
.quiz-settings-grid { align-items: start; }
.empty-field { display: block; }
.quiz-review-card { min-height: 190px; }
.quiz-review-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.quiz-review-card dl div { padding: 10px; background: rgba(239, 246, 255, 0.72); border-radius: 6px; }
.quiz-review-card dt { color: var(--muted); font-size: 0.68rem; font-weight: 850; }
.quiz-review-card dd { margin: 4px 0 0; color: var(--navy); font-size: 0.76rem; font-weight: 800; line-height: 1.35; }
.quiz-detail-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr); gap: 14px; margin-bottom: 14px; }
.quiz-detail-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(226, 232, 240, 0.9); }
.quiz-detail-meta span { display: grid; min-width: 0; gap: 3px; }
.quiz-detail-meta small { color: var(--muted); font-size: 0.66rem; }
.quiz-detail-meta strong { color: var(--navy); font-size: 0.78rem; overflow-wrap: anywhere; }
.quiz-settings-summary { margin-top: 16px; }
.quiz-setting-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 0; }
.quiz-setting-list span { padding: 6px 8px; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 5px; font-size: 0.7rem; font-weight: 750; }
.quiz-action-stack { display: grid; gap: 8px; }
.quiz-action-stack form,
.quiz-action-stack .secondary-button { width: 100%; }
.quiz-action-stack .primary-button,
.quiz-action-stack .secondary-button { justify-content: center; }
.danger-text { color: #dc2626; }
.quiz-question-preview-list { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
.quiz-question-preview-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 9px 0; border-top: 1px solid rgba(226, 232, 240, 0.85); }
.quiz-question-preview-list li:first-child { border-top: 0; }
.quiz-question-preview-list li > div { display: grid; gap: 3px; min-width: 0; }
.quiz-question-preview-list strong { color: var(--navy); font-size: 0.79rem; overflow-wrap: anywhere; }
.quiz-question-preview-list small { color: var(--muted); font-size: 0.68rem; }
.quiz-runner { display: grid; max-width: 900px; gap: 12px; margin: 0 auto; }
.quiz-runner-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; max-width: 900px; margin: 0 auto 14px; }
.quiz-runner-header h1 { margin: 3px 0 5px; color: var(--navy); font-size: 1.65rem; }
.quiz-runner-header p { margin: 0; color: var(--muted); }
.quiz-timer { display: grid; min-width: 126px; gap: 3px; padding: 10px 12px; color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; text-align: right; }
.quiz-timer span { font-size: 0.68rem; font-weight: 800; }
.quiz-timer strong { font-size: 1.1rem; }
.quiz-start-panel { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 14px; max-width: 820px; margin: 0 auto; }
.quiz-start-panel h2 { margin: 0 0 5px; color: var(--navy); font-size: 1rem; }
.quiz-start-panel p { margin: 0; color: var(--muted); line-height: 1.5; }
.quiz-runner-progress { position: sticky; top: 84px; z-index: var(--z-sticky); display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 12px; color: #475569; background: rgba(255,255,255,0.94); border: 1px solid rgba(191, 219, 254, 0.88); border-radius: 8px; box-shadow: var(--shadow-soft); backdrop-filter: var(--blur-glass); }
.quiz-runner-progress strong { color: var(--navy); font-size: 0.78rem; }
.quiz-runner-progress span:last-child { margin-left: auto; color: var(--blue); font-size: 0.72rem; font-weight: 800; }
.quiz-runner-question { display: grid; gap: 14px; padding: 20px; background: rgba(255,255,255,0.88); border: 1px solid rgba(203, 213, 225, 0.9); border-radius: 8px; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04); }
.quiz-runner-question[hidden] { display: none; }
.quiz-runner-question > header { display: flex; justify-content: space-between; gap: 12px; color: var(--blue); font-size: 0.75rem; font-weight: 900; }
.quiz-runner-question h2 { margin: 0; color: var(--navy); font-size: 1rem; line-height: 1.45; }
.quiz-runner-question > input,
.quiz-runner-question > textarea { width: 100%; box-sizing: border-box; }
.quiz-choice-list { display: grid; gap: 8px; }
.quiz-choice-list label { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px; color: var(--text); background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 7px; cursor: pointer; }
.quiz-choice-list label:has(input:checked) { color: #1d4ed8; background: #eff6ff; border-color: #93c5fd; }
.quiz-true-false { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.required-note { color: #b45309; font-size: 0.68rem; font-weight: 800; }
.quiz-runner-actions { position: sticky; bottom: 12px; z-index: var(--z-sticky); display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 10px; background: rgba(255,255,255,0.94); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-soft); }
.quiz-question-navigation { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; color: var(--muted); font-size: 0.78rem; font-weight: 800; }
.quiz-question-navigation .secondary-button[hidden] { display: none; }
.quiz-retake-action { display: flex; justify-content: flex-end; margin-top: 14px; }
.quiz-result-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; padding: 22px; color: var(--navy); background: rgba(239, 246, 255, 0.88); border: 1px solid #bfdbfe; border-radius: 8px; }
.quiz-result-hero h2 { margin: 8px 0 4px; font-size: 2rem; }
.quiz-result-hero h2 small { color: var(--muted); font-size: 1rem; }
.quiz-result-hero p { margin: 0; color: var(--muted); }
.quiz-result-stats { display: grid; grid-template-columns: repeat(2, minmax(90px, 1fr)); gap: 8px; }
.quiz-result-stats span { display: grid; gap: 3px; padding: 10px; background: rgba(255,255,255,0.7); border-radius: 6px; text-align: center; }
.quiz-result-stats small { color: var(--muted); font-size: 0.65rem; font-weight: 800; }
.quiz-result-stats strong { font-size: 1.05rem; }
.quiz-result-list ol { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
.quiz-result-list li { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid #e2e8f0; }
.quiz-result-list li:first-child { border-top: 0; }
.quiz-result-list li > div { display: grid; gap: 4px; min-width: 0; }
.quiz-result-list strong { color: var(--navy); font-size: 0.78rem; }
.quiz-result-list small,
.quiz-result-list p { margin: 0; color: var(--muted); font-size: 0.72rem; line-height: 1.45; overflow-wrap: anywhere; }
.quiz-submission-head,
.quiz-submission-row { display: grid; grid-template-columns: minmax(160px, 1.25fr) 70px minmax(120px, 0.9fr) minmax(110px, 0.85fr) 86px minmax(105px, auto); gap: 10px; align-items: center; }
.quiz-submission-head { padding: 2px 0 9px; color: var(--muted); font-size: 0.64rem; font-weight: 850; text-transform: uppercase; }
.quiz-submission-row { min-height: 64px; padding: 9px 0; color: var(--text); border-top: 1px solid rgba(226, 232, 240, 0.84); font-size: 0.73rem; }
.quiz-submission-row > span { min-width: 0; overflow-wrap: anywhere; }
.quiz-submission-row > span:first-child { display: grid; gap: 3px; }
.quiz-submission-row strong { color: var(--navy); }
.quiz-submission-row small { color: #d97706; font-size: 0.66rem; font-weight: 800; }
.quiz-written-response { padding: 14px; color: var(--text); background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 7px; line-height: 1.6; overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .quiz-wizard .wizard-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quiz-detail-grid { grid-template-columns: 1fr; }
  .quiz-detail-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quiz-submission-head,
  .quiz-submission-row { grid-template-columns: minmax(150px, 1fr) minmax(95px, auto) minmax(85px, auto); }
  .quiz-submission-head span:nth-child(2), .quiz-submission-row > span:nth-child(2), .quiz-submission-head span:nth-child(3), .quiz-submission-row > span:nth-child(3), .quiz-submission-head span:nth-child(5), .quiz-submission-row > span:nth-child(5) { display: none; }
}

@media (max-width: 640px) {
  .quiz-wizard .wizard-stepper { display: grid; grid-template-columns: 1fr; overflow: visible; }
  .quiz-wizard .wizard-stepper-item { width: 100%; min-width: 0; white-space: normal; }
  .quiz-wizard .field-span-2 { grid-column: auto; }
  .quiz-question-grid { grid-template-columns: 1fr; }
  .quiz-question-grid .field-span-2 { grid-column: auto; }
  .quiz-review-card dl { grid-template-columns: 1fr; }
  .empty-field { display: none; }
  .quiz-runner-header, .quiz-result-hero { align-items: stretch; flex-direction: column; }
  .quiz-timer { text-align: left; }
  .quiz-start-panel { grid-template-columns: 38px minmax(0, 1fr); }
  .quiz-start-panel form, .quiz-start-panel .status-pill { grid-column: 2; justify-self: start; }
  .quiz-runner-progress { top: 70px; }
  .quiz-runner-progress span:last-child { width: 100%; margin-left: 0; }
  .quiz-question-navigation { flex-wrap: wrap; }
  .quiz-question-navigation span { order: -1; width: 100%; text-align: center; }
  .quiz-true-false { grid-template-columns: 1fr; }
  .quiz-result-stats { grid-template-columns: 1fr 1fr; }
  .quiz-submission-head { display: none; }
  .quiz-submission-row { grid-template-columns: minmax(0, 1fr) auto; }
  .quiz-submission-row > span:nth-child(4) { grid-column: 1; justify-self: start; }
  .quiz-submission-row > span:last-child { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 760px) {
  .quiz-runner-actions {
    bottom: calc(58px + env(safe-area-inset-bottom));
    z-index: calc(var(--z-sticky) + 1);
  }
}

.gradebook-health-panel.warning,
.gradebook-health-message.warning {
  border-color: #f2c572;
  background: rgba(255, 247, 228, 0.82);
}

.gradebook-health-panel.success,
.gradebook-health-message.success {
  border-color: #a9dfc4;
  background: rgba(240, 253, 247, 0.84);
}

.grade-weight-total-card {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.grade-weight-total-card.is-ready {
  border-color: #89d3b0;
  background: rgba(238, 252, 245, 0.9);
}

.grade-weight-total-card.is-warning {
  border-color: #f2c572;
  background: rgba(255, 248, 235, 0.9);
}

@media (max-width: 700px) {
  .gradebook-health-message a { margin-left: 0; }
  .grade-weight-total-card { align-items: stretch; flex-direction: column; }
}

@media print {
  body {
    background: #ffffff;
  }

  .app-shell {
    display: block;
    min-height: 0;
  }

  .app-sidebar,
  .utility-bar,
  .mobile-bottom-nav,
  .messages,
  .no-print {
    display: none !important;
  }

  .page-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .content-header,
  .tool-panel,
  .metric-card,
  .table-wrap {
    box-shadow: none;
    break-inside: avoid;
  }

  .report-card-student-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .report-card-logo,
  .report-card-student-grid div,
  .report-card-signature-grid div {
    background: #ffffff;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

/* Platform control center: compact operational controls that remain legible at every viewport. */
.platform-status-form,
.platform-filter-form {
  align-items: end;
}

.platform-status-form .field,
.platform-filter-form .field {
  flex: 1 1 180px;
}

.compact-list {
  margin-top: 14px;
}

.compact-list li {
  padding: 9px 0;
}

.compact-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.compact-list-row:last-child {
  border-bottom: 0;
}

.support-access-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.support-access-copy strong,
.support-access-copy small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.support-access-copy small {
  color: var(--muted);
}

.platform-support-history > summary > span {
  display: grid;
  gap: 2px;
}

.role-template-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.role-template-list > div {
  display: grid;
  gap: 3px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.role-template-list > div:last-child {
  border-bottom: 0;
}

.role-template-list small,
.role-template-card small {
  color: var(--muted);
  line-height: 1.4;
}

.role-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.role-template-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(248, 251, 255, 0.8);
}

.role-permission-group {
  margin-bottom: 8px;
}

.role-permission-group > summary {
  min-height: 38px;
}

.role-permission-grid {
  margin: 8px 0 14px;
}

.role-permission-grid label {
  align-items: start;
}

.role-permission-grid label span {
  display: grid;
  gap: 2px;
}

.role-permission-grid label small {
  color: #9a3412;
  font-size: 0.66rem;
}

.role-permission-grid .is-sensitive {
  background: #fff7ed;
  border-color: #fed7aa;
}

.platform-delegated-permissions {
  margin-top: 4px;
}

.platform-delegation-body {
  display: grid;
  gap: 12px;
  padding: 12px 0 2px;
}

.platform-delegated-permissions .field > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.platform-delegated-permissions .field > div label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sensitive-role-warning {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  color: #7c2d12;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 7px;
}

.sensitive-role-warning .field {
  margin: 0;
}

.role-scope-fields [hidden] {
  display: none;
}

.compact-actions {
  gap: 6px;
}

.module-control-form {
  gap: 14px;
}

.module-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.module-choice-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  color: var(--text);
  background: rgba(248, 251, 255, 0.8);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 750;
}

.module-choice-grid input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--blue);
}

.module-choice-grid span,
.portal-url-value,
.audit-context-code {
  min-width: 0;
  overflow-wrap: anywhere;
}

.compact-stack-form {
  gap: 8px;
  margin-top: 12px;
}

.compact-stack-form .field {
  gap: 4px;
}

.audit-context-code {
  display: block;
  max-width: 280px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.67rem;
  line-height: 1.4;
  white-space: pre-wrap;
}

.portal-url-value {
  display: block;
  font-size: 0.96rem !important;
  line-height: 1.35;
}

@media (max-width: 860px) {
  .module-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .module-choice-grid { grid-template-columns: 1fr; }
  .role-template-grid { grid-template-columns: 1fr; }
  .platform-delegated-permissions .field > div { grid-template-columns: 1fr; }
  .platform-status-form,
  .platform-filter-form { align-items: stretch; }
  .platform-status-form .field,
  .platform-filter-form .field { flex-basis: 100%; }
  .platform-status-form .primary-button,
  .platform-filter-form .secondary-button { width: 100%; }
  .compact-actions { align-items: flex-start; flex-direction: column; }
}

/* Teacher gradebook workspace */
.gradebook-page-header {
  align-items: center;
  margin-bottom: 16px;
}

.gradebook-page-header h1 {
  font-size: clamp(2rem, 3vw, 2.7rem);
}

.gradebook-header-actions {
  display: flex !important;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.gradebook-icon-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gradebook-icon-action .icon-svg {
  width: 17px;
  height: 17px;
}

.gradebook-add-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-radius: 8px;
  box-shadow: 0 9px 22px rgba(37, 99, 235, 0.22);
  font-weight: 800;
}

.gradebook-add-menu > summary > span {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
}

.gradebook-add-menu[open] > summary,
.gradebook-add-menu > summary:hover {
  color: #ffffff;
  background: #1d4ed8;
}

.more-menu-panel button {
  width: 100%;
  padding: 9px 10px;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.more-menu-panel button:hover {
  color: var(--blue);
  background: #eff6ff;
}

.gradebook-metric-grid {
  margin-bottom: 16px;
  /* The navigation rail can make this content area much narrower than the
     viewport. Let the grid respond to the content width rather than forcing
     desktop viewport column counts into a narrow teacher workspace. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.gradebook-metric-grid .teacher-metric-card {
  min-height: 108px;
}

.gradebook-metric-grid .teacher-metric-copy strong {
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  overflow-wrap: normal;
  white-space: normal;
}

/* The date card stays readable even when a teacher has a narrow workspace.
   Splitting the year into its own token gives it a natural, intentional wrap
   point instead of letting a full localized date overflow the metric card. */
.gradebook-last-updated-value time {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  max-width: 100%;
}

.gradebook-last-updated-value time > span {
  display: block;
  min-width: 0;
  max-width: 100%;
  color: inherit;
  font: inherit;
  line-height: inherit;
  overflow-wrap: anywhere;
}

/* Keep date tokens as deliberate rows.  This wins over the generic metric
   label span rule, which otherwise shrinks or reflows the date beside its
   year in a narrow teacher workspace. */
.gradebook-last-updated-value .gradebook-last-updated-date,
.gradebook-last-updated-value .gradebook-last-updated-year {
  font-size: inherit;
  font-weight: inherit;
}

.gradebook-tabs {
  display: flex;
  gap: 4px 22px;
  min-width: 0;
  margin: 0 0 14px;
  padding: 0 4px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(203, 213, 225, 0.86);
}

.gradebook-tabs a {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 42px;
  padding: 0 0 10px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  font-size: 0.82rem;
  font-weight: 850;
}

.gradebook-tabs a:hover,
.gradebook-tabs a.is-active {
  color: var(--blue);
  text-decoration: none;
}

.gradebook-tabs a.is-active {
  border-bottom-color: var(--blue);
}

.gradebook-command-bar {
  padding: 14px;
}

.gradebook-command-bar .gradebook-selectors {
  grid-template-columns: minmax(180px, 0.9fr) minmax(150px, 0.8fr) minmax(250px, 1.35fr);
}

.gradebook-toolbar.compact-toolbar {
  grid-template-columns: minmax(180px, 1.1fr) minmax(180px, 1fr) minmax(130px, 0.65fr) minmax(130px, 0.65fr) minmax(320px, auto);
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px 14px;
}

.gradebook-edit-hint {
  display: grid;
  gap: 3px;
  align-self: center;
}

.gradebook-edit-hint strong {
  color: var(--navy);
  font-size: 0.82rem;
}

.gradebook-edit-hint span {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.gradebook-grid-filter select,
.gradebook-command-bar select,
.gradebook-preview-selector select {
  min-height: 40px;
  color: var(--navy);
  background-color: rgba(255, 255, 255, 0.88);
}

.gradebook-save-actions {
  gap: 7px;
}

.gradebook-publish-form { display: inline-flex; margin: 0; }
.gradebook-publish-restricted { display: grid; gap: 4px; max-width: 270px; }
.gradebook-publish-restricted small,
.gradebook-publish-guidance { color: var(--muted); font-size: 0.74rem; line-height: 1.4; }
.grade-lock-notice,
.teacher-lock-notice {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  justify-content: space-between;
  margin: 0 0 16px;
  padding: 15px 17px;
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.96), rgba(255, 251, 235, 0.88));
  border: 1px solid #fed7aa;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(146, 64, 14, 0.07);
}
.grade-lock-notice > div:first-child,
.teacher-lock-notice > div:first-child { display: grid; flex: 1 1 420px; gap: 6px; min-width: 0; }
.grade-lock-notice strong,
.teacher-lock-notice strong { color: #7c2d12; font-size: 0.88rem; overflow-wrap: anywhere; }
.grade-lock-notice p,
.teacher-lock-notice p { color: #9a4f14; font-size: 0.78rem; line-height: 1.45; margin: 0; }
.teacher-lock-links { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 8px; }
.teacher-lock-links .secondary-button { font-size: 0.76rem; }
.term-lock-guidance { margin-bottom: 16px; }
.term-lock-table-panel { overflow: visible; }
.term-lock-table-wrap { overflow-x: auto; padding-bottom: 4px; }
.term-lock-table { border-collapse: separate; border-spacing: 0; min-width: 1180px; width: 100%; }
.term-lock-table th,
.term-lock-table td { border-bottom: 1px solid #e6edf7; padding: 12px 10px; text-align: left; vertical-align: middle; }
.term-lock-table th { color: #55708f; font-size: 0.7rem; font-weight: 850; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; }
.term-lock-table td { color: #284564; font-size: 0.78rem; }
.term-lock-table td > strong,
.term-lock-table td > span { display: block; }
.term-lock-table td small { color: #71809b; display: block; font-size: 0.69rem; line-height: 1.35; margin-top: 3px; }
.term-lock-actions { align-items: center; display: flex; gap: 7px; min-width: 175px; }
.term-lock-actions .secondary-button { font-size: 0.73rem; min-height: 35px; padding: 7px 10px; white-space: nowrap; }
.term-lock-more { position: relative; }
.term-lock-more > summary { align-items: center; cursor: pointer; display: flex; height: 35px; justify-content: center; list-style: none; width: 35px; }
.term-lock-more > summary::-webkit-details-marker { display: none; }
.term-lock-more > summary .nav-icon { color: #355172; height: 18px; width: 18px; }
.term-lock-more .more-menu-panel { left: auto; min-width: 210px; right: 0; z-index: var(--z-dropdown); }
.term-lock-requests { margin-top: 16px; }
.term-lock-request-list { display: grid; gap: 10px; }
.term-lock-request { align-items: start; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr); padding: 14px 0; border-top: 1px solid #e6edf7; }
.term-lock-request:first-child { border-top: 0; }
.term-lock-request > div { display: grid; gap: 5px; min-width: 0; }
.term-lock-request strong { color: var(--navy); font-size: 0.86rem; }
.term-lock-request span,
.term-lock-request p { color: var(--muted); font-size: 0.77rem; line-height: 1.45; margin: 0; overflow-wrap: anywhere; }
.term-lock-review-form { align-items: end; display: grid; gap: 9px; grid-template-columns: minmax(0, 1fr) auto; margin: 0; }
.term-lock-review-form .field { margin: 0; }
.term-lock-review-form .action-row { flex-wrap: nowrap; }
.term-lock-review-form .primary-button,
.term-lock-review-form .secondary-button { font-size: 0.74rem; white-space: nowrap; }
.term-lock-dialog { width: min(510px, calc(100vw - 32px)); margin: auto; padding: 22px; border: 1px solid #d8e3f2; border-radius: 8px; box-shadow: 0 28px 90px rgba(15, 23, 42, 0.28); }
.term-lock-dialog::backdrop { background: rgba(15, 23, 42, 0.42); backdrop-filter: blur(3px); }
.term-lock-dialog form { margin: 0; }

@media (max-width: 980px) {
  .term-lock-table { min-width: 0; }
  .term-lock-table thead { display: none; }
  .term-lock-table,
  .term-lock-table tbody,
  .term-lock-table tr,
  .term-lock-table td { display: block; width: 100%; }
  .term-lock-table tr { padding: 12px 0; border-bottom: 1px solid #dfe9f5; }
  .term-lock-table td { align-items: center; border: 0; display: flex; gap: 12px; justify-content: space-between; padding: 6px 0; }
  .term-lock-table td::before { color: #72829a; content: attr(data-label); flex: 0 0 136px; font-size: 0.68rem; font-weight: 850; text-transform: uppercase; }
  .term-lock-table td:first-child,
  .term-lock-table td:nth-child(2) { display: block; }
  .term-lock-table td:first-child::before,
  .term-lock-table td:nth-child(2)::before { display: none; }
  .term-lock-request { grid-template-columns: 1fr; }
  .term-lock-review-form { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .grade-lock-notice,
  .teacher-lock-notice { align-items: stretch; padding: 14px; }
  .grade-lock-notice .action-row,
  .teacher-lock-links { width: 100%; }
  .grade-lock-notice .primary-button,
  .grade-lock-notice .secondary-button,
  .teacher-lock-links .secondary-button { flex: 1 1 100%; justify-content: center; }
  .term-lock-table td::before { flex-basis: 112px; }
  .term-lock-actions { width: 100%; }
  .term-lock-review-form .action-row { align-items: stretch; flex-direction: column; }
}
.gradebook-publish-guidance { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.gradebook-directory-blocked { display: inline-flex; align-items: center; gap: 6px; color: #92400e; font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
.gradebook-directory-blocked i { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; }

.gradebook-release-dialog {
  width: min(430px, calc(100vw - 32px));
  margin: auto;
  padding: 26px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 14px;
  color: var(--ink, #0f172a);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 28px 90px rgba(15, 23, 42, 0.28);
}

.gradebook-release-dialog::backdrop { background: rgba(15, 23, 42, 0.36); backdrop-filter: blur(3px); }
.gradebook-release-dialog .eyebrow { display: block; margin: 9px 0 4px; }
.gradebook-release-dialog h2 { margin: 0; font-size: 1.18rem; }
.gradebook-release-dialog p { margin: 8px 0 0; color: var(--muted, #64748b); line-height: 1.5; }
.gradebook-release-dialog-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: var(--color-primary, #2563eb); background: rgba(37, 99, 235, 0.1); }
.gradebook-release-dialog-icon svg { width: 21px; height: 21px; }
.gradebook-release-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.gradebook-release-dialog-actions form { margin: 0; }

.teacher-more-tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 14px; }
.teacher-more-tool-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 112px; padding: 16px; border: 1px solid rgba(203, 213, 225, 0.72); border-radius: 8px; color: var(--navy); background: rgba(255, 255, 255, 0.8); box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05); }
.teacher-more-tool-card:hover { color: var(--navy); border-color: #bfdbfe; background: #f8fbff; text-decoration: none; }
.teacher-more-tool-card > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.teacher-more-tool-card strong { font-size: 0.87rem; }
.teacher-more-tool-card small { color: var(--muted); font-size: 0.74rem; line-height: 1.4; overflow-wrap: anywhere; }
.teacher-more-tool-card > b { color: var(--blue); font-size: 0.74rem; white-space: nowrap; }
.teacher-more-tool-card.is-unavailable { color: var(--muted); background: #f8fafc; }
.teacher-more-tool-card.is-unavailable > b { color: var(--muted); }
.teacher-more-groups { display: grid; gap: 18px; }
.teacher-more-group { display: grid; gap: 14px; padding: 18px; border: 1px solid rgba(203, 213, 225, 0.72); border-radius: 8px; background: rgba(255, 255, 255, 0.74); box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05); }
.teacher-more-group > header { display: flex; align-items: center; gap: 12px; }
.teacher-more-group > header > div { display: grid; gap: 3px; min-width: 0; }
.teacher-more-group > header h2 { margin: 0; font-size: 1rem; }
.teacher-more-group > header p { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.45; }
.teacher-more-group .teacher-more-tool-card { min-height: 100px; box-shadow: none; }
@media (max-width: 700px) {
  .teacher-more-group { padding: 14px; }
  .teacher-more-tool-grid { grid-template-columns: 1fr; }
  .teacher-more-tool-card { min-height: 92px; }
}

.gradebook-publication-status {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  color: var(--navy);
  font-size: 0.76rem;
}

.gradebook-publication-status small { color: var(--muted); white-space: nowrap; }

.student-grade-snapshot { margin-bottom: 1rem; }
.student-grade-course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; }
.student-grade-course-card { display: grid; gap: .3rem; min-width: 0; padding: .9rem; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface) 92%, var(--blue) 8%); }
.student-grade-course-card > span, .student-grade-course-card small { color: var(--muted); overflow-wrap: anywhere; }
.student-grade-course-card strong { overflow-wrap: anywhere; }
.student-grade-course-card > div { display: flex; align-items: center; gap: .55rem; margin-top: .25rem; }
.student-grade-course-card b { color: var(--ink); font-size: 1.22rem; }
.student-course-details { margin-top: .3rem; }
.student-course-details summary { color: var(--blue); }
.student-course-details .clean-list { margin-top: .55rem; }
@media (max-width: 620px) { .student-grade-course-grid { grid-template-columns: 1fr; } }
.gradebook-status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 999px; background: #94a3b8; }
.gradebook-status-dot.tone-success { background: #16a34a; }
.gradebook-status-dot.tone-submitted { background: #2563eb; }
.gradebook-status-dot.tone-danger { background: #dc2626; }
.gradebook-status-dot.tone-neutral { background: #94a3b8; }

/* Directory statuses stay compact, readable, and discoverable without long pills. */
.gradebook-directory-status {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
  color: var(--ink, #102348);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.2;
}
.gradebook-directory-status > i,
.gradebook-status-key li > i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #94a3b8;
}
.status-key-draft > i { background: #94a3b8; }
.status-key-needs_attention > i,
.status-key-missing_setup > i { background: #dc2626; }
.status-key-submitted > i { background: #d97706; }
.status-key-ready_to_publish > i { background: #2563eb; }
.status-key-published > i { background: #16a34a; }
.status-key-locked > i { background: #7c3aed; }
.gradebook-directory-publish-form { display: inline; margin: 0; }
.gradebook-directory-publish-form .teacher-row-action { cursor: pointer; }
.gradebook-status-key { margin-top: 12px; border-top: 1px solid var(--border); }
.gradebook-status-key > summary { padding: 11px 0; color: var(--blue); font-size: 0.78rem; font-weight: 800; cursor: pointer; }
.gradebook-status-key > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; margin: 0 0 12px; padding: 0; list-style: none; }
.gradebook-status-key li { display: flex; align-items: flex-start; gap: 7px; min-width: 0; color: var(--muted); font-size: 0.71rem; line-height: 1.35; }
.gradebook-status-key li strong { display: block; color: var(--ink, #102348); }
@media (max-width: 700px) { .gradebook-status-key > ul { grid-template-columns: 1fr; } }

/* Teacher schedule builder: schedule blocks stay compact and work across narrow layouts. */
.schedule-week-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
}

.schedule-week-controls strong { color: var(--navy); font-size: 0.92rem; }
.schedule-week-controls .status-pill { margin-left: auto; }

.teacher-schedule-layout { display: grid; gap: 16px; }

.schedule-grid-panel { min-width: 0; overflow: hidden; }
.teacher-week-grid { display: grid; grid-template-columns: repeat(7, minmax(130px, 1fr)); min-width: 910px; border-top: 1px solid var(--border); }
.teacher-schedule-day { min-width: 0; min-height: 350px; border-right: 1px solid var(--border); }
.teacher-schedule-day:first-child { border-left: 1px solid var(--border); }
.teacher-schedule-day > header { display: grid; gap: 2px; padding: 12px; background: rgba(248, 250, 252, 0.9); border-bottom: 1px solid var(--border); }
.teacher-schedule-day > header strong { color: var(--navy); font-size: 0.8rem; }
.teacher-schedule-day > header span { color: var(--muted); font-size: 0.74rem; }
.teacher-schedule-day.is-today > header { background: #eaf2ff; box-shadow: inset 0 -2px 0 var(--blue); }
.teacher-schedule-day-blocks { display: grid; align-content: start; gap: 8px; padding: 9px; }
.teacher-schedule-block { display: grid; gap: 3px; min-width: 0; padding: 9px; color: var(--navy); background: #eff6ff; border: 1px solid #bfdbfe; border-left: 3px solid var(--blue); border-radius: 7px; }
.teacher-schedule-block:hover { color: var(--navy); background: #dbeafe; text-decoration: none; }
.teacher-schedule-block time { color: #1d4ed8; font-size: 0.68rem; font-weight: 800; }
.teacher-schedule-block strong, .teacher-schedule-block small { overflow-wrap: anywhere; }
.teacher-schedule-block strong { font-size: 0.77rem; line-height: 1.25; }
.teacher-schedule-block small { color: var(--muted); font-size: 0.7rem; line-height: 1.25; }
.teacher-schedule-block.type-planning { background: #ecfdf5; border-color: #bbf7d0; border-left-color: #16a34a; }
.teacher-schedule-block.type-lunch, .teacher-schedule-block.type-break { background: #fff7ed; border-color: #fed7aa; border-left-color: #f59e0b; }
.teacher-schedule-block.type-meeting, .teacher-schedule-block.type-duty { background: #f5f3ff; border-color: #ddd6fe; border-left-color: #7c3aed; }
.teacher-schedule-block.type-no_class { background: #f8fafc; border-color: #cbd5e1; border-left-color: #64748b; }
.teacher-schedule-empty { display: block; padding: 10px 2px; color: var(--muted); font-size: 0.72rem; text-align: center; }

.schedule-editor-dialog { width: min(620px, calc(100vw - 32px)); max-height: min(820px, calc(100vh - 32px)); padding: 0; border: 0; background: transparent; }
.schedule-editor-dialog::backdrop { background: rgba(15, 23, 42, 0.38); backdrop-filter: blur(3px); }
.schedule-editor-panel { max-height: calc(100vh - 48px); overflow: auto; }
.schedule-block-form { display: grid; gap: 12px; }
.schedule-wizard-progress { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 0.74rem; font-weight: 800; }
.schedule-wizard-progress ol { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.schedule-wizard-progress li { width: 20px; height: 4px; border-radius: 99px; background: #dbe5f3; }
.schedule-wizard-progress li.is-active { background: var(--blue); }
.schedule-wizard-step { display: grid; gap: 12px; min-height: 290px; align-content: start; }
.schedule-wizard-step .eyebrow { margin-top: 2px; }
.schedule-wizard-step h3 { margin: 0; color: var(--navy); font-size: 1rem; }
.schedule-wizard-step > p { margin: -5px 0 2px; color: var(--muted); font-size: 0.78rem; line-height: 1.45; }
.schedule-wizard-actions { margin-top: auto; padding-top: 8px; }
.schedule-time-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.schedule-context-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.schedule-days-field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.schedule-days-field legend { color: var(--navy); font-size: 0.78rem; font-weight: 800; }
.schedule-days-field > div { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.schedule-days-field label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 0.8rem; }
.schedule-review-card { display: grid; gap: 6px; padding: 14px; border: 1px solid #bfdbfe; border-radius: 8px; background: #eff6ff; }
.schedule-review-card strong { color: var(--navy); font-size: 0.9rem; }
.schedule-review-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 4px 0 0; }
.schedule-review-card dl > div { display: grid; gap: 2px; min-width: 0; }
.schedule-review-card dt { color: #526a8c; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; }
.schedule-review-card dd { margin: 0; color: #17345d; font-size: 0.78rem; line-height: 1.35; overflow-wrap: anywhere; }
.schedule-toggle-field { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid #bfdbfe; border-radius: 8px; background: #f8fbff; cursor: pointer; }
.schedule-toggle-field input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--blue); }
.schedule-toggle-field span { display: grid; gap: 2px; }
.schedule-toggle-field strong { color: var(--navy); font-size: 0.8rem; }
.schedule-toggle-field small { color: var(--muted); font-size: 0.73rem; line-height: 1.4; }
.schedule-holiday-preview { display: grid; gap: 6px; padding: 12px; border: 1px solid #d9e5f4; border-radius: 8px; background: #fff; }
.schedule-holiday-preview > strong { color: var(--navy); font-size: 0.8rem; }
.schedule-holiday-preview > span, .schedule-holiday-preview li { color: var(--muted); font-size: 0.74rem; line-height: 1.4; }
.schedule-holiday-preview ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; }
.schedule-holiday-warning { margin: 0; padding: 10px 12px; color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 7px; font-size: 0.75rem; line-height: 1.4; }
.calendar-month-day.is-noninstructional { background: linear-gradient(180deg, rgba(255, 251, 235, 0.72), rgba(255, 255, 255, 0.92)); }
.calendar-school-exception { display: block; overflow: hidden; padding: 3px 5px; color: #9a3412; background: #ffedd5; border-radius: 4px; font-size: 0.63rem; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.schedule-block-form .field > ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.schedule-block-form .field > ul label { display: inline-flex; align-items: center; gap: 5px; color: var(--navy); font-size: 0.76rem; font-weight: 700; }
.schedule-editor-actions { justify-content: flex-end; }
.schedule-editor-note { display: flex; gap: 9px; align-items: start; margin-top: 16px; padding: 12px; background: #f8fafc; border: 1px solid var(--border); border-radius: 7px; }
.schedule-editor-note .panel-icon { width: 30px; height: 30px; }
.schedule-editor-note p { margin: 0; color: var(--muted); font-size: 0.76rem; line-height: 1.45; }
.teacher-schedule-setup-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px; border: 1px solid #bfdbfe; border-radius: 8px; background: #eff6ff; }
.teacher-schedule-setup-prompt > div:nth-child(2) { flex: 1 1 280px; min-width: 0; }
.teacher-schedule-setup-prompt strong { color: var(--navy); font-size: 0.84rem; }
.teacher-schedule-setup-prompt p { margin: 3px 0 0; color: var(--muted); font-size: 0.76rem; line-height: 1.4; }
.teacher-schedule-setup-prompt .action-row { margin-left: auto; }
.schedule-today-panel { margin-top: 16px; }
.schedule-today-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.schedule-today-list > div { display: flex; align-items: start; gap: 10px; min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 7px; }
.schedule-today-list time { min-width: 58px; color: var(--blue); font-size: 0.75rem; font-weight: 800; }
.schedule-today-list span { display: grid; min-width: 0; gap: 2px; }
.schedule-today-list strong { color: var(--navy); font-size: 0.8rem; }
.schedule-today-list small { color: var(--muted); font-size: 0.72rem; }

@media (max-width: 1180px) {
  .schedule-grid-panel { overflow-x: auto; }
}

@media (max-width: 680px) {
  .schedule-week-controls {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 8px;
  }
  .schedule-week-controls strong {
    align-self: center;
    min-width: 0;
    font-size: 0.84rem;
    white-space: nowrap;
  }
  .schedule-week-controls .secondary-button {
    min-height: 42px;
    padding-inline: 11px;
  }
  .schedule-week-controls .status-pill { grid-column: 1 / -1; width: 100%; margin-left: 0; }
  .teacher-week-grid { grid-template-columns: 1fr; min-width: 0; }
  .teacher-schedule-day { min-height: 0; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .teacher-schedule-day:not(.is-today) { display: none; }
  .teacher-schedule-day-blocks { grid-template-columns: 1fr; }
  .schedule-editor-dialog { width: min(100vw - 16px, 620px); max-height: calc(100vh - 16px); }
  .schedule-time-fields, .schedule-context-fields, .schedule-review-card dl { grid-template-columns: 1fr; }
  .schedule-wizard-step { min-height: 0; }
  .teacher-schedule-setup-prompt .action-row { width: 100%; margin-left: 0; }
}

.gradebook-view-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 3px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
}

.gradebook-view-toggle a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  color: #64748b;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.gradebook-view-toggle a:hover,
.gradebook-view-toggle a.is-active {
  color: #1d4ed8;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  text-decoration: none;
}

.gradebook-grid-shell-modern {
  max-height: min(68vh, 720px);
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
}

.gradebook-grid-shell-modern .gradebook-grid {
  min-width: max(100%, 1100px);
}

.gradebook-grid-shell-modern .gradebook-grid th,
.gradebook-grid-shell-modern .gradebook-grid td {
  padding: 11px 12px;
  border-right-color: rgba(226, 232, 240, 0.9);
  border-bottom-color: rgba(226, 232, 240, 0.9);
}

.gradebook-grid .assessment-header {
  min-width: 154px;
}

.gradebook-grid .assessment-header > small,
.gradebook-grid .sticky-student-col > small {
  display: block;
  margin-top: 3px;
  color: #94a3b8;
  font-size: 0.67rem;
  font-weight: 750;
}

.gradebook-grid .sticky-student-col {
  width: 250px;
}

.grade-grid-cell {
  position: relative;
  min-width: 154px;
  width: 154px;
}

.grade-grid-cell .grade-cell-input {
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 6px;
  text-align: center;
}

.grade-cell-percentage {
  min-height: 18px;
  margin-top: 5px;
  color: #059669;
  font-size: 0.71rem;
  font-weight: 850;
  text-align: center;
}

.grade-cell-percentage span {
  color: #94a3b8;
  font-weight: 700;
}

.grade-grid-cell .cell-meta {
  justify-content: center;
}

.grade-grid-cell .cell-meta small {
  color: #94a3b8;
  text-align: center;
}

.grade-letter-badge {
  display: inline-grid;
  min-width: 29px;
  height: 24px;
  place-items: center;
  margin: 6px 0 0;
  padding: 0 6px;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
}

.grade-category-cell {
  vertical-align: middle !important;
  text-align: center;
}

.grade-category-cell strong {
  display: block;
  color: var(--navy);
  font-size: 0.92rem;
}

.grade-category-cell small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.67rem;
  line-height: 1.3;
}

.gradebook-insight-grid,
.gradebook-analytics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0;
}

.gradebook-distribution-panel,
.gradebook-alerts-panel {
  min-width: 0;
}

.grade-distribution-chart {
  position: relative;
  display: grid;
  width: min(160px, 100%);
  aspect-ratio: 1;
  place-items: center;
  margin: 7px auto 14px;
  background: var(--distribution-chart, #e2e8f0);
  border-radius: 50%;
}

.grade-distribution-chart::after {
  position: absolute;
  inset: 22%;
  content: "";
  background: rgba(255, 255, 255, 0.98);
  border-radius: 50%;
}

.grade-distribution-chart strong {
  position: relative;
  z-index: 1;
  display: grid;
  color: var(--navy);
  font-size: 1.25rem;
  text-align: center;
}

.grade-distribution-chart strong small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 750;
}

.distribution-segment { display: none; }

.grade-insight-list,
.grade-category-breakdown,
.gradebook-alert-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.grade-insight-list li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 29px;
  color: var(--text);
  font-size: 0.75rem;
}

.grade-insight-list strong { color: var(--navy); font-size: 0.73rem; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.legend-dot.tone-green { background: #16a34a; }
.legend-dot.tone-blue { background: #2563eb; }
.legend-dot.tone-gold { background: #f59e0b; }
.legend-dot.tone-orange { background: #f97316; }
.legend-dot.tone-red { background: #ef4444; }

.grade-category-breakdown li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, 0.7fr);
  gap: 14px;
  align-items: center;
  min-height: 53px;
  border-top: 1px solid rgba(226, 232, 240, 0.84);
}

.grade-category-breakdown li:first-child { border-top: 0; }
.grade-category-breakdown li > span:first-child { display: grid; gap: 3px; min-width: 0; }
.grade-category-breakdown strong { color: var(--navy); font-size: 0.78rem; }
.grade-category-breakdown small { color: var(--muted); font-size: 0.68rem; }

.category-score {
  display: grid;
  grid-template-columns: minmax(36px, 1fr) auto;
  gap: 7px;
  align-items: center;
}

.category-score i {
  display: block;
  height: 6px;
  min-width: 2px;
  background: linear-gradient(90deg, #2dd4bf, #2563eb);
  border-radius: 999px;
}

.gradebook-alert-list li {
  min-height: 58px;
  border-top: 1px solid rgba(226, 232, 240, 0.84);
}

.gradebook-alert-list li:first-child { border-top: 0; }
.gradebook-alert-list li > a,
.gradebook-alert-list li > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  color: var(--text);
}

.gradebook-alert-list li > a:hover { color: var(--blue); text-decoration: none; }
.gradebook-alert-list li > a > span:first-child,
.gradebook-alert-list li > span { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; min-width: 0; }
.gradebook-alert-list strong { color: var(--navy); font-size: 0.78rem; }
.gradebook-alert-list small { color: var(--muted); font-size: 0.68rem; line-height: 1.35; }
.gradebook-alert-list .tone-warning strong { color: #b45309; }
.gradebook-alert-list .tone-danger strong { color: #dc2626; }
.gradebook-alert-list .tone-success strong { color: #047857; }

.gradebook-shortcuts {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 4px;
  padding: 11px 13px;
  color: #475569;
  background: rgba(248, 250, 252, 0.86);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
}

.gradebook-shortcuts > span:first-child {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  color: #2563eb;
  background: #dbeafe;
  border-radius: 7px;
}

.gradebook-shortcuts .icon-svg { width: 17px; height: 17px; }
.gradebook-shortcuts > span:last-child { display: grid; gap: 2px; }
.gradebook-shortcuts strong { color: var(--navy); font-size: 0.76rem; }
.gradebook-shortcuts small { color: var(--muted); font-size: 0.7rem; line-height: 1.35; }

.gradebook-tab-panel { padding: 18px; }
.gradebook-tab-panel > .utility-muted { margin: -3px 0 14px; }
.gradebook-report-table table,
.gradebook-category-table table,
.gradebook-student-preview-table table { min-width: 720px; }
.gradebook-report-table td small,
.gradebook-student-preview-table td small { display: block; margin-top: 3px; color: var(--muted); font-size: 0.7rem; }

.gradebook-tab-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  color: var(--muted);
  border-top: 1px solid rgba(226, 232, 240, 0.84);
  font-size: 0.78rem;
}

.mobile-grade-entry {
  display: none;
}

.gradebook-policy-note,
.gradebook-preview-hero {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 12px 0 14px;
  padding: 13px;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.84), rgba(239, 246, 255, 0.84));
  border: 1px solid rgba(187, 247, 208, 0.76);
  border-radius: 8px;
}

.gradebook-policy-note > span:last-child,
.gradebook-preview-hero > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.gradebook-policy-note strong,
.gradebook-preview-hero strong { color: var(--navy); font-size: 0.84rem; }
.gradebook-policy-note small,
.gradebook-preview-hero small { color: var(--muted); font-size: 0.72rem; line-height: 1.35; }

.gradebook-preview-selector { display: flex; justify-content: flex-end; margin: -46px 0 16px; }
.gradebook-preview-selector .field { width: min(320px, 100%); }
.preview-average { display: grid; min-width: 132px; margin-left: auto; color: #166534; font-size: 1.25rem; font-weight: 900; text-align: right; }
.preview-average b { display: none; }
.preview-average small { color: var(--muted); font-weight: 750; }
.gradebook-preview-note { margin: 12px 0 0; color: #92400e; font-size: 0.78rem; font-weight: 750; }

@media (max-width: 1240px) {
  .gradebook-toolbar.compact-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gradebook-save-actions { grid-column: 1 / -1; justify-content: flex-start !important; }
  .gradebook-insight-grid,
  .gradebook-analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gradebook-alerts-panel { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .gradebook-page-header { align-items: flex-start; }
  .gradebook-header-actions { justify-content: flex-start; }
  .gradebook-command-bar .gradebook-selectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gradebook-command-bar .policy-summary { grid-column: 1 / -1; }
  .gradebook-toolbar.compact-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .gradebook-page-header { gap: 12px; margin-top: 4px; }
  .gradebook-header-actions { width: 100%; }
  .gradebook-header-actions > * { flex: 1 1 auto; }
  .gradebook-header-actions .secondary-button { justify-content: center; }
  .gradebook-metric-grid .teacher-metric-card { min-height: 88px; }
  .gradebook-tabs { gap: 16px; }
  .gradebook-tabs a { min-height: 38px; font-size: 0.76rem; }
  .gradebook-command-bar .gradebook-selectors,
  .gradebook-toolbar.compact-toolbar { grid-template-columns: 1fr; }
  .gradebook-save-actions { grid-column: auto; align-items: stretch; }
  .gradebook-save-actions > * { flex: 1 1 130px; }
  .gradebook-view-toggle { width: 100%; justify-content: space-between; }
  .gradebook-view-toggle a { justify-content: center; flex: 1; }
  .gradebook-grid-shell-modern { max-height: 62vh; margin-inline: -4px; }
  .gradebook-insight-grid,
  .gradebook-analytics-grid { grid-template-columns: 1fr; }
  .gradebook-alerts-panel { grid-column: auto; }
  .gradebook-preview-selector { justify-content: stretch; margin: 0 0 14px; }
  .gradebook-preview-selector .field { width: 100%; }
  .gradebook-preview-hero { align-items: flex-start; flex-wrap: wrap; }
  .preview-average { width: 100%; margin-left: 0; text-align: left; }
  .gradebook-tab-footer { align-items: stretch; flex-direction: column; }
  .gradebook-workspace > .gradebook-toolbar,
  .gradebook-grid-shell-modern {
    display: none;
  }
  .mobile-grade-entry {
    display: grid;
    gap: 12px;
    margin-top: 14px;
  }
  .mobile-grade-entry-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.94), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(147, 197, 253, 0.55);
    border-radius: 8px;
  }
  .mobile-grade-entry-heading h2 {
    margin: 3px 0 0;
    color: var(--navy);
    font-size: 1rem;
  }
  .mobile-grade-entry-heading p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.4;
  }
  .mobile-grade-entry-heading .status-pill {
    justify-self: start;
    max-width: 100%;
    white-space: normal;
  }
  .mobile-grade-entry-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .mobile-grade-entry-controls .field,
  .mobile-grade-entry-controls button {
    min-width: 0;
  }
  .mobile-grade-entry-controls .field:first-child {
    grid-column: 1 / -1;
  }
  .mobile-grade-entry-controls .field span {
    font-size: 0.72rem;
  }
  .mobile-grade-entry-controls button {
    justify-content: center;
    min-height: 42px;
    padding-inline: 10px;
    font-size: 0.74rem;
  }
  .mobile-grade-card-list {
    display: grid;
    gap: 10px;
  }
  .mobile-grade-card {
    display: grid;
    gap: 11px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(203, 213, 225, 0.86);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
  }
  .mobile-grade-card[hidden] {
    display: none;
  }
  .mobile-grade-card > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
  }
  .mobile-grade-select {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
  }
  .mobile-grade-select input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--blue);
  }
  .mobile-grade-student,
  .mobile-grade-average {
    display: grid;
    min-width: 0;
    gap: 2px;
  }
  .mobile-grade-student strong,
  .mobile-grade-average strong {
    overflow: hidden;
    color: var(--navy);
    font-size: 0.88rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-grade-student small,
  .mobile-grade-average small,
  .mobile-grade-assessment span,
  .mobile-grade-card footer span {
    color: var(--muted);
    font-size: 0.7rem;
  }
  .mobile-grade-average {
    text-align: right;
  }
  .mobile-grade-average strong {
    color: #047857;
  }
  .mobile-grade-assessment {
    display: grid;
    gap: 3px;
    padding-top: 10px;
    border-top: 1px solid rgba(226, 232, 240, 0.9);
  }
  .mobile-grade-assessment strong {
    color: var(--navy);
    font-size: 0.78rem;
  }
  .mobile-grade-value-field input {
    min-height: 50px;
    font-size: 1.15rem;
    font-weight: 850;
    text-align: center;
  }
  .mobile-grade-value-field input[aria-invalid="true"] {
    color: #991b1b;
    background: #fff7f7;
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
  }
  .mobile-grade-flags {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .mobile-grade-flags button {
    min-height: 38px;
    padding: 7px 5px;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #dbe4f0;
    border-radius: 6px;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
  }
  .mobile-grade-flags button[aria-pressed="true"] {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #93c5fd;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.14);
  }
  .mobile-grade-comment {
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 6px;
  }
  .mobile-grade-comment summary {
    min-height: 39px;
    padding: 10px 11px;
    color: #475569;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 800;
  }
  .mobile-grade-comment textarea {
    width: calc(100% - 20px);
    margin: 0 10px 10px;
    min-height: 78px;
    padding: 9px;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font: inherit;
    font-size: 0.82rem;
    resize: vertical;
  }
  .mobile-grade-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .mobile-grade-card .text-button {
    padding: 4px 0;
    color: var(--blue);
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 0.73rem;
    font-weight: 850;
  }
  .mobile-grade-actions {
    position: sticky;
    bottom: calc(78px + env(safe-area-inset-bottom));
    z-index: var(--z-sticky);
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 8px;
    padding: 10px;
    background: rgba(248, 250, 252, 0.94);
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    backdrop-filter: var(--blur-glass);
    -webkit-backdrop-filter: var(--blur-glass);
  }
  .mobile-grade-actions button {
    justify-content: center;
    min-height: 46px;
    padding-inline: 10px;
  }
  .mobile-grade-entry-empty {
    display: grid;
    gap: 9px;
  }
}

/* Public entry surfaces: home navigation, school registration, and login. */
.public-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 76px;
  gap: 22px;
  padding: 10px clamp(18px, 3vw, 52px);
  background: rgba(255, 255, 255, 0.88);
}

.public-brand {
  gap: 12px;
}

.public-brand .brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}

.public-brand-copy {
  display: grid;
  gap: 1px;
  line-height: 1.08;
}

.public-brand-copy strong {
  font-size: 1.2rem;
}

.public-brand-copy small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.public-nav-desktop {
  justify-content: center;
  gap: 2px;
}

.public-nav a {
  min-height: 42px;
  padding-inline: 12px;
  font-size: 0.86rem;
}

.public-actions-desktop {
  flex-wrap: nowrap;
}

.public-actions-desktop .primary-button,
.public-actions-desktop .secondary-button {
  min-height: 42px;
  padding-inline: 16px;
  white-space: nowrap;
}

.public-mobile-menu {
  position: relative;
  z-index: var(--z-dropdown);
  display: none;
  margin-left: auto;
}

.public-mobile-menu > summary {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--navy);
  list-style: none;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
}

.public-mobile-menu > summary::-webkit-details-marker {
  display: none;
}

.public-mobile-menu[open] > summary {
  color: var(--blue);
  background: var(--sharpena-primary-soft);
}

.public-mobile-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  width: min(330px, calc(100vw - 36px));
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 16px;
  box-shadow: var(--shadow-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

.public-mobile-menu-panel nav {
  display: grid;
  gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.public-mobile-menu-panel nav a {
  min-height: 42px;
  padding: 11px 12px;
  color: var(--navy);
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 750;
}

.public-mobile-menu-panel nav a:hover {
  color: var(--blue);
  background: var(--sharpena-primary-soft);
  text-decoration: none;
}

.public-mobile-menu-panel .primary-button,
.public-mobile-menu-panel .secondary-button {
  width: 100%;
  min-height: 44px;
}

.registration-page {
  display: grid;
  gap: 22px;
  padding: clamp(8px, 1.5vw, 22px) 0 10px;
}

.registration-page-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
}

.registration-intro-mark,
.registration-card-icon,
.login-card-mark,
.login-trust-icon {
  display: grid;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  place-items: center;
  color: var(--blue);
  background: rgba(239, 246, 255, 0.9);
  border: 1px solid rgba(147, 197, 253, 0.4);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.1);
}

.registration-page-intro h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1.06;
}

.registration-page-intro p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 1.03rem;
}

.registration-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.02fr) minmax(260px, 0.78fr);
  align-items: stretch;
  gap: 18px;
}

.registration-card,
.registration-side-card {
  min-width: 0;
  padding: clamp(20px, 2.3vw, 30px);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

.registration-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.registration-request-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(240, 247, 255, 0.76));
}

.registration-continue-card {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.94), rgba(244, 248, 255, 0.74));
}

.registration-card-heading,
.registration-side-title,
.registration-confirmation {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.registration-card-heading h2,
.registration-side-title h2 {
  margin: 0;
  color: var(--navy);
  font-size: 1.22rem;
  line-height: 1.25;
}

.registration-card-heading p,
.registration-confirmation p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.registration-form-fields,
.registration-request-form,
.registration-continue-form {
  display: grid;
  gap: 11px;
}

.registration-form-fields .field,
.registration-continue-form .field {
  gap: 5px;
  font-size: 0.82rem;
}

.registration-form-fields .field input,
.registration-form-fields .field textarea,
.registration-continue-form .field input {
  min-height: 44px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(148, 163, 184, 0.3);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.registration-form-fields .field textarea {
  min-height: 74px;
  resize: vertical;
}

.registration-form-fields .field small:not(.field-error) {
  display: none;
}

.registration-input-shell,
.login-input-shell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 13px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.registration-input-shell .nav-icon,
.login-input-shell > .nav-icon {
  flex: 0 0 auto;
  color: #6681ae;
}

.registration-input-shell input,
.login-input-shell input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.registration-input-shell:focus-within,
.login-input-shell:focus-within,
.registration-form-fields .field input:focus,
.registration-form-fields .field textarea:focus {
  border-color: rgba(37, 99, 235, 0.68);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  outline: none;
}

.registration-submit {
  width: 100%;
  min-height: 50px;
  gap: 9px;
  margin-top: 2px;
}

.registration-privacy-note,
.registration-continue-help {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: auto 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.registration-privacy-note .nav-icon,
.registration-continue-help .nav-icon {
  flex: 0 0 auto;
  color: var(--blue);
}

.registration-confirmation {
  padding: 13px;
  background: rgba(236, 253, 245, 0.72);
  border: 1px solid rgba(22, 163, 74, 0.24);
  border-radius: 14px;
}

.registration-confirmation strong {
  color: #166534;
}

.registration-aside {
  display: grid;
  align-content: start;
  gap: 16px;
}

.registration-side-card {
  padding: 20px;
}

.registration-side-title {
  align-items: center;
  margin-bottom: 16px;
}

.registration-side-title .registration-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.registration-side-title h2 {
  font-size: 1rem;
}

.registration-journey-list,
.registration-benefit-list,
.login-trust-list {
  display: grid;
  gap: 13px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.registration-journey-list li {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 11px;
}

.registration-journey-list li:not(:last-child)::after {
  position: absolute;
  top: 30px;
  bottom: -13px;
  left: 14px;
  width: 1px;
  content: "";
  background: rgba(37, 99, 235, 0.25);
}

.registration-journey-list li > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue), #60a5fa);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
}

.registration-journey-list strong,
.registration-benefit-list li {
  color: var(--navy);
  font-size: 0.82rem;
}

.registration-journey-list small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.registration-benefit-list {
  gap: 10px;
}

.registration-benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  line-height: 1.35;
}

.registration-benefit-list .nav-icon {
  flex: 0 0 auto;
  color: var(--blue);
}

.icon-success {
  color: #059669;
  background: rgba(236, 253, 245, 0.9);
  border-color: rgba(110, 231, 183, 0.44);
}

.icon-sky {
  color: #0369a1;
  background: rgba(240, 249, 255, 0.92);
  border-color: rgba(125, 211, 252, 0.44);
}

.icon-gold {
  color: #b45309;
  background: rgba(255, 251, 235, 0.92);
  border-color: rgba(253, 230, 138, 0.5);
}

.auth-public-header {
  grid-template-columns: minmax(0, 1fr) auto;
}

.auth-home-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 10px;
  color: var(--navy);
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 750;
}

.auth-home-link:hover {
  color: var(--blue);
  background: var(--sharpena-primary-soft);
  text-decoration: none;
}

.login-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, 0.88fr);
  min-height: min(760px, calc(100vh - 146px));
  overflow: hidden;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.23);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
}

.login-story {
  position: relative;
  display: grid;
  align-content: center;
  gap: 22px;
  min-height: 0;
  padding: clamp(34px, 5vw, 80px);
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(234, 245, 255, 0.78)),
    rgba(239, 246, 255, 0.72);
  border-right: 1px solid rgba(148, 163, 184, 0.2);
}

.login-story::after {
  position: absolute;
  right: -10%;
  bottom: -40%;
  width: 72%;
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 48% 52% 46% 54%;
  transform: rotate(20deg);
}

.login-story-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 8px 11px;
  color: #1d4ed8;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(147, 197, 253, 0.58);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
}

.login-story h1 {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0;
  color: var(--navy);
  font-size: clamp(2.3rem, 4.4vw, 4.45rem);
  line-height: 1.02;
}

.login-story h1 span {
  color: var(--blue);
}

.login-story > p {
  position: relative;
  z-index: 1;
  max-width: 500px;
  margin: 0;
  color: #526581;
  font-size: 1.02rem;
  line-height: 1.62;
}

.login-trust-list {
  position: relative;
  z-index: 1;
  max-width: 500px;
  gap: 14px;
}

.login-trust-list li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.login-trust-list strong,
.login-continue-link strong {
  display: block;
  color: var(--navy);
  font-size: 0.95rem;
}

.login-trust-list small,
.login-continue-link small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.login-dashboard-visual {
  position: absolute;
  z-index: 1;
  right: clamp(20px, 6%, 70px);
  bottom: -130px;
  display: grid;
  width: min(360px, 62%);
  gap: 10px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.77);
  border: 1px solid rgba(191, 219, 254, 0.92);
  border-radius: 18px;
  box-shadow: 0 28px 64px rgba(30, 64, 175, 0.16);
  transform: rotate(-5deg);
}

.login-dashboard-top,
.login-dashboard-metrics,
.login-dashboard-list {
  display: flex;
  align-items: center;
  gap: 8px;
}

.login-dashboard-top .brand-mark {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: 0.72rem;
}

.login-dashboard-top strong {
  color: var(--navy);
  font-size: 0.82rem;
}

.login-dashboard-top small {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.7rem;
}

.login-dashboard-metrics {
  gap: 10px;
}

.login-dashboard-metrics span {
  display: grid;
  flex: 1 1 0;
  gap: 4px;
  padding: 10px;
  background: rgba(248, 250, 252, 0.84);
  border: 1px solid rgba(226, 232, 240, 0.88);
  border-radius: 10px;
}

.login-dashboard-metrics small,
.login-dashboard-list i {
  color: var(--muted);
  font-size: 0.66rem;
}

.login-dashboard-metrics strong {
  color: var(--navy);
  font-size: 1.15rem;
}

.login-dashboard-chart {
  display: flex;
  align-items: end;
  height: 78px;
  gap: 11px;
  padding: 10px 12px 8px;
  background: rgba(248, 250, 252, 0.78);
  border: 1px solid rgba(226, 232, 240, 0.88);
  border-radius: 12px;
}

.login-dashboard-chart span {
  flex: 1 1 0;
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  border-radius: 999px 999px 3px 3px;
}

.login-dashboard-chart span:nth-child(1) { height: 32%; }
.login-dashboard-chart span:nth-child(2) { height: 48%; }
.login-dashboard-chart span:nth-child(3) { height: 40%; }
.login-dashboard-chart span:nth-child(4) { height: 76%; }
.login-dashboard-chart span:nth-child(5) { height: 66%; }
.login-dashboard-chart span:nth-child(6) { height: 92%; }

.login-dashboard-list {
  display: grid;
  gap: 8px;
}

.login-dashboard-list i {
  display: block;
  height: 10px;
  background: linear-gradient(90deg, rgba(147, 197, 253, 0.5), rgba(226, 232, 240, 0.56));
  border-radius: 999px;
}

.login-dashboard-list i:nth-child(2) { width: 82%; }
.login-dashboard-list i:nth-child(3) { width: 64%; }

.login-card {
  display: grid;
  align-content: center;
  justify-items: stretch;
  gap: 14px;
  min-width: 0;
  padding: clamp(28px, 4.4vw, 68px);
  background: rgba(255, 255, 255, 0.9);
}

.login-card-mark {
  justify-self: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
}

.login-card h2,
.login-card > p {
  margin: 0;
  text-align: center;
}

.login-card h2 {
  color: var(--navy);
  font-size: 1.85rem;
}

.login-card > p {
  margin-top: -8px;
  color: var(--muted);
  font-size: 0.92rem;
}

.login-form {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}

.login-field {
  gap: 6px;
  font-size: 0.82rem;
}

.login-password-shell {
  padding-right: 6px;
}

.password-toggle {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  color: #64748b;
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}

.password-toggle:hover {
  color: var(--blue);
  background: var(--sharpena-primary-soft);
}

.login-form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.8rem;
}

.login-form-options a {
  font-weight: 750;
}

.login-remember {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 7px;
  color: var(--muted);
  font-weight: 650;
  min-height: 40px;
}

.login-remember input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

.login-submit,
.login-register-button {
  width: 100%;
  min-height: 50px;
  gap: 9px;
}

.login-workspace .login-submit {
  background: var(--sharpena-primary);
}

.csrf-failure-workspace {
  grid-template-columns: minmax(0, 620px);
  justify-content: center;
  min-height: min(580px, calc(100vh - 146px));
}

.csrf-failure-card {
  justify-items: center;
  text-align: center;
  border-left: 4px solid var(--blue);
}

.csrf-failure-card h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.csrf-failure-card > p {
  max-width: 42ch;
  margin: 0;
  text-align: center;
}

.csrf-failure-actions {
  justify-content: center;
}

.login-workspace .login-story h1 span {
  color: var(--sharpena-primary);
}

.login-continue-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.76rem;
  text-align: center;
}

.login-continue-divider::before,
.login-continue-divider::after {
  flex: 1 1 0;
  height: 1px;
  content: "";
  background: var(--border);
}

.login-continue-link {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  color: var(--navy);
  background: rgba(248, 250, 252, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 13px;
}

.login-continue-link:hover {
  color: var(--blue);
  background: var(--sharpena-primary-soft);
  text-decoration: none;
}

.login-continue-link .login-trust-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.login-security-note {
  margin-top: 2px !important;
  color: #64748b !important;
  font-size: 0.75rem !important;
  line-height: 1.5;
}

.login-security-note .nav-icon {
  color: #059669;
  vertical-align: -2px;
}

.login-platform-notice,
.login-domain-target {
  display: grid;
  gap: 7px;
  padding: 12px 13px;
  color: #355077;
  background: #f4f8ff;
  border: 1px solid #cfe0ff;
  border-radius: 12px;
  font-size: 0.8rem;
  line-height: 1.45;
}

.login-platform-notice strong {
  color: var(--navy);
}

.login-platform-notice .action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.login-domain-target {
  margin-bottom: 4px;
  color: var(--blue);
  font-weight: 700;
}

.login-find-school {
  margin: 0 !important;
  text-align: center;
  font-size: 0.82rem;
}

.find-school-card {
  width: min(100%, 620px);
  margin: 56px auto;
}

.find-school-results {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.find-school-results h2 {
  margin: 0;
  color: var(--navy);
  font-size: 1rem;
}

.school-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  background: var(--panel);
}

.school-result + .school-result { margin-top: 10px; }
.school-result:hover { border-color: var(--blue); box-shadow: 0 8px 20px rgba(15, 23, 42, .08); }
.school-result__icon { display: grid; width: 42px; height: 42px; place-items: center; flex: 0 0 auto; border-radius: 10px; background: var(--color-primary-soft); color: var(--blue); }
.school-result__content { min-width: 0; display: grid; gap: 4px; }
.school-result__name { min-width: 0; overflow-wrap: break-word; word-break: normal; line-height: 1.2; font-size: 1rem; }
.school-result__content small { overflow-wrap: break-word; word-break: normal; }
.school-result__action { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap; color: var(--blue); font-weight: 700; }
.find-school-empty { margin: 0; padding: 18px 20px; border: 1px dashed var(--border); border-radius: 14px; color: var(--muted); }

@media (max-width: 560px) {
  .school-result { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 16px; }
  .school-result__action { grid-column: 1 / -1; justify-content: center; width: 100%; min-height: 42px; border-radius: 9px; background: var(--blue); color: #fff; }
}

@media (max-width: 1120px) {
  .registration-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .registration-aside {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .login-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.92fr);
  }

  .login-story {
    padding: 44px;
  }
}

@media (max-width: 1060px) {
  .public-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 68px;
    flex-direction: row;
  }

  .public-nav-desktop,
  .public-actions-desktop {
    display: none;
  }

  .public-mobile-menu {
    display: block;
  }

  .login-workspace {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .login-story {
    min-height: 520px;
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  }

  .login-card {
    padding: 44px min(13vw, 92px);
  }
}

@media (max-width: 680px) {
  .public-header {
    gap: 12px;
    padding-inline: 16px;
  }

  .public-brand .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .public-brand-copy strong {
    font-size: 1.05rem;
  }

  .public-brand-copy small {
    font-size: 0.62rem;
  }

  .public-mobile-menu-panel {
    background: #ffffff;
  }

  .registration-page {
    gap: 18px;
  }

  .registration-page-intro {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .registration-page-grid,
  .registration-aside {
    grid-template-columns: 1fr;
  }

  .registration-aside {
    grid-column: auto;
  }

  .registration-card,
  .registration-side-card {
    padding: 20px;
    border-radius: 18px;
  }

  .registration-card-heading {
    gap: 11px;
  }

  .registration-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .auth-public-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .auth-home-link {
    width: 42px;
    height: 42px;
    justify-content: center;
    padding: 0;
  }

  .auth-home-link > .nav-icon:last-child,
  .auth-home-link:not(.nav-icon) {
    font-size: 0;
  }

  .auth-home-link .nav-icon {
    font-size: 1rem;
  }

  .auth-home-link .nav-icon:last-child {
    display: none;
  }

  .login-workspace {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .login-story {
    display: none;
  }

  .login-card {
    padding: 28px 20px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 20px;
    box-shadow: var(--shadow-card);
  }

  .login-card-mark {
    width: 58px;
    height: 58px;
  }

  .login-form-options {
    align-items: flex-start;
    flex-direction: column;
  }

  .login-security-note {
    padding-inline: 10px;
  }
}

/* Public legal policy pages and registration consent. */
.site-public-footer {
  width: min(1240px, calc(100% - 32px));
  margin: 26px auto 34px;
  padding: 0;
}

.registration-legal-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  color: var(--ink, #102348);
  background: rgba(248, 250, 252, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  font-size: 0.82rem;
  line-height: 1.45;
}

.registration-legal-acceptance input {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  accent-color: var(--blue);
}

.registration-legal-acceptance a {
  color: var(--blue);
  font-weight: 750;
}

.registration-legal-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr);
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: rgba(239, 246, 255, 0.82);
  border: 1px solid rgba(147, 197, 253, 0.4);
  border-radius: 16px;
}

.registration-legal-review h2 {
  margin: 4px 0 6px;
  color: var(--navy);
  font-size: 1.1rem;
}

.registration-legal-review p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.registration-legal-form {
  display: grid;
  gap: 10px;
}

.registration-legal-form .primary-button {
  justify-self: start;
  min-height: 44px;
}

.registration-legal-recorded {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 13px;
  color: #166534;
  background: rgba(236, 253, 245, 0.82);
  border: 1px solid rgba(34, 197, 94, 0.24);
  border-radius: 12px;
}

.registration-legal-recorded .nav-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #059669;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
}

.registration-legal-recorded strong,
.registration-legal-recorded small {
  display: block;
}

.registration-legal-recorded small {
  margin-top: 3px;
  color: #3f7a58;
  font-size: 0.76rem;
  line-height: 1.4;
}

.legal-public-header {
  grid-template-columns: minmax(0, 1fr) auto;
}

.legal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legal-policy-page {
  display: grid;
  gap: 22px;
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: clamp(6px, 1.5vw, 22px) 0 20px;
  scroll-behavior: smooth;
}

.legal-policy-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 0.56fr);
  align-items: end;
  gap: 24px;
  padding: clamp(24px, 4vw, 50px);
  background: rgba(247, 251, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
}

.legal-policy-hero h1 {
  margin: 7px 0 8px;
  color: var(--navy);
  font-size: clamp(2.1rem, 4vw, 3.45rem);
  line-height: 1.08;
}

.legal-policy-hero p {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.legal-policy-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
}

.legal-policy-meta div {
  min-width: 0;
  padding: 13px;
  border-right: 1px solid rgba(148, 163, 184, 0.16);
}

.legal-policy-meta div:last-child {
  border-right: 0;
}

.legal-policy-meta dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 750;
  text-transform: uppercase;
}

.legal-policy-meta dd {
  margin: 5px 0 0;
  color: var(--navy);
  font-size: 0.79rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.legal-policy-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.3fr) minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}

.legal-toc-card {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 11px;
  padding: 17px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

.legal-toc-card strong {
  color: var(--navy);
  font-size: 0.9rem;
}

.legal-toc-card nav,
.legal-toc-mobile nav {
  display: grid;
  gap: 2px;
}

.legal-toc-card a,
.legal-toc-mobile a {
  padding: 7px 8px;
  color: #546884;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.35;
}

.legal-toc-card a:hover,
.legal-toc-mobile a:hover {
  color: var(--blue);
  background: var(--sharpena-primary-soft);
  text-decoration: none;
}

.legal-toc-mobile {
  display: none;
}

.legal-document-card {
  min-width: 0;
  padding: clamp(24px, 4vw, 52px);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}

.legal-policy-section {
  padding: 0 0 30px;
  margin: 0 0 30px;
  scroll-margin-top: 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.legal-policy-section:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.legal-section-heading {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
}

.legal-section-heading > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--blue);
  background: rgba(239, 246, 255, 0.92);
  border-radius: 9px;
  font-size: 0.75rem;
  font-weight: 800;
}

.legal-section-heading h2 {
  margin: 0;
  color: var(--navy);
  font-size: 1.12rem;
  line-height: 1.28;
}

.legal-section-heading a {
  color: #91a4c4;
  font-weight: 800;
  text-decoration: none;
}

.legal-section-heading a:hover {
  color: var(--blue);
}

.legal-policy-section p,
.legal-policy-section li {
  color: #4c607d;
  font-size: 0.94rem;
  line-height: 1.65;
}

.legal-policy-section p {
  margin: 0 0 11px;
}

.legal-policy-section ul {
  display: grid;
  gap: 7px;
  padding-left: 21px;
  margin: 11px 0 0;
}

.legal-policy-section li::marker {
  color: var(--blue);
}

.legal-information-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 15px;
}

.legal-information-groups > div {
  min-width: 0;
  padding: 14px;
  background: rgba(248, 250, 252, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
}

.legal-information-groups h3 {
  margin: 0;
  color: var(--navy);
  font-size: 0.87rem;
}

.legal-information-groups ul {
  margin-top: 8px;
}

.legal-information-groups li {
  font-size: 0.82rem;
}

.legal-inline-link {
  color: var(--blue);
  font-weight: 750;
}

@media (max-width: 980px) {
  .legal-policy-hero { grid-template-columns: 1fr; }
  .legal-policy-meta { max-width: 620px; }
  .legal-policy-layout { grid-template-columns: 1fr; }
  .legal-toc-desktop { display: none; }
  .legal-toc-mobile {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 12px;
  }
  .legal-toc-mobile summary { color: var(--navy); cursor: pointer; font-size: 0.9rem; font-weight: 800; }
  .legal-toc-mobile nav { margin-top: 4px; }
}

@media (max-width: 680px) {
  .site-public-footer { width: min(100% - 32px, 520px); margin: 22px auto 28px; }
  .registration-legal-review { grid-template-columns: 1fr; padding: 17px; }
  .registration-legal-form .primary-button { width: 100%; justify-content: center; }
  .legal-header-actions .auth-home-link { font-size: 0; }
  .legal-header-actions .auth-home-link .nav-icon { font-size: 1rem; }
  .legal-login-link { display: none; }
  .legal-policy-page { gap: 16px; }
  .legal-policy-hero { gap: 18px; padding: 24px 20px; border-radius: 18px; }
  .legal-policy-meta { grid-template-columns: 1fr; }
  .legal-policy-meta div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid rgba(148, 163, 184, 0.16); }
  .legal-policy-meta div:last-child { border-bottom: 0; }
  .legal-policy-meta dd { margin: 0; }
  .legal-document-card { padding: 24px 18px; border-radius: 16px; }
  .legal-policy-section { padding-bottom: 24px; margin-bottom: 24px; }
  .legal-information-groups { grid-template-columns: 1fr; }
}

/* Parent portal: family-facing views use initials and never render profile photography. */
.brand-label small,
.utility-profile-name small {
  display: block;
  color: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.25;
  opacity: 0.74;
}

.parent-profile-avatar,
.parent-large-initials,
.parent-child-initials,
.parent-metric-icon,
.parent-activity-icon {
  align-items: center;
  background: #e9f0ff;
  border-radius: 50%;
  color: #155eef;
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 800;
  justify-content: center;
}

.parent-profile-avatar {
  background: #e8f0ff;
  font-size: 0.76rem;
  height: 34px;
  width: 34px;
}

.parent-sidebar-links {
  display: grid;
  gap: 7px;
  margin-top: auto;
}

.parent-sidebar-links a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  text-decoration: none;
}

.parent-sidebar-links a:hover { color: #fff; }

.parent-child-switcher {
  display: grid;
  gap: 12px;
  margin: 0 0 20px;
}

.parent-child-switcher-heading,
.parent-page-header,
.parent-panel-heading,
.parent-subsection-heading,
.parent-calendar-heading,
.parent-report-document-header,
.parent-dashboard-grid,
.parent-bottom-grid,
.parent-calendar-layout,
.parent-attendance-layout,
.parent-transcript-layout,
.parent-report-layout,
.parent-message-workspace {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.parent-child-switcher-heading h2,
.parent-page-header h1,
.parent-panel h2,
.parent-focus-card h2,
.parent-panel h3,
.parent-child-summary-card h2,
.parent-report-document-header h2 {
  color: #102a56;
  margin: 0;
}

.parent-child-switcher-heading h2 { font-size: 1rem; }
.parent-child-switcher-heading .text-action,
.parent-subsection-heading > a,
.text-action {
  color: #155eef;
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
}

.parent-child-card-rail {
  display: grid;
  gap: 12px;
  grid-auto-columns: minmax(238px, 1fr);
  grid-auto-flow: column;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: thin;
}

.parent-child-card-rail form { min-width: 0; }

.parent-child-option {
  align-items: center;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  color: #102a56;
  cursor: pointer;
  display: flex;
  gap: 12px;
  min-height: 88px;
  padding: 14px;
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  width: 100%;
}

.parent-child-option:hover,
.parent-child-option:focus-visible {
  border-color: #6ea1ff;
  box-shadow: 0 9px 22px rgba(32, 83, 171, 0.12);
  outline: none;
  transform: translateY(-1px);
}

.parent-child-option.is-active {
  background: #f7faff;
  border-color: #2e72f6;
  box-shadow: 0 9px 22px rgba(32, 83, 171, 0.14);
}

.parent-child-initials {
  font-size: 1rem;
  height: 48px;
  width: 48px;
}

.parent-child-copy { display: grid; gap: 3px; min-width: 0; }
.parent-child-copy strong { font-size: 0.91rem; overflow-wrap: anywhere; }
.parent-child-copy small { color: #607091; font-size: 0.76rem; overflow-wrap: anywhere; }
.parent-child-copy em { color: #3b69c9; font-size: 0.71rem; font-style: normal; font-weight: 800; }
.parent-child-check { color: #167a3d; margin-left: auto; width: 18px; }

.parent-portal-page {
  display: grid;
  gap: 22px;
  margin: 0 auto;
  max-width: 1540px;
  padding-bottom: 34px;
}

.parent-page-header { align-items: flex-end; gap: 18px; }
.parent-page-header > div { min-width: 0; }
.parent-page-header h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.16; }
.parent-page-header p { color: #607091; margin: 7px 0 0; max-width: 680px; }

.parent-metric-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.parent-metric-card,
.parent-panel,
.parent-focus-card,
.parent-child-summary-card {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 10px 28px rgba(20, 57, 112, 0.07);
}

.parent-metric-card {
  align-items: center;
  border-radius: 10px;
  display: flex;
  gap: 12px;
  min-height: 102px;
  padding: 16px;
}

.parent-metric-icon { height: 44px; width: 44px; }
.parent-metric-icon .icon-svg { height: 21px; width: 21px; }
.parent-metric-copy { display: grid; gap: 3px; min-width: 0; }
.parent-metric-copy small,
.parent-metric-copy em { color: #657390; font-size: 0.73rem; font-style: normal; line-height: 1.25; }
.parent-metric-copy strong {
  color: #112851;
  font-size: 1.42rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.parent-metric-link { color: #155eef; font-size: 1.1rem; margin-left: auto; text-decoration: none; }
.parent-metric-card.tone-green .parent-metric-icon { background: #e8f8ef; color: #168447; }
.parent-metric-card.tone-orange .parent-metric-icon { background: #fff1e2; color: #ca6a00; }
.parent-metric-card.tone-red .parent-metric-icon { background: #fff0f1; color: #d92d20; }
.parent-metric-card.tone-violet .parent-metric-icon { background: #f1ecff; color: #7546e6; }

.parent-dashboard-grid,
.parent-bottom-grid,
.parent-calendar-layout,
.parent-attendance-layout,
.parent-transcript-layout,
.parent-report-layout,
.parent-message-workspace {
  align-items: stretch;
  gap: 18px;
}

.parent-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, 0.8fr); }
.parent-bottom-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); }
.parent-calendar-layout,
.parent-attendance-layout { display: grid; grid-template-columns: minmax(0, 1.52fr) minmax(290px, 0.72fr); }
.parent-report-layout { display: grid; grid-template-columns: minmax(230px, 0.55fr) minmax(0, 1.45fr); }
.parent-transcript-layout { display: grid; grid-template-columns: minmax(220px, 0.52fr) minmax(0, 1.38fr) minmax(240px, 0.58fr); }
.parent-message-workspace { display: grid; grid-template-columns: minmax(240px, 0.55fr) minmax(0, 1.12fr) minmax(240px, 0.52fr); }

.parent-focus-card,
.parent-panel,
.parent-child-summary-card { border-radius: 10px; padding: 20px; }
.parent-focus-card { background: #f9fbff; }
.parent-side-stack { display: grid; gap: 18px; min-width: 0; }
.parent-wide-panel { min-width: 0; }

.parent-panel-heading { align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.parent-panel-heading p,
.parent-report-document-header p { color: #657390; font-size: 0.84rem; margin: 4px 0 0; }
.parent-large-initials { font-size: 1.15rem; height: 58px; width: 58px; }

.parent-encouragement {
  background: #edf5ff;
  border: 1px solid #d7e7ff;
  border-radius: 8px;
  color: #234369;
  margin-bottom: 20px;
  padding: 14px 16px;
}
.parent-encouragement strong { color: #155eef; font-size: 0.78rem; text-transform: uppercase; }
.parent-encouragement p { font-size: 0.88rem; line-height: 1.5; margin: 5px 0 0; }

.parent-subsection-heading { gap: 12px; margin-bottom: 13px; }
.parent-subsection-heading > div { min-width: 0; }
.parent-subsection-heading h2 { font-size: 1rem; }
.parent-subsection-heading h3 { font-size: 0.93rem; }
.parent-course-summary { border-top: 1px solid #e7edf7; }
.parent-course-summary > div {
  align-items: center;
  border-bottom: 1px solid #e7edf7;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto 34px;
  padding: 11px 2px;
}
.parent-course-summary > div > span { display: grid; gap: 3px; min-width: 0; }
.parent-course-summary strong { color: #142d58; font-size: 0.85rem; overflow-wrap: anywhere; }
.parent-course-summary small { color: #71809b; font-size: 0.72rem; overflow-wrap: anywhere; }
.parent-course-summary b { color: #177442; font-size: 0.86rem; overflow-wrap: anywhere; text-align: right; }
.parent-course-summary em { align-items: center; background: #e7f7ed; border-radius: 6px; color: #14723d; display: inline-flex; font-size: 0.74rem; font-style: normal; font-weight: 800; justify-content: center; min-height: 27px; }
.parent-learning-list > div { grid-template-columns: minmax(0, 1fr) auto auto; }
.parent-learning-list > .parent-empty-state {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
}
.parent-learning-list .teacher-row-action { white-space: nowrap; }
.parent-learning-section-heading { margin-top: 22px; }
.parent-learning-hub .parent-compact-list b {
  color: #177442;
  font-size: 0.78rem;
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}
.parent-focus-footer { color: #556783; display: flex; flex-wrap: wrap; font-size: 0.77rem; gap: 16px; padding-top: 16px; }
.parent-focus-footer b { color: #193661; }

.parent-status-list,
.parent-compact-list,
.parent-activity-list,
.parent-report-card-list { list-style: none; margin: 0; padding: 0; }
.parent-status-list { display: grid; gap: 10px; }
.parent-status-list li { align-items: center; display: flex; gap: 11px; }
.parent-status-list li > span { align-items: center; background: #e9f8ef; border-radius: 50%; color: #168447; display: inline-flex; height: 32px; justify-content: center; width: 32px; }
.parent-status-list li.needs-attention > span { background: #fff0e4; color: #cf6a00; }
.parent-status-list strong { color: #1a345d; display: block; font-size: 0.83rem; }
.parent-status-list small { color: #71809b; font-size: 0.72rem; }
.parent-compact-list { display: grid; }
.parent-compact-list li { align-items: center; border-bottom: 1px solid #edf1f7; display: flex; gap: 11px; min-height: 52px; padding: 9px 0; }
.parent-compact-list li:last-child { border-bottom: 0; }
.parent-compact-list li > div { display: grid; gap: 3px; min-width: 0; }
.parent-compact-list strong { color: #18345f; font-size: 0.82rem; overflow-wrap: anywhere; }
.parent-compact-list small { color: #70809b; font-size: 0.72rem; overflow-wrap: anywhere; }
.parent-compact-list .status-pill { margin-left: auto; }
.parent-date-chip { background: #eef4ff; border: 1px solid #d9e5ff; border-radius: 7px; color: #2462c5; font-size: 0.71rem; font-weight: 800; min-width: 47px; padding: 7px 5px; text-align: center; }

.parent-activity-list { display: grid; }
.parent-activity-list li { align-items: center; border-bottom: 1px solid #edf1f7; display: grid; gap: 11px; grid-template-columns: 34px minmax(0, 1fr) auto; padding: 11px 0; }
.parent-activity-list li:last-child { border-bottom: 0; }
.parent-activity-icon { background: #eef4ff; height: 32px; width: 32px; }
.parent-activity-icon .icon-svg { height: 17px; width: 17px; }
.parent-activity-list div { display: grid; gap: 3px; min-width: 0; }
.parent-activity-list strong { color: #17325c; font-size: 0.83rem; overflow-wrap: anywhere; }
.parent-activity-list small { color: #71809b; font-size: 0.72rem; overflow-wrap: anywhere; }
.parent-activity-list time { color: #7e8da6; font-size: 0.71rem; white-space: nowrap; }
.parent-activity-list b { color: #168447; font-size: 0.8rem; white-space: nowrap; }

.parent-action-grid,
.parent-tool-grid { display: grid; gap: 10px; }
.parent-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.parent-action-grid a,
.parent-tool-grid a { align-items: center; border: 1px solid #e0e9f7; border-radius: 8px; color: #15335e; display: flex; flex-direction: column; font-size: 0.75rem; font-weight: 750; gap: 8px; justify-content: center; min-height: 88px; padding: 12px; text-align: center; text-decoration: none; }
.parent-action-grid a:hover,
.parent-tool-grid a:hover { border-color: #7aa9fb; box-shadow: 0 8px 18px rgba(34, 92, 183, 0.1); }
.parent-action-grid .icon-svg,
.parent-tool-grid .icon-svg { color: #1c66d9; height: 23px; width: 23px; }

.parent-child-comparison-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.parent-child-summary-card.is-selected { border-color: #4180f3; box-shadow: 0 12px 28px rgba(40, 103, 211, 0.14); }
.parent-child-summary-card header { align-items: center; display: flex; gap: 12px; }
.parent-child-summary-card header > div { min-width: 0; }
.parent-child-summary-card h2 { font-size: 1rem; overflow-wrap: anywhere; }
.parent-child-summary-card p { color: #6c7d97; font-size: 0.78rem; margin: 3px 0; overflow-wrap: anywhere; }
.parent-child-summary-card small { color: #3d68bc; font-size: 0.72rem; font-weight: 700; }
.parent-child-summary-card .status-pill { margin-left: auto; }
.parent-child-stat-row { border-bottom: 1px solid #e8eef7; border-top: 1px solid #e8eef7; display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0; padding: 12px 0; }
.parent-child-stat-row span { border-right: 1px solid #e8eef7; display: grid; gap: 4px; padding: 0 9px; }
.parent-child-stat-row span:first-child { padding-left: 0; }
.parent-child-stat-row span:last-child { border-right: 0; }
.parent-child-stat-row small { color: #71809b; font-size: 0.68rem; }
.parent-child-stat-row b { color: #18345f; font-size: 0.88rem; }
.parent-details-grid { display: grid; gap: 13px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 20px; }
.parent-details-grid div,
.parent-details-stack div { display: grid; gap: 3px; }
.parent-details-grid dt,
.parent-details-stack dt,
.parent-transcript-student dt { color: #71809b; font-size: 0.7rem; }
.parent-details-grid dd,
.parent-details-stack dd,
.parent-transcript-student dd { color: #1a355e; font-size: 0.82rem; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.parent-details-stack { display: grid; gap: 13px; margin: 0; }

.parent-grade-table { border: 1px solid #e2eaf5; border-radius: 8px; overflow-x: auto; }
.parent-grade-table-head,
.parent-grade-table-row { display: grid; gap: 10px; grid-template-columns: minmax(170px, 1.6fr) minmax(110px, 1fr) 75px 52px 70px; min-width: 620px; padding: 12px 14px; }
.parent-grade-table-head { background: #f4f8ff; color: #456488; font-size: 0.69rem; font-weight: 800; text-transform: uppercase; }
.parent-grade-table-row { align-items: center; border-top: 1px solid #e7edf6; color: #3c5373; font-size: 0.8rem; }
.parent-grade-table-row > span { display: grid; gap: 3px; min-width: 0; }
.parent-grade-table-row strong { color: #16335e; font-size: 0.82rem; overflow-wrap: anywhere; }
.parent-grade-table-row small { color: #7787a1; font-size: 0.7rem; }
.parent-grade-table-row b { color: #177442; font-size: 0.84rem; }
.parent-grade-table-row em { background: #e6f6ed; border-radius: 6px; color: #16713b; font-size: 0.72rem; font-style: normal; font-weight: 800; padding: 5px; text-align: center; }
.parent-empty-row { color: #71809b; min-width: 620px; padding: 20px; }
.parent-trend-card { align-items: center; background: #f7faff; border: 1px solid #dce9ff; border-radius: 8px; display: flex; justify-content: space-between; margin-top: 16px; padding: 16px; }
.parent-trend-card h3 { font-size: 0.95rem; margin: 4px 0; }
.parent-trend-card p { color: #6f7f99; font-size: 0.75rem; margin: 0; }
.parent-trend-card > strong { color: #176f3e; font-size: 1.5rem; }

.parent-calendar-heading { gap: 12px; margin-bottom: 16px; }
.parent-calendar-heading h2 { color: #17325d; font-size: 1.05rem; }
.parent-calendar-heading > div { display: flex; gap: 8px; }
.parent-calendar-panel { min-width: 0; }
.parent-calendar-grid .calendar-month-event { cursor: default; }
.parent-attendance-calendar .attendance-calendar-cell { min-height: 83px; }
.parent-month-trend { align-items: end; display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); min-height: 150px; }
.parent-month-trend div { align-items: center; display: grid; gap: 7px; grid-template-rows: auto 1fr auto; height: 100%; text-align: center; }
.parent-month-trend span { color: #71809b; font-size: 0.7rem; }
.parent-month-trend i { align-self: end; background: #4a87ed; border-radius: 5px 5px 2px 2px; height: max(4px, var(--trend-height)); min-height: 4px; }
.parent-month-trend b { color: #18345f; font-size: 0.78rem; }

.parent-report-card-list { display: grid; gap: 8px; }
.parent-report-card-list li { align-items: center; border: 1px solid #e2eaf5; border-radius: 8px; display: flex; gap: 10px; padding: 12px; }
.parent-report-card-list li.is-selected { background: #f5f9ff; border-color: #5690f4; }
.parent-report-card-list li > div { display: grid; gap: 3px; min-width: 0; }
.parent-report-card-list strong { color: #19355f; font-size: 0.83rem; overflow-wrap: anywhere; }
.parent-report-card-list small { color: #75859f; font-size: 0.71rem; }
.parent-report-card-list em { color: #177442; font-size: 0.72rem; font-style: normal; font-weight: 800; }
.parent-report-card-list .status-pill { margin-left: auto; }
.parent-report-card-list a { color: #155eef; font-size: 1.1rem; text-decoration: none; }
.parent-report-document-header { align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.parent-report-document-header > div { align-items: center; display: flex; gap: 12px; min-width: 0; }
.parent-report-summary { background: #f6f9ff; border: 1px solid #e0eafe; display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; padding: 12px; }
.parent-report-summary span { display: grid; gap: 4px; }
.parent-report-summary small { color: #71809b; font-size: 0.68rem; }
.parent-report-summary strong { color: #17345f; font-size: 0.86rem; }
.parent-report-notes { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin: 16px 0; }
.parent-report-notes > div { background: #fafcff; border-left: 3px solid #4a87ed; padding: 12px; }
.parent-report-notes strong { color: #18355f; font-size: 0.78rem; }
.parent-report-notes p { color: #61728f; font-size: 0.75rem; line-height: 1.45; margin: 5px 0 0; }

.parent-transcript-student { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 16px; }
.parent-transcript-student div { display: grid; gap: 4px; }
.parent-transcript-total { align-items: center; background: #edf5ff; border: 1px solid #d9e7ff; color: #1a355f; display: flex; justify-content: space-between; margin: 15px 0; padding: 13px; }
.parent-transcript-total strong { font-size: 1.18rem; }
.parent-legend { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.parent-legend span { background: #f5f8fd; color: #4c6181; font-size: 0.72rem; padding: 7px; }

.parent-tool-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.parent-tool-grid a { align-items: flex-start; min-height: 136px; text-align: left; }
.parent-tool-grid strong { color: #17345f; font-size: 0.9rem; }
.parent-tool-grid small { color: #71809b; font-size: 0.75rem; }
.parent-settings-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.parent-read-only-note { background: #fff7ed; border: 1px solid #fde2bd; color: #985100; font-size: 0.8rem; line-height: 1.45; padding: 12px; }

.parent-message-page .parent-child-switcher { margin-bottom: 0; }
.parent-message-list,
.parent-message-thread { min-width: 0; }
.parent-message-thread .message-composer { margin-top: 16px; }
.parent-message-thread .message-bubble-list { max-height: 520px; }
.parent-grade-update { align-items: start; }
.parent-grade-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.parent-grade-flags em { background: #fff1df; border-radius: 999px; color: #ae5d00; font-size: 0.72rem; font-style: normal; font-weight: 800; padding: 3px 7px; }
.parent-feedback-disclosure { margin-top: 8px; }
.parent-feedback-disclosure summary { color: #2468d8; cursor: pointer; font-size: 0.8rem; font-weight: 800; }
.parent-feedback-disclosure p { color: #53647f; font-size: 0.82rem; line-height: 1.5; margin: 7px 0 0; }

.parent-empty-state { align-items: center; color: #61728f; display: grid; gap: 8px; justify-items: start; padding: 22px 0; }
.parent-empty-state strong { color: #1a355f; }
.parent-empty-state p { font-size: 0.8rem; line-height: 1.45; margin: 0; }

@media (max-width: 1280px) {
  .parent-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .parent-transcript-layout { grid-template-columns: minmax(210px, 0.55fr) minmax(0, 1.45fr); }
  .parent-transcript-layout > .parent-side-stack { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parent-message-workspace { grid-template-columns: minmax(235px, 0.6fr) minmax(0, 1.35fr); }
  .parent-message-workspace > .parent-side-stack { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .parent-dashboard-grid,
  .parent-bottom-grid,
  .parent-calendar-layout,
  .parent-attendance-layout,
  .parent-report-layout,
  .parent-transcript-layout,
  .parent-message-workspace { grid-template-columns: 1fr; }
  .parent-side-stack,
  .parent-transcript-layout > .parent-side-stack,
  .parent-message-workspace > .parent-side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parent-message-workspace > .parent-side-stack { display: grid; }
}

@media (max-width: 680px) {
  .parent-portal-page { gap: 16px; padding-bottom: 88px; }
  .parent-child-switcher-heading { align-items: end; }
  .parent-child-card-rail { grid-auto-columns: minmax(240px, 84vw); }
  .parent-page-header { align-items: stretch; flex-direction: column; }
  .parent-page-header .secondary-button,
  .parent-page-header .primary-button { justify-content: center; width: 100%; }
  .parent-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parent-metric-card {
    display: grid;
    gap: 8px;
    grid-template-columns: 34px minmax(0, 1fr) 12px;
    min-height: 94px;
    padding: 10px;
  }
  .parent-metric-icon { height: 34px; width: 34px; }
  .parent-metric-copy small { font-size: 0.69rem; overflow-wrap: normal; word-break: normal; }
  .parent-metric-copy strong { font-size: 1.08rem; }
  .parent-metric-link { font-size: 0.95rem; margin-left: 0; }
  .parent-learning-list > div { align-items: start; grid-template-columns: minmax(0, 1fr) auto; }
  .parent-learning-list .teacher-row-action { grid-column: 1 / -1; justify-self: start; }
  .parent-metric-copy em { display: none; }
  .parent-side-stack,
  .parent-transcript-layout > .parent-side-stack,
  .parent-message-workspace > .parent-side-stack,
  .parent-settings-grid { grid-template-columns: 1fr; }
  .parent-focus-card,
  .parent-panel,
  .parent-child-summary-card { padding: 16px; }
  .parent-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parent-action-grid a { min-height: 76px; }
  .parent-details-grid,
  .parent-report-notes,
  .parent-report-summary,
  .parent-transcript-student { grid-template-columns: 1fr 1fr; }
  .parent-calendar-heading { align-items: center; }
  .parent-calendar-heading h2 { font-size: 0.94rem; }
  .parent-calendar-heading .secondary-button { font-size: 0; min-width: 36px; padding: 9px; }
  .parent-calendar-heading .secondary-button::after { content: "Today"; font-size: 0.72rem; }
  .parent-attendance-calendar .attendance-calendar-cell { min-height: 58px; padding: 5px; }
  .parent-attendance-calendar .attendance-chip { font-size: 0.56rem; height: 17px; min-width: 17px; }
  .parent-activity-list li { grid-template-columns: 30px minmax(0, 1fr); }
  .parent-activity-list time,
  .parent-activity-list b { grid-column: 2; }
  .parent-message-workspace { gap: 12px; }
  .parent-message-list { max-height: 410px; overflow: auto; }
  .parent-message-thread .message-bubble-list { max-height: none; }
  .parent-message-workspace > .parent-side-stack { display: none; }
  .parent-message-context-sheet { margin-inline: 0; }
  .parent-report-card-list li { align-items: flex-start; }
  .parent-report-card-list .status-pill { display: none; }
}

/* UI polish pass: shared data tables preserve readable columns before scrolling. */
.data-table-shell,
.table-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
}

.data-table-shell > .data-table,
.table-wrap > table {
  width: 100%;
  min-width: 720px;
  table-layout: auto;
}

th {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

.truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wrap-safe {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.table-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-2);
  min-width: max-content;
}

/* The Grade Book directory has eight essential columns; allow scrolling instead
   of compressing controls or breaking labels into individual letters. */
.gradebook-directory-table-wrap.data-table-shell {
  overflow-x: auto;
  overflow-y: hidden;
  border-color: #dfe8f5;
  border-radius: 10px;
}

.gradebook-directory-table.data-table {
  min-width: 1160px;
  table-layout: auto;
}

.gradebook-col-class { width: 25%; }
.gradebook-col-students { width: 86px; }
.gradebook-col-method { width: 160px; }
.gradebook-col-completion { width: 146px; }
.gradebook-col-missing { width: 84px; }
.gradebook-col-status { width: 146px; }
.gradebook-col-updated { width: 135px; }
.gradebook-col-actions { width: 180px; }

.gradebook-directory-table th,
.gradebook-directory-table td {
  overflow-wrap: normal;
  word-break: normal;
}

.gradebook-directory-table th {
  white-space: nowrap;
}

.gradebook-directory-table th:nth-child(1),
.gradebook-directory-table td:nth-child(1) { min-width: 230px; }
.gradebook-directory-table th:nth-child(2),
.gradebook-directory-table td:nth-child(2) { min-width: 86px; }
.gradebook-directory-table th:nth-child(3),
.gradebook-directory-table td:nth-child(3) { min-width: 160px; }
.gradebook-directory-table th:nth-child(4),
.gradebook-directory-table td:nth-child(4) { min-width: 146px; }
.gradebook-directory-table th:nth-child(5),
.gradebook-directory-table td:nth-child(5) { min-width: 84px; }
.gradebook-directory-table th:nth-child(6),
.gradebook-directory-table td:nth-child(6) { min-width: 146px; }
.gradebook-directory-table th:nth-child(7),
.gradebook-directory-table td:nth-child(7) { min-width: 135px; }
.gradebook-directory-table th:nth-child(8),
.gradebook-directory-table td:nth-child(8) { min-width: 180px; }

.gradebook-class-link > span:last-child {
  min-width: 0;
}

.gradebook-class-link strong,
.gradebook-class-link small,
.gradebook-method-label,
.gradebook-date,
.gradebook-date small {
  max-width: 100%;
}

.gradebook-class-link strong,
.gradebook-class-link small,
.gradebook-method-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gradebook-method-label,
.gradebook-date,
.gradebook-date small,
.gradebook-directory-status,
.gradebook-directory-actions,
.gradebook-directory-blocked {
  white-space: nowrap;
}

.gradebook-directory-status {
  max-width: 100%;
}

.gradebook-directory-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: max-content;
}

.gradebook-directory-actions .teacher-row-action,
.gradebook-directory-actions .primary-action {
  justify-content: center;
  min-width: 122px;
}

.gradebook-directory-actions .gradebook-row-more {
  flex: 0 0 auto;
  margin-left: 0;
}

.gradebook-directory-table tbody tr {
  position: relative;
}

.gradebook-directory-table tbody tr:nth-last-child(-n + 2) .gradebook-row-more .more-menu-panel {
  top: auto;
  bottom: calc(100% + 6px);
}

.gradebook-directory-table .gradebook-row-more[open] {
  z-index: var(--z-dropdown);
}

/* More menus need a predictable layer above card and table surfaces. */
.more-menu[open],
.side-nav-more[open],
.gradebook-row-more[open] {
  z-index: var(--z-dropdown);
}

.more-menu-panel {
  isolation: isolate;
}

/* Keep the top bar useful at intermediate desktop widths without crowding the
   page title or metric rows beneath it. */
.utility-bar,
.utility-context,
.global-search,
.utility-actions,
.utility-profile-menu {
  min-width: 0;
}

.utility-bar {
  box-sizing: border-box;
}

@media (max-width: 1180px) and (min-width: 981px) {
  .utility-bar {
    gap: var(--space-2);
    padding-inline: var(--space-4);
  }

  .school-switcher {
    max-width: min(220px, 24vw);
  }

  .academic-year-form {
    flex-basis: 166px;
  }

  .academic-year-form label {
    display: none;
  }

  .global-search {
    flex-basis: 240px;
  }

  .utility-profile-menu > summary {
    max-width: min(180px, 19vw);
  }
}

/* The desktop content area is narrower than the browser once its sidebar is
   present. Compact the context controls before the top bar is forced to wrap. */
@media (max-width: 1600px) and (min-width: 981px) {
  .utility-bar {
    flex-wrap: nowrap;
    gap: var(--space-2);
    padding-inline: var(--space-4);
  }

  .utility-context {
    flex: 0 1 auto;
    flex-wrap: nowrap;
  }

  .school-switcher {
    max-width: 160px;
  }

  .academic-year-form {
    flex: 0 1 210px;
    min-width: 190px;
    flex-wrap: nowrap;
  }

  .academic-year-form label {
    display: none;
  }

  .academic-year-form select {
    flex: 1 1 auto;
    min-width: 0;
  }

  .academic-year-form button {
    flex: 0 0 auto;
    padding-inline: var(--space-2);
  }

  .global-search {
    flex: 1 1 260px;
    width: auto;
    min-width: 0;
  }

  .utility-actions {
    flex: 0 0 auto;
    gap: var(--space-1);
  }

  .utility-profile-menu {
    flex: 0 0 54px;
  }

  .utility-profile-menu > summary {
    width: 54px;
    max-width: 54px;
    justify-content: center;
    padding-inline: var(--space-2);
  }

  .utility-profile-name {
    display: none;
  }
}

@media (max-width: 680px) {
  .data-table-shell > .data-table,
  .table-wrap > table {
    min-width: 640px;
  }

  .gradebook-directory-table-wrap.data-table-shell {
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .gradebook-directory-table.data-table {
    min-width: 0;
  }

  .gradebook-directory-table tr {
    overflow: visible;
  }

  .gradebook-directory-table th,
  .gradebook-directory-table td {
    min-width: 0;
    white-space: normal;
  }

  .gradebook-directory-table .gradebook-directory-actions {
    display: flex;
    min-width: 0;
  }

  .gradebook-directory-actions .teacher-row-action,
  .gradebook-directory-actions .primary-action {
    min-width: 0;
  }

  .gradebook-directory-table tbody tr:nth-last-child(-n + 2) .gradebook-row-more .more-menu-panel {
    top: calc(100% + 6px);
    bottom: auto;
  }
}

/* The directory is a decision surface, not a spreadsheet. At tablet widths,
   preserve every status and action as a readable summary card instead of
   making teachers pan a wide table before they can open a class. */
@media (max-width: 1500px) and (min-width: 681px) {
  .gradebook-directory-table-wrap.data-table-shell {
    overflow: visible;
    border: 0;
  }

  .gradebook-directory-table.data-table {
    display: block;
    min-width: 0;
  }

  .gradebook-directory-table colgroup,
  .gradebook-directory-table thead {
    display: none;
  }

  .gradebook-directory-table tbody {
    display: grid;
    gap: 12px;
  }

  .gradebook-directory-table tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    border: 1px solid #e0e9f6;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.9);
  }

  .gradebook-directory-table td {
    display: block;
    width: auto;
    min-width: 0 !important;
    min-height: 54px;
    padding: 10px 12px;
    border-bottom: 1px solid #edf1f8;
    white-space: normal;
  }

  .gradebook-directory-table td::before {
    display: block;
    margin-bottom: 4px;
    color: #71809e;
    content: attr(data-label);
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .gradebook-directory-table td:first-child,
  .gradebook-directory-table td:last-child {
    grid-column: 1 / -1;
  }

  .gradebook-directory-table td:first-child::before,
  .gradebook-directory-table td:last-child::before {
    display: none;
  }

  .gradebook-directory-table td:nth-child(5),
  .gradebook-directory-table td:nth-child(6),
  .gradebook-directory-table td:nth-child(7) {
    border-bottom: 0;
  }

  .gradebook-directory-table .gradebook-class-link {
    min-width: 0;
  }

  .gradebook-directory-table .gradebook-directory-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    border-top: 1px solid #edf1f8;
    border-bottom: 0;
  }

  .gradebook-directory-actions .teacher-row-action,
  .gradebook-directory-actions .primary-action {
    min-width: 0;
  }

  .gradebook-directory-table tbody tr:nth-last-child(-n + 2) .gradebook-row-more .more-menu-panel {
    top: calc(100% + 6px);
    bottom: auto;
  }
}

@media (max-width: 1280px) {
  .gradebook-landing-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gradebook-quick-actions a {
    align-items: flex-start;
  }

  .gradebook-quick-actions a > span:last-child {
    min-width: 0;
  }

  .gradebook-quick-actions strong,
  .gradebook-quick-actions small {
    overflow-wrap: normal;
    word-break: normal;
  }

  .gradebook-quick-actions strong {
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .gradebook-quick-actions small {
    line-height: 1.3;
  }
}

@media (max-width: 1024px) {
  .gradebook-landing-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The teacher top bar has no school/year controls. Keep it horizontal on
   tablets so the desktop search flex basis cannot become a tall column. */
@media (max-width: 980px) and (min-width: 641px) {
  /* Keep the shared school context compact on tablets. The search moves to a
     deliberate second row instead of making the full header three rows tall. */
  .utility-bar:not(.teacher-workspace .utility-bar) {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    min-height: 64px;
    padding: 10px var(--space-4);
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .utility-context {
    align-items: center;
    flex: 1 1 330px;
    flex-wrap: nowrap;
    min-width: 0;
    width: auto;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .school-switcher {
    flex: 1 1 180px;
    max-width: 230px;
    min-width: 0;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .academic-year-form {
    flex: 0 1 214px;
    flex-wrap: nowrap;
    min-width: 204px;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .academic-year-form label {
    display: none;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .academic-year-form select {
    flex: 1 1 auto;
    min-width: 0;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .academic-year-form button {
    flex: 0 0 auto;
    padding-inline: var(--space-2);
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .global-search {
    flex: 1 0 100%;
    order: 3;
    width: 100%;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .utility-actions {
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: var(--space-2);
    margin-left: auto;
    width: auto;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .utility-profile-menu {
    flex: 0 0 54px;
    margin-left: 0;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .utility-profile-menu > summary {
    justify-content: center;
    max-width: 54px;
    padding-inline: var(--space-2);
    width: 54px;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .utility-profile-name {
    display: none;
  }

  .teacher-workspace .utility-bar {
    align-items: center;
    flex-direction: row;
    min-height: 64px;
  }

  .teacher-workspace .global-search {
    order: initial;
    flex: 1 1 260px;
    width: auto;
    min-width: 0;
  }

  .teacher-workspace .utility-actions {
    width: auto;
    margin-left: 0;
    justify-content: flex-end;
  }

  .teacher-workspace .utility-profile-menu {
    flex: 0 1 54px;
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  /* Mobile school portals keep context together, then place search and account
     actions on one practical row. This avoids a tall stack of toolbar controls. */
  .utility-bar:not(.teacher-workspace .utility-bar) {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    min-height: 0;
    padding: 10px var(--space-3);
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .utility-context {
    align-items: center;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    min-width: 0;
    order: 1;
    width: 100%;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .school-switcher {
    flex: 1 1 145px;
    max-width: none;
    min-width: 0;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .school-switcher .school-identity-copy strong {
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .academic-year-form {
    flex: 0 1 184px;
    flex-wrap: nowrap;
    min-width: 174px;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .academic-year-form label {
    display: none;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .academic-year-form select {
    flex: 1 1 auto;
    min-width: 0;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .academic-year-form button {
    flex: 0 0 auto;
    padding-inline: var(--space-2);
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .global-search {
    flex: 1 1 180px;
    min-width: 0;
    order: 2;
    width: auto;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .utility-actions {
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: var(--space-2);
    margin-left: 0;
    order: 2;
    width: auto;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .utility-profile-menu {
    flex: 0 0 54px;
    margin-left: 0;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .utility-profile-menu > summary {
    justify-content: center;
    max-width: 54px;
    padding-inline: var(--space-2);
    width: 54px;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .utility-profile-name {
    display: none;
  }

  .teacher-workspace .utility-bar {
    align-items: center;
    flex-direction: row;
  }

  .teacher-workspace .global-search {
    order: 2;
    flex: 1 0 100%;
    width: 100%;
  }

  .teacher-workspace .utility-actions {
    width: auto;
    margin-left: 0;
  }
}

/* Layout polish: keep sidebar identity and dashboard headers legible at every size. */
.sidebar-footer {
  display: block;
  max-width: 44px;
  min-height: 44px;
  height: 44px;
  padding: 0;
  overflow: visible;
  opacity: 1;
  transform: none;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 44px;
}

.sidebar-user-avatar {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.98), rgba(14, 165, 233, 0.96));
  border: 1px solid rgba(219, 234, 254, 0.42);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.sidebar-user-meta {
  display: grid;
  gap: 2px;
  max-width: 0;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.2;
  opacity: 0;
  text-transform: none;
  transition: max-width 180ms ease, opacity 160ms ease;
}

.sidebar-user-name,
.sidebar-user-role {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-name {
  color: #ffffff;
  font-size: 0.86rem;
  line-height: 1.2;
}

.sidebar-user-role {
  color: #bfdbfe;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

.app-sidebar:not(:hover):not(:focus-within) .sidebar-footer > :not(.sidebar-user) {
  display: none;
}

.app-sidebar:hover .sidebar-footer,
.app-sidebar:focus-within .sidebar-footer {
  max-width: 100%;
  height: auto;
  min-height: 68px;
  padding: 12px;
}

.app-sidebar:hover .sidebar-user-meta,
.app-sidebar:focus-within .sidebar-user-meta {
  max-width: 170px;
  opacity: 1;
}

/* Audit pass: sidebar identity, principal tables, and dashboard charts must
   stay inside their own surfaces when names and grade-level lists are long. */
.app-sidebar:hover .sidebar-footer,
.app-sidebar:focus-within .sidebar-footer {
  display: grid;
  gap: 8px;
  min-height: max-content;
  overflow: visible;
}

.app-sidebar:hover .sidebar-user,
.app-sidebar:focus-within .sidebar-user {
  align-items: flex-start;
}

.app-sidebar:hover .sidebar-user-meta,
.app-sidebar:focus-within .sidebar-user-meta {
  max-width: 172px;
  overflow: visible;
}

.app-sidebar:hover .sidebar-user-name,
.app-sidebar:hover .sidebar-user-role,
.app-sidebar:focus-within .sidebar-user-name,
.app-sidebar:focus-within .sidebar-user-role {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.app-sidebar:hover .sidebar-footer > span,
.app-sidebar:focus-within .sidebar-footer > span {
  display: block;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.school-switcher {
  max-width: min(380px, 26vw);
}

.global-search {
  /* Keep context controls readable before giving search more room. */
  flex: 0 1 clamp(260px, 28vw, 420px);
  width: min(420px, 28vw);
}

@media (max-width: 1600px) and (min-width: 981px) {
  .school-switcher { max-width: min(240px, 18vw); }
  .academic-year-form {
    flex: 0 0 208px;
    min-width: 208px;
  }
  .academic-year-form select {
    flex-basis: 122px;
    min-width: 122px;
  }
  .global-search { flex-basis: 220px; }
}

.principal-tabbar {
  flex-wrap: wrap;
  overflow: visible;
}

.principal-table-wrap {
  max-width: 100%;
  scrollbar-gutter: stable both-edges;
}

.principal-table-wrap table {
  min-width: 720px;
}

.principal-table-wrap th {
  white-space: nowrap;
}

.principal-table-wrap td {
  overflow-wrap: anywhere;
  white-space: normal;
}

.principal-table-wrap td strong,
.principal-table-wrap td small {
  display: block;
}

.principal-demographic-grid {
  min-width: 0;
  align-items: flex-start;
}

.principal-demographic-donut {
  background: conic-gradient(#1d72f6 0 100%, #edf1f6 0);
}

.principal-legend-list {
  min-width: 0;
}

.principal-legend-list li {
  min-width: 0;
}

.principal-legend-list li b {
  overflow-wrap: anywhere;
  text-align: right;
}

.principal-bar-chart {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  scrollbar-gutter: stable;
}

.principal-bar-chart > span {
  flex: 0 0 46px;
}

.principal-empty-value {
  max-width: 96px;
  color: #526783 !important;
  font-size: 0.78rem !important;
  line-height: 1.25 !important;
}

.principal-academic-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
  min-height: 137px;
  align-content: center;
}

.principal-academic-summary > span {
  min-width: 0;
  padding: 9px;
  border: 1px solid #e4ebf6;
  border-radius: 8px;
  background: #f9fbff;
}

.principal-academic-summary small,
.principal-academic-summary b {
  display: block;
}

.principal-academic-summary small {
  overflow: hidden;
  color: #627394;
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.principal-academic-summary b {
  margin-top: 4px;
  color: #163b78;
  font-size: 0.88rem;
}

@media (max-width: 680px) {
  .academic-year-form select { font-size: 0.78rem; }

  .principal-tabbar {
    flex-wrap: wrap;
    overflow: visible;
  }

  .principal-tabbar > a:not(.principal-tab-primary):not(.is-active) {
    display: none;
  }

  .principal-tabbar--students > a.principal-tab-primary:nth-of-type(3),
  .principal-tabbar--staff > a.principal-tab-primary:nth-of-type(3),
  .principal-tabbar--attendance > a.principal-tab-primary:nth-of-type(3),
  .principal-tabbar--behavior > a.principal-tab-primary:nth-of-type(3),
  .principal-tabbar--assessment > a.principal-tab-primary:nth-of-type(3),
  .principal-tabbar--reports > a.principal-tab-primary:nth-of-type(3),
  .principal-tabbar--communication > a.principal-tab-primary:nth-of-type(3),
  .principal-tabbar--calendar > a.principal-tab-primary:nth-of-type(3),
  .principal-tabbar--tasks > a.principal-tab-primary:nth-of-type(3),
  .principal-tabbar--resources > a.principal-tab-primary:nth-of-type(3),
  .principal-tabbar--settings > a.principal-tab-primary:nth-of-type(3) {
    display: none;
  }

  .principal-tab-mobile-more {
    position: relative;
    display: block;
    flex: 0 0 auto;
  }

  .principal-tab-mobile-more > summary {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 8px 11px;
    border-radius: 7px;
    color: #1260dd;
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 720;
    list-style: none;
  }

  .principal-tab-mobile-more > summary::-webkit-details-marker { display: none; }

  .principal-tab-mobile-more .more-menu-panel {
    right: auto;
    left: 0;
    width: min(252px, calc(100vw - 40px));
  }

  .principal-tab-mobile-more .more-menu-panel a {
    display: block;
    padding: 9px 10px;
  }

  .principal-demographic-grid {
    flex-direction: column;
  }

  .principal-bar-chart > span {
    flex-basis: 42px;
  }
}

.header-stack,
.content-header > div:first-child,
.panel-title > div:first-child,
.parent-page-header > div:first-child,
.parent-panel-heading > div:first-child {
  display: grid;
  align-content: start;
  gap: var(--header-gap);
  min-width: 0;
}

.header-stack > .eyebrow,
.content-header > div:first-child > .eyebrow,
.panel-title > div:first-child > .eyebrow,
.parent-page-header > div:first-child > .eyebrow,
.parent-panel-heading > div:first-child > .eyebrow {
  margin: 0;
}

.eyebrow,
.eyebrow-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  padding: 5px 10px;
  line-height: 1.15;
  white-space: nowrap;
}

.content-header > div:first-child > :is(h1, h2, p),
.panel-title > div:first-child > :is(h1, h2, p),
.parent-page-header > div:first-child > :is(h1, h2, p),
.parent-panel-heading > div:first-child > :is(h1, h2, p) {
  margin: 0;
}

.dashboard-live-pulse-heading {
  gap: var(--header-gap);
}

.item-card,
.tool-panel,
.ui-card {
  padding: var(--card-padding);
}

.reading-content {
  max-width: 76ch;
  color: var(--navy);
  font-size: 1rem;
  line-height: 1.7;
}

.reading-content p {
  margin: 0 0 1rem;
}

.metric-card {
  gap: var(--space-2);
  padding: var(--space-5);
}

.status-pill {
  gap: 6px;
  min-height: 28px;
  padding: 5px 10px;
  line-height: 1;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table-shell,
.table-wrap {
  scrollbar-gutter: stable both-edges;
}

.data-table th {
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: normal;
}

@media (max-width: 980px) {
  .item-card,
  .tool-panel,
  .ui-card {
    padding: 20px;
  }
}

@media (max-width: 640px) {
  .item-card,
  .tool-panel,
  .ui-card {
    padding: 16px;
  }

  .sidebar-footer {
    max-width: 100%;
    height: auto;
    min-height: 0;
    padding: 10px;
  }

  .sidebar-user-meta {
    max-width: 170px;
    opacity: 1;
  }
}

/* Principal command center: quiet hierarchy, grouped navigation, and resilient data views. */
.principal-command-header {
  align-items: flex-end;
  gap: 20px;
}

.principal-command-header .header-stack {
  max-width: 760px;
}

.principal-command-header h1 {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.principal-header-note {
  color: #667896;
  font-size: 0.78rem;
  line-height: 1.45;
}

.principal-header-actions {
  align-items: center;
  flex-wrap: wrap;
}

.principal-tabbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
  margin-bottom: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.principal-tab-group {
  align-self: start;
  min-width: 0;
  padding: 8px;
  border: 1px solid #dce7f6;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 6px 18px rgba(30, 58, 107, 0.04);
}

.principal-tab-group > summary {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
  color: #526889;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  list-style: none;
}

.principal-tab-group:not([open]) {
  box-shadow: none;
}

.principal-tab-group:not([open]) > summary {
  min-height: 26px;
}

.principal-tab-group > summary::after {
  color: #1c69e6;
  content: "+";
  font-size: 1rem;
  font-weight: 500;
}

.principal-tab-group[open] > summary {
  color: #173a78;
}

.principal-tab-group[open] > summary::after {
  content: "−";
}

.principal-tab-group > summary::-webkit-details-marker {
  display: none;
}

.principal-tab-group-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 7px;
}

.principal-tab-group-links a {
  display: flex;
  min-width: 0;
  min-height: 32px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 7px;
  color: #5b6f91;
  font-size: 0.7rem;
  font-weight: 720;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.principal-tab-group-links a:hover {
  background: #eef5ff;
  color: #125dd3;
}

.principal-tab-group-links a.is-active {
  background: #e2efff;
  box-shadow: inset 0 0 0 1px #9bc3ff;
  color: #105fd8;
}

.principal-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 26px 0 12px;
}

.principal-section-heading > div {
  min-width: 0;
}

.principal-section-heading h2 {
  margin: 2px 0 4px;
  color: #102b5d;
  font-size: 1.16rem;
}

.principal-section-heading p {
  margin: 0;
  color: #697a98;
  font-size: 0.78rem;
  line-height: 1.45;
}

.principal-section-heading > a {
  flex: 0 0 auto;
  color: #1164e8;
  font-size: 0.75rem;
  font-weight: 800;
  text-decoration: none;
}

.principal-focus-grid,
.principal-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.principal-focus-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.principal-focus-card,
.principal-snapshot-grid .principal-metric-card {
  min-width: 0;
}

.principal-focus-card {
  display: flex;
  min-height: 154px;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dfe9f7;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 22px rgba(28, 53, 102, 0.055);
  color: #18366e;
  text-decoration: none;
}

.principal-focus-card:hover,
.principal-action-grid > a:hover {
  border-color: #aacbff;
  box-shadow: 0 12px 28px rgba(27, 82, 164, 0.1);
  transform: translateY(-1px);
}

.principal-focus-icon {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: #e8f1ff;
  color: #1768e8;
}

.principal-focus-card.tone-green .principal-focus-icon { background: #e9faf2; color: #0b9d67; }
.principal-focus-card.tone-gold .principal-focus-icon { background: #fff3df; color: #e8880a; }
.principal-focus-card.tone-violet .principal-focus-icon { background: #f0eaff; color: #7a4ed8; }

.principal-focus-card > span:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.principal-focus-card small,
.principal-focus-card strong,
.principal-focus-card em,
.principal-focus-card b {
  display: block;
  overflow-wrap: anywhere;
}

.principal-focus-card small { color: #697a98; font-size: 0.69rem; font-style: normal; }
.principal-focus-card strong { color: #102b5d; font-size: 1.03rem; line-height: 1.18; }
.principal-focus-card em { color: #687a98; font-size: 0.67rem; font-style: normal; line-height: 1.42; }
.principal-focus-card b { margin-top: 4px; color: #1768e8; font-size: 0.68rem; }

.principal-snapshot-grid {
  margin-bottom: 22px;
}

.principal-snapshot-grid .principal-metric-card {
  min-height: 92px;
  padding: 13px;
}

.principal-snapshot-grid .principal-metric-icon {
  width: 37px;
  height: 37px;
  border-radius: 11px;
}

.principal-snapshot-grid .principal-metric-card strong {
  font-size: 1.05rem;
}

.principal-metric-grid .principal-metric-card {
  min-height: 106px;
}

.principal-metric-grid .principal-metric-card em {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.principal-command-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.85fr);
}

.principal-leadership-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.principal-leadership-grid-secondary {
  align-items: stretch;
}

.principal-action-center {
  min-width: 0;
}

.principal-action-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.principal-action-grid > a {
  display: flex;
  min-width: 0;
  min-height: 82px;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e0e9f6;
  border-radius: 8px;
  background: #fff;
  color: #1c3970;
  text-decoration: none;
}

.principal-action-grid > a > span:last-child {
  min-width: 0;
}

.principal-action-grid strong,
.principal-action-grid small {
  display: block;
  overflow-wrap: anywhere;
}

.principal-action-grid strong { color: #15346d; font-size: 0.72rem; line-height: 1.3; }
.principal-action-grid small { margin-top: 3px; color: #70809e; font-size: 0.63rem; line-height: 1.3; }

.principal-directory-panel {
  min-width: 0;
}

.principal-directory-table td {
  vertical-align: middle;
}

.principal-directory-table td small {
  margin-top: 3px;
  color: #6d7e9d;
  font-size: 0.66rem;
  line-height: 1.35;
}

.principal-directory-table .status-pill {
  max-width: 100%;
}

.principal-readiness-summary {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #dde9fb;
  border-radius: 9px;
  background: #f8fbff;
}

.principal-readiness-summary strong { color: #14346d; font-size: 1.12rem; }
.principal-readiness-summary span,
.principal-readiness-summary small { color: #697a98; font-size: 0.73rem; line-height: 1.45; }

.principal-context-disclosure {
  margin: 0 0 22px;
}

.principal-context-disclosure .disclosure-panel-body {
  display: grid;
  gap: 12px;
}

@media (max-width: 1320px) {
  .principal-focus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .principal-snapshot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .principal-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .principal-tabbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principal-command-grid { grid-template-columns: 1fr; }
  .principal-leadership-grid { grid-template-columns: 1fr; }
  .principal-focus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .principal-snapshot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .principal-command-header { align-items: stretch; }
  .principal-header-actions > * { min-width: 0; }
  .principal-tabbar { grid-template-columns: 1fr; gap: 7px; margin-bottom: 18px; }
  .principal-tab-group { padding: 7px; }
  .principal-tab-group-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principal-section-heading { align-items: flex-start; flex-direction: column; gap: 8px; margin-top: 20px; }
  .principal-focus-grid,
  .principal-snapshot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .principal-focus-card { min-height: 142px; flex-direction: column; gap: 8px; padding: 12px; }
  .principal-focus-card strong { font-size: 0.94rem; }
  .principal-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principal-action-grid > a { min-height: 76px; align-items: flex-start; flex-direction: column; }
  .principal-directory-panel .principal-table-wrap { overflow: visible; border: 0; }
  .principal-directory-table { min-width: 0 !important; }
  .principal-directory-table thead { display: none; }
  .principal-directory-table,
  .principal-directory-table tbody,
  .principal-directory-table tr,
  .principal-directory-table td { display: block; width: 100%; }
  .principal-directory-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-bottom: 10px; border: 1px solid #dfe8f5; border-radius: 9px; overflow: hidden; }
  .principal-directory-table td { min-height: 45px; padding: 9px 10px; border-bottom: 1px solid #ecf1f8; }
  .principal-directory-table td::before { display: block; margin-bottom: 3px; color: #71809d; content: attr(data-label); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
  .principal-directory-table td:first-child,
  .principal-directory-table td:last-child { grid-column: 1 / -1; }
  .principal-directory-table td:first-child::before,
  .principal-directory-table td:last-child::before { display: none; }
  .principal-directory-table td:last-child { display: flex; align-items: center; justify-content: flex-end; border-bottom: 0; }
  .principal-directory-table td:last-child .teacher-row-action { width: 100%; justify-content: center; }
}

@media (max-width: 420px) {
  .principal-focus-grid,
  .principal-snapshot-grid,
  .principal-action-grid,
  .principal-tab-group-links { grid-template-columns: 1fr; }
  .principal-focus-card { min-height: 0; flex-direction: row; }
}

@media (min-width: 360px) and (max-width: 420px) {
  .principal-tab-group-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Principal leaders need enough room for the school context and command search
   at desktop widths. The shared compact rule intentionally prioritizes actions,
   but left an unnecessarily small search field in this workspace. */
@media (min-width: 1181px) and (max-width: 1600px) {
  .principal-workspace .utility-bar {
    gap: 12px;
  }

  .principal-workspace .utility-context {
    flex: 0 0 448px;
  }

  .principal-workspace .school-switcher {
    flex: 0 1 232px;
    max-width: 232px;
  }

  .principal-workspace .academic-year-form {
    flex: 0 0 208px;
    min-width: 208px;
  }

  .principal-workspace .global-search {
    flex: 1 1 360px;
    width: auto;
    max-width: 520px;
  }
}

@media (min-width: 681px) {
  .principal-directory-table td {
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* Keep every digit of the active academic year visible in the shared desktop
   utility bar, including deployments that still load app.css on its own. */
@media (min-width: 981px) {
  .utility-bar:not(.teacher-workspace .utility-bar) .academic-year-form {
    flex: 0 0 244px;
    min-width: 244px;
    flex-wrap: nowrap;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .academic-year-form select {
    flex: 1 1 168px;
    min-width: 168px;
    font-variant-numeric: tabular-nums;
  }

  .utility-bar:not(.teacher-workspace .utility-bar) .academic-year-form button {
    flex: 0 0 auto;
  }
}

/* Mobile tabs need recognizable icons, not merely adequate invisible touch
   targets. Keep this override last for legacy single-stylesheet deployments. */
@media (max-width: 760px) {
  .mobile-bottom-nav > a,
  .mobile-bottom-nav > details > summary {
    min-height: 56px;
  }

  .mobile-bottom-nav .nav-icon,
  .mobile-nav-portal .nav-icon {
    display: inline-grid;
    width: 34px;
    height: 32px;
    place-items: center;
  }

  .mobile-bottom-nav .icon-svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.15;
  }
}

@media (max-width: 420px) {
  .mobile-bottom-nav .nav-icon,
  .mobile-nav-portal .nav-icon {
    width: 32px;
    height: 30px;
  }
}

/* Gradebook dates are rendered as independent date/year tokens. Keep this
   fallback in the legacy stylesheet too, because some cached deployments load
   it before the design system has refreshed. A timestamp must never widen a
   teacher card or make its final year disappear. */
.gradebook-date,
.gradebook-last-updated-value,
.gradebook-date small,
.gradebook-date time,
.gradebook-last-updated-value time {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.gradebook-date,
.gradebook-last-updated-value {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.gradebook-date time {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.gradebook-last-updated-value time {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.gradebook-date-date,
.gradebook-date-year,
.gradebook-last-updated-date,
.gradebook-last-updated-year {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: normal;
  white-space: nowrap;
}

/* Area 3 tables become labelled detail cards instead of horizontally-panned
   desktop tables on phones and compact tablets. This keeps every academic and
   attendance value available without relying on a clipped column or an
   invisible scrollbar inside the narrow workspace beside the tablet sidebar. */
@media (max-width: 900px) {
  .academic-table-shell {
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .academic-table-shell > .data-table {
    display: block;
    min-width: 0;
    table-layout: fixed;
    background: transparent;
  }

  .academic-table-shell > .data-table thead {
    display: none;
  }

  .academic-table-shell > .data-table tbody {
    display: grid;
    gap: 10px;
  }

  .academic-table-shell > .data-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
  }

  .academic-table-shell > .data-table tbody td {
    display: grid;
    grid-template-columns: minmax(96px, 0.7fr) minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border: 0;
    border-bottom: 1px solid var(--border);
    overflow-wrap: anywhere;
    align-items: start;
  }

  .academic-table-shell > .data-table tbody td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .academic-table-shell > .data-table tbody td:last-child {
    border-bottom: 0;
  }

  .academic-table-shell > .data-table tbody td[colspan] {
    display: block;
    grid-column: 1 / -1;
    border: 0;
  }

  .academic-table-shell > .data-table tbody td[colspan]::before {
    display: none;
  }

  .academic-table-shell > .data-table .teacher-row-action {
    justify-self: start;
  }
}