/* Shared responsive contract for the learning catalogue. Loaded after course styles. */
:root { --learning-width:100vw; --learning-height:100dvh; --learning-gutter:clamp(16px,3vw,32px); color-scheme:light; }
html { scroll-padding-block:84px 100px; -webkit-text-size-adjust:100%; }
body { min-width:0; }
*, *::before, *::after { box-sizing:border-box; }
:where(button,a,input,select,summary) { touch-action:manipulation; }
:where(button,select,summary,[role=button]) { min-height:44px; }
:where(button,[role=button]) { min-width:44px; }
:where(input,select,textarea) { max-width:100%; font-size:16px; }
:where(h1,h2,h3,p,button,a,li) { overflow-wrap:anywhere; }
:where(button,a,select,summary):focus-visible { outline-offset:3px; }
:where(dialog) { max-width:calc(100% - 24px); max-height:calc(var(--learning-height) - 24px); overscroll-behavior:contain; scroll-padding-block:72px 20px; }
:where(dialog[open]) { scrollbar-gutter:stable; }
:where(.dialog-body,.lesson-content,.node-copy,.question-top>div,.feedback>div,.session-header>div) { min-width:0; }
:where(.primary,.cta,.check-answer) { min-height:52px; }

/* Langkah Ilmu: one scrolling lesson, persistent progress and a compact action bar. */
[data-learning-ui=path] .session-shell { min-height:var(--learning-height); display:flex; flex-direction:column; }
[data-learning-ui=path] .session-header { position:sticky; top:0; z-index:4; flex-shrink:0; width:100%; max-width:960px; margin:0 auto; padding: max(14px,env(safe-area-inset-top)) var(--learning-gutter) 14px; background:var(--paper); }
[data-learning-ui=path] .session-header :is(.close-btn,.book-btn) { min-width:44px; min-height:44px; flex-shrink:0; }
[data-learning-ui=path] .session-header>div { flex:1; }
[data-learning-ui=path] .dialog-header button { min-width:44px; min-height:44px; flex-shrink:0; }
[data-learning-ui=path] .session-label { gap:12px; }
[data-learning-ui=path] .quiz-page { flex:1; width:100%; margin:24px auto; padding-inline:var(--learning-gutter); }
[data-learning-ui=path] .learn-page { flex:1; width:100%; }
[data-learning-ui=path] .answer-footer { position:sticky; bottom:0; width:100%; margin:0; padding:14px max(var(--learning-gutter),env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)); }
[data-learning-ui=path] .feedback-panel { margin-top:22px; padding:20px; border:1px solid var(--line); border-radius:16px; scroll-margin-block:90px 110px; }
[data-learning-ui=path] .feedback-panel .feedback { max-width:none; }
[data-learning-ui=path] .feedback-panel p { font-size:15px; line-height:1.65; }
[data-learning-ui=path] .feedback-panel .text-btn { min-height:44px; font-size:13px; }
[data-learning-ui=path] .learn-actions { width:100%; max-width:960px; margin:0 auto; position:sticky; bottom:0; padding:14px var(--learning-gutter) max(14px,env(safe-area-inset-bottom)); background:var(--paper); border-top:1px solid var(--line); z-index:3; }
[data-learning-ui=path] .sidebar .brand-mark { width:38px; height:38px; flex:none; }
[data-learning-ui=path] .stats button { min-width:44px; min-height:44px; }
[data-learning-ui=path] :is(.course-link,.sources a,.text-btn,.prayer summary,.practice-index summary,.practice-reading summary) { min-height:44px; }
[data-learning-ui=path] .result { width:100%; margin:auto; }
[data-learning-ui=path] #notice { bottom:max(90px,env(safe-area-inset-bottom)); }
[data-learning-ui=path] .practice-navigation { position:sticky; bottom:-1px; padding:12px 0 max(12px,env(safe-area-inset-bottom)); margin-bottom:0; background:var(--paper); z-index:1; }
[data-learning-ui=path] :is(.prayer-picker button,.practice-modes button,.practice-index button) { min-height:44px; }

