/* ===== JB Modern Sans — Hidden Player + Mini Controls + Active Highlight ===== */
:root{
  --bg:#f7f7f8;
  --ink:#141518;
  --soft:#6f747c;
  --edge:#e8eaee;

  /* City accent */
  --trim:#c7a76b;                         /* gold left rule */
  --active-wash: rgba(31,183,166,0.06);   /* calm teal wash */

  --maxw:820px;
  --measure:66ch;

  /* Type */
  --fs-body: clamp(15px, 2.5vw, 17px);
  --lh-body: 1.66;
  --fs-h1: clamp(15px, 2.3vw, 16px);
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Hide the sticky player (audio stays in DOM) */
.player-shell{
  position:absolute; width:0; height:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.player-inner{ max-width:var(--maxw); margin:0 auto; padding:0 }

/* Layout */
.lesson{
  max-width:var(--maxw); margin:0 auto;
  padding:24px 16px calc(64px + env(safe-area-inset-bottom));
  font-size:var(--fs-body); line-height:var(--lh-body);
  max-width:var(--measure);
}

/* Paragraphs — cardless */
.para{
  position:relative; padding:14px 0; border-top:1px solid var(--edge);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
  scroll-margin-top: 16px; /* helps when we scrollIntoView */
}
.para:first-of-type{ border-top:0 }

/* Jump chip row */
.ts-row{ margin:2px 0 4px }

/* Glyph chip — Tier-based symbol */
.ts{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  border:1px solid #eceef2; background:#fff; cursor:pointer;
  color:var(--trim); opacity:.7;
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

/* Default symbol: ⋀ (your chosen Tier 1 glyph) */
.ts::before{ content:"⋀"; font-size:14px; line-height:1 }
/* Allow custom override via data-glyph attribute */
.ts[data-glyph]::before{ content: attr(data-glyph); }

.ts:hover{ opacity:1 }
.ts:active{ transform:scale(.96) }
.ts:focus-visible{ outline:2px solid rgba(199,167,107,.45); outline-offset:2px }

/* Body text — inline BiteSize (reads like a true paragraph) */
.text{ margin:0 }
.chunk{ display:inline }
.chunk.b strong{ font-weight:600; letter-spacing:0.1px }
.chunk.n{ opacity:.96 }
.chunk + .chunk{ margin-left:.35em }

/* Active paragraph — highlight + gold trim */
.para.active{
  background: var(--active-wash);
  border-left: 1.5px solid var(--trim);
  padding-left: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

@media (max-width:420px){
  .para.active{ background: rgba(31,183,166,0.055); }
}

/* Mini controls cluster (bottom-right thumb zone) */
.mini-controls{
  position:fixed; right:14px; bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:999; display:flex; gap:8px;
}
.mini-ctrl{
  width:36px; height:36px; border-radius:50%;
  background:#fff; border:1px solid #eceef2;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:#555; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
  opacity:.9;
}
.mini-ctrl:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.12); opacity:1 }

/* Play/Mute icons */
#mini-play::before{ content:"▶" }
#mini-play.is-playing::before{ content:"❚❚" }
#mini-mute::before{ content:"🔊" }
#mini-mute.is-muted::before{ content:"🔇" }

/* Hide any legacy back-to-top links */
.to-top{ display:none !important }