/* operator-skin.css — site-harmonization layer for the Read-Along Books demo.
 *
 * This demo is a FROZEN ARTIFACT (PROJECTS-INTEGRATION-PLAN W2): the two
 * book pages are build_book.py output (their shared book CSS is an inline
 * <style>), avatar.css/avatar JS are the offline avatar widget, and
 * index.html is the demo landing. None of those files are edited; this
 * stylesheet is injected as the LAST stylesheet <link> on all three HTML
 * pages (href "operator-skin.css" from the landing, "../operator-skin.css"
 * from Books/) and remaps the purple identity onto the site's operator
 * scheme (DESIGN-REWORK-status-first §1): warm paper reading surface, ink
 * text, green links/actions, ALWAYS-DARK data/code panels (#1c1916/#d6cfc0
 * — the family signature), flat chrome. The avatar panel is harmonized via
 * overrides on avatar.css classes only — avatar/*.js, the import map and
 * the read-along/lip-sync pipeline are untouched. The file:// guard
 * banner's inline styles are already alert-styled and are left alone.
 * If the demo is ever re-synced from upstream, re-inject the <link> tags
 * and keep this file. Offline-first: no external URLs.
 */

/* ---------- token remap (same :root var names on landing + books) ---------- */
:root {
  --ink: #1a1613;
  --muted: #6c5f4c;
  --accent: #2f6f48;     /* purple -> operator green */
  --line: #e3dccd;
  --bg: #f4f1ea;
  --code: #1c1916;       /* code ground goes always-dark (family signature) */
}

/* ---------- landing page (no data-book attr; books are body[data-book]) ---------- */
body:not([data-book]) { font-family: Inter, "Segoe UI", system-ui, sans-serif; }
.card { background: #fffdf8; border-radius: 8px; }
.note { background: #efe9dc; color: #6c5f4c; border-radius: 0 6px 6px 0;
        border-left-color: #c2a23a; }   /* callouts carry the gold left border */

/* ---------- book reading surface: warm paper + ink, green links ----------
   (the serif reading face is kept — the book is an editorial artifact;
   chrome around it goes Inter-first) */
nav, .cover .meta, .volhead, .chapter .vol-tag, .refs, .refs h4,
.backtop, #resume, #resume button, .ch-audio .follow {
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}
nav { background: #fffdf8; }
nav a { color: #6c5f4c; }
.summary { color: var(--ink); border-left-color: #c2a23a; }  /* gold callout border */
.chapter h4 { color: var(--ink); }
.refs { color: #6c5f4c; }
.keyworks { background: #fffdf8; }
.ch-audio { background: #fffdf8; border-radius: 8px; }
#resume { background: #fffdf8; box-shadow: none; border-radius: 8px; }
#resume button { border-radius: 6px; }
#resume button.rgo { color: #ffffff; }
#resume button.rgo:hover { background: #285f3e; border-color: #285f3e; }

/* always-dark data/code panels — dark even in light mode */
pre { background: #1c1916; color: #d6cfc0; border-color: #3a342c; }
code { background: #1c1916; color: #d6cfc0; border-radius: 3px; }
pre code { background: none; }

/* read-along highlight: purple wash -> warm green wash (sync JS untouched,
   it only toggles the .rs-on class) */
.chapter span.rs-on { background: #dcead9; box-shadow: 0 0 0 2px #dcead9; }
.chapter h3.rs-on { background: linear-gradient(transparent 60%, #c8ddc6 60%); }
.chapter .rs-block.rs-on { background: #ecf2e9; }

/* ---------- avatar panel chrome (avatar.css overrides only) ---------- */
#uol-avatar {
  background: #fffdf8; border-color: #e3dccd; border-radius: 8px;
  box-shadow: none;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}
#uol-avatar .uol-stage { background: #efe9dc; }
#uol-avatar .uol-bar { border-top-color: #e3dccd; }
#uol-avatar .uol-name { color: #1a1613; }
#uol-avatar .uol-state { color: #2f6f48; }
#uol-avatar .uol-hide { color: #8a7a66; }
#uol-avatar .uol-dot { background: #b9b1a0; }
#uol-avatar.uol-speaking .uol-dot { background: #3a9d5d; }
/* speaking pulse re-keyed to the status green (the 3px rgba status glow is
   the one sanctioned "shadow" in the operator scheme) */
@keyframes uol-pulse {
  0% { box-shadow: 0 0 0 0 rgba(58, 157, 93, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(58, 157, 93, 0); }
  100% { box-shadow: 0 0 0 0 rgba(58, 157, 93, 0); }
}
#uol-av3d {
  background: #fffdf8; border-color: #e3dccd; border-radius: 8px;
  box-shadow: none;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}
#uol-av3d canvas { background: #efe9dc; }
#uol-av3d .uol-av3d-x { color: #8a7a66; }
#uol-av3d .uol-av3d-x:hover { color: #6c5f4c; }
.uol-tx { border-top-color: #e3dccd; }
.uol-tx-title { color: #1a1613; }
.uol-tx-seek { background: #e3dccd; }
.uol-tx-b { background: #efe9dc; color: #2f6f48; border-radius: 6px; }
.uol-tx-b:hover { background: #f1ebde; }
.uol-tx-pp { background: #2f6f48; color: #ffffff; }
.uol-tx-pp:hover { filter: none; background: #285f3e; }  /* hover = background shift, not brightness */
.uol-tx-time { color: #8a7a66; }

/* ---------- dark mode (site operator dark values) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8e2d6;
    --muted: #b3a890;
    --accent: #6fae84;
    --line: #3a342c;
    --bg: #1c1916;
  }
  .card { background: #26221d; }
  .note { background: #26221d; color: #b3a890; }
  nav { background: #26221d; }
  nav a { color: #b3a890; }
  .summary, .chapter h4 { color: var(--ink); }
  .refs { color: #b3a890; }
  .keyworks, .ch-audio, #resume { background: #26221d; }
  #resume button { background: #322c25; color: #e8e2d6; }
  #resume button.rgo { background: #2f6f48; border-color: #2f6f48; color: #e8e2d6; }
  .chapter span.rs-on { background: #2c3a2e; box-shadow: 0 0 0 2px #2c3a2e; }
  .chapter h3.rs-on { background: linear-gradient(transparent 60%, #2c3a2e 60%); }
  .chapter .rs-block.rs-on { background: #242b22; }
  #uol-avatar, #uol-av3d { background: #26221d; border-color: #3a342c; }
  #uol-avatar .uol-stage, #uol-av3d canvas { background: #322c25; }
  #uol-avatar .uol-bar, .uol-tx { border-top-color: #3a342c; }
  #uol-avatar .uol-name, .uol-tx-title { color: #e8e2d6; }
  #uol-avatar .uol-state { color: #6fae84; }
  .uol-tx-seek { background: #3a342c; }
  .uol-tx-b { background: #322c25; color: #6fae84; }
  .uol-tx-b:hover { background: #3a342c; }
  .uol-tx-pp { background: #2f6f48; color: #e8e2d6; }
  .uol-tx-time, #uol-avatar .uol-hide, #uol-av3d .uol-av3d-x { color: #b3a890; }
}