/* Base variables, reset and accessibility defaults */
/*
 * Coast Internet Radio
 * stylesheet
 */

/* Reset & root */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg: #01070d;
  --panel-1: rgba(8, 27, 40, 0.96);
  --panel-2: rgba(3, 12, 19, 0.97);
  --gold: #d58a18;
  --gold-light: #ffd56c;
  --gold-bright: #ffd66a;
  --gold-dark: #bd7111;
  --cream: #fff1dd;
  --muted: #d3c8ba;
  --line: rgba(213, 138, 24, 0.58);
  --line-soft: rgba(213, 138, 24, 0.42);
  --green: #48dc72;
  --green-dark: #1f8a47;
  --red: #ff6b6b;
  --red-dark: #b63232;
  --amber: #ffb84d;
  --warn-bg: rgba(255, 95, 95, 0.12);
  --warn-border: rgba(255, 95, 95, 0.35);
  --warn-text: #ffd4d4;

  --radius-lg: 18px;
  --radius-md: 15px;
  --radius-sm: 12px;
  --shell-max: 1180px;
  --shell-pad: 24px;

  --font-serif: Georgia, "Times New Roman", Times, serif;
  --font-script: "Brush Script MT", "Segoe Script", cursive;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

  --base-font-size: 17px;
  --motion: 1;
}

html[data-text="large"]    { --base-font-size: 19px; }
html[data-text="x-large"]  { --base-font-size: 21px; }
html[data-text="xx-large"] { --base-font-size: 23px; }

html[data-text="large"] body,
html[data-text="x-large"] body,
html[data-text="xx-large"] body {
  font-size: 1rem;
}

html[data-contrast="high"] {
  --bg: #000;
  --panel-1: #0a1218;
  --panel-2: #050a0e;
  --cream: #fff;
  --muted: #f5ecd8;
  --gold-light: #ffe082;
  --gold: #ffb84d;
  --line: rgba(255, 224, 130, 0.85);
  --line-soft: rgba(255, 224, 130, 0.55);
  --green: #6fff90;
  --red: #ff8a8a;
}

html[data-contrast="high"] body { background: #000; }

html[data-contrast="high"] .about-strip p,
html[data-contrast="high"] .schedule-card p,
html[data-contrast="high"] .support-panel p,
html[data-contrast="high"] .news-body,
html[data-contrast="high"] .news-date,
html[data-contrast="high"] .info-page p {
  color: #fff;
}

html[data-contrast="high"] .news-item {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 224, 130, 0.4);
}

html[data-contrast="high"] .player-note { color: #fff; }
html[data-contrast="high"] .how-panel li { border-bottom-color: rgba(255, 255, 255, 0.3); }

html[data-contrast="high"] .np-icon,
html[data-contrast="high"] .a11y-options button {
  background: rgba(255, 255, 255, 0.12);
}

html[data-contrast="high"] a { text-decoration: underline; }

html[data-theme="light"]:not([data-contrast="high"]) {
  --bg: #f7efe2;
  --panel-1: rgba(255, 250, 240, 0.98);
  --panel-2: rgba(249, 239, 222, 0.98);
  --cream: #20160d;
  --muted: #6d5f50;
  --line: rgba(171, 111, 24, 0.62);
  --line-soft: rgba(171, 111, 24, 0.34);
}

html[data-theme="light"]:not([data-contrast="high"]) body {
  background:
    radial-gradient(circle at 45% -10%, rgba(213, 138, 24, 0.18), transparent 32rem),
    linear-gradient(180deg, #fff8ee, #f7efe2 52%, #efe2cf);
}

html[data-theme="light"]:not([data-contrast="high"]) .site-header {
  background: rgba(255, 248, 237, 0.94);
}

html[data-theme="light"]:not([data-contrast="high"]) .live-badge {
  color: #fff1dd;
}

html[data-theme="light"]:not([data-contrast="high"]) .a11y-dialog,
html[data-theme="light"]:not([data-contrast="high"]) .modal-dialog {
  background: linear-gradient(180deg, #fff9ee, #f3e5cf);
}


html[data-font="dyslexic"] {
  --font-body: "OpenDyslexic", "Comic Sans MS", "Verdana", sans-serif;
  --font-serif: "OpenDyslexic", "Verdana", sans-serif;
  --font-script: "OpenDyslexic", "Verdana", sans-serif;
}

html[data-font="dyslexic"] body {
  letter-spacing: 0.02em;
  line-height: 1.7;
}

html[data-motion="reduced"] { --motion: 0; }

html {
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: var(--base-font-size);
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 45% -10%, rgba(32, 74, 99, 0.38), transparent 32rem),
    var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

main,
section,
article,
.shell,
.hero-words,
.player-top > *,
.np-row > *,
.action-row > a,
.action-row > button,
.about-strip > *,
.how-panel li > *,
.footer-inner > * {
  min-width: 0;
}

img { display: block; max-width: 100%; height: auto; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }

a {
  color: var(--gold-light);
  text-underline-offset: 0.22em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px rgba(255, 213, 108, 0.55);
  border-radius: var(--radius-sm);
}

.shell {
  width: min(100% - var(--shell-pad), var(--shell-max));
  margin-inline: auto;
}

/* Skip link & sr-only */
.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 999;
  transform: translateY(-150%);
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: var(--gold-light);
  color: #111;
  font-weight: 900;
  text-decoration: none;
  transition: transform calc(0.2s * var(--motion)) ease;
}

.skip-link:focus { transform: translateY(0); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Header, live status pills and hero banner */
/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(1, 7, 13, 0.94);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.header-inner {
  min-height: 88px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 0;
}

.header-spacer { }

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  text-decoration: none;
}

.wordmark img {
  width: 74px;
  height: 74px;
  object-fit: cover;
  border-radius: 50%;
  filter: drop-shadow(0 0 14px rgba(255, 213, 108, 0.18));
  transition: transform calc(0.3s * var(--motion)) ease;
}

.wordmark:hover img { transform: scale(1.04); }

.support-header {
  justify-self: end;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.4rem;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dark));
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.35),
    0 12px 28px rgba(0, 0, 0, 0.28);
  white-space: nowrap;
  transition: filter calc(0.15s * var(--motion)) ease, transform calc(0.15s * var(--motion)) ease;
}

.support-header:hover { filter: brightness(1.08); }
.support-header:active { transform: translateY(1px); }

.a11y-toggle {
  min-width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(8, 27, 40, 0.7);
  color: var(--gold-light);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 0.85rem;
  transition: background calc(0.2s * var(--motion)) ease;
}

html[data-text="large"]    .a11y-toggle { font-size: 1.25rem; }
html[data-text="x-large"]  .a11y-toggle { font-size: 1.1rem; }
html[data-text="xx-large"] .a11y-toggle { font-size: 1rem; }

.a11y-toggle:hover { background: rgba(13, 43, 63, 0.95); }

/* Live status pill */
.status-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.status-pill .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 9px;
  position: relative;
}

.status-pill[data-state="online"] {
  background: rgba(72, 220, 114, 0.12);
  border-color: rgba(72, 220, 114, 0.4);
  color: var(--green);
}

.status-pill[data-state="online"] .dot {
  background: var(--green);
}

.status-pill[data-state="online"] .dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  background: rgba(72, 220, 114, 0.28);
  animation: pulse-green calc(2s * var(--motion)) ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes pulse-green {
  0%   { transform: scale(0.55); opacity: 0.8; }
  70%  { transform: scale(2.35); opacity: 0; }
  100% { transform: scale(2.35); opacity: 0; }
}

.status-pill[data-state="offline"] {
  background: rgba(255, 107, 107, 0.12);
  border-color: rgba(255, 107, 107, 0.4);
  color: var(--red);
}

.status-pill[data-state="offline"] .dot { background: var(--red); }

.status-pill[data-state="checking"] {
  background: rgba(255, 184, 77, 0.12);
  border-color: rgba(255, 184, 77, 0.4);
  color: var(--amber);
}

.status-pill[data-state="checking"] .dot {
  background: var(--amber);
  animation: pulse-amber calc(1.4s * var(--motion)) ease-in-out infinite;
}

@keyframes pulse-amber {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Hero */
.hero-card {
  margin-top: 1rem;
  min-height: clamp(220px, 32vw, 340px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(90deg,
      rgba(1, 7, 13, 0.98) 0%,
      rgba(1, 7, 13, 0.98) 42%,
      rgba(1, 7, 13, 0.10) 56%,
      rgba(1, 7, 13, 0) 100%),
    url("assets/images/jim-hero-studio-v16-face-fix.webp") 70% center / cover no-repeat;
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 50%,
    rgba(8, 18, 32, 0.18) 65%,
    rgba(8, 18, 32, 0.22) 100%);
}

.hero-words {
  position: relative;
  z-index: 2;
  width: min(60%, 560px);
  padding: clamp(1rem, 3vw, 2.1rem) clamp(0.85rem, 2.5vw, 1.8rem);
}

.hero-words h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 6vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-shadow: 0 4px 26px #000;
}

.script {
  font-family: var(--font-script);
  color: var(--gold-light);
}

.hero-words .script {
  font-size: clamp(1.5rem, 3.5vw, 3rem);
  margin: 0.5rem 0 0.35rem;
}

.place {
  margin: 0.35rem 0 0;
  color: var(--gold-light);
  font-size: clamp(0.85rem, 1.8vw, 1.4rem);
}


.a11y-toggle-label {
  font-size: 0.78rem;
  font-weight: 800;
}

/* Shared surfaces and live player card */
/* Shared card surface */
.player-card,
.about-strip,
.schedule-card,
.how-panel,
.support-panel,
.news-card,
.action-row > a,
.action-row > .action-button {
  background: linear-gradient(180deg, var(--panel-1), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
}

/* Player card */
.player-card {
  margin-top: 1rem;
  padding: clamp(1rem, 2.5vw, 1.8rem) clamp(1rem, 3vw, 2.1rem);
}

.player-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.7rem, 2vw, 1.55rem);
}

.play-button {
  width: clamp(82px, 16vw, 160px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: clamp(3px, 0.6vw, 5px) solid #fff;
  background: linear-gradient(145deg, #ffde72, #d98a16);
  display: grid;
  place-items: center;
  color: #06101a;
  font-size: clamp(2rem, 5vw, 4rem);
  touch-action: manipulation;
  user-select: none;
  box-shadow:
    0 0 0 8px rgba(213, 138, 24, 0.18),
    0 0 40px rgba(255, 213, 108, 0.25);
  transition: transform calc(0.15s * var(--motion)) ease,
              box-shadow calc(0.3s * var(--motion)) ease;
}

.play-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 8px rgba(213, 138, 24, 0.22),
    0 8px 50px rgba(255, 213, 108, 0.35);
}

.play-button:active { transform: scale(0.96); }

.play-button.is-playing {
  background: linear-gradient(145deg, #92ffb8, #28bb62);
  animation: gentle-pulse calc(2.5s * var(--motion)) ease-in-out infinite;
}

@keyframes gentle-pulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(72, 220, 114, 0.22), 0 0 40px rgba(72, 220, 114, 0.28); }
  50%      { box-shadow: 0 0 0 12px rgba(72, 220, 114, 0.14), 0 0 60px rgba(72, 220, 114, 0.4); }
}

.play-copy h2 {
  margin: 0 0 0.4rem;
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 4vw, 4rem);
  line-height: 1;
}

.play-subtitle {
  margin: 0.2rem 0;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
}

.live-badge {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--gold-light);
  font-size: clamp(0.95rem, 1.8vw, 1.45rem);
  font-weight: 900;
}

.live-badge span {
  width: clamp(34px, 5vw, 66px);
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.volume-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(0.55rem, 1.5vw, 1.1rem);
  align-items: center;
  margin: 1.25rem 0 1rem;
}

