/* =========================================================================
   Road of Truth – styles
   Mobile first: base rules are for phones, media queries add desktop tweaks.
   Colors are tokens on :root so light and dark mode only swap values.
   ========================================================================= */

/* ---------- Color tokens: light (default) ---------- */
:root {
  --bg: #f6f3ee;
  --surface: #ffffff;
  --surface-2: #efebe4;
  --text: #1f2328;
  --muted: #565c63;
  --border: #ddd6cb;
  --accent: #3a7d44;          /* buttons, current position */
  --accent-text: #ffffff;     /* text on accent */
  --accent-soft: #e2f0e3;     /* chosen answer, highlights */
  --road: #c7bfb2;            /* unvisited road and map lines */
  --path: #3a7d44;            /* visited road and map path */
  --draft: #9a4a00;           /* developer view: draft marker */
  --draft-soft: #fdebd3;
  --unsure: #946200;          /* "Not sure" trail (yellow) */
  --unsure-soft: #fbefd6;
  --unsure-text: #ffffff;
  --no: #ad4a3b;              /* "No" trail (soft clay) */
  --no-soft: #f8e3de;
  --no-text: #ffffff;
  --neutral: #6a4f9e;         /* soft purple: pauses and off-the-road actions (see .utility) */
  --neutral-soft: #eee8f7;
  --neutral-text: #ffffff;
  --danger: #a12a2a;
  --focus: #1f5fbf;

  /* "Go" green that stays green inside yellow or clay cards (used by button previews).
     It copies the default green here, at the top of the page, so cards that swap
     --accent for another color don't change it. Works in dark mode too. */
  --go: var(--accent);
  --go-soft: var(--accent-soft);
  --go-text: var(--accent-text);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 20px rgba(0, 0, 0, 0.06);

  --radius: 22px;
  --radius-small: 12px;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;

  color-scheme: light;
}

/* ---------- Color tokens: dark ---------- */
/* Follows the system setting unless the visitor picked "light" with the theme switch. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131519;
    --surface: #1c1f25;
    --surface-2: #252930;
    --text: #ecebe7;
    --muted: #a7acb3;
    --border: #2f343c;
    --accent: #7fc98d;
    --accent-text: #0c1a10;
    --accent-soft: #213a27;
    --road: #3d434c;
    --path: #7fc98d;
    --draft: #f2a33a;
    --draft-soft: #3a2a14;
    --unsure: #e3b453;
    --unsure-soft: #3a2f16;
    --unsure-text: #1c1400;
    --no: #e6907f;
    --no-soft: #3d2621;
    --no-text: #240d09;
    --neutral: #b9a2e3;
    --neutral-soft: #2b2340;
    --neutral-text: #170f27;
    --danger: #f08080;
    --focus: #8ab4ff;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
  }
}

/* Same dark values when the visitor picks "dark" with the theme switch. */
:root[data-theme="dark"] {
  --bg: #131519;
  --surface: #1c1f25;
  --surface-2: #252930;
  --text: #ecebe7;
  --muted: #a7acb3;
  --border: #2f343c;
  --accent: #7fc98d;
  --accent-text: #0c1a10;
  --accent-soft: #213a27;
  --road: #3d434c;
  --path: #7fc98d;
  --draft: #f2a33a;
  --draft-soft: #3a2a14;
  --unsure: #e3b453;
  --unsure-soft: #3a2f16;
  --unsure-text: #1c1400;
  --no: #e6907f;
  --no-soft: #3d2621;
  --no-text: #240d09;
  --neutral: #b9a2e3;
  --neutral-soft: #2b2340;
  --neutral-text: #170f27;
  --danger: #f08080;
  --focus: #8ab4ff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}

/* ---------- Trail colors ----------
   Green is the default. On the "Not sure" trail the card switches to yellow,
   on the "No" trail to soft clay. The same classes color the road bar and map,
   because those use --path and --accent-soft too. */
.bubble[data-tone="unsure"],
.tone-unsure {
  --accent: var(--unsure);
  --accent-soft: var(--unsure-soft);
  --accent-text: var(--unsure-text);
  --path: var(--unsure);
}

.bubble[data-tone="no"],
.tone-no {
  --accent: var(--no);
  --accent-soft: var(--no-soft);
  --accent-text: var(--no-text);
  --path: var(--no);
}

/* Soft purple for "pause" cards: the "Not yet" page and the declined ending. */
.bubble[data-tone="neutral"],
.tone-neutral {
  --accent: var(--neutral);
  --accent-soft: var(--neutral-soft);
  --accent-text: var(--neutral-text);
  --path: var(--neutral);
}

/* Soft purple for actions that step off the road rather than move along it:
   Start over, Look back over the road, Revisit this stage, the map's buttons.
   Green (or the trail color) stays reserved for moving forward. */
.utility {
  --accent: var(--neutral);
  --accent-soft: var(--neutral-soft);
  --accent-text: var(--neutral-text);
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: normal;
  line-height: 1.25;
}

a {
  color: var(--accent);
}

button {
  font: inherit;
  color: inherit;
}

/* One clear focus style everywhere (keyboard users only). */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-small);
  box-shadow: var(--shadow);
}

