/* ============================================================
   scrapeURmusic

   Design note
   -----------
   The subject is a machine that pulls records out of open catalogues, so
   the interface borrows from studio hardware rather than from dashboards:
   a graphite deck, silkscreen labels, and gold — the colour of a VU needle
   and a gold record — as the only interactive accent.

   Boldness is spent in ONE place: the waveform. Each bar there is a real
   track, its height is the track's duration and its colour says whether
   full audio came back. It is the progress bar, the result set and the
   hero image at once. Everything else stays quiet so it can shout.
   ============================================================ */

/* ---------------------------------------------------------- tokens */
:root {
  --void:  #0B0E13;   /* page */
  --deck:  #141922;   /* panels */
  --rail:  #1D2430;   /* inputs, sunken wells */
  --ink:   #E9EDF3;   /* text */
  --dim:   #7F8B9C;   /* secondary text */
  --edge:  #262F3C;   /* borders, dividers */
  --gold:  #E3A93C;   /* the one interactive accent */

  --gold-hi: #F0BC5B;
  --gold-lo: #C98F2A;

  /* signal scale — used only where it means signal level */
  --sig-lo:  #4FA860;
  --sig-mid: #D9A03C;
  --sig-hi:  #D1584A;

  --display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --prose: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", "Consolas", "Cascadia Mono", monospace;

  --pad: clamp(1rem, 4vw, 3.5rem);
  --r: 12px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--prose);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, .label, .wordmark__text { font-family: var(--display); }
h1, h2, h3 { line-height: 1.08; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
canvas { display: block; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: #17130A; padding: .7rem 1rem;
  border-radius: 0 0 8px 0; font-weight: 600;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------- topbar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.25rem;
  padding: .75rem var(--pad);
  background: color-mix(in srgb, var(--void) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--edge);
}
.wordmark {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--ink);
}
.wordmark__text { font-weight: 800; letter-spacing: -.03em; font-size: 1.15rem; }
.wordmark__text b { color: var(--gold); font-weight: 800; }

/* four bars, the smallest possible version of the waveform */
.wordmark__mark { display: flex; align-items: flex-end; gap: 2px; height: 18px; }
.wordmark__mark i {
  width: 3px; border-radius: 2px; background: var(--gold);
  animation: bob 1.6s var(--ease) infinite;
}
.wordmark__mark i:nth-child(1) { height: 40%; animation-delay: 0s; }
.wordmark__mark i:nth-child(2) { height: 100%; animation-delay: .18s; }
.wordmark__mark i:nth-child(3) { height: 65%; animation-delay: .36s; }
.wordmark__mark i:nth-child(4) { height: 28%; animation-delay: .54s; }
@keyframes bob { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }

.topnav { display: flex; gap: 1.25rem; margin-left: auto; }
.topnav a {
  color: var(--dim); text-decoration: none; font-size: .9rem;
  padding: .25rem 0; border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.topnav a:hover { color: var(--ink); border-color: var(--gold); }

.topbar__right { display: flex; align-items: center; gap: .75rem; }
.status {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .02em;
  padding: .38rem .7rem; border-radius: 999px;
  border: 1px solid var(--edge); background: var(--deck); color: var(--dim);
  white-space: nowrap;
}
.status__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--dim);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dim) 20%, transparent);
}
.status[data-mode="live"] { color: var(--sig-lo); border-color: color-mix(in srgb, var(--sig-lo) 40%, var(--edge)); }
.status[data-mode="live"] .status__dot { background: var(--sig-lo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sig-lo) 22%, transparent); animation: pulse 2s infinite; }
.status[data-mode="demo"] { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, var(--edge)); }
.status[data-mode="demo"] .status__dot { background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px transparent; } }

/* ---------------------------------------------------------- stage */
.stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  padding: clamp(2.5rem, 7vw, 6rem) var(--pad) clamp(2rem, 5vw, 4rem);
  position: relative;
}
.stage::after {
  /* one soft pool of light behind the deck, not a full-bleed gradient wash */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 55% at 68% 42%,
              color-mix(in srgb, var(--gold) 9%, transparent), transparent 70%);
  pointer-events: none;
}
.stage h1 {
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  font-weight: 800;
}
.stage h1 em { font-style: normal; color: var(--gold); }
.lede {
  margin-top: 1.1rem; color: var(--dim);
  font-size: clamp(1rem, 1.4vw, 1.12rem); max-width: 46ch;
}
.stage__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.stage__facts {
  display: flex; flex-wrap: wrap; gap: 2rem; margin: 2.5rem 0 0;
  padding-top: 1.5rem; border-top: 1px solid var(--edge);
}
.stage__facts div { margin: 0; }
.stage__facts dt {
  font-family: var(--display); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--dim);
}
.stage__facts dd {
  margin: .25rem 0 0; font-family: var(--mono); font-size: 1.5rem; font-weight: 600;
}
.stage__facts .is-zero { color: var(--gold); }

