/* The Bible's guided walks and its maps, trees and timelines in the site's
 * shared look (shared/theme.css): white, black, Helvetica, one blue.
 *
 * Each app loads theme.css and then this file after its own styles, and
 * names its family on <body data-look="...">:
 *
 *   parchment  romans-road, kings-timeline, generations, translation-tree,
 *              denomination-tree, church-map: one stylesheet copied six
 *              times (cream paper, Fraunces, an oxblood accent word)
 *   essay      every-spiritual-blessing: the illustrated scrolling walk
 *   sacred     sacred-spaces: the Three.js temples; the 3D scene and its
 *              materials are untouched, only the chrome around it changes
 *   living     living-word: the dark constellation; stays dark
 *
 * Colors that encode data stay: the kings' good/mixed/evil bars, the line
 * of promise (oxblood) and married-in edges (gold) in Generations, the
 * church map's directory dots, density fill and growth rings, the public-
 * domain badge in the trees. Accent colors that only decorated become the
 * site blue (or, on the dark Living Word, a light blue that reads on black).
 */

/* ---------- every page in the group ---------- */

body[data-look] {
  font-variant-numeric: tabular-nums;
}
body[data-look] * { text-transform: none !important; }
/* letter-spaced labels set tight */
body[data-look] * { letter-spacing: 0 !important; }
body[data-look] :is(h1, h2, h3) { letter-spacing: -0.015em !important; }

/* Titles are plain: no italic accent word. */
body[data-look] :is(h1, h2, h3, .title, .wordmark) em {
  font-style: normal !important;
  font-weight: inherit !important;
  color: inherit !important;
}

/* ---------- parchment: the six maps, trees and timelines ---------- */

