/* Program-page components from the design system's this-sunday preview.
 * Reads the .h2h-program --program-* tokens (see h2h.css). */

/* ---------- Program page ---------- */
/* Access with an end date, said above the hero. Crimson because it's the one
 * thing on this page that changes if it's ignored — but worded as an
 * invitation, and carrying the date rather than a countdown, because nothing
 * has gone wrong: they're here, and this is how they stay. */
.ps-expiry { background: var(--crimson); color: #fff; }
.ps-expiry__inner { max-width: 78rem; margin: 0 auto; padding: var(--sp-3) var(--sp-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
.ps-expiry__text { margin: 0; font-size: var(--text-sm); line-height: 1.5; }
.ps-expiry__text strong { color: var(--gold-soft); }
.ps-expiry__cta { flex: none; display: inline-flex; flex-direction: column; align-items: center;
  gap: .1rem; background: #fff; color: var(--crimson); border: 0; border-radius: var(--radius);
  padding: .55rem 1.2rem; font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
.ps-expiry__cta:hover { background: var(--gold-soft); color: var(--crimson-deep); }
.ps-expiry__credit { font-weight: 500; font-size: .78rem; opacity: .8; }

.ps-head { border-bottom: 1px solid var(--gold-soft); background: linear-gradient(180deg, var(--program-structure-wash, var(--navy-wash)), var(--page)); }
.ps-head__inner { max-width: 78rem; margin: 0 auto; padding: var(--sp-7) var(--sp-6) var(--sp-6); display: flex; gap: var(--sp-6); align-items: center; }
.ps-head__text { flex: 1; min-width: 0; }
.ps-head__eyebrow { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
/* Direct child only — see the note on .ml-rule-eyebrow in home.css. */
.ps-head__eyebrow > span { width: 1.6rem; height: 3px; background: var(--gold); border-radius: 2px; }
.ps-head__eyebrow p { margin: 0; font-size: var(--text-sm); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.ps-head h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: 0 0 var(--sp-3); }
.ps-head__lead { font-size: var(--text-lg); color: var(--ink-soft); max-width: 44rem; margin: 0 0 var(--sp-4); }
.ps-head__meta { display: flex; gap: var(--sp-5); flex-wrap: wrap; font-size: var(--text-sm); color: var(--ink-soft); }
.ps-head__meta b { color: var(--program-accent, var(--crimson)); font-family: var(--font-serif); }
/* Staff-only, so it stays out of the way of the page a visitor came to read. */
.ps-head__staff { margin: var(--sp-4) 0 0; }
.ps-head__edit { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--text-sm); font-weight: 600;
  color: var(--ink-soft); text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius);
  padding: .35rem .7rem; background: var(--card); }
.ps-head__edit::before { content: "✎"; }
.ps-head__edit:hover { color: var(--ink); border-color: var(--ink-soft); }
.ps-head__art { flex: none; width: 18rem; aspect-ratio: 16/10; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); background: #1c1512; }
.ps-head__art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ps-body { max-width: 78rem; margin: 0 auto; padding: var(--sp-6); }
.ps-toolbar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.ps-toolbar h2 { margin: 0; }
.ps-editions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ps-edition { font-size: var(--text-sm); font-weight: 600; text-decoration: none; color: var(--program-structure, var(--navy)); border: 1px solid var(--gold-soft); border-radius: 999px; padding: .3rem .8rem; }
.ps-edition.is-current { background: var(--program-structure, var(--navy)); color: #fff; border-color: transparent; }

.ps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
@media (max-width: 1100px) { .ps-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .ps-grid { grid-template-columns: repeat(2, 1fr); } .ps-head__inner { flex-direction: column; align-items: flex-start; } .ps-head__art { width: 100%; } }
@media (max-width: 520px) { .ps-grid { grid-template-columns: 1fr; } }

.ps-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow 140ms, transform 140ms; }
a.ps-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.ps-card--locked { opacity: .62; }
.ps-card--done { border-left: 3px solid var(--ok); }
.ps-card__thumb { position: relative; padding-top: 56.25%; background: #1c1512; display: grid; place-items: center; }
.ps-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-card__thumb-fallback { position: absolute; color: var(--gold-soft); font-family: var(--font-serif); font-size: var(--text-sm); letter-spacing: .1em; text-transform: uppercase; }
.ps-card__play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 140ms; }
.ps-card__play svg { width: 2.6rem; height: 2.6rem; fill: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
a.ps-card:hover .ps-card__play { opacity: 1; }
.ps-card__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.35); }
.ps-card__bar i { display: block; height: 100%; background: var(--program-accent, var(--crimson)); }
.ps-card__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); flex: 1; display: flex; flex-direction: column; }
.ps-card__num { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 var(--sp-1); }
.ps-card__title { font-size: var(--text-base); font-family: var(--font-serif); margin: 0 0 var(--sp-2); line-height: 1.3; }
.ps-card__meta { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: auto 0 0; }

