/* ==========================================================================
   Radio Angelika - theme stylesheet (lifted from design/prototype/styles.css)
   Changes vs prototype: self-hosted fonts, inline styles moved to classes, WP admin-bar offset, page prose, 404.
   Order: tokens -> base -> layout -> components -> pages -> utilities.
   RTL-native: use logical properties (inline-start/end) everywhere.
   ========================================================================== */

/* ---------- 0. Fonts (self-hosted Rubik, variable 400-700, SIL OFL 1.1) -- */
@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/rubik-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/rubik-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  color-scheme: dark light;

  /* Brand */
  --brand-red: #E82A20;          /* logo only - never for text or small fills */

  /* Stage = header, hero, player dock. Always dark, in both themes,
     because the logo's white subtitle needs a dark ground. */
  --stage-bg: #0B111C;
  --stage-surface: #131B2A;
  --stage-surface-2: #1B2537;
  --stage-line: #26324A;
  --stage-text: #F4EFE6;
  --stage-muted: #A9B3C5;

  /* Content surfaces - dark theme (default) */
  --bg: #0B111C;
  --surface: #131B2A;
  --surface-2: #1B2537;
  --line: #26324A;
  --text: #F4EFE6;
  --text-muted: #A9B3C5;

  /* The one accent */
  --accent: #D4231A;             /* fills: play button, live chip, active tab. white on it = 5.18:1 */
  --accent-hover: #B81D15;
  --on-accent: #FFFFFF;
  --accent-text: #FF6B5E;        /* red used as text/icon on dark = 6.76:1 */
  --accent-soft: rgba(212, 35, 26, .14);

  --focus: #F4EFE6;
  --success: #3FB97A;            /* only for the WhatsApp "sent" state */
  --whatsapp: #1E8E4E;           /* white on it = 4.6:1 */

  /* Type */
  --font: "Rubik", "Heebo", "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fs-xs: .8125rem;   /* 13 */
  --fs-sm: .9375rem;   /* 15 */
  --fs-md: 1.0625rem;  /* 17 - body */
  --fs-lg: 1.25rem;    /* 20 */
  --fs-xl: 1.5rem;     /* 24 */
  --fs-2xl: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);   /* 28 -> 40 */
  --fs-3xl: clamp(2.125rem, 1.3rem + 3.6vw, 3.5rem);  /* 34 -> 56 */
  --lh-tight: 1.15;
  --lh: 1.6;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Space (4px grid) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px;

  --container: 1200px;
  --gutter: 16px;

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Shadows (subtle - dark UI relies on surface steps, not shadows) */
  --shadow-1: 0 1px 2px rgba(0,0,0,.25);
  --shadow-2: 0 8px 24px rgba(0,0,0,.28);
  --shadow-play: 0 10px 30px rgba(212, 35, 26, .35);

  /* Motion */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Sizes */
  --header-h: 60px;
  --dock-h: 72px;
  --play-xl: 96px;
  --play-sm: 48px;
  --tap: 44px;                   /* minimum target */
}

/* Light theme: content surfaces go warm paper; stage stays dark. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #FAF6EF;
    --surface: #FFFFFF;
    --surface-2: #F1EBE0;
    --line: #E3DACB;
    --text: #151B26;
    --text-muted: #5A6272;
    --accent-text: #B51C17;      /* 6.2:1 on --bg */
    --accent-soft: rgba(200, 32, 27, .09);
    --focus: #151B26;
    --shadow-2: 0 8px 24px rgba(21,27,38,.10);
  }
}
:root[data-theme="light"] {
  --bg: #FAF6EF;
  --surface: #FFFFFF;
  --surface-2: #F1EBE0;
  --line: #E3DACB;
  --text: #151B26;
  --text-muted: #5A6272;
  --accent-text: #B51C17;
  --accent-soft: rgba(200, 32, 27, .09);
  --focus: #151B26;
  --shadow-2: 0 8px 24px rgba(21,27,38,.10);
}

