/* ─── Entry detail pages ──────────────────────────────────────────────────────
   The one stylesheet shared by BOTH renderings of a detail page: the static
   HTML that scripts/prerender.mjs writes, and the React tree that
   src/entry/StaticEntryView.jsx renders on top of it.

   WHY A STYLESHEET, when the rest of this codebase styles with inline
   style={{}} objects. Two reasons, and both are load-bearing:

     1. The prerenderer cannot know the reader's dark-mode preference, so it
        cannot bake a colour into an inline style. A class plus a
        [data-theme="dark"] variant can be resolved by the browser on the first
        frame, before any JavaScript runs.

     2. The static → React swap has to be invisible. Two independent sets of
        inline styles drift apart on the first edit; one class name cannot.

   Loaded render-blocking from index.html. It is ~2 KB, and being
   render-blocking is the point: it is what makes the LCP element paint styled
   on the very first frame rather than unstyled and then restyled.

   Tokens mirror the app's own palette (src/theme.js) rather than importing it,
   because plain CSS cannot import a JS module. If the app's palette changes,
   change these too. ───────────────────────────────────────────────────────── */

:root {
  --iv-page: #f5f0e8;
  --iv-surface: #ffffff;
  --iv-ink: #1a1a2e;
  --iv-muted: #6b6256;
  --iv-faint: #8b8378;
  --iv-border: #e0d8c8;
  --iv-accent: #b45309;
  --iv-accent-strong: #f59e0b;
}

/* Set by the blocking script in index.html from the same localStorage key the
   app reads (proverbs-dark-mode), so a dark-mode reader never gets a white
   flash before React boots. */
[data-theme="dark"] {
  --iv-page: #0d1117;
  --iv-surface: #161b22;
  --iv-ink: #e6edf3;
  --iv-muted: #8b949e;
  --iv-faint: #6e7681;
  --iv-border: #21262d;
  --iv-accent: #f0b429;
  --iv-accent-strong: #f59e0b;
}

/* The page's base background. On the root element rather than a component, for
   two reasons: the prerendered block lives OUTSIDE #root (main.jsx re-parents
   it), so it has no app wrapper to inherit from; and once EntryPage removes
   that block, React's own .entry-main is transparent. Without this a dark-mode
   reader got near-white text on a white page — verified 2026-09-07.
   App.jsx keeps data-theme in step when the in-app toggle is used. */
html { background: var(--iv-page); }

.entry-main {
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  font-family: 'Comfortaa', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--iv-ink);
  line-height: 1.65;
}

/* The prerendered block sits outside #root (main.jsx re-parents it), so give it
   the page background explicitly — it cannot inherit one from the app shell
   that has not mounted yet. */
#prerender-seo .entry-main { background: var(--iv-page); }

@media (max-width: 640px) {
  .entry-main { padding: 28px 16px 64px; }
}

.iv { overflow-wrap: anywhere; }

.iv-crumbs {
  font-size: 0.85rem;
  color: var(--iv-faint);
  margin: 0 0 18px;
}
.iv-crumbs a { color: var(--iv-faint); text-decoration: none; }
.iv-crumbs a:hover { text-decoration: underline; }
.iv-crumb-sep { color: var(--iv-border); }

.iv-h1 {
  font-family: 'Croissant One', Georgia, serif;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.25;
  margin: 0 0 20px;
  color: var(--iv-ink);
}
@media (max-width: 640px) {
  .iv-h1 { font-size: 1.6rem; }
}

.iv-facts { margin: 0 0 8px; }
.iv-fact { margin: 0 0 12px; }
.iv-fact-lead { font-size: 1.12rem; }
.iv-fact-label { color: var(--iv-accent); font-weight: 700; }

.iv-list, .iv-translations { margin: 32px 0 0; }

.iv-list-h {
  font-family: 'Comfortaa', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--iv-accent);
  margin: 0 0 12px;
}

.iv-list-ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--iv-border);
}
.iv-item {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--iv-border);
}
.iv-item-lang { color: var(--iv-muted); font-weight: 700; }
.iv-item-link { color: var(--iv-ink); text-underline-offset: 2px; }
.iv-item-note { color: var(--iv-muted); }

.iv-more { margin: 12px 0 0; font-size: 0.92rem; }
.iv-more a { color: var(--iv-accent); }

.iv-back { margin: 36px 0 0; font-size: 0.92rem; }
.iv-back a { color: var(--iv-accent); }

.iv-nav {
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--iv-border);
  font-size: 0.9rem;
}
.iv-nav a {
  color: var(--iv-muted);
  margin-right: 16px;
  text-decoration: none;
}
.iv-nav a:hover { text-decoration: underline; }

/* ── Interactive layer ────────────────────────────────────────────────────────
   Rendered only by EntryPage, never by the prerenderer. The static markup
   reserves a same-height slot (.iv-actions-slot) so that when these buttons
   appear the text below them does not shift — a layout shift here would land
   squarely on the LCP element. */
.iv-actions, .iv-actions-slot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 40px;
  margin: 4px 0 8px;
  align-items: center;
}

.iv-btn {
  font-family: 'Comfortaa', system-ui, sans-serif;
  font-size: 0.85rem;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--iv-border);
  background: var(--iv-surface);
  color: var(--iv-muted);
  cursor: pointer;
  line-height: 1.2;
}
.iv-btn:hover { border-color: var(--iv-accent-strong); color: var(--iv-ink); }