/* Paper mode - shared pieces (2026-10-12). Turned on by <html class="paper"> from /assets/mbh-paper.js.
   Each page carries its own "html.paper ..." overrides next to its normal styles; this file holds the
   palette, the Paper mode pill, and the shared page header / floating pills. */
:root{--pp-bg:#f3eee2;--pp-card:#ebe4d3;--pp-card2:#e4dcc8;--pp-ink:#2a2620;--pp-ink2:#5c5548;--pp-line:rgba(60,48,28,.2);
  --pp-accent:#7a5c1c;--pp-btn:#2f2a22;--pp-btn-ink:#f6f1e5}
html.paper{color-scheme:light}
html.paper body{background:var(--pp-bg)!important;color:var(--pp-ink)}
/* pictures: a touch quieter, like ink on paper - still in colour for children */
html.paper .pp-soft{filter:saturate(.82) contrast(.96)}
/* Black & white pictures (Paper mode only): greyscale with a warm ink tint so they sit on the paper.
   Pages add their own picture selectors to the rule at the bottom of their paper block. */
html.paper.paper-bw .pp-soft{filter:grayscale(1) sepia(.12) contrast(1.06)}

/* ── The Paper mode pill ─────────────────────────────────────────────── */
.paper-pill{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 11px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(232,201,122,.55);background:rgba(255,255,255,.06);color:#f0eef8;font:800 13px Nunito,system-ui,sans-serif;
  white-space:nowrap;flex-shrink:0;transition:background .15s,border-color .15s,color .15s;-webkit-tap-highlight-color:transparent}
.paper-pill:hover{background:rgba(232,201,122,.16);border-color:#e8c97a}
.paper-pill svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.paper-pill .pp-page{transform-box:fill-box;transform-origin:20% 100%;animation:ppTilt 5.2s ease-in-out 1.4s infinite}
.paper-pill .pp-lines{animation:ppLines 5.2s ease-in-out 1.4s infinite}
@keyframes ppTilt{0%,72%,100%{transform:none}78%{transform:rotate(-9deg) translateY(-1px)}86%{transform:rotate(4deg)}92%{transform:none}}
@keyframes ppLines{0%,72%,100%{opacity:1}80%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.paper-pill .pp-page,.paper-pill .pp-lines{animation:none}}
html.paper .paper-pill{background:var(--pp-btn)!important;border-color:var(--pp-btn)!important;color:var(--pp-btn-ink)!important}
html.paper .paper-pill:hover{background:#463e32!important}
@media(max-width:600px){.paper-pill{height:34px;padding:0 11px 0 9px;font-size:12.5px}}

/* ── Shared page header pill (book page, shelf) ──────────────────────── */
html.paper header.mbh-ph{background:rgba(243,238,226,.94)!important;box-shadow:0 4px 16px rgba(60,48,28,.12)!important;border:1px solid var(--pp-line)!important}
html.paper header.mbh-ph::before,html.paper header.mbh-ph::after{display:none}
html.paper header.mbh-ph .mbh-ph-back{background:var(--pp-btn)!important;color:var(--pp-btn-ink)!important;box-shadow:none}
html.paper header.mbh-ph .mbh-ph-brand,html.paper header.mbh-ph .mbh-ph-brand span{color:var(--pp-ink)!important}
html.paper header.mbh-ph .mbh-ph-brand em{color:var(--pp-accent)!important}
html.paper header.mbh-ph .mbh-ph-brand img{border-color:var(--pp-line)}
html.paper header.mbh-ph .mbh-ph-links a{color:var(--pp-ink2)!important}
html.paper header.mbh-ph .mbh-ph-links a:hover,html.paper header.mbh-ph .mbh-ph-links a[aria-current]{color:var(--pp-ink)!important}
html.paper header.mbh-ph .mbh-ph-links a::after{background:var(--pp-ink)}
html.paper header.mbh-ph .mbh-ph-links i{background:var(--pp-ink2)}
html.paper header.mbh-ph .mbh-ph-extra .nbtn,html.paper header.mbh-ph .mbh-ph-extra a,html.paper header.mbh-ph .mbh-ph-extra button:not(.paper-pill){background:transparent!important;border-color:var(--pp-line)!important;color:var(--pp-ink)!important}
header.mbh-ph .mbh-ph-extra .paper-pill{padding:0 14px 0 11px}

/* ── Floating Share / Feedback pills ─────────────────────────────────── */
html.paper #mbh-share-btn,html.paper #mbh-fb-btn{background:var(--pp-card)!important;color:var(--pp-ink)!important;border:1px solid var(--pp-line)!important;box-shadow:0 3px 12px rgba(60,48,28,.18)!important}

/* ── Reader "Aa" menu: text size + Bright/Paper (reader.html + html-reader.html) ── */
.aa-wrap{position:relative;flex-shrink:0}
.aa-ic{font:700 15px/1 Georgia,'Times New Roman',serif;letter-spacing:-.02em}
.aa-ic small{font-size:11.5px}
#aa-btn[aria-expanded="true"]{color:#e8c97a;border-color:rgba(201,168,76,.6);background:rgba(201,168,76,.14)}
.aa-pop{position:absolute;top:calc(100% + 10px);right:-60px;z-index:80;width:318px;max-width:calc(100vw - 16px);background:#fff;color:#1a1608;border:1px solid rgba(26,22,8,.14);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.28);padding:12px 14px 10px;font-family:'Nunito',system-ui,sans-serif}
.aa-pop[hidden]{display:none}
.aa-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0}
.aa-row + .aa-row{border-top:1px solid rgba(26,22,8,.1)}
.aa-l{font-size:13px;font-weight:800;color:#5c5548}
.aa-size{display:flex;align-items:center;gap:6px}
.aa-sbtn{width:44px;height:36px;border-radius:10px;border:1px solid rgba(26,22,8,.2);background:#faf8f3;color:#1a1608;font:800 15px 'Nunito',sans-serif;cursor:pointer}
.aa-sbtn:disabled{opacity:.35;cursor:default}
.aa-sample{width:44px;text-align:center;font-family:Georgia,serif;font-weight:700;line-height:1;color:#1a1608}
.aa-seg{display:flex;border:1px solid rgba(26,22,8,.2);border-radius:10px;overflow:hidden}
.aa-seg button{display:flex;align-items:center;gap:6px;border:0;background:#fff;color:#1a1608;font:800 13px 'Nunito',sans-serif;padding:0 11px;white-space:nowrap;height:36px;cursor:pointer}
.aa-seg button + button{border-left:1px solid rgba(26,22,8,.2)}
.aa-seg button.on{background:#0a1940;color:#fff}
.aa-sw{width:14px;height:14px;border-radius:4px;border:1px solid rgba(26,22,8,.35);flex-shrink:0}
.aa-sw-bright{background:#fff}
.aa-sw-paper{background:#f3eee2}
.aa-note{font-size:12px;line-height:1.45;color:#6b6457;margin:4px 0 2px}
@media(max-width:640px){.aa-pop{position:fixed;top:60px;right:8px;left:auto}}

html.paper .aa-pop{background:#fbf8f1;border-color:var(--pp-line)}
html.paper .aa-seg button{background:#fbf8f1}
html.paper .aa-seg button.on{background:var(--pp-btn);color:var(--pp-btn-ink)}
html.paper #aa-btn[aria-expanded="true"]{background:rgba(60,48,28,.1);border-color:var(--pp-ink2);color:var(--pp-ink)}

.aa-seg button:disabled{opacity:.4;cursor:default}
.aa-sub{font-size:11.5px;color:#6b6457;font-weight:700;margin-top:2px}

/* account menu bits from member-nav.js on paper */
html.paper #nav-auth-btn.mn-demoted{background:transparent!important;border-color:var(--pp-line)!important;color:var(--pp-ink)!important}
html.paper .mn-joinbtn{background:var(--pp-btn)!important;color:var(--pp-btn-ink)!important}
html.paper .mn-btn{background:transparent;border-color:var(--pp-line);color:var(--pp-ink)}
/* inside the shared header the generic extra-button rule is stronger - restate the pill there */
html.paper header.mbh-ph .mbh-ph-extra .paper-pill{background:var(--pp-btn)!important;border-color:var(--pp-btn)!important;color:var(--pp-btn-ink)!important}
/* Save to my bookshelf (mbh-shelf.js) */
html.paper .mbh-fav{background:transparent;border-color:rgba(60,48,28,.3);color:var(--pp-ink)}
html.paper .mbh-fav-note{color:var(--pp-ink2)}
/* contrast fixes from the Paper mode audit (2026-10-12) */
html.paper .aa-sub{color:#6b6457}
html.paper .free-tag{color:#fff!important}
html.paper .tier-btn:not(.on){color:var(--pp-ink)!important}
html.paper .share-wa{background:#13814a!important}
html.paper .share-fb{background:#1565d8!important}
html.paper .bk-foot{color:var(--pp-ink2)!important;border-top-color:var(--pp-line)!important}
html.paper .bk-foot nav,html.paper footer nav{background:transparent!important;border:0!important;backdrop-filter:none!important}
html.paper #book-ssr-more a{color:var(--pp-accent)!important}
html.paper .rv-pick button{color:rgba(60,48,28,.62)!important}
html.paper .teaser-dismiss{color:var(--pp-ink2)!important}

/* "how to switch back" hints (2026-10-12) */
#pp-note{position:fixed;left:50%;bottom:22px;transform:translate(-50%,10px);z-index:300;max-width:min(420px,calc(100vw - 24px));width:max-content;background:#2f2a22;color:#f6f1e5;border-radius:12px;padding:10px 14px;font:700 13.5px/1.4 Nunito,system-ui,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;text-align:center}
#pp-note.show{opacity:1;transform:translate(-50%,0)}
.pp-bubble{position:absolute;z-index:300;background:#2f2a22;color:#f6f1e5;border-radius:10px;padding:7px 12px;font:800 12.5px Nunito,system-ui,sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.22);white-space:nowrap;animation:ppBub .35s ease-out}
.pp-bubble::before{content:"";position:absolute;top:-6px;right:14px;border:6px solid transparent;border-top:0;border-bottom-color:#2f2a22}
@keyframes ppBub{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pp-bubble{animation:none}#pp-note{transition:none}}

/* Night mode (2026-10-12) - readers only; each reader carries its own html.night rules */
:root{--nt-bg:#14120f;--nt-card:#1f1c18;--nt-card2:#26221d;--nt-ink:#e8dfcc;--nt-ink2:#b5aa93;--nt-line:rgba(230,220,200,.16);
  --nt-accent:#d9b766;--nt-btn:#e8dfcc;--nt-btn-ink:#14120f}
/* the page background itself is set in each reader, so store pages keep their own look */
.aa-sw-night{background:#14120f}
html.night .aa-seg button.on{background:#14120f;color:#e8dfcc}

/* Easy-read letters (2026-10-12): rounder, wider letters with more space between letters, words and lines */
html.font-easy .pg-text,html.font-easy .page-text,html.font-easy .wd-mean,html.font-easy .wd-ctx{font-family:'Lexend',Verdana,Tahoma,sans-serif;letter-spacing:.02em;word-spacing:.14em;line-height:1.8;font-style:normal}
.aa-font-easy{font-family:'Lexend',Verdana,sans-serif!important}
.aa-seg button.on .aa-sw-night{border-color:rgba(255,255,255,.55)}
/* "Who reads" family voice picker in the scroll reader's Aa menu (2026-10-12) */
.aa-row[hidden]{display:none}
.fv-sel{height:36px;max-width:190px;border:1px solid rgba(26,22,8,.2);border-radius:10px;background:#fff;color:#1a1608;font:800 13px 'Nunito',sans-serif;padding:0 8px;cursor:pointer}
html.paper .fv-sel{background:#fbf8f1}
html.paper .mn-name{color:var(--pp-ink)} /* signed-in name in the header was white on paper (2026-10-12) */