/* ═══════════════════════════════════════════════════════════════
   RELEASE COMMAND CENTER — FOCUSED LAYOUT (per-release)
   Ported from CD handoff (site/Release Handoff/cc-focused.css +
   cc-panels.css). Scoped under #releasepage so it can't collide
   with the hub or any other surface.

   Token aliasing reuses AC tokens (--ac-color-*) — no separate
   palette like the hub had to define. Layout pattern: a single
   workspace card with identity header, horizontal stepper nav,
   focused content (one section at a time), and prev/next footer.

   2026-06-02 — initial build for CD handoff Phase 2.
   ═══════════════════════════════════════════════════════════════ */

#releasepage {
  background: var(--ac-color-bg);   /* cream canvas */
  padding: 28px 40px 48px;
  min-height: calc(100vh - 120px);
}
#releasepage .rp {
  max-width: 1680px; margin: 0 auto;
}

/* ─── BREADCRUMB ─────────────────────────────────────────────────── */
#releasepage .rp-crumb {
  display: flex; align-items: center; gap: 9px; margin-bottom: 18px;
  font-family: var(--ac-font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ac-color-t3);
}
#releasepage .rp-crumb a {
  color: var(--ac-color-accent); text-decoration: none;
}
#releasepage .rp-crumb a:hover { color: var(--ac-color-accent-hi); }
#releasepage .rp-crumb .sep { color: var(--ac-color-muted); }
#releasepage .rp-crumb .here { color: var(--ac-color-ink); font-weight: 700; }

/* ─── WORKSPACE SHELL ─────────────────────────────────────────────── */
#releasepage .ws {
  background: var(--ac-color-paper);   /* white container */
  border-radius: 22px;                  /* keep rounded so the dark header masks cleanly */
  overflow: hidden;
  /* no box-shadow + no ring border — per Ryan 2026-06-02 the whole
     thing should sit flat on the page, no frame around the panel. */
}

/* ─── IDENTITY HEADER — dark cinematic backdrop ───────────────────────
   Artwork URL is set as `--rp-cover-image` on .ws-head from JS
   (paintHeader). ::before pulls from that property (gradient fallback
   when no artwork). ::after is a heavy dark scrim that mutes the
   artwork to a moody color hint and lets white text read cleanly.
   Per Ryan 2026-06-02 — "dark cinematic". */
#releasepage .ws-head {
  display: grid; grid-template-columns: 148px minmax(0,1fr) auto;
  gap: 28px; align-items: center; padding: 34px 36px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative; isolation: isolate; overflow: hidden;
  background: #0e0c0b;  /* dark base when artwork hasn't loaded yet */
  /* Per-release-type cover gradient — backdrop fallback. */
  --cover-grad: linear-gradient(135deg, #f5b48a 0%, #c8503a 35%, #6a1d2a 70%, #1a0810 100%);
  --rp-cover-image: var(--cover-grad);
}
#releasepage .ws-head--ep    { --cover-grad: linear-gradient(150deg, #e8b04a 0%, #c8503a 40%, #6a1d2a 72%, #160810 100%); }
#releasepage .ws-head--album { --cover-grad: linear-gradient(160deg, #6c7fd6 0%, #4145a0 35%, #2a1c4a 68%, #120a1e 100%); }
/* Backdrop layer 1 — blurred cover image. Lighter brightness so the
   artwork still reads as artwork (color + soft shapes), not just a
   pitch-black plane. */
#releasepage .ws-head::before {
  content: ""; position: absolute; inset: -60px; z-index: -2;
  background: var(--rp-cover-image);
  background-size: cover; background-position: center;
  filter: blur(36px) saturate(1.05) brightness(0.78);
  transform: scale(1.15);
}
/* Backdrop layer 2 — soft dark vignette. Darkest behind the title so
   white text stays readable; transparent at the edges so the artwork
   colors bleed through. */
#releasepage .ws-head::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 110% at 38% 55%,
      rgba(14,12,11,0.55) 0%,
      rgba(14,12,11,0.28) 60%,
      rgba(14,12,11,0.18) 100%),
    linear-gradient(180deg,
      rgba(14,12,11,0.10) 0%,
      rgba(14,12,11,0.28) 100%);
}
#releasepage .ws-head__art {
  width: 148px; height: 148px; border-radius: 20px;
  position: relative; overflow: hidden;
  background: var(--cover-grad); background-size: cover; background-position: center;
  box-shadow: 0 24px 60px -16px rgba(0,0,0,0.85),
              0 0 0 1px rgba(255,255,255,0.10) inset;
}
#releasepage .ws-head__art .mk {
  position: absolute; left: 16px; bottom: 14px; right: 16px;
  font-family: var(--ac-font-display); color: #fff;
  font-size: 27px; line-height: 0.82; letter-spacing: -0.03em;
}
#releasepage .ws-head__art .mk small {
  display: block; font-family: var(--ac-font-mono); font-size: 9px;
  letter-spacing: 0.16em; opacity: 0.85; margin-bottom: 9px;
}
#releasepage .ws-head__main { min-width: 0; }
#releasepage .ws-head__eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--ac-font-mono); font-size: 10.5px;
  font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.62); margin-bottom: 11px;
}
#releasepage .ws-head__eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ac-color-accent);
  box-shadow: 0 0 0 4px rgba(139,26,43,0.35);
}
#releasepage .ws-head__title {
  font-family: var(--ac-font-display); font-size: 38px;
  line-height: 0.98; letter-spacing: -0.025em; margin: 0;
  color: #fff; max-width: 18ch;
  text-shadow: 0 1px 24px rgba(0,0,0,0.45);
}
#releasepage .ws-head__sub {
  margin-top: 13px; display: flex; align-items: center; gap: 14px;
  font-family: var(--ac-font-mono); font-size: 12.5px;
  color: rgba(255,255,255,0.68); letter-spacing: 0.02em; flex-wrap: wrap;
}
#releasepage .ws-head__sub .cd { color: #f4b8a0; font-weight: 700; }
#releasepage .ws-head__sub .sep { width: 1px; height: 12px; background: rgba(255,255,255,0.18); }
#releasepage .ws-head__side {
  display: block;
  width: 280px; max-width: 32vw;
  align-self: stretch;
}
/* ─── Activity rail (right side of header) ────────────────────────
   Compact scrollable feed showing the latest rollout updates. Shows
   ~2 items at a time; the rest are reachable by scrolling. */
#releasepage .rp-actrail {
  display: flex; flex-direction: column;
  background: rgba(0,0,0,0.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 10px 12px 8px;
  height: 100%; max-height: 156px;
  min-height: 110px;
}
#releasepage .rp-actrail__head {
  font-family: var(--ac-font-mono); font-size: 9px;
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  padding-bottom: 6px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  flex: 0 0 auto;
}
#releasepage .rp-actrail__body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
#releasepage .rp-actrail__body::-webkit-scrollbar { width: 4px; }
#releasepage .rp-actrail__body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18); border-radius: 2px;
}
/* Re-skin the .feed items for the dark rail. */
#releasepage .rp-actrail .feed { gap: 6px; }
#releasepage .rp-actrail .feed__item {
  display: flex; gap: 10px; padding: 6px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