.ps-pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-6); flex-wrap: wrap; }

/* In-program search — with hundreds of homilies, paging can't find anything.
 * The input takes the room it's given and the button stays fixed at its
 * right, at every width: a control row never rewraps, and searching never
 * moves the controls (no page shifts, ever — 2026-08-29). */
.ps-toolbar__tools { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; flex: 1; justify-content: flex-end; }
.ps-search { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; }
.ps-search .h2h-input { flex: 1 1 auto; min-width: 0; max-width: 32rem; }
/* Reserved whether or not it has anything to say, so the answer to a search
 * is results — not a toolbar that grew a new line. */
.ps-result-line { font-size: var(--text-sm); color: var(--ink-soft); margin: var(--sp-2) 0 var(--sp-4); min-height: 1.25rem; }

/* Session page: keep the player at a consistent position so moving between
 * sessions doesn't shove the layout around. The header holds a fixed height
 * (titles wrap to 1 or 2 lines), and the description moved below the player
 * and is clamped. */
.h2h-session-head { min-height: 8.5rem; display: flex; flex-direction: column; }
.h2h-session-head > p { margin-bottom: var(--sp-2); }
.h2h-session-head__title {
  margin: 0;
  /* Two lines max, always occupying two lines' worth of space. */
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 640px) {
  .h2h-session-head { min-height: 0; }
  .h2h-session-head__title { min-height: 0; -webkit-line-clamp: 3; }
}

/* Unclamped (2026-09-10): summaries run a few lines, and a three-line clamp
 * was hiding eight words behind a button. */
.h2h-session-blurb { margin-bottom: var(--sp-5); }
.h2h-session-blurb p { color: var(--ink-soft); margin: 0; }

/* Compact This Sunday card — atop a program page */
.tsc {
  display: flex;
  /* Top-aligned, not centered: centering re-seats every column when the
   * band's height changes by a line, and the arrows must not move under a
   * clicking finger — the library's day band learned this first. */
  align-items: flex-start;
  gap: var(--sp-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--program-accent, var(--crimson));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
}
/* After the base rule so its background wins: the empty slot is quiet
 * parchment, not a black frame pretending a video failed to load. */
.tsc__thumb.tsc__thumb--empty { background: var(--gold-soft, var(--line)); }
.tsc__thumb {
  flex: none;
  width: 7rem;
  aspect-ratio: 16 / 11;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: #1c1512;
}
.tsc__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tsc__thumb .play { position: absolute; inset: 0; display: grid; place-items: center; }
.tsc__thumb .play span {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--program-accent, var(--crimson));
  display: grid;
  place-items: center;
}
.tsc__thumb .play svg { width: 0.85rem; height: 0.85rem; fill: #fff; margin-left: 2px; }
.tsc__body { flex: 1; min-width: 0; }
.tsc__kick {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.tsc__feast {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-lg);
  margin: 2px 0 3px;
  line-height: 1.25;
}
.tsc__cite { font-size: var(--text-sm); color: var(--program-structure, var(--navy)); font-weight: 600; }
.tsc__controls {
  flex: none; margin-left: auto;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-3);
}
/* Every varying line holds its room: a feast name is one line or two, the
 * citation and the no-match note come and go — the band's height never
 * changes as the weeks step by. */
