/* Layout, spacing and icon alignment measured from the Moodby web player
   (260px rail, 40px nav rows, 36px top-bar buttons, 165px cards on 24px gaps,
   228x72 genre tiles, 246px station art, 48px track rows). Colours are the
   app's own — this sheet only moves things. Loaded last. */
:root {
  --al-rail: #101522;
  --al-bg: #151b2b;
  --al-panel: #1b2233;
  --al-panel-2: #243044;
  --al-line: #2a3348;
  --al-text: #f4f6fb;
  --al-muted: #9aa3b5;
  --al-faint: #5d6778;
  --al-accent: #C9A227;
  --card: 198px;          /* cover size in rows (desktop; phones set their own below) */
  --card-gap: 24px;
  --gutter: clamp(80px, 8vw, 200px);   /* main column inset from the rail: grows with the window
                                           so wide screens read as a centred column, not corners */
}
button { font-family: inherit; }
.ico { width: 18px; height: 18px; display: block; flex: none; }

/* ---------- scrollbars ---------- */
/* a thin rounded thumb on a clear track: the browser's own light gutter, arrows and all,
   ran down the dark page like a stripe. Rows that hide theirs keep doing so (more specific). */
* { scrollbar-width: thin; scrollbar-color: rgba(244, 246, 251, .18) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(244, 246, 251, .18); border-radius: 10px;
  border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(244, 246, 251, .32); }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }

