/* Shows archive: listing + detail.
   Follows the mockup's STRUCTURE (date-badge tiles, sticky filter bar, card
   rows with special badges, masonry photo grid) but uses this site's tokens --
   the mockup was drawn against a light palette with pill radii and soft
   shadows, whereas Late Show is dark, 3px-square and uses offset shadows. */

.shows-view { padding: 0 0 60px; }

/* ---------------------------------------------------------------- listing */
/* Title/blurb on the left, "coming up" sharing the SAME row on the right --
   the upcoming strip's own cards still lay out as a row of columns (not a
   stacked list) within that shared space. Collapses to a stacked column on
   narrow viewports, where there's no width left to share a row at all. */
.shows-head {
  max-width: 1400px; margin: 0 auto; padding: 32px 28px 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 28px;
  flex-wrap: wrap;
}
.shows-head-main { min-width: 0; flex: 1 1 320px; }
.shows-title {
  font-family: var(--title-font);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 52px);
  letter-spacing: -0.03em;
  margin: 0 0 6px;
}
.shows-sub { font-size: 15px; color: var(--muted); max-width: 560px; margin: 0 0 22px; }

/* "Coming up" -- same data/pattern as the landing hero's #heroSchedule.
   Shares shows-head's row with the title block (flex: 1 1 auto lets it take
   whatever width is left beside the title, so its own cards can still lay
   out 2-3 across instead of stacking into a narrow single column). */
