:root{color-scheme:light;--ink:#102f35;--muted:#586d73;--green:#075b53;--teal:#0b8577;--gold:#ffd478;--bg:#f1f5f7;--line:#d6e2e4;--paper:#fff;--radius:22px;font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:16px}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.48}button:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #dd8a00;outline-offset:4px}button,a{-webkit-tap-highlight-color:transparent}button{border:0}header{background:white;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}.top{max-width:1160px;margin:auto;display:flex;align-items:center;gap:12px;min-height:76px;padding:12px 24px}.brand{display:flex;align-items:center;gap:11px;flex:1;font-size:20px;font-weight:800}.mark{display:grid;place-items:center;background:var(--green);color:var(--gold);border-radius:13px;width:42px;height:44px;font:32px Georgia,serif}.badge{display:inline-block;border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:14px;font-weight:650}.top select{max-width:130px;padding:9px 8px;border:1px solid var(--line);border-radius:10px;background:white;font-size:16px}.layout{max-width:1160px;margin:28px auto 100px;padding:0 24px;display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:start}.sidebar{position:sticky;top:105px}.side-title{font-size:14px;letter-spacing:.05em;color:var(--muted);margin:0 12px 12px}.navbtn{display:flex;align-items:center;gap:12px;width:100%;padding:15px 16px;margin:5px 0;text-align:start;border-radius:12px;background:transparent;color:var(--ink);font-weight:650}.navbtn.active{background:var(--green);color:white}.navbtn svg{width:23px;height:23px;flex-shrink:0}.sidebar .mini{padding:20px;margin-top:26px;background:white;border:1px solid var(--line);border-radius:18px}.mini strong{font-size:25px}.mini p{font-size:14px;color:var(--muted);line-height:1.7}.main{min-width:0}h1,h2,h3,p{margin-top:0}h1{font-size:32px;line-height:1.65;margin-bottom:12px}h2{font-size:23px;line-height:1.6;margin-bottom:14px}h3{font-size:18px;line-height:1.7}.intro{background:var(--green);color:white;border-radius:var(--radius);padding:26px 28px;position:relative;overflow:hidden}.eyebrow{font-size:14px;font-weight:650;letter-spacing:.06em;color:#b4e4d6;margin-bottom:10px}.intro .eyebrow{color:var(--gold)}.intro p{color:#d6ece7;line-height:1.9;margin-bottom:20px}.intro .primary{background:var(--gold);color:#183e3e}.intro .intro-foot{display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap}.intro-foot span{font-size:14px;color:#d5e9e5}.primary,.secondary,.quiet,.danger{min-height:48px;border-radius:12px;padding:12px 20px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:9px;line-height:1.5;white-space:normal}.primary{background:var(--green);color:white}.secondary{background:#e7f3f0;color:var(--green);border:1px solid #c5e5dc}.quiet{background:transparent;color:var(--green);border:1px solid var(--line)}.danger{background:#ae3141;color:#fff}button svg{width:21px;height:21px;flex-shrink:0}.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-top:18px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:26px 0 12px}.section-head h2{margin:0}.subtle{color:var(--muted);font-size:14px;line-height:1.8}.goals{padding:0;list-style:none;margin:12px 0 0;display:grid;gap:13px}.goals li{display:flex;gap:12px;line-height:1.8}.goal-num{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;font-size:14px;color:var(--green);background:#e9f4ee}.arabic{direction:rtl;text-align:right;font-size:27px;line-height:2.05;font-family:"Geeza Pro","Noto Naskh Arabic",Tahoma,Arial,sans-serif;letter-spacing:0}.prompt{font-size:29px;margin:17px 0}.tabs{display:flex;gap:6px;background:#e1e9eb;border-radius:13px;padding:5px;margin:20px 0 14px}.tabs button{flex:1;padding:11px 8px;border-radius:10px;background:none;color:var(--muted);font-weight:650}.tabs button.selected{background:#fff;color:var(--green);box-shadow:0 1px 3px #102f3515}.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 13px;scrollbar-width:thin}.chip{white-space:nowrap;flex-shrink:0;min-height:43px;padding:8px 15px;border-radius:30px;background:white;border:1px solid var(--line);color:var(--muted)}.chip.selected{background:var(--ink);border-color:var(--ink);color:white}.activities{display:grid;gap:10px}.activity{display:flex;align-items:center;gap:14px;width:100%;text-align:start;padding:16px;background:white;border:1px solid var(--line);border-radius:16px}.activity:hover{border-color:var(--teal)}.activity-num{width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:#eff3f9;color:#526187;display:grid;place-items:center;font-weight:700;font-size:16px}.activity-content{flex:1;min-width:0}.activity-content .arabic{font-size:20px;line-height:1.8;margin-top:4px}.activity-content .skill{font-size:14px;font-weight:700;color:var(--green)}.status{font-size:13px;color:var(--muted);line-height:1.7}.status.passed{color:var(--green)}.status.pending{color:#936011}.divider{border:0;border-top:1px solid var(--line);margin:22px 0}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.spread{justify-content:space-between}.toolbar{margin-bottom:16px}.target{padding:16px 24px;background:#f0f6f8;border-radius:16px;margin:18px 0}.target .arabic{font-size:32px}.audio-box{background:#edf6f3;border:1px solid #c9e3db;border-radius:16px;padding:20px;margin:18px 0}.wave{display:flex;align-items:center;gap:4px;height:28px;direction:ltr}.wave i{width:4px;border-radius:3px;background:var(--teal);height:10px}.wave i:nth-child(2n){height:23px}.wave i:nth-child(3n){height:17px}.wave i:nth-child(4n){height:28px}.choices{display:grid;gap:12px;margin:22px 0}.option{width:100%;text-align:right;background:white;border:2px solid var(--line);border-radius:15px;padding:12px 18px;display:flex;align-items:center;gap:14px;direction:rtl}.option .arabic{flex:1}.option .radio{width:22px;height:22px;border:2px solid #afbdc2;border-radius:50%;flex-shrink:0}.option.selected{border-color:var(--green);background:#edf7f3}.option.selected .radio{border:6px solid var(--green)}.feedback{padding:18px;border-radius:13px;margin:16px 0;background:#e7f5ef;color:#075b53;line-height:1.8}.feedback.retry{background:#fff1df;color:#80551a}.feedback.pending{background:#edf1ff;color:#394c85}.field{width:100%;resize:vertical;min-height:120px;border:2px solid var(--line);border-radius:15px;padding:16px;font-size:26px;line-height:1.9;margin:14px 0;background:white;color:var(--ink)}.full{width:100%}canvas{display:block;max-width:100%;width:100%;height:240px;border:1px solid var(--line);border-radius:15px;touch-action:none;background:white}.recording{font-variant-numeric:tabular-nums;font-size:18px;color:#a22d3a;font-weight:700}.recording:before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#a22d3a;margin-inline-end:8px}audio{width:100%;margin:14px 0;height:45px}.meter{height:9px;border-radius:20px;background:#e3ecec;overflow:hidden;margin:13px 0}.meter>div{height:100%;background:var(--teal);border-radius:20px;transition:width .2s}.metric{font-size:40px;font-weight:800}.domain{display:grid;grid-template-columns:1fr auto;gap:12px;border-bottom:1px solid var(--line);padding:20px 0}.domain:last-child{border:0}.domain h3{margin:0}.domain button{grid-column:1/-1;justify-self:start}.rubric label{display:block;margin-top:18px}.rubric input{width:100%;accent-color:var(--green)}summary{cursor:pointer;min-height:44px;font-size:18px;font-weight:650;line-height:1.8}.dialogue-line{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.dialogue-line .arabic{flex:1;font-size:23px}.icon-btn{width:44px;height:44px;flex:0 0 44px;background:#edf6f3;color:var(--green);border-radius:50%;display:grid;place-items:center}.notice{font-size:14px;line-height:1.9;color:var(--muted);border-inline-start:3px solid #e8bb5e;padding-inline-start:14px;margin:15px 0}.settings-label{display:flex;gap:14px;align-items:center;line-height:1.7}.settings-label input{width:23px;height:23px;accent-color:var(--green)}.bottom{display:none}.loading{padding:70px 20px;text-align:center;font-size:22px}#toast{position:fixed;bottom:95px;left:50%;transform:translateX(-50%);z-index:20;max-width:90vw;width:max-content;padding:14px 20px;border-radius:14px;color:white;background:#163e44;box-shadow:0 8px 30px #102f3530;display:none;line-height:1.7}#toast.show{display:block}.review-evidence{background:#f6f8fa;padding:16px;border-radius:14px}.pill{font-size:14px;color:var(--green);background:#dff1e7;border-radius:8px;padding:6px 10px}.footer{font-size:13px;color:var(--muted);text-align:center;line-height:1.8;margin:25px 0}button:active{transform:translateY(1px)}
@media(max-width:760px){.top{padding:11px 16px;min-height:66px}.brand{font-size:18px}.top>.badge{display:none}.layout{display:block;margin:18px auto 100px;padding:0 16px}.sidebar{display:none}.intro{padding:21px}.intro h1{font-size:27px;line-height:1.9}.intro p{font-size:15px}.card{padding:20px}.main h2{font-size:21px}.bottom{display:flex;position:fixed;bottom:0;inset-inline:0;background:#ffffffed;backdrop-filter:blur(14px);padding:6px 8px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--line);z-index:10}.bottom button{flex:1;background:none;color:var(--muted);display:flex;align-items:center;flex-direction:column;gap:4px;font-size:13px;min-height:54px;padding:7px 4px;border-radius:10px}.bottom button.active{color:var(--green);background:#e6f4ef}.bottom button svg{width:23px;height:23px}.prompt{font-size:26px}.option .arabic{font-size:25px}.activity-content .arabic{font-size:19px}.toolbar .quiet{padding:8px 12px}.row>.primary,.row>.secondary{flex:1}.metric{font-size:35px}.card.activity-screen{padding:19px}.arabic{overflow-wrap:anywhere}.top select{max-width:108px}.intro-foot .primary{width:100%}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.learning-image{width:112px;height:112px;object-fit:cover;border-radius:18px;flex:0 0 112px;border:1px solid #e0e9e5;background:#f6f8f6}.activity-intro{display:flex;gap:20px;align-items:center;margin:18px 0}.activity-intro .prompt{flex:1;margin:0;min-width:0}.dialogue-visual{display:flex;justify-content:center;padding:20px 0 10px}.dialogue-visual .learning-image{width:145px;height:145px;flex-basis:145px}.activity.locked{opacity:1;background:#f1f4f5;border-color:#dce3e5;color:#738286;cursor:not-allowed}.activity.locked .activity-content .skill{color:#617378}.activity.locked .arabic{color:#6a7b80}.activity.locked .activity-num{background:#e3e9eb;color:#687e85}.activity.locked .activity-num svg{width:20px;height:20px}.sequence-notice{background:#eaf3ef;border-inline-start-color:var(--teal);padding:14px 16px;border-radius:10px;color:#235f55}.activity-screen #next:disabled{background:#dce5e5;color:#566b70;opacity:1}@media(max-width:760px){.activity-intro{gap:13px;align-items:flex-start}.learning-image{width:80px;height:80px;flex-basis:80px;border-radius:14px}.activity-intro .prompt{font-size:24px;line-height:2}.dialogue-visual .learning-image{width:120px;height:120px;flex-basis:120px}}@media(max-width:370px){.activity-intro{display:block}.activity-intro .learning-image{display:block;margin:0 auto 12px}}
/* Vocabulary stays compact so the Arabic word remains the focus. */
.word-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.word-card{border:1px solid var(--line);border-radius:16px;padding:16px;background:#fff;min-width:0}.word-head{display:flex;align-items:center;gap:10px}.word-image{width:64px;height:64px;object-fit:cover;flex:0 0 64px;border-radius:12px;background:#edf6f3}.word-text{flex:1;min-width:0}.word-text h3{font-size:24px;line-height:1.9;margin:0;overflow-wrap:anywhere}.word-translation{font-size:16px;line-height:1.65;margin:3px 0 0;overflow-wrap:anywhere}.word-head .icon-btn{width:40px;height:40px;flex-basis:40px}.example-label{margin:16px 0 0}.word-example{font-size:21px;line-height:1.9;margin:0 0 14px}.word-origin{margin:10px 0 0}.word-card button:disabled{opacity:1;color:var(--green);background:#edf6f3;border-color:#c5e5dc}.vocabulary-actions{margin-top:20px}.search-label{display:block;font-size:16px;margin:22px 0 8px}.word-search{width:100%;padding:13px;border:2px solid var(--line);border-radius:12px;min-height:48px;background:white;color:var(--ink);font-size:17px}.word-search:focus-visible{outline:3px solid #dd8a00;outline-offset:3px}.main>h1>svg{width:30px;height:30px;vertical-align:middle}.bottom button{font-size:14px;line-height:1.5}.layout{margin-bottom:140px}#toast{bottom:125px}@media(max-width:1000px){.word-grid{grid-template-columns:1fr}}@media(max-width:760px){.bottom button{min-width:0;overflow-wrap:anywhere}.word-card{padding:14px}.word-text h3{font-size:24px}.vocabulary-actions>*{width:100%}}@media(max-width:370px){.word-head{flex-wrap:wrap}.word-text{flex-basis:calc(100% - 80px)}}
/* Distinct section backgrounds keep lesson stages easy to identify. */
.goals-section{background:#edf8f0;border-color:#b7d9c2}.dialogue-section{background:#e7f2ff;border-color:#9fbfe6;border-inline-start:5px solid #3675bd}.vocabulary-section{background:#fff2cf;border-color:#e2c06d;border-inline-start:5px solid #b77909}.practice-section{background:#f1eaff;border:1px solid #cbb5e9;border-inline-start:5px solid #8450b4;border-radius:22px;padding:18px;margin-top:20px}.practice-section .section-head{margin-top:4px}.practice-section .tabs{background:#e5d8f5}.practice-section .activity.locked{background:#ece6f4}.word-card{background:#fffdf7;border-color:#dfcc96}.dialogue-section summary{color:#194c82}.vocabulary-section h2{color:#79500a}.practice-section>.section-head h2{color:#563578}.account-bar{max-width:1112px;margin:16px auto 0;padding:12px 18px;background:#e3f2ee;border:1px solid #b5d5ca;border-radius:12px;display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;font-size:14px;line-height:1.7}.account-link{background:transparent;color:var(--green);text-align:start;font-weight:650;max-width:100%;overflow-wrap:anywhere}.account-bar .sync-error{color:#922b28}.account-name{font-weight:700;font-size:21px;overflow-wrap:anywhere}.account-email{overflow-wrap:anywhere;text-align:start}.account-section{background:#e5f5ef;border-color:#9ccdb9}.account-section p{line-height:1.9}.account-section a,.auth-shell a{text-decoration:none}.legacy-import{padding:16px;border:1px solid #d3b573;border-radius:12px;background:#fff4d9;margin:20px 0}.auth-shell{max-width:520px;margin:8vh auto;padding:30px;border:1px solid var(--line);border-radius:24px;background:#fff}.auth-shell .mark{margin-bottom:24px}.auth-shell p{line-height:1.9}.auth-shell .primary{display:flex}.account-bar [hidden]{display:none!important}@media(max-width:760px){.account-bar{margin:12px 16px 0;padding:10px 14px}.practice-section{padding:14px}.auth-shell{margin:30px 16px;padding:24px}.account-bar .quiet{min-height:40px;padding:8px 12px}}
.thread-bubble{padding:1rem;border:1px solid #cbd5e1;border-radius:12px;background:#eff6ff;margin-block:12px;overflow-wrap:anywhere}.thread-bubble.thread-own{background:#f0fdf4;margin-inline-start:1rem}.thread-bubble p{white-space:pre-wrap}.thread-bubble small{color:#475569}[data-reply-form] textarea{display:block;width:100%;box-sizing:border-box;margin-block:10px;padding:12px;font:inherit;min-height:110px;border:1px solid #94a3b8;border-radius:10px}
.session-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px;margin:24px 0}.session-grid .card{margin:0}.support-box,.remediation-box,.arabic-keyboard{padding:16px;background:#f0f7f4;border:1px solid #c5ddd0;border-radius:14px;margin:16px 0}.remediation-box{background:#fff8e8;border-color:#ead4a0}.arabic-keyboard summary,.support-box summary,.remediation-box summary{cursor:pointer;padding:6px}.keyboard-keys{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;margin-top:12px}.keyboard-keys button{font-size:23px;min-height:44px;border:1px solid #c5ddd0;border-radius:8px;background:white;touch-action:manipulation}.keyboard-keys .space-key{grid-column:span 3;font-size:16px}.keyboard-keys button[data-key=delete]{grid-column:span 3;font-size:16px}.keyboard-keys button:focus-visible{outline:3px solid #126a58}
@media(max-width:480px){.keyboard-keys{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.arabic-keyboard{padding:10px}.keyboard-keys button{min-height:46px}}

/* Account learning rhythm */
.engagement-section{background:#edf8ff;border:1px solid #badbf2}.engagement-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}.engagement-metrics>div{display:flex;flex-direction:column;align-items:center;background:white;padding:14px 6px;border-radius:14px}.engagement-metrics strong{font-size:1.8rem;color:#124e78}.engagement-metrics span{font-size:.875rem;text-align:center}.achievement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.achievement{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px dashed #718591;border-radius:14px;background:#f3f5f7}.achievement.achieved{border:1px solid #cc9d2b;background:#fff7dc}.achievement>span{font-size:1.7rem;color:#765b00}.achievement small{font-size:.875rem}.spaced-quiz{background:#f0fafa}.spaced-quiz .choices{margin:20px 0}.spaced-quiz label.option{cursor:pointer}.spaced-quiz input[type=radio]{width:20px;height:20px;flex-shrink:0}.engagement-section h2{margin-bottom:4px}.engagement-section .row{flex-wrap:wrap}@media(min-width:800px){.achievement-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

.choice-with-sound{display:flex;align-items:center;gap:10px}.choice-with-sound>.option{flex:1;min-width:0;margin:0}.choice-with-sound>.icon-btn{flex-shrink:0;border:1px solid #bcd9d3;background:#e7f3ef;color:#245f55;width:48px;height:48px}.target{display:flex;align-items:center;justify-content:space-between;gap:12px}

.intro-video-section { background:#edf4fb; border:1px solid #cbdce9; }
.intro-video-section video { display:block; width:100%; max-height:440px; margin:16px auto; border-radius:16px; background:#101c25; }
.intro-video-section .row { flex-wrap:wrap; }
.intro-video-section [role="status"] { line-height:1.8; }
.intro-video-section [hidden], .main > [hidden] { display:none!important; }

.illustrated-dictionary-link{border-inline-start:5px solid #bda052;background:#edf5f8}.illustrated-dictionary-link h2{display:flex;align-items:center;gap:10px}.illustrated-dictionary-link h2 svg{width:28px;height:28px;flex:none}.illustrated-dictionary-link a.primary{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:48px;white-space:normal}.illustrated-dictionary-link .row{flex-wrap:wrap}

/* Keep all learning destinations accessible without crowding phone controls. */
.navigation a{text-decoration:none}
@media(max-width:900px){
.bottom{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;justify-content:flex-start}
.bottom button,.bottom a{flex:0 0 88px;min-width:88px;min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px 5px;border-radius:10px;background:none;color:var(--muted);font-size:14px;line-height:1.4;text-align:center;text-decoration:none;font-weight:650}
.bottom a svg{width:23px;height:23px;flex-shrink:0}
.layout{margin-bottom:140px}
}

/* Completed lesson sections keep a visible, keyboard-accessible review header. */
.lesson-panel-heading{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;min-height:48px;padding:4px 0;color:inherit}
.lesson-panel-heading::-webkit-details-marker{display:none}
.lesson-panel-heading::marker{content:''}
.lesson-panel-title{flex:1;min-width:0;font-size:1.2rem;font-weight:750;line-height:1.8}
.lesson-panel-done{color:#126342;background:#e0f3e9;border-radius:30px;padding:4px 10px;font-size:.8rem;white-space:nowrap}
.lesson-panel-arrow{font-size:1.7rem;line-height:1;width:30px;text-align:center;flex:none;transition:transform .15s}
.lesson-panel[open] > .lesson-panel-heading .lesson-panel-arrow{transform:rotate(180deg)}
.lesson-panel-heading:focus-visible{outline:3px solid #087d72;outline-offset:5px;border-radius:8px}
.lesson-panel-body{padding-top:18px}
.lesson-panel-complete{margin-top:18px}
.lesson-panel:not([open]){margin-bottom:0}
@media(max-width:540px){.lesson-panel-heading{gap:7px;flex-wrap:wrap}.lesson-panel-title{font-size:1.05rem}.lesson-panel-done{font-size:.72rem;padding:3px 7px}}
@media(prefers-reduced-motion:reduce){.lesson-panel-arrow{transition:none}}
.level-achievement-notice{border:1px solid #b6a475;background:#f3f8ec;border-inline-start:5px solid #2d6a4f}.level-achievement-notice h2{color:#24533f}.level-achievement-notice .row{flex-wrap:wrap}.level-achievement-notice a{text-decoration:none}

.structures-section{background:#e9f5f3;border-inline-start:5px solid #15766c}.structure-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}.structure-grid article{background:white;border:1px solid #bcd9d2;border-radius:16px;padding:18px}.structure-grid h3{font-size:27px;line-height:1.9}.structure-grid .quiet{margin:8px}.dialogue-section>div>.learning-image{width:180px;height:120px;object-fit:cover;border-radius:14px}


/* Reusable exercise patterns, adapted to a narrow phone viewport. */
.pattern-panel{margin:18px 0;padding:18px;border-radius:20px;background:#eef6f3;border:1px solid #cadfd6}.pattern-panel h2{font-size:18px;margin:0 0 14px;color:#205a50}.pattern-panel mark{color:#b42643;background:#fff0dc;border-radius:4px;padding:0 2px}.pattern-caption{font-size:25px}.pattern-table-wrap{overflow:auto}.pattern-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px}.pattern-table th,.pattern-table td{padding:12px 8px;border:1px solid #d4e3dd;text-align:center}.pattern-table th{font-size:14px;background:#dceee6}.pattern-table .arabic{font-size:28px}.pattern-table .glyph{color:#b42643}.pattern-model{padding:15px;background:#fff9e9;border-inline-start:4px solid #d79d37;border-radius:12px}.pattern-model p{font-size:28px;margin:8px 0}.pattern-cues,.pattern-syllables,.pattern-trace-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}.pattern-cues>span.arabic{background:#fff;padding:10px 18px;border-radius:10px;font-size:27px}.pattern-syllables>div{display:flex;gap:12px;align-items:center;background:#fff;padding:14px;border-radius:14px}.pattern-syllables strong,.pattern-trace-head span{font-size:38px}.pattern-trace-head>span{flex:1;text-align:center;background:#fff;border-radius:10px;padding:10px}.activity-screen:has(.pattern-visual-choice) .activity-intro,.activity-screen:has(.pattern-picture-repeat) .activity-intro{display:block}.activity-screen:has(.pattern-visual-choice) .activity-intro img,.activity-screen:has(.pattern-picture-repeat) .activity-intro img{width:min(100%,320px);height:auto;max-height:260px;object-fit:contain;display:block;margin:0 auto 18px}.activity-screen:has(.pattern-letter-trace) #writing{height:360px}.trace-print{display:none}.adm-details label{display:block;margin:10px 0}.adm-details label input,.adm-details label textarea{display:block;width:100%;border:1px solid #d2dfda;border-radius:8px;padding:9px;margin-top:5px}.adm-section-head select{max-width:250px;padding:8px;border:1px solid #cbdcd4;border-radius:9px}.adm-editor-actions{flex-wrap:wrap}
@media(max-width:520px){.pattern-panel{padding:12px}.pattern-table th,.pattern-table td{padding:9px 4px}.pattern-table .arabic{font-size:25px}.pattern-syllables>div{padding:10px}.pattern-trace-head span{font-size:30px}.activity-screen:has(.pattern-letter-trace) #writing{height:330px}}
@media print{body:has(.pattern-letter-trace){background:white!important}body:has(.pattern-letter-trace) header,body:has(.pattern-letter-trace) aside,body:has(.pattern-letter-trace) nav,body:has(.pattern-letter-trace) button,body:has(.pattern-letter-trace) canvas,body:has(.pattern-letter-trace) .cloud-notice,body:has(.pattern-letter-trace) .toolbar,body:has(.pattern-letter-trace) main>details,body:has(.pattern-letter-trace) .activity-intro img{display:none!important}body:has(.pattern-letter-trace) .layout{display:block}body:has(.pattern-letter-trace) .main{max-width:none;width:100%;padding:0}.pattern-letter-trace{break-inside:avoid;background:white;border:0}.trace-print{display:grid;grid-template-columns:repeat(var(--trace-cols),1fr);margin-top:20px}.trace-print span{font-family:serif;font-size:64px;min-height:110px;text-align:center;border:1px solid #aaa;padding:12px}.trace-print .guide{color:#d0d0d0;-webkit-text-stroke:.3px #aaa}.pattern-trace-head{display:none}}

.dashboard-metrics,.dashboard-skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.dashboard-metrics article,.dashboard-skills article{padding:18px;border:1px solid var(--line);border-radius:16px;background:#f8fcfb;min-width:0}.dashboard-metrics strong{font-size:32px;color:var(--green)}.dashboard-skills h4{font-size:20px;margin:0}.compare-bars{display:grid;gap:12px;margin:16px 0;font-size:14px}.compare-track{height:12px;border-radius:12px;background:#e1eaea;margin-top:5px;overflow:hidden}.compare-track i{display:block;height:100%;background:#087b69;border-radius:12px}.compare-track.peer i{background:#587ca8}.learning-dashboard .subtle{font-size:14px;line-height:1.8}@media(max-width:600px){.dashboard-metrics,.dashboard-skills{grid-template-columns:1fr}}

.lesson-translation{display:block;font-size:16px;font-weight:400;line-height:1.7;color:#526a64;margin-top:8px;font-family:Arial,sans-serif}

/* Core path additions retain both existing interface themes. */
.route-summary { border-inline-start: 4px solid var(--primary, #26756a); }
.route-label { font-weight: 700; margin-block: 12px; }
.route-rubric { margin-block: 12px; padding: 12px; border: 1px solid currentColor; border-radius: 12px; }
.route-rubric summary { min-height: 44px; cursor: pointer; }
.route-summary button, [data-route] { min-height: 44px; }
button:focus-visible, summary:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid #126eb5; outline-offset: 3px; }

/* Keep focused task controls clear of the fixed mobile navigation. */
html{scroll-padding-block:110px calc(160px + env(safe-area-inset-bottom))}
#record,#beginner-demo-start,#submit{scroll-margin-block:110px calc(160px + env(safe-area-inset-bottom))}
.beginner-demo li{margin-block:8px}.recording-next-step{font-weight:700}
@media(max-width:760px){.activity-screen{padding-bottom:calc(28px + env(safe-area-inset-bottom))}.layout{margin-bottom:calc(180px + env(safe-area-inset-bottom))}}
/* Explicit task visuals never use the legacy cropped thumbnail presentation. */
.task-visual{margin:20px 0;text-align:center}.task-visual-image{display:block;width:100%;height:auto;max-width:840px;object-fit:contain;margin:0 auto 12px;border:1px solid var(--line);border-radius:14px;background:white}.image-choices{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));align-items:start}.image-choice{display:grid;gap:8px}.image-choice>.option{display:flex;flex-direction:column;align-items:center;padding:14px;gap:10px;overflow:hidden}.choice-picture{display:block;width:100%;height:auto;object-fit:contain;background:white}.image-choice-number{font-size:16px;font-weight:700}.image-choice-open{font-size:14px;text-align:center}.image-choice input{width:22px;height:22px;accent-color:var(--green)}.visual-accommodation{font-size:14px;line-height:1.8}.visual-status:empty{display:none}@media(max-width:600px){.image-choices{grid-template-columns:1fr}.task-visual-image{border-radius:10px}}
/* Optional pronunciation feedback shares the classic and modern learner styles. */
.pronunciation-pilot{margin-block:20px;padding:16px;border:1px solid var(--line,#c8d5d0);border-radius:14px;overflow-wrap:anywhere}
.pronunciation-pilot h2{font-size:1.15rem;margin-block:0 12px}.pronunciation-pilot p{line-height:1.75}
.pronunciation-consent{display:flex;align-items:flex-start;gap:12px;padding-block:12px;line-height:1.7;cursor:pointer}.pronunciation-consent input{flex:none;width:24px;height:24px;margin-block-start:3px;accent-color:var(--green,#26756a)}
.pronunciation-actions{flex-wrap:wrap;margin-block:12px}.pronunciation-actions button{min-height:44px;white-space:normal}.pronunciation-pilot audio{max-width:100%;width:100%;margin-block:10px}.pronunciation-status{line-height:1.75;margin-block:12px}.pronunciation-metrics{display:flex;flex-wrap:wrap;gap:16px}.pronunciation-metrics>div{min-width:100px}.pronunciation-metrics dd{margin:4px 0;font-weight:700;direction:ltr;unicode-bidi:isolate}.pronunciation-pilot :focus-visible{outline:3px solid #126eb5;outline-offset:3px}
@media(max-width:600px){.pronunciation-actions{align-items:stretch;flex-direction:column}.pronunciation-actions button{width:100%}.pronunciation-pilot{padding:12px}}

.lexical-eligibility{min-inline-size:0;margin-block:12px;padding:12px;border:1px solid var(--line,#c8d5d0);border-radius:10px}.lexical-eligibility legend{padding-inline:6px}.lexical-eligibility .pronunciation-consent{margin:0}

/* Reversible contextual dictionary pilot. No selectors touch exercise answers. */
.contextual-word{font:inherit;color:inherit;background:transparent;border:0;border-bottom:2px dotted currentColor;border-radius:4px;padding:5px 3px;min-height:44px;cursor:pointer;line-height:1.6}
.contextual-word:hover,.contextual-word:focus-visible{background:#e6f3ef;outline:2px solid #197d71;outline-offset:2px}
.contextual-dialog{box-sizing:border-box;border:1px solid #c9d9d4;border-radius:20px;padding:0;width:min(92vw,460px);max-width:calc(100vw - 24px);max-height:85vh;max-height:85dvh;overflow:hidden;color:#173f36;background:#fff;box-shadow:0 20px 70px #0004;text-align:start}
.contextual-dialog[open]{display:flex;flex-direction:column}
.contextual-header{display:flex;align-items:center;gap:12px;flex:none;padding:16px 22px;border-bottom:1px solid #e1ebe7}
.contextual-header h2{min-width:0;margin:0;overflow-wrap:anywhere}
.contextual-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 22px 22px;overflow-wrap:anywhere}
.contextual-dialog::backdrop{background:#112b2466}
.contextual-dialog button{min-height:44px;max-width:100%;white-space:normal}
.contextual-close{display:block;flex-shrink:0;margin-inline-start:auto}
.contextual-dialog h2{font-size:1.15rem}.contextual-dialog h3{font-size:1.6rem;margin:8px 0}
.contextual-label{font-size:.85rem;color:#516b62;margin:16px 0 4px}.contextual-surface{font-size:1.6rem;margin:4px 0}.contextual-sentence{font-size:1.1rem}.contextual-meaning{font-size:1.15rem}
.contextual-image{display:block;width:min(100%,220px);height:auto;border-radius:14px;margin:14px auto;object-fit:contain}
.contextual-save{display:block;width:100%;margin-top:20px}.contextual-dialog [role=status]:empty{display:none}

.structure-model-image .learning-image{display:block;width:100%;max-width:720px;height:auto;object-fit:contain;margin-inline:auto}.structure-model-image:empty{display:none}
.reading-paragraph{align-items:flex-start!important;background:transparent!important;border-radius:0!important;padding-block:16px!important;border-bottom:1px solid #e0e7df}.reading-paragraph>.arabic{line-height:2.2!important;font-size:1.25rem}.reading-paragraph .icon-btn{flex-shrink:0}

/* Additional illustration is inactive in both retained interfaces. */
.warm-only,.warm-hero-art,.warm-level-art{display:none}.warm-hero-copy{display:contents}

/* The Quran course is in admin preview; learners have a visible inactive entry. */
.quran-nav-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#164f43;text-decoration:none;line-height:1.6;padding:8px 12px;font-weight:650}.quran-nav-link svg{width:24px;height:24px;flex-shrink:0}.quran-nav-link small{display:block;font-size:11px;font-weight:400}.quran-nav-link[aria-disabled="true"]{color:#69736b;cursor:not-allowed}.quran-nav-link:focus-visible{outline:3px solid #a77f2f;outline-offset:3px;border-radius:8px}.quran-desktop-entry{padding-bottom:18px}.quran-desktop-entry .quran-nav-link{display:inline-flex}.bottom .quran-nav-link,.guest-bottom .quran-nav-link{flex:0 0 104px;min-width:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;text-align:center;line-height:1.5;padding:6px}.guest-bottom{overflow-x:auto}@media(max-width:760px){.quran-desktop-entry{display:none}}

@media(max-width:900px){:root#learning-site[data-learning-ui="modern"] #app .bottom:has(.quran-nav-link){grid-template-columns:repeat(5,minmax(52px,1fr)) minmax(104px,1.4fr);overflow-x:auto}:root#learning-site[data-learning-ui="modern"] #app .bottom .quran-nav-link{min-width:0;color:#e0e9df}:root#learning-site[data-learning-ui="modern"][data-site-design="warm"] #app .bottom .quran-nav-link,:root#learning-site[data-learning-ui="modern"][data-site-design="navy"] #app .bottom .quran-nav-link{color:#69736b}:root#learning-site[data-learning-ui="modern"] .quran-desktop-entry{display:none}}

@media(max-width:900px){:root#learning-site .guest-bottom:has(.quran-nav-link){display:flex;overflow-x:auto;justify-content:flex-start}:root#learning-site .guest-bottom:has(.quran-nav-link)>:is(button,a){flex:0 0 82px;min-width:82px}:root#learning-site[data-learning-ui="modern"] .guest-bottom .quran-nav-link{color:#e0e9df}:root#learning-site[data-learning-ui="modern"][data-site-design="warm"] .guest-bottom .quran-nav-link,:root#learning-site[data-learning-ui="modern"][data-site-design="navy"] .guest-bottom .quran-nav-link{color:#69736b}}

/* Compact static playback hint; no timers, requests or audio preload. */
.audio-listen-control{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;flex:0 0 auto;min-width:0;max-width:100%;vertical-align:middle}
.audio-listen-control>audio{max-width:100%;min-width:0}
.audio-delay-note{display:block;margin:0;font:400 .6875rem/1.4 system-ui,sans-serif!important;letter-spacing:0;color:inherit;opacity:.8;white-space:nowrap;text-align:center;direction:ltr}
.audio-listen-control>button{flex-shrink:0}
.audio-listen-control:has(>audio){width:100%;align-items:stretch}
.dialogue-line>.arabic{min-width:0}
.dialogue-line>.audio-listen-control{width:4rem}
.contextual-body>button+.audio-delay-note{margin-block:.2rem .6rem;text-align:start}

/* Shared, non-translated site identity; interface translations remain separate. */
.brand-text{display:block;min-width:0}.brand-caption{display:block;font-size:12px;font-weight:400;line-height:1.65;margin-top:3px;white-space:normal;letter-spacing:0}.brand .mark{flex-shrink:0}.brand .brand-text{max-width:270px}@media(max-width:760px){.top{flex-wrap:wrap}.top .brand{min-width:190px}.brand-caption{font-size:11px}}

/* The learner sees one required frontier; the full bank remains admin-only. */
.guided-learning{display:grid;gap:20px}.guided-current{padding:20px;border:1px solid var(--border,#d8ded5);border-radius:18px;display:grid;gap:16px}.guided-current h3{margin:0}.guided-progress{margin-block:16px;display:grid;gap:10px}.guided-progress p{margin:0}.guided-progress progress{width:100%;height:12px;accent-color:#244f43}.guided-review,.guided-optional{border-block-start:1px solid #d8ded5;padding-block-start:16px}.guided-learning summary{cursor:pointer;min-height:48px;font-weight:700}.guided-learning .activity-content>.arabic{display:block}.guided-learning .activities{margin-block-start:12px}

.guided-admin-bank>summary{cursor:pointer;min-height:48px;font-weight:700;display:flex;align-items:center;gap:12px}.guided-admin-bank>summary::before{content:"+"}.guided-admin-bank[open]>summary::before{content:"−"}.guided-admin-bank .practice-section{margin-block-start:20px}

/* Core training card presentation; status remains physical left in RTL and LTR. */
.activity.guided-activity-card{display:block}
.activity.guided-activity-card.has-status{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;direction:ltr;align-items:center}
.guided-activity-card.has-status>.activity-content{grid-column:2;grid-row:1}
.guided-activity-card>.activity-content{display:block;text-align:start;min-width:0;overflow-wrap:anywhere}
.activity-skill-heading{display:flex;align-items:center;gap:8px}
.activity-skill-heading>span:last-child{min-width:0}
.activity-skill-icon{display:inline-flex;flex:0 0 24px;width:24px;height:24px;align-items:center;justify-content:center}
.activity-skill-icon svg{width:24px;height:24px}
.guided-activity-card .arabic{display:block;direction:rtl;text-align:right}
.guided-activity-card .status{display:block;margin-block-start:8px;font-weight:700}
.guided-activity-card .status.passed{color:#246447}
.guided-activity-card .status.retry{color:#A13F23}
.guided-activity-card .status.pending{color:#88610C}
.activity-status-mark{grid-column:1;grid-row:1;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;direction:ltr}
.activity-status-mark svg{width:30px;height:30px;stroke-width:2}
.activity-status-mark.passed{color:#246447;background:#E9F4EC}
.activity-status-mark.retry{color:#A13F23;background:#FFF0E8}
.activity-status-mark.pending{color:#88610C;background:#FFF5D8}
@media(max-width:420px){.activity.guided-activity-card.has-status{grid-template-columns:44px minmax(0,1fr);gap:12px}.activity-status-mark{width:44px;height:44px}.activity-status-mark svg{width:27px;height:27px}}

/* Metadata follows the learner's language; Arabic examples remain isolated. */
.localized-instructions{padding-inline-start:1.4em;padding-inline-end:0;text-align:start;line-height:1.8;overflow-wrap:anywhere}.instruction-copy{unicode-bidi:isolate;text-align:start;font-family:system-ui,sans-serif;line-height:1.8}.instruction-copy[lang=ar],.instruction-copy[lang=fa],.instruction-copy[lang=ur]{line-height:2}.instruction-copy[lang=zh]{line-break:strict;word-break:normal}.instruction-copy bdi{font-family:inherit;white-space:normal}.goals.localized-instructions{padding-inline-start:0}.goals.localized-instructions li{align-items:flex-start}.goals.localized-instructions .instruction-copy{flex:1;min-width:0}.goals.localized-instructions .goal-num{flex-shrink:0;align-self:flex-start}