/* A concert page's own two-column (program/cast + sidebar of cards)
   layout needs more room than .content-shell's ordinary 1080px — same
   reasoning dashboard.css gives for its own wider .dashboard-shell,
   applied here for the same kind of "main column + sidebar of cards"
   shape. */
.show-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.show-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.show-main,
.show-aside {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

@media (max-width: 960px) {
  .show-shell {
    padding: 1.25rem;
  }

  .show-layout {
    grid-template-columns: 1fr;
  }
}

/* Hero banner — only rendered when a show has a hero_image attached
   (see Show#hero_image); the header falls back to plain .content-header
   styling otherwise, so this is purely additive. */
.show-hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 220px;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  color: #fff;
}

.show-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15, 23, 42, 0.75) 0%, rgba(15, 23, 42, 0.15) 60%, transparent 100%);
}

.show-hero__content {
  position: relative;
  padding: 1.5rem;
}

.show-hero__content h1,
.show-hero__content p {
  margin: 0;
  color: #fff;
}

.show-hero__content .card-meta {
  color: rgba(255, 255, 255, 0.85);
}

/* A show's own header — a tighter margin-bottom than .content-header's
   own default 1.5rem on both the title/credit block and the actions row
   right after it, so the gap down to the Program section isn't the sum
   of two full header margins. Scoped to these two added classes
   (specificity .content-header.show-*) rather than .content-header
   itself, which other pages also use unchanged. */
.content-header.show-header-meta,
.content-header.show-actions-bar {
  margin-bottom: 0.5rem;
}

/* Breathing room above the date/time line — plain whitespace, no visible
   rule (a literal <hr> was tried here and then explicitly asked to come
   back out in favor of just this). */
.show-date-time {
  margin-top: 0.75rem;
}

/* A musical's Cast/Musicians/Understudies section headings read better
   centered than the page's usual left-aligned h3s (see
   shows/show.html.erb). */
.cast-heading--center {
  text-align: center;
}

/* "Cast" and its own "In Order of Appearance" sub-line, wrapped together
   in .cast-heading-group so they land as a single item of .show-main's
   own grid — that grid's `gap` applies uniformly between *grid* children
   regardless of their own margins, so keeping these two lines snug
   (rather than a full grid-gap apart) means zeroing the margin *between
   them*, inside their shared group, rather than relying on the grid. */
.cast-heading-group .cast-heading--center {
  margin-bottom: 0;
}

.cast-order-line {
  text-align: center;
  margin: 0;
}

/* The Photos card's own "Add Photos" link — some breathing room above
   it, separating it from whatever's right above (the photo grid, or the
   "View all photos" link), neither of which carries any bottom margin
   of its own to make that space instead. */
.photos-add-link {
  margin-top: 0.75rem;
}

/* Cast sections — a styled <details> per section (see
   shows/_cast_section.html.erb), count in the summary, CSS-only
   rotating chevron so no new JS controller is needed just for this. */
.cast-section {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.25rem 1rem;
  margin-bottom: 0.75rem;
}

.cast-section summary {
  cursor: pointer;
  padding: 0.75rem 0;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cast-section summary::-webkit-details-marker {
  display: none;
}

.cast-section summary::before {
  content: "▸";
  display: inline-block;
  color: var(--muted);
  transition: transform 0.15s ease;
}

.cast-section[open] summary::before {
  transform: rotate(90deg);
}

.cast-section__count {
  font-weight: 400;
  color: var(--muted);
}

/* Attending card's avatar stack — small, overlapping versions of
   .profile-avatar/.profile-avatar--placeholder (see
   shared/_profile_header.html.erb). */
.avatar-stack {
  display: flex;
  margin: 0.75rem 0;
}

.avatar-stack__item {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--card-bg);
  margin-left: -10px;
  background: var(--secondary);
  color: var(--secondary-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}

.avatar-stack__item:first-child {
  margin-left: 0;
}

/* Wraps each avatar (in both .avatar-stack and .attendee-row — see
   shows/show.html.erb/_show_attendee_row.html.erb) in a link to that
   person's own profile. display: contents drops the <a>'s own box
   entirely so the avatar inside lays out exactly as if the link weren't
   there — same size, same stacking, same negative-margin overlap — while
   the whole thing stays clickable. Because of that, .avatar-stack__item's
   own :first-child rule (above) never actually matches once every avatar
   is wrapped like this — the img/span is always its *link's* first (and
   only) child, regardless of position in the stack — so the first avatar
   is targeted here instead, through the *link's* own position. */
.avatar-stack__item-link {
  display: contents;
  cursor: pointer;
}

.avatar-stack > .avatar-stack__item-link:first-child .avatar-stack__item {
  margin-left: 0;
}

/* Show#relevant_attendees' own list (see shows/show.html.erb's
   "Attending" card, shows/_show_attendee_row.html.erb) — a plain
   vertical list, each row its own small avatar plus the linked name and
   attendance text, unlike .avatar-stack's overlapping row of faces. */
.attendee-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.attendee-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Venue card's embedded map. */
.mini-map {
  width: 100%;
  height: 160px;
  border: 0;
  border-radius: 10px;
  margin-top: 0.75rem;
}

/* Share panel */
.share-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  margin-top: 0.75rem;
}

