/* Shared visual language for lesson, route, and account screens. */
body.learner-app-body,
body.has-learner-tabs[data-page="account"] {
  --learner-paper: #f7f4ef;
  --learner-paper-strong: #efeae2;
  --learner-surface: #fffdf9;
  --learner-ink: #243d38;
  --learner-muted: #68746d;
  --learner-line: #d8d5cc;
  --learner-wine: #9b4354;
  --learner-wine-dark: #78323f;
  --learner-sage: #e6f0e8;
  --learner-sage-line: #b7cdbb;
  background: var(--learner-paper);
  color: var(--learner-ink);
}

body.learner-app-body .learner-app-main {
  background: var(--learner-paper);
}

/* App-like course flows */
body.learner-app-body .native-app-flow {
  width: min(1120px, 100%);
  margin: 0 auto;
  background: var(--learner-paper);
  color: var(--learner-ink);
}

body.learner-app-body .native-app-topbar {
  min-height: 76px;
  padding: 14px clamp(20px, 4vw, 48px);
  border-bottom: 1px solid var(--learner-line);
  background: rgba(247, 244, 239, .95);
}

body.learner-app-body .native-app-close,
body.learner-app-body .native-app-catalog {
  display: grid;
  place-items: center;
  min-width: 36px;
  min-height: 36px;
  border: 1px solid var(--learner-line);
  border-radius: 5px;
  background: transparent;
  color: var(--learner-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

body.learner-app-body .native-app-topbar > div span {
  color: var(--learner-wine);
}

body.learner-app-body .native-app-topbar > div b {
  color: var(--learner-ink);
}

body.learner-app-body .native-app-progress li {
  border-color: #bdc7c0;
  background: #e8e4dc;
}

body.learner-app-body .native-app-progress li.is-active,
body.learner-app-body .native-app-progress li.is-done {
  border-color: var(--learner-wine);
  background: var(--learner-wine);
}

body.learner-app-body .native-app-screen {
  background: var(--learner-paper);
}

body.learner-app-body .native-app-step {
  color: var(--learner-ink);
}

body.learner-app-body .native-app-step h1,
body.learner-app-body .native-app-step h2 {
  color: var(--learner-ink);
  font-family: Georgia, "Songti SC", "SimSun", serif;
  font-weight: 500;
  letter-spacing: 0;
}

body.learner-app-body .native-app-step > p,
body.learner-app-body .native-app-step > small,
body.learner-app-body .native-app-step small {
  color: var(--learner-muted);
}

body.learner-app-body .native-step-label,
body.learner-app-body .eyebrow {
  color: var(--learner-wine);
}

body.learner-app-body .native-video-frame,
body.learner-app-body .native-lab-player,
body.learner-app-body .native-full-demo,
body.learner-app-body .native-scenario-video {
  border: 1px solid #2f3834;
  border-radius: 4px;
  background: #171b19;
  box-shadow: none;
}

body.learner-app-body .native-video-frame > span,
body.learner-app-body .native-scenario-video > span {
  background: rgba(23, 27, 25, .86);
  color: #f5f1ea;
}

body.learner-app-body .native-coach-note {
  border-left-color: var(--learner-wine);
  border-radius: 0 4px 4px 0;
  background: #f8e9ec;
  color: #5f3c43;
}

body.learner-app-body .native-move-list li {
  border-color: var(--learner-line);
  background: var(--learner-surface);
}

body.learner-app-body .native-move-list li > span,
body.learner-app-body .native-signal > span {
  background: var(--learner-sage);
  color: #416650;
}

body.learner-app-body .native-move-list b,
body.learner-app-body .native-signal b {
  color: var(--learner-ink);
}

body.learner-app-body .native-move-list small {
  color: var(--learner-muted);
}

body.learner-app-body .native-app-timer,
body.learner-app-body .native-retry-card,
body.learner-app-body .native-depth-focus,
body.learner-app-body .native-real-world-focus,
body.learner-app-body .native-reflection {
  border-color: var(--learner-sage-line);
  border-radius: 4px;
  background: var(--learner-sage);
  color: var(--learner-ink);
}

body.learner-app-body .native-app-timer span,
body.learner-app-body .native-app-timer small,
body.learner-app-body .native-depth-focus p,
body.learner-app-body .native-real-world-focus p,
body.learner-app-body .native-reflection small {
  color: #4a6456;
}

body.learner-app-body .native-app-timer b {
  color: var(--learner-wine);
}

body.learner-app-body .native-app-help,
body.learner-app-body .native-understand-more,
body.learner-app-body .native-stuck-help,
body.learner-app-body .native-visual-lab,
body.learner-app-body .native-optional-route,
body.learner-app-body .native-full-demo {
  border-color: var(--learner-line);
  border-radius: 4px;
  background: var(--learner-surface);
  color: var(--learner-ink);
}

body.learner-app-body .native-app-help summary,
body.learner-app-body .native-understand-more summary,
body.learner-app-body .native-stuck-help-head b,
body.learner-app-body .native-visual-lab-head > b,
body.learner-app-body .native-full-demo summary {
  color: var(--learner-ink);
}

body.learner-app-body .native-app-help p,
body.learner-app-body .native-understand-more p,
body.learner-app-body .native-stuck-help article p,
body.learner-app-body .native-visual-lab-head small,
body.learner-app-body .native-full-demo p,
body.learner-app-body .native-full-demo small {
  color: var(--learner-muted);
}

body.learner-app-body .native-app-help a,
body.learner-app-body .native-understand-more a,
body.learner-app-body .native-optional-route a,
body.learner-app-body .native-text-button,
body.learner-app-body .native-retry-card > a:not(.button) {
  color: var(--learner-wine-dark);
}

body.learner-app-body .native-checkin-options button,
body.learner-app-body .native-pose-choices button,
body.learner-app-body .native-scenario-choices button,
body.learner-app-body .native-real-world-choices button,
body.learner-app-body .native-lab-phase-list button,
body.learner-app-body .native-scenario-variants button,
body.learner-app-body .native-stuck-help-options button,
body.learner-app-body .native-reflection label span {
  border-color: var(--learner-line);
  border-radius: 4px;
  background: var(--learner-surface);
  color: var(--learner-ink);
}

body.learner-app-body .native-checkin-options form:first-child button,
body.learner-app-body .native-checkin-options button.is-correct,
body.learner-app-body .native-real-world-choices button.is-correct,
body.learner-app-body .native-lab-diagnosis button {
  border-color: var(--learner-sage-line);
  background: #edf5ee;
  color: #345b46;
}

body.learner-app-body .native-checkin-options form:nth-child(2) button,
body.learner-app-body .native-checkin-options form:nth-child(3) button,
body.learner-app-body .native-checkin-options button.is-incorrect,
body.learner-app-body .native-real-world-choices button.is-incorrect {
  border-color: #d9b9bf;
  background: #fbf0f1;
  color: #70404a;
}

body.learner-app-body .native-pose-choices button[aria-pressed="true"],
body.learner-app-body .native-scenario-choices button[aria-pressed="true"],
body.learner-app-body .native-lab-phase-list button[aria-pressed="true"],
body.learner-app-body .native-scenario-variants button[aria-pressed="true"],
body.learner-app-body .native-stuck-help-options button[aria-pressed="true"],
body.learner-app-body .native-reflection input:checked + span {
  border-color: var(--learner-wine);
  background: #f9e9ec;
  color: var(--learner-wine-dark);
}

body.learner-app-body .native-real-world-choices,
body.learner-app-body .native-scenario-choices {
  border-color: var(--learner-sage-line);
  border-radius: 4px;
  background: #f0f6f1;
}

body.learner-app-body .native-real-world-choices > b,
body.learner-app-body .native-scenario-choices > b,
body.learner-app-body .native-real-world-choices p,
body.learner-app-body .native-scenario-choices p {
  color: #3d5748;
}

body.learner-app-body .button.primary,
body.learner-app-body .native-nav-next {
  border-color: var(--learner-wine);
  border-radius: 4px;
  background: var(--learner-wine);
  box-shadow: none;
  color: #fff;
}

body.learner-app-body .button.primary:hover,
body.learner-app-body .native-nav-next:hover {
  background: var(--learner-wine-dark);
}

body.learner-app-body .button.ghost,
body.learner-app-body .native-nav-back,
body.learner-app-body .native-timer-controls button {
  border-color: var(--learner-line);
  border-radius: 4px;
  background: var(--learner-surface);
  color: var(--learner-ink);
}

body.learner-app-body .native-app-nav {
  border-top-color: var(--learner-line);
  background: rgba(247, 244, 239, .97);
  box-shadow: 0 -8px 22px rgba(36, 61, 56, .06);
}

body.learner-app-body .learner-tabs {
  border-color: var(--learner-line);
  background: rgba(247, 244, 239, .97);
  box-shadow: 0 -8px 22px rgba(36, 61, 56, .06);
}

body.learner-app-body .learner-tabs a {
  border-radius: 4px;
  color: var(--learner-muted);
}

body.learner-app-body .learner-tabs a span {
  color: var(--learner-wine);
}

body.learner-app-body .learner-tabs a.is-active {
  background: #e8efe8;
  color: var(--learner-ink);
}

/* Traditional lesson pages without the guided flow */
body.learner-app-body .lesson-shell:not(.app-flow-shell) {
  grid-template-columns: 190px minmax(0, 780px);
  gap: clamp(28px, 5vw, 68px);
}

body.learner-app-body .lesson-sidebar .back-link,
body.learner-app-body .lesson-sidebar .lesson-catalog-button {
  color: var(--learner-wine-dark);
}

body.learner-app-body .lesson-catalog-button {
  border-color: var(--learner-line);
  border-radius: 4px;
  background: transparent;
}

body.learner-app-body .side-module,
body.learner-app-body .side-status {
  border-color: var(--learner-line);
  border-radius: 4px;
  background: var(--learner-surface);
  color: var(--learner-ink);
}

body.learner-app-body .side-module span,
body.learner-app-body .side-status.done {
  color: var(--learner-wine);
}

body.learner-app-body .lesson-title h1,
body.learner-app-body .lesson-content h2,
body.learner-app-body .lesson-content h3 {
  color: var(--learner-ink);
}

body.learner-app-body .lesson-title h1 {
  font-family: Georgia, "Songti SC", "SimSun", serif;
  font-weight: 500;
  letter-spacing: 0;
}

body.learner-app-body .lead,
body.learner-app-body .content-block p,
body.learner-app-body .media-section-head p,
body.learner-app-body .lesson-video-card p {
  color: var(--learner-muted);
}

body.learner-app-body .outcome {
  border-left-color: var(--learner-wine);
  border-radius: 0 4px 4px 0;
  background: #f8e9ec;
  color: #593a40;
}

body.learner-app-body .outcome span {
  color: var(--learner-wine);
}

body.learner-app-body .lesson-visual,
body.learner-app-body .challenge-card,
body.learner-app-body .quiz-card,
body.learner-app-body .complete-card,
body.learner-app-body .action-card,
body.learner-app-body .practice-protocol,
body.learner-app-body .practice-check {
  border-color: var(--learner-line);
  border-radius: 4px;
  background: var(--learner-surface);
  color: var(--learner-ink);
}

body.learner-app-body .challenge-card {
  background: #f9e9ec;
  border-color: #dec0c5;
}

/* Account screen shares the same quiet utilitarian palette. */
body.has-learner-tabs[data-page="account"] .topbar {
  border-bottom-color: var(--learner-line);
  background: rgba(247, 244, 239, .95);
}

body.has-learner-tabs[data-page="account"] .brand,
body.has-learner-tabs[data-page="account"] .topbar nav,
body.has-learner-tabs[data-page="account"] .nav-button {
  color: var(--learner-ink);
}

body.has-learner-tabs[data-page="account"] .brand-mark {
  overflow: hidden;
  border-radius: 5px;
  background: #fff url("/static/assets/learner-brand-mark.png") center / 142% no-repeat;
  color: transparent;
}

body.has-learner-tabs[data-page="account"] .account-shell {
  background: var(--learner-paper);
}

body.has-learner-tabs[data-page="account"] .account-card,
body.has-learner-tabs[data-page="account"] .panel-card {
  border-color: var(--learner-line);
  border-radius: 4px;
  background: var(--learner-surface);
  color: var(--learner-ink);
}

body.has-learner-tabs[data-page="account"] .account-card h1,
body.has-learner-tabs[data-page="account"] .panel-card h2 {
  color: var(--learner-ink);
  font-family: Georgia, "Songti SC", "SimSun", serif;
  font-weight: 500;
}

body.has-learner-tabs[data-page="account"] .account-row,
body.has-learner-tabs[data-page="account"] .form-stack input {
  border-color: var(--learner-line);
}

body.has-learner-tabs[data-page="account"] .account-row span,
body.has-learner-tabs[data-page="account"] .muted,
body.has-learner-tabs[data-page="account"] .form-stack label {
  color: var(--learner-muted);
}

body.has-learner-tabs[data-page="account"] .form-stack input {
  border-radius: 4px;
  background: #fff;
  color: var(--learner-ink);
}

body.has-learner-tabs[data-page="account"] .button.primary {
  border-radius: 4px;
  background: var(--learner-wine);
  color: #fff;
}

body.has-learner-tabs[data-page="account"] .button.ghost {
  border-color: var(--learner-line);
  border-radius: 4px;
  background: var(--learner-surface);
  color: var(--learner-ink);
}

body.has-learner-tabs[data-page="account"] .learner-tabs {
  border-color: var(--learner-line);
  background: rgba(247, 244, 239, .97);
  box-shadow: 0 -8px 22px rgba(36, 61, 56, .06);
}

body.has-learner-tabs[data-page="account"] .learner-tabs a {
  border-radius: 4px;
  color: var(--learner-muted);
}

body.has-learner-tabs[data-page="account"] .learner-tabs a span {
  color: var(--learner-wine);
}

body.has-learner-tabs[data-page="account"] .learner-tabs a.is-active {
  background: #e8efe8;
  color: var(--learner-ink);
}

/* Course picker is shared by the home screen and every lesson flow. */
.course-navigator {
  border-color: var(--learner-line, #d8d5cc);
  border-radius: 5px;
  background: #f7f4ef;
  color: #243d38;
  box-shadow: 0 26px 80px rgba(36, 61, 56, .2);
}

.course-navigator::backdrop {
  background: rgba(36, 61, 56, .32);
  backdrop-filter: blur(3px);
}

.course-navigator-head {
  border-bottom-color: #d8d5cc;
  background: #f7f4ef;
}

.course-navigator-head span,
.course-navigator-list section > header span {
  color: #9b4354;
}

.course-navigator-close {
  border-color: #d8d5cc;
  border-radius: 4px;
  background: #fffdf9;
  color: #243d38;
}

.course-navigator-search label,
.course-navigator-empty,
.course-navigator-list section > header small {
  color: #68746d;
}

.course-navigator-search input {
  border-color: #d8d5cc;
  border-radius: 4px;
  background: #fff;
  color: #243d38;
}

.course-navigator-search input:focus {
  border-color: #789b89;
  box-shadow: 0 0 0 3px rgba(120, 155, 137, .15);
}

.course-navigator [data-course-option] {
  border-color: #d8d5cc;
  border-radius: 4px;
  background: #fffdf9;
}

.course-navigator a[data-course-option]:hover,
.course-navigator a[data-course-option][aria-current="page"] {
  border-color: #789b89;
  background: #edf5ee;
}

.course-navigator [data-course-option] > span,
.course-navigator .is-locked > small {
  color: #68746d;
}

.course-navigator [data-course-option] > b {
  color: #243d38;
}

.course-navigator [data-course-option] > small {
  color: #4e7765;
}

/* First-win review pages are accessed from inside the same learner journey. */
body.has-learner-tabs .first-win-page {
  color: #243d38;
}

body.has-learner-tabs .first-win-page-head h1 {
  color: #243d38;
  font-family: Georgia, "Songti SC", "SimSun", serif;
  font-weight: 500;
}

body.has-learner-tabs .first-win-page-head p,
body.has-learner-tabs .first-win-data-note {
  color: #68746d;
}

body.has-learner-tabs .first-win-review {
  border-color: #d8d5cc;
}

body.has-learner-tabs .first-win-review-head p,
body.has-learner-tabs .first-win-markers small,
body.has-learner-tabs .first-win-error-review article p,
body.has-learner-tabs .first-win-choice-grid small {
  color: #68746d;
}

body.has-learner-tabs .first-win-clip,
body.has-learner-tabs .first-win-error-review,
body.has-learner-tabs .first-win-choice-grid label {
  border-color: #d8d5cc;
  border-radius: 4px;
  background: #fffdf9;
}

body.has-learner-tabs .first-win-clip figcaption,
body.has-learner-tabs .first-win-error-review > div {
  border-color: #d8d5cc;
}

body.has-learner-tabs .first-win-clip figcaption span,
body.has-learner-tabs .first-win-markers span,
body.has-learner-tabs .first-win-replay-steps span {
  color: #9b4354;
}

body.has-learner-tabs .first-win-markers li {
  border-left-color: #9b4354;
  background: #f9e9ec;
}

body.has-learner-tabs .first-win-error-review article {
  background: #fffdf9;
}

body.has-learner-tabs .first-win-choice-grid label:has(input:checked) {
  border-color: #9b4354;
  background: #f9e9ec;
}

body.has-learner-tabs .first-win-choice-grid input {
  accent-color: #9b4354;
}

body.has-learner-tabs .first-win-replay-steps li {
  border-top-color: #9b4354;
  background: #fffdf9;
}

@media (max-width: 700px) {
  body.learner-app-body .native-app-topbar {
    min-height: 64px;
    padding: 10px 14px;
  }

  body.learner-app-body .native-app-topbar > div b {
    max-width: 45vw;
  }

  body.learner-app-body .native-app-screen {
    padding-right: 20px;
    padding-left: 20px;
  }

  body.learner-app-body .lesson-shell:not(.app-flow-shell) {
    grid-template-columns: 1fr;
  }

  body.learner-app-body .lesson-sidebar {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  body.learner-app-body .lesson-sidebar .side-module,
  body.learner-app-body .lesson-sidebar .side-status {
    display: none;
  }
}