.skip-link:focus {
  top: 12px;
}

.noscript {
  padding: 24px 16px;
  text-align: center;
}

/* ---------- Buttons ---------- */
.icon-button,
.text-button {
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
}

.icon-button:hover,
.text-button:hover {
  background: var(--surface-2);
}

.text-button.utility {
  color: var(--accent);
  border-color: var(--accent);
}

.text-button.utility:hover {
  background: var(--accent-soft);
}

/* ---------- Header and road bar ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 8px 16px 6px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 720px;
  margin: 0 auto;
}

/* The site name is also a button that starts over from the first question. */
.site-name {
  min-height: 44px;
  margin: 0 0 0 -15px;   /* keeps the text lined up with the road bar */
  padding: 0 14px;
  border: 1px solid transparent;   /* same size as the Auto button's border, but invisible */
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  cursor: pointer;
}

/* On hover, show the same pill as the Auto button so it reads as a button. */
.site-name:hover {
  border-color: var(--border);
  background: var(--surface);
}

#theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
}

.theme-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

:root[data-theme="light"] .theme-icon {
  background: transparent;
}

:root[data-theme="dark"] .theme-icon {
  background: currentColor;
}

/* The whole road bar is one button that opens the map. */
.road-bar {
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 6px auto 0;
  padding: 8px 4px 4px;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  cursor: pointer;
  text-align: center;
}

.road-bar:hover {
  background: var(--surface-2);
}

.road-stops {
  display: flex;
  align-items: center;
  width: 100%;
}

/* A stop is one circle; a bridge is the line between two circles. */
.road-stop {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--road);
  background: var(--surface);
}

.road-stop.visited {
  border-color: var(--path);
  background: var(--path);
}

.road-stop.current {
  border-color: var(--path);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--accent-soft);
  width: 22px;
  height: 22px;
}

.road-bridge {
  flex: 1 1 auto;
  min-width: 6px;
  height: 0;
  border-top: 3px solid var(--road);
  margin: 0 3px;
}

.road-bridge.visited {
  border-top-color: var(--path);
}

/* "Continue anyway" crossings are dotted, on the bar and on the map. */
.road-bridge.skipped {
  border-top-style: dotted;
}

