/* RecallStride workspace. One navigation shell, one page hierarchy, one scroll surface. */
:root {
  --canvas: #f5f7fa;
  --surface: #ffffff;
  --surface-subtle: #f8fafc;
  --surface-muted: #edf2f7;
  --text: #192b43;
  --text-secondary: #4d6078;
  --text-muted: #5e7188;
  --border: #dce4ee;
  --border-strong: #b5c3d4;
  --control-border: #74869e;
  --accent: #236a5e;
  --accent-hover: #195548;
  --accent-soft: #e2f2eb;
  --accent-ink: #195548;
  --on-accent: #ffffff;
  --focus: #2177bd;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-control: 9px;
  --radius-card: 14px;
  --radius-dialog: 20px;
  --shadow-dialog: 0 20px 64px #14253a24;
  --workspace-rail: 208px;
  --workspace-gutter: 32px;
  --workspace-width: 1160px;
  --topbar-height: 64px;
}
:root[data-theme="dark"] {
  --canvas: #101a29;
  --surface: #172538;
  --surface-subtle: #1b2c41;
  --surface-muted: #22364d;
  --text: #edf3fb;
  --text-secondary: #bdcce0;
  --text-muted: #a0b4cc;
  --border: #304760;
  --border-strong: #526c89;
  --control-border: #6c829d;
  --accent: #88dfc2;
  --accent-hover: #acebd6;
  --accent-soft: #21463e;
  --accent-ink: #acebd6;
  --on-accent: #12352b;
  --focus: #98c9fc;
  --shadow-dialog: 0 20px 64px #0007;
}
body { font-size: 15px; letter-spacing: 0; }
[hidden] { display: none !important; }
button, input, textarea, select, summary { scroll-margin-block: 86px 90px; border-radius: var(--radius-control); }
a { color: var(--accent-ink); }
:is(button, a, input, textarea, select, summary, [contenteditable="true"]):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
button { transition: background 140ms ease, border-color 140ms ease; }
button:disabled { transform: none; }
/* Filled actions keep readable labels through legacy component and hover rules. */
:is(
  .primary-account-button,
  .primary-button,
  .revision-primary-action,
  .revision-action-primary:not(.editor-toolbar button),
  .contact-submit-button,
  .plan-button:not(.subtle),
  .icon-button,
  .student-dashboard-head > button,
  .neat-questions-actions button,
  .today-session-actions > button,
  .student-action-card.primary-path .student-card-actions button:first-child,
  .neat-quiz-empty > button,
  .neat-quiz-controls button:last-child:not(:disabled),
  .revision-paywall-actions button:first-child,
  .teacher-upgrade-actions button:first-child,
  .onboarding-finish-grid .onboarding-primary
) { color: var(--on-accent); }
.plan-button.subtle:hover:not(:disabled) { color: var(--on-accent); }
.editor-toolbar .revision-action-primary:hover:not(:disabled) { border-color: var(--accent); background: var(--surface-subtle); color: var(--accent-ink); }
.danger-button:hover:not(:disabled) { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
/* Field boundaries are stronger than decorative dividers; focus and errors retain their colours. */
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), textarea, select):not(#coding-source):not(:focus):not([aria-invalid="true"]):not(:user-invalid) { border-color: var(--control-border); }
.password-field:not(:focus-within):not(:has([aria-invalid="true"], input:user-invalid)) { border-color: var(--control-border); }
.eyebrow, .workspace-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }
.brand-mark { border-radius: 10px; background: #20374e; color: #c1f3e0; border: 1px solid #39566e; box-shadow: none; }

/* Main destinations stay in the same place while activities change. */
.app-shell {
  width: calc(100% - var(--workspace-rail));
  margin-left: var(--workspace-rail);
  min-height: calc(100dvh - 45px);
  height: auto;
  overflow: visible;
  background: var(--canvas);
  grid-template-columns: 190px 240px minmax(0, 1fr);
  grid-template-rows: var(--topbar-height) auto minmax(0, 1fr);
  grid-template-areas: "topbar topbar topbar" "page-header page-header page-header" "sidebar notes editor";
}
.app-shell.revision-mode, .app-shell.contact-mode {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--topbar-height) auto minmax(0, 1fr);
  grid-template-areas: "topbar" "page-header" "main";
}
.app-topbar, .revision-mode .app-topbar, .contact-mode .app-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  min-height: var(--topbar-height);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: var(--topbar-height);
  grid-template-areas: "brand utilities";
  align-items: center;
  gap: 12px;
  padding: 0 var(--workspace-gutter);
  border-top: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.topbar-center { grid-area: brand; justify-self: start; min-width: 0; }
