/* ═══════════════════════════════════════════════════════════════
   RELEASES HUB — CD's design (2026-06-01 handoff)

   Ported from CD's Release Handoff bundle (Releases.html + cc-base
   tokens + cc-panels `.check` component). Every selector here is
   scoped under #releaseshub so it can't collide with the rest of
   the app.

   Tokens we already have in dashboard.css get re-used by reference.
   Tokens that didn't exist before are added inside #releaseshub
   only — they don't bleed onto other pages.
   ═══════════════════════════════════════════════════════════════ */

#releaseshub {
  /* All `--rh-*` tokens are thin aliases over the canonical AC brand
     tokens in /css/tokens.css. CD's standalone palette (warm beige
     #efe6dc, bright crimson #C8203B) was too literal — it clashed
     with the cool-gray #efefee canvas + deeper #8B1A2B AC crimson
     used everywhere else. By aliasing here we keep CD's layout +
     structure but rebrand to AC at the token layer; every selector
     below already references --rh-*, so no rules need to change. */
  --rh-canvas:        var(--ac-color-bg);
  --rh-paper:         var(--ac-color-paper);
  --rh-paper-2:       var(--ac-color-nested);
  --rh-warm:          var(--ac-color-warm);
  --rh-warm-2:        var(--ac-color-warm-shadow);
  --rh-line:          var(--ac-color-line-strong);
  --rh-line-2:        var(--ac-color-line);
  --rh-line-strong:   var(--ac-color-line-strong);
  --rh-ink:           var(--ac-color-ink);
  --rh-ink-2:         var(--ac-color-body);
  --rh-ink-3:         var(--ac-color-t2);
  --rh-ink-4:         var(--ac-color-t3);
  --rh-ink-5:         var(--ac-color-muted);
  --rh-crimson:       var(--ac-color-accent);
  --rh-crimson-deep:  var(--ac-color-accent-hi);
  --rh-crimson-soft:  var(--ac-color-accent-chip);
  --rh-amber:         var(--ac-color-warning-ink);
  --rh-amber-bg:      var(--ac-color-warning-bg);
  --rh-green:         var(--ac-color-success-ink);
  --rh-green-bg:      var(--ac-color-success-bg);
  --rh-radius:        var(--ac-radius-md);   /* 12px */
  --rh-radius-lg:     var(--ac-radius-xl);   /* 20px */
  --rh-radius-xl:     var(--ac-radius-3xl);  /* 28px */
  --rh-shadow-card:   var(--ac-shadow-card);
  --rh-shadow-pop:    var(--ac-shadow-md);
  --rh-font-display:  var(--ac-font-display);
  --rh-font-body:     var(--ac-font-body);
  --rh-font-mono:     var(--ac-font-mono);

  background: var(--rh-canvas);
  /* Match Marketing / Dashboard shell padding so the Releases tab
     doesn't visually jump narrower when you switch tabs. Marketing
     (#releases .page) is 28px 40px 48px with max-width 1680px. */
  padding: 28px 40px 48px;
  min-height: calc(100vh - 120px);
}

#releaseshub .rl { max-width: 1680px; margin: 0 auto; }

/* ─── TOOLBAR — sits below the featured hero, holds + New release.
   Mirrors `.section__head` spacing from Marketing so the rhythm down
   the page reads the same on both tabs. */
#releaseshub .rl-toolbar {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; margin-top: 18px;
}
#releaseshub .rl-new {
  font-family: var(--rh-font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 20px;
  border-radius: var(--ac-radius-pill); background: var(--rh-crimson); color: #fff;
  border: 0; cursor: pointer; display: inline-flex; align-items: center;
  gap: 9px; box-shadow: var(--ac-shadow-accent);
  transition: background 120ms;
}
#releaseshub .rl-new:hover { background: var(--rh-crimson-deep); }
#releaseshub .rl-new svg { width: 15px; height: 15px; }

/* ─── FEATURED (lead in-cycle release) ───────────────────────────
   Dimensions mirror the Marketing tab's `.hero` block so toggling
   between Marketing and Releases doesn't feel inconsistent.
   Reference: #releases .hero in dashboard.css line ~11326. */