.volume-line span {
  font-family: var(--font-emoji);
  font-size: clamp(1.1rem, 2vw, 1.65rem);
}

.volume-line input {
  width: 100%;
  height: 36px;
  accent-color: var(--gold-light);
}

.player-note {
  margin: 0 0 1.1rem;
  color: var(--muted);
  font-size: clamp(0.9rem, 1.8vw, 1rem);
}

.player-note.warn {
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-text);
}

.now-playing {
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}

.section-title {
  margin: 0 0 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--gold-light);
  font-weight: 900;
  font-size: 0.95rem;
}

.np-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 0.65rem;
  align-items: center;
  margin: 0.35rem 0;
  font-size: clamp(0.95rem, 1.7vw, 1.15rem);
}

.np-icon {
  width: 32px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  color: var(--gold-light);
  font-family: var(--font-emoji);
}

.np-row strong { color: #fff; }
.np-row > span:last-child { color: var(--gold-light); }

.extra-playlist {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 1rem;
}

.mini-label {
  margin: 0 0 0.35rem;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 900;
  font-size: 0.78rem;
}

#coming-up {
  display: block;
  color: var(--cream);
}

#previous-list {
  margin: 0.15rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
}

#previous-list li { margin: 0.15rem 0; }
#previous-list li.placeholder { color: var(--muted); }

/* Quick actions, schedule, news, about and support panels */
/* Action row */
.action-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.55rem, 1.5vw, 1rem);
  margin-top: 1rem;
}

.action-row > a,
.action-row > .action-button {
  min-height: clamp(94px, 14vw, 138px);
  text-align: center;
  display: grid;
  place-items: center;
  padding: 1rem;
  color: #fff;
  text-decoration: none;
  transition: background calc(0.2s * var(--motion)) ease,
              transform calc(0.1s * var(--motion)) ease;
}

.action-row > .action-button {
  cursor: pointer;
  font: inherit;
  width: 100%;
}

.action-row > a:hover,
.action-row > .action-button:hover {
  background: linear-gradient(180deg, rgba(13, 43, 63, 0.98), rgba(4, 16, 24, 0.98));
  transform: translateY(-2px);
}

.action-row > a:active,
.action-row > .action-button:active {
  transform: translateY(1px);
}

.action-icon {
  font-family: var(--font-emoji);
  font-size: clamp(2rem, 4vw, 2.65rem);
  color: var(--gold-light);
  line-height: 1;
}

.action-row strong,
.action-row .action-sub {
  display: block;
}

.action-row strong {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
}

.action-row .action-sub {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: clamp(0.8rem, 1.4vw, 1rem);
}

/* Schedule */
.schedule-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr);
  gap: clamp(0.9rem, 2.4vw, 1.5rem);
  align-items: center;
  margin-top: 1rem;
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 3vw, 1.8rem);
  position: relative;
  overflow: hidden;
}

.schedule-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 213, 108, 0.11), transparent 14rem),
    linear-gradient(90deg, rgba(255, 213, 108, 0.035), transparent 55%);
}

.schedule-copy,
.schedule-times {
  position: relative;
  z-index: 1;
}

.schedule-card h2 {
  margin: 0.1rem 0 0.45rem;
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.7vw, 2.05rem);
  color: var(--cream);
}

.schedule-card p {
  margin: 0;
  color: #f0e4d2;
  font-size: clamp(0.92rem, 1.7vw, 1.02rem);
}

.schedule-times {
  display: grid;
  gap: 0.65rem;
}

.schedule-time {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 213, 108, 0.2);
}

.schedule-days {
  display: block;
  color: var(--gold-light);
  font-weight: 900;
  letter-spacing: 0.015em;
}

.schedule-time strong {
  display: block;
  color: #fff;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  line-height: 1.15;
  white-space: nowrap;
}

/* News */
.news-card {
  margin-top: 1rem;
  padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1rem, 3vw, 1.6rem);
  border-radius: var(--radius-lg);
}

.news-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}

.news-head .section-title { margin: 0; }

.news-flag {
  display: inline-grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dark));
  color: #1a0d00;
  font-weight: 900;
  font-size: 1.1rem;
}

.news-items {
  display: grid;
  gap: 1rem;
}

.news-item {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 213, 108, 0.12);
}

.news-item h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--gold-light);
}

.news-date {
  margin: 0 0 0.45rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(243, 226, 196, 0.6);
}

.news-body {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(243, 226, 196, 0.92);
}

.news-link {
  display: inline-block;
  font-weight: 700;
  color: var(--gold-light);
  text-decoration: underline;
}

.news-card.is-empty {
  padding-block: clamp(0.9rem, 2vw, 1.15rem);
}

.news-card.is-empty .news-head {
  margin-bottom: 0.65rem;
}

.news-empty {
  padding: 0.75rem 0.9rem;
}

.news-empty .news-body {
  margin-bottom: 0;
}

/* About strip */
.about-strip {
  display: grid;
  grid-template-columns: clamp(120px, 22vw, 245px) 1fr;
  gap: clamp(0.95rem, 2vw, 1.6rem);
  align-items: center;
  margin-top: 1rem;
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1rem, 3vw, 1.8rem);
}

.about-strip img {
  border-radius: var(--radius-sm);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.about-strip h2 {
  margin: 0.2rem 0 0.55rem;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
}

.about-strip p {
  margin: 0.45rem 0;
  color: #f0e4d2;
  font-size: clamp(0.95rem, 1.8vw, 1rem);
}

.signoff {
  margin: 0;
  font-size: clamp(1.55rem, 3vw, 2.1rem);
}

/* Bottom panels */
.bottom-panels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.how-panel,
.support-panel {
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1rem, 2.5vw, 1.6rem);
}

.how-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.how-panel li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.9rem;
  align-items: center;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.how-panel li:last-child { border-bottom: 0; }

.how-panel li > .how-icon {
  font-family: var(--font-emoji);
  color: var(--gold-light);
  font-size: 1.85rem;
  text-align: center;
}

.how-panel strong,
.how-panel .how-sub {
  display: block;
}

.how-panel .how-sub { color: var(--muted); }

.support-panel { text-align: center; }

.heart {
  font-size: 3.2rem;
  color: var(--gold-light);
  line-height: 1;
}

.support-panel h2 {
  margin: 0.1rem 0;
  font-size: clamp(2.5rem, 6vw, 3.35rem);
}

.support-panel p { color: #f0e4d2; }

.support-panel a {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem auto;
  padding: 0 1.2rem;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dark));
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 700;
  max-width: 380px;
  transition: filter calc(0.15s * var(--motion)) ease, transform calc(0.15s * var(--motion)) ease;
}

.support-panel a:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.support-panel a:active { transform: translateY(1px); }

.support-script {
  margin: 0;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
}

/* Footer, licence logos and static information pages */
/* Footer */
.site-footer {
  margin-top: 1rem;
  padding: 1.2rem 0 2rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
}

.footer-mark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: #fff;
}

.footer-mark img {
  width: clamp(56px, 8vw, 74px);
  height: clamp(56px, 8vw, 74px);
  object-fit: cover;
  border-radius: 50%;
}

.socials {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.socials a {
  width: 48px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #102337;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  font-size: 1.15rem;
  line-height: 1;
  font-family: var(--font-body);
  transition: background calc(0.2s * var(--motion)) ease,
              transform calc(0.15s * var(--motion)) ease;
}

.socials a[href^="mailto:"] {
  font-size: 1.3rem;
  font-weight: 400;
}

.socials a:hover {
  background: #1a3654;
  transform: translateY(-2px);
}

.site-footer nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.site-footer nav a {
  color: var(--cream);
  text-decoration: none;
}

.site-footer nav a:hover { color: var(--gold-light); }

.site-footer nav .footer-link-button {
  color: var(--cream);
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.site-footer nav .footer-link-button:hover,
.site-footer nav .footer-link-button:focus-visible {
  color: var(--gold-light);
  text-decoration: underline;
}

.site-footer nav a:not(:last-child)::after,
.site-footer nav .footer-link-button:not(:last-child)::after {
  content: "";
  display: inline-block;
  height: 1.1rem;
  width: 1px;
  background: var(--gold);
  margin-left: 0.85rem;
  vertical-align: middle;
}

.site-footer p {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  margin: 0.85rem 0 0;
  font-size: 0.92rem;
}

/* Real PRS / PPL logo area */
.licensed-by {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: rgba(243, 226, 196, 0.62);
}

.licensed-label {
  letter-spacing: 0.02em;
}

.licensed-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.25rem 0.45rem;
  border-radius: 12px;
  background: transparent;
  text-decoration: none;
  opacity: 0.95;
  transition: opacity calc(0.2s * var(--motion)) ease, transform calc(0.15s * var(--motion)) ease;
}

.licensed-logo-link:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.licensed-logo {
  display: block;
  height: 42px;
  width: auto;
  max-width: 132px;
  object-fit: contain;
}

.licensed-logo-prs {
  height: 42px;
}

.licensed-logo-ppl {
  height: 42px;
}

/* Static info pages */
.info-page {
  margin-top: 1.5rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  background: linear-gradient(180deg, var(--panel-1), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.info-page h1 {
  font-family: var(--font-serif);
  margin: 0.4rem 0 1rem;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
}

.info-page h2 {
  font-family: var(--font-serif);
  margin: 1.4rem 0 0.4rem;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  color: var(--gold-light);
}

.info-page p {
  margin: 0.7rem 0;
  line-height: 1.6;
}

.info-page ul {
  padding-left: 1.4rem;
  line-height: 1.6;
}

.info-page .back-link {
  display: inline-block;
  margin-top: 1.4rem;
  padding: 0.7rem 1.2rem;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dark));
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 700;
}

/* Banners, dialogs, request form and accessibility dialog */
/* Banners */
.banner {
  margin: 1rem 0 0;
  padding: 0.95rem 1.15rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.banner.no-js {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-text);
}

.banner.lang {
  background: rgba(213, 138, 24, 0.12);
  border: 1px solid rgba(213, 138, 24, 0.4);
  color: var(--cream);
}

.banner p {
  margin: 0;
  flex: 1 1 18rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.banner a,
.banner button {
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
  background: var(--gold-light);
  color: #111;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 0;
  font-weight: 700;
  text-decoration: none;
  white-space: normal;
}

.banner button.dismiss {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
}

/* Modal dialogs */
.modal-panel,
.a11y-panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  overflow-y: auto;
  overflow-x: hidden;
  visibility: hidden;
  opacity: 0;
  transition: opacity calc(0.18s * var(--motion)) ease,
              visibility 0s linear calc(0.18s * var(--motion));
}

.modal-panel[open],
.a11y-panel[open] {
  visibility: visible;
  opacity: 1;
  transition: opacity calc(0.18s * var(--motion)) ease;
}

.modal-panel[hidden],
.a11y-panel[hidden] {
  display: none;
}

.modal-dialog,
.a11y-dialog {
  width: min(420px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  max-width: 100%;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--panel-1), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.4rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  position: relative;
  transform: translateY(-6px);
  transition: transform calc(0.2s * var(--motion)) ease;
}

.modal-panel[open] .modal-dialog,
.a11y-panel[open] .a11y-dialog {
  transform: translateY(0);
}

.a11y-dialog {
  width: min(390px, calc(100vw - 2rem));
  max-width: 100%;
}

.modal-dialog h2,
.a11y-dialog h2 {
  margin: 0 0 0.4rem;
  font-family: var(--font-serif);
  color: var(--gold-light);
  font-size: clamp(1.3rem, 3vw, 1.55rem);
  padding-right: 2rem;
}

.modal-dialog p.help,
.a11y-dialog p.help {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.modal-close-x {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  font-size: 1.6rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.modal-close-x:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Song request form */
.form-row {
  display: grid;
  gap: 0.35rem;
  margin: 0.85rem 0;
}

.form-row label {
  font-weight: 700;
  color: var(--cream);
  font-size: 0.95rem;
}

.form-row .req { color: var(--red); }

.form-row .optional {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85rem;
}

.form-row input,
.form-row textarea,
.form-row select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--cream);
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
}

.form-row select {
  resize: none;
  /* Native select dropdown caret stays browser default for accessibility. */
  appearance: auto;
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: 0;
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(255, 213, 108, 0.3);
}

.form-row input:invalid:not(:placeholder-shown),
.form-row textarea:invalid:not(:placeholder-shown) {
  border-color: rgba(255, 107, 107, 0.6);
}

.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  gap: 0.55rem;
  margin-top: 1rem;
}

