/* Podcast-only rules. Loaded after assets/halaqa.css, which supplies the tokens
   (--teal, --gold, --link, --bg, --focus, --tap, the radius scale) and the page chrome.

   2026-09-13: the hub's halaqa.css is the 5 KB version and has none of the page chrome
   these pages assume - no wrapper, no .pagehead, no player, no chapter list, no
   transcript rules - so both podcast pages rendered edge-to-edge and unstyled. Rather
   than carry the session copy's 40 KB block into the shared hub stylesheet (which would
   restyle every session page), the missing rules are defined here, scoped to the podcast.
   Delete the block at the bottom if halaqa.css ever grows them. */

.subscribe {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.2rem 0 .6rem;
}

.subscribe .btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap, 44px);
  padding: 0 1rem;
  border: 1px solid var(--teal);
  border-radius: var(--r-chip, 999px);
  color: var(--teal-text, var(--teal));
  text-decoration: none;
  font-weight: 500;
}

.subscribe .btn:hover,
.subscribe .btn:focus-visible {
  background: var(--teal);
  color: #fff;
}

.episode-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.episode-list li {
  border: 1px solid var(--rule, rgba(0, 0, 0, .12));
  border-radius: var(--r-card, 12px);
  padding: 1rem 1.1rem;
}

.episode-list h3 {
  margin: 0 0 .3rem;
  font-size: 1.1rem;
}

.episode-list h3 a {
  /* 24px minimum for inline prose links, per the 2026-09-09 accessibility bar */
  display: inline-block;
  min-height: 24px;
}

.episode-list .ep-meta {
  margin: 0 0 .5rem;
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--gold);
}

.episode-list p.ep-summary {
  margin: 0 0 .6rem;
}

.episode-list audio {
  width: 100%;
  min-height: var(--tap, 44px);
}

.disclosure {
  border-left: 3px solid var(--gold);
  padding-left: .8rem;
}

@media print {
  .subscribe,
  .episode-list audio { display: none; }
}

/* =====================================================================
   Page chrome — added 2026-09-13. See the note at the top of this file.
   ===================================================================== */

:root{
  --tap:44px;
  --r-chip:999px;
  --r-card:12px;
  /* was --teal-text:var(--teal) — pinned it to a colour with no dark
     value, so every control using it sat at 2.5:1 on a dark card.
     It now inherits from assets/halaqa.css, which defines both. */
}

/* The podcast pages have no wrapper element of their own, so the page
   itself is the measure. */
body{
  max-width:760px;
  margin:0 auto;
  padding:0 20px 64px;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:8px;
  padding:8px 14px;
  z-index:50;
}
.skip-link:focus{left:20px;top:12px}

.pagehead{padding-top:20px}
.pagehead h1{margin:.2em 0 .4em}

.kicker{
  margin:14px 0 0;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold);
}
.kicker a{color:inherit}

.lede{font-size:1.06rem;margin-top:.4em}

/* Episode nav pills — same shape as nav.session on the halaqa pages */
nav.session-nav{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 8px}
nav.session-nav a{
  padding:6px 12px;
  border:1px solid var(--rule);
  border-radius:var(--r-chip);
  font-size:.85rem;
  text-decoration:none;
  color:var(--ink);
  background:var(--card);
}
nav.session-nav a:hover{border-color:var(--teal-mid);color:var(--teal-mid)}

/* ---------- the player ---------- */
.audio-player{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-card);
  padding:14px 16px;
  margin:16px 0;
}
.audio-player audio{width:100%}
.audio-controls{display:flex;flex-direction:column;gap:10px}

