/* HappyBein Podcast: the look of Radio by HappyBein (where the HappyBein programs started, Radio v1.16 to v1.53), in HappyBein teal. */
:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --border: #e6e8f0;
  --text: #1a1d29;
  --text-soft: #5a6072;
  --text-faint: #9aa0b4;
  --accent: #0F766E;
  --accent-soft: #e6f6f5;
  --danger: #ef4444;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(20, 24, 49, 0.05), 0 1px 3px rgba(20, 24, 49, 0.06);
  --shadow: 0 4px 14px rgba(20, 24, 49, 0.06), 0 2px 6px rgba(20, 24, 49, 0.04);
  --topbar-bg: rgba(246, 247, 251, 0.85);
  --bar: #c9eeec;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}
/* v1.38: night mode (data-theme="dark", set in <head> and by the 🌙 button) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121419;
  --surface: #1c1f27;
  --border: #2d313c;
  --text: #e9ebf1;
  --text-soft: #a6acbb;
  --text-faint: #6e7485;
  --accent: #2ABFBF;
  --accent-soft: #123536;
  --topbar-bg: rgba(18, 20, 25, 0.85);
  --bar: #1d4a4a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.th-sun { display: none; }
:root[data-theme="dark"] .th-sun { display: block; }
:root[data-theme="dark"] .th-moon { display: none; }
* { box-sizing: border-box; }
/* v1.03: the hidden attribute must always win. Without this, .rd-sheet's display:flex
   kept both pop-ups (countries, share) on screen from the moment the app opened. */
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h2 { margin: 0; }
p { margin: 0; }
a { color: var(--accent); }