#releaseshub .rl-feat {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--rh-radius-xl); margin-top: 0; color: #fff;
  box-shadow: 0 20px 50px -30px rgba(20,15,10,0.4);
  text-decoration: none; display: block;
}
#releaseshub .rl-feat[hidden] { display: none; }
#releaseshub .rl-feat__bg {
  position: absolute; inset: -60px; z-index: -2;
  /* AC-branded fallback when no artwork URL — deep crimson tones
     instead of CD's blue/purple mock. Real release artwork URL,
     when set, replaces this via inline style from the wiring. */
  background: linear-gradient(160deg, #5a1018 0%, #3a0a13 35%, #1f0508 68%, #0e0c0b 100%);
  filter: blur(50px) saturate(1.2); transform: scale(1.15);
}
#releaseshub .rl-feat__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, rgba(14,12,11,0.82) 0%, rgba(20,14,12,0.7) 52%, rgba(40,20,18,0.55) 100%);
}
#releaseshub .rl-feat__inner {
  display: grid; grid-template-columns: 180px minmax(0,1fr) auto;
  gap: 32px; align-items: center; padding: 28px 32px;
}
#releaseshub .rl-feat__art {
  width: 180px; height: 180px; border-radius: 14px;
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #5a1018 0%, #3a0a13 35%, #1f0508 70%, #0e0c0b 100%);
  background-size: cover; background-position: center;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08) inset;
}
/* Stripe overlay killed per Ryan's 2026-06-02 review — it obscured
   real artwork and looked like a placeholder treatment. */
#releaseshub .rl-feat__art::before { display: none; }
/* .mk text overlay on the cover removed 2026-06-02 — artwork now
   stands alone in the featured hero. */
#releaseshub .rl-feat__eyebrow {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--rh-font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.72); margin-bottom: 12px;
}
#releaseshub .rl-feat__eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ff5a6e;
  box-shadow: 0 0 0 4px rgba(255,90,110,0.2);
  animation: rh-pulse 2s infinite;
}
@keyframes rh-pulse { 50% { box-shadow: 0 0 0 7px rgba(255,90,110,0.06); } }
#releaseshub .rl-feat__title {
  font-family: var(--rh-font-display); font-size: 44px; line-height: 0.95;
  letter-spacing: -0.02em; margin: 0; color: #fff;
}
#releaseshub .rl-feat__title em {
  font-style: italic; font-family: 'Inter', serif; font-weight: 400;
  color: rgba(255,255,255,0.6);
}
#releaseshub .rl-feat__meta {
  display: flex; gap: 16px; align-items: center; margin-top: 12px;
  font-family: var(--rh-font-mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.66); flex-wrap: wrap;
}
#releaseshub .rl-feat__meta .sep { width: 1px; height: 11px; background: rgba(255,255,255,0.2); }
#releaseshub .rl-feat__prog {
  display: flex; gap: 26px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.14); flex-wrap: wrap;
}
#releaseshub .rl-feat__stat .l {
  font-family: var(--rh-font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
#releaseshub .rl-feat__stat .v {
  font-family: var(--rh-font-display); font-size: 22px;
  letter-spacing: -0.02em; line-height: 1; margin-top: 5px;
}
#releaseshub .rl-feat__stat .v.up { color: #8bdca0; }
#releaseshub .rl-feat__side {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 18px; min-width: 220px;
}
#releaseshub .rl-feat__count { text-align: right; }
#releaseshub .rl-feat__count .num {
  font-family: var(--rh-font-display); font-size: 68px;
  line-height: 0.85; letter-spacing: -0.04em;
}
#releaseshub .rl-feat__count .lbl {
  font-family: var(--rh-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin-top: 6px;
}
#releaseshub .rl-feat__open {
  font-family: var(--rh-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 11px 20px; border-radius: 999px; background: #fff;
  color: var(--rh-ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 120ms;
}
#releaseshub .rl-feat__open:hover { background: rgba(255,255,255,0.86); }

/* ─── WORKSPACE: release prep + smart links ─── */
#releaseshub .rl-work {
  display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr);
  gap: 18px; margin-top: 14px; align-items: start;
}
#releaseshub .wk {
  background: var(--rh-paper); border: 1px solid var(--rh-line-2);
  border-radius: var(--rh-radius-lg); box-shadow: var(--rh-shadow-card);
  overflow: hidden;
}
#releaseshub .wk__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; padding: 16px 18px 13px; border-bottom: 1px solid var(--rh-line-2);
}
#releaseshub .wk__eyebrow {
  font-family: var(--rh-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--rh-ink-4);
}
#releaseshub .wk__title {
  font-family: var(--rh-font-display); font-size: 19px;
  letter-spacing: -0.01em; margin: 6px 0 3px;
}
#releaseshub .wk__sub { font-size: 12px; color: var(--rh-ink-3); line-height: 1.4; }
#releaseshub .wk__count {
  font-family: var(--rh-font-mono); font-size: 11px; font-weight: 700;
  color: var(--rh-ink-2); letter-spacing: 0.04em; white-space: nowrap;
}
#releaseshub .wk__body { padding: 6px 18px 16px; }
#releaseshub .wk__empty {
  padding: 32px 12px; text-align: center; color: var(--rh-ink-4);
  font-family: var(--rh-font-mono); font-size: 11px; letter-spacing: 0.04em;
}

