/* Shared visual language with ANIME LOOP; playback remains in app.mjs. */

body { background: radial-gradient(ellipse 850px 700px at 15% 0%, var(--color-222336) 0, transparent 75%), var(--bg); }
html { scroll-padding-top: 96px; }
.site-header {
  position: sticky; top: 0; z-index: 20; min-height: 76px;
  padding: 0 4%; gap: 32px;
  background: rgba(13,14,19,.96); backdrop-filter: blur(14px);
}
.brand { gap: 12px; font-size: var(--fs-20); letter-spacing: .02em; }
.brand strong, .footer-brand strong { color: var(--text); }
.brand small { margin-top: 7px; font-size: var(--fs-12); letter-spacing: .16em; }
.brand-mark {
  width: 38px; height: 38px; padding: 0; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--color-ff4d6d), var(--color-7b61ff)); color: var(--color-fff);
  font-size: var(--fs-20); font-style: italic; box-shadow: 0 0 30px var(--color-ff4d6d20);
}
.site-header nav { margin-right: auto; gap: 28px; }
.site-header nav a { display: flex; align-items: center; min-height: 76px; padding: 0; color: var(--muted); font-size: var(--fs-14); }
.site-header nav a:hover, .site-header nav a.active { color: var(--color-fff); border-color: var(--color-ff4d6d); }
.edition { color: var(--muted); font-size: var(--fs-12); white-space: nowrap; }
.main-shell { max-width: 1460px; width: calc(100% - 60px); margin: 0 auto; }
.page-title { max-width: 1000px; margin: auto; padding: 22px 0 18px; gap: 16px; }
.page-title h1 { font-size: var(--fs-16); letter-spacing: .02em; }
.eyebrow { color: var(--muted); font-size: var(--fs-12); letter-spacing: .18em; }
.page-title .eyebrow { margin-bottom: 4px; }
.clock-block { font-size: var(--fs-12); gap: 8px; }
.clock-block strong { font-size: var(--fs-16); font-variant-numeric: tabular-nums; }
.watch-section { max-width: none; margin: auto; border: 0; background: transparent; overflow: visible; }
.watch-summary {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  align-items: stretch; padding: 18px 20px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: linear-gradient(145deg, var(--color-1a1b25), var(--color-13141b));
}
.watch-current { min-width: 0; padding-right: 20px; }
.watch-summary h2 { font-size: var(--fs-20); margin-top: 10px; min-height: 0; }
.onair-label { color: var(--color-43dfa2); background: var(--color-43dfa20e); border-color: var(--color-43dfa233); }
.channel-small { color: var(--muted); font-size: var(--fs-12); }
.watch-grid { display: block; }
.player-column { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--color-12131a); }
.player-stage { background: var(--color-050507); }
.play-disc { background: linear-gradient(135deg, var(--color-ff4d6d), var(--color-7b61ff)); color: white; box-shadow: 0 0 36px var(--color-ff4d6d26); }
.player-controls { padding: 14px 18px; gap: 12px; }
.player-controls button { min-height: 42px; border-radius: var(--r-md); font-size: var(--fs-14); }
.player-controls a { font-size: var(--fs-14); }
.player-status { font-size: var(--fs-14); }
.video-meta { background: var(--color-12131a); font-size: var(--fs-14); }
.next-summary {
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; min-width: 0; border: 0; border-left: 1px solid var(--line);
  padding: 0 48px 0 24px; margin: 0; background: transparent; min-height: 85px;
}
.next-summary .eyebrow { justify-content: flex-start; gap: 16px; color: var(--muted); }
.next-summary strong { font-size: var(--fs-16); -webkit-line-clamp: 2; }
.next-icon { right: 20px; top: 32px; color: var(--accent); }
.ad-slot { max-width: 1000px; margin: 24px auto 36px; padding: 0; scroll-margin-top: 96px; }
.ad-slot-inner {
  position: relative; min-height: 120px; padding: 22px 24px; border: 1px dashed var(--color-4b4c5d); border-radius: var(--r-md);
  background: repeating-linear-gradient(135deg, var(--color-181923) 0, var(--color-181923) 12px, var(--color-14151e) 12px, var(--color-14151e) 24px);
}
.ad-slot-inner::before, .ad-slot-inner::after { content: ''; position: absolute; width: 14px; height: 14px; border-color: var(--color-787987); pointer-events: none; }
.ad-slot-inner::before { left: 8px; top: 8px; border-left: 2px solid; border-top: 2px solid; }
.ad-slot-inner::after { right: 8px; bottom: 8px; border-right: 2px solid; border-bottom: 2px solid; }
.ad-slot-label { color: var(--color-b2b3c3); font-size: var(--fs-12); letter-spacing: .12em; }
.ad-slot-copy h2 { font-size: var(--fs-20); }
.ad-slot-cta { border: 1px solid var(--color-6b4d70); border-radius: var(--r-md); background: var(--color-2a1b2e); color: var(--color-ffe4ed); font-size: var(--fs-14); }
.ad-slot-cta:hover { background: var(--color-3b2541); border-color: var(--accent); }
.ad-slot-note { font-size: var(--fs-12); }
.amazon-inline-ad { max-width: none; margin: 18px 0 30px; }
.amazon-inline-ad-inner { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.6fr); align-items: stretch; gap: 0; padding: 0; }
.amazon-inline-copy { padding-left: 30px; }
.amazon-inline-copy h2 { margin-top: 7px; font-size: var(--fs-20); }
.amazon-inline-copy p { margin-top: 7px; color: var(--muted); font-size: var(--fs-12); }
.amazon-inline-copy .amazon-inline-note { margin-top: 16px; }
.amazon-inline-note { display: grid; gap: 5px; color: var(--muted); font-size: var(--fs-12); line-height: 1.5; }
.amazon-inline-note small { display: block; font-size: var(--fs-12); overflow-wrap: break-word; word-break: normal; line-break: strict; text-wrap: balance; }
.amazon-inline-note a { color: var(--accent); font-size: var(--fs-12); font-weight: 700; overflow-wrap: break-word; word-break: normal; line-break: strict; text-wrap: balance; }
.channel-panel { margin: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--color-101117); }
.panel-heading { align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { font-size: var(--fs-16); }
.panel-heading .eyebrow { margin-bottom: 4px; }
.mix-channels { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; padding: 12px; }
.mix-channel {
  display: flex; align-items: center; text-align: left; min-height: 90px; padding: 12px; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.mix-channel:hover { background: var(--high); }
.mix-channel.active { background: var(--color-22232d); border-color: var(--color-6b6275); box-shadow: inset 0 2px var(--channel-color,var(--accent)); }
.mix-channel strong { font-size: var(--fs-14); margin: 0; color: var(--text); }
.mix-channel small { font-size: var(--fs-12); color: var(--muted); }
.channel-arrow { display: none; }
.channel-num { color: var(--channel-color,var(--accent)); font-size: var(--fs-20); }
.mix-channel:nth-child(5n+1), .guide-column:nth-child(5n+1) { --channel-color: var(--color-ff6685); }
.mix-channel:nth-child(5n+2), .guide-column:nth-child(5n+2) { --channel-color: var(--color-ffad45); }
.mix-channel:nth-child(5n+3), .guide-column:nth-child(5n+3) { --channel-color: var(--color-a38cff); }
.mix-channel:nth-child(5n+4), .guide-column:nth-child(5n+4) { --channel-color: var(--color-46d2c1); }
.mix-channel:nth-child(5n+5), .guide-column:nth-child(5n+5) { --channel-color: var(--color-55c5f3); }
.artist-select { display: grid; grid-template-columns: auto minmax(140px,1fr) minmax(170px,1fr) auto; gap: 12px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--line); }
.artist-select label, .artist-select>a { margin: 0; font-size: var(--fs-14); }
.artist-select input, .artist-select select { width: 100%; min-width: 0; margin: 0; background: var(--color-191a23); border-color: var(--color-383946); border-radius: var(--r-md); font-size: var(--fs-14); }
.guide-section, .artists-section, .catalog-section { padding-top: 44px; }
.section-head { align-items: center; gap: 20px; }
.section-head h2 { font-size: var(--fs-20); }
.guide-controls { flex-wrap: wrap; }
.guide-groups { gap: 8px; border: 0; border-radius: 0; overflow: visible; }
.guide-groups button { min-height: 50px; padding: 10px 18px; border: 1px solid var(--color-383946); border-radius: var(--r-md); font-size: var(--fs-16); }
.guide-groups button[aria-pressed=true], .segments button[aria-pressed=true] { color: var(--color-ffe6ed); background: var(--color-30202c); border-color: var(--color-a65171); }
.guide-groups button+button { border-left: 1px solid var(--color-383946); }
.guide-controls>button { border-radius: var(--r-md); }
.guide-artist-picker { background: var(--color-111219); border-radius: var(--r-md); padding: 18px; }
.guide-artist-buttons {
  grid-template-columns: repeat(10,minmax(0,1fr));
  height: min(430px, 52vh);
  overflow-x: hidden;
  overflow-y: scroll;
  padding-right: 4px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  align-content: start;
}
.guide-artist-button { background: var(--color-181921); border-radius: var(--r-md); min-height: 76px; padding: 12px; }
.guide-artist-button:hover { background: var(--color-22232d); border-color: var(--color-666273); }
.guide-artist-button[aria-pressed=true] { background: var(--color-2a1f2d); border-color: var(--color-a65171); box-shadow: inset 3px 0 var(--accent); }
.guide-artist-button>span { font-size: var(--fs-12); }
.guide-artist-button small { font-size: var(--fs-12); }
.guide-columns { border-radius: var(--r-md); }
.guide-column { background: var(--color-13141b); }
.guide-heading { background: var(--color-181921); border-top: 3px solid transparent; padding: 16px 12px; gap: 10px; }
.guide-heading.active { border-top-color: var(--channel-color); box-shadow: none; background: var(--color-22232d); }
.guide-heading.active strong { color: var(--text); }
.guide-program { padding: 16px 12px; gap: 8px; grid-template-columns: 46px minmax(0,1fr); }
.guide-program.current { background: var(--color-ff4d6d09); box-shadow: inset 3px 0 var(--channel-color); }
.program-time { color: var(--channel-color,var(--accent)); }
.guide-selection { color: var(--muted); }
.segments { border-radius: var(--r-md); background: var(--color-15161d); }
.artist-card, .source-item { border-radius: var(--r-md); background: var(--color-15161d); }
.artist-card.active { border-color: var(--color-a65171); box-shadow: 0 0 0 1px var(--color-a65171); }
.artist-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.artist-name-row > button { min-width: 0; min-height: 0; padding: 0; text-align: left; font-size: var(--fs-14); font-weight: 700; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artist-name-row > span { flex: 0 0 auto; font-size: var(--fs-12); white-space: nowrap; }
.artist-channel-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; color: var(--muted); font-size: var(--fs-12); }
.artist-channel-row span:last-child { color: var(--color-d1dbe7); }
.artist-info .artist-stats { margin-top: 6px; font-size: var(--fs-12); color: var(--color-d1dbe7); }
.rank-badge { background: var(--color-15161deb); color: var(--accent); }
.library-image { border-radius: var(--r-md); }
.sources-section details { background: var(--color-12131a); border-radius: var(--r-md); }
footer { margin-top: 28px; background: var(--color-0c0d12); padding: 28px 4%; }
@media(max-width:1179px) {
  .site-header { gap: 24px; }
  .site-header nav { gap: 20px; }
  .edition { display: none; }
  .mix-channel { display: block; }
  .mix-channel strong { margin-top: 6px; }
  .artist-select { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .artist-select label { grid-column: 1/-1; }
  .artist-select>a { grid-column: 1/-1; }
  .section-head { flex-wrap: wrap; }
  .watch-summary { grid-template-columns: minmax(0, 1fr) minmax(260px, 36%); }
}
@media(max-width:850px) {
  .site-header { gap: 0; flex-wrap: wrap; padding: 14px 4% 0; }
  .site-header nav { width: 100%; justify-content: space-between; margin-top: 8px; }
  .site-header nav a { min-height: 46px; }
  html { scroll-padding-top: 132px; }
  .ad-slot { scroll-margin-top: 132px; }
  .watch-summary h2 { font-size: var(--fs-16); }
  .mix-channels { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .mix-channel { min-height: 100px; }
  .ad-slot-inner { flex-direction: row; }
  .ad-slot-cta { flex: 0 1 300px; }
}
@media(max-width:600px) {
  .main-shell { width: calc(100% - 28px); }
  .brand { font-size: var(--fs-20); }
  .brand small { font-size: var(--fs-12); }
  .site-header nav { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
  .site-header nav a { font-size: var(--fs-14); line-height: 1.5; min-height: 50px; }
  .page-title { padding: 18px 0 14px; }
  .page-title h1 { font-size: var(--fs-16); }
  .clock-block { margin-top: 8px; }
  .watch-summary { display: block; padding: 15px; }
  .watch-current { padding-right: 0; }
  .watch-summary h2 { font-size: var(--fs-16); }
  .channel-small { display: block; margin: 8px 0 0; font-size: var(--fs-12); }
  .player-controls { padding: 12px; }
  .player-controls button { padding: 6px 8px; }
  .player-status, .video-meta { font-size: var(--fs-12); }
  .next-summary { border-left: 0; border-top: 1px solid var(--line); padding: 11px 24px 0 0; margin-top: 12px; min-height: 57px; }
  .next-summary strong { font-size: var(--fs-14); }
  .next-icon { right: 14px; }
  .ad-slot-inner { flex-direction: column; padding: 20px; }
  .ad-slot-cta { flex: auto; width: 100%; }
  .ad-slot { margin-bottom: 28px; }
  .panel-heading { padding: 16px; }
  .panel-heading h2 { font-size: var(--fs-16); }
  .mix-channels { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mix-channel { min-height: 96px; }
  .artist-select { padding: 16px; grid-template-columns: 1fr; }
  .guide-groups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; width: 100%; }
  .guide-groups button { padding: 10px 6px; font-size: var(--fs-14); white-space: normal; line-height: 1.5; }
  .guide-controls { width: 100%; justify-content: flex-start; }
  .guide-columns, .guide-columns.mix-guide { display: block; }
  .guide-heading { min-height: 72px; }
  .guide-program { grid-template-columns: 52px minmax(0,1fr); min-height: 110px; }
  .guide-artist-picker { padding: 14px; }
  .guide-artist-buttons { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .guide-artist-button { padding: 10px; }
  .guide-artist-button strong { font-size: var(--fs-14); }
  .section-head h2 { font-size: var(--fs-20); }
  .segments button { font-size: var(--fs-14); }
  .artist-name-row > button { font-size: var(--fs-14); }
  .artist-name-row > span, .artist-channel-row { font-size: var(--fs-12); }
}

/* Keep the IDOL LOOP ad rails aligned with the soccer channel layout. */
#music.player-layout {
  display: grid;
  grid-template-areas: 'left player right';
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) minmax(180px, 220px);
  align-items: stretch;
  gap: 16px;
  margin: 0 0 36px;
  background: transparent;
  scroll-margin-top: 96px;
}
#music.player-layout > .player-main { grid-area: player; min-width: 0; }
.watch-ad-rail { display: flex; min-width: 0; }
.watch-ad-rail--left { grid-area: left; }
.watch-ad-rail--right { grid-area: right; }
.soccer-ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 0;
  min-height: 110px;
  width: 100%;
  margin: 22px 0;
  padding: 18px 12px;
  border: 1px dashed var(--color-607985);
  border-radius: var(--r-md);
  background: repeating-linear-gradient(135deg, var(--color-0d1a22), var(--color-0d1a22) 12px, var(--color-10202a) 12px, var(--color-10202a) 24px);
  color: var(--muted);
  text-align: center;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
  text-wrap: balance;
}
.soccer-ad-slot > .ad-kicker { font-size: var(--fs-12); letter-spacing: .08em; }
.amazon-banner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  margin-top: 10px;
  padding: 16px 10px;
  border: 1px solid var(--color-7f4d83);
  border-radius: var(--r-md);
  background: linear-gradient(145deg, var(--color-321d37), var(--color-1b2630));
  color: var(--color-fff0f7);
  box-shadow: inset 0 1px var(--color-ffffff12), 0 8px 22px var(--color-05070a30);
  line-height: 1.45;
  text-align: center;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
  text-wrap: balance;
}
.amazon-banner:hover, .amazon-banner:focus-visible { border-color: var(--accent); background: linear-gradient(145deg, var(--color-4a2850), var(--color-20303b)); }
.amazon-official-logo { display: block; width: 100%; max-width: none; height: auto; max-height: none; object-fit: contain; margin: 0 auto 12px; padding: 0; border-radius: 0; background: transparent; filter: drop-shadow(0 2px 5px var(--color-05070a45)); }
.amazon-inline-ad .amazon-inline-banner { margin-top: 0; padding: 0; justify-content: center; }
.amazon-inline-ad .amazon-inline-banner .amazon-official-logo { align-self: center; width: min(340px, 100%); margin-inline: auto; max-width: 340px; margin-bottom: 0; }
.amazon-image-fallback { display: block; margin-bottom: 9px; color: var(--color-fff); font-size: var(--fs-14); font-weight: 700; line-height: 1.35; }
.amazon-banner-label { font-size: var(--fs-12); letter-spacing: .16em; color: var(--color-d9b8e1); }
.amazon-banner > strong { margin-top: 6px; font-size: var(--fs-16); color: var(--color-fff); }
.amazon-banner-copy { margin-top: 7px; font-size: var(--fs-12); color: var(--color-d7c9d9); }
.amazon-banner-cta { margin-top: 11px; color: var(--accent); font-size: var(--fs-12); font-weight: 700; }
.soccer-ad-slot > small { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; font-size: var(--fs-12); line-height: 1.6; white-space: normal; overflow-wrap: break-word; word-break: normal; line-break: strict; text-wrap: balance; }
.amazon-availability { display: grid; gap: 5px; width: 100%; margin-top: 11px; color: var(--color-d7c9d9); font-size: var(--fs-12); line-height: 1.55; text-align: center; }
.amazon-availability a { display: inline-block; color: var(--accent); font-size: var(--fs-16); line-height: 1.4; font-weight: 700; text-decoration: underline; white-space: nowrap; overflow-wrap: normal; word-break: normal; line-break: strict; }
.soccer-ad-slot--rail > small { font-size: var(--fs-12); line-height: 1.45; }
.soccer-ad-slot--rail .amazon-availability { gap: 2px; margin-top: 8px; }
.soccer-ad-slot--rail > .ad-kicker { margin-top: 8px; }
.soccer-ad-slot--rail { min-height: 250px; margin: 0; padding: 0; justify-content: flex-start; }
.soccer-ad-slot--rail .amazon-banner { flex: 1; margin-top: 0; justify-content: space-evenly; }

@media(max-width:1179px) {
  .amazon-inline-ad-inner { grid-template-columns: minmax(220px, 1fr) minmax(0, 1.6fr); }
  .watch-ad-rail { display: none; }
  #music.player-layout {
    grid-template-areas: 'player';
    grid-template-columns: minmax(0,1fr);
    gap: 0;
  }
}
@media(max-width:850px) {
  .amazon-inline-ad-inner { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .amazon-inline-note { grid-column: auto; }
  #music.player-layout {
    grid-template-areas: 'player';
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    scroll-margin-top: 132px;
  }
  .soccer-ad-slot--rail { min-height: 110px; margin: 0; }
}