/* ---------- rail ---------- */
.shell { grid-template-columns: 260px 1fr !important; }
/* the rail is the same tone as the page, with no divider: the two read as one surface */
.side { padding: 20px 8px 120px !important; background: var(--al-bg) !important; border-right: 0 !important; }
.side .logo { font-size: 22px !important; padding: 6px 12px 22px !important; line-height: 1.1; }
.place-wrap { margin: 0 0 22px !important; }
.place, .place-wrap .place {
  display: flex !important; align-items: center; gap: 8px;
  width: 100%; padding: 6px 12px !important; border-radius: 6px;
  color: var(--al-text) !important; font-size: 13px !important; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.place::before {
  content: ""; flex: none; width: 26px; height: 26px; border-radius: 4px;
  background: var(--al-panel-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3b5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10l8-6 8 6v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z'/><path d='M10 20v-6h4v6'/></svg>") center / 15px no-repeat;
}
.place .place-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.place .place-chev { flex: none; width: 16px; height: 16px; color: var(--al-muted); margin-left: 2px; }
.side-nav { gap: 6px !important; }
.side .nav-item, .side a.nav-item {
  display: flex; align-items: center; gap: 16px;
  height: 34px; padding: 0 12px !important; margin: 0;
  border-radius: 6px;
  font-size: 15px !important; font-weight: 600 !important; line-height: 1;
}
.side .nav-item + .nav-item { margin-top: 4px; }
#adminLink[style*="block"] { display: flex !important; }
.side .nav-item .ico { width: 24px; height: 24px; color: var(--al-muted); }
.side .nav-item:hover .ico, .side .nav-item.active .ico { color: var(--al-text); }
.side .nav-item.active .ico { color: var(--al-accent); }
.side-rule { margin: 16px 12px !important; }
.place-menu { top: 44px; }

/* ---------- top bar ---------- */
.top { gap: 8px !important; padding: 18px 80px 0 !important; min-height: 72px; }   /* the bar hugs the rail; the content sits deeper */
.hist-btn, .help-btn {
  width: 36px !important; height: 36px !important; flex: 0 0 36px !important;
  border-width: 1px !important; display: grid !important; place-items: center; padding: 0; font-size: 0;
}
.hist-btn .ico { width: 22px; height: 22px; }
.hist-btn + .search-wrap { margin-left: 24px; }
.search-wrap {
  height: 36px !important; border-radius: 12px !important; border-width: 1px !important;
  padding: 0 12px !important; gap: 8px !important;
  flex: 0 1 480px !important; width: 480px; max-width: 480px; min-width: 0;
}
.search { height: 34px; font-size: 13px; }
/* The bar sits on whatever colour the open page washes it with, so the field carries its
   own dark fill and a lit edge: as a bare outline it disappeared into a pale cover. */
.search-wrap {
  background: rgba(8, 12, 22, .55) !important;
  border-color: rgba(244, 246, 251, .30) !important;
}
.search-wrap:focus-within {
  background: rgba(8, 12, 22, .72) !important;
  border-color: var(--al-accent) !important;
}
.search { color: var(--al-text) !important; }
.search::placeholder { color: rgba(244, 246, 251, .60) !important; opacity: 1; }
.search-ico { font-size: 0 !important; display: grid; place-items: center; color: rgba(244, 246, 251, .60) !important; }
.search-ico .ico { width: 22px; height: 22px; }
.help { margin-left: auto !important; }
.help-btn { border: 0 !important; color: var(--al-muted) !important; }
.help-btn:hover { color: var(--al-text) !important; }
.help-btn .ico { width: 24px; height: 24px; }
.account-btn { padding: 2px 4px 2px 2px !important; gap: 10px !important; }
.account-btn img, #accountInitials { width: 32px !important; height: 32px !important; }
.account-name { font-size: 14px !important; font-weight: 600; }
.account-btn .chev { font-size: 0; width: 14px; height: 14px; color: var(--al-muted); }
.account-btn .chev .ico { width: 14px; height: 14px; }
.help-menu, .account-menu { top: 44px; }

/* ---------- main column & headings ---------- */
.main, #main { padding: 0 var(--gutter) 130px !important; }
.stn, .explore { padding-left: 0 !important; padding-right: 0 !important; }
.stn { padding-top: 0 !important; }
.shell > section { min-width: 0; }
#main h1, .main h1 { font-size: 42px !important; line-height: 1.2; margin: 40px 0 20px !important; }
.row-title { display: flex; align-items: center !important; justify-content: space-between; gap: 24px; margin: 0 0 24px !important; min-height: 25px; }   /* a long title wraps before it meets View All */
.row-title h2 { font-size: 20px !important; font-weight: 600 !important; margin: 0 !important; line-height: 25px; }
/* and never runs past two lines */
.row-title h2 { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.viewall, #main .genre-strip .viewall, .row-title .viewall, button.viewall, a.viewall {
  display: inline-flex; align-items: center;
  color: var(--al-accent) !important;
  font-size: 13px !important; font-weight: 700 !important; letter-spacing: .05em !important; text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0; padding: 0 !important; margin: 0 !important; text-decoration: none !important;
}
.viewall::after {
  content: ""; width: 20px; height: 20px; margin-left: 2px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 6l6 6-6 6'/></svg>") center / contain no-repeat;
}
/* rows are 55px apart (the older sheets and the injected home <style> use !important) */
#main .home-row, .main .home-row, .explore .home-row, .stn .home-row { margin: 0 0 55px !important; padding: 0 !important; }
#main .home-row + .home-row, .explore .home-row + .home-row, .stn .home-row:first-of-type, .explore .home-row:first-of-type { margin-top: 0 !important; }
#main .genre-strip { margin: 0 0 55px !important; }

/* ---------- cards ---------- */
/* home rows scroll sideways; the row bleeds into the right gutter so cards run to the window edge */
.home-row .station-row, .genre-strip + .station-row {
  display: flex !important;
  gap: var(--card-gap) !important;
  overflow-x: auto; overflow-y: hidden;
  margin: 0 calc(-1 * var(--gutter)) 0 0 !important;
  padding: 0 var(--gutter) 6px 0 !important;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  grid-template-columns: none !important;
}
.home-row .station-row::-webkit-scrollbar { display: none; }
.home-row .station-row .station { flex: 0 0 var(--card) !important; width: var(--card) !important; max-width: none !important; scroll-snap-align: start; }
/* greyed placeholder cards (rows with few stations, empty result grids) */
.station.is-empty { opacity: .6; pointer-events: none; }
.station.is-empty .cover { background: var(--al-panel) !important; border: 1px dashed var(--al-line); }
.station.is-empty h3, .station.is-empty p { font-size: 0 !important; background: var(--al-panel-2); border-radius: 4px; }
.station.is-empty h3 { height: 12px; width: 70%; margin: 12px 0 0 !important; padding: 0; }
.station.is-empty p { height: 10px; width: 45%; margin: 8px 0 0 !important; padding: 0; }
.stn .station-row > .muted, .explore .station-row > .muted { grid-column: 1 / -1; margin: 4px 0 0; font-size: 14px; }
/* generated art sits behind the image; only a radio card (flat colour, no image) gets a name */
.cover .cover-name { display: none; }
.cover.no-art .cover-name { display: grid; }
.cover.no-art .cover-img { display: none; }
.cover .cover-img, .stn-art .cover-img { position: relative; z-index: 1; }
.cover, .stn-art, .stn-tracks li > span:first-child, #nowArt, .dash-art { position: relative; overflow: hidden; }
.gen-art { position: absolute; inset: 0; z-index: 0; background: center / cover no-repeat; border-radius: inherit; pointer-events: none; }
.cover .tag, .cover .strip, .stn-badge { z-index: 2; }
#nowArt img, .dash-art img { position: relative; z-index: 1; }
/* grids (tag pages, search, view-all) keep the same card size */
.stn > .station-row, .stn .station-row:not(.home-row .station-row) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, var(--card)) !important;
  gap: 32px var(--card-gap) !important;
  justify-content: start;
  margin-top: 24px !important;
}
.station { background: transparent; border: 0; padding: 0; }
.station .cover { aspect-ratio: 1 / 1; border-radius: 4px !important; overflow: hidden; }
.station .cover .cover-name {
  position: absolute; inset: 0; z-index: 2;
  place-items: center; text-align: center; padding: 14px;
  font-size: 18px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
  color: rgba(244, 246, 251, .92);
}
.station .cover .cover-img { z-index: 1; }
/* the business strip sits under the artwork as its own 19px bar */
.cover .strip {
  left: 0; right: 0; bottom: 0; height: 19px; box-sizing: border-box;
  font-size: 9px !important; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 11px;
  padding: 4px 8px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cover .strip:empty { display: none; }
.station h3 {
  margin: 0 !important; padding: 10px 2px 0;
  font-size: 14px !important; font-weight: 600; line-height: 19px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.station p {
  margin: 0 !important; padding: 4px 2px 0;
  font-size: 13px !important; font-weight: 500; line-height: 17.5px; height: 39px;   /* two lines plus the top padding */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cover .tag, .stn-badge {
  top: 0; right: 0;
  font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 11px;
  padding: 4px 6px; border-radius: 0 4px 0 4px;
}
/* corner tags are bright, one colour per kind: station, radio, album - flush in the top
   right corner everywhere (Home's own inline styles would otherwise inset them 8px) */
.cover .tag { top: 0 !important; right: 0 !important; background: #3ee6c1 !important; color: #04332a !important; }
.radio-card .cover .tag { background: #ffd166 !important; color: #4a2a00 !important; }
.station[data-station-id] .cover .tag { background: #ff8fab !important; color: #4a0016 !important; }
/* a radio card's name takes its cover's own ink */
.radio-card .cover .cover-name { color: inherit !important; }
.cover .tag, .cover .strip, .station .hover-play, .stn-art .stn-badge { position: absolute !important; z-index: 2; }
/* hover play: 48px translucent disc, 12px from the corner, above the strip */
.station .hover-play {
  left: auto !important; top: auto !important; transform: none !important;
  right: 12px !important; bottom: 12px !important; z-index: 3;
  width: 48px !important; height: 48px !important; border-radius: 50%;
  background: rgba(16, 21, 34, .8) !important; color: var(--al-text) !important;
  font-size: 0 !important; line-height: 0; overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease, background-color .15s ease;
  box-shadow: none;
}
.station .cover:has(.strip:not(:empty)) .hover-play { bottom: 31px !important; }
/* the saved-offline badge sits beside the play disc, centred on it, so a playing card shows both */
.station .dl-badge { right: 68px; bottom: 24px; }
.station .cover:has(.strip:not(:empty)) .dl-badge { bottom: 43px; }
.station:hover .hover-play, .station .hover-play.is-on { opacity: 1; pointer-events: auto; }
.station .hover-play:hover { background: rgba(16, 21, 34, .95) !important; }
.station .hover-play.is-on { background: var(--al-accent) !important; color: #111 !important; }
.station .hover-play::before {
  content: ""; position: absolute; left: 50%; top: 50%; margin: 0;
  width: 24px; height: 24px; transform: translate(calc(-50% + 1px), -50%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f4f6fb'><path d='M7 4v16l13-8z'/></svg>") center / contain no-repeat;
}
.station .hover-play.is-on::before {
  width: 16px; height: 14px; transform: translate(-50%, -50%);
  background:
    linear-gradient(#111, #111) left bottom / 4px 60% no-repeat,
    linear-gradient(#111, #111) center bottom / 4px 100% no-repeat,
    linear-gradient(#111, #111) right bottom / 4px 40% no-repeat;
  animation: sycfEq .8s ease-in-out infinite alternate;
}
@keyframes sycfEq { to { background-size: 4px 100%, 4px 40%, 4px 80%; } }

/* ---------- genre tiles (228 x 72, 24px apart) ---------- */
#main .genre-grid, #main .genre-grid-5, .genre-grid, .genre-grid-5 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: var(--card-gap) !important;
  margin: 0 !important;
}
#main .explore .genre-grid, .explore .genre-grid { margin: 0 0 55px !important; }
/* Explore's genres and moods are four to a row: the wide tile. Home, View All, search
   and tag pages use that same tile, not the short six-across one. */
@media (min-width: 981px) {
  #main .genre-grid, .genre-grid,
  #main .genre-grid.genre-grid-4, .genre-grid.genre-grid-4,
  #main .genre-grid.genre-grid-5, .genre-grid.genre-grid-5,
  #main .genre-grid.genre-grid-6, .genre-grid.genre-grid-6 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
/* on a phone, two up, Home's strips keep to two rows: four tiles, the rest on View All */
@media (max-width: 599px) {
  #main .genre-strip .genre-grid-6 .genre-tile:nth-child(n+5) { display: none !important; }
}
/* Home's strips are one row of the same wide tile; the rest are on View All */
@media (min-width: 981px) {
  #main .genre-strip .genre-grid-6 .genre-tile:nth-child(n+5) { display: none !important; }
}
.genre-sec .genre-tile.is-more { display: none !important; }
.genre-sec.is-open .genre-tile.is-more { display: block !important; }
#main .genre-sec .genre-grid { margin: 0 !important; }
/* Genres are a grid, never a sideways strip. Only artwork rows — playlists, stations,
   albums — scroll horizontally; a genre is a destination you scan, and on a phone a
   sideways strip of them fights the vertical scroll under your thumb. */
#main .genre-strip .genre-grid-5, .genre-strip .genre-grid-5 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: var(--card-gap) !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}
.genre-tile, #main .genre-tile {
  min-height: 72px !important; height: 72px;
  border-radius: 6px !important; border: 0; padding: 0 12px;
  font-size: 16px !important; font-weight: 700 !important;
  transition: filter .15s ease; cursor: pointer;
}
.genre-tile:hover { filter: brightness(1.1); }
.explore .row-title[style] { margin-top: 0 !important; }
.biz-row { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 55px; }
.biz-pill { border-radius: 22px !important; padding: 5.5px 13px !important; font-size: 14.3px !important; font-weight: 500 !important; height: 31px; line-height: 20px; }
/* Home's business bubbles sit in their own row; each jumps to that business's row */
.home-row .biz-row { margin: 0; }
.home-row[id^="biz-"] { scroll-margin-top: 72px; }

/* ---------- station page ---------- */
/* art in the left column; title, actions, description and tags in the right one;
   the track list runs the full width underneath (the hero wrapper dissolves into the grid) */
.stn:has(> .stn-hero) {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 48px; align-items: start;
  padding-top: 54px !important;
}
.stn:has(> .stn-hero) > .stn-hero { display: contents; }
/* the cover sits on the rule under the actions: its bottom meets the meta column's bottom,
   less the gap the actions leave beneath that rule */
.stn:has(> .stn-hero) > .stn-hero > .stn-art { grid-column: 1; grid-row: 1; align-self: end; margin-bottom: 24px; }
.stn:has(> .stn-hero) > .stn-hero > .stn-meta { grid-column: 2; grid-row: 1; align-self: end; }
.stn:has(> .stn-hero) > .stn-desc, .stn:has(> .stn-hero) > .stn-tags { grid-column: 2; }
.stn:has(> .stn-hero) > .stn-expect, .stn:has(> .stn-hero) > .stn-tracks, .stn:has(> .stn-hero) > .muted, .stn:has(> .stn-hero) > .home-row { grid-column: 1 / -1; }
.stn:has(> .stn-hero) > .stn-expect { margin-top: 24px !important; }
.stn:has(> .stn-hero) > .station-row, .stn:has(> .stn-hero) > .genre-grid { grid-column: 1 / -1; }
.stn:has(> .stn-hero) > .station-row { margin-top: 0 !important; }
.stn:has(> .stn-hero) > .genre-grid { margin: 24px 0 8px !important; }
.stn-room { font-size: 12px; font-weight: 600; color: var(--al-muted); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .06em; }
.stn:has(> .stn-hero) .stn-meta { padding-top: 22px; }
/* collection pages keep the station actions but greyed out */
.stn-play:disabled, .stn-mymusic:disabled { opacity: .4; cursor: default; pointer-events: none; }
.stn-art { width: 280px !important; height: 280px !important; border-radius: 4px !important; box-shadow: none !important; }
.stn-art .stn-badge { top: 0 !important; right: 0 !important; }
.stn-meta { padding-top: 38px; min-width: 0; }
.stn-meta h1 { margin: 0 0 8px !important; font-size: 36px !important; line-height: 1.15; }
.stn-sub { font-size: 12px !important; font-weight: 700; color: var(--al-text) !important; margin: 0 0 44px !important; }
.stn-actions {
  gap: 36px !important; align-items: center;
  padding-bottom: 22px; border-bottom: 1px solid var(--al-line);
  margin-bottom: 24px;
}
.stn-play, #stnPlay {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 4px;
  height: 51px; min-width: 0 !important; padding: 0 24px 0 20px !important;
  font-size: 15px !important; font-weight: 700; letter-spacing: .05em; line-height: 1;
}
.stn-play .ico { width: 24px; height: 24px; }
.stn-mymusic, .stn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 !important;
  font-size: 13px !important; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.stn-mymusic .ico, .stn-ghost .ico { width: 24px; height: 24px; opacity: .5; }
.stn-mymusic:hover .ico { opacity: 1; }
.stn-desc, .stn .stn-desc { font-size: 13px; font-weight: 500; line-height: 17.5px; max-width: 600px; margin: 0 0 24px !important; }
.stn-tags, .stn .stn-tags { gap: 8px; margin: 0 0 40px !important; }
.stn-tags .tag-btn, .stn-tags span {
  border: 0 !important; background: var(--al-panel-2);
  border-radius: 20px; padding: 5px 12px; font-size: 13px; font-weight: 500; height: 28px; line-height: 18px;
}
.stn-expect, .stn .stn-expect { font-size: 20px; font-weight: 600; margin: 0 0 16px !important; }
/* track rows: 48px, 40px art square, 14px title over a fainter artist, duration right */
.stn-tracks, .stn .stn-tracks { max-width: none; }
.stn-tracks li, .stn .stn-tracks li {
  grid-template-columns: 40px 1fr 60px !important; gap: 12px !important;
  height: 48px; padding: 0 12px !important; border: 0 !important; border-radius: 4px;
  align-items: center;
}
.stn-tracks li:hover { background: var(--al-panel); }
.stn-tracks li > span:first-child {
  width: 40px; height: 40px; border-radius: 2px; background: var(--al-panel-2);
  display: grid; place-items: center;
  color: var(--al-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.stn-tracks b, .stn .stn-tracks b { font-size: 14px !important; font-weight: 500 !important; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stn-tracks small, .stn .stn-tracks small { font-size: 14px !important; font-weight: 500; line-height: 19px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stn-tdur, .stn .stn-tdur { font-size: 14px !important; font-weight: 500; color: var(--al-text) !important; }
/* a wide row also names the playlist in the middle and lists its tags before the duration */
.stn-tracks li:has(.stn-talbum), .stn .stn-tracks li:has(.stn-talbum) {
  grid-template-columns: 40px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .45fr) 60px !important;
}
.stn-talbum, .stn-ttags {
  min-width: 0; font-size: 14px; font-weight: 500; color: var(--al-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- settings (Moodby: 920px centred column, 15px tabs with no underline,
   80px rows with a 20px label, 15px value and an uppercase text button) ---------- */
/* left-aligned like every other page: centred, the title sat 15px in from theirs */
.settings-page, .profile-page { max-width: 920px; margin: 0; }
.settings-page h1, .profile-page h1 { margin-bottom: 0 !important; }
.set-tabs { gap: 0 !important; margin: 44px 0 32px !important; border-bottom: 0 !important; padding: 0 !important; }
.set-tab {
  padding: 12px !important; font-size: 15px !important; font-weight: 600 !important;
  color: rgba(244, 246, 251, .5) !important; border: 0 !important; border-radius: 0; background: none !important;
}
.set-tab:first-child { padding-left: 0 !important; }
.set-tab.is-on { color: var(--al-text) !important; border-bottom: 0 !important; }
/* a phone keeps :hover on whatever sits under the finger after a tap - once the strip is
   redrawn that is another tab, which then lit up as if chosen */
@media (hover: hover) { .set-tab:hover { color: var(--al-text) !important; } }
.set-hero { grid-template-columns: 1fr 448px !important; gap: 32px !important; margin: 0 0 8px !important; align-items: start; }
.set-hero h2, .set-head h2 { font-size: 20px !important; font-weight: 600 !important; margin: 12px 0 14px !important; }
.set-hero p.muted, .settings-page p.muted { font-size: 15px; font-weight: 500; color: rgba(244, 246, 251, .75); line-height: 1.4; margin: 0 0 16px; }
.loc-card { min-height: 236px !important; border-radius: 6px !important; background-color: var(--al-panel); }
.loc-change {
  display: inline-block; font-size: 15px; font-weight: 700; color: #111; background: #fff; border-radius: 999px;
  padding: 12px 24px; cursor: pointer; margin: 4px 0 0;
}
.loc-change:hover { background: #e8ecf3; }
.settings-page .set-row, .profile-page .set-row {
  display: flex !important; align-items: center; justify-content: space-between; gap: 24px !important;
  grid-template-columns: none !important; min-height: 80px; padding: 16px 0 !important;
  border-top: 0 !important; border-bottom: 1px solid rgba(244, 246, 251, .1) !important;
}
.settings-page .set-row > span:first-child, .profile-page .set-row > span:first-child {
  flex: 0 0 230px; font-size: 20px !important; font-weight: 600; color: var(--al-text) !important;
  text-transform: none !important; letter-spacing: 0 !important;
}
.settings-page .set-row > b, .profile-page .set-row > b, .settings-page .set-row > div, .profile-page .set-row > div {
  flex: 1 1 auto; min-width: 0; font-size: 15px !important; font-weight: 500 !important; color: rgba(244, 246, 251, .75) !important;
}
.settings-page .set-row .set-change, .profile-page .set-row .set-change, .set-change {
  flex: none; background: none !important; border: 0 !important; padding: 8px 0 !important;
  font-size: 13px !important; font-weight: 700 !important; letter-spacing: .05em !important; text-transform: uppercase; color: var(--al-accent) !important;
}
/* Location profile: the same rows as the rest of settings, with the field in place of the
   value, and one Save for the lot */
.loc-form { max-width: 820px; }
.loc-form label {
  display: flex; align-items: center; gap: 24px; min-height: 80px; margin: 0; padding: 14px 0;
  border-bottom: 1px solid rgba(244, 246, 251, .1);
}
.loc-form label > span {
  flex: 0 0 230px; font-size: 20px !important; font-weight: 600; color: var(--al-text) !important;
  text-transform: none !important; letter-spacing: 0 !important;
}
.loc-form input, .loc-form select {
  flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--al-line); border-radius: 10px; background: var(--al-panel);
  color: var(--al-text); font: inherit; font-size: 15px; transition: border-color .15s ease;
}
.loc-form select { appearance: none; padding-right: 38px; cursor: pointer;
  background: var(--al-panel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") right 12px center / 16px no-repeat; }
.loc-form input:focus, .loc-form select:focus { outline: none; border-color: var(--al-accent); }
.loc-form input:disabled, .loc-form select:disabled { opacity: .6; cursor: default; }
.loc-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 24px 0 0; }
.loc-save {
  height: 44px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--al-accent); color: #111; font: inherit; font-size: 14px; font-weight: 700;
}
.loc-save:disabled { opacity: .4; cursor: default; }
.loc-cancel { height: 44px; padding: 0 8px; border: 0; background: none; color: var(--al-muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.loc-cancel:hover { color: var(--al-text); }
.loc-note { font-size: 14px; color: var(--al-muted); }
.loc-note.is-ok { color: #4ade80; }
.loc-note.is-error { color: #ff8a8a; }
@media (max-width: 600px) {
  .loc-form label { flex-direction: column; align-items: stretch; gap: 8px; min-height: 0; }
  .loc-form label > span { flex: none; font-size: 15px !important; }
}
.set-head { margin: 8px 0 8px !important; }
.add-user {
  font-size: 15px !important; font-weight: 700 !important; color: var(--al-text) !important;
  background: rgba(244, 246, 251, .18) !important; border: 0 !important; border-radius: 6px !important; padding: 12px 24px !important;
}
.user-row { grid-template-columns: 36px 1fr auto !important; gap: 12px !important; padding: 16px 0 !important; border-top: 0 !important; border-bottom: 1px solid rgba(244, 246, 251, .1) !important; }
.user-av { width: 36px !important; height: 36px !important; font-size: 14px; }
.user-row b { font-size: 16px; font-weight: 600; display: block; }
.user-row small { font-size: 14px; font-weight: 500; color: rgba(244, 246, 251, .5); display: block; margin-top: 2px; }
.role, .role-btn { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .06em; text-transform: uppercase; color: rgba(244, 246, 251, .5) !important; }
.sub-cols { font-size: 11px !important; font-weight: 600; letter-spacing: .06em; color: rgba(244, 246, 251, .5); }
.sub-row { padding: 16px 0 !important; border-bottom: 1px solid rgba(244, 246, 251, .1) !important; }

/* ---------- player bar ---------- */
.player { padding: 0 24px !important; }
.thumb, #nowArt { border-radius: 2px !important; overflow: hidden; }
.player .controls { gap: 8px !important; }
.player .controls button svg { width: 24px !important; height: 24px !important; }
.player .controls .play, .player .controls button.play, #playBtn, #playBtn.is-on {
  width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important;
  max-width: 40px !important; max-height: 40px !important;
}
.player .controls .play svg, #playBtn svg { width: 22px !important; height: 22px !important; }
.right { gap: 4px !important; }
.icon-btn { font-size: 0 !important; display: grid; place-items: center; width: 40px; height: 40px; color: var(--al-muted); }
.icon-btn:hover { color: var(--al-text); }
.icon-btn .ico { width: 24px; height: 24px; }
#muteBtn .ico-off, #muteBtn.is-muted .ico-on { display: none; }
#muteBtn.is-muted .ico-off { display: block; }
.device-ico .ico { width: 22px; height: 22px; color: var(--al-muted); }
.right input[type=range], #vol { width: 96px !important; margin-left: 8px; }

/* dashboard controls: glyphs become icons, centred absolutely (the hidden glyph text node
   still takes a grid row on Windows, which pushed the icons upwards) */
.dash-ctl { font-size: 0 !important; display: block !important; position: relative !important; line-height: 0; overflow: hidden; }
.dash-ctl::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 18px; height: 18px; background: center / contain no-repeat;
}
.dash-ctl[data-act='block']::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f6fb' stroke-width='2'><circle cx='12' cy='12' r='9'/><path d='M6 6l12 12'/></svg>"); }
.dash-ctl[data-act='play']::before { transform: translate(calc(-50% + 1px), -50%); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'><path d='M7 4v16l13-8z'/></svg>"); }
.dash-ctl[data-act='play'].is-pause::before { transform: translate(-50%, -50%); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'><rect x='6' y='5' width='4' height='14'/><rect x='14' y='5' width='4' height='14'/></svg>"); }
.dash-ctl[data-act='skip']::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f4f6fb'><path d='M5 5v14l10-7z'/><rect x='17' y='5' width='2.5' height='14'/></svg>"); }

/* ---------- tablet (rail stays, tighter gutters) ---------- */
@media (max-width: 1280px) {
  :root { --gutter: 40px; }
  .search-wrap { flex: 1 1 auto !important; width: auto; max-width: 480px; }
}
@media (max-width: 1180px) and (min-width: 981px) {
  :root { --gutter: 28px; }
  .shell { grid-template-columns: 220px 1fr !important; }
  .side { padding-left: 4px !important; padding-right: 4px !important; }
  .side .nav-item { gap: 12px; }
  .hist-btn + .search-wrap { margin-left: 12px; }
  .account-name, .account-btn .chev { display: none; }
  #main h1, .main h1 { font-size: 38px !important; margin-top: 28px !important; }
  .stn:has(> .stn-hero) { grid-template-columns: 228px minmax(0, 1fr); column-gap: 28px; padding-top: 38px !important; }
  .stn-art { width: 228px !important; height: 228px !important; }
  .stn-meta { padding-top: 16px; }
  .stn-sub { margin-bottom: 28px !important; }
  .stn-actions { gap: 24px !important; }
}

/* ---------- phone & small tablet (rail hidden; the app's own top bar + tab bar) ---------- */
@media (max-width: 980px) {
  :root { --gutter: 16px; --card: 140px; --card-gap: 16px; }
  /* a plain 52px row with no vertical padding: the safe-area inset that used to sit in the
     top padding is what pushed everything in the bar below centre on iPhones */
  .mbar { height: 52px !important; padding: 0 16px !important; box-sizing: border-box; gap: 8px; }
  .mbar-place { font-size: 15px !important; }
  .mbar-place span { color: var(--al-muted); font-size: 11px; }
  .mbar-r { gap: 4px; }
  .mbar-r button { font-size: 0 !important; display: grid; place-items: center; padding: 0; }
  .mbar-r #mDash, .mbar-r #mSched { background: transparent !important; border: 0 !important; color: var(--al-muted) !important; }
  .mbar-r #mSched::before {
    content: ""; width: 24px; height: 24px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3b5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15.5' rx='2'/><path d='M3.5 10h17M8 3v4M16 3v4'/></svg>") center / contain no-repeat;
  }
  .mbar-r #mDash::before {
    content: ""; width: 24px; height: 24px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3b5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='3.5' width='7' height='7' rx='1.2'/><rect x='13.5' y='3.5' width='7' height='7' rx='1.2'/><rect x='3.5' y='13.5' width='7' height='7' rx='1.2'/><rect x='13.5' y='13.5' width='7' height='7' rx='1.2'/></svg>") center / contain no-repeat;
  }
  .mbar-r .m-ava { width: 32px !important; height: 32px !important; font-size: 13px !important; border: 0 !important; background: var(--al-accent) !important; color: #111 !important; }
  /* the labels keep 10px clear of the bottom edge (rounded corners, the gesture bar and a
     browser's own toolbar all cut into the last few pixels), plus the home indicator's inset */
  .mtabs { height: calc(72px + env(safe-area-inset-bottom)) !important; padding: 6px 0 calc(10px + env(safe-area-inset-bottom)) !important; }
  .player { bottom: calc(72px + env(safe-area-inset-bottom)) !important; }   /* sits flush on the tab bar */
  /* the seek line rides the top edge of the phone player; the player clips above it, so
     the press area extends downward instead */
  .player .seek-line { display: block !important; top: 0; height: 3px; }
  .player .seek-line:hover, .player .seek-line.is-scrubbing { top: 0; height: 4px; }
  .player .seek-line::before { top: 0; bottom: -18px; }
  .mtabs button { font-size: 10px !important; gap: 4px !important; min-height: 50px; }
  .mtabs button .mtab-ico, .mtabs button svg { width: 24px !important; height: 24px !important; }

  .main, #main, main {
    padding: calc(64px + env(safe-area-inset-top)) var(--gutter) calc(176px + env(safe-area-inset-bottom)) !important;
  }
  #main h1, .main h1 { font-size: 30px !important; margin: 16px 0 16px !important; }
  #main .home-row, .main .home-row, .explore .home-row, .stn .home-row,
  .main .row, .main .block, .main section.row { margin: 0 0 32px !important; gap: 0 !important; }
  .row-title, .row-head { display: flex !important; align-items: center !important; margin: 0 0 14px !important; }
  .row-title h2, .main h2 { font-size: 18px !important; line-height: 1.3 !important; width: auto !important; flex: 1 1 auto; margin: 0 !important; }
  .viewall { font-size: 12px !important; }
  .viewall::after { width: 18px; height: 18px; }

  /* artwork rows bleed to the screen edge and are the only thing here that scrolls sideways */
  .home-row .station-row, .genre-strip + .station-row, .station-row, .stations, .row-scroller, .h-scroll {
    display: flex !important; flex-direction: row !important;
    gap: var(--card-gap) !important;
    width: auto !important;
    margin: 0 calc(-1 * var(--gutter)) 0 0 !important;
    padding: 0 var(--gutter) 6px 0 !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
  }
  .home-row .station-row .station, .station, .station-card {
    flex: 0 0 var(--card) !important; width: var(--card) !important; min-width: var(--card) !important; max-width: var(--card) !important;
  }
  /* grids (tag pages, search) become two columns */
  .stn > .station-row, .stn .station-row:not(.home-row .station-row) {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px 16px !important;
    margin: 16px 0 0 !important; padding: 0 !important; overflow: visible !important;
  }
  .stn > .station-row .station { width: auto !important; min-width: 0 !important; max-width: none !important; flex: none !important; }
  .station .cover .cover-name { font-size: 16px; padding: 24px 10px 44px; }
  .cover.no-art .cover-name { place-items: start center; }
  .station .hover-play { opacity: 1 !important; pointer-events: auto !important; width: 40px !important; height: 40px !important; right: 8px !important; bottom: 8px !important; }
  .station .cover:has(.strip:not(:empty)) .hover-play { bottom: 27px !important; }
  .station .dl-badge { right: 54px; bottom: 16px; }
  .station .cover:has(.strip:not(:empty)) .dl-badge { bottom: 35px; }
  .station .hover-play::before { width: 20px; height: 20px; }

  /* genres: two up, on the home page and on explore alike */
  .genre-grid, #main .genre-grid, .genre-grid-5, #main .genre-strip .genre-grid-5,
  .genres, .g-grid, .genre-list {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important; width: 100% !important;
    overflow: visible !important; margin: 0 !important; padding: 0 !important;
  }
  .genre-grid-5 .genre-tile, .genre-strip .genre-tile {
    flex: none !important; width: 100% !important; max-width: none !important;
  }
  .genre-grid .genre-tile { width: 100% !important; max-width: none !important; flex: none !important; }
  .genre, .g-tile, .genre-tile, .genre-chip {
    min-height: 60px !important; height: 60px !important; border-radius: 6px !important;
    font-size: 14px !important; font-weight: 700 !important;
  }
  #main .explore .genre-grid, .explore .genre-grid { margin-bottom: 32px !important; }
  .biz-row { margin-bottom: 32px; }

  /* station page: the app's own centred phone hero (stn-phone.js) stays; undo the desktop grid */
  .stn:has(> .stn-hero) { display: block; padding-top: 8px !important; }
  .stn:has(> .stn-hero) > .stn-hero { display: block; }
  .stn:has(> .stn-hero) > .stn-hero > .stn-art, .stn:has(> .stn-hero) > .stn-hero > .stn-meta,
  .stn:has(> .stn-hero) > .stn-desc, .stn:has(> .stn-hero) > .stn-tags { grid-column: auto; grid-row: auto; }
  .stn:has(> .stn-hero) > .stn-expect { margin-top: 0 !important; }
  .stn-phone-hero .stn-art {
    width: min(78vw, 300px) !important; height: min(78vw, 300px) !important;
    margin: 4px auto 14px !important; border-radius: 6px !important;
  }
  .stn-meta { padding-top: 0; }
  .stn-sub { margin-bottom: 8px !important; }
  .stn-actions { border-bottom: 0; padding-bottom: 0; margin-bottom: 8px; }
  .stn-tracks li, .stn .stn-tracks li { grid-template-columns: 40px 1fr 48px !important; padding: 0 8px !important; }
  .stn-tracks li:has(.stn-talbum), .stn .stn-tracks li:has(.stn-talbum) { grid-template-columns: 40px 1fr 48px !important; }
  .stn-talbum, .stn-ttags { display: none; }
  .stn-tracks .stn-tmeta { min-width: 0; }   /* long titles truncate instead of widening the page */
  .stn-tdur, .stn .stn-tdur { white-space: nowrap; }
  .stn-desc { margin-bottom: 18px !important; }
  .stn-tags, .stn .stn-tags { margin-bottom: 28px !important; }
  /* My Music: the phone's way to the Dashboard and Downloads pages */
  /* the phone player sheet blanks the thumb's background and forces its image on */
  #nowArt img[style*="display: none"], .player .thumb img[style*="display: none"] { display: none !important; }
  .stn-room { display: none; }

  /* settings tabs scroll sideways instead of wrapping */
  .set-tabs {
    overflow-x: auto; scrollbar-width: none;
    margin: 16px calc(-1 * var(--gutter)) 20px !important; padding: 0 var(--gutter) !important;
  }
  .set-tabs::-webkit-scrollbar { display: none; }
  .set-tab { flex: none; white-space: nowrap; padding: 10px 12px !important; }
  .set-tab:first-child { padding-left: 0 !important; }
  .set-hero { grid-template-columns: 1fr !important; gap: 16px !important; }
  .loc-card { min-height: 180px !important; }
  .settings-page .set-row, .profile-page .set-row { flex-wrap: wrap; min-height: 0; padding: 14px 0 !important; gap: 4px 16px !important; }
  .settings-page .set-row > span:first-child, .profile-page .set-row > span:first-child { flex: 1 1 100%; font-size: 16px !important; }
  .settings-page .set-row > b, .profile-page .set-row > b { flex: 1 1 auto; }
}
@media (max-width: 980px) and (min-width: 600px) {
  .genre-grid, #main .genre-grid, #main .genre-strip .genre-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; }
}
@media (max-width: 480px) {
  :root { --card: 132px; }
}
/* on a phone, Home's and Explore's rows get covers 15% larger, twice (140 / 132 -> 161 / 152 -> 185 / 175)
   and genre tiles 30% thinner (72 -> 50) */
@media (max-width: 980px) {
  .home-row { --card: 185px; }
  .genre-tile, #main .genre-tile { min-height: 50px !important; height: 50px !important; }
}
@media (max-width: 480px) {
  .home-row { --card: 175px; }
}
/* on mobile a page title sits half as far below the top bar (23px -> 11px to the letters);
   a playlist's or collection's title lives in its hero, under the cover, and keeps its own spacing */
@media (max-width: 980px) {
  #main h1:not(.stn-meta h1, .stn-phone-hero h1, .stn-hero h1), .main h1:not(.stn-meta h1, .stn-phone-hero h1, .stn-hero h1) { margin-top: 4px !important; }
}

/* ---- location dropdown ---------------------------------------------------
   The search field was picking up the dashboard toolbar's rule
   (`.dash-tools input, .place-q`), which gives it a 360px max-width, a 20px
   stadium radius and an input's own intrinsic width — wider than the menu, so
   the whole dropdown grew a horizontal scrollbar. And app.css styles every
   anchor inside .place-menu as display:flex, which outranks the two-line grid
   .place-opt asks for, so the name and the city ran together on one line. */
.place-menu { box-sizing: border-box; overflow-x: hidden; padding: 10px; }
.place-menu * { box-sizing: border-box; }

.place-q {
  display: block; width: 100%; max-width: none; margin: 0 0 8px;
  padding: 9px 12px; font-size: 13px; border-radius: 10px;
  background: #121822; border: 1px solid var(--al-line); color: var(--al-text);
}
.place-q::placeholder { color: #7b8698; }
.place-q:focus { outline: none; border-color: var(--al-accent); }

.place-list { max-height: 300px; overflow-y: auto; overflow-x: hidden; }

.place-menu a.place-opt {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 0 10px;
  padding: 9px 10px; border-radius: 10px;
}
.place-opt > span { grid-column: 1; font-size: 13px; font-weight: 600; line-height: 1.3; }
.place-opt small { grid-column: 1; font-size: 11px; color: #8b95a8; line-height: 1.3; }
/* long "Dubai, United Arab Emirates" style values must not widen the menu */
.place-opt > span, .place-opt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-opt em { grid-column: 2; grid-row: 1 / span 2; color: var(--al-accent); font-style: normal; }
.place-menu a.place-opt:hover { background: #2d3a52; }

.place-menu .add {
  width: 100%; margin-top: 8px; padding: 10px;
  border-top: 1px solid var(--al-line); border-radius: 0 0 8px 8px;
  color: var(--al-accent); font-size: 13px; font-weight: 600;
}

/* ---- playback devices on a phone -----------------------------------------
   app.css hides the player bar's whole right-hand column below 860px. Losing
   the volume slider there is right — phones have hardware volume — but it also
   took the device button, and that is the only way into the playback-device
   picker. Multi-device is unusable on a phone without it. */
@media (max-width: 980px) {
  .player .right {
    display: flex !important;
    justify-content: flex-end; align-items: center; gap: 6px;
    flex: 0 0 auto; min-width: 0;
  }
  .player .right #vol, .player .right #msg, .player .right #muteBtn { display: none !important; }
  .player .right #deviceBtn {
    display: grid !important; place-items: center;
    width: 40px; height: 40px; flex: 0 0 auto;
  }

  /* A phone bar has room for three controls, and the one it must not lose is the way out to
     another device. So: device, play, skip — block moves out, and the device button is
     pulled ahead of the transport even though it lives in a later column. */
  .player .now { order: 1; }
  .player .right { order: 2; }
  .player .transport { order: 3; }
  .player #blockBtn { display: none !important; }

  /* the popover is anchored to a desktop-width column; as a phone sheet it sits above the
     player bar and the tab bar, and can never run off either edge */
  #devicePop {
    position: fixed !important;
    left: 12px !important; right: 12px !important;
    width: auto !important; max-width: none !important;
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom) + 150px) !important;
    max-height: 55vh; overflow: auto; z-index: 150;
    background: #1b2233; border: 1px solid var(--al-line);
    border-radius: 14px; padding: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  }
}

/* ---- the wash behind a playlist page --------------------------------------
   A playlist opens on its own colour, taken from the cover art, fading out well
   before the track list. It bleeds into the page gutters so it reads as the
   background rather than as a panel, and sits behind everything. */
#main:has(> .page-glow), .main:has(> .page-glow) { position: relative; }
.page-glow {
  position: absolute; inset: 0 0 auto 0; height: 420px; z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(var(--glow, 29, 37, 51), .40) 0%,
    rgba(var(--glow, 29, 37, 51), .16) 38%,
    rgba(var(--glow, 29, 37, 51), 0) 100%);
}
#main > .stn, .main > .stn { position: relative; z-index: 1; }
/* The wash stays at the top of the screen while the page scrolls. On a wide screen #main is
   the scroller, and its own background does not move with its content; on a phone the window
   scrolls, so the wash is pinned to the screen instead. */
@media (min-width: 981px) {
  #main:has(> .page-glow) {
    background:
      linear-gradient(180deg,
        rgba(var(--glow, 29, 37, 51), .40) 0%,
        rgba(var(--glow, 29, 37, 51), .16) 38%,
        rgba(var(--glow, 29, 37, 51), 0) 100%) top / 100% 420px no-repeat,
      var(--al-bg);
  }
  #main > .page-glow { display: none; }
}
@media (max-width: 980px) {
  .page-glow { position: fixed; }
}
/* The top bar carries the same ramp, continued upwards: it ends at exactly the value the
   wash below it starts from (.40), so the two meet with no line between them. */
body:has(.page-glow) .top {
  background:
    linear-gradient(180deg,
      rgba(var(--glow, 29, 37, 51), .51) 0%,
      rgba(var(--glow, 29, 37, 51), .40) 100%),
    var(--al-bg);
}
@media (max-width: 980px) {
  .page-glow { height: 340px; }
  /* The fixed header paints the top slice of the very same gradient (sized to the wash, anchored
     to the top of the screen), so the wash reads from the screen's edge with no seam where the
     header ends. It shares the page's background colour underneath for the same reason. */
  body:has(.page-glow) .mbar {
    background:
      linear-gradient(180deg,
        rgba(var(--glow, 29, 37, 51), .40) 0%,
        rgba(var(--glow, 29, 37, 51), .16) 38%,
        rgba(var(--glow, 29, 37, 51), 0) 100%) top / 100% 340px no-repeat,
      var(--al-bg) !important;
  }
}
/* On Home and Explore (body.top-glass, moodby-align.js) the desktop top bar floats over the
   page instead of sitting above it: clear while the page is at its top, then a tinted gaussian
   blur of whatever scrolls under it once the page moves (body.top-scrolled). The page keeps
   the bar's 72px as top padding, so nothing shifts. Every other page keeps the solid bar. */
@media (min-width: 981px) {
  body.top-glass .shell > section { position: relative; }
  body.top-glass .shell > section > .top {
    position: absolute; top: 0; left: 0; right: 0;
    background: transparent !important;
    transition: background-color .2s ease;
  }
  body.top-glass .shell > section > #main { padding-top: 72px !important; }
  body.top-glass.top-scrolled .shell > section > .top {
    background: rgba(21, 27, 43, .5) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter: blur(40px) saturate(180%);
  }
}

/* ---- dashboard -------------------------------------------------------------------------
   The title with the search and online count beside it, then a grid of venue cards. A card
   is the venue (initial, name, one status line, the license as an icon) over what it is
   playing; the track is the button that changes the music, with three controls beside it.
   Scoped to .dash-page so it outranks the generic .dash-* rules in account.css. */
.dash-page .dash-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 14px 24px; margin: 0 0 24px;
}
#main .dash-page .dash-head h1 { margin-bottom: 0 !important; text-align: left !important; }
.dash-page .dash-tools { display: flex; align-items: center; gap: 14px; flex: 0 1 400px; min-width: 0; margin: 0; }
.dash-page .dash-tools input {
  flex: 1; min-width: 0; max-width: none; height: 40px; padding: 0 14px 0 38px;
  border-radius: 12px; font-size: 14px; color: var(--al-text);
  background: var(--al-panel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3b5' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>") 13px center / 15px no-repeat;
  border: 1px solid transparent; transition: border-color .15s ease;
}
.dash-page .dash-tools input:focus { outline: none; border-color: var(--al-line); }
.dash-page .dash-tools .dash-count {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  color: var(--al-muted) !important; font-size: 13px; font-weight: 500;
}
.dash-page .dash-tools .dash-count::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; }

/* one row per location: the venue on the left, its player filling the rest */
.dash-page .dash-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.dash-page .dash-card {
  display: flex; flex-direction: row; align-items: center; gap: 24px; min-width: 0; margin: 0; padding: 14px 18px;
  background: var(--al-panel); border: 1px solid rgba(255, 255, 255, .04); border-radius: 18px;
  transition: border-color .15s ease;
}
.dash-page .dash-card:hover { border-color: rgba(255, 255, 255, .1); }

/* venue: initial, name over one status line, then the license icon */
.dash-page .dash-venue { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
/* a fixed-width player on the right, so it does not stretch and lines up row to row */
.dash-page .dash-card .dash-mini { flex: 0 0 min(440px, 46%); min-width: 0; }
.dash-page .dash-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-size: 16px; font-weight: 700; color: var(--al-accent); background: rgba(201, 162, 39, .12);
}
.dash-page .dash-card:has(.st-off) .dash-avatar { color: var(--al-muted); background: var(--al-panel-2); }
.dash-page .dash-id { flex: 1; min-width: 0; }
.dash-page .dash-card .dash-name {
  display: block; max-width: 100%; font-size: 16px !important; color: var(--al-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-page .dash-card .dash-name:hover { color: var(--al-accent); text-decoration: none; }
.dash-page .dash-meta {
  display: flex; align-items: center; margin-top: 3px; min-width: 0;
  font-size: 12px; color: var(--al-muted); white-space: nowrap; overflow: hidden;
}
.dash-page .dash-meta .st-on, .dash-page .dash-meta .st-off { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12px; font-weight: 500; }
.dash-page .dash-meta .st-on { color: var(--al-text); }
.dash-page .dash-meta .st-off { color: #ff8a8a; }
.dash-page .dash-meta .st-on::before, .dash-page .dash-meta .st-off::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.dash-page .dash-meta .st-on::before { background: #4ade80; }
.dash-page .dash-meta .st-off::before { background: currentColor; }
.dash-page .dash-card .hrs { min-width: 0; color: var(--al-muted); overflow: hidden; text-overflow: ellipsis; }
.dash-page .dash-card .hrs span::before { content: "\00b7"; margin: 0 6px; opacity: .6; }
.dash-page .dash-card .set-change {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%;
  padding: 0 !important; font-size: 0 !important; color: transparent !important;
  background: transparent !important; border: 0 !important; transition: background-color .15s ease;
}
.dash-page .dash-card .set-change::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; opacity: .7;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f6fb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v11M7.5 10.5 12 15l4.5-4.5M4.5 17.5V19a1.5 1.5 0 0 0 1.5 1.5h12a1.5 1.5 0 0 0 1.5-1.5v-1.5'/></svg>") center / contain no-repeat;
}
.dash-page .dash-card .set-change:hover { background: rgba(255, 255, 255, .07) !important; }
.dash-page .dash-card .set-change:hover::before { opacity: 1; }
.dash-page .dash-card .set-change:disabled { display: none; }

/* now playing: an inset whose track opens the music picker, then the three controls */
.dash-page .dash-card .dash-mini {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 6px 8px 6px 6px; border-radius: 14px; background: rgba(255, 255, 255, .035);
}
.dash-page .dash-pick {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 4px 8px 4px 4px;
  border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit;
  text-align: left;
}
/* the way into a location, kept small and labelled so it is never hit by accident */
.dash-page .dash-card .dash-goto {
  flex: none; height: 30px; padding: 0 12px; border: 1px solid var(--al-line, rgba(255, 255, 255, .12));
  border-radius: 999px; background: transparent; color: var(--al-muted); font: inherit;
  font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.dash-page .dash-card .dash-goto:hover { color: var(--al-text); border-color: rgba(255, 255, 255, .3); }
.dash-page .dash-card .dash-art { display: block; flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--al-panel-2); }
.dash-page .dash-now { display: block; flex: 1; min-width: 0; }
.dash-page .dash-now b, .dash-page .dash-now small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-page .dash-now b { font-size: 14px; font-weight: 600; color: var(--al-text); }
.dash-page .dash-now small { margin-top: 2px; font-size: 12px; color: var(--al-muted); }
.dash-page .dash-card .dash-ctls { display: flex; align-items: center; gap: 2px; flex: none; }
.dash-page .dash-card .dash-ctl {
  width: 32px !important; height: 32px !important; border: 0; border-radius: 50%;
  background: transparent; transition: background-color .15s ease;
}
.dash-page .dash-card .dash-ctl:not(.play)::before { width: 15px; height: 15px; opacity: .7; }
.dash-page .dash-card .dash-ctl:hover { background: rgba(255, 255, 255, .08); }
.dash-page .dash-card .dash-ctl:not(.play):hover::before { opacity: 1; }
.dash-page .dash-card .dash-ctl.play { width: 38px !important; height: 38px !important; margin: 0 2px; background: var(--al-accent); }
.dash-page .dash-card .dash-ctl.play::before { width: 16px; height: 16px; }
.dash-page .dash-card .dash-ctl.play:hover { background: #d8b23a; }

/* a venue without a subscription has no player, only the way to subscribe */
.dash-page .dash-card > .pill {
  align-self: center; width: auto !important; min-width: 0 !important; height: 36px; margin: 0 !important;
  padding: 0 18px !important; border: 0; border-radius: 999px; font-weight: 600; white-space: nowrap;
  background: var(--al-accent) !important; color: #111 !important;
}

/* too narrow for side by side: the player drops under the venue again */
@media (max-width: 860px) {
  .dash-page .dash-card { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px; }
  .dash-page .dash-venue { flex: none; }
  .dash-page .dash-card .dash-mini { flex: none; }
  .dash-page .dash-card > .pill { align-self: flex-start; }
}

@media (max-width: 600px) {
  .dash-page .dash-head { margin-bottom: 18px; }
  .dash-page .dash-tools { flex: 1 1 100%; }
  .dash-page .dash-tools input { height: 44px; }
  .dash-page .dash-grid { gap: 12px; }
  .dash-page .dash-card { padding: 16px; gap: 14px; }
  .dash-page .dash-card .dash-mini { gap: 2px; padding-right: 4px; }
  .dash-page .dash-pick { gap: 10px; padding-right: 2px; }
  .dash-page .dash-card .dash-art { width: 40px; height: 40px; }
  .dash-page .dash-card .dash-ctl:not(.play) { width: 30px !important; height: 30px !important; }
}