/* release prep — grouped by release */
#releaseshub .prep-group {
  padding: 11px 0; border-bottom: 1px solid var(--rh-line-2);
}
#releaseshub .prep-group:last-of-type { border-bottom: 0; }
#releaseshub .prep-group__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 3px;
}
#releaseshub .prep-group__name {
  font-size: 13px; font-weight: 700; color: var(--rh-ink);
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
#releaseshub .prep-group__name .tp {
  font-family: var(--rh-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--rh-ink-4);
  background: var(--rh-warm); padding: 2px 7px; border-radius: 999px;
}
#releaseshub .prep-group__day {
  font-family: var(--rh-font-mono); font-size: 10px; color: var(--rh-ink-4);
  letter-spacing: 0.03em; white-space: nowrap;
}
#releaseshub .prep-add {
  width: 100%; border: 1px dashed var(--rh-line-strong); background: transparent;
  padding: 9px; border-radius: 9px; font-family: var(--rh-font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rh-ink-4); cursor: pointer;
  margin-top: 12px; transition: all 120ms;
}
#releaseshub .prep-add:hover { border-color: var(--rh-ink); color: var(--rh-ink); }

/* `.check` row — from cc-panels.css, scoped */
#releaseshub .check {
  display: grid; grid-template-columns: 18px minmax(0,1fr) auto auto;
  align-items: center; gap: 11px; padding: 9px 2px;
  border-bottom: 1px dashed var(--rh-line-2);
}
#releaseshub .check:last-child { border-bottom: 0; }
#releaseshub .check__box {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--rh-line-strong);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; transition: all 120ms;
}
#releaseshub .check__box svg { width: 11px; height: 11px; color: #fff; opacity: 0; }
#releaseshub .check.done .check__box { background: var(--rh-green); border-color: var(--rh-green); }
#releaseshub .check.done .check__box svg { opacity: 1; }
#releaseshub .check__task { font-size: 13px; color: var(--rh-ink-2); min-width: 0; }
#releaseshub .check.done .check__task {
  color: var(--rh-ink-4); text-decoration: line-through;
  text-decoration-color: var(--rh-ink-5);
}
#releaseshub .check__assignee {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--rh-font-mono); font-size: 10px; font-weight: 700;
  color: var(--rh-ink-2); background: var(--rh-paper);
  border: 1px solid var(--rh-line-2); border-radius: 999px;
  padding: 3px 9px 3px 4px; cursor: pointer; white-space: nowrap;
}
#releaseshub .check__assignee.unassigned {
  color: var(--rh-ink-4); border-style: dashed; padding: 3px 9px;
}
#releaseshub .check__assignee.unassigned .av { display: none; }
#releaseshub .av {
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; color: #fff; font-weight: 700; flex-shrink: 0;
}
#releaseshub .av.a-1 { background: #c8503a; }
#releaseshub .av.a-2 { background: #7c3aed; }
#releaseshub .av.a-3 { background: #2a9d8f; }
#releaseshub .av.a-4 { background: #1f5fa8; }
#releaseshub .av.a-5 { background: #d97706; }
#releaseshub .check__date {
  font-family: var(--rh-font-mono); font-size: 10px;
  color: var(--rh-ink-4); letter-spacing: 0.04em;
  min-width: 48px; text-align: right;
}
#releaseshub .check.warn .check__date { color: var(--rh-amber); font-weight: 700; }
#releaseshub .check.overdue .check__date { color: var(--rh-crimson); font-weight: 700; }

