:root {
  color-scheme: dark;
  --bg-top: #0a0d13;
  --bg-bottom: #05060a;
  --surface: #10141c;
  --line: rgb(255 255 255 / 8%);
  --text: #f5f7fb;
  --muted: #838c99;
  --orange: #ff6637;
  --orange-bright: #ff8b4b;
  --orange-soft: rgb(255 102 55 / 12%);
  --live: #ff3b5c;
  --shadow: 0 18px 46px rgb(0 0 0 / 40%);

  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  min-height: 100dvh;
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}

button,
input {
  font: inherit;
  color: inherit;
}

button:focus-visible,
input:focus-visible {
  outline: 2px solid rgb(255 139 75 / 55%);
  outline-offset: 3px;
}

.listen-shell {
  width: min(420px, calc(100% - 32px));
  max-height: 100dvh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 18%) transparent;
  padding: clamp(16px, 4dvh, 34px) 22px;
  padding-top: max(clamp(16px, 4dvh, 34px), env(safe-area-inset-top));
  padding-bottom: max(clamp(16px, 4dvh, 34px), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(8px, 1.6dvh, 15px);
}

.station-mark {
  display: flex;
  align-items: center;
  gap: 9px;
}

.station-mark img {
  width: clamp(26px, 5dvh, 36px);
  height: clamp(26px, 5dvh, 36px);
  border-radius: 8px;
}

.station-name {
  font-size: clamp(14px, 3dvh, 17px);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.program-eyebrow {
  margin: clamp(2px, 0.6dvh, 8px) 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--orange-bright);
}

.program-name {
  margin: 0;
  font-size: clamp(14px, 2.8dvh, 20px);
  line-height: 1.15;
  font-weight: 700;
  color: var(--text);
}

.program-description {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(12px, 2.1dvh, 14px);
  line-height: 1.5;
  color: var(--muted);
}

.special-broadcast-card {
  position: relative;
  width: 100%;
  max-height: min(190px, 24dvh);
  overflow-y: auto;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--orange);
  text-align: left;
}

.special-broadcast-card[hidden] {
  display: none;
}

.special-broadcast-card > span {
  display: block;
  margin-bottom: 6px;
  color: var(--orange-bright);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.special-broadcast-card p {
  margin: 0;
  color: var(--text);
  font-size: clamp(12px, 2.1dvh, 14px);
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 1px;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}

.live-pill[data-state="live"] {
  border-color: rgb(255 59 92 / 40%);
  color: #ffb3c1;
}

.live-pill[data-state="live"] .live-dot {
  background: var(--live);
  box-shadow: 0 0 0 0 rgb(255 59 92 / 55%);
  animation: live-pulse 1.6s ease-out infinite;
}

.live-pill[data-state="off"] .live-dot {
  background: var(--muted);
}

.live-pill[data-state="unknown"] .live-dot {
  background: var(--muted);
  opacity: 0.6;
}

@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgb(255 59 92 / 50%); }
  100% { box-shadow: 0 0 0 8px rgb(255 59 92 / 0%); }
}

.next-air {
  font-size: 11px;
  color: var(--muted);
}

.play-button {
  position: relative;
  flex-shrink: 0;
  width: clamp(76px, 15dvh, 110px);
  height: clamp(76px, 15dvh, 110px);
  margin-top: clamp(4px, 1dvh, 10px);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0604;
  background: var(--orange);
  box-shadow: var(--shadow);
  transition: transform 0.15s ease;
}

.play-button:hover {
  transform: scale(1.03);
}

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

/* The button color never changes with state -- the wave-bar animation
   speed alone communicates idle/connecting/playing (see below), which
   reads calmer and more deliberate than swapping the button's color. */
.radio-waves {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5%;
  width: 44%;
  height: 38%;
}

.radio-waves i {
  display: block;
  flex: 1;
  height: 28%;
  min-height: 4px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.55;
  animation: radio-wave 1.1s ease-in-out infinite;
}

.radio-waves i:nth-child(1) { animation-delay: -1s; }
.radio-waves i:nth-child(2) { animation-delay: -0.7s; }
.radio-waves i:nth-child(3) { animation-delay: -0.4s; }
.radio-waves i:nth-child(4) { animation-delay: -0.85s; }
.radio-waves i:nth-child(5) { animation-delay: -0.55s; }

@keyframes radio-wave {
  0%, 100% { transform: scaleY(0.32); opacity: 0.45; }
  50% { transform: scaleY(1); opacity: 1; }
}

.play-button[data-state="idle"] .radio-waves i {
  animation-duration: 2.6s;
  opacity: 0.4;
}

.play-button[data-state="connecting"] .radio-waves i {
  animation-duration: 0.6s;
}

.play-button[data-state="playing"] .radio-waves i {
  animation-duration: 1.1s;
}

.play-hint {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  min-height: 1.4em;
}

.volume-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(200px, 74%);
  color: var(--muted);
}

.volume-slider {
  flex: 1;
  accent-color: var(--orange);
}

.install-banner {
  width: 100%;
  margin-top: clamp(4px, 1dvh, 10px);
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--orange);
  text-align: left;
}

.install-banner[hidden] {
  display: none;
}

.install-banner-title {
  margin: 0 0 4px;
  color: var(--orange-bright);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.install-banner-text {
  margin: 0;
  color: var(--text);
  font-size: clamp(11px, 2dvh, 13px);
  line-height: 1.5;
}

.install-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 9px;
}

.install-dismiss {
  padding: 6px 13px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.install-dismiss:hover {
  color: var(--text);
  border-color: rgb(255 255 255 / 20%);
}

.install-button {
  padding: 6px 15px;
  color: #0a0604;
  background: var(--orange);
  border: none;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.install-button:hover {
  background: var(--orange-bright);
}

.site-footer {
  margin: clamp(2px, 0.6dvh, 8px) 0 0;
}

.site-footer p {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--muted);
  opacity: 0.7;
}

/* In-page navigation targets: keep a little breathing room above a section
   when the nav scrolls to it, so its heading never lands flush at the edge. */
#inicio,
#programacao,
#nowPlayingCard,
#patrocinadores {
  scroll-margin-top: 14px;
}

.sponsors-section {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.sponsors-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}

.sponsors-heading svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--orange-bright);
}

.sponsors-heading h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sponsors-lead {
  margin: 0 0 13px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.sponsors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.sponsor-slot {
  display: grid;
  place-items: center;
  min-height: 58px;
  padding: 8px;
  border: 1px dashed rgb(255 255 255 / 14%);
  border-radius: 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgb(255 255 255 / 2%);
  text-align: center;
}

.sponsor-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: #150a05;
  background: linear-gradient(135deg, var(--orange-bright), var(--orange));
  box-shadow: 0 10px 24px rgb(255 83 30 / 22%);
}

.sponsor-cta:hover,
.sponsor-cta:focus-visible {
  filter: brightness(1.06);
}

/* Peça sua Música — two request forms inside the nav panel */
.requests-panel { display: flex; flex-direction: column; gap: 14px; }

.request-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgb(255 255 255 / 3%);
}

.request-card-title {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--text);
}

