/*
 * Burning Rainbow — book identity layer, built on Threshold's canonical tokens.
 * Per doctrine/design/00a-canonical-base.md rule 2: colours are the only
 * default deviation. Everything else (spacing, radii, type scale, motion)
 * inherits tokens.css verbatim.
 */

:root {
  /* Book identity: warm ink instead of Threshold blue, amber accent instead
     of Lapis — both pulled from the existing token ramps, no new hex. */
  --br-bg:          var(--thx-color-white);
  --br-bg-warm:     #faf7f2;
  --br-text:        var(--thx-color-grey-222);
  --br-text-muted:  var(--thx-color-grey-666);
  --br-surface:     var(--thx-color-grey-eee);
  --br-divider:     var(--thx-color-grey-ddd);
  --br-accent:      var(--thx-color-orange-500);
  --br-accent-hover: var(--thx-color-orange-600);

  /* Heading tier colours, pulled verbatim from the docx's own Heading 1-5
     styles (run/shading fill, BurningRainbow-0.9.docx) - a deliberate
     5-colour system in the original, not part of the token ramp swap. */
  --br-h1-bar:      #264653;
  --br-h2-bar:      #9A8C98;
  --br-h3-text:     #2A9D8F;
  --br-h5-text:     #E5989B;

  /* persistent chrome heights - header/footer are fixed on every page, so
     everything else needs to know how much clearance to leave. */
  --br-header-h: 60px;
  --br-footer-h: 64px;

  /* rainbow motif, used sparingly (progress bar, cover rule, divider) */
  --br-rainbow: linear-gradient(90deg,
    var(--thx-color-crimson) 0%,
    var(--thx-color-orange-500) 20%,
    var(--thx-color-yellow-500) 40%,
    var(--thx-color-green-500) 60%,
    var(--thx-color-lapis) 80%,
    var(--thx-color-purple-500) 100%);
}

:root[data-theme="dark"] {
  --br-bg:          #14110d;
  --br-bg-warm:     #1a1611;
  --br-text:        #ece7de;
  --br-text-muted:  #a8a094;
  --br-surface:     #201b15;
  --br-divider:     #33291f;
  --br-accent:      var(--thx-color-orange-400);
  --br-accent-hover: var(--thx-color-orange-300);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --br-bg:          #14110d;
    --br-bg-warm:     #1a1611;
    --br-text:        #ece7de;
    --br-text-muted:  #a8a094;
    --br-surface:     #201b15;
    --br-divider:     #33291f;
    --br-accent:      var(--thx-color-orange-400);
    --br-accent-hover: var(--thx-color-orange-300);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--br-bg-warm);
  color: var(--br-text);
  font-family: var(--thx-font-body);
  font-size: var(--thx-fs-body);
  line-height: var(--thx-lh-body);
  scrollbar-width: thin;
  scrollbar-color: var(--br-accent) var(--br-bg-warm);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--br-bg-warm); }
::-webkit-scrollbar-thumb { background: var(--br-accent); border-radius: var(--thx-radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--br-accent-hover); }

a { color: var(--br-accent); text-decoration: none; }
a:hover { color: var(--br-accent-hover); text-decoration: underline; }

/* ─── progress bar ──────────────────────────────────────────────── */
.progress-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: var(--br-divider); z-index: 100;
}
.progress-fill {
  height: 100%; width: 0%;
  background: var(--br-rainbow);
  transition: width var(--thx-dur-fast) var(--thx-ease);
}