#releasepage .rp-actrail .feed__item:last-child { border-bottom: 0; }
#releasepage .rp-actrail .feed__ic {
  width: 22px; height: 22px; border-radius: 6px;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.75);
  flex: 0 0 auto;
}
#releasepage .rp-actrail .feed__ic svg { width: 11px; height: 11px; }
#releasepage .rp-actrail .feed__body { min-width: 0; flex: 1; }
#releasepage .rp-actrail .feed__text {
  font-size: 11.5px; line-height: 1.35; color: #fff;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
#releasepage .rp-actrail .feed__text b {
  font-weight: 700;
  color: #f4b8a0;   /* warm peach, matches the header's "T-X" accent */
}
#releasepage .rp-actrail .feed__time {
  font-family: var(--ac-font-mono); font-size: 9px;
  color: rgba(255,255,255,0.50); margin-top: 2px;
  letter-spacing: 0.04em;
}
#releasepage .rp-actrail .feed__empty {
  font-size: 11px; color: rgba(255,255,255,0.50);
  padding: 14px 6px; text-align: center;
}

/* ─── STEPPER NAV — horizontal so it never collides with roster rail ─ */
#releasepage .ws-nav {
  display: flex; align-items: center; gap: 1px;
  padding: 4px 18px 0; border-bottom: 1px solid var(--ac-color-line);
  background: #ffffff; overflow-x: auto;
}
#releasepage .ws-nav::-webkit-scrollbar { height: 0; }
#releasepage .ws-nav__item {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 15px; border: 0; border-bottom: 2px solid transparent;
  font-family: var(--ac-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ac-color-t3); cursor: pointer; background: none;
  white-space: nowrap; flex-shrink: 0;
}
#releasepage .ws-nav__item:hover { color: var(--ac-color-body); }
#releasepage .ws-nav__item.is-active {
  color: var(--ac-color-ink); border-bottom-color: var(--ac-color-accent);
}
#releasepage .ws-nav__item .n {
  font-family: var(--ac-font-display); font-size: 10px;
  letter-spacing: -0.01em; color: var(--ac-color-muted);
}
#releasepage .ws-nav__item.is-active .n { color: var(--ac-color-accent); }
#releasepage .ws-nav__item .badge {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
#releasepage .ws-nav__item .badge.g { background: var(--ac-color-success); }
#releasepage .ws-nav__item .badge.a { background: var(--ac-color-warning); }
#releasepage .ws-nav__item .badge.r { background: var(--ac-color-accent); }
#releasepage .ws-nav__sep {
  width: 1px; height: 18px; background: var(--ac-color-line);
  margin: 0 8px; flex-shrink: 0; align-self: center;
}

/* ─── FOCUSED CONTENT AREA ───────────────────────────────────────── */
#releasepage .ws-content {
  padding: 26px 30px 30px; min-width: 0; min-height: 460px;
}
#releasepage .ws-section { display: none; }
#releasepage .ws-section.is-active { display: block; }
#releasepage .ws-section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px dashed var(--ac-color-line);
}
#releasepage .ws-section__lead {
  display: flex; align-items: baseline; gap: 12px; min-width: 0;
}
#releasepage .ws-section__num {
  font-family: var(--ac-font-display); font-size: 14px;
  color: var(--ac-color-accent); letter-spacing: -0.01em; flex-shrink: 0;
}
#releasepage .ws-section__title {
  font-family: var(--ac-font-display); font-size: 22px;
  letter-spacing: -0.02em; color: var(--ac-color-ink); margin: 0; line-height: 1;
}
#releasepage .ws-section__hint {
  font-size: 12px; color: var(--ac-color-t3); text-align: right;
  line-height: 1.4; max-width: 34ch;
}
#releasepage .ws-section__tools {
  display: flex; gap: 8px; align-items: center; flex-shrink: 0;
}

/* ─── STEPPER FOOTER ─────────────────────────────────────────────── */
#releasepage .ws-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 30px; border-top: 1px solid var(--ac-color-line);
  background: #ffffff;
}
#releasepage .ws-foot__hint {
  font-family: var(--ac-font-mono); font-size: 11px;
  color: var(--ac-color-t3); letter-spacing: 0.04em;
}
#releasepage .ws-foot__hint b { color: var(--ac-color-body); font-weight: 700; }
#releasepage .ws-foot__nav { display: flex; gap: 8px; }
#releasepage .ws-foot__nav button {
  font-family: var(--ac-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 9px 18px;
  border-radius: var(--ac-radius-pill); border: 1px solid var(--ac-color-line);
  background: var(--ac-color-paper); color: var(--ac-color-ink);
  cursor: pointer; transition: all 120ms;
}
#releasepage .ws-foot__nav button:hover:not(:disabled) {
  border-color: var(--ac-color-line-strong); transform: translateY(-1px);
}
#releasepage .ws-foot__nav button:disabled {
  opacity: 0.4; cursor: not-allowed;
}
#releasepage .ws-foot__nav button.is-next {
  background: var(--ac-color-ink); color: #fff; border-color: var(--ac-color-ink);
}

/* ─── OVERVIEW SECTION ───────────────────────────────────────────── */
#releasepage .ov-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px;
}
#releasepage .ov-stat {
  background: var(--ac-color-bg);      /* matches outer canvas color */
  border: 1px solid var(--ac-color-line);
  border-radius: 14px; padding: 16px 18px;
}
#releasepage .ov-stat .l {
  font-family: var(--ac-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac-color-t3);
}
#releasepage .ov-stat .v {
  font-family: var(--ac-font-display); font-size: 30px;
  letter-spacing: -0.02em; line-height: 1; margin-top: 8px; color: var(--ac-color-ink);
}
#releasepage .ov-stat .s {
  font-family: var(--ac-font-mono); font-size: 10.5px;
  color: var(--ac-color-t3); margin-top: 5px; letter-spacing: 0.03em;
}
#releasepage .ov-stat .s.up { color: var(--ac-color-success-ink); }
#releasepage .ov-stat .s.down { color: var(--ac-color-accent); }

