/* 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-text-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-text-sm);
  letter-spacing: var(--ac-tracking-mega);
  color: rgba(255, 255, 255, 0.6);
  font-weight: var(--ac-weight-semibold);
  margin: 0 0 var(--ac-space-2);
}

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

.spotlight__sub {
  font-size: var(--ac-text-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-text-on-accent);
  color: var(--ac-color-accent);
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-weight-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-text-on-accent); font-size: var(--ac-text-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-text-xl) !important; line-height: 1.1; display: flex; flex-direction: column; gap: 2px; }
.stat-block__top-name {
  font-size: var(--ac-text-md);
  font-weight: var(--ac-weight-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-text-2xl);
  font-weight: var(--ac-weight-black);
  color: #a7f3d0;
  letter-spacing: var(--ac-tracking-tighter);
}
.stat-block__top-pct--neutral { color: var(--ac-color-text-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-text-xs);
  letter-spacing: var(--ac-tracking-widest);
  color: rgba(255, 255, 255, 0.5);
  font-weight: var(--ac-weight-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-platform-instagram), var(--ac-color-accent));
  display: flex;
  align-items: flex-end;
  padding: 6px;
  font-size: var(--ac-text-2xs);
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-text-on-accent);
}
.top-post__thumb[data-rank="2"] { background: linear-gradient(155deg, var(--ac-color-platform-instagram), var(--ac-color-accent)); }
.top-post__thumb[data-rank="3"] { background: linear-gradient(175deg, var(--ac-color-platform-instagram), var(--ac-color-accent)); }
.top-post__thumb[data-rank="4"] { background: linear-gradient(195deg, var(--ac-color-platform-instagram), var(--ac-color-accent)); }
.top-post__thumb[data-rank="5"] { background: linear-gradient(215deg, var(--ac-color-platform-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-text-xs);
  color: var(--ac-color-text-on-accent);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.top-post__likes { color: var(--ac-color-platform-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-text-2xs);
  font-weight: var(--ac-weight-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-text-xs);
  font-weight: var(--ac-weight-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-weight-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-text-sm);
  font-weight: var(--ac-weight-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-text-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-text-md);
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-text-primary);
}

/* 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-border) transparent;
}
.opportunities::-webkit-scrollbar { width: 6px; }
.opportunities::-webkit-scrollbar-track { background: transparent; }
.opportunities::-webkit-scrollbar-thumb {
  background: var(--ac-color-border);
  border-radius: 3px;
}
.opportunities::-webkit-scrollbar-thumb:hover { background: var(--ac-color-border-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-border-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-text-tertiary);
  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-text-primary);
  text-transform: uppercase;
  line-height: 1.15;
}
.opportunity__invite-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ac-color-text-secondary);
  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-text-primary);
  border: 1px solid var(--ac-color-border-strong);
}
.opportunity__invite-btn--pass:hover {
  background: var(--ac-color-surface-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-text-tertiary);
  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-text-tertiary);
}
.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-border-subtle);
  background: transparent;
  color: var(--ac-color-text-primary);
  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, #d23b4d);
  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-text-tertiary); }

/* 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, #d23b4d);
  text-transform: uppercase;
}
.needs-media-modal__close {
  background: transparent; border: 0;
  font-size: 22px; line-height: 1;
  color: var(--ac-color-text-tertiary);
  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-text-primary);
  margin-bottom: 4px;
}
.needs-media-modal__date {
  font-size: 13px;
  color: var(--ac-color-text-secondary);
  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-text-tertiary);
  margin-bottom: 6px;
}
.needs-media-modal__input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ac-color-border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ac-color-text-primary);
  background: #fafafa;
  box-sizing: border-box;
  outline: none;
}
.needs-media-modal__input:focus {
  border-color: var(--ac-color-accent, #d23b4d);
  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-text-primary, #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-text-tertiary);
  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-border-subtle);
}
.opportunity:last-child { border-bottom: none; }
.opportunity .tag { margin-top: 2px; }

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

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

/* 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-text-4xl); }

.merch-summary__pending {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ac-space-3);
  background: var(--ac-color-surface-raised);
  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-text-2xl);
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-text-primary);
  letter-spacing: var(--ac-tracking-tighter);
}

.merch-summary__pending-arrow {
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-weight-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-text-sm);
  padding: var(--ac-space-1) 0;
}

.merch-order__main { min-width: 0; color: var(--ac-color-text-secondary); }
.merch-order__main strong { color: var(--ac-color-text-primary); font-weight: var(--ac-weight-semibold); }

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

.merch-order__when {
  color: var(--ac-color-text-secondary);
  font-size: var(--ac-text-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-text-primary);
  color: var(--ac-color-text-on-accent);
  border-radius: var(--ac-radius-md);
}

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

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

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

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

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

/* ─── 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-text-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;                       /* hide the legacy unicode glyph */
  font-weight: var(--ac-weight-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-platform-spotify);
}
.platform-card[data-platform="amazon"] {
  border-left: 4px solid var(--ac-color-platform-amazon);
}
.platform-card[data-platform="apple"] {
  border-left: 4px solid var(--ac-color-platform-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-text-sm); }
.dash-streaming__stack .stat-block__value { font-size: var(--ac-text-2xl); }

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

.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-border-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-text-3xl); }
.platform-card .stat-block__value small { font-size: var(--ac-text-sm); color: var(--ac-color-text-secondary); font-weight: var(--ac-weight-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-text-sm);
  color: var(--ac-color-text-tertiary);
  font-weight: var(--ac-weight-bold);
}

.top-song__bar { position: relative; }

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

/* 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-weight-regular);
  color: var(--ac-color-text-tertiary);
  margin-left: 2px;
}

.top-song__fill {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--ac-color-surface-warm-deep);
  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-text-base);
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-text-primary);
  text-align: right;
}

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

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

.playlist-tile__count {
  margin: 0;
  font-size: var(--ac-text-3xl);
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-text-primary);
}
.playlist-tile__count span {
  font-size: var(--ac-text-base);
  color: var(--ac-color-text-secondary);
  font-weight: var(--ac-weight-semibold);
}

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

.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-surface-raised);
  border-radius: var(--ac-radius-lg);
  padding: var(--ac-space-4);
  border: 1px solid var(--ac-color-border);
  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-text-sm);
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-text-primary);
}

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

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

/* "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-text-tertiary);
}
.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);
}
.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-text-base);
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-secondary);
}

/* Pill buttons used in the card heads ─────────────── */
.btn-pill {
  border: 1px solid var(--ac-color-border);
  background: var(--ac-color-surface-raised);
  color: var(--ac-color-text-primary);
  border-radius: var(--ac-radius-pill);
  padding: 8px 16px;
  font-family: var(--ac-font-body);
  font-weight: var(--ac-weight-semibold);
  font-size: var(--ac-text-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-surface-warm); }
.btn-pill:active { transform: translateY(1px); }
.btn-pill--dark {
  background: var(--ac-color-text-primary);
  color: var(--ac-color-text-on-accent);
  border-color: var(--ac-color-text-primary);
}
.btn-pill--dark:hover { background: #1a1614; }
.btn-pill--ghost {
  background: var(--ac-color-surface-raised);
}
/* 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-weight-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-border);
  background: var(--ac-color-surface-raised);
  border-radius: var(--ac-radius-pill);
  padding: 12px 18px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-md);
  color: var(--ac-color-text-primary);
}
.contacts-search:focus {
  outline: none;
  border-color: var(--ac-color-border-focus);
  box-shadow: 0 0 0 3px var(--ac-color-accent-muted);
}

/* ─── 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-surface-raised);
  border: 1px solid var(--ac-color-border);
  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-border-subtle);
}
.bit-push-modal__head h3 {
  margin: 0;
  font-family: var(--ac-font-body);
  font-weight: var(--ac-weight-black);
  font-size: var(--ac-text-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-text-sm); color: var(--ac-color-text-secondary); }
.bit-push-section {
  margin: 8px 0 4px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac-color-text-tertiary);
  font-weight: var(--ac-weight-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-canvas, #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-weight-bold); font-size: 0.92rem; }
.bit-push-row__sub { font-size: 0.75rem; color: var(--ac-color-text-tertiary); }
.bit-push-row__role {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--ac-weight-bold);
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--ac-color-text-secondary);
}
.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-text-secondary);
  padding: 6px 10px;
  background: var(--ac-color-canvas, #f6f1ea);
  border-radius: 8px;
}
.bit-push__loading {
  text-align: center;
  padding: 18px 0;
  color: var(--ac-color-text-secondary);
  font-size: var(--ac-text-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-border-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-weight-bold);
  font-size: var(--ac-text-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-7) var(--ac-space-4);
  color: var(--ac-color-text-secondary);
  font-size: var(--ac-text-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-text-tertiary);
  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-surface-raised);
  border: 1px solid var(--ac-color-border);
  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-border-strong); }
.contact-row--open { border-color: var(--ac-color-border-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-border-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-surface-overlay);
  border-radius: var(--ac-radius-md);
  text-decoration: none;
  color: var(--ac-color-text-primary);
  font-size: var(--ac-text-sm);
  min-width: 0;
}
.contact-row__detail:hover { background: var(--ac-color-surface-warm); }
.contact-row__detail--empty { color: var(--ac-color-text-tertiary); cursor: default; }
.contact-row__detail--empty:hover { background: var(--ac-color-surface-overlay); }
.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-text-xs);
  font-weight: var(--ac-weight-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-weight-bold);
  font-size: var(--ac-text-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-weight-bold);
  font-size: var(--ac-text-md);
  color: var(--ac-color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-row__sub {
  margin: 0;
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-row__tag {
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-weight-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-surface-warm); color: var(--ac-color-text-secondary); }
/* 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-text-xl);
  color: var(--ac-color-text-tertiary);
  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-surface-raised);
  border: 1px solid var(--ac-color-border);
  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-text-secondary);
  cursor: pointer;
  border-radius: 999px;
}
.contact-card__close:hover { color: var(--ac-color-text-primary); background: var(--ac-color-surface-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-weight-bold);
  font-size: var(--ac-text-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-text-xl);
  font-weight: var(--ac-weight-black);
  letter-spacing: var(--ac-tracking-tighter);
  line-height: 1.15;
  color: var(--ac-color-text-primary);
}
.contact-card__sub {
  margin: 0;
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-secondary);
}
.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-text-xs);
  font-weight: var(--ac-weight-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-surface-overlay);
  border-radius: var(--ac-radius-md);
  text-decoration: none;
  color: var(--ac-color-text-primary);
  min-width: 0;
  transition: background var(--ac-duration-fast) var(--ac-ease-standard);
}
.contact-card__detail:hover { background: var(--ac-color-surface-warm); }
.contact-card__detail--empty { color: var(--ac-color-text-tertiary); cursor: default; }
.contact-card__detail--empty:hover { background: var(--ac-color-surface-overlay); }
.contact-card__detail-label {
  font-size: 10px;
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-tertiary);
}
.contact-card__detail-value {
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-weight-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; }
.contact-card__form { display: flex; flex-direction: column; gap: 12px; }
.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-weight-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-secondary);
}
.contact-card__field-hint {
  font-weight: var(--ac-weight-regular);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ac-color-text-tertiary);
  margin-left: 4px;
}
.contact-card__input {
  width: 100%;
  border: 1px solid var(--ac-color-border);
  border-radius: var(--ac-radius-md);
  padding: 11px 13px;
  font-family: inherit;
  font-size: var(--ac-text-md);
  color: var(--ac-color-text-primary);
  background: var(--ac-color-surface-raised);
  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-border-focus);
  box-shadow: 0 0 0 3px var(--ac-color-accent-muted);
}
.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-text-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-text-sm);
  font-weight: var(--ac-weight-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-surface-warm);
  color: var(--ac-color-text-tertiary);
  font-size: var(--ac-text-2xl);
  font-weight: var(--ac-weight-medium);
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--ac-color-border-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-text-secondary);
  font-size: var(--ac-text-md);
}
.friend-row {
  display: flex;
  align-items: center;
  gap: var(--ac-space-3);
  padding: 12px 16px;
  background: var(--ac-color-surface-raised);
  border: 1px solid var(--ac-color-border);
  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-weight-bold);
  font-size: var(--ac-text-xs);
}
.friend-row__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.friend-row__name {
  margin: 0;
  font-weight: var(--ac-weight-bold);
  font-size: var(--ac-text-md);
  color: var(--ac-color-text-primary);
}
.friend-row__sub {
  margin: 0;
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-secondary);
}

/* ─── 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-7) var(--ac-space-7) 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-text-sm);
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
}
.release-hero__meta {
  margin: 0;
  font-size: var(--ac-text-md);
  color: rgba(255, 255, 255, 0.78);
}
.release-hero__title {
  margin: 0;
  font-family: var(--ac-font-body);
  font-weight: var(--ac-weight-black);
  font-size: var(--ac-text-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-text-primary);
}
.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-7) var(--ac-space-4);
  color: var(--ac-color-text-secondary);
  font-size: var(--ac-text-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-border);
  background: var(--ac-color-surface-raised);
  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-surface-overlay); }
.release-row__art {
  width: 56px;
  height: 56px;
  border-radius: var(--ac-radius-md);
  background: center/cover no-repeat var(--ac-color-surface-overlay);
  display: grid;
  place-items: center;
  color: var(--ac-color-text-tertiary);
  font-size: var(--ac-text-2xl);
}
.release-row__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.release-row__name { margin: 0; font-weight: var(--ac-weight-bold); font-size: var(--ac-text-md); color: var(--ac-color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.release-row__sub  { margin: 0; font-size: var(--ac-text-sm); color: var(--ac-color-text-secondary); }
.release-row__badge {
  font-size: var(--ac-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ac-tracking-wider);
  font-weight: var(--ac-weight-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-canvas);
  border: 1px solid var(--ac-color-border);
  border-radius: var(--ac-radius-pill);
  padding: 6px 14px;
  font-weight: var(--ac-weight-semibold);
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-primary);
  cursor: pointer;
}
.release-row__copy:hover { background: var(--ac-color-surface-warm); }
.release-row__chevron {
  font-size: var(--ac-text-lg);
  color: var(--ac-color-text-tertiary);
  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-border-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-surface-overlay);
  border-radius: var(--ac-radius-md);
  font-family: var(--ac-font-mono);
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-secondary);
  word-break: break-all;
}
.release-panel__url-link { color: var(--ac-color-text-primary); 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-surface-overlay);
  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-text-sm);
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-text-secondary);
}
.release-metric__value {
  font-family: var(--ac-font-body);
  font-weight: var(--ac-weight-black);
  font-size: var(--ac-text-3xl);
  color: var(--ac-color-text-primary);
}
.release-metric__sub  { font-size: var(--ac-text-sm); color: var(--ac-color-text-secondary); }

.release-panel__platforms { display: flex; flex-direction: column; gap: var(--ac-space-2); }
.release-panel__platforms .smart-link-row { background: var(--ac-color-surface-overlay); border-color: var(--ac-color-border-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-border);
  border-radius: var(--ac-radius-pill);
  padding: 6px 14px;
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-weight-semibold);
  text-decoration: none;
  color: var(--ac-color-text-primary);
  background: var(--ac-color-surface-raised);
  cursor: pointer;
}
.release-panel__actions a:hover, .release-panel__actions button:hover { background: var(--ac-color-surface-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-border);
  border-radius: var(--ac-radius-xl);
  background: var(--ac-color-surface-raised);
  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-weight-bold);
  font-size: var(--ac-text-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-weight-bold); }
.smart-link-row__count { font-weight: var(--ac-weight-bold); color: var(--ac-color-text-primary); }
.smart-link-row__share { font-size: var(--ac-text-sm); color: var(--ac-color-text-secondary); }
.smart-link-row__bar {
  grid-column: 2 / -1;
  height: 4px;
  background: var(--ac-color-surface-overlay);
  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-surface-raised);
  border: 1px solid var(--ac-color-border);
  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-text-sm);
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-secondary);
}
.stat-tile__value {
  margin: 0;
  font-family: var(--ac-font-body);
  font-weight: var(--ac-weight-bold);
  font-size: var(--ac-text-4xl);
  line-height: var(--ac-leading-tight);
  letter-spacing: var(--ac-tracking-tight);
  color: var(--ac-color-text-primary);
}
.stat-tile__life {
  margin: 0;
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-tertiary);
  letter-spacing: var(--ac-tracking-tight);
}
.stat-tile__life strong {
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-text-secondary);
  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-text-base);
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-secondary);
  flex: 1 1 auto;
}
.schedule-card__sub {
  margin: 0;
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-secondary);
}

/* Filter pill group (Booked / Pending / Holds) */
.schedule-filter {
  display: inline-flex;
  gap: var(--ac-space-1);
  padding: 3px;
  background: var(--ac-color-surface-overlay);
  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-text-sm);
  font-weight: var(--ac-weight-semibold);
  color: var(--ac-color-text-secondary);
  cursor: pointer;
  transition: background var(--ac-duration-fast) var(--ac-ease-standard);
}
.schedule-filter__pill.is-active {
  background: var(--ac-color-text-primary);
  color: var(--ac-color-text-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-7) var(--ac-space-4);
  color: var(--ac-color-text-secondary);
  font-size: var(--ac-text-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-surface-raised);
  border: 1px solid var(--ac-color-border);
  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-text-sm);
  color: var(--ac-color-text-secondary);
  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-weight-bold);
  font-size: var(--ac-text-xl);
  line-height: 1.1;
  color: var(--ac-color-text-primary);
}
/* 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-weight-bold);
  font-size: var(--ac-text-md);
  color: var(--ac-color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.show-row__venue {
  margin: 0;
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-secondary);
  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-text-sm);
  color: var(--ac-color-text-secondary);
}
.show-row__tickets-head strong {
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-text-primary);
}
.show-row__bar {
  height: 6px;
  border-radius: var(--ac-radius-pill);
  background: var(--ac-color-surface-overlay);
  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-weight-bold);
  font-size: var(--ac-text-xl);
  color: var(--ac-color-text-primary);
  white-space: nowrap;
}
.show-row__view {
  border: 1px solid var(--ac-color-border);
  background: var(--ac-color-canvas);
  color: var(--ac-color-text-primary);
  border-radius: var(--ac-radius-pill);
  padding: 8px 18px;
  font-weight: var(--ac-weight-semibold);
  cursor: pointer;
}
.show-row__view:hover { background: var(--ac-color-surface-warm); }

/* Past years accordion */
.past-years { display: flex; flex-direction: column; gap: var(--ac-space-3); }
.past-year {
  border: 1px solid var(--ac-color-border);
  border-radius: var(--ac-radius-xl);
  background: var(--ac-color-surface-raised);
  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-weight-bold);
  font-size: var(--ac-text-xl);
  cursor: pointer;
  text-align: left;
  color: var(--ac-color-text-primary);
}
.past-year__sub {
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-weight-medium);
  color: var(--ac-color-text-secondary);
  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-surface-overlay); }
