/* Beatomat — Graphite, and its light pair Porcelain.
   One object under two lighting conditions: data-room="off" is Graphite, the
   room at 11pm; data-room="on" is Porcelain, the same room with the lights on.
   Nothing moves between them; only the tokens flip. The values are the ones on
   the design canvas (docs/design/graphite, lights.mjs holds the light map).

   Type: Archivo, wide for the machine's voice (wordmark, headings) and normal
   width for reading; JetBrains Mono, small and uppercase, for the labels the
   machine prints on itself. Pills for buttons and chips, 10–16px for cards. */

:root, :root[data-room="off"] {
  color-scheme: dark;
  --page: #1a1c1b;
  --raised: #212423;
  --surface: #262928;
  --line: #2c302e;
  --line-2: #363a38;
  --line-3: #3c413e;
  --outline: #505653;
  --chip-off: #3a403d;
  --track: #3f4744;
  --ink: #f2f4f3;
  --ink-2: #c6cec9;
  --ink-3: #a9b2ad;
  --ink-4: #8e9792;
  --accent: #5fbfa9;
  --on-accent: #0a1512;
  --accent-text: #7fd1bd;
  --accent-rgb: 127, 209, 189;
  --fits-bg: #2f4a42;
  --live: #14b892;
  --cover-ring: #19b78c;
  --avatar: #0f7d6c;
  --warn: #e0b354;
  --warn-bg: #2e2a20;
  --warn-line: #6b5a2e;
  --clash: #e0a46a;
  --danger: #f08a97;
  --scrim: rgba(11, 13, 12, .72);
  --shadow: 0 16px 40px rgba(0, 0, 0, .5);
  /* The shadow a printed sleeve throws on the page, and the record behind it. */
  --sleeve-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 40px rgba(0, 0, 0, .45);
  --vinyl: #0c0d0d;
}

:root[data-room="on"] {
  color-scheme: light;
  --page: #f3f4f1;
  --raised: #eaece7;
  --surface: #ffffff;
  --line: #dfe2dc;
  --line-2: #d3d7d0;
  --line-3: #c9cec6;
  --outline: #aeb4ac;
  --chip-off: #dde1db;
  --track: #d0d5ce;
  --ink: #161816;
  --ink-2: #3c433d;
  --ink-3: #5f675e;
  --ink-4: #6b726a;
  --accent: #0b5c50;
  --on-accent: #ffffff;
  --accent-text: #0b5c50;
  --accent-rgb: 11, 92, 80;
  --fits-bg: #d6ebe4;
  --warn: #8a5d00;
  --warn-bg: #fbf3df;
  --warn-line: #e6cf94;
  --clash: #9a5a12;
  --danger: #a8283c;
  --scrim: rgba(255, 255, 255, .88);
  --shadow: 0 16px 40px rgba(22, 24, 22, .16);
  --sleeve-shadow: 0 18px 36px rgba(22, 24, 22, .16);
  --vinyl: #0c0d0d;
}

* { box-sizing: border-box; }

/* Every applier in the shell hides things with the `hidden` attribute, and any
   component rule that sets `display` silently overrides it — which is how two
   idle decks both claimed to be ON AIR. This makes `hidden` mean hidden. */
[hidden] { display: none !important; }

h1, h2, h3, p, ul, ol { margin: 0; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--ink);
  font-family: Archivo, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* The machine's voice: wide. Headings, set names, the wordmark. */
.wide {
  font-variation-settings: 'wdth' 112;
  letter-spacing: -.01em;
}

/* The machine's labels: mono, small, uppercase, letterspaced. */
.silk {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
}

.num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* Read by a screen reader, never drawn. */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
svg.line { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* One width for every page, and one gutter that tightens with the screen. */
.wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 40px);
  padding-right: clamp(16px, 4vw, 40px);
}

/* Buttons. Pills, three weights: the accent fill, an outline, and a link. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 22px; border-radius: 999px;
  font-weight: 600; font-size: 15px; line-height: 1.2; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
}
.btn.solid { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.btn.solid:hover { filter: brightness(1.06); }
.btn.ghost { border-color: var(--outline); color: var(--ink); }
.btn.ghost:hover { border-color: var(--ink-3); }
.btn.sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.linkto { color: var(--accent-text); font-weight: 600; font-size: 15px; padding: 10px 0; }
.linkto:hover { text-decoration: underline; text-underline-offset: 3px; }

/* A dot that says "on air" or "the DJ is running this". */
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--live); flex: none; }

.gauge { display: block; height: 3px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.gauge i { display: block; height: 100%; background: var(--live); border-radius: 2px; }

/* ─────────────────────────── the shell ─────────────────────────── */

.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.centre { flex: 1 0 auto; padding-bottom: 40px; }
#viewHome, #viewPlans, #viewAccount, #viewDeck, #viewMixes, #viewPage, #viewSearch {
  max-width: 1320px; margin: 0 auto; width: 100%;
  padding-left: clamp(16px, 4vw, 40px); padding-right: clamp(16px, 4vw, 40px);
}
/* While the bar is up the page keeps clear of it, so the last row is never
   underneath a player. */
body.has-bar .app { padding-bottom: 76px; }

/* The wordmark. The O is the brand first and the lamp second: it always wears
   the green; the fill (and the glow) says whether anything is on air. */
.mark {
  display: inline-flex; align-items: center; gap: 1px;
  font-variation-settings: 'wdth' 118; font-weight: 700; font-size: 22px;
  letter-spacing: -.01em; color: var(--ink); padding: 6px 0; white-space: nowrap;
}
.mark .ring {
  display: inline-block; width: 15px; height: 15px; margin: 0 2px;
  border: 2.5px solid var(--live); border-radius: 50%;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.mark.onair .ring { background: var(--live); box-shadow: 0 0 0 3px rgba(20, 184, 146, .22); }

/* ─────────────────────────── header ─────────────────────────── */

.hdr { border-bottom: 1px solid var(--line); background: var(--page); position: relative; z-index: 6; }
.hdr-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 14px; padding-bottom: 14px; }
.hsearch {
  flex: 1 1 220px; min-width: 0; max-width: 340px; display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px;
  padding: 0 16px; height: 44px; cursor: text;
}
.hsearch svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; stroke-width: 1.8; }
.hsearch input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--ink); font: inherit; font-size: 14px;
}
.hsearch input::placeholder { color: var(--ink-3); }
.hsearch:focus-within { border-color: var(--outline); }
.hdr-right { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; position: relative; }
.hnav { display: flex; flex-wrap: wrap; gap: 4px; font-size: 15px; font-weight: 500; }
.hnav a { padding: 12px 10px; color: var(--ink-2); }
.hnav a:hover { color: var(--ink); }
.hnav a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent-text); }
.hdr-room { display: inline-flex; }
body.view-deck .hdr-room { display: none; }
.hsearch-open { display: none; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; color: var(--ink); }
.hsearch-open svg { width: 18px; height: 18px; stroke-width: 1.8; }
.acctslot { display: flex; align-items: center; gap: 4px; position: relative; }
.hlink { padding: 12px 14px; font-size: 14px; color: var(--ink); white-space: nowrap; }
.avatar-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.avatar-btn.pending { cursor: default; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--avatar); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}
.menu {
  position: absolute; right: 0; top: 54px; z-index: 8; width: 260px;
  background: var(--surface); border: 1px solid var(--line-3); border-radius: 8px;
  padding: 8px; display: flex; flex-direction: column; box-shadow: var(--shadow);
}
.menu-who { padding: 10px 12px 14px; border-bottom: 1px solid var(--line-2); margin-bottom: 6px; display: flex; flex-direction: column; gap: 2px; }
.menu-name { font-weight: 600; }
.menu-plan { font-size: 13px; color: var(--ink-3); }
.menu-left { margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.menu-who .gauge { margin-top: 6px; }
.menu a, .menu button { padding: 11px 12px; border-radius: 4px; font-size: 14px; text-align: left; color: var(--ink-2); }
.menu a:hover, .menu button:hover { background: var(--raised); color: var(--ink); }
.menu .accent { color: var(--accent-text); }
.menu .menu-out { border-top: 1px solid var(--line-2); margin-top: 6px; border-radius: 0 0 4px 4px; }

/* ─────────────────────────── footer ─────────────────────────── */

.foot { border-top: 1px solid var(--line); }
.foot-in { display: flex; flex-wrap: wrap; gap: 36px 56px; padding-top: 44px; padding-bottom: 36px; }
.foot-brand { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.foot-brand .mark { font-size: 20px; padding: 0; }
.foot-brand .mark .ring { width: 14px; height: 14px; background: transparent; box-shadow: none; }
.foot-brand p { font-size: 14px; color: var(--ink-3); line-height: 1.6; }
.foot-col { display: flex; flex-direction: column; gap: 2px; }
.foot-col .silk { color: var(--ink-4); padding-bottom: 6px; letter-spacing: .14em; }
.foot-col a { padding: 7px 0; font-size: 15px; color: var(--ink-2); }
.foot-col a:hover { color: var(--ink); }
.foot-col .foot-btn { padding: 7px 0; font-size: 15px; color: var(--ink-2); text-align: left; background: none; border: 0; cursor: pointer; font: inherit; }
.foot-col .foot-btn:hover { color: var(--ink); }

/* The returning-visitor question (shell/consent.js). In the page's flow, at the
   top: it pushes the page down a line rather than covering any of it, so it can
   never sit over a button, a deck or the player bar. Two buttons of the same
   weight, on purpose. */
/* Whether #consentSlot shows at all is decided in <head> (CONSENT_STYLE and
   CONSENT_BOOT in shell/consent.js), before this sheet applies. */
.consent { background: var(--raised); border-bottom: 1px solid var(--line); }
.consent-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding-top: 12px; padding-bottom: 12px; }
.consent-text { flex: 1 1 420px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.consent-text a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.consent-said { color: var(--ink); font-weight: 600; }
.consent-acts { display: flex; gap: 10px; flex: none; }
.consent-btn { min-width: 104px; }
.consent-short { display: none; }
/* The consent line on a phone (research 09 #9, then 11 #3: the strip at the top was
   still 22% of the first screen). One line at the bottom, "Count my visits?
   [Accept] [Decline] Privacy", laid over the page but standing on whatever is at
   the bottom — the tab bar, the player bar, the AI DJ's dock — so it never covers a
   control. The page gets the line's height as room at its end. */
@media (max-width: 767px) {
  .consent-long { display: none; }
  .consent-short { display: inline; }
  #consentSlot { position: fixed; left: 0; right: 0; z-index: 8; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 3px); }
  body.has-bar #consentSlot { bottom: calc(var(--tabbar-h) + 64px + 4px + env(safe-area-inset-bottom)); }
  body:has(#viewDeck:not([hidden]) #aiDock:not([hidden])) #consentSlot { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 70px); }
  .consent { border-bottom: 0; border-top: 1px solid var(--line-2); box-shadow: 0 -6px 18px rgba(0, 0, 0, .18); }
  .consent-in { flex-wrap: nowrap; gap: 6px; padding-top: 6px; padding-bottom: 6px; }
  /* Its words, the buttons, then Privacy: the paragraph's pieces are laid out in the line. */
  .consent-text { display: contents; font-size: 13px; line-height: 1.3; }
  .consent-said, .consent-short { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.3; color: var(--ink-2); }
  .consent-said { color: var(--ink); }
  .consent-text a { order: 3; flex: none; font-size: 13px; padding: 8px 2px; }
  .consent-acts { order: 2; gap: 6px; }
  .consent-acts .consent-btn { min-width: 76px; padding-left: 10px; padding-right: 10px; }
  html.ask-consent .app { padding-bottom: calc(64px + 52px + env(safe-area-inset-bottom)); }
  html.ask-consent body.has-bar .app { padding-bottom: calc(64px + 64px + 52px + env(safe-area-inset-bottom)); }
}
.foot-base { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.foot-base .silk { font-size: 12px; color: var(--ink-4); letter-spacing: .08em; }
.view-deck .foot { display: none; }

/* ─────────────────────────── room lights ─────────────────────────── */

.roomsw {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); flex: none;
}
.roomsw:hover { color: var(--ink); border-color: var(--outline); }
.roomsw svg { width: 18px; height: 18px; }
.roomsw .sun { display: none; }
:root[data-room="on"] .roomsw .sun { display: block; }
:root[data-room="on"] .roomsw .moon { display: none; }
.roomsw.labelled { width: auto; padding: 0 16px 0 12px; gap: 8px; border-radius: 999px; height: 40px; font-size: 13px; }

/* ─────────────────────────── player bar ───────────────────────────
   76px at every width, so the page above never jumps. What leaves as space
   runs out: the volume slider (<1200), the bar count (<1100), Mix now and the
   time readout (<900, progress becomes the line along the top). */

.pbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; height: 76px;
  background: var(--raised); border-top: 1px solid var(--line-2);
}
.pb-line { position: absolute; left: 0; right: 0; top: -1px; height: 2px; display: none; }
.pb-line i { display: block; height: 2px; width: 0; background: var(--accent-text); }
.pb-in {
  max-width: 1440px; height: 100%; margin: 0 auto; padding: 0 clamp(12px, 2vw, 24px);
  display: flex; align-items: center; gap: clamp(12px, 2vw, 24px);
}
.pb-np { flex: 1 1 280px; max-width: 360px; min-width: 0; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.pb-art {
  flex: none; width: 48px; height: 48px; border-radius: 8px;
  background: var(--surface) center / cover no-repeat;
}
.pb-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pb-t { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.pb-sub1 { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.pb-sub2 { display: none; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .08em; color: var(--accent-text); white-space: nowrap; overflow: hidden; }
.pb-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pb-ctrl { display: flex; align-items: center; gap: 8px; }
.pb-play, .pb-skip, .pb-next { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.pb-play { background: var(--ink); color: var(--page); }
.pb-play svg { width: 14px; height: 14px; fill: currentColor; }
.pb-skip, .pb-next { color: var(--ink); }
.pb-skip svg, .pb-next svg { width: 16px; height: 16px; fill: currentColor; }
.pb-next.mixing { color: var(--accent-text); }
.pb-mix {
  margin-left: 4px; height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--outline); font-size: 13px; font-weight: 600;
}
.pb-mix:hover { border-color: var(--ink-3); }
.pb-time { width: 100%; max-width: 560px; display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--ink-3); }
.pb-track { position: relative; flex: 1; height: 4px; background: var(--line-2); border-radius: 2px; }
.pb-track i { position: absolute; left: 0; top: 0; height: 4px; width: 0; background: var(--accent-text); border-radius: 2px; }
.pb-track b { position: absolute; top: -3px; height: 10px; border-radius: 3px; background: rgba(var(--accent-rgb), .25); }
.pb-right { flex: 1 1 280px; max-width: 360px; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.pb-dj { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .08em; color: var(--accent-text); white-space: nowrap; }
.pb-dj:not(.on) { color: var(--ink-3); }
.pb-dj:not(.on) .dot { background: var(--ink-3); }
.pb-vol { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); }
.pb-vol svg { width: 18px; height: 18px; flex: none; }
.pb-vol input {
  -webkit-appearance: none; appearance: none; width: 80px; height: 4px; border-radius: 2px;
  background: linear-gradient(var(--ink-2), var(--ink-2)) 0 / var(--vol, 100%) 100% no-repeat, var(--line-2);
  cursor: pointer;
}
.pb-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 0; }
.pb-vol input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 0; }
.pb-volicon { display: none; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; color: var(--ink-3); }
.pb-volicon svg { width: 18px; height: 18px; }
.pb-volicon[aria-pressed="true"] { color: var(--danger); }
.pb-open {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--outline);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink);
}
.pb-open svg { width: 14px; height: 14px; stroke-width: 1.8; }