/* ---- top bar ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: var(--topbar-bg);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar__home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  font: inherit;
  font-weight: 650;
  font-size: 1.05rem;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.topbar__logo {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0F766E, #2ABFBF);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.topbar__home:active .topbar__logo { transform: scale(0.92); }
.is-refreshing .topbar__logo svg { animation: rd-spin 0.8s linear infinite; }
@keyframes rd-spin { to { transform: rotate(360deg); } }
.ver { font-size: .62rem; font-weight: 600; opacity: .6; margin-left: 4px; letter-spacing: 0; vertical-align: middle; }
.btn {
  font: inherit;
  font-weight: 600;
  font-size: 0.94rem;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn--ghost { color: var(--accent); background: transparent; border: 1px solid var(--border); }
.btn--solid { color: #fff; background: var(--accent); border: 1px solid var(--accent); }
.btn--icon { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; }
.topbar__actions { display: flex; align-items: center; gap: 8px; }

/* ---- share sheet (v1.01): fallback when the phone has no share menu ---- */
.rd-sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(20, 24, 49, 0.4);
}
.rd-sheet__box {
  width: 100%;
  max-width: 480px;
  max-height: 100%;
  overflow-y: auto;
  padding: 18px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.rd-sheet__title { font-size: 1.1rem; }
.rd-sheet__text { margin-top: 4px; color: var(--text-soft); }
.rd-sheet__btns { display: flex; justify-content: flex-end; gap: 8px; }

/* ---- radio ---- */
.radio {
  max-width: 640px;
  margin: 0 auto;
  padding: 14px 16px calc(90px + env(safe-area-inset-bottom, 0px));
}

/* ---- now playing ---- */
.rd-now {
  position: sticky;
  top: calc(64px + env(safe-area-inset-top, 0px));
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.rd-play {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #0F766E, #2ABFBF);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(194, 65, 12, 0.3);
}
.rd-play:active { transform: scale(0.94); }
.rd-play:disabled { opacity: 0.4; cursor: default; }
.rd-play .rd-ic-stop { display: none; }
.rd-now--playing .rd-play .rd-ic-play { display: none; }
.rd-now--playing .rd-play .rd-ic-stop { display: block; }
.rd-now__text { flex: 1; min-width: 0; }
.rd-now__name {
  font-weight: 700;
  font-size: 1.08rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rd-now__status { font-size: 0.86rem; color: var(--text-soft); }
.rd-now__status--err { color: var(--danger); }

/* ---- search + chips ---- */
.rd-search {
  display: block;
  width: 100%;
  margin: 14px 0 10px;
  padding: 11px 14px;
  font: inherit;
  font-size: 1rem; /* 16px: no zoom on iOS */
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
}
.rd-search:focus { outline: none; border-color: var(--accent); }
.rd-chips {
  display: flex;
  flex-wrap: wrap; /* six chips: wrap to a second line on a phone rather than hide one */
  gap: 5px;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.rd-chips::-webkit-scrollbar { display: none; }
.rd-chip {
  flex: 0 0 auto;
  padding: 6px 9px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.rd-chip--on { color: #fff; background: var(--accent); border-color: var(--accent); }

/* ---- list ---- */
.rd-list { list-style: none; margin: 10px 0 0; padding: 0; }
.rd-row {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.rd-row--on { border-color: #2ABFBF; background: var(--accent-soft); }
.rd-row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  font: inherit;
  color: var(--text);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.rd-row__flag { font-size: 1.15rem; line-height: 1; }
.rd-row__name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rd-star {
  flex: 0 0 auto;
  width: 46px;
  align-self: stretch;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text-faint);
  background: none;
  border: 0;
  cursor: pointer;
}
.rd-star--on { color: #f59e0b; }
.rd-star--big { width: 40px; height: 40px; align-self: center; font-size: 1.5rem; }
.rd-nowshare { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -8px; color: var(--text-soft); background: none; border: 0; cursor: pointer; }
.rd-empty { margin: 18px 4px; color: var(--text-soft); text-align: center; }
.rd-note { margin: 20px 4px 0; font-size: 0.8rem; color: var(--text-faint); text-align: center; }

/* little "playing" bars */
.rd-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.rd-eq i { width: 3px; background: #0F766E; border-radius: 1px; animation: rd-eq 0.9s ease-in-out infinite; }
.rd-eq i:nth-child(2) { animation-delay: -0.3s; }
.rd-eq i:nth-child(3) { animation-delay: -0.6s; }
@keyframes rd-eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
@media (prefers-reduced-motion: reduce) { .rd-eq i { animation: none; height: 10px; } }

/* ---- directory results (v1.00) ---- */
.rd-section { margin: 18px 4px 4px; font-size: 0.82rem; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.rd-row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rd-row__sub { font-size: 0.78rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- your countries (v1.02) ---- */
.rd-chip--add { color: var(--accent); border-style: dashed; }
.rd-sheet__box--tall { display: flex; flex-direction: column; height: min(640px, 100%); }
.rd-clist { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.rd-crow {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; font: inherit; color: var(--text); text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--border); cursor: pointer;
}
.rd-crow__name { flex: 1; min-width: 0; font-weight: 600; }
.rd-crow__count { font-size: 0.78rem; color: var(--text-faint); }
.rd-crow__tick { width: 22px; text-align: center; font-weight: 700; color: var(--accent); }
.rd-crow--on { background: var(--accent-soft); }

/* ---- reorder favourites (v1.06) ---- */
.rd-hint { margin: 10px 4px 0; font-size: 0.78rem; color: var(--text-faint); }
.rd-grip {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 2px 0 12px;
  font-size: 1.2rem;
  color: var(--text-faint);
  cursor: grab;
  touch-action: none; /* only the handle: the list itself must keep scrolling */
  user-select: none;
  -webkit-user-select: none;
}
.rd-list--sorting .rd-row { transition: transform 0.15s ease; }
.rd-list--sorting .rd-row--drag { position: relative; z-index: 5; transition: none; box-shadow: var(--shadow); cursor: grabbing; }

/* v1.07: cast button (Google Cast launcher / AirPlay), next to Share. */
.rd-cast { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -6px; color: var(--text-soft); background: none; border: 0; cursor: pointer; }
.rd-cast[hidden] { display: none; }
#castBtn { width: 24px; height: 24px; display: block; cursor: pointer; --disconnected-color: var(--text-soft); --connected-color: var(--accent, #2ABFBF); }

/* v1.08: the star / share / cast row under the station name. */
.rd-now__actions { display: flex; align-items: center; gap: 2px; margin: 2px 0 -6px -8px; }
.rd-now__actions .rd-star--big, .rd-now__actions .rd-nowshare, .rd-now__actions .rd-cast { margin-left: 0; width: 38px; height: 38px; }
.rd-now__actions .rd-star--big { font-size: 1.35rem; }

/* ---- v1.12: Radio / Podcasts switch and podcasts ---- */
.rd-modes { display: flex; gap: 4px; padding: 3px; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
.rd-mode { flex: 1; padding: 8px 10px; font: inherit; font-size: 0.95rem; font-weight: 700; color: var(--text-soft); background: none; border: 0; border-radius: 999px; cursor: pointer; }
.rd-mode--on { color: #fff; background: var(--accent); }
.pd-now { align-items: flex-start; }
.pd-art { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; background: var(--bg); }
.pd-art--now { width: 64px; height: 64px; }
.pd-art--big { width: 96px; height: 96px; border-radius: 14px; }
.pd-seek { width: 100%; margin: 8px 0 4px; accent-color: var(--accent); }
.pd-time { font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.pd-ctrls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.pd-play { width: 46px; height: 46px; }
.pd-btn { min-width: 40px; height: 36px; padding: 0 6px; font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--text-soft); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.pd-show, .pd-ep { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 6px; cursor: pointer; }
.pd-show__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pd-show__t, .pd-ep__t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pd-show__a { font-size: 0.84rem; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-go { color: var(--text-faint); font-size: 1.4rem; }
.pd-ep__play { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.8rem; font-weight: 800; }
.pd-ep--on { border-color: #2ABFBF; background: var(--accent-soft); }
.pd-ep--done .pd-ep__t { color: var(--text-soft); font-weight: 600; }
.pd-back { margin: 14px 0 10px; }
.pd-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.pd-head .pd-show__t { font-size: 1.15rem; }
.pd-follow { align-self: flex-start; margin-top: 8px; padding: 6px 14px; font: inherit; font-size: 0.88rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); border: 1.5px solid var(--accent); border-radius: 999px; cursor: pointer; }
/* v1.13: cast / AirPlay buttons in the podcast player */
.pd-cast { display: inline-grid; place-items: center; width: 36px; height: 36px; }
.pd-cast google-cast-launcher { width: 24px; height: 24px; --connected-color: var(--accent); --disconnected-color: var(--text-soft); }
/* v1.16: HappyBein page (one language at a time) */
.pd-langs { display: flex; gap: 6px; margin-top: 10px; }
.pd-lang { min-width: 44px; padding: 6px 10px; font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--text-soft); background: var(--surface); border: 1.5px solid var(--border); border-radius: 999px; cursor: pointer; }
.pd-lang--on { color: #fff; background: var(--accent); border-color: var(--accent); }
.pd-sec { list-style: none; margin: 16px 4px 6px; font-size: 0.82rem; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.pd-grp { list-style: none; margin: 22px 4px 2px; font-size: 1rem; font-weight: 800; color: var(--text); }
.pd-note { list-style: none; margin: -2px 4px 8px; font-size: 0.82rem; color: var(--text-faint); }
/* v1.20: one player card for episodes, videos and TV (shared by both tabs) */
.pd-now { flex-wrap: wrap; margin-bottom: 12px; }
.pd-vbox { position: relative; flex-basis: 100%; border-radius: var(--radius-sm); overflow: hidden; background: #000; }
.pd-vbox video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 45vh; background: #000; }
.pd-vbtns { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.pd-vbtn { display: inline-grid; place-items: center; width: 36px; height: 34px; color: #fff; background: rgba(0,0,0,.45); border: 0; border-radius: 9px; cursor: pointer; }
.pd-now--live .pd-seek, .pd-now--live #pdBack15, .pd-now--live #pdFwd30, .pd-now--live #pdSpeed { display: none; }
.pd-now--live .pd-time { color: var(--danger); font-weight: 700; }
/* Radio tab: the player shows only after a podcast/video/channel was played, and then replaces the
   station card until a station is played again (body.src-pod). */
body[data-mode="radio"]:not(.src-pod) #pdNow { display: none; }
body.src-pod #now { display: none; }
/* v1.22: auto-play next */
.pd-btn--on { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.pd-next { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 4px 8px; font-size: 0.8rem; color: var(--accent); background: var(--accent-soft); border-radius: 8px; }
.pd-next span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pd-next button { border: 0; background: none; color: var(--accent); font-size: 0.9rem; cursor: pointer; }
/* v1.23: subtitles button */
.pd-cc { width: auto; min-width: 36px; padding: 0 8px; font: inherit; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; }
.pd-vbtn--on { background: var(--accent); }
.pd-vbox video::cue { font-size: 0.95rem; background: rgba(0, 0, 0, 0.7); }
/* v1.26 (owner: "could it be more compact?"): cast beside the title, time beside the bar, one row of controls */
.pd-art--now { width: 52px; height: 52px; }
.pd-titlerow { display: flex; align-items: flex-start; gap: 6px; }
.pd-titletext { flex: 1; min-width: 0; }
.pd-titlerow .pd-cast { width: 32px; height: 32px; flex: 0 0 auto; }
.pd-seekrow { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.pd-seekrow .pd-seek { flex: 1; min-width: 0; margin: 0; }
.pd-seekrow .pd-time { flex: 0 0 auto; margin: 0; font-size: 0.75rem; white-space: nowrap; }
.pd-ctrls { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; margin-top: 6px; }
.pd-ctrls .pd-btn { min-width: 0; flex: 0 1 44px; height: 34px; padding: 0 4px; font-size: 0.8rem; }
.pd-ctrls .pd-play { flex: 0 0 auto; width: 42px; height: 42px; }
.pd-now--live .pd-seekrow { margin-top: 2px; }
/* v1.27: share an episode (beside cast in the title row); a shared episode is highlighted when opened */
.pd-share { color: var(--text-soft); background: none; border: 0; cursor: pointer; }
.pd-ep--shared { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* v1.28: foldable sections on the HappyBein page */
.pd-fold { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; margin: 8px 0 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--text); }
.pd-fold__n { color: var(--text-faint); font-weight: 600; }
.pd-fold__ic { font-size: 1.3rem; color: var(--text-faint); transition: transform .15s ease; }
.pd-fold--open .pd-fold__ic { transform: rotate(90deg); }

/* v1.30: HappyBein programs (Podcasts tab and the HappyBein page) */
.pd-prog { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 6px; cursor: pointer; }
.pd-prog .pd-show__a { white-space: normal; }
.pd-prog--star { border: 1.5px solid var(--accent); background: var(--accent-soft); }
.pd-prog--on { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
.pd-prog__ic { width: 34px; flex: 0 0 auto; text-align: center; font-size: 1.5rem; }
.pd-prog__badge { display: inline-block; margin-left: 4px; padding: 0 7px; font-size: 0.7rem; font-weight: 700; color: var(--accent); background: var(--surface); border: 1px solid var(--accent); border-radius: 999px; vertical-align: middle; }
.pd-prog__play { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; font: inherit; font-size: 0.95rem; font-weight: 800; color: var(--accent); background: var(--surface); border: 1.5px solid var(--accent); cursor: pointer; }
.pd-prog--star .pd-prog__play { color: #fff; background: var(--accent); }
.pd-prog__bar { display: block; height: 4px; margin-top: 6px; max-width: 180px; background: var(--bar); border-radius: 2px; overflow: hidden; }
.pd-prog__bar i { display: block; height: 100%; background: var(--accent); }
.pd-prog__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pd-prog__chip { padding: 5px 10px; font: inherit; font-size: 0.8rem; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
/* v1.31: a program's own page */
.pd-prog__art { display: grid; place-items: center; flex: 0 0 auto; font-size: 3rem; background: var(--accent-soft); border: 1px solid var(--border); }
.pd-prog__meta { white-space: normal; }
/* v1.32: situation programs ("Something on your mind?") and the link to YeahCore */
.pd-sits { list-style: none; margin: 4px 0 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pd-sits__t { display: block; font-weight: 700; }
.pd-prog__link { display: inline-block; margin-top: 8px; font-size: 0.86rem; font-weight: 700; color: var(--accent); text-decoration: none; }
/* v1.34: calmer program cards: one line each, situations on one scrolling row */
.pd-prog .pd-show__a { white-space: nowrap; }
.pd-prog .pd-show__t { -webkit-line-clamp: 1; }
.pd-sits { padding: 10px 0 10px 12px; }
.pd-sits__t { font-size: 0.9rem; }
.pd-sits .pd-prog__chips { flex-wrap: nowrap; overflow-x: auto; padding-right: 12px; scrollbar-width: none; }
.pd-sits .pd-prog__chips::-webkit-scrollbar { display: none; }
.pd-sits .pd-prog__chip { white-space: nowrap; flex: 0 0 auto; }
.pd-show--link { background: transparent; border-style: dashed; padding: 8px 12px; }
.pd-show--link .pd-show__t { font-size: 0.92rem; color: var(--text-soft); }
/* v1.35: the "Essentials only" switch on the YeahCore card and page */
.pd-tog { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 0; font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--text-soft); background: none; border: 0; cursor: pointer; align-self: flex-start; }
.pd-tog__k { position: relative; width: 34px; height: 20px; flex: 0 0 auto; border-radius: 999px; background: var(--border); transition: background .15s ease; }
.pd-tog__k::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s ease; }
.pd-tog--on { color: var(--accent); }
.pd-tog--on .pd-tog__k { background: var(--accent); }
.pd-tog--on .pd-tog__k::after { transform: translateX(14px); }
/* v1.35: "Something on your mind?" folds (closed by default) */
.pd-sits__t { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 0 12px 0 0; font: inherit; font-weight: 700; color: var(--text); background: none; border: 0; cursor: pointer; text-align: left; font-size: 0.95rem; }
.pd-sits--open .pd-fold__ic { transform: rotate(90deg); }
.pd-sits--open .pd-sits__t { margin-bottom: 2px; }
.pd-sits__a { display: block; font-size: 0.82rem; font-weight: 400; color: var(--text-soft); }
/* v1.36: a card title may take two lines (it was cut: "Meet HappyBein: video…") */
.pd-prog .pd-show__t { -webkit-line-clamp: 2; }
/* v1.36 (owner: "the cards in the feelings side … two columns"): the six situations as a 2 × 3 grid */
.pd-sits { padding: 10px 12px; }
.pd-sits .pd-prog__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; padding-right: 0; margin-top: 10px; }
.pd-sits .pd-prog__chip { white-space: normal; text-align: left; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 0.88rem; line-height: 1.25; background: var(--bg); }
.pd-sits__t { padding-right: 0; }
/* v1.38: the auto-play switch under the player buttons */
#pdAuto { margin-top: 10px; }
/* v1.39: buttons and the auto-play switch across the whole card (under the picture too), ⏮ / ⏭ added */
.pd-now { row-gap: 8px; }
.pd-now > .pd-next, .pd-now > .pd-ctrls, .pd-now > #pdAuto { flex-basis: 100%; }
.pd-now > .pd-next, .pd-now > .pd-ctrls { margin-top: 0; }
.pd-now > #pdAuto { margin-top: 2px; }
.pd-now > .pd-ctrls { justify-content: space-between; }
.pd-now > .pd-ctrls .pd-btn { flex: 1 1 0; max-width: 56px; display: inline-grid; place-items: center; }
.pd-btn:disabled { opacity: 0.35; cursor: default; }
.pd-now--live #pdPrevEp, .pd-now--live #pdNextEp { display: none; }
/* v1.40: what YeahCore covers, under its name */
.pd-prog__d { display: block; margin: 1px 0 2px; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); opacity: 0.85; }
/* v1.40 (owner: "Situation Support - by YeahCore", "Personal Guides - by YeahCore"): the maker, small and grey, beside the name */
.pd-by { font-size: 0.78rem; font-weight: 600; color: var(--text-soft); white-space: nowrap; }
/* v1.41 (owner: "it would be better that each radio card have the same look and feel"): the three cards on the
   Podcasts tab share one style: same box, spacing, title and subtitle sizes, and the same round orange-outlined
   button on the right (▶ to play, › to unfold Situation Support). Personal Guide is no longer tinted orange;
   "Start here" alone points newcomers to it, and a card that is playing still gets the orange outline. */
.pd-sits { margin: 0 0 6px; padding: 12px; }
.pd-sits__t { font-size: 1rem; gap: 12px; }
.pd-sits__a { font-size: 0.84rem; }
.pd-prog--star { border: 1px solid var(--border); background: var(--surface); }
.pd-prog--star .pd-prog__play { color: var(--accent); background: var(--surface); }
.pd-prog--on { border-color: var(--accent); }
.pd-sits .pd-fold__ic { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; font-size: 1.35rem; line-height: 1; color: var(--accent); border: 1.5px solid var(--accent); }
/* v1.41 (owner: "each should have same number of text lines, and same height"): three text lines on every card
   (name, what is inside, count or progress), the same height, and Personal Guide's progress bar drawn along the
   bottom edge so it adds no height. */
.pd-prog, .pd-sits:not(.pd-sits--open) { min-height: 88px; }
.pd-prog { position: relative; }
.pd-prog .pd-show__text { justify-content: center; }
.pd-prog__bar { position: absolute; left: 12px; right: 66px; bottom: 7px; max-width: none; height: 3px; margin: 0; }
.pd-sits:not(.pd-sits--open) { display: flex; align-items: center; }
.pd-sits .pd-prog__d { font-weight: 400; }
/* v1.42 (owner: "when a card is clicked upon, it spreads downward instead of opening a new page"): cards unfold in place */
.pd-prog { display: block; min-height: 0; padding: 12px; }
.pd-prog__head { position: relative; display: flex; align-items: center; gap: 12px; min-height: 62px; cursor: pointer; }
.pd-prog__bar { left: 0; right: 54px; bottom: -6px; }
.pd-prog__body { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); cursor: default; }
.pd-prog__eps { list-style: none; margin: 0 0 4px; padding: 0; }
.pd-prog__eps .pd-ep { background: var(--bg); }
.pd-prog__body .pd-tog { margin: 0 0 8px; }
.pd-ch { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 2px; font: inherit; font-size: 0.95rem; font-weight: 700; color: var(--text); text-align: left; background: none; border: 0; border-top: 1px solid var(--border); cursor: pointer; }
.pd-ch__ic { width: 16px; color: var(--accent); font-size: 1.2rem; line-height: 1; transition: transform .15s ease; }
.pd-ch--open .pd-ch__ic { transform: rotate(90deg); }
.pd-ch__t { flex: 1; min-width: 0; }
.pd-ch__n { font-size: 0.82rem; font-weight: 600; color: var(--text-soft); }
.pd-prog__chip--on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.pd-sit { margin-top: 10px; }
.pd-prog--open > .pd-prog__head .pd-show__t { color: var(--accent); }
/* v1.42: › on every card (the same round button as Situation Support), ▶ Play / Continue inside an open card */
.pd-prog .pd-fold__ic { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; font-size: 1.35rem; line-height: 1; color: var(--accent); border: 1.5px solid var(--accent); transition: transform .15s ease; }
.pd-prog--open .pd-fold__ic { transform: rotate(90deg); }
.pd-card__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.pd-card__row .pd-card__play { margin: 0; }
.pd-card__row .pd-tog { margin: 0; align-self: center; }
.pd-card__play { color: #fff; background: var(--accent); }
/* v1.43 (owner: smaller episode rows in open cards): one compact row, the length or state on the right */
.pd-ep--row { gap: 10px; padding: 7px 10px; margin-bottom: 4px; }
.pd-ep--row .pd-ep__play { width: 28px; height: 28px; font-size: 0.7rem; }
.pd-ep--row .pd-ep__t { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.pd-ep__m { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; font-size: 0.76rem; line-height: 1.25; color: var(--text-soft); white-space: nowrap; }
.pd-ep__m small { font-size: 0.7rem; color: var(--text-faint); }
.pd-ep--next { border-color: var(--accent); }
/* v1.44 (owner: "bring podcast and radio buttons all the way to the bottom of the screen (like in intentflow)"):
   Radio / Podcasts as a tab bar fixed at the bottom, icon above the name, the current tab in orange. */
.rd-modes { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; padding: 4px max(8px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left)); gap: 0; background: var(--surface); border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: 0 -2px 10px rgba(20, 24, 49, 0.06); }
.rd-mode { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px 4px; font-size: 0.78rem; font-weight: 700; color: var(--text-soft); background: none; border-radius: 12px; }
.rd-mode__ic { font-size: 1.45rem; line-height: 1.1; filter: grayscale(0.6); opacity: 0.75; }
.rd-mode--on { color: var(--accent); background: none; }
.rd-mode--on .rd-mode__ic { filter: none; opacity: 1; }
.rd-mode--on::before { content: ""; position: absolute; top: -4px; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
#podView .rd-search { margin-bottom: 10px; }
/* v1.45: the small player bar above the tab bar; the player cards no longer stick to the top */
.rd-now { position: relative; top: auto; }
.rd-mini { position: fixed; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: calc(var(--tabbar-h, 64px) + 6px); z-index: 29; max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
.rd-mini__info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.rd-mini__art { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 8px; object-fit: cover; background: var(--bg); }
.rd-mini__text { min-width: 0; display: flex; flex-direction: column; }
.rd-mini__t { font-size: 0.9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-mini__a { font-size: 0.78rem; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-mini__btn { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; color: var(--text); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.rd-mini__play { width: 46px; height: 46px; color: #fff; background: linear-gradient(135deg, #0F766E, #2ABFBF); }
.rd-mini .mi-pause, .rd-mini .mi-stop, .rd-mini--playing .mi-play { display: none; }
.rd-mini--playing:not(.rd-mini--radio) .mi-pause, .rd-mini--playing.rd-mini--radio .mi-stop { display: block; }
body.has-mini main.radio { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
/* v1.45: the search fields show only after tapping 🔍 in the header */
.rd-search--toggled { display: none; }
body.searching .rd-search--toggled { display: block; }
.btn--on { color: #fff; background: var(--accent); border-color: var(--accent); }
/* v1.46 (owner's phone screenshot on v1.45): with the station search hidden, the chip row touched the station
   card; the card keeps its own space below, like the podcast card (12px). */
#now { margin-bottom: 12px; }
/* v1.48: chapter and situation headings inside an open card (no folding), the language button */
.pd-ch--head { cursor: default; padding: 12px 2px 6px; }
.pd-ch--head .pd-ch__t { font-size: 0.92rem; }
.pd-sit__play { flex: 0 0 auto; padding: 4px 12px; font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); border: 1.5px solid var(--accent); border-radius: 999px; cursor: pointer; }
.pd-sits .pd-prog__body { margin-top: 10px; }
.pd-hbhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pd-hbhead .rd-section { margin-right: 0; }
.pd-langbtn { margin: 14px 2px 0; padding: 4px 12px; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
/* v1.48: the language list under the 🌐 button */
.pd-hbhead { position: relative; }
.pd-langmenu { position: absolute; right: 2px; top: calc(100% + 4px); z-index: 25; min-width: 170px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.pd-langmenu__i { display: flex; justify-content: space-between; width: 100%; padding: 10px 12px; font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--text); text-align: left; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.pd-langmenu__i--on { color: var(--accent); background: var(--accent-soft); }
/* v1.49: chapter and situation rows fold again, several can be open at once */
.pd-sit__h { cursor: pointer; }
.pd-sit__h .pd-ch__n { margin-right: 4px; }
/* v1.51: the search field pinned right under the header while 🔍 is on; the player cards step aside meanwhile */
.rd-searchslot { position: sticky; top: var(--hdr-h, 61px); z-index: 19; padding: 10px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); background: var(--bg); border-bottom: 1px solid var(--border); }
.rd-searchslot .rd-search { display: block; max-width: 640px; margin: 0 auto; }
body.searching #pdNow, body.searching #now { display: none !important; }
/* v1.52: whatever plays shows in the player on both tabs. Podcasts tab: the station card while a station is
   playing (instead of the last podcast), otherwise the podcast player as before. */
body[data-mode="pod"]:not(.radio-on) #now, body[data-mode="pod"].src-pod #now { display: none; }
body[data-mode="pod"].radio-on:not(.src-pod) #pdNow { display: none; }

/* ---- HappyBein Podcast v1.00 ---- */
.hb-intro { margin: 4px 2px 14px; }
.hb-intro__t { margin: 0 0 4px; font-size: 1.35rem; line-height: 1.25; letter-spacing: -0.01em; }
.hb-intro__p { color: var(--text-soft); font-size: 0.95rem; }
.hb-foot { margin-top: 6px; }
.hb-dlrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 10px; padding: 8px 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm); font-size: 0.88rem; color: var(--text-soft); }
.hb-dlrow__b { flex: none; padding: 6px 12px; font: inherit; font-weight: 700; color: var(--accent); background: var(--accent-soft); border: 0; border-radius: 999px; cursor: pointer; }
.hb-dl { font-style: normal; margin-right: 4px; color: var(--accent); }
.hb-logo { display: block; padding: 0; background: #fff; object-fit: cover; }
.topbar__title { white-space: nowrap; }