/* Liquid Glass: the controls that float over the room are clear, refracting glass with a bright top edge, after
   Apple's material in iOS 26. The room behind them carries a soft glow of the sound's illustration, so the glass
   always has light to bend. Flat surfaces (cards, panels, dialogs) stay flat. */
:root {
  --glass-fill:#ffffff8a; --glass-fill-top:#ffffffc4; --glass-edge:#ffffffd6; --glass-spec:#ffffff; --glass-shade:#0e241c12; --glass-ring:#20352b1f;
  --glass-on:#ffffffeb; --glass-blur:blur(22px) saturate(1.7); --room-glow:.09; --mini-play:#2e5745; --mini-glyph:#fffef4; --room-art:url('./art/drift.svg');
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) { --glass-fill:#ffffff0b; --glass-fill-top:#ffffff1a; --glass-edge:#ffffff1f; --glass-spec:#ffffff38; --glass-shade:#00000033; --glass-ring:#00000040; --glass-on:#ffffff24; --room-glow:.34; --mini-play:#e3e9bd; --mini-glyph:#294331 }
}
:root[data-theme="night"] { --glass-fill:#ffffff0b; --glass-fill-top:#ffffff1a; --glass-edge:#ffffff1f; --glass-spec:#ffffff38; --glass-shade:#00000033; --glass-ring:#00000040; --glass-on:#ffffff24; --room-glow:.34; --mini-play:#e3e9bd; --mini-glyph:#294331 }

/* The room: the page ground lies on the root, and a blurred wash of the current illustration glows through it.
   The wash is drawn at a quarter of the viewport and scaled up by four: blurred to this degree nothing is lost, and
   the blur costs a sixteenth of the pixels on every frame. Two layers cross-fade when the sound changes. */
body:not(.in-focus-view) { background:transparent }
body:not(.in-focus-view):before,body:not(.in-focus-view) main:before { content:''; position:fixed; z-index:-1; pointer-events:none; top:50%; left:50%; width:calc(25vw + 6vmax); height:calc(25vh + 6vmax);
  background:var(--room-art-prev,var(--room-art)) 50% 30%/cover no-repeat; filter:blur(18px) saturate(1.15); opacity:var(--room-glow); transform:translate(-50%,-50%) scale(4); transition:opacity 1.2s ease }
body:not(.in-focus-view) main:before { background-image:var(--room-art) }
@keyframes glow-in { from { opacity:0 } }
body.glow-in main:before { animation:glow-in 1.6s ease both }

/* One recipe for every floating control. */
.sidebar nav,.session-kind,.picker-toggle,.volume-row .icon-button,.mini-player {
  background:linear-gradient(180deg,var(--glass-fill-top),var(--glass-fill)); border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 var(--glass-spec),inset 0 -1px 0 var(--glass-shade),0 0 0 .5px var(--glass-ring);
}
/* The selected segment is a brighter lens resting in the glass track. */
.sidebar nav { padding:4px }
.nav-item.active,.session-kind button[aria-pressed="true"] { background:var(--glass-on); color:var(--text); border-color:transparent; box-shadow:inset 0 1px 0 var(--glass-spec),0 0 0 .5px var(--glass-ring) }
.nav-item,.session-kind button { transition:background-color .45s var(--ease-calm,ease),color .35s,box-shadow .45s,transform .4s var(--ease-calm,ease) }
@media(hover:hover) { .nav-item:not(.active):hover,.picker-toggle:hover { background:linear-gradient(180deg,var(--glass-on),var(--glass-fill)) } }
.picker-toggle { padding-right:18px }

/* On the player card the glass is lit from the illustration behind it. */
.player-heading .icon-button,.player .secondary-control { background:linear-gradient(180deg,#ffffff24,#ffffff0a); border:1px solid #ffffff2b; color:#f1f3e6;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); box-shadow:inset 0 1px 0 #ffffff40,inset 0 -1px 0 #0000001f }
@media(hover:hover) { .player-heading .icon-button:hover,.player .secondary-control:hover { background:linear-gradient(180deg,#ffffff33,#ffffff12) } }
.player .play-button { box-shadow:inset 0 1px 0 #ffffffb3,inset 0 -2px 3px #6b7a4a33 }
.icon-button:active,.picker-toggle:active,.mini-player button:active { transform:scale(.94) }

/* A small glass player floats above the home indicator once the big Play button scrolls away on a phone. */
.mini-player { position:fixed; z-index:12; left:50%; bottom:calc(12px + env(safe-area-inset-bottom,0px)); display:none; align-items:center; gap:6px; width:min(380px,calc(100vw - 32px)); padding:6px 6px 6px 6px; border-radius:100px; color:var(--text);
  opacity:0; visibility:hidden; transform:translate(-50%,24px) scale(.96); transition:opacity .4s var(--ease-calm,ease),transform .5s var(--ease-calm,ease),visibility 0s .5s }
.mini-open { flex:1; min-width:0; display:flex; align-items:center; gap:12px; min-height:44px; padding:0 8px 0 0; border-radius:100px; text-align:left; font-size:14px; font-weight:500 }
.mini-open .tile-art { width:40px; height:40px; flex-shrink:0 }
.mini-open span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mini-play { width:44px; height:44px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; background:var(--mini-play); box-shadow:inset 0 1px 0 #ffffff66; transition:transform .3s var(--ease-calm,ease) }
.mini-play .play-glyph { width:11px; height:13px; margin-left:2px; border:0; background:var(--mini-glyph); clip-path:polygon(0 0,100% 50%,0 100%) }
:is(.is-playing,.starting) .mini-play .play-glyph { width:12px; height:14px; margin:0; border:0; clip-path:polygon(0 0,34% 0,34% 100%,0 100%,0 0,66% 0,100% 0,100% 100%,66% 100%,66% 0) }
.mini-play:disabled { opacity:.5 }
@media(max-width:760px) {
  .mini-player { display:flex }
  .player-away:not(.in-focus-view) .mini-player { opacity:1; visibility:visible; transform:translate(-50%,0); transition:opacity .4s var(--ease-calm,ease),transform .5s var(--ease-calm,ease),visibility 0s }
  .player-away #toast { bottom:calc(84px + env(safe-area-inset-bottom,0px)) }
  /* Room for the floating player under the last row. */
  main { padding-bottom:calc(84px + env(safe-area-inset-bottom,0px)) }
}

/* In the iPhone app the page runs under the status bar; a soft glass edge keeps the clock readable over content. */
.native-app body:not(.in-focus-view):after { content:''; position:fixed; z-index:11; top:0; left:0; right:0; height:env(safe-area-inset-top,0px); pointer-events:none;
  background:linear-gradient(var(--bg),transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); -webkit-mask-image:linear-gradient(#000 55%,transparent); mask-image:linear-gradient(#000 55%,transparent) }

.native-app .focus-view { min-height:calc(100svh - 50px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) }

@media(prefers-reduced-transparency:reduce) {
  body:not(.in-focus-view):before,body:not(.in-focus-view) main:before,.native-app body:not(.in-focus-view):after { display:none }
  .sidebar nav,.session-kind,.picker-toggle,.volume-row .icon-button,.mini-player,.player-heading .icon-button,.player .secondary-control { -webkit-backdrop-filter:none; backdrop-filter:none }
  .sidebar nav,.session-kind,.picker-toggle,.volume-row .icon-button,.mini-player { background:var(--panel); border-color:var(--line) }
}
@media(prefers-reduced-motion:reduce) { .mini-player,.player-away:not(.in-focus-view) .mini-player { transition:opacity .2s,visibility 0s } }

/* Changing mode is one movement: the title, the session pill and the room's tint go together. */
[data-vt="mode"]::view-transition-old(root) { animation:vt-out .28s ease both }
[data-vt="mode"]::view-transition-new(root) { animation:vt-in .4s ease both }
@keyframes vt-out { to { opacity:0 } }
@keyframes vt-in { from { opacity:0 } }
[data-vt="mode"] .page-title { view-transition-name:page-title }
[data-vt="mode"] .session-kind { view-transition-name:session-kind }
[data-vt="mode"] .player { view-transition-name:player }
[data-vt="mode"]::view-transition-group(player) { animation-duration:0s }
[data-vt="mode"]::view-transition-old(player),[data-vt="mode"]::view-transition-new(player) { animation:none; mix-blend-mode:normal }
[data-vt="mode"]::view-transition-old(player) { display:none }

/* On a phone the account sheet rises from the bottom edge and can be pulled back down. */
@media(max-width:600px) {
  #account-dialog { opacity:1; transform:translateY(100%); transition:transform .5s var(--ease-calm,ease),overlay .5s allow-discrete,display .5s allow-discrete }
  #account-dialog[open] { transform:none }
  #account-dialog:not([open]) { transition-duration:.32s }
  @starting-style { #account-dialog[open] { transform:translateY(100%) } }
  #account-dialog.dragging { transition:none }
  .account-hero { touch-action:none; cursor:grab }
}
@media(prefers-reduced-motion:reduce) { [data-vt="mode"]::view-transition-old(root),[data-vt="mode"]::view-transition-new(root) { animation-duration:.001s } }
@media(prefers-contrast:more) { .sidebar nav,.session-kind,.picker-toggle,.volume-row .icon-button,.mini-player { border-color:var(--line) } }

/* iPhone app on iOS 26: the mode bar and the mini player are Apple's own Liquid Glass, drawn natively over the page
   (app/ios/App/App/StyllGlass.swift), so the page's copies step aside and leave room for them at the bottom. */
@media(max-width:760px) {
  .native-glass .sidebar nav,.native-glass .mini-player { display:none }
  .native-glass body:not(.in-focus-view) main { padding-bottom:calc(148px + env(safe-area-inset-bottom,0px)) }
  .native-glass #toast { bottom:calc(76px + env(safe-area-inset-bottom,0px)) }
  .native-glass .player-away #toast { bottom:calc(142px + env(safe-area-inset-bottom,0px)) }
}