/* Soccer-style guide timeline: the time rail stays visible while the programme body scrolls. */
.guide-scroll {
  --guide-rail-width: 72px;
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  max-height: min(780px, 72vh);
  min-height: 420px;
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--color-10141a);
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.guide-time-rail {
  position: sticky;
  left: 0;
  z-index: 5;
  align-self: stretch;
  min-height: 100%;
  border-right: 1px solid var(--color-354654);
  background: var(--color-16202a);
}
.guide-time-head {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 82px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--color-354654);
  background: var(--color-1b2a34);
  color: var(--color-eef6ff);
  font-size: var(--fs-12);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
.guide-time-head small { display: block; margin-top: 4px; color: var(--color-b9c9d7); font-size: var(--fs-12); }
.guide-time-ticks { padding-top: 0; }
.guide-time-tick {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 240px;
  min-height: 240px;
  box-sizing: border-box;
  padding: 10px 7px;
  border-bottom: 1px solid var(--color-263844);
  color: var(--color-d4e0e9);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.guide-time-tick strong { font-size: var(--fs-12); }
.guide-time-tick small { margin-top: 4px; color: var(--color-8ea5b5); font-size: var(--fs-12); }
.guide-columns { display: grid; min-width: 760px; min-height: var(--guide-column-height, 0px); border: 0; border-radius: 0; overflow: visible; }
.guide-columns.mix-guide { grid-template-columns: repeat(5, minmax(180px, 1fr)); }
.guide-column { position: relative; min-width: 0; height: var(--guide-column-height, auto); border-left: 1px solid var(--color-2a3945); background: var(--color-10191c); }
.guide-column:first-child { border-left: 0; }
.guide-heading {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 82px;
  background: var(--color-172d29);
  box-shadow: 0 1px 0 var(--color-385448);
}
.guide-heading.active { background: var(--color-1b3c31); }
.guide-program { position: absolute; top: var(--guide-program-top, 82px); left: 0; right: 0; z-index: 1; height: var(--guide-program-height, 118px); min-height: 0; overflow: hidden; background: var(--color-10241c); }
.guide-program.past { background: var(--color-101c19); opacity: .82; }
.guide-program.current { position: absolute; background: var(--color-17382a); box-shadow: inset 3px 0 var(--channel-color), inset 0 2px var(--color-ff6685); opacity: 1; }
.program-time { font-variant-numeric: tabular-nums; }
.guide-now-line {
  position: absolute;
  top: var(--guide-now-top, 82px);
  left: var(--guide-rail-width);
  right: 0;
  z-index: 8;
  border-top: 2px dashed var(--onair);
  pointer-events: none;
}
.guide-now-line span {
  position: absolute;
  top: -13px;
  left: 8px;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--color-ff5574);
  color: var(--color-190b11);
  font-size: var(--fs-12);
  font-weight: 700;
  line-height: 1.2;
}