/* smart links list — collapsible per-release drilldown */
#releaseshub .slx-row {
  border: 1px solid var(--rh-line-2); border-radius: 14px;
  overflow: hidden; margin-bottom: 10px;
}
#releaseshub .slx-row:last-child { margin-bottom: 0; }
/* ─── HEAD — always visible. Single row: art + name/meta + Copy Link
   button + chevron. Everything else (URL preview, stats, DSP bars)
   lives in the expanded body. The Copy Link button is exposed so
   users can grab the URL without expanding. */
#releaseshub .slx-head {
  display: grid; grid-template-columns: 44px minmax(0,1fr) auto auto;
  gap: 13px; align-items: center; padding: 11px 13px;
  cursor: pointer; transition: background 120ms;
}
#releaseshub .slx-head:hover { background: var(--rh-warm); }
#releaseshub .slx-row.is-open .slx-head {
  border-bottom: 1px solid var(--rh-line-2); background: var(--rh-paper-2);
}
#releaseshub .slx-head__name { min-width: 0; }
#releaseshub .slx-art {
  width: 44px; height: 44px; border-radius: 8px;
  position: relative; overflow: hidden;
  background-size: cover; background-position: center;
}
#releaseshub .slx-art::before { display: none; }
#releaseshub .slx-name {
  font-size: 14px; font-weight: 700; color: var(--rh-ink);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; line-height: 1.1;
}
#releaseshub .slx-meta {
  font-family: var(--rh-font-mono); font-size: 10.5px;
  color: var(--rh-ink-4); margin-top: 3px; letter-spacing: 0.03em;
}
#releaseshub .slx-chev {
  width: 28px; height: 28px; border-radius: 50%; background: var(--rh-warm);
  display: flex; align-items: center; justify-content: center;
  color: var(--rh-ink-3); transition: transform 200ms, background 200ms;
}
#releaseshub .slx-chev svg { width: 14px; height: 14px; }
#releaseshub .slx-row.is-open .slx-chev {
  transform: rotate(180deg); background: var(--rh-ink); color: #fff;
}
#releaseshub .slx-body { display: none; padding: 13px 14px 14px; }
#releaseshub .slx-row.is-open .slx-body { display: block; }
/* Body stat strip — 4 equal columns. URL text was removed since the
   head's Copy Link button covers the "I need the URL" job. */
#releaseshub .slx-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; align-items: center; background: var(--rh-warm);
  border: 1px solid var(--rh-line-2); border-radius: 10px;
  padding: 10px 14px;
}
#releaseshub .slx-stats .slx-url__stat:first-child {
  padding-left: 0; border-left: 0; text-align: left;
}
/* Legacy .slx-url left for back-compat with any other surface that
   imports this stylesheet. */
#releaseshub .slx-url {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto auto auto;
  gap: 10px; align-items: center; background: var(--rh-warm);
  border: 1px solid var(--rh-line-2); border-radius: 10px;
  padding: 8px 10px 8px 13px;
}
#releaseshub .slx-url .u {
  font-family: var(--rh-font-mono); font-size: 12px;
  color: var(--rh-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#releaseshub .slx-copy {
  font-family: var(--rh-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--rh-line);
  background: var(--rh-paper); color: var(--rh-ink-2); cursor: pointer;
  transition: all 120ms;
}
#releaseshub .slx-copy:hover { border-color: var(--rh-line-strong); color: var(--rh-ink); }
#releaseshub .slx-copy.copied { background: var(--rh-green); color: #fff; border-color: var(--rh-green); }
#releaseshub .slx-url__stat {
  padding-left: 13px; border-left: 1px solid var(--rh-line); text-align: right;
}
#releaseshub .slx-url__stat .v {
  font-family: var(--rh-font-display); font-size: 16px;
  letter-spacing: -0.01em; line-height: 1;
}
#releaseshub .slx-url__stat .l {
  font-family: var(--rh-font-mono); font-size: 8px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--rh-ink-4);
  margin-top: 3px;
}
#releaseshub .slx-dsps {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px;
  margin-top: 13px;
}
#releaseshub .slx-dsp {
  display: grid; grid-template-columns: 22px minmax(0,1fr) 60px;
  gap: 9px; align-items: center;
}
/* DSP icon — branded SVG fills the square; no colored background
   since the icons (from /icons/) carry their own brand colors. */
