/* Sagaterra: the family bookshelf at bedtime.
   Paper and ink for the app, cloth-bound covers for the worlds, and a reader that takes on
   the look of each series' illustrations. */

@font-face { font-family: "Alegreya"; font-weight: 400; font-style: normal; font-display: swap; src: url("/vendor/fonts/alegreya/alegreya-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-weight: 400; font-style: italic; font-display: swap; src: url("/vendor/fonts/alegreya/alegreya-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-weight: 500; font-style: normal; font-display: swap; src: url("/vendor/fonts/alegreya/alegreya-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-weight: 700; font-style: normal; font-display: swap; src: url("/vendor/fonts/alegreya/alegreya-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/vendor/fonts/alegreya-sans/alegreya-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("/vendor/fonts/alegreya-sans/alegreya-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/vendor/fonts/alegreya-sans/alegreya-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/vendor/fonts/alegreya-sans/alegreya-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Comic Neue"; font-weight: 400; font-style: normal; font-display: swap; src: url("/vendor/fonts/comic-neue/comic-neue-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Comic Neue"; font-weight: 700; font-style: normal; font-display: swap; src: url("/vendor/fonts/comic-neue/comic-neue-latin-700-normal.woff2") format("woff2"); }

:root {
  /* paper & ink */
  --paper: #f3ebdb;
  --paper-raised: #fbf7ee;
  --paper-well: #e9dec8;
  --line: #d8c9ae;
  --ink: #1e2547;
  --ink-soft: #4b4f68;
  --muted: #6a6676;
  /* night blue for actions, moon gold for what is active */
  --night: #2b3770;
  --night-hover: #222c5c;
  --night-wash: #e2e1ea;
  --gold: #e3ae45;
  --gold-wash: #f5e2b0;
  --gold-ink: #6d4b0c;
  --danger: #9c3428;
  /* cloth for covers */
  --cloth-indigo: #2e3b73;
  --cloth-moss: #4b6644;
  --cloth-oxblood: #7a2f31;
  --cloth-ochre: #9c6d26;
  --cloth-plum: #5b3c61;
  --cloth-teal: #2c5b60;
  --cover-ink: #f2e3bd;

  --serif: "Alegreya", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Alegreya Sans", "Seravek", "Gill Sans", system-ui, sans-serif;
  --comic: "Comic Neue", "Comic Sans MS", "Chalkboard SE", var(--sans);

  --r-control: 10px;
  --r-panel: 6px;
  --focus: 0 0 0 3px var(--paper), 0 0 0 5px var(--night);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.5; }
body { min-height: 100vh; }
a { color: var(--night); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--focus); }
.icon { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 6px;
  padding: calc(8px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  background: rgba(243, 235, 219, 0.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; gap: 10px; align-items: center; margin-right: auto; color: var(--ink); text-decoration: none; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.45rem; letter-spacing: -0.01em; border-radius: 8px; }
.brand img { display: block; }
.badge { font-size: 0.85rem; padding: 3px 10px; border-radius: 999px; background: var(--gold-wash); color: var(--gold-ink); }
.topbar .parent-btn { padding: 8px 12px; min-height: 40px; font-size: 0.95rem; }
.topbar .parent-btn.is-parent { color: var(--gold-ink); background: var(--gold-wash); }
.topbar .lang-switch { padding: 8px 10px; min-height: 40px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; }

main { max-width: 1040px; margin: 0 auto; padding: 8px max(16px, env(safe-area-inset-left)) 96px; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--ink); }
h1 { font-size: clamp(2rem, 5vw, 2.7rem); line-height: 1.08; letter-spacing: -0.015em; margin: 18px 0 10px; }
h2 { font-size: 1.6rem; line-height: 1.2; margin: 44px 0 12px; }
h3 { font-size: 1.22rem; line-height: 1.25; margin: 0; }
p { margin: 0 0 12px; }
.lede { font-family: var(--serif); font-size: 1.2rem; line-height: 1.5; color: var(--ink-soft); max-width: 36em; }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }
.section-note { color: var(--muted); max-width: 42em; margin-top: -4px; }
.crumbs { font-size: 0.95rem; color: var(--muted); margin-top: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.meta { color: var(--muted); display: flex; gap: 6px 18px; flex-wrap: wrap; }

/* ---------- surfaces ---------- */
.card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 18px; }
.stack > * + * { margin-top: 14px; }
.stack > h3 + *, .stack > label + * { margin-top: 6px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; min-width: 140px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.banner { background: var(--gold-wash); color: var(--ink); border-radius: var(--r-panel); padding: 12px 16px; margin: 16px 0 0; }

/* ---------- controls ---------- */
button, .btn {
  font: inherit; font-weight: 500; border: 0; border-radius: var(--r-control); padding: 10px 18px; min-height: 44px; cursor: pointer;
  background: var(--night); color: #fbf7ee; text-decoration: none; line-height: 1.2;
  display: inline-flex; gap: 8px; align-items: center; justify-content: center;
}
button:hover, .btn:hover { background: var(--night-hover); }
button.secondary, .btn.secondary { background: transparent; color: var(--night); box-shadow: inset 0 0 0 1.5px var(--night); }
button.secondary:hover, .btn.secondary:hover { background: var(--night-wash); }
button.quiet, .btn.quiet { background: transparent; color: var(--ink-soft); }
button.quiet:hover, .btn.quiet:hover { background: var(--paper-well); color: var(--ink); }
button.ghost { background: transparent; color: var(--muted); padding: 6px 10px; min-height: 36px; }
button.ghost:hover { background: var(--paper-well); color: var(--ink); }
button.danger { background: transparent; color: var(--danger); }
button.danger:hover { background: #f3dcd5; }
button.big, .btn.big { padding: 14px 26px; font-size: 1.12rem; min-height: 54px; }
button:disabled { opacity: 0.55; cursor: progress; }

label { display: block; font-weight: 500; font-size: 0.95rem; margin-bottom: 4px; color: var(--ink); }
label.inline { display: inline-flex; gap: 8px; align-items: center; font-weight: 400; margin: 0 14px 0 0; min-height: 36px; }
label.inline input { width: auto; margin: 0; }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--night); flex: none; }
input, textarea, select {
  font: inherit; width: 100%; padding: 10px 12px; min-height: 44px; border-radius: 8px; border: 1px solid var(--line); background: #fffdf8; color: var(--ink);
}
input::placeholder, textarea::placeholder { color: #9a9284; }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--night); box-shadow: 0 0 0 3px rgba(43, 55, 112, 0.18); }
input[type="file"] { padding: 8px; background: transparent; border-style: dashed; }
textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.mic-wrap { position: relative; }
.mic-wrap textarea { padding-right: 56px; }
.mic { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; background: var(--paper-well); color: var(--night); }
.mic:hover { background: var(--night-wash); }
.mic.on { background: var(--danger); color: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }

details > summary { cursor: pointer; color: var(--night); font-weight: 500; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 28px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; margin: 0 4px 0 2px; }
details[open] > summary::before { transform: rotate(45deg); }

/* choice tiles (illustration style, kind of book) */
.tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.tile { border: 1.5px solid var(--line); border-radius: var(--r-control); padding: 12px 14px; background: #fffdf8; cursor: pointer; color: var(--ink); font-weight: 500; text-align: left; display: block; min-height: 56px; }
.tile:hover { background: var(--paper-well); border-color: #c5b391; }
.tile.on { border-color: var(--night); background: var(--night-wash); box-shadow: inset 0 0 0 1px var(--night); }
.tile .muted { font-weight: 400; margin-top: 2px; }
.tile .icon { margin-right: 4px; vertical-align: -3px; }

.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: 999px; background: var(--paper-well); color: var(--ink-soft); border: 0; font-weight: 500; font-size: 0.92rem; }
.chip.warm { background: var(--gold-wash); color: var(--gold-ink); }
button.chip { cursor: pointer; min-height: 40px; padding: 6px 14px; background: #fffdf8; color: var(--night); box-shadow: inset 0 0 0 1.5px var(--line); font-family: var(--serif); font-style: italic; font-size: 1.02rem; text-align: left; }
button.chip:hover { box-shadow: inset 0 0 0 1.5px var(--night); background: #fffdf8; }

/* ---------- the shelf (home) ---------- */
.greeting { margin-top: 28px; }
.shelf { display: grid; gap: 34px 26px; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); margin-top: 30px; }
.shelf-item { text-decoration: none; color: inherit; display: block; border-radius: 4px; }
.shelf-item .meta { margin-top: 12px; font-size: 0.92rem; display: block; }
.shelf-item .meta strong { display: block; color: var(--ink); font-weight: 500; font-size: 1rem; }

/* a cloth-bound cover with a tipped-in plate */
.cover-book {
  --cloth: var(--cloth-indigo);
  position: relative; aspect-ratio: 3 / 4; border-radius: 3px 7px 7px 3px; overflow: hidden;
  background-color: var(--cloth);
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(100deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 9%, rgba(255, 255, 255, 0.08) 11%, rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, 0.14));
  box-shadow: 0 1px 1px rgba(30, 37, 71, 0.25), 0 10px 22px -10px rgba(30, 37, 71, 0.55);
  color: var(--cover-ink);
  display: flex; flex-direction: column; align-items: center; padding: 14% 12% 10% 16%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cover-book::before { content: ""; position: absolute; left: 6%; top: 0; bottom: 0; width: 1px; background: rgba(0, 0, 0, 0.25); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.08); }
.cover-book .plate { width: 100%; aspect-ratio: 1; background: #f6eedb center / cover no-repeat; border: 5px solid #f6eedb; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.25); flex: none; }
.cover-book .plate.empty { background-image: none; display: grid; place-items: center; color: var(--cloth); }
.cover-book .plate.empty .icon { width: 40%; height: 40%; opacity: 0.55; }
.cover-book .title { font-family: var(--serif); font-weight: 500; font-size: 1.12rem; line-height: 1.15; text-align: center; margin-top: auto; padding-top: 10px; text-wrap: balance; overflow-wrap: anywhere; }
.cloth-indigo { --cloth: var(--cloth-indigo); }
.cloth-moss { --cloth: var(--cloth-moss); }
.cloth-oxblood { --cloth: var(--cloth-oxblood); }
.cloth-ochre { --cloth: var(--cloth-ochre); }
.cloth-plum { --cloth: var(--cloth-plum); }
.cloth-teal { --cloth: var(--cloth-teal); }
.shelf-item:hover .cover-book, .shelf-item:focus-visible .cover-book { transform: translateY(-5px); box-shadow: 0 1px 1px rgba(30, 37, 71, 0.25), 0 18px 26px -12px rgba(30, 37, 71, 0.55); }
.shelf-item:focus-visible { box-shadow: none; }
.shelf-item:focus-visible .cover-book { outline: 3px solid var(--night); outline-offset: 4px; }

/* empty slot on the shelf: start a new world */
.shelf-new { aspect-ratio: 3 / 4; border: 2px dashed #bfae8d; border-radius: 3px 7px 7px 3px; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; text-align: center; padding: 16px; color: var(--night); font-family: var(--serif); font-size: 1.15rem; line-height: 1.2; }
.shelf-item:hover .shelf-new { background: var(--paper-well); border-color: var(--night); }
.shelf-new .icon { width: 30px; height: 30px; }
.shelf-empty { margin-top: 24px; max-width: 34em; }

/* page header with a small cover (world, book) */
.page-head { display: flex; gap: 22px; align-items: flex-end; margin-top: 14px; }
.page-head .cover-book { width: 96px; flex: none; padding: 14px 10px 12px 16px; }
.page-head .cover-book .plate { border-width: 3px; }
.page-head h1 { margin: 0 0 6px; }
.page-head .meta { margin: 0; }
@media (max-width: 560px) { .page-head { gap: 16px; } .page-head .cover-book { width: 72px; } }

/* ---------- table of contents (books, episodes, chapters) ---------- */
.toc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.toc > li { border-bottom: 1px solid var(--line); }
.item-link { display: flex; gap: 16px; align-items: center; text-decoration: none; color: inherit; padding: 14px 8px; border-radius: 4px; min-height: 64px; }
.item-link:hover { background: var(--paper-well); }
.item-link strong { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; line-height: 1.25; }
.item-link .num { width: 2.2em; flex: none; text-align: right; font-family: var(--serif); font-size: 1.7rem; line-height: 1; color: var(--ink-soft); }
.item-link .kind { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--night-wash); color: var(--night); }
.item-link .kind .icon { width: 22px; height: 22px; }
.item-link .thumb { width: 88px; aspect-ratio: 3 / 2; border-radius: 2px; background: var(--paper-well) center / cover no-repeat; flex: none; box-shadow: 0 0 0 1px rgba(30, 37, 71, 0.12); }
.item-link .status { display: inline-flex; gap: 6px; align-items: center; }
.item-link .status .icon { width: 1em; height: 1em; }
.toc-empty { padding: 16px 8px; color: var(--muted); }
@media (max-width: 560px) { .item-link .thumb { width: 64px; } .item-link .num { width: 1.4em; font-size: 1.4rem; } }

/* ---------- tonight (book page) ---------- */
.tonight { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 22px; }
.tonight .options { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; }
.tonight .go { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.tonight .go select { width: auto; min-width: 130px; }
.tonight .writing { display: flex; gap: 14px; align-items: center; font-family: var(--serif); font-size: 1.12rem; }

/* ---------- characters ---------- */
.char { display: flex; flex-direction: column; gap: 10px; }
.char .ref { aspect-ratio: 2 / 3; border-radius: 2px; background: var(--paper-well) center / contain no-repeat; border: 6px solid #fffdf8; box-shadow: 0 0 0 1px var(--line), 0 6px 14px -8px rgba(30, 37, 71, 0.45); display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 0.92rem; text-align: center; padding: 8px; }
.char h3 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.char h3 .icon { color: var(--gold-ink); width: 18px; height: 18px; }
.char .chip { min-height: 26px; padding: 2px 10px; font-size: 0.82rem; }
.variants { display: flex; gap: 8px; }
.variants button { flex: 1; aspect-ratio: 2 / 3; min-height: 0; padding: 0; border-radius: 2px; background: var(--paper-well) center / cover no-repeat; box-shadow: 0 0 0 1px var(--line); }
.variants button.on { box-shadow: 0 0 0 3px var(--gold); }
.char .refine { padding: 0; width: 44px; }

.list { list-style: none; padding: 0; margin: 0; }
.list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.list li:first-child { padding-top: 0; }
.list li:last-child { border-bottom: 0; }
.list .tag { font-size: 0.88rem; color: var(--muted); white-space: nowrap; padding-top: 2px; }
.item-link .tag { font-size: 0.88rem; color: var(--muted); white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
.cost-sums { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cost-sums > div { display: flex; flex-direction: column; gap: 2px; }
.cost-sums strong { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.balance { display: flex; flex-direction: column; gap: 2px; }
.balance strong { font-family: var(--serif); font-weight: 500; font-size: 2rem; font-variant-numeric: tabular-nums; }
.balance strong.empty { color: var(--danger); }
input[type="range"] { width: 100%; min-height: 44px; padding: 0; border: 0; background: none; box-shadow: none; accent-color: var(--night); }
.free-note { margin: 0; padding: 8px 12px; border-radius: var(--r-panel); background: var(--gold-wash); color: var(--gold-ink); font-size: 0.95rem; }
.free-tag { font-size: 0.8rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--gold-wash); color: var(--gold-ink); white-space: nowrap; align-self: center; }
.list-price { color: var(--muted); font-size: 0.8em; font-weight: 400; }
.deal-price { color: var(--gold-ink); font-weight: 600; }
.deal { display: inline-block; vertical-align: middle; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; padding: 2px 10px; border-radius: 999px; background: var(--gold); color: var(--ink); white-space: nowrap; }
.list .ghost { min-height: 32px; padding: 4px 8px; margin-top: -4px; }

.spinner { width: 20px; height: 20px; border: 2.5px solid var(--gold-wash); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.9s linear infinite; flex: none; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress { height: 6px; background: var(--paper-well); border-radius: 99px; overflow: hidden; }
.progress > div { height: 100%; background: var(--gold); transition: width 0.4s; }

.error { color: var(--danger); }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: #fbf7ee; padding: 12px 20px; border-radius: var(--r-control); max-width: min(92vw, 520px); z-index: 200; box-shadow: 0 12px 30px -10px rgba(30, 37, 71, 0.6); }
.toast.error { background: var(--danger); }

dialog { border: 0; border-radius: 10px; padding: 24px; background: var(--paper-raised); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(15, 18, 38, 0.6); max-width: 380px; width: 90vw; }
dialog h3 { font-size: 1.5rem; }
dialog::backdrop { background: rgba(20, 24, 48, 0.55); }
.pin-input { font-size: 1.7rem; letter-spacing: 0.45em; text-align: center; font-family: var(--serif); }

/* login */
.login { max-width: 460px; margin: 8vh auto 0; }
.login h1 { margin-top: 18px; }
.login .mark { width: 64px; height: 64px; }

/* ---------- reader ---------- */
.reader {
  --page: #fbf5e7; --page-ink: #23253a; --page-muted: #8a7f6c; --stage: #252a45; --reader-font: var(--serif);
  --cover-cloth: var(--cloth-indigo); --cover-ink: #f2e3bd;
  position: fixed; inset: 0; z-index: 50; background: var(--stage);
  background-image: radial-gradient(120% 90% at 50% 40%, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.35));
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.reader.theme-modern { --page: #ffffff; --page-ink: #1d2433; --stage: #1d2535; --reader-font: var(--sans); --cover-cloth: #34506e; }
.reader.theme-comic { --page: #fffdf4; --page-ink: #15151a; --stage: #23305a; --reader-font: var(--comic); --cover-cloth: #c8372d; --cover-ink: #fff6d8; }
.reader.theme-sketch { --page: #f8f3e6; --page-ink: #3b3a36; --stage: #34332f; --reader-font: var(--serif); --cover-cloth: #5d6b55; }
.reader.theme-vintage { --page: #f1e3c4; --page-ink: #4a3424; --page-muted: #8c6e52; --stage: #33251b; --reader-font: var(--serif); --cover-cloth: #6b3f24; }
.reader.night { --page: #1f1d26; --page-ink: #e6dccb; --page-muted: #958b7a; --stage: #0b0b10; --cover-cloth: #1c2142; }
.reader.night .bp img { filter: brightness(0.78) saturate(0.9); }

.book-root { margin: auto; }
.bp { background: var(--page); color: var(--page-ink); overflow: hidden; position: relative; font-family: var(--reader-font); }
.bp .inner { position: absolute; inset: 0; display: flex; flex-direction: column; }
/* fold shading at the gutter of a double spread */
.reader.spread .bp.--left::after, .reader.spread .simple-book .sheet .bp:first-child:not(:last-child)::after,
.reader.spread .bp.--right::after, .reader.spread .simple-book .sheet .bp:last-child:not(:first-child)::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none;
}
.reader.spread .bp.--left::after, .reader.spread .simple-book .sheet .bp:first-child:not(:last-child)::after { right: 0; background: linear-gradient(90deg, transparent, rgba(60, 40, 10, 0.13)); }
.reader.spread .bp.--right::after, .reader.spread .simple-book .sheet .bp:last-child:not(:first-child)::after { left: 0; background: linear-gradient(270deg, transparent, rgba(60, 40, 10, 0.16)); }
.reader.night.spread .bp::after { opacity: 1.6; mix-blend-mode: multiply; }
.reader .bp.cover::after, .reader .bp.end::after { display: none; }

.bp .pic { flex: 1; display: flex; align-items: center; justify-content: center; padding: 7%; min-height: 0; }
.bp .pic img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 1px; box-shadow: 0 1px 3px rgba(40, 30, 10, 0.18); }
.bp .pic .status { color: var(--page-muted); display: flex; gap: 10px; align-items: center; font-family: var(--sans); font-size: 0.95rem; }
.bp .txt {
  padding: 9% 10%; overflow-y: auto; font-size: var(--reader-size, 1.3rem); line-height: 1.65; white-space: pre-line; hyphens: auto; overflow-wrap: break-word;
  flex: 1; display: flex; flex-direction: column; justify-content: center;
}
.bp.portrait-combo .pic { flex: 0 0 44%; padding: 6% 6% 0; }
.bp.portrait-combo .txt { justify-content: flex-start; padding-top: 6%; }
.bp .no { flex: none; padding: 0 0 12px; text-align: center; font-size: 0.85rem; color: var(--page-muted); font-family: var(--serif); }

.bp.cover {
  background-color: var(--cover-cloth); color: var(--cover-ink);
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 6%, rgba(255, 255, 255, 0.06) 8%, rgba(0, 0, 0, 0) 11%);
}
.bp.cover .inner { justify-content: center; align-items: center; text-align: center; padding: 10% 12%; gap: 6px; }
.bp.cover .series { font-family: var(--reader-font); font-style: italic; opacity: 0.85; font-size: 1.05rem; }
.bp.cover h1 { color: inherit; font-size: clamp(1.7rem, 4vw, 2.9rem); line-height: 1.1; margin: 0.15em 0; font-family: var(--reader-font); text-wrap: balance; }
.bp.cover .unit { font-family: var(--reader-font); font-size: 1rem; opacity: 0.85; }
.bp.cover .coverpic { width: 74%; aspect-ratio: 3 / 2; background: #f6eedb center / cover no-repeat; border: 6px solid #f6eedb; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 8px 18px rgba(0, 0, 0, 0.3); margin-bottom: 1.4em; }
.bp.cover .hint { font-family: var(--sans); font-size: 0.9rem; opacity: 0.7; margin-top: 2.4em; max-width: 22em; }
.bp.end .inner { justify-content: center; align-items: flex-start; padding: 12%; gap: 14px; font-family: var(--sans); }
.bp.end h2 { font-family: var(--reader-font); color: inherit; margin: 0 0 6px; font-size: 1.9rem; }
.bp.end p { margin: 0; font-family: var(--reader-font); font-size: 1.15rem; }
.bp.end .options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.bp.end .options .chip { background: transparent; box-shadow: inset 0 0 0 1px var(--page-muted); color: var(--page-ink); font-family: var(--reader-font); font-style: italic; }
.bp.end .btn { min-width: 220px; justify-content: flex-start; }
.bp.end .btn.secondary { color: var(--page-ink); box-shadow: inset 0 0 0 1.5px var(--page-ink); }
.bp.end .btn.secondary:hover { background: rgba(0, 0, 0, 0.05); }
.bp.filler .inner { align-items: center; justify-content: center; color: var(--page-muted); }
.bp.filler .inner::before { content: "❦"; font-family: var(--serif); font-size: 2.2rem; opacity: 0.6; }

/* comic: panel frames and lettering in speech boxes */
.reader.theme-comic .bp .pic img { border: 4px solid #15151a; border-radius: 2px; box-shadow: 6px 6px 0 #15151a; }
.reader.theme-comic .bp .txt { font-weight: 700; line-height: 1.45; }
.reader.theme-comic .bp:not(.cover):not(.end) .txt { margin: 7%; padding: 6%; border: 3px solid #15151a; border-radius: 18px; background: #fff; flex: 0 1 auto; align-self: center; box-shadow: 5px 5px 0 #15151a; }
.reader.theme-comic.night .bp:not(.cover):not(.end) .txt { background: #2a2733; border-color: #e6dccb; box-shadow: 5px 5px 0 #e6dccb; }
.reader.theme-comic .bp.cover h1 { font-weight: 700; text-transform: none; transform: rotate(-2deg); text-shadow: 3px 3px 0 #15151a; }
.reader.theme-comic .bp.cover .coverpic { border: 4px solid #15151a; box-shadow: 6px 6px 0 #15151a; }
/* modern 3D: clean white page, sans text */
.reader.theme-modern .bp .pic img { border-radius: 10px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5); }
/* retro fairy tale: framed plates and a drop cap */
.reader.theme-vintage .bp .pic img { border: 8px solid #fbf2dc; box-shadow: 0 0 0 1px #c9b28c; }
.reader.theme-vintage .bp:not(.cont) .txt::first-letter { font-size: 2.6em; float: left; line-height: 0.9; margin: 4px 8px 0 0; color: #8c4a2f; }
/* pencil sketch: a slightly crooked, unframed drawing */
.reader.theme-sketch .bp .pic img { box-shadow: none; border-radius: 2px; transform: rotate(-0.6deg); }
.reader.theme-sketch .bp .txt { font-style: italic; }

/* simple fallback flip */
.simple-book { position: relative; perspective: 2000px; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.7); }
.simple-book .sheet { position: absolute; inset: 0; display: flex; gap: 0; }
.simple-book .sheet .bp { flex: 1; height: 100%; }
.simple-book .sheet.out { animation: simpleOut 0.3s ease-in forwards; }
.simple-book .sheet.in-back { animation: simpleIn 0.3s ease-out; }
@keyframes simpleOut { to { transform: translateX(-6%); opacity: 0; } }
@keyframes simpleIn { from { transform: translateX(-6%); opacity: 0; } }

/* reader chrome: quiet glass controls that stay out of the picture */
.reader-bar { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; justify-content: space-between; gap: 8px; z-index: 70; pointer-events: none; }
.reader-bar > * { pointer-events: auto; }
.reader-tools { display: flex; gap: 2px; padding: 3px; border-radius: 14px; background: rgba(15, 17, 30, 0.42); backdrop-filter: blur(8px); flex-wrap: wrap; justify-content: flex-end; }
.reader-bar button { background: transparent; color: #f4ecdc; min-height: 42px; min-width: 42px; padding: 0 10px; border-radius: 11px; font-family: var(--serif); font-size: 1.05rem; }
.reader-bar button:hover { background: rgba(255, 255, 255, 0.12); }
.reader-bar button.on { background: var(--gold); color: #1e2547; }
.reader-bar button .icon { width: 20px; height: 20px; }
.reader-bar .reader-close { background: rgba(15, 17, 30, 0.42); backdrop-filter: blur(8px); padding: 0 14px 0 10px; font-family: var(--sans); font-size: 0.98rem; align-self: flex-start; }
.reader-bar :focus-visible { box-shadow: 0 0 0 2px var(--gold); }

.reader-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 70; background: rgba(15, 17, 30, 0.35); color: #f4ecdc; width: 48px; height: 48px; min-height: 48px; border-radius: 50%; padding: 0; }
.reader-nav:hover { background: rgba(15, 17, 30, 0.6); }
.reader-nav .icon { width: 24px; height: 24px; }
.reader-nav.prev { left: max(10px, env(safe-area-inset-left)); }
.reader-nav.next { right: max(10px, env(safe-area-inset-right)); }
.reader-nav:focus-visible { box-shadow: 0 0 0 2px var(--gold); }
@media (orientation: portrait), (max-width: 700px) {
  .reader-nav { top: auto; transform: none; bottom: calc(12px + env(safe-area-inset-bottom)); }
}
.reader-progress { position: fixed; bottom: 0; left: 0; height: 3px; background: var(--gold); z-index: 70; transition: width 0.3s; }

.edit-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--paper); z-index: 80; padding: calc(16px + env(safe-area-inset-top)) 18px 24px; overflow-y: auto; box-shadow: -20px 0 50px rgba(0, 0, 0, 0.35); font-family: var(--sans); color: var(--ink); }
.edit-panel h3 { font-size: 1.4rem; }
.edit-panel textarea { min-height: 200px; font-family: var(--serif); font-size: 1.1rem; line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .spinner { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}

/* ---------- phones ---------- */
@media (max-width: 560px) {
  .topbar { gap: 2px; }
  .brand { font-size: 1.25rem; gap: 8px; }
  .badge { white-space: nowrap; font-size: 0.78rem; padding: 2px 8px; }
  .topbar .parent-btn { padding: 8px 10px; }
  #family-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .cover-book .title { font-size: 1rem; }
  h2 { margin-top: 36px; }
  .tonight { padding: 18px 16px; }
  .reader-tools { flex-wrap: nowrap; }
  .reader-bar button { min-width: 38px; padding: 0 8px; }
  .reader-bar .reader-close { padding: 0 10px; }
  .reader-close span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
.account-email { overflow-wrap: anywhere; font-size: 1.05rem; }
main:has(+ .site-footer) { padding-bottom: 24px; }
.site-footer { display: flex; justify-content: center; gap: 20px; padding: 16px 16px max(32px, env(safe-area-inset-bottom)); font-size: 0.85rem; }
.site-footer a { color: var(--muted); }
.legal { max-width: 680px; }
.legal h2 { font-size: 1.15rem; margin-top: 1.6em; }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: 6px; }

/* Admin: users and statistics */
.period { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--r-control); background: var(--paper-well); margin: 4px 0 14px; }
.period button { min-height: 40px; padding: 6px 14px; border: 0; border-radius: calc(var(--r-control) - 3px); background: transparent; color: var(--ink-soft); font: 500 0.98rem var(--sans); cursor: pointer; box-shadow: none; }
.period button:hover { color: var(--night); background: transparent; }
.period button[aria-pressed="true"] { background: var(--paper-raised); color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); }
.cost-sums + .cost-sums { padding-top: 2px; }
.spend .bar { display: block; height: 6px; margin-top: 6px; border-radius: 99px; background: var(--paper-well); overflow: hidden; }
.spend .bar > span { display: block; height: 100%; background: var(--ink-soft); border-radius: inherit; }
.spend .bar.book > span { background: var(--night); }
.daily { display: flex; align-items: flex-end; gap: 2px; height: 120px; border-bottom: 1px solid var(--line); }
.daily > div { flex: 1; height: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-start; }
.daily .book { background: var(--night); border-radius: 2px 2px 0 0; }
.daily .rest { background: var(--gold); }
.daily .book, .daily .rest { display: block; min-height: 0; }
.key { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.key.book { background: var(--night); }
.key.rest { background: var(--gold); margin-left: 8px; }
#st-sort { width: auto; min-width: 180px; }
.users .user { padding: 14px 18px; }
.users .user > summary { align-items: flex-start; gap: 10px; color: var(--ink); font-weight: 400; overflow-wrap: anywhere; }
.users .user > summary::before { margin-top: 9px; }
.users .user > summary .tag { font-size: 0.95rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 2px; }
.users .user[open] > summary { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.users .low, .card .low { color: var(--danger); }

/* Who is reading (kid PINs on) */
.who { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; margin-top: 24px; }
.who-kid { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 12px 18px; min-height: 0; background: #fffdf8; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); border-radius: 18px; }
.who-kid:hover { box-shadow: inset 0 0 0 1.5px var(--night); background: #fffdf8; }
.who-mono { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--cloth); color: #f2e3bd; font-family: var(--serif); font-size: 2.6rem; font-weight: 700; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12); }
.who-name { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; }
.who-lock { position: absolute; top: 12px; right: 12px; color: var(--muted); }
.child-row { flex-direction: column; align-items: stretch; }
.child-line { display: flex; gap: 10px; align-items: flex-start; }
.child-pin { align-items: center; }
.continue { margin: 22px 0 0; }