.tsc__feast { min-height: 2.6em; }
/* Exactly one line's height whether the line has words or not. */
.tsc__cite { line-height: 1.5; min-height: 1.5em; }
.tsc__note { line-height: 1.5; min-height: 1.5em; }
/* The stepper's flex row lives scoped inside the library band's markup
 * (.ml-sunday__top …), so it must be said here too or the circles stack. */
.tsc__controls .ml-sunday__nav {
  display: flex; flex-direction: row; align-items: center;
  gap: var(--sp-2); flex-wrap: nowrap;
}
.tsc__cta { display: flex; gap: var(--sp-2); }
.tsc__cta .h2h-btn { padding: 0.55rem 1.1rem; font-size: var(--text-sm); text-align: center; }

@media (max-width: 760px) {
  .tsc { flex-wrap: wrap; }
  .tsc__controls { width: 100%; flex-direction: row; justify-content: space-between; margin-left: 0; }
}

/* ---------- The way in ----------
 * One obvious next action, then the whole arc in its parts. Someone who has
 * just signed up shouldn't have to work out where to begin. */
.ps-next {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  flex-wrap: wrap; margin-bottom: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--program-accent-wash, var(--crimson-wash));
  border: 1px solid var(--gold-soft); border-radius: var(--radius-lg);
}
.ps-next__label {
  margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-deep);
}
.ps-next__title { margin: .15rem 0 0; font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 700; }
.ps-next__note { margin: .3rem 0 0; font-size: var(--text-sm); color: var(--ink-soft); }

.mg { margin-bottom: var(--sp-7); }
.mg__group { margin-bottom: var(--sp-6); }
.mg__group-head {
  display: flex; align-items: baseline; gap: var(--sp-3);
  border-bottom: 1px solid var(--line); padding-bottom: var(--sp-2); margin-bottom: var(--sp-4);
}
.mg__group-name { margin: 0; font-size: var(--text-lg); }
.mg__group-count { font-size: var(--text-sm); color: var(--ink-soft); }
/* Four across, which is how the modules are actually shaped. */
.mg__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 62rem) { .mg__row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .mg__row { grid-template-columns: 1fr; } }

.mg__card { display: flex; flex-direction: column; }
.mg__thumb {
  position: relative; display: block; aspect-ratio: 16 / 9;
  background: var(--navy-deep); border-radius: var(--radius); overflow: hidden;
}
.mg__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg__card:hover .mg__thumb { box-shadow: var(--shadow-lift); }
.mg__card.is-done .mg__thumb img { opacity: .68; }
.mg__num {
  position: absolute; left: .4rem; top: .4rem; min-width: 1.5rem; text-align: center;
  font-size: .78rem; font-weight: 700; color: #fff; background: rgba(0,0,0,.62);
  border-radius: 5px; padding: .05rem .35rem;
}
.mg__done {
  position: absolute; right: .4rem; top: .4rem; width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ok); color: #fff; font-size: .8rem;
}
.mg__resume {
  position: absolute; right: .4rem; top: .4rem; font-size: .7rem; font-weight: 600;
  background: var(--gold); color: #fff; border-radius: 999px; padding: .1rem .5rem;
}
.mg__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.28); }
.mg__bar i { display: block; height: 100%; background: var(--gold); }
.mg__body { padding-top: var(--sp-2); }
.mg__title { margin: 0; font-size: var(--text-sm); line-height: 1.35; }
.mg__title a { color: var(--ink); text-decoration: none; }
.mg__title a:hover { color: var(--program-accent, var(--crimson)); }
.mg__guide {
  display: inline-block; margin-top: .25rem; font-size: .72rem; font-weight: 600;
  color: var(--gold-deep); text-decoration: none;
}
.mg__guide:hover { text-decoration: underline; }