.share-panel > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.share-panel > summary::-webkit-details-marker {
  display: none;
}

.share-panel__section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.share-panel__copy-row {
  display: flex;
  gap: 0.5rem;
}

.share-panel__copy-row input {
  flex: 1;
}

/* The Attending card's own attendance-removal menu (see
   shows/show.html.erb) — a small "⋮" trigger at the far right of its own
   row, opening a short dropdown of actions, rather than a standalone
   button sitting exposed on the page. */
.kebab-menu-row {
  display: flex;
  justify-content: flex-end;
}

/* margin-left: auto pushes this to the far right of whatever flex row
   it's sitting in — .kebab-menu-row's own standalone row (a lone child,
   where justify-content: flex-end already does the same job) or, more
   often, riding along at the end of the viewer's own .attendee-row (see
   shows/_show_attendee_row.html.erb's own `menu` slot) instead of
   sitting alone on its own line below it.

   display: inline-flex (rather than <details>'s own default block) plus
   the explicit closed-state height are both load-bearing, not
   decorative: measured in a real browser, a closed <details> both (a)
   reserves height as if its hidden, display:none panel (see
   .kebab-menu__panel below) were still there, and (b) — with just (a)
   fixed via an explicit height alone — still lays its visible <summary>
   out as if that full, larger box were there, painting the circle well
   below the now-shrunk box instead of at its top. Both are normal block
   flow getting confused by <details>' own native content-visibility
   bookkeeping for its closed, hidden content; switching to a flex
   container sidesteps both, since a flex child's position comes from
   flex alignment, not block flow. */
.kebab-menu {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kebab-menu:not([open]) {
  height: 1.6rem;
}

.kebab-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  color: var(--muted);
  /* The real "⋮" (U+22EE) text content is rendered invisible (font-size:
     0) and replaced by an identical ::before copy below -- every summary
     already carries its own real aria-label, so this costs nothing
     accessibility-wise. Needed because the glyph sits low within its own
     line box in every browser tested: transforming the *box itself*
     (this element) to compensate just drags the whole circle up along
     with it; transforming a ::before copy instead shifts only the
     glyph, leaving the circle's own position untouched. */
  font-size: 0;
}

.kebab-menu > summary::before {
  content: "⋮";
  font-size: 1.1rem;
  line-height: 1;
  transform: translateY(-0.1em);
}

.kebab-menu > summary::-webkit-details-marker {
  display: none;
}

.kebab-menu > summary:hover,
.kebab-menu[open] > summary {
  background: var(--secondary);
  color: var(--text);
}

/* Closed-<details> content is only supposed to disappear on its own,
   with no CSS needed -- but measured in a real browser, a closed
   .kebab-menu still comes out ~40px taller than a plain link with no
   menu at all, entirely from this panel: position: absolute takes it
   out of *visual* flow, yet it's still being sized as if in flow while
   [open] is absent, inflating .kebab-menu's own box (and, via
   align-items: center in .group-row/.kebab-menu-row, every row sitting
   next to one). Hiding it outright below removes any doubt. */
.kebab-menu:not([open]) > .kebab-menu__panel {
  display: none;
}

.kebab-menu__panel {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 10;
  min-width: 200px;
  margin-top: 0.25rem;
  padding: 0.4rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.kebab-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  background: none;
  border: none;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}

.kebab-menu__item:hover {
  background: var(--secondary);
}

/* The Cast section's own Original Broadway Cast / Replacements toggle
   (see performances/_cast_role_tabs.html.erb) — plain radio inputs plus
   CSS sibling selectors switch the visible panel, no JS controller
   needed for it, same stance as this app's own <details> disclosure
   patterns elsewhere. The inputs themselves are visually hidden but
   stay in the accessibility tree and keyboard-operable (their own
   <label for="..."> is what's actually clicked/focused) — display: none
   would pull them out of both, so this uses the same visually-hidden
   technique instead. */
.cast-tabs__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cast-tabs__nav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.cast-tabs__label {
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9rem;
}

.cast-tabs__input:focus-visible + .cast-tabs__nav .cast-tabs__label {
  outline: 2px solid var(--muted);
  outline-offset: 2px;
}

.cast-tabs__panel {
  display: none;
}

.cast-tabs__input--obc:checked ~ .cast-tabs__nav .cast-tabs__label--obc,
.cast-tabs__input--replacements:checked ~ .cast-tabs__nav .cast-tabs__label--replacements {
  background: var(--secondary);
  color: var(--text);
}

.cast-tabs__input--obc:checked ~ .cast-tabs__panel--obc,
.cast-tabs__input--replacements:checked ~ .cast-tabs__panel--replacements {
  display: block;
}