@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans/PlusJakartaSans-400-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  color-scheme: light;
  --jh-font-ui: "Plus Jakarta Sans", "Aptos", "Segoe UI", sans-serif;
  --jh-type-page: 2rem;
  --jh-type-page-mobile: 1.75rem;
  --jh-type-section: 1.25rem;
  --jh-type-card: 1rem;
  --jh-type-body: 0.9375rem;
  --jh-type-control: 0.875rem;
  --jh-type-meta: 0.8125rem;
  --jh-leading-page: 1.15;
  --jh-leading-section: 1.25;
  --jh-leading-card: 1.3;
  --jh-leading-body: 1.5;
  --jh-leading-control: 1.25;
  --jh-leading-meta: 1.35;
  --jh-canvas: #f3f6fb;
  --jh-surface: #fbfcfe;
  --jh-surface-muted: #edf2fa;
  --jh-surface-blue: #e8eefc;
  --jh-primary: #172c8f;
  --jh-primary-hover: #102273;
  --jh-primary-soft: #e7edff;
  --jh-ink: #172033;
  --jh-muted: #65718a;
  --jh-border: #d8e0ed;
  --jh-focus: rgba(23, 44, 143, 0.26);
  --jh-shadow: 0 10px 30px rgba(27, 45, 91, 0.07);
  --jh-shadow-hover: 0 16px 36px rgba(27, 45, 91, 0.11);
  --jh-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --jh-radius-control: 8px;
  --jh-radius-card: 12px;

  /* Existing role styles consume these variables. */
  --admin-bg: var(--jh-canvas);
  --admin-surface: var(--jh-surface);
  --admin-border: var(--jh-border);
  --admin-muted-border: var(--jh-border);
  --admin-primary: var(--jh-primary);
  --admin-primary-soft: var(--jh-primary-soft);
  --admin-blue-bg: var(--jh-surface-muted);
  --admin-ink: var(--jh-ink);
  --admin-muted: var(--jh-muted);
  --teacher-bg: var(--jh-canvas);
  --teacher-surface: var(--jh-surface);
  --teacher-border: var(--jh-border);
  --teacher-muted-border: var(--jh-border);
  --teacher-primary: var(--jh-primary);
  --teacher-primary-soft: var(--jh-primary-soft);
  --teacher-blue-bg: var(--jh-surface-muted);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --jh-canvas: #111827;
  --jh-surface: #182235;
  --jh-surface-raised: #1d2940;
  --jh-surface-muted: #202d45;
  --jh-surface-blue: #243557;
  --jh-primary: #9bb0ff;
  --jh-primary-strong: #405bc4;
  --jh-primary-hover: #b4c3ff;
  --jh-primary-soft: #24365d;
  --jh-ink: #f1f5fb;
  --jh-muted: #b2bfd2;
  --jh-border: #34445f;
  --jh-focus: rgba(155, 176, 255, 0.42);
  --jh-shadow: 0 12px 32px rgba(4, 10, 24, 0.24);
  --jh-shadow-hover: 0 18px 42px rgba(4, 10, 24, 0.32);
}

html.theme-transitions-ready,
html.theme-transitions-ready body,
html.theme-transitions-ready body :where(
  .topbar,
  .sidebar,
  .main-content,
  .card,
  [class$="-card"],
  [class*="-card "],
  [class$="-panel"],
  [class*="-panel "],
  [class$="-popover"],
  [class*="-popover "],
  [class$="-modal"],
  [class*="-modal "],
  dialog,
  input,
  select,
  textarea
) {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 180ms;
  transition-timing-function: var(--jh-ease);
}

/* Keep single-choice menus attached to their controls, including inside scrolling dialogs. */
@supports (appearance: base-select) {
  html[data-portal-role] select:not([multiple]):not([size]) {
    appearance: base-select;
    align-items: center;
  }

  html[data-portal-role] select:not([multiple]):not([size])::picker(select) {
    appearance: base-select;
  }

  html[data-portal-role] select:not([multiple]):not([size])::picker(select) {
    width: anchor-size(width);
    box-sizing: border-box;
    max-height: min(320px, 50vh);
    overflow-y: auto;
    margin-block: 4px;
    border: 1px solid var(--jh-border);
    border-radius: var(--jh-radius-control);
    background: var(--jh-surface);
    color: var(--jh-ink);
    box-shadow: 0 10px 24px rgba(18, 27, 54, 0.16);
  }

  html[data-portal-role] select:not([multiple]):not([size]) option {
    padding: 8px 12px;
  }
}
.theme-toggle-button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  position: relative;
  flex: 0 0 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--jh-ink);
  cursor: pointer;
}

.theme-toggle-button:hover {
  border-color: var(--jh-border);
  background: var(--jh-primary-soft);
  color: var(--jh-primary);
}

.theme-toggle-icon {
  width: 19px;
  height: 19px;
  position: absolute;
  inset: 50% auto auto 50%;
  display: block;
  color: currentColor;
  transition:
    opacity 180ms var(--jh-ease),
    transform 180ms var(--jh-ease);
}

.theme-toggle-sun {
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(0.92);
}

.theme-toggle-sun::before {
  content: "";
  width: 2px;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: currentColor;
  box-shadow:
    0 -10px currentColor,
    0 10px currentColor,
    10px 0 currentColor,
    -10px 0 currentColor,
    7px 7px currentColor,
    -7px -7px currentColor,
    7px -7px currentColor,
    -7px 7px currentColor;
  transform: translate(-50%, -50%);
}

.theme-toggle-moon {
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  box-shadow: -4px 4px 0 0 currentColor;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-38deg) scale(0.68);
}

html[data-theme="dark"] .theme-toggle-sun {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(38deg) scale(0.68);
}

html[data-theme="dark"] .theme-toggle-moon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(0.92);
}

html[data-theme="dark"] :where(.menu-item.active, .top-banner.top-banner) {
  border-color: var(--jh-primary-strong);
  background-color: var(--jh-primary-strong);
  color: #f7f9ff;
}

html[data-theme="dark"] .learning-content-file-link {
  color: var(--jh-primary);
}

html[data-theme="dark"] :is(#session-verification-dialog, #portal-logout-dialog)::backdrop {
  background: rgba(5, 10, 22, 0.72);
}

html:not([data-portal-authorized]):not([data-portal-role="parent"]) body:not(.login-page) > * {
  visibility: hidden;
}

html:not([data-portal-authorized]):not([data-portal-role="parent"]) body:not(.login-page)::before {
  content: "Checking your account...";
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  visibility: visible;
  background: var(--jh-canvas);
  color: var(--jh-ink);
  font: 600 var(--jh-type-card)/1.4 var(--jh-font-ui);
}

html:not([data-portal-authorized]) :is(#session-verification-dialog, #portal-logout-dialog) {
  visibility: visible;
}

