/* RC21 additions. The RC21 canvas, header geometry and safe areas are retained. */
/* Contain every card's z-index, including composited favorite buttons, beneath
   the header. Do not transform/filter the app canvas to create containment. */
.app-shell>.app-main{z-index:0;isolation:isolate;}
.app-shell>.app-header{z-index:20;}
.house-card,.show-card{isolation:isolate;}
/* Spinner participates in the button's flex layout. ::before is hit area only. */
.datebar #refresh{gap:5px;}
.datebar #refresh::before{border:0;margin:0;width:auto;height:auto;animation:none;}
.datebar #refresh.is-syncing::after{content:"";position:static;display:block;flex:0 0 10px;width:10px;height:10px;box-sizing:border-box;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sync-turn .8s linear infinite;pointer-events:none;}
#queues>.section-top{flex-wrap:wrap;gap:8px;}
#queues .tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex:1;max-width:258px;}
#queues .tabs button{padding:7px 9px;font-size:13px;}
.show-card{position:relative;overflow:hidden;border:1px solid #c795df55;border-radius:22px;background:linear-gradient(140deg,#33203f,#241d33);box-shadow:0 6px 18px #08030d33;}
.show-open{position:relative;display:block;width:100%;padding:0;border:0;border-radius:0;background:#161020;text-align:left;min-height:190px;overflow:hidden;}
.show-open .house-poster{position:absolute;inset:0;width:100%;height:100%;}
.show-open .house-poster img{width:100%;height:100%;object-fit:cover;object-position:center 38%;}
.show-open::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 12%,#10081955 45%,#100819f5);}
.show-title{position:relative;z-index:1;min-height:190px;display:flex;flex-direction:column;justify-content:flex-end;padding:48px 18px 17px;}
.show-title span{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:#ddc7ed;}
.show-title h3{font-size:23px;line-height:1.15;letter-spacing:-.5px;margin:7px 0 0;overflow-wrap:anywhere;color:#fff;}
.show-info{padding:14px 16px 4px;}
.show-next{font-size:12px;font-weight:650;color:#e5c7f8;margin-bottom:11px;}
.show-times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:12px 0;}
.show-time{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:42px;padding:7px 3px;font-size:13px;line-height:1.3;font-weight:650;border:1px solid #e2c9f42b;border-radius:11px;background:#ffffff06;white-space:nowrap;}
.show-time small{font-size:9px;font-weight:400;color:#d1bddf;}
.show-time.is-next{border-color:#d8b1f275;background:#ac82ce22;color:#f4e7ff;}
.show-time.is-past{color:#c5b3cf;}
.show-time.is-canceled{text-decoration:line-through;color:#ffbdca;}
.show-empty{font-size:13px;color:#d6c4e3;}
.show-peek{margin-block:20px;padding:17px 16px;}
.show-peek h2{font-size:20px;margin:5px 0;}
.show-peek>.section-top{gap:8px;align-items:center;}
.show-peek .textlink{font-size:12px;white-space:nowrap;}
.show-peek-row{display:flex;align-items:center;gap:12px;min-height:72px;border:0;border-top:1px solid #ffffff15;border-radius:0;background:none;width:100%;padding:12px 0;text-align:left;}
.show-peek-row img{width:54px;height:54px;object-fit:cover;border-radius:12px;flex:none;}
.show-peek-row>span:nth-child(2){min-width:0;flex:1;}
.show-peek-row strong{display:block;line-height:1.25;font-size:14px;overflow-wrap:anywhere;}
.show-peek-row small{display:block;font-size:10px;color:#d6c3e4;margin-top:5px;line-height:1.5;}
.show-peek-row>span:last-child{font-size:24px;color:#dcc0f0;}
/* Essential settings remain open sections, secondary help stays in drawers. */
.settings-intro{margin-top:-10px;}
.settings-section{border-top:1px solid #d4b6e330;padding-top:16px;margin-top:20px;min-width:0;}
.settings-section>h3{font-size:18px!important;margin:0 0 12px!important;}
.settings-section.appearance-group .app-settings{padding-block:14px;border-bottom:1px solid #ffffff18;margin:0 0 16px;}
.settings-section .dashboard-controls{gap:7px;}
.settings-section .dashboard-controls button{min-height:40px;}
.settings-section .fine{line-height:1.6;}
.support-group>summary,.about-group>summary{min-height:52px;}
#aboutDialog .method h2{font-size:23px;}
/* Entry and exit animate only the top-layer sheet. The backdrop stays stable. */
.sheet[open]{animation:sheet-arrive .28s cubic-bezier(.16,1,.3,1) both;}
.sheet.is-closing{pointer-events:none;animation:none;}
.sheet details[open]>:not(summary){animation:drawer-arrive .2s ease-out;}
@keyframes sheet-arrive{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes drawer-arrive{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* Atmospheric night sky. Static gradients and small moving layers only. */
.weather-scene{min-height:270px;background:#111b35;transition:background-color .6s;}
.weather-scene.sky-clear{background:linear-gradient(155deg,#1a2149,#192f4e 65%,#37315b);}
.weather-scene.sky-cloudy{background:linear-gradient(155deg,#373553,#253044 65%,#45374d);}
.weather-scene.sky-rainy{background:linear-gradient(155deg,#242d46,#1a3047 65%,#253c53);}
.weather-scene.sky-storm{background:linear-gradient(155deg,#342a48,#1b2137 60%,#3f354e);}
.weather-scene.sky-fog{background:linear-gradient(155deg,#484857,#2b3446);}
.weather-scene.sky-snow{background:linear-gradient(155deg,#37475c,#23374e);}
.weather-scene .sky-art{z-index:0;overflow:hidden;}
.weather-scene .sky-art::before,.weather-scene .sky-art::after{content:none;animation:none;}
.weather-scene .scene-content{position:relative;z-index:1;min-height:270px;padding:28px 22px 22px;max-width:none;background:linear-gradient(90deg,#0e102647,transparent);}
#sceneTemp{position:relative;font-size:57px;padding-right:95px;text-shadow:0 2px 16px #0c102677;}
#sceneCondition{max-width:85%;text-shadow:0 1px 10px #090b22;}
#sceneDetail{margin-top:14px;padding:10px 12px;border-radius:12px;background:#11162b99;color:#f0e8fa;font-size:11px;}
.atmosphere-stars{position:absolute;inset:0;opacity:0;}
.sky-clear .atmosphere-stars{opacity:.8;}
.atmosphere-stars i{position:absolute;width:2px;height:2px;background:#f1edff;border-radius:50%;animation:star-glimmer 6s ease-in-out var(--delay) infinite;}
.atmosphere-moon{position:absolute;right:24px;top:29px;width:79px;height:79px;opacity:0;border-radius:50%;background:radial-gradient(circle at 32% 30%,#f8f3eb,#c0c7da 70%,#8f9cb8);box-shadow:0 0 40px #e2dcff40,inset -13px -5px 18px #4a5a7655;}
.atmosphere-moon span{display:block;width:100%;height:100%;border-radius:inherit;background:radial-gradient(circle at 30% 41%,#8c94ad55 0 7%,transparent 9%),radial-gradient(circle at 62% 65%,#8c94ad44 0 12%,transparent 15%),radial-gradient(circle at 60% 24%,#8c94ad55 0 8%,transparent 10%);}
.sky-clear .atmosphere-moon,.sky-cloudy .atmosphere-moon{opacity:.95;}
.sky-cloudy .atmosphere-moon{opacity:.55;}
.atmosphere-cloud{position:absolute;right:-7%;top:30px;width:250px;height:115px;opacity:0;animation:cloud-travel 17s ease-in-out infinite alternate;}
.atmosphere-cloud svg{width:100%;height:100%;fill:#cad0e4;}
.cloud-far{top:10px;right:13%;width:220px;opacity:0;animation-duration:24s;animation-delay:-9s;}
.sky-cloudy .cloud-near,.sky-rainy .cloud-near,.sky-storm .cloud-near,.sky-snow .cloud-near,.sky-fog .cloud-near{opacity:.36;}
.sky-cloudy .cloud-far,.sky-rainy .cloud-far,.sky-storm .cloud-far,.sky-snow .cloud-far{opacity:.16;}
.sky-storm .cloud-near svg{fill:#9c9bb9;}
.atmosphere-rain,.atmosphere-snow{display:none;position:absolute;inset:-35px 0;overflow:hidden;}
.sky-rainy .atmosphere-rain,.sky-storm .atmosphere-rain,.sky-snow .atmosphere-snow{display:block;}
.atmosphere-rain i{position:absolute;left:var(--x);top:-28px;width:1px;height:28px;background:linear-gradient(transparent,#bbdbf0aa);animation:rain-travel var(--duration) linear var(--delay) infinite;}
.atmosphere-rain i:nth-child(3n){height:16px;opacity:.45;}
.atmosphere-snow i{position:absolute;left:var(--x);top:-10px;width:3px;height:3px;background:#e8f2ff;border-radius:50%;opacity:.7;animation:snow-travel 7s linear var(--delay) infinite;}
.atmosphere-mist{position:absolute;inset:20% -20% -10%;opacity:0;background:radial-gradient(ellipse at 70% 30%,#cdd6e12e,transparent 55%),radial-gradient(ellipse at 25% 70%,#cdd6e138,transparent 60%);animation:cloud-travel 22s ease-in-out infinite alternate;}
.sky-fog .atmosphere-mist{opacity:1;}
.atmosphere-horizon{position:absolute;inset:auto 0 0;height:35%;background:linear-gradient(transparent,#11142c77);}
.weather-scene.is-empty{min-height:0;}
.weather-scene.is-empty .scene-content{min-height:0;}
@keyframes star-glimmer{50%{opacity:.35}}
@keyframes cloud-travel{to{transform:translate3d(-28px,5px,0)}}
@keyframes rain-travel{to{transform:translate3d(-60px,370px,0)}}
@keyframes snow-travel{to{transform:translate3d(30px,360px,0)}}
/* Decorative motion runs only while Weather is visible. No flashing storms. */
body:not([data-screen="weather"]) .weather-scene *,html.page-hidden .weather-scene *{animation-play-state:paused!important;}
@media(max-width:359px){#queues .tabs{max-width:238px}#queues .tabs button{font-size:12px;padding-inline:8px}.show-title h3{font-size:21px}.show-time{font-size:12px}.show-peek{padding:14px 12px}.show-peek h2{font-size:18px}#sceneTemp{font-size:48px;padding-right:80px}.atmosphere-moon{right:17px;width:66px;height:66px}.weather-scene .scene-content{padding-inline:17px}}
.no-motion *,.no-motion *::before,.no-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}
/* Reduced motion retains a visible, still depiction of the forecast. */
.no-motion .atmosphere-rain i,.no-motion .atmosphere-snow i{top:var(--x);}
@media(prefers-reduced-motion:reduce){.atmosphere-rain i,.atmosphere-snow i{top:var(--x);}}
.show-card>.favorite-button{right:12px;top:12px;z-index:2;}
.show-open:focus-visible{outline:3px solid #ffbfda;outline-offset:-4px;}