.request-card-intro {
  margin: -4px 0 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.request-field { display: grid; gap: 5px; }

.request-field-label {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.request-input {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: rgb(0 0 0 / 26%);
}

.request-input::placeholder { color: rgb(255 255 255 / 32%); }

.request-input:focus-visible {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgb(255 83 30 / 18%);
}

.request-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 4px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #150a05;
  cursor: pointer;
  background: linear-gradient(135deg, var(--orange-bright), var(--orange));
  box-shadow: 0 10px 24px rgb(255 83 30 / 22%);
}

.request-submit:hover,
.request-submit:focus-visible { filter: brightness(1.06); }

.request-status {
  margin: 0;
  min-height: 16px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.request-status[data-state="ok"] { color: #7ee0a4; }
.request-status[data-state="error"] { color: #ff8f7a; }

/* ---- Navigation overlay panels (open from the header nav) ---- */
.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end; /* bottom sheet on mobile */
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nav-panel.is-open { opacity: 1; }
.nav-panel[hidden] { display: none; }

.nav-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(3 5 9 / 62%);
  backdrop-filter: blur(3px);
}

.nav-panel-card {
  position: relative;
  width: 100%;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  background: var(--surface);
  box-shadow: 0 -18px 50px rgb(0 0 0 / 45%);
  transform: translateY(16px);
  transition: transform 0.22s ease;
}
.nav-panel.is-open .nav-panel-card { transform: translateY(0); }

.nav-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.nav-panel-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.nav-panel-close {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.nav-panel-close:hover { background: rgb(255 255 255 / 6%); }
.nav-panel-close svg { width: 18px; height: 18px; }

.nav-panel-body {
  padding: 16px 18px 22px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.panel-intro {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Programação — full week grid */
.week-schedule { display: flex; flex-direction: column; gap: 14px; }
.week-day {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 13px;
  background: rgb(255 255 255 / 2%);
}
.week-day.is-today {
  border-color: rgb(255 102 55 / 55%);
  background: var(--orange-soft);
}
.week-day-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.week-day-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.week-day-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #150a05;
  background: var(--orange-bright);
  padding: 2px 7px;
  border-radius: 999px;
}
.week-day-empty { margin: 0; font-size: 12.5px; color: var(--muted); }
.week-slots { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.week-slot { display: flex; gap: 12px; align-items: baseline; }
.week-slot-time {
  flex: 0 0 auto;
  min-width: 96px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--orange-bright);
}
.week-slot-info { display: flex; flex-direction: column; }
.week-slot-info strong { font-size: 13.5px; font-weight: 600; }
.week-slot-info small { font-size: 12px; color: var(--muted); }

/* Ao Vivo — live programs */
.live-programs { display: flex; flex-direction: column; gap: 12px; }
.live-program {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 16px;
  background: var(--surface);
}
.live-program.is-live {
  border-color: rgb(255 59 92 / 55%);
  box-shadow: inset 3px 0 0 var(--live);
}
.live-program-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.live-program-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.live-program-badge {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 3px 9px;
  border-radius: 999px;
}
.live-program.is-live .live-program-badge {
  color: #fff;
  background: var(--live);
  border-color: transparent;
}
.live-program-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 9px;
  font-size: 12.5px;
}
.live-program-time { color: var(--orange-bright); font-weight: 600; }
.live-program-cadence { color: var(--muted); }
.live-program-desc { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* Contato — proper contact card */
.contact-card { display: flex; flex-direction: column; }
.contact-email {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 14px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgb(255 255 255 / 3%);
}
.contact-email-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-email-value { font-size: 15px; font-weight: 600; word-break: break-all; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-btn {
  flex: 1 1 auto;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.contact-btn.primary {
  color: #150a05;
  border: none;
  background: linear-gradient(135deg, var(--orange-bright), var(--orange));
}
.contact-btn.ghost {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
}
.contact-btn.ghost:hover { background: rgb(255 255 255 / 6%); }

@media (min-width: 600px) {
  .nav-panel { align-items: center; }
  .nav-panel-card {
    width: min(560px, calc(100% - 40px));
    max-height: 84dvh;
    border-bottom: 1px solid var(--line);
    border-radius: 18px;
    transform: translateY(18px) scale(0.985);
  }
  .nav-panel.is-open .nav-panel-card { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-panel,
  .nav-panel-card { transition: none; }
}

@media (max-height: 720px) {
  .site-footer {
    display: none;
  }

  .special-broadcast-card {
    max-height: 140px;
  }
}

@media (max-height: 620px) {
  .install-banner {
    display: none;
  }
}

@media (max-height: 520px) {
  .status-row {
    display: none;
  }
}

/* Public listener app: premium editorial layout inspired by the Bio Code
   Play brand, designed independently from the reference composition. */
:root {
  --bg-top: #0b0e13;
  --bg-bottom: #07090d;
  --surface: #12161d;
  --surface-raised: #171b23;
  --line: rgb(255 255 255 / 9%);
  --line-strong: rgb(255 255 255 / 15%);
  --text: #f1ebe5;
  --muted: #909198;
  --orange: #ff642d;
  --orange-bright: #ff8a5a;
  --orange-soft: rgb(255 100 45 / 13%);
  --live: #fa394b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  min-height: 100dvh;
  display: block;
  background:
    radial-gradient(circle at 100% 30%, rgb(255 91 35 / 8%), transparent 24rem),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
}

.site-ambient {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.site-ambient::before,
.site-ambient::after {
  position: absolute;
  width: 430px;
  height: 260px;
  content: "";
  opacity: 0.55;
  background: repeating-radial-gradient(ellipse at center, transparent 0 12px, rgb(255 95 36 / 12%) 13px 14px, transparent 15px 20px);
}

.site-ambient::before {
  top: 74px;
  right: -300px;
  transform: rotate(19deg);
}

.site-ambient::after {
  bottom: 80px;
  left: -340px;
  transform: rotate(-19deg);
}

.listen-shell {
  position: relative;
  width: min(100%, 460px);
  min-height: 100dvh;
  max-height: none;
  margin: 0 auto;
  padding: max(19px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  overflow: visible;
  align-items: stretch;
  gap: 0;
  text-align: left;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
}

.station-mark {
  gap: 12px;
  color: var(--text);
  text-decoration: none;
}

.station-mark img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  box-shadow: 0 9px 20px rgb(255 83 30 / 17%);
}

.station-name {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.17em;
}

.app-menu {
  position: relative;
}

.app-menu summary {
  display: grid;
  width: 35px;
  height: 35px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  list-style: none;
  place-content: center;
  gap: 3px;
}

.app-menu summary::-webkit-details-marker {
  display: none;
}

.app-menu summary span {
  display: block;
  width: 12px;
  height: 1px;
  border-radius: 10px;
  background: var(--muted);
}

.app-menu[open] summary {
  border-color: rgb(255 100 45 / 45%);
  background: var(--orange-soft);
}

.app-menu-popover {
  position: absolute;
  z-index: 5;
  top: calc(100% + 9px);
  right: 0;
  width: min(270px, calc(100vw - 40px));
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: #151922;
  box-shadow: 0 16px 42px rgb(0 0 0 / 45%);
}

.app-menu-popover strong {
  color: var(--orange-bright);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.app-menu-popover p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.program-hero {
  padding: 25px 4px 19px;
  text-align: center;
}

.status-row {
  justify-content: center;
  margin: 0 0 17px;
}

.live-pill {
  gap: 6px;
  padding: 5px 11px;
  border-color: rgb(255 255 255 / 7%);
  background: rgb(8 10 15 / 72%);
  color: #d7d8dc;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.live-dot {
  width: 6px;
  height: 6px;
}

.program-eyebrow {
  margin: 0 0 5px;
  color: var(--orange-bright);
  font-size: 9px;
  letter-spacing: 0.15em;
}

.program-name {
  margin: 0;
  color: #f2e7dc;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 10vw, 50px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.program-description {
  max-width: 31ch;
  margin: 13px auto 0;
  color: #9b9ca1;
  font-size: 12px;
  line-height: 1.45;
}

.special-broadcast-card {
  display: flex;
  min-height: 118px;
  max-height: none;
  padding: 17px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(125deg, rgb(25 28 35 / 95%), rgb(16 19 25 / 95%));
  box-shadow: none;
  overflow: hidden;
  text-align: left;
}

.special-broadcast-card[hidden] {
  display: none;
}

.special-broadcast-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  min-width: 0;
  flex: 1;
}

.special-broadcast-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--orange);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.special-broadcast-label svg {
  width: 17px;
  height: 17px;
}

.special-broadcast-card > .special-broadcast-copy > p {
  margin: 8px 0 4px;
  color: #f2e6dc;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 5vw, 23px);
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.special-broadcast-card small {
  color: #898b91;
  font-size: 10px;
  line-height: 1.35;
}

.special-equalizer {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 3px;
  width: 94px;
  height: 68px;
  margin-left: 10px;
  background: repeating-linear-gradient(90deg, rgb(255 100 45 / 0%) 0 4px, rgb(255 100 45 / 10%) 4px 5px);
  mask-image: radial-gradient(ellipse at center, #000 15%, transparent 71%);
}

.special-equalizer i {
  width: 3px;
  height: var(--bar-height, 35%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(255 100 45 / 15%), var(--orange));
}

.special-equalizer i:nth-child(1) { --bar-height: 20%; }
.special-equalizer i:nth-child(2) { --bar-height: 55%; }
.special-equalizer i:nth-child(3) { --bar-height: 79%; }
.special-equalizer i:nth-child(4) { --bar-height: 38%; }
.special-equalizer i:nth-child(5) { --bar-height: 62%; }
.special-equalizer i:nth-child(6) { --bar-height: 90%; }
.special-equalizer i:nth-child(7) { --bar-height: 43%; }
.special-equalizer i:nth-child(8) { --bar-height: 69%; }
.special-equalizer i:nth-child(9) { --bar-height: 26%; }

.now-playing-card {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, #171b23, #12151c);
}

.program-cover {
  position: relative;
  width: 100px;
  height: 114px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 9px;
  background: #0b0d12;
}

.program-cover::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(155deg, transparent 28%, rgb(0 0 0 / 48%));
}

.program-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  opacity: 0.72;
}

.cover-mark {
  position: absolute;
  z-index: 1;
  right: 15px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
}

.cover-mark i {
  display: block;
  width: 4px;
  height: 45%;
  border-radius: 999px;
  background: var(--orange);
  box-shadow: 0 0 12px rgb(255 100 45 / 55%);
}

.cover-mark i:nth-child(2) { height: 95%; }
.cover-mark i:nth-child(3) { height: 68%; }
.cover-mark i:nth-child(4) { height: 34%; }

/* The brand "frequency" bars pulse continuously so the mark reads as a live,
   on-air audio signal instead of a static logo. Each bar runs at its own tempo
   and phase so the motion looks organic, like a real spectrum analyzer. */
.cover-mark i {
  transform-origin: bottom center;
  animation: cover-eq 1.05s ease-in-out infinite alternate;
}
.cover-mark i:nth-child(1) { animation-duration: 0.92s; animation-delay: -0.15s; }
.cover-mark i:nth-child(2) { animation-duration: 1.28s; animation-delay: -0.5s; }
.cover-mark i:nth-child(3) { animation-duration: 1.02s; animation-delay: -0.32s; }
.cover-mark i:nth-child(4) { animation-duration: 1.18s; animation-delay: -0.08s; }

@keyframes cover-eq {
  0% { transform: scaleY(0.35); }
  100% { transform: scaleY(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .cover-mark i { animation: none; }
}

.now-playing-copy {
  align-self: center;
  min-width: 0;
}

.now-playing-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.now-playing-heading p {
  margin: 0;
  color: var(--orange);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.mini-equalizer {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 15px;
}

.mini-equalizer i {
  width: 2px;
  height: 6px;
  border-radius: 5px;
  background: var(--orange);
}

.mini-equalizer i:nth-child(2) { height: 13px; }
.mini-equalizer i:nth-child(3) { height: 9px; }

.now-playing-card[data-state="playing"] .mini-equalizer i {
  animation: mini-eq 0.8s ease-in-out infinite alternate;
}

.now-playing-card[data-state="playing"] .mini-equalizer i:nth-child(2) { animation-delay: -0.25s; }
.now-playing-card[data-state="playing"] .mini-equalizer i:nth-child(3) { animation-delay: -0.4s; }

@keyframes mini-eq {
  from { transform: scaleY(0.55); }
  to { transform: scaleY(1.2); }
}

.now-playing-copy h2 {
  margin: 7px 0 5px;
  overflow: hidden;
  color: #eee4dc;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.now-playing-copy > p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #929399;
  font-size: 10px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.player-controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 23px;
  margin-top: -5px;
}

.play-button {
  width: 49px;
  height: 49px;
  margin: 0;
  border: none;
  box-shadow: 0 8px 20px rgb(255 86 30 / 28%);
}

.play-button:hover {
  transform: scale(1.05);
}

.play-button svg {
  width: 22px;
  height: 22px;
  margin-left: 2px;
}

.play-button .pause-symbol {
  display: none;
  margin-left: 0;
}

.play-button[aria-pressed="true"] .play-symbol {
  display: none;
}

.play-button[aria-pressed="true"] .pause-symbol {
  display: block;
}

.play-button[data-state="connecting"] {
  cursor: progress;
}

.player-orbit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 29px;
  height: 29px;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.player-orbit i {
  display: block;
  width: 2px;
  height: 7px;
  border-radius: 10px;
  background: #a3a4a8;
}

.player-orbit i:nth-child(2) { height: 13px; }
.player-orbit i:nth-child(3) { height: 5px; }

.signal-line {
  grid-column: 1 / -1;
  position: relative;
  height: 2px;
  overflow: visible;
  margin: -1px 2px 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 9%);
}

.signal-line span {
  display: block;
  width: 57%;
  height: 100%;
  border-radius: inherit;
  background: var(--orange);
}

.signal-line span::after {
  position: absolute;
  top: 50%;
  left: 57%;
  width: 9px;
  height: 9px;
  content: "";
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgb(255 100 45 / 11%);
  transform: translate(-50%, -50%);
}

.play-hint {
  grid-column: 1 / -1;
  min-height: 0;
  margin: -4px 2px 0;
  color: #7f8187;
  font-size: 9px;
  text-align: right;
}

.volume-row {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 0;
  color: #b3b4b8;
}

.icon-volume {
  width: 17px;
  height: 17px;
}

.volume-slider {
  height: 3px;
  accent-color: var(--orange);
}

.listener-info {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 0;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgb(17 20 26 / 84%);
}

.listener-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 13px 12px;
}

.listener-stat + .listener-stat {
  border-left: 1px solid var(--line);
}

.listener-stat svg {
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  color: var(--orange);
}

.listener-stat div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.listener-stat strong {
  overflow: hidden;
  color: #dedfe1;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listener-stat small {
  overflow: hidden;
  color: #83858a;
  font-size: 9px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.install-banner {
  margin-top: 14px;
  border-radius: 12px;
  background: var(--surface-raised);
}

.site-footer {
  margin: 18px 0 0;
  padding-bottom: 5px;
  text-align: center;
}

.site-footer p {
  font-size: 8px;
  line-height: 1.55;
}

noscript p {
  margin: 15px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

@media (min-width: 600px) {
  .listen-shell {
    padding-right: 24px;
    padding-left: 24px;
  }
}

@media (max-width: 360px) {
  .station-name {
    font-size: 12px;
  }

  .program-name {
    font-size: 36px;
  }

  .special-equalizer {
    width: 74px;
  }

  .listener-stat {
    padding: 11px 8px;
  }
}

@media (max-height: 650px) {
  .program-hero {
    padding-top: 17px;
    padding-bottom: 13px;
  }

  .special-broadcast-card {
    min-height: 103px;
  }

  .site-footer {
    margin-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Compact listener composition: the public screen is intentionally sized
   to fit the station, programme, player and audience state in one phone
   viewport, matching the approved mobile direction. */
html,
body {
  height: auto;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
}

.listen-shell {
  width: min(100%, 390px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 16px max(10px, env(safe-area-inset-bottom));
}

.app-header {
  min-height: 34px;
}

.station-mark {
  gap: 10px;
}

.station-mark img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.station-name {
  font-size: 13px;
  letter-spacing: 0.16em;
}

.app-menu summary {
  width: 29px;
  height: 29px;
  padding: 7px;
}

.app-menu summary span {
  width: 10px;
}

.program-hero {
  padding: 25px 4px 13px;
}

.status-row {
  margin-bottom: 11px;
}

.live-pill {
  padding: 4px 10px;
  font-size: 8px;
}

.program-eyebrow {
  display: none;
}

.program-name {
  font-size: clamp(36px, 10.2vw, 44px);
  line-height: 1;
}

.program-name::after {
  display: block;
  width: 44px;
  height: 8px;
  margin: 5px auto 8px;
  content: "";
  opacity: 0.9;
  background: repeating-linear-gradient(90deg, transparent 0 4px, var(--orange) 4px 5px, transparent 5px 8px);
  clip-path: polygon(0 45%, 15% 45%, 15% 10%, 25% 10%, 25% 80%, 37% 80%, 37% 28%, 48% 28%, 48% 100%, 60% 100%, 60% 20%, 71% 20%, 71% 75%, 84% 75%, 84% 40%, 100% 40%, 100% 60%, 84% 60%, 84% 100%, 71% 100%, 71% 36%, 60% 36%, 60% 84%, 48% 84%, 48% 45%, 37% 45%, 37% 95%, 25% 95%, 25% 30%, 15% 30%, 15% 63%, 0 63%);
}

.program-description {
  max-width: 27ch;
  margin-top: 0;
  font-size: 11px;
  line-height: 1.4;
}

.special-broadcast-card {
  min-height: 120px;
  padding: 15px;
  border-radius: 10px;
}

.special-broadcast-label {
  font-size: 8px;
}

.special-broadcast-label svg {
  width: 16px;
  height: 16px;
}

.special-broadcast-card > .special-broadcast-copy > p {
  max-width: 19ch;
  margin: 7px 0 5px;
  font-size: 20px;
  line-height: 1.04;
}

.special-broadcast-card small {
  font-size: 9px;
}

.special-equalizer {
  width: 85px;
  height: 58px;
  margin-left: 0;
}

.now-playing-card {
  position: relative;
  grid-template-columns: 99px minmax(0, 1fr);
  grid-template-rows: 113px 2px 12px;
  column-gap: 14px;
  row-gap: 7px;
  min-height: 176px;
  margin-top: 13px;
  padding: 14px;
  border-radius: 10px;
}

.program-cover {
  grid-column: 1;
  grid-row: 1;
  width: 99px;
  height: 113px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 75% 8%, rgb(255 100 45 / 22%), transparent 38%),
    linear-gradient(145deg, #2a1919, #10131a 62%);
}

.program-cover::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.66;
  background: linear-gradient(135deg, transparent 36%, rgb(255 100 45 / 13%) 37% 38%, transparent 39% 100%);
}

.program-cover::after {
  background: linear-gradient(180deg, transparent 26%, rgb(5 7 10 / 72%));
}

.program-cover img {
  display: none;
}

.cover-glow {
  position: absolute;
  top: 20px;
  right: 15px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgb(255 100 45 / 27%);
  filter: blur(9px);
}

.cover-mark {
  right: auto;
  bottom: 36px;
  left: 31px;
  gap: 4px;
  height: 32px;
}

.cover-mark i {
  width: 4px;
  box-shadow: 0 0 10px rgb(255 100 45 / 60%);
}

.cover-title {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 11px;
  left: 0;
  color: #ded8d3;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.13em;
  line-height: 1.45;
  text-align: center;
}

.now-playing-copy {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  padding-top: 7px;
}

.now-playing-heading p {
  font-size: 8px;
}

.mini-equalizer {
  margin-right: 1px;
}

.now-playing-copy h2 {
  margin: 6px 0 4px;
  font-size: 17px;
}

.now-playing-copy > p {
  font-size: 9px;
  line-height: 1.35;
}

.player-controls {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: start;
  gap: 15px;
  margin: 0 0 1px;
}

.play-button {
  width: 46px;
  height: 46px;
}

.play-button svg {
  width: 20px;
  height: 20px;
}

.player-skip {
  display: grid;
  width: 29px;
  height: 29px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #cac9c8;
  place-items: center;
}

.player-skip svg {
  width: 14px;
  height: 14px;
}

.signal-line {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0 1px;
}

.signal-line span,
.signal-line span::after {
  background: var(--orange);
}

.signal-line span {
  width: 57%;
}

.signal-line span::after {
  left: 57%;
  width: 8px;
  height: 8px;
}

.player-duration {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  justify-content: space-between;
  color: #85878d;
  font-size: 8px;
  line-height: 1;
}

.play-hint,
.volume-row {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.listener-info {
  min-height: 51px;
  margin-top: 13px;
  border-radius: 10px;
}

.listener-stat {
  gap: 8px;
  padding: 9px 11px;
}

.listener-stat svg {
  width: 21px;
  height: 21px;
}

.listener-stat strong {
  font-size: 10px;
}

.listener-stat small {
  font-size: 8px;
}

.site-footer {
  display: block;
  margin: 15px 0 0;
  padding-bottom: 0;
}

.site-footer p {
  font-size: 8px;
  line-height: 1.45;
}

@media (max-height: 720px) {
  .site-footer {
    display: block;
  }
}

@media (max-width: 350px) {
  .listen-shell {
    padding-right: 14px;
    padding-left: 14px;
  }

  .program-name {
    font-size: 35px;
  }

  .special-equalizer {
    width: 67px;
  }

  .now-playing-card {
    grid-template-columns: 90px minmax(0, 1fr);
  }

  .program-cover {
    width: 90px;
  }

  .player-controls {
    gap: 10px;
  }
}

/* App shell: a fixed, single-viewport composition with no browser scroll,
   designed to stay tidy on phone, tablet and desktop displays. */
html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}

.listen-shell {
  width: min(100%, 390px);
  height: 100dvh;
  min-height: 0;
  max-height: 100dvh;
  margin: 0;
  overflow: hidden !important;
  scrollbar-width: none;
  touch-action: none;
}

.listen-shell::-webkit-scrollbar {
  display: none;
}

.special-broadcast-card,
.now-playing-card,
.listener-info,
.site-footer,
.app-header,
.program-hero {
  flex: 0 0 auto;
}

.special-broadcast-copy > p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.special-broadcast-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.install-banner {
  position: fixed;
  z-index: 20;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  left: max(16px, env(safe-area-inset-left));
  width: auto;
  max-width: 390px;
  margin: 0 auto;
  box-shadow: 0 18px 48px rgb(0 0 0 / 60%);
}

@media (min-width: 600px) {
  body {
    padding: 0;
    display: block; /* full-bleed: don't center the shell in a content-sized track */
  }

  /* Tablet: fill the screen instead of a narrow floating card; content stays
     centered at a comfortable reading width over the full-bleed background. */
  .listen-shell {
    width: 100%;
    height: 100dvh;
    padding: 0 max(18px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom));
    padding-top: max(14px, env(safe-area-inset-top));
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .content-grid {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
  }

  .site-ambient::before {
    right: calc(50% - 505px);
  }

  .site-ambient::after {
    left: calc(50% - 505px);
  }
}

@media (min-width: 600px) and (max-height: 720px) {
  .listen-shell {
    height: calc(100dvh - 28px);
    padding-top: 12px;
    padding-bottom: 8px;
  }
}

@media (max-height: 620px) {
  .listen-shell {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }

  .app-header {
    min-height: 29px;
  }

  .station-mark img {
    width: 29px;
    height: 29px;
  }

  .station-name {
    font-size: 11px;
  }

  .program-hero {
    padding-top: 11px;
    padding-bottom: 7px;
  }

  .status-row {
    margin-bottom: 6px;
  }

  .program-name {
    font-size: clamp(31px, 8.5vw, 38px);
  }

  .program-name::after {
    height: 5px;
    margin: 2px auto 4px;
  }

  .program-description {
    font-size: 9px;
  }

  .special-broadcast-card {
    min-height: 92px;
    padding: 11px 13px;
  }

  .special-broadcast-card > .special-broadcast-copy > p {
    margin: 4px 0 3px;
    font-size: 16px;
  }

  .special-equalizer {
    height: 43px;
  }

  .now-playing-card {
    grid-template-columns: 78px minmax(0, 1fr);
    grid-template-rows: 88px 2px 9px;
    min-height: 131px;
    padding: 10px;
    row-gap: 5px;
  }

  .program-cover {
    width: 78px;
    height: 88px;
  }

  .cover-mark {
    bottom: 28px;
    left: 24px;
    height: 26px;
  }

  .cover-title {
    bottom: 7px;
    font-size: 7px;
  }

  .now-playing-copy {
    padding-top: 2px;
  }

  .now-playing-copy h2 {
    font-size: 15px;
  }

  .now-playing-copy > p,
  .now-playing-heading p,
  .player-duration {
    font-size: 8px;
  }

  .player-controls {
    gap: 11px;
  }

  .play-button {
    width: 38px;
    height: 38px;
  }

  .player-skip {
    width: 24px;
    height: 24px;
  }

  .listener-info {
    min-height: 43px;
    margin-top: 8px;
  }

  .listener-stat {
    padding: 7px 9px;
  }

  .site-footer {
    margin-top: 7px;
  }

  .site-footer p {
    font-size: 7px;
  }
}

@media (max-height: 500px) {
  .special-equalizer,
  .app-menu {
    display: none;
  }

  .special-broadcast-card {
    min-height: 76px;
  }

  .special-broadcast-card > .special-broadcast-copy > p {
    font-size: 14px;
  }

  .program-description {
    display: none;
  }

  .site-footer {
    display: none;
  }
}

/* Radio dashboard v2 — layouts explicitamente separados por faixa de tela.
   Nenhum conteúdo essencial usa posicionamento absoluto, evitando que capa,
   texto e botões se sobreponham em telas estreitas. */
:root {
  --dashboard-bg: #070a0f;
  --dashboard-card: #11161f;
  --dashboard-card-soft: #0d121a;
  --dashboard-border: rgb(159 178 201 / 16%);
  --dashboard-muted: #a6a8ad;
  --dashboard-orange: #ff5a26;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden !important;
  background: var(--dashboard-bg);
}

body {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}

.listen-shell {
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  max-height: 100dvh;
  padding: max(12px, env(safe-area-inset-top)) 16px max(9px, env(safe-area-inset-bottom));
  overflow: hidden !important;
  background:
    radial-gradient(ellipse at 98% 25%, rgb(255 91 38 / 7%), transparent 34%),
    linear-gradient(135deg, #080b10, #07090e 60%, #080a0e);
}

.site-ambient {
  z-index: -1;
  opacity: 0.7;
}

.app-header {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
}

.contact-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  z-index: 30;
  max-width: calc(100vw - 32px);
  padding: 10px 14px;
  border: 1px solid var(--dashboard-border);
  border-radius: 12px;
  background: rgb(20 16 14 / 96%);
  box-shadow: 0 12px 26px rgb(0 0 0 / 45%);
}

.contact-popover[hidden] {
  display: none;
}

.contact-popover p {
  margin: 0;
  overflow-wrap: anywhere;
  color: #f3ece7;
  font-size: 12px;
}

.contact-popover a {
  color: var(--dashboard-orange);
  text-decoration: none;
}

.contact-popover a:hover,
.contact-popover a:focus-visible {
  text-decoration: underline;
}

.station-mark {
  min-width: 0;
  gap: 10px;
}

.station-mark img {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 9px;
}

.station-name {
  font-size: 12px;
  letter-spacing: 0.15em;
  white-space: nowrap;
}

.desktop-nav,
.listen-now-button {
  display: none;
}

.app-menu {
  display: block;
  flex: 0 0 auto;
}

.app-menu summary {
  width: 28px;
  height: 28px;
  padding: 7px;
}

.app-menu-popover {
  display: grid;
  gap: 5px;
  width: 170px;
}

.app-menu-popover a {
  padding: 6px 4px;
  color: var(--text);
  font-size: 11px;
  text-decoration: none;
}

.content-grid {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  align-content: center;
  gap: 10px;
}

.program-hero {
  grid-row: 1;
  min-width: 0;
  padding: 12px 8px 5px;
  text-align: center;
}

.status-row {
  margin: 0 0 8px;
}

.live-pill {
  padding: 4px 9px;
  font-size: 8px;
}

.program-eyebrow {
  display: none;
}

.program-name {
  color: #f1e5db;
  font-size: clamp(31px, 9.6vw, 41px);
  line-height: 1;
}

.program-name::after {
  display: block;
  width: 54px;
  height: 8px;
  margin: 6px auto 7px;
  content: "";
  background: repeating-linear-gradient(90deg, transparent 0 4px, var(--dashboard-orange) 4px 6px, transparent 6px 9px);
  clip-path: polygon(0 48%, 10% 48%, 10% 20%, 18% 20%, 18% 88%, 27% 88%, 27% 6%, 36% 6%, 36% 68%, 46% 68%, 46% 35%, 55% 35%, 55% 98%, 66% 98%, 66% 25%, 75% 25%, 75% 75%, 86% 75%, 86% 43%, 100% 43%, 100% 58%, 86% 58%, 86% 100%, 75% 100%, 75% 40%, 66% 40%, 66% 82%, 55% 82%, 55% 50%, 46% 50%, 46% 82%, 36% 82%, 36% 22%, 27% 22%, 27% 100%, 18% 100%, 18% 38%, 10% 38%, 10% 63%, 0 63%);
}

.program-description {
  max-width: 31ch;
  margin: 0 auto;
  color: var(--dashboard-muted);
  font-size: 10px;
  line-height: 1.42;
}

.hero-wave {
  display: none;
}

.special-broadcast-card {
  display: flex;
  overflow: visible;
  grid-row: 2;
  width: 100%;
  min-height: 94px;
  max-height: none;
  padding: 13px;
  border: 1px solid var(--dashboard-border);
  border-radius: 10px;
  background: linear-gradient(135deg, rgb(22 27 36 / 96%), rgb(13 17 24 / 96%));
}

.special-broadcast-copy {
  min-width: 0;
  align-self: center;
}

.special-broadcast-label {
  font-size: 8px;
}

.special-broadcast-label svg {
  width: 15px;
  height: 15px;
}

.special-broadcast-card > .special-broadcast-copy > p {
  display: -webkit-box;
  max-width: none;
  margin: 5px 0 3px;
  overflow: hidden;
  color: #f4e9e1;
  font-size: 18px;
  line-height: 1.03;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.special-broadcast-card small {
  display: -webkit-box;
  max-width: none;
  overflow: hidden;
  font-size: 8px;
  line-height: 1.35;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.special-equalizer {
  width: 72px;
  height: 48px;
  margin-left: 4px;
}

.side-panel {
  display: contents;
}

.listener-info {
  grid-row: 4;
  display: grid;
  min-height: 48px;
  margin: 0;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--dashboard-border);
  border-radius: 10px;
  background: rgb(15 19 26 / 96%);
}

.listener-stat {
  min-width: 0;
  gap: 8px;
  padding: 8px 9px;
}

.listener-stat + .listener-stat {
  border-left: 1px solid var(--dashboard-border);
}

.listener-stat svg {
  width: 20px;
  height: 20px;
}

.listener-stat strong {
  font-size: 9px;
}

.listener-stat small {
  font-size: 7px;
}

.today-schedule {
  display: none;
}

.now-playing-card {
  grid-row: 3;
  display: grid;
  min-width: 0;
  min-height: 128px;
  margin: 0;
  padding: 12px;
  grid-template-columns: 82px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 44px;
  column-gap: 12px;
  row-gap: 6px;
  border: 1px solid var(--dashboard-border);
  border-radius: 10px;
  background: linear-gradient(140deg, #161b24, #11161e);
}

.program-cover {
  grid-row: 1 / span 2;
  width: 82px;
  height: 104px;
  align-self: center;
  border-radius: 8px;
}

.cover-mark {
  bottom: 30px;
  left: 25px;
  height: 28px;
}

.cover-title {
  bottom: 8px;
  font-size: 7px;
}

.now-playing-copy {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 0;
  padding: 0;
}

.now-playing-heading {
  gap: 5px;
}

.now-playing-heading p {
  font-size: 8px;
}

.now-playing-copy h2 {
  display: -webkit-box;
  max-width: none;
  overflow: hidden;
  margin: 5px 0 3px;
  font-size: 16px;
  line-height: 1.15;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.now-playing-copy > p {
  display: -webkit-box;
  overflow: hidden;
  font-size: 8px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.player-controls {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  align-self: end;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
}

.play-button,
.volume-button,
.volume-more-button {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--dashboard-border);
  border-radius: 50%;
  color: #f3ece7;
  place-items: center;
}

.play-button {
  background: var(--dashboard-orange);
  box-shadow: 0 8px 20px rgb(255 83 30 / 27%);
}

.play-button svg,
.volume-button svg,
.volume-more-button svg {
  width: 18px;
  height: 18px;
}

.volume-button,
.volume-more-button {
  background: transparent;
}

.volume-button:hover,
.volume-button:focus-visible,
.volume-more-button:hover,
.volume-more-button:focus-visible,
.volume-more-button[aria-expanded="true"] {
  border-color: rgb(255 97 41 / 75%);
  color: var(--dashboard-orange);
}

.volume-off-icon {
  display: none;
}

.volume-button.is-muted .volume-on-icon {
  display: none;
}

.volume-button.is-muted .volume-off-icon {
  display: block;
}

.volume-popover-wrap {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}

.volume-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 250px;
  padding: 10px 12px;
  border: 1px solid var(--dashboard-border);
  border-radius: 14px;
  background: rgb(20 16 14 / 96%);
  box-shadow: 0 12px 26px rgb(0 0 0 / 45%);
  white-space: normal;
}

.volume-popover[hidden] {
  display: none;
}

.volume-slider {
  width: 110px;
  accent-color: var(--dashboard-orange);
}

.player-setting-row {
  display: grid;
  grid-template-columns: 56px minmax(100px, 1fr) 58px;
  align-items: center;
  gap: 8px;
}

.player-setting-label {
  color: #bdb4ae;
  font-size: 10px;
}

.player-setting-row .volume-slider {
  width: 100%;
}

.volume-slider.is-boosted {
  accent-color: #ff3b30;
}

.volume-popover-value {
  min-width: 58px;
  color: #f3ece7;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.signal-line,
.player-duration,
.player-skip {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.site-footer {
  display: block;
  margin: 7px 0 0;
  padding: 0;
  text-align: center;
}

.site-footer p {
  font-size: 7px;
  line-height: 1.4;
}

.site-footer-contact {
  margin-bottom: 2px;
}

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

.site-footer a:hover,
.site-footer a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 350px) {
  .listen-shell {
    padding-right: 13px;
    padding-left: 13px;
  }

  .program-name {
    font-size: 30px;
  }

  .special-equalizer {
    width: 60px;
  }

  .now-playing-card {
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 10px;
  }

  .program-cover {
    width: 76px;
    height: 98px;
  }

  .play-button,
  .volume-button,
  .volume-more-button {
    width: 38px;
    height: 38px;
  }

  .volume-slider {
    width: 84px;
  }
}

@media (max-height: 620px) {
  .listen-shell {
    padding-top: max(7px, env(safe-area-inset-top));
    padding-bottom: max(5px, env(safe-area-inset-bottom));
  }

  .program-hero {
    padding-top: 6px;
  }

  .special-broadcast-card {
    min-height: 104px;
  }

  .special-broadcast-card > .special-broadcast-copy > p {
    font-size: 15px;
  }

  .special-broadcast-card small {
    font-size: 10px;
  }

  .now-playing-card {
    min-height: 112px;
    padding: 9px;
  }

  .program-cover {
    height: 88px;
  }

  .site-footer {
    margin-top: 4px;
  }
}

@media (min-width: 800px) {
  body {
    padding: 0;
    display: block; /* full-bleed: don't center the shell in a content-sized track */
  }

  /* Full-bleed dashboard: the listener surface fills the whole viewport on
     desktop and larger tablets instead of floating as a fixed card. */
  .listen-shell {
    width: 100%;
    height: 100dvh;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .app-header {
    min-height: 66px;
    padding: 0 22px;
    border-bottom: 1px solid var(--dashboard-border);
  }

  .station-mark img {
    width: 36px;
    height: 36px;
  }

  .station-name {
    font-size: 12px;
  }

  .desktop-nav {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    gap: 30px;
  }

  .desktop-nav a {
    position: relative;
    display: grid;
    color: #d1d0cf;
    font-size: 11px;
    text-decoration: none;
    place-items: center;
  }

  .desktop-nav a.is-active {
    color: var(--dashboard-orange);
  }

  .desktop-nav a.is-active::after {
    position: absolute;
    bottom: 17px;
    width: 12px;
    height: 2px;
    content: "";
    border-radius: 999px;
    background: var(--dashboard-orange);
  }

  .listen-now-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 31px;
    padding: 0 14px;
    border: 1px solid rgb(255 89 38 / 78%);
    border-radius: 8px;
    color: #f4e8e0;
    background: transparent;
    font-size: 10px;
    cursor: pointer;
  }

  .listen-now-button svg {
    width: 15px;
    height: 15px;
    color: var(--dashboard-orange);
  }

  .app-menu {
    display: none;
  }

  .content-grid {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 1760px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 44px) clamp(24px, 4.5vw, 80px) clamp(18px, 2.4vw, 40px);
    grid-template-columns: minmax(0, 1.12fr) minmax(240px, 0.8fr) minmax(255px, 0.74fr);
    grid-template-rows: minmax(190px, 26vh) minmax(0, 1fr);
    align-content: stretch;
    gap: clamp(12px, 1.3vw, 22px) clamp(14px, 1.6vw, 30px);
  }

  /* On the fixed-size desktop card there is no scroll, so Patrocinadores
     becomes a compact full-width strip on its own row rather than the tall
     block used in the scrolling mobile/tablet column. */
  .sponsors-section {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 9px 14px;
  }

  .sponsors-heading {
    margin: 0;
  }

  .sponsors-lead {
    display: none;
  }

  .sponsors-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
  }

  .sponsor-slot {
    min-height: 38px;
  }

  .sponsor-cta {
    min-height: 36px;
    white-space: nowrap;
  }

  .program-hero {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding: 6px 8px;
    text-align: left;
  }

  .status-row {
    margin: 0 0 14px;
  }

  .live-pill {
    font-size: 9px;
  }

  .program-name {
    max-width: 100%;
    font-size: clamp(34px, 3.15vw, 40px);
    letter-spacing: -0.06em;
    white-space: nowrap;
  }

  .program-name::after {
    display: none;
  }

  .program-description {
    max-width: 30ch;
    margin: 15px 0 0;
    font-size: 11px;
  }

  .hero-wave {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    margin-top: 17px;
  }

  .hero-wave i {
    display: block;
    width: 2px;
    height: var(--wave-size, 22%);
    border-radius: 5px;
    background: var(--dashboard-orange);
  }

  .hero-wave i:nth-child(2n) { --wave-size: 82%; }
  .hero-wave i:nth-child(3n) { --wave-size: 47%; }
  .hero-wave i:nth-child(5n) { --wave-size: 100%; }

  .special-broadcast-card {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    min-height: 0;
    padding: 18px 20px;
  }

  .special-broadcast-copy {
    z-index: 1;
    width: 68%;
  }

  .special-broadcast-card > .special-broadcast-copy > p {
    margin-top: 10px;
    font-size: clamp(19px, 1.75vw, 23px);
    -webkit-line-clamp: 3;
  }

  .special-equalizer {
    position: absolute;
    right: -14px;
    bottom: -7px;
    width: 145px;
    height: 108px;
    margin: 0;
    opacity: 0.88;
  }

  .side-panel {
    display: grid;
    min-height: 0;
    grid-column: 3;
    grid-row: 1 / span 2;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 16px;
  }

  .listener-info {
    grid-row: auto;
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 14px;
    border: 0;
    background: transparent;
  }

  .listener-stat {
    min-height: 91px;
    padding: 18px;
    border: 1px solid var(--dashboard-border);
    border-radius: 10px;
    background: linear-gradient(145deg, rgb(17 22 30 / 96%), rgb(12 16 23 / 96%));
  }

  .listener-stat + .listener-stat {
    border-left: 1px solid var(--dashboard-border);
  }

  .listener-stat svg {
    width: 29px;
    height: 29px;
  }

  .listener-stat strong {
    font-size: 22px;
    font-weight: 500;
  }

  .listener-stat small {
    font-size: 11px;
  }

  .today-schedule {
    display: block;
    min-height: 0;
    padding: 18px;
    border: 1px solid var(--dashboard-border);
    border-radius: 10px;
    background: linear-gradient(145deg, rgb(17 22 30 / 96%), rgb(12 16 23 / 96%));
  }

  .schedule-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dashboard-orange);
  }

  .schedule-heading svg {
    width: 23px;
    height: 23px;
  }

  .schedule-heading h2 {
    margin: 0;
    color: var(--dashboard-orange);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .today-schedule ol {
    display: grid;
    padding: 0;
    margin: 15px 0 0;
    list-style: none;
  }

  .today-schedule li {
    display: grid;
    align-items: start;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 9px;
    padding: 11px 0;
    border-top: 1px solid var(--dashboard-border);
  }

  .today-schedule li:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .today-schedule time {
    color: #ebe4df;
    font-size: 12px;
    font-weight: 700;
  }

  .today-schedule strong,
  .today-schedule small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .today-schedule strong {
    color: #ebe4df;
    font-size: 12px;
    line-height: 1.25;
  }

  .today-schedule small {
    margin-top: 3px;
    color: var(--dashboard-muted);
    font-size: 9px;
    line-height: 1.3;
  }

  .now-playing-card {
    grid-column: 1 / span 2;
    grid-row: 2;
    min-height: 0;
    padding: 16px 20px;
    grid-template-columns: 158px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 62px;
    column-gap: 20px;
    border-radius: 10px;
  }

  .program-cover {
    width: 158px;
    height: 158px;
  }

  .cover-mark {
    bottom: 46px;
    left: 49px;
    height: 48px;
  }

  .cover-mark i {
    width: 6px;
  }

  .cover-title {
    bottom: 15px;
    font-size: 10px;
  }

  .now-playing-copy h2 {
    font-size: 30px;
  }

  .now-playing-copy > p {
    font-size: 13px;
  }

  .player-controls {
    gap: 14px;
  }

  .play-button,
  .volume-button,
  .volume-more-button {
    width: 60px;
    height: 60px;
  }

  .play-button svg,
  .volume-button svg,
  .volume-more-button svg {
    width: 24px;
    height: 24px;
  }

  .site-footer {
    display: grid;
    min-height: 44px;
    margin: 0;
    align-content: center;
  }

  .site-footer p {
    font-size: 9px;
  }
}

@media (min-width: 800px) and (max-height: 620px) {
  .listen-shell {
    height: 100dvh;
  }

  .content-grid {
    padding-top: 12px;
    padding-bottom: 10px;
    grid-template-rows: 175px minmax(0, 1fr);
  }

  .program-name {
    font-size: 34px;
  }

  .program-description,
  .hero-wave {
    margin-top: 8px;
  }

  .listener-stat {
    min-height: 72px;
    padding: 12px;
  }

  .today-schedule {
    padding: 12px;
  }

  .now-playing-card {
    padding: 12px 16px;
    grid-template-columns: 130px minmax(0, 1fr);
  }

  .program-cover {
    width: 130px;
    height: 130px;
  }
}

/* Acessibilidade móvel: texto funcional com escala confortável para leitura
   próxima, inclusive para pessoas idosas ou com baixa visão. */
@media (max-width: 799px) {
  .listen-shell {
    padding-top: max(5px, env(safe-area-inset-top));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .app-header {
    min-height: 36px;
  }

  .station-name {
    font-size: 14px;
  }

  .content-grid {
    align-content: start;
    gap: 11px;
  }

  .program-hero {
    padding: 1px 8px 5px;
  }

  .status-row {
    margin-bottom: 5px;
  }

  .live-pill {
    padding: 5px 11px;
    font-size: 11px;
  }

  .program-name {
    font-size: clamp(33px, 9.8vw, 40px);
  }

  .program-name::after {
    margin: 4px auto 6px;
  }

  .program-description {
    max-width: 28ch;
    font-size: 14px;
    line-height: 1.38;
  }

  .special-broadcast-card {
    min-height: 112px;
    padding: 15px;
  }

  .special-broadcast-label {
    font-size: 12px;
  }

  .special-broadcast-label svg {
    width: 18px;
    height: 18px;
  }

  .special-broadcast-card > .special-broadcast-copy > p {
    margin: 7px 0 5px;
    font-size: 21px;
    line-height: 1.08;
  }

  .special-broadcast-card small {
    font-size: 13px;
  }

  .special-equalizer {
    width: 64px;
    height: 58px;
  }

  .now-playing-card {
    min-height: 190px;
    padding: 14px;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 54px;
    column-gap: 14px;
    row-gap: 8px;
  }

  .program-cover {
    width: 96px;
    height: 134px;
  }

  .cover-mark {
    bottom: 40px;
    left: 30px;
    height: 38px;
  }

  .cover-title {
    bottom: 10px;
    font-size: 9px;
  }

  .now-playing-heading p {
    font-size: 12px;
  }

  .mini-equalizer {
    height: 20px;
  }

  .mini-equalizer i {
    width: 3px;
    height: 9px;
  }

  .mini-equalizer i:nth-child(2) { height: 17px; }
  .mini-equalizer i:nth-child(3) { height: 12px; }

  .now-playing-copy h2 {
    display: -webkit-box;
    margin: 7px 0 6px;
    overflow: hidden;
    font-size: 30px;
    line-height: 1.03;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .now-playing-copy > p {
    font-size: 13px;
    line-height: 1.35;
    -webkit-line-clamp: 3;
  }

  .player-controls {
    gap: 14px;
  }

  .play-button,
  .volume-button,
  .volume-more-button {
    width: 52px;
    height: 52px;
  }

  .play-button svg,
  .volume-button svg,
  .volume-more-button svg {
    width: 23px;
    height: 23px;
  }

  .listener-info {
    min-height: 88px;
  }

  .listener-stat {
    gap: 10px;
    padding: 13px 11px;
  }

  .listener-stat svg {
    width: 28px;
    height: 28px;
  }

  .listener-stat strong {
    font-size: 16px;
    line-height: 1.15;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  #audienceCount {
    font-size: 25px;
  }

  .listener-stat small {
    font-size: 13px;
    line-height: 1.25;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .site-footer {
    margin-top: 5px;
  }

  .site-footer p {
    font-size: 11px;
    line-height: 1.35;
  }
}

@media (max-width: 799px) and (max-height: 680px) {
  .site-footer {
    display: none;
  }

  .content-grid {
    gap: 8px;
  }

  .program-description {
    font-size: 12px;
  }

  .special-broadcast-card {
    min-height: 98px;
    padding: 12px;
  }

  .special-broadcast-card > .special-broadcast-copy > p {
    font-size: 18px;
  }

  .special-broadcast-card small {
    font-size: 12px;
  }

  .now-playing-card {
    min-height: 166px;
    padding: 12px;
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .program-cover {
    width: 88px;
    height: 124px;
  }

  .now-playing-copy h2 {
    font-size: 26px;
  }

  .listener-info {
    min-height: 76px;
  }

  .listener-stat small {
    font-size: 12px;
  }
}

/* ============================================================
   FULL-BLEED TABLET / PORTRAIT (authoritative — appended last so it wins over
   the many overlapping 600px breakpoints accreted above).

   Landscape screens (desktop, tablet held sideways) keep the wide 3-column
   dashboard from the >=800px block, which fills the viewport nicely. Portrait
   screens (tablets/large phones held upright) are tall, where that grid would
   stretch a single card to the full height and look empty -- so there we stack
   the cards into a natural, full-width, scrollable column instead.
   ============================================================ */
@media (min-width: 600px) and (orientation: portrait) {
  html,
  body {
    overflow: auto;
  }

  body {
    display: block;
    margin: 0;
    padding: 0;
    min-height: 100dvh;
  }

  .listen-shell {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 100dvh;
    margin: 0;
    padding: max(14px, env(safe-area-inset-top)) clamp(16px, 3.5vw, 40px)
      max(16px, env(safe-area-inset-bottom));
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  /* Flex column ignores the children's grid-column/grid-row placements, so the
     cards simply stack in DOM order at their natural heights. */
  .content-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
  }

  .content-grid > * {
    width: 100%;
  }

  .program-hero { order: 1; }
  .special-broadcast-card { order: 2; }
  .now-playing-card { order: 3; }
  .side-panel { order: 4; }

  .now-playing-card {
    min-height: 0;
  }
}

/* ============================================================
   TODAY'S SCHEDULE: contained + scrollable in every format (authoritative).
   A long day used to overflow the card; now the list stays inside and scrolls.
   Also surfaced on mobile, where it was hidden.
   ============================================================ */
.today-schedule {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.today-schedule ol {
  /* Do not flex-grow by default: in an auto-height card (mobile/portrait) the
     list is bounded by max-height alone and scrolls; growing there collapses
     it. Desktop's bounded column re-enables flex:1 below. */
  flex: 0 1 auto;
  min-height: 0;
  max-height: 46vh; /* bound so the list scrolls instead of spilling out */
  margin: 12px 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 22%) transparent;
}

.today-schedule ol::-webkit-scrollbar {
  width: 6px;
}

.today-schedule ol::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgb(255 255 255 / 20%);
}

/* Desktop / landscape tablet: the card is a bounded grid column, so let the
   list fill it and scroll within, rather than a fixed viewport fraction. */
@media (min-width: 800px) and (orientation: landscape) {
  .today-schedule ol {
    flex: 1 1 auto;
    max-height: none;
  }
}

/* Cross-format accessibility baseline. These are intentionally authoritative
   because several earlier responsive layers shrink the same controls. */
.station-mark,
.desktop-nav a,
.listen-now-button,
.app-menu summary,
.app-menu-popover a,
.install-button,
.install-dismiss {
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
}

.app-menu summary,
.app-menu-popover a,
.install-button,
.install-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile: keep the app as ONE static, complete screen (no page scroll). Only
   the "Programação de hoje" list moves, scrolling inside its own card. The
   card takes whatever height is left below the fixed sections and scrolls
   internally. The page/shell stays fixed to the viewport. */
@media (max-width: 599px) {
  /* Fixed to the viewport as a flex column so the header, content, the install
     prompt (when shown) and footer share the screen without overlapping -- the
     content area flexes and the schedule inside it absorbs the slack. */
  .listen-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .content-grid {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 9px;
    min-height: 0;
    height: auto;
    align-content: normal;
  }

  /* Keep the install prompt in the flow (not floating over the content) so it
     never covers the schedule; the content area simply gives up the room. */
  .install-banner {
    position: static;
    flex: 0 0 auto;
    margin-top: 9px;
  }

  /* Reclaim vertical room for the schedule by trimming the decorative bits of
     the hero and the slogan card -- the essentials (station, live status,
     player, schedule) stay. */
  .program-description,
  .hero-wave {
    display: none;
  }

  .program-hero {
    padding-top: 0;
    padding-bottom: 0;
  }

  .special-broadcast-card {
    max-height: 104px;
  }

  /* Trim the audience card ~12% (its height is pinned by min-height) and hand
     that space to the schedule below, which flexes to absorb it. */
  .listener-info {
    min-height: 76px;
  }

  .listener-stat {
    padding: 10px 11px;
    gap: 8px;
  }

  .listener-stat svg {
    width: 24px;
    height: 24px;
  }

  #audienceCount {
    font-size: 22px;
  }

  .listener-stat small {
    font-size: 12px;
  }

  /* Player prominent near the top; the scrollable schedule sits last and
     absorbs the remaining height. */
  .program-hero { order: 1; flex: 0 0 auto; }
  .special-broadcast-card { order: 2; flex: 0 0 auto; }
  .now-playing-card { order: 3; flex: 0 0 auto; }
  .listener-info { order: 4; flex: 0 0 auto; }
  .today-schedule { order: 5; }

  .today-schedule {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 84px;
    overflow: hidden;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgb(255 255 255 / 3%);
  }

  .schedule-heading {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--orange-bright);
  }

  .schedule-heading svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }

  .schedule-heading h2 {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--orange-bright);
  }

  /* Only this scrolls. */
  .today-schedule ol {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .today-schedule li {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 8px 0;
    border-top: 1px solid var(--line);
  }

  .today-schedule li:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .today-schedule time {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
  }

  .today-schedule strong {
    display: block;
    font-size: 12.5px;
    line-height: 1.25;
    color: var(--text);
  }

  .today-schedule small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--muted);
  }
}