.past-show__date { font-size: var(--ac-text-sm); color: var(--ac-color-text-secondary); }
.past-show__name { font-weight: var(--ac-weight-semibold); color: var(--ac-color-text-primary); }
.past-show__pl   { font-weight: var(--ac-weight-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-7) var(--ac-space-4);
  color: var(--ac-color-text-secondary);
  font-size: var(--ac-text-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-surface-raised);
  border: 1px solid var(--ac-color-border);
  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-weight-bold);
  font-size: var(--ac-text-md);
  color: var(--ac-color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quote-row__sub  { margin: 0; font-size: var(--ac-text-sm); color: var(--ac-color-text-secondary); }
.quote-row__ask  { font-weight: var(--ac-weight-bold); font-size: var(--ac-text-lg); color: var(--ac-color-text-primary); }
.quote-row__btn {
  border: 1px solid var(--ac-color-border);
  background: var(--ac-color-canvas);
  color: var(--ac-color-text-primary);
  border-radius: var(--ac-radius-pill);
  padding: 6px 12px;
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-weight-semibold);
  cursor: pointer;
}
.quote-row__btn:hover { background: var(--ac-color-surface-warm); }
.quote-row__btn--primary { background: var(--ac-color-text-primary); color: var(--ac-color-text-on-accent); border-color: var(--ac-color-text-primary); }
.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-text-sm); font-weight: var(--ac-weight-semibold); color: var(--ac-color-text-secondary); }
.book-form__check { display: flex; align-items: center; gap: 8px; font-size: var(--ac-text-sm); color: var(--ac-color-text-secondary); }
.book-form__radius { display: flex; flex-direction: column; gap: var(--ac-space-2); padding: var(--ac-space-3); background: var(--ac-color-surface-overlay); 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-border);
  border-radius: var(--ac-radius-lg);
  background: var(--ac-color-surface-raised);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.book-result__name { font-weight: var(--ac-weight-bold); }
.book-result__meta { font-size: var(--ac-text-sm); color: var(--ac-color-text-secondary); }
.book-result__actions { display: flex; gap: var(--ac-space-2); margin-top: 6px; }
.book-result__actions a {
  font-size: var(--ac-text-sm);
  color: var(--ac-color-accent);
  text-decoration: none;
  font-weight: var(--ac-weight-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-7) var(--ac-space-4);
  z-index: var(--ac-z-modal);
  overflow-y: auto;
}
.schedule-overlay[hidden] { display: none; }
.schedule-modal {
  background: var(--ac-color-surface-raised);
  border-radius: var(--ac-radius-3xl);
  padding: var(--ac-space-7);
  max-width: 760px;
  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-weight-black);
  font-size: var(--ac-text-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-text-sm); font-weight: var(--ac-weight-semibold); color: var(--ac-color-text-secondary); }
.schedule-form-row input,
.schedule-form-row select,
.schedule-form-row textarea {
  border: 1px solid var(--ac-color-border);
  border-radius: var(--ac-radius-md);
  padding: 10px 12px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-md);
  color: var(--ac-color-text-primary);
  background: var(--ac-color-surface-raised);
}
.schedule-form-section { border-top: 1px solid var(--ac-color-border-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-text-sm); font-weight: var(--ac-weight-bold); letter-spacing: var(--ac-tracking-wider); text-transform: uppercase; color: var(--ac-color-text-secondary); }
.schedule-form-section__hint {
  margin: 0 0 var(--ac-space-3);
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-secondary);
}
.schedule-form-section__empty {
  margin: 0;
  padding: var(--ac-space-4);
  text-align: center;
  border: 1px dashed var(--ac-color-border);
  border-radius: var(--ac-radius-lg);
  color: var(--ac-color-text-tertiary);
  font-size: var(--ac-text-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-text-tertiary); font-size: var(--ac-text-sm); }
.member-chip--editable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 4px;
  background: var(--ac-color-surface-overlay);
  border: 1px solid var(--ac-color-border);
  border-radius: var(--ac-radius-pill);
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-primary);
}
.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-text-tertiary);
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0;
}
.member-chip__x:hover { background: var(--ac-color-surface-warm); color: var(--ac-color-text-primary); }
.member-picker__search {
  width: 100%;
  border: 1px solid var(--ac-color-border);
  border-radius: var(--ac-radius-md);
  padding: 10px 14px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-md);
  background: var(--ac-color-surface-raised);
}
.member-picker__search:focus {
  outline: none;
  border-color: var(--ac-color-border-focus);
  box-shadow: 0 0 0 3px var(--ac-color-accent-muted);
}