.road-caption {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- Main area and bubble ---------- */
/* main is the "stage" the cards slide across. Clipping keeps sliding cards
   from adding scrollbars while they are partly off screen. */
main {
  position: relative;
  min-height: 75vh;
  padding: 20px 16px 48px;
  overflow: hidden;
  overflow: clip;
}

.bubble {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* The old card while it slides away (a copy placed on top of the new one,
   see bubble-view.js). Its position is set from JavaScript. */
.card-ghost {
  position: absolute;
  z-index: 1;
  margin: 0;
  pointer-events: none;
}

.bubble-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

/* Quiet grey Back button that blends into the card until hovered or focused. */
.back-button {
  min-height: 44px;
  margin-left: -8px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.95rem;
  cursor: pointer;
}

.back-button:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* The visitor's answer restated ("There is absolute truth."). On answer cards it
   is also the heading, so it overrides the normal large heading style. */
.bubble .chose {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
}

.continued-note {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 4px solid var(--road);
  background: var(--surface-2);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
}

.bubble h1 {
  margin: 0 0 16px;
  font-size: clamp(1.5rem, 6vw, 2rem);
}

/* Bubbles without their own question text still have a heading for screen readers. */
.bubble h1:focus {
  outline: none;
}

.bubble p {
  margin: 0 0 14px;
}

.short-answer p:first-child {
  font-size: 1.1rem;
}

/* "Explain more" and "Go deeper" disclosures */
.disclosure {
  margin: 8px 0 16px;
}

.disclosure-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}

.disclosure-toggle::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 0.9rem;
  line-height: 1;
}

.disclosure-toggle[aria-expanded="true"]::before {
  content: "−";
}

.disclosure-body {
  padding: 4px 0 0 12px;
  border-left: 3px solid var(--border);
  margin-left: 14px;
}