.topbar-brand-button {
  position: fixed;
  z-index: 52;
  top: 19px;
  left: 18px;
  width: calc(var(--workspace-rail) - 36px);
  padding: 0;
  border: 0;
  color: var(--text);
  box-shadow: none;
  background: transparent;
}
.topbar-product { gap: 9px; }
.topbar-product strong { font-size: 15px; color: var(--text); }
.app-topbar .topbar-product > div > span { display: none; }
.topbar-context, .topbar-clock, .topbar-context .account-status { display: none; }
.topbar-utilities { gap: 10px; }
.topbar-utilities > :is(#open-plans-button, #settings-button, [data-app-section="contact"], #signed-in-account-actions),
.topbar-utilities .secondary-account-button { display: none; }
.topbar-utilities .primary-account-button { min-height: 38px; white-space: nowrap; }
.topbar-search-button { min-height: 40px; padding: 8px 12px; font-size: 13px; color: var(--text-secondary); }
.topbar-search-button kbd { border: 1px solid var(--border); border-radius: 5px; padding: 1px 4px; background: var(--surface-subtle); font-size: 10px; }
.topbar-section-switch {
  position: fixed;
  z-index: 50;
  inset: 0 auto 0 0;
  width: var(--workspace-rail);
  height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  padding: 102px 14px 24px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
}
.topbar-section-switch::before { display: none; }
.topbar-section-switch :is(a, button) {
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--text-secondary);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  box-shadow: none;
}
.topbar-section-switch :is(a, button).active,
.topbar-section-switch :is(a, button)[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 20%, transparent); }
.topbar-section-switch :is(a, button):hover { background: var(--surface-muted); color: var(--text); }
.topbar-section-switch :is(a, button).active:hover { background: var(--accent-soft); color: var(--accent-ink); }
.topbar-section-switch :is(a, button):focus-visible { outline-offset: -3px; }
.nav-icon { display: inline-flex; width: 20px; height: 20px; flex: 0 0 20px; align-items: center; justify-content: center; font-size: 18px; }
.nav-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.global-account-menu { display: block; position: relative; }
.global-account-menu summary { display: flex; min-height: 40px; max-width: 180px; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; }
.global-account-menu summary > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-account-menu .profile-avatar { width: 26px; height: 26px; font-size: 10px; flex-shrink: 0; }
.global-account-menu nav { position: absolute; top: calc(100% + 8px); right: 0; z-index: 120; display: grid; width: min(264px, calc(100vw - 24px)); gap: 3px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-dialog); }
.global-account-menu nav button { min-height: 44px; padding: 10px 12px; border: 0; background: transparent; color: var(--text); font-size: 14px; text-align: left; box-shadow: none; }
.global-account-menu nav button:hover { background: var(--accent-soft); }
body:has(#app-view:not([hidden])) > .site-footer { margin-left: var(--workspace-rail); background: var(--canvas); }
.site-footer { gap: 4px 16px; }
.site-footer button { min-height: 30px; color: var(--text-muted); }

/* Each destination gets one heading and a short description of its job. */
#workspace-page-header {
  grid-area: page-header;
  display: flex;
  width: min(var(--workspace-width), calc(100% - var(--workspace-gutter) * 2));
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto;
  padding: 30px 0 24px;
}
#workspace-page-header > div { min-width: 0; }
.workspace-eyebrow { margin: 0 0 7px; }
#workspace-page-title { margin: 0; color: var(--text); font-size: clamp(27px, 3vw, 34px); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
#workspace-page-description { max-width: 70ch; margin: 9px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.65; }
.workspace-page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 8px; }
.workspace-page-actions :is(a, button), #practice-activity-navigation a, #study-activity-navigation a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}
.workspace-page-actions [aria-current="page"] { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.revision-view, .contact-view { min-width: 0; height: auto; overflow: visible; background: var(--canvas); }
.revision-view { padding-bottom: 36px; }
.revision-view > :is(.revision-hero, .student-dashboard-panel, .revision-stage, .revision-progress-section, .neat-questions-section, .exam-practice-section, #course-library-section, .practice-hub, #practice-activity-navigation, #study-activity-navigation) {
  width: min(var(--workspace-width), calc(100% - var(--workspace-gutter) * 2));
  margin-inline: auto;
}
.revision-view > :is(.student-dashboard-panel, .revision-stage, .revision-progress-section, .neat-questions-section, .exam-practice-section) { padding-block: 0 24px; border-bottom: 0; }
.revision-view[data-student-view] > :is(.revision-stage, .revision-progress-section, .neat-questions-section, .exam-practice-section) { padding-block: 0 24px; }
.revision-view:not([data-student-view="home"]) :is(.revision-hero, .student-dashboard-panel) { display: none; }
.revision-view:not([data-student-view="progress"]) .revision-progress-section { display: none; }
.revision-view:not([data-student-view="revise"]) :is(#course-library-section, .revision-stage, #study-activity-navigation) { display: none; }
.revision-view[data-student-view="revise"][data-study-view="cards"] #course-library-section,
.revision-view[data-student-view="revise"][data-study-view="topics"] :is(.revision-stage, #study-activity-navigation) { display: none; }
.revision-view:not([data-student-view="practice"]) :is(.practice-hub, #practice-activity-navigation, .neat-questions-section, .exam-practice-section) { display: none; }
.revision-view[data-student-view="practice"]:not([data-practice-mode="hub"]) .practice-hub,
.revision-view[data-student-view="practice"][data-practice-mode="hub"] :is(#practice-activity-navigation, .neat-questions-section, .exam-practice-section) { display: none; }
.revision-view:not([data-student-view="coding"]) #coding-practice-section { display: none; }

/* Course context belongs to an activity, rather than every page in the app. */
.curriculum-context {
  display: grid;
  width: min(var(--workspace-width), calc(100% - var(--workspace-gutter) * 2));
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, 1fr);
  gap: 8px 22px;
  margin: 0 auto 24px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.revision-view:not([data-student-view="revise"]):not([data-student-view="practice"]) .curriculum-context,
.revision-view[data-student-view="practice"][data-practice-mode="hub"] .curriculum-context { display: none; }
.revision-view[data-student-view="practice"]:is([data-practice-mode="mock"], [data-practice-mode="labs"]) .component-topic-picker { display: none; }
.revision-view[data-student-view="practice"]:is([data-practice-mode="mock"], [data-practice-mode="labs"]) .curriculum-context { grid-template-columns: minmax(0, 1fr); }
.revision-view[data-student-view="revise"][data-study-view="topics"] .curriculum-context { grid-template-columns: minmax(0, 1fr); }
.revision-view[data-student-view="revise"][data-study-view="topics"] .component-topic-picker { display: none; }
.component-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.component-switch button { display: grid; min-height: 58px; align-content: center; gap: 3px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-subtle); color: var(--text-secondary); box-shadow: none; text-align: left; }
.component-switch button span { font-size: 11px; font-weight: 500; }
.component-switch button strong { font-size: 13px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.component-switch button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.component-topic-picker { display: grid; min-width: 0; gap: 6px; align-self: center; color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.component-topic-picker select { width: 100%; min-width: 0; min-height: 42px; background: var(--surface); font-size: 13px; }
.content-review-notice { grid-column: 1 / -1; margin: 0; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
#practice-activity-navigation, #study-activity-navigation { display: flex; align-items: center; gap: 12px; margin-block: 0 18px; }

/* Today provides a clear next action, with the other capabilities in plain view. */
.revision-view[data-student-view="home"] .revision-hero { display: block; padding: 0 0 20px; border: 0; }
.revision-view[data-student-view="home"] .revision-hero-copy { display: none; }
.revision-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; gap: 12px; margin: 0; border: 0; }
.revision-summary-card { min-height: 0; padding: 14px 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: none; }
.revision-summary-card strong { display: block; margin-block: 4px; color: var(--text); font-size: 24px; line-height: 1.2; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.revision-summary-card p { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; }
.revision-summary-card.recommended { display: none; }
.student-dashboard-panel { min-width: 0; }
.today-session { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .75fr); gap: 24px; padding: 28px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: none; }
.today-session-copy h3 { margin: 8px 0 12px; max-width: 620px; font-size: clamp(23px, 2.5vw, 29px); line-height: 1.25; letter-spacing: -.025em; }
.today-session-copy > .eyebrow { margin: 0; color: var(--accent-ink); }
.today-session-copy p:not(.eyebrow) { color: var(--text-secondary); font-size: 14px; line-height: 1.65; }
.today-session-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.today-session-actions > button { min-height: 46px; padding: 11px 20px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font-size: 14px; box-shadow: none; }
.study-loop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.study-loop li { display: grid; align-content: start; gap: 7px; min-width: 0; }
.study-loop li > span { display: inline-grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 11px; font-weight: 600; }
.study-loop strong { color: var(--text); font-size: 13px; }
.study-loop small { color: var(--text-secondary); font-size: 11px; line-height: 1.6; }
.session-duration-menu summary { min-height: 44px; padding: 10px 13px; border-radius: 8px; color: var(--text-secondary); border-color: var(--border); background: var(--surface); font-size: 13px; }
.session-duration-menu > div { z-index: 10; border-radius: 10px; background: var(--surface); }
.today-session .study-loop { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 18px; border: 0; border-radius: 10px; background: var(--surface-subtle); }
.today-session .study-loop li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.today-session .study-loop li > span { grid-row: 1 / 3; width: 28px; height: 28px; margin: 0; border-color: var(--border); color: var(--accent-ink); background: var(--accent-soft); font-size: 11px; }
.today-session .study-loop strong { color: var(--text); font-size: 13px; }
.today-session .study-loop small { grid-column: 2; margin-top: 4px; color: var(--text-secondary); font-size: 12px; }
.today-preview { grid-column: 1 / -1; border-top: 1px solid var(--border); }
.today-preview summary, .today-tools > summary { padding: 14px 0 0; color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; }
.today-tools { margin-top: 20px; border-top: 1px solid var(--border); }
.student-home-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.student-home-sections > section { padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.today-capabilities, .workspace-capabilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.today-capabilities :is(a, button), .workspace-capabilities :is(a, button), .today-capability {
  display: grid; min-width: 0; gap: 9px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-align: left; text-decoration: none; box-shadow: none;
}
.today-capabilities strong, .workspace-capabilities strong, .today-capability strong { font-size: 16px; }
.today-capabilities p, .today-capabilities small, .workspace-capabilities small, .today-capability span { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }

/* Revise is the single home for topic browsing; cards stay inside that route. */
#course-library-section { padding-bottom: 26px; }
#course-library-section .topic-packs-head { margin-top: 0; padding-top: 0; border-top: 0; align-items: start; }
.topic-packs-head h3 { margin: 0; color: var(--text); font-size: 20px; letter-spacing: -.015em; }
.topic-packs-head > p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.65; text-align: left; }
.neat-questions-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; overflow: visible; margin-top: 18px; padding: 0; border: 0; background: transparent; }
.neat-question-card { min-height: 240px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.neat-question-card.active { border-color: var(--accent); box-shadow: none; }
.question-code { font-size: 12px; }
.question-current, .question-variant { font-size: 10px; }
.neat-question-card-copy strong { font-size: 15px; line-height: 1.5; }
.neat-question-card-copy span, .topic-lock-note span { color: var(--text-muted); font-size: 12px; line-height: 1.6; }
.topic-card-meta { font-size: 11px; }
.topic-card-actions { margin-top: 16px; flex-wrap: wrap; gap: 8px; }
.topic-card-actions button { min-height: 40px; padding: 8px 10px; font-size: 12px; }
.revision-stage-head { display: flex; align-items: flex-start; gap: 24px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); }
.revision-stage-head h3 { margin: 4px 0 6px; font-size: 19px; line-height: 1.35; }
.revision-stage-head p { max-width: 68ch; color: var(--text-secondary); font-size: 13px; line-height: 1.65; }
.revision-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.revision-actions button { min-height: 38px; padding: 8px 11px; border-color: var(--border); background: var(--surface-subtle); color: var(--text-secondary); font-size: 12px; box-shadow: none; }
.revision-card-grid { display: block; min-width: 0; margin-top: 18px; padding: 0; }
.focused-retrieval-card { min-width: 0; padding: 28px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); }
.retrieval-meta { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 10px; color: var(--text-secondary); font-size: 12px; }
.retrieval-meta > span:first-child { color: var(--accent-ink); font-weight: 600; }
.focused-retrieval-card h3 { max-width: 52ch; margin: 24px 0 14px; font-size: clamp(22px, 2.3vw, 28px); font-weight: 650; line-height: 1.45; letter-spacing: -.015em; overflow-wrap: anywhere; }
.retrieval-guidance { max-width: 68ch; margin: 0 0 22px; color: var(--text-secondary); font-size: 13px; }
.focused-retrieval-card > button { min-height: 44px; padding: 10px 18px; box-shadow: none; }
.retrieval-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.retrieval-steps li { padding: 6px 10px; border-radius: 6px; background: var(--surface-subtle); color: var(--text-secondary); font-size: 12px; }
.retrieval-steps li[aria-current="step"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.retrieval-answer { margin-bottom: 20px; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-subtle); }
.retrieval-answer h4 { margin: 0 0 8px; color: var(--accent-ink); font-size: 13px; }
.retrieval-answer p { margin: 0; color: var(--text); font-size: 16px; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
.focused-retrieval-card .confidence-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.focused-retrieval-card .confidence-controls button { min-height: 44px; padding: 10px; border: 1px solid var(--border-strong); color: var(--text); background: var(--surface); }
.focused-retrieval-card .confidence-controls button:hover { border-color: var(--accent); background: var(--accent-soft); }
.session-progress-track { appearance: none; display: block; width: 100%; height: 5px; margin-top: 14px; border: 0; border-radius: 6px; overflow: hidden; background: var(--surface-muted); color: var(--accent); }
.session-progress-track::-webkit-progress-bar { background: var(--surface-muted); border-radius: 6px; }
.session-progress-track::-webkit-progress-value { background: var(--accent); border-radius: 6px; }
.session-progress-track::-moz-progress-bar { background: var(--accent); border-radius: 6px; }
.deck-summary-panel { padding: 26px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }

/* Practice presents a choice once, then gives the activity the whole page. */
.practice-hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 0 28px; border: 0; background: transparent; color: var(--text); }
.practice-hub h2 { margin: 0 0 8px; font-size: 20px; }
.practice-hub > div:first-child > p { color: var(--text-secondary); font-size: 14px; }
.practice-hub .practice-mode-tabs, .practice-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0; border: 0; background: transparent; }
.practice-hub .practice-choice { display: grid; min-width: 0; min-height: 184px; align-content: start; gap: 12px; padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: none; text-align: left; }
.practice-hub .practice-choice:hover { border-color: var(--accent); background: var(--surface); }
.practice-choice strong { font-size: 18px; line-height: 1.35; }
.practice-choice span, .practice-choice p { margin: 0; color: var(--text-secondary); font-size: 13px; font-weight: 400; line-height: 1.65; }
.practice-choice small { color: var(--accent-ink); font-size: 12px; }
.practice-choice b { align-self: end; color: var(--accent-ink); font-size: 13px; font-weight: 600; }
.activity-mark { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 700; }
.practice-choice .activity-mark { color: var(--accent-ink); font-weight: 700; }
.practice-code-link { grid-column: 1 / -1; display: grid; gap: 7px; padding: 20px 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-subtle); color: var(--text); text-decoration: none; }
.practice-code-link span { color: var(--text-secondary); font-size: 13px; }
.practice-code-link b { color: var(--accent-ink); font-size: 13px; }
.course-library-intro { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; margin-bottom: 16px; }
.course-library-intro p { max-width: 68ch; margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.65; }
.course-library-intro a { font-size: 12px; font-weight: 600; }
.course-library-intro a { display: inline-block; min-height: 40px; padding-block: 10px; }
.today-workspace { margin-top: 26px; }
.today-workspace > .section-title { margin-bottom: 14px; }
.today-workspace h2 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.015em; text-transform: none; }
.today-workspace > .section-title > span { color: var(--text-muted); font-size: 12px; letter-spacing: 0; text-transform: none; }
.today-workspace-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.today-workspace-grid > a { display: grid; align-content: start; gap: 10px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; }
.today-workspace-grid > a:hover { border-color: var(--accent); }
.today-workspace-grid strong { font-size: 16px; line-height: 1.4; }
.today-workspace-grid p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.65; }
.today-workspace-grid b { color: var(--accent-ink); font-size: 12px; }
.today-workspace-grid .today-code-card { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.neat-questions-head { align-items: start; gap: 24px; margin-bottom: 18px; }
.neat-questions-brand h3 { margin: 3px 0 7px; font-size: 20px; }
.neat-questions-brand p:not(.eyebrow) { max-width: 66ch; color: var(--text-secondary); font-size: 13px; line-height: 1.65; }
.neat-questions-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.neat-questions-actions label { display: grid; gap: 5px; color: var(--text-secondary); font-size: 12px; letter-spacing: 0; text-transform: none; }
.neat-questions-actions select { min-height: 42px; font-size: 13px; }
.neat-questions-actions > span { max-width: 190px; color: var(--text-muted); font-size: 11px; }
.neat-quiz-panel, .exam-practice-panel { max-width: none; margin: 0; }
.neat-quiz-empty, .neat-quiz-player, .neat-quiz-complete, .exam-question-card, .mini-mock-shell { border-color: var(--border); border-radius: 12px; background: var(--surface); }
.neat-quiz-empty > button { min-height: 44px; color: var(--on-accent); }
.neat-quiz-option:disabled { opacity: 1; color: var(--text); cursor: default; }
.exam-practice-head { align-items: start; gap: 20px; margin-bottom: 16px; }
.exam-practice-head h3 { margin: 3px 0 7px; font-size: 20px; }
.exam-marking-notice { color: var(--text-muted); font-size: 12px; line-height: 1.65; }
.practice-focused .curriculum-context { display: none; }
/* The page header, navigation and exit action remain available during focused work. */
.app-shell.revision-focus-active { display: grid; min-height: calc(100dvh - 45px); padding-bottom: 0; }
.app-shell.revision-focus-active .app-topbar { display: grid !important; }
.app-shell.revision-focus-active #workspace-page-header { display: flex !important; }
.app-shell.revision-focus-active .revision-view { height: auto; overflow: visible; }
.app-shell.revision-focus-active .revision-stage { min-height: 0; width: min(var(--workspace-width), calc(100% - var(--workspace-gutter) * 2)); padding: 0 0 24px; }
.app-shell.revision-focus-active .revision-stage-head { position: static; padding: 18px 20px; background: var(--surface); backdrop-filter: none; }
.app-shell.revision-focus-active .revision-card-grid { width: min(920px, 100%); margin: 18px auto 0; }
.app-shell.revision-focus-active #study-activity-navigation { display: flex !important; }
.app-shell.revision-focus-active .curriculum-context { display: none; }
.neat-questions-section.quiz-active .neat-questions-head { display: none; }

/* Player styles share spacing and controls across recall, repair and written work. */
.repair-player, .recall-player, .guided-answer-review { min-width: 0; padding: 26px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.repair-player header, .recall-player header { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.repair-player header { padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.recall-player h4, .repair-player h4 { max-width: 54ch; margin: 0; font-size: 23px; line-height: 1.4; overflow-wrap: anywhere; }
.repair-player h5, .recall-player h5 { margin: 12px 0; font-size: 18px; line-height: 1.45; }
.recall-player p, .recall-player label, .repair-player p, .repair-player label { max-width: 70ch; line-height: 1.7; overflow-wrap: anywhere; }
.recall-player label, .repair-player label { text-transform: none; letter-spacing: 0; }
.recall-player label { display: block; margin-top: 22px; }
.recall-player textarea { width: 100%; min-height: 112px; margin-block: 12px 20px; padding: 12px; resize: vertical; font: inherit; }
.recall-player button, .repair-player button { min-height: 44px; padding: 10px 15px; white-space: normal; }
.recall-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.recall-comparison { padding-top: 20px; border-top: 1px solid var(--border); }
.recall-position, .practice-save-note, .repair-step-count, .repair-notice { color: var(--text-secondary); font-size: 12px; line-height: 1.65; }
.repair-player footer { padding-top: 18px; margin-top: 24px; border-top: 1px solid var(--border); }
.recall-player > .practice-save-note { margin-top: 22px; }
.repair-step-copy { min-height: 90px; }
.repair-picker { display: grid; gap: 10px; }
.repair-picker button { border-color: var(--border); color: var(--text); background: var(--surface-subtle); text-align: left; }
.repair-picker span { display: block; margin-top: 5px; color: var(--text-secondary); font-size: 12px; font-weight: 400; }
#repair-answer-form { display: grid; gap: 16px; }
#repair-answer-form label { font-size: 17px; font-weight: 600; }
#repair-answer-form input { width: 100%; max-width: 320px; min-height: 44px; }
#repair-answer-form button { justify-self: start; }
.guided-review-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-block: 22px; }
.guided-review-columns section { min-width: 0; }
.guided-review-columns p, .guided-review-columns li { line-height: 1.7; overflow-wrap: anywhere; }
.preserve-lines { white-space: pre-wrap; }
.guided-mock-results details { padding: 16px 0; border-bottom: 1px solid var(--border); }
.guided-mock-results summary { cursor: pointer; font-weight: 600; }

/* Progress owns the evidence and mistake journal, rather than repeating them in Notes. */
.progress-component-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.progress-component-switch button { min-height: 42px; padding: 10px 16px; border-color: var(--border); font-size: 13px; }
.progress-component-switch button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.revision-progress-stack { display: grid; grid-template-columns: minmax(275px, .8fr) minmax(0, 1.7fr); gap: 22px; align-items: start; }
.revision-progress-card { display: grid; grid-template-columns: 106px minmax(0, 1fr); padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.revision-session-context { grid-column: 1 / -1; display: grid; gap: 5px; padding: 2px 2px 12px; border-bottom: 1px solid var(--border); }
.revision-session-context span { color: var(--text-muted); font-size: 11px; font-weight: 600; line-height: 1.5; }
.revision-session-context strong { color: var(--text); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.revision-progress::before { content: none; }
.revision-progress, .revision-course-progress { padding-block: 16px; }
.revision-course-progress p { font-size: 12px; line-height: 1.6; }
.revision-course-progress button { min-height: 38px; margin-top: 10px; font-size: 12px; }
.revision-mastery-panel { min-width: 0; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.mastery-map-head p { max-width: 70ch; margin-block: 10px 16px; color: var(--text-secondary); font-size: 12px; line-height: 1.65; }
.mastery-map-grid { gap: 7px; }
.mastery-map-grid button { min-height: 50px; border-radius: 7px; }
.mistake-journal { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--border); }
.mistake-journal-head h3 { margin: 4px 0 8px; font-size: 21px; }

/* Notes are a supporting study tool inside Revise. Keep folders and writing, remove duplicates. */
.notes-sidebar-context :is(.workspace-panel, .today-panel, .achievement-panel, .sidebar-settings-panel) { display: none; }
.sidebar { background: var(--surface-subtle); border-right: 1px solid var(--border); }
.sidebar-tools { min-height: 58px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.sidebar-tools .brand-controls { margin-left: auto; }
#new-note-button { min-width: 38px; min-height: 38px; border-radius: 8px; color: var(--on-accent); }
.notes-sidebar-context > :is(section, details) { padding: 16px; }
.notes-sidebar-context .panel label, .notes-sidebar-context .section-title { font-size: 11px; }
.notes-sidebar-context .search-panel input { min-height: 40px; font-size: 13px; }
.spaces-panel > summary { padding-block: 6px; color: var(--text-secondary); font-size: 12px; cursor: pointer; }
.notes-column { height: auto; min-height: 0; border-top: 1px solid var(--border); border-right: 1px solid var(--border); }
.column-header { min-height: 74px; padding: 16px; }
.column-header h2 { font-size: 16px; }
.notes-list { height: auto; max-height: calc(100dvh - 260px); overflow-y: auto; }
.editor { height: auto; overflow: visible; border-top: 1px solid var(--border); }
.editor-masthead { grid-template-columns: minmax(0, 1fr) 160px; align-items: center; gap: 18px; padding: 20px 24px; background: var(--surface); color: var(--text); border-bottom-color: var(--border); }
.note-identity h2 { font-size: 23px; line-height: 1.3; }
.editor-actions label { font-size: 11px; }
.editor-masthead :is(input, select) { min-height: 40px; background: var(--surface); color: var(--text); font-size: 13px; }
.editor-actionbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 24px; }
.editor-actionbar > .revision-action-primary { min-height: 40px; box-shadow: none; font-size: 13px; }
.editor-control-groups { margin-left: auto; }
.learning-flow { display: none; }
.editor-workbench { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.writing-pane, .study-pane { padding: 22px 24px; }
.writing-pane { border-right: 0; }
.writing-head h3 { font-size: 16px; }
#note-body { min-height: 48dvh; line-height: 1.8; }
.editor-hint { margin-bottom: 0; font-size: 12px; line-height: 1.65; }
.study-pane { padding-block: 0; border-top: 1px solid var(--border); }
.study-pane > details > summary { min-height: 58px; font-size: 13px; }
.study-pane > details > summary small { font-size: 11px; }
.study-pane-content { gap: 22px; }
.draft-card-editor { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.draft-card-editor label { color: var(--text-secondary); font-size: 12px; }
.draft-card-editor input:not([type="checkbox"]), .draft-card-editor textarea { width: 100%; min-width: 0; font-size: 14px; }

/* Public pages use the same type, buttons and paper surfaces as the workspace. */
.landing-page { background: var(--canvas); }
.landing-nav { background: var(--surface); }
.landing-hero { min-height: auto; gap: 48px; padding-block: 52px; align-items: center; }
.landing-hero h1 { font-size: clamp(38px, 4.5vw, 62px); line-height: 1.12; letter-spacing: -.045em; }
.landing-hero h1 span { color: var(--accent-ink); }
.landing-hero > div > p:not(.eyebrow) { max-width: 58ch; color: var(--text-secondary); font-size: 16px; line-height: 1.75; }
.landing-hero-actions button { min-height: 46px; padding: 10px 16px; box-shadow: none; }
.landing-demo-card { padding: 28px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); transform: none; box-shadow: none; }
.landing-demo-card .landing-sample-question { color: var(--text); font-size: 24px; line-height: 1.5; letter-spacing: -.015em; }
.landing-demo-card .study-loop { padding: 20px 0; border-block: 1px solid var(--border); background: transparent; }
.landing-workflow article, .landing-plan-row article, .landing-benefits-grid > div { border-radius: 12px; }
.landing-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.landing-feature-grid > article { padding: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.auth-shell { border-radius: 18px; overflow: hidden; }
.auth-product-panel { background: #20374e; color: #eef5fb; }
.auth-product-panel :is(p, dd, .eyebrow, .product-signature) { color: #c7d6e7; }
.student-pricing-grid, .landing-plan-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.student-pricing-grid .pricing-card { box-shadow: none; }
.pricing-contract-note { margin: 20px 28px; color: var(--text-secondary); font-size: 13px; line-height: 1.65; }
.contact-hero { padding: 24px; margin-top: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); }
.contact-hero h2 { font-size: 27px; }

/* Familiar field, status and consent states stay available across every destination. */
:is(.auth-form, .contact-form, .settings-panel, .exam-answer-form, .editor) :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus-visible { border-color: var(--accent); outline: 2px solid var(--focus); outline-offset: 2px; }
:is(.auth-form, .contact-form, .settings-panel, .exam-answer-form) :is(input, textarea):user-invalid { border-color: var(--danger); outline-color: var(--danger); }
.ui-switch { position: relative; display: inline-grid; width: 56px; height: 44px; place-items: center; flex: 0 0 56px; }
.privacy-consent-row .ui-switch input { appearance: none; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 9px; background: transparent; box-shadow: none; cursor: pointer; }
.ui-switch svg { width: 56px; height: 28px; overflow: visible; pointer-events: none; }
.privacy-consent-row .ui-switch input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ui-switch-track { fill: var(--border-strong); }
.ui-switch-symbol { fill: none; stroke: var(--text); stroke-width: 10; stroke-linecap: round; }
.ui-switch-thumb { fill: var(--surface); stroke: var(--border); stroke-width: 3; }
.ui-switch input:checked + svg .ui-switch-track { fill: var(--accent); }
.ui-switch input:checked + svg .ui-switch-thumb { transform: translateX(150px); }
.ui-switch input:checked + svg .ui-switch-symbol { stroke: var(--on-accent); }
.ui-switch input:disabled { cursor: not-allowed; }
.ui-switch input:disabled + svg { opacity: .5; }
.status-message:not(:empty) { --notice-color: var(--accent-ink); padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--notice-color); border-radius: 8px; color: var(--text); background: var(--surface-subtle); line-height: 1.65; overflow-wrap: anywhere; }
.status-message.success:not(:empty) { --notice-color: var(--success); }
.status-message.error:not(:empty) { --notice-color: var(--danger); background: var(--danger-soft); }
button[aria-busy="true"] { cursor: progress; }
button[aria-busy="true"]::before { content: ""; display: inline-block; width: .85em; height: .85em; margin-inline-end: .5em; vertical-align: -.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-busy 700ms linear infinite; }
@keyframes ui-busy { to { transform: rotate(360deg); } }

/* Compact desktop and tablet layouts retain the same hierarchy. */
@media (max-width: 1180px) and (min-width: 821px) {
  :root { --workspace-rail: 180px; --workspace-gutter: 24px; }
  .app-shell { grid-template-columns: 170px 210px minmax(0, 1fr); }
  .topbar-section-switch { padding-inline: 10px; }
  .topbar-section-switch :is(a, button) { padding-inline: 12px; }
  .topbar-product > div > span { display: none; }
  .neat-questions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .curriculum-context { grid-template-columns: minmax(0, 1fr); }
  .revision-progress-stack { grid-template-columns: minmax(0, 1fr); }
  .today-capabilities, .workspace-capabilities, .today-workspace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-masthead { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  :root { --workspace-rail: 0px; --workspace-gutter: 22px; --topbar-height: 60px; }
  html { scroll-padding-top: 76px; scroll-padding-bottom: 100px; }
  .app-shell, .app-shell.revision-mode, .app-shell.contact-mode {
    width: 100%;
    min-height: calc(100dvh - 45px);
    height: auto;
    margin: 0;
    overflow: visible;
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--topbar-height) auto auto auto;
    grid-template-areas: "topbar" "page-header" "notes" "editor";
  }
  .app-shell.revision-mode, .app-shell.contact-mode { grid-template-rows: var(--topbar-height) auto auto; grid-template-areas: "topbar" "page-header" "main"; }
  .app-topbar, .revision-mode .app-topbar, .contact-mode .app-topbar { min-height: var(--topbar-height); grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--topbar-height); grid-template-areas: "brand utilities"; gap: 8px; padding-inline: 16px; }
  .topbar-brand-button { position: static; width: auto; }
  .topbar-product > div > span { display: none; }
  .topbar-product strong { white-space: nowrap; font-size: 14px; }
  .topbar-product .brand-mark { width: 30px; height: 30px; }
  .topbar-context { display: none; }
  .topbar-utilities { gap: 5px; }
  .topbar-utilities .account-actions, .topbar-utilities > #theme-toggle { display: none !important; }
  .topbar-search-button { min-width: 40px; padding: 8px; font-size: 12px; }
  .topbar-search-button kbd { display: none; }
  .global-account-menu summary { max-width: 116px; min-height: 40px; padding-inline: 8px; }
  .topbar-section-switch {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    height: calc(70px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    padding: 5px 0 calc(5px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
  }
  .topbar-section-switch :is(a, button) { display: flex; min-width: 0; min-height: 58px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 7px 0; border: 0; border-radius: 0; font-size: 11px; text-align: center; }
  .topbar-section-switch .nav-icon { width: 20px; height: 20px; flex-basis: 20px; }
  #workspace-page-header { gap: 16px; padding-block: 24px 22px; }
  .workspace-page-actions { justify-content: flex-start; }
  .today-session { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .today-session .study-loop { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .today-session .study-loop li { grid-template-columns: minmax(0, 1fr); }
  .today-session .study-loop li > span { grid-row: auto; margin-bottom: 7px; }
  .today-session .study-loop small { grid-column: 1; }
  .curriculum-context { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; }
  .neat-questions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .revision-progress-stack, .guided-review-columns { grid-template-columns: minmax(0, 1fr); }
  .today-capabilities, .workspace-capabilities, .today-workspace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notes-column { height: auto; min-height: 180px; max-height: 360px; overflow: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .notes-list { height: auto; max-height: 250px; }
  .editor { min-width: 0; overflow: visible; }
  .app-shell:not(.revision-mode):not(.contact-mode) .topbar-context { display: flex; position: absolute; top: 76px; right: var(--workspace-gutter); z-index: 2; }
  .app-shell:not(.revision-mode):not(.contact-mode) #mobile-notes-button { display: inline-flex; min-height: 42px; align-items: center; padding: 9px 12px; border-color: var(--border); color: var(--text-secondary); background: var(--surface); font-size: 12px; }
  .app-shell:not(.revision-mode):not(.contact-mode) #workspace-page-header { padding-right: 114px; }
  .app-shell:not(.revision-mode):not(.contact-mode) .workspace-page-actions { padding-top: 0; }
  .app-shell:not(.revision-mode):not(.contact-mode) #workspace-page-header { flex-wrap: wrap; }
  .sidebar { width: min(320px, 92vw); max-width: 92vw; height: 100dvh; background: var(--surface); visibility: hidden; }
  .app-shell.mobile-sidebar-open .sidebar { z-index: 80; visibility: visible; }
  .app-shell.mobile-sidebar-open::after { z-index: 75; }
  .mobile-sidebar-close { display: inline-flex; min-height: 40px; align-items: center; padding: 8px 12px; font-size: 12px; }
  .editor-masthead, .editor-actionbar, .writing-pane, .study-pane { padding-inline: var(--workspace-gutter); }
  .app-shell.revision-focus-active { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .landing-feature-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  :root { --workspace-gutter: 16px; }
  #workspace-page-header { flex-direction: column; gap: 14px; padding-block: 22px 20px; }
  #workspace-page-title { font-size: 27px; }
  #workspace-page-description { font-size: 13px; }
  .workspace-page-actions { gap: 7px; padding-top: 0; }
  .workspace-page-actions :is(a, button) { min-height: 42px; padding-inline: 11px; font-size: 12px; }
  .workspace-eyebrow { font-size: 10px; }
  .topbar-utilities { gap: 2px; }
  .global-account-menu summary { max-width: 100px; font-size: 12px; }
  .global-account-menu summary .profile-avatar { width: 24px; height: 24px; }
  .revision-summary-grid { gap: 10px; }
  .revision-summary-card { padding: 12px 14px; }
  .revision-summary-card strong { font-size: 22px; }
  .revision-summary-card p { font-size: 11px; }
  .today-session { padding: 20px; }
  .today-session-copy h3 { font-size: 23px; }
  .today-session .study-loop { display: none; }
  .today-session-actions > button { padding-inline: 16px; }
  .today-capabilities, .workspace-capabilities, .today-workspace-grid, .student-home-sections, .practice-hub, .practice-hub .practice-mode-tabs, .practice-choice-grid, .neat-questions-grid { grid-template-columns: minmax(0, 1fr); }
  .today-capabilities :is(a, button), .workspace-capabilities :is(a, button), .today-capability { padding: 18px; }
  .practice-hub .practice-choice { min-height: 152px; padding: 20px; gap: 10px; }
  .component-switch button { padding: 9px; }
  .component-switch button strong { font-size: 12px; }
  .content-review-notice { font-size: 10px; }
  .revision-stage-head { flex-direction: column; gap: 14px; padding: 16px; }
  .revision-actions { justify-content: flex-start; }
  .focused-retrieval-card { padding: 20px 16px; }
  .focused-retrieval-card h3 { margin-top: 20px; font-size: 21px; }
  .retrieval-steps { gap: 5px; }
  .retrieval-steps li { padding: 6px 7px; font-size: 11px; }
  .retrieval-answer { padding: 15px; }
  .retrieval-answer p { font-size: 15px; }
  .neat-questions-head, .exam-practice-head { flex-direction: column; gap: 15px; }
  .neat-questions-actions { justify-content: flex-start; }
  .neat-quiz-empty, .neat-quiz-complete { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px; }
  .neat-quiz-player, .repair-player, .recall-player, .guided-answer-review { padding: 20px 16px; }
  .recall-player h4, .repair-player h4 { font-size: 20px; }
  .recall-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .revision-progress-card { grid-template-columns: 104px minmax(0, 1fr); padding: 12px; }
  .revision-mastery-panel { padding: 16px; }
  .mastery-map-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .editor-masthead { grid-template-columns: minmax(0, 1fr); padding-block: 18px; }
  .editor-actionbar { align-items: start; gap: 8px; }
  .editor-control-groups { margin-left: 0; }
  .editor-actionbar > .revision-action-primary { width: 100%; }
  .editor-control-menu > :is(.format-toolbar, .editor-toolbar) { width: min(230px, calc(100vw - 32px)); }
  .note-identity h2 { font-size: 21px; }
  .writing-pane { padding-block: 20px; }
  .study-pane > details > summary small { display: none; }
  #note-body { min-height: 380px; }
  .student-pricing-grid, .landing-plan-row, .study-pane-content { grid-template-columns: minmax(0, 1fr); }
  .landing-hero { padding-block: 32px; gap: 24px; }
  .landing-demo-card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .topbar-section-switch [aria-current="page"] { border: 2px solid Highlight; }
  .ui-switch-track { fill: Canvas; stroke: ButtonText; stroke-width: 8; }
  .ui-switch-thumb { fill: ButtonText; }
  .ui-switch input:checked + svg .ui-switch-track { fill: Highlight; }
  .ui-switch-symbol, .ui-switch input:checked + svg .ui-switch-symbol { stroke: ButtonText; }
}

.settings-dialog { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.settings-body { min-height: 0; overflow: hidden; }
#settings-message:not(:empty) { margin: 12px 24px; }
#settings-message:empty { display: none; }

/* Give dialog headings a separate column from their close control. */
.pricing-head, .badge-head, .settings-head, .global-search-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: start;
  gap: 16px;
}
.pricing-head > .modal-close-button, .badge-head > .modal-close-button,
.settings-head > .modal-close-button, .global-search-head > .modal-close-button {
  position: static;
  width: 44px;
  height: 44px;
}
.auth-card > :is(.eyebrow, h2), .legal-dialog > :is(.eyebrow, h2) { padding-inline-end: 48px; }

/* Notes keeps the writing pane usable before the main navigation becomes compact. */
@media (min-width: 821px) and (max-width: 1080px) {
  .app-shell:not(.revision-mode):not(.contact-mode) {
    grid-template-columns: 210px minmax(0, 1fr);
    grid-template-areas: "topbar topbar" "page-header page-header" "notes editor";
  }
  .app-shell:not(.revision-mode):not(.contact-mode) .topbar-context {
    position: absolute;
    top: 76px;
    right: var(--workspace-gutter);
    z-index: 2;
    display: flex;
  }
  .app-shell:not(.revision-mode):not(.contact-mode) #mobile-notes-button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    padding: 9px 12px;
    border-color: var(--border);
    color: var(--text-secondary);
    background: var(--surface);
    font-size: 12px;
  }
  .app-shell:not(.revision-mode):not(.contact-mode) #workspace-page-header { padding-right: 130px; }
  .app-shell:not(.revision-mode):not(.contact-mode) .sidebar {
    position: fixed;
    inset: 0 auto 0 var(--workspace-rail);
    z-index: 80;
    display: block;
    width: 320px;
    height: 100dvh;
    visibility: hidden;
    border-right: 1px solid var(--border-strong);
    background: var(--surface);
    box-shadow: var(--shadow-dialog);
    transform: translateX(-102%);
    transition: transform 220ms ease;
  }
  .app-shell.mobile-sidebar-open:not(.revision-mode):not(.contact-mode)::after {
    position: fixed;
    inset: 0;
    z-index: 75;
    background: rgba(13, 25, 22, .48);
    content: "";
  }
  .app-shell.mobile-sidebar-open:not(.revision-mode):not(.contact-mode) .sidebar { visibility: visible; transform: translateX(0); }
  .app-shell:not(.revision-mode):not(.contact-mode) .sidebar-tools { justify-content: space-between; }
  .app-shell:not(.revision-mode):not(.contact-mode) .mobile-sidebar-close {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    padding: 8px 12px;
    border-color: transparent;
    background: transparent;
    font-size: 12px;
  }
}

/* Anchor compact Notes menus to the action bar, not a narrow summary control. */
@media (max-width: 820px) {
  .editor-control-menu { position: static; }
  .editor-control-menu > :is(.format-toolbar, .editor-toolbar) { right: var(--workspace-gutter); left: auto; }
}
@media (max-width: 520px) {
  .editor-control-menu > :is(.format-toolbar, .editor-toolbar) { right: auto; left: var(--workspace-gutter); }
}