/* Shared listing/detail palette: keep show pages on the same blue-grey surfaces. */
:root {
    --recording-surface: #14212c;
    --recording-heading: #1a2733;
    --recording-outline: #38516a;
    --recording-separator: #2b3d4d;
    --recording-muted: #bdc8d1;
    --recording-frame: #101820;
    --recording-chip: #17222d;
    --recording-link: #b2cff4;
}
/* The Clansmen public band directory and audio pages, adapted from Front V61. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.directory-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 23px 26px 26px; background: #101b29; border: 1px solid #29415b; border-radius: 7px; margin: 16px 0; }
.directory-head h1 { font-size: 28px; margin: 5px 0 8px; color: #e7eff7; }.directory-head p { margin: 0; color: #a9b8c8; font-size: 13px; }.directory-head .eyebrow { color: #9bb8d2; }
.band-total { text-align: center; flex: none; min-width: 110px; border-left: 1px solid #30465b; padding-left: 20px; }.band-total strong { display: block; font-size: 27px; }.band-total span { display: block; font-size: 11px; color: #9eb0c2; }
.directory-panel { background: #111d2b; border: 1px solid #29415b; border-radius: 7px; padding: 22px 24px 28px; }.directory-tools { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; color: #a9b8c8; }
.searchbox { display: flex; gap: 10px; align-items: center; background: #101d2a; padding: 10px 14px; border: 1px solid #35506a; border-radius: 4px; width: min(100%,400px); }.searchbox input { background: transparent; border: 0; color: #e6edf4; width: 100%; min-width: 0; }.searchbox .icon { width: 18px; height: 18px; }
.alphabet { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 26px; }.alphabet button { background: #101e2d; border: 1px solid #345674; border-radius: 3px; padding: 6px 10px; color: #b7c5d2; }.alphabet [aria-pressed="true"], .alphabet button:hover { background: #1b558e; color: white; }
.alphabet button:disabled { background: #101923; border-color: #293b49; color: #697986; cursor: default; opacity: .55; }
.band-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 26px 18px; align-items: start; }.band-card { min-width: 0; text-align: center; }.band-logo-area { display: flex; align-items: center; justify-content: center; height: 112px; padding: 8px 10px; color: #dce9f5; }.band-logo-area img { display: block; max-width: 100%; width: auto; height: auto; max-height: 96px; object-fit: contain; transition: transform .16s; }.band-logo-area:hover img { transform: scale(1.045); }.band-logo-area strong { overflow-wrap: anywhere; font-size: 19px; }
.band-actions { display: grid; grid-template-columns: max-content max-content; justify-content: center; justify-items: center; column-gap: 16px; row-gap: 6px; padding: 7px 4px 4px; }.band-actions a { display: inline-flex; align-items: center; gap: 7px; color: #9fb7cb; font-size: 15px; font-weight: 600; line-height: 1.4; white-space: nowrap; text-decoration: none; transition: color .15s; }.band-actions .band-tours { grid-column: 1 / -1; justify-self: center; }.band-actions svg { width: 20px; height: 20px; flex: none; color: #9bbbd5; }.band-actions a:hover { color: white; }.band-actions a:hover svg { color: #e8f3ff; }.empty-bands { text-align: center; padding: 35px; color: #aabac9; }
.artist { border: 1px solid #34506a; background: var(--recording-frame); display: flex; align-items: center; gap: 18px; padding: 13px; margin-bottom: 18px; border-radius: 5px; }.artist-logo { width: 240px; max-width: 35%; height: auto; max-height: 100px; object-fit: contain; }.artist h1 { font-size: 24px; margin: 0 0 6px; }.artist p { margin: 0; color: #aabac9; }
.counts { display: flex; gap: 8px; margin-left: auto; }.count { border: 1px solid #36536b; border-radius: 5px; background: var(--recording-chip); text-align: center; padding: 9px 12px; min-width: 94px; }.count .icon, .count > svg { color: #9dbdd8; }.count strong { display: block; font-size: 21px; margin: 2px 0; }.count small { display: block; color: var(--recording-muted); }.count:hover { background: #213b52; text-decoration: none; }.count.current { border-color: #76a6d2; }
.recording-controls { display: flex; gap: 9px; margin: 16px 0; }.recording-controls input { flex: 1; min-width: 0; background: #111b25; border: 1px solid #4b6173; border-radius: 4px; padding: 11px; color: white; }.recording-controls button { background: #182b3c; border: 1px solid #345d86; border-radius: 4px; padding: 10px; }
.recording-year { border: 1px solid var(--recording-outline); border-radius: 4px; overflow: hidden; margin: 10px 0; }.recording-year summary { list-style: none; cursor: pointer; background: var(--recording-heading); padding: 12px 15px; font-size: 16px; font-weight: bold; }.recording-year summary::-webkit-details-marker { display: none; }.recording-year summary::before { content: ''; display: inline-block; width: 7px; height: 7px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(-45deg); margin-right: 15px; transition: transform 180ms ease; }.recording-year[open] summary { background: #1b558e; }.recording-year[open] summary::before { transform: rotate(45deg); }.recording-year summary small { font-weight: normal; color: #c0cbd6; margin-left: 10px; font-size: 12px; }
.recording-tablewrap { overflow: auto; }.recording-table { border-collapse: collapse; width: 100%; font-size: 12px; }.recording-table th { background: #101a24; text-align: left; }.recording-table td,.recording-table th { padding: 11px 8px; border-bottom: 1px solid var(--recording-separator); }.recording-table tbody tr:nth-child(odd) { background: var(--recording-surface); }.recording-table a { color: var(--recording-link); }.mobile-records { display: none; }.trade-icon { display: inline-block; width: 78px; height: 20px; object-fit: contain; vertical-align: middle; max-width: 100%; }
@media (max-width: 760px) { .directory-panel { padding: 15px 12px; }.band-total { min-width: 65px; padding-left: 10px; }.directory-head { padding: 18px; align-items: start; }.directory-head h1 { font-size: 23px; }.directory-tools { flex-wrap: wrap; }.band-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 10px; }.band-logo-area { height: 90px; padding: 6px; }.band-logo-area img { max-height: 78px; }.band-actions { column-gap: 12px; row-gap: 5px; }.band-actions a { font-size: 12px; gap: 5px; }.band-actions svg { width: 18px; height: 18px; }.artist { display: block; text-align: center; }.artist-logo { max-width: 100%; max-height: 62px; }.counts { margin: 12px 0 0; }.count { min-width: 0; flex: 1; padding: 8px 4px; }.recording-controls { flex-wrap: wrap; }.recording-controls input { flex-basis: 100%; }.recording-controls button { flex: 1; }.recording-tablewrap { display: none; }.mobile-records { display: block; }.mobile-record { padding: 13px; border-bottom: 1px solid var(--recording-separator); background: var(--recording-surface); overflow-wrap: anywhere; }.mobile-record strong { font-size: 13px; }.mobile-record small { display: block; color: var(--recording-muted); line-height: 1.7; margin: 7px 0; }.mobile-trade { display: block; }.mobile-trade .trade-icon { width: 90px; height: auto; } }

.show-page{max-width:1140px;margin:auto}.show-top{display:flex;gap:25px;align-items:center;justify-content:space-between;padding:25px 0;border-bottom:1px solid var(--recording-outline)}.show-top h1{font-size:clamp(24px,3vw,36px);margin:6px 0;color:var(--text)}.show-top p{margin:5px 0;color:var(--recording-muted)}.show-kicker{color:var(--recording-muted)!important;font-size:12px;letter-spacing:1.8px;text-transform:uppercase}.show-logo{max-width:230px;max-height:85px;object-fit:contain}.show-status{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 26px}.show-chip{border:1px solid var(--recording-outline);border-radius:4px;padding:10px 15px;background:var(--recording-chip);min-width:120px}.show-chip small{display:block;color:var(--recording-muted);font-size:11px;text-transform:uppercase;letter-spacing:.7px;margin-bottom:5px}.show-chip strong{color:var(--text);font-size:15px}.show-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr);gap:24px;align-items:start}.show-panel{background:var(--recording-surface);border:1px solid var(--recording-outline);border-radius:5px;margin-bottom:20px;overflow:hidden}.show-panel h2{background:var(--recording-heading);color:var(--text);font-size:17px;padding:13px 18px;margin:0;border-bottom:1px solid var(--recording-outline)}.show-fields{display:grid;grid-template-columns:175px minmax(0,1fr);gap:0;padding:7px 18px}.show-fields dt,.show-fields dd{margin:0;padding:10px 0;border-bottom:1px solid var(--recording-separator);font-size:13px}.show-fields dt{color:var(--recording-muted)}.show-fields dd{color:var(--text);overflow-wrap:anywhere}.show-fields dt:last-of-type,.show-fields dd:last-of-type{border-bottom:0}.show-panel .show-body{padding:17px 18px;color:var(--text);font-size:13px;line-height:1.8}.show-tracklist{list-style:none;counter-reset:tracks;margin:0;padding:8px 18px 14px}.show-tracklist li{counter-increment:tracks;display:flex;gap:14px;padding:8px 0;border-bottom:1px solid var(--recording-separator);color:var(--text);font-size:13px}.show-tracklist li:before{content:counter(tracks,decimal-leading-zero);color:var(--recording-muted);min-width:25px}.show-tracklist li:last-child{border:0}.show-placeholder{border:1px dashed var(--recording-outline);background:var(--recording-frame);border-radius:4px;min-height:185px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--recording-muted);padding:20px;flex-direction:column;gap:10px}.show-placeholder svg{opacity:.5}.show-links{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}.show-links a{border:1px solid var(--recording-outline);background:#182b3c;padding:10px 14px;border-radius:4px;color:var(--text);text-decoration:none;font-size:13px}.show-links a:hover{background:#213b52}.show-note{font-size:12px;color:var(--recording-muted);margin:10px 0}.show-legend{color:var(--recording-muted);font-size:12px;margin:12px 18px 18px}.show-source{font-size:12px;color:var(--recording-muted);margin:0 18px 16px}.show-source a{color:var(--recording-link)}.show-page .crumb a{color:var(--recording-link);text-decoration:none}@media(max-width:760px){.show-top{flex-direction:column-reverse;align-items:flex-start;gap:12px}.show-logo{max-width:190px;max-height:65px}.show-layout{grid-template-columns:1fr}.show-fields{grid-template-columns:120px minmax(0,1fr);padding:6px 12px}.show-chip{flex:1 1 120px}.show-panel h2{padding:12px}.show-tracklist{padding:8px 12px}.show-panel .show-body{padding:12px}}@media(max-width:390px){.show-fields{grid-template-columns:1fr}.show-fields dt{border:0;padding-bottom:0}.show-fields dd{padding-top:2px}}
.artwork-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.artwork-grid a,.frequency-link{display:block;text-align:center;color:var(--recording-link);font-size:12px}.artwork-grid img,.frequency-link img{width:100%;height:auto;display:block;border:1px solid var(--recording-outline);border-radius:3px;margin-bottom:8px}.artwork-grid a:hover img,.frequency-link:hover img{border-color:#76a6d2}.frequency-link img{background:#fff}.show-panel .show-body:has(.artwork-grid){padding:12px}.show-panel .show-body:has(.frequency-link){padding:12px}@media(max-width:400px){.artwork-grid{gap:7px}}

/* V51: stack original front/back artwork vertically */
.artwork-grid{grid-template-columns:minmax(0,1fr);gap:18px}.artwork-grid a{max-width:100%;display:block}.artwork-grid img{width:100%;height:auto;object-fit:contain}