/* Chapter courses: cards must not shrink inside the scrolling flex column. */
[data-learning-ui=chapters] #wrap { height:var(--learning-height); }
[data-learning-ui=chapters] main { min-height:0; overscroll-behavior-y:contain; scroll-padding-block:16px 100px; padding-bottom:max(28px,env(safe-area-inset-bottom)); }
[data-learning-ui=chapters] main>* { flex-shrink:0; }
[data-learning-ui=chapters] :is(.opt,.hrow) { min-height:52px; line-height:1.6; }
[data-learning-ui=chapters] .cta { background:#5bbf5d; color:#fff; line-height:1.5; }
[data-learning-ui=chapters] .card:has(>.cta)>.cta { position:sticky; bottom:0; box-shadow:0 4px 0 #47a14a; }
[data-learning-ui=chapters] header { padding-top:max(12px,env(safe-area-inset-top)); }
[data-learning-ui=chapters] :is(.card,.body,.hud) { min-width:0; }
[data-learning-ui=chapters] .f-quizbird:has(.question-illustration) { gap:clamp(12px,3vw,22px); }
[data-learning-ui=chapters] .question-illustration { width:clamp(112px,36vw,180px); }
[data-learning-ui=reading] :is(.opt,.btn) { scroll-margin-block:150px 24px; }

/* Siaga keeps its 3D world; only its learning cards and path reflow here. */
[data-learning-ui=siaga] .learn-header { padding-top:max(16px,env(safe-area-inset-top)); flex-wrap:wrap; }
[data-learning-ui=siaga] .learn-header .brand img { width:38px; min-width:38px; }
[data-learning-ui=siaga] .lesson-stop>div { min-width:0; }
[data-learning-ui=siaga] .lesson-link { display:inline-flex; align-items:center; min-height:44px; padding-block:10px; }
[data-learning-ui=siaga] .learn-layout { padding-bottom:max(32px,env(safe-area-inset-bottom)); }
[data-learning-ui=siaga-game] dialog { color-scheme:light; max-height:calc(var(--learning-height) - 16px); scroll-padding-block:70px 90px; }
[data-learning-ui=siaga-game] :is(.choice,#practice,#check-answer) { min-height:52px; }
[data-learning-ui=siaga-game] .panel-actions { position:sticky; bottom:-20px; background:#f7f3e8; padding:14px 0 max(14px,env(safe-area-inset-bottom)); }
[data-learning-ui=siaga-game] .setting { flex-wrap:wrap; }

@media (max-width:720px) {
  [data-learning-ui=path] .sidebar { padding:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left)); gap:6px; }
  [data-learning-ui=path] .sidebar .nav-item { width:44px; height:44px; min-height:44px; flex-shrink:0; }
  [data-learning-ui=path] .brand { font-size:20px; letter-spacing:-1px; gap:4px; }
  [data-learning-ui=path] .map-layout { padding:18px var(--learning-gutter) max(28px,env(safe-area-inset-bottom)); }
  [data-learning-ui=path] .map-topline { flex-wrap:wrap; gap:6px; }
  [data-learning-ui=path] .stats { margin-left:auto; gap:8px; }
  [data-learning-ui=path] .hero { min-height:180px; padding:20px; }
  [data-learning-ui=path] .hero h1 { font-size:clamp(26px,6.5vw,34px); }
  [data-learning-ui=path] .hero-art { max-width:30%; }
  [data-learning-ui=path] .hero-copy>p:not(.eyebrow) { font-size:13px; }
  [data-learning-ui=path] .hero-chips span { font-size:10px; }
  [data-learning-ui=path] .path-intro p { font-size:12px; }
  [data-learning-ui=path] .lesson-node { margin-left:8px; max-width:calc(100% - 8px); gap:16px; }
  [data-learning-ui=path] .lesson-node.right { margin-left:32px; max-width:calc(100% - 32px); }
  [data-learning-ui=path] .node-track:before { left:39px; }
  [data-learning-ui=path] .node-copy b { font-size:14px; max-width:none; }
  [data-learning-ui=path] .node-copy>span:not(.start-label) { font-size:12px; max-width:none; }
  [data-learning-ui=path] .learn-page { padding-inline:var(--learning-gutter); margin-top:18px; }
  [data-learning-ui=path] .learn-visual { width:108px; margin-bottom:20px; }
  [data-learning-ui=path] :is(.principles p,.scenario p,.choice,.order-bank button,.order-answer button,.prayer .meaning) { font-size:15px; }
  [data-learning-ui=path] .question-top h1 { font-size:clamp(21px,5.5vw,26px); line-height:1.4; }
  [data-learning-ui=path] .question-top { gap:12px; margin-bottom:22px; }
  [data-learning-ui=path] .mini-buddy { width:48px; margin:0; }
  [data-learning-ui=path] .choice { padding:14px 12px; gap:12px; }
  [data-learning-ui=path] .choice>span:last-child { min-width:0; }
  [data-learning-ui=path] .answer-inner { gap:0; }
  [data-learning-ui=path] .answer-inner>.primary { font-size:15px; min-height:52px; }
  [data-learning-ui=path] .learn-actions p { display:none; }
  [data-learning-ui=path] .learn-actions .primary { width:100%; font-size:15px; }
  [data-learning-ui=path] .feedback-panel { padding:16px; }
  [data-learning-ui=path] .feedback-panel .feedback h2 { font-size:18px; }
  [data-learning-ui=path] dialog { width:calc(100% - 16px); max-width:none; border-radius:18px; }
  [data-learning-ui=path] .dialog-body { padding:20px 16px; }
  [data-learning-ui=path] .course-picker a { min-height:52px; }
  [data-learning-ui=path] .prayer-picker { flex-wrap:wrap; }
  [data-learning-ui=path] .practice-navigation button { flex:1; padding:12px 8px; }
  [data-learning-ui=chapters] header { gap:8px; padding-inline:16px; }
  [data-learning-ui=chapters] header h1 { font-size:20px; }
  [data-learning-ui=chapters] main { padding:18px 16px max(28px,env(safe-area-inset-bottom)); }
  [data-learning-ui=chapters] .card { padding:18px; }
  [data-learning-ui=chapters] .f-quizbird > span { width:64px; }
  [data-learning-ui=chapters] :is(.body,.opt,.ex) { font-size:15px; }
  [data-learning-ui=chapters] .mod { padding:14px; }
  [data-learning-ui=reading] header { position:static; padding-top:max(12px,env(safe-area-inset-top)); }
  [data-learning-ui=reading] main { padding-inline:16px; }
  [data-learning-ui=reading] .rail { max-width:100%; }
  [data-learning-ui=reading] :is(.opt,.q>p,.pts li,.paper) { font-size:15px; }
  [data-learning-ui=reading] .foot .btn { flex:1 1 100%; text-align:center; min-height:48px; }
  [data-learning-ui=siaga-game] dialog { width:calc(100% - 16px); padding:16px; border-radius:18px; }
  [data-learning-ui=siaga-game] :is(.choice,dialog p,dialog li) { font-size:15px; }
  [data-learning-ui=siaga-game] .panel-actions>* { flex:1 1 100%; text-align:center; }
}
@media (max-height:500px) and (min-width:480px) {
  [data-learning-ui=path] .session-header { padding-block:8px; }
  [data-learning-ui=path] .learn-page { margin-top:12px; grid-template-columns:100px minmax(0,1fr); gap:24px; }
  [data-learning-ui=path] .learn-visual { width:100px; top:78px; }
  [data-learning-ui=path] .quiz-page { margin-top:12px; }
  [data-learning-ui=path] .question-top { margin:12px 0; }
  [data-learning-ui=path] .mini-buddy { width:48px; }
  [data-learning-ui=path] .question-top h1 { font-size:22px; }
  [data-learning-ui=path] .answer-footer { padding-block:8px; }
  [data-learning-ui=path] .feedback-panel { scroll-margin-top:75px; }
  [data-learning-ui=path] .practice-layout { grid-template-columns:minmax(150px,32%) minmax(0,1fr); }
  [data-learning-ui=path] .practice-scene svg { max-height:160px; }
  [data-learning-ui=path] .practice-heading h2 { font-size:21px; }
  [data-learning-ui=path] .dialog-header { padding-block:4px; }
  [data-learning-ui=path] .practice-navigation { position:static; }
  [data-learning-ui=siaga-game] .panel-actions { position:static; }
  [data-learning-ui=reading] header { position:static; }
  [data-learning-ui=chapters] header { padding-block:6px; }
  [data-learning-ui=chapters] main { padding-top:12px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
[data-learning-ui=path] .feedback-correct { background:#e5edda; border-color:#b9cba5; }
[data-learning-ui=path] .feedback-wrong { background:#fff4e3; border-color:#f0dcbd; }
[data-learning-ui=path] .feedback-wrong .feedback :is(h2,p,.feedback-icon) { color:#7f5925; }
[data-learning-ui=path] :is(.session-header,.quiz-page,.learn-page,.learn-actions,.answer-footer) {
  padding-left:max(var(--learning-gutter),env(safe-area-inset-left));
  padding-right:max(var(--learning-gutter),env(safe-area-inset-right));
}

/* The catalogue contains one full-screen learning game. It keeps the same
 * viewport contract as the lesson interfaces while its own runtime positions
 * the HUD. The visual viewport matters here: mobile browser chrome and the
 * on-screen keyboard must not leave controls below the usable screen. */
[data-learning-ui=archery],
[data-learning-ui=archery] body,
[data-learning-ui=archery] body>div:first-child {
  width:100%;
  height:var(--learning-height)!important;
  min-width:0;
  min-height:320px;
  overflow:hidden;
  overscroll-behavior:none;
}
[data-learning-ui=archery] button { min-width:44px; min-height:44px; }

/* A tablet needs more room for the lesson than the desktop navigation rail
 * used to leave it. Keep the rail useful, but compress it before the phone
 * header takes over. */
@media (min-width:721px) and (max-width:900px) {
  [data-learning-ui=path] .sidebar { width:164px; padding-inline:10px; }
  [data-learning-ui=path] .sidebar .brand { font-size:20px; }
  [data-learning-ui=path] .series-label { margin-left:32px; letter-spacing:1.5px; }
  [data-learning-ui=path] .nav-item,
  [data-learning-ui=path] .course-link { padding-inline:8px; gap:8px; }
  [data-learning-ui=path] .course-link { font-size:11px; }
  [data-learning-ui=path] .course-link span { width:26px; height:26px; }
  [data-learning-ui=path] .map-layout { margin-left:164px; padding:24px; }
}

/* Large monitors should reveal more of the course instead of centring the old
 * 1600px desktop composition inside an ever-growing empty margin. */
@media (min-width:1600px) {
  [data-learning-ui=path] .app-shell { max-width:1920px; }
  [data-learning-ui=path] .sidebar { left:max(0px,calc((100vw - 1920px)/2)); width:260px; }
  [data-learning-ui=path] .map-layout {
    margin-left:260px;
    grid-template-columns:minmax(620px,1fr) minmax(270px,320px);
    gap:clamp(30px,3vw,54px);
    padding-inline:clamp(36px,4vw,72px);
  }
  [data-learning-ui=path] .map-main { max-width:none; }
  [data-learning-ui=path] .hero { min-height:clamp(240px,18vw,320px); }
  [data-learning-ui=reading] main,
  [data-learning-ui=reading] footer { max-width:1440px; }
  [data-learning-ui=chapters] .card,
  [data-learning-ui=chapters] .mod { width:min(820px,100%); }
}

/* Installed lessons use the available viewport, with one scrollable question
 * between the progress header and action bar. Long text, zoom and landscape
 * must never hide answers or require shrinking the reading text to fit. */
html[data-in-app] { scroll-padding-block:0; }
html[data-in-app][data-learning-ui=path] .session-shell:has(> .quiz-page) {
  --app-foot:calc(76px + env(safe-area-inset-bottom));
  position:relative; height:var(--learning-height,100dvh); min-height:0; max-width:none; overflow:hidden;
  display:flex; flex-direction:column;
}
html[data-in-app][data-learning-ui=path] .session-shell:has(> .quiz-page) .session-header {
  position:relative; max-width:none; gap:8px; padding:max(6px,env(safe-area-inset-top)) 8px 4px;
  padding-inline:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right));
}
html[data-in-app][data-learning-ui=path] .session-shell:has(> .quiz-page) .session-label { margin-bottom:5px; }
html[data-in-app][data-learning-ui=path] .quiz-page {
  flex:1 1 auto; min-height:0; width:100%; max-width:900px; margin:0 auto; overflow-y:auto;
  display:flex; flex-direction:column;
  padding:clamp(2px,1dvh,10px) max(16px,env(safe-area-inset-right)) 20px max(16px,env(safe-area-inset-left));
  overscroll-behavior-y:contain; scroll-padding-block:16px;
}
html[data-in-app][data-learning-ui=path] .quiz-page > * { flex-shrink:0; }
html[data-in-app][data-learning-ui=path] .quiz-page > .eyebrow { margin:0 0 clamp(2px,.8dvh,8px); font-size:10px; line-height:1.4; letter-spacing:.08em; }
html[data-in-app][data-learning-ui=path] .quiz-page > .quiz-context { margin:0 0 clamp(6px,1.2dvh,12px); padding:9px 12px; gap:9px; }
html[data-in-app][data-learning-ui=path] .quiz-page > .quiz-context p { font-size:13px; line-height:1.45; }
html[data-in-app][data-learning-ui=path] .question-top { margin:0 0 clamp(8px,2dvh,18px); gap:clamp(2px,.8dvh,8px); }
html[data-in-app] .question-illustration { width:auto; height:clamp(64px,14dvh,118px); aspect-ratio:310/240; }
html[data-in-app] .question-illustration svg { width:100%; height:100%; }
html[data-in-app] .session-shell[data-fit="1"] .question-illustration { height:clamp(52px,10dvh,80px); }
/* A compact Hud hud: his height follows the screen, his width his own proportions. */
html[data-in-app][data-learning-ui=path] .mini-buddy { width:auto; height:clamp(44px,11dvh,96px); aspect-ratio:322/396; margin:0; }
html[data-in-app][data-learning-ui=path] .mini-buddy .lesson-hudhud { width:100%; height:100%; }
html[data-in-app][data-learning-ui=path] .question-top h1 { font-size:clamp(20px,3dvh,26px); line-height:1.35; letter-spacing:-.3px; }
html[data-in-app][data-learning-ui=path] .question-top p { margin-top:clamp(2px,.6dvh,6px); font-size:12px; line-height:1.35; }
html[data-in-app][data-learning-ui=path] .choices { gap:clamp(6px,1.2dvh,10px); }
html[data-in-app][data-learning-ui=path] .choice {
  min-height:clamp(46px,8.2dvh,60px); padding:clamp(6px,1.1dvh,12px) 48px clamp(6px,1.1dvh,12px) 12px; gap:10px;
  font-size:16px; line-height:1.5;
}
html[data-in-app][data-learning-ui=path] .choice::after { right:12px; width:24px; height:24px; margin-top:-12px; }
html[data-in-app][data-learning-ui=path] .choice-key { min-width:26px; height:26px; font-size:12px; }
html[data-in-app][data-learning-ui=path] .order-answer { min-height:0; margin-bottom:clamp(8px,1.6dvh,14px); padding:8px; gap:6px; }
html[data-in-app][data-learning-ui=path] .order-answer > p { padding:6px 0; font-size:12px; }
html[data-in-app][data-learning-ui=path] .order-bank { gap:8px; }
html[data-in-app][data-learning-ui=path] :is(.order-answer,.order-bank) button { min-height:44px; padding:7px 12px; font-size:14px; line-height:1.3; }
/* "Baca kembali pelajaran" is the header's ▤ button in the app. */
html[data-in-app][data-learning-ui=path] .quiz-page > #hint { display:none; }

/* The action bar owns its space, including text wrapping and safe areas. */
html[data-in-app][data-learning-ui=path] .quiz-page ~ .answer-footer {
  position:relative; flex:none; z-index:6; margin:0; border-top:1px solid var(--line);
  padding:12px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
html[data-in-app][data-learning-ui=path] .quiz-page ~ .answer-footer .answer-inner { display:block; max-width:868px; margin-inline:auto; }
html[data-in-app][data-learning-ui=path] .quiz-page ~ .answer-footer .footer-reminder { display:none; }
html[data-in-app][data-learning-ui=path] .quiz-page ~ .answer-footer .primary { width:100%; min-height:52px; font-size:16px; }
/* The verdict: a bottom sheet over the (now locked) answers. */
html[data-in-app][data-learning-ui=path] .answer-footer.has-feedback {
  max-height:calc(100% - 56px); overflow-y:auto; overscroll-behavior:contain;
  border-radius:22px 22px 0 0; padding-top:18px; box-shadow:0 -8px 28px rgba(40,40,30,.16);
  animation:app-sheet .22s ease-out;
}
html[data-in-app][data-learning-ui=path] .quiz-page ~ .answer-footer.has-feedback { position:absolute; inset:auto 0 0; }
@keyframes app-sheet { from { transform:translateY(24px); opacity:.4; } }
html[data-in-app][data-learning-ui=path] .answer-footer.has-feedback .feedback { display:flex; gap:12px; max-width:none; margin:0 0 14px; }
html[data-in-app][data-learning-ui=path] .answer-footer.has-feedback .feedback-icon { min-width:30px; height:30px; font-size:18px; }
html[data-in-app][data-learning-ui=path] .answer-footer.has-feedback .feedback h2 { font-size:18px; line-height:1.25; margin-bottom:6px; }
html[data-in-app][data-learning-ui=path] .answer-footer.has-feedback .feedback p { font-size:14px; line-height:1.5; }
html[data-in-app][data-learning-ui=path] .answer-footer.has-feedback .feedback .answer-key { margin-bottom:6px; }
html[data-in-app][data-learning-ui=path] .answer-footer.has-feedback .feedback .text-btn { min-height:36px; padding:6px 0 0; font-size:13px; }
html[data-in-app][data-learning-ui=path] .answer-footer.is-wrong .feedback :is(h2,p) { color:#7a3a26; }
html[data-in-app][data-learning-ui=path] .answer-footer.is-wrong .feedback h2 { color:#c2552f; }

/* Compact artwork leaves more room on short screens without hiding context. */
html[data-in-app] .session-shell[data-fit="1"] .mini-buddy { height:clamp(34px,7dvh,60px); }

/* The lesson screens around the quiz fill the frame too (no card margins). */
html[data-in-app][data-learning-ui=path] .session-shell { max-width:none; }
html[data-in-app][data-learning-ui=path] .session-shell:has(> main.result) { min-height:var(--learning-height,100dvh); justify-content:center; }
html[data-in-app][data-learning-ui=path] main.result { padding:clamp(16px,4dvh,40px) 20px max(20px,env(safe-area-inset-bottom)); }
html[data-in-app][data-learning-ui=path] .app-done { background:#3fae5a; }
html[data-in-app][data-learning-ui=path] .app-done main.result > .text-btn { display:block; margin:14px auto 0; color:#fff; }

/* The other engines in the app (hudhud/app-path.mjs): the map is never shown — it stays
 * hidden while the next lesson is opened from it, and the page is revealed once
 * <html data-app-path="ready">. */
html[data-in-app][data-learning-path] #main:has(> button.mod) { visibility:hidden; }
html[data-in-app][data-learning-ui=siaga]:not([data-app-path=ready]) #app { visibility:hidden; }
html[data-in-app][data-learning-ui=reading] #rail { display:none; }
/* "← Peta bab" would only reopen the same chapter here. */
html[data-in-app][data-learning-path] #main .card:has(> .cta) > button.btn { display:none; }
.app-path-done {
  position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom)); text-align:center;
  background:#3fae5a; color:#fff; font-family:Outfit,system-ui,sans-serif;
}
.app-path-done-bird { width:clamp(96px,22dvh,160px); aspect-ratio:322/396; }
.app-path-done-bird svg { display:block; width:100%; height:100%; }
.app-path-done-eyebrow { margin:0; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.app-path-done h1 { margin:0; font-size:clamp(24px,4dvh,32px); line-height:1.2; font-weight:800; color:#fff; }
.app-path-done p { margin:0; max-width:340px; font-size:15px; line-height:1.5; color:rgba(255,255,255,.92); }
.app-path-done-btn {
  margin-top:14px; width:min(100%,360px); min-height:52px; border:0; border-radius:14px; background:#fff; color:#3b3833;
  font:800 16px/1.2 Outfit,system-ui,sans-serif; box-shadow:0 4px 0 rgba(0,0,0,.14); cursor:pointer;
}

/* Language paths share the viewport measurement, while keeping their own
 * lesson cards, word banks and home screen. Keyboard space is measured rather
 * than guessed from the device name. */
[data-learning-ui=language] #app[data-view=lesson] {
  max-width:760px; min-height:var(--learning-height); margin-inline:auto;
  padding-bottom:calc(120px + env(safe-area-inset-bottom));
}
[data-learning-ui=language][data-learning-keyboard] #app[data-view=lesson] {
  height:var(--learning-height); min-height:0; overflow-y:auto; overscroll-behavior-y:contain;
}
[data-learning-ui=language] :is(.cta-bar,.verdict) {
  width:min(760px,100%); bottom:var(--learning-bottom,0px);
  padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right));
}
[data-learning-ui=language] :is(.sheet,.verdict) { max-height:calc(var(--learning-height) - 24px); }
[data-learning-ui=language] .sheet { bottom:var(--learning-bottom,0px); }
[data-learning-ui=language] :is(.icon-btn,.say,.btn.small) { min-width:44px; min-height:44px; }
[data-learning-ui=language] :is(.l-bubble,.l-text,.pairs>*,.pics>*) { min-width:0; overflow-wrap:anywhere; }
[data-learning-ui=language] :is(.type-box,.opt,.pic,.tile) { scroll-margin-block:24px 130px; }
[data-learning-ui=language] .lesson { padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right)); }
[data-learning-ui=language] .overlay { justify-content:safe center; }
@media(max-width:370px) {
  [data-learning-ui=language] .l-bubble { padding:12px; font-size:16px; }
  [data-learning-ui=language] .l-bird { width:60px; }
}
@media(max-height:500px) {
  [data-learning-ui=language] .l-top { margin-bottom:10px; }
  [data-learning-ui=language] .l-bird { width:52px; }
  [data-learning-ui=language] .l-bubble { margin-bottom:12px; }
  [data-learning-ui=language] .speaker-row { margin-bottom:10px; align-items:center; }
  [data-learning-ui=language] .pic svg { max-height:80px; }
}