/* Layout: one-column station list under a navy masthead that ends in
   layered cloud waves (from the Stratus Radio logo); a docked player
   sits at the bottom of the screen. */
:root {
  /* Brand colours sampled from the logo */
  --brand-navy: #021A4F;
  --brand-royal: #0052F0;
  --brand-bright: #0B7BF7;
  --brand-sky: #18B9FD;

  --bg: #F5F8FF;
  --surface: #E9F0FD;
  --ink: #021A4F;
  --muted: #53648A;
  --line: #D8E2F4;
  --accent: #0052F0;
  --accent-ink: #FFFFFF;
  --focus: #0B7BF7;
  --header-bg: #021A4F;
  --header-fg: #FFFFFF;
  --header-sub: #9FDCFF;
  --wave-back: #18B9FD;
  --player-bg: #021A4F;
  --player-fg: #FFFFFF;
  --player-muted: #A9BCE0;
  --live: #18B9FD;
  --chip-on-bg: #021A4F;
  --chip-on-fg: #FFFFFF;
  --star-on: #0B7BF7;
  --scrim: rgba(2, 10, 30, 0.55);

  --tile-navy-bg: #021A4F;   --tile-navy-fg: #18B9FD;
  --tile-royal-bg: #0052F0;  --tile-royal-fg: #FFFFFF;
  --tile-bright-bg: #0B7BF7; --tile-bright-fg: #FFFFFF;
  --tile-sky-bg: #18B9FD;    --tile-sky-fg: #021A4F;
  --tile-ice-bg: #D6ECFF;    --tile-ice-fg: #0046D2;
  --tile-deep-bg: #0A2F86;   --tile-deep-fg: #9FE0FF;

  /* Lock-screen artwork: same in both themes */
  --art-navy-bg: #021A4F;   --art-navy-fg: #18B9FD;
  --art-royal-bg: #0052F0;  --art-royal-fg: #FFFFFF;
  --art-bright-bg: #0B7BF7; --art-bright-fg: #FFFFFF;
  --art-sky-bg: #18B9FD;    --art-sky-fg: #021A4F;
  --art-ice-bg: #D6ECFF;    --art-ice-fg: #0046D2;
  --art-deep-bg: #0A2F86;   --art-deep-fg: #9FE0FF;

  --display: 'Fredoka', 'Arial Rounded MT Bold', 'Nunito', system-ui, sans-serif;
  --body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.5rem;
  --step-3: 2rem;

  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --player-h: 72px;
  --mini-h: 52px;
  --player-gap: 10px;
  --player-edge: transparent;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #061230;
  --surface: #0E1F48;
  --ink: #EAF2FF;
  --muted: #9DB1D6;
  --line: #1B2F5E;
  --accent: #2F7BFF;
  --accent-ink: #FFFFFF;
  --focus: #5CCBFF;
  --header-bg: #010C26;
  --header-fg: #FFFFFF;
  --header-sub: #8FD3FF;
  --wave-back: #0B7BF7;
  --player-bg: #010A20;
  --player-fg: #FFFFFF;
  --player-muted: #93A8CF;
  --player-edge: rgba(159, 220, 255, 0.12);
  --live: #3CCBFF;
  --chip-on-bg: #EAF2FF;
  --chip-on-fg: #021A4F;
  --star-on: #3CCBFF;
  --scrim: rgba(0, 4, 14, 0.7);
  --tile-navy-bg: #12306F;   --tile-navy-fg: #3CCBFF;
  --tile-ice-bg: #17366E;    --tile-ice-fg: #A9DEFF;
  --tile-deep-bg: #0C3A9E;   --tile-deep-fg: #B4E7FF;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--step-0)/1.45 var(--body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Masthead */
.top { background: var(--bg); }
.top-inner {
  background: var(--header-bg); color: var(--header-fg);
  padding-top: calc(env(safe-area-inset-top, 0px) + 14px);
  padding-bottom: 4px;
  padding-left: max(var(--gutter-l), calc((100% - 760px) / 2 + 16px));
  padding-right: max(var(--gutter-r), calc((100% - 760px) / 2 + 16px));
  display: flex; align-items: center; gap: 12px;
}
.logo {
  flex: none; width: 60px; height: 60px; border-radius: 50%;
  display: block;
}
.brand { flex: 1; min-width: 0; }
.wordmark {
  margin: 0;
  font: 700 var(--step-3)/1 var(--display);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.wordmark .w1 { color: var(--header-fg); }
.wordmark .w2 { color: var(--brand-sky); }
.tagline {
  margin: 4px 0 0;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--header-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wave { display: block; width: 100%; height: 30px; }
.wave-front { fill: var(--header-bg); }
.wave-back { fill: var(--wave-back); }

/* Round buttons at the top right: share the app, and the light / dark switch */
.top-actions { flex: none; align-self: flex-start; margin-top: 2px; display: flex; gap: 8px; }
.top-btn {
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; color: var(--header-fg);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
}
.top-btn svg { width: 20px; height: 20px; grid-area: 1 / 1; }
.theme-btn svg { display: none; }
/* The icon shows what a tap switches to: a moon in light mode, a sun in dark mode. */
.theme-btn[data-mode="light"] .i-dark,
.theme-btn[data-mode="dark"] .i-light,
.theme-btn:not([data-mode]) .i-dark { display: block; }

/* Slim top bar, shown once the big header has scrolled away (like Spotify's title bar) */
.mini-bar {
  position: fixed; z-index: 24; left: 0; right: 0;
  top: env(safe-area-inset-top, 0px); height: var(--mini-h);
  display: flex; align-items: center; gap: 10px;
  padding-left: max(var(--gutter-l), calc((100% - 760px) / 2 + 16px));
  padding-right: max(calc(var(--gutter-r) - 8px), calc((100% - 760px) / 2 + 8px));
  background: var(--header-bg); color: var(--header-fg);
  cursor: pointer;
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.mini-bar.is-on { transform: none; opacity: 1; pointer-events: auto; }
.mini-logo { flex: none; width: 32px; height: 32px; border-radius: 50%; display: block; }
.mini-word { flex: 1; min-width: 0; font: 700 1.3125rem/1 var(--display); letter-spacing: -0.01em; white-space: nowrap; }
.mini-word .w2 { color: var(--brand-sky); }
.mini-search {
  flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: transparent; color: var(--header-fg); cursor: pointer;
}
.mini-search svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { .mini-bar { transition: none; } }

/* Country and station-type chips stay pinned under the slim bar while the list scrolls */
.filters {
  position: sticky; z-index: 15;
  top: calc(env(safe-area-inset-top, 0px) + var(--mini-h));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
  margin: 6px calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter-l));
  padding: 6px var(--gutter-r) 8px var(--gutter-l);
  background: var(--bg);
  transition: box-shadow 0.2s ease;
}
.filters.is-stuck { box-shadow: 0 10px 14px -12px rgba(2, 16, 50, 0.35); }

/* Main column */
.wrap {
  max-width: 760px; margin: 0 auto;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  padding-block: 8px calc(var(--player-space, calc(var(--player-h) + var(--player-gap) + env(safe-area-inset-bottom, 0px))) + 20px);
}
.tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.search {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 0 16px;
  color: var(--muted);
}
.search:focus-within { border-color: var(--focus); }
.search svg { width: 20px; height: 20px; flex: none; }
.search input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 16px; /* 16px stops iOS zooming in */
  padding: 13px 0;
  outline: none;
}
.search input::placeholder { color: var(--muted); }

.chips {
  display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter-l));
  padding: 2px var(--gutter-r) 4px var(--gutter-l);
}
.chips::-webkit-scrollbar { display: none; }
.chips.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.chips.more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
.chips.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.chip {
  flex: none;
  border: 1.5px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 0.9375rem; font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.chip .n { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 4px; }
.chip[aria-pressed="true"] { background: var(--chip-on-bg); border-color: var(--chip-on-bg); color: var(--chip-on-fg); }
.chip[aria-pressed="true"] .n { color: var(--chip-on-fg); opacity: 0.7; }
.chips-sub { gap: 4px; margin-top: -4px; }
.chips-sub .chip { border-color: transparent; padding: 5px 12px; font-size: 0.875rem; color: var(--muted); }
.chips-sub .chip[aria-pressed="true"] { background: var(--surface); border-color: var(--surface); color: var(--accent); }
.chips-sub .chip[aria-pressed="true"] .n { color: var(--accent); opacity: 0.75; }

.count {
  margin: 18px 0 6px;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}

/* Station rows */
.list { list-style: none; margin: 0; padding: 0; }
.st {
  display: flex; align-items: center; gap: 4px;
  border-bottom: 1px solid var(--line);
}
.st-main {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 14px;
  background: none; border: 0; text-align: left;
  padding: 12px 4px 12px 0;
  cursor: pointer;
}
.st-text { min-width: 0; display: grid; gap: 1px; }
.st-name {
  font: 600 var(--step-1)/1.25 var(--display);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-meta, .st-desc {
  font-size: var(--step--1); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-desc { color: var(--ink); opacity: 0.8; }
@media (max-width: 639px) { .st-also { display: none; } }
.st.is-current .st-name { color: var(--accent); }

/* Dial tile */
.tile {
  flex: none;
  width: 58px; height: 58px; border-radius: 16px;
  display: grid; place-content: center; text-align: center;
  background: var(--tile-bg, var(--tile-navy-bg));
  color: var(--tile-fg, var(--tile-navy-fg));
  font-family: var(--display);
  line-height: 0.95;
  position: relative; overflow: hidden;
}
/* Station logo covers the tile; the frequency/letters underneath show if it fails to load */
/* On opening, the list and player appear once the logos on screen are ready, so they never pop in */
.logos-pending .list, .logos-pending #p-tile { opacity: 0; animation: show-anyway 0s 1s forwards; }
.list, #p-tile { transition: opacity 0.15s ease; }
@keyframes show-anyway { to { opacity: 1; } } /* safety net if the script never runs */
.tile-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.tile.has-logo > span { visibility: hidden; }
.tile.has-logo::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(2, 26, 79, 0.08);
}
.tile-freq { font-weight: 600; font-size: 1.3125rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.tile-freq.is-long { font-size: 1.125rem; }
.tile-band { font-family: var(--body); font-weight: 700; font-size: 0.625rem; letter-spacing: 0.14em; margin-top: 3px; }
.tile-short { font-weight: 700; font-size: 1.25rem; }
.tile-sm { width: 48px; height: 48px; border-radius: 14px; }
.tile-sm .tile-freq, .tile-sm .tile-short { font-size: 1.0625rem; }
.tile-sm .tile-freq.is-long { font-size: 0.9375rem; }
.tile-sm .tile-band { font-size: 0.5625rem; }
.tile-sm:empty { background: var(--player-muted); opacity: 0.25; }
.t-navy   { --tile-bg: var(--tile-navy-bg);   --tile-fg: var(--tile-navy-fg); }
.t-royal  { --tile-bg: var(--tile-royal-bg);  --tile-fg: var(--tile-royal-fg); }
.t-bright { --tile-bg: var(--tile-bright-bg); --tile-fg: var(--tile-bright-fg); }
.t-sky    { --tile-bg: var(--tile-sky-bg);    --tile-fg: var(--tile-sky-fg); }
.t-ice    { --tile-bg: var(--tile-ice-bg);    --tile-fg: var(--tile-ice-fg); }
.t-deep   { --tile-bg: var(--tile-deep-bg);   --tile-fg: var(--tile-deep-fg); }

/* Live bars on the playing station */
.eq { display: none; gap: 3px; align-items: flex-end; height: 18px; margin-left: auto; padding-left: 6px; flex: none; }
.st.is-live .eq { display: flex; }
.eq i { width: 3px; height: 100%; background: var(--accent); border-radius: 2px; transform-origin: bottom; animation: eq 0.9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -0.3s; }
.eq i:nth-child(3) { animation-delay: -0.6s; }
@keyframes eq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }

.fav, .share {
  flex: none; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%;
  color: var(--muted); cursor: pointer;
}
.fav svg { width: 22px; height: 22px; }
.share svg { width: 20px; height: 20px; }
.st .share { margin-right: -6px; }
.fav[aria-pressed="true"] { color: var(--star-on); }
.fav[aria-pressed="true"] path { fill: currentColor; }

.empty { padding: 32px 0; text-align: center; }
.empty-title { margin: 0; font: 600 var(--step-1)/1.3 var(--display); }
.empty-body { margin: 6px auto 0; color: var(--muted); max-width: 34ch; }

/* Company credit under the list */
.credit {
  margin-top: 28px; text-align: center;
  font-size: var(--step--1); color: var(--muted);
}
.credit a { color: inherit; text-decoration: none; }
/* Small "App" pill beside the credit: downloads the Android app */
.credit .get-app {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  margin: -6px 0 -6px 8px; padding: 6px 12px;
  border: 1.5px solid var(--line); border-radius: 999px;
  color: var(--ink); font-weight: 700; font-size: 0.75rem; line-height: 1;
}
.credit .get-app[hidden] { display: none; }
.get-app svg { width: 15px; height: 15px; }

/* Buttons */
.btn-outline {
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  border-radius: 999px; padding: 10px 18px; font-weight: 700; cursor: pointer;
}
.btn-text {
  border: 0; background: none; color: var(--accent); font-weight: 700; padding: 10px 4px; cursor: pointer;
}

/* When Stratus is added to the home screen, the page runs under the iPhone's clock and
   battery and below the floating player. These keep both areas tidy (they have no size
   in the browser, where Safari's own bars cover those areas). */
.statusbar-bg {
  position: fixed; top: 0; left: 0; right: 0; z-index: 25; pointer-events: none;
  height: env(safe-area-inset-top, 0px);
  background: var(--header-bg);
}
.player-shade {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 19; pointer-events: none;
  height: calc(var(--player-space, 110px) + 16px);
  background: linear-gradient(to bottom, transparent, var(--bg) 28px);
}

/* Floating player */
.player {
  position: fixed; z-index: 20;
  left: max(var(--player-gap), env(safe-area-inset-left, 0px));
  right: max(var(--player-gap), env(safe-area-inset-right, 0px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--player-gap));
  max-width: 744px; margin: 0 auto;
  background: var(--player-bg); color: var(--player-fg);
  border: 1px solid var(--player-edge);
  border-radius: 24px;
  box-shadow: 0 12px 32px rgba(2, 16, 50, 0.3), 0 2px 8px rgba(2, 16, 50, 0.18);
}
.player-inner {
  min-height: var(--player-h);
  padding: 10px 10px 10px 12px;
  display: flex; align-items: center; gap: 12px;
}
.p-text { flex: 1; min-width: 0; }
.p-name, .p-status { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-name { font: 600 var(--step-1)/1.25 var(--display); }
.p-status { font-size: var(--step--1); color: var(--player-muted); }
.p-status .live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--live); margin-right: 6px; vertical-align: 1px;
}
/* Long song titles scroll inside this box (see syncMarquee in app.js) */
.p-scroll {
  display: inline-block; max-width: calc(100% - 13px); vertical-align: bottom;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.p-scroll-in { display: inline-flex; white-space: nowrap; will-change: transform; }
.p-scroll-t { flex: none; }
.p-scroll.is-long {
  width: calc(100% - 13px);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
}
.p-scroll.is-long.is-moving {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 16px), transparent);
}
@media (prefers-reduced-motion: reduce) {
  .p-scroll-in, .p-scroll-t { display: inline; }
  .p-scroll.is-long { -webkit-mask-image: none; mask-image: none; }
}
.p-status a { color: var(--player-fg); }
.p-help {
  margin: -4px 0 0; padding: 0 16px 12px;
  font-size: var(--step--1); color: var(--player-muted);
}
.p-help a { color: var(--player-fg); }