#session-verification-dialog,
#portal-logout-dialog {
  width: min(420px, calc(100vw - 32px));
  margin: auto;
  padding: 28px;
  border: 1px solid var(--jh-border);
  border-top: 5px solid var(--jh-primary);
  border-radius: 14px;
  background: var(--jh-surface);
  color: var(--jh-ink);
  box-shadow: 0 24px 64px rgba(23, 44, 143, 0.22);
}

#session-verification-dialog::backdrop,
#portal-logout-dialog::backdrop {
  background: rgba(23, 32, 51, 0.58);
  backdrop-filter: blur(2px);
}

#session-verification-dialog h2,
#portal-logout-dialog h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

#session-verification-dialog p,
#portal-logout-dialog p {
  margin: 10px 0 24px;
  color: var(--jh-muted);
  font-size: 16px;
  line-height: 1.5;
}

#session-verification-dialog button {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--jh-primary);
  border-radius: 8px;
  background: var(--jh-primary);
  color: #f8faff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

#session-verification-dialog button:hover {
  border-color: var(--jh-primary-hover);
  background: var(--jh-primary-hover);
}

#portal-logout-dialog {
  text-align: center;
}

.portal-logout-spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  border: 3px solid var(--jh-primary-soft);
  border-top-color: var(--jh-primary);
  border-radius: 50%;
  animation: portal-logout-spin .8s linear infinite;
}

@keyframes portal-logout-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .portal-logout-spinner { animation: none; }
}

html,
html body {
  background-color: var(--jh-canvas);
  color: var(--jh-ink);
}

html body,
html body button,
html body input,
html body select,
html body textarea {
  font-family: var(--jh-font-ui) !important;
}

/* Editor content inherits the portal default; intentional inline font choices still win. */
html body .learning-content-body {
  font-family: var(--jh-font-ui) !important;
}

html body {
  font-size: var(--jh-type-body);
  font-weight: 400;
  line-height: var(--jh-leading-body);
}

html body :where(h1, .page-title) {
  font-size: var(--jh-type-page) !important;
  font-weight: 700 !important;
  line-height: var(--jh-leading-page) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

html body :where(h2, .section-title) {
  font-size: var(--jh-type-section) !important;
  font-weight: 600 !important;
  line-height: var(--jh-leading-section) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

html body :where(h3, h4, h5, h6, .card-title) {
  font-size: var(--jh-type-card) !important;
  font-weight: 600 !important;
  line-height: var(--jh-leading-card) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

html body :where(button, input, select, textarea, label, .menu-item) {
  font-size: var(--jh-type-control) !important;
  font-weight: 500 !important;
  line-height: var(--jh-leading-control) !important;
}

html body :where(small, time, caption, [class$="-meta"], [class*="-meta "]) {
  font-size: var(--jh-type-meta) !important;
  line-height: var(--jh-leading-meta) !important;
}

html body :where(strong, b, [class$="-value"], [class*="-value "]) {
  font-weight: 600 !important;
}

@media (max-width: 600px) {
  html body :where(h1, .page-title) {
    font-size: var(--jh-type-page-mobile) !important;
  }
}

.topbar.topbar {
  border-bottom-color: var(--jh-border);
  background-color: var(--jh-surface);
  box-shadow: 0 1px 0 rgba(23, 44, 143, 0.04);
}

/* React owns the header markup; existing behavior binds after this mount. */
.topbar[data-react-header-ready="true"] a.brand {
  color: inherit;
  text-decoration: none;
}

.topbar[data-react-header-ready="true"] .student-profile {
  gap: 10px;
}

.topbar[data-react-header-ready="true"] .portal-admin-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar[data-react-header-ready="true"] .admin-profile::after {
  display: none;
}

.topbar[data-react-header-ready="true"] .student-profile-name,
.topbar[data-react-header-ready="true"] .avatar {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--jh-ink);
  font: inherit;
  text-align: left;
}

.topbar[data-react-header-ready="true"] .avatar {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  background-color: #2e8dde;
  text-align: center;
}

.topbar[data-react-header-ready="true"] :is(
  .theme-toggle-button,
  .notification-button,
  .avatar,
  .student-profile-name,
  .profile-menu-button,
  .brand
):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--jh-primary) 34%, transparent);
  outline-offset: 3px;
}

.topbar[data-react-header-ready="true"] :is(
  .theme-toggle-button,
  .notification-button,
  .avatar,
  .profile-menu-button
) {
  transition:
    transform 160ms var(--jh-ease),
    background-color 160ms var(--jh-ease),
    border-color 160ms var(--jh-ease);
}

.topbar[data-react-header-ready="true"] :is(
  .theme-toggle-button,
  .notification-button,
  .avatar,
  .profile-menu-button
):active {
  transform: scale(0.96);
}

.sidebar.sidebar {
  border-right-color: var(--jh-border);
  background-color: var(--jh-surface);
}

.main-content.main-content {
  background-color: var(--jh-canvas);
}

.portal-navigation-progress {
  position: fixed;
  top: 0;
  z-index: 1200;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
}

.portal-navigation-progress span {
  display: block;
  width: 70%;
  height: 100%;
  background: var(--jh-primary);
  animation: portal-navigation-progress 900ms var(--jh-ease) infinite;
  transform-origin: left;
}

.portal-visually-hidden {
  position: fixed;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.portal-cache-notice {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin: 0 0 16px;
  padding: 8px 12px;
  border: 1px solid #d8c890;
  border-radius: 8px;
  background: #fff8dd;
  color: #59470b;
  font-size: 13px;
}

.portal-cache-notice button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--jh-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

@keyframes portal-navigation-progress {
  from { transform: translateX(-100%); }
  to { transform: translateX(145%); }
}

.top-banner.top-banner {
  display: none !important;
  border: 1px solid var(--jh-primary);
  border-radius: 10px;
  background: var(--jh-primary);
  color: #f8faff;
  box-shadow: none;
}

.menu-item.menu-item {
  border-radius: 10px;
  color: var(--jh-ink);
  transition:
    background-color 180ms var(--jh-ease),
    color 180ms var(--jh-ease),
    transform 180ms var(--jh-ease);
}

/* Keep every inactive role link equally readable in dark mode. */
html[data-theme="dark"][data-portal-role] .sidebar.sidebar .menu-item.menu-item:not(.active) {
  color: var(--jh-ink);
}

.menu-item.menu-item.active {
  background-color: var(--jh-primary);
  color: #f8faff;
  box-shadow: 0 8px 22px rgba(23, 44, 143, 0.16);
}

.menu-item.menu-item:not(.active):hover {
  background-color: var(--jh-primary-soft);
  color: var(--jh-primary);
  transform: translateX(2px);
}

.sidebar[data-react-sidebar-ready="true"] .menu-item:focus-visible,
.portal-mobile-menu-item:focus-visible,
.portal-mobile-menu-close:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--jh-primary) 34%, transparent);
  outline-offset: 2px;
}