@media (max-width: 1199px) {
  .pb-vol { display: none; }
  .pb-volicon { display: inline-flex; }
}
@media (max-width: 1099px) { .pb-bars { display: none; } }
@media (max-width: 899px) {
  .pb-mix, .pb-time, .pb-dj { display: none; }
  .pb-line { display: block; }
  .pb-sub1 { display: none; }
  .pb-sub2 { display: inline-flex; }
  .pb-mid { flex: none; }
  .pb-np { max-width: none; }
  .pb-right { flex: none; }
}

/* ─────────────────────────── the phone ───────────────────────────
   The three product links move to a tab bar along the bottom; the header keeps
   the wordmark, Plans, a search icon and the avatar. The bar becomes a
   mini-player sitting on the tab bar. */

.tabbar { display: none; }

@media (max-width: 767px) {
  .hdr-in { flex-wrap: nowrap; gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .hsearch { display: none; }
  .hdr.searching .hsearch { display: flex; position: absolute; left: 12px; right: 12px; top: 8px; max-width: none; z-index: 9; }
  .hsearch-open { display: inline-flex; }
  .hdr-right { gap: 0; flex-wrap: nowrap; }
  .hnav a:not([data-place="plans"]) { display: none; }
  .hnav a { padding: 12px 8px; }
  .acctslot .btn { display: none; }
  .hlink { padding: 12px 8px; }

  :root { --tabbar-h: 60px; }
  /* The AI DJ's dock: Play/Pause and Next above the tab bar, with the countdown. */
  .aidock {
    position: fixed; left: 8px; right: 8px; z-index: 8;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 6px);
    align-items: center; gap: 12px; padding: 8px 12px; border-radius: 16px;
    background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  }
  .aidock:not([hidden]) { display: flex; }
  .aidock .roomplay { width: 56px; height: 56px; }
  .aidock .nextbtn { width: 48px; height: 48px; }
  /* The countdown, and under it the reason line (research 11 #2): one line each,
     cut with "…", so the pitch ("Keys match, so the mix runs 16 bars…") is on the
     first screen instead of below it. */
  .dock-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .dock-line { min-width: 0; font-size: 13px; line-height: 1.35; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dock-why { min-width: 0; font-size: 12px; line-height: 1.35; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* While the dock shows, the bottom of a phone is the bar and the tab bar together:
     170 px of 640 (26%) before. The tab bar folds to its icons and the dock tightens,
     so the two take ~100 px (16%); ❚❚ 48 px and ⏭ 44 px stay thumb targets. */
  body:has(#viewDeck:not([hidden]) #aiDock:not([hidden])) { --tabbar-h: 34px; }
  body:has(#viewDeck:not([hidden]) #aiDock:not([hidden])) .tabbar { padding-top: 2px; padding-bottom: calc(2px + env(safe-area-inset-bottom)); }
  body:has(#viewDeck:not([hidden]) #aiDock:not([hidden])) .tabbar a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body:has(#viewDeck:not([hidden]) #aiDock:not([hidden])) .aidock { padding: 6px 10px; gap: 10px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 3px); }
  body:has(#viewDeck:not([hidden]) #aiDock:not([hidden])) .aidock .roomplay { width: 48px; height: 48px; }
  body:has(#viewDeck:not([hidden]) #aiDock:not([hidden])) .aidock .nextbtn { width: 44px; height: 44px; }
  /* Room under the last row of Coming up, so the dock never covers it. */
  #viewDeck.docked { padding-bottom: 92px; }
  /* The centre panel's pair is in the dock on a phone. */
  #viewDeck:not(.manual) .cp-go, #viewDeck:not(.manual) .cp-next { display: none; }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 8;
    background: var(--raised); border-top: 1px solid var(--line-2);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 4px 0; font-size: 11px; color: var(--ink-3);
  }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a.on { color: var(--ink); font-weight: 600; }
  .app { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.has-bar .app { padding-bottom: calc(64px + 64px + env(safe-area-inset-bottom)); }

  .pbar {
    bottom: calc(60px + env(safe-area-inset-bottom)); height: 64px;
    left: 8px; right: 8px; border: 1px solid var(--line-2); border-radius: 12px;
    background: var(--surface); overflow: hidden;
  }
  .pb-line { top: auto; bottom: 0; }
  .pb-in { padding: 0 8px 0 10px; gap: 8px; }
  .pb-art { width: 40px; height: 40px; }
  .pb-txt { flex-direction: column-reverse; }
  .pb-t { font-size: 14px; }
  .pb-skip, .pb-volicon, .pb-open { display: none; }
  .pb-play { width: 40px; height: 40px; background: transparent; color: var(--ink); }
  .pb-play svg { width: 16px; height: 16px; }
}

/* ─────────────────────────── the deck ───────────────────────────
   Boards 10–12, 16–17. One column of panels, 16px apart: the toolbar, the set
   strip, the decks row (card · centre · card), and the lower row. */

/* The toolbar (board 10): the switch, the set, and the tools on the right. */
.decktools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
/* The room's pause on the deck screen: round, the size of a thumb, filled while on air. */
.roomplay {
  flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--outline);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink);
}
.roomplay svg { width: 18px; height: 18px; fill: currentColor; }
.roomplay .i-pause, .roomplay.running .i-play { display: none; }
.roomplay.running .i-pause { display: block; }
.roomplay.running { background: var(--accent-text); color: var(--on-accent); border-color: transparent; }
.roomplay:disabled { opacity: .4; cursor: default; }
/* Decks: the room's pause lives in the mixer, in the middle; the toolbar's steps aside.
   On a phone the decks stack (A, B, then the mixer), so "the middle" is two and a half
   screens down; there the toolbar keeps its pause as well, on the first screen. */
@media (min-width: 761px) {
  #viewDeck.manual .decktools .roomplay { display: none; }
}
.cp-room { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.roomplay.big { width: 64px; height: 64px; }
.roomplay.big svg { width: 24px; height: 24px; }
.cp-room-l { font-size: 9px; letter-spacing: .14em; color: var(--ink-3); }
.modesw {
  display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-2);
}
.modesw button {
  min-height: 40px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 500;
  color: var(--ink-2); white-space: nowrap;
}
.modesw button:hover { color: var(--ink); }
.modesw button[aria-pressed="true"] { background: var(--accent-text); color: var(--on-accent); font-weight: 700; }
.setinfo { display: inline-flex; flex-wrap: wrap; align-items: center; min-width: 0; }
.tools-r { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.allow { display: inline-flex; flex-direction: column; }

#viewDeck { max-width: 1440px; padding-left: clamp(16px, 3vw, 32px); padding-right: clamp(16px, 3vw, 32px); }
#viewDeck > * + * { margin-top: 16px; }
#viewDeck > .decktools + .keeprow, #viewDeck > [hidden] + * { margin-top: 16px; }
.decktools { padding: 16px 0 0; }
.allow { align-items: flex-end; font-size: 13px; color: var(--ink-2); padding-right: 0; gap: 5px; }
.allow .gauge { width: 150px; min-width: 0; }
/* Calm on purpose (2026-11-06): the counter is information, not an alarm. */
.setinfo { font-size: 14px; color: var(--ink-3); gap: 4px 8px; }
.setinfo .setname { color: var(--ink-2); font-weight: 500; }
.setinfo .setclock:not(:empty)::before, .setinfo .setmeta:not(:empty)::before { content: '· '; }
.setinfo .setmeta:empty, .setinfo .setclock:empty { display: none; }
.pillbtn { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-3); font-size: 13px; color: var(--ink-2); }
.pillbtn:hover { color: var(--ink); border-color: var(--outline); }
.pillbtn[aria-pressed="true"] { background: var(--fits-bg); border-color: transparent; color: var(--accent-text); }
.decktools .newset { min-height: 44px; padding: 0 18px 0 14px; font-size: 14px; }
.decktools .newset svg { width: 14px; height: 14px; stroke-width: 2; }
.deckvol { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); }
.deckvol svg { width: 18px; height: 18px; }
.deckvol input {
  -webkit-appearance: none; appearance: none; width: 80px; height: 4px; border-radius: 2px; cursor: pointer;
  background: linear-gradient(var(--ink-2), var(--ink-2)) 0 / var(--vol, 100%) 100% no-repeat, var(--line-2);
}
.deckvol input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.deckvol input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 0; }
.keeprow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.keeprow input { height: 40px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); padding: 0 16px; font: inherit; font-size: 14px; min-width: 240px; }
.keeprow .note { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--ink-3); }

/* The cold deck is one panel. */
#viewDeck.cold .setstrip, #viewDeck.cold .decks, #viewDeck.cold .creditline,
#viewDeck.cold .setinfo, #viewDeck.cold #quotaLow, #viewDeck.cold .doing { display: none !important; }

/* Banners: the five-minutes warning. */
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 18px; border-radius: 14px; }
.banner.warn { background: var(--warn-bg); border: 1px solid var(--warn-line); }
/* Information, not a warning: what just changed, said once (handover-note.js). */
.banner.info { background: var(--raised); border: 1px solid var(--accent-text); margin-bottom: 16px; }
.banner.info .banner-text { flex: 1 1 240px; font-size: 14px; line-height: 1.5; }
.banner.info[hidden] { display: none; }
.banner-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--warn); }
.banner-text { flex: 1 1 360px; font-size: 15px; line-height: 1.5; }
.banner-text strong { font-weight: 700; }
.banner-text span { color: var(--ink-2); }
.banner-x { flex: none; width: 36px; height: 36px; border-radius: 50%; color: var(--ink-3); font-size: 18px; }

