/* Narrated walk ("Listen while it walks"): the entry buttons, the story bar and the
   transcript panel. Uses the page's own tokens (--card, --primary, ...) so both themes work. */
#narrBtn{display:inline-flex;align-items:center;gap:6px}
#narrBtn svg,#hintListen svg{width:13px;height:13px;display:block;flex:none}
#narrBtn.pulse{animation:narrPulse 1.6s ease-in-out 3}
@keyframes narrPulse{50%{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 30%, transparent)}}
@media (max-width:640px){
  #narrBtn{width:36px;height:36px;padding:0;justify-content:center}
  #narrBtn .lbl{display:none}
}
/* the Listen button needs the room on small Android phones; iPhones never show full screen */
@media (max-width:400px){ html.has-narr #fsToggle{display:none !important} }
#hintListen{margin-top:14px;display:inline-flex;align-items:center;gap:8px;pointer-events:auto}

#narr{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:28;
  width:min(580px,calc(100vw - 24px));display:none;align-items:center;gap:8px;
  background:var(--card);border:1px solid var(--card-border);border-radius:12px;
  box-shadow:var(--shadow);padding:7px 8px 7px 7px;font-size:12px;color:var(--fg);
}
#narr.on{display:flex}
html.narr-on #progress{opacity:0;visibility:hidden}
/* cards open during the story: keep the bar and transcript above the card's backdrop,
   and lift the card clear of the bar */
#narr,#narrScript{z-index:55 !important}
html.narr-on #boxwrap{padding-bottom:84px}
#narr button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
#narr button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
#narrPlay{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--primary) !important;color:var(--primary-fg) !important}
#narrPlay svg{width:15px;height:15px}
#narrTrack{position:relative;flex:1;min-width:60px;height:30px;cursor:pointer}
#narrTrack .rail,#narrTrack .fill{position:absolute;left:0;top:14px;height:3px;border-radius:3px}
#narrTrack .rail{right:0;background:color-mix(in srgb,var(--fg) 14%, transparent)}
#narrTrack .fill{width:0;background:var(--primary)}
#narr .tick{position:absolute;top:9px;width:13px;height:13px;margin-left:-6.5px;padding:0;border-radius:50%;
  background:var(--card) !important;border:2px solid color-mix(in srgb,var(--fg) 30%, transparent) !important}
#narr .tick.done{border-color:var(--primary) !important}
#narr .tick:hover{transform:scale(1.15)}
#narrTime{flex:none;display:flex;gap:8px;align-items:baseline;white-space:nowrap}
#narrTime .place{font-weight:600}
#narrTime .clock{color:var(--muted-fg);font-variant-numeric:tabular-nums}
#narrFollow{display:none;flex:none;padding:6px 10px !important;border-radius:8px;
  border:1px solid var(--primary) !important;color:var(--primary) !important;font-weight:600 !important}
#narr.lost #narrFollow{display:inline-block}
#narrText,#narrClose{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:8px;color:var(--muted-fg) !important}
#narrText:hover,#narrClose:hover,#narrText[aria-expanded="true"]{color:var(--fg) !important;background:var(--secondary) !important}
#narrText svg,#narrClose svg{width:15px;height:15px}
@media (max-width:640px){
  #narrTime .place{display:none}
  #narr.lost #narrTime{display:none}
}

#narrScript{
  position:fixed;left:50%;bottom:70px;transform:translateX(-50%);z-index:28;
  width:min(580px,calc(100vw - 24px));max-height:min(44vh,360px);overflow:auto;display:none;
  background:var(--card);border:1px solid var(--card-border);border-radius:12px;box-shadow:var(--shadow);
  padding:14px 16px;font-size:14px;line-height:1.55;overscroll-behavior:contain;
}
#narrScript.on{display:block}
#narrScript .ai{font-size:11px;letter-spacing:.03em;color:var(--muted-fg);margin-bottom:10px}
#narrScript p{margin:0 0 9px;color:var(--muted-fg);cursor:pointer}
#narrScript p:hover{color:var(--fg)}
#narrScript p.cur{color:var(--fg)}

/* the seven pillars while the hosts list them (his ask, 15 Oct): the bar grows a little, the
   pillar being named gets a ring and its name shows above it; the icons keep their colour */
html.has-narr #pillars{transition:opacity .5s ease,transform .4s ease,box-shadow .4s ease,bottom .3s ease}
/* while the player bar is open the pillars sit above it, not under it (his note, 15 Oct: "Life pillar on
   mobile overlap"): the bar is 54px tall at bottom 14px, so its top is at 68px */
html.narr-on #pillars{bottom:76px}
html.narr-pillars #pillars{transform:scale(1.25);transform-origin:left bottom;box-shadow:0 0 0 2px var(--primary),var(--shadow)}
.pill.narr-lit{outline:2px solid var(--primary);outline-offset:4px;border-radius:6px}
@media (prefers-reduced-motion:reduce){html.has-narr #pillars{transition:none}}