@media (min-width: 768px)  { :root { --gutter: 32px; --header-h: 72px; } }
@media (min-width: 1280px) { :root { --gutter: 40px; } }

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh);
  font-weight: var(--fw-regular);
  overflow-x: hidden;
}
img, svg, iframe { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3 { line-height: var(--lh-tight); margin: 0; font-weight: var(--fw-bold); }
p { margin: 0; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.stage :focus-visible, .site-header :focus-visible, .dock :focus-visible { outline-color: var(--stage-text); }
.tnum { font-variant-numeric: tabular-nums; }
bdi.time, .time { unicode-bidi: isolate; direction: ltr; font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: var(--s-4); top: -100px; z-index: 100;
  background: var(--stage-text); color: var(--stage-bg); padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm); font-weight: var(--fw-bold); text-decoration: none;
}
.skip-link:focus { top: var(--s-2); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- 3. Header ---------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(11, 17, 28, .92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--stage-line);
  color: var(--stage-text);
}
.site-header__inner { display: flex; align-items: center; gap: var(--s-4); height: var(--header-h); }
.brand { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.brand img { height: 44px; width: auto; }
@media (min-width: 768px) { .brand img { height: 54px; } }

.nav { display: none; }
.nav__list { display: flex; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--s-4);
  border-radius: var(--r-pill); text-decoration: none; font-weight: var(--fw-medium);
  color: var(--stage-muted); transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.nav__link:hover { color: var(--stage-text); background: var(--stage-surface); }
.nav__link[aria-current="page"] { color: var(--stage-text); background: var(--stage-surface-2); }

.header-actions { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; }
.icon-btn {
  display: inline-grid; place-items: center; width: var(--tap); height: var(--tap);
  border-radius: var(--r-pill); border: 1px solid var(--stage-line); background: transparent;
  color: var(--stage-text); text-decoration: none; transition: background var(--dur-1) var(--ease);
}
.icon-btn:hover { background: var(--stage-surface-2); }
.icon-btn svg { width: 20px; height: 20px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }

.menu-btn { display: inline-grid; }
@media (min-width: 900px) {
  .nav { display: block; margin-inline-start: var(--s-6); }
  .menu-btn { display: none; }
}

/* Mobile menu (sheet under the header) */
.mobile-nav {
  position: fixed; inset-inline: 0; top: var(--header-h); z-index: 39;
  background: var(--stage-bg); border-bottom: 1px solid var(--stage-line);
  padding: var(--s-2) var(--gutter) var(--s-6); color: var(--stage-text);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav a {
  display: flex; align-items: center; min-height: 56px; font-size: var(--fs-lg);
  text-decoration: none; border-bottom: 1px solid var(--stage-line);
}
.mobile-nav a[aria-current="page"] { color: var(--accent-text); }
.mobile-nav .mobile-nav__social { display: flex; gap: var(--s-3); margin-top: var(--s-5); }

/* ---------- 4. Buttons & chips ------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-5); border-radius: var(--r-pill);
  font-weight: var(--fw-bold); text-decoration: none; border: 1px solid transparent;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { border-color: var(--line); background: transparent; color: var(--text); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--whatsapp { background: var(--whatsapp); color: #fff; }
.btn--whatsapp:hover { filter: brightness(.92); }
.btn--block { width: 100%; min-height: 52px; font-size: var(--fs-lg); }

.live-chip {
  display: inline-flex; align-items: center; gap: var(--s-2); padding: 4px 12px 4px 10px;
  border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .02em;
}
.live-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
[data-player-state="playing"] .live-chip__dot { animation: live-pulse 1.6s var(--ease) infinite; }
.live-chip--offline { background: var(--stage-surface-2); color: var(--stage-muted); }

.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-4);
  border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font-weight: var(--fw-medium); font-size: var(--fs-sm); white-space: nowrap;
}
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); background: var(--accent-soft); color: var(--accent-text);
}

/* ---------- 5. Stage / hero with the main player ------------------------ */
.stage {
  position: relative; overflow: hidden; color: var(--stage-text);
  background:
    radial-gradient(600px 360px at 50% 35%, rgba(212,35,26,.16), transparent 70%),
    var(--stage-bg);
  border-bottom: 1px solid var(--stage-line);
}
.stage__inner {
  display: grid; gap: var(--s-8); padding-block: var(--s-6) var(--s-10);
}
.stage__intro { text-align: center; }
.stage__eyebrow { color: var(--stage-muted); font-size: var(--fs-sm); margin-bottom: var(--s-2); }
.stage__title { font-size: var(--fs-2xl); letter-spacing: -.01em; }
.stage__tagline { margin-top: var(--s-2); color: var(--stage-muted); font-size: var(--fs-md); }
.stage__tagline span[aria-hidden] { color: var(--accent-text); margin-inline: 6px; }

@media (min-width: 1024px) {
  .stage__inner { grid-template-columns: 1fr minmax(420px, 480px); align-items: center; padding-block: var(--s-16); gap: var(--s-16); }
  .stage__intro { text-align: start; }
  .stage__title { font-size: var(--fs-3xl); }
  .stage__tagline { font-size: var(--fs-lg); }
}

/* Player card (hero) */
.player-card {
  background: var(--stage-surface); border: 1px solid var(--stage-line); border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5) var(--s-5); text-align: center; box-shadow: var(--shadow-2);
}
.player-card__top { display: flex; justify-content: center; margin-bottom: var(--s-4); }
.player-card__label { color: var(--stage-muted); font-size: var(--fs-sm); }
.player-card__title { font-size: var(--fs-xl); margin-top: 2px; }
.player-card__meta { color: var(--stage-muted); font-size: var(--fs-sm); margin-top: var(--s-1); min-height: 1.6em; }
.player-card__controls { display: grid; justify-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.player-card__status { min-height: 1.6em; font-size: var(--fs-sm); color: var(--stage-muted); }
.player-card__status[data-tone="error"] { color: var(--accent-text); }
.player-card__retry { margin-top: var(--s-1); }
.player-card__next {
  margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--stage-line);
  font-size: var(--fs-sm); color: var(--stage-muted);
}
.player-card__next strong { color: var(--stage-text); font-weight: var(--fw-medium); }
.player-card__art {
  width: 72px; height: 72px; border-radius: var(--r-md); margin: 0 auto var(--s-3);
  object-fit: cover; background: var(--stage-surface-2);
}
.player-card__art[hidden] { display: none; }

/* The play button - the product */
.play-btn {
  position: relative; display: grid; place-items: center;
  width: var(--play-xl); height: var(--play-xl); border-radius: 50%; border: 0;
  background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-play);
  transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.play-btn:hover { background: var(--accent-hover); }
.play-btn:active { transform: scale(.96); }
.play-btn svg { width: 40%; height: 40%; }
.play-btn .i-pause, .play-btn .i-spin { display: none; }
[data-player-state="playing"] .play-btn .i-play,
[data-player-state="buffering"] .play-btn .i-play { display: none; }
[data-player-state="playing"] .play-btn .i-pause { display: block; }
[data-player-state="connecting"] .play-btn .i-play,
[data-player-state="reconnecting"] .play-btn .i-play { display: none; }
[data-player-state="connecting"] .play-btn .i-spin,
[data-player-state="reconnecting"] .play-btn .i-spin,
[data-player-state="buffering"] .play-btn .i-spin { display: block; animation: spin 1s linear infinite; }
[data-player-state="offline"] .play-btn { background: var(--stage-surface-2); box-shadow: none; }
/* ring that breathes while connecting */
.play-btn::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0; pointer-events: none;
}
[data-player-state="connecting"] .play-btn::after,
[data-player-state="reconnecting"] .play-btn::after { animation: ring 1.4s var(--ease) infinite; }

.play-btn--sm { width: var(--play-sm); height: var(--play-sm); box-shadow: none; }
.play-btn--sm::after { inset: -5px; }

/* Equalizer (decorative, CSS only - no Web Audio) */
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.eq i { width: 3px; height: 30%; background: var(--accent-text); border-radius: 2px; }
[data-player-state="playing"] .eq i { animation: eq 900ms ease-in-out infinite alternate; }
[data-player-state="playing"] .eq i:nth-child(2) { animation-delay: -300ms; }
[data-player-state="playing"] .eq i:nth-child(3) { animation-delay: -600ms; }
.eq { visibility: hidden; }
[data-player-state="playing"] .eq, [data-player-state="buffering"] .eq { visibility: visible; }

/* ---------- 6. Persistent dock (bottom player) --------------------------- */
.dock {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  background: rgba(11, 17, 28, .96); backdrop-filter: blur(12px);
  border-top: 1px solid var(--stage-line); color: var(--stage-text);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(0); transition: transform var(--dur-3) var(--ease);
}
.dock[data-hidden="true"] { transform: translateY(110%); }
.dock__inner { display: flex; align-items: center; gap: var(--s-3); height: var(--dock-h); }
.dock__text { min-width: 0; flex: 1; }
.dock__title { font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock__status { font-size: var(--fs-xs); color: var(--stage-muted); display: flex; align-items: center; gap: var(--s-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock__status[data-tone="error"] { color: var(--accent-text); }
.dock__art { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; }
.dock__art[hidden] { display: none; }
.dock__volume { display: none; align-items: center; gap: var(--s-2); }
.dock__volume input { width: 110px; accent-color: var(--accent); }
@media (min-width: 768px) { .dock__volume[data-supported="true"] { display: flex; } }
.dock .icon-btn { border-color: transparent; }

/* ---------- 7. Sections -------------------------------------------------- */
.section { padding-block: var(--s-12); }
@media (min-width: 768px) { .section { padding-block: var(--s-16); } }
.section + .section { border-top: 1px solid var(--line); }
.section__head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); flex-wrap: wrap; }
.section__title { font-size: var(--fs-2xl); }
.section__sub { color: var(--text-muted); margin-top: var(--s-1); }
.link-more { color: var(--accent-text); font-weight: var(--fw-bold); text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; }
.link-more:hover { text-decoration: underline; }

.page-head { padding-block: var(--s-10) var(--s-6); }
.page-head h1 { font-size: var(--fs-3xl); }
.page-head p { color: var(--text-muted); margin-top: var(--s-2); font-size: var(--fs-lg); }

/* Show cards */
.shows { display: grid; gap: var(--s-4); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 600px)  { .shows { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .shows { grid-template-columns: repeat(4, 1fr); } }
.show-card {
  position: relative; display: grid; grid-template-columns: 56px 1fr; gap: var(--s-4); align-items: center;
  padding: var(--s-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
}
@media (min-width: 1100px) { .show-card { grid-template-columns: 1fr; align-items: start; padding: var(--s-5); } }
.show-card__mono {
  width: 56px; height: 56px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--surface-2); color: var(--accent-text); font-weight: var(--fw-bold); font-size: var(--fs-xl);
}
.show-card__photo {
  width: 56px; height: 56px; border-radius: var(--r-md); object-fit: cover; background: var(--surface-2);
}
.show-card__title { font-size: var(--fs-lg); }
.show-card__host { color: var(--text-muted); font-size: var(--fs-sm); }
.show-card__when { margin-top: var(--s-1); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.show-card .badge { margin-top: var(--s-2); }
.show-card[data-now="true"] { border-color: var(--accent); }

/* Chat */
.chat {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface);
  max-width: 560px;
}
.chat__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.chat__bar strong { font-size: var(--fs-md); }
.chat iframe { width: 100%; height: 460px; border: 0; background: #fff; }
.chat__placeholder { display: grid; place-items: center; gap: var(--s-3); height: 260px; text-align: center; padding: var(--s-6); color: var(--text-muted); }
.community { display: grid; gap: var(--s-8); }
@media (min-width: 1024px) { .community { grid-template-columns: 1fr 560px; align-items: start; } }
.community__copy p { color: var(--text-muted); margin-top: var(--s-3); max-width: 46ch; }
.community__copy .btn { margin-top: var(--s-5); }

/* Song list */
.songs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
@media (min-width: 900px) { .songs--grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3) var(--s-4); } }
.song {
  display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s-3); align-items: center;
  padding: var(--s-2); padding-inline-end: var(--s-3); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
}
.song img { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; background: var(--surface-2); }
.song__title { font-weight: var(--fw-bold); direction: ltr; text-align: right; unicode-bidi: plaintext; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song__artist { color: var(--text-muted); font-size: var(--fs-sm); direction: ltr; text-align: right; unicode-bidi: plaintext; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song__text { min-width: 0; }
.song__embed { grid-column: 1 / -1; }
.song__embed iframe { width: 100%; height: 152px; border: 0; border-radius: var(--r-md); }
.song .icon-btn { border-color: var(--line); color: var(--text); }
.song .icon-btn:hover { background: var(--surface-2); }

.search { position: relative; max-width: 560px; }
.search input {
  width: 100%; min-height: 52px; padding-inline: 48px var(--s-4); border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-md);
}
.search input::placeholder { color: var(--text-muted); opacity: 1; }
.search svg { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--text-muted); pointer-events: none; }
.filters { display: flex; gap: var(--s-2); overflow-x: auto; padding-block: var(--s-4); scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .filters { flex-wrap: wrap; overflow: visible; } }
.empty { padding: var(--s-10) 0; text-align: center; color: var(--text-muted); }

/* Schedule */
.days {
  display: flex; gap: var(--s-2); overflow-x: auto; padding-block: var(--s-2) var(--s-4);
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none;
}
.days::-webkit-scrollbar { display: none; }
.day-tab { flex-direction: column; min-height: 52px; min-width: 64px; line-height: 1.2; justify-content: center; }
.day-tab small { font-size: 11px; font-weight: var(--fw-regular); opacity: .85; }
.slots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); max-width: 760px; }
.slot {
  display: grid; grid-template-columns: 116px 1fr; gap: var(--s-4); align-items: center;
  padding: var(--s-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
}
.slot__time { font-weight: var(--fw-medium); color: var(--text-muted); font-size: var(--fs-sm); text-align: start; }
.slot__title { font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.slot__host { color: var(--text-muted); font-size: var(--fs-sm); }
.slot--filler { background: transparent; }
.slot--filler .slot__title { font-weight: var(--fw-regular); font-size: var(--fs-md); color: var(--text-muted); }
.slot[data-now="true"] { border-color: var(--accent); box-shadow: inset -4px 0 0 var(--accent); background: var(--surface); }
.slot[data-now="true"] .slot__title { color: var(--text); }
.slot .badge { margin-inline-start: var(--s-2); vertical-align: middle; }
.tz-note { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--s-4); }

/* Contact */
.contact-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 700px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-card {
  display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); min-height: 76px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); text-decoration: none;
}
.contact-card:hover { background: var(--surface-2); }
.contact-card svg { width: 26px; height: 26px; color: var(--accent-text); flex-shrink: 0; }
.contact-card small { display: block; color: var(--text-muted); font-size: var(--fs-sm); }
.contact-card strong { font-size: var(--fs-lg); }
.contact-card .ltr { direction: ltr; unicode-bidi: isolate; }

