/* === First-run onboarding tour ========================================== */
/* --- First-run setup wizard ------------------------------------------------
   A centred sheet rather than coach-marks. On phones it fills the screen and
   scrolls internally, with the action bar pinned so Continue stays reachable
   above the home indicator. */
.setup-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--a1-sw-scrim, rgba(6, 10, 18, 0.78));
  backdrop-filter: blur(3px);
}

.setup-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: min(520px, 100%);
  max-height: min(720px, calc(var(--app-live-viewport-height, 100dvh) - 40px));
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel, #121a26);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.setup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 10px;
}

.setup-progress { display: flex; align-items: center; gap: 6px; }

.setup-section-label {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.setup-dot {
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  transition: background-color 200ms ease;
}

.setup-dot.is-done { background: rgba(73, 209, 125, 0.55); }
.setup-dot.is-active { background: var(--accent, #35d4ff); }

.setup-quit {
  padding: 6px 4px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.setup-quit:hover, .setup-quit:focus-visible { color: var(--text); }

.setup-body {
  min-height: 0;
  padding: 4px 18px 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.setup-title { margin: 4px 0 8px; font-size: 19px; font-weight: 900; }

.setup-lede {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
}

.setup-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.setup-email-policy-warning { margin: 0 0 14px; padding: 11px 13px; border: 1px solid color-mix(in srgb, #d09221 45%, var(--line)); border-radius: 10px; background: color-mix(in srgb, #d09221 10%, var(--panel)); color: var(--text); font-size: 13px; line-height: 1.5; }
.setup-email-policy-warning strong { font-weight: 850; }
.setup-email-warning-backdrop { position: fixed; inset: 0; z-index: 1; display: grid; place-items: center; padding: 20px; background: rgba(3, 8, 18, .68); }
.setup-email-warning-backdrop.hidden { display: none; }
.setup-email-warning-card { width: min(420px, 100%); padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.setup-email-warning-card h3 { margin: 0 0 9px; font-size: 18px; }
.setup-email-warning-card p { margin: 0 0 18px; line-height: 1.5; }
.setup-email-warning-card button { min-height: 44px; }

.setup-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.setup-list strong { color: var(--text); }

.setup-feature-list { margin-bottom: 14px; }
.setup-feature-list li { margin-bottom: 5px; }

/* "Hide" is an escape hatch, not a peer of Connect — keep it visibly minor. */
.learn-provider-action-menu button.learn-provider-menu-secondary,
.academic-assistant-integration-menu button.assistant-menu-secondary {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.setup-link-button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-bottom: 12px;
  padding: 0 14px;
  border: 1px solid rgba(53, 212, 255, 0.42);
  border-radius: 9px;
  color: var(--cyan, #35d4ff);
  background: rgba(53, 212, 255, 0.08);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.setup-link-button:hover, .setup-link-button:focus-visible { background: rgba(53, 212, 255, 0.16); }

.setup-howto {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--a1-sw-surface-3, rgba(8, 13, 22, 0.4));
}

.setup-howto summary { cursor: pointer; font-size: 13px; font-weight: 750; }

.setup-howto ol, .setup-howto p {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.65;
}

.setup-howto p { padding-left: 0; }
.setup-howto strong { color: var(--text); }

.setup-field { display: block; margin-bottom: 12px; }

.setup-field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12.5px;
}

/* 16px keeps iOS Safari from zooming the page when a field takes focus. */
.setup-field input { width: 100%; min-height: 44px; font-size: 16px; }

.setup-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.setup-check input {
  flex: 0 0 auto;
  width: 17px;
  min-height: 17px;
  height: 17px;
  margin-top: 1px;
}

.setup-connected-accounts {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
}

.setup-connected-accounts > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--a1-sw-surface-3, rgba(8, 13, 22, .4));
}

.setup-connected-accounts strong {
  min-width: 0;
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-connected-accounts span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11.5px;
}

.setup-provider-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.setup-provider-actions > button {
  width: 100%;
  min-width: 0;
}

.setup-courses { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }

.setup-course {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--a1-sw-surface-3, rgba(8, 13, 22, 0.4));
  cursor: pointer;
}

@media (hover: hover) {
  .setup-course:hover{ border-color: rgba(53, 212, 255, 0.38);  }
}

.setup-course.is-recommended {
  border-color: rgba(53, 212, 255, 0.32);
  background: rgba(53, 212, 255, 0.07);
}

.setup-course input {
  flex: 0 0 auto;
  width: 18px;
  min-height: 18px;
  height: 18px;
  margin: 0;
}

.setup-course-copy { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.setup-course-copy strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.setup-course-copy small { color: var(--muted); font-size: 11.5px; }

.setup-course-badge {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.11);
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

.setup-message {
  min-height: 18px;
  margin: 0;
  padding: 0 18px;
  color: var(--muted);
  font-size: 12.5px;
}

.setup-message[data-tone="error"] { color: var(--red); }

.setup-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px calc(14px + var(--a1-safe-bottom));
  border-top: 1px solid var(--line-soft);
}

.setup-foot-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.setup-skip {
  padding: 10px 4px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.setup-skip:hover:not(:disabled), .setup-skip:focus-visible { color: var(--text); }
.setup-skip:disabled { opacity: 0.5; cursor: default; }

.setup-back {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid var(--a1-sw-line, rgba(255, 255, 255, 0.16));
  border-radius: 10px;
  color: var(--text);
  background: var(--a1-sw-surface-3, rgba(255, 255, 255, 0.05));
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.setup-back.hidden { display: none; }
.setup-back:disabled,
.setup-quit:disabled { opacity: 0.5; cursor: default; }

.setup-card .setup-next { min-height: 42px; padding: 0 20px; font-size: 13px; }
.setup-card .setup-next:disabled { opacity: 0.6; cursor: default; }

/* Phones: fill the screen, body scrolls under a pinned action bar. */
@media (max-width: 560px) {
  .setup-overlay { padding: 0; place-items: stretch; }

  .setup-card {
    width: 100%;
    max-width: none;
    max-height: var(--app-live-viewport-height, 100dvh);
    height: var(--app-live-viewport-height, 100dvh);
    border: 0;
    border-radius: 0;
  }

  .setup-head { padding: calc(14px + var(--a1-safe-top)) 16px 10px; }
  .setup-body { padding: 4px 16px 8px; }
  .setup-message { padding: 0 16px; }
  .setup-foot { padding: 12px 16px calc(14px + var(--a1-safe-bottom)); }
  .setup-title { font-size: 18px; }
  .setup-courses { max-height: none; }
}

body.setup-open { overflow: hidden; }

/* One-time introductions shown only when the user reaches the related surface. */
body.first-run-hint-open { overflow: hidden; }

.first-run-coach {
  position: fixed;
  z-index: 455;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border: 1px solid rgba(53, 212, 255, 0.46);
  border-radius: 12px;
  background: var(--panel, #121a26);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.38);
}

.first-run-coach p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
}

.first-run-coach-action {
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: #071018;
  background: var(--cyan, #35d4ff);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.first-run-coach-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  border: solid rgba(53, 212, 255, 0.46);
  background: var(--panel, #121a26);
  transform: translateX(-50%) rotate(45deg);
}

.first-run-coach[data-placement="below"] .first-run-coach-arrow {
  top: -7px;
  border-width: 1px 0 0 1px;
}

.first-run-coach[data-placement="above"] .first-run-coach-arrow {
  bottom: -7px;
  border-width: 0 1px 1px 0;
}

.first-run-hint-overlay {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--a1-sw-scrim, rgba(6, 10, 18, 0.76));
  backdrop-filter: blur(5px);
}

.first-run-hint-dialog {
  position: relative;
  display: grid;
  width: min(460px, 100%);
  max-height: min(620px, calc(var(--app-live-viewport-height, 100dvh) - 40px));
  overflow: hidden;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 16px;
  background: var(--panel, #121a26);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
}

.first-run-hint-copy {
  min-height: 0;
  overflow-y: auto;
  padding: 24px 52px 18px 22px;
}

.first-run-hint-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--cyan, #35d4ff);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.first-run-hint-copy h3 {
  margin: 0 0 9px;
  font-size: 20px;
  line-height: 1.25;
}

.first-run-hint-copy p,
.first-run-hint-copy ul {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.first-run-hint-copy ul {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  padding-left: 19px;
}

.first-run-hint-copy ul.hidden { display: none; }

.first-run-hint-close {
  position: absolute;
  z-index: 1;
  top: 13px;
  right: 13px;
  display: grid;
  place-items: center;
  width: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 21px;
  cursor: pointer;
}

.first-run-hint-close:hover,
.first-run-hint-close:focus-visible {
  border-color: rgba(53, 212, 255, 0.45);
  color: var(--text);
}

.first-run-hint-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 14px 18px calc(14px + var(--a1-safe-bottom));
  border-top: 1px solid var(--line-soft);
}

.first-run-hint-actions button { min-height: 42px; }

/* Services/registration audit (task #19): the first-run hint footer is a flex
   row justified to the end. The ghost "Not now" button was stretching to fill
   the row, which squeezed the primary button until its label ("Import .road")
   wrapped to two lines. Pin both buttons to content width so they sit together
   at the right on one line. UI-only; shared by every first-run hint. */
.first-run-hint-actions button {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  white-space: nowrap;
}

/* mobile-dialogs.css forces every [role="dialog"][aria-modal="true"] to
   `height: 100dvh !important`. This dialog is a two-row grid whose rows are both
   `auto`, and grid's default `align-content: stretch` splits the leftover height
   between them: the copy grew a tall empty gap, and the actions row grew tall
   enough that its own default `align-items: stretch` pulled the single button
   into a vertical bar down the right edge. Pin the rows instead — the copy
   absorbs the slack, the actions row stays at content height.

   The condition matches mobile-dialogs.css rather than the 560px breakpoint
   below, because that is the query that imposes the full-screen height. */
@media (max-width: 980px) {
  .first-run-hint-dialog {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .first-run-hint-actions {
    align-items: center;
  }
}

@media (max-width: 560px) {
  .first-run-hint-overlay {
    align-items: end;
    padding: 10px;
  }

  .first-run-hint-dialog {
    width: 100%;
    max-height: calc(var(--app-live-viewport-height, 100dvh) - 20px - var(--a1-safe-top));
  }

  .first-run-hint-copy { padding: 22px 50px 17px 18px; }
  .first-run-hint-actions { padding-inline: 14px; }
}

/* --- Auto-check answers --------------------------------------------------- */
.learn-auto-check-badge.is-on {
  border-color: var(--accent, #2f81f7);
  color: var(--accent, #2f81f7);
  font-weight: 600;
}
.learn-auto-check-host.hidden { display: none; }
.learn-auto-check-backdrop {
  position: fixed;
  inset: 0;
  z-index: 230;
  display: grid;
  place-items: center;
  padding: 22px;
  background: var(--a1-sw-scrim, rgba(2, 6, 12, 0.72));
  backdrop-filter: blur(10px);
}
.learn-auto-check-modal {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(560px, calc(100vw - 44px));
  min-width: 0;
  max-height: calc(var(--app-live-viewport-height, 100dvh) - 44px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.learn-auto-check-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.learn-auto-check-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.learn-auto-check-head-text strong { min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
.learn-auto-check-head-text .muted { font-size: 12px; }
.learn-auto-check-body {
  min-width: 0;
  overflow: auto;
  padding: 16px 16px calc(28px + var(--a1-safe-bottom));
  scroll-padding-bottom: calc(28px + var(--a1-safe-bottom));
}
body:has(.learn-answer-pdf-fullscreen) {
  overflow: hidden;
}
.learn-answer-check-modal {
  /* The 100dvw term keeps the modal self-bounded even when mobile-dialogs.css
     full-screen selectors are dropped (iOS Safari) or applied late. */
  width: min(920px, calc(100vw - 44px), 100dvw);
  max-width: 100dvw;
}
/* Report bodies embed model markdown (PDF page images, code, tables); none of
   it may set the modal's width on a phone. */
.learn-auto-check-body {
  overflow-wrap: anywhere;
}
.learn-auto-check-body img {
  max-width: 100%;
  height: auto;
}
.learn-auto-check-body pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.learn-auto-check-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.learn-answer-check-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}
.learn-answer-check-counts {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
}
.learn-answer-check-count {
  display: inline-grid;
  place-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}
.learn-answer-check-count.pass {
  color: var(--green, #9af5bf);
  border-color: rgba(34, 197, 94, 0.34);
  background: rgba(34, 197, 94, 0.14);
}
.learn-answer-check-count.warning {
  color: var(--amber, #ffd37a);
  border-color: rgba(245, 184, 75, 0.36);
  background: rgba(245, 184, 75, 0.14);
}
.learn-answer-check-count.error {
  color: var(--red, #ffb4b4);
  border-color: rgba(255, 107, 107, 0.38);
  background: rgba(255, 107, 107, 0.14);
}
.learn-answer-check-menu {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.learn-answer-check-section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 0 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.learn-answer-check-section + .learn-answer-check-section {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.learn-answer-check-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.learn-manual-check-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.learn-manual-check-toggle-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: var(--muted);
}
.learn-manual-check-chevron { transition: transform 150ms; }
.learn-manual-check-toggle[aria-expanded="true"] .learn-manual-check-chevron { transform: rotate(180deg); }
#learn-manual-check-content[hidden] { display: none; }
.learn-answer-check-section h4 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}
.learn-answer-check-section-title,
.learn-answer-check-section-title-meta {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.learn-answer-check-section-title {
  gap: 7px;
}
.learn-answer-check-section-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
.learn-answer-check-found {
  color: var(--muted);
}
.learn-answer-check-state-wrap,
.learn-answer-check-title-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.learn-answer-check-state-pill {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  min-height: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}
.learn-answer-check-state-pill.on {
  color: var(--green, #9af5bf);
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.38);
}
.learn-answer-check-state-pill.off {
  color: var(--red, #ffb4b4);
  background: rgba(255, 107, 107, 0.14);
  border: 1px solid rgba(255, 107, 107, 0.34);
}
.learn-answer-check-section-body {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.learn-answer-check-inline-summary {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.learn-answer-check-inline-action,
.learn-answer-check-title-actions .compact-action-button {
  width: auto;
  min-width: 42px;
  min-height: 24px;
  padding: 0 8px;
  font-size: 10px;
  line-height: 1;
}
.learn-answer-check-title-actions {
  flex-wrap: nowrap;
  gap: 5px;
}
.learn-answer-check-control-section .learn-answer-check-section-head {
  align-items: center;
  flex-wrap: nowrap;
}
.learn-answer-check-control-section h4 {
  flex: 0 0 auto;
}
.learn-answer-check-control-section .learn-answer-check-section-meta {
  flex: 0 0 auto;
  white-space: nowrap;
}
.learn-answer-check-control-row {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.learn-answer-check-control-row .learn-answer-check-title-actions {
  flex-wrap: nowrap;
}
.learn-answer-check-control-summary {
  margin: -3px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.learn-auto-check-intro { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.learn-auto-check-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
}
.learn-auto-check-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted, #7a8290);
}
.learn-auto-check-state.is-on .learn-auto-check-dot { background: #2ea043; }
.learn-auto-check-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid rgba(46, 160, 67, 0.5);
  border-radius: 999px;
  color: #7ee787;
  background: rgba(46, 160, 67, 0.16);
  font-size: 9px;
  font-weight: 850;
  line-height: 1.25;
  white-space: nowrap;
}
.learn-answer-auto-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 2px 6px;
  border: 1px solid rgba(46, 160, 67, 0.42);
  border-radius: 999px;
  color: #7ee787;
  background: rgba(46, 160, 67, 0.12);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.learn-answer-auto-status:hover,
.learn-answer-auto-status:focus-visible {
  color: var(--green, #9af5bf);
  background: rgba(46, 160, 67, 0.18);
  outline: none;
}
.learn-answer-auto-status.has-history {
  border-color: rgba(46, 160, 67, 0.48);
  color: #7ee787;
  background: rgba(46, 160, 67, 0.1);
}
.learn-answer-auto-status.has-history:hover,
.learn-answer-auto-status.has-history:focus-visible {
  color: var(--green, #9af5bf);
  border-color: rgba(46, 160, 67, 0.62);
  background: rgba(46, 160, 67, 0.16);
}
@media (max-width: 640px) {
  .learn-answer-row-main .learn-answer-auto-status {
    min-height: 0;
  }

  .learn-answer-row-main .learn-answer-auto-status span,
  .learn-answer-row-main .learn-answer-auto-count,
  .learn-answer-row-main .learn-answer-auto-count-dot {
    font-size: 9px;
  }
}
.learn-answer-problem-badge {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(59, 130, 246, 0.48);
  border-radius: 3px;
  color: var(--cyan, #93c5fd);
  background: rgba(59, 130, 246, 0.18);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}
.learn-answer-auto-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #2ea043;
  box-shadow: 0 0 0 2px rgba(46, 160, 67, 0.14);
}
.learn-auto-check-summary { margin: 4px 0 14px; font-size: 12px; }
.learn-auto-check-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 14px;
}
.learn-auto-check-results-title { margin: 14px 0 8px; font-size: 13px; }
.learn-auto-check-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; max-width: 100%; }
.learn-auto-check-results li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2, rgba(255, 255, 255, 0.02));
}
.learn-auto-check-result-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
.learn-auto-check-result-meta strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.learn-auto-check-result-badge {
  display: inline-grid;
  place-items: center;
  min-width: 64px;
  min-height: 20px;
  margin-left: 0;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(148, 163, 184, 0.12);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  vertical-align: middle;
}
.learn-auto-check-result-badge.pass { color: var(--green, #9af5bf); background: rgba(34, 197, 94, 0.15); }
.learn-auto-check-result-badge.warning { color: var(--amber, #ffd37a); background: rgba(245, 184, 75, 0.16); }
.learn-auto-check-result-badge.error { color: var(--red, #ffb4b4); background: rgba(255, 107, 107, 0.16); }
.learn-auto-check-result-meta .muted { min-width: 0; font-size: 11px; overflow-wrap: anywhere; }
.learn-auto-check-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.learn-auto-check-config { display: grid; gap: 14px; }
.learn-auto-check-config h4 { margin: 0; font-size: 15px; }
.learn-auto-check-field {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
}
.learn-auto-check-field legend { padding: 0; font-size: 13px; font-weight: 600; }
.learn-auto-check-radio { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.learn-auto-check-number span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.learn-auto-check-number input { width: 90px; }
.learn-auto-check-friends {
  display: grid;
  gap: 6px;
  max-height: 180px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.learn-auto-check-friend { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.learn-auto-check-friend.is-disabled { opacity: 0.5; }

/* The global `input,select { width:100%; min-height:46px }` rule blows radios and
   checkboxes up into giant boxes here — reset them to native size. */
.learn-auto-check-radio input[type="radio"],
.learn-auto-check-friend input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  accent-color: var(--cyan);
}
.learn-auto-check-radio {
  align-items: flex-start;
  line-height: 1.35;
}
.learn-auto-check-radio input[type="radio"] { margin-top: 2px; }
.learn-auto-check-config .auto-check-setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.learn-auto-check-config .auto-check-setting-label {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}
.learn-auto-check-config .auto-check-choice-field {
  gap: 7px;
}
.learn-auto-check-config .auto-check-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 176px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(8, 14, 24, 0.55));
}
.learn-auto-check-config .auto-check-segmented label {
  position: relative;
  display: block;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
}
.learn-auto-check-config .auto-check-segmented label + label {
  border-left: 1px solid var(--line);
}
.learn-auto-check-config .auto-check-segmented input {
  position: absolute;
  inset: 0;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: none;
  opacity: 0;
  cursor: inherit;
}
.learn-auto-check-config .auto-check-segmented span {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  margin: 0;
  padding: 0 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}
.learn-auto-check-config .auto-check-segmented input:checked + span {
  color: var(--text);
  background: rgba(53, 212, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(53, 212, 255, 0.5);
}
.learn-auto-check-config .auto-check-segmented input:focus-visible + span {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}
.learn-auto-check-config .auto-check-segmented input:disabled + span {
  cursor: not-allowed;
  opacity: 0.6;
}
.learn-auto-check-config .auto-check-max-select {
  width: 112px;
  min-width: 112px;
  height: 34px;
  min-height: 34px;
  padding: 0 28px 0 9px;
  font-size: 12px;
}
.learn-auto-check-config .auto-check-engine-select {
  width: min(230px, 52vw);
  min-width: 180px;
  height: 34px;
  min-height: 34px;
  padding: 0 28px 0 9px;
  font-size: 12px;
}
.learn-auto-check-config .auto-check-friend-options {
  width: 100%;
}
/* Compact the Save / Cancel bar so it isn't full-width and oversized. */
.learn-auto-check-actions button {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  white-space: normal;
}
.learn-auto-check-actions .primary-button { min-height: 34px; padding: 0 12px; }
.learn-auto-check-result-head { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin-bottom: 12px; }
.learn-auto-check-report { max-height: none; min-width: 0; max-width: 100%; }
.answer-comparison-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2, rgba(127, 127, 127, 0.08));
  font-size: 12px;
  line-height: 1.4;
}
.home-answer-check-list .home-source-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.learn-auto-check-file-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.learn-auto-check-file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
}
.learn-auto-check-file-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.learn-auto-check-file-button.active {
  border-color: rgba(53, 212, 255, 0.5);
  background: rgba(53, 212, 255, 0.1);
}
.learn-answer-pdf-compare,
.learn-answer-pdf-single {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
}
.learn-answer-pdf-compare {
  grid-template-columns: 1fr;
}
.learn-answer-pdf-compare section,
.learn-answer-pdf-single section {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.learn-answer-pdf-compare header,
.learn-answer-pdf-single header {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.learn-answer-pdf-compare header a,
.learn-answer-pdf-single header a {
  color: var(--cyan);
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}
@media (hover: hover) {
  .learn-answer-pdf-compare header a:hover,
  .learn-answer-pdf-single header a:hover{
    text-decoration: underline;
  }
}
.learn-answer-pdf-compare iframe,
.learn-answer-pdf-single iframe {
  width: 100%;
  min-height: min(44dvh, 560px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  touch-action: pan-x pan-y;
}
.learn-answer-pdf-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  min-width: 0;
  min-height: 0;
  padding:
    calc(48px + var(--a1-safe-top))
    calc(10px + var(--a1-safe-right))
    calc(10px + var(--a1-safe-bottom))
    calc(10px + var(--a1-safe-left));
  background: var(--a1-sw-surface, #050a12);
}
.learn-answer-pdf-fullscreen-close {
  position: absolute;
  top: calc(8px + var(--a1-safe-top));
  right: calc(28px + var(--a1-safe-right));
  z-index: 20;
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: var(--a1-sw-text, #eef5ff);
  background: var(--a1-sw-surface, rgba(10, 16, 25, 0.86));
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}
.learn-answer-pdf-fullscreen-panes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0, var(--learn-pdf-split, 50%)) 16px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  height: 100%;
  gap: 0;
}
.learn-answer-pdf-fullscreen-pane {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(170, 190, 220, 0.28);
  border-radius: 8px;
  background: var(--a1-sw-surface, #0d1420);
}
.learn-answer-pdf-fullscreen-pane header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 7px 10px;
  color: #d8e5f5;
  background: rgba(127, 127, 127, 0.05);
  border-bottom: 1px solid rgba(170, 190, 220, 0.18);
  font-size: 11px;
  font-weight: 900;
}
.learn-answer-pdf-fullscreen-pane:first-child header {
  padding-right: 48px;
}
.learn-answer-pdf-fullscreen-pane header a {
  flex: 0 0 auto;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}
.learn-answer-pdf-fullscreen-pane header a:hover,
.learn-answer-pdf-fullscreen-pane header a:focus-visible {
  text-decoration: underline;
}
.learn-answer-pdf-fullscreen-pane iframe {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #eef2f7;
}
.learn-answer-pdf-split-handle {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: row-resize;
  touch-action: none;
}
.learn-answer-pdf-split-handle::before {
  content: "";
  position: absolute;
  left: min(22%, 140px);
  right: min(22%, 140px);
  top: 50%;
  height: 3px;
  border-radius: 999px;
  background: rgba(203, 216, 235, 0.78);
  transform: translateY(-50%);
  box-shadow: 0 0 0 1px rgba(4, 8, 15, 0.6);
}
.learn-answer-pdf-split-handle:hover::before,
.learn-answer-pdf-split-handle:focus-visible::before,
.learn-answer-pdf-fullscreen.is-resizing .learn-answer-pdf-split-handle::before {
  background: var(--cyan);
}
.learn-answer-pdf-fullscreen.is-resizing iframe {
  pointer-events: none;
}
.learn-answer-pdf-fullscreen,
.learn-answer-pdf-fullscreen * {
  overscroll-behavior: contain;
}
@media (min-width: 981px) {
  .learn-answer-pdf-fullscreen-panes {
    grid-template-columns: minmax(0, var(--learn-pdf-split, 50%)) 16px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .learn-answer-pdf-fullscreen-pane:first-child header {
    padding-right: 10px;
  }
  .learn-answer-pdf-fullscreen-pane:nth-child(3) header {
    padding-right: 48px;
  }
  .learn-answer-pdf-split-handle {
    width: 16px;
    height: 100%;
    min-height: 0;
    cursor: col-resize;
  }
  .learn-answer-pdf-split-handle::before {
    left: 50%;
    right: auto;
    top: min(22%, 140px);
    bottom: min(22%, 140px);
    width: 3px;
    height: auto;
    transform: translateX(-50%);
  }
}
.learn-answer-check-progress {
  margin: 8px 0 0;
  color: var(--cyan);
  font-size: 12px;
  line-height: 1.4;
}
.learn-auto-check-result-back {
  display: flex;
  justify-content: flex-start;
  margin-top: 12px;
}
.learn-auto-check-result-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; flex-shrink: 0; }
.learn-auto-check-result-buttons button {
  min-width: 0;
  min-height: 28px;
  padding: 0 9px;
  font-size: 12px;
}
.learn-answer-check-results-grid {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.learn-answer-check-result-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, auto);
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.58));
}
.learn-answer-check-result-card.pass {
  border-left-color: #2ea043;
  background: rgba(34, 197, 94, 0.08);
}
.learn-answer-check-result-card.warning {
  border-left-color: #f5b84b;
  background: rgba(245, 184, 75, 0.08);
}
.learn-answer-check-result-card.error {
  border-left-color: #ff6b6b;
  background: rgba(255, 107, 107, 0.08);
}
.learn-answer-check-result-open {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.learn-answer-check-result-open:focus-visible {
  outline: 2px solid rgba(53, 212, 255, 0.45);
  outline-offset: 3px;
}
.learn-answer-check-result-open:disabled {
  cursor: default;
  opacity: 0.7;
}
.learn-answer-check-result-status {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  min-height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}
.learn-answer-check-result-card.pass .learn-answer-check-result-status {
  color: var(--green, #9af5bf);
  background: rgba(34, 197, 94, 0.16);
}
.learn-answer-check-result-card.warning .learn-answer-check-result-status {
  color: var(--amber, #ffd37a);
  background: rgba(245, 184, 75, 0.16);
}
.learn-answer-check-result-card.error .learn-answer-check-result-status {
  color: var(--red, #ffb4b4);
  background: rgba(255, 107, 107, 0.16);
}
.learn-answer-check-result-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.learn-answer-check-result-main strong,
.learn-answer-check-result-main span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.learn-answer-check-result-main strong {
  color: var(--text);
  font-size: 13px;
}
.learn-answer-check-result-main span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.learn-answer-check-revise-button {
  align-self: center;
  justify-self: end;
  width: auto;
  min-width: 70px;
  min-height: 28px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.learn-answer-check-defaults {
  margin-top: 8px;
  padding-top: 8px;
}
.learn-auto-check-revise-links { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.learn-auto-check-revise-links .muted { font-size: 11px; }
.learn-auto-check-config textarea {
  width: 100%;
  resize: vertical;
  font: inherit;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2, rgba(255, 255, 255, 0.02));
  color: inherit;
}
.learn-auto-check-config select { width: 100%; }

@media (max-width: 560px) {
  .learn-auto-check-backdrop {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 8px;
  }

  .learn-auto-check-modal {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    max-height: calc(var(--app-live-viewport-height, 100dvh) - 16px);
  }

  .learn-auto-check-results li {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .learn-auto-check-result-buttons {
    justify-content: flex-start;
  }

  .learn-answer-check-head {
    position: relative;
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: 6px;
    min-width: 0;
    padding: 12px 60px 10px 12px;
  }

  .learn-answer-check-head-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .learn-answer-check-head .learn-answer-delete-x {
    position: absolute;
    top: calc(6px + var(--a1-safe-top));
    right: calc(8px + var(--a1-safe-right));
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  /* Give the report room on a phone: the modal already fills the viewport, so
     the body padding is what separates text from the screen edge. */
  .learn-auto-check-body {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  .learn-answer-check-menu,
  .learn-answer-check-section,
  .learn-answer-check-section-body,
  .learn-answer-match-list,
  .learn-answer-match-wrap,
  .learn-answer-match,
  .learn-answer-prompt-form {
    max-width: 100%;
  }

  .learn-answer-check-section {
    padding-bottom: 12px;
  }

  .learn-answer-check-section-head,
  .learn-answer-check-state-wrap {
    align-items: flex-start;
  }

  .learn-answer-check-section-meta {
    flex-wrap: wrap;
    white-space: normal;
  }

  .learn-answer-check-inline-summary {
    white-space: normal;
  }

  .learn-answer-check-title-actions {
    flex-wrap: wrap;
  }

  .learn-answer-check-control-section .learn-answer-check-section-head,
  .learn-answer-check-control-section .learn-answer-check-state-wrap {
    align-items: center;
    flex-wrap: nowrap;
  }

  .learn-answer-check-control-section .learn-answer-check-section-meta,
  .learn-answer-check-control-row,
  .learn-answer-check-control-row .learn-answer-check-title-actions {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .learn-answer-check-control-summary {
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  .learn-answer-check-result-card {
    grid-template-columns: minmax(0, 1fr) minmax(70px, auto);
    align-items: center;
  }

  .learn-answer-check-revise-button {
    justify-self: end;
  }

  .learn-answer-pdf-compare {
    grid-template-columns: 1fr;
  }

  .learn-answer-pdf-compare iframe,
  .learn-answer-pdf-single iframe {
    min-height: min(48dvh, 420px);
  }
}

/* --- Answers: single-line header + [+] menu ------------------------------- */
/* flex-direction is forced to row so the narrow-screen media rule that stacks
   .homework-header into a column can't push the [+] onto a second line. */
.homework-header.learn-answer-header-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.learn-answer-header-title {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.learn-answer-count-inline { font-size: 12px; font-weight: 400; color: var(--muted); }
.learn-answer-add-menu-wrap { position: relative; flex: 0 0 auto; }
.learn-answer-add-button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.learn-answer-add-button:hover,
.learn-answer-add-button:focus-visible {
  color: var(--cyan);
  background: transparent;
  outline: none;
}
.learn-answer-add-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 160px;
  display: grid;
  padding: 6px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow, 0 12px 32px rgba(0, 0, 0, 0.35));
}
.learn-answer-add-menu.hidden { display: none; }
.learn-answer-add-menu button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
}
.learn-answer-add-menu button:hover,
.learn-answer-add-menu button:focus-visible {
  background: rgba(127, 127, 127, 0.14);
  outline: none;
}

/* --- Answers: compact workspace-style list ------------------------------- */
.learn-answer-main-panel,
.learn-answer-main-panel > .learn-answer-list {
  overflow: visible;
}
.learn-answer-course-block { margin-bottom: 14px; }
.learn-answer-course-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 4px;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) {
  .learn-answer-course-row:hover{ background: rgba(127, 127, 127, 0.06);  }
}
.learn-answer-course-twisty {
  flex: 0 0 auto;
  width: 14px;
  color: var(--muted);
  font-size: 11px;
}
.learn-answer-course-heading { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.learn-answer-course-heading strong { font-size: 14px; }
.learn-answer-course-heading .row-meta { font-size: 12px; }
.learn-answer-rows { display: grid; gap: 1px; padding: 4px 0 0 6px; }
.learn-answer-empty { margin: 4px 0 0 8px; font-size: 12px; }
.learn-answer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 5px 5px 8px;
  border-radius: 8px;
}
@media (hover: hover) {
  .learn-answer-row:hover{ background: rgba(127, 127, 127, 0.08);  }
}
.learn-answer-row-main {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.learn-answer-row-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  text-decoration: none;
  color: var(--text);
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.learn-answer-row-name:hover .learn-answer-row-title { text-decoration: underline; }
.learn-answer-row-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.learn-answer-filetype {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 5px;
  border-radius: 4px;
  color: var(--muted);
  background: rgba(127, 127, 127, 0.16);
  text-transform: uppercase;
}
.learn-answer-filetype[data-ext="pdf"] { color: #e5484d; background: rgba(229, 72, 77, 0.14); }
.learn-answer-filetype[data-ext="md"],
.learn-answer-filetype[data-ext="txt"],
.learn-answer-filetype[data-ext="tex"] { color: #3b82f6; background: rgba(59, 130, 246, 0.14); }
.learn-answer-row-title {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.learn-answer-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  flex: 0 0 auto;
  min-width: 0;
  padding-top: 0;
}
.learn-answer-icon-button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.learn-answer-icon-button:hover,
.learn-answer-icon-button:focus-visible {
  outline: none;
  color: var(--text);
  border-color: var(--line);
  background: rgba(127, 127, 127, 0.12);
}
.learn-answer-icon-button.is-auto-on {
  color: var(--text);
  border-color: transparent;
  background: transparent;
}
.learn-answer-check-button {
  width: 39px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}
.learn-answer-check-label {
  display: block;
  transform: translateY(0.5px);
}
.learn-answer-more-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
}
.learn-answer-more-wrap.open {
  z-index: 80;
}
.learn-answer-more-button {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}
.learn-answer-more-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  transform: translateY(-0.5px);
}
.learn-answer-more-menu {
  position: absolute;
  z-index: 81;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 2px;
  min-width: min(220px, calc(100vw - 32px));
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel, #111827);
  box-shadow: var(--shadow, 0 12px 32px rgba(0, 0, 0, 0.35));
}
.learn-answer-more-menu[popover] {
  position: fixed;
  inset: auto;
  box-sizing: border-box;
  width: min(220px, calc(100vw - 32px));
  min-width: 0;
  height: max-content;
  max-height: min(240px, calc(100dvh - 20px));
  grid-auto-rows: max-content;
  align-content: start;
  margin: 0;
  overflow-y: auto;
  z-index: 1000;
}
.learn-answer-more-menu[popover]:not(:popover-open) { display: none; }
.learn-answer-more-menu.hidden { display: none; }
.learn-answer-more-menu button {
  width: 100%;
  min-height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.learn-answer-more-menu button:hover,
.learn-answer-more-menu button:focus-visible {
  outline: none;
  background: rgba(127, 127, 127, 0.14);
}
.learn-answer-problem-icon {
  border-color: rgba(59, 130, 246, 0.42);
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.1);
}
.learn-answer-auto-counts {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-left: 1px;
}
.learn-answer-auto-count,
.learn-answer-auto-total {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.learn-answer-auto-total { color: var(--green, #9af5bf); }
.learn-answer-auto-count-dot {
  color: var(--a1-sw-text, #ffffff);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  opacity: 0.9;
}
.learn-answer-auto-count.pass {
  color: var(--green, #9af5bf);
}
.learn-answer-auto-count.warning {
  color: var(--amber, #ffd37a);
}
.learn-answer-auto-count.error {
  color: var(--red, #ffb4b4);
}
.learn-answer-icon-button.danger:hover,
.learn-answer-icon-button.danger:focus-visible {
  color: var(--red, #e5484d);
  border-color: rgba(229, 72, 77, 0.6);
  background: rgba(229, 72, 77, 0.1);
}
.learn-answer-compare-autocheck {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.learn-answer-compare-autocheck .primary-button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
  white-space: nowrap;
}

.learn-answer-compare-autocheck .row-meta {
  min-width: 0;
  overflow-wrap: anywhere;
}

.learn-answer-compare-modal {
  width: min(940px, calc(100vw - 44px));
}

.learn-answer-compare-modal > .panel-header {
  padding: 14px 54px 14px 16px;
  border-bottom: 1px solid var(--line);
}

.learn-answer-compare-modal > .learn-answer-compare-body {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.learn-answer-match-list {
  grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
  justify-content: start;
  gap: 10px;
}

.learn-answer-match {
  min-height: 112px;
}

.learn-answer-prompt-form {
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.72));
}

.learn-answer-compare-context {
  grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
  padding: 10px 12px;
  border-color: rgba(53, 212, 255, 0.2);
  background: rgba(53, 212, 255, 0.05);
}

.learn-answer-compare-engine-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.learn-answer-compare-engine-field > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.learn-answer-compare-engine-field select {
  width: 100%;
  min-height: 42px;
  font-size: 14px;
}

.learn-answer-compare-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.learn-answer-compare-meta span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.learn-answer-compare-actions {
  display: grid;
  grid-template-columns: auto auto minmax(180px, max-content);
  align-items: center;
  justify-content: start;
  gap: 8px;
  min-width: 0;
}

.learn-answer-compare-actions .compact-action-button,
.learn-answer-compare-submit {
  min-width: 0;
  min-height: 38px;
  padding: 0 14px;
  white-space: nowrap;
}

.learn-answer-compare-submit {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 980px) {
  .learn-answer-compare-backdrop {
    place-items: start stretch;
    padding: 8px;
  }

  .learn-answer-compare-modal {
    width: 100%;
    max-height: calc(var(--app-live-viewport-height, 100dvh) - 16px);
    border-radius: 10px;
  }

  .learn-answer-compare-modal > .panel-header {
    padding: 12px 48px 12px 12px;
  }

  .learn-answer-compare-modal > .learn-answer-compare-body {
    gap: 12px;
    padding: 12px;
  }

  .learn-answer-match-list {
    grid-template-columns: 1fr;
  }

  .learn-answer-match {
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 96px;
    padding: 10px;
  }

  .learn-answer-match-icon {
    width: 44px;
    min-width: 44px;
    height: 54px;
  }

  .learn-answer-compare-autocheck {
    align-items: flex-start;
  }

  .learn-answer-compare-autocheck .primary-button {
    width: auto;
  }

  .learn-answer-prompt-form {
    padding: 12px;
  }

  .learn-answer-compare-context {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .learn-answer-compare-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .learn-answer-compare-actions .compact-action-button,
  .learn-answer-compare-submit {
    width: 100%;
  }

  .learn-answer-compare-submit {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .learn-answer-compare-actions {
    grid-template-columns: 1fr;
  }

  .learn-answer-compare-submit {
    grid-column: auto;
  }
}

/* --- Learn answer compare: selected-match-first flow --------------------- */
.learn-answer-compare-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.learn-answer-compare-close {
  display: inline-grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(127, 127, 127, 0.06);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.learn-answer-compare-close:hover,
.learn-answer-compare-close:focus-visible {
  color: var(--text);
  border-color: rgba(53, 212, 255, 0.42);
  background: rgba(53, 212, 255, 0.08);
  outline: none;
}

.learn-answer-match-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  align-items: start;
  gap: 12px;
}

.learn-answer-match-wrap {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.learn-answer-match-ownerline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding-inline: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.learn-answer-match-ownerline > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-answer-match-avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(53, 212, 255, 0.24);
  border-radius: 999px;
  color: var(--text);
  background: rgba(53, 212, 255, 0.1);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.learn-answer-match {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
}

.learn-answer-match-icon,
.learn-answer-match-kind,
.learn-answer-match-file,
.learn-answer-match-meta {
  display: none;
}

.learn-answer-match-copy {
  display: block;
}

.learn-answer-match-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.learn-answer-match-title-row strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-answer-match-time {
  display: block;
  margin-top: 3px;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
}

.learn-answer-match-course-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin-top: 5px;
}

.learn-answer-match-course,
.learn-answer-match-course-warning {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
}

.learn-answer-match-course {
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(53, 212, 255, 0.3);
  color: var(--cyan, #35d4ff);
  background: rgba(53, 212, 255, 0.09);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-answer-match-course-warning {
  flex: 0 0 auto;
  border: 1px solid rgba(245, 184, 75, 0.48);
  color: var(--amber, #ffd37a);
  background: rgba(245, 184, 75, 0.16);
  white-space: nowrap;
}

.learn-answer-match-course-warning > span {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  border-radius: 50%;
  color: #15110a;
  background: var(--amber, #ffd37a);
  font-size: 10px;
  line-height: 1;
}

.learn-answer-match-pdf {
  flex: 0 0 auto;
  width: auto;
  height: 18px;
  padding: 0 6px;
}

.learn-answer-match-state {
  min-width: 58px;
  border-color: rgba(34, 197, 94, 0.4);
  color: var(--green, #9af5bf);
  background: rgba(34, 197, 94, 0.13);
}

.learn-answer-selected-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(53, 212, 255, 0.24);
  border-radius: 8px;
  background: rgba(53, 212, 255, 0.06);
}

.learn-answer-selected-check span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-answer-selected-check-button {
  min-height: 36px;
  padding: 0 18px;
  white-space: nowrap;
}

.learn-answer-check-settings-modal {
  position: relative;
}

.learn-answer-check-settings-modal > .panel-header {
  padding-right: 52px;
}

.learn-answer-check-settings-modal .learn-answer-compare-close {
  position: absolute;
  top: 12px;
  right: 14px;
}

.learn-answer-compare-actions {
  grid-template-columns: auto minmax(160px, max-content);
}

.learn-answer-compare-primary-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.learn-answer-compare-primary-actions.single-action {
  grid-template-columns: minmax(0, 1fr);
}

.learn-answer-compare-primary-actions .compact-action-button,
.learn-answer-compare-primary-actions .learn-answer-compare-submit {
  width: 100%;
}

.learn-answer-compare-advanced {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding-top: 2px;
}

.learn-answer-compare-advanced summary {
  width: max-content;
  max-width: 100%;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.learn-answer-compare-advanced[open] {
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

.learn-answer-compare-advanced-actions {
  grid-template-columns: auto;
}

.learn-answer-prompt-select-modal {
  width: min(620px, 100%);
}

.learn-answer-prompt-choice-list {
  gap: 8px;
}

.learn-answer-prompt-choice {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--text);
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.72));
  text-align: left;
  cursor: pointer;
}

.learn-answer-prompt-choice:hover,
.learn-answer-prompt-choice:focus-visible {
  outline: none;
  border-color: rgba(53, 212, 255, 0.42);
  background: rgba(53, 212, 255, 0.07);
}

.learn-answer-prompt-choice.selected {
  border-color: rgba(53, 212, 255, 0.62);
  background: rgba(53, 212, 255, 0.11);
  box-shadow: inset 3px 0 0 var(--cyan);
}

.learn-answer-prompt-choice-indicator {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.learn-answer-prompt-choice-indicator > span {
  width: 8px;
  height: 8px;
  border-radius: inherit;
  background: transparent;
}

.learn-answer-prompt-choice.selected .learn-answer-prompt-choice-indicator {
  border-color: var(--cyan);
}

.learn-answer-prompt-choice.selected .learn-answer-prompt-choice-indicator > span {
  background: var(--cyan);
}

.learn-answer-prompt-choice-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.learn-answer-prompt-choice-copy strong,
.learn-answer-prompt-choice-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.learn-answer-prompt-choice-copy strong {
  font-size: 13px;
}

.learn-answer-prompt-choice-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .learn-answer-compare-primary-actions .learn-answer-compare-submit {
    grid-column: auto;
  }

  .learn-answer-match-list {
    grid-template-columns: 1fr;
  }

  .learn-answer-match {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 56px;
  }

  .learn-answer-selected-check {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .learn-answer-compare-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learn-answer-check-settings-modal .learn-answer-compare-context {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 8px;
    padding: 9px 10px;
  }

  .learn-answer-check-settings-modal .learn-answer-compare-engine-field select {
    min-height: 38px;
  }

  .learn-answer-check-settings-modal .learn-answer-prompt-form {
    gap: 9px;
    padding: 12px;
  }
}

@media (max-width: 420px) {
  .learn-answer-selected-check {
    grid-template-columns: 1fr;
  }

  .learn-answer-selected-check-button {
    width: 100%;
  }

  .learn-answer-compare-actions {
    grid-template-columns: 1fr;
  }

  .learn-answer-check-settings-modal .learn-answer-compare-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .learn-answer-check-settings-modal .learn-answer-compare-submit {
    grid-column: auto;
  }

  .learn-answer-check-settings-modal .learn-answer-compare-meta span:first-child {
    display: none;
  }

  .learn-answer-check-settings-modal .learn-answer-compare-actions .compact-action-button,
  .learn-answer-check-settings-modal .learn-answer-compare-submit {
    min-height: 36px;
    padding: 0 10px;
  }
}

/* --- Calendar: date + draggable time strip (replaces datetime-local) ------ */
.calendar-dt-native { display: none !important; }
.calendar-dt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.calendar-dt-date {
  flex: 1 1 auto;
  min-width: 0;
}
/* Hour : minute wheels sit on the same row as the date. */
.calendar-dt-time {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 3px;
}
.calendar-dt-colon {
  color: var(--muted);
  font-size: 18px;
  font-weight: 800;
}

/* iOS-alarm-style vertical picker wheel: the centered row is selected. */
.calendar-wheel {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 108px; /* 3 rows of 36px */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent);
}
.calendar-wheel-scroller {
  height: 100%;
  padding-block: 36px; /* (108 - 36) / 2 so the first/last rows can center */
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.calendar-wheel-scroller::-webkit-scrollbar { display: none; }
.calendar-wheel-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  scroll-snap-align: center;
  cursor: pointer;
}
.calendar-wheel-item.is-selected {
  position: relative;
  z-index: 2;
  color: var(--text);
  font-weight: 800;
}
.calendar-wheel-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 36px;
  transform: translateY(-50%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 8px;
  /* Translucent, not the opaque soft token: the band overlays the scroller,
     and an opaque fill hid the selected digit underneath it. */
  background: var(--a1-sw-wheel-band, rgba(53, 212, 255, 0.08));
  pointer-events: none;
}

/* Adjacent-month days remain real cells instead of punching transparent holes
   into the first/last row. Year cells carry tiny date numerals so an activity
   color can be mapped back to an actual day. */
html[data-a1-skin] .a1-month__cell.is-out {
  background: color-mix(in srgb, var(--a1-surface-2) 48%, transparent);
  border-color: color-mix(in srgb, var(--a1-border) 45%, transparent);
}

html[data-a1-skin] .a1-year__d {
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  color: var(--a1-text-3);
  font: 600 clamp(5px, .48vw, 7px)/1 var(--a1-font-alt);
}

html[data-a1-skin] .a1-year__d.l0 {
  color: transparent;
}

@media (max-width: 640px) {
  html[data-a1-skin] .calendar-panel > .panel-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  html[data-a1-skin] .calendar-panel > .panel-header .panel-title {
    min-width: 0;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .calendar-panel #calendar-today {
    padding-inline: 7px;
  }

  .calendar-panel .panel-actions {
    gap: 4px;
  }
}

/* Five toolbar buttons leave no room for the title on a phone: give the title
   its own row instead of clipping it mid-glyph ("Calendo"). */
@media (max-width: 480px) {
  html[data-a1-skin] .calendar-panel > .panel-header {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-a1-skin] .calendar-panel > .panel-header .panel-actions {
    justify-content: flex-start;
  }
}

/* Keep date + wheels on one row on phones too; just let the date shrink. */
@media (max-width: 640px) {
  .calendar-dt { gap: 8px; }
  .calendar-dt-date { min-width: 0; }
}

/* --- Home: embedded Services + Registration as collapsible cards ---------- */
/* Home Academic Assistant */
.home-academic-assistant {
  min-width: 0;
  margin-top: 12px;
}

.academic-assistant-loading,
.academic-assistant-error {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: var(--a1-sw-surface, rgba(20, 27, 39, 0.82));
}

.academic-assistant-error {
  color: #ff9aa7;
}

.academic-assistant-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(53, 212, 255, 0.2);
  border-radius: 14px;
  background:
    radial-gradient(circle at 0 0, rgba(53, 212, 255, 0.08), transparent 34%),
    rgba(15, 22, 33, 0.94);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.14);
}

.academic-assistant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 12px;
}

.academic-assistant-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.academic-assistant-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(53, 212, 255, 0.34);
  border-radius: 11px;
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.08);
}

.academic-assistant-mark svg {
  width: 23px;
  height: 23px;
}

.academic-assistant-title h2 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.2;
}

.academic-assistant-title p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.academic-assistant-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.academic-assistant-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(127, 127, 127, 0.05);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.academic-assistant-status > span {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* The pill's text sits in its own span so a tight header can ellipsize it.
   That span is also a direct span child, so undo the status-dot styling the
   rule above would give it. */
.academic-assistant-status > .academic-assistant-status-label {
  flex: 0 1 auto;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.academic-assistant-status.is-working > .academic-assistant-status-label {
  animation: none;
}

.academic-assistant-status.is-ready {
  color: var(--a1-ok-fg, var(--green));
  border-color: var(--a1-ok-line, var(--line));
  background: var(--a1-ok-bg, var(--panel));
}

.academic-assistant-status.is-warning {
  color: var(--a1-soon-fg, var(--amber));
  border-color: var(--a1-soon-line, var(--line));
  background: var(--a1-soon-bg, var(--panel));
}

.academic-assistant-status.is-working {
  color: var(--a1-accent-text, var(--cyan));
  border-color: var(--a1-accent, var(--line));
  background: var(--a1-accent-soft, var(--panel));
}

.academic-assistant-status.is-working > span {
  animation: academic-assistant-pulse 1.2s ease-in-out infinite;
}

@keyframes academic-assistant-pulse {
  50% { opacity: 0.35; transform: scale(0.75); }
}

.academic-assistant-icon-button,
.academic-assistant-course button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: rgba(127, 127, 127, 0.05);
  cursor: pointer;
}

.academic-assistant-icon-button svg,
.academic-assistant-course button svg {
  width: 16px;
  height: 16px;
}

.academic-assistant-icon-button:hover:not(:disabled),
.academic-assistant-icon-button:focus-visible,
.academic-assistant-course button:hover:not(:disabled),
.academic-assistant-course button:focus-visible {
  color: var(--cyan);
  border-color: rgba(53, 212, 255, 0.38);
  background: rgba(53, 212, 255, 0.08);
  outline: none;
}

.academic-assistant-icon-button:disabled,
.academic-assistant-course button:disabled {
  opacity: 0.4;
  cursor: default;
}

.academic-assistant-setup,
.academic-assistant-courses {
  margin: 0 18px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(127, 127, 127, 0.035);
}

.academic-assistant-setup {
  display: grid;
  gap: 4px;
  padding: 11px 13px;
}

.academic-assistant-setup strong {
  color: var(--text);
  font-size: 12px;
}

.academic-assistant-setup span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.academic-assistant-courses summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  list-style-position: inside;
}

.academic-assistant-courses summary span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

.academic-assistant-course-list {
  display: grid;
  gap: 1px;
  padding: 0 6px 6px;
}

.academic-assistant-course {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 7px;
  border-radius: 7px;
  background: var(--a1-sw-surface-3, rgba(0, 0, 0, 0.08));
}

.academic-assistant-course > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.academic-assistant-course strong,
.academic-assistant-course span,
.academic-assistant-course small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.academic-assistant-course strong {
  color: var(--text);
  font-size: 11px;
}

.academic-assistant-course-label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.academic-assistant-course-label .academic-assistant-course-state-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  overflow: visible;
}

.academic-assistant-course-state-dot.is-ready {
  background: #70d7a4;
  box-shadow: 0 0 0 3px rgba(112, 215, 164, 0.1);
}

.academic-assistant-course-state-dot.is-initializing {
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(53, 212, 255, 0.1);
  animation: academic-assistant-pulse 1.2s ease-in-out infinite;
}

.academic-assistant-course-state-dot.is-available {
  background: rgba(159, 174, 195, 0.55);
}

.academic-assistant-course span,
.academic-assistant-course small {
  color: var(--muted);
  font-size: 10px;
}

.academic-assistant-course-actions {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  grid-template-columns: none !important;
  gap: 5px !important;
  min-width: auto !important;
}

.academic-assistant-course-actions .is-remove:hover:not(:disabled),
.academic-assistant-course-actions .is-remove:focus-visible {
  color: #ff9aa7;
  border-color: rgba(255, 111, 129, 0.35);
  background: rgba(255, 111, 129, 0.08);
}

.academic-assistant-course-section {
  padding: 9px 7px 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.academic-assistant-course.is-available {
  background: rgba(127, 127, 127, 0.025);
}

@media (max-width: 640px) {
  .academic-assistant-course {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 7px;
  }

  /* Rows no longer carry a fixed number of buttons — a ready course also has a
     per-surface visibility toggle — so the action column sizes itself. */
  .academic-assistant-course > small {
    grid-column: 1;
    grid-row: 2;
  }

  .academic-assistant-course-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

.academic-assistant-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 128px;
  max-height: min(48vh, 430px);
  overflow-y: auto;
  padding: 12px 18px;
  border-top: 1px solid var(--line-soft);
  scrollbar-width: thin;
}

.academic-assistant-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  min-height: 104px;
  padding: 14px;
  text-align: center;
}

.academic-assistant-empty strong {
  color: var(--text);
  font-size: 13px;
}

.academic-assistant-empty p {
  max-width: 610px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.academic-assistant-message {
  align-self: flex-start;
  width: min(88%, 760px);
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 4px 12px 12px;
  background: rgba(127, 127, 127, 0.045);
}

.academic-assistant-message.is-user {
  align-self: flex-end;
  width: min(76%, 650px);
  border-color: rgba(53, 212, 255, 0.18);
  border-radius: 12px 4px 12px 12px;
  background: rgba(53, 212, 255, 0.075);
}

.academic-assistant-message-label {
  margin-bottom: 5px;
  color: var(--cyan);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.academic-assistant-message.is-user .academic-assistant-message-label {
  color: var(--muted);
}

.academic-assistant-message-body {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 12px;
  line-height: 1.58;
}

.academic-assistant-system-message {
  align-self: center;
  max-width: 92%;
  padding: 2px 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

.academic-assistant-system-message.is-success {
  color: #71d8a0;
}

.academic-assistant-inline-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
}

.academic-assistant-inline-action-summary {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--text);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.academic-assistant-inline-action-summary strong,
.academic-assistant-inline-action-summary span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.academic-assistant-inline-action-summary strong {
  font-size: 11px;
  font-weight: 700;
}

.academic-assistant-inline-action-summary span {
  color: var(--muted);
  font-size: 10px;
}

.academic-assistant-inline-action-summary:hover strong,
.academic-assistant-inline-action-summary:focus-visible strong {
  color: var(--cyan);
}

.academic-assistant-inline-action-summary:focus-visible,
.academic-assistant-inline-action-approve:focus-visible {
  outline: 2px solid rgba(53, 212, 255, 0.42);
  outline-offset: 2px;
}

.academic-assistant-inline-action-approve {
  min-width: 76px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(53, 212, 255, 0.38);
  border-radius: 7px;
  color: #071018;
  background: var(--cyan);
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}

.academic-assistant-inline-action-approve:disabled {
  opacity: 0.48;
  cursor: default;
}

/* Assistant replies are Markdown. Block spacing comes from the grid gap so
   single-paragraph answers stay as tight as the old plain-text rendering. */
.academic-assistant-markdown {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.academic-assistant-markdown > h4,
.academic-assistant-markdown > h5,
.academic-assistant-markdown > h6,
.academic-assistant-markdown > p,
.academic-assistant-markdown > ul,
.academic-assistant-markdown > ol,
.academic-assistant-markdown > blockquote,
.academic-assistant-markdown > pre {
  margin: 0;
}

.academic-assistant-markdown h4,
.academic-assistant-markdown h5,
.academic-assistant-markdown h6 {
  font-size: 12px;
  font-weight: 800;
}

.academic-assistant-markdown ul,
.academic-assistant-markdown ol {
  padding-left: 17px;
}

.academic-assistant-markdown li {
  margin: 2px 0;
}

.academic-assistant-markdown blockquote {
  padding-left: 9px;
  border-left: 2px solid var(--line-soft);
  color: var(--muted);
}

.academic-assistant-markdown code {
  padding: 1px 4px;
  border-radius: 5px;
  color: var(--text);
  background: var(--a1-sw-surface-3, rgba(127, 127, 127, 0.12));
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 11px;
}

.academic-assistant-markdown pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(6, 10, 16, 0.72));
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}

.academic-assistant-markdown pre code {
  padding: 0;
  background: transparent;
}

/* Code is neutral and monospace; actionable links use the theme's accessible
   accent and an underline so they remain distinct without relying on color. */
.academic-assistant-markdown a,
.academic-assistant-citations a {
  color: var(--a1-accent-text, var(--cyan));
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.academic-assistant-markdown a:focus-visible,
.academic-assistant-citations a:focus-visible {
  outline: 2px solid var(--a1-accent-text, var(--cyan));
  outline-offset: 2px;
}

.academic-assistant-markdown .markdown-table {
  font-size: 11px;
}

.academic-assistant-citations {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.academic-assistant-citations a,
.academic-assistant-citations span {
  max-width: 100%;
  overflow: hidden;
  padding: 4px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  color: var(--a1-text-2, var(--text));
  background: var(--a1-sw-surface-3, rgba(0, 0, 0, 0.08));
  font-size: 9px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.academic-assistant-citations a:hover,
.academic-assistant-citations a:focus-visible {
  color: var(--a1-accent-text, var(--cyan));
  border-color: rgba(53, 212, 255, 0.32);
}

.academic-assistant-citations a {
  color: var(--a1-accent-text, var(--cyan));
}

/* Email citations are richer cards (subject / sender / date) than the plain
   source chips; inner spans must escape the generic chip styling above. */
.academic-assistant-citations .assistant-email-citation {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 9px;
  white-space: normal;
  touch-action: manipulation;
}

.academic-assistant-citations .assistant-email-citation > span {
  padding: 0;
  border: 0;
  background: none;
  white-space: normal;
}

.assistant-email-citation-copy {
  display: inline-grid;
  gap: 1px;
  min-width: 0;
}

.academic-assistant-citations .assistant-email-citation strong {
  overflow: hidden;
  max-width: 300px;
  color: var(--text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.academic-assistant-citations .assistant-email-citation small {
  color: var(--muted);
  font-size: 9px;
}

.assistant-email-citation-icon {
  font-size: 13px;
}

.assistant-email-citation-open {
  color: var(--primary);
  font-size: 12px;
}

.academic-assistant-notice {
  margin: 0;
  padding: 8px 18px 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.academic-assistant-notice.is-error {
  color: #ff9aa7;
}

.academic-assistant-prompts {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 18px 6px;
  scrollbar-width: none;
}

.academic-assistant-prompts::-webkit-scrollbar {
  display: none;
}

.academic-assistant-prompts button {
  flex: 0 0 auto;
  max-width: min(320px, 74vw);
  overflow: hidden;
  padding: 6px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(127, 127, 127, 0.035);
  font: inherit;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.academic-assistant-prompts button:hover,
.academic-assistant-prompts button:focus-visible {
  color: var(--text);
  border-color: rgba(53, 212, 255, 0.32);
  background: rgba(53, 212, 255, 0.06);
  outline: none;
}

.academic-assistant-form {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 42px 42px;
  align-items: end;
  gap: 8px;
  margin: 4px 18px 0;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--a1-sw-surface-2, rgba(7, 12, 19, 0.64));
}

.academic-assistant-form:focus-within {
  border-color: rgba(53, 212, 255, 0.46);
  box-shadow: 0 0 0 2px rgba(53, 212, 255, 0.06);
}

.academic-assistant-form textarea {
  width: 100%;
  min-height: 44px;
  max-height: 144px;
  resize: none;
  padding: 11px 0 8px;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: 12px;
  line-height: 1.45;
}

.academic-assistant-form textarea::placeholder {
  color: var(--muted);
  opacity: 0.82;
}

.academic-assistant-form > button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(53, 212, 255, 0.35);
  border-radius: 9px;
  color: #071018;
  background: var(--cyan);
  cursor: pointer;
}

.academic-assistant-form > button svg {
  width: 18px;
  height: 18px;
}

.academic-assistant-form > button:disabled {
  opacity: 0.42;
  cursor: default;
}

.academic-assistant-form > .academic-assistant-upload-button,
.academic-assistant-form > .academic-assistant-voice-button {
  width: 38px;
  border-color: var(--line);
  color: var(--muted);
  background: transparent;
}

.academic-assistant-form > .academic-assistant-upload-button:hover:not(:disabled),
.academic-assistant-form > .academic-assistant-upload-button:focus-visible,
.academic-assistant-form > .academic-assistant-voice-button:hover:not(:disabled),
.academic-assistant-form > .academic-assistant-voice-button:focus-visible {
  border-color: rgba(53, 212, 255, 0.42);
  color: var(--cyan);
  outline: none;
}

.academic-assistant-form > .academic-assistant-voice-button.is-recording {
  border-color: var(--red);
  color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 14%, transparent);
}

.academic-assistant-voice-stop {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: currentColor;
}

.academic-assistant-voice-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 8px 18px 0;
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  color: var(--muted);
  background: var(--a1-sw-surface-2, rgba(7, 12, 19, 0.64));
}

.academic-assistant-voice-status.is-recording {
  border-color: color-mix(in srgb, var(--red) 38%, var(--line));
  color: var(--text);
}

.academic-assistant-voice-status > span:last-child {
  min-width: 0;
}

.academic-assistant-voice-status strong,
.academic-assistant-voice-status small {
  display: block;
  overflow-wrap: anywhere;
}

.academic-assistant-voice-status strong {
  font-size: 12px;
  line-height: 1.35;
}

.academic-assistant-voice-status small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.academic-assistant-voice-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--red);
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.academic-assistant-voice-level i {
  width: 3px;
  height: 6px;
  border-radius: 3px;
  background: currentColor;
}

.academic-assistant-voice-status.is-recording .academic-assistant-voice-level i {
  animation: academic-assistant-voice-level 0.8s ease-in-out infinite alternate;
}

.academic-assistant-voice-status.is-recording .academic-assistant-voice-level i:nth-child(2) {
  animation-delay: -0.28s;
}

.academic-assistant-voice-status.is-recording .academic-assistant-voice-level i:nth-child(3) {
  animation-delay: -0.52s;
}

@keyframes academic-assistant-voice-level {
  from { height: 5px; opacity: 0.55; }
  to { height: 17px; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .academic-assistant-voice-status.is-recording .academic-assistant-voice-level i {
    animation: none;
  }
}

.academic-assistant-send-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: academic-assistant-spin 0.75s linear infinite;
}

@keyframes academic-assistant-spin {
  to { transform: rotate(360deg); }
}

/* "Working" state: a turn can outlive the card that started it, so the spinner
   has to read clearly both in the thread and in the collapsed header. */
.academic-assistant-message.is-working {
  border-color: rgba(53, 212, 255, 0.24);
  background: rgba(53, 212, 255, 0.05);
}

.academic-assistant-working {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.academic-assistant-working .academic-assistant-send-spinner {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--cyan);
}

.academic-assistant-working strong {
  font-size: 12px;
  font-weight: 750;
}

.academic-assistant-working-elapsed {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.academic-assistant-working-hint {
  flex: 1 1 100%;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.academic-assistant-header-working {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  color: var(--cyan);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

.academic-assistant-header-working .academic-assistant-send-spinner {
  width: 11px;
  height: 11px;
}

.academic-assistant-privacy {
  margin: 0;
  padding: 8px 18px 14px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}

.academic-assistant-action-backdrop {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--a1-sw-scrim, rgba(3, 7, 12, 0.78));
  backdrop-filter: blur(8px);
}

.academic-assistant-action-dialog {
  display: flex;
  flex-direction: column;
  width: min(620px, 100%);
  max-height: min(760px, calc(var(--app-live-viewport-height, 100dvh) - 40px));
  overflow: hidden;
  border: 1px solid rgba(53, 212, 255, 0.26);
  border-radius: 16px;
  background: var(--a1-sw-surface, #111925);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.45);
}

.academic-assistant-action-dialog > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-soft);
}

.academic-assistant-action-dialog > header h3 {
  margin: 4px 0 5px;
  color: var(--text);
  font-size: 17px;
}

.academic-assistant-action-dialog > header p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.academic-assistant-action-kicker {
  color: var(--cyan);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.academic-assistant-action-dialog > header button {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}

.academic-assistant-action-groups {
  display: grid;
  gap: 8px;
  overflow-y: auto;
  padding: 14px 20px;
}

/* One action can now span several courses, so the list needs course headers,
   a summary of how the request was narrowed, and an explicit account of what
   could not be included. */
.academic-assistant-action-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0 20px;
}

.academic-assistant-action-scope span {
  padding: 3px 8px;
  border: 1px solid rgba(53, 212, 255, 0.24);
  border-radius: 999px;
  color: var(--cyan);
  font-size: 10px;
  font-weight: 700;
}

.academic-assistant-action-course {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.academic-assistant-action-course:first-child {
  margin-top: 0;
}

.academic-assistant-action-course small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.academic-assistant-action-group.is-uncertain {
  border-style: dashed;
}

.academic-assistant-action-tba {
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 5px;
  color: #fcd34d;
  background: rgba(252, 211, 77, 0.14);
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.academic-assistant-action-gaps {
  display: grid;
  gap: 6px;
  margin: 0 20px 4px;
  padding: 10px 12px;
  border: 1px solid rgba(252, 211, 77, 0.22);
  border-radius: 10px;
  background: rgba(252, 211, 77, 0.06);
}

.academic-assistant-action-gaps p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.academic-assistant-action-group {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(127, 127, 127, 0.035);
  cursor: pointer;
}

.academic-assistant-action-group:has(input:checked) {
  border-color: rgba(53, 212, 255, 0.3);
  background: rgba(53, 212, 255, 0.055);
}

.academic-assistant-action-group input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.academic-assistant-action-check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.academic-assistant-action-group input:checked + .academic-assistant-action-check {
  border-color: var(--cyan);
  background: var(--cyan);
}

.academic-assistant-action-group input:checked + .academic-assistant-action-check::after {
  content: "";
  width: 7px;
  height: 4px;
  border-left: 2px solid #071018;
  border-bottom: 2px solid #071018;
  transform: translateY(-1px) rotate(-45deg);
}

.academic-assistant-action-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.academic-assistant-action-copy strong {
  color: var(--text);
  font-size: 12px;
}

.academic-assistant-action-copy small,
.academic-assistant-action-copy > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.academic-assistant-confidence {
  padding: 3px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  font-size: 9px;
  white-space: nowrap;
}

.academic-assistant-confidence.is-high {
  border-color: rgba(53, 212, 255, 0.25);
  color: var(--cyan);
}

.academic-assistant-action-dialog > footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--line-soft);
}

.academic-assistant-action-dialog .danger-button {
  border-color: rgba(255, 101, 118, 0.45);
  color: #fff;
  background: #c84455;
}

@media (max-width: 680px) {
  .academic-assistant-header {
    align-items: flex-start;
    padding: 13px 12px 10px;
  }

  .academic-assistant-title {
    gap: 9px;
  }

  .academic-assistant-mark {
    width: 34px;
    height: 34px;
  }

  .academic-assistant-title p {
    max-width: 190px;
  }

  .academic-assistant-status {
    min-height: 28px;
    max-width: 112px;
    overflow: hidden;
    padding: 4px 8px;
    text-overflow: ellipsis;
  }

  .academic-assistant-setup,
  .academic-assistant-courses {
    margin-right: 12px;
    margin-left: 12px;
  }

  /* `auto`, not a fixed 32px: a row carries as many buttons as its surface
     needs — Grades rows have hide, re-read and remove — and a fixed column made
     the extra ones overhang the row. */
  .academic-assistant-course {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .academic-assistant-course > small {
    display: none;
  }

  .academic-assistant-thread {
    min-height: 150px;
    max-height: 52vh;
    padding: 10px 12px;
  }

  .academic-assistant-message,
  .academic-assistant-message.is-user {
    width: 94%;
  }

  .academic-assistant-prompts {
    padding-right: 20px;
    padding-left: 20px;
  }

  .academic-assistant-form {
    margin-right: 20px;
    margin-left: 20px;
  }

  .academic-assistant-privacy {
    padding-right: 20px;
    padding-left: 20px;
  }

  .academic-assistant-action-backdrop {
    align-items: end;
    padding: 0;
  }

  .academic-assistant-action-dialog {
    width: 100%;
    max-height: 88dvh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 16px 16px 0 0;
  }

  .academic-assistant-action-dialog > header,
  .academic-assistant-action-groups,
  .academic-assistant-action-dialog > footer {
    padding-right: 14px;
    padding-left: 14px;
  }

  .academic-assistant-action-dialog > footer .ghost-button,
  .academic-assistant-action-dialog > footer .primary-button {
    flex: 1 1 0;
  }

  .academic-assistant-action-dialog > footer {
    flex-wrap: wrap;
  }

  .academic-assistant-action-dialog > footer .primary-button {
    flex-basis: 100%;
  }
}

.home-service-card.academic-assistant-card {
  box-shadow: none;
}

body:has(.academic-assistant-card.is-fullscreen) {
  overflow: hidden;
}

.home-service-card.academic-assistant-card.is-fullscreen {
  position: fixed;
  inset: 18px;
  z-index: 270;
  width: min(1280px, calc(100vw - 36px));
  height: calc(var(--app-live-viewport-height, 100dvh) - 36px) !important;
  margin: auto;
  border-color: rgba(53, 212, 255, 0.32);
  background: var(--a1-sw-surface, #0d1521);
  box-shadow:
    0 0 0 100vmax rgba(3, 7, 13, 0.78),
    0 30px 80px rgba(0, 0, 0, 0.52);
}

.academic-assistant-fullscreen-toggle svg {
  width: 15px;
  height: 15px;
}

.academic-assistant-card.is-fullscreen .academic-assistant-body {
  padding-right: 22px;
  padding-bottom: 20px;
  padding-left: 22px;
}

/* With the keyboard up the dialog machinery stretches the fullscreen card to
   the whole layout viewport plus one keyboard inset of pan slack (so its
   scrim can never surface as a black block when WebKit pans to the caret).
   The composer must end at the keyboard's top edge — layout height minus one
   inset — so with the card extended by one inset, the padding is two.
   !important beats the a1 skin's padding shorthand. */
body.mobile-keyboard-open .academic-assistant-card.is-fullscreen .academic-assistant-body {
  padding-bottom: calc(var(--app-keyboard-inset, 0px) * 2 + 10px) !important;
}

.academic-assistant-card.is-fullscreen .academic-assistant-ready-row .academic-assistant-course-list {
  max-height: min(42dvh, 420px);
}

.home-service-head.academic-assistant-header {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  justify-content: stretch;
  gap: 10px;
  padding: 12px 14px;
}

.home-service-head.academic-assistant-header h3 {
  margin: 0;
  font-size: 15px;
  text-align: center;
}

.academic-assistant-body {
  min-width: 0;
  padding: 0 22px 18px;
}

.academic-assistant-ready-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 2px 0 8px;
}

.academic-assistant-ready-row .academic-assistant-controls {
  flex: 0 0 auto;
}

.academic-assistant-status-cluster {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
}

.academic-assistant-status-cluster:empty {
  display: none;
}

.academic-assistant-status-cluster .academic-assistant-courses {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border: 0;
  background: transparent;
}

.academic-assistant-status-cluster > .academic-assistant-status {
  max-width: 100%;
  min-width: 0;
}

.academic-assistant-status-cluster > .academic-assistant-status > i {
  flex: 0 0 auto;
}

.academic-assistant-integration-prompt {
  position: relative;
  margin: 0;
}

.academic-assistant-integration-prompt > summary {
  cursor: pointer;
  list-style: none;
}

.academic-assistant-integration-prompt > summary::-webkit-details-marker {
  display: none;
}

.academic-assistant-integration-prompt > summary strong {
  min-width: 0;
  overflow: hidden;
  font: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.academic-assistant-integration-prompt > summary i {
  margin-left: 1px;
  font-size: 9px;
  font-style: normal;
  transition: transform 0.15s ease;
}

.academic-assistant-integration-prompt[open] > summary i {
  transform: rotate(180deg);
}

.academic-assistant-integration-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: grid;
  gap: 5px;
  width: min(250px, calc(100vw - 52px));
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--a1-sw-surface, rgba(12, 18, 28, 0.98));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
}

.academic-assistant-integration-menu button {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.academic-assistant-integration-menu button:hover,
.academic-assistant-integration-menu button:focus-visible {
  border-color: rgba(53, 212, 255, 0.34);
  background: rgba(53, 212, 255, 0.08);
  outline: none;
}

.academic-assistant-integration-menu button:last-child:hover,
.academic-assistant-integration-menu button:last-child:focus-visible {
  border-color: rgba(255, 122, 156, 0.3);
  background: rgba(255, 122, 156, 0.07);
}

.academic-assistant-integration-menu strong {
  font-size: 12px;
}

.academic-assistant-integration-menu small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.academic-assistant-courses > summary.academic-assistant-status {
  justify-content: flex-start;
  width: max-content;
  max-width: 100%;
  padding: 5px 10px;
  list-style: none;
}

.academic-assistant-courses > summary.academic-assistant-status::-webkit-details-marker {
  display: none;
}

.academic-assistant-courses.has-courses > summary.academic-assistant-status::after {
  content: "▾";
  margin-left: 2px;
  color: currentColor;
  font-size: 10px;
  transition: transform 0.15s ease;
}

.academic-assistant-courses.has-courses[open] > summary.academic-assistant-status::after {
  transform: rotate(180deg);
}

.academic-assistant-ready-row .academic-assistant-course-list {
  max-height: clamp(160px, 32dvh, 300px);
  margin-top: 8px;
  padding: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(127, 127, 127, 0.035);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.academic-assistant-ready-row .academic-assistant-course-list:focus-visible {
  border-color: rgba(53, 212, 255, 0.42);
  outline: 2px solid rgba(53, 212, 255, 0.16);
  outline-offset: 2px;
}

.academic-assistant-body .academic-assistant-thread {
  margin-right: -14px;
  margin-left: -14px;
}

.academic-assistant-body .academic-assistant-prompts {
  padding-right: 4px;
  padding-left: 4px;
}

.academic-assistant-body .academic-assistant-form {
  margin-right: 4px;
  margin-left: 4px;
}

.academic-assistant-integration-toast {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 10px;
  margin: 2px 4px 10px;
  padding: 10px;
  border: 1px solid rgba(53, 212, 255, 0.3);
  border-radius: 10px;
  background: rgba(53, 212, 255, 0.08);
}

.academic-assistant-integration-toast-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: #061019;
  background: var(--cyan);
  font-size: 14px;
  font-weight: 950;
}

.academic-assistant-integration-toast > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.academic-assistant-integration-toast > div strong {
  color: var(--text);
  font-size: 12px;
}

.academic-assistant-integration-toast > div span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.academic-assistant-integration-toast-connect,
.academic-assistant-integration-toast-close {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.72));
  cursor: pointer;
}

.academic-assistant-integration-toast-connect {
  min-height: 34px;
  padding: 0 11px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 850;
}

.academic-assistant-integration-toast-close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--muted);
  font-size: 18px;
}

.academic-assistant-integration-toast-connect:hover,
.academic-assistant-integration-toast-connect:focus-visible,
.academic-assistant-integration-toast-close:hover,
.academic-assistant-integration-toast-close:focus-visible {
  border-color: rgba(53, 212, 255, 0.42);
  color: var(--cyan);
  outline: none;
}

/* The 16px anti-zoom size below only covers ≤680px, but the mobile keyboard
   machinery engages up to 760px (landscape phones). A sub-16px editor in that
   gap lets the browser zoom on focus, and the zoomed visual viewport feeds
   straight back into the live viewport variables — mid-focus layout jumps. */
@media (min-width: 681px) and (max-width: 980px) {
  .academic-assistant-form textarea {
    font-size: 16px;
  }
}

@media (max-width: 680px) {
  .home-service-head.academic-assistant-header {
    align-items: center;
    padding: 12px 14px;
  }

  .academic-assistant-fullscreen-toggle {
    visibility: hidden;
    pointer-events: none;
  }

  .academic-assistant-body {
    padding-right: 20px;
    padding-left: 20px;
  }

  .academic-assistant-status-cluster .academic-assistant-courses {
    margin: 0;
  }

  .academic-assistant-integration-prompt > summary.academic-assistant-status {
    max-width: min(100%, 220px);
  }

  /* No fixed cap: the label span ellipsizes and the "N hidden" note is
     flex:none, so the pill can use the whole row before shrinking. A hard
     180px cap used to clip the count off mid-word. */
  .academic-assistant-courses > summary.academic-assistant-status {
    max-width: 100%;
  }

  .academic-assistant-ready-row .academic-assistant-course-list {
    max-height: clamp(150px, 28dvh, 220px);
  }

  .academic-assistant-body .academic-assistant-form {
    margin-right: 0;
    margin-left: 0;
    touch-action: manipulation;
  }

  .academic-assistant-form textarea {
    font-size: 16px;
  }

  .academic-assistant-form > button,
  .academic-assistant-prompts button,
  .academic-assistant-icon-button,
  .academic-assistant-course button {
    touch-action: manipulation;
  }

  .academic-assistant-integration-menu {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: calc(12px + var(--a1-safe-bottom));
    left: 12px;
    z-index: 290;
    width: auto;
    max-width: none;
    padding: 9px;
    border-radius: 12px;
  }

  .academic-assistant-integration-menu button {
    padding: 11px 12px;
  }

  .academic-assistant-integration-toast {
    grid-template-columns: 34px minmax(0, 1fr) 28px;
    margin-right: 0;
    margin-left: 0;
  }

  .academic-assistant-integration-toast-connect {
    grid-column: 2 / 4;
    grid-row: 2;
    justify-self: start;
  }

  .academic-assistant-integration-toast-close {
    grid-column: 3;
    grid-row: 1;
  }
}

.home-services {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  min-width: 0;
}
.home-service-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--a1-sw-surface, rgba(20, 27, 39, 0.82));
  overflow: hidden;
}
/* Collapsed services sink below the expanded ones. */
.home-service-card.collapsed { order: 1; }
.home-service-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  color: var(--text);
}
.home-service-head h3 { margin: 0; font-size: 15px; }
/* Icon-only collapse toggle for the Services card. */
.home-service-hide {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(127, 127, 127, 0.06);
  cursor: pointer;
}
.home-service-hide:hover,
.home-service-hide:focus-visible {
  color: var(--text);
  border-color: rgba(53, 212, 255, 0.4);
  background: rgba(53, 212, 255, 0.08);
  outline: none;
}
.home-service-chevron {
  flex: 0 0 auto;
  font-size: 12px;
  color: inherit;
  transition: transform 0.15s ease;
}
.home-service-card.collapsed .home-service-chevron { transform: rotate(-90deg); }

/* Registration opens as a standalone full-screen page (over the bottom nav).
   The back button shares the same compact control strip as the 5 tabs. */
.home-fullpage {
  position: fixed;
  inset: 0;
  z-index: 300;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  /* Clear the phone status bar / notch so the back button and breadcrumb don't
     collide with the clock. Padding shifts the whole sticky stack down. */
  padding-top: var(--a1-safe-top);
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: var(--bg, #0a0e15);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.home-fullpage.hidden { display: none; }
.home-fullpage-body {
  width: 100%;
  max-width: 100vw;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 14px calc(14px + var(--a1-safe-bottom));
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.home-fullpage-body > .registration-shell {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
}

.home-fullpage .home-fullpage-back {
  position: static;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: none;
}
.home-fullpage .home-fullpage-back:hover,
.home-fullpage .home-fullpage-back:focus-visible {
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.08);
  outline: none;
}
/* The back button is the first grid cell, followed by the 5 registration tabs. */
.home-fullpage .registration-tabs {
  grid-template-columns: 40px repeat(5, minmax(0, 1fr));
  margin: 0;
  width: 100%;
  max-width: 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--a1-sw-surface, #090d14);
  backdrop-filter: none;
}

.home-service-body {
  padding: 6px 10px 12px;
  border-top: 1px solid var(--line-soft);
  min-width: 0;
}
.home-service-card.collapsed .home-service-body { display: none; }
/* The embedded feature already renders its own panels — drop its outer page padding. */
.home-service-body > .services-page,
.home-service-body > .registration-shell { margin: 0; }

/* Flatten the embedded Services panel so it doesn't double-frame or repeat the
   "Services" title already shown on the collapsible card header. */
.home-service-body > .services-page > .data-panel {
  border: 0;
  background: transparent;
  border-radius: 0;
}
.home-service-body > .services-page > .data-panel > .panel-header { display: none; }
.home-service-body > .services-page > .data-panel > .panel-body { padding: 0; }

/* Bottom nav now has 5 features: use 5 full-width columns (no empty right gap)
   and larger, easier-to-tap buttons. Authoritative override placed last to win
   over the earlier duplicated nav rules. */
@media (max-width: 980px) {
  .workspace {
    padding-top: calc(18px + var(--a1-safe-top));
  }

  .feature-nav {
    /* Keep the edge items clear of rounded screens while letting the bar sit
       closer to the home indicator. WebKit occasionally anchors fixed
       elements to a stale layout viewport on first paint; mobile-viewport.js
       measures the live visual viewport and supplies the small correction. */
    right: max(8px, var(--a1-safe-right)) !important;
    left: max(8px, var(--a1-safe-left)) !important;
    width: auto !important;
    padding: 5px 3px max(5px, calc(var(--a1-safe-bottom) - 10px)) !important;
    border-radius: 14px 14px 0 0;
    transform: translate3d(0, var(--a1-fixed-nav-shift, 0px), 0) !important;
  }
  /* No safe-area inset here: .feature-nav already reserves it on the bar
     itself, and adding it again per button double-counted the home indicator.
     That was invisible until viewport-fit=cover started resolving the inset to
     a real value, at which point the icons floated ~34px off the bottom. */
  .feature-nav button {
    min-height: 58px !important;
    gap: 4px !important;
    padding: 5px 2px 4px !important;
  }
  .feature-nav .nav-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 26px !important;
  }
  .feature-nav .nav-label {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.05 !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

/* --- Home: Tasks / Reminders / Events as a row of three tabs -------------- */
.home-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 12px;
}
.home-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 9px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: rgba(127, 127, 127, 0.04);
  font: inherit;
  cursor: pointer;
}
@media (hover: hover) {
  .home-tab:hover{ background: rgba(127, 127, 127, 0.08);  }
}
.home-tab.active {
  border-color: rgba(53, 212, 255, 0.55);
  background: rgba(53, 212, 255, 0.08);
}
.home-tab-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 750;
}
.home-tab-count {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 850;
  color: var(--muted);
}
.home-tab.active .home-tab-count { color: var(--cyan); }

.home-tab-panel { padding: 0 10px 10px; min-width: 0; }
.home-tab-panel:empty { display: none; }
.home-tab-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 6px 4px;
}
.home-tab-panel-head strong { font-size: 14px; }

.home-tab-panel-actions {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

html[data-a1-skin] .home-tab-panel-actions .home-reminder-sound-button {
  flex: 0 0 auto;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
}

.home-reminder-sound-button .home-system-icon {
  width: 19px;
  height: 19px;
}

.home-reminder-sound-dialog {
  width: min(480px, calc(100vw - 36px));
}

.home-reminder-sound-dialog .home-add-modal-header > div {
  min-width: 0;
}

.home-reminder-sound-dialog .home-add-modal-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.home-reminder-sound-form,
.home-reminder-sound-choices {
  display: grid;
  gap: 10px;
}

.home-reminder-sound-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  min-height: 68px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(127, 127, 127, 0.04);
  cursor: pointer;
}

.home-reminder-sound-choice:has(input:checked) {
  border-color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
}

.home-reminder-sound-choice > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.home-reminder-sound-choice strong {
  font-size: 14px;
}

.home-reminder-sound-choice small,
.home-reminder-sound-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.home-reminder-sound-choice input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--cyan);
}

.home-reminder-sound-note {
  margin: 2px 0 0;
}

.home-reminder-sound-form .home-form-actions {
  align-items: center;
  margin-top: 2px;
}

.home-event-window-field {
  flex: 0 1 142px;
  min-width: 112px;
  margin: 0;
}

.home-event-window-field select {
  width: 100%;
  min-height: 34px;
  padding: 5px 30px 5px 10px;
  border-radius: 8px;
  font-size: 13px;
}

.home-event-custom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.home-event-custom label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.home-event-custom input {
  width: 56px;
  min-height: 34px;
  padding: 5px 7px;
  border-radius: 8px;
  text-align: center;
}

.home-filter-empty {
  margin: 4px 6px 8px;
  padding: 13px 14px;
  border: 1px dashed var(--line-soft);
  border-radius: 8px;
  font-size: 13px;
  text-align: center;
}

/* --- UI clarity and responsive density ----------------------------------- */
.row-meta,
.status-pill,
.learn-workspace-do-status-badge {
  font-size: max(12px, 0.75rem);
}

.service-card-icon .app-line-icon {
  width: 20px;
  height: 20px;
}

.home-service-body > .services-page,
.services-page {
  width: 100%;
  max-width: none;
}

.services-grid {
  gap: 10px;
  overflow: visible;
  border: 0;
  background: transparent;
}

.service-card,
.service-card:last-child {
  min-height: 62px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-3, rgba(12, 18, 28, 0.48));
  text-align: left;
}

.service-card-text {
  justify-items: start;
  text-align: left;
}

@media (min-width: 981px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.home-tab-count {
  color: var(--muted);
}

.home-fullpage-context {
  position: sticky;
  top: -10px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin: -10px -14px 0;
  padding: 4px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--a1-sw-surface, rgba(9, 13, 20, 0.96));
  backdrop-filter: blur(12px);
}

.home-fullpage .home-fullpage-back {
  display: inline-flex;
  gap: 7px;
  width: auto;
  min-width: 0;
  padding: 0 9px;
  font-size: 15px;
  font-weight: 750;
}

.home-fullpage-back-label {
  font-size: 13px;
}

.home-fullpage-crumb {
  color: var(--muted);
  font-size: 13px;
}

.home-fullpage-crumb > span {
  margin: 0 5px;
}

.home-fullpage-crumb strong {
  color: var(--text);
}

.home-fullpage-import {
  flex: 0 0 auto;
  min-height: 36px;
  margin-left: auto;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(53, 212, 255, 0.06);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.home-fullpage-import:hover,
.home-fullpage-import:focus-visible {
  border-color: rgba(53, 212, 255, 0.62);
  color: var(--cyan);
  outline: none;
}

.home-fullpage .registration-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.chat-thread-button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto auto;
  gap: 2px 8px;
  min-height: 54px;
}

.chat-thread-copy {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  gap: 2px;
  min-width: 0;
}

.chat-thread-name,
.chat-thread-preview {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .home-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 9px;
  }

  .home-tab {
    min-height: 48px;
    flex-direction: row;
    justify-content: space-between;
    padding: 9px 11px;
    text-align: left;
  }

  .home-tab-title {
    font-size: 13px;
  }

  .home-tab-panel-head {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px 5px 6px;
  }

  .home-tab-panel-actions {
    flex: 1 1 230px;
    gap: 6px;
  }

  .home-event-window-field {
    order: 1;
    flex: 1 1 118px;
    max-width: 160px;
  }

  .home-tab-panel-actions .home-add-button {
    order: 2;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
  }

  .home-event-custom {
    order: 3;
    flex: 1 0 100%;
    justify-content: flex-end;
  }

  .home-fullpage-crumb {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* === UI polish pass (registration stacking, compare styling, settings, cards) === */

/* 1. Registration fullpage: coherent sticky stack. Breadcrumb > tabs > control
   bar, all with solid backgrounds so scrolled content can never ghost through,
   and dropdowns opened from the control bar are never clipped by the bars. */
.home-fullpage .home-fullpage-context {
  z-index: 260;
  background: var(--a1-sw-surface, #090d14);
  backdrop-filter: none;
}

.home-fullpage .registration-shell > .registration-tabs {
  position: sticky;
  top: 36px;
  z-index: 250;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--a1-sw-surface, #090d14);
  backdrop-filter: none;
  box-shadow: none;
}

.comparison-split-bar span {
  background: var(--course-accent);
}

/* 4. User page config sections: the add buttons are compact squares at every
   width (the old rule only applied on phones, leaving a stretched gradient
   pill on desktop). */
.user-config-section-head .user-config-add {
  flex: 0 0 auto;
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid rgba(53, 212, 255, 0.35);
  border-radius: 8px;
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.1);
  box-shadow: none;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.user-config-section-head .user-config-add:hover,
.user-config-section-head .user-config-add:focus-visible {
  background: rgba(53, 212, 255, 0.22);
  outline: none;
}

/* Sticky bars inside the registration fullpage need the shell to clip (not
   scroll-hide) horizontal overflow — overflow-x: hidden creates a scroll
   container that disables position: sticky for everything inside. */
.home-fullpage-body > .registration-shell {
  overflow-x: clip;
}

.home-fullpage .registration-shell > .registration-tabs {
  margin-bottom: 8px;
}

/* ---------------------------------------------------------------------------
   Roadmap course cards — equal height without truncating anything.

   Earlier this block clamped titles to two lines to force a uniform card size.
   That fought the wrapping rules above (which set white-space: normal and let
   titles run as long as they need) and every card ended in an ellipsis. Rows
   now equalise by stretching to their tallest card instead, so nothing is cut.
   --------------------------------------------------------------------------- */

/* Remove control: sits inside the card instead of straddling the corner, stays
   quiet until you reach for it, and keeps a touch-sized hit area. The reaction
   marker owns the opposite corner, so the two never overlap. */
.roadmap-course-card-full .roadmap-course-actions,
.roadmap-course-actions {
  top: 4px;
  right: 4px;
  z-index: 6;
}

.roadmap-course-actions .roadmap-remove-button,
.roadmap-course-card-full .roadmap-course-actions .roadmap-remove-button {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
  opacity: 0.5;
  transition: color 140ms ease, background-color 140ms ease, opacity 140ms ease;
}

.roadmap-course-actions .roadmap-remove-button:hover,
.roadmap-course-actions .roadmap-remove-button:focus-visible,
.roadmap-course-card-full .roadmap-course-actions .roadmap-remove-button:hover,
.roadmap-course-card-full .roadmap-course-actions .roadmap-remove-button:focus-visible {
  color: #ffffff;
  background: var(--red);
  opacity: 1;
  outline: none;
}

/* Touch devices get no hover, so the control stays legible there. */
@media (hover: none) {
  .roadmap-course-actions .roadmap-remove-button,
  .roadmap-course-card-full .roadmap-course-actions .roadmap-remove-button {
    opacity: 0.85;
  }
}

/* ---------------------------------------------------------------------------
   User page logout row.

   The shell's sidebar logout is display:none below 760px, which left phones
   with no way to sign out. This row mirrors the install card's shape and
   delegates to that same shell control.
   --------------------------------------------------------------------------- */

.user-logout-button {
  width: 100%;
  min-height: 78px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) {
  .user-logout-button:hover{
    background: rgba(255, 91, 120, 0.07);
  }
}

.user-logout-button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -3px;
}

.user-logout-button:disabled {
  cursor: default;
  opacity: 0.65;
}

.user-logout-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 91, 120, 0.34);
  border-radius: 13px;
  color: var(--red);
  background: rgba(255, 91, 120, 0.1);
}

.user-logout-icon svg {
  width: 22px;
  height: 22px;
}

.user-logout-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.user-logout-copy strong,
.user-logout-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-logout-copy strong {
  font-size: 0.98rem;
}

.user-logout-copy small {
  color: var(--muted);
  font-size: 0.8rem;
}

/* ---------------------------------------------------------------------------
   Progress readout colours, restated at full strength.

   `.progress-stat` alone (0,1,0) loses to container rules such as
   `.hass-concentration-heading span` (0,1,1), which paints everything muted —
   that is why a finished requirement rendered grey instead of green. Qualifying
   by element matches that weight, and coming last in the sheet settles it.
   --------------------------------------------------------------------------- */

span.progress-stat {
  color: var(--green);
}

span.progress-stat.amber {
  color: var(--amber);
}

span.progress-stat.red {
  color: var(--red);
}

/* ---------------------------------------------------------------------------
   Two-course comparison: shared centre label and plain-text prerequisite state.
   --------------------------------------------------------------------------- */

/* Prerequisite state reads as coloured text, matching the Progress tree rather
   than reintroducing a pill into a layout that just lost its boxes. */
.comparison-two-course-visual .comparison-prereq-item span {
  width: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--green);
  font-size: 11px;
  font-weight: 850;
}

/* ---------------------------------------------------------------------------
   Roadmap course cards — removal moves off the card.

   The per-card × was small, permanently visible, and sat where a thumb lands
   when scrolling. Removal now happens from the detail sheet or by long-pressing
   a card onto a trash bar, which also frees the card to be shorter.
   --------------------------------------------------------------------------- */

/* --- long-press to remove --- */

.roadmap-trash-zone {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 380;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 88px;
  padding: 14px 16px calc(14px + var(--a1-safe-bottom));
  border-top: 1px solid rgba(255, 91, 120, 0.45);
  background: linear-gradient(180deg, rgba(255, 91, 120, 0.12), rgba(120, 12, 30, 0.55));
  backdrop-filter: blur(8px);
  color: #ffd7de;
  font-size: 13px;
  font-weight: 800;
  /* Kept out of the pointer path: hit-testing is done by coordinates so the
     drag never lands on the bar instead of the page beneath it. */
  pointer-events: none;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 180ms ease, opacity 180ms ease, background-color 140ms ease;
}

/* --- detail sheet action row --- */

/* --- comment editor --- */

/* ---------------------------------------------------------------------------
   Two-course comparison — centre seam and the usefulness row.

   The accent stripe was drawn on the *right edge of the left cell*. In a
   `1fr auto 1fr` metric row that edge is where the centre label starts, not the
   middle of the row, so the stripe sat noticeably left of centre and looked
   like a mistake. The row separators already carry the structure, so the
   stripe goes.
   --------------------------------------------------------------------------- */

.roadmap-course-card-full .roadmap-course-main span {
  font-size: 12px;
  line-height: 1.22;
  /* break-word (not normal): a word wider than the narrow card must wrap —
     with hyphens:auto it breaks as "Quantita-tive" instead of being clipped
     mid-glyph at the card edge. */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* Course-status strip on Learn → Dashboard and Grades. Dashboard mounts the
   Academic Assistant's own control (utils/course-status.js) and Grades mounts
   its own registry panel, so the same information looks the same in all three
   places — including the per-course actions. */
.learn-init-status:empty {
  display: none;
}

.learn-init-status {
  padding: 0 14px 10px;
}

.learn-init-status .academic-assistant-courses {
  width: 100%;
}

.learn-init-status-empty {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

/* User → Services stays intentionally flat: three status rows, not three
   nested cards. Configuration details live in the existing modal. */
.user-services-body {
  padding-top: 2px;
  padding-bottom: 6px;
}

.user-services-body .integration-grid {
  display: block;
}

.user-service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  border-bottom: 1px solid var(--user-line);
}

.user-service-row:last-child {
  border-bottom: 0;
}

.user-service-name {
  min-width: 0;
  overflow: hidden;
  color: var(--user-text);
  font-size: 14px;
  font-weight: 780;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-service-row-actions,
.user-service-status {
  display: inline-flex;
  align-items: center;
}

.user-service-row-actions {
  gap: 10px;
}

.user-service-status {
  justify-content: flex-end;
  gap: 6px;
  color: var(--user-muted);
  font-size: 11px;
  font-weight: 780;
  white-space: nowrap;
}

.user-service-status-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.user-service-status.is-ok .user-service-status-dot {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(73, 209, 125, 0.1);
}

/* "OK" is the resting state — it should not glow green. Quiet neutral pill,
   one calm dot; color stays reserved for states that need attention. */
.user-service-status.a1-pill.is-ok {
  background: var(--a1-muted-bg, rgba(127, 127, 127, 0.08));
  color: var(--muted);
}

.user-service-status.a1-pill.is-ok .user-service-status-dot {
  background: var(--a1-ok-fg, var(--green));
  box-shadow: none;
}

.user-service-status.is-expired .user-service-status-dot {
  background: var(--amber);
  box-shadow: 0 0 0 3px rgba(248, 201, 104, 0.12);
}

.user-service-settings {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--user-muted);
  background: transparent;
  cursor: pointer;
}

.user-service-settings:hover,
.user-service-settings:focus-visible {
  color: var(--user-text);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.user-service-settings svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.user-service-loading {
  margin: 0;
  padding: 14px 0;
  color: var(--user-muted);
  font-size: 12px;
}

.user-service-error-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 420px) {
  .user-service-row {
    gap: 8px;
  }

  .user-service-row-actions {
    gap: 6px;
  }

  .user-service-status {
    min-width: 0;
  }
}

/* User → Email Accounts is an account directory, not a second inbox. The
   provider glyph, identity, sync state, and credential action stay readable at
   a glance while the connect controls remain quiet until requested. */
.email-accounts-panel-header {
  align-items: center;
}

.email-accounts-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--user-muted, var(--muted));
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.email-accounts-panel-body {
  padding-top: 2px;
  padding-bottom: 8px;
}

/* The mailbox switchboard opens from its integration-style row in a
   config-style modal; the directory scrolls inside the shell's content row. */
.email-accounts-modal-body {
  min-height: 0;
  padding: 4px 16px 14px;
  overflow-y: auto;
}

/* Friends and Settings reuse the same shell: the page panel node is moved in
   while the dialog is open, so its own styles apply unchanged. */
body.user-drawer-modal-open {
  overflow: hidden;
}

.user-drawer-modal-actions,
.integration-config-modal-header > .user-drawer-modal-actions {
  /* Outranks the header's `> div` grid rule, which stacked Edit above the ×
     close button in a single column. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.user-drawer-modal-actions .compact-action-button {
  /* The generic phone rule makes every ghost button width:100%, and the base
     compact control has a 108px minimum. In this header that caused Edit to
     consume the entire action row and pushed the close button outside the
     modal. Header actions size to their labels instead. */
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
}

.user-drawer-modal-body {
  min-height: 0;
  padding: 4px 16px 16px;
  overflow-y: auto;
}

.user-drawer-modal-body > .user-drawer,
.user-drawer-modal-body > .panel-body {
  padding: 0;
}

.user-homework-preferences,
.user-homework-summary { box-sizing: border-box; min-width: 0; width: 100%; padding: 4px 16px 16px; }
.user-homework-preferences { display: grid; gap: 12px; }
.user-homework-preferences[hidden], .user-homework-summary[hidden] { display: none !important; }
.user-homework-summary-head { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.user-homework-summary-edit { min-height: 32px; padding: 5px 11px; border: 1px solid var(--line-soft); border-radius: 8px; color: var(--text); background: var(--a1-sw-surface-2, var(--panel-2)); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.user-homework-summary-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 12px; min-width: 0; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.user-homework-summary-row > span { color: var(--muted); }
.user-homework-summary-row > strong { min-width: 0; overflow-wrap: anywhere; text-align: right; font-weight: 700; }
.user-homework-preferences > label:not(.user-homework-option) { display: grid; gap: 5px; min-width: 0; font-size: 13px; }
.user-homework-preferences input[type="text"] { width: 100%; min-width: 0; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--a1-sw-surface, var(--panel)); color: var(--text); font: inherit; }
.user-homework-option { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 13px; }
.user-homework-option input[type="checkbox"] { min-width: 0; min-height: 0; width: 15px; height: 15px; margin: 0; flex: 0 0 15px; }
.user-homework-option span { overflow-wrap: anywhere; }
.user-homework-id-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.user-homework-id-row > input[type="text"] { flex: 0 1 136px; width: min(136px, 44%); min-width: 82px; min-height: 34px; padding: 6px 8px; font-size: 16px; }
.user-homework-save { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.user-homework-save > button { width: auto; min-width: 78px; flex: 0 0 auto; }
.user-homework-feedback { display: block; max-width: 100%; margin: 10px 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.user-homework-feedback:empty { display: none; }

/* Settings reads as one ordered control sheet instead of six unrelated cards.
   The dynamic first four live in #user-configs-root, whose box disappears
   while its children remain grid items alongside Quota and Appearance. */
.user-configs-body {
  gap: 0;
}

.user-config-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--a1-sw-surface, var(--panel));
}

.user-config-grid-contents {
  display: contents;
}

.user-config-grid .user-config-section,
.user-config-grid .user-config-section.collapsed {
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
}

.user-config-grid .user-config-appearance-section {
  border-bottom: 1px solid var(--line-soft);
}

.user-config-grid .user-config-section-head {
  min-height: 52px;
  padding: 4px 12px;
}

.user-config-grid .user-config-section-toggle {
  min-height: 44px;
  gap: 9px;
}

.user-config-grid .user-config-section-toggle > span:first-child {
  display: inline-grid;
  place-items: center;
  flex: 0 0 14px;
  width: 14px;
  color: var(--muted);
  font-size: 10px;
  transform-origin: center;
}

.user-config-grid .user-config-section-toggle h3 {
  font-size: 13px;
  font-weight: 700;
}

.user-config-grid .user-config-section-toggle small {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border: 0;
  color: var(--muted);
  background: var(--a1-sw-surface-3, var(--panel-2));
  font-size: 10px;
  font-weight: 750;
}

.user-config-grid .user-config-section-head .user-config-add {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: var(--a1-sw-surface-3, var(--panel-2));
  box-shadow: none;
  font-size: 16px;
}

.user-config-grid .user-config-section-head .user-config-add:focus-visible {
  outline: 2px solid var(--a1-accent, var(--cyan));
  outline-offset: 2px;
}

@media (hover: hover) {
  .user-config-grid .user-config-section-head .user-config-add:hover {
    color: var(--text);
    background: var(--a1-sw-accent-soft, var(--panel-2));
  }
}

.user-config-grid .user-config-section:not(.collapsed) > .user-config-section-head {
  background: var(--a1-sw-surface-2, var(--panel-2));
}

.user-config-grid .user-config-list {
  padding: 6px 10px 10px;
  border-top: 1px solid var(--line-soft);
}

.user-config-section-title {
  margin: 0;
  padding: 2px 0 2px 2px;
  font-size: 13px;
}

.user-config-section-body {
  min-width: 0;
  padding: 0 8px 10px;
}

.user-config-section.collapsed .user-config-section-toggle > span:first-child {
  transform: rotate(-90deg);
}

.user-auto-check-section:not(.collapsed),
#user-quota-section:not(.collapsed),
#user-homework-settings-section:not(.collapsed) {
  grid-column: 1 / -1;
}

#user-quota-section .user-config-section-body,
#user-homework-settings-section .user-config-section-body {
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

.user-config-grid .user-config-inline-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) minmax(0, 210px);
  align-items: center;
  gap: 8px;
  min-height: 60px;
  padding: 6px 8px;
}

.user-config-appearance-section {
  grid-column: 1 / -1;
}

.user-config-appearance-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.user-config-appearance-copy small {
  padding-left: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

.user-appearance-segmented {
  justify-self: end;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(210px, 100%);
  padding: 3px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--a1-sw-surface-3, var(--panel-2));
}

.user-appearance-segmented button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 38px;
  padding: 0 5px;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  font-weight: 750;
}

.user-appearance-segmented button svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.user-appearance-segmented button.active {
  color: var(--a1-accent-text, var(--cyan));
  background: var(--a1-sw-accent-soft, color-mix(in srgb, var(--cyan) 14%, transparent));
  box-shadow: var(--a1-shadow-1, 0 1px 2px rgba(0, 0, 0, 0.14));
}

.user-appearance-segmented button:focus-visible {
  outline: 2px solid var(--a1-accent, var(--cyan));
  outline-offset: -2px;
}

.user-config-grid .user-config-inline-row .user-config-section-title { white-space: nowrap; font-size: 13px; }

.user-color-theme-grid {
  justify-self: end;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  width: min(210px, 100%);
}

.user-color-theme-grid button {
  display: grid;
  place-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 44px;
  padding: 4px 0;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.user-color-theme-dot {
  display: block;
  width: 22px;
  height: 22px;
  border: 3px solid var(--a1-surface, var(--panel));
  border-radius: 999px;
  background: #4c5bd4;
  box-shadow: 0 0 0 1px var(--line-soft);
}

.user-color-theme-dot[data-theme-preview="aurora"] { background: #4f7b5f; }
.user-color-theme-dot[data-theme-preview="violet"] { background: #7556c9; }
.user-color-theme-dot[data-theme-preview="solar"] { background: #986414; }
.user-color-theme-dot[data-theme-preview="crimson"] { background: #b14f69; }

.user-color-theme-grid button.active {
  color: var(--text);
  border-color: transparent;
  background: transparent;
}

.user-color-theme-grid button.active .user-color-theme-dot {
  box-shadow: 0 0 0 2px var(--a1-accent, var(--cyan));
}

.user-color-theme-grid button:focus-visible {
  outline: 2px solid var(--a1-accent, var(--cyan));
  outline-offset: -2px;
}

@media (hover: hover) {
  .user-appearance-segmented button:hover:not(.active) {
    color: var(--text);
    background: var(--a1-sw-surface-2, var(--panel));
  }

  .user-color-theme-grid button:hover:not(.active) {
    color: var(--text);
    background: var(--a1-sw-surface-2, var(--panel));
  }
}

/* Auto Check is the only settings form with several unlike controls. Give the
   expanded form one full grid row and align every value to the same right-hand
   column instead of letting inherited Learn styles produce uneven gaps. */
.user-auto-check-config {
  gap: 0;
  padding: 4px 12px 12px;
  border-top: 1px solid var(--line-soft);
}

.user-auto-check-config > .muted,
.user-auto-check-config > .form-error,
.user-auto-check-config > .form-success {
  margin: 6px 0 2px;
  font-size: 11px;
  line-height: 1.4;
}

.user-auto-check-config > .learn-auto-check-field {
  gap: 7px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}

.user-auto-check-config .auto-check-setting-row {
  grid-template-columns: minmax(88px, 1fr) minmax(0, 230px);
  min-height: 36px;
  gap: 12px;
}

.user-auto-check-config .auto-check-setting-label {
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.user-auto-check-config .auto-check-segmented {
  width: 100%;
  max-width: 176px;
  justify-self: end;
}

.user-auto-check-config .auto-check-max-select,
.user-auto-check-config .auto-check-engine-select {
  justify-self: end;
  font-size: 12px;
  font-weight: 650;
}

.user-auto-check-config .auto-check-friend-options {
  margin-top: 1px;
}

.user-auto-check-config .learn-auto-check-actions {
  justify-content: flex-end;
  padding-top: 10px;
}

@media (max-width: 360px) {
  .user-config-inline-row .user-appearance-segmented button svg { display: none; }
  .user-color-theme-dot { width: 20px; height: 20px; }
}

@media (max-width: 520px) {
  .user-auto-check-config {
    padding: 3px 9px 10px;
  }

  .user-auto-check-config .auto-check-setting-row {
    grid-template-columns: minmax(78px, 1fr) minmax(0, 180px);
    gap: 9px;
  }

  .user-auto-check-config .auto-check-engine-select {
    width: min(180px, 50vw);
    min-width: 148px;
  }
}

/* Build stamp at the very bottom of the User page. The bottom margin keeps it
   clear of the fixed phone nav, which overlays the last stretch of the page. */
.user-app-version {
  margin: 2px 0 18px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-align: center;
}

.email-account-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 68px;
}

.email-account-identity {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.email-account-identity > span,
.email-account-identity > small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-account-identity > span:not(.a1-list-row__title),
.email-account-identity > small {
  color: var(--user-muted, var(--muted));
  font-size: 10px;
}

.email-account-identity .email-account-error {
  color: var(--amber, #d4942e);
}

.email-account-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.email-account-disconnect {
  min-height: 32px;
  padding-inline: 10px;
  color: var(--muted);
  font-size: 11px;
}

/* Keep the destructive action easy to tap without painting a full-width card
   beneath every connected account on narrow screens. */
html[data-a1-skin] .user-page .email-account-disconnect {
  width: auto;
  min-width: 0;
  min-height: 44px;
  padding-inline: 4px;
  border: 0;
  background: transparent;
  color: var(--user-muted, var(--muted));
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

html[data-a1-skin] .user-page .email-account-disconnect:hover,
html[data-a1-skin] .user-page .email-account-disconnect:focus-visible {
  background: transparent;
  color: var(--red);
}

.email-account-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 2px;
}

.email-account-empty-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--cyan);
  background: var(--panel-2);
  font-size: 18px;
  font-weight: 800;
}

.email-account-empty strong,
.email-account-empty p {
  display: block;
  margin: 0;
}

.email-account-empty p,
.email-account-connect-body > p,
.email-account-limit-note {
  color: var(--user-muted, var(--muted));
  font-size: 11px;
  line-height: 1.45;
}

.email-account-connect {
  margin-top: 4px;
  border-top: 1px solid var(--user-line, var(--line));
}

.email-account-connect-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.email-account-connect-summary::-webkit-details-marker {
  display: none;
}

.email-account-connect-summary > span:last-child {
  font-size: 20px;
  font-weight: 400;
  transition: transform 160ms ease;
}

.email-account-connect[open] .email-account-connect-summary > span:last-child {
  transform: rotate(45deg);
}

.email-account-connect-body {
  display: grid;
  gap: 12px;
  padding: 2px 0 14px;
}

.email-account-connect-body > p,
.email-account-limit-note {
  margin: 0;
}

.email-account-terms {
  align-items: flex-start;
  font-size: 10px;
}

.email-account-provider-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.email-account-provider-actions button {
  min-height: 38px;
}

.email-account-provider-actions button > span {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border-radius: 6px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 10px;
  font-weight: 900;
}

.email-account-limit-note {
  padding: 12px var(--a1-card-pad, 16px) 5px;
  border-top: 1px solid var(--user-line, var(--line));
}

.email-account-status {
  min-height: 0;
  margin-top: 4px;
}

.email-account-status:empty {
  display: none;
}

.email-account-status.is-error {
  color: var(--red);
}

@media (max-width: 560px) {
  .email-account-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .email-account-row-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .email-account-disconnect {
    min-height: 30px;
  }
}

/* Learn → Dashboard activity feed. One card per detected course event, with the
   AI summary on top and the raw title underneath. The kind drives the icon and
   the left accent so the four streams stay distinguishable while scrolling. */
.learn-course-feed {
  margin-bottom: 14px;
}

.learn-course-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 10px;
}

/* One line, so the refresh and bell sit level with the word "Notification"
   instead of centring against a two-line block. */
.learn-course-feed-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.learn-course-feed-heading h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
}

.learn-course-feed-heading .row-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

/* Unread is the only count on this surface, and it is the one worth alarming
   about — hence a filled red badge rather than a muted pill. */
.learn-course-feed-unseen {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--red);
  color: #12070a;
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
}

.learn-course-feed-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.learn-course-feed-head-actions .compact-action-button {
  min-width: 0;
  padding: 4px 10px;
  font-size: 12px;
}

.learn-course-feed-settings-button.is-open {
  border-color: var(--cyan);
  color: var(--cyan);
}

.learn-course-feed-settings-button svg {
  width: 16px;
  height: 16px;
}

.course-feed-system-icon {
  display: block;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

.learn-course-feed-clear-all,
.learn-course-note-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--red);
}

.learn-course-feed-clear-all {
  margin-top: 10px;
}

.learn-course-feed-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 18px 12px;
}

.learn-course-feed-filters button {
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 4px 11px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  cursor: pointer;
}

.learn-course-feed-filters button b {
  margin-left: 4px;
  color: var(--text);
  font-weight: 600;
}

@media (hover: hover) {
  .learn-course-feed-filters button:hover{
    border-color: var(--line);
    color: var(--text);
  }
}

.learn-course-feed-filters button.active {
  border-color: var(--cyan);
  color: var(--text);
  background: rgba(53, 212, 255, 0.12);
}

/* Notification centre. Selects and checkboxes only: the panel repaints after
   every change, and a free-text field would lose focus mid-edit. */
.learn-course-feed-settings {
  margin: 0 18px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--a1-sw-surface-3, rgba(9, 13, 20, 0.45));
}

.learn-course-feed-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.learn-course-feed-settings-title {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.learn-course-feed-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
  cursor: pointer;
}

.learn-course-feed-switch input {
  width: 15px;
  height: 15px;
  accent-color: var(--cyan);
}

.learn-course-feed-hours {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.learn-course-feed-hours label,
.learn-course-feed-span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.learn-course-feed-hours select,
.learn-course-feed-span select {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 3px 6px;
  color: var(--text);
  background: var(--panel-2);
  font-size: 12px;
}

.learn-course-feed-settings-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.learn-course-feed-settings-message {
  margin: 10px 0 0;
  color: var(--cyan);
  font-size: 12px;
}

.learn-course-feed-error {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 18px 12px;
  color: var(--red);
  font-size: 13px;
}

.learn-course-feed-empty {
  margin: 0;
  padding: 0 18px 16px;
  font-size: 13px;
  line-height: 1.5;
}

.learn-course-feed-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-soft);
}

.learn-course-feed-day {
  padding: 8px 18px 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.learn-course-feed-card {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 10px 18px 10px 15px;
  border-left: 3px solid transparent;
}

.learn-course-feed-card + .learn-course-feed-card {
  border-top: 1px solid rgba(45, 55, 72, 0.4);
}

.learn-course-feed-card.is-new {
  background: rgba(53, 212, 255, 0.05);
}

.learn-course-feed-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.06);
  color: var(--muted);
}

.learn-course-feed-icon svg {
  width: 16px;
  height: 16px;
}

.learn-course-feed-card.kind-assignment_new {
  border-left-color: rgba(53, 212, 255, 0.55);
}

.learn-course-feed-card.kind-assignment_new .learn-course-feed-icon {
  color: var(--cyan);
}

.learn-course-feed-card.kind-announcement {
  border-left-color: rgba(155, 140, 255, 0.55);
}

.learn-course-feed-card.kind-announcement .learn-course-feed-icon {
  color: var(--violet);
}

.learn-course-feed-card.kind-grade_posted {
  border-left-color: rgba(73, 209, 125, 0.55);
}

.learn-course-feed-card.kind-grade_posted .learn-course-feed-icon {
  color: var(--green);
}

.learn-course-feed-card.kind-due_changed {
  border-left-color: rgba(245, 184, 75, 0.55);
}

.learn-course-feed-card.kind-due_changed .learn-course-feed-icon {
  color: var(--amber);
}

.learn-course-feed-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.learn-course-feed-body strong {
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1.45;
}

.learn-course-feed-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 11.5px;
}

.learn-course-feed-category,
.learn-course-feed-new {
  padding: 0 6px;
  border-radius: 999px;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.03em;
}

.learn-course-feed-category {
  border: 1px solid var(--line-soft);
}

.learn-course-feed-new {
  background: rgba(53, 212, 255, 0.16);
  color: var(--cyan);
  font-weight: 600;
}

.learn-course-feed-title {
  color: var(--muted);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-course-feed-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.learn-course-feed-actions .compact-action-button {
  min-width: 0;
  padding: 4px 10px;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .learn-course-feed-head,
  .learn-course-feed-filters,
  .learn-course-feed-empty {
    padding-left: 14px;
    padding-right: 14px;
  }

  .learn-course-feed-card {
    grid-template-columns: 24px minmax(0, 1fr);
    padding-right: 14px;
  }

  .learn-course-feed-icon {
    width: 24px;
    height: 24px;
  }

  .learn-course-feed-actions {
    grid-column: 2;
  }

  .learn-course-feed-settings {
    margin-left: 14px;
    margin-right: 14px;
  }
}

/* Per-surface course visibility. The registry is shared; each surface only
   records which courses it does not display, so the hidden rows sit in their
   own section rather than disappearing. */
.academic-assistant-hidden-count {
  flex: none;
  margin-left: 6px;
  color: var(--muted);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.02em;
}

.academic-assistant-course.is-hidden-here {
  background: rgba(127, 127, 127, 0.025);
  opacity: 0.72;
}

/* Learn → Grades keeps its own registry, because a course can exist only in
   Gradescope where the Canvas crawl behind Home and Dashboard is blind. */
.grade-courses-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 7px 8px;
}

.grade-courses-toolbar .compact-action-button {
  min-width: 0;
  padding: 4px 12px;
  font-size: 12px;
}

.grade-courses-toolbar .row-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.grade-courses-empty {
  margin: 0;
  padding: 2px 7px 8px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.grade-courses-error {
  margin: 0;
  padding: 2px 7px 8px;
  color: var(--red);
  font-size: 11.5px;
}

.grade-courses-course-error {
  color: var(--amber);
}

/* Workspace rows use the same compact visual language as Answers. All row
   actions live in one context menu so deep trees remain readable on phones. */
#homework-workspace .learn-homework-panel,
.learn-workspace-shell,
.learn-workspace-tree {
  overflow: visible;
}

.learn-workspace-layout {
  max-width: 880px;
}

.learn-workspace-shell {
  border: 0;
  background: transparent;
}

.learn-workspace-tree {
  gap: 1px;
  padding: 5px 4px 9px;
}

.learn-workspace-tree-row {
  /* Rows used to reserve 48px of box for ~20px of text, which made the whole
     tree read as mostly air. Compact rows keep a comfortable tap target via
     the inner tree-item button. */
  min-height: 32px;
  padding: 2px 4px 2px min(var(--workspace-indent, 8px), 160px);
  border-radius: 8px;
}

.learn-workspace-tree-row:hover,
.learn-workspace-tree-row.selected {
  background: rgba(127, 127, 127, 0.08);
}

.learn-workspace-tree-item {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 32px;
  padding: 0 3px;
  color: var(--text);
}

.learn-workspace-tree-item > .learn-answer-filetype {
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}

.learn-workspace-tree-item > .learn-answer-filetype[data-ext="pdf"] {
  color: #e5484d;
}

.learn-workspace-tree-item > .learn-answer-filetype[data-ext="md"],
.learn-workspace-tree-item > .learn-answer-filetype[data-ext="txt"],
.learn-workspace-tree-item > .learn-answer-filetype[data-ext="tex"] {
  color: #3b82f6;
}

.learn-workspace-tree-item > .learn-workspace-tree-copy {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.learn-workspace-tree-title-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.learn-workspace-tree-item strong {
  font-size: 13px;
  font-weight: 700;
}

.learn-workspace-tree-item small {
  flex: 0 0 auto;
  font-size: 10px;
}

.learn-workspace-answer-badge {
  flex: 0 0 auto;
  padding: 2px 5px;
  border: 1px solid rgba(73, 209, 125, 0.36);
  border-radius: 4px;
  color: var(--green, #9af5bf);
  background: rgba(73, 209, 125, 0.1);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.1;
}

.learn-workspace-row-actions {
  gap: 0;
}

.learn-workspace-more-wrap.open {
  z-index: 90;
}

.learn-workspace-more-menu {
  z-index: 91;
  min-width: 174px;
}

.learn-workspace-more-menu .learn-workspace-menu-danger {
  color: #ffb8c8;
}

.learn-workspace-more-menu .learn-workspace-menu-danger:hover,
.learn-workspace-more-menu .learn-workspace-menu-danger:focus-visible {
  background: rgba(255, 107, 122, 0.1);
}

@media (max-width: 720px) {
  .learn-workspace-tree-row {
    min-height: 30px;
    padding-left: min(var(--workspace-indent, 6px), 54px);
  }

  .learn-workspace-tree-item {
    min-height: 28px;
  }

  /* Name and size share one line: the two-line stack doubled every row's
     height for a detail that fits comfortably beside the name. The
     :last-child tail outweighs the generic `> span:last-child { grid }` rule
     that otherwise wins on specificity. */
  .learn-workspace-tree-item > span.learn-workspace-tree-copy:last-child {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }

  .learn-workspace-tree-item small {
    flex: 0 0 auto;
    font-size: 9px;
  }

  .learn-workspace-more-menu {
    min-width: 164px;
  }
}

/* --- Course feed: grouping toggle, course headers, history import ---------- */

.learn-course-feed-groupby {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
  padding: 2px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

.learn-course-feed-groupby button {
  min-height: 26px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.learn-course-feed-groupby button.active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

/* Course headers carry a count and a rule, so a long history stays scannable. */
.learn-course-feed-day.is-course {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: none;
}

.learn-course-feed-day.is-course b {
  padding: 1px 7px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.07);
  font-size: 11px;
  font-weight: 700;
}

.learn-course-feed-day.is-course:first-child {
  margin-top: 0;
  padding-top: 4px;
  border-top: 0;
}

.learn-course-feed-backfill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 4px 14px 8px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--a1-sw-surface-3, rgba(8, 13, 22, 0.44));
}

.learn-course-feed-backfill.is-confirm {
  border-color: rgba(245, 184, 75, 0.42);
  background: rgba(245, 184, 75, 0.07);
}

.learn-course-feed-backfill strong {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: 850;
}

.learn-course-feed-backfill span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.learn-course-feed-backfill-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

@media (max-width: 560px) {
  .learn-course-feed-backfill {
    flex-direction: column;
    align-items: stretch;
  }

  .learn-course-feed-backfill-actions {
    justify-content: flex-end;
  }

  .learn-course-feed-groupby {
    margin-left: 0;
  }
}

/* --- Courses tab: inline ready chip, and a card that fits a phone ---------- */

/* The ready control sits on the heading row rather than in a band below it. */
.learn-init-status-inline {
  flex: 0 0 auto;
  margin: 0;
}

.learn-init-status-inline .academic-assistant-courses {
  margin: 0;
}

/* The feed card is a 3-column grid whose middle column holds long course names
   and summaries. Without min-width:0 on every part, a long title pushes the
   action buttons off-screen instead of wrapping. */
.learn-course-feed-card,
.learn-course-feed-body,
.learn-course-feed-meta {
  min-width: 0;
}

.learn-course-feed-body strong,
.learn-course-feed-meta,
.learn-course-feed-title {
  overflow-wrap: anywhere;
}

.learn-course-feed-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

@media (max-width: 980px) {
  /* Actions drop under the text instead of fighting it for width. */
  .learn-course-feed-card {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px 12px;
  }

  .learn-course-feed-actions {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 4px;
  }

  /* Buttons keep their own width; a stretched "Open" bar wastes a whole row. */
  .learn-course-feed-actions > * {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
  }

  .learn-course-feed-body strong {
    font-size: 13px;
    line-height: 1.4;
  }

  .learn-course-feed-day,
  .learn-course-feed-day.is-course {
    padding-left: 12px;
    padding-right: 12px;
  }

  .learn-course-feed-head {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
  }

  .learn-course-feed-backfill {
    margin: 4px 12px 8px;
  }

  /* Heading, ready chip and refresh stack rather than overflow. */
  .learn-homework-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .learn-init-status-inline {
    order: 3;
    width: 100%;
  }
}

/* --- Courses feed: one entry per course, open to read, drag to reorder ----- */

.learn-course-feed-courses {
  display: grid;
  gap: 6px;
  padding: 6px 14px 14px;
}

.learn-course-entry {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--a1-sw-surface-3, rgba(8, 13, 22, 0.4));
  overflow: hidden;
}

.learn-course-entry.is-dragging {
  opacity: 0.6;
  outline: 1px solid var(--accent, #35d4ff);
}

.learn-course-entry.is-drop-target {
  border-color: var(--accent, #35d4ff);
  box-shadow: inset 0 2px 0 var(--accent, #35d4ff);
}

.learn-course-entry-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
}

@media (hover: hover) {
  .learn-course-entry-head:hover{
    background: rgba(255, 255, 255, 0.03);
  }
}

.learn-course-entry-grip {
  flex: 0 0 auto;
  padding: 4px 2px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: grab;
  opacity: 0.5;
  /* The grip drives a pointer-event drag, so the browser must not claim the
     gesture for scrolling. */
  touch-action: none;
}

.learn-course-entry-grip:active {
  cursor: grabbing;
}

.learn-course-entry-head:hover .learn-course-entry-grip {
  opacity: 1;
}

.learn-course-entry-head strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-course-entry-seen {
  flex: 0 0 auto;
  margin-left: auto;
}

@media (max-width: 980px) {
  .learn-course-feed-courses {
    padding: 6px 12px 12px;
  }

  .learn-course-entry-head {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* On a phone the grip is hard to hit precisely, so the whole row drags. */
  .learn-course-entry-grip {
    font-size: 15px;
  }

  .learn-course-entry-seen {
    margin-left: auto;
  }
}

/* --- Course entry: opens a modal, and its own course picker ---------------- */

.learn-course-feed-picker {
  padding: 0 14px 8px;
}

.learn-course-entry-open {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}

.learn-course-entry-open .course-feed-system-icon {
  width: 17px;
  height: 17px;
}

.learn-course-entry-seen + .learn-course-entry-open {
  margin-left: 8px;
}

.learn-course-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 22px;
  background: var(--a1-sw-scrim, rgba(2, 6, 12, 0.72));
  backdrop-filter: blur(8px);
}

.learn-course-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(760px, 100%);
  max-height: calc(var(--app-live-viewport-height, 100dvh) - 44px);
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel, #121a26);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* Back on the left, title in the middle, ••• on the right — and only the middle
   column may grow, so neither control can be pushed off the dialog. Positioned,
   so the ••• menu hanging out of it paints over the scrolling body below. */
.learn-course-modal-head {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.learn-course-modal-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.learn-course-modal-head strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 900;
}

.learn-course-modal-head > div > span {
  color: var(--muted);
  font-size: 12px;
}

.learn-course-modal-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.learn-course-modal-close:hover,
.learn-course-modal-close:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.learn-course-modal-body {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 560px) {
  .learn-course-modal-backdrop {
    padding: 0;
    place-items: stretch;
  }

  .learn-course-modal {
    width: 100%;
    max-height: var(--app-live-viewport-height, 100dvh);
    height: var(--app-live-viewport-height, 100dvh);
    border: 0;
    border-radius: 0;
  }

  .learn-course-modal-head {
    padding: calc(12px + var(--a1-safe-top)) 14px 12px;
  }

  .learn-course-feed-picker {
    padding: 0 12px 8px;
  }
}

body:has(.learn-course-modal-backdrop) {
  overflow: hidden;
}

/* Provider-neutral course setup. This is the single setup surface used by
   Learn, so status, sources, policy, and Calendar review stay together. */
.course-center {
  margin-bottom: 18px;
  overflow: hidden;
}

.course-center-head,
.course-center-card-head,
.course-center-subhead,
.course-center-actions,
.course-center-source-row {
  display: flex;
  align-items: center;
}

.course-center-head {
  justify-content: space-between;
  gap: 18px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}

.course-center-head h3 {
  margin: 0;
}

.course-center-provider-statuses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  padding: 12px 22px 0;
}

.course-center-provider-statuses.provider-count-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.course-center-provider-statuses.provider-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.course-center-provider-statuses.provider-count-1 {
  grid-template-columns: minmax(0, 1fr);
}

.learn-provider-status-shell {
  position: relative;
  min-width: 0;
}

.learn-provider-hidden-row {
  display: flex;
  justify-content: flex-end;
  padding: 8px 22px 0;
}

.learn-provider-hidden-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.learn-provider-hidden-toggle:hover,
.learn-provider-hidden-toggle:focus-visible {
  color: var(--text);
  border-color: var(--line);
  background: var(--panel-2);
}

.learn-provider-hidden-toggle svg {
  width: 15px;
  height: 15px;
}

.learn-provider-hidden-toggle span {
  font-size: .7rem;
  font-weight: 800;
}

.learn-provider-action-menu {
  position: absolute;
  z-index: 35;
  top: calc(100% - 2px);
  right: 22px;
  display: grid;
  width: min(210px, calc(100% - 44px));
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .28);
}

.learn-provider-action-menu > strong {
  padding: 6px 8px 7px;
  color: var(--muted);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.learn-provider-action-menu > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.learn-provider-action-menu > button:hover,
.learn-provider-action-menu > button:focus-visible {
  background: var(--panel-2);
}

/* The Connect action carries a title + sublabel; stack them. The hidden-menu
   rows keep the original label/Unhide side-by-side layout. */
.learn-provider-action-menu:not(.learn-provider-hidden-menu) > button[data-learn-provider-set] {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}

.learn-provider-action-menu > button[data-learn-provider-set] span {
  font-weight: 750;
}

.learn-provider-action-menu > button[data-learn-provider-set] small {
  color: var(--muted);
  font-size: 12px;
}

.learn-provider-action-menu > button small {
  color: var(--muted);
  font-size: .7rem;
}

.learn-provider-all-hidden {
  margin: 10px 22px 0;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: .76rem;
}

.course-center-head-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-left: auto;
}

.course-center-head .ghost-button.course-center-calendar-action {
  flex: 0 0 auto;
  width: auto;
  min-height: 36px;
  padding: 0 10px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

.course-center-head .ghost-button.course-center-icon-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 10px;
  font-size: 20px;
  line-height: 1;
}

.course-center-add-icon {
  font-size: 1.2rem;
}

.course-center-provider-status.attention i {
  background: var(--amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 16%, transparent);
}

.course-center-provider-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  background: var(--panel);
  text-align: left;
  cursor: pointer;
}

.course-center-provider-status:hover,
.course-center-provider-status:focus-visible {
  border-color: color-mix(in srgb, var(--cyan) 55%, var(--line));
}

.course-center-provider-status > span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: .78rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-center-provider-status i {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 14%, transparent);
}

.course-center-provider-status.connected i {
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 16%, transparent);
}

.course-center-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 245;
  display: grid;
  place-items: center;
  padding: 22px;
  background: var(--a1-sw-scrim, rgba(2, 6, 12, .72));
  backdrop-filter: blur(8px);
}

.course-center-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(760px, 100%);
  min-width: 0;
  max-width: 100%;
  max-height: calc(var(--app-live-viewport-height, 100dvh) - 44px);
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel, #121a26);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .5);
  overflow: hidden;
}

.course-center-info-modal {
  width: min(820px, 100%);
}

.course-center-settings-modal {
  width: min(680px, 100%);
}

.course-center-secondary-modal-backdrop {
  z-index: 255;
}

.course-center-secondary-modal {
  width: min(560px, 100%);
}

.course-center-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.course-center-modal-head > div {
  min-width: 0;
  flex: 1 1 auto;
}

/* Info dialogs opened from Course settings chips can step back to settings. */
.course-center-modal-back {
  font-size: 1.5rem;
  line-height: 1;
}

.course-center-modal-head span,
.course-center-modal-head h3 {
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-center-modal-head span {
  color: var(--muted);
  font-size: .72rem;
}

.course-center-modal-head h3 {
  margin-top: 2px;
  font-size: 1rem;
}

.course-center-modal-head > button {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  font-size: 1.35rem;
  cursor: pointer;
}

.course-center-modal-head > button:hover,
.course-center-modal-head > button:focus-visible {
  color: var(--text);
  background: var(--panel-2);
}

.course-center-modal-body {
  min-height: 0;
  padding: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.course-center-modal-body > .course-center-message,
.course-center-modal-body > .course-center-error {
  margin: 0 0 14px;
}

.course-center-message,
.course-center-error {
  margin: 12px 22px 0;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: .88rem;
}

.course-center-message {
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  color: var(--text);
}

.course-center-error {
  background: color-mix(in srgb, var(--red) 10%, transparent);
  color: var(--red);
}

.course-center-add-panel {
  margin: 0;
}

.course-center-add-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.course-center-add-choices > button {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 84px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: var(--panel);
  text-align: left;
  cursor: pointer;
}

.course-center-add-choices > button:hover,
.course-center-add-choices > button:focus-visible {
  border-color: color-mix(in srgb, var(--cyan) 65%, var(--line));
  background: color-mix(in srgb, var(--panel) 90%, var(--cyan) 10%);
}

.course-center-add-choices strong { font-size: .9rem; }
.course-center-add-choices span { color: var(--muted); font-size: .76rem; line-height: 1.4; }

.course-center-add-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.course-center-add-panel-head strong { font-size: .95rem; }

.course-center-add-progress,
.course-center-background-job {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--cyan) 35%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 90%, var(--cyan) 10%);
}

.course-center-add-progress { margin-top: 14px; }
.course-center-background-job { margin: 12px 22px 0; }

.course-center-add-progress > div,
.course-center-background-job > div {
  display: grid;
  flex: 1;
  gap: 4px;
  min-width: 0;
}

.course-center-add-progress span:not(.loading-spinner):not(.fake-progress-track),
.course-center-background-job small {
  color: var(--muted);
  font-size: .76rem;
}

.course-center-add-progress .fake-progress-track,
.course-center-background-job .fake-progress-track {
  margin-top: 5px;
}

.course-center-canvas-list {
  display: grid;
  gap: 7px;
  max-height: 370px;
  margin-bottom: 12px;
  overflow-y: auto;
}

.course-center-canvas-course {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  cursor: pointer;
}

.course-center-canvas-course input { width: 18px; min-height: 18px; margin: 0; }
.course-center-canvas-course > span { display: grid; gap: 2px; min-width: 0; }
.course-center-canvas-course strong { overflow-wrap: anywhere; font-size: .86rem; }
.course-center-canvas-course small { color: var(--muted); font-size: .73rem; }
.course-center-canvas-course em { color: var(--green); font-size: .72rem; font-style: normal; font-weight: 800; }
.course-center-canvas-course.is-added { opacity: .66; cursor: default; }

.course-center-ai-form label,
.course-center-create-form label,
.course-center-source-form label,
.course-center-mode {
  display: grid;
  gap: 6px;
}

.course-center-ai-form label > span,
.course-center-create-form label > span,
.course-center-source-form label > span,
.course-center-mode > span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.course-center-ai-form textarea,
.course-center-ai-form input,
.course-center-fields input,
.course-center-fields textarea,
.course-center-fields select,
.course-center-mode select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  padding: 9px 10px;
}

.course-center-ai-form small,
.course-center-source-form small {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.4;
}

.course-center-create-form label > span em,
.course-center-source-form label > span em,
.course-center-manual-resource-editor label > span em {
  margin-left: 4px;
  color: var(--muted);
  font-size: .68rem;
  font-style: normal;
  font-weight: 600;
}

.course-center-create-form label > span em.is-required {
  color: var(--cyan);
}

.course-center-source-form [data-course-source-field="website-urls"] {
  grid-column: 1 / -1;
}

.course-center-ai-form button,
.course-center-create-form > button,
.course-center-source-form > button {
  margin-top: 10px;
}

.course-center-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--muted);
  font-size: .78rem;
}

.course-center-or::before,
.course-center-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.course-center-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.course-center-manual-form {
  display: grid;
  gap: 14px;
}

.course-center-manual-intro,
.course-center-manual-resources-head > div,
.course-center-manual-resource-editor-head > div {
  display: grid;
  gap: 2px;
}

.course-center-manual-intro > strong,
.course-center-manual-resources-head strong {
  font-size: .92rem;
}

.course-center-manual-intro > span,
.course-center-manual-resources-head span,
.course-center-manual-resource-editor-head span {
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.4;
}

.course-center-manual-notes {
  display: grid;
  gap: 6px;
}

.course-center-manual-notes textarea,
.course-center-manual-resource-editor input,
.course-center-manual-resource-editor textarea {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--panel);
}

.course-center-manual-resources {
  display: grid;
  gap: 11px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.course-center-manual-resources-head,
.course-center-manual-submit,
.course-center-manual-resource-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.course-center-manual-resource-empty {
  margin: 0;
  padding: 13px;
  border: 1px dashed var(--line);
  border-radius: 11px;
  color: var(--muted);
  font-size: .78rem;
  text-align: center;
}

.course-center-manual-resource-list {
  display: grid;
  gap: 7px;
}

.course-center-manual-resource-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel) 93%, var(--cyan) 7%);
}

.course-center-manual-resource-card > i,
.course-center-manual-resource-picker i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 13%, var(--panel));
  font-size: .78rem;
  font-style: normal;
  font-weight: 900;
}

.course-center-manual-resource-card > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.course-center-manual-resource-card strong,
.course-center-manual-resource-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-center-manual-resource-card strong { font-size: .82rem; }
.course-center-manual-resource-card small { color: var(--muted); font-size: .7rem; }

.course-center-manual-resource-card > button,
.course-center-manual-resource-editor-head > button,
.course-center-manual-resource-editor-actions > button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 1.1rem;
  cursor: pointer;
}

.course-center-manual-resource-card > button:hover,
.course-center-manual-resource-card > button:focus-visible,
.course-center-manual-resource-editor-head > button:hover,
.course-center-manual-resource-editor-head > button:focus-visible,
.course-center-manual-resource-editor-actions > button:hover,
.course-center-manual-resource-editor-actions > button:focus-visible {
  color: var(--text);
  background: var(--panel-2);
}

.course-center-manual-resource-editor-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
}

.course-center-manual-resource-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
}

.course-center-manual-resource-picker > button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  background: var(--panel);
  text-align: left;
  cursor: pointer;
}

.course-center-manual-resource-picker > button:hover,
.course-center-manual-resource-picker > button:focus-visible {
  border-color: color-mix(in srgb, var(--cyan) 55%, var(--line));
}

.course-center-manual-resource-picker span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.course-center-manual-resource-picker strong { font-size: .78rem; }
.course-center-manual-resource-picker small { color: var(--muted); font-size: .68rem; line-height: 1.3; }

.course-center-manual-resource-editor {
  display: grid;
  gap: 11px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 94%, var(--cyan) 6%);
  overflow: hidden;
}

.course-center-manual-resource-editor-head,
.course-center-manual-resource-editor-head > strong,
.course-center-manual-resource-editor label,
.course-center-resource-description {
  min-width: 0;
  max-width: 100%;
}

.course-center-manual-resource-editor-head > strong {
  overflow-wrap: anywhere;
}

.course-center-manual-resource-editor label {
  display: grid;
  gap: 5px;
}

.course-center-manual-resource-editor label > span {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 700;
}

.course-center-manual-resource-editor label > small {
  color: var(--muted);
  font-size: .68rem;
}

.course-center-manual-resource-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.course-center-manual-resource-editor > .course-center-error {
  margin: 0;
}

.course-center-manual-resource-editor > .course-center-add-progress {
  margin-top: 0;
}

.course-center-manual-resource-editor > button[type="submit"] {
  justify-self: start;
}

.course-center-manual-resource-modal-backdrop {
  z-index: 260;
}

.course-center-manual-resource-modal {
  width: min(640px, 100%);
}

.course-center-resource-picker-back {
  margin: 0 0 10px;
}

.course-center-other-resource-editor {
  border: 0;
  padding: 0;
  background: transparent;
}

.course-center-manual-submit {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.course-center-manual-submit small {
  max-width: 420px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.4;
}

.course-center-draft-review {
  margin: 14px 0;
  padding: 14px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.course-center-draft-review > p {
  margin: 5px 0 12px;
  color: var(--muted);
}

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

.course-center-draft-grid span {
  min-width: 0;
  color: var(--muted);
  font-size: .82rem;
  overflow-wrap: anywhere;
}

.course-center-draft-grid b {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
}

.course-center-terms {
  display: flex !important;
  align-items: flex-start;
  gap: 8px !important;
  margin: 10px 0;
  color: var(--muted);
  font-size: .82rem;
}

.course-center-terms[hidden] {
  display: none !important;
}

.course-center-terms input[type="checkbox"],
.course-center-calendar-groups input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  min-width: 0;
  height: 18px;
  min-height: 0;
  margin: 2px 0 0;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--cyan);
}

.course-center-list {
  display: grid;
  gap: 12px;
  padding: 18px 22px 22px;
}

.course-center-empty {
  padding: 22px;
  margin: 0;
}

.course-center-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  overflow: hidden;
}

.course-center-card-head {
  width: 100%;
  gap: 12px;
  padding: 14px 16px 9px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.course-center-card-title {
  min-width: 0;
  flex: 1;
}

.course-center-card-title strong,
.course-center-card-title small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-center-card-title small {
  margin-top: 3px;
  color: var(--muted);
}

.course-center-state,
.course-center-source-status {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
}

.course-center-state.ready,
.course-center-source-status.ready,
.course-center-source-status.manual_snapshot {
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green);
}

.course-center-state.needs_attention,
.course-center-source-status.error,
.course-center-source-status.needs_authorization,
.course-center-source-status.needs_reauthorization,
.course-center-source-status.waiting_for_extension {
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  color: var(--amber);
}

.course-center-source-status.needs_review {
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  color: var(--amber);
}

.course-center-attention-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-left: 2px;
}

.course-center-manage-button {
  flex: 0 0 auto;
  min-width: 34px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  letter-spacing: 1px;
}

.course-center-manage-button:hover,
.course-center-manage-button:focus-visible {
  color: var(--text);
  background: var(--panel-2);
}

.course-center-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 13px;
}

.course-center-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-family: inherit;
  font-size: .7rem;
  cursor: pointer;
}

.course-center-chip:hover,
.course-center-chip:focus-visible {
  background: var(--panel-2);
  outline: none;
}

.course-center-chip i {
  font-style: normal;
}

.course-center-chip.ready {
  border-color: color-mix(in srgb, var(--green) 35%, var(--line));
  color: var(--green);
}

.course-center-chip.attention {
  border-color: color-mix(in srgb, var(--amber) 40%, var(--line));
  color: var(--amber);
}

/* The automatic rubric/schedule extraction is running for this course. */
.course-center-chip.loading {
  border-color: color-mix(in srgb, var(--cyan) 35%, var(--line));
  color: var(--cyan);
}

.course-center-chip-spinner {
  width: 11px;
  height: 11px;
  border-width: 2px;
}

/* Inside Course settings the chip row loses its old card padding. */
.course-center-manage-chips {
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 16px;
}

.course-center-detail {
  min-width: 0;
}

.course-center-settings-form {
  display: grid;
  gap: 16px;
}

/* Course settings entries are flat rows matching the course card; each opens
   its own dialog. */
.course-center-settings-list {
  display: grid;
  min-width: 0;
}

.course-center-setting-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.course-center-setting-row:hover,
.course-center-setting-row:focus-visible {
  background: color-mix(in srgb, var(--panel-2) 55%, transparent);
  outline: none;
}

.course-center-setting-chevron {
  flex: 0 0 auto;
  width: 14px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1;
  text-align: center;
}

.course-center-setting-row strong {
  flex: 0 0 auto;
  font-size: .82rem;
}

.course-center-setting-row small {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: .72rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-center-notification-types {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.course-center-notification-types legend,
.course-center-notes-field > span {
  margin-bottom: 8px;
  color: var(--text);
  font-size: .82rem;
  font-weight: 850;
}

.course-center-notification-types > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.course-center-notification-picker-form {
  display: grid;
  gap: 14px;
}

.course-center-notification-picker-form .course-center-notification-types > div {
  grid-template-columns: 1fr;
}

.course-center-notification-picker-form > button {
  justify-self: start;
}

.course-center-notification-types label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  cursor: pointer;
}

.course-center-notification-types label:has(input:checked) {
  border-color: color-mix(in srgb, var(--cyan) 45%, var(--line));
  background: color-mix(in srgb, var(--panel) 92%, var(--cyan) 8%);
}

.course-center-notification-types input {
  width: 17px;
  min-width: 17px;
  height: 17px;
  min-height: 17px;
  margin: 2px 0 0;
  accent-color: var(--cyan);
}

.course-center-notification-types label > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.course-center-notification-types strong {
  font-size: .8rem;
}

.course-center-notification-types small,
.course-center-notes-field small {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.35;
}

.course-center-notes-field {
  display: grid;
  gap: 5px;
}

.course-center-notes-field textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 11px;
  color: var(--text);
  background: var(--panel);
  font: inherit;
  line-height: 1.45;
}

.course-center-settings-form > button {
  justify-self: start;
}

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

.course-center-detail-grid section {
  padding: 12px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.course-center-detail-grid p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: .82rem;
}

.course-center-mode {
  max-width: 320px;
  margin: 14px 0;
}

.course-center-sources {
  margin-top: 14px;
}

.course-center-subhead {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.course-center-subhead > button,
.course-center-source-row > button {
  width: auto;
  min-width: 0;
}

.course-center-source-row {
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.course-center-source-row > span:first-child {
  flex: 1;
  min-width: 0;
}

.course-center-source-row strong,
.course-center-source-row small,
.course-center-source-row em {
  display: block;
}

.course-center-file-explanation {
  display: grid;
  gap: 3px;
  margin-top: 6px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--cyan) 24%, var(--line));
  border-radius: 9px;
  color: var(--text);
  background: color-mix(in srgb, var(--cyan) 7%, transparent);
  font-size: .75rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.course-center-file-explanation b {
  color: var(--cyan);
  font-size: .67rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.course-center-source-main {
  display: grid;
  gap: 2px;
}

.course-center-source-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.course-center-source-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-center-source-name .course-center-source-status {
  flex: 0 0 auto;
}

.course-center-source-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.course-center-source-icon-button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.course-center-source-icon-button:hover,
.course-center-source-icon-button:focus-visible {
  color: var(--text);
  border-color: color-mix(in srgb, var(--cyan) 45%, var(--line));
  background: var(--panel-2);
}

.course-center-source-icon-button.danger:hover,
.course-center-source-icon-button.danger:focus-visible {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
}

.course-center-source-icon-button span {
  font-size: 1.1rem;
  line-height: 1;
}

.course-center-source-row small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.course-center-source-row em {
  margin-top: 3px;
  color: var(--amber);
  font-size: .75rem;
  font-style: normal;
}

.course-center-source-form,
.course-center-calendar-preview {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.course-center-source-form {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.course-center-source-description {
  min-width: 0;
  max-width: 100%;
  margin-top: 12px;
}

.course-center-source-description textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--panel);
  resize: vertical;
}

.course-center-source-inline-status {
  min-height: 42px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted) !important;
  background: var(--panel);
  font-size: .78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.course-center-source-modal-backdrop {
  z-index: 250;
}

.course-center-source-modal {
  width: min(680px, 100%);
}

.course-center-source-inventory {
  display: grid;
  gap: 9px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.course-center-source-inventory > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.course-center-source-inventory > div:first-child strong {
  font-size: .8rem;
}

.course-center-source-inventory > div:first-child span {
  min-width: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  font-size: .7rem;
  font-weight: 850;
  text-align: center;
}

.course-center-source-inventory > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.course-center-source-inventory > div:last-child > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 5px 8px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel-2);
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-center-source-inventory > div:last-child b {
  flex: 0 0 auto;
  color: var(--text);
  font-size: .66rem;
  text-transform: uppercase;
}

.course-center-source-inventory > p,
.course-center-source-repeat-note {
  margin: 0;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.45;
}

.course-center-source-repeat-note {
  margin-top: 10px;
  text-align: center;
}

.course-center-source-modal .course-center-source-form {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.course-center-calendar-options-backdrop {
  z-index: 265;
}

.course-center-calendar-options-modal {
  width: min(460px, 100%);
}

.course-center-calendar-options-body {
  display: grid;
  gap: 14px;
}

.course-calendar-coverage {
  display: grid;
  gap: 3px;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: var(--panel-2);
}

.course-calendar-coverage strong {
  color: var(--text);
  font-size: 14px;
}

.course-calendar-coverage span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.course-calendar-coverage.is-complete {
  border-color: color-mix(in srgb, var(--green) 35%, var(--line));
  background: color-mix(in srgb, var(--green) 8%, var(--panel));
}

.course-calendar-coverage.is-partial,
.course-calendar-coverage.is-missing {
  border-color: color-mix(in srgb, var(--amber) 42%, var(--line));
  background: color-mix(in srgb, var(--amber) 9%, var(--panel));
}

.course-center-calendar-options-summary {
  display: grid;
  gap: 3px;
  min-width: 0;
}

/* Quick add lists every meeting with a checkbox, so Lec/Rec/Exam can be
   toggled without leaving the dialog. */
.course-center-calendar-picks {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.course-center-calendar-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  cursor: pointer;
}

.course-center-calendar-pick.is-disabled {
  opacity: .62;
  cursor: default;
}

.course-center-calendar-pick input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
}

.course-center-calendar-pick-text {
  display: grid;
  flex: 1 1 auto;
  gap: 1px;
  min-width: 0;
}

.course-center-calendar-pick-text strong,
.course-center-calendar-pick-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-center-calendar-pick-text small {
  color: var(--muted);
  font-size: 11px;
}

.course-center-calendar-pick > em {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.course-center-calendar-choose {
  justify-self: start;
}

.course-center-calendar-options-summary strong {
  font-size: 16px;
}

.course-center-calendar-options-summary span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-center-calendar-color-field {
  min-width: 0;
  margin: 0;
  padding: 11px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
}

.course-center-calendar-color-field legend,
.course-center-calendar-reminder-field > span {
  padding-inline: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.course-center-calendar-color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
}

.course-center-calendar-color {
  position: relative;
  width: 32px;
  height: 32px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--course-calendar-color);
  cursor: pointer;
}

.course-center-calendar-color:has(input[value="auto"]) {
  background: linear-gradient(90deg, #72a6ff 50%, #f5b84b 50%);
}

.course-center-calendar-color:has(input:checked) {
  border-color: var(--text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 25%, transparent);
}

.course-center-calendar-color input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.course-center-calendar-reminder-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.course-center-calendar-reminder-field select {
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--panel);
}

.course-center-calendar-options-body > button {
  width: 100%;
}

.course-center-source-block {
  border-top: 1px solid var(--line);
}

.course-center-source-retry-note {
  margin: 0 0 10px;
  padding: 9px 11px;
  border-left: 3px solid var(--amber);
  border-radius: 6px;
  color: var(--text);
  background: color-mix(in srgb, var(--amber) 7%, var(--panel));
  font-size: .76rem;
  line-height: 1.45;
}

.course-center-source-block .course-center-source-row {
  border-top: 0;
}

.course-center-auth-card {
  display: grid;
  gap: 12px;
  margin: 0 0 12px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 94%, var(--amber) 6%);
  overflow: hidden;
}

.course-center-auth-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
}

.course-center-auth-heading > span { font-size: .9rem; }
.course-center-auth-heading strong { font-size: .84rem; }
.course-center-auth-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.45;
}

.course-center-auth-consent {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--panel);
  line-height: 1.4;
}

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

.course-center-snapshot-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--panel);
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.course-center-snapshot-action:hover,
.course-center-snapshot-action:focus-visible {
  border-color: color-mix(in srgb, var(--cyan) 50%, var(--line));
}

.course-center-snapshot-action.recommended {
  border-color: color-mix(in srgb, var(--green) 45%, var(--line));
}

.course-center-snapshot-action[aria-expanded="true"] {
  background: color-mix(in srgb, var(--panel) 84%, var(--cyan) 16%);
}

.course-center-snapshot-hint {
  margin: 0;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.45;
}

.course-center-snapshot-form textarea {
  width: 100%;
  min-height: 180px;
  resize: vertical;
}

.course-center-snapshot-form .course-center-actions > button {
  min-height: 44px;
}

@media (max-width: 359px) {
  .course-center-snapshot-actions {
    grid-template-columns: 1fr;
  }
}

.course-center-auth-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.course-center-auth-method {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  min-height: 94px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--panel);
  text-align: left;
  cursor: pointer;
}

.course-center-auth-method:hover,
.course-center-auth-method:focus-visible {
  border-color: color-mix(in srgb, var(--cyan) 50%, var(--line));
}

.course-center-auth-method.recommended {
  border-color: color-mix(in srgb, var(--green) 45%, var(--line));
}

.course-center-auth-method strong { font-size: .76rem; line-height: 1.3; }
.course-center-auth-method strong em {
  display: inline-block;
  margin-left: 3px;
  color: var(--green);
  font-size: .6rem;
  font-style: normal;
  text-transform: uppercase;
}
.course-center-auth-method > span { color: var(--muted); font-size: .68rem; line-height: 1.4; }

.course-center-auth-current,
.course-center-auth-current > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.course-center-auth-current {
  margin: 0;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--text);
  background: color-mix(in srgb, var(--green) 8%, var(--panel));
  font-size: .74rem;
}

.course-center-auth-current > span { align-items: flex-start; flex-direction: column; gap: 1px; }
.course-center-auth-current small { color: var(--muted); font-size: .68rem; }

.course-center-pairing,
.course-center-remote-options,
.course-center-page-picker,
.course-center-attachments {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel);
  min-width: 0;
}

.course-center-pairing > span { display: grid; justify-items: start; gap: 3px; }
.course-center-pairing code {
  padding: 4px 8px;
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: .12em;
}
.course-center-pairing small { color: var(--muted); font-size: .68rem; }
.course-center-pairing ol { margin: 0; padding-left: 20px; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.course-center-pairing a { color: var(--cyan); }

.course-center-remote-policy { display: grid; gap: 3px; }
.course-center-remote-policy strong { font-size: .8rem; }
.course-center-remote-policy span { color: var(--muted); font-size: .7rem; line-height: 1.45; }
.course-center-remote-policy code { color: var(--text); overflow-wrap: anywhere; }
.course-center-remote-options > .course-center-error { margin: 0; }

.course-center-auth-host-form {
  display: grid;
  gap: 5px;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
}
.course-center-auth-host-form label { display: grid; gap: 5px; }
.course-center-auth-host-form label > span { color: var(--text); font-size: .74rem; font-weight: 750; }
.course-center-auth-host-form label > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.course-center-auth-host-form input {
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  background: var(--panel-2);
}
.course-center-auth-host-form small { color: var(--muted); font-size: .67rem; line-height: 1.4; }
.course-center-auth-host-form code { color: var(--text); overflow-wrap: anywhere; }

.course-center-auth-sessions { display: grid; gap: 7px; }
.course-center-auth-sessions > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
}
.course-center-auth-sessions > div > span:first-child { display: grid; gap: 2px; min-width: 0; }
.course-center-auth-sessions > div > span:last-child { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.course-center-auth-sessions strong { font-size: .75rem; overflow-wrap: anywhere; }
.course-center-auth-sessions small { color: var(--muted); font-size: .67rem; }

.course-center-page-picker > strong,
.course-center-attachments > strong { font-size: .78rem; }
.course-center-page-picker > strong small { margin-left: 5px; color: var(--muted); font-weight: 500; }
.course-center-page-picker > div { display: grid; gap: 5px; max-height: 190px; overflow-y: auto; }
.course-center-page-picker label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  font-size: .71rem;
  overflow-wrap: anywhere;
}
.course-center-page-picker input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--cyan); }
.course-center-page-picker > button { justify-self: start; }

.course-center-attachments a {
  display: grid;
  gap: 2px;
  color: var(--cyan);
  font-size: .73rem;
  overflow-wrap: anywhere;
}
.course-center-attachments small { color: var(--muted); font-size: .66rem; }

.course-center-suggestion {
  margin: 0 0 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--amber) 8%, var(--panel));
}

.course-center-suggestion p {
  margin: 5px 0;
}

.course-center-suggestion small {
  color: var(--muted);
}

.course-center-suggestion-rubric {
  display: grid;
  margin: 10px 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--amber) 28%, var(--line));
  border-radius: 9px;
}

.course-center-suggestion-rubric > span {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 10px;
  border-top: 1px solid var(--line-soft);
}

.course-center-suggestion-rubric > span:first-child {
  border-top: 0;
}

.course-center-suggestion-rubric b,
.course-center-suggestion-rubric strong {
  font-size: .78rem;
}

.course-center-suggestion-action-note {
  margin: 9px 0 0 !important;
  color: var(--text);
  font-size: .76rem;
  line-height: 1.45;
}

.course-center-source-form .course-center-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.course-center-actions {
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.course-center-suggestion .course-center-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

html[data-a1-skin] .course-center-suggestion .course-center-actions > button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding-inline: 8px;
  font-size: .82rem;
  text-align: center;
}

html[data-a1-skin] .course-center-suggestion .course-center-accept-suggestion {
  background: var(--a1-ok-fg, var(--green));
  border-color: var(--a1-ok-fg, var(--green));
  color: var(--a1-on-accent, #fff);
}

html[data-a1-skin] .course-center-suggestion .course-center-accept-suggestion:hover:not(:disabled) {
  background: var(--a1-ok-fg, var(--green));
  filter: brightness(1.08);
}

.course-center-danger-actions {
  display: grid;
  gap: 9px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.course-center-danger-actions > button {
  width: 100%;
  min-width: 0;
}

.course-center-calendar-preview > p {
  color: var(--muted);
  font-size: .82rem;
}

.course-center-calendar-groups {
  display: grid;
  gap: 8px;
}

.course-center-calendar-group {
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}

.course-center-calendar-groups label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 0;
  border-radius: 0;
}

.course-center-calendar-groups label > span {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.course-center-calendar-groups b,
.course-center-calendar-groups small {
  display: block;
}

.course-center-calendar-groups small {
  color: var(--muted);
}

.course-center-calendar-group ul {
  list-style: none;
  margin: 0;
  padding: 0 10px 9px 37px;
}

.course-center-calendar-group li {
  padding: 6px 0;
  border-top: 1px solid var(--line-soft);
  font-size: .78rem;
}

.course-center-calendar-group li span,
.course-center-calendar-group li small {
  display: block;
}

.course-center-calendar-group > p {
  margin: 0;
  padding: 0 10px 10px 37px;
  font-size: .78rem;
}

.course-center-info-content,
.course-center-schedule {
  display: grid;
  gap: 16px;
}

.course-center-info-summary {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
}

.course-center-info-footnote {
  margin: 0;
  font-size: .78rem;
}

.course-center-info-empty {
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  text-align: center;
}

.course-center-info-empty p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: .84rem;
}

.course-center-rubric-list {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.course-center-rubric-list > div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px;
  border-top: 1px solid var(--line-soft);
}

.course-center-rubric-list > div:first-child {
  border-top: 0;
}

.course-center-rubric-list strong {
  flex: 0 0 auto;
}

.course-center-special-rules {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--green) 38%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--green) 8%, var(--panel));
}

.course-center-special-rules > span {
  color: var(--green);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.course-center-special-rules > div {
  display: grid;
  gap: 3px;
}

.course-center-special-rules strong {
  font-size: .86rem;
}

.course-center-special-rules p {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}

.course-center-schedule-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 90px;
  color: var(--muted);
}

.course-center-schedule-groups,
.course-center-schedule-group {
  display: grid;
  gap: 9px;
}

.course-center-schedule-group h4 {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.course-center-schedule-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
}

.course-center-schedule-item.is-selected {
  border-color: color-mix(in srgb, var(--cyan) 65%, var(--line));
  box-shadow: inset 3px 0 0 var(--cyan);
}

.course-center-schedule-kind {
  display: grid;
  place-items: center;
  min-height: 30px;
  border-radius: 8px;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 11%, transparent);
  font-size: .7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.course-center-schedule-item > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.course-center-schedule-item > div > span,
.course-center-schedule-item > div > small {
  color: var(--muted);
  font-size: .76rem;
  overflow-wrap: anywhere;
}

.course-center-calendar-note {
  color: var(--muted);
  font-size: .76rem;
}

.course-center-customize {
  display: grid;
  gap: 7px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.course-center-customize > label {
  font-size: .84rem;
  font-weight: 800;
}

.course-center-customize > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.course-center-customize input {
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--panel-2);
}

.course-center-customize > small {
  color: var(--muted);
  font-size: .74rem;
}

.course-center-customize-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--cyan) 38%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
}

.course-center-customize-result p {
  margin: 0;
  font-size: .84rem;
}

.course-center-knowledge-correction {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.course-center-correction-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.course-center-correction-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.course-center-correction-head strong {
  font-size: .88rem;
}

.course-center-correction-head div span {
  color: var(--muted);
  font-size: .76rem;
}

.course-center-correction-head > span {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--cyan) 38%, var(--line));
  border-radius: 7px;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 8%, var(--panel));
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .05em;
}

.course-center-knowledge-correction form {
  display: grid;
  gap: 8px;
}

.course-center-knowledge-correction textarea {
  width: 100%;
  min-width: 0;
  min-height: 78px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  background: var(--panel-2);
  font: inherit;
  font-size: .84rem;
  line-height: 1.45;
  scroll-margin-block: 18px;
}

.course-center-knowledge-correction textarea:focus {
  border-color: color-mix(in srgb, var(--cyan) 60%, var(--line));
  outline: 3px solid color-mix(in srgb, var(--cyan) 12%, transparent);
}

.course-center-knowledge-correction form > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.course-center-knowledge-correction form small {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.4;
}

.course-center-correction-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .78rem;
}

.course-center-correction-preview {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--cyan) 42%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--cyan) 6%, var(--panel));
}

.course-center-correction-preview > header {
  display: grid;
  gap: 3px;
}

.course-center-correction-preview > header span {
  color: var(--cyan);
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.course-center-correction-preview > header strong {
  font-size: .84rem;
  line-height: 1.45;
}

.course-center-correction-rubric {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--panel);
}

.course-center-correction-rubric > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 8px 10px;
  border-top: 1px solid var(--line-soft);
  font-size: .78rem;
}

.course-center-correction-rubric > div:first-child {
  border-top: 0;
}

.course-center-correction-rubric span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.course-center-correction-rubric strong {
  flex: 0 0 auto;
}

.course-center-correction-policy,
.course-center-correction-calendar-note {
  margin: 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.course-center-correction-schedule {
  display: grid;
  gap: 10px;
}

.course-center-correction-schedule section {
  display: grid;
  gap: 6px;
}

.course-center-correction-schedule h5 {
  margin: 0;
  color: var(--muted);
  font-size: .66rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.course-center-correction-schedule section > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--panel);
}

.course-center-correction-schedule section > div > span {
  display: grid;
  min-height: 27px;
  place-items: center;
  border-radius: 7px;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  font-size: .62rem;
  font-weight: 850;
  text-transform: uppercase;
}

.course-center-correction-schedule p {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin: 0;
}

.course-center-correction-schedule strong,
.course-center-correction-schedule small {
  overflow-wrap: anywhere;
}

.course-center-correction-schedule strong {
  font-size: .78rem;
}

.course-center-correction-schedule small {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.4;
}

.course-center-correction-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

body:has(.course-center-modal-backdrop) {
  overflow: hidden;
}

.learn-tab-unread {
  display: inline-flex;
  min-width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: .62rem;
  line-height: 1;
  vertical-align: middle;
}

.home-notification-controls {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 9px;
  background: var(--panel-2);
}

.home-notification-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  padding: 5px 8px;
  font-size: .74rem;
  cursor: pointer;
}

.home-notification-controls button.is-danger {
  color: color-mix(in srgb, var(--red) 82%, var(--muted));
}

.home-notification-controls button.is-danger:hover,
.home-notification-controls button.is-danger:focus-visible {
  color: var(--red);
  outline: none;
  background: color-mix(in srgb, var(--red) 10%, transparent);
}

.home-notification-controls .home-system-icon {
  width: 14px;
  height: 14px;
}

.home-notification-controls button.active {
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
}

.home-notification-more {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.home-notification-more > summary {
  display: inline-grid;
  width: 32px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 1;
  list-style: none;
}

.home-notification-more > summary::-webkit-details-marker {
  display: none;
}

.home-notification-more > summary:hover,
.home-notification-more > summary:focus-visible,
.home-notification-more[open] > summary {
  color: var(--text);
  background: var(--panel);
  outline: none;
}

.home-notification-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 12;
  display: grid;
  width: max-content;
  min-width: 156px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 16px 38px rgb(0 0 0 / 24%);
}

.home-notification-controls .home-notification-more-menu button {
  width: 100%;
  justify-content: flex-start;
  padding: 9px 10px;
  text-align: left;
}

.home-notification-course-controls {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.home-notification-course-controls label {
  display: grid;
  gap: 6px;
}

.home-notification-course-controls label span,
.home-notification-course-controls > strong,
.home-notification-course-controls small {
  color: var(--muted);
  font-size: .78rem;
}

.home-notification-course-controls select {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  padding: 8px;
}

.home-notification-course-controls small {
  display: block;
  margin-top: 7px;
}

.home-notification-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.home-notification-modal-actions > * {
  min-width: 0;
}

.home-notification-modal-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--red);
}

@media (max-width: 520px) {
  .home-notification-modal-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  html[data-a1-skin] .home-notification-modal-actions > .primary-button,
  html[data-a1-skin] .home-notification-modal-actions > .ghost-button {
    width: 100%;
    max-width: 100%;
    padding-inline: 10px;
  }

  /* With the usual View result / Details / Clear trio, keep the primary
     result action readable and place the two secondary actions beneath it. */
  .home-notification-modal-actions > :first-child:nth-last-child(3) {
    grid-column: 1 / -1;
  }

  .home-notification-modal-actions > :only-child {
    grid-column: 2;
  }
}

@media (max-width: 720px) {
  .course-center-provider-statuses {
    gap: 6px;
    padding-inline: 12px;
  }

  .course-center-provider-statuses.provider-count-4 {
    padding-inline: 8px;
    gap: 4px;
  }

  .provider-count-4 .course-center-provider-status {
    position: relative;
    justify-content: center;
    padding-inline: 3px;
    gap: 3px;
  }

  .provider-count-4 .course-center-provider-status > span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }

  .provider-count-4 .course-center-provider-status i {
    position: absolute;
    top: 5px;
    right: 4px;
    width: 6px;
    height: 6px;
  }

  .course-center-provider-statuses.provider-count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .course-center-provider-status {
    gap: 5px;
    padding: 8px 7px;
  }

  .course-center-provider-status > span {
    font-size: .65rem;
  }

  .course-center-provider-status i {
    width: 8px;
    height: 8px;
  }

  .learn-provider-hidden-row {
    padding-right: 12px;
  }

  .learn-provider-action-menu {
    right: 12px;
    width: min(210px, calc(100% - 24px));
  }

  .course-center-head {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-inline: 12px;
  }

  .course-center-fields,
  .course-center-add-choices,
  .course-center-manual-resource-picker,
  .course-center-manual-resource-editor-grid,
  .course-center-notification-types > div,
  .course-center-source-form .course-center-fields,
  .course-center-draft-grid,
  .course-center-detail-grid {
    grid-template-columns: 1fr;
  }

  .course-center-manual-resources-head,
  .course-center-manual-submit {
    align-items: stretch;
    flex-direction: column;
  }

  .course-center-manual-resources-head > button,
  .course-center-manual-submit > button {
    width: 100%;
  }

  .course-center-auth-methods {
    grid-template-columns: 1fr;
  }

  .course-center-auth-method {
    min-height: 0;
  }

  .course-center-auth-current,
  .course-center-auth-sessions > div {
    align-items: flex-start;
    flex-direction: column;
  }

  .course-center-auth-sessions > div > span:last-child {
    width: 100%;
    flex-wrap: wrap;
  }

  .course-center-auth-host-form label > div {
    grid-template-columns: 1fr;
  }

  .home-tab-panel-head {
    align-items: flex-start;
  }

  .home-notification-controls {
    flex-wrap: nowrap;
  }

  .course-center-modal-backdrop {
    place-items: stretch;
    padding: 0;
  }

  .course-center-settings-modal-backdrop,
  .course-center-secondary-modal-backdrop {
    place-items: center;
    padding: 12px;
  }

  .course-center-modal {
    width: 100%;
    height: var(--app-live-viewport-height, 100dvh);
    max-height: var(--app-live-viewport-height, 100dvh);
    border: 0;
    border-radius: 0;
  }

  .course-center-settings-modal,
  .course-center-secondary-modal {
    width: 100%;
    height: auto;
    max-height: calc(var(--app-live-viewport-height, 100dvh) - 24px);
    border: 1px solid var(--line);
    border-radius: 16px;
  }

  .course-center-settings-modal .course-center-modal-head,
  .course-center-secondary-modal .course-center-modal-head {
    padding-top: 12px;
  }

  .course-center-modal-head {
    padding: calc(12px + var(--a1-safe-top)) 14px 12px;
  }

  .course-center-modal-body {
    padding: 14px;
    scroll-padding-block: 16px;
  }

  .course-center-info-modal .course-center-modal-body {
    /* The visual viewport already excludes the iOS keyboard. This extra
       breathing room keeps the focused correction editor away from the
       keyboard/accessory bar while the nested modal body scrolls. */
    scroll-padding-bottom: 28px;
  }

  .course-center-manual-resource-editor {
    padding: 11px;
  }

  .course-center-manual-resource-editor input,
  .course-center-manual-resource-editor textarea,
  .course-center-source-form input,
  .course-center-source-form textarea,
  .course-center-source-form select {
    font-size: 16px;
  }

  .course-center-calendar-reminder-field select {
    font-size: 16px;
  }

  .course-center-schedule-item {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .course-center-schedule-item > button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .course-center-customize > div,
  .course-center-customize-result {
    grid-template-columns: 1fr;
  }

  .course-center-customize-result {
    display: grid;
  }

  .course-center-knowledge-correction form > div {
    align-items: stretch;
    flex-direction: column;
  }

  .course-center-knowledge-correction form > div button,
  .course-center-correction-actions button {
    min-height: 42px;
  }

  .course-center-correction-actions {
    display: grid;
    grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  }
}

/* ---------------------------------------------------------------------------
   Multi-course (3+) comparison: the same flat table as the two-course view.

   Each metric used to be a bordered card in a masonry grid, so a value sat in
   a box inside a box. Now a metric is a labelled band separated by a hairline,
   and a course is identified by an accent edge instead of a filled card.
   Scoped to .comparison-multi-course-visual because these class names are
   shared with the two-course view, which is already flat.
   --------------------------------------------------------------------------- */

/* Prerequisite state reads as coloured text, matching the two-course view and
   the Progress tree, rather than keeping the one pill this view still had. */
.comparison-multi-course-visual .comparison-prereq-item span {
  width: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--green);
  font-size: 11px;
  font-weight: 850;
}

/* ---------------------------------------------------------------------------
   Learn → Courses: Notification panel.

   "N courses ready" sits beside the heading word and opens the course list in a
   dialog. Expanded in place it pushed the panel around, and the list is long
   enough that it belongs over the page.
   --------------------------------------------------------------------------- */

.learn-course-feed-head {
  flex-wrap: wrap;
}

.learn-course-feed-heading {
  flex: 1 1 220px;
}

.learn-course-feed-heading h4 {
  flex-wrap: wrap;
  min-width: 0;
}

/* Sweep feedback is a line under the head, not a subtitle inside it, so it
   cannot knock the buttons out of line with the heading. */
.learn-course-feed-sweep {
  margin: -4px 0 0;
  padding: 0 18px 8px;
  color: var(--muted);
  font-size: 12px;
}

.learn-course-feed-picker {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
}

.academic-assistant-status-button {
  max-width: 100%;
  overflow: hidden;
  font-family: inherit;
  text-overflow: ellipsis;
  cursor: pointer;
}

.academic-assistant-status-button:hover,
.academic-assistant-status-button:focus-visible {
  border-color: rgba(53, 212, 255, 0.45);
  background: rgba(53, 212, 255, 0.09);
  outline: none;
}

.learn-course-feed-head-actions {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

@media (max-width: 640px) {
  .learn-course-feed-head-actions {
    flex: 1 1 100%;
  }

  /* `.compact-action-button` is 108px wide by default and stretches in a
     narrow row; here it is one of three controls on a single line. */
  .learn-course-feed-head-actions .compact-action-button {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
  }
}

/* The course dialog reuses the shared list, which is styled for a panel. */
.learn-course-modal-body .academic-assistant-course-list {
  padding: 10px 12px 14px;
}

/* The HW Dashboard header carries the same control. `.learn-init-status` is a
   full-width strip everywhere else, so inline it has to give up its padding and
   its claim on the row, and truncate rather than push the refresh button out. */
.learn-init-status.learn-init-status-inline {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0;
}

.learn-init-status-inline .academic-assistant-courses {
  min-width: 0;
  max-width: 100%;
}

.learn-init-status-inline > .academic-assistant-courses > summary.academic-assistant-status {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-init-status-inline .academic-assistant-course-list {
  max-height: 320px;
  overflow-y: auto;
}

/* Below 760px the header wraps and the control drops to its own row (order: 3).
   The heading must give up its max-content basis, or it claims the whole first
   line on its own and strands the refresh button on a line of its own. */
@media (max-width: 980px) {
  .learn-homework-header .learn-homework-heading {
    flex: 1 1 0;
  }
}

/* --- one course's notifications ------------------------------------------ */

.learn-course-note-list {
  display: grid;
  padding: 6px 0;
}

/* One line per notification: "[New Homework] Problem Set 1", then when. The
   text behind it is one level deeper, so this stays scannable. */
.learn-course-note {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  border-left: 2px solid transparent;
  color: var(--text);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.learn-course-note:hover,
.learn-course-note:focus-visible {
  background: rgba(127, 127, 127, 0.05);
  outline: none;
}

.learn-course-note.is-new {
  border-left-color: var(--cyan);
}

.learn-course-note-tag {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.learn-course-note.kind-assignment_new .learn-course-note-tag {
  color: var(--cyan);
}

.learn-course-note.kind-announcement .learn-course-note-tag {
  color: var(--amber);
}

.learn-course-note.kind-grade_posted .learn-course-note-tag {
  color: var(--green);
}

.learn-course-note-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-course-note-new {
  flex: 0 0 auto;
  color: var(--cyan);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.learn-course-note-time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

/* --- the text behind one notification ------------------------------------ */

/* A long assignment title used to grow the header until it pushed × off the
   dialog, which read as "there is no way out of here". The title truncates, and
   back and close never shrink. */
/* Scoped to the title block: as `.learn-course-modal-head span` this also hit
   the ••• wrapper, whose `overflow: hidden` clipped the dropdown out of the
   document — visible in getBoundingClientRect, absent from hit testing. */
.learn-course-modal-head > div > strong,
.learn-course-modal-head > div > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-course-modal-back {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 10px 0 7px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(127, 127, 127, 0.05);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.learn-course-modal-back .course-feed-system-icon {
  width: 16px;
  height: 16px;
}

.learn-course-modal-back > span {
  font-size: 12px;
  line-height: 1;
}

.learn-course-modal-back:hover,
.learn-course-modal-back:focus-visible {
  border-color: rgba(53, 212, 255, 0.45);
  color: var(--text);
  background: rgba(53, 212, 255, 0.09);
  outline: none;
}

.learn-course-modal-seen {
  flex: 0 0 auto;
}

.learn-course-note-detail {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.learn-course-note-summary {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

/* Course text arrives as plain text with its own line breaks. */
.learn-course-note-text {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The handout reads as a link, on its own line above the actions, with the PDF
   itself inline below them. Served from our own origin, so the frame needs no
   Canvas session. */
.learn-course-note-files {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
}

.learn-course-note-file {
  max-width: 100%;
  overflow: hidden;
  color: var(--cyan);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-course-note-file-locked {
  color: var(--muted);
  font-size: 13px;
}

.learn-course-note-pdf {
  width: 100%;
  height: min(62vh, 560px);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--a1-sw-surface, #0c111a);
}

.learn-course-note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.learn-course-note-actions:empty {
  display: none;
}

.learn-course-note-actions .compact-action-button {
  text-decoration: none;
}

/* --- source initial, replacing a "Gradescope ·" metadata line ------------- */

.course-source-initial {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-right: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.course-source-initial.is-gradescope {
  border-color: rgba(73, 209, 125, 0.4);
  color: var(--green);
}

.course-source-initial.is-canvas {
  border-color: rgba(53, 212, 255, 0.4);
  color: var(--cyan);
}

.homework-course-grade-header h4 .course-source-initial {
  margin-right: 0;
}

.learn-homework-course-clear {
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
}

/* ---------------------------------------------------------------------------
   Learn → Grades: one line per course, one line per assignment.

   The table and the phone card deck said the same thing twice, and both spent
   more room on chrome than on the two numbers a student reads: the score and
   when it was due. Everything below is rows and text.
   --------------------------------------------------------------------------- */

/* The registry above the list runs the full width of the tab rather than
   sitting in an inset box that its own contents overflow. */
#learn-init-status-grades {
  padding: 0 0 10px;
}

#learn-init-status-grades .academic-assistant-courses {
  margin: 0;
}

#learn-init-status-grades .academic-assistant-course-list {
  max-height: min(56vh, 460px);
  overflow-y: auto;
}

/* One box on one line: left aligned left, middle centred, right aligned right. */
.homework-grade-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 4px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(127, 127, 127, 0.04);
}

.homework-grade-filters > :nth-child(1) {
  justify-self: start;
}

.homework-grade-filters > :nth-child(2) {
  justify-self: center;
}

.homework-grade-filters > :nth-child(3) {
  justify-self: end;
}

.homework-grade-filters:empty {
  display: none;
}

/* Sized off the "N courses initialized" pill above it, so the two controls read
   as the same weight of thing. */
.homework-grade-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 26px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.homework-grade-filter:has(input:checked) {
  color: var(--text);
}

.homework-grade-filter input {
  width: 11px;
  height: 11px;
  margin: 0;
  accent-color: var(--cyan);
  cursor: pointer;
}

/* --- the course line ------------------------------------------------------ */

.homework-course-grade-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
}

.homework-course-grade-header h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
  font-size: 14px;
}

/* The course name truncates rather than wrapping: one line per course. */
.homework-course-grade-header h4 > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Icon buttons, matching the eye in the course control above the list. */
.homework-course-hide-button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(127, 127, 127, 0.05);
  cursor: pointer;
}

.homework-course-hide-button svg {
  width: 15px;
  height: 15px;
}

.homework-course-hide-button:hover,
.homework-course-hide-button:focus-visible {
  border-color: rgba(53, 212, 255, 0.45);
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.09);
  outline: none;
}

/* --- the assignment line -------------------------------------------------- */

.homework-course-grade-details {
  display: grid;
  padding: 2px 12px 8px;
}

.homework-grade-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto auto 26px;
  align-items: center;
  gap: 4px 12px;
  padding: 7px 0;
  border-top: 1px solid var(--line-soft);
}

.homework-grade-row-chevron {
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}

.homework-grade-row-title {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homework-grade-row-title a {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
  .homework-grade-row-title a:hover{
    text-decoration: underline;
  }
}

/* Where the due date used to sit, at the size the date used to be. */
.homework-grade-row-points {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.homework-grade-row-score {
  justify-content: flex-end;
  min-width: 0;
  white-space: nowrap;
}

.homework-grade-row-score em {
  margin-left: 5px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.homework-grade-row-score.is-plain {
  color: var(--muted);
  font-size: 12px;
}

.homework-grade-row-action {
  display: inline-grid;
  place-items: center;
  justify-self: end;
}

.homework-grade-row .homework-grade-detail-button {
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
}

.homework-grade-row .homework-grade-detail-button svg {
  width: 14px;
  height: 14px;
}

/* Two lines at most on a phone: the name, then the numbers under it. */
/* Two lines at most on a phone: the name, then the numbers under it, with the
   eye still pinned to the right. */
@media (max-width: 620px) {
  .homework-grade-row {
    grid-template-columns: 14px minmax(0, 1fr) auto 26px;
  }

  .homework-grade-row-points {
    grid-column: 2;
    grid-row: 2;
    font-size: 11px;
  }

  .homework-grade-row-score {
    grid-column: 3;
    grid-row: 2;
  }

  .homework-grade-row-action {
    grid-column: 4;
    grid-row: 1 / span 2;
  }
}

/* The label is a flex row (state dot, source initial, name), so the name needs
   its own box to ellipsize in — `text-overflow` never applies to a flex parent. */
.academic-assistant-course-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- shared course dialog + modal ••• menu -------------------------------- */

/* All three "N courses …" pills open the same dialog. It is a sibling of the
   panels, so it needs to sit above them. */
.learn-course-dialog-host {
  position: fixed;
  inset: 0;
  z-index: 300;
}

.learn-course-modal-menu-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.learn-course-modal-menu-button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(127, 127, 127, 0.05);
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 1;
  cursor: pointer;
}

.learn-course-modal-menu-button:hover,
.learn-course-modal-menu-button:focus-visible {
  border-color: rgba(53, 212, 255, 0.45);
  color: var(--text);
  background: rgba(53, 212, 255, 0.09);
  outline: none;
}

.learn-course-modal-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 2;
  display: grid;
  min-width: 150px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel, #121a26);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.learn-course-modal-menu button {
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}

.learn-course-modal-menu button:hover:not(:disabled),
.learn-course-modal-menu button:focus-visible {
  background: rgba(53, 212, 255, 0.1);
  outline: none;
}

.learn-course-modal-menu button:disabled {
  color: var(--muted);
  cursor: default;
}

/* --- Notification head: one line, one height ------------------------------ */

/* The heading, the pill and the two buttons share a row at every width, all the
   same height — they used to wrap onto a second line on a phone. */
.learn-course-feed-head {
  flex-wrap: nowrap;
  gap: 8px;
}

.learn-course-feed-heading {
  flex: 1 1 auto;
  gap: 8px;
}

.learn-course-feed-heading h4 {
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
}

.learn-course-feed-head .academic-assistant-status-button,
.learn-course-feed-head .refresh-icon-button {
  min-height: 30px;
  height: 30px;
}

.learn-course-feed-head-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 6px;
}

.learn-course-feed-seen-all {
  margin-top: 10px;
}

@media (max-width: 640px) {
  .learn-course-feed-head-actions {
    flex: 0 0 auto;
  }

  /* The pill is the only thing here that may shrink. */
  .learn-course-feed-heading h4 {
    font-size: 14px;
  }

  .learn-course-feed-picker {
    display: inline-flex;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  /* Every link of the chain must be allowed to shrink, or the pill keeps its
     max-content width and slides under the refresh/bell buttons. The label
     span ellipsizes; the dot and the "N hidden" note keep their size. */
  .learn-course-feed-head .academic-assistant-status-button {
    min-width: 0;
    max-width: 100%;
  }

  .learn-course-feed-head .academic-assistant-hidden-count {
    flex: none;
  }
}

/* The HW Dashboard pill sits inside its heading, level with the title. */
.learn-homework-heading .learn-init-status-inline {
  flex: 0 1 auto;
}

.learn-homework-heading .academic-assistant-status-button {
  min-height: 30px;
  height: 30px;
}

/* ---------------------------------------------------------------------------
   Learn → Courses: flat panels.

   Both panels were a card, holding a bar, holding bordered rows, holding
   bordered cards. The heading and a hairline are enough structure; everything
   below is rows.
   --------------------------------------------------------------------------- */

/* Two panels, two cards — the flattening below is about what is *inside* them:
   a card holding a bar holding bordered rows holding bordered cards was three
   frames too many. */
.learn-course-feed {
  margin-bottom: 14px;
}

/* Course rows: separated by a hairline, not boxed individually. */
.learn-course-feed-courses {
  gap: 0;
  padding: 0;
}

.learn-course-entry {
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: none;
}

.learn-course-entry:last-child {
  border-bottom: 0;
}

.learn-course-entry-head {
  padding-right: 2px;
  padding-left: 2px;
}

.learn-course-feed-error,
.learn-course-feed-empty,
.learn-course-feed-sweep,
.learn-course-feed-settings,
.learn-course-feed-backfill {
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0;
}

/* HW Dashboard: the same, one course per band. */
.learn-homework-course-map {
  gap: 0;
}

.learn-homework-course-card {
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: none;
}

.learn-homework-course-card:last-child {
  border-bottom: 0;
}

.learn-homework-course-toggle {
  padding-right: 2px;
  padding-left: 2px;
}

.learn-homework-assignment-list {
  padding-left: 26px;
}

.learn-homework-assignment-card {
  border: 0;
  border-radius: 0;
  background: none;
}

.learn-homework-assignment-card + .learn-homework-assignment-card {
  border-top: 1px solid var(--line-soft);
}

/* ---------------------------------------------------------------------------
   Learn → Courses: HW Dashboard reads like Notification.

   The two panels sit on top of each other and were built apart: Notification
   was a plain row ending in a "›", HW Dashboard a cyan circled "▸" leading a
   two-line label. One surface, one row shape.
   --------------------------------------------------------------------------- */

/* Same row as .learn-course-entry-head: a name, whatever counts apply, then the
   chevron. The whole row toggles, so it takes the pointer and the hover wash. */
.learn-homework-course-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 2px;
  background: none;
  cursor: pointer;
  user-select: none;
}

@media (hover: hover) {
  .learn-homework-course-header:hover{
    background: rgba(255, 255, 255, 0.03);
  }
}

/* Takes the slack itself rather than leaning on margin-left:auto further along
   the row, which the 640px block resets. */
.learn-homework-course-header strong {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hide claims the slack, so the badge and chevron stay pinned right. */
.learn-homework-course-hide {
  flex: 0 0 auto;
  margin-left: auto;
}

.learn-homework-course-todo-badge {
  flex: 0 0 auto;
  margin-right: 0;
}

/* The "›" from Notification, turned down when the course is open — the glyph
   and its size are shared, only the rotation says "expanded". */
.learn-homework-course-open {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  transition: transform 120ms ease;
}

.learn-homework-course-card:not(.collapsed) .learn-homework-course-open {
  transform: rotate(90deg);
}

/* Notification's heading now takes its size from HW Dashboard's <h3>
   (.panel-header h3: 16px, 15px under 760px) rather than sitting a step below. */
.learn-course-feed-heading h4 {
  font-size: 16px;
}

@media (max-width: 980px) {
  .learn-course-feed-heading h4 {
    font-size: 15px;
  }

  /* This used to give the pill its own full-width line (flex: 1 0 100%), but
     the later one-line header pass pinned the h4 to flex-wrap: nowrap — under
     which "its own line" cannot exist, so the unshrinkable pill just slid
     under the refresh/bell buttons. Same line, shrink and ellipsize instead. */
  .learn-course-feed-heading h4 .learn-course-feed-picker {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  /* "N courses ready" stays on the title's line and truncates, instead of
     dropping to a full-width row of its own. The pill lives *inside*
     .learn-homework-heading, so that is the flex line that must not wrap. */
  .learn-homework-header {
    flex-wrap: nowrap;
  }

  .learn-homework-header .learn-homework-heading {
    flex-wrap: nowrap;
  }

  .learn-init-status-inline {
    order: 0;
    width: auto;
  }
}

/* --- one assignment: a title you can open, and a "⋯" for the rest ---------- */

/* Two columns now the leading chevron is gone, and a shorter row. */
.learn-homework-assignment-card {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 38px;
  padding: 5px 2px;
}

.learn-homework-assignment-open {
  color: inherit;
  text-decoration: none;
}

.learn-homework-assignment-open:hover,
.learn-homework-assignment-open:focus-visible {
  text-decoration: underline;
}

.learn-homework-assignment-actions {
  gap: 6px;
}

.learn-homework-assignment-menu {
  position: relative;
  flex: 0 0 auto;
  z-index: 60;
}

.learn-homework-assignment-menu summary {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.learn-homework-assignment-menu summary::-webkit-details-marker {
  display: none;
}

.learn-homework-assignment-menu summary:hover,
.learn-homework-assignment-menu[open] summary {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.learn-homework-assignment-menu-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  gap: 2px;
  width: max-content;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--a1-sw-surface, rgba(12, 18, 28, 0.98));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}

.learn-homework-assignment-menu-popover button {
  display: grid;
  gap: 1px;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.learn-homework-assignment-menu-popover button:hover,
.learn-homework-assignment-menu-popover button:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

.learn-homework-assignment-menu-popover strong {
  font-size: 12.5px;
  font-weight: 850;
}

.learn-homework-assignment-menu-popover span {
  color: var(--muted);
  font-size: 11px;
}

/* The last rows would open their menu off the bottom of the panel. Grade
   Dashboard uses a different row class but shares this menu component. */
.learn-homework-assignment-card:nth-last-child(-n + 2) .learn-homework-assignment-menu-popover,
.grade-dashboard-assignment:nth-last-child(-n + 2) .learn-homework-assignment-menu-popover {
  top: auto;
  bottom: calc(100% + 6px);
}

@media (max-width: 640px) {
  /* The card collapsed to one column here so two full-width Import buttons
     could sit under the title. A status and a "⋯" fit beside it, so the two
     columns come back and both children stay on row 1. */
  .learn-homework-assignment-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 5px 2px;
  }

  .learn-homework-assignment-card > div:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .learn-homework-assignment-actions {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    justify-content: flex-end;
    width: auto;
    margin-top: 0;
  }

  .learn-homework-assignment-actions .progress-stat {
    grid-column: auto;
    width: auto;
  }

  .learn-homework-assignment-list {
    padding: 0 0 0 18px;
  }

  /* The row is a flex line here, so the grid placement above does not apply. */
  .learn-homework-course-hide {
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------------------
   Add item: a real full-screen sheet on a phone, and one "Others" drawer.
   --------------------------------------------------------------------------- */

/* A pinch that starts on the sheet must not zoom the page. pan-y still allows
   the body to scroll, which is the only gesture this dialog needs. */
.home-add-modal-backdrop,
.home-add-modal {
  touch-action: pan-y;
}

@media (max-width: 640px) {
  /* Was inset 12px with max-height 100dvh - 24px, so it read as a card that
     happened to be tall rather than a sheet — and the gap around it let a
     stray tap land on the page behind. Edge to edge, like the course modal. */
  .home-add-modal-backdrop {
    place-items: stretch;
    padding: 0;
  }

  .home-add-modal {
    width: 100%;
    max-width: none;
    height: var(--app-live-viewport-height, 100dvh);
    max-height: var(--app-live-viewport-height, 100dvh);
    border: 0;
    border-radius: 0;
  }

  .home-add-modal-header {
    padding-top: calc(14px + var(--a1-safe-top));
  }

  .home-add-modal-body {
    padding-bottom: calc(16px + var(--a1-safe-bottom));
  }

  /* Keep the two ringtone actions visible together on a phone. The generic
     form rule above stacks every action vertically, which pushed Save below
     the first viewport once all six sound choices were present. */
  .home-reminder-sound-form .home-form-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .home-reminder-sound-form .home-form-actions > button {
    min-width: 0;
    min-height: 44px;
  }

  .home-reminder-sound-form .home-form-actions > .form-message {
    grid-column: 1 / -1;
  }
}

/* Reminder, Course, Notes and Private live behind one toggle, so the form opens
   as title and dates — the fields that are actually filled in every time. */
.home-form-others {
  border-top: 1px solid var(--line-soft);
  padding-top: 4px;
}

.home-form-others > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}

.home-form-others > summary::-webkit-details-marker {
  display: none;
}

@media (hover: hover) {
  .home-form-others > summary:hover{
    color: var(--text);
  }
}

/* Same "›" the rest of the app opens rows with. */
.home-form-others-chevron {
  font-size: 15px;
  line-height: 1;
  transition: transform 120ms ease;
}

.home-form-others[open] .home-form-others-chevron {
  transform: rotate(90deg);
}

.home-form-others-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 4px 0 2px;
}

.home-privacy-field small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

@media (max-width: 480px) {
  .home-form-others-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   Home + Learn: four small corrections.
   --------------------------------------------------------------------------- */

/* 1. Academic Assistant keeps its fullscreen button on a phone. The 680px block
   hid it (visibility:hidden + pointer-events:none), which is the surface where
   a fullscreen assistant is worth the most — the card is fixed-position and
   already sizes itself off the viewport, so it works here unchanged. */
@media (max-width: 680px) {
  .academic-assistant-fullscreen-toggle {
    visibility: visible;
    pointer-events: auto;
  }
}

/* 2. Course rows lose the six-dot grip. Its box stays, so the course number sits
   exactly where it did — moving it left made the column ragged against the
   panel heading. The strip still drags to reorder: it is the only element with
   touch-action:none, so widening the target to the whole row would take the
   gesture away from list scrolling. */
.learn-course-entry-grip,
.learn-course-entry-head:hover .learn-course-entry-grip {
  opacity: 0;
}

/* 3. "Open" is an <a> next to a <button>, so it inherited neither the button's
   box nor its centring and sat short and left-aligned. Both carry
   .compact-action-button, so sizing that gives them one shape by construction.
   flex:1 makes them literally equal rather than merely alike, and width:auto
   undoes the bare `.ghost-button { width: 100% }` in the 640px block, which the
   link picked up and the button did not — that is what pushed them onto two
   rows at one full width and one content width. */
.learn-course-note-actions .compact-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  width: auto;
  /* Equal, but still button-shaped — without a cap they split the whole modal
     width between them on a desktop. */
  max-width: 220px;
  min-height: 40px;
  padding: 0 12px;
  text-align: center;
  text-decoration: none;
}

/* 4. The chevron sat hard against the panel edge. */
.learn-course-entry-open {
  margin-right: 6px;
}

/* ---------------------------------------------------------------------------
   Mobile baseline: tap targets and a type floor.

   A 390px audit of the real app found the same two faults on every screen, and
   they are what makes the phone layout feel cramped rather than any one rule
   being wrong: controls sized by eye on a desktop (down to a 15px-tall file
   link and 28px icon buttons, against the 44px touch standard) and labels sunk
   to 8-10px. Scoped to phone widths, so desktop density is unchanged.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* --- tap targets ------------------------------------------------------- */

  /* Icon-only buttons: 28-30px is a miss waiting to happen. */
  .learn-answer-add-button,
  .home-service-hide,
  .home-reminder-dismiss {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  /* An answer row carries three of these side by side, so widening them pushed
     the panel 18px past the viewport. Height is free — it costs no horizontal
     space and the row is 44px now — so these grow down the row, not across it. */
  .learn-answer-icon-button {
    height: 40px;
  }

  /* Rows are the primary target on these lists, so the row carries the height
     rather than the 15px text node inside it. */
  .learn-answer-row,
  .learn-answer-course-row,
  .learn-workspace-panel-toggle,
  .chat-thread-section-toggle {
    min-height: 44px;
  }

  .learn-answer-row-name,
  .learn-answer-auto-status {
    min-height: 36px;
  }

  /* Calendar's arrows and its Day/5 Day/Week/Month/Year switch. */
  .calendar-icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  [data-calendar-view] {
    min-height: 40px;
  }

  .academic-assistant-status-button,
  .learn-homework-import-mini {
    min-height: 40px;
  }

  /* --- type floor -------------------------------------------------------- */

  /* Nothing below 11px on a phone. 8px time labels and 9px badges were the
     bulk of the "too small to read" findings. */
  .learn-answer-filetype,
  .learn-answer-check-label,
  .learn-answer-problem-badge,
  .learn-answer-auto-count,
  .learn-answer-auto-count-dot,
  .service-school-badge,
  .calendar-week-time-label,
  .calendar-week-day-heading strong,
  .calendar-week-day-heading span {
    font-size: 11px;
  }
}

/* Second pass: the cases the block above lost on specificity, plus the ones a
   real-data audit only surfaced once the first pass moved things. */
@media (max-width: 640px) {
  /* Beaten by `.calendar-view-week .calendar-week-time-label` and friends. */
  .calendar-view-day .calendar-week-time-label,
  .calendar-view-week .calendar-week-time-label,
  .calendar-view-five .calendar-week-time-label {
    font-size: 11px;
  }

  .calendar-week-block strong,
  .calendar-week-block span {
    font-size: 11px;
  }

  /* Beaten by `.calendar-view-tabs button`. */
  .calendar-view-tabs button {
    min-height: 40px;
  }

  .calendar-toolbar .ghost-button,
  .calendar-toolbar .primary-button {
    min-height: 40px;
  }

  /* "AUTO" and the pass/warn/error counts sit in a nested span. */
  .learn-answer-auto-status span,
  .academic-assistant-hidden-count,
  .course-source-initial {
    font-size: 11px;
  }

  .homework-course-hide-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }
}

/* === Mobile safe-area: keep modal close/back controls below the phone status
   bar so they stay tappable on full-screen overlays. env(safe-area-inset-top)
   is 0 on devices without a notch, so desktop layouts are unchanged. ========= */

/* (1) Absolutely-positioned top-right close buttons: add the inset to `top`.
   Compound selectors are replicated so these win the cascade without !important. */
.calendar-compose-close,
.learn-answer-compare-close,
.game-mode-x,
.learn-answer-action-modal > .panel-header > .learn-answer-action-close,
.learn-answer-problem-modal .learn-answer-action-close,
.learn-homework-import-header .learn-answer-action-close,
.learn-workspace-do-header .learn-answer-action-close {
  top: calc(10px + var(--a1-safe-top));
}

/* In-flow modal headers are handled centrally by mobile-dialogs.css. Keeping a
   second safe-area padding on the dialog itself double-counted the notch on
   dialogs whose header was already corrected there. */

/* ---------------------------------------------------------------------------
   Registration full page on phones — authoritative responsive layout.

   Registration accumulated several independent mobile passes. Their tab modes
   (two-column, horizontal scroller, then five-column), sticky offsets and panel
   widths contradicted one another. Keep one scroll container and one sticky
   stack here so the first paint and the settled layout are identical.
   --------------------------------------------------------------------------- */
@media (max-width: 980px) {
  body.home-fullpage-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .home-fullpage {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: var(--app-live-viewport-height, 100vh);
    height: var(--app-live-viewport-height, 100dvh);
    max-height: var(--app-live-viewport-height, 100dvh);
    overflow: hidden;
  }

  /* Home launches feature workspaces as a full-screen layer. When any editor
     inside that layer opens the iOS keyboard, --app-live-viewport-height
     shrinks to the typing area; using it on the outer layer exposed Home or
     Services through translucent keyboard accessory rows. Keep every active
     full-page feature painted to the layout viewport. Its focused dialog or
     editor still uses the live viewport for visible, scrollable content. */
  body.mobile-keyboard-open.home-fullpage-open .home-fullpage:not(.hidden) {
    height: 100vh;
    height: max(
      100vh,
      calc(
        var(--app-live-viewport-height, 100dvh)
        + var(--app-keyboard-inset, 0px)
        + var(--app-live-viewport-top, 0px)
      )
    );
    max-height: none;
    overflow: visible;
  }

  

  .home-fullpage-body {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100%;
    padding: 0 10px calc(12px + var(--a1-safe-bottom));
    overflow-x: clip;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .home-fullpage .home-fullpage-context {
    position: sticky;
    top: 0;
    z-index: 260;
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-height: 48px;
    margin: 0 -10px;
    padding: 4px 10px;
    border-bottom: 1px solid var(--line);
    background: var(--a1-sw-surface, #090d14);
  }

  .home-fullpage .home-fullpage-back {
    flex: 0 0 auto;
    min-height: 40px;
    padding-inline: 8px;
  }

  .home-fullpage-crumb {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-fullpage-body > .registration-shell {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 0 8px;
    overflow-x: clip;
  }

  .home-fullpage .registration-shell > .registration-tabs {
    position: sticky;
    top: 48px;
    z-index: 250;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    margin: 0 0 8px;
    padding: 3px;
    overflow: hidden;
    border-radius: 0 0 10px 10px;
    background: var(--a1-sw-surface, #090d14);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
    backdrop-filter: none;
  }

  .home-fullpage .registration-shell > .registration-tabs button {
    min-width: 0;
    min-height: 40px;
    padding: 0 1px;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-fullpage #registration-roadmap,
  .home-fullpage #registration-overview,
  .home-fullpage #registration-progress,
  .home-fullpage #registration-comparison,
  .home-fullpage #registration-search,
  .home-fullpage .schedule-layout,
  .home-fullpage .comparison-layout,
  .home-fullpage .roadmap-workspace,
  .home-fullpage .roadmap-board-panel,
  .home-fullpage .roadmap-progress-panel,
  .home-fullpage .discovery-results {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  

  

  /* The previous 420px rule named .status-pill, but this value is a
     .progress-stat. Put it in the copy column instead of an implicit row that
     protrudes from the left edge of the HASS card. */
  .home-fullpage .hass-concentration-heading .progress-stat {
    grid-column: 2;
    justify-self: start;
    max-width: 100%;
  }

  

  

  

  /* The generic mobile-dialog treatment makes this a full-screen workspace.
     Keep its header/actions fixed and scroll only the content; otherwise the
     single file-picker grid row stretches to fill the whole screen. */
  .roadmap-import-dialog {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
  }

  .roadmap-import-header > button {
    flex-basis: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  

  

  .roadmap-import-actions {
    display: flex;
    gap: 8px;
    padding: 10px 14px calc(10px + var(--a1-safe-bottom));
  }

  
}

@media (max-width: 480px) {
  .home-fullpage .home-fullpage-context .home-fullpage-crumb {
    display: none;
  }
}

@media (max-width: 380px) {
  .home-fullpage-product,
  .home-fullpage-separator {
    display: none;
  }

  .home-fullpage .home-fullpage-back {
    padding-inline: 5px;
  }
}

/* Shared safe-area bottom-padding helper - task #33 refactor. */
.a1-safe-pad-bottom {
  padding-bottom: var(--a1-safe-bottom);
}

/* Task #45 — game dialogs render as a coherent, theme-INDEPENDENT DARK surface.
   The app ships the light skin by default (data-a1-skin present on load), which
   lightened only the dialog HEADER: mobile-dialogs.css paints every
   [class$="-header"] with "background-color: var(--panel) !important", and
   --panel is #fff under the light skin, leaving white-header-over-dark-body (the
   live truth-shift bug). Fix: pin ONE dark surface token
   (--app-game-dialog-surface) plus the dark palette on each game-dialog root.
   Custom properties resolve per-element, so a rule matching the dialog beats the
   inherited :root/skin value and feeds the header var(--panel) a dark value; the
   same pin darkens inner swept var(--a1-sw-*) surfaces and re-asserts light ink
   so the dialogs hardcoded-light text stays readable. Header and body are now one
   dark surface regardless of the active skin. CSS-only; no logic touched. */
.mini-game-dialog,
.number-drop-dialog,
.missing-number-dialog,
.estimation-dialog,
.nc-dialog,
.math-blitz-dialog,
.color-hunt-dialog,
.math-garden-dialog {
  --app-game-dialog-surface: #0e1420;
  --panel: var(--app-game-dialog-surface);
  --panel-2: #141b2a;
  --line: rgba(255, 255, 255, 0.10);
  --line-soft: rgba(255, 255, 255, 0.06);
  --text: #f3f7fb;
  --muted: #b4c0ce;
  /* Set an explicit light color on the dialog root: bespoke titles inherit the
     computed color:var(--a1-text) from <body> (dark ink under the light skin);
     re-asserting color here makes descendant text re-resolve light on the dark
     surface. Elements with their own explicit color are unaffected. */
  color: var(--text);
  --a1-sw-surface: var(--app-game-dialog-surface);
  --a1-sw-surface-2: #0a0f1a;
  --a1-sw-surface-3: #070b13;
  --a1-sw-text: #eef6ff;
  --a1-sw-scrim: rgba(5, 8, 13, 0.55);
  /* Also pin the --a1-* ink family: bespoke game titles (.number-drop-title,
     .estimation-title, .mg-title, .ch-title, .missing-number-title) set no color
     and inherit color:var(--a1-text), which is dark ink under the light skin. */
  --a1-text: #f4f4f2;
  --a1-text-2: #a8a8a4;
  --a1-text-3: #8b8b87;
  /* Pin the surface/border/accent families too: skinned controls such as
     .ghost-button paint background: var(--a1-surface) — with only the ink
     pinned dark they came out as white chips with near-white labels (the
     unreadable Exit button in the game-over card). */
  --a1-surface: #141b2a;
  --a1-surface-2: #10161f;
  --a1-surface-3: #1a2231;
  --a1-border: rgba(255, 255, 255, 0.14);
  --a1-border-strong: rgba(255, 255, 255, 0.26);
  --a1-muted-bg: rgba(255, 255, 255, 0.08);
  --a1-accent: #8e9bf0;
  --a1-accent-hover: #a3aef5;
  --a1-accent-soft: #262b45;
  --a1-accent-text: #a9b3f5;
  --a1-on-accent: #16161a;
}

/* Learn course dashboard: one course owns both the rubric-level grade view and
   its Canvas / Gradescope assignment stream. */
.homework-tabs.learn-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grade-dashboard-course-map {
  display: grid;
  gap: 16px;
}

.grade-dashboard-course {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 8px 24px color-mix(in srgb, #000 7%, transparent);
}

.grade-dashboard-course-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel);
}

.grade-dashboard-course.collapsed .grade-dashboard-course-header {
  border-bottom: 0;
}

.grade-dashboard-course-header > button:first-child {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 2px 0;
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.grade-dashboard-course-header > button:first-child > span:first-child,
.grade-dashboard-course-header strong,
.grade-dashboard-course-header em {
  display: block;
  min-width: 0;
}

.grade-dashboard-course-header strong {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grade-dashboard-course-header em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.grade-dashboard-course:not(.collapsed) .learn-homework-course-open {
  transform: rotate(90deg);
}

.grade-dashboard-course-body {
  display: grid;
  gap: 12px;
  padding: 16px;
}

/* Disclosure rows: the card body is a flat list of "› Label   value" rows
   (Grade opens the details dialog, Assignments expands in place, Manage opens
   Course settings), not a grid of boxed panels. */
.grade-dashboard-rows {
  display: grid;
  min-width: 0;
}

.grade-dashboard-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 8px 4px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  list-style: none;
}

a.grade-dashboard-row { text-decoration: none; }

.grade-dashboard-rows > .grade-dashboard-row:last-child {
  border-bottom: 0;
}

.grade-dashboard-row:hover,
.grade-dashboard-row:focus-visible {
  background: color-mix(in srgb, var(--panel-2) 55%, transparent);
  outline: none;
}

.grade-dashboard-row-chevron {
  flex: 0 0 auto;
  width: 14px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1;
  text-align: center;
  transition: transform .16s ease;
}

.grade-dashboard-row-main {
  flex: 1 1 auto;
  min-width: 0;
}

.grade-dashboard-row-main strong {
  display: block;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grade-dashboard-row-meta {
  flex: 0 1 auto;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grade-dashboard-row-value {
  flex: 0 0 auto;
  max-width: 55%;
  overflow: hidden;
  color: var(--green);
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grade-dashboard-row-value.amber {
  color: var(--amber-pill);
}

.grade-dashboard-row-value.red {
  color: var(--red);
}

/* Estimate header inside the Grade details dialog: the number the card row
   shows, plus its certainty note and the provider-reported total. */
.grade-dashboard-breakdown-estimate {
  display: grid;
  gap: 3px;
}

.grade-dashboard-breakdown-estimate strong {
  color: var(--green);
  font-size: clamp(24px, 5vw, 30px);
  line-height: 1.05;
}

.grade-dashboard-breakdown-estimate strong.amber {
  color: var(--amber-pill);
}

.grade-dashboard-breakdown-estimate strong.red {
  color: var(--red);
}

.grade-dashboard-breakdown-estimate small {
  color: var(--muted);
  font-size: 11px;
}

.grade-dashboard-special-rule-list {
  display: grid;
  gap: 8px;
}

.grade-dashboard-special-rule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--green) 36%, var(--line-soft));
  border-radius: 10px;
  background: color-mix(in srgb, var(--green) 8%, var(--panel));
}

.grade-dashboard-special-rule.pending {
  border-color: var(--line-soft);
  background: var(--panel-2);
}

.grade-dashboard-special-rule-icon {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 999px;
  color: #fff;
  background: var(--green);
  font-size: 11px;
  font-weight: 900;
}

.grade-dashboard-special-rule.pending .grade-dashboard-special-rule-icon {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 16%, transparent);
}

.grade-dashboard-special-rule strong,
.grade-dashboard-special-rule p {
  display: block;
  min-width: 0;
}

.grade-dashboard-special-rule strong {
  color: var(--text);
  font-size: 12px;
}

.grade-dashboard-special-rule p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
}

body.grade-dashboard-breakdown-open {
  overflow: hidden;
}

.grade-dashboard-breakdown-host.hidden {
  display: none;
}

.grade-dashboard-breakdown-backdrop {
  position: fixed;
  inset: 0;
  z-index: 292;
  display: grid;
  place-items: center;
  width: 100dvw;
  height: var(--app-live-viewport-height, 100dvh);
  padding: 16px;
  background: var(--a1-sw-scrim, rgba(15, 23, 42, 0.56));
  backdrop-filter: blur(5px);
}

.grade-dashboard-breakdown {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(560px, calc(100dvw - 24px));
  max-width: 100%;
  max-height: calc(var(--app-live-viewport-height, 100dvh) - 24px);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}

.grade-dashboard-breakdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.grade-dashboard-breakdown-header > div {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.grade-dashboard-breakdown-header span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.grade-dashboard-breakdown-header h3 {
  overflow: hidden;
  margin: 2px 0 0;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grade-dashboard-breakdown-header button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  color: var(--text);
  background: var(--panel-2);
  font-size: 25px;
  line-height: 1;
}

.grade-dashboard-breakdown-body {
  min-width: 0;
  min-height: 0;
  padding: 16px 18px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.grade-dashboard-breakdown-list {
  display: grid;
}

.grade-dashboard-breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}

.grade-dashboard-breakdown-row > span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.grade-dashboard-breakdown-row > span:first-child > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grade-dashboard-breakdown-row small,
.grade-dashboard-breakdown-body > p {
  color: var(--muted);
  font-size: 11px;
}

.grade-dashboard-breakdown-row small.grade-dashboard-breakdown-adjustment {
  max-width: 280px;
  color: var(--green);
  line-height: 1.35;
  white-space: normal;
}

.grade-dashboard-breakdown-formula {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.grade-dashboard-breakdown-formula b,
.grade-dashboard-breakdown-formula strong {
  font-size: 13px;
}

.grade-dashboard-breakdown-formula i {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.grade-dashboard-breakdown-formula strong {
  min-width: 45px;
  color: var(--green);
  text-align: right;
}

.grade-dashboard-breakdown-row-total > strong {
  color: var(--green);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.grade-dashboard-breakdown-body > p {
  margin: 10px 2px 0;
}

.grade-dashboard-modal-calculation {
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--panel-2);
}

.grade-dashboard-modal-calculation > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 9px 13px;
  cursor: pointer;
  list-style: none;
}

.grade-dashboard-modal-calculation > summary::-webkit-details-marker {
  display: none;
}

.grade-dashboard-modal-calculation > summary > span:first-child,
.grade-dashboard-modal-calculation > summary strong,
.grade-dashboard-modal-calculation > summary small {
  display: block;
  min-width: 0;
}

.grade-dashboard-modal-calculation > summary strong {
  font-size: 13px;
}

.grade-dashboard-modal-calculation > summary small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
}

.grade-dashboard-modal-calculation-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  transition: transform .16s ease;
}

.grade-dashboard-modal-calculation[open] .grade-dashboard-modal-calculation-chevron {
  transform: rotate(90deg);
}

.grade-dashboard-modal-calculation-body {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border-top: 1px solid var(--line-soft);
}

.grade-dashboard-modal-calculation:not([open]) > .grade-dashboard-modal-calculation-body,
.grade-dashboard-assignment-classification:not([open]) > div {
  display: none;
}

.grade-dashboard-modal-section {
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel);
}

.grade-dashboard-modal-section > header {
  display: grid;
  gap: 2px;
  padding: 10px 11px;
  border-bottom: 1px solid var(--line-soft);
}

.grade-dashboard-modal-section > header strong {
  font-size: 12px;
}

.grade-dashboard-modal-section > header span {
  color: var(--muted);
  font-size: 10.5px;
}

.grade-dashboard-modal-section > .grade-dashboard-category-list,
.grade-dashboard-modal-section > .grade-dashboard-breakdown-list {
  padding: 0 11px;
}

.grade-dashboard-contribution-overview {
  margin-top: 0;
}

.grade-dashboard-contribution-overview > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.grade-dashboard-contribution-overview > header button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  color: var(--accent);
  background: var(--panel-2);
  font-size: 10.5px;
  font-weight: 850;
  cursor: pointer;
}

.grade-dashboard-contribution-overview > header button[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line-soft));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
}

.grade-dashboard-rubric-panel[hidden] {
  display: none;
}

.grade-dashboard-rubric-panel {
  display: grid;
  gap: 9px;
  padding: 10px 11px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--accent) 4%, var(--panel));
}

.grade-dashboard-rubric-provenance {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}

.grade-dashboard-rubric-provisional {
  color: var(--amber, #ffc457);
}

.grade-dashboard-rubric-evidence {
  overflow-wrap: anywhere;
}

.grade-dashboard-rubric-evidence a {
  color: var(--cyan);
  text-decoration: none;
}

.grade-dashboard-rubric-panel > div {
  display: grid;
  gap: 6px;
}

.grade-dashboard-rubric-panel > div > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  font-size: 11.5px;
}

.grade-dashboard-rubric-panel > div strong {
  overflow-wrap: anywhere;
}

.grade-dashboard-rubric-panel > div b {
  flex: 0 0 auto;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.grade-dashboard-rubric-panel > p {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.grade-dashboard-late-policy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 8px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel);
}

.grade-dashboard-late-policy > span,
.grade-dashboard-late-policy strong,
.grade-dashboard-late-policy small {
  display: block;
  min-width: 0;
}

.grade-dashboard-late-policy strong {
  font-size: 12.5px;
}

.grade-dashboard-late-policy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.grade-dashboard-late-policy > label {
  display: grid;
  gap: 3px;
}

.grade-dashboard-late-policy label > span,
.grade-dashboard-assignment-setting-penalty > span {
  position: relative;
  display: flex;
  align-items: center;
}

.grade-dashboard-late-policy input,
.grade-dashboard-assignment-setting-penalty input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 5px 25px 5px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  color: var(--text);
  background: var(--a1-sw-surface, rgba(8, 12, 18, 0.82));
  text-align: right;
}

.grade-dashboard-late-policy i,
.grade-dashboard-assignment-setting-penalty i {
  position: absolute;
  right: 8px;
  color: var(--muted);
  font-size: 10.5px;
  font-style: normal;
  pointer-events: none;
}

.grade-dashboard-what-if {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel);
}

.grade-dashboard-what-if > header {
  display: grid;
  gap: 2px;
}

.grade-dashboard-what-if > header strong,
.grade-dashboard-what-if label > span:first-child {
  font-size: 12px;
  font-weight: 800;
}

.grade-dashboard-what-if > header small,
.grade-dashboard-what-if output {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.grade-dashboard-what-if > label,
.grade-dashboard-what-if-grid > label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.grade-dashboard-what-if-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.grade-dashboard-what-if select,
.grade-dashboard-what-if input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  color: var(--text);
  background: var(--a1-sw-surface, rgba(8, 12, 18, 0.82));
}

.grade-dashboard-what-if select {
  padding: 5px 8px;
}

.grade-dashboard-what-if-grid label > span:nth-child(2) {
  position: relative;
  display: flex;
  align-items: center;
}

.grade-dashboard-what-if input {
  padding: 5px 25px 5px 8px;
}

.grade-dashboard-what-if i {
  position: absolute;
  right: 8px;
  color: var(--muted);
  font-size: 10.5px;
  font-style: normal;
  pointer-events: none;
}

@media (max-width: 520px) {
  .grade-dashboard-what-if-grid {
    grid-template-columns: 1fr;
  }
}

.grade-dashboard-policy-empty {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  color: var(--muted);
  font-size: 12px;
}

.grade-dashboard-policy-empty strong {
  color: var(--text);
  font-size: 13px;
}

.grade-dashboard-calculation {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--a1-sw-surface-3, rgba(5, 9, 15, 0.22));
}

.grade-dashboard-calculation > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.grade-dashboard-calculation > summary::-webkit-details-marker {
  display: none;
}

.grade-dashboard-calculation > summary > span,
.grade-dashboard-calculation > summary strong,
.grade-dashboard-calculation > summary small {
  display: block;
  min-width: 0;
}

.grade-dashboard-calculation > summary strong {
  color: var(--text);
  font-size: 13px;
}

.grade-dashboard-calculation > summary small,
.grade-dashboard-calculation > summary em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.grade-dashboard-calculation > summary em {
  overflow: hidden;
  max-width: 52%;
  color: var(--amber-pill);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grade-dashboard-calculation-body {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid var(--line-soft);
}

.grade-dashboard-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.grade-dashboard-mode button {
  display: grid;
  gap: 3px;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.grade-dashboard-mode button.active {
  border-color: rgba(53, 212, 255, 0.48);
  color: var(--text);
  background: rgba(53, 212, 255, 0.09);
}

.grade-dashboard-mode strong,
.grade-dashboard-mode span {
  display: block;
}

.grade-dashboard-mode strong {
  font-size: 12px;
}

.grade-dashboard-mode span {
  font-size: 10.5px;
  line-height: 1.25;
}

.grade-dashboard-category-list {
  display: grid;
}

.grade-dashboard-category-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}

.grade-dashboard-category-row:last-child {
  border-bottom: 0;
}

.grade-dashboard-category-row > span:first-child,
.grade-dashboard-category-row strong,
.grade-dashboard-category-row small {
  display: block;
  min-width: 0;
}

.grade-dashboard-category-row strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grade-dashboard-category-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
}

.grade-dashboard-category-row small.grade-dashboard-category-rule {
  color: var(--green);
}

.grade-dashboard-category-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.grade-dashboard-category-input {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

.grade-dashboard-category-input > small {
  margin: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.grade-dashboard-category-input > span {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.grade-dashboard-category-input input {
  box-sizing: border-box;
  width: 82px;
  min-width: 0;
  max-width: 100%;
  min-height: 34px;
  padding: 5px 29px 5px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  color: var(--text);
  background: var(--a1-sw-surface, rgba(8, 12, 18, 0.82));
  text-align: right;
}

.grade-dashboard-category-input i {
  position: absolute;
  right: 9px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  pointer-events: none;
}

.grade-dashboard-category-input:has(button) input {
  padding-right: 44px;
}

.grade-dashboard-category-input:has(button) i {
  right: 28px;
}

.grade-dashboard-category-input button {
  position: absolute;
  right: 2px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

.grade-dashboard-assignment-classification {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel);
}

.grade-dashboard-assignment-classification > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 9px 11px;
  cursor: pointer;
  list-style: none;
}

.grade-dashboard-assignment-classification > summary::-webkit-details-marker {
  display: none;
}

.grade-dashboard-assignment-classification > summary > span:first-child,
.grade-dashboard-assignment-classification > summary strong,
.grade-dashboard-assignment-classification > summary small {
  display: block;
  min-width: 0;
}

.grade-dashboard-assignment-classification > summary strong {
  font-size: 12px;
}

.grade-dashboard-assignment-classification > summary small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
}

.grade-dashboard-assignment-classification > summary > span:last-child {
  color: var(--muted);
  font-size: 20px;
  transition: transform .16s ease;
}

.grade-dashboard-assignment-classification[open] > summary > span:last-child {
  transform: rotate(90deg);
}

.grade-dashboard-assignment-classification > div {
  display: grid;
  padding: 0 11px 5px;
  border-top: 1px solid var(--line-soft);
}

.grade-dashboard-assignment-setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 34%) 90px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}

.grade-dashboard-assignment-setting-row:last-child {
  border-bottom: 0;
}

.grade-dashboard-assignment-setting-title,
.grade-dashboard-assignment-setting-row label,
.grade-dashboard-assignment-setting-row strong,
.grade-dashboard-assignment-setting-row small {
  display: block;
  min-width: 0;
}

.grade-dashboard-assignment-setting-row label {
  display: grid;
  gap: 3px;
}

.grade-dashboard-assignment-setting-row label > small {
  margin: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.grade-dashboard-assignment-setting-title strong {
  overflow: hidden;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grade-dashboard-assignment-setting-title small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9.5px;
}

.grade-dashboard-assignment-setting-score {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink, inherit);
}

.grade-dashboard-assignment-penalty-formula {
  grid-column: 2 / -1;
  color: var(--green) !important;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.grade-dashboard-assignment-classification select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 4px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  color: var(--text);
  background: var(--a1-sw-surface, rgba(8, 12, 18, 0.82));
  font-size: 10.5px;
}

.grade-dashboard-calculation-note {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
}

/* Assignments dialog: count on the left, filter switch on the right. */
.grade-dashboard-assignments-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.grade-dashboard-filters {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-3, rgba(5, 9, 15, 0.26));
  justify-self: end;
}

.grade-dashboard-filters button {
  min-height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.grade-dashboard-filters button.active {
  color: var(--text);
  background: var(--panel-2);
}

.grade-dashboard-assignment-list {
  display: grid;
}

.grade-dashboard-assignment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}

.grade-dashboard-assignment:last-child {
  border-bottom: 0;
}

.grade-dashboard-assignment-main,
.grade-dashboard-assignment-title {
  min-width: 0;
}

.grade-dashboard-assignment-title {
  display: flex;
  align-items: center;
  gap: 7px;
}

.grade-dashboard-assignment-title a,
.grade-dashboard-assignment-title button,
.grade-dashboard-assignment-title strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grade-dashboard-assignment-title button {
  appearance: none;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.grade-dashboard-assignment-title a:hover,
.grade-dashboard-assignment-title button:hover,
.grade-dashboard-assignment-title button:focus-visible {
  outline: none;
  text-decoration: underline;
}

.grade-dashboard-assignment-main > span {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grade-dashboard-source-badges {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 3px;
}

.grade-dashboard-submitted-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 3px;
  color: var(--green, #208a58);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.grade-dashboard-source-badges i {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  color: #081018;
  background: #8bdff2;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.grade-dashboard-source-badges i.gradescope {
  color: #fff;
  background: #b33b4d;
}

.grade-dashboard-assignment-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.grade-dashboard-assignment-side > .progress-stat {
  flex: 0 0 auto;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grade-dashboard-assignment-side select {
  width: min(155px, 22vw);
  min-height: 30px;
  padding: 3px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  color: var(--text);
  background: var(--a1-sw-surface, rgba(8, 12, 18, 0.82));
  font-size: 10.5px;
}

@media (max-width: 680px) {
  .grade-dashboard-breakdown-backdrop {
    padding: 8px;
  }

  .grade-dashboard-breakdown {
    width: min(100%, calc(100vw - 16px));
    max-height: calc(var(--app-live-viewport-height, 100dvh) - 16px);
    border-radius: 15px;
  }

  .grade-dashboard-breakdown-header {
    padding: 12px 13px;
  }

  .grade-dashboard-breakdown-body {
    padding: 12px;
  }

  .grade-dashboard-course-header {
    padding-left: 10px;
  }

  .grade-dashboard-course-body {
    padding: 10px;
  }

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

  .grade-dashboard-category-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .grade-dashboard-category-controls {
    width: 100%;
  }

  .grade-dashboard-category-input input {
    width: 100%;
  }

  .grade-dashboard-assignment-setting-row {
    grid-template-columns: minmax(0, 1fr) 90px;
  }

  .grade-dashboard-assignment-setting-title {
    grid-column: 1 / -1;
  }

  .grade-dashboard-assignment-setting-category {
    min-width: 0;
  }

  .grade-dashboard-assignment-penalty-formula {
    grid-column: 1 / -1;
  }

  .grade-dashboard-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-self: stretch;
  }

  .grade-dashboard-filters button {
    min-height: 28px;
  }

  .grade-dashboard-assignment {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
  }

  .grade-dashboard-assignment-side {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 4px;
  }

  .grade-dashboard-assignment-main > span {
    margin-top: 2px;
    font-size: 10px;
  }

  .grade-dashboard-assignment-side > .progress-stat {
    max-width: min(118px, 32vw);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  .grade-dashboard-source-badges i {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    font-size: 8px;
  }
}

/* One course, one card: the Course Setup strip (Add, connections, progress)
   heads the merged Courses tab and the unified grade cards fill it. */
#homework-courses {
  min-width: 0;
}

#homework-courses .learn-homework-panel {
  margin: 0;
}

#homework-courses .course-center {
  margin: 0;
  border-bottom: 1px solid var(--line);
}

#homework-courses .course-center .course-center-provider-statuses {
  padding-bottom: 12px;
}

/* Extraction results (Rubric, Schedule) sit on the card above the rows. */
.grade-dashboard-knowledge-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* The calendar entry is the card's one button, full width at the bottom. */
.grade-dashboard-calendar-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.grade-dashboard-calendar-button.is-added {
  border-color: color-mix(in srgb, var(--green) 35%, var(--line));
  color: var(--green);
}

.grade-dashboard-setup-attention {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--amber) 42%, var(--line));
  border-radius: 10px;
  color: var(--text);
  background: color-mix(in srgb, var(--amber) 9%, var(--panel-2));
  font-family: inherit;
  font-size: .8rem;
  text-align: left;
}

.grade-dashboard-setup-attention > button {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.grade-dashboard-setup-attention > button:first-of-type {
  flex: 1 1 auto;
}

.grade-dashboard-setup-attention > button:last-of-type {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 650;
}

.grade-dashboard-setup-attention i {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  color: #1e1503;
  background: var(--amber);
  font-style: normal;
  font-weight: 800;
  font-size: .68rem;
  line-height: 17px;
  text-align: center;
}

.grade-dashboard-setup-attention span {
  flex: 1 1 auto;
  min-width: 0;
}

.grade-dashboard-setup-attention em {
  flex: 0 0 auto;
  color: var(--accent);
  font-style: normal;
  font-weight: 650;
}

/* Search never leaves a visually empty result sheet: loading, no-result and
   failure states occupy one compact, readable row at the top of the panel. */
.discovery-search-state,
.discovery-empty-state {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  min-height: 74px;
  margin: 10px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--text);
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.58));
}

.discovery-search-state > span:last-child {
  grid-column: 2;
  font-size: 12px;
  font-weight: 750;
}

.discovery-empty-state span {
  color: var(--muted);
  font-size: 12px;
}

/* Profile rows deliberately stack on phones; keep the in-place editor in the
   same single column instead of creating an implicit off-screen grid column. */
@media (max-width: 520px) {
  .profile-compact-row > .profile-edit-control,
  .profile-email-code-row > .code-field {
    grid-column: 1;
  }

  .friend-shared-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .friend-shared-header span {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ---------------------------------------------------------------------------
   Registration desktop tidy-up: Roadmap and Progress use predictable cards.

   Requirement choices used to enlarge the clicked card to the full grid width
   and then render the same course list both inside it and in a hover tooltip.
   The list now owns one compact, full-width row beneath otherwise equal cards.
   --------------------------------------------------------------------------- */

.roadmap-requirement-option {
  box-sizing: border-box;
  display: grid;
  align-content: center;
  width: 100%;
  min-width: 0;
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  padding: 8px 10px;
}

.roadmap-requirement-choice-panel {
  box-sizing: border-box;
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-height: 390px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cyan) 36%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--cyan) 5%, var(--a1-sw-surface, #101722));
}

.roadmap-requirement-choice-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.roadmap-requirement-choice-header button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--a1-sw-surface-2, rgba(127, 127, 127, 0.08));
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}

.roadmap-requirement-choice-body > span {
  display: block;
  margin: 0;
  padding: 10px 2px;
  overflow: visible;
  color: var(--muted);
  white-space: normal;
}

@media (max-width: 980px) {
  .roadmap-requirement-option {
    height: 62px;
    min-height: 62px;
    max-height: 62px;
  }

  .roadmap-requirement-choice-panel {
    max-height: 360px;
    padding: 10px;
  }

  
}

/* ---------------------------------------------------------------------------
   Friend calendar: share the real Calendar layout without its edit controls.
   --------------------------------------------------------------------------- */

.friend-schedule-modal {
  box-sizing: border-box;
  max-width: calc(100dvw - clamp(24px, 6vw, 56px));
  overflow-x: hidden;
}

/* Keep shared-profile navigation outside the scrolling content. In particular,
   the mobile dialog rules must not scroll the title behind the status bar. */
#friend-schedule-panel .friend-schedule-modal:not(.friend-schedule-loading) {
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: min(820px, calc(var(--app-live-viewport-height, 100dvh) - 56px));
  overflow: hidden !important;
  background: var(--panel);
}

.friend-schedule-content {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.friend-schedule-content.is-calendar {
  display: flex;
  overflow: hidden;
}

#friend-schedule-course-detail-modal:empty { display: none; }

#friend-schedule-panel .friend-schedule-modal-title h3 {
  font-size: 17px;
  font-weight: 650;
  line-height: 1.5;
}

#friend-schedule-panel .friend-schedule-close {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-radius: 12px;
}

#friend-schedule-panel .friend-shared-tabs {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

#friend-schedule-panel .friend-shared-tabs button {
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

#friend-schedule-panel .friend-homework-panel {
  max-height: none;
  overflow: visible;
  gap: 0;
}

#friend-schedule-panel .friend-homework-header {
  position: static;
  margin: 0;
  padding: 12px;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}

#friend-schedule-panel .friend-homework-header h4 {
  font-weight: 600;
  line-height: 1.5;
}

#friend-schedule-panel .friend-homework-header span,
#friend-schedule-panel .friend-shared-home-item span {
  font-weight: 500;
  line-height: 1.6;
}

#friend-schedule-panel .friend-shared-home-list { padding: 12px; }
#friend-schedule-panel .friend-shared-home-item strong { font-weight: 600; line-height: 1.5; }

#friend-schedule-panel .friend-homework-group {
  display: grid;
  gap: 8px;
  min-width: 0;
}

#friend-schedule-panel .friend-homework-group + .friend-homework-group {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

#friend-schedule-panel .friend-homework-group h5 {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#friend-schedule-panel .friend-shared-answer-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

#friend-schedule-panel .friend-shared-answer-item:hover,
#friend-schedule-panel .friend-shared-answer-item:focus-visible {
  border-color: rgba(53, 212, 255, 0.46);
  background: rgba(53, 212, 255, 0.08);
  outline: none;
}

#friend-schedule-panel .friend-shared-answer-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#friend-schedule-panel .friend-shared-answer-open {
  color: var(--cyan, #35d4ff);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.friend-schedule-modal > * {
  min-width: 0;
}

/* app-one-components.css restyles every .panel-header as flex after this
   stylesheet loads. This stronger selector preserves the intended three-column
   semester navigator: previous / centered term / next. */
html[data-a1-skin] .panel-header.friend-schedule-term-header.schedule-header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.friend-schedule-term-header > [data-friend-schedule-prev] {
  grid-column: 1;
}

.friend-schedule-term-header > .friend-schedule-term-title {
  grid-column: 2;
}

.friend-schedule-term-header > [data-friend-schedule-next] {
  grid-column: 3;
}

.friend-schedule-term-header > .friend-schedule-term-menu {
  grid-column: 1 / -1;
}

.friend-schedule-nav svg {
  display: block;
  width: 19px;
  height: 19px;
}

.friend-personal-calendar-panel.friend-calendar-browser {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  max-height: none;
  min-width: 0;
  overflow: hidden;
  margin-bottom: 0;
}

.friend-calendar-browser-header {
  min-height: 38px;
}

/* One toolbar row: optional empty hint on the left, Today + the view menu
   (same ☰ pattern as the owner's Calendar) on the right. */
.friend-calendar-browser-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 0;
}

.friend-calendar-empty-hint {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The shared-header span rule applies ellipsis clipping; this span hosts the
   absolutely-positioned view dropdown, which that clipping would swallow
   whole, hence the header-qualified selector to outrank it. */
.friend-shared-header .friend-calendar-browser-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  /* .a1-icon-button expands its touch target by 4px with ::after. Reserve the
     same room so that affordance does not create horizontal calendar scroll. */
  padding-right: 4px;
  overflow: visible;
  white-space: nowrap;
}

.friend-shared-header.friend-calendar-browser-toolbar {
  overflow: visible;
}

.friend-calendar-view-menu {
  position: relative;
}

.friend-shared-header .friend-calendar-browser-title {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin: 0;
  overflow: visible;
  white-space: normal;
}

.friend-calendar-browser-title h4,
.friend-calendar-browser-title small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-calendar-browser-title small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.friend-calendar-today {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 34px;
  padding: 0 11px;
}

.friend-calendar-view-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
}

.friend-calendar-view-tabs button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-calendar-pager {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

/* These controls are already 40px on phones. The generic icon component adds
   a 4px visual overflow to enlarge compact hit targets; inside this bounded
   pager that overflow became a 3px horizontal white edge. */
.friend-calendar-pager .a1-icon-button::after {
  inset: 0;
}

.friend-calendar-range {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-calendar-browser-view {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}

.friend-calendar-browser-view .a1-tg { height: 100%; }
.friend-calendar-browser-view .a1-tg .a1-tg__scroll { height: 100%; }
.friend-calendar-browser-view:is(.is-month, .is-year) { overflow-y: auto; }
.friend-calendar-view-menu .calendar-view-menu-list button { min-height: 44px; }
.friend-calendar-browser .friend-calendar-pager { padding: 0 4px; }

.friend-calendar-browser-view .a1-tg,
.friend-calendar-browser-view .a1-month,
.friend-calendar-browser-view .a1-year {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.friend-calendar-browser .a1-tgi__open {
  cursor: default;
}

.friend-calendar-browser .calendar-readonly-kind {
  pointer-events: none;
}

.friend-calendar-browser .a1-tgi.is-friend-private,
.friend-calendar-browser .a1-tgi.is-friend-private.is-today,
.friend-calendar-browser .a1-tgi.is-friend-private.is-task,
.friend-calendar-browser .a1-tgi.is-friend-private.is-reminder {
  border-color: #050505;
  color: #fff;
  background: #171717;
  box-shadow: inset 2px 0 0 #050505;
}

.friend-calendar-browser .a1-tgi.is-friend-private .a1-tgi__n,
.friend-calendar-browser .a1-tgi.is-friend-private .a1-tgi__t,
.friend-calendar-browser .a1-tgi.is-friend-private .a1-tgi__kind {
  color: #fff;
}

@media (max-width: 980px) {
  .friend-schedule-modal {
    max-width: 100dvw;
  }

  #friend-schedule-panel .friend-schedule-modal {
    padding: 0 max(8px, var(--a1-safe-right)) calc(8px + var(--a1-safe-bottom)) max(8px, var(--a1-safe-left));
    gap: 8px;
  }

  #friend-schedule-panel .friend-schedule-modal-header {
    padding: calc(12px + var(--a1-safe-top)) 4px 4px !important;
  }

  #friend-schedule-panel .friend-calendar-today,
  #friend-schedule-panel .friend-calendar-view-menu > summary {
    min-height: 44px;
    min-width: 44px;
  }

  html[data-a1-skin] .panel-header.friend-schedule-term-header.schedule-header {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 6px;
  }

  .friend-calendar-view-tabs {
    overflow-x: auto;
  }

  .friend-calendar-view-tabs button {
    min-height: 38px;
    padding-inline: 4px;
    font-size: 10px;
  }

  .friend-calendar-pager {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 5px;
  }

  .friend-calendar-pager .a1-icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .friend-calendar-browser-view .a1-year {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Email is launched from Home as a standalone mail window. The feature still
   uses the shared route lifecycle, but its host is promoted above the app
   chrome so the sidebar/bottom navigation cannot compete with mail controls. */
body.email-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.email-modal-open .sidebar,
body.email-modal-open .workspace-header,
body.email-modal-open .offline-banner {
  display: none !important;
}

body.email-modal-open .feature-nav {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.email-modal-open .feature-host {
  position: fixed;
  z-index: 600;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100vw;
  height: var(--app-live-viewport-height, 100dvh);
  min-width: 0;
  padding: 24px;
  overflow: hidden;
  background: rgba(3, 7, 13, 0.72);
  backdrop-filter: blur(8px);
}

body.email-modal-open .email-assistant-shell {
  display: block;
  box-sizing: border-box;
  width: min(1040px, 100%);
  height: min(880px, calc(var(--app-live-viewport-height, 100dvh) - 48px));
  min-width: 0;
  min-height: 0;
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg, #0a0e15);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.48);
  scrollbar-gutter: stable;
}

body.email-modal-open .email-layout {
  margin-top: 16px;
}

@media (max-width: 980px) {
  body.email-modal-open .app-view:not(.hidden) {
    min-height: var(--app-live-viewport-height, 100dvh);
    padding: 0;
  }

  body.email-modal-open .workspace {
    min-height: 0;
    padding: 0;
  }

  body.email-modal-open .feature-host {
    place-items: stretch;
    padding: 0;
    background: var(--bg, #0a0e15);
    backdrop-filter: none;
  }

  body.email-modal-open .email-assistant-shell {
    width: 100%;
    height: var(--app-live-viewport-height, 100dvh);
    max-height: var(--app-live-viewport-height, 100dvh);
    padding:
      calc(8px + var(--a1-safe-top))
      max(10px, var(--a1-safe-right))
      calc(12px + var(--a1-safe-bottom))
      max(10px, var(--a1-safe-left));
    border: 0;
    border-radius: 0;
    background: var(--bg, #0a0e15);
    box-shadow: none;
    scrollbar-gutter: auto;
  }

  body.email-modal-open .email-inbox-tabs > button {
    gap: 4px;
  }

body.email-modal-open .email-inbox-tabs > button > span {
    font-size: 9.75px;
    letter-spacing: 0.035em;
  }
}

/* --------------------------------------------------------------------------
   Calendar mobile planner

   Phones use one edge-to-edge planning surface: a quiet month masthead, the
   existing 3-day grid, and a floating add action. Desktop keeps the complete
   dashboard header and summary. All colour comes from the active App One skin,
   so the same composition works in Light, Dark, and custom accent themes.
   -------------------------------------------------------------------------- */
.calendar-mobile-month,
.calendar-mobile-more {
  display: none;
}

@media (max-width: 980px) {
  body[data-active-feature="calendar"] {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body[data-active-feature="calendar"] .app-view:not(.hidden) {
    min-height: var(--app-live-viewport-height, 100dvh);
    overflow: hidden;
  }

  html[data-a1-skin] body[data-active-feature="calendar"] .workspace {
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  body[data-active-feature="calendar"] .feature-host {
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  body[data-active-feature="calendar"] .calendar-shell {
    display: block;
    width: 100%;
    height: calc(var(--app-live-viewport-height, 100dvh) - 70px - var(--a1-safe-bottom));
    min-height: 0;
    overflow: hidden;
    background: var(--a1-bg, var(--bg));
  }

  html[data-a1-skin] body[data-active-feature="calendar"] .calendar-greeting,
  body[data-active-feature="calendar"] .calendar-panel .a1-segmented[aria-label="Calendar view"] {
    display: none !important;
  }

  html[data-a1-skin] body[data-active-feature="calendar"] .calendar-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  html[data-a1-skin] body[data-active-feature="calendar"] .calendar-panel:has(.calendar-view-menu[open]),
  html[data-a1-skin] body[data-active-feature="calendar"] .calendar-panel:has(.calendar-mobile-more[open]) {
    overflow: visible;
  }

  html[data-a1-skin] body[data-active-feature="calendar"] .calendar-panel > .panel-header {
    position: relative;
    z-index: 12;
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    align-items: center;
    gap: 10px;
    min-height: calc(72px + var(--a1-safe-top));
    padding:
      calc(10px + var(--a1-safe-top))
      max(14px, var(--a1-safe-right))
      10px
      max(14px, var(--a1-safe-left));
    border: 0;
    background: transparent;
  }

  html[data-a1-skin] body[data-active-feature="calendar"] #calendar-title {
    display: none;
  }

  body[data-active-feature="calendar"] .calendar-mobile-month {
    display: block;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 9px 4px;
    overflow: hidden;
    border: 0;
    color: var(--text);
    background: transparent;
    font: 750 clamp(19px, 5.5vw, 23px)/1.2 var(--a1-font, inherit);
    letter-spacing: -0.02em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }

  body[data-active-feature="calendar"] .calendar-mobile-month:focus-visible {
    border-radius: 12px;
    outline: 2px solid var(--a1-accent);
    outline-offset: 2px;
  }

  html[data-a1-skin] body[data-active-feature="calendar"] .calendar-panel .panel-actions {
    display: contents;
  }

  body[data-active-feature="calendar"] .calendar-panel #calendar-zoom-in,
  body[data-active-feature="calendar"] .calendar-panel #calendar-zoom-out {
    display: none !important;
  }

  body[data-active-feature="calendar"] .calendar-view-menu,
  body[data-active-feature="calendar"] .calendar-mobile-more {
    position: relative;
    grid-row: 1;
  }

  body[data-active-feature="calendar"] .calendar-view-menu {
    display: block;
    grid-column: 1;
  }

  body[data-active-feature="calendar"] .calendar-mobile-more {
    display: block;
    grid-column: 3;
  }

  html[data-a1-skin] body[data-active-feature="calendar"] .calendar-panel .calendar-view-menu > summary,
  html[data-a1-skin] body[data-active-feature="calendar"] .calendar-panel .calendar-mobile-more > summary {
    display: grid;
    place-items: center;
    width: 52px;
    min-width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 0;
    list-style: none;
    border: 1px solid color-mix(in srgb, var(--a1-border) 70%, transparent);
    border-radius: 50%;
    color: var(--a1-text);
    background: color-mix(in srgb, var(--a1-surface) 92%, transparent);
    box-shadow: var(--a1-shadow-1);
    cursor: pointer;
  }

  body[data-active-feature="calendar"] .calendar-mobile-more > summary::-webkit-details-marker {
    display: none;
  }

  body[data-active-feature="calendar"] .calendar-view-menu-list,
  body[data-active-feature="calendar"] .calendar-mobile-more-list {
    position: absolute;
    top: calc(100% + 8px);
    z-index: 90;
    display: grid;
    gap: 2px;
    min-width: 154px;
    padding: 7px;
    overflow: hidden;
    border: 1px solid var(--a1-border);
    border-radius: 14px;
    background: var(--a1-surface);
    box-shadow: var(--a1-shadow-3);
  }

  body[data-active-feature="calendar"] .calendar-view-menu-list {
    right: auto;
    left: 0;
  }

  body[data-active-feature="calendar"] .calendar-mobile-more-list {
    right: 0;
  }

  body[data-active-feature="calendar"] .calendar-mobile-more-list button {
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: 9px;
    color: var(--a1-text);
    background: transparent;
    font: 650 13px/1.2 var(--a1-font, inherit);
    text-align: left;
    cursor: pointer;
  }

  body[data-active-feature="calendar"] .calendar-mobile-more-list button:hover,
  body[data-active-feature="calendar"] .calendar-mobile-more-list button:focus-visible {
    background: var(--a1-surface-2);
    outline: none;
  }

  body[data-active-feature="calendar"] .calendar-mobile-more-list button[hidden] {
    display: none !important;
  }

  body[data-active-feature="calendar"] .calendar-mobile-more-divider {
    height: 1px;
    margin: 3px 5px;
    background: var(--a1-border);
  }

  html[data-a1-skin] body[data-active-feature="calendar"] .calendar-panel > .panel-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  body[data-active-feature="calendar"] #calendar-status:empty,
  body[data-active-feature="calendar"] #calendar-unscheduled:empty {
    display: none;
  }

  body[data-active-feature="calendar"] #calendar-status:not(:empty) {
    flex: 0 0 auto;
    margin: 0 14px 8px;
  }

  body[data-active-feature="calendar"] #calendar-view {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }

  body[data-active-feature="calendar"] #calendar-view.is-three {
    display: flex;
    overflow: hidden;
  }

  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tg {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    --a1-tg-gutter: 42px;
    --a1-tg-col: 0px;
  }

  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tg__scroll,
  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tg.is-zoomed .a1-tg__scroll {
    width: 100%;
    height: 100%;
    overflow: auto;
    border: 0;
    border-top: 1px solid var(--a1-border);
    border-radius: 0;
    background: var(--a1-surface);
    touch-action: pan-y pinch-zoom;
  }

  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tg__grid {
    width: 100%;
    min-width: 100%;
    grid-template-columns: var(--a1-tg-gutter) repeat(3, minmax(0, 1fr));
  }

  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tg__cap {
    min-height: 68px;
    justify-content: center;
    gap: 7px;
    padding: 9px 3px 8px;
    border-bottom: 0;
    box-shadow: none;
    touch-action: pan-y;
  }

  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tg__cap-corner {
    border-bottom: 0;
  }

  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tg__dow {
    font-size: 12px;
    font-weight: 650;
  }

  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tg__date {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 720;
  }

  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tg__cap.is-today .a1-tg__date {
    background: var(--a1-accent-soft);
    color: var(--a1-accent-text);
  }

  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tg__allday {
    min-height: 24px;
    padding: 3px 2px 5px;
  }

  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tg__allday-gutter span {
    display: none;
  }

  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tg__allday .a1-tgi {
    min-height: 22px;
    padding: 2px 5px 2px 7px;
    border-radius: 6px;
  }

  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tg__allday .a1-tgi__n {
    font-size: 11px;
  }

  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tg__hour:not(.h3) {
    display: block;
  }

  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tg__hour {
    right: 7px;
    color: var(--a1-text-3);
    font-size: 11px;
    font-weight: 600;
  }

  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tg__col.is-today,
  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tg__col.is-weekend {
    background-color: var(--a1-surface);
  }

  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tgi {
    padding: 2px 4px 2px 6px;
  }

  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tgi__n {
    font-size: 11px;
  }

  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tgi__t {
    font-size: 9px;
  }

  body[data-active-feature="calendar"] #calendar-add {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    color: var(--a1-on-accent);
    background: var(--a1-accent);
    box-shadow: var(--a1-shadow-1);
  }
}

/* Calendar navigation stays in its own toolbar, clear of the draggable Assistant. */
.calendar-pager-row { flex-shrink: 0; padding: 6px 0 10px; }
.calendar-range-button { min-height: 44px; border-radius: 12px; }
.calendar-date-dialog { width: min(390px, calc(100vw - 32px)); max-height: calc(var(--app-live-viewport-height, 100dvh) - 40px); overflow: auto; padding: 20px; border: 1px solid var(--a1-border, #ccc); border-radius: 24px; color: var(--a1-text, var(--text)); background: var(--a1-surface, var(--bg)); box-shadow: 0 20px 80px #0004; }
.calendar-date-dialog::backdrop { background: #16213b66; backdrop-filter: blur(4px); }
.calendar-date-dialog form { display: grid; gap: 16px; }
.calendar-date-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calendar-date-dialog h3 { margin: 0; font-size: 20px; }
.calendar-date-selectors { display: grid; grid-template-columns: 1fr 110px; gap: 12px; }
.calendar-date-dialog label { display: grid; gap: 6px; font-size: 13px; }
.calendar-date-dialog input, .calendar-date-dialog select { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }
.calendar-jump-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.calendar-jump-days > span { padding: 8px 0; font-size: 12px; color: var(--a1-text-3); }
.calendar-jump-days button { min-width: 0; min-height: 40px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.calendar-jump-days button.is-out { opacity: .4; }
.calendar-jump-days button.is-selected { background: var(--a1-accent); color: var(--a1-on-accent); }
.calendar-jump-days button:focus-visible { outline: 2px solid var(--a1-accent); }
.home-reminder-schedule-toggle { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; }
.home-reminder-schedule-toggle input { width: 22px; height: 22px; }
.calendar-shell #calendar-view { overscroll-behavior-x: contain; touch-action: pan-y; }
.calendar-shell #calendar-view .a1-tg__scroll { touch-action: pan-y; }
@media (max-width: 980px) {
  html[data-a1-skin] body[data-active-feature="calendar"] .calendar-panel > .panel-header { min-height: calc(64px + var(--a1-safe-top)); grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; padding-bottom: 4px; }
  html[data-a1-skin] body[data-active-feature="calendar"] .calendar-panel .calendar-view-menu > summary,
  html[data-a1-skin] body[data-active-feature="calendar"] .calendar-panel .calendar-mobile-more > summary { width: 44px; min-width: 44px; height: 44px; min-height: 44px; border-radius: 14px; box-shadow: none; }
  body[data-active-feature="calendar"] .calendar-mobile-month { font-size: clamp(17px, 4.6vw, 21px); min-height: 44px; }
  body[data-active-feature="calendar"] .calendar-pager-row { display: flex !important; gap: 2px !important; padding: 4px 12px 10px; }
  body[data-active-feature="calendar"] .calendar-pager-row > button { flex-shrink: 0; min-height: 44px; }
  body[data-active-feature="calendar"] .calendar-pager-row .calendar-range-button { font-size: 12px; padding: 4px; }
  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tg__scroll,
  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tg.is-zoomed .a1-tg__scroll { touch-action: pan-y; }
  body[data-active-feature="calendar"] #calendar-unscheduled { max-height: 22vh; overflow-y: auto; flex-shrink: 0; }
}

/* Canvas reader: provider content inherits the app's typography and theme. */
.assistant-citation-file-dialog { box-sizing: border-box; width: min(1040px, calc(100vw - 32px)); height: min(900px, calc(var(--app-live-viewport-height, 100dvh) - 32px)); max-width: none; max-height: none; padding: 0; border: 1px solid var(--a1-border); border-radius: 20px; color: var(--a1-text, var(--text)); background: var(--a1-surface, var(--panel)); overflow: hidden; }
.assistant-citation-file-dialog[open] { display: flex; flex-direction: column; }
.assistant-citation-file-dialog::backdrop { background: #16213b66; }
.assistant-citation-file-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex: 0 0 auto; padding: 16px; }
.assistant-citation-file-head h2 { min-width: 0; margin: 0; font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
.assistant-citation-file-dialog [data-citation-file-close] { flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--a1-surface-2); color: inherit; font-size: 24px; cursor: pointer; }
.assistant-citation-file-body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; padding: 0 16px 12px; overflow: auto; overscroll-behavior: contain; }
.assistant-citation-file-status { margin: 0; overflow-wrap: anywhere; }
.assistant-citation-file-status:empty { display: none; }
.assistant-citation-file-dialog [data-citation-file-retry] { align-self: flex-start; min-height: 44px; }
.assistant-citation-file-preview { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: auto; }
.assistant-citation-file-preview iframe { display: block; flex: 1 1 auto; width: 100%; height: 100%; min-height: 220px; border: 0; background: white; }
.assistant-citation-file-preview img { max-width: 100%; height: auto; object-fit: contain; }
.assistant-citation-file-preview pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-citation-file-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; flex: 0 0 auto; padding: 10px 16px 16px; border-top: 1px solid var(--a1-border); }
.assistant-citation-file-actions a { display: inline-flex; align-items: center; min-height: 44px; color: var(--a1-accent-text, var(--accent)); text-decoration: underline; }
.assistant-citation-file-actions a[hidden] { display: none; }
@media (max-width: 980px) {
  dialog.assistant-citation-file-dialog[open] { position: fixed; inset: var(--app-live-viewport-top, 0px) auto auto var(--app-live-viewport-left, 0px); width: var(--app-live-viewport-width, 100dvw); height: var(--app-live-viewport-height, 100dvh); min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden !important; }
  .assistant-citation-file-head { padding: calc(14px + var(--a1-safe-top, 0px)) max(14px, var(--a1-safe-right, 0px)) 12px max(14px, var(--a1-safe-left, 0px)); }
  .assistant-citation-file-actions { padding-bottom: calc(10px + var(--a1-safe-bottom, 0px)); }
}

.canvas-history-dialog { width: min(880px, calc(100vw - 32px)); height: min(800px, calc(var(--app-live-viewport-height, 100dvh) - 40px)); max-width: none; max-height: none; padding: 0; border: 1px solid var(--a1-border); border-radius: 24px; color: var(--a1-text, var(--text)); background: var(--a1-surface, var(--bg)); }
.canvas-history-dialog[open] { display: flex; flex-direction: column; }
.canvas-history-dialog::backdrop { background: #16213b66; backdrop-filter: blur(4px); }
.canvas-history-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 12px; }
.canvas-history-dialog h2, .canvas-history-dialog h3 { margin: 0 0 8px; overflow-wrap: anywhere; }
.canvas-history-dialog header p { margin: 0; font-size: 13px; color: var(--a1-text-3); }
.canvas-history-dialog button { min-height: 44px; cursor: pointer; }
.canvas-history-dialog [data-canvas-close] { flex: 0 0 44px; font-size: 24px; border: 0; border-radius: 50%; background: var(--a1-surface-2); color: inherit; }
.canvas-history-tabs { display: flex; gap: 8px; padding: 0 24px 14px; overflow-x: auto; flex-shrink: 0; border-bottom: 1px solid var(--a1-border); }
.canvas-history-tabs button { flex-shrink: 0; border-radius: 22px; padding: 8px 14px; border: 1px solid var(--a1-border); background: transparent; color: inherit; }
.canvas-history-tabs button[aria-pressed="true"] { background: var(--a1-accent); color: var(--a1-on-accent); border-color: transparent; }
.canvas-history-content { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 32px; }
.canvas-history-content [hidden] { display: none !important; }
/* Assignment hand-in must remain usable even if the optional component sheet
   is stale or unavailable in an installed PWA. */
.canvas-assignment-dialog, .canvas-assignment-dialog * { box-sizing: border-box; }
.canvas-assignment-dialog { min-width: 0; font-size: 14px; }
.canvas-assignment-dialog [hidden] { display: none !important; }
.canvas-assignment-dialog > header > div, .canvas-assignment-dialog .canvas-history-content,
.canvas-assignment-dialog section, .canvas-assignment-dialog form { min-width: 0; }
.canvas-assignment-dialog .canvas-assignment-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 0 24px; }
.canvas-assignment-dialog .canvas-assignment-toolbar > button { width: auto; flex: 0 0 auto; }
.canvas-assignment-dialog .canvas-assignment-toolbar a { min-width: 0; overflow-wrap: anywhere; }
.canvas-assignment-dialog .canvas-assignment-status { margin: 8px 24px 14px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.canvas-assignment-dialog .canvas-assignment-stamp { display: grid; gap: 5px; padding: 14px 16px; border-radius: 10px; background: var(--a1-surface-2); overflow-wrap: anywhere; }
.canvas-assignment-dialog .canvas-assignment-stamp span { color: var(--a1-text-2); font-size: 13px; }
.canvas-assignment-dialog section + section { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--a1-border); }
.canvas-assignment-dialog :is(h3,h4) { margin: 0 0 12px; }
.canvas-assignment-dialog fieldset { display: grid; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.canvas-assignment-dialog fieldset > label, .canvas-assignment-dialog .canvas-assignment-upload,
.canvas-assignment-dialog .canvas-assignment-device-file, .canvas-assignment-dialog .canvas-assignment-file-search { display: grid; gap: 7px; min-width: 0; }
.canvas-assignment-dialog :is(input,select,textarea) { max-width: 100%; min-width: 0; font: inherit; }
.canvas-assignment-dialog :is(select,input[type="url"],input[type="search"],textarea) { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--a1-border); border-radius: 9px; background: var(--a1-surface); color: var(--a1-text); font-size: 16px; }
.canvas-assignment-dialog input[type="file"] { width: 100%; padding: 10px; border: 1px solid var(--a1-border); border-radius: 9px; background: var(--a1-surface); font-size: 14px; }
.canvas-assignment-dialog fieldset > button { justify-self: start; max-width: 100%; white-space: normal; }
.canvas-assignment-field-label { margin: 0; font-weight: 650; }
.canvas-assignment-upload [data-file-panel] { display: grid; gap: 8px; min-width: 0; }
.canvas-assignment-source-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.canvas-assignment-source-tabs button { min-height: 42px; padding: 8px 14px; border: 1px solid var(--a1-border); border-radius: 9px; background: var(--a1-surface); color: var(--a1-text); }
.canvas-assignment-source-tabs button[aria-pressed="true"] { border-color: var(--a1-accent); background: var(--a1-accent-soft); color: var(--a1-accent-text); font-weight: 650; }
.canvas-assignment-device-file, .canvas-assignment-file-search { font-weight: 600; }
.canvas-assignment-file-list { display: grid; max-height: min(32vh, 290px); overflow-y: auto; border: 1px solid var(--a1-border); border-radius: 10px; }
.canvas-assignment-file-option { display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-bottom: 1px solid var(--a1-border); cursor: pointer; }
.canvas-assignment-file-option:last-child { border-bottom: 0; }
.canvas-assignment-file-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; border-bottom: 1px solid var(--a1-border); }
.canvas-assignment-file-row:last-child { border-bottom: 0; }
.canvas-assignment-file-row .canvas-assignment-file-option { border-bottom: 0; }
.canvas-assignment-file-row > button, .canvas-assignment-review-files button { margin-right: 12px; padding: 8px; border: 0; background: transparent; color: var(--a1-accent-text); font: inherit; font-weight: 650; cursor: pointer; }
.canvas-assignment-file-option input { width: 18px; height: 18px; margin: 0; }
.canvas-assignment-file-option span, .canvas-assignment-file-option strong,
.canvas-assignment-file-option small { display: block; min-width: 0; overflow-wrap: anywhere; }
.canvas-assignment-file-option small, .canvas-assignment-file-list-note { color: var(--a1-text-2); font-size: 12px; line-height: 1.45; }
.canvas-assignment-file-list-note { margin: 0; padding: 12px; }
.canvas-assignment-selected-files { min-width: 0; padding: 10px 12px; border-radius: 9px; background: var(--a1-surface-2); }
.canvas-assignment-selected-files ul { display: grid; gap: 7px; margin: 8px 0 0; padding: 0; list-style: none; }
.canvas-assignment-selected-files li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
.canvas-assignment-selected-files li span { min-width: 0; }
.canvas-assignment-selected-files small { display: block; color: var(--a1-text-2); }
.canvas-assignment-selected-files button { flex: 0 0 auto; border: 0; background: transparent; color: var(--a1-accent-text); }
.canvas-assignment-file-actions { display: inline-flex; gap: 8px; }
.canvas-assignment-preview { display: grid; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--a1-border); border-radius: 10px; background: var(--a1-surface-2); }
.canvas-assignment-preview-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.canvas-assignment-preview-head strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.canvas-assignment-preview-head a { color: var(--a1-accent-text); }
.canvas-assignment-preview-head button { width: 36px; height: 36px; border: 1px solid var(--a1-border); border-radius: 8px; background: var(--a1-surface); color: var(--a1-text); font-size: 22px; }
.canvas-assignment-preview iframe, .canvas-assignment-preview img { display: block; width: 100%; max-height: 62vh; min-height: min(45vh, 380px); border: 0; border-radius: 7px; background: white; object-fit: contain; }
.canvas-assignment-preview pre { max-height: 55vh; margin: 0; padding: 12px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.canvas-assignment-review-files { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.canvas-assignment-review-files li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 9px; border-radius: 8px; background: var(--a1-surface-2); }
.canvas-assignment-review-files li span { min-width: 0; overflow-wrap: anywhere; }
.canvas-assignment-review-files small { display: block; color: var(--a1-text-2); }
.canvas-assignment-dialog [data-file-hint] { display: block; overflow-wrap: anywhere; }
.canvas-assignment-review { min-width: 0; padding: 16px; border: 1px solid var(--a1-border); border-radius: 10px; }
.canvas-assignment-review :is(p,[data-review-content]) { overflow-wrap: anywhere; }
.canvas-assignment-review [data-review-content] { white-space: pre-wrap; }
.canvas-assignment-review > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.canvas-assignment-review > .canvas-assignment-preview, .canvas-assignment-review > [data-review-content] { display: block; }
.canvas-assignment-review > .canvas-assignment-review-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.canvas-assignment-review-actions > button { width: 100%; min-width: 0; min-height: 44px; }

/* Gradescope uses the same full-page assignment shell as Canvas, with a
   separate PDF review step before any provider upload. */
.gradescope-assignment-dialog .canvas-assignment-compose { min-width: 0; }
.gradescope-assignment-dialog [data-close] { flex: 0 0 44px; width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--a1-surface-2); color: inherit; font-size: 24px; }
.gradescope-assignment-dialog .canvas-assignment-submission > button { margin-top: 10px; }
.gradescope-current-submission-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.gradescope-current-submission-head h3 { min-width: 0; }
.gradescope-current-submission-head a { flex: 0 0 auto; color: var(--a1-accent-text); font-weight: 650; text-decoration: none; }
.gradescope-submission-pages { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--a1-border); border-radius: 10px; }
.gradescope-submission-pages summary { cursor: pointer; color: var(--a1-accent-text); font-weight: 650; }
.gradescope-submission-pages > div { display: grid; gap: 8px; margin-top: 10px; }
.gradescope-submission-page-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; min-width: 0; font-size: 13px; }
.gradescope-submission-page-row strong { min-width: 0; overflow-wrap: anywhere; }
.gradescope-submission-page-row span { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 8px; }
.gradescope-submission-page-row a { color: var(--a1-accent-text); }
.gradescope-submission-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gradescope-reselect-panel { display: grid; gap: 12px; margin-top: 12px; padding: 14px; border: 1px solid var(--a1-border); border-radius: 10px; background: var(--a1-surface-2); }
.gradescope-reselect-panel .canvas-assignment-review-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gradescope-assignment-help { margin: 0 0 14px; color: var(--a1-text-2); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.gradescope-assignment-editor { display: grid; gap: 14px; min-width: 0; }
.gradescope-assignment-editor [data-panel] { display: grid; gap: 9px; min-width: 0; }
.gradescope-assignment-editor > .primary-button { justify-self: start; min-height: 44px; }
.gradescope-assignment-editor .canvas-assignment-selected-files { display: grid; gap: 3px; }
.gradescope-assignment-editor .canvas-assignment-selected-files strong,
.gradescope-assignment-editor .canvas-assignment-selected-files small { min-width: 0; overflow-wrap: anywhere; }
.gradescope-assignment-editor .canvas-assignment-selected-files small { color: var(--a1-text-2); }
.gradescope-assignment-option { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--a1-border); border-radius: 10px; cursor: pointer; }
.gradescope-assignment-option input { flex: 0 0 auto; width: 19px; height: 19px; margin: 1px 0 0; }
.gradescope-assignment-dialog .gradescope-assignment-option input[type="checkbox"] { flex: 0 0 19px; width: 19px; height: 19px; min-width: 19px; padding: 0; margin: 1px 0 0; }
.gradescope-assignment-option span { display: grid; gap: 3px; min-width: 0; }
.gradescope-assignment-option strong,
.gradescope-assignment-option small { overflow-wrap: anywhere; }
.gradescope-assignment-option small { color: var(--a1-text-2); font-size: 12px; line-height: 1.45; }
.gradescope-assignment-review { display: grid; gap: 14px; }
.gradescope-assignment-review > h4,
.gradescope-assignment-review > p { margin: 0; }
.gradescope-assignment-review > .canvas-assignment-preview { display: grid; }
.gradescope-assignment-dialog .gradescope-assignment-review > [data-pdf-preview] { display: grid; }
.gradescope-preview-notice { margin: 0; padding: 10px 12px; border-radius: 9px; background: color-mix(in srgb, var(--a1-warning, #b7791f) 12%, var(--a1-surface)); color: var(--a1-text); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.gradescope-assignment-review .gradescope-pdf-page-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); justify-content: stretch; gap: 12px; min-width: 0; max-height: 62vh; padding: 2px; overflow-y: auto; overscroll-behavior: contain; }
.gradescope-pdf-page-list figure { display: grid; gap: 6px; min-width: 0; margin: 0; }
.canvas-assignment-preview .gradescope-pdf-page-list img { width: 100%; height: auto; min-height: 0; max-height: none; border: 1px solid var(--a1-border); border-radius: 7px; background: #fff; object-fit: contain; }
.gradescope-pdf-page-list figcaption { color: var(--a1-text-2); font-size: 12px; text-align: center; }
.gradescope-pdf-fallback { display: none; }
.gradescope-assignment-dialog .gradescope-assignment-review > [data-page-section] { display: block; }
.gradescope-assignment-dialog .gradescope-assignment-review > .canvas-assignment-review-actions { display: grid; }
.gradescope-assignment-map-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px 10px; margin-bottom: 10px; }
.gradescope-assignment-map-head small { color: var(--a1-text-2); }
.gradescope-assignment-map { display: grid; gap: 8px; max-height: 44vh; overflow-y: auto; }
.gradescope-assignment-map-row { display: grid; gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--a1-border); border-radius: 9px; }
.gradescope-assignment-map-row > strong { min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.gradescope-assignment-map-row > div { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.gradescope-assignment-map-row label { position: relative; display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; border: 1px solid var(--a1-border); border-radius: 8px; cursor: pointer; }
.gradescope-assignment-map-row label:has(input:checked) { border-color: var(--a1-accent); background: var(--a1-accent-soft); color: var(--a1-accent-text); }
.gradescope-assignment-map-row input { position: absolute; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.gradescope-assignment-dialog .gradescope-assignment-map-row input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; padding: 0; margin: 0; opacity: 0; cursor: pointer; }
.gradescope-assignment-map-row label:focus-within { outline: 2px solid var(--a1-accent); outline-offset: 2px; }
.gradescope-assignment-map-row span { pointer-events: none; font-weight: 700; }
.gradescope-assignment-confirm { background: var(--a1-surface-2); }
@media (max-width: 980px) {
  .gradescope-assignment-dialog .canvas-assignment-source-tabs button { flex: 1 1 28%; }
  .gradescope-assignment-dialog .canvas-assignment-review-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gradescope-assignment-dialog .canvas-assignment-review-actions button { min-height: 48px; padding-inline: 8px; white-space: normal; }
  .gradescope-assignment-dialog .canvas-assignment-preview iframe { min-height: min(48vh, 430px); }
  .gradescope-pdf-fallback { display: block; }
  .gradescope-assignment-review .gradescope-pdf-page-list { display: block; max-height: none; overflow: visible; }
  .gradescope-pdf-page-list figure + figure { margin-top: 14px; }
  .gradescope-submission-page-row { grid-template-columns: minmax(0, 1fr); }
  .gradescope-submission-page-row span { justify-content: flex-start; }
}

.learn-answer-page-open { display: block; width: 100%; padding: 0; border: 0; background: #fff; cursor: zoom-in; }
.learn-answer-page-open:focus-visible { outline: 3px solid var(--a1-accent); outline-offset: -3px; }
.learn-gs-page-image-backdrop { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .78); }
.learn-gs-page-image-dialog { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; width: min(820px, 100%); max-height: 94dvh; padding: 14px; border-radius: 12px; background: var(--a1-surface); color: var(--a1-text); }
.learn-gs-page-image-dialog header { display: flex; justify-content: space-between; gap: 12px; }
.learn-gs-page-image-dialog header div { display: grid; gap: 3px; min-width: 0; }
.learn-gs-page-image-dialog header small { color: var(--a1-text-2); overflow-wrap: anywhere; }
.learn-gs-page-image-dialog header button { width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid var(--a1-border); border-radius: 8px; background: transparent; color: inherit; font-size: 24px; }
.learn-gs-page-image-dialog img { display: block; max-width: 100%; max-height: min(78dvh, 980px); min-height: 0; margin: auto; object-fit: contain; background: white; }
.learn-gs-page-image-dialog p { margin: 0; color: var(--a1-text-2); font-size: 12px; }
.canvas-history-toolbar { display: flex; align-items: center; gap: 12px; }
.canvas-history-toolbar h3 { margin: 0; }
.canvas-history-dialog [data-canvas-search-form] { display: flex; gap: 8px; margin: 14px 0; }
.canvas-history-dialog [type="search"] { flex: 1; min-width: 0; font-size: 16px; }
.canvas-history-row { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 12px; width: 100%; padding: 18px 0; border: 0; border-bottom: 1px solid var(--a1-border); background: transparent; color: inherit; text-align: left; }
.canvas-history-row strong, .canvas-history-row small { overflow-wrap: anywhere; }
.canvas-history-row small { grid-column: 1; color: var(--a1-text-3); font-size: 12px; }
.canvas-history-row > span { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 24px; }
.canvas-history-dialog [data-canvas-detail] > h3 { margin-top: 20px; font-size: 24px; line-height: 1.3; }
.canvas-rich-body, .canvas-message-text { font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.canvas-message-text { white-space: pre-wrap; }
.canvas-rich-body :first-child { margin-top: 0; }
.canvas-rich-body p, .canvas-rich-body ul, .canvas-rich-body ol { margin: 0 0 1em; }
.canvas-rich-body ul, .canvas-rich-body ol { padding-left: 1.6em; }
.canvas-rich-body h1, .canvas-rich-body h2, .canvas-rich-body h3 { line-height: 1.3; margin: 1.2em 0 .6em; font-size: 1.3em; }
.canvas-rich-body a { color: var(--a1-accent); text-decoration: underline; }
.canvas-rich-body img { display: block; max-width: 100%; height: auto; border-radius: 8px; }
.canvas-rich-body pre { white-space: pre-wrap; padding: 12px; background: var(--a1-surface-2); border-radius: 8px; }
.canvas-rich-body blockquote { margin: 1em 0; padding-left: 16px; border-left: 3px solid var(--a1-accent); }
.canvas-table-scroll { max-width: 100%; overflow-x: auto; margin: 16px 0; }
.canvas-rich-body table { border-collapse: collapse; min-width: 100%; }
.canvas-rich-body td, .canvas-rich-body th { border: 1px solid var(--a1-border); padding: 9px 12px; text-align: left; }
.canvas-rich-body th { background: var(--a1-surface-2); }
.canvas-message-meta, .canvas-image-placeholder { font-size: 13px; color: var(--a1-text-3); }
.canvas-conversation-message { padding: 18px 0; border-bottom: 1px solid var(--a1-border); }
.canvas-reader-warning { padding: 12px; border: 1px solid var(--a1-border); border-radius: 10px; }
.canvas-handout { margin-top: 16px; }
.canvas-handout summary { min-height: 44px; cursor: pointer; }
.canvas-handout iframe { width: 100%; height: 60vh; border: 0; }
.home-notification-controls { flex-wrap: wrap; }
@media (max-width: 980px) {
  .canvas-history-dialog { width: 100%; height: var(--app-live-viewport-height, 100dvh); margin: 0; border: 0; border-radius: 0; }
  .canvas-history-dialog > header { padding: calc(16px + var(--a1-safe-top)) 18px 14px; }
  .canvas-history-tabs { padding-left: 18px; padding-right: 18px; }
  .canvas-history-content { padding: 18px 18px calc(24px + var(--a1-safe-bottom)); }
  .canvas-assignment-dialog .canvas-assignment-toolbar { padding-inline: 18px; }
  .canvas-assignment-dialog .canvas-assignment-status { margin-inline: 18px; }
  .canvas-assignment-dialog .canvas-assignment-source-tabs button { flex: 1 1 auto; }
  .canvas-assignment-dialog .canvas-assignment-file-list { max-height: min(29vh, 250px); }
  .home-tab-panel-head:has([data-home-canvas-history]) { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 980px) {
}

/* Cross-feature deep links stay covered until their actual result/dialog is
   ready, so an intermediate Home/Learn screen never looks like the endpoint. */
.global-navigation-wait { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; box-sizing: border-box; min-width: 0; min-height: 0; padding: calc(20px + var(--a1-safe-top, 0px)) 20px calc(20px + var(--a1-safe-bottom, 0px)); background: color-mix(in srgb, var(--a1-surface) 94%, transparent); color: var(--a1-text); backdrop-filter: blur(10px); }
.global-navigation-wait-close { position: absolute; top: calc(12px + var(--a1-safe-top, 0px)); right: calc(12px + var(--a1-safe-right, 0px)); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--a1-border); border-radius: 50%; background: var(--a1-surface-2); color: var(--a1-text); font: 400 28px/1 var(--a1-font); cursor: pointer; }
.global-navigation-wait-card { display: grid; justify-items: center; gap: 13px; width: min(360px, 100%); padding: 26px 22px; text-align: center; }
.global-navigation-wait-card strong { font-size: 18px; overflow-wrap: anywhere; }
.global-navigation-wait-card small { color: var(--a1-text-2); font-size: 13px; }
.global-navigation-wait-spinner { width: 46px; height: 46px; box-sizing: border-box; border: 4px solid color-mix(in srgb, var(--a1-accent) 20%, var(--a1-border)); border-top-color: var(--a1-accent); border-radius: 50%; animation: global-navigation-wait-spin .75s linear infinite; }
@keyframes global-navigation-wait-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .global-navigation-wait-spinner { animation-duration: 1.8s; } }

.canvas-history-dialog :is([data-canvas-detail-back], [data-canvas-back], [data-canvas-more], [data-canvas-retry], [data-canvas-search-form] button) {
  padding: 9px 14px;
  border: 1px solid var(--a1-border);
  border-radius: 12px;
  background: var(--a1-surface-2);
  color: var(--a1-text, var(--text));
  font: inherit;
  font-size: 14px;
}
.canvas-history-dialog :is([data-canvas-more], [data-canvas-retry]) { margin-top: 8px; }

/* Compact, native date/time fields shared by Home and Calendar. */
html[data-a1-skin] .calendar-dt.datetime-fields {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center; gap: 10px; width: 100%; min-width: 0;
}
html[data-a1-skin] .datetime-fields :is(.calendar-dt-date, .calendar-dt-time) {
  display: block; position: static; box-sizing: border-box;
  width: 100%; min-width: 0; max-width: 100%; height: 48px;
  padding: 10px; border: 1px solid var(--a1-border); border-radius: 12px;
  background: var(--a1-surface-2); color: var(--a1-text);
  font: 500 16px/1.4 var(--a1-font); font-variant-numeric: tabular-nums;
  overflow: hidden;
}
html[data-a1-skin] .datetime-fields input::-webkit-date-and-time-value { text-align: left; min-width: 0; }
html[data-a1-skin] .calendar-dt.datetime-fields.is-allday { display: block; }
html[data-a1-skin] .datetime-fields.is-allday .calendar-dt-time { display: none; }
@media (max-width: 360px) {
  html[data-a1-skin] .calendar-dt.datetime-fields:not(.is-allday) { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html[data-a1-skin] .datetime-fields .calendar-dt-time { grid-column: 1; }
}

/* Point markers float above events; they never reserve an event lane. */
.a1-tg__events { position: absolute; inset: 0; pointer-events: none; }
.a1-tg__events > * { pointer-events: auto; }
.calendar-point-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.calendar-point {
  position: absolute; right: 0; display: flex; align-items: flex-start; justify-content: center;
  width: min(48px, 100%); min-width: 0; height: 44px; padding: 2px 0;
  border: 0; border-radius: 12px; background: transparent; color: var(--a1-accent);
  cursor: pointer; pointer-events: auto; touch-action: pan-y;
}
.calendar-point-pill { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 30px; min-height: 30px; padding: 2px 4px; box-sizing: border-box;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 11px;
  background: color-mix(in srgb, currentColor 10%, var(--a1-surface)); box-shadow: 0 2px 5px #15223812;
}
.calendar-point.is-over-event { width: min(40px, 60%); container: calendar-point / inline-size; }
.calendar-point.is-over-event .calendar-point-pill { min-width: 0; max-width: 100%; padding-inline: 2px; box-shadow: 0 2px 6px #15223826; }
@container calendar-point (max-width: 28px) {
  .calendar-point-pill svg { width: 12px; height: 16px; }
  .calendar-point-pill:has(.calendar-point-count) svg { display: none; }
  .calendar-point-count { font-size: 10px; }
}
.calendar-point.is-reminder { color: #ad650b; }
.calendar-point.is-mixed { color: #7761b2; }
.calendar-point.is-done { opacity: .5; }
.calendar-point-count { font: 700 11px/1 var(--a1-font); }
.calendar-point:focus-visible { outline: 2px solid var(--a1-accent); outline-offset: -2px; }
.a1-tg__allday .calendar-point { position: relative; align-self: flex-end; height: 38px; }
.calendar-points-dialog { width: min(460px, calc(100vw - 24px)); max-width: none; max-height: calc(var(--app-live-viewport-height, 100dvh) - 48px - var(--a1-safe-top, 0px)); padding: 0; border: 1px solid var(--a1-border); border-radius: 22px; background: var(--a1-surface); color: var(--a1-text); box-shadow: 0 16px 64px #15223833; }
.calendar-points-dialog[open] { display: flex; flex-direction: column; }
.calendar-points-dialog::backdrop { background: #15223866; backdrop-filter: blur(3px); }
.calendar-points-dialog header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid var(--a1-border); }
.calendar-points-dialog h2 { margin: 0; font-size: 19px; }
.calendar-points-dialog header p { margin: 6px 0 0; color: var(--a1-text-3); font-size: 13px; }
.calendar-points-dialog [data-calendar-points-close] { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; font-size: 26px; background: var(--a1-surface-2); color: inherit; cursor: pointer; }
.calendar-points-list { overflow-y: auto; overscroll-behavior: contain; padding: 0 16px; }
.calendar-point-detail { display: flex; align-items: flex-start; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--a1-border); }
.calendar-point-detail:last-child { border-bottom: 0; }
.calendar-point-detail .calendar-point-complete { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 12px; border: 0; border-radius: 12px; color: var(--a1-accent); background: var(--a1-surface-2); cursor: pointer; font-size: 22px; line-height: 1; }
.calendar-point-detail-open { position: relative; min-height: 44px; min-width: 0; flex: 1; display: grid; gap: 6px; padding: 0 14px 0 0; text-align: left; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.calendar-point-detail-open strong { font-size: 16px; font-weight: 650; }
.calendar-point-detail-open :is(span, p, small) { margin: 0; font-size: 13px; line-height: 1.5; color: var(--a1-text-3); }
.calendar-point-detail-open p { white-space: pre-wrap; max-height: 12em; overflow: auto; }
.calendar-point-detail-open small { color: var(--a1-accent); }
.calendar-point-detail.is-done strong { text-decoration: line-through; color: var(--a1-text-3); }

.calendar-point-detail-open .calendar-point-chevron { position: absolute; right: 0; top: 14px; font-size: 22px; }

.calendar-points-status { margin: 12px 18px 0; font-size: 14px; color: var(--a1-urgent-fg); }
.calendar-points-status:empty { display: none; }

/* Calendar is a viewport-filling workspace, with one scrolling calendar. */
html[data-a1-skin] body[data-active-feature="calendar"] .calendar-greeting { display: none; }
html[data-a1-skin] body[data-active-feature="calendar"] .calendar-panel { display: flex; flex-direction: column; min-height: 0; height: 100%; }
html[data-a1-skin] body[data-active-feature="calendar"] .calendar-panel > .panel-body { display: flex; flex: 1; flex-direction: column; min-height: 0; }
body[data-active-feature="calendar"] #calendar-status:empty,
body[data-active-feature="calendar"] #calendar-unscheduled:empty { display: none; }
body[data-active-feature="calendar"] #calendar-view { flex: 1; min-height: 0; overflow: auto; }
body[data-active-feature="calendar"] #calendar-view:is(.is-day, .is-three, .is-week) { display: flex; overflow: hidden; }
body[data-active-feature="calendar"] #calendar-view .a1-tg { flex: 1; min-width: 0; min-height: 0; }
body[data-active-feature="calendar"] #calendar-view .a1-tg .a1-tg__scroll { height: 100%; overflow: auto; }
body[data-active-feature="calendar"] .a1-tg__grid:not(:has(.a1-tg__allday > *)) > :is(.a1-tg__allday, .a1-tg__allday-gutter) { display: none; }
body[data-active-feature="calendar"] #calendar-unscheduled { flex-shrink: 0; max-height: 22vh; overflow: auto; }
@media (min-width: 981px) {
  body[data-active-feature="calendar"] { overflow: hidden; }
  body[data-active-feature="calendar"] .app-view { height: var(--app-live-viewport-height, 100dvh); min-height: 0; overflow: hidden; }
  html[data-a1-skin] body[data-active-feature="calendar"] .workspace { height: 100%; min-height: 0; padding: 12px; overflow: hidden; }
  body[data-active-feature="calendar"] .feature-host { height: 100%; min-height: 0; overflow: hidden; }
  body[data-active-feature="calendar"] .calendar-shell { display: block; height: 100%; min-height: 0; }
  html[data-a1-skin] body[data-active-feature="calendar"] .calendar-panel { margin: 0; }
  html[data-a1-skin] body[data-active-feature="calendar"] .calendar-panel > .panel-header { flex-shrink: 0; padding-block: 10px; }
  html[data-a1-skin] body[data-active-feature="calendar"] .calendar-panel > .panel-body { gap: 8px; padding: 0 12px 12px; }
}
@media (max-width: 980px) {
  html[data-a1-skin] body[data-active-feature="calendar"] .calendar-panel > .panel-header { min-height: calc(56px + var(--a1-safe-top)); padding-top: calc(6px + var(--a1-safe-top)); padding-bottom: 2px; }
  body[data-active-feature="calendar"] .calendar-pager-row { padding-block: 2px 6px; }
  body[data-active-feature="calendar"] #calendar-view .a1-tg__scroll { border: 0; border-top: 1px solid var(--a1-border); border-radius: 0; }
  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tg__cap { min-height: 48px; padding-block: 4px; gap: 2px; }
  body[data-active-feature="calendar"] #calendar-view.is-three .a1-tg__date { width: 30px; height: 30px; font-size: 16px; }
}

/* The date reset lives in More; Add is its adjacent toolbar action. */
body[data-active-feature="calendar"] .calendar-mobile-more { display: block; position: relative; }
body[data-active-feature="calendar"] .calendar-panel > .panel-header { position: relative; z-index: 12; }
body[data-active-feature="calendar"] .calendar-mobile-more > summary { display: grid; place-items: center; list-style: none; width: 44px; height: 44px; }
body[data-active-feature="calendar"] .calendar-mobile-more > summary::-webkit-details-marker { display: none; }
body[data-active-feature="calendar"] .calendar-mobile-more-list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 90; display: grid; gap: 2px; min-width: 170px; padding: 7px; border: 1px solid var(--a1-border); border-radius: 14px; background: var(--a1-surface); box-shadow: var(--a1-shadow-3); }
body[data-active-feature="calendar"] .calendar-mobile-more-list button { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 9px; color: var(--a1-text); background: transparent; font: 650 13px/1.2 var(--a1-font); text-align: left; cursor: pointer; }
body[data-active-feature="calendar"] .calendar-mobile-more-list button:focus-visible { outline: 2px solid var(--a1-accent); outline-offset: -2px; }
body[data-active-feature="calendar"] .calendar-mobile-more-list button[hidden] { display: none !important; }
body[data-active-feature="calendar"] .calendar-mobile-more-divider { height: 1px; margin: 3px 5px; background: var(--a1-border); }
body[data-active-feature="calendar"] #calendar-add { width: 44px; height: 44px; flex-shrink: 0; }
@media (max-width: 980px) {
  html[data-a1-skin] body[data-active-feature="calendar"] .calendar-panel > .panel-header { grid-template-columns: 44px minmax(0, 1fr) 44px 44px; gap: 6px; }
  body[data-active-feature="calendar"] #calendar-add { grid-column: 4; grid-row: 1; }
  body[data-active-feature="calendar"] .calendar-mobile-month { font-size: clamp(13px, 3.8vw, 17px); padding-inline: 0; }
}

/* Seven days fit the viewport; horizontal gestures page weeks, not columns. */
.a1-tg:not(.a1-tg--day):not(.is-three) .a1-tg__grid {
  width: 100%; min-width: 0;
  grid-template-columns: var(--a1-tg-gutter) repeat(7, minmax(0, 1fr));
}
.a1-tg__grid > :is(.a1-tg__cap, .a1-tg__allday, .a1-tg__col) { min-width: 0; }
@media (max-width: 980px) {
  .a1-tg:not(.a1-tg--day):not(.is-three) { --a1-tg-gutter: 28px; }
  .a1-tg:not(.a1-tg--day):not(.is-three) .a1-tg__events > .a1-tgi { padding-inline: 5px 2px; }
}

/* The sound belongs to the reminder being edited. */
.reminder-sound-field { min-width: 0; border: 1px solid var(--a1-border); border-radius: 12px; padding: 0 12px; background: var(--a1-surface); }
.reminder-sound-field > summary { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-size: 14px; }
.reminder-sound-field > summary strong { color: var(--a1-accent); font-size: 13px; }
.reminder-sound-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.reminder-sound-options > label { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; min-height: 44px; padding: 6px; margin: 0; border: 1px solid var(--a1-border); border-radius: 9px; font: 500 13px/1.3 var(--a1-font); cursor: pointer; }
.reminder-sound-options > label:has(input:checked) { background: var(--a1-accent-soft); border-color: var(--a1-accent); }
.reminder-sound-options input[type="radio"] { flex: 0 0 16px; width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; accent-color: var(--a1-accent); }
.reminder-sound-preview { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.reminder-sound-preview button { flex: none; min-height: 40px; padding: 6px 10px; border: 1px solid var(--a1-border); border-radius: 9px; background: var(--a1-surface-2); color: var(--a1-text); }
.reminder-sound-preview [role="status"] { font-size: 12px; color: var(--a1-text-3); }
#calendar-sound-field { grid-column: 1 / -1; min-width: 0; }
@media (max-width: 360px) { .reminder-sound-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Public course suggestions stay inside the editor on small screens. */
.public-course-matches { margin: 14px 0; border: 1px solid var(--border, #ddd); border-radius: 16px; overflow: hidden; max-height: 280px; overflow-y: auto; }
.public-course-matches .canvas-history-row { width: 100%; min-width: 0; text-align: left; }
.public-course-matches strong, .public-course-matches small { overflow-wrap: anywhere; }
.public-course-matches > p { padding: 12px; }
.public-course-schedule-preview { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 10px; }
.public-course-schedule-preview li { display: grid; gap: 3px; padding-bottom: 8px; border-bottom: 1px solid var(--border, #ddd); overflow-wrap: anywhere; }
.public-course-schedule-preview span { font-size: 13px; opacity: .8; }
[data-public-search-form] { display: grid; gap: 14px; }
[data-public-search-form] > small { display: block; line-height: 1.5; }
[data-public-search-form] > button { justify-self: start; }
.public-course-matches .canvas-history-row { padding: 14px 36px 14px 14px; }

/* Public course review: identity first, evidence on demand. */
.public-course-review { gap: 22px; }
.public-course-identity { display: grid; gap: 0; }
.public-course-identity-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 15px 0; border-bottom: 1px solid var(--line, #ddd); align-items: center; }
.public-course-identity-row > span { grid-column: 1; color: var(--muted, #667085); font-size: 12px; }
.public-course-identity-row > strong { grid-column: 1; font-size: 17px; overflow-wrap: anywhere; }
.public-course-identity-row > button { grid-column: 2; grid-row: 1 / 3; }
.public-course-edit { border: 0; background: transparent; color: #2764de; font: inherit; font-weight: 750; padding: 10px 0 10px 12px; min-height: 44px; cursor: pointer; }
.public-course-edit:disabled { color: var(--muted, #667085); cursor: default; }
.public-course-facts { display: grid; gap: 10px; padding: 0; border: 0; background: none; }
.public-course-fact { display: grid; grid-template-columns: auto minmax(0, 1fr) 16px; gap: 12px; align-items: center; text-align: left; padding: 18px 14px; border: 1px solid var(--line, #ddd); border-radius: 14px; background: var(--panel, #fff); color: inherit; font: inherit; cursor: pointer; }
.public-course-fact > span { text-align: right; font-size: 13px; color: var(--muted, #667085); }
.public-course-fact small { display: block; font-size: 11px; margin-top: 4px; }
.public-course-fact > b { color: var(--muted, #667085); font-size: 22px; }
.public-course-detail .course-center-modal-body { display: grid; gap: 16px; }
.public-course-detail form { display: grid; gap: 18px; }
.public-course-detail form label { display: grid; gap: 8px; }
.public-course-detail form input { width: 100%; min-width: 0; font-size: 16px; padding: 12px; }
.public-course-source { min-width: 0; border: 1px solid var(--line, #ddd); border-radius: 14px; padding: 16px; overflow-wrap: anywhere; }
.public-course-source.is-selected { border-color: #7798e5; }
.public-course-source > header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.public-course-source > header small { display: block; margin-top: 4px; color: var(--muted, #667085); }
.public-course-source > header button { flex-shrink: 0; }
.public-course-source table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.public-course-source th, .public-course-source td { padding: 10px 6px; text-align: left; border-bottom: 1px solid var(--line, #ddd); }
.public-course-meetings { display: grid; gap: 12px; }
.public-course-meetings article { padding-bottom: 12px; border-bottom: 1px solid var(--line, #ddd); }
.public-course-meetings p { margin: 5px 0; }
.public-course-meetings small { color: var(--muted, #667085); }
.public-course-holidays { margin: 16px 0; font-size: 13px; }
.public-course-holidays summary { cursor: pointer; padding: 8px 0; }
.public-course-holidays li { margin: 6px 0; }
.public-course-policy-text { white-space: pre-wrap; line-height: 1.6; }
/* Theme tokens, not literals: the panel wraps calendar-change rows whose
   secondary text uses the dark-theme palette. */
.public-course-update { padding: 16px; margin-bottom: 16px; border-radius: 14px; background: color-mix(in srgb, var(--accent, #2764de) 10%, var(--panel, #fff)); color: var(--text, #183469); border: 1px solid color-mix(in srgb, var(--accent, #2764de) 22%, transparent); }
.public-course-update p { font-size: 14px; line-height: 1.5; }
.public-course-delete-option { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; padding: 14px 0; }
.public-course-delete-option input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; }
.public-course-delete-actions { display: flex; justify-content: flex-end; gap: 12px; }
.learn-course-menu { position: relative; flex-shrink: 0; }
.learn-course-menu > summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; font-size: 25px; cursor: pointer; border-radius: 12px; }
.learn-course-menu > summary::-webkit-details-marker { display: none; }
.learn-course-menu[open] > summary { background: var(--panel-2, #edf0f8); }
.learn-course-menu > div { position: absolute; right: 0; top: 46px; z-index: 5; min-width: 160px; padding: 6px; border: 1px solid var(--line, #ddd); border-radius: 12px; background: var(--panel, #fff); box-shadow: 0 8px 28px #18203425; }
.learn-course-menu > div > button { display: block; width: 100%; min-height: 44px; padding: 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.learn-course-menu > div > button[data-learn-course-delete] { color: #b42336; }
.grade-dashboard-course:has(.learn-course-menu[open]) { overflow: visible; position: relative; z-index: 6; }

html[data-theme="dark"] .public-course-edit:not(:disabled) { color: #8eb6ff; }
.course-center-add-panel-head > [data-course-add-back] { border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600; min-height: 44px; padding: 8px 8px 8px 0; cursor: pointer; }

.course-setup-issues { display: grid; gap: 14px; margin-bottom: 18px; }
.course-setup-issues > article { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); min-width: 0; }
.course-setup-issues h4 { margin: 5px 0 8px; color: var(--text); font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.course-setup-issues p { margin: 0; line-height: 1.65; color: var(--text); font-size: 14px; overflow-wrap: anywhere; white-space: pre-wrap; }
.course-setup-issues small { color: var(--muted); }
.course-setup-issues button { justify-self: start; min-height: 44px; max-width: 100%; white-space: normal; text-align: left; }
.grading-scheme-review { display: grid; gap: 20px; margin: 18px 0; }
.grading-scheme-review p, .grading-scheme p { line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.grading-scheme-review > div { border: 1px solid var(--line); border-radius: 14px; padding: 16px; min-width: 0; }
.grading-scheme h4 { margin: 0 0 8px; font-size: 17px; color: var(--text); }
.grading-scheme dl > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.grading-scheme dt { overflow-wrap: anywhere; }
.grading-scheme dd { margin: 0; font-weight: 700; }
.grading-scheme summary { min-height: 44px; padding: 12px 0; cursor: pointer; }
.grading-scheme-review button { min-height: 44px; max-width: 100%; white-space: normal; margin-top: 12px; }

/* Timed cards prioritize course, meeting type, then room as space permits. */
.a1-tg__events .a1-tgi__meeting,
.a1-tg__events .a1-tgi__location {
  display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 10px/1.25 var(--a1-font); color: var(--a1-text-2); margin-top: 2px;
}
@container calendar-event (min-height: 30px) {
  .a1-tg__events .a1-tgi__meeting { display: block; }
}
@container calendar-event (min-height: 48px) {
  .a1-tg__events .a1-tgi__location { display: block; }
  .a1-tg__events .a1-tgi__n:has(+ .a1-tgi__meeting) { display: block; white-space: nowrap; }
  .a1-tg__events .a1-tgi__open:has(.a1-tgi__location) .a1-tgi__t { display: none; }
}
@container calendar-event (min-height: 76px) {
  .a1-tg__events .a1-tgi__location { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
}
@container calendar-event (min-height: 105px) and (min-width: 85px) {
  .a1-tg__events .a1-tgi__open:has(.a1-tgi__location) .a1-tgi__t { display: block; }
}

/* Opt-in Home presentation. Business lists and editor styles stay shared. */
[data-home-layout="today"] { --today-surface: var(--a1-sw-surface, var(--panel)); gap: 20px; }
[data-home-layout="today"] .today-first-content { display: grid; gap: 18px; min-width: 0; }
[data-home-layout="today"] .today-first-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 2px; }
[data-home-layout="today"] .today-first-header p { margin: 4px 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
[data-home-layout="today"] .today-first-header h1 { margin: 4px 0; font-size: 30px; font-weight: 650; letter-spacing: -.7px; }
[data-home-layout="today"] .today-first-add { position: relative; flex: 0 0 auto; }
[data-home-layout="today"] .today-first-add summary { list-style: none; padding: 12px 15px; color: var(--a1-accent, var(--cyan)); background: var(--a1-sw-accent-soft, var(--panel-2)); border-radius: 16px; font-weight: 650; cursor: pointer; }
[data-home-layout="today"] .today-first-add summary::-webkit-details-marker { display: none; }
[data-home-layout="today"] .today-first-add > div { position: absolute; z-index: 5; right: 0; top: calc(100% + 6px); min-width: 160px; display: grid; padding: 6px; background: var(--today-surface); border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: 0 8px 24px #0002; }
[data-home-layout="today"] .today-first-add button { min-height: 44px; text-align: left; padding: 8px 12px; border: 0; background: transparent; color: var(--text); }
[data-home-layout="today"] .today-first-next, [data-home-layout="today"] .today-first-work { padding: 20px; border: 1px solid var(--line-soft); border-radius: 22px; background: var(--today-surface); min-width: 0; }
[data-home-layout="today"] .today-first-next { background: var(--a1-sw-accent-soft, var(--panel-2)); border-color: transparent; }
[data-home-layout="today"] .today-first-next > p { margin: 0 0 10px; color: var(--a1-accent, var(--cyan)); font-size: 12px; font-weight: 650; }
[data-home-layout="today"] h2 { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 650; letter-spacing: -.25px; }
[data-home-layout="today"] .today-first-next h2 { font-size: 23px; margin-bottom: 8px; }
[data-home-layout="today"] .today-first-next footer, [data-home-layout="today"] .today-first-work > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
[data-home-layout="today"] .today-first-next footer { margin-top: 14px; font-size: 13px; }
[data-home-layout="today"] .today-first-work > header { margin-bottom: 8px; }
[data-home-layout="today"] .today-first-work > header button, [data-home-layout="today"] .today-first-next footer button, [data-home-layout="today"] .today-first-empty button, [data-home-layout="today"] .today-first-status button { border: 0; background: transparent; color: var(--a1-accent, var(--cyan)); min-height: 44px; padding: 4px; font: inherit; font-size: 13px; font-weight: 600; }
[data-home-layout="today"] .today-first-list { list-style: none; padding: 0; margin: 0; }
[data-home-layout="today"] .today-first-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
[data-home-layout="today"] .today-first-row:last-child { border-bottom: 0; }
[data-home-layout="today"] .today-first-copy { display: block; flex: 1; min-width: 0; width: 100%; padding: 6px 0; text-align: left; font: inherit; color: var(--text); border: 0; background: transparent; overflow-wrap: anywhere; cursor: pointer; }
[data-home-layout="today"] .today-first-copy strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.45; }
[data-home-layout="today"] .today-first-copy small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.6; }
[data-home-layout="today"] .today-first-copy .is-overdue { color: var(--danger, #b34b34); }
[data-home-layout="today"] .today-first-check { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--today-surface); color: var(--a1-accent, var(--cyan)); font-size: 20px; }
[data-home-layout="today"] .today-first-event-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--a1-accent, var(--cyan)); margin: 0 12px; }
[data-home-layout="today"] .today-first-group h3 { font-size: 13px; color: var(--muted); margin: 18px 0 4px; font-weight: 600; }
[data-home-layout="today"] .today-first-group h3 span { margin-left: 6px; }
[data-home-layout="today"] .today-first-completed summary, [data-home-layout="today"] .home-item-list > details > summary { min-height: 44px; padding-top: 12px; font-size: 13px; cursor: pointer; }
[data-home-layout="today"] .today-first-empty, [data-home-layout="today"] .today-first-connect, [data-home-layout="today"] .today-first-sync, [data-home-layout="today"] .today-first-status { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
[data-home-layout="today"] .home-panel-main { background: transparent; border: 0; box-shadow: none; }
[data-home-layout="today"] .home-board { padding: 0; gap: 12px; }
[data-home-layout="today"] .home-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
[data-home-layout="today"] .home-tab { min-width: 0; min-height: 74px; padding: 10px 2px; gap: 3px; border-radius: 14px; }
[data-home-layout="today"] .home-tab-count { font-size: 20px; line-height: 1.2; }
[data-home-layout="today"] .home-tab-title { font-size: 11px; letter-spacing: 0; overflow-wrap: anywhere; }
[data-home-layout="today"] .today-unread { font-size: 10px; color: var(--a1-accent, var(--cyan)); }
[data-home-layout="today"] #home-tab-panel:empty { display: none; }
[data-home-layout="today"] .home-reminder-status { padding: 10px 12px; font-size: 12px; }
[data-home-layout="today"] .services-grid:not(.today-services-expanded) .today-service-extra { display: none !important; }
[data-home-layout="today"] [data-today-services-all] { width: 100%; margin-top: 8px; }
@media (max-width: 360px) {
  [data-home-layout="today"] .today-first-next, [data-home-layout="today"] .today-first-work { padding: 14px; }
  [data-home-layout="today"] .today-first-header h1 { font-size: 27px; }
}

/* Settings: one type scale, quiet descriptions, generous radio hit targets. */
.user-config-grid .user-config-section-toggle h3, .user-config-grid .user-config-section-title { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.user-config-grid .user-config-appearance-section { border-bottom: 1px solid var(--line-soft); }
.user-config-grid .user-home-layout-section { border-bottom: 0; }
.user-home-layout-segmented { justify-self: end; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(210px, 100%); min-width: 0; margin: 0; padding: 3px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--a1-sw-surface-3, var(--panel-2)); }
.user-home-layout-choice { position: relative; display: grid; place-items: center; min-width: 0; min-height: 38px; margin: 0; border-radius: 9px; cursor: pointer; color: var(--muted); font-size: 11px; font-weight: 750; }
.user-home-layout-choice:has(input:checked) { color: var(--a1-accent-text, var(--cyan)); background: var(--a1-sw-accent-soft, var(--panel-2)); box-shadow: var(--a1-shadow-1); }
.user-home-layout-choice:has(input:focus-visible) { outline: 2px solid var(--a1-accent, var(--cyan)); outline-offset: -2px; }
.user-home-layout-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.user-home-layout-segmented:disabled { opacity: .6; }
.user-home-layout-segmented:disabled input { cursor: not-allowed; }
.user-home-layout-feedback:has([data-home-layout-status]:not(:empty)) { padding: 0 12px 12px; }
[data-home-layout-status] { color: var(--muted); font-size: 12px; line-height: 1.65; margin: 0; overflow-wrap: anywhere; }
[data-home-layout-status]:empty, .user-home-layout-feedback [hidden] { display: none !important; }

[data-home-layout="today"] .today-first-notice { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--today-surface); border: 1px solid var(--line-soft); border-radius: 14px; }
[data-home-layout="today"] .today-first-notice > span { flex: 1; min-width: 0; }
[data-home-layout="today"] .today-first-notice strong, [data-home-layout="today"] .today-first-notice small { display: block; font-size: 12px; line-height: 1.5; }
[data-home-layout="today"] .today-first-notice small { color: var(--muted); }
[data-home-layout="today"] .today-first-notice button { min-height: 44px; min-width: 44px; padding: 4px; font-size: 12px; color: var(--a1-accent, var(--cyan)); border: 0; background: transparent; }
.user-config-grid { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.user-config-grid button, .user-config-grid input { font-family: inherit; }
[data-home-layout="today"] .today-first-check { border-color: var(--muted); }
html[data-theme="dark"] [data-home-layout="today"] .today-first-copy .is-overdue { color: #ffb4a2; }

/* Calendar's nested navigation is a sibling dialog, above its preserved editor. */
.calendar-navigation-actions { display: flex; flex-wrap: nowrap; gap: 8px; }
.calendar-navigation-actions .calendar-navigation-map { flex: 1 1 0; min-width: 0; min-height: 44px; padding-inline: 10px; white-space: nowrap; }
.calendar-navigation-actions .calendar-navigation-map.hidden { display: none; }
.calendar-campus-map-feedback { position: absolute; z-index: 5; left: 10px; right: 58px; top: 10px; margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--a1-sw-surface, var(--panel)); color: var(--text); box-shadow: 0 2px 8px #0002; font-size: 12px; line-height: 1.5; pointer-events: none; }
.calendar-campus-map-feedback:empty { display: none; }
@media (max-width: 980px) {
  .calendar-navigation-panel { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .calendar-navigation-actions { display: flex; }
  #calendar-navigation-app { grid-column: auto; }
  .calendar-campus-navigation-layout { grid-template-rows: minmax(150px, 36dvh) minmax(0, 1fr); min-height: 0; }
  .calendar-campus-navigation-status { font-size: 13px; line-height: 1.6; }
  .calendar-campus-navigation-details { overflow-y: auto; }
}

/* Course Schedule keeps tools behind actions, leaving room for meeting cards. */
.course-schedule-compact .course-schedule-group-head { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.course-schedule-compact .course-schedule-group-head h4 { margin:0; }
.course-schedule-actions { display:flex; gap:12px; margin-left:auto; }
.course-schedule-actions button, .course-schedule-add { color:#4266d5; font-weight:750; border:0; background:transparent; padding:8px 0; min-height:44px; font-size:13px; white-space:normal; }
.course-schedule-compact .course-center-schedule-item { grid-template-columns:38px minmax(0,1fr) 62px; gap:10px; align-items:start; }
.course-schedule-item-content { min-width:0; overflow-wrap:anywhere; }
.course-schedule-item-content p { margin:4px 0; font-size:13px; color:var(--muted); }
.course-schedule-item-actions { display:flex; flex-direction:column; align-items:flex-end; }
.course-schedule-source { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; background:transparent; color:var(--muted); font-weight:700; }
.course-schedule-source::first-letter { border-radius:50%; }
.course-schedule-compact .is-custom .course-center-schedule-kind { color:#4266d5; background:#4266d515; }
.course-schedule-compact .course-schedule-add:disabled { color:var(--muted); opacity:.7; }
.course-schedule-tool .course-center-modal-body { display:grid; align-content:start; gap:16px; }
.course-schedule-tool .course-center-customize { display:grid; gap:16px; }
.course-schedule-tool .course-center-customize label { display:grid; gap:8px; }
.course-schedule-tool input, .course-schedule-tool textarea { width:100%; min-width:0; padding:12px; font:inherit; font-size:16px; box-sizing:border-box; }
.course-schedule-tool .course-center-correction-head { display:none; }
.course-schedule-tool-backdrop { z-index:255; }
html[data-theme="dark"] .course-schedule-actions button, html[data-theme="dark"] .course-schedule-add, html[data-theme="dark"] .course-schedule-compact .is-custom .course-center-schedule-kind { color:#94b4ff; }
.course-schedule-source span { display:grid; place-items:center; width:18px; height:18px; border:1px solid currentColor; border-radius:50%; font-size:12px; }
html[data-a1-skin] .course-schedule-actions button, html[data-a1-skin] .course-schedule-add { color:#4266d5; font-weight:750; background:transparent; border:0; }
html[data-a1-skin][data-theme="dark"] .course-schedule-actions button, html[data-a1-skin][data-theme="dark"] .course-schedule-add { color:#94b4ff; }
html[data-a1-skin] .course-schedule-add:disabled { color:var(--muted); }

.course-rubric-selected { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.course-rubric-selected > strong { min-width:0; overflow-wrap:anywhere; }
.course-rubric-selected .course-schedule-actions { flex-shrink:0; }

/* Device-level AlarmKit permission within the existing per-item sound chooser. */
.native-alarm-controls { margin: 10px 0; font-size: 12px; color: var(--a1-text-3); }
.native-alarm-controls[hidden], .native-alarm-controls button[hidden] { display: none; }
.native-alarm-controls p { margin: 0 0 8px; overflow-wrap: anywhere; }
.native-alarm-controls button { min-height: 44px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--a1-border); border-radius: 9px; background: var(--a1-surface-2); color: var(--a1-text); white-space: normal; }

.registration-load-status > button { flex: 0 0 auto; min-height: 44px; }

/* Assignment actions stay in the workspace tree on phones. */
.learn-workspace-row-actions .learn-workspace-do-button { display: inline-flex; min-height: 44px; white-space: nowrap; padding: 6px 10px; }
.learn-workspace-row-actions .learn-workspace-do-status-badge { display: none; }

/* First Canvas connection: compact native choices, shared body-mounted portal. */
.canvas-history-choice-backdrop { z-index: 1600; }
.canvas-history-choice-backdrop .course-center-modal { width: min(480px, 100%); }
.canvas-history-options { border: 0; padding: 0; margin: 16px 0; min-width: 0; }
.canvas-history-options legend { font-weight: 600; margin-bottom: 8px; }
.canvas-history-options label { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border-radius: 12px; cursor: pointer; }
.canvas-history-options label:has(input:checked) { background: color-mix(in srgb, var(--accent, #505bd4) 12%, transparent); }
.canvas-history-options input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; }
.canvas-history-recommended { margin-left: auto; padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent, #505bd4) 12%, transparent); color: var(--accent, #505bd4); font-size: .72rem; font-style: normal; font-weight: 700; white-space: nowrap; }
.canvas-history-choice-backdrop .course-center-modal-body > button { min-height: 44px; width: 100%; }

/* School course-number labels remain readable on narrow add-course dialogs. */
[data-course-add-dialog="public"] #course-add-modal-title {
  white-space: normal;
  line-height: 1.35;
}
[data-course-add-dialog="public"] .course-center-add-panel-head > [data-course-add-back] {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Keep agent input forms readable without shrinking the header around a button. */
[data-needs-input-dialog] .learn-workspace-do-header > div { flex: 1 1 auto; }
[data-needs-input-dialog] .learn-answer-action-close { width: 44px; min-width: 44px; height: 44px; }
[data-needs-input-dialog] .learn-workspace-do-header { padding-right: 68px; }
[data-needs-input-dialog] h3 { margin: 0; font-size: 1.1rem; line-height: 1.35; }
[data-needs-input-dialog] .learn-needs-input-path { margin: 6px 0 0; font-size: .85rem; overflow-wrap: anywhere; }
[data-needs-input-dialog] .learn-needs-input-intro { margin: 0; color: var(--muted); }
[data-needs-input-dialog] .learn-needs-input-field { display: grid; min-width: 0; gap: 8px; }
[data-needs-input-dialog] .learn-needs-input-field > span { font-size: .92rem; text-transform: none; letter-spacing: normal; line-height: 1.4; }
[data-needs-input-dialog] .learn-needs-input-field small { font-size: .85rem; line-height: 1.5; }
[data-needs-input-dialog] .learn-needs-input-field :is(input,textarea) { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; font-size: 16px; }
[data-needs-input-dialog] .learn-needs-input-field input[type="file"] { overflow: hidden; padding: 10px; }
[data-needs-input-dialog] .learn-workspace-needs-input-form { min-width: 0; overflow-x: hidden; }
[data-needs-input-dialog] :is(p,small,span,summary) { overflow-wrap: anywhere; }

/* Equal connection tiles keep readable labels on narrow phones. */
.course-center-provider-status .provider-label-short { display: none; }
@media (max-width: 420px) {
  .provider-count-4 .course-center-provider-status .provider-label-full { display: none; }
  .provider-count-4 .course-center-provider-status .provider-label-short { display: inline; }
}

.course-schedule-calendar-manage { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.course-schedule-calendar-manage button { min-height:44px; white-space:normal; text-align:right; }
.course-calendar-add-explanation { overflow-wrap:anywhere; line-height:1.5; }

/* Notification provenance stays available without displacing message content. */
.home-notification-title-row { display:flex; align-items:flex-start; gap:6px; min-width:0; }
.home-notification-title-row h3 { flex:1; min-width:0; overflow-wrap:anywhere; }
.home-notification-info { flex:none; }
.home-notification-info summary { display:flex; align-items:center; justify-content:center; width:32px; height:32px; cursor:pointer; list-style:none; }
.home-notification-info summary::-webkit-details-marker { display:none; }
.home-notification-info summary span { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#facc15; color:#422006; font-size:13px; font-weight:800; }
.home-notification-info[open] p { position:absolute; left:14px; right:14px; z-index:3; padding:12px; border:1px solid #d6a51a; border-radius:12px; background:#fff7d6; color:#422006; box-shadow:0 6px 20px #0002; font-size:13px; font-weight:400; line-height:1.5; overflow-wrap:anywhere; }
.event-time-range { grid-column:1/-1; display:grid; gap:12px; min-width:0; margin:0; padding:12px; border:1px solid var(--line-soft); border-radius:12px; }
.event-time-range legend { padding:0 5px; font-size:13px; font-weight:600; }
.event-time-range > label { display:grid; gap:6px; min-width:0; margin:0; }

.course-canvas-discovery { display:grid; gap:8px; padding:14px; margin-block:12px; border:1px solid var(--line-soft); border-radius:14px; min-width:0; }
.course-canvas-discovery p { margin:0; font-size:13px; line-height:1.5; }
.course-canvas-discovery .text-button { justify-self:start; min-height:44px; text-align:left; white-space:normal; overflow-wrap:anywhere; }
.course-center-source-form .course-center-canvas-course > span { min-width:0; overflow-wrap:anywhere; }
.course-center-source-form .course-center-canvas-course small { display:block; }

.course-canvas-discovery .text-button, .course-canvas-picker > .text-button { border:0; background:transparent; color:var(--accent, #4f55d9); font-weight:700; padding:8px 0; min-height:44px; text-align:left; }
.course-canvas-picker > .primary-button, html[data-a1-skin] .course-canvas-picker > .primary-button { width:100%; min-height:44px; border:0; border-radius:12px; background:var(--accent, #4f55d9); color:#fff; font-weight:700; }
.course-canvas-picker > .primary-button:disabled { opacity:.45; }
.user-logout-body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.saved-accounts-auth {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.saved-accounts-auth h2 {
  margin: 0 0 10px;
  font-size: 17px;
}

.saved-accounts-auth > p,
.switch-account-intro,
.switch-account-empty {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.switch-account-dialog {
  width: min(480px, calc(100vw - 24px));
  max-height: min(650px, calc(100dvh - 32px));
  overflow: auto;
  margin: auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text);
  background: var(--a1-sw-surface, #101722);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

.switch-account-dialog::backdrop {
  background: rgba(4, 9, 16, .7);
}

.switch-account-head,
.switch-account-actions,
.saved-account-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.switch-account-head {
  justify-content: space-between;
}

.switch-account-head h2 { margin: 2px 0 0; }
.switch-account-head .ghost-button { flex: 0 0 44px; width: 44px; min-width: 44px; padding: 0; font-size: 24px; }
.switch-account-list { display: grid; gap: 8px; margin: 16px 0; }
.switch-account-actions { justify-content: flex-end; flex-wrap: wrap; }
.switch-account-actions button { min-height: 44px; padding: 0 14px; }

.saved-account-row {
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.saved-account-choose {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 8px;
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.saved-account-choose strong,
.saved-account-choose small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-account-choose small { color: var(--muted); }
.saved-account-current { color: var(--cyan); font-size: 11px; }
.saved-account-remove {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

@media (max-width: 480px) {
  .switch-account-dialog { padding: 16px; }
  .switch-account-actions { display: grid; grid-template-columns: 1fr; }
  .switch-account-actions button { width: 100%; }
  .user-logout-body > button { flex: 1 1 140px; }
}
.learn-answer-question-previews {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.learn-answer-question-previews h4,
.learn-answer-question-previews h5,
.learn-answer-question-previews p { margin: 0; }
.learn-answer-question-previews h4 { font-size: 15px; }
.learn-answer-question-previews h5 { font-size: 13px; }
.learn-answer-question-previews .muted { font-size: 12px; }
.learn-answer-question-preview { display: grid; gap: 8px; min-width: 0; }
.learn-answer-question-preview-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
.learn-answer-question-preview figure {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin: 0;
}
.learn-answer-question-preview figcaption {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.learn-answer-question-preview figcaption a { color: var(--cyan); }
.learn-answer-question-preview-scroll {
  max-height: 440px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.learn-answer-question-preview-frame {
  position: relative;
  overflow: hidden;
  width: max(100%, 760px);
}
.learn-answer-question-preview-frame img {
  display: block;
  position: absolute;
  max-width: none;
  height: auto;
}
@media (max-width: 700px) {
  .learn-answer-question-preview-pair { grid-template-columns: minmax(0, 1fr); }
}
/* Pro identity and invitation upgrade */
.user-summary-name-line {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}
.user-pro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.25rem;
  padding: .08rem .42rem;
  border: 1px solid color-mix(in srgb, #b77900 48%, transparent);
  border-radius: 999px;
  background: linear-gradient(135deg, #fff2b7, #f2bd43);
  color: #744900;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  box-shadow: inset 0 1px rgba(255,255,255,.65);
}
.user-upgrade-pro-row .a1-list-row__trail { gap: .4rem; }
.user-upgrade-pro-form { display: grid; gap: 1rem; }
.user-upgrade-pro-form p { margin: 0; color: var(--muted); }

/* Compact notification identity, unread state, and source attribution. */
.home-item-notification .home-item-row {
  position: relative;
  padding-left: 16px;
}
.home-item-notification .home-item-titleline {
  position: relative;
}
.home-notification-unread-dot {
  position: absolute;
  left: -13px;
  top: 50%;
  width: .46rem;
  height: .46rem;
  border-radius: 50%;
  background: #e5484d;
  box-shadow: 0 0 0 2px color-mix(in srgb, #e5484d 14%, transparent);
  transform: translateY(-50%);
  pointer-events: none;
}
.home-notification-source {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  flex: 0 0 auto;
  color: var(--text);
  font-weight: 650;
}
.home-notification-source-icon {
  display: inline-grid;
  place-items: center;
  width: 1.08rem;
  height: 1.08rem;
  border-radius: .28rem;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent);
  font-size: .62rem;
  font-weight: 850;
  line-height: 1;
}
.home-notification-source-app-one .home-notification-source-icon {
  overflow: hidden;
  padding: 0;
  background: #071322;
}
.home-notification-source-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-notification-source-canvas .home-notification-source-icon { background: #fbe8e6; color: #b3261e; }
.home-notification-source-gradescope .home-notification-source-icon { background: #e5f4eb; color: #176b3a; }
.home-notification-meta-copy::before { content: " · "; }
.home-item-date:has(.home-notification-source),
.home-notification-modal-meta small:has(.home-notification-source) {
  display: flex;
  align-items: center;
  gap: .2rem;
  min-width: 0;
  white-space: nowrap;
}
.home-notification-meta-copy {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Task/event controls stay on the right, like Notifications. Stack the status
   above the buttons on phones to leave room for the title and compact time. */
.home-item-action-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
@media (max-width: 480px) {
  .home-item-planned .home-item-row.a1-list-row { flex-wrap: nowrap; gap: 8px; }
  .home-item-planned .home-item-row-actions.a1-list-row__trail {
    flex-direction: column; align-items: flex-end; gap: 2px; padding-left: 0; padding-right: 0;
  }
  .home-reminder-row .home-item-row.a1-list-row--wrap { flex-wrap: wrap; row-gap: 4px; }
  .home-reminder-row .home-item-row.a1-list-row--wrap > .home-item-toggle.a1-list-row__text { flex: 1 1 100%; }
  .home-reminder-row .home-item-row.a1-list-row--wrap > .home-item-row-actions.a1-list-row__trail {
    flex: 1 1 100%; justify-content: flex-end; margin-left: 0; padding-left: 0;
  }
}

/* Schedule card status/action column: keep "Not announced" on one line. */
.course-schedule-compact .course-schedule-add { white-space: nowrap; }

/* 320 px phones: five tab labels do not fit at 12 px ("Calenda", "Assistan"). */
@media (max-width: 350px) {
  .feature-nav .nav-label { font-size: 10.5px !important; letter-spacing: -0.015em; }
}

/* Profile header on phones: the name keeps a readable minimum width and
   wraps; the Pro badge drops to the next line instead of squeezing the name
   to nothing. Below 400 px the theme/friends controls move under the
   identity row so the name and address get the full card width. */
@media (max-width: 480px) {
  .user-summary-name-line { display: flex; flex-wrap: wrap; align-items: center; column-gap: .45rem; row-gap: .2rem; }
  .user-summary-name-line > strong { flex: 1 1 8ch; min-width: 8ch; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.2; }
  .user-summary-name-line > .user-pro-badge { flex: 0 0 auto; }
}
@media (max-width: 400px) {
  .user-top-body { grid-template-columns: minmax(0, 1fr); }
  .user-top-actions { justify-content: flex-start; }
}

.homework-task-attention {
  display: inline-grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid color-mix(in srgb, #c77700 45%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, #ffbf3f 18%, var(--surface));
  color: #9a5a00;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1;
}
.homework-task-attention:hover,
.homework-task-attention:focus-visible { background: color-mix(in srgb, #ffbf3f 30%, var(--surface)); }

/* Course setup follow-up: one dialog at a time, bounded rows on small phones. */
.course-next-actions { display: flex; gap: 8px 16px; flex-wrap: wrap; margin-block: 8px; }
.course-next-modal { width: min(620px, 100%); display: flex; flex-direction: column; max-height: calc(var(--app-live-viewport-height, 100dvh) - 32px); }
.course-next-backdrop { padding: 16px 12px; overflow: hidden; }
.course-next-modal .course-center-modal-head { flex: 0 0 auto; gap: 12px; }
.course-next-modal h3 { margin: 0; font-size: 19px; line-height: 1.4; }
.course-next-modal button { min-height: 44px; }
.course-next-modal .course-center-modal-head > button { flex: 0 0 44px; }
.course-next-body { min-height: 0; overflow: auto; padding: 16px; }
.course-next-body p { font-size: 14px; line-height: 1.6; }
.course-next-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.course-next-row > div, .course-next-row > label, .course-next-row span { min-width: 0; }
.course-next-row > label { display: flex; align-items: center; gap: 10px; }
.course-next-row input[type=checkbox] { flex: 0 0 20px; width: 20px; height: 20px; }
.course-next-row strong, .course-next-row small { display: block; overflow-wrap: anywhere; }
.course-next-row strong { font-size: 15px; line-height: 1.5; }
.course-next-row small { color: var(--muted); font-size: 12px; line-height: 1.6; }
.course-next-row-actions { display: flex; flex-wrap: wrap; gap: 4px 8px; flex-shrink: 0; }
.course-next-settings { display: grid; gap: 12px; margin-block: 16px; }
.course-next-settings > label { display: grid; gap: 6px; }
.course-next-settings select, .course-next-row select { width: 100%; min-width: 0; }
.course-next-footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
@media (max-width: 980px) {
  .course-next-modal .course-center-modal-head { padding-inline: 16px; }
  .course-next-body { padding-bottom: calc(16px + var(--a1-safe-bottom)); }
  .course-next-footer { padding-inline: 0; }
  .course-next-row-actions { flex-direction: column; }
}
/* Keep choice controls readable even before the optional skin has loaded. */
.course-next-modal h3 { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.course-next-modal select { display: block; max-width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 15px; text-overflow: ellipsis; }
.course-next-modal .text-button, .course-next-actions .text-button { border: 0; background: transparent; color: var(--a1-primary, var(--cyan)); font: inherit; font-size: 14px; font-weight: 700; padding: 6px 4px; cursor: pointer; }
.course-next-modal .text-button:disabled { opacity: .5; cursor: default; }
.course-next-modal .course-next-footer > button { flex: 1 1 100px; width: auto; }
.course-next-row > button { flex-shrink: 0; }
/* Provider catalogs live behind the existing equal-sized connection buttons. */
.course-center-provider-status { position: relative; overflow: visible; }
.course-provider-new-badge { position: absolute; z-index: 1; top: -7px; left: -5px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: #d9303e; color: #fff; font: 700 11px/1 system-ui, sans-serif; box-shadow: 0 0 0 2px var(--panel); }
.course-provider-term + .course-provider-term { margin-top: 24px; }
.course-provider-term h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 8px 0; font-size: 14px; color: var(--muted); }
.course-this-term { padding: 3px 8px; border-radius: 8px; font-size: 11px; color: var(--a1-primary, var(--cyan)); background: var(--panel-2); }
.course-next-row .course-connect-button { min-height: 40px; min-width: 84px; flex: 0 0 auto; padding: 8px 12px; font-size: 13px; }
.course-next-row .course-connected-label { color: var(--muted); font-size: 12px; flex: 0 0 auto; max-width: 96px; text-align: right; }
.course-provider-unavailable { color: var(--muted); }
.course-next-body { flex: 1 1 auto; }
.course-next-modal > .course-next-footer { padding: 12px 16px calc(12px + var(--a1-safe-bottom, 0px)); }

.course-calendar-nudge-backdrop { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; box-sizing: border-box; padding: calc(16px + var(--a1-safe-top, 0px)) 12px calc(16px + var(--a1-safe-bottom, 0px)); background: var(--a1-sw-scrim, rgba(2, 6, 12, .72)); backdrop-filter: blur(8px); }
.course-calendar-nudge { width: min(460px, 100%); min-width: 0; max-height: 100%; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel, #121a26); color: var(--text); box-shadow: 0 26px 70px rgba(0, 0, 0, .36); }
.course-calendar-nudge h2 { margin: 0; font-size: 19px; line-height: 1.35; }
.course-calendar-nudge > p { margin: 8px 0 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.course-calendar-nudge-list { min-height: 0; overflow: auto; }
.course-calendar-nudge-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.course-calendar-nudge-row > span { flex: 1 1 auto; min-width: 0; }
.course-calendar-nudge-row strong, .course-calendar-nudge-row small { display: block; overflow-wrap: anywhere; }
.course-calendar-nudge-row strong { font-size: 14px; line-height: 1.4; }
.course-calendar-nudge-row small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.course-calendar-nudge-row button { flex: 0 0 auto; min-height: 40px; padding: 7px 12px; font-size: 13px; }
.course-calendar-nudge footer { display: flex; justify-content: flex-end; padding-top: 12px; }
.course-calendar-nudge footer button { min-height: 40px; }
.course-calendar-nudge-error:not([hidden]) { color: #d9303e; }
@media (max-width: 380px) { .course-calendar-nudge { padding: 16px; } .course-calendar-nudge-row { gap: 8px; } }
@media (max-width: 980px) {
  .course-next-modal { height: calc(var(--app-live-viewport-height, 100dvh) - 32px); max-height: calc(var(--app-live-viewport-height, 100dvh) - 32px); }
}
.calendar-pager-row .ghost-button.calendar-add-classes { flex: 0 0 auto; width: auto; min-height: 34px; padding: 4px 9px; white-space: nowrap; font-size: 12px; font-weight: 700; }
@media (max-width: 640px) {
  .calendar-pager-row { gap: 4px !important; }
  .calendar-pager-row .ghost-button.calendar-add-classes { min-height: 32px; padding-inline: 7px; font-size: 11px; }
  .course-center-head .ghost-button.course-center-calendar-action { min-height: 34px; padding-inline: 7px; font-size: 11px; }
  .course-center-head .ghost-button.course-center-icon-button { flex-basis: 34px; width: 34px; min-width: 34px; height: 34px; min-height: 34px; }
}

/* User → Docs & FAQ. Keep reading styles out of other account dialogs. */
.docs-guide-modal { width: min(760px, 100%); }
.docs-guide-modal .integration-config-modal-close { min-width: 44px; min-height: 44px; flex: 0 0 44px; }
.docs-guide-modal .user-drawer-modal-body { overscroll-behavior: contain; }
#docs-faq-panel { width: 100%; min-width: 0; }
.docs-guide {
  color: var(--a1-text, var(--text));
  max-width: 640px;
  margin: 0 auto;
  padding: 2px 4px 24px;
  font-size: 15px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.docs-guide button, .docs-guide summary { touch-action: manipulation; }
.docs-guide button:focus-visible, .docs-guide summary:focus-visible {
  outline: 2px solid var(--a1-accent, var(--accent));
  outline-offset: 3px;
}
.docs-guide [data-docs-heading]:focus { outline: none; }
.docs-language { display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 24px; }
.docs-language button {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--a1-surface, var(--panel));
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
.docs-language button[aria-pressed="true"] {
  color: var(--a1-accent-text, var(--text));
  border-color: var(--a1-accent, var(--accent));
  background: var(--a1-accent-soft, var(--panel));
}
.docs-eyebrow { font-size: 11px; letter-spacing: .1em; font-weight: 700; color: var(--a1-text-2, var(--muted)); }
.docs-guide h2 { margin: 8px 0 12px; font-size: clamp(23px, 5vw, 30px); line-height: 1.25; letter-spacing: -.025em; }
.docs-guide p { margin: 0; }
.docs-intro > p, .docs-article > header > p { color: var(--a1-text-2, var(--muted)); }
.docs-chapters { display: grid; gap: 10px; margin-top: 26px; }
.docs-chapters button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  color: inherit;
  background: var(--a1-surface, var(--panel));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  font: inherit;
  cursor: pointer;
}
.docs-number { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--a1-accent-soft, var(--panel)); color: var(--a1-accent-text, var(--text)); font-weight: 700; }
.docs-chapters strong { display: block; font-size: 16px; line-height: 1.35; }
.docs-chapters small { display: block; font-size: 13px; line-height: 1.5; margin-top: 5px; color: var(--a1-text-2, var(--muted)); }
.docs-back, .docs-pagination button {
  border: 0;
  background: none;
  color: var(--a1-accent-text, var(--text));
  padding: 8px 0;
  min-height: 44px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
.docs-back { margin: -12px 0 18px; }
.docs-guide .docs-translation { margin: -4px 0 12px; font-weight: 650; }
.docs-steps { margin: 28px 0; padding-left: 24px; }
.docs-steps li { padding-left: 6px; margin: 0 0 24px; }
.docs-steps li::marker { color: var(--a1-accent-text, var(--text)); font-weight: 700; }
.docs-guide h3 { font-size: 17px; line-height: 1.4; margin: 0 0 8px; letter-spacing: -.01em; }
.docs-example { margin: 28px 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--a1-surface-2, var(--panel)); }
.docs-example figcaption { font-weight: 700; margin-bottom: 16px; font-size: 14px; }
.docs-guide .docs-example-note { font-size: 13px; color: var(--a1-text-2, var(--muted)); margin-top: 16px; }
.docs-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.docs-flow li { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--a1-surface, var(--panel)); font-weight: 650; font-size: 14px; }
.docs-flow li + li::before { content: '↓'; position: absolute; top: -25px; left: 16px; color: var(--a1-accent-text, var(--text)); }
.docs-prompts { display: grid; gap: 12px; }
.docs-prompts blockquote { margin: 0; padding: 10px 0 10px 14px; border-left: 3px solid var(--a1-accent, var(--accent)); font-size: 14px; }
.docs-calendar-example { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.docs-calendar-example > span { color: var(--a1-text-2, var(--muted)); }
.docs-calendar-example > div { grid-column: 2; grid-row: 1 / 3; display: grid; gap: 6px; border-left: 4px solid var(--a1-accent, var(--accent)); border-radius: 10px; padding: 12px; color: var(--a1-accent-text, var(--text)); background: var(--a1-accent-soft, var(--panel)); }
.docs-calendar-example strong { font-size: 18px; }
.docs-calendar-example strong span { display: block; font-size: 12px; }
.docs-item-examples { margin: 0; }
.docs-item-examples > div + div { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.docs-item-examples dt { font-size: 13px; font-weight: 700; color: var(--a1-accent-text, var(--text)); }
.docs-item-examples dd { margin: 2px 0 0; font-size: 14px; }
.docs-faq { margin-top: 30px; }
.docs-faq details { border-bottom: 1px solid var(--line); }
.docs-faq summary { padding: 16px 0; min-height: 44px; cursor: pointer; font-weight: 650; font-size: 14px; }
.docs-faq details p { padding: 0 0 18px; font-size: 14px; color: var(--a1-text-2, var(--muted)); }
.docs-pagination { display: flex; justify-content: space-between; gap: 20px; margin-top: 24px; border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 480px) {
  .docs-guide { padding-inline: 0; }
  .docs-chapters button { padding: 14px 12px; gap: 10px; }
  .docs-example { padding: 16px; }
}

/* Pending requests stay visible until accepted/declined, not merely viewed. */
.friend-request-count, .friend-new-dot.friend-request-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 21px; width: auto; height: 21px; padding: 0 5px;
  box-sizing: border-box; border-radius: 999px;
  background: #c9253c; color: #fff; box-shadow: none;
  font: 700 12px/1 system-ui, sans-serif; white-space: nowrap;
}
.friend-request-count.hidden { display: none; }
.feature-nav [data-feature="profile"] .nav-icon { position: relative; }
.feature-nav .friend-request-nav-count, .feature-nav .feature-nav-attention-count {
  position: absolute; right: -10px; top: -7px;
  border: 2px solid var(--panel, #fff); min-width: 23px; height: 23px;
}
.friend-request-notice-backdrop {
  position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center;
  box-sizing: border-box; padding: max(16px, var(--a1-safe-top, 0px)) 16px max(16px, var(--a1-safe-bottom, 0px));
  background: var(--a1-sw-scrim, rgba(2,6,12,.65)); backdrop-filter: blur(6px);
}
.friend-request-notice {
  display: flex; flex-direction: column; box-sizing: border-box;
  width: min(440px, 100%); max-height: 100%; min-width: 0;
  padding: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px;
  color: var(--a1-text, var(--text)); background: var(--panel);
  box-shadow: 0 16px 64px #0003;
}
.friend-request-notice header { display: flex; align-items: center; gap: 10px; }
.friend-request-notice header .friend-request-count { flex: 0 0 auto; }
.friend-request-notice h2 { font-size: 21px; line-height: 1.3; margin: 0; }
.friend-request-notice > p { color: var(--a1-text-2, var(--muted)); font-size: 14px; line-height: 1.5; margin: 12px 0 16px; }
.friend-request-notice-people { list-style: none; padding: 0; margin: 0; min-height: 0; overflow-y: auto; }
.friend-request-notice-people li { padding: 12px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.friend-request-notice-people strong { display: block; font-size: 15px; line-height: 1.4; }
.friend-request-notice-people span { display: block; color: var(--a1-text-2, var(--muted)); font-size: 13px; margin-top: 4px; }
.friend-request-notice footer { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; margin-top: 20px; }
.friend-request-notice button { min-height: 44px; min-width: 0; padding: 10px 14px; font-size: 14px; line-height: 1.3; }
.friend-request-notice button:focus-visible { outline: 2px solid var(--a1-accent, var(--accent)); outline-offset: 3px; }

.learn-comparison-history { margin: 14px 0; min-width: 0; }
.learn-comparison-history:empty { display: none; }
.learn-comparison-history h3 { font-size: 16px; margin: 0 0 8px; }
.comparison-history-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; width: 100%; min-height: 54px; padding: 6px 7px; text-align: left; border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.58)); color: var(--text); }
.comparison-history-row.pass { border-left-color: #2ea043; background: rgba(34, 197, 94, 0.08); }
.comparison-history-row.warning { border-left-color: #f5b84b; background: rgba(245, 184, 75, 0.08); }
.comparison-history-row.error { border-left-color: #ff6b6b; background: rgba(255, 107, 107, 0.08); }
.comparison-history-row .learn-answer-check-result-main { min-width: 0; overflow-wrap: anywhere; }
.comparison-history-row strong { font-size: 14px; }
.comparison-history-row small { color: var(--muted); font-size: 11px; }
.learn-comparison-history details { margin: 6px 0 14px; }
.learn-comparison-history summary { min-height: 44px; padding: 10px; font-size: 13px; cursor: pointer; }
.comparison-job-status { grid-template-columns: minmax(0, 1fr); min-width: 0; overflow-wrap: anywhere; }
.comparison-job-status > div { min-width: 0; width: 100%; }
.comparison-job-status p { margin: 8px 0; font-size: 14px; line-height: 1.5; }
.comparison-job-status button { min-height: 44px; white-space: normal; }
.learn-answer-compare-modal .panel-header > div { min-width: 0; }
.learn-answer-compare-modal .panel-header .row-meta { overflow-wrap: anywhere; }

.learn-answer-check-head-text > strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.45; }

.learn-answer-compare-modal.is-history > .panel-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.learn-answer-compare-modal.is-history .learn-answer-compare-header-actions { width: auto; min-width: 0; }
.learn-answer-compare-modal.is-history .learn-answer-compare-close { position: static; width: 44px; height: 44px; }
.learn-answer-compare-modal.is-history .panel-header h3 { font-size: 18px; line-height: 1.4; }
.learn-answer-compare-modal.is-history .panel-header .row-meta { margin-top: 6px; font-size: 13px; line-height: 1.45; }

.learn-answer-compare-modal.is-history > .learn-answer-compare-body { align-content: start; }

/* Course Schedule: private term dates editor (B1). */
.course-term-dates { min-width:0; border:1px solid var(--line-soft); border-radius:11px; background:var(--panel-2); }
.course-term-dates-head { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; width:100%; min-height:44px; padding:8px 12px; border:0; border-radius:11px; background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.course-term-dates-title { font-weight:800; font-size:14px; }
.course-term-dates-summary { flex:1 1 160px; min-width:0; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.course-term-dates-chevron { margin-left:auto; color:var(--muted); }
.course-term-dates-form { display:grid; gap:12px; min-width:0; padding:0 12px 12px; }
.course-term-dates-note { margin:0; font-size:13px; line-height:1.45; color:var(--muted); overflow-wrap:anywhere; }
.course-term-dates-source { display:inline-block; padding:2px 8px; border-radius:999px; background:color-mix(in srgb, var(--cyan) 16%, transparent); color:var(--text); font-size:12px; font-weight:750; }
.course-term-dates-range { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; min-width:0; }
.course-term-dates-range label, .course-term-dates-add label { display:grid; gap:6px; min-width:0; }
.course-term-dates-range label span, .course-term-dates-add label span, .course-term-dates-breaks legend { font-size:12px; font-weight:800; color:var(--text); }
.course-term-dates input[type="date"] { width:100%; min-width:0; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font:inherit; font-size:16px; color:var(--text); background:var(--panel); box-sizing:border-box; }
.course-term-dates-breaks { min-width:0; margin:0; padding:0; border:0; }
.course-term-dates-breaks legend { padding:0; margin-bottom:6px; }
.course-term-dates-breaks ul { display:grid; gap:4px; margin:0 0 8px; padding:0; list-style:none; }
.course-term-dates-breaks li { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:0 0 0 10px; border:1px solid var(--line-soft); border-radius:10px; font-size:13px; }
.course-term-dates-breaks li button { width:44px; height:44px; padding:0; border:0; background:transparent; color:var(--muted); font-size:20px; line-height:1; }
.course-term-dates-empty { margin:0 0 8px; font-size:12px; color:var(--muted); }
.course-term-dates-add { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px; align-items:end; }
.course-term-dates-add button, .course-term-dates-actions button { min-height:44px; }
.course-term-dates-actions { display:flex; flex-wrap:wrap; gap:8px; }
.course-term-dates .course-center-error { margin:0; }
.course-calendar-coverage.is-needs_term_dates { border-color:color-mix(in srgb, var(--amber) 42%, var(--line)); background:color-mix(in srgb, var(--amber) 9%, var(--panel)); }
.course-calendar-coverage > button { justify-self:start; min-height:44px; margin-top:4px; }
.calendar-course-schedule-item-term { cursor:default; }
.calendar-course-term-dates { flex:0 0 auto; min-height:44px; padding:0 10px; border:0; border-radius:10px; background:transparent; color:#4266d5; font:inherit; font-size:12px; font-weight:750; }
html[data-theme="dark"] .calendar-course-term-dates { color:#94b4ff; }

/* Services note for schools outside the registry (Others). Inside the
   services panel a plain link renders at text height, so give the note's
   action the shared 44px control geometry and left-align the copy. */
.services-page .services-school-note {
  align-items: flex-start;
  text-align: left;
  /* Same inline inset as the service rows below, so the copy does not sit
     against the card edge. */
  padding: 4px 16px 16px;
  gap: 8px;
}
.services-page .services-school-note .a1-empty__text { max-width: 60ch; }
.services-page .services-school-note .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  text-decoration: none;
}

/* Home "notifications blocked" hint: one light line, dismissible for a week
   per account. It replaces the former multi-line reminder status card. */
.home-notice-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 10px var(--a1-card-pad, 14px) 0;
  padding: 2px 2px 2px 12px;
  border: 1px solid var(--line-soft, var(--line, rgba(255, 255, 255, 0.12)));
  border-radius: 12px;
  background: var(--a1-surface-2, var(--panel-muted, rgba(255, 255, 255, 0.04)));
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
[data-home-layout="today"] .home-notice-hint { margin-inline: 0; }
/* The sentence is the only notification guidance left on Home, so it wraps
   (two lines at 320px) instead of ellipsizing; the 44px dismiss target sets the
   row height, which two lines of 12px copy fit inside. */
.home-notice-hint-text { flex: 1 1 auto; min-width: 0; padding-block: 4px; overflow-wrap: anywhere; }
.home-notice-hint-dismiss {
  flex: 0 0 auto;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.home-notice-hint-dismiss:hover,
.home-notice-hint-dismiss:focus-visible { color: var(--text); }
/* "Enable phone reminder" / "Phone reminder not connected" carry one action. */
.home-notice-hint-action {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--a1-accent, var(--cyan));
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.home-notice-hint-action:disabled { opacity: 0.6; cursor: default; }

/* Text controls never drop below 16px on touch devices. iOS Safari zooms the
   page when a smaller control takes focus; the viewport meta used to suppress
   that with maximum-scale=1, which also blocked pinch zoom for everyone. The
   rule covers the phone layout (<=980px) and any coarse-pointer device, because
   an iPad in landscape or at 12.9 inches keeps the desktop layout above 980px
   but still zooms. Mouse-driven desktop windows are untouched.
   The rule must only RAISE sizes, but CSS cannot read a control's authored
   size, and `!important` is what lets it beat the many small authored sizes.
   So a control that is deliberately larger than 16px opts out with
   data-keep-font-size (the join-code input does; the quick-compose title is
   given its own larger size below). Without the opt-out `max(16px, 1em)`
   would shrink it to the parent's size. `max(16px, 1em)` keeps controls that
   inherit a larger size larger. */
@media (max-width: 980px), (pointer: coarse) {
  input:not([data-keep-font-size]):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="hidden"])),
  select:not([data-keep-font-size]),
  textarea:not([data-keep-font-size]) {
    font-size: max(16px, 1em) !important;
  }
  html[data-a1-skin] .calendar-compose.is-quick #calendar-title-field input {
    font-size: clamp(22px, 5.8vw, 28px) !important;
  }
}

/* Non-blocking first-run tips: one small in-flow line (never over a control)
   that any tap anywhere dismisses. Floating fallback only when no host exists. */
.first-run-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 8px 0 10px;
  padding: 2px 2px 2px 12px;
  border: 1px solid var(--line-soft, var(--line));
  border-radius: 12px;
  background: var(--a1-surface-2, var(--panel-muted, rgba(255, 255, 255, 0.04)));
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.first-run-tip-copy { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.first-run-tip-copy strong { margin-right: 6px; color: var(--text); font-weight: 800; }
.first-run-tip-close {
  flex: 0 0 auto;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.first-run-tip-close:hover,
.first-run-tip-close:focus-visible { color: var(--text); }
.user-drawer-modal-body > .first-run-tip { margin: 10px 16px 0; }
#home-tab-panel > .first-run-tip { margin: 8px 0 4px; }
.first-run-tip.is-floating {
  position: fixed;
  left: 50%;
  bottom: calc(var(--a1-safe-bottom, 0px) + 20px);
  z-index: 455;
  width: min(420px, calc(100vw - 24px));
  margin: 0;
  background: var(--panel, #121a26);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transform: translateX(-50%);
}
@media (max-width: 980px) {
  .first-run-tip.is-floating { bottom: calc(var(--a1-safe-bottom, 0px) + 80px); }
}
/* Coach marks stay anchored but smaller, and also close on any tap elsewhere. */
.first-run-coach { gap: 8px; padding: 8px 8px 8px 12px; border-radius: 10px; }
.first-run-coach p { font-size: 12.5px; font-weight: 650; }
.first-run-coach-action { min-height: 32px; font-size: 12px; }
.academic-assistant-agent-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  min-width: 0;
  font-size: 0.85rem;
}
.academic-assistant-agent-progress span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.academic-assistant-agent-progress button { flex: 0 0 auto; min-height: 40px; width: auto; }
.academic-assistant-proposed-content { max-height: 240px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 8px 0 0; }

/* Account language: system CJK fonts, with the same component hierarchy. */
html[lang="zh-CN"][data-a1-skin] {
  --a1-font: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', system-ui, sans-serif;
  --a1-font-alt: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
}
html[lang="zh-CN"] .eyebrow,
html[lang="zh-CN"] .user-config-section-title { letter-spacing: .02em; }
#language-settings select { width: auto; min-width: 7.5rem; max-width: 52%; margin: 0; }
#language-settings [data-language-status]:empty { display: none; }
#language-settings [data-language-status] { margin: .4rem 0 0; font-size: .82rem; overflow-wrap: anywhere; }

#language-settings [hidden] { display: none !important; }

#language-settings [data-language-status] { padding: 0 .65rem .35rem; }
/* Device clocks stay visible when a student's saved personal zone differs. */
.display-time-zone { overflow-wrap: anywhere; }
.calendar-time-zone { margin: 4px 0 8px; }

/* Keep the reviewed upload action visible while its PDF/target list scrolls. */
.learn-answer-action-modal.learn-answer-submit-modal {
  grid-template-rows: auto minmax(0, 1fr);
}
.learn-answer-submit-modal .learn-answer-submit-form {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  overflow: hidden;
  padding: 0;
}
.learn-answer-submit-body {
  display: grid;
  gap: 14px;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  padding: 18px;
}
.learn-answer-submit-modal .learn-answer-submit-footer {
  margin: 0;
  padding: 12px 18px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--panel);
  min-width: 0;
  flex-wrap: wrap;
}
.learn-answer-submit-footer .form-message:empty { display: none; }
.learn-answer-submit-footer .form-message {
  flex-basis: 100%;
  overflow-wrap: anywhere;
  max-height: 4.5em;
  overflow: auto;
}
.learn-answer-submit-modal .learn-answer-submit-target small,
.learn-answer-submit-modal .learn-answer-submit-summary span {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
}
@media (max-width: 600px) {
  .learn-answer-submit-modal .learn-answer-submit-target {
    grid-template-columns: 20px minmax(0, 1fr);
  }
  .learn-answer-submit-modal .learn-answer-submit-target > input {
    grid-row: 1 / 3;
  }
  .learn-answer-submit-modal .learn-answer-submit-source {
    display: inline-flex;
    justify-self: start;
    justify-content: flex-start;
    min-height: 20px;
    font-size: 12px;
  }
  .learn-answer-submit-modal .learn-answer-submit-main { grid-column: 2; }
}

/* Feature fetch failures keep a reachable recovery action on small screens. */
.feature-load-error :is(.panel-header, .panel-body) { min-width: 0; overflow-wrap: anywhere; }
.feature-load-error-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.feature-load-error-actions > button { min-height: 44px; min-width: 0; max-width: 100%; white-space: normal; }