#releasepage .ov-attention {
  background: var(--ac-color-bg);      /* matches stat cards on white page */
  border: 1px solid var(--ac-color-line);
  border-radius: 16px; padding: 18px 20px;
}
/* ─── Overview danger zone ─────────────────────────────────────── */
#releasepage .ov-danger {
  margin-top: 18px;
  border: 1px solid var(--ac-color-accent-chip);
  background: var(--ac-color-accent-wash);
  border-radius: 14px;
  padding: 16px 18px;
}
#releasepage .ov-danger__title {
  font-family: var(--ac-font-mono); font-size: 10px;
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ac-color-accent); margin-bottom: 12px;
}
#releasepage .ov-danger__row {
  display: flex; align-items: center; gap: 16px;
}
#releasepage .ov-danger__copy { flex: 1; min-width: 0; }
#releasepage .ov-danger__head {
  font-family: var(--ac-font-display); font-size: 15px;
  letter-spacing: -0.01em; color: var(--ac-color-ink);
  margin-bottom: 4px;
}
#releasepage .ov-danger__sub {
  font-size: 12px; color: var(--ac-color-t2); line-height: 1.5;
}
#releasepage .ov-danger__btn {
  font-family: var(--ac-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 10px 18px; border-radius: var(--ac-radius-pill);
  background: var(--ac-color-accent); color: #fff;
  border: 1px solid var(--ac-color-accent); cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms ease;
}
#releasepage .ov-danger__btn:hover {
  background: #6e1422;  /* darker crimson */
  border-color: #6e1422;
}
#releasepage .ov-attention__title {
  font-family: var(--ac-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ac-color-t3);
  margin-bottom: 12px;
}
#releasepage .ov-task {
  display: grid; grid-template-columns: 30px minmax(0,1fr) auto;
  gap: 12px; align-items: center; padding: 11px 0;
  border-bottom: 1px dashed var(--ac-color-line); cursor: pointer;
  text-decoration: none; color: inherit;
}
#releasepage .ov-task:last-child { border-bottom: 0; }
#releasepage .ov-task:hover .ov-task__t { color: var(--ac-color-accent); }
#releasepage .ov-task__ic {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
#releasepage .ov-task__ic.r { background: var(--ac-color-accent); }
#releasepage .ov-task__ic.a { background: var(--ac-color-warning-ink); }
#releasepage .ov-task__ic.b { background: var(--ac-color-info); }
#releasepage .ov-task__body { min-width: 0; }
#releasepage .ov-task__t { font-size: 13.5px; font-weight: 600; color: var(--ac-color-ink); }
#releasepage .ov-task__m {
  font-family: var(--ac-font-mono); font-size: 10.5px;
  color: var(--ac-color-t3); margin-top: 2px; letter-spacing: 0.02em;
}
#releasepage .ov-task__go {
  font-family: var(--ac-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ac-color-t3);
}
#releasepage .ov-empty {
  padding: 30px 18px; text-align: center;
  color: var(--ac-color-t3); font-family: var(--ac-font-mono);
  font-size: 12px; letter-spacing: 0.04em;
}

/* ─── CHECKLIST SECTION (Triple 8 4-phase rollout) ──────────────── */
#releasepage .ck-empty {
  text-align: center; padding: 48px 24px;
  background: var(--ac-color-bg); border: 1px dashed var(--ac-color-line-strong);
  border-radius: 14px;
}
#releasepage .ck-empty__ic {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--ac-color-warm); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px; color: var(--ac-color-t3);
}
#releasepage .ck-empty__ic svg { width: 28px; height: 28px; }
#releasepage .ck-empty__t {
  font-family: var(--ac-font-display); font-size: 19px;
  letter-spacing: -0.01em; color: var(--ac-color-ink);
}
#releasepage .ck-empty__s {
  font-size: 13px; color: var(--ac-color-t2); margin: 8px auto 18px;
  max-width: 42ch; line-height: 1.55;
}
#releasepage .ck-phases { display: flex; flex-direction: column; gap: 14px; }
#releasepage .ck-phase {
  background: var(--ac-color-bg); border: 1px solid var(--ac-color-line);
  border-radius: 14px; overflow: hidden;
}
#releasepage .ck-phase__head {
  display: grid; grid-template-columns: 26px minmax(0,1fr) auto;
  align-items: center; gap: 12px; padding: 13px 16px;
  background: var(--ac-color-nested);
  border-bottom: 1px solid var(--ac-color-line);
}
#releasepage .ck-phase__num {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--ac-color-ink); color: #fff;
  font-family: var(--ac-font-display); font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
#releasepage .ck-phase__name {
  font-family: var(--ac-font-display); font-size: 15px;
  letter-spacing: -0.01em; color: var(--ac-color-ink);
}
#releasepage .ck-phase__name small {
  display: block; font-family: var(--ac-font-mono); font-size: 10px;
  font-weight: 400; letter-spacing: 0.08em; color: var(--ac-color-t3);
  text-transform: uppercase; margin-top: 3px;
}
#releasepage .ck-phase__prog {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ac-font-mono); font-size: 11px; font-weight: 700;
  color: var(--ac-color-body); letter-spacing: 0.04em;
}
#releasepage .ck-phase__body { padding: 4px 16px 10px; }
#releasepage .ck-item {
  display: grid; grid-template-columns: 18px minmax(0,1fr) auto auto;
  align-items: center; gap: 11px; padding: 10px 0;
  border-bottom: 1px dashed var(--ac-color-line);
}
#releasepage .ck-item:last-child { border-bottom: 0; }
#releasepage .ck-item__box {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--ac-color-line-strong);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; transition: all 120ms;
}
#releasepage .ck-item__box svg {
  width: 11px; height: 11px; color: #fff; opacity: 0;
}
#releasepage .ck-item.done .ck-item__box {
  background: var(--ac-color-success); border-color: var(--ac-color-success);
}
#releasepage .ck-item.done .ck-item__box svg { opacity: 1; }
#releasepage .ck-item__task { font-size: 13.5px; color: var(--ac-color-body); }
#releasepage .ck-item.done .ck-item__task {
  color: var(--ac-color-t3); text-decoration: line-through;
}
#releasepage .ck-item__assignee {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ac-font-mono); font-size: 10px; font-weight: 700;
  color: var(--ac-color-body); background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line); border-radius: var(--ac-radius-pill);
  padding: 3px 9px 3px 4px; white-space: nowrap; cursor: pointer;
}
#releasepage .ck-item__assignee.unassigned {
  color: var(--ac-color-t3); border-style: dashed; padding: 3px 9px;
}
#releasepage .ck-item__assignee .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;
}
#releasepage .ck-item__assignee.unassigned .av { display: none; }
#releasepage .ck-item__date {
  font-family: var(--ac-font-mono); font-size: 10px;
  color: var(--ac-color-t3); letter-spacing: 0.04em;
  min-width: 48px; text-align: right;
}
#releasepage .ck-item.warn    .ck-item__date { color: var(--ac-color-warning-ink); font-weight: 700; }
#releasepage .ck-item.overdue .ck-item__date { color: var(--ac-color-accent); font-weight: 700; }

/* ─── SMART LINK SECTION ────────────────────────────────────────── */
#releasepage .sl-preview {
  display: grid; grid-template-columns: 248px 1fr; gap: 30px; align-items: start;
}
/* ─── Interactive phone simulator ──────────────────────────────────
   Renders the smart-link page NATIVELY (no iframe) using the same
   release data the live page would pull. As DSP links are added on
   the Details tab, they light up here in real time. */
#releasepage .sl-phone {
  position: relative; width: 248px;
  aspect-ratio: 9 / 19.5;
  margin: 0 auto;
  background: linear-gradient(180deg, #1f1c1a 0%, #14110f 100%);
  border-radius: 38px;
  padding: 7px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.07),
    0 24px 56px -18px rgba(0,0,0,0.55),
    0 6px 16px -8px rgba(0,0,0,0.4);
}
/* Dynamic Island */
#releasepage .sl-phone__notch {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 76px; height: 22px;
  background: #000; border-radius: 12px;
  z-index: 5;
  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
#releasepage .sl-phone__screen {
  position: absolute; inset: 7px;
  border-radius: 32px;
  overflow: hidden;
  background: #0a0807;
}
/* The page itself — scrollable like a real phone, with dark theme,
   artwork hero, and DSP rows that render from release.links. */