/* V55: consistent responsive show-detail layouts, including demo mobile mode */
.show-layout > div,.show-page,.show-panel,.show-panel .show-body{min-width:0}
.show-tracklist li{font-size:14px;line-height:1.55;padding:9px 0;overflow-wrap:anywhere}
.show-tracklist li:before{flex:0 0 28px}
.video-tracklist{list-style:none;counter-reset:tracks;margin:0;padding:8px 18px 14px;line-height:normal}
.video-tracklist li{counter-increment:tracks;display:flex;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--recording-separator);color:var(--text);font-size:14px;line-height:1.55;overflow-wrap:anywhere}
.video-tracklist li:before{content:counter(tracks,decimal-leading-zero);color:var(--recording-muted);flex:0 0 28px}
.video-tracklist li:last-child{border:0}
.show-panel .show-body:has(>.video-tracklist){padding:0}
.show-screenshot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){
 .show-page{width:100%;min-width:0}
 .show-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
 .show-layout>div{width:100%;min-width:0}
 .show-top{flex-direction:column-reverse;align-items:flex-start}
 .show-status{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .show-chip{flex:1 1 135px;min-width:0}
 .show-fields{grid-template-columns:minmax(100px,38%) minmax(0,1fr)}
 .show-panel{width:100%;max-width:100%}
 .show-screenshot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .show-tracklist,.video-tracklist{padding:8px 12px 14px}
}
@media(max-width:440px){.show-fields{grid-template-columns:1fr}.show-fields dt{border:0;padding:9px 0 0}.show-fields dd{padding:3px 0 10px}.show-screenshot-grid{grid-template-columns:1fr 1fr;gap:7px}.show-status{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* V57: setlists describe the performance, not physical track/chapter divisions. */
.show-media-link{display:block;line-height:0;border:1px solid var(--recording-outline);border-radius:4px;overflow:hidden;background:var(--recording-frame)}
.show-media-link img{display:block;width:100%;height:auto;object-fit:contain;transition:opacity .15s}
.show-media-link:hover img{opacity:.84}
.show-media-caption{font-size:12px;text-align:center;color:var(--recording-muted);margin:10px 0 0}
.show-screenshot-grid{display:grid;gap:10px}
.video-detail .show-body{overflow-wrap:anywhere}
.video-detail .show-body iframe{display:block;max-width:100%;width:100%;height:auto;aspect-ratio:16/9;border:0}
.video-detail .show-body img{max-width:100%;height:auto}
.video-detail .show-body table{max-width:100%}
.show-tracklist,.video-tracklist{list-style:none!important;counter-reset:none!important;padding-left:18px!important}
.show-tracklist li,.video-tracklist li{counter-increment:none!important;display:block!important;list-style:none!important;gap:0!important}
.show-tracklist li::before,.video-tracklist li::before{content:none!important;display:none!important}
@media(max-width:760px){.show-tracklist,.video-tracklist{padding-left:12px!important}}
.band-actions-single-media { grid-template-columns: max-content; }
.recording-availability--tradeable { color: #61d995; }
.recording-availability--rare { color: #e8a354; }
.recording-availability--unavailable { color: #e45b65; }
.mobile-record:has(.record-card-link) { position: relative; }
.mobile-record .record-card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.mobile-record .record-card-link:focus-visible::after { outline: 2px solid #70b4e3; outline-offset: -2px; }
@media (max-width: 1024px) {
    :is([data-recording-catalog], [data-catalog]) .recording-tablewrap { display: none; }
    :is([data-recording-catalog], [data-catalog]) .mobile-records { display: block; }
    .mobile-record:has(.record-card-link) { padding: 13px; border-bottom: 1px solid var(--recording-separator); background: var(--recording-surface); overflow-wrap: anywhere; }
    .mobile-record:has(.record-card-link) strong { font-size: 13px; }
    .mobile-record:has(.record-card-link) small { display: block; color: var(--recording-muted); line-height: 1.7; margin: 7px 0; }
}