/* ── The episode page: one player, two layouts ────────────────────────────
 * Watch is a single column with the video dominant. Study is the platform's
 * one read-alongside pattern (2026-08-29, every program the same): the video
 * top-left with the journal below it in the left column, and the reading
 * pane taking the rest of the content area at the right. The player element
 * is identical in both — only the grid moves, because an iframe restarts if
 * it is re-rendered or reparented. */
.ep { display: grid; gap: var(--sp-5); }
/* button_to renders a form, and a block form swallows the row — every
 * control after it wraps underneath. Inline in a controls row, always. */
.ep .button_to { display: inline-flex; width: auto; }
.ep__stage { min-width: 0; }

.ep--watch .ep__guide,
.ep--watch .ep__journal { display: none; }
.ep--study .ep__open { display: none; }
.ep__resume { margin: var(--sp-4) 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--navy); }
.ep__resume + .ep__actions { margin-top: var(--sp-2); }
.ep__actions { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.ep__actions .h2h-btn { padding: 0.55rem 1.1rem; font-size: var(--text-sm); }
/* The description-derived reading band repeats what the open study shows —
   in transcript study mode the gospel section fills its own canonical band
   instead, so only the stage's copy stands down. One copy at a time. */
.ep--study .ep__stage .rd-passage { display: none; }

@media (min-width: 64rem) {
  /* Two columns: the left a little bigger than the old rail, holding the
   * video with the journal directly under it; the reading takes the rest.
   * The empty 1fr row absorbs the reading pane's height, so the journal
   * hugs the video instead of being pushed to the bottom of a 21,000-
   * character transcript. */
  .ep--study {
    grid-template-columns: minmax(24rem, 40fr) minmax(0, 60fr);
    grid-template-rows: auto auto auto 1fr auto;
    align-items: start;
  }
  .ep--study .h2h-session-head { grid-column: 1 / -1; grid-row: 1; }
  .ep--study .ep__stage { grid-column: 1; grid-row: 2; }
  .ep--study .ep__journal { grid-column: 1; grid-row: 3; }
  .ep--study .ep__guide { grid-column: 2; grid-row: 2 / span 3; }
  .ep--study .h2h-episode-nav { grid-column: 1 / -1; grid-row: 5; }
  .ep--study .h2h-session-blurb { display: none; }

  /* Gospel studies, design A (2026-08-29): an audio page. The bar rides
   * full width up top, the gospel fills the reading band, and the teaching
   * flows beside a 20rem journal rail. Single column at the grid level —
   * the pair makes its own columns — widened to 78rem, the existing
   * .ps-body value rather than a tenth new one. */
  .ep--audio { grid-template-columns: minmax(0, 1fr); max-width: 78rem; margin: 0 auto; }
  .ep--audio .ep__guide { display: contents; }
  .ep--audio .ep__stage { position: static; }
  /* The fallback strip: the player's aspect trick is padding-top against
   * the CONTAINING block, which in a single column is the whole 78rem —
   * left alone it renders a monolith. Fixed box instead. */
  .ep--audio .h2h-player { width: 20rem; padding-top: 0; height: 11.25rem; }
  /* Stacked (2026-09-11): the teaching at full measure with the journal in
   * a 20rem rail that rides the whole length of it. The passage has its own
   * row above — two sense-lined columns could not share the width. Below
   * 78rem the rail drops beneath the teaching. */
  .epA__two { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-6); align-items: start; }
  .epA__main { min-width: 0; }
}

.ep__guide { min-width: 0; }
.ep__reading { min-width: 0; }
.ep__guide-break { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }

/* ── The audio bar (design A) — the teaching's real file, from Buzzsprout ── */
.au {
  display: flex; align-items: center; gap: var(--sp-4);
  background: linear-gradient(120deg, var(--navy), var(--navy-deep));
  border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-lift); color: #fff;
}
/* The video-engine bar: the tile is a real YouTube player at their 200px
 * minimum, controls off, driven by the bar. Paused it wears the thumbnail;
 * playing it shows the video in miniature. */