.sidebar[data-react-sidebar-ready="true"] .menu-item:active,
.portal-mobile-menu-item:active {
  transform: scale(0.98);
}

body :where(
  .card,
  [class$="-card"],
  [class*="-card "],
  [class$="-panel"],
  [class*="-panel "],
  [class$="-workspace"],
  [class*="-workspace "]
) {
  border-color: var(--jh-border);
  background-color: var(--jh-surface);
  box-shadow: var(--jh-shadow);
}

body :where(
  [class$="-popover"],
  [class*="-popover "],
  [class$="-dialog"],
  [class*="-dialog "],
  [class$="-modal"],
  [class*="-modal "],
  .modal-box,
  dialog
) {
  border-color: var(--jh-border);
  background-color: var(--jh-surface);
  box-shadow: 0 24px 64px rgba(23, 44, 143, 0.18);
}

body :where(input, select, textarea, [contenteditable="true"]) {
  border-color: var(--jh-border);
  border-radius: 8px;
  background-color: var(--jh-surface);
  color: var(--jh-ink);
  transition:
    border-color 160ms var(--jh-ease),
    box-shadow 160ms var(--jh-ease),
    background-color 160ms var(--jh-ease);
}

body :where(input, select, textarea, [contenteditable="true"]):focus {
  border-color: var(--jh-primary);
  box-shadow: 0 0 0 3px var(--jh-focus);
  outline: none;
}

.learning-content-file-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 6px 0;
  overflow-wrap: anywhere;
  color: #172aa0;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body :where(button, a[href], [role="button"]) {
  transition:
    background-color 180ms var(--jh-ease),
    border-color 180ms var(--jh-ease),
    color 180ms var(--jh-ease),
    box-shadow 180ms var(--jh-ease),
    opacity 180ms var(--jh-ease),
    transform 180ms var(--jh-ease);
}

body :where(button, a[href], [role="button"]):focus-visible {
  outline: 3px solid var(--jh-focus);
  outline-offset: 3px;
}

body :where(button, [role="button"]):not(:disabled):active {
  transform: translateY(1px);
}

body :where(thead, .table-header, [class$="-header-row"]) {
  background-color: var(--jh-surface-muted);
}

body :where(th, td, hr, .divider, [class$="-divider"]) {
  border-color: var(--jh-border);
}

body tbody tr {
  transition: background-color 160ms var(--jh-ease);
}

body tbody tr:hover td {
  background-color: var(--jh-primary-soft);
}

body :where(.muted, .helper-text, .secondary-text, small) {
  color: var(--jh-muted);
}

