/* ═══════════════════════════════════════════════════════════════════════
   theme_miami.css — the builder, pushed toward the sprite's palette.

   INSTALL (preview): paste inside a <style> block at the end of <head>.
   INSTALL (properly): fold the :root block into the existing one and
   replace the hardcoded #5dd6a2 occurrences with var(--acc). There are 26
   of them; that is the only reason this file needs a second section.

   ── WHAT ACTUALLY CHANGES ───────────────────────────────────────────────
   Three things, and only three, because the app's layout is already doing
   its job and this is a repaint rather than a redesign:

   1. The background goes from blue-black to PURPLE-black. That single move
      does most of the work — Hotline Miami's dark is never neutral, it is
      always a saturated shadow, and every neon on top of it gets louder
      for free.

   2. The accent goes from mint green to magenta. The green was the one
      colour fighting the sprite: #5dd6a2 against Buck's magenta rim light
      read as two different products sharing a screen.

   3. The lane colours get pushed to full saturation. They were already
      well chosen and well separated — this only takes them further out,
      because a grid of neon squares IS the aesthetic and there was
      headroom left in every one of them.

   ── WHAT IS DELIBERATELY NOT CHANGED ────────────────────────────────────
   Type, spacing, radii, the control row, the grid geometry. A repaint that
   also moves things is impossible to judge: you cannot tell whether you
   dislike the colour or the layout. And the ink stays a warm off-white
   rather than pure white so it sits with Buck's coat instead of glaring.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* The accent, as components too, so a rule that needs it at partial
     alpha can write rgba(var(--acc-rgb),.22) instead of hardcoding the
     colour a second time. The pages carry the old green as the var()
     fallback, so every one of them still renders correctly with this file
     deleted. */
  --acc-rgb:255,45,149;

  /* Near-black with a purple CAST, not a purple. The first pass was
     genuinely purple and it fought the grid: every lane colour had to
     shout over a mid-tone, and the neons lost the contrast that makes
     them neons. Dark enough now that the grid does the colouring. */
  --void:#0A0610;      /* was #08090d */
  --panel:#150E1D;     /* was #14161c */
  --edge:#2C1B3A;      /* was #242833 */
  --ink:#FCF4E4;       /* was #e8ebf0 — warm, to match the coat */
  --dim:#9A7BB0;       /* was #7b8290 */

  --k:#FF7A18;         /* kick  — was #ff8a3d */
  --s:#9BF52B;         /* snare — was #5dd6a2, the old accent green */
  --h:#2BF0F0;         /* hat   — was #7ec8ff */
  --c:#FFD028;         /* clap  — was #ffd166 */
  --b:#A24BFF;         /* bass  — was #b285ff */
  --l:#FF2D95;         /* lead  — was #ff6fae */

  --acc:#FF2D95;       /* new: the accent, so it stops being hardcoded */
  --acc-ink:#1A0620;   /* text on top of the accent */
}

/* ── the accent ────────────────────────────────────────────────────────
   #5dd6a2 appears 26 times in the source. Until those become var(--acc)
   these overrides carry it, which is why this section exists and why it
   should shrink to nothing once the variable lands. */
/* :not(.cell) is load-bearing and not tidiness. The grid cells are
   <button class="cell l2 on"> — the same "on" class the transport and the
   bar tabs use — so a bare button.on rule repainted every lit cell in the
   grid with the accent and threw away the entire lane colour scheme, which
   is the one thing in this app that must not change colour. */
button.on:not(.cell), .bt.sel, #playBtn.on,
#vexBox button.go, #shfBox button.go, #aexBox button.go{
  background:var(--acc)!important; border-color:var(--acc)!important;
  color:var(--acc-ink)!important;
}
/* The playhead stripe on a bar chip needs NO rule here any more, and that
   is worth recording rather than just deleting. There were three:

     .bt.playing          {box-shadow:inset 0 3px 0 var(--acc)!important;}
     .bt.playing.hasclip  {…!important;}
     .bt.playing.hascont  {…!important;}

   The first one alone was the original, and it was a bug. The app draws a
   SECOND channel in the same box-shadow when a bar carries a clip or a
   continuation, and a blanket !important on the short selector beats both
   long ones — so the clip indicator vanished from the bar strip. Nothing
   looked broken; a bar with footage on it simply stopped saying so.
   barnav_check.js caught it.

   patch_accent.py made all three unnecessary: the source now reads
   var(--acc,#5dd6a2) itself, so the theme recolours the stripe by naming
   the colour rather than by out-shouting the rule. */