.form-submit {
  flex: 1;
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dark));
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: filter calc(0.15s * var(--motion)) ease, transform calc(0.1s * var(--motion)) ease;
}

.form-submit:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.form-submit:active:not(:disabled) {
  transform: translateY(1px);
}

.form-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.form-cancel {
  min-height: 48px;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--cream);
  font-size: 0.95rem;
  cursor: pointer;
}

.form-cancel:hover {
  background: rgba(255, 255, 255, 0.04);
}

.form-status {
  margin: 0.85rem 0 0;
  padding: 0;
  font-size: 0.95rem;
  min-height: 1.2em;
}

.form-status[data-state="success"] {
  padding: 0.7rem 0.95rem;
  border-radius: 10px;
  background: rgba(72, 220, 114, 0.12);
  border: 1px solid rgba(72, 220, 114, 0.4);
  color: var(--green);
}

.form-status[data-state="error"] {
  padding: 0.7rem 0.95rem;
  border-radius: 10px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-text);
}

.form-fallback {
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.88rem;
  color: var(--muted);
}

.form-fallback a {
  color: var(--gold-light);
}


.request-phone-help {
  margin-top: -0.35rem !important;
}

.request-phone-help a,
.form-phone-fallback a {
  font-weight: 800;
  white-space: nowrap;
}

.form-phone-fallback {
  margin-top: 0.65rem;
}

html[data-contrast="high"] .form-row input,
html[data-contrast="high"] .form-row textarea {
  background: #000;
  border-width: 2px;
}

/* Accessibility dialog */
.a11y-group {
  margin: 0.85rem 0;
  padding: 0.7rem 0 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.a11y-group:last-of-type {
  border-bottom: 0;
}

.a11y-group > strong {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--cream);
  font-size: 0.95rem;
}

.a11y-options {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.a11y-options button {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--cream);
  font-size: 0.9rem;
}

.a11y-options button[aria-pressed="true"] {
  background: var(--gold-light);
  color: #111;
  border-color: var(--gold-light);
}

.a11y-close {
  width: 100%;
  margin-top: 0.6rem;
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dark));
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

.a11y-reset {
  width: 100%;
  margin-top: 1rem;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--cream);
  font-size: 0.95rem;
}

.a11y-reset:hover {
  background: rgba(255, 255, 255, 0.04);
}

.a11y-translate {
  display: block;
  margin: 0.7rem 0 0;
  padding: 0.6rem 0.9rem;
  text-align: center;
  background: rgba(213, 138, 24, 0.18);
  border: 1px solid rgba(213, 138, 24, 0.4);
  border-radius: 10px;
  color: var(--cream);
  text-decoration: none;
}



/* Listen elsewhere modal */
.listen-options-dialog {
  width: min(560px, calc(100vw - 2rem));
}

.listen-options-list {
  display: grid;
  gap: 0.56rem;
  margin-top: 0.85rem;
}

.listen-option-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.68rem 0.72rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 213, 108, 0.22);
  background: rgba(255, 255, 255, 0.055);
}

.listen-option-copy {
  min-width: 0;
}

.listen-option-copy strong {
  display: block;
  color: var(--cream);
  font-size: 0.98rem;
  line-height: 1.18;
}

.listen-option-copy p {
  margin: 0.12rem 0 0.34rem;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.3;
}

.listen-option-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.34rem;
  padding: 0.12rem 0.48rem;
  border-radius: 999px;
  background: rgba(255, 213, 108, 0.13);
  color: var(--gold-light);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.listen-option-card.is-working .listen-option-status {
  background: rgba(72, 220, 114, 0.14);
  color: var(--green);
}

.listen-option-card.is-issue .listen-option-status {
  background: var(--warn-bg);
  color: var(--warn-text);
}

.listen-option-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.28rem;
  padding: 0.42rem 0.78rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dark));
  color: #15100a;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.listen-options-note {
  margin-top: 0.85rem;
}

@media (max-width: 560px) {
  .listen-options-dialog {
    width: min(100%, calc(100vw - 1rem));
    max-height: calc(100dvh - 1rem);
    padding: 1rem;
  }

  .listen-option-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
  }

  .listen-option-open {
    min-height: 2.2rem;
    padding-inline: 0.7rem;
  }
}

/* Cookie/visitor-id consent banner.
   Pre-rendered hidden in HTML so it does not cause CLS.
   Positioned fixed at the bottom so it never displaces content.
   On phones it spans width; on tablets and up it sits in a compact card. */
.consent-banner {
  position: fixed;
  z-index: 9000;
  inset: auto 0.75rem 0.75rem 0.75rem;
  background: rgba(8, 14, 22, 0.97);
  color: var(--cream);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.consent-banner[hidden] { display: none; }
.consent-banner-inner {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 720px;
  margin: 0 auto;
}
.consent-banner-title {
  margin: 0;
  font-weight: 800;
  color: var(--gold-light);
  font-size: 1.02rem;
}
.consent-banner-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}
.consent-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.15rem;
}
.consent-banner-actions .primary-button,
.consent-banner-actions .secondary-button {
  flex: 1 1 9rem;
  min-height: 44px;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  border: 0;
}
.consent-banner-actions .primary-button {
  background: var(--gold-light);
  color: #1a1208;
}
.consent-banner-actions .secondary-button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--cream);
}
.consent-banner-actions .primary-button:hover,
.consent-banner-actions .primary-button:focus-visible {
  background: var(--gold);
  outline: 0;
}
.consent-banner-actions .secondary-button:hover,
.consent-banner-actions .secondary-button:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: 0;
}
.consent-banner-footnote {
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.75;
}
.consent-banner-footnote a {
  color: inherit;
  text-decoration: underline;
}
@media (min-width: 720px) {
  .consent-banner {
    left: auto;
    right: 1rem;
    bottom: 1rem;
    max-width: 480px;
  }
}

/* Responsive, large text, reduced motion and print rules */
/* Responsive */
@media (max-width: 900px) {
  .header-inner {
    gap: 0.55rem;
  }

  .extra-playlist {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .bottom-panels {
    grid-template-columns: 1fr;
  }

  .schedule-card {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0.85rem;
  }

  .footer-mark {
    justify-content: center;
  }

  .site-footer nav {
    justify-content: center;
  }

  .about-strip {
    grid-template-columns: clamp(100px, 25vw, 160px) 1fr;
  }
}

@media (max-width: 640px) {
  :root {
    --shell-pad: 16px;
  }

  html[data-text="large"]    { --base-font-size: 18px; }
  html[data-text="x-large"]  { --base-font-size: 19.5px; }
  html[data-text="xx-large"] { --base-font-size: 21px; }

  .hero-words {
    width: 65%;
  }

  .player-top {
    grid-template-columns: auto 1fr auto;
    gap: 0.7rem;
  }

  .live-badge strong {
    display: none;
  }

  .np-row {
    grid-template-columns: auto auto 1fr;
    gap: 0.45rem;
  }

  .support-header {
    padding: 0 0.75rem;
    font-size: 0.85rem;
    min-height: 40px;
  }

  .a11y-toggle-label {
    display: none;
  }

  .wordmark img {
    width: 56px;
    height: 56px;
  }

  .a11y-toggle {
    min-width: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 0.95rem;
  }
}

@media (max-width: 430px) {
  :root {
    --shell-pad: 12px;
  }

  .banner {
    padding: 0.55rem 0.7rem;
    gap: 0.55rem;
    font-size: 0.92rem;
    line-height: 1.35;
  }

  .banner p {
    font-size: 0.92rem;
    line-height: 1.35;
  }

  /* Keep the call-to-action button inline; previously the rule forced
     width:100% which made the banner double-tall on phones. */
  .banner a,
  .banner button {
    width: auto;
    padding: 0.4rem 0.7rem;
    font-size: 0.88rem;
  }

  .header-inner {
    min-height: 62px;
    gap: 0.4rem;
  }

  .hero-card {
    min-height: 200px;
  }

  .hero-words {
    width: 70%;
    padding: 0.85rem 0.85rem;
  }

  .np-row {
    grid-template-columns: 1fr;
    gap: 0.05rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .np-row .np-icon {
    display: none;
  }

  .about-strip {
    grid-template-columns: 1fr;
  }

  .about-strip img {
    display: none;
  }

  .news-card {
    padding: 1rem;
  }

  .schedule-card {
    padding: 1rem;
  }

  .schedule-time {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .schedule-time strong {
    white-space: normal;
  }

  .news-item h3 {
    font-size: 1.05rem;
  }

  .support-header {
    padding: 0 0.6rem;
    font-size: 0.78rem;
    min-height: 38px;
  }

  .licensed-label {
    width: 100%;
    text-align: center;
  }

  .licensed-logo {
    height: 36px;
    max-width: 118px;
  }
}

/* Larger text accessibility */
html[data-text="x-large"] .np-row,
html[data-text="xx-large"] .np-row {
  grid-template-columns: 1fr;
  gap: 0.1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-text="x-large"] .np-row .np-icon,
html[data-text="xx-large"] .np-row .np-icon {
  display: none;
}

@media (max-width: 900px) {
  html[data-text="large"] .action-row,
  html[data-text="x-large"] .action-row,
  html[data-text="xx-large"] .action-row {
    grid-template-columns: 1fr;
  }

  html[data-text="large"] .live-badge strong,
  html[data-text="x-large"] .live-badge strong,
  html[data-text="xx-large"] .live-badge strong {
    display: none;
  }
}

html[data-text="xx-large"] .hero-words {
  width: auto;
  padding: 0.85rem 1rem;
}

html[data-text="xx-large"] .hero-words h1 {
  font-size: clamp(2rem, 8vw, 3.5rem);
  letter-spacing: -0.02em;
}

html[data-text="xx-large"] .player-top {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
  gap: 0.6rem;
}

html[data-text="xx-large"] .live-badge {
  display: none;
}

html[data-text="xx-large"] .extra-playlist {
  grid-template-columns: 1fr;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    --motion: 0;
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Print */
@media print {
  .site-header,
  .site-footer,
  .player-card,
  .action-row,
  .support-panel,
  .skip-link,
  .a11y-toggle,
  .a11y-panel,
  .banner {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }

  .hero-card,
  .news-card,
  .about-strip,
  .how-panel {
    background: #fff;
    border: 1px solid #ccc;
    color: #000;
    box-shadow: none;
  }
}
/* Mobile accessibility-dialog polish: keep the settings panel centred and compact
   so the full control set is visible on typical phone screens without awkward
   starting positions or unnecessary scrolling. */
@media (max-width: 640px) {
  .a11y-panel {
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    padding:
      max(0.4rem, env(safe-area-inset-top))
      max(0.4rem, env(safe-area-inset-right))
      max(0.4rem, env(safe-area-inset-bottom))
      max(0.4rem, env(safe-area-inset-left));
    overflow-y: hidden;
  }

  .a11y-dialog {
    width: min(100%, calc(100vw - 0.8rem), 430px);
    max-width: calc(100vw - 0.8rem);
    max-height: calc(100dvh - 0.8rem);
    padding: 0.85rem;
    border-radius: 14px;
  }

  .a11y-dialog h2 {
    margin-bottom: 0.25rem;
    padding-right: 0;
    font-size: 1.25rem;
    line-height: 1.15;
  }

  .a11y-dialog p.help {
    margin-bottom: 0.55rem;
    font-size: 0.86rem;
    line-height: 1.35;
  }

  .a11y-group {
    margin: 0.35rem 0;
    padding: 0.35rem 0 0.45rem;
  }

  .a11y-group > strong {
    margin-bottom: 0.32rem;
    font-size: 0.9rem;
  }

  .a11y-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
  }

  .a11y-options button {
    min-height: 38px;
    padding: 0.35rem 0.45rem;
    font-size: 0.86rem;
  }

  .a11y-translate {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.55rem 0 0;
    padding: 0.55rem 0.7rem;
  }

  .a11y-reset {
    min-height: 40px;
    margin-top: 0.55rem;
    font-size: 0.9rem;
  }

  .a11y-close {
    min-height: 42px;
    margin-top: 0.45rem;
    font-size: 0.92rem;
  }

  html[data-text="x-large"] .a11y-options,
  html[data-text="xx-large"] .a11y-options {
    grid-template-columns: 1fr;
  }

  html[data-text="x-large"] .a11y-options button,
  html[data-text="xx-large"] .a11y-options button {
    font-size: 0.9rem;
    line-height: 1.15;
  }
}

@media (max-width: 380px), (max-height: 640px) {
  .a11y-panel {
    align-items: flex-start;
    overflow-y: auto;
  }

  .a11y-dialog {
    max-height: none;
  }
}

/* Now-playing, listener pill and live-show polish */
/* Live listener count */
.listener-panel {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 213, 108, 0.22);
  background: linear-gradient(180deg, rgba(255, 213, 108, 0.08), rgba(255, 255, 255, 0.035));
}

.listener-panel[hidden] { display: none; }

.listener-panel strong {
  display: block;
  color: #fff;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.05;
}

.listener-panel p:last-child {
  margin: 0;
  max-width: 15rem;
  color: var(--muted);
  font-size: 0.88rem;
  text-align: right;
}

@media (max-width: 520px) {
  .listener-panel {
    grid-template-columns: 1fr;
  }

  .listener-panel p:last-child {
    max-width: none;
    text-align: left;
  }
}

/* Layout polish: now-playing and listener count */
.now-playing {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255, 213, 108, 0.16);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.018));
}

