/* Blucifer band-detail modal — shared stylesheet (pair with band-modal.js).
 *
 * Extracted verbatim from templates/schedule.html so the modal renders
 * identically on /schedule and in the attendee portal. Self-contained on
 * purpose: custom properties, box-sizing reset, and fonts are (re)declared
 * scoped to .modal-backdrop so the modal doesn't depend on any page-level
 * styles. Values mirror the schedule page's :root — keep them in sync if the
 * palette ever changes. Bump the ?v= on both include tags when editing. */

.modal-backdrop, .band-detail-inline {
  /* Local copies of the schedule page's design tokens. */
  --bg: #0a0a0a;
  --fg: #F0EBE0;
  --accent: #04A9F6;
  --orange: #E86830;
  --gold: #D4A843;
  --card: #2A2520;
  --border: #3A352F;
  --muted: #a59f93;

  font-family: 'Space Mono', monospace;
  color: var(--fg);
  line-height: 1.5;
}
.modal-backdrop, .modal-backdrop *,
.band-detail-inline, .band-detail-inline * { margin: 0; padding: 0; box-sizing: border-box; }
/* display:flex below would defeat the UA [hidden] rule at equal specificity. */
.modal-backdrop[hidden] { display: none !important; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 10, 10, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: min(880px, 100%);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow: hidden; /* panel is the frame; .modal-scroll scrolls inside it */
}
/* The only scrolling region — keeps the close button pinned and prevents
   a tall panel from being clipped by the backdrop's flex centering. */
.modal-scroll {
  flex: 1 1 auto;
  min-height: 0; /* allow shrink below content height so it actually scrolls */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.6);
  color: var(--fg);
  border: none;
  border-radius: 6px;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { color: var(--orange); }