#releaseshub .slx-dsp__ic {
  width: 24px; height: 24px; border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#releaseshub .slx-dsp__ic img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
/* Apple Music + Amazon Music brandbird SVGs ship with extra padding
   inside their viewBoxes so the glyphs read small at 24px. Bump
   scale 10% to fill the square. */
#releaseshub .slx-dsp__ic.apl img,
#releaseshub .slx-dsp__ic.amz img { transform: scale(1.1); }
#releaseshub .slx-dsp__ic.spot { background: #1db954; }
#releaseshub .slx-dsp__ic.apl  { background: #fa233b; }
#releaseshub .slx-dsp__ic.ytm  { background: #ff0000; }
#releaseshub .slx-dsp__ic.amz  { background: #232f3e; }
#releaseshub .slx-dsp__nm {
  font-size: 12px; font-weight: 600; color: var(--rh-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#releaseshub .slx-dsp__bar {
  height: 4px; border-radius: 2px; background: var(--rh-warm-2);
  margin-top: 5px; overflow: hidden;
}
#releaseshub .slx-dsp__bar i { display: block; height: 100%; border-radius: 2px; }
#releaseshub .slx-dsp__r { text-align: right; font-family: var(--rh-font-mono); }
#releaseshub .slx-dsp__r .c { font-size: 12px; font-weight: 700; color: var(--rh-ink); }
#releaseshub .slx-dsp__r .p { font-size: 10px; color: var(--rh-ink-4); }
#releaseshub .slx-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rh-line-2);
}
#releaseshub .slx-btn {
  font-family: var(--rh-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--rh-line);
  background: var(--rh-paper); color: var(--rh-ink-2); cursor: pointer;
  transition: all 120ms;
}
#releaseshub .slx-btn:hover { border-color: var(--rh-line-strong); color: var(--rh-ink); }
#releaseshub .slx-btn--danger { color: var(--rh-crimson); border-color: var(--rh-crimson-soft); }
#releaseshub .slx-btn--danger:hover { background: var(--rh-crimson-soft); border-color: var(--rh-crimson); }

/* ─── FILTER TABS ─── */
#releaseshub .rl-tabs {
  display: flex; align-items: center; gap: 4px;
  margin: 30px 0 16px; border-bottom: 1px solid var(--rh-line-2);
}
#releaseshub .rl-tab {
  font-family: var(--rh-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 15px;
  border: 0; background: none; color: var(--rh-ink-4); cursor: pointer;
  border-bottom: 2px solid transparent; transition: color 120ms, border-color 120ms;
}
#releaseshub .rl-tab:hover { color: var(--rh-ink-2); }
#releaseshub .rl-tab.is-active { color: var(--rh-ink); border-bottom-color: var(--rh-crimson); }
#releaseshub .rl-tab .ct {
  color: var(--rh-ink-5); font-weight: 400; margin-left: 6px;
}
#releaseshub .rl-tab.is-active .ct { color: var(--rh-crimson); }