.now-playing .section-title {
  padding-bottom: 0.7rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--line-soft);
}

.np-row {
  grid-template-columns: auto minmax(8rem, auto) minmax(0, 1fr);
  margin: 0.45rem 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.032);
}

.np-row strong {
  color: rgba(255,244,223,0.9);
}

.np-row > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.extra-playlist {
  padding-top: 0.85rem;
  margin-top: 0.85rem;
}

#coming-up {
  font-size: clamp(0.98rem, 1.8vw, 1.12rem);
  line-height: 1.45;
}

#previous-list {
  line-height: 1.45;
}

.listener-panel {
  margin-top: 0.9rem;
  padding: 0.7rem 0.85rem;
  grid-template-columns: auto minmax(0, 1fr);
  border-radius: 16px;
}

.listener-panel .mini-label {
  margin-bottom: 0.18rem;
  font-size: 0.68rem;
}

.listener-panel strong {
  font-size: clamp(1.05rem, 2.1vw, 1.25rem);
  letter-spacing: -0.01em;
}

.listener-panel p:last-child {
  max-width: none;
  justify-self: end;
  font-size: 0.8rem;
  color: rgba(243,226,196,0.72);
}

@media (max-width: 640px) {
  .now-playing {
    padding: 0.85rem;
  }

  .np-row {
    grid-template-columns: 1fr;
    gap: 0.18rem;
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.09);
  }

  .np-row .np-icon {
    display: none;
  }

  .np-row strong {
    font-size: 0.9rem;
  }

  .np-row > span:last-child {
    font-size: 1.02rem;
  }

  .listener-panel {
    grid-template-columns: 1fr auto;
    gap: 0.6rem;
    align-items: end;
  }

  .listener-panel p:last-child {
    text-align: right;
    align-self: center;
  }
}

@media (max-width: 430px) {
  .now-playing {
    margin-inline: -0.1rem;
  }

  .listener-panel {
    grid-template-columns: 1fr;
  }

  .listener-panel p:last-child {
    justify-self: start;
    text-align: left;
  }
}

/* Final public now-playing tidy-up */
.programme-status {
  margin: 0 0 0.85rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(255, 213, 108, 0.18);
  border-radius: 16px;
  background: rgba(255, 213, 108, 0.055);
}
.programme-status[hidden] { display: none; }
.programme-status strong {
  display: block;
  color: var(--gold);
  font-size: clamp(1rem, 1.7vw, 1.12rem);
  line-height: 1.25;
}
.programme-status span {
  display: block;
  color: rgba(243, 226, 196, 0.76);
  font-size: 0.88rem;
  margin-top: 0.18rem;
}
.programme-status[data-state="live"] {
  background: rgba(57, 177, 100, 0.10);
  border-color: rgba(99, 220, 139, 0.28);
}
.programme-status[data-state="repeat"] {
  background: rgba(247, 196, 83, 0.075);
  border-color: rgba(247, 196, 83, 0.24);
}
.now-playing .np-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.28rem;
  padding: 0.75rem 0.85rem;
}
.now-playing .np-row .np-icon { display: none; }
.now-playing .np-row strong {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(243, 226, 196, 0.78);
}
.now-playing .np-row > span:last-child {
  color: var(--gold);
  font-size: clamp(1.02rem, 2.4vw, 1.28rem);
  line-height: 1.35;
}
.listener-panel {
  margin-top: 0.85rem;
  padding: 0.65rem 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 213, 108, 0.16);
}
.listener-panel > div {
  min-width: 0;
}
.listener-panel strong {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.2;
}
.listener-panel p:last-child {
  margin: 0;
  color: rgba(243, 226, 196, 0.66);
  font-size: 0.78rem;
  text-align: right;
  max-width: 12rem;
}
@media (max-width: 520px) {
  .listener-panel {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }
  .listener-panel p:last-child {
    max-width: none;
    text-align: left;
  }
}


/* Final public Now Playing polish: clearer broadcast line, consistent cards */
.broadcast-status {
  margin: 0 0 0.85rem;
  padding: 0.72rem 0.82rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.18rem;
  border: 1px solid rgba(255, 213, 108, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.032);
}
.broadcast-status[hidden] { display: none; }
.broadcast-status .mini-label {
  margin: 0;
  color: var(--gold-light);
  letter-spacing: 0.13em;
}
.broadcast-status strong {
  display: block;
  color: var(--cream);
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  line-height: 1.25;
}
.broadcast-status span {
  display: block;
  color: rgba(243, 226, 196, 0.76);
  font-size: 0.88rem;
}
.broadcast-status[data-state="live"] {
  background: rgba(72, 220, 114, 0.08);
  border-color: rgba(72, 220, 114, 0.28);
}
.broadcast-status[data-state="repeat"] {
  background: rgba(255, 213, 108, 0.055);
}
.now-playing .np-row {
  background: rgba(255,255,255,0.026);
  border-color: rgba(255,255,255,0.10);
}
.now-playing .np-row strong {
  color: rgba(255, 241, 221, 0.82);
}
.now-playing .np-row > span:last-child {
  color: var(--gold-light);
}
.listener-panel {
  padding: 0.58rem 0.72rem;
  border-radius: 14px;
  background: rgba(255,255,255,0.028);
}
.listener-panel .mini-label {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
}
.listener-panel strong {
  font-size: clamp(0.98rem, 1.7vw, 1.12rem);
}
.listener-panel p:last-child {
  font-size: 0.76rem;
}
@media (min-width: 720px) {
  .broadcast-status {
    grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
    align-items: center;
    column-gap: 1rem;
  }
  .broadcast-status .mini-label {
    grid-row: span 2;
  }
}
@media (max-width: 520px) {
  .now-playing {
    padding: 0.95rem;
  }
  .broadcast-status {
    padding: 0.7rem 0.76rem;
  }
  .listener-panel {
    gap: 0.25rem;
  }
}

/* 2026-05-13 UI priority pass: make first screen listener-focused and consistent */
body.hide-now-playing #now-playing-panel,
body.hide-coming-up #coming-up-row,
body.hide-previous-played #previous-panel {
  display: none !important;
}

/* Put listening first; keep the big branding image as supporting content lower down. */
#listen.player-card {
  margin-top: 1rem;
  border-radius: 24px;
}

.player-top {
  align-items: center;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 213, 108, 0.22);
}

.play-copy h2 {
  font-size: clamp(1.75rem, 4vw, 3.15rem);
  letter-spacing: -0.035em;
}

.play-subtitle {
  max-width: 35rem;
}

.now-playing {
  margin-top: 0.95rem;
  padding: clamp(0.9rem, 2.2vw, 1.15rem);
  border: 1px solid rgba(255, 213, 108, 0.24);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(8, 28, 42, 0.72), rgba(4, 13, 20, 0.78));
}

.now-playing-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 213, 108, 0.22);
}

.now-playing .section-title {
  margin: 0 0 0.18rem;
  padding: 0;
  border: 0;
}

.now-playing-subtitle {
  margin: 0;
  color: rgba(255, 241, 221, 0.72);
  font-size: 0.92rem;
}

.broadcast-status {
  margin: 0 0 0.75rem;
  padding: 0.62rem 0.75rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.25rem 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 213, 108, 0.18);
  background: rgba(255, 255, 255, 0.035);
}

.broadcast-status .mini-label {
  grid-row: span 2;
  margin: 0;
  color: rgba(255, 213, 108, 0.92);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
}

.broadcast-status strong {
  color: var(--cream);
  font-size: 0.98rem;
  line-height: 1.2;
}

.broadcast-status span {
  color: rgba(243, 226, 196, 0.7);
  font-size: 0.82rem;
}

.track-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.now-playing .np-row {
  margin: 0;
  padding: 0.78rem 0.85rem;
  min-height: 5.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0.32rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.105);
  background: rgba(255, 255, 255, 0.035);
}

.now-playing .np-row .np-icon { display: none; }
.now-playing .np-row strong {
  color: rgba(255, 241, 221, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 0.68rem;
}
.now-playing .np-row > span:last-child {
  color: var(--gold-light);
  font-size: clamp(1.05rem, 2.15vw, 1.28rem);
  line-height: 1.28;
}

.extra-playlist.queue-grid {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 0.75rem;
  border-top: 1px solid rgba(255, 213, 108, 0.2);
}

.queue-card {
  margin: 0;
  padding: 0.78rem 0.85rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.025);
}

.queue-card .mini-label {
  margin-bottom: 0.45rem;
  color: var(--gold-light);
}

#coming-up {
  display: block;
  color: var(--cream);
  font-size: 1rem;
  line-height: 1.38;
}

#previous-list {
  margin: 0;
  padding-left: 1rem;
  color: var(--muted);
  line-height: 1.35;
}