.shows-upcoming {
  flex: 1 1 420px; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.shows-upcoming-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.shows-upcoming-title {
  font-family: var(--mono-font); font-size: 11px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}
/* auto-fit settles to however many columns the available width supports
   (2-3 here, sharing the row with the title; falls to 1 on phone) without a
   breakpoint per count -- same approach as .hero-sched-list. */
.shows-upcoming-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px;
}
.shows-upcoming-item {
  font-size: 0.78rem; color: var(--text); padding: 10px 12px;
  border-radius: var(--radius); background: var(--surface-2);
  border: var(--bw) solid var(--border);
  display: flex; flex-direction: column; gap: 3px;
}
.su-title { font-weight: 700; font-size: 0.86rem; }
.su-datetime { display: flex; align-items: baseline; gap: 6px; }
.su-when { font-weight: 800; color: var(--mint); }
.su-time { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.su-venue { color: var(--muted); font-size: 0.74rem; }

@media (max-width: 860px) {
  .shows-head { flex-direction: column; }
  .shows-upcoming { width: 100%; }
  /* Both .shows-head-main's 320px basis and .shows-upcoming's OWN 420px basis
     size WIDTH in the row layout above -- once .shows-head stacks into a
     column, each becomes a MINIMUM HEIGHT instead, leaving large dead gaps
     (title/blurb is only ~110px of real content; the upcoming list is
     whatever 1-3 stacked cards actually need) before the next section starts. */
  .shows-head-main, .shows-upcoming { flex-basis: auto; }
}

.shows-bar {
  /* Docks BELOW the sticky topbar, not at the viewport top -- top:0 put it
     in the same position as .topbar itself, so raising .topbar's z-index
     (for the filters-dropdown fix above) then covered this bar instead of
     the other way around. --topbar-h is the topbar's live measured height
     (chrome.js's trackTopbarHeight; the topbar isn't fixed-height, it wraps
     with viewport width), same pattern review.css's sticky toolbars use. */
  position: sticky; top: calc(var(--topbar-h, 64px) - 1px); z-index: 15;
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: var(--bw) solid var(--border);
}
.shows-bar-inner { max-width: 1400px; margin: 0 auto; padding: 14px 28px; }

.shows-search {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  padding: 4px 4px 4px 14px;
}
.shows-search:focus-within { border-color: var(--coral); }
.shows-search-ic { font-size: 15px; color: var(--muted); }
.shows-search input {
  flex: 1; border: none; outline: none; background: transparent;
  font: inherit; font-size: 15px; color: var(--text); padding: 7px 0;
}
/* the native search-cancel button clashes with our own Clear */
.shows-search input::-webkit-search-cancel-button { display: none; }
.shows-clear {
  border: none; background: transparent; color: var(--muted);
  font: inherit; font-size: 13px; padding: 8px 14px;
  border-radius: var(--radius); cursor: pointer;
}
.shows-clear:hover { background: var(--surface-2); color: var(--text); }

.shows-filters {
  display: flex; gap: 8px; margin-top: 10px;
  flex-wrap: wrap; align-items: center;
}
.shows-facets { display: contents; }
.shows-chip {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 6px 12px; border-radius: var(--radius);
  border: var(--bw) solid var(--border); background: var(--surface);
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
}
.shows-chip:hover { border-color: var(--muted); }
.shows-chip[aria-pressed="true"] {
  background: var(--coral); border-color: var(--coral); color: var(--ink);
  font-weight: 600;
}
.shows-spacer { flex: 1 1 auto; }
.shows-date-select {
  font: inherit; font-size: 13px; color: var(--text); background: var(--surface);
  border: var(--bw) solid var(--border); border-radius: var(--radius);
  padding: 6px 8px; cursor: pointer;
}
.shows-date-select:focus { outline: none; border-color: var(--coral); }
.shows-sort-label {
  font-family: var(--mono-font); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.shows-sort {
  padding: 5px 11px; border-radius: var(--radius);
  border: var(--bw) solid transparent; background: transparent;
  color: var(--text); font-family: var(--mono-font); font-size: 12px;
  cursor: pointer;
}
.shows-sort:hover { background: var(--surface-2); }
.shows-sort.is-active {
  background: var(--surface-2); border-color: var(--border); font-weight: 700;
}
.shows-count {
  margin-top: 9px; font-family: var(--mono-font); font-size: 12px;
  color: var(--muted);
}

.shows-body { max-width: 1400px; margin: 0 auto; padding: 20px 28px 0; }
.shows-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.show-tile {
  border: var(--bw) solid var(--border); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; background: var(--surface);
  text-align: left; padding: 0; color: inherit; font: inherit;
  display: flex; flex-direction: column;
  transition: box-shadow .15s;
}
/* --shadow-md's hard-offset shape (5px 5px 0), but with --coral swapped in for
   --ink -- a card-hover-only override, not a change to --shadow-md itself
   (other --shadow-md consumers keep the --ink version). No border-color
   change, no image zoom -- just the shadow. */
.show-tile:hover { box-shadow: 3px 3px 0 var(--coral); border: 1px solid var(--coral); }
.show-tile:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.show-cover {
  height: 148px; position: relative; background: var(--surface-2);
  overflow: hidden;
}
.show-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Strengthened per feedback: the mono-on-translucent-black badge nearly
   vanished against a busy photo (worse once posters start filling this slot --
   TJPW poster art often has bright corners). Solid accent fill + a hard shadow
   (the site's own --shadow-sm token, not a soft blur) so it reads as a fixed UI
   chip sitting ON TOP of the image, not a caption blending into it. */
.show-datebadge {
  position: absolute; left: 10px; top: 10px;
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 10px; border-radius: var(--radius);
  background: var(--coral);
  box-shadow: var(--shadow-sm);
  color: var(--ink); font-family: var(--mono-font); line-height: 1.1;
}
.show-datebadge .m {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
/* Trimmed from 19px to make room for the year line below without growing the
   badge -- old shows read fine by month/day alone, but the archive spans
   several Augusts/Julys etc. now and a bare "AUG 8" is ambiguous which year. */
.show-datebadge .d { font-size: 16px; font-weight: 800; }
.show-datebadge .y { font-size: 9px; font-weight: 600; opacity: 0.85; }

/* Title-match indicator: a small belt icon in the opposite corner from the
   date badge, so a tile signals "a title changed hands or was defended
   tonight" at a glance without reading the tags. */
.show-titlebadge {
  position: absolute; right: 10px; top: 10px;
  display: flex; align-items: center; gap: 4px;
  padding: 5px 8px; border-radius: var(--radius);
  background: var(--butter); color: var(--ink);
  box-shadow: var(--shadow-sm);
  font-family: var(--mono-font); font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
/* currentColor -> var(--ink), same as the badge's own text -- reads cleanly
   against the yellow background without a separate color to keep in sync. */
.show-titlebadge-icon { width: 12px; height: 12px; flex: none; color: currentColor; }

/* Bottom-right (opposite the date badge's top-left, and clear of the
   title-match badge's top-right) so an upcoming title match never needs both
   chips fighting for the same corner. */
.show-upcomingbadge {
  position: absolute; right: 10px; bottom: 10px;
  padding: 5px 8px; border-radius: var(--radius);
  background: var(--mint); color: var(--ink);
  box-shadow: var(--shadow-sm);
  font-family: var(--mono-font); font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.show-tile-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.show-tile-name {
  font-family: var(--title-font); font-weight: 700; font-size: 17px;
  letter-spacing: -0.01em; line-height: 1.25;
}
.show-tile-where { font-size: 13px; color: var(--muted); }
.show-tile-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.show-tile-tag {
  padding: 3px 8px; border-radius: var(--radius);
  border: var(--bw) solid var(--border); font-size: 11px; color: var(--muted);
}
.show-tile-stats {
  display: flex; gap: 13px; margin-top: auto; padding-top: 4px;
  font-family: var(--mono-font); font-size: 11px; color: var(--muted);
}
.show-unverified { color: var(--butter); }

.shows-empty { text-align: center; padding: 56px 0; }
.shows-empty-title {
  font-family: var(--title-font); font-weight: 800; font-size: 19px;
  margin-bottom: 6px;
}
.shows-empty-sub { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.shows-more { display: flex; justify-content: center; padding: 26px 0 0; }

/* ---------------------------------------------------------------- detail */
.showd-head { max-width: 1100px; margin: 0 auto; padding: 16px 28px 0; }
.showd-back {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: none; background: transparent; padding: 0;
  font-family: var(--mono-font); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  /* .showd-hero bleeds its background 18px past its own box via padding:18px
     + margin:-18px (so the cover-image backdrop paints wider than the card's
     in-flow position) -- that upward bleed eats the first 18px of ANY
     margin-bottom set here, so the back link kept looking glued to the hero
     below it (most visible whenever a show had a cover image) even with a
     nonzero gap in the CSS. 36px = 18px to cancel the bleed + a real ~18px
     visible gap on top of it -- verified against the RENDERED gap, not just
     the CSS value, since the two differ here by design. */
  margin-bottom: 36px;
}
.showd-back:hover { color: var(--coral); }

.showd-hero {
  display: flex; gap: 22px; align-items: flex-start;
  padding: 18px; margin: -18px; border-radius: var(--radius);
  background-size: cover; background-position: center;
}
/* When a poster is linked (as the show's cover), it fills the header as a
   backdrop behind a dark scrim, so the date block/title stay legible over
   whatever art the poster has -- posters vary wildly in contrast/colour. */
.showd-hero.has-cover {
  position: relative;
}
.showd-hero.has-cover::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius);
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--bg) 88%, transparent) 0%,
    color-mix(in srgb, var(--bg) 55%, transparent) 100%);
  z-index: 0;
}
.showd-hero.has-cover > * { position: relative; z-index: 1; }
.showd-poster {
  width: 100px; height: 132px; flex: none;
  object-fit: cover; border-radius: var(--radius);
  border: var(--bw) solid var(--border); box-shadow: var(--shadow-sm);
}
.showd-poster.is-clickable { cursor: pointer; }
.showd-datebox {
  width: 132px; height: 132px; flex: none;
  border: var(--bw) solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--mono-font); line-height: 1.1;
}
.showd-month {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.showd-day { font-size: 40px; font-weight: 800; }
.showd-year { font-size: 11px; color: var(--muted); }
.showd-meta { flex: 1; min-width: 0; }
.showd-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.showd-name {
  font-family: var(--title-font); font-weight: 800;
  font-size: clamp(26px, 4vw, 40px); line-height: 1.05;
  letter-spacing: -0.03em; margin: 0 0 8px;
}
/* On its own line, not wrapping inline inside the h1 -- otherwise it reads as
   stray/duplicated text rather than a clearly-separate original-title line.
   No italic -- CJK has no real italic form, so browsers either fake-slant it
   (looks bad) or ignore it outright; the muted color + smaller size already
   distinguish it from the main title without that. */
.showd-name-ja {
  display: block; font-size: 15px; color: var(--muted); font-weight: 400;
  margin-top: 2px;
}
.showd-where { font-size: 15px; color: var(--muted); margin-bottom: 12px; }
.showd-stats {
  display: flex; gap: 22px; font-family: var(--mono-font); font-size: 12px;
  color: var(--muted); flex-wrap: wrap;
}

.showd-body { max-width: 1100px; margin: 0 auto; padding: 0 28px; }
.showd-sec-label {
  font-family: var(--mono-font); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); margin: 26px 0 12px;
}
.showd-card { display: grid; gap: 9px; }
.showd-match {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 15px; border: var(--bw) solid var(--border);
  border-radius: var(--radius); background: var(--surface);
}
.showd-match-order {
  font-family: var(--mono-font); font-size: 13px; color: var(--muted);
  flex: none; width: 18px;
}
.showd-match-main { flex: 1; min-width: 0; }
.showd-match-top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 3px;
  flex-wrap: wrap;
}
.showd-match-type {
  font-family: var(--mono-font); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.showd-badge {
  padding: 2px 8px; border-radius: var(--radius);
  font-family: var(--mono-font); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700; color: var(--ink);
}
.showd-badge.is-title       { background: var(--butter); }
.showd-badge.is-retirement  { background: var(--lavender); color: var(--text); }
.showd-badge.is-debut       { background: var(--mint); }
.showd-badge.is-dream       { background: var(--cheek); }
.showd-badge.is-return      { background: var(--coral); color: var(--text); }
.showd-badge.is-graduation  { background: var(--cheek); }
.showd-vs { font-size: 15px; line-height: 1.45; }
.showd-vs a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }
.showd-vs a:hover { color: var(--coral); border-bottom-color: var(--coral); }
.showd-vs .vs-sep { color: var(--muted); font-family: var(--mono-font); font-size: 12px; padding: 0 4px; }
.showd-vs .team-name { color: var(--muted); font-size: 13px; }
.showd-champ { color: var(--butter); font-size: 11px; font-family: var(--mono-font); }
/* an unresolved source name: shown, but plainly, and flagged for the admin */
.showd-vs .unlinked { color: var(--muted); border-bottom: 1px dotted var(--border); }
/* the winning side (matches.winner_side, derived from the individual
   winner mark(s) below) reads bolder than the losing side, at a glance --
   the winner-mark checkmark on its own is too subtle to scan a whole card
   quickly for who won each match. */