.au--video { align-items: stretch; }
/* Doubled class beats the base .au__art sizing wherever the rules sit —
 * losing that cascade shrank the player back to a 4.5rem art chip and the
 * whole bar read as the old layout. */
.au__art.au__art--player { flex: none; width: 22.25rem; height: 12.5rem; border-radius: var(--radius); overflow: hidden; background: #1c1512; }
.au__art.au__art--player { position: relative; }
/* Full frame, never cropped — and never hovered: the playback overlay
 * (title, share) draws only while the pointer is over the player, so the
 * player simply never gets the pointer. Our cover layer takes every click. */
.au__art.au__art--player iframe {
  position: absolute; inset: 0; border: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
/* The poster over the paused player: YouTube's paused chrome never shows. */
.au__cover { position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer; background: #1c1512; }
.au__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.au__cover-play {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.au__cover-play svg {
  width: 3rem; height: 3rem; padding: .85rem; box-sizing: content-box;
  border-radius: 50%; background: var(--gold); fill: var(--navy-deep);
  box-shadow: var(--shadow-lift);
}
/* Playing, the cover goes transparent and stays for the clicks: the tile
 * remains the pause surface without the player ever seeing a hover. */
.au__cover.is-playing { background: transparent; }
.au__cover.is-playing img,
.au__cover.is-playing .au__cover-play { display: none; }
.au__deck { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3); }
.au__deck .au__t { margin-bottom: 0; font-size: var(--text-base); white-space: normal; }
.au__row { display: flex; align-items: center; gap: var(--sp-4); }
.au__row .au__scrub { flex: 1; min-width: 0; }
@media (max-width: 760px) {
  .au--video { flex-direction: column; }
  .au__art--player { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}
.au__art { flex: none; width: 4.5rem; height: 4.5rem; border-radius: var(--radius); overflow: hidden; background: #1c1512; }
.au__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.au__play {
  flex: none; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--gold); border: 0; cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow);
}
.au__play svg { width: 1rem; height: 1rem; fill: var(--navy-deep); margin-left: 2px; }
.au__mid { flex: 1; min-width: 0; }
.au__t {
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600;
  margin-bottom: .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.au__t span { color: rgba(255, 255, 255, .68); font-weight: 400; }
.au__scrub { display: flex; align-items: center; gap: var(--sp-3); }
/* The line stays a hairline; the hit area doesn't. A 5px target asks for
 * surgeon's aim — the bar accepts clicks a comfortable band above and below
 * the line it draws. */
.au__bar { flex: 1; position: relative; cursor: pointer; height: 5px; padding: .6rem 0; box-sizing: content-box; }
.au__bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, .22);
}
.au__bar i {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 5px; border-radius: 3px; background: var(--gold);
}
.au__bar b { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: var(--shadow); }
.au__time { font-family: var(--font-sans); font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .75); white-space: nowrap; }
.au__acts { display: flex; align-items: center; gap: .4rem; flex: none; }
.au__ic {
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3); background: transparent; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-sans); font-size: .72rem; font-weight: 700; text-decoration: none;
}
.au__ic:hover { background: rgba(255, 255, 255, .14); }
.au__ic svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The journal rail wears the card treatment in transcript mode; signed out,
 * the same seat is the dashed-gold invitation (design A). */
