/* The Infinite WAY — listen-and-read session.
 *
 * A READING COLUMN, NOT A DASHBOARD. The first build put this page on the shared 1500px
 * container and capped the prose at 68ch, which measured 837px of dead space to the right of
 * every paragraph inside a 1436px card. The other four pages are data tools and want the width;
 * this one is a twelve-minute document and wants a column. `--col` below is that column and
 * `.waycol` applies it to the masthead, the hero and the body alike, so the page has one left
 * edge all the way down. Everything about its size is tuned by measurement rather than by taste,
 * and the note on `--col` below says which three values have to move together to keep the line
 * length inside the 45-85 characters that is comfortable to read.
 *
 * THE HERO BAND IS DELIBERATELY NOT THE SHARED BLUE `.hero`. Lori's original used charcoal with
 * the accent orange on it, and that pairing is why the band reads as a welcome rather than as a
 * report header. The shared blue would force WAY onto --on-blue-hot peach and lose it. This is a
 * documented departure: please do not helpfully reconcile it with the other four pages. Her
 * accent was already #C33E1D, which is --accent here, so only the band itself is new.
 */

:root{
  /* 780px, then 980px, now this. Three things move together and the ratio between them is the
     whole design, so do not widen this number on its own: the column, the chapter type size, and
     the card's inside padding. Widening alone blows the line length out — this column at the
     original 16px type would measure 110 characters — so the type is 20.5px and the card carries
     up to 3.5rem of inside padding. Since the SERVE rail moved into this width too, the cap also
     carries the rail and its gap. Measured together they hold ~84 characters a line at the cap
     and fewer below it, which is the top of the comfortable band and the price of the width.
     Type this large is right for this page specifically: it is read along with while it is being
     spoken, and bigger text is easier to track against a moving highlight. */
  --col: min(1100px, 94vw);

  /* The hero band runs wider than the session below it, and lines up with the masthead: the
     hero is chrome and can take the width, the chapters are prose and cannot, which is what
     --col is tuned for. 1500px and the same side padding as .mh-in in app.css, so the logo and
     the big heading share one left edge. */
  --colwide: 1500px;
  /* Lori's charcoal, and its dark-theme partner. Not --ink: the band must stay dark in BOTH
     themes, and --ink inverts to near-white in dark. */
  --band: #2B2B2B;
  --band-ink: #FFFFFF;
  --band-sub: #C9C4BD;
  --band-kick: #9A938A;

  /* THE ACCENT ON THE BAND IS NOT --accent, and this is the one place Lori's original had to be
     corrected rather than kept. Her orange #C33E1D on her charcoal #2B2B2B measures 2.72:1, which
     fails even the 3:1 large-text floor for the WAY in the heading. Lightening it to #EE7A3E
     holds the same hue and gets 5.05:1 on the light band, 6.3:1 on the darker one, so one value
     serves both themes. Used only on the band; the SERVE rail sits on the canvas and uses
     --accent, which is the brand colour and passes there at 5.2:1. */
  --band-accent: #EE7A3E;

  /* The column's side padding, as a variable because .waycol is applied in three places. */
  --pad: clamp(1rem,4vw,1.75rem);
}
:root[data-theme="dark"]{
  --band: #1B1815; --band-ink: #F4EFE9; --band-sub: #A79E90;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --band: #1B1815; --band-ink: #F4EFE9; --band-sub: #A79E90;
  }
}

/* One column, applied to the masthead row, the hero contents and the body. The backgrounds
   behind the first two still run full bleed; only the contents are held to the column. */
.waycol{ max-width:var(--col); margin-inline:auto; padding-inline:var(--pad); }
/* The hero band alone runs wide. The masthead used to be widened with it and no longer is:
   that bar is shared across every page in the app and is defined once in app.css. */
.hw-in.waycol{ max-width:var(--colwide); padding-inline:clamp(1rem,3vw,2rem); }
.container.waycol{ padding-block:1.25rem 2rem; }

.gstate{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius);
  padding:1rem 1.15rem; margin:1.2rem 0; color:var(--muted); }