.showd-side-won { font-weight: 600; }
.showd-side-won a { border-bottom-color: var(--text); }
/* the SPECIFIC wrestler tjpw.jp marked as having taken the pin/submission --
   distinct from showd-side-won, which marks the whole side; see sideHtml's
   comment for why both matter, especially in a multi-person match. */
.showd-winner-mark { color: var(--mint); font-size: 12px; }
.showd-match-shots { display: flex; gap: 5px; flex: none; }
.showd-shot {
  width: 58px; height: 58px; border-radius: var(--radius); cursor: pointer;
  object-fit: cover; display: block; border: var(--bw) solid var(--border);
  background: var(--surface-2);
}
.showd-shot:hover { border-color: var(--text); }
.showd-match-count {
  font-family: var(--mono-font); font-size: 11px; color: var(--muted);
  flex: none; min-width: 34px; text-align: right;
}

/* Justified rows, not CSS `columns:` masonry -- see gallery.css's mosaic-view
   comment for why: column layout packs items DOWN each column and silently
   REBALANCES every column whenever the child count changes, which is exactly
   what Load More does on every click. The paginated grid appears to
   "duplicate"/reorder photos already seen, because most of them actually do
   move to a different on-screen position -- reading order was never DOM
   order to begin with. Flex-wrap rows preserve true left-to-right/top-to-
   bottom DOM order under append, same fix the main gallery's mosaic view
   uses (layoutJustifiedRows in shows.js is a simplified, unzoomed port of
   gallery.js's layoutMosaic -- no orientation clustering or dual row caps,
   since this grid doesn't have that view's wide-viewport tuning needs). */
