/* Full-width pinned controls shared by the SVG reader and SPF lessons. */
.playback-sentinel{height:1px;flex:none;pointer-events:none}.reader-playback{position:sticky;top:0;z-index:10;flex:none;min-width:0;margin-inline:20px;padding:12px 0;background:#fff;color:#193653;border:0;border-top:2px solid transparent;border-bottom:1px solid #d6dfed;border-radius:0;transition:margin-inline .28s ease,padding-inline .28s ease,background-color .28s ease,border-color .28s ease,box-shadow .28s ease}.reader-playback[data-pinned=true]{margin-inline:0;padding-inline:20px;background:#f6f8fd;border-top-color:#245bce;border-bottom-color:#c9d5e8;box-shadow:0 5px 12px #19365312}.reader-playback .transport,#focusScene .reader-playback .transport{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0;min-height:44px;border:0;background:transparent;box-shadow:none}.reader-playback .transport>[hidden]{display:none!important}.reader-playback button,.reader-playback .transport button{min-height:44px;border:1px solid #c6d3e5;border-radius:6px;background:#fff;color:#193653;padding:8px 12px}.reader-playback #exploreSteps,.reader-playback #nextStep,.reader-playback [data-spf=next],.reader-playback [data-lab=next]{background:#245bce;color:#fff;border-color:#245bce}.reader-playback button:hover:not(:disabled){filter:brightness(.96)}.reader-playback button:disabled{opacity:.4}.reader-playback :focus-visible{outline:3px solid #245bce;outline-offset:3px}.reader-playback .step-track{flex:1;min-width:100px}.reader-playback .step-track button{padding:8px 0;border:0;background:transparent;min-width:0}.reader-playback .step-caption,#focusScene .reader-playback .step-caption{margin:10px 0 0;padding:0;min-height:0;color:#193653;gap:10px}.reader-playback .step-caption strong{font:650 14px/1.4 system-ui}.reader-playback .step-caption p{font:13px/1.5 system-ui;margin:5px 0 0;color:inherit}.reader-playback #stepIndex{color:#526882}.spf-paper>.reader-playback,.spf-paper>.playback-sentinel{display:none!important}
.spf-lesson{--playback-gutter:24px}.lesson-playback{margin-inline:0;padding:16px 18px}.lesson-playback[data-pinned=true]{margin-inline:calc(-1 * var(--playback-gutter));padding-inline:calc(18px + var(--playback-gutter))}.lesson-playback .spf-controls{gap:6px;flex-wrap:nowrap}.lesson-playback .spf-controls button{flex:1;font:600 13px/1.2 system-ui;white-space:nowrap}.lesson-playback .spf-caption{padding:0;margin:12px 0 0;min-height:0;color:#193653}.lesson-playback .spf-caption strong{font:650 15px/1.4 system-ui}.lesson-playback .spf-caption p{font:13px/1.55 system-ui;margin:5px 0 0;color:inherit}.reader-playback .vrfc-term:hover{background:#245bce14!important}
@media(max-width:1100px){.spf-lesson{--playback-gutter:16px}.lesson-playback{padding:14px}.lesson-playback[data-pinned=true]{padding-inline:calc(14px + var(--playback-gutter))}}
@media(max-width:600px){.reader-playback:not(.lesson-playback){margin-inline:14px;padding:10px 0}.reader-playback:not(.lesson-playback)[data-pinned=true]{margin-inline:0;padding-inline:14px}.reader-playback .transport #exploreSteps{flex:1}.reader-playback .transport #time{margin-left:auto}.reader-playback .transport .step-track{order:5;flex-basis:100%}.lesson-playback .spf-controls{display:grid;grid-template-columns:1fr 1fr}.lesson-playback .spf-controls button{padding:8px}}
@media(prefers-reduced-motion:reduce){.reader-playback,.reader-playback *{transition:none!important}}
.reader-playback[hidden],.reader-playback .transport[hidden]{display:none!important}
.reader-playback .transport #previousStep,.reader-playback .transport #restart{width:44px;height:44px;flex:0 0 44px}
.reader-playback .transport #previousStep{order:0}.reader-playback .transport #play{order:1;width:44px;min-width:44px}.reader-playback .transport #nextStep{order:2;width:44px;flex:0 0 44px}.reader-playback .transport #restart{order:3}.reader-playback .transport #exploreSteps{order:4}.reader-playback .transport #stepTrack{order:5}.reader-playback .transport #time{order:6}
/* Override legacy ID-based transport sizing so labels never collapse. */
.reader-playback .transport #exploreSteps{flex:0 0 auto;width:auto;min-width:max-content;margin-left:auto}.reader-playback .transport #stepTrack{flex:1 1 160px;min-width:120px}
@media(max-width:1100px){.reader-playback .transport,#focusScene .reader-playback .transport{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px}.reader-playback .transport #play{grid-column:1;grid-row:1;width:44px;height:44px}.reader-playback .transport #exploreSteps{grid-column:2;grid-row:1;min-width:0;width:100%;margin:0;white-space:normal;line-height:1.25}.reader-playback .transport #exploreSteps[aria-expanded=false]{grid-column:2/-1}.reader-playback .transport:has(#play[hidden]) #exploreSteps{grid-column:1/3}.reader-playback .transport:has(#play[hidden]) #exploreSteps[aria-expanded=false]{grid-column:1/-1}.reader-playback .transport #nextStep{grid-column:3;grid-row:1;width:44px}.reader-playback .transport #stepTrack{grid-column:1/3;grid-row:2;order:7;min-width:0;width:100%;flex-basis:auto}.reader-playback .transport #time{grid-column:3;grid-row:2;order:6;margin:0;text-align:center}.reader-playback .transport #stepTrack button{min-height:32px;height:32px}}
@media(max-width:1100px){.reader-playback .transport[data-exploring=true],#focusScene .reader-playback .transport[data-exploring=true]{grid-template-columns:repeat(4,minmax(0,1fr))}.reader-playback .transport[data-exploring=true] #previousStep{grid-column:1;grid-row:1;width:100%}.reader-playback .transport[data-exploring=true] #play{grid-column:2;grid-row:1;width:100%}.reader-playback .transport[data-exploring=true] #nextStep{grid-column:3;grid-row:1;width:100%}.reader-playback .transport[data-exploring=true] #restart{grid-column:4;grid-row:1;width:100%}.reader-playback .transport[data-exploring=true] #exploreSteps{grid-column:1/-1;grid-row:2}.reader-playback .transport[data-exploring=true] #stepTrack{grid-column:1/4;grid-row:3}.reader-playback .transport[data-exploring=true] #time{grid-column:4;grid-row:3}}