/* Type-led, near-monochrome. Artwork is the only saturated thing on the page. */
:root { --ink: #111; --paper: #fafaf8; --muted: #8a8a85; --rule: #e4e4df; --wash: #f0f0ec; color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root { --ink: #eceae4; --paper: #101010; --muted: #7d7d78; --rule: #262626; --wash: #1a1a1a; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.5 ui-serif, Georgia, "Times New Roman", serif;
}
body.has-bar { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
#app { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.25rem; }
button { font: inherit; color: inherit; cursor: pointer; }
img { max-width: 100%; }
a { color: inherit; }

/* Two ways in: the folder tree, or artists by tag. And search, when asked for. */
.modes { display: flex; gap: 1rem; margin-bottom: 1.5rem; align-items: baseline; }
.modes a, .modes button { background: none; border: none; padding: 0; font: inherit;
  color: var(--muted); cursor: pointer; letter-spacing: .08em; text-transform: uppercase;
  font-size: .75rem; text-decoration: none; }
.modes a.on { color: var(--ink); border-bottom: 1px solid var(--ink); }
.modes .search-link { margin-left: auto; }
.search-box { font: inherit; width: 100%; padding: .5rem; margin: 0 0 1.5rem; background: var(--paper);
  color: var(--ink); border: 1px solid var(--rule); }
.search-box:focus { border-color: var(--ink); outline: none; }
.search-heading { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  font-weight: 400; margin: 1.5rem 0 .5rem; }
.search-track { display: flex; align-items: baseline; gap: .5rem; }
.search-track > .label { padding: .7rem 0; }
.search-track .artist { color: var(--muted); font-size: .85rem; }

/* Where you are: "ROCK · RAINBOW · LIVE" */
.path { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 .75rem; }
.path a { text-decoration: none; }
.path a:hover { color: var(--ink); }
.folder-name { font-size: 1.5rem; font-weight: 500; margin: 0 0 1rem; }
.empty { color: var(--muted); }

/* The shelf: folders as a list, records facing out. */
.folders { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.shelf-folder { border-bottom: 1px solid var(--rule); }
.shelf-folder a, .shelf-record a { display: block; text-decoration: none; }
.shelf-folder a { padding: .7rem 0; }
.shelf-folder:hover .label { text-decoration: underline; }
.records { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
.shelf-record .cover { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--wash); }
.shelf-record .label { display: block; margin-top: .4rem; font-size: .9rem; line-height: 1.3; }
.year { color: var(--muted); font-size: .85rem; }

/* The record. */
.record-head { display: grid; grid-template-columns: minmax(0, 20rem) 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 40rem) { .record-head { grid-template-columns: 1fr; } }
.record-cover { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--wash); }
.record-meta h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 .25rem; font-weight: 500; }
.byline { margin: 0 0 .5rem; }
.facts, .history { color: var(--muted); font-size: .9rem; margin: .15rem 0; }
.history { margin: 1.25rem 0 .5rem; }
.play-record { margin: 1rem 0 0; padding: .5rem 1.5rem; background: none; border: 1px solid var(--ink); }
@media (hover: hover) { .play-record:hover { background: var(--ink); color: var(--paper); } }
.play-record:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.disc { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin: 1.75rem 0 .5rem; font-weight: 400; }
.tracks { list-style: none; margin: 0; padding: 0; }
.tracks li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 6rem 3.5rem; align-items: center;
  gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.tracks .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracks .n, .tracks .dur { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tracks .dur { text-align: right; }
.tracks .bar { height: 2px; background: var(--muted); opacity: .5; }
.tracks li.current .n::before { content: '▶'; font-size: .6rem; margin-right: .3rem; }
.tracks li.current .title { font-weight: 600; }
.tracks li.current .bar { background: var(--ink); opacity: 1; }
/* A phone is too narrow for a bar column worth reading: the bar takes its own
   line, under the title, at full width. */
@media (max-width: 30rem) {
  .tracks li { grid-template-columns: 2.2rem minmax(0, 1fr) 3.2rem; grid-template-areas: "n title dur" "n bar bar";
    gap: .3rem .75rem;
    align-items: start; }
  .tracks .n { grid-area: n; }
  .tracks .title { grid-area: title; }
  .tracks .bar { grid-area: bar; }
  .tracks .dur { grid-area: dur; }
}

/* The bar. A bar, not a destination. */
.player-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--paper);
  border-top: 1px solid var(--rule); padding: .75rem 1.25rem; padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
  display: flex; gap: 1rem; align-items: center; cursor: pointer; }
.player-bar .bar-progress { position: absolute; top: -1px; left: 0; height: 2px; background: var(--ink); width: 0; }
.player-bar .bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.player-bar .bar-title, .player-bar .bar-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-bar .bar-sub { color: var(--muted); font-size: .85rem; }
.player-bar .bar-error { color: #b0413e; }
.player-bar .bar-time { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.player-bar .toggle { background: none; border: 1px solid var(--ink); width: 2.6rem; height: 2.6rem; border-radius: 50%;
  font-size: .8rem; flex: none; }
.player-bar.finished .bar-title { color: var(--muted); }

/* The expanded player: full-bleed artwork and the remaining side. */
.now-playing { position: fixed; inset: 0; z-index: 20; background: var(--paper); overflow-y: auto;
  overscroll-behavior: contain; padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
.np-close { position: fixed; top: calc(.75rem + env(safe-area-inset-top)); right: .75rem; z-index: 21;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: none; background: rgba(0, 0, 0, .55); color: #fff; }
.np-cover { display: block; width: 100%; max-width: 46rem; margin: 0 auto; aspect-ratio: 1; object-fit: cover; background: var(--wash); }
.np-body { max-width: 46rem; margin: 0 auto; padding: 1.25rem; }
.np-title { font-size: 1.4rem; font-weight: 500; margin: 0; line-height: 1.2; }
.np-sub { color: var(--muted); margin: .25rem 0 1rem; }
.np-line { height: 2px; background: var(--rule); }
.np-progress { display: block; height: 100%; background: var(--ink); width: 0; }
.np-controls { display: flex; justify-content: space-between; align-items: center; margin: .75rem 0 1.5rem; }
.np-time { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.np-toggle { background: none; border: 1px solid var(--ink); padding: .5rem 1.5rem; }
.np-heading { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin: 0 0 .5rem; }
.np-remaining { list-style: none; margin: 0; padding: 0; }
.np-remaining li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0;
  border-bottom: 1px solid var(--rule); cursor: pointer; }
.np-remaining .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-remaining .dur { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.np-remaining li.current .title { font-weight: 600; }

/* Login, and the one message a listener should see when the server is down. */
.login { display: flex; flex-direction: column; gap: .75rem; max-width: 18rem; margin: 20vh auto; }
.login h1 { font-size: 1.2rem; font-weight: 500; margin: 0 0 .5rem; }
.login input, .login button { font: inherit; padding: .5rem; background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); }
.login button { border-color: var(--ink); }
.login-error { color: #b0413e; font-size: .9rem; margin: 0; min-height: 1.3em; }
.notice { margin: 20vh auto; max-width: 18rem; text-align: center; color: var(--muted); }
.retry { background: none; border: 1px solid var(--ink); padding: .5rem 1.5rem; color: var(--ink); }