/* ============================================================
   YourDailyBook — style.css
   White with baby blue / pale blue accents — clean, official.
   System fonts only, no external assets.
   (TY Nov 5 ~10:24 PM: no orange/copper/amber.
    TY Nov 5 ~10:38 PM: baby/pale blue accent, official —
    strong royal blue replaced.)
   ============================================================ */

:root {
  --paper: #ffffff;          /* clean white background */
  --paper-2: #eef4fb;        /* pale blue tint for subtle fills */
  --surface: #ffffff;
  --ink: #111827;            /* near-black, cool */
  --ink-soft: #4b5563;
  --ink-faint: #9ca3af;
  --line: #dbe4f0;           /* cool light blue-gray */
  --accent: #7dd3fc;         /* baby blue — the accent (fills, progress, highlights) */
  --accent-dark: #0369a1;    /* deeper official blue — links & text where contrast matters */
  --accent-soft: #e0f2fe;    /* pale blue tint */
  --navy: #0c4a6e;           /* deep navy — text on baby-blue surfaces, official */
  --accent-2: #0f766e;       /* deep teal, secondary */
  --player-bg: #0f172a;      /* dark navy */
  --player-ink: #f8fafc;
  --danger: #b91c1c;
  --ok: #15803d;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 2px 10px rgba(28, 25, 23, 0.07);
  --shadow-lg: 0 10px 30px rgba(28, 25, 23, 0.14);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", Times, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 96px; /* room for the sticky player */
}

h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.2; margin: 0 0 0.5rem; }
p { margin: 0 0 1rem; }
a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.section { padding: 64px 0; }
.section-head { max-width: 720px; margin-bottom: 32px; }
.section-head h2 { font-size: 2rem; }
.section-head p { color: var(--ink-soft); font-size: 1.05rem; }
/* Compact heading for the Daily Books panel (the genre row sits above it). */
.daily-head { margin-bottom: 20px; }
.daily-head h2 { font-size: 1.5rem; }
.daily-head p { font-size: 1rem; margin-top: 4px; }
.eyebrow {
  display: inline-block; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-dark);
  margin-bottom: 8px;
}

/* ---------------- Header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1120px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 20px;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-serif); font-size: 1.35rem; font-weight: 700;
  color: var(--ink); white-space: nowrap;
}
.logo:hover { text-decoration: none; }
.logo-mark {
  width: 36px; height: 36px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, #0369a1, #0c4a6e);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.15rem;
}
.logo-mark svg { display: block; }
.logo small {
  display: block; font-family: var(--font-sans); font-size: 0.62rem;
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); line-height: 1;
}
.main-nav { display: flex; gap: 4px; margin-left: 12px; }
.main-nav a {
  color: var(--ink-soft); font-weight: 600; font-size: 0.95rem;
  padding: 8px 12px; border-radius: 8px; white-space: nowrap;
}
.main-nav a:hover { color: var(--ink); background: var(--paper-2); text-decoration: none; }
.main-nav a.active { color: var(--accent-dark); background: var(--accent-soft); }
.header-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font-size: 1.1rem; cursor: pointer; color: var(--ink);
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-size: 0.98rem; font-weight: 700;
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform 0.08s ease, background 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); color: var(--navy); }
.btn-primary:hover { background: #38bdf8; color: var(--navy); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--paper-2); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #334155; }
.btn-sm { padding: 8px 16px; font-size: 0.9rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ---------------- Tagline (two lines under the main tabs) ---------------- */
/* The one line that explains the whole site, and it maps directly to the
   three tabs (daily / weekly personal / make your own). It renders as TWO
   lines with a deliberate break at the em dash — line 1 is the consumption
   promise, line 2 lands on "make your own" as the differentiator. A single
   slim block under the tabs, not a hero block, so the tabs stay the highest
   and dominant element. */
.tagline-strip { padding: 16px 0 2px; }
.tagline-strip h1 { font-size: 1.2rem; line-height: 1.4; font-weight: 600; text-align: center; max-width: 880px; margin: 0 auto; }
.tagline-strip h1 em { font-style: normal; color: var(--accent-dark); }

