/* Ahabito's learning UI: rounded, tangible and calm. The path owns its own layout. */
:root {
  --play-edge: #ddd7c9;
  --play-edge-dark: #151c34;
  --play-indigo-tint: #edf0fa;
  --play-indigo-border: #abb5d0;
  --play-success: #38624b;
  --play-success-surface: #edf5e9;
  --play-success-edge: #c8dec0;
  --play-repair-surface: #fff1e3;
  --play-repair-edge: #ead2b7;
  --play-gold: #ae7d2e;
}

/* Page and step motion is coordinated by interface-motion.js. */
.workspace main > *, .lesson-main > *, .onboarding-card { animation: none; }
.page-heading h1, .onboarding-card h1, .setup-quiz .quiz-stage h1,
.lesson-main h1, .section-heading h2 { font-weight: 800; }
.page-heading h1, .setup-quiz .quiz-stage h1 { letter-spacing: -1.15px; }
.page-heading p, .onboarding-lead, .quiz-lead { line-height: 1.85; }
.eyebrow { font-weight: 800; }
button, a, summary { touch-action: manipulation; }
:focus-visible { outline: 3px solid #697da8; outline-offset: 4px; }

/* The lower edge stays in place as a button is pressed. */
.button { min-height: 52px; border-radius: 17px; font-weight: 800; letter-spacing: .12px; transition: transform .12s ease, box-shadow .12s ease, background .16s ease, border-color .16s ease; }
.button.button-primary, .course-page .button-primary, .recap-main .button-primary {
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 5px 0 var(--play-edge-dark);
}
.button.button-primary:hover:not(:disabled), .course-page .button-primary:hover:not(:disabled), .recap-main .button-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #303b5c;
  border-color: #303b5c;
  box-shadow: 0 6px 0 var(--play-edge-dark);
}
.button.button-primary:active:not(:disabled), .course-page .button-primary:active:not(:disabled), .recap-main .button-primary:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--play-edge-dark);
}
.button.button-primary:disabled, .course-page .button-primary:disabled, .recap-main .button-primary:disabled {
  color: var(--muted); background: #eeebe3; border-color: #e6e1d6; box-shadow: none; transform: none;
}
.button.button-ghost, .button.button-cream {
  border: 2px solid var(--play-edge); border-radius: 17px; background: var(--white); color: var(--ink-soft); box-shadow: 0 3px 0 var(--play-edge);
}
.button.button-cream { background: var(--cream); }
.button.button-ghost:hover:not(:disabled), .button.button-cream:hover:not(:disabled) { transform: translateY(-1px); background: var(--cream); box-shadow: 0 4px 0 var(--play-edge); }
.button.button-ghost:active:not(:disabled), .button.button-cream:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.button .icon { stroke-width: 2.2; }
.text-link { font-weight: 800; }
.icon-button { border: 2px solid var(--play-edge); border-radius: 15px; background: var(--white); box-shadow: 0 2px 0 var(--play-edge); color: var(--ink-soft); transition: transform .12s ease, box-shadow .12s ease, background .15s ease; }
.icon-button:hover { background: var(--cream); }
.icon-button:active { transform: translateY(2px); box-shadow: none; }
.icon-button .icon { stroke-width: 2.1; }