@media(max-width:850px) {
  .guide-scroll { --guide-rail-width: 58px; grid-template-columns: 58px minmax(0, 1fr); max-height: 68vh; min-height: 360px; }
  .guide-artist-buttons { grid-template-columns: repeat(5,minmax(0,1fr)); height: min(430px, 58vh); }
  .guide-time-head { min-height: 67px; padding-inline: 4px; font-size: var(--fs-12); }
  .guide-time-tick { height: 240px; min-height: 240px; padding: 8px 3px; }
  .guide-time-tick strong { font-size: var(--fs-12); }
  .guide-columns, .guide-columns.mix-guide { display: grid; grid-template-columns: minmax(260px, 1fr); min-width: 260px; }
  .guide-column:first-child { border-left: 0; }
  .guide-column+.guide-column { border-left: 0; border-top: 2px solid var(--color-31433f); }
}

/* Phase 2: center the viewing experience and keep the existing PR units visible. */
html { scroll-padding-top: 72px; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 64px;
  height: 64px;
  flex-wrap: nowrap;
  gap: var(--sp-6);
  padding: 0 max(var(--gutter), calc((100vw - var(--container-wide)) / 2));
  border-bottom: 1px solid var(--line);
  background: rgb(11 11 16 / .88);
  backdrop-filter: blur(14px);
}
.brand { gap: var(--sp-3); font-size: var(--fs-16); letter-spacing: .02em; }
.brand-mark { width: 32px; height: 32px; padding: 0; border-radius: var(--r-md); font-size: var(--fs-16); }
.brand small { margin-top: 3px; font-size: var(--fs-12); letter-spacing: .08em; }
.site-header nav { flex: 1; justify-content: center; gap: clamp(12px, 2.1vw, 30px); font-size: var(--fs-14); font-weight: 500; }
.site-header nav a { min-height: 64px; padding: 0; }
.edition { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; font-size: var(--fs-14); letter-spacing: 0; color: var(--text-2); white-space: nowrap; }
.header-clock { font-variant-numeric: tabular-nums; }
.onair-dot { width: 8px; height: 8px; border-radius: var(--r-circle); background: var(--onair); box-shadow: 0 0 0 0 rgb(255 77 109 / .45); animation: onair-pulse 1.8s ease-out infinite; }
@keyframes onair-pulse { 70% { box-shadow: 0 0 0 7px rgb(255 77 109 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 77 109 / 0); } }
.main-shell { width: min(calc(100% - 2 * var(--gutter)), var(--container-wide)); max-width: none; }
.watch-section { width: 100%; overflow: visible; border: 0; border-radius: 0; background: transparent; }
#watch { scroll-margin-top: 72px; }
.watch-summary { display: block; padding: 0 0 var(--sp-4); border: 0; background: transparent; }
.watch-summary h2 { margin: var(--sp-2) 0 0; font-size: clamp(24px, 2.5vw, 40px); line-height: 1.16; font-weight: 700; }
.watch-current { min-width: 0; }
.onair-label { padding: 4px 8px; border-radius: var(--r-sm); background: var(--onair); color: var(--bg); }
.channel-small { margin-left: var(--sp-2); }
#music.player-layout.watch-grid {
  display: grid;
  grid-template-areas: "left player right";
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--rail-w);
  align-items: start;
  gap: var(--sp-6);
  margin: 0 0 var(--sp-8);
  overflow: visible;
}
#music.player-layout > .player-main { grid-area: player; }
.player-column { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.player-stage { aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--r-md); background: #000; }
.player-stage > img { object-fit: contain; }
.player-controls { min-height: 52px; padding: var(--sp-3) 0; border-top: 0; }
.player-controls button { min-height: 36px; padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-2); }
.player-controls button:hover { border-color: var(--accent); background: var(--surface-3); }
.player-status { min-height: 0; padding: 0 0 var(--sp-3); font-size: var(--fs-14); color: var(--text-2); }
.video-meta { min-height: 40px; padding: var(--sp-3) 0; border-top: 1px solid var(--line); font-size: var(--fs-14); }
.pill { border-radius: var(--r-pill); }
.next-strip { display: grid; grid-template-columns: minmax(150px, .45fr) minmax(0, 1.55fr); align-items: center; gap: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.next-summary { min-height: 64px; padding: 0 var(--sp-4) 0 0; border: 0; }
.next-summary strong { font-size: var(--fs-14); }
.next-icon { right: var(--sp-2); }
.next-programs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); min-width: 0; }
.next-program-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; column-gap: var(--sp-2); min-height: 54px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-align: left; }
.next-program-item .next-program-time { grid-row: span 2; color: var(--accent); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.next-program-item strong { overflow: hidden; font-size: var(--fs-14); text-overflow: ellipsis; white-space: nowrap; }
.next-program-item .next-program-artist { overflow: hidden; color: var(--text-3); font-size: var(--fs-12); text-overflow: ellipsis; white-space: nowrap; }
.next-program-item:hover { border-color: var(--accent); }
.watch-ad-rail { position: sticky; top: 80px; align-self: start; width: var(--rail-w); min-width: 0; }
.watch-ad-rail--left { grid-area: left; }
.watch-ad-rail--right { grid-area: right; }
.soccer-ad-slot--rail { display: flex; width: 100%; height: auto; max-height: 340px; min-height: 0; margin: 0; padding: var(--sp-3); align-items: stretch; justify-content: flex-start; gap: var(--sp-2); border: 0; border-radius: var(--r-md); background: var(--surface); text-align: left; box-shadow: 0 8px 24px rgb(0 0 0 / .12); }
.soccer-ad-slot--rail .amazon-banner { display: flex; flex: 0 1 auto; min-height: 104px; margin: 0; padding: var(--sp-3) var(--sp-2); justify-content: center; gap: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); box-shadow: none; }
.soccer-ad-slot--rail .amazon-banner:hover, .soccer-ad-slot--rail .amazon-banner:focus-visible { border-color: var(--accent); background: var(--surface-3); }
.soccer-ad-slot--rail .amazon-official-logo { width: 100%; max-width: 116px; max-height: 30px; margin: 0 auto; filter: none; }
.soccer-ad-slot--rail .amazon-image-fallback { margin: 0; font-size: var(--fs-14); }
.soccer-ad-slot--rail .amazon-banner-label, .soccer-ad-slot--rail .amazon-banner > strong { display: none; }
.soccer-ad-slot--rail .amazon-banner-copy { margin: 0; color: var(--text-2); font-size: var(--fs-12); }
.soccer-ad-slot--rail .amazon-banner-cta { display: inline-flex; min-height: 32px; margin: 0; padding: 6px 10px; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-1); font-size: var(--fs-12); font-weight: 700; text-align: center; }
.soccer-ad-slot--rail .rail-details { display: grid; gap: var(--sp-2); color: var(--text-3); }
.soccer-ad-slot--rail .rail-details > small { display: block; width: 100%; margin: 0; font-size: var(--fs-12); line-height: 1.45; white-space: normal; overflow-wrap: break-word; word-break: normal; line-break: strict; text-wrap: balance; }
.soccer-ad-slot--rail .amazon-availability { display: block; width: 100%; margin: 0; text-align: left; }
.soccer-ad-slot--rail .amazon-availability a { font-size: var(--fs-12); }
.soccer-ad-slot--rail .ad-kicker { order: -1; margin: 0; color: var(--text-2); font-size: var(--fs-12); }
.responsive-ad-slot:empty { display: none; }
.responsive-ad-slot:not(:empty) { margin: var(--sp-4) 0; }
.watch-ad-rail .soccer-ad-slot [hidden] { display: none !important; }
.watch-ad-rail .amazon-inline-note { font-size: var(--fs-12); }
.channel-panel { border: 1px solid var(--line); border-radius: var(--r-md); }
#guide { scroll-margin-top: 76px; }
@media (min-width: 1180px) {
  .watch-section { width: min(100%, var(--container-wide)); }
}
@media (max-width: 1179px) {
  .site-header { gap: var(--sp-4); padding-inline: var(--gutter); }
  .site-header nav { justify-content: flex-end; gap: clamp(10px, 2vw, 22px); }
  .edition { font-size: var(--fs-12); }
  #music.player-layout.watch-grid { display: block; }
  .watch-ad-rail { display: flex; position: static; width: 100%; margin: 0; }
  .watch-ad-rail--left { margin-top: var(--sp-3); }
  .watch-ad-rail--right { margin: 0; }
  #responsive-ad-right:not(:empty) { margin-top: var(--sp-4); }
  .soccer-ad-slot--rail { display: flex; flex-flow: row wrap; align-content: center; align-items: center; height: 96px; max-height: 96px; padding: 0 var(--sp-3); gap: 1px var(--sp-3); }
  .soccer-ad-slot--rail .ad-kicker { flex: 0 0 54px; order: 0; }
  .soccer-ad-slot--rail .amazon-banner { display: grid; flex: 1 1 220px; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: 1fr 1fr; align-items: center; min-width: 0; min-height: 40px; height: 42px; padding: 3px var(--sp-2); gap: 0 var(--sp-2); text-align: left; }
  .soccer-ad-slot--rail .amazon-official-logo, .soccer-ad-slot--rail .amazon-image-fallback { grid-row: 1 / 3; grid-column: 1; width: 58px; max-width: 58px; max-height: 28px; margin: 0; }
  .soccer-ad-slot--rail .amazon-banner-copy { grid-row: 1; grid-column: 2; margin: 0; }
  .soccer-ad-slot--rail .amazon-banner-cta { grid-row: 2; grid-column: 2; margin: 0; }
  .soccer-ad-slot--rail .amazon-banner-cta { min-height: 0; padding: 0; border-radius: 0; background: transparent; }
  .soccer-ad-slot--rail .rail-details { display: flex; flex: 1 0 100%; align-items: center; justify-content: space-between; gap: var(--sp-2); min-width: 0; }
  .soccer-ad-slot--rail .rail-details > small { flex: 1 1 0; max-width: 36%; font-size: var(--fs-12); line-height: 1.25; }
  .soccer-ad-slot--rail .amazon-availability { flex: 0 1 auto; width: auto; margin: 0; }
  .soccer-ad-slot--rail .amazon-availability a { font-size: var(--fs-12); }
  .soccer-ad-slot--rail .rail-details { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: min-content min-content; align-content: center; column-gap: var(--sp-2); row-gap: 0; }
  .soccer-ad-slot--rail .rail-details > small { max-width: none; margin: 0; font-size: var(--fs-12); line-height: 1.15; }
  .soccer-ad-slot--rail .rail-details > small:first-child { grid-column: 1 / -1; grid-row: 1; }
  .soccer-ad-slot--rail .rail-details > small[data-amazon-associate-disclosure] { grid-column: 1; grid-row: 2; }
  .soccer-ad-slot--rail .amazon-availability { grid-column: 2; grid-row: 2; align-self: center; }
  .soccer-ad-slot--rail .amazon-banner-copy, .soccer-ad-slot--rail .amazon-banner-cta { line-height: 1.2; }
  .next-strip { grid-template-columns: minmax(125px, .5fr) minmax(0, 1.5fr); gap: var(--sp-3); }
}
@media (max-width: 600px) {
  .site-header { height: 64px; min-height: 64px; flex-wrap: nowrap; padding-inline: var(--gutter); gap: var(--sp-2); }
  .brand { flex: 0 0 auto; font-size: var(--fs-14); }
  .brand-mark { width: 28px; height: 28px; }
  .brand small { display: none; }
  .site-header nav { display: flex; flex: 1 1 0; flex-wrap: nowrap; align-items: center; min-width: 0; height: 64px; justify-content: flex-start; gap: var(--sp-3); overflow-x: auto; scrollbar-width: none; }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav a { flex: 0 0 auto; min-height: 64px; font-size: var(--fs-12); white-space: nowrap; }
  .edition { flex: 0 0 auto; margin-left: 0; font-size: var(--fs-12); }
  .watch-summary { padding-bottom: var(--sp-3); }
  .watch-summary h2 { font-size: var(--fs-20); }
  .player-controls { flex-wrap: wrap; gap: var(--sp-2); }
  .player-controls > div { gap: 5px; }
  .player-controls button { padding-inline: 10px; font-size: var(--fs-12); }
  .player-controls a { font-size: var(--fs-12); }
  .next-strip { display: block; }
  .next-summary { min-height: 54px; padding: var(--sp-2) 28px var(--sp-2) 0; }
  .next-programs { grid-template-columns: 1fr; gap: 5px; }
  .next-program-item { grid-template-columns: 46px minmax(0,1fr); min-height: 46px; }
  .soccer-ad-slot--rail { height: 96px; padding: 0 8px; gap: 1px 7px; }
  .soccer-ad-slot--rail .ad-kicker { flex-basis: 44px; font-size: var(--fs-12); }
  .soccer-ad-slot--rail .amazon-banner { flex-basis: 180px; grid-template-columns: 72px minmax(0,1fr); height: 48px; min-height: 48px; padding: 3px 5px; gap: 0 5px; }
  .soccer-ad-slot--rail .amazon-official-logo { width: 72px; max-width: 72px; }
  .soccer-ad-slot--rail .amazon-image-fallback { width: 72px; max-width: 72px; max-height: none; margin: 0; font-size: var(--fs-12); line-height: 1.05; text-align: center; }
  .soccer-ad-slot--rail .amazon-banner-copy, .soccer-ad-slot--rail .amazon-banner-cta { font-size: var(--fs-12); }
  .soccer-ad-slot--rail .rail-details { gap: 0 5px; }
  .soccer-ad-slot--rail .rail-details > small { max-width: none; font-size: var(--fs-12); }
  .soccer-ad-slot--rail .amazon-availability a { font-size: var(--fs-12); }
}
@media (prefers-reduced-motion: reduce) {
  .onair-dot { animation: none; }
}