.stage__viz { margin: 0; position: relative; }
#hero-wave {
  width: 100%; height: clamp(220px, 30vw, 340px);
  background: linear-gradient(180deg, var(--deck), color-mix(in srgb, var(--deck) 60%, var(--void)));
  border: 1px solid var(--edge); border-radius: var(--r);
}
.stage__viz figcaption {
  margin-top: .8rem; color: var(--dim); font-size: .82rem; max-width: 40ch;
}

/* ---------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .8rem 1.4rem; border-radius: 8px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  font-weight: 600; font-size: .95rem;
  transition: transform .18s var(--ease), background .2s var(--ease),
              border-color .2s var(--ease), color .2s var(--ease);
}
.btn--gold { background: var(--gold); color: #17130A; }
.btn--gold:hover { background: var(--gold-hi); transform: translateY(-2px); }
.btn--gold:active { background: var(--gold-lo); transform: none; }
.btn--ghost { border-color: var(--edge); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn--wide { flex: 2; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ---------------------------------------------------------- sections */
section { padding: clamp(2.5rem, 6vw, 5rem) var(--pad); }
.section-head { margin-bottom: 2rem; max-width: 60ch; }
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; }
.section-head p { color: var(--dim); margin-top: .6rem; }

.panel {
  background: var(--deck); border: 1px solid var(--edge);
  border-radius: var(--r); padding: clamp(1.1rem, 2vw, 1.6rem);
}
.label {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  font-weight: 600; color: var(--dim); padding: 0;
}
.label__actions { margin-left: auto; display: flex; gap: .4rem; }
.label__actions button {
  background: none; border: 0; color: var(--gold); cursor: pointer;
  font-size: .72rem; text-transform: lowercase; letter-spacing: .02em;
  padding: .15rem .3rem; border-radius: 4px;
}
.label__actions button:hover { color: var(--gold-hi); text-decoration: underline; }

.field { border: 0; padding: 0; margin: 0; }
.rule { border: 0; border-top: 1px solid var(--edge); margin: 1.4rem 0; }
.hint { color: var(--dim); font-size: .82rem; margin-top: .7rem; }

/* ---------------------------------------------------------- console */
.console__grid {
  display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  gap: 1.25rem; align-items: start;
}

/* ---- the count fader: the loud control */
.count { display: flex; align-items: baseline; gap: .7rem; margin-top: .9rem; }
.count__input {
  width: 4.6ch; background: transparent; border: 0; border-bottom: 2px solid transparent;
  font-family: var(--mono); font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 600;
  padding: 0; letter-spacing: -.02em;
}
.count__input:focus { outline: none; border-bottom-color: var(--gold); }
.count__input::-webkit-outer-spin-button,
.count__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.count__input { -moz-appearance: textfield; }
.count__unit { color: var(--dim); font-size: .9rem; }

.fader { margin-top: .5rem; }
.fader__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 34px; background: transparent; cursor: pointer;
  --pct: 2%;
}
/* The track is a level meter: green while the run is short, hot as the
   quota climbs. Colour here is the cost of what you just asked for. */
