/* The Federation — canonical narration player.
   Class prefix is .narr-* so it cannot collide with the twelve older
   .narrator-* blocks still inlined in the pages. Palette vars are read with
   fallbacks because the series has shipped both --accent and --red. */

.narr{
  --n-bg:     var(--panel, #e9e1d1);
  --n-page:   var(--bg, #f2ece0);
  --n-ink:    var(--ink, #1a1712);
  --n-dim:    var(--dim, #5b544a);
  --n-faint:  var(--faint, #6f6759);
  --n-rule:   var(--rule, #d6cdba);
  --n-accent: var(--accent, var(--red, #b3261e));
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  font-family: var(--mono, ui-monospace, Menlo, monospace);
}
.narr[hidden]{display:none}

/* ---- collapsed pill: also the pause control while playing ---------------- */
.narr-pill{
  position:absolute; right:1rem; bottom:1rem;
  display:flex; align-items:center; gap:.55rem;
  background:var(--n-bg); border:1px solid var(--n-rule); color:var(--n-ink);
  font-family:inherit; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.75rem 1rem; cursor:pointer; transition:border-color .2s, color .2s;
  box-shadow:0 2px 14px rgba(60,50,35,.14);
  min-height:44px;
}
.narr-pill:hover{border-color:var(--n-accent)}
.narr-pill .ico{color:var(--n-accent); display:flex}
.narr-pill .meta{color:var(--n-faint)}
.narr[data-playing="1"] .narr-pill{border-color:var(--n-accent)}
.narr[data-state="open"] .narr-pill{display:none}

/* ---- expanded bar -------------------------------------------------------- */
.narr-bar{display:none; background:var(--n-bg); border-top:1px solid var(--n-rule);
  box-shadow:0 -10px 34px rgba(60,50,35,.13)}
.narr[data-state="open"] .narr-bar{display:block}

.narr-track{position:relative; height:6px; background:var(--n-rule); cursor:pointer}
.narr-fill{position:absolute; inset:0 auto 0 0; width:0; background:var(--n-accent); transition:width .2s linear}
.narr-mark{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:11px; height:11px; border-radius:50%;
  background:var(--n-page); border:1px solid var(--n-dim);
  padding:0; cursor:pointer; transition:.15s;
}
.narr-mark:hover{border-color:var(--n-accent); transform:translate(-50%,-50%) scale(1.25)}
.narr-mark.done{background:var(--n-accent); border-color:var(--n-accent)}
.narr-mark.here{background:var(--n-page); border-color:var(--n-accent); border-width:3px;
  width:15px; height:15px}

.narr-controls{
  max-width:760px; margin:0 auto; padding:.8rem 1.5rem;
  display:flex; align-items:center; gap:.85rem;
}
.narr-play{
  flex:none; width:44px; height:44px; border-radius:50%; border:0;
  background:var(--n-accent); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.narr-play:hover{background:#7f1d1d}
.narr-play:focus-visible{outline:2px solid var(--n-ink); outline-offset:2px}

.narr-meta{flex:1; min-width:0}
.narr-label{font-size:.84rem; letter-spacing:.04em; color:var(--n-ink); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0}
.narr-sub{font-size:.64rem; letter-spacing:.06em; color:var(--n-faint); margin:.25rem 0 0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums}

.narr-btn{
  flex:none; background:var(--n-page); border:1px solid var(--n-rule); color:var(--n-dim);
  font-family:inherit; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.5rem .6rem; cursor:pointer; transition:.2s; min-height:34px; white-space:nowrap;
}
.narr-btn:hover{border-color:var(--n-accent); color:var(--n-accent)}

/* Follow is a visible, re-armable state. The old player killed auto-scroll
   silently and permanently on the first touch; here it always says which it is
   and is one tap from being back on. */
.narr-follow{display:flex; align-items:center; gap:.4rem}
.narr-follow::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--n-faint); flex:none; transition:.2s;
}
.narr-follow[data-on="1"]{border-color:var(--n-accent); color:var(--n-accent); background:var(--n-page)}
.narr-follow[data-on="1"]::before{background:var(--n-accent); box-shadow:0 0 0 3px rgba(179,38,30,.18)}
.narr-follow[data-on="0"]{border-style:dashed}

.narr-rate{font-variant-numeric:tabular-nums; min-width:44px}
.narr-close{border-color:transparent; background:none}
.narr-close:hover{border-color:var(--n-accent)}

@media(max-width:720px){
  .narr-controls{flex-wrap:wrap; padding:.7rem 1rem; gap:.6rem}
  .narr-meta{order:2; flex-basis:100%; min-width:0}
  .narr-play{order:1}
  .narr-follow{order:1; margin-left:auto}
  .narr-rate{order:1}
  .narr-close{order:1}
  .narr-pill{right:.75rem; bottom:.75rem; padding:.7rem .85rem; font-size:.66rem}
  .narr-label{white-space:normal; overflow:visible; line-height:1.3}
}
@media(max-width:355px){
  .narr-follow span{display:none}
  .narr-follow{padding:.5rem .55rem}
}
@media(prefers-reduced-motion:reduce){
  .narr-fill,.narr-mark,.narr-btn,.narr-play{transition:none}
}