/* The set so far. */
.setstrip { background: var(--raised); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px 12px; display: flex; flex-direction: column; gap: 8px; }
.setstrip .timeline { position: relative; height: 62px; margin: 0; background: none; border-radius: 0; overflow: visible; }
.timeline .lanes { position: absolute; inset: 0; }
.timeline .blk {
  position: absolute; height: 26px; border-radius: 5px; background: var(--line-2);
  font-size: 11px; line-height: 26px; padding: 0 8px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.timeline .blk.a { top: 0; }
.timeline .blk.b { top: 34px; }
.timeline .blk.played { background: var(--line); color: var(--ink-4); }
.timeline .blk.live { background: var(--track); box-shadow: inset 0 0 0 1px var(--outline); color: var(--ink-2); }
.timeline .blk.cued { background: var(--fits-bg); color: var(--accent-text); }
.timeline .blk.queued { background: transparent; border: 1px dashed var(--outline); color: var(--ink-3); }
.timeline .blk.later { background: var(--line-2); }
/* The first record after a library mix's last one, and the mark between them. */
.timeline .blk.after { background: transparent; border: 1px dashed var(--outline); color: var(--ink-3); }
.timeline .mixend { position: absolute; top: -6px; height: 74px; width: 0; border-left: 2px dashed var(--accent-text); margin-left: -1px; }
.timeline .mixend b { position: absolute; bottom: 100%; right: 4px; font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: .08em; color: var(--accent-text); white-space: nowrap; }
.timeline .played { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(var(--accent-rgb), .06); border-radius: 5px; }
.timeline .mixwin { position: absolute; top: -4px; height: 70px; border: 1px solid var(--accent-text); background: rgba(var(--accent-rgb), .1); border-radius: 6px; }
.timeline .mixwin.on { background: rgba(var(--accent-rgb), .24); }
.timeline .head { position: absolute; top: -6px; width: 2px; height: 74px; background: var(--ink); margin-left: -1px; }
.tl-labels { display: flex; justify-content: space-between; gap: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; }
.tl-labels .seam { color: var(--accent-text); }

/* The decks row: card · centre · card, wrapping on narrower screens. */
.decks { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.dk {
  flex: 1 1 360px; min-width: 0; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 14px;
}
.dk-head { display: flex; gap: 14px; align-items: center; }
.dk-cover {
  position: relative; flex: none; width: 72px; height: 72px; border-radius: 10px;
  background: var(--raised) center / cover no-repeat;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* The O on a record with no picture, beating with it (pulse.js). */
.dk-cover::after {
  content: ''; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--cover-ring);
  background: color-mix(in srgb, var(--live) calc(var(--pulse-fill, 0) * 100%), transparent);
  transform: scale(var(--pulse, 1)); opacity: .92;
}
.dk-cover[data-cover="own"]::after { display: none; }
.dk-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dk-state { font-size: 11px; letter-spacing: .14em; color: var(--ink-3); }
.dk-state.on { color: var(--accent-text); }
.dk-title { font-weight: 700; font-size: 17px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-artist { font-size: 14px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-chips { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.chipn { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--page); color: var(--ink-2); white-space: nowrap; }
.chipn.fits { background: var(--fits-bg); color: var(--accent-text); }
.dk-video { position: relative; height: 0; overflow: hidden; border-radius: 10px; }
.dk-video.open { height: auto; aspect-ratio: 16 / 9; background: #000; }
.dk-video > div, .dk-video > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dk-wave { position: relative; height: 64px; border-radius: 6px; }
.dk-video.open + .dk-wave { height: 10px; }
.dk-wave .wave { position: absolute; inset: 0; width: 100%; height: 100%; display: block; --wave-played: var(--accent-text); --wave-rest: #4f5653; }
:root[data-room="on"] .dk-wave .wave { --wave-rest: #b9bfb7; }
.dk-wave .prog {
  position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px;
  background: var(--line-2); border-radius: 2px; overflow: hidden;
}
.dk-wave .prog i { display: block; height: 100%; width: 0; background: var(--accent-text); }
.dk-wave .wave:not([hidden]) ~ .prog { display: none; }
.dk-win { position: absolute; top: 0; bottom: 0; background: rgba(var(--accent-rgb), .12); border-left: 1px solid var(--accent-text); border-right: 1px solid var(--accent-text); }
/* The mix running: the part the playhead has crossed fills in, so a fade in
   progress never reads as one about to begin. */
.dk-win.on { background: linear-gradient(90deg, rgba(var(--accent-rgb), .38) var(--done, 0%), rgba(var(--accent-rgb), .16) var(--done, 0%)); }
.dk-playhead { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink); left: 0; }
.dk:not(.onair) .dk-playhead { opacity: .7; }
.dk-times { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); }

/* The record's map under the waveform (recordmap.js): what the mix plans from. */
.dk-map { margin-top: 12px; }
.dk-map[hidden] { display: none; }
.map-strip { position: relative; height: 8px; border-radius: 4px; background: var(--line-2); }
.map-seg { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.map-seg.intro, .map-seg.outro { background: var(--line-3); }
.map-seg.voice { background: rgba(var(--accent-rgb), .5); }
.map-seg.peak { background: var(--warn); opacity: .55; }
.map-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink-3); }
/* A flat map's section starts: inside the bar, faint, no label. */
.map-tick.section { top: 0; bottom: 0; width: 1px; margin-left: -.5px; border-radius: 0; background: var(--ink-3); opacity: .45; }
.map-tick.mix { top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; background: var(--accent-text); }
.map-labels { position: relative; height: 14px; margin-top: 7px; }
.map-label {
  position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .04em; color: var(--ink-3);
}
.map-label.mix { color: var(--accent-text); font-weight: 600; }
.map-labels.two { height: 31px; }
.map-label.row2 { top: 16px; }
.dk-facts { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.dk-facts:empty { display: none; }
.dk-facts .fact { white-space: nowrap; }
.dk-facts a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.dk-facts .map-key { display: inline-block; width: 10px; height: 6px; border-radius: 3px; margin: 0 4px 1px 0; vertical-align: middle; }
.dk-facts .map-key.voice { background: rgba(var(--accent-rgb), .5); }
.dk-facts .map-key.peak { background: var(--warn); opacity: .55; }

/* A deck's own controls (Decks). */
.dk-ctl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; border-top: 1px solid var(--line-2); padding-top: 14px; }
.dk-ctl[hidden] { display: none; }
.dk-ctl-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* The pitch fader: a column on the deck's right edge, where a CDJ keeps it. It rests
   in the MIDDLE, the one centred handle on the panel that is a truth rather than a
   default. */
.dk-pitch { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 52px; }
.dk-pitch > .silk { font-size: 10px; letter-spacing: .14em; }
.pitchtrack {
  position: relative; flex: 1; min-height: 150px; width: 26px; border-radius: 13px;
  background: var(--page); border: 1px solid var(--line-2);
  touch-action: none; cursor: ns-resize; display: block;
}
.pitchtrack::before {
  content: ''; position: absolute; left: 4px; right: 4px; top: 50%; height: 1px;
  background: var(--outline);
}
.pitchtrack b {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 14px; border-radius: 4px;
  background: var(--ink); transform: translate(-50%, -50%);
}
.pitchtrack.dead { opacity: .4; cursor: default; }
.pitchtrack:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.pitchval { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.pitchval.hot { color: var(--accent-text); font-weight: 600; }
.dk-tr { display: flex; gap: 8px; }
.dk-tr button {
  height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--outline);
  font-weight: 600; color: var(--ink);
}
.dk-tr button:disabled { opacity: .45; cursor: default; }
.dk-tr .dk-play { width: 52px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.dk-tr .dk-play svg { width: 16px; height: 16px; fill: currentColor; }
.dk-play .i-pause, .dk-play.running .i-play { display: none; }
.dk-play.running .i-pause { display: block; }
.dk-play.running { background: var(--accent-text); color: var(--on-accent); border-color: transparent; }
.dk-grp { display: flex; flex-direction: column; gap: 6px; }
.dk-grp > .silk { font-size: 10px; letter-spacing: .14em; }
.pads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pads button { height: 40px; border-radius: 8px; border: 1px dashed var(--outline); }
.pads button[aria-pressed="true"] { border: 0; }
.loops { display: flex; gap: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.loops button { flex: 1; min-width: 0; height: 36px; border-radius: 8px; border: 1px solid var(--line-3); color: var(--ink-2); font: inherit; }
.loops button[aria-pressed="true"] { background: var(--accent-text); color: var(--on-accent); border-color: transparent; }
.loops button:disabled, .fxrow button:disabled { opacity: .4; cursor: default; }
.jumps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.jumps button { height: 36px; border-radius: 8px; border: 1px solid var(--line-3); color: var(--ink-2); font: inherit; }
.jumps button:disabled { opacity: .4; cursor: default; }

.deckempty { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; }
.deckempty[hidden] { display: none; }
.deckempty .note { margin: 0; flex: 1 1 260px; }
/* What the codes mean (legend.js). In the flow, never over a control: the first
   time a one-line offer, after that a small "?". */
.legend { margin: 0 0 12px; }
.legend-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px 4px 4px;
  border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--ink-2);
  font: inherit; font-size: 13px; cursor: pointer; text-align: left;
}
.legend-btn:hover { color: var(--ink); border-color: var(--ink-2); }
.legend-q {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--raised); color: var(--ink); font-weight: 700; font-size: 13px;
}
.legend.seen .legend-offer { display: none; }
.legend.seen .legend-btn { padding: 4px; }
.legend-list {
  margin: 8px 0 0; padding: 12px 16px; list-style: none; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--raised); font-size: 14px; line-height: 1.5; color: var(--ink-2);
}
.legend-list[hidden] { display: none; }
.legend-list li + li { margin-top: 4px; }
.legend-list b { color: var(--ink); font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; }
/* /legend */
/* A Decks record that ran out: centred, in the flow above the decks. */
.deckended {
  margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; text-align: center;
  border: 1px solid var(--line-2); background: var(--raised); color: var(--ink);
}
.deckended[hidden] { display: none; }
.deckended p { margin: 0 auto; max-width: 52ch; font-size: 15px; line-height: 1.45; font-weight: 600; }

/* Both records up close, stacked around one playhead (zoom.js draws them). */
.zoom {
  position: relative; display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px;
  background: var(--raised); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px;
}
.zoom[hidden] { display: none; }
.zoomwave { display: block; width: 100%; height: 56px; --wave-played: var(--accent-text); --wave-rest: #6b736f; }
:root[data-room="on"] .zoomwave { --wave-rest: #b9bfb7; }
.zoom-head { position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; pointer-events: none; }
.zoom-tag { position: absolute; left: 16px; font-size: 10px; color: var(--ink-3); pointer-events: none; }
.zoom-tag.a { top: 12px; }
.zoom-tag.b { bottom: 12px; }

/* The first-run tour: one step at a time, pointing at its control. */
.tour {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center;
  margin-bottom: 16px; padding: 14px 16px; border-radius: 14px;
  background: var(--raised); border: 1px solid var(--accent-text);
}
.tour[hidden] { display: none; }
.tour-n { grid-column: 1; font-size: 10px; letter-spacing: .14em; color: var(--accent-text); }
.tour-title { grid-column: 1; font-size: 16px; }
.tour-body { grid-column: 1; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.tour .btn { grid-column: 2; grid-row: 1 / span 3; }
.tour-here { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 10px; animation: tour-pulse 1.6s ease-in-out infinite; }
@keyframes tour-pulse { 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .tour-here { animation: none; } }
/* Stacked decks (a phone; shell.js deckLayout measures it): the controls are screens
   apart, so the card rides above the tab bar and each step scrolls its control into
   the space above it (research 11 N4). The quiet line does the same: B runs out with
   the thumb at the crossfader, three screens below where the line used to be. */
#viewDeck.stacked .tour {
  position: fixed; left: 8px; right: 8px; z-index: 8; margin: 0;
  bottom: calc(var(--tabbar-h, 0px) + env(safe-area-inset-bottom) + 8px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
  padding: 10px 12px; gap: 2px 10px; max-height: 45vh; overflow-y: auto;
}
#viewDeck.stacked .deckended {
  position: fixed; left: 8px; right: 8px; z-index: 8; margin: 0;
  bottom: calc(var(--tabbar-h, 0px) + env(safe-area-inset-bottom) + 8px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
}
#viewDeck.stacked .tour-title { font-size: 15px; }
#viewDeck.stacked .tour-body { font-size: 13px; line-height: 1.4; }
#viewDeck.stacked.touring { padding-bottom: calc(var(--tour-h, 160px) + 16px); }
/* The consent line stands on the tab bar on a phone while it asks; the card stands on it. */
@media (max-width: 767px) {
  html.ask-consent #viewDeck.stacked .tour, html.ask-consent #viewDeck.stacked .deckended {
    bottom: calc(var(--tabbar-h, 0px) + env(safe-area-inset-bottom) + 60px);
  }
}
.fxrow { display: flex; flex-wrap: wrap; gap: 6px; }
.fxrow button {
  min-height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-3); color: var(--ink-2);
}
.fxrow button[aria-pressed="true"] { background: var(--accent-text); color: var(--on-accent); border-color: transparent; }
.fxrow button[aria-disabled="true"] { color: var(--ink-4); }
.fxrow .lock { width: 11px; height: 11px; stroke-width: 2; }

/* The centre. */
.cpanel {
  flex: 0 1 280px; min-width: 240px; background: var(--raised); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.cpanel.out .cp-ai, .cpanel.out .cp-mixer { display: none !important; }
.cp-ai, .cp-mixer, .cp-out { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.cp-count { display: flex; flex-direction: column; gap: 4px; }
.cp-count b { font-size: 52px; font-weight: 700; line-height: 1; color: var(--accent-text); }
.cp-count span { font-size: 15px; color: var(--ink-2); }
.cp-why { font-size: 15px; line-height: 1.55; }
.beatbtn {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--outline); font-size: 14px; font-weight: 600; align-self: stretch;
}
.beatbtn i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink-4); flex: none; }
.beatbtn[aria-pressed="true"] i { background: var(--live); border-color: var(--live); box-shadow: 0 0 0 3px rgba(20, 184, 146, .25); }
/* The AI DJ's drums under a seam: the lit lamp of the old toggle, as a line that
   says what is happening and asks nothing of anybody. */
.drumsline { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.drumsline[hidden] { display: none; }
.drumsline i { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--live); box-shadow: 0 0 0 3px rgba(20, 184, 146, .25); }
.cp-go { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 16px; }
/* Next (⏭): Mix now and Skip as one. Round, beside Play/Pause, a size smaller. */
.nextbtn {
  flex: none; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--outline);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink);
}
.nextbtn svg { width: 20px; height: 20px; fill: currentColor; }
.nextbtn.mixing { border-color: var(--accent-text); color: var(--accent-text); }
.nextbtn:disabled { opacity: .4; cursor: default; }
.cp-next { min-height: 1.4em; margin: 0; text-align: center; font-size: 13px; color: var(--ink-3); }
/* Under the AI DJ the room's pause sits in the centre, beside Next. */
#viewDeck:not(.manual) .decktools .roomplay { display: none; }
.aidock { display: none; }
.cp-go .btn { min-height: 48px; border-radius: 12px; padding: 0 10px; }
.cp-out .silk { color: var(--ink-3); letter-spacing: .14em; }
.cp-big { font-size: 19px; font-weight: 700; line-height: 1.3; }
.cp-out p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.cp-stack { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.cp-up { flex-direction: column; gap: 0; border-radius: 12px; min-height: 0; padding: 12px; line-height: 1.3; }
.cp-up span { font-weight: 500; font-size: 12px; }
.cp-plans { text-align: center; padding: 8px; font-size: 14px; font-weight: 600; }
.cp-out .cp-plans { margin-top: auto; text-align: left; padding: 0; color: var(--accent-text); line-height: 1.5; }
.cp-label { text-align: center; letter-spacing: .14em; }
.strips { display: flex; justify-content: space-around; }
.strip { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.kn { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: ns-resize; touch-action: none; }
.kn svg { width: 36px; height: 36px; }
.kn circle { fill: none; stroke: var(--outline); stroke-width: 2.5; }
.kn line { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.kn.hot circle { stroke: var(--accent-text); }
.kn.hot line { stroke: var(--accent-text); }
.kn .silk { font-size: 9px; letter-spacing: .1em; }
.kn.dead { opacity: .4; cursor: default; }
.chfader { position: relative; width: 6px; height: 90px; background: var(--page); border-radius: 3px; margin-top: 4px; cursor: ns-resize; touch-action: none; }
.chfader b { position: absolute; left: -7px; bottom: calc(50% - 7px); width: 20px; height: 14px; background: var(--ink); border-radius: 3px; }
.cp-side { font-size: 11px; color: var(--ink-2); }
/* The channel fader with the level meter beside it: what this deck is actually
   putting out, measured (console.js). */
.chrow { display: flex; gap: 8px; align-items: flex-end; }
.vu { position: relative; width: 6px; height: 90px; margin-top: 4px; background: var(--page); border-radius: 3px; overflow: hidden; }
.vu i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--accent-text); border-radius: 3px; }
.vu:not(.measured) i { opacity: .45; }
.cp-wet { display: flex; justify-content: center; }
.cp-wet .kn { cursor: ns-resize; }
.cp-mixer .fader { margin-top: auto; position: relative; padding: 9px 0; touch-action: none; cursor: pointer; }
.cp-mixer .fader .track { height: 8px; background: var(--page); border-radius: 999px; position: relative; }
.cp-mixer .fader .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: transparent; }
.cp-mixer .fader .knob { position: absolute; top: 0; left: 0; width: 26px; height: 26px; margin-left: -13px; background: var(--ink); border-radius: 6px; }
.cp-mixer .fader .knob.idle { opacity: .5; }
.cp-move { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.seg.mixlen { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; border: 1px solid var(--line-2); }
.seg.mixlen button { padding: 6px 10px; border-radius: 999px; font-size: 12px; color: var(--ink-3); }
.seg.mixlen button[aria-pressed="true"] { background: var(--line-3); color: var(--ink); }

/* Under the decks. */
.lower-in { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.lower-in.manual { flex-direction: row-reverse; }
.lower-in.only { display: block; }
.panel {
  min-width: 0; background: var(--raised); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.panel.coming { flex: 999 1 520px; }
.lower-in.manual .panel.coming, .lower-in.asking .panel.coming { flex: 1 1 480px; }
.panel.follow { flex: 1 1 380px; gap: 10px; }
.panel.crate { flex: 1 1 520px; }
.panel.crate.asking { border-color: var(--accent-text); }
.ph { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
.ph-l { display: flex; flex-direction: column; min-width: 0; }
.ph-l.row { flex-direction: row; align-items: center; gap: 10px; }
.ph h2 { font-size: 18px; font-weight: 700; line-height: 1.3; }
.ph .sub { font-size: 13px; color: var(--ink-3); }
.addrec { gap: 8px; }
.addrec svg { width: 13px; height: 13px; stroke-width: 2; }
.asknote { font-size: 13px; color: var(--accent-text); }
.crows, .krows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.crows { gap: 6px; }
.crow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); }
.crow.mine { background: var(--surface); border-color: transparent; }
.crow .rowart, .krow .rowart { flex: none; width: 40px; height: 40px; border-radius: 6px; background-size: cover; background-position: center; background-color: var(--line); }
.cl { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cl .t { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow:not(.mine) .cl .t { color: var(--ink-2); }
.cl .a { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl .n { padding-top: 2px; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl .n.fits { color: var(--accent-text); }
.cl .n.clash { color: var(--clash); }
.crow .tag { flex: none; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--fits-bg); color: var(--accent-text); }
.crow .x { flex: none; width: 34px; height: 34px; border-radius: 50%; color: var(--ink-3); font-size: 18px; }
.crow .x:hover { color: var(--ink); background: var(--line); }
.carries { padding: 8px 2px 2px; font-size: 12px; color: var(--ink-3); list-style: none; }
.carries.mixend { margin-top: 6px; border-top: 1px dashed var(--accent-text); color: var(--accent-text); }
/* Coming up under Decks: two shelves (research 13 §d). Yours plays next; the AI DJ's
   leftovers sit below, dimmer, and never play unless somebody takes one. */
.shelf { display: flex; flex-direction: column; gap: 8px; }
.shelf + .shelf { padding-top: 6px; }
.shelf-h { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
.shelf.mine .shelf-h { color: var(--accent-text); }
.shelf-empty { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.crow.ai { border-style: dashed; }
.crow .ask { display: flex; gap: 6px; flex: none; align-items: center; }
.crow .pnext { min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--accent-text); color: var(--on-accent); font-size: 13px; font-weight: 700; white-space: nowrap; }
.crow .deckbtn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--outline); font-size: 12px; font-weight: 600; }
.crow .deckbtn:disabled { border-color: var(--line-2); color: var(--ink-4); font-weight: 400; cursor: not-allowed; }
.crow .up { flex: none; width: 34px; height: 34px; border-radius: 50%; color: var(--ink-3); font-size: 16px; }
.crow .up:hover { color: var(--ink); background: var(--line); }
.cl .n.refused { color: var(--clash); white-space: normal; }
.aimore { display: none; align-self: flex-start; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-3); font-size: 13px; color: var(--ink-2); }
.stops { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-radius: 10px; background: var(--surface); font-size: 14px; font-weight: 600; }
.stops[hidden] { display: none; }
.stops .carry { border: 1px solid var(--outline); }
@media (max-width: 767px) {
  /* A phone gets Play next only, at a thumb's size; the AI shelf folds to three. */
  .crow .deckbtn { display: none; }
  .crow .pnext { min-height: 44px; padding: 0 16px; }
  .crow .x, .crow .up { width: 44px; height: 44px; }
  .shelf.ai:not(.open) .crow.fold { display: none; }
  .upfold:not(.open) .fold { display: none; }
  .aimore { display: inline-flex; align-items: center; min-height: 44px; }
  .stops .carry { min-height: 44px; }
  /* Which deck a cued row sits on is the point of its note: let it wrap, not clip. */
  .crow.cued .cl .n { white-space: normal; }
}
@media (max-width: 420px) {
  /* At 360-390 px the title had 71-101 px beside the art and a 44 px Play next; the
     title is what a person chooses by, so the art gives way on the two shelves. */
  .shelf .crow .rowart { display: none; }
}
.panel .empty p { font-size: 15px; }
.panel .empty .sub { font-size: 13px; color: var(--ink-3); }
.follow .accent { color: var(--accent-text); letter-spacing: .14em; }
.follow .fl { font-size: 17px; font-weight: 600; line-height: 1.5; }
.follow .fd { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.follow .tip { border-top: 1px solid var(--line-2); padding-top: 12px; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.follow .tip strong { color: var(--ink); font-weight: 600; }
.done { min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--accent-text); color: var(--on-accent); font-size: 13px; font-weight: 700; }
.tabs { display: flex; gap: 4px; }
.tabs button { min-height: 36px; padding: 0 12px; border-radius: 999px; font-size: 13px; color: var(--ink-3); }
.tabs button[aria-selected="true"] { background: var(--line-3); color: var(--ink); font-weight: 600; }
.crate-find { display: flex; gap: 8px; align-items: center; }
.field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px;
  background: var(--page); border: 1px solid var(--line-2); border-radius: 999px; cursor: text;
}
.field svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; stroke-width: 1.8; }
.field input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--ink); font: inherit; font-size: 14px; }
.field input::placeholder { color: var(--ink-3); }
button.fits {
  flex: none; min-height: 42px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line-3); color: var(--ink-2);
}
button.fits[aria-pressed="true"] { border-color: var(--accent-text); background: var(--fits-bg); color: var(--accent-text); }
button.fits:disabled { opacity: .45; cursor: default; }
.digrow { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.digrow::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px;
  border: 1px solid var(--line-3); color: var(--ink-2); white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--accent-text); color: var(--on-accent); border-color: transparent; font-weight: 600; }
