/* Older cached HTML must also receive the current app's language styles. */
@import url('./i18n/runtime.css');
@import url('./i18n/help-panel.css');

/* The card owns both columns: legacy cover rules cannot squeeze its copy. */
.workflow-launch{grid-template-areas:"copy art";grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);isolation:isolate}
.workflow-launch .feature-copy{grid-area:copy;min-width:0;width:100%}
.workflow-launch .feature-world{grid-area:art;min-width:0;width:100%}
.workflow-launch .feature-title{overflow-wrap:break-word;text-wrap:balance}
.workflow-launch .feature-description{max-width:52ch;overflow-wrap:break-word}
.feature-cta{max-width:100%;white-space:normal;line-height:1.4}
.feature-cta .icon{flex-shrink:0}
.workflow-launch .feature-world>.lesson-world{overflow:hidden}

.subject-art{display:block;width:92px;height:92px;flex:none;object-fit:contain;filter:drop-shadow(0 5px 4px #182c2224);transition:transform .22s ease,filter .22s ease;pointer-events:none}
.subject-picker{max-width:none}
.workflow-subjects h2{scroll-margin-top:24px}
:is(.workflow-subjects,.workflow-subject-select,.library-page) .subject-picker button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:10px;min-width:0;min-height:184px;padding:26px 14px 16px;border-radius:24px;border:1px solid #dcd6e4;background:linear-gradient(145deg,#fff 5%,#fcfbff 64%,#f0edf7);box-shadow:inset 0 1px 1px #fff,0 2px 3px #3020440a,0 9px 20px #3020440c;overflow:hidden}
.subject-picker .subject-copy{display:flex;flex-direction:column;justify-content:flex-start;gap:6px;flex:none;min-width:0;width:100%}
.subject-picker .subject-copy strong{font-size:17px;line-height:1.32;letter-spacing:-.02em;overflow-wrap:break-word;text-wrap:balance}
.subject-picker .subject-copy small{display:block;font-size:12px;line-height:1.4;margin:0;color:#736c80}
.subject-picker .subject-direction{position:absolute;inset:10px 10px auto auto;display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--control-edge);border-radius:50%;background:var(--control-top);color:var(--control-ink);pointer-events:none}
.subject-picker .subject-direction>.icon{display:block;width:15px;height:15px;flex:none;position:static;transform:none;margin:0;opacity:1}
.subject-picker button[aria-pressed="true"] .subject-direction{background:var(--deep);border-color:var(--deep);color:#fff}
:is(.workflow-subjects,.workflow-subject-select,.library-page) .subject-picker button[aria-pressed="true"]{border-color:#9f8ab9;background:linear-gradient(145deg,#fff,#f4eefb 72%,#e9e0f4);box-shadow:inset 0 1px 1px #fff,0 0 0 2px #a791c224,0 8px 18px #4e326015}
.subject-heading{display:flex;align-items:center;gap:18px;min-width:0}
.subject-heading .subject-art{width:76px;height:76px}
.subject-heading>span{min-width:0;overflow-wrap:break-word;text-wrap:balance}
.workflow-subject-select summary{display:flex;align-items:center;gap:8px}
.workflow-subject-select .subject-picker{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Shallow rims and contact shadows replace the solid extruded slabs. */
:root{--action-top:#926cda;--action-bottom:#7050b5;--action-edge:#62429e;--action-shadow:#4c34782b;--control-top:#fff;--control-bottom:#f4f1f9;--control-edge:#d8d1e3;--control-ink:#514363}
[data-theme="academy"]{--action-top:#39735c;--action-bottom:#245340;--action-edge:#1d4637;--action-shadow:#153c3028;--control-top:#fffdf6;--control-bottom:#f4f0e4;--control-edge:#d9cdb0;--control-ink:#305445}
:root :is(.primary,.lesson-focus .primary,.journal-dialog .primary,.journal-library .primary,.workflow-launch .feature-cta){background:linear-gradient(165deg,var(--action-top),var(--action-bottom));border:1px solid var(--action-edge);box-shadow:inset 0 1px 1px #ffffff6b,inset 0 -1px 1px #00000015,0 2px 2px var(--action-shadow),0 7px 15px var(--action-shadow);color:#fff;line-height:1.45;white-space:normal;overflow-wrap:break-word;min-width:0}
:is(.quiet,.lesson-focus .quiet,.catalog-preview .preview-control){background:linear-gradient(160deg,var(--control-top),var(--control-bottom));border:1px solid var(--control-edge);box-shadow:inset 0 1px 1px #fff,0 2px 3px #20152d08,0 5px 10px #20152d08;color:var(--control-ink);line-height:1.45;white-space:normal;min-width:0}
.catalog-preview .lesson-tile{box-shadow:inset 0 1px 0 #fff,0 2px 4px #3627480a,0 10px 24px #36274810;border:1px solid #e1dce8}
.catalog-preview .lesson-state{position:static;align-self:flex-start;max-width:100%;min-height:28px;font-size:11px;padding:5px 9px;background:var(--control-bottom);color:var(--control-ink);border:1px solid var(--control-edge);box-shadow:none}
.catalog-preview .saved .lesson-state{background:#edf7f0;border-color:#c7dfd0;color:#295d40}
.lesson-card-copy>strong{max-width:100%;overflow-wrap:break-word}
.catalog-preview .preview-control{display:flex;align-items:center;justify-content:center;gap:8px;white-space:normal;min-width:0;width:100%;max-width:none;margin:10px 0 0;padding:11px 14px;min-height:44px;border-radius:14px;font-size:13px}
.catalog-preview .preview-control .icon{width:17px;height:17px;flex:none}
.catalog-preview .preview-control span{min-width:0;line-height:1.35}
.bio-controls{flex-wrap:wrap}
.bio-controls>button{min-width:0;max-width:100%;white-space:normal;line-height:1.45}
.lesson-focus .bio-controls>.primary{flex:1 1 210px;justify-content:center}
.lesson-focus .bio-controls>.quiet{flex:0 1 auto}
.journal-next button,.review-actions button{min-width:0;white-space:normal;line-height:1.5}
.workflow-book>div,.workflow-recall>div,.journal-cover-copy{min-width:0}
.workflow-book h2,.workflow-recall h2,.journal-page h2{overflow-wrap:break-word;text-wrap:balance}
.main-nav button,.menu-back,.header-home{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;line-height:1.3;white-space:normal}
.main-nav button .icon{width:22px;height:22px;flex:none}
.menu-back .icon,.header-home .icon{width:21px;height:21px}
.lesson-focus .app-header{position:sticky;top:0;z-index:15;max-width:none;gap:14px;box-shadow:0 5px 20px #1d183308}
.lesson-focus .app-header .brand{margin-right:auto}
.learning-dock{display:none}

@media(hover:hover) and (pointer:fine){
 :is(.workflow-subjects,.workflow-subject-select,.library-page) .subject-picker button:hover{transform:translateY(-3px);box-shadow:inset 0 1px 1px #fff,0 4px 6px #3020440b,0 14px 24px #30204418}
 .subject-picker button:hover .subject-art{transform:translateY(-3px) rotate(-2deg);filter:drop-shadow(0 8px 6px #182c222d)}
 :is(.primary,.quiet,.journal-dialog .primary,.catalog-preview .preview-control):not(:disabled):hover{transform:translateY(-1px);box-shadow:inset 0 1px 1px #ffffff7a,0 3px 5px #24183114,0 9px 18px #24183118}
}
button:not(:disabled):active{transform:translateY(1px) scale(.99)}
:root .quiet:not(:disabled):hover{background:var(--control-bottom);color:var(--control-ink)}
:is(.primary,.quiet,.subject-picker button):not(:disabled):active{box-shadow:inset 0 1px 3px #21152f17,0 1px 2px #21152f13}
[data-theme="academy"] :is(.workflow-subjects,.workflow-subject-select,.library-page) .subject-picker button{background:linear-gradient(145deg,#fffefa,#f8f4e8);border-color:#ded4bd}
[data-theme="academy"] :is(.workflow-subjects,.workflow-subject-select,.library-page) .subject-picker button[aria-pressed="true"]{background:linear-gradient(145deg,#fafcf5,#e8efe0);border-color:#8da68b;box-shadow:inset 0 1px 1px #fff,0 0 0 2px #8da68b22,0 8px 18px #30442e10}
[data-theme="academy"] .main-nav .icon{filter:brightness(0) invert(1)}

@media(max-width:1000px) and (min-width:701px){:is(.workflow-subjects,.library-page) .subject-picker{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
 body:not([data-page="home"]){padding-bottom:calc(86px + env(safe-area-inset-bottom))}
 body:not([data-page="home"]) #toast{bottom:calc(88px + env(safe-area-inset-bottom))}
 .workflow-launch{grid-template-areas:"art" "copy";grid-template-columns:minmax(0,1fr);min-height:0}
 .workflow-launch .feature-world{height:148px;min-height:0;overflow:hidden}
 .workflow-launch .feature-world>.lesson-world{inset:0;width:100%;height:100%;border:0;border-radius:22px 22px 0 0}
 .workflow-launch .feature-copy{padding:20px;gap:10px}
 .workflow-launch .feature-title{font-size:26px;line-height:1.2}
 .workflow-launch .feature-description{font-size:15px;line-height:1.5}
 .workflow-launch .feature-cta{align-self:stretch;justify-content:space-between;padding:14px 16px;font-size:14px}
 .workflow-launch .feature-footnote{font-size:11px;line-height:1.5}
 :is(.workflow-subjects,.workflow-subject-select,.library-page) .subject-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 :is(.workflow-subjects,.workflow-subject-select,.library-page) .subject-picker button{min-height:174px;padding:24px 10px 15px;gap:9px;border-radius:21px}
 .subject-art{width:78px;height:78px}
 .subject-picker .subject-copy strong{font-size:15px;line-height:1.35}
 .subject-picker .subject-copy small{font-size:11px}
 .subject-heading{gap:12px}
 .subject-heading .subject-art{width:60px;height:60px}
 .workflow-catalog .course-heading h1{font-size:27px;line-height:1.2}
 .main-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 .main-nav button{flex-direction:column;gap:5px;font-size:12px!important;padding:10px 5px;min-height:62px}
 .main-nav .count{position:absolute;right:8px;top:6px;transform:none;font-size:10px}
 .app-header .brand{min-width:0}
 .app-header:has(.menu-back){gap:10px}
 .app-header .menu-back+.brand{margin-right:auto;gap:8px;font-size:18px}
 .app-header .menu-back+.brand>img{width:32px;height:36px}
 .app-header .menu-back+.brand small,.app-header:has(.menu-back) .install{display:none}
 .app-header .brand small{font-size:11px}
 .app-header .menu-back{padding:10px;min-height:44px;gap:5px;font-size:12px}
 .lesson-focus .app-header{padding:10px 14px;gap:10px}
 .lesson-focus .app-header .brand span{font-size:15px}
 .header-home{display:none}
 .lesson-focus .header-actions .exit{display:none}
 .learning-dock{display:grid;position:fixed;z-index:30;bottom:0;left:0;right:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--control-edge);background:var(--control-top);box-shadow:0 -4px 20px #2721330c}
 .learning-dock button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:54px;padding:7px 5px;border:1px solid var(--control-edge);border-radius:14px;background:var(--control-top);box-shadow:0 2px 5px #26324406;font-size:12px;font-weight:700;line-height:1.3;color:var(--control-ink)}
 .learning-dock button .icon{width:22px;height:22px}
 .learning-dock button[aria-current="page"]{background:var(--control-bottom);border-color:var(--deep);color:var(--deep)}
 body:not([data-page="home"]) .main-nav{display:none}
 .workflow-resume{margin-top:8px}
 .theme-switcher{min-width:0;max-width:100%}
 .theme-switcher button{min-width:0;white-space:normal;line-height:1.35}
 .review-actions{flex-direction:column;align-items:stretch}
 .journal-next{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:480px){
 .workflow-catalog .lesson-grid{grid-template-columns:minmax(0,1fr)}
 .workflow-catalog .lesson-cover{aspect-ratio:1.8}
 .workflow-catalog .lesson-card-copy>strong{font-size:22px;min-height:0}
}
@media(max-width:359px){
 .app-header .brand small{display:none}
 .app-header .brand{gap:6px;font-size:18px}
 .app-header .menu-back span{display:none}
 .workflow-launch .feature-copy{padding:17px}
 .workflow-launch .feature-title{font-size:24px}
 .workflow-subjects .zone-heading h2{font-size:22px}
 .subject-picker .subject-copy strong{font-size:14px}
 .subject-heading .subject-art{width:48px;height:48px}
 .workflow-catalog .course-heading h1{font-size:25px}
 .workflow-catalog .course-filters{flex-wrap:wrap;gap:6px}
 .workflow-catalog .course-filters button{flex:1 1 95px}
}
@media(prefers-reduced-motion:reduce){.subject-art,button{transition:none!important}.subject-picker button:hover .subject-art,button:not(:disabled):hover,button:not(:disabled):active{transform:none!important}}

/* A scene preview is one reading column; controls never float over its text. */
#lesson-preview{width:min(700px,calc(100vw - 32px));max-width:none;padding:26px;scroll-padding-top:20px;background:var(--paper,#fff);color:var(--ink);border:1px solid var(--line);border-radius:24px}
#lesson-preview>.close-dialog{top:14px;right:14px;width:44px;height:44px;min-width:44px;border:1px solid var(--line)}
#lesson-preview>h2{font-size:28px;line-height:1.25;padding-right:38px;overflow-wrap:anywhere}
#lesson-preview>.eyebrow{max-width:calc(100% - 52px);white-space:normal;line-height:1.5}
#lesson-preview>.primary,#lesson-preview>.quiet{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;font-size:15px;line-height:1.45;padding:12px 18px;border-radius:14px;margin-top:14px;max-width:100%}
#lesson-preview>.primary .icon,#lesson-preview>.quiet .icon{width:21px;height:21px;flex:none}
#lesson-preview .preview-discovery{position:static;margin:18px 0;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--lavender)}
#lesson-preview :is(.year-visual,.interactive-figure,.preview-discovery){min-width:0;max-width:100%}
@media(max-width:700px){#lesson-preview{padding:20px 18px;width:calc(100vw - 20px);max-height:92svh}#lesson-preview>h2{font-size:25px}#lesson-preview>.primary,#lesson-preview>.quiet{width:100%}}