/* library.css — page chrome for /library.html. Reuses radio.css for the
   player aside; this file styles the surrounding page (background, panel,
   tracklist, version-warn ribbon) and overrides the radio's fixed-corner
   positioning so it sits inline. Modeled on play.css for the page-level
   bits (top-bar, scanlines, vignette) — keeps the visual pulls aligned. */

body.library-page {
  margin: 0;
  padding: 0;
  background: #00c800;
  color: #000;
  font-family: vtFont, "Courier New", monospace;
  font-size: 22px;
  min-height: 100vh;
}

/* CRT scanlines + vignette — matches radio.css / play.css. radio.css scopes
   its overlay to body.radio-page, so /library needs its own copy keyed to
   .library-page to keep the site-wide CRT pull on this page too. */
body.library-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.18) 0 1px,
    transparent 1px 3px
  );
}
body.library-page::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.35) 100%
  );
}

body.library-page .top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25em 0.8em;
  background: #fff;
  color: #000;
  border-bottom: 2px solid #000;
  z-index: 100;
  font-family: vtFont, "Courier New", monospace;
  font-size: 0.85em;
  letter-spacing: 0.04em;
}
body.library-page .top-bar a,
body.library-page .top-bar a:visited {
  color: inherit;
  text-decoration: none;
  padding: 0 0.4em;
}
body.library-page .top-bar a:hover,
body.library-page .top-bar a:focus {
  background: #000;
  color: #fff;
  outline: none;
}

/* /library borrows a Winamp visual idiom: the player, toolbar, and playlist
   below all share the same width and butt right up against each other so
   they read as one stacked unit. Override radio.css's fixed-corner
   positioning, drop its own bottom-shadow (so the unit casts a single
   shadow from the panel only — no extra visible strip between sections),
   and force border-box so the borders eat into the 100% width rather than
   widening the element past its siblings. */
body.library-page .radio,
body.library-page .library__toolbar,
body.library-page .panel--library {
  box-sizing: border-box;
  margin: 0;
}
body.library-page .radio {
  position: static;
  width: 100%;
  max-width: none;
  /* Right-only shadow on the radio (no bottom strip). Without dropping
     the bottom-strip, the radio's 4px-tall shadow protrudes between the
     player and the toolbar — visible because the toolbar's white background
     starts at the radio's BORDER bottom edge, not 4px below it. The
     toolbar carries a matching right-only shadow, and the panel at the
     bottom adds the unit's only bottom shadow strip. The right column thus
     reads as one continuous 4px shadow from the top of the radio to the
     bottom of the panel. */
  box-shadow: 4px 0 0 #000;
}