.gstate h2{ color:var(--ink); font-size:1.1rem; margin:0 0 .5rem; }
.gstate p{ margin:.45rem 0; max-width:62ch; line-height:1.5; }
.gstate.denied{ border-left:4px solid var(--amber); }
.gstate.err{ border-left:4px solid var(--accent); color:var(--accent); }

/* ---- hero ---- */

.hero-way{ background:var(--band); color:var(--band-ink); }
.hw-in{ padding-block:clamp(2rem,5vw,3rem) clamp(1.75rem,4vw,2.5rem);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem clamp(2rem,4vw,3.5rem); }
.hw-text{ flex:1 1 24rem; min-width:0; }

.kicker{ margin:0 0 .9rem; font-size:.72rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--band-kick); }

.hero-way h1{ margin:0; font-weight:800; line-height:1.08; letter-spacing:-.02em;
  font-size:clamp(2.1rem,6vw,3.1rem); }
.hero-way h1 em{ font-style:normal; color:var(--band-accent); }

.hw-sub{ margin:.9rem 0 0; color:var(--band-sub); font-size:1.12rem; line-height:1.6;
  max-width:46em; }

/* SERVE, reading DOWN the accent letters. One grid of fifteen cells, three per word: the part
   before the accent letter, the letter, the part after. Because all five rows share the grid,
   the three columns are sized once from their widest content and the accent letters land in a
   single vertical line — with the real proportional font, no monospace needed. Column one is
   right-aligned into the letter and column three runs away from it.
   It sits on the charcoal band, so the colours are the --band-* pair. Do not reach for --accent
   here: the brand orange on Lori's charcoal measures 2.72:1, which is why --band-accent exists. */
.serve{ margin:0; display:grid; grid-template-columns:auto auto auto; row-gap:.12em;
  flex:0 0 auto;
  font-weight:800; font-size:clamp(1.4rem,2.2vw,2.2rem); letter-spacing:.07em;
  line-height:1.3; color:var(--band-sub); }
.serve > *{ white-space:pre; }
.serve span:nth-child(3n+1){ text-align:right; }
.serve b{ color:var(--band-accent); text-align:center; font-weight:800; }

/* ---- listen bar ---- */

.listenbar{ position:sticky; top:0; z-index:40; background:var(--canvas);
  border-bottom:1px solid var(--rule); margin:0 0 1.1rem; padding:.65rem 0; }
.lb-in{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }

/* Solid --accent is a new pattern here — nothing in app.css fills a button with it — so the
   contrast is worked out rather than inherited. White on the light accent (#C33E1D) is 5.2:1 and
   passes AA. White on the DARK accent (#E0682F, deliberately lighter so it reads on a near-black
   canvas) is only 3.4:1 and fails at this size, so dark theme flips to dark ink at 5.5:1. Same
   for the active chapter number below. */
.btn-play{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:999px;
  font:inherit; font-weight:600; font-size:.92rem; padding:.6rem 1.15rem; }
.btn-play:hover{ filter:brightness(1.08); }
.btn-play .glyph{ font-size:.85em; }
:root[data-theme="dark"] .btn-play{ color:var(--canvas); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn-play{ color:var(--canvas); }
}

.btn-ghost{ cursor:pointer; background:var(--paper); border:1px solid var(--rule);
  color:var(--muted); border-radius:999px; font:inherit; font-size:.85rem;
  padding:.5rem .7rem; line-height:1; }
.btn-ghost:hover{ background:var(--hover); color:var(--ink); }
.btn-ghost:disabled{ opacity:.4; cursor:default; background:var(--paper); color:var(--muted); }

.lb-now{ flex:1 1 9rem; min-width:8rem; }
.now{ margin:0; font-size:.82rem; color:var(--muted); }
.now b{ color:var(--ink); font-weight:600; }
.bar{ display:block; height:4px; margin-top:.32rem; border-radius:999px;
  background:var(--track); overflow:hidden; }
.bar-fill{ display:block; height:100%; width:0; background:var(--accent);
  border-radius:999px; transition:width .25s linear; }
@media (prefers-reduced-motion: reduce){ .bar-fill{ transition:none; } }