/* 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-text-sm);
  color: var(--ac-color-text-secondary);
  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-text-tertiary); margin: 0 4px; }
.tour-builder__legend-cycle { color: var(--ac-color-text-tertiary); font-size: var(--ac-text-xs); width: 100%; margin-top: 4px; }
.tour-builder__summary {
  margin: 0;
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-secondary);
}
.tour-builder__label {
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-text-secondary);
}
.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-border-subtle);
}
.tour-cal {
  border: 1px solid var(--ac-color-border);
  border-radius: var(--ac-radius-lg);
  padding: var(--ac-space-3);
  background: var(--ac-color-surface-raised);
}
.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-border);
  border-radius: var(--ac-radius-md);
  width: 32px; height: 32px;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  color: var(--ac-color-text-primary);
}
.tour-cal__nav:hover { border-color: var(--ac-color-border-strong); }
.tour-cal__title {
  font-family: var(--ac-font-body);
  font-weight: var(--ac-weight-black);
  font-size: var(--ac-text-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-text-xs);
  text-align: center;
  color: var(--ac-color-text-tertiary);
  padding: 4px 0;
  font-weight: var(--ac-weight-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-surface-overlay);
  border: 1px solid var(--ac-color-border);
  border-radius: var(--ac-radius-md);
  padding: 8px 0;
  font-family: var(--ac-font-body);
  font-weight: var(--ac-weight-bold);
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-primary);
  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-border-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-surface-raised);
  border: 1px solid var(--ac-color-border);
  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-text-sm);
  color: var(--ac-color-text-primary);
  cursor: pointer;
}
.split-button__menu-item:hover { background: var(--ac-color-surface-overlay); }
.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-border-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-surface-raised);
  border: 1px solid var(--ac-color-border);
  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-border-subtle);
}
.ac-typeahead__item:last-child { border-bottom: none; }
.ac-typeahead__item:hover, .ac-typeahead__item.is-active { background: var(--ac-color-surface-overlay); }
.ac-typeahead__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: center/cover no-repeat var(--ac-color-surface-overlay);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-family: var(--ac-font-body);
  font-weight: var(--ac-weight-bold);
  font-size: var(--ac-text-xs);
  letter-spacing: 0.04em;
  color: var(--ac-color-text-secondary);
  text-transform: uppercase;
}
.ac-typeahead__name { font-weight: var(--ac-weight-semibold); font-size: var(--ac-text-md); }
.ac-typeahead__sub  { font-size: var(--ac-text-sm); color: var(--ac-color-text-secondary); }
.ac-typeahead__check {
  margin-left: auto;
  color: var(--ac-color-success);
  font-size: var(--ac-text-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-border);
  border-radius: var(--ac-radius-md);
  padding: 10px 12px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-md);
  color: var(--ac-color-text-primary);
  background: var(--ac-color-surface-raised);
  width: 100%;
}
.lineup-row input:focus,
.lineup-row select:focus {
  outline: none;
  border-color: var(--ac-color-border-focus);
  box-shadow: 0 0 0 3px var(--ac-color-accent-muted);
}
.lineup-row__remove {
  background: var(--ac-color-surface-raised);
  border: 1px solid var(--ac-color-border);
  border-radius: var(--ac-radius-md);
  padding: 0 14px;
  cursor: pointer;
  color: var(--ac-color-text-secondary);
  align-self: stretch;
  font-size: var(--ac-text-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-surface-overlay);
  border: 1px solid var(--ac-color-border);
  border-radius: 999px;
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-primary);
}
.lineup-pill .member-chip__avatar { margin-right: 0; }
.lineup-pill__name {
  font-weight: var(--ac-weight-semibold);
  white-space: nowrap;
  padding: 0 2px 0 4px;
  flex: 0 0 auto;
}
.lineup-pill__role {
  border: 1px solid var(--ac-color-border);
  background: transparent;
  border-radius: 999px;
  padding: 4px 22px 4px 10px;
  font-size: 12px;
  font-style: italic;
  color: var(--ac-color-text-secondary);
  cursor: pointer;
  flex: 0 0 auto;
}
.lineup-pill__role:focus {
  outline: none;
  border-color: var(--ac-color-border-focus);
  box-shadow: 0 0 0 2px var(--ac-color-accent-muted);
}

/* 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-surface-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-weight-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-secondary);
}
.stage-schedule__hint {
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-tertiary);
}
.stage-schedule__empty {
  margin: 0;
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-tertiary);
}
.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-weight-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-text-tertiary);
}
.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-border-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-weight-semibold);
  font-size: var(--ac-text-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-border);
  border-radius: var(--ac-radius-md);
  padding: 8px 12px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-primary);
  background: var(--ac-color-surface-raised);
  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-border-focus);
  box-shadow: 0 0 0 3px var(--ac-color-accent-muted);
}
.lineup-pill__remove {
  appearance: none;
  background: none;
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ac-color-text-tertiary);
  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-surface-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-border);
  border-radius: var(--ac-radius-md);
  padding: 10px 14px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-md);
  color: var(--ac-color-text-primary);
  background: var(--ac-color-surface-raised);
}
.lineup-add-row__input:focus {
  outline: none;
  border-color: var(--ac-color-border-focus);
  box-shadow: 0 0 0 3px var(--ac-color-accent-muted);
}

/* 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-surface-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-weight-bold);
  color: var(--ac-color-text-secondary);
}
.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-surface-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-text-sm);
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-text-secondary);
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.schedule-tabs__tab.is-active {
  background: var(--ac-color-surface-raised);
  color: var(--ac-color-text-primary);
  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-border);
  border-radius: var(--ac-radius-md);
  padding: 10px 12px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-md);
  color: var(--ac-color-text-primary);
  background: var(--ac-color-surface-raised);
  width: 100%;
  margin-top: 4px;
}
.schedule-tabs__panel textarea:focus {
  outline: none;
  border-color: var(--ac-color-border-focus);
  box-shadow: 0 0 0 3px var(--ac-color-accent-muted);
}
.lineup-add {
  align-self: flex-start;
  background: none;
  border: 1px dashed var(--ac-color-border-strong);
  border-radius: var(--ac-radius-md);
  padding: 8px 14px;
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-weight-semibold);
  color: var(--ac-color-text-secondary);
  cursor: pointer;
  margin-top: var(--ac-space-2);
}
.lineup-add:hover { background: var(--ac-color-surface-overlay); color: var(--ac-color-text-primary); }
.bit-tag { font-size: var(--ac-text-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-border-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-surface-overlay);
  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-surface-warm); border-color: var(--ac-color-text-tertiary); }
.upload-tile.is-dragover { background: var(--ac-color-accent-wash); border-color: var(--ac-color-accent); }
.upload-tile__label { font-size: var(--ac-text-sm); font-weight: var(--ac-weight-bold); letter-spacing: var(--ac-tracking-wider); text-transform: uppercase; color: var(--ac-color-text-secondary); }
.upload-tile__hint  { font-size: var(--ac-text-sm); color: var(--ac-color-text-tertiary); }
.upload-tile__name  { font-size: var(--ac-text-sm); color: var(--ac-color-text-primary); font-weight: var(--ac-weight-semibold); word-break: break-all; }
.upload-tile__preview {
  position: absolute; inset: 0;
  background: center/cover no-repeat var(--ac-color-canvas);
}
.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-border);
  border-radius: var(--ac-radius-pill);
  padding: 6px 14px 6px 12px;
  align-self: flex-start;
  font: inherit;
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-primary);
  cursor: pointer;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dos-page__back:hover { background: var(--ac-color-surface-warm); }
.dos-page__head {
  text-align: center;
  padding: 18px 0 24px;
  border-bottom: 1px solid var(--ac-color-border);
  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-text-3xl);
  font-weight: var(--ac-weight-black);
  letter-spacing: var(--ac-tracking-tight);
  margin: 0 0 8px;
  color: var(--ac-color-text-primary);
}
.dos-page__sub {
  color: var(--ac-color-text-secondary);
  margin: 0 0 4px;
  font-size: var(--ac-text-sm);
}
.dos-page__date {
  color: var(--ac-color-text-secondary);
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ac-tracking-widest);
  font-weight: var(--ac-weight-bold);
}
.dos-page__section { margin: 0 0 24px; }
.dos-page__heading {
  font-size: 11px;
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-secondary);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ac-color-border);
}
.dos-page__table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #b4b4b4;
  font-size: var(--ac-text-sm);
}
.dos-page__table th {
  background: #dcdcdc;
  border: 1px solid #b4b4b4;
  padding: 7px 10px;
  text-align: left;
  font-size: 10px;
  font-weight: var(--ac-weight-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-text-primary);
  vertical-align: top;
}
.dos-page__paragraph {
  white-space: pre-wrap;
  line-height: 1.5;
  margin: 0;
  font-size: var(--ac-text-md);
  color: var(--ac-color-text-primary);
}
.dos-page__bullets {
  list-style: disc;
  padding: 0 0 0 22px;
  margin: 0;
  color: var(--ac-color-text-primary);
}
.dos-page__bullets li {
  font-size: var(--ac-text-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-text-primary);
}
.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-text-primary);
}
.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-text-primary);
}
.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-text-primary);
  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-text-primary);
  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-border);
}

/* Show details (View) panel */
.show-details { display: flex; flex-direction: column; gap: var(--ac-space-4); }
/* 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-7) * -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-surface-overlay);
  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-7) AND the head height
     (~80px including its margin-bottom negation). Side bleed already
     in the base rule. */
  margin: calc(var(--ac-space-7) * -1 - 100px) calc(var(--ac-space-7) * -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-surface-overlay) 0 12px,
    var(--ac-color-surface-raised) 12px 24px);
}
.show-details__hero--empty span {
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--ac-tracking-wider);
  background: var(--ac-color-surface-raised);
  padding: 6px 14px;
  border-radius: var(--ac-radius-pill);
  border: 1px solid var(--ac-color-border);
}
@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-border-subtle); align-items: flex-start; min-width: 0; }
.show-details__row:last-child { border-bottom: none; }
.show-details__label { font-size: var(--ac-text-sm); color: var(--ac-color-text-secondary); text-transform: uppercase; letter-spacing: var(--ac-tracking-wider); font-weight: var(--ac-weight-semibold); flex-shrink: 0; }
.show-details__value { font-weight: var(--ac-weight-semibold); color: var(--ac-color-text-primary); 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-text-primary); }
/* 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-border);
  border-radius: 8px;
  width: 100%;
  background: var(--ac-color-canvas);
}
.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-weight-regular);
  color: var(--ac-color-text-tertiary);
}
.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-border-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-text-tertiary);
  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-border-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, #d23b4d);
  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-text-tertiary);
}
.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-border-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, #d23b4d);
  text-transform: uppercase;
}
.pack-tonight-row__name {
  font-size: 13px;
  color: var(--ac-color-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pack-tonight-row__variant {
  display: block;
  font-size: 11px;
  color: var(--ac-color-text-tertiary);
  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-text-tertiary);
}
/* 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;
}
/* 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;
}
/* 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-surface-raised, #fff);
}
.prod-cases__sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ac-color-text-secondary);
  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-text-secondary);
  background: var(--ac-color-canvas-glow);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ac-color-border);
  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-border);
  border-radius: 999px;
  cursor: pointer;
  color: var(--ac-color-text-primary);
}
.prod-cases__resetbtn:hover {
  background: var(--ac-color-canvas-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-text-tertiary);
  background: var(--ac-color-canvas-glow);
  border: 1px dashed var(--ac-color-border);
  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-canvas);
  border: 1px solid var(--ac-color-border);
  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-border);
  border-radius: 999px;
  color: var(--ac-color-text-tertiary);
  cursor: pointer;
  white-space: nowrap;
}
.prod-cases__nfc:hover {
  border-color: var(--ac-color-text-tertiary);
  color: var(--ac-color-text-secondary);
}
.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-text-secondary);
  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-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.prod-cases__item--state-packed .prod-cases__name {
  color: var(--ac-color-text-secondary);
}
.prod-cases__item--state-on_truck .prod-cases__name {
  color: var(--ac-color-text-tertiary);
  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-text-tertiary);
  background: var(--ac-color-canvas-glow);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--ac-color-border);
  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-text-tertiary);
  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-canvas-glow);
  border: 1px solid var(--ac-color-border);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ac-color-text-primary);
  outline: none;
}
.prod-cases__addinput::placeholder {
  color: var(--ac-color-text-tertiary);
}
.prod-cases__addinput:focus {
  border-color: var(--ac-color-accent);
}
.prod-cases__addbtn {
  padding: 10px 16px;
  background: var(--ac-color-text-primary);
  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-surface-raised);
  border: 1px solid var(--ac-color-border);
  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-text-primary);
}
.sc-cal__year {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; color: var(--ac-color-text-tertiary);
  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-text-primary);
  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-text-tertiary);
  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-text-primary);
  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-text-tertiary);
}
/* 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-text-tertiary); }
/* 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-text-tertiary);
}
.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-text-tertiary);
  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-text-primary);
}
.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-surface-raised);
  border: 1px dashed var(--ac-color-border-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-text-tertiary);
  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-text-tertiary);
  text-transform: uppercase;
}
.sc-up__list {
  margin-top: 10px;
  display: flex; flex-direction: column;
  background: var(--ac-color-surface-raised);
  border: 1px solid var(--ac-color-border);
  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-border);
  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-text-tertiary);
}
.sc-up__num {
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px; letter-spacing: -0.005em;
  margin-top: 2px;
  color: var(--ac-color-text-primary);
}
.sc-up__title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px; letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ac-color-text-primary);
}
.sc-up__sub {
  font-size: 12px;
  color: var(--ac-color-text-secondary);
  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-surface-overlay);
  border-radius: var(--ac-radius-pill);
  font-size: var(--ac-text-sm);
  border: 1px solid transparent;
  font-weight: var(--ac-weight-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-surface-raised);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-text-secondary);
  letter-spacing: 0.02em;
  border: 1px solid var(--ac-color-border-subtle);
}
.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-surface-raised);
  font-size: 0.65rem;
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-text-secondary);
  border: 1px solid var(--ac-color-border-subtle);
}
.show-details__venue-avatar--initials { background-image: none; }
.show-details__venue-name { font-weight: var(--ac-weight-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-border-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-text-sm);
  color: var(--ac-color-text-secondary);
}
.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-border-subtle); }
.connect-broadcast__subject,
.connect-broadcast__body {
  width: 100%;
  border: 1px solid var(--ac-color-border);
  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-text-md);
  color: var(--ac-color-text-primary);
  background: var(--ac-color-surface-raised);
  resize: vertical;
}
.connect-broadcast__subject:focus,
.connect-broadcast__body:focus {
  outline: none;
  border-color: var(--ac-color-border-focus);
  box-shadow: 0 0 0 3px var(--ac-color-accent-muted);
}
.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-text-sm);
  color: var(--ac-color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--ac-space-2);
}
.connect-broadcast__audience select {
  border: 1px solid var(--ac-color-border);
  border-radius: var(--ac-radius-pill);
  padding: 4px 12px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-text-primary);
  background: var(--ac-color-surface-raised);
}

/* 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-border);
  border-radius: var(--ac-radius-pill);
  padding: 6px 14px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-primary);
  background: var(--ac-color-surface-raised);
  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-surface-raised);
  border: 1px solid var(--ac-color-border);
  border-radius: var(--ac-radius-lg);
  font-size: var(--ac-text-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-weight-bold);
  font-size: var(--ac-text-sm);
}
.connect-fans__name  { font-weight: var(--ac-weight-bold); color: var(--ac-color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.connect-fans__email { color: var(--ac-color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.connect-fans__shows { font-size: var(--ac-text-sm); color: var(--ac-color-text-secondary); white-space: nowrap; }
.connect-fans__source {
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--ac-radius-pill);
  background: var(--ac-color-surface-overlay);
  color: var(--ac-color-text-secondary);
}
/* 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-surface-overlay); color: var(--ac-color-text-secondary); }
.connect-fans__status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--ac-text-sm);
  color: var(--ac-color-success);
  font-weight: var(--ac-weight-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-text-tertiary);
}
.connect-fans__status--opted-out::before {
  background: var(--ac-color-text-tertiary);
}
.connect-fans__empty {
  text-align: center;
  padding: var(--ac-space-7) var(--ac-space-4);
  color: var(--ac-color-text-secondary);
  font-size: var(--ac-text-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-surface-raised);
  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-text-2xl); font-weight: var(--ac-weight-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-text-sm); color: var(--ac-color-text-secondary); }
.connect-modal__label {
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-text-secondary);
  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-border);
  border-radius: var(--ac-radius-md);
  padding: 8px 12px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-md);
  color: var(--ac-color-text-primary);
  background: var(--ac-color-surface-raised);
}
.connect-modal__input:focus { outline: none; border-color: var(--ac-color-border-focus); box-shadow: 0 0 0 3px var(--ac-color-accent-muted); }
.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-border-subtle); }

/* Email style: image upload tile */
.connect-style__upload {
  border: 1px dashed var(--ac-color-border);
  border-radius: var(--ac-radius-lg);
  padding: var(--ac-space-4);
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--ac-color-surface-overlay);
}
.connect-style__upload-empty { display: flex; flex-direction: column; align-items: center; gap: var(--ac-space-2); color: var(--ac-color-text-tertiary); font-size: var(--ac-text-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-border);
  border-radius: var(--ac-radius-lg);
  background: var(--ac-color-surface-raised);
  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-text-primary);
}
.connect-imports__tile:hover { border-color: var(--ac-color-border-focus); }
.connect-imports__name { font-weight: var(--ac-weight-bold); }
.connect-imports__hint { font-size: var(--ac-text-xs); color: var(--ac-color-text-tertiary); }

