/* Appearance tokens and dark UI surfaces. Paper, illustrations, photo pixels,
   drawing swatches and exports deliberately retain their original colors. */
:root{color-scheme:light}
.theme-setting{flex-wrap:wrap}
.theme-setting>div{flex:1 1 180px}
.setting-row select{color:var(--ink);min-height:44px;max-width:100%}
:root[data-theme=dark]{color-scheme:dark;--shadow:0 12px 42px #0003}
:root[data-theme=dark] :is(.sidebar,.skip-link,.icon-button,.journey-strip,.lesson-card,.mode-option,.setting-row select,.secondary,.tiny-button,.lesson-header,.lesson-footer,.art-tools,.reflection-options button,.gallery-card,.gallery-empty,.hero-sticker){background:var(--white);border-color:var(--line);color:var(--ink)}
:root[data-theme=dark] :is(.nav-item,.grownups,.brand-tag,.breadcrumb,.language-button,.greeting p,.section-heading p,.card-meta,.footer-note,.lesson-title small,.step-description,.canvas-label,.footer-encouragement,.finish-copy>p,.proud-label,.gallery-intro p,.gallery-card small,.gallery-empty p,.modal>p,.materials,.tool-button,.size-button,.hint-toast,.voice-note,.paper-under){color:var(--muted)}
:root[data-theme=dark] :is(.breadcrumb strong,.teacher h1,.gallery-empty h2){color:var(--ink)}
:root[data-theme=dark] :is(.nav-item.active,.nav-item:hover,.icon-button:hover,.pill:hover:not(.active),.secondary:hover,.tiny-button:hover,.tool-button:hover,.tool-button.active,.size-button.active,.mode-option.selected,.reflection-options button.active,.guide-toggle[aria-pressed=true],.music-player [data-action=music-toggle]){background:var(--lilac);color:var(--purple);border-color:var(--purple)}
:root[data-theme=dark] :is(.nav-count,.card-arrow,.recommended){background:var(--lilac);color:var(--purple)}
:root[data-theme=dark] :is(.pill,.guide-toggle){border-color:var(--line);color:var(--muted)}
:root[data-theme=dark] :is(.primary,.pill.active){background:var(--purple-dark);color:white}
:root[data-theme=dark] .primary:hover{background:var(--purple-dark);filter:brightness(1.12)}
:root[data-theme=dark] .pill.active{border-color:var(--purple)}
:root[data-theme=dark] :is(.hero,.prompt-card){background:var(--lilac);border-color:var(--line)}
:root[data-theme=dark] :is(.hero h2,.prompt-card h3){color:var(--ink)}
:root[data-theme=dark] :is(.hero p,.hero-meta,.eyebrow,.step-tag,.prompt-card p,.prompt-card>.icon){color:var(--muted)}
:root[data-theme=dark] .hero-art:before{background:none}
:root[data-theme=dark] :is(.little-note,.mini-stat,.settings-note,.paper-instruction,.art-modal .challenge,.play-hero,.storage-warning){background:var(--warm-surface);border-color:var(--line);color:var(--warm-ink)}
:root[data-theme=dark] :is(.little-note p,.paper-instruction b,.paper-instruction p,.step-tip,.play-hero h2,.play-hero p,.play-hero .eyebrow,.play-hero .hero-sticker,.blank-photo-note){color:var(--warm-ink)}
:root[data-theme=dark] :is(.studio-note,.skill-earned,.journey-step.done .step-round){background:var(--mint);color:var(--green-ink)}
:root[data-theme=dark] .step-round{background:var(--page);color:var(--muted)}
:root[data-theme=dark] :is(.journey-step:first-child .step-round,.journey-step.current .step-round){background:var(--lilac);color:var(--purple);box-shadow:0 0 0 4px var(--page)}
:root[data-theme=dark] .journey-step span>small{color:var(--muted)}
:root[data-theme=dark] .journey-connector{border-color:var(--line)}
:root[data-theme=dark] :is(.tool-divider,.lesson-progress span){background:var(--line)}
:root[data-theme=dark] :is(.lesson-progress span.done,.lesson-progress span.active){background:var(--purple)}
:root[data-theme=dark] .photo-label{background:var(--lilac);border-color:var(--purple);color:var(--purple)}
:root[data-theme=dark] .toggle{background:var(--line)}
:root[data-theme=dark] .toggle[aria-checked=true]{background:var(--purple-dark)}
:root[data-theme=dark] .avatar{box-shadow:0 0 0 4px var(--white)}
:root[data-theme=dark] .setup-caption{color:var(--muted)!important}
:root[data-theme=dark] :is(.drawing-paper,.demo-paper){box-shadow:0 5px 0 var(--line)}
:root[data-theme=dark] :is(button,a,input,select):focus-visible{outline-color:var(--purple)}

/* Blocking feedback: semantic colors come from config/branding.json in both themes. */
:root :is(p,div,span).blocking-message,:root[data-theme=dark] :is(p,div,span).blocking-message{color:var(--danger-ink);background:var(--danger-surface);border-inline-start:4px solid var(--danger-ink);border-radius:12px;padding:12px 16px;display:flex;align-items:flex-start;gap:10px;font-weight:800;text-align:start}
.blocking-message>.icon{flex-shrink:0;margin-top:2px}

/* Persistent child-readable failure notices, with an explicit touch-sized dismiss action. */
:root #toast.blocking-message{color:var(--danger-ink);background:var(--danger-surface);display:flex;align-items:flex-start;gap:10px;border:2px solid var(--danger-ink);max-width:min(560px,calc(100vw - 24px));width:max-content;font-size:16px;line-height:1.5;text-align:start;padding:12px;top:max(12px,env(safe-area-inset-top));bottom:auto;max-height:35dvh;overflow:auto}
#toast.blocking-message>span{flex:1;min-width:0;overflow-wrap:anywhere}
#toast.blocking-message>.icon{flex-shrink:0;margin-top:10px}
#toast.blocking-message>.icon-button{flex-shrink:0;min-width:48px;min-height:48px;background:var(--danger-surface);border-color:var(--danger-ink);color:var(--danger-ink)}
.save-failure{margin-block:14px}

:root #toast.blocking-message.show{pointer-events:auto}

:root p.save-failure{font-size:16px;line-height:1.5}