body[data-look="parchment"] {
  --read-sans: var(--sans);
  --paper: #ffffff;
  --ink: #111111;
  --ink-soft: #555555;
  --ink-faint: #767676;
  --gold-soft: #e2e2e2;
  --hairline: #d9d9d9;
  background: #ffffff;
  background-image: none;
  font-family: var(--sans);
}
body[data-look="parchment"] :is(.wordmark, .title, .detail-name, .now h2) { font-weight: 700; }
body[data-look="parchment"] .tagline,
body[data-look="parchment"] .legend-bar,
body[data-look="parchment"] .colophon { font-style: normal; }
body[data-look="parchment"] :is(.views button, .zoom-controls button):hover {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
body[data-look="parchment"] .views button.active { background: var(--ink); color: #fff; }
body[data-look="parchment"] .tooltip .tip-ref { color: #ffffff; font-weight: 700; }
body[data-look="parchment"] :is(.detail-refs a, .zoom-controls button, .chip) { background: #ffffff; }
body[data-look="parchment"] :is(.detail-refs a:hover, .chip:hover) { background: var(--wash); border-color: var(--blue); }
body[data-look="parchment"] .chip.here { background: var(--wash); border-color: var(--ink); }
body[data-look="parchment"] :is(.node.selected .ring, .node:focus-visible .ring) { stroke: var(--blue); }
body[data-look="parchment"] :is(.colophon a, .wordmark a:hover, .table-view summary:hover) { color: var(--blue); }
body[data-look="parchment"] .wordmark a { color: var(--ink-faint); }
body[data-look="parchment"] .changelog time { color: var(--ink-faint); }

/* Romans Road and the Line of Kings: the oxblood and gold only decorated */
body[data-app="romans-road"],
body[data-app="kings-timeline"] { --oxblood: #1f3fd9; --gold: #1f3fd9; }
body[data-app="romans-road"] { font-family: var(--sans); }
body[data-app="romans-road"] .verse::first-letter { color: inherit; font-size: inherit; }
body[data-app="romans-road"] .thread:hover { background: var(--wash); }
body[data-app="romans-road"] .crumb a { font-size: 0.85rem; }
/* the stops no longer slide in as they scroll into view */
body[data-app="romans-road"] :is(.stop, .now) { opacity: 1; transform: none; transition: none; }
body[data-app="romans-road"] .milestone { transition: none; }

/* The two trees: oxblood was a hover accent */
body[data-app="translation-tree"],
body[data-app="denomination-tree"] { --oxblood: #1f3fd9; }

/* Generations keeps oxblood (the line of promise) and gold (married in) as
   data; its links and the selection ring take the blue */
body[data-app="generations"] .detail-refs a:hover,
body[data-app="generations"] .chip:hover { border-color: var(--blue); }

/* The church map keeps oxblood for the growth rings and the coverage gaps;
   its links and controls take the blue */
body[data-app="church-map"] :is(.page-note a, .popup-meta a, .popup-profile a,
  .method-note a, .method-note code, .colophon a, #pfilter-note,
  .popup-profile.stale, .cov-row:hover .cov-city, .jump:hover) { color: var(--blue); }
body[data-app="church-map"] .jump:hover { border-color: var(--blue); }
body[data-app="church-map"] .map-search:focus { border-bottom-color: var(--blue); }
body[data-app="church-map"] .map-controls input { accent-color: var(--blue); }
body[data-app="church-map"] :is(.leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-tooltip) {
  font-family: var(--sans);
}

/* ---------- essay: Every Spiritual Blessing ---------- */

body[data-look="essay"] {
  --read-sans: var(--sans);
  --cream: #ffffff;
  --paper: #ffffff;
  --ink: #111111;
  --ink-soft: #555555;
  --ink-faint: #767676;
  --gold: #1f3fd9;
  --gold-bright: #1f3fd9;
  --red: #1f3fd9;
  --rule: #d9d9d9;
  background: #ffffff;
  font-family: var(--sans);
}
body[data-look="essay"] .rail { background: rgba(255, 255, 255, 0.95); }
body[data-look="essay"] .hero::after {
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.25), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.92)),
    radial-gradient(ellipse 80% 70% at 28% 55%, rgba(255,255,255,0.88), rgba(255,255,255,0.2) 60%, rgba(255,255,255,0));
}
body[data-look="essay"] .coda::before {
  background: linear-gradient(to bottom, rgba(255,255,255,0.97), rgba(255,255,255,0.72) 45%, rgba(255,255,255,0.97));
}

/* ---------- the walk: type and frames ---------- */

body[data-look="essay"] :is(.hero h1, .interlude p, .item h3, .coda-quote, .ch-mark .n) {
  font-family: var(--sans);
  font-weight: 700;
}
body[data-look="essay"] :is(.interlude p, .coda-quote) { font-weight: 400; }
body[data-look="essay"] .hero h1 { letter-spacing: -0.03em !important; }
body[data-look="essay"] :is(.hero-kicker, .item-kicker, .echo .echo-tag, .ch-mark, .scroll-hint, .rail, .stage-caption) {
  font-weight: 700;
}
body[data-look="essay"] .rail { font-size: 0.8rem; }
body[data-look="essay"] :is(.hero-kicker, .item-kicker, .ch-mark, .stage-caption) { font-size: 0.85rem; }
body[data-look="essay"] .echo .echo-tag { font-size: 0.8rem; }
body[data-look="essay"] .changelog h2 { font-size: 0.85rem; }
/* no paper grain over the pictures */
body[data-look="essay"] .stage-frame::after { background: none; }
body[data-look="essay"] .stage-frame { box-shadow: none; border-radius: 0; }

/* ---------- sacred: Sacred Spaces, the chrome around the 3D scene ---------- */

body[data-look="sacred"] {
  --paper: #ffffff;
  --ink: #111111;
  --muted: #767676;
  --line: #d9d9d9;
  --accent: #1f3fd9;
  --serif: var(--sans);
  font-family: var(--sans);
  background: #ffffff;
}
body[data-look="sacred"] main { background: #ffffff; }
body[data-look="sacred"] :is(.brand, h1, h2) { font-family: var(--sans); font-weight: 700; }
body[data-look="sacred"] h1 { letter-spacing: -0.03em !important; }
body[data-look="sacred"] :is(.lead, .fact span) { font-family: var(--sans); color: #333333; }
body[data-look="sacred"] :is(.edition, .eyebrow, #reading .chapter, #stop-card .chapter, .fact strong) {
  font-size: 12px; font-weight: 700; color: var(--ink);
}
body[data-look="sacred"] :is(.compass span, .scene-caption, #loading) { font-size: 12px; color: #555555; }
body[data-look="sacred"] #reading p:not(.chapter):not(.lead) { color: #333333; }
body[data-look="sacred"] .reader-foot { color: var(--muted); }
body[data-look="sacred"] .reader { background: #ffffff; }
body[data-look="sacred"] .switch { background: #ffffff; border-radius: 0; }
body[data-look="sacred"] button { border-radius: 0; }
body[data-look="sacred"] button:hover:not(:disabled) { background: var(--wash); }
body[data-look="sacred"] :is(.switch button[aria-pressed=true], #walk-hud button[aria-pressed=true],
  .stop[aria-current=step], #next, #card-continue) {
  background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: none;
}
body[data-look="sacred"] #card-continue:hover:not(:disabled),
body[data-look="sacred"] #next:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); }
body[data-look="sacred"] .marker { background: #ffffff; color: var(--ink); border-color: #999999; }
body[data-look="sacred"] .marker[aria-current=true] { background: var(--blue); color: #fff; border-color: #fff; box-shadow: 0 0 0 5px rgba(31, 63, 217, 0.15); }
body[data-look="sacred"] .fact { background: var(--wash); border-left-color: var(--ink); }
body[data-look="sacred"] .fact strong { color: var(--ink); }
body[data-look="sacred"] .references a { color: var(--blue); }
body[data-look="sacred"] .reader a:hover { color: var(--blue); }
body[data-look="sacred"] input { accent-color: var(--blue); }
body[data-look="sacred"] :is(button, a, canvas):focus-visible { outline-color: var(--blue); }
body[data-look="sacred"] .view-tools {
  background: linear-gradient(var(--line), var(--line)) top/calc(100% - 56px) 1px no-repeat, rgba(255, 255, 255, 0.92);
}
body[data-look="sacred"] :is(#stop-card, #walk-hud button) { background: rgba(255, 255, 255, 0.96); border-radius: 0; }
body[data-look="sacred"] #card-more .card-fact { border-left-color: var(--ink); color: #333333; }
body[data-look="sacred"] .card-progress span { background: var(--blue); }
body[data-look="sacred"] :is(.measure-label) { background: var(--blue); border-radius: 0; }
body[data-look="sacred"] .leader-lines line.measure { stroke: var(--blue); }
body[data-look="sacred"] #era-bar button[aria-pressed=true]::before { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 4px rgba(31, 63, 217, 0.15); }
body[data-look="sacred"] #era-bar button[aria-pressed=true] strong { color: var(--blue); }
body[data-look="sacred"] dialog { border-radius: 0; }
@media (max-width: 720px) {
  body[data-look="sacred"] .switch.sites button { background: #ffffff; border-radius: 0; }
  body[data-look="sacred"] .switch.sites button[aria-pressed=true] { background: var(--ink); border-color: var(--ink); }
}

/* ---------- living: The Living Word, dark ---------- */

body[data-look="living"] {
  --night: #0b0b0d;
  --ink: #ececec;
  --ink-dim: #a3a3a3;
  --gold: #9db0ff;            /* the site blue, lightened to read on black */
  --gold-bright: #b9c6ff;
  --hairline: rgba(255, 255, 255, 0.2);
  --glass: rgba(14, 14, 16, 0.82);
  --serif-display: var(--sans);
  --serif-body: var(--sans);
  font-family: var(--sans);
}
html:has(body[data-look="living"]) { background: #0b0b0d; }
/* no glow behind the constellation: plain night */
body[data-look="living"]::before { background: var(--night); }
body[data-look="living"] .masthead-rule { background: var(--ink); }
body[data-look="living"] .masthead h1 { font-weight: 700; }
body[data-look="living"] .masthead .tagline { font-style: normal; color: var(--ink-dim); opacity: 1; }
body[data-look="living"] :is(.panel, .reader) { background: rgba(14, 14, 16, 0.95); }

/* shared/illustrated-walk.css names Fraunces and Georgia; Every Spiritual
   Blessing's copies of those rules (A Cloud of Witnesses, which shares that
   file, keeps its own look) */
body[data-look="essay"] .explore h2 { font-family: var(--sans); font-weight: 700; }
body[data-look="essay"] .stop-link::after { font-family: var(--sans); }
body[data-look="essay"] .contents-panel .contents-chapter { font-weight: 700; }