/* 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-surface-overlay); 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-text-sm); color: var(--ac-color-text-secondary); 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-border); 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-text-sm); }
.connect-history__row-subject { font-weight: var(--ac-weight-bold); color: var(--ac-color-text-primary); }
.connect-history__row-meta { color: var(--ac-color-text-tertiary); }
.connect-history__row-body { margin-top: 4px; font-size: var(--ac-text-sm); color: var(--ac-color-text-secondary); white-space: pre-wrap; }
.connect-history__empty { text-align: center; padding: var(--ac-space-5); color: var(--ac-color-text-tertiary); font-size: var(--ac-text-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;
  background: rgba(14, 12, 11, 0.55);
  display: grid;
  place-items: center;
  z-index: 100;
  padding: var(--ac-space-4);
}
.profile-overlay[hidden] { display: none; }
.profile-modal {
  background: var(--ac-color-surface-raised);
  border-radius: var(--ac-radius-3xl);
  padding: var(--ac-space-7);
  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-weight-black);
  font-size: var(--ac-text-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-text-secondary);
  font-size: var(--ac-text-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-surface-overlay);
  border-radius: var(--ac-radius-lg);
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-secondary);
}

/* 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-weight-black);
  font-size: var(--ac-text-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-text-xs);
  font-weight: var(--ac-weight-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-text-sm); color: var(--ac-color-text-secondary); }
.profile-edit__label {
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-text-secondary);
  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-weight-regular);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ac-color-text-tertiary);
  font-size: var(--ac-text-xs);
}
.profile-edit__input {
  width: 100%;
  border: 1px solid var(--ac-color-border);
  border-radius: var(--ac-radius-md);
  padding: 10px 12px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-md);
  color: var(--ac-color-text-primary);
  background: var(--ac-color-surface-raised);
}
.profile-edit__input:focus {
  outline: none;
  border-color: var(--ac-color-border-focus);
  box-shadow: 0 0 0 3px var(--ac-color-accent-muted);
}
.profile-edit__input:disabled {
  background: var(--ac-color-surface-overlay);
  color: var(--ac-color-text-tertiary);
}
.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-text-tertiary); font-size: var(--ac-text-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-weight-bold, 700);
  font-size: var(--ac-text-md);
  letter-spacing: var(--ac-tracking-tight);
  color: var(--ac-color-text-primary);
  border-top: 1px solid var(--ac-color-border, 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-text-sm);
  color: var(--ac-color-text-secondary);
  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-text-sm);
  color: var(--ac-color-text-tertiary);
}
.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-border, rgba(0,0,0,0.12));
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--ac-color-text-secondary);
}
.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-border, rgba(0,0,0,0.06));
  font-size: var(--ac-text-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-text-tertiary);
}
.profile-view__travel-value {
  color: var(--ac-color-text-primary);
  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-surface-overlay);
  border: 1px solid var(--ac-color-border);
  border-radius: var(--ac-radius-pill);
  font-size: var(--ac-text-sm);
}
.profile-edit__skill-x {
  background: none; border: none; cursor: pointer;
  width: 20px; height: 20px; border-radius: 50%;
  color: var(--ac-color-text-tertiary);
  font-size: 14px; line-height: 1; padding: 0;
}
.profile-edit__skill-x:hover { background: var(--ac-color-surface-warm); color: var(--ac-color-text-primary); }
.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-surface-raised);
  border: 1px solid var(--ac-color-border);
  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-text-sm);
  color: var(--ac-color-text-primary);
  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-surface-warm);
}
.profile-edit__skill-error {
  margin: 6px 0 0;
  font-size: var(--ac-text-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-border);
  border-radius: var(--ac-radius-md);
  background: var(--ac-color-surface-raised);
  font-size: var(--ac-text-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-border-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-text-md);
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-accent);
  letter-spacing: var(--ac-tracking-tighter);
}
.profile-edit__danger-copy {
  margin: 0;
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-secondary);
  line-height: 1.55;
}
.profile-edit__danger-copy strong {
  color: var(--ac-color-accent);
  font-weight: var(--ac-weight-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-text-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-text-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-border-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-weight-black);
  font-size: var(--ac-text-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-border);
}
.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-text-sm);
  color: var(--ac-color-text-secondary);
}
.profile-view--band .profile-view__role {
  margin: 0;
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-secondary);
  text-transform: capitalize;
}
.profile-view--band .profile-view__bio {
  margin: 6px 0 0;
  font-size: var(--ac-text-sm);
  line-height: 1.5;
  color: var(--ac-color-text-primary);
  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-weight-black);
  font-size: var(--ac-text-xl);
}
.profile-view__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.profile-view__name { margin: 0; font-size: var(--ac-text-2xl); font-weight: var(--ac-weight-black); letter-spacing: var(--ac-tracking-tight); line-height: 1.05; }
.profile-view__role { margin: 4px 0 0; color: var(--ac-color-text-secondary); font-size: var(--ac-text-sm); }
.profile-view__bio { margin: 0; font-size: var(--ac-text-md); color: var(--ac-color-text-primary); 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-surface-overlay);
  color: var(--ac-color-text-primary);
  padding: 6px 12px;
  border-radius: var(--ac-radius-pill);
  font-size: var(--ac-text-sm);
}
.profile-view__contact-link:hover { background: var(--ac-color-surface-warm); }
.profile-view__section { display: flex; flex-direction: column; gap: 8px; padding-top: var(--ac-space-2); border-top: 1px solid var(--ac-color-border-subtle); }
.profile-view__section-title {
  margin: 0;
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-text-secondary);
}
.profile-view__skills { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-view__skill {
  background: var(--ac-color-surface-overlay);
  border: 1px solid var(--ac-color-border);
  border-radius: var(--ac-radius-pill);
  padding: 3px 10px;
  font-size: var(--ac-text-sm);
}
.profile-view__history { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--ac-text-sm); color: var(--ac-color-text-primary); }

/* 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-border);
  border-radius: var(--ac-radius-md);
  background: var(--ac-color-surface-raised);
  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-border-strong);
  background: var(--ac-color-surface-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-weight-bold);
  font-size: var(--ac-text-xs);
}
.profile-view__band-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.profile-view__band-name {
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-view__band-role {
  font-size: 10px;
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-text-tertiary);
}

/* 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-7);
  padding: var(--ac-space-5) 0 var(--ac-space-7);
  border-top: 1px solid var(--ac-color-border-subtle);
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-tertiary);
}
.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-text-secondary);
  text-decoration: none;
  transition: color var(--ac-duration-fast) var(--ac-ease-standard);
}
.app-footer__links a:hover { color: var(--ac-color-text-primary); }
@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-surface-raised);
  border: 1px solid var(--ac-color-border);
  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-text-sm);
  color: var(--ac-color-text-tertiary);
  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-surface-overlay); }
.band-switcher__top-label {
  font-weight: var(--ac-weight-bold);
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-primary);
}
.band-switcher__top-meta {
  font-size: var(--ac-text-xs);
  color: var(--ac-color-text-tertiary);
}
.band-switcher__divider {
  height: 1px;
  background: var(--ac-color-border-subtle);
  margin: 4px 0;
}
.band-switcher__head {
  padding: 6px 12px 4px;
  font-size: 10px;
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-tertiary);
}
.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-surface-overlay); }
.band-switcher__row--current { background: var(--ac-color-surface-overlay); cursor: default; }
.band-switcher__row--current:hover { background: var(--ac-color-surface-overlay); }
.band-switcher__name {
  font-weight: var(--ac-weight-bold);
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-primary);
  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-weight-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-text-tertiary);
}
.band-switcher__current {
  font-size: 10px;
  font-weight: var(--ac-weight-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-text-sm);
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-text-secondary);
  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-weight-black);
  font-size: var(--ac-text-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-surface-raised);
  border: 1px solid var(--ac-color-border);
  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-text-xs);
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-tertiary);
  border-bottom: 1px solid var(--ac-color-border-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-text-primary);
}
.jedi-switcher__item:hover { background: var(--ac-color-surface-overlay); }
.jedi-switcher__item--active {
  background: rgba(212, 175, 55, 0.10);
  color: var(--ac-color-text-primary);
}
.jedi-switcher__item-label { font-weight: var(--ac-weight-bold); font-size: var(--ac-text-sm); }
.jedi-switcher__item-meta {
  font-size: 10px;
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-text-tertiary);
}

/* 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 and the inbox button in the topbar. */
body[data-perms-friends="no"] .contacts-rail,
body[data-perms-friends="no"] [data-friends-section],
body[data-perms-friends="no"] #inboxBtn {
  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-surface-raised);
  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-weight-black);
  font-size: var(--ac-text-lg);
  letter-spacing: var(--ac-tracking-tight);
  color: var(--ac-color-text-primary);
}
.ac-dialog__body {
  margin: 0;
  color: var(--ac-color-text-secondary);
  font-size: var(--ac-text-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-border, rgba(0,0,0,0.12));
  border-radius: var(--ac-radius-lg);
  font: inherit;
  background: var(--ac-color-surface);
  color: var(--ac-color-text-primary);
}
.ac-dialog__input:focus {
  outline: none;
  border-color: var(--ac-color-text-primary);
  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-7) * -1);
  margin: calc(var(--ac-space-7) * -1) calc(var(--ac-space-7) * -1) 0;
  padding: var(--ac-space-7) var(--ac-space-7) var(--ac-space-4);
  background: var(--ac-color-surface-raised);
  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-text-on-accent);
  font-family: var(--ac-font-body);
  font-size: 11px;
  font-weight: var(--ac-weight-bold);
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--ac-color-surface-raised);
  box-sizing: content-box;
}
.icon-btn__badge[hidden] { display: none; }

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

