/* ---------- play-through: one button plays the whole case ---------- */
.play-reading{position:relative;transition:box-shadow .5s,background-color .5s;border-radius:4px;box-shadow:0 0 0 6px rgba(217,180,91,.22);background-color:rgba(217,180,91,.07)}
.hero-a .play-reading,.dark .play-reading{box-shadow:0 0 0 6px rgba(217,180,91,.28);background-color:rgba(217,180,91,.09)}
.transport{position:fixed;left:50%;transform:translateX(-50%);bottom:max(14px, env(safe-area-inset-bottom,0px));z-index:30;
  display:none;align-items:center;gap:10px;padding:9px 12px 9px 14px;max-width:calc(100vw - 32px);width:720px;
  background:var(--ink);color:#E6ECF0;border:1px solid #2A3B49;border-top:2px solid var(--brass);border-radius:6px;box-shadow:0 14px 34px rgba(0,0,0,.4);
  font-family:var(--sans);font-size:.84rem}
.transport.on{display:flex}
.transport button{font:inherit;font-weight:600;color:#E6ECF0;background:transparent;border:1px solid #2A3B49;border-radius:4px;padding:6px 10px;cursor:pointer;white-space:nowrap;line-height:1.1}
.transport button:hover{border-color:var(--brass)}
.transport .pp{background:var(--brass);color:#1C2B36;border-color:var(--brass);min-width:76px}
.transport .where{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.transport .where .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.transport .where .t b{color:var(--brass);font-weight:600;margin-right:6px}
.transport .prog{height:4px;background:#1E3243;border-radius:2px;overflow:hidden}
.transport .prog i{display:block;height:100%;width:0;background:var(--brass);transition:width .4s}
.transport .x{border-color:transparent;color:#A8B6C0;padding:6px 8px}
@media (max-width:560px){.transport{gap:6px;padding:8px 8px 8px 10px}.transport .nav{display:none}}
body.playing-through .scrollcue{visibility:hidden}


/* ---------- focus: a pane comes forward, larger, while its lines play ---------- */
body.play-focus::after{content:"";position:fixed;inset:0;background:rgba(10,20,28,.45);z-index:25;animation:focus-dim .5s}
@keyframes focus-dim{from{opacity:0}to{opacity:1}}
body.play-focus .guide,body.play-focus .chapbar,body.play-focus .scrollcue{opacity:0!important;pointer-events:none;transition:opacity .35s}
.focus-ph{visibility:hidden}
[data-focus].focused{box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(217,180,91,.35);border-radius:6px;background:var(--card,#fff);will-change:transform}
[data-focus="image"].focused{padding:14px 16px 12px}
[data-focus="text"].focused{padding:18px 22px}
.play-focus .play-reading{box-shadow:none}
[data-focus].focused .play-reading{background-color:transparent}
[data-focus].focused{background-color:var(--card,#fff)}
/* the courtroom opens out to two columns: the bench on the left, the brief and the captions on the right */
.court[data-focus].focused{background:#0A141C}
.court[data-focus].focused.wide{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"hdr hdr" "bench desk" "bench caption" "bench ctl" "bench fine";gap:0 20px;align-content:start;min-height:0;padding:20px 22px 18px}
.court.focused .verdict:not(.on){visibility:hidden}
.court.focused.wide > .hdr{grid-area:hdr}
.court.focused.wide > .bench{grid-area:bench;align-content:start}
.court.focused.wide > .desk{grid-area:desk;margin-top:0}
.court.focused.wide > .caption{grid-area:caption;font-size:1rem;line-height:1.5}
.court.focused.wide > .ctl{grid-area:ctl}
.court.focused.wide > .fine,.court.focused.wide > p{grid-area:fine}
.court.focused .seat .say{font-size:.95rem}
.court.focused .desk .doc{font-size:.98rem}
.court.focused.wide .verdict{left:calc(50% + 10px)}
@media (max-width:899px){body.play-focus::after{display:none}}

/* ---------- Preview Tour (25 Oct): the Preview/Full toggle in the bar, and the end-of-page card ---------- */
.transport .path{display:inline-flex;border:1px solid #2A3B49;border-radius:4px;overflow:hidden}
.transport .path button{border:0;border-radius:0;padding:6px 9px;color:#A8B6C0;font-weight:600}
.transport .path button+button{border-left:1px solid #2A3B49}
.transport .path button.on{background:#1E3243;color:var(--brass)}
.transport .path button:hover{color:#E6ECF0}
.playcard{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(max(14px, env(safe-area-inset-bottom,0px)) + 66px);z-index:31;
  display:none;flex-direction:column;gap:10px;padding:12px 16px 12px;max-width:calc(100vw - 32px);width:720px;box-sizing:border-box;
  background:var(--ink);color:#E6ECF0;border:1px solid #2A3B49;border-left:3px solid var(--brass);border-radius:6px;box-shadow:0 14px 34px rgba(0,0,0,.4);
  font-family:var(--sans);font-size:.86rem;line-height:1.45;animation:focus-dim .35s}
.playcard.on{display:flex}
.playcard .pc-body b{color:var(--brass);font-weight:600;margin-right:4px}
.playcard .pc-ctl{display:flex;gap:8px;flex-wrap:wrap}
.playcard .pc-ctl button{font:inherit;font-size:.84rem;font-weight:600;color:#E6ECF0;background:transparent;border:1px solid #2A3B49;border-radius:4px;padding:6px 10px;cursor:pointer;line-height:1.1}
.playcard .pc-ctl button:hover{border-color:var(--brass)}
.playcard .pc-ctl .pc-page,.playcard .pc-ctl .pc-full{background:var(--brass);color:#1C2B36;border-color:var(--brass)}
@media (max-width:560px){.transport .path{display:none}.playcard{font-size:.8rem;bottom:calc(max(14px, env(safe-area-inset-bottom,0px)) + 60px)}}