.wa-form { display: grid; gap: var(--s-4); max-width: 560px; margin-top: var(--s-6); }
.field label { display: block; font-weight: var(--fw-medium); margin-bottom: var(--s-2); }
.field input, .field textarea {
  width: 100%; min-height: 52px; padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-md);
}
.field textarea { min-height: 120px; resize: vertical; }
.field__error { color: var(--accent-text); font-size: var(--fs-sm); margin-top: var(--s-1); }
.field__error:empty { display: none; }
.field [aria-invalid="true"] { border-color: var(--accent); }
.topic { display: flex; flex-wrap: wrap; gap: var(--s-2); border: 0; padding: 0; margin: 0; }
.topic legend { font-weight: var(--fw-medium); margin-bottom: var(--s-2); padding: 0; }

/* Prose (accessibility statement) */
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--s-8); margin-bottom: var(--s-3); }
.prose p, .prose li { color: var(--text); margin-bottom: var(--s-3); }
.prose .todo { background: var(--accent-soft); color: var(--accent-text); padding: 0 6px; border-radius: 4px; }

/* ---------- 8. Footer ---------------------------------------------------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding-block: var(--s-10) calc(var(--s-8) + var(--dock-h) + env(safe-area-inset-bottom, 0px)); /* room for the dock */ color: var(--text-muted); font-size: var(--fs-sm); }
.site-footer__grid { display: grid; gap: var(--s-6); }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1fr auto; align-items: center; } }
.site-footer nav ul { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); list-style: none; margin: 0; padding: 0; }
.site-footer nav a { display: inline-flex; min-height: var(--tap); align-items: center; text-decoration: none; color: var(--text); }
.site-footer nav a:hover { text-decoration: underline; }
.site-footer__legal { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: space-between; }