.showd-photos { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; }
.showd-photos img {
  height: var(--row-h, 210px); width: calc(var(--row-h, 210px) * var(--ar, 1));
  flex: 0 0 auto; display: block; object-fit: cover; object-position: center;
  border-radius: var(--radius); cursor: pointer;
  border: var(--bw) solid var(--border); background: var(--surface-2);
}
.showd-photos img:hover { border-color: var(--text); transform: translateY(-2px); }
.showd-empty { text-align: center; padding: 36px 0; color: var(--muted); }

/* Match mini-gallery: scoped overrides so its images can be bigger without
   resizing the main show grid or the match-cards grid, which share
   .showd-photos above. An ID selector naturally outranks the shared class
   rule (and its own responsive breakpoints below), so no !important needed. */
#matchGalleryModal .modal-card { max-width: 960px; max-height: 92vh; }
#matchGalleryGrid { --showd-row-h: 260px; }
@media (max-width: 760px) {
  #matchGalleryGrid { --showd-row-h: 170px; }
}

/* ---------------------------------------------------------------- admin */
.showd-edit {
  margin-top: 16px; padding: 16px;
  border: var(--bw) solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.showd-edit-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.showd-edit-grid label,
.showd-verified {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--mono-font); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.showd-edit-grid input {
  font: inherit; font-size: 14px; text-transform: none; letter-spacing: normal;
  color: var(--text); background: var(--bg);
  border: var(--bw) solid var(--border); border-radius: var(--radius);
  padding: 7px 9px;
}
.showd-edit-grid input:focus { outline: none; border-color: var(--coral); }
.showd-edit-wide { grid-column: 1 / -1; }
.showd-focus-row { display: flex; align-items: center; gap: 14px; }
.showd-focus-row input[type="range"] { flex: 1; min-width: 0; }
/* Live crop preview: same aspect the real .showd-hero uses (roughly), just
   scaled down. background-position gets updated on every slider input, not
   only after Save -- see the oninput wiring in shows.js. */
.showd-focus-preview {
  flex: none; width: 180px; height: 70px; border-radius: var(--radius);
  border: var(--bw) solid var(--border); background-color: var(--surface-2);
  background-size: cover; background-position: center 50%;
}
.showd-edit-actions {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  flex-wrap: wrap;
}
.showd-verified { flex-direction: row; align-items: center; gap: 6px; }

.showd-cover-pick { margin-top: 16px; }
.showd-coverpick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px; margin-top: 8px; max-height: 260px; overflow-y: auto;
}
.showd-coverpick-item {
  position: relative; padding: 0; border: var(--bw) solid var(--border);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  background: var(--bg); aspect-ratio: 1; line-height: 0;
}
.showd-coverpick-item img { width: 100%; height: 100%; object-fit: cover; }
.showd-coverpick-item:hover { border-color: var(--coral); }
.showd-coverpick-item.is-current { border-color: var(--coral); border-width: 2px; }
.showd-coverpick-item.is-poster { border-style: dashed; }
.showd-coverpick-tag {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: var(--mono-font); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; text-align: center; color: #fff;
  background: color-mix(in srgb, var(--bg) 35%, transparent); padding: 2px 0;
}

