:root{
  --rdx-font-size-2xs:.75rem;
  --rdx-font-size-xs:.8125rem;
  --rdx-font-size-sm:.9rem;
  --rdx-font-size-base:1rem;
  --rdx-font-size-md:1.0625rem;
  --rdx-font-size-lg:1.25rem;
  --rdx-font-size-xl:1.625rem;
  --rdx-row-height:56px;
  --rdx-player-height:88px;
  --app-player-height:88px;
  --app-player-gap:6px;
  --app-navigation-height:60px;
  --rdx-grid-tile-height:56px;
  --rdx-grid-tile-art-size:36px;
}
html{min-height:100%;overflow-x:hidden;touch-action:pan-x pan-y}
body{min-width:320px;overflow-x:hidden}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.header-actions{display:flex;align-items:center;gap:var(--rdx-space-1)}
.header-sleep-timer{white-space:nowrap;font-size:var(--rdx-font-size-sm);font-weight:var(--rdx-font-weight-bold);color:var(--rdx-color-accent-primary);font-variant-numeric:tabular-nums}
.app-content{padding-top:calc(var(--app-player-height) + var(--app-player-gap) + var(--app-navigation-height) + var(--rdx-space-2))}
rdx-player[placement="pinned"]{position:fixed!important;top:0!important;padding-top:var(--rdx-safe-top);left:50%;width:min(var(--rdx-max-content-width),100%);transform:translateX(-50%);z-index:49;margin:0!important;background:var(--rdx-color-bg-base)!important}
rdx-player[placement="pinned"] .rdx-player-surface{min-height:var(--rdx-player-height);padding-left:var(--rdx-gutter);padding-right:var(--rdx-gutter);background:var(--rdx-color-bg-base)!important}
#player-art{width:100%;height:100%;display:grid;place-items:center}
#player-bar .rdx-player-title,#player-bar .rdx-player-desc,#player-bar .rdx-player-status,#player-status{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#player-bar .rdx-player-desc,#player-bar .rdx-player-status{display:block;height:1.2em;min-height:1.2em;line-height:1.2}
#player-status{display:block;height:1.2em;min-height:1.2em;line-height:1.2;color:var(--rdx-color-status-warning)}
#player-bar .rdx-player-status{text-transform:none;letter-spacing:normal}
rdx-player[data-status="connecting"] #player-status,
rdx-player[data-status="reconnecting"] #player-status,
rdx-player[data-status="buffering"] #player-status{color:var(--rdx-color-status-warning)}
rdx-player[data-status="offline"] #player-status,
rdx-player[data-status="unavailable"] #player-status,
rdx-player[data-status="blocked"] #player-status{color:var(--rdx-color-status-danger)}

.library{min-width:0}
.library-navigation{position:fixed;top:calc(var(--app-player-height) + var(--app-player-gap));left:50%;transform:translateX(-50%);width:min(var(--rdx-max-content-width),100%);box-sizing:border-box;z-index:48;padding:var(--rdx-space-2) var(--rdx-gutter);background:var(--rdx-color-bg-base)}
.section-heading{display:block}
.navigation-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--rdx-space-2)}
.navigation-actions .header-actions{display:contents}
.navigation-actions .view-switch{grid-column:1;grid-row:1}
.navigation-actions #settings-open{grid-column:2;grid-row:1}
.navigation-actions .header-sleep-timer{grid-column:1/-1;grid-row:2}
.view-switch{display:grid;flex:1;min-width:0;grid-template-columns:1fr 1fr;gap:var(--rdx-space-2);width:100%}
.view-switch-button{min-height:44px;border:var(--rdx-border-width) solid var(--rdx-color-border-strong);border-radius:var(--rdx-radius-md);background:var(--rdx-color-bg-surface-1);color:var(--rdx-color-text-primary);font-size:var(--rdx-font-size-md);font-weight:var(--rdx-font-weight-bold)}
.view-switch-button[aria-pressed="true"]{background:var(--rdx-color-accent-primary);border-color:var(--rdx-color-accent-primary);color:var(--rdx-color-text-inverse)}
.favourite-tile{grid-template-columns:minmax(0,1fr) auto;padding-left:var(--rdx-space-3)}
.favourite-tile .rdx-tile-heading{font-size:var(--rdx-font-size-base);font-weight:var(--rdx-font-weight-bold)}
.library-tools{display:grid;grid-template-columns:1fr;gap:var(--rdx-space-2);align-items:start;margin-bottom:var(--rdx-space-1)}
.library-tools[hidden]{display:none}
.library-tools:not([hidden]){margin-top:var(--rdx-space-2)}
.rdx-search{margin:0}
.station-count{min-height:18px;margin:var(--rdx-space-1) 0 var(--rdx-space-2);color:var(--rdx-color-text-tertiary);font-size:var(--rdx-font-size-xs)}
.station-list{display:block;border-top:var(--rdx-border-width) solid var(--rdx-color-border-subtle)}
.station-favourite{align-self:center}
.station-favourite svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.station-favourite[aria-pressed="true"]{color:var(--rdx-color-accent-secondary);background:var(--rdx-color-accent-sec-subtle)}
.station-favourite[aria-pressed="true"] svg{fill:currentColor}
.manage-mode .station-favourite{color:var(--rdx-color-status-danger)}
.empty-state{display:grid;justify-items:start;gap:var(--rdx-space-3);padding:var(--rdx-space-6) 0;color:var(--rdx-color-text-secondary);border-top:var(--rdx-border-width) solid var(--rdx-color-border-subtle)}
.empty-state p{margin:0}

