/* Silent Book web reader: the tool card, the shelf and the reading overlay.
   Shared by the home pages / and /ru/; the page's own <style> holds the site's
   tokens and layout. Colours follow the app's moods: app.js sets the overlay's
   --r-* variables from moods.js (the values below are Noir's, until it does);
   every control is at least 44 px and shows its focus. */

[hidden]{display:none!important}

/* ── the tool card ─────────────────────────────────────────────────── */
.tool{margin:30px 0 8px;background:var(--card);border:1px solid var(--edge);border-radius:20px;
  padding:clamp(20px,4vw,34px)}
.drop{border:1px dashed rgba(214,165,92,.45);border-radius:16px;padding:clamp(18px,4vw,30px);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.drop .hint,.drop .plain{flex-basis:100%;margin:0}
.drop .hint{color:var(--gray);font-size:15px}
.drop .plain{color:#CFC6B4;font-size:15.5px}
button.cta,button.ghost,button.link{font:inherit;cursor:pointer}
button.cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 30px;
  border-radius:999px;background:var(--amber);color:var(--black);font-size:17px;border:1px solid var(--amber)}
button.cta:hover{background:#E2B571}
button.ghost{min-height:48px;padding:12px 22px;border-radius:999px;background:transparent;color:var(--ivory);
  border:1px solid rgba(242,233,215,.28);font-size:16px}
button.ghost:hover{border-color:var(--amber);color:var(--amber)}
button.link{background:none;border:none;color:var(--amber);font-size:15px;min-height:44px;padding:8px 0;
  text-decoration:underline;text-underline-offset:3px}
button:disabled{opacity:.5;cursor:default}
.tool .row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px;margin-top:18px}
.keep{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:#CFC6B4;font-size:15.5px;cursor:pointer}
.keep input{width:20px;height:20px;accent-color:var(--amber)}
.tool .row.backup{margin-top:4px}
.tool .why{margin:6px 0 0;color:var(--gray);font-size:14.5px;line-height:1.5}
.status{min-height:1.6em;margin-top:12px;color:var(--ivory);font-size:16px}
.tool progress{width:100%;height:6px;accent-color:var(--amber)}
.needs{margin-top:14px;color:#E2B571;font-size:15px}
button:focus-visible,input:focus-visible,.tile button:focus-visible,dialog :focus-visible{
  outline:2px solid var(--amber);outline-offset:3px}

/* ── the Android banner ────────────────────────────────────────────── */
.app-banner{margin:22px 0 0;padding:16px 18px;border:1px solid var(--edge);border-radius:16px;
  background:rgba(214,165,92,.06);display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.app-banner p{flex:1 1 260px;margin:0;color:#CFC6B4;font-size:15.5px}
.app-banner a.cta{display:inline-flex;align-items:center;min-height:44px;padding:10px 22px;border-radius:999px;
  background:var(--amber);color:var(--black);font-size:15.5px}
.app-banner a.cta:hover{text-decoration:none;background:#E2B571}
.app-banner button.ghost{min-height:44px;padding:8px 16px;font-size:15px}

/* ── the shelf ─────────────────────────────────────────────────────── */
/* Covers of 150 px and up, and on a phone never fewer than two side by side (half the row less half the gap). */
.shelf ul{list-style:none;padding:0;margin:14px 0 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(150px,calc(50% - 9px)),1fr));gap:18px}
.tile{display:flex;flex-direction:column;gap:4px}
.tile .open-tile{display:flex;flex-direction:column;align-items:stretch;gap:6px;text-align:start;padding:0;
  background:none;border:none;color:var(--ivory);font:inherit;cursor:pointer;min-height:44px}
.tile .cover{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:10px;border:1px solid var(--edge);
  background:var(--ink)}
/* A title card's words stand at its foot; one too long for it shows from its first words, cut at the foot. */
.tile .card{display:flex;align-items:flex-end;align-items:safe flex-end;padding:12px;font-size:15px;line-height:1.3;
  color:var(--ivory);overflow:hidden;word-break:break-word;background:linear-gradient(160deg,#1a160f,#0b0a07)}
.tile .ttl{font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.tile .aut,.tile .pct{font-size:13.5px;color:var(--gray)}
.tile .remove{font-size:13.5px;align-self:flex-start}
/* Two to a row on a phone: a long title wraps between words, and past three lines ends in an ellipsis. */
@media (max-width:599px){
  .tile .ttl{overflow-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
    overflow:hidden}
}
/* A classic's tile is a link to its address. */
.tile a.open-tile{text-decoration:none}
.tile a.open-tile:hover .ttl{text-decoration:underline;text-underline-offset:3px}
.tile a.open-tile:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:10px}

/* ── dialogs ───────────────────────────────────────────────────────── */
dialog.sheet{margin:auto;max-width:min(440px,calc(100vw - 32px));padding:24px;border-radius:18px;
  border:1px solid var(--edge);background:var(--card);color:var(--ivory)}
dialog.sheet::backdrop{background:rgba(0,0,0,.6)}
dialog.sheet h3{font-weight:normal;font-size:20px;margin:0 0 8px}
dialog.sheet p{color:#CFC6B4;margin:0 0 18px}
dialog.sheet .row{display:flex;flex-wrap:wrap;gap:12px}

.drop-overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(5,5,5,.86);border:3px dashed var(--amber);color:var(--ivory);font-size:clamp(20px,3vw,28px);
  pointer-events:none}

/* ── the reader ────────────────────────────────────────────────────── */
html.reading{overflow:hidden}
/* While a book is open the page itself never scrolls. A swipe that reaches
   it would go back in history (sideways) or reload the page (down, on a
   phone), and either closes the book: the root's overscroll-behavior ends
   both. Nothing inside the reader sets an overscroll-behavior of its own:
   Chrome then holds a swipe at that element and, when the element cannot
   scroll that way, still goes back in history. */
html.reading,html.reading body{overscroll-behavior:none}
.reader{--r-bg:#050505;--r-text:#DAD2C2;--r-accent:#D6A55C;--r-chrome:rgba(5,5,5,.94);--r-panel:#0B0A07;
  --r-line:rgba(242,233,215,.12);--r-field:#68645B;--r-hint:#9C968A;--r-glow:transparent;--r-glow-height:0px;
  position:fixed;inset:0;height:100vh;height:100dvh;z-index:50;overflow:hidden;
  background:var(--r-bg);color:var(--r-text);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans',sans-serif;font-variant-numeric:lining-nums}
.reader.preparing{visibility:hidden}
.reader .stage{position:absolute;inset:0;background:var(--r-bg);outline:none}
.reader .stage:focus-visible{box-shadow:inset 0 0 0 2px var(--r-accent)}
.reader foliate-view{display:block;width:100%;height:100%}
/* The book's words never stand under the bars, nor under the lines over the page's foot while they stand (an
   offer, reading aloud's bar, a long note): app.js makeRoom measures them (--r-head, the top bar; --r-foot, the
   bottom bar and those lines). In pages the paginator's margin keeps the bars' room, and the view's padding
   adds the lines' (--r-foot-more). In scroll flow a section is one long page that scrolls inside the view, and
   the view's padding keeps all of it. The room is the same whether the bars show or not, so showing them lays
   nothing out anew; a new room makes the paginator lay the page out again from the same place. */
.reader .stage>foliate-view{box-sizing:border-box;background:var(--r-bg)}
.reader[data-flow="paginated"] .stage>foliate-view{padding-bottom:var(--r-foot-more,0px)}
.reader[data-flow="scrolled"] .stage>foliate-view{padding-top:var(--r-head,0px);padding-bottom:var(--r-foot,0px)}
/* The mood's glow (the app's ReaderAtmosphereBackground): a glow down from
   the top of the page and a faint amber core that breathes every 9.2 s.
   The book's frame paints its own page, so the glow lies over it and
   lightens ("screen"): it shows on the page and barely changes the
   letters. Aura and the Premium moods have one (moods.js). */
.reader .glow{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;overflow:hidden;display:none}
.reader[data-glow] .glow{display:block}
.reader .glow::before{content:'';position:absolute;left:0;right:0;top:0;height:var(--r-glow-height);
  background:linear-gradient(to bottom,var(--r-glow),rgba(0,0,0,0))}
.reader .glow::after{content:'';position:absolute;left:50%;top:47.5%;width:760px;height:760px;margin:-380px 0 0 -380px;
  border-radius:50%;background:radial-gradient(circle,rgba(214,165,92,.031),rgba(214,165,92,0) 486px);
  opacity:.42;animation:sb-breath 9.2s cubic-bezier(.37,0,.63,1) infinite alternate}
.reader[data-mood="aura"] .glow{background:radial-gradient(circle 260px at 50% 49%,rgba(214,165,92,.026),rgba(214,165,92,0))}
.reader[data-mood="aura"] .glow::after{width:820px;height:820px;margin:-410px 0 0 -410px;
  background:radial-gradient(circle,rgba(214,165,92,.036),rgba(214,165,92,0) 590px)}
@keyframes sb-breath{from{opacity:.42}to{opacity:1}}
.reader .warmth{position:absolute;inset:0;background:#FF8C28;mix-blend-mode:multiply;opacity:0;pointer-events:none}
/* Where the sea's band lies over the words it lifts (effects.js LineLift): the weather's own box, under the glow. */
.reader .lift-host{position:absolute;inset:0;pointer-events:none}
/* The weather (effects.js): "screen" over a dark page, "multiply" with the
   ink over Paper; it never takes a pointer. */
.reader .weather{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.reader[data-scheme="light"] .weather{mix-blend-mode:multiply}
/* Leaves, the night's insects and the sea are things, not light: on any page they show as they are. */
.reader .weather[data-scene="kuz_shamol"],.reader .weather[data-scene="yoz_chigirtka"],
.reader .weather[data-scene="dengiz"]{mix-blend-mode:normal}
/* At the clearest the weather stands in front of the words, whole (effects.js PRESENCE_LAYER). */
.reader .weather[data-front]{mix-blend-mode:normal}

.reader .bar{--bar-gap:6px;position:absolute;left:0;right:0;z-index:2;display:flex;align-items:center;
  gap:var(--bar-gap);padding:4px max(8px,env(safe-area-inset-left)) 4px max(8px,env(safe-area-inset-right));
  background:var(--r-chrome);color:var(--r-text);transition:opacity .25s ease}
.reader .bar.top{top:0;border-bottom:1px solid var(--r-line);padding-top:max(4px,env(safe-area-inset-top))}
/* The top bar's end is the ribbon's (below); at 320 px its five buttons, the ribbon and a little of the
   title fit with narrower gaps, as the bottom bar's controls with the way back to the place. */
.reader[data-ribbon] .bar.top{padding-inline-end:calc(max(8px,env(safe-area-inset-right)) + 44px + var(--bar-gap))}
@media (max-width:359px){.reader .bar{--bar-gap:2px}}
.reader .bar.bottom{bottom:0;border-top:1px solid var(--r-line);padding-bottom:max(4px,env(safe-area-inset-bottom))}
.reader[data-bars="hidden"] .bar{opacity:0;pointer-events:none}
.reader .rtitle{flex:1 1 auto;min-width:0;margin:0;padding:0;border:none;color:var(--r-text);
  font-weight:normal;font-size:16px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;font-family:Georgia,'Times New Roman',serif}
.reader .rbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;
  min-height:44px;padding:0 10px;border-radius:12px;border:none;background:transparent;color:var(--r-text);
  font:inherit;font-size:16px;cursor:pointer}
.reader .rbtn:hover{background:var(--r-line)}
.reader .rbtn[aria-expanded="true"],.reader .rbtn[aria-pressed="true"]{color:var(--r-accent)}
/* Beside the accent's hue, a cue of another kind: an open panel's button is underlined, a pressed text button has a
   heavier edge (the ribbon and the sleep timer fill their pictures). */
.reader .bar .rbtn[aria-expanded="true"]{box-shadow:inset 0 -2px 0 currentColor}
.reader .rbtn.text[aria-pressed="true"]{box-shadow:inset 0 0 0 1px currentColor}
.reader .rbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round}
.reader .rbtn .aa{font-family:Georgia,'Times New Roman',serif;font-size:19px}
.reader .rbtn.text{border:1px solid var(--r-line);margin-top:18px;padding:0 18px}
.reader :focus-visible{outline:2px solid var(--r-accent);outline-offset:2px}
.reader .bar input[type="range"]{flex:1 100 auto;min-width:60px;height:44px;accent-color:var(--r-accent);
  background:transparent}
/* How far, and under it the minutes left in the chapter (a narrow line that never pushes the slider off; once
   the slider and the way back to the place are as narrow as they go, it gives way, cut short). */
.reader .ptext{flex:0 1 auto;min-width:4.5em;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;font-size:14px;line-height:1.2;opacity:.85}
.reader .ptext [data-minutes-left]{max-width:min(13em,100%);font-size:12px;opacity:.85;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

.reader .panel{position:absolute;z-index:3;overflow:auto;background:var(--r-panel);color:var(--r-text);
  padding:18px 20px 24px;box-shadow:0 0 40px rgba(0,0,0,.35)}
.reader .panel h3{font-weight:normal;font-size:19px;margin:0 0 6px;outline:none;
  font-family:Georgia,'Times New Roman',serif}
.reader .panel .sub{margin:0 0 12px;font-size:14px;opacity:.8}
.reader .panel fieldset{border:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.reader .panel legend{font-size:14px;opacity:.85;margin-bottom:8px;padding:0}
.reader .panel .opt{position:relative;display:inline-flex}
.reader .panel .opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.reader .panel .opt span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;
  border:1px solid var(--r-line)}
.reader .panel .opt input:checked+span{border-color:var(--r-accent);color:var(--r-accent)}
.reader .panel .opt input:focus-visible+span{outline:2px solid var(--r-accent);outline-offset:2px}
.reader .panel .slider{display:flex;flex-direction:column;margin-top:14px;font-size:14px}
.reader .panel .slider input{height:44px;accent-color:var(--r-accent)}
.reader .panel .check{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:10px;font-size:15px}
.reader .panel .check input{width:20px;height:20px;accent-color:var(--r-accent)}
.reader .panel ol{list-style:none;margin:6px 0 0;padding:0}
.reader .panel ol ol{padding-inline-start:16px}
.reader .panel li button{display:block;width:100%;min-height:44px;padding:10px 8px;border:none;border-radius:10px;
  background:transparent;color:var(--r-text);font:inherit;font-size:15.5px;text-align:start;cursor:pointer;
  font-family:Georgia,'Times New Roman',serif}
.reader .panel li button:hover{background:var(--r-line)}
.reader .panel li button[aria-current="true"]{color:var(--r-accent);border-inline-start:3px solid currentColor;
  padding-inline-start:5px}
/* The Premium moods: a swatch of each page and its text, a lock while closed. */
.reader .panel .swatch .sw{flex:none;width:16px;height:16px;margin-inline-end:8px;border-radius:50%;
  background:var(--sw-bg);box-shadow:inset 0 0 0 3px var(--sw-bg),inset 0 0 0 9px var(--sw-text),0 0 0 1px var(--r-line)}
.reader .panel .opt .lock{flex:none;width:14px;height:14px;margin-inline-start:6px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:none}
.reader .panel .opt.locked .lock{display:inline}
.reader .panel .opt.locked span{opacity:.75}
.reader .panel .premium-note{flex-basis:100%;margin:2px 0 0;font-size:14.5px}
.reader .panel .premium-note a{color:var(--r-accent);display:inline-flex;align-items:center;min-height:44px}
.reader .panel .note{margin:12px 0 0;font-size:14.5px;line-height:1.45}
.reader .panel .note.used{color:var(--r-accent)}
/* Under the used-up note: the sign-in page, for a visitor with Premium in the app. */
.reader .panel .note[data-used-signin]{margin-top:2px}
.reader .panel .note[data-used-signin] a{color:var(--r-accent);display:inline-flex;align-items:center;min-height:44px}
.reader .panel .credits{margin:18px 0 0;font-size:12.5px;line-height:1.45;opacity:.72}
.reader .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:600px){
  .reader .panel{top:0;bottom:0;inset-inline-end:0;width:min(380px,92vw);border-inline-start:1px solid var(--r-line)}
}
@media (max-width:599px){
  .reader .panel{left:0;right:0;bottom:0;max-height:72dvh;border-radius:18px 18px 0 0;
    border-top:1px solid var(--r-line)}
}

/* A note over the page: a chapter's name, one line, in the bottom bar's own room (over the bar while it shows,
   the page's words never under it); a long one wraps, above the lines over the foot, and the page keeps its
   room while it shows (app.js makeRoom sets where). */
.reader .toast{position:absolute;z-index:2;left:50%;bottom:calc(max(4px,env(safe-area-inset-bottom)) + 5px);
  transform:translateX(-50%);max-width:min(90vw,520px);
  margin:0;padding:8px 16px;border-radius:999px;background:var(--r-chrome);color:var(--r-text);font-size:14px;
  border:1px solid var(--r-line);
  opacity:0;transition:opacity .3s ease;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader .toast.on{opacity:1}
/* A long one takes the window's width less 8 px a side, up to 520 px: shrunk to fit beside left:50% it
   would wrap at half the window and stand as tall again. One over the page (the first mark's) takes no room
   and stands over the page's foot, or under the top bar (up) when the words just marked stand low, on the
   mood's panel colour so that no word shows through it. */
.reader .toast.long{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));width:auto;
  max-width:520px;margin-inline:auto;transform:none;
  white-space:pre-line;border-radius:16px;text-align:center;line-height:1.4;padding:9px 16px}
.reader .toast.long.over{background:var(--r-panel)}
.reader .toast.long.up{bottom:auto;top:calc(var(--r-head,0px) + 8px)}

/* Search in the book: the field, the count, the hits under their chapters. */
.reader .panel.search input[type="search"]{display:block;width:100%;min-height:44px;margin:8px 0 0;padding:8px 14px;
  border-radius:12px;border:1px solid var(--r-field);background:transparent;color:var(--r-text);font:inherit;font-size:16px}
.reader .panel.search input[type="search"]::placeholder{color:var(--r-hint);opacity:1}
.reader .panel ol.hits{margin-top:8px}
.reader .panel .group .chapter{margin:14px 0 2px;font-size:13.5px;opacity:.75}
.reader .panel .hits li button{font-size:15px;line-height:1.45}
.reader .panel .hits mark{background:var(--r-accent);color:var(--r-bg);border-radius:3px;padding:0 2px}

/* After a jump within the book: the way back to the place it left, in the bottom bar beside the progress, with
   the bars; on a phone its words give way first, down to its arrow. */
.reader .bar .chip{flex:0 100 auto;min-width:46px;gap:6px;padding:0;padding-inline:8px 10px;border-radius:999px;
  border:1px solid var(--r-line);font-size:15px}
.reader .bar .chip svg{flex:none}
.reader .bar .chip span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* The lines that ask something (keeping a visitor's own book, full screen; one at a time): above the bottom
   bar's room (app.js makeRoom sets where), the page's words above them, never in the way of the page but for
   their buttons. */
.reader .ask{position:absolute;z-index:2;left:50%;bottom:calc(61px + env(safe-area-inset-bottom));
  transform:translateX(-50%);width:max-content;max-width:min(640px,calc(100% - 24px));display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:4px 10px;padding:6px 8px 6px 18px;border-radius:24px;
  background:var(--r-chrome);border:1px solid var(--r-line);box-shadow:0 6px 24px rgba(0,0,0,.25);
  pointer-events:none}
.reader .ask p{margin:0;font-size:15px}
.reader .ask .rbtn.text{margin:0;pointer-events:auto}
.reader .ask [data-answer="keep"],.reader .ask [data-answer="full-screen"]{color:var(--r-accent);
  border-color:var(--r-accent)}
@media (max-width:599px){
  .reader .ask{padding:8px 10px 10px}
  .reader .ask p{flex-basis:100%;text-align:center}
}

/* Reading aloud: the sound panel's group, and the bar above the bottom bar's room (above the line that asks
   something while that stands; app.js makeRoom sets where), the page's words above it. */
.reader .panel .aloud{margin:6px 0 4px;padding-bottom:16px;border-bottom:1px solid var(--r-line)}
.reader .panel .aloud h4{font-weight:normal;font-size:14px;opacity:.85;margin:6px 0 0}
.reader .panel .aloud .rbtn.text{margin-top:8px}
.reader .speechbar{position:absolute;z-index:2;left:50%;bottom:calc(61px + env(safe-area-inset-bottom));
  transform:translateX(-50%);display:flex;flex-wrap:nowrap;align-items:center;gap:2px;width:max-content;
  max-width:calc(100% - 16px);padding:3px 6px;border-radius:26px;background:var(--r-chrome);
  border:1px solid var(--r-line);box-shadow:0 6px 24px rgba(0,0,0,.25);transition:bottom .25s ease}
.reader .speechbar .rbtn{padding:0 8px}
.reader .speechbar [data-speech="play"]{color:var(--r-accent)}
.reader .speechbar [data-speech="play"] svg{fill:currentColor}
.reader .speechbar [data-speech="rate"]{min-width:54px;font-size:15px}
.reader .speechbar [data-speech="sleep"][aria-pressed="true"]{color:var(--r-accent)}
.reader .speechbar [data-speech="sleep"][aria-pressed="true"] svg{fill:currentColor}
.reader .speechbar .none{margin:0;padding:0 4px 0 12px;font-size:14.5px;line-height:1.35}
/* Six buttons of 44 px stay in one row down to a 320 px window: a narrower one leaves their sides less padding. */
@media (max-width:351px){.reader .speechbar .rbtn{padding:0 4px}}

/* A note over the page: its words in the book's own mood and type, at most 40 % of the window tall. */
.reader dialog.note{margin:auto auto max(16px,env(safe-area-inset-bottom));width:min(640px,calc(100vw - 24px));
  max-width:none;padding:0;border-radius:18px;border:1px solid var(--r-line);background:var(--r-panel);
  color:var(--r-text);box-shadow:0 10px 40px rgba(0,0,0,.4)}
.reader dialog.note::backdrop{background:rgba(0,0,0,.35)}
.reader dialog.note .note-body{height:40vh;max-height:40vh;border-radius:18px 18px 0 0;overflow:hidden;background:var(--r-bg)}
.reader dialog.note foliate-view{display:block;width:100%;height:100%}
.reader dialog.note .row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:8px 12px 12px;
  border-top:1px solid var(--r-line)}
.reader dialog.note .rbtn.text{margin:0}
.reader dialog.note [data-note="go"]{color:var(--r-accent);border-color:var(--r-accent)}
@media (min-width:600px){
  .reader dialog.note{margin:auto}
}

/* The page's bookmark: a ribbon, the last control of the top bar's row, of the bar's own colour, with the
   bars (the bar keeps its room at its end: [data-ribbon] above), so it never stands as a glyph on the page's
   words. A bookmarked page keeps it, small, in the page's top margin while the bars are hidden, clear of the
   words (the margin is the bars' room), where it takes no pointer; scroll flow has no such margin, and there
   it waits for the bars. */
.reader .ribbon{position:absolute;z-index:2;top:max(4px,env(safe-area-inset-top));
  inset-inline-end:max(8px,env(safe-area-inset-right));background:var(--r-chrome);transition:opacity .25s ease}
.reader .ribbon:hover{background:linear-gradient(var(--r-line),var(--r-line)) var(--r-chrome)}
.reader .ribbon[aria-pressed="true"]{color:var(--r-accent)}
.reader .ribbon[aria-pressed="true"] svg{fill:currentColor}
.reader[data-bars="hidden"] .ribbon{opacity:0;pointer-events:none}
.reader[data-bars="hidden"] .ribbon[aria-pressed="true"]{opacity:.8;top:calc(-6px + env(safe-area-inset-top));
  background:transparent}
.reader[data-bars="hidden"][data-flow="scrolled"] .ribbon[aria-pressed="true"]{opacity:0}

/* The selection toolbar: four colours, a note, Copy (and for a highlight, Remove), over the page. */
.reader .seltools{position:absolute;z-index:5;display:flex;flex-wrap:nowrap;align-items:center;gap:2px;width:max-content;
  padding:4px;border-radius:14px;background:var(--r-panel);color:var(--r-text);border:1px solid var(--r-line);
  box-shadow:0 8px 28px rgba(0,0,0,.35)}
/* margin:0 too: the tools' class "tool" is also the home page's card (.tool), whose margins would push them down. */
.reader .seltools button{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  margin:0;padding:0;border:none;border-radius:10px;background:transparent;color:inherit;cursor:pointer}
.reader .seltools button:hover{background:var(--r-line)}
.reader .seltools .ink i{width:22px;height:22px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1px var(--r-line)}
.reader .seltools .ink[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--r-chrome),0 0 0 4px var(--r-text)}
.reader .seltools [data-tool="note"]{margin-inline-start:6px}
/* Seven buttons (an opened highlight's, with Remove) take 336 px: a narrower window keeps them 44 px and one row,
   without the gaps (314 px; marks.js toolbarSpot centres a bar too wide for its margins). */
@media (max-width:351px){
  .reader .seltools{gap:0;padding:2px}
  .reader .seltools [data-tool="note"]{margin-inline-start:0}
}
.reader .seltools svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round}

/* The contents panel's tabs, and the marks listed under them. */
.reader .panel .tabs{position:sticky;top:-18px;z-index:1;display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 2px;
  padding:4px 0 8px;background:var(--r-panel)}
.reader .panel .tabs [role="tab"]{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--r-line);
  background:transparent;color:var(--r-text);font:inherit;font-size:14.5px;cursor:pointer}
.reader .panel .tabs [role="tab"][aria-selected="true"]{border-color:var(--r-accent);color:var(--r-accent)}
.reader .panel ol.marks{margin-top:4px}
.reader .panel .marks li{display:flex;align-items:flex-start;gap:2px;border-inline-start:3px solid transparent;
  margin:2px 0}
.reader .panel .marks li[data-color]{border-inline-start-color:var(--ink)}
.reader .panel .marks li button.go{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.reader .panel .marks .where{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:13px;opacity:.75}
.reader .panel .marks .quote{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  font-size:15px;line-height:1.45}
.reader .panel .marks .mnote{white-space:pre-wrap;font-style:italic;font-size:14.5px;line-height:1.45;opacity:.9}
.reader .panel .marks li button.x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;
  padding:0}
.reader .panel .marks button.x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.reader .panel .backup{margin-top:16px;padding-top:4px;border-top:1px solid var(--r-line)}
.reader .panel .backup .row{display:flex;flex-wrap:wrap;gap:0 10px}
.reader .panel .backup .rbtn.text{margin-top:10px}

/* A highlight's note: the words it quotes, the field, Save and Cancel. */
.reader dialog.marknote{margin:auto;width:min(520px,calc(100vw - 24px));max-width:none;padding:18px 18px 12px;
  border-radius:18px;border:1px solid var(--r-line);background:var(--r-panel);color:var(--r-text);
  box-shadow:0 10px 40px rgba(0,0,0,.4)}
.reader dialog.marknote::backdrop{background:rgba(0,0,0,.35)}
.reader dialog.marknote h3{font-weight:normal;font-size:19px;margin:0 0 10px;font-family:Georgia,'Times New Roman',serif}
.reader dialog.marknote blockquote{margin:0 0 12px;padding:0 0 0 12px;border-inline-start:3px solid var(--r-accent);
  max-height:6.6em;overflow:auto;font-family:Georgia,'Times New Roman',serif;font-size:15px;line-height:1.45;opacity:.85}
.reader dialog.marknote textarea{display:block;width:100%;min-height:7em;padding:10px 12px;border-radius:12px;
  border:1px solid var(--r-field);background:transparent;color:var(--r-text);font:inherit;font-size:16px;resize:vertical}
.reader dialog.marknote textarea::placeholder{color:var(--r-hint);opacity:1}
.reader dialog.marknote .row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.reader dialog.marknote .rbtn.text{margin-top:10px}
.reader dialog.marknote [data-marknote="save"]{color:var(--r-accent);border-color:var(--r-accent)}

/* pdf.js measures text with canvases it adds to the page; they stay unseen. */
.hiddenCanvasElement{position:absolute;top:0;left:0;width:0;height:0;display:none}

/* The coach (coach.js): over the whole overlay, one control at a time in a ring that dims the rest, its line
   beside it (under a control in the top half, else over it) and Skip in the middle. */
.reader .coach{position:absolute;inset:0;z-index:6;cursor:pointer}
.reader .coach .ring{position:absolute;border:2px solid var(--r-accent);border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.42)}
.reader .coach .line{position:absolute;left:clamp(12px,calc(var(--at) - 140px),calc(100% - 292px));width:min(280px,calc(100% - 24px));
  margin:0;padding:10px 14px;border-radius:12px;background:var(--r-panel);color:var(--r-text);border:1px solid var(--r-line);
  font-size:15px;line-height:1.4;text-align:center;pointer-events:none;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.reader .coach .skip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-height:44px;padding:0 22px;
  border-radius:22px;border:1px solid var(--r-line);background:var(--r-panel);color:var(--r-text);font:inherit;font-size:15px;
  cursor:pointer}
.reader .coach .skip:focus-visible{outline:2px solid var(--r-accent);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .reader .coach .ring{transition:left .3s ease,top .3s ease,width .3s ease,height .3s ease;
    animation:coach-breathe 1.6s ease-in-out infinite}
  @keyframes coach-breathe{50%{border-width:3px}}
}

@media (hover:none){.drop .hint{display:none}}
@media (prefers-reduced-motion:reduce){
  .reader .bar,.reader .toast,.reader .ribbon,.reader .speechbar{transition:none}
  /* The glow stays, still: the app's resting glow (0.012 of the core's 0.031). */
  .reader .glow::after{animation:none;opacity:.39}
}