#releasepage .sl-phone__page {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding: 46px 22px 20px;
  display: flex; flex-direction: column; gap: 11px;
  color: #fff;
  font-family: var(--ac-font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
  /* Solid dark base — the artwork only appears in the cover tile,
     not as a page background. Keeps things crisp and prevents the
     "artwork inside artwork" recursive look. */
  background: #0e0c0b;
}
#releasepage .sl-phone__page::-webkit-scrollbar { width: 0; }
/* Subtle vertical fade so the bottom feels grounded without a
   global scrim. CONTAINED to the phone via position:absolute. */
#releasepage .sl-phone__page::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0) 40%);
  z-index: 0;
  pointer-events: none;
}
#releasepage .sl-phone__page > * { position: relative; z-index: 1; }

#releasepage .slp-art {
  width: 78%;
  aspect-ratio: 1 / 1;
  margin: 0 auto 2px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  background-size: cover; background-position: center;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.6);
}
#releasepage .slp-meta {
  text-align: center;
  margin: 2px 0 4px;
}
#releasepage .slp-meta__title {
  font-family: var(--ac-font-display, inherit);
  font-size: 12px; font-weight: 700;
  line-height: 1.18; margin: 0 0 2px;
  letter-spacing: -0.01em;
}
#releasepage .slp-meta__artist {
  font-size: 9.5px; opacity: 0.75;
  letter-spacing: 0.02em;
}
#releasepage .slp-dsps {
  display: flex; flex-direction: column; gap: 6px;
}
#releasepage .slp-dsp {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 7px;
  background: rgba(255,255,255,0.07);
  border-radius: 8px;
  color: #fff; text-decoration: none;
  transition: background 120ms ease, transform 120ms ease;
}
#releasepage .slp-dsp.is-active { cursor: pointer; }
#releasepage .slp-dsp.is-active:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}
#releasepage .slp-dsp.is-inactive {
  opacity: 0.40;
  cursor: default;
}
#releasepage .slp-dsp__ic {
  width: 22px; height: 22px; border-radius: 5px;
  overflow: hidden; flex: 0 0 auto;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
}
#releasepage .slp-dsp__ic img {
  width: 100%; height: 100%; object-fit: cover;
}
#releasepage .slp-dsp__nm {
  flex: 1; font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.01em;
}
#releasepage .slp-dsp__play {
  font-family: var(--ac-font-mono, ui-monospace, monospace);
  font-size: 7px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(255,255,255,0.12);
  padding: 3px 7px; border-radius: 999px;
}
#releasepage .slp-dsp.is-inactive .slp-dsp__play {
  background: transparent;
  color: rgba(255,255,255,0.55);
  border: 1px dashed rgba(255,255,255,0.20);
  padding: 2px 6px;
}
#releasepage .slp-foot {
  text-align: center; margin-top: auto; padding-top: 12px;
  font-size: 7.5px; opacity: 0.45;
  letter-spacing: 0.10em; text-transform: uppercase;
}
/* LIVE pill — small, top-right of the screen. */
#releasepage .sl-phone__live {
  position: absolute; top: 10px; right: 12px;
  z-index: 6;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ac-font-mono); font-size: 8px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px 8px; border-radius: 999px;
}
#releasepage .sl-phone__live .d {
  width: 5px; height: 5px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.35);
  animation: rp-live 2s infinite;
}
@keyframes rp-live {
  0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.35); }
  70%     { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
}
#releasepage .sl-right {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
#releasepage .sl-url {
  display: flex; align-items: center; gap: 10px;
  background: var(--ac-color-warm); border: 1px solid var(--ac-color-line);
  border-radius: 10px; padding: 10px 13px;
}
#releasepage .sl-url .u {
  font-family: var(--ac-font-mono); font-size: 12.5px;
  color: var(--ac-color-body); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex: 1;
}
#releasepage .sl-url .u b { color: var(--ac-color-ink); }
/* ─── Per-metric block (Visits / DSP clicks · Today / 30d / Life) ── */
#releasepage .sl-metric {
  background: var(--ac-color-bg);
  border: 1px solid var(--ac-color-line);
  border-radius: 12px;
  overflow: hidden;
}
#releasepage .sl-metric__head {
  padding: 10px 14px;
  font-family: var(--ac-font-mono); font-size: 9.5px;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ac-color-t3);
  background: var(--ac-color-warm);
  border-bottom: 1px solid var(--ac-color-line);
}
#releasepage .sl-metric__row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
}
#releasepage .sl-metric__cell {
  padding: 14px 16px;
  border-left: 1px solid var(--ac-color-line-subtle);
}
#releasepage .sl-metric__cell:first-child { border-left: 0; }
#releasepage .sl-metric__cell .l {
  font-family: var(--ac-font-mono); font-size: 9px;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ac-color-t3);
}
#releasepage .sl-metric__cell .v {
  font-family: var(--ac-font-display); font-size: 22px;
  letter-spacing: -0.02em; line-height: 1; margin-top: 5px;
  color: var(--ac-color-ink);
}
/* ─── Per-DSP click breakdown ─────────────────────────────────────── */
#releasepage .sl-dsps {
  display: flex; flex-direction: column; gap: 11px;
  padding: 16px 18px;
  border: 1px solid var(--ac-color-line);
  border-radius: 12px;
  background: var(--ac-color-bg);
}
#releasepage .sl-dsps__head {
  font-family: var(--ac-font-mono); font-size: 9.5px;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ac-color-t3);
  margin-bottom: 2px;
}
#releasepage .sl-dsp {
  display: grid; grid-template-columns: 32px 1fr auto;
  gap: 12px; align-items: center;
}
#releasepage .sl-dsp__ic {
  width: 32px; height: 32px; border-radius: 8px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--ac-color-warm);
}
#releasepage .sl-dsp__ic img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.05);
}
#releasepage .sl-dsp__nm {
  font-family: var(--ac-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--ac-color-ink); margin-bottom: 4px;
}
#releasepage .sl-dsp__bar {
  height: 4px; background: var(--ac-color-line-subtle); border-radius: 2px;
  overflow: hidden;
}
#releasepage .sl-dsp__bar i {
  display: block; height: 100%; transition: width 280ms ease;
}
#releasepage .sl-dsp__r {
  text-align: right; font-family: var(--ac-font-mono);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 8px;
}
#releasepage .sl-dsp__r .c { font-weight: 700; font-size: 12.5px; color: var(--ac-color-ink); }
#releasepage .sl-dsp__r .p { color: var(--ac-color-t3); font-size: 10px; }
#releasepage .sl-deeplink {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-family: var(--ac-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ac-color-accent); text-decoration: none; padding: 8px 0;
}
#releasepage .sl-deeplink:hover { color: var(--ac-color-accent-hi); }