/* Scripture (KJV) */
.scripture {
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.scripture li + li {
  margin-top: 12px;
}

.scripture blockquote {
  margin: 0;
  padding: 12px 16px;
  background: var(--surface-2);
  border-radius: var(--radius-small);
  font-family: var(--font-heading);
  font-style: italic;
}

.scripture blockquote p {
  margin: 0 0 6px;
}

.scripture cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Answer options */
.options {
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.option-button {
  width: 100%;
  min-height: 52px;
  padding: 12px 18px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background 120ms ease;
}

.option-button:hover {
  background: var(--accent-soft);
}

.option-button.primary {
  background: var(--accent);
  color: var(--accent-text);
}

.option-button.primary:hover {
  filter: brightness(1.08);
}

/* Answer choices (two or more buttons): all look the same at rest, so no answer
   is nudged. Hover, keyboard focus or a tap previews the color of where the
   button leads (set in data-preview by bubble-view.js). */
.option-button.choice {
  border-color: transparent;
  background: var(--surface-2);
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.option-button.choice[data-preview="yes"] {
  --preview: var(--go);
  --preview-soft: var(--go-soft);
  --preview-text: var(--go-text);
}

.option-button.choice[data-preview="unsure"] {
  --preview: var(--unsure);
  --preview-soft: var(--unsure-soft);
  --preview-text: var(--unsure-text);
}

.option-button.choice[data-preview="no"] {
  --preview: var(--no);
  --preview-soft: var(--no-soft);
  --preview-text: var(--no-text);
}

.option-button.choice[data-preview="neutral"] {
  --preview: var(--neutral);
  --preview-soft: var(--neutral-soft);
  --preview-text: var(--neutral-text);
}

.option-button.choice:hover,
.option-button.choice:focus-visible {
  border-color: var(--preview);
  background: var(--preview-soft);
}

.option-button.choice:active {
  border-color: var(--preview);
  background: var(--preview);
  color: var(--preview-text);
}

/* "Not yet" resources */
.resources {
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.resources li {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
}

.resources li + li {
  margin-top: 10px;
}

.resource-type {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.problem {
  color: var(--danger);
}

.loading {
  margin: 0;
  color: var(--muted);
  text-align: center;
}

/* ---------- Map dialog ---------- */
.map-dialog {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--text);
}

.map-dialog[open] {
  display: flex;
  flex-direction: column;
}

.map-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.map-header,
.map-footer {
  padding: 10px 16px;
  background: var(--bg);
}

.map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.map-header h2 {
  margin: 0;
  font-size: 1.25rem;
}

.map-canvas-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

/* The map scrolls sideways. Its height is fitted to this area by map-view.js. */
.map-scroll {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;   /* swiping the map doesn't swipe the page */
  touch-action: pan-x;              /* fingers scroll sideways only */
  background: var(--surface-2);
  cursor: grab;
}

.map-scroll.dragging {
  cursor: grabbing;
  user-select: none;
}

.map-canvas {
  display: block;
  flex: none;
  margin: 0 auto;   /* centered when the whole map fits on screen */
}

.map-footer {
  border-top: 1px solid var(--border);
  max-height: 45vh;
  overflow: auto;
}

.map-list summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}

.map-list ol {
  margin: 4px 0 8px;
  padding-left: 24px;
}

.map-list li {
  margin: 4px 0;
}

.map-list .link-button {
  min-height: 36px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--accent);
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 6px;
}

/* SVG map pieces. Colors come from the same tokens. */
.map-stage-box {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1.5;
}

.map-stage-title {
  fill: var(--text);
  font-family: var(--font-heading);
  font-size: 22px;
}

.map-hub {
  fill: var(--surface);
  stroke: var(--road);
  stroke-width: 3;
}

.map-hub.visited {
  fill: var(--path);
  stroke: var(--path);
}

.map-edge {
  fill: none;
  stroke: var(--road);
  stroke-width: 2;
}

.map-edge.on-path {
  stroke: var(--path);
  stroke-width: 4;
}

.map-edge.dotted {
  stroke-dasharray: 2 7;
  stroke-linecap: round;
}

.map-node circle {
  fill: var(--surface);
  stroke: var(--road);
  stroke-width: 2.5;
}

.map-node.visited circle {
  fill: var(--accent-soft);
  stroke: var(--path);
}

.map-node.visited {
  cursor: pointer;
}

.map-node.current circle {
  fill: var(--path);
  stroke: var(--path);
}

.map-node .map-ring {
  fill: none;
  stroke: var(--path);
  stroke-width: 2;
  opacity: 0.5;
}

.map-node text {
  fill: var(--muted);
  font-size: 12px;
  font-family: var(--font-body);
}

.map-node.visited text {
  fill: var(--text);
}

/* ---------- "Start over?" pop-up ---------- */
.confirm-dialog {
  width: min(380px, calc(100% - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
}

.confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.confirm-card {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.confirm-dialog[open] .confirm-card {
  animation: confirm-in 180ms ease-out;
}

@keyframes confirm-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.confirm-card h2 {
  margin: 0 0 8px;
  font-size: 1.5rem;
}

.confirm-card p {
  margin: 0 0 20px;
  color: var(--muted);
}

/* Side by side when there's room, stacked on very narrow screens. */
.confirm-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.confirm-actions .option-button {
  white-space: nowrap;
}

/* ---------- Developer view (?dev=...) ---------- */
.dev-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.dev-badge {
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
}

.dev-badge.draft {
  border-color: var(--draft);
  background: var(--draft-soft);
  color: var(--text);
}

.dev .bubble.is-draft {
  outline: 3px dashed var(--draft);
  outline-offset: 4px;
}

.map-node.draft circle {
  stroke: var(--draft);
  stroke-dasharray: 4 3;
}

.map-node .map-id {
  fill: var(--draft);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10px;
}

/* Developer view: visitor counts under each card on the map. */
.map-node .map-stats {
  fill: var(--focus);
  font-size: 10px;
  font-weight: 700;
}

.dev-panel {
  max-width: 640px;
  margin: 0 auto 40px;
  padding: 16px 20px;
  border: 2px dashed var(--draft);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.95rem;
}

.dev-panel h2 {
  margin: 0 0 8px;
  font-size: 1.2rem;
}

.dev-panel h3 {
  margin: 16px 0 6px;
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 700;
}

.dev-panel table {
  width: 100%;
  border-collapse: collapse;
}

.dev-panel th,
.dev-panel td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.dev-panel td.num,
.dev-panel th.num {
  text-align: right;
}

.dev-panel ul {
  margin: 0;
  padding-left: 20px;
}

.dev-panel .problem-error {
  color: var(--danger);
}

.dev-jump {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dev-jump select {
  flex: 1 1 200px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

/* ---------- Larger screens ---------- */
@media (min-width: 768px) {
  main {
    padding-top: 40px;
  }

  .bubble {
    padding: 36px 40px;
  }

  .options {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  .map-dialog {
    width: min(1100px, 94vw);
    height: min(860px, 92vh);
    margin: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .map-footer {
    max-height: 30vh;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}