/* Tour page: one-table leg dividers (Tour Dates + Album breakdown) and the
   segmented view switcher that replaces the old Bootstrap tabs.
   Mirrors the album page's one-table disc grouping (.album-track-group) so the
   look is consistent across the site. */

/* Leg section row inside the single tour-dates / album-breakdown tables.
   A solid Bebas-Neue band that stays solid over striped/hover rows. */
.tour-leg-group > th {
    background: #e3e3e5;
    color: #18151f;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    letter-spacing: 0.04em;
    font-size: 1.15rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}
.tour-leg-group__meta {
    font-family: "Open Sans", sans-serif;
    font-size: 0.8rem;
    letter-spacing: normal;
    color: #6c757d;
    margin-left: 0.5rem;
}
.table-striped > tbody > tr.tour-leg-group:nth-of-type(odd) > th,
.table-hover > tbody > tr.tour-leg-group:hover > th {
    background: #e3e3e5;
    color: #18151f;
}

/* Song-statistics "% of shows" reliability bar: how dependably a song appeared
   in the tour's setlists (plays / concert count). Red fill on a faint track,
   matching the album page's red play-bar language. */
.tour-pct-cell {
    white-space: nowrap;
}
.tour-pct-bar {
    display: inline-block;
    width: 70%;
    max-width: 120px;
    height: 0.55rem;
    vertical-align: middle;
    background: #ececec;
    border-radius: 3px;
    overflow: hidden;
}
.tour-pct-bar__fill {
    display: block;
    height: 100%;
    background: #c8102e;
    border-radius: 3px;
}
.tour-pct-label {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.8rem;
    color: #6c757d;
    vertical-align: middle;
}

/* ===== Album breakdown view ===== */

/* Tour-wide aggregate: a vertical lollipop with a clickable album-cover x-axis
   (matching the setlist "Breakdown by Album" chart), showing how much the whole
   tour drew from each album/era. */
.tour-bd-chart {
    margin: 0 auto 1.5rem;
}
.tour-bd-chart__caption {
    margin-bottom: 0.6rem;
}
.tour-bd-chart__canvas {
    position: relative;
    width: 100%;
    height: 344px;
}

/* Heatmap grid: each cell tinted by play count (alpha set inline in the blade);
   no striping so the colors read cleanly. Hot cells flip text to white. */
.tour-bd-table.table {
    --bs-table-bg: #fff;
}
.tour-bd-cell {
    text-align: center;
}
.tour-bd-table .tour-bd-cell--hot {
    color: #fff;
    font-weight: 600;
}

/* Faint era band tints on the column headers, grouping the albums by decade. */
.tour-bd-table thead .tour-bd-th[data-era="1970s"] { background: #f6ece2; }
.tour-bd-table thead .tour-bd-th[data-era="1980s"] { background: #e7eef4; }
.tour-bd-table thead .tour-bd-th[data-era="1990s"] { background: #e7f1ea; }
.tour-bd-table thead .tour-bd-th[data-era="2000s+"] { background: #f1eaf2; }

/* Sticky date column (horizontal only) so the wide grid stays oriented as it
   scrolls right inside .table-responsive. No vertical sticky — the page scrolls
   normally. */
.tour-bd-table thead th:first-child,
.tour-bd-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
}

/* View panes toggled by tour.js; the switcher is now rounded hero pills
   (.song-hero-jump, in tour/show.blade.php) instead of a segmented control. */
[data-tour-pane][hidden] {
    display: none;
}

/* Hero view-switch pills: reuse the shared .song-hero-jump look; the active
   view reads as a filled pill against the dark hero. (tour.css loads after
   hero-full.css, so this wins on source order.) */
.shero--full .song-hero-jump a.active,
.shero--full .song-hero-jump a.active:hover {
    background: #fff;
    border-color: #fff;
    color: #18151f;
    font-weight: 600;
}

/* ===========================================================================
   Prev / next tour pager — named cards (tour name + year range) at page bottom.
   =========================================================================== */
.tour-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0.75rem;
}
.tour-pager__card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    text-decoration: none;
    color: #18151f;
    background: #fff;
    border: 1px solid rgba(24, 21, 31, 0.15);
    border-radius: 0.5rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.tour-pager__card:hover {
    border-color: #c8102e;
    box-shadow: 0 2px 8px rgba(200, 16, 46, 0.12);
    color: #18151f;
}
.tour-pager__card--next {
    flex-direction: row;
    justify-content: flex-end;
    text-align: right;
}
.tour-pager__card--empty {
    border: 1px dashed rgba(24, 21, 31, 0.1);
    background: transparent;
    box-shadow: none;
}
.tour-pager__chev {
    font-size: 1.4rem;
    color: #c8102e;
    flex: none;
}
.tour-pager__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.tour-pager__eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(24, 21, 31, 0.5);
}
.tour-pager__name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}
.tour-pager__years {
    font-size: 0.8rem;
    color: rgba(24, 21, 31, 0.6);
}

/* On narrow screens stack the two cards vertically. */
@media screen and (max-width: 640px) {
    .tour-pager {
        grid-template-columns: 1fr;
    }
    .tour-pager__card--empty {
        display: none;
    }
}

/* Hero byline: the signed-in user's attended-show count on this tour (green, matching
   the setlist page's "I was at this show" button, lightened for the dark hero). */
.tour-hero-attended {
    color: #6ee7b7;
    font-weight: 600;
    white-space: nowrap;
}
.tour-hero-attended .bi {
    font-size: .9em;
}

/* ---- Setlist Variety pane (per-show uniqueness within the tour) ---- */
.tour-variety-intro { margin-bottom: .35rem; }
.tour-variety-how { font-size: .9rem; color: #555; margin-bottom: 1.25rem; }
.tour-variety-how summary { cursor: pointer; color: #c8102e; }
.tour-variety-how ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.tour-variety-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.tour-variety-card {
    border: 1px solid #e5e5e5;
    border-top: 3px solid #c8102e;
    border-radius: 6px;
    padding: .85rem 1rem;
    background: #fff;
}
.tour-variety-card--std { border-top-color: #6c757d; }
.tour-variety-card h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; margin: 0 0 .5rem; }
.tour-variety-card ol { margin: 0; padding-left: 1.3rem; }
.tour-variety-card li { margin-bottom: .3rem; }
.tour-variety-muted { color: #6c757d; font-size: .85rem; white-space: nowrap; }
.tour-variety-sort { display: inline-flex; gap: .25rem; margin-bottom: .75rem; }
.tour-variety-sort button {
    border: 1px solid #ced4da;
    background: #fff;
    border-radius: 999px;
    padding: .2rem .8rem;
    font-size: .85rem;
}
.tour-variety-sort button.active { background: #c8102e; border-color: #c8102e; color: #fff; }
.tour-variety-dots { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: .35rem; }
.tour-variety-dots span { width: 9px; height: 9px; border-radius: 50%; background: #e3e3e3; }
.tour-variety-dots span.on { background: #c8102e; }
.tour-variety-tier { font-size: .85rem; }
.tour-variety-tier--top { color: #c8102e; font-weight: 600; }
.tour-variety-bar {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: #eee;
    margin-top: .3rem;
    max-width: 160px;
    overflow: hidden;
}
.tour-variety-bar > span { display: block; height: 100%; background: #c8102e; }
.tour-variety-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.tour-variety-chip {
    display: inline-block;
    font-size: .78rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: #fdecec;
    color: #8a1020;
    text-decoration: none;
    white-space: nowrap;
}
.tour-variety-chip:hover { background: #f8d3d3; color: #8a1020; }
.tour-variety-chip small { color: #b0505e; }