/* ARTIST CNTRL — Dashboard
 * Page-specific styles. All values via tokens.
 */

/* ─── HERO ROW ──────────────────────────────────── */
.dash-hero {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--ac-space-4);
  margin-bottom: var(--ac-space-4);
}

/* SPOTLIGHT CARD */
.spotlight {
  min-height: 380px;
  display: flex;
  flex-direction: column;
}
/* The .spotlight class above sets display: flex which beats the
   HTML `hidden` attribute's display: none from the user-agent
   stylesheet. Without this override, ANY .spotlight element with
   [hidden] set in the markup (merch spotlight, production
   spotlight) was visible to every role — including artist, who
   should see only the streaming spotlight.
   The role-based show-for-merch / show-for-production rules below
   set display: block with higher specificity, so they still win
   for the intended role. This rule just restores the default
   "hidden means hidden" behavior for everyone else. */
.spotlight[hidden] { display: none; }

.spotlight__bg {
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 320px;
  height: 320px;
  opacity: 0.08;
  background: radial-gradient(circle, var(--ac-color-on-accent) 0%, transparent 70%);
  pointer-events: none;
}

/* Press-photo background — when assets.photo2 (Press 02) is set,
   dashboard-wiring.js adds the .spotlight--has-photo class and sets
   the background-image inline. The photo fills the card, then a
   crimson-to-transparent gradient overlay keeps the headline, stats,
   and rank cards readable. (Falls back to photo1 → photo3 inside the
   wiring layer if photo2 hasn't been uploaded yet.) */
.spotlight.spotlight--has-photo {
  background-image:
    linear-gradient(135deg,
      rgba(26, 14, 13, 0.92) 0%,
      rgba(45, 21, 24, 0.78) 45%,
      rgba(139, 26, 43, 0.55) 100%),
    var(--spotlight-photo);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.spotlight.spotlight--has-photo .spotlight__bg {
  display: none;
}

.spotlight__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ac-space-4);
  margin-bottom: var(--ac-space-6);
  position: relative;
}

.spotlight__eyebrow {
  font-size: var(--ac-fs-sm);
  letter-spacing: var(--ac-tracking-mega);
  color: rgba(255, 255, 255, 0.6);
  font-weight: var(--ac-fw-semibold);
  margin: 0 0 var(--ac-space-2);
}

.spotlight__title {
  font-size: var(--ac-fs-5xl);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-tighter);
  margin: 0;
  line-height: var(--ac-leading-tight);
}

.spotlight__sub {
  font-size: var(--ac-fs-lg);
  color: var(--ac-color-text-subtle);
  margin: var(--ac-space-2) 0 0;
  line-height: var(--ac-leading-snug);
}

.spotlight__delta {
  flex-shrink: 0;
  padding: 6px var(--ac-space-3);
  border-radius: var(--ac-radius-pill);
  background: var(--ac-color-on-accent);
  color: var(--ac-color-accent);
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wide);
  white-space: nowrap;
}

.spotlight__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ac-space-5);
  margin-bottom: var(--ac-space-6);
  position: relative;
}

.stat-block--inverse .stat-block__label  { color: rgba(255, 255, 255, 0.5); margin-bottom: 6px; }
.stat-block--inverse .stat-block__value  { color: var(--ac-color-on-accent); font-size: var(--ac-fs-5xl); margin: 0; line-height: 1.05; }
.stat-block--inverse .stat-block__delta--up { color: #a7f3d0; }
/* Smaller value variant for the "Top mover" stat — name + percent
   wrapped together; the 5xl band-name treatment doesn't fit. */
.stat-block__value--small { font-size: var(--ac-fs-xl) !important; line-height: 1.1; display: flex; flex-direction: column; gap: 2px; }
.stat-block__top-name {
  font-size: var(--ac-fs-md);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-tight);
  color: rgba(255, 255, 255, 0.95);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.stat-block__top-pct {
  font-size: var(--ac-fs-2xl);
  font-weight: var(--ac-fw-black);
  color: #a7f3d0;
  letter-spacing: var(--ac-tracking-tighter);
}
.stat-block__top-pct--neutral { color: var(--ac-color-on-accent); }

.spotlight__posts {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  border-radius: var(--ac-radius-lg);
  padding: var(--ac-space-4);
  margin-top: auto;
  position: relative;
}

.spotlight__posts-label {
  font-size: var(--ac-fs-xs);
  letter-spacing: var(--ac-tracking-widest);
  color: rgba(255, 255, 255, 0.5);
  font-weight: var(--ac-fw-semibold);
  margin: 0 0 var(--ac-space-3);
  text-transform: uppercase;
}

.top-posts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--ac-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-post {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--ac-radius-md);
  overflow: hidden;
}

.top-post__thumb {
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--ac-color-p-instagram), var(--ac-color-accent));
  display: flex;
  align-items: flex-end;
  padding: 6px;
  font-size: var(--ac-fs-2xs);
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-on-accent);
}
.top-post__thumb[data-rank="2"] { background: linear-gradient(155deg, var(--ac-color-p-instagram), var(--ac-color-accent)); }
.top-post__thumb[data-rank="3"] { background: linear-gradient(175deg, var(--ac-color-p-instagram), var(--ac-color-accent)); }
.top-post__thumb[data-rank="4"] { background: linear-gradient(195deg, var(--ac-color-p-instagram), var(--ac-color-accent)); }
.top-post__thumb[data-rank="5"] { background: linear-gradient(215deg, var(--ac-color-p-instagram), var(--ac-color-accent)); }

/* When the worker returned a Shopify product image, the wiring adds
   the --has-image modifier + an inline `background-image: url(...)`
   style. Inline style wins over the rank-gradient `background:`
   shorthand for background-image specifically, so we just need to
   add size/position/repeat so the image fills the square cleanly. */
.top-post__thumb--has-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.4); /* fallback while image loads */
}

.top-post__meta {
  padding: 6px var(--ac-space-2);
  font-size: var(--ac-fs-xs);
  color: var(--ac-color-on-accent);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.top-post__likes { color: var(--ac-color-p-instagram); }

/* ─── This Month's Spotlight — biggest-mover cards ────────────────
   The 5-column grid stays the same as the old Top Posts layout, but
   each card now shows a uniform [thumb · name · source · delta %]
   regardless of whether it's a song or a platform. Same visual
   treatment for everything. */
.top-post__rank {
  font-size: var(--ac-fs-2xs);
  font-weight: var(--ac-fw-bold);
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: var(--ac-tracking-wider);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.top-post__meta {
  padding: 8px var(--ac-space-2) 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.top-post__name {
  margin: 0;
  font-size: var(--ac-fs-xs);
  font-weight: var(--ac-fw-bold);
  color: rgba(255, 255, 255, 0.95);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.top-post__src {
  margin: 0;
  font-size: 10px;
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.top-post__delta {
  margin: 4px 0 0;
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-black);
  letter-spacing: var(--ac-tracking-tight);
  line-height: 1;
}
.top-post__delta--up      { color: #34d399; }
.top-post__delta--down    { color: #fb7185; }
.top-post__delta--neutral { color: rgba(255, 255, 255, 0.55); }

/* Empty / placeholder state — spans the whole grid row. */
.top-post--empty {
  grid-column: 1 / -1;
  display: block;
  background: transparent;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--ac-fs-sm);
  padding: var(--ac-space-3);
}
.top-post--placeholder { opacity: 0.35; }

/* Stat-strip neutral delta (fallback when we don't have history yet). */
.stat-block__delta--neutral { color: rgba(255, 255, 255, 0.55); }

/* ─── RIGHT RAIL ────────────────────────────────── */
.dash-rail {
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-3);
}

.card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ac-space-3);
}

.card__title {
  margin: 0;
  font-size: var(--ac-fs-md);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-ink);
}

/* OPPORTUNITIES — scrolls internally once it has more rows than fit
   in the right rail. We cap the list (not the card) so the card head
   with its + button stays pinned. Soft scrollbar styling on WebKit
   keeps it feeling native; Firefox falls back to its own. */
.opportunities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ac-color-line) transparent;
}
.opportunities::-webkit-scrollbar { width: 6px; }
.opportunities::-webkit-scrollbar-track { background: transparent; }
.opportunities::-webkit-scrollbar-thumb {
  background: var(--ac-color-line);
  border-radius: 3px;
}
.opportunities::-webkit-scrollbar-thumb:hover { background: var(--ac-color-line-strong); }

/* ── Invite-style opportunity row (rehearsal/content/placement/pr) ──
   Compact rich card for the dashboard's right-rail Opportunities
   list. Mirrors the mobile m-op-card--invite pattern: type eyebrow
   with inviter band, title in display font, time/address sub, two
   action buttons (I'M IN / Can't make it). Server fans the invite
   into the user's manualOpps; we stamp responses[<myId>] when they
   tap an action and append a confirmed event to schedule on accept. */
.opportunity--invite {
  display: block;
  padding: 0;
  border-bottom: 1px solid var(--ac-color-line-subtle);
}
.opportunity__invite { padding: 12px 0; }
.opportunity__invite-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.opportunity__invite-eyebrow {
  font-family: var(--ac-font-mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ac-color-accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.opportunity__invite-when {
  font-family: var(--ac-font-mono);
  font-size: 10px; color: var(--ac-color-t3);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.opportunity__invite-title {
  font-family: var(--ac-font-display, 'Archivo Black', sans-serif);
  font-size: 16px; letter-spacing: -0.005em;
  color: var(--ac-color-ink);
  text-transform: uppercase;
  line-height: 1.15;
}
.opportunity__invite-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ac-color-t2);
  line-height: 1.35;
}
.opportunity__invite-actions {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px; margin-top: 10px;
}
.opportunity__invite-btn {
  padding: 8px 10px;
  border-radius: 999px;
  font-family: var(--ac-font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
}
.opportunity__invite-btn--in {
  background: var(--ac-color-accent);
  color: #fff; border: none;
}
.opportunity__invite-btn--in:hover { opacity: 0.9; }
.opportunity__invite-btn--pass {
  background: transparent;
  color: var(--ac-color-ink);
  border: 1px solid var(--ac-color-line-strong);
}
.opportunity__invite-btn--pass:hover {
  background: var(--ac-color-warm);
}

/* Outgoing-invite status block — replaces the action buttons when
   the row is an opp the viewer created (kind: 'mine'). Shows the
   in/pending/pass summary on top + chip list of invitees underneath. */
.opportunity__invite-status {
  margin-top: 10px;
  font-family: var(--ac-font-mono);
  font-size: 10px;
  color: var(--ac-color-t3);
  letter-spacing: 0.04em;
}
.opportunity__invite-chips {
  margin-top: 8px;
  display: flex; flex-wrap: wrap;
  gap: 6px;
}

/* ── Needs Media (content roles, dashboard right rail) ──
   Visual sibling of .opportunities. Each row has a date stub on the
   left + venue title + chevron, and clicking opens the link/dismiss
   modal. List is capped at 5 items in JS so no scroll needed. */
.needs-media-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.needs-media-list__empty {
  padding: var(--ac-space-3) 0;
  font-size: 13px;
  color: var(--ac-color-t3);
}
.needs-media-row {
  display: grid;
  grid-template-columns: 60px 1fr 14px;
  gap: var(--ac-space-3);
  align-items: center;
  width: 100%;
  padding: var(--ac-space-3) 0;
  border: 0;
  border-bottom: 1px solid var(--ac-color-line-subtle);
  background: transparent;
  color: var(--ac-color-ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.needs-media-row:last-child { border-bottom: none; }
.needs-media-row:hover { background: rgba(0,0,0,0.015); }
.needs-media-row__date {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ac-color-accent, #8B1A2B);
  text-transform: uppercase;
}
.needs-media-row__venue {
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px; letter-spacing: -0.005em;
  text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.needs-media-row__chev { color: var(--ac-color-t3); }

/* Add-Media modal — full-viewport backdrop + centered card. Same
   actions as the mobile bottom sheet: link input + Save + Dismiss. */
.needs-media-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,10,10,0.55);
  display: flex; align-items: center; justify-content: center;
  animation: nmFade 160ms ease-out;
}
@keyframes nmFade { from { opacity: 0 } to { opacity: 1 } }
.needs-media-modal__card {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 460px;
  margin: var(--ac-space-4);
  padding: 24px 24px 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  animation: nmRise 220ms cubic-bezier(0.2,0.9,0.3,1);
}
@keyframes nmRise { from { transform: translateY(20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.needs-media-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.needs-media-modal__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ac-color-accent, #8B1A2B);
  text-transform: uppercase;
}
.needs-media-modal__close {
  background: transparent; border: 0;
  font-size: 22px; line-height: 1;
  color: var(--ac-color-t3);
  padding: 4px; cursor: pointer;
}
.needs-media-modal__title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 20px; letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ac-color-ink);
  margin-bottom: 4px;
}
.needs-media-modal__date {
  font-size: 13px;
  color: var(--ac-color-t2);
  margin-bottom: 18px;
}
.needs-media-modal__label {
  display: block;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ac-color-t3);
  margin-bottom: 6px;
}
.needs-media-modal__input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ac-color-line);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ac-color-ink);
  background: #fafafa;
  box-sizing: border-box;
  outline: none;
}
.needs-media-modal__input:focus {
  border-color: var(--ac-color-accent, #8B1A2B);
  background: #fff;
}
.needs-media-modal__save,
.needs-media-modal__dismiss,
.needs-media-modal__cancel {
  display: block; width: 100%;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 10px;
  cursor: pointer;
}
.needs-media-modal__save {
  margin-top: 14px;
  background: var(--ac-color-ink, #0a0a0a);
  color: #fff;
  border: 0;
}
.needs-media-modal__dismiss {
  margin-top: 8px;
  background: transparent;
  color: #b22d4a;
  border: 1px solid rgba(178,45,74,0.25);
}
.needs-media-modal__cancel {
  margin-top: 6px;
  background: transparent;
  color: var(--ac-color-t3);
  border: 0;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.opportunity {
  display: flex;
  align-items: flex-start;
  gap: var(--ac-space-3);
  padding: var(--ac-space-3) 0;
  border-bottom: 1px solid var(--ac-color-line-subtle);
}
.opportunity:last-child { border-bottom: none; }
.opportunity .tag { margin-top: 2px; }

.opportunity__title {
  margin: 0;
  font-size: var(--ac-fs-md);
  font-weight: var(--ac-fw-semibold);
  color: var(--ac-color-ink);
  line-height: var(--ac-leading-snug);
}

.opportunity__sub {
  margin: 2px 0 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
}

/* MERCH SUMMARY */
.merch-summary__totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ac-space-3);
  margin-bottom: var(--ac-space-3);
}
.merch-summary .stat-block__value { font-size: var(--ac-fs-4xl); }

.merch-summary__pending {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ac-space-3);
  background: var(--ac-color-paper);
  border-radius: var(--ac-radius-md);
  margin-bottom: var(--ac-space-3);
  text-decoration: none;
  color: inherit;
}

.merch-summary__pending-count {
  margin: 2px 0 0;
  font-size: var(--ac-fs-2xl);
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-ink);
  letter-spacing: var(--ac-tracking-tighter);
}

.merch-summary__pending-arrow {
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-semibold);
  color: var(--ac-color-accent);
}

.merch-summary__orders {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.merch-order {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--ac-space-2);
  font-size: var(--ac-fs-sm);
  padding: var(--ac-space-1) 0;
}

.merch-order__main { min-width: 0; color: var(--ac-color-t2); }
.merch-order__main strong { color: var(--ac-color-ink); font-weight: var(--ac-fw-semibold); }

.merch-order__total {
  font-family: var(--ac-font-mono);
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-ink);
}

.merch-order__when {
  color: var(--ac-color-t2);
  font-size: var(--ac-fs-xs);
  min-width: 28px;
  text-align: right;
}

/* NEXT SHOW */
.next-show {
  display: flex;
  align-items: center;
  gap: var(--ac-space-3);
  padding: var(--ac-space-4);
}

.next-show__date {
  width: 56px;
  padding: var(--ac-space-2) 0;
  text-align: center;
  background: var(--ac-color-ink);
  color: var(--ac-color-on-accent);
  border-radius: var(--ac-radius-md);
}

.next-show__month {
  display: block;
  font-size: var(--ac-fs-2xs);
  letter-spacing: var(--ac-tracking-wider);
  opacity: 0.7;
  text-transform: uppercase;
}

.next-show__day {
  display: block;
  font-size: var(--ac-fs-3xl);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-tighter);
}

.next-show__body { flex: 1; }
.next-show__eyebrow {
  margin: 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
  letter-spacing: var(--ac-tracking-wide);
  text-transform: uppercase;
}
.next-show__venue {
  margin: 2px 0;
  font-size: var(--ac-fs-lg);
  font-weight: var(--ac-fw-semibold);
  color: var(--ac-color-ink);
}
.next-show__meta {
  margin: 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
}

/* ─── SECTION SHELL ─────────────────────────────── */
.dash-section { margin-bottom: var(--ac-space-4); }

.section-label__title--small {
  font-size: var(--ac-fs-xs);
  margin: 0 0 var(--ac-space-3);
  color: var(--ac-color-t2);
}

/* ─── STREAMING ─────────────────────────────────── */
.dash-streaming__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--ac-space-3);
}

.platform-card {
  display: flex;
  flex-direction: column;
}

.platform-card--lg { padding: var(--ac-space-6); box-shadow: var(--ac-shadow-card); }

.platform-card__head {
  display: flex;
  align-items: center;
  gap: var(--ac-space-3);
  /* Drop in a little top breathing room — the icon + name was hugging
     the card edge with the bigger card padding above. */
  margin-top: var(--ac-space-2);
  margin-bottom: var(--ac-space-5);
}

.platform-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--ac-radius-md);
  color: var(--ac-color-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;                       /* hide the legacy unicode glyph */
  font-weight: var(--ac-fw-bold);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% 60%;
}

.platform-card__icon--sm {
  width: 28px;
  height: 28px;
  border-radius: var(--ac-radius-sm);
  background-size: 65% 65%;
}

/* Platform logos — full-color brand SVGs from /site/icons/ instead of
   the previous CSS mask-image-from-CDN trick. The local files are
   already brand-colored so we drop the background-color tint and just
   render the file as a centered background image. */
.platform-card__icon[data-platform-icon] {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: transparent;
  /* Clear any leftover mask from earlier rules. */
  -webkit-mask-image: none;
          mask-image: none;
}
.platform-card__icon[data-platform-icon="spotify"] {
  background-image: url("/icons/spotify-square-color-icon.svg");
}
.platform-card__icon[data-platform-icon="amazon"] {
  background-image: url("/icons/brandbird-Amazon%20Music-logomark.svg");
}
.platform-card__icon[data-platform-icon="apple"] {
  background-image: url("/icons/brandbird-Apple%20Music-logomark.svg");
}

/* Color rails on streaming platform cards — match the social tile look. */
.platform-card[data-platform="spotify"] {
  border-left: 4px solid var(--ac-color-p-spotify);
}
.platform-card[data-platform="amazon"] {
  border-left: 4px solid var(--ac-color-p-amazon);
}
.platform-card[data-platform="apple"] {
  border-left: 4px solid var(--ac-color-p-apple);
}
/* Amazon + Apple stacked vertically in the streaming row's right rail */
.dash-streaming__stack {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: var(--ac-space-3);
}
.dash-streaming__stack .platform-card { padding: var(--ac-space-4); }
.dash-streaming__stack .platform-card__name { font-size: var(--ac-fs-sm); }
.dash-streaming__stack .stat-block__value { font-size: var(--ac-fs-2xl); }

.platform-card__name {
  margin: 0;
  font-size: var(--ac-fs-md);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wide);
  text-transform: uppercase;
  color: var(--ac-color-ink);
}

.platform-card__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ac-space-4);
  padding-bottom: var(--ac-space-5);
  margin-bottom: var(--ac-space-5);
  border-bottom: 1px solid var(--ac-color-line-subtle);
}
.platform-card--sm .platform-card__kpis { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.platform-card__kpis--two { grid-template-columns: repeat(2, 1fr); }
.platform-card .stat-block__value { font-size: var(--ac-fs-3xl); }
.platform-card .stat-block__value small { font-size: var(--ac-fs-sm); color: var(--ac-color-t2); font-weight: var(--ac-fw-semibold); }

.platform-card__detail {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--ac-space-6);
}

/* TOP SONGS */
.top-songs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ac-space-3); }

.top-song {
  display: grid;
  grid-template-columns: 20px 1fr 80px;
  align-items: center;
  gap: var(--ac-space-3);
}

.top-song__rank {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
}

.top-song__bar { position: relative; }

.top-song__title {
  margin: 0 0 var(--ac-space-1);
  font-size: var(--ac-fs-base);
  font-weight: var(--ac-fw-semibold);
  color: var(--ac-color-ink);
}

/* Inline popularity tag inside the song title — " (Popularity 84/100)".
   Painted async by hydrateTopSongPopularity in dashboard-wiring.js.
   Smaller + italic + lighter color so it reads as supporting metadata
   rather than competing with the song name itself. Empty by default
   until the Songstats fetch resolves; localStorage-cached for 12h so
   repeat visits paint instantly. */
.top-song__pop {
  font-size: 0.80em;
  font-style: italic;
  font-weight: var(--ac-fw-regular);
  color: var(--ac-color-t3);
  margin-left: 2px;
}

.top-song__fill {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--ac-color-warm-shadow);
  overflow: hidden;
  position: relative;
}

.top-song__fill::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--bar-pct);
  background: linear-gradient(90deg, var(--bar-color), color-mix(in srgb, var(--bar-color) 80%, transparent));
  border-radius: 3px;
}

.top-song__count {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-base);
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-ink);
  text-align: right;
}

/* TOP PLAYLISTS */
.top-playlists { display: flex; flex-direction: column; gap: var(--ac-space-2); }

.playlist-tile {
  background: var(--ac-color-bg);
  border-radius: var(--ac-radius-md);
  padding: var(--ac-space-3);
}

.playlist-tile__count {
  margin: 0;
  font-size: var(--ac-fs-3xl);
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-ink);
}
.playlist-tile__count span {
  font-size: var(--ac-fs-base);
  color: var(--ac-color-t2);
  font-weight: var(--ac-fw-semibold);
}

.playlist-tile__sub {
  margin: 2px 0 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
}

.dash-streaming__minor {
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-3);
}

/* ─── SOCIALS ───────────────────────────────────── */
.socials-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--ac-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-tile {
  background: var(--ac-color-paper);
  border-radius: var(--ac-radius-lg);
  padding: var(--ac-space-4);
  border: 1px solid var(--ac-color-line);
  border-left: 4px solid var(--platform-color);
  position: relative;
  overflow: hidden;
}

.social-tile__rail {
  display: none;
}

.social-tile__head {
  display: flex;
  align-items: center;
  gap: var(--ac-space-2);
  margin-bottom: var(--ac-space-3);
}

/* Social tile icons — local <img> tags pointing at the full-color brand
   SVGs in /icons/. The element itself sizes the box; the SVG inside
   keeps its native aspect via object-fit. No background tint, no CSS
   mask — the brand SVGs are already rendered in their own colors. */
.social-tile__icon {
  width: 28px; height: 28px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
}

.social-tile__name {
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-ink);
}

.social-tile__value {
  margin: 2px 0 var(--ac-space-2);
  font-size: var(--ac-fs-3xl);
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-ink);
  letter-spacing: var(--ac-tracking-tighter);
}

.social-tile .stat-block__label { margin: 0; }
.social-tile__cta {
  margin: 0;
  font-size: var(--ac-fs-xs);
  color: var(--ac-color-t2);
}

/* "Last post · Xd ago" stamp under the IG (and future FB/TT/YT)
   social tile values. Mono so it reads as metadata vs. headline.
   Color escalates: neutral grey ≤6d → amber 7-13d → red 14+. The
   class flip happens in dashboard-wiring.js's renderLastPostStamp;
   the bare element starts hidden (no data fetched yet). */
.social-tile__lastpost {
  margin: 6px 0 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ac-color-t3);
}
.social-tile__lastpost--warn { color: #b45309; }     /* amber-700 */
.social-tile__lastpost--bad  { color: #b91c1c; }     /* red-700 */

/* ─── CONTACTS TAB ──────────────────────────────── */
.contacts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--ac-space-5);
  align-items: start;
}
.contacts-rail {
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-5);
}
/* Small descriptive subtitle that sits under each card title to
   explain what the section contains. Used on Crew + Teams cards. */
.contacts-card__sub {
  margin: -4px 0 8px;
  font-size: 12px;
  color: var(--ac-color-t3, #9ca3af);
  line-height: 1.4;
}

/* ── Crew card overrides (artist-side contacts page) ──────────────
   Crew is a small list (band members + day-to-day team — usually
   under 15 people), so we don't need the spacious "directory" sizing
   the contacts list uses elsewhere. Tighter rows = whole list fits
   without scrolling for most bands. */
.contacts-card--list .contact-list {
  gap: 6px;
  max-height: none;        /* drop the 480px scroll cap — small list */
  overflow-y: visible;
  scrollbar-gutter: auto;
  padding: 2px;
}
.contacts-card--list .contact-row {
  border-radius: 10px;
}
.contacts-card--list .contact-row__head {
  padding: 8px 12px;       /* was 14px 18px */
  gap: 12px;
}
.contacts-card--list .contact-row .contact-avatar,
.contacts-card--list .contact-row .contact-row__avatar {
  width: 32px;             /* was ~40px+ */
  height: 32px;
  font-size: 12px;
}
.contacts-card--list .contact-row__name,
.contacts-card--list .contact-row__title {
  font-size: 14px;         /* slightly smaller name */
}
.contacts-card--list .contact-row__sub,
.contacts-card--list .contact-row__role {
  font-size: 11px;         /* smaller sub-line */
}

/* ── Teams card (partner orgs) ────────────────────────────────────
   Each .team-list__item renders one org the band is connected to:
   org name (large), type pill (LABEL / MANAGEMENT / BOOKING), and
   member count. Click expands inline to show org members for picking.
   Empty state mirrors .contact-list__empty visual. */
.team-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.team-list__empty {
  padding: 18px 4px;
  font-size: 13px;
  color: var(--ac-color-t3, #9ca3af);
  text-align: center;
}
.team-list__item {
  /* Sized to match the Crew row exactly: 32px avatar, 8/12 padding,
     14px name, 11px meta. So the two cards read as one continuous
     list of people + teams. */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--ac-color-line, #e7e7e7);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.team-list__item:hover {
  border-color: var(--ac-color-ink, #0f1115);
  background: #fafafa;
}
.team-list__avatar {
  /* position:relative is CRITICAL — the org photo <img> inside is
     position:absolute. Without a positioned parent the img escapes
     upward and stretches to the nearest positioned ancestor (body /
     viewport), painting the label logo across the whole page. */
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ac-color-tone, #5a3a3a);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  text-transform: uppercase;
  overflow: hidden;
}
.team-list__main {
  flex: 1 1 auto;
  min-width: 0;
}
.team-list__name {
  font-weight: 700;
  font-size: 14px;
  color: var(--ac-color-ink, #0f1115);
  margin: 0;
  line-height: 1.2;
}
.team-list__meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--ac-color-t3, #9ca3af);
  line-height: 1.2;
}
.team-list__type-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  color: var(--ac-color-t2, #6b7280);
  flex: 0 0 auto;
}
.team-list__type-pill--label      { background: #fdecec; color: #b8262e; }
.team-list__type-pill--management { background: #e7eefe; color: #2a4fb0; }
.team-list__type-pill--booking    { background: #eaf6ec; color: #2b6f5b; }
.contacts-card {
  padding: var(--ac-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-4);
}
.contacts-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-space-3);
}
/* Match .section-label__title (canonical small label style). */
.contacts-card__title {
  margin: 0;
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-base);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t2);
}

/* Pill buttons used in the card heads ─────────────── */
.btn-pill {
  border: 1px solid var(--ac-color-line);
  background: var(--ac-color-paper);
  color: var(--ac-color-ink);
  border-radius: var(--ac-radius-pill);
  padding: 8px 16px;
  font-family: var(--ac-font-body);
  font-weight: var(--ac-fw-semibold);
  font-size: var(--ac-fs-sm);
  cursor: pointer;
  transition: background var(--ac-duration-fast) var(--ac-ease-standard),
              transform var(--ac-duration-fast) var(--ac-ease-standard);
}
.btn-pill:hover { background: var(--ac-color-warm); }
.btn-pill:active { transform: translateY(1px); }
.btn-pill--dark {
  background: var(--ac-color-ink);
  color: var(--ac-color-on-accent);
  border-color: var(--ac-color-ink);
}
.btn-pill--dark:hover { background: #1a1614; }
.btn-pill--ghost {
  background: var(--ac-color-paper);
}
/* Bandsintown action button. Black background per design call so the
   official BIT wordmark (which is white + teal in the over-dark variant)
   reads at full contrast — the teal accent inside the logo pops on
   black. The wordmark itself is sourced from BIT's brand kit. */
.btn-bit-push {
  background: #0e0c0b;
  color: #ffffff;
  border-color: #0e0c0b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  /* Symmetric padding so the lockup sits centered inside the pill;
     extra horizontal room because the wordmark is wider than the
     "Push to" text. */
  padding: 8px 18px;
  letter-spacing: 0.01em;
}
.btn-bit-push:hover { background: #1a1614; border-color: #1a1614; color: #ffffff; }
.btn-bit-push:active { transform: translateY(1px); }
/* Official BIT wordmark — sized to match the cap-height of the
   adjacent "Push to" text. The SVG is 749×153 (≈4.9:1), so a 22px
   tall image renders ~108px wide. The wordmark glyph sits noticeably
   below the visual center of its own viewBox (typography descender
   reservation), so we crop the bottom whitespace via a negative
   margin on the bottom + matching margin on the top so flexbox keeps
   it visually centered against the "Push to" cap-height. */
.btn-bit-push__wordmark {
  height: 22px;
  width: auto;
  flex: 0 0 auto;
  display: block;
  /* Shift up + reduce the effective bounding box so the wordmark's
     visible center lands on the text's visual midline. */
  margin-top: -4px;
  margin-bottom: -2px;
}
/* "Pushed" confirmation — black-on-black pill matched to the action
   button's color so completed/queued states feel like part of the
   same family. Italics on the prefix word signals past-tense state. */
.btn-bit-pushed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px 18px;
  background: #0e0c0b;
  color: #ffffff;
  border: 1px solid #0e0c0b;
  text-decoration: none;
  letter-spacing: 0.01em;
  cursor: pointer;
  /* Subtle inset highlight so the pill reads as "completed" not "live". */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.btn-bit-pushed em {
  font-style: italic;
  font-weight: var(--ac-fw-semibold);
  opacity: 0.85;
}
.btn-bit-pushed:hover { background: #1a1614; border-color: #1a1614; color: #ffffff; }
.btn-bit-pushed--static { cursor: default; }
.btn-bit-pushed--static:hover { background: #0e0c0b; border-color: #0e0c0b; }

/* Search field ────────────────────────────────────── */
.contacts-search {
  width: 100%;
  border: 1px solid var(--ac-color-line);
  background: var(--ac-color-paper);
  border-radius: var(--ac-radius-pill);
  padding: 12px 18px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-md);
  color: var(--ac-color-ink);
}
.contacts-search:focus {
  outline: none;
  border-color: var(--ac-color-ring);
  box-shadow: 0 0 0 3px var(--ac-color-accent-chip);
}

/* ─── Bandsintown push confirmation modal ───────────────────────
   Two-step flow: "looking up venue + lineup" → confirmation screen
   with resolved venue/festival + per-artist verification badges.
   Mirrors the bandsett.js (pre-redesign) BIT push UX so the artist
   sees what's actually about to land in BIT before it ships. */
.bit-push-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14, 12, 11, 0.55);
  backdrop-filter: blur(4px);
  padding: 24px;
}
.bit-push-modal {
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-xl);
  width: 100%;
  max-width: 540px;
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: var(--ac-shadow-lg);
  display: flex; flex-direction: column;
}
.bit-push-modal__head {
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--ac-color-line-subtle);
}
.bit-push-modal__head h3 {
  margin: 0;
  font-family: var(--ac-font-body);
  font-weight: var(--ac-fw-black);
  font-size: var(--ac-fs-lg);
  letter-spacing: var(--ac-tracking-tight);
}
.bit-push-modal__body { padding: 16px 22px 22px; display: flex; flex-direction: column; gap: 12px; }
.bit-push-flyer {
  margin: -16px -22px 4px; /* full-bleed against the rounded modal edge */
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 320px;
  overflow: hidden;
}
.bit-push-flyer img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  display: block;
}
.bit-push-meta { margin: 0; font-size: var(--ac-fs-sm); color: var(--ac-color-t2); }
.bit-push-section {
  margin: 8px 0 4px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
}
.bit-push-rows { display: flex; flex-direction: column; gap: 6px; }
.bit-push-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--ac-color-bg, #f6f1ea);
  border-radius: 10px;
}
.bit-push-row__check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--ac-color-success);
  color: #fff;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.bit-push-row__check--warn { background: var(--ac-color-warning, #f59e0b); }
.bit-push-row__main { flex: 1; min-width: 0; }
.bit-push-row__name { font-weight: var(--ac-fw-bold); font-size: 0.92rem; }
.bit-push-row__sub { font-size: 0.75rem; color: var(--ac-color-t3); }
.bit-push-row__role {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--ac-fw-bold);
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--ac-color-t2);
}
.bit-push-row__you { font-size: 0.7em; opacity: 0.55; font-weight: 500; }
.bit-push-ticket {
  font-size: 0.78rem;
  word-break: break-all;
  color: var(--ac-color-t2);
  padding: 6px 10px;
  background: var(--ac-color-bg, #f6f1ea);
  border-radius: 8px;
}
.bit-push__loading {
  text-align: center;
  padding: 18px 0;
  color: var(--ac-color-t2);
  font-size: var(--ac-fs-sm);
}
.bit-push__lookup-log { display: flex; flex-direction: column; gap: 4px; }
.bit-push__lookup-ok { color: var(--ac-color-success); font-size: 0.78rem; }
.bit-push__lookup-warn { color: var(--ac-color-warning, #f59e0b); font-size: 0.78rem; }
.bit-push-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding-top: 10px;
  border-top: 1px solid var(--ac-color-line-subtle);
  margin-top: 6px;
}
.bit-push-status {
  font-size: 0.78rem;
  text-align: center;
  padding-top: 4px;
}
.bit-push-status--ok    { color: var(--ac-color-success); }
.bit-push-status--error { color: var(--ac-color-danger); }
/* Confirmation modal "Push now" button — uses Bandsintown's brand
   teal so the primary action visually matches the action button on
   the show details view. Stays teal even while loading ("Pushing
   now…") so the color doesn't blink during the request. */
.btn-bit-confirm {
  background: #00cec8;
  color: #ffffff;
  border: 1px solid #00cec8;
  border-radius: var(--ac-radius-pill);
  padding: 9px 22px;
  font-family: var(--ac-font-body);
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--ac-duration-fast) var(--ac-ease-standard),
              transform var(--ac-duration-fast) var(--ac-ease-standard);
}
.btn-bit-confirm:hover { background: #0fb8b3; border-color: #0fb8b3; }
.btn-bit-confirm:active { transform: translateY(1px); }
.btn-bit-confirm:disabled {
  /* Locked-in teal during the in-flight push so the color stays
     consistent with the idle state. */
  background: #00cec8;
  border-color: #00cec8;
  opacity: 0.85;
  cursor: progress;
}

/* Contact list rows ───────────────────────────────── */
.contact-list {
  list-style: none;
  padding: 4px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-3);
  /* Cap height so the contacts card doesn't push the whole page; scroll
     through additional rows in place. ~6 rows visible. */
  max-height: 480px;
  /* Always-visible scrollbar — `scroll` (not `auto`) keeps the gutter
     reserved even when content fits, so the visual rhythm matches
     across every scrollable list in the app. The custom webkit thumb
     color also opts out of macOS overlay-scrollbar auto-hide. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--ac-radius-lg);
  /* DO NOT set `scrollbar-width: thin` here — modern Chrome respects
     that Firefox property and renders its OWN thin overlay scrollbar
     (which auto-hides on macOS). Without it, Chrome falls back to
     ::-webkit-scrollbar customization which is persistent + classic
     (non-overlay) regardless of macOS "Show scroll bars" preference.
     For Firefox we still want `scrollbar-color` though. */
  scrollbar-color: rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.04);
}
.contact-list::-webkit-scrollbar { width: 6px; }
.contact-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
}
.contact-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
}
.contact-list:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.3); }
.contact-list__empty {
  text-align: center;
  padding: var(--ac-space-8) var(--ac-space-4);
  color: var(--ac-color-t2);
  font-size: var(--ac-fs-md);
}
/* A/B/C section letters between contact rows — same alpha grouping
   the mobile contacts list uses. Renders as a flat <li> separator
   inside the contact-list <ul>; not a contact row, not interactive,
   no border-radius, no hover state. */
.contact-list__section {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ac-color-t3);
  padding: var(--ac-space-3) var(--ac-space-2) var(--ac-space-1);
  margin-top: var(--ac-space-2);
  border: 0;
  background: transparent;
  pointer-events: none;
}
.contact-list__section:first-child { margin-top: 0; padding-top: 0; }
.contact-row {
  display: flex;
  flex-direction: column;
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-xl);
  transition: border-color var(--ac-duration-fast) var(--ac-ease-standard);
}
.contact-row:hover { border-color: var(--ac-color-line-strong); }
.contact-row--open { border-color: var(--ac-color-line-strong); }
.contact-row__head {
  display: flex;
  align-items: center;
  gap: var(--ac-space-4);
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}
.contact-row__head:active { transform: scale(0.998); }
.contact-row__details {
  border-top: 1px solid var(--ac-color-line-subtle);
  padding: var(--ac-space-4) 18px;
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-3);
}
.contact-row__detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ac-space-3);
}
.contact-row__detail {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--ac-color-nested);
  border-radius: var(--ac-radius-md);
  text-decoration: none;
  color: var(--ac-color-ink);
  font-size: var(--ac-fs-sm);
  min-width: 0;
}
.contact-row__detail:hover { background: var(--ac-color-warm); }
.contact-row__detail--empty { color: var(--ac-color-t3); cursor: default; }
.contact-row__detail--empty:hover { background: var(--ac-color-nested); }
.contact-row__detail-icon { flex: 0 0 auto; opacity: 0.7; }
.contact-row__detail-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-space-2);
}
.contact-row__danger { color: var(--ac-color-danger); }
.contact-row__danger:hover { border-color: var(--ac-color-danger); background: rgba(190, 18, 60, 0.06); }
.contact-row__team-badge {
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-xs);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--ac-radius-pill);
  margin-left: 8px;
  vertical-align: middle;
}
.contact-row__team-badge--joined  { background: rgba(22, 163, 74, 0.14); color: #15803d; }
.contact-row__team-badge--pending { background: rgba(234, 179, 8, 0.18); color: #a16207; }
@media (max-width: 768px) {
  .contact-row__detail-grid { grid-template-columns: 1fr; }
}
.contact-row__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--ac-radius-circle);
  display: grid;
  place-items: center;
  font-family: var(--ac-font-display);
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-sm);
  color: #fff;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--avatar-from, #444), var(--avatar-to, #111));
}
.contact-row__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.contact-row__name {
  margin: 0;
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-md);
  color: var(--ac-color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-row__sub {
  margin: 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-row__tag {
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-semibold);
  padding: 6px 14px;
  border-radius: var(--ac-radius-pill);
  flex: 0 0 auto;
}
.contact-row__tag--artist  { background: #ffe1e1; color: #b21d1d; }
.contact-row__tag--manager { background: #d9e8ff; color: #1d4ed8; }
.contact-row__tag--booker  { background: #e7e0d2; color: #5a4520; }
.contact-row__tag--member  { background: #e6f4e6; color: #1f7a3a; }
.contact-row__tag--label   { background: #ede5fa; color: #5a3aa8; }
.contact-row__tag--other   { background: var(--ac-color-warm); color: var(--ac-color-t2); }
/* Editable variant on the LEFT TEAM BADGE — for artist/manager users,
   the per-band VIEW badge next to the contact name becomes tappable.
   The native <select> is overlaid invisibly on top of the badge so
   the OS picker fires while the styled label stays put. A small
   caret reminds the user the badge is interactive. The right-side
   role pill (signup role) stays readonly — only changeable in admin. */
.contact-row__team-badge--editable {
  position: relative;
  cursor: pointer;
  padding-right: 18px;  /* room for caret */
}
.contact-row__team-badge--editable::after {
  content: '▾';
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 9px; opacity: 0.6; pointer-events: none;
}
.contact-row__team-badge--editable:hover { filter: brightness(0.97); }
.contact-row__team-badge-select {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  font: inherit;
  -webkit-appearance: none; appearance: none;
  border: 0; background: transparent;
}
.contact-row__chevron {
  font-size: var(--ac-fs-xl);
  color: var(--ac-color-t3);
  flex: 0 0 auto;
}

/* Contact card modal ─────────────────────────────────
   Replaces the old inline-expand panel. Tap a contact row → this slides
   in from the top of the viewport. Pearl-skinned to match every other
   sheet in the app (cream raised surface, soft border, large radius).
   ───────────────────────────────────────────────────── */
.contact-card-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: none;
  align-items: flex-start; justify-content: center;
  padding: 6vh 16px 16px;
  background: rgba(20, 12, 10, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.contact-card-overlay[data-open="1"] { display: flex; }
.contact-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: 22px;
  box-shadow: 0 24px 56px -16px rgba(50, 20, 15, 0.28);
  padding: 22px 22px 20px;
  display: flex; flex-direction: column;
  gap: 16px;
}
.contact-card__close {
  position: absolute; top: 12px; right: 14px;
  appearance: none; border: none; background: transparent;
  width: 32px; height: 32px;
  font-size: 24px; line-height: 1;
  color: var(--ac-color-t2);
  cursor: pointer;
  border-radius: 999px;
}
.contact-card__close:hover { color: var(--ac-color-ink); background: var(--ac-color-warm); }
.contact-card__head {
  display: flex; align-items: center; gap: 14px;
  padding-right: 28px;
}
.contact-card__avatar {
  width: 56px; height: 56px;
  border-radius: var(--ac-radius-circle);
  display: grid; place-items: center;
  font-family: var(--ac-font-display);
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-md);
  color: #fff;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--avatar-from, #444), var(--avatar-to, #111));
}
.contact-card__heading { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.contact-card__name {
  margin: 0;
  font-size: var(--ac-fs-xl);
  font-weight: var(--ac-fw-black);
  letter-spacing: var(--ac-tracking-tighter);
  line-height: 1.15;
  color: var(--ac-color-ink);
}
.contact-card__sub {
  margin: 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
}
.contact-card__pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.contact-card__team {
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-xs);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--ac-radius-pill);
}
.contact-card__team--joined  { background: rgba(22, 163, 74, 0.14); color: #15803d; }
.contact-card__team--pending { background: rgba(234, 179, 8, 0.18); color: #a16207; }

.contact-card__details {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 480px) { .contact-card__details { grid-template-columns: 1fr; } }
.contact-card__detail {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px;
  background: var(--ac-color-nested);
  border-radius: var(--ac-radius-md);
  text-decoration: none;
  color: var(--ac-color-ink);
  min-width: 0;
  transition: background var(--ac-duration-fast) var(--ac-ease-standard);
}
.contact-card__detail:hover { background: var(--ac-color-warm); }
.contact-card__detail--empty { color: var(--ac-color-t3); cursor: default; }
.contact-card__detail--empty:hover { background: var(--ac-color-nested); }
.contact-card__detail-label {
  font-size: 10px;
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t3);
}
.contact-card__detail-value {
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-semibold);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.contact-card__actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
}
.contact-card__danger { color: var(--ac-color-danger); }
.contact-card__danger:hover { border-color: var(--ac-color-danger); background: rgba(190, 18, 60, 0.06); }

/* Add-contact form (reuses the .contact-card shell) ── */
.contact-card--add { gap: 14px; }
.contact-card__add-head { padding-right: 28px; display: flex; flex-direction: column; gap: 4px; }

/* Person | Company segmented toggle. Two pills inside a tinted track,
   active pill swaps to the dark fill — matches the surface-switcher
   visual language so the form feels like a single contiguous control. */
.contact-card__type-toggle {
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  border-radius: var(--ac-radius-md);
  border: 1px solid var(--ac-color-line);
  background: var(--ac-color-bg);
  align-self: flex-start;
}
.contact-card__type-pill {
  appearance: none;
  border: 0;
  background: transparent;
  height: 28px;
  padding: 0 14px;
  border-radius: 6px;
  font-family: var(--ac-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-color-t3);
  cursor: pointer;
  transition: color var(--ac-duration-fast) var(--ac-ease-standard),
              background var(--ac-duration-fast) var(--ac-ease-standard);
}
.contact-card__type-pill:hover { color: var(--ac-color-ink); }
.contact-card__type-pill.is-active {
  color: #fff;
  background: var(--ac-color-ink);
  cursor: default;
}

.contact-card__form { display: flex; flex-direction: column; gap: 12px; }
.contact-card__form[hidden] { display: none; }
.contact-card__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .contact-card__form-row { grid-template-columns: 1fr; } }
.contact-card__field { display: flex; flex-direction: column; gap: 5px; }
.contact-card__field-label {
  font-size: 11px;
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t2);
}
.contact-card__field-hint {
  font-weight: var(--ac-fw-regular);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ac-color-t3);
  margin-left: 4px;
}
.contact-card__input {
  width: 100%;
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  padding: 11px 13px;
  font-family: inherit;
  font-size: var(--ac-fs-md);
  color: var(--ac-color-ink);
  background: var(--ac-color-paper);
  box-sizing: border-box;
  transition: border-color var(--ac-duration-fast) var(--ac-ease-standard),
              box-shadow   var(--ac-duration-fast) var(--ac-ease-standard);
}
.contact-card__input:focus {
  outline: none;
  border-color: var(--ac-color-ring);
  box-shadow: 0 0 0 3px var(--ac-color-accent-chip);
}
.contact-card__error {
  background: rgba(190, 18, 60, 0.08);
  color: var(--ac-color-accent);
  border-radius: var(--ac-radius-md);
  padding: 9px 12px;
  font-size: var(--ac-fs-sm);
}

/* Top 8 grid ──────────────────────────────────────── */
.top8-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--ac-space-3);
  aspect-ratio: 2 / 1;
}
.top8-tile {
  border-radius: var(--ac-radius-lg);
  display: flex;
  align-items: flex-end;
  padding: 10px;
  position: relative;
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-semibold);
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(135deg, var(--tile-from, #f3a05c), var(--tile-to, #b3460c));
  border: 1px solid transparent;
  transition: transform var(--ac-duration-fast) var(--ac-ease-standard);
}
.top8-tile:hover { transform: translateY(-1px); }
.top8-tile--empty {
  background: var(--ac-color-warm);
  color: var(--ac-color-t3);
  font-size: var(--ac-fs-2xl);
  font-weight: var(--ac-fw-medium);
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--ac-color-line-strong);
}
/* Drag affordances — tiles are always draggable. Grab cursor on hover,
   half-opacity on the dragged tile, accent outline + soft scale on the
   drop target so the landing slot is always obvious. */
.top8-tile[draggable="true"]        { cursor: grab; }
.top8-tile[draggable="true"]:active { cursor: grabbing; }
.top8-tile.is-dragging              { opacity: 0.5; }
.top8-tile.is-drag-over,
.top8-tile--empty.is-drag-over {
  outline: 2px solid var(--ac-color-accent);
  outline-offset: 2px;
  transform: scale(1.02);
}
/* Remove × — sits in the top-right corner, hidden until hover so it
   doesn't fight the photo for visual real estate. */
.top8-tile__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(14, 12, 11, 0.6);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 120ms var(--ac-ease-standard), transform 120ms var(--ac-ease-standard);
  display: grid;
  place-items: center;
  padding: 0;
}
.top8-tile:hover .top8-tile__remove,
.top8-tile:focus-within .top8-tile__remove { opacity: 1; transform: scale(1); }
.top8-tile__remove:hover { background: rgba(0, 0, 0, 0.85); }
/* Friend rows in the Friends list are draggable into Top 8. The grab
   cursor + half-opacity drag state are the affordance — no visual chrome
   on the row itself, since the title attribute hints "Drag onto Top 8". */
.friend-row[draggable="true"]        { cursor: grab; }
.friend-row[draggable="true"]:active { cursor: grabbing; }
.friend-row.is-dragging              { opacity: 0.5; }

/* Friends card ────────────────────────────────────── */
.friend-list {
  list-style: none;
  padding: 4px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-3);
  /* Same scroll cap as the Contacts list — the Friends card sits below
     Top 8 in the rail, so capping it keeps the whole rail bounded. */
  max-height: 360px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--ac-radius-lg);
}
.friend-list__empty {
  text-align: center;
  padding: var(--ac-space-6) var(--ac-space-4);
  color: var(--ac-color-t2);
  font-size: var(--ac-fs-md);
}
.friend-row {
  display: flex;
  align-items: center;
  gap: var(--ac-space-3);
  padding: 12px 16px;
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-xl);
}
.friend-row__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--ac-radius-circle);
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--avatar-from, #b3083e), var(--avatar-to, #5e0420));
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--ac-font-display);
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-xs);
}
.friend-row__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.friend-row__name {
  margin: 0;
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-md);
  color: var(--ac-color-ink);
}
.friend-row__sub {
  margin: 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
}

/* ─── RELEASES TAB ──────────────────────────────── */
.release-hero {
  border-radius: var(--ac-radius-3xl);
  overflow: hidden;
  position: relative;
  margin-bottom: var(--ac-space-5);
  /* Artwork only — subtle gradient fallback when no art uploaded. */
  background: var(--release-art) center/cover no-repeat,
              linear-gradient(135deg, #c4356c 0%, var(--ac-color-accent) 60%, #4a0a16 100%);
  color: #fff;
  min-height: 360px;
  box-shadow: var(--ac-shadow-lg);
}
/* Subtle bottom-only scrim — keeps the title and meta readable without
   tinting the artwork. Only the lower 45% of the hero darkens. */
.release-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}
.release-hero__inner {
  position: relative;
  z-index: 1;
  padding: var(--ac-space-8) var(--ac-space-8) var(--ac-space-6);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: inherit;
  /* Tight gap so title + date read as a caption pair, not two
     unrelated lines. The actions row gets a separate margin. */
  gap: 4px;
}
.release-hero__badge {
  align-self: flex-end;
  position: absolute;
  top: var(--ac-space-6);
  right: var(--ac-space-6);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--ac-radius-pill);
  padding: 6px 14px;
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
}
.release-hero__meta {
  margin: 0;
  font-size: var(--ac-fs-md);
  color: rgba(255, 255, 255, 0.78);
}
.release-hero__title {
  margin: 0;
  font-family: var(--ac-font-body);
  font-weight: var(--ac-fw-black);
  font-size: var(--ac-fs-5xl);
  line-height: var(--ac-leading-tight);
  letter-spacing: var(--ac-tracking-tighter);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.release-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-space-2);
  margin-top: var(--ac-space-4);
}
.release-hero__actions .btn-pill {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.92);
  color: var(--ac-color-ink);
}
.release-hero__actions .btn-pill--dark {
  background: rgba(0, 0, 0, 0.72);
  border-color: rgba(0, 0, 0, 0.72);
  color: #fff;
}
.release-hero__actions .btn-pill--ghost {
  background: rgba(255, 255, 255, 0.92);
}
.release-hero__actions .btn-pill[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Releases bottom 2-up grid */
.releases-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ac-space-5);
}
.releases-bottom-grid > .schedule-card { margin-bottom: 0; }

/* Previous releases list */
.release-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ac-space-2); }
.release-list__empty {
  text-align: center;
  padding: var(--ac-space-8) var(--ac-space-4);
  color: var(--ac-color-t2);
  font-size: var(--ac-fs-md);
}
/* Each release row is a <details> element so it expands natively. */
.release-row {
  border-radius: var(--ac-radius-xl);
  border: 1px solid var(--ac-color-line);
  background: var(--ac-color-paper);
  overflow: hidden;
}
.release-row[open] { box-shadow: var(--ac-shadow-card); }
.release-row__head {
  /* The clickable row summary. */
  display: grid;
  grid-template-columns: 56px 1fr auto auto auto;
  align-items: center;
  gap: var(--ac-space-3);
  padding: var(--ac-space-2) var(--ac-space-3);
  cursor: pointer;
  list-style: none;          /* hide default summary triangle */
}
.release-row__head::-webkit-details-marker { display: none; }
.release-row__head:hover { background: var(--ac-color-nested); }
.release-row__art {
  width: 56px;
  height: 56px;
  border-radius: var(--ac-radius-md);
  background: center/cover no-repeat var(--ac-color-nested);
  display: grid;
  place-items: center;
  color: var(--ac-color-t3);
  font-size: var(--ac-fs-2xl);
}
.release-row__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.release-row__name { margin: 0; font-weight: var(--ac-fw-bold); font-size: var(--ac-fs-md); color: var(--ac-color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.release-row__sub  { margin: 0; font-size: var(--ac-fs-sm); color: var(--ac-color-t2); }
.release-row__badge {
  font-size: var(--ac-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ac-tracking-wider);
  font-weight: var(--ac-fw-bold);
  padding: 4px 10px;
  border-radius: var(--ac-radius-pill);
  background: var(--ac-color-success-bg);
  color: var(--ac-color-success);
}
.release-row__copy {
  background: var(--ac-color-bg);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-pill);
  padding: 6px 14px;
  font-weight: var(--ac-fw-semibold);
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-ink);
  cursor: pointer;
}
.release-row__copy:hover { background: var(--ac-color-warm); }
.release-row__chevron {
  font-size: var(--ac-fs-lg);
  color: var(--ac-color-t3);
  transition: transform var(--ac-duration-base) var(--ac-ease-standard);
  width: 20px;
  text-align: center;
}
.release-row[open] .release-row__chevron { transform: rotate(180deg); }

/* Expanded panel — analytics for this release. */
.release-panel {
  padding: var(--ac-space-4) var(--ac-space-5) var(--ac-space-5);
  border-top: 1px solid var(--ac-color-line-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-4);
}
.release-panel__url {
  display: flex;
  align-items: center;
  gap: var(--ac-space-2);
  padding: 8px 14px;
  background: var(--ac-color-nested);
  border-radius: var(--ac-radius-md);
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
  word-break: break-all;
}
.release-panel__url-link { color: var(--ac-color-ink); text-decoration: none; flex: 1; }
.release-panel__url-link:hover { text-decoration: underline; }
.release-panel__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ac-space-3);
}
.release-metric {
  background: var(--ac-color-nested);
  border-radius: var(--ac-radius-md);
  padding: var(--ac-space-3) var(--ac-space-4);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.release-metric__label {
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-t2);
}
.release-metric__value {
  font-family: var(--ac-font-body);
  font-weight: var(--ac-fw-black);
  font-size: var(--ac-fs-3xl);
  color: var(--ac-color-ink);
}
.release-metric__sub  { font-size: var(--ac-fs-sm); color: var(--ac-color-t2); }

.release-panel__platforms { display: flex; flex-direction: column; gap: var(--ac-space-2); }
.release-panel__platforms .smart-link-row { background: var(--ac-color-nested); border-color: var(--ac-color-line-subtle); }
.release-panel__actions { display: flex; flex-wrap: wrap; gap: var(--ac-space-2); }
.release-panel__actions a, .release-panel__actions button {
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-pill);
  padding: 6px 14px;
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-semibold);
  text-decoration: none;
  color: var(--ac-color-ink);
  background: var(--ac-color-paper);
  cursor: pointer;
}
.release-panel__actions a:hover, .release-panel__actions button:hover { background: var(--ac-color-warm); }

/* Smart-link clicks list */
.smart-link-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ac-space-2); }
.smart-link-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  align-items: center;
  gap: var(--ac-space-3);
  padding: var(--ac-space-2) var(--ac-space-3);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-xl);
  background: var(--ac-color-paper);
  position: relative;
  overflow: hidden;
}
.smart-link-row__icon {
  width: 32px; height: 32px;
  border-radius: var(--ac-radius-sm);
  display: grid; place-items: center;
  color: #fff;
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-md);
  overflow: hidden;
  flex-shrink: 0;
}
/* Brandbird SVGs come pre-colored — let them fill the tile, no bg tint. */
.smart-link-row__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.smart-link-row__icon { background: transparent; }
/* CDN-fallback platforms (no local SVG) keep the brand-colored chip. */
.smart-link-row__icon--tidal       { background: #000000; }
.smart-link-row__icon--bandsintown { background: #00CEC8; }
.smart-link-row__name { font-weight: var(--ac-fw-bold); }
.smart-link-row__count { font-weight: var(--ac-fw-bold); color: var(--ac-color-ink); }
.smart-link-row__share { font-size: var(--ac-fs-sm); color: var(--ac-color-t2); }
.smart-link-row__bar {
  grid-column: 2 / -1;
  height: 4px;
  background: var(--ac-color-nested);
  border-radius: var(--ac-radius-pill);
  position: relative;
  overflow: hidden;
}
.smart-link-row__bar-fill {
  position: absolute; inset: 0 auto 0 0;
  width: var(--bar-pct, 0%);
  background: var(--bar-color, var(--ac-color-accent));
  border-radius: var(--ac-radius-pill);
}

/* ─── SCHEDULE TAB ──────────────────────────────── */
/* Stats strip — four pearl tiles with chunky display values. */
.schedule-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ac-space-4);
  margin-bottom: var(--ac-space-5);
}
.stat-tile {
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-2xl);
  padding: var(--ac-space-5) var(--ac-space-6);
  /* Explicit 3-row grid: label pinned top, value centered in the
     stretched middle row, sub pinned bottom. The middle row taking
     1fr means the BIG number always lands on the tile's vertical
     midline — independent of label wrap or sub-line length. Tiles
     in a row also stretch to equal height by default, so values
     align left-to-right across the row even with varying content. */
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;       /* horizontal centering for every cell */
  align-items: center;
  text-align: center;
  gap: var(--ac-space-1);
  min-height: 140px;
  box-shadow: var(--ac-shadow-card);
}
/* Force each row to span the full tile width so text-align: center
   actually has a width to center within (fixes inline-shrink-wrap
   making values appear left-leaning at certain font sizes). */
.stat-tile__label,
.stat-tile__value,
.stat-tile__sub,
.stat-tile__life {
  width: 100%;
  text-align: center;
}
.stat-tile__label {
  /* Small uppercase Inter Bold, muted — combines metric + YTD so the
     headline value never needs its own period pill. */
  margin: 0;
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t2);
}
.stat-tile__value {
  margin: 0;
  font-family: var(--ac-font-body);
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-4xl);
  line-height: var(--ac-leading-tight);
  letter-spacing: var(--ac-tracking-tight);
  color: var(--ac-color-ink);
}
.stat-tile__life {
  margin: 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t3);
  letter-spacing: var(--ac-tracking-tight);
}
.stat-tile__life strong {
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-t2);
  margin-left: 4px;
}

/* Schedule cards */
.schedule-card {
  padding: var(--ac-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-4);
  margin-bottom: var(--ac-space-5);
}
.schedule-card__head {
  display: flex;
  align-items: center;
  gap: var(--ac-space-4);
}
.schedule-card__title {
  /* Match .section-label__title (Streaming / Socials on Dashboard). */
  margin: 0;
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-base);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t2);
  flex: 1 1 auto;
}
.schedule-card__sub {
  margin: 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
}

/* Filter pill group (Booked / Pending / Holds) */
.schedule-filter {
  display: inline-flex;
  gap: var(--ac-space-1);
  padding: 3px;
  background: var(--ac-color-nested);
  border-radius: var(--ac-radius-pill);
}
.schedule-filter__pill {
  padding: 6px 14px;
  border: none;
  background: transparent;
  border-radius: var(--ac-radius-pill);
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-semibold);
  color: var(--ac-color-t2);
  cursor: pointer;
  transition: background var(--ac-duration-fast) var(--ac-ease-standard);
}
.schedule-filter__pill.is-active {
  background: var(--ac-color-ink);
  color: var(--ac-color-on-accent);
}

/* Show list rows */
.show-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ac-space-3); }
.show-list__empty {
  text-align: center;
  padding: var(--ac-space-8) var(--ac-space-4);
  color: var(--ac-color-t2);
  font-size: var(--ac-fs-md);
}
.show-row {
  display: grid;
  grid-template-columns: 92px minmax(220px, 1.1fr) minmax(240px, 1.3fr) minmax(80px, auto) auto;
  align-items: center;
  gap: var(--ac-space-5);
  padding: var(--ac-space-4) var(--ac-space-5);
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-2xl);
  position: relative;
  overflow: hidden;
}
/* Whole-row flyer underlay — flyer fills the entire bar with a crimson
   gradient scrim so all text stays readable. Inverts text colors when
   present. */
.show-row--has-flyer {
  background: var(--flyer-bg) center/cover no-repeat,
              linear-gradient(135deg, var(--ac-color-accent) 0%, #6b0e1d 100%);
  border-color: transparent;
  color: #fff;
}
.show-row--has-flyer::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14, 12, 11, 0.78) 0%, rgba(14, 12, 11, 0.55) 35%, rgba(14, 12, 11, 0.35) 100%);
  pointer-events: none;
}
.show-row--has-flyer > * { position: relative; z-index: 1; }
.show-row__date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}
.show-row__day {
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
  text-transform: capitalize;
}
.show-row__date-big {
  /* Inter Black (weight 900) instead of Archivo Black — keeps the rhythm
     consistent with the rest of the page. */
  font-family: var(--ac-font-body);
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-xl);
  line-height: 1.1;
  color: var(--ac-color-ink);
}
/* Flyer mode — invert all text colors. */
.show-row--has-flyer .show-row__day,
.show-row--has-flyer .show-row__venue,
.show-row--has-flyer .show-row__tickets-head { color: rgba(255, 255, 255, 0.82); }
.show-row--has-flyer .show-row__date-big,
.show-row--has-flyer .show-row__name,
.show-row--has-flyer .show-row__price,
.show-row--has-flyer .show-row__tickets-head strong { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.show-row--has-flyer .show-row__bar { background: rgba(255, 255, 255, 0.18); }
.show-row--has-flyer .show-row__view {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.show-row--has-flyer .show-row__view:hover { background: rgba(255, 255, 255, 0.28); }
.show-row__where { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.show-row__name  {
  margin: 0;
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-md);
  color: var(--ac-color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.show-row__venue {
  margin: 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.show-row__tickets { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.show-row__tickets-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
}
.show-row__tickets-head strong {
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-ink);
}
.show-row__bar {
  height: 6px;
  border-radius: var(--ac-radius-pill);
  background: var(--ac-color-nested);
  position: relative;
  overflow: hidden;
}
.show-row__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--bar-pct, 0%);
  background: linear-gradient(90deg, #22c55e 0%, #f59e0b 100%);
  border-radius: var(--ac-radius-pill);
}
.show-row__price {
  font-family: var(--ac-font-body);
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-xl);
  color: var(--ac-color-ink);
  white-space: nowrap;
}
.show-row__view {
  border: 1px solid var(--ac-color-line);
  background: var(--ac-color-bg);
  color: var(--ac-color-ink);
  border-radius: var(--ac-radius-pill);
  padding: 8px 18px;
  font-weight: var(--ac-fw-semibold);
  cursor: pointer;
}
.show-row__view:hover { background: var(--ac-color-warm); }

/* Past years accordion */
.past-years { display: flex; flex-direction: column; gap: var(--ac-space-3); }
.past-year {
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-xl);
  background: var(--ac-color-paper);
  overflow: hidden;
}
.past-year__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--ac-space-3);
  padding: var(--ac-space-4) var(--ac-space-5);
  background: transparent;
  border: none;
  font-family: var(--ac-font-body);
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-xl);
  cursor: pointer;
  text-align: left;
  color: var(--ac-color-ink);
}
.past-year__sub {
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-medium);
  color: var(--ac-color-t2);
  margin-left: auto;
}
.past-year__list { list-style: none; padding: 0 var(--ac-space-5) var(--ac-space-4); margin: 0; display: flex; flex-direction: column; gap: var(--ac-space-2); }
.past-show {
  display: grid;
  grid-template-columns: 80px 1fr auto auto auto;
  gap: var(--ac-space-4);
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--ac-radius-md);
}
.past-show:hover { background: var(--ac-color-nested); }
.past-show__date { font-size: var(--ac-fs-sm); color: var(--ac-color-t2); }
.past-show__name { font-weight: var(--ac-fw-semibold); color: var(--ac-color-ink); }
.past-show__pl   { font-weight: var(--ac-fw-bold); }
.past-show__pl--up   { color: var(--ac-color-success); }
.past-show__pl--down { color: var(--ac-color-danger); }

/* Two-up bottom strip — Book a Show on the left, Quote Builder on the right. */
.schedule-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ac-space-5);
  margin-bottom: var(--ac-space-5);
}
.schedule-bottom-grid > .schedule-card { margin-bottom: 0; }

/* Quote builder list */
.quote-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ac-space-2); }
.quote-list__empty {
  text-align: center;
  padding: var(--ac-space-8) var(--ac-space-4);
  color: var(--ac-color-t2);
  font-size: var(--ac-fs-md);
}
.quote-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: var(--ac-space-3);
  padding: var(--ac-space-3) var(--ac-space-4);
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-xl);
}
.quote-row__where { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.quote-row__name {
  margin: 0;
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-md);
  color: var(--ac-color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quote-row__sub  { margin: 0; font-size: var(--ac-fs-sm); color: var(--ac-color-t2); }
.quote-row__ask  { font-weight: var(--ac-fw-bold); font-size: var(--ac-fs-lg); color: var(--ac-color-ink); }
.quote-row__btn {
  border: 1px solid var(--ac-color-line);
  background: var(--ac-color-bg);
  color: var(--ac-color-ink);
  border-radius: var(--ac-radius-pill);
  padding: 6px 12px;
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-semibold);
  cursor: pointer;
}
.quote-row__btn:hover { background: var(--ac-color-warm); }
.quote-row__btn--primary { background: var(--ac-color-ink); color: var(--ac-color-on-accent); border-color: var(--ac-color-ink); }
.quote-row__btn--primary:hover { background: #1a1614; }

/* Book-a-show form */
.book-form { display: flex; flex-direction: column; gap: var(--ac-space-3); max-width: 720px; }
.book-form__label { font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); color: var(--ac-color-t2); }
.book-form__check { display: flex; align-items: center; gap: 8px; font-size: var(--ac-fs-sm); color: var(--ac-color-t2); }
.book-form__radius { display: flex; flex-direction: column; gap: var(--ac-space-2); padding: var(--ac-space-3); background: var(--ac-color-nested); border-radius: var(--ac-radius-lg); }
.book-form__actions { display: flex; gap: var(--ac-space-2); margin-top: var(--ac-space-2); }
.book-results { display: flex; flex-direction: column; gap: var(--ac-space-2); margin-top: var(--ac-space-3); }
.book-result {
  padding: var(--ac-space-3) var(--ac-space-4);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-lg);
  background: var(--ac-color-paper);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.book-result__name { font-weight: var(--ac-fw-bold); }
.book-result__meta { font-size: var(--ac-fs-sm); color: var(--ac-color-t2); }
.book-result__actions { display: flex; gap: var(--ac-space-2); margin-top: 6px; }
.book-result__actions a {
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-accent);
  text-decoration: none;
  font-weight: var(--ac-fw-semibold);
}

/* Modal */
.schedule-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 12, 11, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--ac-space-8) var(--ac-space-4);
  z-index: var(--ac-z-modal);
  overflow-y: auto;
}
.schedule-overlay[hidden] { display: none; }
.schedule-modal {
  background: var(--ac-color-paper);
  border-radius: var(--ac-radius-3xl);
  padding: var(--ac-space-8);
  /* Widened from 760px → 1400px so the show-detail view (settlement
     worksheet + per-artist payouts + tickets 4-up + expenses + splits)
     fits on screen without vertical scroll churn at desktop sizes.
     The 4-column tickets grid + dense splits row need room to
     breathe; the prior cap was forcing labels under inputs and
     stacking sections that should sit side-by-side. */
  max-width: 1400px;
  width: 100%;
  box-shadow: var(--ac-shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-5);
}
.schedule-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.schedule-modal__title {
  margin: 0;
  font-family: var(--ac-font-body);
  font-weight: var(--ac-fw-black);
  font-size: var(--ac-fs-2xl);
  letter-spacing: var(--ac-tracking-tight);
}
.schedule-modal__body { display: flex; flex-direction: column; gap: var(--ac-space-5); }
.schedule-form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ac-space-4); margin-bottom: var(--ac-space-2); }
.schedule-form-row > * { min-width: 0; }
.schedule-form-row label { display: flex; flex-direction: column; gap: 4px; font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-semibold); color: var(--ac-color-t2); }
.schedule-form-row input,
.schedule-form-row select,
.schedule-form-row textarea {
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  padding: 10px 12px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-md);
  color: var(--ac-color-ink);
  background: var(--ac-color-paper);
}
/* Custom expenses block inside the show-form financials tab.
   Each row is { label, amount, × delete }. Visual style matches
   the existing schedule-form-row inputs but with a tighter layout
   that lets the label flex to fill space and pins the amount +
   delete to the right. */
.schedule-form-custom-exp { margin: var(--ac-space-3) 0; }
.schedule-form-custom-exp__rows { display: flex; flex-direction: column; gap: var(--ac-space-2); margin-bottom: var(--ac-space-2); }
.schedule-form-custom-exp__row {
  display: grid;
  grid-template-columns: 1fr 140px 32px;
  gap: var(--ac-space-2);
  align-items: center;
}
.schedule-form-custom-exp__label,
.schedule-form-custom-exp__amount {
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  padding: 10px 12px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-md);
  color: var(--ac-color-ink);
  background: var(--ac-color-paper);
}
.schedule-form-custom-exp__del {
  appearance: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--ac-color-line-subtle);
  background: transparent;
  color: var(--ac-color-t3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.schedule-form-custom-exp__del:hover {
  background: rgba(220, 38, 38, 0.08);
  color: rgb(220, 38, 38);
  border-color: rgba(220, 38, 38, 0.30);
}

.schedule-form-section { border-top: 1px solid var(--ac-color-line-subtle); padding-top: var(--ac-space-5); margin-top: var(--ac-space-3); }
.schedule-form-section h3 { margin: 0 0 var(--ac-space-3); font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-bold); letter-spacing: var(--ac-tracking-wider); text-transform: uppercase; color: var(--ac-color-t2); }
.schedule-form-section__hint {
  margin: 0 0 var(--ac-space-3);
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
}
.schedule-form-section__empty {
  margin: 0;
  padding: var(--ac-space-4);
  text-align: center;
  border: 1px dashed var(--ac-color-line);
  border-radius: var(--ac-radius-lg);
  color: var(--ac-color-t3);
  font-size: var(--ac-fs-sm);
}

/* Member picker — search-and-add. Chips show currently-attached members,
   the search input below dropdown-suggests contacts to add. */
.member-picker { display: flex; flex-direction: column; gap: var(--ac-space-3); }
.member-picker__chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.member-picker__empty { color: var(--ac-color-t3); font-size: var(--ac-fs-sm); }
.member-chip--editable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 4px;
  background: var(--ac-color-nested);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-pill);
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-ink);
}
.member-chip--editable .member-chip__name { padding: 0 2px 0 4px; }
.member-chip__x {
  background: none;
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ac-color-t3);
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0;
}
.member-chip__x:hover { background: var(--ac-color-warm); color: var(--ac-color-ink); }
.member-picker__search {
  width: 100%;
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  padding: 10px 14px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-md);
  background: var(--ac-color-paper);
}
.member-picker__search:focus {
  outline: none;
  border-color: var(--ac-color-ring);
  box-shadow: 0 0 0 3px var(--ac-color-accent-chip);
}

/* 2-way segmented toggle (Show / Festival in the form). */
.seg-toggle { display: inline-flex; gap: 6px; padding-top: 4px; }

/* Tour builder modal — calendar of clickable cells (Show / Off / unset)
   plus a step-2 form for tour name + members + lineup. Mirrors v1 and
   pushes one hold event per show-day on commit. */
.tour-builder { display: flex; flex-direction: column; gap: var(--ac-space-3); }
.tour-builder__legend {
  margin: 0 0 var(--ac-space-2);
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.tour-builder__legend-key { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.tour-builder__legend-key--show { background: var(--ac-color-success); }
.tour-builder__legend-key--fest { background: #f59e0b; }
.tour-builder__legend-key--off  { background: #818cf8; }
.tour-builder__legend-sep { color: var(--ac-color-t3); margin: 0 4px; }
.tour-builder__legend-cycle { color: var(--ac-color-t3); font-size: var(--ac-fs-xs); width: 100%; margin-top: 4px; }
.tour-builder__summary {
  margin: 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
}
.tour-builder__label {
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-t2);
}
.tour-builder__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--ac-space-2);
  padding-top: var(--ac-space-3);
  border-top: 1px solid var(--ac-color-line-subtle);
}
.tour-cal {
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-lg);
  padding: var(--ac-space-3);
  background: var(--ac-color-paper);
}
.tour-cal__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--ac-space-2);
}
.tour-cal__nav {
  background: none;
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  width: 32px; height: 32px;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  color: var(--ac-color-ink);
}
.tour-cal__nav:hover { border-color: var(--ac-color-line-strong); }
.tour-cal__title {
  font-family: var(--ac-font-body);
  font-weight: var(--ac-fw-black);
  font-size: var(--ac-fs-md);
  letter-spacing: var(--ac-tracking-tight);
  text-transform: uppercase;
}
.tour-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.tour-cal__dow {
  font-size: var(--ac-fs-xs);
  text-align: center;
  color: var(--ac-color-t3);
  padding: 4px 0;
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wider);
}
.tour-cal__pad { /* empty cell before the 1st of the month */ }
.tour-cal__cell {
  background: var(--ac-color-nested);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  padding: 8px 0;
  font-family: var(--ac-font-body);
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-ink);
  cursor: pointer;
  transition: border-color 100ms var(--ac-ease-standard), background 100ms var(--ac-ease-standard);
}
.tour-cal__cell:hover { border-color: var(--ac-color-line-strong); }
.tour-cal__cell--show { background: rgba(22, 163, 74, 0.18); border-color: var(--ac-color-success); color: var(--ac-color-success); }
.tour-cal__cell--fest { background: rgba(245, 158, 11, 0.20); border-color: #f59e0b; color: #b45309; }
.tour-cal__cell--off  { background: rgba(129, 140, 248, 0.20); border-color: #818cf8; color: #4f46e5; }

/* Split-button: primary "+ Add show" with a caret that opens "+ Add tour". */
.split-button { position: relative; display: inline-flex; }
.split-button__primary {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: 1px;
}
.split-button__caret {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: 10px;
  padding-right: 12px;
}
.split-button__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 180px;
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-lg);
  box-shadow: var(--ac-shadow-lg);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.split-button__menu[hidden] { display: none; }
.split-button__menu-item {
  background: none;
  border: none;
  text-align: left;
  padding: 8px 12px;
  border-radius: var(--ac-radius-md);
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-ink);
  cursor: pointer;
}
.split-button__menu-item:hover { background: var(--ac-color-nested); }
.schedule-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ac-space-3);
  padding-top: var(--ac-space-4);
  border-top: 1px solid var(--ac-color-line-subtle);
}
.schedule-form-actions__primary { display: flex; gap: var(--ac-space-2); }

/* Autocomplete dropdown (used by venue + lineup typeaheads) */
.ac-typeahead { position: relative; display: flex; flex-direction: column; gap: 4px; }
.ac-typeahead__results {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  box-shadow: var(--ac-shadow-md);
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 5;
  display: none;
}
.ac-typeahead--open .ac-typeahead__results { display: block; }
.ac-typeahead__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--ac-color-line-subtle);
}
.ac-typeahead__item:last-child { border-bottom: none; }
.ac-typeahead__item:hover, .ac-typeahead__item.is-active { background: var(--ac-color-nested); }
.ac-typeahead__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: center/cover no-repeat var(--ac-color-nested);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-family: var(--ac-font-body);
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-xs);
  letter-spacing: 0.04em;
  color: var(--ac-color-t2);
  text-transform: uppercase;
}
.ac-typeahead__name { font-weight: var(--ac-fw-semibold); font-size: var(--ac-fs-md); }
.ac-typeahead__sub  { font-size: var(--ac-fs-sm); color: var(--ac-color-t2); }
.ac-typeahead__check {
  margin-left: auto;
  color: var(--ac-color-success);
  font-size: var(--ac-fs-md);
}
/* When the verified mark is the BIT icon, render as a real image,
   sized to roughly match the row's avatar so the lockup feels balanced.
   Used for verified artist / venue / festival entries. */
.ac-typeahead__check--bit {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-left: auto;
  vertical-align: middle;
}

/* Lineup editor styles live below in the pill section — see .lineup-editor + .lineup-pill */
.lineup-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr auto;
  gap: var(--ac-space-2);
  align-items: start;
}
/* Match the rest of the modal's input styling — subtle border, soft radius. */
.lineup-row input,
.lineup-row select {
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  padding: 10px 12px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-md);
  color: var(--ac-color-ink);
  background: var(--ac-color-paper);
  width: 100%;
}
.lineup-row input:focus,
.lineup-row select:focus {
  outline: none;
  border-color: var(--ac-color-ring);
  box-shadow: 0 0 0 3px var(--ac-color-accent-chip);
}
.lineup-row__remove {
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  padding: 0 14px;
  cursor: pointer;
  color: var(--ac-color-t2);
  align-self: stretch;
  font-size: var(--ac-fs-lg);
  line-height: 1;
}
.lineup-row__remove:hover { color: var(--ac-color-danger); border-color: var(--ac-color-danger); }

/* Lineup acts render as horizontal pill-rows that visually mirror the
   member chips (same avatar + name + remove pattern) with two extra
   per-act fields — Start time + Set length — that feed the DOS PDF.
   The whole row is itself a pill (full width) so it stacks vertically. */
.lineup-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  min-height: 28px;
}
.lineup-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 4px;
  background: var(--ac-color-nested);
  border: 1px solid var(--ac-color-line);
  border-radius: 999px;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-ink);
}
.lineup-pill .member-chip__avatar { margin-right: 0; }
.lineup-pill__name {
  font-weight: var(--ac-fw-semibold);
  white-space: nowrap;
  padding: 0 2px 0 4px;
  flex: 0 0 auto;
}
.lineup-pill__role {
  border: 1px solid var(--ac-color-line);
  background: transparent;
  border-radius: 999px;
  padding: 4px 22px 4px 10px;
  font-size: 12px;
  font-style: italic;
  color: var(--ac-color-t2);
  cursor: pointer;
  flex: 0 0 auto;
}
.lineup-pill__role:focus {
  outline: none;
  border-color: var(--ac-color-ring);
  box-shadow: 0 0 0 2px var(--ac-color-accent-chip);
}

/* Stage schedule grid in the Show Details tab — one row per lineup
   act with its avatar, name, and Start time + Set length inputs. */
.stage-schedule {
  margin: 4px 0 18px;
  padding: 14px 14px 6px;
  background: var(--ac-color-warm);
  border-radius: var(--ac-radius-lg);
}
.stage-schedule__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}
.stage-schedule__title {
  font-size: 11px;
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t2);
}
.stage-schedule__hint {
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t3);
}
.stage-schedule__empty {
  margin: 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t3);
}
.stage-schedule__colhead {
  display: grid;
  grid-template-columns: 1fr 110px 70px 110px 70px;
  gap: 8px;
  padding: 0 0 4px;
  font-size: 10px;
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-t3);
}
.stage-schedule__row {
  display: grid;
  grid-template-columns: 1fr 110px 70px 110px 70px;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid var(--ac-color-line-subtle);
}
.stage-schedule__row:first-of-type { border-top: 0; }
.stage-schedule__band {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.stage-schedule__name {
  font-weight: var(--ac-fw-semibold);
  font-size: var(--ac-fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stage-schedule__sc,
.stage-schedule__sclen,
.stage-schedule__time,
.stage-schedule__length {
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  padding: 8px 12px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-ink);
  background: var(--ac-color-paper);
  width: 100%;
}
.stage-schedule__sc:focus,
.stage-schedule__sclen:focus,
.stage-schedule__time:focus,
.stage-schedule__length:focus {
  outline: none;
  border-color: var(--ac-color-ring);
  box-shadow: 0 0 0 3px var(--ac-color-accent-chip);
}
.lineup-pill__remove {
  appearance: none;
  background: none;
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ac-color-t3);
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0;
  flex: 0 0 auto;
}
.lineup-pill__remove:hover { background: var(--ac-color-warm); color: var(--ac-color-danger); }

/* Search-to-add row sitting under the lineup pills — mirrors the
   members search input visually (same .ac-typeahead chrome). */
.lineup-add-row { width: 100%; }
.lineup-add-row__input {
  width: 100%;
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  padding: 10px 14px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-md);
  color: var(--ac-color-ink);
  background: var(--ac-color-paper);
}
.lineup-add-row__input:focus {
  outline: none;
  border-color: var(--ac-color-ring);
  box-shadow: 0 0 0 3px var(--ac-color-accent-chip);
}

/* Member chip — adds a circular avatar in front of the name. Falls back
   to a colored mono initial when the contact has no avatarUrl/userId. */
.member-chip__avatar {
  width: 22px; height: 22px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--ac-color-warm);
  flex: 0 0 auto;
  margin-right: 6px;
}
.member-chip__avatar--mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-t2);
}
.member-chip__name { display: inline-block; }

/* Show details / Show financials tabs inside the show form. The two
   panels are stacked under a pill-tab head; only the active panel
   renders. Both stay in the DOM so getElementById still resolves on
   save regardless of which tab the user happened to be on. */
.schedule-form-tabs { padding-top: var(--ac-space-3); }
.schedule-tabs__head {
  display: inline-flex;
  gap: 4px;
  background: var(--ac-color-warm);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: var(--ac-space-4);
}
.schedule-tabs__tab {
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 18px;
  font: inherit;
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-t2);
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.schedule-tabs__tab.is-active {
  background: var(--ac-color-paper);
  color: var(--ac-color-ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.schedule-tabs__panel { display: none; }
.schedule-tabs__panel.is-active { display: block; }
.schedule-tabs__panel textarea {
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  padding: 10px 12px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-md);
  color: var(--ac-color-ink);
  background: var(--ac-color-paper);
  width: 100%;
  margin-top: 4px;
}
.schedule-tabs__panel textarea:focus {
  outline: none;
  border-color: var(--ac-color-ring);
  box-shadow: 0 0 0 3px var(--ac-color-accent-chip);
}
.lineup-add {
  align-self: flex-start;
  background: none;
  border: 1px dashed var(--ac-color-line-strong);
  border-radius: var(--ac-radius-md);
  padding: 8px 14px;
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-semibold);
  color: var(--ac-color-t2);
  cursor: pointer;
  margin-top: var(--ac-space-2);
}
.lineup-add:hover { background: var(--ac-color-nested); color: var(--ac-color-ink); }
.bit-tag { font-size: var(--ac-fs-xs); color: var(--ac-color-success); margin-left: 4px; }

/* Number inputs — kill the browser spinners so they match other fields. */
.schedule-form-row input[type="number"],
.lineup-row input[type="number"] {
  -moz-appearance: textfield;
}
.schedule-form-row input[type="number"]::-webkit-outer-spin-button,
.schedule-form-row input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Flyer + Contract upload tiles inside the Schedule modal */
.schedule-uploads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ac-space-3);
}
.upload-tile {
  border: 1px dashed var(--ac-color-line-strong);
  border-radius: var(--ac-radius-lg);
  padding: var(--ac-space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--ac-color-nested);
  text-align: center;
  cursor: pointer;
  min-height: 130px;
  position: relative;
  overflow: hidden;
  transition: background var(--ac-duration-fast) var(--ac-ease-standard), border-color var(--ac-duration-fast) var(--ac-ease-standard);
}
.upload-tile:hover { background: var(--ac-color-warm); border-color: var(--ac-color-t3); }
.upload-tile.is-dragover { background: var(--ac-color-accent-wash); border-color: var(--ac-color-accent); }
.upload-tile__label { font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-bold); letter-spacing: var(--ac-tracking-wider); text-transform: uppercase; color: var(--ac-color-t2); }
.upload-tile__hint  { font-size: var(--ac-fs-sm); color: var(--ac-color-t3); }
.upload-tile__name  { font-size: var(--ac-fs-sm); color: var(--ac-color-ink); font-weight: var(--ac-fw-semibold); word-break: break-all; }
.upload-tile__preview {
  position: absolute; inset: 0;
  background: center/cover no-repeat var(--ac-color-bg);
}
.upload-tile__preview ~ .upload-tile__label,
.upload-tile__preview ~ .upload-tile__name,
.upload-tile__preview ~ .upload-tile__hint { position: relative; z-index: 1; background: rgba(255,255,255,0.85); padding: 2px 8px; border-radius: var(--ac-radius-sm); }
.upload-tile__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  z-index: 2;
}

/* ─── Day-of-Show "print preview" modal ──────────────────────────────
   Visually mirrors the V1 PDF (centered logo + lineup title, gray
   subtitle, sectioned tables with 1px gray borders + warm-tinted
   header rows). Opens via the show details "Day of show" button;
   the Download PDF action regenerates the byte-identical V1 PDF. */
.dos-page { display: flex; flex-direction: column; gap: 0; }
.dos-page__back {
  appearance: none;
  background: transparent;
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-pill);
  padding: 6px 14px 6px 12px;
  align-self: flex-start;
  font: inherit;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-ink);
  cursor: pointer;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dos-page__back:hover { background: var(--ac-color-warm); }
.dos-page__head {
  text-align: center;
  padding: 18px 0 24px;
  border-bottom: 1px solid var(--ac-color-line);
  margin-bottom: 26px;
}
.dos-page__logo {
  max-width: 180px;
  max-height: 50px;
  object-fit: contain;
  margin: 0 auto 18px;
  display: block;
}
.dos-page__title {
  font-family: var(--ac-font-display);
  font-size: var(--ac-fs-3xl);
  font-weight: var(--ac-fw-black);
  letter-spacing: var(--ac-tracking-tight);
  margin: 0 0 8px;
  color: var(--ac-color-ink);
}
.dos-page__sub {
  color: var(--ac-color-t2);
  margin: 0 0 4px;
  font-size: var(--ac-fs-sm);
}
.dos-page__date {
  color: var(--ac-color-t2);
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ac-tracking-widest);
  font-weight: var(--ac-fw-bold);
}
.dos-page__section { margin: 0 0 24px; }
.dos-page__heading {
  font-size: 11px;
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t2);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ac-color-line);
}
.dos-page__table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #b4b4b4;
  font-size: var(--ac-fs-sm);
}
.dos-page__table th {
  background: #dcdcdc;
  border: 1px solid #b4b4b4;
  padding: 7px 10px;
  text-align: left;
  font-size: 10px;
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: #1e1e1e;
}
.dos-page__table td {
  border: 1px solid #d2d2d2;
  padding: 7px 10px;
  color: var(--ac-color-ink);
  vertical-align: top;
}
.dos-page__paragraph {
  white-space: pre-wrap;
  line-height: 1.5;
  margin: 0;
  font-size: var(--ac-fs-md);
  color: var(--ac-color-ink);
}
.dos-page__bullets {
  list-style: disc;
  padding: 0 0 0 22px;
  margin: 0;
  color: var(--ac-color-ink);
}
.dos-page__bullets li {
  font-size: var(--ac-fs-md);
  line-height: 1.55;
  margin: 2px 0;
}

/* Pass mode — backstage-pass style runsheet. Headliner-up title block,
   body rows of TIME ........ LABEL with dot leaders + underline. */
.dos-page--pass { padding: 0; }
.dos-pass__head {
  text-align: center;
  padding: 28px 0 16px;
  margin-bottom: 24px;
}
.dos-pass__headliner {
  font-family: Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 40px;
  letter-spacing: 0.01em;
  margin: 0 0 14px;
  color: var(--ac-color-ink);
}
.dos-pass__support,
.dos-pass__venue,
.dos-pass__date {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  margin: 6px 0;
  color: var(--ac-color-ink);
}
.dos-pass__rows {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.dos-pass__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0 4px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--ac-color-ink);
}
.dos-pass__time { flex: 0 0 auto; white-space: nowrap; }
.dos-pass__label { flex: 0 0 auto; white-space: nowrap; }
.dos-pass__dots {
  flex: 1 1 auto;
  border-bottom: 2px dotted var(--ac-color-ink);
  height: 0;
  align-self: center;
  margin: 0 4px 6px;
}

/* Poster mode — single big centered list, no section headings or
   bullets. Mirrors the PDF runsheet layout. */
.dos-page--poster { padding: 0; }
.dos-page__head--poster {
  border-bottom: 0;
  padding: 24px 0 12px;
  margin-bottom: 24px;
}
.dos-page__title--poster {
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: var(--ac-tracking-tight);
}
.dos-page__lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 0 32px;
  text-align: center;
}
.dos-page__line {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--ac-color-ink);
  letter-spacing: -0.005em;
  text-align: center;
}
.dos-page__footer-logo {
  display: flex;
  justify-content: center;
  margin: 24px 0 8px;
}
.dos-page__footer-logo img {
  max-height: 28px;
  max-width: 120px;
  object-fit: contain;
  opacity: 0.85;
}
.dos-page__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--ac-color-line);
}

/* Show details (View) panel */
.show-details { display: flex; flex-direction: column; gap: var(--ac-space-4); }

/* Two-column profile-style layout — left rail (380px) carries the
   identity card (flyer + stacked metadata rows that read like a
   band-profile bio), right main column carries the settlement
   worksheet and other heavy content. Actions row stays full-width
   at the bottom of the modal. Stacks back to single column on
   narrower viewports (mobile + narrow laptops). */
.show-details--cols {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  grid-template-areas:
    "rail main"
    "actions actions";
  gap: var(--ac-space-5);
  align-items: start;
}
.show-details--cols > .show-details__rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-3);
  min-width: 0;
}
.show-details--cols > .show-details__main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-4);
  min-width: 0;
}
.show-details--cols > .show-details__actions {
  grid-area: actions;
}
/* Within the rail, the flyer is a square crop (band-profile look)
   instead of the wide hero banner the original layout used. */
.show-details--cols .show-details__hero {
  aspect-ratio: 1 / 1;
  height: auto;
  width: 100%;
  border-radius: var(--ac-radius-2xl);
  overflow: hidden;
}
@media (max-width: 960px) {
  .show-details--cols {
    grid-template-columns: 1fr;
    grid-template-areas:
      "rail"
      "main"
      "actions";
  }
  .show-details--cols .show-details__hero {
    aspect-ratio: auto;
    height: 200px;
  }
}
/* Hero — flyer header below the modal title by default. The
   --with-flyer modal class (set by viewShow when ev.flyer is present)
   pulls it ALL the way to the top edge, with a dark top-gradient so
   the modal title + × button overlay legibly in white. */
.show-details__hero {
  margin: var(--ac-space-2) calc(var(--ac-space-8) * -1) 0;
  border-radius: var(--ac-radius-2xl);
  height: 220px;
  background-size: cover;
  /* Anchor to the top of the flyer so band names / "KEEP THE …" header
     graphics that artists put at the top stay visible. */
  background-position: top center;
  background-color: var(--ac-color-nested);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.show-details__hero--has-flyer { background-image: var(--flyer-bg); }
.show-details__hero--has-flyer::after {
  content: '';
  position: absolute; inset: auto 0 0 0;
  height: 60%;
  background: linear-gradient(180deg, transparent 0%, rgba(14, 12, 11, 0.15) 100%);
  pointer-events: none;
}

/* Full-bleed mode — hero climbs past the modal head and the modal
   padding, so the flyer is the first thing the user sees. The head's
   text + close button overlay it in white. */
.schedule-modal--with-flyer { overflow: hidden; }
.schedule-modal--with-flyer .schedule-modal__head {
  position: relative;
  z-index: 3;
  /* Negate the modal's flex gap below the head so the hero lifts cleanly
     up to it. */
  margin-bottom: calc(var(--ac-space-5) * -1);
}
.schedule-modal--with-flyer .schedule-modal__title { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.schedule-modal--with-flyer .icon-btn {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.30);
  backdrop-filter: blur(2px);
}
.schedule-modal--with-flyer .icon-btn:hover { background: rgba(255, 255, 255, 0.22); }
.schedule-modal--with-flyer .show-details__hero {
  /* Climb past the modal padding (--ac-space-8) AND the head height
     (~80px including its margin-bottom negation). Side bleed already
     in the base rule. */
  margin: calc(var(--ac-space-8) * -1 - 100px) calc(var(--ac-space-8) * -1) 0;
  border-radius: var(--ac-radius-3xl) var(--ac-radius-3xl) 0 0;
  height: 450px;
}
/* Top dark gradient for title legibility. The base rule's ::after still
   provides a soft bottom fade. Stronger top stop so the white title
   reads cleanly on busy flyer photography. */
.schedule-modal--with-flyer .show-details__hero--has-flyer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.75) 30%, rgba(0, 0, 0, 0.35) 70%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 768px) {
  .schedule-modal--with-flyer .show-details__hero { height: 320px; }
}
.show-details__hero--empty {
  background: repeating-linear-gradient(135deg,
    var(--ac-color-nested) 0 12px,
    var(--ac-color-paper) 12px 24px);
}
.show-details__hero--empty span {
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-t3);
  text-transform: uppercase;
  letter-spacing: var(--ac-tracking-wider);
  background: var(--ac-color-paper);
  padding: 6px 14px;
  border-radius: var(--ac-radius-pill);
  border: 1px solid var(--ac-color-line);
}
@media (max-width: 768px) {
  .show-details__hero { height: 160px; }
}
.show-details__row { display: flex; justify-content: space-between; gap: var(--ac-space-4); padding: 8px 0; border-bottom: 1px solid var(--ac-color-line-subtle); align-items: flex-start; min-width: 0; }
.show-details__row:last-child { border-bottom: none; }
.show-details__label { font-size: var(--ac-fs-sm); color: var(--ac-color-t2); text-transform: uppercase; letter-spacing: var(--ac-tracking-wider); font-weight: var(--ac-fw-semibold); flex-shrink: 0; }
.show-details__value { font-weight: var(--ac-fw-semibold); color: var(--ac-color-ink); min-width: 0; }
/* Long-URL rows (Ticket link, Bandsintown, Media link) — break
   anywhere so the value column doesn't push past the modal width.
   Without this the bandsintown.com share URL with its UTM-stuffed
   query string overflows the modal. */
.show-details__value--link {
  flex: 1;
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.show-details__value--link a { color: var(--ac-color-ink); }
/* Per-show Media link row — content people drop a Dropbox / GDrive
   URL here. Toggles between display and edit mode via .is-editing.
   The "Edit" / "+ Add link" pill anchors top-right. */
.show-details__row--media .show-details__value--link {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.show-details__row--media .show-details__media-toggle {
  align-self: flex-end;
}
.show-details__row--media .show-details__media-edit { display: none; }
.show-details__row--media.is-editing .show-details__media-current { display: none; }
.show-details__row--media.is-editing .show-details__media-toggle { display: none; }
.show-details__row--media.is-editing .show-details__media-edit {
  display: flex; flex-direction: column; gap: 6px; width: 100%;
}
.show-details__row--media.is-editing .show-details__media-edit input {
  font: inherit; font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--ac-color-line);
  border-radius: 8px;
  width: 100%;
  background: var(--ac-color-bg);
}
.show-details__row--media.is-editing .show-details__media-edit input:focus {
  outline: 2px solid var(--ac-color-accent);
  outline-offset: -1px;
}
.show-details__media-empty {
  font-weight: var(--ac-fw-regular);
  color: var(--ac-color-t3);
}
.show-details__media-link {
  text-decoration: underline;
}
/* Body data-attr gating — content roles never see the finance rows
   or the Guest list button. role-perms.js stamps the role on body
   so this flips live as JEDI view-as cycles. Same data-attr the
   Assets Venue collapsible uses. */
body[data-effective-role="content_creator"] [data-hide-for-content],
body[data-effective-role="social_media_manager"] [data-hide-for-content] {
  display: none !important;
}
/* Inverse: elements that ONLY appear for content roles. The element
   ships with the `hidden` HTML attribute so non-content roles never
   see it; this rule unhides it when the body's effective role is
   one of the two content variants. Used by the Needs Media card on
   the dashboard right rail. */
body[data-effective-role="content_creator"]      [data-show-for-content][hidden],
body[data-effective-role="social_media_manager"] [data-show-for-content][hidden] {
  display: block !important;
}

/* Merch role gates — twin pattern. data-hide-for-merch swaps the
   social/streaming sections off the dashboard since the merch person
   tracks sales, not follower deltas. data-show-for-merch flips the
   merch spotlight ON (it ships hidden, like content's Needs Media). */
body[data-effective-role="merch_manager"] [data-hide-for-merch] {
  display: none !important;
}
body[data-effective-role="merch_manager"] [data-show-for-merch][hidden] {
  display: flex !important;
}
/* Cards in the right rail use block flow internally — override the
   default spotlight flex unhide so they don't go horizontal. */
body[data-effective-role="merch_manager"] .pack-tonight-card[data-show-for-merch][hidden],
body[data-effective-role="merch_manager"] .merch-qr-card[data-show-for-merch][hidden] {
  display: flex !important;
  flex-direction: column;
}

/* Right-rail row — wraps Merch QR (1/4) + Opportunities (3/4) into
   a single horizontal pair for merch_manager. For other roles the
   QR is hidden via [hidden] and Opportunities grows to fill, so the
   row is invisible structurally — same single-column rail. */
.dash-rail__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ac-space-4);
}
body[data-effective-role="merch_manager"] .dash-rail__row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  align-items: stretch;
}

/* ── Merch QR card (merch_manager right rail) ──
   Compact 1/4-width tile: QR fills the card, URL underneath, two
   small action buttons. The QR image links out to the full-size
   /qrserver/ URL so a tap opens it in a new tab — handy for
   showing it on someone else's screen without leaving the dashboard. */
.merch-qr-card .card__head {
  margin-bottom: var(--ac-space-2);
}
.merch-qr-card__body {
  display: flex; flex-direction: column;
  align-items: center; gap: var(--ac-space-2);
  padding: var(--ac-space-2) 0;
}
.merch-qr-card__img-wrap {
  display: block;
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: #fff;
  padding: 6px;
  border: 1px solid var(--ac-color-line-subtle);
  box-sizing: border-box;
}
.merch-qr-card__img { width: 100%; height: 100%; display: block; }
.merch-qr-card__url {
  width: 100%;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--ac-color-t3);
  letter-spacing: 0.02em;
  word-break: break-all;
  line-height: 1.35;
}
.merch-qr-card__actions {
  display: flex; gap: var(--ac-space-2);
  border-top: 1px solid var(--ac-color-line-subtle);
  padding-top: var(--ac-space-2);
  margin-top: auto;
  justify-content: center;
}
.merch-qr-card__btn {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ac-color-accent, #8B1A2B);
  background: transparent;
  border: 0;
  padding: 4px 6px;
  cursor: pointer;
}
.merch-qr-card__btn:hover { opacity: 0.75; }
.merch-qr-card__btn--ok { color: #15803d; }

/* ── Pack for tonight (merch_manager right rail) ──
   Visual sibling of the Needs Media card — same pearl shell, list
   of rows below the header. Each row is a packing recommendation:
   "18× Black Tee" with the count in the accent crimson so it scans
   like a checklist. */
.pack-tonight-card__sub {
  margin: 0 0 var(--ac-space-3);
  font-size: 13px;
  color: var(--ac-color-t3);
}
.pack-tonight-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.pack-tonight-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--ac-space-3);
  align-items: baseline;
  padding: var(--ac-space-3) 0;
  border-bottom: 1px solid var(--ac-color-line-subtle);
}
.pack-tonight-row:last-child { border-bottom: none; }
.pack-tonight-row__count {
  font-family: 'Archivo Black', sans-serif;
  font-size: 18px; letter-spacing: -0.005em;
  color: var(--ac-color-accent, #8B1A2B);
  text-transform: uppercase;
}
.pack-tonight-row__name {
  font-size: 13px;
  color: var(--ac-color-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pack-tonight-row__variant {
  display: block;
  font-size: 11px;
  color: var(--ac-color-t3);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
}
.pack-tonight-list__empty {
  padding: var(--ac-space-3) 0;
  font-size: 13px;
  color: var(--ac-color-t3);
}
/* Ops roles (production trio + merch + content) get a calendar-only
   schedule view. The existing schedule sections (stats / upcoming /
   booking grid) all hide for these roles. Source-of-truth role list
   is maintained in js/schedule-wiring.js#OPS_ROLES so JS can decide
   whether to render into #scheduleOpsView at all. */
body[data-effective-role="foh_engineer"]      [data-hide-for-ops],
body[data-effective-role="monitor_engineer"]  [data-hide-for-ops],
body[data-effective-role="tech"]              [data-hide-for-ops],
body[data-effective-role="merch_manager"]     [data-hide-for-ops],
body[data-effective-role="content_creator"]   [data-hide-for-ops],
body[data-effective-role="social_media_manager"] [data-hide-for-ops],
body[data-effective-role="band_member"]       [data-hide-for-ops],
body[data-effective-role="label"]             [data-hide-for-ops] {
  display: none !important;
}

/* Production-only gates — the three production roles (foh, monitor,
   tech) get a slim dashboard: just upcoming shows + opportunities.
   Spotlight (streaming/content stats), the full streaming row, and
   the socials row are all hidden via data-hide-for-production. Twin
   data-show-for-production attr is reserved for production-only
   cards if/when we add them. The dash-hero grid is also collapsed
   to a single column so the right rail (now the only column) doesn't
   sit next to an empty 1.7fr track. */
body[data-effective-role="foh_engineer"]     [data-hide-for-production],
body[data-effective-role="monitor_engineer"] [data-hide-for-production],
body[data-effective-role="tech"]             [data-hide-for-production] {
  display: none !important;
}
/* Tour manager hides streaming + socials sections — their dashboard
   is operational (show advance, tickets, settlement, merch cuts),
   not marketing metrics. Same gate pattern as production / merch. */
body[data-effective-role="tour_manager"] [data-hide-for-tour_manager] {
  display: none !important;
}
/* Booking agent hides merch + streaming + socials + connect tab.
   Their dashboard is holds management + city audience data + show
   performance for pitches — marketing stats and merch sales don't
   move their needle. */
body[data-effective-role="booking_agent"] [data-hide-for-booking_agent],
body[data-effective-role="booking"]       [data-hide-for-booking_agent] {
  display: none !important;
}
/* dash-hero keeps its default 2-col grid for production now that
   the Case Checklist card occupies the left (spotlight) slot.
   The right rail (Opportunities + Upcoming) sits beside it just
   like artist/manager roles get. (Earlier this rule collapsed
   to 1fr because the slot was empty.) */
body[data-effective-role="foh_engineer"]     [data-show-for-production][hidden],
body[data-effective-role="monitor_engineer"] [data-show-for-production][hidden],
body[data-effective-role="tech"]             [data-show-for-production][hidden] {
  display: block;
}

/* Band member gates — twin of production / merch / content.
   The data-hide-for-band-member attr hides things for band_member
   only; data-show-for-band-member un-hides the dedicated bm
   spotlight which lives next to the streaming spotlight in
   .dash-hero. */
body[data-effective-role="band_member"] [data-hide-for-band-member] {
  display: none !important;
}
body[data-effective-role="band_member"] [data-show-for-band-member][hidden] {
  display: flex;
}

/* Tour manager gates — same twin pattern. The TM spotlight
   replaces the streaming spotlight when tour_manager is the
   effective role. */
body[data-effective-role="tour_manager"] [data-hide-for-tour-manager] {
  display: none !important;
}
body[data-effective-role="tour_manager"] [data-show-for-tour-manager][hidden] {
  display: flex;
}

/* Booking agent gates — same twin pattern. The booking-agent
   spotlight ("Holds in motion") replaces the artist spotlight
   when booking_agent / booking is the effective role. */
body[data-effective-role="booking_agent"] [data-hide-for-booking-agent],
body[data-effective-role="booking"]       [data-hide-for-booking-agent] {
  display: none !important;
}
/* Default un-hide: full-width block sections (top-cities, vc-teasers,
   anything else that lives below the dash-hero). These each own
   their own internal layout (panel padding + header grid + list /
   table); they should NOT be turned into flex containers because
   that re-flows their children into a row and squishes them into
   the narrow look we kept hitting. */
body[data-effective-role="booking_agent"] [data-show-for-booking-agent][hidden],
body[data-effective-role="booking"]       [data-show-for-booking-agent][hidden] {
  display: block;
}
/* Spotlight card override — the BA spotlight inherits the
   .card-hero / .spotlight column-flex shell, so it needs flex
   to keep title/sub/stats/holds stacked correctly. */
body[data-effective-role="booking_agent"] #ba-spotlight-card[data-show-for-booking-agent][hidden],
body[data-effective-role="booking"]       #ba-spotlight-card[data-show-for-booking-agent][hidden] {
  display: flex;
}

/* ──────────────────────────────────────────────────────────────
   LABEL gates — record label rep viewing a signed band.

   Hide rules: any section tagged data-hide-for-label disappears.
   Used for things that are noise to a label (production cases,
   day-of-show ops, the "go book another show" affordances on the
   schedule). Most role-specific spotlights (BA/TM/Merch) hide
   themselves automatically via data-show-for-X.

   Show rules: data-show-for-label flips on the Label-specific
   cards (revenue rollup + release pipeline). Default is `block`
   for full-width sections; .card-hero / .spotlight cards need
   `flex` because they use column-flex inside.
   ────────────────────────────────────────────────────────────── */
body[data-effective-role="label"] [data-hide-for-label] {
  display: none !important;
}
body[data-effective-role="label"] [data-show-for-label][hidden] {
  display: block;
}
body[data-effective-role="label"] .card-hero[data-show-for-label][hidden],
body[data-effective-role="label"] .spotlight[data-show-for-label][hidden] {
  display: flex;
}

/* Artist + Manager mirror label on desktop. Same data surfaces they
   need every day: Top Cities (audience map) + the Most Recent
   Release card. Mobile keeps them differentiated; this is a
   desktop-only parity rule. */
body[data-effective-role="artist"]  #top-cities-section[hidden],
body[data-effective-role="manager"] #top-cities-section[hidden],
body[data-effective-role="artist"]  #label-recent-release-section[hidden],
body[data-effective-role="manager"] #label-recent-release-section[hidden] {
  display: block;
}
/* VC teaser grid override — wrapper that holds the Offers Inbox
   + Venue Network cards side-by-side. Visible to anyone with a
   business reason to think about future bookings: booking agents
   (it's their primary job), managers (they negotiate offers with
   the agent), artists (it's their career), admin/jedi (god-mode
   visibility). Crew roles + content roles don't see it — it'd
   just be noise to a TM or merch manager. */
body[data-effective-role="booking_agent"] .vc-teaser-grid[data-show-for-vc-preview][hidden],
body[data-effective-role="booking"]       .vc-teaser-grid[data-show-for-vc-preview][hidden],
body[data-effective-role="artist"]        .vc-teaser-grid[data-show-for-vc-preview][hidden],
body[data-effective-role="manager"]       .vc-teaser-grid[data-show-for-vc-preview][hidden],
body[data-effective-role="admin"]         .vc-teaser-grid[data-show-for-vc-preview][hidden],
body[data-effective-role="jedi"]          .vc-teaser-grid[data-show-for-vc-preview][hidden] {
  display: grid;
}
/* Inner VC teaser sections — once the parent grid is shown, the
   teasers need flex (column shell) so the list flex-grows to
   equalize card heights. */
body[data-effective-role="booking_agent"] .vc-teaser-grid > .vc-teaser[data-show-for-vc-preview][hidden],
body[data-effective-role="booking"]       .vc-teaser-grid > .vc-teaser[data-show-for-vc-preview][hidden],
body[data-effective-role="artist"]        .vc-teaser-grid > .vc-teaser[data-show-for-vc-preview][hidden],
body[data-effective-role="manager"]       .vc-teaser-grid > .vc-teaser[data-show-for-vc-preview][hidden],
body[data-effective-role="admin"]         .vc-teaser-grid > .vc-teaser[data-show-for-vc-preview][hidden],
body[data-effective-role="jedi"]          .vc-teaser-grid > .vc-teaser[data-show-for-vc-preview][hidden] {
  display: flex;
}

/* Slim VC teaser — the single-row "more coming soon" placeholder.
   Restricted to BOOKING AGENTS only (per user spec — they're the
   actual audience for upcoming Venue CNTRL features). Other roles
   shouldn't see Venue CNTRL marketing on their dashboard.
   The `.vc-teaser { display: flex }` rule has higher specificity
   than the [hidden] attribute selector, so we need an explicit
   [hidden] override at the parent class level + un-hide rule
   scoped to booking_agent/booking. */
.vc-teaser--slim[hidden] {
  display: none !important;
}
body[data-effective-role="booking_agent"] .vc-teaser--slim[hidden],
body[data-effective-role="booking"]       .vc-teaser--slim[hidden] {
  display: flex !important;
}
/* Advance-status pill on the TM tile bottom row — colored by
   state. Green = ready / amber = pending / red = missing /
   grey = not yet advanced. */
.tm-spotlight__tiles .top-post {
  cursor: pointer;
  transition: transform 120ms ease;
}
.tm-spotlight__tiles .top-post:hover { transform: translateY(-2px); }
.tm-spotlight__tiles .top-post__thumb {
  background-size: cover;
  background-position: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  display: grid;
  place-items: center;
  color: #fff;
}
.tm-spotlight__tiles .top-post__date-y {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  letter-spacing: -0.005em;
  line-height: 1;
}
.tm-spotlight__tiles .top-post__date-m {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  opacity: 0.7;
  margin-top: 2px;
}
.tm-spotlight__tiles .top-post__status {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  margin-top: 4px;
}
.tm-spotlight__tiles .top-post__status--ready    { background: rgba(34,139,86,0.22);  color: #b6f0c8; }
.tm-spotlight__tiles .top-post__status--pending  { background: rgba(212,142,19,0.22); color: #ffd789; }
.tm-spotlight__tiles .top-post__status--day-of   { background: rgba(220,38,38,0.22);  color: #ffb3b3; }
.tm-spotlight__tiles .top-post__status--draft    { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.55); }

/* ── Booking-agent spotlight ("Holds in motion") ──
   Replaces the artist spotlight when effective role is booking
   agent. Same dark-glass treatment as the TM spotlight — same
   crimson press-photo background via applySpotlightPhoto in
   dashboard-wiring.js. */
.ba-holds {
  margin-top: 18px;
}
.ba-holds__label {
  margin: 0 0 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
}
.ba-holds__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ba-holds__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.ba-holds__row:hover {
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-1px);
}
.ba-holds__row--placeholder {
  cursor: default;
  background: rgba(255, 255, 255, 0.03);
  border-style: dashed;
  color: rgba(255, 255, 255, 0.45);
  justify-content: center;
  display: flex;
  padding: 16px 14px;
  font-size: 13px;
}
.ba-holds__row--placeholder:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.03);
}
.ba-holds__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.ba-holds__date-d {
  font-family: var(--ac-font-display, 'Inter', sans-serif);
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ba-holds__date-m {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
  margin-top: 4px;
}
.ba-holds__where { min-width: 0; }
.ba-holds__venue {
  font-family: var(--ac-font-display, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ba-holds__city {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
  margin-top: 4px;
}
/* Member vote progress — "3 of 5 in" with a thin progress bar
   underneath. */
.ba-holds__votes {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 70px;
}
.ba-holds__votes-text {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
}
.ba-holds__votes-bar {
  width: 60px;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
}
.ba-holds__votes-bar-fill {
  height: 100%;
  background: rgb(34, 197, 94);
  transition: width 200ms ease;
}
/* Expiry — colored by urgency. Default white, amber if <=2 days,
   red if <=1 day or already expired. */
.ba-holds__expiry {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 64px;
}
.ba-holds__expiry-num {
  font-family: var(--ac-font-display, 'Inter', sans-serif);
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.ba-holds__expiry-lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
  margin-top: 2px;
}
.ba-holds__row--urgent .ba-holds__expiry-num    { color: #ffd789; }
.ba-holds__row--critical .ba-holds__expiry-num  { color: #ff8a8a; }


/* Next-3 shows + Top merch (30d) panel.
   2-column split inside the spotlight bottom: shows list left,
   bestseller list right. Each list renders 3-5 compact rows in
   the dark-glass style that matches the rest of the spotlight. */
.tm-next3 {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 1000px) {
  .tm-next3 { grid-template-columns: 1fr; }
}
.tm-next3__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.tm-next3__label {
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-weight: 700;
}
.tm-next3__shows,
.tm-next3__merch {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tm-next3__show {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.tm-next3__show:hover {
  background: rgba(255,255,255,0.09);
  transform: translateY(-1px);
}
.tm-next3__show--placeholder {
  cursor: default;
  background: rgba(255,255,255,0.03);
  border-style: dashed;
  color: rgba(255,255,255,0.45);
  justify-content: center;
  display: flex;
  padding: 16px 14px;
  font-size: 13px;
}
.tm-next3__show--placeholder:hover {
  transform: none;
  background: rgba(255,255,255,0.03);
}
.tm-next3__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.tm-next3__date-d {
  font-family: var(--ac-font-display, 'Inter', sans-serif);
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.tm-next3__date-m {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
  font-weight: 700;
  margin-top: 4px;
}
.tm-next3__where { min-width: 0; }
.tm-next3__venue {
  font-family: var(--ac-font-display, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tm-next3__cap {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  font-weight: 700;
  margin-top: 4px;
}
.tm-next3__sold {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.tm-next3__sold-num {
  font-family: var(--ac-font-display, 'Inter', sans-serif);
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.tm-next3__sold-lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  font-weight: 700;
  margin-top: 2px;
}

/* Top merch column. */
.tm-next3__merch-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
}
.tm-next3__merch-row--placeholder {
  background: rgba(255,255,255,0.03);
  border-style: dashed;
  color: rgba(255,255,255,0.5);
  justify-content: center;
  text-align: center;
  font-size: 12px;
  padding: 18px 14px;
  grid-template-columns: 1fr;
}
.tm-next3__merch-rank {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  font-weight: 700;
}
.tm-next3__merch-title {
  font-size: 13px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tm-next3__merch-units {
  font-family: var(--ac-font-display, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
/* Recent-show flyer tiles inside the bm spotlight — tap target
   for grabbing the show's media link. Thumbnails fill the tile
   like a press shot; meta line below shows date + venue. */
.bm-spotlight__tiles .top-post {
  cursor: pointer;
  transition: transform 120ms ease;
}
.bm-spotlight__tiles .top-post:hover { transform: translateY(-2px); }
.bm-spotlight__tiles .top-post--nomedia {
  opacity: 0.55;
  cursor: not-allowed;
}
.bm-spotlight__tiles .top-post--nomedia:hover { transform: none; }
.bm-spotlight__tiles .top-post__thumb {
  background-size: cover;
  background-position: center;
}
.bm-spotlight__tiles .top-post__cta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  display: block;
  margin-top: 2px;
}

/* ── Production Spotlight (dash-hero left slot) ──
   Built ON TOP OF the existing .spotlight class — keeps the dark
   photo bg, eyebrow + big title + 3 stat blocks + bottom row of
   tiles. Only adds the production-specific extras: tile labels,
   crew note feed, action row. */
.prod-spotlight .top-post__thumb {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.prod-spotlight__tiles .top-post__meta span {
  /* Tile text caps at one line so a long mic-list summary
     doesn't blow out the spotlight rhythm. */
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Inline crew notes — top 2 most recent. Each renders as a
   slim dark row with a "CREW TIP" pill, the note text, and the
   contributing band's attribution on the right. */
.prod-spotlight__notes {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prod-spotlight__note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.92);
}
.prod-spotlight__note-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.prod-spotlight__note-text {
  font-size: 13px;
  line-height: 1.4;
  overflow: hidden;
}
.prod-spotlight__note-attr {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

/* Action row — Edit specs / Crew note / Be the first. Lives
   below the tiles + notes, right-aligned. Buttons inherit the
   .btn-pill--inv styling (light pill on dark bg) so they match
   the spotlight aesthetic. */
.prod-spotlight__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* ── Production Case Checklist (dashboard section, below hero) ──
   Section wraps a regular .card with the checklist body. The
   header uses the standard .section-label (matches streaming /
   socials rows) with a count + Reset pill on the right. */
.prod-cases-section .section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.prod-cases-card {
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-3);
  padding: var(--ac-space-5);
  background: var(--ac-color-paper, #fff);
}
.prod-cases__sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ac-color-t2);
  margin: 0;
  max-width: 64ch;
}
.prod-cases__stats {
  display: flex;
  align-items: center;
  gap: 8px;
}
.prod-cases__stat {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  font-weight: 700;
  color: var(--ac-color-t2);
  background: var(--ac-color-glow);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ac-color-line);
  white-space: nowrap;
}
.prod-cases__resetbtn {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--ac-color-line);
  border-radius: 999px;
  cursor: pointer;
  color: var(--ac-color-ink);
}
.prod-cases__resetbtn:hover {
  background: var(--ac-color-glow);
}

.prod-cases__list {
  flex: 1 1 auto;
  min-height: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  max-height: 60vh;
  padding-right: 4px;
}
.prod-cases__empty {
  padding: 16px;
  font-size: 13px;
  color: var(--ac-color-t3);
  background: var(--ac-color-glow);
  border: 1px dashed var(--ac-color-line);
  border-radius: 12px;
  text-align: center;
}
.prod-cases__item {
  display: grid;
  /* status pill | name | count? | nfc-pill | delete */
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--ac-color-bg);
  border: 1px solid var(--ac-color-line);
  border-radius: 10px;
  transition: background 120ms ease, border-color 120ms ease;
}
/* NFC chip on each case row — tiny pill showing the pair state.
   Unpaired (default): ghost outline + "+ NFC" label.
   Paired: green tint + "NFC" label only. Click opens the
   manage modal (handled by the wiring file's openNfcManageModal). */
.prod-cases__nfc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--ac-color-line);
  border-radius: 999px;
  color: var(--ac-color-t3);
  cursor: pointer;
  white-space: nowrap;
}
.prod-cases__nfc:hover {
  border-color: var(--ac-color-t3);
  color: var(--ac-color-t2);
}
.prod-cases__nfc--paired {
  background: rgba(34, 139, 86, 0.10);
  border-color: rgba(34, 139, 86, 0.30);
  color: rgb(34, 139, 86);
}
.prod-cases__nfc--paired:hover {
  background: rgba(34, 139, 86, 0.16);
  border-color: rgba(34, 139, 86, 0.45);
}
.prod-cases__item--state-packed {
  background: rgba(212, 142, 19, 0.05);
  border-color: rgba(212, 142, 19, 0.20);
}
.prod-cases__item--state-on_truck {
  background: rgba(34, 139, 86, 0.06);
  border-color: rgba(34, 139, 86, 0.25);
}

/* Three-state pill (replaces the old single checkbox). Tapping
   cycles in_use → packed → on_truck → in_use. Same color
   vocabulary as the mobile dashboard pill. */
.prod-cases__pill {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  min-width: 96px;
  text-align: center;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.prod-cases__pill--in_use {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ac-color-t2);
  border-color: rgba(0, 0, 0, 0.08);
}
.prod-cases__pill--packed {
  background: rgba(212, 142, 19, 0.12);
  color: rgb(168, 110, 8);
  border-color: rgba(212, 142, 19, 0.30);
}
.prod-cases__pill--on_truck {
  background: rgba(34, 139, 86, 0.12);
  color: rgb(34, 139, 86);
  border-color: rgba(34, 139, 86, 0.30);
}

.prod-cases__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ac-color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.prod-cases__item--state-packed .prod-cases__name {
  color: var(--ac-color-t2);
}
.prod-cases__item--state-on_truck .prod-cases__name {
  color: var(--ac-color-t3);
  text-decoration: line-through;
  text-decoration-color: rgba(34, 139, 86, 0.40);
}
.prod-cases__count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--ac-color-t3);
  background: var(--ac-color-glow);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--ac-color-line);
  white-space: nowrap;
  margin-right: 4px;
}
.prod-cases__item.is-checked .prod-cases__count {
  color: rgb(34, 139, 86);
  border-color: rgba(34, 139, 86, 0.30);
  background: rgba(34, 139, 86, 0.08);
}

.prod-cases__del {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ac-color-t3);
  width: 28px; height: 28px;
  border-radius: 6px;
  display: grid; place-items: center;
}
.prod-cases__del:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ac-color-danger, #c0392b);
}

.prod-cases__add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.prod-cases__addinput {
  padding: 10px 12px;
  background: var(--ac-color-glow);
  border: 1px solid var(--ac-color-line);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ac-color-ink);
  outline: none;
}
.prod-cases__addinput::placeholder {
  color: var(--ac-color-t3);
}
.prod-cases__addinput:focus {
  border-color: var(--ac-color-accent);
}
.prod-cases__addbtn {
  padding: 10px 16px;
  background: var(--ac-color-ink);
  color: #fff;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The production-assets-stack wants display: grid (see the layout
   block lower in this file). The generic show-for-production rule
   above sets display: block — which has higher specificity than the
   plain `.production-assets-stack { display: grid }` selector and
   would force the stack back to block flow. This more-specific
   override (body[role] + class + two attrs) wins specificity AND
   source order, so the grid sticks. If new elements pick up
   data-show-for-production they keep the default block treatment;
   only the stack opts into grid. */
body[data-effective-role="foh_engineer"]     .production-assets-stack[data-show-for-production][hidden],
body[data-effective-role="monitor_engineer"] .production-assets-stack[data-show-for-production][hidden],
body[data-effective-role="tech"]             .production-assets-stack[data-show-for-production][hidden] {
  display: grid;
}

/* ── Ops Schedule Calendar (full-width, stacked) ──
   IMPORTANT: the [data-show-for-ops] element starts with the
   `hidden` HTML attribute so non-ops roles never see it. The CSS
   below ONLY applies its layout rules when the body is one of the
   six ops roles — that's what overrides the hidden attribute. The
   previous version put `display: grid` on the base class, which
   beat the [hidden] attr on specificity and leaked the calendar
   into every role. Lesson: never style the show-for-ops element
   outside the role-gated selector. */
body[data-effective-role="foh_engineer"]      .schedule-ops-view[data-show-for-ops],
body[data-effective-role="monitor_engineer"]  .schedule-ops-view[data-show-for-ops],
body[data-effective-role="tech"]              .schedule-ops-view[data-show-for-ops],
body[data-effective-role="merch_manager"]     .schedule-ops-view[data-show-for-ops],
body[data-effective-role="content_creator"]   .schedule-ops-view[data-show-for-ops],
body[data-effective-role="social_media_manager"] .schedule-ops-view[data-show-for-ops],
body[data-effective-role="band_member"]       .schedule-ops-view[data-show-for-ops],
body[data-effective-role="label"]             .schedule-ops-view[data-show-for-ops] {
  display: flex !important;
  flex-direction: column;
  gap: var(--ac-space-5);
}
.sc-cal {
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-xl);
  padding: 18px 20px 22px;
}
.sc-cal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 14px;
}
.sc-cal__month {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px; letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ac-color-ink);
}
.sc-cal__year {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; color: var(--ac-color-t3);
  margin-left: 10px; letter-spacing: 0.04em;
}
.sc-cal__nav { display: flex; gap: 6px; }
.sc-cal__navbtn {
  width: 32px; height: 32px; border-radius: 16px;
  background: rgba(0,0,0,0.04); border: none;
  display: grid; place-items: center;
  color: var(--ac-color-ink);
  cursor: pointer;
}
.sc-cal__navbtn:hover { background: rgba(0,0,0,0.08); }
.sc-cal__dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  text-align: center; margin-bottom: 8px;
}
.sc-cal__dow > div {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.16em; font-weight: 700;
  color: var(--ac-color-t3);
  padding: 6px 0;
}
.sc-cal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.sc-cal__cell {
  /* Mobile uses aspect-ratio: 1 because cells are tiny (~50px wide
     on a 380px viewport). On desktop with 1100+ px to fill, square
     cells become 160px+ tall and the calendar becomes the page.
     Cap height directly so the grid stays the same regardless of
     viewport width. */
  min-height: 56px;
  max-height: 80px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  padding: 6px 0;
  border-radius: 12px;
  cursor: pointer;
  color: var(--ac-color-ink);
  position: relative;
  transition: background 120ms ease;
}
.sc-cal__cell:hover:not(.sc-cal__cell--empty):not(.sc-cal__cell--today) {
  background: rgba(0,0,0,0.04);
}
.sc-cal__cell--empty { cursor: default; pointer-events: none; }
.sc-cal__cell--today {
  background: var(--ac-color-accent);
  color: #fff;
}
.sc-cal__cell--selected:not(.sc-cal__cell--today) {
  background: rgba(0,0,0,0.08);
}
.sc-cal__day {
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px; letter-spacing: -0.005em;
  line-height: 1;
}
.sc-cal__cell--past:not(.sc-cal__cell--today) {
  color: var(--ac-color-t3);
}
/* Bottom-of-cell colored strip — one segment per unique event
   type on this day. Replaces the old two-dot confirmed/hold
   treatment. Mirrors the mobile schedule's strip exactly so
   the visual vocabulary is consistent across surfaces. */
.sc-cal__strip {
  position: absolute;
  left: 8px; right: 8px; bottom: 6px;
  height: 4px;
  display: flex; gap: 2px;
  border-radius: 2px;
  overflow: hidden;
}
.sc-cal__strip > span {
  flex: 1; min-width: 0;
  border-radius: 2px;
}
/* Type → color — keep in sync with site/m/schedule.html. */
.sc-cal__seg--show       { background: var(--ac-color-accent); }
.sc-cal__seg--hold       { background: #d97706; }
.sc-cal__seg--rehearsal  { background: #7c3aed; }
.sc-cal__seg--content    { background: #0d9488; }
.sc-cal__seg--pr         { background: #db2777; }
.sc-cal__seg--tour       { background: #2563eb; }
.sc-cal__seg--other      { background: var(--ac-color-t3); }
/* Today's cell has a maroon background — flip segments to white
   so they stay visible. */
.sc-cal__cell--today .sc-cal__strip > span {
  background: #fff !important;
  opacity: 0.9;
}

/* Legend swatch — small color chip matching the strip seg
   palette. Replaces the dot legend. */
.sc-cal__legend {
  display: flex; gap: 8px 16px; justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--ac-color-t3);
}
.sc-cal__legend > div {
  display: inline-flex; align-items: center; gap: 6px;
}
.sc-cal__legend-swatch {
  width: 14px; height: 4px;
  border-radius: 2px;
  display: inline-block;
}

/* ── Backward-compat — old .sc-cal__dot rules kept as no-ops
   in case any other view still references the class. The new
   strip rules above are the source of truth. */
.sc-cal__dots { display: none; }

/* Day-detail header */
.sc-day { padding: 4px 4px 0; }
.sc-day__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.16em; font-weight: 700;
  color: var(--ac-color-t3);
  text-transform: uppercase;
}
.sc-day__title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px; letter-spacing: -0.005em;
  text-transform: uppercase;
  margin-top: 6px;
  color: var(--ac-color-ink);
}
.sc-day__cards {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 12px;
}
.sc-day__empty {
  margin-top: 10px;
  padding: 22px 18px;
  background: var(--ac-color-paper);
  border: 1px dashed var(--ac-color-line-strong);
  border-radius: 14px;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.14em; font-weight: 700;
  color: var(--ac-color-t3);
  text-transform: uppercase;
}

/* Show card — dark with crimson glow */
.sc-showcard {
  background: #0e0c0b; color: #fff;
  border-radius: 16px;
  padding: 18px 20px;
  position: relative; overflow: hidden;
  cursor: pointer;
  transition: transform 100ms ease;
}
.sc-showcard:hover { transform: translateY(-1px); }
.sc-showcard__glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(214,58,82,0.3) 0%, transparent 50%);
  pointer-events: none;
}
.sc-showcard__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; position: relative;
}
.sc-showcard__pill {
  padding: 5px 11px; border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
}
.sc-showcard__pill--live { background: var(--ac-color-accent); color: #fff; }
.sc-showcard__pill--conf { background: rgba(255,255,255,0.1);  color: #fff; }
.sc-showcard__pill--hold { background: rgba(217,119,6,0.25);   color: #fbbf24; }
.sc-showcard__livedot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  animation: sc-livedot-pulse 1.6s ease-in-out infinite;
}
@keyframes sc-livedot-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.4; transform: scale(0.8); }
}
.sc-showcard__time {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
  position: relative;
}
.sc-showcard__title {
  margin-top: 12px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 20px; letter-spacing: -0.005em;
  text-transform: uppercase;
  position: relative;
}
.sc-showcard__sub {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: 0;
  color: rgba(255,255,255,0.55);
  text-transform: none;
  margin-top: 4px;
}
.sc-showcard__chips {
  margin-top: 12px;
  display: flex; flex-wrap: wrap; gap: 6px;
  position: relative;
}
.sc-showcard__chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}

/* Coming up panel */
.sc-up { padding: 4px 4px 0; }
.sc-up__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.16em; font-weight: 700;
  color: var(--ac-color-t3);
  text-transform: uppercase;
}
.sc-up__list {
  margin-top: 10px;
  display: flex; flex-direction: column;
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: 14px;
  overflow: hidden;
}
.sc-up__row {
  display: grid; grid-template-columns: 70px 1fr auto;
  gap: 14px; align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--ac-color-line);
  cursor: pointer;
  transition: background 120ms ease;
}
.sc-up__row:first-child { border-top: 0; }
.sc-up__row:hover { background: rgba(0,0,0,0.02); }
.sc-up__day {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.16em; font-weight: 700;
  color: var(--ac-color-t3);
}
.sc-up__num {
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px; letter-spacing: -0.005em;
  margin-top: 2px;
  color: var(--ac-color-ink);
}
.sc-up__title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px; letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ac-color-ink);
}
.sc-up__sub {
  font-size: 12px;
  color: var(--ac-color-t2);
  margin-top: 2px;
}
.sc-up__pill {
  padding: 4px 10px; border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
}
.sc-up__pill--conf { background: rgba(214,58,82,0.12); color: var(--ac-color-accent); }
.sc-up__pill--hold { background: rgba(217,119,6,0.14); color: #b45309; }
/* The lineup row's right-aligned value wraps a horizontal flex grid of
   pills with consistent gap. Replaces the old margin-right/-bottom
   approach which produced uneven spacing on the row's last pill (you
   saw a chunky gap on the right edge of "Maewyn" before "Whitsett"
   wrapped). */
.show-details__row .show-details__value:has(> .show-details__lineup-act),
.show-details__lineup-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.show-details__lineup-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  background: var(--ac-color-nested);
  border-radius: var(--ac-radius-pill);
  font-size: var(--ac-fs-sm);
  border: 1px solid transparent;
  font-weight: var(--ac-fw-semibold);
}
/* Small avatar that sits inside a lineup pill — shows the artist's
   Bandsintown thumbnail if we have one, otherwise the band's initials.
   The pill's left padding above is reduced so the avatar hugs the edge. */
.show-details__act-avatar {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--ac-color-paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-t2);
  letter-spacing: 0.02em;
  border: 1px solid var(--ac-color-line-subtle);
  overflow: hidden;
}
/* See .act-chip__avatar--bit-image above — same modifier, applied
   when the avatar's source is a BIT thumb so the 7% zoom compensates
   for BIT's built-in padding. */
.show-details__act-avatar--bit-image {
  background-size: 107%;
}
.show-details__act-avatar--initials { background-image: none; }
/* Venue value reads as one unit: avatar + name flow side-by-side and
   stay glued together when the row right-aligns the value. */
.show-details__value--with-avatar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.show-details__venue-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: var(--ac-color-paper);
  font-size: 0.65rem;
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-t2);
  border: 1px solid var(--ac-color-line-subtle);
}
.show-details__venue-avatar--initials { background-image: none; }
.show-details__venue-name { font-weight: var(--ac-fw-semibold); }
/* Lineup chips for friend bands carry the same three states as the
   standalone friend-chip so the invite + accept flow lives inline with
   the lineup itself. */
.show-details__lineup-act--open {
  background: rgba(234, 179, 8, 0.16);
  color: #92400e;
  border-color: rgba(234, 179, 8, 0.35);
}
.show-details__lineup-act--pending {
  background: rgba(234, 179, 8, 0.12);
  color: #92400e;
  border-color: rgba(234, 179, 8, 0.30);
}
.show-details__lineup-act--pending .friend-chip__dot   { background: #eab308; }
.show-details__lineup-act--pending .friend-chip__badge { background: rgba(234, 179, 8, 0.25); color: #78350f; }
.show-details__lineup-act--accepted {
  background: rgba(22, 163, 74, 0.14);
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.30);
}
.show-details__lineup-act--accepted .friend-chip__dot { background: var(--ac-color-success); }
.show-details__lineup-act--accepted em,
.show-details__lineup-act--pending em,
.show-details__lineup-act--open em { color: inherit; }
.show-details__actions { display: flex; flex-wrap: wrap; gap: var(--ac-space-2); padding-top: var(--ac-space-4); border-top: 1px solid var(--ac-color-line-subtle); }

/* ─── CONNECT TAB ───────────────────────────────────
   Email/SMS broadcast hub + fan directory. Stats strip on top reuses
   the schedule-stats grid (single centered axis per tile). Below, a
   broadcast composer card with template chips + an "Email style" popup
   launched from the card header. Fan directory is a vertical list of
   avatar rows, no table chrome. */
.connect-broadcast {
  padding: var(--ac-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-4);
}
.connect-broadcast__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ac-space-4);
  flex-wrap: wrap;
}
.connect-broadcast__head h3 { margin: 0; }
.connect-broadcast__sub {
  margin: 4px 0 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
}
.connect-broadcast__head-actions { display: flex; gap: var(--ac-space-2); flex-wrap: wrap; }
.connect-broadcast__channel,
.connect-broadcast__templates {
  display: flex;
  gap: var(--ac-space-2);
  flex-wrap: wrap;
}
.connect-broadcast__channel { padding-bottom: var(--ac-space-2); border-bottom: 1px solid var(--ac-color-line-subtle); }
.connect-broadcast__subject,
.connect-broadcast__body {
  width: 100%;
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-lg);
  padding: var(--ac-space-3) var(--ac-space-4);
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-md);
  color: var(--ac-color-ink);
  background: var(--ac-color-paper);
  resize: vertical;
}
.connect-broadcast__subject:focus,
.connect-broadcast__body:focus {
  outline: none;
  border-color: var(--ac-color-ring);
  box-shadow: 0 0 0 3px var(--ac-color-accent-chip);
}
.connect-broadcast__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-space-4);
  flex-wrap: wrap;
}
.connect-broadcast__audience {
  margin: 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
  display: flex;
  align-items: center;
  gap: var(--ac-space-2);
}
.connect-broadcast__audience select {
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-pill);
  padding: 4px 12px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-ink);
  background: var(--ac-color-paper);
}

/* Fan directory */
.connect-directory {
  margin-top: var(--ac-space-5);
  padding: var(--ac-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-3);
}
.connect-directory__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-space-4);
  flex-wrap: wrap;
}
.connect-directory__head h3 { margin: 0; }
.connect-directory__head-actions { display: flex; gap: var(--ac-space-2); }
.connect-directory__search {
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-pill);
  padding: 6px 14px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-ink);
  background: var(--ac-color-paper);
  min-width: 220px;
}
.connect-fans {
  list-style: none;
  margin: 0;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-2);
  /* Cap the directory so it doesn't push the rest of the page off the
     fold. Roughly ~6 rows tall — scrolls vertically beyond that. */
  max-height: 460px;
  /* Always-visible scrollbar — see .contact-list for rationale. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--ac-radius-lg);
  /* See .contact-list — `scrollbar-width: thin` is removed on purpose
     so Chrome uses the persistent webkit customization below. */
  scrollbar-color: rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.04);
}
.connect-fans::-webkit-scrollbar { width: 6px; }
.connect-fans::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
}
.connect-fans::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
}
.connect-fans:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.3); }
.connect-fans__row {
  display: grid;
  grid-template-columns: 36px 1fr 1.4fr auto auto auto;
  align-items: center;
  gap: var(--ac-space-3);
  padding: var(--ac-space-3) var(--ac-space-4);
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-lg);
  font-size: var(--ac-fs-md);
}
.connect-fans__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  /* Per-fan color hash — see connect-wiring.js applyAvatarPalette().
     Default fallback gradient if no inline style is set. */
  background: linear-gradient(135deg, var(--avatar-from, #f59e42), var(--avatar-to, #ef4444));
  color: #fff;
  display: grid; place-items: center;
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-sm);
}
.connect-fans__name  { font-weight: var(--ac-fw-bold); color: var(--ac-color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.connect-fans__email { color: var(--ac-color-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.connect-fans__shows { font-size: var(--ac-fs-sm); color: var(--ac-color-t2); white-space: nowrap; }
.connect-fans__source {
  font-size: var(--ac-fs-xs);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--ac-radius-pill);
  background: var(--ac-color-nested);
  color: var(--ac-color-t2);
}
/* Functional color: pill tints by where the fan came from. Lets you
   eyeball provenance while scrolling the directory. */
.connect-fans__source--shopify   { background: rgba(22, 163, 74, 0.14); color: #15803d; }
.connect-fans__source--mailchimp { background: rgba(234, 179, 8,  0.18); color: #a16207; }
.connect-fans__source--show      { background: rgba(190, 18, 60, 0.14); color: #be123c; }
.connect-fans__source--csv       { background: rgba(37, 99, 235, 0.14); color: #1d4ed8; }
.connect-fans__source--merch     { background: rgba(124, 58, 237, 0.14); color: #6d28d9; }
.connect-fans__source--manual    { background: var(--ac-color-nested); color: var(--ac-color-t2); }
.connect-fans__status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-success);
  font-weight: var(--ac-fw-semibold);
}
.connect-fans__status::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ac-color-success);
}
.connect-fans__status--opted-out {
  color: var(--ac-color-t3);
}
.connect-fans__status--opted-out::before {
  background: var(--ac-color-t3);
}
.connect-fans__empty {
  text-align: center;
  padding: var(--ac-space-8) var(--ac-space-4);
  color: var(--ac-color-t2);
  font-size: var(--ac-fs-md);
}

/* Connect modals (email style, imports, history, add fan) */
.connect-overlay {
  position: fixed; inset: 0;
  background: rgba(14, 12, 11, 0.55);
  display: grid;
  place-items: center;
  z-index: 100;
  padding: var(--ac-space-4);
}
.connect-overlay[hidden] { display: none; }
.connect-modal {
  background: var(--ac-color-paper);
  border-radius: var(--ac-radius-3xl);
  padding: var(--ac-space-6);
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-4);
  box-shadow: var(--ac-shadow-lg);
}
.connect-modal__head { display: flex; align-items: center; justify-content: space-between; }
.connect-modal__title { margin: 0; font-size: var(--ac-fs-2xl); font-weight: var(--ac-fw-black); letter-spacing: var(--ac-tracking-tight); }
.connect-modal__body { display: flex; flex-direction: column; gap: var(--ac-space-3); }
.connect-modal__sub  { margin: 0; font-size: var(--ac-fs-sm); color: var(--ac-color-t2); }
.connect-modal__label {
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-t2);
  text-transform: uppercase;
  letter-spacing: var(--ac-tracking-wider);
  margin-top: var(--ac-space-2);
}
.connect-modal__input {
  width: 100%;
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  padding: 8px 12px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-md);
  color: var(--ac-color-ink);
  background: var(--ac-color-paper);
}
.connect-modal__input:focus { outline: none; border-color: var(--ac-color-ring); box-shadow: 0 0 0 3px var(--ac-color-accent-chip); }
.connect-modal__foot { display: flex; gap: var(--ac-space-2); justify-content: flex-end; padding-top: var(--ac-space-2); border-top: 1px solid var(--ac-color-line-subtle); }

/* Email style: image upload tile */
.connect-style__upload {
  border: 1px dashed var(--ac-color-line);
  border-radius: var(--ac-radius-lg);
  padding: var(--ac-space-4);
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--ac-color-nested);
}
.connect-style__upload-empty { display: flex; flex-direction: column; align-items: center; gap: var(--ac-space-2); color: var(--ac-color-t3); font-size: var(--ac-fs-sm); }
.connect-style__upload-preview { display: flex; flex-direction: column; align-items: center; gap: var(--ac-space-2); }
.connect-style__upload-preview img { max-width: 100%; max-height: 120px; border-radius: var(--ac-radius-md); }

/* Imports modal grid */
.connect-imports__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--ac-space-3); }
.connect-imports__tile {
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-lg);
  background: var(--ac-color-paper);
  padding: var(--ac-space-4);
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  cursor: pointer;
  text-align: left;
  font-family: var(--ac-font-body);
  color: var(--ac-color-ink);
}
.connect-imports__tile:hover { border-color: var(--ac-color-ring); }
.connect-imports__name { font-weight: var(--ac-fw-bold); }
.connect-imports__hint { font-size: var(--ac-fs-xs); color: var(--ac-color-t3); }

/* Merch QR modal — big centered code with the URL underneath, plus
   download/copy/print actions. The image source is rendered via the
   public api.qrserver.com endpoint (no library required). */
.connect-qr { display: flex; flex-direction: column; align-items: center; gap: var(--ac-space-3); padding: var(--ac-space-4); background: var(--ac-color-nested); border-radius: var(--ac-radius-lg); }
.connect-qr__img { width: 260px; height: 260px; max-width: 100%; background: #fff; border-radius: var(--ac-radius-md); padding: 8px; box-shadow: var(--ac-shadow-card); }
.connect-qr__url { margin: 0; font-family: var(--ac-font-body); font-size: var(--ac-fs-sm); color: var(--ac-color-t2); word-break: break-all; text-align: center; }

/* History modal list */
.connect-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ac-space-2); }
.connect-history__row { padding: var(--ac-space-3); border: 1px solid var(--ac-color-line); border-radius: var(--ac-radius-md); }
.connect-history__row-head { display: flex; justify-content: space-between; gap: var(--ac-space-3); font-size: var(--ac-fs-sm); }
.connect-history__row-subject { font-weight: var(--ac-fw-bold); color: var(--ac-color-ink); }
.connect-history__row-meta { color: var(--ac-color-t3); }
.connect-history__row-body { margin-top: 4px; font-size: var(--ac-fs-sm); color: var(--ac-color-t2); white-space: pre-wrap; }
.connect-history__empty { text-align: center; padding: var(--ac-space-5); color: var(--ac-color-t3); font-size: var(--ac-fs-sm); }

@media (max-width: 768px) {
  .connect-fans__row { grid-template-columns: 36px 1fr auto; }
  .connect-fans__email,
  .connect-fans__shows,
  .connect-fans__source { display: none; }
  .connect-imports__grid { grid-template-columns: 1fr; }
}

/* ─── Profile modal ──────────────────────────────────────────────
   Single overlay reused for own-profile editing and read-only viewing
   of other users' profiles. profile-wiring.js controls the mode. */
.profile-overlay {
  position: fixed; inset: 0;
  /* Solid opaque backdrop — no backdrop-filter blur. The blur was
     re-rasterizing the underlying page on every scroll frame which
     read as a "flash" especially on retina screens. A heavier solid
     fill hides the background re-renders just as well without the
     paint cost. */
  background: rgba(14, 12, 11, 0.88);
  display: grid;
  place-items: center;
  z-index: 100;
  padding: var(--ac-space-4);
  /* Internal scrolling — overlay itself scrolls so tall modal content
     never gets clipped, while the body underneath is locked (see
     .body--modal-open rule below) so the page doesn't scroll too. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.profile-overlay[hidden] { display: none; }
/* When any modal is open, freeze body scroll. Prevents the
   underlying page from scrolling under the modal — which used to
   trigger background re-renders, flashing the modal. */
body.body--modal-open { overflow: hidden; }
.profile-modal {
  background: var(--ac-color-paper);
  border-radius: var(--ac-radius-3xl);
  padding: var(--ac-space-8);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-5);
  box-shadow: var(--ac-shadow-lg);
}
.profile-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ac-space-2);
}
/* Back + close buttons share the right side of the header, grouped tight.
   Back is hidden by default and revealed via JS when there's nav history
   (e.g. you opened a band, then drilled into a band member). */
.profile-modal__head #profileBack,
.profile-modal__head #profileClose { flex: 0 0 auto; }
.profile-modal__head #profileBack[hidden] { display: none; }
.profile-modal__title {
  margin: 0;
  font-family: var(--ac-font-body);
  font-weight: var(--ac-fw-black);
  font-size: var(--ac-fs-2xl);
  letter-spacing: var(--ac-tracking-tight);
}
.profile-modal__loading,
.profile-modal__error {
  padding: var(--ac-space-6);
  text-align: center;
  color: var(--ac-color-t2);
  font-size: var(--ac-fs-md);
}
.profile-modal__error { color: var(--ac-color-danger); }
.profile-modal__welcome {
  margin: 0;
  padding: var(--ac-space-3) var(--ac-space-4);
  background: var(--ac-color-nested);
  border-radius: var(--ac-radius-lg);
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
}

/* Editor */
.profile-edit { display: flex; flex-direction: column; gap: var(--ac-space-3); }
.profile-edit__avatar-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--ac-space-4);
  align-items: center;
  padding-bottom: var(--ac-space-2);
}
.profile-edit__avatar {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(135deg, #f59e42, #ef4444);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--ac-font-body);
  font-weight: var(--ac-fw-black);
  font-size: var(--ac-fs-2xl);
  padding: 0;
}
.profile-edit__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.profile-edit__avatar-overlay {
  position: absolute;
  inset: auto 0 0 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: var(--ac-fs-xs);
  font-weight: var(--ac-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ac-tracking-wider);
  padding: 4px 0;
}
.profile-edit__avatar-meta { display: flex; flex-direction: column; gap: var(--ac-space-1); }
.profile-edit__avatar-hint { margin: 0; font-size: var(--ac-fs-sm); color: var(--ac-color-t2); }
.profile-edit__label {
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-t2);
  margin-top: var(--ac-space-1);
}
/* First / Last name side-by-side. Stack on narrow viewports so they
   never crowd on phones. */
.profile-edit__name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ac-space-3);
}
.profile-edit__name-row .profile-edit__label { margin-top: var(--ac-space-1); }
.profile-edit__name-col { display: flex; flex-direction: column; }
@media (max-width: 480px) {
  .profile-edit__name-row { grid-template-columns: 1fr; gap: var(--ac-space-1); }
}
.profile-edit__sub {
  font-weight: var(--ac-fw-regular);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ac-color-t3);
  font-size: var(--ac-fs-xs);
}
.profile-edit__input {
  width: 100%;
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  padding: 10px 12px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-md);
  color: var(--ac-color-ink);
  background: var(--ac-color-paper);
}
.profile-edit__input:focus {
  outline: none;
  border-color: var(--ac-color-ring);
  box-shadow: 0 0 0 3px var(--ac-color-accent-chip);
}
.profile-edit__input:disabled {
  background: var(--ac-color-nested);
  color: var(--ac-color-t3);
}
.profile-edit__textarea { resize: vertical; min-height: 80px; }
.profile-edit__skills {
  display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px;
}
.profile-edit__skills-empty { color: var(--ac-color-t3); font-size: var(--ac-fs-sm); }

/* ─── Travel info inside profile editor ───────────────────────────
   Section header + sub-copy break up the form so the Travel block
   reads as its own area. Loyalty rows are 3-column grids:
   [program input | number input | × remove]. */
.profile-edit__section-head {
  margin: var(--ac-space-5) 0 4px;
  font-family: var(--ac-font-display);
  font-weight: var(--ac-fw-bold, 700);
  font-size: var(--ac-fs-md);
  letter-spacing: var(--ac-tracking-tight);
  color: var(--ac-color-ink);
  border-top: 1px solid var(--ac-color-line, rgba(0,0,0,0.08));
  padding-top: var(--ac-space-5);
}
.profile-edit__section-sub {
  margin: 0 0 var(--ac-space-3);
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
  line-height: 1.4;
}
.profile-edit__loyalty {
  display: grid;
  gap: 8px;
  margin-bottom: var(--ac-space-2);
}
.profile-edit__loyalty-empty {
  margin: 4px 0 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t3);
}
.profile-edit__loyalty-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}
.profile-edit__loyalty-row .profile-edit__input { margin: 0; }
.profile-edit__loyalty-x {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--ac-color-line, rgba(0,0,0,0.12));
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--ac-color-t2);
}
.profile-edit__loyalty-x:hover {
  border-color: var(--ac-color-danger, #B72A2A);
  color: var(--ac-color-danger, #B72A2A);
}

/* ─── Travel info inside read-only profile view ─────────────────── */
.profile-view__travel-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--ac-space-3);
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--ac-color-line, rgba(0,0,0,0.06));
  font-size: var(--ac-fs-sm);
}
.profile-view__travel-row:last-child { border-bottom: none; }
.profile-view__travel-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  color: var(--ac-color-t3);
}
.profile-view__travel-value {
  color: var(--ac-color-ink);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.profile-edit__skill-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 10px;
  background: var(--ac-color-nested);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-pill);
  font-size: var(--ac-fs-sm);
}
.profile-edit__skill-x {
  background: none; border: none; cursor: pointer;
  width: 20px; height: 20px; border-radius: 50%;
  color: var(--ac-color-t3);
  font-size: 14px; line-height: 1; padding: 0;
}
.profile-edit__skill-x:hover { background: var(--ac-color-warm); color: var(--ac-color-ink); }
.profile-edit__skill-input { /* same as base input */ }
/* Curated typeahead — wraps the input + dropdown so the suggestions
   list can position relative to the field. */
.profile-edit__skill-typeahead { position: relative; }
.profile-edit__skill-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 20;
  list-style: none;
  margin: 0; padding: 4px;
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  box-shadow: 0 12px 24px -8px rgba(50, 20, 15, 0.18);
  max-height: 240px;
  overflow-y: auto;
}
.profile-edit__skill-suggestion {
  padding: 8px 10px;
  border-radius: var(--ac-radius-sm);
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-ink);
  cursor: pointer;
  transition: background var(--ac-duration-fast) var(--ac-ease-standard);
}
.profile-edit__skill-suggestion:hover,
.profile-edit__skill-suggestion.is-active {
  background: var(--ac-color-warm);
}
.profile-edit__skill-error {
  margin: 6px 0 0;
  font-size: var(--ac-fs-xs);
  color: var(--ac-color-accent);
}
.profile-edit__visibility {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--ac-space-3);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  background: var(--ac-color-paper);
  font-size: var(--ac-fs-sm);
}
.profile-edit__visibility label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.profile-edit__visibility input[type="radio"] { margin-top: 2px; flex-shrink: 0; }
.profile-edit__actions {
  display: flex; justify-content: flex-end; gap: var(--ac-space-2);
  padding-top: var(--ac-space-2);
  border-top: 1px solid var(--ac-color-line-subtle);
}

/* Danger zone — sits at the very bottom of the profile editor.
   Dim background + soft red accent so it reads as serious without
   shouting. The phrase-confirm input is required before the button
   leaves its disabled state. */
.profile-edit__danger {
  margin-top: var(--ac-space-5);
  padding: var(--ac-space-4);
  background: rgba(190, 18, 60, 0.05);
  border: 1px solid rgba(190, 18, 60, 0.18);
  border-radius: var(--ac-radius-lg);
  display: flex; flex-direction: column; gap: 10px;
}
.profile-edit__danger-title {
  margin: 0;
  font-size: var(--ac-fs-md);
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-accent);
  letter-spacing: var(--ac-tracking-tighter);
}
.profile-edit__danger-copy {
  margin: 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
  line-height: 1.55;
}
.profile-edit__danger-copy strong {
  color: var(--ac-color-accent);
  font-weight: var(--ac-fw-bold);
  letter-spacing: 0.04em;
}
.profile-edit__danger-input {
  font-family: var(--ac-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--ac-fs-sm);
  letter-spacing: 0.04em;
}
.profile-edit__danger-btn { align-self: flex-start; }
.profile-edit__danger-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn-pill--danger {
  background: var(--ac-color-accent);
  color: var(--ac-color-on-accent, #fff);
  border: 1px solid var(--ac-color-accent);
}
.btn-pill--danger:hover { filter: brightness(0.95); }

/* Viewer (read-only) */
.profile-view { display: flex; flex-direction: column; gap: var(--ac-space-4); }

/* Band-style header for the read-only personal profile — mirrors the
   band-view header so primary artists and teammates render in
   identical frames: photo on the left with a thin vertical divider,
   name + meta + bio + contact links in the middle column, Message
   button on the right. */
.profile-view--band .profile-view__head {
  display: grid;
  grid-template-columns: 184px 1fr auto;
  gap: var(--ac-space-5);
  align-items: start;
  padding-bottom: var(--ac-space-3);
  border-bottom: 1px solid var(--ac-color-line-subtle);
}
.profile-view--band .profile-view__photo {
  width: 184px; height: 184px;
  border-radius: var(--ac-radius-xl);
  background: linear-gradient(135deg, #f59e42, #ef4444) center/cover no-repeat;
  color: #fff;
  display: grid; place-items: center;
  font-weight: var(--ac-fw-black);
  font-size: var(--ac-fs-3xl);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.profile-view--band .profile-view__photo::after {
  content: "";
  position: absolute;
  top: 8px; bottom: 8px;
  right: calc(var(--ac-space-5) * -0.5);
  width: 1px;
  background: var(--ac-color-line);
}
.profile-view--band .profile-view__name-block {
  min-width: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.profile-view--band .profile-view__location-line {
  margin: 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
}
.profile-view--band .profile-view__role {
  margin: 0;
  font-size: var(--ac-fs-md);
  color: var(--ac-color-t2);
  text-transform: capitalize;
}
.profile-view--band .profile-view__bio {
  margin: 6px 0 0;
  font-size: var(--ac-fs-sm);
  line-height: 1.5;
  color: var(--ac-color-ink);
  max-width: 56ch;
}
.profile-view--band .profile-view__contact {
  margin-top: 4px;
}
.profile-view--band .profile-view__msg-btn { white-space: nowrap; align-self: start; }
@media (max-width: 640px) {
  .profile-view--band .profile-view__head { grid-template-columns: 1fr; }
  .profile-view--band .profile-view__photo::after { display: none; }
  .profile-view--band .profile-view__photo { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}

/* Legacy circular layout (kept for any non-band-shell renderers). */
.profile-view__head {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--ac-space-3);
  align-items: center;
}
.profile-view__avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #f59e42, #ef4444);
  color: #fff;
  display: grid; place-items: center;
  font-weight: var(--ac-fw-black);
  font-size: var(--ac-fs-xl);
}
.profile-view__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.profile-view__name { margin: 0; font-size: var(--ac-fs-2xl); font-weight: var(--ac-fw-black); letter-spacing: var(--ac-tracking-tight); line-height: 1.05; }
.profile-view__role { margin: 4px 0 0; color: var(--ac-color-t2); font-size: var(--ac-fs-sm); }
.profile-view__bio { margin: 0; font-size: var(--ac-fs-md); color: var(--ac-color-ink); line-height: var(--ac-leading-snug); }
.profile-view__contact {
  display: flex; gap: var(--ac-space-2); flex-wrap: wrap;
}
.profile-view__contact-link {
  text-decoration: none;
  background: var(--ac-color-nested);
  color: var(--ac-color-ink);
  padding: 6px 12px;
  border-radius: var(--ac-radius-pill);
  font-size: var(--ac-fs-sm);
}
.profile-view__contact-link:hover { background: var(--ac-color-warm); }
.profile-view__section { display: flex; flex-direction: column; gap: 8px; padding-top: var(--ac-space-2); border-top: 1px solid var(--ac-color-line-subtle); }
.profile-view__section-title {
  margin: 0;
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-t2);
}
.profile-view__skills { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-view__skill {
  background: var(--ac-color-nested);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-pill);
  padding: 3px 10px;
  font-size: var(--ac-fs-sm);
}
.profile-view__history { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--ac-fs-sm); color: var(--ac-color-ink); }

/* Bands list inside a teammate's profile — each band is a clickable
   tile (avatar + name + role) that drills into the band view. Lays out
   2-up so multi-band teammates fit on a row; collapses to single
   column on narrow viewports. */
.profile-view__bands {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 480px) { .profile-view__bands { grid-template-columns: 1fr; } }
.profile-view__band {
  width: 100%;
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  appearance: none;
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  background: var(--ac-color-paper);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--ac-duration-fast) var(--ac-ease-standard),
              background   var(--ac-duration-fast) var(--ac-ease-standard);
}
.profile-view__band:hover {
  border-color: var(--ac-color-line-strong);
  background: var(--ac-color-warm);
}
.profile-view__band-avatar {
  width: 36px; height: 36px;
  border-radius: var(--ac-radius-md);
  background: linear-gradient(135deg, #f59e42, #ef4444) center/cover no-repeat;
  color: #fff;
  display: grid; place-items: center;
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-xs);
}
.profile-view__band-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.profile-view__band-name {
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-view__band-role {
  font-size: 10px;
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-t3);
}

/* Band-row wraps the tile + the optional remove × so the × can sit
   absolutely-positioned in the row's top-right corner without
   re-flowing the band-tile grid. Reveals on row hover so the × isn't
   visual noise at rest. */
.profile-view__band-row {
  position: relative;
}
.profile-view__band-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(185, 28, 28, 0.35);
  background: #fff;
  color: #b91c1c;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--ac-duration-fast) var(--ac-ease-standard),
              background var(--ac-duration-fast) var(--ac-ease-standard);
  z-index: 2;
  padding: 0;
}
.profile-view__band-row:hover .profile-view__band-remove,
.profile-view__band-remove:focus {
  opacity: 1;
}
.profile-view__band-remove:hover {
  background: #b91c1c;
  color: #fff;
}

/* ─── App footer ─────────────────────────────────────────────────
   Quiet utility row at the bottom of the app frame — copyright on
   the left, legal + support links on the right. Sits inside the
   .app-frame so it scrolls with content rather than sticking to the
   viewport. Public pages (links, signup) get a matching variant. */
.app-footer {
  margin-top: var(--ac-space-8);
  padding: var(--ac-space-5) 0 var(--ac-space-8);
  border-top: 1px solid var(--ac-color-line-subtle);
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t3);
}
.app-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ac-space-3);
}
.app-footer__copy { letter-spacing: var(--ac-tracking-tight); }
.app-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-space-4);
}
.app-footer__links a {
  color: var(--ac-color-t2);
  text-decoration: none;
  transition: color var(--ac-duration-fast) var(--ac-ease-standard);
}
.app-footer__links a:hover { color: var(--ac-color-ink); }
@media (max-width: 640px) {
  .app-footer__inner { justify-content: center; text-align: center; }
  .app-footer__links { gap: var(--ac-space-3); justify-content: center; }
}

/* ─── Band switcher dropdown ─────────────────────────────────────
   Anchored under the topbar account chip. Lists every band the user
   is a member of with their role per band; click a band → POST
   /api/user/switch-band → cache-bust + page reload. Top "View profile"
   row branches on role (artist sees their band, others see editor). */
.band-switcher__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 70;
  min-width: 280px;
  max-width: 360px;
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-lg);
  box-shadow: var(--ac-shadow-lg);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: var(--ac-font-body);
}
.band-switcher__dropdown[hidden] { display: none; }
.band-switcher__loading,
.band-switcher__error,
.band-switcher__empty {
  padding: 14px 12px;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t3);
  text-align: center;
}
.band-switcher__error { color: var(--ac-color-danger); }
.band-switcher__top {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: var(--ac-radius-md);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.band-switcher__top:hover { background: var(--ac-color-nested); }
.band-switcher__top-label {
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-ink);
}
.band-switcher__top-meta {
  font-size: var(--ac-fs-xs);
  color: var(--ac-color-t3);
}
.band-switcher__divider {
  height: 1px;
  background: var(--ac-color-line-subtle);
  margin: 4px 0;
}
.band-switcher__head {
  padding: 6px 12px 4px;
  font-size: 10px;
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t3);
}
.band-switcher__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.band-switcher__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  border-radius: var(--ac-radius-md);
  cursor: pointer;
  text-align: left;
  font-family: var(--ac-font-body);
}
.band-switcher__row:hover { background: var(--ac-color-nested); }
.band-switcher__row--current { background: var(--ac-color-nested); cursor: default; }
.band-switcher__row--current:hover { background: var(--ac-color-nested); }
.band-switcher__name {
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.band-switcher__primary-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ac-color-success);
  display: inline-block;
}
.band-switcher__role {
  font-size: 10px;
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-t3);
}
.band-switcher__current {
  font-size: 10px;
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wider);
  color: var(--ac-color-success);
}
.band-switcher__logout {
  width: 100%;
  appearance: none;
  background: transparent;
  border: none;
  padding: 12px 14px;
  text-align: left;
  font-family: inherit;
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-t2);
  cursor: pointer;
  border-radius: var(--ac-radius-md);
  transition: background var(--ac-duration-fast) var(--ac-ease-standard),
              color      var(--ac-duration-fast) var(--ac-ease-standard);
}
.band-switcher__logout:hover {
  background: rgba(190, 18, 60, 0.08);
  color: var(--ac-color-accent);
}

/* ─── JEDI role switcher ─────────────────────────────────────────
   Topbar dropdown only visible to whitsettband@gmail.com / role=jedi.
   Lets the operator simulate any other role for testing without
   logging out. */
.jedi-switcher { position: relative; display: inline-flex; }
.jedi-switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  height: auto;
  width: auto;
  border-radius: var(--ac-radius-pill);
  background: linear-gradient(135deg, #d4af37, #a37200);
  color: #1a1308;
  border: 1px solid rgba(212, 175, 55, 0.5);
  font-family: var(--ac-font-body);
  font-weight: var(--ac-fw-black);
  font-size: var(--ac-fs-xs);
  letter-spacing: var(--ac-tracking-widest);
}
.jedi-switcher__btn:hover { filter: brightness(1.05); }
.jedi-switcher__caret { font-size: 10px; opacity: 0.7; }
.jedi-switcher__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  min-width: 220px;
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-lg);
  box-shadow: var(--ac-shadow-lg);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.jedi-switcher__dropdown[hidden] { display: none; }
.jedi-switcher__head {
  padding: 6px 10px 8px;
  font-size: var(--ac-fs-xs);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t3);
  border-bottom: 1px solid var(--ac-color-line-subtle);
  margin-bottom: 4px;
}
.jedi-switcher__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: var(--ac-radius-md);
  cursor: pointer;
  font-family: var(--ac-font-body);
  text-align: left;
  color: var(--ac-color-ink);
}
.jedi-switcher__item:hover { background: var(--ac-color-nested); }
.jedi-switcher__item--active {
  background: rgba(212, 175, 55, 0.10);
  color: var(--ac-color-ink);
}
.jedi-switcher__item-label { font-weight: var(--ac-fw-bold); font-size: var(--ac-fs-sm); }
.jedi-switcher__item-meta {
  font-size: 10px;
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-t3);
}

/* While viewing as a non-jedi role, dim the topbar with a thin gold
   underline so the operator never forgets they're in a simulated view. */
body.is-jedi-viewing .topbar { box-shadow: inset 0 -2px 0 0 #d4af37; }

/* ─── Role-based feature gating ────────────────────────────────
   These rules read body[data-perms-*] attributes set by role-perms.js
   and hide / disable surfaces based on effective role. Single source of
   truth — adding a new gate means tagging the element with [data-perm-*]
   and adding a CSS rule here, rather than scattering JS checks. */

/* Schedule — read-only roles can't add, edit, delete shows. */
body[data-perms-schedule="read"] [data-perm-edit-schedule],
body[data-perms-schedule="read"] #scheduleAddBtn,
body[data-perms-schedule="read"] #scheduleAddCaret,
body[data-perms-schedule="read"] [data-show-action="edit"],
body[data-perms-schedule="read"] [data-show-action="delete"],
body[data-perms-schedule="read"] [data-show-action="confirm"],
body[data-perms-schedule="read"] [data-show-action="bit-push"] {
  display: none !important;
}

/* Financials — band_member / crew see only their own per-diem.
   no-financials roles see nothing. The schedule details modal hides
   the financials rows entirely. */
body[data-perms-financials="per_person"] [data-perm-financials-full],
body[data-perms-financials="no_lifetime"] [data-perm-financials-lifetime],
body[data-perms-financials="none"] [data-perm-financials] {
  display: none !important;
}

/* Contacts — read-only roles can see entries but not edit/add/delete. */
body[data-perms-contacts="read"] [data-contact-action="edit"],
body[data-perms-contacts="read"] [data-contact-action="delete"],
body[data-perms-contacts="read"] [data-contact-action="invite"],
body[data-perms-contacts="read"] #contactAddBtn,
body[data-perms-contacts="read"] #friendAddBtn {
  display: none !important;
}

/* Friends-disabled roles: hide Top 8 + Friends column on the contacts
   tab. Inbox is NOT included here anymore — it's the unified
   notifications center (show updates, broadcast bounces, etc.) and
   non-friends roles like tour_manager still need access. The friend-
   request rows inside the inbox are gated separately at render time. */
body[data-perms-friends="no"] .contacts-rail,
body[data-perms-friends="no"] [data-friends-section] {
  display: none !important;
}

/* ─── Inbox / Messages (Phase 2) ────────────────────────────────
   Reuses the .profile-overlay shell. Two views — list of threads
   and a single-conversation view — controlled by messages-wiring.js. */
/* ─── Branded confirm/alert/prompt dialogs (ac-dialog.js) ───────
   Replaces native window.alert/confirm/prompt so we don't ship OS
   chrome. Centered card with the same surface tokens as profile
   modals; backdrop is a translucent veil + slight blur to soften
   whatever's behind. Stacks above the inbox/profile overlays via
   z-index so it works even when they're already open. */
.ac-dialog-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
}
.ac-dialog {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  padding: var(--ac-space-5);
  /* Each stacked dialog gets a slightly higher z so the newest sits
     on top of any earlier one (e.g. confirm-then-alert chain). */
  z-index: 1000;
}
.ac-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 12, 10, 0.55);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.ac-dialog__card {
  position: relative;
  background: var(--ac-color-paper);
  border-radius: var(--ac-radius-2xl);
  padding: var(--ac-space-6);
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-4);
  box-shadow: var(--ac-shadow-lg);
  /* Tiny pop-in to soften the appearance — fast enough to not stall
     destructive flows. */
  animation: acDialogIn 140ms ease-out;
}
@keyframes acDialogIn {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.ac-dialog__title {
  margin: 0;
  font-family: var(--ac-font-body);
  font-weight: var(--ac-fw-black);
  font-size: var(--ac-fs-lg);
  letter-spacing: var(--ac-tracking-tight);
  color: var(--ac-color-ink);
}
.ac-dialog__body {
  margin: 0;
  color: var(--ac-color-t2);
  font-size: var(--ac-fs-md);
  line-height: var(--ac-leading-snug, 1.4);
  white-space: pre-wrap;
}
.ac-dialog__input {
  width: 100%;
  padding: var(--ac-space-3) var(--ac-space-4);
  border: 1px solid var(--ac-color-line, rgba(0,0,0,0.12));
  border-radius: var(--ac-radius-lg);
  font: inherit;
  background: var(--ac-color-surface);
  color: var(--ac-color-ink);
}
.ac-dialog__input:focus {
  outline: none;
  border-color: var(--ac-color-ink);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.ac-dialog__actions {
  display: flex;
  gap: var(--ac-space-2);
  justify-content: flex-end;
  align-items: center;
}
/* Reuse the existing .btn-pill styles. Only the destructive-OK
   variant might not exist yet — define a minimal one keyed off the
   danger token. */
.btn-pill--danger {
  background: var(--ac-color-danger, #B72A2A);
  color: #fff;
  border: 1px solid transparent;
}
.btn-pill--danger:hover { filter: brightness(0.95); }

.inbox-modal { max-width: 600px; }
/* Pin the "Inbox" header to the top of the modal so the title stays
   visible as the thread list scrolls. The modal itself is the scroll
   container (overflow-y on .profile-modal), so position:sticky on the
   header works against that ancestor. We add a tinted background +
   negative-margin trick so the sticky bar visually covers the modal's
   own padding instead of leaving a transparent gap above the title. */
.inbox-modal .profile-modal__head {
  position: sticky;
  top: calc(var(--ac-space-8) * -1);
  margin: calc(var(--ac-space-8) * -1) calc(var(--ac-space-8) * -1) 0;
  padding: var(--ac-space-8) var(--ac-space-8) var(--ac-space-4);
  background: var(--ac-color-paper);
  z-index: 5;
}
.icon-btn--inbox { position: relative; }
.icon-btn__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ac-color-accent);
  color: var(--ac-color-on-accent);
  font-family: var(--ac-font-body);
  font-size: 11px;
  font-weight: var(--ac-fw-bold);
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--ac-color-paper);
  box-sizing: content-box;
}
.icon-btn__badge[hidden] { display: none; }

/* ── Notifications bell + drawer ─────────────────────────────────
   Bell icon mirrors .icon-btn--inbox positioning. Drawer is a
   position:fixed panel anchored to the bell by JS (top/right set
   inline by positionDrawer()).
   ──────────────────────────────────────────────────────────── */
.icon-btn--bell { position: relative; }
.icon-btn--bell svg { display: block; }

.notif-drawer {
  position: fixed;
  width: 360px;
  max-height: 70vh;
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  box-shadow: var(--ac-shadow-2, 0 12px 40px rgba(0,0,0,0.25));
  z-index: 9000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.notif-drawer[hidden] { display: none; }

.notif-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ac-space-3) var(--ac-space-4);
  border-bottom: 1px solid var(--ac-color-line);
  background: var(--ac-color-paper);
}
.notif-drawer__title {
  font-family: var(--ac-font-display, var(--ac-font-body));
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ac-color-ink);
}
.notif-drawer__mark-all {
  background: none;
  border: none;
  color: var(--ac-color-t3);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
.notif-drawer__mark-all:hover { color: var(--ac-color-accent); }

.notif-drawer__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.notif-row {
  padding: var(--ac-space-3) var(--ac-space-4);
  border-bottom: 1px solid var(--ac-color-line);
  cursor: pointer;
  position: relative;
  transition: background-color 120ms ease;
}
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background-color: rgba(255,255,255,0.03); }

.notif-row--unread {
  background-color: rgba(var(--ac-color-accent-rgb, 192, 36, 79), 0.06);
}
.notif-row--unread::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ac-color-accent);
}

.notif-row__kind {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac-color-t3);
  margin-bottom: 4px;
}
.notif-row__title {
  font-weight: var(--ac-fw-semibold);
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-ink);
  margin-bottom: 2px;
}
.notif-row__body {
  font-size: 12px;
  color: var(--ac-color-t2);
  line-height: 1.4;
}
.notif-row__time {
  position: absolute;
  top: var(--ac-space-3);
  right: var(--ac-space-4);
  font-size: 10px;
  color: var(--ac-color-t3);
}
.notif-row--high .notif-row__kind { color: var(--ac-color-accent); }

.notif-empty {
  text-align: center;
  padding: var(--ac-space-6) var(--ac-space-4);
  color: var(--ac-color-t2);
}
.notif-empty p { margin: 0 0 var(--ac-space-2); font-size: var(--ac-fs-sm); }
.notif-empty__sub {
  font-size: 12px;
  color: var(--ac-color-t3);
  line-height: 1.5;
}

.inbox-empty {
  text-align: center;
  padding: var(--ac-space-6);
  color: var(--ac-color-t2);
}
.inbox-empty p { margin: 0 0 var(--ac-space-2); }
.inbox-empty__sub { font-size: var(--ac-fs-sm); color: var(--ac-color-t3); }

/* Inbox tab strip — Band Threads / Messages / Friend Requests /
   Incoming Shows. Sticky at the top of the inbox modal body so the
   scroll happens inside the panel, not the whole modal. */
.inbox-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 4px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--ac-color-line);
  position: sticky;
  top: 0;
  background: var(--ac-color-paper);
  z-index: 1;
}
.inbox-tab {
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: var(--ac-fw-bold);
  letter-spacing: 0.02em;
  color: var(--ac-color-t2);
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.inbox-tab:hover { background: var(--ac-color-warm); }
.inbox-tab.is-active {
  background: var(--ac-color-ink);
  color: var(--ac-color-paper);
}
.inbox-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ac-color-danger, #c91f37);
  color: #fff;
  font-size: 10px;
  font-weight: var(--ac-fw-bold);
}
.inbox-tab.is-active .inbox-tab__count { background: var(--ac-color-paper); color: var(--ac-color-ink); }
.inbox-panel { padding-top: 4px; }

/* Show-thread status pills inside the inbox row name. */
.inbox-list__kind--show    { background: rgba(0,206,200,0.18); color: #097975; }
.inbox-list__kind--pending { background: rgba(245,158,11,0.18); color: #92410d; }
.inbox-list__kind--locked  { background: rgba(0,0,0,0.08);     color: var(--ac-color-t3); }

.inbox-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--ac-space-2);
  max-height: 60vh;
  overflow-y: auto;
}
.inbox-list__row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: var(--ac-space-3);
  padding: var(--ac-space-3) var(--ac-space-4);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-lg);
  background: var(--ac-color-paper);
  cursor: pointer;
  transition: border-color var(--ac-duration-fast) var(--ac-ease-standard);
}
.inbox-list__row:hover { border-color: var(--ac-color-line-strong); }
.inbox-list__row--unread { background: var(--ac-color-nested); }
.inbox-list__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e42, #ef4444) center/cover no-repeat;
  color: #fff;
  display: grid; place-items: center;
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-md);
}
.inbox-list__meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inbox-list__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.inbox-list__name { font-weight: var(--ac-fw-bold); color: var(--ac-color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 6px; }
.inbox-list__kind {
  font-size: 9px;
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t3);
  background: var(--ac-color-nested);
  padding: 1px 6px;
  border-radius: var(--ac-radius-pill);
  white-space: nowrap;
}
.inbox-list__time { font-size: var(--ac-fs-xs); color: var(--ac-color-t3); flex-shrink: 0; }
.inbox-list__preview {
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-list__row--unread .inbox-list__preview { color: var(--ac-color-ink); font-weight: var(--ac-fw-semibold); }
.inbox-list__preview-empty { color: var(--ac-color-t3); font-style: italic; }
.inbox-list__dot {
  background: var(--ac-color-accent);
  color: var(--ac-color-on-accent);
  font-size: 11px;
  font-weight: var(--ac-fw-bold);
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  display: grid; place-items: center;
}

/* Conversation view */
.inbox-thread { display: flex; flex-direction: column; gap: var(--ac-space-3); height: 100%; }
.inbox-thread__head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: var(--ac-space-2);
  border-bottom: 1px solid var(--ac-color-line-subtle);
}
.inbox-thread__back, .inbox-thread__band {
  background: none; border: none;
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-semibold);
  color: var(--ac-color-accent);
  cursor: pointer;
  padding: 0;
}
.inbox-thread__back:hover, .inbox-thread__band:hover { text-decoration: underline; }
.inbox-thread__subtitle {
  margin: 0 0 var(--ac-space-2);
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
  text-align: center;
  letter-spacing: 0.02em;
}

/* Show-thread member roster — avatar-only circles aligned right of
   the Back button. Overlapping stack with a small overlap so a band
   roster of 4-5 reads as a tidy group, not a row of buttons. */
.inbox-thread__roster {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding-left: 8px;
}
.inbox-thread__roster-dot {
  appearance: none;
  background: var(--ac-color-warm);
  border: 2px solid var(--ac-color-paper);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  margin-left: -8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-t2);
  padding: 0;
  transition: transform 0.12s ease;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.inbox-thread__roster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
  z-index: 2;
}
.inbox-thread__roster-initial {
  position: relative;
  z-index: 1;
}
.inbox-thread__roster-dot:first-child { margin-left: 0; }
.inbox-thread__roster-dot:hover {
  transform: translateY(-2px);
  z-index: 5;
}
.inbox-thread__roster-dot--pending {
  opacity: 0.55;
  border-style: dashed;
  border-color: var(--ac-color-t3);
}
.inbox-thread__roster-dot--accepted::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #1f9d55;
  border: 2px solid var(--ac-color-paper);
}
.inbox-thread__head {
  align-items: center;
  flex-wrap: nowrap;
}
.inbox-thread__notice {
  margin: 0 0 var(--ac-space-3);
  padding: 6px 12px;
  font-size: var(--ac-fs-xs);
  color: var(--ac-color-t3);
  text-align: center;
  background: var(--ac-color-nested);
  border-radius: var(--ac-radius-pill);
  align-self: center;
  letter-spacing: var(--ac-tracking-wider);
}

.inbox-thread__messages {
  display: flex; flex-direction: column; gap: var(--ac-space-2);
  max-height: 50vh;
  overflow-y: auto;
  padding: var(--ac-space-2) 0;
}
.inbox-msg { display: flex; flex-direction: column; max-width: 80%; position: relative; }
.inbox-msg--in  { align-self: flex-start; align-items: flex-start; }
.inbox-msg--out { align-self: flex-end;   align-items: flex-end; }

/* Sender attribution — small avatar + name above the first bubble in
   each consecutive run from the same sender. Multi-person threads
   only (show + band-to-band); direct chats skip it. */
.inbox-msg__sender {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--ac-space-2) var(--ac-space-1) 2px;
  font-size: var(--ac-fs-xs);
  color: var(--ac-color-t2);
  letter-spacing: 0.02em;
}
.inbox-msg__sender--in  { align-self: flex-start; }
.inbox-msg__sender--out { align-self: flex-end; flex-direction: row-reverse; }
.inbox-msg__sender-avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ac-color-surface-sunken);
}
.inbox-msg__sender-initial {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--ac-color-surface-sunken);
  color: var(--ac-color-t2);
  font-size: 10px;
  font-weight: var(--ac-fw-bold);
}
.inbox-msg__sender-name { font-weight: var(--ac-fw-medium); }

/* + button on hover/touch to reveal the reaction picker. Hidden by
   default; pops in when the user mouses over the message. On touch
   we toggle visibility with the inbox-msg--picker-open class instead
   of relying on hover. */
.inbox-msg__react-toggle {
  position: absolute;
  top: -8px;
  width: 22px; height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ac-color-line);
  background: var(--ac-color-paper);
  color: var(--ac-color-t2);
  font-size: 14px; line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--ac-duration-fast) var(--ac-ease-standard);
  z-index: 2;
}
.inbox-msg--in  .inbox-msg__react-toggle { right: -10px; }
.inbox-msg--out .inbox-msg__react-toggle { left:  -10px; }
.inbox-msg:hover .inbox-msg__react-toggle,
.inbox-msg--picker-open .inbox-msg__react-toggle { opacity: 1; }

/* The picker bar itself — appears above the bubble on hover or when
   the toggle has been opened on touch. */
.inbox-msg__picker {
  position: absolute;
  top: -38px;
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: 999px;
  box-shadow: 0 8px 20px -8px rgba(50, 20, 15, 0.22);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity var(--ac-duration-fast) var(--ac-ease-standard),
              transform var(--ac-duration-fast) var(--ac-ease-standard);
  z-index: 3;
}
.inbox-msg--in  .inbox-msg__picker { left:  6px; }
.inbox-msg--out .inbox-msg__picker { right: 6px; }
.inbox-msg:hover .inbox-msg__picker,
.inbox-msg--picker-open .inbox-msg__picker {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.inbox-msg__picker-btn {
  width: 32px; height: 32px;
  border: none; background: transparent;
  border-radius: 50%;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  transition: background var(--ac-duration-fast) var(--ac-ease-standard),
              transform var(--ac-duration-fast) var(--ac-ease-standard);
}
.inbox-msg__picker-btn:hover { background: var(--ac-color-warm); transform: scale(1.15); }
.inbox-msg__picker-btn.is-active { background: var(--ac-color-accent-chip); }

/* Collapsed reaction chips beneath the bubble — show emoji + count
   when 2+ users reacted with the same emoji. The viewer's own
   reaction gets a colored ring. */
.inbox-msg__reactions {
  display: flex; gap: 4px;
  margin-top: 4px;
  padding: 0 4px;
  flex-wrap: wrap;
}
.inbox-msg--out .inbox-msg__reactions { justify-content: flex-end; }
.inbox-msg__rx {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px;
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: background var(--ac-duration-fast) var(--ac-ease-standard),
              border-color var(--ac-duration-fast) var(--ac-ease-standard);
}
.inbox-msg__rx:hover { background: var(--ac-color-warm); }
.inbox-msg__rx--mine {
  background: var(--ac-color-accent-chip);
  border-color: var(--ac-color-accent);
}
.inbox-msg__rx-emoji { line-height: 1; font-size: 14px; }
.inbox-msg__rx-count { color: var(--ac-color-t2); font-weight: var(--ac-fw-bold); font-size: 11px; }
.inbox-msg__bubble {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: var(--ac-fs-md);
  line-height: var(--ac-leading-snug);
  word-break: break-word;
}
.inbox-msg--in  .inbox-msg__bubble {
  background: var(--ac-color-nested);
  color: var(--ac-color-ink);
  border-bottom-left-radius: 4px;
}
.inbox-msg--out .inbox-msg__bubble {
  background: var(--ac-color-ink);
  color: var(--ac-color-on-accent);
  border-bottom-right-radius: 4px;
}
.inbox-msg__meta {
  font-size: var(--ac-fs-xs);
  color: var(--ac-color-t3);
  margin-top: 2px;
  padding: 0 4px;
}
/* iMessage-style receipt — only on the most recent outgoing message.
   "Delivered" stays muted, "Read" picks up the accent color so the
   change is visually obvious when polling updates the state. */
.inbox-msg__receipt {
  align-self: flex-end;
  font-size: 10px;
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t3);
  padding: 2px 6px 0;
}
.inbox-msg__receipt--read { color: var(--ac-color-accent); }

.inbox-thread__composer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--ac-space-2);
  padding-top: var(--ac-space-2);
  border-top: 1px solid var(--ac-color-line-subtle);
  align-items: end;
}
/* Composer right-side stack: Send Offer button above Send button so
   the dark Send remains the primary action visually. */
.inbox-thread__composer-actions {
  display: flex; flex-direction: column; gap: 6px; align-items: stretch;
}
.inbox-thread__offer-btn { white-space: nowrap; }

/* ── Offer card (renders inline with messages in the chat) ────── */
.offer-card {
  align-self: stretch;
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-lg);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 90%;
}
.offer-card--in  { align-self: flex-start; border-left: 3px solid var(--ac-color-accent); }
.offer-card--out { align-self: flex-end;   border-right: 3px solid var(--ac-color-ink); }
.offer-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.offer-card__eyebrow {
  font-size: 11px;
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t2);
}
.offer-card__status {
  font-size: 10px;
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-widest);
  padding: 3px 9px;
  border-radius: var(--ac-radius-pill);
  text-transform: uppercase;
}
.offer-card__status--pending   { background: rgba(251, 191, 36, 0.18); color: #a16207; }
.offer-card__status--accepted  { background: rgba(34, 197, 94, 0.18);  color: #15803d; }
.offer-card__status--declined  { background: rgba(239, 68, 68, 0.16);  color: #b91c1c; }
.offer-card__status--cancelled { background: var(--ac-color-nested); color: var(--ac-color-t3); }
.offer-card__date {
  margin: 0;
  font-size: var(--ac-fs-lg);
  font-weight: var(--ac-fw-black);
  letter-spacing: var(--ac-tracking-tighter);
  color: var(--ac-color-ink);
}
.offer-card__venue {
  margin: 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
}
.offer-card__terms {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 4px 0;
  padding: 0;
}
.offer-card__terms > div { display: flex; flex-direction: column; gap: 2px; }
.offer-card__terms dt {
  font-size: 10px;
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t3);
  margin: 0;
}
.offer-card__terms dd {
  margin: 0;
  font-size: var(--ac-fs-md);
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-ink);
}
.offer-card__notes {
  margin: 4px 0 0;
  padding: 8px 10px;
  background: var(--ac-color-nested);
  border-radius: var(--ac-radius-md);
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-ink);
  line-height: 1.5;
  white-space: pre-wrap;
}
.offer-card__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.offer-card__decline-btn { color: var(--ac-color-danger); border-color: var(--ac-color-danger); }
.offer-card__time {
  margin: 4px 0 0;
  font-size: var(--ac-fs-xs);
  color: var(--ac-color-t3);
  align-self: flex-end;
}

/* ── Opportunities card rows (incoming offers in the dashboard) ── */
.opportunity--offer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  cursor: pointer;
  transition: border-color var(--ac-duration-fast) var(--ac-ease-standard);
}
.opportunity--offer:hover { border-color: var(--ac-color-line-strong); }
.opportunity__lead { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opportunity__pill {
  font-size: var(--ac-fs-xs);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wider);
  color: var(--ac-color-accent);
  white-space: nowrap;
}
.inbox-thread__textarea {
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-lg);
  padding: 10px 14px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-md);
  background: var(--ac-color-paper);
  resize: vertical;
  min-height: 44px;
}
.inbox-thread__textarea:focus {
  outline: none;
  border-color: var(--ac-color-ring);
  box-shadow: 0 0 0 3px var(--ac-color-accent-chip);
}

/* Band view (friend-network drill-down) — MySpace-style sectioned
   profile for another band. Opens from friend rows, top8 tiles, or
   anywhere a band-slug exists. Reuses the profile-overlay shell.
   profile-modal--band tightens the modal width specifically for this
   layout (the wider editor stays wider). */
.profile-modal--band {
  /* Wider + shorter than the default profile editor — the band view has
     more horizontal content (header photo + name + Message button on
     one row) and the Members list scrolls internally so the modal
     itself stays a friendly viewport height. */
  max-width: 720px;
  max-height: 82vh;
  padding: var(--ac-space-5) var(--ac-space-6);
  gap: var(--ac-space-3);
}
.band-view { display: flex; flex-direction: column; gap: var(--ac-space-4); }
.band-view__head {
  display: grid;
  grid-template-columns: 184px 1fr auto;
  gap: var(--ac-space-5);
  /* Top-align so the bio that now lives under the genres can grow
     downward without vertically off-centering the photo + name. */
  align-items: start;
  padding-bottom: var(--ac-space-3);
  border-bottom: 1px solid var(--ac-color-line-subtle);
}
.band-view__msg-btn { white-space: nowrap; }
.band-view__photo {
  /* Bumped 15% from 160 → 184 so the header has more presence and the
     paired text column has room for the bio inline.
     A thin vertical divider on the right separates the photo from the
     name + meta column it sits next to. Padding keeps the line from
     hugging the photo. */
  width: 184px; height: 184px;
  border-radius: var(--ac-radius-xl);
  background: linear-gradient(135deg, #f59e42, #ef4444) center/cover no-repeat;
  color: #fff;
  display: grid; place-items: center;
  font-weight: var(--ac-fw-black);
  font-size: var(--ac-fs-3xl);
  flex-shrink: 0;
  position: relative;
}
.band-view__photo::after {
  content: "";
  position: absolute;
  top: 8px; bottom: 8px;
  right: calc(var(--ac-space-5) * -0.5);
  width: 1px;
  background: var(--ac-color-line);
}
/* Hide the modal "Band" title on the band variant — the name is in
   the header next to the photo, and a redundant label up top reads
   awkward. We keep the <h2> in the DOM (it's the dialog's
   aria-labelledby target) and just clip it from the visual layout. */
.profile-modal--band .profile-modal__title {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.band-view__name { margin: 0; font-size: var(--ac-fs-2xl); font-weight: var(--ac-fw-black); letter-spacing: var(--ac-tracking-tight); line-height: 1.05; }
/* Plain-text meta lines under the band name — location, then genres
   comma-joined. No pills. Reads like a clean profile header. */
.band-view__location-line {
  margin: 6px 0 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
}
.band-view__genre-line {
  margin: 2px 0 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t3);
}

.band-view__section { display: flex; flex-direction: column; gap: var(--ac-space-2); }
.band-view__section-title {
  margin: 0;
  font-size: var(--ac-fs-xs);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t2);
}
.band-view__bio {
  /* Inline under the genres in the header. Margin-top gives breathing
     room from the genre line; line-height + max-width keep it
     readable without forcing wide single lines. */
  margin: 10px 0 0;
  font-size: var(--ac-fs-sm);
  line-height: 1.5;
  color: var(--ac-color-ink);
  max-width: 56ch;
}
.band-view__empty {
  margin: 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t3);
  font-style: italic;
}

.band-view__roster {
  list-style: none;
  padding: 2px;        /* breathing room so focus rings on member buttons aren't clipped */
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Sized to roughly match the friends 3×2 grid next to it (~220px =
     6 friend tiles + gaps). Roster scrolls internally past that
     height so a long band roster doesn't tower over the friends
     panel. */
  max-height: 220px;
  /* Always-visible scrollbar — `scroll` (not `auto`) keeps the gutter
     reserved so the column lines up with the friends grid even when
     the roster is short. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
  /* See .contact-list — no `scrollbar-width: thin` so Chrome renders
     the persistent webkit-styled scrollbar instead of its own
     auto-hiding overlay variant. */
  scrollbar-color: rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.04);
}
.band-view__roster::-webkit-scrollbar { width: 6px; }
.band-view__roster::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
}
.band-view__roster::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
}
.band-view__roster:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.3); }
.band-view__member-row { list-style: none; }
.band-view__member {
  width: 100%;
  appearance: none;
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  align-items: center;
  gap: var(--ac-space-3);
  padding: 8px 12px;
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  background: var(--ac-color-paper);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  font-size: var(--ac-fs-sm);
  transition: border-color var(--ac-duration-fast) var(--ac-ease-standard),
              background   var(--ac-duration-fast) var(--ac-ease-standard);
}
.band-view__member:hover {
  border-color: var(--ac-color-line-strong);
  background: var(--ac-color-warm);
}
.band-view__member:active { transform: scale(0.998); }
.band-view__member-chev {
  font-size: var(--ac-fs-md);
  color: var(--ac-color-t3);
  margin-left: 4px;
}
.band-view__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e42, #ef4444) center/cover no-repeat;
  color: #fff;
  display: grid; place-items: center;
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-xs);
}
.band-view__member-name { font-weight: var(--ac-fw-bold); color: var(--ac-color-ink); }
.band-view__member-role {
  font-size: 10px;
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-t3);
}

/* Friends grid — borderless tiles, just photo + name stacked.
   MySpace-style "8 of my 47 best friends" vibe. Wraps so 3-4 fit per
   row at this modal width. */
.band-view__friends {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--ac-space-3);
}
/* Locked 3-column variant for the band view's side-by-side panel —
   keeps the friends column compact next to the members list. Tiles
   beyond the preview window stay in the DOM but hide until the user
   taps "View all". */
.band-view__friends--grid {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ac-space-3) 8px;
}
.band-view__friends--grid .band-view__friend--beyond { display: none; }
.band-view__friends--grid.band-view__friends--all .band-view__friend--beyond { display: flex; }
.band-view__friends-toggle {
  width: 100%;
  margin-top: 10px;
  padding: 9px 12px;
  appearance: none;
  border: 1px solid var(--ac-color-line);
  background: var(--ac-color-paper);
  border-radius: var(--ac-radius-pill);
  font-family: inherit;
  font-size: var(--ac-fs-xs);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-t2);
  cursor: pointer;
  transition: border-color var(--ac-duration-fast) var(--ac-ease-standard),
              color var(--ac-duration-fast) var(--ac-ease-standard);
}
.band-view__friends-toggle:hover {
  border-color: var(--ac-color-line-strong);
  color: var(--ac-color-ink);
}
/* Members + Friends sit in a 2-up block. The members column gets a
   bit more room because the role tag eats horizontal space. */
.band-view__pair {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--ac-space-5);
  align-items: start;
}
.band-view__pair > .band-view__section { min-width: 0; }
@media (max-width: 640px) {
  .band-view__pair { grid-template-columns: 1fr; gap: var(--ac-space-4); }
  .band-view__friends--grid { grid-template-columns: repeat(4, 1fr); }
}
.band-view__friend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
/* Passive — viewer isn't friends with this band, so the tile is
   informational only. No hover affordance, no pointer cursor. */
.band-view__friend--passive { cursor: default; }
.band-view__friend--passive .band-view__friend-avatar { opacity: 0.7; }
.band-view__friend--passive:hover .band-view__friend-avatar { transform: none; }
.band-view__friend-avatar {
  width: 64px; height: 64px;
  border-radius: var(--ac-radius-md);
  background: linear-gradient(135deg, #f59e42, #ef4444) center/cover no-repeat;
  color: #fff;
  display: grid; place-items: center;
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-sm);
  transition: transform var(--ac-duration-fast) var(--ac-ease-standard), opacity var(--ac-duration-fast) var(--ac-ease-standard);
}
.band-view__friend:hover .band-view__friend-avatar { transform: scale(1.04); }
.band-view__friend-name {
  font-size: var(--ac-fs-xs);
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-ink);
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 100%;
}

/* Upcoming shows rows — date + venue, single line, no tickets pill.
   Read-only surface; user opens their own schedule for actions. */
.band-view__shows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.band-view__show {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: var(--ac-space-3);
  padding: 10px 12px;
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  background: var(--ac-color-paper);
  font-size: var(--ac-fs-sm);
}
.band-view__show-date {
  font-family: var(--ac-font-body);
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t2);
  letter-spacing: var(--ac-tracking-tight);
  white-space: nowrap;
}
.band-view__show-venue { margin: 0; font-weight: var(--ac-fw-bold); color: var(--ac-color-ink); display: flex; align-items: center; gap: 8px; min-width: 0; }
.band-view__show-tag {
  font-size: 9px;
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-widest);
  padding: 2px 6px;
  border-radius: var(--ac-radius-pill);
  background: rgba(245, 158, 11, 0.20);
  color: #b45309;
  flex-shrink: 0;
}

/* Friend chips on Show details — three states:
   · open      = not yet invited → yellow with a + button
   · pending   = invited, waiting → yellow with "Invited" badge
   · accepted  = friend accepted  → green
   Same overall shape as the member-chip pill so the rows feel related. */
.friend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--ac-radius-pill);
  font-size: var(--ac-fs-sm);
  margin: 2px 4px 2px 0;
  font-weight: var(--ac-fw-semibold);
}
.friend-chip__dot { width: 8px; height: 8px; border-radius: 50%; }
.friend-chip__badge {
  font-size: var(--ac-fs-xs);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: var(--ac-radius-pill);
  margin-left: 4px;
}
.friend-chip__add {
  background: rgba(0, 0, 0, 0.08);
  border: none;
  color: inherit;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  margin-left: 4px;
  padding: 0;
  font-weight: var(--ac-fw-bold);
}
.friend-chip__add:hover  { background: rgba(0, 0, 0, 0.16); }
.friend-chip__add:active { transform: scale(0.92); }

.friend-chip--open {
  background: rgba(234, 179, 8, 0.16);
  color: #92400e;
  border: 1px solid rgba(234, 179, 8, 0.35);
}
.friend-chip--pending {
  background: rgba(234, 179, 8, 0.12);
  color: #92400e;
  border: 1px solid rgba(234, 179, 8, 0.30);
}
.friend-chip--pending .friend-chip__dot   { background: #eab308; }
.friend-chip--pending .friend-chip__badge { background: rgba(234, 179, 8, 0.25); color: #78350f; }
.friend-chip--accepted {
  background: rgba(22, 163, 74, 0.14);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.30);
}
.friend-chip--accepted .friend-chip__dot { background: var(--ac-color-success); }

/* Invite-friend picker — sits inside the schedule modal body and lists
   the user's accepted band friends with an Invite button per row. */
.invite-picker { display: flex; flex-direction: column; gap: var(--ac-space-3); }
.invite-picker__sub { margin: 0; color: var(--ac-color-t2); font-size: var(--ac-fs-sm); }
.invite-picker__list { list-style: none; margin: 0; padding: 4px; display: flex; flex-direction: column; gap: var(--ac-space-2); max-height: 360px; overflow-y: auto; }
.invite-picker__row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-lg);
  background: var(--ac-color-paper);
}
.invite-picker__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #f59e42, #ef4444);
  color: #fff;
  font-family: var(--ac-font-body);
  font-weight: var(--ac-fw-bold);
  font-size: var(--ac-fs-sm);
  letter-spacing: 0.04em;
}
.invite-picker__name { font-weight: var(--ac-fw-bold); color: var(--ac-color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invite-picker__actions { display: flex; justify-content: flex-end; gap: var(--ac-space-2); padding-top: var(--ac-space-2); border-top: 1px solid var(--ac-color-line-subtle); }

/* Member chips */
.member-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--ac-color-nested); border-radius: var(--ac-radius-pill); font-size: var(--ac-fs-sm); margin: 2px 4px 2px 0; }
.member-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ac-color-t3); }
.member-chip__dot--yes     { background: var(--ac-color-success); }
.member-chip__dot--no      { background: var(--ac-color-danger);  }
.member-chip__dot--pending { background: var(--ac-color-warning); }

/* ─── MOBILE ────────────────────────────────────── */
@media (max-width: 1024px) {
  .platform-card__kpis { grid-template-columns: repeat(2, 1fr); }
  .platform-card__detail { grid-template-columns: 1fr; }
  .socials-grid { grid-template-columns: repeat(3, 1fr); }
  .contacts-grid { grid-template-columns: 1fr; }
  .schedule-stats { grid-template-columns: repeat(2, 1fr); }
  .schedule-bottom-grid { grid-template-columns: 1fr; }
  .releases-bottom-grid { grid-template-columns: 1fr; }
  .release-hero { min-height: 280px; }
  .release-hero__title { font-size: var(--ac-fs-4xl); }
  .show-row { grid-template-columns: 80px 1fr; gap: var(--ac-space-3); }
  .show-row__tickets, .show-row__price, .show-row__view { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .dash-hero { grid-template-columns: 1fr; }
  .dash-streaming__grid { grid-template-columns: 1fr; }
  .socials-grid { grid-template-columns: repeat(2, 1fr); }
  .spotlight { padding: var(--ac-space-5); min-height: 0; }
  .spotlight__title { font-size: var(--ac-fs-3xl); }
  .spotlight__stats { grid-template-columns: 1fr 1fr 1fr; gap: var(--ac-space-3); }
  .stat-block--inverse .stat-block__value { font-size: var(--ac-fs-3xl); }
  .top-posts { grid-template-columns: repeat(3, 1fr); }
  .top-posts > .top-post:nth-child(n+4) { display: none; }
}


/* Top songs — album-art thumbnails replace numeric rank.
   Each thumb is a 28×28 placeholder (gradient fallback when no
   real artwork URL is set on the element). */
.top-song__art {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  flex-shrink: 0;
  background: linear-gradient(135deg,
    var(--ac-color-ink) 0%,
    var(--ac-color-accent) 100%);
  background-size: cover;
  background-position: center;
}
.top-song__art[data-rank="2"] { background: linear-gradient(135deg, #6b1a2b, #2a0d14); }
.top-song__art[data-rank="3"] { background: linear-gradient(135deg, var(--ac-color-p-instagram), var(--ac-color-accent)); }
.top-song__art[data-rank="4"] { background: linear-gradient(135deg, var(--ac-color-warning), #7a4f10); }
.top-song__art[data-rank="5"] { background: linear-gradient(135deg, var(--ac-color-success), #1f5e2e); }
.top-song__rank { display: none; }

/* ── Guest list (desktop event modal) ───────────────────────────
   Same data + visual language as /m/guest-list.html but rendered
   inline inside the event modal. Pearl surfaces, crimson accent,
   filter pills, guest rows, +/- stepper for the +1 count. */
.gl-desk { color: var(--ac-color-ink); }
.gl-desk-loading,
.gl-desk-error {
  text-align: center;
  padding: 36px 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ac-color-t3);
}
.gl-desk-error { color: var(--ac-color-danger); }

.gl-desk-progress {
  background: var(--ac-color-paper, #fff);
  border: 1px solid var(--ac-color-accent-chip, rgba(139,26,43,0.20));
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.gl-desk-progress__top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.gl-desk-progress__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ac-color-accent);
}
.gl-desk-progress__last {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ac-color-t3);
}
.gl-desk-progress__count {
  font-family: 'Archivo Black', sans-serif;
  font-size: 32px; line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ac-color-ink);
}
.gl-desk-progress__of {
  color: var(--ac-color-t3);
  font-size: 24px;
}
.gl-desk-progress__sub {
  margin-top: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ac-color-t2);
}

.gl-desk-pills {
  display: flex; gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.gl-desk-pill {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--ac-color-line);
  background: var(--ac-color-paper, #fff);
  color: var(--ac-color-t2);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
  white-space: nowrap;
}
.gl-desk-pill:hover { background: var(--ac-color-glow); }
.gl-desk-pill.is-active {
  background: var(--ac-color-accent);
  color: #fff;
  border-color: var(--ac-color-accent);
}

.gl-desk-rows {
  background: var(--ac-color-paper, #fff);
  border: 1px solid var(--ac-color-line);
  border-radius: 14px;
  overflow: hidden;
}
.gl-desk-row {
  display: grid;
  grid-template-columns: 1fr auto 32px;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ac-color-line);
}
.gl-desk-row:last-child { border-bottom: none; }
.gl-desk-row__name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--ac-color-ink);
}
.gl-desk-row__sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--ac-color-t3);
  margin-top: 3px;
}
.gl-desk-row__count {
  font-family: 'Archivo Black', sans-serif;
  font-size: 18px;
  color: var(--ac-color-t3);
}
.gl-desk-row__count.is-scanned { color: var(--ac-color-success); }
.gl-desk-row__tot {
  font-size: 11px;
  color: var(--ac-color-t3);
  margin-left: 2px;
}
.gl-desk-row__del {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(139,26,43,0.08);
  border: 1px solid rgba(139,26,43,0.20);
  color: var(--ac-color-accent);
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.gl-desk-row__del:hover {
  background: var(--ac-color-accent);
  color: #fff;
}

.gl-desk-empty {
  text-align: center;
  padding: 36px 16px;
  background: var(--ac-color-paper, #fff);
  border: 1px solid var(--ac-color-line);
  border-radius: 14px;
}
.gl-desk-empty__title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px;
  margin-bottom: 4px;
  color: var(--ac-color-ink);
}
.gl-desk-empty__sub {
  font-size: 12px;
  color: var(--ac-color-t2);
}

.gl-desk-actions {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

/* Add-guest panel (inline below the rows) */
.gl-desk-add {
  margin-top: 16px;
  background: var(--ac-color-paper, #fff);
  border: 1px solid var(--ac-color-line);
  border-radius: 14px;
  padding: 16px;
}
.gl-desk-add__title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin-bottom: 12px;
}
.gl-desk-add__row {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.gl-desk-add__row input[type="text"],
.gl-desk-add__row select {
  padding: 9px 12px;
  background: var(--ac-color-glow);
  border: 1px solid var(--ac-color-line);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ac-color-ink);
  outline: none;
}
.gl-desk-add__row input[type="text"] { flex: 1; min-width: 160px; }
.gl-desk-add__row select { min-width: 140px; }
.gl-desk-add__row input[type="text"]:focus,
.gl-desk-add__row select:focus {
  border-color: var(--ac-color-accent);
  background: #fff;
}
.gl-desk-stepper {
  display: flex; align-items: center;
  background: var(--ac-color-glow);
  border: 1px solid var(--ac-color-line);
  border-radius: 10px;
  padding: 2px;
}
.gl-desk-stepper button {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: transparent; border: none;
  font-size: 16px; font-weight: 700;
  color: var(--ac-color-ink);
  cursor: pointer;
}
.gl-desk-stepper button:disabled { color: var(--ac-color-disabled); cursor: not-allowed; }
.gl-desk-stepper span {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  padding: 0 10px;
  color: var(--ac-color-ink);
}

/* ─────────────────────────────────────────────────────────────
   PRODUCTION ASSETS STACK
   Shown only when body[data-effective-role] is foh_engineer /
   monitor_engineer / tech.

   Layout (desktop):
     ┌──────────────┬──────────────┐
     │  intro spans both cols       │
     ├──────────────┼──────────────┤
     │  Lighting    │              │
     ├──────────────┤              │
     │  FOH         │              │
     ├──────────────┤   Input List │  (right column spans all
     │  IEM         │              │   five file rows on the left
     ├──────────────┤              │   so the grid stays balanced
     │  Amp backups │              │   regardless of file counts)
     ├──────────────┤              │
     │  Tracks      │              │
     ├──────────────┴──────────────┤
     │  Tech notes (spans both)    │
     └─────────────────────────────┘

   The DOM order is: intro, lighting, foh, iem, amp, tracks,
   inputs, notes. CSS named grid-areas place them. Below ~900px
   the grid collapses to a single column.
   ───────────────────────────────────────────────────────────── */
.production-assets-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "intro       intro"
    "venuelink   venuelink"
    "lighting    inputs"
    "foh         inputs"
    "iem         inputs"
    "amp         inputs"
    "tracks      inputs"
    "stageplot   stageplot"
    "notes       notes"
    "hospitality hospitality";
  gap: var(--ac-space-3);
  align-items: stretch;
}
.production-assets-stack .production-assets__intro         { grid-area: intro; }
.production-assets-stack [data-prod-section="venuelink"]   { grid-area: venuelink; }
.production-assets-stack [data-prod-section="lighting"]    { grid-area: lighting; }
.production-assets-stack [data-prod-section="foh"]         { grid-area: foh; }
.production-assets-stack [data-prod-section="iem"]         { grid-area: iem; }
.production-assets-stack [data-prod-section="amp"]         { grid-area: amp; }
.production-assets-stack [data-prod-section="tracks"]      { grid-area: tracks; }
.production-assets-stack [data-prod-section="stageplot"]   { grid-area: stageplot; }
.production-assets-stack [data-prod-section="inputs"]      { grid-area: inputs; }
.production-assets-stack [data-prod-section="notes"]       { grid-area: notes; }
.production-assets-stack [data-prod-section="hospitality"] { grid-area: hospitality; }

@media (max-width: 900px) {
  .production-assets-stack {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "venuelink"
      "lighting"
      "foh"
      "iem"
      "amp"
      "tracks"
      "stageplot"
      "inputs"
      "notes"
      "hospitality";
  }
}

.production-assets__intro {
  padding: 0 0 4px;
}
/* When the stack lives INSIDE the Venue collapsible folder
   (non-production roles), drop the intro card — the folder's
   own summary already labels the section. Keep the body grid. */
.production-assets-stack--in-venue .production-assets__intro {
  display: none;
}
/* Reduce padding when nested — Venue body already has its own
   container padding. */
.production-assets-stack--in-venue {
  padding-top: 0;
}
.production-assets__title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
  color: var(--ac-color-ink);
}
.production-assets__sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ac-color-t2);
  margin: 0;
  max-width: 64ch;
}

/* Each production card mirrors the existing .assets-card chrome
   (white surface, soft shadow, rounded corners). Only the body
   contents differ. The compact layout shrinks header padding so
   five file cards stack against one input-list column without
   the page running absurdly tall. */
.prod-card {
  padding: var(--ac-space-3) var(--ac-space-4);
  gap: var(--ac-space-2);
}
.prod-card .assets-card__head {
  margin-bottom: 4px;
}
.prod-card .assets-card__title {
  font-size: 14px;
  margin-bottom: 2px;
}
.prod-card .assets-card__sub {
  font-size: 12px;
  line-height: 1.4;
}
/* Input-list card spans the full height of the left column's
   five file cards via grid-area="inputs". Flex layout inside
   places the list between the header (top) and the add-row
   (pinned at the bottom). The list itself is the scrollable
   region with a max-height ceiling so the right column doesn't
   push the grid taller than the rest of the page.

   Why a cap is here: without one, the card grows to fit all
   content and the grid stretches to match — wiping out the
   internal scroll the engineer counts on when they have 30+
   inputs. With a generous cap (80vh ≈ ~800px on a typical
   screen, much bigger than the old 540px) the list both fills
   the previously-empty space AND scrolls when needed. */
.prod-card--inputs {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* List takes its natural height (capped + scrollable on overflow) so
   the Add row sits directly under the last input instead of being
   pushed to the bottom of the column. Per Ryan 2026-06-02. */
.prod-card--inputs .prod-input-list {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 80vh;
  overflow-y: auto;
  padding-right: 4px;
}
.prod-card--inputs .prod-input-add {
  flex: 0 0 auto;
}
/* Card itself stops stretching to fill the grid row so the empty
   space the user complained about disappears. */
.prod-card--inputs { align-self: start; }

/* Uploaded file list — one row per upload. Each row shows the
   filename + the label (console / pedal / session name), with a
   download link and a destructive delete pill. */
.prod-file-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prod-file-list__empty {
  font-size: 12px;
  color: var(--ac-color-t3);
  padding: 10px 12px;
  background: var(--ac-color-glow);
  border: 1px dashed var(--ac-color-line);
  border-radius: 10px;
  text-align: center;
}
/* Drag-drop / click-to-browse zone — replaces the bare empty
   text when a section has no files yet. Whole zone is clickable
   (wired in production-assets-wiring.js#attachDropZone) and the
   parent list is the drop target. */
.prod-file-list__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 12px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.prod-file-list__dropzone:hover {
  background: var(--ac-color-bg);
  border-color: var(--ac-color-t3);
  color: var(--ac-color-t2);
}
.prod-file-list__dropicon {
  width: 22px; height: 22px;
  color: var(--ac-color-t3);
}
.prod-file-list__droptitle {
  font-size: 12px;
  font-weight: 600;
  color: var(--ac-color-t2);
}
.prod-file-list__drophint {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: 700;
}
/* ─── Section visibility toggle (CD venue-handoff, 2026-06-03) ───
   Compact inline "Show on public venue link" checkbox + label that
   sits in the assets-card__head right rail. Used on the Digital amp
   backups + Master tracks sections so bands can hide the whole block
   from the public /venue page. */
.prod-visibility {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ac-color-t2);
  margin-top: 8px;
  cursor: pointer;
  user-select: none;
}
.prod-visibility input[type="checkbox"] {
  margin: 0; width: 14px; height: 14px;
  accent-color: var(--ac-color-accent);
  cursor: pointer;
}
.prod-visibility:hover { color: var(--ac-color-ink); }

/* ─── Hospitality / Rider rows (CD venue-handoff, 2026-06-03) ───
   Label/value row pattern: two text inputs side-by-side + a small
   × remove button. The "+ Add item" row below has the same shape
   but with placeholders and the add button instead of remove. */
.prod-hosp__sublabel {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ac-color-t3);
  margin: 4px 0 8px;
}
.prod-hosp__rows {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 10px;
}
.prod-hosp__row {
  display: grid;
  grid-template-columns: 200px minmax(0,1fr) 28px;
  gap: 8px; align-items: center;
}
.prod-hosp__row-k,
.prod-hosp__row-v,
.prod-hosp__add-k,
.prod-hosp__add-v {
  width: 100%; box-sizing: border-box;
  padding: 8px 11px;
  font-family: inherit; font-size: 13px;
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: 8px;
  color: var(--ac-color-ink);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.prod-hosp__row-k:focus,
.prod-hosp__row-v:focus,
.prod-hosp__add-k:focus,
.prod-hosp__add-v:focus {
  border-color: var(--ac-color-accent);
  box-shadow: 0 0 0 3px var(--ac-color-accent-wash);
}
.prod-hosp__row-k {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--ac-color-t2);
  background: var(--ac-color-bg);
}
/* Time-warn — soft warning when the value looks like a clock time.
   Doesn't block save; just colors the input + shows a one-liner
   under the row. */
.prod-hosp__row-v.is-time-warn {
  border-color: var(--ac-color-warning, #f9a825);
  box-shadow: 0 0 0 3px rgba(249,168,37,0.10);
}
.prod-hosp__row-warn {
  grid-column: 2 / 3;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.02em;
  color: var(--ac-color-warning-ink, #a86b00);
  margin-top: 2px;
}
.prod-hosp__row-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;
  flex: 0 0 auto;
}
.prod-hosp__row-rm:hover {
  border-color: var(--ac-color-accent-chip);
  color: var(--ac-color-accent);
  background: var(--ac-color-accent-wash);
}
.prod-hosp__add {
  display: grid;
  grid-template-columns: 200px minmax(0,1fr) auto;
  gap: 8px; align-items: center;
}
.prod-hosp__empty {
  font-size: 12px; color: var(--ac-color-t3);
  padding: 10px 12px;
  background: var(--ac-color-glow);
  border: 1px dashed var(--ac-color-line);
  border-radius: 8px;
  text-align: center;
  margin-bottom: 10px;
}

/* Drag-over state — bumps the dashed border to accent + tints
   the background so it's obvious the drop will register. The
   class is toggled by attachDropZone's dragover/dragleave/drop
   handlers. */
.prod-file-list.is-dragover .prod-file-list__dropzone,
.prod-file-list.is-dragover {
  background: rgba(139, 26, 43, 0.04);
  border-color: var(--ac-color-accent);
}
.prod-file-list.is-dragover .prod-file-list__droptitle {
  color: var(--ac-color-accent);
}
.prod-file-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--ac-color-bg);
  border: 1px solid var(--ac-color-line);
  border-radius: 12px;
}
.prod-file-row__meta {
  min-width: 0;
}
.prod-file-row__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ac-color-ink);
  margin: 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prod-file-row__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: 700;
}
.prod-file-row__action {
  font-size: 12px;
  padding: 6px 10px;
}

/* Add-row sits below the file list. Single label + a pill that
   triggers the hidden <input type=file>. The "double" variant
   (amp backups) splits label into two side-by-side text inputs. */
.prod-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.prod-add--double {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}
.prod-add__label {
  padding: 10px 12px;
  background: var(--ac-color-glow);
  border: 1px solid var(--ac-color-line);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ac-color-ink);
  outline: none;
}
.prod-add__label::placeholder {
  color: var(--ac-color-t3);
}
.prod-add__label:focus {
  border-color: var(--ac-color-accent);
}
.prod-add__file-btn {
  cursor: pointer;
}

/* Input list — channel + instrument + mic + travel toggle */
.prod-input-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prod-input-list__empty {
  font-size: 13px;
  color: var(--ac-color-t3);
  padding: 16px;
  background: var(--ac-color-glow);
  border: 1px dashed var(--ac-color-line);
  border-radius: 12px;
  text-align: center;
}
.prod-input-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1.2fr) minmax(0, 1.5fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: var(--ac-color-bg);
  border: 1px solid var(--ac-color-line);
  border-radius: 10px;
}
.prod-input-row__ch {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 700;
  text-align: center;
  color: var(--ac-color-ink);
}
.prod-input-row__inst,
.prod-input-row__mic {
  font-size: 14px;
  color: var(--ac-color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prod-input-row__inst { font-weight: 600; }
.prod-input-row__mic  { color: var(--ac-color-t2); }

/* Travel toggle — two-state pill. Green for "traveling with",
   amber for "need from venue". Click flips. */
.prod-input-row__toggle {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.prod-input-row__toggle[data-status="traveling"] {
  background: rgba(34, 139, 86, 0.12);
  color: rgb(34, 139, 86);
  border-color: rgba(34, 139, 86, 0.30);
}
.prod-input-row__toggle[data-status="need"] {
  background: rgba(212, 142, 19, 0.12);
  color: rgb(168, 110, 8);
  border-color: rgba(212, 142, 19, 0.30);
}
.prod-input-row__delete {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ac-color-t3);
  width: 28px; height: 28px;
  border-radius: 6px;
  display: grid; place-items: center;
}
.prod-input-row__delete:hover {
  background: rgba(0,0,0,0.05);
  color: var(--ac-color-danger);
}

.prod-input-add {
  display: grid;
  /* instrument | mic | + Custom | + Add input */
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) auto auto;
  gap: 8px;
  align-items: center;
}
.prod-input-add input {
  padding: 10px 12px;
  background: var(--ac-color-glow);
  border: 1px solid var(--ac-color-line);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ac-color-ink);
  outline: none;
}
.prod-input-add input::placeholder {
  color: var(--ac-color-t3);
}

/* ── Custom mic picker (autocomplete dropdown) ────────────
   Replaces native <datalist> with a manual dropdown so we
   can require 2+ chars before opening, substring-match, and
   show a friendly "no matches" empty state. The wrapper has
   position: relative so the dropdown can absolutely position
   against the input. */
.prod-mic-picker {
  position: relative;
  min-width: 0;
}
.prod-mic-picker > input {
  width: 100%;
  box-sizing: border-box;
}
.prod-mic-picker__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  margin: 0; padding: 4px 0;
  list-style: none;
  background: var(--ac-color-paper, #fff);
  border: 1px solid var(--ac-color-line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  max-height: 280px;
  overflow-y: auto;
  z-index: 200;
}
.prod-mic-picker__opt {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ac-color-ink);
  cursor: pointer;
  line-height: 1.3;
}
.prod-mic-picker__opt:hover,
.prod-mic-picker__opt.is-active {
  background: var(--ac-color-glow);
}
.prod-mic-picker__empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--ac-color-t3);
  font-style: italic;
}

/* ── Custom mic modal ─────────────────────────────────────
   Standalone overlay so it works on every page that loads the
   wiring script (currently just the assets tab, but the markup
   is page-agnostic). Dim backdrop, centered card, two text
   inputs, cancel + save footer. */
.prod-mic-modal {
  position: fixed;
  inset: 0;
  background: rgba(14, 12, 11, 0.55);
  display: grid;
  place-items: center;
  z-index: 1000;
  padding: 20px;
}
.prod-mic-modal__card {
  background: var(--ac-color-paper, #fff);
  border-radius: var(--ac-radius-xl, 14px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.30);
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
}
.prod-mic-modal__head {
  padding: 20px 22px 6px;
}
.prod-mic-modal__title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--ac-color-ink);
  letter-spacing: -0.005em;
}
.prod-mic-modal__sub {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ac-color-t2);
  margin: 0;
}
.prod-mic-modal__body {
  padding: 14px 22px 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prod-mic-modal__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prod-mic-modal__field > span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ac-color-t3);
}
.prod-mic-modal__field input {
  padding: 11px 13px;
  background: var(--ac-color-glow);
  border: 1px solid var(--ac-color-line);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--ac-color-ink);
  outline: none;
}
.prod-mic-modal__field input::placeholder {
  color: var(--ac-color-t3);
}
.prod-mic-modal__field input:focus {
  border-color: var(--ac-color-accent);
}
.prod-mic-modal__error {
  margin: 0;
  font-size: 12px;
  color: var(--ac-color-danger, #c0392b);
}
.prod-mic-modal__foot {
  padding: 14px 22px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Venue spec editor modal ───────────────────────────────
   Larger modal than the mic-add one — full sections of fields.
   Same backdrop treatment, but the card maxes out wider and
   scrolls internally when content exceeds viewport. */
.prod-venue-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(14, 12, 11, 0.55);
  display: grid;
  place-items: center;
  padding: 20px;
}
.prod-venue-modal__card {
  background: var(--ac-color-paper, #fff);
  border-radius: var(--ac-radius-xl, 14px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.30);
  width: min(720px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.prod-venue-modal__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: flex-start;
  padding: 22px 22px 8px;
}
.prod-venue-modal__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ac-color-t3);
  margin: 0 0 6px;
}
.prod-venue-modal__title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 20px;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
  color: var(--ac-color-ink);
}
.prod-venue-modal__sub {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ac-color-t2);
}
.prod-venue-modal__close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--ac-color-t3);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.prod-venue-modal__close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ac-color-ink);
}
.prod-venue-modal__verified {
  margin: 0 22px;
  padding: 10px 14px;
  background: rgba(34, 139, 86, 0.08);
  border: 1px solid rgba(34, 139, 86, 0.20);
  border-radius: 8px;
  font-size: 12px;
  color: rgb(34, 139, 86);
  font-weight: 600;
}
.prod-venue-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 22px;
}
.prod-venue-modal__section {
  margin-bottom: 18px;
}
.prod-venue-modal__section-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ac-color-t2);
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ac-color-line);
}
.prod-venue-modal__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.prod-venue-modal__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prod-venue-modal__field > span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ac-color-t3);
}
.prod-venue-modal__field input,
.prod-venue-modal__field textarea {
  padding: 9px 11px;
  background: var(--ac-color-glow);
  border: 1px solid var(--ac-color-line);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  color: var(--ac-color-ink);
  outline: none;
  font-family: 'Inter', sans-serif;
}
.prod-venue-modal__field input:focus,
.prod-venue-modal__field textarea:focus {
  border-color: var(--ac-color-accent);
}
.prod-venue-modal__field input[readonly],
.prod-venue-modal__field textarea[readonly] {
  background: rgba(0, 0, 0, 0.02);
  color: var(--ac-color-t2);
  cursor: not-allowed;
}
.prod-venue-modal__field textarea {
  resize: vertical;
  min-height: 60px;
}
.prod-venue-modal__check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ac-color-ink);
  grid-column: 1 / -1;
}
.prod-venue-modal__error {
  margin: 0 22px;
  font-size: 12px;
  color: var(--ac-color-danger, #c0392b);
}
.prod-venue-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--ac-color-line);
}
@media (max-width: 560px) {
  .prod-venue-modal__fields { grid-template-columns: 1fr; }
}

/* Venue link card — shareable URL with copy + preview. */
.prod-venuelink {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.prod-venuelink__url {
  padding: 10px 12px;
  background: var(--ac-color-glow);
  border: 1px solid var(--ac-color-line);
  border-radius: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--ac-color-ink);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.prod-venuelink__actions {
  display: flex;
  gap: 8px;
}
@media (max-width: 720px) {
  .prod-venuelink {
    grid-template-columns: 1fr;
  }
}

/* Tech notes textarea */
.prod-tech-notes {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  background: var(--ac-color-glow);
  border: 1px solid var(--ac-color-line);
  border-radius: 12px;
  color: var(--ac-color-ink);
  resize: vertical;
  min-height: 160px;
  outline: none;
}
.prod-tech-notes:focus {
  border-color: var(--ac-color-accent);
}
.prod-tech-notes__saved {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: 700;
}
.prod-tech-notes__saved.is-dirty { color: var(--ac-color-accent); }
.prod-tech-notes__saved.is-saving { color: var(--ac-color-accent); }
.prod-tech-notes__saved.is-saved  { color: rgb(34, 139, 86); }

/* Responsive — stack the add-row vertically on narrow screens so
   the file pill doesn't squash. */
@media (max-width: 720px) {
  .prod-add,
  .prod-add--double { grid-template-columns: 1fr; }
  .prod-input-row {
    grid-template-columns: 40px minmax(0,1fr) auto;
    grid-template-rows: auto auto;
  }
  .prod-input-row__mic { grid-column: 2 / span 2; grid-row: 2; }
  .prod-input-row__toggle { grid-column: 3; grid-row: 1; }
  .prod-input-row__delete { grid-column: 3; grid-row: 2; }
  .prod-input-add { grid-template-columns: 1fr; }
}

/* ── Settlement (show-details modal section) ───────────────────────
   Door breakdown + expenses + splits + net-to-artist. Inputs render
   when the effective role can edit (tour_manager / band_primary /
   admin); read-only cells for everyone else. Section is hidden via
   data-hide-for-X for content / merch / social roles.

   Layout: 3 stacked sections inside the .show-details__value column,
   each with a small sec-head, then a grid of inputs or read-only
   cells. The net-to-artist headline lives in .settle__head alongside
   the status pill so the eye lands on the dollar figure first.

   Inputs are number type with inputmode=decimal so iOS pops the
   numeric keypad on mobile (relevant when the desktop view gets
   loaded into a tablet). */

/* Hide settlement entirely for any role with financials: 'none'
   (crew tier — FOH, monitor, tech, merch_manager, content_creator,
   social_media_manager, crew, crew_member). Body attr is stamped by
   role-perms.js based on ROLE_PERMISSIONS[role].financials. The
   data-hide-for-content rule above already covers the two content
   sub-roles via data-effective-role, but the financials-perm version
   catches everyone else with no money access in one selector. */
body[data-perms-financials="none"] .show-details__row--settle {
  display: none !important;
}

.show-details__row--settle {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.show-details__value--settle {
  width: 100%;
}
.settle {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--ac-color-glow, #f6f3ef);
  border: 1px solid var(--ac-color-line);
  border-radius: 14px;
  padding: 16px;
}
/* Head: status pill + net-to-artist side by side. Net dominates. */
.settle__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
}
.settle__pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.settle__pill--btn {
  cursor: pointer;
  background: transparent;
  font: inherit;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  transition: filter 120ms ease;
}
.settle__pill--btn:hover { filter: brightness(0.95); }
.settle__pill--pending {
  background: rgba(0,0,0,0.06);
  color: var(--ac-color-t2);
}
.settle__pill--in_progress {
  background: rgba(217, 119, 6, 0.14);
  color: #b45309;
}
.settle__pill--settled {
  background: rgba(34, 139, 86, 0.16);
  color: rgb(28, 110, 70);
}

.settle__net {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
}
.settle__net-lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: 700;
}
.settle__net-val {
  font-family: var(--ac-font-display, 'Inter', sans-serif);
  font-size: 24px;
  font-weight: var(--ac-fw-semibold, 600);
  letter-spacing: -0.01em;
  color: var(--ac-color-ink);
  line-height: 1.1;
}
.settle__net-sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--ac-color-t3);
  letter-spacing: 0.02em;
}
.settle__net-paid {
  color: rgb(28, 110, 70);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Settlement two-column body. Left column (.settle__col--in) =
   money coming in (door tickets, gross subtotals). Right column
   (.settle__col--out) = obligations going out (expenses, merch
   cut owed to venue, splits + per-artist payouts). Reads as
   "money in → money out" left-to-right, which mirrors how a TM
   scans a settlement sheet at the venue.

   Stacks to a single column on narrow viewports so the layout
   stays usable on a phone (the worksheet is also rendered in the
   mobile DOS surface). */
.settle__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.settle__col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
@media (max-width: 960px) {
  .settle__cols {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

.settle__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settle__sec-head {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.settle__sec-total {
  font-family: var(--ac-font-display, 'Inter', sans-serif);
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--ac-color-ink);
  font-weight: var(--ac-fw-semibold, 600);
  text-transform: none;
}

/* Door grid — 3 columns on wide, 2 on narrow. */
.settle__door-grid,
.settle__splits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 720px) {
  .settle__door-grid,
  .settle__splits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 4-column variant — Presale sold + price + Walk-up sold + price
   on a single line. Used by the Tickets section which merged the
   previously-stacked Presale and Walk-up rows so the TM scans all
   door numbers without scrolling. Falls back to 2-up on narrow. */
.settle__door-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 720px) {
  .settle__door-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Door section — sub-block within the settlement door area (Presale,
   Walk-up, VIP & comps). Each one has a small monospace label and a
   2-3 column grid of input cells. Stacks vertically with breathing
   room so the sections are visually distinct. */
.settle__door-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.settle__door-section:last-child {
  margin-bottom: 0;
}
.settle__door-section-lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-color-t2);
  font-weight: 700;
}

/* Per-artist payouts — list of co-bill artists + their cut. */
.settle__payouts-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ac-color-line-subtle);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settle__payouts-head {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-color-t2);
  font-weight: 700;
}
.settle__payouts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settle__payout-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 8px;
  align-items: center;
}
.settle__payout-row--ro {
  grid-template-columns: 1fr auto;
}
.settle__payout-name-in,
.settle__payout-amt-in input {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--ac-color-line);
  border-radius: 6px;
  padding: 8px 10px;
  outline: none;
  width: 100%;
}
.settle__payout-amt-in {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--ac-color-line);
  border-radius: 6px;
  padding-left: 6px;
  width: 110px;
}
.settle__payout-amt-in input {
  border: none;
  padding: 8px 6px;
  text-align: right;
  width: 100%;
}
.settle__payout-amt-in .settle__input-prefix,
.settle__payout-amt-in .settle__input-suffix {
  color: var(--ac-color-t3);
  font-size: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.settle__payout-kind {
  display: inline-flex;
  border: 1px solid var(--ac-color-line);
  border-radius: 6px;
  overflow: hidden;
}
.settle__payout-kind-btn {
  appearance: none;
  background: #fff;
  border: 0;
  padding: 8px 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--ac-color-t2);
  cursor: pointer;
  border-right: 1px solid var(--ac-color-line-subtle);
}
.settle__payout-kind-btn:last-child {
  border-right: 0;
}
.settle__payout-kind-btn.is-active {
  background: var(--ac-color-ink);
  color: #fff;
}
.settle__payout-del {
  appearance: none;
  background: transparent;
  border: 1px solid var(--ac-color-line-subtle);
  color: var(--ac-color-t3);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.settle__payout-del:hover {
  border-color: var(--ac-color-danger);
  color: var(--ac-color-danger);
}
.settle__payout-name {
  font-weight: 600;
  font-size: 13px;
}
.settle__payout-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ac-color-ink);
}

.settle__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.settle__cell-lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: 700;
}
.settle__cell-input {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--ac-color-line);
  border-radius: 10px;
  padding: 0 10px;
  transition: border-color 120ms ease;
}
.settle__cell-input:focus-within {
  border-color: var(--ac-color-accent);
}
.settle__cell-input input {
  border: 0;
  background: transparent;
  outline: none;
  padding: 10px 0;
  font: inherit;
  font-size: 14px;
  color: var(--ac-color-ink);
  flex: 1;
  min-width: 0;
  /* Strip the spinner — TM types these in fast. */
  -moz-appearance: textfield;
}
.settle__cell-input input::-webkit-outer-spin-button,
.settle__cell-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.settle__input-prefix,
.settle__input-suffix {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--ac-color-t3);
  font-weight: 700;
  flex-shrink: 0;
}
.settle__cell-val {
  padding: 10px 12px;
  background: rgba(0,0,0,0.03);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  color: var(--ac-color-ink);
}
.settle__cell--ro .settle__cell-val {
  font-family: var(--ac-font-display, 'Inter', sans-serif);
}

/* Gross totals — small right-aligned summary below the door grid. */
.settle__gross {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.025);
  border-radius: 10px;
}
.settle__gross-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
}
.settle__gross-lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: 700;
}
.settle__gross-val {
  font-family: var(--ac-font-display, 'Inter', sans-serif);
  color: var(--ac-color-t2);
  font-variant-numeric: tabular-nums;
}
.settle__gross-row--total .settle__gross-lbl {
  color: var(--ac-color-ink);
}
.settle__gross-row--total .settle__gross-val {
  color: var(--ac-color-ink);
  font-weight: var(--ac-fw-semibold, 600);
  font-size: 14px;
}

/* Expenses list. */
.settle__exp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settle__exp-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 130px 28px;
  gap: 8px;
  align-items: center;
}
.settle__exp-row--ro {
  grid-template-columns: 140px minmax(0, 1fr) 130px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--ac-color-line-subtle, rgba(0,0,0,0.06));
}
.settle__exp-cat-sel,
.settle__exp-notes-in {
  padding: 8px 10px;
  border: 1px solid var(--ac-color-line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 120ms ease;
}
.settle__exp-cat-sel:focus,
.settle__exp-notes-in:focus {
  border-color: var(--ac-color-accent);
}
.settle__exp-amt-in {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--ac-color-line);
  border-radius: 8px;
  padding: 0 10px;
  transition: border-color 120ms ease;
}
.settle__exp-amt-in:focus-within { border-color: var(--ac-color-accent); }
.settle__exp-amt-in input {
  border: 0;
  background: transparent;
  outline: none;
  padding: 8px 0;
  font: inherit;
  font-size: 13px;
  width: 100%;
  text-align: right;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.settle__exp-amt-in input::-webkit-outer-spin-button,
.settle__exp-amt-in input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.settle__exp-del {
  width: 28px;
  height: 28px;
  border: 1px solid var(--ac-color-line);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--ac-color-t3);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  display: grid;
  place-items: center;
  padding: 0;
}
.settle__exp-del:hover {
  background: rgba(220, 38, 38, 0.08);
  color: rgb(185, 28, 28);
  border-color: rgba(185, 28, 28, 0.3);
}
.settle__exp-cat   { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ac-color-t2); }
.settle__exp-notes { font-size: 13px; color: var(--ac-color-t2); }
.settle__exp-amt   { font-family: var(--ac-font-display, 'Inter', sans-serif); font-variant-numeric: tabular-nums; text-align: right; color: var(--ac-color-ink); font-weight: var(--ac-fw-semibold, 600); }
.settle__empty {
  font-size: 13px;
  color: var(--ac-color-t3);
  font-style: italic;
  padding: 6px 0;
}
.settle__add-exp {
  align-self: flex-start;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .settle__head {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .settle__net {
    align-items: flex-start;
  }
  .settle__exp-row,
  .settle__exp-row--ro {
    grid-template-columns: 1fr 110px 28px;
    grid-template-areas:
      "cat   amt   del"
      "notes notes notes";
  }
  .settle__exp-row--ro {
    grid-template-columns: 1fr 110px;
    grid-template-areas:
      "cat   amt"
      "notes notes";
  }
  .settle__exp-cat-sel,
  .settle__exp-cat   { grid-area: cat; }
  .settle__exp-amt-in,
  .settle__exp-amt   { grid-area: amt; }
  .settle__exp-del   { grid-area: del; }
  .settle__exp-notes-in,
  .settle__exp-notes { grid-area: notes; }
}

/* Settle: merch cut subsection. Toggle pill + 3-col grid (cut% /
   sales / cut owed) with the cut-owed cell highlighted as the
   important read-only output. */
.settle__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 0;
}
.settle__toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.settle__toggle-track {
  display: inline-block;
  width: 36px;
  height: 20px;
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
  position: relative;
  transition: background 160ms ease;
}
.settle__toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform 160ms ease;
}
.settle__toggle input[type="checkbox"]:checked ~ .settle__toggle-track {
  background: rgb(34, 139, 86);
}
.settle__toggle input[type="checkbox"]:checked ~ .settle__toggle-track .settle__toggle-thumb {
  transform: translateX(16px);
}
.settle__toggle-lbl {
  font-size: 14px;
  color: var(--ac-color-ink);
}
.settle__toggle--ro {
  cursor: default;
  font-size: 14px;
  color: var(--ac-color-t2);
}
.settle__merch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.settle__merch-grid--ro {
  /* read-only mirrors same layout */
}
.settle__merch-owed {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settle__cell-val--owed {
  background: rgba(34, 139, 86, 0.1);
  color: rgb(28, 110, 70);
  font-weight: var(--ac-fw-semibold, 600);
  font-family: var(--ac-font-display, 'Inter', sans-serif);
  font-variant-numeric: tabular-nums;
}
.settle__merch-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.settle__merch-stamp {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: 700;
}
@media (max-width: 720px) {
  .settle__merch-grid {
    grid-template-columns: 1fr 1fr;
  }
  .settle__merch-owed {
    grid-column: 1 / span 2;
  }
}

/* ── VC Teaser grid + sections ────────────────────────────────
   The two booking-agent VC teasers (Offers Inbox + Venue Network)
   are visual twins — same shell, same "Launching with Venue CNTRL"
   pill — so they sit side-by-side in a 2-up grid rather than
   stacking vertically. That cuts the page in half and reads more
   like a paired "coming soon" preview than two giant nearly-empty
   cards in a row. Collapses to 1-up below 920px.

   Each card is a dark-glass panel with a compact header (eyebrow
   + title on the left, pill on the right) and a stacked list of
   preview rows. */
.vc-teaser-grid {
  margin: var(--ac-space-4) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ac-space-4);
  align-items: stretch;
}
.vc-teaser-grid > .vc-teaser {
  margin: 0;
  height: 100%;
}
@media (max-width: 920px) {
  .vc-teaser-grid { grid-template-columns: minmax(0, 1fr); }
}

.vc-teaser {
  margin: var(--ac-space-5) 0 0;
  padding: var(--ac-space-5) var(--ac-space-5) var(--ac-space-4);
  background: var(--ac-color-paper);
  border-radius: var(--ac-radius-2xl);
  border: 1px solid var(--ac-color-line);
  box-shadow: var(--ac-shadow-card);
  position: relative;
  display: flex;
  flex-direction: column;
}
/* Slim modifier — single compact row, no list, no header grid.
   Used when VC features are previewed-but-not-committed and the
   page just needs a "more coming Q3" marker without 3 fake rows. */
.vc-teaser--slim {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-space-4);
  padding: var(--ac-space-4) var(--ac-space-5);
}
.vc-teaser__slim-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.vc-teaser__title--slim {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ac-color-ink);
}
@media (max-width: 640px) {
  .vc-teaser--slim {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .vc-teaser__title--slim { font-size: 15.5px; }
}
.vc-teaser__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ac-space-4);
  align-items: flex-start;
  margin-bottom: var(--ac-space-4);
}
.vc-teaser__head-text { min-width: 0; }
/* Eyebrow — crimson dot prefix + "OFFERS INBOX · PREVIEW" composite.
   The dot reads as "live indicator" and the · PREVIEW tag is
   honest about the preview state. */
.vc-teaser__eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--ac-space-2);
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-sm);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-body);
  font-weight: var(--ac-fw-bold);
}
.vc-teaser__eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--ac-radius-circle);
  background: var(--ac-color-accent);
  display: inline-block;
}
.vc-teaser__eyebrow-sep {
  margin: 0 4px;
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
}
.vc-teaser__eyebrow-tag {
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
}
.vc-teaser__title {
  margin: var(--ac-space-2) 0 0;
  font-family: var(--ac-font-display);
  font-size: var(--ac-fs-3xl);
  font-weight: var(--ac-fw-black);
  letter-spacing: var(--ac-tracking-tight);
  line-height: var(--ac-leading-tight);
  color: var(--ac-color-ink);
}
.vc-teaser__sub {
  margin: var(--ac-space-2) 0 0;
  max-width: 380px;
  font-size: var(--ac-fs-md);
  line-height: var(--ac-leading-normal);
  color: var(--ac-color-t2);
}
/* Release indicator — "GOING LIVE" small mono label stacked above
   a dark "VENUE CNTRL · Q3" pill in the upper-right corner. */
.vc-teaser__release {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--ac-space-2);
  flex-shrink: 0;
}
.vc-teaser__release-lbl {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-xs);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
}
.vc-teaser__release-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: var(--ac-color-inverse);
  color: #ffffff;
  border-radius: var(--ac-radius-pill);
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-xs);
  line-height: 1.4;
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  font-weight: var(--ac-fw-bold);
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}

/* Stacked row list — full-width per row inside the card. */
.vc-teaser__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-2);
  flex: 1 1 auto; /* fills available card height in the 2-up grid */
}
.vc-teaser__row {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: var(--ac-space-3);
  align-items: center;
  padding: 10px var(--ac-space-3);
  background: transparent;
  border: 1px solid var(--ac-color-line-subtle);
  border-radius: var(--ac-radius-md);
  transition: background var(--ac-duration-base) var(--ac-ease-standard),
              border-color var(--ac-duration-base) var(--ac-ease-standard);
}
/* Venue Network rows use a 2-letter initials avatar in place of a
   date column. */
.vc-teaser--initials .vc-teaser__row {
  grid-template-columns: 36px minmax(0, 1fr) auto;
}
.vc-teaser__row:hover {
  background: var(--ac-color-glow);
  border-color: var(--ac-color-line);
}
.vc-teaser__row-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.vc-teaser__row-date-d {
  font-family: var(--ac-font-display);
  font-size: var(--ac-fs-2xl);
  font-weight: var(--ac-fw-black);
  color: var(--ac-color-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ac-tracking-tight);
}
.vc-teaser__row-date-m {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-2xs);
  letter-spacing: var(--ac-tracking-mega);
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
  margin-top: 3px;
}
.vc-teaser__row-initials {
  width: 36px;
  height: 36px;
  border-radius: var(--ac-radius-sm);
  background: var(--ac-color-glow);
  border: 1px solid var(--ac-color-line-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-sm);
  font-weight: var(--ac-fw-bold);
  letter-spacing: var(--ac-tracking-wide);
  color: var(--ac-color-t2);
  flex-shrink: 0;
}
.vc-teaser__row-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: var(--ac-space-3);
}
.vc-teaser__row-title {
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-md);
  font-weight: var(--ac-fw-semibold);
  color: var(--ac-color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vc-teaser__row-meta {
  font-size: var(--ac-fs-base);
  color: var(--ac-color-t2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vc-teaser__row-end {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 64px;
  line-height: 1.1;
}
.vc-teaser__row-end-num {
  font-family: var(--ac-font-display);
  font-size: var(--ac-fs-2xl);
  font-weight: var(--ac-fw-black);
  color: var(--ac-color-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ac-tracking-tight);
}
.vc-teaser__row-end-lbl {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-2xs);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
  margin-top: 3px;
}
.vc-teaser__row-end--wide { min-width: 74px; }

.vc-teaser__foot {
  margin-top: var(--ac-space-3);
  padding-top: var(--ac-space-3);
  border-top: 1px dashed var(--ac-color-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-space-4);
  font-size: var(--ac-fs-base);
  color: var(--ac-color-t3);
}
.vc-teaser__foot-cta {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-sm);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ac-color-accent-glow);
  transition: text-decoration-color var(--ac-duration-fast) var(--ac-ease-standard);
}
.vc-teaser__foot-cta:hover { text-decoration-color: var(--ac-color-accent); }

/* Mobile collapse — header stacks (release indicator drops below
   the title block), rows reflow date/initials + body + end-stat
   into a 2-col layout with the end-stat spanning the second row. */
@media (max-width: 720px) {
  .vc-teaser { padding: 18px 18px 14px; }
  .vc-teaser__head { grid-template-columns: 1fr; gap: 14px; }
  .vc-teaser__release { flex-direction: row; align-items: center; gap: 10px; }
  .vc-teaser__title { font-size: 22px; }
  .vc-teaser__row {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas: "date body" "end end";
    gap: 10px 14px;
  }
  .vc-teaser--initials .vc-teaser__row {
    grid-template-columns: 36px minmax(0, 1fr);
  }
  .vc-teaser__row-date,
  .vc-teaser__row-initials { grid-area: date; }
  .vc-teaser__row-body { grid-area: body; padding-right: 0; }
  .vc-teaser__row-end {
    grid-area: end;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
  }
  .vc-teaser__row-end-lbl { margin-top: 0; }
  .vc-teaser__row-title,
  .vc-teaser__row-meta {
    white-space: normal;
    text-overflow: clip;
  }
}

/* ── Top Cities table ──────────────────────────────────────
   Booking-agent view's city audience aggregation. Sortable
   header columns + an Action column flagging BOOK / WARM based
   on audience + months since last show. Population eventually
   pulls from Spotify for Artists + Meta Insights + Apple Music
   for Artists + TikTok Business. Until the worker endpoint
   ships this shows sample rows tagged .top-cities__row--sample
   and a "Preview data" footer note. */
.top-cities {
  margin: var(--ac-space-5) 0 0;
  padding: var(--ac-space-6) var(--ac-space-8) var(--ac-space-5);
  background: var(--ac-color-paper);
  border-radius: var(--ac-radius-2xl);
  border: 1px solid var(--ac-color-line);
  box-shadow: var(--ac-shadow-card);
}
/* Header — title block on the left, stat blocks (total audience +
   markets tracked) on the right. Stacks on narrow viewports. */
.top-cities__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.top-cities__head-text { min-width: 0; }
.top-cities__eyebrow {
  margin: 0 0 var(--ac-space-2);
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-sm);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
}
.top-cities__title {
  margin: 0;
  font-family: var(--ac-font-display);
  font-size: var(--ac-fs-5xl);
  font-weight: var(--ac-fw-black);
  letter-spacing: var(--ac-tracking-tight);
  line-height: var(--ac-leading-tight);
  color: var(--ac-color-ink);
}
.top-cities__sub {
  margin: var(--ac-space-3) 0 0;
  max-width: 640px;
  font-size: var(--ac-fs-md);
  line-height: var(--ac-leading-normal);
  color: var(--ac-color-t2);
}
/* Stat blocks — paired numerics in the upper-right of the header.
   Same vibe as the spotlight stat blocks (mono label + big tabular
   number). */
.top-cities__stats {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  flex-shrink: 0;
}
.top-cities__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.top-cities__stat-label {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-xs);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
}
.top-cities__stat-num {
  font-family: var(--ac-font-display);
  font-size: var(--ac-fs-4xl);
  font-weight: var(--ac-fw-black);
  letter-spacing: var(--ac-tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--ac-color-ink);
  line-height: 1;
}
/* Source chips — green-dot for live-syncing platforms, neutral
   "syncing" tag for ones still aggregating. Reflects what's actually
   feeding the table once the worker connections endpoint is wired. */
.top-cities__sources {
  list-style: none;
  margin: 0 0 var(--ac-space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-space-2);
}
.top-cities__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ac-space-2);
  padding: 4px var(--ac-space-3);
  border-radius: var(--ac-radius-pill);
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-xs);
  letter-spacing: var(--ac-tracking-wider);
  font-weight: var(--ac-fw-bold);
  white-space: nowrap;
  border: 1px solid var(--ac-color-line);
}
.top-cities__chip--live {
  color: var(--ac-color-body);
  background: var(--ac-color-glow);
}
.top-cities__chip--syncing {
  color: var(--ac-color-t3);
  background: transparent;
}
.top-cities__chip-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--ac-radius-circle);
  background: var(--ac-color-success);
  flex-shrink: 0;
}
.top-cities__table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  /* ~8 rows + sticky header visible at once. Above that, the rest
     of the top-100 cities scroll inside the box. Header ~46px + 8
     rows * ~46px each. */
  max-height: 420px;
  border-top: 1px solid var(--ac-color-line);
  border-bottom: 1px solid var(--ac-color-line);
}
/* Sticky header — column labels stay visible while the body
   scrolls. The light canvas-glow background on the th covers
   any rows that scroll behind it so the header doesn't get
   visually muddled with the data underneath. */
.top-cities__table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
.top-cities__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ac-fs-md);
}
.top-cities__th {
  padding: var(--ac-space-4) var(--ac-space-4);
  text-align: left;
  background: var(--ac-color-glow);
  border-bottom: 1px solid var(--ac-color-line);
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-xs);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
  white-space: nowrap;
}
.top-cities__th--num { text-align: right; }
.top-cities__th--sortable {
  cursor: pointer;
  user-select: none;
  transition: color 120ms ease;
}
.top-cities__th--sortable:hover { color: var(--ac-color-ink); }
.top-cities__th--sortable.is-sorted-desc::after,
.top-cities__th--sortable.is-sorted-asc::after {
  content: '';
  display: inline-block;
  margin-left: 6px;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  vertical-align: middle;
}
.top-cities__th--sortable.is-sorted-desc::after {
  border-top: 5px solid var(--ac-color-ink);
}
.top-cities__th--sortable.is-sorted-asc::after {
  border-bottom: 5px solid var(--ac-color-ink);
}
.top-cities__row {
  transition: background var(--ac-duration-fast) var(--ac-ease-standard);
}
.top-cities__row:hover {
  background: var(--ac-color-glow);
}
.top-cities__row--flag .top-cities__td--city::before {
  content: '⚡';
  margin-right: 6px;
  color: var(--ac-color-accent);
}
.top-cities__td {
  padding: var(--ac-space-3) var(--ac-space-4);
  border-bottom: 1px solid var(--ac-color-line-subtle);
  color: var(--ac-color-ink);
  font-variant-numeric: tabular-nums;
}
.top-cities__td--city {
  font-weight: var(--ac-fw-semibold);
  font-family: var(--ac-font-body);
}
.top-cities__td--num { text-align: right; }
.top-cities__td--total { font-weight: var(--ac-fw-semibold); }
.top-cities__td--muted { color: var(--ac-color-t3); }
.top-cities__td--last {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-sm);
  letter-spacing: var(--ac-tracking-wide);
  color: var(--ac-color-t2);
}
.top-cities__action {
  display: inline-block;
  padding: 3px var(--ac-space-3);
  border-radius: var(--ac-radius-pill);
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-2xs);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  font-weight: var(--ac-fw-bold);
}
.top-cities__action--book {
  background: var(--ac-color-accent-chip);
  color: var(--ac-color-accent);
}
.top-cities__action--warm {
  background: var(--ac-color-warning-bg);
  color: var(--ac-color-warning);
}
/* Route — opportunistic-stop tier. Neutral gray sits below the
   crimson Book + amber Warm in the visual hierarchy so the agent's
   eye is naturally drawn to the higher-priority actions first. */
.top-cities__action--route {
  background: var(--ac-color-glow);
  color: var(--ac-color-t2);
  border: 1px solid var(--ac-color-line);
}

/* Booked — a confirmed future show is on the calendar in this city.
   Outranks every temperature tier (book/warm/route) because action is
   already taken. Green pill with a check + date for instant scan. */
.top-cities__action--booked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(34, 139, 92, 0.10);
  color: #1f8b4f;
  border: 1px solid rgba(34, 139, 92, 0.25);
  letter-spacing: var(--ac-tracking-wide);
}
.top-cities__action--booked .top-cities__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.top-cities__action--booked .top-cities__action-text {
  font-variant-numeric: tabular-nums;
}
/* Tinted row treatment so booked cities stand out at a glance,
   without overpowering the data on the row itself. */
.top-cities__row--booked .top-cities__td--city {
  font-weight: 700;
}

.top-cities__foot {
  margin-top: var(--ac-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-space-4);
  font-size: var(--ac-fs-base);
  color: var(--ac-color-t3);
}
.top-cities__foot-text { font-style: italic; }
.top-cities__foot-cta {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-sm);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-ink);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--ac-duration-fast) var(--ac-ease-standard);
}
.top-cities__foot-cta:hover { color: var(--ac-color-accent); }

/* Refresh markets button — bypasses the 6h server cache and re-runs
   the audience aggregation immediately. Lives in the card footer next
   to the preview-data note. Mono-cap label + arrow icon to match the
   booking dashboard's pill aesthetic. */
.top-cities__refresh {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--ac-color-line);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--ac-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ac-color-t2);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color var(--ac-duration-fast) var(--ac-ease-standard),
              color var(--ac-duration-fast) var(--ac-ease-standard),
              background var(--ac-duration-fast) var(--ac-ease-standard);
}
.top-cities__refresh:hover {
  border-color: var(--ac-color-ink);
  color: var(--ac-color-ink);
  background: var(--ac-color-glow);
}
.top-cities__refresh:disabled { opacity: 0.6; cursor: progress; }
.top-cities__refresh-icon {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  transform: translateY(-0.5px);
}
.top-cities__refresh.is-loading .top-cities__refresh-icon {
  animation: top-cities-refresh-spin 0.9s linear infinite;
}
@keyframes top-cities-refresh-spin {
  from { transform: translateY(-0.5px) rotate(0deg); }
  to   { transform: translateY(-0.5px) rotate(360deg); }
}

/* Sample-row treatment — only when data hasn't been wired yet.
   Subtle dotted underline on the city name so it reads as
   placeholder, not stale data. Once the worker city-aggregation
   endpoint ships and the table is wired to real data, drop the
   --sample modifier from the rows. */
.top-cities__row--sample .top-cities__td--city {
  text-decoration: underline dotted rgba(0, 0, 0, 0.2);
  text-underline-offset: 4px;
}

/* ──────────────────────────────────────────────────────────────
   LABEL — Most Recent Release card.
   Single rich card that surfaces everything we know about the
   band's latest (or next-up) release. Two-column body: square
   artwork on the left, title + meta + streaming links + stat
   tiles on the right. Same panel chrome as .top-cities so it
   reads as a peer section.
   ────────────────────────────────────────────────────────────── */
.label-recent-release {
  margin: var(--ac-space-5) 0 0;
  padding: var(--ac-space-6) var(--ac-space-8) var(--ac-space-5);
  background: var(--ac-color-paper);
  border-radius: var(--ac-radius-2xl);
  border: 1px solid var(--ac-color-line);
  box-shadow: var(--ac-shadow-card);
}
.label-recent-release__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.label-recent-release__head-text { min-width: 0; }
.label-recent-release__eyebrow {
  margin: 0 0 var(--ac-space-2);
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-sm);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
}
.label-recent-release__title {
  margin: 0;
  font-family: var(--ac-font-display);
  font-size: var(--ac-fs-5xl);
  font-weight: var(--ac-fw-black);
  letter-spacing: var(--ac-tracking-tight);
  line-height: var(--ac-leading-tight);
  color: var(--ac-color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.label-recent-release__sub {
  margin: var(--ac-space-3) 0 0;
  max-width: 640px;
  font-size: var(--ac-fs-md);
  line-height: var(--ac-leading-normal);
  color: var(--ac-color-t2);
}
/* Upcoming release tile — replaces the static phase pill in the
   header. Clickable; navigates to the Releases tab. Shows artwork
   thumbnail + title + release-date label. Hidden when there's
   nothing upcoming on the calendar. */
.label-recent-release__upcoming {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: flex-start;
  padding: 7px 10px;
  background: var(--ac-color-surface);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  text-decoration: none;
  color: inherit;
  transition: transform 100ms ease, background 100ms ease, border-color 100ms ease;
  min-width: 180px;
  max-width: 220px;
}
.label-recent-release__upcoming:hover {
  background: var(--ac-color-paper);
  border-color: var(--ac-color-accent);
  transform: translateY(-1px);
}
.label-recent-release__upcoming-eyebrow {
  font-family: var(--ac-font-mono);
  font-size: 9px;
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-accent);
}
.label-recent-release__upcoming-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.label-recent-release__upcoming-art {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(139, 26, 43, 0.85), rgba(26, 14, 13, 0.95));
  background-size: cover;
  background-position: center;
  border: 1px solid var(--ac-color-line);
}
.label-recent-release__upcoming-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.label-recent-release__upcoming-title {
  font-size: 12px;
  font-weight: var(--ac-fw-semibold);
  color: var(--ac-color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.label-recent-release__upcoming-meta {
  font-family: var(--ac-font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--ac-color-t3);
}

/* Two-column body — artwork left, details right. Collapses to
   stacked on narrow viewports. */
.label-recent-release__body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.label-recent-release__art {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: var(--ac-radius-xl);
  background:
    linear-gradient(135deg, rgba(139, 26, 43, 0.85), rgba(26, 14, 13, 0.95));
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--ac-color-line);
}
/* Fallback "♪" glyph — hidden when artwork is on file (the
   wiring removes the .label-recent-release__art--no-art class). */
.label-recent-release__art-fallback {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: 96px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1;
}
.label-recent-release__art--has-art .label-recent-release__art-fallback {
  display: none;
}
.label-recent-release__details {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.label-recent-release__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.label-recent-release__type {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-sm);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-accent);
}
.label-recent-release__sep {
  color: var(--ac-color-t3);
}
.label-recent-release__date,
.label-recent-release__relative {
  font-size: var(--ac-fs-md);
  color: var(--ac-color-t2);
}
.label-recent-release__relative {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-sm);
  letter-spacing: 0.04em;
  color: var(--ac-color-t3);
}

/* Streaming link pills — clickable, color-coded dot per platform. */
.label-recent-release__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.label-recent-release__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--ac-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-ink);
  background: var(--ac-color-surface);
  border: 1px solid var(--ac-color-line);
  text-decoration: none;
  transition: transform 100ms ease, background 100ms ease;
}
.label-recent-release__link:hover {
  background: var(--ac-color-paper);
  transform: translateY(-1px);
}
.label-recent-release__link-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.label-recent-release__link-dot--spotify  { background: #1ed760; }
.label-recent-release__link-dot--apple    { background: #fa233b; }
.label-recent-release__link-dot--youtube  { background: #ff0033; }
.label-recent-release__link-dot--amazon   { background: #00a8e1; }
.label-recent-release__link-dot--landing  { background: var(--ac-color-accent); }

/* Four-tile stat strip. Tiles wrap to 2x2 on narrow widths. */
.label-recent-release__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.label-recent-release__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--ac-color-surface);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-lg);
  min-width: 0;
}
.label-recent-release__stat-label {
  font-family: var(--ac-font-mono);
  font-size: 10px;
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
}
.label-recent-release__stat-num {
  font-family: var(--ac-font-display);
  font-size: var(--ac-fs-2xl);
  font-weight: var(--ac-fw-black);
  font-variant-numeric: tabular-nums;
  color: var(--ac-color-ink);
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.label-recent-release__empty {
  padding: 32px 20px;
  text-align: center;
  background: var(--ac-color-surface);
  border: 1px dashed var(--ac-color-line);
  border-radius: var(--ac-radius-lg);
  color: var(--ac-color-t2);
  font-style: italic;
}

/* Songstats tiles share the .label-recent-release__stat base style.
   The --ss modifier makes them visually subordinate (lighter bg) so
   the eye reads "AC analytics first, streaming performance second." */
.label-recent-release__stat--ss {
  background: linear-gradient(135deg, rgba(30, 215, 96, 0.04), rgba(0, 0, 0, 0.02));
}

/* Secondary Songstats row — narrow pill-row of per-source stats. */
.label-recent-release__ss-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.label-recent-release__ss-tile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ac-color-surface);
  border: 1px solid var(--ac-color-line);
  font-family: var(--ac-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ac-color-t2);
}
.label-recent-release__ss-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.label-recent-release__ss-label {
  color: var(--ac-color-t3);
}
.label-recent-release__ss-value {
  font-family: var(--ac-font-display);
  font-weight: var(--ac-fw-black);
  font-variant-numeric: tabular-nums;
  color: var(--ac-color-ink);
  letter-spacing: 0;
}

/* ── Top Playlists list ────────────────────────────────────────
   Ranked list of the top 5 playlists this track is on across all
   platforms (Spotify, Apple, Amazon, Deezer). Each row: rank
   number, platform color dot, playlist name (clickable link if
   URL available), follower count, optional editorial badge. */
.label-recent-release__playlists {
  margin-top: 16px;
  padding: 16px 20px;
  background: var(--ac-color-surface);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-lg);
}
.label-recent-release__playlists-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.label-recent-release__playlists-eyebrow {
  margin: 0;
  font-family: var(--ac-font-mono);
  font-size: 11px;
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-ink);
  font-weight: var(--ac-fw-bold);
}
.label-recent-release__playlists-sub {
  margin: 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t3);
}
.label-recent-release__playlists-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: pl-rank;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.label-recent-release__playlist-row {
  display: grid;
  grid-template-columns: 28px 12px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-md);
  counter-increment: pl-rank;
}
.label-recent-release__playlist-row::before {
  content: counter(pl-rank);
  font-family: var(--ac-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
  text-align: center;
}
.label-recent-release__playlist-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
  justify-self: center;
}
.label-recent-release__playlist-name {
  font-size: 13px;
  font-weight: var(--ac-fw-semibold);
  color: var(--ac-color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.label-recent-release__playlist-name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 100ms ease;
}
.label-recent-release__playlist-name a:hover {
  border-bottom-color: var(--ac-color-accent);
}
.label-recent-release__playlist-editorial {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 999px;
  font-family: var(--ac-font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: var(--ac-fw-bold);
  background: rgba(255, 215, 137, 0.20);
  color: #8a6b1f;
}
.label-recent-release__playlist-followers {
  font-family: var(--ac-font-display);
  font-size: 13px;
  font-weight: var(--ac-fw-black);
  font-variant-numeric: tabular-nums;
  color: var(--ac-color-ink);
}

@media (max-width: 880px) {
  .label-recent-release__body {
    grid-template-columns: 1fr;
  }
  .label-recent-release__art {
    max-width: 200px;
  }
  .label-recent-release__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .label-recent-release { padding: 20px 18px 16px; }
  .label-recent-release__head { grid-template-columns: 1fr; gap: 14px; }
  .label-recent-release__title { font-size: 26px; }
}

/* ──────────────────────────────────────────────────────────────
   TRAJECTORY — career story timeline for the label view.
   Header → chart with projection → vertical timeline of milestones
   by year → forward projection. Brand-aligned dark hero, light
   timeline body for legibility. Screenshottable.
   ────────────────────────────────────────────────────────────── */
.trajectory {
  margin: var(--ac-space-5) 0 0;
  padding: var(--ac-space-6) var(--ac-space-8) var(--ac-space-5);
  background: var(--ac-color-paper);
  border-radius: var(--ac-radius-2xl);
  border: 1px solid var(--ac-color-line);
  box-shadow: var(--ac-shadow-card);
}
.trajectory__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: flex-start;
  margin-bottom: 24px;
}
.trajectory__head-text { min-width: 0; }
.trajectory__eyebrow {
  margin: 0 0 var(--ac-space-2);
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-sm);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
}
.trajectory__title {
  margin: 0;
  font-family: var(--ac-font-display);
  font-size: var(--ac-fs-5xl);
  font-weight: var(--ac-fw-black);
  letter-spacing: var(--ac-tracking-tight);
  line-height: var(--ac-leading-tight);
  color: var(--ac-color-ink);
}
.trajectory__sub {
  margin: var(--ac-space-3) 0 0;
  max-width: 640px;
  font-size: var(--ac-fs-md);
  line-height: var(--ac-leading-normal);
  color: var(--ac-color-t2);
}
.trajectory__hero-stats {
  display: flex;
  gap: 24px;
  flex-shrink: 0;
}
.trajectory__hero-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.trajectory__hero-stat-label {
  font-family: var(--ac-font-mono);
  font-size: 10px;
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
}
.trajectory__hero-stat-num {
  font-family: var(--ac-font-display);
  font-size: var(--ac-fs-3xl);
  font-weight: var(--ac-fw-black);
  font-variant-numeric: tabular-nums;
  color: var(--ac-color-ink);
  line-height: 1;
}
.trajectory__hero-stat-delta {
  font-family: var(--ac-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ac-color-t3);
}
.trajectory__hero-stat-delta--up { color: #1e6b48; }
.trajectory__hero-stat-delta--down { color: #8B1A2B; }

/* Chart block — dark panel with sparkline curve + projection. */
.trajectory__chart-wrap {
  margin: 0 0 28px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(20, 16, 22, 0.98), rgba(34, 26, 38, 0.95));
  border-radius: var(--ac-radius-xl);
  color: #fff;
}
.trajectory__chart-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 12px;
}
.trajectory__chart-label-text {
  font-family: var(--ac-font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-weight: var(--ac-fw-bold);
}
.trajectory__chart-projection {
  font-family: var(--ac-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #8effb4;
  font-weight: var(--ac-fw-bold);
}
.trajectory__chart {
  display: block;
  width: 100%;
  height: 240px;
}
.trajectory__chart-grid {
  stroke: rgba(255,255,255,0.06);
  stroke-width: 1;
}
.trajectory__chart-today {
  stroke: rgba(255,255,255,0.30);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.trajectory__chart-today-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  fill: rgba(255,255,255,0.55);
  font-weight: 700;
}
.trajectory__chart-line {
  fill: none;
  stroke: #1ed760;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trajectory__chart-line--projected {
  stroke: #8effb4;
  stroke-dasharray: 6 4;
  opacity: 0.85;
}
.trajectory__chart-fill {
  fill: url(#trajectory-fill-gradient);
  fill: rgba(30, 215, 96, 0.12);
}
.trajectory__chart-dot {
  fill: #1ed760;
  stroke: #16161e;
  stroke-width: 2;
}
.trajectory__chart-dot--current {
  fill: #fff;
  stroke: #1ed760;
  stroke-width: 3;
}
.trajectory__chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--ac-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.40);
}

/* Timeline — vertical career-arc list grouped by year. Left rail
   year label, right column event rows. */
.trajectory__timeline {
  margin-bottom: 28px;
}
.trajectory__timeline-eyebrow {
  margin: 0 0 16px;
  font-family: var(--ac-font-mono);
  font-size: 11px;
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
}
.trajectory__year {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--ac-color-line);
}
.trajectory__year:first-of-type {
  border-top: none;
}
.trajectory__year-label {
  font-family: var(--ac-font-display);
  font-size: var(--ac-fs-2xl);
  font-weight: var(--ac-fw-black);
  color: var(--ac-color-ink);
  letter-spacing: var(--ac-tracking-tight);
  font-variant-numeric: tabular-nums;
}
.trajectory__events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trajectory__event {
  display: grid;
  grid-template-columns: 70px 100px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
}
.trajectory__event-date {
  font-family: var(--ac-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
  text-transform: uppercase;
}
.trajectory__event-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--ac-font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: var(--ac-fw-bold);
  line-height: 1.2;
  align-self: center;
}
.trajectory__event-type--release    { background: rgba(139, 26, 43, 0.10);   color: #8B1A2B; }
.trajectory__event-type--show       { background: rgba(40, 130, 90, 0.14);   color: #1e6b48; }
.trajectory__event-type--press      { background: rgba(255, 215, 137, 0.20); color: #8a6b1f; }
.trajectory__event-type--milestone  { background: rgba(0, 168, 225, 0.14);   color: #00558c; }
.trajectory__event-type--editorial  { background: rgba(168, 56, 255, 0.14);  color: #6a1faf; }
.trajectory__event-text {
  font-size: var(--ac-fs-md);
  line-height: var(--ac-leading-normal);
  color: var(--ac-color-t2);
}
.trajectory__event-text strong {
  color: var(--ac-color-ink);
  font-weight: var(--ac-fw-semibold);
}
.trajectory__expand-link {
  color: var(--ac-color-accent);
  text-decoration: none;
  font-family: var(--ac-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  margin-left: 6px;
}
.trajectory__expand-link:hover {
  text-decoration: underline;
}

/* Forward-looking block — projected next milestones at current
   growth rate. Visually distinct (lighter bg + dashed border) so
   it reads as "what's next" rather than "what happened." */
.trajectory__forward {
  padding: 20px 24px;
  background: var(--ac-color-surface);
  border: 1px dashed var(--ac-color-line);
  border-radius: var(--ac-radius-lg);
}
.trajectory__forward-eyebrow {
  margin: 0 0 12px;
  font-family: var(--ac-font-mono);
  font-size: 11px;
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
}
.trajectory__forward-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  counter-reset: tj-fwd;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trajectory__forward-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  counter-increment: tj-fwd;
}
.trajectory__forward-row::before {
  content: counter(tj-fwd);
  font-family: var(--ac-font-mono);
  font-size: 11px;
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
  padding-right: 8px;
  border-right: 1px solid var(--ac-color-line);
  text-align: right;
}
.trajectory__forward-when {
  font-family: var(--ac-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ac-color-accent);
  font-weight: var(--ac-fw-bold);
}
.trajectory__forward-what {
  font-size: var(--ac-fs-md);
  line-height: var(--ac-leading-normal);
  color: var(--ac-color-t2);
}
.trajectory__forward-what strong {
  color: var(--ac-color-ink);
  font-weight: var(--ac-fw-semibold);
}
.trajectory__forward-foot {
  margin: 12px 0 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t3);
  font-style: italic;
}

@media (max-width: 720px) {
  .trajectory { padding: 20px 18px 16px; }
  .trajectory__head { grid-template-columns: 1fr; gap: 16px; }
  .trajectory__title { font-size: 26px; }
  .trajectory__hero-stats { align-self: flex-start; gap: 16px; flex-wrap: wrap; }
  .trajectory__hero-stat { align-items: flex-start; }
  .trajectory__hero-stat-num { font-size: 22px; }
  .trajectory__year { grid-template-columns: 1fr; gap: 8px; }
  .trajectory__event { grid-template-columns: 60px 90px 1fr; gap: 10px; }
}

@media (max-width: 720px) {
  .top-cities { padding: 20px 18px 16px; }
  .top-cities__head { grid-template-columns: 1fr; gap: 16px; }
  .top-cities__title { font-size: 26px; }
  .top-cities__stats { gap: 24px; align-self: flex-start; }
  .top-cities__stat { align-items: flex-start; }
  .top-cities__stat-num { font-size: 22px; }
  /* Hide the Merch + Email columns on narrow viewports — they're the
     lower-priority signals; Spotify + IG audience numbers and the
     last-show date are what matter most at small widths. */
  .top-cities__table th:nth-child(5),
  .top-cities__table td:nth-child(5),
  .top-cities__table th:nth-child(6),
  .top-cities__table td:nth-child(6) {
    display: none;
  }
  .top-cities__foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   AC MARKETING — bottom of the Marketing tab (formerly Releases)
   ============================================================
   Three-card grid: Artist Playlists, Press Rolodex, Press Hits.
   Lives below the release hero + stats + previous-releases / smart
   links 2-up grid inside the Marketing tab. Side-by-side on
   desktop, stacks below 980px. Visual language matches the rest
   of the dash card system — raised surface, 2xl radius, brand
   tokens for type and color. Each subsection is a self-contained
   card with header (eyebrow + title + sub + hero stat), a
   vertical list of rows, and a footer with two CTAs.

   NOTE: padding/margin tuned to sit naturally between the
   releases-bottom-grid above and the tab edge below — slimmer
   top margin than when it was a dash-section because the grid
   above already has internal spacing. =========================== */
.ac-marketing {
  margin: 20px 0 0;
  padding: var(--ac-space-6) var(--ac-space-8) var(--ac-space-5);
  background: var(--ac-color-paper);
  border-radius: var(--ac-radius-2xl);
  border: 1px solid var(--ac-color-line);
  box-shadow: var(--ac-shadow-card);
}
.ac-marketing__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: flex-end;
  margin-bottom: 20px;
}
.ac-marketing__head-text { min-width: 0; }
.ac-marketing__eyebrow {
  margin: 0 0 var(--ac-space-2);
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-sm);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
}
.ac-marketing__title {
  margin: 0;
  font-family: var(--ac-font-display);
  font-size: var(--ac-fs-5xl);
  font-weight: var(--ac-fw-black);
  letter-spacing: var(--ac-tracking-tight);
  line-height: var(--ac-leading-tight);
  color: var(--ac-color-ink);
}
.ac-marketing__sub {
  margin: var(--ac-space-3) 0 0;
  max-width: 640px;
  font-size: var(--ac-fs-md);
  line-height: var(--ac-leading-normal);
  color: var(--ac-color-t2);
}
.ac-marketing__head-link {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-fs-xs);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-t3);
  text-decoration: none;
  border: 1px solid var(--ac-color-line);
  border-radius: 999px;
  padding: 8px 14px;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.ac-marketing__head-link:hover {
  color: var(--ac-color-ink);
  border-color: var(--ac-color-t2);
  background: var(--ac-color-surface-base);
}
/* Three-card grid. Auto-fits with a minimum column width so two
   cards land side-by-side at mid-width and three at wide width. */
.ac-marketing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ac-marketing__foot-note {
  margin: 16px 0 0;
  font-size: var(--ac-fs-sm);
  color: var(--ac-color-t3);
  font-style: italic;
}
/* ---- Individual card ---- */
.ac-marketing-card {
  background: var(--ac-color-surface-base);
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-xl);
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.ac-marketing-card__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ac-color-line);
}
.ac-marketing-card__eyebrow {
  margin: 0 0 6px;
  font-family: var(--ac-font-mono);
  font-size: 11px;
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
}
.ac-marketing-card__title {
  margin: 0;
  font-family: var(--ac-font-display);
  font-size: 18px;
  font-weight: var(--ac-fw-black);
  letter-spacing: var(--ac-tracking-tight);
  line-height: 1.2;
  color: var(--ac-color-ink);
}
.ac-marketing-card__sub {
  margin: 6px 0 0;
  font-size: var(--ac-fs-sm);
  line-height: 1.4;
  color: var(--ac-color-t2);
}
.ac-marketing-card__hero-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.ac-marketing-card__hero-num {
  font-family: var(--ac-font-display);
  font-size: 22px;
  font-weight: var(--ac-fw-black);
  letter-spacing: var(--ac-tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--ac-color-ink);
  line-height: 1;
}
.ac-marketing-card__hero-lbl {
  font-family: var(--ac-font-mono);
  font-size: 10px;
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
}
/* ---- List rows (shared across all three subsections) ---- */
.ac-marketing-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ac-marketing-card__row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ac-color-line);
  cursor: pointer;
  transition: background .12s ease;
}
.ac-marketing-card__row:last-child { border-bottom: 0; }
.ac-marketing-card__row:hover {
  background: var(--ac-color-paper);
}
/* Playlist artwork — gradient placeholders until real cover-art
   pulls from Spotify. Four variants so the rows feel distinct. */
.ac-marketing-card__art {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  font-weight: var(--ac-fw-bold);
  flex-shrink: 0;
}
.ac-marketing-card__art--gradient-1 { background: linear-gradient(135deg, #2a9d8f, #264653); }
.ac-marketing-card__art--gradient-2 { background: linear-gradient(135deg, #e76f51, #f4a261); }
.ac-marketing-card__art--gradient-3 { background: linear-gradient(135deg, #7c3aed, #2563eb); }
.ac-marketing-card__art--gradient-4 { background: linear-gradient(135deg, #d97706, #b91c1c); }
/* Rolodex avatar — initials chip. */
.ac-marketing-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  display: grid;
  place-items: center;
  font-family: var(--ac-font-mono);
  font-size: 11px;
  font-weight: var(--ac-fw-bold);
  letter-spacing: 0.05em;
  color: var(--ac-color-t2);
  flex-shrink: 0;
}
/* Press-hit date block — DD over MMM, mono. */
.ac-marketing-card__date {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.ac-marketing-card__date-d {
  font-family: var(--ac-font-display);
  font-size: 14px;
  font-weight: var(--ac-fw-black);
  color: var(--ac-color-ink);
  font-variant-numeric: tabular-nums;
}
.ac-marketing-card__date-m {
  font-family: var(--ac-font-mono);
  font-size: 8px;
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-t3);
  font-weight: var(--ac-fw-bold);
  margin-top: 2px;
}
.ac-marketing-card__row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ac-marketing-card__row-title {
  font-size: var(--ac-fs-md);
  font-weight: var(--ac-fw-bold);
  color: var(--ac-color-ink);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-marketing-card__row-meta {
  font-size: var(--ac-fs-xs);
  color: var(--ac-color-t3);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-marketing-card__row-end {
  flex-shrink: 0;
}
/* Pills — fresh (recently updated / responded), ok (steady),
   stale (needs attention), feature/podcast/review (press-hit
   type). Color via brand tokens where possible. */
.ac-marketing-card__pill {
  display: inline-block;
  font-family: var(--ac-font-mono);
  font-size: 10px;
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  font-weight: var(--ac-fw-bold);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--ac-color-line);
  white-space: nowrap;
}
.ac-marketing-card__pill--fresh {
  color: #2a9d8f;
  border-color: rgba(42,157,143,0.35);
  background: rgba(42,157,143,0.08);
}
.ac-marketing-card__pill--ok {
  color: var(--ac-color-t2);
  background: var(--ac-color-paper);
}
.ac-marketing-card__pill--stale {
  color: #e76f51;
  border-color: rgba(231,111,81,0.35);
  background: rgba(231,111,81,0.08);
}
.ac-marketing-card__pill--feature {
  color: #7c3aed;
  border-color: rgba(124,58,237,0.35);
  background: rgba(124,58,237,0.08);
}
.ac-marketing-card__pill--podcast {
  color: #2563eb;
  border-color: rgba(37,99,235,0.35);
  background: rgba(37,99,235,0.08);
}
.ac-marketing-card__pill--review {
  color: var(--ac-color-t2);
  background: var(--ac-color-paper);
}
/* Footer CTA row — two buttons (primary action + ghost
   secondary). Matches the rest of the dash button language. */
.ac-marketing-card__foot {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--ac-color-line);
}
.ac-marketing-card__cta {
  flex: 1;
  appearance: none;
  font-family: var(--ac-font-mono);
  font-size: 11px;
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  font-weight: var(--ac-fw-bold);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--ac-color-ink);
  background: var(--ac-color-ink);
  color: var(--ac-color-surface-base);
  cursor: pointer;
  transition: opacity .15s ease, transform .05s ease;
}
.ac-marketing-card__cta:hover { opacity: 0.88; }
.ac-marketing-card__cta:active { transform: translateY(1px); }
.ac-marketing-card__cta--ghost {
  background: transparent;
  color: var(--ac-color-t2);
  border-color: var(--ac-color-line);
}
.ac-marketing-card__cta--ghost:hover {
  color: var(--ac-color-ink);
  border-color: var(--ac-color-t2);
}

/* Responsive — drop to 2-col at ~1180px, single column below
   980px (when the right-rail card no longer fits beside the
   middle one). */
@media (max-width: 1180px) {
  .ac-marketing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .ac-marketing__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ac-marketing { padding: 20px 18px 16px; }
  .ac-marketing__head { grid-template-columns: 1fr; gap: 12px; align-items: flex-start; }
  .ac-marketing__title { font-size: 26px; }
  .ac-marketing__head-link { align-self: flex-start; }
  .ac-marketing-card__head { grid-template-columns: 1fr; gap: 8px; }
  .ac-marketing-card__hero-stat { flex-direction: row; align-items: baseline; gap: 8px; align-self: flex-start; }
}


/* ═════════════════════════════════════════════════════════════════
   MARKETING TAB — design tokens aliased to AC tokens.
   The Marketing tab was built from a CD mockup using its own token
   names (--canvas / --paper / --ink / --crimson / etc.). Rather
   than search-replace 600+ token references, we alias the mockup
   names to existing --ac-color-* tokens here, scoped to #releases
   so they don't pollute the rest of the app.
   ════════════════════════════════════════════════════════════════ */
#releases {
  /* Surface palette */
  --canvas:        var(--ac-color-bg);
  --canvas-2:      var(--ac-color-glow);
  --paper:         var(--ac-color-paper);
  --paper-2:       var(--ac-color-nested);
  --warm:          var(--ac-color-warm);
  --warm-2:        var(--ac-color-warm-shadow);

  /* Borders */
  --line:          var(--ac-color-line);
  --line-2:        var(--ac-color-line-subtle);
  --line-strong:   var(--ac-color-line-strong);

  /* Text — 5-step ink scale */
  --ink:           var(--ac-color-ink);
  --ink-2:         var(--ac-color-body);
  --ink-3:         var(--ac-color-t2);
  --ink-4:         var(--ac-color-t3);
  --ink-5:         var(--ac-color-muted);

  /* Accent — mockup crimson maps to AC brand red */
  --crimson:       var(--ac-color-accent);
  --crimson-deep:  var(--ac-color-accent-hi);
  --crimson-soft:  var(--ac-color-accent-chip);
  --crimson-wash:  var(--ac-color-accent-wash);

  /* Status */
  --amber:         var(--ac-color-warning);
  --amber-bg:      var(--ac-color-warning-bg);
  --green:         var(--ac-color-success);
  --green-bg:      var(--ac-color-success-bg);
  --blue:          var(--ac-color-info);
  --meta-blue:     #1877f2; /* Meta brand color stays literal */

  /* Type */
  --font-display:  var(--ac-font-display);
  --font-body:     var(--ac-font-body, 'Inter', system-ui, sans-serif);
  --font-mono:     var(--ac-font-mono);

  /* Radii — AC scale: xs(4)/sm(8)/md(12)/lg(16)/xl(20)/2xl(24)/3xl(28).
     Mockup scale: sm(8)/-(14)/lg(22)/xl(28). Map by closest visual match. */
  --radius-sm:     var(--ac-radius-sm, 8px);
  --radius:        var(--ac-radius-md, 14px);
  --radius-lg:     var(--ac-radius-2xl, 22px);
  --radius-xl:     var(--ac-radius-3xl, 28px);
}

/* ─── Ported mockup CSS (every selector scoped to #releases) ────── */

  

  #releases *, #releases *::before, #releases *::after { box-sizing: border-box; }
  #releases html, #releases body { margin: 0; padding: 0; }
  #releases body {
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* ─── SHELL ───────────────────────────────── */
  #releases .page { max-width: 1680px; margin: 0 auto; padding: 28px 40px 48px; }

  /* ─── TOP BAR ─────────────────────────────── */
  #releases .topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 14px; }
  #releases .brand { display: flex; align-items: center; gap: 14px; }
  #releases .brand__mark { width: 44px; height: 44px; }
  #releases .brand__name { font-family: var(--font-display); font-size: 24px; letter-spacing: -0.01em; line-height: 1; color: var(--ink); }
  #releases .brand__welcome { font-size: 12px; color: var(--ink-3); margin-top: 4px; letter-spacing: 0.02em; }
  #releases .brand__welcome b { color: var(--ink); font-weight: 600; }

  #releases .nav { display: flex; gap: 24px; align-items: center; background: var(--paper); border-radius: var(--radius); padding: 14px 22px; box-shadow: 0 2px 8px -4px rgba(20,15,10,0.08); margin-top: 18px; }
  #releases .nav__item { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--ink-4); text-transform: uppercase; padding: 6px 0; cursor: pointer; }
  #releases .nav__item.is-active { color: var(--ink); border-bottom: 2px solid var(--amber); padding-bottom: 4px; }

  #releases .userbar { display: flex; align-items: center; gap: 10px; }
  #releases .role-chip { background: var(--paper); border-radius: var(--radius); padding: 12px 18px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; display: flex; align-items: center; gap: 12px; cursor: pointer; box-shadow: 0 2px 8px -4px rgba(20,15,10,0.08); }
  #releases .role-chip::after { content: "▾"; font-size: 9px; color: var(--ink-4); }
  #releases .icon-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--paper); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px -4px rgba(20,15,10,0.08); color: var(--ink-3); }
  #releases .icon-btn svg { width: 16px; height: 16px; }
  #releases .user-pill { display: flex; align-items: center; gap: 12px; background: var(--paper); border-radius: var(--radius); padding: 6px 18px 6px 6px; box-shadow: 0 2px 8px -4px rgba(20,15,10,0.08); cursor: pointer; }
  #releases .user-pill__avatar { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #8a5b2b, #2a1810); display: flex; align-items: center; justify-content: center; font-size: 14px; }
  #releases .user-pill__name { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--ink); }
  #releases .user-pill::after { content: "▾"; font-size: 9px; color: var(--ink-4); }

  #releases .nav-divider { height: 2px; background: linear-gradient(90deg, transparent 0%, var(--amber) 8%, var(--amber) 92%, transparent 100%); opacity: 0.45; }

  /* ─── SECTION SCAFFOLD ───────────────────── */
  #releases .section { margin-top: 32px; }
  #releases .section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
  #releases .section__eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4); }
  #releases .section__title { font-family: var(--font-display); font-size: 32px; letter-spacing: -0.02em; line-height: 1; margin: 8px 0 4px; }
  #releases .section__sub { font-size: 13px; color: var(--ink-3); max-width: 620px; line-height: 1.5; }
  #releases .section__tools { display: flex; gap: 8px; align-items: center; }

  /* shared buttons + pills */
  #releases .btn-pill { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); cursor: pointer; transition: all 120ms; display: inline-flex; align-items: center; gap: 6px; }
  #releases .btn-pill:hover { border-color: var(--line-strong); color: var(--ink); }
  #releases .btn-pill--dark { background: var(--ink); color: #f5e7d4; border-color: var(--ink); }
  #releases .btn-pill--dark:hover { background: var(--ink-2); color: #fff; }
  #releases .btn-pill--crimson { background: var(--crimson); color: #fff; border-color: var(--crimson); }
  #releases .btn-pill--crimson:hover { background: var(--crimson-deep); color: #fff; }
  #releases .btn-pill--ghost { background: transparent; }
  #releases .btn-pill--sm { padding: 6px 12px; font-size: 10px; }

  #releases .pill { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; gap: 5px; }
  #releases .pill--live { background: var(--green-bg); color: var(--green); }
  #releases .pill--live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
  #releases .pill--upcoming { background: var(--amber-bg); color: var(--amber); }
  #releases .pill--upcoming::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }
  #releases .pill--paused { background: var(--warm); color: var(--ink-3); }
  #releases .pill--draft { background: var(--amber-bg); color: var(--amber); }
  #releases .pill--ended { background: var(--warm-2); color: var(--ink-4); }
  #releases .pill--fresh { background: var(--green-bg); color: var(--green); }
  #releases .pill--ok { background: var(--warm); color: var(--ink-3); }
  #releases .pill--stale { background: var(--warm-2); color: var(--ink-4); }
  #releases .pill--feature { background: var(--crimson-soft); color: var(--crimson); }
  #releases .pill--podcast { background: var(--amber-bg); color: var(--amber); }
  #releases .pill--review { background: var(--warm); color: var(--ink-2); }

  /* ═══════════════════════════════════════════════
     SLIM HERO — active release strip
     ═══════════════════════════════════════════════ */
  #releases .hero {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    color: #fff;
    isolation: isolate;
    box-shadow: 0 20px 50px -30px rgba(20,15,10,0.4);
    margin-top: 24px;
  }
  #releases .hero__bg {
    position: absolute; inset: 0; z-index: -2;
    background:
      radial-gradient(ellipse at 70% 30%, rgba(180,90,70, 0.45) 0%, transparent 55%),
      radial-gradient(ellipse at 15% 80%, rgba(120,40,50, 0.45) 0%, transparent 50%),
      linear-gradient(135deg, #2a1410 0%, #1a0908 60%, #0a0504 100%);
  }
  #releases .hero__bg::before {
    content: ""; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.2  0 0 0 0 0.15  0 0 0 0.4 0'/></filter><rect width='400' height='300' filter='url(%23n)' opacity='0.5'/></svg>");
    opacity: 0.5; mix-blend-mode: overlay;
  }
  #releases .hero__inner {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    gap: 32px;
    padding: 28px 32px;
    align-items: center;
  }
  #releases .hero__art {
    width: 180px; height: 180px; border-radius: 14px;
    background: linear-gradient(135deg, #f5b48a 0%, #c8503a 35%, #6a1d2a 70%, #1a0810 100%);
    position: relative; overflow: hidden;
    box-shadow: 0 20px 40px -16px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);
  }
  #releases .hero__art::before {
    display: none; /* stripe overlay killed — was obscuring real artwork/thumbnails */
    /* background-image: repeating-linear-gradient(115deg, rgba(0,0,0,0.05) 0 12px, transparent 12px 24px);
  */
  }
  #releases .hero__art-mark {
    position: absolute; left: 16px; bottom: 14px; right: 16px;
    font-family: var(--font-display); color: #fff; line-height: 0.85; letter-spacing: -0.03em;
  }
  #releases .hero__art-mark .top { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; opacity: 0.85; font-family: var(--font-mono); margin-bottom: 8px; }
  #releases .hero__art-mark .big { font-size: 26px; }
  #releases .hero__art-mark .small { font-size: 9px; font-family: var(--font-mono); margin-top: 8px; opacity: 0.75; letter-spacing: 0.12em; text-transform: uppercase; }

  #releases .hero__main { min-width: 0; }
  #releases .hero__eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.7); display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  #releases .hero__eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--crimson); box-shadow: 0 0 0 4px rgba(139,26,43,0.18); animation: pulse 2s infinite; }
  @keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(139,26,43,0.06); } }
  #releases .hero__title { font-family: var(--font-display); font-size: 44px; line-height: 0.95; letter-spacing: -0.02em; margin: 0; }
  #releases .hero__title em { font-style: italic; font-family: 'Inter', serif; font-weight: 400; color: rgba(255,255,255,0.6); font-size: 26px; }
  #releases .hero__meta { display: flex; gap: 18px; align-items: center; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
  #releases .hero__meta .sep { width: 1px; height: 11px; background: rgba(255,255,255,0.18); }
  /* Rollout-prep count pill: shows X/Y in the hero meta line. Colors
     shift as the user works through the checklist — empty → muted,
     in-progress → bright white, complete → green. */
  #releases .hero__meta-prep { color: rgba(255,255,255,0.85); }
  #releases .hero__meta-prep b { color: #fff; font-weight: 700; }
  #releases .hero__meta-prep.is-empty { color: rgba(255,255,255,0.45); }
  #releases .hero__meta-prep.is-empty b { color: rgba(255,255,255,0.65); }
  #releases .hero__meta-prep.is-complete { color: #88d99a; }
  #releases .hero__meta-prep.is-complete b { color: #88d99a; }

  #releases .hero__stats { display: flex; gap: 28px; padding: 16px 0 0; margin-top: 18px; border-top: 1px solid rgba(255,255,255,0.12); }
  #releases .hero__stat .l { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
  #releases .hero__stat .v { font-family: var(--font-display); font-size: 24px; letter-spacing: -0.02em; line-height: 1; margin-top: 4px; }
  #releases .hero__stat .s { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.55); margin-top: 3px; letter-spacing: 0.04em; }
  #releases .hero__stat .s.up { color: #88d99a; }

  #releases .hero__side { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; min-width: 220px; }
  #releases .hero__countdown { text-align: right; }
  #releases .hero__countdown .num { font-family: var(--font-display); font-size: 68px; line-height: 0.85; letter-spacing: -0.04em; color: #fff; }
  #releases .hero__countdown .lbl { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 4px; }
  #releases .hero__countdown .date { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 2px; letter-spacing: 0.04em; }
  #releases .hero__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  #releases .hero__actions .btn-pill { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.12); }
  #releases .hero__actions .btn-pill:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.24); }
  #releases .hero__actions .btn-pill--accent { background: var(--crimson); border-color: var(--crimson); color: #fff; }
  #releases .hero__actions .btn-pill--accent:hover { background: var(--crimson-deep); border-color: var(--crimson-deep); }

  /* ═══════════════════════════════════════════════
     ALL RELEASES — the post-release work area
     ═══════════════════════════════════════════════ */
  :is(#releases,#releaseshub) .rls-list { display: flex; flex-direction: column; gap: 10px; }
  :is(#releases,#releaseshub) .rls-row {
    background: var(--paper);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-2);
    box-shadow: 0 8px 28px -22px rgba(20,15,10,0.18);
    overflow: hidden;
  }
  /* .is-active used to draw a dark border to flag the active release;
     now that rows accordion open/close, the border read heavy. Keep
     just the subtle lift shadow as the active hint. */
  :is(#releases,#releaseshub) .rls-row.is-active { box-shadow: 0 12px 32px -20px rgba(20,15,10,0.28); }
  :is(#releases,#releaseshub) .rls-row__head {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto auto auto 28px;
    gap: 16px;
    align-items: center;
    padding: 14px 18px;
    cursor: pointer;
    transition: background 120ms;
  }
  :is(#releases,#releaseshub) .rls-row__head:hover { background: var(--warm); }
  :is(#releases,#releaseshub) .rls-row.is-open .rls-row__head { border-bottom: 1px solid var(--line-2); }
  :is(#releases,#releaseshub) .rls-row__art {
    width: 56px; height: 56px; border-radius: 10px;
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #2a1410, #6a1d2a);
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
  }
  :is(#releases,#releaseshub) .rls-row__art::before {
    display: none; /* stripe overlay killed — was obscuring real artwork/thumbnails */
    /* background-image: repeating-linear-gradient(115deg, rgba(0,0,0,0.06) 0 6px, transparent 6px 12px);
  */
  }
  :is(#releases,#releaseshub) .rls-row__art-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 14px; color: rgba(255,255,255,0.92); letter-spacing: -0.02em; text-align: center; line-height: 0.9; padding: 4px; }
  :is(#releases,#releaseshub) .rls-row__art.art-1 { background: linear-gradient(135deg, #f5b48a, #c8503a, #6a1d2a); }
  :is(#releases,#releaseshub) .rls-row__art.art-2 { background: linear-gradient(135deg, #b91c1c, #1a0908); }
  :is(#releases,#releaseshub) .rls-row__art.art-3 { background: linear-gradient(135deg, #2a3a8c, #0e1430); }
  :is(#releases,#releaseshub) .rls-row__art.art-4 { background: linear-gradient(135deg, #2a9d8f, #19425a); }
  :is(#releases,#releaseshub) .rls-row__art.art-5 { background: linear-gradient(135deg, #d97706, #82310c); }
  :is(#releases,#releaseshub) .rls-row__art.art-6 { background: linear-gradient(135deg, #7c3aed, #2563eb, #0e1430); }
  :is(#releases,#releaseshub) .rls-row__art.art-7 { background: linear-gradient(135deg, #f4a261, #c8503a); }

  :is(#releases,#releaseshub) .rls-row__title { min-width: 0; }
  :is(#releases,#releaseshub) .rls-row__name { font-size: 16px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 10px; }
  :is(#releases,#releaseshub) .rls-row__meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); margin-top: 3px; letter-spacing: 0.04em; }
  :is(#releases,#releaseshub) .rls-row__mini-stats { display: flex; gap: 24px; align-items: center; padding-right: 8px; }
  :is(#releases,#releaseshub) .rls-row__mini { text-align: right; }
  :is(#releases,#releaseshub) .rls-row__mini .v { font-family: var(--font-display); font-size: 17px; letter-spacing: -0.01em; line-height: 1; color: var(--ink); }
  :is(#releases,#releaseshub) .rls-row__mini .l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--ink-4); font-weight: 700; text-transform: uppercase; margin-top: 4px; }
  :is(#releases,#releaseshub) .rls-row__chevron { width: 28px; height: 28px; border-radius: 50%; background: var(--warm); display: flex; align-items: center; justify-content: center; transition: transform 200ms; color: var(--ink-3); }
  :is(#releases,#releaseshub) .rls-row.is-open .rls-row__chevron { transform: rotate(180deg); background: var(--ink); color: #fff; }

  :is(#releases,#releaseshub) .rls-row__body { padding: 14px 18px 16px; display: none; }
  :is(#releases,#releaseshub) .rls-row.is-open .rls-row__body { display: block; }

  /* Top strip — URL + 3 inline mini stats on one row, much more compact */
  :is(#releases,#releaseshub) .rls-toprow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 16px; align-items: center; padding: 8px 12px; background: var(--warm); border-radius: 10px; }
  :is(#releases,#releaseshub) .rls-toprow__url { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  :is(#releases,#releaseshub) .rls-toprow__stat { display: flex; flex-direction: column; align-items: flex-end; padding-left: 16px; border-left: 1px solid var(--line-2); }
  :is(#releases,#releaseshub) .rls-toprow__stat .v { font-family: var(--font-display); font-size: 16px; letter-spacing: -0.01em; line-height: 1; color: var(--ink); }
  :is(#releases,#releaseshub) .rls-toprow__stat .l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--ink-4); font-weight: 700; text-transform: uppercase; margin-top: 3px; }
  :is(#releases,#releaseshub) .rls-toprow__stat .l .up { color: var(--green); }
  :is(#releases,#releaseshub) .rls-url__copy { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); background: var(--paper); border: 1px solid var(--line-2); padding: 5px 11px; border-radius: 999px; cursor: pointer; flex-shrink: 0; }
  :is(#releases,#releaseshub) .rls-url__copy:hover { color: var(--ink); border-color: var(--line-strong); }

  /* Body grid — DSPs (left) + Checklist (right). Live releases have no
     checklist so they get the single-column variant. */
  :is(#releases,#releaseshub) .rls-body-grid { display: grid; grid-template-columns: 1fr 320px; gap: 16px; margin-top: 12px; }
  :is(#releases,#releaseshub) .rls-body-grid.single { grid-template-columns: 1fr; }

  /* DSP click bars — 2-column compact grid */
  :is(#releases,#releaseshub) .rls-dsps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; align-content: start; }
  :is(#releases,#releaseshub) .rls-dsps.full { grid-template-columns: 1fr 1fr 1fr; }
  :is(#releases,#releaseshub) .rls-dsp { display: grid; grid-template-columns: 24px minmax(0, 1fr) 56px 38px; align-items: center; gap: 10px; padding: 6px 4px; }
  :is(#releases,#releaseshub) .rls-dsp__icon { width: 24px; height: 24px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: #fff; }
  :is(#releases,#releaseshub) .rls-dsp__icon.spot { background: #1db954; }
  :is(#releases,#releaseshub) .rls-dsp__icon.apl { background: #fa233b; }
  :is(#releases,#releaseshub) .rls-dsp__icon.amz { background: #232f3e; }
  :is(#releases,#releaseshub) .rls-dsp__icon.ytm { background: #ff0000; }
  :is(#releases,#releaseshub) .rls-dsp__icon.tdl { background: #000; }
  :is(#releases,#releaseshub) .rls-dsp__icon.bnd { background: #629aa9; }
  :is(#releases,#releaseshub) .rls-dsp__name { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :is(#releases,#releaseshub) .rls-dsp__bar-wrap { grid-column: 2 / 3; height: 4px; background: rgba(40,20,15,0.06); border-radius: 2px; overflow: hidden; position: relative; }
  :is(#releases,#releaseshub) .rls-dsp__bar { height: 100%; border-radius: 2px; background: var(--ink); width: var(--p, 0%); }
  :is(#releases,#releaseshub) .rls-dsp__bar.spot { background: #1db954; }
  :is(#releases,#releaseshub) .rls-dsp__bar.apl { background: #fa233b; }
  :is(#releases,#releaseshub) .rls-dsp__bar.amz { background: #232f3e; }
  :is(#releases,#releaseshub) .rls-dsp__bar.ytm { background: #ff0000; }
  :is(#releases,#releaseshub) .rls-dsp__bar.tdl { background: #000; }
  :is(#releases,#releaseshub) .rls-dsp__bar.bnd { background: #629aa9; }
  /* Stacked: top row = icon + name + count + pct, bottom row = bar (spans cols 2-4) */
  :is(#releases,#releaseshub) .rls-dsp { row-gap: 4px; column-gap: 10px; grid-template-rows: auto auto; }
  :is(#releases,#releaseshub) .rls-dsp__icon { grid-row: 1 / 3; }
  :is(#releases,#releaseshub) .rls-dsp__bar-wrap { grid-column: 2 / 5; grid-row: 2 / 3; }
  :is(#releases,#releaseshub) .rls-dsp__count { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; grid-row: 1; }
  :is(#releases,#releaseshub) .rls-dsp__pct { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); text-align: right; font-variant-numeric: tabular-nums; grid-row: 1; }

  /* Fix DSP name placement — without explicit grid-column, the name
     auto-places into whatever cell is left after icon/count/pct take
     their explicit slots, which on the workspace's narrower column
     ends up being col 4 (the 38px pct column). Pin name to col 2 so
     it sits right next to the icon, where the design intends. */
  :is(#releases,#releaseshub) .rls-dsp__name { grid-column: 2 / 3; grid-row: 1; }

  /* SVG variant of the DSP icon chip. The letter version uses a flat
     color background with a single letter; the SVG version is a
     transparent tile with the brand mark filling it (using full-bleed
     icons from the acBrandIcons registry).

     IMPORTANT specificity note: we chain .rls-dsp__icon.rls-dsp__icon--svg
     so this rule beats the brand-color backgrounds on .spot/.ytm/.apl
     etc. (those are also two-class selectors). Without the chain, the
     YouTube SVG renders red-on-red — invisible.

     IMPORTANT sizing note: Apple Music and Amazon Music SVGs ship with
     explicit width/height attrs (width="90" height="90"). In flex
     containers, Chrome won't constrain via `width: 100%` alone — the
     img's intrinsic size wins. We use explicit width/height: 24px on
     the img plus max-width/height: 100% to handle any future resize. */
  :is(#releases,#releaseshub) .rls-dsp__icon.rls-dsp__icon--svg {
    background: transparent;
    padding: 0;
    min-width: 0;
    min-height: 0;
  }
  :is(#releases,#releaseshub) .rls-dsp__icon.rls-dsp__icon--svg img {
    width: 24px;
    height: 24px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }

  /* Action toolbar in expanded row */
  :is(#releases,#releaseshub) .rls-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); align-items: center; }
  :is(#releases,#releaseshub) .rls-actions .spacer { flex: 1; }
  :is(#releases,#releaseshub) .rls-actions .btn-pill { padding: 7px 13px; font-size: 10px; }
  :is(#releases,#releaseshub) .rls-actions .btn-pill--boost { background: var(--meta-blue); color: #fff; border-color: var(--meta-blue); }
  :is(#releases,#releaseshub) .rls-actions .btn-pill--boost:hover { background: #1063c8; border-color: #1063c8; color: #fff; }
  :is(#releases,#releaseshub) .rls-actions .btn-pill--danger { color: var(--crimson); border-color: var(--crimson-soft); }
  :is(#releases,#releaseshub) .rls-actions .btn-pill--danger:hover { background: var(--crimson-soft); border-color: var(--crimson); }

  /* Rollout checklist — customizable, with assignees */
  :is(#releases,#releaseshub) .rls-checklist { background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; }
  :is(#releases,#releaseshub) .rls-checklist__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line-2); }
  :is(#releases,#releaseshub) .rls-checklist__title { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
  :is(#releases,#releaseshub) .rls-checklist__count { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--ink); letter-spacing: 0.06em; }
  :is(#releases,#releaseshub) .rls-checklist__customize { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); background: transparent; border: none; cursor: pointer; padding: 0; }
  :is(#releases,#releaseshub) .rls-checklist__customize:hover { color: var(--ink); }
  :is(#releases,#releaseshub) .rls-checklist__list { display: flex; flex-direction: column; gap: 1px; }
  /* Grid bumped from 4 to 5 columns to fit the × delete button on
     the right. The × stays hidden until the row is hovered so the
     resting state stays clean. */
  :is(#releases,#releaseshub) .rls-check {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto auto 16px;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--ink-2);
    padding: 6px 2px;
    border-bottom: 1px dashed var(--line-2);
  }
  :is(#releases,#releaseshub) .rls-check:last-child { border-bottom: 0; }
  :is(#releases,#releaseshub) .rls-check .box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
  :is(#releases,#releaseshub) .rls-check.done .box { background: var(--green); border-color: var(--green); }
  :is(#releases,#releaseshub) .rls-check.done .box::after { content: "✓"; font-size: 11px; color: #fff; font-weight: 700; }
  :is(#releases,#releaseshub) .rls-check.done .task { color: var(--ink-4); text-decoration: line-through; text-decoration-color: var(--ink-5); }
  :is(#releases,#releaseshub) .rls-check .task { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :is(#releases,#releaseshub) .rls-check__assignee { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 8px 2px 4px; cursor: pointer; }
  /* Avatar chip — gradient driven by the --avatar-from/-to custom
     properties set inline per assignee. Same palette algorithm as the
     contacts page so an assignee carries the same visual identity.
     A contact photo (when available) renders as an absolutely-
     positioned img over the gradient; if the img errors it self-
     removes (onerror) and the initials underneath show through. */
  :is(#releases,#releaseshub) .rls-check__assignee .av {
    position: relative;
    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;
    overflow: hidden;
    background: linear-gradient(135deg, var(--avatar-from, var(--ink-4)), var(--avatar-to, var(--ink-4)));
  }
  :is(#releases,#releaseshub) .rls-check__assignee .av img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  :is(#releases,#releaseshub) .rls-check__assignee .av-initials {
    position: relative;
    z-index: 0;
  }
  :is(#releases,#releaseshub) .rls-check__assignee .av img + .av-initials {
    display: none;
  }
  :is(#releases,#releaseshub) .rls-check__assignee .av.a-jm { background: #c8503a; }
  :is(#releases,#releaseshub) .rls-check__assignee .av.a-wh { background: #2a3a8c; }
  :is(#releases,#releaseshub) .rls-check__assignee .av.a-bp { background: #2a9d8f; }
  :is(#releases,#releaseshub) .rls-check__assignee .av.a-kr { background: #d97706; }
  :is(#releases,#releaseshub) .rls-check__assignee.unassigned { color: var(--ink-4); border-style: dashed; padding: 2px 8px; }
  :is(#releases,#releaseshub) .rls-check__assignee.unassigned .av { display: none; }
  :is(#releases,#releaseshub) .rls-check__date { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); letter-spacing: 0.04em; min-width: 42px; text-align: right; }
  :is(#releases,#releaseshub) .rls-check.warn .box { border-color: var(--amber); }
  :is(#releases,#releaseshub) .rls-check.warn .rls-check__date { color: var(--amber); }
  :is(#releases,#releaseshub) .rls-checklist__add { width: 100%; border: 1px dashed var(--line-strong); background: transparent; padding: 7px; border-radius: 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); cursor: pointer; margin-top: 8px; }

  /* ── Rollout checklist · To-do widget visual parity ─────────
     The rollout checklist (:is(#releases,#releaseshub) .rls-checklist) is the per-
     release task list that lives on the Marketing tab. We're
     consolidating around the To-do widget aesthetic across all
     surfaces, so these overrides bring rollout-checklist rows
     closer to the .tasks__row style used in dashboards:
       - bigger row padding (10px 4px vs 6px 2px)
       - larger checkbox (18px vs 16px)
       - larger task text (13px vs 12.5px)
       - taller assignee chip with bigger avatar
       - cleaner hover state
     Wrapped in a more-specific selector chain to win the cascade
     against the original rules above. */
  :is(#releases,#releaseshub) .rls-checklist {
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--paper-2);
  }
  :is(#releases,#releaseshub) .rls-checklist__head {
    padding-bottom: 12px;
    margin-bottom: 6px;
  }
  :is(#releases,#releaseshub) .rls-checklist__title {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ink-3);
  }
  :is(#releases,#releaseshub) .rls-checklist__count {
    font-size: 11px;
    color: var(--ink-2);
  }
  :is(#releases,#releaseshub) .rls-check {
    /* Assignee column killed — assignment now lives in the drawer
       only. Grid drops from 5 cols to 3: check | task | date. The
       × delete button overlays the date column on hover (positioned
       absolutely) so it doesn't reserve dead space when not visible. */
    position: relative;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 12px;
    font-size: 13px;
    color: var(--ink);
    padding: 9px 2px;
    border-bottom: 1px solid var(--line-2);
    transition: background 120ms ease;
  }
  :is(#releases,#releaseshub) .rls-check__assignee { display: none !important; }
  :is(#releases,#releaseshub) .rls-check__del {
    position: absolute;
    top: 50%;
    right: -22px;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 120ms ease;
  }
  :is(#releases,#releaseshub) .rls-check:hover .rls-check__del { opacity: 1; }
  /* "Due by" column header label that replaced the old Customize
     button. Sits in the header row above the date column so the
     dates have a meaningful label. */
  :is(#releases,#releaseshub) .rls-checklist__due-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  :is(#releases,#releaseshub) .rls-check:hover {
    background: rgba(0,0,0,0.012);
  }
  :is(#releases,#releaseshub) .rls-check .box {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border-width: 1.5px;
  }
  :is(#releases,#releaseshub) .rls-check.done .box::after {
    font-size: 12px;
  }
  :is(#releases,#releaseshub) .rls-check .task {
    font-weight: 600;
  }
  :is(#releases,#releaseshub) .rls-check__assignee {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px 4px 4px;
    gap: 6px;
    border-radius: 999px;
  }
  :is(#releases,#releaseshub) .rls-check__assignee .av {
    width: 20px;
    height: 20px;
    font-size: 9px;
  }
  :is(#releases,#releaseshub) .rls-check__assignee.unassigned {
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    color: var(--ink-3);
    border-style: dashed;
  }
  :is(#releases,#releaseshub) .rls-check__date {
    font-size: 11px;
    color: var(--ink-3);
    min-width: 48px;
    letter-spacing: 0.02em;
  }
  :is(#releases,#releaseshub) .rls-check.warn .rls-check__date {
    color: var(--amber);
    font-weight: 600;
  }
  /* "+ Add task" button at bottom — match the To-do widget's
     "+ New task" pill style instead of a dashed full-width button. */
  :is(#releases,#releaseshub) .rls-checklist__add {
    width: auto;
    align-self: flex-start;
    padding: 7px 16px;
    border: none;
    background: var(--ink);
    color: var(--paper);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    margin-top: 12px;
    cursor: pointer;
  }
  :is(#releases,#releaseshub) .rls-checklist__add:hover { opacity: 0.85; }

  /* Checkbox is now a button — reset appearance so it matches the
     prior visual but gains a real cursor + a11y role. */
  :is(#releases,#releaseshub) .rls-check .box {
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    background: transparent;
    border: 1.5px solid var(--line-strong);
    border-radius: 4px;
    cursor: pointer;
  }
  :is(#releases,#releaseshub) .rls-check.done .box {
    background: var(--green);
    border-color: var(--green);
  }
  /* Task label + date are clickable to edit — show that with a
     subtle underline-on-hover. */
  :is(#releases,#releaseshub) .rls-check .task,
  :is(#releases,#releaseshub) .rls-check__date {
    cursor: pointer;
  }
  :is(#releases,#releaseshub) .rls-check .task:hover,
  :is(#releases,#releaseshub) .rls-check__date:hover {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  /* The .rls-check__date is now a <button> — strip default styling
     so it reads as a plain span until hover. */
  :is(#releases,#releaseshub) .rls-check__date {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-align: right;
  }
  /* × delete — hidden until row hover, then small + muted. Hover
     pumps the color so the click target reads as destructive. */
  :is(#releases,#releaseshub) .rls-check__del {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    width: 16px;
    height: 16px;
    padding: 0;
    line-height: 1;
    font-size: 14px;
    color: var(--ink-4);
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, color .12s ease;
  }
  :is(#releases,#releaseshub) .rls-check:hover .rls-check__del { opacity: 1; }
  :is(#releases,#releaseshub) .rls-check__del:hover { color: var(--crimson); }
  /* Assignee chip already had cursor:pointer from the original rule.
     Add a hover state so users know it's clickable. */
  :is(#releases,#releaseshub) .rls-check__assignee:hover {
    border-color: var(--line-strong);
    color: var(--ink);
  }
  /* Customize button — also clickable, give it a hover so it reads
     as live affordance not flat label. */
  :is(#releases,#releaseshub) .rls-checklist__customize:hover {
    color: var(--ink);
  }
  :is(#releases,#releaseshub) .rls-checklist__add:hover { border-color: var(--ink); color: var(--ink); }

  /* ═══════════════════════════════════════════════
     META ADS
     ═══════════════════════════════════════════════ */
  #releases .ads-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px; }
  #releases .ads-stat { background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 12px 14px; position: relative; }
  #releases .ads-stat .l { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); }
  #releases .ads-stat .v { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; line-height: 1; margin-top: 6px; }
  #releases .ads-stat .s { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); margin-top: 4px; letter-spacing: 0.04em; }
  #releases .ads-stat .s.up { color: var(--green); }
  #releases .ads-stat .s.down { color: var(--crimson); }
  #releases .ads-stat .spark { position: absolute; right: 14px; bottom: 14px; opacity: 0.6; }

  /* Stacked layout: audience builder full-width on top, campaigns
     full-width below. Previously 2-column (campaigns left, audience
     right) — moved to single column per Ryan's request so each section
     gets the full canvas. `order` flips the visual order without
     having to reorganize the underlying HTML. */
  #releases .ads-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
  #releases .ads-grid .ads-audience  { order: 1; }
  #releases .ads-grid .ads-campaigns { order: 2; }
  #releases .ads-campaigns { background: var(--paper); border-radius: var(--radius-lg); border: 1px solid var(--line-2); box-shadow: 0 8px 28px -22px rgba(20,15,10,0.18); overflow: hidden; }
  #releases .ads-campaigns__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
  #releases .ads-campaigns__title { display: flex; gap: 12px; align-items: baseline; }
  #releases .ads-campaigns__title h3 { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; margin: 0; }
  #releases .ads-campaigns__title .count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); letter-spacing: 0.12em; }
  #releases .ads-campaigns__filters { display: flex; gap: 4px; padding: 3px; background: var(--warm); border-radius: 999px; }
  #releases .ads-campaigns__filter { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; border: none; background: transparent; color: var(--ink-4); cursor: pointer; }
  #releases .ads-campaigns__filter.is-active { background: var(--paper); color: var(--ink); box-shadow: 0 2px 6px -3px rgba(20,15,10,0.2); }

  /* Scroll container — keep the campaigns table at ~8 visible rows
     and let the rest scroll inside. Sticky thead so the column labels
     stay pinned while you scroll. Row ≈ 68px → 8 × 68 + 36 header = 580px. */
  #releases .ads-campaigns-scroll { max-height: 580px; overflow-y: auto; overflow-x: hidden; }
  #releases .ads-campaigns-scroll .camp-table thead th { position: sticky; top: 0; background: var(--paper); z-index: 1; box-shadow: inset 0 -1px 0 var(--line-2); }
  /* Subtle scrollbar styling so it's not an OS-default eyesore. */
  #releases .ads-campaigns-scroll::-webkit-scrollbar { width: 8px; }
  #releases .ads-campaigns-scroll::-webkit-scrollbar-thumb { background: rgba(20,15,10,0.18); border-radius: 4px; }
  #releases .ads-campaigns-scroll::-webkit-scrollbar-thumb:hover { background: rgba(20,15,10,0.28); }
  #releases .ads-campaigns-scroll::-webkit-scrollbar-track { background: transparent; }

  /* Visual polish — row breathing room + thumbnail tile + hover. */
  #releases .camp-table td { padding-top: 12px; padding-bottom: 12px; transition: background 120ms ease; }
  #releases .camp-table tbody tr:hover td { background: var(--warm); }
  #releases .camp-name { display: flex; align-items: center; gap: 14px; }
  #releases .camp-thumb {
    position: relative;
    width: 44px; height: 44px;
    flex: 0 0 44px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--warm);
    box-shadow: 0 1px 2px rgba(20,15,10,0.06), inset 0 0 0 1px rgba(20,15,10,0.04);
  }
  #releases .camp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Letter monogram — shown on the gradient-fallback path; hidden when
     a real creative loaded. */
  #releases .camp-thumb__letter {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: var(--font-display);
    font-size: 18px; letter-spacing: -0.01em; font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
    opacity: 0;
  }
  #releases .camp-thumb.is-fallback .camp-thumb__letter { opacity: 1; }
  #releases .camp-name__body { min-width: 0; flex: 1; }
  #releases .camp-name__title { font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #releases .camp-name__sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); margin-top: 3px; letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Brand SVG icons for the Places column — replaces the IG/FB
     box pills with proper Instagram + Facebook glyphs. */
  #releases .camp-platforms { display: inline-flex; align-items: center; gap: 6px; }
  #releases .camp-plat-svg { width: 22px; height: 22px; display: block; border-radius: 5px; }

  /* Tighter status pills — small, neutral, status-coded. */
  #releases .camp-name .pill { flex-shrink: 0; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; }
  #releases .camp-name .pill--live   { background: rgba(34,139,87, 0.12); color: #1f7c4e; }
  #releases .camp-name .pill--paused { background: rgba(0,0,0,0.06); color: var(--ink-4); }
  #releases .camp-name .pill--ended  { background: rgba(190,55,55, 0.10); color: #b14040; }
  #releases .camp-name .pill--draft  { background: rgba(255,167,38, 0.14); color: #b86d00; }
  #releases .camp-table { width: 100%; border-collapse: collapse; }
  #releases .camp-table th { text-align: left; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); padding: 8px 14px; border-bottom: 1px solid var(--line-2); }
  #releases .camp-table th.r { text-align: right; }
  #releases .camp-table td { padding: 8px 14px; border-bottom: 1px solid var(--line-2); font-size: 12.5px; vertical-align: middle; }
  #releases .camp-table tbody tr:last-child td { border-bottom: 0; }
  #releases .camp-table tbody tr:hover td { background: var(--warm); }
  #releases .camp-table td.r { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  #releases .camp-table td.r .v { font-weight: 700; color: var(--ink); }
  #releases .camp-table td.r .d { font-size: 9.5px; color: var(--ink-4); margin-top: 1px; letter-spacing: 0.06em; }
  #releases .camp-table td.r .d.up { color: var(--green); }
  #releases .camp-table td.r .d.down { color: var(--crimson); }
  #releases .camp-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
  #releases .camp-name__art { width: 28px; height: 28px; border-radius: 5px; flex-shrink: 0; background: linear-gradient(135deg, var(--crimson), var(--ink)); position: relative; overflow: hidden; }
  #releases .camp-name__art.boost { background: linear-gradient(135deg, #f5b48a, #c8503a, #6a1d2a); }
  #releases .camp-name__art.reach { background: linear-gradient(135deg, #2a9d8f, #264653); }
  #releases .camp-name__art.video { background: linear-gradient(135deg, #d97706, #b91c1c); }
  #releases .camp-name__art.lookalike { background: linear-gradient(135deg, #7c3aed, #2563eb); }
  #releases .camp-name__art.retarget { background: linear-gradient(135deg, #b91c1c, #1a0908); }
  #releases .camp-name__art.test { background: linear-gradient(135deg, #f4a261, #e76f51); position: relative; }
  #releases .camp-name__art.test::after { content: "A/B"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; color: #fff; letter-spacing: 0.04em; }
  #releases .camp-name__body { min-width: 0; }
  #releases .camp-name__title { font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; line-height: 1.2; }
  #releases .camp-name__sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); margin-top: 2px; letter-spacing: 0.02em; line-height: 1.3; }
  #releases .camp-name__sub .rls-tag { color: var(--ink-2); font-weight: 700; }
  #releases .camp-objective { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; white-space: nowrap; }
  #releases .camp-objective .ic { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
  #releases .camp-objective .ic.conv { background: var(--crimson); }
  #releases .camp-objective .ic.reach { background: var(--blue); }
  #releases .camp-objective .ic.video { background: var(--amber); }
  #releases .camp-objective .ic.traffic { background: var(--green); }
  #releases .camp-objective .ic.streams { background: #1db954; }

  #releases .camp-platforms { display: flex; gap: 4px; }
  #releases .camp-plat { width: 22px; height: 22px; border-radius: 5px; background: var(--warm); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--ink-3); letter-spacing: 0; }
  #releases .camp-plat.ig { background: linear-gradient(135deg, #f4a261, #e76f51); color: #fff; }
  #releases .camp-plat.fb { background: var(--meta-blue); color: #fff; }
  #releases .camp-plat.au { background: var(--ink); color: #fff; }
  #releases .camp-plat.re { background: var(--warm-2); color: var(--ink-3); }

  #releases .camp-bar { background: var(--warm-2); height: 4px; border-radius: 2px; margin-top: 8px; overflow: hidden; position: relative; }
  #releases .camp-bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: var(--ink); border-radius: 2px; }
  #releases .camp-bar.warn::after { background: var(--amber); }
  #releases .camp-bar.crit::after { background: var(--crimson); }

  /* Row-level Manage controls — Activate / Pause / Budget / Archive.
     Inline 24x24 buttons with platform-pill aesthetic. */
  #releases .camp-actions {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
  }
  #releases .camp-action {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    color: var(--ink-3);
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  }
  #releases .camp-action:hover {
    background: var(--warm-2);
    border-color: rgba(0,0,0,0.24);
    color: var(--ink);
  }
  #releases .camp-action--go { color: #1f7c4e; border-color: rgba(31,124,78,0.30); }
  #releases .camp-action--go:hover { background: rgba(31,124,78,0.10); color: #1f7c4e; }
  #releases .camp-action--stop { color: #b14040; }
  #releases .camp-action--stop:hover { background: rgba(177,64,64,0.10); border-color: rgba(177,64,64,0.30); color: #b14040; }
  /* Two-click confirm state for the delete button. After first
     click the button shows "Confirm?" with a flashed red background.
     Second click within 4s actually archives; otherwise the button
     reverts to the X icon on timeout. */
  #releases .camp-action--confirming {
    background: rgba(177,64,64,0.95) !important;
    color: #fff !important;
    border-color: #b14040 !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0 8px;
    min-width: 70px;
    animation: camp-confirm-pulse 1.2s ease-in-out infinite;
  }
  @keyframes camp-confirm-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(177,64,64,0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(177,64,64,0); }
  }
  #releases .camp-action:disabled { opacity: 0.45; cursor: wait; }

  #releases .ads-side { display: flex; flex-direction: column; gap: 18px; }
  #releases .card-shell { background: var(--paper); border-radius: var(--radius-lg); border: 1px solid var(--line-2); box-shadow: 0 8px 28px -22px rgba(20,15,10,0.18); overflow: hidden; }
  #releases .audience__head { padding: 14px 18px 12px; border-bottom: 1px solid var(--line-2); }
  #releases .audience__head h3 { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; margin: 0 0 4px; }
  #releases .audience__head .sub { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
  #releases .audience__body { padding: 12px 18px 16px; }

  #releases .aud-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line-2); }
  #releases .aud-row:last-child { border-bottom: 0; }
  /* Source icon — color-coded by row so the rail reads at a glance.
     Order: Spotify (green), Pre-savers (rose), Lookalike (indigo),
     Exclude (slate). nth-child targets the source rows after the
     cities card, in document order. */
  #releases .aud-row .src { width: 28px; height: 28px; border-radius: 8px; background: var(--warm); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; box-shadow: 0 1px 2px rgba(20,15,10,0.08); }
  #releases .ads-audience .aud-row:nth-of-type(1) .src { background: linear-gradient(135deg, #2dbe7e 0%, #1f8a5b 100%); }
  #releases .ads-audience .aud-row:nth-of-type(2) .src { background: linear-gradient(135deg, #ec5b80 0%, #b03a5f 100%); }
  #releases .ads-audience .aud-row:nth-of-type(3) .src { background: linear-gradient(135deg, #7a5cf3 0%, #4a36b5 100%); }
  #releases .ads-audience .aud-row:nth-of-type(4) .src { background: linear-gradient(135deg, #8a96a8 0%, #4f5a6c 100%); }
  /* Right-side numeric value gets a subtle tint matching its row. */
  #releases .ads-audience .aud-row:nth-of-type(1) .right .est { color: #1f8a5b; }
  #releases .ads-audience .aud-row:nth-of-type(2) .right .est { color: #b03a5f; }
  #releases .ads-audience .aud-row:nth-of-type(3) .right .est { color: #4a36b5; }
  #releases .ads-audience .aud-row:nth-of-type(4) .right .est { color: #4f5a6c; }
  #releases .aud-row .body .t { font-size: 12.5px; font-weight: 600; color: var(--ink); }
  #releases .aud-row .body .m { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); margin-top: 1px; letter-spacing: 0.03em; }
  #releases .aud-row .right { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); font-weight: 700; letter-spacing: 0.04em; text-align: right; }
  #releases .aud-row .right .est { font-family: var(--font-display); font-size: 16px; letter-spacing: -0.01em; color: var(--ink); display: block; }
  #releases .aud-row .right .lbl { font-size: 9px; color: var(--ink-4); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }
  #releases .aud-add { width: 100%; border: 1px dashed var(--line-strong); background: transparent; padding: 11px; border-radius: 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; margin-top: 8px; }
  #releases .aud-add:hover { border-color: var(--ink); color: var(--ink); }
  /* Estimate tile — give it a warm gradient so the audience size +
     CPM read like a headline result, not just another row. */
  #releases .aud-summary { background: linear-gradient(135deg, #1a1714 0%, #2c241e 100%); color: #fff8ec; border-radius: 10px; padding: 14px 16px; margin-top: 14px; display: flex; align-items: center; justify-content: space-between; }
  #releases .aud-summary .lbl { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,248,236,0.55); }
  #releases .aud-summary .val { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; color: #fff8ec; }
  #releases .aud-foot { display: flex; gap: 8px; margin-top: 14px; }
  #releases .aud-foot .btn-pill { flex: 1; text-align: center; justify-content: center; }

  #releases .creatives { padding: 18px 22px 22px; }
  #releases .creatives__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
  #releases .creatives__head h3 { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; margin: 0; }
  #releases .creatives__head .more { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); }
  #releases .creatives__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  #releases .creative { aspect-ratio: 1; border-radius: 10px; position: relative; overflow: hidden; cursor: pointer; isolation: isolate; }
  #releases .creative::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.65) 100%); }
  #releases .creative__tag { position: absolute; top: 7px; left: 7px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: #fff; background: rgba(0,0,0,0.55); padding: 3px 6px; border-radius: 4px; z-index: 1; backdrop-filter: blur(4px); }
  #releases .creative__meta { position: absolute; left: 8px; right: 8px; bottom: 8px; color: #fff; font-family: var(--font-mono); font-size: 9.5px; line-height: 1.3; z-index: 1; letter-spacing: 0.02em; }
  #releases .creative__meta .top { font-weight: 700; }
  #releases .creative__meta .ctr { opacity: 0.85; margin-top: 2px; }
  #releases .creative.c1 { background: linear-gradient(135deg, #f5b48a, #c8503a, #6a1d2a); }
  #releases .creative.c2 { background: linear-gradient(135deg, #1a0908, #2a1410, #6a1d2a); }
  #releases .creative.c3 { background: linear-gradient(160deg, #2a9d8f, #264653); }
  #releases .creative.c4 { background: linear-gradient(155deg, #d97706, #b91c1c, #1a0908); }
  #releases .creative.c5 { background: linear-gradient(135deg, #7c3aed, #2563eb); }
  #releases .creative.c6 { background: linear-gradient(135deg, #f4a261, #e76f51, #c8503a); }
  #releases .creative.add { background: var(--paper-2); border: 1.5px dashed var(--line-strong); display: flex; align-items: center; justify-content: center; }
  #releases .creative.add::after { display: none; }
  #releases .creative.add .plus { font-family: var(--font-display); font-size: 28px; color: var(--ink-4); }

  /* ═══════════════════════════════════════════════
     RELEASES WORKSPACE — list on left, Connect on right.
     Connect (merged in from the killed Connect page) lives as
     the right rail so the broadcast composer + fan stats sit
     next to the releases they're announcing.
     ═══════════════════════════════════════════════ */
  /* 3-COLUMN WORKSPACE — Release Prep (rollout checklist for the
     active release) | Connect (broadcast composer + recent) | Links
     catalog (the rls-list of releases). All three columns share
     equal width so each surface gets a fair canvas. Connect retains
     its sticky positioning since it's the action surface a user
     comes back to repeatedly. */
  :is(#releases,#releaseshub) .rls-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
  :is(#releases,#releaseshub) .rls-workspace .rls-list { min-width: 0; gap: 6px; }

  /* Smaller row head — denser artwork + padding so collapsed rows
     are ~52px and the catalog scans short. */
  /* Padding bumped from 7px/12px so the title + artwork tile have
     breathing room against the row edges. Grid template trimmed to
     3 columns (art, title, chevron) — the mockup's original 6-col
     template was sized for mini-stats which we removed; leftover
     auto + 24px tracks were reserving empty space on the right and
     pushing the chevron away from the edge. */
  :is(#releases,#releaseshub) .rls-workspace .rls-row__head { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 12px 12px 12px 18px; gap: 14px; }
  :is(#releases,#releaseshub) .rls-workspace .rls-row__art { width: 48px; height: 48px; border-radius: 8px; }
  :is(#releases,#releaseshub) .rls-workspace .rls-row__art-mark { font-size: 11px; }
  :is(#releases,#releaseshub) .rls-workspace .rls-row__name { font-size: 14px; }
  :is(#releases,#releaseshub) .rls-workspace .rls-row__meta { font-size: 10.5px; margin-top: 2px; }
  :is(#releases,#releaseshub) .rls-workspace .rls-row__mini-stats { gap: 16px; }
  :is(#releases,#releaseshub) .rls-workspace .rls-row__mini .v { font-size: 14px; }
  :is(#releases,#releaseshub) .rls-workspace .rls-row__mini .l { font-size: 8.5px; margin-top: 3px; }
  :is(#releases,#releaseshub) .rls-workspace .rls-row__chevron { width: 24px; height: 24px; }

  /* Expanded body — now stacks vertically since the column is narrower.
     Override the earlier 2-col grid for the in-workspace context. */
  :is(#releases,#releaseshub) .rls-workspace .rls-body-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
  :is(#releases,#releaseshub) .rls-workspace .rls-dsps { grid-template-columns: 1fr 1fr; }
  :is(#releases,#releaseshub) .rls-workspace .rls-dsps.full { grid-template-columns: 1fr 1fr; }

  /* ═══════════════════════════════════════════════
     CONNECT side rail
     ═══════════════════════════════════════════════ */
  #releases .connect-side { position: sticky; top: 20px; background: var(--paper); border-radius: var(--radius-lg); border: 1px solid var(--line-2); box-shadow: 0 8px 28px -22px rgba(20,15,10,0.18); overflow: hidden; }
  #releases .connect-side__head { padding: 18px 20px 14px; border-bottom: 1px solid var(--line-2); display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: flex-start; }
  #releases .connect-side__eyebrow { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4); }
  #releases .connect-side__title { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; line-height: 1.1; margin: 6px 0 2px; }
  #releases .connect-side__sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
  #releases .connect-side__hero { text-align: right; }
  #releases .connect-side__hero .v { font-family: var(--font-display); font-size: 24px; letter-spacing: -0.02em; line-height: 1; }
  #releases .connect-side__hero .l { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); margin-top: 4px; }

  #releases .connect-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-bottom: 1px solid var(--line-2); background: var(--paper-2); }
  #releases .connect-stat { padding: 12px 16px; border-left: 1px solid var(--line-2); }
  #releases .connect-stat:first-child { border-left: 0; }
  #releases .connect-stat .v { font-family: var(--font-display); font-size: 17px; letter-spacing: -0.01em; line-height: 1; color: var(--ink); }
  #releases .connect-stat .v.up { color: var(--green); }
  #releases .connect-stat .l { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); margin-top: 5px; }

  #releases .connect-tabs { display: flex; gap: 2px; padding: 10px 20px 0; }
  #releases .connect-tab { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 14px 10px; border: none; background: transparent; color: var(--ink-4); cursor: pointer; border-bottom: 2px solid transparent; }
  #releases .connect-tab.is-active { color: var(--ink); border-bottom-color: var(--amber); }

  #releases .connect-body { padding: 14px 20px 16px; }
  #releases .connect-channels { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; width: fit-content; margin-bottom: 14px; }
  #releases .connect-channel { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 16px; border: none; background: var(--paper); color: var(--ink-4); cursor: pointer; }
  #releases .connect-channel + .connect-channel { border-left: 1px solid var(--line); }
  #releases .connect-channel.is-active { background: var(--ink); color: #f5e7d4; }

  #releases .connect-templates { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
  #releases .connect-template { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-3); cursor: pointer; text-align: center; }
  #releases .connect-template:hover { color: var(--ink); border-color: var(--line-strong); }
  #releases .connect-template.is-active { background: var(--ink); color: #f5e7d4; border-color: var(--ink); }

  #releases .connect-tied { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--amber-bg); border-radius: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--amber); margin-bottom: 14px; letter-spacing: 0.04em; line-height: 1.4; }
  #releases .connect-tied b { color: var(--ink-2); font-weight: 700; }
  #releases .connect-tied .ic { width: 18px; height: 18px; border-radius: 4px; background: var(--amber); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; }

  #releases .connect-input, #releases .connect-textarea { width: 100%; font-family: var(--font-body); font-size: 13px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; background: var(--paper); margin-bottom: 8px; resize: vertical; }
  #releases .connect-input:focus, #releases .connect-textarea:focus { outline: none; border-color: var(--ink); }
  #releases .connect-textarea { min-height: 80px; font-family: var(--font-body); line-height: 1.45; }

  #releases .connect-foot { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); }
  #releases .connect-foot__recip { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  #releases .connect-foot__recip b { color: var(--ink); font-weight: 700; }
  #releases .connect-foot__select { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); background: transparent; border: none; cursor: pointer; padding: 0; }
  #releases .connect-foot__select:hover { color: var(--ink); }
  #releases .connect-foot__btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
  #releases .connect-foot__btns .btn-pill { justify-content: center; }
  #releases .connect-recipients { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.04em; }
  #releases .connect-recipients b { color: var(--ink); font-weight: 700; }

  /* Recent broadcasts list */
  #releases .connect-recent { padding: 0 20px 16px; }
  #releases .connect-recent__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 8px; border-top: 1px solid var(--line-2); }
  #releases .connect-recent__title { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); }
  #releases .connect-recent__more { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; cursor: pointer; }
  #releases .connect-recent__more:hover { color: var(--ink); }
  #releases .connect-recent__list { list-style: none; padding: 0; margin: 0; }
  #releases .connect-recent__row { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line-2); }
  #releases .connect-recent__row:last-child { border-bottom: 0; }
  #releases .connect-recent__date { width: 36px; text-align: center; padding: 4px 0; background: var(--warm); border-radius: 6px; }
  #releases .connect-recent__date .d { font-family: var(--font-display); font-size: 13px; line-height: 1; color: var(--ink); }
  #releases .connect-recent__date .m { font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.14em; color: var(--ink-4); margin-top: 2px; }
  #releases .connect-recent__body .t { font-size: 13px; font-weight: 600; color: var(--ink); }
  #releases .connect-recent__body .m { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); margin-top: 2px; letter-spacing: 0.03em; }
  #releases .connect-recent__pill { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--green); letter-spacing: 0.06em; }

  /* ═══════════════════════════════════════════════
     RECOMMENDED FOR AN AD — boost candidates
     ═══════════════════════════════════════════════ */
  #releases .recos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  #releases .reco { background: var(--paper); border-radius: var(--radius-lg); border: 1px solid var(--line-2); box-shadow: 0 8px 28px -22px rgba(20,15,10,0.18); overflow: hidden; display: flex; flex-direction: column; }
  #releases .reco__thumb { aspect-ratio: 4 / 5; position: relative; overflow: hidden; }
  #releases .reco__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.45) 100%); }
  #releases .reco__thumb.r1 { background: linear-gradient(140deg, #f5b48a, #c8503a, #2a1410); }
  #releases .reco__thumb.r2 { background: linear-gradient(135deg, #2a9d8f, #19425a, #0a1418); }
  #releases .reco__thumb.r3 { background: linear-gradient(155deg, #d97706, #b91c1c, #1a0908); }
  #releases .reco__thumb.r4 { background: linear-gradient(135deg, #7c3aed, #2563eb, #0e1430); }
  #releases .reco__thumb::before {
    display: none; /* stripe overlay killed — was obscuring real artwork/thumbnails */
    /* background-image: repeating-linear-gradient(115deg, rgba(0,0,0,0.06) 0 8px, transparent 8px 16px);
  */
  }
  #releases .reco__platform { position: absolute; top: 10px; left: 10px; z-index: 1; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; color: #fff; background: rgba(0,0,0,0.55); padding: 4px 8px; border-radius: 5px; backdrop-filter: blur(6px); display: inline-flex; align-items: center; gap: 5px; }
  #releases .reco__platform .pd { width: 5px; height: 5px; border-radius: 50%; }
  #releases .reco__platform.ig .pd { background: linear-gradient(135deg, #f4a261, #e76f51); }
  #releases .reco__platform.tt .pd { background: #fff; }
  #releases .reco__platform.yt .pd { background: #ff0000; }
  #releases .reco__score { position: absolute; top: 10px; right: 10px; z-index: 1; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.55); padding: 4px 8px; border-radius: 999px; backdrop-filter: blur(6px); display: inline-flex; align-items: center; gap: 4px; }
  #releases .reco__score b { font-family: var(--font-display); font-size: 13px; letter-spacing: -0.01em; }
  #releases .reco__caption { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; color: #fff; font-family: var(--font-mono); font-size: 10px; line-height: 1.3; letter-spacing: 0.04em; opacity: 0.85; }
  #releases .reco__body { padding: 14px 16px 14px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
  #releases .reco__title { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
  #releases .reco__stats { display: flex; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.03em; }
  #releases .reco__stats b { color: var(--ink); font-family: var(--font-display); font-size: 12px; letter-spacing: -0.01em; margin-right: 2px; }
  #releases .reco__why { font-family: var(--font-mono); font-size: 10.5px; color: var(--green); letter-spacing: 0.04em; padding: 6px 8px; background: var(--green-bg); border-radius: 6px; }
  #releases .reco__why.amber { color: var(--amber); background: var(--amber-bg); }
  #releases .reco__why.crimson { color: var(--crimson); background: var(--crimson-soft); }
  #releases .reco__btn { margin-top: auto; justify-content: center; }

  /* ═══════════════════════════════════════════════
     CITY CHIPS in audience builder
     ═══════════════════════════════════════════════ */
  #releases .aud-cities { background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
  #releases .aud-cities__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
  #releases .aud-cities__title { font-size: 13px; font-weight: 700; color: var(--ink); }
  #releases .aud-cities__sub { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); margin-top: 3px; letter-spacing: 0.04em; }
  #releases .aud-cities__sub b { color: var(--ink-2); font-weight: 700; }
  #releases .aud-cities__edit { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); background: transparent; border: none; cursor: pointer; padding: 2px 0; white-space: nowrap; }
  #releases .aud-cities__edit:hover { color: var(--ink); }
  #releases .aud-cities__chips { display: flex; flex-wrap: wrap; gap: 4px; }
  /* City chips — accent color cycles so the chip cloud reads as data
     not a wall of beige. The count badge inside each chip gets its
     own tint to reinforce the cycle. */
  #releases .aud-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--paper); border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); letter-spacing: 0.02em; transition: transform 120ms ease, box-shadow 120ms ease; }
  #releases .aud-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 6px -2px rgba(20,15,10,0.18); }
  #releases .aud-chip em { font-style: normal; font-weight: 700; font-size: 9.5px; padding: 1px 5px; border-radius: 999px; }
  /* Cycle colors across chips — nth-child(1..n) gives a deterministic
     palette so the same city is the same color on every reload. */
  #releases .aud-cities__chips .aud-chip:nth-child(7n+1) { border-color: rgba(45,190,126,0.35); }
  #releases .aud-cities__chips .aud-chip:nth-child(7n+1) em { background: rgba(45,190,126,0.14); color: #1f8a5b; }
  #releases .aud-cities__chips .aud-chip:nth-child(7n+2) { border-color: rgba(236,91,128,0.35); }
  #releases .aud-cities__chips .aud-chip:nth-child(7n+2) em { background: rgba(236,91,128,0.14); color: #b03a5f; }
  #releases .aud-cities__chips .aud-chip:nth-child(7n+3) { border-color: rgba(122,92,243,0.35); }
  #releases .aud-cities__chips .aud-chip:nth-child(7n+3) em { background: rgba(122,92,243,0.14); color: #4a36b5; }
  #releases .aud-cities__chips .aud-chip:nth-child(7n+4) { border-color: rgba(255,167,38,0.45); }
  #releases .aud-cities__chips .aud-chip:nth-child(7n+4) em { background: rgba(255,167,38,0.16); color: #b86d00; }
  #releases .aud-cities__chips .aud-chip:nth-child(7n+5) { border-color: rgba(66,165,245,0.35); }
  #releases .aud-cities__chips .aud-chip:nth-child(7n+5) em { background: rgba(66,165,245,0.14); color: #1565c0; }
  #releases .aud-cities__chips .aud-chip:nth-child(7n+6) { border-color: rgba(255,87,87,0.35); }
  #releases .aud-cities__chips .aud-chip:nth-child(7n+6) em { background: rgba(255,87,87,0.14); color: #b14040; }
  #releases .aud-cities__chips .aud-chip:nth-child(7n+7) { border-color: rgba(38,166,154,0.35); }
  #releases .aud-cities__chips .aud-chip:nth-child(7n+7) em { background: rgba(38,166,154,0.14); color: #00695c; }
  #releases .aud-chip--more { background: var(--warm); color: var(--ink-3); border-color: transparent; cursor: pointer; }
  #releases .aud-chip--more:hover { color: var(--ink); transform: none; }
  #releases .aud-chip--more em { background: transparent !important; color: var(--ink-4) !important; }
  /* Meta-clicks micro-chip nested inside the city pill. Crimson tint
     to signal "Meta data" — distinct from the random palette cycle
     applied to the streamer-count em above. The ✦ glyph is the
     visual marker. */
  #releases .aud-chip .aud-chip__meta {
    background: rgba(139,26,43,0.10) !important;
    color: var(--ac-color-accent, #8B1A2B) !important;
    font-weight: 700;
    font-size: 9.5px;
    padding: 1px 5px;
    border-radius: 999px;
    font-style: normal;
    margin-left: 2px;
  }
  /* "Converting" cities — both high streamer count AND Meta clicks.
     Subtle crimson outline upgrade so the user's eye lands here when
     deciding where to push ad budget. */
  #releases .aud-cities__chips .aud-chip--converts {
    border-color: var(--ac-color-accent, #8B1A2B) !important;
    box-shadow: 0 0 0 1px rgba(139,26,43,0.18);
  }

  /* ═══════════════════════════════════════════════
     COMPACT FUNNEL STRIP
     ═══════════════════════════════════════════════ */
  #releases .funnel-strip {
    background: var(--paper);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-2);
    box-shadow: 0 8px 28px -22px rgba(20,15,10,0.18);
    padding: 18px 22px;
    display: grid;
    grid-template-columns: auto repeat(5, 1fr);
    gap: 18px;
    align-items: center;
  }
  #releases .funnel-strip__title { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); border-right: 1px solid var(--line-2); padding-right: 18px; }
  #releases .funnel-strip__title strong { display: block; font-family: var(--font-display); font-size: 16px; color: var(--ink); letter-spacing: -0.01em; margin-top: 4px; }
  #releases .funnel-step-compact { position: relative; padding-left: 2px; }
  #releases .funnel-step-compact .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-4); font-weight: 700; text-transform: uppercase; }
  #releases .funnel-step-compact .v { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; line-height: 1; margin-top: 4px; }
  #releases .funnel-step-compact .p { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 4px; letter-spacing: 0.04em; }
  #releases .funnel-step-compact + .funnel-step-compact::before { content: "→"; position: absolute; left: -14px; top: 22px; font-family: var(--font-mono); color: var(--ink-5); font-size: 14px; }

  /* ═══════════════════════════════════════════════
     PRESS + PLAYLISTS (2-up)
     ═══════════════════════════════════════════════ */
  #releases .two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  /* Single-card mode — used when the Spotify playlists card is
     hidden so Press Hits doesn't sit awkwardly in a half-empty grid.
     Caps the lone card to a comfortable max-width and centers it. */
  #releases .two-up--single {
    grid-template-columns: minmax(0, 720px);
    justify-content: center;
  }
  #releases .card { background: var(--paper); border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: 0 8px 28px -22px rgba(20,15,10,0.18); border: 1px solid var(--line-2); }
  #releases .card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
  #releases .card__title-block .eyebrow { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4); }
  #releases .card__title-block .title { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; line-height: 1.1; margin: 6px 0 2px; }
  #releases .card__title-block .sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
  #releases .card__hero-stat { text-align: right; flex-shrink: 0; }
  #releases .card__hero-stat .v { font-family: var(--font-display); font-size: 28px; letter-spacing: -0.02em; line-height: 1; }
  #releases .card__hero-stat .l { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); margin-top: 4px; }

  #releases .press-list { list-style: none; padding: 0; margin: 0; }
  #releases .press-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); cursor: pointer; transition: background 120ms; }
  #releases .press-row:last-child { border-bottom: 0; }
  #releases .press-row:hover { background: var(--warm); }
  #releases .press-row__date { width: 40px; text-align: center; padding: 4px 0; background: var(--warm); border-radius: 8px; }
  #releases .press-row__date .d { font-family: var(--font-display); font-size: 14px; line-height: 1; color: var(--ink); }
  #releases .press-row__date .m { font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.14em; color: var(--ink-4); margin-top: 2px; }
  #releases .press-row__body .t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
  #releases .press-row__body .m { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); margin-top: 2px; letter-spacing: 0.04em; }

  #releases .pl-list { list-style: none; padding: 0; margin: 0; }
  #releases .pl-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
  #releases .pl-row:last-child { border-bottom: 0; }
  #releases .pl-art { width: 40px; height: 40px; border-radius: 6px; }
  #releases .pl-art.g1 { background: linear-gradient(135deg, #2a9d8f, #264653); }
  #releases .pl-art.g2 { background: linear-gradient(135deg, #e76f51, #f4a261); }
  #releases .pl-art.g3 { background: linear-gradient(135deg, #7c3aed, #2563eb); }
  #releases .pl-art.g4 { background: linear-gradient(135deg, #d97706, #b91c1c); }
  #releases .pl-art.g5 { background: linear-gradient(135deg, #c8503a, #6a1d2a); }
  #releases .pl-row .t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
  #releases .pl-row .m { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); margin-top: 2px; letter-spacing: 0.04em; }
  /* External-link arrow that opens the playlist on Spotify in a new
     tab. Subtle until hovered. */
  #releases .pl-row__ext {
    color: var(--ink-4);
    text-decoration: none;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 120ms ease, color 120ms ease;
  }
  #releases .pl-row__ext:hover {
    background: var(--surface-overlay, rgba(0,0,0,0.05));
    color: var(--ink);
  }
  /* Empty / loading / "no playlists" states */
  #releases .pl-row--empty {
    grid-template-columns: 1fr !important;
    text-align: center;
    color: var(--ink-4);
    font-style: italic;
    padding: 24px 0;
  }
  /* Clickable playlist row (opens the editor). */
  #releases .pl-row--clickable {
    cursor: pointer;
    transition: background 120ms ease;
    margin: 0 -8px;
    padding: 11px 8px;
    border-radius: 6px;
  }
  #releases .pl-row--clickable:hover {
    background: var(--surface-overlay, rgba(0,0,0,0.04));
  }
  /* The "Connect Spotify with edit access" inline CTA row that
     replaces the playlist list when the band hasn't OAuth'd yet. */
  #releases .pl-row--connect {
    grid-template-columns: 1fr !important;
    padding: 18px 0;
    border-bottom: 0;
  }

  /* ═══════════════════════════════════════════════════════════════
     PLAYLIST EDITOR MODAL — opens when user clicks a playlist row.
     Full-screen overlay, centered card with header / search /
     scrollable track list / footer with diff + push button.
     ═══════════════════════════════════════════════════════════════ */
  .pl-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14, 12, 11, 0.88);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    overflow: auto;
  }
  .pl-editor {
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 64px);
    background: var(--paper, #fff);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 80px rgba(0,0,0,0.4);
  }
  .pl-editor__head {
    display: grid;
    grid-template-columns: 56px 1fr 32px;
    gap: 14px;
    align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line-2, rgba(0,0,0,0.06));
  }
  .pl-editor__cover {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    background: linear-gradient(135deg, #2a9d8f, #264653) center/cover no-repeat;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  }
  .pl-editor__eyebrow {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-4, #999);
  }
  .pl-editor__title {
    font-size: 18px;
    font-weight: 700;
    margin: 1px 0 3px;
    color: var(--ink, #111);
    letter-spacing: -0.01em;
  }
  .pl-editor__sub {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    color: var(--ink-4, #888);
    margin: 0;
  }
  .pl-editor__close {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line-2, rgba(0,0,0,0.10));
    background: var(--paper, #fff);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--ink-3, #555);
    transition: background 120ms ease;
  }
  .pl-editor__close:hover { background: var(--surface-overlay, rgba(0,0,0,0.06)); }
  .pl-editor__add {
    padding: 16px 24px 0;
    position: relative;
  }
  .pl-editor__search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid var(--line-2, rgba(0,0,0,0.12));
    border-radius: 8px;
    font-size: 14px;
    background: var(--surface, #fafafa);
    color: var(--ink, #111);
  }
  .pl-editor__search-input:focus {
    outline: none;
    border-color: var(--accent, #1f7c4e);
  }
  .pl-editor__search-results {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--line-2, rgba(0,0,0,0.08));
    border-radius: 8px;
  }
  .pl-editor__search-results:empty { display: none; }
  .pl-search__row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line-2, rgba(0,0,0,0.05));
  }
  .pl-search__row:last-child { border-bottom: 0; }
  .pl-search__img { width: 36px; height: 36px; border-radius: 4px; object-fit: cover; display: block; }
  .pl-search__img--blank { background: linear-gradient(135deg, #ccc, #999); }
  .pl-search__meta { display: flex; flex-direction: column; min-width: 0; }
  .pl-search__name { font-size: 13px; font-weight: 600; color: var(--ink, #111); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pl-search__artists { font-size: 11px; color: var(--ink-4, #888); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pl-search__add {
    padding: 4px 10px;
    border: 1px solid var(--line-2, rgba(0,0,0,0.12));
    border-radius: 6px;
    background: var(--paper, #fff);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    color: var(--ink-2, #333);
  }
  .pl-search__add:hover { background: var(--accent, #1f7c4e); color: #fff; border-color: var(--accent, #1f7c4e); }
  .pl-search__add[disabled] { opacity: 0.5; cursor: default; background: var(--surface-overlay, rgba(0,0,0,0.04)); }
  .pl-editor__body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 24px 0;
    min-height: 240px;
  }
  .pl-editor__loading {
    text-align: center;
    color: var(--ink-4, #888);
    font-style: italic;
    padding: 60px 0;
  }
  .pl-editor__tracks { list-style: none; padding: 0; margin: 0; }
  .pl-track {
    display: grid;
    grid-template-columns: 16px 24px 40px 1fr 44px 24px;
    gap: 14px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: grab;
    transition: background 120ms ease;
  }
  .pl-track:hover { background: var(--surface-overlay, rgba(0,0,0,0.04)); }
  .pl-track:hover .pl-track__remove { opacity: 1; }
  .pl-track:hover .pl-track__handle { opacity: 0.7; }
  .pl-track--dragging { opacity: 0.35; cursor: grabbing; }
  .pl-track--drop-target { box-shadow: inset 0 2px 0 0 var(--accent, #1f7c4e); }
  .pl-track__handle {
    font-size: 10px;
    color: var(--ink-4, #aaa);
    text-align: center;
    user-select: none;
    opacity: 0;
    transition: opacity 120ms ease;
    letter-spacing: -2px;
  }
  .pl-track__rank {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11.5px;
    color: var(--ink-4, #999);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .pl-track__img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    display: block;
  }
  .pl-track__img--blank { background: linear-gradient(135deg, #ccc, #999); }
  .pl-track__meta { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
  .pl-track__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink, #111);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.005em;
  }
  .pl-track__artists {
    font-size: 12px;
    color: var(--ink-4, #888);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pl-track__dur {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11.5px;
    color: var(--ink-4, #999);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  /* Remove button — invisible until row hover, then subtle. */
  .pl-track__remove {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--ink-4, #aaa);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
    padding: 0;
  }
  .pl-track__remove:hover {
    background: rgba(177,64,64,0.12);
    color: #b14040;
    opacity: 1;
  }
  .pl-editor__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    border-top: 1px solid var(--line-2, rgba(0,0,0,0.08));
    background: var(--surface, #fafafa);
  }
  .pl-editor__diff {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    color: var(--ink-3, #555);
    letter-spacing: 0.04em;
  }
  .pl-editor__actions { display: flex; gap: 10px; }
  body.body--modal-open { overflow: hidden; }
  #releases .pl-connect {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(30, 215, 96, 0.06), rgba(30, 215, 96, 0.02));
    border: 1px solid rgba(30, 215, 96, 0.18);
    border-radius: 12px;
  }
  #releases .pl-connect__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
  }
  #releases .pl-connect__sub {
    font-size: 12px;
    color: var(--ink-4);
    line-height: 1.45;
    max-width: 460px;
  }

  /* ─── FOOTER ─────────────────────────────── */
  #releases .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; font-size: 11px; color: var(--ink-5); letter-spacing: 0.04em; }
  #releases .foot__links { display: flex; gap: 24px; }
  #releases .foot__links a { color: var(--ink-4); text-decoration: none; }
  #releases .foot__links a:hover { color: var(--ink-2); }

  #releases svg.spark { display: block; }

  /* ─── Release Prep column ─────────────────────────────────────
     Standalone card on the left of the 3-col workspace. Pulls
     directly from the active release's rollout checklist. When the
     release is past-drop and within 30 days, surface the same
     checklist but flip incomplete items to "still open" tone. */
  :is(#releases,#releaseshub) .rls-prep {
    background: var(--paper);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-2);
    box-shadow: 0 8px 28px -22px rgba(20,15,10,0.18);
    overflow: hidden;
    min-width: 0;
    position: sticky;
    top: 20px;
  }
  :is(#releases,#releaseshub) .rls-prep__head {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--line-2);
  }
  :is(#releases,#releaseshub) .rls-prep__eyebrow {
    margin: 0 0 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-4);
  }
  :is(#releases,#releaseshub) .rls-prep__title {
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0 0 4px;
    color: var(--ink);
  }
  :is(#releases,#releaseshub) .rls-prep__sub {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.4;
  }
  :is(#releases,#releaseshub) .rls-prep__body {
    padding: 12px 14px 16px;
  }
  /* Reuse the .rls-checklist styles so the prep checklist matches
     the look of the in-row one we were previously rendering. */
  :is(#releases,#releaseshub) .rls-prep .rls-checklist {
    background: transparent;
    border: 0;
    padding: 0;
  }
  :is(#releases,#releaseshub) .rls-prep .rls-checklist__head {
    padding-bottom: 8px;
    margin-bottom: 6px;
  }

  /* ── Opportunities panel — sits below Release Prep in the workspace
     left column. Same visual language as .rls-prep but with the
     accent treatment on overdue rows. Hidden by default until JS
     finds tasks assigned to the logged-in user. */
  :is(#releases,#releaseshub) .rls-opp {
    background: var(--paper);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-2);
    box-shadow: 0 8px 28px -22px rgba(20,15,10,0.18);
    overflow: hidden;
    margin-top: 14px;
  }
  :is(#releases,#releaseshub) .rls-opp__head {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--line-2);
  }
  :is(#releases,#releaseshub) .rls-opp__eyebrow {
    margin: 0 0 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-4);
  }
  :is(#releases,#releaseshub) .rls-opp__title {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0 0 4px;
    color: var(--ink);
  }
  :is(#releases,#releaseshub) .rls-opp__sub {
    margin: 0;
    font-size: 11.5px;
    color: var(--ink-3);
    line-height: 1.4;
  }
  :is(#releases,#releaseshub) .rls-opp__body {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  :is(#releases,#releaseshub) .rls-opp__row {
    appearance: none;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  :is(#releases,#releaseshub) .rls-opp__row:hover {
    background: var(--line-1, rgba(0,0,0,0.03));
    border-color: var(--line-2);
  }
  :is(#releases,#releaseshub) .rls-opp__row-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
  }
  :is(#releases,#releaseshub) .rls-opp__row-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  :is(#releases,#releaseshub) .rls-opp__row-release {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :is(#releases,#releaseshub) .rls-opp__row-due {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    flex-shrink: 0;
  }
  :is(#releases,#releaseshub) .rls-opp__row-due.is-today {
    color: var(--accent, #c97c3a);
  }
  :is(#releases,#releaseshub) .rls-opp__row-due.is-overdue {
    color: #c0392b;
  }

  /* ─── Slim toolbar replacing the section header ───────────────
     Drops in above the workspace. Holds the filter pills + Add
     Release CTA without the heavy "RELEASES / Catalog & rollouts"
     eyebrow stack that previously ate vertical space. */
  :is(#releases,#releaseshub) .rls-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }
  :is(#releases,#releaseshub) .rls-toolbar__filters {
    display: flex;
    gap: 8px;
  }

  /* Connect side rail loses its 500px hard width inside the 3-col
     grid — it just fills its column. Keep the sticky positioning so
     the composer stays in view while users scroll the catalog. */
  :is(#releases,#releaseshub) .rls-workspace .connect-side {
    width: 100%;
  }

  /* ─── Assignee picker modal ──────────────────────────────────── */
  .ac-assign-picker__overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 15, 10, 0.36);
    backdrop-filter: blur(2px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .ac-assign-picker {
    width: 100%;
    max-width: 440px;
    max-height: 80vh;
    background: var(--ac-color-paper);
    border-radius: var(--ac-radius-2xl);
    border: 1px solid var(--ac-color-line);
    box-shadow: 0 24px 64px -16px rgba(20,15,10,0.32);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--ac-font-body, 'Inter', system-ui, sans-serif);
  }
  .ac-assign-picker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--ac-color-line-subtle);
  }
  .ac-assign-picker__head h3 {
    margin: 0;
    font-family: var(--ac-font-display);
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--ac-color-ink);
  }
  .ac-assign-picker__close {
    appearance: none;
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--ac-color-t3);
    cursor: pointer;
    padding: 0 4px;
  }
  .ac-assign-picker__close:hover { color: var(--ac-color-ink); }
  .ac-assign-picker__search {
    margin: 12px 18px 0;
    padding: 10px 12px;
    border: 1px solid var(--ac-color-line);
    border-radius: 8px;
    background: var(--ac-color-nested);
    font-family: inherit;
    font-size: 13px;
    color: var(--ac-color-ink);
  }
  .ac-assign-picker__search:focus {
    outline: none;
    border-color: var(--ac-color-ink);
  }
  .ac-assign-picker__list {
    list-style: none;
    margin: 8px 0 0;
    padding: 4px 8px 8px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }
  .ac-assign-picker__list li { margin: 0; }
  .ac-assign-picker__row {
    width: 100%;
    appearance: none;
    background: transparent;
    border: 0;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
  }
  .ac-assign-picker__row:hover {
    background: var(--ac-color-nested);
  }
  .ac-assign-picker__avatar {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ac-font-mono);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
  }
  .ac-assign-picker__avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ac-assign-picker__avatar-initials {
    position: relative;
    z-index: 0;
  }
  .ac-assign-picker__avatar img + .ac-assign-picker__avatar-initials {
    display: none;
  }
  .ac-assign-picker__rowtext {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .ac-assign-picker__rowname {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ac-color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ac-assign-picker__rowmeta {
    font-family: var(--ac-font-mono);
    font-size: 10.5px;
    color: var(--ac-color-t3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.04em;
  }
  .ac-assign-picker__empty {
    padding: 24px 12px;
    text-align: center;
    font-family: var(--ac-font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ac-color-t3);
  }
  .ac-assign-picker__foot {
    display: flex;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--ac-color-line-subtle);
    justify-content: space-between;
  }
  .ac-assign-picker__foot button {
    appearance: none;
    background: transparent;
    border: 1px solid var(--ac-color-line);
    border-radius: 999px;
    padding: 8px 16px;
    font-family: var(--ac-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ac-color-t2);
    cursor: pointer;
  }
  .ac-assign-picker__foot button:hover {
    color: var(--ac-color-ink);
    border-color: var(--ac-color-t2);
  }
  .ac-assign-picker__unassign {
    color: var(--ac-color-accent) !important;
    border-color: var(--ac-color-accent-chip) !important;
  }
  .ac-assign-picker__unassign:hover {
    background: var(--ac-color-accent-chip);
  }

  /* ─── Task composer modal ────────────────────────────────────
     Single-shot dialog for adding/editing checklist tasks. Visual
     language matches the assignee picker — same overlay, centred
     surface, brand tokens for type + color. */
  .ac-task-composer__overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 15, 10, 0.36);
    backdrop-filter: blur(2px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .ac-task-composer {
    width: 100%;
    max-width: 420px;
    background: var(--ac-color-paper);
    border-radius: var(--ac-radius-2xl);
    border: 1px solid var(--ac-color-line);
    box-shadow: 0 24px 64px -16px rgba(20,15,10,0.32);
    overflow: hidden;
    font-family: var(--ac-font-body, 'Inter', system-ui, sans-serif);
  }
  .ac-task-composer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--ac-color-line-subtle);
  }
  .ac-task-composer__head h3 {
    margin: 0;
    font-family: var(--ac-font-display);
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--ac-color-ink);
  }
  .ac-task-composer__close {
    appearance: none;
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--ac-color-t3);
    cursor: pointer;
    padding: 0 4px;
  }
  .ac-task-composer__close:hover { color: var(--ac-color-ink); }
  .ac-task-composer__form {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .ac-task-composer__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .ac-task-composer__label {
    font-family: var(--ac-font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ac-color-t3);
  }
  .ac-task-composer__label em {
    font-style: normal;
    font-weight: 600;
    color: var(--ac-color-muted);
    text-transform: none;
    letter-spacing: 0.04em;
    margin-left: 6px;
  }
  .ac-task-composer__task,
  .ac-task-composer__date {
    appearance: none;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ac-color-line);
    border-radius: 8px;
    background: var(--ac-color-nested);
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ac-color-ink);
  }
  .ac-task-composer__task:focus,
  .ac-task-composer__date:focus {
    outline: none;
    border-color: var(--ac-color-ink);
    background: var(--ac-color-paper);
  }
  .ac-task-composer__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
  }
  .ac-task-composer__actions button {
    appearance: none;
    border-radius: 999px;
    padding: 9px 18px;
    font-family: var(--ac-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .ac-task-composer__cancel {
    background: transparent;
    border: 1px solid var(--ac-color-line);
    color: var(--ac-color-t2);
  }
  .ac-task-composer__cancel:hover {
    color: var(--ac-color-ink);
    border-color: var(--ac-color-t2);
  }
  .ac-task-composer__ok {
    background: var(--ac-color-ink);
    border: 1px solid var(--ac-color-ink);
    color: var(--ac-color-paper);
  }
  .ac-task-composer__ok:hover {
    opacity: 0.9;
  }

  /* ─── Connect rail — History / Fans / Imports panels ────────── */
  #releases .connect-panel-empty {
    padding: 24px 12px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: var(--ink-4);
  }
  #releases .connect-panel-empty b { color: var(--ink-2); }

  /* Drafts tab */
  #releases .connect-drafts__list {
    list-style: none; margin: 0; padding: 0;
    max-height: 480px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 6px;
  }
  #releases .connect-drafts__row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 8px;
  }
  #releases .connect-drafts__body {
    flex: 1 1 auto; min-width: 0;
    background: transparent; border: none; padding: 0;
    text-align: left; cursor: pointer; font: inherit; color: inherit;
  }
  #releases .connect-drafts__title {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 13px; font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #releases .connect-drafts__meta {
    font-family: var(--font-mono);
    font-size: 10.5px; color: var(--ink-4);
    margin-top: 2px; letter-spacing: 0.02em;
  }
  #releases .connect-drafts__status {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 9.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.10em;
    padding: 2px 6px; border-radius: 3px;
  }
  #releases .connect-drafts__status--draft     { background: rgba(0,0,0,0.08); color: #555; }
  #releases .connect-drafts__status--scheduled { background: rgba(139,26,43,0.10); color: #8B1A2B; }
  #releases .connect-drafts__status--sent      { background: rgba(31,122,58,0.12); color: #1f7a3a; }
  #releases .connect-drafts__status--sending   { background: rgba(212,140,0,0.14); color: #b07000; }
  #releases .connect-drafts__status--failed    { background: rgba(139,26,43,0.18); color: #8B1A2B; }
  #releases .connect-drafts__del {
    flex: 0 0 auto;
    background: transparent; border: none;
    color: #aaa; cursor: pointer;
    font-size: 16px; line-height: 1;
    padding: 4px 6px; border-radius: 4px;
  }
  #releases .connect-drafts__del:hover {
    color: #8B1A2B; background: rgba(139,26,43,0.08);
  }

  /* Scheduled tab */
  #releases .connect-sched__list {
    list-style: none; margin: 0; padding: 0;
    max-height: 480px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 8px;
  }
  #releases .connect-sched__row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 10px;
  }
  #releases .connect-sched__body {
    flex: 1 1 auto; min-width: 0;
    background: transparent; border: none; padding: 0;
    text-align: left; cursor: pointer; font: inherit; color: inherit;
    display: flex; flex-direction: column; gap: 2px;
  }
  #releases .connect-sched__title {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 13.5px; font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #releases .connect-sched__when {
    font-family: var(--font-mono);
    font-size: 11px; color: #1a1714;
    letter-spacing: 0.02em;
  }
  #releases .connect-sched__aud {
    font-family: var(--font-mono);
    font-size: 10.5px; color: #888;
    letter-spacing: 0.02em;
  }
  #releases .connect-sched__status {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 9.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.10em;
    padding: 3px 8px; border-radius: 3px;
  }
  #releases .connect-sched__cancel {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid rgba(0,0,0,0.14);
    border-radius: 6px;
    padding: 4px 10px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 11px; font-weight: 600;
    color: #5a544c;
    cursor: pointer;
  }
  #releases .connect-sched__cancel:hover {
    border-color: #8B1A2B; color: #8B1A2B;
    background: rgba(139,26,43,0.05);
  }
  #releases .connect-sched__cancel:disabled { opacity: 0.5; cursor: wait; }

  #releases .connect-history__row.is-clickable {
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  }
  #releases .connect-history__row.is-clickable:hover {
    background: #fafaf7;
    border-color: rgba(0,0,0,0.16);
  }
  #releases .connect-history__row.is-clickable:hover .connect-history__chev {
    color: #8B1A2B;
    transform: translateX(2px);
  }

  /* Broadcast stats modal */
  .bc-stats-overlay {
    position: fixed; inset: 0;
    background: rgba(20, 16, 12, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1000;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 56px 20px;
    overflow-y: auto;
  }
  .bc-stats-overlay[hidden] { display: none !important; }
  .bc-stats-modal {
    width: min(640px, 100%);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.28);
    overflow: hidden;
    font-family: var(--ac-font-body, 'Inter', system-ui, sans-serif);
  }
  .bc-stats__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }
  .bc-stats__eyebrow {
    font-family: var(--ac-font-mono, 'JetBrains Mono', monospace);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: #5a544c;
  }
  .bc-stats__title {
    font-family: var(--ac-font-display, 'Archivo Black', sans-serif);
    font-weight: 400;
    font-size: 22px; letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #1a1714;
    margin: 4px 0 6px;
    line-height: 1.1;
  }
  .bc-stats__meta {
    font-family: var(--ac-font-mono, 'JetBrains Mono', monospace);
    font-size: 11px; color: #5a544c;
    letter-spacing: 0.02em;
  }
  .bc-stats__body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 20px; }
  .bc-stats__loading {
    font-family: var(--ac-font-mono, 'JetBrains Mono', monospace);
    font-size: 12px; color: #888;
    padding: 20px 0;
    text-align: center;
  }
  .bc-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
  }
  .bc-stats__tile {
    padding: 14px 16px;
    background: #fafaf7;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    display: flex; flex-direction: column; gap: 4px;
  }
  .bc-stats__tile-label {
    font-family: var(--ac-font-mono, 'JetBrains Mono', monospace);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: #5a544c;
  }
  .bc-stats__tile-value {
    font-family: var(--ac-font-display, 'Archivo Black', sans-serif);
    font-weight: 400;
    font-size: 26px; color: #1a1714;
    letter-spacing: -0.02em;
  }
  .bc-stats__tile-sub {
    font-family: var(--ac-font-mono, 'JetBrains Mono', monospace);
    font-size: 10.5px; color: #5a544c;
  }
  .bc-stats__section-label {
    font-family: var(--ac-font-mono, 'JetBrains Mono', monospace);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: #1a1714;
    margin: 0 0 8px;
  }
  .bc-stats__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .bc-stats__link-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 8px;
    font-size: 12.5px;
  }
  .bc-stats__link-url {
    flex: 1 1 auto; min-width: 0;
    color: #1a1714;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-decoration: none;
  }
  .bc-stats__link-url:hover { color: #8B1A2B; }
  .bc-stats__link-clicks {
    flex: 0 0 auto;
    font-family: var(--ac-font-mono, 'JetBrains Mono', monospace);
    font-size: 11px; font-weight: 700;
    color: #1a1714;
    background: rgba(0,0,0,0.06);
    padding: 3px 9px; border-radius: 999px;
  }
  .bc-stats__empty {
    font-family: var(--ac-font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: #888;
    text-align: center;
    padding: 14px 8px;
    background: #fafaf7;
    border-radius: 8px;
  }

  /* History */
  #releases .connect-history__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 480px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  /* 3-column row: date | content (flex) | chevron. The chevron sits
     vertically centered on the right edge — no more orphan arrow
     spilling onto a new line under the title. */
  #releases .connect-history__row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 16px;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 8px;
  }
  #releases .connect-history__date {
    width: 44px;
    text-align: center;
    padding: 6px 0 5px;
    background: #f6f3ed;
    border-radius: 6px;
    flex-shrink: 0;
    line-height: 1;
  }
  #releases .connect-history__date .d {
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1;
    color: var(--ink);
  }
  #releases .connect-history__date .m {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--ink-4);
    margin-top: 3px;
  }
  #releases .connect-history__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  #releases .connect-history__t {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #releases .connect-history__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    align-items: center;
  }
  /* Discrete fact pills — recipient count, audience, when. */
  #releases .connect-history__pill {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.02em;
    color: var(--ink-3);
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(0,0,0,0.04);
  }
  #releases .connect-history__pill b {
    color: var(--ink);
    font-weight: 700;
  }
  #releases .connect-history__pill--aud {
    background: rgba(31,124,78,0.08);
    color: #1f7c4e;
  }
  #releases .connect-history__pill--time {
    background: transparent;
    color: var(--ink-4);
    padding-left: 2px;
  }
  #releases .connect-history__pill--err {
    background: rgba(139,26,43,0.10);
    color: #8B1A2B;
  }
  /* Chevron — right-aligned by grid, subtle by default, animates on
     hover (the .is-clickable:hover rule above slides it right + tints
     it crimson). */
  #releases .connect-history__chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-4);
    transition: color 0.12s ease, transform 0.12s ease;
  }
  #releases .connect-history__preview {
    margin-top: 6px;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.4;
    max-height: 3em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* Fans directory */
  #releases .connect-fans__count {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-4);
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line-2);
  }
  #releases .connect-fans__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 420px;
    overflow-y: auto;
  }
  #releases .connect-fans__row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 8px 6px;
    margin: 0 -6px;
    border-bottom: 1px dashed var(--line-2);
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s ease;
  }
  #releases .connect-fans__row:hover {
    background: var(--warm);
  }
  #releases .connect-fans__row:last-child { border-bottom: 0; }
  #releases .connect-fans__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
  }
  #releases .connect-fans__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  #releases .connect-fans__name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #releases .connect-fans__sub {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.03em;
  }
  #releases .connect-fans__pill {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--warm);
    color: var(--ink-4);
  }
  #releases .connect-fans__pill--off { color: var(--crimson); background: var(--crimson-soft); }
  #releases .connect-fans__more {
    padding: 10px 0 0;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-4);
    letter-spacing: 0.04em;
    text-align: center;
    border-top: 1px solid var(--line-2);
    margin-top: 8px;
  }

  /* Imports */
  #releases .connect-imports {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #releases .connect-imports__row,
  #releases .connect-imports__qr {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    background: var(--paper-2);
    border: 1px solid var(--line-2);
    border-radius: 10px;
  }
  #releases .connect-imports__qr {
    grid-template-columns: minmax(0, 1fr) auto;
    background: var(--warm);
    border-color: var(--line-2);
  }
  #releases .connect-imports__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: -0.02em;
  }
  #releases .connect-imports__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
  }
  #releases .connect-imports__sub {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-4);
    margin-top: 2px;
    letter-spacing: 0.03em;
    line-height: 1.4;
  }
  #releases .connect-imports__sub b { color: var(--ink-2); font-weight: 700; }
  #releases .connect-imports__cta {
    appearance: none;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink-2);
    padding: 7px 12px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
  }
  #releases .connect-imports__cta:hover {
    color: var(--ink);
    border-color: var(--line-strong);
  }

  /* ─── Fan detail modal ──────────────────────────────────────── */
  .ac-fan-detail__overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 15, 10, 0.36);
    backdrop-filter: blur(2px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .ac-fan-detail {
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    background: var(--ac-color-paper);
    border-radius: var(--ac-radius-2xl);
    border: 1px solid var(--ac-color-line);
    box-shadow: 0 24px 64px -16px rgba(20,15,10,0.32);
    overflow: hidden;
    font-family: var(--ac-font-body, 'Inter', system-ui, sans-serif);
    display: flex;
    flex-direction: column;
  }
  .ac-fan-detail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--ac-color-line-subtle);
  }
  .ac-fan-detail__id {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
  }
  .ac-fan-detail__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--ac-font-mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex-shrink: 0;
  }
  .ac-fan-detail__id-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .ac-fan-detail__id-text h3 {
    margin: 0;
    font-family: var(--ac-font-display);
    font-size: 22px;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--ac-color-ink);
  }
  .ac-fan-detail__status {
    font-family: var(--ac-font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    align-self: flex-start;
  }
  .ac-fan-detail__status--active {
    color: #16734a;
    background: rgba(34, 197, 94, 0.12);
  }
  .ac-fan-detail__status--opted-out {
    color: var(--ac-color-accent);
    background: var(--ac-color-accent-chip);
  }
  .ac-fan-detail__close {
    appearance: none;
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--ac-color-t3);
    cursor: pointer;
    padding: 0 4px;
  }
  .ac-fan-detail__close:hover { color: var(--ac-color-ink); }

  .ac-fan-detail__body {
    padding: 18px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .ac-fan-detail__section h4 {
    margin: 0 0 10px;
    font-family: var(--ac-font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ac-color-t3);
  }
  .ac-fan-detail__section dl {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
  }
  .ac-fan-detail__section dl > div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 14px;
    align-items: baseline;
  }
  .ac-fan-detail__section dt {
    font-family: var(--ac-font-mono);
    font-size: 11px;
    color: var(--ac-color-t3);
    letter-spacing: 0.04em;
  }
  .ac-fan-detail__section dd {
    margin: 0;
    font-size: 13.5px;
    color: var(--ac-color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ac-fan-detail__section dd a {
    color: var(--ac-color-ink);
    text-decoration: none;
    border-bottom: 1px dashed var(--ac-color-line);
  }
  .ac-fan-detail__section dd a:hover {
    border-bottom-color: var(--ac-color-ink);
  }

  /* Merch section */
  .ac-fan-detail__merch-loading,
  .ac-fan-detail__merch-empty {
    font-family: var(--ac-font-mono);
    font-size: 11px;
    color: var(--ac-color-t3);
    letter-spacing: 0.04em;
    line-height: 1.5;
    padding: 12px 14px;
    background: var(--ac-color-nested);
    border-radius: 8px;
  }
  .ac-fan-detail__merch-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }
  .ac-fan-detail__merch-summary > div {
    background: var(--ac-color-nested);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .ac-fan-detail__merch-summary .lbl {
    font-family: var(--ac-font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ac-color-t3);
  }
  .ac-fan-detail__merch-summary .v {
    font-family: var(--ac-font-display);
    font-size: 20px;
    letter-spacing: -0.01em;
    color: var(--ac-color-ink);
  }
  .ac-fan-detail__order-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .ac-fan-detail__order {
    background: var(--ac-color-nested);
    border: 1px solid var(--ac-color-line-subtle);
    border-radius: 8px;
    padding: 10px 12px;
  }
  .ac-fan-detail__order-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
  }
  .ac-fan-detail__order-date {
    font-family: var(--ac-font-mono);
    font-size: 11px;
    color: var(--ac-color-t3);
    letter-spacing: 0.04em;
  }
  .ac-fan-detail__order-total {
    font-family: var(--ac-font-display);
    font-size: 14px;
    color: var(--ac-color-ink);
  }
  .ac-fan-detail__order-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .ac-fan-detail__order-items li {
    font-size: 12.5px;
    color: var(--ac-color-ink);
    line-height: 1.4;
  }
  .ac-fan-detail__order-items .variant {
    color: var(--ac-color-t3);
    font-size: 11px;
  }

  /* Recommended-for-an-Ad empty state — shown when no platform
     stats have loaded yet (or no platforms are connected). */
  #releases .reco-empty {
    grid-column: 1 / -1;
    padding: 24px 18px;
    text-align: center;
    background: var(--paper);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    line-height: 1.5;
  }
  #releases .reco-empty b { color: var(--ink); font-weight: 700; }

  /* Recommended-for-an-Ad post thumbnail. Positioned absolutely so
     it sits under the platform pill + score chip + caption overlay.
     z-index 0 keeps it below the ::after dark gradient that gives
     the caption text contrast. */
  #releases .reco__thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    display: block;
  }

  /* ─── Fan detail modal — editable mode ─────────────────────────
     Name input replaces the h3, contact fields become inputs, and
     a footer with Save button + status text sits below the body. */
  .ac-fan-detail__name-input {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px dashed transparent;
    font-family: var(--ac-font-display);
    font-size: 22px;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--ac-color-ink);
    padding: 2px 0;
    width: 100%;
    min-width: 0;
  }
  .ac-fan-detail__name-input:focus,
  .ac-fan-detail__name-input:hover {
    outline: none;
    border-bottom-color: var(--ac-color-line);
  }
  .ac-fan-detail__form dd input {
    appearance: none;
    width: 100%;
    background: var(--ac-color-nested);
    border: 1px solid var(--ac-color-line-subtle);
    border-radius: 6px;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 13px;
    color: var(--ac-color-ink);
  }
  .ac-fan-detail__form dd input:focus {
    outline: none;
    border-color: var(--ac-color-t2);
    background: var(--ac-color-paper);
  }
  /* Metro rollup hint — shows under the City input when (city, state)
     rolls up to a major market (e.g. Sedalia, NC → Greensboro, NC).
     Hidden by default; .is-active flips it on. */
  .ac-fan-detail__metro-hint {
    display: none;
    margin-top: 4px;
    font-family: var(--ac-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: var(--ac-color-t2);
    text-transform: uppercase;
  }
  .ac-fan-detail__metro-hint.is-active { display: block; }
  .ac-fan-detail__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid var(--ac-color-line-subtle);
  }
  .ac-fan-detail__save-status {
    font-family: var(--ac-font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ac-color-success, #16734a);
  }
  .ac-fan-detail__save {
    appearance: none;
    background: var(--ac-color-ink);
    color: var(--ac-color-paper);
    border: 1px solid var(--ac-color-ink);
    border-radius: 999px;
    padding: 9px 18px;
    font-family: var(--ac-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .ac-fan-detail__save:hover { opacity: 0.88; }
  .ac-fan-detail__save:disabled { opacity: 0.5; cursor: wait; }

  /* ─── Press Hit composer modal ─────────────────────────────────
     Same overlay style as the task composer + assignee picker so the
     modal language stays consistent across the Marketing tab. */
  .ac-press-composer__overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 15, 10, 0.36);
    backdrop-filter: blur(2px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .ac-press-composer {
    width: 100%;
    max-width: 520px;
    background: var(--ac-color-paper);
    border-radius: var(--ac-radius-2xl);
    border: 1px solid var(--ac-color-line);
    box-shadow: 0 24px 64px -16px rgba(20,15,10,0.32);
    overflow: hidden;
    font-family: var(--ac-font-body, 'Inter', system-ui, sans-serif);
  }
  .ac-press-composer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--ac-color-line-subtle);
  }
  .ac-press-composer__head h3 {
    margin: 0;
    font-family: var(--ac-font-display);
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--ac-color-ink);
  }
  .ac-press-composer__close {
    appearance: none;
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--ac-color-t3);
    cursor: pointer;
    padding: 0 4px;
  }
  .ac-press-composer__close:hover { color: var(--ac-color-ink); }
  .ac-press-composer__form {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .ac-press-composer__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .ac-press-composer__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .ac-press-composer__field--full {
    grid-column: 1 / -1;
  }
  .ac-press-composer__field > span {
    font-family: var(--ac-font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ac-color-t3);
  }
  .ac-press-composer__field em {
    font-style: normal;
    font-weight: 600;
    color: var(--ac-color-muted);
    text-transform: none;
    letter-spacing: 0.04em;
    margin-left: 4px;
  }
  .ac-press-composer__field input,
  .ac-press-composer__field select {
    appearance: none;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ac-color-line);
    border-radius: 8px;
    background: var(--ac-color-nested);
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ac-color-ink);
  }
  .ac-press-composer__field input:focus,
  .ac-press-composer__field select:focus {
    outline: none;
    border-color: var(--ac-color-ink);
    background: var(--ac-color-paper);
  }
  .ac-press-composer__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    gap: 12px;
  }
  .ac-press-composer__actions-right {
    display: flex;
    gap: 8px;
  }
  .ac-press-composer__actions button {
    appearance: none;
    border-radius: 999px;
    padding: 9px 16px;
    font-family: var(--ac-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .ac-press-composer__cancel {
    background: transparent;
    border: 1px solid var(--ac-color-line);
    color: var(--ac-color-t2);
  }
  .ac-press-composer__del {
    background: transparent;
    border: 1px solid var(--ac-color-accent-chip);
    color: var(--ac-color-accent);
  }
  .ac-press-composer__del:hover {
    background: var(--ac-color-accent-chip);
  }
  .ac-press-composer__ok {
    background: var(--ac-color-ink);
    border: 1px solid var(--ac-color-ink);
    color: var(--ac-color-paper);
  }
  .ac-press-composer__ok:hover { opacity: 0.88; }

  /* Press row hover + link styling */
  #releases .press-row {
    cursor: pointer;
    transition: background .12s ease;
  }
  #releases .press-row:hover {
    background: var(--warm);
  }
  #releases .press-row--empty {
    cursor: default;
    padding: 20px 12px;
    color: var(--ink-4);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-align: center;
    grid-template-columns: 1fr;
    display: block;
  }
  #releases .press-row--empty:hover { background: transparent; }
  #releases .press-row__link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-bottom-color .12s ease;
  }
  #releases .press-row:hover .press-row__link {
    border-bottom-color: var(--line-strong);
  }

  /* ─── Email usage meter (top of Connect rail) ───────────────── */
  #releases .connect-usage {
    padding: 12px 20px 14px;
    border-bottom: 1px solid var(--line-2);
    background: var(--paper-2);
  }
  #releases .connect-usage__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  #releases .connect-usage__lbl {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-4);
  }
  #releases .connect-usage__val {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
  }
  #releases .connect-usage__val b {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  #releases .connect-usage__sep {
    color: var(--ink-4);
    margin: 0 2px;
  }
  #releases .connect-usage__bar {
    height: 4px;
    background: var(--warm-2);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
  }
  #releases .connect-usage__fill {
    height: 100%;
    width: 0%;
    background: var(--green);
    border-radius: 2px;
    transition: width .35s ease, background .15s ease;
  }
  #releases .connect-usage__fill--warn { background: var(--amber); }
  #releases .connect-usage__fill--over { background: var(--crimson); }
  #releases .connect-usage__hint {
    display: block;
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-4);
    letter-spacing: 0.03em;
  }

  /* ─── Hero next-3-releases spotlight switcher ───────────────── */
  #releases .hero__next {
    width: 100%;
    max-width: 320px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  #releases .hero__next-lbl {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    align-self: flex-end;
  }
  #releases .hero__next-tiles {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  #releases .hero__next-tile {
    appearance: none;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px 14px 10px 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
    color: #fff;
  }
  #releases .hero__next-tile:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.28);
    transform: translateX(-2px);
  }
  #releases .hero__next-art {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    /* Solid bright fill — visible against dark hero. When JS sets an
       inline background:url(...), that wins over this declaration
       (inline overrides external CSS) so real artwork renders cleanly. */
    background: #8B1A2B;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 4px 14px -4px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    overflow: hidden;
    text-shadow: 0 1px 1px rgba(0,0,0,0.35);
  }
  #releases .hero__next-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  #releases .hero__next-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #releases .hero__next-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.04em;
  }
  #releases .hero__next-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  #releases .hero__next-dot--upcoming { background: var(--amber); }
  #releases .hero__next-dot--live { background: var(--green); }

  /* ─── Pre-hydration gate for the Marketing tab ──────────────────
     The static mockup data in app.html (Parking Lots stats, 7
     hardcoded release rows, sample reco cards, Whitsett playlists,
     etc.) flashes briefly before marketing-wiring.js's first paint
     replaces it with the band's real data. Hide those sections
     while data-ac-hydrating is set; marketing-wiring removes the
     attr after refresh() completes its first paint cycle. Fade in
     so the transition feels smooth instead of pop-in.

     Toolbar (Add Release button) + section headers / eyebrows stay
     visible since they're chrome, not data. */
  #releases[data-ac-hydrating] .hero,
  #releaseshub[data-ac-hydrating] .rls-prep,
  #releaseshub[data-ac-hydrating] .rls-list,
  #releases[data-ac-hydrating] .connect-side,
  #releases[data-ac-hydrating] .recos,
  #releases[data-ac-hydrating] .ads-strip,
  #releases[data-ac-hydrating] .ads-grid,
  #releases[data-ac-hydrating] .press-list,
  #releases[data-ac-hydrating] .pl-list {
    opacity: 0;
  }
  #releases .hero,
  #releaseshub .rls-prep,
  #releaseshub .rls-list,
  #releases .connect-side,
  #releases .recos,
  #releases .ads-strip,
  #releases .ads-grid,
  #releases .press-list,
  #releases .pl-list {
    transition: opacity 180ms ease-out;
  }

  /* ─── rls-workspace 2-col modifier ───────────────────────────────
     The original 3-column layout (.rls-workspace) was Prep · List ·
     Connect rail. When the Release area moved to #releaseshub the
     Connect rail stayed behind on Marketing, so the hub workspace is
     2-column: Prep (left) · List (right). The `--no-connect` modifier
     reshapes the grid to match the layout in Ryan's screenshot.
     2026-06-01 relocation. */
  #releaseshub .rls-workspace.rls-workspace--no-connect {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
  #releaseshub .rls-workspace.rls-workspace--no-connect .rls-prep,
  #releaseshub .rls-workspace.rls-workspace--no-connect .rls-opp {
    grid-column: 1;
  }
  #releaseshub .rls-workspace.rls-workspace--no-connect .rls-list {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  @media (max-width: 920px) {
    #releaseshub .rls-workspace.rls-workspace--no-connect {
      grid-template-columns: 1fr;
    }
    #releaseshub .rls-workspace.rls-workspace--no-connect .rls-list {
      grid-column: 1;
      grid-row: auto;
    }
  }
  #releaseshub .rls-toolbar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 14px;
  }
  /* Padding on the hub container itself — matches Marketing tab's
     left/right gutters since the tab-content padding doesn't reach
     all the way here. */
  #releaseshub {
    padding: 24px 24px 60px;
  }

/* ════════════════════════════════════════════════════════════════════
   EMAIL DESIGNER MODAL — site-aware template generator. 4 template
   cards → Gemini-designed HTML preview → "Use this" drops into the
   broadcast composer.
   ════════════════════════════════════════════════════════════════════ */
.email-designer-modal { max-width: 760px; }
.email-designer-modal--split { max-width: min(1400px, 96vw); width: 96vw; max-height: 92vh; display: flex; flex-direction: column; }
.email-designer-modal--split .profile-modal__head { flex: 0 0 auto; }
.email-designer { display: flex; flex-direction: column; gap: 18px; padding: 8px 2px 12px; }

/* ── Two-pane split layout ──────────────────────────────────── */
.email-designer__split {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,0.08);
}
@media (max-width: 900px) {
  .email-designer__split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
}

/* Both panes */
.ed-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fafaf8;
}
.ed-pane--editor {
  border-right: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  position: relative;
}
.ed-pane--preview {
  background: #f3f3f1;
  padding: 0;
  overflow: hidden;
  position: relative;
}

/* Left pane: scrolling content + sticky action bar */
.ed-pane__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ed-pane__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid rgba(0,0,0,0.08);
  background: linear-gradient(to bottom, #fafaf7 0%, #ffffff 100%);
  align-items: center;
}
.ed-pane__actions[hidden] { display: none !important; }

/* ── Editor action buttons ──────────────────────────────────────
   Hierarchy: ghost (Save, Test) → accent-outline (Schedule) →
   filled crimson primary (Use this). All same height, single-line
   text, icons on the left (or right for the primary). */
.ed-act {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: var(--ac-font-body, 'Inter', system-ui, sans-serif);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.06s ease;
  border: 1px solid transparent;
  background: transparent;
  color: #1a1714;
}
.ed-act:active { transform: translateY(1px); }
.ed-act__ic { display: inline-flex; align-items: center; justify-content: center; color: currentColor; opacity: 0.85; }
.ed-act__ic--right { font-size: 14px; line-height: 1; opacity: 1; }
.ed-act__lbl { display: inline-block; }

/* Ghost — quiet utility actions (Save, Test) */
.ed-act--ghost {
  background: #fff;
  border-color: rgba(0,0,0,0.14);
  color: #1a1714;
}
.ed-act--ghost:hover {
  border-color: rgba(0,0,0,0.30);
  background: #faf8f4;
}

/* Accent-outline — semi-prominent action (Schedule) */
.ed-act--accent {
  background: #fff;
  border-color: rgba(139,26,43,0.45);
  color: #8B1A2B;
}
.ed-act--accent:hover {
  background: rgba(139,26,43,0.06);
  border-color: #8B1A2B;
}

/* Primary — the commit action (Use this) */
.ed-act--primary {
  background: #8B1A2B;
  border-color: #8B1A2B;
  color: #fff;
  margin-left: auto;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 0 0 1px rgba(139,26,43,0) inset;
}
.ed-act--primary:hover {
  background: #a91a31;
  border-color: #a91a31;
  box-shadow: 0 2px 6px rgba(139,26,43,0.30);
}
.ed-act:disabled,
.ed-act[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Send-test-email overlay ───────────────────────────────── */
.ed-test-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 12, 0.55);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(2px);
}
.ed-test-overlay[hidden] { display: none !important; }
.ed-test-card {
  width: min(420px, 100%);
  background: #fff;
  border-radius: 14px;
  padding: 22px 24px 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--ac-font-body, 'Inter', system-ui, sans-serif);
  color: #1a1714;
}
.ed-test-card__title {
  font-family: var(--ac-font-display, 'Archivo Black', sans-serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 22px;
  color: #1a1714;
  line-height: 1.05;
}
.ed-test-card__sub {
  font-family: var(--ac-font-body, 'Inter', system-ui, sans-serif);
  font-size: 13.5px;
  color: #5a544c;
  line-height: 1.45;
  margin-top: 6px;
}
.ed-test-card .ed-field__label {
  font-family: var(--ac-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5a544c;
}
.ed-test-card .ed-input {
  font-family: var(--ac-font-body, 'Inter', system-ui, sans-serif);
  font-size: 14px;
  letter-spacing: -0.005em;
}
.ed-test-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
  font-family: var(--ac-font-body, 'Inter', system-ui, sans-serif);
}
.ed-test-card__actions .ed-link,
.ed-test-card__actions .btn-pill {
  font-family: var(--ac-font-body, 'Inter', system-ui, sans-serif);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.ed-test-card .ed-field__hint {
  font-family: var(--ac-font-body, 'Inter', system-ui, sans-serif);
  margin-top: 8px;
  min-height: 14px;
}
.ed-test-card .ed-field__hint.is-error { color: #8B1A2B; }
.ed-test-card .ed-field__hint.is-ok    { color: #1f7a3a; }
.ed-test-card--wide { width: min(520px, 100%); }

/* ─── Audience picker (schedule overlay) ─────────────────────── */
.ed-aud {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.ed-aud__modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ed-aud__mode {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--ac-font-body, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: #1a1714;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ed-aud__mode:hover { border-color: rgba(0,0,0,0.30); }
.ed-aud__mode.is-active {
  background: #1a1714;
  border-color: #1a1714;
  color: #fff;
}
.ed-aud__panel {
  background: #fafaf7;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ed-aud__panel[hidden] { display: none !important; }
.ed-aud__panel-head { display: flex; gap: 6px; align-items: center; }
.ed-aud__panel-head .ed-input--mini { flex: 1 1 auto; }
.ed-input--mini { padding: 6px 10px; font-size: 12px; }
.ed-aud__bulk {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 6px;
  padding: 5px 10px;
  font-family: var(--ac-font-body, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 600;
  color: #5a544c;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.ed-aud__bulk:hover { border-color: rgba(0,0,0,0.30); color: #1a1714; }

.ed-aud__empty {
  grid-column: 1 / -1;
  font-family: var(--ac-font-body, 'Inter', sans-serif);
  font-size: 12px;
  line-height: 1.45;
  color: #707070;
  padding: 10px 6px;
}
.ed-aud__empty--err { color: #b14040; }
.ed-aud__list {
  max-height: 220px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  padding: 4px 2px;
}
.ed-aud__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--ac-font-body, 'Inter', sans-serif);
  font-size: 12.5px;
  color: #1a1714;
  user-select: none;
}
.ed-aud__row:hover { background: rgba(0,0,0,0.04); }
.ed-aud__row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  accent-color: #8B1A2B;
  cursor: pointer;
}
.ed-aud__row-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-aud__row-count {
  flex: 0 0 auto;
  font-family: var(--ac-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  color: #888;
}
.ed-aud__row.is-checked .ed-aud__row-label { font-weight: 600; }
.ed-aud__row.is-checked { background: rgba(139,26,43,0.06); }

.ed-aud__summary {
  font-family: var(--ac-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: #5a544c;
  padding-top: 4px;
  border-top: 1px dashed rgba(0,0,0,0.08);
  margin-top: 2px;
}
.ed-aud__summary strong { color: #1a1714; }

/* ── Saved drafts list ─────────────────────────────────────── */
.ed-drafts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ed-draft {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}
.ed-draft:hover { border-color: rgba(0,0,0,0.22); background: #fafaf8; }
.ed-draft__body { flex: 1 1 auto; min-width: 0; }
.ed-draft__title {
  font-family: var(--ac-font-body, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: #1a1714;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ed-draft__meta {
  font-family: var(--ac-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  color: #888;
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.ed-draft__status {
  font-family: var(--ac-font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 2px 6px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.ed-draft__status--draft     { background: rgba(0,0,0,0.08); color: #555; }
.ed-draft__status--scheduled { background: rgba(139,26,43,0.10); color: #8B1A2B; }
.ed-draft__status--sent      { background: rgba(31,122,58,0.12); color: #1f7a3a; }
.ed-draft__status--sending   { background: rgba(212,140,0,0.14); color: #b07000; }
.ed-draft__status--failed    { background: rgba(139,26,43,0.18); color: #8B1A2B; }
.ed-draft__del {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
}
.ed-draft__del:hover { color: #8B1A2B; background: rgba(139,26,43,0.08); }

/* Sections inside the editor */
.ed-section { display: flex; flex-direction: column; gap: 10px; }
.ed-section[hidden] { display: none !important; }
.ed-section__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #777;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}

/* Template tiles — compact 2×2 with monoline icons */
.ed-tpl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.ed-tpl {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 14px 14px 13px;
  border-radius: 12px;
  border: 1px solid rgba(15, 13, 11, 0.08);
  background: #fff;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
  font-family: inherit;
  text-align: left;
  position: relative;
}
.ed-tpl:hover {
  border-color: rgba(139, 26, 43, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 13, 11, 0.05);
}
.ed-tpl:hover .ed-tpl__icon {
  background: linear-gradient(135deg, rgba(139, 26, 43, 0.12), rgba(139, 26, 43, 0.04));
  color: #8B1A2B;
  border-color: rgba(139, 26, 43, 0.18);
}
.ed-tpl.is-active {
  border-color: #8B1A2B;
  background: linear-gradient(180deg, rgba(139, 26, 43, 0.03), rgba(139, 26, 43, 0.01));
  box-shadow: 0 0 0 1px #8B1A2B, 0 6px 18px rgba(139, 26, 43, 0.10);
}
.ed-tpl.is-active .ed-tpl__icon {
  background: linear-gradient(135deg, #8B1A2B, #8B1A2B);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(139, 26, 43, 0.28);
}
.ed-tpl__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(15, 13, 11, 0.045), rgba(15, 13, 11, 0.015));
  border: 1px solid rgba(15, 13, 11, 0.06);
  color: #2a2522;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  flex: 0 0 auto;
}
.ed-tpl__icon svg { width: 18px; height: 18px; display: block; }
.ed-tpl__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ed-tpl__name {
  font-size: 13.5px; font-weight: 650; color: #15110f;
  letter-spacing: -0.01em; line-height: 1.15;
}
.ed-tpl__sub {
  font-size: 11.5px; font-weight: 500; color: rgba(15, 13, 11, 0.52);
  letter-spacing: 0; line-height: 1.25;
}
.ed-tpl.is-active .ed-tpl__sub { color: rgba(139, 26, 43, 0.78); }
/* Legacy emoji span — hidden if any old draft templates still ship it */
.ed-tpl__emoji { display: none; }

/* Merch image pickers — header photo + per-product image swap.
   Rendered inside #emailDesignerMerchImagePicker right after the
   editable fields. Thumb size lines up with the field-label rhythm. */
.ed-merch-images {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}
.ed-merch-images__section {
  display: flex;
  flex-direction: column;
}
.ed-merch-images__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ed-merch-thumb {
  width: 54px;
  height: 54px;
  padding: 0;
  border: 2px solid rgba(15, 13, 11, 0.08);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ed-merch-thumb img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
.ed-merch-thumb:hover {
  border-color: rgba(139, 26, 43, 0.5);
  transform: translateY(-1px);
}
.ed-merch-thumb.is-active {
  border-color: #8B1A2B;
  box-shadow: 0 0 0 1px #8B1A2B, 0 4px 10px rgba(139, 26, 43, 0.18);
}

/* Field-row toggle — lives inside .ed-field with .ed-field--toggle
   so the label sits on the left and the switch right-aligns. Uses
   !important because the base `.ed-field` rule is defined later in
   this stylesheet and would otherwise re-apply column direction. */
.ed-field--toggle {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.ed-toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex: 0 0 auto;
  cursor: pointer;
}
.ed-toggle input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.ed-toggle__slider {
  position: absolute; inset: 0;
  background: rgba(15, 13, 11, 0.18);
  border-radius: 999px;
  transition: background .18s ease;
}
.ed-toggle__slider::before {
  content: '';
  position: absolute;
  left: 2px; top: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform .18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.ed-toggle input:checked + .ed-toggle__slider {
  background: #8B1A2B;
}
.ed-toggle input:checked + .ed-toggle__slider::before {
  transform: translateX(16px);
}

/* Release list (left pane) */
.ed-release-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 320px; overflow-y: auto;
  padding-right: 2px;
}
.ed-release-empty {
  padding: 16px 12px;
  text-align: center;
  font-size: 12px;
  color: #888;
  background: rgba(0,0,0,0.03);
  border-radius: 8px;
}
.ed-release-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .15s, background .15s;
}
.ed-release-tile:hover {
  border-color: rgba(139,26,43,0.5);
  background: rgba(139,26,43,0.03);
}
.ed-release-tile.is-active {
  border-color: #8B1A2B;
  background: rgba(139,26,43,0.06);
  box-shadow: inset 0 0 0 1px #8B1A2B;
}
.ed-release-art {
  width: 42px; height: 42px;
  border-radius: 4px;
  object-fit: cover;
  flex: 0 0 auto;
  background: #f0eadc;
}
.ed-release-art--ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #8B1A2B;
  background: linear-gradient(135deg, #f0eadc, #ead9c2);
}
.ed-release-meta { flex: 1; min-width: 0; }
.ed-release-name {
  font-size: 12.5px; font-weight: 700; color: #1a1714;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ed-release-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: #888;
  font-family: ui-monospace, monospace;
  margin-top: 2px;
}
.ed-release-pill {
  font-size: 9px; font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  font-family: ui-monospace, monospace;
}
.ed-release-pill--live    { background: rgba(31,124,78,0.12); color: #1f7c4e; }
.ed-release-pill--upcoming { background: rgba(139,26,43,0.12); color: #8B1A2B; }

/* Fields */
.ed-field { display: flex; flex-direction: column; gap: 6px; }
.ed-field__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
}
.ed-field__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ed-field__hint { font-size: 11px; color: #888; }
/* L / C / R alignment toggle next to the message label. Tight pill
   group, only the active button has a filled background. */
.ed-align {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 6px;
}
.ed-align__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  border-radius: 4px;
  color: #707070;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.ed-align__btn:hover { color: #1a1714; }
.ed-align__btn.is-active {
  background: #1a1714;
  color: #fff;
}
.ed-input {
  padding: 9px 11px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  font-size: 13px;
  font-family: inherit;
  color: #1a1714;
}
.ed-input--mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: 0.02em; }
.ed-input:focus, .ed-textarea:focus {
  outline: none;
  border-color: #8B1A2B;
  box-shadow: 0 0 0 3px rgba(139,26,43,0.12);
}
.ed-textarea {
  width: 100%;
  resize: vertical;
  min-height: 110px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  color: #1a1714;
}

/* Color picker row */
.ed-color-row { display: flex; gap: 8px; align-items: center; }
/* `hidden` attribute must beat the flex/display rules on the BG
   sub-wraps — otherwise toggling Color↔Photo leaves both visible. */
#brandKitBgColorWrap[hidden],
#brandKitBgPhotoWrap[hidden],
#brandKitBgBlurWrap[hidden] { display: none !important; }
.ed-color-swatch {
  width: 36px; height: 36px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.ed-toggle-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #1a1714;
  cursor: pointer;
}

/* Brand Kit details panel */
.ed-brandkit {
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
  padding: 4px 0;
}
.ed-brandkit > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #555;
  user-select: none;
}
.ed-brandkit > summary::after { content: "▾"; float: right; font-size: 10px; color: #888; }
.ed-brandkit[open] > summary::after { content: "▴"; }
.ed-brandkit > summary::-webkit-details-marker { display: none; }
.ed-brandkit__body {
  padding: 4px 14px 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.ed-brandkit__actions {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 4px;
}
.ed-link {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 11.5px;
  color: #8B1A2B;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ed-link:hover { color: #8a1428; }
.ed-placeholders { margin: 4px 14px 12px; font-size: 12px; padding-left: 18px; }
.ed-placeholders li { margin: 4px 0; }
.ed-placeholders code { font-family: ui-monospace, monospace; background: rgba(0,0,0,0.05); padding: 1px 4px; border-radius: 3px; font-size: 11px; }

/* Slider with value chip — used for grain intensity */
.ed-slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ed-slider-val {
  font-family: var(--ac-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  color: #1a1714;
  background: rgba(0,0,0,0.05);
  padding: 2px 7px;
  border-radius: 4px;
  min-width: 28px;
  text-align: center;
}
.ed-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(0,0,0,0.10);
  border-radius: 999px;
  outline: none;
  margin: 6px 0 2px;
  cursor: pointer;
}
.ed-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(0,0,0,0.10);
  border-radius: 999px;
}
.ed-slider::-moz-range-track {
  height: 4px;
  background: rgba(0,0,0,0.10);
  border-radius: 999px;
}
.ed-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #8B1A2B;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.22);
  cursor: grab;
  margin-top: -6px;
  transition: transform 0.08s ease;
}
.ed-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #8B1A2B;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.22);
  cursor: grab;
}
.ed-slider:active::-webkit-slider-thumb { transform: scale(1.08); cursor: grabbing; }
.ed-slider:focus { outline: none; }
.ed-slider:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(139,26,43,0.18), 0 1px 3px rgba(0,0,0,0.22);
}
.ed-slider:focus::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(139,26,43,0.18), 0 1px 3px rgba(0,0,0,0.22);
}

/* Segmented control (L/C/R toggles) */
.ed-segmented {
  display: inline-flex;
  align-self: flex-start;
  width: auto;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.ed-seg {
  appearance: none;
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.ed-seg:hover { color: #1a1714; }
.ed-seg.is-active {
  background: #1a1714;
  color: #fff;
}

/* Editable template fields */
.ed-show-hint {
  font-family: var(--ac-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: #5a544c;
  letter-spacing: 0.02em;
  margin: 8px 0 4px;
}
.ed-fields { display: flex; flex-direction: column; gap: 10px; }
.ed-fields:empty { display: none; }
.ed-fields .ed-field__label { font-size: 10.5px; }

/* Saved-look preset chips */
.ed-presets {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 8px;
}
.ed-preset {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fafaf8;
  cursor: pointer;
  font-size: 11.5px;
  color: #1a1714;
  user-select: none;
}
.ed-preset:hover { border-color: rgba(139,26,43,0.5); }
.ed-preset.is-active { border-color: #8B1A2B; background: rgba(139,26,43,0.06); box-shadow: inset 0 0 0 1px #8B1A2B; }
.ed-preset__swatch {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
}
.ed-preset__del {
  background: transparent; border: none; padding: 0;
  margin-left: 2px; cursor: pointer;
  color: #888; font-size: 12px; line-height: 1;
}
.ed-preset__del:hover { color: #b14040; }
.ed-preset-add {
  display: flex; gap: 6px; margin-top: 8px;
}
.ed-preset-add input { flex: 1; }

/* RIGHT PANE — preview */
.ed-empty {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  padding: 40px;
  text-align: center;
  color: #888;
}
.ed-empty[hidden] { display: none !important; }
.ed-empty__icon {
  font-size: 48px;
  color: #8B1A2B;
  opacity: 0.4;
}
.ed-empty__title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1714;
  letter-spacing: -0.01em;
}
.ed-empty__sub {
  font-size: 13px;
  max-width: 320px;
  line-height: 1.5;
}
.ed-busy {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100% - 36px));
  z-index: 5;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
.ed-busy[hidden] { display: none !important; }
.ed-frame {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: none;
  border-radius: 0;
  background: #fff;
}
.ed-frame[hidden] { display: none !important; }
.ed-status {
  font-size: 11px;
  color: #888;
  padding: 8px 0 0;
  min-height: 16px;
}
.email-designer__site {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  background: var(--ac-color-surface, #fff);
}
.email-designer__templates {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.email-designer__tpl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: var(--ac-color-surface, #fff);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
}
.email-designer__tpl:hover {
  border-color: var(--ac-color-ink, #0e0c0b);
  transform: translateY(-1px);
  background: rgba(0,0,0,0.02);
}
.email-designer__tpl-emoji { font-size: 22px; line-height: 1; }
.email-designer__tpl-name {
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ac-color-ink, #0e0c0b);
}
.email-designer__tpl-sub { font-size: 11.5px; color: #888; }

.email-designer__busy {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(0,0,0,0.04);
  font-family: var(--ac-font-mono, ui-monospace, monospace);
  font-size: 12.5px;
  color: #555;
}
.email-designer__busy[hidden] { display: none !important; }
.email-designer__preview[hidden] { display: none !important; }
.email-designer__release-picker[hidden] { display: none !important; }
.email-designer__templates[hidden] { display: none !important; }

.email-designer__release-picker {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
}
.email-designer__release-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.email-designer__release-title {
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ac-color-ink, #0e0c0b);
}
.email-designer__release-sub {
  font-size: 12.5px; color: #707070; margin-top: 2px;
}
.email-designer__release-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 420px; overflow-y: auto;
  padding-right: 4px;
}
.email-designer__release-empty {
  padding: 24px 16px; text-align: center;
  font-size: 13px; color: #888;
  background: rgba(255,255,255,0.6);
  border-radius: 8px;
}
.email-designer__release-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  font-family: inherit;
}
.email-designer__release-tile:hover {
  border-color: rgba(177,64,64,0.6);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.email-designer__release-art {
  width: 56px; height: 56px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 auto;
  background: #f0eadc;
}
.email-designer__release-art--ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #b14040;
  background: linear-gradient(135deg, #f0eadc, #ead9c2);
}
.email-designer__release-meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.email-designer__release-name {
  font-size: 14px; font-weight: 700; letter-spacing: -0.005em;
  color: var(--ac-color-ink, #0e0c0b);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.email-designer__release-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: #888;
  font-family: var(--ac-font-mono, ui-monospace, monospace);
}
.email-designer__release-type {
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.email-designer__release-dot { color: #ccc; }
.email-designer__release-pill {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  font-family: var(--ac-font-mono, ui-monospace, monospace);
}
.email-designer__release-pill--live    { background: rgba(31,124,78,0.12);  color: #1f7c4e; }
.email-designer__release-pill--upcoming { background: rgba(177,64,64,0.12); color: #b14040; }

.email-designer__message-wrap {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(177,64,64,0.05);
  border: 1px solid rgba(177,64,64,0.18);
}
.email-designer__message-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b14040;
}
.email-designer__message-wrap textarea {
  width: 100%;
  resize: vertical;
  min-height: 90px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: #1a1714;
}
.email-designer__message-wrap textarea:focus {
  outline: none;
  border-color: #b14040;
  box-shadow: 0 0 0 3px rgba(177,64,64,0.12);
}
.email-designer__message-hint {
  font-size: 11.5px;
  color: #888;
}
.email-designer__busy-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 13px; font-weight: 600; color: #222;
  letter-spacing: -0.005em;
}
.email-designer__busy-pct {
  font-size: 12px; font-weight: 700;
  color: #b14040;
  font-variant-numeric: tabular-nums;
}
.email-designer__busy-bar {
  position: relative;
  width: 100%; height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  overflow: hidden;
}
.email-designer__busy-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #b14040 0%, #e26a3d 60%, #f0a449 100%);
  transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.email-designer__busy-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: ed-busy-shimmer 1.6s linear infinite;
}
@keyframes ed-busy-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.email-designer__busy-step {
  font-size: 11.5px; color: #707070;
  letter-spacing: 0.005em;
}
.email-designer__busy-spin {
  width: 16px; height: 16px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: ad-creator-spin 0.7s linear infinite;
}
.email-designer__preview {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
}
.email-designer__preview-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
}
.email-designer__preview-actions { display: flex; gap: 8px; }
.email-designer__placeholders {
  font-size: 11.5px;
  background: rgba(0,0,0,0.03);
  padding: 8px 12px;
  border-radius: 8px;
}
.email-designer__placeholders summary {
  font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10.5px;
  color: #555;
  cursor: pointer;
}
.email-designer__placeholders ul { margin: 8px 0 0; padding-left: 18px; }
.email-designer__placeholders li { margin-bottom: 4px; line-height: 1.4; }
.email-designer__placeholders code {
  background: rgba(0,0,0,0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}
.email-designer__status {
  font-family: var(--ac-font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  padding: 8px 0;
}
.email-designer__status:empty { display: none; }

/* ════════════════════════════════════════════════════════════════════
   AD CREATOR MODAL — in-app Meta campaign builder. Sits on top of the
   profile-overlay infrastructure so styling matches other modals. The
   form posts to /api/meta/ads/campaign-create and the result paints
   straight back into the campaigns table.
   ════════════════════════════════════════════════════════════════════ */
.ad-creator-modal { max-width: 1080px; }

/* Two-column campaign builder: form on the left (scrollable),
   sticky preview pane on the right. Collapses to a single column
   below 880px viewport so phones / narrow windows still work. */
.ad-creator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.ad-creator-layout__form { min-width: 0; }
@media (max-width: 879px) {
  .ad-creator-layout { grid-template-columns: 1fr; }
}

/* Preview pane — sticky inside the scrolling modal body. */
.ad-creator-preview-pane {
  position: sticky;
  top: 0;
  align-self: start;
}
.ad-creator-preview-pane__sticky {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ad-creator-preview-pane__label {
  font-family: var(--ac-font-mono, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-color-t3, #707070);
}
/* ───────────────────────────────────────────────────────────────
   IG REEL PREVIEW — exact-clone Instagram Reels chrome around the
   uploaded creative. Phone-shaped frame, top tab pills, right icon
   rail (like/comment/share/save/more), bottom overlay (avatar +
   handle + Sponsored badge + caption + CTA + audio), and a faux
   IG nav bar at the bottom. Everything is informational only —
   the actual video sits underneath, the chrome overlays on top.
   ─────────────────────────────────────────────────────────────── */
.ig-reel-preview {
  position: relative;
  width: 100%;
  max-width: 296px;
  aspect-ratio: 9 / 19.5;       /* iPhone-ish, taller than 9:16 to fit IG chrome */
  margin: 0 auto;
  background: #000;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 18px 50px -16px rgba(0,0,0,0.55),
              inset 0 0 0 2px rgba(255,255,255,0.06);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  isolation: isolate;
}

/* Media layer — the actual uploaded asset. Sits underneath all the
   IG chrome. cover so portrait video fills the frame natively. */
.ig-reel-preview__media {
  position: absolute;
  inset: 0;
  background: #0a0a0a;
}
.ig-reel-preview__asset {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  display: block;
  border: 0;
}
.ig-reel-preview__asset[hidden] { display: none !important; }
.ig-reel-preview__empty {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  text-align: center;
  padding: 24px;
}
/* Explicit hidden override — display:flex above beats the browser's
   default `[hidden] { display:none }` cascade, so without this
   the empty placeholder sits on top of an attached video. */
.ig-reel-preview__empty[hidden] { display: none !important; }
.ig-reel-preview__playbtn[hidden] { display: none !important; }
.ig-reel-preview__empty-icon {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
/* Tap-to-play overlay (used when controls would clutter the view). */
.ig-reel-preview__playbtn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 0;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 3;
  padding-left: 4px;          /* visually center the right-pointing triangle */
}
.ig-reel-preview__playbtn[hidden] { display: none; }

/* Top progress bar — multiple thin segments evoking a Stories
   progress feel; static decoration. */
.ig-reel-preview__progress {
  position: absolute;
  top: 8px; left: 12px; right: 12px;
  height: 2px;
  background: rgba(255,255,255,0.30);
  border-radius: 1px;
  z-index: 5;
  overflow: hidden;
}
.ig-reel-preview__progress span {
  display: block;
  width: 35%;
  height: 100%;
  background: #fff;
  border-radius: 1px;
}

/* Top bar — Reels / Following tabs + a tiny camera icon. */
.ig-reel-preview__top {
  position: absolute;
  top: 18px; left: 12px; right: 12px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 5;
  pointer-events: none;
}
.ig-reel-preview__tabs {
  display: flex; gap: 14px;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.ig-reel-preview__tabs span { opacity: 0.55; }
.ig-reel-preview__tabs span.is-active { opacity: 1; }
.ig-reel-preview__cam { opacity: 0.95; }

/* Right rail — vertical stack of action icons. */
.ig-reel-preview__rail {
  position: absolute;
  right: 8px;
  bottom: 130px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  z-index: 5;
}
.ig-reel-preview__rail-btn {
  background: transparent; border: 0; padding: 0; color: #fff;
  display: flex; flex-direction: column; align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
  cursor: default;
}
.ig-reel-preview__rail-song {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: linear-gradient(135deg, #ff7a00, #8B1A2B, #6a1d2a);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15);
  margin-top: 4px;
  animation: ig-reel-spin 8s linear infinite;
}
@keyframes ig-reel-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Bottom overlay — author row, caption, CTA, audio attribution.
   Sits above the nav bar. Gradient backdrop so white text reads. */
.ig-reel-preview__bottom {
  position: absolute;
  left: 0; right: 0; bottom: 46px;
  padding: 0 12px 12px 12px;
  z-index: 5;
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.30) 65%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.ig-reel-preview__author {
  display: flex; align-items: center; gap: 8px;
}
.ig-reel-preview__avatar {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7a00, #8B1A2B);
  box-shadow: inset 0 0 0 2px #000, 0 0 0 1.5px #fff;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}
.ig-reel-preview__author-meta {
  display: flex; flex-direction: column; line-height: 1.15;
}
.ig-reel-preview__handle {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
}
.ig-reel-preview__dot { opacity: 0.7; }
.ig-reel-preview__follow {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.85);
  font-weight: 700;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: default;
  pointer-events: auto;
}
.ig-reel-preview__sponsored {
  font-size: 11px;
  opacity: 0.85;
  margin-top: 1px;
}
.ig-reel-preview__caption {
  font-size: 12px;
  line-height: 1.35;
  max-height: 3.4em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.ig-reel-preview__caption:empty::before {
  content: "Your primary text shows here…";
  opacity: 0.55;
}
.ig-reel-preview__cta {
  align-self: stretch;
  background: #fff;
  color: #000;
  border: 0;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12.5px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
  pointer-events: auto;
  cursor: default;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.4);
}
.ig-reel-preview__audio {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; opacity: 0.92;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}

/* Bottom nav bar — IG's bottom 5-icon row. Faux. */
.ig-reel-preview__navbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44px;
  display: flex; align-items: center; justify-content: space-around;
  padding: 0 12px;
  background: rgba(0,0,0,0.92);
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 5;
  color: rgba(255,255,255,0.95);
}
.ig-reel-preview__navbar svg { opacity: 0.95; }
.ig-reel-preview__navbar-me {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7a00, #8B1A2B);
  box-shadow: inset 0 0 0 1.5px #000, 0 0 0 1.5px #fff;
}

/* Headline card — sits BELOW the phone. Mirrors form input. */
.ig-reel-preview__headline-card {
  margin-top: 10px;
  background: var(--ac-color-nested, rgba(0,0,0,0.03));
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 10px 12px;
}
.ig-reel-preview__headline-label {
  font-family: var(--ac-font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-color-t3, #707070);
  margin-bottom: 4px;
}
.ig-reel-preview__headline {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ac-color-ink, #0e0c0b);
}
.ig-reel-preview__headline:empty::before {
  content: "Headline preview";
  color: var(--ac-color-t3, #aaa);
  font-weight: 500;
}

/* Compact "creative attached" state in the drop zone — replaces the
   old big-video preview now that the actual playable view lives on
   the right. */
.ad-creator-drop__preview--compact {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(31,124,78,0.06);
  border: 1px solid rgba(31,124,78,0.20);
  border-radius: 12px;
  flex-direction: row;
}
.ad-creator-drop__preview-status {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ad-creator-drop__preview-icon {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: #1f7c4e;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}
.ad-creator-drop__preview-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--ac-color-ink, #0e0c0b);
}
.ad-creator-drop__preview-sub {
  font-family: var(--ac-font-mono, monospace);
  font-size: 10.5px;
  color: var(--ac-color-t3, #707070);
  margin-top: 1px;
}
.ad-creator-form { display: flex; flex-direction: column; gap: 18px; padding: 4px 2px 8px; }
.ad-creator-section {
  border: 1px solid var(--ac-color-line, rgba(0,0,0,0.08));
  border-radius: 12px;
  padding: 14px 16px 16px;
  margin: 0;
  background: var(--ac-color-surface, #fff);
}
.ad-creator-section legend {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-color-t3, #707070);
  padding: 0 6px;
  margin-left: 4px;
}
.ad-creator-field { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
/* `display: flex` above wins over the user-agent `[hidden]` rule, so
   we need an explicit override — otherwise both panels of a tab pair
   render simultaneously. Higher specificity than the parent rule. */
.ad-creator-form .ad-creator-field[hidden],
.ad-creator-section .ad-creator-field[hidden] { display: none !important; }
.ad-creator-field:first-of-type { margin-top: 4px; }
.ad-creator-field__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ac-color-t2, #444);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ad-creator-field__counter {
  font-family: var(--ac-font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ac-color-t3, #999);
  text-transform: none;
}
.ad-creator-field__hint {
  font-size: 11px;
  color: var(--ac-color-t3, #888);
  margin-top: 2px;
  line-height: 1.4;
}
.ad-creator-field input,
.ad-creator-field textarea,
.ad-creator-field select {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--ac-color-line, rgba(0,0,0,0.12));
  background: var(--ac-color-surface, #fff);
  color: var(--ac-color-ink, #0e0c0b);
  box-sizing: border-box;
}
.ad-creator-field input:focus,
.ad-creator-field textarea:focus,
.ad-creator-field select:focus {
  outline: none;
  border-color: var(--ac-color-accent, #0e0c0b);
  box-shadow: 0 0 0 3px rgba(14,12,11,0.08);
}
.ad-creator-field textarea { resize: vertical; min-height: 56px; font-family: inherit; }
.ad-creator-row { display: flex; gap: 10px; margin-top: 12px; }
.ad-creator-row .ad-creator-field { margin-top: 0; flex: 1; }
.ad-creator-field--half { flex: 1; }
.ad-creator-field--third { flex: 0 0 calc(33.333% - 6px); }
.ad-creator-field--two-thirds { flex: 1 1 auto; }
.ad-creator-field--quarter { flex: 0.6; }
.ad-creator-input-prefixed {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--ac-color-line, rgba(0,0,0,0.12));
  background: var(--ac-color-surface, #fff);
}
.ad-creator-input-prefixed input {
  border: 0; padding: 10px 0; flex: 1; min-width: 0;
}
.ad-creator-input-prefixed input:focus { box-shadow: none; }
.ad-creator-input-prefixed span {
  font-size: 13px; font-weight: 600;
  color: var(--ac-color-t3, #888);
}
/* Drafts panel — slides down from the modal header. Shows saved
   campaign drafts; click loads the form back, trash icon deletes. */
.ad-creator-drafts {
  border-top: 1px solid var(--ac-color-line-subtle, rgba(0,0,0,0.06));
  border-bottom: 1px solid var(--ac-color-line-subtle, rgba(0,0,0,0.06));
  background: var(--ac-color-nested, rgba(0,0,0,0.02));
  padding: 10px 18px 14px;
}
.ad-creator-drafts__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.ad-creator-drafts__head strong {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ac-color-t2, #555);
}
.ad-creator-drafts__hint {
  font-size: 11px; color: var(--ac-color-t3, #888);
  font-family: var(--ac-font-mono, ui-monospace, monospace);
}
.ad-creator-drafts__list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; }
.ad-creator-drafts__list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 4px;
  background: var(--ac-color-surface, #fff);
  border: 1px solid var(--ac-color-line, rgba(0,0,0,0.08));
  cursor: pointer;
  transition: background 120ms ease;
}
.ad-creator-drafts__list li:hover { background: var(--ac-color-nested, rgba(0,0,0,0.03)); }
.ad-creator-drafts__list .meta {
  display: flex; flex-direction: column; gap: 2px;
}
.ad-creator-drafts__list .meta-name { font-size: 13px; font-weight: 600; color: var(--ac-color-ink, #0e0c0b); }
.ad-creator-drafts__list .meta-sub  { font-family: var(--ac-font-mono, ui-monospace, monospace); font-size: 10.5px; color: var(--ac-color-t3, #888); }
.ad-creator-drafts__list .delete {
  background: transparent; border: 0; padding: 6px 8px;
  cursor: pointer; color: var(--ac-color-t3, #aaa);
  font-size: 16px; line-height: 1;
}
.ad-creator-drafts__list .delete:hover { color: #b14040; }
.ad-creator-drafts__empty {
  font-family: var(--ac-font-mono, ui-monospace, monospace);
  font-size: 11.5px; color: var(--ac-color-t3, #888);
  padding: 8px 0;
}

/* Tab strip — toggle between Paste URL / Use a release, Upload / URL */
.ad-creator-tabs {
  display: inline-flex;
  background: var(--ac-color-nested, rgba(0,0,0,0.04));
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  margin: 4px 0 14px;
}
.ad-creator-tab {
  border: 0; background: transparent;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ac-color-t3, #707070);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.ad-creator-tab.is-active {
  background: var(--ac-color-ink, #0e0c0b);
  color: #fff;
}

/* Placements — Smart vs Custom panes. Smart mode shows the platform
   picker (Both / IG / FB) and an info-only grid of which positions
   the picked platform(s) will hit. Custom mode reveals per-position
   checkboxes the user can toggle. */
.ad-creator-platform-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 4px 0 8px;
}
.ad-creator-platform-card {
  text-align: left;
  cursor: pointer;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(0,0,0,0.10);
  background: #fff;
  color: var(--ac-color-ink, #0e0c0b);
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.ad-creator-platform-card:hover {
  border-color: rgba(0,0,0,0.25);
  transform: translateY(-1px);
}
.ad-creator-platform-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.ad-creator-platform-card__icons {
  display: inline-flex;
  align-items: center;
  gap: -4px;
}
.ad-creator-platform-card__icons img {
  width: 22px; height: 22px;
  border-radius: 5px;
  display: block;
}
.ad-creator-platform-card__icons img + img {
  margin-left: -6px;
  box-shadow: -1px 0 0 #fff;
}
.ad-creator-platform-card__title {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
}
.ad-creator-platform-card__sub {
  display: block;
  font-family: var(--ac-font-mono, monospace);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ac-color-t3, #707070);
}
/* Active state — branded gradient ring per platform. */
.ad-creator-platform-card.is-active.ad-creator-platform-card--both {
  border-color: #8B1A2B;
  background: linear-gradient(135deg, rgba(255,109,0,0.06), rgba(193,53,132,0.06), rgba(24,119,242,0.06));
  box-shadow: 0 0 0 3px rgba(139,26,43,0.10);
}
.ad-creator-platform-card.is-active.ad-creator-platform-card--ig {
  border-color: #c13584;
  background: linear-gradient(135deg, rgba(255,109,0,0.08), rgba(193,53,132,0.08), rgba(131,58,180,0.08));
  box-shadow: 0 0 0 3px rgba(193,53,132,0.12);
}
.ad-creator-platform-card.is-active.ad-creator-platform-card--fb {
  border-color: #1877f2;
  background: rgba(24,119,242,0.06);
  box-shadow: 0 0 0 3px rgba(24,119,242,0.15);
}

.ad-creator-placements__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 6px;
}
.ad-creator-placement-card {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border: 1px solid transparent;
  transition: opacity 140ms ease, filter 140ms ease;
}
.ad-creator-placement-card b {
  font-family: var(--ac-font-mono, monospace);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.18);
  padding: 2px 5px;
  border-radius: 3px;
  margin-right: 2px;
}
.ad-creator-placement-card--ig {
  background: linear-gradient(135deg, #ff6d00, #c13584 50%, #833ab4);
}
.ad-creator-placement-card--fb {
  background: #1877f2;
}
/* Hidden / unselected platform — the cards stay in the layout but
   visually fade. Switching platforms feels live and obvious. */
.ad-creator-placement-card.is-disabled {
  opacity: 0.18;
  filter: grayscale(0.6);
}
.ad-creator-placement-card.is-locked {
  cursor: default;
}

.ad-creator-placements__group {
  margin-bottom: 14px;
}
.ad-creator-placements__group-label {
  font-family: var(--ac-font-mono, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-color-t3, #707070);
  margin-bottom: 6px;
}
.ad-creator-placement-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin: 0 6px 6px 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ac-color-ink, #0e0c0b);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.ad-creator-placement-toggle input[type="checkbox"] {
  width: 13px; height: 13px;
  accent-color: #8B1A2B;
  cursor: pointer;
  margin: 0;
}
.ad-creator-placement-toggle:hover { border-color: rgba(0,0,0,0.28); }
/* Checked-state visual: dark pill with white text. Drives off the
   :has() selector so the styling follows the input state without JS. */
.ad-creator-placement-toggle:has(input:checked) {
  background: var(--ac-color-ink, #0e0c0b);
  border-color: var(--ac-color-ink, #0e0c0b);
  color: #fff;
}

/* Drop zone — drag/drop or click to upload image/video */
.ad-creator-drop {
  position: relative;
  border: 1.5px dashed var(--ac-color-line, rgba(0,0,0,0.18));
  border-radius: 12px;
  background: var(--ac-color-nested, rgba(0,0,0,0.02));
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
  min-height: 0;
  overflow: hidden;
}
.ad-creator-drop:hover,
.ad-creator-drop:focus-visible,
.ad-creator-drop.is-dragover {
  border-color: var(--ac-color-accent, #0e0c0b);
  background: rgba(14,12,11,0.04);
  outline: none;
}
/* Preview state — compact green confirmation card now (the actual
   playable preview lives in the right pane). Drop the dark backdrop
   + min-height so the form doesn't have a giant empty box. */
.ad-creator-drop.has-preview {
  border: 0;
  background: transparent;
  cursor: default;
  min-height: 0;
  padding: 0;
}
.ad-creator-drop.has-preview:hover { background: transparent; border: 0; }
.ad-creator-drop__idle {
  padding: 14px 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  text-align: left;
  width: 100%;
}
.ad-creator-drop__busy { padding: 14px 18px; width: 100%; }
.ad-creator-drop__icon {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 0;
  color: var(--ac-color-t3, #888);
  flex-shrink: 0;
}
.ad-creator-drop__primary {
  font-size: 13px;
  font-weight: 700;
  color: var(--ac-color-ink, #0e0c0b);
}
.ad-creator-drop__secondary {
  font-size: 11px;
  color: var(--ac-color-t3, #888);
  margin-top: 2px;
}
.ad-creator-drop__bar {
  margin: 14px auto 0;
  width: 80%;
  max-width: 320px;
  height: 6px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.ad-creator-drop__bar span {
  display: block;
  height: 100%;
  width: 2%;
  background: var(--ac-color-accent, #0e0c0b);
  border-radius: 999px;
  animation: ad-creator-shimmer 1.4s ease-in-out infinite;
  transition: width 200ms ease;
}
/* When JS sets the bar width directly, kill the indeterminate
   shimmer animation so the user sees real progress. */
.ad-creator-drop__bar span[style*="width"] { animation: none; margin-left: 0; }
@keyframes ad-creator-shimmer {
  0%   { width: 12%; margin-left: 0; }
  50%  { width: 70%; margin-left: 15%; }
  100% { width: 12%; margin-left: 88%; }
}
.ad-creator-drop__preview {
  position: relative;
  width: 100%;
  display: block;
}
/* `display` above beats the user-agent `[hidden] { display: none }`
   rule, so we need explicit hidden overrides for everything inside
   the drop zone (the section, the busy/idle siblings, and the inner
   <img>/<video> elements). */
.ad-creator-drop__preview[hidden],
.ad-creator-drop__idle[hidden],
.ad-creator-drop__busy[hidden],
.ad-creator-drop img[hidden],
.ad-creator-drop video[hidden] { display: none !important; }
/* The drop zone "preview" is now the compact attached-state card
   (no inline video/image). The actual playable media lives in
   .ad-creator-preview-pane on the right. See the compact rules
   under the .ad-creator-preview-pane block below. */
.ad-creator-drop__preview video:focus,
.ad-creator-drop__preview video:focus-visible { outline: none; box-shadow: none; }
/* Replace pill — sits in the top-right of the preview, frosted dark
   glass. Reads "Replace" so it's obvious what it does. */
.ad-creator-drop__remove {
  position: absolute;
  top: 10px; right: 10px;
  transform: none;
  width: auto; height: auto;
  padding: 7px 14px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 120ms ease, transform 120ms ease;
  z-index: 2;
}
.ad-creator-drop__remove:hover { background: rgba(0,0,0,0.88); }
.ad-creator-drop__remove:active { transform: scale(0.97); }

/* Persistent "selected interests" row — sits above the suggestions
   grid and the "Find more" panel. Always visible when at least one
   interest is selected, regardless of where it was added from. */
.ad-creator-interests-selected {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(31,124,78,0.06);
  border: 1px solid rgba(31,124,78,0.18);
}
.ad-creator-interests-selected[hidden] { display: none; }
.ad-creator-interests-selected__label {
  font-family: var(--ac-font-mono, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1f7c4e;
  margin-bottom: 6px;
}
.ad-creator-interests-selected__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ad-creator-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid rgba(31,124,78,0.30);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #1f7c4e;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.ad-creator-selected-chip:hover {
  background: rgba(139,26,43,0.06);
  border-color: rgba(139,26,43,0.30);
  color: #8B1A2B;
}
.ad-creator-selected-chip__x {
  font-size: 14px;
  font-weight: 800;
  line-height: 0.8;
  opacity: 0.6;
}
.ad-creator-selected-chip:hover .ad-creator-selected-chip__x { opacity: 1; }

/* "Find more interests" — collapsible search box that hits Meta's
   targeting catalog. Closed by default; reveals an input + results
   grid when toggled. */
.ad-creator-interest-search {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(0,0,0,0.10);
}
.ad-creator-interest-search__toggle {
  appearance: none;
  background: transparent;
  border: 1px dashed rgba(0,0,0,0.25);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ac-color-t2, #444);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.ad-creator-interest-search__toggle:hover {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.40);
  color: var(--ac-color-ink, #0e0c0b);
}
.ad-creator-interest-search__toggle-plus {
  font-size: 14px;
  font-weight: 800;
  line-height: 0.8;
}
.ad-creator-interest-search__toggle.is-open {
  background: var(--ac-color-ink, #0e0c0b);
  color: #fff;
  border-style: solid;
  border-color: var(--ac-color-ink, #0e0c0b);
}
.ad-creator-interest-search__panel {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ad-creator-interest-search__results {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  padding: 2px 1px;
}
.ad-creator-interest-search__results:empty { display: none; }

/* Interest suggestion chips — each chip shows the Meta interest
   name + audience size + the source seed term ("match for Relient K")
   so the user always knows why each suggestion appears. */
.ad-creator-interests {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 6px;
  min-height: 38px;
}
.ad-creator-interests__refresh {
  float: right;
  border: 0; background: transparent;
  font-size: 14px; line-height: 1;
  color: var(--ac-color-t3, #888);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.ad-creator-interests__refresh:hover { color: var(--ac-color-ink, #0e0c0b); background: rgba(0,0,0,0.04); }
.ad-creator-interests__empty {
  font-family: var(--ac-font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  color: var(--ac-color-t3, #888);
  padding: 6px 0;
}
.ad-creator-interest-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 8px 12px;
  border: 1px solid var(--ac-color-line, rgba(0,0,0,0.12));
  border-radius: 10px;
  background: var(--ac-color-surface, #fff);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
  font: inherit;
  text-align: left;
  max-width: 100%;
}
.ad-creator-interest-chip:hover { border-color: var(--ac-color-t3, #888); transform: translateY(-1px); }
.ad-creator-interest-chip.is-selected {
  border-color: var(--ac-color-accent, #0e0c0b);
  background: var(--ac-color-accent, #0e0c0b);
  color: #fff;
}
.ad-creator-interest-chip.is-selected .ad-creator-interest-chip__why { color: rgba(255,255,255,0.65); }
.ad-creator-interest-chip.is-selected .ad-creator-interest-chip__audience { color: rgba(255,255,255,0.75); }
.ad-creator-interest-chip__name {
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.ad-creator-interest-chip__why {
  font-family: var(--ac-font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ac-color-t3, #888);
  margin-top: 2px;
}
.ad-creator-interest-chip__audience {
  font-family: var(--ac-font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ac-color-t3, #888);
}

.ad-creator-budget-summary {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1a1714 0%, #2c241e 100%);
  color: #fff8ec;
  font-family: var(--ac-font-mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ad-creator-status {
  font-family: var(--ac-font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,0.03);
  border: 1px dashed rgba(0,0,0,0.12);
  color: var(--ac-color-t3, #707070);
  min-height: 14px;
}
.ad-creator-status:empty { display: none; }
.ad-creator-status.is-error { background: rgba(190,55,55, 0.08); border-color: rgba(190,55,55, 0.30); color: #b14040; }
.ad-creator-status.is-ok    { background: rgba(34,139,87, 0.08); border-color: rgba(34,139,87, 0.30); color: #1f7c4e; }

/* Submit-time progress bar — shown while creative bytes ship to Meta
   and again briefly while campaign-create runs. setSubmitProgress()
   in ads-wiring.js drives the fill width and label. Visual goal:
   tall enough to read at a glance, fill animates smoothly, percent
   on the right. Hides itself via [hidden] when not active. */
.ad-creator-submit-progress {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  padding: 12px 14px;
  margin-top: 10px;
  background: rgba(40, 25, 60, 0.04);
  border: 1px solid rgba(40, 25, 60, 0.10);
  border-radius: 10px;
  font-family: var(--ac-font-mono, ui-monospace, monospace);
  font-size: 11.5px;
}
.ad-creator-submit-progress[hidden] { display: none; }
.ad-creator-submit-progress__label {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  color: var(--ac-color-t2, #444);
  font-weight: 600;
}
.ad-creator-submit-progress__pct {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
  color: var(--ac-color-t2, #444);
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: right;
  font-weight: 700;
}
.ad-creator-submit-progress__track {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  position: relative;
  height: 8px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  overflow: hidden;
}
.ad-creator-submit-progress__fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg, #6a5acd 0%, #c84d8e 100%);
  border-radius: 4px;
  transition: width 200ms ease-out;
  min-width: 2px;
}
.ad-creator-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--ac-color-line-subtle, rgba(0,0,0,0.06));
  margin-top: 4px;
}
.ad-creator-submit__busy { display: inline-flex; align-items: center; gap: 6px; }
.ad-creator-submit__busy::before {
  content: ''; width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: ad-creator-spin 0.7s linear infinite;
}
@keyframes ad-creator-spin { to { transform: rotate(360deg); } }
button:disabled .ad-creator-submit__idle { display: none; }
button:not(:disabled) .ad-creator-submit__busy { display: none; }

/* ════════════════════════════════════════════════════════════════════
   ADS TAB — Meta Ads Manager inside Artist CNTRL.
   Two-column layout: campaigns table left, audience builder right.
   Mirrors the Symphony / IntelliJent reference mockup.
   ════════════════════════════════════════════════════════════════════ */
#ads .ads-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  align-items: start;
  padding: 24px 0;
}
@media (max-width: 1100px) {
  #ads .ads-shell { grid-template-columns: 1fr; }
}

#ads .ads-main {
  background: var(--ac-color-surface, #fff);
  border-radius: var(--ac-radius-lg, 14px);
  border: 1px solid var(--ac-color-line, rgba(0,0,0,0.08));
  padding: 22px 24px;
  min-height: 420px;
}
#ads .ads-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
#ads .ads-h2 {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.01em;
}
#ads .ads-head__counts {
  font-size: 12px;
  color: var(--ac-color-t3, #707070);
  margin-left: 12px;
  font-weight: 500;
}
#ads .ads-head__title { display: flex; align-items: baseline; }
#ads .ads-filter {
  display: inline-flex;
  background: var(--ac-color-nested, rgba(0,0,0,0.04));
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
#ads .ads-filter__pill {
  background: transparent;
  border: 0;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ac-color-t3, #707070);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
#ads .ads-filter__pill.is-active {
  background: var(--ac-color-ink, #0e0c0b);
  color: #fff;
}

#ads .ads-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ac-color-line-subtle, rgba(0,0,0,0.06));
  margin-bottom: 14px;
}
#ads .ads-account-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}
#ads .ads-account-picker__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ac-color-t3);
}
#ads .ads-account-picker__select {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--ac-color-line);
  background: var(--ac-color-surface);
}
#ads .ads-summary {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--ac-color-t2);
}
#ads .ads-summary__kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#ads .ads-summary__kpi-label {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ac-color-t3);
}
#ads .ads-summary__kpi-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--ac-color-ink);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────
   Rich header — eyebrow + title + descriptive sub. Picker pulls right.
   ───────────────────────────────────────────────────────────────────── */
#ads .ads-head--rich {
  display: block;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ac-color-line-subtle, rgba(0,0,0,0.06));
}
#ads .ads-head__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
#ads .ads-head--rich .ads-head__title {
  display: block;
  max-width: 720px;
}
#ads .ads-head__eyebrow {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-color-t3, #707070);
  margin-bottom: 6px;
}
#ads .ads-head--rich .ads-h2 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  line-height: 1.1;
}
#ads .ads-head__sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ac-color-t2, #555);
  margin: 0 0 6px;
  max-width: 640px;
}
#ads .ads-head--rich .ads-head__counts {
  display: inline-block;
  margin-left: 0;
  margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────────────
   KPI row — 5 cards above the campaigns table. Densely typeset,
   tabular-nums, small delta arrow in top-right.
   ───────────────────────────────────────────────────────────────────── */
#ads .ads-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
@media (max-width: 1280px) {
  #ads .ads-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  #ads .ads-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#ads .ads-kpi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--ac-color-line, rgba(0,0,0,0.08));
  background: var(--ac-color-surface, #fff);
  min-height: 92px;
  overflow: hidden;
}
#ads .ads-kpi-card::after {
  /* Subtle accent stripe at the left edge — matches Symphony look. */
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, transparent 0%, var(--ac-color-accent, #0e0c0b) 50%, transparent 100%);
  opacity: 0.35;
}
#ads .ads-kpi-card__label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-color-t3, #707070);
}
#ads .ads-kpi-card__value {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ac-color-ink, #0e0c0b);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  margin-top: 2px;
}
#ads .ads-kpi-card__sub {
  font-size: 11px;
  color: var(--ac-color-t3, #888);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
#ads .ads-kpi-card__delta {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,0.04);
  color: var(--ac-color-t3, #707070);
  letter-spacing: 0.01em;
}
#ads .ads-kpi-card__delta.is-up   { background: rgba(34,139,87, 0.10); color: #1f7c4e; }
#ads .ads-kpi-card__delta.is-down { background: rgba(190,55,55, 0.10); color: #b14040; }
#ads .ads-kpi-card__delta.is-flat { background: rgba(0,0,0,0.04); color: var(--ac-color-t3, #707070); }
/* For COST cards, a *down* delta is good (cheaper). Flip semantics. */
#ads .ads-kpi-card[data-kpi="cpp"] .ads-kpi-card__delta.is-up   { background: rgba(190,55,55, 0.10); color: #b14040; }
#ads .ads-kpi-card[data-kpi="cpp"] .ads-kpi-card__delta.is-down { background: rgba(34,139,87, 0.10); color: #1f7c4e; }
#ads .ads-kpi-card[data-kpi="cps"] .ads-kpi-card__delta.is-up   { background: rgba(190,55,55, 0.10); color: #b14040; }
#ads .ads-kpi-card[data-kpi="cps"] .ads-kpi-card__delta.is-down { background: rgba(34,139,87, 0.10); color: #1f7c4e; }

/* ─────────────────────────────────────────────────────────────────────
   Section head — Campaigns title + filter pills, lives between KPI
   row and the table.
   ───────────────────────────────────────────────────────────────────── */
#ads .ads-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
#ads .ads-section-head__title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac-color-t2, #555);
  margin: 0;
}

/* Visible API status strip — tiny line under the campaigns table that
   tells the user exactly what Meta returned. Saves a trip to DevTools. */
#ads .ads-status-line {
  margin-top: 14px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-family: var(--ac-font-mono, ui-monospace, monospace);
  color: var(--ac-color-t3, #707070);
  background: var(--ac-color-nested, rgba(0,0,0,0.03));
  border: 1px dashed var(--ac-color-line-subtle, rgba(0,0,0,0.08));
  letter-spacing: 0.02em;
  word-break: break-word;
}
#ads .ads-status-line:empty { display: none; }
#ads .ads-status-line.is-error {
  background: rgba(190,55,55, 0.06);
  color: #b14040;
  border-color: rgba(190,55,55, 0.25);
}
#ads .ads-status-line.is-ok {
  background: rgba(34,139,87, 0.05);
  color: #1f7c4e;
  border-color: rgba(34,139,87, 0.20);
}

/* Table */
#ads .ads-table { width: 100%; }
#ads .ads-table__head,
#ads .ads-row {
  display: grid;
  grid-template-columns: minmax(220px, 2.4fr) 1fr 130px 110px 110px 90px 130px;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
}
#ads .ads-table__head {
  border-bottom: 1px solid var(--ac-color-line-subtle, rgba(0,0,0,0.06));
  padding: 8px 4px;
}
#ads .ads-th {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ac-color-t3);
}
#ads .ads-th--num { text-align: right; }
#ads .ads-table__body {
  list-style: none;
  padding: 0;
  margin: 0;
}
#ads .ads-row {
  border-bottom: 1px solid var(--ac-color-line-subtle, rgba(0,0,0,0.04));
  font-size: 13px;
}
#ads .ads-row:last-child { border-bottom: 0; }
#ads .ads-row__name { display: flex; align-items: center; gap: 12px; min-width: 0; }
#ads .ads-row__thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--ac-color-accent, #8B1A2B), #c2624d);
  flex: 0 0 36px;
}
#ads .ads-row__nameblock { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#ads .ads-row__title {
  font-weight: 600;
  color: var(--ac-color-ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#ads .ads-row__sub {
  font-size: 11px;
  color: var(--ac-color-t3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#ads .ads-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}
#ads .ads-status--live    { background: rgba(34,197,94,0.12);  color: #18a34d; }
#ads .ads-status--paused  { background: rgba(115,115,115,0.18); color: #595959; }
#ads .ads-status--draft   { background: rgba(234,179,8,0.16);   color: #a07a05; }
#ads .ads-status--ended   { background: rgba(0,0,0,0.06);        color: #595959; }
#ads .ads-status::before  { content: '●'; font-size: 8px; line-height: 1; }

#ads .ads-objective {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ac-color-ink);
}
#ads .ads-objective__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ac-color-t2);
}
#ads .ads-objective--CONVERSIONS .ads-objective__dot { background: #8B1A2B; }
#ads .ads-objective--VIDEO_VIEWS .ads-objective__dot { background: #d97706; }
#ads .ads-objective--REACH      .ads-objective__dot { background: #2563eb; }
#ads .ads-objective--LINK_CLICKS .ads-objective__dot { background: #16a34a; }
#ads .ads-objective--OUTCOME_TRAFFIC .ads-objective__dot { background: #16a34a; }
#ads .ads-objective--OUTCOME_AWARENESS .ads-objective__dot { background: #2563eb; }
#ads .ads-objective--OUTCOME_ENGAGEMENT .ads-objective__dot { background: #d97706; }
#ads .ads-objective--OUTCOME_SALES .ads-objective__dot { background: #8B1A2B; }

#ads .ads-places {
  display: inline-flex;
  gap: 4px;
}
#ads .ads-place {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 22px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}
#ads .ads-place--IG { background: linear-gradient(135deg, #f58529, #dd2a7b 50%, #515bd4); }
#ads .ads-place--FB { background: #1877f2; }
#ads .ads-place--AU { background: #0e0c0b; }

#ads .ads-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#ads .ads-num__primary {
  font-weight: 700;
  color: var(--ac-color-ink);
}
#ads .ads-num__sub {
  display: block;
  font-size: 11px;
  color: var(--ac-color-t3);
  font-weight: 500;
  margin-top: 2px;
}
#ads .ads-pacing {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}
#ads .ads-pacing__pct {
  font-weight: 700;
  font-size: 13px;
  color: var(--ac-color-ink);
  min-width: 36px;
  text-align: right;
}
#ads .ads-pacing__bar {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  overflow: hidden;
  max-width: 80px;
}
#ads .ads-pacing__fill {
  height: 100%;
  background: var(--ac-color-ink, #0e0c0b);
  border-radius: 999px;
  transition: width 220ms ease;
}
#ads .ads-pacing--warning .ads-pacing__fill { background: #d97706; }
#ads .ads-pacing--over    .ads-pacing__fill { background: #dc2626; }

#ads .ads-empty {
  list-style: none;
  padding: 36px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ac-color-t3);
  font-style: italic;
}

/* Audience builder rail */
#ads .ads-audience {
  background: var(--ac-color-surface, #fff);
  border-radius: var(--ac-radius-lg, 14px);
  border: 1px solid var(--ac-color-line, rgba(0,0,0,0.08));
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 80px;
}
#ads .ads-audience__head { display: flex; flex-direction: column; gap: 4px; }
#ads .ads-audience__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.005em;
}
#ads .ads-audience__sub {
  margin: 0;
  font-size: 12px;
  color: var(--ac-color-t3);
  line-height: 1.4;
}
#ads .ads-aud-card {
  background: var(--ac-color-nested, rgba(0,0,0,0.03));
  border-radius: 10px;
  padding: 14px;
}
#ads .ads-aud-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
#ads .ads-aud-card__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ac-color-ink);
}
#ads .ads-aud-card__edit {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ac-color-t2);
  text-decoration: none;
}
#ads .ads-aud-card__meta {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--ac-color-t3);
  line-height: 1.45;
}
#ads .ads-city-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#ads .ads-city-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--ac-color-surface, #fff);
  border: 1px solid var(--ac-color-line-subtle, rgba(0,0,0,0.08));
  font-size: 11px;
  font-weight: 600;
  color: var(--ac-color-ink);
}
#ads .ads-city-chip__count {
  color: var(--ac-color-t3);
  font-weight: 500;
}

#ads .ads-aud-sources {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#ads .ads-aud-source {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--ac-color-nested, rgba(0,0,0,0.025));
  border-radius: 8px;
}
#ads .ads-aud-source--exclude { background: rgba(220,38,38,0.06); }
#ads .ads-aud-source__icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--ac-color-surface, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--ac-color-t2);
}
#ads .ads-aud-source__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ac-color-ink);
}
#ads .ads-aud-source__meta {
  font-size: 10.5px;
  color: var(--ac-color-t3);
  margin-top: 1px;
}
#ads .ads-aud-source__val {
  text-align: right;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ac-color-ink);
}
#ads .ads-aud-source__val span {
  display: block;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--ac-color-t3);
  margin-top: 1px;
}
#ads .ads-aud-source--exclude .ads-aud-source__val { color: #dc2626; }

#ads .ads-aud-add {
  margin: 0;
  padding: 10px 14px;
  border: 1px dashed var(--ac-color-line, rgba(0,0,0,0.18));
  background: transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ac-color-t2);
  cursor: pointer;
}
#ads .ads-aud-estimate {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 14px;
  background: var(--ac-color-nested, rgba(0,0,0,0.04));
  border-radius: 10px;
}
#ads .ads-aud-estimate__l,
#ads .ads-aud-estimate__r {
  display: flex;
  flex-direction: column;
}
#ads .ads-aud-estimate__r { text-align: right; }
#ads .ads-aud-estimate__label {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--ac-color-t3);
}
#ads .ads-aud-estimate__val {
  font-size: 24px;
  font-weight: 800;
  color: var(--ac-color-ink);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
#ads .ads-aud-estimate__val--cpm { color: var(--ac-color-accent, #8B1A2B); }
#ads .ads-aud-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
}

/* ════════════════════════════════════════════════════════════════════
   SHOW DETAILS — CD redesign (AC-branded)

   Plugged in from show-preview-ac-branded.html. Replaces the prior
   `.show-details--cols` two-column rail/main layout with a richer
   band-profile-style modal: header strip with title + city/date sub,
   square flyer in the left rail, label/value identity stack, roster
   pill, then a settlement section with a NET strip across the top
   (formula breakdown on the right) and a flat 2-col body underneath.

   All inner data-* attrs that JS depends on (data-settle-out,
   data-settle-field, data-settle-exp-list, data-settle-payout-list,
   data-show-action, etc.) are preserved by the new emit functions in
   schedule-wiring.js — only the CSS classes around them changed.
   ════════════════════════════════════════════════════════════════════ */

/* Modal-level overrides. When the schedule modal is rendering the show
   detail in CD mode, the modal's own head bar is suppressed (the CD
   header inside the body provides title + close), and the modal padding
   collapses to zero so the new design fills edge-to-edge. */
.schedule-modal--cd {
  padding: 0;
  background: var(--ac-color-glow);
  overflow: hidden;
  /* Explicit height + flex column so the body inside can flex:1 and
     give the actions ribbon a stable bottom slot. Without `height` the
     body's `height:100%` collapsed and the actions got clipped by the
     modal's `overflow:hidden`. */
  height: calc(100vh - 40px);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.schedule-modal--cd .schedule-modal__head { display: none; }
.schedule-modal--cd .schedule-modal__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
  padding: 0;
}

/* Show-details CD wrapper. */
.shd-cd {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  font-family: var(--ac-font-body);
  color: var(--ac-color-ink);
}

/* ─── HEADER ─── */
.shd-cd .head {
  padding: 26px 32px 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  flex-shrink: 0;
}
.shd-cd .head__title {
  font-family: var(--ac-font-display);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ac-color-ink);
}
.shd-cd .head__sub {
  margin-top: 12px;
  font-size: 15px;
  color: var(--ac-color-accent);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.shd-cd .head__sub::before {
  content: "♦";
  font-size: 11px;
  color: var(--ac-color-accent);
}
.shd-cd .head__sub .sep { color: var(--ac-color-muted); margin: 0 4px; font-weight: 400; }
.shd-cd .head__sub a { color: var(--ac-color-accent); text-decoration: none; }
.shd-cd .head__sub a:hover { text-decoration: underline; }
.shd-cd .head__sub > span:not(.sep) { color: var(--ac-color-body); font-weight: 500; }
.shd-cd .head__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ac-color-paper);
  border: 1px solid rgba(0,0,0,0.07);
  color: var(--ac-color-t3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px -2px rgba(14,12,11,0.1);
  flex-shrink: 0;
}
.shd-cd .head__close:hover {
  background: var(--ac-color-nested);
  color: var(--ac-color-ink);
}

/* ─── BODY GRID ─── */
.shd-cd__body {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 20px;
  padding: 22px 32px 28px;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

/* ─── LEFT RAIL ─── */
.shd-cd .left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.shd-cd .flyer {
  aspect-ratio: 1 / 1;
  background:
    repeating-linear-gradient(45deg, transparent 0 16px, rgba(255,255,255,0.04) 16px 17px),
    linear-gradient(135deg, #2a0e16 0%, #0e0c0b 100%);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 24px -16px rgba(14,12,11,0.5);
  background-size: cover;
  background-position: top center;
}
.shd-cd .flyer--has-img {
  background:
    var(--shd-flyer-bg, none) center/cover no-repeat,
    linear-gradient(135deg, #2a0e16 0%, #0e0c0b 100%);
}
.shd-cd .flyer__lbl {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ac-font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.32);
}
.shd-cd .flyer--has-img .flyer__lbl { display: none; }
.shd-cd .flyer__date {
  position: absolute;
  bottom: 12px; left: 14px;
  color: #fff;
  font-family: var(--ac-font-display);
  font-size: 28px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  z-index: 1;
}
.shd-cd .flyer__date small {
  display: block;
  font-family: var(--ac-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 700;
  margin-top: 5px;
  color: rgba(255,255,255,0.85);
}

/* Online-style status dot */
.shd-cd .status-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ac-color-success-deep, #16734a);
}
.shd-cd .status-line::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ac-color-success, #22c55e);
  box-shadow: 0 0 8px rgba(34,197,94,0.5);
  animation: shd-cd-pulse 1.8s ease-in-out infinite;
}
.shd-cd .status-line--hold {
  color: var(--ac-color-warning-deep, #b97a05);
}
.shd-cd .status-line--hold::before {
  background: var(--ac-color-warning, #f9a825);
  box-shadow: 0 0 8px rgba(249,168,37,0.5);
}
@keyframes shd-cd-pulse { 50% { opacity: 0.55; } }

/* Label/value stack */
.shd-cd .lv {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shd-cd .lv__label {
  font-family: var(--ac-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-color-muted);
}
.shd-cd .lv__value {
  font-size: 16px;
  font-weight: 700;
  color: var(--ac-color-ink);
  line-height: 1.3;
}
.shd-cd .lv__value small {
  font-size: 12px;
  font-weight: 500;
  color: var(--ac-color-muted);
  display: block;
  margin-top: 2px;
}
.shd-cd .lv__value .ok { color: var(--ac-color-success-deep, #16734a); }
.shd-cd .lv__value .warn { color: var(--ac-color-warning-deep, #b97a05); }
.shd-cd .lv__value a {
  color: var(--ac-color-accent);
  text-decoration: none;
  font-weight: 700;
}
.shd-cd .lv__value a:hover { text-decoration: underline; }

/* ─── RIGHT MAIN ─── */
.shd-cd .right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.shd-cd .sec {
  background: var(--ac-color-nested);
  border-radius: 16px;
  padding: 18px 22px;
}
.shd-cd .sec--tight {
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shd-cd .sec__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.shd-cd .sec__title {
  font-family: var(--ac-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ac-color-muted);
}
.shd-cd .sec__act {
  font-family: var(--ac-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-color-accent);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.shd-cd .sec__act:hover { text-decoration: underline; }

/* Roster pill */
.shd-cd .roster-line {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 12px;
  align-items: center;
  padding: 4px 0;
}
.shd-cd .roster-line + .roster-line {
  border-top: 1px solid rgba(0,0,0,0.04);
  padding-top: 10px;
  margin-top: 2px;
}
.shd-cd .roster-line__lbl {
  font-family: var(--ac-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-color-muted);
}
.shd-cd .roster-line__add {
  font-family: var(--ac-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac-color-accent);
  cursor: pointer;
  padding: 4px 8px;
  align-self: center;
  background: none;
  border: none;
}
.shd-cd .roster-line__add:hover { text-decoration: underline; }

.shd-cd .chip-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.shd-cd .act-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  background: var(--ac-color-paper);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ac-color-ink);
  line-height: 1;
}
.shd-cd .act-chip__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  /* Use background-color (not shorthand) so inline background-image
     set by actAvatarHtml isn't wiped out by this rule's cascade. */
  background-color: #f3d6db;
  color: var(--ac-color-accent-deep, #6e1322);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  /* No avatar ring by default — only friend / own / pending chips get
     a colored ring so the visual hierarchy actually means something. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* CONVENTION (Bible v6 affordance) — Bandsintown thumbs ship with
   ~7% built-in padding around the band, so a `background-size: cover`
   crop leaves them looking small inside the circular avatar. Every
   call site that renders an avatar from a BIT image (act.bit_img,
   v.imageUrl from BIT autocomplete, etc.) should add the `--bit-image`
   modifier alongside the base avatar class to override background-size
   to 107%. AC-uploaded photos + personal profile photos stay on the
   default `cover` because they're already framed correctly. */
.shd-cd .act-chip__avatar--bit-image,
.act-chip__avatar--bit-image {
  background-size: 107%;
}
.shd-cd .act-chip__role {
  font-weight: 500;
  color: var(--ac-color-muted);
  font-size: 12px;
}
/* The user's own band — crimson ring on avatar so it's instantly
   recognizable in the lineup as "this is you." */
.shd-cd .act-chip--you .act-chip__avatar {
  background-color: #f3d6db;
  color: var(--ac-color-accent-deep, #6e1322);
  box-shadow: 0 0 0 1.5px var(--ac-color-accent);
}
/* Pending invites — amber ring + amber chip background. */
.shd-cd .act-chip--pending {
  background: rgba(249,168,37,0.14);
  border-color: rgba(249,168,37,0.30);
}
.shd-cd .act-chip--pending .act-chip__avatar {
  background-color: #fae5b8;
  color: var(--ac-color-warning-deep, #b97a05);
  box-shadow: 0 0 0 1.5px var(--ac-color-warning, #f9a825);
}
/* Attached — accepted friend, confirmed for the show. Green ring on
   avatar + small "✓ attached" badge after the role label so the chip
   reads distinct from a randomly-typed-in act with the same name. */
.shd-cd .act-chip--attached .act-chip__avatar {
  box-shadow: 0 0 0 1.5px var(--ac-color-success, #22c55e);
}
.shd-cd .act-chip__badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--ac-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 4px;
  line-height: 1;
}
.shd-cd .act-chip__badge--attached {
  background: rgba(34,197,94,0.14);
  color: var(--ac-color-success-deep, #16734a);
}
.shd-cd .act-chip--pending .act-chip__role {
  color: var(--ac-color-warning-deep, #b97a05);
  font-weight: 600;
}

.shd-cd .mem-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: var(--ac-color-paper);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ac-color-ink);
  line-height: 1;
}
.shd-cd .mem-chip {
  padding: 4px 12px 4px 4px;
}
.shd-cd .mem-chip__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ac-color-nested);
  color: var(--ac-color-t2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
  border: 1px solid rgba(0,0,0,0.07);
}
.shd-cd .mem-chip__avatar--mono { background: var(--ac-color-nested); }
.shd-cd .mem-chip__name { padding: 0 2px; }
/* The colored status dot sits as a small badge on the bottom-right
   corner of the avatar (instead of being the primary visual). Green =
   yes, crimson = no, amber = pending. */
.shd-cd .mem-chip__dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ac-color-success, #22c55e);
  border: 1.5px solid var(--ac-color-paper);
  flex-shrink: 0;
}
.shd-cd .mem-chip__dot--no { background: var(--ac-color-accent); }
.shd-cd .mem-chip__dot--pending { background: var(--ac-color-warning, #f9a825); }
.shd-cd .mem-chip__sub {
  font-weight: 500;
  color: var(--ac-color-muted);
  font-size: 12px;
  margin-left: 2px;
}
.shd-cd .mem-chip--pending .mem-chip__sub { color: var(--ac-color-warning-deep, #b97a05); }

/* SETTLEMENT — NET strip across top of settlement section */
.shd-cd .settle-net {
  background: var(--ac-color-paper);
  border-radius: 12px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  border: 1px solid rgba(0,0,0,0.07);
}
.shd-cd .settle-net__L { display: flex; flex-direction: column; gap: 4px; }
.shd-cd .settle-net__lbl {
  font-family: var(--ac-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ac-color-muted);
}
.shd-cd .settle-net__val {
  font-family: var(--ac-font-display);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ac-color-ink);
  font-variant-numeric: tabular-nums;
}
.shd-cd .settle-net__val .cents {
  font-size: 22px;
  color: var(--ac-color-muted);
}
.shd-cd .settle-net__sub {
  font-size: 12px;
  color: var(--ac-color-t3);
  margin-top: 4px;
}
.shd-cd .settle-net__sub b { color: var(--ac-color-ink); }
.shd-cd .settle-net__R {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-left: 1px solid rgba(0,0,0,0.07);
  padding-left: 22px;
  min-width: 220px;
}
.shd-cd .formula-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 12px;
}
.shd-cd .formula-row__l {
  color: var(--ac-color-muted);
  font-family: var(--ac-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.shd-cd .formula-row__v {
  color: var(--ac-color-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.shd-cd .formula-row--neg .formula-row__v { color: var(--ac-color-accent); }
.shd-cd .formula-row--total {
  border-top: 1px solid rgba(0,0,0,0.07);
  padding-top: 6px;
  margin-top: 3px;
}
.shd-cd .formula-row--total .formula-row__v {
  font-family: var(--ac-font-display);
  font-size: 14px;
  letter-spacing: -0.01em;
}

/* Status pill (PENDING / IN PROGRESS / SETTLED) — overrides default
   .settle__pill from old layout when in CD mode. */
.shd-cd .settle__pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--ac-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
}
.shd-cd .settle__pill--pending {
  background: rgba(249,168,37,0.14);
  color: var(--ac-color-warning-deep, #b97a05);
  border-color: rgba(249,168,37,0.25);
}
.shd-cd .settle__pill--in_progress {
  background: rgba(59,130,246,0.12);
  color: var(--ac-color-info, #3b82f6);
  border-color: rgba(59,130,246,0.25);
}
.shd-cd .settle__pill--settled {
  background: rgba(34,197,94,0.14);
  color: var(--ac-color-success-deep, #16734a);
  border-color: rgba(34,197,94,0.25);
}

/* SETTLEMENT — flat 2-col body underneath net strip */
.shd-cd .settle-flat {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.shd-cd .sf-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding-right: 18px;
}
.shd-cd .sf-col + .sf-col {
  padding-left: 28px;
  border-left: 1px solid rgba(0,0,0,0.04);
  margin-left: -28px;
}
.shd-cd .sf-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.shd-cd .sf-row--sub {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,0.07);
}
.shd-cd .sf-row--merch {
  border-top: 1px dashed rgba(0,0,0,0.07);
  padding-top: 14px;
  margin-top: 12px;
  align-items: center;
}
.shd-cd .sf-row__lbl {
  font-family: var(--ac-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ac-color-body);
}
.shd-cd .sf-row__total {
  font-family: var(--ac-font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--ac-color-ink);
  font-variant-numeric: tabular-nums;
}
.shd-cd .sf-row__total--neg { color: var(--ac-color-accent); }

/* Input grids */
.shd-cd .in-grid {
  display: grid;
  gap: 8px;
}
.shd-cd .in-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shd-cd .in-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shd-cd .in-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shd-cd .in-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.shd-cd .in-cell > label {
  font-family: var(--ac-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac-color-muted);
}
.shd-cd .in-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--ac-color-glow);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 8px;
  padding: 7px 10px;
  min-width: 0;
}
.shd-cd .in-wrap:focus-within {
  border-color: var(--ac-color-accent);
  box-shadow: 0 0 0 3px rgba(139,26,43,0.10);
  background: #fff;
}
.shd-cd .in-wrap--ro { background: var(--ac-color-nested); }
.shd-cd .in-wrap__pre {
  color: var(--ac-color-muted);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.shd-cd .in-wrap__suf {
  color: var(--ac-color-t3);
  font-family: var(--ac-font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.shd-cd .in-wrap input,
.shd-cd .in-wrap select {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  min-width: 0;
  font-family: var(--ac-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--ac-color-ink);
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
}

/* Row lists (expenses, payouts) */
.shd-cd .row-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shd-cd .exp-row,
.shd-cd .payout-row {
  display: grid;
  gap: 8px;
  align-items: center;
  background: var(--ac-color-glow);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
}
.shd-cd .exp-row { grid-template-columns: 110px minmax(0,1fr) 80px 22px; }
.shd-cd .exp-row--ro { background: var(--ac-color-nested); }
.shd-cd .exp-row__cat {
  font-family: var(--ac-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-color-success-deep, #16734a);
}
.shd-cd .exp-row__name { font-weight: 600; }
.shd-cd .exp-row__amt {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.shd-cd .row-del {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.07);
  background: transparent;
  color: var(--ac-color-muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.shd-cd .row-del:hover {
  background: rgba(139,26,43,0.10);
  color: var(--ac-color-accent);
  border-color: rgba(139,26,43,0.25);
}

.shd-cd .payout-row { grid-template-columns: minmax(0, 1fr) 58px 96px 22px; }
.shd-cd .payout-row > * { min-width: 0; }
.shd-cd .payout-row > .in-wrap { padding: 6px 8px; }
.shd-cd .payout-row > .in-wrap input { font-size: 13px; }
.shd-cd .payout-row > input[type=text] {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: 6px;
  font-family: var(--ac-font-body);
  color: var(--ac-color-ink);
}
.shd-cd .payout-row > input[type=text]:focus { background: var(--ac-color-nested); }
.shd-cd .kind {
  display: inline-flex;
  background: var(--ac-color-nested);
  border-radius: 6px;
  padding: 1px;
}
.shd-cd .kind__btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  color: var(--ac-color-muted);
  font-family: var(--ac-font-mono);
}
.shd-cd .kind__btn.is-active { background: var(--ac-color-ink); color: #fff; }

.shd-cd .add-btn {
  appearance: none;
  background: transparent;
  border: 1px dashed rgba(0,0,0,0.12);
  border-radius: 999px;
  padding: 6px 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);
  cursor: pointer;
  align-self: flex-start;
}
.shd-cd .add-btn:hover {
  background: var(--ac-color-paper);
  color: var(--ac-color-ink);
  border-color: var(--ac-color-muted);
  border-style: solid;
}

/* Merch toggle */
.shd-cd .toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.shd-cd .toggle input { display: none; }
.shd-cd .toggle__track {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: rgba(0,0,0,0.12);
  position: relative;
  transition: background 120ms;
  flex-shrink: 0;
}
.shd-cd .toggle__thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 120ms;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.shd-cd .toggle input:checked + .toggle__track { background: var(--ac-color-success, #22c55e); }
.shd-cd .toggle input:checked + .toggle__track .toggle__thumb { transform: translateX(14px); }
.shd-cd .toggle__lbl {
  font-size: 13px;
  font-weight: 600;
  color: var(--ac-color-ink);
}

/* Empty list state */
.shd-cd .shd-empty {
  padding: 8px 10px;
  font-family: var(--ac-font-mono);
  font-size: 11px;
  color: var(--ac-color-t3);
  letter-spacing: 0.04em;
}

/* Booking expense + merch hint */
.shd-cd .merch-hint {
  font-family: var(--ac-font-mono);
  font-size: 10px;
  color: var(--ac-color-t3);
  letter-spacing: 0.06em;
}

/* Actions ribbon — full-width footer */
.shd-cd__actions {
  background: var(--ac-color-glow);
  border-top: 1px solid rgba(0,0,0,0.07);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.shd-cd__actions-meta {
  font-family: var(--ac-font-mono);
  font-size: 10px;
  color: var(--ac-color-muted);
  letter-spacing: 0.06em;
  margin-right: auto;
}
.shd-cd__actions-meta b { color: var(--ac-color-body); }

/* Narrow viewports — stack rail + main, collapse settle-flat to one col */
@media (max-width: 1000px) {
  .shd-cd__body {
    grid-template-columns: 1fr;
    padding: 18px 20px 22px;
  }
  .shd-cd .settle-flat {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .shd-cd .sf-col + .sf-col {
    padding-left: 0;
    border-left: none;
    margin-left: 0;
    padding-top: 18px;
    border-top: 1px solid rgba(0,0,0,0.07);
  }
  .shd-cd .settle-net {
    grid-template-columns: 1fr;
  }
  .shd-cd .settle-net__R {
    border-left: none;
    border-top: 1px solid rgba(0,0,0,0.07);
    padding-left: 0;
    padding-top: 12px;
  }
  .shd-cd .head { padding: 20px 20px 16px; }
  .shd-cd .head__title { font-size: 32px; }
  .shd-cd__actions { padding: 12px 20px; }
}
@media (max-width: 720px) {
  .shd-cd .in-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ════════════════════════════════════════════════════════════════════
   SHOW EDIT FORM — CD redesign (AC-branded)

   Plugged in from show-form-ac-branded.html. Full structural rewrite:
   left nav sidebar (10 numbered chapters) + right scrolling form
   area + sticky footer action ribbon. Every existing input ID
   (#formDate, #formVenue, #formGuarantee, etc.) is preserved verbatim
   by showFormHtml() so submit handlers keep working — only the wrapper
   markup changed.

   Scoped under `.shd-cd--form` (added by showFormHtml) so the existing
   `.shd-cd` rules for the preview modal continue to apply where they
   should; this block adds + overrides for the form variant.
   ════════════════════════════════════════════════════════════════════ */

/* Form variant of the body grid — narrow numbered-nav sidebar + wide
   scrolling form. Uses flex (not grid) so the scrolling pane can
   actually overflow: the scroll container needs a definite height in
   the flex chain — auto-row CSS grid leaves the row "size to content"
   and breaks `overflow-y:auto`. */
.shd-cd--form .shd-cd__body,
.shd-cd__body--form {
  display: flex;
  flex-direction: row;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.shd-cd .nav--form {
  width: 220px;
  flex-shrink: 0;
}
.shd-cd--form .shd-cd__scroll {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

/* The whole flex chain — schedule-modal → schedule-modal__body →
   <form> → .shd-cd → .shd-cd__body → .shd-cd__scroll — every link
   needs flex:1 + min-height:0 so the scroll container resolves to
   a real height. Without ALL of these, scrolling collapses. */
form.shd-cd-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.shd-cd--form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.shd-cd--form .head__eyebrow {
  font-family: var(--ac-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ac-color-muted);
  margin-bottom: 6px;
}
.shd-cd--form .head__title { font-size: 32px; }

/* Left nav sidebar — numbered chapters, anchor-based jumps,
   .is-active highlight tied to scroll position by attachShdFormScrollSpy
   in schedule-wiring.js. */
.shd-cd .nav--form {
  border-right: 1px solid rgba(0,0,0,0.07);
  padding: 22px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--ac-color-glow);
  overflow-y: auto;
  flex-shrink: 0;
}
.shd-cd .nav--form .nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px 10px 20px;
  border-left: 3px solid transparent;
  font-family: var(--ac-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac-color-muted);
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.shd-cd .nav--form .nav__item:hover {
  background: var(--ac-color-nested);
  color: var(--ac-color-body);
}
.shd-cd .nav--form .nav__item.is-active {
  border-left-color: var(--ac-color-accent);
  color: var(--ac-color-ink);
  background: var(--ac-color-nested);
}
.shd-cd .nav--form .nav__item .n {
  font-family: var(--ac-font-display);
  font-size: 10px;
  letter-spacing: -0.01em;
  color: var(--ac-color-muted);
  min-width: 14px;
  text-align: center;
}
.shd-cd .nav--form .nav__item.is-active .n { color: var(--ac-color-accent); }
.shd-cd .nav--form .nav__divider {
  margin: 14px 24px;
  border-top: 1px dashed rgba(0,0,0,0.12);
}
.shd-cd .nav--form .nav__hint {
  margin: 14px 24px 0;
  font-family: var(--ac-font-mono);
  font-size: 9.5px;
  color: var(--ac-color-muted);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* Right scrolling form area. */
.shd-cd .shd-cd__scroll {
  overflow-y: auto;
  padding: 22px 32px 28px;
  min-height: 0;
}

/* Section card. CD's `.sec__head` puts the numbered eyebrow + display-
   font title on the left and a small italic-ish hint on the right
   (dashed-divider below). */
.shd-cd__sec,
.shd-cd .sec.shd-cd__sec {
  background: var(--ac-color-nested);
  border-radius: 16px;
  padding: 20px 22px;
  margin: 0 0 16px;
  scroll-margin-top: 16px;
}
.shd-cd .sec.shd-cd__sec .sec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(0,0,0,0.12);
}
.shd-cd .sec.shd-cd__sec .sec__title-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.shd-cd .sec.shd-cd__sec .sec__num {
  font-family: var(--ac-font-display);
  font-size: 12px;
  color: var(--ac-color-accent);
  letter-spacing: -0.01em;
}
.shd-cd .sec.shd-cd__sec .sec__title {
  font-family: var(--ac-font-display);
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ac-color-ink);
  margin: 0;
}
.shd-cd .sec.shd-cd__sec .sec__hint {
  font-size: 12px;
  color: var(--ac-color-muted);
  text-align: right;
}

/* Grid layouts inside sections — CD uses .grid-2 / .grid-3 / .grid-4
   plus .col-span-2 for full-width fields. */
.shd-cd--form .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.shd-cd--form .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 18px; }
.shd-cd--form .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.shd-cd--form .col-span-2 { grid-column: span 2; }

/* Form field — mono uppercase label + .inp paper input + optional hint. */
.shd-cd--form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.shd-cd--form .field > label {
  font-family: var(--ac-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-color-muted);
}
.shd-cd--form .field__hint {
  font-size: 11px;
  color: var(--ac-color-muted);
  font-style: italic;
}

/* Paper-white inputs with crimson focus ring. */
.shd-cd--form .inp {
  background: var(--ac-color-paper);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: var(--ac-font-body);
  font-size: 14px;
  color: var(--ac-color-ink);
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
  width: 100%;
  font-weight: 500;
}
.shd-cd--form .inp:focus {
  border-color: var(--ac-color-accent);
  box-shadow: 0 0 0 3px rgba(139,26,43,0.10);
}
.shd-cd--form .inp::placeholder { color: var(--ac-color-t3); }
.shd-cd--form .inp--mono { font-family: var(--ac-font-mono); font-size: 12.5px; }
.shd-cd--form .inp--money { font-family: var(--ac-font-mono); font-weight: 700; }
.shd-cd--form textarea.inp { resize: vertical; min-height: 70px; line-height: 1.5; }
.shd-cd--form select.inp {
  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% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

/* $-prefix / %-suffix wrapper. */
.shd-cd--form .inp-wrap {
  display: flex;
  align-items: center;
  background: var(--ac-color-paper);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 10px;
  padding: 0 14px;
  transition: border-color 120ms, box-shadow 120ms;
}
.shd-cd--form .inp-wrap:focus-within {
  border-color: var(--ac-color-accent);
  box-shadow: 0 0 0 3px rgba(139,26,43,0.10);
}
.shd-cd--form .inp-wrap__pre,
.shd-cd--form .inp-wrap__suf {
  color: var(--ac-color-muted);
  font-weight: 600;
  font-size: 14px;
  user-select: none;
}
.shd-cd--form .inp-wrap__suf {
  font-family: var(--ac-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.shd-cd--form .inp-wrap input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  min-width: 0;
  padding: 10px 6px;
  font-family: var(--ac-font-body);
  font-size: 14px;
  color: var(--ac-color-ink);
}

/* Show / Festival pill toggle. */
.shd-cd--form .pill-toggle {
  display: inline-flex;
  gap: 4px;
  background: var(--ac-color-paper);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 999px;
  padding: 3px;
  width: fit-content;
}
.shd-cd--form .pill-toggle__btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 7px 18px;
  border-radius: 999px;
  font-family: var(--ac-font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--ac-color-t2);
  cursor: pointer;
}
.shd-cd--form .pill-toggle__btn.is-active {
  background: var(--ac-color-ink);
  color: #fff;
}

/* Lineup + members chip search — dashed border hint affordance. */
.shd-cd--form .search-inp,
.shd-cd--form .lineup-add-row__input,
.shd-cd--form .member-picker__search {
  background: var(--ac-color-paper);
  border: 1px dashed rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--ac-color-t3);
  width: 100%;
  transition: all 120ms;
  cursor: text;
}
.shd-cd--form .search-inp:hover {
  border-style: solid;
  border-color: var(--ac-color-t3);
}
.shd-cd--form .search-inp:focus,
.shd-cd--form .lineup-add-row__input:focus,
.shd-cd--form .member-picker__search:focus {
  border-style: solid;
  border-color: var(--ac-color-accent);
  box-shadow: 0 0 0 3px rgba(139,26,43,0.10);
  color: var(--ac-color-ink);
  outline: none;
}

/* Asset uploads — 2-up tile grid. */
.shd-cd--form .uploads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Travel screenshot dropzone. */
.shd-cd--form .dropzone {
  border: 2px dashed rgba(0,0,0,0.12);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
  background: var(--ac-color-paper);
  cursor: pointer;
}
.shd-cd--form .dropzone:hover {
  border-color: var(--ac-color-accent);
  background: rgba(139,26,43,0.05);
}
.shd-cd--form .dropzone__lbl {
  font-family: var(--ac-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ac-color-t2);
}
.shd-cd--form .dropzone__lbl .dot {
  color: var(--ac-color-muted);
  margin: 0 8px;
}

/* Checkbox row (Door split / Merch cut). */
.shd-cd--form .check-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.shd-cd--form .check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ac-color-body);
}
.shd-cd--form .check input { display: none; }
.shd-cd--form .check__box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--ac-color-paper);
  border: 1px solid rgba(0,0,0,0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  transition: all 120ms;
}
.shd-cd--form .check input:checked + .check__box {
  background: var(--ac-color-accent);
  border-color: var(--ac-color-accent);
}
.shd-cd--form .check input:checked + .check__box::after {
  content: "✓";
  font-weight: 800;
}

/* Footer ribbon — sticky at the bottom of the modal with the
   defaults link on the left and the action buttons on the right. */
.shd-cd__actions--form {
  background: var(--ac-color-glow);
  border-top: 1px solid rgba(0,0,0,0.07);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.shd-cd__actions--form .shd-cd__actions-link {
  color: var(--ac-color-accent);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--ac-font-body);
}
.shd-cd__actions--form .shd-cd__actions-link:hover { text-decoration: underline; }
.shd-cd__actions--form .btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: var(--ac-color-paper);
  font-family: var(--ac-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-color-ink);
  cursor: pointer;
}
.shd-cd__actions--form .btn:hover {
  background: var(--ac-color-nested);
  border-color: var(--ac-color-muted);
}
.shd-cd__actions--form .btn--dark,
.shd-cd__actions--form .btn-primary {
  background: var(--ac-color-ink);
  color: #fff;
  border-color: var(--ac-color-ink);
}
.shd-cd__actions--form .btn--dark:hover,
.shd-cd__actions--form .btn-primary:hover {
  background: var(--ac-color-body);
  color: #fff;
}

/* Schedule modal CD-form mode — collapses padding so the form fills
   edge-to-edge under our own header strip. The default modal head
   is hidden (the CD .head inside the body provides title + close).
   The modal itself becomes a fixed-height flex container so the body
   inside gets a definite height to flex against. */
.schedule-modal--cd-form {
  padding: 0;
  background: var(--ac-color-glow);
  overflow: hidden;
  height: calc(100vh - 40px);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.schedule-modal--cd-form .schedule-modal__head { display: none; }
.schedule-modal--cd-form .schedule-modal__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
  padding: 0;
}

/* Narrow viewports — collapse nav to a horizontal top scroller. */
@media (max-width: 900px) {
  .shd-cd--form .shd-cd__body,
  .shd-cd__body--form {
    grid-template-columns: 1fr;
  }
  .shd-cd .nav--form {
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    flex-direction: row;
    padding: 12px 16px;
    overflow-x: auto;
  }
  .shd-cd .nav--form .nav__item {
    white-space: nowrap;
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: 8px 14px;
  }
  .shd-cd .nav--form .nav__item.is-active {
    border-left: none;
    border-bottom-color: var(--ac-color-accent);
  }
  .shd-cd .nav--form .nav__divider,
  .shd-cd .nav--form .nav__hint { display: none; }
  .shd-cd--form .grid-2,
  .shd-cd--form .grid-3 { grid-template-columns: 1fr; }
  .shd-cd--form .uploads { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   CONNECTED ACCOUNT STRIP — Content tab per-platform identity header

   Surfaces which FB Page / IG account / TikTok account / YT channel
   the data on screen belongs to. Required for Meta App Review across
   all 5 rejected permissions (pages_show_list / pages_read_engagement /
   read_insights / instagram_basic / instagram_manage_insights). The
   reviewer must be able to confirm at a glance: "these posts/insights
   belong to THIS specific Page/account."

   Sits between the platform pill tabs and the .content-platform card
   so it's visible the entire time data renders. Avatar + name on the
   left, account-type meta line under, switch-account button right.
   ════════════════════════════════════════════════════════════════════ */
.content-account-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: var(--ac-color-paper);
  border: 1px solid var(--ac-color-line);
  border-radius: 14px;
  margin: 0 0 12px;
  box-shadow: var(--ac-shadow-sm);
}
.content-account-strip[hidden] { display: none; }
.content-account-strip__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ac-color-nested);
  color: var(--ac-color-t3);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ac-font-display);
  font-size: 18px;
  letter-spacing: -0.01em;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--ac-color-line-subtle);
  overflow: hidden;
}
.content-account-strip__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.content-account-strip__name {
  font-family: var(--ac-font-display);
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--ac-color-ink);
  font-weight: var(--ac-fw-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content-account-strip__meta {
  font-family: var(--ac-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ac-color-t3);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content-account-strip__switch {
  appearance: none;
  background: transparent;
  border: 1px solid var(--ac-color-line);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--ac-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-color-t2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.content-account-strip__switch:hover {
  background: var(--ac-color-nested);
  color: var(--ac-color-ink);
  border-color: var(--ac-color-t3);
}
@media (max-width: 720px) {
  .content-account-strip { flex-wrap: wrap; }
  .content-account-strip__switch { font-size: 9px; padding: 6px 10px; }
}

/* ───────────────────────────────────────────────────────────────────
   ARTIST DASHBOARD — LATEST RELEASE + TO-DO PAIR
   ───────────────────────────────────────────────────────────────────
   Side-by-side layout that pairs the half-width Most Recent Release
   card with a To-do widget. Sits above Top Cities on the artist view.
   The release section (#label-recent-release-section) is relocated
   into #artistDashReleaseSlot at DOM-ready by /js/artist-todo-wiring.js
   — physical move so the existing wiring's getElementById lookups
   keep working without changes.

   Visibility:
   - The wrapper #artist-toplay-pair-section uses data-show-for-artist="1"
     and is forced visible only for the artist role via the override
     below (matches the same pattern used for Top Cities at line 3931).
   - The original location of label-recent-release-section is hidden
     for artist mode (via the existing CSS rule on line 3933 — when
     the element is moved, the rule no longer matches the empty
     original slot, but we also strip the element from the page so
     there's nothing left to hide).
   ─────────────────────────────────────────────────────────────────── */
/* Show the Latest Release + To-do pair to everyone with band-side
   access to the artist app — not just the band's main "artist"
   account. Band members, tour managers, production crew, merch,
   and content folks all view this same dashboard when they're
   logged in and shouldn't lose the release + tasks panel just
   because their personal role isn't "artist". External agency
   roles (label / manager / booking_agent) get their own dashboards
   from the roster shell and never see this section. */
body[data-effective-role="artist"]               #artist-toplay-pair-section[hidden],
body[data-effective-role="band_member"]          #artist-toplay-pair-section[hidden],
body[data-effective-role="tour_manager"]         #artist-toplay-pair-section[hidden],
body[data-effective-role="foh_engineer"]         #artist-toplay-pair-section[hidden],
body[data-effective-role="monitor_engineer"]     #artist-toplay-pair-section[hidden],
body[data-effective-role="tech"]                 #artist-toplay-pair-section[hidden],
body[data-effective-role="merch_manager"]        #artist-toplay-pair-section[hidden],
body[data-effective-role="content_creator"]      #artist-toplay-pair-section[hidden],
body[data-effective-role="social_media_manager"] #artist-toplay-pair-section[hidden] {
  display: block;
}
#label-recent-release-section[data-relocated-into-pair="1"] {
  /* When the wiring moves the section into the pair slot, it stamps
     this data attr. We don't need the role-override CSS to apply
     anymore — the section's parent (.dash-pair-artist__grid) handles
     its layout. This rule is a no-op safety net for clarity. */
}

.dash-pair-artist {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.dash-pair-artist__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.dash-pair-artist__release,
.dash-pair-artist__todo {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* The relocated release section is now inside .dash-pair-artist__release.
   At half width, reflow the 4-col tile grid to 2 cols. The existing
   media-query rule at line 10311 already handles narrow widths to 2x2,
   but the grid container at this width isn't narrow enough to trigger
   it — so we force the override here. */
.dash-pair-artist__release .label-recent-release {
  /* The wrapper (.dash-pair-artist__release) is display:flex column.
     In flex-column, height:100% doesn't reliably stretch children
     along the main axis — flex:1 1 auto is the correct mechanism.
     This forces the actual visible section (which has the border /
     border-radius / background) to fill the grid cell height so the
     card boundary matches the To-do card next to it.

     margin:0 cancels the inherited .dash-section margin-bottom
     (var(--ac-space-4) ≈ 16px) and the .label-recent-release rule's
     own margin-top — both would otherwise leave a gap inside the
     grid cell that makes the visible card boundary shorter than
     the To-do next to it. */
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}
.dash-pair-artist__release .label-recent-release__stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dash-pair-artist__release .label-recent-release__body {
  /* Cover + details stack vertically at half-width since the cover
     plus 2-col stat grid + meta line is too wide otherwise. Falls
     back to the section's own existing rules below 720px. */
}

/* ─── To-do widget chrome ────────────────────────────────────────
   Mirrors the .summary__card visual the user saw on the roster
   shell. Defined locally here so app.html doesn't need to import
   the roster's CSS. */
.dash-pair-artist__todo.summary__card {
  background: #fff;
  border: 1px solid var(--ac-color-line);
  border-radius: var(--ac-radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Match Release card height exactly. height:100% + min-height:0
     forces the card to fill the grid cell (align-items:stretch on
     the parent makes both cells equal height = max of both). The
     min-height:0 cancels the prior 320px floor so when art is small
     the To-do shrinks with it. */
  height: 100%;
  min-height: 0;
}
.dash-pair-artist__todo .summary__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--ac-color-line-subtle, #f0f0f0);
}
.dash-pair-artist__todo .summary__eyebrow {
  font-family: var(--ac-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ac-color-t3, #9ca3af);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.dash-pair-artist__todo .summary__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--ac-color-ink, #0f1115);
  line-height: 1.1;
}
.dash-pair-artist__todo .summary__open {
  background: #0f1115;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 120ms;
}
.dash-pair-artist__todo .summary__open:hover {
  background: #2a2d33;
}
.dash-pair-artist__todo .summary__body {
  flex: 1 1 auto;
  min-height: 0;        /* let flex shrink it so overflow-y kicks in */
  overflow-y: auto;
  /* Soft scrollbar so a list of many tasks scrolls internally
     without expanding the card past Release card height. */
  scrollbar-width: thin;
}
.dash-pair-artist__todo .summary__body::-webkit-scrollbar {
  width: 6px;
}
.dash-pair-artist__todo .summary__body::-webkit-scrollbar-thumb {
  background: rgba(15, 17, 21, 0.18);
  border-radius: 3px;
}
.dash-pair-artist__todo .summary__body::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 17, 21, 0.32);
}

/* Task row styles (locally defined; mirrors what tasks-drawer.js
   and the roster widget use). */
.dash-pair-artist__todo .tasks__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--ac-color-line-subtle, #f0f0f0);
  cursor: pointer;
  transition: background 120ms;
  font-size: 13px;
}
.dash-pair-artist__todo .tasks__row:hover {
  background: var(--ac-color-nested, #f9f9f9);
}
.dash-pair-artist__todo .tasks__row:last-child {
  border-bottom: none;
}
.dash-pair-artist__todo .tasks__check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--ac-color-line);
  background: #fff;
}
.dash-pair-artist__todo .tasks__check--overdue {
  border-color: #e11d48;
}
.dash-pair-artist__todo .tasks__title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--ac-color-ink, #0f1115);
}
.dash-pair-artist__todo .tasks__assignee {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ac-color-t2, #6b7280);
  font-size: 11px;
}
.dash-pair-artist__todo .tasks__assignee-mark {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #5a3a3a;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dash-pair-artist__todo .tasks__due {
  flex: 0 0 auto;
  width: 64px;
  text-align: right;
  font-family: var(--ac-font-mono);
  font-size: 11px;
  color: var(--ac-color-t2, #6b7280);
}
.dash-pair-artist__todo .tasks__due--overdue {
  color: #e11d48;
  font-weight: 700;
}
.dash-pair-artist__todo-empty {
  /* Vertically + horizontally centred inside the body container so
     the "No open tasks" placeholder anchors in the middle of whatever
     height the body becomes. NO min-height — the To-do card's height
     should be driven by the Release card next to it (via grid
     align-items:stretch), not by this placeholder. */
  height: 100%;
  padding: 28px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  color: var(--ac-color-t3, #9ca3af);
}

/* Narrow viewport — collapse pair to a single column. */
@media (max-width: 960px) {
  .dash-pair-artist__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .dash-pair-artist__release .label-recent-release__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ───────────────────────────────────────────────────────────────────
   ARTIST-VIEW LATEST RELEASE CARD — MySpace profile-sidebar restyle
   ───────────────────────────────────────────────────────────────────
   The roster Music tab uses the full bento-tile look (untouched by
   any of these rules). On the artist dashboard pair, we strip the
   tile chrome and render every metric as a flat label/value row with
   thin hairline dividers — denser, more scannable, and closer to a
   profile detail sheet than a dashboard.

   Why the [data-relocated-into-pair="1"] gate: artist-todo-wiring.js
   stamps that attribute when it moves #label-recent-release-section
   into #artistDashReleaseSlot. The same DOM node would otherwise
   match these selectors at its original document position too — the
   attribute is the marker that says "we're rendering in the pair".
   ─────────────────────────────────────────────────────────────────── */

/* ── Body layout: bigger art on left, 4 stats beside it on right,
      remaining 6 stats flow into a full-width grid below the body.
      artist-todo-wiring.js does the DOM split (moves stats[4..end]
      into a new .label-recent-release__stats--below sibling of
      .details), so we just style the two zones here. */
#label-recent-release-section[data-relocated-into-pair="1"] .label-recent-release__body {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  grid-template-areas: "art details";
  column-gap: 24px;
  row-gap: 0;
  align-items: stretch;
}

#label-recent-release-section[data-relocated-into-pair="1"] .label-recent-release__art {
  grid-area: art;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 1 / 1;
  align-self: start;
}

#label-recent-release-section[data-relocated-into-pair="1"] .label-recent-release__details {
  grid-area: details;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;        /* fill grid cell (= art row height) */
}

/* Beside-stats sit tight to the meta line with their natural row
   height — no flex:1 stretching, no repeat(5,1fr). Rows auto-size
   to content so the whole grid stacks immediately under meta and
   any vertical leftover space lands at the BOTTOM of the right
   column next to art's lower half (where the eye reads it as
   intentional negative space, not a gap). */
#label-recent-release-section[data-relocated-into-pair="1"] .label-recent-release__stats {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  column-gap: 22px;
  row-gap: 0;
  padding-top: 0;
  border-top: 1px solid var(--ac-border, rgba(17, 24, 39, 0.08));
  /* explicitly OPT OUT of flex:1 from a prior CSS pass */
  flex: 0 0 auto;
}

/* Defensive: hide the below-body strip if the JS split ran in a
   prior session (e.g. cached page state). SPLIT_AT=99 in the JS
   prevents new splits, but a stale --below div from before this
   change would still render. */
#label-recent-release-section[data-relocated-into-pair="1"] .label-recent-release__stats--below {
  display: none;
}

/* Each stat row: label on the left, value on the right, hairline
   divider below. Inline layout — tight and scannable now that rows
   are natural height (not flex-stretched). Strips every bit of tile
   chrome so the column reads like a profile list. */
#label-recent-release-section[data-relocated-into-pair="1"] .label-recent-release__stat,
#label-recent-release-section[data-relocated-into-pair="1"] .label-recent-release__stat--ss {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ac-border, rgba(17, 24, 39, 0.08));
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  /* Cancel the green tint the Songstats-sourced tiles use in the
     bento grid (.label-recent-release__stat--ss) — that styling only
     reads as "fresh data" inside coloured tiles. */
  background-color: transparent !important;
}

/* Label: small, uppercase, tracking, muted — the MySpace "About me"
   row-label feel. */
#label-recent-release-section[data-relocated-into-pair="1"] .label-recent-release__stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac-color-t3, #6b7280);
  margin: 0;
  flex: 1 1 auto;
  line-height: 1.2;
}

/* Value: bold tabular numerals, right-aligned, slightly oversized so
   the eye lands on it. Em-dashes naturally feel "empty" without us
   needing to hide the row. */
#label-recent-release-section[data-relocated-into-pair="1"] .label-recent-release__stat-num {
  font-size: 16px;
  font-weight: 700;
  color: var(--ac-color-t1, #0f172a);
  margin: 0;
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* (Per design call: every row stays at equal visual weight regardless
   of whether the value is populated or em-dash — the answer to the
   "empty tiles" question was "keep them but no tiles", so we don't
   fade or hide. Predictable, uniform row stack.) */

/* Last row: no hairline (we don't want a bottom border under the very
   last metric — the card's own border handles it). */
#label-recent-release-section[data-relocated-into-pair="1"] .label-recent-release__stats > .label-recent-release__stat:last-child,
#label-recent-release-section[data-relocated-into-pair="1"] .label-recent-release__stats > .label-recent-release__stat--ss:last-child {
  border-bottom: 0;
}

/* Remove the divider/wedge element the bento grid uses to separate
   the rollout block from the Songstats block — irrelevant in a flat
   list and just adds an empty row. */
#label-recent-release-section[data-relocated-into-pair="1"] .label-recent-release__stats > .label-recent-release__stats-divider,
#label-recent-release-section[data-relocated-into-pair="1"] .label-recent-release__stats > hr {
  display: none;
}

/* Narrow viewport collapse: when the dashboard pair stacks (single
   column), let the release card body also collapse — art on top, the
   beside-stats below, then the --below stats further down. Keep both
   stat grids at 2 cols since each card is now closer to full width. */
@media (max-width: 960px) {
  #label-recent-release-section[data-relocated-into-pair="1"] .label-recent-release__body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "art"
      "details"
      "below";
  }
  #label-recent-release-section[data-relocated-into-pair="1"] .label-recent-release__art {
    max-width: 320px;
    margin: 0 auto;
  }
  #label-recent-release-section[data-relocated-into-pair="1"] .label-recent-release__stat {
    padding: 9px 0;
  }
}

/* Tighten the head — the eyebrow ("MOST RECENT RELEASE") + sub
   ("Streaming performance and rollout signals...") were sized for a
   full-width card. At half-width we want less vertical breathing room
   so the data list dominates. */
#label-recent-release-section[data-relocated-into-pair="1"] .label-recent-release__sub {
  font-size: 12px;
  margin-top: 6px;
  color: var(--ac-color-t3, #6b7280);
}
#label-recent-release-section[data-relocated-into-pair="1"] .label-recent-release__eyebrow {
  font-size: 10px;
  letter-spacing: 0.12em;
}
#label-recent-release-section[data-relocated-into-pair="1"] .label-recent-release__title {
  font-size: 26px;
  line-height: 1.15;
  margin-top: 4px;
}