/* ─── header + footer (fixed, always visible) ───────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--br-header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: clamp(24px, 5vw, 64px);
  background: var(--br-bg);
  box-shadow: var(--thx-shadow-dropdown);
  z-index: 90;
}
.site-header-title {
  font-family: var(--thx-font-headline);
  font-weight: var(--thx-fw-semibold);
  font-size: var(--thx-fs-h4);
  color: var(--br-text) !important;
}
.site-header-title:hover { color: var(--br-accent) !important; text-decoration: none; }

.site-footer {
  position: fixed; bottom: 0; left: 0; right: 0; min-height: var(--br-footer-h);
  display: flex; align-items: center; justify-content: center;
  padding: var(--thx-space-3) clamp(24px, 5vw, 64px);
  background: var(--br-bg);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.10);
  color: var(--br-text-muted); font-size: var(--thx-fs-small);
  text-align: center;
  z-index: 90;
}
.site-footer p { margin: 0; }

/* ─── centred two-column book layout ────────────────────────────── */
.book-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--thx-space-7);
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: clamp(24px, 5vw, 64px);
}

/* ─── sidebar / chapter nav ─────────────────────────────────────── */
.sidebar-spacer {
  /* holds the sidebar's normal-flow slot inside .book-layout so the reading
     column doesn't shift now that .sidebar itself is a fixed-position
     sibling, not a flex child. */
  width: 260px; flex-shrink: 0;
}
.sidebar {
  /* Truly fixed - does not move at all as the page scrolls (not sticky).
     Vertically centred in the space BETWEEN the fixed header and footer
     (not the full viewport - top/bottom offset by their heights so the
     sidebar never sits behind either). Percentages resolve reliably
     against the viewport for position:fixed, unlike position:sticky.
     Horizontally aligned to where the sidebar column would sit inside the
     centred .book-layout (max-width 1120px, clamp(24px,5vw,64px) padding),
     computed here since a fixed element sits outside that flex layout. */
  position: fixed;
  top: calc((100vh + var(--br-header-h) - var(--br-footer-h)) / 2);
  transform: translateY(-50%);
  left: calc(max(0px, (100vw - 1120px) / 2) + clamp(24px, 5vw, 64px));
  width: 260px; flex-shrink: 0;
  max-height: calc(100vh - var(--br-header-h) - var(--br-footer-h) - var(--thx-space-5));
  background: var(--br-bg);
  border-radius: var(--thx-radius-card);
  padding: var(--thx-space-6) var(--thx-space-5);
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: var(--thx-space-5);
  scrollbar-width: thin;
  scrollbar-color: var(--br-accent) var(--br-surface);
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: var(--br-surface); border-radius: var(--thx-radius-pill); }
.sidebar::-webkit-scrollbar-thumb { background: var(--br-accent); border-radius: var(--thx-radius-pill); }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--br-accent-hover); }

.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--thx-space-1); }
.nav-item a {
  display: flex; align-items: baseline; gap: var(--thx-space-3);
  padding: var(--thx-space-2) var(--thx-space-3);
  border-radius: var(--thx-radius-card-sm);
  color: var(--br-text); font-size: var(--thx-fs-small);
  transition: background var(--thx-dur-fast) var(--thx-ease);
}
.nav-item a:hover { background: var(--br-surface); text-decoration: none; }
.nav-item.active a { background: var(--br-surface); color: var(--br-accent); font-weight: var(--thx-fw-medium); }
.nav-num { color: var(--br-text-muted); font-variant-numeric: tabular-nums; font-size: var(--thx-fs-meta); }

.sub-nav-list {
  list-style: none; margin: 0 0 0 var(--thx-space-5); padding: 0;
  display: flex; flex-direction: column; gap: var(--thx-space-1);
}
.sub-nav-item a {
  display: block;
  padding: var(--thx-space-1) var(--thx-space-3);
  margin-left: var(--thx-space-2);
  color: var(--br-text-muted); font-size: var(--thx-fs-meta);
  border-radius: var(--thx-radius-card-sm);
  transition: background var(--thx-dur-fast) var(--thx-ease), color var(--thx-dur-fast) var(--thx-ease);
}
.sub-nav-item a:hover { background: var(--br-surface); color: var(--br-accent); text-decoration: none; }
.sub-nav-item a.current { background: var(--br-surface); color: var(--br-accent); font-weight: var(--thx-fw-medium); }

/* third tier - sub-sub-chapters (h3) nested under their parent h2 */
.sub-sub-nav-list {
  list-style: none; margin: 0 0 0 var(--thx-space-4); padding: 0;
  display: flex; flex-direction: column; gap: var(--thx-space-1);
}
.sub-sub-nav-item a {
  display: block;
  padding: var(--thx-space-1) var(--thx-space-3);
  margin-left: var(--thx-space-2);
  color: var(--br-text-muted); font-size: var(--thx-fs-meta); opacity: 0.85;
  border-radius: var(--thx-radius-card-sm);
  transition: background var(--thx-dur-fast) var(--thx-ease), color var(--thx-dur-fast) var(--thx-ease);
}
.sub-sub-nav-item a:hover { background: var(--br-surface); color: var(--br-accent); text-decoration: none; }
.sub-sub-nav-item a.current { background: var(--br-surface); color: var(--br-accent); font-weight: var(--thx-fw-medium); }

.theme-toggle, .nav-toggle {
  border: none; background: var(--br-surface); color: var(--br-text);
  padding: var(--thx-space-2) var(--thx-space-3);
  border-radius: var(--thx-radius-button);
  font-size: var(--thx-fs-small); cursor: pointer;
  transition: background var(--thx-dur-fast) var(--thx-ease);
}
.theme-toggle:hover { background: var(--br-divider); }

.nav-toggle {
  display: none;
  position: fixed; top: calc(var(--br-header-h) + var(--thx-space-3)); left: var(--thx-space-4); z-index: 101;
}

/* ─── reading column ────────────────────────────────────────────── */
.reading-column {
  width: 100%;
  max-width: 720px;
  padding: calc(var(--br-header-h) + var(--thx-space-8)) 0 calc(var(--br-footer-h) + var(--thx-space-8));
}
.chapter-title, .chapter-body h1 {
  font-family: var(--thx-font-headline); font-weight: var(--thx-fw-bold);
  font-size: var(--thx-fs-h2); line-height: var(--thx-lh-heading);
  margin: 0 0 var(--thx-space-3);
}
/* Chapter title bar - matches the docx's Heading 1 style (dark-fill banner,
   white centred caps text) used on every chapter opener page (e.g.
   BurningRainbow 0.9.0.pdf p.6 "CHAPTER 1: POWER WITHOUT RULE"). The title
   page (front matter) opts out via .title-page-heading below. */
.chapter-title:not(.title-page-heading) {
  background: var(--br-h1-bar);
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  padding: var(--thx-space-4) var(--thx-space-5);
  border-radius: var(--thx-radius-card);
}
.chapter-meta { color: var(--br-text-muted); font-size: var(--thx-fs-meta); margin: 0 0 var(--thx-space-6); }

/* ─── title page (front matter only - matches BurningRainbow 0.9.0.pdf p.1) ── */
.chapter-title.title-page-heading {
  font-family: 'Roboto', var(--thx-font-headline);
  font-weight: var(--thx-fw-regular);
  color: var(--thx-color-grey-666);
  font-size: var(--thx-fs-h1);
  text-align: center;
  margin: var(--thx-space-6) 0 var(--thx-space-4);
}
.title-page-subtitle {
  font-family: var(--thx-font-mono);
  text-align: center;
  font-size: var(--thx-fs-h4);
  margin: 0 0 var(--thx-space-5);
}
.title-page-byline {
  text-align: center; color: var(--thx-color-grey-ddd);
  font-size: var(--thx-fs-small);
  margin: 0 0 var(--thx-space-3);
}
.title-page-yearversion { text-align: center; margin: 0 0 var(--thx-space-7); }
.title-page-year { color: var(--thx-color-grey-ddd); font-size: var(--thx-fs-small); }
.title-page-version { font-weight: var(--thx-fw-medium); }

.centered-statement { text-align: center; margin: 0 0 var(--thx-space-5); }