/* ─── LIVE ADS SECTION ──────────────────────────────────────────── */
#releasepage .ads-empty {
  text-align: center; padding: 38px 22px; background: var(--ac-color-bg);
  border: 1px dashed var(--ac-color-line-strong); border-radius: 14px;
}
#releasepage .ads-empty__t {
  font-family: var(--ac-font-display); font-size: 17px;
  color: var(--ac-color-ink);
}
#releasepage .ads-empty__s {
  font-size: 12.5px; color: var(--ac-color-t2);
  margin: 8px auto 0; max-width: 44ch; line-height: 1.5;
}
#releasepage .ads-list { display: flex; flex-direction: column; gap: 8px; }
#releasepage .ads-row {
  display: grid; grid-template-columns: 46px minmax(0,1fr) auto;
  gap: 14px; align-items: center; padding: 14px 16px;
  background: var(--ac-color-bg);
  border: 1px solid var(--ac-color-line);
  border-radius: 12px;
}
#releasepage .ads-row__art {
  width: 46px; height: 46px; border-radius: 8px; overflow: hidden;
  background-size: cover; background-position: center;
  background-color: var(--ac-color-warm);
}
#releasepage .ads-row__main { min-width: 0; }
#releasepage .ads-row__title {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 13.5px; font-weight: 700; color: var(--ac-color-ink); line-height: 1.2;
}
#releasepage .ads-row__sub {
  font-family: var(--ac-font-mono); font-size: 10px;
  color: var(--ac-color-t3); margin-top: 3px; letter-spacing: 0.03em;
}
#releasepage .ads-row__spend {
  margin-top: 8px; height: 5px; border-radius: 3px;
  background: var(--ac-color-warm-shadow); overflow: hidden; position: relative;
}
#releasepage .ads-row__spend i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--ac-color-ink); border-radius: 3px;
}
#releasepage .ads-row__spend i.warn { background: var(--ac-color-warning-ink); }
#releasepage .ads-row__spend i.crit { background: var(--ac-color-accent); }
#releasepage .ads-row__spend-row {
  display: flex; justify-content: space-between; margin-top: 5px;
  font-family: var(--ac-font-mono); font-size: 10px;
  color: var(--ac-color-t3); letter-spacing: 0.03em;
}
#releasepage .ads-row__spend-row b { color: var(--ac-color-ink); font-weight: 700; }
#releasepage .ads-row__metrics {
  display: flex; gap: 22px; text-align: right; flex-shrink: 0;
}
#releasepage .ads-row__metric .v {
  font-family: var(--ac-font-display); font-size: 16px;
  letter-spacing: -0.01em; line-height: 1; color: var(--ac-color-ink);
}
#releasepage .ads-row__metric .l {
  font-family: var(--ac-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ac-color-t3);
  margin-top: 5px;
}
#releasepage .ads-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ac-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px;
  border-radius: 999px;
}
#releasepage .ads-pill--live   { background: var(--ac-color-success-bg); color: var(--ac-color-success-ink); }
#releasepage .ads-pill--paused { background: var(--ac-color-warm); color: var(--ac-color-t3); }

/* ─── ACTIVITY FEED ─────────────────────────────────────────────── */
#releasepage .feed { display: flex; flex-direction: column; }
#releasepage .feed__item {
  display: grid; grid-template-columns: 32px 1fr;
  gap: 12px; padding: 13px 0;
  border-bottom: 1px dashed var(--ac-color-line);
}
#releasepage .feed__item:last-child { border-bottom: 0; }
#releasepage .feed__ic {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
#releasepage .feed__ic svg { width: 15px; height: 15px; }
#releasepage .feed__ic.upload { background: #2a9d8f; }
#releasepage .feed__ic.ad     { background: var(--ac-color-info); }
#releasepage .feed__ic.assign { background: #7c3aed; }
#releasepage .feed__ic.check  { background: var(--ac-color-success); }
#releasepage .feed__ic.link   { background: var(--ac-color-accent); }
#releasepage .feed__body { min-width: 0; }
#releasepage .feed__text {
  font-size: 13px; color: var(--ac-color-body); line-height: 1.45;
}
#releasepage .feed__text b { color: var(--ac-color-ink); font-weight: 700; }
#releasepage .feed__time {
  font-family: var(--ac-font-mono); font-size: 10px;
  color: var(--ac-color-t3); margin-top: 3px; letter-spacing: 0.03em;
}
#releasepage .feed__empty {
  padding: 30px 18px; text-align: center;
  color: var(--ac-color-t3); font-family: var(--ac-font-mono);
  font-size: 12px; letter-spacing: 0.04em;
}

/* ─── DEFERRED-SECTION PLACEHOLDER (kept for any Phase 3 sections) ─ */
#releasepage .rp-placeholder {
  text-align: center; padding: 48px 24px; background: var(--ac-color-bg);
  border: 1px dashed var(--ac-color-line-strong); border-radius: 14px;
}
#releasepage .rp-placeholder__t {
  font-family: var(--ac-font-display); font-size: 19px; color: var(--ac-color-ink);
}
#releasepage .rp-placeholder__s {
  font-size: 13px; color: var(--ac-color-t2);
  margin: 8px auto 0; max-width: 42ch; line-height: 1.55;
}
#releasepage .rp-placeholder__tag {
  display: inline-block; font-family: var(--ac-font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ac-color-accent);
  background: var(--ac-color-accent-chip); padding: 4px 10px;
  border-radius: 999px; margin-top: 12px;
}

/* ═════════════════════════════════════════════════════════════════
   PHASE 2 SECTIONS — Assets · Details · Timeline · Press
   Tasks #60, #61, #62, #63. Built 2026-06-02.
   ═════════════════════════════════════════════════════════════════ */

/* ─── ASSETS SECTION (#60) ──────────────────────────────────────── */
#releasepage .as-group { margin-bottom: 22px; }
#releasepage .as-group:last-child { margin-bottom: 0; }
#releasepage .as-group__title {
  font-family: var(--ac-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ac-color-t3);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