.krow { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.prev {
  flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--outline); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.prev.empty { border-color: transparent; }
.prev svg { width: 12px; height: 12px; fill: currentColor; }
.prev .i-pause, .prev.playing .i-play { display: none; }
.prev.playing .i-pause { display: block; }
.prev.playing { background: var(--accent-text); color: var(--on-accent); border-color: transparent; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25); }
.krow .bpm { font-size: 12px; color: var(--ink-2); width: 44px; text-align: right; flex: none; }
.krow .key { font-size: 12px; padding: 3px 8px; border-radius: 999px; width: 44px; text-align: center; background: var(--page); color: var(--ink-3); flex: none; }
.krow .key:empty { background: transparent; }
.krow .key.fits { background: var(--fits-bg); color: var(--accent-text); }
.krow .ask { display: flex; gap: 6px; flex: none; align-items: center; }
.krow .pick { height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.krow .pick.next { background: var(--accent-text); color: var(--on-accent); font-weight: 700; }
.krow .pick.soon { border: 1px solid var(--outline); }
.krow .load { height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--outline); font-size: 12px; font-weight: 600; }
.krow .load:disabled { border-color: var(--line-2); color: var(--ink-4); font-weight: 400; cursor: not-allowed; }
.krow .plus { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--outline); display: inline-flex; align-items: center; justify-content: center; }
.krow .plus svg { width: 14px; height: 14px; stroke-width: 2; }
.foot-note { font-size: 13px; color: var(--ink-3); line-height: 1.6; }
.foot-note strong { color: var(--ink); font-weight: 600; }
.panel .note { font-size: 14px; color: var(--ink-3); margin: 0; }
.creditline { font-size: 13px; color: var(--ink-3); }

/* What it's doing — the AI DJ's own account, newest first. Tokens only, so the
   lights flip it with everything else. Folded, it keeps the newest line. */
.panel.doing { gap: 10px; padding: 16px 20px; }
.doing-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; color: inherit; }
.doing-hd .ph-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doing-hd h2 { font-size: 16px; font-weight: 700; line-height: 1.3; }
.doing-hd .sub { font-size: 13px; color: var(--ink-3); }
.doing-hd .chev { flex: none; width: 18px; height: 18px; color: var(--ink-3); transition: transform .2s; }
.doing[data-open="false"] .doing-hd .chev { transform: rotate(-90deg); }
.doing[data-open="false"] .doing-hd .sub { display: none; }
.doing-hd:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: 8px; }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.feed li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: baseline; font-size: 13px; line-height: 1.45; color: var(--ink-3); min-width: 0; }
.feed li:first-child { color: var(--ink); }
.feed li .t { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 11px; color: var(--ink-4); }
.feed li .x { min-width: 0; overflow-wrap: anywhere; }
.feed .k { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-right: 4px; }
.feed li:first-child .k { color: var(--accent-text); }
.feed li.feed-empty { display: block; color: var(--ink-3); }
/* Transform only: it runs while audio plays, and a tab that never animates
   (hidden, or automated) must still show the line rather than hold it at
   opacity 0. */
@keyframes feed-in { from { transform: translateY(-4px); } to { transform: none; } }
.feed li:first-child:not(.feed-empty) { animation: feed-in .35s cubic-bezier(.2, .8, .3, 1) both; }
@media (prefers-reduced-motion: reduce) { .feed li:first-child:not(.feed-empty) { animation: none; } }
.doing[data-open="false"] .feed li:not(:first-child) { display: none; }
.doing[data-open="false"] .feed li:first-child { white-space: nowrap; }
.doing[data-open="false"] .feed li:first-child .x { overflow: hidden; text-overflow: ellipsis; }
.linkish { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; padding: 0; }
#deckEmpty { margin: 0; font-size: 14px; color: var(--ink-3); }

