/* ============================================================
   BH/DJ. Brokehella skin over the groovebox
   Re-tints the app's own CSS variables to the penny palette:
   struck copper hardware, verdigris LCD glow.
   ============================================================ */

/* ------------------------------------------------------------
   THEME SCOPING. Read this before touching the selector below.

   This used to start with a bare `:root`. That is why the theme
   menu did nothing for anyone: `:root` and `[data-theme="neon"]`
   have identical specificity (0,1,0), this file loads AFTER the
   inline <style> in dj.html, and CSS breaks specificity ties by
   document order. So this block silently overrode every theme,
   every time. The attribute was being set correctly all along and
   had no effect on a single variable.

   The selector must therefore stay scoped. `:not([data-theme])`
   covers the moment before the theme script runs, so the page never
   flashes an unstyled grey. Do NOT reintroduce a bare `:root` here.
   ------------------------------------------------------------ */
html:not([data-theme]),
html[data-theme="copper"],
body[data-theme="copper"] {
  --bg-deep:     #060807;
  --bg-glow:     #14251F;
  --panel:       #121614;
  --panel-deep:  #0D100E;
  --panel-inset: #182420;
  --edge:        #2E4038;
  --text-main:   #F3E7D8;
  --text-dim:    #8A9790;
  --amber:       #E08A3C;
  --red:         #E05A5A;
  --green:       #3FE0B0;
  --lcd-bg:      #08150F;
  --lcd-text:    #3FE0B0;
  --btn-face-1:  #22302B;
  --btn-face-2:  #16201C;
  --knob-face-1: #2E4038;
  --knob-face-2: #101815;
  /* The two rim lights, as variables so a theme can retint them
     instead of being stuck with copper glow on a magenta palette. */
  --glow-warm:   rgba(255,122,26,.10);
  --glow-cool:   rgba(63,224,176,.07);
  /* Track colours. These are the biggest coloured area in the app, so
     if they do not move the theme does not read as changed no matter
     what the panels do. The sequencer reads these at runtime. */
  --track-kick:  #E0703C;
  --track-snare: #E0A83C;
  --track-hihat: #3FE0B0;
  --track-synth: #C07AE0;
  --track-bass:  #6FD08C;
}

/* The rim light from the coin, on the page itself */
body {
  background:
    radial-gradient(70% 50% at 50% 0%, var(--glow-warm), transparent 68%),
    radial-gradient(80% 60% at 50% 100%, var(--glow-cool), transparent 70%),
    var(--bg-deep) !important;
}

/* ---- return bar back into the site ---- */
/* Keyboard users land here first, the DJ app has a lot of controls to
   tab past, so give them a way straight to the studio. */
.bh-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--amber, #E08A3C);
  color: #14110a;
  padding: 10px 18px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  border-radius: 0 0 4px 0;
  text-decoration: none;
}
.bh-skip:focus { left: 0; }

#bhTopBar {
  position: sticky;
  top: 0;
  z-index: 7000;
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px clamp(12px, 3vw, 24px);
  background: color-mix(in srgb, var(--bg-deep) 90%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--amber) 18%, transparent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
#bhTopBar img {
  width: 26px; height: 26px; border-radius: 50%;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--amber) 60%, transparent));
}
#bhTopBar .bh-name {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--text-main);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
#bhTopBar .bh-name b { color: var(--amber); }
#bhTopBar nav { display: flex; gap: 3px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
#bhTopBar nav a {
  padding: 6px 11px;
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: all .2s;
  white-space: nowrap;
}
#bhTopBar nav a:hover { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 35%, transparent); }
#bhTopBar nav a.on { color: var(--amber); border-color: var(--amber); }

@media (max-width: 620px) {
  #bhTopBar nav a { padding: 5px 8px; font-size: 8.5px; letter-spacing: .1em; }
}

/* Touch targets in the studio's site bar. These live behind an id, so
   the shared rule in brand.css cannot reach them. The studio's own
   dense grids (steps, piano keys) stay dense on purpose: a piano roll
   with 44px cells is not a piano roll. Keyboard control and the bar
   pager are the accommodation there, not bigger cells. */
@media (pointer: coarse) {
  #bhTopBar nav a { min-height: 44px; display: inline-flex; align-items: center; }
  #bhTopBar .bh-name { min-height: 44px; display: inline-flex; align-items: center; }
}