/* Live Music Archive Jukebox — sits on top of Bootstrap 5.3.
   Each theme sets a handful of tokens; Bootstrap's own variables are mapped from them. */

:root,
[data-theme="jukebox"] {
  --jb-bg: #12161c; --jb-panel: #1b222b; --jb-line: #2b3540; --jb-fg: #e9e4da; --jb-muted: #9aa3ad;
  --jb-accent: #d9a441; --jb-accent-ink: #1a1306; --jb-alt: #5fb3a8; --jb-alt2: #c97b5b;
}
[data-theme="daylight"] {
  --jb-bg: #f6f7f4; --jb-panel: #ffffff; --jb-line: #dde2dc; --jb-fg: #1d2421; --jb-muted: #5d6762;
  --jb-accent: #1f7a6d; --jb-accent-ink: #ffffff; --jb-alt: #b5651d; --jb-alt2: #4a5fa8;
}
[data-theme="tiedye"] {
  --jb-bg: #1a1226; --jb-panel: #241935; --jb-line: #3a2b52; --jb-fg: #f1eaf8; --jb-muted: #b3a6c6;
  --jb-accent: #ff6fb5; --jb-accent-ink: #2a0717; --jb-alt: #7ee0c4; --jb-alt2: #ffd166;
}
[data-theme="vinyl"] {
  --jb-bg: #fafafa; --jb-panel: #ffffff; --jb-line: #d4d4d4; --jb-fg: #111111; --jb-muted: #555555;
  --jb-accent: #c8102e; --jb-accent-ink: #ffffff; --jb-alt: #111111; --jb-alt2: #c8102e;
}

:root {
  --jb-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --jb-body: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --jb-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
[data-theme] {
  --bs-body-bg: var(--jb-bg);
  --bs-body-color: var(--jb-fg);
  --bs-secondary-color: var(--jb-muted);
  --bs-border-color: var(--jb-line);
  --bs-tertiary-bg: var(--jb-panel);
  --bs-link-color-rgb: initial;
  --bs-link-color: var(--jb-alt);
  --bs-link-hover-color: var(--jb-accent);
  --bs-body-font-family: var(--jb-body);
  --bs-emphasis-color: var(--jb-fg);
}
body { background: var(--jb-bg); color: var(--jb-fg); font-family: var(--jb-body); }
a { color: var(--jb-alt); text-underline-offset: 3px; }
a:hover { color: var(--jb-accent); }
:focus-visible { outline: 2px solid var(--jb-alt); outline-offset: 2px; }
.form-control, .form-select { background-color: var(--jb-panel); color: var(--jb-fg); border-color: var(--jb-line); }
.form-control:focus, .form-select:focus { background-color: var(--jb-panel); color: var(--jb-fg); border-color: var(--jb-alt); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--jb-alt) 30%, transparent); }
.dropdown-menu { --bs-dropdown-bg: var(--jb-panel); --bs-dropdown-border-color: var(--jb-line); --bs-dropdown-link-color: var(--jb-fg); --bs-dropdown-link-hover-bg: var(--jb-line); --bs-dropdown-link-active-bg: var(--jb-accent); --bs-dropdown-link-active-color: var(--jb-accent-ink); }
.mono { font-family: var(--jb-mono); font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: 1rem; top: .5rem; z-index: 2000; background: var(--jb-accent); color: var(--jb-accent-ink); padding: .5rem 1rem; border-radius: .5rem; }

/* Buttons */
.btn-jb { --bs-btn-bg: var(--jb-accent); --bs-btn-color: var(--jb-accent-ink); --bs-btn-border-color: var(--jb-accent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--jb-accent) 85%, var(--jb-fg)); --bs-btn-hover-color: var(--jb-accent-ink); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--jb-accent); --bs-btn-active-color: var(--jb-accent-ink);
  font-family: var(--jb-display); font-weight: 800; border-radius: 999px; }