/* ─── CATALOG GRID ─── */
#releaseshub .rl-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
#releaseshub .rl-card {
  background: var(--rh-paper); border: 1px solid var(--rh-line-2);
  border-radius: var(--rh-radius-lg); overflow: hidden;
  box-shadow: var(--rh-shadow-card); text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: transform 140ms, box-shadow 140ms, border-color 140ms;
  cursor: pointer;
}
#releaseshub .rl-card:hover {
  transform: translateY(-2px); box-shadow: var(--rh-shadow-pop);
  border-color: var(--rh-line);
}
#releaseshub .rl-card__cover {
  aspect-ratio: 16 / 7; position: relative; overflow: hidden;
  background-size: cover; background-position: center;
}
#releaseshub .rl-card__cover::before { display: none; }
#releaseshub .rl-card__cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(0,0,0,0.5) 100%);
}
#releaseshub .rl-card__type {
  position: absolute; top: 11px; left: 11px; z-index: 1;
  font-family: var(--rh-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
  background: rgba(0,0,0,0.45); padding: 4px 9px; border-radius: 999px;
  backdrop-filter: blur(5px);
}
#releaseshub .rl-card__status { position: absolute; top: 11px; right: 11px; z-index: 1; }
#releaseshub .rl-pill {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--rh-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; gap: 5px; white-space: nowrap;
}
#releaseshub .rl-pill--live { background: var(--rh-green-bg); color: var(--rh-green); }
#releaseshub .rl-pill--live::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rh-green);
}
#releaseshub .rl-pill--upcoming { background: var(--rh-amber-bg); color: var(--rh-amber); }
#releaseshub .rl-pill--upcoming::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rh-amber);
}
#releaseshub .rl-pill--draft {
  background: var(--rh-amber-bg); color: var(--rh-amber);
}
#releaseshub .rl-pill--ended { background: var(--rh-warm-2); color: var(--rh-ink-4); }
#releaseshub .rl-card__cd {
  position: absolute; left: 13px; bottom: 11px; z-index: 1; color: #fff;
}
#releaseshub .rl-card__cd .n {
  font-family: var(--rh-font-display); font-size: 26px;
  letter-spacing: -0.03em; line-height: 0.9;
}
#releaseshub .rl-card__cd .l {
  font-family: var(--rh-font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; margin-top: 2px;
}
#releaseshub .rl-card__name {
  position: absolute; right: 13px; bottom: 12px; z-index: 1; text-align: right;
  color: #fff; font-family: var(--rh-font-display); font-size: 17px;
  letter-spacing: -0.02em; line-height: 0.95; max-width: 64%;
}
#releaseshub .rl-card__body {
  padding: 13px 15px 15px; display: flex; flex-direction: column;
  gap: 11px; flex: 1;
}
#releaseshub .rl-card__meta {
  font-family: var(--rh-font-mono); font-size: 10.5px;
  color: var(--rh-ink-4); letter-spacing: 0.03em;
}
#releaseshub .rl-prog { display: flex; flex-direction: column; gap: 7px; }
#releaseshub .rl-prog__row {
  display: grid; grid-template-columns: 64px 1fr 34px;
  gap: 9px; align-items: center;
}
#releaseshub .rl-prog__lbl {
  font-family: var(--rh-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--rh-ink-4);
}
#releaseshub .rl-prog__bar {
  height: 5px; border-radius: 3px; background: var(--rh-warm-2); overflow: hidden;
}
#releaseshub .rl-prog__bar i { display: block; height: 100%; border-radius: 3px; }
#releaseshub .rl-prog__bar i.g { background: var(--rh-green); }
#releaseshub .rl-prog__bar i.a { background: var(--rh-amber); }
#releaseshub .rl-prog__val {
  font-family: var(--rh-font-mono); font-size: 10.5px; font-weight: 700;
  color: var(--rh-ink-2); text-align: right;
}
#releaseshub .rl-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 11px; border-top: 1px solid var(--rh-line-2);
}
#releaseshub .rl-card__stat .v {
  font-family: var(--rh-font-display); font-size: 16px; letter-spacing: -0.01em;
}
#releaseshub .rl-card__stat .l {
  font-family: var(--rh-font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--rh-ink-4); margin-top: 2px;
}
#releaseshub .rl-card__open {
  font-family: var(--rh-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--rh-crimson);
  display: inline-flex; align-items: center; gap: 5px;
}
#releaseshub .rl-card.is-hidden { display: none; }
/* draft card variant */
#releaseshub .rl-card--draft {
  border-style: dashed; border-color: var(--rh-line-strong);
  background: var(--rh-paper-2);
}
#releaseshub .rl-card--draft .rl-card__cover {
  background: var(--rh-warm) !important;
}
#releaseshub .rl-card--draft .rl-card__cover::before,
#releaseshub .rl-card--draft .rl-card__cover::after { display: none; }
#releaseshub .rl-card--draft .rl-card__name,
#releaseshub .rl-card--draft .rl-card__type { color: var(--rh-ink-3); }
#releaseshub .rl-card--draft .rl-card__type { background: var(--rh-warm-2); }
/* grid-wide empty state */
#releaseshub .rl-grid__empty {
  grid-column: 1 / -1; padding: 60px 24px; text-align: center;
  color: var(--rh-ink-4); font-family: var(--rh-font-mono);
  font-size: 12px; letter-spacing: 0.04em;
}

