/* 3.5: bounded scene, explicit timer setup and quiet celestial details. */
html,body{height:100%;width:100%;min-height:0!important;max-width:100%;overflow:hidden!important;overscroll-behavior:none;scrollbar-gutter:auto!important}
body{position:fixed!important;inset:0;touch-action:pan-y pinch-zoom}
#app-shell{position:relative;isolation:isolate;height:var(--view-h,100dvh);min-height:0!important;max-height:var(--view-h,100dvh);width:100%;overflow:hidden;display:flex;flex-direction:column;padding-top:clamp(14px,3vh,38px);padding-bottom:max(10px,env(safe-area-inset-bottom))}
.topbar,.bottom-bar,.goal-strip{flex-shrink:0}.topbar{z-index:6}
.stage-viewport{flex:1 1 0;min-height:0;min-width:0;width:100%;position:relative;overflow:hidden}
#main.main-stage{position:absolute;left:0;top:50%;height:auto;min-height:0!important;max-height:none;width:100%;padding:22px 12px;flex:none;transform:translateY(-50%) scale(var(--stage-scale,1));transform-origin:center;animation:none!important}
.clock-frame{position:relative;display:grid;place-items:center;min-width:0}
.clock-line{grid-area:1/1}
.analog-clock{width:clamp(132px,16vh,196px);height:clamp(132px,16vh,196px);grid-area:1/1;position:relative;color:var(--ink)}
.analog-clock>svg{width:100%;height:100%;overflow:visible}.dial-rim{fill:none;stroke:var(--line);stroke-width:.9}.dial-major{stroke:var(--muted);stroke-width:1.8}.dial-minor{stroke:var(--line);stroke-width:1}
.analog-hour,.analog-minute,.analog-second{transform-origin:100px 100px;stroke-linecap:round}.analog-hour{stroke:var(--ink);stroke-width:4}.analog-minute{stroke:var(--ink);stroke-width:2.5}.analog-second{stroke:var(--accent);stroke-width:1}.dial-pin{fill:var(--accent)}.analog-period{position:absolute;left:0;right:0;bottom:24%;font-size:9px;letter-spacing:.15em;color:var(--muted)}
body[data-clock-style=analog] .quote-wrap{margin-top:24px}.timer-slot{flex:0 0 44px;height:44px;display:flex;align-items:center;justify-content:center;min-width:0}.timer-chip{margin:0!important;max-height:40px;box-shadow:none}.timer-chip-main{min-height:30px}.timer-chip .icon-button{height:30px;width:30px}
.goal-strip{margin-top:0}.moon-caption{display:flex;justify-content:center;gap:10px;margin-top:13px;font-size:11px;letter-spacing:.03em;color:var(--muted)}.moon-phase-percent{opacity:.6}
.celestial-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3;--sky-x:50%;--sky-y:20%}
#sky-stars{position:absolute;inset:0;width:100%;height:100%;opacity:.82;animation:star-breathe 17s ease-in-out infinite alternate}
#sky-body{position:absolute;left:var(--sky-x);top:var(--sky-y);width:70px;height:70px;transform:translate(-50%,-50%);opacity:.65;transition:left 3s linear,top 3s linear;filter:drop-shadow(0 0 16px rgba(203,211,225,.12))}
.sky-halo{position:absolute;left:var(--sky-x);top:var(--sky-y);width:min(64vw,680px);height:min(64vw,680px);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(141,169,203,.10),transparent 66%);transition:background 8s}
.celestial-sky[data-period=day] .sky-halo{background:radial-gradient(circle,rgba(238,191,100,.15),transparent 65%)}.celestial-sky[data-period=day] #sky-body{width:82px;height:82px;opacity:.45;filter:drop-shadow(0 0 25px rgba(237,187,105,.23))}
.sky-static *{animation:none!important;transition:none!important}@keyframes star-breathe{from{opacity:.66}to{opacity:.96}}
/* Only the content of dialogs may scroll, never the underlying dashboard. */
dialog{max-width:calc(100vw - 24px)!important;max-height:calc(var(--view-h,100dvh) - 24px)!important;overflow-x:hidden!important;overscroll-behavior:contain}
dialog .panel-content,.timer-content,.settings-scroll,.library-list-wrap,.custom-options{min-width:0;overflow-x:hidden!important;overscroll-behavior:contain}
.settings-section-body,.stacked-label{min-width:0}.panel-footer{flex-shrink:0}dialog button,dialog input,dialog select{max-width:100%}
/* A row per document; icons and labels always stay on the same line. */
.about-docs{display:grid!important;grid-template-columns:minmax(0,1fr);gap:0;margin-top:18px;border-top:1px solid var(--line)}
.about-docs a{width:100%;display:flex!important;align-items:center;gap:11px;min-height:44px;border-bottom:1px solid var(--line);white-space:nowrap}
.about-docs a span:not(.icon){min-width:0;white-space:nowrap}.about-docs .icon{width:18px;height:18px}
.favorite-search-button{width:44px!important;min-width:44px!important;height:44px!important;border-radius:50%!important;background:transparent;border:1px solid var(--line);color:var(--muted);flex:none}
.favorite-search-button[aria-pressed=true]{background:var(--accent-soft)!important;color:var(--accent)!important;border-color:var(--accent)}
.favorite-search-button[aria-pressed=true] .icon svg{fill:currentColor}.station-search-tools,.station-list-tools{display:flex;align-items:center;gap:10px;min-width:0;flex:none}.station-search-tools .select-search-bar,.station-list-tools .select-search-bar{flex:1;min-width:0;width:auto;margin:0!important}
.select-popup .station-search-tools{margin:0 0 18px}.select-popup .station-picker-tabs{display:none}
/* Timer controls stay in their positions from setup to completion. */
.timer-panel{width:540px}.timer-content{padding:20px 26px;min-height:0}.timer-time-stage{position:relative;height:112px;display:grid;place-items:center}.timer-duration,.timer-running{grid-area:1/1;width:100%;margin:0!important}
#timer-duration[hidden],#timer-running[hidden]{display:flex!important;visibility:hidden;pointer-events:none}#timer-running{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}#timer-state-label{font-size:10px}#timer-readout{font-size:52px;line-height:1.1}.timer-track{width:100%;max-width:240px;min-height:2px}
.timer-presets{margin:12px 0 18px}.timer-option-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}.timer-option-grid .stacked-label{margin-top:10px}.timer-session-options{border-top:1px solid var(--line);padding-top:3px}.timer-session-options .custom-trigger{min-height:44px;font-size:12px}.timer-session-options select{min-width:0}
.timer-session-options .text-button{min-height:36px}#timer-session-note{min-height:2.7em;font-size:11px;margin-top:6px}.timer-finish-description{min-height:2.5em;font-size:12px;margin-top:14px}
#timer-reset[hidden]{display:inline-flex!important;visibility:hidden;pointer-events:none}.timer-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}.timer-actions>.primary-button{margin-left:0;width:100%;min-width:0;min-height:48px}.timer-actions>.text-button{width:100%;min-width:0}
#timer-result{min-height:2.8em;margin-top:10px;font-size:12px}#timer-result[hidden]{display:block!important;visibility:hidden}#timer-retry-audio[hidden]{display:flex!important;visibility:hidden;pointer-events:none}#timer-retry-audio{min-height:32px!important;margin:4px auto 0!important}
/* Share options, logo and onboarding are intentionally compact. */
.share-formats{grid-template-columns:repeat(3,minmax(0,1fr))!important}.share-options{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.share-options .toggle-row{min-width:0;gap:10px;padding:13px 0}.share-options .toggle-row>span{font-size:12px;min-width:0}.share-options .toggle-row small{font-size:10px;line-height:1.5}.share-options .is-unavailable{opacity:.45}.share-options input{flex-shrink:0}
.welcome-panel{width:510px}.welcome-content{text-align:center;padding:12px 34px 28px}.welcome-logo{display:block;margin:0 auto 22px;border-radius:17px}.welcome-content h2{font-family:var(--serif);font-size:34px;font-weight:400;margin:13px 0 15px;line-height:1.2}.welcome-content>p:not(.section-label){font-size:14px;line-height:1.7;color:var(--muted)}#welcome-features{margin:22px 0;text-align:left;display:grid;gap:12px}#welcome-features p{font-size:13px;line-height:1.6;padding-left:14px;border-left:1px solid var(--accent)}.welcome-content>.local-note{font-size:11px!important}.welcome-panel .panel-footer{justify-content:space-between}
#persistent-storage-status{margin-top:22px;line-height:1.7}#storage-request,#welcome-reopen{display:inline-flex;margin:10px 12px 4px 0;font-size:12px}
@media(max-width:740px){#app-shell{padding-left:20px;padding-right:20px}.moon-caption{font-size:10px;margin-top:10px}.timer-chip-main{font-size:10px}.timer-slot{flex-basis:38px;height:38px}.timer-content{padding:16px 20px}.share-options{gap:0 14px}.analog-clock{width:142px;height:142px}#sky-body{width:52px;height:52px}.celestial-sky[data-period=day] #sky-body{width:65px;height:65px}.welcome-content{padding:10px 24px 22px}.welcome-content h2{font-size:29px}.favorite-search-button{width:42px!important;min-width:42px!important;height:42px!important}}
@media(max-height:540px) and (orientation:landscape){#app-shell{padding:10px 20px 7px}#main.main-stage{padding:8px 4px;gap:8px 22px}.timer-slot{height:34px;flex-basis:34px}.moon-caption{grid-column:1/-1;margin:0}.analog-clock{width:112px;height:112px}.goal-strip{display:grid}.bottom-bar{min-height:34px}.topbar{min-height:32px}.timer-chip{max-height:30px}.timer-chip-main{min-height:24px}.timer-chip .icon-button{height:25px;width:25px}}
@media(prefers-reduced-motion:reduce){.celestial-sky *{animation:none!important;transition:none!important}}
/* 3.6: lighter listening controls, one decision per pause. */
.radio-panel{width:340px;padding:20px;gap:12px}
.radio-panel-head{margin-bottom:6px;gap:10px;align-items:center}
.radio-panel .radio-panel-head h2{font-size:24px;line-height:1.2;margin:0}
.radio-panel-head>.icon{width:20px;height:20px}
.radio-panel .stacked-label{margin-top:0;font-size:12px;gap:7px}
.radio-panel .radio-actions{margin:0;gap:8px}
.radio-panel .radio-volume{margin-top:8px}
.radio-panel .radio-source{margin-top:6px;padding-top:10px;border-top:1px solid var(--line);gap:8px;font-size:10px;min-width:0}
.radio-source a{min-width:0;flex:0 0 auto}.radio-source #radio-provider{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.radio-panel #radio-detail{margin:8px 0 0;line-height:1.5;font-size:12px}
#radio-detail[hidden]{display:none!important}
.radio-program-info{font-size:11px;gap:7px;padding-top:8px}
.timer-panel{width:460px}
.timer-panel .panel-head{padding:23px 26px 18px}
.timer-panel .panel-head h2{font-size:32px}
.timer-content{padding:12px 26px 4px}
.timer-time-stage{height:112px}
.timer-panel .timer-duration input{width:80px;height:62px;font-size:34px}
.timer-panel .timer-duration label{font-size:10px;gap:9px}
.timer-panel .timer-presets{margin:10px 0 16px;gap:6px;flex-wrap:nowrap}
.timer-presets button{flex:1;min-width:0;padding:5px 4px;font-size:12px}
.timer-panel #timer-running{padding:0;gap:10px}
.timer-panel #timer-readout{font-size:54px;line-height:1.1}
.timer-panel .timer-track{margin:5px auto 0}
.timer-session-options{padding:0;border-top:1px solid var(--line)}
.timer-radio-choice.toggle-row{border:0;margin:0;padding:14px 0 8px;min-height:48px;gap:12px}
.timer-radio-choice>span{display:flex;align-items:center;gap:9px;font-size:13px;min-width:0}
.timer-radio-choice .icon{width:17px;height:17px;color:var(--muted);flex:0 0 auto}
.timer-radio-choice input{flex-shrink:0}
.timer-preference-summary{display:flex;align-items:center;gap:8px;justify-content:space-between;min-height:38px}
.timer-panel .timer-finish-description{font-size:12px;line-height:1.4;min-height:0;margin:0;text-align:left;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#timer-options-open{width:34px;height:34px;min-width:34px;flex:none}
#timer-options-open .icon{width:17px;height:17px}
#timer-dialog[data-state=running] #timer-during:disabled,#timer-dialog[data-state=paused] #timer-during:disabled{opacity:.7}
.timer-notice{height:64px;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.timer-panel #timer-result,.timer-panel #timer-audio-hint,.timer-panel #timer-error{font-size:11px;line-height:1.45;padding:0;margin:0;min-height:0;text-align:center}
.timer-panel #timer-result[hidden],.timer-panel #timer-retry-audio[hidden]{display:none!important}
.timer-panel #timer-retry-audio{min-height:24px!important;padding:2px 6px;margin:0!important;font-size:12px;gap:6px}
.timer-panel #timer-retry-audio .icon{width:15px;height:15px}
.timer-panel .timer-actions{padding:17px 26px;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
.timer-panel .timer-actions button{font-size:13px}
#timer-volume-label{float:right;font-variant-numeric:tabular-nums;color:var(--muted)}
#timer-sound-preview{display:flex;align-items:center;gap:7px;min-height:36px;margin-top:8px}
#timer-sound-preview .icon{width:17px;height:17px}
#timer-sound-settings .stacked-label{margin-top:16px}
@media(max-width:600px){
 .radio-panel{width:min(340px,calc(100vw - 32px));padding:18px}
 .timer-panel .panel-head{padding:20px 20px 15px}
 .timer-content{padding:8px 20px 0}
 .timer-panel .timer-actions{padding:15px 20px}
 .timer-panel .timer-duration input{width:70px}
 .timer-panel .timer-radio-choice>span{font-size:12px;gap:7px}
}
@media(max-width:360px){.timer-panel .timer-duration input{width:64px;height:60px}.timer-panel .timer-presets{gap:4px}.timer-panel .timer-presets button{font-size:11px}.timer-radio-choice.toggle-row{gap:7px}.timer-panel .timer-actions{gap:6px}.timer-panel .timer-actions button{font-size:12px;padding-inline:10px}}

/* 3.7: the sky and exported artwork use the same weather state. */
#sky-body{opacity:calc(.65 * var(--orb-opacity,1));transition:left 3s linear,top 3s linear,opacity 1.8s ease,filter 1.8s ease}
.celestial-sky[data-period=day] #sky-body{opacity:calc(.45 * var(--orb-opacity,1))}
.sky-halo{opacity:var(--orb-opacity,1);transition:opacity 1.8s ease,background 8s}
.sky-weather-veil{position:absolute;inset:-10%;opacity:var(--cloud-opacity,0);background:radial-gradient(ellipse at 15% 16%,rgba(108,130,139,.16),transparent 39%),radial-gradient(ellipse at 76% 21%,rgba(100,120,132,.20),transparent 43%),radial-gradient(ellipse at 45% 4%,rgba(121,137,146,.14),transparent 38%);transition:opacity 1.8s ease;animation:sky-cloud-drift 55s ease-in-out infinite alternate}
.celestial-sky[data-weather=storm] .sky-weather-veil{background:radial-gradient(ellipse at 50% 6%,rgba(59,75,91,.36),transparent 73%)}
.celestial-sky[data-weather=fog] .sky-weather-veil{background:linear-gradient(178deg,transparent,rgba(156,169,176,.13),transparent)}
@keyframes sky-cloud-drift{to{transform:translate3d(3%,1%,0)}}
/* The host owns centering; child animations can never overwrite translateX. */
#toast-host{position:fixed;inset:auto 0 calc(max(14px,env(safe-area-inset-bottom)) + 65px);margin:0;padding:0 max(16px,env(safe-area-inset-left)) 0 max(16px,env(safe-area-inset-right));width:auto;max-width:none;border:0;background:transparent;overflow:visible;pointer-events:none;color:var(--ink);z-index:2147483646}
#toast-host:popover-open,#toast-host.toast-fallback{display:flex;justify-content:center;align-items:center}
#toast-host::backdrop{background:transparent;pointer-events:none}
#toast{position:relative;left:auto;right:auto;bottom:auto;top:auto;margin:0;transform:none;width:fit-content;flex:0 1 auto;min-width:0;max-width:min(620px,100%);animation:none;overflow-wrap:anywhere}
@media(max-width:740px), (max-width:1000px) and (max-height:540px) and (orientation:landscape){
 .collection-link>span:not(.icon){display:none}
 .collection-link{width:44px;height:44px;min-width:44px;justify-content:center;padding:0;gap:0;border-radius:50%}
 .collection-link>.icon{width:20px;height:20px}
}
/* Compact landscape: retain goal + countdown instead of hiding the user's objective. */
@media(max-height:540px) and (orientation:landscape){
 #app-shell{padding:7px max(16px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
 #main.main-stage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:5px 20px;padding:5px 0;align-items:center}
 .clock{font-size:clamp(66px,15vh,88px)!important}.date-label{font-size:9px;margin-bottom:5px}
 .thought-block{margin-top:0;min-width:0}.quote-wrap{margin-top:8px;min-height:0!important}.quote-wrap blockquote{font-size:clamp(21px,5.5vh,29px)!important;line-height:1.24}
 .quote-intro{margin-bottom:4px;font-size:11px}.thought-eyebrow h1{font-size:9px}.thought-eyebrow{gap:8px}
 .phrase-meta{margin-top:7px;font-size:9px}.moon-caption{display:none}
 #goal-strip:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;row-gap:3px;align-items:center;padding:7px 0 5px;margin:0;min-height:48px;max-width:none;position:relative}
 #goal-strip .goal-heading{min-width:0}#goal-strip .goal-heading h2{font-size:14px;line-height:1.2;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #goal-strip .section-label{font-size:8px;line-height:1.2;margin-bottom:3px;letter-spacing:.08em}
 #goal-strip .countdown{gap:9px}#goal-strip .countdown>div{min-width:24px;gap:1px}#goal-strip .countdown strong{font-size:21px;line-height:1}
 #goal-strip .countdown>div>span{font-size:8px}#goal-strip .count-separator{font-size:14px;margin-top:-10px}
 #goal-strip .goal-progress{grid-column:1/-1;max-width:none;width:100%}#goal-strip .progress-labels,#goal-strip .goal-date{display:none}#goal-strip .progress-track{margin-top:3px;height:2px}
 .timer-slot{height:0;flex-basis:0}.timer-slot:has(.timer-chip:not([hidden])){height:30px;flex-basis:30px}
 .bottom-bar{min-height:42px;margin:0;gap:6px}.topbar{min-height:30px}.bottom-bar .toolbar{gap:0}.bottom-bar .toolbar .icon-button{width:40px;height:40px}
 .analog-clock{width:94px;height:94px}.environment-line{margin-top:6px!important;gap:8px!important}.solar-line{font-size:9px!important}.solar-arc{width:60px!important}
 body.no-clock #main.main-stage{display:flex;flex-direction:column}
}
@media(max-height:375px) and (orientation:landscape){
 .phrase-meta{display:none}.moment-greeting{margin-bottom:4px;font-size:10px}#main.main-stage{gap:4px 14px}
 #goal-strip:not([hidden]){min-height:44px;padding-top:4px;padding-bottom:4px}
 .environment-line{margin-top:4px!important}.thought-eyebrow .tiny-line{width:12px}.bottom-bar .toolbar-separator{margin:0 1px}
}
@media(prefers-reduced-motion:reduce){.sky-weather-veil{animation:none;transition:none}}

/* 3.8: one persistent celestial body. A theme change is just a wash of light. */
.celestial-transition.play{animation:theme-wash 2.2s ease-in-out}
.celestial-transition .transition-horizon{position:absolute;inset:-10%;background:radial-gradient(ellipse at 75% 25%,rgba(219,187,128,.10),transparent 65%);opacity:1}
.celestial-transition[data-scene=dark] .transition-horizon{background:radial-gradient(ellipse at 75% 25%,rgba(116,155,173,.10),transparent 65%)}
@keyframes theme-wash{0%,100%{opacity:0}40%{opacity:1}}
.audio-source-switch{display:flex;gap:7px;padding:4px;border:1px solid var(--line);border-radius:12px;margin:10px 0 18px}
.audio-source-switch button{display:flex;align-items:center;justify-content:center;flex:1;gap:8px;background:none;color:var(--muted);font-size:12px;min-height:38px;border-radius:9px;padding:9px}
.audio-source-switch button .icon{height:16px;width:16px}
.audio-source-switch button[aria-pressed=true]{color:var(--ink);background:var(--accent-soft)}
.ambient-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.ambient-options button{position:relative;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:6px 9px;text-align:left;padding:14px 12px;min-height:76px;border:1px solid var(--line);border-radius:12px;background:transparent}
.ambient-options button strong{font-size:13px;font-weight:500}
.ambient-options button .icon{height:19px;width:19px;color:var(--muted)}
.ambient-options button small{grid-column:1/-1;font-size:10px;color:var(--muted)}
.ambient-options button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}
.ambient-options button[aria-pressed=true] .icon{color:var(--accent)}
#ambient-status{font-size:11px;line-height:1.6;color:var(--muted);margin:8px 0 0}
#ambient-volume-value{font:11px var(--sans);min-width:32px;text-align:right;color:var(--muted)}
.ambient-settings{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.ambient-settings .stacked-label{margin-top:16px}
.radio-panel .radio-panel-head h2{font-size:22px}
.backup-actions{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}
.backup-actions button{flex:1;justify-content:center;white-space:nowrap}
#section-backup .local-note{display:block;margin:10px 0;font-size:11px;line-height:1.65}
#section-backup .toggle-row{margin-top:16px}
.backup-panel{width:530px}
.backup-panel .panel-head h2{font-size:30px}
.backup-summary{display:grid;gap:0;margin:20px 0}
.backup-summary>div{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12px}
.backup-summary dt{color:var(--muted);flex:0 0 auto}
.backup-summary dd{margin:0;text-align:right;overflow-wrap:anywhere;min-width:0}
.backup-warning{padding:15px;background:var(--accent-soft);border-radius:11px;font-size:12px;line-height:1.7}
#backup-extra-note{font-size:11px;line-height:1.65;margin:16px 0}
#backup-file-name{overflow-wrap:anywhere}
.official-link{font-size:12px;color:var(--accent);margin:16px 0;overflow-wrap:anywhere}
@media(max-width:380px){.ambient-options{gap:7px}.ambient-options button{padding:12px 9px}.ambient-options button small{font-size:9px}.radio-panel .radio-panel-head h2{font-size:20px}.audio-source-switch{margin-bottom:13px}.backup-panel .panel-head h2{font-size:26px}}