/* 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-border);
  position: sticky;
  top: 0;
  background: var(--ac-color-surface-raised);
  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-weight-bold);
  letter-spacing: 0.02em;
  color: var(--ac-color-text-secondary);
  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-surface-warm); }
.inbox-tab.is-active {
  background: var(--ac-color-text-primary);
  color: var(--ac-color-surface-raised);
}
.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-weight-bold);
}
.inbox-tab.is-active .inbox-tab__count { background: var(--ac-color-surface-raised); color: var(--ac-color-text-primary); }
.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-text-tertiary); }

.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-border);
  border-radius: var(--ac-radius-lg);
  background: var(--ac-color-surface-raised);
  cursor: pointer;
  transition: border-color var(--ac-duration-fast) var(--ac-ease-standard);
}
.inbox-list__row:hover { border-color: var(--ac-color-border-strong); }
.inbox-list__row--unread { background: var(--ac-color-surface-overlay); }
.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-weight-bold);
  font-size: var(--ac-text-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-weight-bold); color: var(--ac-color-text-primary); 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-weight-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-tertiary);
  background: var(--ac-color-surface-overlay);
  padding: 1px 6px;
  border-radius: var(--ac-radius-pill);
  white-space: nowrap;
}
.inbox-list__time { font-size: var(--ac-text-xs); color: var(--ac-color-text-tertiary); flex-shrink: 0; }
.inbox-list__preview {
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-list__row--unread .inbox-list__preview { color: var(--ac-color-text-primary); font-weight: var(--ac-weight-semibold); }
.inbox-list__preview-empty { color: var(--ac-color-text-tertiary); font-style: italic; }
.inbox-list__dot {
  background: var(--ac-color-accent);
  color: var(--ac-color-text-on-accent);
  font-size: 11px;
  font-weight: var(--ac-weight-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-border-subtle);
}
.inbox-thread__back, .inbox-thread__band {
  background: none; border: none;
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-weight-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-text-sm);
  color: var(--ac-color-text-secondary);
  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-surface-warm);
  border: 2px solid var(--ac-color-surface-raised);
  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-weight-bold);
  color: var(--ac-color-text-secondary);
  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-text-tertiary);
}
.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-surface-raised);
}
.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-text-xs);
  color: var(--ac-color-text-tertiary);
  text-align: center;
  background: var(--ac-color-surface-overlay);
  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-text-xs);
  color: var(--ac-color-text-secondary);
  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-text-secondary);
  font-size: 10px;
  font-weight: var(--ac-weight-bold);
}
.inbox-msg__sender-name { font-weight: var(--ac-weight-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-border);
  background: var(--ac-color-surface-raised);
  color: var(--ac-color-text-secondary);
  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-surface-raised);
  border: 1px solid var(--ac-color-border);
  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-surface-warm); transform: scale(1.15); }
.inbox-msg__picker-btn.is-active { background: var(--ac-color-accent-muted); }

/* 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-surface-raised);
  border: 1px solid var(--ac-color-border);
  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-surface-warm); }
.inbox-msg__rx--mine {
  background: var(--ac-color-accent-muted);
  border-color: var(--ac-color-accent);
}
.inbox-msg__rx-emoji { line-height: 1; font-size: 14px; }
.inbox-msg__rx-count { color: var(--ac-color-text-secondary); font-weight: var(--ac-weight-bold); font-size: 11px; }
.inbox-msg__bubble {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: var(--ac-text-md);
  line-height: var(--ac-leading-snug);
  word-break: break-word;
}
.inbox-msg--in  .inbox-msg__bubble {
  background: var(--ac-color-surface-overlay);
  color: var(--ac-color-text-primary);
  border-bottom-left-radius: 4px;
}
.inbox-msg--out .inbox-msg__bubble {
  background: var(--ac-color-text-primary);
  color: var(--ac-color-text-on-accent);
  border-bottom-right-radius: 4px;
}
.inbox-msg__meta {
  font-size: var(--ac-text-xs);
  color: var(--ac-color-text-tertiary);
  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-weight-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-tertiary);
  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-border-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-surface-raised);
  border: 1px solid var(--ac-color-border);
  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-text-primary); }
.offer-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.offer-card__eyebrow {
  font-size: 11px;
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-secondary);
}
.offer-card__status {
  font-size: 10px;
  font-weight: var(--ac-weight-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-surface-overlay); color: var(--ac-color-text-tertiary); }
.offer-card__date {
  margin: 0;
  font-size: var(--ac-text-lg);
  font-weight: var(--ac-weight-black);
  letter-spacing: var(--ac-tracking-tighter);
  color: var(--ac-color-text-primary);
}
.offer-card__venue {
  margin: 0;
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-secondary);
}
.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-weight-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-tertiary);
  margin: 0;
}
.offer-card__terms dd {
  margin: 0;
  font-size: var(--ac-text-md);
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-text-primary);
}
.offer-card__notes {
  margin: 4px 0 0;
  padding: 8px 10px;
  background: var(--ac-color-surface-overlay);
  border-radius: var(--ac-radius-md);
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-primary);
  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-text-xs);
  color: var(--ac-color-text-tertiary);
  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-surface-raised);
  border: 1px solid var(--ac-color-border);
  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-border-strong); }
.opportunity__lead { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opportunity__pill {
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-wider);
  color: var(--ac-color-accent);
  white-space: nowrap;
}
.inbox-thread__textarea {
  border: 1px solid var(--ac-color-border);
  border-radius: var(--ac-radius-lg);
  padding: 10px 14px;
  font-family: var(--ac-font-body);
  font-size: var(--ac-text-md);
  background: var(--ac-color-surface-raised);
  resize: vertical;
  min-height: 44px;
}
.inbox-thread__textarea:focus {
  outline: none;
  border-color: var(--ac-color-border-focus);
  box-shadow: 0 0 0 3px var(--ac-color-accent-muted);
}

/* 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-border-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-weight-black);
  font-size: var(--ac-text-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-border);
}
/* 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-text-2xl); font-weight: var(--ac-weight-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-text-sm);
  color: var(--ac-color-text-secondary);
}
.band-view__genre-line {
  margin: 2px 0 0;
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-tertiary);
}

.band-view__section { display: flex; flex-direction: column; gap: var(--ac-space-2); }
.band-view__section-title {
  margin: 0;
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-secondary);
}
.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-text-sm);
  line-height: 1.5;
  color: var(--ac-color-text-primary);
  max-width: 56ch;
}
.band-view__empty {
  margin: 0;
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-tertiary);
  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-border);
  border-radius: var(--ac-radius-md);
  background: var(--ac-color-surface-raised);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  font-size: var(--ac-text-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-border-strong);
  background: var(--ac-color-surface-warm);
}
.band-view__member:active { transform: scale(0.998); }
.band-view__member-chev {
  font-size: var(--ac-text-md);
  color: var(--ac-color-text-tertiary);
  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-weight-bold);
  font-size: var(--ac-text-xs);
}
.band-view__member-name { font-weight: var(--ac-weight-bold); color: var(--ac-color-text-primary); }
.band-view__member-role {
  font-size: 10px;
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-text-tertiary);
}

/* 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-border);
  background: var(--ac-color-surface-raised);
  border-radius: var(--ac-radius-pill);
  font-family: inherit;
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  color: var(--ac-color-text-secondary);
  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-border-strong);
  color: var(--ac-color-text-primary);
}
/* 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-weight-bold);
  font-size: var(--ac-text-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-text-xs);
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-text-primary);
  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-border);
  border-radius: var(--ac-radius-md);
  background: var(--ac-color-surface-raised);
  font-size: var(--ac-text-sm);
}
.band-view__show-date {
  font-family: var(--ac-font-body);
  font-weight: var(--ac-weight-bold);
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-secondary);
  letter-spacing: var(--ac-tracking-tight);
  white-space: nowrap;
}
.band-view__show-venue { margin: 0; font-weight: var(--ac-weight-bold); color: var(--ac-color-text-primary); display: flex; align-items: center; gap: 8px; min-width: 0; }
.band-view__show-tag {
  font-size: 9px;
  font-weight: var(--ac-weight-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-text-sm);
  margin: 2px 4px 2px 0;
  font-weight: var(--ac-weight-semibold);
}
.friend-chip__dot { width: 8px; height: 8px; border-radius: 50%; }
.friend-chip__badge {
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-weight-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-weight-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-text-secondary); font-size: var(--ac-text-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-border);
  border-radius: var(--ac-radius-lg);
  background: var(--ac-color-surface-raised);
}
.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-weight-bold);
  font-size: var(--ac-text-sm);
  letter-spacing: 0.04em;
}
.invite-picker__name { font-weight: var(--ac-weight-bold); color: var(--ac-color-text-primary); 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-border-subtle); }

/* Member chips */
.member-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--ac-color-surface-overlay); border-radius: var(--ac-radius-pill); font-size: var(--ac-text-sm); margin: 2px 4px 2px 0; }
.member-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ac-color-text-tertiary); }
.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-text-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-text-3xl); }
  .spotlight__stats { grid-template-columns: 1fr 1fr 1fr; gap: var(--ac-space-3); }
  .stat-block--inverse .stat-block__value { font-size: var(--ac-text-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-text-primary) 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-platform-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-text-primary); }
.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-text-tertiary);
}
.gl-desk-error { color: var(--ac-color-danger); }

.gl-desk-progress {
  background: var(--ac-color-surface-raised, #fff);
  border: 1px solid var(--ac-color-accent-muted, 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-text-tertiary);
}
.gl-desk-progress__count {
  font-family: 'Archivo Black', sans-serif;
  font-size: 32px; line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ac-color-text-primary);
}
.gl-desk-progress__of {
  color: var(--ac-color-text-tertiary);
  font-size: 24px;
}
.gl-desk-progress__sub {
  margin-top: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ac-color-text-secondary);
}

.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-border);
  background: var(--ac-color-surface-raised, #fff);
  color: var(--ac-color-text-secondary);
  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-canvas-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-surface-raised, #fff);
  border: 1px solid var(--ac-color-border);
  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-border);
}
.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-text-primary);
}
.gl-desk-row__sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--ac-color-text-tertiary);
  margin-top: 3px;
}
.gl-desk-row__count {
  font-family: 'Archivo Black', sans-serif;
  font-size: 18px;
  color: var(--ac-color-text-tertiary);
}
.gl-desk-row__count.is-scanned { color: var(--ac-color-success); }
.gl-desk-row__tot {
  font-size: 11px;
  color: var(--ac-color-text-tertiary);
  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-surface-raised, #fff);
  border: 1px solid var(--ac-color-border);
  border-radius: 14px;
}
.gl-desk-empty__title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px;
  margin-bottom: 4px;
  color: var(--ac-color-text-primary);
}
.gl-desk-empty__sub {
  font-size: 12px;
  color: var(--ac-color-text-secondary);
}

.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-surface-raised, #fff);
  border: 1px solid var(--ac-color-border);
  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-canvas-glow);
  border: 1px solid var(--ac-color-border);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ac-color-text-primary);
  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-canvas-glow);
  border: 1px solid var(--ac-color-border);
  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-text-primary);
  cursor: pointer;
}
.gl-desk-stepper button:disabled { color: var(--ac-color-text-disabled); cursor: not-allowed; }
.gl-desk-stepper span {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  padding: 0 10px;
  color: var(--ac-color-text-primary);
}