.lb-sel{ display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; color:var(--muted); }
.lb-sel select{ font:inherit; font-size:.82rem; padding:.38rem .5rem; border-radius:8px;
  border:1px solid var(--rule); background:var(--paper); color:var(--ink); }

/* ---- resume + note ---- */

.resume{ margin:0 0 .9rem; font-size:.87rem; color:var(--ink);
  background:var(--amber-bg); border:1px solid var(--amber-line); border-radius:10px;
  padding:.6rem .8rem; }
.resume button{ font:inherit; font-size:.87rem; font-weight:600; cursor:pointer;
  background:none; border:none; padding:0 .15rem; color:var(--accent);
  text-decoration:underline; text-underline-offset:2px; }
.resume .dismiss{ color:var(--muted); font-weight:400; }


/* ---- chapters ---- */

.chapter{ background:var(--paper); border:1px solid var(--rule); border-radius:14px;
  margin:0 0 1rem; overflow:hidden; box-shadow:var(--shadow); }
.chapter.active{ border-color:var(--accent); }

/* The inside padding grows with the column, which is half of what keeps the line length in
   range as the page widens. The other half is the type size on .ch-body p. */
.ch-head{ display:flex; align-items:center; gap:.9rem;
  padding-block:1.05rem; padding-inline:clamp(1.25rem,4vw,3.5rem);
  background:var(--tint); border-bottom:1px solid var(--rule); }
.chapter.active .ch-head{ background:var(--exec-bg,var(--hover)); }
:root[data-theme="dark"] .chapter.active .ch-head{ background:rgba(224,104,47,.14); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .chapter.active .ch-head{ background:rgba(224,104,47,.14); }
}

.ch-num{ flex:none; width:2.45rem; height:2.45rem; border-radius:50%; display:grid;
  place-items:center; font-weight:700; font-size:1rem;
  background:var(--ink); color:var(--canvas); }