.listener-panel {
  flex: 0 0 auto;
  min-width: 10.75rem;
  max-width: 13rem;
  margin: 0;
  padding: 0.52rem 0.68rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.12rem;
  border: 1px solid rgba(255, 213, 108, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  text-align: right;
}

.listener-panel[hidden] { display: none; }
.listener-panel .mini-label {
  margin: 0;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: rgba(255, 213, 108, 0.88);
}
.listener-panel strong {
  font-size: clamp(0.95rem, 1.8vw, 1.08rem);
  color: var(--cream);
}
.listener-panel p:last-child {
  margin: 0;
  max-width: none;
  color: rgba(243, 226, 196, 0.58);
  font-size: 0.72rem;
  text-align: right;
}

.hero-card {
  min-height: clamp(180px, 28vw, 300px);
}

@media (max-width: 720px) {
  #listen.player-card {
    border-radius: 20px;
  }
  .player-top {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .live-badge {
    display: none;
  }
  .play-button {
    width: clamp(76px, 22vw, 104px);
  }
  .play-copy h2 {
    font-size: clamp(1.7rem, 8vw, 2.45rem);
  }
  .now-playing-head {
    align-items: stretch;
    flex-direction: column;
    gap: 0.65rem;
  }
  .listener-panel {
    width: 100%;
    max-width: none;
    min-width: 0;
    text-align: left;
  }
  .listener-panel p:last-child { text-align: left; }
  .track-grid,
  .extra-playlist.queue-grid {
    grid-template-columns: 1fr;
  }
  .now-playing .np-row {
    min-height: 0;
  }
  .broadcast-status {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .broadcast-status .mini-label {
    grid-row: auto;
  }
  .hero-card {
    margin-top: 1rem;
    min-height: 170px;
  }
}

@media (max-width: 430px) {
  .now-playing {
    padding: 0.8rem;
    border-radius: 18px;
  }
  .queue-card,
  .now-playing .np-row,
  .broadcast-status {
    padding: 0.68rem 0.72rem;
  }
}

/* 2026-05-13 final listener-first clean-up
   Keep the big station banner first and make the live metadata easier for older listeners to scan. */
.hero-card {
  margin-top: 1rem;
  margin-bottom: 1rem;
  min-height: clamp(260px, 46vw, 520px);
}

#listen.player-card {
  margin-top: 1rem;
}

.hero-card .status-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}

.hero-card .listener-panel,
.hero-card .listener-hero-pill {
  display: inline-flex;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0.72rem 1rem;
  align-items: center;
  gap: 0.65rem;
  border-radius: 999px;
  text-align: left;
  background: rgba(4, 32, 22, 0.78);
  border: 1px solid rgba(80, 244, 133, 0.42);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18) inset;
}

.hero-card .listener-panel[hidden] { display: none !important; }
.hero-card .listener-dot {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  background: #4cff83;
  box-shadow: 0 0 0 0.45rem rgba(76, 255, 131, 0.13);
}
.hero-card .listener-copy {
  display: grid;
  gap: 0.05rem;
  line-height: 1.05;
}
.hero-card .listener-copy strong,
.hero-card .listener-panel strong {
  color: var(--cream);
  font-size: clamp(0.98rem, 1.7vw, 1.2rem);
}
.hero-card .listener-copy span,
.hero-card .listener-panel p:last-child {
  color: rgba(243, 226, 196, 0.72);
  font-size: 0.78rem;
  text-align: left;
}

.now-playing {
  padding: clamp(0.9rem, 2.4vw, 1.25rem);
  border-color: rgba(255, 213, 108, 0.22);
  background: linear-gradient(180deg, rgba(5, 23, 34, 0.82), rgba(3, 11, 18, 0.9));
}
.now-playing-head {
  display: block;
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
}
.now-playing-subtitle {
  font-size: 0.95rem;
}
.broadcast-status {
  margin-bottom: 0.75rem;
  padding: 0.72rem 0.82rem;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.14rem;
  background: rgba(255, 213, 108, 0.055);
  border-color: rgba(255, 213, 108, 0.2);
}
.broadcast-status .mini-label,
.queue-card .mini-label,
.now-playing .np-row strong {
  font-size: 0.68rem;
  letter-spacing: 0.13em;
}
.broadcast-status strong {
  color: var(--gold-light);
  font-size: clamp(1rem, 2vw, 1.18rem);
}
.broadcast-status span {
  font-size: 0.9rem;
}
.track-grid,
.extra-playlist.queue-grid {
  grid-template-columns: 1fr;
  gap: 0.62rem;
}
.now-playing .np-row,
.queue-card {
  min-height: 0;
  padding: 0.76rem 0.85rem;
  border-radius: 15px;
  background: rgba(255,255,255,0.032);
  border: 1px solid rgba(255,255,255,0.09);
}
.now-playing .np-row > span:last-child,
#coming-up {
  color: var(--cream);
  font-size: clamp(1.03rem, 2.4vw, 1.2rem);
}
#song-title,
#artist-name {
  color: var(--gold-light) !important;
}
.extra-playlist.queue-grid {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
}
#previous-list {
  padding-left: 1.1rem;
  line-height: 1.45;
}
#previous-list li + li { margin-top: 0.25rem; }

@media (min-width: 820px) {
  .track-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
  .extra-playlist.queue-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
}

@media (max-width: 720px) {
  .hero-card {
    min-height: 245px;
    margin-top: 0.85rem;
  }
  .hero-card .listener-panel,
  .hero-card .listener-hero-pill {
    padding: 0.62rem 0.82rem;
  }
  #listen.player-card {
    margin-top: 0.9rem;
  }
  .now-playing {
    padding: 0.82rem;
  }
  .now-playing .np-row,
  .queue-card,
  .broadcast-status {
    padding: 0.72rem 0.75rem;
  }
}


/* Lighthouse stability reserve: keeps the player height steadier while live metadata updates. */
#now-playing-panel { min-height: 22rem; }
@media (max-width: 720px) {
  #now-playing-panel { min-height: 30rem; }
}


/* 2026-05-14 header listener pill alignment
   Keep the listener count beside the Radio is live pill and match its size. */
.hero-card .status-pills {
  flex-wrap: nowrap;
  align-items: center;
}

.hero-card .listener-panel,
.hero-card .listener-hero-pill {
  padding: 0.35rem 0.85rem;
  gap: 0.55rem;
  min-height: 0;
  border-color: rgba(72, 220, 114, 0.4);
  background: rgba(72, 220, 114, 0.12);
  color: var(--green);
}

.hero-card .listener-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  box-shadow: none;
}

.hero-card .listener-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  line-height: 1;
  white-space: nowrap;
}

.hero-card .listener-copy strong,
.hero-card .listener-panel strong {
  color: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero-card .listener-copy span,
.hero-card .listener-panel p:last-child {
  color: inherit;
  font-size: 0.85rem;
  font-weight: 700;
}

.hero-card .listener-copy span:empty {
  display: none;
}

@media (max-width: 420px) {
  .hero-card .status-pills {
    gap: 0.45rem;
  }
  .hero-card .status-pill,
  .hero-card .listener-panel,
  .hero-card .listener-hero-pill {
    padding: 0.34rem 0.7rem;
    font-size: 0.78rem;
  }
  .hero-card .listener-copy strong,
  .hero-card .listener-panel strong {
    font-size: 0.78rem;
  }
}


/* 2026-05-14 listener pill size fix
   Make the homepage listener pill match the Radio is live pill exactly,
   with the dot beside the text rather than stacking above it. */
.hero-card .listener-panel,
.hero-card .listener-hero-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.85rem;
  gap: 0.55rem;
  min-height: auto;
}

.hero-card .listener-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  display: inline-block;
  align-self: center;
}

.hero-card #listener-count {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: inherit;
}

@media (max-width: 420px) {
  .hero-card .listener-panel,
  .hero-card .listener-hero-pill {
    padding: 0.34rem 0.7rem;
  }

  .hero-card #listener-count {
    font-size: 0.78rem;
  }
}

/* 2026-05-14 mobile listener pill final fix
   Keep the homepage listener pill the same size as the Radio is live pill on mobile,
   and force the green dot to stay beside the text rather than above it. */
.hero-card #radio-pill,
.hero-card #listener-panel {
  flex: 0 0 auto;
}

.hero-card #listener-panel,
.hero-card #listener-panel.listener-panel,
.hero-card #listener-panel.listener-hero-pill {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center;
  gap: 0.55rem !important;
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  white-space: nowrap;
  line-height: 1;
}

.hero-card #listener-panel .dot,
.hero-card #listener-panel .listener-dot {
  display: inline-block !important;
  width: 9px !important;
  height: 9px !important;
  flex: 0 0 9px !important;
  align-self: center !important;
  margin: 0 !important;
}

.hero-card #listener-panel .label,
.hero-card #listener-count {
  display: inline !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-size: 0.85rem;
  font-weight: 700;
}

@media (max-width: 480px) {
  .hero-card .status-pills {
    gap: 0.5rem;
  }

  .hero-card #listener-panel,
  .hero-card #listener-panel.listener-panel,
  .hero-card #listener-panel.listener-hero-pill {
    padding: 0.35rem 0.85rem !important;
  }

  .hero-card #listener-panel .label,
  .hero-card #listener-count {
    font-size: 0.85rem !important;
  }
}

/* 2026-05-14 live show display refinement
   When Jim is live, avoid showing the awkward Artist/Song metadata cards
   because the metadata source reports the programme as “Live / Now On Air”. */
.now-playing.is-live-show .track-grid {
  display: none !important;
}

.now-playing.is-live-show .broadcast-status {
  border-color: rgba(111, 255, 151, 0.42);
  background:
    linear-gradient(135deg, rgba(18, 92, 57, 0.34), rgba(5, 26, 32, 0.88)),
    rgba(5, 20, 25, 0.9);
  box-shadow: inset 0 0 0 1px rgba(111, 255, 151, 0.08);
}

.now-playing.is-live-show .broadcast-status .mini-label {
  color: #7dff9a;
}

.now-playing.is-live-show .broadcast-status strong {
  color: #ffe39a;
}

.now-playing.is-live-show .extra-playlist {
  margin-top: 1rem;
}

.now-playing.is-live-show #coming-up-row,
.now-playing.is-live-show #previous-panel {
  background: rgba(255, 255, 255, 0.035);
}

.now-playing.is-live-show #coming-up-row .mini-label,
.now-playing.is-live-show #previous-panel .mini-label {
  color: #ffe08a;
}

@media (max-width: 560px) {
  .now-playing.is-live-show .broadcast-status {
    padding: 1.05rem;
  }

  .now-playing.is-live-show .broadcast-status strong {
    font-size: 1.3rem;
  }

  .now-playing.is-live-show .broadcast-status span {
    font-size: 0.98rem;
  }
}


/* Repeat show display refinement: avoid showing repeat-show filenames as normal song metadata. */
.now-playing.is-repeat-show .track-grid {
  display: none !important;
}

.now-playing.is-repeat-show .broadcast-status {
  border-color: rgba(255, 213, 108, 0.42);
  background:
    linear-gradient(135deg, rgba(123, 82, 18, 0.36), rgba(5, 26, 32, 0.88)),
    rgba(5, 20, 25, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 213, 108, 0.08);
}

.now-playing.is-repeat-show .broadcast-status .mini-label {
  color: #ffe08a;
}

.now-playing.is-repeat-show .broadcast-status strong {
  color: #ffe39a;
}

.now-playing.is-repeat-show .extra-playlist {
  margin-top: 1rem;
}

.now-playing.is-repeat-show #coming-up-row,
.now-playing.is-repeat-show #previous-panel {
  background: rgba(255, 255, 255, 0.035);
}

@media (max-width: 560px) {
  .now-playing.is-repeat-show .broadcast-status {
    padding: 1.05rem;
  }
  .now-playing.is-repeat-show .broadcast-status strong {
    font-size: 1.3rem;
  }
  .now-playing.is-repeat-show .broadcast-status span {
    font-size: 0.98rem;
  }
}

/* Station Helper: compact guided chat UI */
.station-helper {
  position: fixed;
  z-index: 80;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  font-family: var(--font-body);
  color: var(--cream);
}

.station-helper-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3.15rem;
  max-width: min(12rem, calc(100vw - 2rem));
  padding: 0.55rem 0.9rem 0.55rem 0.55rem;
  border: 1px solid rgba(255, 213, 108, 0.78);
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe083, #edac36 58%, #cc7a17);
  color: #111;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42), 0 0 0 4px rgba(255, 213, 108, 0.08);
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}

.station-helper-toggle:hover,
.station-helper-toggle:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.52), 0 0 0 4px rgba(255, 213, 108, 0.18);
}