/* ---------------- Closing value-prop (below the book grid) ---------------- */
/* The positioning line + AI disclosure + pricing, moved here from the top so
   the tabs sit higher. Reads as the pitch + disclosure strip at the bottom
   of the Daily Books view. */
.closing-value {
  background: var(--accent-soft); border: 1px solid #bae6fd;
  border-radius: var(--radius); padding: 28px 24px; text-align: center;
  margin-top: 28px;
}
.closing-value p { color: var(--ink-soft); font-size: 1rem; margin: 0 auto; max-width: 680px; }

/* Cover gradients (CSS only — no images). Cool tones only:
   baby blue, pale blue, sky blue, teal, soft cool grays. */
.g0 { background: linear-gradient(160deg, #0c4a6e, #38bdf8 55%, #bae6fd); }
.g1 { background: linear-gradient(160deg, #082f49, #0284c7 55%, #7dd3fc); }
.g2 { background: linear-gradient(160deg, #075985, #0ea5e9 55%, #e0f2fe); }
.g3 { background: linear-gradient(160deg, #134e4a, #0f766e 55%, #5eead4); }
.g4 { background: linear-gradient(160deg, #1e293b, #64748b 55%, #bae6fd); }
.g5 { background: linear-gradient(160deg, #0c4a6e, #0369a1 55%, #7dd3fc); }
.g6 { background: linear-gradient(160deg, #0369a1, #38bdf8 55%, #e0f2fe); }
.g7 { background: linear-gradient(160deg, #082f49, #0369a1 55%, #38bdf8); }
.g8 { background: linear-gradient(160deg, #075985, #0284c7 55%, #bae6fd); }
.g9 { background: linear-gradient(160deg, #334155, #64748b 55%, #cbd5e1); }

/* ---------------- Tabs (the dominant top element — large, full-width) ---------------- */
.tabs-bar {
  position: sticky; top: 61px; z-index: 50;
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: 16px 0 18px;
}
.tabs { display: flex; gap: 12px; }
.tab-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: var(--font-sans); font-size: 1.25rem; font-weight: 800;
  padding: 18px 14px; border-radius: 16px; border: 2px solid var(--line);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
  text-align: center;
}
.tab-btn .tab-title { line-height: 1.15; }
.tab-btn .tab-sub { font-size: 0.85rem; font-weight: 500; color: var(--ink-faint); line-height: 1.3; }
.tab-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.tab-btn:hover .tab-sub { color: var(--ink-soft); }
.tab-btn.active { background: var(--accent); border-color: var(--accent); color: var(--navy); }
.tab-btn.active .tab-sub { color: var(--navy); opacity: 0.85; }

/* Small Continue Reading button (v15) — not a tab, sits in a slim row
   under the 3 main tabs. Same pill shape, smaller type. */
.continue-mini-row { padding: 10px 0 2px; text-align: center; }
.continue-mini-btn { font-size: 0.85rem; padding: 6px 16px; border-radius: 999px; }
.continue-mini-btn.active { background: var(--accent); border-color: var(--accent); color: var(--navy); }
#continueBackBtn { margin-bottom: 12px; }
.tab-panel { display: none; padding: 20px 0 8px; }
.tab-panel.active { display: block; }

/* Genre pills — wrap onto as many lines as needed so every genre is
   shown; no horizontal scroll on any screen (TY Nov 6: no scrollbar
   on genres). Applies to the Daily Books row and the browse row. */
.genre-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 20px;
}
.genre-pill {
  flex: 0 0 auto; white-space: nowrap;
  font-size: 0.9rem; font-weight: 600; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer;
}
.genre-pill:hover { border-color: var(--accent); color: var(--accent-dark); }
.genre-pill.active { background: var(--accent); border-color: var(--accent); color: var(--navy); }
.filter-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.filter-row label { font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); }
select, input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="search"], textarea {
  font-family: var(--font-sans); font-size: 0.98rem; color: var(--ink);
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); width: 100%;
}
select:focus, input:focus, textarea:focus { outline: 2px solid var(--accent-dark); outline-offset: 1px; border-color: var(--accent-dark); }
textarea { min-height: 90px; resize: vertical; }

/* ---------------- Book cards (post-style: header + meta + body + actions) ---------------- */
/* Written from scratch for YourDailyBook. Each card reads like a
   post: a slim gradient band on top, then a title header, a meta
   block with genre, read time, and chapters + badges on three
   separate fixed lines, the opening text, and the Listen / Read
   actions with the voice picker. */
.book-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.book-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.book-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.book-cover {
  height: 64px; padding: 12px 16px; color: #fff;
  display: flex; flex-direction: column; justify-content: center;
}
.book-cover .cover-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.book-cover .cover-genre { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.9; }
.book-body { padding: 18px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.book-title { font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.2; margin: 0; }
.book-meta { display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; color: var(--ink-soft); }
/* TY Nov 6 ~10:19 PM: genre and time of read sit on separate fixed
   lines on every platform — line 1 is the genre, line 2 is the read
   time, line 3 is chapters + badges. The meta never flows them onto
   one wrapping line, so the card layout is identical on desktop and
   mobile. */
.book-meta .meta-line { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.book-meta span { display: inline-flex; align-items: center; gap: 4px; }
.book-desc { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
.book-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.voice-select { flex: 1; min-width: 0; }
.voice-select select { padding: 8px 10px; font-size: 0.9rem; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.badge-ai { background: rgba(255, 255, 255, 0.22); color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); }
.badge-ai-dark { background: var(--accent-soft); color: var(--accent-dark); border: 1px solid #bae6fd; }
.badge-rough { background: #fef2f2; color: var(--danger); border: 1px solid #fecaca; }
.badge-rating { background: var(--paper-2); color: var(--ink-soft); border: 1px solid var(--line); }
/* Small grey lock icon on a locked book card — the only sign a book
   is locked. Grey (not the emoji's default yellow) so it reads as
   "unavailable", not as a warning. */
/* Rating + "New today" stay together on one line: the badges sit in
   one nowrap group, so the group wraps as a unit and the badges never
   split across lines. */
.book-badges { display: inline-flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.book-meta .book-badges { gap: 6px; }
.cover-badges { display: inline-flex; gap: 6px; align-items: center; }
.lock-icon { color: var(--ink-faint); filter: grayscale(1); font-size: 0.85rem; }
.badge-new { background: var(--ok); color: #fff; }
.empty-state { text-align: center; color: var(--ink-soft); padding: 48px 16px; grid-column: 1 / -1; }

/* ---------------- Back-catalog browse view ---------------- */
/* Lives inside the Daily Books panel. Same post-style cards as the
   daily grid; the controls wrap (never scroll sideways) and the
   pagination bar sits at the bottom. The scroll margin keeps the
   section heading clear of the sticky header + tabs bar when the
   view is opened (openBrowse scrolls it into view). */
#browseView { scroll-margin-top: 150px; }
.browse-link-row { margin: 0 0 20px; }
.browse-controls { margin-bottom: 16px; }
.browse-filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.browse-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); min-width: 0; }
.browse-field select, .browse-field input { width: auto; min-width: 0; }
.browse-search { flex: 1 1 220px; }
.browse-search input { width: 100%; }
.browse-check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 11px; }
.browse-check input { accent-color: var(--accent); }
.browse-genre-head { font-size: 1.35rem; margin: 28px 0 14px; }
.browse-genre-head:first-child { margin-top: 0; }
.browse-pagination { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 28px 0 8px; }
.page-btn {
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 700;
  padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
}
.page-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.page-btn.active { background: var(--accent); border-color: var(--accent); color: var(--navy); }
.page-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.page-ellipsis { color: var(--ink-faint); padding: 0 2px; }

/* ---------------- Currently Reading ---------------- */
/* Books the user opened, most recent first. Hidden when empty.
   Uses the same post-style book cards as the catalog. */
.currently-reading { margin: 0 0 28px; }
.cr-head { margin-bottom: 16px; }
.cr-head h2 { font-size: 1.5rem; }
.cr-head p { margin: 0; }
.remove-cr { color: var(--ink-soft); }

/* ---------------- Two-column layouts ---------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow);
}
.card h3 { font-size: 1.35rem; }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-weight: 700; font-size: 0.92rem; margin-bottom: 6px; }
.form-field .hint { font-size: 0.85rem; color: var(--ink-faint); font-weight: 400; margin-top: 4px; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px; }
.check-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 600;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  background: var(--surface); color: var(--ink-soft); user-select: none;
}
.check-chip input { accent-color: var(--accent); }
.check-chip:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
/* A rating box that is not available for this reader's age is greyed
   out and unclickable (see renderPfRatings). */
.check-chip:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.check-chip:has(input:disabled):hover { border-color: var(--line); }
.callout {
  border-left: 4px solid var(--accent); background: var(--accent-soft);
  padding: 14px 16px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 0.95rem;
}
.callout.teal { border-left-color: var(--accent-2); background: #f0fdfa; }
.callout.red { border-left-color: var(--danger); background: #fef2f2; }
.callout p { margin: 0 0 6px; }
.callout p:last-child { margin: 0; }
.step-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: step; }
.step-list li { display: flex; gap: 14px; }
.step-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem;
}
.step-list h4 { margin-bottom: 2px; }
.step-list p { color: var(--ink-soft); margin: 0; font-size: 0.95rem; }

/* ---------------- Pricing ---------------- */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 860px; }
.price-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; position: relative;
}
.price-card.featured { border: 2px solid var(--accent); box-shadow: var(--shadow-lg); }
.price-flag {
  position: absolute; top: -12px; right: 20px; background: var(--accent); color: var(--navy);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
}
.price-name { font-family: var(--font-serif); font-size: 1.5rem; }
.price-amount { font-family: var(--font-serif); font-size: 2.6rem; line-height: 1; margin: 8px 0 2px; }
.price-amount span { font-size: 1rem; font-family: var(--font-sans); color: var(--ink-soft); }
.price-card ul { list-style: none; padding: 0; margin: 16px 0 24px; display: grid; gap: 9px; }
.price-card ul li { padding-left: 26px; position: relative; font-size: 0.98rem; }
.price-card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.price-card .btn { margin-top: auto; }
.price-table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.price-table th, .price-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.price-table th { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.price-table td:last-child, .price-table th:last-child { text-align: right; white-space: nowrap; }
.fee-note { font-size: 0.9rem; color: var(--ink-soft); margin-top: 12px; }

/* ---------------- Policies ---------------- */
.policy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.policy-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow); display: block; color: var(--ink);
}
.policy-card:hover { text-decoration: none; border-color: var(--accent); }
.policy-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
.policy-card p { color: var(--ink-soft); font-size: 0.93rem; margin: 0; }
.policy-card .policy-link { color: var(--accent); font-weight: 700; font-size: 0.9rem; margin-top: 10px; display: inline-block; }

/* ---------------- Footer ---------------- */
.site-footer { background: var(--ink); color: #cbd5e1; padding: 56px 0 24px; margin-top: 32px; }
.site-footer a { color: #93c5fd; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.site-footer h4 { color: #fff; font-size: 1.1rem; margin-bottom: 12px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer p { font-size: 0.93rem; color: #94a3b8; }
.footer-bottom { border-top: 1px solid #334155; padding-top: 20px; font-size: 0.85rem; color: #94a3b8; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }

/* ---------------- Sticky player ---------------- */
.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--player-bg); color: var(--player-ink);
  border-top: 1px solid #334155;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
}
.player-inner {
  max-width: 1120px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 16px;
}
.player-cover {
  width: 48px; height: 48px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 1.1rem; color: #fff;
}
.player-info { min-width: 0; width: 220px; }
.player-title { font-weight: 700; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-sub { font-size: 0.8rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-controls { display: flex; align-items: center; gap: 6px; flex: none; }
.player-btn {
  background: none; border: none; color: var(--player-ink); cursor: pointer;
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.player-btn:hover { background: #334155; }
.player-btn.play {
  width: 46px; height: 46px; background: var(--accent); color: var(--navy); font-size: 1.15rem;
}
.player-btn.play:hover { background: #38bdf8; color: var(--navy); }
.player-progress { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 120px; }
.player-time { font-size: 0.8rem; color: #94a3b8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.progress-track {
  flex: 1; height: 6px; border-radius: 999px; background: #334155; cursor: pointer; position: relative;
}
.progress-fill { height: 100%; border-radius: 999px; background: var(--accent); width: 0%; }
.player-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.player-tools select {
  background: #1e293b; color: var(--player-ink); border: 1px solid #475569;
  padding: 6px 8px; font-size: 0.85rem; border-radius: 8px; width: auto;
}
.player-tools select:focus { outline-color: var(--accent-dark); }
.tool-btn {
  background: #1e293b; border: 1px solid #475569; color: var(--player-ink);
  font-size: 0.82rem; font-weight: 600; padding: 7px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.tool-btn:hover { background: #334155; }
.tool-btn.active { background: var(--accent); border-color: var(--accent); color: var(--navy); }
.chapter-panel {
  position: fixed; right: 20px; bottom: 92px; z-index: 71; width: 340px; max-width: calc(100vw - 40px);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 16px; display: none; max-height: 60vh; overflow: auto;
}
.chapter-panel.open { display: block; }
.chapter-panel h3 { font-size: 1.1rem; margin-bottom: 4px; }
.chapter-panel .sub { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 12px; }
.chapter-list { list-style: none; padding: 0; margin: 0; display: grid; }
.chapter-list button {
  display: flex; justify-content: space-between; gap: 12px; width: 100%;
  background: none; border: none; border-bottom: 1px solid var(--line);
  padding: 9px 4px; font-size: 0.92rem; cursor: pointer; text-align: left; color: var(--ink);
}
.chapter-list button:hover { background: var(--paper-2); }
.chapter-list button.current { color: var(--accent-dark); font-weight: 700; }
.chapter-list button span:last-child { color: var(--ink-faint); font-size: 0.85rem; white-space: nowrap; }

/* ---------------- Modals ---------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; background: rgba(28, 25, 23, 0.6);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 520px; max-height: 90vh; overflow: auto; padding: 28px; position: relative;
}
.modal h2 { font-size: 1.6rem; }
.modal-close {
  position: absolute; top: 14px; right: 14px; background: none; border: none;
  font-size: 1.3rem; cursor: pointer; color: var(--ink-soft); padding: 6px 10px; border-radius: 8px;
}
.modal-close:hover { background: var(--paper-2); }
.modal .fine-print { font-size: 0.85rem; color: var(--ink-faint); }
.form-success { text-align: center; padding: 20px 0; }
.form-success .big-check {
  width: 64px; height: 64px; border-radius: 50%; background: #dcfce7; color: var(--ok);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 12px;
}

/* ---------------- Auth pages (signup.html / account.html) ---------------- */
/* Standalone pages — no sticky player, so the bottom padding for it
   is dropped on these pages. */
body[data-auth-page] { padding-bottom: 24px; }
.auth-wrap { max-width: 680px; padding-top: 36px; padding-bottom: 36px; }
.auth-wrap .section-head { margin-bottom: 20px; }
.auth-toggle { display: flex; gap: 8px; margin-bottom: 20px; }
.auth-toggle-btn {
  flex: 1; font-family: var(--font-sans); font-size: 1rem; font-weight: 700;
  padding: 12px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
}
.auth-toggle-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.auth-toggle-btn.active { background: var(--accent); border-color: var(--accent); color: var(--navy); }
.auth-form { margin-bottom: 0; }
.auth-form h3 { font-size: 1.35rem; }
.auth-form h3.mt-3 { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.form-error { color: var(--danger); font-size: 0.92rem; font-weight: 600; margin: 0 0 12px; }
.form-ok { color: var(--ok); font-size: 0.92rem; font-weight: 600; margin: 0 0 12px; }
.danger-btn { color: var(--danger); border-color: #fecaca; }
.danger-btn:hover { background: #fef2f2; border-color: var(--danger); }

/* ---------------- Misc ---------------- */
.q-list { display: grid; gap: 14px; margin: 16px 0; }
.q-item label { display: block; font-weight: 700; font-size: 0.92rem; margin-bottom: 4px; }
.q-item label span { color: var(--ink-faint); font-weight: 400; }
.hidden { display: none !important; }
.muted { color: var(--ink-soft); }
.small { font-size: 0.88rem; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-2 { margin-bottom: 16px; }
.text-center { text-align: center; }

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .tagline-strip h1 { font-size: 1.1rem; }
  .book-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .policy-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .player-info { width: 150px; }
  .player-tools select { max-width: 110px; }
}
@media (max-width: 640px) {
  /* Phone = the same laptop layout, compacted — NOT a stacked,
     dumbed-down layout (TY Nov 6: clean transfer, look the same
     as laptop or as close as possible). Nothing below re-stacks,
     re-columns, or re-flows the page into a different design. */
  body { padding-bottom: 72px; } /* room for the single-row sticky player */
  .header-inner { gap: 10px; padding: 12px 16px; }
  .logo { font-size: 1.15rem; }
  .logo-mark { width: 30px; height: 30px; }
  .header-actions .btn { padding: 8px 12px; }
  /* Signed-in greeting + header Sign Out hide on phones — the name
     and a Sign Out button both live on the Settings page. */
  .auth-greeting { display: none; }
  #signoutBtn { display: none; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); flex-direction: column; padding: 10px 16px 16px;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); margin: 0;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 10px 8px; }
  .nav-toggle { display: block; }
  .header-actions #loginBtn { display: none; }
  .book-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .policy-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .tagline-strip { padding: 12px 0 2px; }
  .tagline-strip h1 { font-size: 1.05rem; }
  .section { padding: 44px 0; }
  /* Main tabs stay in ONE row, all four visible with full labels.
     Subtitles hide at phone width (the titles carry the labels);
     titles may wrap to two lines so every tab keeps its full name. */
  .tabs { flex-direction: row; gap: 6px; }
  .tab-btn { font-size: 0.8rem; padding: 10px 4px; gap: 0; }
  .tab-btn .tab-sub { display: none; }
  /* Cards: same post-style card, tighter, so two fit side by side. */
  .book-cover { height: 56px; padding: 10px 12px; }
  .book-cover .cover-top { flex-wrap: wrap; row-gap: 2px; }
  .book-cover .cover-genre { font-size: 0.62rem; letter-spacing: 0.06em; }
  .book-body { padding: 12px; gap: 8px; }
  .book-title { font-size: 1.05rem; }
  .book-desc { font-size: 0.88rem; }
  .book-meta { gap: 2px; font-size: 0.8rem; }
  .badge { font-size: 0.68rem; padding: 2px 6px; }
  .book-actions { flex-direction: column; align-items: stretch; }
  .book-actions .btn { width: 100%; }
  .voice-select { width: 100%; }
  /* Browse controls wrap into two-across fields; the search takes
     the full row. Nothing scrolls sideways. */
  .browse-field { flex: 1 1 140px; }
  .browse-search { flex: 1 1 100%; }
  /* Sticky player: stays a SINGLE row — cover + info + controls +
     progress inline, nothing wraps below. The tools (voice, speed,
     sleep, chapters) do not fit in the row at phone width and are
     hidden here — voice switching stays on every card and in the
     reader, chapters stay reachable via prev/next. */
  .player-inner { flex-wrap: nowrap; gap: 8px; padding: 8px 12px; }
  .player-cover { width: 36px; height: 36px; font-size: 0.9rem; border-radius: 6px; }
  .player-info { flex: 1 1 auto; min-width: 0; width: auto; }
  .player-controls { gap: 4px; }
  .player-btn { width: 32px; height: 32px; }
  .player-btn.play { width: 40px; height: 40px; }
  .player-progress { flex: 1 1 64px; min-width: 64px; gap: 6px; }
  .player-time { display: none; }
  .player-tools { display: none; }
  .chapter-panel { bottom: 64px; }
  /* iOS Safari auto-zooms any input under 16px on focus — keep
     every text-like input at 16px on phones. */
  select, input[type="text"], input[type="email"], input[type="date"], input[type="search"],
  input[type="password"], textarea { font-size: 16px; }
  /* Reader: same view, slightly tighter. */
  .reader-cover { padding: 20px 18px; }
  .reader-cover .cover-title { font-size: 1.5rem; }
  .reader-head h2 { font-size: 1.6rem; }
  .reader-text { font-size: 1.05rem; line-height: 1.8; }
}

/* ---------------- Reader view + preview gate ---------------- */
body.reading main > :not(#bookView) { display: none !important; }
#bookView { padding: 36px 0 8px; }
.auth-greeting { font-weight: 700; font-size: 0.92rem; color: var(--ink-soft); white-space: nowrap; }
.reader { max-width: 680px; margin: 0 auto; }
.reader-cover {
  border-radius: var(--radius); padding: 28px 24px; color: #fff;
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px;
}
.reader-cover .cover-title { font-family: var(--font-serif); font-size: 1.9rem; line-height: 1.15; font-weight: 700; }
.reader-cover .cover-genre { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.9; }
.reader-cover .cover-meta { font-size: 0.88rem; opacity: 0.9; }
.reader-head h2 { font-size: 2rem; }
.reader-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0 24px; }
.reader-voice { display: inline-flex; gap: 8px; align-items: center; font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); }
.reader-voice select { width: auto; padding: 8px 10px; }
.reader-text { font-family: var(--font-serif); font-size: 1.12rem; line-height: 1.85; }
.reader-text p { margin-bottom: 1.25rem; }
.preview-label {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-dark); margin: 0 0 10px;
}
.preview-snippet {
  font-size: 0.92rem; color: var(--ink-soft); font-style: italic; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* The rest of the teaser on a card: hidden until the preview plays in
   place, then the card expands to show the teaser words right where
   they are (no reader, no new page). The second paragraph is shown
   whole — no clamp — once the card is open. */
.preview-extra { display: none; }
.book-card.teaser-open .preview-extra {
  display: block; -webkit-line-clamp: unset; margin-top: 0.75rem;
}
.preview-end { text-align: center; color: var(--ink-faint); font-size: 0.9rem; margin: 8px 0 24px; }
/* Resume banner + target paragraph — shown when the reader opens a
   book the user left partway through. */
.resume-banner {
  background: var(--accent-soft); border: 1px solid #bae6fd; border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm); padding: 12px 16px; font-weight: 700; color: var(--navy);
  margin: 0 0 20px;
}
.resume-banner .small { font-weight: 400; }
.resume-target { background: var(--accent-soft); border-radius: 6px; padding: 2px 6px; margin-left: -6px; margin-right: -6px; }
.gate-box {
  border: 2px solid var(--accent); background: var(--accent-soft);
  border-radius: var(--radius); padding: 24px; text-align: center;
}
.gate-box h3 { font-size: 1.4rem; }
.gate-box .btn { margin: 6px 4px 0; }
.link-btn {
  background: none; border: none; color: var(--accent); font: inherit;
  font-weight: 700; cursor: pointer; padding: 0;
}
.link-btn:hover { text-decoration: underline; }
.chapter-list button.locked { color: var(--ink-faint); }

/* ---------------- Child / adult mode toggle (Write Your Own) ---------------- */
.mode-card { margin-bottom: 24px; }
.mode-row { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.mode-copy { flex: 1; min-width: 240px; }
.mode-copy h3 { margin-bottom: 4px; }
.mode-toggle { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mode-btn {
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 700;
  padding: 9px 20px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
}
.mode-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.mode-btn.active { background: var(--accent); border-color: var(--accent); color: var(--navy); }
/* The switch is a locked display indicator (set by the birthday on
   the account), so the buttons are always disabled — no opacity
   fade, so the active side stays clearly visible. */
.mode-btn:disabled { cursor: not-allowed; }
.mode-btn:not(.active):disabled:hover { border-color: var(--line); color: var(--ink-soft); }
.badge-child { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.badge-adult { background: var(--accent-soft); color: var(--accent-dark); border: 1px solid #bae6fd; }