.btn-outline-secondary { --bs-btn-color: var(--jb-fg); --bs-btn-border-color: var(--jb-line); --bs-btn-hover-bg: var(--jb-line); --bs-btn-hover-color: var(--jb-fg); --bs-btn-hover-border-color: var(--jb-line); border-radius: 999px; }
.btn-lg { font-size: 1rem; padding: .7rem 1.25rem; }

/* Nav & footer */
.jb-nav { background: color-mix(in srgb, var(--jb-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--jb-line); }
.jb-nav .nav-link { color: var(--jb-muted); }
.jb-nav .nav-link.active, .jb-nav .nav-link:hover { color: var(--jb-fg); }
.jb-brand { font-family: var(--jb-display); font-weight: 800; color: var(--jb-fg); letter-spacing: -.01em; }
.jb-brand span { color: var(--jb-accent); }
.jb-brand:hover { color: var(--jb-fg); }
.navbar-toggler { border-color: var(--jb-line); }
[data-bs-theme="dark"] .navbar-toggler-icon { filter: invert(1); }
.jb-footer { border-top: 1px solid var(--jb-line); color: var(--jb-muted); padding: 2rem 0 calc(2rem + env(safe-area-inset-bottom, 0px)); margin-top: 4rem; font-size: .9rem; }
.swatch { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; margin-right: .5rem; vertical-align: -.1rem; border: 1px solid rgba(127,127,127,.4); }
.swatch-jukebox { background: linear-gradient(135deg, #12161c 50%, #d9a441 50%); }
.swatch-daylight { background: linear-gradient(135deg, #f6f7f4 50%, #1f7a6d 50%); }
.swatch-tiedye { background: conic-gradient(#ff6fb5, #ffd166, #7ee0c4, #8b6cff, #ff6fb5); }
.swatch-vinyl { background: radial-gradient(circle, #c8102e 28%, #111 30%); }

/* Type */
.jb-display { font-family: var(--jb-display); font-weight: 800; font-size: clamp(2rem, 5.5vw, 3.25rem); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; }
.jb-display span { color: var(--jb-accent); }
.jb-h { font-family: var(--jb-display); font-weight: 800; letter-spacing: -.01em; }
.deck-label { font: 500 .7rem var(--jb-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--jb-alt); display: block; margin-bottom: .35rem; }
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2rem; }
.artist-desc { color: var(--jb-muted); max-width: 60ch; }

/* Search typeahead */
.picker { position: relative; }
.results { position: absolute; z-index: 1050; left: 0; right: 0; top: 100%; margin-top: .4rem; background: var(--jb-panel); border: 1px solid var(--jb-line); border-radius: .75rem; list-style: none; padding: .25rem 0; max-height: 320px; overflow-y: auto; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.results a { display: block; padding: .55rem 1rem; color: var(--jb-fg); text-decoration: none; }
.results a:hover, .results a:focus-visible { background: var(--jb-line); }
.results .hint { padding: .55rem 1rem; color: var(--jb-muted); font-size: .85rem; }

/* Player deck */
.deck, .panel { background: var(--jb-panel); border: 1px solid var(--jb-line); border-radius: 1.1rem; padding: 1.15rem; }
.deck { display: grid; gap: .9rem; }
.show-artist { font: 800 1rem var(--jb-display); color: var(--jb-accent); margin: .2rem 0 0; min-height: 1.2em; }
.show-artist a { color: inherit; }
.show-date { font: 800 1.65rem/1.1 var(--jb-display); margin: .1rem 0 0; }
.show-venue { color: var(--jb-muted); margin: .15rem 0 0; }
.now { font-weight: 600; font-size: 1.05rem; min-height: 1.5em; }
.bar { position: relative; height: 8px; background: var(--jb-line); border-radius: 4px; cursor: pointer; touch-action: none; }
.bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--jb-accent); border-radius: 4px; }
.times { display: flex; justify-content: space-between; font: 500 .75rem var(--jb-mono); color: var(--jb-muted); font-variant-numeric: tabular-nums; margin-top: .3rem; }
.ctrls { display: flex; align-items: center; justify-content: center; gap: .9rem; }
.ctl { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--jb-line); background: transparent; color: var(--jb-fg); display: grid; place-items: center; }
.ctl.play { width: 64px; height: 64px; background: var(--jb-fg); color: var(--jb-bg); border: 0; }
.ctl svg { width: 22px; height: 22px; fill: currentColor; }
.ctl.play svg { width: 28px; height: 28px; }
.fav[aria-pressed="true"] { color: var(--jb-accent); border-color: var(--jb-accent); }
ol.tracks { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; border-top: 1px solid var(--jb-line); }
ol.tracks li button { width: 100%; display: grid; grid-template-columns: 2.2em 1fr auto; gap: .5rem; text-align: left; background: none; border: 0; color: var(--jb-fg); border-bottom: 1px solid var(--jb-line); padding: .55rem .1rem; }
ol.tracks .n, ol.tracks .d { font: 500 .75rem var(--jb-mono); color: var(--jb-muted); padding-top: .15rem; font-variant-numeric: tabular-nums; }
ol.tracks .t { min-width: 0; overflow-wrap: anywhere; }
ol.tracks li.on button, ol.tracks li.on .n { color: var(--jb-accent); }

/* The crate */
.shows { list-style: none; margin: 0; padding: 0; }
.show-row { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: baseline; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--jb-line); padding: .7rem .1rem; color: var(--jb-fg); text-decoration: none; }
a.show-row:hover { color: var(--jb-fg); }
.show-row .dt { font: 500 .8rem var(--jb-mono); color: var(--jb-alt); font-variant-numeric: tabular-nums; }
.show-row .vn { min-width: 0; overflow-wrap: anywhere; }
.show-row .vn small { display: block; color: var(--jb-muted); font-size: .75rem; }
.show-row .st { color: var(--jb-accent); }
.shows li.on .show-row .vn { color: var(--jb-accent); }
.msg { color: var(--jb-muted); padding: .9rem 0; }

/* Word cloud */
.word-cloud { list-style: none; padding: 1.25rem; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .35rem 1.1rem; background: var(--jb-panel); border: 1px solid var(--jb-line); border-radius: 1.1rem; }
.word-cloud a { font-family: var(--jb-display); line-height: 1.15; text-decoration: none; letter-spacing: -.01em; transition: color .15s; }
.word-cloud a.tone-0 { color: var(--jb-fg); }
.word-cloud a.tone-1 { color: var(--jb-alt); }
.word-cloud a.tone-2 { color: var(--jb-alt2); }
.word-cloud a:hover { color: var(--jb-accent); }

/* Bands A–Z */
.letters { display: flex; flex-wrap: wrap; gap: .35rem; }
.letters a { min-width: 2.4rem; text-align: center; padding: .35rem .55rem; border: 1px solid var(--jb-line); border-radius: .5rem; text-decoration: none; color: var(--jb-fg); font: 500 .85rem var(--jb-mono); }
.letters a.active, .letters a:hover { background: var(--jb-accent); color: var(--jb-accent-ink); border-color: var(--jb-accent); }
.band-list { columns: 16rem auto; column-gap: 2rem; list-style: none; padding: 0; }
.band-list li { break-inside: avoid; padding: .2rem 0; }

/* Accounts */
.auth-card { max-width: 440px; margin: 1rem auto; background: var(--jb-panel); border: 1px solid var(--jb-line); border-radius: 1.1rem; padding: 1.75rem; }
.fav-list { list-style: none; padding: 0; margin: 0; }
.fav-list li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--jb-line); flex-wrap: wrap; }
.min-w-0 { min-width: 0; }
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.theme-opt { display: flex; align-items: center; gap: .4rem; border: 1px solid var(--jb-line); border-radius: .6rem; padding: .5rem .7rem; cursor: pointer; }
.theme-opt input { margin: 0 .25rem 0 0; }
.danger-zone { border-color: color-mix(in srgb, #dc3545 45%, var(--jb-line)); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }