:root{--dock-height:440px}body{background:#f6f7f2;min-height:100dvh}.app-header{position:sticky;top:0;z-index:5;height:64px;padding:0 max(20px,calc((100vw - 1000px)/2));background:#fdfef9ee;backdrop-filter:blur(12px)}.brand{font-size:19px;gap:10px}.logo{width:35px;height:35px;font-size:31px;border-radius:10px}.header-actions{display:flex;align-items:center;gap:12px}.header-actions small{font-size:9px;color:#8c9986}.header-actions button{font-size:12px;border-radius:20px}main.app-content{max-width:1000px;padding:22px 24px calc(var(--dock-height) + 24px)}.app-content .reader{padding:0}.empty{min-height:calc(100dvh - 140px);height:auto}.empty h2{font-family:inherit;font-size:24px}.empty-icon{width:65px;height:65px;font-size:31px;margin-bottom:14px}.session-header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}.session-header h2{font-size:20px;line-height:1.5;margin:7px 0}.session-header .eyebrow{font-size:8px}.session-header .muted{font-size:10px;overflow-wrap:anywhere}.session-header button{font-size:10px;padding:8px 11px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}.panel-heading h2{font-size:19px}.panel-heading h3{font-size:15px}.panel-heading button{padding:7px 10px;font-size:12px}.listening-dock{position:fixed;bottom:0;left:0;right:0;z-index:10;display:block;padding:0;background:#fbfcf8f5;border-top:1px solid #dce4d4;box-shadow:0 -8px 35px #153e350c;backdrop-filter:blur(16px);color:#213b34;font-size:14px}.dock-inner{max-width:1000px;margin:auto;padding:10px 24px max(10px,env(safe-area-inset-bottom))}.listening-stage{gap:6px;max-height:45dvh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.context-card{border:0;background:transparent;border-radius:0;min-height:0;padding:2px 14px}.context-heading{font-size:8px;color:#8b9a81;letter-spacing:1px;line-height:1.5}.context-heading small{font-size:8px}.context-text{font-size:12px;color:#6d7e6c;line-height:1.55;margin:3px 0 0;max-height:48px;overflow:auto}.context-empty{visibility:hidden;min-height:25px}.context-ipa{display:none!important}.current-card{padding:14px 18px;border-radius:15px;min-height:100px;box-shadow:none}.current-heading{margin-bottom:8px;font-size:8px}.current-card .subtitle{font-size:clamp(19px,2.2vw,24px);line-height:1.6}.current-card .main-ipa{margin-top:10px;padding-top:9px;font-size:17px;line-height:1.6}.current-footnote{display:none}.listening-dock .audio-panel{position:static;padding:7px 0 0;margin:6px 0 0;background:transparent;border:0;border-radius:0;box-shadow:none}.listening-dock audio{width:100%;height:38px;margin:0}.listening-dock .settings{gap:8px;margin:5px 0}.listening-dock .settings button{min-height:33px;border-radius:18px;background:#f4f7ed;border-color:#e1e7d8}.listening-dock .settings .speed-selected{background:#173e35;color:#fff}.listening-dock .settings .speed-controls button{font-size:11px;padding:7px 13px;min-height:33px}.dock-toolbar{display:flex;align-items:center;gap:7px;border-top:1px solid #e6eadd;padding-top:6px}.dock-toolbar button{font-size:10px;padding:6px 11px;border-radius:8px;background:transparent;border-color:transparent;min-height:30px;color:#5c745d}.dock-toolbar button:hover,.dock-toolbar button[aria-expanded=true]{background:#eaf0e1}.dock-toolbar button:last-child{margin-left:auto}.dock-toolbar #abQuick.loop-on{background:#173e35;color:#fff}.listening-dock.dock-collapsed .context-card{display:none}.listening-dock.dock-collapsed .current-card{min-height:0;padding:10px 15px}.listening-dock.dock-collapsed .current-heading{display:none}.listening-dock.dock-collapsed .current-card .subtitle{font-size:18px}.listening-dock.dock-collapsed .current-card .main-ipa{font-size:15px;margin-top:7px;padding-top:7px}#sentencePanel{border:1px solid #e0e6d8;border-radius:16px;background:#fff;padding:16px}.caption-toolbar{margin:0;padding:0;border:0}.range{margin:12px 0}.selection-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 0 0}.selection-actions span{font-size:11px;color:#728267;margin-right:auto}.selection-actions button{font-size:11px;padding:8px 12px}.cues{max-height:max(140px,calc(100dvh - var(--dock-height) - 270px));overflow:auto;border-color:#edf0e6}.library-dialog{max-width:440px;padding:22px}.library-dialog>.section-head h2{font-size:14px}.library-dialog>.section-head{margin-top:18px}.library-dialog .search{margin:15px 0}.library-dialog #library{max-height:40dvh;min-height:100px}.storage{font-size:11px}.storage summary{font-weight:600;cursor:pointer}.storage p{font-size:11px}.storage button{font-size:11px}#settingsDialog .display-options{display:block;padding-top:18px}#settingsDialog .ipa-option{margin-bottom:18px}#settingsDialog .ipa-help{font-size:11px}#settingsDialog .offset-option{border-top:1px solid #e5e9df;padding-top:15px;font-size:12px}dialog{z-index:30;max-height:85dvh;overflow:auto;overscroll-behavior:contain}#toast{top:75px;bottom:auto;z-index:50}.word-current{color:#18382e!important}body:has(#listeningDock[hidden]) .app-content{padding-bottom:24px}@media(max-width:650px){header.app-header{height:58px;padding:0 14px}.brand{font-size:17px}.header-actions{gap:8px}.header-actions button{font-size:11px;padding:8px 12px}main.app-content{padding:16px 14px calc(var(--dock-height) + 18px)}.session-header{gap:8px}.session-header h2{font-size:16px}.session-header .inline{gap:4px}.session-header button{font-size:9px;padding:7px}.session-header .muted{font-size:9px}.dock-inner{padding:8px 12px max(8px,env(safe-area-inset-bottom))}.listening-stage{max-height:43dvh;gap:5px}.context-card{padding:1px 10px}.context-heading{font-size:7px}.context-text{font-size:11px;max-height:34px}.current-card{padding:12px 15px;min-height:100px}.current-card .subtitle{font-size:20px}.current-card .main-ipa{font-size:16px}.listening-dock .settings{gap:5px;flex-wrap:wrap}.listening-dock .speed-controls{width:auto;flex:1;gap:5px}.listening-dock .speed-controls>span{font-size:9px}.listening-dock .settings .speed-controls button{font-size:10px;padding:7px 9px}.listening-dock .settings>button{font-size:9px;padding:7px}.dock-toolbar{gap:1px}.dock-toolbar button{font-size:9px;padding:6px 7px}.listening-dock audio{height:36px}.context-empty{min-height:20px}#sentencePanel{padding:12px}.cues{max-height:max(130px,calc(100dvh - var(--dock-height) - 250px))}#toast{top:65px}.listening-dock.dock-collapsed .current-card .subtitle{font-size:17px}.listening-dock.dock-collapsed .current-card .main-ipa{font-size:14px}}
:root .listening-dock span{font-size:inherit}.listening-dock .listening-stage{max-height:min(45dvh,calc(100dvh - 210px))}.listening-dock .current-card .subtitle,.listening-dock .main-ipa{overflow-wrap:anywhere}
#previousCard{display:none}.current-card .subtitle{font-size:clamp(18px,2vw,22px)}.current-card .main-ipa{letter-spacing:.035em;word-spacing:.14em}
.listening-dock.dock-collapsed .audio-panel .settings{display:none}
.practice-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 0}.practice-actions button{font-size:11px;padding:7px 10px;min-height:32px;border-radius:9px}.practice-actions #practiceStatus{font-size:11px;color:#526b52}.practice-options{padding:12px 0;border-top:1px solid #e5e9df}.practice-options label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}.practice-options select{max-width:190px;font-size:12px}.practice-options .muted{line-height:1.7}
@media(max-width:650px){.current-card .subtitle{font-size:19px}.listening-dock.dock-collapsed .current-card .subtitle{font-size:16px}}
.library-add{width:100%;margin-top:16px}.listening-dock .audio-panel .settings{justify-content:flex-start}.listening-dock .audio-panel .settings .speed-controls{margin-right:auto}
.session-header{display:none}
:root{--header-height:64px}body:has(#listeningDock:not([hidden])) main.app-content{max-width:none;width:100%;height:max(0px,calc(100dvh - var(--header-height) - var(--dock-height)));padding:0;margin:0}body:has(#listeningDock:not([hidden])) .app-content .reader,body:has(#listeningDock:not([hidden])) #player{height:100%;min-height:0}#sentencePanel{height:100%;min-height:0;display:flex;flex-direction:column;padding:0;border:0;border-radius:0}#sentencePanel .caption-toolbar{flex:none;padding:5px 8px;border-bottom:1px solid #e5e9df}#sentencePanel .cues{flex:1;min-height:0;max-height:none;border:0;border-radius:0;overscroll-behavior:contain}#sentencePanel .cue{display:grid;grid-template-columns:22px minmax(0,1fr) 34px;grid-template-rows:auto auto;align-items:center;gap:5px 8px;padding:8px 10px;border-left:3px solid transparent}#sentencePanel .cue.current{border-left-color:#617e46}#sentencePanel .cue>div{display:contents}#sentencePanel .cue>input{grid-column:1;grid-row:1;margin:0;justify-self:center}#sentencePanel .cue small{grid-column:2;grid-row:1;margin:0;font-size:10px}#sentencePanel .cue>button{grid-column:3;grid-row:1;padding:3px 8px;min-height:26px}#sentencePanel .cue p:not(.cue-ipa){grid-column:1/-1;grid-row:2;width:100%;font-size:14px;line-height:1.7;overflow-wrap:anywhere}.listening-dock .dock-inner{max-width:none;padding:0 0 max(5px,env(safe-area-inset-bottom))}.listening-dock .current-card,.listening-dock.dock-collapsed .current-card{border-radius:0;padding-left:10px;padding-right:10px}.listening-dock .audio-panel,.listening-dock .practice-actions,.listening-dock .practice-feedback,.listening-dock .dock-toolbar{margin-left:8px;margin-right:8px}@media(max-width:650px){:root{--header-height:58px}#sentencePanel .caption-toolbar{padding:4px 6px}#sentencePanel .cue{padding:7px 7px;gap:4px 6px}.listening-dock .current-card,.listening-dock.dock-collapsed .current-card{padding-left:8px;padding-right:8px}}
.practice-feedback{display:flex;gap:5px 14px;flex-wrap:wrap;min-height:20px;padding:0 2px 6px;font-size:11px;line-height:1.6;color:#526b52}.practice-feedback #practiceProgress{font-weight:600;color:#244d3a}.practice-feedback #practiceStatus{color:#8a5d20}#sentencePanel .panel-heading h3{margin:0;font-size:15px}
.listening-dock.dock-collapsed .practice-actions{display:none}#sentencePanel .caption-toolbar{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;overflow-x:auto;padding:10px 0;margin:0;scrollbar-width:thin}#sentencePanel .caption-toolbar input{width:160px;min-width:130px;flex:1 0 130px;font-size:11px;padding:8px 9px}#sentencePanel .caption-toolbar button{flex:none;white-space:nowrap;font-size:11px;padding:8px 10px;min-height:34px}#sentencePanel #selectedCount{flex:none;white-space:nowrap;font-size:10px;color:#728267;margin:0 2px}#sentencePanel .cue-ipa{display:none!important}.practice-feedback #cancelRest{font-size:10px;padding:2px 8px;min-height:24px;border-radius:7px}@media(max-width:650px){#sentencePanel .caption-toolbar{gap:5px}#sentencePanel .caption-toolbar input{width:130px;flex-grow:0}#sentencePanel .caption-toolbar button{padding:8px;font-size:10px}}

/* Shared app bounds and inline library. */
.shared-panel{margin:18px 0 24px;padding:18px;background:#edf3e6;border:1px solid #cfddc3;border-radius:16px}.shared-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.shared-heading h3{margin:0}.shared-heading button{flex:none;font-size:11px;padding:7px 10px}.shared-heading .muted{line-height:1.7}.shared-search{width:100%;margin:14px 0 12px;background:#fff;font-size:12px}.shared-book{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;margin:10px 0;border:1px solid #dae3d2;background:#fff;border-radius:12px}.shared-book>div:first-child{flex:1;min-width:0}.shared-book b,.shared-book small{display:block;overflow-wrap:anywhere}.shared-book b{font-size:13px}.shared-book small{font-size:10px;color:#607363;margin-top:6px}.shared-book.shared-pinned{border-color:#a7bc86;background:#fbfdf5;box-shadow:0 3px 10px #173e3508}.shared-book .book-actions{flex-wrap:wrap;justify-content:flex-end}.shared-upload{padding:16px;margin-top:14px;background:#fff;border:1px solid #d3dfc8;border-radius:12px}.shared-upload label{display:block;margin:0 0 14px;font-size:12px}.shared-upload label>input:not([type=checkbox]){display:block;width:100%;margin-top:7px}.shared-upload .shared-pin-option{display:flex;align-items:center;gap:8px}.personal-heading{padding-top:8px;border-top:1px solid #dfe5d8}.shared-panel #sharedStatus{margin-bottom:0;line-height:1.7}@media(max-width:650px){.shared-panel{padding:12px}.shared-book{flex-direction:column;align-items:stretch;padding:12px}.shared-book .book-actions{justify-content:flex-start}.shared-heading{gap:8px}}
body{max-width:1024px;margin-inline:auto}
header.app-header{padding-inline:24px}
main.app-content,body:has(#listeningDock:not([hidden])) main.app-content{max-width:1024px;margin-inline:auto}
.listening-dock{width:100%;max-width:1024px;margin-inline:auto}
#libraryDialog.library-dialog{width:100%;max-width:none;padding:22px;margin:0;border:0;background:transparent;border-radius:0;box-shadow:none}
#libraryDialog #library{max-height:none;min-height:100px}
body:has(#listeningDock:not([hidden])) .reader:has(#libraryDialog:not([hidden])){overflow-y:auto;overscroll-behavior:contain}
@media(max-width:650px){header.app-header{padding-inline:14px}#libraryDialog.library-dialog{padding:16px 0}body:has(#listeningDock:not([hidden])) #libraryDialog.library-dialog{padding:16px 14px}}

.library-dialog .book{display:flex;align-items:center;gap:12px;border:1px solid #dfe4da}.book-open{flex:1;min-width:0;border:0;background:transparent;text-align:left;padding:0}.book-actions{display:flex;gap:6px;flex:none}.book-actions button{font-size:11px;padding:8px 10px}@media(max-width:450px){.library-dialog .book{flex-wrap:wrap}.book-open{flex-basis:100%}.book-actions{margin-left:auto}}

/* Floating listening panel, separated from the subtitle list. */
.youtube-controls{display:flex;align-items:center;gap:10px;min-height:38px;border-radius:24px;background:#f1f3f4;color:#202124;padding:3px 10px;margin:0 0 5px}.youtube-controls button{border:0;border-radius:50%;background:transparent;width:30px;height:30px;min-width:30px;padding:0;font-size:15px;color:#202124}.youtube-controls button:hover{background:#dfe3e6}.youtube-controls button:disabled{opacity:.4}.youtube-controls #youtubeTime{white-space:nowrap;font:11px system-ui,sans-serif;font-variant-numeric:tabular-nums}.youtube-controls input[type=range]{--played:0%;flex:1;min-width:30px;width:100%;height:4px;padding:0;margin:0;border:0;border-radius:5px;appearance:none;background:linear-gradient(to right,#50555a var(--played),#c1c6cc var(--played));accent-color:#50555a;cursor:pointer}.youtube-controls input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:#50555a}.youtube-controls input[type=range]::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:#50555a}.youtube-controls :focus-visible{outline:2px solid #456d50;outline-offset:3px}.youtube-controls input:disabled{cursor:default;opacity:.5}.youtube-external{font-size:10px;margin-bottom:4px}@media(max-width:400px){.youtube-controls{gap:6px;padding-inline:6px}.youtube-controls #youtubeTime{font-size:10px}}
.caption-picker{padding:14px;background:#edf3e7;border:1px solid #d6e2ca;border-radius:12px;margin-top:16px}.caption-picker>button,.caption-choices>button{font-size:12px}.caption-picker p{font-size:11px;color:#526d52;line-height:1.7;margin:10px 0 0;overflow-wrap:anywhere}.caption-picker label{margin-top:14px}.caption-picker select{display:block;width:100%;font-size:12px;margin:7px 0 12px}.shared-caption-preview:empty{display:none}.shared-caption-preview{padding:8px 12px;background:#f5f7f0;border-radius:8px;font-size:11px;line-height:1.7;margin-bottom:14px}.shared-caption-preview p{white-space:pre-line;margin:6px 0}
.youtube-external{display:block;text-align:center;font-size:11px;color:#426747;margin:0 0 8px;text-decoration:underline}
.youtube-panel{position:fixed;left:-10000px;top:0;width:200px;height:200px;pointer-events:none}.youtube-panel>div,.youtube-panel>iframe{width:200px;height:200px;border:0;display:block}#youtubeField small{display:block;line-height:1.7;font-size:11px;color:#607363;margin-top:8px}#sourceType{display:block;width:100%;margin-top:8px}.shared-upload select{display:block;width:100%;margin-top:7px}
.listening-dock{padding:16px 14px max(12px,env(safe-area-inset-bottom));background:transparent;border:0;box-shadow:none;backdrop-filter:none}
.listening-dock .dock-inner{padding:12px 12px 8px;background:linear-gradient(160deg,#ffffff,#f1f5eb);border:1px solid #cbd8c3;border-radius:22px;box-shadow:0 -6px 24px #173e3514,0 12px 36px #173e3526}
.listening-dock .listening-stage{border-radius:14px}
.listening-dock .current-card,.listening-dock.dock-collapsed .current-card{border-radius:14px;border:1px solid #426b53;background:linear-gradient(120deg,#123c31,#2b5d48);box-shadow:0 4px 12px #173e351c;padding:16px 20px}
.listening-dock .audio-panel{margin:10px 0 0;padding-top:0}
.listening-dock .practice-actions,.listening-dock .practice-feedback,.listening-dock .dock-toolbar{margin-left:0;margin-right:0}
.listening-dock .dock-toolbar{margin-top:4px;padding-top:8px;border-top:1px solid #d5dfce}
.listening-dock .dock-toolbar button{background:#fff;border-color:#dfe6d8;box-shadow:0 1px 2px #173e3508}
.listening-dock .dock-toolbar button:hover,.listening-dock .dock-toolbar button[aria-expanded=true]{background:#e6eedc;border-color:#b9cbaa}
@media(max-width:650px){.listening-dock{padding:12px 8px max(8px,env(safe-area-inset-bottom))}.listening-dock .dock-inner{padding:8px 8px 6px;border-radius:18px}.listening-dock .current-card,.listening-dock.dock-collapsed .current-card{padding:12px 14px;border-radius:12px}.listening-dock .dock-toolbar{gap:3px}.listening-dock .dock-toolbar button{padding:6px}}
.auth-gate{min-height:70dvh;padding:48px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px}.auth-gate h1{font-size:clamp(22px,4vw,30px);margin:0}.auth-gate p{color:#607363;max-width:420px;line-height:1.7;margin:0}.auth-gate .logo{width:56px;height:56px;font-size:42px}.header-actions #accountButton{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-role:not(:empty){display:inline-block;background:#e6eedc;color:#365b40;padding:5px 10px;border-radius:20px;font-size:11px}#accountDialog{max-width:720px}#accountEmail{overflow-wrap:anywhere;color:#607363;font-size:12px}#accountMessage{font-size:12px;line-height:1.7;color:#8a5d20}.account-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid #dfe5d8;padding:14px 0}.account-row>div{flex:1;min-width:160px}.account-row b,.account-row small{display:block;overflow-wrap:anywhere}.account-row b{font-size:12px}.account-row small{font-size:11px;margin-top:5px;color:#607363}.account-row select,.account-row button{font-size:11px;padding:8px}.account-row button:disabled{opacity:.5;cursor:default}#accountAdmin{margin-top:22px}@media(max-width:650px){.header-actions{gap:5px}.header-actions #accountButton{max-width:115px;font-size:10px;padding:8px}.header-actions small{display:none}}