/* Classic-Winamp-inspired skin: beveled steel chrome, green LCD readouts,
   amber accents, black playlist with green rows. Pure CSS — no fonts or
   images fetched, so it works on an offline mesh LAN. */

:root {
  --bg: #14141c;
  --face: #2e2e3d;          /* window/button metal */
  --face-hi: #5a5a72;       /* bevel light edge */
  --face-lo: #0c0c12;       /* bevel dark edge */
  --lcd-bg: #000;
  --green: #00e800;
  --green-dim: #00a000;
  --green-dark: #006000;
  --amber: #ffbf00;
  --text: #d8dce6;
  --muted: #8b93a5;
  --accent: #00e800;
  --sb-thumb: linear-gradient(#3c3c4e, #23232f);   /* scrollbar thumb, per-skin */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  background-image: repeating-linear-gradient(
    45deg, transparent 0 6px, rgb(255 255 255 / 1.5%) 6px 7px);
  color: var(--text);
  font-family: Tahoma, "MS Sans Serif", Verdana, sans-serif;
  font-size: 13px;
  max-width: 720px;
  margin-inline: auto;
  padding: 0 1rem 3rem;
}

/* -- footer (the coffee link, public host only) --------------------------- */
#site-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--face-lo);
  text-align: center;
}
/* Our own button in the donation site's colours, so the policy needs no
   third-party script, style or font for it. */
#site-footer .coffee {
  display: inline-block;
  padding: 0.4rem 1rem;
  border: 1px solid #000;
  border-radius: 6px;
  background: #ffdd00;
  color: #000;
  font-weight: 600;
  text-decoration: none;
}
#site-footer .coffee:hover { filter: brightness(1.06); }

/* -- help (? button + dialog) --------------------------------------------- */
.help-btn {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
}
.help-btn:hover { color: var(--amber); }

