/* 20261111tp3 PREVIEW (Jon t2187u t2188u t2189u). Loaded after style.css.
   1) Left panel: Language / Narrator / Version.  2) Footer: Restart + one Play/Pause (no Autoplay).
   3) Soft line-fade read-along.  4) Battle-type card label + timeline clock. */

/* 1 — Narrator row (same grid as Language / Version) */
#layers .narr-pick{display:grid;grid-template-columns:68px 1fr;align-items:center;gap:4px 8px;margin:0 0 8px}
#layers .narr-pick .sel-lab{color:var(--muted);font-size:11.5px}
.narr-chips{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.narr-chips:empty{display:none}
.narr-chip{font:inherit;font-size:12.5px;line-height:1.2;padding:4px 11px;border-radius:999px;cursor:pointer;
  color:var(--text);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
.narr-chip:hover{background:rgba(255,255,255,.11)}
.narr-chip.on{background:rgba(62,199,184,.22);border-color:rgba(62,199,184,.62);font-weight:600}
.narr-chip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
body.theme-light .narr-chip{background:#fffdf6;border-color:rgba(30,45,90,.22);color:var(--text)}
body.theme-light .narr-chip.on{background:rgba(20,150,138,.16);border-color:rgba(20,150,138,.6)}
#layers .narr-pick .narr-note{grid-column:1 / -1;margin:0;line-height:1.35}
#layers .narr-pick .narr-chips:empty + .tour-voice + .narr-note,#layers .narr-pick .narr-note{grid-column:2 / -1}
#layers .version-note{margin:-4px 0 8px 76px;line-height:1.35}
#layers .narr-pick .tour-voice,#layers .narr-pick .tour-voice[hidden]{display:none !important} /* the chips are the control; the select stays as the hidden source of truth */

/* 2 — Footer playback: [← Back]  [⟲ Restart][▶ Play]  [Next →] */
.tour-ctl .tour-play-group{gap:6px}
.tour-ctl .tour-play-group .tour-narr-restart,
.tour-ctl .tour-play-group .tour-narr-play{min-height:32px;padding:5px 12px;white-space:nowrap}
.tour-ctl .tour-play-group .tour-narr-play{min-width:92px;font-weight:600}
.tour-ctl .tour-play-group .tour-narr-play.is-playing,
.tour-ctl .tour-play-group .tour-narr-play[aria-pressed="true"]{background:rgba(62,199,184,.22);border-color:rgba(62,199,184,.55)}
body.theme-light .tour-ctl .tour-play-group .tour-narr-play[aria-pressed="true"]{background:rgba(20,150,138,.16);border-color:rgba(20,150,138,.55)}
.tour-src-narr-tools{justify-content:flex-start}
body.owh-m .tour-ctl .tour-play-group .tour-narr-restart{min-height:44px;padding:6px 4px;font-size:12px}
body.owh-m .tour-ctl .tour-play-group .tour-narr-play{min-height:44px;padding:6px 4px;font-size:12px;min-width:0}

/* 3 — Soft read-along: no highlight box; read text fades toward the card background (opacity set per word by app.js). */
#tour-text .rl-w{padding:0;border-radius:0;transition:opacity .18s linear}
#tour-text .rl-w.rl-now{background:none;box-shadow:none;color:inherit}
body.theme-light #tour-text .rl-w.rl-now{background:none;box-shadow:none;color:inherit}
@media (prefers-reduced-motion: reduce){ #tour-text .rl-w{transition:none} }

/* 4 — Battle-type card label */
.tour-battle-type{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:2px 0 3px}
.tour-battle-type[hidden]{display:none}
.tour-battle-type .btype-pill{display:inline-flex;align-items:center;gap:4px;font:700 11px/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;color:#1a1408;background:var(--accent)}
.tour-battle-type .btype-why{font-size:11.5px;color:var(--muted)}
.tour-battle-type .btype-why summary{cursor:pointer;list-style:none}
.tour-battle-type .btype-why summary::-webkit-details-marker{display:none}
.tour-battle-type .btype-why summary::after{content:" ⓘ"}
.tour-battle-type .btype-why[open]{flex-basis:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:6px 8px}
.tour-battle-type .btype-why p{margin:4px 0}
.tour-battle-type .btype-why ul{margin:2px 0 0 16px;padding:0}
body.theme-light .tour-battle-type .btype-why[open]{background:rgba(30,45,90,.03);border-color:rgba(30,45,90,.18)}

/* 4b — Timeline clock: a playhead that moves through the battle's dates while the card is narrated */
#tl-clock{position:absolute;top:-2px;left:0;width:0;height:30px;pointer-events:none;z-index:4}
#tl-clock[hidden]{display:none}
#tl-clock .tlc-line{position:absolute;left:-1.5px;top:0;width:3px;height:22px;border-radius:2px;background:#3ec7b8;box-shadow:0 0 0 1px rgba(8,16,32,.7),0 0 8px rgba(62,199,184,.75)}
#tl-clock .tlc-lab{position:absolute;left:0;top:23px;transform:translateX(-50%);white-space:nowrap;font:700 10.5px/1.2 var(--font);
  padding:1px 7px;border-radius:999px;color:#06201d;background:#3ec7b8;box-shadow:0 1px 2px rgba(0,0,0,.35)}
body.theme-light #tl-clock .tlc-line{background:#14968a}
body.theme-light #tl-clock .tlc-lab{background:#14968a;color:#fff}
body.owh-m #tl-clock .tlc-lab{font-size:9.5px;padding:1px 5px}
/* while the clock runs, the 1914 year thumb steps back so the playhead reads as the clock */
body.battle-clock-on #slider::-webkit-slider-thumb{opacity:.25}
body.battle-clock-on #slider::-moz-range-thumb{opacity:.25}
/* 20261111tp3: phone footer is Back · ⟲ · Play · Next on one row (Autoplay is gone, so four controls, Restart narrower) */
body.owh-m .tour-ctl .tour-nav{grid-template-columns:minmax(0,1fr) minmax(0,.62fr) minmax(0,1.1fr) minmax(0,1fr) !important}

/* 20261111tp4 (Jon t2194u) — the battle clock can be grabbed and dragged both ways inside the bracket; one Play/Pause sits just
   above the bracket's "N days" label. No Restart on the timeline (the footer narration Play is unchanged). */
#tl-clock{pointer-events:auto;cursor:ew-resize;touch-action:none;outline:none}
#tl-clock .tlc-hit{position:absolute;left:-11px;top:-6px;width:22px;height:46px;background:transparent}
#tl-clock .tlc-line{width:4px;left:-2px}
#tl-clock .tlc-line::after{content:"";position:absolute;left:50%;top:-5px;width:12px;height:12px;margin-left:-6px;border-radius:50%;
  background:inherit;box-shadow:0 0 0 1.5px rgba(8,16,32,.8),0 0 8px rgba(62,199,184,.8)}
#tl-clock:focus-visible .tlc-line::after{box-shadow:0 0 0 2px #fff,0 0 0 4px #3ec7b8}
body.tl-clock-drag, body.tl-clock-drag *{cursor:ew-resize !important;user-select:none}
body.battle-clock-on #tl-bracket .tl-br-rail{pointer-events:auto;cursor:pointer;touch-action:none}
#tl-clock-play{position:absolute;left:50%;top:-17px;transform:translate(-50%,-100%);pointer-events:auto;z-index:6;
  width:24px;height:24px;padding:0;border-radius:50%;border:1.5px solid #1a1408;background:var(--accent,#ffb547);color:#1a1408;
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.45)}
#tl-clock-play[hidden]{display:none}
#tl-clock-play svg{width:11px;height:11px;fill:currentColor;display:block}
#tl-clock-play[data-state="play"] svg{margin-left:2px}
#tl-clock-play:hover{filter:brightness(1.08)}
#tl-clock-play:focus-visible{outline:2px solid #fff;outline-offset:2px}
body.owh-m #tl-clock-play{width:26px;height:26px;top:-15px}
body.touring #hover-tip{white-space:normal;max-width:380px}
body.battle-clock-on #tl-bracket{z-index:5}