.modal-photo-wrap { width: 100%; background: #14110d; }
.modal-photo { width: 100%; max-height: 380px; object-fit: cover; object-position: top; display: block; }
.modal-body { padding: 1.25rem 1.5rem 1.75rem; }
.modal-title {
  font-family: 'Rye', serif;
  font-weight: normal;
  font-size: 1.6rem;
  color: var(--gold);
  margin-bottom: 0.2rem;
  line-height: 1.15;
}
.modal-context { font-size: 0.9rem; color: var(--muted); margin-bottom: 1.1rem; }
/* Waypoint route under the title (portal inline cards). */
.modal-route { font-size: 0.9rem; color: var(--muted); margin-bottom: 1.1rem; line-height: 1.6; }
.modal-route[hidden] { display: none; }
.modal-route-arrow { color: var(--gold); }
/* Inline cards: photo corners follow the host card's rounding. */
.band-detail-inline .modal-photo { max-height: 300px; }
/* Set-time rows the portal moves into the slot under the route line. Layout
   lives here (not Tailwind) because the scoped reset above outranks
   Tailwind's margin/padding utilities inside this subtree. */
.modal-sets-slot { margin-bottom: 1.1rem; }
.modal-sets-slot:empty { display: none; }
.modal-sets-slot .bc-set-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.55rem 0; border-top: 1px solid var(--border);
}
.modal-sets-slot .bc-set-row:first-child { border-top: none; padding-top: 0; }
.modal-sets-slot .bc-set-when { font-size: 1rem; color: var(--fg); }
.modal-sets-slot .bc-set-add {
  flex: 0 0 auto; min-width: 5.5rem; padding: 0.5rem 0.75rem;
  border: none; border-radius: 6px;
  font-family: 'Space Mono', monospace; font-size: 0.9rem; font-weight: 700;
  cursor: pointer;
}
.modal-sets-slot .bc-set-add:disabled { cursor: default; }
.modal-player { margin-bottom: 1.1rem; }
.modal-player:empty { margin-bottom: 0; }
.modal-player iframe { width: 100%; border: 0; display: block; border-radius: 8px; }
.modal-video { margin-bottom: 1.1rem; }
.modal-video:empty { margin-bottom: 0; }
.modal-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.modal-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal-loading { color: var(--muted); font-size: 0.9rem; }
.modal-listen {
  display: inline-block;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(4, 169, 246, 0.4);
  padding-bottom: 1px;
}
.modal-bio {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(240, 235, 224, 0.92);
  margin-bottom: 1rem;
  max-width: 65ch; /* keep prose readable even when the panel is wide */
  white-space: pre-line;
  overflow-wrap: break-word;
  word-break: break-word;
}
.modal-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.modal-links a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(4, 169, 246, 0.4);
  padding-bottom: 1px;
}
.modal-links a:hover, .modal-listen:hover { color: var(--orange); border-bottom-color: var(--orange); }
@media (max-width: 480px) {
  .modal-backdrop { padding: 0; }
  .modal-panel {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .modal-panel { animation: bluceModalIn 0.18s ease; }
  @keyframes bluceModalIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* "What do they call their sound?" flip card in the modal — the band's
   verbatim genre is hidden behind a flip. Faces are top-anchored (height
   auto, not inset:0) so JS can size the card to the taller face. */
.sound-flip { margin-bottom: 1.1rem; perspective: 900px; }
.sound-flip-btn {
  display: block; width: 100%; padding: 0; border: none; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.sound-flip-inner {
  position: relative; display: block; width: 100%; min-height: 3.25rem;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sound-flip-btn[aria-expanded="true"] .sound-flip-inner { transform: rotateY(180deg); }
.sound-flip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.sound-face {
  position: absolute; top: 0; left: 0; width: 100%;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--gold); border-radius: 8px;
  padding: 0.85rem 1rem; line-height: 1.4;
}
.sound-front {
  color: var(--gold); font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; font-size: 0.85rem;
  background: rgba(212, 168, 67, 0.06);
}
.sound-front-cue { margin-left: auto; font-size: 1.15rem; }
.sound-back {
  transform: rotateY(180deg);
  color: var(--fg); font-size: 0.98rem;
  background: rgba(212, 168, 67, 0.10);
}
.sound-flip-btn:hover .sound-face { border-color: var(--orange); }
@media (prefers-reduced-motion: reduce) {
  .sound-flip-inner { transition: none; }
}

/* "Sounds like…" related bands in the modal. */
.modal-related { margin-top: 1.25rem; }
.modal-related:empty { display: none; }
.modal-related-title {
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.5rem;
}
.modal-related-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.modal-related-list button {
  min-height: 44px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.modal-related-list button:hover { border-color: var(--accent); color: var(--orange); }

/* Co-sponsor badge inside the modal. Scoped under .modal-backdrop so these
   rules never fight the schedule page's card-level .sponsor-badge styles. */
.modal-backdrop .sponsor-badge, .band-detail-inline .sponsor-badge {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
}
.modal-backdrop .sponsor-badge-logo, .band-detail-inline .sponsor-badge-logo { width: auto; height: auto; flex: 0 0 auto; display: block; }
.modal-backdrop .sponsor-badge-text, .band-detail-inline .sponsor-badge-text {
  font-weight: 700;
  line-height: 1.3;
  color: var(--gold);
  min-width: 0;
}
/* Modal: linked, larger, sits directly above the description (no top rule). */
.modal-backdrop .sponsor-badge-link, .band-detail-inline .sponsor-badge-link {
  border-top: none;
  padding: 0;
  margin-bottom: 1.1rem;
}
.modal-backdrop .sponsor-badge-link .sponsor-badge-logo, .band-detail-inline .sponsor-badge-link .sponsor-badge-logo { max-height: 106px; max-width: 260px; }
.modal-backdrop .sponsor-badge-link .sponsor-badge-text, .band-detail-inline .sponsor-badge-link .sponsor-badge-text { font-size: 0.95rem; }
.modal-backdrop .sponsor-badge-link:hover .sponsor-badge-text, .band-detail-inline .sponsor-badge-link:hover .sponsor-badge-text { color: var(--orange); }

/* --- Blucifer's First Art Market: roster + drill-down back button ---
   These render INSIDE the modal, so they must live here rather than in
   schedule.html's inline <style>: the `.modal-backdrop *` reset above is
   specificity (0,1,0) and this sheet loads last, so equal-specificity rules
   declared inline would lose the tie and have their padding/margins zeroed.
   (The .art-market button itself sits on FM's venue card, outside the modal —
   its styles stay inline.) */
.modal-backdrop .art-roster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.modal-backdrop .art-roster-item {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 1rem;
  padding: 0.5rem 0.8rem;
  min-height: 44px; /* touch target — fat fingers, dark venue */
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  text-align: left;
}
.modal-backdrop button.art-roster-item {
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.modal-backdrop button.art-roster-item:hover,
.modal-backdrop button.art-roster-item:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}
/* Vendors with nothing to open yet (no bio, photo, or link) are still listed —
   they ARE at the market — but render flat and unclickable. */
.modal-backdrop .art-roster-static { color: var(--muted); }

.modal-backdrop .art-back-wrap { margin-bottom: 0.6rem; }
.modal-backdrop .art-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* was ~24px of bare text — too small to tap */
  padding: 0.4rem 0.1rem;
  font: inherit;
  font-size: 1rem;
  background: none;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(4, 169, 246, 0.4);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.modal-backdrop .art-back:hover,
.modal-backdrop .art-back:focus-visible {
  color: var(--orange);
  text-decoration-color: var(--orange);
}