.ep--audio .ep__journal {
  /* The study grid's own placement rule (.ep--study .ep__journal, row 3)
   * would drop the rail under the teaching; inside the pair it takes its
   * natural cell. */
  display: flex; position: sticky; top: var(--sp-4); grid-column: auto; grid-row: auto;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-4); box-shadow: var(--shadow);
}
.ep--audio .ep__journal--invite {
  border: 1px dashed var(--gold); background: var(--gold-wash); box-shadow: none;
}
.ep__guide-head { margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.ep__guide-topline { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.ep__guide-close { font-size: var(--text-sm); color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ep__guide-close:hover { color: var(--navy); }
.ep__guide-label {
  margin: 0 0 var(--sp-1); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep, var(--ink-soft));
}
.ep__guide-title { font-family: var(--font-serif); margin: 0 0 var(--sp-1); font-size: var(--text-2xl); }
.ep__guide-where { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.ep__sep { margin: 0 .4rem; opacity: .5; }

.ep__guide-step {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line);
}
.ep__guide-link { font-weight: 600; }
.ep__guide-link--next { text-align: right; }

.ep__journal {
  position: sticky; top: var(--sp-4); display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-4);
}
.ep__journal-head { display: flex; justify-content: space-between; align-items: baseline; }
.ep__journal-label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.ep__journal-status { font-size: var(--text-sm); color: var(--ink-soft); }
.ep__journal-for { margin: var(--sp-1) 0 var(--sp-2); font-weight: 600; font-size: var(--text-sm); }
.ep__journal-body {
  width: 100%; min-height: 14rem; resize: vertical; font: inherit; line-height: 1.6;
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3);
  background: var(--page);
}
.ep__journal-note, .ep__journal-all { margin: var(--sp-2) 0 0; font-size: var(--text-sm); color: var(--ink-soft); }

/* Shown only once the episode has actually finished. */
.ep__ended {
  margin: var(--sp-4) 0; padding: var(--sp-4);
  background: var(--gold-wash, var(--navy-wash)); border-left: 3px solid var(--gold);
  border-radius: var(--radius);
}
.ep__ended-said { margin: 0 0 var(--sp-3); font-weight: 600; }
.ep__ended-next { display: flex; gap: var(--sp-3); flex-wrap: wrap; }


/* Reference sheets: designed pages kept as PDFs, offered to print. */
.ws { margin: var(--sp-7) 0; }
.ws__title { font-family: var(--font-serif); margin: 0 0 var(--sp-1); }
.ws__lead { margin: 0 0 var(--sp-4); color: var(--ink-soft); max-width: 42rem; }
.ws__items { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.ws__item {
  display: flex; flex-direction: column; gap: .2rem; padding: var(--sp-4);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.ws__item:hover { border-color: var(--gold); box-shadow: var(--shadow); }
.ws__item-title { font-weight: 600; }
.ws__item-meta { font-size: var(--text-sm); color: var(--ink-soft); }

/* Groups you lead. */
.gl { display: grid; gap: var(--sp-3); max-width: 40rem; }
.gl__item {
  display: flex; flex-direction: column; gap: .2rem; padding: var(--sp-4);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.gl__item:hover { border-color: var(--gold); }
.gl__name { font-weight: 600; font-family: var(--font-serif); font-size: var(--text-lg); }
.gl__meta { font-size: var(--text-sm); color: var(--ink-soft); }

/* The leader's bar: what someone running a group came here to do. */
.lb {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5);
  flex-wrap: wrap; margin: var(--sp-4) 0 var(--sp-6); padding: var(--sp-4) var(--sp-5);
  background: var(--navy-wash); border: 1px solid var(--line);
  border-left: 3px solid var(--navy-deep); border-radius: var(--radius);
}
.lb__label { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.lb__name { margin: .1rem 0 .1rem; font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 700; }
.lb__meta { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.lb__sep { margin: 0 .3rem; opacity: .6; }
.lb__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* The member's version: information, not controls. */
.lb--member { border-left-color: var(--gold); }

/* Facilitator resources: one row per thing, its actions on the right, so a
 * game and the deck it came from stop looking like two different games. */
.fr__items { display: flex; flex-direction: column; gap: var(--sp-2); }
.fr__item {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  flex-wrap: wrap; padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
}
.fr__item:first-child { border-top: 0; }
.fr__title { margin: 0; font-weight: 600; }
.fr__detail { margin: .1rem 0 0; font-size: var(--text-sm); color: var(--ink-soft); }
.fr__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* The group page: cards that say what they're for, rather than a column of
 * buttons with sentences trailing off them. */
.gh-run { display: flex; flex-direction: column; gap: var(--sp-3); }
.gh-run__head h3 { margin: 0 0 var(--sp-1); }
.gh-run__head p { margin: 0; }
.gh-run__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.gh-run__next { margin: 0; }

/* Two ways to run a gathering, side by side so the difference between them is
 * readable rather than remembered. Both look like cards you can press; the
 * chosen one is filled in and checked. */
.gh-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--sp-3); }
.gh-modes__form { display: block; }
.gh-mode { display: flex; flex-direction: column; gap: 0.15rem; width: 100%; height: 100%;
  text-align: left; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--card); cursor: pointer; font: inherit; }
.gh-mode:hover { border-color: var(--crimson); }
.gh-mode.is-on { border-color: var(--crimson); background: var(--crimson-wash); box-shadow: inset 0 0 0 1px var(--crimson); }
.gh-mode__name { font-weight: 700; color: var(--ink); }
.gh-mode.is-on .gh-mode__name::after { content: " \2713"; color: var(--crimson); }
.gh-mode__detail { font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.4; }
.gh-modes__label { margin: 0; font-weight: 600; color: var(--ink); }

.gh-progress__stats {
  display: flex; gap: var(--sp-6); flex-wrap: wrap; margin: var(--sp-3) 0 var(--sp-3);
}
.gh-progress__stats div { display: flex; flex-direction: column; }
.gh-progress__stats b { font-family: var(--font-serif); font-size: var(--text-2xl); line-height: 1.1; }
.gh-progress__stats span { font-size: var(--text-sm); color: var(--ink-soft); }

.gh-upgrade {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap; margin: var(--sp-3) 0 var(--sp-5); padding: var(--sp-4);
  background: var(--navy-wash); border: 1px solid var(--line); border-radius: var(--radius);
}
.gh-upgrade p { margin: 0; max-width: 32rem; }

/* A participant's own things, above the group's. */
.ps-yours { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-4) 0 0; }

