/* The listener uses the actual app stylesheet; only demo framing is added. */
.wrap{padding:0 16px;max-width:none}
header{padding-top:23px;padding-bottom:20px;gap:9px}
.wordmark .wm-porva,.wordmark .wm-church{font-size:20px}
.header-actions{gap:5px}.theme-toggle{width:28px;height:32px}.theme-toggle svg{display:block!important;width:19px;height:19px}
.lang-chip{display:flex;font-size:12px;min-height:37px;padding:7px 9px}
.status-pill{margin-top:0}
.stage{min-height:0;flex:1}
.cap-shell{padding-top:10px;overflow:hidden}
.captions{position:absolute;inset:14px 8px 10px;padding:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;opacity:1!important}
.cap-line{font-size:calc(30px * var(--demo-text-scale,1));line-height:1.4;letter-spacing:-.02em;flex-shrink:0;margin:0;color:var(--paper);opacity:1;transition:color .35s,opacity .35s;overflow-wrap:anywhere}
.cap-line.past{color:var(--muted);opacity:.65;font-size:calc(25px * var(--demo-text-scale,1))}
.captions[dir=rtl] .cap-line{font-family:Arial,sans-serif;letter-spacing:0;line-height:1.65}
.empty-greeting{position:absolute;inset:10px;transform:none;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.empty-greeting[hidden]{display:none}.empty-greeting .hero{font-size:34px}.empty-greeting .quiet{font-size:14px;line-height:1.6;max-width:260px;margin-top:13px}
.bottom-zone{padding-top:12px}.replay-footer{display:flex;align-items:center;justify-content:center;gap:8px;border-top:1px solid var(--line);padding:14px 0 2px;font-size:11px;color:var(--muted)}.replay-footer svg{width:17px;height:17px}.app-version{font-size:9px;padding-bottom:13px}
.screen-language-menu{position:absolute;top:75px;right:16px;z-index:20;background:var(--ink-focus);border:1px solid var(--line);padding:6px;box-shadow:0 8px 25px #0002;min-width:160px}.screen-language-menu[hidden]{display:none}.screen-language-menu button{display:block;width:100%;padding:11px;text-align:start;border:0;background:transparent;color:var(--paper);font:inherit;font-size:14px}.screen-language-menu button[aria-pressed=true]{background:var(--panel-strong);color:var(--gold-deep)}
button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.captions[dir=rtl] .cap-line{padding-left:0;padding-right:20px}.captions[dir=rtl] .cap-line::before{left:auto;right:0}
@media(max-height:480px){header{padding-top:15px;padding-bottom:14px}.status-pill{padding-bottom:10px;margin-bottom:7px}.bottom-zone{padding-top:7px}.replay-footer{padding:8px 0 0;font-size:10px}.app-version{padding-bottom:8px}.cap-line{font-size:calc(27px * var(--demo-text-scale,1))}.cap-line.past{font-size:calc(22px * var(--demo-text-scale,1))}.captions{gap:13px}.empty-greeting .hero{font-size:28px}.empty-greeting .quiet{font-size:13px}}
/* Keep the newest caption fully readable at the bottom of the demo screen. */
.cap-shell::before{height:28px}.cap-shell::after{display:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* A sample church identity demonstrates custom listener branding. */
.brand{gap:7px}.riverdale-logo{width:28px;height:28px;max-width:28px;flex:none}.wordmark .wm-porva,.wordmark .wm-church{font-size:17px;letter-spacing:-.5px}.wordmark .wm-church{font-size:13px}