/* Shared chrome — the cabinet placeholder palette, base page reset, and
   icon-toolbar register common to reflow.html and reader.html (M5 reader
   redesign — findings/m5-reader-pdf-redesign.md). Extracted rather than
   duplicated: reader.html's own toolbar was asked to match reflow.html's,
   and a second, hand-copied CSS block would drift from the first the
   moment either page's chrome was tuned again. library.html uses the same
   palette values today but isn't linked to this file yet — a reasonable
   follow-up, not done here since it wasn't part of what was asked.

   Each page keeps whatever chrome is genuinely its own: reflow.html's
   book-spread geometry variables, #content-scroll, the TOC dropdown,
   search/highlight styling; reader.html's page-viewport/spread layout.
   Only what both pages use identically lives here. */

:root {
  --ink: #2b2420;
  --ink-soft: #6b6259;
  --rubric: #a63a22;
  --ground: #faf7f2;
  --ground-panel: #fffdfa;
  --line: #e4ddd2;
}
html, body { margin: 0; padding: 0; height: 100%; font-family: system-ui, sans-serif; }
body { display: flex; flex-direction: column; background: var(--ground); color: var(--ink); }

/* Paper texture overlay — pointer-events:none is load-bearing (without it
   this canvas eats every click meant for the page beneath it). Position
   is deliberately NOT set here: reflow.html covers the whole viewport
   (position:fixed), reader.html covers just its own page area
   (position:absolute inside a positioned container) — each page supplies
   that one rule itself. */
.texture-overlay { pointer-events: none; z-index: 9000; opacity: 0.3; mix-blend-mode: multiply; }

/* No border, no distinct background — the toolbar sits directly on the
   page's own --ground (it was never given a background of its own) so it
   reads as part of the page rather than a strip of app chrome bolted onto
   it. Alexandria Press reference: .reader-toolbar is fully transparent
   for the same reason. */
header {
  display: flex; align-items: center; gap: 1em;
  padding: 0.7em 1.2em; flex: none;
}
header a { color: var(--rubric); text-decoration: none; font-size: 0.9em; }
header a:hover { text-decoration: underline; }
header h1 {
  font-family: Georgia, "Times New Roman", serif; font-weight: 400;
  font-size: 1.05em; margin: 0;
}
header h1 #work-name { color: var(--ink-soft); }
#status { color: var(--rubric); font-size: 0.9em; }

/* Chrome buttons — icon-only variants (page-nav's chevrons, the TOC
   trigger) get a fixed square footprint instead of text padding, matching
   the reference's icon-first register: an SVG centered in a button reads
   as a control at a glance the way a bare glyph doesn't need to, so no
   visible label is needed. stroke="currentColor" on the SVGs themselves is
   what makes them pick up .chrome-btn's own color/hover transition for
   free, no separate icon-color rule. */
.chrome-btn {
  font: inherit; font-size: 0.85em; padding: 0.35em 0.6em; border-radius: 4px;
  border: none; background: transparent; color: var(--ink-soft);
  cursor: pointer;
}
.chrome-btn:hover:not(:disabled) { background: rgba(43,36,32,0.07); color: var(--rubric); }
.chrome-btn:disabled { opacity: 0.4; cursor: default; }
.chrome-btn.icon-btn {
  width: 2em; height: 2em; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.chrome-btn.icon-btn svg { width: 1.15em; height: 1.15em; }