/* ─── NEW RELEASE MODAL ─── */
#releaseshub .rl-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center; padding: 24px;
}
#releaseshub .rl-modal.is-open { display: flex; }
#releaseshub .rl-modal__scrim {
  position: absolute; inset: 0; background: rgba(20,15,10,0.55);
  backdrop-filter: blur(3px);
}
#releaseshub .rl-modal__card {
  position: relative; background: var(--rh-paper-2);
  border-radius: var(--rh-radius-lg); width: 100%; max-width: 620px;
  box-shadow: 0 30px 80px -20px rgba(20,15,10,0.55); overflow: hidden;
}
#releaseshub .rl-modal__head {
  padding: 22px 26px 16px; border-bottom: 1px solid var(--rh-line-2);
}
#releaseshub .rl-modal__eyebrow {
  font-family: var(--rh-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--rh-ink-4);
}
#releaseshub .rl-modal__title {
  font-family: var(--rh-font-display); font-size: 24px;
  letter-spacing: -0.02em; margin: 7px 0 4px;
}
#releaseshub .rl-modal__sub { font-size: 13px; color: var(--rh-ink-3); }
#releaseshub .rl-modal__body { padding: 20px 26px 24px; }
#releaseshub .rl-types {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
#releaseshub .rl-type {
  border: 1.5px solid var(--rh-line); border-radius: 14px;
  padding: 16px 14px; background: var(--rh-paper); cursor: pointer;
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
  gap: 10px; transition: border-color 120ms, transform 120ms;
}
#releaseshub .rl-type:hover { border-color: var(--rh-crimson); transform: translateY(-2px); }
#releaseshub .rl-type__art {
  height: 64px; border-radius: 10px; position: relative; overflow: hidden;
}
#releaseshub .rl-type__art::before { display: none; }
#releaseshub .rl-type--single .rl-type__art {
  background: linear-gradient(135deg, #f5b48a, #c8503a 60%, #6a1d2a);
}
#releaseshub .rl-type--ep .rl-type__art {
  background: linear-gradient(150deg, #e8b04a, #c8503a 60%, #6a1d2a);
}
#releaseshub .rl-type--album .rl-type__art {
  background: linear-gradient(160deg, #6c7fd6, #4145a0 60%, #2a1c4a);
}
#releaseshub .rl-type__name {
  font-family: var(--rh-font-display); font-size: 17px; letter-spacing: -0.01em;
}
#releaseshub .rl-type__desc {
  font-family: var(--rh-font-mono); font-size: 10px;
  color: var(--rh-ink-4); letter-spacing: 0.03em; line-height: 1.4;
}
#releaseshub .rl-modal__note {
  font-family: var(--rh-font-mono); font-size: 10.5px;
  color: var(--rh-ink-4); letter-spacing: 0.03em; margin-top: 16px;
  display: flex; align-items: center; gap: 8px; line-height: 1.5;
}
#releaseshub .rl-modal__note svg {
  width: 14px; height: 14px; flex-shrink: 0; color: var(--rh-crimson);
}
#releaseshub .rl-modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--rh-line); background: var(--rh-paper);
  color: var(--rh-ink-3); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 120ms;
}
#releaseshub .rl-modal__close:hover { background: var(--rh-warm); color: var(--rh-ink); }

/* ─── RESPONSIVE ─── */
@media (max-width: 1100px) {
  #releaseshub .rl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px) {
  #releaseshub { padding: 20px 20px 48px; }
  #releaseshub .rl-feat__inner { grid-template-columns: 120px 1fr; gap: 18px; padding: 22px; }
  #releaseshub .rl-feat__art { width: 120px; height: 120px; }
  #releaseshub .rl-feat__side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  #releaseshub .rl-feat__count .num { font-size: 48px; }
  #releaseshub .rl-work { grid-template-columns: 1fr; }
  #releaseshub .rl-grid { grid-template-columns: 1fr; }
  #releaseshub .rl-types { grid-template-columns: 1fr; }
}

/* ─── HIDDEN OLD WORK AREA ─────────────────────────────────────────
   The old Marketing-relocated section (.rls-toolbar + .rls-workspace)
   stays in the DOM so marketing-wiring.js' queries don't error out,
   but is hidden so the CD hub is what users see. */
#releaseshub > .section[data-screen-label="Releases"] {
  display: none !important;
}