/* Approved charcoal/lavender material. Light layers are intentional optical cues. */
body.theater:has(#page-home.active) {
  background:radial-gradient(ellipse at 50% 78%,#27232e55,transparent 58%),linear-gradient(125deg,#171a1f,#121519 60%,#1b1c23); /* taste-skill-ignore: explicitly requested glass lighting / continuous approved background. */
}
#page-home .theater-home::before,#page-home .theater-home::after { display:none; }
/* Keep the original floor texture registration, but crop its box to the stage
   base. Its first transparent pixels can no longer be cut at the header seam. */
#page-home .theater-floor {
  top:calc(100% - 180px); height:max(480px,calc(27.367vw + 180px)); aspect-ratio:auto;
  background-size:100% auto; background-position:center calc(180px - 39.3vw);
  mask-image:linear-gradient(to bottom,transparent, #000 200px, #000 calc(100% - 100px),transparent); /* taste-skill-ignore: preserve floor reflection with a transparent top. */
}
.sidebar .brand,.sidebar .header-actions { height:62px; display:flex; align-items:center; }
.sidebar .brand { justify-content:flex-start; }
.sidebar .header-actions { justify-content:flex-end; gap:24px; }
.sidebar .channel-icons { gap:12px; }
.sidebar .social-icon { width:46px; height:46px; }
.sidebar .theater-wordmark { line-height:1; }
.sidebar .nav.is-glass-menu { transform:none; }
.sidebar .header-actions #adminLoginPill {
  position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none;
  gap:8px; width:96px; min-height:46px; margin:0; padding:10px 12px; border-radius:14px;
  border:1px solid #d6c2e64a; color:#eadff2;
  background:linear-gradient(135deg,#cbb6df14,#25232c80); /* taste-skill-ignore: requested smoked-glass account control. */
  box-shadow:inset 0 1px #f3e5ff12; backdrop-filter:blur(12px);
  font:400 13px/1.4 var(--sans); white-space:nowrap; overflow:hidden;
  transition:border-color 180ms ease,color 180ms ease,transform 160ms ease;
}
#adminLoginPill svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; }
.sidebar .header-actions #adminLoginPill::before { content:''; position:absolute; inset:0; background:linear-gradient(120deg,transparent 22%,#eddaff16 50%,transparent 78%); opacity:0; transform:translateX(-30%); transition:transform 300ms ease,opacity 180ms ease; pointer-events:none; } /* taste-skill-ignore: restrained glass reflection on hover. */
.sidebar .header-actions #adminLoginPill::after { display:none; }
@media(hover:hover) { .sidebar .header-actions #adminLoginPill:hover { border-color:#dfc2f18a; color:#fff4ff; }.sidebar .header-actions #adminLoginPill:hover::before { transform:translateX(20%); opacity:1; } }
.sidebar .header-actions #adminLoginPill:active { transform:scale(.97); }
.sidebar .header-actions #adminLoginPill:focus-visible { outline:2px solid #e7d1f9; outline-offset:4px; }

/* The state light is an independent column; status text can wrap without moving it. */
#page-home:is(.active,.section-departing) .theater-status { display:grid; grid-template-columns:18px minmax(0,1fr) 34px; align-items:center; column-gap:17px; }
#page-home:is(.active,.section-departing) .theater-status::before { display:none; }
#page-home:is(.active,.section-departing) .theater-status #heroLive { display:block; background:none; border:0; padding:0; box-shadow:none; }
#page-home:is(.active,.section-departing) .theater-status #heroLive i { display:none; }
#page-home:is(.active,.section-departing) .theater-status p { margin:5px 0 0; font-size:11px; line-height:1.55; white-space:normal; overflow-wrap:anywhere; }
#page-home:is(.active,.section-departing) .theater-status>.soop-glyph { justify-self:center; mask:none; -webkit-mask:none; background: url('soop-instagram-mask.svg') center/contain no-repeat; opacity:1; }
.status-copy { position:relative; min-width:0; padding-right:10px; }
.status-copy::after { content:''; position:absolute; right:-7px; height:80%; top:10%; width:1px; background:#e4cff830; }
.status-orb { position:relative; display:block; width:15px; height:15px; border-radius:50%; border:1px solid #dfd1ee75; background:radial-gradient(circle at 32% 22%,#ded8e6,#9a8ca8 33%,#534b62 78%); box-shadow:inset 0 -2px 3px #28213260; } /* taste-skill-ignore: explicitly requested glass lighting / continuous approved background. */
.status-orb>span { position:absolute; inset:-11px; border-radius:50%; background:radial-gradient(circle,#d3b2ff80,transparent 66%); opacity:0; transition:opacity 600ms ease; } /* taste-skill-ignore: explicitly requested glass lighting / continuous approved background. */
.status-orb::after { content:''; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 35% 27%,#fff 0,#f3e4ff 13%,#d7b2ff 42%,#9762cd 78%); opacity:0; transition:opacity 600ms ease; } /* taste-skill-ignore: explicitly requested glass lighting / continuous approved background. */
.theater-status:has(#heroLive.live) .status-orb::after { opacity:1; }
.theater-status:has(#heroLive.live) .status-orb>span { opacity:.85; animation:status-breathe 6.8s ease-in-out infinite; }
@keyframes status-breathe { 0%,100% { transform:scale(.94); opacity:.65; } 50% { transform:scale(1.12); opacity:.95; } }

/* The approved glass date rail keeps empty days visible beside broadcast days. */
#page-home:is(.active,.section-departing) .theater-ruler { z-index:12; width:min(1320px,84%); margin-inline:auto; }
.ruler-track { touch-action:pan-y pinch-zoom; cursor:grab; user-select:none; -webkit-user-select:none; font-variant-numeric:tabular-nums; }
.ruler-track.is-dragging,.ruler-track.is-dragging button { cursor:grabbing; }
.ruler-window { position:absolute; inset:0; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 3% 97%,transparent); } /* taste-skill-ignore: requested glass rail fades into the existing stage. */
.ruler-window::before { content:''; position:absolute; left:0; right:0; top:21px; height:1px; background:linear-gradient(90deg,#b7a1cb30,#d9b8f28c,#b7a1cb30); box-shadow:0 1px #ffffff09; } /* taste-skill-ignore: optical edge on approved glass rail. */
.ruler-axis { position:absolute; inset:0; }
.ruler-event { position:absolute; top:0; width:66px; height:70px; display:block; transform:translateX(-50%); padding:0; border:0; background:none; color:#b9afc0; cursor:pointer; }
.ruler-event>i { position:absolute;width:14px;height:14px;top:15px;left:26px;opacity:var(--point-opacity,1); }
.ruler-event>span { position:absolute; top:44px; left:50%; transform:translateX(-50%); font:400 16px/1.3 var(--channel-serif); white-space:nowrap; }
.ruler-event.is-centered>span,.ruler-event.is-edge { opacity:0; pointer-events:none; }
/* Keep the date anchor out of the shared button press transform. */
button.ruler-event:active:not(:disabled) { transform:translateX(-50%); }
.ruler-event:active>i { transform:scale(.92); }
@media(hover:hover) and (pointer:fine) { .ruler-event:hover { color:#fff1ff; }.ruler-event:hover>i { border-color:#fff; } }
.ruler-track #rulerInput { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); }
.ruler-orb-button { position:absolute; top:0; left:50%; width:44px; height:44px; transform:translateX(-50%); margin:0; padding:0; border:0; border-radius:50%; background:none; z-index:3; pointer-events:none; }
.ruler-track .ruler-orb-button,.ruler-track .ruler-orb,.ruler-track:focus-within .ruler-orb,.ruler-track .ruler-event:focus { outline:none; } /* Requested: no click or keyboard halo around the date orb. */
.ruler-track #rulerSelected { position:absolute; top:42px; left:50%; min-height:30px; padding:0 10px; transform:translateX(-50%); font:400 22px/1.4 var(--channel-serif); color:#eadcf5; letter-spacing:.02em; pointer-events:none; transition:none; }
#rulerToday { position:absolute; z-index:4; top:-43px; left:50%; right:auto; transform:translateX(-50%); box-sizing:border-box; width:76px; height:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:19px 0 0; border:0; border-radius:30px; background:none; color:#e4d1ef; font:400 11px/1.3 var(--sans); cursor:pointer; }
#rulerToday::before { content:''; position:absolute; inset:19px 0 0; border:1px solid #cfb2e35e; border-radius:30px; background:linear-gradient(135deg,#b69cc322,#24212de8); box-shadow:inset 0 1px #e7d1f91c; transition:background 160ms ease,border-color 160ms ease,transform 140ms ease; } /* taste-skill-ignore: approved compact lavender glass return control. */
#rulerToday>svg,#rulerToday>span { position:relative; }
#rulerToday[hidden] { display:none; }
#rulerToday svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.3; }
#rulerToday:focus-visible { outline:none; }
#rulerToday:focus-visible::before { outline:2px solid #e7d1f9; outline-offset:3px; }
button#rulerToday:active:not(:disabled) { transform:translateX(-50%); }
#rulerToday:active::before { transform:scale(.96); }
@media(hover:hover) and (pointer:fine) { #rulerToday:hover { color:#fff3ff; } #rulerToday:hover::before { border-color:#e2c6f195; background:#5b466664; } }
.theater-ruler.is-empty .ruler-orb { opacity:.45; }
.theater-ruler.is-empty .ruler-heading { visibility:hidden; }
#page-home .theater-next { cursor:default; }
#page-home #homeNextStream { min-width:0; max-width:calc(100% - 80px); min-height:44px; border:0; border-radius:7px; background:none; padding:4px 0; color:inherit; text-align:inherit; cursor:pointer; box-shadow:none; }
#homeNextStream:disabled { cursor:default; opacity:1; }
#page-home #homeNextStream:focus-visible { outline:2px solid #e1c5f2; outline-offset:6px; }
#homeNextStream .v148-title { text-decoration:underline; text-decoration-color:transparent; text-underline-offset:5px; transition:color 160ms ease,text-decoration-color 160ms ease; }
#homeNextStream[data-kind="live"] small { color:#f0d2ff; }
@media(hover:hover) and (pointer:fine) { #homeNextStream:not(:disabled):hover .v148-title { color:#fff1ff; text-decoration-color:#c9abde80; } }
@media(max-width:900px) { #page-home:is(.active,.section-departing) .theater-ruler { width:90%; }.ruler-heading { font-size:11px; } }
@media(max-width:600px) {
  #page-home:is(.active,.section-departing) .theater-ruler { width:calc(100% - 32px); margin-top:46px; gap:12px; }
  .ruler-track #rulerSelected { font-size:20px; top:43px; }.ruler-event>span { font-size:14px; top:46px; }
  .ruler-heading { top:-22px; left:-38px; font-size:10px; }
  #rulerToday { width:70px; font-size:10px; }
  #page-home #homeNextStream { max-width:calc(100% - 48px); justify-content:center; }
  #homeNextStream .v148-title { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; max-width:100%; line-height:1.5; overflow:hidden; overflow-wrap:anywhere; white-space:normal; }
}
#page-home .ruler-event>span,#page-home #rulerSelected,#homeNextStream .v148-date,#homeNextStream .v148-time { font-variant-numeric:tabular-nums; }
@media(prefers-reduced-motion:reduce) { #homeNextStream .v148-title { transition:none; } }

.ruler-orb-button .ruler-orb { position:absolute; inset:5px; width:34px; height:34px; transform:none; border:0; background:none; box-shadow:none; transition:none; pointer-events:none; }
.ruler-orb-button .ruler-orb::before,.ruler-orb-button .ruler-orb::after { content:none; }
.ruler-light { position:absolute; top:13px; left:50%; width:min(300px,70%); height:18px; transform:translateX(-50%); pointer-events:none; }
.ruler-light>span { position:absolute; inset:8px 0 auto; height:1px; background:linear-gradient(90deg,transparent,#b889e96b 27%,#eed6ffdc 50%,#b889e96b 73%,transparent); animation:ruler-refraction 8.6s ease-in-out infinite; } /* taste-skill-ignore: stationary reflected light, distinct from the NEXT flow. */
.ruler-light::before { content:''; position:absolute; inset:3px 12%; background:radial-gradient(ellipse,#b580e74d,transparent 70%); filter:blur(2px); animation:ruler-refraction 8.6s ease-in-out infinite; } /* taste-skill-ignore: light lands around the fixed orb; no lateral travel. */
@keyframes ruler-refraction { 0%,100% { opacity:.45; transform:scaleX(.94); } 45% { opacity:.9; transform:scaleX(1.04); } 75% { opacity:.62; transform:scaleX(.99); } }

/* Preserve the existing inward strokes around the selected broadcast detail. */
.theater-next .next-rule { position:relative; height:7px; background:none; overflow:hidden; }
.theater-next .next-rule::before { content:''; position:absolute; left:0; right:0; top:3px; height:1px; background:linear-gradient(90deg,transparent,#dbc4ec88); } /* taste-skill-ignore: explicitly requested glass lighting / continuous approved background. */
.theater-next .next-rule:last-child::before { transform:scaleX(-1); }
.theater-next .next-rule::after { content:''; position:absolute; top:3px; left:0; width:40%; height:1px; background:linear-gradient(90deg,transparent,#dec0f8a6 75%,#f5e5ff); box-shadow:0 0 4px #d0a5ee66; opacity:.85; animation:next-inward 2.8s linear infinite; } /* taste-skill-ignore: one inward light stroke, immediately repeated after its tail exits. */
.theater-next .next-rule:last-child { transform:scaleX(-1); }
.theater-next .next-rule:last-child::before { transform:none; }
@keyframes next-inward { from { transform:translateX(-100%); } to { transform:translateX(250%); } }
.home-motion-paused :is(.orb-depth,.orb-core,.orb-caustic,.orb-rim,.orb-glint,.orb-aura,.orb-emission,.orb-reflection,.ruler-light>span,.status-orb>span),.home-motion-paused .next-rule::after,.home-motion-paused .ruler-light::before { animation-play-state:paused; }

@media(max-width:1350px) {
  .sidebar { height:188px; grid-template-columns:1fr 1fr; padding:18px 4.25% 0; row-gap:12px; }
  .sidebar .nav.is-glass-menu { grid-row:2; grid-column:1/-1; justify-self:center; --menu-size:58px; --menu-step:88px; height:91px; }
  .sidebar .header-actions { grid-row:1; grid-column:2; }.sidebar .brand { grid-row:1; grid-column:1; }
  body.theater:has(#page-home.active) { --home-header-height:188px; }
  .sidebar .brand,.sidebar .header-actions { height:44px; }
  .sidebar .social-icon { width:42px; height:42px; }
  .sidebar .channel-icons { gap:10px; }
}
@media(max-width:600px) {
  .sidebar { height:170px; padding:14px 16px 0; gap:12px; }
  .sidebar .nav.is-glass-menu { --menu-size:46px; --menu-step:clamp(54px,15vw,70px); height:79px; }
  .sidebar .social-icon { width:32px; height:40px; }
  .sidebar .channel-icons { gap:6px; }
  .sidebar .header-actions { gap:12px; }
  .sidebar .theater-wordmark { font-size:22px; letter-spacing:.14em; }
  .sidebar .header-actions #adminLoginPill { width:72px; min-height:44px; padding:8px; gap:5px; border-radius:12px; font-size:11px; }
  #adminLoginPill svg { width:14px; height:14px; }
  #page-home .theater-floor { top:calc(100% - 120px); height:650px; background-size:auto 100%; background-position:center bottom; mask-image:linear-gradient(transparent,#000 150px,#000 80%,transparent); } /* taste-skill-ignore: fade the floor only below the portrait, including on phones. */
  #page-home:is(.active,.section-departing) .theater-status { grid-template-columns:12px minmax(0,1fr) 26px; column-gap:10px; }
  #page-home:is(.active,.section-departing) .status-orb { width:11px; height:11px; }
  .status-copy { padding-right:3px; }
  .status-copy::after { right:-4px; }
  #page-home .theater-ruler { gap:12px; }
  .ruler-arrow { width:44px; height:44px; }
}
@media(max-width:380px) {
  .sidebar { height:226px; grid-template-columns:1fr; grid-template-rows:30px 44px 79px; row-gap:14px; }
  .sidebar .brand { grid-row:1; grid-column:1; justify-self:center; height:30px; }
  .sidebar .header-actions { grid-row:2; grid-column:1; justify-self:center; }
  .sidebar .nav.is-glass-menu { grid-row:3; grid-column:1; }
}
@media(prefers-reduced-motion:reduce) {
  .ruler-orb *, .ruler-light>span,.ruler-light::before,.status-orb>span,.theater-next .next-rule::after { animation:none!important; }
  #rulerToday { transition:none; }
  .status-orb::after,.status-orb>span { transition:none; }
  .ruler-light>span,.ruler-light::before { opacity:.6; }
  .theater-next .next-rule::after,.theater-next .next-flow { opacity:0; }

  .sidebar .header-actions #adminLoginPill,.sidebar .header-actions #adminLoginPill::before { transition:none; }
}

/* Same glass body, caustic and highlights as the profile dial, at rail scale. */
.timeline-glass-orb{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.timeline-orb-bloom{animation:timeline-glass-breathe 8.2s ease-in-out infinite}
.timeline-orb-emission{mix-blend-mode:screen;animation:timeline-volume-breathe 8.2s ease-in-out infinite}
.orb-response{mix-blend-mode:screen}
.ruler-event>i .timeline-glass-orb{opacity:.94}
.ruler-event.is-live>i .timeline-glass-orb,.ruler-event.is-next>i .timeline-glass-orb{opacity:1}
@keyframes timeline-glass-breathe{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes timeline-volume-breathe{0%,100%{opacity:.8}50%{opacity:1}}
.home-motion-paused :is(.timeline-orb-bloom,.timeline-orb-emission){animation-play-state:paused}
/* Pointer reflection belongs to the line, never to date selection or dragging. */
.ruler-pointer-light{position:absolute;left:0;top:21px;width:176px;height:24px;pointer-events:none;opacity:0;transform:translate3d(-200px,-12px,0);z-index:1}
.ruler-pointer-light::before{content:'';position:absolute;inset:2px 0;background:radial-gradient(ellipse,#b58be33d,transparent 69%)} /* taste-skill-ignore: requested reflected lavender light. */
.ruler-pointer-light::after{content:'';position:absolute;left:48px;right:48px;top:12px;height:1px;background:linear-gradient(90deg,transparent,#e8ceffc4,transparent)} /* taste-skill-ignore: light follows the approved glass edge. */
@media(prefers-reduced-motion:reduce){.timeline-glass-orb *{animation:none!important}.ruler-pointer-light{display:none}}

/* Material is shared; light describes the broadcast state. Past glass is clear. */
.ruler-event.is-past>i .timeline-glass-orb{opacity:.86}
.ruler-event.is-empty>i .timeline-glass-orb{opacity:.52}
.ruler-event:is(.is-past,.is-empty) .orb-rail-refraction{stroke:#c8c8c8}
.ruler-event.is-live>i .timeline-glass-orb{animation:timeline-live-light 4.8s ease-in-out infinite}
@keyframes timeline-live-light{0%,100%{opacity:.8}50%{opacity:1}}
.home-motion-paused .ruler-event.is-live>i .timeline-glass-orb{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.ruler-event.is-live>i .timeline-glass-orb{animation:none}}