#vexBox .bar i{ background:var(--acc)!important; }
a, .lnk{ color:var(--acc); }
.kit button.on, nav .on, .tabs .on{
  background:rgba(255,45,149,.16)!important; color:var(--acc)!important;
  border-color:var(--acc)!important;
}

/* The bar strip: only the bar you are EDITING takes the accent. "all" and
   the loop selection keep a quieter outline, or the strip becomes a row of
   four magenta blocks and stops telling you anything. */
#loopAll.sel{ background:transparent!important; color:var(--ink)!important;
              border-color:var(--acc)!important; }

/* ── type ──────────────────────────────────────────────────────────────
   Which role each element takes. The faces are in fonts.css, as --sans and
   --mono, and are named nowhere else (9aq). Form controls do not inherit a
   family from the page, which is why button, select and input are here.

   This section once named the faces itself: Chivo and Space Mono in place
   of Space Grotesk and IBM Plex Mono (9x). Only these selectors moved. The
   rest of the builder still asked for IBM Plex Mono, which no page loaded
   after the swap, so the bar strip, the BPM and the song controls painted
   in the device's own monospace face. 9aq pointed every rule at the
   variables instead.
*/
body, button, select, input, .card, .panel{
  font-family:var(--sans,system-ui,sans-serif);
}
#kitName, #kitMeta, .chip, .sampname, .knob b, .t, code, kbd,
[class*="mono"]{
  font-family:var(--mono,monospace);
}

/* ── the grid ──────────────────────────────────────────────────────────
   Hard edges and a flat fill. The soft glow was doing a 2018 dashboard
   thing; this aesthetic wants the square to be a square. */
.cell{ border-radius:2px!important; }
.cell.on{ filter:saturate(1.25) brightness(1.06); }

/* ── panels ───────────────────────────────────────────────────────────── */
.panel, .card, select, input[type=text]{
  background:var(--panel); border-color:var(--edge);
}
/* ── THE BUILDER'S GRID PANEL IS A WINDOW (9av) ──
   The line above made it solid #150E1D, so the panel that sits over the
   bottom of the picture — exactly where the floor and most footage live —
   hid it completely while you built. Now it is the same hue at 34%, with
   a 2px blur: enough to keep the cells and labels off a busy frame, not
   enough to turn the picture into a smear. The floor under it is the grid
   you are editing (9av), so seeing it is the point. The cells keep their
   own fill, and the labels already carry a shadow. */
.ui > .panel{
  background:rgba(21,14,29,.34);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
/* What the opaque panel used to do for the small grey labels, a shadow
   does now: measured on a phone, BAR and PHRASE vanished into the sun. */
.ui > .panel .blabel, .ui > .panel .lbl, .ui > .panel .samplab,
.ui > .panel .songdur, .ui > .panel .hint, .ui > .panel .livehint{
  text-shadow:0 1px 2px #000, 0 0 6px rgba(0,0,0,.95);
}

/* ── scanlines ─────────────────────────────────────────────────────────
   One pixel on, two off. pointer-events:none matters: without it this eats
   every tap on the page, which is the one way a decorative overlay can
   break an app. Skipped entirely for anyone who has asked for less motion.

   AT .22, NOT .38. The first pass matched the home screen's .38, and the
   home screen can afford it — its text is a headline and two lines of
   lede over a picture. The builder's is a dense instrument with 11px
   labels and an eight-row grid, and a repeating dark line across small
   type costs legibility for a texture nobody is looking at while they
   work. */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom, rgba(0,0,0,.30) 0 1px, rgba(0,0,0,0) 1px 3px);
  opacity:.22;
}
@media (prefers-reduced-motion:reduce){ body::after{ display:none; } }

/* ── NO VIGNETTE HERE, AND THAT IS THE POINT ───────────────────────────
   There was one: a fixed radial gradient reaching rgba(4,1,8,.62) at the
   frame edge, to pull the eye toward the grid. It looked right in a
   preview and was wrong in the app, for a reason a preview cannot show —
   the app SCROLLS under a fixed overlay. The tips paragraphs sit at the
   bottom of the viewport and were being read through a 62% black wash;
   side by side against the old theme they were visibly harder to read,
   which is the one thing a repaint is not allowed to do.

   index.html keeps its vignette, in its own stylesheet, because there the
   content is centred and the darkened edge only ever falls on sky. */