/* Non-Arabic courses share the accent defined by their index-page language card.
   The legacy green/mint names are aliases; answer feedback retains its own colors. */
:root {
    --green: var(--course-accent);
    --green-dark: color-mix(in srgb, var(--course-accent) 80%, #15202d);
    --mint: color-mix(in srgb, var(--course-accent) 11%, white);
    --paper: color-mix(in srgb, var(--course-accent) 3%, #fbfbfa);
    --ink: color-mix(in srgb, var(--course-accent) 22%, #252c32);
    --muted: color-mix(in srgb, var(--course-accent) 15%, #637079);
    --line: color-mix(in srgb, var(--course-accent) 15%, #eceeef);
    --course-hover: color-mix(in srgb, var(--course-accent) 6%, white);
    --course-border: color-mix(in srgb, var(--course-accent) 40%, white);
    --course-shadow: color-mix(in srgb, var(--course-accent) 16%, transparent);
}
body { color: var(--ink); background: var(--paper); }
.language-symbol, .lesson-tip { background: var(--mint); }
.brand small, .nav-caption, .topbar-location, .hero-copy p, .lesson-tip,
.lesson-list .lesson-icon { color: var(--muted); }
.main-nav a:hover, .main-nav button:hover, .button-secondary:hover,
.lesson-list .lesson-card:hover { background: var(--course-hover); }
.main-nav .active { background: var(--mint); }
.course-label, .unit-jump a:hover, .exit-lesson:hover,
.completed .lesson-icon { border-color: var(--course-border); }
.unit-heading { border-bottom-color: var(--line); }
.lesson-card:hover { border-color: var(--course-border); }
.lesson-list .lesson-card.recommended { background: var(--mint); }
.lesson-list .lesson-card.recommended:hover { background: color-mix(in srgb, var(--course-accent) 17%, white); }
.lesson-list .completed .lesson-icon { color: var(--green); }
.lesson-list .recommended .lesson-icon { color: var(--green-dark); }
.progress-track, .day span { background: var(--line); }
.day span { border-color: var(--line); }
.day.done span { background: var(--green); border-color: var(--green); }
.review-card { background: var(--course-hover); border-color: var(--line); }
.review-card .side-card-heading > span, .review-card .button { color: var(--green-dark); }
.review-card .button { border-color: var(--course-border); }
.audio-button { background: var(--course-hover); }
.audio-button.is-playing { box-shadow: 0 0 0 3px var(--course-shadow); }
.answer-option:hover:not(:disabled) { border-color: var(--course-border); background: var(--course-hover); }
.answer-option.selected { background: var(--mint); }
/* Green means correct in every course, even those with a red or blue palette. */
.answer-option.correct { border-color: #087f69; background: #e9f7ee; }
.answer-option.correct .answer-marker, .feedback-panel:not(.incorrect) h2 { color: #087f69; }
.auto-advance-status { color: #076652; }
.result-metrics > div { background: var(--course-hover); }
.badge-card:not(.earned) > span { background: var(--line); color: var(--muted); }
dialog { box-shadow: 0 24px 100px var(--course-shadow); }
dialog::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); }
kbd, .button kbd, .audio-button.is-playing kbd {
    color: var(--ink); border-color: var(--line); border-bottom-color: var(--course-border);
    background: linear-gradient(180deg, white, var(--course-hover));
    box-shadow: 0 2px 0 var(--line), inset 0 1px 0 white;
}
.auto-advance-switch { border-color: var(--course-border); background: var(--line); }
al-text code { background: var(--course-hover); }
.arabic-writing::before { border-color: var(--course-border); }
.alphabet-table thead { background: var(--mint); }
.alphabet-table td, .alphabet-table th { border-bottom-color: var(--line); }
.typed-answer { color: var(--ink); border-color: var(--course-border); box-shadow: 0 3px 0 var(--line); }
.typed-answer:focus { outline-color: var(--course-border); border-color: var(--green); }
.typing-help, .keyboard-mode-help, .keyboard-panel > summary span,
.sentence-placeholder, .typed-answer::placeholder { color: var(--muted); }
.keyboard-panel, .sentence-answer { background: var(--course-hover); border-color: var(--line); }
.keyboard-panel > summary, .keyboard-settings select, .word-token { color: var(--ink); }
.keyboard-settings select, .course-keyboard [data-virtual-key] { border-color: var(--course-border); }
.word-token { border-color: var(--line); border-bottom-color: var(--course-border); }
.word-token:hover:not(:disabled), .word-token.placed { background: var(--mint); border-color: var(--course-border); }
.word-token:focus-visible { outline-color: var(--green); }
.typed-answer.is-correct, .sentence-answer.is-correct { border-color: #068773; background: #f0faf4; }
.typed-answer.is-incorrect, .sentence-answer.is-incorrect { border-color: #cf725c; background: #fff8f5; }
.lesson-shell-new:has(.typing-exercise) .check-row { background: var(--paper); border-color: var(--line); }
/* This stylesheet precedes the shared pronunciation controls in the document. */
[data-course-language] .letter-display-controls button { color: var(--muted); border-color: var(--line); }
[data-course-language] .letter-display-controls button:hover { background: var(--course-hover); border-color: var(--course-border); }
[data-course-language] .letter-display-controls button[aria-pressed="true"] { background: var(--green-dark); border-color: var(--green-dark); color: white; }
[data-course-language] .letter-display-tooltip { background: var(--ink); }
[data-course-language] .letter-display-tooltip small { color: var(--mint); }
[data-course-language] .letter-details, [data-course-language] .word-details { color: var(--muted); }
@media (max-width: 720px) { .guide-example { background: var(--course-hover); } }