.app-footer{display:grid;justify-items:start;gap:var(--rdx-space-3);margin-top:var(--rdx-space-6);padding-top:var(--rdx-space-4);border-top:var(--rdx-border-width) solid var(--rdx-color-border-subtle);color:var(--rdx-color-text-tertiary);font-size:var(--rdx-font-size-xs)}
.app-footer:not(:has(button:not([hidden]))){display:none}
.rdx-player-meta[data-save-song]:focus-visible{outline:2px solid var(--rdx-color-border-focus);outline-offset:2px}
.saved-songs-list{list-style:none;padding:0;max-height:50dvh;overflow:auto}
.saved-songs-list li{display:grid;gap:var(--rdx-space-1);padding-block:var(--rdx-space-2)}
.saved-songs-list li+li{border-top:1px solid var(--rdx-color-border-subtle)}
.saved-songs-list li span{color:var(--rdx-color-text-secondary);font-size:var(--rdx-font-size-xs)}
#stations rdx-row:has(.favourite-order){grid-template-columns:minmax(0,1fr) auto auto}
.favourite-order{display:flex;align-items:center}
.favourite-drag{touch-action:none;cursor:grab}
.favourite-drag:active{cursor:grabbing}
#stations [data-drop-target]{outline:2px solid var(--rdx-color-border-focus);outline-offset:-2px}

.settings-link{display:flex;align-items:center;width:100%;min-height:var(--rdx-touch-target-min);background:transparent;border:0;color:var(--rdx-color-text-primary);text-align:left;cursor:pointer}
.settings-link:hover{background:var(--rdx-color-bg-surface-2)}
.settings-block{margin-top:var(--rdx-space-5)}
.settings-block h3{margin:0;font-family:var(--rdx-font-family-serif);font-size:var(--rdx-font-size-lg)}
.sheet-help{margin:var(--rdx-space-1) 0 var(--rdx-space-4);color:var(--rdx-color-text-secondary);font-size:var(--rdx-font-size-sm)}
.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--rdx-space-2)}
.preset-grid .is-active,.preset-grid [aria-pressed="true"]{background:var(--rdx-color-accent-primary);border-color:var(--rdx-color-accent-primary);color:var(--rdx-color-text-inverse)}
.cancel-timer{width:100%;margin-top:var(--rdx-space-3);color:var(--rdx-color-status-danger)}
.cancel-timer:disabled,.cancel-timer[hidden]{display:none}

@media(max-width:430px){
  .section-heading{align-items:center}
  .library-tools{grid-template-columns:1fr}
  .preset-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:359px){
  rdx-player[placement="pinned"] .rdx-player-surface{grid-template-columns:auto minmax(0,1fr) auto;gap:8px}
  #player-bar .rdx-player-art{width:36px;height:36px}
  .section-heading h1{font-size:var(--rdx-font-size-lg)}
}
@media(display-mode:standalone){#install-button{display:none!important}}

/* Track scroll: reveal the literal ending rather than scrolling an ellipsis. */
#player-status.is-track-scrolling{text-overflow:clip!important}
#player-status.is-track-scrolling::after{content:"";display:inline-block;width:16px;height:1px}


/* Compact two-column station shortcuts in every appearance theme. */
.rdx-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.favourite-tile{min-height:68px;height:auto;padding:10px 12px;gap:6px}
.favourite-tile .rdx-tile-heading{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.3;font-size:.9375rem}
/* Small contained logos fit the existing tiles without changing their height. */
.favourite-tile.has-station-logo{grid-template-columns:32px minmax(0,1fr);column-gap:8px}
.station-tile-logo{display:block;width:32px;height:32px;object-fit:contain;border-radius:4px;background:#fff}
.favourite-tile .rdx-tile-status{position:absolute;right:6px;bottom:4px}
.empty-state{grid-column:1/-1}
.navigation-actions .view-switch-button{font-size:.9375rem}
.header-sleep-timer{font-size:.75rem}
.header-sleep-timer[hidden]{display:none}
html{scroll-padding-top:calc(var(--app-player-height) + var(--app-player-gap) + var(--app-navigation-height) + 12px)}

/* Keep transport contrast independent of the accent/inverse button tokens.
   Override the compatibility runtime's blue hover, which can stick on touch. */
#player-bar .rdx-player-primary-btn,
#player-bar .rdx-player-primary-btn:hover{
  background:var(--rdx-color-text-primary);
  color:var(--rdx-color-bg-base);
}
#player-bar .rdx-player-primary-btn:active{transform:scale(.96)}
@media (forced-colors:active){
  #player-bar .rdx-player-primary-btn,
  #player-bar .rdx-player-primary-btn:hover{
    background:ButtonFace;color:ButtonText;border:1px solid ButtonText;
  }
}