#releasepage .as-group__title::after {
  content: ""; flex: 1; height: 1px; background: var(--ac-color-line);
}
#releasepage .as-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
#releasepage .as-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center; gap: 12px;
  padding: 10px 12px; background: var(--ac-color-bg);
  border: 1px solid var(--ac-color-line); border-radius: 12px;
  transition: border-color 120ms, background 120ms;
}
#releasepage .as-row:hover {
  border-color: var(--ac-color-line-strong); background: var(--ac-color-nested);
}
#releasepage .as-row--overdue { border-color: var(--ac-color-accent-chip); }
#releasepage .as-row__thumb {
  position: relative; width: 40px; height: 40px; border-radius: 8px;
  background: var(--ac-color-warm-shadow); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ac-color-t3); overflow: hidden;
}
#releasepage .as-row__thumb--in {
  background: linear-gradient(140deg, #f5b48a 0%, #c8503a 45%, #6a1d2a 78%, #1a0810 100%);
  color: #fff;
}
#releasepage .as-row__thumb svg { width: 17px; height: 17px; }
#releasepage .as-row__thumb--in svg { display: none; }
#releasepage .as-row__plat {
  position: absolute; top: 2px; left: 2px; z-index: 2;
  font-family: var(--ac-font-mono); font-size: 7px; font-weight: 700;
  letter-spacing: 0.04em; color: #fff; background: rgba(0,0,0,0.6);
  padding: 2px 4px; border-radius: 4px; backdrop-filter: blur(4px);
}
#releasepage .as-row__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
#releasepage .as-row__play i {
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center;
}
#releasepage .as-row__play i::after {
  content: ""; border-style: solid; border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #fff; margin-left: 1px;
}
#releasepage .as-row__body { min-width: 0; }
#releasepage .as-row__name {
  font-size: 13px; font-weight: 600; color: var(--ac-color-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#releasepage .as-row__meta {
  font-family: var(--ac-font-mono); font-size: 10px;
  color: var(--ac-color-t3); margin-top: 3px; letter-spacing: 0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#releasepage .as-row__link {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ac-font-mono); font-size: 9.5px; font-weight: 600;
  color: var(--ac-color-t3); margin-top: 3px; text-decoration: none;
}
#releasepage .as-row__link:hover { color: var(--ac-color-ink); }
#releasepage .as-row__link .u {
  border-bottom: 1px solid var(--ac-color-line); padding-bottom: 1px;
}
#releasepage .as-row__state {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ac-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; flex-shrink: 0;
}
#releasepage .as-row__state .dot {
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
#releasepage .as-row__state .dot svg { width: 9px; height: 9px; }
#releasepage .as-row--in      .as-row__state { color: var(--ac-color-success-ink); }
#releasepage .as-row--in      .as-row__state .dot { background: var(--ac-color-success); }
#releasepage .as-row--wip     .as-row__state { color: var(--ac-color-warning-ink); }
#releasepage .as-row--wip     .as-row__state .dot { background: var(--ac-color-warning); }
#releasepage .as-row--wip     .as-row__state .dot::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff;
}
#releasepage .as-row--overdue .as-row__state { color: var(--ac-color-accent); }
#releasepage .as-row--overdue .as-row__state .dot { background: var(--ac-color-accent); }
#releasepage .as-row__dl {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--ac-color-line); background: var(--ac-color-paper);
  display: flex; align-items: center; justify-content: center;
  color: var(--ac-color-t3); cursor: pointer; text-decoration: none;
  flex-shrink: 0; transition: all 120ms;
}
#releasepage .as-row__dl:hover {
  border-color: var(--ac-color-line-strong); color: var(--ac-color-ink);
}
#releasepage .as-row__dl svg { width: 14px; height: 14px; }
#releasepage .as-row__dl--text {
  width: auto; padding: 0 14px;
  font-family: var(--ac-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ac-color-ink);
}
#releasepage .as-summary {
  display: flex; align-items: center; gap: 16px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ac-color-line);
  font-family: var(--ac-font-mono); font-size: 11px;
  color: var(--ac-color-t2); letter-spacing: 0.03em;
}
#releasepage .as-summary .seg { display: inline-flex; align-items: center; gap: 6px; }
#releasepage .as-summary .seg b { color: var(--ac-color-ink); font-weight: 700; }
#releasepage .as-summary .seg .d { width: 8px; height: 8px; border-radius: 50%; }
#releasepage .as-summary .seg .d.g { background: var(--ac-color-success); }
#releasepage .as-summary .seg .d.a { background: var(--ac-color-warning); }
#releasepage .as-summary .seg .d.r { background: var(--ac-color-accent); }
#releasepage .as-summary__bar {
  flex: 1; height: 6px; border-radius: 3px;
  background: var(--ac-color-warm-shadow); overflow: hidden; display: flex;
}
#releasepage .as-summary__bar i { height: 100%; display: block; }
#releasepage .as-summary__bar i.g { background: var(--ac-color-success); }
#releasepage .as-summary__bar i.a { background: var(--ac-color-warning); }
#releasepage .as-summary__bar i.r { background: var(--ac-color-accent); }

/* ─── DETAILS SECTION (#61) ─────────────────────────────────────── */
#releasepage .dt-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 32px;
}
#releasepage .dt-group { min-width: 0; }
#releasepage .dt-group__title {
  font-family: var(--ac-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ac-color-t3);
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid var(--ac-color-line);
  display: flex; align-items: center; gap: 8px;
}
#releasepage .dt-row {
  display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
  gap: 12px; padding: 6px 0; align-items: baseline;
}
#releasepage .dt-row__k {
  font-size: 12px; color: var(--ac-color-t2); white-space: nowrap;
}
#releasepage .dt-row__v {
  font-family: var(--ac-font-mono); font-size: 12px;
  color: var(--ac-color-ink); font-weight: 600; letter-spacing: 0.02em;
  text-align: left;
}

/* ─── Editable Details inputs ───────────────────────────────────── */
#releasepage .dt-input {
  width: 100%; box-sizing: border-box;
  font-family: var(--ac-font-mono); font-size: 12px; font-weight: 600;
  color: var(--ac-color-ink); letter-spacing: 0.02em;
  padding: 6px 9px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  outline: none;
  transition: border-color 120ms ease, background 120ms ease;
}
#releasepage .dt-input::placeholder {
  color: var(--ac-color-t3); font-weight: 500; letter-spacing: 0;
}
#releasepage .dt-input:hover {
  border-color: var(--ac-color-line);
  background: var(--ac-color-paper);
}
#releasepage .dt-input:focus {
  border-color: var(--ac-color-accent);
  background: var(--ac-color-paper);
  box-shadow: 0 0 0 3px var(--ac-color-accent-wash);
}
#releasepage .dt-input--sel {
  appearance: none; -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ac-color-t3) 50%),
    linear-gradient(135deg, var(--ac-color-t3) 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 24px;
}
#releasepage .dt-input--ro {
  font-family: var(--ac-font-mono); font-size: 12px; font-weight: 600;
  color: var(--ac-color-ink); letter-spacing: 0.02em;
  padding: 6px 9px;
}

/* ─── Full-width groups for Writers / Musicians ───────────────────── */
#releasepage .dt-group--full { grid-column: 1 / -1; }
#releasepage .dt-group__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid var(--ac-color-line);
}
#releasepage .dt-group__head .dt-group__title {
  padding-bottom: 0; margin-bottom: 0; border-bottom: 0;
}
.dt-btn-add {
  font-family: var(--ac-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 11px; border-radius: var(--ac-radius-pill);
  border: 1px solid var(--ac-color-line);
  background: var(--ac-color-paper); color: var(--ac-color-ink);
  cursor: pointer;
}
.dt-btn-add:hover {
  border-color: var(--ac-color-line-strong);
  background: var(--ac-color-warm);
}

/* ─── Multi-entry tables (Writers · Musicians) ────────────────────── */
#releasepage .dt-multi {
  display: flex; flex-direction: column; gap: 4px;
}
#releasepage .dt-multi__head,
#releasepage .dt-multi__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 150px 130px 80px 32px;
  gap: 8px; align-items: center;
}
#releasepage .dt-multi__head--m,
#releasepage .dt-multi__row--m {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) 32px;
}
#releasepage .dt-split-total {
  font-family: var(--ac-font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ac-color-t3); margin-left: 12px;
  padding: 3px 8px; border-radius: 999px;
  background: var(--ac-color-warm);
}
#releasepage .dt-split-total b { color: var(--ac-color-ink); font-weight: 700; }
#releasepage .dt-split-total--ok {
  background: rgba(34,197,94,0.10); color: #15803d;
}
#releasepage .dt-split-total--ok b { color: #15803d; }
#releasepage .dt-split-total--over {
  background: rgba(239,68,68,0.10); color: #b91c1c;
}
#releasepage .dt-split-total--over b { color: #b91c1c; }
#releasepage .dt-multi__head {
  font-family: var(--ac-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ac-color-t3);
  padding: 0 9px 4px;
}
#releasepage .dt-multi__row {
  padding: 4px 0;
}
.dt-btn-rm {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--ac-color-line);
  background: var(--ac-color-paper);
  color: var(--ac-color-t3); font-size: 15px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dt-btn-rm:hover {
  border-color: var(--ac-color-accent-chip);
  color: var(--ac-color-accent);
  background: var(--ac-color-accent-wash);
}
.dt-empty {
  padding: 14px 9px;
  font-size: 12px; color: var(--ac-color-t2);
  background: var(--ac-color-warm);
  border-radius: 8px;
}
.dt-empty b { color: var(--ac-color-ink); font-weight: 700; }
#releasepage .dt-quote {
  background: var(--ac-color-nested); border-left: 3px solid var(--ac-color-accent);
  border-radius: 0 10px 10px 0; padding: 12px 16px;
  font-size: 13.5px; font-style: italic; color: var(--ac-color-body);
  line-height: 1.5; margin-bottom: 10px;
}
#releasepage .dt-quote cite {
  display: block; font-style: normal; font-family: var(--ac-font-mono);
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ac-color-t3); margin-top: 8px;
}
#releasepage .dt-hook {
  display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center;
  padding: 9px 12px; background: var(--ac-color-nested);
  border-left: 3px solid var(--ac-color-accent); border-radius: 0 8px 8px 0;
  margin-bottom: 8px;
}
#releasepage .dt-hook .ts {
  font-family: var(--ac-font-mono); font-size: 13px; font-weight: 700;
  color: var(--ac-color-accent);
}
#releasepage .dt-hook .note { font-size: 12px; color: var(--ac-color-body); }