.voice-comic { font-family: 'Comic Sans MS', 'Comic Sans', cursive; }
.voice-bold-serif { font-family: 'Britannic Bold', Georgia, 'Times New Roman', serif; font-weight: var(--thx-fw-bold); }
.voice-techy {
  font-family: 'AniMe Vision - MB_EN', var(--thx-font-mono);
  font-weight: var(--thx-fw-bold); letter-spacing: 0.04em;
}
/* Generic paragraph-level alignment overrides, used throughout the body text
   wherever the docx set a paragraph's alignment to centre or right (asides,
   single-line reflections, epigraphs) - see chapter_overlays.py. */
.align-center { text-align: center; margin: 0 0 var(--thx-space-5); }
.align-right { text-align: right; margin: 0 0 var(--thx-space-5); }

/* Additional docx display-font "voices" found scattered through the body
   text (not just chapter openers) - same technique as voice-comic etc.
   above, matched exactly against the docx's run-level font names. */
.voice-basier { font-family: 'Basier Circle', var(--thx-font-headline), sans-serif; font-weight: var(--thx-fw-bold); }
.voice-caption { font-family: 'Bahnschrift Light', var(--thx-font-body), sans-serif; color: var(--br-text-muted); font-size: var(--thx-fs-small); }
.voice-condensed-bold { font-family: 'Bahnschrift Light SemiCondensed', var(--thx-font-body), sans-serif; font-weight: var(--thx-fw-bold); letter-spacing: -0.01em; }
.voice-bookman { font-family: 'Bookman Old Style', Georgia, serif; }
.voice-heavy { font-family: 'Arial Black', var(--thx-font-headline), sans-serif; font-weight: var(--thx-fw-bold); }

/* "AI system directive" callout - the one Courier New, individually
   coloured-word passage near the end of Chapter 5 (docx colours reproduced
   verbatim: D86DCB / EE0000 / 4C94D8 / FFFF00). A terminal-style box, the
   only place in the book this voice appears. */
.directive-block {
  font-family: var(--thx-font-mono);
  background: #0d0d0d;
  color: #d0d0d0;
  border-radius: var(--thx-radius-card);
  padding: var(--thx-space-5);
  margin: var(--thx-space-6) 0;
}
.directive-block p { margin: 0 0 var(--thx-space-2); }
.directive-block p:last-child { margin-bottom: 0; }
/* Section banner - docx Heading 2 (mauve fill, white centred caps text),
   used for the roman-numeral section breaks inside a chapter (e.g.
   "I. GOVERNANCE IS NOT THE ISSUE | RULE IS", p.4). */
.chapter-body h2 {
  font-family: var(--thx-font-headline); font-weight: var(--thx-fw-semibold);
  font-size: var(--thx-fs-h3); line-height: var(--thx-lh-heading);
  background: var(--br-h2-bar);
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  padding: var(--thx-space-3) var(--thx-space-5);
  border-radius: var(--thx-radius-card);
  margin: var(--thx-space-7) 0 var(--thx-space-4);
  /* without this, jumping here from the sidebar lands the heading exactly
     behind the fixed header - the reader sees only body text and has no
     idea they arrived anywhere. */
  scroll-margin-top: calc(var(--br-header-h) + var(--thx-space-4));
}
/* Sub-section heading - docx Heading 3 (teal text, centred, no fill),
   e.g. "THE COLLECTIVE THREAD" (p.77). */
.chapter-body h3 {
  font-family: var(--thx-font-headline); font-weight: var(--thx-fw-medium);
  font-size: var(--thx-fs-h4);
  color: var(--br-h3-text);
  text-align: center;
  margin: var(--thx-space-6) 0 var(--thx-space-3);
  scroll-margin-top: calc(var(--br-header-h) + var(--thx-space-4));
}
/* h4/h5 step down from the headline family into body-font labels - a
   distinct fourth and fifth tier, not just a smaller h3. h4 stays orange
   (docx Heading 4 fill F4A261, close enough to --br-accent to reuse it);
   h5 gets its own docx colour (Heading 5 fill E5989B) rather than muted grey. */