.chapter.active .ch-num{ background:var(--accent); color:#fff; }
:root[data-theme="dark"] .chapter.active .ch-num{ color:var(--canvas); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .chapter.active .ch-num{ color:var(--canvas); }
}

.ch-title{ flex:1; min-width:0; }
.ch-title h2{ margin:0; font-size:1.3rem; font-weight:600; color:var(--ink);
  font-family:'Bricolage Grotesque',system-ui,sans-serif; letter-spacing:-.01em; }
.ch-title p{ margin:.15rem 0 0; font-size:.92rem; color:var(--muted); }
.ch-len{ flex:none; font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.ch-play{ flex:none; cursor:pointer; background:var(--paper); border:1px solid var(--rule);
  color:var(--muted); border-radius:999px; width:2.5rem; height:2.5rem; font:inherit;
  font-size:.8rem; line-height:1; display:grid; place-items:center; }
.ch-play:hover{ background:var(--hover); color:var(--ink); border-color:var(--accent); }
/* A finger, not a mouse: 40px is under the 44px target and this is the control people reach for
   most on a phone, once per chapter. */
@media (pointer: coarse){ .ch-play{ width:2.75rem; height:2.75rem; } }

.ch-body{ padding-block:1.6rem 1.8rem; padding-inline:clamp(1.25rem,4vw,3.5rem); }
/* No max-width here on purpose. The column, this size and the card padding together hold the
   measure, so the paragraph fills its card instead of leaving a third of it empty. */
.ch-body p{ margin:0 0 1.05rem; line-height:1.7; font-size:1.28rem;
  border-left:3px solid transparent; padding-left:.7rem; margin-left:-.7rem;
  transition:background .2s ease, border-color .2s ease; }
.ch-body p:last-child{ margin-bottom:0; }
@media (prefers-reduced-motion: reduce){ .ch-body p{ transition:none; } }

/* The highlight is a left rule plus a tint, not colour alone: at 1.5x on a phone the tint on its
   own is easy to lose, and it has to survive both themes. */
.ch-body p.speaking{ border-left-color:var(--accent); background:var(--hover); }
:root[data-theme="dark"] .ch-body p.speaking{ background:rgba(224,104,47,.10); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ch-body p.speaking{ background:rgba(224,104,47,.10); }
}

.ch-body p.ask{ background:var(--amber-bg); border:1px solid var(--amber-line);
  border-left:3px solid var(--amber); border-radius:10px; padding:.95rem 1.1rem;
  color:var(--amber-ink); font-weight:500; margin-left:0; }
.ch-body p.ask.speaking{ border-left-color:var(--accent); background:var(--amber-bg); }

/* ---- footer ---- */

.wfoot{ margin:2rem 0 1rem; padding-top:1.1rem; border-top:1px solid var(--rule); }
.wfoot-meta{ margin:0; font-size:.8rem; color:var(--muted); font-style:italic; }

/* ---- narrow ----
   The bar is sticky, so on a phone every pixel of it is a pixel of chapter nobody can read. Laid
   out full it measured 197px of an 812px screen. Down to about 90px by dropping the word beside
   the speed select, dropping the follow-along toggle (following is the default and a manual
   scroll already suspends it for six seconds, which is the behaviour the toggle mostly exists to
   give), and floating the progress line onto the bar's bottom edge instead of giving it a row. */
/* Below this the heading and the acrostic leave each other too little room side by side, so the
   hero stacks. Still the vertical acrostic: turning it back into a run of inline text is what
   broke it before. */
@media (max-width: 760px){
  .hw-in{ flex-direction:column; align-items:flex-start; }
  .hw-text{ flex:none; }
}

@media (max-width: 640px){
  /* The hero is not sticky, so it costs a phone one scroll rather than permanent height, and the
     play button still lands above the fold at 812px. Tightened anyway: a 318px title band on an
     812px screen is more title page than a session needs. */
  .hw-in{ padding-block:1.6rem 1.35rem; gap:1.15rem; }
  .kicker{ margin-bottom:.6rem; }
  /* Stacked, the acrostic is five lines under the heading and every one of them is height the
     first chapter does not get. Trimmed so the hero stays near 350px of an 812px screen. */
  .serve{ font-size:1.25rem; }
  .hw-sub{ font-size:1rem; margin-top:.65rem; }

  .lb-in{ gap:.5rem; }
  .lb-sel > span{ display:none; }
  .lb-now{ flex:1 1 100%; order:9; }
  .now{ font-size:.78rem; }
  .btn-play{ padding:.55rem 1rem; font-size:.88rem; }
  /* .listenbar is sticky, so it is already the containing block for this. */
  .bar{ position:absolute; left:0; right:0; bottom:0; height:3px; margin:0; border-radius:0; }
  .ch-head{ padding-inline:.95rem; }
  .ch-body{ padding:1.05rem .95rem 1.15rem; }
  .ch-body p{ font-size:1.05rem; }
  .ch-title h2{ font-size:1.12rem; }
}

/* Below this the control row does not fit and wraps, which costs two rows of a sticky bar: at
   414px it overshot by ONE pixel and took the bar from 87px to 129px. 430px is where play, skip,
   speed and previous stop fitting together, measured rather than guessed. Previous-chapter is the
   one control here with a ready substitute — the chapter's own play button — so it is what goes. */
@media (max-width: 430px){
  .lb-in{ gap:.4rem; }
  #prevBtn{ display:none; }
}

/* ---- print: the transcript, without the player ----
   Someone will want this on paper or as a PDF, and the audio controls mean nothing there. */
@media print{
  .mh-r, .listenbar, .resume, .ch-play, .ch-len{ display:none !important; }
  .waycol{ max-width:none; padding-inline:0; }
  .hero-way{ background:none; color:#000; border-bottom:2px solid #333; }
  .kicker, .hw-sub{ color:#444 !important; }
  .serve{ color:#333 !important; }
  .hero-way h1 em, .serve b{ color:#000 !important; }
  .chapter{ box-shadow:none; border-color:#bbb; break-inside:avoid; }
  .ch-head{ background:none; border-bottom:1px solid #bbb; }
  .ch-body p{ border-left:none; padding-left:0; margin-left:0; background:none !important; }
  .ch-num{ background:#333 !important; color:#fff !important; }
}