/* Per-track accordion (EP/Album) */
#releasepage .dt-tracks-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 22px 0 12px;
}
#releasepage .dt-tracks-head .t {
  font-family: var(--ac-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ac-color-t3);
}
#releasepage .dt-tracks-head .hint {
  font-family: var(--ac-font-mono); font-size: 10px;
  color: var(--ac-color-muted); letter-spacing: 0.04em;
}
#releasepage .dt-track {
  border: 1px solid var(--ac-color-line); border-radius: 10px;
  overflow: hidden; background: var(--ac-color-bg); margin-bottom: 6px;
}
#releasepage .dt-track__head {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 22px;
  gap: 13px; align-items: center; padding: 10px 13px; cursor: pointer;
  transition: background 120ms;
}
#releasepage .dt-track__head:hover { background: var(--ac-color-warm); }
#releasepage .dt-track.is-open .dt-track__head {
  border-bottom: 1px solid var(--ac-color-line); background: var(--ac-color-nested);
}
#releasepage .dt-track__num {
  font-family: var(--ac-font-mono); font-size: 12px; font-weight: 700;
  color: var(--ac-color-t3); text-align: center;
}
#releasepage .dt-track__name {
  font-size: 13.5px; font-weight: 600; color: var(--ac-color-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
#releasepage .dt-track__name .lead {
  font-family: var(--ac-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ac-color-accent);
  background: var(--ac-color-accent-chip); padding: 1px 6px;
  border-radius: 999px; margin-left: 8px; vertical-align: middle;
}
#releasepage .dt-track__isrc {
  font-family: var(--ac-font-mono); font-size: 10.5px;
  color: var(--ac-color-muted); letter-spacing: 0.02em; white-space: nowrap;
}
#releasepage .dt-track__chev {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ac-color-warm); display: flex; align-items: center;
  justify-content: center; color: var(--ac-color-t3);
  transition: transform 200ms, background 200ms;
}
#releasepage .dt-track__chev svg { width: 12px; height: 12px; }
#releasepage .dt-track.is-open .dt-track__chev {
  transform: rotate(180deg); background: var(--ac-color-ink); color: #fff;
}
#releasepage .dt-track__body { display: none; padding: 12px 14px 14px; }
#releasepage .dt-track.is-open .dt-track__body { display: block; }
#releasepage .dt-track__body .dt-grid { grid-template-columns: repeat(2, 1fr); gap: 4px 28px; }
#releasepage .dt-track__body .dt-row { padding: 4px 0; }
#releasepage .dt-track__tag {
  display: inline-flex; align-items: center;
  font-family: var(--ac-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
}
#releasepage .dt-track__tag.exp   { background: var(--ac-color-ink); color: #fff; }
#releasepage .dt-track__tag.clean { background: var(--ac-color-warm); color: var(--ac-color-t3); }

/* ─── TIMELINE SECTION (#62) ────────────────────────────────────── */
#releasepage .tl { position: relative; padding-left: 6px; }
#releasepage .tl-node {
  position: relative; display: grid; grid-template-columns: 26px 1fr;
  gap: 16px; padding-bottom: 18px;
}
#releasepage .tl-node:last-child { padding-bottom: 0; }
#releasepage .tl-node::before {
  content: ""; position: absolute; left: 12px; top: 22px; bottom: -4px;
  width: 2px; background: var(--ac-color-line);
}
#releasepage .tl-node:last-child::before { display: none; }
#releasepage .tl-node__dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ac-color-paper); border: 2px solid var(--ac-color-line-strong);
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
#releasepage .tl-node__dot svg { width: 12px; height: 12px; color: var(--ac-color-t3); }
#releasepage .tl-node.done .tl-node__dot {
  background: var(--ac-color-success); border-color: var(--ac-color-success);
}
#releasepage .tl-node.done .tl-node__dot svg { color: #fff; }
#releasepage .tl-node.now .tl-node__dot {
  background: var(--ac-color-accent); border-color: var(--ac-color-accent);
  box-shadow: 0 0 0 4px var(--ac-color-accent-chip);
}
#releasepage .tl-node.now .tl-node__dot svg { color: #fff; }
#releasepage .tl-node__body { padding-top: 1px; min-width: 0; }
#releasepage .tl-node__top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
#releasepage .tl-node__date {
  font-family: var(--ac-font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ac-color-t3);
}
#releasepage .tl-node.now .tl-node__date { color: var(--ac-color-accent); }
#releasepage .tl-node__name {
  font-size: 14px; font-weight: 700; color: var(--ac-color-ink); margin-top: 3px;
}
#releasepage .tl-node__desc {
  font-size: 12px; color: var(--ac-color-t2); margin-top: 3px; line-height: 1.4;
}
#releasepage .tl-node__remove {
  position: absolute; top: -2px; right: 0; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid var(--ac-color-line);
  background: var(--ac-color-paper); color: var(--ac-color-t3);
  display: none; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px; line-height: 1;
}
#releasepage .tl-node__remove:hover {
  color: var(--ac-color-accent); border-color: var(--ac-color-accent-chip);
  background: var(--ac-color-accent-chip);
}
#releasepage .tl.is-editing .tl-node__remove { display: flex; }
#releasepage .tl.is-editing .tl-node__body { padding-right: 28px; }
#releasepage .tl.is-editing .tl-node__date,
#releasepage .tl.is-editing .tl-node__name {
  outline: none; border-radius: 4px;
  border-bottom: 1px dashed var(--ac-color-line-strong);
  padding: 1px 3px; margin-left: -3px;
  cursor: text; display: inline-block;
}
#releasepage .tl.is-editing [contenteditable]:focus {
  border-bottom-style: solid; border-bottom-color: var(--ac-color-accent);
  background: var(--ac-color-accent-wash);
}
#releasepage .tl-add {
  display: none; align-items: center; justify-content: center; gap: 7px;
  width: 100%; margin-top: 12px; padding: 10px;
  border: 1px dashed var(--ac-color-line-strong); border-radius: 10px;
  background: transparent; font-family: var(--ac-font-mono); font-size: 10px;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ac-color-t3); cursor: pointer;
}
#releasepage .tl-add:hover { color: var(--ac-color-ink); border-color: var(--ac-color-ink); }
#releasepage .tl.is-editing + .tl-add { display: flex; }