.fader__range::-webkit-slider-runnable-track {
  height: 12px; border-radius: 6px;
  background-image:
    linear-gradient(90deg, transparent var(--pct), var(--rail) 0),
    linear-gradient(90deg, var(--sig-lo) 0%, var(--sig-lo) 50%,
                    var(--sig-mid) 72%, var(--sig-hi) 100%);
  border: 1px solid var(--edge);
}
.fader__range::-moz-range-track {
  height: 12px; border-radius: 6px;
  background-image:
    linear-gradient(90deg, transparent var(--pct), var(--rail) 0),
    linear-gradient(90deg, var(--sig-lo) 0%, var(--sig-lo) 50%,
                    var(--sig-mid) 72%, var(--sig-hi) 100%);
  border: 1px solid var(--edge);
}
.fader__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 34px; margin-top: -12px; border-radius: 5px;
  background: linear-gradient(180deg, #6A7787, #39434F);
  border: 1px solid #0C1015;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 3px 8px rgba(0,0,0,.5);
}
.fader__range::-moz-range-thumb {
  width: 20px; height: 34px; border-radius: 5px; border: 1px solid #0C1015;
  background: linear-gradient(180deg, #6A7787, #39434F);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 3px 8px rgba(0,0,0,.5);
}
.fader__ticks {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: .68rem; color: var(--dim); margin-top: .1rem;
}

.presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.presets button {
  background: transparent; border: 1px solid var(--edge); color: var(--dim);
  border-radius: 999px; padding: .28rem .7rem; font-size: .8rem; cursor: pointer;
  font-family: var(--mono);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.presets button:hover { color: var(--ink); border-color: var(--gold); }

/* ---- year range: two thumbs on one rail, deliberately quiet */
.years__readout {
  display: block; font-family: var(--mono); font-weight: 600;
  font-size: 1.05rem; margin: .7rem 0 .3rem;
}
.years { position: relative; height: 34px; }
.years__track {
  position: absolute; left: 0; right: 0; top: 14px; height: 6px;
  background: var(--rail); border-radius: 3px; border: 1px solid var(--edge);
}
.years__span {
  position: absolute; top: 0; bottom: 0; background: var(--gold);
  border-radius: 3px; left: 0; right: 0;
}
.years input[type="range"] {
  position: absolute; left: 0; top: 0; width: 100%; height: 34px; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; pointer-events: none;
}
.years input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 34px; }
.years input[type="range"]::-moz-range-track { background: transparent; height: 34px; }
.years input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 14px; height: 24px; margin-top: 5px; border-radius: 4px; cursor: grab;
  background: linear-gradient(180deg, #6A7787, #39434F);
  border: 1px solid #0C1015; box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.years input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 14px; height: 24px; border-radius: 4px; cursor: grab;
  background: linear-gradient(180deg, #6A7787, #39434F);
  border: 1px solid #0C1015; box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
#year-lo { z-index: 3; }
#year-hi { z-index: 4; }
.years.grab-lo #year-lo { z-index: 5; }
.years__ticks {
  position: absolute; left: 0; right: 0; top: 26px;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: .66rem; color: var(--dim);
}

/* ---- genre chips: most are on, so "on" is calm and "off" is dimmed */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.chip {
  background: var(--void); border: 1px solid var(--edge); color: #56606E;
  border-radius: 999px; padding: .35rem .75rem; font-size: .8rem; cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease),
              background .18s var(--ease), transform .18s var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--gold); }
.chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--gold) 14%, var(--void));
  border-color: color-mix(in srgb, var(--gold) 55%, var(--edge));
  color: var(--ink);
}
.chip:active { transform: scale(.96); }

/* ---- selects, checkbox */
.select { position: relative; margin-top: .9rem; }
.select::after {
  content: ""; position: absolute; right: .9rem; top: 50%; pointer-events: none;
  width: 0; height: 0; margin-top: -2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--dim);
}
.select select {
  -webkit-appearance: none; appearance: none; width: 100%;
  background: var(--rail); border: 1px solid var(--edge); color: var(--ink);
  border-radius: 8px; padding: .7rem 2.2rem .7rem .8rem; cursor: pointer;
}
.select select:focus { outline: none; border-color: var(--gold); }
.check { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; cursor: pointer; font-size: .9rem; }
.check input { accent-color: var(--gold); width: 16px; height: 16px; }

.actions { display: flex; gap: .6rem; margin-top: 1.6rem; }

/* ---------------------------------------------------------- monitor */
.monitor { display: flex; flex-direction: column; gap: .85rem; min-height: 100%; }
.monitor__head { display: flex; align-items: center; }
.phase {
  margin-left: auto; font-family: var(--display); font-size: .72rem;
  letter-spacing: .14em; color: var(--gold);
}
.monitor__status { display: flex; align-items: baseline; gap: 1rem; }
.monitor__status strong { font-size: 1.35rem; font-weight: 600; }
.pace { margin-left: auto; color: var(--dim); font-family: var(--mono); font-size: .8rem; }

.meter { height: 6px; background: var(--rail); border-radius: 3px; overflow: hidden; }
.meter__fill {
  display: block; height: 100%; width: 0%; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold));
  transition: width .45s var(--ease);
}
.nowplaying { color: var(--dim); font-size: .88rem; min-height: 1.4em; }

.monitor__wave {
  width: 100%; height: 120px; background: var(--void);
  border: 1px solid var(--edge); border-radius: 8px;
}

.counters { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; }
.counters div { margin: 0; }
.counters dt {
  font-family: var(--display); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--dim);
}
.counters dd { margin: .2rem 0 0; font-family: var(--mono); font-size: 1.15rem; font-weight: 600; }
.counters .is-good { color: var(--sig-lo); }
.counters .is-bad { color: var(--sig-hi); }

