/* The books reader (books.php?read=<id>, assets/book-reader.js; DESIGN.md §6d): ZWIBook's reader (Larry, 2026-10-07:
   "resurrect it"): its blue bar with its white icons, the book in its bordered box, Liberation Serif, its previous/next
   page buttons, its highlight colors, its windows (books.css has its fonts and colors: --zb-). Its own colors per theme
   (light, sepia, dark), one text column of about 66 characters, the bar sliding away as you read. The book's own stylesheet is kept (scoped to .zr-book by the script, its colors and fonts dropped), so these
   rules are its defaults: a book that sets its own margins, indents or centering keeps them. */

/* Literata (Google Fonts, OFL: fonts/Literata-OFL.txt), the reader's Book font: drawn for long reading on screens,
   with italics, and Greek for the classics. Latin, Latin Extended and Greek only. */
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("assets/fonts/Literata-Roman-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("assets/fonts/Literata-Roman-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("assets/fonts/Literata-Roman-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("assets/fonts/Literata-Roman-greek-ext.woff2") format("woff2");
  unicode-range: U+1F00-1FFF; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("assets/fonts/Literata-Italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("assets/fonts/Literata-Italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("assets/fonts/Literata-Italic-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("assets/fonts/Literata-Italic-greek-ext.woff2") format("woff2");
  unicode-range: U+1F00-1FFF; }

/* ---- Colors: the page's own, by theme (light, sepia, dark); the bar, sheets and menus follow ---- */
body.zr-app {
  --zr-bg: #ffffff; --zr-fg: #000000; --zr-muted: #6b6b70; --zr-rule: #e2e2e6; --zr-bar: var(--zb-head); --zr-card: #f4f4f9;
  --zr-link: #007bff; --zr-mark: #fff1a6; --zr-pn: gray; --zr-box: #cccccc; --zr-barh: 76px; --zr-toolh: 0px;
  /* ZWIBook's highlight colors (stylesheet.css .hl-…), and its brighter circles to choose them */
  --zr-hl-yellow: #fff495; --zr-hl-pink: #fdaaa3; --zr-hl-green: #a5d6a7; --zr-hl-blue: #a5d7ff; --zr-hl-purple: #f5baff;
  --zr-dot-yellow: #ffee58; --zr-dot-pink: #ff8a80; --zr-dot-green: #a5d6a7; --zr-dot-blue: #90caf9; --zr-dot-purple: #ce93d8;
}
@media (max-width: 520px) { body.zr-app { --zr-barh: 60px; } }
:root[data-theme="dark"] body.zr-app {
  --zr-bg: #15171a; --zr-fg: #e6e3dd; --zr-muted: #a09d98; --zr-rule: #37373b; --zr-card: #1c1f23;
  --zr-link: #5aa8ff; --zr-pn: #75736f; --zr-box: #3a3f46;
  --zr-hl-yellow: #5c5320; --zr-hl-pink: #5d2c43; --zr-hl-green: #29512a; --zr-hl-blue: #234260; --zr-hl-purple: #43325f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.zr-app {
    --zr-bg: #15171a; --zr-fg: #e6e3dd; --zr-muted: #a09d98; --zr-rule: #37373b; --zr-card: #1c1f23;
    --zr-link: #5aa8ff; --zr-pn: #75736f; --zr-box: #3a3f46;
    --zr-hl-yellow: #5c5320; --zr-hl-pink: #5d2c43; --zr-hl-green: #29512a; --zr-hl-blue: #234260; --zr-hl-purple: #43325f;
  }
}
/* Sepia: the Bible reader's paper (bible.css, .b-paper), and its halo. */
body.zr-app.zr-sepia {
  --zr-bg: #f6efe2; --zr-fg: #2c2621; --zr-muted: #807462; --zr-rule: #e0d5c2; --zr-card: #efe5d2;
  --zr-link: #7a4a1d; --zr-pn: #a39680; --zr-box: #d6c8ae;
  --halo: rgba(44,38,33,.10); --popover: #fbf6ec; --popover-edge: #d6c8ae; --accent: #9a5b22; --accent-soft: rgba(154,91,34,.12); --link: #7a4a1d; --text: #2c2621; --muted: #807462;
  --zr-hl-yellow: #f6e08a; --zr-hl-pink: #f3c6d2; --zr-hl-green: #cbe3b2; --zr-hl-blue: #c4dbef; --zr-hl-purple: #ddcdf0;
}

body.zr-app { background: var(--zr-bg); color: var(--zr-fg); overflow-x: clip; }
body.zr-app main.zr-main { padding: 0; margin: 0; max-width: none; }

/* ---- ZWIBook's bar: blue, the whole width, its contents within 800px; white icons with its square-ish hover (its
   .header-btn: 10px round the icon, corners 10px, white 30%); the title bold and white in the middle. Fixed, it slides
   away as you read on and comes back as you scroll up (as the Bible reader's). ---- */
.zr-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: calc(var(--zr-barh) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  background: var(--zb-head); color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1);
  transition: transform .22s ease; font-family: var(--zb-sans);
}
.zr-bar-in { display: flex; align-items: center; gap: 0; height: 100%; max-width: 800px; margin: 0 auto; padding: 0 10px; }
.zr-bar.zr-away { transform: translateY(-101%); }
.zr-bar .zr-back { flex: none; }
.zr-titles { flex: 1; min-width: 0; padding: 0 .5rem; text-align: center; }
.zr-title { font-weight: bold; font-size: 1.5em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.zr-sub { font-size: .75rem; line-height: 1.3; color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; min-height: 1em; }
.zr-btn, .zr-bar .zr-back {
  flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
  display: grid; place-items: center; border-radius: 10px; transition: background-color .1s; text-decoration: none; margin: 0;
}
.zr-bar .zr-btn::before, .zr-bar .zr-back::before { display: none; }                  /* (ZWIBook's hover, not the site's halo) */
@media (hover: hover) { .zr-bar .zr-btn:hover, .zr-bar .zr-back:hover, .zr-bar .zr-menu summary:hover { background-color: var(--zb-head-hover); } }
.zr-bar .zr-btn[aria-expanded="true"], .zr-bar .zr-btn[aria-pressed="true"], .zr-bar .zr-menu[open] summary { background-color: var(--zb-head-hover); }
.zr-zbi { width: 24px; height: 24px; display: block; }
.zr-bar .ic { color: #fff; }
.zr-aa span { position: relative; font-family: var(--zb-times); font-size: 1.3rem; font-weight: bold; letter-spacing: -.02em; line-height: 1; color: #fff; }
.zr-bar .zr-menu summary { width: 44px; height: 44px; color: #fff; border-radius: 10px; }
.zr-bar .zr-menu summary::before { display: none; }
.zr-bar .zr-menu nav { top: calc(44px + 10px); }
.zr-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none; }
.zr-progress span { display: block; height: 100%; width: 0; background: rgba(255,255,255,.75); }
@media (max-width: 700px) { .zr-wide-only { display: none !important; } .zr-title { font-size: 1.05em; } }
@media (max-width: 400px) {
  .zr-btn, .zr-bar .zr-back, .zr-bar .zr-menu summary { width: 40px; }
  .zr-bar-in { padding: 0 4px; }
  .zr-titles { padding: 0 .2rem; }
}
@media (max-width: 359px) {
  .zr-btn, .zr-bar .zr-back, .zr-bar .zr-menu summary { width: 36px; }
  .zr-zbi, .zr-bar .ic { width: 22px; height: 22px; }
}

/* ---- Find in the book: a line under the bar ---- */
.zr-find {
  position: fixed; left: 0; right: 0; top: calc(var(--zr-barh) + var(--zr-toolh) + env(safe-area-inset-top)); z-index: 19;
  display: flex; align-items: center; gap: .15rem; height: 56px;
  padding: 0 max(.5rem, env(safe-area-inset-right), calc(50% - 400px + 10px)) 0 max(.75rem, env(safe-area-inset-left), calc(50% - 400px + 10px));
  background: var(--zb-card); border-bottom: 1px solid var(--zr-box); box-shadow: 0 4px 8px rgba(0,0,0,.12); font-family: var(--zb-sans);
}
.zr-find .zr-btn { color: var(--zr-fg); border-radius: 50%; }
@media (hover: hover) { .zr-find .zr-btn:hover { --ib-halo: var(--halo); } }
.zr-find-form { flex: 1; min-width: 0; }
.zr-find input {
  width: 100%; font: inherit; font-size: 1rem; padding: 7px 10px; border-radius: 4px;
  border: 1px solid var(--zb-edge); background: var(--zb-field); color: var(--zr-fg);
}
.zr-find input:focus { outline: 2px solid var(--zb-blue); outline-offset: -1px; }
.zr-find-n { flex: none; min-width: 4.2rem; text-align: center; font-size: .82rem; color: var(--zr-muted); font-variant-numeric: tabular-nums; }
.zr-find .zr-close { color: var(--zr-muted); background: none; border: 0; cursor: pointer; }
@media (hover: hover) { .zr-find .zr-close:hover { background: var(--halo); } }
.zr-finding .zr-page { margin-top: calc(var(--zr-barh) + var(--zr-toolh) + 56px + env(safe-area-inset-top) + 24px); }
::highlight(zr-hit) { background-color: rgba(255, 196, 0, .38); }
::highlight(zr-hit-now) { background-color: #ff9a2e; color: #111; }

/* ---- Opening ---- */
.zr-loading { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 6rem 1.5rem 2rem; text-align: center; }
.zr-loading-t { font-family: var(--zb-sans); font-size: 1.1rem; color: var(--zr-fg); animation: zr-fade 750ms infinite; }   /* (ZWIBook's "Loading book...") */
@keyframes zr-fade { 0%, 100% { opacity: .1; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .zr-loading-t { animation: none; } }
.zr-meter { width: min(14rem, 70vw); height: 4px; border-radius: 2px; background: var(--zr-rule); overflow: hidden; }
.zr-meter span { display: block; height: 100%; width: 0; background: var(--zb-blue); transition: width .2s; }
.zr-fail { max-width: 26rem; line-height: 1.6; color: var(--zr-fg); }
.zr-fail a { color: var(--zr-link); }

/* ---- The page: ZWIBook's (#book-content): the book in a box with a thin grey edge, under the bar, within 800px; one
   column inside it, measured in the text's own size ---- */
.zr-page {
  position: relative;
  font-size: calc(var(--zr-size, 1) * 16px);
  max-width: 760px; margin: calc(var(--zr-barh) + var(--zr-toolh) + env(safe-area-inset-top) + 24px) auto 10px;
  padding: 10px 30px; border: 1px solid var(--zr-box); background: var(--zr-bg);      /* (ZWIBook: 10px, and 20px more by each paragraph) */
}
@media (max-width: 840px) { .zr-page { margin-left: 20px; margin-right: 20px; } }
@media (max-width: 520px) { .zr-page { margin: calc(var(--zr-barh) + var(--zr-toolh) + env(safe-area-inset-top) + 12px) 8px 2rem; padding: 10px 14px; } }
/* ZWIBook's fonts (its Font Styles), Liberation Serif its default; Literata, this reader's own, kept among them. */
body.zr-font-liberation .zr-page { font-family: "Liberation Serif", "Times New Roman", Times, serif; }
body.zr-font-times .zr-page { font-family: "Times New Roman", "Liberation Serif", Times, serif; }
body.zr-font-georgia .zr-page { font-family: Georgia, "Liberation Serif", "Times New Roman", Times, serif; }
body.zr-font-cambria .zr-page { font-family: Cambria, Caladea, "Liberation Serif", "Times New Roman", Georgia, Times, serif; }
body.zr-font-literata .zr-page { font-family: "Literata", Georgia, "Iowan Old Style", "Times New Roman", serif; font-optical-sizing: auto; }
body.zr-font-arial .zr-page { font-family: Arial, "Liberation Sans", Helvetica, sans-serif; }
body.zr-font-verdana .zr-page { font-family: Verdana, Geneva, Tahoma, sans-serif; }
body.zr-font-calibri .zr-page { font-family: Calibri, Carlito, "Helvetica Neue", Arial, sans-serif; }
body.zr-font-courier .zr-page { font-family: "Courier New", Courier, "Liberation Mono", monospace; }
body.zr-app { --zr-lh: normal; }                                   /* (ZWIBook: the browser's own) */
body.zr-sp-tight { --zr-lh: 1.1; }
body.zr-sp-loose { --zr-lh: 1.6; }

/* The book in parts, each laid out only near the screen (book-reader.js); room either side for page numbers and
   bookmarks in the margin, which its containment would otherwise clip. */
/* The room reaches the screen's edge at most (on a phone, a wider part would widen the page itself). */
.zr-chunk { --zr-gut: min(30px, calc((100vw - 100%) / 2)); padding: 0 var(--zr-gut); margin: 0 calc(-1 * var(--zr-gut)); }
@media (max-width: 520px) { .zr-chunk { --zr-gut: 1rem; } }
.zr-big .zr-chunk { content-visibility: auto; contain-intrinsic-size: auto 2400px; }

/* ---- The title, and About this edition ---- */
.zr-head { text-align: center; margin: 0 0 1.6rem; }
.zr-h1 { font-size: 1.85em; font-weight: 400; line-height: 1.2; margin: 0 0 .35em; text-wrap: balance; letter-spacing: .005em; }
.zr-by { margin: 0; font-size: 1em; color: var(--zr-muted); font-variant: small-caps; letter-spacing: .06em; }
.zr-credit { margin: .8rem auto 0; max-width: 30em; font-size: .78em; line-height: 1.5; color: var(--zr-muted); }
.zr-about {
  margin: 0 0 2.6rem; border: 1px solid var(--zr-box); border-radius: 8px; background: var(--zr-card);
  font-family: var(--zb-sans); font-size: .9rem; line-height: 1.5;
}
.zr-about > summary, .zr-pg > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1rem;
  color: var(--zr-link); border-radius: 8px; font-variant: small-caps; font-size: 1.05em;              /* (ZWIBook's "show front-matter") */
}
.zr-about > summary::-webkit-details-marker, .zr-pg > summary::-webkit-details-marker { display: none; }
.zr-about > summary::before, .zr-pg > summary::before { content: "›"; font-size: 1.2rem; line-height: 1; transition: transform .15s; width: .7rem; }
.zr-about[open] > summary::before, .zr-pg[open] > summary::before { transform: rotate(90deg); }
@media (hover: hover) { .zr-about > summary:hover, .zr-pg > summary:hover { background: var(--halo); } }
.zr-about-body { padding: 0 1rem .9rem; }
.zr-about dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: .2rem 0 .6rem; }
.zr-about dt { color: var(--zr-muted); }
.zr-about dd { margin: 0; overflow-wrap: anywhere; }
.zr-about a { color: var(--zr-link); }
.zr-pg { border-top: 1px solid var(--zr-rule); }
.zr-pg > summary { padding-left: 0; }
.zr-pg-body { font-size: .82rem; color: var(--zr-muted); padding: 0 0 .6rem; max-height: 50vh; overflow: auto; }
.zr-pg-body pre { white-space: pre-wrap; font-family: inherit; margin: 0; }
.zr-pg-body * { max-width: 100%; }
.zr-src { margin: .4rem 0 0; }
@media (max-width: 520px) { .zr-about dl { grid-template-columns: 1fr; gap: 0; } .zr-about dd { margin-bottom: .35rem; } }

/* ---- The book's text: Project Gutenberg's own conventions, set well ---- */
.zr-book {
  line-height: var(--zr-lh); overflow-wrap: break-word; font-kerning: normal; font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; hanging-punctuation: first;
}
.zr-book :where(p) { margin: 0 0 .85em; }
:where(body.zr-justify) .zr-book :where(p) { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.zr-book :where(h1, h2, h3, h4, h5, h6) {
  text-align: center; line-height: 1.25; margin: 2.2em 0 .9em; text-wrap: balance; color: inherit; break-after: avoid; font-family: inherit;
}
.zr-book :where(h1) { font-size: 1.7em; font-weight: 400; letter-spacing: .01em; }
.zr-book :where(h2) { font-size: 1.32em; font-weight: 400; margin-top: 3em; letter-spacing: .01em; }
.zr-book :where(h3) { font-size: 1.12em; font-weight: 500; }
.zr-book :where(h4) { font-size: 1em; font-weight: 600; }
.zr-book :where(h5, h6) { font-size: .92em; font-weight: 600; letter-spacing: .03em; }
.zr-book a { color: var(--zr-link); text-decoration: none; }
.zr-book a[href]:hover { text-decoration: underline; text-underline-offset: .15em; }
.zr-book :where(hr) { border: 0; border-top: 1px solid var(--zr-rule); width: 28%; margin: 2.2em auto; }
.zr-book :where(blockquote) { margin: 1.2em 1.6em; font-size: .97em; }
.zr-book :where(ul, ol) { padding-left: 1.6em; }
.zr-book :where(li) { margin: .2em 0; }
.zr-book :where(dt) { font-weight: 600; }
.zr-book :where(dd) { margin: 0 0 .5em 1.6em; }
.zr-book sup, .zr-book sub { line-height: 0; }
.zr-book .zb-fnanchor, .zr-book a.zb-noteref, .zr-book a:has(> sup) { text-decoration: none; }
.zr-book :where(.zb-footnote, .zb-footnotes, .zb-fn, .zb-endnote, .zb-notes) { font-size: .9em; }
.zr-book :where(pre) { white-space: pre-wrap; font-family: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .8em; line-height: 1.45; overflow-x: auto; }
.zr-book :where(code, tt, kbd, samp) { font-family: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .88em; }
.zr-book .zr-center, .zr-book .zb-center { text-align: center !important; }                   /* (ZWIBook's: align="center" made a class) */
.zr-book :where(.zb-right) { text-align: right; }
.zr-book :where(.zb-smcap, .zb-sc, .zb-smallcaps, .zb-small-caps, .zb-caps) { font-variant: small-caps; }
.zr-book :where(.zb-gesperrt, .zb-spaced) { letter-spacing: .12em; }
.zr-book :where(.zb-transnote, .zb-tnote, .zb-tn, .zb-trans-note) {
  background: var(--zr-card); border: 1px solid var(--zr-rule); border-radius: 10px; padding: .6em 1em; margin: 1.5em 0; font-size: .88em;
}
/* Pictures: within the column, centered, never stretched; a picture is opened full-size in the viewer. */
.zr-book img { max-width: 100% !important; height: auto !important; }
.zr-book img.zr-img { cursor: zoom-in; border-radius: 2px; }
.zr-book img.zr-img:not([src]) { min-height: 3rem; }
.zr-book :where(.zb-figcenter, .zb-fig, .zb-figure, figure, .zb-illustration, .zb-image, .zb-imgcenter) { text-align: center; margin: 1.6em auto; max-width: 100%; }
.zr-book :where(.zb-figleft) { float: left; margin: .3em 1.2em .6em 0; max-width: 50%; }
.zr-book :where(.zb-figright) { float: right; margin: .3em 0 .6em 1.2em; max-width: 50%; }
.zr-book :where(figcaption, .zb-caption) { font-size: .88em; color: var(--zr-muted); text-align: center; line-height: 1.45; }
.zr-book .zr-noimg { display: block; text-align: center; color: var(--zr-muted); font-style: italic; margin: 1em 0; }
:root[data-theme="dark"] .zr-book img.zr-img { filter: brightness(.92); }
/* Tables: within the column, a wide one scrolled in place (never the page). */
.zr-table { overflow-x: auto; max-width: 100%; margin: 1em 0; }
.zr-book :where(table) { border-collapse: collapse; margin: 0 auto; max-width: 100%; }
.zr-book :where(td, th) { padding: .15em .5em; vertical-align: top; }
/* Verse: Gutenberg's poetry classes left as the book sets them; never justified. */
.zr-book :is(.zb-poem, .zb-poetry, .zb-stanza, .zb-verse, .zb-poetry-container) p { text-align: inherit; hyphens: manual; }
.zr-book :where(.zb-poem, .zb-poetry) { margin: 1.2em 0; }
.zr-book :where(.zb-stanza) { margin: 0 0 1em; }
/* A plain-text book (book-reader.js renderTxt): verse line by line, indents as printed. */
.zr-txt .zr-verse { margin: 0 0 1em; }
.zr-txt .zr-l { display: block; padding-left: 2em; text-indent: -2em; }
.zr-txt .zr-i1 { padding-left: 2.6em; } .zr-txt .zr-i2 { padding-left: 3.2em; } .zr-txt .zr-i3 { padding-left: 3.8em; } .zr-txt .zr-i4 { padding-left: 4.4em; }
.zr-txt .zr-i5 { padding-left: 5em; } .zr-txt .zr-i6 { padding-left: 5.6em; } .zr-txt .zr-i7 { padding-left: 6.2em; } .zr-txt .zr-i8 { padding-left: 6.8em; }
.zr-txt .zr-i9 { padding-left: 7.4em; } .zr-txt .zr-i10 { padding-left: 8em; } .zr-txt :is(.zr-i11, .zr-i12, .zr-i13, .zr-i14, .zr-i15, .zr-i16, .zr-i17, .zr-i18, .zr-i19, .zr-i20) { padding-left: 9em; }
.zr-txt h1 { margin-top: .5em; }
.zr-txt .zr-byline { text-align: center; font-variant: small-caps; letter-spacing: .05em; color: var(--zr-muted); }
/* The printed book's page numbers: small, quiet, in the right margin on a wide screen; none if switched off. */
.zr-book .zr-pn {
  float: right; clear: right; position: static !important; display: inline !important;
  margin: .25em 0 .25em .6em !important; padding: 0 !important; border: 0 !important; background: none !important;
  font: normal normal 400 .62rem/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: var(--zr-pn) !important; text-indent: 0 !important; letter-spacing: 0 !important; user-select: none; -webkit-user-select: none;
}
.zr-book .zr-pn a { color: inherit !important; }
@media (min-width: 900px) {
  .zr-book .zr-pn { float: none; position: absolute !important; right: 1.2rem; margin: .35em 0 0 !important; }
}
body.zr-nopn .zr-book .zr-pn { display: none !important; }

/* ---- Bookmarks and highlights ---- */
.zr-book .zr-bm { position: relative; }
.zr-book .zr-bm::before {
  content: ""; position: absolute; left: -1.35rem; top: .25em; width: .6rem; height: 1rem; background: #ff0101;   /* (ZWIBook's filled bookmark) */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); text-indent: 0;
}
.zr-bmk {
  position: absolute; z-index: 5; width: 30px; height: 30px; padding: 0; border: 0; background: none; color: var(--zr-muted); opacity: .55;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
}
.zr-bi { width: 16px; height: 16px; fill: currentColor; }
.zr-bi-f { display: none; }
.zr-bmk:hover { opacity: 1; background: var(--halo); color: var(--zr-fg); }
.zr-bmk.on { opacity: 1; color: #ff0101; }
.zr-bmk.on .zr-bi-o { display: none; } .zr-bmk.on .zr-bi-f { display: inline; }
mark.zr-hl { color: inherit; border-radius: 2px; padding: .02em 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; cursor: pointer; }
.zr-hl-yellow { background: var(--zr-hl-yellow); } .zr-hl-pink { background: var(--zr-hl-pink); } .zr-hl-green { background: var(--zr-hl-green); }
.zr-hl-blue { background: var(--zr-hl-blue); } .zr-hl-purple { background: var(--zr-hl-purple); }
mark.zr-has-note { text-decoration: underline dotted; text-decoration-color: var(--zr-muted); text-underline-offset: .2em; }
@keyframes zr-flash { 0%, 60% { outline: 2px solid var(--accent); outline-offset: 2px; } 100% { outline: 2px solid transparent; outline-offset: 2px; } }
mark.zr-flash { animation: zr-flash 1.6s ease-out; }

/* The highlighter, over (or, on a phone, under) a selection. */
.zr-sel {
  position: fixed; z-index: 45; display: flex; align-items: center; gap: 0; padding: 0 6px; height: 52px;
  background: var(--zb-card); border: 2px solid var(--zb-drop-edge); border-radius: 5px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,.3), 0 10px 30px 0 rgba(0,0,0,.25); font-family: var(--zb-sans); color: var(--zr-fg);   /* (ZWIBook's #highlightModal) */
}
.zr-dot { position: relative; width: 36px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.zr-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: inherit; }
.zr-dot { background-clip: content-box; }
.zr-sel .zr-dot, .zr-filter .zr-dot { background-color: transparent; }
.zr-sel .zr-dot::after, .zr-filter .zr-dot::after { border: 1px solid #aaa; }
.zr-dot { width: 38px; }
.zr-dot.zr-hl-yellow::after { background: var(--zr-dot-yellow); } .zr-dot.zr-hl-pink::after { background: var(--zr-dot-pink); } .zr-dot.zr-hl-green::after { background: var(--zr-dot-green); }
.zr-dot.zr-hl-blue::after { background: var(--zr-dot-blue); } .zr-dot.zr-hl-purple::after { background: var(--zr-dot-purple); }
.zr-dot.on::after, .zr-dot[aria-pressed="true"]::after { box-shadow: 0 0 0 2px var(--zb-card), 0 0 0 4px var(--zb-blue); }
@media (hover: hover) { .zr-dot:hover::after { transform: scale(1.12); } }
.zr-sel-sep { width: 1px; height: 24px; background: var(--zb-edge); margin: 0 .3rem; }
.zr-sel-b { display: inline-flex; align-items: center; gap: .3rem; height: 40px; padding: 0 .6rem; border: 0; border-radius: 20px; background: none; color: inherit; cursor: pointer; font-size: .9rem; }
.zr-sel-b .ic { width: 20px; height: 20px; }
@media (hover: hover) { .zr-sel-b:hover { background: var(--halo); } }

/* ---- Sheets: under their button on a wide screen; the full width from the foot on a phone (DESIGN.md §5a) ---- */
.zr-scrim { position: fixed; inset: 0; z-index: 38; background: rgba(0,0,0,.32); }
.zr-sheet {
  position: fixed; z-index: 40; width: min(26rem, calc(100vw - 16px)); max-height: 70vh;
  display: flex; flex-direction: column; overflow: hidden;
  /* ZWIBook's windows (its #hn-highlightsNotesModal, its drop-downs): white, a 2px grey edge, corners 5px, a deep shadow */
  background: var(--zb-card); color: var(--zr-fg); border: 2px solid var(--zb-drop-edge); border-radius: 5px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,.3), 0 10px 30px 0 rgba(0,0,0,.25); font-family: var(--zb-sans); font-size: .96rem; line-height: 1.45;
  --text: var(--zr-fg); --muted: var(--zb-dim); --link: var(--zb-link); --accent: var(--zb-blue); --accent-soft: rgba(0,123,255,.12); --divider: var(--zb-edge); --popover-edge: var(--zb-edge);
}
.zr-sheet[hidden] { display: none; }
.zr-sheet.zr-bottom {
  left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; max-height: 82dvh !important;
  border-radius: 16px 16px 0 0; border-width: 1px 0 0; padding-bottom: env(safe-area-inset-bottom);
  animation: zr-up .2s ease-out;
}
@keyframes zr-up { from { transform: translateY(30%); opacity: .4; } to { transform: none; opacity: 1; } }
.zr-sheet-head { flex: none; display: flex; align-items: center; gap: .5rem; padding: .2rem .25rem .2rem 1rem; border-bottom: 1px solid var(--zb-edge); background: var(--zb-tabs); }
.zr-sheet-head h2 { flex: 1; margin: 0; font-size: 1.05rem; font-weight: bold; font-family: var(--zb-sans); }
.zr-sheet .zr-close, .zr-lightbox .zr-close { background: none; border: 0; color: var(--muted); cursor: pointer; }
@media (hover: hover) { .zr-sheet .zr-close:hover { background: var(--halo); color: var(--text); } }
.zr-sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: .3rem 0 .6rem; }
.zr-none { margin: .6rem 1rem; color: var(--muted); }
.zr-dim { color: var(--muted); font-weight: 400; }

/* Contents */
.zr-toc { list-style: none; margin: 0; padding: 0; }
.zr-toc a { display: flex; align-items: center; min-height: 44px; padding: .45rem 1rem; color: var(--text); text-decoration: none; line-height: 1.3; }
.zr-toc .zr-d1 a { padding-left: 2rem; font-size: .93rem; }
.zr-toc .zr-d2 a { padding-left: 3rem; font-size: .88rem; color: var(--muted); }
@media (hover: hover) { .zr-toc a:hover { background: var(--halo); } }
.zr-toc .zr-cur a { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* Text and colors */
.zr-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 48px; padding: .3rem 1rem; }
.zr-row.zr-col { flex-direction: column; align-items: stretch; gap: .35rem; padding-top: .5rem; padding-bottom: .5rem; }
.zr-lab { color: var(--muted); font-size: .85rem; }
.zr-size { display: flex; align-items: center; gap: .25rem; }
.zr-size button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; color: var(--link); font-weight: 600; font-size: 1.05rem; cursor: pointer; }
.zr-size button:first-child { font-size: .88rem; }
.zr-size button:disabled { color: var(--muted); opacity: .45; cursor: default; }
@media (hover: hover) { .zr-size button:not(:disabled):hover { background: var(--halo); } }
.zr-size-n { min-width: 3.2rem; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .9rem; }
.zr-seg { display: flex; gap: 0; border: 1px solid var(--popover-edge); border-radius: 10px; overflow: hidden; }
.zr-seg button {
  flex: 1; min-width: 0; min-height: 44px; padding: .3rem .25rem; border: 0; border-left: 1px solid var(--popover-edge); background: none; color: var(--text);
  cursor: pointer; font-size: .9rem; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
}
.zr-seg button:first-child { border-left: 0; }
@media (hover: hover) { .zr-seg button:hover { background: var(--halo); } }
.zr-seg button[aria-checked="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.zr-sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(128,128,128,.55); flex: none; }
.zr-sw-light { background: #fff; } .zr-sw-sepia { background: #f6efe2; } .zr-sw-dark { background: #19191b; }
.zr-sw-auto { background: linear-gradient(135deg, #fff 50%, #19191b 50%); }
.zr-check { cursor: pointer; }
.zr-check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--accent); }

/* Bookmarks and highlights */
.zr-tabs { display: flex; align-items: stretch; border-bottom: 1px solid var(--zb-edge); background: var(--zb-tabs); }   /* (ZWIBook's .hn-tabs) */
.zr-tabs button { flex: 1; padding: 12px 10px 10px; border: 0; background: inherit; color: var(--zr-fg); cursor: pointer; font-size: 15px; min-height: 44px; font-family: var(--zb-sans); transition: .3s; }
.zr-tabs button:hover { background: var(--zb-tab-hover); }
.zr-tabs button[aria-selected="true"] { background: var(--zb-blue); color: #fff; font-weight: bold; }
.zr-tabs button[aria-selected="true"] .zr-dim { color: rgba(255,255,255,.85); }
.zr-wide {
  display: flex; align-items: center; gap: .55rem; width: calc(100% - 2rem); margin: .7rem 1rem .3rem; min-height: 44px; padding: .4rem .85rem;
  border: 1px solid var(--popover-edge); border-radius: 10px; background: none; color: var(--link); cursor: pointer; font-size: .95rem;
}
.zr-wide .ic { width: 20px; height: 20px; }
@media (hover: hover) { .zr-wide:hover { background: var(--halo); } }
.zr-list { list-style: none; margin: .2rem 0 0; padding: 0; }
.zr-list li { display: flex; align-items: flex-start; border-top: 1px solid var(--divider); }
.zr-list li:first-child { border-top: 0; }
.zr-list li > a { flex: 1; min-width: 0; display: flex; gap: .7rem; padding: .6rem .2rem .6rem 1rem; color: var(--text); text-decoration: none; line-height: 1.4; }
@media (hover: hover) { .zr-list li > a:hover { background: var(--halo); } }
.zr-pct { flex: none; width: 2.6rem; color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; padding-top: .1rem; }
.zr-snip { min-width: 0; font-family: "Literata", Georgia, serif; font-size: .9rem; }
.zr-note { display: block; margin-top: .3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: .84rem; color: var(--muted); white-space: pre-wrap; }
.zr-list .zr-del { margin: .2rem .2rem 0 0; color: var(--muted); }
.zr-filter { display: flex; align-items: center; gap: 0; padding: .3rem .6rem 0; }
.zr-filter .zr-dot { width: 34px; }
.zr-all { min-height: 36px; padding: 0 .7rem; border: 1px solid var(--popover-edge); border-radius: 18px; background: none; color: var(--text); cursor: pointer; font-size: .85rem; margin-right: .2rem; }
.zr-all[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
.zr-copy { margin-left: auto; min-height: 36px; padding: 0 .7rem; border: 0; border-radius: 18px; background: none; color: var(--link); cursor: pointer; font-size: .88rem; }
@media (hover: hover) { .zr-copy:hover, .zr-all:hover { background: var(--halo); } }

/* A note: the highlight, the note, Save */
.zr-noteq { margin: .6rem 1rem; font-family: "Literata", Georgia, serif; font-size: .92rem; line-height: 1.5; }
.zr-notebox { display: block; width: calc(100% - 2rem); margin: 0 1rem; font: inherit; padding: .6rem .75rem; border-radius: 10px; border: 1px solid var(--popover-edge); background: var(--zr-bg); color: var(--zr-fg); resize: vertical; }
.zr-notebox:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.zr-notebtns { display: flex; justify-content: flex-end; gap: .5rem; padding: .6rem 1rem .2rem; }
.zr-primary { min-height: 40px; padding: .35rem 1.1rem; border: 0; border-radius: 5px; background: var(--zb-blue); color: #fff; cursor: pointer; }
.zr-primary:hover { background: var(--zb-blue-dark); }
.zr-plain { min-height: 40px; padding: .35rem .9rem; border: 0; border-radius: 20px; background: none; color: var(--danger); cursor: pointer; }
@media (hover: hover) { .zr-plain:hover { background: var(--halo); } }

/* A footnote, opened where it's cited */
.zr-fn { padding: .3rem 1rem 0; font-family: "Literata", Georgia, serif; font-size: .95rem; line-height: 1.55; color: var(--text); }
.zr-fn > :first-child { margin-top: 0; }
.zr-fn-go { margin: .2rem 1rem 0; font-size: .88rem; }
.zr-fn-go a { color: var(--link); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }

/* ---- The end ---- */
.zr-end { margin: 3.5rem 0 0; text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: .92rem; }
.zr-fin { font-size: 1.8rem; color: var(--zr-muted); margin: 0 0 1rem; font-family: "Literata", Georgia, serif; }
.zr-endnav { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.zr-endnav a { color: var(--zr-link); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }

/* ---- Page turns at the column's edges (ZWIBook's previous/next page buttons), on a computer ---- */
.zr-turn {
  position: fixed; top: 50%; z-index: 15; width: 50px; height: 50px; margin-top: -25px; padding: 0; border: 0; border-radius: 50%;
  display: none; place-items: center; background: none; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  font-size: calc(var(--zr-size, 1.16) * 1rem);
}
.zr-turn img { width: 50px; height: 50px; grid-area: 1 / 1; }
.zr-turn .zr-fill, .zr-turn:hover .zr-un { display: none; }
.zr-turn:hover .zr-fill { display: block; }
/* ZWIBook's previous / next page buttons: on the box's left and right edges, shown as the pointer comes near. */
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) {
  .zr-ready .zr-turn { display: grid; }
  .zr-turn-prev { left: calc(50% - min(17em + 2.5rem, 380px) - 26px); }
  .zr-turn-next { right: calc(50% - min(17em + 2.5rem, 380px) - 26px); }
  .zr-near-prev .zr-turn-prev, .zr-near-next .zr-turn-next, .zr-turn:hover { opacity: 1; visibility: visible; }
}

/* ---- The picture viewer ---- */
.zr-lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(10,10,12,.9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding: 3.5rem 1rem 1.5rem; }
.zr-lightbox[hidden] { display: none; }
.zr-lightbox img { max-width: 100%; max-height: calc(100dvh - 7rem); object-fit: contain; background: #fff; border-radius: 3px; }
.zr-lightbox p { margin: 0; color: #e8e8e8; font-size: .92rem; text-align: center; max-width: 40rem; }
.zr-lightbox .zr-close { position: absolute; top: calc(.5rem + env(safe-area-inset-top)); right: .5rem; color: #fff; }
.zr-lightbox .zr-close:hover { background: rgba(255,255,255,.14); }

@media print {
  .zr-bar, .zr-find, .zr-turn, .zr-bmk, .zr-about, .zr-end, .zr-sheet, .zr-sel { display: none !important; }
  .zr-page { padding-top: 0; }
  .zr-chunk { content-visibility: visible; }
}
.zr-book .zr-gap { height: 1.2em; margin: 0; padding: 0; }
.zr-front > .zr-credit { margin: 0 0 1rem; text-align: center; }
@media (max-width: 520px) { .zr-book .zr-bm::before { left: -.95rem; width: .5rem; } }
.zr-book .zr-pl { display: block; padding-left: 1.5em; text-indent: -1.5em; }
.zr-book .zr-pl [class*="dropcap"] { float: none !important; font-size: 1em !important; margin: 0 !important; line-height: inherit !important; }
.zr-txt .zr-tp { margin: .3em 0 .8em; }
.zr-txt .zr-tp .zr-l { padding-left: 0; text-indent: 0; }
.zr-credit .bk-ksf { display: table; margin: 0 auto .4rem; }

/* ---- ZWIBook's font list (its Font Styles window): the families in their own faces, grouped under red labels ---- */
.zr-fonts { gap: 0 !important; padding-top: .2rem; }
.zr-font-label { margin: 5px 0 3px; font-weight: bold; color: red; font-size: .9rem; }
:root[data-theme="dark"] .zr-font-label { color: #ff6b6b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zr-font-label { color: #ff6b6b; } }
.zr-fl-0 { font-family: "Liberation Serif", "Times New Roman", Times, serif; } .zr-fl-1 { font-family: Arial, "Liberation Sans", sans-serif; } .zr-fl-2 { font-family: "Courier New", Courier, monospace; }
.zr-fonts hr { width: calc(100% - 20px); margin: 6px 10px; border: 0; border-top: 1px solid var(--zb-edge); }
.zr-fo { display: block; width: 100%; min-height: 40px; padding: 5px 20px 5px 5px; border: 0; border-radius: 3px; background: none; color: var(--zr-fg); text-align: left; font-size: 1rem; cursor: pointer; }
.zr-fo:hover { background: var(--zb-tab-hover); }
.zr-fo[aria-checked="true"] { background: var(--zb-blue); color: #fff; }
.zr-f-liberation { font-family: "Liberation Serif", "Times New Roman", Times, serif; } .zr-f-times { font-family: "Times New Roman", "Liberation Serif", Times, serif; }
.zr-f-georgia { font-family: Georgia, "Liberation Serif", serif; } .zr-f-cambria { font-family: Cambria, Caladea, "Liberation Serif", Georgia, serif; }
.zr-f-literata { font-family: "Literata", Georgia, serif; } .zr-f-arial { font-family: Arial, "Liberation Sans", Helvetica, sans-serif; }
.zr-f-verdana { font-family: Verdana, Geneva, Tahoma, sans-serif; } .zr-f-calibri { font-family: Calibri, Carlito, "Helvetica Neue", Arial, sans-serif; }
.zr-f-courier { font-family: "Courier New", Courier, "Liberation Mono", monospace; }
/* The sheets' other controls in ZWIBook's blue. */
.zr-seg button[aria-checked="true"] { background: var(--zb-blue); color: #fff; font-weight: bold; }
.zr-check input { accent-color: var(--zb-blue); }
.zr-size button { color: var(--zb-link); }

/* ZWIBook's highlight window's buttons: "edit note" (its icon in a white circle) and delete (a red ring, struck through). */
.zr-sel .zr-editnote { width: 40px; padding: 0; justify-content: center; }
.zr-editnote img { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid #ccc; padding: 2px; }
.zr-delcircle { position: relative; width: 40px; padding: 0; }
.zr-delcircle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 27px; height: 27px; margin: -15.5px 0 0 -15.5px; border-radius: 50%; border: 2px solid red; background: #fff; }
.zr-delcircle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 30px; margin: -15px 0 0 -1px; background: red; transform: rotate(45deg); }
/* The book's text: the system's long-press callout off where the browser allows it (iOS links and pictures). */
.zr-book { -webkit-touch-callout: none; }

/* ZWIBook's reader, the rest: no subtitle or progress line in its bar (the title's tooltip has the chapter and how far);
   its footer in the box: "About this reader software", the word count. */
.zr-sub, .zr-progress { display: none !important; }
.zr-loading { align-items: flex-start; justify-content: flex-start; min-height: 0; padding: calc(var(--zr-barh) + var(--zr-toolh) + 24px + 10px) 0 0 20px; max-width: 800px; margin: 0 auto; }
.zr-end { margin: 2rem 0 0; font-family: inherit; text-align: left; }
.footer-container { display: flex; justify-content: space-between; align-items: center; padding: 0 10px 10px 0; font-size: 1.2em; color: var(--zr-fg); }
.about-link-wrapper-reader { position: relative; display: inline-block; padding-left: 30px; font-size: 1rem; }
.about-link-wrapper-reader a { color: var(--zr-link); text-decoration: underline; }
.word-count { display: block; text-align: right; padding-right: 20px; font-size: 1rem; }
@media (max-width: 520px) { .about-link-wrapper-reader { padding-left: 0; } .word-count { padding-right: 0; } }
.zr-bar .zr-menu summary.zr-btn { display: grid; }

.zr-bar [data-act="save"][aria-pressed] { background-color: transparent; }                 /* (its icon says which: add or remove) */
@media (hover: hover) { .zr-bar [data-act="save"]:hover { background-color: var(--zb-head-hover); } }
/* ZWIBook's "show front-matter": a small-caps link at the top of the box; open, the edition's facts in a card */
.zr-about:not([open]) { border: 0; background: none; margin-bottom: 1.5rem; }
.zr-about:not([open]) > summary { padding: 0; min-height: 32px; font-size: 1rem; font-family: var(--zb-times); }
.zr-about > summary::before { display: none; }
.zr-about > summary:hover { text-decoration: underline; background: none !important; }

/* ---- The bar's tools (Larry, 2026-10-07: a phone toolbar). On a wide screen one bar, as ZWIBook's: ←, search, the
   title, the rest (the two wrappers display: contents). Below 600px the bar keeps ← and the title (up to two lines; the
   full title in the tooltip, zb-menu.js), and its icons, in the same order, are a strip below it in a lighter blue,
   evenly spaced, each at least 44px; as you read on the strip slides up under the bar (book-reader.js's zr-away), and
   comes back as you scroll up. ---- */
.zr-bar-in > .zr-back { order: 0; }
.zr-tools > [data-act="find"] { order: 1; }
.zr-bar-in > .zr-titles { order: 2; }
.zr-tools > * { order: 3; }
.zr-tools-clip, .zr-tools { display: contents; }
@media (max-width: 599px) {
  body.zr-app { --zr-barh: 56px; --zr-toolh: 48px; }
  .zr-bar.zr-away { transform: none; }
  .zr-bar-in { padding: 0 6px 0 4px; }
  .zr-titles { padding: 0 .4rem 0 .25rem; }
  .zr-title { font-size: 1.05em; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .zr-tools-clip { display: block; position: absolute; left: 0; right: 0; top: 100%; height: calc(var(--zr-toolh) + 8px); overflow: hidden; pointer-events: none; }
  .zr-tools-clip:has(.zr-menu[open]) { overflow: visible; }                      /* (its ⋮ menu drops below the strip) */
  .zr-tools {
    display: flex; height: var(--zr-toolh); padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
    background: var(--zb-tool); box-shadow: 0 2px 4px rgba(0,0,0,.15); pointer-events: auto; transition: transform .22s ease;
  }
  .zr-bar.zr-away .zr-tools { transform: translateY(-100%); box-shadow: none; }
  .zr-tools > * { flex: 1 1 0; min-width: 44px; }
  .zr-tools .zr-btn, .zr-tools .zr-menu summary, .zr-tools .zr-menu summary.zr-btn { width: 100%; height: var(--zr-toolh); border-radius: 0; }
  .zr-tools .zr-wide-only { display: grid !important; }
  .zr-tools .zr-zbi, .zr-tools .ic { width: 24px; height: 24px; }
  .zr-tools .zr-menu nav { top: calc(var(--zr-toolh) + 4px); }
}