.transport{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.transport button{
  font:inherit;
  font-size:.88rem;
  min-height:var(--tap);
  padding:0 14px;
  border:1px solid var(--teal);
  border-radius:var(--r-chip);
  background:var(--card);
  color:var(--teal-text);
  cursor:pointer;
}
.transport button:hover,
.transport button:focus-visible{background:var(--teal);color:#fff}
.transport button[data-play]{background:var(--teal);color:#fff}
.transport label{font-size:.82rem;color:var(--muted);margin-left:auto}
.transport select{
  font:inherit;
  font-size:.85rem;
  min-height:36px;
  margin-left:6px;
  padding:0 6px;
  border:1px solid var(--rule);
  border-radius:8px;
  background:var(--card);
  color:var(--ink);
}

#podcast-seek{width:100%;min-height:var(--tap,44px);accent-color:var(--teal)}

.audio-times{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:.82rem;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.audio-player button[data-retry]{
  font:inherit;
  font-size:.85rem;
  min-height:36px;
  padding:0 12px;
  border:1px solid var(--rule);
  border-radius:var(--r-chip);
  background:var(--card);
  color:var(--ink);
  cursor:pointer;
}

.audio-file{margin:10px 0 0;font-size:.88rem}

/* ---------- chapters ---------- */
ol.chapters{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  border-top:1px solid var(--rule);
}
ol.chapters li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid var(--rule);
}
ol.chapters li a{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex:1;
  min-width:0;
  text-decoration:none;
  color:var(--ink);
  font-size:.94rem;
}
ol.chapters li a:hover{color:var(--teal-mid)}
ol.chapters .at{
  flex:none;
  width:46px;
  font-size:.82rem;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
ol.chapters button{
  font:inherit;
  font-size:.78rem;
  min-height:32px;
  padding:0 12px;
  border:1px solid var(--rule);
  border-radius:var(--r-chip);
  background:var(--card);
  color:var(--teal-text);
  cursor:pointer;
  flex:none;
}
ol.chapters button:hover,
ol.chapters button:focus-visible{background:var(--teal);color:#fff;border-color:var(--teal)}

/* ---------- transcript ---------- */
.transcript-wrap{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-card);
  padding:12px 16px;
  margin:14px 0;
}
.transcript-wrap > summary{
  cursor:pointer;
  font-weight:500;
  min-height:var(--tap);
  display:flex;
  align-items:center;
}
.transcript{margin-top:10px}
.transcript h3{
  margin:1.4em 0 .3em;
  font-size:1rem;
  scroll-margin-top:16px;
}
.transcript h3:first-child{margin-top:.4em}
.transcript p{max-width:68ch}

.recitation-text{
  background:var(--teal-light);
  border-radius:var(--r-card);
  padding:12px 16px;
  margin:12px 0;
}
.honorific{white-space:nowrap}
.review-status{font-size:.85rem;color:var(--muted)}

/* ---------- foot of page ---------- */
.next-step{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:36px 0 0;
}
.next-step a{
  padding:8px 16px;
  min-height:var(--tap);
  display:inline-flex;
  align-items:center;
  border:1px solid var(--teal);
  border-radius:var(--r-chip);
  text-decoration:none;
  color:var(--teal-text);
  font-weight:500;
}
.next-step a:hover,
.next-step a:focus-visible{background:var(--teal);color:#fff}

@media (max-width:560px){
  body{padding:0 16px 48px}
  .transport label{margin-left:0;width:100%}
  ol.chapters li{flex-wrap:wrap}
}

@media print{
  .skip-link,nav.session-nav,.audio-player,ol.chapters button,.next-step{display:none!important}
  body{max-width:none;padding:0}
  .transcript-wrap{border:none;padding:0}
}

/* imatx:podcast-taps-2026-09-16
   The project's floor is 44px for standalone controls, 24px for inline prose
   links. Measured on an episode page before this block: 35 findings — the 12
   chapter/transport buttons at 32px, the four section links at 36px, the speed
   select, the seek input, the brand link, and every inline reference at 15-19px. */
ol.chapters button,.transport button,[data-audio-player] button{
  min-height:var(--tap,44px);box-sizing:border-box}
nav.session-nav a,.epnav a{display:inline-flex;align-items:center;
  min-height:var(--tap,44px)}
[data-audio-player] select,[data-audio-player] input[type=range]{
  min-height:var(--tap,44px)}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:var(--tap,44px)}
footer a,.ep-links a,p a,li a{display:inline-block;min-height:24px}