.station-helper-mark {
  display: inline-grid;
  place-items: center;
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 999px;
  background: rgba(1, 7, 13, 0.94);
  color: var(--gold-light);
  font-size: 1.25rem;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.station-helper-toggle-text {
  font-size: 1rem;
  line-height: 1;
}

.station-helper-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.75rem);
  width: min(23rem, calc(100vw - 2rem));
  height: min(34rem, calc(100dvh - 7rem));
  max-height: calc(100dvh - 7rem);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 213, 108, 0.38);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(7, 24, 35, 0.99), rgba(3, 11, 18, 0.99));
  color: var(--cream);
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(255, 213, 108, 0.08);
}

.station-helper-panel[hidden] { display: none; }

.station-helper-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.86rem 0.88rem;
  border-bottom: 1px solid rgba(255, 213, 108, 0.18);
  background: rgba(1, 7, 13, 0.42);
}

.station-helper-title-wrap h2 {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--gold-light);
  font-size: 1.28rem;
  line-height: 1.05;
}

.station-helper-title-wrap p {
  margin: 0.25rem 0 0;
  color: rgba(255, 241, 221, 0.76);
  font-size: 0.88rem;
  line-height: 1.3;
}

.station-helper-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  min-height: 2.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 213, 108, 0.36);
  background: rgba(255, 255, 255, 0.075);
  color: var(--cream);
  font-size: 0.95rem;
  font-weight: 900;
  cursor: pointer;
}

.station-helper-body {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: rgba(255, 255, 255, 0.015);
}

.station-helper-messages {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: end;
  gap: 0.72rem;
  padding: 0.92rem;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.station-helper-row {
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
  min-width: 0;
}

.station-helper-row-user { justify-content: flex-end; }

.station-helper-avatar {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--gold-light);
  color: #111;
  font-weight: 900;
  box-shadow: 0 0 0 3px rgba(255, 213, 108, 0.12);
}