/* Admin dashboard, grouped by the job you came to do. */
.ad-group { margin: var(--sp-5) 0; }
.ad-group__name {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 var(--sp-2);
}
.ad-group__links { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.ad-group--lead .ad-group__name { color: var(--crimson); }
.ad-group--lead { padding: var(--sp-4); background: var(--navy-wash); border-radius: var(--radius); }

/* On the audio page the passage is a block at its own width, not a band:
 * 42rem so no lectionary line wraps, a gold rule on the left and no wash
 * spanning the page — the wash across 78rem is what read as a slab. Folded
 * at eight lines: a third of a screen, the whole gospel one press away. */
.ep--audio .ep__passage { max-width: 46rem; margin: 0 0 var(--sp-6); }
.ep--audio .ep__passage .rd-passage { margin: 0; background: transparent; border-radius: 0; border-left: 0; padding: 0; }
/* The head as a bar: label and citation on a gold ground the width of the
 * block, so the citation reads as the block's own title and a way out,
 * rather than a link hanging in white space. */
.ep--audio .ep__passage .rd-passage__head {
  background: var(--gold-wash); border-left: 3px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0;
  padding: .55rem var(--sp-4); margin: 0 0 var(--sp-4); align-items: center; }
.ep--audio .ep__passage .rd-passage__cite { font-size: var(--text-lg); }
.ep--audio .ep__passage .rd-passage__body, .ep--audio .ep__passage .rd-passage__more { margin-left: var(--sp-4); }
.ep--audio .ep__passage .rd-passage:not(.is-expanded) .rd-passage__body { max-height: 12.5em; }
.ep--audio .ep__passage .rd-passage.is-overflowing:not(.is-expanded) .rd-passage__body::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--page, #fff)); }
.ep--audio .ep__reading .rd__prose, .ep--audio .ep__reading .h2h-session-blurb { max-width: 46rem; }
.ep--audio .ep__reading .h2h-session-blurb p { font-size: var(--text-lg); line-height: 1.6; }
.ep__journal-reading { margin: var(--sp-2) 0 0; font-size: var(--text-sm); }