dialog#help {
  width: calc(100% - 2rem);
  max-width: 30rem;
  padding: 0;
  color: var(--text);
  background: linear-gradient(#343444, #26262f);
  border: 2px solid;
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
}
dialog#help::backdrop { background: rgb(0 0 0 / 60%); }
.help-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0.35rem 0.4rem 0.35rem 0.7rem;
  background: linear-gradient(#464658, #2a2a36);
  border-bottom: 2px solid var(--face-lo);
}
.help-titlebar h2 { margin: 0; padding: 0; }        /* titlebar already provides chrome */
.help-close {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--muted);
}
.help-close:hover { color: var(--amber); }
.help-body { padding: 0.85rem 1.1rem 1.1rem; font-size: 0.82rem; line-height: 1.65; }
.help-body p { margin: 0 0 0.7rem; }
.help-body strong { color: #cfd3dd; }
.help-list { margin: 0; padding-left: 1.1rem; }
.help-list li { margin-bottom: 0.5rem; line-height: 1.55; }
.help-body .k {
  color: var(--green);
  font-family: "Lucida Console", "Courier New", monospace;
  white-space: nowrap;
}

/* -- about page ----------------------------------------------------------- */
.about { padding: 1rem 1.1rem; line-height: 1.65; }
.about p { margin: 0 0 0.8rem; }
.about strong { color: #cfd3dd; }
.about-links { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.btn-link {
  display: inline-block;
  padding: 0.4rem 1rem;
  color: #cfd3dd;
  text-decoration: none;
  background: linear-gradient(#4a4a5c, #2c2c38);
  border: 2px solid;
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
  text-shadow: 1px 1px 0 #000;
}
.btn-link:hover { color: var(--amber); filter: brightness(1.12); }
.btn-link:active { border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo); }
.about-version { margin-top: 1rem; color: var(--muted); font-size: 0.75rem; }

/* archive day: Play this day + Export to YouTube side by side */
.day-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; }
.day-actions form { margin: 0; }
.day-actions .btn-link { padding: 0.3rem 0.75rem; font-size: 0.95rem; }

/* -- skin picker ---------------------------------------------------------- */
.skin-select {
  font-family: inherit;
  font-size: 0.7rem;
  color: var(--muted);
  background: linear-gradient(#464658, #2a2a36);
  border: 1px solid;
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
  padding: 0.1rem 0.2rem;
  cursor: pointer;
}

/* -- search --------------------------------------------------------------- */
/* The filters wrap under the box on a phone rather than squeezing it: the
   query is what gets typed, the selects are what gets picked. */
.search-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.search-form select {
  flex: 0 1 auto; max-width: 9rem;
  padding: 0.3rem 0.35rem;
  background: var(--lcd-bg); color: var(--green);
  border: 2px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  font-family: "Lucida Console", "Courier New", monospace; font-size: 0.78rem;
}
.search-form input[type="search"] {
  flex: 1; min-width: 0;
  padding: 0.35rem 0.5rem;
  background: var(--lcd-bg); color: var(--green);
  border: 2px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  font-family: "Lucida Console", "Courier New", monospace; font-size: 0.85rem;
}
.search-count { color: var(--muted); font-size: 0.75rem; margin: 0 0 0.5rem; }
.results {
  list-style: none; margin: 0; padding: 0.4rem 0.55rem;
  background: var(--lcd-bg); border: 2px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  font-family: "Lucida Console", "Courier New", monospace; font-size: 0.82rem;
  color: var(--green);
  max-height: min(65vh, 30rem); overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--face) var(--lcd-bg);
}
.results li { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; padding: 0.2rem 0; }
.results .title { color: var(--green); }
.results .artist { color: var(--green-dim); }
.results .sender { color: var(--amber); font-size: 0.75rem; }
.results .shares { color: var(--green-dim); font-size: 0.72rem; }
.results .day-link { color: var(--green-dark); margin-left: auto; font-size: 0.72rem; text-decoration: none; }
.results .day-link:hover { color: var(--amber); }
.results button { flex: none; }

/* Cover-art stamp beside a song in the archive's lists (partials/thumb.html).
   Sized here and on the <img> so lazy-loaded rows don't shift the list as the
   stills arrive; the face colour holds the place until they do. The bevel is
   .art's, so the stamp reads as part of the same chrome. */
.thumb {
  flex: none;
  width: 56px; height: 32px;
  object-fit: cover;
  background: var(--face-lo);
  border: 1px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
}
/* .results rows align on the text baseline, which would sit the image's bottom
   edge on it; centre the stamp on the row instead. */
.results .thumb { align-self: center; }

/* -- stats ---------------------------------------------------------------- */
.stat-tiles { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; }
.stat {
  flex: 1 1 5rem; text-align: center; padding: 0.6rem 0.4rem;
  background: linear-gradient(#343444, #26262f);
  border: 2px solid;
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
}
.stat-n { display: block; font-size: 1.5rem; color: var(--green);
  font-family: "Lucida Console", "Courier New", monospace; text-shadow: 0 0 6px rgb(0 232 0 / 25%); }
.stat-l { display: block; font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.board {
  list-style: none; margin: 0 0 1.4rem; padding: 0.4rem 0.6rem;
  background: var(--lcd-bg); border: 2px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  font-family: "Lucida Console", "Courier New", monospace; font-size: 0.82rem;
  counter-reset: brow;
}
.board li { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.22rem 0; white-space: nowrap; }
.board li::before {
  counter-increment: brow; content: counter(brow) "."; color: var(--green-dim);
  min-width: 1.7em; text-align: right; flex: none;
}
.board-name { color: var(--green); overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
a.board-name:hover { color: var(--amber); }
.board-val { margin-left: auto; color: var(--amber); font-size: 0.75rem; flex: none; }

/* -- window chrome ------------------------------------------------------- */

.bevel-out { border: 2px solid; border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi); }

header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.8rem;
  padding: 0.25rem 0.6rem;
  background: linear-gradient(#3c3c4e, #23232f);
  border: 2px solid;
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
}
header h1 {
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 0;
  color: #cfd3dd;
  text-shadow: 1px 1px 0 #000;
}
header a { color: inherit; text-decoration: none; }
nav { display: flex; gap: 0.4rem; margin-left: auto; }
nav a {
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.6rem;
  background: linear-gradient(#464658, #2a2a36);
  border: 1px solid;
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
  text-decoration: none;
}
nav a:hover { color: var(--amber); }
/* Current section: pressed-in button, the way a 90s player marks the open tab. */
nav a[aria-current="page"] {
  color: var(--green);
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  background: linear-gradient(#2a2a36, #464658);
}

/* section headers double as window title bars */
h2, h3, .eq-window summary {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #cfd3dd;
  text-shadow: 1px 1px 0 #000;
  text-align: center;
  background:
    repeating-linear-gradient(#3c3c4e 0 2px, #23232f 2px 4px);
  border: 2px solid;
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
  padding: 0.3rem 0.6rem;
  margin: 1.2rem 0 0;
}
h3 { margin-top: 1rem; }
h3 small { color: var(--muted); text-transform: none; letter-spacing: normal; }

/* -- main player window ---------------------------------------------------- */

.card {
  background: linear-gradient(#343444, #26262f);
  border: 2px solid;
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
  box-shadow: 0 4px 14px rgb(0 0 0 / 50%);
  padding: 0.7rem;
  display: flex;
  gap: 0.7rem;
  align-items: center;
  flex-wrap: wrap;
}
.art {
  width: 168px;
  align-self: stretch;          /* match the readout height — no letterbox gap */
  object-fit: cover;
  border: 2px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
}

/* track readout = green LCD */
.now-playing .meta {
  flex: 1;
  min-width: 0;
  min-height: 92px;             /* floor for the readout (and the art beside it) */
  background: var(--lcd-bg);
  border: 2px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  padding: 0.45rem 0.55rem;
  font-family: "Lucida Console", "Courier New", monospace;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
}
.meta .title { font-size: 0.95rem; font-weight: 400; color: var(--green); }
.meta .artist { color: var(--green-dim); font-size: 0.8rem; }
.meta .sender { color: var(--amber); font-size: 0.72rem; }

.marquee { overflow: hidden; }
.marquee span {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 14s linear infinite;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* spectrum analyzer canvas (drawn from real FFT data in the speaker tab) */
.vis-canvas {
  display: block;
  flex: none;                   /* don't let the flex column stretch it tall */
  width: 100%;
  height: 30px;
  margin-top: 0.2rem;
  image-rendering: pixelated;
}

/* -- play bar (position slider + LCD times) -------------------------------- */

.playbar { display: flex; gap: 0.5rem; align-items: center; width: 100%; }
.playbar .time {
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 0.85rem;
  color: var(--green);
  background: var(--lcd-bg);
  border: 2px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  padding: 0.15rem 0.35rem;
  white-space: nowrap;
  min-width: 3.4rem;
  text-align: center;
}

input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  height: 14px;
  background:
    linear-gradient(var(--face-lo), var(--face-lo)) center / 100% 4px no-repeat,
    linear-gradient(#26262f, #26262f);
  border: 1px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  cursor: pointer;
  width: 110px;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 26px;
  height: 12px;
  background:
    linear-gradient(90deg, transparent 0 10px, #d8b830 10px 15px, transparent 15px),
    linear-gradient(#5a5a72, #343444);
  border: 1px solid;
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
}
input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 12px;
  border-radius: 0;
  background:
    linear-gradient(90deg, transparent 0 10px, #d8b830 10px 15px, transparent 15px),
    linear-gradient(#5a5a72, #343444);
  border: 1px solid;
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
}
.playbar input[type="range"] { flex: 1; width: auto; }
input[type="range"]:disabled { cursor: default; }

/* volume gets the classic green→amber→red gradient groove */
.controls input[type="range"][title="Volume"] {
  background:
    linear-gradient(90deg, var(--green-dark), var(--green) 45%, var(--amber) 75%, #ff4030) center / 100% 6px no-repeat,
    linear-gradient(#26262f, #26262f);
}

/* -- transport buttons ------------------------------------------------------ */

.controls { display: flex; gap: 0.35rem; align-items: center; width: 100%; }
button {
  background: linear-gradient(#4a4a5c, #2c2c38);
  color: #cfd3dd;
  border: 2px solid;
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
  border-radius: 0;
  padding: 0.3rem 0.75rem;
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  text-shadow: 1px 1px 0 #000;
}
button:hover { color: #fff; filter: brightness(1.12); }
button:active { border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo); }

.radio-btn { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.radio-btn.active { color: var(--green); }

button.subtle {
  padding: 0.05rem 0.45rem;
  font-size: 0.78rem;
  color: var(--muted);
}
button.subtle:hover { color: var(--amber); }

.vol-icon { font-size: 0.85rem; margin-left: auto; }

.badge {
  background: var(--lcd-bg);
  color: var(--amber);
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  border: 1px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  padding: 0.1rem 0.4rem;
}
.badge.failed { color: #ff6050; }

/* -- day banner (the kbps/kHz strip) --------------------------------------- */

.day-banner {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  background: var(--lcd-bg);
  border: 2px solid;
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
  font-family: "Lucida Console", "Courier New", monospace;
  padding: 0.3rem 0.55rem;
  margin: 1rem 0 0.45rem;
}
.day-banner .day-date { color: var(--green); font-size: 0.8rem; }
.day-banner .day-theme { color: var(--amber); font-size: 0.85rem; font-weight: 700; }
.day-banner .day-export {
  margin-left: auto;               /* flush right, always visible */
  align-self: center;
  flex: none;
  padding: 0.12rem 0.5rem;
  font-size: 0.72rem;
}

/* -- playlist (queue + archive) --------------------------------------------- */

ol, ul { line-height: 1.75; }

.queue, .days, section.theme ol {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0.55rem;
  background: var(--lcd-bg);
  border: 2px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 0.82rem;
  color: var(--green);
  counter-reset: plrow;
}
.queue li, section.theme ol li {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}
.queue li::before, section.theme ol li::before {
  counter-increment: plrow;
  content: counter(plrow) ".";
  color: var(--green-dim);
  min-width: 1.4em;
  text-align: right;
}
.queue .title, section.theme .title { overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.queue .artist, section.theme .artist { color: var(--green-dim); overflow: hidden; text-overflow: ellipsis; }
.queue .sender, section.theme .sender { color: var(--green-dark); font-size: 0.75rem; }
.queue .duration { color: var(--green); }
.queue li { cursor: pointer; }
.queue li:hover { background: #101810; }
.queue li.selected {
  background: #1c2a1c;
  outline: 1px solid var(--green-dim);
  outline-offset: -1px;
}
.queue li.selected::before { color: var(--green); }

/* Winamp playlist window: the queue and archive lists scroll inside their own
   LCD box (unlimited rows) instead of stretching the page. max-height only
   caps — short lists keep their natural height. Beveled-steel scrollbar to
   match the chrome. */
.queue, .days, section.theme ol {
  max-height: min(55vh, 24rem);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;                       /* Firefox */
  scrollbar-color: var(--face) var(--lcd-bg);
}
.queue::-webkit-scrollbar,
.days::-webkit-scrollbar,
section.theme ol::-webkit-scrollbar { width: 15px; }
.queue::-webkit-scrollbar-track,
.days::-webkit-scrollbar-track,
section.theme ol::-webkit-scrollbar-track {
  background: var(--lcd-bg);
  border-left: 2px solid var(--face-lo);
}
.queue::-webkit-scrollbar-thumb,
.days::-webkit-scrollbar-thumb,
section.theme ol::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border: 2px solid;
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
}
.queue::-webkit-scrollbar-thumb:hover,
.days::-webkit-scrollbar-thumb:hover,
section.theme ol::-webkit-scrollbar-thumb:hover { background: linear-gradient(#464658, #2a2a36); }
.queue::-webkit-scrollbar-button,
.days::-webkit-scrollbar-button,
section.theme ol::-webkit-scrollbar-button { display: none; }

/* right-hand group, Winamp order: sender/badge, then duration flush right */
.queue li .badge, .queue li .sender { order: 7; margin-left: auto; flex: none; }
.queue li .duration { order: 8; }

.queue-actions {
  margin: 0.35rem 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
}

/* -- archive calendar ------------------------------------------------------- */
.cal-hint { color: var(--muted); font-size: 0.78rem; margin: 0 0 0.9rem; }
.cal-month { margin-bottom: 1.3rem; }
/* Month nav: one month at a time, arrows step to the next month with songs. */
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.cal-nav h3 { margin: 0; text-align: center; }
.cal-step {
  color: var(--green);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
  padding: 0.15rem 0.5rem;
  border: 1px solid transparent;
}
.cal-step:hover {
  color: var(--amber);
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
}
/* Ends of history: kept in place so the label doesn't shift, but dead. */
.cal-step-off { color: var(--green-dark); opacity: 0.4; }
.cal-step-off:hover { color: var(--green-dark); border-color: transparent; background: none; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  padding: 0.5rem;
  background: var(--lcd-bg);
  border: 2px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
}
.cal-head {
  text-align: center;
  font-size: 0.62rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 0.15rem;
}
.cal-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Lucida Console", "Courier New", monospace;
  border: 1px solid transparent;
  text-decoration: none;
}
.cal-blank { border: 0; }
.cal-day { font-size: 0.7rem; line-height: 1; }
/* Quiet days: present but unlit. */
.cal-off { color: var(--green-dark); opacity: 0.55; }
/* Days with songs: lit, tappable, count badge under the date. */
.cal-on {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 8%, transparent);
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
  cursor: pointer;
}
.cal-on:hover {
  color: var(--amber);
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
}
.cal-count {
  font-size: 0.6rem;
  color: var(--amber);
  line-height: 1;
  margin-top: 2px;
}
.cal-on:hover .cal-count { color: var(--amber); }

/* Calendar ↔ theme list: the two ways into the same archive. */
.cal-swap {
  float: right;
  color: var(--green);
  text-decoration: none;
  border: 1px solid transparent;
  padding: 0 0.35rem;
}
.cal-swap:hover {
  color: var(--amber);
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
}

/* Day page: previous/next day either side of the way back to the month. */
.day-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.75rem;
}
.day-steps .cal-step { font-size: 0.75rem; font-family: "Lucida Console", monospace; }
.day-month {
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
  padding: 0 0.35rem;
}
.day-month:hover { color: var(--amber); border-color: var(--amber); }

/* -- archive theme list ----------------------------------------------------- */
/* Same LCD board as the stats leaderboards, but these rows are history, not a
   ranking — so no position counter. */
.board-plain li::before { content: none; }
.board-plain { margin-bottom: 1rem; }
.theme-month {
  font-size: 0.62rem;
  color: var(--muted);
  letter-spacing: 0.18em;
  margin: 0.9rem 0 0.3rem;
  text-transform: uppercase;
}
.theme-runs {
  color: var(--green-dim);
  font-size: 0.7rem;
  flex: none;
  border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
  padding: 0 0.25rem;
}

section.theme { margin-top: 0; }
section.theme ol button { margin-left: auto; flex: none; }

/* Prose links (the 404 page's ways out, hint lines): the skin's colours rather
   than the browser's default blue, which belongs to no skin. */
main p a:not([class]) { color: var(--accent); text-decoration-color: var(--accent); }
main p a:not([class]):hover { color: var(--amber); text-decoration-color: var(--amber); }

.empty, .sender { color: var(--muted); }
p.empty {
  background: var(--lcd-bg);
  border: 2px solid;
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  color: var(--green-dim);
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 0.82rem;
  padding: 0.5rem 0.6rem;
}

/* -- equalizer window --------------------------------------------------------- */

.eq-window { margin-top: 1.2rem; }
.eq-window summary {
  margin: 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.eq-window summary::-webkit-details-marker { display: none; }
.eq-window summary::before { content: "▸ "; color: var(--amber); }
.eq-window[open] summary::before { content: "▾ "; }
.eq-body {
  background: linear-gradient(#343444, #26262f);
  border: 2px solid;
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
  border-top: none;
  padding: 0.6rem 0.7rem;
}
.eq-actions { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.5rem; }
#eq-on.active { color: var(--green); }
select {
  background: linear-gradient(#4a4a5c, #2c2c38);
  color: #cfd3dd;
  border: 2px solid;
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
  border-radius: 0;
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.15rem 0.3rem;
  cursor: pointer;
}
/* The opened dropdown popup is drawn by the OS: without an explicit option
   colour, light option text lands on a white popup and vanishes (notably the
   WMP skin). Set both so each skin's list stays legible. */
select option { background: #26262f; color: #d8dce6; }
.vol-icon { cursor: pointer; user-select: none; }
.eq-bands { display: flex; align-items: flex-end; }
.eq-band { flex: 1; min-width: 0; }
.eq-slider-wrap { width: 22px; height: 100px; position: relative; margin: 0 auto; }
.eq-slider-wrap input[type="range"] {
  position: absolute;
  width: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  margin: 0;
}
.eq-slider-wrap input[type="range"]::-webkit-slider-thumb { width: 18px; }
.eq-slider-wrap input[type="range"]::-moz-range-thumb { width: 18px; }
.eq-band label {
  display: block;
  text-align: center;
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 0.6rem;
  color: var(--muted);
  margin-top: 0.25rem;
}
.eq-gap {
  width: 8px;
  align-self: stretch;
  border-left: 1px solid var(--face-lo);
  border-right: 1px solid var(--face-hi);
  margin: 0 6px;
}

/* -- day navigation ---------------------------------------------------------- */

.day-nav { display: flex; margin-top: 1rem; }
.day-nav .next { margin-left: auto; }

#audio-ctl {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  color: var(--amber);
  box-shadow: 0 4px 16px rgb(0 0 0 / 60%);
}

/* embed mode's YouTube player window */
#yt-window {
  margin-top: 1rem;
  padding: 0.5rem;
  background: linear-gradient(#343444, #26262f);
  border: 2px solid;
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
  box-shadow: 0 4px 14px rgb(0 0 0 / 50%);
}
#yt-window iframe, #yt-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

/* -- small screens ------------------------------------------------------------ */

@media (max-width: 520px) {
  body { padding: 0 0.5rem 3rem; font-size: 12px; }
  header { flex-wrap: wrap; gap: 0.5rem; }
  .art { width: 112px; }
  .thumb { width: 44px; height: 25px; }
  .meta .title { font-size: 0.85rem; }
  .controls { flex-wrap: wrap; }
  .controls input[type="range"][title="Volume"] { flex: 1; min-width: 80px; }
  .playbar .time { min-width: 2.9rem; font-size: 0.75rem; padding: 0.15rem 0.2rem; }
  .queue .sender { display: none; }      /* keep title + duration readable */
  .queue li .duration { margin-left: auto; }
  .queue, .days, section.theme ol { font-size: 0.75rem; }
  .eq-gap { margin: 0 2px; }
  .eq-slider-wrap { width: 18px; }
  .eq-band label { font-size: 0.55rem; }
}

/* fatter touch targets where there's no mouse */
@media (pointer: coarse) {
  button { padding: 0.45rem 0.9rem; }
  button.subtle { padding: 0.25rem 0.6rem; }
  input[type="range"] { height: 20px; }
  input[type="range"]::-webkit-slider-thumb { height: 18px; }
  input[type="range"]::-moz-range-thumb { height: 18px; }
}

/* ============================================================================
   SKINS. The default look above is "winamp". Alternate skins re-theme mostly
   by overriding the CSS variables (which recolors everything var-driven) plus
   the handful of hardcoded structural gradients. Chosen via <html data-skin>
   (server-rendered from a cookie; picker in the header).
   ========================================================================== */

/* ---- iTunes (early-2000s aqua / brushed metal) --------------------------- */
html[data-skin="itunes"] {
  --bg: #c9ccd1;
  --face: #e2e4e8; --face-hi: #ffffff; --face-lo: #9298a3;
  --lcd-bg: #ffffff;
  --green: #1b1d21; --green-dim: #666c75; --green-dark: #2a67d6;
  --amber: #2a67d6; --text: #1b1d21; --muted: #6a707a; --accent: #2a67d6;
  --sb-thumb: linear-gradient(#f6f8fa, #c4c9d1);
}
html[data-skin="itunes"] body {
  background: linear-gradient(#eceef1, #cdd0d5);
  color: var(--text);
  font-family: "Lucida Grande", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  accent-color: #2a67d6;
}
html[data-skin="itunes"] header {
  background: linear-gradient(#f6f7f8, #cfd2d7);
  border: 1px solid #9aa0aa; border-radius: 6px;
}
html[data-skin="itunes"] header h1,
html[data-skin="itunes"] h2,
html[data-skin="itunes"] h3,
html[data-skin="itunes"] .help-titlebar,
html[data-skin="itunes"] .eq-window summary { color: #3a3f47; text-shadow: 0 1px 0 #fff; }
html[data-skin="itunes"] nav a,
html[data-skin="itunes"] .skin-select,
html[data-skin="itunes"] button,
html[data-skin="itunes"] .btn-link,
html[data-skin="itunes"] select {
  background: linear-gradient(#ffffff, #dde5f1);
  border: 1px solid #9db0cb; border-radius: 12px;
  color: #26364d; text-shadow: 0 1px 0 rgb(255 255 255 / 70%);
}
html[data-skin="itunes"] nav a:hover,
html[data-skin="itunes"] button:hover,
html[data-skin="itunes"] .btn-link:hover { color: #2a67d6; filter: brightness(1.02); }
html[data-skin="itunes"] .card,
html[data-skin="itunes"] .eq-body,
html[data-skin="itunes"] #yt-window,
html[data-skin="itunes"] dialog#help,
html[data-skin="itunes"] .stat {
  background: linear-gradient(#ffffff, #eef0f3);
  border: 1px solid #b7bcc5; border-radius: 6px; box-shadow: none;
}
html[data-skin="itunes"] h2,
html[data-skin="itunes"] h3,
html[data-skin="itunes"] .help-titlebar {
  background: linear-gradient(#eef0f3, #d8dbe0);
  border: 1px solid #b7bcc5; border-radius: 5px;
}
html[data-skin="itunes"] .queue,
html[data-skin="itunes"] .days,
html[data-skin="itunes"] section.theme ol,
html[data-skin="itunes"] .results,
html[data-skin="itunes"] .board,
html[data-skin="itunes"] .search-form input[type="search"],
html[data-skin="itunes"] .search-form select {
  background: #ffffff; border: 1px solid #b7bcc5; color: #1b1d21;
  font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
}
/* classic iTunes zebra rows + blue selection */
html[data-skin="itunes"] .queue li:nth-child(even),
html[data-skin="itunes"] .results li:nth-child(even),
html[data-skin="itunes"] .board li:nth-child(even),
html[data-skin="itunes"] section.theme ol li:nth-child(even) { background: #eef3fb; }
html[data-skin="itunes"] .queue li:hover,
html[data-skin="itunes"] .queue li.selected,
html[data-skin="itunes"] .results li:hover,
html[data-skin="itunes"] section.theme ol li:hover { background: #2a67d6; }
html[data-skin="itunes"] .queue li:hover *,
html[data-skin="itunes"] .queue li.selected *,
html[data-skin="itunes"] .results li:hover *,
html[data-skin="itunes"] section.theme ol li:hover * { color: #eaf1ff; }
html[data-skin="itunes"] .queue li.selected { outline: 1px solid #eaf1ff; outline-offset: -1px; }
html[data-skin="itunes"] .stat-n { color: #2a67d6; text-shadow: none; }
html[data-skin="itunes"] .badge { color: #2a67d6; }
html[data-skin="itunes"] select option { background: #ffffff; color: #26364d; }

/* ---- Windows Media Player (early-2000s blue/silver gloss) ---------------- */
html[data-skin="wmp"] {
  --bg: #0c1a2e;
  --face: #2c4c78; --face-hi: #6f97c8; --face-lo: #08111f;
  --lcd-bg: #0a1c34;
  --green: #d3e6ff; --green-dim: #7fa8d8; --green-dark: #5f88bf;
  --amber: #ff9b2f; --text: #dbe8fb; --muted: #89a6cc; --accent: #3b82e0;
  --sb-thumb: linear-gradient(#6a9ad2, #274d80);
}
html[data-skin="wmp"] body {
  background: radial-gradient(120% 80% at 50% 0%, #24406b 0%, #0a1526 65%);
  color: var(--text);
  font-family: Tahoma, "Segoe UI", Verdana, sans-serif;
  accent-color: #3b82e0;
}
html[data-skin="wmp"] header,
html[data-skin="wmp"] h2,
html[data-skin="wmp"] h3,
html[data-skin="wmp"] .help-titlebar,
html[data-skin="wmp"] .eq-window summary {
  background: linear-gradient(#4a76b0, #17325a);
  color: #eaf3ff; border: 1px solid #12305a; border-radius: 7px;
  text-shadow: 0 1px 2px #06122a;
}
html[data-skin="wmp"] nav a,
html[data-skin="wmp"] .skin-select,
html[data-skin="wmp"] button,
html[data-skin="wmp"] .btn-link,
html[data-skin="wmp"] select {
  background: linear-gradient(#6a9ad2, #274f86);
  border: 1px solid #12305a; border-radius: 10px;
  color: #f2f8ff; text-shadow: 0 1px 2px #08182f;
}
html[data-skin="wmp"] nav a:hover,
html[data-skin="wmp"] button:hover,
html[data-skin="wmp"] .btn-link:hover { color: #ff9b2f; filter: brightness(1.08); }
html[data-skin="wmp"] .card,
html[data-skin="wmp"] .eq-body,
html[data-skin="wmp"] #yt-window,
html[data-skin="wmp"] dialog#help,
html[data-skin="wmp"] .stat {
  background: linear-gradient(#17335a, #0b1c33);
  border: 1px solid #315f95; border-radius: 8px;
}
html[data-skin="wmp"] .queue,
html[data-skin="wmp"] .days,
html[data-skin="wmp"] section.theme ol,
html[data-skin="wmp"] .results,
html[data-skin="wmp"] .board,
html[data-skin="wmp"] .search-form input[type="search"],
html[data-skin="wmp"] .search-form select {
  background: #0a1c34; border: 1px solid #2b527f; color: #d3e6ff; border-radius: 4px;
}
html[data-skin="wmp"] .queue li:hover,
html[data-skin="wmp"] .queue li.selected,
html[data-skin="wmp"] .results li:hover,
html[data-skin="wmp"] section.theme ol li:hover { background: #1d3f6d; }
html[data-skin="wmp"] .queue li.selected { outline: 1px solid #6db3ff; outline-offset: -1px; }
html[data-skin="wmp"] .stat-n { color: #7fd0ff; text-shadow: 0 0 8px rgb(90 170 255 / 40%); }
html[data-skin="wmp"] .badge { color: #ff9b2f; }
html[data-skin="wmp"] select option { background: #17335a; color: #eaf3ff; }

/* ---- Alt theme ---------------------------------------------------------- */
html[data-skin="aurora"] {
  --bg: #1a0b2e;
  --face: #3a1f5c; --face-hi: #ff77e1; --face-lo: #10071f;
  --lcd-bg: #170a2b;
  --green: #29ffe3; --green-dim: #b98cff; --green-dark: #ff77e1;
  --amber: #ff6ec7; --text: #f2e9ff; --muted: #b98cff; --accent: #ff6ec7;
  --sb-thumb: linear-gradient(#ff6ec7, #7b3ff2);
}
html[data-skin="aurora"] body {
  background: linear-gradient(135deg, #2a1155, #7b2f8f, #b1367a, #2a1155);
  background-size: 400% 400%;
  animation: vw-pan 18s ease infinite;
  color: var(--text);
  font-family: "Segoe UI", Verdana, sans-serif;
  accent-color: #ff6ec7;
}
@keyframes vw-pan {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="aurora"] body { animation: none; }
}
html[data-skin="aurora"] header,
html[data-skin="aurora"] h2,
html[data-skin="aurora"] h3,
html[data-skin="aurora"] .help-titlebar,
html[data-skin="aurora"] .eq-window summary {
  background: linear-gradient(#3a1f5c, #23123f);
  color: #29ffe3; border: 1px solid #ff77e1; border-radius: 6px;
  text-shadow: 0 0 8px rgb(41 255 227 / 45%);
}
html[data-skin="aurora"] nav a,
html[data-skin="aurora"] .skin-select,
html[data-skin="aurora"] button,
html[data-skin="aurora"] .btn-link,
html[data-skin="aurora"] select {
  background: linear-gradient(#5a2a8f, #34195f);
  border: 1px solid #ff6ec7; border-radius: 10px;
  color: #f2e9ff; text-shadow: 0 0 6px rgb(255 110 199 / 40%);
}
html[data-skin="aurora"] nav a:hover,
html[data-skin="aurora"] button:hover,
html[data-skin="aurora"] .btn-link:hover { color: #29ffe3; filter: brightness(1.1); }
html[data-skin="aurora"] .card,
html[data-skin="aurora"] .eq-body,
html[data-skin="aurora"] #yt-window,
html[data-skin="aurora"] dialog#help,
html[data-skin="aurora"] .stat {
  background: linear-gradient(#2a1550, #190a30);
  border: 1px solid #7b3ff2; border-radius: 8px;
  box-shadow: 0 0 18px rgb(123 63 242 / 30%);
}
html[data-skin="aurora"] .queue,
html[data-skin="aurora"] .days,
html[data-skin="aurora"] section.theme ol,
html[data-skin="aurora"] .results,
html[data-skin="aurora"] .board,
html[data-skin="aurora"] .search-form input[type="search"] {
  background: #170a2b; border: 1px solid #7b3ff2; color: #29ffe3; border-radius: 4px;
}
html[data-skin="aurora"] .queue li:hover,
html[data-skin="aurora"] .queue li.selected,
html[data-skin="aurora"] .results li:hover,
html[data-skin="aurora"] section.theme ol li:hover { background: #3a1f5c; }
html[data-skin="aurora"] .queue li.selected { outline: 1px solid #ff6ec7; outline-offset: -1px; }
html[data-skin="aurora"] .stat-n { color: #29ffe3; text-shadow: 0 0 10px rgb(41 255 227 / 50%); }
html[data-skin="aurora"] .badge { color: #ff6ec7; }
html[data-skin="aurora"] select option { background: #23123f; color: #f2e9ff; }

/* -- transient toast ------------------------------------------------------ */
.mr-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%) translateY(1rem);
  z-index: 9999;
  pointer-events: none;
  background: var(--lcd-bg);
  color: var(--green);
  border: 2px solid;
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
  padding: 0.5rem 0.9rem;
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 0.82rem;
  box-shadow: 0 4px 16px rgb(0 0 0 / 50%);
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
}
.mr-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* -- toggled flourish ----------------------------------------------------- */
@keyframes mr-fx1-hue { to { filter: hue-rotate(360deg); } }
@keyframes mr-fx1-spin { to { transform: rotate(360deg) scale(1.6); } }
html.mr-fx1 body { animation: mr-fx1-hue 5s linear infinite; }
html.mr-fx1 body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 20% 25%, rgb(255 0 128 / 40%), transparent 42%),
    radial-gradient(circle at 80% 35%, rgb(0 200 255 / 40%), transparent 42%),
    radial-gradient(circle at 30% 80%, rgb(255 220 0 / 40%), transparent 42%),
    radial-gradient(circle at 75% 78%, rgb(120 0 255 / 40%), transparent 42%);
  animation: mr-fx1-spin 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  html.mr-fx1 body,
  html.mr-fx1 body::before { animation: none; }
}
.mr-fx1-v {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: min(42vw, 360px);
  aspect-ratio: 16 / 9;
  z-index: 10000;
  background: #000;
  border: 3px solid #ff2fd0;
  box-shadow: 0 0 24px rgb(255 47 208 / 60%), 0 0 48px rgb(0 200 255 / 45%);
}
.mr-fx1-v iframe { display: block; width: 100%; height: 100%; border: 0; }