/* Account menu: one compact disclosure across all role headers. */
#portal-profile-popover.portal-account-menu {
  --account-menu-danger: #ae352b;
  --account-menu-danger-soft: #fff0ed;
  width: min(300px, calc(100vw - 32px)) !important;
  min-height: 0;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 96px);
  padding: 8px;
  border: 1px solid var(--jh-border);
  border-radius: 16px;
  background: var(--jh-surface);
  color: var(--jh-ink);
  font-family: var(--jh-font-ui);
  box-shadow: 0 16px 48px rgb(10 24 58 / .16);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[data-theme="dark"] #portal-profile-popover.portal-account-menu {
  --account-menu-danger: #ffb0a5;
  --account-menu-danger-soft: #382b36;
}
#portal-profile-popover.portal-account-menu.show { display: block; animation: profile-menu-enter 180ms var(--jh-ease); }
#portal-profile-popover .profile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: auto;
  min-height: 46px;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--jh-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease;
}
#portal-profile-popover .profile-menu-item + .profile-menu-item { margin-top: 2px; }
#portal-profile-popover .profile-menu-item:hover { background: var(--jh-surface-muted); }
#portal-profile-popover .profile-menu-item:focus-visible { outline: 2px solid var(--jh-primary); outline-offset: -2px; background: var(--jh-surface-muted); }
#portal-profile-popover .profile-menu-item:active { transform: none; }
#portal-profile-popover .profile-menu-primary { min-height: 68px; margin-bottom: 6px; background: var(--jh-primary-soft); }
#portal-profile-popover .profile-menu-primary .profile-menu-icon { color: var(--jh-primary); }
#portal-profile-popover .profile-menu-copy { display: grid; gap: 4px; flex: 1; min-width: 0; }
#portal-profile-popover .profile-menu-copy strong { color: inherit; font-size: 13px; font-weight: 600; line-height: 1.45; }
#portal-profile-popover .profile-menu-copy small { color: var(--jh-muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
#portal-profile-popover .profile-menu-icon { flex: 0 0 18px; width: 18px; height: 18px; color: var(--jh-muted); }
#portal-profile-popover .profile-menu-divider { height: 1px; margin: 8px 12px; background: var(--jh-border); }
#portal-profile-popover .profile-menu-item:has(.profile-logout-icon) { color: var(--account-menu-danger); }
#portal-profile-popover .profile-logout-icon { color: inherit; }
#portal-profile-popover .profile-menu-item:has(.profile-logout-icon):hover { background: var(--account-menu-danger-soft); }
#portal-profile-popover :is(.profile-menu-external, .profile-menu-chevron) { display: inline-block; flex: 0 0 14px; width: 14px; height: 14px; color: var(--jh-muted); background: currentColor; }
#portal-profile-popover .profile-menu-chevron { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
#portal-profile-popover .profile-menu-external { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat; }
.profile-shield-icon { --profile-menu-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 5 8 9 8 9s8-4 8-9V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.profile-document-icon { --profile-menu-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h6'/%3E%3C/svg%3E"); }
@keyframes profile-menu-enter { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  #portal-profile-popover.portal-account-menu.show,
  #portal-profile-popover .profile-menu-item { animation: none; transition: none; }
}

/* One profile menu contract for every authenticated role. */
.profile-menu-popover.profile-menu-popover {
  width: 310px;
  min-height: 132px;
  position: fixed;
  z-index: 55;
  display: none;
  padding: 17px 19px;
  border: 1px solid var(--jh-border);
  border-radius: 5px;
  background-color: var(--jh-surface);
  color: var(--jh-ink);
  box-shadow: var(--jh-shadow);
}

.profile-menu-popover.profile-menu-popover.show {
  display: block;
}

.profile-menu-item.profile-menu-item {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: none;
  border-radius: 8px;
  background-color: transparent;
  color: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.profile-menu-item.profile-menu-item:focus-visible {
  outline: 3px solid var(--jh-focus);
  outline-offset: 3px;
}

.profile-menu-item.profile-menu-item:active {
  transform: translateY(1px);
}

.profile-menu-divider.profile-menu-divider {
  height: 1px;
  margin: 4px 0 11px;
  background-color: var(--jh-border);
}

.profile-menu-icon.profile-menu-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  flex: 0 0 18px;
  background-color: currentColor;
  -webkit-mask: var(--profile-menu-mask) center / contain no-repeat;
  mask: var(--profile-menu-mask) center / contain no-repeat;
}

.profile-person-icon {
  --profile-menu-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E");
}

.profile-logout-icon {
  --profile-menu-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17l5-5-5-5M15 12H3M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3C/svg%3E");
}

.notification-popover.notification-popover,
.profile-menu-popover.profile-menu-popover,
.admin-menu-popover.admin-menu-popover {
  border-color: var(--jh-border);
  background-color: var(--jh-surface);
}

.notification-pagination.notification-pagination {
  background: var(--jh-surface);
}

html[data-theme="dark"][data-portal-role] .notification-item {
  color: var(--jh-ink);
}

html[data-theme="dark"][data-portal-role] .notification-item :where(
  span,
  small,
  .notification-description,
  time
) {
  color: var(--jh-muted);
}

.notification-item.notification-item:hover,
.profile-menu-item.profile-menu-item:hover {
  background-color: var(--jh-primary-soft);
}

.profile-menu-item.profile-menu-item:has(.profile-logout-icon) {
  color: var(--jh-danger, #a4261d);
}

.profile-menu-item.profile-menu-item:has(.profile-logout-icon):hover {
  background-color: var(--jh-danger-soft, #fff1f0);
}

.main-content:not(.admin-route-loading, .teacher-route-loading, .student-route-loading) {
  animation: jh-page-enter 240ms var(--jh-ease) both;
}

/* Student, teacher, and Parent shells share the same mounted layout. */
html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) {
  --jh-header-height: 78px;
  --jh-shell-width: clamp(220px, 17vw, 264px);
}

html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .topbar.topbar {
  min-height: var(--jh-header-height);
  height: auto;
  gap: 14px;
  padding: 0 clamp(16px, 2vw, 32px) 0 0;
}

html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .brand-area {
  min-width: 0;
  gap: clamp(16px, 2.5vw, 40px);
  flex: 1 1 auto;
}

html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .brand {
  width: var(--jh-shell-width);
  height: var(--jh-header-height);
  min-height: var(--jh-header-height);
  flex: 0 0 var(--jh-shell-width);
  gap: 14px;
  padding: 0 20px;
  border-right: 1px solid var(--jh-border);
  font-size: 13px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .logo {
  width: 56px;
  height: 56px;
}

html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .top-banner.top-banner {
  width: min(320px, 100%);
  height: 46px;
  flex: 0 1 320px;
  font-size: 15px;
}

html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .student-profile {
  min-width: 0;
  flex: 0 1 auto;
  gap: 10px;
  font-size: 14px;
}

html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .student-profile .avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

html[data-portal-role="admin"] .admin-profile .avatar {
  flex: 0 0 42px;
}

html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .student-profile-name {
  width: auto;
  max-width: 170px;
  font-size: 14px;
}

html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .page {
  min-height: calc(100vh - var(--jh-header-height));
}

html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .sidebar.sidebar {
  width: var(--jh-shell-width);
  height: calc(100vh - var(--jh-header-height));
  top: var(--jh-header-height);
  flex: 0 0 var(--jh-shell-width);
  padding: 22px 14px;
  scrollbar-color: #c7c9c4 transparent;
  scrollbar-width: thin;
}

html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .sidebar::before {
  content: "Navigation";
  display: block;
  margin: 0 12px 12px;
  color: var(--jh-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .menu-item.menu-item {
  height: 44px;
  gap: 12px;
  margin-bottom: 4px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--jh-radius-control);
  font-size: 14px;
}

html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .menu-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .main-content.main-content {
  min-width: 0;
  padding: clamp(24px, 3.4vw, 48px) clamp(18px, 3vw, 48px) 48px;
}

html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .main-content:is(.student-route-loading, .teacher-route-loading) {
  opacity: 0.55;
  transition: opacity 160ms var(--jh-ease);
}

@keyframes jh-page-enter {
  from {
    transform: translateY(5px);
  }

  to {
    transform: translateY(0);
  }
}

@media (max-width: 767px) {
  .menu-item.menu-item:not(.active):hover {
    transform: none;
  }

  html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) {
    --jh-header-height: 64px;
  }

  html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .topbar.topbar {
    min-height: var(--jh-header-height);
    flex-wrap: nowrap;
    gap: 10px;
    padding: 0 14px;
  }

  html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .brand-area {
    width: auto;
    flex: 1 1 auto;
  }

  html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .top-banner.top-banner {
    display: none;
  }

  html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .brand {
    width: auto;
    height: var(--jh-header-height);
    min-height: var(--jh-header-height);
    flex: 1 1 auto;
    gap: 9px;
    padding: 0;
    border-right: none;
    font-size: 11px;
  }

  html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .logo {
    width: 44px;
    height: 44px;
  }

  html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .student-profile {
    width: auto;
    flex: 0 1 auto;
    justify-content: flex-end;
    font-size: 12px;
  }

  html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .student-profile-name {
    max-width: 92px;
  }

  html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .page {
    flex-direction: column;
  }

  html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .sidebar.sidebar {
    width: 100%;
    height: auto;
    top: var(--jh-header-height);
    z-index: 35;
    flex-basis: auto;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 10px 14px;
    border-right: none;
    border-bottom: 1px solid var(--jh-border);
  }

  html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .sidebar::before {
    display: none;
  }

  html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .menu-item.menu-item {
    width: auto;
    min-width: 150px;
    flex: 0 0 auto;
    margin-bottom: 0;
  }

  html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .menu-item.menu-item.active {
    box-shadow: none;
  }

  html:is([data-portal-role="student"], [data-portal-role="teacher"], [data-portal-role="parent"]) .main-content.main-content {
    padding: 20px 14px;
  }
}

.announcement-view-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: 86vh;
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 24px;
  border: 1px solid var(--jh-border);
  border-radius: 12px;
  background: var(--jh-surface);
  color: var(--jh-ink);
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.22);
  overflow-y: auto;
}

.announcement-view-dialog::backdrop {
  background: rgba(15, 23, 42, 0.56);
}

.announcement-view-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--jh-border);
}

.announcement-view-header h2 {
  margin: 0;
  color: var(--jh-ink);
  font-size: 24px;
  line-height: 1.25;
}