.icon-btn {
  flex: none; position: relative;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  padding: 0;
  background: none; border: 1.5px solid transparent; color: var(--player-fg); cursor: pointer;
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.icon-btn.is-on { border-color: var(--brand-sky); color: var(--brand-sky); }
.sleep-left {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  font: 700 0.625rem/15px var(--body); font-variant-numeric: tabular-nums;
  background: var(--brand-sky); color: var(--brand-navy);
  border-radius: 999px; padding: 0 5px; white-space: nowrap;
}

.play-btn {
  flex: none; position: relative;
  width: 56px; height: 56px; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--brand-sky), var(--brand-royal) 70%);
  color: #FFFFFF; border: 0; cursor: pointer;
}
.play-btn:disabled { opacity: 0.4; cursor: default; }
.play-btn svg { width: 26px; height: 26px; grid-area: 1 / 1; }
.play-btn .i-pause, .play-btn .spinner { display: none; }
.player[data-state="live"] .play-btn .i-play,
.player[data-state="buffering"] .play-btn .i-play,
.player[data-state="connecting"] .play-btn .i-play,
.player[data-state="reconnecting"] .play-btn .i-play { display: none; }
.player[data-state="live"] .play-btn .i-pause { display: block; }
.player[data-state="buffering"] .play-btn .i-pause,
.player[data-state="connecting"] .play-btn .i-pause,
.player[data-state="reconnecting"] .play-btn .i-pause { display: block; opacity: 0.55; }
.player[data-state="buffering"] .spinner,
.player[data-state="connecting"] .spinner,
.player[data-state="reconnecting"] .spinner {
  display: block;
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid transparent; border-top-color: #FFFFFF;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Sleep sheet */
.sheet {
  border: 0; padding: 0; margin: auto auto 0;
  width: 100%; max-width: 520px;
  background: var(--bg); color: var(--ink);
  border-radius: 24px 24px 0 0;
}
.sheet::backdrop { background: var(--scrim); }
.sheet-inner {
  padding-top: 18px;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
}
.sheet-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.sheet-titles { flex: 1; min-width: 0; }
.sheet-close { flex: none; padding: 7px 16px; font-size: 0.9375rem; border-color: var(--line); }
.sheet-h { margin: 0; font: 600 var(--step-1)/1.25 var(--display); }
.sheet-h:focus { outline: none; }
.sheet-sub { margin: 2px 0 0; font-size: var(--step--1); color: var(--muted); }
/* Time choices look like the filter chips */
.sleep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sleep-grid button {
  display: flex; justify-content: center; align-items: baseline; gap: 4px;
  padding: 8px 4px; border-radius: 999px;
  border: 1.5px solid var(--line); background: transparent;
  font: 600 0.9375rem/1.2 var(--body); color: var(--ink); cursor: pointer;
}
.sleep-grid small { font: inherit; color: var(--muted); }
.sleep-grid button[aria-pressed="true"] { background: var(--chip-on-bg); border-color: var(--chip-on-bg); color: var(--chip-on-fg); }
.sleep-grid button[aria-expanded="true"]:not([aria-pressed="true"]) { border-color: var(--accent); color: var(--accent); }
.sleep-grid button[aria-pressed="true"] small { color: var(--chip-on-fg); opacity: 0.7; }
/* Custom time: hours and minutes pickers plus Start */
.sleep-custom { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.sleep-pick { display: flex; align-items: center; gap: 6px; font-size: 0.9375rem; font-weight: 600; color: var(--muted); }
.sleep-pick select {
  font: 600 0.9375rem/1.2 var(--body); color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 7px 10px; min-width: 58px; text-align: center;
}
.btn-fill {
  margin-left: auto; border: 0; border-radius: 999px; padding: 9px 18px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font: 700 0.9375rem/1.2 var(--body);
}
.btn-fill:disabled { opacity: 0.4; cursor: default; }
.sleep-off { display: block; margin: 10px 0 -6px; font-size: 0.9375rem; }

/* Short message above the player, e.g. "Link copied" */
.toast {
  position: fixed; z-index: 30; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--player-space, 100px) + 10px);
  margin: 0; padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-size: 0.875rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(2, 16, 50, 0.25);
}

@media (max-width: 400px) {
  .top-actions { gap: 6px; }
  .top-btn { width: 36px; height: 36px; }
  .top-btn svg { width: 18px; height: 18px; }
}
@media (max-width: 360px) {
  .player-inner { gap: 6px; }
  .logo { width: 48px; height: 48px; }
  .wordmark { font-size: 1.5rem; }
}
@media (min-width: 640px) {
  .logo { width: 76px; height: 76px; }
  .wordmark { font-size: 2.5rem; }
  .wave { height: 40px; }
  .tile { width: 64px; height: 64px; }
  .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0 0; }
  .chips.more-left, .chips.more-right { -webkit-mask-image: none; mask-image: none; }
  .sheet { margin: auto; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .eq i, .spinner { animation: none !important; }
  .eq i { transform: scaleY(0.7); }
}