:root {
  /* Shared plumbing tokens - task #33 refactor (safe-area insets). */
  --a1-safe-top: env(safe-area-inset-top, 0px);
  --a1-safe-right: env(safe-area-inset-right, 0px);
  --a1-safe-bottom: env(safe-area-inset-bottom, 0px);
  --a1-safe-left: env(safe-area-inset-left, 0px);
  --bg: #0c1018;
  --panel: #141b27;
  --panel-2: #192230;
  --line: #2d3748;
  --line-soft: #233044;
  --text: #f3f7fb;
  --muted: #b4c0ce;
  --cyan: #35d4ff;
  --green: #49d17d;
  --amber: #f5b84b;
  --amber-pill: #f0b64a;
  --amber-pill-border: #f8c968;
  --red: #f06d6d;
  --violet: #9b8cff;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Grade Dashboard source/freshness contract. Kept compact on the card; the
   expanded rows make every uncertainty actionable without pretending it is a
   precise total. */
.grade-dashboard-integrity {
  margin: 10px 0;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
}

.grade-dashboard-integrity > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.grade-dashboard-integrity > summary::-webkit-details-marker { display: none; }

.grade-dashboard-integrity > summary span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.grade-dashboard-integrity > summary small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grade-dashboard-integrity[open] > summary > span:last-child { transform: rotate(90deg); }

.grade-dashboard-integrity-body {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.grade-dashboard-integrity-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  min-width: 0;
  color: var(--muted);
  font-size: 12.5px;
}

.grade-dashboard-integrity-row > strong { color: var(--text); }
.grade-dashboard-integrity-row > span { overflow-wrap: anywhere; }

.grade-dashboard-integrity-row > span:has(i) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.grade-dashboard-integrity-row i {
  padding: 3px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-style: normal;
}

.grade-dashboard-integrity-row i.connected { color: var(--green, #34d399); }
.grade-dashboard-integrity-row i.disconnected,
.grade-dashboard-integrity-row.warning { color: var(--amber, #f59e0b); }

.grade-dashboard-conflict-choice {
  grid-column: 1 / -1;
  width: 100%;
}

@media (max-width: 600px) {
  .grade-dashboard-integrity-row {
    align-items: stretch;
    flex-direction: column;
    gap: 3px;
  }

  .grade-dashboard-integrity > summary small { white-space: normal; }
}

* {
  box-sizing: border-box;
}

body {
  min-height: var(--app-live-viewport-height, 100vh);
  margin: 0;
  color: var(--text);
  background: var(--app-background,
    radial-gradient(circle at 12% 15%, rgba(53, 212, 255, 0.12), transparent 30%),
    radial-gradient(circle at 90% 20%, rgba(73, 209, 125, 0.09), transparent 24%),
    linear-gradient(135deg, #090c13 0%, #111827 48%, #10141c 100%));
  background-attachment: fixed;
  font-size: 15px;
}

/* Site-wide theme tokens. Selecting a theme in User recolors the whole app,
   including the page background, by overriding these root variables. */
:root[data-app-theme="graphite"] {
  --app-background:
    radial-gradient(circle at 12% 15%, rgba(53, 212, 255, 0.12), transparent 30%),
    radial-gradient(circle at 90% 20%, rgba(73, 209, 125, 0.09), transparent 24%),
    linear-gradient(135deg, #090c13 0%, #111827 48%, #10141c 100%);
}

:root[data-app-theme="aurora"] {
  --bg: #07151a;
  --panel: #102a30;
  --panel-2: #0d232c;
  --line: #1f4248;
  --line-soft: #173a40;
  --text: #eafaf6;
  --muted: #afd0ca;
  --cyan: #5eead4;
  --green: #34d399;
  --amber: #fbbf77;
  --amber-pill: #fbbf77;
  --amber-pill-border: #a7f3d0;
  --red: #fb7185;
  --violet: #5eead4;
  --shadow: 0 18px 60px rgba(0, 20, 18, 0.45);
  --app-background:
    radial-gradient(circle at 14% 12%, rgba(94, 234, 212, 0.16), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(16, 185, 129, 0.12), transparent 28%),
    linear-gradient(150deg, #04100f 0%, #0a1f22 50%, #061417 100%);
}

:root[data-app-theme="violet"] {
  --bg: #100b1e;
  --panel: #1d1830;
  --panel-2: #211a36;
  --line: #3a2f5a;
  --line-soft: #2e264a;
  --text: #f1ecff;
  --muted: #c2b9da;
  --cyan: #c4b5fd;
  --green: #5eead4;
  --amber: #fcd34d;
  --amber-pill: #fcd34d;
  --amber-pill-border: #ddd6fe;
  --red: #fb7185;
  --violet: #c4b5fd;
  --shadow: 0 18px 60px rgba(20, 10, 40, 0.5);
  --app-background:
    radial-gradient(circle at 16% 14%, rgba(167, 139, 250, 0.18), transparent 32%),
    radial-gradient(circle at 86% 16%, rgba(34, 211, 238, 0.1), transparent 28%),
    linear-gradient(150deg, #0c0719 0%, #181030 50%, #0d0a1e 100%);
}

:root[data-app-theme="solar"] {
  --bg: #1a1206;
  --panel: #261a0d;
  --panel-2: #2b1e0f;
  --line: #4a3820;
  --line-soft: #3a2c19;
  --text: #fdf3e0;
  --muted: #d5c19f;
  --cyan: #facc15;
  --green: #84cc16;
  --amber: #facc15;
  --amber-pill: #facc15;
  --amber-pill-border: #fde68a;
  --red: #f97362;
  --violet: #fbbf24;
  --shadow: 0 18px 60px rgba(40, 26, 6, 0.5);
  --app-background:
    radial-gradient(circle at 14% 12%, rgba(250, 204, 21, 0.16), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(249, 115, 22, 0.12), transparent 28%),
    linear-gradient(150deg, #140d04 0%, #241809 50%, #160f05 100%);
}

:root[data-app-theme="crimson"] {
  --bg: #160a0d;
  --panel: #281418;
  --panel-2: #2d161b;
  --line: #50242e;
  --line-soft: #401c24;
  --text: #fdeef0;
  --muted: #d9b2ba;
  --cyan: #fb7185;
  --green: #34d399;
  --amber: #fcd34d;
  --amber-pill: #fcd34d;
  --amber-pill-border: #fecdd3;
  --red: #fb7185;
  --violet: #f0abfc;
  --shadow: 0 18px 60px rgba(40, 8, 14, 0.5);
  --app-background:
    radial-gradient(circle at 15% 13%, rgba(251, 113, 133, 0.16), transparent 32%),
    radial-gradient(circle at 87% 17%, rgba(244, 63, 94, 0.12), transparent 28%),
    linear-gradient(150deg, #11070a 0%, #220f14 50%, #130809 100%);
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.hidden {
  display: none !important;
}

.app-invite-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--a1-sw-scrim, rgba(2, 6, 12, 0.68));
  backdrop-filter: blur(10px);
}

.app-invite-modal {
  display: grid;
  gap: 14px;
  width: min(420px, calc(100vw - 32px));
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--a1-sw-surface, rgba(12, 18, 28, 0.98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.app-invite-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.app-invite-header h3 {
  min-width: 0;
  margin: 0;
  font-size: 20px;
}

.app-invite-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--text);
  background: var(--a1-sw-surface, rgba(8, 13, 22, 0.8));
  font-size: 24px;
  line-height: 1;
}

.app-invite-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.app-invite-actions .ghost-button,
.app-invite-actions .primary-button {
  width: 100%;
}

.app-invite-message {
  min-height: 20px;
  margin: 0;
}

.auth-view {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 460px);
  gap: 28px;
  min-height: var(--app-live-viewport-height, 100vh);
  padding: 32px;
}

.auth-visual,
.auth-panel,
.sidebar,
.workspace-header,
.feature-card,
.data-panel,
.metric-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow);
}

.auth-visual {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  padding: 44px;
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(20, 27, 39, 0.85), rgba(9, 12, 19, 0.92)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 62px);
}

.auth-copy {
  max-width: 620px;
  position: relative;
  z-index: 2;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 680px;
  margin-bottom: 16px;
  font-size: clamp(36px, 7vw, 82px);
  line-height: 0.95;
  letter-spacing: 0;
}

.auth-note {
  max-width: 560px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.campus-grid {
  position: absolute;
  inset: 0;
  opacity: 0.95;
}

.node,
.trace {
  position: absolute;
  display: block;
}

.node {
  width: 14px;
  height: 14px;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  background: var(--a1-sw-surface, #0c1018);
  box-shadow: 0 0 0 8px rgba(53, 212, 255, 0.08);
}

.node-a {
  left: 18%;
  top: 22%;
}

.node-b {
  left: 62%;
  top: 14%;
  border-color: var(--green);
  box-shadow: 0 0 0 8px rgba(73, 209, 125, 0.08);
}

.node-c {
  left: 74%;
  top: 54%;
  border-color: var(--amber);
  box-shadow: 0 0 0 8px rgba(245, 184, 75, 0.08);
}

.node-d {
  left: 32%;
  top: 68%;
  border-color: var(--violet);
  box-shadow: 0 0 0 8px rgba(155, 140, 255, 0.08);
}

.trace {
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, rgba(53, 212, 255, 0.8), transparent);
}

.trace-one {
  left: 19%;
  top: 23%;
  width: 44%;
  transform: rotate(-8deg);
}

.trace-two {
  left: 62%;
  top: 16%;
  width: 30%;
  transform: rotate(58deg);
  background: linear-gradient(90deg, transparent, rgba(73, 209, 125, 0.8), transparent);
}

.trace-three {
  left: 34%;
  top: 69%;
  width: 42%;
  transform: rotate(-15deg);
  background: linear-gradient(90deg, transparent, rgba(245, 184, 75, 0.8), transparent);
}

.auth-panel {
  align-self: center;
  padding: 28px;
  border-radius: 8px;
  background: var(--a1-sw-surface, rgba(20, 27, 39, 0.92));
  backdrop-filter: blur(18px);
}

.brand-row,
.sidebar-brand,
.user-chip,
.workspace-header,
.code-row,
.feature-nav button,
.course-row,
.message-row,
.timeline-row,
.assignment-row {
  display: flex;
  align-items: center;
}

.brand-row,
.sidebar-brand {
  gap: 12px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #fff;
}

.brand-mark > img {
  display: block;
  width: 95%;
  height: 95%;
  object-fit: contain;
  transform: translateY(-2px);
}

.brand-row strong,
.sidebar-brand strong {
  display: block;
  font-size: 16px;
}

.brand-row span,
.sidebar-brand span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.sidebar-user {
  align-items: center;
  min-width: 0;
}

/* The avatar doubles as a "back to Home" shortcut, so it lives in a button that
   keeps the plain-avatar look. */
.sidebar-user-avatar-button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

@media (hover: hover) {
  .sidebar-user-avatar-button:hover{
    transform: scale(1.06);
    box-shadow: 0 0 0 2px var(--a1-accent, var(--cyan, #6ea8ff));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--a1-accent, var(--cyan, #6ea8ff)) 55%, transparent);
  }
}

.sidebar-user-avatar-button:active {
  transform: scale(0.96);
}

.sidebar-user-avatar-button:focus-visible {
  outline: 2px solid var(--a1-accent, var(--cyan, #6ea8ff));
  outline-offset: 2px;
}

.sidebar-user .avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  overflow: hidden;
}

.sidebar-user .avatar-image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.sidebar-user-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

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

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 28px 0 22px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--a1-sw-surface, #0f1520);
}

.auth-tab {
  min-height: 42px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
}

.auth-tab.active {
  color: var(--text);
  background: var(--panel-2);
}

.auth-form {
  display: grid;
  gap: 16px;
}

.password-field {
  position: relative;
  display: block;
  margin: 0;
}

.password-field input {
  width: 100%;
  padding-right: 64px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  min-width: 46px;
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  color: var(--cyan);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  transform: translateY(-50%);
  cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  background: rgba(53, 212, 255, 0.1);
  outline: 2px solid rgba(53, 212, 255, 0.42);
}

.code-field {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin: 0;
}

.code-field input {
  flex: 1 1 auto;
  min-width: 0;
  letter-spacing: 3px;
}

.code-send-button {
  flex: 0 0 auto;
  min-width: 116px;
  padding: 0 12px;
  border: 1px solid rgba(53, 212, 255, 0.42);
  border-radius: 8px;
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.08);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.code-send-button:hover:not(:disabled),
.code-send-button:focus-visible {
  background: rgba(53, 212, 255, 0.16);
  outline: 2px solid rgba(53, 212, 255, 0.42);
}

.code-send-button:disabled {
  color: var(--muted);
  border-color: var(--line);
  background: transparent;
  cursor: default;
}

.auth-form-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.auth-link-button {
  justify-self: end;
  margin-top: -8px;
  padding: 0;
  border: 0;
  color: var(--cyan);
  background: transparent;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.auth-legal-links {
  margin: 18px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.auth-legal-links a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.user-app-version a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.danger-button {
  padding: 10px 16px;
  border: 1px solid rgba(217, 72, 63, 0.55);
  border-radius: 10px;
  background: rgba(217, 72, 63, 0.14);
  color: #e4574c;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.danger-button:hover,
.danger-button:focus-visible {
  background: rgba(217, 72, 63, 0.24);
}

.danger-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.terms-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--a1-sw-surface, rgba(16, 23, 34, 0.88));
  font-size: 12px;
  line-height: 1.45;
}

.terms-check input {
  flex: 0 0 auto;
  width: 18px;
  min-height: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--cyan);
}

.terms-check span {
  display: block;
  min-width: 0;
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.terms-check strong {
  color: var(--text);
}

.auth-terms-details {
  margin-top: -10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--a1-sw-surface-2, rgba(16, 23, 34, 0.58));
  font-size: 12px;
  line-height: 1.45;
}

.auth-terms-details summary {
  color: var(--text);
  font-weight: 750;
  cursor: pointer;
}

.auth-terms-details p {
  margin: 8px 0 0;
}

.auth-terms-details strong {
  color: var(--text);
}

label span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 13px;
}

input,
select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--a1-sw-surface, #0f1520);
  padding: 0 12px;
  outline: none;
}

input:focus,
select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(53, 212, 255, 0.15);
}

.code-row {
  gap: 8px;
}

.code-row input {
  min-width: 0;
}

.primary-button,
.ghost-button,
.logout-button {
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 700;
}

.primary-button {
  color: #081018;
  background: linear-gradient(135deg, var(--cyan), var(--green));
}

.ghost-button {
  flex: 0 0 auto;
  color: var(--text);
  background: var(--a1-sw-surface, #101722);
  border-color: var(--line);
  padding: 0 12px;
}

.refresh-icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}

.refresh-icon {
  display: block;
  line-height: 1;
  transform-origin: center;
}

.refresh-icon-button.is-loading .refresh-icon {
  animation: refresh-spin 800ms linear infinite;
}

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

.form-message {
  min-height: 22px;
  margin: 16px 0 0;
  color: var(--amber);
  font-size: 13px;
}

.app-view {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  min-height: var(--app-live-viewport-height, 100vh);
}

.sidebar {
  position: sticky;
  top: 0;
  height: var(--app-live-viewport-height, 100vh);
  padding: 22px 16px;
  background: var(--a1-sw-surface, rgba(13, 18, 27, 0.94));
  border-width: 0 1px 0 0;
  box-shadow: none;
}

.feature-nav {
  display: grid;
  gap: 7px;
  margin-top: 30px;
}

.feature-nav button {
  width: 100%;
  gap: 11px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  text-align: left;
}

.feature-nav button.active {
  color: var(--text);
  border-color: var(--line);
  background: var(--panel);
}

.nav-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: #071019;
  background: var(--cyan);
  font-size: 12px;
  font-weight: 900;
}

.feature-nav-attention-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent);
}

.app-line-icon {
  display: block;
  width: 22px;
  height: 22px;
}

.logout-button {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 18px;
  color: var(--text);
  background: transparent;
  border-color: var(--line);
}

.workspace {
  min-width: 0;
  padding: 24px;
}

.workspace-header {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding: 18px 20px;
  border-radius: 8px;
  background: var(--a1-sw-surface, rgba(20, 27, 39, 0.82));
  box-shadow: none;
}

.workspace-header h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: 0;
}

.offline-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -8px 0 22px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 184, 75, 0.46);
  border-radius: 8px;
  background: rgba(245, 184, 75, 0.12);
  color: var(--text);
}

.offline-banner.hidden {
  display: none;
}

.offline-banner strong,
.offline-banner span {
  display: block;
}

.offline-banner strong {
  margin-bottom: 3px;
  color: var(--amber);
  font-size: 14px;
}

.offline-banner span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.offline-retry-button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 14px;
  border-color: rgba(245, 184, 75, 0.52);
  border-radius: 8px;
  color: var(--amber);
  background: var(--a1-sw-surface-2, rgba(8, 13, 22, 0.64));
  font-size: 13px;
}

.offline-retry-button:disabled {
  cursor: progress;
  opacity: 0.72;
}

@media (max-width: 980px) {
  .offline-banner {
    align-items: stretch;
    flex-direction: column;
    margin: -10px 0 18px;
    padding: 11px 12px;
  }

  .offline-retry-button {
    width: 100%;
  }
}

.user-chip {
  gap: 10px;
  flex: 0 0 auto;
  max-width: 320px;
  min-height: 46px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--a1-sw-surface, #101722);
}

.avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #071019;
  background: var(--amber);
  font-weight: 900;
}

.user-chip strong,
.user-chip span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-chip span {
  color: var(--muted);
  font-size: 12px;
}

.feature-host {
  min-width: 0;
}

.app-view .eyebrow {
  display: none;
}

.feature-grid,
.metric-grid,
.split-grid {
  display: grid;
  gap: 16px;
}

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

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

.split-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
}

.feature-card,
.data-panel,
.metric-card {
  border-radius: 8px;
  background: var(--a1-sw-surface, rgba(20, 27, 39, 0.82));
  box-shadow: none;
}

.feature-card,
.metric-card {
  padding: 18px;
}

.data-panel {
  overflow: hidden;
}

.panel-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.panel-header h3,
.feature-card h3,
.metric-card h3 {
  margin: 0;
  font-size: 16px;
}

.panel-body {
  padding: 16px 18px;
}

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

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

.metric-value {
  margin: 12px 0 4px;
  color: var(--text);
  font-size: 30px;
  font-weight: 850;
}

.home-dashboard {
  display: grid;
  gap: 16px;
}

.services-page {
  display: grid;
  gap: 12px;
  max-width: 720px;
}

.services-placeholder-body {
  display: grid;
  place-items: center;
  min-height: 180px;
  text-align: center;
}

.services-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-3, rgba(12, 18, 28, 0.48));
}

.service-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 24px;
  justify-items: stretch;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  text-align: center;
  min-height: 52px;
  transition: background 0.15s ease, color 0.15s ease;
}

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

.service-card:hover,
.service-card:focus-visible {
  background: rgba(53, 212, 255, 0.08);
  outline: none;
}

.service-card-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(53, 212, 255, 0.08);
  font-size: 20px;
  line-height: 1;
}

.service-card-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  justify-items: center;
  text-align: center;
}

.service-card-title {
  font-weight: 700;
  font-size: 15px;
}

.service-card-sub {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.service-card-arrow {
  color: var(--muted);
  font-size: 16px;
  justify-self: end;
}

/* The trailing cell carries the school pill as well as the arrow now — the pill
   used to sit inline after the title. A fixed 24px column is exactly one arrow
   wide, so the pill had nowhere to go and wrapped onto its own line, stacking
   above the arrow. Sizing that column to its content keeps the two on one line,
   which is also how docs/design/screen-home.html draws the row. */
.service-card {
  grid-template-columns: 40px minmax(0, 1fr) auto;
}

.service-card-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.service-card-arrow .service-school-badge {
  margin-left: 0;
  vertical-align: baseline;
}

.service-card-pe {
  position: relative;
}

.service-card-pe-launch {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.service-card-pe > .service-card-icon,
.service-card-pe > .service-card-text,
.service-card-pe > .service-card-pe-trail {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.service-card-pe:hover,
.service-card-pe:has(.service-card-pe-launch:focus-visible) {
  background: rgba(53, 212, 255, 0.08);
  outline: none;
}

.service-card-pe:has(.service-card-pe-launch:focus-visible) {
  box-shadow: 0 0 0 2px var(--cyan);
}

.service-card-pe-trail {
  gap: 6px;
}

.service-card-pe-schedule {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: -5px 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: inherit;
  background: rgba(127, 127, 127, 0.05);
  text-decoration: none;
  pointer-events: auto;
}

.service-card-pe-schedule:hover,
.service-card-pe-schedule:focus-visible {
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.service-card-pe-countdown {
  position: relative;
  z-index: 3;
  min-width: 0;
  border: 0;
  font-family: inherit;
  pointer-events: auto;
  cursor: pointer;
}

.service-card-pe-countdown:hover,
.service-card-pe-countdown:focus-visible {
  filter: brightness(1.08);
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

.services-modal,
.quick-memory-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--a1-sw-scrim, rgba(4, 8, 13, 0.68));
}

.services-modal.hidden,
.quick-memory-modal.hidden {
  display: none;
}

/* MIT PE opens the official registration system directly. The only in-app
   surface is a compact first-use traffic/device warning. */
.services-modal.services-pe-warning-modal {
  z-index: 320;
  place-items: center;
  align-items: center;
}

.services-modal.services-pe-time-modal {
  z-index: 321;
  place-items: center;
  align-items: center;
}

.services-modal.services-shuttle-modal {
  z-index: 322;
  place-items: center;
  align-items: center;
}

body.services-shuttle-open {
  overflow: hidden;
}

.service-shuttle-countdown {
  white-space: nowrap;
  font-size: 11px;
}

.service-shuttle-countdown[hidden] {
  display: none;
}

.services-shuttle-card {
  display: grid;
  gap: 18px;
  width: min(430px, calc(100dvw - 36px));
  max-height: calc(var(--app-live-viewport-height, 100dvh) - 36px);
  overflow-y: auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  background: var(--a1-sw-surface, var(--panel));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

.services-shuttle-head,
.services-shuttle-foot,
.services-shuttle-arrivals li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.services-shuttle-head span,
.services-shuttle-foot,
.services-shuttle-fields label {
  color: var(--muted);
  font-size: 13px;
}

.services-shuttle-head h3 {
  margin: 3px 0 0;
  font-size: 22px;
}

.services-shuttle-head .icon-button {
  flex: none;
  min-width: 44px;
  min-height: 44px;
}

.services-shuttle-fields {
  display: grid;
  gap: 12px;
}

.services-shuttle-fields label {
  display: grid;
  gap: 6px;
  font-weight: 650;
}

.services-shuttle-fields select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--panel);
  font: inherit;
  font-size: 15px;
}

.services-shuttle-result {
  min-height: 72px;
  padding: 14px;
  border-radius: 12px;
  background: var(--a1-sw-surface-muted, rgba(125, 140, 160, 0.08));
  overflow-wrap: anywhere;
}

.services-shuttle-arrivals {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.services-shuttle-arrivals strong {
  font-size: 22px;
}

.services-shuttle-arrivals time {
  color: var(--muted);
  font-size: 14px;
}

.services-shuttle-arrival-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.services-shuttle-arrival-age {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
}

.services-shuttle-route-pill {
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 999px;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.services-shuttle-foot {
  flex-wrap: wrap;
  font-size: 12px;
}

.services-shuttle-foot a {
  color: var(--accent);
}

body.services-pe-warning-open,
body.services-pe-time-open {
  overflow: hidden;
}

.pe-warning-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  width: min(340px, calc(100dvw - 48px));
  max-height: calc(var(--app-live-viewport-height, 100dvh) - 28px);
  overflow-y: auto;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  background: var(--a1-sw-surface, var(--panel));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  text-align: center;
}

.pe-warning-x {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font-size: 24px;
  cursor: pointer;
}

.pe-warning-x:hover,
.pe-warning-x:focus-visible {
  color: var(--text);
  background: rgba(127, 127, 127, 0.1);
  outline: none;
}

.pe-warning-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(240, 173, 78, 0.12);
  font-size: 25px;
}

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

.pe-warning-card p {
  max-width: 340px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.pe-warning-choice {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-size: 13px;
  cursor: pointer;
}

.pe-warning-choice input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--cyan);
}

.pe-warning-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.pe-warning-actions button {
  min-height: 44px;
}

.pe-time-card {
  display: grid;
  gap: 16px;
  width: min(320px, calc(100dvw - 48px));
  max-height: calc(var(--app-live-viewport-height, 100dvh) - 48px);
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  background: var(--a1-sw-surface, var(--panel));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.pe-time-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pe-time-heading span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pe-time-heading h3 {
  margin: 3px 0 0;
  font-size: 17px;
}

.pe-time-close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: rgba(127, 127, 127, 0.08);
  font-size: 22px;
  cursor: pointer;
}

.pe-time-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.pe-time-list > div {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(127, 127, 127, 0.07);
}

.pe-time-list dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.pe-time-list dd {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.pe-time-done {
  width: 100%;
  min-height: 42px;
}

/* ===== When2meet =========================================================
   Availability grid. Built mobile-first: the sheet is full-screen on phones,
   the grid scrolls horizontally inside its own box with a sticky time gutter,
   and cells are drag-painted with pointer events. */
/* Two class names on purpose: a later mobile media query sets
   `.services-modal { padding: 12px }`, and at equal specificity that would win
   on source order — which pushed the 100dvh sheet 12px down so its bottom edge
   hung off the screen. */
.services-modal.services-when2meet-modal {
  z-index: 320;
  padding: 0;
  place-items: stretch;
}

body.services-when2meet-open {
  overflow: hidden;
}

body.services-when2meet-open .feature-nav {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Flex, not a fixed row template: the shell has between two and five children
   depending on how many banners are showing, so a `auto auto 1fr` grid put the
   body on an auto row most of the time. An auto row has no bounded height, so
   `overflow-y: auto` on the body never engaged and long content ran off the
   bottom of the screen with no way to scroll to it. */
.w2m-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  /* Fill the fixed, inset-0 host rather than restating the viewport height, so
     any padding on the host can never push the bottom off-screen. */
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--panel);
}

.w2m-head,
.w2m-banner {
  flex: 0 0 auto;
}

.w2m-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
  /* calc(+), never max(): max() parks the controls exactly on the safe-area
     boundary and the system clock/battery row overlapped them on some
     iPhones (same rule as the standardized dialog *-head containers). */
  padding: calc(10px + var(--a1-safe-top)) 12px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.w2m-head h2 {
  margin: 0;
  overflow: hidden;
  font-size: 16px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.w2m-icon-button {
  display: grid;
  place-items: center;
  /* 40px keeps the tap target comfortable without crowding the title. */
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--text);
  background: rgba(127, 127, 127, 0.06);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.w2m-icon-button.is-ghost {
  border-color: transparent;
  background: none;
}

.w2m-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  /* flex-basis 0 + min-height 0 is what actually bounds the scroll container;
     without both, the body sizes to its content instead of the leftover space. */
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 12px 12px calc(28px + var(--a1-safe-bottom));
  -webkit-overflow-scrolling: touch;
}

/* Children keep their natural height and let the body scroll past them. As a
   grid this compressed instead: the grid wrapper sets overflow-x, which makes it
   a scroll container with a zero auto-minimum, so a 762px schedule was squeezed
   into 293px of row and the rest was simply unreachable. */
.w2m-body > * {
  flex: 0 0 auto;
}

.w2m-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
}

.w2m-banner.is-error {
  color: #ffb4c0;
  background: rgba(255, 91, 120, 0.09);
}

.w2m-spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--cyan);
  border-radius: 999px;
  animation: refresh-spin 800ms linear infinite;
}

/* --- mode menu --- */
.w2m-menu {
  display: grid;
  gap: 10px;
}

.w2m-mode-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 13px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  color: var(--text);
  background: rgba(127, 127, 127, 0.045);
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) {
  .w2m-mode-card:hover{
    border-color: rgba(53, 212, 255, 0.3);
  }
}

.w2m-mode-icon {
  font-size: 24px;
  line-height: 1;
}

.w2m-mode-card strong {
  display: block;
  font-size: 14px;
}

.w2m-mode-card small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.w2m-mode-arrow {
  color: var(--muted);
}

.w2m-join {
  display: grid;
  gap: 8px;
  padding: 13px 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
}

.w2m-join label {
  display: grid;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
}

/* --- shared controls --- */
.w2m-window,
.w2m-form {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(127, 127, 127, 0.03);
}

.w2m-window label,
.w2m-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
}

.w2m-time-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.w2m-shell input,
.w2m-shell select {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  background: var(--a1-sw-surface, #0f1520);
  font: inherit;
  font-size: 14px;
}

.w2m-primary,
.w2m-ghost {
  min-height: 42px;
  padding: 0 15px;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.w2m-primary {
  border: 1px solid rgba(53, 212, 255, 0.4);
  color: #071018;
  background: var(--cyan);
}

.w2m-primary:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Services audit (task #19): under the design skin, .primary-button renders as
   white text on the accent fill, but .w2m-primary was never skinned, so the
   When2meet "Join" (and bar-action) buttons kept near-black text (#071018) on
   the accent background -- low contrast and inconsistent with every other
   primary CTA. Match the skinned primary button. UI-only, services-scoped. */
html[data-a1-skin] .w2m-primary {
  color: var(--a1-on-accent);
  background: var(--a1-accent);
  border-color: transparent;
}
@media (hover: hover) {
  html[data-a1-skin] .w2m-primary:hover:not(:disabled){
    background: var(--a1-accent-hover);
  }
}

.w2m-ghost {
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(127, 127, 127, 0.06);
}

.w2m-danger {
  border-color: rgba(255, 91, 120, 0.36);
  color: #ffb4c0;
}

.w2m-block {
  width: 100%;
}

.w2m-form-actions {
  display: flex;
  gap: 8px;
}

.w2m-form-actions > * {
  flex: 1 1 0;
}

.w2m-empty,
.w2m-note {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.w2m-hint {
  text-align: center;
}

/* --- friend picker --- */
.w2m-picker {
  display: grid;
  gap: 9px;
}

.w2m-picker-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
}

.w2m-picker-head small {
  color: var(--muted);
}

.w2m-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.w2m-chip {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: rgba(127, 127, 127, 0.05);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.w2m-chip.is-on {
  border-color: rgba(53, 212, 255, 0.5);
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.14);
}

/* --- room --- */
.w2m-room-head {
  display: grid;
  gap: 7px;
}

.w2m-share {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.w2m-share-input {
  min-width: 0;
  font-size: 12px !important;
}

.w2m-rooms {
  display: grid;
  gap: 9px;
}

.w2m-room-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 11px 13px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  color: var(--text);
  background: rgba(127, 127, 127, 0.045);
  text-align: left;
  cursor: pointer;
}

.w2m-room-card strong {
  display: block;
  font-size: 13px;
}

.w2m-room-card small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.w2m-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: var(--a1-sw-surface, #101724);
}

.w2m-bar.is-editing {
  border-color: rgba(53, 212, 255, 0.4);
  background:
    linear-gradient(rgba(53, 212, 255, 0.09), rgba(53, 212, 255, 0.09)),
    var(--panel);
}

.w2m-bar-copy {
  flex: 1 1 150px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.w2m-bar-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.w2m-bar-actions .w2m-ghost,
.w2m-bar-actions .w2m-primary {
  min-height: 38px;
  padding: 0 11px;
  font-size: 12px;
}

.w2m-room-footer {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

/* --- the grid --- */
.w2m-grid-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.w2m-grid {
  display: grid;
  /* A fixed minimum column keeps cells thumb-sized; the wrapper scrolls when
     more days are shown than fit. */
  grid-template-columns: 46px repeat(var(--w2m-cols), minmax(44px, 1fr));
  gap: 2px;
  min-width: min-content;
  /* Touch always keeps panning available. A tap selects one square, while
     mouse and pen users can still drag-paint across several squares. */
  touch-action: pan-x pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.w2m-grid.is-painting {
  cursor: crosshair;
}

@media (max-width: 480px) {
  .w2m-bar.is-editing {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .w2m-bar.is-editing .w2m-bar-copy,
  .w2m-bar-actions {
    width: 100%;
    min-width: 0;
  }

  .w2m-bar-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .w2m-bar-actions .w2m-ghost,
  .w2m-bar-actions .w2m-primary {
    min-width: 0;
    padding-right: 6px;
    padding-left: 6px;
  }
}

.w2m-grid-corner {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--panel);
}

.w2m-col-head {
  padding: 4px 2px 6px;
  text-align: center;
}

.w2m-col-head strong {
  display: block;
  font-size: 11px;
  font-weight: 750;
}

.w2m-col-head small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.w2m-row-head {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  color: var(--muted);
  background: var(--panel);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.w2m-cell {
  min-height: 26px;
  padding: 0;
  border: 0;
  border-top: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
}

.w2m-cell.is-hour {
  border-top-color: var(--a1-sw-line, rgba(255, 255, 255, 0.12));
}

/* Heat ramp: nobody free → everybody free. */
.w2m-heat-0 { background: rgba(127, 127, 127, 0.07); }
.w2m-heat-1 { background: rgba(53, 212, 255, 0.16); }
.w2m-heat-2 { background: rgba(53, 212, 255, 0.32); }
.w2m-heat-3 { background: rgba(53, 212, 255, 0.5); }
.w2m-heat-4 { background: rgba(80, 220, 150, 0.72); }

/* Your own calendar conflict is hatched so it reads differently from
   "other people are busy". */
.w2m-cell.is-busy-me {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 91, 120, 0.5) 0,
    rgba(255, 91, 120, 0.5) 2px,
    transparent 2px,
    transparent 5px
  );
}

.w2m-cell.is-mine {
  outline: 2px solid rgba(53, 212, 255, 0.85);
  outline-offset: -2px;
}

.w2m-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
}

.w2m-legend-swatch {
  width: 16px;
  height: 12px;
  border-radius: 3px;
}

.w2m-legend-busy {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 91, 120, 0.5) 0,
    rgba(255, 91, 120, 0.5) 2px,
    transparent 2px,
    transparent 5px
  );
  background-color: rgba(127, 127, 127, 0.07);
}

.w2m-legend-sep {
  width: 1px;
  height: 12px;
  margin: 0 3px;
  background: var(--line);
}

/* --- slot detail --- */
.w2m-detail {
  display: grid;
  gap: 7px;
  padding: 11px 12px;
  border: 1px solid rgba(53, 212, 255, 0.26);
  border-radius: 11px;
  background: rgba(53, 212, 255, 0.05);
}

.w2m-detail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.w2m-detail-head span {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.w2m-detail-line,
.w2m-detail-busy {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-size: 11.5px;
  line-height: 1.5;
  list-style: none;
}

.w2m-detail-busy li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 4px;
  color: var(--muted);
}

.w2m-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 999px;
}

.w2m-dot.is-free { background: #4fd39a; }
.w2m-dot.is-busy { background: #ff5b78; }

.w2m-private {
  color: var(--muted);
  font-style: italic;
}

@media (min-width: 981px) {
  /* Full-bleed at every width: an availability grid is the whole task while it
     is open, and a 900px sheet made the week scroll horizontally on a screen
     with room to spare. */
  .w2m-shell {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }

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

  .w2m-cell {
    min-height: 22px;
  }
}

.services-modal-dialog,
.quick-memory-dialog {
  display: grid;
  gap: 16px;
  width: min(100%, 680px);
  max-height: min(92dvh, 840px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.quick-memory-dialog {
  width: min(100%, 720px);
}

.services-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.services-modal-title {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.services-modal-header strong {
  color: var(--text);
  font-size: 17px;
}

.services-modal-title span {
  min-height: 15px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.quick-memory-modal-close {
  color: var(--muted);
}

.services-games-body {
  display: grid;
  gap: 16px;
}

.services-game-select {
  width: 100%;
  text-align: left;
}

.services-game-select.is-active {
  border-color: rgba(53, 212, 255, 0.55);
  background: rgba(53, 212, 255, 0.08);
}

/* Games are choices, not settings rows. A compact card grid gives each game a
   recognizable icon, a one-line mental model, and separate Play/Leaderboard
   targets without turning the dialog into a long spreadsheet. */
.services-games-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  padding: 2px;
}

.services-game-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  min-width: 0;
  min-height: 154px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(53, 212, 255, 0.055), transparent 56%),
    var(--a1-sw-surface-3, rgba(12, 18, 28, 0.48));
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.08);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.services-game-main {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: start;
  gap: 13px;
  min-width: 0;
  padding: 18px 16px 12px;
  border: 0;
  border-radius: 0;
  color: var(--text);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.services-game-card:hover,
.services-game-card:focus-within {
  border-color: rgba(53, 212, 255, 0.48);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.13);
  transform: translateY(-2px);
}

.services-game-main:hover,
.services-game-main:focus-visible {
  background: rgba(53, 212, 255, 0.05);
  outline: none;
}

/* A calm footer keeps ranking secondary to actually playing the game. */
.services-game-lb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: auto;
  min-width: 0;
  height: 38px;
  margin: 0 14px 14px;
  padding: 0 11px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: rgba(127, 127, 127, 0.055);
  color: var(--text);
  font: inherit;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.services-game-lb:hover,
.services-game-lb:focus-visible {
  border-color: rgba(53, 212, 255, 0.6);
  background: rgba(127, 127, 127, 0.06);
  outline: none;
}

.services-game-lb strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.services-game-icon {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(53, 212, 255, 0.12);
  border-radius: 14px;
  background: rgba(53, 212, 255, 0.075);
  font-size: 24px;
}

.services-game-name {
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Self-hosted Fluent Emoji SVGs: fixed box, never stretch the row. */
.fluent-emoji {
  display: block;
  flex: none;
}

/* School-tagged services: badge chip. Home opts all rows into the visibility
   manager; other Services grids can still use show-other-schools explicitly. */
.service-school-badge {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(127, 127, 127, 0.1);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  vertical-align: 2px;
}

.services-grid:not(.show-other-schools) .service-card-other {
  display: none;
}

.home-service-head h3 {
  margin-right: auto;
}

.services-grid .service-hidden-by-user {
  display: none;
}

.home-service-head-actions {
  display: inline-flex;
  gap: 8px;
}

.home-service-hide.home-service-manager-trigger {
  width: 36px;
  height: 36px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.home-service-hide.home-service-manager-trigger.is-open {
  color: var(--cyan);
  border-color: rgba(53, 212, 255, 0.58);
  background: rgba(53, 212, 255, 0.12);
}

body.home-services-manager-open {
  overflow: hidden;
}

.home-services-manager-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: max(18px, var(--a1-safe-top)) max(18px, var(--a1-safe-right)) max(18px, var(--a1-safe-bottom)) max(18px, var(--a1-safe-left));
  background: rgba(3, 7, 13, 0.74);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.home-services-manager {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(540px, 100%);
  min-height: 0;
  max-height: min(720px, calc(var(--app-live-viewport-height, 100dvh) - 36px - var(--a1-safe-top) - var(--a1-safe-bottom)));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.52);
}

.home-services-manager:focus {
  outline: none;
}

.home-services-manager-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.home-services-manager-head > span,
.home-services-manager-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.home-services-manager-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.home-services-manager-title > strong {
  min-width: 0;
}

.home-services-manager-school {
  flex: 0 0 auto;
  max-width: 104px;
  overflow: hidden;
  padding: 2px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(127, 127, 127, 0.1);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-services-manager-copy small.home-services-manager-details {
  display: flex;
  align-items: center;
  gap: 6px;
}

.home-services-manager-detail-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-services-manager-head strong {
  font-size: 19px;
  line-height: 1.25;
}

.home-services-manager-head small {
  max-width: 410px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.home-services-manager-close,
.home-services-sort-actions button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(127, 127, 127, 0.07);
  cursor: pointer;
}

.home-services-manager-close:hover,
.home-services-manager-close:focus-visible,
.home-services-sort-actions button:hover,
.home-services-sort-actions button:focus-visible {
  color: var(--text);
  border-color: rgba(53, 212, 255, 0.52);
  background: rgba(53, 212, 255, 0.1);
  outline: none;
}

.home-services-manager-list {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  padding: 14px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.home-services-visibility-row,
.home-services-sort-row {
  width: 100%;
  min-height: 64px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  color: var(--text);
  background: var(--panel-2);
}

.home-services-visibility-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 13px 11px 15px;
  text-align: left;
  cursor: pointer;
}

.home-services-visibility-row:hover,
.home-services-visibility-row:focus-visible {
  border-color: rgba(53, 212, 255, 0.52);
  background: color-mix(in srgb, var(--panel-2) 86%, var(--cyan));
  outline: none;
}

.home-services-visibility-row.is-hidden {
  color: color-mix(in srgb, var(--text) 68%, var(--muted));
  background: color-mix(in srgb, var(--panel-2) 88%, var(--bg));
}

.home-services-manager-copy strong,
.home-services-manager-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-services-manager-copy strong {
  font-size: 14px;
  line-height: 1.35;
}

.home-services-manager-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.home-services-visibility-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 88px;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid rgba(53, 212, 255, 0.36);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.09);
  font-size: 12px;
  font-weight: 800;
}

.home-services-visibility-row.is-hidden .home-services-visibility-status {
  color: var(--muted);
  border-color: var(--line);
  background: rgba(127, 127, 127, 0.07);
}

.home-services-sort-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px 10px 9px 12px;
}

.home-services-sort-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.1);
  font-size: 12px;
  font-weight: 850;
}

.home-services-sort-actions {
  display: inline-flex;
  gap: 7px;
}

.home-services-sort-actions button:disabled {
  opacity: 0.3;
  cursor: default;
}

.home-services-manager-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 11.5px;
}

.home-services-manager-foot button {
  min-width: 92px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(53, 212, 255, 0.5);
  border-radius: 12px;
  color: #061019;
  background: var(--cyan);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.home-services-manager-foot button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .home-service-hide.home-service-manager-trigger {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .home-services-manager-backdrop {
    align-items: end;
    padding: max(12px, var(--a1-safe-top)) 0 0;
  }

  .home-services-manager {
    width: 100%;
    height: min(780px, calc(var(--app-live-viewport-height, 100dvh) - max(12px, var(--a1-safe-top))));
    max-height: calc(var(--app-live-viewport-height, 100dvh) - max(12px, var(--a1-safe-top)));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 22px 22px 0 0;
  }

  .home-services-manager-head {
    padding: 18px 16px 14px;
  }

  .home-services-manager-list {
    gap: 9px;
    padding: 12px 14px;
    scrollbar-gutter: auto;
  }

  .home-services-visibility-row,
  .home-services-sort-row {
    min-height: 66px;
  }

  .home-services-visibility-row {
    padding-right: 10px;
  }

  .home-services-sort-row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 9px;
    padding-right: 9px;
    padding-left: 10px;
  }

  .home-services-sort-actions {
    gap: 5px;
  }

  .home-services-manager-foot {
    padding: 12px 14px max(12px, var(--a1-safe-bottom));
  }
}

.services-game-medal {
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

.services-game-medal.hidden {
  display: none;
}

.services-games-back {
  font-size: 22px;
  line-height: 1;
}

/* Keep the game picker top-aligned so its card grid scrolls naturally instead
   of floating in a stretched, vertically centered sheet. */
.services-modal[data-services-games-modal],
.services-modal[data-game-leaderboard-modal] {
  align-items: start;
  overflow: hidden;
  overscroll-behavior: contain;
}

.services-modal[data-services-games-modal] .services-modal-dialog,
.services-modal[data-game-leaderboard-modal] .services-modal-dialog {
  align-self: start;
  gap: 12px;
  max-height: calc(var(--app-live-viewport-height, 100dvh) - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.services-modal[data-services-games-modal] .services-modal-dialog {
  width: min(94vw, 980px);
}

.services-modal[data-services-games-modal] .services-games-grid,
.services-modal[data-game-leaderboard-modal] .quick-memory-leaderboard-list {
  min-height: 0;
}

@media (max-width: 720px) {
  .services-games-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .services-game-card {
    min-height: 142px;
  }

  .services-game-main {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 11px;
    padding: 15px 13px 10px;
  }

  .services-game-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .services-game-lb {
    margin: 0 12px 12px;
  }
}

.quick-memory-start-screen.hidden {
  display: none;
}

.quick-memory-start-main {
  min-width: 172px;
  min-height: 58px;
  padding: 0 28px;
  font-size: 18px;
}

.quick-memory-play.hidden {
  display: none;
}

.quick-memory-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.quick-memory-exit {
  min-width: 72px;
}

.quick-memory-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-memory-help-button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--a1-sw-surface, #101722);
  color: var(--cyan);
  font-size: 18px;
  font-weight: 900;
}

.quick-memory-help-button:hover,
.quick-memory-help-button:focus-visible {
  border-color: var(--cyan);
  outline: none;
}

.quick-memory-stat span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.quick-memory-stat strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.1;
  min-height: 20px;
}

.quick-memory-start {
  min-width: 112px;
  padding: 0 18px;
}

.quick-memory-leaderboard-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.quick-memory-player strong {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-memory-game-over {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--a1-sw-surface-2, rgba(4, 8, 13, 0.74));
}

.quick-memory-game-over.hidden {
  display: none;
}

.quick-memory-game-over-card > strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1.1;
}

.quick-memory-rules.hidden {
  display: none;
}

.quick-memory-rules-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.services-map-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.services-map-open {
  color: var(--cyan);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.services-map-open:hover,
.services-map-open:focus-visible {
  text-decoration: underline;
  outline: none;
}

.services-map-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.services-map-frame {
  display: block;
  width: 100%;
  height: min(72vh, 760px);
  border: 0;
  background: var(--panel-2);
}

.services-map-hint {
  margin: 0;
  padding: 9px 14px 12px;
  font-size: 12px;
  line-height: 1.4;
}

.services-map-hint a {
  color: var(--cyan);
  font-weight: 700;
}

@media (max-width: 980px) {
  .services-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-card {
    padding: 11px 12px;
    min-height: 50px;
  }

  .services-game-card {
    padding: 0;
  }

  .services-modal,
  .quick-memory-modal,
  .quick-memory-game-over {
    align-items: stretch;
    padding: 12px;
  }

  .services-modal-dialog,
  .quick-memory-dialog {
    width: 100%;
    max-height: calc(var(--app-live-viewport-height, 100dvh) - 24px);
    padding: 14px;
  }

  .services-modal[data-services-games-modal],
  .services-modal[data-game-leaderboard-modal] {
    bottom: auto;
    place-items: stretch;
    height: var(--app-live-viewport-height, 100dvh);
    padding: 0;
  }

  .services-modal[data-services-games-modal] .services-modal-dialog,
  .services-modal[data-game-leaderboard-modal] .services-modal-dialog {
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }

  

  .quick-memory-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .quick-memory-exit {
    min-width: 64px;
  }

  

  

  .quick-memory-start {
    width: 100%;
  }

  

  

  /* Fill most of the phone screen, leaving room for the app header + bottom nav. */
  .services-map-frame {
    height: calc(var(--app-live-viewport-height, 100dvh) - 250px);
    min-height: 360px;
  }
}

.home-welcome {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.home-welcome h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.1;
}

.home-sync-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.home-sync-actions .row-meta {
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.home-metric-card {
  min-height: 128px;
}

/* One big frame holding all Home sections (mirrors the Learn answers panel). */
.home-panel-main {
  border: 1px solid var(--line);
}

.home-board {
  display: block;
  min-width: 0;
}

.home-board > .home-reminder-status {
  margin: 12px 14px 4px;
}

.home-panel {
  min-width: 0;
}

/* Sections are flush rows within the one frame — no per-section card. */
.home-section {
  min-width: 0;
}

.home-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 6px;
}

.home-section-body {
  padding: 0 8px 8px;
}

.home-section.collapsed .home-section-body,
.home-section-empty:not(.home-section-adding) .home-section-body {
  display: none;
}

.home-reminder-status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 12px 46px 12px 12px;
  border: 1px solid rgba(53, 212, 255, 0.3);
  border-radius: 8px;
  background: rgba(53, 212, 255, 0.08);
}

.home-reminder-status > .home-reminder-status-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.home-reminder-status-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.home-reminder-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--a1-sw-surface-3, rgba(5, 10, 17, 0.34));
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.home-reminder-dismiss:hover,
.home-reminder-dismiss:focus-visible {
  color: var(--text);
  border-color: rgba(53, 212, 255, 0.42);
}

.home-reminder-guide-button {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .home-reminder-status.home-reminder-notice {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 12px 46px 12px 12px;
  }

  .home-reminder-status-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .home-reminder-status-actions .compact-action-button {
    flex: 1 1 auto;
  }
}

.home-reminder-status strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.home-reminder-status span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.home-reminder-status.ready {
  border-color: rgba(73, 209, 125, 0.44);
  background: rgba(73, 209, 125, 0.09);
}

.home-reminder-status.warning {
  border-color: rgba(255, 190, 106, 0.45);
  background: rgba(255, 190, 106, 0.09);
}

.home-reminder-status.error {
  border-color: rgba(255, 107, 107, 0.48);
  background: rgba(255, 107, 107, 0.09);
}

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

.home-panel-header p {
  margin: 4px 0 0;
}

.home-panel-heading {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.home-panel-collapse {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.home-panel-text {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.home-panel-count {
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
}

.home-panel-chevron {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.15s ease;
}

.home-panel.collapsed .home-panel-chevron {
  transform: rotate(-90deg);
}

.home-panel.collapsed .home-panel-body {
  display: none;
}

/* Empty sections: no collapse toggle / placeholder. Align the static title with
   collapsible ones (which are indented by the chevron), and hide the body unless
   the add form is open. */
.home-panel-heading-static {
  display: flex;
  align-items: center;
  padding-left: 22px;
}
.home-panel-empty:not(.home-panel-adding) .home-panel-body {
  display: none;
}

.home-panel-collapse:hover .home-panel-title,
.home-panel-collapse:focus-visible .home-panel-title {
  color: var(--accent, #35d4ff);
}

.home-add-button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  font-size: 17px;
  font-weight: 850;
  line-height: 1;
}

.home-add-button:hover,
.home-add-button:focus-visible {
  color: var(--cyan);
  background: transparent;
  outline: none;
}

.home-add-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--a1-sw-scrim, rgba(5, 10, 18, 0.72));
  backdrop-filter: blur(8px);
}

.home-add-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(520px, calc(100vw - 36px));
  max-height: calc(var(--app-live-viewport-height, 100dvh) - 36px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.home-add-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.home-add-modal-header h3 {
  margin: 0;
  font-size: 16px;
}

.home-add-modal-close {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(127, 127, 127, 0.05);
  font-size: 22px;
  line-height: 1;
}

.home-add-modal-close:hover,
.home-add-modal-close:focus-visible {
  color: var(--text);
  background: rgba(127, 127, 127, 0.13);
  outline: none;
}

.home-add-modal-body {
  min-width: 0;
  overflow: auto;
  padding: 16px;
}

.home-notification-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--a1-sw-scrim, rgba(5, 10, 18, 0.72));
  backdrop-filter: blur(8px);
}

.home-notification-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(680px, calc(100vw - 36px));
  max-height: calc(var(--app-live-viewport-height, 100dvh) - 36px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.home-notification-modal-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 12px;
  align-items: start;
  padding: 15px 16px 13px;
  border-bottom: 1px solid var(--line);
}

.home-notification-modal-heading {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.home-notification-modal-heading h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.home-notification-modal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
}

.home-notification-modal-meta small {
  color: var(--muted);
  font-size: 12px;
}

.home-notification-modal-close {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 24px;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
}

.home-notification-modal-close:hover,
.home-notification-modal-close:focus-visible {
  color: var(--text);
  background: rgba(127, 127, 127, 0.12);
  outline: none;
}

.home-notification-modal-body {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  overflow: auto;
  padding: 16px;
}

.home-notification-modal-text {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.home-panel-body,
.home-item-list {
  display: grid;
  gap: 10px;
}

.home-add-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(15, 21, 32, 0.72));
}

.home-add-modal .home-add-form {
  max-width: 460px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.home-add-modal .home-add-form input,
.home-add-modal .home-add-form select {
  min-height: 38px;
  padding: 0 10px;
  font-size: 14px;
}

.home-add-modal .home-add-form label span {
  margin-bottom: 5px;
  font-size: 12px;
}

.home-add-form label,
.home-form-wide {
  min-width: 0;
}

.home-form-wide,
.home-form-actions {
  grid-column: 1 / -1;
}

.home-add-form textarea {
  min-height: 72px;
  width: 100%;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--a1-sw-surface, #0b1018);
  padding: 10px 12px;
  outline: none;
}

.home-add-modal .home-add-form textarea {
  min-height: 68px;
  padding: 8px 10px;
  font-size: 14px;
}

.home-add-form textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(53, 212, 255, 0.15);
}

.home-form-actions {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.home-edit-form .home-form-actions {
  grid-template-columns: 112px 96px minmax(0, 1fr);
}

/* Flat list rows (no small boxes) — matches the Learn answers list. */
.home-item {
  min-width: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.home-item-row {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
}

@media (hover: hover) {
  .home-item-row:hover{
    background: rgba(127, 127, 127, 0.06);
  }
}

.home-item-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding-right: 6px;
}

.home-item-toggle {
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.home-item-toggle.home-item-static { cursor: default; }

/* Line 1: title + a small colored status word on the right (no box). */
.home-item-titleline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.home-item-titleline strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 800;
}

.home-item-status {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 750;
  color: var(--muted);
}

.home-item-status.amber { color: #ffce6b; }
.home-item-status.red { color: #ff9aa6; }
.home-item-status.cyan { color: var(--cyan, #35d4ff); }

/* Line 2: the date, only rendered when there is one. */
.home-item-date {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Small, borderless icon action buttons on the right of each row. */
.home-icon-button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  font-size: 17px;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
}

.home-system-icon,
.home-icon-button > svg {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.home-icon-button:hover,
.home-icon-button:focus-visible {
  color: var(--text);
  background: rgba(127, 127, 127, 0.14);
  outline: none;
}

.home-icon-button.accent { color: var(--cyan, #35d4ff); }

.home-icon-button.danger:hover,
.home-icon-button.danger:focus-visible {
  color: var(--red, #ffb4b4);
  background: rgba(255, 107, 107, 0.12);
}

.home-item-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.home-item-main strong,
.home-item-main small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-item-main strong {
  font-size: 14px;
  font-weight: 850;
}

.home-item-main small {
  color: var(--muted);
  font-size: 12px;
}

.home-item-details {
  display: grid;
  gap: 12px;
  padding: 0 12px 12px;
}

.home-item-details p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.home-answer-check-detail {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.home-answer-check-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.home-answer-check-badge {
  display: inline-grid;
  place-items: center;
  min-width: 72px;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(148, 163, 184, 0.12);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.home-answer-check-badge.pass {
  color: var(--green, #9af5bf);
  background: rgba(34, 197, 94, 0.15);
}

.home-answer-check-badge.warning {
  color: var(--amber, #ffd37a);
  background: rgba(245, 184, 75, 0.16);
}

.home-answer-check-badge.error {
  color: var(--red, #ffb4b4);
  background: rgba(255, 107, 107, 0.16);
}

.home-answer-check-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-answer-check-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

.home-answer-check-list small {
  color: var(--muted);
}

.home-reminder-chip {
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid rgba(53, 212, 255, 0.32);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.09);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.home-reminder-row {
  display: block;
  min-width: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

@media (hover: hover) {
  .home-reminder-row:hover{
    background: rgba(127, 127, 127, 0.06);
  }
}

.home-reminder-row.editing {
  display: block;
}

.home-reminder-row.editing {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}

.home-reminder-line {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  white-space: nowrap;
}

.home-reminder-title,
.home-reminder-time {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-reminder-title {
  flex: 1 1 auto;
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
}

.home-reminder-time {
  flex: 0 1 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.home-reminder-in {
  flex: 0 0 auto;
  color: #ffd166;
  font-size: 12px;
  font-weight: 900;
}

.home-reminder-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.home-reminder-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;
}

.home-reminder-icon-button:hover,
.home-reminder-icon-button:focus-visible {
  color: var(--text);
  border-color: rgba(53, 212, 255, 0.34);
  background: rgba(53, 212, 255, 0.08);
  outline: none;
}

.home-reminder-icon-button.danger:hover,
.home-reminder-icon-button.danger:focus-visible {
  color: var(--red, #ffb4b4);
  border-color: rgba(255, 107, 107, 0.38);
  background: rgba(255, 107, 107, 0.08);
}

.home-source-link {
  color: var(--cyan);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.home-item-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.home-task-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.home-item-actions .home-action-button {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  min-width: 0;
  width: 100%;
  padding: 0 10px;
  justify-content: center;
}

.home-item-actions .home-action-complete {
  border-color: rgba(73, 209, 125, 0.7);
  color: #05140d;
  background: linear-gradient(135deg, #8df0ad, var(--green));
}

.home-item-actions .home-action-delete {
  border-color: rgba(255, 107, 107, 0.72);
  color: #fff4f4;
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.92), rgba(190, 42, 57, 0.94));
}

.home-task-icon-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  color: var(--text);
  background: var(--a1-sw-surface, #101722);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.home-task-icon-button:hover,
.home-task-icon-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(53, 212, 255, 0.48);
  background: rgba(53, 212, 255, 0.12);
}

.home-task-icon-button.home-action-edit {
  border-color: rgba(255, 190, 106, 0.58);
  color: #ffdca8;
  background: rgba(255, 190, 106, 0.1);
}

.home-empty {
  margin: 0;
  padding: 10px 2px;
}

.chat-shell {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

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

.chat-control-card {
  min-width: 0;
}

.chat-control-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.chat-control-form label {
  min-width: 0;
}

.chat-control-form .primary-button {
  min-width: 92px;
}

.chat-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.34fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.chat-thread-panel,
.chat-message-panel {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.chat-thread-header h3 {
  margin: 0 0 2px;
}

.chat-add-button[aria-expanded="true"],
@media (hover: hover) {
  .chat-add-button:hover{
    color: var(--text);
    background: transparent;
    outline: none;
  }
}

.chat-create-modal-header h3 {
  margin: 0 0 3px;
  font-size: 17px;
}

.chat-create-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 12px;
  width: min(320px, calc(100vw - 36px));
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--a1-sw-surface, rgba(12, 18, 28, 0.98));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}

.chat-create-form h4 {
  margin: 0;
  font-size: 14px;
}

.chat-create-choices > button {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--text);
  background: var(--a1-sw-surface, rgba(8, 13, 22, 0.5));
  text-align: left;
  cursor: pointer;
}

.chat-create-choices > button:hover,
.chat-create-choices > button:focus-visible {
  border-color: var(--cyan);
  outline: none;
  background: color-mix(in srgb, var(--cyan) 8%, var(--a1-sw-surface, #0c121c));
}

.chat-create-choices > button > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.chat-forum-search-row > span:nth-child(2),
.chat-member-profile > span,
.chat-member-schedule-row > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.chat-member-modal-header h3 {
  margin: 0 0 2px;
  font-size: 15px;
}

.chat-member-actions > button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 7px 9px;
  border-color: transparent;
  text-align: left;
}

.chat-member-actions > button > span:last-child {
  display: grid;
  gap: 2px;
}

.chat-member-notice > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 16%, transparent);
  font-weight: 900;
}

.chat-member-notice p {
  margin: 0;
}

.chat-member-schedule h4,
.chat-member-schedule p {
  margin: 0;
}

.chat-member-back-button {
  width: 100%;
}

.chat-group-friend-option:has(input:checked) {
  border-color: rgba(73, 209, 125, 0.58);
  background: rgba(73, 209, 125, 0.14);
}

.chat-group-friend-option span,
.chat-group-friend-option strong,
.chat-group-friend-option small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-thread-section-toggle strong,
.chat-thread-section-toggle small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-thread-section-toggle strong {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chat-friend-section {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.chat-thread-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.chat-thread-section-heading small {
  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
  text-transform: none;
  letter-spacing: 0;
}

.chat-active-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chat-active-header h3,
.chat-active-header p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-settings-menu button,
.chat-settings-menu span {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text);
  background: transparent;
  text-align: left;
}

.chat-settings-menu button:hover,
.chat-settings-menu button:focus-visible {
  border-color: rgba(53, 212, 255, 0.36);
  background: rgba(53, 212, 255, 0.08);
  outline: none;
}

.chat-message-list {
  display: flex;
  flex-direction: column;
  align-content: start;
  gap: 0;
  height: min(58vh, 620px);
  min-height: 320px;
  overflow: auto;
  padding: 12px 6px;
}

.chat-answer-share-copy strong,
.chat-answer-share-copy span,
.chat-answer-share-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-answer-share-copy strong {
  color: var(--text);
  font-size: 13px;
}

.chat-answer-check-header h3,
.chat-answer-check-header p {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-answer-check-loading strong,
.chat-answer-check-summary strong {
  color: var(--text);
  font-size: 13px;
}

.chat-answer-check-file-copy strong,
.chat-answer-check-file-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-answer-check-file-copy strong {
  color: var(--text);
  font-size: 13px;
}

.chat-answer-check-report-meta strong {
  color: var(--text);
  font-size: 12px;
}

.chat-answer-check-empty p {
  max-width: 440px;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

/* Slack-style composer: a rounded field with the text area on top and a compact
   toolbar (attach / emoji / mention) + send button below. */
.chat-composer {
  position: relative;
  display: block;
  margin: 10px 14px 14px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--a1-sw-surface, #0f1520);
}

.chat-composer textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  max-height: 200px;
  padding: 8px 8px;
  border: 0;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
  resize: none;
  outline: none;
}

.chat-composer textarea::placeholder { color: var(--muted); }

/* Plain-text progress readout used across the Registration progress tree.
   Deliberately not a pill: the tree is dense and boxed badges dominate it. */
.progress-stat {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  min-width: 42px;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

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

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

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  /* Semantic pair, not fg-as-background: on the light skin --green is the
     deep OK foreground, and near-black text on it was ~3:1. */
  color: var(--a1-ok-fg, #071019);
  background: var(--a1-ok-bg, var(--green));
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.status-pill.amber {
  border-color: rgba(248, 201, 104, 0.78);
  background: var(--amber-pill);
  color: #101723;
}

.status-pill.red {
  color: #fff;
  background: var(--red);
}

.status-pill.neutral {
  border-color: var(--line);
  color: var(--muted);
  background: var(--panel-2, rgba(127, 127, 127, .1));
}

.course-row,
.message-row,
.timeline-row,
.assignment-row {
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}

.course-row:last-child,
.message-row:last-child,
.timeline-row:last-child,
.assignment-row:last-child {
  border-bottom: 0;
}

.row-title {
  display: block;
  margin-bottom: 4px;
  font-weight: 750;
}

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

.profile-entry-form {
  margin-top: 4px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line-soft);
}

.profile-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-form-actions .primary-button,
.profile-form-actions .ghost-button {
  min-width: 104px;
}

.profile-form-actions .form-message {
  min-height: 20px;
  margin: 0;
}

.row-meta {
  color: var(--muted);
  font-size: 13px;
}

.calendar-shell {
  display: grid;
  gap: 14px;
}

/* The range label is a button that jumps to a picked date. */
.calendar-range-button {
  padding: 6px 4px;
  border: 0;
  border-radius: 8px;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.calendar-range-button:hover,
.calendar-range-button:focus-visible {
  background: rgba(127, 127, 127, 0.08);
  outline: none;
}

/* Invisible anchor for the native picker: rendered (showPicker needs that),
   but takes no space and no pointer. */
.calendar-jump-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Five controls share the header now; the Today chip slims down so the
   cluster stops crowding the "Calendar" title on phones. */
.calendar-panel .panel-actions {
  gap: 6px;
}

/* Stanford's denser calendar header keeps its label subordinate to the
   controls by stepping down one existing type token (17px -> 15px). */
html[data-a1-skin] .calendar-shell[data-calendar-school="stanford"] #calendar-title {
  font-size: var(--a1-fs-h3);
}

.calendar-panel #calendar-today {
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

/* Six controls on a 390px phone: the 44px icon squares drop to 38px so the
   cluster stops eating the "Calendar" title. */
@media (max-width: 640px) {
  .calendar-panel .panel-actions {
    flex-wrap: nowrap;
  }

  /* With the segmented row hidden, keep one deliberate breathing space above
     the date range. Four pixels made labels such as "Aug 14 - Aug 19" look
     pinned to the header controls on a phone. */
  html[data-a1-skin] .calendar-panel > .panel-body {
    padding-top: 12px;
  }

  html[data-a1-skin] .calendar-panel .calendar-pager-row {
    margin-top: 0;
  }

  /* Phones scroll with a finger; the scrollbar thumb is just visual noise. */
  * {
    scrollbar-width: none;
  }

  *::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .calendar-panel .panel-actions .a1-icon-button,
  .calendar-panel .panel-actions .calendar-view-menu > summary {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }
}

/* ☰ view picker next to the + button: a dropdown carrying the same
   data-calendar-view buttons as the segmented row, so the existing binding
   and aria-selected sync wire it for free. */
.calendar-view-menu {
  position: relative;
}

.calendar-view-menu > summary {
  list-style: none;
}

.calendar-view-menu > summary::-webkit-details-marker {
  display: none;
}

.calendar-view-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  display: grid;
  gap: 2px;
  min-width: 136px;
  padding: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--a1-sw-surface, #101722);
  box-shadow: var(--shadow, 0 12px 30px rgba(0, 0, 0, 0.35));
}

.calendar-view-menu-list button {
  min-height: 38px;
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.calendar-view-menu-list button:hover,
.calendar-view-menu-list button:focus-visible {
  background: rgba(127, 127, 127, 0.08);
  outline: none;
}

.calendar-view-menu-list button[aria-selected="true"],
.calendar-view-menu-list button[aria-checked="true"] {
  color: var(--cyan);
  background: rgba(127, 127, 127, 0.06);
  font-weight: 750;
}

/* .data-panel clips overflow for its rounded corners; let the open menu
   escape without giving up the clip the rest of the time. */
.calendar-panel:has(.calendar-view-menu[open]) {
  overflow: visible;
}

/* On phones the ☰ menu replaces the segmented row, which ate a full line. */
@media (max-width: 640px) {
  .calendar-panel .a1-segmented[aria-label="Calendar view"] {
    display: none;
  }
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.calendar-heading {
  min-width: 0;
}

.calendar-heading h3 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.calendar-nav,
.calendar-view-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.calendar-nav {
  display: grid;
  grid-template-columns: 38px minmax(142px, auto) 38px;
}

.calendar-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--a1-sw-surface, #101722);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.calendar-nav-range {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  min-width: 142px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--a1-sw-surface, #0f1520);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.calendar-toolbar .ghost-button,
.calendar-toolbar .primary-button {
  min-height: 36px;
  min-width: 88px;
  padding: 0 10px;
}

.calendar-view-tabs {
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--a1-sw-surface, #0f1520);
}

.calendar-view-tabs button {
  min-height: 30px;
  min-width: 58px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 800;
}

.calendar-view-tabs button.active {
  color: var(--text);
  background: var(--panel-2);
}

.calendar-body {
  display: grid;
  gap: 12px;
}

.calendar-status {
  min-height: 18px;
}

.calendar-compose {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.76));
}

.calendar-compose-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--a1-sw-scrim, rgba(2, 6, 12, 0.64));
  backdrop-filter: blur(8px);
}

.calendar-compose-modal-backdrop.hidden {
  display: none;
}

.calendar-compose-modal {
  position: relative;
  width: min(720px, 100%);
  max-height: min(720px, calc(var(--app-live-viewport-height, 100vh) - 40px));
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

/* Let datetime/select fields shrink to their grid column instead of forcing
   horizontal overflow (which made the whole modal feel draggable). */
.calendar-compose-grid input,
.calendar-compose-grid select,
.calendar-compose-grid textarea {
  min-width: 0;
  max-width: 100%;
}

.calendar-compose-heading,
.calendar-compose-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.calendar-compose-modal .calendar-compose-heading {
  padding-right: 42px;
}

.calendar-compose-heading h4 {
  margin: 0;
  font-size: 15px;
}

.calendar-compose-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--muted);
  background: var(--a1-sw-surface, rgba(15, 21, 32, 0.82));
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.calendar-compose-close:hover,
.calendar-compose-close:focus-visible {
  color: var(--text);
  border-color: rgba(53, 212, 255, 0.46);
  outline: none;
}

.calendar-add-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 270;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--a1-sw-scrim, rgba(2, 6, 12, .68));
  backdrop-filter: blur(8px);
}

.calendar-add-menu-backdrop.hidden {
  display: none;
}

.calendar-add-menu {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(var(--app-live-viewport-height, 100dvh) - 40px);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  color: var(--text);
  background: var(--a1-sw-surface, #101823);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48);
  outline: none;
}

.calendar-add-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.calendar-add-menu-header > div {
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.calendar-add-menu-close {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--muted);
  background: var(--a1-sw-surface, rgba(15, 21, 32, .82));
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.calendar-add-menu-close:hover,
.calendar-add-menu-close:focus-visible {
  color: var(--text);
  border-color: rgba(53, 212, 255, .46);
  outline: none;
}

.calendar-add-menu-header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.calendar-add-menu-header h4 {
  margin: 0;
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-add-menu-choices,
.calendar-add-course-panel {
  display: grid;
  gap: 9px;
  max-height: min(540px, calc(var(--app-live-viewport-height, 100dvh) - 100px));
  padding: 14px;
  overflow-y: auto;
}

.calendar-add-menu-choices.hidden,
.calendar-add-course-panel.hidden {
  display: none;
}

.calendar-add-menu-choices > button,
.calendar-add-course-list > button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  color: var(--text);
  background: var(--a1-sw-surface-2, var(--panel));
  text-align: left;
  cursor: pointer;
}

.calendar-add-menu-choices > button:hover,
.calendar-add-menu-choices > button:focus-visible,
.calendar-add-course-list > button:hover,
.calendar-add-course-list > button:focus-visible {
  border-color: color-mix(in srgb, var(--cyan) 52%, var(--line));
  outline: none;
}

.calendar-add-menu-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 12%, var(--panel));
}

.calendar-add-menu-choices > button > span:nth-child(2),
.calendar-add-course-list > button > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.calendar-add-menu-choices strong,
.calendar-add-course-list strong,
.calendar-add-menu-choices small,
.calendar-add-course-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-add-menu-choices strong,
.calendar-add-course-list strong {
  font-size: 14px;
}

.calendar-add-menu-choices small,
.calendar-add-course-list small,
.calendar-add-course-count {
  color: var(--muted);
  font-size: 11px;
}

.calendar-add-menu-chevron {
  color: var(--muted);
}

.calendar-add-course-back {
  justify-self: start;
  padding: 4px 0;
  border: 0;
  color: var(--cyan);
  background: transparent;
  cursor: pointer;
  font-weight: 800;
}

.calendar-add-course-panel > p {
  margin: 0;
}

.calendar-add-course-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.calendar-add-course-list > button {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.calendar-add-course-count {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* In-place meeting picker: choosing a course previews and confirms its
   schedule right inside the Add menu instead of navigating to Learn. */
.calendar-course-schedule-detail {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.calendar-course-schedule-name {
  display: grid;
  gap: 2px;
  margin: 0;
}

.calendar-course-schedule-name small {
  color: var(--muted);
  font-size: 11px;
}

.calendar-course-schedule-items {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.calendar-course-schedule-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  cursor: pointer;
}

.calendar-course-schedule-item.is-disabled {
  opacity: .62;
  cursor: default;
}

.calendar-course-schedule-item input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
}

.calendar-course-schedule-item-text {
  display: grid;
  flex: 1 1 auto;
  gap: 1px;
  min-width: 0;
}

.calendar-course-schedule-item-text strong,
.calendar-course-schedule-item-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-course-schedule-item-text small {
  color: var(--muted);
  font-size: 11px;
}

.calendar-course-schedule-item > em {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.calendar-course-schedule-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.calendar-course-schedule-colors {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.calendar-course-schedule-colors legend {
  padding: 0 0 4px;
  color: var(--muted);
  font-size: 11px;
}

.calendar-course-schedule-colors > div {
  display: flex;
  gap: 7px;
}

.calendar-course-schedule-color {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--calendar-course-color);
  cursor: pointer;
}

.calendar-course-schedule-color:has(input[value="auto"]) {
  background: linear-gradient(90deg, #72a6ff 50%, #f5b84b 50%);
}

.calendar-course-schedule-color input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.calendar-course-schedule-color:has(input:checked) {
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--calendar-course-color);
}

.calendar-course-schedule-reminder {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.calendar-course-schedule-add {
  justify-self: start;
}

.calendar-course-schedule-learn {
  justify-self: start;
  padding: 2px 0;
  border: 0;
  color: var(--cyan);
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}

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

/* Grid items must be allowed to shrink below their content, or the time strip
   forces the whole grid wide. The date + draggable time strip need the full
   row, so the datetime fields span every column. */
.calendar-compose-grid > label,
.calendar-compose-grid > .calendar-location-field {
  min-width: 0;
}

.calendar-location-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* No column gap: with the Navigate button hidden its track collapses but a
     gap would remain, leaving the input 8px short of its siblings. */
  gap: 0;
  min-width: 0;
}

.calendar-location-input-row > * + * {
  margin-left: 8px;
}

.calendar-navigation-toggle {
  min-width: 88px;
  min-height: 46px;
  padding-inline: 12px;
}

.calendar-navigation-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(53, 212, 255, 0.3);
  border-radius: 8px;
  background: rgba(53, 212, 255, 0.07);
}

.calendar-navigation-panel.hidden {
  display: none;
}

.calendar-navigation-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.calendar-navigation-copy span,
.calendar-navigation-copy small {
  color: var(--muted);
  font-size: 11px;
}

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

.calendar-navigation-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.calendar-navigation-map {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  padding: 0 12px;
  text-decoration: none;
}

.calendar-campus-navigation-backdrop {
  position: fixed;
  inset: 0;
  z-index: 310;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--a1-sw-scrim, rgba(2, 6, 12, 0.78));
  backdrop-filter: blur(12px);
}

.calendar-campus-navigation-backdrop.hidden {
  display: none;
}

.calendar-campus-navigation {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1120px, 100%);
  height: min(760px, calc(var(--app-live-viewport-height, 100dvh) - 40px));
  min-height: 480px;
  overflow: hidden;
  border: 1px solid rgba(53, 212, 255, 0.32);
  border-radius: 16px;
  background: var(--a1-sw-surface, #0d1520);
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.58);
  outline: none;
}

.calendar-campus-navigation-header {
  position: relative;
  min-height: 88px;
  padding: 18px 64px 16px 20px;
  border-bottom: 1px solid var(--line-soft);
}

.calendar-campus-navigation-header h4 {
  margin: 3px 0 2px;
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.15;
}

.calendar-campus-navigation-header p {
  margin: 0;
}

.calendar-campus-navigation-eyebrow {
  color: var(--cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.calendar-campus-navigation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.8fr);
  height: auto;
  min-height: 0;
}

.calendar-campus-map-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--line-soft);
  background: var(--a1-sw-surface, #09111b);
}

.calendar-campus-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.calendar-campus-map.dragging {
  cursor: grabbing;
}

.calendar-campus-map-tiles,
.calendar-campus-map-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.calendar-campus-map-tiles img {
  position: absolute;
  width: 256px;
  height: 256px;
  max-width: none;
  pointer-events: none;
}

.calendar-campus-map-route {
  pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(53, 212, 255, 0.85));
}

.calendar-campus-map-route polyline {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.calendar-campus-map-marker {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.calendar-campus-map-marker.hidden {
  display: none;
}

.calendar-campus-map-marker::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #188cff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.62);
}

.calendar-campus-map-marker.destination::before {
  width: 20px;
  height: 20px;
  border-radius: 50% 50% 50% 4px;
  background: var(--cyan);
  transform: rotate(-45deg);
}

.calendar-campus-map-marker span {
  position: absolute;
  top: 24px;
  left: 50%;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: var(--a1-sw-text, #fff);
  background: var(--a1-sw-surface, rgba(7, 12, 20, 0.9));
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  transform: translateX(-50%);
}

.calendar-campus-map-controls {
  position: absolute;
  z-index: 5;
  top: 12px;
  right: 12px;
  display: grid;
  gap: 6px;
}

.calendar-campus-map-controls button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  color: var(--text);
  background: var(--a1-sw-surface, rgba(8, 14, 23, 0.9));
  font-size: 19px;
  font-weight: 800;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

.calendar-campus-map-controls button:hover,
.calendar-campus-map-controls button:focus-visible {
  border-color: var(--cyan);
  outline: none;
}

.calendar-campus-map-attribution {
  position: absolute;
  z-index: 4;
  right: 8px;
  bottom: 7px;
  padding: 2px 5px;
  border-radius: 4px;
  color: var(--a1-sw-text, rgba(255, 255, 255, 0.72));
  background: var(--a1-sw-surface-2, rgba(5, 9, 15, 0.78));
  font-size: 9px;
  pointer-events: none;
}

.calendar-campus-navigation-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
}

.calendar-campus-navigation-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.calendar-campus-navigation-summary.hidden {
  display: none;
}

.calendar-campus-navigation-summary strong {
  font-size: 30px;
  line-height: 1;
}

.calendar-campus-navigation-summary span {
  color: var(--muted);
  font-weight: 800;
}

.calendar-campus-navigation-status {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.calendar-campus-navigation-details > .primary-button {
  width: 100%;
  min-height: 44px;
}

.calendar-campus-navigation-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.calendar-campus-navigation-steps li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 1.4;
}

.calendar-campus-navigation-steps small {
  color: var(--muted);
  white-space: nowrap;
}

.calendar-campus-navigation-note {
  display: grid;
  gap: 4px;
  margin-top: auto;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.calendar-campus-navigation-note strong:empty {
  display: none;
}

.calendar-campus-navigation-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.calendar-campus-navigation-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 6px 8px;
  text-align: center;
  text-decoration: none;
}

.calendar-campus-navigation-links a:first-child:not(.hidden) {
  grid-column: 1 / -1;
}

@media (max-width: 560px) {
  .calendar-navigation-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-navigation-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .calendar-navigation-map {
    min-width: 0;
    width: 100%;
  }

  #calendar-navigation-app {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .calendar-campus-navigation-backdrop {
    padding: 0;
  }

  .calendar-campus-navigation {
    width: 100%;
    height: var(--app-live-viewport-height, 100dvh);
    min-height: 0;
    border: 0;
    border-radius: 0;
  }

  .calendar-campus-navigation-header {
    min-height: 80px;
    padding: calc(12px + var(--a1-safe-top)) 58px 12px 14px;
  }

  .calendar-campus-navigation-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(230px, 43dvh) minmax(0, 1fr);
    height: auto;
  }

  .calendar-campus-map-wrap {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .calendar-campus-navigation-details {
    padding: 14px 14px calc(14px + var(--a1-safe-bottom));
  }

  .calendar-campus-navigation-summary strong {
    font-size: 25px;
  }
}

#calendar-start-field,
#calendar-end-field {
  grid-column: 1 / -1;
}

.calendar-color-field,
.calendar-repeat-field {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-3, rgba(8, 13, 22, 0.44));
}

.calendar-color-field legend,
.calendar-repeat-field legend {
  padding: 0 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.calendar-color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* The fieldset legend renders in the border area, so without this the
     COLOR label sits fractions of a pixel from the first swatch's ring. */
  padding-top: 4px;
}

.calendar-color-swatch {
  --calendar-accent: var(--cyan);
  --calendar-bg: rgba(53, 212, 255, 0.14);
  --calendar-line: rgba(53, 212, 255, 0.38);
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--calendar-line);
  border-radius: 7px;
  background: var(--calendar-accent);
  cursor: pointer;
}

.calendar-color-swatch:has(input:checked) {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.calendar-color-swatch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

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

.calendar-repeat-wide {
  grid-column: span 2;
}

.calendar-compose-notes {
  grid-column: 1 / -1;
}

.calendar-compose textarea {
  width: 100%;
  min-height: 74px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--text);
  background: var(--a1-sw-surface, #0f1520);
  padding: 10px 12px;
  font: inherit;
  resize: vertical;
}

.calendar-compose-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.calendar-compose-actions .form-message {
  min-width: 0;
  margin: 0;
}

.calendar-compose-delete {
  color: #ffb8c8;
  border-color: rgba(255, 122, 156, 0.34);
}

.calendar-view {
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.calendar-time-grid {
  display: grid;
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.54));
}

.calendar-week-view {
  grid-template-columns: 74px repeat(7, minmax(128px, 1fr));
}

.calendar-week-agenda {
  display: none;
}

.calendar-week-schedule-wrap {
  /* Mirror the registration schedule: render the 9am-6pm window (growing to
     fit earlier/later items) and scroll horizontally only. The page itself
     scrolls vertically, so there is no janky nested vertical scroll on mobile. */
  overflow-x: auto;
  padding: 12px;
  border-top: 1px solid var(--line-soft);
  -webkit-overflow-scrolling: touch;
}

.calendar-week-schedule {
  display: grid;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-3, rgba(8, 13, 22, 0.42));
}

.calendar-seven-day-schedule {
  grid-template-columns: 54px repeat(7, minmax(112px, 1fr));
  min-width: 890px;
}

.calendar-five-day-schedule {
  grid-template-columns: 54px repeat(5, minmax(118px, 1fr));
  min-width: 660px;
}

.calendar-day-schedule {
  grid-template-columns: 54px minmax(260px, 1fr);
  min-width: 360px;
}

.calendar-week-grid-corner,
.calendar-week-day-heading {
  position: sticky;
  top: 0;
  z-index: 8;
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  background: var(--a1-sw-surface, rgba(15, 21, 32, 0.98));
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.calendar-week-grid-corner {
  left: 0;
  z-index: 9;
  border-right: 1px solid var(--line);
}

.calendar-week-day-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
  cursor: pointer;
}

.calendar-week-day-heading.today {
  color: var(--cyan);
  box-shadow: inset 0 -2px 0 var(--cyan);
}

.calendar-week-day-heading strong,
.calendar-week-day-heading span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-week-day-heading span {
  color: var(--muted);
  font-size: 11px;
}

.calendar-week-time-label {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 0;
  padding: 4px 6px 0 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--a1-sw-line, rgba(255, 255, 255, 0.035));
  color: var(--muted);
  background: var(--a1-sw-surface-2, rgba(15, 21, 32, 0.72));
  font-size: 10px;
  font-weight: 750;
  text-align: right;
}

.calendar-week-cell {
  min-width: 0;
  border: 0;
  border-left: 1px solid var(--a1-sw-line, rgba(255, 255, 255, 0.035));
  border-bottom: 1px solid var(--a1-sw-line, rgba(255, 255, 255, 0.035));
  background: var(--a1-sw-surface-3, rgba(20, 27, 39, 0.36));
  cursor: pointer;
}

@media (hover: hover) {
  .calendar-week-cell:hover{
    background: rgba(53, 212, 255, 0.07);
  }
}

.calendar-now-line {
  position: relative;
  z-index: 18;
  min-width: 0;
  pointer-events: none;
}

.calendar-now-line::before {
  content: "";
  position: absolute;
  top: var(--calendar-now-offset);
  right: 3px;
  left: 3px;
  height: 2px;
  border-radius: 999px;
  background: #ff4d5f;
  box-shadow: 0 0 10px rgba(255, 77, 95, 0.45);
  transform: translateY(-50%);
}

.calendar-reminder-line {
  position: relative;
  z-index: 17;
  min-width: 0;
  min-height: 28px;
  border: 0;
  color: #f8d66d;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.calendar-reminder-line::before {
  content: "";
  position: absolute;
  top: var(--calendar-reminder-offset);
  right: 4px;
  left: 4px;
  height: 3px;
  border-radius: 999px;
  background: #f8d66d;
  box-shadow: 0 0 12px rgba(248, 214, 109, 0.42);
  transform: translateY(-50%);
}

.calendar-reminder-line span {
  position: absolute;
  top: calc(var(--calendar-reminder-offset) + 4px);
  right: 7px;
  left: 7px;
  min-width: 0;
  overflow: hidden;
  color: var(--a1-sw-text, #f8d66d);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 1;
  width: max-content;
  max-width: calc(100% - 14px);
  padding: 3px 6px;
  border: 1px solid rgba(248, 214, 109, 0.4);
  border-radius: 999px;
  background: var(--a1-sw-surface, rgba(54, 45, 15, 0.94));
  font-size: 11px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.calendar-reminder-line:hover,
.calendar-reminder-line:focus-visible {
  outline: none;
}

.calendar-reminder-line:hover::before,
.calendar-reminder-line:focus-visible::before {
  height: 4px;
  box-shadow:
    0 0 0 2px rgba(248, 214, 109, 0.16),
    0 0 18px rgba(248, 214, 109, 0.58);
}

.calendar-reminder-line:hover span,
.calendar-reminder-line:focus-visible span {
  opacity: 1;
  transform: translateY(0);
}

.calendar-week-block {
  --calendar-accent: var(--cyan);
  --calendar-bg: rgba(53, 212, 255, 0.14);
  --calendar-line: rgba(53, 212, 255, 0.38);
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-self: start;
  align-self: stretch;
  gap: 1px;
  width: calc(100% / var(--lanes) - 4px);
  min-width: 0;
  margin: 2px 2px 2px calc((100% / var(--lanes)) * var(--lane) + 2px);
  padding: 7px 8px;
  overflow: hidden;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--calendar-line);
  border-radius: 7px;
  background:
    linear-gradient(135deg, var(--calendar-bg), rgba(12, 18, 28, 0.96) 78%),
    rgba(15, 21, 32, 0.94);
  box-shadow:
    inset 3px 0 0 var(--calendar-accent),
    0 8px 18px rgba(0, 0, 0, 0.2);
}

.calendar-week-block:hover,
.calendar-week-block:focus-visible {
  border-color: var(--calendar-accent);
  outline: none;
  box-shadow:
    inset 3px 0 0 var(--calendar-accent),
    0 10px 22px rgba(0, 0, 0, 0.26),
    0 0 0 2px var(--calendar-bg);
}

.calendar-week-block strong,
.calendar-week-block span,
.calendar-week-block em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-week-block strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.15;
}

.calendar-week-block span,
.calendar-week-block em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.2;
}

.calendar-week-block.is-compact {
  gap: 0;
  padding: 4px 7px;
}

.calendar-week-block.is-compact strong {
  font-size: 11px;
  line-height: 1.08;
}

.calendar-week-block.is-compact span,
.calendar-week-block.is-compact em {
  font-size: 10px;
  line-height: 1.08;
}

.calendar-week-block.is-micro {
  justify-content: center;
  gap: 0;
  padding: 2px 6px;
}

.calendar-week-block.is-micro strong {
  font-size: 10px;
  line-height: 1.05;
}

.calendar-week-block.is-micro span,
.calendar-week-block.is-micro em {
  display: none;
}

.calendar-day-view {
  grid-template-columns: 74px minmax(260px, 1fr);
}

.calendar-time-label,
.calendar-time-day-heading,
.calendar-time-cell {
  min-width: 0;
  border: 0;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
}

.calendar-time-label {
  display: flex;
  justify-content: flex-end;
  min-height: 54px;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 11px;
}

.calendar-time-day-heading {
  display: grid;
  gap: 2px;
  align-content: center;
  min-height: 54px;
  padding: 8px;
  color: var(--text);
  text-align: center;
  cursor: pointer;
}

.calendar-time-day-heading strong,
.calendar-time-day-heading span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-time-day-heading span {
  color: var(--muted);
  font-size: 12px;
}

.calendar-time-cell {
  min-height: 58px;
  padding: 5px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) {
  .calendar-time-cell:hover,
  .calendar-mini-month button:hover{
    background: rgba(53, 212, 255, 0.07);
  }
}

.calendar-slot-items {
  display: grid;
  gap: 4px;
}

.calendar-pill {
  --calendar-accent: var(--cyan);
  --calendar-bg: rgba(53, 212, 255, 0.14);
  --calendar-line: rgba(53, 212, 255, 0.38);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 5px 7px;
  border: 0;
  border-left: 3px solid var(--calendar-accent);
  border-radius: 6px;
  color: var(--text);
  background: var(--calendar-bg);
  font: inherit;
  font-size: 12px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.calendar-pill.task {
  border-left-color: var(--calendar-accent);
  background: var(--calendar-bg);
}

.calendar-pill.reminder {
  border-left-color: var(--calendar-accent);
  background: var(--calendar-bg);
}

.calendar-pill:hover,
.calendar-pill:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--calendar-line);
}

.calendar-pill strong,
.calendar-pill span,
.calendar-pill em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-pill strong {
  color: var(--calendar-accent);
  font-size: 12px;
}

.calendar-pill.task strong {
  color: var(--calendar-accent);
}

.calendar-pill.reminder strong {
  color: var(--calendar-accent);
}

.calendar-pill em {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.calendar-week-day-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.62));
}

.calendar-week-day-card.today {
  border-color: rgba(53, 212, 255, 0.54);
  box-shadow: inset 3px 0 0 var(--cyan);
}

.calendar-week-day-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.calendar-week-day-header button {
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--text);
  background: var(--a1-sw-surface-2, rgba(15, 21, 32, 0.74));
  font-weight: 850;
}

.calendar-week-day-header button:first-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 0 10px;
  text-align: left;
}

.calendar-week-day-header button:last-child {
  padding: 0 10px;
  color: var(--cyan);
}

.calendar-week-day-header strong,
.calendar-week-day-header span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-week-day-header span {
  color: var(--muted);
  font-size: 12px;
}

.calendar-week-day-items {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.calendar-week-day-items small,
.calendar-week-empty {
  color: var(--muted);
  font-size: 12px;
}

.calendar-day-number,
.calendar-day-add {
  width: max-content;
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.calendar-day-number.today,
.calendar-mini-month button.today {
  color: #071019;
  background: var(--cyan);
}

.calendar-day-add {
  padding: 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.calendar-mini-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.calendar-mini-month span,
.calendar-mini-month button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  aspect-ratio: 1;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
}

.calendar-mini-month button {
  color: var(--text);
  cursor: pointer;
}

.calendar-mini-month button.outside {
  opacity: 0.38;
}

.calendar-mini-month button.has-items {
  box-shadow: inset 0 -2px 0 var(--cyan);
}

.calendar-floating-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.66));
}

.calendar-floating-panel h3 {
  margin: 0;
  font-size: 14px;
}

.calendar-floating-list {
  display: grid;
  gap: 10px;
}

.calendar-unscheduled-row {
  width: 100%;
  border-width: 0 0 1px;
  border-style: solid;
  border-color: var(--line-soft);
  color: var(--text);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.calendar-unscheduled-row:hover,
.calendar-unscheduled-row:focus-visible {
  color: var(--text);
  background: rgba(53, 212, 255, 0.06);
  outline: none;
}

.registration-tabs {
  display: inline-grid;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  gap: 6px;
  margin-bottom: 16px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--a1-sw-surface, #0f1520);
}

.registration-offline-download:hover,
.registration-offline-download:focus-visible {
  border-color: var(--cyan);
  background: var(--a1-sw-surface, #0f1520);
  background: color-mix(in srgb, var(--cyan) 10%, var(--a1-sw-surface, #0f1520));
  outline: none;
}

.registration-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-weight: 750;
}

.registration-tabs button.active {
  color: var(--text);
  /* --panel-2 resolves to #FAFAF9 on the light skin — invisible on the white
     tab card. The soft accent keeps the active tab findable. */
  background: var(--a1-sw-accent-soft, var(--panel-2));
}

.schedule-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 16px;
  align-items: start;
}

.schedule-panel {
  min-width: 0;
  overflow: hidden;
}

.schedule-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(116px, 160px);
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 8px 12px;
}

html[data-a1-skin] .panel-header.schedule-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(116px, 160px);
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}

.schedule-header > div {
  min-width: 0;
}

.schedule-header .eyebrow {
  margin: 0;
  font-size: 12px;
}

.schedule-term-control-compact span {
  display: none;
}

.schedule-term-control span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.schedule-board-wrap {
  overflow-x: auto;
  padding: 12px;
  border-top: 1px solid var(--line-soft);
  -webkit-overflow-scrolling: touch;
}

.schedule-grid {
  display: grid;
  grid-template-columns: 54px repeat(5, minmax(118px, 1fr));
  min-width: 660px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-3, rgba(8, 13, 22, 0.42));
}

.schedule-mobile-controls,
.schedule-mobile-agenda {
  display: none;
}

.schedule-rec-trigger span,
.schedule-rec-trigger strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-rec-trigger span {
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.schedule-rec-trigger strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.schedule-mobile-control-body {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-3, rgba(8, 13, 22, 0.45));
}

.schedule-mobile-control-body .schedule-section-choices {
  margin: 0;
  padding: 0;
  border-top: 0;
}

.schedule-mobile-control-body .schedule-section-choice select,
.schedule-mobile-control-body .schedule-section-picker summary {
  min-height: 38px;
}

.schedule-rec-modal-header h3,
.schedule-rec-modal-header p {
  margin: 0;
}

.schedule-rec-modal-header h3 {
  margin-top: 2px;
  font-size: 16px;
}

.schedule-rec-modal-body .schedule-section-choices {
  margin: 0;
  padding: 0;
  border-top: 0;
}

.schedule-mobile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.schedule-mobile-stats span {
  padding: 5px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  background: var(--a1-sw-surface-2, rgba(20, 27, 39, 0.58));
  font-size: 11px;
  font-weight: 750;
}

.schedule-grid-corner,
.schedule-day-header {
  position: sticky;
  top: 0;
  z-index: 8;
  min-width: 0;
  padding: 8px 9px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  background: var(--a1-sw-surface, rgba(15, 21, 32, 0.98));
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.schedule-grid-corner {
  left: 0;
  z-index: 9;
  border-right: 1px solid var(--line);
}

.schedule-time-label {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 0;
  padding: 4px 6px 0 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--a1-sw-line, rgba(255, 255, 255, 0.035));
  color: var(--muted);
  background: var(--a1-sw-surface-2, rgba(15, 21, 32, 0.72));
  font-size: 10px;
  font-weight: 750;
  text-align: right;
}

.schedule-cell {
  min-width: 0;
  border-left: 1px solid var(--a1-sw-line, rgba(255, 255, 255, 0.035));
  border-bottom: 1px solid var(--a1-sw-line, rgba(255, 255, 255, 0.035));
  background: var(--a1-sw-surface-3, rgba(20, 27, 39, 0.36));
}

.schedule-block {
  --course-accent: var(--cyan);
  --course-bg: rgba(53, 212, 255, 0.14);
  --course-line: rgba(53, 212, 255, 0.38);
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-self: start;
  align-self: stretch;
  gap: 1px;
  width: calc(100% / var(--lanes) - 4px);
  min-width: 0;
  margin: 2px 2px 2px calc((100% / var(--lanes)) * var(--lane) + 2px);
  padding: 7px 8px;
  overflow: hidden;
  border: 1px solid var(--course-line);
  border-radius: 7px;
  background:
    linear-gradient(135deg, var(--course-bg), var(--a1-sw-surface, rgba(12, 18, 28, 0.96)) 78%),
    var(--a1-sw-surface, rgba(15, 21, 32, 0.94));
  box-shadow:
    inset 3px 0 0 var(--course-accent),
    0 8px 18px rgba(0, 0, 0, 0.2);
}

.schedule-block-clickable {
  cursor: pointer;
}

.schedule-block-clickable:hover,
.schedule-block-clickable:focus-visible {
  border-color: color-mix(in srgb, var(--course-line) 72%, #ffffff);
  outline: none;
  box-shadow:
    inset 3px 0 0 var(--course-accent),
    0 12px 24px rgba(0, 0, 0, 0.28),
    0 0 0 2px color-mix(in srgb, var(--course-accent) 36%, transparent);
}

.schedule-block strong,
.schedule-block span,
.schedule-block em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-block strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.15;
}

.schedule-block span,
.schedule-block em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.2;
}

.schedule-agenda-day {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.62));
}

.schedule-agenda-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.schedule-agenda-day-header strong,
.schedule-agenda-day-header span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-agenda-day-header strong {
  color: var(--text);
  font-size: 13px;
}

.schedule-agenda-day-header span {
  color: var(--muted);
  font-size: 11px;
}

.schedule-agenda-list {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.schedule-agenda-block {
  --course-accent: var(--cyan);
  --course-bg: rgba(53, 212, 255, 0.14);
  --course-line: rgba(53, 212, 255, 0.38);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--course-line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--course-bg), var(--a1-sw-surface, rgba(15, 21, 32, 0.9)) 74%),
    var(--a1-sw-surface-2, rgba(15, 21, 32, 0.78));
  box-shadow: inset 3px 0 0 var(--course-accent);
}

.schedule-agenda-block strong,
.schedule-agenda-block small,
.schedule-agenda-block em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-agenda-block strong {
  font-size: 12px;
}

.schedule-agenda-block small,
.schedule-agenda-block em,
.schedule-agenda-empty {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.schedule-empty {
  display: grid;
  place-content: center;
  gap: 5px;
  min-height: 260px;
  padding: 24px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  text-align: center;
}

.schedule-empty strong,
.schedule-empty span {
  display: block;
}

.schedule-empty strong {
  color: var(--text);
}

.schedule-summary-panel {
  min-width: 0;
  overflow: hidden;
}

.schedule-section-choices h4 {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.schedule-section-choice > span,
.schedule-section-choice strong,
.schedule-section-choice small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-section-choice strong,
.schedule-section-choice small {
  white-space: nowrap;
}

.schedule-section-choice strong {
  color: var(--text);
  font-size: 12px;
}

.schedule-section-choice small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.schedule-section-picker summary span,
.schedule-section-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-section-picker summary em,
.schedule-section-option em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: max-content;
  padding: 2px 6px;
  border: 1px solid rgba(239, 68, 68, 0.55);
  border-radius: 999px;
  color: var(--red);
  background: rgba(239, 68, 68, 0.16);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.schedule-section-option:hover,
.schedule-section-option:focus-visible,
.schedule-section-option.selected {
  border-color: rgba(53, 212, 255, 0.55);
  background: rgba(53, 212, 255, 0.1);
}

.schedule-section-option.conflict {
  border-color: rgba(239, 68, 68, 0.34);
  color: var(--text);
  background: rgba(239, 68, 68, 0.08);
}

.schedule-course-row strong,
.schedule-course-row small,
.schedule-course-row em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-course-row strong {
  font-size: 12px;
}

.schedule-course-row small,
.schedule-course-row em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.schedule-unscheduled {
  display: grid;
  gap: 7px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.schedule-unscheduled h4 {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.schedule-unscheduled-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
}

.schedule-unscheduled-row strong,
.schedule-unscheduled-row span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-unscheduled-row strong {
  color: var(--text);
}

@media (max-width: 980px) {
  .schedule-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .schedule-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(104px, 126px);
    gap: 8px;
    align-items: center;
    padding: 7px 10px;
  }

  html[data-a1-skin] .panel-header.schedule-header {
    grid-template-columns: minmax(0, 1fr) minmax(104px, 126px);
    gap: 8px;
    padding: 7px 10px;
  }

  .schedule-header > div {
    min-width: 0;
  }

  .schedule-header h3,
  .schedule-header .row-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .schedule-header > .schedule-term-control select {
    min-height: 34px;
    font-size: 11px;
  }

  

  .schedule-board-wrap {
    overflow-x: hidden;
    padding: 8px;
  }

  .schedule-grid {
    grid-template-columns: 34px repeat(5, minmax(0, 1fr));
    min-width: 0;
    width: 100%;
  }

  .schedule-grid-corner,
  .schedule-day-header {
    padding: 7px 2px;
    font-size: 10px;
  }

  .schedule-time-label {
    padding: 4px 3px 0 0;
    font-size: 8px;
  }

  .schedule-block {
    width: calc(100% / var(--lanes) - 2px);
    margin: 1px 1px 1px calc((100% / var(--lanes)) * var(--lane) + 1px);
    padding: 3px 2px 3px 4px;
    border-radius: 5px;
    box-shadow: inset 2px 0 0 var(--course-accent);
  }

  .schedule-block strong {
    font-size: 9px;
  }

  .schedule-block span,
  .schedule-block em {
    font-size: 8px;
  }

  

  .schedule-unscheduled-row {
    grid-template-columns: 62px minmax(0, 1fr);
  }
}

.roadmap-control-panel {
  position: sticky;
  top: -1px;
  z-index: 90;
  margin-bottom: 12px;
  overflow: visible;
  background: var(--a1-sw-surface, #101722);
  box-shadow: 0 -18px 0 var(--a1-sw-surface, #101722);
}

.roadmap-program-summary-toggle span {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 140ms ease;
}

.roadmap-program-progress-row strong,
.roadmap-program-progress-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-program-progress-row strong {
  color: var(--text);
  font-size: 11px;
}

.roadmap-program-progress-row em {
  font-style: normal;
}

.roadmap-program-progress-row button {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  color: var(--muted);
  background: var(--a1-sw-surface-3, rgba(8, 13, 22, 0.42));
  font-size: 12px;
  line-height: 1;
}

.roadmap-program-progress-row button:hover,
.roadmap-program-progress-row button:focus-visible {
  color: var(--red);
  border-color: rgba(240, 109, 109, 0.5);
  outline: none;
}

.roadmap-program-progress-row.met {
  border-color: rgba(73, 209, 125, 0.4);
}

.roadmap-program-progress-row.error {
  border-color: rgba(240, 109, 109, 0.42);
}

.roadmap-program-progress-row.summary {
  border-color: rgba(53, 212, 255, 0.38);
}

.roadmap-add-program-header strong,
.roadmap-add-program-header span {
  display: block;
  min-width: 0;
}

.roadmap-add-program-header strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.roadmap-add-program-header span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.roadmap-program-option:hover,
.roadmap-program-option:focus-visible {
  border-color: rgba(53, 212, 255, 0.58);
  outline: none;
  background:
    linear-gradient(135deg, rgba(53, 212, 255, 0.12), rgba(245, 184, 75, 0.06)),
    var(--a1-sw-surface, rgba(15, 21, 32, 0.95));
}

.roadmap-program-option.met {
  border-color: rgba(74, 222, 128, 0.55);
}

.roadmap-program-option-main strong,
.roadmap-program-option-main small,
.roadmap-program-option-progress > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-program-option-main strong {
  font-size: 12px;
  font-weight: 850;
}

.roadmap-program-option-main small {
  color: var(--muted);
  font-size: 11px;
}

.roadmap-program-option-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--amber));
}

.roadmap-header,
.roadmap-term-header,
.roadmap-course-actions,
.roadmap-progress-heading,
.roadmap-requirement-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.roadmap-header {
  gap: 14px;
}

.roadmap-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
  justify-items: start;
  padding: 0 10px 8px;
}

body.roadmap-import-open {
  overflow: hidden;
}

.roadmap-import-header h3,
.roadmap-import-header p {
  margin: 0;
}

.roadmap-import-header p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.roadmap-import-header > button {
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
}

.roadmap-import-file-picker span,
.roadmap-import-status {
  font-size: 12px;
}

.roadmap-import-preview p,
.roadmap-import-preview ul {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.roadmap-import-preview ul {
  padding-left: 18px;
  color: var(--amber);
}

body.roadmap-search-open {
  overflow: hidden;
}

.roadmap-search-modal-header h3 {
  margin: 2px 0 0;
  font-size: 17px;
}

.roadmap-search-modal-close:hover,
.roadmap-search-modal-close:focus-visible {
  border-color: var(--cyan);
  outline: none;
}

.roadmap-search-section + .roadmap-search-section {
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.roadmap-search-section-header h4 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
}

.roadmap-checkbox-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--a1-sw-surface, #0f1520);
}

.roadmap-checkbox-control input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--cyan);
}

.roadmap-checkbox-control span {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.roadmap-result-heading {
  padding: 10px 18px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--cyan);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.roadmap-result:hover,
.roadmap-result:focus-visible,
.roadmap-result.adding {
  border-color: var(--course-accent);
}

.roadmap-result-main strong,
.roadmap-result-main span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-result-main span {
  color: var(--muted);
  font-size: 12px;
}

.roadmap-plus-button {
  display: grid;
  place-items: center;
  justify-self: end;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--cyan);
  background: transparent;
  box-shadow: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

.roadmap-add-target {
  grid-area: target;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-3, rgba(8, 13, 22, 0.5));
  cursor: default;
}

.roadmap-add-target select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--a1-sw-surface, rgba(15, 21, 32, 0.94));
  font-size: 12px;
}

.roadmap-target-confirm {
  width: 30px;
  min-width: 30px;
  height: 34px;
  min-height: 34px;
  font-size: 19px;
}

.roadmap-detail-row strong {
  color: var(--a1-sw-chip-fg, var(--course-chip-fg));
  font-size: 11px;
}

.roadmap-detail-row span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.roadmap-common-panel {
  margin-bottom: 16px;
}

.roadmap-common-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 5px;
}

@media (hover: hover) {
  .roadmap-common-requirement:hover{
    border-color: var(--amber);
    background:
      linear-gradient(135deg, rgba(245, 184, 75, 0.2), rgba(53, 212, 255, 0.11)),
      var(--a1-sw-surface-2, rgba(15, 21, 32, 0.86));
  }
}

.roadmap-common-requirement.added {
  border-color: rgba(74, 222, 128, 0.7);
  background:
    linear-gradient(135deg, rgba(74, 222, 128, 0.18), rgba(53, 212, 255, 0.09)),
    var(--a1-sw-surface-2, rgba(15, 21, 32, 0.88));
  box-shadow: inset 0 2px 0 #4ade80;
}

.roadmap-common-requirement strong,
.roadmap-common-requirement small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-common-requirement strong {
  font-size: 12px;
}

.roadmap-common-requirement small {
  color: var(--amber);
  font-size: 10px;
}

.roadmap-common-course-shortcuts {
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
}

.roadmap-common-course-shortcut:not(.added) {
  border-color: var(--course-line);
  background:
    linear-gradient(135deg, var(--course-bg), rgba(53, 212, 255, 0.06)),
    var(--a1-sw-surface-2, rgba(15, 21, 32, 0.76));
  box-shadow: inset 0 2px 0 var(--course-accent);
}

.roadmap-common-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 5px;
  align-items: stretch;
}

.roadmap-common-result-list {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.roadmap-common-course:hover,
.roadmap-common-course.added {
  border-color: var(--course-accent);
  background:
    linear-gradient(135deg, var(--course-bg), var(--a1-sw-surface, rgba(23, 32, 46, 0.94)) 68%),
    var(--a1-sw-surface-2, rgba(15, 21, 32, 0.82));
}

.roadmap-common-main {
  grid-area: main;
  min-width: 0;
}

.roadmap-common-course strong,
.roadmap-common-course small,
.roadmap-common-main strong,
.roadmap-common-main small {
  display: block;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-common-course small {
  color: var(--a1-sw-chip-fg, var(--course-chip-fg));
  font-size: 10px;
}

.roadmap-common-course strong {
  font-size: 12px;
}

.roadmap-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.roadmap-board-panel {
  overflow: visible;
}

.roadmap-year-label strong,
.roadmap-year-label span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-year-label strong {
  color: var(--text);
  font-size: 13px;
}

.roadmap-year-label span {
  color: var(--cyan);
  font-size: 11px;
}

.roadmap-term.selected {
  border-color: rgba(53, 212, 255, 0.75);
  box-shadow: 0 0 0 3px rgba(53, 212, 255, 0.09);
}

.roadmap-term.drop-target {
  border-color: rgba(73, 209, 125, 0.86);
  box-shadow:
    0 0 0 3px rgba(73, 209, 125, 0.12),
    inset 0 0 0 1px rgba(73, 209, 125, 0.18);
}

.roadmap-term-view-toggle:hover,
.roadmap-term-view-toggle:focus-visible {
  color: var(--text);
  border-color: var(--course-accent, var(--cyan));
}

.roadmap-compact-course-pill strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--a1-sw-text, #fff);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-compact-course-pill:hover,
.roadmap-compact-course-pill:focus-within {
  z-index: 30;
  border-color: var(--course-accent);
}

.roadmap-term-header strong,
.roadmap-term-metrics {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-term-header strong {
  flex: 1 1 auto;
  font-size: 13px;
}

.roadmap-term-prior .roadmap-term-courses {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

.roadmap-course-main,
.roadmap-course-main strong,
.roadmap-course-main span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-course-main span {
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
}

.roadmap-course-card-compact .roadmap-course-main strong {
  color: var(--a1-sw-text, #fff);
  font-size: 13px;
}

.roadmap-course-card-full .roadmap-course-main span {
  margin-top: 1px;
  font-size: 11px;
}

.roadmap-course-card-full .roadmap-course-actions {
  grid-area: auto;
  position: absolute;
  top: 6px;
  right: 6px;
}

/* Viewer's own reaction marker: top-left corner of the full card. */
.roadmap-course-card-full .roadmap-course-react-mark {
  position: absolute;
  top: -5px;
  left: -5px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
}

.roadmap-course-tags span {
  padding: 2px 5px;
  border: 1px solid var(--course-line);
  border-radius: 6px;
  color: var(--a1-sw-chip-fg, var(--course-chip-fg));
  background: var(--course-chip-bg);
  font-size: 10px;
  font-weight: 750;
}

.roadmap-course-actions {
  position: absolute;
  top: 5px;
  right: 5px;
}

.roadmap-course-actions .compact-action-button {
  display: grid;
  place-items: center;
  min-width: 18px;
  width: 18px;
  min-height: 18px;
  height: 18px;
  padding: 0;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1;
}

.roadmap-course-actions .roadmap-remove-button {
  appearance: none;
  display: grid;
  place-items: center;
  min-width: 13px;
  width: 13px;
  min-height: 13px;
  height: 13px;
  padding: 0;
  border: 1px solid rgba(255, 91, 120, 0.7);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 91, 120, 0.18);
  box-shadow: 0 3px 8px rgba(255, 91, 120, 0.12);
  cursor: pointer;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}

.roadmap-course-actions .roadmap-remove-button:hover,
.roadmap-course-actions .roadmap-remove-button:focus-visible {
  border-color: rgba(255, 116, 141, 0.95);
  color: #ffffff;
  background: rgba(255, 91, 120, 0.28);
  outline: none;
}

.roadmap-course-tooltip-row strong {
  color: var(--a1-sw-chip-fg, var(--course-chip-fg));
  font-size: 11px;
}

.roadmap-course-tooltip-row span {
  color: var(--text);
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
}

.roadmap-progress-panel {
  overflow: visible;
  position: static;
}

.roadmap-program-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px;
  gap: 10px;
  align-items: end;
  border-bottom: 1px solid var(--line-soft);
}

.roadmap-program-pill span {
  font-size: 12px;
  font-weight: 750;
}

.roadmap-program-pill button {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-size: 16px;
  line-height: 1;
}

@media (hover: hover) {
  .roadmap-program-pill button:hover{
    color: var(--text);
    background: var(--panel-2);
  }
}

.roadmap-progress-card h4 {
  margin: 0;
  font-size: 14px;
}

.roadmap-progress-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.roadmap-substitution.invalid {
  border-color: rgba(246, 99, 99, 0.34);
  border-left-color: var(--red);
  background: rgba(246, 99, 99, 0.08);
}

.roadmap-substitution strong,
.roadmap-substitution small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-substitution strong {
  font-size: 12px;
  max-width: 34ch;
}

.roadmap-substitution .compact-action-button {
  min-height: 24px;
  width: 24px;
  min-width: 24px;
  padding: 0;
  font-size: 15px;
}

.roadmap-substitution-help span {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: max-content;
  max-width: 150px;
  padding: 5px 7px;
  border: 1px solid rgba(245, 184, 75, 0.42);
  border-radius: 6px;
  color: var(--text);
  background: var(--a1-sw-surface, rgba(15, 21, 32, 0.96));
  box-shadow: var(--shadow);
  font-size: 11px;
  line-height: 1.2;
}

.roadmap-substitution-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.72));
}

.roadmap-substitution-form-actions {
  display: flex;
  grid-column: 1 / -1;
  gap: 8px;
  justify-content: flex-end;
}

.roadmap-substitution-form-actions .primary-button,
.roadmap-substitution-form-actions .ghost-button {
  min-height: 34px;
  min-width: 76px;
}

.roadmap-add-course-modal-header h3,
.roadmap-substitution-modal-header h3 {
  margin: 2px 0 0;
  font-size: 16px;
}

.roadmap-add-course-modal-header span {
  display: block;
  max-width: 320px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.roadmap-add-course-actions .primary-button,
.roadmap-add-course-actions .ghost-button {
  min-height: 36px;
  min-width: 78px;
}

.roadmap-substitution-modal .roadmap-substitution-form {
  grid-template-columns: 1fr;
  padding: 0;
  border: 0;
  background: transparent;
}

.roadmap-progress-toggle:hover,
.roadmap-progress-toggle:focus-visible {
  border-color: rgba(53, 212, 255, 0.58);
  color: var(--cyan);
  outline: none;
}

.roadmap-progress-toggle span {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 140ms ease;
}

.roadmap-progress-title small,
.fee-status-inline {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-progress-title small {
  display: block;
}

.fee-status-inline span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fee-status-inline strong {
  flex: 0 0 auto;
  color: var(--cyan);
  font-weight: 800;
}

.fee-status-compact.partial {
  border-color: rgba(248, 201, 104, 0.78);
  background: var(--amber-pill);
}

.fee-status-compact.met {
  border-color: rgba(74, 222, 128, 0.7);
  background: rgba(74, 222, 128, 0.86);
}

.fee-status-compact span {
  display: block;
  transform: translateY(0.5px);
  color: inherit;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  pointer-events: none;
  text-align: center;
}

.hass-concentration-heading,
.hass-concentration-meta,
.hass-concentration-suggestions > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hass-concentration-heading {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  min-height: 34px;
  cursor: pointer;
  list-style: none;
}

.hass-concentration-heading::-webkit-details-marker {
  display: none;
}

.hass-concentration-heading strong,
.hass-concentration-heading span,
.hass-concentration-meta span,
.hass-concentration-meta a {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hass-concentration-heading strong {
  font-size: 13px;
}

.hass-concentration-heading .progress-stat {
  font-size: 12px;
}

.hass-concentration-heading span,
.hass-concentration-meta {
  color: var(--muted);
  font-size: 11px;
}

.hass-concentration-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.hass-concentration-selected-course:hover,
.hass-concentration-selected-course:focus-visible {
  z-index: 80;
  border-color: var(--course-accent);
  outline: none;
}

.hass-concentration-selected strong,
.hass-concentration-selected small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hass-concentration-selected strong {
  font-size: 11px;
}

.hass-concentration-selected small {
  color: var(--muted);
  font-size: 10px;
}

.hass-concentration-rules p,
.hass-concentration-rules small {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.hass-concentration-rules p {
  color: var(--text);
}

.hass-concentration-rule.partial {
  border-color: rgba(245, 184, 75, 0.45);
  background: rgba(245, 184, 75, 0.1);
}

.hass-concentration-rule.met {
  border-color: rgba(73, 209, 125, 0.48);
  background: rgba(73, 209, 125, 0.12);
}

.hass-concentration-rule summary .roadmap-requirement-caret {
  grid-row: 1 / span 2;
  font-size: 15px;
}

.hass-concentration-rule-course-section > strong {
  color: var(--text);
  font-size: 10px;
}

.hass-concentration-suggestions .ghost-button {
  min-height: 28px;
  min-width: 70px;
  padding: 0 8px;
  font-size: 11px;
}

.hass-concentration-suggestions .refresh-icon-button {
  width: 30px;
  min-width: 30px;
  padding: 0;
  font-size: 15px;
}

.hass-concentration-suggestions > div:last-child {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 5px;
}

.progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--a1-sw-surface, #0c111a);
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--cyan), var(--green));
}

.roadmap-requirement-summary {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 8px;
  cursor: pointer;
  list-style: none;
}

.roadmap-requirement-title,
.roadmap-requirement-title strong,
.roadmap-requirement-title span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-requirement-title strong {
  font-size: 12px;
}

.roadmap-requirement-title span {
  color: var(--muted);
  font-size: 11px;
}

.roadmap-requirement-option.active {
  border-color: rgba(53, 212, 255, 0.72);
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(53, 212, 255, 0.18), rgba(73, 209, 125, 0.11)),
    var(--a1-sw-surface-2, rgba(12, 18, 28, 0.9));
  box-shadow: inset 3px 0 0 var(--cyan);
  opacity: 1;
}

.roadmap-requirement-option.complete {
  border-color: rgba(73, 209, 125, 0.75);
  box-shadow: inset 3px 0 0 var(--green);
}

.roadmap-requirement-option strong,
.roadmap-requirement-option span {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-requirement-option strong {
  font-size: 11px;
  font-weight: 750;
}

.roadmap-requirement-option span {
  margin-top: 2px;
  font-size: 10px;
}

.roadmap-requirement-option-tooltip > strong {
  color: var(--cyan);
  font-size: 12px;
}

.roadmap-requirement-option-tooltip > span {
  color: var(--muted);
  font-size: 11px;
  white-space: normal;
}

.roadmap-requirement-course-group > strong {
  color: var(--cyan);
  font-size: 11px;
  white-space: normal;
}

.roadmap-requirement-course-group > span {
  color: var(--muted);
  font-size: 11px;
  white-space: normal;
}

.roadmap-requirement-course-link:last-child {
  border-bottom: 0;
}

.roadmap-requirement-option-course-list strong,
.roadmap-requirement-option-course-list em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-requirement-option-course-list strong {
  color: var(--text);
  font-size: 11px;
}

.roadmap-requirement-option-course-list em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.roadmap-requirement-note p {
  max-height: 130px;
  margin: 0;
  overflow: auto;
  padding: 0 8px 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-line;
}

.discovery-control-panel {
  position: relative;
  z-index: 90;
  overflow: visible;
}

.comparison-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr);
  gap: 12px;
  align-items: end;
}

.comparison-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
  gap: 16px;
  align-items: start;
}

.comparison-option-block {
  border-top: 1px solid var(--line-soft);
}

.comparison-course-option:hover,
.comparison-course-option:focus-visible {
  border-color: var(--course-accent);
  outline: none;
  background:
    linear-gradient(135deg, var(--course-bg), var(--a1-sw-surface, rgba(15, 21, 32, 0.96)) 72%),
    var(--a1-sw-surface-2, rgba(15, 21, 32, 0.92));
}

.comparison-course-option.selected {
  border-color: rgba(74, 222, 128, 0.58);
}

.comparison-roadmap-option strong {
  font-size: 11px;
}

.comparison-roadmap-option small {
  margin-top: 1px;
  font-size: 9px;
}

.comparison-course-option button {
  grid-area: action;
  width: auto;
  min-width: 68px;
  min-height: 32px;
  padding: 0 10px;
  justify-self: end;
}

.comparison-course-option span,
.comparison-course-option strong,
.comparison-course-option small,
.comparison-course-option em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-course-option strong {
  font-size: 12px;
}

.comparison-course-option small,
.comparison-course-option em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.comparison-selected-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.comparison-selected-toolbar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.comparison-selected-chip span,
.comparison-selected-chip strong,
.comparison-selected-chip small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-selected-chip strong {
  font-size: 12px;
}

.comparison-selected-chip small {
  color: var(--muted);
  font-size: 10px;
}

.comparison-selected-chip > button:last-child {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 5px;
  color: var(--muted);
  background: var(--a1-sw-surface-3, rgba(8, 13, 22, 0.36));
  font-size: 12px;
  line-height: 1;
}

@media (hover: hover) {
  .comparison-selected-chip > button:last-child:hover{
    color: var(--text);
    background: var(--panel-2);
  }
}

/* Comparison course cards double as detail buttons. */
button.comparison-two-course-card,
button.comparison-multi-course-card {
  appearance: none;
  cursor: pointer;
  font: inherit;
}

button.comparison-multi-course-card {
  text-align: left;
}

.comparison-two-course-card-right {
  text-align: left;
}

.comparison-metric-card-head h4 {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-multi-course-card strong,
.comparison-multi-course-card span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-multi-course-card strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}

.comparison-multi-course-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.comparison-two-course-card-left,
.comparison-split-value-left,
.comparison-prereq-item-left,
.comparison-usefulness-item-left {
  text-align: right;
}

.comparison-two-course-card span,
.comparison-two-course-card strong,
.comparison-two-course-card p,
.comparison-two-course-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comparison-two-course-card span {
  color: var(--course-chip-fg, var(--muted));
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.comparison-two-course-card strong {
  color: var(--text);
  font-size: 22px;
  font-weight: 950;
  white-space: nowrap;
}

.comparison-two-course-card p {
  display: -webkit-box;
  min-height: 34px;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.comparison-two-course-card small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.comparison-split-value > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.comparison-split-value-left > div:first-child {
  flex-direction: row-reverse;
}

.comparison-split-value > div:first-child > span,
.comparison-split-score {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-split-value > div:first-child > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.comparison-split-score > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-split-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, var(--course-accent), rgba(255, 255, 255, 0.72)),
    var(--course-accent);
}

.comparison-metric-row strong,
.comparison-metric-row-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-metric-row strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
}

.comparison-text-row strong,
.comparison-text-row p {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comparison-text-row strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.comparison-text-row p {
  display: -webkit-box;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.comparison-prereq-item-left {
  border-right: 3px solid var(--course-accent);
  border-left-width: 1px;
}

.comparison-prereq-item-right {
  border-left: 3px solid var(--course-accent);
}

.comparison-prereq-item strong,
.comparison-prereq-item p,
.comparison-prereq-item span,
.comparison-prereq-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comparison-prereq-item strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.comparison-prereq-item p {
  display: -webkit-box;
  min-height: 34px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.comparison-prereq-item span {
  width: fit-content;
  max-width: 100%;
  padding: 4px 7px;
  border-radius: 999px;
  color: #07111b;
  background: var(--amber);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.comparison-two-course-visual .comparison-two-course-card,
.comparison-two-course-visual .comparison-split-value,
.comparison-two-course-visual .comparison-prereq-item,
.comparison-two-course-visual .comparison-usefulness-item {
  border: 0;
  border-radius: 0;
  background: none;
  padding: 12px 14px;
}

.comparison-two-course-visual .comparison-two-course-grid > * {
  border-bottom: 1px solid var(--line-soft);
}

.comparison-usefulness-split-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(53, 212, 255, 0.06), var(--a1-sw-surface, rgba(12, 18, 28, 0.66))),
    var(--a1-sw-surface-2, rgba(12, 18, 28, 0.72));
}

.comparison-usefulness-split-head {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.comparison-usefulness-split-head h4 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}

.comparison-usefulness-split-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.comparison-usefulness-item-left {
  border-right: 3px solid var(--course-accent);
  border-left-width: 1px;
}

.comparison-usefulness-item > strong,
.comparison-usefulness-item p,
.comparison-usefulness-program strong,
.comparison-usefulness-program span,
.comparison-usefulness-program li span,
.comparison-usefulness-program li em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comparison-usefulness-item > strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.comparison-usefulness-item p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.comparison-usefulness-program-head strong {
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.comparison-usefulness-program-head span,
.comparison-usefulness-program li em {
  flex: 0 0 auto;
  color: var(--green);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.comparison-usefulness-program ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 980px) {
  

  

  .comparison-two-course-card strong {
    font-size: 17px;
  }

  .comparison-two-course-card p {
    min-height: 30px;
    font-size: 11px;
  }
}

.comparison-shortcut-group > strong {
  font-size: 12px;
}

.comparison-requirement-chip span,
.comparison-requirement-chip small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-requirement-chip span {
  font-size: 11px;
  font-weight: 800;
}

.discovery-term-toggles span {
  display: block;
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
}

.discovery-time-filter-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}

.discovery-time-filter-head span,
.discovery-time-filter-help {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.discovery-time-add {
  flex: 0 0 auto;
  min-height: 38px;
  padding-inline: 11px;
  color: var(--cyan);
  white-space: nowrap;
}

.discovery-time-empty strong,
.discovery-time-empty small {
  display: block;
  min-width: 0;
}

.discovery-time-empty strong {
  color: var(--text);
  font-size: 12px;
}

.discovery-time-filter-note strong,
.discovery-time-filter-note span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discovery-time-filter-note strong {
  overflow: visible;
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  text-overflow: clip;
  white-space: normal;
}

.discovery-sort-bar span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.discovery-result-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.discovery-related-divider span {
  white-space: nowrap;
}

.discovery-pager span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.discovery-pager .primary-button,
.discovery-pager .ghost-button {
  min-width: 86px;
  min-height: 34px;
  width: auto;
}

.discovery-card-unit-badge strong,
.discovery-card-unit-badge span {
  display: block;
  max-width: 42px;
  overflow: hidden;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discovery-card-unit-badge strong {
  font-size: 16px;
  font-weight: 900;
}

.discovery-card-unit-badge span {
  margin-top: 2px;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.discovery-card-main,
.discovery-card-heading > strong,
.discovery-card-main > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discovery-card-heading > strong {
  flex: 0 1 auto;
  font-size: 15px;
}

.discovery-card-main > span {
  color: var(--text, #dce9f6);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.18;
}

.discovery-card-stat-circle strong,
.discovery-card-stat-circle span {
  display: block;
  max-width: 28px;
  overflow: hidden;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discovery-card-stat-circle strong {
  color: var(--metric-ink);
  font-size: 11px;
  font-weight: 950;
}

.discovery-card-stat-circle span {
  margin-top: 1px;
  color: var(--metric-subtle);
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
}

.discovery-card p {
  min-height: 52px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.discovery-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.email-assistant-shell {
  display: grid;
  gap: 16px;
}

.email-dashboard-header,
.email-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.email-dashboard-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.email-dashboard-header > div {
  display: grid;
  gap: 3px;
}

.email-dashboard-header > .email-account-switcher {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.email-account-picker {
  position: relative;
  display: inline-grid;
  width: min(210px, 100%);
  min-width: 0;
  max-width: 100%;
}

.email-account-picker[hidden] {
  display: none;
}

.email-account-picker select {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 30px 0 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line-soft));
  border-radius: 10px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel-2) 76%, transparent);
  font: inherit;
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
  appearance: none;
  cursor: pointer;
}

.email-account-picker select:focus-visible {
  border-color: var(--primary);
  outline: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
  outline-offset: 2px;
}

.email-account-picker > svg {
  position: absolute;
  top: 50%;
  right: 9px;
  color: var(--primary);
  pointer-events: none;
  transform: translateY(-50%);
}

.email-dashboard-header > .email-dashboard-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.email-dashboard-actions .refresh-icon-button,
.email-dashboard-actions .a1-icon-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
}

.email-settings-menu-wrap {
  position: relative;
}

.email-settings-menu {
  position: absolute;
  z-index: 12;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  width: min(220px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.email-settings-menu[hidden] {
  display: none;
}

.email-settings-menu > button {
  min-height: 46px;
  padding: 10px 14px;
  border: 0;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  text-align: left;
}

.email-settings-menu > button + button {
  border-top: 1px solid var(--line-soft);
}

.email-settings-menu > button:hover,
.email-settings-menu > button:focus-visible {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  outline: none;
}

.email-dashboard-header h3 {
  margin: 0;
}

.email-provider-link {
  display: inline-block;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--primary);
  font-size: 12px;
  text-overflow: ellipsis;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--primary) 48%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.email-provider-link[hidden] {
  display: none;
}

.email-provider-link:hover,
.email-provider-link:focus-visible {
  color: color-mix(in srgb, var(--primary) 78%, white);
  text-decoration-color: currentColor;
  outline: none;
}

@media (max-width: 520px) {
  .email-dashboard-header > .email-account-switcher {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 4px;
  }
}

.email-dashboard-body {
  display: grid;
}

.email-inbox-view-switcher {
  display: grid;
}

.email-inbox-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel-2) 78%, transparent);
}

.email-inbox-tabs > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 48px;
  padding: 10px 8px;
  border: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.email-inbox-tabs > button + button {
  border-left: 1px solid var(--line-soft);
}

.email-inbox-tabs > button:hover,
.email-inbox-tabs > button:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  outline: none;
}

.email-inbox-tabs > button.is-active {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 11%, var(--panel-2));
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--primary) 82%, transparent);
}

.email-inbox-tabs > button > span {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-inbox-tabs > button > strong {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--muted) 13%, transparent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0;
}

.email-inbox-tabs > button.is-active > strong {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}

.email-daily-brief {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  align-items: stretch;
  gap: 20px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line-soft));
  border-radius: 14px;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--primary) 11%, transparent), transparent 62%),
    color-mix(in srgb, var(--panel-2) 88%, transparent);
}

.email-daily-brief::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--primary);
  content: "";
}

.email-daily-brief-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.email-daily-brief-copy h4,
.email-daily-brief-copy p {
  margin: 0;
}

.email-brief-heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.email-brief-heading > span {
  color: var(--muted);
  font-size: 11px;
}

.email-daily-brief-copy h4 {
  color: var(--text);
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.28;
}

.email-daily-brief-copy p {
  max-width: 760px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.email-brief-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.email-brief-tally {
  display: grid;
  grid-template-columns: repeat(3, minmax(78px, 1fr));
  gap: 8px;
}

.email-brief-tally span {
  display: grid;
  place-content: center;
  min-width: 0;
  padding: 12px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
}

.email-brief-tally strong {
  color: var(--text);
  font-size: 23px;
  line-height: 1;
}

.email-brief-lanes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.email-brief-all-clear {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--line-soft);
  border-radius: 11px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.email-brief-all-clear > span {
  color: var(--green, var(--primary));
  font-weight: 850;
}

.email-brief-lane {
  --email-lane-accent: var(--primary);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-top: 3px solid var(--email-lane-accent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
}

.email-brief-lane[data-brief-lane="need-reply"] {
  --email-lane-accent: var(--red);
}

.email-brief-lane[data-brief-lane="need-action"] {
  --email-lane-accent: var(--amber);
}

.email-brief-lane > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px 9px;
  border-bottom: 1px solid var(--line-soft);
}

.email-brief-lane > header > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.email-brief-lane > header strong {
  color: var(--text);
  font-size: 12px;
}

.email-brief-lane > header small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.email-brief-lane > header > span {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--email-lane-accent) 35%, var(--line-soft));
  border-radius: 999px;
  color: var(--email-lane-accent);
  font-size: 11px;
  font-weight: 850;
}

.email-brief-lane-list {
  display: grid;
}

.email-brief-lane-list > button {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  gap: 9px;
  width: 100%;
  align-items: start;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

@media (hover: hover) {
  .email-brief-lane-list > button:hover{
    background: color-mix(in srgb, var(--email-lane-accent) 6%, transparent);
  }
}

.email-brief-lane-list > button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--email-lane-accent);
  outline-offset: -2px;
}

.email-brief-lane-mark {
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--email-lane-accent);
}

.email-brief-lane-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.email-brief-lane-copy strong,
.email-brief-lane-copy small,
.email-brief-lane-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-brief-lane-copy strong {
  font-size: 11px;
}

.email-brief-lane-copy small {
  color: var(--muted);
  font-size: 9px;
}

.email-brief-lane-copy em {
  color: color-mix(in srgb, var(--email-lane-accent) 76%, var(--text));
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.email-brief-action-signal {
  max-width: 92px;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-brief-lane-list > p {
  margin: 0;
  padding: 15px 12px;
  color: var(--muted);
  font-size: 10px;
}

.email-brief-lane-more {
  padding: 8px 12px;
  color: var(--muted);
  font-size: 9px;
}

.email-dashboard-scope {
  margin: 0;
}

.email-dashboard-loading {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
}

.email-dashboard-loading > span:not(.sr-only) {
  min-height: 48px;
  background: color-mix(in srgb, var(--muted) 15%, transparent);
  animation: email-skeleton-pulse 1.4s ease-in-out infinite alternate;
}

.email-dashboard-loading > span:not(.sr-only) + span {
  border-left: 1px solid var(--line-soft);
}

.email-dashboard-error {
  display: grid;
  gap: 4px;
  padding: 18px;
}

.email-important-rule-menu {
  width: 100%;
}

.email-important-rule-field,
.email-important-ai-choice {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: 12px;
}

.email-important-rule-field > span {
  font-weight: 800;
}

.email-important-rule-field textarea {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
  font: inherit;
  line-height: 1.5;
}

.email-important-rule-field textarea:focus {
  border-color: color-mix(in srgb, var(--primary) 62%, var(--line-soft));
  outline: 2px solid color-mix(in srgb, var(--primary) 22%, transparent);
  outline-offset: 1px;
}

.email-important-ai-choice {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  padding: 11px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-2) 72%, transparent);
}

.email-important-ai-choice input {
  width: 19px;
  height: 19px;
  margin: 1px 0 0;
  accent-color: var(--primary);
}

.email-important-ai-choice > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.email-important-ai-choice small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.email-important-label-settings {
  display: grid;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.email-important-section-heading,
.email-notification-choice > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.email-important-section-heading > small,
.email-notification-choice small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.email-notification-settings {
  display: grid;
  gap: 12px;
}

.email-notification-settings > p {
  margin: 0;
}

.email-notification-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel-2) 72%, transparent);
}

.email-notification-choice:focus-within {
  border-color: color-mix(in srgb, var(--primary) 62%, var(--line-soft));
  outline: 2px solid color-mix(in srgb, var(--primary) 22%, transparent);
  outline-offset: 1px;
}

.email-notification-choice input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--primary);
}

.email-notification-note {
  line-height: 1.5;
}

.email-important-rule-menu .email-label-menu-actions > span {
  max-width: 270px;
  line-height: 1.4;
}

.email-important-rule-menu .email-label-menu-actions > span.is-error {
  color: var(--red);
}

.email-label-choice:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.email-settings-dialog-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: var(--app-live-viewport-height, 100dvh);
  overflow: hidden;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(4, 9, 18, 0.58);
  backdrop-filter: blur(3px);
}

.email-settings-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(520px, 100%);
  max-height: calc(var(--app-live-viewport-height, 100dvh) - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.email-settings-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 10px 14px 10px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.email-settings-dialog-header h3 {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-settings-dialog-close {
  flex: 0 0 auto;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}

.email-settings-dialog-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px;
  overscroll-behavior: contain;
}

.email-label-menu {
  display: grid;
  gap: 12px;
  min-width: 0;
  width: 100%;
}

.email-label-menu p {
  margin: 0;
}

.email-fixed-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.email-fixed-signals span,
.email-preview-labels span {
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line-soft));
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  font-size: 10px;
}

.email-label-choice-list {
  display: grid;
  max-height: 230px;
  overflow: auto;
  border-block: 1px solid var(--line-soft);
}

.email-label-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 7px 4px;
  color: var(--text);
  font-size: 12px;
}

.email-label-choice + .email-label-choice {
  border-top: 1px solid var(--line-soft);
}

.email-label-choice input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.email-label-menu-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.email-label-menu-actions > button {
  min-height: 44px;
}

.email-settings-empty {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 20px;
  color: var(--muted);
  text-align: center;
}

.email-muted-settings-section {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.email-muted-settings-section h4 {
  margin: 0;
  font-size: 12px;
}

.email-message-dialog-backdrop {
  position: fixed;
  z-index: 950;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: var(--app-live-viewport-height, 100dvh);
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: rgba(4, 9, 18, 0.62);
  backdrop-filter: blur(4px);
}

.email-message-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(760px, 100%);
  max-height: calc(var(--app-live-viewport-height, 100dvh) - max(40px, env(safe-area-inset-top)) - max(40px, env(safe-area-inset-bottom)));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
}

.email-message-toolbar {
  display: grid;
  grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr);
  align-items: center;
  min-height: 60px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--panel) 94%, var(--panel-2));
}

.email-message-toolbar > strong {
  font-size: 13px;
  text-align: center;
}

.email-message-back {
  justify-self: start;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}

.email-message-toolbar-open {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 7px;
  min-height: 44px;
  padding: 8px 11px;
  border-radius: 10px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.email-message-toolbar-open:hover,
.email-message-toolbar-open:focus-visible {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  outline: 2px solid color-mix(in srgb, var(--primary) 50%, transparent);
  outline-offset: 1px;
}

.email-message-toolbar-spacer {
  width: 44px;
  justify-self: end;
}

.email-original-action {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 12px;
}

.email-see-original {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--line-soft));
  border-radius: 11px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.email-see-original:hover,
.email-see-original:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 62%, var(--line-soft));
  background: color-mix(in srgb, var(--primary) 13%, transparent);
  outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent);
  outline-offset: 2px;
}

.email-message-reader {
  width: 100%;
  max-width: 100%;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  padding: 26px 28px max(28px, env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}

.email-message-reader .mail-message-heading {
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 18px;
}

.email-message-reader .mail-message-heading h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(20px, 3vw, 27px);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.email-message-sender {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.email-message-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, var(--panel-2));
  font-size: 15px;
  font-weight: 850;
}

.email-message-sender-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.email-message-sender-copy strong,
.email-message-sender-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-message-sender-copy strong {
  font-size: 12px;
}

.email-message-sender-copy small {
  color: var(--muted);
  font-size: 10px;
}

.email-message-sender time {
  text-align: right;
  white-space: nowrap;
}

.email-message-reader .mail-message-text,
.email-message-reader .mail-message-text-state {
  max-height: none;
  min-height: 180px;
  overflow: visible;
  padding: 24px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  line-height: 1.72;
}

.email-message-reader .email-preview-labels {
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.email-message-insights {
  margin-top: 18px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-2) 55%, transparent);
}

.email-message-insights > summary {
  min-height: 46px;
  padding: 13px 14px;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.email-message-insights[open] > summary {
  border-bottom: 1px solid var(--line-soft);
}

.email-message-insights .email-classification-strip {
  margin: 0;
  padding: 14px 14px 0;
}

.email-message-insights .email-privacy-note {
  margin: 0;
  padding: 12px 14px 14px;
}

.email-message-reader .email-preview-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.email-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.email-layout .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.email-panel-header {
  position: relative;
  align-items: flex-start;
}

.email-panel-header > div {
  box-sizing: border-box;
  display: grid;
  gap: 3px;
  width: 100%;
  min-width: 0;
  padding-right: 60px;
}

html[data-a1-skin] .email-panel-header .email-important-setup-button {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 10px;
  width: auto;
  min-width: 0;
  height: 28px;
  min-height: 0;
  padding: 4px;
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line-soft));
  border-radius: 8px;
  color: var(--primary);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
}

html[data-a1-skin] .email-panel-header .email-important-setup-button::after {
  position: absolute;
  inset: -8px;
  content: "";
}

html[data-a1-skin] .email-panel-header .email-important-setup-button[hidden] {
  display: none;
}

.email-panel-eyebrow {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Wraps instead of ellipsizing: the status word at the end ("DISCONNECTED")
     is the informative part, so it must never be the part that gets cut. */
  white-space: normal;
  overflow-wrap: anywhere;
}

.email-layout .panel-header h3 {
  margin: 0;
}

.email-inbox-panel > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.email-inbox-panel > summary::-webkit-details-marker {
  display: none;
}

.email-inbox-panel:not([open]) > summary {
  border-bottom-color: transparent;
}

.email-inbox-panel > summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -3px;
}

.email-inbox-disclosure {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel-2) 78%, transparent);
}

.email-inbox-disclosure::before,
.email-inbox-disclosure::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: var(--muted);
  content: "";
  transition: transform 150ms ease;
}

.email-inbox-disclosure::before {
  transform: translate(-82%, -50%) rotate(40deg);
}

.email-inbox-disclosure::after {
  transform: translate(-18%, -50%) rotate(-40deg);
}

.email-inbox-panel[open] .email-inbox-disclosure::before {
  transform: translate(-82%, -50%) rotate(-40deg);
}

.email-inbox-panel[open] .email-inbox-disclosure::after {
  transform: translate(-18%, -50%) rotate(40deg);
}

.email-inbox-list {
  max-height: 620px;
  overflow: auto;
  padding: 0;
}

.email-all-search {
  position: sticky;
  z-index: 4;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  backdrop-filter: blur(12px);
}

.email-all-search input {
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel-2) 78%, transparent);
  font: inherit;
  font-size: 13px;
}

.email-all-search input:focus {
  border-color: color-mix(in srgb, var(--primary) 62%, var(--line-soft));
  outline: 2px solid color-mix(in srgb, var(--primary) 18%, transparent);
  outline-offset: 1px;
}

.email-all-search button {
  min-width: 44px;
  min-height: 40px;
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  color: var(--primary);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}

.email-all-search button[type="submit"] {
  color: var(--panel);
  background: var(--primary);
}

.email-all-search button:hover,
.email-all-search button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 48%, transparent);
  outline-offset: 1px;
}

.email-all-more {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 68px;
  padding: 12px;
  border-top: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--panel-2) 38%, transparent);
}

.email-all-more > span {
  color: var(--red);
  font-size: 11px;
  text-align: center;
}

.email-all-more > button {
  min-width: 132px;
  min-height: 44px;
}

.email-message-row {
  --email-priority-accent: color-mix(in srgb, var(--muted) 52%, transparent);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  align-items: stretch;
  border-width: 0 0 1px;
  border-style: solid;
  border-color: var(--line-soft);
  border-left-width: 3px;
  border-left-color: transparent;
  color: var(--text);
  background: transparent;
  text-align: left;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

.email-message-row.priority-high {
  --email-priority-accent: var(--red);
  border-left-color: var(--red);
}

.email-message-row.priority-medium {
  --email-priority-accent: var(--amber);
  border-left-color: var(--amber);
}

.email-message-row.priority-low {
  border-left-color: color-mix(in srgb, var(--muted) 40%, transparent);
}

.email-message-row:last-child {
  border-bottom: 0;
}

.email-message-select {
  display: grid;
  grid-template-columns: minmax(84px, 104px) minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 14px 10px 14px 14px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.email-priority-rail {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 4px 6px;
  min-width: 0;
  padding: 3px 10px 3px 0;
  border-right: 1px solid var(--line-soft);
}

.email-priority-dot {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--email-priority-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--email-priority-accent) 12%, transparent);
}

.email-priority-rail strong {
  overflow: hidden;
  color: var(--email-priority-accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.email-priority-rail small {
  grid-column: 1 / -1;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

@media (hover: hover) {
  .email-message-row:hover {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
  }
}

.email-message-row.active {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  box-shadow: inset 3px 0 0 var(--primary);
}

.email-message-select:focus-visible,
.email-message-open:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--primary);
  outline-offset: -3px;
}

.email-message-select,
.email-message-open,
.email-brief-lane-list > button {
  touch-action: manipulation;
}

.email-message-row.unread .row-title {
  color: var(--primary);
}

.email-priority-list {
  min-width: 0;
}

.email-priority-clear {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.email-priority-clear p {
  margin: 3px 0 0;
}

.email-all-recent {
  border-top: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--panel-2) 40%, transparent);
}

.email-all-recent > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}

.email-all-recent > summary::-webkit-details-marker {
  display: none;
}

.email-all-recent > summary > span:first-child {
  display: grid;
  gap: 2px;
}

.email-all-recent > summary strong {
  color: var(--text);
  font-size: 12px;
}

.email-all-recent > summary small {
  color: var(--muted);
  font-size: 10px;
}

.email-all-recent[open] > summary {
  border-bottom: 1px solid var(--line-soft);
}

.email-all-recent-empty {
  margin: 0;
  padding: 18px;
}

.email-message-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.email-message-heading-line,
.email-message-status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.email-message-heading-line .row-title,
.email-message-subject,
.email-message-snippet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-message-heading-line .row-title {
  min-width: 0;
}

.email-message-subject {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.email-message-snippet {
  display: block;
}

.email-message-signals,
.email-preview-pills,
.email-preview-labels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.email-message-signals > span {
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 9%, transparent);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
}

.email-message-signals .email-category-chip {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.email-message-signals .email-account-chip,
.email-preview-pills .email-account-chip {
  max-width: 190px;
  overflow: hidden;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-message-signals .category-newsletter,
.email-message-signals .category-promotion {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 13%, transparent);
}

.email-message-time {
  flex: 0 0 auto;
  white-space: nowrap;
}

.email-message-open {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 4px;
  min-height: 36px;
  margin-right: 10px;
  padding: 6px 8px;
  border-radius: 7px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

@media (hover: hover) {
  .email-message-open:hover{
    background: color-mix(in srgb, var(--primary) 10%, transparent);
  }
}

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

.email-mute-toggle {
  min-height: 36px;
}

.email-muted-sender-list {
  display: grid;
  gap: 4px;
}

.email-muted-sender-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.email-muted-sender-address {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-muted-sender-row button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  cursor: pointer;
}

@media (hover: hover) {
  .email-muted-sender-row button:hover{
    color: var(--cyan);
    border-color: rgba(53, 212, 255, 0.5);
  }
}

.email-empty-state {
  display: grid;
  gap: 12px;
  place-items: start;
  min-height: 240px;
  align-content: center;
  padding: 24px;
}

.email-empty-state p {
  margin: 0;
}

.email-error-state {
  max-width: 440px;
}

.email-state-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--primary);
  font-size: 18px;
  font-weight: 800;
}

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

.email-loading-state {
  display: grid;
}

.email-loading-row {
  display: grid;
  gap: 7px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line-soft);
}

.email-loading-row span {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 20%, transparent);
  animation: email-skeleton-pulse 1.4s ease-in-out infinite alternate;
  animation-delay: calc(var(--email-skeleton-index) * 90ms);
}

.email-loading-row span:nth-child(1) {
  width: 42%;
}

.email-loading-row span:nth-child(2) {
  width: 76%;
}

.email-loading-row span:nth-child(3) {
  width: 92%;
}

@keyframes email-skeleton-pulse {
  to { opacity: 0.36; }
}

@media (prefers-reduced-motion: reduce) {
  .email-message-row,
  .email-inbox-disclosure::before,
  .email-inbox-disclosure::after,
  .email-loading-row span {
    animation: none;
    transition: none;
  }
}

.mail-message-heading {
  display: grid;
  gap: 7px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.mail-message-heading p,
.mail-message-heading h3 {
  margin: 0;
}

.mail-snippet {
  margin: 0;
  color: var(--text);
}

.mail-message-text,
.mail-message-text-state {
  margin: 0;
  color: var(--text);
}

.mail-message-text {
  max-height: min(52dvh, 620px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel-2) 72%, transparent);
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.email-message-reader .mail-message-html {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}

.mail-message-html > :first-child {
  margin-top: 0;
}

.mail-message-html > :last-child {
  margin-bottom: 0;
}

.mail-message-html p,
.mail-message-html blockquote,
.mail-message-html pre,
.mail-message-html ul,
.mail-message-html ol,
.mail-message-html table {
  margin-block: 0 1em;
}

.mail-message-html a {
  color: var(--primary);
  font-weight: 650;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.mail-message-html a:hover,
.mail-message-html a:focus-visible {
  color: color-mix(in srgb, var(--primary) 78%, var(--text));
}

.mail-message-html table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-spacing: 0;
  border-collapse: collapse;
  color: var(--text);
  background: color-mix(in srgb, var(--panel-2) 58%, transparent);
  table-layout: fixed;
}

.mail-message-html table.mail-layout-table {
  border: 0;
  background: transparent;
}

.mail-message-html table.mail-layout-table > tbody > tr > td,
.mail-message-html table.mail-layout-table > tr > td {
  padding: 0;
  border: 0;
  background: transparent;
}

.mail-message-html caption {
  padding: 8px;
  color: var(--muted);
  font-weight: 750;
  text-align: left;
}

.mail-message-html th,
.mail-message-html td {
  max-width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  overflow-wrap: anywhere;
  text-align: left;
  vertical-align: top;
  word-break: break-word;
}

.mail-message-html th {
  background: color-mix(in srgb, var(--primary) 8%, var(--panel-2));
  font-weight: 800;
}

.mail-message-html blockquote {
  padding-inline-start: 12px;
  border-inline-start: 3px solid var(--line-soft);
  color: var(--muted);
}

.mail-message-html pre {
  overflow-x: auto;
  padding: 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-2) 80%, transparent);
  white-space: pre-wrap;
}

.mail-message-image-placeholder {
  display: inline-block;
  color: var(--muted);
  font-size: 0.9em;
  font-style: italic;
}

.mail-message-text-state {
  display: grid;
  gap: 7px;
}

.email-classification-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.email-classification-strip > span {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel-2) 72%, transparent);
}

.email-classification-strip small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.email-classification-strip strong {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-preview-labels {
  margin-top: 14px;
}

.priority-pill-high {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 40%, var(--line-soft));
}

.priority-pill-medium {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 40%, var(--line-soft));
}

.email-ai-summary {
  position: relative;
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding: 14px 14px 14px 17px;
  overflow: hidden;
  border: 1px dashed color-mix(in srgb, var(--primary) 28%, var(--line-soft));
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.email-ai-summary::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: color-mix(in srgb, var(--primary) 72%, transparent);
  content: "";
}

.email-ai-summary[data-summary-status="ready"] {
  border-style: solid;
}

.email-ai-summary-header,
.email-ai-summary-header > div {
  display: flex;
  align-items: center;
}

.email-ai-summary-header {
  justify-content: space-between;
  gap: 12px;
}

.email-ai-summary-header > div {
  gap: 8px;
}

.email-ai-summary-mark {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 22px;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--line-soft));
  border-radius: 7px;
  color: var(--primary);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.05em;
}

.email-ai-summary p {
  margin: 0;
}

.email-ai-summary-text {
  color: var(--text);
  white-space: pre-wrap;
}

.email-action-bridge {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-2) 68%, transparent);
}

.email-action-bridge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.email-action-bridge-header > div {
  display: grid;
  gap: 2px;
}

.email-action-bridge-header small {
  color: var(--muted);
  font-size: 9px;
}

.email-action-bridge p {
  margin: 0;
}

.email-action-detections,
.email-action-candidates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.email-action-detections > span {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
}

.email-action-detections small,
.email-action-candidates small {
  color: var(--muted);
  font-size: 9px;
}

.email-action-detections strong {
  font-size: 11px;
}

.email-action-detections > p {
  grid-column: 1 / -1;
}

.email-action-candidates > button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px dashed var(--line-soft);
  border-radius: 8px;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.email-action-candidates > button:not(:disabled) {
  border-style: solid;
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line-soft));
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.email-action-candidates > button:not(:disabled):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (hover: hover) {
  .email-action-candidates > button:not(:disabled):hover {
    border-color: color-mix(in srgb, var(--primary) 62%, var(--line-soft));
    background: color-mix(in srgb, var(--primary) 10%, transparent);
  }
}

.email-action-candidates > button > span:first-child {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
}

.email-action-candidates > button > span:last-child {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.email-action-candidates > button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.email-action-review-backdrop {
  z-index: 1020;
}

.email-action-review-form {
  display: grid;
  gap: 15px;
}

.email-action-review-form > p {
  margin: 0;
}

.email-action-review-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}

.email-action-review-form label span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.email-action-review-form label small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.email-action-review-form input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 10px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--text);
  background: var(--panel-2);
  font: inherit;
  font-size: 16px;
}

.email-action-review-form input:focus {
  border-color: var(--primary);
  outline: 2px solid color-mix(in srgb, var(--primary) 20%, transparent);
  outline-offset: 1px;
}

.email-action-review-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.email-action-review-source {
  padding: 10px;
  overflow-wrap: anywhere;
  border-radius: 9px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel-2) 72%, transparent);
  font-size: 10px;
  line-height: 1.5;
}

.email-action-review-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.email-action-review-actions button {
  min-height: 46px;
}

.email-action-review-form .form-message {
  min-height: 18px;
  color: var(--red);
}

@media (max-width: 980px) {
  .email-brief-lanes {
    grid-template-columns: 1fr;
  }
}

.email-privacy-note {
  margin-top: 20px;
}

.mail-open-link {
  display: inline-flex;
  width: max-content;
  margin-top: 14px;
  text-decoration: none;
}

.mail-body {
  min-height: 380px;
  line-height: 1.7;
}

@media (max-width: 560px) {
  .email-inbox-tabs > button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 9px 5px;
  }

  .email-inbox-tabs > button > span {
    width: auto;
    font-size: 10.5px;
    text-align: center;
  }

  .email-inbox-tabs > button > strong {
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
    font-size: 9.5px;
  }

  .email-daily-brief {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .email-classification-strip {
    grid-template-columns: 1fr;
  }

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

  .email-brief-tally span {
    padding-inline: 5px;
  }

  .email-action-detections,
  .email-action-candidates {
    grid-template-columns: 1fr;
  }

  .email-settings-dialog-backdrop {
    align-items: stretch;
    padding: 0;
    background: var(--panel);
    backdrop-filter: none;
  }

  .email-settings-dialog {
    width: 100%;
    height: var(--app-live-viewport-height, 100dvh);
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .email-settings-dialog-header {
    min-height: 68px;
    padding:
      max(20px, calc(8px + env(safe-area-inset-top)))
      max(20px, calc(10px + env(safe-area-inset-right)))
      10px
      max(20px, calc(10px + env(safe-area-inset-left)));
  }

  .email-settings-dialog-body {
    width: 100%;
    max-width: 100%;
    padding:
      16px
      max(18px, calc(10px + env(safe-area-inset-right)))
      max(18px, calc(10px + env(safe-area-inset-bottom)))
      max(18px, calc(10px + env(safe-area-inset-left)));
  }

  .email-action-review-times {
    grid-template-columns: 1fr;
  }

  .email-message-dialog-backdrop {
    align-items: stretch;
    padding: 0;
    background: var(--panel);
    backdrop-filter: none;
  }

  .email-message-dialog {
    width: 100%;
    height: var(--app-live-viewport-height, 100dvh);
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .email-message-toolbar {
    min-height: calc(58px + env(safe-area-inset-top));
    padding-top: max(8px, env(safe-area-inset-top));
  }

  .email-message-toolbar-open {
    width: 44px;
    padding: 0;
  }

  .email-message-toolbar-open > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .email-message-reader {
    padding: 20px 18px max(24px, env(safe-area-inset-bottom));
  }

  .email-message-reader .mail-message-heading h2 {
    font-size: 21px;
  }

  .email-message-sender {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
  }

  .email-message-avatar {
    width: 40px;
    height: 40px;
  }

  .email-message-sender time {
    grid-column: 2;
    text-align: left;
  }

  .email-message-reader .mail-message-text,
  .email-message-reader .mail-message-text-state {
    min-height: 150px;
    padding-block: 20px;
    font-size: 13.5px;
  }

  .email-original-action,
  .email-see-original {
    width: 100%;
  }

  .mail-message-html table.mail-layout-table,
  .mail-message-html table.mail-layout-table > thead,
  .mail-message-html table.mail-layout-table > tbody,
  .mail-message-html table.mail-layout-table > tfoot,
  .mail-message-html table.mail-layout-table > thead > tr,
  .mail-message-html table.mail-layout-table > tbody > tr,
  .mail-message-html table.mail-layout-table > tfoot > tr,
  .mail-message-html table.mail-layout-table > tr,
  .mail-message-html table.mail-layout-table > thead > tr > th,
  .mail-message-html table.mail-layout-table > thead > tr > td,
  .mail-message-html table.mail-layout-table > tbody > tr > th,
  .mail-message-html table.mail-layout-table > tbody > tr > td,
  .mail-message-html table.mail-layout-table > tfoot > tr > th,
  .mail-message-html table.mail-layout-table > tfoot > tr > td,
  .mail-message-html table.mail-layout-table > tr > th,
  .mail-message-html table.mail-layout-table > tr > td {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .mail-message-html table.mail-layout-table colgroup,
  .mail-message-html table.mail-layout-table col {
    display: none;
  }

  .mail-message-html table.mail-data-table {
    width: max-content;
    min-width: 100%;
    max-width: none;
    table-layout: auto;
  }

  .mail-message-html table.mail-data-table th,
  .mail-message-html table.mail-data-table td {
    min-width: 96px;
    word-break: normal;
  }

  .email-important-rule-menu .email-label-menu-actions,
  .email-notification-settings .email-label-menu-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .email-important-rule-menu .email-label-menu-actions > span {
    max-width: none;
  }

  .email-important-rule-menu .email-label-menu-actions > button,
  .email-notification-settings .email-label-menu-actions > button {
    width: 100%;
    min-height: 44px;
  }

  .email-message-row {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
  }

  .email-message-select {
    grid-template-columns: minmax(76px, 90px) minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
  }

  .email-message-snippet {
    display: none;
  }
}

.homework-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.homework-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.homework-refresh-status {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homework-semester-field {
  width: min(100%, 320px);
}

.homework-semester-field select {
  width: 100%;
}

.homework-header,
.homework-source-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.homework-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  margin-bottom: 0;
}

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

.homework-tabs.learn-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 10px;
  text-align: center;
  white-space: nowrap;
}

.homework-source-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.homework-source-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.58));
}

.homework-source-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
}

.homework-source-summary::-webkit-details-marker {
  display: none;
}

.homework-source-title {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homework-source-expand {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 0;
  color: var(--cyan);
  background: transparent;
  font-weight: 850;
}

.homework-source-expand::before {
  content: "+";
}

.homework-source-card[open] .homework-source-expand::before {
  content: "-";
}

.homework-source-detail {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
  border-top: 1px solid var(--line-soft);
}

.homework-source-detail p {
  margin: 0;
  padding-top: 10px;
}

.homework-source-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.homework-grade-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.homework-grade-list {
  max-height: 640px;
  overflow: auto;
}

.homework-course-groups {
  display: grid;
  gap: 14px;
  padding: 0;
}

.homework-course-grade-group {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(15, 21, 32, 0.64));
}

.homework-course-grade-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border-bottom: 0;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.78));
  cursor: pointer;
  list-style: none;
}

.homework-course-grade-header::-webkit-details-marker {
  display: none;
}

.homework-course-grade-group[open] .homework-course-grade-header {
  border-bottom: 1px solid var(--line-soft);
}

.homework-course-hide-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  color: var(--muted);
  background: rgba(127, 127, 127, 0.05);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.homework-course-hide-button:hover,
.homework-course-hide-button:focus-visible {
  border-color: rgba(53, 212, 255, 0.5);
  color: var(--text);
  background: rgba(53, 212, 255, 0.1);
  outline: none;
}

/* The ⋯ course menu shares the hide button's chip look. */
.homework-course-menu-button {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
}

.homework-course-grade-details {
  display: grid;
}

.homework-course-grade-group:not([open]) .homework-course-grade-details {
  display: none;
}

.homework-course-grade-header h4 {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
  font-size: 15px;
}

/* The title must truncate before it slides under the average / buttons. */
.homework-course-grade-header h4 > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homework-course-grade-header > .progress-stat,
.homework-course-grade-header > .homework-course-hide-button {
  flex: 0 0 auto;
}

.homework-hidden-course-panel {
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.54));
}

.homework-hidden-course-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}

.homework-hidden-course-panel > summary::-webkit-details-marker {
  display: none;
}

.homework-hidden-course-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-soft);
}

.homework-hidden-course-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-soft);
}

.homework-hidden-course-row:last-child {
  border-bottom: 0;
}

.homework-hidden-course-row > div,
.homework-hidden-course-row strong,
.homework-hidden-course-row span {
  min-width: 0;
}

.homework-hidden-course-row strong {
  display: block;
  overflow: hidden;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homework-hidden-course-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.homework-do-row a {
  color: var(--text);
  text-decoration: none;
}

@media (hover: hover) {
  .homework-do-row a:hover{
    color: var(--cyan);
  }
}

.homework-empty {
  margin: 0;
  padding: 16px 18px;
}

.homework-grade-loading {
  display: grid;
  gap: 12px;
  padding: 18px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.74));
}

.homework-grade-loading-head {
  display: grid;
  gap: 4px;
}

.homework-grade-loading-head strong {
  font-size: 14px;
}

.homework-grade-loading-bar {
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: var(--a1-sw-surface, #0c111a);
}

.homework-grade-loading-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  transition: width 180ms ease;
}

.homework-review-layout {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.learn-answer-layout {
  grid-template-columns: minmax(0, 1fr);
  max-width: 880px;
  margin-inline: auto;
}

.learn-answer-main-panel {
  grid-column: 1 / -1;
  overflow: visible;
}

.learn-workspace-disclosure-control {
  display: flex;
  justify-content: center;
  margin: -4px 0 0;
}

.learn-workspace-disclosure-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  color: var(--cyan);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.learn-workspace-disclosure-toggle:hover,
.learn-workspace-disclosure-toggle:focus-visible {
  background: color-mix(in srgb, var(--cyan) 9%, transparent);
  outline: none;
}

.learn-workspace-disclosure-chevron {
  color: currentColor;
  font-size: 16px;
  line-height: 1;
  transition: transform 160ms ease;
}

.learn-workspace-disclosure-toggle[aria-expanded="true"] .learn-workspace-disclosure-chevron {
  transform: rotate(180deg);
}

.learn-workspace-disclosure-panel {
  min-width: 0;
  width: 100%;
}

.learn-workspace-disclosure-panel[hidden] {
  display: none;
}

.learn-homework-panel {
  overflow: hidden;
}

.homework-header.learn-homework-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.learn-homework-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.learn-homework-heading h3,
.learn-homework-heading span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homework-tabs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 16px;
}

.homework-tabs-row .homework-tabs {
  flex: 1 1 320px;
  margin-bottom: 0;
}

.learn-homework-view-switch-top {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(96px, 1fr));
  flex: 0 0 auto;
  gap: 6px;
  margin-bottom: 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--a1-sw-surface, #0f1520);
}

.learn-homework-view-switch-top button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-weight: 750;
  cursor: pointer;
}

.learn-homework-view-switch-top button.active {
  color: var(--text);
  background: var(--panel-2);
}

.learn-homework-view-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(92px, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(8, 12, 18, 0.72));
}

.learn-homework-view-switch button {
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.learn-homework-view-switch button.active {
  color: #071019;
  background: var(--cyan);
}

.learn-workspace-layout {
  display: grid;
  gap: 10px;
  max-width: 760px;
}

.learn-workspace-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 200px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface, #0b1118);
}

.learn-workspace-explorer {
  min-width: 0;
  overflow: auto;
  border-right: 1px solid var(--line-soft);
  background: var(--a1-sw-surface, #0f151d);
}

.learn-workspace-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--a1-sw-surface, #111923);
}

.learn-workspace-panel-toggle {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 8px;
  min-width: 0;
  min-height: 30px;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.learn-workspace-panel-toggle > span:first-child {
  flex: 0 0 auto;
  color: var(--cyan);
  font-size: 13px;
  transition: transform 140ms ease;
}

.learn-workspace-shell.collapsed {
  min-height: 0;
}

.learn-workspace-shell.collapsed .learn-workspace-panel-toggle > span:first-child {
  transform: rotate(-90deg);
}

/* Now a single line: the folder the toolbar buttons act on, or nothing at the
   workspace root. */
.learn-workspace-location {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-workspace-toolbar strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.learn-workspace-actions {
  display: inline-flex;
  gap: 4px;
  flex: 0 0 auto;
}

.learn-workspace-actions button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.learn-workspace-panel-toggle:hover,
.learn-workspace-panel-toggle:focus-visible,
.learn-workspace-actions button:hover,
.learn-workspace-actions button:focus-visible {
  border-color: rgba(53, 212, 255, 0.4);
  color: var(--text);
  background: rgba(53, 212, 255, 0.08);
  outline: none;
}

.learn-workspace-heading {
  align-items: center;
  flex-wrap: nowrap;
}

.learn-workspace-heading h3 {
  flex: 0 0 auto;
}

.learn-workspace-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}

.learn-workspace-header-actions button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
}

.learn-workspace-header-actions button:hover,
.learn-workspace-header-actions button:focus-visible {
  border-color: rgba(53, 212, 255, 0.4);
  color: var(--text);
  background: rgba(53, 212, 255, 0.08);
  outline: none;
}

.learn-workspace-header-actions button:disabled {
  opacity: 0.45;
  cursor: wait;
}

.learn-workspace-header-actions span {
  overflow: visible;
}

.learn-workspace-header-toggle > span {
  transition: transform 140ms ease;
}

.learn-workspace-header-toggle[aria-expanded="false"] > span {
  transform: rotate(-90deg);
}

.learn-workspace-folder-plus-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 15px;
}

.learn-workspace-folder-plus-icon::before {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 15px;
  height: 10px;
  border: 1.6px solid currentColor;
  border-radius: 3px;
  background: rgba(53, 212, 255, 0.08);
}

.learn-workspace-folder-plus-icon::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 2px;
  width: 8px;
  height: 5px;
  border: 1.6px solid currentColor;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}

.learn-workspace-folder-plus-icon > span {
  position: absolute;
  top: -3px;
  right: -2px;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(53, 212, 255, 0.65);
  border-radius: 999px;
  background: var(--a1-sw-surface, #111923);
}

.learn-workspace-folder-plus-icon > span::before,
.learn-workspace-folder-plus-icon > span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.learn-workspace-folder-plus-icon > span::before {
  width: 6px;
  height: 1.5px;
}

.learn-workspace-folder-plus-icon > span::after {
  width: 1.5px;
  height: 6px;
}

.learn-workspace-create-form {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(53, 212, 255, 0.05);
}

.learn-workspace-create-form label {
  display: grid;
  gap: 5px;
}

.learn-workspace-create-form label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.learn-workspace-create-form input {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 8px 9px;
  color: var(--text);
  background: var(--a1-sw-surface, #0b1118);
  font-size: 12px;
}

.learn-workspace-create-form div {
  display: flex;
  gap: 8px;
}

.learn-workspace-tree-row.learn-workspace-create-row {
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  padding-right: 6px;
  background: rgba(53, 212, 255, 0.08);
}

.learn-workspace-create-row .learn-workspace-create-icon {
  color: var(--cyan);
  font-size: 12px;
  text-align: center;
}

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

.learn-workspace-inline-create input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 6px 8px;
  color: var(--text);
  background: var(--a1-sw-surface, #0b1118);
  font-size: 12px;
}

.learn-workspace-create-confirm,
.learn-workspace-create-cancel {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.learn-workspace-create-confirm {
  color: var(--cyan);
}

.learn-workspace-create-cancel {
  color: var(--muted);
}

.learn-workspace-create-confirm:hover,
.learn-workspace-create-confirm:focus-visible {
  border-color: rgba(53, 212, 255, 0.4);
  background: rgba(53, 212, 255, 0.1);
  outline: none;
}

.learn-workspace-create-cancel:hover,
.learn-workspace-create-cancel:focus-visible {
  border-color: var(--line-soft);
  background: rgba(148, 163, 184, 0.12);
  outline: none;
}

.learn-workspace-tree {
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 0;
  padding: 8px;
}

.learn-workspace-tree > .muted {
  margin: 0;
  padding: 12px;
}

.learn-workspace-reference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
  min-width: 0;
}

.learn-workspace-snippet-panel {
  min-width: 0;
  overflow: hidden;
}

.learn-workspace-snippet-header {
  align-items: center;
  padding: 9px 10px;
}

.learn-workspace-snippet-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.learn-workspace-snippet-header .row-meta {
  display: none;
}

.learn-workspace-snippet-toggle {
  min-width: 0;
  gap: 7px;
}

.learn-workspace-snippet-toggle h3 {
  margin: 0;
}

.learn-workspace-snippet-toggle small {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border: 1px solid rgba(53, 212, 255, 0.34);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.08);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.learn-workspace-snippet-add {
  flex: 0 0 auto;
  min-width: 30px;
  width: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
}

.learn-workspace-snippet-toggle span {
  color: var(--cyan);
  transition: transform 140ms ease;
}

.learn-workspace-snippet-panel.collapsed .learn-workspace-snippet-toggle span {
  transform: rotate(-90deg);
}

.learn-workspace-snippet-list {
  min-width: 0;
  max-height: 300px;
  overflow-y: auto;
  gap: 3px;
  padding: 6px 8px 9px;
}

.learn-workspace-snippet-list > .muted {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.learn-answer-prompt-card.learn-workspace-snippet-card {
  grid-template-columns: 1fr; /* stack: title row → action menu → detail */
  min-width: 0;
  gap: 2px;
  padding: 2px 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
}

.learn-workspace-snippet-title-button {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 34px;
  padding: 0 7px;
  border-radius: 7px;
}

.learn-workspace-snippet-title-button:hover,
.learn-workspace-snippet-title-button:focus-visible {
  background: rgba(53, 212, 255, 0.06);
}

.learn-answer-prompt-title-button .learn-workspace-snippet-title-copy {
  display: grid;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.learn-workspace-snippet-title-copy strong,
.learn-workspace-snippet-title-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-workspace-snippet-title-copy strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.learn-workspace-snippet-title-copy small {
  display: none;
}

.learn-workspace-snippet-card-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}

.learn-workspace-snippet-card-actions .compact-action-button {
  min-width: 0;
  min-height: 30px;
  padding: 0 8px;
  white-space: nowrap;
}

.learn-workspace-snippet-menu-button {
  width: 30px;
  min-width: 30px;
  padding: 0;
  color: var(--muted);
  font-size: 16px;
  letter-spacing: 1px;
}

.learn-workspace-snippet-menu-button:hover,
.learn-workspace-snippet-menu-button:focus-visible,
.learn-workspace-snippet-menu-button[aria-expanded="true"] {
  color: var(--cyan);
  border-color: rgba(53, 212, 255, 0.38);
  background: rgba(53, 212, 255, 0.1);
}

.learn-workspace-snippet-action-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
  min-width: 0;
  margin: 3px 4px 4px;
  padding: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
}

.learn-workspace-snippet-action-menu .compact-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: rgba(127, 127, 127, 0.05);
  font-size: 12px;
  font-weight: 700;
}

.learn-workspace-snippet-action-menu .compact-action-button:hover,
.learn-workspace-snippet-action-menu .compact-action-button:focus-visible {
  background: rgba(53, 212, 255, 0.1);
  border-color: rgba(53, 212, 255, 0.32);
}

.learn-workspace-snippet-default-button {
  color: var(--cyan);
}

.learn-workspace-snippet-action-menu .learn-answer-prompt-delete {
  color: #ffb8c8;
}

.learn-workspace-snippet-action-menu .learn-answer-prompt-delete:hover,
.learn-workspace-snippet-action-menu .learn-answer-prompt-delete:focus-visible {
  border-color: rgba(255, 107, 122, 0.42);
  background: rgba(255, 107, 122, 0.1);
}

.learn-workspace-snippet-detail {
  max-height: 220px;
}

.learn-workspace-snippet-help {
  margin: -4px 0 0;
}

.learn-workspace-default-course-fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.learn-workspace-default-course-fieldset > span {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}

.learn-workspace-default-course-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 6px;
}

.learn-workspace-default-course-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  font-size: 0.78rem;
  font-weight: 700;
}

.learn-workspace-default-course-option input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--cyan);
}

.learn-workspace-default-course-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.learn-workspace-snippet-modal {
  width: min(560px, calc(100vw - 48px));
}

.learn-workspace-snippet-default-modal {
  width: min(460px, calc(100vw - 48px));
}

.learn-workspace-snippet-modal .panel-header.homework-header {
  min-height: 0;
  padding: 12px 14px;
}

.learn-workspace-snippet-modal .panel-header h3 {
  font-size: 1rem;
}

.learn-workspace-snippet-modal .learn-answer-prompt-modal-form {
  gap: 10px;
  padding: 14px;
}

.learn-workspace-snippet-modal .learn-answer-prompt-modal-form input {
  min-height: 38px;
  font-size: 14px;
}

.learn-workspace-snippet-edit-modal .learn-answer-prompt-modal-form textarea {
  height: min(240px, 34vh);
  min-height: 140px;
}

.learn-workspace-snippet-default-modal .homework-upload-actions {
  margin-top: 0;
}

.learn-workspace-tree-node {
  display: grid;
}

.learn-workspace-tree-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding-left: var(--workspace-indent, 8px);
  border-radius: 7px;
}

.learn-workspace-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

.learn-workspace-tree-row:hover,
.learn-workspace-tree-row.selected {
  background: rgba(53, 212, 255, 0.1);
}

.learn-workspace-tree-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  min-width: 0;
  padding: 0 4px;
  border: 0;
  color: var(--muted);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.learn-workspace-tree-item:hover,
.learn-workspace-tree-item:focus-visible {
  color: var(--text);
  outline: none;
}

.learn-workspace-tree-item > span:first-child {
  color: var(--cyan);
  font-size: 12px;
  text-align: center;
}

.learn-workspace-tree-item > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: inherit;
}

.learn-workspace-tree-item strong {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-workspace-tree-item small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-workspace-delete-button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #ffb8c8;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.learn-workspace-delete-button:hover,
.learn-workspace-delete-button:focus-visible {
  border-color: rgba(255, 107, 122, 0.42);
  background: rgba(255, 107, 122, 0.1);
  outline: none;
}

.learn-workspace-answer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(73, 209, 125, 0.36);
  border-radius: 999px;
  color: #b9f8cf;
  background: rgba(73, 209, 125, 0.1);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.learn-workspace-answer-button:hover,
.learn-workspace-answer-button:focus-visible {
  border-color: rgba(73, 209, 125, 0.68);
  background: rgba(73, 209, 125, 0.16);
  outline: none;
}

.learn-workspace-answer-button-preview {
  min-width: 0;
  height: 32px;
  padding: 0 12px;
}

.learn-workspace-refine-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(245, 184, 75, 0.42);
  border-radius: 999px;
  color: var(--amber);
  background: rgba(245, 184, 75, 0.1);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.learn-workspace-refine-button:hover,
.learn-workspace-refine-button:focus-visible {
  border-color: rgba(245, 184, 75, 0.72);
  background: rgba(245, 184, 75, 0.16);
  outline: none;
}

.learn-workspace-refine-button.running {
  color: var(--text);
}

.learn-workspace-refine-button-preview {
  min-width: 0;
  height: 32px;
  padding: 0 12px;
}

.learn-workspace-do-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(53, 212, 255, 0.36);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.08);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
}

.learn-workspace-do-button:hover,
.learn-workspace-do-button:focus-visible {
  border-color: rgba(53, 212, 255, 0.68);
  background: rgba(53, 212, 255, 0.14);
  outline: none;
}

.learn-workspace-do-button.running {
  color: var(--text);
}

.learn-workspace-do-button.done {
  border-color: rgba(73, 209, 125, 0.42);
  color: var(--green);
  background: rgba(73, 209, 125, 0.08);
}

.learn-workspace-do-button.needs-action {
  border-color: rgba(245, 184, 75, 0.54);
  color: var(--amber);
  background: rgba(245, 184, 75, 0.1);
}

.learn-workspace-do-status-badge {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 20px;
  padding: 0 7px;
  border: 1px solid rgba(73, 209, 125, 0.45);
  border-radius: 999px;
  color: var(--green);
  background: rgba(73, 209, 125, 0.1);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.learn-workspace-do-status-badge:hover,
.learn-workspace-do-status-badge:focus-visible {
  border-color: rgba(73, 209, 125, 0.72);
  background: rgba(73, 209, 125, 0.16);
  outline: none;
}

.learn-workspace-do-status-badge.error,
.learn-workspace-do-status-badge.stopped {
  border-color: rgba(255, 107, 122, 0.44);
  color: #ffb8c8;
  background: rgba(255, 107, 122, 0.1);
}

.learn-workspace-do-status-badge.stopping,
.learn-workspace-do-status-badge.check {
  border-color: rgba(245, 184, 75, 0.48);
  color: var(--amber);
  background: rgba(245, 184, 75, 0.1);
}

.learn-workspace-do-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.learn-workspace-preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.learn-workspace-main {
  min-width: 0;
  overflow: auto;
  background:
    linear-gradient(180deg, rgba(53, 212, 255, 0.04), transparent 160px),
    #0b1118;
}

.learn-workspace-empty,
.learn-workspace-preview {
  display: grid;
  gap: 14px;
  margin: 16px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface, rgba(15, 21, 32, 0.82));
}

.learn-workspace-empty strong,
.learn-workspace-preview h4 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.learn-workspace-empty span {
  color: var(--muted);
  font-size: 13px;
}

.learn-workspace-preview-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.learn-workspace-preview-header > div {
  min-width: 0;
}

.learn-workspace-preview-header h4,
.learn-workspace-preview-header p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-workspace-preview-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.learn-workspace-preview-meta span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--muted);
  background: var(--a1-sw-surface-2, rgba(8, 12, 18, 0.52));
  font-size: 12px;
}

.learn-workspace-preview-meta strong {
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-homework-visual-shell,
.learn-homework-visual-empty {
  display: grid;
  gap: 12px;
}

.learn-homework-visual-controls {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.64));
}

.learn-homework-visual-controls label {
  display: grid;
  gap: 5px;
  width: min(100%, 320px);
}

.learn-homework-visual-controls label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.learn-homework-visual-controls select {
  width: 100%;
  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));
}

.learn-homework-source-notices {
  display: grid;
  gap: 8px;
}

.learn-homework-source-notices > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.64));
}

.learn-homework-source-notices > div > span:first-child {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-homework-course-map {
  display: grid;
  gap: 12px;
}

.learn-homework-course-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(15, 21, 32, 0.72));
}

.learn-homework-course-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.78));
}

.learn-homework-course-toggle {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 50px;
  padding: 10px;
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.learn-homework-course-toggle:hover,
.learn-homework-course-toggle:focus-visible {
  background: rgba(53, 212, 255, 0.08);
  outline: none;
}

.learn-homework-course-hide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  color: var(--muted);
  background: rgba(127, 127, 127, 0.05);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.learn-homework-course-hide:hover,
.learn-homework-course-hide:focus-visible {
  border-color: rgba(53, 212, 255, 0.42);
  color: var(--text);
  background: rgba(53, 212, 255, 0.1);
  outline: none;
}

.learn-homework-course-node {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(53, 212, 255, 0.76);
  border-radius: 50%;
  color: #9cecff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 0 0 4px rgba(53, 212, 255, 0.06);
}

.learn-homework-course-header strong,
.learn-homework-course-header em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-homework-course-header strong {
  font-size: 15px;
}

.learn-homework-course-header em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.learn-homework-course-todo-badge {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-right: 6px;
  border: 0;
  border-radius: 999px;
  color: #101723;
  background: var(--amber-pill);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.learn-homework-assignment-list {
  display: grid;
  gap: 7px;
  padding: 10px 10px 10px 36px;
  border-top: 1px solid rgba(154, 168, 184, 0.12);
  background: var(--a1-sw-surface-3, rgba(5, 9, 15, 0.24));
}

.learn-homework-course-card.collapsed .learn-homework-assignment-list {
  display: none;
}

.learn-homework-hidden-panel {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.56));
}

.learn-homework-hidden-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}

.learn-homework-hidden-panel > summary::-webkit-details-marker {
  display: none;
}

.learn-homework-hidden-panel > div {
  display: grid;
  border-top: 1px solid var(--line-soft);
}

.learn-homework-hidden-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
}

.learn-homework-hidden-row:last-child {
  border-bottom: 0;
}

.learn-homework-hidden-row span,
.learn-homework-hidden-row strong,
.learn-homework-hidden-row em {
  min-width: 0;
}

.learn-homework-hidden-row strong,
.learn-homework-hidden-row em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-homework-hidden-row strong {
  color: var(--text);
  font-size: 13px;
}

.learn-homework-hidden-row em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.learn-homework-assignment-card {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px;
  border: 1px solid rgba(154, 168, 184, 0.2);
  border-radius: 8px;
  background: var(--a1-sw-surface, rgba(12, 18, 28, 0.82));
}

.learn-homework-assignment-card::before {
  position: absolute;
  left: -22px;
  top: -8px;
  bottom: -8px;
  width: 1px;
  background: var(--line-soft);
  content: "";
}

/* The same "›" that leads a row on Notification and on Grades, in the slot the
   status dot used to hold — the status is already spelled out in words. */
.learn-homework-assignment-chevron {
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}

.learn-homework-assignment-card.graded .learn-homework-assignment-chevron {
  color: var(--green);
}

.learn-homework-assignment-card.submitted .learn-homework-assignment-chevron {
  color: var(--cyan);
}

.learn-homework-assignment-card.urgent .learn-homework-assignment-chevron {
  color: var(--red);
}

.learn-homework-assignment-card strong,
.learn-homework-assignment-card span {
  min-width: 0;
}

.learn-homework-assignment-card strong,
.learn-homework-assignment-card div > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-homework-assignment-card strong {
  color: var(--text);
  font-size: 13px;
}

.learn-homework-assignment-card strong a {
  color: inherit;
  text-decoration: none;
}

.learn-homework-assignment-card strong a:hover,
.learn-homework-assignment-card strong a:focus-visible {
  color: #d8f7ff;
  text-decoration: underline;
  text-decoration-color: rgba(216, 247, 255, 0.48);
  text-underline-offset: 3px;
  outline: none;
}

.learn-homework-assignment-card div > span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.learn-homework-assignment-card .status-pill {
  border-color: rgba(154, 168, 184, 0.24);
  color: var(--a1-sw-text, #d8e4f2);
  background: var(--a1-sw-surface, rgba(30, 41, 59, 0.92));
}

.learn-homework-assignment-card .status-pill.amber {
  border-color: rgba(248, 201, 104, 0.72);
  color: #201704;
  background: rgba(248, 201, 104, 0.92);
}

.learn-homework-assignment-card .status-pill.red {
  border-color: rgba(255, 107, 122, 0.7);
  color: #fff7f8;
  background: rgba(255, 107, 122, 0.82);
}

.learn-homework-assignment-card.graded .status-pill {
  border-color: rgba(73, 209, 125, 0.6);
  color: #062113;
  background: rgba(73, 209, 125, 0.88);
}

.learn-homework-assignment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.learn-homework-assignment-card .learn-homework-import-button {
  min-width: 72px;
  border-color: rgba(154, 168, 184, 0.26);
  color: #d8e4f2;
  background: rgba(255, 255, 255, 0.055);
}

.learn-homework-assignment-card .learn-homework-import-do-button {
  min-width: 94px;
  border-color: rgba(56, 189, 248, 0.72);
  color: #04111d;
  background: linear-gradient(135deg, #38bdf8, #60a5fa);
  box-shadow: 0 8px 20px rgba(56, 189, 248, 0.18);
}

.learn-homework-assignment-actions .learn-homework-import-button {
  margin-left: 0;
}

.learn-homework-assignment-card .learn-homework-import-button:hover,
.learn-homework-assignment-card .learn-homework-import-button:focus-visible {
  border-color: rgba(216, 247, 255, 0.44);
  color: #f5fbff;
  background: rgba(216, 247, 255, 0.1);
}

.learn-homework-assignment-card .learn-homework-import-do-button:hover,
.learn-homework-assignment-card .learn-homework-import-do-button:focus-visible {
  border-color: rgba(125, 211, 252, 0.92);
  color: #03101b;
  background: linear-gradient(135deg, #7dd3fc, #60a5fa);
}

.learn-answer-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.homework-recommendation-panel {
  grid-column: 1 / -1;
}

.homework-gradescope-panel {
  grid-column: 1 / -1;
}

.homework-gradescope-plans {
  border-top: 1px solid var(--line-soft);
}

.homework-gradescope-list {
  display: grid;
  gap: 10px;
}

.homework-gradescope-detail {
  grid-column: 1 / -1;
}

body.homework-gradescope-modal-open {
  overflow: hidden;
}

.homework-gradescope-modal-host.hidden {
  display: none;
}

.homework-gradescope-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 290;
  display: grid;
  place-items: center;
  width: 100dvw;
  height: var(--app-live-viewport-height, 100dvh);
  padding: 18px;
  background: var(--a1-sw-scrim, rgba(3, 7, 13, 0.72));
  backdrop-filter: blur(5px);
}

.homework-gradescope-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1120px, calc(100dvw - 28px));
  height: min(820px, calc(var(--app-live-viewport-height, 100dvh) - 28px));
  max-width: 100dvw;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #cfd8e3;
  border-radius: 10px;
  color: #1f2937;
  background: #f6f8fb;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.5);
}

.homework-gradescope-modal-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-width: 0;
  min-height: 58px;
  padding: 10px 14px;
  border-bottom: 1px solid #d7dee8;
  background: #ffffff;
}

.homework-gradescope-modal-nav > div {
  min-width: 0;
}

.homework-gradescope-brand {
  color: #2563eb;
  font-size: 16px;
  font-weight: 900;
}

.homework-gradescope-modal-nav strong,
.homework-gradescope-modal-nav span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homework-gradescope-modal-nav strong {
  color: #111827;
  font-size: 15px;
}

.homework-gradescope-modal-nav div > span {
  color: #64748b;
  font-size: 12px;
}

.homework-gradescope-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.homework-gradescope-modal-button,
.homework-gradescope-modal-close {
  display: grid;
  place-items: center;
  min-height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  color: #1f2937;
  background: #ffffff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.homework-gradescope-modal-button {
  padding: 0 11px;
}

.homework-gradescope-modal-close {
  width: 34px;
  min-width: 34px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
}

.homework-gradescope-modal-button:hover,
.homework-gradescope-modal-button:focus-visible,
.homework-gradescope-modal-close:hover,
.homework-gradescope-modal-close:focus-visible {
  border-color: #2563eb;
  outline: none;
  color: #1d4ed8;
}

.homework-gradescope-modal-body {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
}

.homework-gradescope-modal-body.single {
  grid-template-columns: 1fr;
}

.homework-gradescope-modal-aside {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  min-width: 0;
  padding: 18px 14px;
  color: var(--a1-sw-text, #e5eefb);
  background: var(--a1-sw-surface, #172033);
}

.homework-gradescope-modal-aside > strong {
  color: var(--a1-sw-text, #ffffff);
  font-size: 13px;
  text-transform: uppercase;
}

.homework-gradescope-overall-score {
  color: var(--a1-sw-text, #ffffff);
  font-size: 28px;
  font-weight: 900;
}

.homework-gradescope-score-breakdown {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.homework-gradescope-score-breakdown span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: var(--muted, #cbd5e1);
  font-size: 12px;
}

.homework-gradescope-score-breakdown b {
  color: var(--a1-sw-text, #ffffff);
}

.homework-gradescope-question-nav {
  display: grid;
  min-width: 0;
  max-width: 100%;
  max-height: 320px;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
}

.homework-gradescope-question-nav button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 0;
  color: var(--text, #dbeafe);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.homework-gradescope-question-nav button:hover,
.homework-gradescope-question-nav button:focus-visible {
  background: rgba(148, 163, 184, 0.14);
  outline: none;
}

.homework-gradescope-question-nav button:last-child {
  border-bottom: 0;
}

.homework-gradescope-question-nav b {
  min-width: max-content;
  color: var(--a1-sw-text, #ffffff);
  font-size: 11px;
  white-space: nowrap;
}

.homework-gradescope-modal-aside > a {
  color: #93c5fd;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.homework-gradescope-submission-pane {
  min-height: 0;
  min-width: 0;
  overflow: auto;
  padding: 14px;
}

.homework-gradescope-modal-message {
  display: grid;
  place-items: center;
  min-height: 320px;
  color: #475569;
}

.homework-gradescope-modal .homework-gradescope-detail-controls {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  background: #ffffff;
}

.homework-gradescope-modal .homework-inline-toggle {
  color: #334155;
}

.homework-gradescope-modal .homework-gradescope-question {
  border-color: #d7dee8;
  color: #1f2937;
  background: #ffffff;
}

.homework-gradescope-modal .homework-gradescope-question-head strong {
  color: #111827;
}

.homework-gradescope-modal .homework-gradescope-question-head div > span,
.homework-gradescope-modal .homework-gradescope-regrade-note {
  color: #64748b;
}

.homework-gradescope-answer {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  padding: 10px;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: #f8fafc;
}

.homework-gradescope-answer.empty {
  background: #f1f5f9;
}

.homework-gradescope-answer > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.homework-gradescope-answer strong {
  color: #0f172a;
  font-size: 12px;
}

.homework-gradescope-answer span {
  min-width: 0;
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homework-gradescope-answer-images {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.homework-gradescope-answer-images figure {
  display: grid;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
}

.homework-gradescope-answer-images img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 560px;
  object-fit: contain;
  background: #f8fafc;
}

.homework-gradescope-answer-images figcaption {
  overflow: hidden;
  padding: 0 9px 8px;
  color: #64748b;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homework-gradescope-answer pre {
  max-height: 240px;
  min-width: 0;
  margin: 0;
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  color: #111827;
  background: #ffffff;
  padding: 10px;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.homework-gradescope-answer ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
}

.homework-gradescope-answer a {
  color: #1d4ed8;
  font-weight: 800;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.homework-gradescope-question-content {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 12px;
  min-width: 0;
}

.homework-gradescope-grading {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: #ffffff;
}

.homework-gradescope-grading.empty {
  background: #f8fafc;
}

.homework-gradescope-grading-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.homework-gradescope-grading-head span {
  color: #475569;
  font-size: 11px;
}

.homework-gradescope-rubric-list,
.homework-gradescope-comment-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.homework-gradescope-rubric-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #f8fafc;
}

.homework-gradescope-rubric-item > span {
  display: grid;
  place-items: center;
  min-height: 32px;
  border-radius: 6px;
  color: #0f172a;
  background: #e0f2fe;
  font-size: 12px;
  font-weight: 900;
}

.homework-gradescope-rubric-item p,
.homework-gradescope-comment-list p {
  display: grid;
  gap: 3px;
  min-width: 0;
  margin: 0;
  color: #334155;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.homework-gradescope-rubric-item strong,
.homework-gradescope-comment-list > strong {
  color: #0f172a;
  font-size: 12px;
}

.homework-gradescope-rubric-item em,
.homework-gradescope-rubric-item small,
.homework-gradescope-comment-list small {
  color: #64748b;
  font-style: normal;
  font-size: 11px;
}

.homework-gradescope-comment-list p {
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #f8fafc;
}

.homework-gradescope-comment-list b {
  color: #1d4ed8;
  font-size: 11px;
}

.homework-grade-detail-button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-color: rgba(53, 212, 255, 0.45);
  border-radius: 50%;
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.1);
  line-height: 1;
}

.homework-grade-detail-button:hover,
.homework-grade-detail-button:focus-visible {
  border-color: rgba(53, 212, 255, 0.82);
  outline: none;
  background: rgba(53, 212, 255, 0.18);
}

.homework-gradescope-detail-body {
  display: grid;
  gap: 10px;
}

.homework-gradescope-detail-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.homework-inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
}

.homework-inline-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--cyan);
}

.homework-gradescope-question-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.homework-gradescope-question {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.74));
}

.homework-gradescope-question.correct {
  border-left-color: var(--green);
}

.homework-gradescope-question.partial {
  border-left-color: var(--amber);
}

.homework-gradescope-question.wrong {
  border-left-color: var(--red);
}

.homework-gradescope-question.unknown {
  border-left-color: var(--muted);
}

.homework-gradescope-question-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.homework-gradescope-question-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.homework-gradescope-question-head strong,
.homework-gradescope-question-head span {
  display: block;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
}

.homework-gradescope-question-head strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.homework-gradescope-question-head div > span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
}

.homework-gradescope-regrade-form {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

.homework-gradescope-regrade-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.homework-gradescope-regrade-form textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--a1-sw-surface, #0f1520);
  padding: 9px 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  outline: none;
  text-transform: none;
}

.homework-gradescope-regrade-form textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(53, 212, 255, 0.15);
}

.homework-gradescope-regrade-form .primary-button {
  min-height: 36px;
}

.homework-gradescope-regrade-note {
  margin: 0;
  font-size: 11px;
}

/* ===== Gradescope detail — phone layout ==================================
   On phones the JS renders a dedicated structure (score summary card + one
   collapsed accordion row per question) and marks the dialog with .mobile.
   Desktop keeps the two-pane markup and never gets these rules. */
@media (max-width: 980px) {
  .homework-gradescope-modal-backdrop:has(> .homework-gradescope-modal.mobile) {
    padding: 0;
  }

  .homework-gradescope-modal.mobile {
    width: 100dvw;
    max-width: 100dvw;
    height: var(--app-live-viewport-height, 100dvh);
    max-height: var(--app-live-viewport-height, 100dvh);
    border: 0;
    border-radius: 0;
  }

  .homework-gradescope-modal.mobile .homework-gradescope-modal-nav {
    gap: 10px;
    min-height: 50px;
    padding: 8px 10px 8px 12px;
  }

  .homework-gradescope-modal.mobile .homework-gradescope-brand {
    font-size: 13px;
  }

  .homework-gradescope-modal.mobile .homework-gradescope-submission-pane {
    padding: 12px 12px calc(16px + var(--a1-safe-bottom, 0px));
  }

  .homework-gradescope-mobile-summary {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #d7dee8;
    border-radius: 12px;
    background: #ffffff;
  }

  .homework-gradescope-mobile-score {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
  }

  .homework-gradescope-mobile-score span {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .homework-gradescope-mobile-score strong {
    color: #111827;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
  }

  .homework-gradescope-mobile-counts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .homework-gradescope-mobile-counts span {
    display: grid;
    gap: 2px;
    justify-items: center;
    padding: 8px 4px;
    border-radius: 9px;
    color: #475569;
    background: #f1f5f9;
    font-size: 11px;
    font-weight: 800;
  }

  .homework-gradescope-mobile-counts b {
    font-size: 16px;
    line-height: 1;
  }

  .homework-gradescope-mobile-counts .correct {
    color: #166534;
    background: #dcfce7;
  }

  .homework-gradescope-mobile-counts .partial {
    color: #92400e;
    background: #fef3c7;
  }

  .homework-gradescope-mobile-counts .wrong {
    color: #991b1b;
    background: #fee2e2;
  }

  .homework-gradescope-mobile-open {
    justify-self: start;
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
  }

  .homework-gradescope-question.mobile {
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
  }

  .homework-gradescope-question-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 14px;
    gap: 10px;
    align-items: center;
    width: 100%;
    min-height: 52px;
    padding: 10px 12px;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .homework-gradescope-question-summary-text {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .homework-gradescope-question-summary-text strong {
    overflow: hidden;
    color: var(--text);
    font-size: 14px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .homework-gradescope-question-summary-text span {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .homework-gradescope-question-summary .status-pill {
    white-space: nowrap;
  }

  .homework-gradescope-question-caret {
    width: 8px;
    height: 8px;
    justify-self: center;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
  }

  .homework-gradescope-question.expanded .homework-gradescope-question-caret {
    transform: rotate(225deg);
  }

  .homework-gradescope-question-details {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--line-soft);
  }

  .homework-gradescope-modal.mobile .homework-gradescope-answer-images {
    grid-template-columns: 1fr;
  }

  .homework-gradescope-regrade-launch {
    display: grid;
  }

  .homework-gradescope-regrade-launch .ghost-button {
    min-height: 42px;
  }

  .homework-gradescope-modal.mobile .homework-upload-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .homework-gradescope-modal.mobile .homework-upload-actions .primary-button,
  .homework-gradescope-modal.mobile .homework-upload-actions .ghost-button {
    flex: 1 1 auto;
    min-height: 42px;
  }

  .homework-gradescope-modal.mobile .homework-upload-actions .form-message {
    flex: 1 1 100%;
  }

  .homework-gradescope-modal.mobile .homework-gradescope-regrade-form textarea {
    font-size: 16px;
  }
}

/* ===== Gradescope detail — self-contained palette =========================
   The dialog chrome deliberately mimics Gradescope's light UI, but its
   content mixed app theme variables in: in dark mode the muted/label text
   flipped to light gray on the light chrome (unreadable) and surfaces
   flipped dark. Everything inside the dialog now uses one explicit light
   palette, independent of the app theme. */
/* The mobile dialog machinery paints sticky dialog headers with the app
   theme's --panel; inside this light dialog that turns black in dark mode
   with the hardcoded dark title on top of it. Pin it white. The machinery's
   top-level-dialog header rule reaches (0,6,0) via its :not() argument, so
   the repeated class here is deliberate: it lifts this to (0,7,0). */
.homework-gradescope-modal[role="dialog"][aria-modal="true"] .homework-gradescope-modal-nav.homework-gradescope-modal-nav.homework-gradescope-modal-nav.homework-gradescope-modal-nav {
  background-color: #ffffff !important;
}

.homework-gradescope-modal .muted,
.homework-gradescope-modal .homework-inline-toggle,
.homework-gradescope-modal .form-message {
  color: #64748b;
}

/* Theme-styled shared buttons flip dark in dark mode; keep them light here.
   [role] qualifiers beat the a1 skin's later-loaded button styling. */
.homework-gradescope-modal[role="dialog"][aria-modal="true"] .ghost-button {
  border: 1px solid #cbd5e1;
  color: #1f2937;
  background: #ffffff;
}

.homework-gradescope-modal[role="dialog"][aria-modal="true"] .ghost-button:hover,
.homework-gradescope-modal[role="dialog"][aria-modal="true"] .ghost-button:focus-visible {
  border-color: #2563eb;
  color: #1d4ed8;
  outline: none;
}

.homework-gradescope-modal .homework-inline-toggle input {
  accent-color: #2563eb;
}

.homework-gradescope-modal .homework-gradescope-question {
  border-color: #d7dee8;
  background: #ffffff;
}

.homework-gradescope-modal .homework-gradescope-question.correct { border-left-color: #16a34a; }
.homework-gradescope-modal .homework-gradescope-question.partial { border-left-color: #d97706; }
.homework-gradescope-modal .homework-gradescope-question.wrong { border-left-color: #dc2626; }
.homework-gradescope-modal .homework-gradescope-question.unknown { border-left-color: #94a3b8; }

.homework-gradescope-modal .homework-gradescope-question-head strong,
.homework-gradescope-modal .homework-gradescope-question-summary-text strong,
.homework-gradescope-modal .homework-gradescope-grading-head strong,
.homework-gradescope-modal .homework-gradescope-grading-head span,
.homework-gradescope-modal .homework-gradescope-rubric-item strong,
.homework-gradescope-modal .homework-gradescope-comment-list > strong,
.homework-gradescope-modal .homework-gradescope-answer > button strong {
  color: #111827;
}

.homework-gradescope-modal .homework-gradescope-question-head div > span,
.homework-gradescope-modal .homework-gradescope-question-summary-text span,
.homework-gradescope-modal .homework-gradescope-regrade-note,
.homework-gradescope-modal .homework-gradescope-answer span,
.homework-gradescope-modal .homework-gradescope-answer-images figcaption,
.homework-gradescope-modal .homework-gradescope-rubric-item em,
.homework-gradescope-modal .homework-gradescope-rubric-item small,
.homework-gradescope-modal .homework-gradescope-comment-list small {
  color: #64748b;
}

.homework-gradescope-modal .homework-gradescope-question-caret {
  border-color: #94a3b8;
}

.homework-gradescope-modal .homework-gradescope-question-details {
  border-top-color: #e2e8f0;
}

.homework-gradescope-modal .homework-gradescope-answer,
.homework-gradescope-modal .homework-gradescope-grading {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #1f2937;
}

.homework-gradescope-modal .homework-gradescope-rubric-item,
.homework-gradescope-modal .homework-gradescope-comment-list p {
  border-color: #e2e8f0;
  background: #ffffff;
  color: #1f2937;
}

.homework-gradescope-modal .homework-gradescope-rubric-item > span {
  color: #1d4ed8;
  background: #dbeafe;
}

.homework-gradescope-modal .homework-gradescope-comment-list b {
  color: #334155;
}

.homework-gradescope-modal .homework-gradescope-answer pre {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #1f2937;
}

.homework-gradescope-modal .homework-gradescope-answer a {
  color: #2563eb;
}

.homework-gradescope-modal .homework-gradescope-answer-images figure {
  border-color: #e2e8f0;
  background: #ffffff;
}

.homework-gradescope-modal .homework-gradescope-regrade-form {
  border-top-color: #e2e8f0;
}

.homework-gradescope-modal .homework-gradescope-regrade-form label {
  color: #64748b;
}

.homework-gradescope-modal .homework-gradescope-regrade-form textarea {
  border: 1px solid #cbd5e1;
  color: #111827;
  background: #ffffff;
}

.homework-gradescope-modal .homework-gradescope-regrade-form textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.homework-gradescope-modal .status-pill {
  border: 0;
  color: #166534;
  background: #dcfce7;
}

.homework-gradescope-modal .status-pill.amber {
  color: #92400e;
  background: #fef3c7;
}

.homework-gradescope-modal .status-pill.red {
  color: #991b1b;
  background: #fee2e2;
}

/* The aside keeps its dark contrast panel, with explicit colors so the app
   theme cannot flip its text against its own surface. */
.homework-gradescope-modal-aside {
  color: #e5eefb;
  background: #172033;
}

.homework-gradescope-modal-aside .homework-gradescope-question-nav button {
  color: #dbeafe;
}

.homework-gradescope-modal-aside .homework-gradescope-question-nav b,
.homework-gradescope-modal-aside .homework-gradescope-score-breakdown,
.homework-gradescope-modal-aside .homework-gradescope-score-breakdown b,
.homework-gradescope-modal-aside > strong,
.homework-gradescope-modal-aside .homework-gradescope-overall-score {
  color: #ffffff;
}

/* "View answer" — a small inline action that lazy-opens the captured answer. */
.homework-gradescope-answer-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.homework-gradescope-answer-toggle strong {
  font-size: 12px;
}

.homework-gradescope-answer-toggle span {
  font-size: 11px;
}

.homework-gradescope-answer-toggle i {
  margin-left: auto;
  color: #2563eb;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.homework-upload-form {
  display: grid;
  gap: 12px;
}

.homework-upload-form input[type="file"] {
  min-height: 46px;
  padding: 10px 12px;
}

.homework-upload-form textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--a1-sw-surface, #0f1520);
  padding: 10px 12px;
  font: inherit;
  outline: none;
}

.homework-upload-form textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(53, 212, 255, 0.15);
}

.homework-upload-row,
.homework-upload-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.homework-upload-actions {
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
}

.homework-upload-actions .form-message {
  min-width: 0;
  margin: 0;
}

.learn-answer-source-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 4px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--a1-sw-surface-3, rgba(8, 12, 18, 0.46));
}

.learn-answer-action-modal-form .learn-answer-source-toggle label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin: 0;
  border-radius: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.learn-answer-action-modal-form .learn-answer-source-toggle label.active {
  color: var(--text);
  background: rgba(53, 212, 255, 0.14);
}

.learn-answer-action-modal-form .learn-answer-source-toggle input {
  position: absolute;
  width: 1px;
  min-height: 0;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.learn-answer-workspace-picked {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.learn-answer-workspace-picked strong {
  color: var(--cyan);
}

.homework-artifact-list {
  display: grid;
  gap: 10px;
}

.learn-answer-list {
  align-content: start;
  overflow: visible;
}

.learn-answer-upload-start {
  display: grid;
  gap: 10px;
}

.learn-answer-prompts-panel {
  grid-column: 1 / -1;
}

.learn-answer-prompts-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.homework-header.learn-answer-prompts-header {
  flex-direction: row;
  align-items: center;
}

.learn-answer-prompts-header > div {
  min-width: 0;
}

.learn-answer-prompts-header .learn-answer-add-button {
  flex: 0 0 auto;
  margin-left: auto;
}

.learn-answer-prompts-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
}

.learn-answer-prompts-toggle span {
  display: inline-block;
  color: var(--cyan);
  font-size: 13px;
  transition: transform 140ms ease;
}

.learn-answer-prompts-toggle h3 {
  margin: 0;
}

.learn-answer-prompts-panel.collapsed .learn-answer-prompts-toggle span {
  transform: rotate(-90deg);
}

.learn-answer-prompt-list {
  display: grid;
  gap: 1px;
}

.learn-answer-prompt-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.74));
}

.learn-answer-prompt-copy {
  min-width: 0;
}

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

.learn-answer-prompt-copy strong {
  color: var(--text);
  font-size: 13px;
}

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

.learn-answer-prompt-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.learn-answer-prompt-edit,
.learn-answer-prompt-delete {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  width: 30px;
  padding: 0;
}

.learn-answer-prompt-use {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  width: 30px;
  padding: 0;
}

.learn-answer-prompt-use.active {
  border-color: rgba(53, 212, 255, 0.65);
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.12);
  box-shadow: 0 0 0 2px rgba(53, 212, 255, 0.12);
}

.learn-answer-prompt-use span {
  display: block;
  width: 9px;
  height: 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.learn-answer-prompt-use.active span {
  background: currentColor;
}

.learn-answer-prompt-card-managed {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 8px;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
}
@media (hover: hover) {
  .learn-answer-prompt-card-managed:hover{
   background: rgba(127, 127, 127, 0.06); }
}

.learn-answer-prompt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.learn-answer-prompt-title-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.learn-answer-prompt-title-button strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-answer-prompt-title-button > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.learn-answer-prompt-title-button:hover strong,
.learn-answer-prompt-title-button:focus-visible strong {
  color: var(--cyan);
}

.learn-answer-prompt-title-button:focus-visible {
  outline: none;
}

.learn-answer-prompt-card-managed .learn-answer-prompt-edit {
  width: auto;
  min-width: 52px;
  padding: 0 10px;
}

.learn-answer-prompt-detail {
  max-height: 240px;
  min-width: 0;
  margin: 0;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--muted);
  background: var(--a1-sw-surface-2, rgba(6, 10, 16, 0.64));
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.learn-answer-prompt-modal-host,
.learn-answer-action-modal-host {
  position: fixed;
  inset: 0;
  z-index: 300;
}

.learn-answer-prompt-backdrop,
.learn-answer-action-backdrop {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100%;
  padding: 24px;
  overflow: auto;
  background: var(--a1-sw-scrim, rgba(2, 6, 12, 0.72));
  backdrop-filter: blur(10px);
}

.learn-answer-prompt-modal,
.learn-answer-action-modal {
  position: relative;
  display: grid;
  min-width: 0;
  width: min(920px, calc(100vw - 48px));
  max-height: min(86vh, 820px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.learn-answer-prompt-modal-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.learn-answer-action-modal > .panel-header {
  position: relative;
  padding-right: 54px;
}

.homework-header.learn-answer-prompt-modal-header {
  flex-direction: row;
  align-items: flex-start;
}

.learn-answer-prompt-modal-header > div:first-child {
  min-width: 0;
}

.learn-answer-prompt-modal-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.learn-answer-prompt-modal-icon {
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  font-size: 22px;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
}

.learn-answer-prompt-modal-icon:hover,
.learn-answer-prompt-modal-icon:focus-visible {
  outline: none;
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.08);
}

.learn-answer-action-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.learn-answer-action-modal > .panel-header > .learn-answer-action-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

.learn-answer-action-close:hover,
.learn-answer-action-close:focus-visible {
  outline: none;
  color: var(--text);
  border-color: var(--accent, #2563eb);
  background: rgba(37, 99, 235, 0.08);
}

.learn-answer-prompt-modal-form,
.learn-answer-action-modal-form {
  display: grid;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 18px;
}

.learn-answer-prompt-modal-form label,
.learn-answer-action-modal-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.learn-answer-prompt-modal-form input,
.learn-answer-prompt-modal-form textarea,
.learn-answer-action-modal-form input,
.learn-answer-action-modal-form select,
.learn-answer-action-modal-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--a1-sw-surface, #0f1520);
  outline: none;
}

.learn-answer-prompt-modal-form input,
.learn-answer-action-modal-form input,
.learn-answer-action-modal-form select {
  min-height: 44px;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 800;
}

.learn-answer-prompt-modal-form textarea,
.learn-answer-action-modal-form textarea {
  height: min(380px, 46vh);
  min-height: 220px;
  padding: 12px;
  resize: vertical;
  overflow: auto;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.learn-answer-prompt-modal-form input:focus,
.learn-answer-prompt-modal-form textarea:focus,
.learn-answer-action-modal-form input:focus,
.learn-answer-action-modal-form select:focus,
.learn-answer-action-modal-form textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(53, 212, 255, 0.15);
}

.learn-answer-action-modal {
  width: min(760px, calc(100vw - 48px));
}

.learn-answer-problem-modal {
  position: relative;
}

.learn-answer-problem-modal > .panel-header {
  padding-right: 54px;
}

.learn-answer-problem-modal .learn-answer-action-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

.learn-answer-action-modal-form textarea {
  height: min(180px, 28vh);
  min-height: 120px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
}

.learn-answer-edit-form .learn-answer-edit-save {
  display: flex;
  align-items: center;
  gap: 10px;
}

.learn-answer-edit-form .learn-answer-edit-save input {
  width: 18px;
  min-height: 18px;
  margin: 0;
}

.learn-answer-edit-form .learn-answer-edit-save span {
  font-size: 13px;
  line-height: 1.4;
}

.learn-answer-submit-form {
  gap: 12px;
}

.learn-answer-submit-summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(15, 23, 42, 0.72));
}

.learn-answer-submit-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(53, 212, 255, 0.34);
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.08);
  font-size: 20px;
  font-weight: 900;
}

.learn-answer-submit-summary div,
.learn-answer-submit-target .learn-answer-submit-main,
.learn-answer-submit-result,
.learn-answer-submit-pages {
  min-width: 0;
}

.learn-answer-submit-summary strong,
.learn-answer-submit-summary span,
.learn-answer-submit-target strong,
.learn-answer-submit-target small,
.learn-answer-submit-result span,
.learn-answer-submit-pages span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-answer-submit-summary div,
.learn-answer-submit-target .learn-answer-submit-main,
.learn-answer-submit-result > div,
.learn-answer-submit-pages > div {
  display: grid;
  gap: 4px;
}

.learn-answer-submit-summary span,
.learn-answer-submit-target small,
.learn-answer-submit-result span,
.learn-answer-submit-pages span {
  color: var(--muted);
  font-size: 12px;
}

.learn-answer-submit-empty,
.learn-answer-submit-result,
.learn-answer-submit-pages {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(8, 13, 22, 0.72));
}

.learn-answer-submit-targets {
  display: grid;
  gap: 8px;
}

.learn-answer-submit-target {
  display: grid;
  grid-template-columns: 20px 78px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  cursor: pointer;
  background: var(--a1-sw-surface-2, rgba(10, 16, 26, 0.72));
}

.learn-answer-submit-target.selected {
  border-color: rgba(53, 212, 255, 0.58);
  background: rgba(53, 212, 255, 0.08);
}

.learn-answer-submit-target.disabled {
  cursor: not-allowed;
  opacity: 0.64;
}

.learn-answer-submit-source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  font-size: 11px;
  font-weight: 900;
}

.learn-answer-submit-target a,
.learn-answer-submit-result a {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.learn-answer-submit-toggle {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(15, 23, 42, 0.56));
}

.learn-answer-submit-toggle input {
  width: 18px;
  min-height: 18px;
  margin-top: 2px;
}

.learn-answer-submit-toggle span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.learn-answer-submit-toggle small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.learn-answer-page-preview {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(53, 212, 255, 0.3);
  border-radius: 8px;
  background: rgba(53, 212, 255, 0.045);
}

.learn-answer-page-preview-header {
  display: grid;
  gap: 5px;
}

.learn-answer-page-preview-header > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 5px 12px;
}

.learn-answer-page-preview-header span,
.learn-answer-page-preview-header small,
.learn-answer-page-preview-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.learn-answer-page-thumbnails {
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 2px 0 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.learn-answer-page-thumbnails figure {
  flex: 0 0 138px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--a1-sw-surface, #0f1520);
  scroll-snap-align: start;
}

.learn-answer-page-thumbnails img {
  display: block;
  width: 100%;
  height: 164px;
  object-fit: contain;
  background: #fff;
}

.learn-answer-page-thumbnails figcaption {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
}

.learn-answer-page-thumbnails figcaption span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-answer-page-map {
  display: grid;
  max-height: min(340px, 38vh);
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
}

.learn-answer-page-map-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.learn-answer-page-map-row:last-child {
  border-bottom: 0;
}

.learn-answer-page-map-row > span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-answer-page-map-row > div {
  display: flex;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
}

.learn-answer-action-modal-form .learn-answer-page-map-row label {
  position: relative;
  display: block;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.learn-answer-action-modal-form .learn-answer-page-map-row input {
  position: absolute;
  width: 1px;
  min-height: 1px;
  opacity: 0;
}

.learn-answer-page-map-row label span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  background: var(--a1-sw-surface, #0f1520);
}

.learn-answer-page-map-row input:checked + span {
  border-color: rgba(53, 212, 255, 0.7);
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.14);
}

.learn-answer-page-map-row input:focus-visible + span {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
}

.learn-answer-page-preview-note {
  margin: 0;
}

.learn-answer-submit-result.submitted {
  border-color: rgba(86, 211, 100, 0.42);
  background: rgba(86, 211, 100, 0.08);
}

.learn-answer-submit-result.manual {
  border-color: rgba(255, 190, 92, 0.42);
  background: rgba(255, 190, 92, 0.08);
}

.learn-answer-problem-form .homework-upload-actions {
  align-items: center;
}

.learn-answer-problem-file-control {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--a1-sw-surface, #0f1520);
  text-align: center;
  overflow: hidden;
}

.learn-answer-problem-file-control input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.learn-answer-problem-file-button,
.learn-answer-problem-file-name {
  min-width: 0;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  pointer-events: none;
}

.learn-answer-problem-file-button {
  flex: 0 0 auto;
  color: #93c5fd;
}

.learn-answer-problem-file-name {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.learn-answer-problem-empty {
  margin: 0;
}
.learn-answer-problem-existing {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.learn-answer-problem-existing > strong {
  font-size: 12px;
}
.learn-answer-problem-existing-row {
  grid-template-columns: minmax(0, 1fr) 30px;
  padding: 8px 8px 8px 10px;
}
.learn-answer-problem-open {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.learn-answer-problem-open:hover strong,
.learn-answer-problem-open:focus-visible strong {
  color: var(--cyan);
  text-decoration: underline;
}
.learn-answer-problem-delete-button {
  display: grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid rgba(229, 72, 77, 0.42);
  border-radius: 7px;
  color: var(--red, #ffb4b4);
  background: rgba(229, 72, 77, 0.08);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.learn-answer-problem-delete-button:hover,
.learn-answer-problem-delete-button:focus-visible {
  outline: none;
  border-color: rgba(229, 72, 77, 0.68);
  background: rgba(229, 72, 77, 0.16);
}
.learn-answer-problem-delete-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.learn-answer-submit-pages ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.learn-answer-submit-pages li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 6px;
  background: rgba(127, 127, 127, 0.06);
}

.learn-answer-course {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.74));
}

.learn-answer-course summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}

.learn-answer-delete-x {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  color: var(--muted);
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.78));
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.learn-answer-delete-x:hover,
.learn-answer-delete-x:focus-visible {
  border-color: rgba(255, 107, 122, 0.72);
  outline: none;
  color: var(--red);
  background: rgba(255, 107, 122, 0.1);
}

.learn-answer-course summary::-webkit-details-marker {
  display: none;
}

.learn-answer-course summary > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.learn-answer-course summary strong,
.learn-answer-course summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.learn-answer-course summary strong {
  color: var(--text);
  font-size: 14px;
}

.learn-answer-course summary div > span {
  color: var(--muted);
  font-size: 11px;
}

.learn-answer-course-body {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.learn-answer-title-link {
  color: inherit;
  text-decoration: none;
}

.learn-answer-title-link:hover strong,
.learn-answer-title-link:focus-visible strong {
  color: var(--cyan);
}

.learn-answer-title-link:focus-visible {
  outline: 2px solid rgba(53, 212, 255, 0.5);
  outline-offset: 3px;
}

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

.learn-answer-compare-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 22px;
  background: var(--a1-sw-scrim, rgba(2, 6, 12, 0.72));
  backdrop-filter: blur(10px);
}

.learn-answer-compare-modal {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1040px, calc(100vw - 44px));
  max-height: calc(var(--app-live-viewport-height, 100dvh) - 44px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.learn-answer-compare-modal > .panel-header {
  position: relative;
  padding-right: 54px;
}

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

.learn-answer-compare-modal > .learn-answer-compare-body {
  overflow: auto;
}

.learn-answer-submodal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--a1-sw-scrim, rgba(2, 6, 12, 0.66));
  backdrop-filter: blur(8px);
}

.learn-answer-submodal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(760px, 100%);
  max-height: min(720px, calc(var(--app-live-viewport-height, 100dvh) - 72px));
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.learn-answer-submodal-body {
  display: grid;
  gap: 12px;
  min-width: 0;
  overflow: auto;
}

.learn-answer-problem-upload {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px dashed rgba(53, 212, 255, 0.38);
  border-radius: 8px;
  background: rgba(53, 212, 255, 0.06);
}

.learn-answer-problem-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.learn-answer-problem-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.74));
}

.learn-answer-problem-row span,
.learn-answer-problem-row strong,
.learn-answer-problem-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-answer-compare-body,
.learn-answer-match-list,
.learn-answer-prompt-form,
.learn-answer-report {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.learn-answer-share-form {
  min-width: 0;
}

.learn-answer-shared-source {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.9fr);
  align-items: end;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(53, 212, 255, 0.24);
  border-radius: 8px;
  background: rgba(53, 212, 255, 0.07);
}

.learn-answer-shared-source > div,
.learn-answer-shared-source label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.learn-answer-shared-source strong,
.learn-answer-shared-source span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-answer-shared-source span {
  color: var(--muted);
  font-size: 12px;
}

.learn-answer-shared-source label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.learn-answer-shared-source select {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--text);
  background: var(--a1-sw-surface, #0b1118);
  font-size: 12px;
}

.learn-answer-match-list {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  align-items: stretch;
}

.learn-answer-match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 124px;
  padding: 12px 12px 12px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.74));
  color: var(--text);
  transition:
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease;
}

.learn-answer-match.selected {
  border-color: rgba(53, 212, 255, 0.62);
  background: rgba(53, 212, 255, 0.08);
}

.learn-answer-match:hover,
.learn-answer-match:focus-within {
  border-color: rgba(53, 212, 255, 0.46);
  outline: none;
  background: rgba(53, 212, 255, 0.1);
  transform: translateY(-1px);
}

.learn-answer-match-open {
  align-self: stretch;
  display: grid;
  align-items: center;
  min-width: 0;
  color: inherit;
  text-align: left;
  text-decoration: none;
}

.learn-answer-match-open.is-disabled {
  cursor: default;
}

.learn-answer-match-icon {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  width: 52px;
  min-width: 52px;
  height: 62px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 38%),
    rgba(20, 29, 43, 0.96);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.learn-answer-match-kind,
.learn-answer-match-pdf {
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
  font-weight: 950;
  line-height: 1;
}

.learn-answer-match-kind {
  width: 30px;
  height: 18px;
  color: var(--text);
  background: rgba(53, 212, 255, 0.16);
  font-size: 10px;
}

.learn-answer-match-pdf {
  width: 34px;
  height: 18px;
  color: #ffd7df;
  background: rgba(247, 91, 127, 0.18);
  font-size: 9px;
}

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

.learn-answer-match-copy strong,
.learn-answer-match-copy > span:not(.learn-answer-match-topline) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.learn-answer-match-copy strong {
  display: -webkit-box;
  color: var(--text);
  font-size: 14px;
  line-height: 1.2;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.learn-answer-match-copy span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
}

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

.learn-answer-match-owner {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text) !important;
  font-size: 12px !important;
  font-weight: 900;
}

.learn-answer-match-file {
  max-width: 100%;
}

.learn-answer-match-state {
  appearance: none;
  font: inherit;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(127, 127, 127, 0.05);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
}

.learn-answer-match.selected .learn-answer-match-state {
  border-color: rgba(53, 212, 255, 0.48);
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.12);
}

.learn-answer-prompt-form.is-comparing {
  opacity: 0.72;
}

.learn-answer-compare-context {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 5px 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(53, 212, 255, 0.22);
  border-radius: 8px;
  background: rgba(53, 212, 255, 0.06);
}

.learn-answer-compare-context span,
.learn-answer-compare-context strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-answer-compare-context span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.learn-answer-compare-context strong {
  color: var(--text);
  font-size: 12px;
}

.learn-answer-compare-loading {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(53, 212, 255, 0.28);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(53, 212, 255, 0.12), rgba(73, 209, 125, 0.06)),
    var(--a1-sw-surface-2, rgba(12, 18, 28, 0.82));
}

.learn-answer-compare-loading > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.learn-answer-compare-loading strong {
  color: var(--text);
}

.learn-answer-compare-loading span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

.learn-homework-loading {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(53, 212, 255, 0.28);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(53, 212, 255, 0.12), rgba(73, 209, 125, 0.06)),
    var(--a1-sw-surface-2, rgba(12, 18, 28, 0.82));
}

.learn-homework-loading > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.learn-homework-loading strong {
  color: var(--text);
}

.learn-homework-loading span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

.learn-homework-updating {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(53, 212, 255, 0.22);
  border-radius: 8px;
  background: rgba(53, 212, 255, 0.06);
}

.learn-homework-updating-label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.learn-homework-updating .fake-progress-track {
  flex: 1 1 auto;
  margin-top: 0;
}

.loading-spinner {
  display: block;
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--cyan);
  border-radius: 999px;
  animation: refresh-spin 800ms linear infinite;
}

/* Used on its own far more often than paired with .loading-spinner, so it
   carries the full ring itself — size-only overrides left it with no
   border-style and it rendered as an invisible 16px box. */
.loading-spinner-sm {
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--cyan);
  border-radius: 999px;
  animation: refresh-spin 800ms linear infinite;
}

.learn-homework-import-button {
  flex: 0 0 auto;
  margin-left: 8px;
}

.learn-homework-import-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(560px, calc(100vw - 32px));
  max-width: 100%;
  height: min(720px, calc(var(--app-live-viewport-height, 100dvh) - 32px));
  max-height: min(92dvh, 720px);
}

.learn-homework-import-do-modal {
  width: min(680px, calc(100vw - 32px));
  height: min(860px, calc(var(--app-live-viewport-height, 100dvh) - 32px));
  max-height: min(94dvh, 860px);
}

.learn-homework-import-backdrop {
  box-sizing: border-box;
  width: 100dvw;
  height: var(--app-live-viewport-height, 100dvh);
  min-height: 0;
  padding: 16px;
  overflow: hidden;
  overscroll-behavior: contain;
}

.learn-homework-import-header {
  position: relative;
  align-items: flex-start;
  min-height: 0;
  padding: 16px 58px 14px 18px;
}

.learn-homework-import-header > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.learn-homework-import-header .row-meta {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-homework-import-header .learn-answer-action-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Running-task lane. It sits at the Learn shell root, directly under the tab
   row, so an import or Do job started from Dashboard stays visible instead of
   hiding inside the Workspace panel the user just navigated away from. */
.homework-task-lane {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(53, 212, 255, 0.26);
  border-radius: 10px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.6));
}

.homework-task-lane[hidden] {
  display: none;
}

/* At the shell root the grid already supplies the spacing below the lane. */
.homework-shell > .homework-task-lane {
  margin-bottom: 0;
}

.homework-task-lane-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.homework-task-lane-caret {
  font-size: 10px;
  line-height: 1;
  color: var(--muted);
}

.homework-task-lane-head strong {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.homework-task-lane-count {
  margin-left: auto;
}

.homework-task-lane-count {
  font-size: 11px;
  color: var(--muted);
}

.homework-task-lane-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.homework-task-row {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--a1-sw-line, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(20, 27, 39, 0.7));
}

.homework-task-row.is-running {
  border-color: rgba(53, 212, 255, 0.4);
}

.homework-task-row.is-running .homework-task-info {
  padding-right: 56px;
}

.homework-task-row.is-done {
  border-color: rgba(80, 220, 150, 0.34);
}

.homework-task-row.is-error {
  border-color: rgba(255, 91, 120, 0.44);
}

.homework-task-row.is-needs-input {
  border-color: rgba(255, 196, 87, 0.55);
}

.homework-task-icon {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  font-size: 12px;
  font-weight: 900;
}

.homework-task-row.is-done .homework-task-icon {
  color: #4fd39a;
}

.homework-task-row.is-error .homework-task-icon {
  color: #ff5b78;
}

.homework-task-row.is-needs-input .homework-task-icon {
  color: var(--amber, #ffc457);
}

.learn-workspace-needs-input-form {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.learn-needs-input-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.learn-needs-input-field > span {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.learn-needs-input-field small {
  font-size: 11px;
}

.learn-needs-input-field textarea,
.learn-needs-input-field input[type="file"] {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--a1-sw-surface, #0f1520);
  padding: 9px 10px;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  outline: none;
}

.learn-needs-input-field textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(53, 212, 255, 0.15);
}

.homework-task-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.homework-task-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.homework-task-title strong {
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.homework-task-target {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  align-self: stretch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
}

.homework-task-status {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
}

.homework-task-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.homework-task-actions .compact-action-button {
  width: auto;
  min-width: 0;
  min-height: 32px;
  padding: 4px 9px;
  font-size: 12px;
  white-space: nowrap;
}

/* The live stage remains in Details; the lane itself stays quiet and only
   shows a compact, continuously updating elapsed clock. */
.homework-task-elapsed {
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: 1.2;
  pointer-events: none;
}

.homework-task-row.is-running .homework-task-actions {
  padding-top: 17px;
}

.homework-task-action-short {
  display: none;
}

@media (max-width: 540px) {
  .homework-task-row {
    grid-template-columns: 16px minmax(0, 1fr);
  }

  .homework-task-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
  }

  .homework-task-actions {
    display: flex;
    grid-column: 2;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .homework-task-row.is-running .homework-task-actions {
    padding-top: 0;
  }

  .homework-task-actions .compact-action-button {
    padding-inline: 8px;
  }

  .homework-task-action-full {
    display: none;
  }

  .homework-task-action-short {
    display: inline;
  }
}

/* Collapsible agent-activity transcript in Do/Refine/Import detail views:
   the long message log dominated the sheet; a <details> keeps it one line
   away. Open by default while a run is live, collapsed once it is done. */
.learn-workspace-do-transcript-fold > summary {
  padding: 6px 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.learn-workspace-do-transcript-fold[open] > summary {
  color: var(--text);
}

/* Shared Markdown viewer overlay (utils/markdown-viewer.js): renders
   do-report.md / idk.md as a readable page instead of a raw download. */
.markdown-viewer-host {
  position: fixed;
  inset: 0;
  z-index: 320;
}

.markdown-viewer-host .learn-answer-action-backdrop {
  box-sizing: border-box;
  height: 100%;
  overscroll-behavior: contain;
}

.markdown-viewer-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(720px, calc(100vw - 24px));
  max-height: min(85dvh, 760px);
}

.markdown-viewer-body {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 0;
  padding: 14px 16px 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.markdown-viewer-needs-input {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--a1-urgent-line, var(--line));
  border-radius: 12px;
  background: var(--a1-urgent-bg, var(--panel));
  overflow-wrap: anywhere;
}

.markdown-viewer-needs-input h4,
.markdown-viewer-report h4 { margin: 0 0 10px; font-size: 17px; }
.markdown-viewer-needs-input ol { margin: 0 0 14px; padding-left: 22px; }
.markdown-viewer-needs-input li + li { margin-top: 12px; }
.markdown-viewer-needs-input li p { margin: 5px 0 0; font-size: 13px; line-height: 1.5; }
.markdown-viewer-needs-input .primary-button { display: inline-flex; text-decoration: none; }

.learn-answer-action-modal-host.learn-homework-import-mini-host {
  z-index: 260;
  pointer-events: none;
}

.learn-homework-import-mini {
  position: absolute;
  right: 18px;
  bottom: max(78px, calc(var(--a1-safe-bottom) + 72px));
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: min(270px, calc(100vw - 36px));
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgba(53, 212, 255, 0.34);
  border-radius: 999px;
  color: var(--text);
  background: var(--a1-sw-surface, rgba(12, 18, 28, 0.94));
  box-shadow: var(--shadow);
  text-align: left;
  pointer-events: auto;
  cursor: pointer;
}

.learn-homework-import-mini:hover,
.learn-homework-import-mini:focus-visible {
  border-color: rgba(53, 212, 255, 0.68);
  outline: none;
}

.learn-homework-import-mini > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.learn-homework-import-mini strong,
.learn-homework-import-mini small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-homework-import-mini strong {
  font-size: 12px;
  font-weight: 900;
}

.learn-homework-import-mini small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.learn-homework-import-mini-dot {
  width: 10px;
  height: 10px;
  justify-self: center;
  border-radius: 999px;
  background: var(--cyan);
}

.learn-homework-import-mini.done {
  border-color: rgba(73, 209, 125, 0.45);
}

.learn-homework-import-mini.done .learn-homework-import-mini-dot {
  background: var(--green);
}

.learn-homework-import-mini.error {
  border-color: rgba(255, 107, 122, 0.44);
}

.learn-homework-import-mini.error .learn-homework-import-mini-dot {
  background: #ffb8c8;
}

.learn-workspace-do-backdrop {
  box-sizing: border-box;
  width: 100dvw;
  height: var(--app-live-viewport-height, 100dvh);
  min-height: 0;
  padding: 16px;
  overflow: hidden;
  overscroll-behavior: contain;
}

.learn-workspace-do-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(680px, calc(100vw - 32px));
  max-width: 100%;
  height: min(820px, calc(var(--app-live-viewport-height, 100dvh) - 32px));
  max-height: min(92dvh, 820px);
}

.learn-workspace-refine-modal {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.learn-workspace-refine-modal > :is(.learn-workspace-do-header, .learn-workspace-do-form, .learn-workspace-do-detail) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.learn-workspace-refine-modal .learn-workspace-do-header > div {
  flex: 1 1 0;
  overflow: hidden;
}

.learn-workspace-refine-modal .row-meta {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.learn-workspace-refine-modal .learn-workspace-do-detail {
  grid-template-columns: minmax(0, 1fr);
}

.learn-workspace-refine-modal :is(.learn-workspace-do-files, .learn-workspace-do-transcript-fold, .learn-workspace-do-message) {
  min-width: 0;
  max-width: 100%;
}

.learn-workspace-refine-modal .learn-workspace-do-files :is(a, span) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-workspace-do-header {
  position: relative;
  align-items: flex-start;
  padding-right: 62px;
}

.learn-workspace-do-header > div {
  min-width: 0;
}

.learn-workspace-do-header .row-meta {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-workspace-do-header .learn-answer-action-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

.learn-workspace-do-title-block {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.learn-workspace-do-header.learn-workspace-do-detail-header {
  min-height: 62px;
  padding-right: 108px;
}

.learn-workspace-do-detail-header .learn-workspace-do-detail-close {
  width: auto;
  min-width: 78px;
  height: 36px;
  gap: 6px;
  padding: 0 10px;
  border-color: rgba(154, 168, 184, 0.34);
  color: var(--text);
  background: var(--a1-sw-surface-3, rgba(8, 12, 18, 0.42));
  font-size: 12px;
  font-weight: 850;
}

.learn-workspace-do-detail-close span:first-child {
  font-size: 20px;
  line-height: 1;
}

.learn-workspace-do-detail-close span:last-child {
  transform: translateY(1px);
}

.learn-homework-import-form,
.learn-homework-import-progress,
.learn-homework-import-result {
  display: grid;
  /* The modal row is 1fr-tall; without this the grid spreads its few rows
     across the whole sheet and the dialog reads as mostly empty space. */
  align-content: start;
  gap: 12px;
  min-height: 0;
  padding: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.learn-workspace-do-form,
.learn-workspace-do-detail {
  display: grid;
  /* Same top-alignment as the import views: these sit in a full-height modal
     row, and stretched grid rows scatter the content down the sheet. */
  align-content: start;
  gap: 12px;
  min-height: 0;
  padding: 18px;
  overscroll-behavior: contain;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.learn-workspace-do-config-fields {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.learn-workspace-do-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.learn-workspace-refine-modal .learn-workspace-do-form select {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.learn-workspace-do-config-fields label {
  display: grid;
  gap: 6px;
}

.learn-workspace-do-identity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

.learn-workspace-do-form label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.learn-workspace-do-config-fields label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.learn-workspace-do-form .learn-workspace-do-checkbox,
.learn-workspace-do-config-fields .learn-workspace-do-checkbox {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-3, rgba(8, 12, 18, 0.5));
  cursor: pointer;
}

.learn-workspace-do-checkbox input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
}

.learn-workspace-do-form .learn-workspace-do-checkbox span,
.learn-workspace-do-config-fields .learn-workspace-do-checkbox span {
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  text-transform: none;
}

.learn-workspace-do-ai-usage {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(132, 204, 22, 0.22);
  border-radius: 8px;
  background: rgba(132, 204, 22, 0.06);
}

.learn-workspace-do-form input,
.learn-workspace-do-form select,
.learn-workspace-do-form textarea,
.learn-workspace-do-config-fields input,
.learn-workspace-do-config-fields select,
.learn-workspace-do-config-fields textarea {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--text);
  background: var(--a1-sw-surface, #0b1118);
  font-size: 12px;
}

.learn-workspace-do-form textarea,
.learn-workspace-do-config-fields textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.45;
}

.learn-homework-import-do-panel {
  display: grid;
  gap: 12px;
}

.learn-workspace-do-policy {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(53, 212, 255, 0.24);
  border-radius: 8px;
  background: rgba(53, 212, 255, 0.07);
}

.learn-workspace-do-policy strong,
.learn-workspace-do-policy p {
  margin: 0;
}

.learn-workspace-do-policy p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.learn-workspace-do-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 2px -18px 0;
  padding: 12px 18px max(14px, var(--a1-safe-bottom));
  border-top: 1px solid var(--line-soft);
  background:
    linear-gradient(
      180deg,
      var(--a1-sw-surface, rgba(15, 21, 32, 0.74)),
      var(--a1-sw-surface, rgba(15, 21, 32, 0.98)) 26%
    ),
    var(--panel);
}

.learn-workspace-do-detail-actions,
.learn-workspace-do-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.learn-workspace-do-attention {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--a1-urgent-line, var(--line));
  border-radius: 12px;
  background: var(--a1-urgent-bg, var(--panel));
  overflow-wrap: anywhere;
}
.learn-workspace-do-attention > strong { display: block; margin-bottom: 9px; font-size: 17px; }
.learn-workspace-do-attention ol { margin: 0 0 14px; padding-left: 22px; }
.learn-workspace-do-attention li + li { margin-top: 12px; }
.learn-workspace-do-attention li p { margin: 5px 0 0; font-size: 13px; line-height: 1.5; }
.learn-workspace-do-output-fold > summary { padding: 8px 2px; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; }
.learn-workspace-do-output-fold[open] > summary { color: var(--text); }
.learn-workspace-do-output-fold .learn-workspace-do-files { padding: 4px 0 8px; }

.learn-workspace-do-detail-actions .ghost-button {
  width: auto;
}

.learn-workspace-do-files a,
.learn-workspace-do-files span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  background: var(--a1-sw-surface-2, rgba(8, 12, 18, 0.52));
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.learn-workspace-do-files a {
  color: var(--cyan);
}

.learn-workspace-do-files .needs-action {
  border-color: rgba(245, 184, 75, 0.5);
  color: var(--amber);
  background: rgba(245, 184, 75, 0.1);
}

.learn-workspace-do-files .imported {
  border-color: rgba(73, 209, 125, 0.5);
  color: var(--green);
  background: rgba(73, 209, 125, 0.1);
}

.learn-workspace-do-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.learn-workspace-do-transcript {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(8, 12, 18, 0.52));
}

.learn-workspace-do-message {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid rgba(154, 168, 184, 0.18);
  border-radius: 7px;
  background: var(--a1-sw-surface-2, rgba(15, 21, 32, 0.72));
}

.learn-workspace-do-message span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.learn-workspace-do-message p {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.learn-homework-import-facts {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-3, rgba(8, 12, 18, 0.42));
}

.learn-homework-import-facts > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.learn-homework-import-facts dt {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.learn-homework-import-facts dd {
  margin: 0;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  word-break: break-word;
}

.learn-homework-import-field {
  display: grid;
  gap: 6px;
}

.learn-homework-import-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.learn-homework-import-field input {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 9px 10px;
  color: var(--text);
  background: var(--a1-sw-surface, #0b1118);
  font-size: 13px;
}

.learn-homework-import-pathrow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.learn-homework-import-pathrow input {
  flex: 1 1 0;
  min-width: 0;
}

.learn-homework-import-pathsep {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
  user-select: none;
}

.learn-homework-import-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.learn-homework-import-note code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(53, 212, 255, 0.1);
  font-size: 11px;
}

.learn-homework-import-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.learn-homework-import-actions > * {
  flex: 1 1 0;
  min-width: 0;
}

.learn-homework-import-actions .compact-action-button {
  width: 100%;
}

/* A lone action (e.g. Cancel while an import runs) must not balloon into a
   full-width, full-height slab: keep it a normal-sized centered button. */
.learn-homework-import-actions > .compact-action-button:only-child,
.learn-homework-import-actions > .ghost-button:only-child {
  flex: 0 0 auto;
  width: auto;
  min-width: 160px;
  margin: 0 auto;
}

.learn-homework-import-progress-head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.learn-homework-import-progress-head strong {
  display: block;
  color: var(--text);
}

.learn-homework-import-log {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 10px 12px;
  max-height: 200px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(8, 12, 20, 0.65));
  color: var(--muted);
  font-size: 12px;
}

.learn-homework-import-log li {
  word-break: break-word;
}

.learn-homework-import-summary {
  padding: 12px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-3, rgba(12, 18, 28, 0.5));
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.form-message.learn-homework-import-success {
  color: var(--green);
}

.fake-progress-track {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 7px;
  margin-top: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.fake-progress-track span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  animation: answer-compare-progress 1.4s ease-in-out infinite;
}

.homework-artifact-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.74));
}

.homework-artifact-main,
.homework-artifact-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.homework-artifact-main > div,
.homework-artifact-file {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.homework-artifact-main strong,
.homework-artifact-main span,
.homework-artifact-file span,
.homework-artifact-file small,
.homework-artifact-card p {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.homework-artifact-main strong,
.homework-artifact-file span {
  color: var(--text);
  font-size: 13px;
}

.homework-artifact-main span,
.homework-artifact-file small,
.homework-artifact-card p {
  color: var(--muted);
  font-size: 11px;
}

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

.learn-answer-path {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(15, 21, 32, 0.64));
}

.learn-answer-path span {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.learn-answer-path strong {
  color: var(--text);
  font-size: 11px;
}

.learn-answer-path code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.learn-answer-prompt-form textarea {
  width: 100%;
  min-height: 190px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--a1-sw-surface, #0f1520);
  padding: 10px 12px;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  outline: none;
}

.learn-answer-prompt-form textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(53, 212, 255, 0.15);
}

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

.learn-answer-report-markdown {
  display: grid;
  gap: 9px;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.learn-answer-structured-results {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.learn-answer-structured-item {
  border: 1px solid var(--line-subtle, rgba(148, 163, 184, 0.28));
  border-left: 4px solid #64748b;
  border-radius: 10px;
  padding: 10px 12px;
  overflow-wrap: anywhere;
}

.learn-answer-structured-item.status-consistent { border-left-color: #16a34a; }
.learn-answer-structured-item.status-possible_difference { border-left-color: #d97706; }
.learn-answer-structured-item.status-clear_error { border-left-color: #dc2626; }
.learn-answer-structured-item.focused { outline: 3px solid rgba(14, 165, 233, 0.35); }

.learn-answer-structured-item header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.learn-answer-structured-item header span,
.learn-answer-structured-item p,
.learn-answer-structured-item details {
  font-size: 0.78rem;
  line-height: 1.45;
}

.learn-answer-version-list {
  display: grid;
  gap: 9px;
  align-content: start;
  grid-auto-rows: max-content;
}

.learn-answer-version-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line-subtle, rgba(148, 163, 184, 0.28));
  border-radius: 10px;
  padding: 10px 12px;
}

.learn-answer-version-list article div { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
.learn-answer-version-list article span { font-size: 0.76rem; opacity: 0.76; overflow-wrap: anywhere; }
.learn-answer-version-list article > a { flex: 0 0 auto; width: auto; }
.learn-answer-version-list article > .learn-answer-version-actions { display: flex; flex: 0 0 auto; gap: 6px; min-width: 0; opacity: 1; }
.learn-answer-version-actions .compact-action-button { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 0; min-height: 34px; padding: 0 8px; font-size: 12px; white-space: nowrap; }

.learn-answer-consensus {
  display: grid;
  gap: 5px;
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.08);
}

.learn-answer-consensus p { margin: 0; font-size: 0.75rem; line-height: 1.4; }

.learn-refine-change-preview {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(14, 165, 233, 0.35);
  border-radius: 12px;
  background: rgba(14, 165, 233, 0.06);
}

.learn-refine-change-preview > header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; min-width: 0; }
.learn-refine-change-preview > header span { min-width: 0; overflow-wrap: anywhere; }
.learn-refine-change-list { display: grid; gap: 7px; max-height: 340px; overflow: auto; }
.learn-refine-change-list label { display: flex; align-items: flex-start; gap: 8px; }
.learn-refine-change-list label > span { display: grid; gap: 2px; min-width: 0; }
.learn-refine-change-list code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.72rem; }
.learn-refine-change-list code.removed { color: #b91c1c; }
.learn-refine-change-list code.added { color: #15803d; }

@media (max-width: 640px) {
  .learn-answer-structured-item header { display: grid; gap: 3px; }
}

.learn-answer-report-markdown h4,
.learn-answer-report-markdown h5,
.learn-answer-report-markdown h6,
.learn-answer-report-markdown p,
.learn-answer-report-markdown ul,
.learn-answer-report-markdown ol,
.learn-answer-report-markdown blockquote,
.learn-answer-report-markdown pre {
  margin: 0;
}

.learn-answer-report-markdown h4,
.learn-answer-report-markdown h5,
.learn-answer-report-markdown h6 {
  color: var(--text);
}

.learn-answer-report-markdown ul,
.learn-answer-report-markdown ol {
  padding-left: 18px;
}

.learn-answer-report-markdown li {
  margin: 3px 0;
}

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

.learn-answer-report-markdown pre {
  white-space: pre;
}

.learn-answer-report-markdown code,
.markdown-math-inline,
.markdown-math-block {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.learn-answer-report-markdown code {
  padding: 1px 4px;
  border-radius: 5px;
  color: #dbeafe;
  background: rgba(255, 255, 255, 0.08);
}

.learn-answer-report-markdown pre code {
  padding: 0;
  background: transparent;
}

.markdown-math-inline {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  vertical-align: middle;
  color: #fef3c7;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

/* Tables scroll inside their own box so a wide grade breakdown never widens
   the message bubble or the report panel it sits in. */
.markdown-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.markdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: inherit;
}

.markdown-table th,
.markdown-table td {
  padding: 6px 10px;
  border: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}

.markdown-table th {
  color: var(--text);
  background: rgba(127, 127, 127, 0.05);
  font-weight: 750;
  white-space: nowrap;
}

.markdown-table th.is-right,
.markdown-table td.is-right {
  text-align: right;
}

.markdown-table th.is-center,
.markdown-table td.is-center {
  text-align: center;
}

.markdown-math-block {
  display: block;
  color: #fef3c7;
  white-space: pre;
}

.learn-answer-report-markdown blockquote {
  padding: 8px 10px;
  border-left: 3px solid var(--cyan);
  border-radius: 6px;
  background: rgba(53, 212, 255, 0.07);
}

@keyframes answer-compare-progress {
  0% {
    transform: translateX(-105%);
  }

  55% {
    transform: translateX(85%);
  }

  100% {
    transform: translateX(240%);
  }
}

.homework-artifact-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.learn-answer-card-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.learn-answer-card-actions .compact-action-button {
  width: 100%;
  min-width: 0;
}

.homework-artifact-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.danger-action-button {
  border-color: rgba(255, 107, 122, 0.42);
  color: #ffb8c8;
}

.danger-action-button:hover,
.danger-action-button:focus-visible {
  border-color: rgba(255, 107, 122, 0.72);
  color: #ffd6df;
  background: rgba(255, 107, 122, 0.12);
  outline: none;
}

.homework-comparison-result {
  border-top: 1px solid var(--line-soft);
}

.homework-comparison-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.74));
}

.homework-comparison-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.homework-comparison-heading h4,
.homework-comparison-section h5 {
  margin: 0;
}

.homework-comparison-card p,
.homework-comparison-section span,
.homework-comparison-section small,
.homework-comparison-section li,
.homework-comparison-card pre {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.homework-comparison-card p {
  margin: 0;
}

.homework-comparison-section {
  display: grid;
  gap: 8px;
}

.homework-comparison-section article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(15, 21, 32, 0.62));
}

.homework-comparison-section strong {
  color: var(--text);
  font-size: 13px;
}

.homework-comparison-section ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.homework-comparison-card pre {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  background: var(--a1-sw-surface, #0c111a);
  white-space: pre-wrap;
}

.learn-shell {
  display: grid;
  gap: 16px;
}

.learn-panel {
  max-width: 760px;
}

.learn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.learn-body {
  display: grid;
  gap: 12px;
}

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

.learn-placeholder {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.74));
}

.learn-placeholder strong,
.learn-placeholder span {
  display: block;
  min-width: 0;
}

.learn-placeholder strong {
  color: var(--text);
  font-size: 15px;
}

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

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

.learn-logistics-list {
  display: grid;
  gap: 10px;
}

.learn-estimate-list {
  padding-bottom: 0;
}

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

.learn-estimate-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.74));
}

.learn-estimate-card > div {
  min-width: 0;
}

.learn-estimate-card strong,
.learn-estimate-card span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-estimate-card strong {
  color: var(--text);
  font-size: 14px;
}

.learn-estimate-card span,
.learn-estimate-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.learn-estimate-score {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.learn-estimate-score strong {
  font-size: 22px;
}

.learn-estimate-card p {
  margin: 0;
}

.learn-logistics-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(12, 18, 28, 0.74));
}

.learn-logistics-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.learn-logistics-heading > div,
.learn-logistics-section {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.learn-logistics-heading strong,
.learn-logistics-heading span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-logistics-heading strong {
  color: var(--text);
  font-size: 14px;
}

.learn-logistics-heading span,
.learn-logistics-row small,
.learn-logistics-section p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.learn-logistics-heading a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.learn-logistics-section h4 {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  text-transform: uppercase;
}

.learn-logistics-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.learn-logistics-row span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-logistics-row small {
  flex: 0 0 auto;
}

.learn-logistics-section p {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(15, 21, 32, 0.62));
}

.profile-integrations {
  margin-top: 16px;
}

.user-page {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  --user-panel-bg: rgba(20, 27, 39, 0.82);
  --user-surface-bg: #101722;
  --user-surface-soft: rgba(15, 21, 32, 0.72);
  --user-course-bg: #101722;
  --user-line: var(--line-soft);
  --user-text: var(--text);
  --user-muted: var(--muted);
  --user-accent: var(--cyan);
  --user-accent-2: var(--amber);
  --user-primary-ink: #081018;
  color: var(--user-text);
}

.user-page[data-user-theme="aurora"] {
  --user-panel-bg:
    linear-gradient(150deg, rgba(12, 45, 48, 0.9), rgba(17, 24, 39, 0.86)),
    rgba(13, 34, 41, 0.96);
  --user-surface-bg: #0d232c;
  --user-surface-soft: rgba(9, 35, 37, 0.76);
  --user-course-bg: #0d232c;
  --user-line: rgba(94, 234, 212, 0.22);
  --user-accent: #5eead4;
  --user-accent-2: #a7f3d0;
}

.user-page[data-user-theme="campus"] {
  --user-panel-bg:
    linear-gradient(150deg, rgba(248, 250, 252, 0.98), rgba(226, 232, 240, 0.95)),
    #f8fafc;
  --user-surface-bg: #ffffff;
  --user-surface-soft: #f1f5f9;
  --user-course-bg: #ffffff;
  --user-line: rgba(163, 31, 52, 0.24);
  --user-text: #18212f;
  --user-muted: #5f6c7d;
  --user-accent: #a31f34;
  --user-accent-2: #2563eb;
  --user-primary-ink: #ffffff;
}

.user-page[data-user-theme="solar"] {
  --user-panel-bg:
    linear-gradient(145deg, rgba(44, 30, 15, 0.92), rgba(17, 24, 39, 0.86)),
    #21180d;
  --user-surface-bg: #24190e;
  --user-surface-soft: rgba(39, 25, 11, 0.78);
  --user-course-bg: #24190e;
  --user-line: rgba(250, 204, 21, 0.26);
  --user-accent: #facc15;
  --user-accent-2: #38bdf8;
}

.user-page[data-user-theme="violet"] {
  --user-panel-bg:
    linear-gradient(145deg, rgba(40, 24, 75, 0.92), rgba(14, 20, 36, 0.88)),
    #181326;
  --user-surface-bg: #1d1830;
  --user-surface-soft: rgba(29, 24, 48, 0.78);
  --user-course-bg: #1d1830;
  --user-line: rgba(196, 181, 253, 0.22);
  --user-accent: #c4b5fd;
  --user-accent-2: #22d3ee;
}

.user-page[data-user-theme="crimson"] {
  --user-panel-bg:
    linear-gradient(145deg, rgba(75, 24, 33, 0.92), rgba(20, 12, 16, 0.88)),
    #26141a;
  --user-surface-bg: #2a151b;
  --user-surface-soft: rgba(45, 22, 27, 0.78);
  --user-course-bg: #2a151b;
  --user-line: rgba(251, 113, 133, 0.24);
  --user-accent: #fb7185;
  --user-accent-2: #fcd34d;
}

.user-summary-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.user-summary-main {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
}

.user-summary-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(78px, 96px) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.user-summary-avatar {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  font-size: 30px;
}

.user-summary-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.user-summary-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.user-summary-name-row > strong {
  flex: 1 1 auto;
}

.user-summary-copy strong,
.user-summary-copy small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-summary-copy strong {
  font-size: 17px;
}

.user-summary-copy small {
  color: var(--muted);
  font-size: 13px;
}

.user-game-body {
  display: grid;
  grid-template-columns: minmax(310px, 1.25fr) minmax(220px, 0.85fr) minmax(260px, 0.95fr);
  align-items: center;
  gap: 16px;
}

.user-top-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.user-bottom-panel {
  order: 90;
}

.user-top-actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.user-theme-quick-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  color: var(--a1-accent-text, var(--cyan));
  background: var(--a1-sw-accent-soft, var(--panel-2));
  box-shadow: none;
}

.user-theme-quick-toggle:focus-visible {
  border-color: var(--a1-accent, var(--cyan));
  outline: 3px solid color-mix(in srgb, var(--a1-accent, var(--cyan)) 22%, transparent);
  outline-offset: 2px;
}

@media (hover: hover) {
  .user-theme-quick-toggle:hover {
    border-color: var(--a1-accent, var(--cyan));
    color: var(--a1-accent, var(--cyan));
  }
}

.user-theme-quick-icon {
  display: block;
  width: 21px;
  height: 21px;
}

.user-theme-moon-icon,
.user-theme-quick-toggle[data-theme-mode="dark"] .user-theme-sun-icon {
  display: none;
}

.user-theme-quick-toggle[data-theme-mode="dark"] .user-theme-moon-icon {
  display: inline;
}

.user-top-panel .user-friend-card {
  width: 148px;
  min-height: 42px;
}

.user-top-panel .user-count-button {
  min-height: 42px;
  padding: 5px 10px;
}

.user-top-panel .user-count-button span {
  font-size: 18px;
}

.user-top-panel .user-count-button small {
  font-size: 10px;
}

.user-logout-body {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

/* The sidebar already carries Log out on desktop; this in-page button is the
   phone affordance (the sidebar collapses into the bottom nav there). */
@media (min-width: 981px) {
  .user-logout-body {
    display: none;
  }
}

.user-account-status {
  grid-column: 1 / -1;
  min-width: 0;
}

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

.user-wallet-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(92px, 0.7fr);
  gap: 10px;
  min-width: 0;
}

.user-coin-card,
.user-friend-card,
.user-friend-count-card,
.streak-bar-card {
  min-width: 0;
  border: 1px solid rgba(255, 208, 102, 0.28);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(255, 212, 89, 0.15), rgba(14, 20, 29, 0.88)),
    #101722;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 30px rgba(0, 0, 0, 0.18);
}

.user-coin-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 12px;
}

.user-credit-button {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.user-credit-button:hover,
.user-credit-button:focus-visible {
  border-color: rgba(255, 226, 122, 0.58);
  background:
    linear-gradient(145deg, rgba(255, 212, 89, 0.22), rgba(14, 20, 29, 0.9)),
    #101722;
  outline: none;
}

.game-coin {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255, 236, 145, 0.82);
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 25%, #fff8bf 0 16%, #ffd660 37%, #cb8619 72%, #7c4810 100%);
  box-shadow:
    inset -4px -5px 0 rgba(117, 67, 8, 0.22),
    inset 3px 3px 0 rgba(255, 255, 255, 0.38),
    0 8px 18px rgba(255, 184, 60, 0.22);
  font-size: 20px;
}

.user-coin-card strong {
  display: block;
  color: var(--text);
  font-size: 26px;
  font-weight: 950;
  line-height: 1;
}

.user-coin-card small,
.streak-bar-heading > span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

body.credit-ledger-modal-open {
  overflow: hidden;
}

.credit-ledger-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: grid;
  place-items: center;
  padding: 22px;
  background: var(--a1-sw-scrim, rgba(5, 9, 14, 0.72));
  backdrop-filter: blur(8px);
}

.credit-ledger-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(720px, 100%);
  max-height: min(760px, calc(var(--app-live-viewport-height, 100vh) - 44px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--a1-sw-surface, #101722);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.credit-ledger-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--a1-sw-surface, rgba(15, 21, 32, 0.84));
}

.credit-ledger-modal-header h3,
.credit-ledger-modal-header p {
  margin: 0;
}

.credit-ledger-modal-header h3 {
  color: var(--text);
  font-size: 20px;
}

.credit-ledger-modal-header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.credit-ledger-modal-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--a1-sw-surface, #0f1520);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

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

.credit-ledger-modal-body {
  min-height: 0;
  overflow: auto;
  padding: 16px 18px 18px;
}

.credit-ledger-list {
  display: grid;
  gap: 10px;
}

.credit-ledger-entry {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(9, 14, 22, 0.7));
}

.credit-ledger-entry-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.credit-ledger-entry-main > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.credit-ledger-entry strong {
  color: var(--text);
  font-size: 14px;
}

.credit-ledger-entry-main span,
.credit-ledger-entry p,
.credit-ledger-entry-details {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.credit-ledger-entry p {
  margin: 0;
}

.credit-ledger-amount {
  flex: 0 0 auto;
  min-width: 72px;
  padding: 4px 8px;
  border-radius: 999px;
  text-align: center;
  font-weight: 900;
}

.credit-ledger-amount.positive {
  color: #8ef0b0;
  background: rgba(73, 209, 125, 0.14);
}

.credit-ledger-amount.negative {
  color: #ff9fb5;
  background: rgba(244, 114, 182, 0.14);
}

.credit-ledger-entry-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.credit-ledger-entry-details span {
  padding: 4px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--a1-sw-surface-2, rgba(15, 21, 32, 0.74));
}

.user-storage-body {
  display: block;
  padding-top: 0;
}

.quota-compact-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 2px 0 0;
}

.quota-compact-items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}

.quota-compact-item {
  display: grid;
  grid-template-columns: minmax(86px, 0.38fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 32px;
}

.quota-compact-item strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quota-compact-item small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quota-storage-meter {
  height: 6px;
}

.account-card {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  min-height: 112px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(15, 21, 32, 0.72));
}

.account-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.account-card strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-card small {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.storage-meter {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(229, 234, 240, 0.08);
}

.storage-meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--amber));
  transition: width 180ms ease;
}

.user-count-button {
  display: grid;
  place-items: center;
  min-width: 80px;
  min-height: 54px;
  padding: 7px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--text);
  background: var(--a1-sw-surface, #101722);
}

.user-friend-count-card {
  border-color: rgba(53, 212, 255, 0.28);
  background:
    linear-gradient(145deg, rgba(53, 212, 255, 0.12), rgba(14, 20, 29, 0.88)),
    #101722;
}

.user-friend-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: stretch;
  gap: 6px;
  padding: 0;
  border-color: rgba(53, 212, 255, 0.28);
  background:
    linear-gradient(145deg, rgba(53, 212, 255, 0.12), rgba(14, 20, 29, 0.88)),
    #101722;
}

.user-friend-card .user-friend-count-card {
  border: 0;
  border-radius: 10px 0 0 10px;
  background: transparent;
  box-shadow: none;
}

.user-top-panel .user-friend-inline-card {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  min-width: 58px;
  min-height: 58px;
  padding: 5px;
  border-radius: 8px 0 0 8px;
  box-shadow: none;
}

.user-top-panel .user-friend-inline-card span {
  font-size: 18px;
}

.user-top-panel .user-friend-inline-card small {
  font-size: 9px;
}

.user-top-panel .user-top-friend-card {
  grid-template-columns: 58px 36px;
  gap: 0;
  width: auto;
  min-height: 58px;
}

.user-top-panel .user-top-friend-add {
  width: 36px;
  min-width: 36px;
  height: 58px;
  min-height: 58px;
  border-left: 1px solid rgba(53, 212, 255, 0.22);
}

.friend-add-icon-button {
  display: grid;
  place-items: center;
  min-width: 34px;
  min-height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--user-text);
  background: transparent;
  box-shadow: none;
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.friend-add-icon-button:hover,
.friend-add-icon-button:focus-visible,
.friend-add-icon-button[aria-expanded="true"] {
  color: var(--user-accent-2);
  outline: none;
  background: transparent;
}

.user-friends-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-friends-panel-add {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border: 1px solid var(--user-line);
  border-radius: 6px;
  background: var(--user-surface-bg);
  font-size: 19px;
}

.user-count-button span {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.user-count-button small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
}

.user-summary-side {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.user-summary-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.user-checkin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.user-theme-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.user-theme-select {
  display: block;
  min-width: 0;
}

.user-theme-select select {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--user-line);
  border-radius: 8px;
  color: var(--user-text);
  background: var(--user-surface-bg);
  font-size: 12px;
  font-weight: 850;
  outline: none;
}

.user-theme-select select:focus {
  border-color: var(--user-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--user-accent) 18%, transparent);
}

.appearance-body {
  display: grid;
  gap: 18px;
}

.appearance-section {
  display: grid;
  gap: 6px;
}

.appearance-section .row-meta {
  margin: 0;
}

.theme-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.theme-swatch {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--panel-2);
  cursor: pointer;
  text-align: center;
}

.theme-swatch:hover,
.theme-swatch:focus-visible {
  border-color: var(--cyan);
  outline: none;
}

.theme-swatch.active {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 30%, transparent);
}

.theme-swatch-preview {
  display: block;
  height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-swatch-label {
  font-size: 12px;
  font-weight: 800;
}

.theme-swatch-preview[data-theme-preview="graphite"] {
  background:
    radial-gradient(circle at 22% 25%, rgba(53, 212, 255, 0.55), transparent 55%),
    linear-gradient(135deg, #0c1018, #1b2638);
}

.theme-swatch-preview[data-theme-preview="aurora"] {
  background:
    radial-gradient(circle at 24% 26%, rgba(94, 234, 212, 0.6), transparent 55%),
    linear-gradient(135deg, #07151a, #0d2b30);
}

.theme-swatch-preview[data-theme-preview="violet"] {
  background:
    radial-gradient(circle at 24% 26%, rgba(167, 139, 250, 0.6), transparent 55%),
    linear-gradient(135deg, #100b1e, #241a3a);
}

.theme-swatch-preview[data-theme-preview="solar"] {
  background:
    radial-gradient(circle at 24% 26%, rgba(250, 204, 21, 0.6), transparent 55%),
    linear-gradient(135deg, #1a1206, #2e2010);
}

.theme-swatch-preview[data-theme-preview="crimson"] {
  background:
    radial-gradient(circle at 24% 26%, rgba(251, 113, 133, 0.6), transparent 55%),
    linear-gradient(135deg, #160a0d, #2d161b);
}

.appearance-select {
  display: grid;
  gap: 4px;
}

.appearance-select select {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel-2);
  font-size: 13px;
  font-weight: 700;
  outline: none;
}

.appearance-select select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 18%, transparent);
}

.user-configs-body {
  display: grid;
  gap: 8px;
}

.user-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.user-config-section {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  /* Surface, not surface-3: these accordions sit inside a white card, and a
     stack of grey slabs read as disabled. The hairline border carries them. */
  background: var(--a1-sw-surface, rgba(15, 21, 32, 0.46));
}

.user-config-section.collapsed {
  background: var(--a1-sw-surface, rgba(15, 21, 32, 0.34));
}

.user-config-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 40px;
  padding: 6px 8px;
}

.user-config-section-toggle {
  width: 100%;
  min-height: 28px;
  min-width: 0;
  gap: 7px;
}

.user-config-section-toggle h3 {
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-config-section-toggle small {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border: 1px solid rgba(53, 212, 255, 0.34);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.08);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.user-config-add {
  flex: 0 0 auto;
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 8px;
  font-size: 17px;
  line-height: 1;
}

.user-config-list {
  gap: 2px;
  max-height: min(320px, 45dvh);
  min-width: 0;
  overflow-y: auto;
  padding: 4px 6px 7px;
}

.user-config-list > .muted {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.user-config-card {
  min-width: 0;
  padding: 4px 6px;
}

.user-config-title-copy {
  display: grid;
  min-width: 0;
}

.user-config-title-copy strong,
.user-config-title-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-config-title-copy small {
  color: var(--muted);
  font-size: 10px;
}

.user-config-detail {
  max-height: 180px;
  padding: 8px;
  font-size: 11px;
  line-height: 1.4;
}

.user-config-modal {
  width: min(620px, calc(100vw - 48px));
}

.user-config-card .learn-answer-prompt-row {
  gap: 5px;
}

.user-config-card .learn-answer-prompt-title-button {
  min-height: 28px;
  gap: 6px;
}

.user-config-card .learn-answer-prompt-actions {
  flex-wrap: nowrap;
  gap: 4px;
}

.user-config-card .learn-answer-prompt-edit,
.user-config-card .learn-answer-prompt-delete {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  font-size: 12px;
}

.user-auto-check-config {
  gap: 8px;
  padding: 0 8px 8px;
}

.user-auto-check-config .learn-auto-check-field {
  gap: 5px;
}

.user-auto-check-config .learn-auto-check-field legend,
.user-auto-check-config .learn-auto-check-number span,
.user-auto-check-config .learn-auto-check-radio,
.user-auto-check-config .learn-auto-check-friend {
  font-size: 12px;
}

.user-auto-check-config .learn-auto-check-friends {
  max-height: 132px;
  padding: 5px;
}

.user-auto-check-config .learn-auto-check-actions {
  margin: 0;
}

.chest-checkin-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 68px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--user-accent) 32%, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  color: var(--user-text);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
    var(--user-surface-bg);
  box-shadow: 0 14px 32px rgba(2, 8, 23, 0.18);
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.chest-checkin-button:disabled {
  cursor: default;
  opacity: 1;
}

.chest-checkin-card {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.chest-checkin-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: stretch;
  gap: 5px;
  min-width: 0;
}

.chest-checkin-copy {
  display: grid;
  justify-items: start;
  gap: 2px;
  min-width: 0;
  line-height: 1.08;
  text-align: left;
}

.chest-checkin-copy > span,
.chest-checkin-copy > small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chest-checkin-copy > small {
  font-size: 10px;
  font-weight: 850;
  color: var(--user-muted);
}

.chest-checkin-button.checked-in {
  color: var(--user-text);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--user-surface-bg) 88%, #05080f);
  box-shadow: none;
}

.chest-info-button {
  display: grid;
  place-items: center;
  width: 22px;
  min-width: 22px;
  min-height: 32px;
  align-self: center;
  padding: 0;
  border: 1px solid var(--user-line);
  border-radius: 999px;
  color: var(--user-text);
  background: var(--user-surface-bg);
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.chest-streak-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(34px, 1fr));
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}

.streak-chest {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  min-width: 0;
  min-height: 56px;
  padding: 4px 3px 3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #100a03;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 8px 16px rgba(2, 8, 23, 0.18);
  opacity: 0.78;
  transform: translateY(0);
  transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.streak-chest-1 {
  background: linear-gradient(160deg, #d6fff1 0%, #63e6be 48%, #168e77 100%);
}

.streak-chest-2 {
  background: linear-gradient(160deg, #eff6ff 0%, #7dd3fc 48%, #2563eb 100%);
}

.streak-chest-3 {
  background: linear-gradient(160deg, #fff7d6 0%, #fbbf24 48%, #d97706 100%);
}

.streak-chest-4 {
  background: linear-gradient(160deg, #ffe4f0 0%, #fb7185 48%, #be123c 100%);
}

.streak-chest-5 {
  background: linear-gradient(160deg, #f5e8ff 0%, #c084fc 48%, #7c3aed 100%);
}

.streak-chest-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.32));
}

.streak-chest small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.streak-chest-status {
  display: block;
  max-width: 100%;
  min-height: 11px;
  overflow: hidden;
  padding: 1px 4px;
  border-radius: 999px;
  color: rgba(15, 23, 42, 0.92);
  background: rgba(255, 255, 255, 0.56);
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.streak-chest-status:empty {
  display: none;
}

.streak-chest.opened {
  opacity: 0.95;
}

.streak-chest.opened .streak-chest-icon {
  border-radius: 999px;
  color: #14532d;
  background: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 950;
}

.streak-chest.active {
  border-color: var(--a1-sw-text, rgba(255, 255, 255, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 2px var(--a1-sw-line, rgba(255, 255, 255, 0.22)),
    0 12px 24px rgba(2, 8, 23, 0.24);
  opacity: 1;
  transform: translateY(-2px);
}

.streak-chest.available .streak-chest-status {
  color: #052e16;
  background: rgba(220, 252, 231, 0.86);
}

.streak-chest.waiting {
  color: #0f172a;
  background: linear-gradient(160deg, #eff6ff 0%, #93c5fd 48%, #64748b 100%);
}

.streak-chest.waiting .streak-chest-status {
  color: #07111f;
  background: rgba(255, 255, 255, 0.78);
}

.streak-chest.future {
  color: #dbe3ed;
  background: linear-gradient(160deg, #d8dee8 0%, #94a3b8 50%, #475569 100%);
  box-shadow: none;
  opacity: 0.52;
  filter: saturate(0.35);
  transform: none;
}

.chest-info-button:hover,
.chest-info-button:focus-visible,
.chest-info-button[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--user-accent) 62%, transparent);
  outline: none;
  background: color-mix(in srgb, var(--user-accent) 13%, var(--user-surface-bg));
}

.chest-info-panel {
  padding: 8px 9px;
  border: 1px solid var(--user-line);
  border-radius: 8px;
  color: var(--user-muted);
  background: color-mix(in srgb, var(--user-accent) 8%, var(--user-surface-bg));
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

.treasure-chest {
  font-size: 24px;
  line-height: 1;
}

.streak-bar-card {
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 10px;
}

.user-streak-mini {
  gap: 4px;
  min-height: 31px;
  padding: 5px 7px;
  border-radius: 8px;
  box-shadow: none;
}

.streak-bar-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.streak-bar-heading strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-streak-mini .streak-bar-heading {
  gap: 6px;
}

.user-streak-mini .streak-bar-heading > span {
  font-size: 9px;
}

.user-streak-mini .streak-bar-heading strong {
  font-size: 14px;
}

.streak-meter {
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(229, 234, 240, 0.09);
}

.user-streak-mini .streak-meter {
  height: 4px;
}

.streak-meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #34d399, #facc15 52%, #f97316);
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.32);
  transition: width 180ms ease;
}

.user-logout-button {
  min-width: 68px;
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.user-account-line {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  min-width: 0;
}

.user-account-line-hidden {
  display: none;
}

.user-panel-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
}

.user-panel-toggle > span:first-child {
  font-size: 15px;
  font-weight: 850;
}

.user-panel-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-right: 12px;
}

.user-panel-toggle-row .user-panel-toggle {
  flex: 1;
  min-width: 0;
}

/* Open sections point their disclosure chevron down, like every other
   collapsible in the app; the toggles already maintain aria-expanded. */
.user-panel-toggle .a1-chevron {
  transition: transform 0.15s ease;
}

.user-panel-toggle[aria-expanded="true"] .a1-chevron {
  transform: rotate(90deg);
}

/* The letter-spaced caption ran wider than the stat tile's content box. */
#storage-detail {
  font-size: 10px;
  letter-spacing: 0.02em;
}

.profile-edit-toggle {
  flex: 0 0 auto;
  width: auto;
  min-width: 62px;
  max-width: max-content;
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.profile-toggle-row .profile-edit-toggle {
  flex: 0 0 auto;
  width: auto;
  min-width: 62px;
  max-width: max-content;
  min-height: 32px;
  padding: 0 10px;
}

.user-toggle-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.user-action-message {
  min-height: 20px;
  margin: 0;
}

.user-panel-toggle.has-alert .user-toggle-meta {
  color: var(--text);
}

.notification-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(240, 109, 109, 0.13);
}

.user-drawer-body,
.user-profile-panel {
  display: grid;
  gap: 12px;
}

.user-profile-panel {
  gap: 10px;
  padding-top: 0;
  padding-bottom: 12px;
}

.profile-compact-list {
  display: grid;
  gap: 0;
  padding: 0 14px;
}

.profile-compact-row {
  display: grid;
  grid-template-columns: minmax(88px, 0.42fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 34px;
  padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--user-line) 72%, transparent);
}

.profile-compact-row:last-child {
  border-bottom: 0;
}

.profile-compact-row > span {
  color: var(--user-muted);
  font-size: 12px;
  font-weight: 850;
}

.profile-compact-row > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--user-text);
  font-size: 13px;
  font-weight: 850;
}

.profile-compact-row > .profile-edit-control,
.profile-email-code-row > .code-field {
  grid-column: 2;
  min-width: 0;
  width: 100%;
}

.profile-inline-form {
  gap: 8px;
  min-width: 0;
}

.profile-inline-form .profile-form-actions {
  margin: 0 14px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--user-line) 72%, transparent);
}

.profile-inline-form .avatar-message {
  margin: 0 14px;
}

.profile-inline-form.is-editing .profile-compact-row {
  min-height: 48px;
}

.profile-inline-form.is-editing .profile-compact-row > input,
.profile-inline-form.is-editing .profile-compact-row > select {
  height: 40px;
  min-height: 40px;
}

.profile-compact-avatar-row > strong {
  display: flex;
  align-items: center;
}

.profile-inline-avatar {
  width: 30px;
  height: 30px;
  font-size: 17px;
}

.friend-new-dot {
  width: 8px;
  min-width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--user-accent, var(--cyan));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--user-accent, var(--cyan)) 14%, transparent);
}

.profile-edit-form {
  display: grid;
  gap: 12px;
  margin: 0 14px;
  padding: 12px 0 0;
  border-top: 1px solid var(--user-line);
}

.profile-edit-grid {
  display: grid;
  gap: 10px;
}

.profile-edit-row {
  display: grid;
  grid-template-columns: minmax(88px, 0.42fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: var(--user-text);
}

.profile-edit-row > span {
  margin: 0;
  color: var(--user-muted);
  font-size: 12px;
  font-weight: 850;
}

.profile-edit-row input,
.profile-edit-row select {
  min-width: 0;
}

.profile-avatar-edit-row {
  align-items: start;
}

.user-feedback-body,
.user-services-body,
.user-privacy-body {
  display: grid;
  /* An explicit minmax(0, 1fr) track, not the implicit auto one: content
     min-width (the nowrap service-status pills) must never size the column
     past the panel, which clipped these rows ~19px off a 390px phone. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.feedback-report-form {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--user-line);
  border-radius: 8px;
  /* Surface, not surface-3 — same reasoning as .user-config-section. */
  background: var(--a1-sw-surface, rgba(15, 21, 32, 0.5));
}

.feedback-report-form label {
  display: grid;
  gap: 5px;
}

.feedback-report-form label > span,
.feedback-report-kind {
  color: var(--user-muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.feedback-report-form input,
.feedback-report-form select,
.feedback-report-form textarea {
  min-width: 0;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--user-line);
  border-radius: 8px;
  color: var(--user-text);
  background: var(--user-surface-bg);
  font: inherit;
}

.feedback-report-form textarea {
  min-height: 120px;
  padding: 10px;
  resize: vertical;
  line-height: 1.45;
}

.feedback-report-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.feedback-report-actions .form-message {
  margin: 0;
}

.feedback-report-list {
  display: grid;
  gap: 10px;
}

.feedback-report-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--user-line);
  border-radius: 8px;
  background: var(--user-surface-soft);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--user-accent-2) 46%, transparent);
}

.feedback-report-card.accepted {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--green) 56%, transparent);
}

.feedback-report-card-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.feedback-report-card-main > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.feedback-report-card strong,
.feedback-report-card small,
.feedback-report-card p,
.feedback-report-review {
  min-width: 0;
}

.feedback-report-card strong {
  color: var(--user-text);
  font-size: 14px;
}

.feedback-report-card small,
.feedback-report-card p,
.feedback-report-review {
  color: var(--user-muted);
  font-size: 12px;
  line-height: 1.45;
}

.feedback-report-card p {
  margin: 0;
  white-space: pre-wrap;
}

.feedback-report-review {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.feedback-report-review span {
  padding: 4px 7px;
  border: 1px solid var(--user-line);
  border-radius: 999px;
  background: var(--a1-sw-surface-2, rgba(15, 21, 32, 0.74));
}

.services-access-line {
  padding: 10px 12px;
  border: 1px solid var(--user-line);
  border-radius: 8px;
  color: var(--user-text);
  background: var(--a1-sw-surface-3, rgba(15, 21, 32, 0.5));
  font-size: 13px;
  font-weight: 800;
}

.privacy-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.privacy-form .row-title {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--user-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.privacy-select-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(116px, 152px);
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 8px;
  border: 1px solid var(--user-line);
  border-radius: 8px;
  background: var(--a1-sw-surface-3, rgba(15, 21, 32, 0.5));
  color: var(--user-text);
  font-size: 12px;
  font-weight: 800;
}

.privacy-select-row > span {
  min-width: 0;
  color: var(--user-text);
  font-size: 12px;
  line-height: 1.3;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

.privacy-select-row select {
  min-width: 0;
  height: 32px;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--user-line);
  border-radius: 8px;
  color: var(--user-text);
  background: var(--user-surface-bg);
  font: inherit;
}

.privacy-message {
  min-height: 18px;
  margin: -4px 0 0;
  font-size: 12px;
}

.profile-avatar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  align-items: center;
  gap: 12px;
}

.avatar-controls {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.avatar-picker {
  display: grid;
  grid-template-columns: repeat(6, 38px);
  gap: 7px;
  justify-content: end;
}

.avatar-option {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--text);
  background: var(--a1-sw-surface, #101722);
  font-size: 21px;
}

.avatar-option.active,
.avatar-option:focus-visible {
  border-color: rgba(255, 208, 102, 0.7);
  background: rgba(255, 208, 102, 0.14);
  box-shadow: 0 0 0 3px rgba(255, 208, 102, 0.11);
}

.avatar-upload-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--user-line);
  border-radius: 8px;
  color: var(--user-text);
  background: var(--user-surface-bg);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.avatar-upload-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.avatar-image-frame {
  overflow: hidden;
}

.avatar-image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-message {
  min-height: 20px;
  margin: -4px 0 0;
}

.user-friends-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.user-friends-header p {
  margin: 4px 0 0;
}

.user-friends-body,
.friend-result-list,
.friend-list {
  display: grid;
  gap: 10px;
}

.friend-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  gap: 10px;
  align-items: end;
}

.friend-search-form label {
  min-width: 0;
}

.friend-list-heading {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.friend-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(15, 21, 32, 0.72));
}

.friend-card-viewable {
  cursor: pointer;
}

.friend-card-viewable:hover,
.friend-card-viewable:focus-visible {
  border-color: rgba(53, 212, 255, 0.42);
}

.friend-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #071019;
  background: linear-gradient(135deg, var(--amber), var(--cyan));
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.friend-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.friend-main strong,
.friend-main small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-main small {
  color: var(--muted);
  font-size: 12px;
}

.friend-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.friend-action .primary-button,
.friend-action .ghost-button {
  min-height: 34px;
  min-width: 74px;
  padding: 0 10px;
  flex: 0 1 auto;
}

.friend-icon-button {
  appearance: none;
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--cyan);
  background: transparent;
  cursor: pointer;
}

.friend-icon-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.friend-icon-button.danger {
  color: var(--muted);
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
}

.friend-icon-button:hover:not(:disabled),
.friend-icon-button:focus-visible:not(:disabled) {
  color: var(--text);
  outline: none;
}

.friend-icon-button:focus-visible:not(:disabled) {
  outline: 2px solid rgba(53, 212, 255, 0.42);
  outline-offset: 2px;
}

.friend-icon-button:disabled {
  color: color-mix(in srgb, var(--muted) 42%, transparent);
  cursor: default;
}

.friend-schedule-modal-open {
  overflow: hidden;
}

.friend-schedule-panel {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  min-height: var(--app-live-viewport-height, 100dvh);
}

.friend-schedule-panel.hidden {
  display: none;
}

.friend-schedule-modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: clamp(12px, 3vw, 28px);
  overflow-y: auto;
  background: var(--a1-sw-scrim, rgba(4, 8, 14, 0.76));
  backdrop-filter: blur(14px);
  -webkit-overflow-scrolling: touch;
}

.friend-schedule-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(53, 212, 255, 0.08), rgba(15, 21, 32, 0.98) 42%),
    rgba(15, 21, 32, 0.96);
}

.friend-schedule-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  width: min(1180px, 100%);
  max-height: calc(var(--app-live-viewport-height, 100dvh) - clamp(24px, 6vw, 56px));
  overflow: auto;
  padding: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.44);
  outline: none;
  min-width: 0;
}

.friend-schedule-loading {
  min-height: 160px;
  place-items: center;
}

.friend-schedule-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.friend-schedule-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.friend-schedule-modal-title span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.friend-schedule-modal-title h3,
.friend-schedule-modal-title small {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-schedule-modal-title h3 {
  color: var(--text);
  font-size: 17px;
}

.friend-schedule-modal-title small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.friend-schedule-close {
  display: grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  background: var(--a1-sw-surface-2, rgba(8, 13, 22, 0.74));
  font-size: 21px;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
}

.friend-schedule-close:hover,
.friend-schedule-close:focus-visible {
  border-color: rgba(53, 212, 255, 0.48);
  color: var(--cyan);
}

.friend-schedule-layout {
  grid-template-columns: 1fr;
  gap: 8px;
  min-height: 0;
}

.friend-schedule-calendar-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}

.friend-schedule-term-header.schedule-header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  row-gap: 8px;
  min-height: 58px;
  padding: 10px 12px;
}

.friend-schedule-term-title {
  appearance: none;
  display: grid;
  gap: 3px;
  justify-items: center;
  width: 100%;
  min-height: 42px;
  min-width: 0;
  padding: 2px 8px;
  border: 0;
  border-radius: 8px;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.friend-schedule-term-title:focus-visible {
  outline: 2px solid rgba(53, 212, 255, 0.46);
  outline-offset: 2px;
}

.friend-schedule-term-title:hover strong,
.friend-schedule-term-title:focus-visible strong {
  color: var(--cyan);
}

.friend-schedule-term-title small {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-schedule-term-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-schedule-term-menu {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

.friend-schedule-term-menu.hidden {
  display: none;
}

.friend-schedule-term-option {
  appearance: none;
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--text);
  background: var(--a1-sw-surface-2, rgba(13, 19, 30, 0.74));
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.friend-schedule-term-option span,
.friend-schedule-term-option small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-schedule-term-option span {
  font-size: 12px;
  font-weight: 900;
}

.friend-schedule-term-option small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
}

.friend-schedule-term-option:hover,
.friend-schedule-term-option:focus-visible,
.friend-schedule-term-option.active {
  border-color: rgba(53, 212, 255, 0.44);
  color: var(--cyan);
  outline: none;
}

.friend-schedule-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 0 12px 12px;
}

.friend-schedule-mini-progress {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.friend-schedule-mini-progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.friend-schedule-mini-progress-copy span,
.friend-schedule-mini-progress-copy strong {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-schedule-mini-progress-copy span {
  color: var(--muted);
  font-weight: 850;
}

.friend-schedule-mini-progress-copy strong {
  color: var(--text);
  font-weight: 950;
}

.friend-schedule-mini-track {
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  background: var(--a1-sw-surface-2, rgba(7, 11, 18, 0.62));
}

.friend-schedule-mini-track span {
  display: block;
  width: 0;
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  box-shadow: 0 0 18px rgba(53, 212, 255, 0.28);
}

.friend-schedule-term-stats {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.friend-schedule-term-stats span {
  padding: 5px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  background: var(--a1-sw-surface-2, rgba(20, 27, 39, 0.62));
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.friend-schedule-board-wrap {
  min-height: 0;
  max-height: min(68vh, 720px);
  overflow: auto;
}

.friend-schedule-block span {
  color: color-mix(in srgb, var(--muted) 82%, var(--course-accent));
}

.friend-schedule-course-detail-backdrop {
  z-index: 320;
}

.friend-schedule-course-detail-modal {
  width: min(720px, calc(100dvw - 28px));
}

.friend-schedule-unscheduled {
  margin: 0 12px 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.friend-shared-panel {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.friend-shared-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.friend-shared-header h4 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.friend-shared-course-list,
.friend-shared-home-list {
  display: grid;
  gap: 8px;
}

.friend-calendar-items {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--line-soft);
}

.friend-calendar-items:first-child {
  border-top: 0;
}

.friend-personal-calendar-panel {
  align-content: start;
  max-height: min(68vh, 720px);
}

.friend-calendar-agenda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.friend-calendar-day-card .calendar-pill {
  min-width: 0;
  cursor: default;
}

.friend-calendar-day-card .calendar-pill strong,
.friend-calendar-day-card .calendar-pill span {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.friend-calendar-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 180px;
  padding: 20px;
  text-align: center;
}

.friend-calendar-empty > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--user-accent, var(--cyan));
  background: color-mix(in srgb, var(--user-accent, var(--cyan)) 12%, transparent);
}

.friend-calendar-empty svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.friend-calendar-empty p {
  margin: 0;
  overflow-wrap: anywhere;
}

.friend-calendar-day-card .calendar-pill:hover,
.friend-calendar-day-card .calendar-pill:focus-visible {
  box-shadow: none;
}

.friend-homework-panel {
  align-content: start;
  max-height: min(68vh, 720px);
}

.friend-homework-header {
  position: sticky;
  top: -12px;
  z-index: 2;
  margin: -12px -12px 0;
  padding: 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--a1-sw-surface, rgba(15, 21, 32, 0.96));
  backdrop-filter: blur(10px);
}

.friend-shared-course {
  cursor: pointer;
}

.friend-shared-course:hover,
.friend-shared-course:focus-visible {
  border-color: rgba(53, 212, 255, 0.42);
  outline: none;
}

.friend-shared-home-item {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(15, 21, 32, 0.64));
}

.friend-shared-home-item strong,
.friend-shared-home-item span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.friend-shared-home-item strong {
  color: var(--text);
  font-size: 13px;
}

.friend-shared-home-item span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.friend-shared-private {
  min-height: 180px;
  place-content: center;
  justify-items: center;
  text-align: center;
}

.friend-shared-private strong {
  color: var(--text);
  font-size: 15px;
}

.friend-shared-private span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.friend-shared-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--a1-sw-surface, rgba(8, 13, 22, 0.86));
}

.friend-shared-tabs button {
  appearance: none;
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid var(--line-soft);
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-shared-tabs button:last-child {
  border-right: 0;
}

.friend-shared-tabs button.active {
  color: var(--text);
  background: rgba(53, 212, 255, 0.12);
}

.friend-shared-tabs button.private:not(.active) {
  color: color-mix(in srgb, var(--muted) 58%, transparent);
}

.friend-shared-tabs button:hover,
.friend-shared-tabs button:focus-visible {
  color: var(--cyan);
  outline: none;
}

@media (max-width: 980px) {
  .friend-schedule-modal-backdrop {
    padding: 0;
  }

  .friend-schedule-modal {
    width: 100%;
    max-height: var(--app-live-viewport-height, 100dvh);
    min-height: var(--app-live-viewport-height, 100dvh);
    gap: 8px;
    padding: 8px;
    border-radius: 0;
  }

  .friend-schedule-modal-header {
    gap: 10px;
    min-height: 38px;
  }

  .friend-schedule-modal-title h3 {
    font-size: 15px;
  }

  .friend-schedule-modal-title small {
    display: none;
  }

  .friend-schedule-close {
    width: 32px;
    min-width: 32px;
    height: 32px;
    font-size: 19px;
  }

  .friend-schedule-calendar-panel {
    border-radius: 10px;
  }

  .friend-schedule-term-header.schedule-header {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    gap: 6px;
    min-height: 48px;
    padding: 7px 6px;
  }

  .friend-schedule-term-title {
    min-height: 42px;
    padding: 2px 4px;
  }

  .friend-schedule-term-title strong {
    font-size: 15px;
  }

  .friend-schedule-term-title small {
    font-size: 10px;
    white-space: normal;
  }

  .friend-schedule-term-menu {
    grid-template-columns: 1fr;
    max-height: min(34dvh, 280px);
    overflow: auto;
  }

  .friend-schedule-overview {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 0 8px 8px;
  }

  .friend-schedule-term-stats {
    justify-content: space-between;
    gap: 5px;
  }

  .friend-schedule-term-stats span {
    flex: 1 1 0;
    padding: 5px 6px;
    text-align: center;
    font-size: 10px;
  }

  .friend-schedule-board-wrap {
    max-height: min(54dvh, 430px);
  }

  .friend-roadmap-progress-details summary {
    padding: 9px 10px;
  }
}

.friend-schedule-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.friend-schedule-header > div:first-child {
  min-width: 0;
}

.friend-schedule-header h4 {
  margin: 0 0 3px;
  font-size: 15px;
}

.friend-schedule-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  min-width: min(100%, 260px);
}

.friend-schedule-nav {
  appearance: none;
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.friend-schedule-nav span {
  display: block;
  font-size: 29px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-1px);
}

.friend-schedule-nav:hover:not(:disabled),
.friend-schedule-nav:focus-visible:not(:disabled) {
  color: var(--cyan);
  background: transparent;
  outline: none;
}

.friend-schedule-nav:focus-visible:not(:disabled) {
  outline: 2px solid rgba(53, 212, 255, 0.42);
  outline-offset: 1px;
}

.friend-schedule-nav:disabled {
  color: color-mix(in srgb, var(--muted) 42%, transparent);
  cursor: default;
}

@media (max-width: 980px) {
  .friend-schedule-nav {
    width: 32px;
    min-width: 32px;
    height: 36px;
    min-height: 36px;
  }

  .friend-schedule-nav span {
    font-size: 27px;
  }
}

.friend-schedule-position {
  min-width: 42px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.friend-schedule-list {
  display: grid;
  gap: 8px;
}

.friend-schedule-planned-group {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.friend-schedule-course {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface, #101722);
}

.friend-schedule-course-unscheduled {
  border-style: dashed;
  background: var(--a1-sw-surface-2, rgba(15, 21, 32, 0.78));
}

.friend-schedule-course span,
.friend-schedule-course strong,
.friend-schedule-course small {
  min-width: 0;
}

.friend-schedule-course-main,
.friend-schedule-course-meta {
  display: grid;
  gap: 2px;
  align-content: start;
}

.friend-schedule-course-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.friend-schedule-course strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.friend-schedule-course small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.friend-schedule-course-meta strong {
  white-space: nowrap;
}

.friend-schedule-same-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border: 1px solid rgba(73, 209, 125, 0.36);
  border-radius: 999px;
  color: #b9f8cf;
  background: rgba(73, 209, 125, 0.12);
  font-size: 11px;
  font-weight: 800;
}

.friend-roadmap-progress {
  display: grid;
  gap: 8px;
  padding: 0 2px 2px;
}

.friend-roadmap-progress-panel {
  padding: 10px 12px 12px;
}

.friend-roadmap-progress-details {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-3, rgba(8, 13, 22, 0.45));
  overflow: hidden;
}

.friend-roadmap-progress-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.friend-roadmap-progress-details summary::-webkit-details-marker {
  display: none;
}

.friend-roadmap-progress-details summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0;
  color: var(--cyan);
  background: transparent;
  font-weight: 900;
}

.friend-roadmap-progress-details[open] summary::after {
  content: "-";
}

.friend-roadmap-progress-details summary strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.friend-roadmap-progress-list {
  display: grid;
  gap: 8px;
  padding: 0 10px 10px;
}

.friend-roadmap-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, 0.8fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--a1-sw-surface-2, rgba(15, 21, 32, 0.58));
}

.friend-roadmap-progress-row strong,
.friend-roadmap-progress-row span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.friend-roadmap-progress-row > span:last-child {
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

.friend-roadmap-progress-row.met > span:last-child {
  color: #b9f8cf;
}

.friend-roadmap-progress-row.error {
  grid-template-columns: 1fr;
}

.friend-schedule-updated {
  margin: 0;
}

.user-page .data-panel {
  border-color: var(--user-line);
  background: var(--user-panel-bg);
}

.user-page .ghost-button,
.user-page .user-panel-toggle,
.user-page .user-count-button,
.user-page .avatar-option,
.user-page .avatar-upload-button {
  color: var(--user-text);
  border-color: var(--user-line);
  background: var(--user-surface-bg);
}

.user-page .primary-button {
  color: var(--user-primary-ink);
  background: linear-gradient(135deg, var(--user-accent), var(--user-accent-2));
}

.user-page .user-coin-card,
.user-page .user-friend-card,
.user-page .user-friend-count-card,
.user-page .streak-bar-card,
.user-page .account-card,
.user-page .friend-card,
.user-page .friend-schedule-card {
  border-color: var(--user-line);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--user-accent) 15%, transparent), transparent 72%),
    var(--user-surface-soft);
}

.user-page .friend-schedule-course {
  --friend-course-accent: var(--user-accent);
  --friend-course-bg: color-mix(in srgb, var(--user-accent) 12%, transparent);
  --friend-course-line: var(--user-line);
  --friend-course-chip-bg: color-mix(in srgb, var(--user-accent) 14%, transparent);
  --friend-course-chip-fg: var(--user-text);
  border-color: var(--friend-course-line);
  background:
    linear-gradient(135deg, var(--friend-course-bg), var(--user-course-bg) 74%),
    var(--user-course-bg);
  box-shadow: inset 4px 0 0 var(--friend-course-accent);
}

.user-page .friend-schedule-course strong:first-child {
  color: var(--friend-course-chip-fg);
}

.user-page .friend-schedule-course > span:first-child small {
  color: var(--user-muted);
}

.user-page .friend-avatar,
.user-page .user-summary-avatar {
  background: linear-gradient(135deg, var(--user-accent), var(--user-accent-2));
}

.user-page :where(
  .user-summary-copy strong,
  .user-coin-card strong,
  .user-count-button span,
  .streak-bar-heading strong,
  .account-card strong,
  .friend-main strong,
  .friend-schedule-header h4,
  .friend-schedule-course strong,
  .row-title
) {
  color: var(--user-text);
}

.user-page :where(
  .user-summary-copy small,
  .user-coin-card small,
  .user-count-button small,
  .streak-bar-heading > span,
  .account-label,
  .account-card small,
  .friend-main small,
  .friend-schedule-course small,
  .row-meta,
  .muted,
  .user-toggle-meta
) {
  color: var(--user-muted);
}

.user-page .streak-meter span,
.user-page .storage-meter span {
  background: linear-gradient(90deg, var(--user-accent), var(--user-accent-2));
}

.section-heading {
  margin: 4px 0 14px;
}

.section-heading h3 {
  margin: 0;
  font-size: 20px;
}

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

.integration-form {
  display: grid;
  /* start, not stretch: the phone dialog is forced to 100dvh, and stretched
     auto rows scattered ~450px of blank space between the fields. */
  align-content: start;
  gap: 13px;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--line-soft);
}

.integration-terms-check {
  border-color: var(--line-soft);
  background: var(--a1-sw-surface-2, rgba(10, 16, 25, 0.72));
}

.integration-actions {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.integration-message {
  display: grid;
  gap: 6px;
  min-width: 0;
  min-height: 20px;
  color: var(--amber);
  font-size: 13px;
  line-height: 1.45;
}

.integration-message a {
  color: var(--cyan);
}

.integration-field-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.integration-help-badge {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid rgba(53, 212, 255, 0.42);
  border-radius: 999px;
  background: rgba(53, 212, 255, 0.12);
  color: var(--cyan);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.integration-help-badge[aria-expanded="true"] {
  border-color: rgba(73, 209, 125, 0.62);
  background: rgba(73, 209, 125, 0.16);
  color: var(--green);
}

.integration-summary-message {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.device-code-line {
  display: block;
  margin-bottom: 4px;
}

.device-code-value {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(53, 212, 255, 0.14);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  letter-spacing: 2px;
  user-select: all;
}

.device-code-status {
  color: var(--muted);
  font-size: 12px;
}

.integration-error-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  color: var(--red);
  font-weight: 850;
}

.integration-error-help {
  width: 16px;
  height: 16px;
  font-size: 10px;
}

.integration-error-detail {
  display: block;
  max-width: 100%;
  max-height: 170px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(239, 68, 68, 0.26);
  border-radius: 7px;
  color: var(--a1-sw-text, #fecaca);
  background: var(--a1-sw-surface-3, rgba(127, 29, 29, 0.18));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.integration-error-detail.hidden {
  display: none;
}

.integration-panel {
  overflow: hidden;
  border-color: var(--user-line);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--user-accent) 10%, transparent), transparent 74%),
    var(--user-surface-bg);
}

.integration-helper {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.integration-compact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 84px;
  padding: 14px;
}

.integration-compact-copy {
  display: grid;
  flex: 1 1 auto;
  gap: 6px;
  min-width: 0;
}

.integration-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.integration-title-line h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-title-line .status-pill {
  flex: 0 0 auto;
}

.integration-account {
  width: fit-content;
  max-width: 100%;
  margin: 2px 0 0;
  overflow: hidden;
  padding: 5px 8px;
  border: 1px solid var(--user-line);
  border-radius: 6px;
  color: var(--text);
  background: var(--a1-sw-surface-3, rgba(8, 13, 21, 0.46));
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-compact-actions {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 10px;
  flex: 0 0 auto;
}

.compact-action-button {
  min-width: 108px;
}

body.integration-modal-open {
  overflow: hidden;
}

.user-install-panel {
  overflow: hidden;
}

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

@media (hover: hover) {
  .user-install-app-button:hover{
    background: rgba(53, 212, 255, 0.06);
  }
}

.user-install-app-button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -3px;
}

.user-install-app-button:disabled {
  cursor: default;
  opacity: 1;
}

.user-install-app-icon {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(53, 212, 255, 0.34);
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.1);
}

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

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

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

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

.user-install-app-copy small {
  color: var(--muted);
  font-size: 0.78rem;
}

.user-install-app-action {
  min-width: 62px;
  padding: 7px 11px;
  border: 1px solid rgba(53, 212, 255, 0.28);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.08);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
}

.user-install-app-button.is-installed .user-install-app-icon {
  color: #49d17d;
  border-color: rgba(73, 209, 125, 0.34);
  background: rgba(73, 209, 125, 0.1);
}

.user-install-app-button.is-installed .user-install-app-action {
  color: #49d17d;
  border-color: rgba(73, 209, 125, 0.28);
  background: rgba(73, 209, 125, 0.08);
}

body.app-install-modal-open {
  overflow: hidden;
}

.app-install-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2150;
  padding: 24px;
  display: grid;
  place-items: center;
  overflow: auto;
  background: var(--a1-sw-scrim, rgba(3, 8, 14, 0.78));
  backdrop-filter: blur(12px);
}

.app-install-modal {
  width: min(480px, 100%);
  max-height: min(720px, calc(var(--app-live-viewport-height, 100dvh) - 48px));
  overflow: auto;
  border: 1px solid rgba(53, 212, 255, 0.34);
  border-radius: 24px;
  padding: 22px;
  color: var(--text);
  background:
    radial-gradient(circle at 85% 0%, rgba(53, 212, 255, 0.12), transparent 36%),
    var(--a1-sw-surface, #111a27);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
}

.app-install-modal-header,
.app-install-modal-heading {
  display: flex;
  align-items: center;
}

.app-install-modal-header {
  justify-content: space-between;
  gap: 18px;
}

.app-install-modal-heading {
  min-width: 0;
  gap: 12px;
}

.app-install-modal-heading h3 {
  margin: 3px 0 0;
  font-size: 1.16rem;
}

.app-install-modal-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #06121b;
  background: linear-gradient(135deg, #35d4ff, #49d17d);
  font-weight: 900;
}

.app-install-modal-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: var(--a1-sw-surface-2, rgba(255, 255, 255, 0.025));
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
}

@media (hover: hover) {
  .app-install-modal-close:hover{
    color: var(--text);
    border-color: rgba(53, 212, 255, 0.34);
  }
}

.app-install-steps {
  margin: 24px 0 18px;
  padding: 0;
  display: grid;
  gap: 12px;
  list-style: none;
  counter-reset: install-step;
}

.app-install-browser-groups {
  display: grid;
  gap: 0;
  margin: 20px 0 18px;
}

.app-install-browser-section {
  min-width: 0;
  padding: 0 0 18px;
}

.app-install-browser-section + .app-install-browser-section {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.app-install-browser-section:last-child {
  padding-bottom: 0;
}

.app-install-browser-section h4 {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
}

.app-install-browser-section .app-install-steps {
  margin: 10px 0 0;
}

.app-install-steps li {
  min-height: 48px;
  padding: 12px 14px 12px 54px;
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--a1-sw-line, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  color: var(--text);
  background: var(--a1-sw-surface-2, rgba(255, 255, 255, 0.025));
  line-height: 1.45;
  counter-increment: install-step;
}

.app-install-steps li::before {
  content: counter(install-step);
  width: 28px;
  height: 28px;
  position: absolute;
  left: 14px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--cyan);
  background: rgba(53, 212, 255, 0.11);
  font-size: 0.78rem;
  font-weight: 900;
}

.app-install-modal-note {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.app-install-done-button {
  width: 100%;
}

@media (max-width: 720px) {
  .user-install-app-button {
    min-height: 72px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 11px;
    padding: 12px 14px;
  }

  .user-install-app-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .user-install-app-copy strong {
    font-size: 0.92rem;
  }

  .user-install-app-action {
    min-width: 52px;
    padding: 6px 9px;
  }

  .app-install-modal-backdrop {
    padding: 0;
    place-items: end center;
  }

  .app-install-modal {
    width: 100%;
    max-height: min(86dvh, 720px);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 24px 24px 0 0;
    padding: 20px 18px max(20px, var(--a1-safe-bottom));
  }
}

.integration-config-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 305;
  display: grid;
  place-items: center;
  width: 100dvw;
  height: var(--app-live-viewport-height, 100dvh);
  padding: 18px;
  overflow: auto;
  background: var(--a1-sw-scrim, rgba(3, 7, 13, 0.72));
  backdrop-filter: blur(5px);
}

.integration-config-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(480px, calc(100dvw - 28px));
  max-height: calc(var(--app-live-viewport-height, 100dvh) - 28px);
  overflow: hidden;
  border: 1px solid var(--user-line);
  border-radius: 10px;
  background:
    linear-gradient(180deg, var(--a1-sw-surface, rgba(20, 27, 39, 0.98)), var(--a1-sw-surface, rgba(13, 19, 29, 0.98))),
    var(--user-surface-bg);
  box-shadow: 0 28px 86px rgba(0, 0, 0, 0.56);
}

.integration-config-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--user-line);
  /* The header is part of the white card; the scrim token painted it as a
     translucent dark band that read as "floating outside the modal". */
  background: var(--panel, #fff);
}

.integration-config-modal-header > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.integration-config-modal-header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.integration-config-modal-close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--user-line);
  border-radius: 999px;
  color: var(--text);
  background: var(--a1-sw-surface, rgba(15, 21, 32, 0.9));
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.integration-modal-form {
  overflow-y: auto;
  border-top: 0;
}

.refresh-icon-button.compact-action-button {
  min-width: 44px;
}

@media (max-width: 980px) {
  .auth-view,
  .app-view,
  .split-grid,
  .home-board,
  .chat-layout,
  .email-layout,
  .comparison-layout,
  .homework-grade-layout,
  .homework-review-layout,
  .homework-source-grid,
  .schedule-layout,
  .roadmap-workspace,
  .integration-grid {
    grid-template-columns: 1fr;
  }

  .auth-view {
    padding: 18px;
  }

  .auth-visual {
    min-height: 360px;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .logout-button {
    position: static;
    width: 100%;
    margin-top: 18px;
  }

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

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

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

  .learn-workspace-shell {
    grid-template-columns: 1fr;
  }

  .learn-workspace-explorer {
    max-height: 320px;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .learn-homework-course-toggle {
    grid-template-columns: 26px minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .learn-workspace-reference-grid {
    grid-template-columns: 1fr;
  }

  .auth-view,
  .workspace {
    padding: 12px;
  }

  .auth-panel,
  .auth-visual {
    padding: 18px;
  }

  h1 {
    font-size: 38px;
  }

  .workspace-header,
  .code-row,
  .user-chip,
  .home-welcome,
  .home-sync-actions,
  .home-reminder-status,
  .home-panel-header,
  .home-form-actions,
  .calendar-header,
  .calendar-toolbar,
  .chat-active-header,
  .roadmap-controls,
  .homework-header,
  .homework-artifact-main,
  .learn-header,
  .learn-actions,
  .learn-logistics-heading,
  .learn-logistics-row,
  .homework-source-card,
  .homework-source-actions,
  .homework-course-grade-header,
  .comparison-controls,
  .discovery-controls,
  .roadmap-program-controls,
  .profile-form-actions,
  .integration-actions,
  .integration-compact-row,
  .integration-compact-actions {
    align-items: stretch;
    flex-direction: column;
  }

	  .integration-actions,
	  .integration-compact-actions,
	  .feedback-report-actions,
	  .profile-form-actions,
  .home-welcome,
  .home-sync-actions,
  .home-reminder-status,
  .home-panel-header,
  .home-form-actions,
  .chat-active-header,
  .homework-header,
  .homework-source-card,
  .homework-source-actions,
  .homework-course-grade-header,
  .roadmap-progress-actions,
  .roadmap-header,
  .roadmap-course-actions,
  .roadmap-progress-heading,
  .roadmap-requirement-row {
    display: flex;
  }

  .learn-workspace-do-backdrop {
    padding: 8px;
  }

  .learn-workspace-do-modal {
    box-sizing: border-box;
    width: calc(100dvw - 16px);
    height: calc(var(--app-live-viewport-height, 100dvh) - 16px);
    max-height: calc(var(--app-live-viewport-height, 100dvh) - 16px);
    border-radius: 10px;
  }

  .homework-header.learn-workspace-do-header {
    align-items: flex-start;
    flex-direction: row;
    min-height: 58px;
    padding: 13px 54px 12px 14px;
  }

  .homework-header.learn-workspace-do-header.learn-workspace-do-detail-header {
    min-height: 64px;
    padding-right: 104px;
  }

  .learn-workspace-do-header .learn-answer-action-close {
    top: 10px;
    right: 10px;
  }

  .learn-workspace-do-detail-header .learn-workspace-do-detail-close {
    min-width: 84px;
    height: 38px;
  }

  .learn-workspace-do-form,
  .learn-workspace-do-detail {
    gap: 10px;
    padding: 12px;
  }

  .learn-workspace-do-form textarea {
    min-height: 72px;
  }

  .learn-workspace-do-policy {
    padding: 10px;
  }

  .learn-workspace-do-actions {
    bottom: 0;
    justify-content: stretch;
    margin: 2px -12px 0;
    padding: 10px 12px max(12px, var(--a1-safe-bottom));
  }

  .learn-workspace-do-actions > * {
    flex: 1 1 0;
    min-width: 0;
  }

  .learn-workspace-do-detail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learn-workspace-do-detail-actions .ghost-button {
    width: 100%;
  }

  .learn-workspace-do-transcript {
    max-height: none;
    overflow: visible;
  }

  .learn-homework-import-backdrop {
    padding: 8px;
  }

  .learn-homework-import-modal {
    box-sizing: border-box;
    width: calc(100dvw - 16px);
    height: calc(var(--app-live-viewport-height, 100dvh) - 16px);
    max-height: calc(var(--app-live-viewport-height, 100dvh) - 16px);
    border-radius: 10px;
  }

  .homework-header.learn-homework-import-header {
    align-items: flex-start;
    flex-direction: row;
    min-height: 0;
    padding: 14px 54px 12px 14px;
  }

  .learn-homework-import-header .learn-answer-action-close {
    top: 10px;
    right: 10px;
  }

  .learn-homework-import-form,
  .learn-homework-import-progress,
  .learn-homework-import-result {
    gap: 10px;
    padding: 12px;
  }

  .learn-homework-import-facts {
    padding: 9px;
  }

  .learn-homework-import-facts > div {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .ghost-button {
    width: 100%;
  }

  .refresh-icon-button {
    width: 44px;
  }

  .homework-source-card {
    display: block;
  }

  .homework-source-summary,
  .homework-hidden-course-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .homework-source-summary .status-pill {
    grid-column: 1 / 2;
    justify-self: start;
  }

  .homework-source-expand {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
  }

  .homework-course-grade-overall,
  .homework-hidden-course-actions {
    width: 100%;
    justify-content: space-between;
  }

  .homework-hidden-course-row {
    align-items: stretch;
  }

  .homework-hidden-course-actions {
    grid-column: 1 / -1;
  }

  .homework-gradescope-detail .homework-source-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .homework-gradescope-detail .compact-action-button {
    min-width: 0;
    width: 100%;
  }

  .learn-homework-view-switch {
    width: 100%;
  }

  .homework-header.learn-homework-header .learn-homework-view-switch {
    width: auto;
    flex: 0 0 auto;
  }

  .homework-header.learn-homework-header {
    align-items: center;
    flex-direction: row;
  }

  .learn-homework-heading {
    flex-wrap: wrap;
  }

  .learn-homework-view-switch-top {
    flex: 1 1 100%;
    width: 100%;
  }

  .learn-workspace-shell {
    min-height: 0;
  }

  .learn-workspace-preview-header,
  .learn-workspace-create-form div {
    align-items: stretch;
    flex-direction: column;
  }

  .learn-workspace-toolbar {
    align-items: center;
    flex-direction: row;
  }

  .learn-workspace-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .learn-workspace-actions button {
    width: 100%;
  }

  .learn-workspace-preview-meta {
    grid-template-columns: 1fr;
  }

  .learn-homework-source-notices > div {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .learn-homework-assignment-card::before {
    display: none;
  }

  .learn-homework-assignment-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    min-height: 0;
    padding: 10px;
  }

  .learn-homework-assignment-card > div {
    grid-column: 1;
    min-width: 0;
  }

  .learn-homework-assignment-card .progress-stat {
    justify-self: end;
  }

  .learn-homework-assignment-actions {
    grid-column: 1;
    grid-row: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    justify-items: stretch;
    gap: 7px;
    width: 100%;
    margin-top: 2px;
  }

  .learn-homework-assignment-actions .progress-stat {
    grid-column: 1 / -1;
    justify-self: end;
    width: auto;
    max-width: 100%;
  }

  .learn-homework-assignment-card .learn-homework-import-button {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
    font-size: 12px;
    min-height: 38px;
  }

  .learn-homework-assignment-list {
    padding: 9px;
  }

  .learn-homework-visual-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .learn-homework-visual-controls label {
    width: 100%;
  }

  .learn-homework-hidden-row {
    grid-template-columns: 1fr;
  }

  .learn-homework-course-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .learn-homework-course-hide {
    align-self: center;
    justify-self: center;
    margin: 0;
  }

  .learn-homework-hidden-row .learn-homework-course-hide {
    margin: 0;
  }

  .homework-gradescope-detail-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .homework-gradescope-regrade-form .homework-upload-actions {
    grid-template-columns: minmax(112px, auto) minmax(0, 1fr);
  }

  .homework-gradescope-regrade-form .primary-button {
    width: auto;
  }

  .feature-grid,
  .metric-grid,
  .home-metric-grid,
  .home-add-form,
  .chat-control-grid,
  .chat-control-form,
  .roadmap-controls,
  .homework-upload-row,
  .homework-upload-actions,
  .comparison-controls,
  .discovery-controls,
  .roadmap-program-controls {
    grid-template-columns: 1fr;
  }

  .home-add-modal-backdrop {
    align-items: start;
    padding: 12px;
  }

  .home-add-modal {
    width: min(100%, 520px);
    max-height: calc(var(--app-live-viewport-height, 100dvh) - 24px);
  }

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

  .learn-answer-match-icon {
    width: 48px;
    min-width: 48px;
    height: 58px;
  }

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

  .learn-answer-card-actions .compact-action-button {
    min-width: 0;
    min-height: 34px;
    padding: 0 6px;
  }

  .learn-answer-submit-target {
    grid-template-columns: 20px minmax(0, 1fr) auto;
  }

  .learn-answer-submit-source {
    display: none;
  }

  .learn-answer-page-map-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .learn-answer-page-map {
    max-height: min(390px, 44vh);
  }

  .learn-answer-prompt-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .learn-workspace-snippet-card .learn-answer-prompt-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .learn-workspace-snippet-card-actions {
    justify-content: flex-end;
  }

  .learn-workspace-snippet-action-menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .learn-workspace-snippet-modal,
  .learn-workspace-snippet-default-modal {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }

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

  .learn-workspace-snippet-edit-modal .learn-answer-prompt-modal-form textarea {
    height: min(220px, 34dvh);
    min-height: 130px;
  }

  .learn-answer-prompt-actions {
    justify-content: flex-start;
  }

  .homework-header.learn-answer-prompts-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .homework-header.learn-answer-prompt-modal-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .learn-answer-prompt-modal-actions {
    margin-left: auto;
  }

  .learn-answer-prompt-modal-form input,
  .learn-answer-prompt-modal-form textarea {
    font-size: 16px;
  }

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

  .learn-answer-compare-backdrop {
    place-items: start stretch;
    padding: 10px;
  }

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

  .learn-answer-submodal-backdrop {
    place-items: start stretch;
    padding: 10px;
  }

  .learn-answer-submodal {
    width: 100%;
    max-height: calc(var(--app-live-viewport-height, 100dvh) - 40px);
  }

  .learn-answer-problem-row {
    grid-template-columns: 1fr;
  }

  .learn-answer-problem-existing-row {
    grid-template-columns: minmax(0, 1fr) 30px;
  }

  .learn-answer-prompt-backdrop,
  .learn-answer-action-backdrop {
    /* Full width, but hug the top so the modal is only as tall as its content
       instead of stretching to full height (which left large blank space). */
    place-items: start stretch;
    width: 100vw;
    min-height: var(--app-live-viewport-height, 100dvh);
    padding: 12px;
  }

  .learn-answer-prompt-modal,
  .learn-answer-action-modal {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(var(--app-live-viewport-height, 100dvh) - 24px);
    border-radius: 10px;
  }

  .learn-answer-prompt-modal-form,
  .learn-answer-action-modal-form {
    min-width: 0;
    padding: 14px;
  }

  .learn-answer-prompt-modal-form textarea {
    height: min(320px, 42dvh);
    min-height: 180px;
  }

  .learn-answer-action-modal-form textarea {
    height: auto;
    min-height: 76px;
  }

  .learn-answer-versions-modal {
    display: flex;
    flex-direction: column;
  }

  .learn-answer-versions-modal > .panel-header {
    flex: 0 0 auto;
  }

  .learn-answer-versions-modal .learn-answer-version-list {
    flex: 1 1 auto;
    align-content: start;
  }

  /* minmax(0, 1fr) — a bare 1fr has an auto minimum, which let the time strip's
     huge min-content blow the column (and modal) far past the screen. */
  .calendar-compose-grid,
  .calendar-repeat-grid {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .calendar-repeat-wide {
    grid-column: auto;
  }

  .chat-shell,
  .chat-layout,
  .chat-thread-panel,
  .chat-message-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .chat-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  

  

  

  

  

  .chat-layout.chat-chat-open .chat-active-header h3,
  .chat-layout.chat-chat-open .chat-active-header p {
    max-width: 100%;
  }

  .chat-layout.chat-chat-open .chat-message-list {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .chat-layout.chat-chat-open .chat-composer,
  .chat-layout.chat-chat-open .chat-message-form {
    flex: 0 0 auto;
    width: auto;
    max-width: calc(100dvw - 20px);
    min-width: 0;
    box-sizing: border-box;
    margin: 8px 10px calc(10px + var(--a1-safe-bottom));
  }

  .chat-layout.chat-chat-open .chat-composer textarea {
    font-size: 16px;
  }

  body:has(.chat-layout.chat-chat-open) {
    overflow: hidden;
  }

  body:has(.chat-layout.chat-chat-open) .app-view,
  body:has(.chat-layout.chat-chat-open) .workspace {
    width: 100dvw;
    max-width: 100dvw;
    overflow: hidden;
  }

  

  

  

  

  

  

  

  

  

  /* Give the open chat the whole screen: hide the app's top bar and bottom nav
     (the chat header's back button returns to the thread list) so the pinned
     composer isn't covered by the fixed bottom navigation. */
  body:has(.chat-layout.chat-chat-open) .sidebar {
    display: none;
  }

  body:has(.chat-layout.chat-chat-open) .feature-nav {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .chat-create-panel {
    position: fixed;
    top: calc(68px + var(--a1-safe-top));
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(var(--app-live-viewport-height, 100dvh) - 92px - var(--a1-safe-top) - var(--a1-safe-bottom));
    overflow: auto;
  }

  .calendar-compose-modal-backdrop {
    align-items: start;
    padding: 14px;
  }

  .calendar-compose-modal {
    max-height: calc(var(--app-live-viewport-height, 100vh) - 28px);
  }

  .calendar-add-menu-backdrop {
    place-items: end center;
    padding: 0;
  }

  .calendar-add-menu {
    width: 100%;
    max-height: min(82dvh, calc(var(--app-live-viewport-height, 100dvh) - var(--a1-safe-top)));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
  }

  .calendar-add-menu-choices,
  .calendar-add-course-panel {
    padding-bottom: calc(16px + var(--a1-safe-bottom));
  }

  .calendar-add-course-list > button {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .calendar-add-course-list > button > svg {
    display: none;
  }

  .calendar-add-course-count {
    max-width: 112px;
  }

  .homework-toolbar {
    align-items: end;
  }

  .homework-semester-field {
    min-width: 0;
    flex: 1 1 auto;
  }

  .homework-refresh-status {
    flex-basis: 100%;
    text-align: left;
  }

  .calendar-toolbar,
  .calendar-nav,
  .calendar-view-tabs {
    width: 100%;
  }

  .calendar-nav {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }

  .calendar-nav-range {
    min-width: 0;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .calendar-view-tabs {
    overflow-x: auto;
  }

  .calendar-view-tabs button {
    flex: 1 0 auto;
  }

  .calendar-toolbar .ghost-button,
  .calendar-toolbar .primary-button {
    width: 100%;
  }

  .calendar-view-day,
  .calendar-view-week,
  .calendar-view-five {
    overflow-x: visible;
  }

  .calendar-view-day .calendar-week-schedule-wrap,
  .calendar-view-week .calendar-week-schedule-wrap,
  .calendar-view-five .calendar-week-schedule-wrap {
    overflow-x: auto;
    padding: 8px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
  }

  .calendar-view-day .calendar-week-schedule-wrap::-webkit-scrollbar,
  .calendar-view-week .calendar-week-schedule-wrap::-webkit-scrollbar,
  .calendar-view-five .calendar-week-schedule-wrap::-webkit-scrollbar {
    display: none;
  }

  .calendar-view-day .calendar-week-schedule {
    grid-template-columns: 34px minmax(0, 1fr);
    width: 100%;
    min-width: 0;
  }

  .calendar-view-five .calendar-week-schedule {
    grid-template-columns: 34px repeat(5, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
  }

  .calendar-view-week .calendar-week-schedule {
    grid-template-columns: 34px repeat(7, minmax(62px, 1fr));
    width: max(100%, 468px);
    min-width: 468px;
  }

  .calendar-view-day .calendar-week-grid-corner,
  .calendar-view-day .calendar-week-day-heading,
  .calendar-view-week .calendar-week-grid-corner,
  .calendar-view-week .calendar-week-day-heading,
  .calendar-view-five .calendar-week-grid-corner,
  .calendar-view-five .calendar-week-day-heading {
    min-height: 34px;
    padding: 6px 2px;
    font-size: 10px;
  }

  .calendar-view-day .calendar-week-day-heading,
  .calendar-view-week .calendar-week-day-heading,
  .calendar-view-five .calendar-week-day-heading {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 1px;
  }

  .calendar-view-day .calendar-week-day-heading span,
  .calendar-view-week .calendar-week-day-heading span,
  .calendar-view-five .calendar-week-day-heading span {
    font-size: 10px;
  }

  .calendar-view-day .calendar-week-time-label,
  .calendar-view-week .calendar-week-time-label,
  .calendar-view-five .calendar-week-time-label {
    padding: 4px 3px 0 0;
    font-size: 8px;
  }

  .calendar-view-day .calendar-week-block,
  .calendar-view-week .calendar-week-block,
  .calendar-view-five .calendar-week-block {
    width: calc(100% / var(--lanes) - 2px);
    margin: 1px 1px 1px calc((100% / var(--lanes)) * var(--lane) + 1px);
    padding: 3px 2px 3px 4px;
    border-radius: 5px;
    box-shadow:
      inset 2px 0 0 var(--calendar-accent),
      0 5px 10px rgba(0, 0, 0, 0.18);
  }

  .calendar-view-day .calendar-week-block strong,
  .calendar-view-week .calendar-week-block strong,
  .calendar-view-five .calendar-week-block strong {
    font-size: 9px;
  }

  .calendar-view-day .calendar-week-block span,
  .calendar-view-day .calendar-week-block em,
  .calendar-view-week .calendar-week-block span,
  .calendar-view-week .calendar-week-block em,
  .calendar-view-five .calendar-week-block span,
  .calendar-view-five .calendar-week-block em {
    font-size: 8px;
  }

  .calendar-view-day .calendar-pill,
  .calendar-view-week .calendar-pill,
  .calendar-view-five .calendar-pill {
    min-height: 34px;
    padding: 7px 8px;
  }

  .calendar-compose-heading,
  .calendar-compose-actions {
    align-items: stretch;
    flex-direction: column;
  }

  

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

  .discovery-query-field {
    grid-column: auto;
  }

  

  .home-sync-actions {
    width: 100%;
  }

  .home-sync-actions .row-meta {
    text-align: left;
    white-space: normal;
  }

  .homework-comparison-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .learn-logistics-row {
    align-items: stretch;
  }

  .learn-estimate-grid,
  .learn-estimate-score {
    grid-template-columns: 1fr;
  }

  .learn-logistics-row small {
    flex: 0 1 auto;
  }

  .homework-recommendation-panel {
    grid-column: auto;
  }

  .homework-upload-actions .form-message {
    min-height: 0;
  }

  .chat-message-list {
    height: auto;
    max-height: none;
    min-height: 260px;
  }

  .chat-message {
    width: 92%;
  }

  .comparison-selected-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .comparison-selected-toolbar .primary-button {
    width: 100%;
  }

  .roadmap-substitution-form,
  .hass-concentration-controls {
    grid-template-columns: 1fr;
  }

  
}

/* Keep Home inside the browser viewport. Long Services lists and Assistant
   history scroll inside their own panels instead of growing the document. */
body[data-active-feature="home"] {
  height: var(--app-live-viewport-height, 100vh);
  height: var(--app-live-viewport-height, 100dvh);
  overflow: hidden;
  overscroll-behavior: none;
}

body[data-active-feature="home"] .app-view:not(.hidden) {
  height: var(--app-live-viewport-height, 100vh);
  height: var(--app-live-viewport-height, 100dvh);
  min-height: 0;
  overflow: hidden;
}

body[data-active-feature="home"] .workspace {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body[data-active-feature="home"] .feature-host {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

body[data-active-feature="home"] .home-dashboard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body[data-active-feature="home"] .home-panel-main,
body[data-active-feature="home"] .home-services {
  flex: 0 0 auto;
}

body[data-active-feature="home"] .home-services,
body[data-active-feature="home"] .home-academic-assistant {
  margin-top: 0;
}

body[data-active-feature="home"] #home-service-body-services {
  max-height: min(50dvh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

body[data-active-feature="home"] .home-dashboard:has(.academic-assistant-card:not(.collapsed)) #home-service-body-services {
  max-height: min(24dvh, 220px);
}

body[data-active-feature="home"] .home-academic-assistant {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

body[data-active-feature="home"] .home-academic-assistant:has(.academic-assistant-card.collapsed) {
  flex: 0 0 auto;
}

body[data-active-feature="home"] .academic-assistant-card:not(.collapsed) {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

body[data-active-feature="home"] .academic-assistant-card:not(.collapsed) .academic-assistant-header,
body[data-active-feature="home"] .academic-assistant-card:not(.collapsed) .academic-assistant-ready-row,
body[data-active-feature="home"] .academic-assistant-card:not(.collapsed) .academic-assistant-prompts,
body[data-active-feature="home"] .academic-assistant-card:not(.collapsed) .academic-assistant-form {
  flex: 0 0 auto;
}

body[data-active-feature="home"] .academic-assistant-card:not(.collapsed) .academic-assistant-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

body[data-active-feature="home"] .academic-assistant-card:not(.collapsed) .academic-assistant-thread {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overscroll-behavior: contain;
}

/* ===== Home scrolls as one page ==========================================
   Overrides the fixed-height shell above, deliberately and at the developer's
   request. That design divides a fixed viewport between Services and the
   assistant, and on a phone neither half is usable: Services expanded truncates
   its own list and leaves the assistant a sliver, both expanded gives each
   about half and neither can be read. Sizing panels to fit only works when the
   content is bounded, and this content is not — the service list grows with the
   school and the assistant is a conversation.

   The reference design (docs/design/screen-home.html) scrolls its body, which
   is what makes it work. So: the dashboard is the one scroller, every panel
   takes its natural height, and the nested scrollers that used to divide the
   space are switched off. `overscroll-behavior` matters as much as the heights
   — the inner list had `contain`, which exists precisely to stop a scroll
   gesture from chaining to the parent, so leaving it on would strand the user
   inside the list.

   Kept: the assistant thread stays capped, since an open conversation should
   not stretch the page without limit. It chains to the page now instead of
   trapping the gesture.

   The rules mirror app-one-components.css, which already did this under
   [data-a1-skin]; they live here too so the live site behaves the same. If the
   fixed-height shell above is ever revived, delete this block rather than
   fighting it declaration by declaration. */
body[data-active-feature="home"] .home-dashboard {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(24px, var(--a1-safe-bottom));
}

body[data-active-feature="home"] #home-service-body-services,
body[data-active-feature="home"] .home-dashboard:has(.academic-assistant-card:not(.collapsed)) #home-service-body-services {
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
}

body[data-active-feature="home"] .home-academic-assistant,
body[data-active-feature="home"] .home-academic-assistant:has(.academic-assistant-card.collapsed) {
  flex: 0 0 auto;
  overflow: visible;
}

body[data-active-feature="home"] .academic-assistant-card:not(.collapsed) {
  height: auto;
}

body[data-active-feature="home"] .academic-assistant-card:not(.collapsed) .academic-assistant-body {
  overflow: visible;
}

body[data-active-feature="home"] .academic-assistant-card:not(.collapsed) .academic-assistant-thread {
  max-height: 60vh;
  overscroll-behavior: auto;
}

/* With the on-screen keyboard up, --app-live-viewport-height tracks the
   keyboard-shrunk visual viewport (roughly 40% of the screen). Pinning the
   shell to it collapses the whole page behind the keyboard, and WebKit's pan
   to the focused editor then exposes the bare root canvas — which reads as a
   white screen. dvh ignores the keyboard overlay on iOS and Android alike, so
   hold the shell there and let the dashboard scroller reveal the editor. */
@media (max-width: 980px) {
  body.mobile-keyboard-open[data-active-feature="home"],
  body.mobile-keyboard-open[data-active-feature="home"] .app-view:not(.hidden) {
    height: 100vh;
    height: 100dvh;
  }
}

@media (max-width: 980px) {
  body[data-active-feature="home"] .app-view:not(.hidden) {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  body[data-active-feature="home"] .workspace {
    height: auto;
  }
}

@media (max-width: 980px) {
  body {
    min-height: 100svh;
    overflow-x: hidden;
    background:
      linear-gradient(180deg, #090d14 0%, #101722 46%, #0c1018 100%);
    font-size: 14px;
  }

  button {
    touch-action: manipulation;
  }

  input,
  select {
    min-height: 48px;
    font-size: 16px;
  }

  .auth-view {
    display: grid;
    min-height: 100svh;
    padding:
      max(48px, min(12svh, 86px))
      14px
      calc(18px + var(--a1-safe-bottom));
    align-content: start;
  }

  .auth-visual {
    display: none;
  }

  .auth-panel {
    width: 100%;
    max-width: 440px;
    justify-self: center;
    padding: 20px;
  }

  .auth-tabs {
    margin: 22px 0 18px;
  }

  .auth-form {
    gap: 14px;
  }

  .app-view {
    display: block;
    min-height: 100svh;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 120;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    height: auto;
    padding: 10px 12px 8px;
    border-width: 0 0 1px;
    background: var(--a1-sw-surface, rgba(9, 13, 20, 0.96));
    backdrop-filter: blur(16px);
  }

  .sidebar-brand {
    min-width: 0;
  }

  .sidebar-brand .brand-mark {
    width: 34px;
    height: 34px;
  }

  .sidebar-brand strong {
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-brand .sidebar-user-copy span {
    display: none;
  }

  .logout-button {
    position: static;
    width: auto;
    min-height: 34px;
    margin: 0;
    padding: 0 11px;
    font-size: 12px;
  }

  .feature-nav {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    margin-top: 0;
    overflow-x: auto;
    padding: 0 0 3px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .feature-nav::-webkit-scrollbar {
    display: none;
  }

  .feature-nav button {
    flex: 0 0 auto;
    width: auto;
    min-width: 94px;
    min-height: 38px;
    gap: 7px;
    padding: 0 10px;
    border-color: var(--line-soft);
    background: var(--a1-sw-surface, #101722);
    font-size: 13px;
  }

  .nav-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 10px;
  }

  .workspace {
    padding: 12px 12px calc(18px + var(--a1-safe-bottom));
  }

  .workspace-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
    padding: 14px;
  }

  .workspace-header h2 {
    font-size: 22px;
  }

  .user-chip {
    flex-direction: row;
    width: 100%;
    max-width: none;
    align-items: center;
  }

  .user-chip > span:last-child {
    min-width: 0;
  }

  .feature-grid,
  .metric-grid,
  .split-grid,
  .integration-grid,
  .email-layout,
  .comparison-layout,
  .roadmap-workspace {
    grid-template-columns: 1fr;
  }

  .feature-grid,
  .metric-grid,
  .split-grid {
    gap: 12px;
  }

  .metric-card,
  .feature-card {
    padding: 14px;
  }

  .metric-value {
    margin: 8px 0 2px;
    font-size: 26px;
  }

  .panel-header {
    padding: 13px 14px;
  }

  .panel-body {
    padding: 13px 14px;
  }

  .course-row,
  .message-row,
  .timeline-row,
  .assignment-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
  }

  .course-row .status-pill,
  .message-row .status-pill,
  .timeline-row .status-pill,
  .assignment-row .status-pill {
    align-self: flex-start;
  }

  .registration-tabs {
    display: flex;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .registration-tabs button {
    flex: 0 0 auto;
    min-width: 112px;
    padding: 0 12px;
  }

  .roadmap-header,
  .roadmap-progress-heading,
  .roadmap-requirement-row,
  .hass-concentration-meta,
  .hass-concentration-suggestions > div:first-child,
  .discovery-result-summary,
  .integration-compact-row {
    align-items: stretch;
    flex-direction: column;
  }

  .schedule-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(104px, 126px);
    gap: 8px;
    align-items: center;
    padding: 7px 10px;
  }

  .roadmap-controls,
  .comparison-controls,
  .discovery-controls,
  .roadmap-program-controls,
  .hass-concentration-controls,
  .roadmap-substitution-form {
    grid-template-columns: 1fr;
  }

  .discovery-query-field {
    grid-column: auto;
  }

  

  

  

  

  

  

  

  .roadmap-board-panel {
    overflow: visible;
  }

  

  

  .roadmap-term-courses,
  .roadmap-term-prior .roadmap-term-courses {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  }

  

  .roadmap-course-card-full .roadmap-course-actions,
  .roadmap-course-actions {
    position: absolute;
    justify-content: flex-end;
  }

  .roadmap-progress-actions,
  .roadmap-substitution-form-actions,
  .profile-form-actions,
  .integration-actions,
  .integration-compact-actions,
  .discovery-card-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  .roadmap-progress-actions .ghost-button,
  .roadmap-substitution-form-actions .primary-button,
  .roadmap-substitution-form-actions .ghost-button,
  .profile-form-actions .primary-button,
  .profile-form-actions .ghost-button,
  .integration-actions .primary-button,
  .integration-actions .ghost-button,
  .integration-compact-actions .primary-button,
  .integration-compact-actions .ghost-button,
  .discovery-card-actions .primary-button,
  .discovery-card-actions .ghost-button {
    width: 100%;
    min-width: 0;
  }

  

  

  /* Keep the completion pill on the same row as the requirement name on
     mobile so each requirement stays compact instead of wrapping. */
  .roadmap-requirement-summary,
  .hass-concentration-heading {
    grid-template-columns: 14px minmax(0, 1fr) auto;
  }

  .roadmap-requirement-summary .progress-stat,
  .hass-concentration-heading .progress-stat {
    justify-self: end;
  }

  

  .comparison-table-wrap,
  .email-inbox-list {
    -webkit-overflow-scrolling: touch;
  }

  

  .email-message-row {
    align-items: stretch;
  }

  .integration-compact-row {
    min-height: 0;
    padding: 14px;
  }

  .user-friends-header {
    align-items: flex-start;
  }

  .friend-search-form {
    grid-template-columns: 1fr;
  }

  .friend-card {
    grid-template-columns: 36px minmax(0, 1fr);
    border-radius: 10px;
  }

  .friend-card.friend-card-icon-actions {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }

  .friend-avatar {
    width: 36px;
    height: 36px;
  }

  .friend-action {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    width: 100%;
  }

  .friend-action .primary-button,
  .friend-action .ghost-button {
    width: 100%;
    min-width: 0;
  }

  .friend-action > :only-child {
    grid-column: 1 / -1;
  }

  .friend-card.friend-card-icon-actions .friend-action {
    grid-column: auto;
    display: flex;
    justify-content: flex-end;
    width: auto;
  }

  .friend-card.friend-card-icon-actions .friend-icon-button {
    width: 30px;
    min-width: 30px;
    height: 30px;
  }
}

@media (max-width: 420px) {
  .workspace {
    padding-right: 10px;
    padding-left: 10px;
  }

  .feature-nav button {
    min-width: 82px;
    padding: 0 8px;
  }

  .feature-nav button span:last-child {
    font-size: 12px;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .roadmap-common-shortcuts,
  .roadmap-common-list,
  .roadmap-term-courses,
  .roadmap-term-prior .roadmap-term-courses {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  }
}

@media (max-width: 980px) {
  .app-view {
    padding-top: calc(58px + var(--a1-safe-top));
    padding-bottom: calc(74px + var(--a1-safe-bottom));
  }

  .sidebar {
    position: fixed;
    right: 0;
    left: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    padding:
      calc(8px + var(--a1-safe-top))
      12px
      8px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32);
  }

  .logout-button {
    align-self: center;
    min-width: 68px;
    border-radius: 999px;
  }

  .feature-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 130;
    display: grid;
    /* One equal track per rendered nav item: the item count is
       app.js's FEATURES minus showInNav:false, so never hardcode it. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    padding:
      7px
      6px
      calc(7px + var(--a1-safe-bottom));
    border-top: 1px solid var(--a1-sw-line, rgba(255, 255, 255, 0.08));
    background: var(--a1-sw-surface, rgba(8, 12, 18, 0.97));
    box-shadow: var(--a1-sw-shadow-up, 0 -16px 40px rgba(0, 0, 0, 0.38));
    backdrop-filter: blur(18px);
    overflow: visible;
  }

  .feature-nav button {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 54px;
    padding: 4px 2px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: 10px;
    line-height: 1.1;
    text-align: center;
  }

  .feature-nav button.active {
    background: rgba(53, 212, 255, 0.12);
  }

  .feature-nav button span:last-child {
    display: block;
    width: 100%;
    overflow: hidden;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .feature-nav .nav-icon {
    width: 26px;
    height: 26px;
  }

  .workspace {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .workspace-header {
    border: 0;
    background: transparent;
    padding: 4px 2px 10px;
  }

  .workspace-header .eyebrow {
    margin-bottom: 3px;
  }

  .user-chip {
    display: none;
  }

  .data-panel,
  .metric-card,
  .feature-card {
    border-color: rgba(255, 255, 255, 0.07);
    background: var(--a1-sw-surface, rgba(17, 24, 36, 0.94));
  }

  .data-panel {
    overflow: clip;
  }

  .panel-header h3,
  .feature-card h3,
  .metric-card h3 {
    font-size: 15px;
  }

  .primary-button,
  .ghost-button {
    min-height: 46px;
  }

  .registration-tabs {
    position: sticky;
    top: calc(58px + var(--a1-safe-top));
    z-index: 80;
    border-radius: 10px;
    background: var(--a1-sw-surface, rgba(9, 13, 20, 0.96));
    backdrop-filter: blur(14px);
  }

  .registration-tabs button {
    min-height: 42px;
  }

  

  

  

  

  .roadmap-course-actions {
    position: absolute;
    top: 6px;
    right: 6px;
  }

  .roadmap-course-card-full .roadmap-course-actions {
    position: absolute;
    top: 6px;
    right: 6px;
  }

  .roadmap-course-actions .compact-action-button {
    min-width: 26px;
    width: 26px;
    min-height: 26px;
    height: 26px;
    border-radius: 7px;
  }

  .roadmap-course-actions .roadmap-remove-button {
    min-width: 20px;
    width: 20px;
    min-height: 20px;
    height: 20px;
    font-size: 15px;
  }

  

  

  .email-layout {
    gap: 12px;
  }

  .email-inbox-list {
    max-height: none;
  }

  .email-message-row {
    min-height: 62px;
  }

  .email-message-select {
    min-height: 62px;
  }

  .integration-grid {
    gap: 12px;
  }

  .integration-form {
    padding: 14px;
  }
}

@media (max-width: 420px) {
  .feature-nav button {
    min-width: 0;
    min-height: 52px;
    padding: 4px 1px;
    font-size: 9px;
  }

  .feature-nav .nav-icon {
    width: 24px;
    height: 24px;
    font-size: 9px;
  }

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

  .roadmap-term-courses,
  .roadmap-term-prior .roadmap-term-courses,
  .roadmap-common-shortcuts,
  .roadmap-common-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .app-view {
    padding-top: 0;
    padding-bottom: calc(74px + var(--a1-safe-bottom));
  }

  .sidebar {
    position: static;
    z-index: 150;
    display: block;
    width: 100%;
    max-width: 100vw;
    height: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .sidebar-brand {
    display: none;
  }

  .sidebar-brand .brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .sidebar-brand strong {
    font-size: 14px;
  }

  .logout-button {
    display: none;
  }

  .feature-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 150;
    display: grid;
    /* One equal track per rendered nav item: the item count is
       app.js's FEATURES minus showInNav:false, so never hardcode it. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    margin: 0;
    padding:
      7px
      6px
      calc(7px + var(--a1-safe-bottom));
    overflow: visible;
    border-top: 1px solid var(--a1-sw-line, rgba(255, 255, 255, 0.08));
    background: var(--a1-sw-surface, rgba(8, 12, 18, 0.97));
    box-shadow: var(--a1-sw-shadow-up, 0 -16px 40px rgba(0, 0, 0, 0.38));
    backdrop-filter: blur(18px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }

  .feature-nav button {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 4px 1px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    line-height: 1.08;
    text-align: center;
  }

  .feature-nav button.active {
    background: rgba(53, 212, 255, 0.13);
  }

  .feature-nav button span:last-child {
    width: 100%;
    overflow: hidden;
    font-size: 0;
    text-overflow: clip;
    white-space: nowrap;
  }

  .feature-nav button span:last-child::after {
    content: attr(data-short-label);
    font-size: 10px;
  }

  .feature-nav .nav-icon {
    width: 24px;
    height: 24px;
    font-size: 9px;
  }

  .workspace {
    padding-top: 12px;
    padding-bottom: 0;
  }

  .workspace-header {
    padding-top: 0;
  }

  .registration-shell {
    padding-bottom: 0;
  }

  .registration-shell > .registration-tabs {
    position: sticky;
    top: 0;
    z-index: 140;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 3px;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: var(--a1-sw-surface, rgba(9, 13, 20, 0.98));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(18px);
  }

  .registration-shell > .registration-tabs button {
    min-width: 0;
    min-height: 40px;
    padding: 0 3px;
    overflow: hidden;
    font-size: 10.5px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .homework-tabs button {
    min-width: 0;
    min-height: 40px;
    padding: 0 4px;
    font-size: 11px;
    line-height: 1.1;
  }

  .homework-tabs {
    position: static;
    top: auto;
    z-index: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: visible;
  }

  .homework-grade-list {
    max-height: none;
    overflow: visible;
  }

  

  
}

@media (max-width: 420px) {
  .app-view {
    padding-top: 0;
    padding-bottom: calc(70px + var(--a1-safe-bottom));
  }

  .sidebar {
    gap: 6px 8px;
    padding-top: 0;
  }

  .feature-nav button {
    min-height: 48px;
  }

  .feature-nav button span:last-child::after {
    font-size: 9px;
  }

  .registration-shell > .registration-tabs {
    top: 0;
  }
}

.nav-icon {
  color: var(--text);
  background: rgba(53, 212, 255, 0.12);
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 980px) {
  .user-page {
    max-width: none;
    gap: 10px;
  }

  .user-game-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  .user-top-body {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px 14px;
  }

  .user-top-actions {
    justify-content: flex-end;
    width: auto;
  }

  .user-top-panel .user-friend-card:not(.user-friend-inline-card) {
    flex: 1 1 auto;
    width: auto;
  }

  .user-top-panel .user-friend-inline-card {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
  }

  .user-top-panel .user-top-friend-card {
    grid-template-columns: 48px 34px;
    width: auto;
    min-height: 48px;
  }

  .user-top-panel .user-top-friend-add {
    width: 34px;
    min-width: 34px;
    height: 48px;
    min-height: 48px;
  }

  .quota-compact-items {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .quota-compact-item strong {
    font-size: 13px;
  }

  .quota-compact-item small {
    font-size: 10px;
  }

  .user-summary-identity {
    gap: 10px;
  }

  .user-summary-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 25px;
  }

  .user-summary-topline {
    grid-template-columns: minmax(0, 1fr) minmax(70px, 86px) auto;
    gap: 6px;
  }

  .user-streak-mini {
    padding: 5px 6px;
  }

  .user-logout-button {
    min-width: 64px;
    padding: 0 8px;
  }

  .user-wallet-row {
    grid-template-columns: minmax(0, 1.1fr) minmax(90px, 0.7fr);
  }

  .user-checkin-row {
    grid-template-columns: 1fr;
  }

  .user-count-button {
    width: 100%;
    min-width: 0;
  }

  .user-storage-body {
    grid-template-columns: 1fr;
  }

  .profile-avatar-row,
  .profile-privacy-row,
  .profile-compact-row,
  .profile-edit-row,
  .friend-schedule-course,
  .friend-roadmap-progress-row {
    grid-template-columns: 1fr;
  }

  .user-panel-toggle-row {
    padding-right: 10px;
  }

  .avatar-picker {
    grid-template-columns: repeat(6, minmax(0, 38px));
    justify-content: start;
  }

  .avatar-controls {
    justify-items: start;
  }

  .privacy-select-row {
    grid-template-columns: minmax(0, 1fr) minmax(110px, 128px);
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
  }

  .privacy-select-row > span {
    color: var(--user-text);
    font-size: 12px;
    text-transform: none;
  }

  .privacy-select-row select {
    height: 30px;
    min-height: 30px;
  }

  .user-config-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .user-config-section-head {
    min-height: 38px;
    padding: 5px 7px;
  }

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

  .user-config-add {
    width: 27px;
    min-width: 27px;
    min-height: 27px;
  }

  .user-config-list {
    max-height: min(300px, 42dvh);
    padding: 3px 5px 6px;
  }

  .user-config-card {
    padding: 4px 5px;
  }

  .user-config-card .learn-answer-prompt-title-button {
    min-height: 26px;
  }

  .user-config-card .learn-answer-prompt-edit,
  .user-config-card .learn-answer-prompt-delete {
    width: 27px;
    min-width: 27px;
    min-height: 27px;
  }

  .user-auto-check-config {
    padding: 0 7px 7px;
  }

  .user-auto-check-config .learn-auto-check-friends {
    max-height: 118px;
  }

  .friend-schedule-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .friend-schedule-controls {
    justify-content: flex-start;
    width: 100%;
  }

  .user-panel-toggle {
    padding: 0 14px;
  }

  .feature-nav button {
    gap: 2px;
    min-height: 56px;
  }

  .feature-nav button span:last-child {
    display: block;
    width: 100%;
    overflow: visible;
    color: inherit;
    font-size: 9px;
    line-height: 1.05;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .feature-nav button span:last-child::after {
    content: none;
  }

  .feature-nav .nav-icon {
    width: 24px;
    height: 24px;
    color: var(--text);
    background: rgba(53, 212, 255, 0.12);
    font-size: 17px;
  }
}

@media (max-width: 380px) {
  .privacy-select-row {
    grid-template-columns: 1fr;
  }

  .privacy-select-row select {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .user-wallet-row {
    grid-template-columns: 1fr 1fr;
  }

  .user-checkin-row {
    grid-template-columns: 1fr;
  }

  .chest-checkin-button {
    grid-template-columns: minmax(0, 1fr);
    min-height: 64px;
    padding: 5px 6px;
  }

  .chest-streak-track {
    gap: 3px;
  }

  .streak-chest {
    min-height: 54px;
    padding: 3px 2px 2px;
  }

  .streak-chest-icon {
    font-size: 16px;
  }

  .streak-chest small {
    font-size: 8.5px;
  }

  .streak-chest-status {
    padding: 1px 3px;
    font-size: 7.5px;
  }

  .chest-checkin-copy > span {
    display: none;
  }

  .chest-checkin-copy > small {
    white-space: normal;
  }

  .user-summary-avatar {
    width: 44px;
    height: 44px;
    font-size: 23px;
  }

  .user-top-panel .user-friend-inline-card {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .user-top-panel .user-top-friend-card {
    grid-template-columns: 44px 32px;
    min-height: 44px;
  }

  .user-top-panel .user-top-friend-add {
    width: 32px;
    min-width: 32px;
    height: 44px;
    min-height: 44px;
  }

  .user-summary-topline {
    grid-template-columns: minmax(0, 1fr) minmax(54px, 70px) auto;
    gap: 5px;
  }

  .user-streak-mini {
    min-height: 28px;
    padding: 4px 5px;
  }

  .user-streak-mini .streak-bar-heading > span {
    display: none;
  }

  .user-logout-button {
    min-width: 58px;
    min-height: 30px;
    padding: 0 7px;
    font-size: 11px;
  }

  .feature-nav button span:last-child {
    font-size: 7.5px;
  }

  .feature-nav .nav-icon {
    font-size: 16px;
  }
}

.workspace-header {
  display: none;
}

@media (max-width: 640px) {
  .home-panel-header {
    align-items: center;
    flex-direction: row;
  }

  .home-panel-header .home-add-button {
    align-self: flex-start;
    width: 28px;
  }
}

@media (max-width: 980px) {
  .feature-nav {
    /* One equal track per rendered nav item: the item count is
       app.js's FEATURES minus showInNav:false, so never hardcode it. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .feature-nav button {
    min-height: 52px;
    padding: 3px 0;
  }

  .feature-nav .nav-icon {
    width: 22px;
    height: 22px;
    font-size: 15px;
  }

  .feature-nav button span:last-child {
    font-size: 7px;
    line-height: 1;
  }
}

@media (max-width: 420px) {
  .feature-nav button {
    min-height: 50px;
  }

  .feature-nav .nav-icon {
    width: 21px;
    height: 21px;
    font-size: 14px;
  }

  .feature-nav button span:last-child {
    font-size: 6.5px;
  }
}

@media (max-width: 980px) {
  

  

  

  

  .roadmap-common-result-list {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  }

  

  

  

  .discovery-header h3 {
    font-size: 15px;
    white-space: nowrap;
  }

  

  
}

body.roadmap-course-detail-open {
  overflow: hidden;
}

.roadmap-term-header strong {
  font-size: 15px;
}

.roadmap-course-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 270;
  display: grid;
  place-items: center;
  width: 100dvw;
  height: var(--app-live-viewport-height, 100dvh);
  padding: 24px;
  overflow: auto;
  background: var(--a1-sw-scrim, rgba(3, 7, 13, 0.72));
  backdrop-filter: blur(4px);
}

#roadmap-course-detail-modal[data-lifted-overlay="registration"] .roadmap-course-detail-backdrop {
  z-index: 340;
}

.roadmap-course-detail-modal {
  --course-accent: var(--cyan);
  --course-bg: rgba(53, 212, 255, 0.14);
  --course-line: rgba(53, 212, 255, 0.38);
  --course-chip-bg: rgba(53, 212, 255, 0.12);
  --course-chip-fg: #dff7ff;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(760px, calc(100dvw - 32px));
  height: min(760px, calc(var(--app-live-viewport-height, 100vh) - 48px));
  height: min(760px, calc(100svh - 48px));
  max-height: calc(var(--app-live-viewport-height, 100dvh) - 48px);
  max-height: calc(100svh - 48px);
  overflow: hidden;
  border: 1px solid var(--course-line);
  border-radius: 10px;
  color: var(--text);
  background:
    linear-gradient(
      180deg,
      var(--a1-sw-surface, rgba(20, 27, 39, 0.98)),
      var(--a1-sw-surface, rgba(13, 19, 29, 0.98))
    ),
    var(--panel);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.55),
    inset 0 4px 0 var(--course-accent);
}

.roadmap-course-detail-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) minmax(48px, auto);
  align-items: center;
  min-height: 58px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--a1-sw-surface-2, rgba(10, 15, 23, 0.78));
}

.roadmap-course-detail-nav strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 21px;
  font-weight: 900;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-course-detail-back,
.roadmap-course-detail-action,
.roadmap-course-detail-action-spacer {
  display: grid;
  place-items: center;
  min-width: 42px;
  min-height: 42px;
  margin: 0 6px;
  border: 0;
  border-radius: 8px;
  color: var(--cyan);
  background: transparent;
  line-height: 1;
}

.roadmap-course-detail-back {
  border: 1px solid var(--line-soft);
  background: var(--a1-sw-surface-2, rgba(10, 15, 23, 0.72));
  font-size: 28px;
  font-weight: 650;
}

.roadmap-course-detail-react-like.is-active {
  opacity: 1;
  border-color: rgba(255, 91, 120, 0.72);
  background: rgba(255, 91, 120, 0.16);
}

.roadmap-course-detail-react-hate.is-active {
  opacity: 1;
  border-color: rgba(245, 184, 75, 0.72);
  background: rgba(245, 184, 75, 0.16);
}

.roadmap-course-detail-comment.is-active {
  opacity: 1;
  border-color: var(--course-accent);
  background: var(--course-bg);
}

.roadmap-course-detail-react-like:hover,
.roadmap-course-detail-react-like:focus-visible {
  background: rgba(255, 91, 120, 0.14);
}

.roadmap-course-detail-back:hover,
.roadmap-course-detail-back:focus-visible,
.roadmap-course-detail-action:hover,
.roadmap-course-detail-action:focus-visible {
  outline: none;
  background: rgba(53, 212, 255, 0.1);
}

.roadmap-course-detail-body {
  min-height: 0;
  overflow-y: auto;
  padding: 30px 34px 34px;
  -webkit-overflow-scrolling: touch;
}

.roadmap-course-detail-summary h2 {
  margin: 0 0 20px;
  color: var(--text);
  font-size: 30px;
  line-height: 1.08;
}

.roadmap-course-detail-summary p {
  margin: 0;
  color: var(--text, rgba(243, 247, 251, 0.94));
  font-size: 18px;
  line-height: 1.55;
}

.roadmap-course-detail-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin-top: 28px;
  border-top: 1px solid var(--line-soft);
}

.roadmap-course-detail-fact {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}

.roadmap-course-detail-fact strong,
.roadmap-course-detail-section h3,
.roadmap-course-detail-ratings h3 {
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
}

.roadmap-course-detail-fact span {
  min-width: 0;
  color: var(--muted, rgba(243, 247, 251, 0.86));
  font-size: 15px;
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.roadmap-course-detail-ratings,
.roadmap-course-detail-section {
  margin-top: 30px;
}

.roadmap-course-detail-ratings h3,
.roadmap-course-detail-section h3 {
  margin: 0 0 14px;
  font-size: 24px;
}

.roadmap-course-detail-rating-row {
  display: grid;
  grid-template-columns: minmax(130px, auto) auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.roadmap-course-detail-section p {
  margin: 0;
  color: var(--text, rgba(243, 247, 251, 0.9));
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  

  

  

  .roadmap-course-detail-backdrop {
    align-items: stretch;
    justify-items: stretch;
    padding:
      calc(10px + var(--a1-safe-top))
      calc(10px + var(--a1-safe-right))
      calc(10px + var(--a1-safe-bottom))
      calc(10px + var(--a1-safe-left));
  }

  .roadmap-course-detail-modal {
    width: 100%;
    height: calc(var(--app-live-viewport-height, 100dvh) - 20px - var(--a1-safe-top) - var(--a1-safe-bottom));
    max-height: calc(var(--app-live-viewport-height, 100dvh) - 20px - var(--a1-safe-top) - var(--a1-safe-bottom));
  }

  .roadmap-course-detail-body {
    padding: 24px 22px 30px;
  }

  .roadmap-course-detail-summary h2 {
    font-size: 27px;
  }

  .roadmap-course-detail-summary p {
    font-size: 17px;
  }

  .roadmap-course-detail-facts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  

  .roadmap-course-detail-nav {
    grid-template-columns: 44px minmax(0, 1fr) minmax(44px, auto);
  }

  .roadmap-course-detail-body {
    padding: 22px 18px 28px;
  }

  .roadmap-course-detail-summary h2 {
    font-size: 24px;
  }

  .roadmap-course-detail-summary p {
    font-size: 16px;
  }

  .roadmap-course-detail-fact,
  .roadmap-course-detail-rating-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  

  

  
}

.roadmap-course-card-full .roadmap-course-actions,
.roadmap-course-actions {
  top: -7px;
  right: -7px;
  z-index: 3;
}

.roadmap-course-actions .roadmap-remove-button {
  min-width: 16px;
  width: 16px;
  min-height: 16px;
  height: 16px;
  border: 1.5px solid rgba(255, 206, 216, 0.92);
  border-radius: 999px;
  color: var(--a1-sw-text, #ffffff);
  background: var(--a1-sw-surface, rgba(168, 45, 82, 0.95));
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.28),
    0 0 0 2px rgba(12, 16, 24, 0.8);
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
}

.roadmap-course-actions .roadmap-remove-button:hover,
.roadmap-course-actions .roadmap-remove-button:focus-visible {
  background: var(--a1-sw-surface, rgba(196, 55, 93, 1));
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.34),
    0 0 0 3px rgba(12, 16, 24, 0.9);
}

.roadmap-course-detail-body {
  overflow-x: hidden;
}

@media (max-width: 980px) {
  .roadmap-course-card-full .roadmap-course-actions,
  .roadmap-course-actions {
    top: -8px;
    right: -8px;
  }

  .roadmap-course-actions .roadmap-remove-button {
    min-width: 20px;
    width: 20px;
    min-height: 20px;
    height: 20px;
    font-size: 14px;
  }
}

@media (max-width: 520px) {
  

  

  

  

  

  .roadmap-course-actions .roadmap-remove-button {
    min-width: 20px;
    width: 20px;
    min-height: 20px;
    height: 20px;
    font-size: 14px;
  }

  .roadmap-course-card-full .roadmap-course-actions,
  .roadmap-course-actions {
    top: -7px;
    right: -7px;
  }
}

/* Social-profile count: keep this after the theme rules that style generic
   count cards, because this count intentionally reads as identity metadata,
   not as a separate dashboard tile. */
.user-page .user-friend-count-card.user-profile-friend-count {
  align-self: center;
  display: grid;
  place-items: center;
  align-content: center;
  min-width: 76px;
  min-height: 58px;
  padding: 5px 8px;
  border: 0;
  border-radius: 12px;
  color: var(--user-text);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.user-page .user-friend-count-card.user-profile-friend-count > span {
  font-size: 26px;
  font-weight: 950;
  line-height: 1;
}

.user-page .user-friend-count-card.user-profile-friend-count > small {
  margin-top: 5px;
  color: var(--user-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.user-page .user-friend-count-card.user-profile-friend-count:hover,
.user-page .user-friend-count-card.user-profile-friend-count:focus-visible {
  color: var(--user-accent-2);
  outline: none;
  background: color-mix(in srgb, var(--user-accent) 8%, transparent);
}

.friend-calendar-day-card .calendar-pill.is-private {
  border-color: #050505;
  background: #171717;
  box-shadow: none;
}

.friend-calendar-day-card .calendar-pill.is-private strong {
  color: #fff;
}

.friend-calendar-day-card .calendar-pill.is-private span {
  color: #c9c9c9;
}

@media (max-width: 980px) {
  .homework-gradescope-modal-backdrop {
    place-items: stretch;
    padding: 0;
  }

  .homework-gradescope-modal {
    width: 100%;
    max-width: 100dvw;
    height: 100%;
    max-height: var(--app-live-viewport-height, 100dvh);
    border-radius: 0;
  }

  .homework-gradescope-modal-nav {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 9px 10px;
  }

  .homework-gradescope-modal-actions {
    gap: 6px;
  }

  .homework-gradescope-modal-button {
    min-height: 32px;
    padding: 0 9px;
  }

  /* Specificity must beat `.homework-gradescope-modal-nav span` (which sets
     display:block), otherwise the brand stays visible and pushes the action
     buttons onto a second row, making the header awkwardly tall on mobile. */
  .homework-gradescope-modal-nav .homework-gradescope-brand {
    display: none;
  }

  .homework-gradescope-modal-nav strong {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.15;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .homework-gradescope-modal-nav div > span {
    font-size: 10px;
  }

  .homework-gradescope-modal-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .homework-gradescope-modal-aside {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
    padding: 9px 10px;
    border-bottom: 1px solid #d7dee8;
    color: #334155;
    background: #ffffff;
  }

  .homework-gradescope-modal-aside > strong {
    display: none;
  }

  .homework-gradescope-overall-score {
    grid-column: 1;
    grid-row: 1;
    color: #111827;
    font-size: 20px;
    white-space: nowrap;
  }

  .homework-gradescope-score-breakdown {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
  }

  /* In the narrow 3-up grid, space-between drifts each count away from its own
     label and makes it visually pair with the neighbouring cell. Keep the count
     and label together instead. */
  .homework-gradescope-score-breakdown span {
    flex-direction: column;
    justify-content: center;
    gap: 0;
    color: #64748b;
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
  }

  .homework-gradescope-score-breakdown b {
    color: #111827;
    font-size: 11px;
  }

  .homework-gradescope-question-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-auto-flow: column;
    grid-auto-columns: minmax(92px, 30vw);
    width: 100%;
    max-width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
  }

  .homework-gradescope-question-nav a {
    min-width: 0;
    min-height: 32px;
    padding: 5px 7px;
    border-right: 1px solid #e2e8f0;
    border-bottom: 0;
    color: #334155;
    font-size: 10px;
  }

  .homework-gradescope-question-nav b {
    color: #111827;
    font-size: 9px;
  }

  .homework-gradescope-question-nav a span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .homework-gradescope-modal-aside > a {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    max-width: 72px;
    color: #2563eb;
    font-size: 10px;
    line-height: 1.15;
    text-align: right;
  }

  .homework-gradescope-submission-pane {
    min-height: 0;
    padding: 8px;
    overscroll-behavior: contain;
  }

  .homework-gradescope-modal .homework-gradescope-detail-controls {
    min-height: 36px;
    margin-bottom: 6px;
    padding: 0 4px;
    border: 0;
    background: transparent;
  }

  .homework-gradescope-modal .homework-inline-toggle {
    min-height: 36px;
  }

  .homework-gradescope-question-list {
    gap: 6px;
  }

  .homework-gradescope-question {
    gap: 7px;
    padding: 8px;
  }

  .homework-gradescope-question-head {
    gap: 8px;
  }

  .homework-gradescope-question-head div > span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .homework-gradescope-answer > div,
  .homework-gradescope-detail-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .homework-gradescope-answer span,
  .homework-gradescope-answer-images figcaption {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .homework-gradescope-question-content {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .homework-gradescope-answer,
  .homework-gradescope-grading {
    gap: 7px;
    padding: 8px;
  }

  .homework-gradescope-rubric-item {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 7px;
  }
}

.app-alarm-overlay {
  position: fixed;
  right: max(16px, var(--a1-safe-right));
  bottom: calc(18px + var(--a1-safe-bottom));
  left: max(16px, var(--a1-safe-left));
  z-index: 5000;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.app-alarm-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: min(520px, 100%);
  padding: 14px;
  border: 1px solid rgba(255, 209, 102, 0.58);
  border-radius: 10px;
  background: var(--a1-sw-surface, rgba(13, 17, 25, 0.96));
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.36);
  color: var(--text);
  pointer-events: auto;
}

.app-alarm-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.app-alarm-kicker {
  color: #ffd166;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.app-alarm-card strong {
  overflow: hidden;
  font-size: 17px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-alarm-card small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-alarm-stop {
  min-width: 76px;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: #ffd166;
  color: #16120a;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

/* ===== Shared mini games ===== */
.mini-game-modal {
  position: fixed;
  inset: 0;
  z-index: 205;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--a1-sw-scrim, rgba(6, 10, 18, 0.74));
  backdrop-filter: blur(4px);
}

.mini-game-modal.hidden {
  display: none;
}

.mini-game-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  height: min(820px, calc(var(--app-live-viewport-height, 100dvh) - 32px));
  overflow: hidden;
  border: 1px solid rgba(53, 212, 255, 0.28);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(16, 22, 34, 0.98), rgba(10, 14, 22, 0.98));
  box-shadow: var(--shadow);
}

.scenic-recall-dialog {
  width: min(960px, 100%);
}

.aim-grid-dialog,
.accurate-count-dialog,
.patch-finding-dialog,
.schulte-dialog {
  width: min(620px, 100%);
}

.patch-finding-dialog {
  width: min(1220px, calc(100vw - 24px));
  height: min(940px, calc(var(--app-live-viewport-height, 100dvh) - 24px));
}

.dual-dodge-dialog {
  width: min(1180px, calc(100vw - 24px));
  height: min(920px, calc(var(--app-live-viewport-height, 100dvh) - 24px));
}

.truth-shift-dialog {
  width: min(820px, 100%);
}

.shuffle-track-dialog {
  width: min(860px, 100%);
}

.mini-game-header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mini-game-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  color: var(--text);
  font-size: 16px;
}

.mini-game-title strong {
  overflow: hidden;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-game-body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  padding: 14px;
}

.mini-game-play {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

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

.mini-game-hud span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--a1-sw-surface-2, rgba(20, 27, 39, 0.62));
  text-align: center;
}

.mini-game-hud small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.mini-game-hud strong {
  overflow: hidden;
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-game-message {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-game-over-card > strong {
  color: var(--text);
  font-size: 22px;
  font-weight: 950;
}

.sr-live-score span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.sr-live-score strong {
  color: #67e8f9;
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
}

.sr-intro-card strong,
.sr-review-summary strong {
  font-size: 17px;
  font-weight: 950;
}

.sr-review-subscore-row span {
  min-width: 46px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(238, 246, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 950;
}

.sr-intro-card span,
.sr-intro-card small,
.sr-review-summary > span {
  color: rgba(238, 246, 255, 0.84);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.scenic-recall-palette button {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(53, 212, 255, 0.34);
  border-radius: 999px;
  color: var(--text);
  background: var(--a1-sw-surface-2, rgba(20, 27, 39, 0.74));
  font-size: 26px;
  font-weight: 950;
  cursor: grab;
  touch-action: none;
}

.scenic-recall-palette button.selected,
.scenic-recall-palette button:hover,
.scenic-recall-palette button:focus-visible {
  border-color: rgba(53, 212, 255, 0.76);
  background: rgba(53, 212, 255, 0.18);
  outline: none;
}

.scenic-recall-palette button.placed {
  color: #8ef0b0;
  border-color: rgba(73, 209, 125, 0.48);
}

.sr-duel-round-points span {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.aim-grid-board,
.schulte-board {
  display: grid;
  gap: 10px;
  /* The physical-viewport term (100dvw − body padding) is load-bearing, not a
     nicety. This square sizes by aspect-ratio; when the dialog is bounded to
     the viewport it takes its width from 100%. But iOS Safari can drop the
     complex mobile-viewport dialog selectors (mobile-dialogs.css), and there is
     a frame before app.js re-marks the dialog, during which the dialog is
     unbounded. With only `min(100%, 520px)`, aspect-ratio then resolves width
     FROM the row height and the 5×5 grid inflates to ~800px — the right half of
     the board runs off-screen. Capping width at the real device width makes it
     determinate, so height follows width instead of the reverse. */
  width: min(100%, 520px, calc(100dvw - 24px));
  min-width: 0;
  margin: auto;
  aspect-ratio: 1;
}

.aim-grid-cell,
.schulte-board button {
  min-width: 0;
  border: 1px solid rgba(53, 212, 255, 0.24);
  border-radius: 14px;
  background: var(--a1-sw-surface-2, rgba(20, 27, 39, 0.64));
  color: var(--text);
  cursor: pointer;
}

.aim-grid-cell {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: default;
  touch-action: manipulation;
}

.accurate-count-scoreboard span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--a1-sw-surface-2, rgba(20, 27, 39, 0.62));
  text-align: center;
}

.accurate-count-scoreboard strong {
  overflow: hidden;
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accurate-count-round-result > strong {
  color: var(--text);
  font-size: 24px;
  font-weight: 950;
}

.accurate-count-times span {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(53, 212, 255, 0.22);
  border-radius: 14px;
  background: var(--a1-sw-surface-2, rgba(20, 27, 39, 0.64));
}

.accurate-count-times strong {
  color: var(--text);
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
}

.patch-finding-scoreboard span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--a1-sw-surface-2, rgba(20, 27, 39, 0.62));
  text-align: center;
}

.patch-finding-scoreboard strong {
  overflow: hidden;
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.patch-finding-arrows button {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(53, 212, 255, 0.28);
  border-radius: 10px;
  color: var(--text);
  background: var(--a1-sw-surface-2, rgba(20, 27, 39, 0.7));
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.patch-finding-arrows button:hover,
.patch-finding-arrows button:focus-visible {
  border-color: rgba(53, 212, 255, 0.74);
  background: rgba(53, 212, 255, 0.14);
  outline: none;
}

.patch-finding-arrows button:disabled,
.patch-finding-skip:disabled {
  cursor: default;
  opacity: 0.48;
}

.patch-finding-round-result > strong {
  color: var(--text);
  font-size: 24px;
  font-weight: 950;
}

.patch-finding-times span {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(53, 212, 255, 0.22);
  border-radius: 14px;
  background: var(--a1-sw-surface-2, rgba(20, 27, 39, 0.64));
}

.patch-finding-times strong {
  color: var(--text);
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
}

.schulte-board {
  grid-template-columns: repeat(var(--sg-size, 5), minmax(0, 1fr));
}

.schulte-board button {
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 950;
}

.schulte-board button.is-done {
  border-color: transparent;
  color: transparent;
  background: transparent;
  opacity: 0;
  pointer-events: none;
}

.schulte-status {
  min-height: 22px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.schulte-finish-panel strong {
  color: var(--text);
  font-size: 24px;
  font-weight: 950;
}

.dual-dodge {
  gap: 8px;
  padding: 10px;
}

.dual-dodge-hud span {
  padding: 6px 10px;
}

.truth-shift-intro-card strong {
  font-size: 24px;
  font-weight: 950;
}

.truth-shift-score-toast strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
  text-align: center;
}

.truth-shift-card-bonus strong {
  color: inherit;
  font-size: 13px;
  font-weight: 950;
}

.truth-shift-feedback {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  background: var(--a1-sw-surface-2, rgba(6, 10, 18, 0.58));
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
}

.shuffle-track-slots,
.shuffle-track-pad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
  gap: 8px;
}

.shuffle-track-slots span,
.shuffle-track-pad button {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 1px solid rgba(53, 212, 255, 0.25);
  border-radius: 10px;
  background: var(--a1-sw-surface-2, rgba(20, 27, 39, 0.72));
  color: var(--text);
  font: inherit;
  font-size: 18px;
  font-weight: 950;
}

@media (max-width: 980px) {
  .mini-game-modal {
    padding: 0;
  }

	  .mini-game-dialog,
	  .scenic-recall-dialog,
	  .aim-grid-dialog,
	  .accurate-count-dialog,
	  .patch-finding-dialog,
	  .schulte-dialog,
	  .dual-dodge-dialog,
	  .truth-shift-dialog,
  .shuffle-track-dialog {
    width: 100%;
    height: var(--app-live-viewport-height, 100dvh);
    border: 0;
    border-radius: 0;
  }

  .mini-game-header {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    padding: 10px 12px;
  }

  .mini-game-body {
    padding: 12px max(12px, var(--a1-safe-right)) 12px max(12px, var(--a1-safe-left));
  }

  /* Square-board games (Schulte, Aim Grid) are width-limited, so on a tall
     phone the board left a large dead band below it. Center the whole play
     column in the available height instead of pinning it to the top. `safe`
     falls back to top-alignment if the content is ever taller than the sheet,
     so nothing is clipped. */
  .schulte-grid .mini-game-play,
  .aim-grid .mini-game-play {
    justify-content: safe center;
  }

  .mini-game-hud {
    gap: 6px;
  }

  .mini-game-hud span {
    padding: 7px 6px;
  }

  .mini-game-hud strong {
    font-size: 17px;
  }

  

  

  

  .scenic-recall-palette button {
    width: 53px;
    height: 53px;
    font-size: 24px;
  }

  

  .aim-grid-board,
  .schulte-board {
    gap: 7px;
    /* Cap against the viewport itself (minus the body's 12px gutters and any
       landscape safe-area inset), not just `100%`: on a real device the flex
       ancestor can resolve wider than the visible width, which pushed the outer
       columns off both edges. This term can never exceed what is actually on
       screen. */
    width: min(100%, calc(100vw - 24px - var(--a1-safe-left) - var(--a1-safe-right)));
  }

  .aim-grid-cell,
  .schulte-board button {
    border-radius: 10px;
  }

	  .schulte-board button {
	    font-size: 22px;
	  }

	  

	  

	  

	  

	  

	  

	  

	  

	  

	  

	  

	  .patch-finding-arrows button {
	    border-radius: 9px;
	    font-size: 18px;
	  }

	  

	  

	  

  

  

  

  

  .shuffle-track-slots,
  .shuffle-track-pad {
    grid-template-columns: repeat(auto-fit, minmax(36px, 1fr));
    gap: 6px;
  }

  .shuffle-track-slots span,
  .shuffle-track-pad button {
    min-height: 40px;
    border-radius: 9px;
    font-size: 16px;
  }

  

  

  

  

  
}