.chapter-body h4 {
  font-family: var(--thx-font-body); font-weight: var(--thx-fw-semibold);
  font-size: var(--thx-fs-small); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--br-accent);
  margin: var(--thx-space-5) 0 var(--thx-space-2);
}
.chapter-body h5 {
  font-family: var(--thx-font-body); font-weight: var(--thx-fw-regular); font-style: italic;
  font-size: var(--thx-fs-small); color: var(--br-h5-text);
  margin: var(--thx-space-4) 0 var(--thx-space-2);
}
.chapter-body p { margin: 0 0 var(--thx-space-5); }
.chapter-body strong { font-weight: var(--thx-fw-semibold); }
.chapter-body em { font-style: italic; }

.chapter-body img {
  display: block; max-width: 100%; height: auto;
  border-radius: var(--thx-radius-card);
  margin: var(--thx-space-6) auto;
  box-shadow: var(--thx-shadow-card-hover);
}

.chapter-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--thx-space-4);
  margin-top: var(--thx-space-8);
}
.chapter-nav-link { font-size: var(--thx-fs-small); color: var(--br-text); }
.chapter-nav-link:hover { color: var(--br-accent); }
.chapter-nav-link.next { text-align: right; }

/* ─── cover page ─────────────────────────────────────────────────── */
.cover-body { background: var(--br-bg-warm); }
.cover {
  max-width: 640px; margin: 0 auto;
  padding: calc(var(--br-header-h) + var(--thx-space-9)) var(--thx-space-6) calc(var(--br-footer-h) + var(--thx-space-9));
  text-align: center;
}
.cover-rule { height: 4px; width: 96px; margin: 0 auto var(--thx-space-6); background: var(--br-rainbow); border-radius: var(--thx-radius-pill); }
.cover-eyebrow { color: var(--br-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--thx-fs-meta); margin: 0 0 var(--thx-space-2); }
.cover-title { font-family: var(--thx-font-headline); font-size: var(--thx-fs-h1); font-weight: var(--thx-fw-bold); margin: 0 0 var(--thx-space-3); }
.cover-author { color: var(--br-text-muted); margin: 0 0 var(--thx-space-6); }
.cover-blurb { font-size: var(--thx-fs-h4); line-height: var(--thx-lh-body); margin: 0 0 var(--thx-space-6); }
.cta {
  display: inline-block; background: var(--br-accent); color: var(--thx-color-white) !important;
  padding: var(--thx-space-3) var(--thx-space-6); border-radius: var(--thx-radius-button);
  font-weight: var(--thx-fw-medium);
  transition: background var(--thx-dur-fast) var(--thx-ease);
}
.cta:hover { background: var(--br-accent-hover); text-decoration: none; }

.toc { list-style: none; margin: var(--thx-space-9) 0 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: var(--thx-space-2); }
.toc a {
  display: flex; align-items: baseline; gap: var(--thx-space-4);
  padding: var(--thx-space-4); border-radius: var(--thx-radius-card-sm); color: var(--br-text);
}
.toc a:hover { background: var(--br-surface); color: var(--br-accent); text-decoration: none; }
.toc-num { color: var(--br-text-muted); font-variant-numeric: tabular-nums; }
.toc-title { flex: 1; text-align: left; }
.toc-meta { color: var(--br-text-muted); font-size: var(--thx-fs-meta); }

/* ─── responsive ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .book-layout { display: block; padding-inline: var(--thx-space-4); }
  .sidebar-spacer { display: none; }
  .sidebar {
    position: fixed; top: 0; left: -280px; bottom: 0; width: 280px; max-height: none;
    transform: none;
    border-radius: 0;
    transition: left var(--thx-dur-default) var(--thx-ease-out);
    z-index: 100; box-shadow: var(--thx-shadow-modal);
  }
  .sidebar.open { left: 0; }
  .nav-toggle { display: block; }
  .reading-column { max-width: none; padding-top: calc(var(--br-header-h) + var(--thx-space-9)); }
}