.station-helper-bubble {
  max-width: min(19rem, 86%);
  min-width: 0;
  border: 1px solid rgba(255, 213, 108, 0.22);
  border-radius: 18px;
  padding: 0.78rem 0.84rem;
  overflow-wrap: anywhere;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.station-helper-bubble-bot {
  border-bottom-left-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
}

.station-helper-bubble-user {
  margin: 0;
  border-bottom-right-radius: 7px;
  background: linear-gradient(135deg, rgba(255, 213, 108, 0.95), rgba(232, 160, 47, 0.95));
  color: #15100a;
  font-weight: 800;
}

.station-helper-meta {
  display: block;
  margin: 0 0 0.28rem;
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.station-helper-bubble strong {
  display: block;
  margin: 0 0 0.38rem;
  color: var(--cream);
  font-size: 1rem;
  line-height: 1.25;
}

.station-helper-bubble p {
  margin: 0;
  color: rgba(255, 241, 221, 0.78);
  line-height: 1.48;
  font-size: 0.96rem;
}

.station-helper-compose {
  border-top: 1px solid rgba(255, 213, 108, 0.18);
  padding: 0.74rem;
  background: rgba(1, 7, 13, 0.56);
}

.station-helper-suggestions {
  margin: 0 0 0.55rem;
}

.station-helper-suggestions:empty { display: none; }

.station-helper-suggestions-title,
.station-helper-related p {
  margin: 0 0 0.38rem;
  color: var(--gold-light);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.station-helper-chip-list {
  display: flex;
  gap: 0.42rem;
  overflow-x: auto;
  padding-bottom: 0.12rem;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.station-helper-chip-list::-webkit-scrollbar { display: none; }

.station-helper-chip,
.station-helper-related-button,
.station-helper-action {
  min-height: 2.38rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 213, 108, 0.35);
  background: rgba(255, 255, 255, 0.065);
  color: var(--cream);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 850;
  cursor: pointer;
  touch-action: manipulation;
}

.station-helper-chip {
  flex: 0 0 auto;
  max-width: min(17rem, 78vw);
  padding: 0.55rem 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.station-helper-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.48rem;
  margin: 0;
}

.station-helper-search input {
  width: 100%;
  min-width: 0;
  min-height: 2.8rem;
  border: 1px solid rgba(255, 213, 108, 0.34);
  border-radius: 999px;
  padding: 0.66rem 0.9rem;
  background: rgba(255, 255, 255, 0.075);
  color: var(--cream);
  font: inherit;
  outline: none;
}

.station-helper-search input::placeholder { color: rgba(255, 241, 221, 0.62); }

.station-helper-search input:focus-visible {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(255, 213, 108, 0.20);
}

.station-helper-ask,
.station-helper-action {
  background: linear-gradient(135deg, var(--gold-light), #efad37);
  color: #15100a;
  border-color: rgba(255, 213, 108, 0.76);
}

.station-helper-ask {
  min-width: 4.4rem;
  padding: 0.55rem 0.92rem;
  font-size: 0.94rem;
}

.station-helper-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin: 0.72rem 0 0;
}

.station-helper-action,
.station-helper-related-button { padding: 0.5rem 0.72rem; }

.station-helper-related {
  margin-top: 0.72rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 213, 108, 0.16);
}

.station-helper-related-button {
  display: block;
  width: 100%;
  margin-top: 0.38rem;
  text-align: left;
}

.station-helper-chip:hover,
.station-helper-chip:focus-visible,
.station-helper-related-button:hover,
.station-helper-related-button:focus-visible,
.station-helper-close:hover,
.station-helper-close:focus-visible,
.station-helper-action:hover,
.station-helper-action:focus-visible {
  border-color: var(--gold-light);
  background: rgba(255, 213, 108, 0.13);
  outline: none;
}

.station-helper.has-gentle-prompt .station-helper-toggle::after {
  content: "Need help?";
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.5rem);
  white-space: nowrap;
  border: 1px solid rgba(255, 213, 108, 0.45);
  border-radius: 999px;
  padding: 0.45rem 0.75rem;
  background: rgba(8, 27, 40, 0.96);
  color: var(--cream);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
}

html[data-theme="light"]:not([data-contrast="high"]) .station-helper-panel {
  background: linear-gradient(180deg, #fffbf3, #f3e4cd);
  color: #21160c;
  border-color: rgba(161, 100, 20, 0.36);
}

html[data-theme="light"]:not([data-contrast="high"]) .station-helper-header,
html[data-theme="light"]:not([data-contrast="high"]) .station-helper-compose {
  background: rgba(255, 250, 240, 0.88);
}

html[data-theme="light"]:not([data-contrast="high"]) .station-helper-title-wrap p,
html[data-theme="light"]:not([data-contrast="high"]) .station-helper-bubble p,
html[data-theme="light"]:not([data-contrast="high"]) .station-helper-search input::placeholder {
  color: #604f3c;
}

html[data-theme="light"]:not([data-contrast="high"]) .station-helper-bubble-bot,
html[data-theme="light"]:not([data-contrast="high"]) .station-helper-search input,
html[data-theme="light"]:not([data-contrast="high"]) .station-helper-chip,
html[data-theme="light"]:not([data-contrast="high"]) .station-helper-related-button,
html[data-theme="light"]:not([data-contrast="high"]) .station-helper-close {
  background: rgba(255, 255, 255, 0.78);
  color: #21160c;
  border-color: rgba(161, 100, 20, 0.28);
}

html[data-theme="light"]:not([data-contrast="high"]) .station-helper-bubble strong,
html[data-theme="light"]:not([data-contrast="high"]) .station-helper-search input,
html[data-theme="light"]:not([data-contrast="high"]) .station-helper-close {
  color: #21160c;
}

html[data-theme="light"]:not([data-contrast="high"]) .station-helper-meta,
html[data-theme="light"]:not([data-contrast="high"]) .station-helper-suggestions-title,
html[data-theme="light"]:not([data-contrast="high"]) .station-helper-related p,
html[data-theme="light"]:not([data-contrast="high"]) .station-helper-title-wrap h2 {
  color: #8b540d;
}

html[data-contrast="high"] .station-helper-panel,
html[data-contrast="high"] .station-helper-bubble,
html[data-contrast="high"] .station-helper-user {
  border-color: rgba(255, 224, 130, 0.9);
}

@media (max-width: 720px) {
  .station-helper {
    left: auto;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .station-helper-toggle { min-height: 3rem; }

  .station-helper-panel {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    width: auto;
    height: min(31rem, 68dvh);
    max-height: calc(100dvh - 5.2rem);
    border-radius: 20px;
  }

  .station-helper-header { padding: 0.78rem 0.82rem; }
  .station-helper-title-wrap h2 { font-size: 1.18rem; }
  .station-helper-title-wrap p { font-size: 0.82rem; }
  .station-helper-messages { padding: 0.7rem 0.65rem; }
  .station-helper-compose { padding: 0.55rem 0.55rem 0.65rem; }
  .station-helper-bubble {
    max-width: 96%;
    padding: 0.7rem 0.78rem;
  }
  .station-helper-bubble p { font-size: 0.93rem; line-height: 1.42; }
  .station-helper-bubble strong { font-size: 0.97rem; line-height: 1.22; }
  .station-helper-related-button {
    font-size: 0.88rem;
    padding: 0.5rem 0.7rem;
  }

  .station-helper.has-gentle-prompt .station-helper-toggle::after { display: none; }
}

@media (max-width: 410px) {
  .station-helper-toggle-text { display: none; }
  .station-helper-toggle { padding-right: 0.55rem; }
  .station-helper-mark { width: 2.12rem; height: 2.12rem; }
  .station-helper-panel { left: 0.4rem; right: 0.4rem; height: min(30rem, 66dvh); }
  .station-helper-close { min-width: 3.5rem; }
  .station-helper-bubble {
    max-width: 100%;
    padding: 0.65rem 0.72rem;
  }
  .station-helper-bubble p { font-size: 0.9rem; }
}

html[data-text="x-large"] .station-helper,
html[data-text="xx-large"] .station-helper { font-size: 0.94rem; }

html[data-text="xx-large"] .station-helper-panel { height: min(32rem, 72dvh); }

html[data-text="xx-large"] .station-helper-chip { max-width: 82vw; }

html[data-motion="reduced"] .station-helper-toggle,
html[data-motion="reduced"] .station-helper-toggle:hover,
html[data-motion="reduced"] .station-helper-toggle:focus-visible { transform: none; }

@media print { .station-helper { display: none !important; } }

/* Light mode readability polish across public pages */
html[data-theme="light"]:not([data-contrast="high"]) .player-card,
html[data-theme="light"]:not([data-contrast="high"]) .about-strip,
html[data-theme="light"]:not([data-contrast="high"]) .schedule-card,
html[data-theme="light"]:not([data-contrast="high"]) .how-panel,
html[data-theme="light"]:not([data-contrast="high"]) .support-panel,
html[data-theme="light"]:not([data-contrast="high"]) .news-card,
html[data-theme="light"]:not([data-contrast="high"]) .info-page,
html[data-theme="light"]:not([data-contrast="high"]) .action-row > a,
html[data-theme="light"]:not([data-contrast="high"]) .action-row > .action-button {
  background: linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(247, 235, 216, 0.98));
  color: #21160c;
  border-color: rgba(171, 111, 24, 0.42);
  box-shadow: 0 16px 42px rgba(85, 55, 20, 0.18);
}

html[data-theme="light"]:not([data-contrast="high"]) .player-card h2,
html[data-theme="light"]:not([data-contrast="high"]) .schedule-card h2,
html[data-theme="light"]:not([data-contrast="high"]) .about-strip h2,
html[data-theme="light"]:not([data-contrast="high"]) .how-panel h2,
html[data-theme="light"]:not([data-contrast="high"]) .support-panel h2,
html[data-theme="light"]:not([data-contrast="high"]) .info-page h1,
html[data-theme="light"]:not([data-contrast="high"]) .info-page h2,
html[data-theme="light"]:not([data-contrast="high"]) .action-row strong,
html[data-theme="light"]:not([data-contrast="high"]) .footer-mark,
html[data-theme="light"]:not([data-contrast="high"]) .site-footer nav a {
  color: #21160c;
}

html[data-theme="light"]:not([data-contrast="high"]) .section-title,
html[data-theme="light"]:not([data-contrast="high"]) .mini-label,
html[data-theme="light"]:not([data-contrast="high"]) .schedule-days,
html[data-theme="light"]:not([data-contrast="high"]) .news-item h3,
html[data-theme="light"]:not([data-contrast="high"]) .info-page h2,
html[data-theme="light"]:not([data-contrast="high"]) .np-row > span:last-child,
html[data-theme="light"]:not([data-contrast="high"]) #coming-up {
  color: #8b540d;
}

html[data-theme="light"]:not([data-contrast="high"]) .play-subtitle,
html[data-theme="light"]:not([data-contrast="high"]) .player-note,
html[data-theme="light"]:not([data-contrast="high"]) .schedule-card p,
html[data-theme="light"]:not([data-contrast="high"]) .about-strip p,
html[data-theme="light"]:not([data-contrast="high"]) .how-panel p,
html[data-theme="light"]:not([data-contrast="high"]) .support-panel p,
html[data-theme="light"]:not([data-contrast="high"]) .news-date,
html[data-theme="light"]:not([data-contrast="high"]) .news-body,
html[data-theme="light"]:not([data-contrast="high"]) .action-row .action-sub,
html[data-theme="light"]:not([data-contrast="high"]) .site-footer p,
html[data-theme="light"]:not([data-contrast="high"]) .licensed-by,
html[data-theme="light"]:not([data-contrast="high"]) #previous-list,
html[data-theme="light"]:not([data-contrast="high"]) .info-page p,
html[data-theme="light"]:not([data-contrast="high"]) .info-page li {
  color: #604f3c;
}

html[data-theme="light"]:not([data-contrast="high"]) .np-row strong,
html[data-theme="light"]:not([data-contrast="high"]) .schedule-time strong,
html[data-theme="light"]:not([data-contrast="high"]) .notice strong {
  color: #21160c;
}

html[data-theme="light"]:not([data-contrast="high"]) .schedule-time,
html[data-theme="light"]:not([data-contrast="high"]) .news-item,
html[data-theme="light"]:not([data-contrast="high"]) .np-icon,
html[data-theme="light"]:not([data-contrast="high"]) .np-status-card,
html[data-theme="light"]:not([data-contrast="high"]) .np-track-card,
html[data-theme="light"]:not([data-contrast="high"]) .np-mini-card,
html[data-theme="light"]:not([data-contrast="high"]) .how-panel li {
  background: rgba(255, 255, 255, 0.64);
  border-color: rgba(171, 111, 24, 0.24);
}

html[data-theme="light"]:not([data-contrast="high"]) .site-footer .socials a {
  background: #21160c;
  color: #fff8ec;
}

html[data-theme="light"]:not([data-contrast="high"]) .info-page .back-link {
  color: #1a1006;
}

html[data-theme="light"]:not([data-contrast="high"]) .support-panel .script,
html[data-theme="light"]:not([data-contrast="high"]) .support-panel .support-note {
  color: #8b540d;
}

/* Final accessibility and light-mode stability pass */

/* Keep large text useful without allowing controls to force horizontal scrolling. */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

/* The helper is a fixed UI component, so it uses its own safe scale instead of inheriting the page's largest reading size. */
.station-helper,
.station-helper * {
  box-sizing: border-box;
}

.station-helper {
  max-width: calc(100dvw - 16px);
  font-size: 16px;
  line-height: 1.45;
}

html[data-text="large"] .station-helper,
html[data-text="x-large"] .station-helper,
html[data-text="xx-large"] .station-helper {
  font-size: 16px;
}

.station-helper-panel {
  max-width: calc(100dvw - 16px);
  overflow-x: hidden;
}

.station-helper-header,
.station-helper-title-wrap,
.station-helper-body,
.station-helper-messages,
.station-helper-compose,
.station-helper-search,
.station-helper-suggestions,
.station-helper-chip-list,
.station-helper-row,
.station-helper-bubble {
  min-width: 0;
  max-width: 100%;
}

.station-helper-title-wrap h2,
.station-helper-title-wrap p,
.station-helper-bubble,
.station-helper-bubble p,
.station-helper-bubble strong,
.station-helper-chip,
.station-helper-related-button,
.station-helper-action {
  overflow-wrap: anywhere;
  word-break: normal;
}

.station-helper-chip-list {
  flex-wrap: wrap;
  overflow-x: hidden;
  max-height: 7.5rem;
  overflow-y: auto;
  padding-right: 0.1rem;
}

.station-helper-chip {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

.station-helper-close {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .station-helper {
    left: auto;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    max-width: calc(100dvw - 20px);
  }

  .station-helper-panel {
    position: fixed;
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    top: max(8px, env(safe-area-inset-top));
    bottom: max(8px, env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    border-radius: 20px;
  }

  .station-helper-header {
    gap: 0.55rem;
    padding: 0.72rem 0.72rem;
  }

  .station-helper-title-wrap h2 {
    font-size: 1.14rem;
  }

  .station-helper-title-wrap p {
    font-size: 0.82rem;
  }

  .station-helper-close {
    min-width: 3.25rem;
    min-height: 2.35rem;
    padding: 0.42rem 0.62rem;
    font-size: 0.86rem;
  }

  .station-helper-messages {
    padding: 0.72rem;
  }

  .station-helper-compose {
    padding: 0.62rem;
  }

  .station-helper-bubble {
    max-width: 90%;
    padding: 0.7rem 0.76rem;
  }

  .station-helper-search {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .station-helper-search input {
    min-height: 2.62rem;
    padding: 0.6rem 0.78rem;
  }

  .station-helper-ask {
    min-width: 3.7rem;
    padding: 0.5rem 0.7rem;
  }
}

@media (max-width: 380px) {
  .station-helper-search,
  html[data-text="x-large"] .station-helper-search,
  html[data-text="xx-large"] .station-helper-search {
    grid-template-columns: 1fr;
  }

  .station-helper-ask {
    width: 100%;
  }

  .station-helper-toggle-text {
    display: inline;
  }

  .station-helper-toggle {
    padding: 0.48rem 0.68rem 0.48rem 0.5rem;
  }
}

html[data-text="xx-large"] .station-helper-chip {
  max-width: 100%;
}


.station-helper-messages {
  align-content: start;
  scroll-padding-top: 0.5rem;
}

.station-helper-body {
  min-height: 0;
}

.station-helper-messages::-webkit-scrollbar {
  width: 10px;
}

.station-helper-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 213, 108, 0.22);
  border-radius: 999px;
}

html[data-text="xx-large"] .station-helper-panel {
  height: auto;
  max-height: none;
}

/* Light mode coverage for request/song modal and accessibility dialog */
html[data-theme="light"]:not([data-contrast="high"]) .modal-dialog,
html[data-theme="light"]:not([data-contrast="high"]) .a11y-dialog {
  background: linear-gradient(180deg, rgba(255, 252, 246, 0.99), rgba(247, 236, 219, 0.99)) !important;
  color: #21160c !important;
  border-color: rgba(143, 89, 14, 0.42) !important;
}

html[data-theme="light"]:not([data-contrast="high"]) .modal-dialog h2,
html[data-theme="light"]:not([data-contrast="high"]) .a11y-dialog h2,
html[data-theme="light"]:not([data-contrast="high"]) .form-row label,
html[data-theme="light"]:not([data-contrast="high"]) .a11y-group legend,
html[data-theme="light"]:not([data-contrast="high"]) .a11y-label {
  color: #21160c !important;
}

html[data-theme="light"]:not([data-contrast="high"]) .modal-dialog p.help,
html[data-theme="light"]:not([data-contrast="high"]) .a11y-dialog p.help,
html[data-theme="light"]:not([data-contrast="high"]) .form-fallback,
html[data-theme="light"]:not([data-contrast="high"]) .a11y-group p,
html[data-theme="light"]:not([data-contrast="high"]) .a11y-note,
html[data-theme="light"]:not([data-contrast="high"]) .request-phone-help {
  color: #604f3c !important;
}

html[data-theme="light"]:not([data-contrast="high"]) .form-row input,
html[data-theme="light"]:not([data-contrast="high"]) .form-row textarea,
html[data-theme="light"]:not([data-contrast="high"]) .form-row select,
html[data-theme="light"]:not([data-contrast="high"]) .a11y-choice,
html[data-theme="light"]:not([data-contrast="high"]) .a11y-dialog select {
  background: rgba(255, 255, 255, 0.86) !important;
  color: #21160c !important;
  border-color: rgba(143, 89, 14, 0.28) !important;
}

html[data-theme="light"]:not([data-contrast="high"]) .form-row input::placeholder,
html[data-theme="light"]:not([data-contrast="high"]) .form-row textarea::placeholder {
  color: rgba(33, 22, 12, 0.52) !important;
}

html[data-theme="light"]:not([data-contrast="high"]) .form-cancel,
html[data-theme="light"]:not([data-contrast="high"]) .modal-close-x {
  background: rgba(255, 255, 255, 0.78) !important;
  color: #21160c !important;
  border-color: rgba(143, 89, 14, 0.28) !important;
}

html[data-theme="light"]:not([data-contrast="high"]) .form-submit,
html[data-theme="light"]:not([data-contrast="high"]) .a11y-choice.is-active,
html[data-theme="light"]:not([data-contrast="high"]) .a11y-choice[aria-pressed="true"] {
  color: #1d1002 !important;
}

html[data-theme="light"]:not([data-contrast="high"]) .request-phone-help a,
html[data-theme="light"]:not([data-contrast="high"]) .form-fallback a,
html[data-theme="light"]:not([data-contrast="high"]) .modal-dialog a,
html[data-theme="light"]:not([data-contrast="high"]) .a11y-dialog a {
  color: #8a5209 !important;
}

/* Light mode should be a readable light theme, not pale text over dark inherited cards. */
html[data-theme="light"]:not([data-contrast="high"]) body {
  color: #21160c;
}

html[data-theme="light"]:not([data-contrast="high"]) .announcement-banner,
html[data-theme="light"]:not([data-contrast="high"]) .player-card,
html[data-theme="light"]:not([data-contrast="high"]) .now-playing,
html[data-theme="light"]:not([data-contrast="high"]) .about-strip,
html[data-theme="light"]:not([data-contrast="high"]) .schedule-card,
html[data-theme="light"]:not([data-contrast="high"]) .how-panel,
html[data-theme="light"]:not([data-contrast="high"]) .support-panel,
html[data-theme="light"]:not([data-contrast="high"]) .news-card,
html[data-theme="light"]:not([data-contrast="high"]) .info-page {
  background: linear-gradient(180deg, rgba(255, 252, 246, 0.99), rgba(247, 236, 219, 0.99)) !important;
  color: #21160c !important;
  border-color: rgba(143, 89, 14, 0.42) !important;
}

html[data-theme="light"]:not([data-contrast="high"]) .now-playing-head,
html[data-theme="light"]:not([data-contrast="high"]) .now-playing .section-title,
html[data-theme="light"]:not([data-contrast="high"]) .now-playing h2,
html[data-theme="light"]:not([data-contrast="high"]) .player-card h2,
html[data-theme="light"]:not([data-contrast="high"]) .schedule-card h2,
html[data-theme="light"]:not([data-contrast="high"]) .about-strip h2,
html[data-theme="light"]:not([data-contrast="high"]) .how-panel h2,
html[data-theme="light"]:not([data-contrast="high"]) .support-panel h2,
html[data-theme="light"]:not([data-contrast="high"]) .info-page h1,
html[data-theme="light"]:not([data-contrast="high"]) .info-page h2 {
  color: #21160c !important;
}

html[data-theme="light"]:not([data-contrast="high"]) .section-title,
html[data-theme="light"]:not([data-contrast="high"]) .mini-label,
html[data-theme="light"]:not([data-contrast="high"]) .schedule-days,
html[data-theme="light"]:not([data-contrast="high"]) .now-playing .np-row strong,
html[data-theme="light"]:not([data-contrast="high"]) .np-status-card .mini-label,
html[data-theme="light"]:not([data-contrast="high"]) .np-track-card .mini-label,
html[data-theme="light"]:not([data-contrast="high"]) .np-mini-card .mini-label,
html[data-theme="light"]:not([data-contrast="high"]) .support-panel .script,
html[data-theme="light"]:not([data-contrast="high"]) .support-panel .support-note {
  color: #724507 !important;
}

html[data-theme="light"]:not([data-contrast="high"]) .now-playing-subtitle,
html[data-theme="light"]:not([data-contrast="high"]) .play-subtitle,
html[data-theme="light"]:not([data-contrast="high"]) .player-note,
html[data-theme="light"]:not([data-contrast="high"]) .schedule-card p,
html[data-theme="light"]:not([data-contrast="high"]) .about-strip p,
html[data-theme="light"]:not([data-contrast="high"]) .how-panel p,
html[data-theme="light"]:not([data-contrast="high"]) .support-panel p,
html[data-theme="light"]:not([data-contrast="high"]) .info-page p,
html[data-theme="light"]:not([data-contrast="high"]) .info-page li,
html[data-theme="light"]:not([data-contrast="high"]) #previous-list,
html[data-theme="light"]:not([data-contrast="high"]) #previous-list li {
  color: #4e4032 !important;
}

html[data-theme="light"]:not([data-contrast="high"]) .np-status-card,
html[data-theme="light"]:not([data-contrast="high"]) .np-track-card,
html[data-theme="light"]:not([data-contrast="high"]) .np-mini-card,
html[data-theme="light"]:not([data-contrast="high"]) .schedule-time,
html[data-theme="light"]:not([data-contrast="high"]) .how-panel li,
html[data-theme="light"]:not([data-contrast="high"]) .news-item {
  background: rgba(255, 255, 255, 0.76) !important;
  border-color: rgba(143, 89, 14, 0.24) !important;
  color: #21160c !important;
}

html[data-theme="light"]:not([data-contrast="high"]) .now-playing .np-row > span:last-child,
html[data-theme="light"]:not([data-contrast="high"]) #artist,
html[data-theme="light"]:not([data-contrast="high"]) #title,
html[data-theme="light"]:not([data-contrast="high"]) #coming-up {
  color: #8a5209 !important;
}

