/* Zana bright design · design tokens & responsive navigation · Oct 2026
   Overrides legacy dark palette without changing course data or progress keys. */
:root {
  color-scheme:light;
  --bg:#fffaf4;
  --panel:#ffffff;
  --panel2:#fff5e9;
  --panel3:#ffe9d0;
  --line:#ecdfd2;
  --muted:#71685f;
  --gold:#e76f00;
  --gold-bg:#fff0dd;
  --green:#23734b;
  --red:#b83f36;
  --text:#292420;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
}
html,body{background:var(--bg);color:var(--text)}
body{min-width:300px}
button,input,textarea,select{color:var(--text)}
button:focus-visible, a:focus-visible, input:focus, textarea:focus, select:focus{outline:3px solid #e76f00;outline-offset:2px}
input:not([type=checkbox]):not([type=radio]),textarea,select{background:white;border-color:#d7c7b7;color:#27221e}
input::placeholder,textarea::placeholder{color:#8a8075;opacity:1}
a{color:#a94700}
::selection{background:#ffd1a3;color:#312117}
.shell{max-width:1600px}
.sidebar{background:#fff;border-right:1px solid #eddfd1}
.brand{color:#22201d}.brand strong{letter-spacing:-.075em}.brand small{color:#7c7168}
.brand-dot{color:#ef801a}
.nav-label,.eyebrow{color:#a84d00;letter-spacing:.11em;font-size:.7rem}
.nav-item{color:#62574d}.nav-item:hover{background:#fff3e6;color:#8d3f00}
.nav-item.active{background:#fff0db;color:#a44700;box-shadow:inset 3px 0 0 #e87913}
.nav-item em{background:#fff0dd;color:#aa500e}
.aside-tip{border-color:#f1dfcb;background:#fff8ee}.aside-tip p,.sync-status{color:#72665c}
.aside-tip-icon{color:#da700e}
.topbar{background:#fff;border-bottom:1px solid #f0e4d7}
.topbar-caption{color:#786a5d}.top-pill{background:#fffaf5;color:#5f5144;border-color:#f0dfcb}
.top-pill.primary{background:#fff0dd;color:#aa500a;border-color:#f3d3ad}
#view{max-width:1140px}
.footer{color:#776b61;border-top-color:#f0e2d3}
h1,h2,h3{color:#28231f}
.page-head p,.muted,.subtle{color:var(--muted)}
.card{background:white;border:1px solid var(--line);box-shadow:0 4px 18px rgba(94,57,19,.035)}
.card.soft{background:#fff8f0}
.card.glow{background:linear-gradient(115deg,#fff7eb,#ffebd4)}
.hero p{color:#675c51}
.hero-illustration{color:#e77710}
.stats .stat,.stat{background:white;border:1px solid #efdfce}
.stat span{color:#6d635a}
.language-card{background:white;border-color:#eaded2;color:#29231e;box-shadow:0 3px 12px rgba(82,49,14,.035)}
.language-card:hover{background:#fff9f2;border-color:#eaa46e;box-shadow:0 7px 22px rgba(155,88,27,.1)}
.language-copy p{color:#70665d}.language-copy strong{color:#5a4e43}
.lang-badge{background:var(--tint);filter:saturate(1.1);border:1px solid rgba(100,70,35,.06)}
.arrow{color:#d06b0f}
.bar{background:#f0e4d7}
.btn{background:#ed7911;color:#221207;border-color:#ed7911;box-shadow:0 2px 6px rgba(186,93,16,.12)}
.btn:hover{background:#ff962b;border-color:#ff962b}
.btn-alt{background:#fff0dc;color:#873e00;border:1px solid #f3d3a9}
.btn-alt:hover{background:#ffe3bf;border-color:#e9aa6b}
.btn-ghost{color:#6b5541;background:white;border:1px solid #dacabb}
.btn-ghost:hover{background:#fff6ea;border-color:#e5aa77}
.btn.danger,.btn-alt.danger{background:#fff0ec;color:#a72a20;border-color:#edbbb4}
.link-btn{color:#a94b00}.link-btn:hover{text-decoration:underline}
.pill{border-color:#eadaca;background:#fff6e9;color:#754f2e}
.pill.ready{background:#e9f6eb;color:#226344;border-color:#b9dbc4}
.pill.soon{background:#f4efea;color:#6a6156;border-color:#d9d0c6}
.notice{color:#55483b;background:#fff8ed;border-color:#ead7bf}
.notice.warning{color:#804500;background:#fff2dd;border-color:#efd3a3}
.notice.good{color:#216444;background:#edf8ef;border-color:#b6d8c0}
.unit{background:white;border-color:#eaded2}.unit-index{color:#aa5108}.unit p{color:#746a60}
.chip{color:#67594b;background:white;border-color:#e6d6c7}.chip:hover{background:#fff2e2}
.chip.active{background:#ed7911;border-color:#ed7911;color:#211308}
.level-tile{color:#2e2924;background:white;border-color:#eaddcd}.level-tile:hover{background:#fff8ee;border-color:#eaab72}
.level-tile em{color:#a64c00}.level-tile.selected{border-color:#e46e10;background:#fff0db}
.roadmap-detail{border-color:#eacaaa;background:#fff7eb}
.field>span{color:#5a4b3d}
.word-card{background:white;border-color:#e9dbcb}.word-card .word-cat{color:#76685c}
.translation-row{border-color:#f0e4d7}.translation-row small{color:#706459}
.word-button{color:#302820}.word-button:hover{background:#fff5e7}
.word-variant{color:#62574f}.word-note{color:#6b6259}
.mini-save{background:#fff4e8;color:#bc5500;border-color:#eccba7}
.mini-save.saved{background:#fff0ed;color:#ba3e42;border-color:#eec4c5}
.word-card .word-button span[aria-hidden="true"]{color:#ae5100!important}
.quiz-card{background:white;border-color:#e9d7c5}
.quiz-label{color:#a74c00}.quiz-subprompt{color:#65594e}.quiz-target{color:#2b2722}
.quiz-option{background:#fffaf3;border-color:#e6d3be;color:#302820}.quiz-option:hover:not(:disabled){background:#fff0de;border-color:#e5a66e}
.quiz-option.correct{background:#e7f7ed;border-color:#6cb88c;color:#195c38}
.quiz-option.wrong{background:#fff0ef;border-color:#dc8277;color:#9e3127}
.quiz-feedback{background:#edf9ef;border-color:#98ccac;color:#1e6540}
.quiz-feedback.wrong{background:#fff0ef;border-color:#eab0ac;color:#a53d34}
.speaker{background:#fff1dc;border-color:#eccca0;color:#ad4b00}.speaker:hover{background:#ffdfae}
.reveal{color:#70665d}.study-preview{background:#fff9f0;border-color:#ead9c4}
.result-center p{color:#695c52}.result-stat span{background:#fff9f2}
.rating-btn{background:#fff9f2;color:#50463d;border-color:#e6d7c7}.rating-btn.active{background:#ffe8c9;color:#8d4000;border-color:#e7a36a}
.tip-card .outside{color:#68584a;background:#fff4e6}.activity-day{background:#f1e2d1}.activity-day.active{background:#ed7911}
.divider{background:#e9dccc}.cloud-tag{color:#a64b00}
.loading{color:#796b60}
.journal-area{background:white;border-color:#dfcdb9;color:#29231f}
.skill-tabs .skill-active{background:#ffe9d0;border-color:#ed7911;color:#914200}
.latin-under,.quiz-target .latin-under{color:#9a5217}
.letter-card{background:white;color:#29241f;border-color:#ebdccc}.letter-card:hover{background:#fff5e8;border-color:#e5a674}
.letter-latin{color:#a94f00}.letter-hint{color:#665b51}
.profile-next{background:#fff8ef;border-color:#efdfcd}
.duration-option{background:#fff;border:1px solid #e9d8c4;color:#29231e;box-shadow:0 4px 12px rgba(83,54,20,.04)}
.duration-option span{color:#655b52}.duration-option em{color:#a74d00}
.duration-option:hover,.duration-option:focus-visible{background:#fff1dc;border-color:#e77612}
.rank-mini{background:#fff5e9;color:#55483b;border-color:#e8d1b5}
.lesson-focus>p{color:#6c6258}
.sentence-sample{background:white;border-color:#eadac7}.sentence-sample .latin-under{color:#9b541b}.sentence-sample strong{color:#695c4e}
.order-slots,.order-bank,.spell-selection,.spell-bank{background:#fffaf2;border-color:#d9bd9d}
.order-slots,.spell-selection{background:#fff2df}
.order-tile,.spell-tile{color:#383029;background:white;border-color:#dfc8ad}
.order-tile.chosen{background:#fff0d4;border-color:#e59a5c}.order-tile:hover,.order-tile:focus-visible,.spell-tile:hover,.spell-tile:focus-visible{background:#ffe6c2;border-color:#e19a62}
.result-breakdown{background:#fff9f0;border-color:#ead8c6}.result-breakdown>div{border-color:#eadecf}.result-breakdown span{color:#a94b00}
.reading-choice{background:white;border-color:#e4d6c7;color:#302920}.reading-choice.reading-current{border-color:#e7770b;outline-color:#e7770b}
.reading-english{color:#63574e}.reading-answer-line{border-color:#eadcd0}
.form-card,.vowel-card{background:white;border-color:#e7d7c6;color:#2b2622}.form-card small,.vowel-card small{color:#756a61}
.vowel-card span{color:#a84e00}.vowel-card:hover{background:#fff5e8}
.spell-assembled{color:#ab520a}
.guided-feature{border-color:#edcbab;background:linear-gradient(135deg,#fff0dc,#fff9f1);color:#32271e}
.guided-feature .subtle{color:#6e5e52}
.guided-overview{background:linear-gradient(115deg,#fff1dc,#fff9f0)}
.guided-example{background:white;border-color:#ebdcd0}
.guided-choices button{background:#fff9f2;border-color:#e6d5c3;color:#2c241e}
.guided-choices button:hover:not(:disabled){background:#fff0df;border-color:#eaa66f}
.guided-keyboard{background:#fff9f1;border-color:#edceb0;color:#3a2f25}
.guided-key-grid button{background:#fff;border-color:#e4c5a8;color:#3b3026}
.guided-key-grid button:hover{background:#ffedd7}
/* Overall navigation: fewer decisions, clearer labels and larger tap targets. */
.course-back{margin-bottom:12px}.course-back .link-btn{font-size:.9rem}
.course-top{background:linear-gradient(135deg,#fff,#fff5e8);padding:24px}
.course-heading{display:flex;gap:16px;align-items:center}
.course-heading h1{margin:0 0 6px}.course-heading .lang-badge{width:63px;height:63px;font-size:1.45rem}
.course-heading .subtle{margin:0}
.course-switch{display:flex;gap:8px;overflow-x:auto;max-width:100%;padding:16px 2px 3px;scrollbar-width:thin}
.course-switch-pill{white-space:nowrap;flex:none;background:white;color:#6a5c4e;border:1px solid #ead9c6;border-radius:999px;min-height:42px;padding:7px 13px;font-size:.82rem;font-weight:700}
.course-switch-pill.selected{background:#ffebd4;color:#a24900;border-color:#eaa66b}
.course-tabs{display:flex;gap:7px;overflow-x:auto;padding:7px 1px 12px;margin:18px 0 18px;scrollbar-width:thin}
.course-tab{min-height:46px;white-space:nowrap;flex:1 0 auto;border:1px solid #e5d5c2;background:#fff;color:#66574c;font-weight:800;font-size:.9rem;border-radius:12px;padding:10px 14px}
.course-tab.selected{background:#ef7f18;border-color:#ef7f18;color:#1e130a;box-shadow:0 3px 12px rgba(199,95,10,.13)}
.course-tab:not(.selected):hover{background:#fff2e4;border-color:#ebb783}
.course-section-title{margin:18px 0 19px}.course-section-title h2{font-size:clamp(1.45rem,2.6vw,1.8rem);margin:4px 0 7px}.course-section-title p{margin:0;max-width:760px;color:#6d6258}
.feature-primary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(120deg,#fff0d9,#fff8ed);border-color:#f0ceaa}
.feature-primary>div{flex:1;min-width:min(100%,240px)}
.feature-primary h2{font-size:1.4rem;margin:7px 0}.feature-primary p{margin:7px 0}
.course-feature-actions{display:flex;flex-direction:column;align-items:stretch;gap:9px;min-width:min(100%,190px)}
.skill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.skill-choice{display:flex;flex-direction:column;gap:12px}.skill-choice p{flex:1}.skill-choice .btn-alt{align-self:start}
.skill-symbol{display:grid;place-items:center;background:#fff0df;color:#be5600;width:48px;height:48px;border-radius:13px;font-size:1.5rem}
.assessment-list{display:grid;gap:12px}.assessment-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.assessment-row>div:nth-child(2){flex:1;min-width:min(100%,205px)}.assessment-row p{margin:4px 0}.assessment-row h3{margin:0}
.assessment-badge{display:grid;place-items:center;flex:none;width:51px;height:51px;border-radius:14px;background:#fff0dc;color:#a94700;font-weight:900}
.welcome-panel{background:linear-gradient(115deg,#fff0db 0%,#fff8ed 60%,#fff3de 100%);border:1px solid #f3d1ac;border-radius:24px;min-height:240px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:clamp(22px,4vw,38px);overflow:hidden}
.welcome-panel>div:first-child{position:relative;z-index:1;min-width:0;flex:1}
.welcome-panel h1{max-width:650px;font-size:clamp(2rem,4.4vw,3.2rem);margin:6px 0 12px;letter-spacing:-.05em}
.welcome-panel p{max-width:550px;color:#604f40;font-size:.99rem;line-height:1.65}
.welcome-mark{flex:none;display:grid;place-items:center;position:relative;min-width:120px;width:24%;aspect-ratio:1;background:#f88c23;border-radius:29%;transform:rotate(-8deg);box-shadow:inset 0 -13px 15px rgba(120,47,0,.11)}
.welcome-mark>span:first-child{font-size:clamp(4rem,8vw,7rem);font-weight:1000;color:#fff;line-height:1;transform:rotate(8deg)}
.welcome-mark-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff6a2;left:21%;top:23%}
.onboarding-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
.onboarding-steps>div{border-left:2px solid #f3c89c;padding-left:15px;min-width:0}
.onboarding-steps strong{display:block;margin-top:8px}
.step-number{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;width:37px;height:32px;background:#ffe6c5;color:#ad4b00;font-weight:900;font-size:.8rem}
.achievements-panel>summary{font-weight:800;cursor:pointer;min-height:30px}.achievements-panel>.grid{margin-top:15px}
.milestone{border-radius:12px;background:#fff9f2;border:1px solid #f0e1cf;padding:14px}
.milestone strong{display:block;margin:8px 0}
.more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.more-link{border:1px solid #eadbcc;background:white;border-radius:16px;min-height:135px;padding:19px;display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:5px 12px;text-align:left;color:#322920}
.more-link>span{grid-row:1/3;display:grid;place-items:center;background:#fff0de;color:#b34e00;border-radius:12px;font-size:1.4rem;width:40px;height:40px}
.more-link>strong{align-self:end}.more-link>small{grid-column:2;color:#70665a;font-size:.83rem}.more-link>b{grid-row:1/3;grid-column:3;align-self:center;color:#c25e0a}
.more-link:hover{border-color:#e9a46c;background:#fffaf4}
.mobile-nav{background:#fff;border-top:1px solid #eddfd1}
.mobile-nav button{color:#74685e}.mobile-nav button.active{color:#bc5000;background:#fff5e8}
.mobile-nav button:hover{background:#fff7ef}
@media(max-width:800px){.mobile-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.mobile-nav button{min-height:64px;gap:4px}.mobile-nav button small{font-size:.72rem;font-weight:700}.mobile-nav button.active{border-top:3px solid #ed7911}#view{padding-bottom:116px}.topbar{background:#fff;min-height:62px}}
@media(max-width:650px){.onboarding-steps,.skill-grid{grid-template-columns:1fr}.welcome-mark{width:115px;min-width:115px}.more-grid{grid-template-columns:1fr}.course-tab{flex:0 0 auto}.course-feature-actions{width:100%}.course-feature-actions .btn,.course-feature-actions .btn-ghost{width:100%}}
@media(max-width:470px){.welcome-mark{display:none}.welcome-panel{min-height:0}.course-top{padding:18px}.course-heading .lang-badge{width:53px;height:53px}.course-heading h1{font-size:1.7rem}.assessment-row .btn-alt{width:100%}.unit-actions{width:100%}.unit-actions button{width:100%}.course-section-title h2{font-size:1.5rem}}
@media(prefers-reduced-motion:reduce){.welcome-mark{transform:none}.btn,.language-card{transition:none!important}}

/* Zana lessons: clear completion states, safe resume and tactile feedback. */
.lesson-state{display:inline-flex;align-items:center;gap:5px;margin-top:9px;padding:5px 10px;border:1px solid #e5d8c8;border-radius:999px;background:#fffaf4;font-size:.78rem;font-weight:800;color:#806b54}
.lesson-complete{background:#e8f6ea;border-color:#b1dbc0;color:#1f7048}
.lesson-in-progress{background:#fff0d6;border-color:#f1c28f;color:#995000}
.duration-resume,.duration-done{display:block;margin-top:8px;font-size:.73rem;font-style:normal;font-weight:800;color:#b15c00}
.duration-done{color:#257344}
.lesson-finished-badge{display:inline-block;padding:10px 17px;margin:10px auto;border-radius:999px;background:#e6f6ea;border:1px solid #a8d9b8;color:#216a45;font-weight:850}
.resume-overlay{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;background:rgba(37,29,19,.49);backdrop-filter:blur(4px)}
.resume-dialog{width:min(100%,450px);max-height:90dvh;overflow:auto;background:#fffdf9;border-radius:24px;padding:clamp(20px,4vw,32px);border:1px solid #f2dcc7;box-shadow:0 24px 65px rgba(46,30,15,.22);text-align:center;outline:none}
.resume-dialog h2{font-size:1.55rem;margin:8px 0}.resume-dialog p{color:#746356;line-height:1.7}
.resume-dialog p strong{color:#9a520d}
.resume-symbol{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;margin:0 auto 16px;background:#ffe9d0;color:#b45804;font-size:2.2rem}
.resume-actions{display:grid;gap:10px;margin-top:21px}
.resume-actions button{min-height:49px}
/* Selectable cards respond immediately to tapping, without requiring hover. */
button:not(:disabled){-webkit-tap-highlight-color:transparent;transition:transform .13s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,filter .18s ease;touch-action:manipulation}
button:not(:disabled):active{transform:translateY(2px) scale(.972);filter:brightness(.97)}
button:has(>.zana-tap-ripple){position:relative;isolation:isolate;overflow:hidden}
.zana-tap-ripple{position:absolute;z-index:2;pointer-events:none;border-radius:50%;background:rgba(255,153,44,.26);transform:translate(-50%,-50%) scale(0);animation:zana-ripple .53s ease-out forwards}
@keyframes zana-ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
.quiz-card,.guided-work{animation:zana-question-in .27s cubic-bezier(.2,.85,.3,1) both}
@keyframes zana-question-in{from{opacity:.72;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.quiz-feedback{animation:zana-feedback-in .36s cubic-bezier(.2,1.3,.4,1) both}
.quiz-feedback:not(.wrong){box-shadow:0 6px 18px rgba(45,133,81,.12);border-color:#9ad5ac}
.quiz-feedback.wrong{box-shadow:0 6px 16px rgba(184,63,54,.08)}
@keyframes zana-feedback-in{0%{opacity:0;transform:translateY(12px) scale(.97)}70%{transform:translateY(-3px) scale(1.009)}100%{opacity:1;transform:translateY(0) scale(1)}}
.quiz-option.correct,.guided-choices button.chosen-correct{background:#e6f7e9!important;color:#165c38!important;border:2px solid #50a874!important;box-shadow:0 4px 0 #abd8b6!important}
.quiz-option.wrong,.guided-choices button.chosen-wrong{background:#fff0ed!important;color:#a13a2e!important;border:2px solid #e1988c!important}
.quiz-option.correct,.guided-choices button.chosen-correct{animation:zana-right-pop .35s ease-out}
@keyframes zana-right-pop{50%{transform:scale(1.025)}100%{transform:scale(1)}}
.result-center h1{animation:zana-result-pop .48s cubic-bezier(.2,1.3,.5,1) both}
@keyframes zana-result-pop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
.zana-celebration{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6}
.result-center,.guided-work{position:relative}
.zana-confetti-piece{position:absolute;top:0;left:var(--pos);width:8px;height:13px;border-radius:2px;opacity:0;animation:zana-confetti 1.35s var(--delay) ease-out forwards}
@keyframes zana-confetti{0%{opacity:0;transform:translateY(-12px) translateX(0) rotate(0)}12%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateY(270px) translateX(var(--drift)) rotate(650deg)}}
@media (prefers-reduced-motion: reduce){
 button:not(:disabled){transition:none!important;animation:none!important}
 button:not(:disabled):active{transform:none!important}
 .zana-tap-ripple,.zana-celebration{display:none!important}
 .quiz-card,.quiz-feedback,.guided-work,.result-center h1{animation:none!important}
}

/* Readable Sorani/Arabic throughout placements, lessons, dictionary and feedback.
   Arabic letters must remain joined; we use word-spacing, not letter-spacing. */
[dir="rtl"]{font-family:"Noto Naskh Arabic","Traditional Arabic","Segoe UI",Tahoma,sans-serif;letter-spacing:normal;word-spacing:.22em;line-height:1.9;text-rendering:optimizeLegibility}
.quiz-target[dir="rtl"],.quiz-target [dir="rtl"],.reading-check-lines[dir="rtl"],.reading-answer-line [dir="rtl"]{font-size:clamp(1.55rem,4.2vw,2rem);font-weight:550;line-height:2.05;word-spacing:.25em}
.reading-check-lines[dir="rtl"]{gap:14px;padding:14px 12px;border-radius:14px;background:#fff8ef;min-width:0;overflow-wrap:break-word}
.reading-check-lines[dir="rtl"]>span{display:block;padding-block:4px;min-height:2.6em}
.quiz-option[dir="rtl"],.quiz-option [dir="rtl"],.order-bank[dir="rtl"],.order-slots[dir="rtl"]{font-size:clamp(1.34rem,3.4vw,1.7rem);line-height:1.95;word-spacing:.22em}
.guided-foreign[dir="rtl"],.guided-target[dir="rtl"],.sentence-native[dir="rtl"],.reading-native[dir="rtl"],.reading-line[dir="rtl"]{font-size:clamp(1.42rem,3.9vw,1.85rem);line-height:2;word-spacing:.24em}
.script-stack>span[dir="rtl"],.script-stack [dir="rtl"]{font-size:1.2em;line-height:1.9}
.letter-glyph[dir="rtl"]{font-size:3.2rem;line-height:1.6}
.nav-back{border:1px solid #f0d2b2;background:#fff3e4;color:#8e470c;border-radius:12px;padding:9px 13px;font-weight:800;min-width:79px;min-height:42px;white-space:nowrap;transition:transform .14s ease,background .14s ease}
.nav-back:hover{background:#ffe4ca}.nav-back:active{transform:scale(.96)}.nav-back[hidden]{display:none!important}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0}
.exit-dialog .resume-actions{gap:10px}
@media(max-width:520px){.topbar-left .topbar-caption{display:none}.nav-back{padding:8px 10px;min-width:70px}.reading-check-lines[dir="rtl"]{padding:12px 10px;gap:12px}}
@media(prefers-reduced-motion:reduce){.nav-back{transition:none}}
/* Optional large-print reading. We enlarge glyphs and line-height together,
   never separate the individual joining letters with CSS letter-spacing. */
html[data-script-size="large"] .reading-check-lines[dir="rtl"],
html[data-script-size="large"] .quiz-target[dir="rtl"],
html[data-script-size="large"] .quiz-target [dir="rtl"],
html[data-script-size="large"] .quiz-option[dir="rtl"],
html[data-script-size="large"] .quiz-option [dir="rtl"],
html[data-script-size="large"] .guided-foreign[dir="rtl"],
html[data-script-size="large"] .guided-target[dir="rtl"],
html[data-script-size="large"] .sentence-native[dir="rtl"]{font-size:clamp(1.8rem,5.5vw,2.3rem);line-height:2.05}
html[data-script-size="extra"] .reading-check-lines[dir="rtl"],
html[data-script-size="extra"] .quiz-target[dir="rtl"],
html[data-script-size="extra"] .quiz-target [dir="rtl"],
html[data-script-size="extra"] .quiz-option[dir="rtl"],
html[data-script-size="extra"] .quiz-option [dir="rtl"],
html[data-script-size="extra"] .guided-foreign[dir="rtl"],
html[data-script-size="extra"] .guided-target[dir="rtl"],
html[data-script-size="extra"] .sentence-native[dir="rtl"]{font-size:clamp(2rem,6.5vw,2.65rem);line-height:2.1}

/* Immersive full-width studying. Never overlay choices with fixed mobile tabs. */
body.study-immersive .mobile-nav{display:none!important}
body.study-immersive .sidebar{display:none!important}
body.study-immersive .shell{grid-template-columns:minmax(0,1fr)}
body.study-immersive .topbar-right{display:none}
body.study-immersive .main-area{width:100%;min-width:0}
body.study-immersive #view{max-width:960px;padding-bottom:clamp(30px,6vw,70px)}
body.study-immersive .footer{display:none}
body.study-immersive .topbar{min-height:60px;position:relative;z-index:1}
@media(max-width:800px){body.study-immersive #view{padding-bottom:24px}}
/* Arabic-script readability uses inter-word spacing, not letter spacing: joining must remain intact. */
body.study-immersive [dir="rtl"]{word-spacing:.28em;line-height:2.1}

/* Searchable multilingual phrasebook (course sentences, not inferred translations). */
.phrasebook-list{display:grid;gap:14px}
.phrasebook-card{padding:20px}
.phrasebook-target{font-size:1.25rem;line-height:1.75;margin:14px 0 6px;overflow-wrap:anywhere}
.phrasebook-target[dir="rtl"]{font-size:clamp(1.6rem,4.5vw,2.2rem);line-height:2.15;word-spacing:.3em;letter-spacing:normal}
.dictionary-mode{margin:16px 0}
.phrasebook-card .controls-row{margin-bottom:2px}

/* Placement results are an actionable course starting point, not a decorative score. */
.placement-path-notice{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:14px 0;padding:14px 16px;border-radius:16px;background:#fff2df;border:1px solid #f4d0a2;color:#523516}.placement-path-notice strong{font-weight:800}.placement-path-notice span{flex:1 1 240px;line-height:1.5}.placement-path-notice button{flex:0 0 auto}
/* Context Studio: clear stages, touch-friendly sentence tiles and RTL script. */
.context-studio .reading-line{padding-block:14px;gap:16px}
.context-studio .reading-native{font-size:clamp(1.12rem,2.1vw,1.4rem);line-height:1.85}
.context-studio .reading-native[dir="rtl"]{font-size:clamp(1.42rem,3vw,1.85rem);line-height:2.15;word-spacing:.24em;letter-spacing:0;unicode-bidi:plaintext}
.context-studio .order-tile{min-height:45px;line-height:1.55;padding:10px 13px;white-space:normal;overflow-wrap:anywhere}
.context-studio .order-slots,.context-studio .order-bank{display:flex;flex-wrap:wrap;gap:8px;min-height:68px;align-items:center;padding:12px}
.context-studio .journal-area{width:100%;min-height:175px;resize:vertical;font-size:1rem;line-height:1.8}
.context-studio .journal-area[dir="rtl"]{font-size:1.28rem;line-height:2;letter-spacing:0;word-spacing:.2em}
.context-studio .quiz-header{justify-content:flex-end}
.context-studio h1{overflow-wrap:break-word}
@media(max-width:420px){.context-studio .quiz-options button,.context-studio .order-tile{font-size:1rem}}

/* Offline writing feedback — structured editorial advice, never automated grading. */
.draft-coach{background:#fff8ed;border:1px solid #f4d8ac;border-radius:16px;padding:16px;margin-top:14px;color:#493321}
.draft-coach-header{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.draft-coach-header strong{font-weight:800;color:#a74a16}
.draft-coach-header span,.draft-coach-disclaimer{font-size:.83rem;opacity:.85}
.draft-coach p{margin:.5rem 0;line-height:1.55}
.draft-coach details{margin-top:10px}
.coach-link{display:inline-block;background:white;border:1px solid #e9c49c;border-radius:10px;padding:4px 8px;margin:4px 3px;unicode-bidi:isolate}
@media(max-width:370px){.draft-coach{padding:12px}}

/* Adaptive Recall Clinic — spacious cards and mobile-friendly answer controls. */
.recall-invite{margin:16px 0 24px;background:#fff5e8;border-color:#f0d2aa}
.recall-items{display:grid;gap:12px;margin:18px 0 25px}
.recall-item{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:18px 20px}
.recall-item h3{margin:6px 0;font-size:1.04rem}
.recall-item .btn-alt{flex-shrink:0}
#recall-form input[dir="rtl"]{font-size:1.65rem;line-height:2;min-height:58px;word-spacing:.24em}
@media(max-width:520px){.recall-item{align-items:stretch;flex-direction:column;gap:10px}.recall-item .btn-alt{width:100%}}

/* Dialogue Studio: uncluttered conversations, comfortable script and touch targets. */
.dialogue-screen{max-width:790px;margin-inline:auto}
.dialogue-screen .dialogue-progress{height:10px;margin:23px 0 29px;background:#f4e5d3}
.dialogue-question{padding:clamp(18px,3.4vw,32px);border-radius:22px;background:#fff}
.dialogue-question h2{font-size:clamp(1.18rem,3vw,1.48rem);line-height:1.55;margin:10px 0 24px}
.dialogue-choices{display:grid;gap:13px;margin:22px 0 10px}
.dialogue-option{display:block;width:100%;min-height:65px;white-space:normal;text-align:start;line-height:1.75;font-weight:650;padding:16px 20px;overflow-wrap:break-word;transition:transform .12s ease,border-color .16s ease,background .16s ease}
.dialogue-option:active{transform:scale(.986)}
.dialogue-option[dir="rtl"]{text-align:right;direction:rtl;font-size:clamp(1.36rem,3.6vw,1.82rem);font-weight:530;line-height:1.95;word-spacing:.17em;letter-spacing:0;font-family:"Noto Naskh Arabic","Noto Sans Arabic","Segoe UI",Tahoma,serif}
.dialogue-input{font-size:1.08rem!important;line-height:1.6;min-height:60px!important}
.dialogue-input[dir="rtl"]{font-size:clamp(1.35rem,4vw,1.75rem)!important;line-height:2.1;min-height:84px!important;word-spacing:.18em;letter-spacing:0;font-family:"Noto Naskh Arabic","Noto Sans Arabic","Segoe UI",Tahoma,serif}
.dialogue-model{border:1px solid #c8dfcc;background:#f8fffa;border-radius:14px;margin:14px 0;padding:14px 20px;overflow-wrap:break-word}
.dialogue-target{display:block;line-height:1.85;font-size:1.18rem;font-weight:650}
.dialogue-target[dir="rtl"]{font-family:"Noto Naskh Arabic","Noto Sans Arabic","Segoe UI",Tahoma,serif;font-size:clamp(1.5rem,4vw,1.97rem);font-weight:550;line-height:2.05;word-spacing:.18em;letter-spacing:0;text-align:right}
.dialogue-question .quiz-feedback{padding:17px;border-radius:16px;border:1px solid #b9dbc4;margin:20px 0}
.dialogue-question .quiz-feedback.incorrect{background:#fff4ed;border-color:#efcbba;color:#664831}
.dialogue-question .quiz-feedback h3{font-size:1.08rem}
.dialogue-question .quiz-feedback p{font-size:.94rem}
@media(max-width:500px){.dialogue-question{padding:18px 15px}.dialogue-option{padding:14px 13px}.dialogue-screen .quiz-header{flex-wrap:wrap}.dialogue-question .controls-row>button{flex:1}}
@media(prefers-reduced-motion:reduce){.dialogue-option{transition:none}.dialogue-option:active{transform:none}}
.dialogue-thread{display:grid;gap:10px;margin:18px 0 24px;padding:16px;background:#fffbf5;border:1px solid #f1e0cc;border-radius:18px}
.dialogue-bubble{max-width:92%;min-width:0;padding:12px 16px;border-radius:16px;border:1px solid #e6d6c5;background:white;box-shadow:0 2px 5px rgba(120,80,30,.02)}
.dialogue-bubble small{font-size:.67rem;font-weight:800;letter-spacing:.08em;color:#775841}
.dialogue-bubble p{font-size:1.09rem;line-height:1.65;margin:5px 0 0;overflow-wrap:break-word}
.dialogue-bubble p[dir="rtl"]{font-family:"Noto Naskh Arabic","Noto Sans Arabic","Segoe UI",Tahoma,serif;font-size:clamp(1.38rem,3.8vw,1.75rem);font-weight:530;word-spacing:.19em;letter-spacing:0;line-height:2.05;text-align:right}
.dialogue-you{margin-left:auto;background:#fff0dc;border-color:#efd3b3}
.dialogue-them{margin-right:auto}
@media(max-width:520px){.dialogue-thread{padding:12px 10px}.dialogue-bubble{padding:10px 12px}.dialogue-bubble p{font-size:1.02rem}}

/* Dialogue listening is optional; no unsuitable language substitute is used for Kurdish. */
.dialogue-listen{min-height:44px;margin:0 0 15px}.dialogue-no-audio{margin:0 0 15px;font-size:.87rem;line-height:1.5}

/* Contrast Lab: text-focused grammar decisions and independent written transfer. */
.contrast-screen{max-width:800px;margin-inline:auto}
.contrast-screen .contrast-card{padding:clamp(18px,4vw,36px)}
.contrast-card .contrast-model{background:#fff9f0;border:1px solid #f2dfc8;border-radius:16px;padding:16px 18px;margin:16px 0}
.contrast-model small{display:block;color:#93613c;font-size:11px;font-weight:800;letter-spacing:.09em}
.contrast-model .contrast-target{font-weight:700;font-size:clamp(21px,2.6vw,30px);line-height:1.85;margin:7px 0;overflow-wrap:anywhere}
.contrast-options{display:grid;gap:12px;margin:22px 0}
.contrast-choice{width:100%;min-height:64px;display:flex;align-items:center;gap:13px;text-align:start;border:2px solid #eadfce;border-radius:16px;background:#fff;color:#233040;padding:14px 17px;font-size:clamp(17px,2vw,22px);font-weight:700;line-height:1.8;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,background .14s ease}
.contrast-choice:active:not(:disabled){transform:translateY(2px) scale(.995);box-shadow:inset 0 2px 3px #00000012;background:#fff5e8}
.contrast-choice:focus-visible{outline:3px solid #dc7b20;outline-offset:2px}
.contrast-choice:hover:not(:disabled){border-color:#e78a34;background:#fffaf1}
.contrast-choice:disabled{cursor:default;opacity:1}
.contrast-choice.contrast-correct{border-color:#4a9c6e;background:#eaf7ee}
.contrast-choice.contrast-wrong{border-color:#d97979;background:#fff0ed}
.contrast-letter{display:inline-flex;flex:0 0 32px;height:32px;align-items:center;justify-content:center;border-radius:9px;background:#fff0dd;color:#95521b;font-size:15px}
.contrast-choice span:last-child{min-width:0;overflow-wrap:anywhere}
.contrast-screen textarea{width:100%;min-height:160px;font-size:20px;line-height:1.85}
.contrast-screen [dir="rtl"]{font-family:var(--arabic-font,inherit);font-size:clamp(22px,3vw,31px);line-height:1.95;letter-spacing:normal;word-spacing:.20em;text-align:right}
@media(max-width:480px){.contrast-choice{padding:12px;gap:10px}.contrast-screen .contrast-card{padding:17px}}
@media(prefers-reduced-motion:reduce){.contrast-choice{transition:none}}

/* Placement-first, genuinely actionable study path. */
.study-path{margin:18px 0 22px;padding:clamp(16px,3vw,26px);border:1px solid #ffe0bd;background:#fffdf9}
.study-path .heading-flex{align-items:flex-start;margin-bottom:12px;gap:12px}
.study-path .heading-flex h2{margin:4px 0 8px}
.study-path .heading-flex p{margin:0;max-width:680px}
.path-task-list{display:grid;gap:9px}
.path-task{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #f2e9dd;border-radius:15px;padding:13px 15px;min-width:0}
.path-task-number{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#fff0dd;color:#a34a00;font-weight:800}
.path-task-text{flex:1;min-width:0}
.path-task-text h3{margin:3px 0 3px;font-size:1.07rem;line-height:1.25;overflow-wrap:anywhere}
.path-task-text p{margin:0;line-height:1.4}
.path-task-button{min-width:110px;min-height:44px;white-space:normal;text-align:center}
.path-review{margin-top:14px;background:#fff7ed;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:11px 15px;border-radius:12px}
.path-review small{font-size:0.87rem;line-height:1.4}
.path-footnote{margin:13px 0 0!important;font-size:0.83rem}
@media(max-width:560px){.study-path{padding:15px}.path-task{align-items:flex-start;flex-wrap:wrap;padding:12px;gap:10px}.path-task-number{flex-basis:30px;width:30px;height:30px}.path-task-text{flex-basis:calc(100% - 43px)}.path-task-button{margin-left:40px;width:calc(100% - 40px)}.path-review{align-items:flex-start}}
/* The shared per-word glossary retains accessible contrast in the light theme. */
.word-hint-popover {background: #fffdf9;color: #222d38;border-color:#eec6a1;}

/* Word-by-word lookup for target-language answer choices. Standalone controls
   prevent translating a word from accidentally submitting an answer. */
.word-choices-lookup{margin:10px 0 16px;border:1px solid #e5d8c9;border-radius:12px;padding:11px 13px;background:#fffaf4;color:#46392b}
.word-choices-lookup summary{cursor:pointer;font-weight:750;font-size:.82rem;list-style:revert}
.word-choices-lookup p{font-size:.77rem;line-height:1.45;color:#66564a;margin:8px 0}
.word-choice-tokens{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:7px 0 2px}
button.word-choice-chip{display:inline-flex;min-height:39px;padding:7px 12px;border:1px solid #e2c5a9;border-radius:9px;background:#fff;color:#263447;cursor:pointer;font-size:1em;line-height:1.4}
button.word-choice-chip:hover,button.word-choice-chip:focus-visible{border-color:#e7893b;background:#fff2df;outline-offset:2px}

/* Sorani / Arabic script input clarity and keyboard repair (October 2026). */
:root{--zana-script-font:"Noto Naskh Arabic","Noto Sans Arabic","Geeza Pro","Traditional Arabic",Tahoma,serif}
#guided-type-form input[dir="rtl"], #recall-form input[dir="rtl"],
input.answer-input[dir="rtl"], input.dialogue-input[dir="rtl"],
textarea[dir="rtl"], .journal-area[dir="rtl"], .contrast-screen textarea[dir="rtl"] {
  font-family:var(--zana-script-font)!important;
  font-size:clamp(1.55rem,5vw,2.05rem)!important;
  font-weight:500!important;
  line-height:2.15!important;
  letter-spacing:0!important;
  word-spacing:.22em!important;
  min-height:88px!important;
  padding:14px 18px!important;
  direction:rtl;
  text-align:right;
  text-rendering:optimizeLegibility;
}
textarea[dir="rtl"], .journal-area[dir="rtl"], .contrast-screen textarea[dir="rtl"]{min-height:185px!important}
.guided-keyboard{background:#fff9f0;border-color:#ebd6be}
.guided-keyboard .subtle{line-height:1.9;font-size:.86rem}
.guided-key-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.guided-key-grid button{
  display:flex; flex-direction:column;align-items:center;justify-content:center;
  min-height:72px;min-width:0;padding:6px 2px;background:#fff;
  color:#312820;border:1px solid #dfc7ab;border-radius:12px;
  box-shadow:0 2px 0 #ead8c7;cursor:pointer;
}
.guided-key-grid button:active{transform:translateY(2px);box-shadow:none;background:#ffe2bd}
.guided-key-grid .guided-key-letter{
  display:block;font:500 clamp(1.65rem,4.8vw,2.05rem)/1.5 var(--zana-script-font);
  letter-spacing:0;white-space:nowrap;
}
.guided-key-grid button small{display:block;font-size:.64rem;line-height:1.25;min-height:1em;color:#775c45;white-space:normal;text-align:center;font-weight:650}
.guided-target[dir="rtl"],.guided-foreign[dir="rtl"],.guided-choices button[dir="rtl"],
.guided-work .quiz-feedback strong[dir="rtl"] {
 font-family:var(--zana-script-font);font-weight:500;letter-spacing:0;
 word-spacing:.24em;line-height:2.15;
}
.guided-work .quiz-feedback strong[dir="rtl"]{font-size:clamp(1.55rem,4.5vw,2rem);display:inline-block}
.guided-choices button[dir="rtl"]{font-size:clamp(1.45rem,4vw,1.85rem);text-align:right;padding:14px 18px}
@media(max-width:420px){.guided-key-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.guided-key-grid button{min-height:70px}}
@media(prefers-reduced-motion:reduce){.guided-key-grid button{transition:none;transform:none!important}}

/* Make the three easily confused Kurdish glyph keys visibly distinguishable. */
.guided-key-grid button[data-key="ە"]{border:2px solid #e78324;background:#fff0dc}
.guided-key-grid button[data-key="ه"]{border:2px solid #a3b5cb;background:#f7faff}
.guided-key-grid button[data-key="ا"]{border:2px solid #d7bca1;background:#fff7ef}
html[data-script-size="large"] #guided-type-form input[dir="rtl"],
html[data-script-size="large"] #recall-form input[dir="rtl"],
html[data-script-size="large"] textarea[dir="rtl"]{font-size:clamp(1.9rem,6vw,2.45rem)!important;min-height:100px!important}
html[data-script-size="extra"] #guided-type-form input[dir="rtl"],
html[data-script-size="extra"] #recall-form input[dir="rtl"],
html[data-script-size="extra"] textarea[dir="rtl"]{font-size:clamp(2.1rem,7vw,2.7rem)!important;min-height:115px!important}