/* ---------- 9. Toast ----------------------------------------------------- */
.toast {
  position: fixed; inset-inline: var(--gutter); bottom: calc(var(--dock-h) + 12px + env(safe-area-inset-bottom, 0px));
  z-index: 60; max-width: 480px; margin-inline: auto; padding: var(--s-3) var(--s-4);
  background: var(--stage-text); color: var(--stage-bg); border-radius: var(--r-md); box-shadow: var(--shadow-2);
  font-weight: var(--fw-medium);
}
.toast[hidden] { display: none; }


/* ---------- 10. Theme additions (not in the prototype) ------------------ */
.player-card__retry { color: var(--stage-text); border-color: var(--stage-line); }
.page-end { height: var(--s-12); }
.section--flush-top { padding-top: var(--s-10); }
.prose a { color: var(--accent-text); }
.prose ul { padding-inline-start: 1.25em; margin: 0 0 var(--s-3); }
/* Logged-in users with the WP admin bar (pjax is off for them) */
.admin-bar .site-header { top: 32px; }
.admin-bar .mobile-nav { top: calc(var(--header-h) + 32px); }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } .admin-bar .mobile-nav { top: calc(var(--header-h) + 46px); } }
@media (max-width: 600px) { #wpadminbar { position: fixed; } }
main:focus { outline: none; }
.brand picture { display: block; }
.slot__host { display: block; }

/* ---------- 11. Motion --------------------------------------------------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ring { 0% { opacity: .7; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes eq { from { height: 20%; } to { height: 100%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  [data-player-state="playing"] .eq i { height: 60%; }
  .play-btn .i-spin { animation: none !important; }
}