/* Selection is a physical state, separate from a checked answer. */
.answer-options { gap: 15px; }
.answer-options .answer-option, .setup-quiz .quiz-answer {
  border: 2px solid var(--play-edge);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 3px 0 var(--play-edge);
  min-height: 70px;
  font-weight: 650;
  transition: transform .12s ease, border-color .16s ease, background .16s ease, box-shadow .12s ease;
}
.answer-options .answer-option:hover:not(:disabled), .setup-quiz .quiz-answer:hover:not(:disabled) {
  transform: translateY(-1px); border-color: #c8c0ae; background: #f8f5ec; box-shadow: 0 4px 0 #c8c0ae;
}
.answer-options .answer-option:active:not(:disabled), .setup-quiz .quiz-answer:active:not(:disabled) {
  transform: translateY(3px); box-shadow: none;
}
.answer-options .answer-option.is-selected, .setup-quiz .quiz-answer.is-selected, .setup-quiz .quiz-answer[aria-pressed="true"] {
  border-color: #7d8eb8; background: var(--play-indigo-tint); color: var(--ink); box-shadow: 0 3px 0 #7d8eb8; transform: none;
}
.answer-options .answer-option.is-selected:hover:not(:disabled), .setup-quiz .quiz-answer.is-selected:hover:not(:disabled), .setup-quiz .quiz-answer[aria-pressed="true"]:hover:not(:disabled) {
  border-color: #7d8eb8; background: var(--play-indigo-tint); box-shadow: 0 3px 0 #7d8eb8; transform: none;
}
.answer-options .answer-option.is-selected:active:not(:disabled), .setup-quiz .quiz-answer.is-selected:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.answer-options .answer-letter, .setup-quiz .quiz-answer-key {
  width: 30px; height: 30px; flex-basis: 30px; border: 2px solid var(--play-edge); border-radius: 10px; background: var(--white); color: var(--muted); font-weight: 800;
}
.answer-options .is-selected .answer-letter, .setup-quiz .quiz-answer.is-selected .quiz-answer-key, .setup-quiz .quiz-answer[aria-pressed="true"] .quiz-answer-key {
  color: var(--white); background: var(--ink); border-color: var(--ink);
}
.answer-options .answer-option.is-correct {
  color: var(--play-success); border-color: #87ae79; background: var(--play-success-surface); box-shadow: 0 3px 0 #87ae79;
}
.answer-options .answer-option.is-correct .answer-letter { color: var(--white); background: var(--play-success); border-color: var(--play-success); }
.answer-options .answer-option.is-wrong { color: #944c37; border-color: #c98b75; background: #fff0e9; box-shadow: 0 3px 0 #c98b75; }
.answer-options .answer-option.is-wrong .answer-letter { color: #944c37; border-color: #c98b75; background: var(--white); }
.answer-options .answer-indicator .icon { stroke-width: 2.5; }
.answer-options .answer-option:disabled { opacity: 1; }

/* Strong, readable progress without a timer or an urgency animation. */
.lesson-progress, .recap-page .lesson-progress, .course-page .lesson-progress,
.onboarding-progress, .setup-quiz .quiz-progress-row .onboarding-progress {
  height: 14px; border: 0; background: #e7e3da; border-radius: 20px; box-shadow: inset 0 2px 0 #dcd6c9;
}
.lesson-progress > span, .onboarding-progress > span { position: relative; background: var(--ink); border-radius: inherit; min-width: 0; }
.lesson-progress > span::after, .onboarding-progress > span::after { content: ''; position: absolute; inset: 3px 5px auto; height: 3px; border-radius: 20px; background: rgb(255 255 255 / .19); }
.lesson-top { padding-bottom: 20px; }
.lesson-top .lesson-brand { font-weight: 800; }
.lesson-step-label { padding: 6px 10px; color: var(--ink-soft); background: var(--cream); border-radius: 10px; font-weight: 800; }
.lesson-progress-row > span, .setup-quiz .quiz-counter { font-weight: 800; font-variant-numeric: tabular-nums; }
.lesson-main h1 { letter-spacing: -.75px; }
.lesson-main .question-instruction { color: var(--muted); }
.lesson-main .formula { border: 1px solid #e5ddca; border-radius: 17px; background: #f6efdf; }
.lesson-main .hint-text { border: 2px solid #e6dcc6; border-radius: 17px; background: var(--cream); }
.hint-button { min-height: 44px; font-weight: 800; }
.theory-card, .example-card, .recap-theory, .recap-topic { border: 2px solid #e9e1d1; border-radius: 23px; }
.theory-visual { border-radius: 20px; }

/* Feedback is a clear pause: one explanation, then one next action. */
.answer-feedback.feedback-correct, .course-feedback, .recap-feedback {
  padding: 22px; border: 2px solid var(--play-success-edge); border-radius: 21px; background: var(--play-success-surface); color: var(--play-success);
  animation: playful-feedback .24s ease-out both;
}
.answer-feedback.feedback-learn, .course-repair .course-feedback, .recap-repair-note {
  padding: 22px; border: 2px solid var(--play-repair-edge); border-radius: 21px; background: var(--play-repair-surface); color: var(--ink);
}
.course-feedback > .icon, .course-repair .course-feedback > .icon { width: 31px; height: 31px; flex: 0 0 31px; padding: 5px; border-radius: 10px; background: var(--white); color: var(--play-success); stroke-width: 2.2; }
.course-repair .course-feedback > .icon { color: #98602e; }
.course-feedback h2, .answer-feedback strong, .recap-feedback strong { font-size: 17px; font-weight: 800; }
.course-feedback p, .answer-feedback p, .recap-feedback p, .recap-repair-note p { color: var(--ink-soft); font-size: 14px; line-height: 1.85; }
.recap-ready-check, .result-check { border: 3px solid var(--play-success-edge); background: var(--play-success-surface); color: var(--play-success); box-shadow: 0 5px 0 var(--play-success-edge); }
.result-metrics > div, .course-result-details > div { border: 2px solid var(--play-edge); border-radius: 19px; background: var(--white); box-shadow: 0 3px 0 var(--play-edge); }
.result-metrics strong, .course-result-details strong { font-weight: 800; }
.result-next { border: 2px solid #e6dcc6; border-radius: 20px; }

/* Catalogs feel like chapters with approachable lesson tiles. */
.class-card { border: 2px solid var(--play-edge); border-radius: 24px; background: var(--white); box-shadow: 0 4px 0 var(--play-edge); transition: transform .14s, border-color .14s, box-shadow .14s; }
.class-card:hover { transform: translateY(-2px); border-color: #bbb29d; box-shadow: 0 6px 0 #bbb29d; }
.class-card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--play-edge); }
.class-card.is-current { background: #f7f0df; border-color: #c7b68f; box-shadow: 0 4px 0 #c7b68f; }
.class-number { display: grid; place-items: center; width: 64px; height: 64px; color: var(--ink); background: var(--cream); border-radius: 20px; font-size: 36px; font-weight: 800; }
.class-card.is-current .class-number { color: var(--cream); background: var(--ink); box-shadow: 0 4px 0 var(--play-edge-dark); }
.class-card h2 { font-weight: 800; }
.class-current, .class-progress-label { border-radius: 10px; font-weight: 800; }
.class-card-open { border-top: 2px solid var(--line); font-weight: 800; }
.class-card-progress .progress-track { height: 9px; border-radius: 20px; background: #e8e2d6; box-shadow: inset 0 1px 0 #dbd3c2; }
.grade-tabs { gap: 7px; padding: 7px; border: 2px solid var(--play-edge); border-radius: 21px; background: var(--white); }
.grade-tab { min-height: 62px; border: 2px solid transparent; border-radius: 14px; font-weight: 700; }
.grade-tab.selected { border-color: var(--ink); color: var(--cream); box-shadow: 0 3px 0 var(--play-edge-dark); }
.grade-tab strong { font-weight: 800; }
.curriculum-banner { border: 2px solid #e6dcc6; border-radius: 23px; background: #f7f0e1; }
.curriculum-book { border-radius: 17px; box-shadow: 0 3px 0 var(--play-edge-dark); }
.curriculum-chapter { margin-top: 17px; border: 2px solid var(--play-edge); border-radius: 22px; box-shadow: 0 3px 0 var(--play-edge); }
.curriculum-chapter > summary { min-height: 86px; }
.chapter-number { border-radius: 15px; color: var(--ink); font-weight: 800; }
.chapter-copy strong { font-weight: 800; }
.chapter-lessons { padding-top: 23px; padding-bottom: 23px; background: #faf7f0; }
.topic-card-shell { border: 2px solid var(--play-edge); border-radius: 21px; box-shadow: 0 3px 0 var(--play-edge); transition: border-color .16s, box-shadow .16s; }
.topic-card-shell:has(.topic-card:hover) { border-color: #bbb29d; box-shadow: 0 4px 0 #bbb29d; }
.topic-card-shell .topic-card { border: 0; border-radius: 0; box-shadow: none; }
.topic-card-shell .topic-card:hover { transform: none; box-shadow: none; background: #faf6ec; }
.topic-card-shell .topic-card:active { background: var(--cream); }
.topic-card-body > strong { font-weight: 800; }
.topic-illustration { border-radius: 17px; }
.topic-done .topic-meta { color: var(--play-success); }
.topic-arrow { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 31px; padding: 0; border: 2px solid var(--play-edge); border-radius: 11px; color: var(--ink-soft); }
.topic-card-links { border-top: 2px solid var(--line); padding-top: 5px; padding-bottom: 5px; }
.topic-card-links a { min-height: 44px; font-weight: 800; }
.segmented { gap: 8px; }
.segmented button { border: 2px solid var(--play-edge); border-radius: 13px; color: var(--ink-soft); background: var(--white); font-weight: 800; }
.segmented button.selected { border-color: var(--ink); color: var(--cream); box-shadow: 0 3px 0 var(--play-edge-dark); }
.search-field, .grade-picker select { border: 2px solid var(--play-edge); border-radius: 15px; background: var(--white); }
.search-field:focus-within { border-color: #7d8eb8; box-shadow: 0 0 0 3px var(--play-indigo-tint); }
.theory-reader .theory-section { padding: 22px; border: 2px solid var(--line); border-radius: 21px; background: var(--white); }
.theory-reader .theory-section + .theory-section { margin-top: 16px; }
.theory-reader .theory-mistakes { border: 2px solid #e6dcc6; border-radius: 20px; }

/* Profile and review use the same little tiles, with restrained rewards. */
.profile-stats > div, .learner-card, .review-item, .personal-plan { border: 2px solid var(--play-edge); border-radius: 23px; background: var(--white); box-shadow: 0 3px 0 var(--play-edge); }
.profile-stats strong { color: var(--ink); font-weight: 800; }
.profile-stats .icon { color: var(--ink-soft); stroke-width: 2.1; }
.profile-stats > div:first-child .icon { color: var(--play-gold); }
.profile-stats > div:last-child .icon { color: var(--play-success); }
.achievement { border: 2px solid var(--line); border-radius: 23px; background: var(--white); }
.achievement-icon { border: 2px solid var(--play-edge); border-radius: 20px; background: #f0ede6; color: var(--muted); }
.achievement.earned { border-color: #d5c5a3; background: #fbf4e5; box-shadow: 0 3px 0 #d5c5a3; }
.achievement.earned .achievement-icon { color: var(--ink); background: #f1dfb7; border: 2px solid #d4b878; box-shadow: 0 4px 0 #d4b878; }
.achievement.earned .achievement-label { background: #ead8b4; color: #64502e; font-weight: 800; border-radius: 9px; }
.review-banner { border: 2px solid #d9dded; background: var(--play-indigo-tint); border-radius: 24px; }
.review-banner-icon { border: 2px solid #c4cce0; border-radius: 21px; background: var(--white); color: var(--ink); box-shadow: 0 3px 0 #c4cce0; }
.review-item-copy h3, .review-banner h2 { font-weight: 800; }
.review-art { border-radius: 17px; background: #f0eee4; }
.empty-state, .empty-inline { border: 2px dashed #d4cdbd; border-radius: 23px; }
.empty-icon { border-radius: 22px; border: 2px solid #c9d0e1; box-shadow: 0 3px 0 #c9d0e1; }
.personal-plan-number { width: 36px; height: 36px; flex-basis: 36px; border: 2px solid var(--play-edge); border-radius: 13px; box-shadow: 0 3px 0 var(--play-edge); }
.personal-plan-step.is-next .personal-plan-number { border-color: var(--ink); box-shadow: 0 3px 0 var(--play-edge-dark); }
.personal-plan-step.is-next .personal-plan-start { border-radius: 12px; min-height: 44px; padding: 10px 15px; font-weight: 800; box-shadow: 0 3px 0 var(--play-edge-dark); }
.personal-plan-step.is-next .personal-plan-start:active { transform: translateY(3px); box-shadow: none; }

/* Setup and the diagnostic keep one strong question on screen. */
.onboarding-card { border: 2px solid var(--play-edge); border-radius: 26px; background: var(--white); box-shadow: 0 4px 0 var(--play-edge); }
.setup-quiz .quiz-progress-row .icon-button { background: var(--white); border-radius: 15px; }
.setup-quiz .quiz-input, .form-field input, .form-field select { border: 2px solid var(--play-edge); border-radius: 17px; box-shadow: 0 3px 0 var(--play-edge); font-weight: 650; min-height: 58px; }
.setup-quiz .quiz-input:focus, .form-field input:focus, .form-field select:focus { border-color: #7d8eb8; box-shadow: 0 3px 0 #7d8eb8; }
.setup-quiz .quiz-answer-copy strong { font-weight: 800; }
.setup-quiz .quiz-answer-status { background: var(--ink); }
.setup-quiz .quiz-grades { gap: 13px; }
.setup-quiz .quiz-grades .quiz-answer { border-radius: 19px; }
.setup-quiz .quiz-grades .quiz-answer-copy strong { font-size: 29px; }
.setup-quiz .quiz-ready-summary > span, .adaptive-question-tags > span { border-radius: 11px; font-weight: 800; background: var(--cream); color: var(--ink-soft); }
.adaptive-page .onboarding-card { border-radius: 25px; }
.adaptive-question h1 { font-weight: 800; }
.adaptive-skip-options { gap: 14px; }
.adaptive-skip-options button { min-height: 62px; border: 2px solid var(--play-edge); border-radius: 17px; background: var(--white); }
.adaptive-skip-options button:hover { background: var(--cream); }
.adaptive-skip-options strong { font-weight: 800; }
.adaptive-foundation-note { border: 2px solid #d5dced; border-radius: 16px; background: var(--play-indigo-tint); }
.adaptive-start-points > div, .adaptive-result-metrics > div { border: 2px solid var(--play-edge); border-radius: 19px; background: var(--white); box-shadow: 0 3px 0 var(--play-edge); }
.adaptive-result-metrics strong { font-weight: 800; }
.adaptive-result-metrics > div:first-child { background: var(--play-indigo-tint); border-color: #c8d0e4; box-shadow: 0 3px 0 #c8d0e4; }
.assessment-note, .adaptive-scope-note { border: 1px solid #e6dcc6; border-radius: 17px; background: #f7f0e1; }

/* Frame the gooey indicator, but leave its geometry and canvas untouched. */
.desktop-nav { gap: 11px; }
.desktop-nav .nav-item { min-height: 53px; border: 2px solid transparent; border-radius: 16px; font-weight: 800; }
.desktop-nav .nav-item .icon { width: 22px; height: 22px; stroke-width: 2; }
.desktop-nav .nav-item.active { border-color: #c5cde2; color: var(--ink); background: var(--play-indigo-tint); box-shadow: 0 2px 0 #c5cde2; }
.desktop-nav .nav-item:not(.active):hover { background: var(--cream); border-color: var(--line); }
.gooey-nav__stage { border-width: 2px; border-color: #ddd7ca; box-shadow: 0 3px 0 #e1dbce, 0 9px 24px rgb(var(--ink-rgb) / .055); }
.gooey-nav .nav-item { font-weight: 700; }
.gooey-nav .nav-item > .icon { stroke-width: 2.1; }
.gooey-nav .nav-item:active > .icon { transform: translateY(2px); }
.gooey-nav .nav-item > .icon { transition: transform .12s ease; }
.nav-count { font-weight: 800; }
#leave-dialog { border: 2px solid var(--play-edge); border-radius: 25px; box-shadow: 0 6px 0 #cdc6b5, 0 24px 90px rgb(var(--ink-rgb) / .18); }
#leave-dialog h2 { font-weight: 800; }
#leave-dialog .dialog-icon { color: var(--ink); background: var(--cream); border-radius: 20px; }

@keyframes playful-feedback { from { opacity: .5; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
  .lesson-top { gap: 10px; }
  .lesson-step-label { font-size: 10px; }
  .answer-options .answer-option { min-height: 66px; padding: 15px; }
  .answer-options .answer-letter { width: 28px; height: 28px; flex-basis: 28px; }
  .answer-feedback.feedback-correct, .answer-feedback.feedback-learn, .course-feedback,
  .course-repair .course-feedback, .recap-feedback, .recap-repair-note { padding: 18px; gap: 11px; border-radius: 19px; }
  .course-feedback h2, .answer-feedback strong, .recap-feedback strong { font-size: 16px; }
  .course-feedback > .icon, .course-repair .course-feedback > .icon { width: 28px; height: 28px; flex-basis: 28px; padding: 4px; }
  .class-card { border-radius: 22px; }
  .class-number { width: 58px; height: 58px; font-size: 33px; border-radius: 18px; }
  .curriculum-chapter > summary { padding: 18px 15px; }
  .chapter-lessons { padding: 14px; }
  .profile-stats > div, .learner-card, .review-item { border-radius: 21px; }
  .theory-reader .theory-section { padding: 19px; }
  .onboarding-card, .adaptive-page .onboarding-card { border-radius: 23px; }
}

@media (max-width: 360px) {
  .lesson-top { gap: 7px; padding-left: 17px; padding-right: 17px; }
  .lesson-step-label { padding: 5px 7px; font-size: 9px; }
  .lesson-top .lesson-brand { margin-left: 0; font-size: 21px; gap: 5px; }
  .lesson-top .lesson-brand img { width: 29px; height: 29px; }
  .button { padding-left: 16px; padding-right: 16px; }
  .setup-quiz .quiz-grades { gap: 7px; }
  .setup-quiz .quiz-grades .quiz-answer { padding-left: 4px; padding-right: 4px; border-radius: 15px; }
  .setup-quiz .quiz-grades .quiz-answer-copy strong { font-size: 25px; }
  .answer-options .answer-option { gap: 10px; padding: 13px; }
  .grade-tabs { gap: 4px; padding: 5px; }
  .grade-tab { padding-left: 4px; padding-right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .button, .icon-button, .answer-options .answer-option, .setup-quiz .quiz-answer,
  .class-card, .topic-card-shell, .gooey-nav .nav-item > .icon, .course-feedback,
  .recap-feedback, .answer-feedback { animation: none !important; transition: none !important; }
  .button:hover:not(:disabled), .button:active:not(:disabled), .icon-button:active,
  .answer-options .answer-option:hover:not(:disabled), .answer-options .answer-option:active:not(:disabled),
  .setup-quiz .quiz-answer:hover:not(:disabled), .setup-quiz .quiz-answer:active:not(:disabled),
  .class-card:hover, .class-card:active, .gooey-nav .nav-item:active > .icon { transform: none !important; }
}