@media (max-width: 899px) {
  .cpanel { flex: 1 1 100%; min-width: 0; order: 3; }
  .dk { flex-basis: 100%; }
  #dkB { order: 2; }
  /* Coming up between deck A and deck B, when coming-place.js has moved it here. */
  .comingslot { flex: 1 1 100%; min-width: 0; order: 1; display: flex; flex-direction: column; scroll-margin-top: 12px; }
  /* Deck A's jump to it: a quiet pill under the title, a whole phone target. */
  .cojump {
    align-self: flex-start; min-height: 44px; padding: 0 16px; border-radius: 999px;
    border: 1px solid var(--line-3); color: var(--accent-text); font-size: 14px; font-weight: 600;
  }
  .cp-ai { flex-direction: column; }
}
@media (max-width: 760px) {
  .decktools { gap: 10px 12px; }
  .tools-r { margin-left: 0; width: 100%; justify-content: space-between; }
  .allow .gauge { width: 110px; }
  .deckvol { display: none; }
  .decktools .newset span { display: none; }
  .decktools .newset { padding: 0 14px; }
  .modesw { width: 100%; }
  .modesw button { flex: 1; }
  .timeline .blk { font-size: 0; padding: 0; }
  .lower-in.manual { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .panel { padding: 16px; }
  .krow { flex-wrap: wrap; }
  .krow .cl { flex-basis: calc(100% - 100px); }
  .krow .ask { width: 100%; justify-content: flex-end; }
  .crate-find { flex-wrap: wrap; }
  .crate-find button.fits { width: 100%; }
  .tabs { overflow-x: auto; }
  .cp-count b { font-size: 44px; }
}

/* ─────────────────────────── home and the mix grids ───────────────────────────
   Boards 04 and 06. One mix card everywhere (mixcards.js). */

html { overflow-x: clip; }
.m-only { display: none !important; }
@media (max-width: 767px) {
  .m-only { display: revert !important; }
  .d-only { display: none !important; }
}
.accent { color: var(--accent-text); }


.hsec { padding: 8px 0 40px; display: flex; flex-direction: column; gap: 20px; }
.hsec + .hsec { padding-top: 24px; padding-bottom: 56px; }
.hsec-h { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; justify-content: space-between; }
.hsec-h h2, .hsec-t h2 { font-size: 28px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.hsec-t { display: flex; flex-direction: column; gap: 4px; }
.hsec-t p { font-size: 14px; color: var(--ink-3); }
.linkto.plain { color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 28px 20px; }
.mcard-art { position: relative; }
.mcard { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; color: var(--ink); }
.mcard-art { margin-bottom: 12px; }
.mcard-cover { display: block; }
.mcard-play {
  position: absolute; z-index: 3; right: 10px; bottom: 10px;
  width: 40px; height: 40px; border-radius: 50%; background: var(--scrim); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.mcard-play svg { width: 14px; height: 14px; fill: currentColor; }
.mcard-play:hover { background: var(--accent); color: var(--on-accent); }
.mcard-new { align-self: flex-start; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.weekly .sgrid { grid-template-columns: minmax(176px, 220px); }
.mcard-t { font-weight: 600; font-size: 15px; line-height: 1.35; }
.mcard-t:hover { text-decoration: underline; text-underline-offset: 3px; }
.mcard-a { font-size: 13px; color: var(--ink-3); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard-m { font-size: 13px; color: var(--ink-3); }

.genres { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--line); padding-top: 32px; }
.genres h2.silk { font-size: 12px; letter-spacing: .16em; }
.genre-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 20px; }
.genre-links a { padding: 9px 0; font-size: 15px; color: var(--ink-2); }
.genre-links a:hover { color: var(--ink); }
.faq { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 32px; max-width: 880px; }
.faq h2 { font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.faq-q { border-bottom: 1px solid var(--line); }
.faq-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0;
  font-size: 17px; font-weight: 600; cursor: pointer; list-style: none;
}
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary i::before { content: '+'; font-family: 'JetBrains Mono', monospace; font-style: normal; color: var(--accent-text); font-size: 18px; }
.faq-q[open] summary i::before { content: '−'; }
.faq-q p { padding: 0 0 20px; font-size: 15px; line-height: 1.7; color: var(--ink-2); max-width: 760px; }

@media (max-width: 767px) {
  .hsec-h h2, .hsec-t h2 { font-size: 22px; }
  .hsec { gap: 14px; padding-bottom: 28px; }
  .mgrid.scroller { display: flex; overflow-x: auto; gap: 12px; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .mgrid.scroller .mcard { flex: none; width: 140px; }
  .mgrid.scroller .mcard-a { display: none; }
  .genre-links { grid-template-columns: 1fr 1fr; }
  .faq h2 { font-size: 22px; }
  .faq-q summary { font-size: 15px; padding: 14px 0; }
}

/* ─────────────────────────────── the sleeve ───────────────────────────────
   Every mix is a release on the label (sleeve.js): a flat two-ink sleeve with
   the record behind it, whose label is the green O. The inks are the sleeve's
   own and look the same in both rooms; only the shadow follows the room. The
   record moves on hover, on one card at a time, and never on touch or scroll. */

.sl { position: relative; display: block; aspect-ratio: 1; }
.sl .sleeve { position: relative; z-index: 2; display: block; width: 100%; height: 100%; border-radius: 3px; overflow: hidden; box-shadow: var(--sleeve-shadow); }
/* Paper grain: one small noise tile, drawn once and repeated. */
.sl .sleeve::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .16; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px;
}
.sleeve-svg { display: block; width: 100%; height: 100%; }
.disc {
  position: absolute; z-index: 1; inset: 3%; border-radius: 50%;
  background:
    radial-gradient(circle, var(--vinyl) 0 4.2%, var(--cover-ring) 4.6% 15.5%, var(--vinyl) 16% 17%, transparent 17.2%),
    repeating-radial-gradient(circle, #151717 0 1px, #0b0c0c 1px 3px),
    var(--vinyl);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  transition: transform .32s cubic-bezier(.2, .7, .2, 1);
}
.disc::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(125deg, rgba(255, 255, 255, .10), transparent 30% 70%, rgba(255, 255, 255, .06)); }

/* A card leaves room above its sleeve for the record to rise into. */
.mgrid .mcard-art, .sgrid .mcard-art { padding-top: 14%; }
.mcard-play { background: var(--vinyl); color: #fff; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s, background .2s; }
.mcard-play:focus-visible { opacity: 1; transform: none; }
@media (hover: hover) {
  .mcard:hover .disc, .mcard:focus-within .disc { transform: translateY(-15%); }
  .mcard:hover .mcard-play { opacity: 1; transform: none; }
}
@media (hover: none) { .mcard-play { opacity: 1; transform: none; } }

/* ──────────────────────────── home: label sleeves ────────────────────────────
   docs/design/home-review/home-mock.html, approved 2026-11-05. */

.hero2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 56px; align-items: center; padding: 64px 0 80px; }
.kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.lamp { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px rgba(20, 184, 146, .16); flex: none; }
.display { font-size: clamp(56px, 6.4vw, 92px); line-height: .94; font-weight: 800; font-variation-settings: 'wdth' 118; letter-spacing: -.02em; }
.display span { display: block; color: var(--ink-4); text-wrap: balance; }
.hero2 .sub { margin-top: 28px; font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 30em; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.btn.big { min-height: 56px; padding: 0 28px; font-size: 17px; gap: 12px; }
.btn.big svg { width: 14px; height: 14px; fill: currentColor; }
.hero2 .offer-line { margin-top: 20px; }

.feats { min-width: 0; }
.feat { position: relative; width: min(380px, 100%); justify-self: start; }
/* One sleeve per slot is in the page; <html data-slot> (set in <head>, before
   the first paint) shows the slot on now, and without it the prerendered one.
   The same rule lights the Now lamp. */
:root:not([data-slot]) .feat:not(.is-now),
:root[data-slot="morning"] .feat:not([data-slot="morning"]),
:root[data-slot="afternoon"] .feat:not([data-slot="afternoon"]),
:root[data-slot="evening"] .feat:not([data-slot="evening"]),
:root[data-slot="late"] .feat:not([data-slot="late"]),
:root:not([data-slot]) .mx-pick:not(.is-now),
:root[data-slot="morning"] .mx-pick:not([data-slot="morning"]),
:root[data-slot="afternoon"] .mx-pick:not([data-slot="afternoon"]),
:root[data-slot="evening"] .mx-pick:not([data-slot="evening"]),
:root[data-slot="late"] .mx-pick:not([data-slot="late"]),
:root:not([data-slot]) .slot:not(.is-now) .now,
:root[data-slot="morning"] .slot:not([data-slot="morning"]) .now,
:root[data-slot="afternoon"] .slot:not([data-slot="afternoon"]) .now,
:root[data-slot="evening"] .slot:not([data-slot="evening"]) .now,
:root[data-slot="late"] .slot:not([data-slot="late"]) .now,
/* And the part of the week (<html data-week>): a slot whose pick differs by day
   carries one sleeve per pick, each saying its days (shell/home.js daysFor). */
:root[data-week="weekday"] .feat[data-days]:not([data-days~="weekday"]),
:root[data-week="friday"] .feat[data-days]:not([data-days~="friday"]),
:root[data-week="weekend"] .feat[data-days]:not([data-days~="weekend"]),
:root[data-week="weekday"] .mx-pick[data-days]:not([data-days~="weekday"]),
:root[data-week="friday"] .mx-pick[data-days]:not([data-days~="friday"]),
:root[data-week="weekend"] .mx-pick[data-days]:not([data-days~="weekend"]) { display: none !important; }
/* The crate: every approved cover is in the page; <head> picks this visit's 8.
   Without it, the first 8. */
:root:not([data-crate]) .wall .rec:nth-child(n+9) { display: none; }
.feat-sl { display: block; }
.feat .disc { transform: translateX(44%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 10px 30px rgba(0, 0, 0, .4); }
@media (hover: hover) { .feat:hover .disc { transform: translateX(48%) rotate(20deg); } }
.feat-meta { margin-top: 26px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.feat-tx { min-width: 0; }
.feat-t { display: block; margin-top: 2px; font-size: 24px; font-weight: 700; line-height: 1.15; }
.feat-t:hover { text-decoration: underline; text-underline-offset: 3px; }
.feat-m { margin-top: 6px; }
.fbtn { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; }
.fbtn:hover { filter: brightness(1.06); }
.fbtn svg { width: 16px; height: 16px; fill: currentColor; margin-left: 3px; }
.who { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.faces { display: flex; flex: none; }
.faces b { width: 30px; height: 30px; border-radius: 3px; background: var(--surface) center / cover no-repeat; border: 2px solid var(--page); margin-left: -8px; }
.faces b:first-child { margin-left: 0; }

.hsec2 { padding: 72px 0; border-top: 1px solid var(--line); }
.sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 40px; }
.sec-h h2, .crate-h h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.02; font-weight: 800; font-variation-settings: 'wdth' 118; letter-spacing: -.02em; }
.sec-h .linkto { white-space: nowrap; }

.slot { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 32px; padding: 30px 0 40px; border-top: 1px solid var(--line); }
.sec-h + .slot { border-top: 0; padding-top: 0; }
.slot-l b { display: block; margin-bottom: 4px; font: 700 15px Archivo, system-ui, sans-serif; text-transform: none; letter-spacing: 0; color: var(--ink); }
.slot-l .now { display: flex; align-items: center; gap: 7px; margin-top: 12px; color: var(--accent-text); }
.slot-l .now i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.sgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.sgrid .mcard-t { font-size: 17px; font-weight: 650; line-height: 1.25; }
.sgrid .mcard-m { margin-top: 3px; font-size: 10.5px; }

.crate-h { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: end; margin-bottom: 40px; }
.crate-h p { color: var(--ink-2); font-size: 17px; max-width: 30em; }
.wall { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 20px; }
.rec { display: block; min-width: 0; }
.rec b { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--surface) center / cover no-repeat; box-shadow: var(--sleeve-shadow); }
.rec span { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec em { display: block; margin-top: 2px; font-style: normal; font-size: 10px; letter-spacing: .1em; }
.rec:hover span { text-decoration: underline; text-underline-offset: 3px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.steps .n { font-size: 13px; color: var(--accent-text); }
.steps h3 { margin-top: 14px; font-size: 22px; line-height: 1.2; font-weight: 700; }
.steps p { margin-top: 10px; color: var(--ink-3); font-size: 15.5px; line-height: 1.55; max-width: 24em; }

.faq.faq-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 0 64px; border-top: 0; padding-top: 0; max-width: none; }
.faq-cols .faq-q summary { font-size: 16px; }
.genres2 { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 2px 22px; font-size: 14px; color: var(--ink-3); }
.genres2 a { padding: 6px 0; }
.genres2 a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .disc, .mcard-play { transition: none; }
  .mcard:hover .disc, .mcard:focus-within .disc { transform: none; }
  .feat:hover .disc { transform: translateX(44%); }
}

@media (max-width: 1099px) {
  .hero2 { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 40px; }
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .slot { grid-template-columns: 100px minmax(0, 1fr); gap: 20px; }
  .sgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; }
}

/* Phone: tonight's mix on the first screen, two sleeves a row, the crate scrolls. */
@media (max-width: 767px) {
  .hero2 { display: block; padding: 20px 0 32px; }
  .kicker { margin-bottom: 12px; }
  .display { font-size: clamp(38px, 12vw, 46px); line-height: .98; }
  .hero2 .sub { margin-top: 12px; font-size: 16px; line-height: 1.45; }
  .ctas { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 18px; }
  .btn.big { min-height: 48px; font-size: 16px; }
  /* A line, not a pill, so tonight's mix still makes the first screen. */
  .hero2 .offer-line { margin-top: 14px; padding: 0; border: 0; border-radius: 0; font-size: 13px; line-height: 1.45; }
  .feat { margin-top: 20px; width: auto; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 16px; align-items: center; padding: 12px; background: var(--raised); border: 1px solid var(--line); border-radius: 14px; }
  .feat .disc { display: none; }
  .feat-meta { margin: 0; flex-direction: column; gap: 10px; }
  .feat-t { font-size: 19px; }
  .feat-m { line-height: 1.7; }
  .fbtn { width: 44px; height: 44px; }
  .who { display: none; }
  .hsec2 { padding: 40px 0; }
  .sec-h { margin-bottom: 18px; }
  .sec-h h2, .crate-h h2 { font-size: 30px; }
  .slot { display: block; padding: 18px 0 28px; }
  .slot-l { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .slot-l b { margin: 0; }
  .slot-l .now { margin: 0 0 0 auto; }
  .sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .sgrid .mcard-t { font-size: 15px; }
  /* The whole card is the tap target on a phone; the record stays in its sleeve. */
  .sl .disc { display: none; }
  .mgrid .mcard-art, .sgrid .mcard-art { padding-top: 0; }
  .mcard-art { margin-bottom: 10px; }
  .sgrid .mcard-play { display: none; }
  .crate-h { display: block; margin-bottom: 18px; }
  .crate-h p { margin-top: 10px; font-size: 15px; }
  .wall { display: flex; gap: 12px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .wall::-webkit-scrollbar { display: none; }
  .rec { flex: none; width: 112px; }
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .faq.faq-cols { grid-template-columns: 1fr; }
  .genres2 { margin-top: 28px; }
}
@media (max-width: 359px) {
  .feat { grid-template-columns: 96px minmax(0, 1fr); gap: 0 12px; padding: 12px; }
}

/* ─────────────────────────── Mixes, a mix, a genre ───────────────────────────
   Boards 09, 13, 14. */

.mx-hero { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: center; justify-content: space-between; padding: 48px 0 36px; border-bottom: 1px solid var(--line); }
.mx-hero-l { flex: 1 1 420px; max-width: 560px; display: flex; flex-direction: column; gap: 14px; }
.mx-hero-l h1 { font-size: clamp(36px, 4.6vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.mx-hero-l p { font-size: 17px; color: var(--ink-2); line-height: 1.6; }
.mx-pick { flex: 1 1 380px; max-width: 640px; display: flex; align-items: center; gap: 18px; padding: 16px; background: var(--raised); border: 1px solid var(--line-2); border-radius: 16px; }
.mx-pick-cover { flex: none; width: 112px; }
.mx-pick-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mx-pick-t .silk { letter-spacing: .14em; }
.mx-pick-t b { font-size: 20px; font-weight: 700; line-height: 1.3; }
.mx-pick-t span:last-child { font-size: 14px; color: var(--ink-3); }
.mx-pick-play { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; }
.mx-pick-play svg { width: 18px; height: 18px; fill: currentColor; }
.mx-filters { display: flex; flex-direction: column; gap: 14px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fgroup .silk { width: 72px; flex: none; letter-spacing: .14em; }
.fgroup .chip { min-height: 36px; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
.mdot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.fcount { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-3); }
.fcount .chip[aria-pressed="true"] { background: var(--fits-bg); color: var(--accent-text); border-color: var(--accent-text); }
.mx-grid { padding: 32px 0 56px; display: flex; flex-direction: column; gap: 32px; align-items: center; }
.mx-grid .mgrid { width: 100%; }
.mx-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 56px 16px; }
.mx-empty b { font-size: 20px; }
.mx-empty span { color: var(--ink-3); }
.mx-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; border-top: 1px solid var(--line); padding: 48px 0 24px; }
.mx-about h2.wide { font-size: 24px; font-weight: 700; margin-bottom: 12px; }
.mx-about p { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.mx-about .genres { border-top: 0; padding-top: 0; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 24px 0 0; font-size: 13px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

.mp-hero { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: center; padding: 28px 0 36px; }
.mp-cover { flex: none; width: clamp(200px, 22vw, 280px); margin-right: 32px; }
.mp-cover .disc { transform: translateX(14%); }
.mp-info { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.mp-info .silk { letter-spacing: .16em; }
.mp-info h1 { font-size: clamp(34px, 4.4vw, 60px); font-weight: 700; line-height: 1.04; letter-spacing: -.02em; }
.mp-lede { font-size: 16px; color: var(--ink-2); line-height: 1.6; max-width: 620px; }
.mp-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.mp-acts .btn.solid svg { width: 14px; height: 14px; fill: currentColor; }
.roundbtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--outline); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.roundbtn svg { width: 17px; height: 17px; }
.roundbtn[aria-pressed="true"] { background: var(--fits-bg); border-color: var(--accent-text); color: var(--accent-text); }
.roundbtn[aria-pressed="true"] svg { fill: currentColor; }
.roundbtn.done { border-color: var(--accent-text); color: var(--accent-text); }
/* 👍 / 👎 on a whole mix (shell/feedback.js mixVoteHtml), placed by deck-design
   (docs/design/deck-review): on the mix page its own row under the actions, the
   label on the left of 44px round buttons; on the deck one outlined pill right
   after the set's title, 32px buttons, and on a phone 40px with the label kept
   only for screen readers. */
.mixvote { display: inline-flex; align-items: center; gap: 8px; }
.mixvote-b { font-size: 18px; line-height: 1; }
.mixvote-q { font-size: 13px; color: var(--ink-2); }
.mp-vote { margin-top: 14px; }
.deckmixvote { display: inline-flex; }
.deckmixvote[hidden] { display: none; }
.deckmixvote .mixvote { gap: 4px; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; }
.deckmixvote .mixvote-q { font-size: 12.5px; color: var(--ink-3); padding-left: 10px; }
.deckmixvote .mixvote-b { width: 32px; height: 32px; font-size: 15px; }
@media (max-width: 720px) {
  .deckmixvote .mixvote { padding: 3px; }
  .deckmixvote .mixvote-q { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .deckmixvote .mixvote-b { width: 40px; height: 40px; }
}
.mp-note { font-size: 13px; color: var(--ink-3); }
.mp-shape { gap: 16px; }
.mp-shape-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.mp-shape-h h2 { font-size: 18px; font-weight: 700; }
.mp-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-3); }
.mp-legend span { display: inline-flex; align-items: center; gap: 8px; }
.lg { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.lg.match { background: var(--fits-bg); box-shadow: inset 0 0 0 1px var(--accent-text); }
.lg.short { width: 4px; background: var(--outline); }
.mp-lanes { position: relative; height: 66px; }
.mp-lanes .blk { position: absolute; height: 28px; border-radius: 5px; background: var(--chip-off); box-shadow: inset 0 0 0 1px var(--outline); }
.mp-lanes .blk.match { background: var(--fits-bg); }
.mp-lanes .seamwin { position: absolute; top: -4px; height: 74px; border-radius: 6px; border: 1px solid var(--accent-text); background: rgba(var(--accent-rgb), .16); }
.mp-times { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); }
.mp-tracks { padding: 48px 0 8px; display: flex; flex-direction: column; gap: 16px; }
.mp-tracks h2 { font-size: 28px; font-weight: 700; }
.tablewrap { overflow-x: auto; }
.mp-tracks table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mp-tracks th { text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--ink-3); padding: 0 10px 10px; border-bottom: 1px solid var(--line-2); }
.mp-tracks td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.mp-tracks td.num { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.mp-tracks .tt { display: block; font-weight: 600; }
.mp-tracks .ta { display: block; font-size: 13px; color: var(--ink-3); }
.rowplay { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--outline); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.rowplay svg { width: 11px; height: 11px; fill: currentColor; }
.rowplay:hover { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.keychip { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--surface); color: var(--ink-2); }
.keychip.fits { background: var(--fits-bg); color: var(--accent-text); }
.seamtxt { font-size: 13px; color: var(--ink-3); }
.seamtxt.match { color: var(--accent-text); font-weight: 600; }
.mp-keep { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin: 40px 0 16px; padding: 24px; }
.mp-keep h2 { font-size: 20px; font-weight: 700; }
.mp-keep p { font-size: 15px; color: var(--ink-2); max-width: 640px; }
.mp-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; border-top: 1px solid var(--line); padding: 48px 0 24px; }
.mp-about h2.wide { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.mp-about p { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.credits-ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; }
.credits-ul li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.credits-ul li span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.credits-ul a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; flex: none; }

.gp-hero { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: center; justify-content: space-between; padding: 28px 0 36px; }
.gp-hero-l { flex: 1 1 460px; max-width: 700px; display: flex; flex-direction: column; gap: 16px; }
.gp-hero-l h1 { font-size: clamp(36px, 4.6vw, 60px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.gp-hero-l p { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.gp-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.gp-acts .btn.solid svg { width: 14px; height: 14px; fill: currentColor; }
.gp-art { width: clamp(200px, 24vw, 320px); height: auto; aspect-ratio: 1; border-radius: 16px; }
.gp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 40px; }
.gp-stats > div { background: var(--raised); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.gp-stats .silk { letter-spacing: .14em; }
.gp-stats b { font-size: 26px; font-weight: 700; font-variation-settings: 'wdth' 112; }
.gp-stats b small { font-size: 14px; font-weight: 500; color: var(--ink-3); }
.gp-stats b.txt { font-size: 16px; font-weight: 600; font-variation-settings: normal; }
.gp-live { display: flex; flex-direction: column; gap: 3px; color: var(--ink); }
.gp-live-art {
  aspect-ratio: 1; border-radius: 10px; margin-bottom: 7px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  border: 1px dashed var(--outline); background: rgba(var(--accent-rgb), .06);
}
.gp-live-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; margin-bottom: auto; }
.gp-live-ic svg { width: 14px; height: 14px; fill: currentColor; }
.gp-live-art b { font-size: 16px; }
.gp-live-art span:last-child { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.gp-artists .chip { display: inline-flex; align-items: center; }
.gp-more { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; border-top: 1px solid var(--line); padding: 16px 0 24px; }
.gp-more .faq { border-top: 0; }
.gp-related { display: flex; flex-direction: column; gap: 2px; padding-top: 32px; }
.gp-related .silk { font-size: 12px; letter-spacing: .16em; padding-bottom: 8px; }
.gp-related a { padding: 8px 0; font-size: 15px; color: var(--ink-2); }
.notfound { padding: 80px 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.notfound h1 { font-size: 40px; font-weight: 700; }
.notfound p { color: var(--ink-2); }

@media (max-width: 767px) {
  .mx-hero { padding: 24px 0; }
  .mx-pick-cover { width: 72px; }
  .mx-pick-t b { font-size: 16px; }
  .mx-pick-play { width: 44px; height: 44px; }
  .fgroup { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .fgroup .silk { width: auto; }
  .mx-about, .mp-about, .gp-more { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mx-grid .mgrid, .gp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .mp-hero { gap: 20px; }
  .mp-cover { width: 160px; margin-right: 0; }
  .mp-tracks th:nth-child(6), .mp-tracks td:nth-child(6) { display: none; }
  .mp-tracks td { padding: 10px 6px; }
  .gp-art { display: none; }
}

/* ─────────────────────────── /ai-dj and /decks ───────────────────────────
   Boards 07 and 08. */

.btn.big { min-height: 56px; padding: 0 28px; font-size: 17px; }
.btn.big svg { width: 16px; height: 16px; fill: currentColor; }
.pg-hero { display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: center; justify-content: space-between; padding: 64px 0 64px; }
.pg-hero.center { justify-content: center; text-align: center; padding-bottom: 40px; }
.pg-hero.center .pg-hero-l { align-items: center; max-width: 820px; }
.pg-hero.center .pg-acts { justify-content: center; }
.pg-hero-l { flex: 1 1 460px; max-width: 640px; display: flex; flex-direction: column; gap: 18px; }
.pg-hero-l .silk { font-size: 12px; letter-spacing: .16em; }
.pg-hero-l h1 { font-variation-settings: 'wdth' 106; font-size: clamp(40px, 5vw, 64px); font-weight: 700; line-height: 1.04; letter-spacing: -.02em; }
.pg-hero-l > p:not(.silk) { font-size: 19px; line-height: 1.6; color: var(--ink-2); max-width: 560px; }
.pg-hero-l > p.pg-note { font-size: 15px; line-height: 1.5; color: var(--ink-3); margin: -6px 0 0; }
.pg-acts { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.pg-card { flex: 1 1 440px; min-width: 0; max-width: 560px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 22px; }
.pg-card-h { display: flex; justify-content: space-between; gap: 12px; }
.pg-card-h .silk { letter-spacing: .14em; }
.pg-lanes { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 10px 0; }
.pg-win { position: absolute; left: 44%; width: 26%; top: 0; bottom: 0; border: 1px solid var(--accent-text); background: rgba(var(--accent-rgb), .08); border-radius: 8px; }
.pg-head { position: absolute; left: 30%; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 1px; }
.pg-blk { height: 40px; border-radius: 6px; display: flex; align-items: center; padding: 0 12px; font-size: 13px; font-weight: 600; }
.pg-blk.a { width: 70%; background: var(--chip-off); }
.pg-blk.b { margin-left: 44%; width: 56%; background: var(--fits-bg); }
.pg-why { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line-2); padding-top: 18px; }
.pg-why b { font-size: 15px; }
.pg-why div { display: flex; gap: 12px; align-items: baseline; }
.pg-why .num { flex: none; width: 76px; font-size: 12px; color: var(--accent-text); }
.pg-why div span:last-child { font-size: 14px; color: var(--ink-2); }
.pg-band { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--raised); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pg-band-in { max-width: 1320px; margin: 0 auto; padding: 72px clamp(16px, 4vw, 40px); display: flex; flex-direction: column; gap: 36px; }
.pg-intro { display: flex; flex-direction: column; gap: 10px; max-width: 680px; }
.pg-intro h2 { font-variation-settings: 'wdth' 106; font-size: 36px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.pg-intro p { font-size: 17px; color: var(--ink-2); line-height: 1.6; }
.pg-moods { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px 40px; }
.pg-moods > div, .pg-sound, .pg-hears { display: flex; flex-direction: column; gap: 12px; }
.pg-moods .silk, .pg-sound .silk, .pg-hears .silk { letter-spacing: .16em; }
.schips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.schip { height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-3); color: var(--ink-2); font-size: 14px; }
.schip.on { background: var(--accent-text); border-color: var(--accent-text); color: var(--on-accent); font-weight: 600; }
.pg-or { font-size: 14px; color: var(--ink-3); padding: 0 4px; }
.pg-cap { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.pg-hears { padding: 22px 24px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); }
.pg-hears p { font-size: 18px; line-height: 1.55; font-weight: 500; }
.pg-sec { padding: 72px 0 0; display: flex; flex-direction: column; gap: 32px; }
.pg-sec > h2.wide { font-variation-settings: 'wdth' 106; font-size: 36px; font-weight: 700; line-height: 1.15; }
.pg-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.pg-ways article { background: var(--raised); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.pg-ways .silk { letter-spacing: .14em; }
.pg-ways h3 { font-size: 21px; font-weight: 700; }
.pg-ways p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.pg-ways p strong { color: var(--ink); }
.pg-way-pic { position: relative; height: 64px; margin-bottom: 6px; }
.pg-way-pic i { position: absolute; height: 22px; border-radius: 5px; background: var(--chip-off); }
.pg-way-pic.blend i:first-child { left: 0; width: 62%; top: 8px; }
.pg-way-pic.blend i:last-child { left: 38%; width: 62%; top: 36px; background: var(--fits-bg); }
.pg-way-pic.bridge i:first-child { left: 0; width: 40%; top: 8px; }
.pg-way-pic.bridge i.drums { left: 36%; width: 28%; top: 22px; height: 18px; background: repeating-linear-gradient(90deg, var(--accent-text) 0 3px, transparent 3px 8px); opacity: .7; }
.pg-way-pic.bridge i:last-child { left: 60%; width: 40%; top: 36px; background: var(--fits-bg); }
.pg-way-pic.exit span { position: absolute; left: 0; top: 8px; width: 60%; display: flex; gap: 4px; }
.pg-way-pic.exit span i { position: static; flex: 1; height: 22px; opacity: calc(1 - var(--n, 0)); }
.pg-way-pic.exit span i:nth-child(2) { opacity: .75; } .pg-way-pic.exit span i:nth-child(3) { opacity: .5; } .pg-way-pic.exit span i:nth-child(4) { opacity: .25; }
.pg-way-pic.exit > i { left: 62%; width: 38%; top: 36px; background: var(--fits-bg); }
.pg-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pg-table th, .pg-table td { text-align: left; padding: 16px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pg-table thead th { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.pg-table thead th:last-child { color: var(--accent-text); }
.pg-table tbody th { font-weight: 600; width: 30%; }
.pg-table td { color: var(--ink-2); }
.pg-table td:last-child { color: var(--ink); }
.pg-faq .faq { border-top: 0; padding-top: 0; }
.pg-end { margin-top: 72px; padding: 64px 24px; border-radius: 20px; background: var(--raised); border: 1px solid var(--line); text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.pg-end h2 { font-size: 36px; font-weight: 700; }
.pg-end p { color: var(--ink-2); font-size: 17px; }

.pg-shot { padding: 8px 0 24px; }
.pg-shot-in { display: grid; grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr); gap: 16px; padding: 20px; border-radius: 20px; background: var(--raised); border: 1px solid var(--line); }
.pg-mdeck { background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.pg-md-h { display: flex; gap: 12px; align-items: center; }
.pg-md-cov { flex: none; width: 56px; height: 56px; border-radius: 8px; background: radial-gradient(circle at 30% 28%, #4a6068, #1b2529 78%); }
.pg-md-h > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pg-md-h .silk { font-size: 10px; letter-spacing: .14em; }
.pg-md-h b { font-size: 15px; }
.pg-md-chips { display: flex; gap: 6px; }
.pg-md-wave { height: 44px; border-radius: 6px; background: repeating-linear-gradient(90deg, #4f5653 0 2px, transparent 2px 5px); position: relative; }
:root[data-room="on"] .pg-md-wave { background: repeating-linear-gradient(90deg, #b9bfb7 0 2px, transparent 2px 5px); }
.pg-md-wave i { position: absolute; left: 0; top: 0; bottom: 0; width: 55%; background: repeating-linear-gradient(90deg, var(--accent-text) 0 2px, transparent 2px 5px); }
.pg-md-pads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pg-md-pads i { height: 28px; border-radius: 6px; border: 1px dashed var(--outline); }
.pg-md-pads i:first-child { background: #c47a1e; border: 0; }
.pg-md-loops { display: flex; gap: 4px; font-size: 11px; color: var(--ink-3); }
.pg-md-loops span { flex: 1; text-align: center; padding: 6px 0; border-radius: 6px; border: 1px solid var(--line-3); }
.pg-mixer { background: var(--raised); border: 1px solid var(--line-2); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; }
.pg-mixer .silk { font-size: 10px; letter-spacing: .14em; }
.pg-mx-knobs { display: flex; gap: 36px; }
.pg-mx-knobs div { display: flex; flex-direction: column; gap: 10px; }
.pg-mx-knobs i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--outline); }
.pg-mx-knobs i.hot { border-color: var(--accent-text); }
.pg-xf { width: 100%; height: 8px; border-radius: 999px; background: var(--page); position: relative; }
.pg-xf i { position: absolute; left: 40%; top: -9px; width: 26px; height: 26px; border-radius: 6px; background: var(--ink); }
.pg-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px 40px; }
.pg-feats h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.pg-feats p { font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.pg-soon { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.pg-soon article { background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.pg-tags { display: flex; gap: 8px; }
.tag { padding: 4px 10px; border-radius: 999px; font-size: 10px; letter-spacing: .12em; border: 1px solid var(--line-3); }
.tag.warn { color: var(--warn); border-color: var(--warn-line); background: var(--warn-bg); }
.pg-soon h3 { font-size: 20px; font-weight: 700; }
.pg-soon p { font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.pg-drop { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px; border: 1px dashed var(--outline); border-radius: 12px; color: var(--ink-3); font-size: 14px; }
.pg-drop svg { width: 18px; height: 18px; }
.pg-split { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.pg-switch { display: inline-flex; gap: 4px; padding: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); font-size: 18px; }
.pg-switch span { padding: 14px 30px; border-radius: 999px; color: var(--ink-2); }
.pg-switch span.on { background: var(--accent-text); color: var(--on-accent); font-weight: 700; }

@media (max-width: 899px) {
  .pg-shot-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .pg-hero { padding: 32px 0; }
  .pg-hero-l > p:not(.silk) { font-size: 16px; }
  .btn.big { min-height: 50px; font-size: 15px; width: 100%; }
  .pg-intro h2, .pg-sec > h2.wide, .pg-end h2 { font-size: 26px; }
  .pg-band-in { padding: 44px 16px; }
  .pg-sec { padding-top: 48px; }
  .pg-table th, .pg-table td { padding: 12px 8px; font-size: 13px; }
}

/* ─────────────────────────── plans, profile, account, auth ───────────────────────────
   Boards 15, 19, 20, 21–22. */

.pl-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 64px 0 40px; }
.pl-hero h1 { font-size: clamp(36px, 4.8vw, 60px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.pl-hero h1 span { color: var(--accent-text); }
.pl-hero p { font-size: 18px; color: var(--ink-2); max-width: 640px; line-height: 1.6; }
/* What Beatomat is, with a way to start it, and the seat above Share (research 11 #9). */
.pl-hero .pl-what { color: var(--ink); }
.pl-hero .pl-what .btn { margin-left: 6px; vertical-align: middle; }
.pl-hero .offer { align-items: center; }
.pl-hero .offer .btn { align-self: center; }
.pl-period { display: flex; align-items: center; gap: 14px; }
.pl-save { padding: 6px 12px; border-radius: 999px; background: var(--fits-bg); color: var(--accent-text); letter-spacing: .12em; }
.pl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; max-width: 920px; margin: 0 auto; }
.pl-card { background: var(--raised); border: 1px solid var(--line-2); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 22px; }
.pl-card.paid { background: var(--surface); border-color: var(--accent-text); }
.pl-head { display: flex; flex-direction: column; gap: 4px; }
.pl-head h2 { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.pl-head h2 .silk { color: var(--accent-text); letter-spacing: .14em; font-size: 10px; }
.pl-amount { font-variation-settings: 'wdth' 112; font-size: 44px; font-weight: 700; line-height: 1.1; }
.pl-amount small { font-size: 16px; font-weight: 500; color: var(--ink-3); }
.pl-note { font-size: 14px; color: var(--ink-3); }
.pl-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pl-card li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.pl-card li.off { color: var(--ink-4); }
.pmark { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; background: var(--fits-bg); color: var(--accent-text); }
li.off .pmark { background: transparent; border: 1px solid var(--line-3); color: var(--ink-4); }
.pl-card .soon { margin-left: auto; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--warn-line); color: var(--warn); background: var(--warn-bg); font-size: 9px; letter-spacing: .12em; }
.pl-current { text-align: center; padding: 14px; border-radius: 999px; border: 1px solid var(--line-3); color: var(--ink-3); font-weight: 600; font-size: 15px; }
.pl-cta { text-align: center; padding: 15px; border-radius: 999px; background: var(--accent); color: var(--on-accent); opacity: .55; font-weight: 700; font-size: 16px; cursor: default; }
.pl-cta-note { text-align: center; font-size: 13px; color: var(--ink-3); margin-top: -12px; }
.pl-faq { max-width: 880px; margin: 0 auto; padding: 64px 0 24px; }
.pl-faq .faq { border-top: 0; }

.pf-head { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; padding: 48px 0 32px; }
.pf-avatar { flex: none; width: 96px; height: 96px; border-radius: 50%; background: var(--avatar); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; }
.pf-who { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; }
.pf-who h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 700; line-height: 1.1; }
.pf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--ink-3); font-size: 15px; }
.pf-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.pf-music { display: flex; flex-direction: column; gap: 20px; padding-bottom: 32px; }
.pf-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--line-2); }
.pf-tabs button { min-height: 48px; padding: 0 16px; font-size: 16px; font-weight: 500; color: var(--ink-3); margin-bottom: -1px; }
.pf-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent-text); }
.pf-tabs button span { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-3); margin-left: 4px; }
.pf-lede { font-size: 15px; color: var(--ink-3); max-width: 620px; }
.kept-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.pf-next { aspect-ratio: 1; border: 1px dashed var(--outline); border-radius: 10px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 18px; color: var(--ink-3); font-size: 13px; }
.pf-next b { color: var(--ink); font-size: 15px; }
.pf-loading { min-height: 60vh; }

.st { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; padding: 40px 0 24px; align-items: start; }
.st-nav { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; }
.st-nav h1 { font-size: 32px; font-weight: 700; margin-bottom: 12px; }
.st-nav a { padding: 10px 12px; border-radius: 8px; color: var(--ink-2); font-size: 15px; }
.st-nav a:hover { background: var(--raised); color: var(--ink); }
.st-body { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.st-sec { gap: 16px; scroll-margin-top: 24px; }
.st-sec h2 { font-size: 20px; font-weight: 700; }
.st-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.st-form { display: flex; flex-direction: column; gap: 6px; }
.st-form label { font-size: 14px; font-weight: 600; margin-top: 10px; }
.st-form input, .st-prefix {
  height: 48px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--page); color: var(--ink);
  padding: 0 14px; font: inherit; font-size: 15px;
}
.st-form input:focus, .st-prefix:focus-within { outline: none; border-color: var(--accent-text); }
.st-prefix { display: flex; align-items: center; gap: 4px; padding: 0 0 0 14px; }
.st-prefix span { color: var(--ink-3); }
.st-prefix input { border: 0; height: 46px; flex: 1; min-width: 0; padding-left: 0; background: transparent; }
.st-hint { font-size: 13px; color: var(--ink-3); }
.st-form .btn { margin-top: 14px; }
/* The Monday email's box at sign-up (WEEKLY_EMAIL only; shell/weekly.js). */
.st-form label.st-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-weight: 400; cursor: pointer; }
.st-form .st-check input { width: 18px; height: 18px; flex: none; margin: 2px 0 0; padding: 0; border-radius: 4px; accent-color: var(--accent-text); }
.st-check > span { display: flex; flex-direction: column; gap: 2px; }
.st-check strong { font-weight: 600; }
.st-check a { color: var(--ink-2); text-decoration: underline; }
.pf-weekly .pf-weekly-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.st-allow { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.st-allow .gauge { height: 4px; max-width: 360px; }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; }
.st-row > span { display: flex; flex-direction: column; gap: 2px; }
.st-row > span > span:not(.st-k) { color: var(--ink-2); }
.st-row strong { font-weight: 700; }
.st-k { font-weight: 600; }
.err { padding: 10px 14px; border-radius: 10px; background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--ink); font-size: 14px; }
.okmsg { padding: 10px 14px; border-radius: 10px; background: var(--fits-bg); color: var(--accent-text); font-size: 14px; }

body.view-auth .hdr, body.view-auth .foot, body.view-auth .tabbar { display: none; }
body.view-auth .app { padding-bottom: 0; }
.au { min-height: 100vh; display: flex; flex-direction: column; }
.au-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.au-back { color: var(--ink-2); font-size: 15px; }
.au-main { flex: 1; display: flex; flex-wrap: wrap; gap: 40px 72px; align-items: center; justify-content: center; padding: 32px 0 64px; }
.au-pitch { flex: 1 1 340px; max-width: 460px; display: flex; flex-direction: column; gap: 18px; }
.au-pitch h1 { font-size: clamp(36px, 4.4vw, 52px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.au-pitch p { font-size: 17px; color: var(--ink-2); line-height: 1.6; }
.au-pitch ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.au-pitch li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.au-pitch li span span { color: var(--ink-2); }
.au-card { flex: 1 1 380px; max-width: 460px; padding: 28px; gap: 18px; }
.au-tabs { display: flex; }
.au-tabs button { flex: 1; }
.au-card .btn.solid { width: 100%; min-height: 50px; }
.au-legal { font-size: 13px; color: var(--ink-3); line-height: 1.6; }
.au-legal a { color: var(--ink-2); text-decoration: underline; }

@media (max-width: 860px) {
  .st { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 24px; }
  .st-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .st-nav h1 { flex-basis: 100%; font-size: 28px; margin-bottom: 4px; }
  .st-nav a { padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; }
}
@media (max-width: 767px) {
  .pl-hero { padding: 32px 0 24px; }
  .pl-hero p { font-size: 15px; }
  .pf-head { padding: 28px 0 20px; }
  .pf-avatar { width: 72px; height: 72px; font-size: 30px; }
  .pf-music .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .au-main { padding-top: 8px; gap: 28px; }
  .au-card { padding: 20px; }
}

/* ─────────────────────────── search, and when something goes wrong ───────────────────────────
   Boards 23 and 24. */

.sr-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; padding: 40px 0 18px; }
.sr-head h1 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; line-height: 1.1; }
.sr-note { font-size: 13px; color: var(--ink-3); }
.sr-status { font-size: 15px; color: var(--ink-3); margin-bottom: 12px; }
.sr-tabs { margin-bottom: 20px; }
.sr-tabs .chip { min-height: 40px; padding: 0 16px; font-size: 14px; }
.sr-tabs .chip[aria-selected="true"] { background: var(--accent-text); color: var(--on-accent); border-color: transparent; font-weight: 700; }
.sr-group { margin-bottom: 24px; }
.sr-group.plain { display: flex; flex-direction: column; gap: 14px; }
.sr-group h2 { font-size: 20px; font-weight: 700; }
.sr-gh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.sr-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-3); }
.sr-legend span { display: inline-flex; align-items: center; gap: 8px; }
.srcdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.srcdot.crate { background: var(--live); }
.srcdot.yt { background: #c8452a; }
.srow .rowart { width: 44px; height: 44px; }
.sr-artists { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sartist { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: var(--raised); border: 1px solid var(--line); }
.sartist:hover { border-color: var(--outline); }
.sartist-av { flex: none; width: 56px; height: 56px; border-radius: 50%; background-size: cover; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 20px; }
.sartist-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sartist-t b { font-size: 16px; }
.sartist-t span { font-size: 13px; color: var(--ink-3); }
.sartist-t em { font-style: normal; font-size: 13px; color: var(--accent-text); font-weight: 600; }
/* The YouTube artist card is a button (it starts a set); it wears the link card's face. */
button.sartist { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.sartist:disabled { cursor: progress; opacity: .75; }
.sartist.yt .sartist-av { box-shadow: 0 0 0 2px #c8452a; }
.smix { display: flex; flex-direction: column; gap: 3px; color: var(--ink); }
.smix-cover { display: block; aspect-ratio: 1; border-radius: 3px; overflow: hidden; margin-bottom: 7px; background: var(--surface); }
.smix-cover svg { display: block; width: 100%; height: 100%; }
.sr-state { padding: 32px; border-radius: 16px; background: var(--raised); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.sr-state.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.sr-state h2 { font-size: 22px; font-weight: 700; }
.sr-state p { font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.sr-state a:not(.btn) { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sr-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.sr-acts .btn svg { width: 13px; height: 13px; fill: currentColor; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 92px; z-index: 9; max-width: min(560px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line-3); box-shadow: var(--shadow); font-size: 14px;
}
.toast svg { width: 18px; height: 18px; flex: none; color: var(--warn); }
body:not(.has-bar) .toast { bottom: 24px; }
.offline { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px; background: var(--warn-bg); border-bottom: 1px solid var(--warn-line); font-size: 13px; }
.offline .dot { background: var(--warn); }
.offline span span { color: var(--ink-2); }
/* Continue where you left off (shell/resume.js): a band under the header, in the
   page's flow so it pushes the page down rather than covering a control. */
.resume { padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--raised); }
.resume[hidden] { display: none; }
.resume-in { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 8px; }
.resume-go { flex: 1; min-width: 0; min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--fits-bg); color: var(--ink); text-align: left; }
.resume-go:hover { filter: brightness(1.08); }
.resume-play { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.resume-txt { min-width: 0; font-size: 15px; line-height: 1.3; overflow: hidden; }
.resume-txt b { font-weight: 700; }
.resume-what { font-weight: 600; color: var(--accent-text); }
.resume-txt small { display: block; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resume-x { flex: none; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-3); font-size: 22px; line-height: 1; }
.resume-x:hover { color: var(--ink); background: var(--surface); }
/* /resume */
.sheet {
  position: fixed; right: clamp(16px, 4vw, 40px); top: 140px; z-index: 9; width: min(360px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line-3); box-shadow: var(--shadow);
}
.sheet strong { font-size: 17px; }
.sheet span { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.sheet-acts { display: flex; gap: 8px; margin-top: 6px; }
.sheet .banner-x { position: absolute; right: 8px; top: 8px; }
.dk-why { display: flex; gap: 8px; align-items: baseline; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.dk-why i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); transform: translateY(-1px); }
.nf { padding: 96px 0 72px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.nf .silk { letter-spacing: .16em; color: var(--accent-text); }
.nf h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 700; line-height: 1.05; }
.nf p { font-size: 17px; color: var(--ink-2); max-width: 520px; }
.nf .btn svg { width: 14px; height: 14px; fill: currentColor; }
@media (max-width: 767px) {
  .toast { bottom: calc(136px + env(safe-area-inset-bottom)); }
  body:not(.has-bar) .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .sheet { top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); right: 16px; }
  .sr-head { padding-top: 24px; }
}

/* ─────────────────────────── shared pieces: notes, the credits panel, skeleton rows ─────────────────────────── */


.note { margin: 20px 0 0; max-width: 720px; font-size: 14px; color: var(--ink-3); }

/* ───────────────────── the credits panel ─────────────────────
   It slides in over the deck rather than appending to the bottom of the page,
   which is what it used to do: press the button, nothing appears to happen,
   and the obligation is technically met and practically invisible. */

.scrim {
  position: fixed; inset: 0; z-index: 20;
  background: color-mix(in srgb, #000 38%, transparent);
}
.creditpanel {
  position: fixed; z-index: 21;
  top: 0; right: 0; bottom: 0; width: min(400px, 100%);
  background: var(--surface);
  border-left: 1px solid var(--line);
  padding: 22px 24px calc(24px + 88px);
  overflow: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.creditpanel-head { display: flex; align-items: center; gap: 12px; }
.creditpanel-head h2 { font-size: 20px; }
.creditpanel-head button {
  margin-left: auto; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--ink-2); font-size: 17px; line-height: 1;
}
.creditpanel-head button:hover { color: var(--ink); border-color: var(--ink-2); }
.creditpanel .hint { font-size: 13px; color: var(--ink-2); }
.creditpanel-list { display: grid; gap: 2px; }
.creditpanel-list .c {
  display: grid; gap: 2px;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.creditpanel-list .c b { font-size: 14.5px; font-weight: 600; }
.creditpanel-list .c .t { font-size: 13px; color: var(--ink-2); }
.creditpanel-list .c a {
  font-size: 12.5px; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px; justify-self: start;
}

@media (max-width: 760px) {
  /* A bottom sheet on a phone: a 400px drawer on a 390px screen is just a
     second page with a shadow. */
  .creditpanel {
    top: auto; left: 0; width: 100%; max-height: 72vh;
    border-left: 0; border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    padding-bottom: calc(24px + 88px + env(safe-area-inset-bottom));
  }
}


/* ───────────────────── search results ───────────────────── */

.results { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.results li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px;
  align-items: center; border-top: 1px solid var(--line);
}
.results button { width: 100%; text-align: left; padding: 11px 0; }
.results button:hover .t { color: var(--accent); }
.results .t { display: block; font-size: 14.5px; }
.results .why { display: block; font-size: 12.5px; color: var(--ink-2); }
.results .len { color: var(--ink-2); }

/* The picture on a row you are choosing from. A background rather than an
   <img> — see cover.js: a layer that fails simply does not paint, and this
   record's own drawn cover is already underneath it, so a row is never a hole.
   Square, because every cover in this app is square; a 16:9 YouTube thumbnail
   is cropped to its middle, and that is the accepted cost. */
/* Scoped to the row's own text button and the builder's row body — NOT to
   `.results button`, which also catches the round Add control and the reorder
   arrows, whose glyphs are centred by text-align and slide to the left edge
   the moment a stray `display: flex` reaches them. */
.results .row, .results li > div { display: flex; align-items: center; gap: 12px; }
.results li > div { padding: 11px 0; }
.rowart {
  flex: none; width: 48px; height: 48px; border-radius: 6px;
  background-color: var(--line); background-size: cover; background-position: center;
}
/* min-width: 0 is what lets a long YouTube title be cut instead of pushing the
   Add button off the end of the row. */
.lines { min-width: 0; flex: 1; }
.results .t, .results .why {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The wait, drawn: rows in the geometry of the answers, so the page commits to
   an answer and shows where it will land. CSS only — nothing runs per frame
   for a wait that is usually under a second. */
.skeleton .rowart, .skeleton .bar {
  background-color: var(--line);
  animation: skelpulse 1.4s ease-in-out infinite;
}
.skeleton .bar { display: block; height: 10px; border-radius: 3px; }
.skeleton .bar.t { width: 58%; margin-bottom: 8px; }
.skeleton .bar.why { width: 32%; height: 9px; }
@keyframes skelpulse { 0%, 100% { opacity: .3; } 50% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton .rowart, .skeleton .bar { animation: none; opacity: .45; }
}

/* ── opening a cold deck: "What opens the set?" (board 12) ── */
.opening {
  background: var(--raised); border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: 28px;
}
.opening-h { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.opening-h h1 { font-variation-settings: 'wdth' 106; font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.opening-h p { font-size: 17px; color: var(--ink-2); }
.opening-search {
  display: flex; align-items: center; gap: 12px; max-width: 720px; height: 56px; padding: 0 20px;
  background: var(--page); border: 1px solid var(--outline); border-radius: 999px; cursor: text;
}
.opening-search svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; stroke-width: 1.8; }
.opening-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--ink); font: inherit; font-size: 16px; }
.opening-search input::placeholder { color: var(--ink-3); }
.opening .searching { margin: -14px 0 0; font-size: 14px; color: var(--ink-3); }
.opening .found { display: flex; flex-direction: column; gap: 6px; margin-top: -14px; max-width: 720px; }
.opening .found .result {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 12px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2);
}
.opening .found .result:hover { border-color: var(--outline); }
.opening .found .result b { font-weight: 600; font-size: 15px; }
.opening .found .result span { font-size: 13px; color: var(--ink-3); }
.orow { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.orow-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.orow-h h2 { font-size: 20px; font-weight: 700; }
.orow-h span { font-size: 14px; color: var(--ink-3); }
.orow-h .shuffle { margin-left: auto; color: var(--accent-text); font-size: 14px; font-weight: 600; padding: 6px 0; }
.orow-cards { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.ocard { flex: none; width: 168px; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
.ocard img, .ocard .oimg { width: 168px; height: 168px; border-radius: 12px; display: block; object-fit: cover; background: var(--surface); }
.ocard:hover img { filter: brightness(1.08); }
.ocard .ot { font-weight: 600; font-size: 15px; line-height: 1.3; }
.ocard .os { font-size: 13px; color: var(--ink-3); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ocard.skeleton .line { display: block; height: 10px; border-radius: 3px; background: var(--line-2); width: 70%; }
.ocard.skeleton .line.short { width: 45%; }
.ocard.skeleton .oimg, .ocard.skeleton .line { animation: skelpulse 1.4s ease-in-out infinite; }
.moresounds summary { cursor: pointer; color: var(--ink-2); font-weight: 600; font-size: 15px; list-style: none; }
.moresounds summary::-webkit-details-marker { display: none; }
.moresounds summary::after { content: ' +'; color: var(--accent-text); font-family: 'JetBrains Mono', monospace; }
.moresounds[open] summary::after { content: ' −'; }
.moresounds .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.opening-f { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; border-top: 1px solid var(--line-2); padding-top: 20px; }
/* Just play: the first way in, and the biggest thing on the panel. */
.opening .justplay { align-self: flex-start; min-height: 64px; padding: 0 34px; font-size: 19px; gap: 12px; }
@media (max-width: 760px) {
  .opening { border-radius: 16px; padding: 22px 16px; gap: 22px; }
  .opening-h h1 { font-size: 30px; }
  .opening .justplay { align-self: stretch; min-height: 60px; font-size: 18px; padding: 0 20px; }
  .ocard, .ocard img, .ocard .oimg { width: 140px; }
  .ocard img, .ocard .oimg { height: 140px; }
}

/* Credits, Privacy, Terms (legal.js): one reading column, the product pages' type. */
.legal { max-width: 760px; margin: 0 auto; padding: 40px 0 80px; display: flex; flex-direction: column; gap: 40px; }
.legal-nav { display: flex; gap: 6px; }
.legal-nav a, .legal-nav span { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-3); border: 1px solid var(--line-2); }
.legal-nav a:hover { color: var(--ink); border-color: var(--outline); }
.legal-nav span[aria-current] { background: var(--fits-bg); color: var(--accent-text); border-color: transparent; }
.legal-head { display: flex; flex-direction: column; gap: 14px; }
.legal-head .silk { font-size: 12px; letter-spacing: .16em; }
.legal-head h1 { font-variation-settings: 'wdth' 106; font-size: clamp(36px, 5vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.legal-lede { font-size: 19px; line-height: 1.6; color: var(--ink-2); }
.legal-meta { font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.legal-sec { display: flex; flex-direction: column; gap: 12px; padding-top: 28px; border-top: 1px solid var(--line); }
.legal-sec h2 { font-variation-settings: 'wdth' 106; font-size: 24px; font-weight: 700; line-height: 1.2; }
.legal-sec p, .legal-sec li { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.legal-sec b { color: var(--ink); font-weight: 600; }
.legal-sec ul { display: flex; flex-direction: column; gap: 12px; padding-left: 20px; list-style: disc; }
.legal-sec li::marker { color: var(--ink-4); }
.legal-sec a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.legal-lic { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.legal-lic > div { background: var(--raised); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.legal-lic h3 { font-size: 16px; font-weight: 700; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.legal-lic h3 .silk { font-size: 11px; letter-spacing: .12em; color: var(--ink-4); }
.legal-lic p { font-size: 14px; }
@media (max-width: 760px) {
  .legal { padding-top: 24px; gap: 32px; }
  .legal-lede { font-size: 17px; }
}

/* The launch offer (shell/offer.js): one block on /plans, the profile and settings. */
.offer { display: flex; flex-direction: column; gap: 10px; }
.offer .btn { align-self: stretch; text-align: center; justify-content: center; }
.offer-seats { font-size: 13px; color: var(--ink-2); text-align: center; font-weight: 600; }
.offer-hint { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.offer.is-on strong { color: var(--accent-text); }
.offer a:not(.btn) { color: var(--accent-text); }
.offer-title { font-size: 16px; line-height: 1.35; }
.offer-points { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.pf-offer { max-width: 560px; margin: 0 0 28px; padding: 18px; border: 1px solid var(--line-2); border-radius: 14px; }
.pf-offer .btn { align-self: flex-start; }
.pf-offer .offer-seats { text-align: left; }
.menu-offer { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.menu-seats { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.fxrow button.locked { color: var(--ink-4); }
.fxlock[hidden] { display: none; }
.fxlock { display: inline-flex; margin-left: 4px; }
.fx-lock a { color: var(--accent-text); white-space: nowrap; }
.deckallow[hidden], #deckAllow[hidden] { display: none; }

/* The founding-member line under the home hero, and the promise beside the button. */
.offer-line { display: inline-block; margin-top: 14px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-3); color: var(--accent-text); font-size: 14px; font-weight: 600; text-decoration: none; }
.offer-line:hover { border-color: var(--accent-text); }
.offer-line.closed { color: var(--ink-3); }
.pl-share { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 14px; }
.pl-share-note { font-size: 13px; color: var(--ink-3); }

/* ───────────────────────── feedback asks ─────────────────────────
   public/js/feedback.js. A card above the player bar, never over a control
   in the page's own flow; the seam thumb sits under the line beneath the
   countdown. */
.cp-seam { margin: 0; min-height: 0; }
.seamask {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2);
  background: none; color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer;
}
.seamask:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-2); }
.seamask:disabled { cursor: default; opacity: .75; }
#askSlot:empty { display: none; }
#askSlot {
  position: fixed; right: 16px; bottom: calc(76px + 16px); z-index: 8;
  width: min(360px, calc(100vw - 32px));
}
.askcard {
  position: relative; padding: 16px 40px 16px 16px; border-radius: 12px;
  background: var(--raised); border: 1px solid var(--line-2); color: var(--ink);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}
.ask-q { margin: 0 0 12px; font-size: 15px; line-height: 1.4; font-weight: 600; }
.askcard.thanks .ask-q { margin: 0; }
.ask-as { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-a {
  padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; text-decoration: none;
}
.ask-a:hover { border-color: var(--ink-2); }
.ask-x {
  position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: none; color: var(--ink-2); font-size: 20px; line-height: 1; cursor: pointer;
}
.ask-x:hover { color: var(--ink); background: var(--surface); }
.ask-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-2); }
@media (max-width: 767px) {
  #askSlot { left: 16px; right: 16px; width: auto; bottom: calc(var(--tabbar-h, 60px) + 76px + env(safe-area-inset-bottom) + 12px); }
}


/* The narrowest phones (320-379px): the wordmark, Plans, search, the room
   switch and Sign in must share one line, so each gives a little. The tap
   targets stay at least 40px. */
@media (max-width: 379px) {
  .hdr-in { gap: 6px; }
  .hdr .mark { font-size: 18px; }
  .hdr .mark .ring { width: 12px; height: 12px; border-width: 2px; }
  .hnav a { padding: 12px 6px; }
  .hsearch-open, .hdr .roomsw { width: 40px; height: 40px; }
  .hlink { padding: 12px 4px 12px 6px; }
}


/* ─────────────────────────── the sound hint ───────────────────────────
   shell/sound-guard.js: the phone has taken the sound away (lock screen, a call,
   the silent switch). One calm line at the top, clear of the bar, the dock and the
   toasts at the bottom; the whole line is the tap that brings the sound back. */
.soundhint {
  position: fixed; z-index: 22; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top) + 10px);
  max-width: min(520px, calc(100vw - 32px)); min-height: 44px;
  padding: 10px 16px; border-radius: 12px;
  background: var(--warn-bg); color: var(--ink); border: 1px solid var(--warn-line);
  font: 500 14px/1.35 inherit; font-family: inherit; text-align: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35); cursor: pointer;
}
.soundhint[hidden] { display: none; }

/* ------------------------------------------------------------------ /deck v3 */
/* Approved by Andi 09.11 ("v3 e ok, mergem cu el"): today's /deck in the home's
   style, same structure, same cards, same places (docs/design/deck-review/v3,
   README + refine.css). Lifted from refine.css as it was injected for the "after"
   screenshots: last in the file, so it overrides exactly as it did there. The one
   structural change, the "?" in the set bar, is markup in deck-view.js. The
   countdown stays at 52px (Andi). */
/* 1. Air: the home's 40px gutter and 20px between blocks (today 32 / 16). */
#viewDeck { padding-left: clamp(16px, 3vw, 40px); padding-right: clamp(16px, 3vw, 40px); }
#viewDeck > * + * { margin-top: 20px; }
.decktools { padding-top: 22px; gap: 12px 24px; }

/* 2. One accent for "on": the home's solid green (--accent), not the lighter text green. */
.modesw button[aria-pressed="true"],
.roomplay.running,
.dk-play.running,
.loops button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.modesw { background: none; border-color: var(--line-2); padding: 3px; }
.modesw button { font-weight: 600; color: var(--ink-3); }

/* 3. The set name reads as a title; the facts after it in the home's mono. */
.setinfo .setname { font-size: 17px; font-weight: 700; color: var(--ink); font-variation-settings: 'wdth' 112; letter-spacing: -.01em; margin-right: 6px; }
.setinfo .setclock, .setinfo .setmeta { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-4); }
.decktools .newset { min-height: 40px; border-color: var(--outline); font-weight: 600; }

/* The first fact after the vote needs no leading dot. */
.setinfo .deckmixvote:not([hidden]) + .setclock::before { content: ''; }

/* 4. Cards: one family. Same surface, one hairline, 18px corners (the home's phone card is 14, sleeves 3). */
.dk, .cpanel, .panel, .setstrip, .zoom, .tour { border-radius: 18px; border-color: var(--line); }
.dk { padding: 22px; gap: 16px; }
.cpanel { padding: 24px 22px; }
.panel { padding: 24px; }

/* 5. The set strip: quieter blocks, sleeve-like corners, labels in the home's silk. */
.setstrip { padding: 16px 20px 12px; }
.timeline .blk { border-radius: 4px; }
.timeline .blk.later { background: var(--line); }
.tl-labels { font-size: 10.5px; letter-spacing: .12em; color: var(--ink-4); }

/* 6. Inside a deck: a clearer order — the title first, the state above it as a small kicker. */
.dk-cover { border-radius: 4px; box-shadow: var(--sleeve-shadow); }
.dk-state { font-size: 10.5px; letter-spacing: .12em; color: var(--ink-4); }
.dk-state.on { color: var(--accent-text); }
.dk-title { font-size: 19px; font-weight: 700; font-variation-settings: 'wdth' 112; letter-spacing: -.01em; }
.dk-artist { font-size: 14.5px; }
/* BPM and key: printed facts, not buttons — mono, no fill, one hairline. FITS keeps its green. */
.chipn { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .02em; background: none; box-shadow: inset 0 0 0 1px var(--line-2); padding: 3px 9px; }
.chipn.fits { background: var(--fits-bg); box-shadow: none; }
.dk-times { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--ink-4); }
.dk-facts { font-size: 12.5px; color: var(--ink-4); }

/* 7. The centre: the countdown keeps today's size (52px, 44px on a phone: Andi, "minutele nu vreau
   să fie mai mari ca acum"; refine.css set 52px everywhere, which grew the phone's) — heavier and wide
   like the home's headings, figures that don't jump. */
.cp-count b { font-weight: 800; font-variation-settings: 'wdth' 118; letter-spacing: -.03em; font-feature-settings: 'tnum'; }
.cp-count span { font-size: 15px; font-weight: 600; color: var(--ink); }
.cp-why { font-size: 14.5px; color: var(--ink-2); }
.cp-next { font-size: 12.5px; color: var(--ink-4); }

/* 8. Under the decks: headings the size of the home's sections, rows as hairlines instead of boxes. */
.ph h2 { font-size: 24px; font-weight: 800; font-variation-settings: 'wdth' 118; letter-spacing: -.02em; line-height: 1.15; }
.ph .sub { font-size: 13.5px; margin-top: 4px; }
#upRows.crows { gap: 0; }
#upRows .crow { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 12px 2px; }
#upRows .crow:first-child { border-top: 0; }
.crow .rowart, .krow .rowart { border-radius: 3px; width: 44px; height: 44px; }
.cl .t { font-size: 15px; }
.follow .fl { font-size: 18px; font-weight: 700; font-variation-settings: 'wdth' 112; letter-spacing: -.01em; line-height: 1.35; }
.follow .fd { color: var(--ink-3); }

/* 9. Decks controls: the same buttons, one radius family and one hairline. */
.dk-tr button { border-radius: 12px; border-color: var(--line-2); }
.loops button, .jumps button { border-radius: 10px; border-color: var(--line-2); }
.pads button { border-radius: 10px; border-color: var(--line-2); }
.dk-grp > .silk, .dk-pitch > .silk { color: var(--ink-4); }

/* 10. The "?" in the set bar (the one structural change): a 40px round button beside the light switch. */
.tools-r .legend { margin: 0; position: relative; }
.tools-r .legend-btn { width: 40px; height: 40px; padding: 0; justify-content: center; border-color: var(--line-2); }
.tools-r .legend-btn .legend-offer { display: none; }
.tools-r .legend-q { background: none; width: auto; height: auto; font-size: 15px; font-weight: 800; }
.tools-r .legend-list { position: absolute; right: 0; top: 48px; width: 380px; z-index: 30; box-shadow: var(--shadow); }

/* /deck on a phone, AI DJ (HQ, 09.11, from Andi's Android capture): deck A, then the
   countdown with play / next, then deck B, then Coming up (folded to four rows,
   queue-view.js UP_FOLD) and Following. Before, Coming up sat between A and B and
   pushed the countdown, the one thing people look for ("when does it change?"),
   screens down. Decks keeps its order: A, Coming up (where Play next is chosen),
   the mixer, B. Same cards, only their order; the countdown keeps its 44px. */
@media (max-width: 760px) {
  #viewDeck:not(.manual) #dkA { order: 1; }
  #viewDeck:not(.manual) #cpanel { order: 2; }
  #viewDeck:not(.manual) #dkB { order: 3; }
  #viewDeck:not(.manual) #comingSlot { order: 4; }
}