/* Comfortable reading and library browsing controls. */
[hidden] { display: none !important; }
.library-filters { display:flex; align-items:center; flex-wrap:wrap; gap:14px 22px; margin-bottom:24px; padding:18px; background:#faf7ef; border:1px solid var(--rule); }
.library-filters label { display:flex; align-items:center; gap:9px; font-size:13px; }
.library-filters select, .listen-options select { max-width:100%; padding:9px; border:1px solid var(--rule); background:white; color:var(--ink); font:inherit; }
#library-summary { margin-left:auto; color:var(--teal); font-size:13px; }
#library-note { flex-basis:100%; margin:0; color:var(--ink-soft); font-size:12px; }
.theme-label { color:var(--teal); font:10px/1.6 Consolas,monospace; margin-bottom:8px; }
.story-status { font:11px/1.5 Consolas,monospace; color:#846214; }
.story-status:empty { display:none; }
.save-story { border:1px solid var(--rule); background:white; color:var(--teal); font-size:19px; cursor:pointer; min-width:36px; min-height:36px; }
.save-story[aria-pressed=true] { background:#e8f0eb; }
.reader-controls { display:flex; gap:8px 14px; flex-wrap:wrap; align-items:center; max-width:1400px; margin:auto; padding:4px 18px 12px; }
.reader-controls button,.reader-controls>a,.listen-options button { border:1px solid var(--rule); background:#fff; color:var(--ink); font:12px/1.4 Consolas,monospace; padding:9px 12px; min-height:40px; cursor:pointer; text-decoration:none; }
.reader-controls [aria-pressed=true] { background:var(--ink); color:var(--parch); }
.mode-controls,.control-group { display:flex; align-items:center; gap:6px; }
.control-group>span { font:11px Consolas,monospace; }
.reader-controls button:focus-visible,.library-filters select:focus-visible,.save-story:focus-visible,.listen-options :focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
.listening { flex:none; background:#faf7ef; border-bottom:1px solid var(--rule); padding:9px 18px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px) minmax(0,1fr); gap:8px 18px; align-items:center; }
.listen-title { grid-column:1; grid-row:1; justify-self:end; font:12px Consolas,monospace; }
.listening audio { grid-column:2; grid-row:1; justify-self:center; height:38px; width:100%; }
.listen-options { grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; font:12px Consolas,monospace; }
.listen-options label { display:flex; gap:6px; align-items:center; }
#audio-message { grid-column:1 / -1; text-align:center; margin:0; color:#8a391d; font-size:13px; }
#audio-message:empty { display:none; }
body.reader { height:100dvh; }
.reader .stage { min-height:0; overscroll-behavior:contain; }
.reader.text-mode .stage { background:#eee8dc; padding:24px 16px 40px; }
.reading-text { max-width:720px; margin:0 auto; padding:36px clamp(20px,5vw,56px); background:#fffcf5; color:#292824; line-height:1.85; overflow-wrap:break-word; }
.reading-text h2 { font-size:1.65em; line-height:1.25; margin:0 0 1em; font-weight:normal; }
.reading-text p { margin:0 0 1.25em; }
.reading-intro { color:var(--ink-soft); font-style:italic; }
.reading-text blockquote { margin:1.8em 0; padding:12px 20px; border-left:3px solid var(--gold); background:#f4efdf; }
.reading-text small { font:11px/1.6 Consolas,monospace; color:var(--ink-soft); }
.reader .rtitle { flex:1; }
.reader .rtitle h1 { white-space:normal; max-width:none; }
.reader .rtitle .kicker { max-width:60ch; line-height:1.4; }
.reader .langtab a { display:flex; align-items:center; min-height:42px; }
.reader .tabplay { min-width:38px; }
#storage-note { margin:0; padding:0 18px 8px; font:10px/1.5 Consolas,monospace; color:#e0d4bc; text-align:center; }
.reader .pager-in a { flex:1; font-size:10px; line-height:1.5; }
.reader .pager-in #next { text-align:right; }
@media(max-width:720px) {
 .library-filters { padding:14px; gap:12px; }.library-filters label { width:100%; justify-content:space-between; }.library-filters select { width:70%; }#library-summary { margin-left:0; }
 .reader .bar-in { gap:8px; padding:8px 12px; }.reader .rtitle .kicker { display:none; }.reader .rtitle h1 { font-size:16px; }
 .reader .langs { width:100%; margin-left:0; }.reader .langtab { flex:1; }.reader .langtab a { font-size:12px; padding:6px; }
 .reader-controls { padding:0 12px 8px; gap:6px; }.reader-controls button,.reader-controls>a { padding:7px 9px; min-height:36px; font-size:11px; }
 .listening { padding:6px 12px; gap:6px 12px; }.listen-title { display:none; }.listening audio { grid-column:1 / -1; width:100%; height:34px; }.listen-options { gap:6px; }.listen-options button { min-height:34px; padding:5px 8px; }.listen-options select { padding:5px; }
 .reading-text { padding:25px 22px; }.reader.text-mode .stage { padding:12px 10px 24px; }.reader .pager-in { gap:8px; padding:7px 12px; }.reader .pager-in .mid { flex:none; font-size:10px; }
}
@media(max-width:380px) { .reader-controls { gap:4px; }.reader-controls button,.reader-controls>a { font-size:10px; padding:6px; } }
@media(max-height:600px) and (orientation:landscape) { body.reader { height:auto; min-height:100dvh; overflow:auto; }.reader .stage { overflow:visible; }.reader .bar { position:static; } }

/* Preserve the full artwork, including unusually wide illustration strips. */
.hub .thumb img { width:100%; height:150px; object-fit:cover; }

/* Mobile reader uses document scrolling so controls cannot squeeze out the story. */
@media screen and (max-width:720px) {
 body.reader { height:auto; min-height:100dvh; overflow:auto; }
 .reader .bar-in { display:flex; align-items:center; }
 .reader .site-brand { width:auto; flex:0 0 auto; margin-right:0; }
 .reader .site-brand img { width:112px; height:auto; }
 .reader .rtitle { flex:1 1 100%; order:2; }
 .reader .rtitle h1 { font-size:18px; line-height:1.35; overflow-wrap:anywhere; }
 .reader .langs { order:3; min-width:0; }
 .reader .langtab { min-width:0; }
 .reader .langtab a { white-space:normal; }
 .reader .stage { flex:none; overflow:visible; min-height:50dvh; overscroll-behavior:auto; }
 .reader .reading-text { width:100%; min-width:0; }
 .reader .reader-controls { min-width:0; }
 .reader .listen-options { row-gap:8px; }
 .reader .pager { position:static; }
}
@media screen and (max-width:720px) {
 .reader .bar-in .site-brand { width:auto; flex:0 0 auto; }
 .reader .bar-in .site-brand img { width:112px; height:auto; }
}
.reader #collection-sections { background:var(--parch); color:var(--ink); width:100%; max-width:none !important; margin:0 !important; border-bottom:1px solid var(--rule); justify-content:center; }
@media screen and (max-width:720px) { .reader #collection-sections a { padding:7px 12px !important; } }
/* Progressive disclosure keeps the story close to the player. */
.reader-options{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 12px;max-width:1400px;margin:auto;}
.reader-option{flex:1 1 250px;min-width:0;}
.reader-option summary{cursor:pointer;min-height:40px;padding:10px 12px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);font:13px/1.4 system-ui,sans-serif;}
.reader-option summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.reader-option[open]>summary{margin-bottom:8px;}
.reader-option .langs{margin:0;width:100%;}
.reader-option .reader-controls{padding:0;}
@media(max-width:720px){
 .reader-options{padding:0 12px 8px;gap:6px;}
 .reader-option{flex:1 1 145px;}
 .reader-option summary{font-size:12px;padding:9px 8px;}
 .reader-option[open]{flex-basis:100%;}
 .reader .listen-options{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:6px;}
 .reader .listen-options>label:not([hidden]){justify-content:flex-end;font-size:11px;min-width:0;}
 .reader .listen-options .playback-mode{grid-column:1/-1;justify-content:center;}
 .reader .listen-options select{max-width:100%;}
}
@media(max-width:720px){
 .reader .listen-options{grid-template-columns:auto auto minmax(0,1fr) minmax(0,1fr);align-items:end;}
 .reader .listen-options>label:not([hidden]){flex-direction:column;align-items:stretch;gap:3px;font-size:10px;}
 .reader .listen-options .playback-mode{grid-column:auto;}
 .reader .listen-options select{width:100%;min-height:34px;}
}