.announcement-view-close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 0;
  border-radius: 50%;
  background: var(--jh-surface-muted);
  color: var(--jh-ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.announcement-view-close:hover,
.announcement-view-close:focus-visible {
  background: var(--jh-primary-soft);
}

.announcement-view-close:focus-visible {
  outline: 2px solid var(--jh-primary);
  outline-offset: 2px;
}

.announcement-view-message {
  margin: 20px 0;
  color: var(--jh-ink);
  line-height: 1.6;
  white-space: pre-wrap;
}

.announcement-view-message :where(p, ul, ol, blockquote, table) {
  margin: 0 0 10px;
}

.announcement-view-message :where(ul, ol) {
  padding-left: 26px;
}

.announcement-view-message a {
  color: var(--jh-primary);
}

.announcement-view-message table {
  width: 100%;
  border-collapse: collapse;
}

.announcement-view-message :where(td, th) {
  padding: 6px;
  border: 1px solid var(--jh-border);
}

.announcement-view-dialog .announcement-attachment {
  display: grid;
  gap: 7px;
  margin: 14px 0;
}

.announcement-view-dialog .announcement-attachments {
  display: grid;
  gap: 10px;
}

.announcement-view-dialog .announcement-attachment img,
.announcement-view-dialog .announcement-attachment video {
  width: 100%;
  max-height: 420px;
  border-radius: 8px;
  background: var(--jh-surface-muted);
  object-fit: contain;
}

.announcement-view-dialog .announcement-attachment-link {
  width: fit-content;
  color: var(--jh-primary);
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.announcement-attachment .announcement-attachment-link.announcement-image-link {
  display: block;
  width: 100%;
  border-radius: 8px;
}

.announcement-image-link:focus-visible {
  outline: 2px solid var(--jh-primary);
  outline-offset: 3px;
}

.announcement-view-meta {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--jh-border);
  color: var(--jh-muted);
  font-size: 12px;
}

.dashboard-announcement-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff4cc;
  color: #7a5200;
  font-size: 11px;
  font-weight: 600;
}

.portal-toast-stack {
  width: min(380px, calc(100vw - 32px));
  position: fixed;
  z-index: 2000;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.portal-toast {
  --toast-accent: #2563eb;
  --toast-tint: #eff6ff;
  width: 100%;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  gap: 10px;
  align-items: start;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--toast-accent) 28%, #d8deeb);
  border-left: 5px solid var(--toast-accent);
  border-radius: 12px;
  background: var(--jh-surface);
  box-shadow: 0 16px 38px rgb(16 24 40 / 20%);
  color: #101828;
  pointer-events: auto;
  will-change: transform;
}

.portal-toast--info {
  --toast-accent: #2563eb;
  --toast-tint: #eff6ff;
}

.portal-toast--success {
  --toast-accent: #16803c;
  --toast-tint: #ecfdf3;
}

.portal-toast--warning {
  --toast-accent: #b45309;
  --toast-tint: #fff7e6;
}

.portal-toast--error {
  --toast-accent: #b42318;
  --toast-tint: #fff1f0;
}

.portal-toast-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--toast-tint);
  color: var(--toast-accent);
  font-size: 15px;
  font-weight: 600;
}

.portal-toast-content {
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.portal-toast-content strong,
.portal-toast-content span {
  display: block;
}

.portal-toast-content span {
  margin-top: 3px;
  color: #475467;
  font-size: 13px;
  line-height: 1.4;
}

.portal-toast-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #667085;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.portal-toast-close:hover,
.portal-toast-close:focus-visible {
  background: var(--toast-tint);
  color: var(--toast-accent);
}

.portal-toast-close:focus-visible,
.portal-toast-content:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--toast-accent) 28%, transparent);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .portal-toast-stack {
    width: auto;
    inset: max(12px, env(safe-area-inset-top)) 12px auto;
    flex-direction: column-reverse;
  }
}

@media (max-width: 600px) {
  .announcement-view-dialog {
    width: calc(100vw - 24px);
    padding: 18px;
  }

  .announcement-view-header h2 {
    font-size: 20px;
  }
}

/* Shared touch targets for phones and tablets. */
@media (max-width: 1024px) {
  html[data-portal-role] .main-content :where(
    button,
    select,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    summary,
    [role="button"]
  ) {
    min-height: 44px;
  }

  html[data-portal-role] .topbar :is(.notification-button, .profile-menu-button) {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    flex: 0 0 44px;
    padding: 0;
  }

  html[data-portal-role] .topbar .theme-toggle-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    flex: 0 0 44px;
  }

  html[data-portal-role] .topbar .notification-button {
    display: grid;
    place-items: center;
    border: 0 !important;
    border-radius: 10px;
  }

  html[data-portal-role] .topbar .notification-bell-icon {
    width: 22px;
    height: 22px;
    color: var(--jh-ink);
  }

  html[data-portal-role] .topbar .notification-badge {
    top: 3px;
    right: 3px;
  }

  html[data-portal-role] .topbar .profile-menu-button {
    display: grid;
    place-items: center;
  }

  html[data-portal-role] .topbar .profile-menu-button::before {
    margin: -4px 0 0;
  }

  html[data-portal-role]
    :is(.notification-popover, .profile-menu-popover, .admin-menu-popover) button {
    min-height: 44px;
  }
}