/* Phase 3: compact channel tabs and a unified, legible programme timeline. */
.channel-panel { margin: var(--sp-8) 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.channel-panel .panel-heading { padding: 0 0 var(--sp-3); }
.channel-panel .panel-heading .eyebrow { display: none; }
.channel-panel .panel-heading h2 { margin: 0; font-size: var(--fs-20); line-height: 1.3; }
.channel-panel .panel-heading > span { color: var(--text-3); font-size: var(--fs-12); }
.mix-channels { display: flex; min-width: 0; gap: var(--sp-2); padding: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.mix-channel { flex: 0 0 clamp(188px, 19vw, 236px); min-height: 82px; gap: var(--sp-3); padding: var(--sp-4); border: 0; border-radius: var(--r-md); background: var(--surface-1); scroll-snap-align: start; }
.mix-channel:hover { background: var(--surface-2); }
.mix-channel.active { background: var(--surface-2); box-shadow: inset 0 3px var(--accent); }
.mix-channel .channel-num { flex: 0 0 auto; color: var(--text-3); font-size: var(--fs-20); }
.mix-channel.active .channel-num { color: var(--accent); }
.mix-channel strong { color: var(--text-1); font-size: var(--fs-14); }
.mix-channel small { color: var(--text-3); font-size: var(--fs-12); }
.mix-channel .channel-arrow { display: none; }
.channel-panel .artist-select { display: grid; grid-template-columns: auto minmax(140px, 1fr) minmax(170px, 1fr) auto; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); padding: var(--sp-3) 0 0; border: 0; }
.channel-panel .artist-select label { margin: 0; color: var(--text-2); font-size: var(--fs-14); white-space: nowrap; }
.channel-panel .artist-select input, .channel-panel .artist-select select { min-height: 44px; margin: 0; border: 0; border-radius: var(--r-sm); background: var(--surface-1); font-size: var(--fs-14); }
.channel-panel .artist-select a { margin: 0; color: var(--text-2); font-size: var(--fs-14); white-space: nowrap; }
.channel-panel .artist-select input:focus-visible, .channel-panel .artist-select select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.guide-section { padding-top: var(--sp-8); }
.guide-section > .section-head .eyebrow { display: none; }
.guide-section > .section-head { margin-bottom: var(--sp-3); }
.guide-section > .section-head h2 { margin: 0; font-size: var(--fs-20); }
.section-note { margin-bottom: var(--sp-3); color: var(--text-3); }
.guide-selection { margin: 0 0 var(--sp-3); color: var(--text-2); }
.guide-scroll {
  --guide-rail-width: 72px;
  position: relative;
  display: grid;
  grid-template-columns: var(--guide-rail-width) minmax(760px, 1fr);
  max-height: min(560px, 70vh);
  min-height: 420px;
  overflow: auto;
  border: 0;
  border-radius: var(--r-md);
  background: var(--surface-1);
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  isolation: isolate;
}
.guide-time-rail { position: sticky; top: 0; left: 0; z-index: 9; min-height: 100%; border-right: 1px solid var(--line); background: var(--surface-1); }
.guide-time-head { top: 0; z-index: 10; min-height: 64px; padding: var(--sp-2); border-bottom: 1px solid var(--line); background: var(--surface-1); color: var(--text-2); }
.guide-time-head small { color: var(--text-3); }
.guide-time-tick { height: 240px; min-height: 240px; padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--line); color: var(--text-3); }
.guide-time-tick strong, .guide-time-tick small { font-size: var(--fs-12); }
.guide-time-tick small { color: var(--text-3); }
.guide-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 760px; min-height: var(--guide-column-height, 0px); border: 0; background: var(--surface-1); }
.guide-columns.mix-guide { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.guide-column { position: relative; min-width: 0; height: var(--guide-column-height, auto); border-left: 1px solid var(--line); background: var(--surface-1); }
.guide-column:first-child { border-left: 0; }
.guide-heading { position: sticky; top: 0; z-index: 6; display: flex; min-height: 64px; padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); border: 0; border-bottom: 1px solid var(--line); background: var(--surface-1); box-shadow: none; }
.guide-heading .channel-num { flex: 0 0 auto; color: var(--text-3); font-size: var(--fs-20); }
.guide-heading strong { color: var(--text-1); font-size: var(--fs-14); }
.guide-heading small { color: var(--text-3); font-size: var(--fs-12); }
.guide-heading.active { background: var(--surface-1); box-shadow: inset 0 -2px var(--accent); }
.guide-heading.active .channel-num { color: var(--accent); }
.guide-heading.active strong { color: var(--text-1); }
.guide-program { container-type: size; box-sizing: border-box; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-content: start; gap: 2px var(--sp-2); padding: 4px var(--sp-2); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface-1); }
.guide-program:hover { background: var(--surface-2); }
.guide-program.past { background: var(--surface-1); opacity: 1; }
.program-time { grid-row: 1; color: var(--text-3); font-size: var(--fs-12); line-height: 1.2; }
.program-time small { margin-top: 2px; color: var(--text-3); font-size: var(--fs-12); line-height: 1.2; }
.program-detail { min-width: 0; }
.program-detail strong { display: -webkit-box; overflow: hidden; color: var(--text-1); font-size: var(--fs-14); font-weight: 500; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.program-detail > small { display: block; overflow: hidden; margin-top: 2px; color: var(--text-3); font-size: var(--fs-12); line-height: 1.25; text-overflow: ellipsis; }
.guide-program.current { z-index: 2; background: rgb(255 77 109 / .10); box-shadow: inset 3px 0 var(--accent); opacity: 1; }
.guide-program.current .program-detail strong::before { display: inline-block; margin: 0 var(--sp-1) 2px 0; padding: 1px 5px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); content: "放送中"; font-size: var(--fs-12); font-weight: 700; line-height: 1.4; vertical-align: baseline; }
@container (max-height: 56px) { .program-detail { display: none; } }
@container (max-height: 30px) { .program-time small { display: none; } }
@container (max-height: 18px) { .program-time { display: none; } }
.guide-empty { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: grid; min-height: 120px; place-items: center; color: var(--text-3); font-size: var(--fs-14); pointer-events: none; }
.guide-now-line { z-index: 8; border-top: 2px solid var(--onair); }
.guide-now-line span { top: -13px; border-radius: var(--r-pill); background: var(--onair); color: var(--accent-ink); }
.guide-groups { gap: 0; border: 0; border-radius: var(--r-sm); background: var(--surface-1); }
.guide-groups button { min-height: 40px; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--r-sm); font-size: var(--fs-14); }
.guide-groups button[aria-pressed="true"] { background: var(--surface-2); color: var(--text-1); box-shadow: inset 0 2px var(--accent); }
.guide-groups button + button { border: 0; }
.guide-controls > button { min-height: 40px; min-width: 40px; border: 0; border-radius: var(--r-sm); background: var(--surface-1); }
.guide-controls > button[hidden], #guide-page[hidden] { display: none !important; }
#guide-page { min-width: 32px; color: var(--text-3); }
@media (max-width: 1179px) {
  .channel-panel .artist-select { grid-template-columns: auto minmax(120px, 1fr) minmax(150px, 1fr); }
  .channel-panel .artist-select a { grid-column: 2 / 4; }
}
@media (max-width: 850px) {
  .guide-scroll { --guide-rail-width: 58px; grid-template-columns: 58px minmax(min(80vw, 280px), 1fr); max-height: min(560px, 70vh); min-height: 360px; }
  .guide-columns { grid-template-columns: repeat(5, minmax(min(80vw, 280px), 1fr)); min-width: calc(5 * min(80vw, 280px)); }
  .guide-columns.mix-guide { grid-template-columns: repeat(5, minmax(min(80vw, 280px), 1fr)); }
  .guide-columns:not(.mix-guide) { grid-template-columns: repeat(3, minmax(min(80vw, 280px), 1fr)); min-width: calc(3 * min(80vw, 280px)); }
  .guide-heading { min-height: 64px; }
  .guide-program { grid-template-columns: 40px minmax(0, 1fr); padding-inline: 6px; }
}
@media (max-width: 600px) {
  .channel-panel { margin-top: var(--sp-6); }
  .channel-panel .panel-heading h2, .guide-section > .section-head h2 { font-size: var(--fs-20); }
  .channel-panel .artist-select { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); }
  .channel-panel .artist-select label, .channel-panel .artist-select a { grid-column: 1 / -1; }
  .channel-panel .artist-select a { justify-self: start; }
  .guide-section > .section-head { align-items: flex-start; }
  .guide-controls { width: auto; justify-content: flex-start; }
  .guide-groups { flex: 0 1 auto; }
  .guide-groups button { min-height: 40px; padding: 6px; font-size: var(--fs-12); }
  .guide-program { grid-template-columns: 38px minmax(0, 1fr); }
}