.shows-unresolved {
  margin-bottom: 20px; padding: 16px;
  border: var(--bw) solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.shows-unresolved-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono-font); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.shows-unres-filter {
  font: inherit; font-size: 13px; color: var(--text); background: var(--bg);
  border: var(--bw) solid var(--border); border-radius: var(--radius);
  padding: 6px 10px; width: 100%; box-sizing: border-box;
}
.shows-unres-filter:focus { outline: none; border-color: var(--coral); }
.shows-unresolved-list {
  display: grid; gap: 6px; margin-top: 12px;
  max-height: 420px; overflow-y: auto;
}
.shows-unres-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 10px; border: var(--bw) solid var(--border);
  border-radius: var(--radius); background: var(--bg);
}
.shows-unres-name { font-weight: 600; flex: none; min-width: 160px; }
.shows-unres-meta {
  font-family: var(--mono-font); font-size: 11px; color: var(--muted);
  flex: 1 1 240px; min-width: 0;
}
.shows-unres-src { color: var(--coral); text-decoration: none; }
.shows-unres-src:hover { text-decoration: underline; }
.shows-unres-row input {
  font: inherit; font-size: 13px; color: var(--text); background: var(--surface);
  border: var(--bw) solid var(--border); border-radius: var(--radius);
  padding: 5px 8px; min-width: 150px; flex: 1 1 150px;
}
.shows-unres-row input:focus { outline: none; border-color: var(--coral); }
.shows-unres-mergeinto { font-size: 12px; }

.shows-unresolved-ironman {
  margin-top: 14px; padding-top: 12px; border-top: var(--bw) dashed var(--border);
}

.showd-admin-actions { display: flex; gap: 8px; margin-top: 4px; }