/* Shared phone shell: role actions plus an optional native More sheet. */
@media (max-width: 767px) {
  html[data-portal-role] {
    --jh-mobile-nav-height: 68px;
    overflow-x: hidden;
    overflow-x: clip;
  }

  html[data-portal-role] body,
  html[data-portal-role] .page {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-x: clip;
  }

  html[data-portal-role] .topbar.topbar {
    padding-inline-start: max(16px, env(safe-area-inset-left)) !important;
    padding-inline-end: max(16px, env(safe-area-inset-right)) !important;
  }

  html[data-portal-role] .page {
    display: block;
    min-height: calc(100dvh - var(--jh-header-height, 64px));
  }

  html[data-portal-role] .sidebar.sidebar {
    width: 100% !important;
    height: calc(var(--jh-mobile-nav-height) + env(safe-area-inset-bottom)) !important;
    min-height: 0;
    position: fixed !important;
    inset: auto 0 0 !important;
    z-index: 100;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    overflow: visible !important;
    padding: 6px max(8px, env(safe-area-inset-right))
      calc(6px + env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left)) !important;
    border: 0 !important;
    border-top: 1px solid var(--jh-border, #d8dce7) !important;
    background: var(--jh-surface);
    box-shadow: 0 -10px 28px rgba(18, 35, 86, 0.1);
    transition: transform 160ms var(--jh-ease, ease);
  }

  html[data-portal-role="parent"] .sidebar.sidebar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  html[data-portal-role] .sidebar.sidebar::before,
  html[data-portal-role] .sidebar.sidebar .menu-item {
    display: none !important;
  }

  html[data-portal-role] .sidebar.sidebar :is(
    .portal-mobile-primary,
    .portal-mobile-more-button
  ) {
    width: 100% !important;
    min-width: 0 !important;
    height: 56px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0;
    padding: 4px 2px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #5d6473;
    /* The global control token is important, so the hidden label must be too. */
    font-size: 0 !important;
    line-height: 1;
    text-align: center;
    box-shadow: none;
  }

  html[data-portal-role] .sidebar.sidebar :is(
    .portal-mobile-primary,
    .portal-mobile-more-button
  )::after {
    content: attr(data-mobile-label);
    max-width: 100%;
    overflow: hidden;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-portal-role] .sidebar.sidebar .portal-mobile-primary.active {
    background: #edf1ff;
    color: #1d3598;
  }

  html[data-portal-role] .sidebar.sidebar .menu-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin: 0;
  }

  .portal-mobile-more-icon::before {
    content: "";
    width: 4px;
    height: 4px;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 10px 0 currentColor, 0 10px currentColor, 10px 10px currentColor;
  }

  html[data-portal-role] .main-content.main-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 20px max(16px, env(safe-area-inset-right))
      calc(var(--jh-mobile-nav-height) + env(safe-area-inset-bottom) + 24px)
      max(16px, env(safe-area-inset-left)) !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }

  /* A fixed phone navigation bar must not cover compose actions. */
  html[data-portal-role] body:has(.mail-modal-backdrop[aria-hidden="false"])
    .sidebar.sidebar {
    pointer-events: none;
    transform: translateY(110%);
  }

  html[data-portal-role] .main-content > *,
  html[data-portal-role] .main-content :where(article, section, form, fieldset) {
    min-width: 0;
    max-width: 100%;
  }

  html[data-portal-role] .main-content :where(input, select, textarea) {
    max-width: 100%;
    font-size: 16px;
  }

  html[data-portal-role] .main-content :where(h1, h2, h3, p, dd, a) {
    overflow-wrap: anywhere;
  }

  html[data-portal-role] .main-content :where(
    .table-wrapper,
    .table-panel,
    .audit-table-wrapper,
    .table-container
  ) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  html[data-portal-role] body:has(:is(input, textarea, [contenteditable="true"]):focus)
    .sidebar.sidebar {
    pointer-events: none;
    transform: translateY(110%);
  }

  html[data-portal-role] .profile-menu-popover {
    width: min(310px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px);
    max-height: min(70dvh, 620px);
    position: fixed !important;
    overflow-y: auto;
    border-radius: 16px;
  }

  html[data-portal-role] .admin-menu-popover {
    width: min(310px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px);
    max-height: min(70dvh, 620px);
    position: fixed !important;
    overflow-y: auto;
    border-radius: 16px;
  }

  html[data-portal-role] .notification-popover {
    width: min(552px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px);
    max-height: min(70dvh, 620px);
    position: fixed !important;
    overflow-y: auto;
    border-radius: 16px;
  }

  .portal-mobile-menu {
    width: min(280px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: min(72dvh, 640px);
    position: fixed;
    top: auto;
    right: max(8px, env(safe-area-inset-right));
    bottom: calc(var(--jh-mobile-nav-height) + env(safe-area-inset-bottom) + 8px);
    left: auto;
    margin: 0;
    padding: 0 0 8px;
    border: 1px solid var(--jh-border, #d8dce7);
    border-radius: 18px;
    background: var(--jh-surface);
    color: #101a36;
    box-shadow: 0 24px 70px rgba(16, 27, 63, 0.28);
    overflow-y: auto;
  }

  .portal-mobile-menu::backdrop {
    background: rgba(16, 27, 63, 0.48);
  }

  .portal-mobile-menu header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--jh-border, #d8dce7);
    background: var(--jh-surface);
  }

  .portal-mobile-menu h2 {
    margin: 0;
    font-size: 20px;
  }

  .portal-mobile-menu-close {
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--jh-border, #d8dce7);
    border-radius: 10px;
    background: var(--jh-surface);
    color: #1d3598;
    font: inherit;
    font-weight: 600;
  }

  .portal-mobile-menu-list,
  .portal-mobile-menu-account,
  .portal-mobile-menu-footer {
    display: grid;
    gap: 4px;
    padding: 8px;
  }

  .portal-mobile-menu-list::before,
  .portal-mobile-menu-account::before {
    padding: 6px 12px 2px;
    color: #667085;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
  }

  .portal-mobile-menu-list::before {
    content: "Pages";
  }

  .portal-mobile-menu-account::before {
    content: "Account";
  }

  .portal-mobile-menu-list:empty {
    display: none;
  }

  .portal-mobile-menu-account,
  .portal-mobile-menu-footer {
    border-top: 1px solid var(--jh-border, #d8dce7);
  }

  .portal-mobile-menu-item {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #202d78;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
  }

  .portal-mobile-menu-item:hover,
  .portal-mobile-menu-item:focus-visible {
    background: #edf1ff;
  }

  .portal-mobile-logout {
    color: #a61b1b;
  }
}

@media (max-width: 520px) {
  html[data-portal-role] :is(.student-profile-name, .admin-profile p) {
    display: none;
  }

  html[data-portal-role] .topbar :is(.student-profile, .admin-profile) .profile-menu-button {
    display: none;
  }

  html[data-portal-role] .brand p {
    display: none;
  }

  html[data-portal-role] .brand {
    width: 44px !important;
    flex: 0 0 44px !important;
    padding-inline: 0 !important;
    border-right: 0 !important;
  }

  html[data-portal-role] .brand .logo {
    width: 44px;
    height: 44px;
  }
}

@media (min-width: 768px) {
  .portal-mobile-menu,
  .portal-mobile-more-button {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Calendar controls share one dark surface across every authenticated role. */
html[data-theme="dark"] body .student-calendar-content .calendar-month-label {
  border-color: var(--jh-border);
  background: var(--jh-surface-raised);
  color: var(--jh-ink);
}

/* A notification nudge does not need an animation runtime. */
.notification-bell-icon.is-ringing { transform-origin: 50% 15%; animation: portal-bell-ring .4s ease-in-out; }
@keyframes portal-bell-ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } 75% { transform: rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .notification-bell-icon.is-ringing { animation: none; } }

/* Notification inbox: a bounded list with actions outside the scrolling area. */
#portal-notification-popover.portal-notifications-panel {
  width: min(440px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px);
  max-height: min(640px, calc(100dvh - 96px));
  padding: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--jh-border);
  border-radius: 16px;
  background: var(--jh-surface);
  color: var(--jh-ink);
  font-family: var(--jh-font-ui);
  box-shadow: 0 16px 48px rgb(10 24 58 / .16);
}
#portal-notification-popover.portal-notifications-panel.show { display: flex; animation: notification-panel-enter 180ms var(--jh-ease); }
#portal-notification-popover .notification-header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--jh-border);
}
#portal-notification-popover .notification-header h2 { margin: 0; color: var(--jh-ink); font-size: 20px; font-weight: 700; line-height: 1.3; }
#portal-notification-popover .notification-summary { margin: 5px 0 0; color: var(--jh-muted); font-size: 12px; line-height: 1.5; }
#portal-notification-popover .notification-header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#portal-notification-popover :is(.notification-clear-button, .notification-close-button, .notification-page-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--jh-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
#portal-notification-popover .notification-close-button { width: 40px; padding: 0; color: var(--jh-muted); }
#portal-notification-popover :is(.notification-clear-button, .notification-close-button, .notification-show-less):hover:not(:disabled) { background: var(--jh-surface-muted); color: var(--jh-ink); }
#portal-notification-popover .notification-clear-button:disabled { opacity: .45; cursor: default; }
#portal-notification-popover :is(button, a):focus-visible { outline: 2px solid var(--jh-primary); outline-offset: -3px; }
#portal-notification-popover .notification-list {
  min-height: 0;
  max-height: none;
  flex: 0 1 auto;
  padding: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--jh-border) transparent;
}
#portal-notification-popover .notification-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  width: 100%;
  padding: 14px;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--jh-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  opacity: 1;
  animation: notification-row-enter 160ms ease-out;
}
#portal-notification-popover .notification-item + .notification-item { margin-top: 2px; }
#portal-notification-popover .notification-item:is(button, a) { cursor: pointer; transition: background-color 140ms ease; }
#portal-notification-popover .notification-item:is(button, a):hover { background: var(--jh-surface-muted); }
#portal-notification-popover .notification-kind-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--jh-primary-soft);
  color: var(--jh-primary);
}
#portal-notification-popover .viewed .notification-kind-icon { background: var(--jh-surface-muted); color: var(--jh-muted); }
#portal-notification-popover .notification-copy { min-width: 0; display: block; overflow-wrap: anywhere; }
#portal-notification-popover .notification-item-heading { display: flex; align-items: baseline; gap: 10px; }
#portal-notification-popover .notification-item strong { flex: 1; margin: 0; color: var(--jh-ink); font-size: 13px; font-weight: 650; line-height: 1.5; }
#portal-notification-popover .viewed strong { font-weight: 500; }
#portal-notification-popover .notification-unread { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--jh-primary); }
#portal-notification-popover :is(.notification-detail, .notification-description) { display: block; margin-top: 4px; color: var(--jh-muted); font-size: 12px; line-height: 1.6; }
#portal-notification-popover .notification-item time { display: block; margin-top: 8px; color: var(--jh-muted); font-size: 11px; line-height: 1.5; }
#portal-notification-popover .notification-empty { display: grid; justify-items: center; gap: 8px; margin: 0; padding: 32px 20px 36px; text-align: center; }
#portal-notification-popover .notification-empty-icon { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 8px; border-radius: 20px; background: var(--jh-primary-soft); color: var(--jh-primary); }
#portal-notification-popover .notification-empty strong { color: var(--jh-ink); font-size: 14px; font-weight: 600; }
#portal-notification-popover .notification-empty p { max-width: 28ch; margin: 0; color: var(--jh-muted); font-size: 12px; line-height: 1.6; }
#portal-notification-popover .notification-pagination { position: static; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--jh-border); background: var(--jh-surface); }
#portal-notification-popover .notification-page-count { margin: 0; color: var(--jh-muted); font-size: 11px; line-height: 1.5; }
#portal-notification-popover .notification-page-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
#portal-notification-popover .notification-page-button { flex: 0 0 auto; }
#portal-notification-popover .notification-load-more { border-color: var(--jh-border); background: var(--jh-primary-soft); color: var(--jh-primary); }
#portal-notification-popover .notification-load-more:hover { border-color: var(--jh-primary); }
#portal-notification-popover .notification-list-end { padding: 0 6px; color: var(--jh-muted); font-size: 11px; }
@keyframes notification-panel-enter { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes notification-row-enter { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 480px) {
  #portal-notification-popover .notification-header { padding: 16px; gap: 8px; }
  #portal-notification-popover .notification-header-actions { gap: 2px; }
  #portal-notification-popover :is(.notification-clear-button, .notification-close-button, .notification-page-button) { min-height: 44px; }
  #portal-notification-popover .notification-pagination { padding: 10px 12px; }
  #portal-notification-popover .notification-page-count { flex-basis: 100%; }
  #portal-notification-popover .notification-item { padding: 12px 10px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #portal-notification-popover.portal-notifications-panel.show,
  #portal-notification-popover .notification-item { animation: none; transition: none; }
}

/* Shared role shell: native hover/focus disclosure, with no content reflow. */
html[data-portal-role] body .topbar[data-react-header-ready="true"] {
  --jh-header-height: 72px;
  height: 72px;
  min-height: 72px;
  padding: 0 24px;
  gap: 20px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  background: var(--jh-surface);
  border-bottom: 1px solid var(--jh-border);
  box-shadow: none;
}
html[data-portal-role] { --jh-header-height: 72px; }
html[data-portal-role] body .topbar[data-react-header-ready="true"] .brand-area { width: auto; min-width: 0; flex: 1; gap: 24px; }
html[data-portal-role] body .topbar[data-react-header-ready="true"] a.brand {
  width: auto;
  flex: 0 1 auto;
  height: auto;
  min-height: 0;
  padding: 0;
  gap: 12px;
  border: 0;
}
html[data-portal-role] body .topbar[data-react-header-ready="true"] .brand .logo { width: 44px; height: 44px; }
html[data-portal-role] body .topbar[data-react-header-ready="true"] .portal-wordmark { display: grid; gap: 4px; margin: 0; color: var(--jh-ink); white-space: nowrap; }
html[data-portal-role] body .topbar[data-react-header-ready="true"] .portal-wordmark strong { font-size: 13px; letter-spacing: .01em; font-weight: 700; }
html[data-portal-role] body .topbar[data-react-header-ready="true"] .portal-wordmark span { font-size: 10px; letter-spacing: .02em; color: var(--jh-muted); font-weight: 500; }
html[data-portal-role] body .topbar[data-react-header-ready="true"] .portal-role-name { padding-left: 24px; border-left: 1px solid var(--jh-border); color: var(--jh-muted); font-size: 13px; white-space: nowrap; }
html[data-portal-role] body .topbar[data-react-header-ready="true"] :is(.student-profile, .portal-admin-controls) { width: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
html[data-portal-role] body .topbar[data-react-header-ready="true"] :is(.theme-toggle-button, .notification-button) { width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--jh-ink); }
html[data-portal-role] body .topbar[data-react-header-ready="true"] :is(.theme-toggle-button, .notification-button):hover { background: var(--jh-surface-muted); border-color: var(--jh-border); }
html[data-portal-role] body .topbar[data-react-header-ready="true"] :is(.portal-profile-trigger, .admin-profile) { display: flex; align-items: center; gap: 10px; width: auto; min-height: 44px; padding: 5px 10px 5px 5px; border: 1px solid var(--jh-border); border-radius: 10px; background: var(--jh-surface); color: var(--jh-ink); font: inherit; cursor: pointer; }
html[data-portal-role] body .topbar[data-react-header-ready="true"] :is(.portal-profile-trigger, .admin-profile):hover { background: var(--jh-surface-muted); }
html[data-portal-role] body .topbar[data-react-header-ready="true"] .avatar { width: 34px; height: 34px; flex: 0 0 34px; }
html[data-portal-role] body .topbar[data-react-header-ready="true"] .student-profile-name { min-width: 0; width: auto; max-width: 180px; color: var(--jh-ink); font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
html[data-portal-role] body .topbar[data-react-header-ready="true"] .admin-profile > .profile-menu-button { width: 12px; height: 12px; min-width: 0; flex: 0 0 12px; padding: 0; background: none; }
html[data-portal-role] body .topbar[data-react-header-ready="true"] .profile-menu-button::before { order: 3; width: 6px; height: 6px; flex: 0 0 6px; margin: 0 0 3px 4px; border-color: var(--jh-muted); }
html[data-portal-role] body .topbar[data-react-header-ready="true"] .portal-skip-link { position: absolute; left: 16px; top: -100px; z-index: 1; padding: 10px 16px; border: 1px solid var(--jh-border); border-radius: 8px; background: var(--jh-surface); color: var(--jh-ink); font: inherit; }
html[data-portal-role] body .topbar[data-react-header-ready="true"] .portal-skip-link:focus { top: 12px; }
html[data-portal-role] body :is(.topbar[data-react-header-ready="true"], .sidebar[data-react-sidebar-ready="true"]) :is(button, a):focus-visible { outline: 3px solid var(--jh-primary); outline-offset: 3px; }

@media (min-width: 768px) {
  html[data-portal-role] body .sidebar[data-react-sidebar-ready="true"] {
    width: 76px;
    flex: 0 0 76px;
    height: calc(100dvh - var(--jh-header-height));
    position: sticky;
    top: var(--jh-header-height);
    align-self: flex-start;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    z-index: 30;
  }
  html[data-portal-role] body .sidebar[data-react-sidebar-ready="true"]::before { display: none; }
  html[data-portal-role] body .sidebar[data-react-sidebar-ready="true"]:has(.portal-sidebar-panel[data-pinned="true"]) { width: 244px; flex-basis: 244px; }
  html[data-portal-role] body .sidebar[data-react-sidebar-ready="true"] .portal-sidebar-panel {
    position: absolute;
    inset: 0 auto 0 0;
    width: 76px;
    padding: 16px 12px;
    border-right: 1px solid var(--jh-border);
    background: var(--jh-surface);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  html[data-portal-role] body .sidebar[data-react-sidebar-ready="true"] .portal-sidebar-tools { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--jh-border); }
  html[data-portal-role] body .sidebar[data-react-sidebar-ready="true"] :is(.portal-sidebar-pin, .menu-item) { position: relative; display: flex; align-items: center; justify-content: flex-start; width: 100%; min-width: 0; height: 48px; margin: 0 0 6px; padding: 0 15px; gap: 0; border: 1px solid transparent; border-radius: 10px; color: var(--jh-muted); background: transparent; font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; box-shadow: none; transform: none; }
  html[data-portal-role] body .sidebar[data-react-sidebar-ready="true"] .portal-sidebar-pin { border-color: var(--jh-border); margin: 0; }
  html[data-portal-role] body .sidebar[data-react-sidebar-ready="true"] :is(.portal-sidebar-pin, .menu-item) > :is(svg, .menu-icon) { width: 20px; height: 20px; flex: 0 0 20px; color: inherit; }
  html[data-portal-role] body .sidebar[data-react-sidebar-ready="true"] .portal-nav-label { position: absolute; left: 52px; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateX(-4px); }
  html[data-portal-role] body .sidebar[data-react-sidebar-ready="true"] :is(.portal-sidebar-pin, .menu-item):hover { color: var(--jh-ink); background: var(--jh-surface-muted); transform: none; }
  html[data-portal-role] body .sidebar[data-react-sidebar-ready="true"] .menu-item.active,
  html[data-portal-role] body .sidebar[data-react-sidebar-ready="true"] .portal-sidebar-pin[aria-pressed="true"] { color: var(--jh-primary); background: var(--jh-primary-soft); border-color: transparent; box-shadow: none; }
  html[data-portal-role] body .sidebar[data-react-sidebar-ready="true"] .menu-item.active::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: -1px; width: 3px; border-radius: 3px; background: var(--jh-primary); }
  html[data-portal-role] body .sidebar[data-react-sidebar-ready="true"] .portal-sidebar-panel:is([data-pinned="true"], :has(:focus-visible)) { width: 244px; box-shadow: 12px 0 28px rgb(10 24 58 / .12); }
  html[data-portal-role] body .sidebar[data-react-sidebar-ready="true"] .portal-sidebar-panel:is([data-pinned="true"], :has(:focus-visible)) .portal-nav-label { opacity: 1; visibility: visible; transform: none; }
  @media (hover: hover) {
    html[data-portal-role] body .sidebar[data-react-sidebar-ready="true"] .portal-sidebar-panel:hover { width: 244px; box-shadow: 12px 0 28px rgb(10 24 58 / .12); }
    html[data-portal-role] body .sidebar[data-react-sidebar-ready="true"] .portal-sidebar-panel:hover .portal-nav-label { opacity: 1; visibility: visible; transform: none; }
  }
  html[data-portal-role] body .sidebar[data-react-sidebar-ready="true"] .portal-sidebar-panel[data-pinned="true"] { box-shadow: none; }
  @media (prefers-reduced-motion: no-preference) {
    html[data-portal-role] body .sidebar[data-react-sidebar-ready="true"] .portal-nav-label { transition: opacity 140ms ease, transform 140ms ease; }
  }
}
@media (max-width: 1024px) {
  html[data-portal-role] body .topbar[data-react-header-ready="true"] .student-profile-name { display: none; }
  html[data-portal-role] body .topbar[data-react-header-ready="true"] .portal-profile-trigger::before,
  html[data-portal-role] body .topbar[data-react-header-ready="true"] .admin-profile > .profile-menu-button { display: none; }
  html[data-portal-role] body .topbar[data-react-header-ready="true"] :is(.portal-profile-trigger, .admin-profile) { width: 44px; height: 44px; padding: 4px; justify-content: center; }
}
@media (max-width: 767px) {
  html[data-portal-role] { --jh-header-height: 64px; }
  html[data-portal-role] body .topbar[data-react-header-ready="true"] { height: 64px; min-height: 64px; --jh-header-height: 64px; gap: 8px; }
  html[data-portal-role] body .topbar[data-react-header-ready="true"] .brand-area { gap: 8px; }
  html[data-portal-role] body .topbar[data-react-header-ready="true"] .portal-wordmark { display: none; }
  html[data-portal-role] body .topbar[data-react-header-ready="true"] .portal-role-name { border: 0; padding: 0; font-size: 11px; }
  html[data-portal-role] body .topbar[data-react-header-ready="true"] :is(.student-profile, .portal-admin-controls) { gap: 4px; }
  html[data-portal-role] body .sidebar[data-react-sidebar-ready="true"] :is(.portal-sidebar-panel, #portal-primary-menu) { display: contents; }
  html[data-portal-role] body .sidebar[data-react-sidebar-ready="true"] :is(.portal-sidebar-tools, .portal-nav-label) { display: none; }
}