/* Aether reader: quiet ink, petal paper and OLED. Image-strip geometry is owned
   exclusively by the reader engine; these styles affect only surrounding UI. */
:root[data-design=aether] body.reader-mode{color-scheme:dark;--reader-bg:#0c1426;--reader-text:#f4f0ff;--reader-muted:#bec7dd;--reader-line:#3c4560;--reader-surface:#141f36;--reader-control:#25304b;--reader-accent:#c7beff;--reader-accent-ink:#252442;--reader-focus:#d8d0ff;--bg:var(--reader-bg);--surface:var(--reader-surface);--surface-2:var(--reader-control);--text:var(--reader-text);--muted:var(--reader-muted);--muted-2:var(--reader-muted);--line:var(--reader-line);--accent:var(--reader-accent);--accent-ink:var(--reader-accent-ink);--accent-soft:var(--reader-control);--focus:var(--reader-focus);--aether-panel:var(--reader-surface);--aether-edge:var(--reader-line);--aether-button:var(--reader-accent);--aether-button-ink:var(--reader-accent-ink);background:var(--reader-bg);color:var(--reader-text)}
:root[data-design=aether] body.reader-mode.reader-paper{color-scheme:light;--reader-bg:#f4eff7;--reader-text:#292d43;--reader-muted:#4e566f;--reader-line:#c2b7d1;--reader-surface:#fffbff;--reader-control:#e8e0f0;--reader-accent:#645583;--reader-accent-ink:#fff;--reader-focus:#5d477f}
:root[data-design=aether] body.reader-mode.reader-oled{--reader-bg:#000;--reader-surface:#080c14;--reader-control:#1c2334;--reader-line:#3c4256;--reader-text:#f4f0ff;--reader-muted:#bec7dd;--reader-accent:#c7beff;--reader-accent-ink:#252442;--reader-focus:#d8d0ff}
:root[data-design=aether] .reader-shell{padding-bottom:calc(150px + env(safe-area-inset-bottom));font-family:var(--font-ui)}
:root[data-design=aether] .reader-progress-bar{height:3px}
:root[data-design=aether] .reader-progress-bar span{background:var(--reader-accent)}
:root[data-design=aether] .reader-topbar{background:var(--reader-surface);border:1px solid var(--reader-line);border-bottom:0;border-radius:24px 24px 0 0;padding:11px max(14px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));gap:5px 10px;transition:transform 190ms cubic-bezier(.22,1,.36,1),opacity 160ms ease-out}
:root[data-design=aether] .reader-title strong{font-size:15px;line-height:1.5}
:root[data-design=aether] .reader-title small{font-size:12px;line-height:1.6;color:var(--reader-muted);opacity:1}
:root[data-design=aether] :is(.reader-back,.reader-setting-button,.reader-mark-button){width:44px;height:44px;border-radius:14px;border:1px solid transparent;background:var(--reader-control);color:var(--reader-text);transition:transform 130ms var(--ease-out)}
:root[data-design=aether] :is(.reader-back,.reader-setting-button,.reader-mark-button):active{transform:scale(.96)}
:root[data-design=aether] .reader-mark-button[aria-pressed=true]{background:var(--reader-accent);color:var(--reader-accent-ink)}
:root[data-design=aether] .reader-mark-button[aria-pressed=true] svg{fill:currentColor}
:root[data-design=aether] .reader-chapter-tools{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;padding-top:7px;border-color:var(--reader-line)}
:root[data-design=aether] .reader-chapter-tools>:is(a,.reader-chapter-placeholder){min-width:0;min-height:44px;font-size:13px;gap:4px;border-radius:12px;color:var(--reader-text)}
:root[data-design=aether] .reader-position-tools{gap:6px;min-width:0}
:root[data-design=aether] .reader-page-counter{font-family:var(--font-ui);font-size:12px;line-height:1.6;white-space:nowrap;color:var(--reader-text)}
:root[data-design=aether] .reader-intro{padding:calc(25px + env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 26px max(22px,env(safe-area-inset-left))}
:root[data-design=aether] .reader-intro h1{font-size:25px;line-height:1.55;margin:9px 0 11px;overflow-wrap:anywhere}
:root[data-design=aether] .reader-intro p{font-size:13px;line-height:1.85;opacity:1;color:var(--reader-muted)}
:root[data-design=aether] .reader-intro .eyebrow{color:var(--reader-muted);font-size:12px}
:root[data-design=aether] .reader-bookmarks-panel{margin-top:21px;padding:0 13px;border:1px solid var(--reader-line);border-radius:15px;background:var(--reader-surface)}
:root[data-design=aether] .reader-bookmarks-panel summary{font-size:13px;line-height:1.8;min-height:48px;display:flex;align-items:center;gap:10px;color:var(--reader-text);cursor:pointer}
:root[data-design=aether] .reader-bookmarks-panel summary::after{content:"+";font-family:var(--font-display);font-size:19px;color:var(--reader-accent)}
:root[data-design=aether] .reader-bookmarks-panel[open] summary::after{content:"−"}
:root[data-design=aether] .reader-bookmark-count{font-family:AetherLatin,sans-serif;font-size:13px;color:var(--reader-accent)}
:root[data-design=aether] .reader-bookmark-list{border-top:1px solid var(--reader-line)}
:root[data-design=aether] .reader-bookmark-row{padding-block:5px;gap:8px;border-bottom:1px solid var(--reader-line)}
:root[data-design=aether] .reader-bookmark-row:last-child{border-bottom:0}
:root[data-design=aether] .reader-bookmark-row button{font-size:13px;line-height:1.75;padding-inline:2px;color:var(--reader-text)}
:root[data-design=aether] .reader-bookmarks-empty{font-size:13px;line-height:1.8;padding-block:13px;color:var(--reader-muted)}
:root[data-design=aether] .reader-range-loader{font-size:13px;line-height:1.85;flex-wrap:wrap;gap:8px 14px;padding:18px 22px}
:root[data-design=aether] .reader-page-error{font-size:14px;line-height:1.8;gap:5px}
:root[data-design=aether] .reader-complete{padding:32px 22px;color:var(--reader-text)}
:root[data-design=aether] .reader-complete h2{font-size:29px;line-height:1.5;margin-block:8px 11px}
:root[data-design=aether] .reader-complete p{font-size:14px;line-height:1.85;opacity:1;color:var(--reader-muted)}
:root[data-design=aether] .reader-complete .eyebrow{font-size:12px;color:var(--reader-muted)}
:root[data-design=aether] .reader-complete-actions{gap:10px;margin-top:23px}
:root[data-design=aether] .reader-shell .primary-button{background:var(--reader-accent);color:var(--reader-accent-ink);border-color:transparent}
:root[data-design=aether] .reader-shell .secondary-button{background:var(--reader-control);color:var(--reader-text);border-color:var(--reader-line)}
:root[data-design=aether] .reader-shell :is(a,button,summary):focus-visible{outline:2px solid var(--reader-focus);outline-offset:3px}

/* Native preference preview uses the selected reader material while reading. */
:root[data-design=aether] #readerSettings{color-scheme:inherit;background:var(--surface);color:var(--text);border:1px solid var(--line);border-bottom:0;padding:24px 22px calc(26px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0}
:root[data-design=aether] #readerSettings .dialog-head{align-items:center;margin-bottom:28px;gap:15px}
:root[data-design=aether] #readerSettings .dialog-head .eyebrow{display:none}
:root[data-design=aether] #readerSettings h2{font-size:26px;line-height:1.5}
:root[data-design=aether] #readerSettings .icon-button{background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-radius:14px}
:root[data-design=aether] #readerSettings .segmented-field{gap:8px;margin-bottom:26px}
:root[data-design=aether] #readerSettings .segmented-field legend{font-size:14px;line-height:1.8;color:var(--text);margin-bottom:11px}
:root[data-design=aether] #readerSettings .segmented-field label span{font-size:14px;line-height:1.6;min-height:50px;border-radius:13px;background:var(--surface-2);color:var(--text);border-color:var(--line)}
:root[data-design=aether] #readerSettings .segmented-field input:checked+span{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
:root[data-design=aether] #readerSettings .settings-note{font-size:13px;line-height:1.85;color:var(--muted);margin-block:8px 22px}
:root[data-design=aether] #readerSettings .primary-button{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-size:15px;min-height:50px}
@media(min-width:700px){
 :root[data-design=aether] .reader-intro,:root[data-design=aether] .reader-complete{padding-inline:32px}
 :root[data-design=aether] .reader-intro h1{font-size:30px}
 :root[data-design=aether] #readerSettings{max-width:540px;border-radius:24px;padding-inline:28px}
}
@media(max-width:359px){
 :root[data-design=aether] .reader-topbar{padding-inline:10px;gap:4px 8px}
 :root[data-design=aether] .reader-position-tools{gap:4px}
 :root[data-design=aether] .reader-chapter-tools{gap:4px}
 :root[data-design=aether] .reader-chapter-tools>a{font-size:12px}
 :root[data-design=aether] .reader-page-counter{font-size:11px}
 :root[data-design=aether] #readerSettings{padding-inline:18px}
}
@media(min-width:560px) and (max-height:500px) and (orientation:landscape){
 :root[data-design=aether] .reader-topbar{grid-template-columns:44px minmax(100px,1fr) 44px minmax(270px,1.5fr);gap:8px;padding-block:6px calc(6px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0}
 :root[data-design=aether] .reader-chapter-tools{grid-column:4;grid-row:1;border-top:0;border-inline-start:1px solid var(--reader-line);padding-block:0;padding-inline-start:10px}
 :root[data-design=aether] .reader-shell{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){:root[data-design=aether] .reader-topbar,:root[data-design=aether] :is(.reader-back,.reader-setting-button,.reader-mark-button){transition:none}}