/* ------------------------------------------------------------ merge picker */
.showd-merge-list { display: grid; gap: 8px; margin: 12px 0; }
.showd-merge-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: var(--bw) solid var(--border);
  border-radius: var(--radius); background: var(--bg); cursor: pointer;
}
.showd-merge-row:hover { border-color: var(--muted); }
.showd-merge-row.is-selected {
  border-color: var(--coral);
  background: color-mix(in srgb, var(--coral) 12%, var(--bg));
}
.showd-merge-row input[type="checkbox"] { flex: none; }
.showd-merge-name { font-weight: 600; flex: 1; min-width: 0; }
.showd-merge-meta {
  font-family: var(--mono-font); font-size: 11px; color: var(--muted); flex: none;
}

/* ------------------------------------------------------------ title lineage */
/* A chain of same-title matches (a belt changing hands mid-card) is drawn as
   one visually connected block instead of separate cards that look like an
   accidental repeat: a left rail ties them together and each gets a small
   "N of M tonight" marker instead of just the generic title badge. */
.showd-lineage {
  display: grid; gap: 0;
  border: var(--bw) solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--surface);
}
.showd-lineage .showd-match {
  border: none; border-radius: 0; position: relative;
  padding-left: 22px;
}
.showd-lineage .showd-match:not(:last-child) { border-bottom: var(--bw) dashed var(--border); }
.showd-lineage .showd-match::before {
  content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px;
  background: var(--butter);
}
.showd-lineage-note {
  font-family: var(--mono-font); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-top: 2px;
}

/* -------------------------------------------------------------- match cards */
#showdCardsSection { margin-top: 4px; }

/* --------------------------------------------------------- mini-gallery cue */
/* Was a muted, borderless-looking "+N" pill that read as a stray count next
   to the thumbnails rather than a button -- easy to miss entirely, and on
   mobile (where the thumbnail strip is hidden) it was the ONLY cue that a
   match's photos were reachable at all. Icon-only now (a stacked-photos
   glyph -- title/aria-label carry the name for a11y since there's no visible
   text), coral-filled so it unmistakably reads as a tappable action rather
   than a label sitting next to the thumbnails. */
.showd-match-more {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: var(--bw) solid color-mix(in srgb, var(--coral) 55%, var(--border));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--coral) 12%, transparent);
  color: var(--coral); cursor: pointer;
}
.showd-match-more:hover { border-color: var(--coral); background: var(--coral); color: var(--ink); }

/* Row height, not column count, is the responsive lever now (see the
   flex-wrap rule above) -- --showd-row-h mirrors #matchGalleryGrid's own
   breakpoint var, read at layout time by shows.js's justifyPhotoGrid. */
@media (max-width: 1100px) { .showd-photos { --showd-row-h: 170px; } }
@media (max-width: 760px) {
  .shows-head, .shows-bar-inner, .shows-body,
  .showd-head, .showd-body { padding-left: 16px; padding-right: 16px; }
  .shows-grid { grid-template-columns: 1fr; }
  .showd-photos { --showd-row-h: 130px; }
  /* The date box + poster used to sit in the SAME row as the title text,
     which squeezed both down to a postage-stamp 64x84 poster and forced the
     title to wrap awkwardly in whatever width was left. Wrap the row instead:
     date + poster share a first line at a real size, the title/meta drop to
     their own full-width line below. */
  .showd-hero { gap: 14px; flex-wrap: wrap; }
  .showd-datebox { width: 96px; height: 96px; }
  .showd-poster { width: 96px; height: 127px; }
  .showd-day { font-size: 30px; }
  .showd-meta { flex: 1 1 100%; order: 3; }
  /* The per-match THUMBNAILS are the first thing to go on a phone -- no room
     for a 58px strip next to the matchup text. But the "+N" more-photos
     button lived in this same container, so hiding the whole thing silently
     took away the only way to reach a match's mini-gallery on mobile (the
     button never had a second home). Hide just the thumbnails and keep the
     container (and its button) in flow. */
  .showd-match-shots { gap: 0; }
  .showd-shot { display: none; }
  .shows-spacer { display: none; }
  .shows-filters { gap: 6px; }
  .shows-date-select { flex: 1 1 auto; }
  .showd-merge-row { flex-wrap: wrap; }
  /* Sort was wrapping mid-group (label, then buttons on their own orphaned
     line) once the date-filter selects were added -- forcing a break BEFORE
     the whole group keeps it together as one visual unit instead. */
  .shows-sort-label { flex-basis: 100%; margin-top: 4px; }
}