.log {
  flex: 1; min-height: 190px; max-height: 300px; overflow-y: auto;
  background: var(--void); border: 1px solid var(--edge); border-radius: 8px;
  padding: .7rem .8rem; font-family: var(--mono); font-size: .78rem; line-height: 1.75;
}
.log__empty { color: var(--dim); }
.log__line { display: flex; gap: .6rem; animation: slide-in .25s var(--ease) both; }
.log__line time { color: #55606E; flex: none; }
.log__line span { min-width: 0; overflow-wrap: anywhere; }
.log__line.is-warn span { color: var(--sig-mid); }
.log__line.is-bad span { color: var(--sig-hi); }
.log__line.is-ok span { color: var(--sig-lo); }
.log__line.is-head span { color: var(--gold); font-weight: 600; }
@keyframes slide-in { from { opacity: 0; transform: translateX(-6px); } }

.log::-webkit-scrollbar, .table-wrap::-webkit-scrollbar { width: 9px; height: 9px; }
.log::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb {
  background: var(--edge); border-radius: 5px;
}

/* ---------------------------------------------------------- results */
.table-wrap { overflow-x: auto; border: 1px solid var(--edge); border-radius: var(--r); }
.tracks { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 680px; }
.tracks th {
  text-align: left; font-family: var(--display); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--dim);
  padding: .85rem 1rem; background: var(--deck); position: sticky; top: 0;
  border-bottom: 1px solid var(--edge);
}
.tracks td { padding: .7rem 1rem; border-bottom: 1px solid var(--edge); }
.tracks tbody tr { transition: background .18s var(--ease); }
.tracks tbody tr:hover { background: var(--deck); }
.tracks tbody tr.is-new { animation: row-in .4s var(--ease) both; }
@keyframes row-in { from { opacity: 0; transform: translateY(-6px); } }
.tracks td:first-child, .tracks td:nth-child(4) { font-family: var(--mono); color: var(--dim); }
.tracks__empty td { color: var(--dim); text-align: center; padding: 2.5rem 1rem; }

.tag {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  font-size: .7rem; font-family: var(--mono); border: 1px solid var(--edge);
  color: var(--dim);
}
.tag--full { color: var(--sig-lo); border-color: color-mix(in srgb, var(--sig-lo) 45%, var(--edge)); }
.tag--none { color: var(--sig-hi); border-color: color-mix(in srgb, var(--sig-hi) 45%, var(--edge)); }
.tag--id   { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--edge)); }

/* ---------------------------------------------------------- pipeline */
.stages {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem;
  counter-reset: stage;
}
.stages li {
  background: var(--deck); border: 1px solid var(--edge); border-radius: var(--r);
  padding: 1.4rem; position: relative; overflow: hidden;
}
.stages li::before {
  /* the run really does move left to right through these four */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--gold);
  transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease);
}
.stages li.is-in::before { transform: scaleY(1); }
.stages__no {
  font-family: var(--mono); font-size: .8rem; color: var(--gold);
}
.stages h3 { font-size: 1.1rem; margin: .5rem 0 .5rem; font-weight: 600; }
.stages p { color: var(--dim); font-size: .88rem; }

/* ---------------------------------------------------------- sources */
.source-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem;
}
.source-grid li {
  border: 1px solid var(--edge); border-radius: 10px; padding: .9rem 1rem;
  background: var(--deck);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.source-grid li:hover { border-color: var(--gold); transform: translateY(-2px); }
.source-grid b { display: block; font-family: var(--mono); font-size: .92rem; font-weight: 600; }
.source-grid span { color: var(--dim); font-size: .78rem; }

/* ---------------------------------------------------------- footer */
.foot {
  border-top: 1px solid var(--edge); padding: 2.5rem var(--pad);
  display: flex; flex-wrap: wrap; gap: 1rem 3rem; align-items: start;
}
.foot__mark { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; }
.foot__mark b { color: var(--gold); }
.foot__note { color: var(--dim); font-size: .82rem; max-width: 62ch; }

/* ---------------------------------------------------------- reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .console__grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr; }
  .topnav { display: none; }
}
@media (max-width: 560px) {
  .stage__facts { gap: 1.25rem; }
  .counters { gap: 1rem; }
  .actions { flex-direction: column; }
  .status__text { display: none; }
  .status { padding: .38rem; }
}

/* ---------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .stages li::before { transform: scaleY(1); }
}