/* A compact class seal replaces the long school-year line in the header. */
.brand-hero .brand-copy { align-self:center; }
.header-account :is(#classSwitchButton,.preview-badge).class-switch-badge {
  box-sizing:border-box;
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  min-width:38px;
  min-height:38px;
  max-width:38px;
  margin:0;
  padding:0;
  border:1px solid color-mix(in srgb,var(--accent) 48%,var(--line));
  border-radius:50%;
  background:var(--surface);
  color:var(--accent);
  box-shadow:inset 0 0 0 2px var(--surface),inset 0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
  font-size:13px;
  font-weight:750;
  font-variant-numeric:tabular-nums;
  line-height:1;
  letter-spacing:-.04em;
  cursor:pointer;
}
.header-account :is(#classSwitchButton,.preview-badge).class-switch-badge.is-senior { font-size:10px;letter-spacing:-.06em; }
.header-account :is(#classSwitchButton,.preview-badge).class-switch-badge.is-unset { color:var(--muted);border-color:var(--line);box-shadow:none;font-size:14px; }
.header-account :is(#classSwitchButton,.preview-badge).class-switch-badge:hover { background:color-mix(in srgb,var(--accent) 7%,var(--surface)); }
.header-account :is(#classSwitchButton,.preview-badge).class-switch-badge:focus-visible { outline:2px solid var(--accent);outline-offset:3px; }
.header-account :is(#teacherSyncStatusButton,#themeToggleBtn,#accountAvatarButton) {
  box-sizing:border-box;
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  min-width:38px;
  min-height:38px;
  max-width:38px;
  margin:0;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--surface);
  box-shadow:0 1px 3px rgb(20 30 45 / 8%),inset 0 1px 0 rgb(255 255 255 / 5%);
  overflow:hidden;
  transition:background .18s,border-color .18s,box-shadow .18s;
}
.header-account :is(#teacherSyncStatusButton,#themeToggleBtn,#accountAvatarButton):hover {
  border-color:color-mix(in srgb,currentColor 35%,var(--line));
  background:color-mix(in srgb,currentColor 5%,var(--surface));
  box-shadow:0 3px 9px rgb(20 30 45 / 12%);
}
.header-account :is(#teacherSyncStatusButton,#themeToggleBtn,#accountAvatarButton):focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.header-account #teacherSyncStatusButton { color:#b7444b; }
.header-account #teacherSyncStatusButton[data-state="saved"] { color:#218657;border-color:color-mix(in srgb,#218657 30%,var(--line)); }
.header-account #teacherSyncStatusButton.is-syncing { color:#497ca5; }
.header-account #teacherSyncStatusButton .sync-status-icon { display:block;width:22px;height:22px;flex:0 0 22px;stroke-width:1.8;transform-origin:50% 50%; }
.header-account #themeToggleBtn { color:var(--ink); }
.header-account #themeToggleBtn[data-icon="moon"] { color:#566f88; }
.header-account #themeToggleBtn[data-icon="sun"] { color:#d99d40; }
.header-account #themeToggleBtn .ui-icon { width:21px;height:21px;margin:0; }
.header-account #themeToggleBtn .ui-icon svg { stroke-width:1.7; }
.header-account #accountAvatarButton { border-color:color-mix(in srgb,var(--ink) 18%,var(--line)); }
.header-account #accountAvatarButton .account-avatar-frame,
.header-account #accountAvatarButton .account-avatar-frame img { border-radius:50%;object-fit:cover;object-position:center; }
/* One clipping boundary keeps photos and the fallback flush with the circle. */
.header-account #accountAvatarButton { position:relative; isolation:isolate; }
.header-account #accountAvatarButton .account-avatar-frame { position:absolute; inset:0; width:100%; height:100%; border:0; background:#171a21; overflow:hidden; }
.header-account #accountAvatarButton .account-avatar-frame img { position:absolute; inset:0; display:block; width:100%; height:100%; margin:0; padding:0; }
.header-account #accountAvatarButton .account-avatar-frame img[hidden] { display:none; }
.header-account #accountAvatarButton #accountAvatarFallback { transform:scale(1.075); }
.header-account :is(#classSwitchButton,#teacherSyncStatusButton,#themeToggleBtn,#accountAvatarButton) { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.header-account :is(#classSwitchButton,#teacherSyncStatusButton,#themeToggleBtn,#accountAvatarButton):active { box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ink) 12%,transparent); }
.header-account #accountAvatarButton[aria-expanded="true"] { outline:2px solid var(--accent); outline-offset:2px; }
.header-account #mobileClassSummary { display:block; line-height:1; text-align:center; }
:root.theme-dark .header-account #teacherSyncStatusButton[data-state="saved"] { color:#6dc89b; }
:root.theme-dark .header-account #teacherSyncStatusButton:not([data-state="saved"]):not(.is-syncing) { color:#ed858d; }
@media (max-width:760px) {
  .brand-hero .header-account { gap:5px; }
  .header-account :is(#classSwitchButton,.preview-badge).class-switch-badge { flex-basis:38px;width:38px;height:38px;min-width:38px;min-height:38px;max-width:38px;font-size:13px; }
  .header-account :is(#classSwitchButton,.preview-badge).class-switch-badge.is-senior { font-size:10px; }
  .header-account :is(#teacherSyncStatusButton,#themeToggleBtn,#accountAvatarButton) { flex:0 0 38px;width:38px;height:38px;min-width:38px;min-height:38px;max-width:38px; }
}

#classSwitchDialog { width:min(560px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); box-sizing:border-box; padding:20px; overflow:auto; }
#classSwitchDialog #frequentClassChoices { margin:10px 0 10px; padding-bottom:10px; border-bottom:1px solid var(--line); }
#classSwitchDialog .frequent-class-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
#classSwitchDialog .frequent-class-heading strong { font-size:13px; color:var(--ink); }
#classSwitchDialog .frequent-class-heading > span { font-size:11px; color:var(--muted); }
#classSwitchDialog .frequent-class-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#classSwitchDialog .frequent-class-card { display:flex; align-items:center; min-width:0; border:1px solid var(--control-outline); border-radius:9px; background:var(--surface); overflow:hidden; }
#classSwitchDialog .frequent-class-card[data-current] { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 5%,var(--surface)); }
#classSwitchDialog .frequent-class-switch { display:flex; flex:1; flex-direction:column; justify-content:center; align-items:flex-start; gap:3px; min-width:0; min-height:56px; margin:0; padding:7px 8px; border:0; border-radius:0; background:transparent; color:var(--ink); text-align:left; box-shadow:none; white-space:normal; opacity:1; }
#classSwitchDialog .frequent-class-switch strong { font-size:13px; line-height:1.4; font-weight:650; }
#classSwitchDialog .frequent-class-switch small { font-size:10px; line-height:1.4; font-weight:400; color:var(--muted); }
#classSwitchDialog .frequent-class-switch em { font-size:10px; font-style:normal; color:var(--accent); }
#classSwitchDialog .frequent-class-remove { display:grid; place-items:center; flex:0 0 32px; width:32px; min-width:32px; height:36px; min-height:36px; margin:0 2px 0 0; padding:0; border:0; border-radius:6px; background:transparent; color:var(--muted); box-shadow:none; }
#classSwitchDialog .frequent-class-remove svg { display:block; }
#classSwitchDialog .frequent-class-switch:not(:disabled):hover { background:var(--surface-soft); }
#classSwitchDialog .frequent-class-remove:hover { color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--surface)); }
#classSwitchDialog .frequent-class-grid button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
#classSwitchDialog .class-region-fields,#classSwitchDialog #classContextControls { gap:10px 12px; }
#classSwitchDialog .class-school-field { margin:12px 0; }
#classSwitchDialog label { margin-bottom:0; }
#classSwitchDialog > p:first-of-type { display:none; }
#classSwitchDialog footer { bottom:-20px; padding:12px 0 4px; }
@media(max-width:760px) { #classSwitchDialog { padding:16px; } #classSwitchDialog footer { bottom:-16px; } }

#classSwitchDialog .class-switch-manual { margin-top:4px; }
#classSwitchDialog #classSwitchConfirm[hidden] { display:none; }

/* All class fields stay visible, in paired rows, on desktop and mobile. */
#classSwitchDialog .class-switch-manual { display:grid; gap:12px; margin-top:12px; }
#classSwitchDialog :is(.class-region-fields,#classContextControls) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; margin:0; }
#classSwitchDialog #classContextControls > label { grid-column:auto; min-width:0; margin:0; }
#classSwitchDialog .class-switch-manual label { display:flex; flex-direction:column; gap:6px; color:var(--ink); font-size:13px; }
#classSwitchDialog .class-switch-manual :is(input,select) { width:100%; min-width:0; height:40px; min-height:40px; margin:0; padding:6px 10px; font-size:14px; border:var(--control-stroke) solid var(--control-outline); border-radius:8px; background:var(--surface); color:var(--ink); }
#classSwitchDialog .class-switch-manual small { color:var(--muted); font-weight:400; }
#classSwitchDialog footer { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media(max-width:760px) { #classSwitchDialog :is(.class-region-fields,#classContextControls) { gap:10px; } }

#classSwitchDialog #classContextControls > label:last-child { grid-column:auto; }
#classSwitchDialog #classContextControls label > span { line-height:20px; min-height:20px; }
#classSwitchDialog #classContextControls :is(input,select) { height:40px; min-height:40px; padding:6px 10px; }