html[data-theme="light"]:not([data-contrast="high"]) .site-footer,
html[data-theme="light"]:not([data-contrast="high"]) .site-footer nav,
html[data-theme="light"]:not([data-contrast="high"]) .licensed-by {
  color: #3f3225 !important;
}

html[data-theme="light"]:not([data-contrast="high"]) .site-footer nav a,
html[data-theme="light"]:not([data-contrast="high"]) .site-footer nav .footer-link-button {
  color: #21160c !important;
}

/* Light-mode hero: swap to the dedicated light-mode hero image. */
html[data-theme="light"]:not([data-contrast="high"]) .hero-card {
  background:
    linear-gradient(90deg,
      rgba(255, 246, 226, 0.55) 0%,
      rgba(255, 246, 226, 0.18) 35%,
      rgba(255, 246, 226, 0.0) 60%),
    url("assets/images/jim-hero-studio-light-v1.webp") 70% center / cover no-repeat;
  border-color: rgba(171, 111, 24, 0.32);
}

html[data-theme="light"]:not([data-contrast="high"]) .hero-card::before {
  background: linear-gradient(90deg,
    rgba(255, 246, 226, 0.10) 0%,
    rgba(255, 246, 226, 0.0) 40%,
    rgba(8, 18, 32, 0.0) 65%,
    rgba(8, 18, 32, 0.04) 100%);
}

html[data-theme="light"]:not([data-contrast="high"]) .hero-card h1,
html[data-theme="light"]:not([data-contrast="high"]) .hero-card .script,
html[data-theme="light"]:not([data-contrast="high"]) .hero-card .place {
  color: #21160c !important;
  text-shadow: none;
}

html[data-theme="light"]:not([data-contrast="high"]) .hero-card .script,
html[data-theme="light"]:not([data-contrast="high"]) .hero-card .place {
  color: #8b540d !important;
}

/* Light-mode hero on narrow phones: same image, top-down wash. */
@media (max-width: 640px) {
  html[data-theme="light"]:not([data-contrast="high"]) .hero-card {
    background:
      linear-gradient(180deg,
        rgba(255, 246, 226, 0.45) 0%,
        rgba(255, 246, 226, 0.15) 45%,
        rgba(255, 246, 226, 0.0) 75%,
        rgba(255, 246, 226, 0.0) 100%),
      url("assets/images/jim-hero-studio-light-v1.webp") 70% center / cover no-repeat;
  }
}


html[data-theme="light"]:not([data-contrast="high"]) .listen-option-card {
  background: rgba(255, 255, 255, 0.76) !important;
  color: #21160c !important;
  border-color: rgba(143, 89, 14, 0.26) !important;
}

html[data-theme="light"]:not([data-contrast="high"]) .listen-option-copy strong {
  color: #21160c !important;
}

html[data-theme="light"]:not([data-contrast="high"]) .listen-option-copy p {
  color: #604f3c !important;
}

/* === 2026-05-15 polish: targeted gaps in light mode === */

/* Volume slider row had no visible surface in light mode; on the cream page it
   read as a bare strip. Subtle cream surface + warm accent. */
html[data-theme="light"]:not([data-contrast="high"]) .volume-line {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(171, 111, 24, 0.18);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
}

html[data-theme="light"]:not([data-contrast="high"]) .volume-line input[type="range"] {
  accent-color: #b56b0e;
}

/* Programme status banner (Jim live / repeat show / 24-hour playlist) had only
   dark-mode styling. Give it a visible cream panel in light mode. */
html[data-theme="light"]:not([data-contrast="high"]) .broadcast-status,
html[data-theme="light"]:not([data-contrast="high"]) .programme-status {
  background: rgba(255, 245, 220, 0.85) !important;
  border: 1px solid rgba(171, 111, 24, 0.28) !important;
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  color: #21160c !important;
}

html[data-theme="light"]:not([data-contrast="high"]) .broadcast-status strong,
html[data-theme="light"]:not([data-contrast="high"]) .programme-status strong {
  color: #21160c !important;
}

html[data-theme="light"]:not([data-contrast="high"]) .broadcast-status .mini-label,
html[data-theme="light"]:not([data-contrast="high"]) .programme-status .mini-label {
  color: #8b540d !important;
}

html[data-theme="light"]:not([data-contrast="high"]) .programme-status span {
  color: #3f3225 !important;
}

/* Tiny-screen layout fix: LIVE badge column squashed the play-copy on phones
   under 380px. Hide the badge entirely there (listeners know it's the live
   stream — the badge is redundant at that width). */
@media (max-width: 380px) {
  .player-top {
    grid-template-columns: auto 1fr;
  }
  .live-badge {
    display: none;
  }
}

/* === 2026-05-15 final: CLS / layout stability fixes ===
   Lighthouse reported CLS 0.286. Sources are dynamic panels that go from
   display:none to visible after the first metadata fetch and the first
   managed-content load. We use two patterns:

   1. For sibling-row elements (status pills) that should reserve a fixed
      width slot, we replace display:none with visibility:hidden and
      preserve the layout slot. The element remains semantically [hidden]
      to assistive tech because aria-hidden is implied by visibility:hidden
      in supporting screen readers.

   2. For container panels whose vertical height grows on first load
      (.now-playing, #previous-list), we set a min-height so subsequent
      paints can only ADD content within the reserved height instead of
      pushing the page.

   CSS-only. Revert by removing this block. */

/* Listener count pill in the hero status row.
   When hidden, occupy the slot but stay invisible & non-interactive. */
.status-pills .listener-panel[hidden] {
  display: inline-flex;
  visibility: hidden;
  pointer-events: none;
}

/* Programme status banner inside the Now Playing panel. */
#programme-status[hidden],
.broadcast-status[hidden] {
  display: grid;
  visibility: hidden;
  pointer-events: none;
  min-height: 3.2rem;
}

/* Coming Up Next card. */
.queue-card#coming-up-row[hidden] {
  display: block;
  visibility: hidden;
  pointer-events: none;
  min-height: 4rem;
}

/* Container reservations for the Now Playing panel and Previously Played
   list. These keep the overall page height stable as the metadata Worker's
   response is rendered into child slots. */
.now-playing {
  min-height: clamp(280px, 38vw, 360px);
}

#previous-list {
  min-height: 8.5rem;
}

/* Reduce motion: prevent the Station Helper's animation-driven appearance
   from contributing to first-paint shift on reduced-motion devices. */
@media (prefers-reduced-motion: reduce) {
  .station-helper-toggle,
  .station-helper-window {
    animation: none !important;
    transition: none !important;
  }
}

/* === 2026-05-15 final v2: targeted CLS fix for hero-card + player-card ===
   Lighthouse identified two shifting sections at Moto G4 width:
   - .hero-card  contribution 0.174
   - .player-card contribution 0.111

   Root cause analysis:
   1. .hero-card grows when #listener-panel un-hides because the previous
      rule .hero-card .listener-panel[hidden] { display: none !important }
      in 07-now-playing-polish.css line 621 wins specificity over any non-
      important override. The status-pills row goes from 1 pill to 2 pills,
      sometimes wrapping to 2 lines on narrow phones, growing the card.
   2. .player-card shift is largely caused by the hero growing above it.
      Defence-in-depth: explicit min-height on the player card.

   Fix: same-specificity-or-higher !important override that keeps the
   listener-panel slot reserved as visibility:hidden when [hidden]; and
   a larger, more accurate min-height on .hero-card and .player-card at
   mobile widths so the cards do not grow once data arrives. */

/* (1) Hero status-pills: reserve the listener-pill slot from first paint.
       Higher specificity than 07-now-playing-polish.css line 621, and
       !important to match its !important.
       Note: visibility:hidden keeps a CSS slot but also removes the element
       from the accessibility tree, so this stays semantically equivalent to
       the [hidden] attribute for assistive tech. */
.hero-card .status-pills .listener-panel[hidden] {
  display: inline-flex !important;
  visibility: hidden;
  pointer-events: none;
  min-width: 7.5rem;
}

/* When the listener-panel becomes visible, keep the same min-width so the
   label change from "Checking…" to "N listening" does not change pill
   width and re-flow the status row. */
.hero-card .status-pills .listener-panel {
  min-width: 7.5rem;
  justify-content: flex-start;
}

/* (2) Removed: the .hero-card / .player-card min-height rules from the
   previous failed attempt. Lighthouse confirmed those elements were not
   growing in place — they were being displaced by a banner injected
   above them in the DOM. Reserving height inside the cards did nothing.
   Real fix is rendered in HTML (see static announcement banner in
   index.html and the corresponding JS update in managed-content.js). */

/* Light-mode tweaks for the consent banner. */
html[data-theme="light"]:not([data-contrast="high"]) .consent-banner {
  background: rgba(255, 252, 242, 0.98) !important;
  color: #21160c !important;
  border-color: rgba(143, 89, 14, 0.5) !important;
}
html[data-theme="light"]:not([data-contrast="high"]) .consent-banner-title {
  color: #7a4f04 !important;
}
html[data-theme="light"]:not([data-contrast="high"]) .consent-banner-actions .secondary-button {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #21160c !important;
  border-color: rgba(143, 89, 14, 0.4) !important;
}