/* ─── PRESS SECTION (#63) ───────────────────────────────────────── */
#releasepage .pr-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
#releasepage .pr-block__title {
  font-family: var(--ac-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ac-color-t3);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
#releasepage .pr-row {
  display: grid; grid-template-columns: 34px 1fr auto;
  gap: 12px; align-items: center; padding: 11px 0;
  border-bottom: 1px solid var(--ac-color-line);
  text-decoration: none; color: inherit; cursor: pointer;
}
#releasepage .pr-row:last-child { border-bottom: 0; }
#releasepage .pr-row:hover .pr-row__name { color: var(--ac-color-accent); }
#releasepage .pr-row__ic {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--ac-color-warm); display: flex; align-items: center;
  justify-content: center; color: var(--ac-color-t3);
}
#releasepage .pr-row__ic svg { width: 16px; height: 16px; }
#releasepage .pr-row__body { min-width: 0; }
#releasepage .pr-row__name {
  font-size: 13px; font-weight: 600; color: var(--ac-color-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 120ms;
}
#releasepage .pr-row__meta {
  font-family: var(--ac-font-mono); font-size: 10px;
  color: var(--ac-color-t3); margin-top: 3px; letter-spacing: 0.03em;
}
#releasepage .pr-row__status {
  font-family: var(--ac-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
#releasepage .pr-row__status--secured { background: var(--ac-color-success-bg); color: var(--ac-color-success-ink); }
#releasepage .pr-row__status--pending { background: var(--ac-color-warning-bg); color: var(--ac-color-warning-ink); }
#releasepage .pr-empty {
  padding: 30px 18px; text-align: center;
  color: var(--ac-color-t3); font-family: var(--ac-font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  border: 1px dashed var(--ac-color-line); border-radius: 10px;
}

/* Responsive — collapse dt-grid/pr-grid on small screens */
@media (max-width: 900px) {
  #releasepage .as-grid,
  #releasepage .dt-grid,
  #releasepage .pr-grid { grid-template-columns: 1fr; }
}

/* ─── Asset row click affordance + edit modal ──────────────────────
   Rows become clickable when not in 'in' state — clicking opens an
   inline editor to paste the URL (file rows accept any hosted URL;
   link rows accept the destination URL). On save, the asset is
   persisted to release.assets and the row repaints with In state. */
#releasepage .as-row { cursor: pointer; }
#releasepage .as-row--in { cursor: default; }
#releasepage .as-row[data-rp-asset-edit-id] { cursor: pointer; }

.rp-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.rp-modal.is-open { display: flex; }
.rp-modal__scrim {
  position: absolute; inset: 0;
  background: rgba(14, 12, 11, 0.55); backdrop-filter: blur(3px);
}
.rp-modal__card {
  position: relative; background: var(--ac-color-paper);
  border-radius: 16px; width: 100%; max-width: 480px;
  box-shadow: 0 30px 80px -20px rgba(20,15,10,0.55); overflow: hidden;
}
.rp-modal__head {
  padding: 22px 24px 14px; border-bottom: 1px solid var(--ac-color-line);
}
.rp-modal__eyebrow {
  font-family: var(--ac-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ac-color-t3);
}
.rp-modal__title {
  font-family: var(--ac-font-display); font-size: 22px;
  letter-spacing: -0.02em; margin: 7px 0 4px;
}
.rp-modal__sub { font-size: 12.5px; color: var(--ac-color-t2); }
.rp-modal__body { padding: 18px 24px 20px; display: flex; flex-direction: column; gap: 14px; }
.rp-modal__field { display: flex; flex-direction: column; gap: 6px; }
.rp-modal__field[hidden] { display: none; }
.rp-modal__label {
  font-family: var(--ac-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac-color-t3);
}
.rp-modal__input {
  width: 100%; font-family: var(--ac-font-mono); font-size: 12.5px;
  padding: 11px 13px; border: 1.5px solid var(--ac-color-line-strong);
  border-radius: 8px; background: var(--ac-color-paper); color: var(--ac-color-ink);
  outline: none; box-sizing: border-box;
}
.rp-modal__input:focus {
  border-color: var(--ac-color-accent);
  box-shadow: 0 0 0 3px var(--ac-color-accent-wash);
}
.rp-modal__input--ta {
  min-height: 320px; max-height: 60vh;
  resize: vertical;
  font-family: var(--ac-font-mono); font-size: 13px;
  line-height: 1.55; white-space: pre-wrap;
}
.rp-modal.is-text .rp-modal__card { max-width: 640px; }
.rp-modal__card--wide { max-width: 640px; }

/* Preset manager modal styles. */
.rp-preset__list {
  display: flex; flex-direction: column; gap: 8px;
}
.rp-preset__card {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: var(--ac-color-bg);
  border: 1px solid var(--ac-color-line);
  border-radius: 10px;
}
.rp-preset__card-main { flex: 1; min-width: 0; }
.rp-preset__card-name {
  font-weight: 700; font-size: 13px; color: var(--ac-color-ink);
  letter-spacing: -0.01em;
}
.rp-preset__card-meta {
  font-family: var(--ac-font-mono); font-size: 10px;
  color: var(--ac-color-t3); letter-spacing: 0.04em; margin-top: 3px;
}
.rp-preset__card-actions {
  display: flex; gap: 6px;
}
.rp-preset__rows {
  display: flex; flex-direction: column; gap: 6px;
}
.rp-preset__row {
  display: grid; grid-template-columns: 1fr 32px; gap: 8px; align-items: center;
}
.rp-modal__foot {
  padding: 14px 24px 18px; border-top: 1px solid var(--ac-color-line);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.rp-modal__btn {
  font-family: var(--ac-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 9px 16px;
  border-radius: var(--ac-radius-pill); border: 1px solid var(--ac-color-line);
  background: var(--ac-color-paper); color: var(--ac-color-ink);
  cursor: pointer;
}
.rp-modal__btn--primary {
  background: var(--ac-color-ink); color: #fff; border-color: var(--ac-color-ink);
}
.rp-modal__btn--danger {
  color: var(--ac-color-accent); border-color: var(--ac-color-accent-chip);
}
.rp-modal__btn--danger:hover {
  background: var(--ac-color-accent-chip);
}
.rp-modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--ac-color-line); background: var(--ac-color-paper);
  color: var(--ac-color-t3); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.rp-modal__close:hover {
  background: var(--ac-color-warm); color: var(--ac-color-ink);
}

/* ─── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  #releasepage .ov-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  #releasepage { padding: 20px 18px 48px; }
  #releasepage .ws-head { grid-template-columns: 100px 1fr; gap: 18px; padding: 22px; }
  #releasepage .ws-head__art { width: 100px; height: 100px; border-radius: 14px; }
  #releasepage .ws-head__title { font-size: 28px; }
  #releasepage .sl-preview { grid-template-columns: 1fr; }
  #releasepage .sl-phone { max-width: 240px; }
  #releasepage .ads-row { grid-template-columns: 40px 1fr; }
  #releasepage .ads-row__metrics { grid-column: 1 / -1; justify-content: flex-start; }
}