/* Per-track themes — variables set on .page.theme-* */

.page {
  --accent: #f07820;
  --accent-soft: rgba(240, 120, 32, 0.14);
  --accent-glow: rgba(240, 120, 32, 0.42);
  --surface: #f6f2e9;
  --surface-ink: #0f2535;
  --surface-muted: #3b5360;
  --surface-accent-text: #815126;
  --hero-bg: radial-gradient(ellipse 62% 26% at 50% 4%, rgba(240,120,32,.10), transparent 72%), linear-gradient(155deg, #0f2535, #081521 68%);
  --nav-border: rgba(138, 176, 184, 0.17);
  --text-muted: #b1c4ca;
  --marker-border: #8ab0b8;
  --marker-bg: #0f2535;
  --trail-line: rgba(138, 176, 184, 0.26);
  --card-radius: 15px;
  --font-serif: "Fraunces", Georgia, serif;
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

.page.theme-bridge {
  --accent: #e8a838;
  --accent-soft: rgba(232, 168, 56, 0.16);
  --accent-glow: rgba(232, 168, 56, 0.5);
  --hero-bg:
    linear-gradient(180deg, rgba(8,21,33,0.2), rgba(8,21,33,0.92)),
    linear-gradient(135deg, #2d1b0e 0%, #1a3a52 45%, #4a2818 100%);
}
.page.theme-bridge .hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(0deg, rgba(26,58,82,0.55), transparent);
  pointer-events: none;
}

.page.theme-laws {
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, 0.12);
  --accent-glow: rgba(37, 99, 235, 0.35);
  --surface: #ffffff;
  --hero-bg: linear-gradient(160deg, #0f172a 0%, #1e3a5f 55%, #0f2535 100%);
}
.page.theme-laws.layout-cards .card {
  border: 1px solid rgba(37, 99, 235, 0.15);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.18);
}
.page.theme-laws .marker {
  border-radius: 10px;
  font-size: 11px;
  letter-spacing: 0.02em;
  width: 52px;
  height: 52px;
}

.page.theme-fork {
  --accent: #d4a017;
  --accent-soft: rgba(212, 160, 23, 0.14);
  --accent-glow: rgba(212, 160, 23, 0.45);
  --hero-bg:
    linear-gradient(125deg, #1a2332 0%, #1a2332 49.5%, #2a1810 49.5%, #3d2818 100%);
}
.page.theme-fork .stop:nth-child(odd) .card { border-left: 4px solid #64748b; }
.page.theme-fork .stop:nth-child(even) .card { border-left: 4px solid var(--accent); }
.page.theme-fork .fork-banner {
  width: min(100%, 760px);
  margin: 0 auto 48px;
  padding: 20px 24px;
  text-align: center;
  border: 1px dashed rgba(212, 160, 23, 0.35);
  border-radius: 14px;
  color: var(--text-muted);
  font: 500 13px/1.6 var(--font-sans);
}

.page.theme-circles {
  --accent: #2a9d8f;
  --accent-soft: rgba(42, 157, 143, 0.14);
  --accent-glow: rgba(42, 157, 143, 0.45);
  --hero-bg: radial-gradient(circle at 50% 30%, rgba(42,157,143,0.22), transparent 55%), linear-gradient(155deg, #0f2535, #081521);
}
.page.theme-circles .marker {
  width: 68px;
  height: 68px;
  border-width: 3px;
  font-size: 11px;
}
.page.theme-circles .stop.active .marker {
  box-shadow: 0 0 0 10px var(--accent-soft), 0 0 32px var(--accent-glow);
}
.page.theme-circles .card {
  border-radius: 24px;
  border-top: 4px solid var(--accent);
}

.page.theme-book {
  --accent: #ffd700;
  --accent-soft: rgba(255, 215, 0, 0.2);
  --surface: #fffef8;
  --font-serif: "Nunito", "IBM Plex Sans", sans-serif;
  --font-sans: "Nunito", "IBM Plex Sans", sans-serif;
  --hero-bg: linear-gradient(135deg, #ffd700 0%, #dc3545 25%, #1a1a1a 50%, #f8f9fa 75%, #28a745 100%);
  --hero-bg: linear-gradient(155deg, #1a1a2e, #16213e);
}
.page.theme-book .hero h1 { font-family: "Nunito", sans-serif; font-weight: 800; }
.page.theme-book .card { border-radius: 20px; font-size: 1.02rem; }
.page.theme-book .card h2 { font-family: "Nunito", sans-serif; font-weight: 800; }
.page.theme-book.layout-book .stops { gap: 24px; }
.page.theme-book.layout-book .stop { display: block; }
.page.theme-book.layout-book .marker { display: none; }
.page.theme-book.layout-book .card {
  padding: 0;
  overflow: hidden;
  color: #fff;
  background: var(--stop-color, #333);
}
.page.theme-book.layout-book .card-inner { padding: 26px 24px 22px; }
.page.theme-book.layout-book .card--gold { --stop-color: linear-gradient(135deg, #b8860b, #ffd700); color: #1a1200; }
.page.theme-book.layout-book .card--gold .reference { color: #5c4a00; }
.page.theme-book.layout-book .card--black { --stop-color: linear-gradient(135deg, #0d0d0d, #2d2d2d); }
.page.theme-book.layout-book .card--red { --stop-color: linear-gradient(135deg, #8b0000, #dc3545); }
.page.theme-book.layout-book .card--clean { --stop-color: linear-gradient(135deg, #e8e8e8, #ffffff); color: #1a1a1a; }
.page.theme-book.layout-book .card--clean .reference { color: #555; }
.page.theme-book.layout-book .card--green { --stop-color: linear-gradient(135deg, #1e5631, #28a745); }
.page.theme-book.layout-book .card--gold { background: linear-gradient(135deg, #b8860b, #ffd700); }
.page.theme-book.layout-book .card--black { background: linear-gradient(135deg, #0d0d0d, #2d2d2d); }
.page.theme-book.layout-book .card--red { background: linear-gradient(135deg, #8b0000, #dc3545); }
.page.theme-book.layout-book .card--clean { background: linear-gradient(135deg, #e8e8e8, #ffffff); color: #1a1a1a; }
.page.theme-book.layout-book .card--green { background: linear-gradient(135deg, #1e5631, #28a745); }
.page.theme-book.layout-book blockquote { border-left-color: rgba(255,255,255,0.45); color: inherit; }
.page.theme-book.layout-book .card--clean blockquote { border-left-color: var(--accent); }
.page.theme-book.layout-book .card:not(.card--clean) .fill-label,
.page.theme-book.layout-book .card:not(.card--clean) .fill-sentence,
.page.theme-book.layout-book .card:not(.card--clean) .fill-feedback,
.page.theme-book.layout-book .card:not(.card--clean) .why-toggle { color: rgba(255,255,255,0.92); }
.page.theme-book.layout-book .card:not(.card--clean) .reference { color: rgba(255,255,255,0.75); }
.page.theme-book.layout-book .fill-blank { border-top-color: rgba(255,255,255,0.2); }
.page.theme-book.layout-book .card--clean .fill-blank { border-top-color: rgba(0,0,0,0.1); }
.page.theme-book.layout-book .fill-sentence input { background: rgba(255,255,255,0.25); color: inherit; }
.page.theme-book.layout-book .card--clean .fill-sentence input { background: rgba(0,0,0,0.06); color: #1a1a1a; }
.page.theme-book.layout-book .block-photo img { background: rgba(0,0,0,0.15); }
.page.theme-book.layout-book .card:not(.card--clean) .block-text,
.page.theme-book.layout-book .card:not(.card--clean) .block-label,
.page.theme-book.layout-book .card:not(.card--clean) .block-photo figcaption,
.page.theme-book.layout-book .card:not(.card--clean) .mc-feedback,
.page.theme-book.layout-book .card:not(.card--clean) .reflection-prompt span { color: rgba(255,255,255,0.9); }
.page.theme-book.layout-book .card:not(.card--clean) .mc-option,
.page.theme-book.layout-book .card:not(.card--clean) .choice-path,
.page.theme-book.layout-book .card:not(.card--clean) .checklist-item { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.25); }
.page.theme-book.layout-book .card:not(.card--clean) .reflection-prompt textarea { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.25); }

.page.theme-assurance {
  --accent: #9b8ec4;
  --accent-soft: rgba(155, 142, 196, 0.18);
  --accent-glow: rgba(155, 142, 196, 0.5);
  --hero-bg:
    radial-gradient(ellipse 80% 50% at 50% 20%, rgba(155,142,196,0.25), transparent 70%),
    linear-gradient(165deg, #1a1528, #0d1117);
}
.page.theme-assurance .card {
  background: linear-gradient(180deg, #faf8ff, #f0ecf8);
  border: 1px solid rgba(155, 142, 196, 0.25);
}
.page.theme-assurance .marker {
  border-radius: 50%;
  box-shadow: 0 0 20px var(--accent-soft);
}

.page.theme-foundations {
  --accent: #8b7355;
  --accent-soft: rgba(139, 115, 85, 0.16);
  --accent-glow: rgba(139, 115, 85, 0.4);
  --surface: #f5f0e6;
  --hero-bg: linear-gradient(155deg, #2c2419, #1a1520 50%, #1e3a5f);
}
.page.theme-foundations .marker {
  border-radius: 4px;
  width: 64px;
  height: 44px;
  font-size: 10px;
}
.page.theme-foundations .card {
  border-radius: 4px 4px 12px 12px;
  border-bottom: 4px solid var(--accent);
  background: linear-gradient(180deg, #faf6ee, #ebe3d4);
}

.page.theme-wheel {
  --accent: #f07820;
  --accent-soft: rgba(240, 120, 32, 0.14);
  --hero-bg: radial-gradient(circle at 50% 45%, rgba(240,120,32,0.15), transparent 50%), linear-gradient(155deg, #0f2535, #081521);
}
.page.theme-wheel .marker {
  border-radius: 50%;
  font-size: 10px;
  line-height: 1.1;
  padding: 4px;
  text-align: center;
}
.page.theme-wheel.layout-wheel .wheel-hub {
  width: min(100%, 760px);
  margin: 0 auto 56px;
  padding: 28px;
  text-align: center;
  border: 2px solid rgba(240,120,32,0.35);
  border-radius: 50%;
  aspect-ratio: 1;
  max-width: 220px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(240,120,32,0.12), transparent 70%);
  color: var(--text-muted);
  font: 600 13px/1.4 var(--font-sans);
}
.page.theme-wheel.layout-wheel .wheel-hub strong {
  display: block;
  color: var(--accent);
  font: 700 22px/1.1 var(--font-serif);
}

.page.theme-disciplines {
  --hero-bg: linear-gradient(155deg, #1a2f1a, #0f2535);
}
.page.theme-disciplines .stop[data-accent="scripture"] { --accent: #c9a227; --accent-soft: rgba(201,162,39,0.15); }
.page.theme-disciplines .stop[data-accent="prayer"] { --accent: #5b8def; --accent-soft: rgba(91,141,239,0.15); }
.page.theme-disciplines .stop[data-accent="fasting"] { --accent: #8b6914; --accent-soft: rgba(139,105,20,0.15); }
.page.theme-disciplines .stop[data-accent="silence"] { --accent: #7b8fa1; --accent-soft: rgba(123,143,161,0.15); }
.page.theme-disciplines .stop[data-accent="worship"] { --accent: #9b59b6; --accent-soft: rgba(155,89,182,0.15); }
.page.theme-disciplines .stop[data-accent="service"] { --accent: #27ae60; --accent-soft: rgba(39,174,96,0.15); }
.page.theme-disciplines .stop[data-accent="stewardship"] { --accent: #e67e22; --accent-soft: rgba(230,126,34,0.15); }
.page.theme-disciplines .discipline-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 22px;
}

/* Shared themed overrides */
.page[class*="theme-"] .hero h1 em { color: var(--accent); }
.page[class*="theme-"] .eyebrow,
.page[class*="theme-"] .reference { color: var(--accent); }
.page[class*="theme-"] .compass-mark,
.page[class*="theme-"] .hero-icon { border-color: var(--accent); box-shadow: 0 0 28px var(--accent-soft); }
.page[class*="theme-"] .compass-mark::before,
.page[class*="theme-"] .hero-icon svg { color: var(--accent); }
.page[class*="theme-"] .scroll-cue span { background: var(--accent); }
.page[class*="theme-"] .back-link:hover { color: var(--accent); }
.page[class*="theme-"] .trail-fill { background: var(--accent); box-shadow: 0 0 15px var(--accent-glow); }
.page[class*="theme-"] .stop.active .marker {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 7px var(--accent-soft), 0 0 24px var(--accent-glow);
}
.page[class*="theme-"] blockquote { border-left-color: var(--accent); }
.page[class*="theme-"] .fill-sentence input { border-bottom-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); }
.page[class*="theme-"] .fill-check,
.page[class*="theme-"] .mentor-cta { background: var(--accent); }
.page[class*="theme-"] .fill-check:hover,
.page[class*="theme-"] .mentor-cta:hover { filter: brightness(1.08); }
.page[class*="theme-"] .why-toggle { color: var(--surface-accent-text); }

.page .hero-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 25px;
  display: grid;
  place-items: center;
}
.page .hero-icon svg { width: 100%; height: 100%; }

.compass-mark {
  width: 54px; height: 54px; margin: 0 auto 25px; position: relative;
  border: 1.5px solid var(--accent); border-radius: 50%; box-shadow: 0 0 28px var(--accent-soft);
}
.compass-mark::before { content: ""; position: absolute; inset: 17px; border-radius: 50%; background: var(--accent); }
.compass-mark::after {
  content: ""; position: absolute; width: 18px; height: 1.5px; background: var(--accent);
  transform: rotate(-45deg); right: -8px; top: 8px; transform-origin: left center;
}

.page.layout-cards .stops { gap: 32px; }
.page.layout-cards .stop { display: block; }
.page.layout-cards .marker { margin: 0 auto 16px; }

.page.layout-book .trail-line { display: none; }

@media (min-width: 680px) {
  .page.layout-cards .stop .card { text-align: left !important; }
  .page.layout-book .card-inner { padding: 32px 28px 26px; }
}