/* ─────────────────────────────────────────────────────────────
   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";
  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; }

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

.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-text-primary);
}
.production-assets__sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ac-color-text-secondary);
  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;
}
.prod-card--inputs .prod-input-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 80vh;
  overflow-y: auto;
  padding-right: 4px;
}
.prod-card--inputs .prod-input-add {
  flex: 0 0 auto;
}

/* 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-text-tertiary);
  padding: 10px 12px;
  background: var(--ac-color-canvas-glow);
  border: 1px dashed var(--ac-color-border);
  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-canvas);
  border-color: var(--ac-color-text-tertiary);
  color: var(--ac-color-text-secondary);
}
.prod-file-list__dropicon {
  width: 22px; height: 22px;
  color: var(--ac-color-text-tertiary);
}
.prod-file-list__droptitle {
  font-size: 12px;
  font-weight: 600;
  color: var(--ac-color-text-secondary);
}
.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-text-tertiary);
  font-weight: 700;
}
/* 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-canvas);
  border: 1px solid var(--ac-color-border);
  border-radius: 12px;
}
.prod-file-row__meta {
  min-width: 0;
}
.prod-file-row__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ac-color-text-primary);
  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-text-tertiary);
  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-canvas-glow);
  border: 1px solid var(--ac-color-border);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ac-color-text-primary);
  outline: none;
}
.prod-add__label::placeholder {
  color: var(--ac-color-text-tertiary);
}
.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-text-tertiary);
  padding: 16px;
  background: var(--ac-color-canvas-glow);
  border: 1px dashed var(--ac-color-border);
  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-canvas);
  border: 1px solid var(--ac-color-border);
  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-text-primary);
}
.prod-input-row__inst,
.prod-input-row__mic {
  font-size: 14px;
  color: var(--ac-color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prod-input-row__inst { font-weight: 600; }
.prod-input-row__mic  { color: var(--ac-color-text-secondary); }

/* 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-text-tertiary);
  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-canvas-glow);
  border: 1px solid var(--ac-color-border);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ac-color-text-primary);
  outline: none;
}
.prod-input-add input::placeholder {
  color: var(--ac-color-text-tertiary);
}

/* ── 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-surface-raised, #fff);
  border: 1px solid var(--ac-color-border);
  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-text-primary);
  cursor: pointer;
  line-height: 1.3;
}
.prod-mic-picker__opt:hover,
.prod-mic-picker__opt.is-active {
  background: var(--ac-color-canvas-glow);
}
.prod-mic-picker__empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--ac-color-text-tertiary);
  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-surface-raised, #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-text-primary);
  letter-spacing: -0.005em;
}
.prod-mic-modal__sub {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ac-color-text-secondary);
  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-text-tertiary);
}
.prod-mic-modal__field input {
  padding: 11px 13px;
  background: var(--ac-color-canvas-glow);
  border: 1px solid var(--ac-color-border);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--ac-color-text-primary);
  outline: none;
}
.prod-mic-modal__field input::placeholder {
  color: var(--ac-color-text-tertiary);
}
.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-surface-raised, #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-text-tertiary);
  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-text-primary);
}
.prod-venue-modal__sub {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ac-color-text-secondary);
}
.prod-venue-modal__close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--ac-color-text-tertiary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.prod-venue-modal__close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ac-color-text-primary);
}
.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-text-secondary);
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ac-color-border);
}
.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-text-tertiary);
}
.prod-venue-modal__field input,
.prod-venue-modal__field textarea {
  padding: 9px 11px;
  background: var(--ac-color-canvas-glow);
  border: 1px solid var(--ac-color-border);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  color: var(--ac-color-text-primary);
  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-text-secondary);
  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-text-primary);
  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-border);
}
@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-canvas-glow);
  border: 1px solid var(--ac-color-border);
  border-radius: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--ac-color-text-primary);
  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-canvas-glow);
  border: 1px solid var(--ac-color-border);
  border-radius: 12px;
  color: var(--ac-color-text-primary);
  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-text-tertiary);
  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-canvas-glow, #f6f3ef);
  border: 1px solid var(--ac-color-border);
  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-text-secondary);
}
.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-text-tertiary);
  font-weight: 700;
}
.settle__net-val {
  font-family: var(--ac-font-display, 'Inter', sans-serif);
  font-size: 24px;
  font-weight: var(--ac-weight-semibold, 600);
  letter-spacing: -0.01em;
  color: var(--ac-color-text-primary);
  line-height: 1.1;
}
.settle__net-sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--ac-color-text-tertiary);
  letter-spacing: 0.02em;
}
.settle__net-paid {
  color: rgb(28, 110, 70);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.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-text-tertiary);
  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-text-primary);
  font-weight: var(--ac-weight-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));
  }
}

.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-text-tertiary);
  font-weight: 700;
}
.settle__cell-input {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--ac-color-border);
  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-text-primary);
  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-text-tertiary);
  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-text-primary);
}
.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-text-tertiary);
  font-weight: 700;
}
.settle__gross-val {
  font-family: var(--ac-font-display, 'Inter', sans-serif);
  color: var(--ac-color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.settle__gross-row--total .settle__gross-lbl {
  color: var(--ac-color-text-primary);
}
.settle__gross-row--total .settle__gross-val {
  color: var(--ac-color-text-primary);
  font-weight: var(--ac-weight-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-border-subtle, rgba(0,0,0,0.06));
}
.settle__exp-cat-sel,
.settle__exp-notes-in {
  padding: 8px 10px;
  border: 1px solid var(--ac-color-border);
  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-border);
  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-border);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--ac-color-text-tertiary);
  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-text-secondary); }
.settle__exp-notes { font-size: 13px; color: var(--ac-color-text-secondary); }
.settle__exp-amt   { font-family: var(--ac-font-display, 'Inter', sans-serif); font-variant-numeric: tabular-nums; text-align: right; color: var(--ac-color-text-primary); font-weight: var(--ac-weight-semibold, 600); }
.settle__empty {
  font-size: 13px;
  color: var(--ac-color-text-tertiary);
  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-text-primary);
}
.settle__toggle--ro {
  cursor: default;
  font-size: 14px;
  color: var(--ac-color-text-secondary);
}
.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-weight-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-text-tertiary);
  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-surface-raised);
  border-radius: var(--ac-radius-2xl);
  border: 1px solid var(--ac-color-border);
  box-shadow: var(--ac-shadow-card);
  position: relative;
  display: flex;
  flex-direction: column;
}
.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-text-sm);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-body);
  font-weight: var(--ac-weight-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-text-tertiary);
  font-weight: var(--ac-weight-bold);
}
.vc-teaser__eyebrow-tag {
  color: var(--ac-color-text-tertiary);
  font-weight: var(--ac-weight-bold);
}
.vc-teaser__title {
  margin: var(--ac-space-2) 0 0;
  font-family: var(--ac-font-display);
  font-size: var(--ac-text-3xl);
  font-weight: var(--ac-weight-black);
  letter-spacing: var(--ac-tracking-tight);
  line-height: var(--ac-leading-tight);
  color: var(--ac-color-text-primary);
}
.vc-teaser__sub {
  margin: var(--ac-space-2) 0 0;
  max-width: 380px;
  font-size: var(--ac-text-md);
  line-height: var(--ac-leading-normal);
  color: var(--ac-color-text-secondary);
}
/* 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-text-xs);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-tertiary);
  font-weight: var(--ac-weight-bold);
}
.vc-teaser__release-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: var(--ac-color-surface-inverse);
  color: #ffffff;
  border-radius: var(--ac-radius-pill);
  font-family: var(--ac-font-mono);
  font-size: var(--ac-text-xs);
  line-height: 1.4;
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  font-weight: var(--ac-weight-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-border-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-canvas-glow);
  border-color: var(--ac-color-border);
}
.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-text-2xl);
  font-weight: var(--ac-weight-black);
  color: var(--ac-color-text-primary);
  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-text-2xs);
  letter-spacing: var(--ac-tracking-mega);
  color: var(--ac-color-text-tertiary);
  font-weight: var(--ac-weight-bold);
  margin-top: 3px;
}
.vc-teaser__row-initials {
  width: 36px;
  height: 36px;
  border-radius: var(--ac-radius-sm);
  background: var(--ac-color-canvas-glow);
  border: 1px solid var(--ac-color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ac-font-mono);
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-weight-bold);
  letter-spacing: var(--ac-tracking-wide);
  color: var(--ac-color-text-secondary);
  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-text-md);
  font-weight: var(--ac-weight-semibold);
  color: var(--ac-color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vc-teaser__row-meta {
  font-size: var(--ac-text-base);
  color: var(--ac-color-text-secondary);
  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-text-2xl);
  font-weight: var(--ac-weight-black);
  color: var(--ac-color-text-primary);
  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-text-2xs);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-tertiary);
  font-weight: var(--ac-weight-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-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-space-4);
  font-size: var(--ac-text-base);
  color: var(--ac-color-text-tertiary);
}
.vc-teaser__foot-cta {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-text-sm);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  font-weight: var(--ac-weight-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-7) var(--ac-space-5);
  background: var(--ac-color-surface-raised);
  border-radius: var(--ac-radius-2xl);
  border: 1px solid var(--ac-color-border);
  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-text-sm);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-tertiary);
  font-weight: var(--ac-weight-bold);
}
.top-cities__title {
  margin: 0;
  font-family: var(--ac-font-display);
  font-size: var(--ac-text-5xl);
  font-weight: var(--ac-weight-black);
  letter-spacing: var(--ac-tracking-tight);
  line-height: var(--ac-leading-tight);
  color: var(--ac-color-text-primary);
}
.top-cities__sub {
  margin: var(--ac-space-3) 0 0;
  max-width: 640px;
  font-size: var(--ac-text-md);
  line-height: var(--ac-leading-normal);
  color: var(--ac-color-text-secondary);
}
/* 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-text-xs);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-tertiary);
  font-weight: var(--ac-weight-bold);
}
.top-cities__stat-num {
  font-family: var(--ac-font-display);
  font-size: var(--ac-text-4xl);
  font-weight: var(--ac-weight-black);
  letter-spacing: var(--ac-tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--ac-color-text-primary);
  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-text-xs);
  letter-spacing: var(--ac-tracking-wider);
  font-weight: var(--ac-weight-bold);
  white-space: nowrap;
  border: 1px solid var(--ac-color-border);
}
.top-cities__chip--live {
  color: var(--ac-color-text-body);
  background: var(--ac-color-canvas-glow);
}
.top-cities__chip--syncing {
  color: var(--ac-color-text-tertiary);
  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-border);
  border-bottom: 1px solid var(--ac-color-border);
}
/* 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-text-md);
}
.top-cities__th {
  padding: var(--ac-space-4) var(--ac-space-4);
  text-align: left;
  background: var(--ac-color-canvas-glow);
  border-bottom: 1px solid var(--ac-color-border);
  font-family: var(--ac-font-mono);
  font-size: var(--ac-text-xs);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-tertiary);
  font-weight: var(--ac-weight-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-text-primary); }
.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-text-primary);
}
.top-cities__th--sortable.is-sorted-asc::after {
  border-bottom: 5px solid var(--ac-color-text-primary);
}
.top-cities__row {
  transition: background var(--ac-duration-fast) var(--ac-ease-standard);
}
.top-cities__row:hover {
  background: var(--ac-color-canvas-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-border-subtle);
  color: var(--ac-color-text-primary);
  font-variant-numeric: tabular-nums;
}
.top-cities__td--city {
  font-weight: var(--ac-weight-semibold);
  font-family: var(--ac-font-body);
}
.top-cities__td--num { text-align: right; }
.top-cities__td--total { font-weight: var(--ac-weight-semibold); }
.top-cities__td--muted { color: var(--ac-color-text-tertiary); }
.top-cities__td--last {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-text-sm);
  letter-spacing: var(--ac-tracking-wide);
  color: var(--ac-color-text-secondary);
}
.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-text-2xs);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  font-weight: var(--ac-weight-bold);
}
.top-cities__action--book {
  background: var(--ac-color-accent-muted);
  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-canvas-glow);
  color: var(--ac-color-text-secondary);
  border: 1px solid var(--ac-color-border);
}

.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-text-base);
  color: var(--ac-color-text-tertiary);
}
.top-cities__foot-text { font-style: italic; }
.top-cities__foot-cta {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-text-sm);
  letter-spacing: var(--ac-tracking-wider);
  text-transform: uppercase;
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-text-primary);
  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-border);
  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-text-secondary);
  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-text-primary);
  color: var(--ac-color-text-primary);
  background: var(--ac-color-canvas-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-7) var(--ac-space-5);
  background: var(--ac-color-surface-raised);
  border-radius: var(--ac-radius-2xl);
  border: 1px solid var(--ac-color-border);
  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-text-sm);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-tertiary);
  font-weight: var(--ac-weight-bold);
}
.label-recent-release__title {
  margin: 0;
  font-family: var(--ac-font-display);
  font-size: var(--ac-text-5xl);
  font-weight: var(--ac-weight-black);
  letter-spacing: var(--ac-tracking-tight);
  line-height: var(--ac-leading-tight);
  color: var(--ac-color-text-primary);
  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-text-md);
  line-height: var(--ac-leading-normal);
  color: var(--ac-color-text-secondary);
}
/* 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: 6px;
  align-self: flex-start;
  padding: 10px 14px;
  background: var(--ac-color-surface);
  border: 1px solid var(--ac-color-border);
  border-radius: var(--ac-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: transform 100ms ease, background 100ms ease, border-color 100ms ease;
  min-width: 240px;
  max-width: 280px;
}
.label-recent-release__upcoming:hover {
  background: var(--ac-color-surface-raised);
  border-color: var(--ac-color-accent);
  transform: translateY(-1px);
}
.label-recent-release__upcoming-eyebrow {
  font-family: var(--ac-font-mono);
  font-size: 10px;
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-accent);
}
.label-recent-release__upcoming-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.label-recent-release__upcoming-art {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  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-border);
}
.label-recent-release__upcoming-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.label-recent-release__upcoming-title {
  font-size: 13px;
  font-weight: var(--ac-weight-semibold);
  color: var(--ac-color-text-primary);
  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: 10px;
  letter-spacing: 0.04em;
  color: var(--ac-color-text-tertiary);
}

/* 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-border);
}
/* 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-text-sm);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-accent);
}
.label-recent-release__sep {
  color: var(--ac-color-text-tertiary);
}
.label-recent-release__date,
.label-recent-release__relative {
  font-size: var(--ac-text-md);
  color: var(--ac-color-text-secondary);
}
.label-recent-release__relative {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-text-sm);
  letter-spacing: 0.04em;
  color: var(--ac-color-text-tertiary);
}

/* 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-weight-bold);
  color: var(--ac-color-text-primary);
  background: var(--ac-color-surface);
  border: 1px solid var(--ac-color-border);
  text-decoration: none;
  transition: transform 100ms ease, background 100ms ease;
}
.label-recent-release__link:hover {
  background: var(--ac-color-surface-raised);
  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-border);
  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-text-tertiary);
  font-weight: var(--ac-weight-bold);
}
.label-recent-release__stat-num {
  font-family: var(--ac-font-display);
  font-size: var(--ac-text-2xl);
  font-weight: var(--ac-weight-black);
  font-variant-numeric: tabular-nums;
  color: var(--ac-color-text-primary);
  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-border);
  border-radius: var(--ac-radius-lg);
  color: var(--ac-color-text-secondary);
  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-border);
  font-family: var(--ac-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ac-color-text-secondary);
}
.label-recent-release__ss-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.label-recent-release__ss-label {
  color: var(--ac-color-text-tertiary);
}
.label-recent-release__ss-value {
  font-family: var(--ac-font-display);
  font-weight: var(--ac-weight-black);
  font-variant-numeric: tabular-nums;
  color: var(--ac-color-text-primary);
  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-border);
  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-text-primary);
  font-weight: var(--ac-weight-bold);
}
.label-recent-release__playlists-sub {
  margin: 0;
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-tertiary);
}
.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-surface-raised);
  border: 1px solid var(--ac-color-border);
  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-text-tertiary);
  font-weight: var(--ac-weight-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-weight-semibold);
  color: var(--ac-color-text-primary);
  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-weight-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-weight-black);
  font-variant-numeric: tabular-nums;
  color: var(--ac-color-text-primary);
}

@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-7) var(--ac-space-5);
  background: var(--ac-color-surface-raised);
  border-radius: var(--ac-radius-2xl);
  border: 1px solid var(--ac-color-border);
  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-text-sm);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-tertiary);
  font-weight: var(--ac-weight-bold);
}
.trajectory__title {
  margin: 0;
  font-family: var(--ac-font-display);
  font-size: var(--ac-text-5xl);
  font-weight: var(--ac-weight-black);
  letter-spacing: var(--ac-tracking-tight);
  line-height: var(--ac-leading-tight);
  color: var(--ac-color-text-primary);
}
.trajectory__sub {
  margin: var(--ac-space-3) 0 0;
  max-width: 640px;
  font-size: var(--ac-text-md);
  line-height: var(--ac-leading-normal);
  color: var(--ac-color-text-secondary);
}
.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-text-tertiary);
  font-weight: var(--ac-weight-bold);
}
.trajectory__hero-stat-num {
  font-family: var(--ac-font-display);
  font-size: var(--ac-text-3xl);
  font-weight: var(--ac-weight-black);
  font-variant-numeric: tabular-nums;
  color: var(--ac-color-text-primary);
  line-height: 1;
}
.trajectory__hero-stat-delta {
  font-family: var(--ac-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ac-color-text-tertiary);
}
.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-weight-bold);
}
.trajectory__chart-projection {
  font-family: var(--ac-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #8effb4;
  font-weight: var(--ac-weight-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-text-tertiary);
  font-weight: var(--ac-weight-bold);
}
.trajectory__year {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--ac-color-border);
}
.trajectory__year:first-of-type {
  border-top: none;
}
.trajectory__year-label {
  font-family: var(--ac-font-display);
  font-size: var(--ac-text-2xl);
  font-weight: var(--ac-weight-black);
  color: var(--ac-color-text-primary);
  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-text-tertiary);
  font-weight: var(--ac-weight-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-weight-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-text-md);
  line-height: var(--ac-leading-normal);
  color: var(--ac-color-text-secondary);
}
.trajectory__event-text strong {
  color: var(--ac-color-text-primary);
  font-weight: var(--ac-weight-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-border);
  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-text-tertiary);
  font-weight: var(--ac-weight-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-text-tertiary);
  font-weight: var(--ac-weight-bold);
  padding-right: 8px;
  border-right: 1px solid var(--ac-color-border);
  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-weight-bold);
}
.trajectory__forward-what {
  font-size: var(--ac-text-md);
  line-height: var(--ac-leading-normal);
  color: var(--ac-color-text-secondary);
}
.trajectory__forward-what strong {
  color: var(--ac-color-text-primary);
  font-weight: var(--ac-weight-semibold);
}
.trajectory__forward-foot {
  margin: 12px 0 0;
  font-size: var(--ac-text-sm);
  color: var(--ac-color-text-tertiary);
  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-7) var(--ac-space-5);
  background: var(--ac-color-surface-raised);
  border-radius: var(--ac-radius-2xl);
  border: 1px solid var(--ac-color-border);
  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-text-sm);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  color: var(--ac-color-text-tertiary);
  font-weight: var(--ac-weight-bold);
}
.ac-marketing__title {
  margin: 0;
  font-family: var(--ac-font-display);
  font-size: var(--ac-text-5xl);
  font-weight: var(--ac-weight-black);
  letter-spacing: var(--ac-tracking-tight);
  line-height: var(--ac-leading-tight);
  color: var(--ac-color-text-primary);
}
.ac-marketing__sub {
  margin: var(--ac-space-3) 0 0;
  max-width: 640px;
  font-size: var(--ac-text-md);
  line-height: var(--ac-leading-normal);
  color: var(--ac-color-text-secondary);
}
.ac-marketing__head-link {
  font-family: var(--ac-font-mono);
  font-size: var(--ac-text-xs);
  letter-spacing: var(--ac-tracking-widest);
  text-transform: uppercase;
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-text-tertiary);
  text-decoration: none;
  border: 1px solid var(--ac-color-border);
  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-text-primary);
  border-color: var(--ac-color-text-secondary);
  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-text-sm);
  color: var(--ac-color-text-tertiary);
  font-style: italic;
}
/* ---- Individual card ---- */
.ac-marketing-card {
  background: var(--ac-color-surface-base);
  border: 1px solid var(--ac-color-border);
  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-border);
}
.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-text-tertiary);
  font-weight: var(--ac-weight-bold);
}
.ac-marketing-card__title {
  margin: 0;
  font-family: var(--ac-font-display);
  font-size: 18px;
  font-weight: var(--ac-weight-black);
  letter-spacing: var(--ac-tracking-tight);
  line-height: 1.2;
  color: var(--ac-color-text-primary);
}
.ac-marketing-card__sub {
  margin: 6px 0 0;
  font-size: var(--ac-text-sm);
  line-height: 1.4;
  color: var(--ac-color-text-secondary);
}
.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-weight-black);
  letter-spacing: var(--ac-tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--ac-color-text-primary);
  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-text-tertiary);
  font-weight: var(--ac-weight-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-border);
  cursor: pointer;
  transition: background .12s ease;
}
.ac-marketing-card__row:last-child { border-bottom: 0; }
.ac-marketing-card__row:hover {
  background: var(--ac-color-surface-raised);
}
/* 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-weight-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-surface-raised);
  border: 1px solid var(--ac-color-border);
  display: grid;
  place-items: center;
  font-family: var(--ac-font-mono);
  font-size: 11px;
  font-weight: var(--ac-weight-bold);
  letter-spacing: 0.05em;
  color: var(--ac-color-text-secondary);
  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-surface-raised);
  border: 1px solid var(--ac-color-border);
  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-weight-black);
  color: var(--ac-color-text-primary);
  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-text-tertiary);
  font-weight: var(--ac-weight-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-text-md);
  font-weight: var(--ac-weight-bold);
  color: var(--ac-color-text-primary);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-marketing-card__row-meta {
  font-size: var(--ac-text-xs);
  color: var(--ac-color-text-tertiary);
  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-weight-bold);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--ac-color-border);
  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-text-secondary);
  background: var(--ac-color-surface-raised);
}
.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-text-secondary);
  background: var(--ac-color-surface-raised);
}
/* 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-border);
}
.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-weight-bold);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--ac-color-text-primary);
  background: var(--ac-color-text-primary);
  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-text-secondary);
  border-color: var(--ac-color-border);
}
.ac-marketing-card__cta--ghost:hover {
  color: var(--ac-color-text-primary);
  border-color: var(--ac-color-text-secondary);
}

/* 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-canvas);
  --canvas-2:      var(--ac-color-canvas-glow);
  --paper:         var(--ac-color-surface-raised);
  --paper-2:       var(--ac-color-surface-overlay);
  --warm:          var(--ac-color-surface-warm);
  --warm-2:        var(--ac-color-surface-warm-deep);

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

  /* Text — 5-step ink scale */
  --ink:           var(--ac-color-text-primary);
  --ink-2:         var(--ac-color-text-body);
  --ink-3:         var(--ac-color-text-secondary);
  --ink-4:         var(--ac-color-text-tertiary);
  --ink-5:         var(--ac-color-text-muted);

  /* Accent — mockup crimson maps to AC brand red */
  --crimson:       var(--ac-color-accent);
  --crimson-deep:  var(--ac-color-accent-hover);
  --crimson-soft:  var(--ac-color-accent-muted);
  --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(200,32,59,0.18); animation: pulse 2s infinite; }
  @keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(200,32,59,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); }

  #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
     ═══════════════════════════════════════════════ */
  #releases .rls-list { display: flex; flex-direction: column; gap: 10px; }
  #releases .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. */
  #releases .rls-row.is-active { box-shadow: 0 12px 32px -20px rgba(20,15,10,0.28); }
  #releases .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;
  }
  #releases .rls-row__head:hover { background: var(--warm); }
  #releases .rls-row.is-open .rls-row__head { border-bottom: 1px solid var(--line-2); }
  #releases .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);
  }
  #releases .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);
  */
  }
  #releases .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; }
  #releases .rls-row__art.art-1 { background: linear-gradient(135deg, #f5b48a, #c8503a, #6a1d2a); }
  #releases .rls-row__art.art-2 { background: linear-gradient(135deg, #b91c1c, #1a0908); }
  #releases .rls-row__art.art-3 { background: linear-gradient(135deg, #2a3a8c, #0e1430); }
  #releases .rls-row__art.art-4 { background: linear-gradient(135deg, #2a9d8f, #19425a); }
  #releases .rls-row__art.art-5 { background: linear-gradient(135deg, #d97706, #82310c); }
  #releases .rls-row__art.art-6 { background: linear-gradient(135deg, #7c3aed, #2563eb, #0e1430); }
  #releases .rls-row__art.art-7 { background: linear-gradient(135deg, #f4a261, #c8503a); }

  #releases .rls-row__title { min-width: 0; }
  #releases .rls-row__name { font-size: 16px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 10px; }
  #releases .rls-row__meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); margin-top: 3px; letter-spacing: 0.04em; }
  #releases .rls-row__mini-stats { display: flex; gap: 24px; align-items: center; padding-right: 8px; }
  #releases .rls-row__mini { text-align: right; }
  #releases .rls-row__mini .v { font-family: var(--font-display); font-size: 17px; letter-spacing: -0.01em; line-height: 1; color: var(--ink); }
  #releases .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; }
  #releases .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); }
  #releases .rls-row.is-open .rls-row__chevron { transform: rotate(180deg); background: var(--ink); color: #fff; }

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

  /* Top strip — URL + 3 inline mini stats on one row, much more compact */
  #releases .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; }
  #releases .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; }
  #releases .rls-toprow__stat { display: flex; flex-direction: column; align-items: flex-end; padding-left: 16px; border-left: 1px solid var(--line-2); }
  #releases .rls-toprow__stat .v { font-family: var(--font-display); font-size: 16px; letter-spacing: -0.01em; line-height: 1; color: var(--ink); }
  #releases .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; }
  #releases .rls-toprow__stat .l .up { color: var(--green); }
  #releases .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; }
  #releases .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. */
  #releases .rls-body-grid { display: grid; grid-template-columns: 1fr 320px; gap: 16px; margin-top: 12px; }
  #releases .rls-body-grid.single { grid-template-columns: 1fr; }

  /* DSP click bars — 2-column compact grid */
  #releases .rls-dsps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; align-content: start; }
  #releases .rls-dsps.full { grid-template-columns: 1fr 1fr 1fr; }
  #releases .rls-dsp { display: grid; grid-template-columns: 24px minmax(0, 1fr) 56px 38px; align-items: center; gap: 10px; padding: 6px 4px; }
  #releases .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; }
  #releases .rls-dsp__icon.spot { background: #1db954; }
  #releases .rls-dsp__icon.apl { background: #fa233b; }
  #releases .rls-dsp__icon.amz { background: #232f3e; }
  #releases .rls-dsp__icon.ytm { background: #ff0000; }
  #releases .rls-dsp__icon.tdl { background: #000; }
  #releases .rls-dsp__icon.bnd { background: #629aa9; }
  #releases .rls-dsp__name { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #releases .rls-dsp__bar-wrap { grid-column: 2 / 3; height: 4px; background: rgba(40,20,15,0.06); border-radius: 2px; overflow: hidden; position: relative; }
  #releases .rls-dsp__bar { height: 100%; border-radius: 2px; background: var(--ink); width: var(--p, 0%); }
  #releases .rls-dsp__bar.spot { background: #1db954; }
  #releases .rls-dsp__bar.apl { background: #fa233b; }
  #releases .rls-dsp__bar.amz { background: #232f3e; }
  #releases .rls-dsp__bar.ytm { background: #ff0000; }
  #releases .rls-dsp__bar.tdl { background: #000; }
  #releases .rls-dsp__bar.bnd { background: #629aa9; }
  /* Stacked: top row = icon + name + count + pct, bottom row = bar (spans cols 2-4) */
  #releases .rls-dsp { row-gap: 4px; column-gap: 10px; grid-template-rows: auto auto; }
  #releases .rls-dsp__icon { grid-row: 1 / 3; }
  #releases .rls-dsp__bar-wrap { grid-column: 2 / 5; grid-row: 2 / 3; }
  #releases .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; }
  #releases .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. */
  #releases .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. */
  #releases .rls-dsp__icon.rls-dsp__icon--svg {
    background: transparent;
    padding: 0;
    min-width: 0;
    min-height: 0;
  }
  #releases .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 */
  #releases .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; }
  #releases .rls-actions .spacer { flex: 1; }
  #releases .rls-actions .btn-pill { padding: 7px 13px; font-size: 10px; }
  #releases .rls-actions .btn-pill--boost { background: var(--meta-blue); color: #fff; border-color: var(--meta-blue); }
  #releases .rls-actions .btn-pill--boost:hover { background: #1063c8; border-color: #1063c8; color: #fff; }
  #releases .rls-actions .btn-pill--danger { color: var(--crimson); border-color: var(--crimson-soft); }
  #releases .rls-actions .btn-pill--danger:hover { background: var(--crimson-soft); border-color: var(--crimson); }

  /* Rollout checklist — customizable, with assignees */
  #releases .rls-checklist { background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; }
  #releases .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); }
  #releases .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); }
  #releases .rls-checklist__count { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--ink); letter-spacing: 0.06em; }
  #releases .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; }
  #releases .rls-checklist__customize:hover { color: var(--ink); }
  #releases .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. */
  #releases .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);
  }
  #releases .rls-check:last-child { border-bottom: 0; }
  #releases .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; }
  #releases .rls-check.done .box { background: var(--green); border-color: var(--green); }
  #releases .rls-check.done .box::after { content: "✓"; font-size: 11px; color: #fff; font-weight: 700; }
  #releases .rls-check.done .task { color: var(--ink-4); text-decoration: line-through; text-decoration-color: var(--ink-5); }
  #releases .rls-check .task { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #releases .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. */
  #releases .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)));
  }
  #releases .rls-check__assignee .av img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  #releases .rls-check__assignee .av-initials {
    position: relative;
    z-index: 0;
  }
  #releases .rls-check__assignee .av img + .av-initials {
    display: none;
  }
  #releases .rls-check__assignee .av.a-jm { background: #c8503a; }
  #releases .rls-check__assignee .av.a-wh { background: #2a3a8c; }
  #releases .rls-check__assignee .av.a-bp { background: #2a9d8f; }
  #releases .rls-check__assignee .av.a-kr { background: #d97706; }
  #releases .rls-check__assignee.unassigned { color: var(--ink-4); border-style: dashed; padding: 2px 8px; }
  #releases .rls-check__assignee.unassigned .av { display: none; }
  #releases .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; }
  #releases .rls-check.warn .box { border-color: var(--amber); }
  #releases .rls-check.warn .rls-check__date { color: var(--amber); }
  #releases .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; }

  /* Checkbox is now a button — reset appearance so it matches the
     prior visual but gains a real cursor + a11y role. */
  #releases .rls-check .box {
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    background: transparent;
    border: 1.5px solid var(--line-strong);
    border-radius: 4px;
    cursor: pointer;
  }
  #releases .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. */
  #releases .rls-check .task,
  #releases .rls-check__date {
    cursor: pointer;
  }
  #releases .rls-check .task:hover,
  #releases .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. */
  #releases .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. */
  #releases .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;
  }
  #releases .rls-check:hover .rls-check__del { opacity: 1; }
  #releases .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. */
  #releases .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. */
  #releases .rls-checklist__customize:hover {
    color: var(--ink);
  }
  #releases .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; }

  #releases .ads-grid { display: grid; grid-template-columns: 1fr 360px; gap: 18px; }
  #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); }

  #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); }

  #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: 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line-2); }
  #releases .aud-row:last-child { border-bottom: 0; }
  #releases .aud-row .src { width: 22px; height: 22px; border-radius: 4px; background: var(--warm); display: flex; align-items: center; justify-content: center; font-size: 10px; }
  #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); }
  #releases .aud-summary { background: var(--warm); border-radius: 10px; padding: 10px 14px; margin-top: 10px; 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: var(--ink-4); }
  #releases .aud-summary .val { font-family: var(--font-display); font-size: 20px; letter-spacing: -0.01em; }
  #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. */
  #releases .rls-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
  #releases .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. */
  #releases .rls-workspace .rls-row__head { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 12px 12px 12px 18px; gap: 14px; }
  #releases .rls-workspace .rls-row__art { width: 48px; height: 48px; border-radius: 8px; }
  #releases .rls-workspace .rls-row__art-mark { font-size: 11px; }
  #releases .rls-workspace .rls-row__name { font-size: 14px; }
  #releases .rls-workspace .rls-row__meta { font-size: 10.5px; margin-top: 2px; }
  #releases .rls-workspace .rls-row__mini-stats { gap: 16px; }
  #releases .rls-workspace .rls-row__mini .v { font-size: 14px; }
  #releases .rls-workspace .rls-row__mini .l { font-size: 8.5px; margin-top: 3px; }
  #releases .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. */
  #releases .rls-workspace .rls-body-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
  #releases .rls-workspace .rls-dsps { grid-template-columns: 1fr 1fr; }
  #releases .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; }
  #releases .aud-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; 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; }
  #releases .aud-chip em { font-style: normal; color: var(--ink-4); font-size: 9.5px; }
  #releases .aud-chip--more { background: var(--warm); color: var(--ink-3); border-color: transparent; cursor: pointer; }
  #releases .aud-chip--more:hover { color: var(--ink); }

  /* ═══════════════════════════════════════════════
     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; }
  #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; }

  /* ─── 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. */
  #releases .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;
  }
  #releases .rls-prep__head {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--line-2);
  }
  #releases .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);
  }
  #releases .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);
  }
  #releases .rls-prep__sub {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.4;
  }
  #releases .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. */
  #releases .rls-prep .rls-checklist {
    background: transparent;
    border: 0;
    padding: 0;
  }
  #releases .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. */
  #releases .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;
  }
  #releases .rls-opp__head {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--line-2);
  }
  #releases .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);
  }
  #releases .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);
  }
  #releases .rls-opp__sub {
    margin: 0;
    font-size: 11.5px;
    color: var(--ink-3);
    line-height: 1.4;
  }
  #releases .rls-opp__body {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  #releases .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;
  }
  #releases .rls-opp__row:hover {
    background: var(--line-1, rgba(0,0,0,0.03));
    border-color: var(--line-2);
  }
  #releases .rls-opp__row-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
  }
  #releases .rls-opp__row-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  #releases .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;
  }
  #releases .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;
  }
  #releases .rls-opp__row-due.is-today {
    color: var(--accent, #c97c3a);
  }
  #releases .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. */
  #releases .rls-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }
  #releases .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. */
  #releases .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-surface-raised);
    border-radius: var(--ac-radius-2xl);
    border: 1px solid var(--ac-color-border);
    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-border-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-text-primary);
  }
  .ac-assign-picker__close {
    appearance: none;
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--ac-color-text-tertiary);
    cursor: pointer;
    padding: 0 4px;
  }
  .ac-assign-picker__close:hover { color: var(--ac-color-text-primary); }
  .ac-assign-picker__search {
    margin: 12px 18px 0;
    padding: 10px 12px;
    border: 1px solid var(--ac-color-border);
    border-radius: 8px;
    background: var(--ac-color-surface-overlay);
    font-family: inherit;
    font-size: 13px;
    color: var(--ac-color-text-primary);
  }
  .ac-assign-picker__search:focus {
    outline: none;
    border-color: var(--ac-color-text-primary);
  }
  .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-surface-overlay);
  }
  .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-text-primary);
    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-text-tertiary);
    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-text-tertiary);
  }
  .ac-assign-picker__foot {
    display: flex;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--ac-color-border-subtle);
    justify-content: space-between;
  }
  .ac-assign-picker__foot button {
    appearance: none;
    background: transparent;
    border: 1px solid var(--ac-color-border);
    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-text-secondary);
    cursor: pointer;
  }
  .ac-assign-picker__foot button:hover {
    color: var(--ac-color-text-primary);
    border-color: var(--ac-color-text-secondary);
  }
  .ac-assign-picker__unassign {
    color: var(--ac-color-accent) !important;
    border-color: var(--ac-color-accent-muted) !important;
  }
  .ac-assign-picker__unassign:hover {
    background: var(--ac-color-accent-muted);
  }

  /* ─── 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-surface-raised);
    border-radius: var(--ac-radius-2xl);
    border: 1px solid var(--ac-color-border);
    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-border-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-text-primary);
  }
  .ac-task-composer__close {
    appearance: none;
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--ac-color-text-tertiary);
    cursor: pointer;
    padding: 0 4px;
  }
  .ac-task-composer__close:hover { color: var(--ac-color-text-primary); }
  .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-text-tertiary);
  }
  .ac-task-composer__label em {
    font-style: normal;
    font-weight: 600;
    color: var(--ac-color-text-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-border);
    border-radius: 8px;
    background: var(--ac-color-surface-overlay);
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ac-color-text-primary);
  }
  .ac-task-composer__task:focus,
  .ac-task-composer__date:focus {
    outline: none;
    border-color: var(--ac-color-text-primary);
    background: var(--ac-color-surface-raised);
  }
  .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-border);
    color: var(--ac-color-text-secondary);
  }
  .ac-task-composer__cancel:hover {
    color: var(--ac-color-text-primary);
    border-color: var(--ac-color-text-secondary);
  }
  .ac-task-composer__ok {
    background: var(--ac-color-text-primary);
    border: 1px solid var(--ac-color-text-primary);
    color: var(--ac-color-surface-raised);
  }
  .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); }

  /* History */
  #releases .connect-history__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 420px;
    overflow-y: auto;
  }
  #releases .connect-history__row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px dashed var(--line-2);
  }
  #releases .connect-history__row:last-child { border-bottom: 0; }
  #releases .connect-history__date {
    width: 36px;
    text-align: center;
    padding: 4px 0;
    background: var(--warm);
    border-radius: 6px;
    flex-shrink: 0;
  }
  #releases .connect-history__date .d {
    font-family: var(--font-display);
    font-size: 13px;
    line-height: 1;
    color: var(--ink);
  }
  #releases .connect-history__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-history__t {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
  }
  #releases .connect-history__m {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-4);
    margin-top: 2px;
    letter-spacing: 0.03em;
  }
  #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-surface-raised);
    border-radius: var(--ac-radius-2xl);
    border: 1px solid var(--ac-color-border);
    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-border-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-text-primary);
  }
  .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-muted);
  }
  .ac-fan-detail__close {
    appearance: none;
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--ac-color-text-tertiary);
    cursor: pointer;
    padding: 0 4px;
  }
  .ac-fan-detail__close:hover { color: var(--ac-color-text-primary); }

  .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-text-tertiary);
  }
  .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-text-tertiary);
    letter-spacing: 0.04em;
  }
  .ac-fan-detail__section dd {
    margin: 0;
    font-size: 13.5px;
    color: var(--ac-color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ac-fan-detail__section dd a {
    color: var(--ac-color-text-primary);
    text-decoration: none;
    border-bottom: 1px dashed var(--ac-color-border);
  }
  .ac-fan-detail__section dd a:hover {
    border-bottom-color: var(--ac-color-text-primary);
  }

  /* 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-text-tertiary);
    letter-spacing: 0.04em;
    line-height: 1.5;
    padding: 12px 14px;
    background: var(--ac-color-surface-overlay);
    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-surface-overlay);
    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-text-tertiary);
  }
  .ac-fan-detail__merch-summary .v {
    font-family: var(--ac-font-display);
    font-size: 20px;
    letter-spacing: -0.01em;
    color: var(--ac-color-text-primary);
  }
  .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-surface-overlay);
    border: 1px solid var(--ac-color-border-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-text-tertiary);
    letter-spacing: 0.04em;
  }
  .ac-fan-detail__order-total {
    font-family: var(--ac-font-display);
    font-size: 14px;
    color: var(--ac-color-text-primary);
  }
  .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-text-primary);
    line-height: 1.4;
  }
  .ac-fan-detail__order-items .variant {
    color: var(--ac-color-text-tertiary);
    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-text-primary);
    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-border);
  }
  .ac-fan-detail__form dd input {
    appearance: none;
    width: 100%;
    background: var(--ac-color-surface-overlay);
    border: 1px solid var(--ac-color-border-subtle);
    border-radius: 6px;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 13px;
    color: var(--ac-color-text-primary);
  }
  .ac-fan-detail__form dd input:focus {
    outline: none;
    border-color: var(--ac-color-text-secondary);
    background: var(--ac-color-surface-raised);
  }
  /* 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-text-secondary);
    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-border-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-text-primary);
    color: var(--ac-color-surface-raised);
    border: 1px solid var(--ac-color-text-primary);
    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-surface-raised);
    border-radius: var(--ac-radius-2xl);
    border: 1px solid var(--ac-color-border);
    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-border-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-text-primary);
  }
  .ac-press-composer__close {
    appearance: none;
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--ac-color-text-tertiary);
    cursor: pointer;
    padding: 0 4px;
  }
  .ac-press-composer__close:hover { color: var(--ac-color-text-primary); }
  .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-text-tertiary);
  }
  .ac-press-composer__field em {
    font-style: normal;
    font-weight: 600;
    color: var(--ac-color-text-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-border);
    border-radius: 8px;
    background: var(--ac-color-surface-overlay);
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ac-color-text-primary);
  }
  .ac-press-composer__field input:focus,
  .ac-press-composer__field select:focus {
    outline: none;
    border-color: var(--ac-color-text-primary);
    background: var(--ac-color-surface-raised);
  }
  .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-border);
    color: var(--ac-color-text-secondary);
  }
  .ac-press-composer__del {
    background: transparent;
    border: 1px solid var(--ac-color-accent-muted);
    color: var(--ac-color-accent);
  }
  .ac-press-composer__del:hover {
    background: var(--ac-color-accent-muted);
  }
  .ac-press-composer__ok {
    background: var(--ac-color-text-primary);
    border: 1px solid var(--ac-color-text-primary);
    color: var(--ac-color-surface-raised);
  }
  .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;
    background: linear-gradient(135deg, #6a1d2a, #1a0810);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 11px;
    color: rgba(255,255,255,0.85);
    letter-spacing: -0.02em;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.45);
  }
  #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,
  #releases[data-ac-hydrating] .rls-prep,
  #releases[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,
  #releases .rls-prep,
  #releases .rls-list,
  #releases .connect-side,
  #releases .recos,
  #releases .ads-strip,
  #releases .ads-grid,
  #releases .press-list,
  #releases .pl-list {
    transition: opacity 180ms ease-out;
  }

/* ════════════════════════════════════════════════════════════════════
   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-border, 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-text-tertiary, #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-surface-overlay, 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-text-tertiary, #707070);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
#ads .ads-filter__pill.is-active {
  background: var(--ac-color-text-primary, #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-border-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-text-tertiary);
}
#ads .ads-account-picker__select {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--ac-color-border);
  background: var(--ac-color-surface);
}
#ads .ads-summary {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--ac-color-text-secondary);
}
#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-text-tertiary);
}
#ads .ads-summary__kpi-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--ac-color-text-primary);
  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-border-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-text-tertiary, #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-text-secondary, #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-border, 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-text-tertiary, #707070);
}
#ads .ads-kpi-card__value {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ac-color-text-primary, #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-text-tertiary, #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-text-tertiary, #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-text-tertiary, #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-text-secondary, #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-text-tertiary, #707070);
  background: var(--ac-color-surface-overlay, rgba(0,0,0,0.03));
  border: 1px dashed var(--ac-color-border-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-border-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-text-tertiary);
}
#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-border-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-text-primary);
  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-text-tertiary);
  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-text-primary);
}
#ads .ads-objective__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ac-color-text-secondary);
}
#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-text-primary);
}
#ads .ads-num__sub {
  display: block;
  font-size: 11px;
  color: var(--ac-color-text-tertiary);
  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-text-primary);
  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-text-primary, #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-text-tertiary);
  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-border, 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-text-tertiary);
  line-height: 1.4;
}
#ads .ads-aud-card {
  background: var(--ac-color-surface-overlay, 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-text-primary);
}
#ads .ads-aud-card__edit {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ac-color-text-secondary);
  text-decoration: none;
}
#ads .ads-aud-card__meta {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--ac-color-text-tertiary);
  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-border-subtle, rgba(0,0,0,0.08));
  font-size: 11px;
  font-weight: 600;
  color: var(--ac-color-text-primary);
}
#ads .ads-city-chip__count {
  color: var(--ac-color-text-tertiary);
  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-surface-overlay, 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-text-secondary);
}
#ads .ads-aud-source__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ac-color-text-primary);
}
#ads .ads-aud-source__meta {
  font-size: 10.5px;
  color: var(--ac-color-text-tertiary);
  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-text-primary);
}
#ads .ads-aud-source__val span {
  display: block;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--ac-color-text-tertiary);
  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-border, 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-text-secondary);
  cursor: pointer;
}
#ads .ads-aud-estimate {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 14px;
  background: var(--ac-color-surface-overlay, 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-text-tertiary);
}
#ads .ads-aud-estimate__val {
  font-size: 24px;
  font-weight: 800;
  color: var(--ac-color-text-primary);
  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;
}