/* Phase 4: continuous artist/library directories and a quiet lower-page finish. */
.artists-section, .catalog-section { padding-top: var(--sp-8); }
.artists-section > .section-head, .catalog-section > .section-head { margin-bottom: var(--sp-3); }
.artists-section > .section-head .eyebrow, .catalog-section > .section-head .eyebrow { display: none; }
.artists-section > .section-head h2, .catalog-section > .section-head h2 { margin: 0; font-size: var(--fs-20); }
.artist-header-tools { display: grid; justify-items: end; gap: var(--sp-2); }
.artist-note { margin: 0; color: var(--text-3); font-size: var(--fs-12); text-align: right; }
.ranking-line { justify-content: flex-end; margin: 0 0 var(--sp-3); color: var(--text-3); font-size: var(--fs-12); }
.ranking-line p { display: none; }
.artist-scroll, .library-scroll { height: auto; min-height: 0; max-height: none; overflow: visible; overscroll-behavior: auto; scrollbar-gutter: auto; padding: 0; border: 0; border-radius: 0; background: transparent; }
.artist-scroll .artist-grid, .library-scroll .video-library { padding: 0; }
.artist-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-4); }
.artist-card { overflow: visible; border: 0; border-radius: 0; background: transparent; transition: none; }
.artist-card:hover, .artist-card.active { border: 0; box-shadow: none; }
.artist-thumb { aspect-ratio: 16 / 9; border-radius: var(--r-sm); }
.artist-thumb::after { position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgb(0 0 0 / .6)); content: ""; pointer-events: none; }
.artist-thumb img { transition: transform .2s; }
.artist-card:hover .artist-thumb img { transform: scale(1.04); }
.artist-thumb .rank-badge { top: var(--sp-2); left: var(--sp-2); z-index: 1; padding: 3px 6px; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.artist-card:not(.top-three) .rank-badge { display: none; }
.artist-thumb .thumb-play { z-index: 1; opacity: 0; transition: opacity .15s; }
.artist-card:hover .thumb-play, .artist-thumb:focus-visible .thumb-play { opacity: 1; }
.artist-info { padding: var(--sp-2) 0 0; }
.artist-name-row { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.artist-name-row button { flex: 0 1 auto; min-width: 0; min-height: 0; padding: 0; font-size: var(--fs-16); font-weight: 700; line-height: 1.4; text-align: left; }
.artist-name-row button:hover { text-decoration: underline; text-underline-offset: 3px; }
.artist-card:not(.top-three) .artist-rank-number { flex: 0 0 auto; color: var(--text-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.artist-card.top-three .artist-rank-number { display: none; }
.artist-name-row .male-text, .artist-name-row .female-text { flex: 0 0 auto; margin-left: auto; font-size: var(--fs-12); white-space: nowrap; }
.artist-info .artist-channel-row { display: none; }
.artist-info .artist-stats { display: block; overflow: hidden; margin: var(--sp-1) 0 0; color: var(--text-3); font-size: var(--fs-12); text-overflow: ellipsis; white-space: nowrap; }
#artist-filters { width: max-content; border: 0; border-radius: var(--r-sm); background: var(--surface-1); }
#artist-filters button { min-height: 36px; padding: 6px var(--sp-3); border: 0; border-radius: var(--r-sm); font-size: var(--fs-12); }
#artist-filters button[aria-pressed="true"] { background: var(--surface-2); color: var(--text-1); box-shadow: inset 0 2px var(--accent); }
#artist-filters button + button { border: 0; }
.more-button { min-width: 220px; min-height: 44px; margin: var(--sp-6) auto 0; padding: var(--sp-2) var(--sp-6); border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-1); font-size: var(--fs-14); }
.more-button:hover { background: var(--surface-3); }
#library-count { color: var(--text-2); font-size: var(--fs-14); }
.video-library { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-4); }
.library-video { border: 0; border-radius: 0; background: transparent; }
.library-image { aspect-ratio: 16 / 9; border-radius: var(--r-sm); }
.library-image .duration { right: var(--sp-2); bottom: var(--sp-2); padding: 2px 6px; border-radius: var(--r-sm); background: rgb(0 0 0 / .75); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.library-video > strong { display: -webkit-box; overflow: hidden; margin-top: var(--sp-2); font-size: var(--fs-14); font-weight: 500; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.library-video > small { margin-top: var(--sp-1); color: var(--text-3); font-size: var(--fs-12); }
.library-video:hover > strong { color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; }
.library-scroll .more-button { margin-top: var(--sp-6); }
.amazon-inline-ad { position: static; z-index: auto; display: block; width: 100%; max-width: none; height: 96px; max-height: 96px; margin: var(--sp-6) 0; padding: 0; overflow: hidden; border: 0; border-radius: var(--r-md); background: var(--surface-1); }
.amazon-inline-ad-inner { display: grid; grid-template-columns: auto 96px minmax(140px, 1fr) minmax(190px, 1.2fr); align-items: center; gap: var(--sp-4); width: 100%; height: 100%; max-height: 96px; padding: var(--sp-3) var(--sp-6); }
.amazon-inline-copy { display: contents; }
.amazon-inline-copy > h2 { display: none; }
.amazon-inline-copy > .ad-slot-label { grid-column: 1; grid-row: 1; align-self: start; color: var(--text-3); font-size: var(--fs-12); }
.amazon-inline-banner { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; min-height: 64px; margin: 0; padding: var(--sp-1); border: 0; border-radius: var(--r-sm); background: transparent; box-shadow: none; }
.amazon-inline-ad .amazon-inline-banner .amazon-official-logo { width: 96px; max-width: 96px; max-height: 28px; margin: 0; filter: none; }
.amazon-inline-ad .amazon-banner-cta { display: block; margin: 2px 0 0; padding: 2px 6px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-1); font-size: var(--fs-12); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.amazon-inline-copy > p { grid-column: 3; grid-row: 1; overflow: hidden; margin: 0; color: var(--text-2); font-size: var(--fs-14); text-overflow: ellipsis; white-space: nowrap; }
.amazon-inline-note { grid-column: 4; grid-row: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: center; gap: 0 var(--sp-2); overflow: hidden; color: var(--text-3); font-size: var(--fs-12); line-height: 1.35; text-align: right; }
.amazon-inline-note small { font-size: var(--fs-12); }
.amazon-inline-note a { flex: 0 0 100%; color: var(--text-3); font-size: var(--fs-12); }
.sources-section { padding: var(--sp-8) 0; }
.sources-section details { padding: var(--sp-4) 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.sources-section summary { display: flex; align-items: center; justify-content: space-between; color: var(--text-2); font-size: var(--fs-14); font-weight: 500; list-style: none; cursor: pointer; }
.sources-section summary::-webkit-details-marker { display: none; }
.sources-section summary::after { color: var(--text-3); content: "+"; font-size: var(--fs-20); }
.sources-section details[open] summary::after { content: "−"; }
.source-content { padding-top: var(--sp-4); color: var(--text-2); font-size: var(--fs-14); }
.source-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.source-item { padding: var(--sp-3); border: 0; border-radius: 0; border-top: 1px solid var(--line); background: transparent; color: var(--text-3); }
.source-item > a { color: var(--text-2); }
footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand nav" "legal legal"; align-items: center; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-8); padding: var(--sp-12) max(var(--gutter), calc((100vw - var(--container-wide)) / 2)); border-top: 1px solid var(--line); background: transparent; }
.footer-main { grid-area: brand; display: flex; align-items: baseline; gap: var(--sp-4); }
.footer-brand { color: var(--text-1); font-size: var(--fs-16); }
.footer-main > span { color: var(--text-3); font-size: var(--fs-12); }
footer nav { grid-area: nav; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-3); }
footer nav a { color: var(--text-2); font-size: var(--fs-12); }
footer nav a:hover { color: var(--text-1); }
.footer-affiliate { grid-area: legal; margin: 0; color: var(--text-3); font-size: var(--fs-12); }
.amazon-inline-banner .amazon-banner-label { display: none; }
@media (max-width: 1179px) {
  .artist-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .artist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .video-library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amazon-inline-ad { height: 96px; }
  .amazon-inline-ad-inner { grid-template-columns: auto 96px minmax(0, 1fr) minmax(160px, 1fr); gap: var(--sp-3); padding-inline: var(--sp-4); }
  .source-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer { grid-template-columns: 1fr; grid-template-areas: "brand" "nav" "legal"; padding-block: var(--sp-8); }
  footer nav { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .artists-section > .section-head { display: grid; align-items: start; }
  .artist-header-tools { justify-items: start; }
  .artist-note { text-align: left; }
  .artist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-3); }
  .artist-name-row { gap: 5px; }
  .artist-name-row button { font-size: var(--fs-14); }
  .artist-name-row .male-text, .artist-name-row .female-text { font-size: var(--fs-12); }
  .amazon-inline-ad { height: auto; max-height: none; min-height: 96px; overflow: visible; }
  .amazon-inline-ad-inner { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: var(--sp-2) var(--sp-3); height: auto; max-height: none; padding: var(--sp-3); }
  .amazon-inline-copy > .ad-slot-label { grid-column: 1; grid-row: 1; }
  .amazon-inline-banner { grid-column: 1; grid-row: 2; width: 64px; min-height: 44px; }
  .amazon-inline-ad .amazon-inline-banner .amazon-official-logo { width: 64px; max-width: 64px; max-height: 22px; }
  .amazon-inline-ad .amazon-banner-cta { white-space: normal; text-align: center; }
  .amazon-inline-copy > p { grid-column: 2; grid-row: 1; white-space: normal; }
  .amazon-inline-note { grid-column: 2; grid-row: 2; justify-content: flex-start; text-align: left; }
  .source-list { grid-template-columns: 1fr; }
  .footer-main { align-items: flex-start; flex-direction: column; gap: var(--sp-1); }
  footer nav { gap: var(--sp-2) var(--sp-3); }
}

/* Phase 5: consistent responsive thresholds and usable touch targets. */
.site-header nav a { min-width: 44px; min-height: 44px; justify-content: center; }
.player-controls button { min-height: 44px; }
.player-controls a, .video-meta > a, footer nav a { display: inline-flex; min-height: 44px; align-items: center; }
.guide-groups button, .guide-controls > button, #artist-filters button { min-height: 44px; }
.guide-controls > button { min-width: 44px; }
.artist-name-row button { min-width: 44px; min-height: 44px; }
footer nav a { padding-inline: var(--sp-1); }