.library {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* No gap between children — the warn ribbon owns its own bottom margin
     so the player+playlist stack stays a single visual block. */
  padding: 4em 1em 2em;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

/* Bee cursor only while the radio is rendering a new track — shared idiom
   from radio.css. */
body.library-page:has(#radio-scope-wrap.is-loading),
body.library-page:has(#radio-scope-wrap.is-loading) * {
  cursor: url(/bee.png) 8 0, auto;
}

/* Version-mismatch ribbon — same chrome / wording as play.css's .play__warn.
   Discreet; sits above the player so the stacked unit below isn't broken up
   by an interstitial element when the warning shows. */
.library__warn {
  margin: 0 auto 0.8em;
  padding: 0.4em 0.6em;
  background: #fff;
  border: 2px solid #000;
  font-size: 0.7em;
  letter-spacing: 0.03em;
  text-align: center;
  max-width: 320px;
  box-shadow: 3px 3px 0 #000;
}

/* Toolbar — middle strip between the player and the playlist. Joins the
   stack with no top border (radio's bottom border is the seam above it)
   and a bottom border that becomes the seam to the playlist below. No own
   shadow — the panel below carries the bottom-shadow contribution for the
   whole unit, and the right-side shadow comes from the radio + panel
   stacking. */
.library__toolbar {
  background: #fff;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  width: 100%;
  padding: 0.3em 0.5em;
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-family: vtFont, "Courier New", monospace;
  /* Right-side shadow contribution so the strip aligns with the radio's
     and panel's right shadow column. Without this, the right strip would
     drop out for the height of the toolbar. */
  box-shadow: 4px 0 0 #000;
}
.library__tool {
  font: inherit;
  font-size: 0.78em;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 0.05em 0.45em 0.1em;
  letter-spacing: 0.05em;
  cursor: pointer;
  white-space: nowrap;
}
.library__tool:hover,
.library__tool:focus-visible {
  background: #000;
  color: #fff;
  outline: none;
}
.library__tool[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.library__tool[disabled]:hover,
.library__tool[disabled]:focus-visible {
  background: #fff;
  color: #000;
}
/* Inline status message — appears briefly after import/export to confirm
   the action ("+5 added", "no items", "parse error", etc.). */
.library__tool-msg {
  font-size: 0.72em;
  letter-spacing: 0.04em;
  opacity: 0.75;
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Playlist panel — flush against the toolbar above (which is itself flush
   against the radio). No top border (toolbar's bottom border is the seam),
   no own header bar (the radio's "// LIBRARY //" bar serves as the title
   for the whole unit). Both the player and the panel keep their 4px hard
   shadow: the right-side strips overlap into one continuous shadow (the
   toolbar bridges them with its own box-shadow), and the radio/toolbar
   bottom-shadows are masked by the elements below — so visually the unit
   casts a single shadow. */
.panel--library {
  background: #fff;
  border: 2px solid #000;
  border-top: none;
  box-shadow: 4px 4px 0 #000;
  width: 100%;
}

/* Tracklist — same primitives as /space's .tracklist (rows are play-button +
   title + remove-button), but the third column is a remove [×] instead of a
   play-count. /library doesn't load space.css, so the relevant rules are
   duplicated here. The grid template stays the same as /space's so a row's
   visual rhythm matches. */
.tracklist {
  list-style: none;
  margin: 0;
  padding: 0.4em 0.5em 0.6em;
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  font-size: 0.95em;
}
.tracklist li {
  display: grid;
  grid-template-columns: 1.6em 1fr auto;
  gap: 0.5em;
  align-items: baseline;
  padding: 0.1em 0.25em;
  border: 1px solid transparent;
}
.tracklist li::before { content: none; }
.tracklist li.is-current { background: #000; color: #fff; border-color: #000; }
.tracklist__btn {
  font: inherit;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 0 0.2em;
  cursor: pointer;
  line-height: 1;
}
.tracklist__btn:hover { background: #000; color: #fff; }
.tracklist li.is-current .tracklist__btn { background: #fff; color: #000; }
.tracklist__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.tracklist__title-artist {
  background: #000;
  color: #fff;
  padding: 0 0.3em;
  margin-right: 0.25em;
  letter-spacing: 0.04em;
  font-size: 0.85em;
}
.tracklist li.is-current .tracklist__title-artist {
  background: #fff;
  color: #000;
}
.tracklist__remove {
  font: inherit;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 0 0.4em;
  cursor: pointer;
  line-height: 1;
  font-size: 0.85em;
  letter-spacing: 0.04em;
  opacity: 0.65;
}
.tracklist__remove:hover {
  background: #000;
  color: #00c800;
  opacity: 1;
}
.tracklist li.is-current .tracklist__remove {
  background: #000;
  color: #fff;
  border-color: #fff;
}
.tracklist li.is-current .tracklist__remove:hover {
  background: #fff;
  color: #000;
}

/* Empty state — quiet block, links styled to match the top-bar inversion. */
.library__empty {
  margin: 0;
  padding: 1em 0.8em 1.2em;
  font-size: 0.9em;
  text-align: center;
  opacity: 0.85;
}
.library__empty a,
.library__empty a:visited {
  color: #000;
  text-decoration: underline;
}
.library__empty a:hover,
.library__empty a:focus {
  background: #000;
  color: #00c800;
  outline: none;
  text-decoration: none;
}

/* When the panel is in empty-state, hide the empty <ol> so there's no
   stray padding / dotted whitespace. */
.panel--library.is-empty .tracklist { display: none; }

@media (max-width: 600px) {
  body.library-page .top-bar { display: none; }
  body.library-page {
    background: #fff;
  }
  .library {
    padding: 1em;
    max-width: 100%;
  }
  /* Radio inherits 100% width from the desktop rules — nothing extra
     needed here. */
}