/* Colours, type and resets. Dark by default; light follows the device or the theme setting. */
:root {
  --bg: #111111; --s1: #181818; --s2: #202020; --line: #2C2C2C; --line-2: #3A3A3A;
  --text: #EDEAE3; --muted: #8F8B83; --faint: #5C5953;
  --red: #E63B2E; --yellow: #F2C230; --blue: #1F5FBF; --blue-text: #6E9BE8;
  --on-red: #FFFFFF; --on-yellow: #111111;
  --display: "Jost", "Futura", "Century Gothic", sans-serif;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hit: 44px; --player-h: 104px; --ease: cubic-bezier(.2, 0, 0, 1);
  /* panels: quick off the mark, then a long settle; coming in takes longer than going out (motion.css) */
  --ease-out: cubic-bezier(.32, .72, 0, 1); --t-in: .38s; --t-out: .26s;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #EFEBE1; --s1: #F7F4EC; --s2: #E6E1D5; --line: #D6D0C2; --line-2: #BDB6A6;
    --text: #111111; --muted: #5F5B53; --faint: #948E82; --blue-text: #1F5FBF; color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #EFEBE1; --s1: #F7F4EC; --s2: #E6E1D5; --line: #D6D0C2; --line-2: #BDB6A6;
  --text: #111111; --muted: #5F5B53; --faint: #948E82; --blue-text: #1F5FBF; color-scheme: light;
}
* { box-sizing: border-box; border-radius: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 var(--ui); }
body { transition: background .2s var(--ease), color .2s var(--ease); }
/* an app, not a document: nothing selects on a click or drag except what you type into */
body { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
@media (hover: none) { button:focus-visible { outline: none; } }   /* a touch screen: no outline left on the last button tapped */
img { display: block; }

/* What the admin switched off (html[data-off], set by shared/look.js before the first paint): an element
   says which feature it belongs to with data-f. It is gone for everyone; the admin still has it, faded. */
html[data-off~="lyrics"]:not([data-admin]) [data-f~="lyrics"],
html[data-off~="wall"]:not([data-admin]) [data-f~="wall"],
html[data-off~="stats"]:not([data-admin]) [data-f~="stats"],
html[data-off~="recap"]:not([data-admin]) [data-f~="recap"],
html[data-off~="alarm"]:not([data-admin]) [data-f~="alarm"],
html[data-off~="sleep"]:not([data-admin]) [data-f~="sleep"],
html[data-off~="playlists"]:not([data-admin]) [data-f~="playlists"],
html[data-off~="likes"]:not([data-admin]) [data-f~="likes"],
html[data-off~="groups"]:not([data-admin]) [data-f~="groups"],
html[data-off~="people"]:not([data-admin]) [data-f~="people"],
html[data-off~="radio"]:not([data-admin]) [data-f~="radio"],
html[data-off~="browse"]:not([data-admin]) [data-f~="browse"],
html[data-off~="eq"]:not([data-admin]) [data-f~="eq"],
html[data-off~="links"]:not([data-admin]) [data-f~="links"],
html[data-off~="local"]:not([data-admin]) [data-f~="local"],
html[data-off~="look"]:not([data-admin]) [data-f~="look"],
html[data-off~="namelist"]:not([data-admin]) [data-f~="namelist"],
html[data-off~="playlists"][data-off~="likes"]:not([data-admin]) [data-fall="lists"] { display: none !important; }
html[data-admin][data-off~="lyrics"] [data-f~="lyrics"],
html[data-admin][data-off~="wall"] [data-f~="wall"],
html[data-admin][data-off~="stats"] [data-f~="stats"],
html[data-admin][data-off~="recap"] [data-f~="recap"],
html[data-admin][data-off~="alarm"] [data-f~="alarm"],
html[data-admin][data-off~="sleep"] [data-f~="sleep"],
html[data-admin][data-off~="playlists"] [data-f~="playlists"],
html[data-admin][data-off~="likes"] [data-f~="likes"],
html[data-admin][data-off~="groups"] [data-f~="groups"],
html[data-admin][data-off~="people"] [data-f~="people"],
html[data-admin][data-off~="radio"] [data-f~="radio"],
html[data-admin][data-off~="browse"] [data-f~="browse"],
html[data-admin][data-off~="eq"] [data-f~="eq"],
html[data-admin][data-off~="links"] [data-f~="links"],
html[data-admin][data-off~="local"] [data-f~="local"],
html[data-admin][data-off~="look"] [data-f~="look"],
html[data-admin][data-off~="namelist"] [data-f~="namelist"],
html[data-admin][data-off~="playlists"][data-off~="likes"] [data-fall="lists"] { opacity: .45; }

svg { flex: none; }
.min0 { min-width: 0; }
.push { margin-left: auto; }

/* the server stopped answering (shared/playback.js): a bar along the top, and the controls rest until it's back */
#offline { display: none; }
html[data-offline] #offline { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  background: var(--yellow); color: #111; font: 600 13px var(--ui); text-align: center; }
html[data-offline] :is(.player, .canvas, #drawer) { opacity: .5; pointer-events: none; transition: opacity .3s; }