@charset "UTF-8";
:root{color-scheme:light;--ink:#203a38;--muted:#637671;--green:#087f69;--green-dark:#076652;--mint:#e5f5ed;--line:#dfe7e3;--orange:#bd581f;--paper:#f7f9f6;--arabic:"Traditional Arabic","Noto Naskh Arabic","Times New Roman",serif;font-family:"Segoe UI",system-ui,-apple-system,sans-serif;font-size:16px;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:disabled{cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #cc740a;outline-offset:4px}button:disabled{opacity:.5}h1,h2,h3,p{margin:0}h1{font-size:2.15rem;letter-spacing:-.065rem;line-height:1.2}h2{font-size:1.4rem;letter-spacing:-.035rem}h3{font-size:1.05rem}p{line-height:1.6}small{font-size:.8rem}[hidden]{display:none!important}kbd{display:inline-grid;place-items:center;min-width:23px;height:23px;border:1px solid #cedad3;border-bottom-width:2px;border-radius:5px;background:#fff;font:600 .75rem "Segoe UI",sans-serif;color:var(--muted)}
.skip-link{position:fixed;top:-60px;left:16px;z-index:100;background:white;padding:12px}.skip-link:focus{top:12px}.course-layout{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:35px 22px 24px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto}.brand{display:flex;align-items:center;gap:10px;font-weight:750;font-size:1.6rem;letter-spacing:-1px}.brand>span>span{color:var(--green)}.brand small{display:block;margin-top:4px;color:#7b8b85;font-size:.6rem;letter-spacing:1.6px;font-weight:600}.brand-mark{background:var(--green);color:white;border-radius:12px;width:40px;height:42px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;letter-spacing:-5px;padding-right:7px}.brand .brand-mark span{font-family:var(--arabic);color:white;font-size:1.7rem}.language-label{display:flex;gap:10px;align-items:center;margin-top:39px;margin-bottom:25px;padding:12px 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-weight:650;font-size:.95rem}.language-label small{display:block;font-weight:400;font-size:.7rem;margin-top:2px;color:var(--muted)}.language-symbol{background:#e6f2eb;border-radius:9px;color:var(--green);width:34px;height:36px;display:grid;place-items:center;font-family:var(--arabic);font-size:1.7rem}.language-dot{width:7px;height:7px;background:var(--green);border-radius:50%;margin-left:auto}.main-nav{display:grid;gap:9px}.main-nav a,.main-nav button{background:transparent;border:0;width:100%;display:flex;gap:12px;align-items:center;padding:13px 12px;border-radius:9px;text-align:left;font-size:.9rem;font-weight:650;color:var(--muted)}.main-nav>*>span:first-child{font-size:1.35rem;width:21px;text-align:center;line-height:1}.main-nav a:hover,.main-nav button:hover{background:#f2f7f3}.main-nav .active{background:var(--mint);color:var(--green)}.nav-count{margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-size:.7rem}.nav-caption{font-size:.65rem;font-weight:700;letter-spacing:1.3px;color:#788b80;margin:35px 12px 12px}.reference-nav{display:grid;gap:5px}.reference-nav a{display:flex;gap:10px;padding:10px 8px;color:var(--muted);font-size:.8rem;border-radius:6px}.reference-nav a:hover{color:var(--green);background:var(--mint)}.reference-nav a span{width:17px;text-align:center}.sidebar-bottom{margin-top:auto;padding-top:30px}.shortcut-link{display:flex;gap:10px;align-items:center;background:none;border:0;padding:5px 0;margin-bottom:23px;font-size:.8rem;color:var(--muted)}.profile{display:flex;align-items:center;gap:10px;padding-top:20px;border-top:1px solid var(--line);font-size:.85rem;font-weight:600}.profile small{display:block;color:var(--muted);font-weight:400;font-size:.7rem;margin-top:3px}.avatar{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border-radius:50%;background:#eeebdf;color:#7b704b;text-transform:uppercase}.text-link{color:var(--green);font-size:.78rem;display:inline-block;margin:14px 0 0;background:none;border:0;padding:0;font-weight:600}.guest-note{font-size:.68rem;color:var(--muted);margin-top:7px}.main-wrap{min-width:0}.course-topbar{height:86px;border-bottom:1px solid var(--line);padding:0 42px;display:flex;justify-content:space-between;align-items:center;background:#fff9}.topbar-location{font-size:.65rem;letter-spacing:1.7px;font-weight:650;color:#72847d}.topbar-stats{display:flex;align-items:center;gap:24px;font-size:.85rem}.topbar-stats>span{display:flex;gap:6px;align-items:center}.topbar-stats>span:first-child>span:first-child{color:var(--orange);font-size:1.3rem}.xp-pill{padding:8px 13px;border:1px solid #dece92;border-radius:8px;background:#fff9e2;color:#8a6508}.mobile-brand,.mobile-nav{display:none}#course-main{max-width:1310px;margin:auto;padding:36px 42px 20px;outline:none}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:16px}.page-heading p{margin-top:9px;color:var(--muted);font-size:.95rem}.course-label{font-size:.7rem;letter-spacing:1.2px;font-weight:700;color:var(--green);border:1px solid #bfd8c9;padding:7px 11px;border-radius:6px;white-space:nowrap}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:28px;align-items:start}.hero-card{position:relative;background:#e7f2ea;border:1px solid #d4e7d8;border-radius:17px;overflow:hidden;min-height:214px;padding:25px 29px;margin-bottom:31px}.hero-card:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#e7f2ea 37%,#e7f2eaee 48%,#e7f2ea00 72%);pointer-events:none}.hero-card img{position:absolute;right:0;top:0;height:100%;width:52%;object-fit:cover;object-position:right center;opacity:.88}.hero-copy{position:relative;z-index:1;max-width:67%}.eyebrow{font-size:.68rem;font-weight:750;letter-spacing:1.6px;color:var(--green);margin-bottom:10px}.hero-copy h2{font-size:1.75rem;line-height:1.22;letter-spacing:-.05rem}.hero-copy p{font-size:.85rem;color:#516b5f;margin:10px 0 18px;max-width:300px}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:45px;padding:11px 20px;font-size:.9rem;font-weight:650;border-radius:9px;border:1px solid transparent;transition:background .15s,transform .15s}.button-primary{background:var(--green);color:white;box-shadow:0 3px 0 var(--green-dark)}.button-primary:hover{background:var(--green-dark);transform:translateY(-1px)}.button-primary:active{transform:translateY(2px);box-shadow:none}.button-secondary{border-color:var(--line);background:white}.button-secondary:hover{background:#edf4ee}.button-small{padding:8px 12px;min-height:37px;font-size:.8rem}.unit-heading{display:flex;align-items:center;gap:13px;margin-bottom:17px}.unit-number{display:grid;place-items:center;width:38px;height:38px;border:1px solid #d2e2d8;border-radius:10px;background:#ebf4ed;font-weight:750;color:var(--green);font-size:.85rem;flex-shrink:0}.unit-heading h2{font-size:1.1rem;letter-spacing:-.015rem}.unit-heading p{font-size:.8rem;color:var(--muted);margin-top:4px}.unit-heading .unit-status{margin-left:auto;color:var(--muted);font-size:.75rem;white-space:nowrap}.unit{margin-bottom:29px;scroll-margin-top:24px}.lesson-list{display:grid;gap:11px}.lesson-card{position:relative;display:flex;align-items:center;gap:15px;padding:15px 17px;width:100%;text-align:left;border:1px solid var(--line);border-bottom:3px solid #dce5df;border-radius:12px;background:white;transition:border-color .15s,transform .15s}.lesson-card:hover{border-color:#75b69c;transform:translateY(-1px)}.lesson-card.recommended{border-color:var(--green);background:#f2faf5;box-shadow:0 0 0 1px var(--green)}.lesson-icon{flex-shrink:0;background:#f0f4f0;border:1px solid #e3ebe4;border-radius:12px;display:grid;place-items:center;width:51px;height:53px;font-family:var(--arabic);font-size:1.9rem;color:#617e6b}.recommended .lesson-icon{background:var(--green);color:white;border-color:var(--green-dark);box-shadow:0 3px 0 var(--green-dark)}.completed .lesson-icon{background:var(--mint);color:var(--green);border-color:#b7daca;font-family:inherit;font-size:1.4rem}.lesson-copy{flex:1;min-width:0}.lesson-copy strong{display:block;font-size:.95rem;font-weight:650}.lesson-copy small{display:block;font-size:.75rem;line-height:1.4;margin-top:5px;color:var(--muted)}.lesson-meta{display:flex;align-items:center;gap:14px;font-size:.72rem;color:var(--muted)}.lesson-meta .arrow{font-size:1.1rem}.start-tag{font-size:.65rem;background:var(--mint);color:var(--green);padding:4px 7px;border-radius:5px;text-transform:uppercase;font-weight:750;letter-spacing:.5px}.stars{color:#9a700c;letter-spacing:2px;white-space:nowrap}.stars .empty{color:#98a6a0}.course-aside{display:grid;gap:18px}.side-card{border:1px solid var(--line);border-radius:13px;background:white;padding:22px}.side-card-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.side-card-heading h2{font-size:.98rem;letter-spacing:0}.side-card-heading>span{font-size:1.05rem;color:var(--orange)}.daily-total{display:flex;justify-content:space-between;align-items:baseline;font-size:.8rem;color:var(--muted);margin-bottom:10px}.daily-total strong{font-size:1.3rem;color:var(--ink)}.progress-track{background:#e8eee8;border-radius:50px;overflow:hidden;height:9px}.progress-track>span{display:block;height:100%;background:var(--green);border-radius:50px;transition:width .3s}.side-card p{font-size:.8rem;color:var(--muted);margin-top:12px}.week-strip{display:flex;justify-content:space-between;gap:5px;margin:16px 0 2px}.day{display:grid;gap:8px;text-align:center;font-size:.65rem;color:var(--muted)}.day span{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#f0f3ee;border:1px solid #e3e9e1}.day.done span{background:var(--green);color:white;border-color:var(--green)}.day.today span{outline:2px solid #da8e33;outline-offset:2px}.streak-count{font-size:1.65rem;letter-spacing:-1px}.streak-count small{font-size:.8rem;letter-spacing:0;font-weight:400;color:var(--muted)}.review-card{background:#f1f3ff;border-color:#dcdfef}.review-card .side-card-heading>span{color:#6474b3}.review-card .button{width:100%;margin-top:17px;color:#4a588c;border-color:#cbd3e8}.milestone{display:flex;gap:11px;align-items:center;margin:17px 0}.milestone-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:#fff6da;color:#9a700c;font-size:1.35rem}.milestone strong{display:block;font-size:.8rem}.milestone small{font-size:.7rem;color:var(--muted)}.course-footer{max-width:1310px;margin:auto;padding:25px 42px;display:flex;justify-content:space-between;gap:15px;font-size:.7rem;color:var(--muted)}.course-footer a:hover{text-decoration:underline}.notice{background:#fff4d8;border:1px solid #dec38a;border-radius:8px;padding:12px 16px;margin:20px 42px 0;font-size:.85rem;line-height:1.5}.notice a{text-decoration:underline}.loading-state{padding:60px;text-align:center}.empty-state{text-align:center;padding:45px 24px;background:white;border:1px solid var(--line);border-radius:16px}.empty-state .empty-icon{display:block;font-size:3rem;color:var(--green);margin-bottom:15px}.empty-state p{max-width:450px;margin:14px auto 22px;color:var(--muted)}
/* One calm, focused space for every exercise. */
.lesson-shell-new{max-width:790px;margin:auto}.lesson-top{display:flex;align-items:center;gap:20px;margin:0 0 25px}.exit-lesson{background:none;border:0;font-size:1.6rem;color:var(--muted);width:35px;height:40px;flex-shrink:0}.lesson-top .progress-track{flex:1;height:11px}.lesson-progress-label{font-size:.8rem;color:var(--muted);white-space:nowrap}.session-xp{font-size:.85rem;font-weight:700;color:#8a6508;white-space:nowrap}.lesson-context{font-size:.7rem;color:var(--green);text-transform:uppercase;letter-spacing:1.3px;font-weight:700;margin-bottom:10px}.lesson-intro h1{font-size:1.8rem}.lesson-intro>p{margin:10px 0 23px;color:var(--muted)}.guide-grid{display:grid;gap:14px}.guide-card{border:1px solid var(--line);border-radius:13px;background:white;padding:22px;display:grid;grid-template-columns:1fr auto;gap:13px 25px;align-items:center}.guide-card h2{font-size:1rem;letter-spacing:0}.guide-card p{font-size:.9rem;color:var(--muted);margin-top:8px}.guide-example{text-align:center;min-width:105px;max-width:230px}.guide-example .arabic{display:block;font-family:inherit;font-size:1.2rem;line-height:1.5;color:var(--green)}.guide-example small{font-size:.78rem;color:var(--muted);line-height:1.5;display:block}.lesson-tip{padding:15px 20px;background:#eaf3ed;border-radius:10px;font-size:.85rem;color:#4e6859;margin:20px 0}.lesson-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:25px 0}.lesson-controls p,.keyboard-hint{font-size:.75rem;color:var(--muted)}.button kbd{background:#fff2;color:inherit;border-color:#ffffff66}.question-card{padding:22px 35px 20px;border:1px solid var(--line);border-radius:17px;background:white}.question-title{font-size:1.55rem;letter-spacing:-.04rem;line-height:1.35;outline:none}.question-prompt{text-align:center;position:relative;min-height:96px;display:flex;align-items:center;justify-content:center;flex-direction:column;margin:6px 0 12px;padding:8px;overflow-wrap:anywhere}.question-display{font-size:3rem;font-weight:550;line-height:1.5}.question-display[lang="ar"]{font-family:var(--arabic);font-weight:400;font-size:5.3rem;line-height:1.6;letter-spacing:0}.question-display.long{font-size:3.7rem}.question-display[lang="en"]{font-size:2rem}.audio-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:7px;padding:7px 11px;background:#f4f8f4;color:var(--green);font-size:.75rem;margin-top:5px}.audio-status{font-size:.75rem;color:var(--muted);margin-top:7px}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answer-option{display:flex;align-items:center;gap:13px;border:2px solid var(--line);border-bottom-width:4px;border-radius:11px;padding:10px 15px;min-height:60px;background:white;text-align:center;transition:background .15s,border-color .15s}.answer-option:hover:not(:disabled){border-color:#89b6a0;background:#f6faf7}.answer-option.selected{background:#edf8f1;border-color:var(--green)}.answer-option>span{flex:1;font-size:1rem;line-height:1.5;overflow-wrap:anywhere}.answer-option>span[lang="ar"]{font-family:var(--arabic);font-size:2.2rem;line-height:1.3}.answer-option:disabled{opacity:1}.answer-option.correct{border-color:var(--green);background:#e9f7ee}.answer-option.wrong{border-color:#bc6551;background:#fff0e9}.answer-option .answer-marker{flex:0;font-size:1rem;color:var(--green);font-family:inherit}.answer-option.wrong .answer-marker{color:#994532}.question-tools{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:14px}.hint-button{background:none;border:0;color:var(--muted);padding:7px 0;font-size:.8rem}.hint-button:hover{color:var(--green)}.hint-box{background:#fff8e7;border:1px solid #e7d9af;border-radius:10px;padding:15px 18px;margin-top:17px;color:#755d25;font-size:.9rem;line-height:1.6}.feedback-panel{margin-top:20px;padding:20px 23px;background:#e9f6ed;border:1px solid #b7dcc4;border-radius:12px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}.feedback-panel.incorrect{background:#fff3e9;border-color:#edceb2}.feedback-panel h2{font-size:1.1rem;letter-spacing:0;color:var(--green)}.feedback-panel.incorrect h2{color:#995322}.feedback-panel p{margin-top:7px;font-size:.9rem;line-height:1.6}.feedback-panel .answer-reveal{font-weight:650}.feedback-panel small{display:block;margin-top:7px;color:var(--muted);font-size:.78rem}.combo-pill{background:#fff5d7;color:#8a6508;font-size:.7rem;font-weight:700;padding:5px 9px;border-radius:6px;white-space:nowrap}.check-row{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:15px}.check-row p{color:var(--muted);font-size:.78rem}.results-card{background:white;border:1px solid var(--line);border-radius:18px;padding:35px;text-align:center}.result-emblem{display:grid;place-items:center;width:83px;height:83px;background:#fff6db;border:1px solid #ebd691;border-radius:25px;margin:0 auto 18px;font-size:2.9rem;color:#b38218}.results-card h1{font-size:2rem}.results-card>p{color:var(--muted);margin:12px auto 19px;max-width:530px}.result-stars{font-size:1.75rem;margin-bottom:20px}.result-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.result-metrics>div{padding:17px 10px;border:1px solid var(--line);border-radius:11px;background:#f9fbf8}.result-metrics strong{display:block;font-size:1.6rem;color:var(--green)}.result-metrics small{color:var(--muted);font-size:.75rem}.results-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:25px}.save-status{font-size:.78rem;line-height:1.5;color:var(--muted);margin:20px 0 0}.save-status.error{color:#a24927}.score-breakdown{text-align:left;border-top:1px solid var(--line);padding-top:16px;margin-top:20px;color:var(--muted);font-size:.85rem}.score-breakdown summary{cursor:pointer;font-weight:600}.score-breakdown p{font-size:.8rem;margin-top:10px}.practice-summary{display:flex;gap:12px;margin:25px 0;flex-wrap:wrap}.practice-summary span{padding:10px 15px;background:white;border:1px solid var(--line);border-radius:9px;color:var(--muted);font-size:.85rem}.practice-summary b{color:var(--green)}.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.badge-card{padding:26px 15px;border:1px solid var(--line);border-radius:13px;background:white;text-align:center}.badge-card>span{display:grid;place-items:center;margin:0 auto 16px;background:#f0f3ef;border-radius:17px;width:62px;height:62px;font-size:2rem;color:#768477}.badge-card.earned>span{background:#fff3cf;color:#986b08}.badge-card h2{font-size:1rem}.badge-card p{font-size:.8rem;color:var(--muted);margin:9px 0}.badge-card small{color:var(--green);font-weight:650}.badge-card:not(.earned) small{color:var(--muted)}dialog{border:1px solid var(--line);border-radius:17px;padding:32px;max-width:550px;width:calc(100% - 32px);color:var(--ink);box-shadow:0 24px 100px #16352b33}dialog::backdrop{background:#17392e77;backdrop-filter:blur(3px)}dialog h2{padding-right:20px;margin-bottom:16px}dialog p{color:var(--muted);font-size:.9rem}dialog .dialog-close{position:absolute;right:12px;top:10px;border:0;background:none;font-size:1.8rem;padding:0 8px;color:var(--muted)}.shortcut-list{display:grid;gap:14px;margin:22px 0}.shortcut-list>div{display:flex;gap:14px;align-items:center;font-size:.9rem}.shortcut-list>div>span:first-child{min-width:65px}.dialog-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.achievement-banner{margin:16px 0;padding:12px;border-radius:8px;background:#fff5da;color:#8a6508;font-size:.85rem}.resume-card{display:flex;justify-content:space-between;align-items:center;gap:15px;background:#fff7df;border:1px solid #e6d5a4;border-radius:10px;padding:14px 18px;margin-bottom:22px}.resume-card p{font-size:.85rem;color:#746238}.resume-card strong{display:block;color:#675320}.review-source{font-size:.75rem;color:var(--muted);margin-bottom:14px}
@media(min-width:1500px){.dashboard-grid{grid-template-columns:minmax(0,1fr) 290px;gap:34px}.hero-card{min-height:235px;padding:30px}.hero-copy h2{font-size:2rem}}
@media(max-width:1190px){.course-layout{grid-template-columns:218px minmax(0,1fr)}.sidebar{padding:28px 15px 20px}.brand{font-size:1.45rem}.course-topbar{padding:0 27px}#course-main{padding:28px 27px 20px}.dashboard-grid{gap:20px;grid-template-columns:minmax(0,1fr) 230px}.side-card{padding:18px}.hero-card{padding:23px}.hero-copy{max-width:75%}.hero-copy h2{font-size:1.6rem}.lesson-meta{gap:8px}.lesson-meta .duration{display:none}.course-label{display:none}.lesson-card{padding:13px;gap:12px}.course-footer{padding:25px 27px}}
@media(max-width:1020px){.dashboard-grid{grid-template-columns:minmax(0,1fr)}.course-aside{grid-template-columns:1fr 1fr}.course-aside .side-card:nth-child(n+3){display:none}.topbar-location{display:none}.course-topbar{justify-content:flex-end}.hero-card{min-height:205px}.hero-copy{max-width:65%}.sidebar{width:auto}.guide-card{padding:19px;gap:15px}.guide-example{min-width:90px;max-width:170px}.badge-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.course-layout{display:block}.sidebar{display:none}.course-topbar{height:65px;padding:0 20px;justify-content:space-between;background:white}.mobile-brand{display:block;font-weight:800;color:var(--green);letter-spacing:-1px;font-size:1.4rem}.topbar-stats{gap:12px;font-size:.75rem}.topbar-stats>span:first-child>span:last-child{display:none}.xp-pill{padding:6px 8px}.mobile-nav{display:flex;justify-content:space-around;gap:5px;padding:9px 12px;border-bottom:1px solid var(--line);background:white}.mobile-nav a,.mobile-nav button{border:0;background:transparent;padding:9px;font-size:.8rem;font-weight:600;border-radius:6px;color:var(--muted)}.mobile-nav .active{color:var(--green);background:var(--mint)}#course-main{padding:26px 18px 18px}.page-heading{margin-bottom:21px}h1{font-size:1.8rem}.page-heading p{font-size:.87rem}.hero-card{padding:23px;min-height:210px;margin-bottom:28px}.hero-copy{max-width:72%}.hero-copy h2{font-size:1.6rem}.hero-copy p{font-size:.8rem;max-width:230px}.hero-card img{width:60%}.hero-card:after{background:linear-gradient(90deg,#e7f2ea 33%,#e7f2eadd 56%,#e7f2ea00)}.hero-copy .button{font-size:.8rem;padding:10px 15px}.unit-heading{gap:10px}.unit-heading h2{font-size:1.05rem}.unit-heading p{font-size:.75rem}.unit-heading .unit-status{font-size:.7rem}.lesson-copy strong{font-size:.9rem}.lesson-copy small{font-size:.72rem}.lesson-meta .start-tag{display:none}.lesson-icon{width:45px;height:48px}.lesson-card{padding:14px 12px}.lesson-meta{font-size:.7rem}.course-aside{gap:12px}.side-card{padding:17px}.day span{width:23px;height:23px}.course-footer{padding:20px;font-size:.65rem}.course-footer span{max-width:65%}.notice{margin:15px 18px 0}.lesson-top{gap:10px;margin-bottom:20px}.lesson-progress-label{font-size:.7rem}.session-xp{font-size:.75rem}.question-card{padding:18px 18px 16px}.question-title{font-size:1.3rem}.question-prompt{min-height:88px;margin-bottom:12px}.question-display[lang="ar"]{font-size:4.7rem}.question-display.long{font-size:3rem}.question-display[lang="en"]{font-size:1.7rem}.answer-grid{gap:10px}.answer-option{padding:10px 9px;min-height:60px;gap:6px}.answer-option>span{font-size:.9rem}.answer-option>span[lang="ar"]{font-size:1.9rem}.answer-option kbd{min-width:21px;font-size:.65rem}.feedback-panel{grid-template-columns:1fr;padding:19px}.feedback-panel .button{width:100%}.check-row .button{min-width:140px}.keyboard-hint{display:none}.check-row p{font-size:.72rem}.guide-card{grid-template-columns:1fr}.guide-example{max-width:none;min-width:0;background:#f5f8f3;border-radius:8px;padding:8px}.guide-example small{font-size:.8rem}.lesson-controls{flex-wrap:wrap}.lesson-controls .button{width:100%}.lesson-controls p{width:100%;text-align:center}.results-card{padding:27px 18px}.results-card h1{font-size:1.65rem}.result-metrics{gap:8px}.result-metrics strong{font-size:1.4rem}.result-metrics small{font-size:.7rem}.result-metrics>div{padding:15px 7px}.results-actions .button{width:100%}.resume-card{flex-wrap:wrap}.resume-card .button{width:100%}.badge-grid{gap:12px}.badge-card{padding:22px 12px}.lesson-intro h1{font-size:1.6rem}}
@media(max-width:380px){.course-aside{grid-template-columns:1fr}.course-aside .side-card:nth-child(2){display:none}.topbar-stats{gap:7px}.answer-option kbd{display:none}.hero-copy{max-width:85%}.lesson-meta .stars{font-size:.65rem;letter-spacing:0}.badge-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.unit-jump{display:flex;flex-wrap:wrap;gap:7px;margin:-9px 0 25px}.unit-jump a{padding:7px 10px;border:1px solid var(--line);border-radius:6px;font-size:.75rem;background:white;color:var(--muted)}.unit-jump a:hover{background:var(--mint);color:var(--green);border-color:#94c5ac}.mobile-menu-links{display:grid;gap:10px;margin-bottom:20px}.sidebar{scrollbar-width:thin}.guide-practice-top{margin-bottom:20px}

/* A shared header baseline keeps the brand and learner information aligned. */
:root { --course-header-height: 100px; }
.sidebar { padding: 0; overflow: hidden; }
.brand { min-height: var(--course-header-height); height: var(--course-header-height); flex-shrink: 0; padding: 0 22px; border-bottom: 1px solid var(--line); }
.brand small { font-size: .7rem; letter-spacing: .7px; font-weight: 500; }
.sidebar-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; padding: 24px 22px; scrollbar-width: thin; }
.language-label { margin-top: 0; border-top: 0; padding-top: 0; padding-bottom: 20px; }
.sidebar-bottom .shortcut-link { margin-bottom: 12px; }
.course-topbar { height: var(--course-header-height); min-height: var(--course-header-height); gap: 22px; background: #fff; }
.header-learner { display: flex; align-items: center; gap: 26px; min-width: 0; }
.learner-profile { display: flex; align-items: center; gap: 12px; min-width: 0; }
.learner-profile > span:last-child { min-width: 0; }
.learner-profile strong { display: block; font-size: .95rem; font-weight: 650; overflow-wrap: anywhere; }
.learner-profile small { display: block; font-size: .8rem; color: var(--muted); margin-top: 4px; }
.learner-profile .avatar { width: 40px; height: 40px; background: var(--mint); color: var(--green); }
.header-account { flex-shrink: 0; }
.header-account .text-link { margin: 0; padding: 10px 0; font-size: .85rem; line-height: 1.4; }
.topbar-stats { flex-shrink: 0; }
.audio-button.is-playing { color: #fff; background: var(--green-dark); border-color: var(--green-dark); box-shadow: 0 0 0 3px #087f6920; }
.audio-button.is-playing kbd { color: #fff; background: #ffffff18; border-color: #ffffff66; }
.audio-status:empty { display: none; }
.mobile-brand small { display: block; color: var(--muted); font-size: .65rem; letter-spacing: .45px; font-weight: 500; margin-top: 2px; }
@media (max-width: 1190px) {
    .brand { padding: 0 15px; }
    .sidebar-body { padding: 24px 15px; }
    .header-learner { gap: 15px; }
    .topbar-stats { gap: 14px; }
}
@media (min-width: 721px) and (max-width: 1100px) {
    .header-learner { flex-direction: column; align-items: flex-start; gap: 0; }
    .header-account .text-link { padding: 5px 0 0 52px; font-size: .75rem; }
    .course-topbar { gap: 12px; }
}
@media (max-width: 720px) {
    .course-topbar { height: auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 15px 18px; gap: 17px 12px; }
    .mobile-brand { grid-column: 1; grid-row: 1; }
    .topbar-stats { grid-column: 2; grid-row: 1; gap: 10px; }
    .header-learner { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 16px; }
    .learner-profile { gap: 9px; }
    .learner-profile .avatar { width: 34px; height: 34px; }
    .learner-profile strong { font-size: .85rem; }
    .learner-profile small { font-size: .72rem; line-height: 1.4; }
    .header-account { max-width: 110px; flex-shrink: 1; }
    .header-account .text-link { font-size: .75rem; padding: 5px 0; }
}
@media (min-width: 721px) {
    .course-topbar { position: sticky; top: 0; z-index: 20; }
    .unit { scroll-margin-top: calc(var(--course-header-height) + 24px); }
}
.learner-profile strong { max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) { .learner-profile strong { max-width: 140px; } }
/* Authored text remains plain text, with intentional paragraph breaks. */
al-text { display: inline; white-space: pre-line; }
.exit-lesson { display: inline-flex; align-items: center; gap: 8px; width: auto; min-height: 44px; height: auto; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; background: white; font-size: .85rem; font-weight: 600; color: var(--green-dark); }
.exit-lesson:hover { background: var(--mint); border-color: #b7daca; }
@media (max-width: 520px) {
    .lesson-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; }
    .lesson-top .exit-lesson { grid-column: 1 / -1; justify-self: start; }
    .lesson-top .progress-track { min-width: 90px; }
}

/* Keyboard shortcuts use physical keycaps across lessons, help and the editor. */
kbd {
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    border: 1px solid #b4c2bb;
    border-bottom: 3px solid #8d9e94;
    border-radius: 6px;
    background: linear-gradient(180deg, #fff 0%, #f0f3f0 100%);
    box-shadow: 0 2px 0 #d5ded8, inset 0 1px 0 #fff;
    color: #304a40;
    font: 600 .75rem/1 ui-monospace, "Cascadia Mono", Consolas, monospace;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    text-shadow: 0 1px 0 #fff;
    flex-shrink: 0;
}
.button kbd, .audio-button.is-playing kbd {
    background: linear-gradient(180deg, #fff 0%, #edf3ef 100%);
    color: #304a40;
    border-color: #c2cec7;
    border-bottom-color: #91a69a;
    box-shadow: 0 2px 0 #153d302b, inset 0 1px 0 #fff;
}
.answer-option kbd { min-width: 26px; font-size: .75rem; }
.shortcut-list > div > span:first-child { min-width: 76px; }
.button:active kbd, .audio-button:active kbd, .hint-button:active kbd,
.answer-option:active kbd, .shortcut-link:active kbd {
    transform: translateY(2px);
    box-shadow: inset 0 1px 0 #fff;
}

/* Let learners choose the pace without leaving the exercise. */
.lesson-preferences { margin-top: 16px; }
.auto-advance-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 5px 0; border: 0; background: none; color: var(--muted); font-size: .75rem; text-align: left; }
.auto-advance-switch { display: inline-block; position: relative; flex: 0 0 30px; width: 30px; height: 18px; border: 1px solid #a5b6ad; border-radius: 999px; background: #dce4de; }
.auto-advance-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: white; box-shadow: 0 1px 2px #173d3033; }
.auto-advance-toggle[aria-pressed="true"] .auto-advance-switch { background: var(--green); border-color: var(--green); }
.auto-advance-toggle[aria-pressed="true"] .auto-advance-switch::after { left: 14px; }
.feedback-actions { display: grid; gap: 10px; justify-items: end; }
.auto-advance-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .75rem; color: var(--green-dark); }
.auto-advance-status .text-link { font-size: inherit; text-decoration: underline; min-height: 32px; }
@media (max-width: 720px) {
    .feedback-actions { justify-items: stretch; }
}

/* Removed prose occupies no space in the learner view. */
al-text.editor-empty, .editor-empty-block { display: none; }

/* Units are sections; their lessons form one continuous, compact list. */
.unit { margin-bottom: 26px; }
.unit-heading {
    gap: 12px;
    margin-bottom: 0;
    padding: 12px 10px;
    border-top: 3px solid var(--green);
    border-bottom: 1px solid #cbdcd2;
    background: transparent;
}
.unit-number {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--green-dark);
    font-size: 1.3rem;
    font-weight: 800;
}
.unit-heading > div { flex: 1; min-width: 0; }
.unit-heading h2 { font-size: 1.25rem; font-weight: 750; line-height: 1.25; }
.unit-heading p { margin-top: 3px; font-size: .78rem; line-height: 1.4; }
.unit-heading .unit-status { margin-left: 8px; font-size: .75rem; font-weight: 650; color: var(--green-dark); }
.lesson-list { gap: 0; margin-inline-start: 24px; }
.lesson-list .lesson-card {
    min-height: 64px;
    gap: 12px;
    padding: 9px 10px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: background-color .15s;
}
.lesson-list .lesson-card:hover { background: #edf4ee; transform: none; }
.lesson-list .lesson-card:focus-visible { outline: 3px solid #cc740a; outline-offset: -3px; }
.lesson-list .lesson-card.recommended { background: #e8f4ec; box-shadow: inset 3px 0 0 var(--green); }
.lesson-list .lesson-card.recommended:hover { background: #dfeee5; }
.lesson-list .lesson-icon {
    width: 34px;
    height: 36px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #617e6b;
    font-size: 1.7rem;
}
.lesson-list .completed .lesson-icon { color: var(--green); font-size: 1.15rem; }
.lesson-list .recommended .lesson-icon { color: var(--green-dark); }
.lesson-copy strong { font-size: .93rem; line-height: 1.3; }
.lesson-copy small { margin-top: 2px; font-size: .75rem; line-height: 1.4; }
.lesson-meta { gap: 10px; flex-shrink: 0; }
.lesson-meta .start-tag { display: inline; padding: 0; border-radius: 0; background: none; font-size: .65rem; }
@media (max-width: 720px) {
    .unit { margin-bottom: 22px; }
    .unit-heading { gap: 9px; padding: 10px 8px; }
    .unit-heading h2 { font-size: 1.08rem; }
    .unit-heading p { font-size: .74rem; }
    .unit-number { width: 28px; font-size: 1.15rem; }
    .unit-heading .unit-status { margin-left: 0; font-size: .7rem; }
    .lesson-list { margin-inline-start: 12px; }
    .lesson-list .lesson-card { gap: 9px; padding: 9px 8px; }
    .lesson-list .lesson-icon { width: 28px; height: 32px; font-size: 1.5rem; }
    .lesson-list .completed .lesson-icon { font-size: 1.1rem; }
    .lesson-copy strong { font-size: .875rem; }
    .lesson-copy small { font-size: .72rem; }
    .lesson-meta { gap: 6px; }
    .lesson-meta .start-tag { font-size: .6rem; letter-spacing: .2px; }
}

/* A single welcome banner replaces the separate heading and boxed hero. */
#course-main { padding-top: 0; }
.course-welcome {
    min-height: 204px;
    margin: 0 0 12px;
    padding: 18px 0 24px;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.course-welcome img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
    opacity: 1;
    mask-image: linear-gradient(90deg, transparent 30%, #000 76%);
}
.course-welcome::after { content: none; }
.course-welcome .hero-copy { width: 62%; max-width: 720px; }
.course-welcome .eyebrow { margin-bottom: 6px; font-size: .72rem; letter-spacing: 1.6px; text-transform: none; }
.course-welcome h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.12; letter-spacing: -.055rem; text-wrap: balance; }
.course-welcome .hero-copy p { max-width: 490px; margin: 8px 0 13px; font-size: .83rem; line-height: 1.45; color: var(--muted); }
.course-welcome .button { min-height: 42px; padding: 10px 17px; font-size: .83rem; }
.learning-path > .unit-jump { margin: 0 0 16px; }
@media (max-width: 720px) {
    .course-welcome { min-height: 190px; padding: 12px 0 20px; margin-bottom: 8px; }
    .course-welcome .hero-copy { width: 100%; max-width: none; }
    .course-welcome h1 { max-width: 440px; font-size: clamp(1.8rem, 6vw, 2.2rem); }
    .course-welcome .hero-copy p { max-width: 90%; font-size: .8rem; }
    .course-welcome img { object-position: 72% center; mask-image: none; opacity: .12; }

}

/* Color samples supplement the written vocabulary labels. */
.color-swatch { display: block; width: 52px; height: 28px; margin: 0 auto 8px; border: 1px solid #81968e; border-radius: 8px; background: var(--swatch); }

/* Authored paragraph HTML uses compact blocks within existing text wrappers. */
al-text.rich-copy { white-space: normal; }
al-text .rich-p, al-text .rich-div { display: block; }
al-text .rich-p + .rich-p { margin-top: .65em; }
al-text .rich-ul, al-text .rich-ol { display: block; padding-inline-start: 1.4em; margin-block: .4em; }
al-text .rich-li { display: list-item; }
al-text .rich-ul > .rich-li { list-style-type: disc; }
al-text .rich-ol > .rich-li { list-style-type: decimal; }
al-text code { font-size: .9em; background: #edf2ee; border-radius: 3px; padding: .1em .25em; }
al-text mark { background: #fff0b7; color: inherit; }

.button-forget { color: #994532; }

/* Align the writing guide with the font's actual baseline, including descenders. */
.arabic-writing {
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: baseline;
    vertical-align: baseline;
    min-width: 1.8em;
    max-width: 100%;
    padding-inline: .15em;
}
.arabic-writing::before {
    content: "";
    grid-area: 1 / 1;
    align-self: baseline;
    border-top: 1px solid #bccfc5;
    pointer-events: none;
}
.arabic-writing > al-text, .arabic-writing > .letter-label {
    grid-area: 1 / 1;
    min-width: 0;
    position: relative;
}

/* Word playback is separate from answer selection. */
.word-answer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 6px; min-width: 0; }
.word-answer .answer-option { min-width: 0; width: 100%; }
.word-answer .word-audio-button { align-self: center; flex-direction: column; gap: 2px; margin: 0; min-width: 44px; min-height: 44px; padding: 6px; font-size: .65rem; }
.word-audio-button > span { font-size: 1rem; line-height: 1; }
.word-answer .audio-status { grid-column: 1 / -1; margin: 0; }
@media (max-width: 480px) {
    .answer-grid:has(.word-answer) { grid-template-columns: 1fr; }
    .word-answer .word-audio-button { flex-direction: row; gap: 5px; padding: 8px 10px; font-size: .75rem; }
}

/* Keep vocabulary, its transcription, and playback together in a compact row. */
.question-prompt:has(.word-label) {
    display: grid;
    grid-template-columns: minmax(0, max-content) auto;
    gap: 0 16px;
    min-height: 0;
    padding: 8px 0;
    align-items: center;
}
.question-prompt:has(.word-label) > .question-display { min-width: 0; grid-column: 1; }
.question-prompt:has(.word-label) > .audio-button { grid-column: 2; margin: 0; min-height: 44px; }
.question-prompt:has(.word-label) > .audio-status { grid-column: 1 / -1; }
.question-prompt:has(.word-label) > .audio-status:empty { display: none; }
.question-display .word-label { display: inline-flex; flex-direction: column; align-items: center; vertical-align: top; line-height: 1.05; }
.question-display .word-label > .arabic-writing { flex: none; }
@media (max-width: 480px) {
    .question-prompt:has(.word-label) { column-gap: 10px; }
    .question-prompt:has(.word-label) > .audio-button { padding: 7px 9px; gap: 5px; }
}

/* Keep each family-overview letter attached to its own name in RTL order. */
.guide-letter-group { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 8px 12px; width: calc(var(--letter-count) * 84px - 12px); max-width: 320px; }
.guide-letter-pair { flex: 1 1 60px; min-width: 0; text-align: center; }
.guide-letter-pair small { overflow-wrap: anywhere; }
@media (max-width: 720px) {
    .guide-letter-group { width: 100%; max-width: none; }
}

/* Grammar keeps the subject, model verb and three contrasting endings readable. */
.grammar-context { margin: 8px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.grammar-question .question-display { display: flex; flex-direction: column; align-items: center; font-size: 3.3rem; line-height: 1.2; }
.question-reading, .choice-reading { display: block; margin-top: 4px; color: var(--muted); font: 400 .85rem/1.4 "Segoe UI", system-ui, sans-serif; letter-spacing: normal; }
.grammar-question .answer-option > span[lang="ar"] { font-size: 2rem; }
.grammar-question .question-prompt { min-height: 0; padding: 10px 0; }
@media (max-width: 480px) {
    .grammar-question .answer-grid { grid-template-columns: 1fr; }
    .grammar-question .question-display { font-size: 2.8rem; }
}

/* The shared alphabet course keeps native letters large and Latin labels compact. */
[data-course-language] [lang="ka"], [data-course-language] [lang="hy"] { font-family: "Sylfaen", "Noto Sans Georgian", "Noto Sans Armenian", sans-serif; }
[data-course-language] .course-welcome { min-height: 190px; padding-block: 24px; }
[data-course-language] .course-welcome .hero-copy { width: 72%; }
.alphabet-hero-letters { position: absolute; inset: 0 0 0 auto; width: 30%; display: flex; align-items: center; justify-content: center; font-size: clamp(3rem, 6vw, 6rem); color: #8aaeb1; letter-spacing: .04em; transform: rotate(-6deg); opacity: .65; pointer-events: none; }
[data-course-language="armenian"] .alphabet-hero-letters { color: #bc9372; }
.guide-case-example { min-width: 190px; max-width: 260px; }
.guide-case-pairs { display: flex; justify-content: center; gap: 24px; }
.guide-case-pairs > span { display: flex; flex-direction: column; align-items: center; }
.guide-case-pairs .case-glyph { font-size: 3rem; line-height: 1.3; color: var(--green); }
.guide-case-pairs small { margin-top: 0; font-size: .65rem; }
.guide-case-example > small { margin-top: 8px; }

[data-course-language] .question-display[lang="ka"], [data-course-language] .question-display[lang="hy"] { font-size: clamp(3rem, 7vw, 4.5rem); line-height: 1.35; }
[data-course-language] .answer-option > span[lang="ka"], [data-course-language] .answer-option > span[lang="hy"] { font-size: 2rem; line-height: 1.3; }
[data-course-language] .lesson-icon { font-size: 1.55rem; }
[data-course-language] .lesson-icon:lang(ka), [data-course-language] .lesson-icon:lang(hy) { overflow: hidden; }
.alphabet-reference { max-width: 1160px; margin: 0 auto; padding: 28px 24px 48px; }
.alphabet-reference .page-heading { margin-top: 24px; }
.alphabet-reference .letter-display-controls { justify-content: flex-start; }
.reference-intro, .reference-sources { margin: 20px 0; max-width: 850px; }
.alphabet-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: white; margin-block: 20px; }
.alphabet-table { border-collapse: collapse; width: 100%; min-width: 550px; }
.alphabet-table caption { text-align: left; padding: 16px; font-weight: 700; }
.alphabet-table th { text-align: center; }
.alphabet-table thead { background: #eef1ef; }
.alphabet-table td, .alphabet-table th { padding: 12px; border-bottom: 1px solid #e1e9e5; }
.alphabet-table td:nth-last-child(2) { min-width: 110px; text-align: center; }
.alphabet-table td:last-child { font-size: .85rem; min-width: 200px; }
.alphabet-table .reference-glyph { text-align: center; font-size: 2.2rem; line-height: 1.2; }
@media (max-width: 720px) {
    [data-course-language] .course-welcome .hero-copy { width: 100%; }
    .alphabet-hero-letters { opacity: .12; width: 50%; font-size: 6rem; }
    .guide-case-example { min-width: 0; width: 100%; }
    .alphabet-reference { padding: 20px 16px; }
}

/* Ukrainian upright Cyrillic uses a clear book face, with the same baseline aid. */
[data-course-language="ukrainian"] [lang="uk"] { font-family: "Georgia", "Times New Roman", serif; font-style: normal; }
[data-course-language="ukrainian"] .question-display[lang="uk"] { font-size: clamp(3rem, 7vw, 4.5rem); line-height: 1.35; }
[data-course-language="ukrainian"] .answer-option > span[lang="uk"] { font-size: 2rem; line-height: 1.3; }
[data-course-language="ukrainian"] .course-welcome .hero-copy { width: 62%; }
[data-course-language="ukrainian"] .course-welcome img { object-position: 72% 60%; mask-image: linear-gradient(90deg, transparent 25%, #000 74%); }
@media (max-width: 720px) {
    [data-course-language="ukrainian"] .course-welcome .hero-copy { width: 100%; }
    [data-course-language="ukrainian"] .course-welcome img { mask-image: none; opacity: .13; }
}

/* Written practice keeps the question, answer and keyboard close together. */
.typing-exercise,.order-exercise{max-width:780px;margin:12px auto 0}
.answer-label{display:block;font-size:.87rem;font-weight:700;margin:0 0 8px;color:var(--ink,#203b39)}
.typed-answer{box-sizing:border-box;width:100%;min-height:58px;padding:10px 16px;border:2px solid #c7d9d3;border-radius:12px;background:#fff;color:#203b39;font-family:inherit;font-weight:500;font-size:1.6rem;line-height:1.5;box-shadow:0 3px 0 #e0e9e5}
.typed-answer:focus{outline:3px solid #a9dacf;outline-offset:2px;border-color:#078570}
.typed-answer[lang=ar]{font-family:'Noto Naskh Arabic',serif;font-size:2rem}
.typed-answer[lang=ka],.typed-answer[lang=hy]{font-family:Sylfaen,serif}
.typing-help,.keyboard-mode-help{font-size:.8rem;line-height:1.5;color:#607973;margin:8px 0}
.keyboard-panel{background:#f5f8f6;border:1px solid #dce7e2;border-radius:12px;padding:10px 12px;margin-top:12px}
.keyboard-panel>summary{cursor:pointer;font-size:.87rem;font-weight:700;color:#26443d;padding:3px 0}
.keyboard-panel>summary span{font-weight:400;color:#607973;margin-inline-start:6px}
.keyboard-settings{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;font-size:.8rem}
.keyboard-settings select{font:inherit;border:1px solid #c6d8d1;border-radius:7px;background:#fff;padding:7px;color:#26443d;max-width:100%}
.sentence-answer{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:70px;background:#f7faf8;border:2px dashed #c6d8d1;border-radius:12px;padding:12px;margin-bottom:14px}
.sentence-placeholder{font-size:.95rem;color:#698079}
.word-bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:6px 0}
.word-token{display:inline-flex;gap:8px;align-items:center;justify-content:center;min-height:46px;background:white;border:1px solid #cbdcd5;border-bottom:3px solid #afc5ba;border-radius:9px;padding:8px 14px;color:#23403a;font:inherit;font-size:1.12rem;cursor:pointer}
.word-token[lang=ar]{font-family:'Noto Naskh Arabic',serif;font-size:1.45rem}
.word-token:hover:not(:disabled){background:#e7f4ed;border-color:#078570}
.word-token:focus-visible{outline:3px solid #078570;outline-offset:3px}
.word-token:disabled{opacity:.3;cursor:default}
.word-token.placed{background:#e5f1e9;border-color:#a5c9b8}
.word-token.placed:disabled{opacity:1}
.word-token kbd{font-size:.7rem;padding:2px 5px;min-width:0;box-shadow:none;border-bottom-width:1px}
.order-clear{display:block;margin:10px auto 0;font-size:.8rem}
.order-clear:disabled{opacity:.45}
.typed-answer.is-correct,.sentence-answer.is-correct{border:2px solid #068773;background:#f0faf4}
.typed-answer.is-incorrect,.sentence-answer.is-incorrect{border:2px solid #cf725c;background:#fff8f5}
.question-card:has(.typing-exercise) .question-prompt,.question-card:has(.order-exercise) .question-prompt{margin-block:14px;min-height:0;padding-block:0}
.question-card:has(.typing-exercise) .question-display.long,.question-card:has(.order-exercise) .question-display.long{font-size:1.65rem;line-height:1.6}
@media(max-width:600px){.typing-exercise,.order-exercise{margin-top:8px}.keyboard-panel{padding:8px}.word-token{padding:7px 10px}.sentence-answer{padding:9px;gap:6px}.question-card:has(.typing-exercise),.question-card:has(.order-exercise){padding:20px 16px}.typed-answer{font-size:1.3rem}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.written-question .question-prompt{margin-block:14px;min-height:0;padding-block:0}
.written-question .question-display,.written-question .question-display.long{font-size:1.65rem;line-height:1.65}
.written-question .question-display[lang=ar]{font-size:2.15rem}
.written-question .question-title{font-size:clamp(1.2rem,2.2vw,1.65rem);line-height:1.4;margin-bottom:12px}
.written-question .answer-option{min-height:64px}

.typed-answer::placeholder{font-family:system-ui,sans-serif;font-size:1rem;font-weight:400;color:#6a7e76}
.lesson-shell-new:has(.typing-exercise) .check-row{position:sticky;bottom:0;z-index:3;padding:12px 4px;background:#f7f9f6;border-top:1px solid #d9e5df;margin-top:14px}

.course-footer > a:only-child { margin-inline-start: auto; }

/* Latin-script courses keep full article sentences readable at every viewport. */
:is([data-course-language="italian"], [data-course-language="german"]) .question-display { font-family: inherit; font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.5; overflow-wrap: anywhere; }

.article-reference .reference-section { margin-block: 28px; }
.article-reference .reference-section > p { color: var(--muted); margin-block: 10px; }
.article-reference .alphabet-table { min-width: 560px; }

.article-exercise .typed-answer { max-width: 260px; }

/* Compact recorded pronunciation examples share the lesson's palette. */
.guide-audio-examples { display: flex; flex-wrap: wrap; gap: .5rem 1rem; grid-column: 1 / -1; }
.guide-audio-example { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.guide-audio-example > span[lang] { font-weight: 600; }
.guide-audio-example .audio-status { flex-basis: 100%; }
.guide-audio-example .audio-status:empty, .feedback-audio .audio-status:empty { display: none; }
.feedback-audio { display: flex; flex-wrap: wrap; gap: .5rem; }
.reference-recording { margin-top: .4rem; }
.reference-recording .audio-button { white-space: nowrap; }

/* Reference navigation stays usable without the interactive lesson runtime. */
@media (max-width: 720px) {
    .reference-mobile-nav { flex-wrap: wrap; justify-content: flex-start; }
    .reference-mobile-nav details { width: 100%; }
    .reference-mobile-nav summary { padding: 10px 9px; cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--green); }
    .reference-mobile-nav .reference-nav { padding: 0 9px 9px; }
}

/* Words and sentences use reading size; only letter specimens are enlarged.
   Arabic retains extra size for its connected forms and vowel marks. */
.guide-example .arabic:lang(ar) { font-family: var(--arabic); font-size: 2.6rem; line-height: 1.65; }
.guide-letter-example .arabic, .guide-letter-pair .arabic { font-size: 3rem; line-height: 1.4; }
.guide-letter-example .arabic:lang(ar), .guide-letter-pair .arabic:lang(ar) { font-size: 2.6rem; }
.guide-card.guide-phrase-card { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.guide-phrase-card .guide-example { min-width: 0; max-width: none; text-align: start; padding: 12px 16px; border-radius: 8px; background: var(--mint); }
.guide-phrase-card .guide-example .arabic { font-size: 1.2rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.guide-phrase-card .guide-example small { margin-top: 4px; }

/* Each native form and its English gloss stay in one independent reading unit. */
.guide-phrase-card .guide-example-pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; padding: 0; background: none; }
.guide-example-pair { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--mint); text-align: center; }
.guide-example-pair > [dir] { unicode-bidi: isolate; }
.guide-phrase-card .guide-example-pairs .arabic:lang(ar) { font-family: var(--arabic); font-size: 2.2rem; font-weight: 400; line-height: 1.5; }
.guide-example-pair .example-translation { font-size: .85rem; color: var(--ink); }

/* Every reference page keeps course navigation reachable while reading. */
@media (max-width: 720px) {
    .reference-layout .reference-mobile-nav { position: sticky; top: 0; z-index: 30; box-shadow: 0 2px 6px #00000008; }
    .reference-layout .reference-mobile-nav details[open] .reference-nav { max-height: 55vh; overflow-y: auto; overscroll-behavior: contain; }
    .reference-layout #reference-main { scroll-margin-top: 110px; }
}
@media print {
    .reference-layout { display: block; }
    .reference-layout > .sidebar, .reference-layout .reference-mobile-nav { display: none; }
}