/* Show listings (shared, loaded site-wide): the tour dates, city, venue, today-in-history,
   all-known-plays and guest tables. One line per show with real columns, in the site's
   newer look: Bebas group headers over a dark rule, an ISO Bebas date, no zebra striping,
   hairline rows with a red edge on hover, a "16 songs" setlist link and round media
   buttons. Still a <table> with <tbody> groups + tr[data-media-row], so the shared media
   filter (media-filter.js) works unchanged. Promoted 2026-10-21 from /tour-dates-test. */

.show-list { width: 100%; border-collapse: collapse; font-size: .9rem; }
.show-list tbody + tbody .show-list__group > th { padding-top: 1.6rem; }

/* Group header (tour leg / tour): Bebas name + a quiet meta line, dark rule under it. */
.show-list__group > th { padding: 0 .5rem .3rem; border-bottom: 2px solid #18151f; font-weight: 400; text-align: left; }
.show-list__group-name { font-family: "Bebas Neue", sans-serif; font-size: 1.35rem; letter-spacing: .03em; color: #18151f; }
.show-list__group-name a { color: inherit; text-decoration: none; }
.show-list__group-name a:hover { color: #c8102e; }
.show-list__group-meta { font-size: .78rem; color: #6c757d; margin-left: .6rem; }
.show-list__group-meta b { color: #c8102e; font-weight: 600; }

/* Rows: hairlines, no stripes, red edge on hover. */
.show-list__row > td { padding: .38rem .5rem; border-bottom: 1px solid #ececef; vertical-align: middle; }
.show-list__row > td:first-child { box-shadow: inset 3px 0 0 transparent; transition: box-shadow .12s; }
.show-list__row:hover > td { background: #f7f7f8; }
.show-list__row:hover > td:first-child { box-shadow: inset 3px 0 0 #c8102e; }
.show-list__row.media-hidden, .show-list tbody.media-hidden { display: none !important; }

.show-list__num { width: 2.6rem; color: #9a9aa3; font-size: .75rem; text-align: right; font-variant-numeric: tabular-nums; }
.show-list__date { width: 7rem; white-space: nowrap; }
.show-list__city { font-weight: 600; color: #18151f; width: 22%; }
.show-list__venue { color: #5c5c66; }
.show-list__venue a { color: inherit; text-decoration: none; }
.show-list__venue a:hover { color: #c8102e; text-decoration: underline; }
.show-list__detail { width: 17%; font-size: .8rem; color: #6c757d; }
.show-list__detail .status-badge { font-size: .68rem; }
.show-list__detail .status-detail-text { font-style: italic; }
/* All Known Plays: a song played more than once at one show. */
.show-list__times {
    display: inline-block; margin-right: .35rem; padding: .1rem .5rem; border-radius: 999px;
    background: #fbe7ea; color: #a10d25; font-size: .68rem; font-weight: 600; white-space: nowrap;
}
/* A wider middle column (the guest page's Songs). */
.show-list__wide { font-size: .82rem; color: #5c5c66; }
/* Beside a Songs column the venue needs its own share, or table layout starves it. */
.show-list__venue:has(+ .show-list__wide) { width: 24%; }
.show-list__wide a { color: #18151f; }
.show-list__setlist { width: 5.5rem; text-align: right; white-space: nowrap; font-size: .8rem; }
.show-list__media { width: 7.2rem; text-align: right; white-space: nowrap; }

/* "Night 2 of 3" for consecutive shows at one venue (tour dates). */
.show-list__night { font-size: .66rem; font-weight: 600; color: #4a4a55; background: #eeeef1;
    border-radius: 999px; padding: .08rem .45rem; margin-right: .25rem; white-space: nowrap; }

/* <x-date-stamp>: "2003-08-04" in Bebas, all one color. Bebas digits are equal-width, so the
   dates line up down the column. Red on hover; grey on shows that didn't happen. */
.date-stamp { font-family: "Bebas Neue", sans-serif; font-size: 1.3rem; line-height: 1; letter-spacing: .01em;
    color: #18151f; text-decoration: none; }
a.date-stamp:hover { color: #c8102e; }

/* <x-setlist-count> */
.setlist-count { color: #c8102e; font-weight: 600; text-decoration: none; }
a.setlist-count:hover { text-decoration: underline; }
.setlist-count--none { color: #c4c4cb; font-weight: 400; }

/* <x-show-media> */
.show-media { display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; margin-left: .15rem;
    border-radius: 50%; background: #f1f1f4; color: #4a4a55; font-size: .75rem; text-decoration: none; }
.show-media:hover { background: #c8102e; color: #fff; }

/* Shows that didn't happen (cancelled / postponed / unconfirmed): grey text; the pill says why. */
.show-list__row.is-off .show-list__city,
.show-list__row.is-off .show-list__venue,
.show-list__row.is-off .date-stamp { color: #8b8b94; }
.show-list__row.is-off .show-list__city { font-weight: 500; }

/* You were there: a green edge + tint. */
.show-list__row.is-attended > td { background: #f3faf6; }
.show-list__row.is-attended > td:first-child { box-shadow: inset 3px 0 0 #2e8b57; }

/* Phones: each row becomes a small grid — date | city / venue / detail | count / media. */
@media (max-width: 767.98px) {
    .show-list, .show-list tbody { display: block; }
    .show-list thead { display: none; }
    .show-list__group, .show-list__group > th { display: block; }
    .show-list__group-name { display: block; line-height: 1.1; }
    .show-list__group-meta { display: block; margin-left: 0; }
    .show-list__row { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr) auto;
        grid-template-areas: "date city setlist" "date venue media" "date detail detail";
        column-gap: .6rem; padding: .45rem .4rem; border-bottom: 1px solid #ececef; }
    .show-list__row > td { padding: 0; border: 0; width: auto; }
    .show-list__row > .show-list__num { display: none; }
    .show-list__row > .show-list__date { grid-area: date; }
    .show-list__row > .show-list__city { grid-area: city; }
    .show-list__row > .show-list__venue { grid-area: venue; font-size: .82rem; }
    .show-list__row > .show-list__detail,
    .show-list__row > .show-list__wide { grid-area: detail; width: auto; }
    .show-list__row > .show-list__detail:empty { display: none; }
    .show-list__row > .show-list__setlist { grid-area: setlist; }
    .show-list__row > .show-list__media { grid-area: media; }
    .show-list__row:hover > td, .show-list__row.is-attended > td { background: transparent; }
    .show-list__row > td:first-child, .show-list__row:hover > td:first-child { box-shadow: none; }
    .show-list__row.is-attended { background: #f3faf6; box-shadow: inset 3px 0 0 #2e8b57; }
    .date-stamp { font-size: 1.15rem; }
}

/* ---- Short attended-show lists (/account, /my-stats) --------------------------------
   They sit in narrow columns, so they use the stacked layout at every width:
   date | city over venue | "16 songs" (+ a remove button on /account). No group header. */
.show-list--compact, .show-list--compact tbody { display: block; }
.show-list--compact .show-list__row { display: grid; grid-template-columns: 6.3rem minmax(0, 1fr) auto;
    grid-template-areas: "date city setlist" "date venue action"; column-gap: .75rem; align-items: center;
    padding: .45rem .5rem; border-bottom: 1px solid #ececef; }
.show-list--compact .show-list__row > td { padding: 0; border: 0; width: auto; background: none !important; box-shadow: none !important; }
.show-list--compact .show-list__row:hover { background: #f7f7f8; box-shadow: inset 3px 0 0 #c8102e; }
.show-list--compact .show-list__date { grid-area: date; }
.show-list--compact .show-list__city { grid-area: city; }
.show-list--compact .show-list__venue { grid-area: venue; font-size: .82rem; }
.show-list--compact .show-list__setlist { grid-area: setlist; }
.show-list--compact .show-list__action { grid-area: action; text-align: right; }
.show-list__remove { border: 0; background: none; padding: 0; color: #b3b3ba; font-size: .8rem; line-height: 1; }
.show-list__remove:hover { color: #c8102e; }

/* ---- Tour page Setlist Variety: # | date | city | variety | rare-song chips ---------- */
.variety-list__score { width: 15rem; white-space: nowrap; }
.variety-list__rare { width: 40%; }

/* ---- Stats tables (.stat-list): song/album/guest rows with quiet column labels ---------
   Used by the tour page's Song Statistics, the /songs tables, Song Comebacks and the guest
   index. Cells: .stat-list__song (the bold name), .stat-list__sub (a muted extra like the
   album or instrument), .stat-list__n (a right-aligned count), .stat-list__when (a date
   with its place under it) and .stat-list__pct (a thin red bar + a label). */
.stat-list thead th { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: #8b8b94; padding: 0 .5rem .35rem; border-bottom: 2px solid #18151f; text-align: left; white-space: nowrap; }
.stat-list thead th.stat-list__n, .stat-list__n { text-align: right; }
.stat-list__song a { color: #18151f; font-weight: 600; text-decoration: none; }
.stat-list__song a:hover { color: #c8102e; text-decoration: underline; }
.stat-list__sub { color: #6c757d; font-size: .82rem; }
.stat-list__sub a { color: inherit; text-decoration: none; }
.stat-list__sub a:hover { color: #c8102e; text-decoration: underline; }
.stat-list__n { width: 4.6rem; font-variant-numeric: tabular-nums; color: #3c3c46; white-space: nowrap; }
.stat-list__n--strong { font-weight: 600; color: #18151f; }
.stat-list__when { width: 9.5rem; white-space: nowrap; }
.stat-list__when .date-stamp { font-size: 1.1rem; }
.stat-list__when-place { display: block; font-size: .74rem; color: #8b8b94; }
.stat-list__pct { width: 11rem; white-space: nowrap; }
.stat-list__pct--wide { width: 15rem; }
.stat-list__bar { display: inline-block; width: 6.5rem; height: 5px; border-radius: 3px; background: #f0e3e5;
    overflow: hidden; vertical-align: middle; }
.stat-list__bar > span { display: block; height: 100%; background: #c8102e; border-radius: 3px; }
.stat-list__pct-label { margin-left: .45rem; font-size: .78rem; color: #6c757d; font-variant-numeric: tabular-nums; }
.stat-list__pct-label b { color: #18151f; font-weight: 600; }

@media (max-width: 767.98px) {
    /* Variety: date | city / score, then the chips across. */
    .variety-list .show-list__row { grid-template-areas: "date city city" "date score score" "date rare rare"; }
    .variety-list .show-list__row > .variety-list__score { grid-area: score; width: auto; font-size: .82rem; }
    .variety-list .show-list__row > .variety-list__rare { grid-area: rare; width: auto; }
    .variety-list .show-list__row > .variety-list__rare:empty { display: none; }
    .variety-list .show-list__row > .variety-list__rare .tour-variety-chips { margin-top: .3rem; justify-content: flex-start; }
    .variety-list .tour-variety-bar { display: none; } /* the dots carry it on a phone */
    /* Stats: "12  Song name          65% ▬▬" then "Album · Concerts 25 · Open 3". */
    .stat-list .show-list__row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .75rem; row-gap: .1rem; }
    .stat-list .show-list__row > td { width: auto; }
    .stat-list .show-list__row > .show-list__num { display: block; width: 1.6rem; text-align: left; }
    .stat-list .show-list__row > .stat-list__song { flex: 1 1 0; min-width: 0; }
    .stat-list .show-list__row > .stat-list__pct { order: 1; }
    /* Always break after line 1. With a # column, the number sits in the row's left margin
       so every line (wrapped ones too) lines up under the name. */
    .stat-list .show-list__row::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
    .stat-list .show-list__row:has(> .show-list__num) { position: relative; padding-left: 2.2rem; }
    .stat-list .show-list__row > .show-list__num { position: absolute; left: .4rem; top: .55rem; }
    .stat-list .show-list__row > .stat-list__sub,
    .stat-list .show-list__row > .stat-list__n,
    .stat-list .show-list__row > .stat-list__when { order: 2; font-size: .78rem; }
    .stat-list .show-list__row > :is(.stat-list__sub, .stat-list__n, .stat-list__when):empty { display: none; }
    .stat-list .show-list__row > .stat-list__n[data-label]::before,
    .stat-list .show-list__row > .stat-list__when[data-label]::before { content: attr(data-label) " "; color: #8b8b94; font-weight: 400; }
    .stat-list__when .date-stamp { font-size: .95rem; }
    .stat-list__when-place { display: inline; margin-left: .25rem; }
    .stat-list__bar { width: 3.5rem; }
    .stat-list__pct-extra { display: none; }
}

/* ---- Track lists (album tracklist + Outtakes, single tracklist) ----------------------
   The same rows / group headers as the show listings (promoted 2026-10-21 from
   /album-test-tracks). Columns: # | Song | Credits (or Recorded At) | Length | Played live.
   Numbers sit on the right like the show listings' setlist / media columns. There are no
   column headers, so the play count says "plays". */
.track-list { margin-bottom: 2.5rem; } /* room before the band/personnel chips */
.track-list__title a { color: #18151f; font-weight: 600; text-decoration: none; }
.track-list__title a:hover { color: #c8102e; text-decoration: underline; }
.track-list__title .album-outtake-released { display: block; }
.track-list__credits { color: #6c757d; font-size: .82rem; width: 30%; }
.track-list__credits a { color: inherit; }
.track-list__label { font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: #9a9aa3; margin-right: .4rem; }
.track-list__len { width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; color: #5c5c66; white-space: nowrap; }
.track-list__plays { width: 10.5rem; white-space: nowrap; }
.track-list__plays-inner { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.track-list__count { color: #c8102e; font-weight: 600; font-size: .82rem; text-decoration: none;
    min-width: 4.2rem; text-align: right; font-variant-numeric: tabular-nums; }
a.track-list__count:hover { text-decoration: underline; }
.track-list__never { color: #b3b3ba; font-size: .78rem; }
.track-list__bar { width: 4.5rem; height: 5px; border-radius: 3px; background: #f0e3e5; overflow: hidden; flex: none; }
.track-list__bar-fill { display: block; height: 100%; background: #c8102e; border-radius: 3px; }

/* Phones: two lines per track — # | title / credits | plays / length. */
@media (max-width: 767.98px) {
    .track-list .show-list__row { grid-template-columns: 1.6rem minmax(0, 1fr) auto;
        grid-template-areas: "num title plays" "num credits len"; }
    .track-list .show-list__row > .show-list__num { display: block; grid-area: num; text-align: left; }
    .track-list .show-list__row > .track-list__title { grid-area: title; }
    .track-list .show-list__row > .track-list__credits { grid-area: credits; width: auto; }
    .track-list .show-list__row > .track-list__credits:empty { display: none; }
    .track-list .show-list__row > .track-list__len { grid-area: len; width: auto; }
    .track-list .show-list__row > .track-list__plays { grid-area: plays; width: auto; }
    .track-list__bar { width: 2.5rem; }
}