/* CODEX — sci-fi bible-study terminal stylesheet */

:root {
  --cx-bg: #06080e;
  --cx-bg-2: #0a0e18;
  --cx-fg: #c9d6e6;
  --cx-fg-dim: #6b7c95;
  --cx-line: rgba(126, 224, 255, 0.18);
  --cx-line-strong: rgba(126, 224, 255, 0.5);
  --cx-panel: rgba(10, 16, 28, 0.78);
  --cx-panel-2: rgba(14, 22, 38, 0.95);
  --cx-accent: #7ee0ff;
  --cx-accent-2: #ffc46b;
  --cx-accent-warn: #ff7a7a;
  --cx-accent-glow: rgba(126, 224, 255, 0.4);
  --cx-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);

  --cx-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --cx-sans: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  --cx-serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
}

.cx-app.is-light {
  --cx-bg: #ece4d2;
  --cx-bg-2: #d9cfb8;
  --cx-fg: #1a1d28;
  --cx-fg-dim: #6b6750;
  --cx-line: rgba(11, 28, 50, 0.22);
  --cx-line-strong: rgba(11, 28, 50, 0.45);
  --cx-panel: rgba(248, 241, 224, 0.85);
  --cx-panel-2: rgba(232, 220, 192, 0.95);
  --cx-accent: #0a6884;
  --cx-accent-2: #8a4a05;
  --cx-accent-glow: rgba(10, 104, 132, 0.25);
  --cx-shadow: 0 8px 24px rgba(40, 30, 10, 0.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--cx-bg); }
body { font-family: var(--cx-mono); font-size: 12px; color: var(--cx-fg); }

#root { height: 100%; }

/* ── app shell ─────────────────────────────────────────────────────────── */
.cx-app {
  position: fixed; inset: 0;
  display: grid;
  grid-template-rows: 56px 1fr 36px;
  background: var(--cx-bg);
  color: var(--cx-fg);
  transition: background .8s ease, color .8s ease;
  overflow: hidden;
}

.cx-app::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 20;
  background:
    radial-gradient(ellipse at top, transparent 60%, rgba(0,0,0,.55) 100%),
    radial-gradient(ellipse at bottom, transparent 70%, rgba(0,0,0,.4) 100%);
  opacity: .8; mix-blend-mode: multiply;
}
.cx-app.is-light::before { opacity: .35; mix-blend-mode: multiply;
  background: radial-gradient(ellipse at top, transparent 60%, rgba(60,40,20,.18) 100%); }

.cx-app.has-scan::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 21;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.025) 0,
    rgba(255,255,255,.025) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}
.cx-app.is-light.has-scan::after {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.04) 0,
    rgba(0,0,0,.04) 1px,
    transparent 1px,
    transparent 3px
  );
}

.cx-grid {
  display: grid;
  grid-template-columns: var(--cx-lrail-w, 232px) minmax(0, 1fr) var(--cx-rrail-w, 400px);
  gap: 10px;
  padding: 8px 12px;
  min-height: 0;
  overflow: hidden;
}

/* ── frame primitives ──────────────────────────────────────────────────── */
.cx-frame {
  position: relative;
  background: var(--cx-panel);
  border: 1px solid var(--cx-line);
  padding: 14px;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  backdrop-filter: blur(8px) saturate(140%);
}
.cx-frame.is-glow {
  box-shadow: 0 0 0 1px var(--cx-line-strong), 0 0 32px var(--cx-accent-glow);
}

.cx-corner {
  position: absolute; width: 10px; height: 10px;
  border-color: var(--cx-accent);
  border-style: solid;
}
.cx-tl { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.cx-tr { top: -1px; right: -1px; border-width: 1px 1px 0 0; }
.cx-bl { bottom: -1px; left: -1px; border-width: 0 0 1px 1px; }
.cx-br { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

.cx-frame-label {
  position: absolute; top: -7px; left: 14px;
  background: var(--cx-bg);
  padding: 0 8px;
  font-family: var(--cx-mono);
  font-size: 9.5px; letter-spacing: 0.15em; font-weight: 600;
  color: var(--cx-accent);
  text-transform: uppercase;
  z-index: 2;
  max-width: calc(100% - 32px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* When a frame has a top label, push content down so the bracket doesn't kiss titles. */
.cx-frame:has(> .cx-frame-label) { padding-top: 18px; }

/* ── pills + ticks ─────────────────────────────────────────────────────── */
/* Reader-meta chips — subtle, borderless, elegant. The bordered look
   was too "chunky"; now they read as quiet typographic marks. */
.cx-pill {
  display: inline-flex; align-items: center;
  font-family: var(--cx-mono); font-size: 10px;
  padding: 2px 4px;
  border: none;
  color: var(--cx-fg);
  letter-spacing: 0.08em;
  background: transparent;
  opacity: 0.78;
}
.cx-pill.is-dim { color: var(--cx-fg-dim); opacity: 0.55; }
.cx-pill.is-accent {
  color: var(--cx-accent);
  background: transparent;
  font-weight: 500;
  opacity: 0.85;
}

.cx-tick {
  display: inline-flex; align-items: center;
  font-family: var(--cx-mono); font-size: 10.5px;
  color: var(--cx-fg-dim);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.cx-tick b { color: var(--cx-fg); font-weight: 600; }

/* ── status bar ────────────────────────────────────────────────────────── */
.cx-status {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--cx-line);
  background: linear-gradient(to bottom, var(--cx-bg-2), var(--cx-bg));
  font-family: var(--cx-mono);
  gap: 14px;
  position: relative;
  z-index: 5;
}
.cx-status::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--cx-accent), transparent);
  opacity: .4;
}

.cx-status-l, .cx-status-r { display: flex; align-items: center; gap: 14px; }
.cx-status-r { justify-content: flex-end; }
.cx-status-c { display: flex; justify-content: center; }

.cx-logo { display: flex; align-items: center; gap: 8px; color: var(--cx-accent); }
.cx-sigil { width: 24px; height: 24px; filter: drop-shadow(0 0 6px var(--cx-accent-glow)); }
.cx-logo-txt { display: flex; flex-direction: column; line-height: 1.1; }
.cx-logo-txt b { color: var(--cx-fg); font-size: 13px; letter-spacing: 0.18em; font-weight: 700; }
.cx-logo-txt span { color: var(--cx-fg-dim); font-size: 9px; letter-spacing: 0.08em; }

.cx-status-sep { width: 1px; height: 22px; background: var(--cx-line-strong); }

.cx-clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.cx-clock-time {
  font-family: var(--cx-mono); font-size: 16px; font-weight: 700;
  color: var(--cx-fg); letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
.cx-clock-date { font-size: 9px; color: var(--cx-fg-dim); letter-spacing: 0.1em; }

/* ── 3-state theme toggle · Light → Dark → Auto ─────────────────────────
   iOS Control Center-style capsule with animated thumb. The thumb slides
   left/centre/right and morphs between sun, moon, and "A" icons.
   Pure CSS transitions — no JS animation. */
.cx-theme-toggle {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--cx-line) 50%, transparent);
  border-radius: 20px;
  position: relative;
  width: 52px; height: 24px;
  transition: border-color 250ms ease, box-shadow 250ms ease, background 250ms ease;
  flex-shrink: 0;
}
.cx-theme-toggle:hover {
  border-color: color-mix(in oklab, var(--cx-accent) 50%, transparent);
  box-shadow: 0 0 12px color-mix(in oklab, var(--cx-accent) 18%, transparent);
}
.cx-theme-toggle:active { transform: scale(0.96); }

/* Track — the recessed pill behind the thumb */
.cx-theme-track {
  position: absolute; inset: 2px;
  border-radius: 20px;
  background: color-mix(in oklab, var(--cx-fg-dim) 8%, transparent);
  transition: background 250ms ease;
}
.cx-theme-toggle:hover .cx-theme-track {
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
}

/* Thumb — the sliding knob */
.cx-theme-thumb {
  position: absolute;
  top: 1px;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: grid; place-items: center;
  transition: left 300ms cubic-bezier(.4, .0, .2, 1),
              background 250ms ease,
              box-shadow 250ms ease,
              color 250ms ease;
}

/* ── Light state: thumb left, warm gold */
.cx-theme-toggle.is-light .cx-theme-thumb {
  left: 1px;
  background: #f5c842;
  color: #7a4a05;
  box-shadow: 0 0 8px rgba(245, 200, 66, .45);
}
.cx-app.is-light .cx-theme-toggle.is-light .cx-theme-thumb {
  background: #e8a817;
  color: #5a3200;
  box-shadow: 0 0 8px rgba(232, 168, 23, .35);
}

/* ── Dark state: thumb centre, cool blue-grey */
.cx-theme-toggle.is-dark .cx-theme-thumb {
  left: calc(50% - 8px);
  background: #6b7fa8;
  color: #e8ecf4;
  box-shadow: 0 0 8px rgba(107, 127, 168, .4);
}
.cx-app.is-light .cx-theme-toggle.is-dark .cx-theme-thumb {
  background: #5a6d8f;
  color: #f0f2f6;
  box-shadow: 0 0 8px rgba(90, 109, 143, .3);
}

/* ── Auto state: thumb right, accent-tinted */
.cx-theme-toggle.is-auto .cx-theme-thumb {
  left: calc(100% - 19px);
  background: var(--cx-accent);
  color: var(--cx-bg);
  box-shadow: 0 0 10px var(--cx-accent-glow);
}
.cx-theme-toggle.is-auto .cx-theme-track {
  background: color-mix(in oklab, var(--cx-accent) 12%, transparent);
}

/* Icon visibility — only show the active state's icon */
.cx-theme-sun, .cx-theme-moon, .cx-theme-auto-badge {
  position: absolute;
  transition: opacity 200ms ease, transform 250ms ease;
}
.cx-theme-sun   { opacity: 0; transform: rotate(-60deg) scale(0.5); }
.cx-theme-moon  { opacity: 0; transform: rotate(60deg) scale(0.5); }
.cx-theme-auto-badge {
  opacity: 0; transform: scale(0.3);
  font-family: var(--cx-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.cx-theme-toggle.is-light .cx-theme-sun {
  opacity: 1; transform: rotate(0deg) scale(1);
}
.cx-theme-toggle.is-dark .cx-theme-moon {
  opacity: 1; transform: rotate(0deg) scale(1);
}
.cx-theme-toggle.is-auto .cx-theme-auto-badge {
  opacity: 1; transform: scale(1);
}

/* Subtle state dots below the track — three tiny markers */
.cx-theme-toggle::after {
  content: "";
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 2px;
  background: transparent;
  border-radius: 1px;
  /* Three dots via box-shadow */
  box-shadow:
    -6px 0 0 0 color-mix(in oklab, var(--cx-fg-dim) 20%, transparent),
     0   0 0 0 color-mix(in oklab, var(--cx-fg-dim) 20%, transparent),
     6px 0 0 0 color-mix(in oklab, var(--cx-fg-dim) 20%, transparent);
  transition: box-shadow 250ms ease;
}
/* Highlight the active dot */
.cx-theme-toggle.is-light::after {
  box-shadow:
    -6px 0 0 0 var(--cx-accent),
     0   0 0 0 color-mix(in oklab, var(--cx-fg-dim) 20%, transparent),
     6px 0 0 0 color-mix(in oklab, var(--cx-fg-dim) 20%, transparent);
}
.cx-theme-toggle.is-dark::after {
  box-shadow:
    -6px 0 0 0 color-mix(in oklab, var(--cx-fg-dim) 20%, transparent),
     0   0 0 0 var(--cx-accent),
     6px 0 0 0 color-mix(in oklab, var(--cx-fg-dim) 20%, transparent);
}
.cx-theme-toggle.is-auto::after {
  box-shadow:
    -6px 0 0 0 color-mix(in oklab, var(--cx-fg-dim) 20%, transparent),
     0   0 0 0 color-mix(in oklab, var(--cx-fg-dim) 20%, transparent),
     6px 0 0 0 var(--cx-accent);
}

/* Legacy compat — hide old standalone auto button if markup still present */
.cx-autobtn { display: none; }

.cx-gnosis-flag {
  font-family: var(--cx-mono); font-size: 10px; letter-spacing: 0.18em;
  color: #c7a9ff;
  padding: 4px 8px;
  border: 1px solid rgba(199,169,255,.4);
  background: rgba(199,169,255,.08);
  animation: cx-gnpulse 2.4s ease-in-out infinite;
}
@keyframes cx-gnpulse {
  0%,100% { box-shadow: 0 0 6px rgba(199,169,255,.2); }
  50%     { box-shadow: 0 0 16px rgba(199,169,255,.55); }
}

/* ── sun strip ─────────────────────────────────────────────────────────── */
/* ── Solar strip · ultra-quiet 24h indicator ─────────────────────────────── */
/* ── Solar clock — fluid + elegant ──────────────────────────────────────
   Single-gradient 24-hour band that scales fluidly from micro phones
   (~180px wide) to Studio Displays (~480px). Tick density is set in JS
   via ResizeObserver so labels never overlap. Phase color comes from
   a tiny SVG sun that rises in arc above the cursor — not from a noisy
   palette of background bands. */
.cx-sun {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 6px;
  width: clamp(180px, 28vw, 460px);
  max-width: 100%;
  font-family: var(--cx-mono);
  color: var(--cx-fg);
}
.cx-sun-bar {
  position: relative;
  height: 1px;
  background: var(--cx-line);
  border: none;
  overflow: visible;
  margin: 14px 0 8px;
}
/* Single horizontal gradient: night → dawn cool → day warm → dusk → night.
   Stop positions roughly correspond to 5h/7h/18h/20h boundaries. */
.cx-sun-bar-grad {
  position: absolute; left: 0; right: 0;
  top: -0.5px; height: 2px;
  background: linear-gradient(to right,
    color-mix(in oklab, var(--cx-fg-dim) 12%, transparent) 0%,
    color-mix(in oklab, var(--cx-fg-dim) 12%, transparent) 18%,
    color-mix(in oklab, var(--cx-accent-2, var(--cx-accent)) 25%, transparent) 25%,
    color-mix(in oklab, var(--cx-fg-dim) 35%, transparent) 32%,
    color-mix(in oklab, var(--cx-fg-dim) 50%, transparent) 50%,
    color-mix(in oklab, var(--cx-fg-dim) 35%, transparent) 70%,
    color-mix(in oklab, var(--cx-accent-2, var(--cx-accent)) 25%, transparent) 78%,
    color-mix(in oklab, var(--cx-fg-dim) 12%, transparent) 88%,
    color-mix(in oklab, var(--cx-fg-dim) 12%, transparent) 100%);
  border-radius: 1px;
  pointer-events: none;
}
.cx-sun-tick {
  position: absolute; top: 100%; transform: translateX(-50%);
  font-size: 8.5px;
  color: var(--cx-fg-dim);
  letter-spacing: 0.08em;
  margin-top: 5px;
  opacity: 0.55;
  font-feature-settings: "tnum";
  pointer-events: none;
  white-space: nowrap;
}
/* Edge ticks anchor to the bar ends so they don't clip out */
.cx-sun-tick:first-of-type { transform: translateX(0); }
.cx-sun-tick:last-of-type  { transform: translateX(-100%); }

.cx-sun-cursor {
  position: absolute; top: -6px; bottom: -3px;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in oklab, var(--cx-fg) 60%, transparent) 40%,
    color-mix(in oklab, var(--cx-fg) 60%, transparent) 100%);
  transform: translateX(-0.5px);
  pointer-events: none;
}
.cx-sun-cursor-dot {
  position: absolute; bottom: -2px; left: -1.5px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--cx-accent);
  box-shadow: 0 0 6px color-mix(in oklab, var(--cx-accent) 50%, transparent);
}
/* Tiny sun floating above the cursor, rising in arc with sun height */
.cx-sun-cursor-sun {
  position: absolute;
  left: -6px; bottom: 4px;
  color: var(--cx-accent-2, var(--cx-accent));
  filter: drop-shadow(0 0 4px color-mix(in oklab, currentColor 60%, transparent));
  pointer-events: none;
  transition: color 400ms ease;
}
.cx-sun.is-night .cx-sun-cursor-sun { color: color-mix(in oklab, var(--cx-fg-dim) 60%, var(--cx-accent) 40%); opacity: .35; }
.cx-sun.is-dawn  .cx-sun-cursor-sun { color: var(--cx-accent-2, #ffc46b); opacity: .85; }
.cx-sun.is-day   .cx-sun-cursor-sun { color: var(--cx-accent-2, #ffc46b); opacity: 1; }
.cx-sun.is-dusk  .cx-sun-cursor-sun { color: var(--cx-accent-2, #ffc46b); opacity: .75; }

.cx-sun-meta {
  display: flex; align-items: baseline; justify-content: center;
  gap: 8px;
  font-size: 9.5px;
  color: var(--cx-fg);
  letter-spacing: 0.16em;
  padding: 0 2px;
  margin-top: 12px;
  font-family: var(--cx-mono);
  text-transform: lowercase;
  font-feature-settings: "tnum";
  opacity: 0.85;
  position: relative;
  z-index: 1;
}
.cx-sun-meta > span {
  background: transparent;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}
.cx-sun-meta-phase { color: var(--cx-fg); }
.cx-sun-meta-sun   { color: var(--cx-fg-dim); }
.cx-sun-meta-sun i { font-style: normal; opacity: 0.6; margin-left: 1px; }
.cx-sun-meta-dot   { color: var(--cx-fg-dim); opacity: 0.5; font-weight: 600; }

/* Micro-screens — drop the meta entirely; the gradient + cursor still
   convey time intuitively in <280px. */
@media (max-width: 360px) {
  .cx-sun { gap: 4px; width: clamp(140px, 44vw, 280px); }
  .cx-sun-bar { margin-top: 10px; }
  .cx-sun-tick { font-size: 7.5px; opacity: 0.45; }
}
@media (max-width: 280px) {
  .cx-sun-meta { display: none; }
}

/* Huge displays — let it breathe a little more */
@media (min-width: 1920px) {
  .cx-sun { width: clamp(360px, 24vw, 560px); }
  .cx-sun-tick { font-size: 9.5px; }
  .cx-sun-meta { font-size: 10.5px; }
}

/* ── rails ─────────────────────────────────────────────────────────────── */
.cx-rail { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; }
.cx-rail-l .cx-frame { padding: 16px 12px 10px; }

.cx-rail-section { margin-bottom: 12px; }
.cx-rail-h {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--cx-mono); font-size: 9.5px; letter-spacing: 0.15em;
  color: var(--cx-accent); margin: 4px 2px 6px;
  border-bottom: 1px dashed var(--cx-line);
  padding-bottom: 4px;
}
.cx-rail-h i { font-style: normal; color: var(--cx-fg-dim); font-size: 9px; }

.cx-booklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; }
.cx-booklist li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  font-family: var(--cx-mono);
  font-size: 11px;
  color: var(--cx-fg-dim);
  cursor: default;
}
.cx-booklist li:hover { color: var(--cx-fg); background: rgba(126,224,255,.04); }
.cx-booklist li.is-active {
  color: var(--cx-bg);
  background: var(--cx-accent);
}
.cx-booklist li.is-active .cx-book-id { color: var(--cx-bg); opacity: .8; }
.cx-book-id { font-size: 9.5px; letter-spacing: 0.06em; color: var(--cx-accent); font-weight: 600; }
.cx-book-name { font-family: var(--cx-sans); font-size: 12px; letter-spacing: 0.01em; color: inherit; }
.cx-book-ch { font-size: 9px; color: var(--cx-fg-dim); font-variant-numeric: tabular-nums; }
.cx-booklist li.is-active .cx-book-ch { color: var(--cx-bg); opacity: .65; }

.cx-rail-bm { flex: 0 0 auto; min-height: 180px; max-height: 36vh; }
.cx-rail-bm .cx-frame { padding-top: 14px; }
.cx-bm-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: 0.12em; color: var(--cx-accent);
  margin-bottom: 8px;
}
.cx-mini-btn {
  appearance: none; cursor: pointer;
  border: 1px solid var(--cx-accent); background: transparent;
  color: var(--cx-accent); font-family: var(--cx-mono);
  font-size: 9.5px; letter-spacing: 0.12em; font-weight: 600;
  padding: 4px 8px;
}
.cx-mini-btn:hover { background: var(--cx-accent); color: var(--cx-bg); }

.cx-bm-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--cx-fg-dim) 25%, transparent) transparent; }
.cx-bm-list li {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 8px; row-gap: 1px;
  padding: 6px 4px;
  border-left: 2px solid var(--cx-accent);
  background: rgba(126,224,255,.04);
  cursor: pointer;
  transition: background .15s;
}
.cx-bm-list li:hover { background: rgba(126,224,255,.1); }
.cx-bm-idx { grid-row: span 2; font-family: var(--cx-mono); font-size: 14px; color: var(--cx-accent); font-weight: 700; align-self: center; }
.cx-bm-ref { font-family: var(--cx-mono); font-size: 10.5px; color: var(--cx-fg); font-weight: 600; letter-spacing: 0.05em; }
.cx-bm-note { font-family: var(--cx-sans); font-size: 11px; color: var(--cx-fg-dim); grid-column: 2; }
.cx-bm-ts { font-family: var(--cx-mono); font-size: 9px; color: var(--cx-fg-dim); align-self: start; }
.cx-bm-empty { color: var(--cx-fg-dim); font-style: italic; padding: 8px; border: 1px dashed var(--cx-line); }

/* ── reader ────────────────────────────────────────────────────────────── */
.cx-reader { min-width: 0; min-height: 0; }
.cx-reader .cx-frame { padding: 24px 28px; }

.cx-reader-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--cx-line);
  gap: 16px;
  /* Establish stacking context so the Aa view-popover paints ABOVE the
     scrollable reader-body (which can create its own compositing layer
     via overflow-y: auto and steal click events). */
  position: relative;
  z-index: 10;
}
.cx-reader-titles h1 {
  font-family: var(--cx-serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.05;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  color: var(--cx-fg);
}
.cx-reader-titles p {
  font-family: var(--cx-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--cx-fg-dim);
  margin: 0;
  text-transform: uppercase;
}
.cx-reader-meta { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex-shrink: 0; }

.cx-reader-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;          /* never show the macOS horizontal bar */
  padding-right: 14px;
  --cx-fs: 22px;
  scrollbar-width: thin;       /* Firefox */
  scrollbar-color: color-mix(in oklab, var(--cx-fg-dim) 30%, transparent) transparent;
}
/* Reader line-length cap — typographic best-practice is 60-75ch for body
   text. Without this, on a 27" iMac the verses run to 1500px wide and
   reading slows to a crawl. Centred within the available column so the
   reader still looks balanced when the side rails are open or closed. */
.cx-reader-body > * { max-width: 70ch; margin-left: auto; margin-right: auto; }
.cx-reader-head    { max-width: 70ch; margin-left: auto; margin-right: auto; }
.cx-reader-body::-webkit-scrollbar { width: 4px; height: 0; }
.cx-reader-body::-webkit-scrollbar-track { background: transparent; }
.cx-reader-body::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--cx-fg-dim) 30%, transparent); border-radius: 2px; }
.cx-reader-body::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--cx-fg-dim) 60%, transparent); }

.font-serif .cx-reader-body { font-family: var(--cx-serif); }
.font-mono .cx-reader-body { font-family: var(--cx-mono); }

.cx-verse {
  position: relative;
  padding: 8px 10px 8px 50px;
  margin-top: 0; margin-bottom: 0;
  font-size: var(--cx-fs);
  line-height: 1.55;
  color: var(--cx-fg);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background .15s, border-color .15s;
}
.font-mono .cx-verse { font-size: calc(var(--cx-fs) * 0.82); line-height: 1.7; }
.cx-verse:hover { background: rgba(126,224,255,.04); }
.cx-verse.is-hl {
  background: rgba(126,224,255,.08);
  border-left-color: var(--cx-accent);
}
/* Removed ▸ arrow indicator — accent border-left + tinted bg already
   communicate the active verse without visual noise next to the number. */
.cx-vnum {
  position: absolute; left: 14px; top: 14px;
  font-family: var(--cx-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--cx-accent);
}
.cx-vtext { text-wrap: pretty; }
.cx-vgreek {
  display: block;
  margin-top: 8px;
  padding: 8px 12px;
  border-left: 2px solid #c7a9ff;
  background: rgba(199,169,255,.07);
  font-family: "Cardo", "EB Garamond", "Times New Roman", serif;
  font-size: calc(var(--cx-fs) * 0.78);
  font-style: italic;
  color: #d6c6f5;
  line-height: 1.5;
  position: relative;
}
.cx-app.is-light .cx-vgreek { color: #4a2da8; background: rgba(199,169,255,.15); }
.cx-vgreek-lbl {
  display: inline-block;
  font-family: var(--cx-mono); font-size: 9px; font-style: normal;
  letter-spacing: 0.15em;
  color: #c7a9ff;
  margin-right: 8px;
  padding: 1px 5px;
  border: 1px solid rgba(199,169,255,.4);
  vertical-align: middle;
}

/* ── Chapter nav footer — minimal / receding ──────────────────────────── */
.cx-reader-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  position: relative;
  padding: 14px 12px 6px;
  margin: 24px auto 0;
  max-width: 70ch;
  gap: 12px;
}
@container (max-width: 420px) {
  .cx-reader-foot { grid-template-columns: 44px auto 44px; }
}
@media (max-width: 480px) {
  .cx-reader-foot { grid-template-columns: 44px auto 44px; padding: 12px 8px 4px; gap: 8px; }
}
/* Thin progress track sits where the old border-top was */
.cx-reader-foot::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--cx-line);
}

.cx-nav-btn {
  appearance: none; cursor: pointer;
  background: color-mix(in oklab, var(--cx-fg-dim) 4%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 14%, transparent);
  border-radius: 8px;
  color: var(--cx-fg-dim); font-family: var(--cx-sans);
  font-size: clamp(11px, 1.4vw, 12.5px);
  letter-spacing: 0.06em; font-weight: 500;
  min-height: 44px;
  padding: 8px 14px;
  text-transform: uppercase;
  transition: color .2s, background .2s, border-color .2s, transform .12s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0; max-width: 100%;
}
.cx-nav-btn:first-child { justify-self: start; justify-content: flex-start; }
.cx-nav-btn:last-child  { justify-self: end;   justify-content: flex-end; }
.cx-nav-btn:hover {
  color: var(--cx-accent); border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
  transform: translateY(-1px);
}
.cx-nav-btn:active { transform: translateY(0); }
.cx-nav-btn:disabled {
  opacity: 0.25;
  pointer-events: none;
  cursor: default;
}
/* Arrow glyphs — bolder + always visible */
.cx-nav-arrow { font-size: 1.1em; opacity: 0.7; transition: opacity .2s, transform .15s; flex-shrink: 0; }
.cx-nav-btn:hover .cx-nav-arrow { opacity: 1; }
.cx-nav-btn:first-child:hover .cx-nav-arrow { transform: translateX(-2px); }
.cx-nav-btn:last-child:hover .cx-nav-arrow { transform: translateX(2px); }
/* On narrow viewports collapse the label and keep just the arrow. */
@media (max-width: 480px) {
  .cx-nav-btn { padding: 8px; min-width: 44px; width: 44px; gap: 0; }
  .cx-nav-btn-label { display: none; }
}

.cx-reader-progress {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; flex: 1;
  min-width: 0; max-width: 280px;
}
.cx-reader-progress span {
  font-size: clamp(8px, 1.4vw, 10px);
  letter-spacing: 0.1em;
  color: var(--cx-fg-dim);
  text-transform: uppercase;
  font-family: var(--cx-sans);
  font-weight: 400;
  opacity: 0.7;
}
.cx-prog {
  width: 100%; height: 1.5px;
  background: var(--cx-line);
  position: relative; border-radius: 1px;
  overflow: hidden;
}
.cx-prog-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--cx-accent);
  border-radius: 1px;
  opacity: 0.55;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}

/* ── right-rail panels ─────────────────────────────────────────────────── */
.cx-rail-r { gap: 8px; }

.cx-tabs {
  display: flex; align-items: stretch; gap: 4px;
  height: 40px; position: relative;
}
.cx-tabs-track {
  display: flex; gap: 4px; flex: 1; min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cx-tabs-track::-webkit-scrollbar { display: none; }
.cx-tab {
  appearance: none; cursor: pointer;
  background: var(--cx-panel); border: 1px solid var(--cx-line);
  color: var(--cx-fg-dim); font-family: var(--cx-mono);
  flex: 0 0 40px; height: 40px; padding: 0 8px;
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px;
  position: relative;
  scroll-snap-align: start;
  transition: flex-basis .18s cubic-bezier(.4,0,.2,1), color .15s, background .15s, border-color .15s, transform .12s;
}
.cx-tab:hover { color: var(--cx-fg); border-color: var(--cx-line-strong); transform: translateY(-1px); }
.cx-tab.is-active {
  flex: 0 1 auto; max-width: 200px;
  color: var(--cx-bg); background: var(--cx-accent); border-color: var(--cx-accent);
}
.cx-tab.is-locked { opacity: .55; }
.cx-tab.is-locked.is-active { color: #c7a9ff; background: transparent; border-color: #c7a9ff; }
.cx-tab.is-plugin { border-style: dashed; }
.cx-tab.is-plugin .cx-tab-glyph { color: var(--cx-accent); }
.cx-tab-glyph { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; line-height: 1; }
.cx-tab-lbl { display: none; font-size: 9.5px; letter-spacing: 0.12em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-tab.is-active .cx-tab-lbl { display: inline; }
.cx-tab-num { position: absolute; top: 2px; right: 4px; font-size: 8px; opacity: .35; font-family: var(--cx-mono); }
.cx-tab.is-active .cx-tab-num { display: none; }
.cx-tab-lock { position: absolute; top: 2px; left: 4px; font-size: 9px; color: #c7a9ff; }
.cx-tabs-more {
  appearance: none; cursor: pointer;
  flex: 0 0 28px; height: 40px;
  background: var(--cx-panel); border: 1px solid var(--cx-line);
  color: var(--cx-fg-dim); font-family: var(--cx-mono); font-size: 12px;
  display: grid; place-items: center;
  transition: color .15s, border-color .15s, background .15s;
}
.cx-tabs-more:hover, .cx-tabs-more.is-on {
  color: var(--cx-accent); border-color: var(--cx-accent);
}
.cx-tabs-pop {
  position: absolute; top: 44px; right: 0; z-index: 30;
  background: var(--cx-panel); border: 1px solid var(--cx-line-strong);
  display: flex; flex-direction: column; gap: 2px; padding: 4px;
  min-width: 200px; max-height: 60vh; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.cx-tabs-pop .cx-tab {
  flex: 0 0 32px; width: 100%; height: 32px;
  justify-content: flex-start; gap: 10px; padding: 0 10px;
}
.cx-tabs-pop .cx-tab .cx-tab-lbl { display: inline; font-size: 10px; }
.cx-tabs-pop .cx-tab.is-active { background: var(--cx-accent); color: var(--cx-bg); }
.cx-tabs .cx-tab, .cx-tabs .cx-tabs-more { min-height: 0; }

/* ── pinned-tabs layout (new) ──────────────────────────────────────────
   When the rail uses the command-palette model, the old overflow strip
   collapses to: [⌘ Library] [pin 1] [pin 2] [pin 3] [active-fallback].
   Old .cx-tabs-track rules still apply if .is-pinned isn't set, so we
   can revert by dropping the modifier. */
.cx-tabs.is-pinned { gap: 6px; }
.cx-tabs.is-pinned .cx-tabs-pinned {
  display: flex; gap: 4px; flex: 1; min-width: 0;
  overflow: hidden;
}
.cx-tabs.is-pinned .cx-tab {
  flex: 1 1 0; min-width: 0; max-width: none;
  justify-content: center;
}
.cx-tabs.is-pinned .cx-tab .cx-tab-lbl {
  display: inline; font-size: 9.5px;
}
.cx-tabs.is-pinned .cx-tab.is-active { flex: 1.4 1 0; }

.cx-palette-btn {
  appearance: none; cursor: pointer;
  flex: 0 0 auto; height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cx-panel); border: 1px solid var(--cx-line);
  color: var(--cx-fg); font-family: var(--cx-mono);
  transition: color .15s, border-color .15s, background .15s, transform .12s;
}
.cx-palette-btn:hover, .cx-palette-btn.is-on {
  color: var(--cx-bg); background: var(--cx-accent); border-color: var(--cx-accent);
  transform: translateY(-1px);
}
.cx-palette-btn-glyph { font-size: 16px; font-weight: 700; line-height: 1; }
.cx-palette-btn-lbl { font-size: 10px; letter-spacing: 0.14em; font-weight: 700; }
@media (max-width: 420px) {
  .cx-palette-btn-lbl { display: none; }
  .cx-palette-btn { padding: 0 10px; }
}

/* ── command palette overlay ──────────────────────────────────────── */
.cx-palette-scrim {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: start center;
  padding: clamp(40px, 8vh, 120px) 16px;
  animation: cx-pal-fade .14s ease-out;
}
@keyframes cx-pal-fade { from { opacity: 0; } to { opacity: 1; } }
.cx-palette {
  width: min(720px, 100%);
  max-height: min(80vh, 720px);
  display: flex; flex-direction: column;
  background: var(--cx-panel); border: 1px solid var(--cx-line-strong);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  font-family: var(--cx-mono);
  overflow: hidden;
  animation: cx-pal-rise .18s cubic-bezier(.2,.8,.2,1);
}
@keyframes cx-pal-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.cx-palette-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cx-line);
}
.cx-palette-sigil {
  font-size: 18px; color: var(--cx-accent); font-weight: 700;
}
.cx-palette-input {
  flex: 1; min-width: 0;
  appearance: none; background: transparent; border: 0; outline: 0;
  color: var(--cx-fg); font: inherit; font-size: 15px;
  padding: 4px 0;
}
.cx-palette-input::placeholder { color: var(--cx-fg-dim); }
.cx-palette-x {
  appearance: none; cursor: pointer;
  background: transparent; border: 0; color: var(--cx-fg-dim);
  font-size: 20px; line-height: 1; padding: 4px 8px;
}
.cx-palette-x:hover { color: var(--cx-fg); }
.cx-palette-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 12px 16px 4px;
}
.cx-palette-sect { margin-bottom: 16px; }
.cx-palette-sect h4 {
  margin: 0 0 8px; padding: 0;
  font-size: 10px; letter-spacing: 0.18em; font-weight: 700;
  color: var(--cx-fg-dim);
}
.cx-palette-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
@media (max-width: 480px) {
  .cx-palette-grid { grid-template-columns: 1fr; }
}
.cx-palette-card {
  appearance: none; cursor: pointer; text-align: left;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--cx-bg); border: 1px solid var(--cx-line);
  color: var(--cx-fg); font: inherit;
  transition: border-color .12s, background .12s, transform .12s;
}
.cx-palette-card:hover {
  border-color: var(--cx-accent); transform: translateY(-1px);
}
.cx-palette-card.is-active {
  border-color: var(--cx-accent);
  box-shadow: inset 0 0 0 1px var(--cx-accent);
}
.cx-palette-glyph {
  font-size: 20px; font-weight: 700; color: var(--cx-accent);
  text-align: center; line-height: 1;
}
.cx-palette-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-palette-lbl {
  font-size: 11px; letter-spacing: 0.12em; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-palette-desc {
  font-size: 11px; color: var(--cx-fg-dim);
  font-family: var(--cx-sans, inherit);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-palette-pin {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  color: var(--cx-fg-dim); font-size: 14px;
  cursor: pointer; user-select: none;
}
.cx-palette-pin:hover { color: var(--cx-accent); }
.cx-palette-pin.is-on { color: var(--cx-accent); }
.cx-palette-ft {
  padding: 8px 16px; border-top: 1px solid var(--cx-line);
  color: var(--cx-fg-dim); font-size: 10px; letter-spacing: 0.08em;
}
.cx-palette-ft kbd {
  display: inline-block; padding: 1px 5px; margin: 0 2px;
  border: 1px solid var(--cx-line); background: var(--cx-bg);
  font-family: var(--cx-mono); font-size: 10px;
}

/* ── floating reels launcher (single-pane reader only) ─────────────── */
.cx-reels-fab {
  position: absolute; right: 18px; bottom: 18px; z-index: 30;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--cx-panel); border: 1px solid var(--cx-line-strong);
  color: var(--cx-accent); font-size: 18px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  cursor: pointer;
  transition: transform .15s, color .15s, border-color .15s;
}
.cx-reels-fab:hover { transform: translateY(-2px); color: var(--cx-fg); border-color: var(--cx-accent); }
.cx-reels-fab[aria-pressed="true"] { background: var(--cx-accent); color: var(--cx-bg); }

/* ── inline verse vox button ─────────────────────────────────────── */
.cx-vox-inline {
  appearance: none; cursor: pointer;
  margin-left: 6px; padding: 0 6px;
  background: transparent; border: 1px solid transparent;
  color: var(--cx-fg-dim); font-size: 11px; line-height: 1;
  vertical-align: baseline;
  opacity: 0; transition: opacity .12s, color .12s, border-color .12s;
}
.cx-verse:hover .cx-vox-inline,
.cx-verse-row:hover .cx-vox-inline,
.cx-vox-inline.is-on { opacity: 1; }
.cx-vox-inline:hover { color: var(--cx-accent); border-color: var(--cx-line); }
.cx-vox-inline.is-on { color: var(--cx-accent); border-color: var(--cx-accent); }

.cx-tab-body {
  flex: 1; min-height: 0; overflow: hidden;
  background: var(--cx-panel);
  border: 1px solid var(--cx-line);
  position: relative;
}
.cx-tab-body::before, .cx-tab-body::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  border-color: var(--cx-accent); border-style: solid;
}
.cx-tab-body::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.cx-tab-body::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

.cx-pane {
  height: 100%; display: flex; flex-direction: column;
  padding: 14px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--cx-fg-dim) 25%, transparent) transparent;
}
.cx-pane::-webkit-scrollbar { width: 4px; height: 0; }
.cx-pane::-webkit-scrollbar-track { background: transparent; }
.cx-pane::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--cx-fg-dim) 25%, transparent); border-radius: 2px; }
.cx-pane::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--cx-fg-dim) 50%, transparent); }

.cx-pane-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--cx-line);
  gap: 12px;
  flex-shrink: 0;
}
.cx-pane-head h3 {
  margin: 0 0 2px;
  font-family: var(--cx-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--cx-accent);
}
.cx-pane-head > div > span {
  font-family: var(--cx-sans); font-size: 10.5px; color: var(--cx-fg-dim);
  letter-spacing: 0.02em;
}
.cx-pane-head-deco { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
/* Pane-level action group (sits in PaneHead `action` slot) */
.cx-pane-actions { display: inline-flex; align-items: center; gap: 6px; }
.cx-pane-toggle {
  appearance: none; cursor: pointer;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--cx-line) 70%, transparent);
  border-radius: 4px;
  color: var(--cx-fg-dim);
  font-family: var(--cx-mono);
  font-size: 13px; line-height: 1;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.cx-pane-toggle:hover {
  color: var(--cx-accent);
  border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
}
.cx-deco-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--cx-accent); }
.cx-deco-dash { width: 16px; height: 1px; background: var(--cx-accent); }

.cx-pane-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--cx-line);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: var(--cx-fg-dim);
}

/* Translations */
.cx-corpus-grid { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.cx-corpus-row {
  padding: 10px;
  border: 1px solid var(--cx-line);
  background: rgba(126,224,255,.02);
  display: flex; flex-direction: column; gap: 8px;
}
.cx-corpus-row.is-primary {
  border-color: var(--cx-accent);
  background: rgba(126,224,255,.06);
  box-shadow: inset 2px 0 0 var(--cx-accent);
}
.cx-corpus-head { display: flex; align-items: center; gap: 10px; }
.cx-corpus-glyph {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  font-family: var(--cx-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.05em;
  border: 1px solid var(--cx-line-strong);
  color: var(--cx-accent);
  background: var(--cx-bg);
}
.cx-corpus-id { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.cx-corpus-id b { font-family: var(--cx-sans); font-size: 12px; color: var(--cx-fg); font-weight: 600; letter-spacing: 0.01em; }
.cx-corpus-id span { font-family: var(--cx-mono); font-size: 9px; color: var(--cx-fg-dim); letter-spacing: 0.06em; }
.cx-corpus-actions { display: flex; gap: 4px; }
.cx-chip {
  appearance: none; cursor: pointer;
  background: transparent; border: 1px solid var(--cx-line);
  color: var(--cx-fg-dim);
  font-family: var(--cx-mono); font-size: 9px; letter-spacing: 0.1em; font-weight: 600;
  padding: 4px 6px;
}
.cx-chip:hover { color: var(--cx-fg); border-color: var(--cx-line-strong); }
.cx-chip.is-on { color: var(--cx-bg); background: var(--cx-accent); border-color: var(--cx-accent); }
.cx-corpus-text {
  margin: 0;
  font-family: var(--cx-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cx-fg);
  text-wrap: pretty;
}
.cx-corpus-row.is-primary .cx-corpus-text { color: var(--cx-fg); }

/* Talmud */
.cx-talmud-list { display: flex; flex-direction: column; gap: 12px; }
.cx-talmud-card {
  padding: 12px;
  border: 1px solid var(--cx-line);
  background: linear-gradient(to bottom right, rgba(255,196,107,.04), transparent);
  border-left: 3px solid var(--cx-accent-2);
}
.cx-talmud-card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cx-talmud-idx { font-family: var(--cx-mono); font-size: 9px; color: var(--cx-accent-2); letter-spacing: 0.12em; }
.cx-talmud-card h4 {
  margin: 0 0 8px;
  font-family: var(--cx-sans); font-weight: 600; font-size: 13px;
  color: var(--cx-fg);
}
.cx-talmud-card p {
  margin: 0 0 8px;
  font-family: var(--cx-serif); font-size: 14px; line-height: 1.55;
  color: var(--cx-fg);
}
.cx-talmud-card footer { display: flex; gap: 6px; }
.cx-tag {
  font-family: var(--cx-mono); font-size: 9px; letter-spacing: 0.06em;
  color: var(--cx-accent-2);
  padding: 2px 6px;
  border: 1px dashed rgba(255,196,107,.5);
}

/* Commentary */
.cx-comm-list { display: flex; flex-direction: column; gap: 10px; }
.cx-comm-card {
  padding: 12px;
  border: 1px solid var(--cx-line);
  background: var(--cx-bg-2);
  position: relative;
  padding-top: 28px;
}
.cx-comm-tag {
  position: absolute; top: 8px; left: 12px;
  font-family: var(--cx-mono); font-size: 9px; letter-spacing: 0.14em; font-weight: 700;
  padding: 2px 6px;
  background: var(--cx-accent);
  color: var(--cx-bg);
}
.cx-comm-tag.is-patristic { background: #ffc46b; color: #2a1b00; }
.cx-comm-tag.is-reformation { background: #8de8a8; color: #0b2b15; }
.cx-comm-tag.is-modern { background: #7ee0ff; color: #042430; }
.cx-comm-tag.is-devotional { background: #c7a9ff; color: #1f0a4a; }
.cx-comm-card h4 {
  margin: 0 0 6px;
  font-family: var(--cx-mono); font-size: 10.5px; letter-spacing: 0.08em; font-weight: 700;
  color: var(--cx-accent);
}
.cx-comm-card p {
  margin: 0;
  font-family: var(--cx-serif); font-size: 14px; line-height: 1.55;
  color: var(--cx-fg);
}

.cx-xref { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--cx-line); }
.cx-xref ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.cx-xref li { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: 11px; padding: 4px 0; border-bottom: 1px dotted var(--cx-line); }
.cx-xref li b { font-family: var(--cx-mono); font-size: 10.5px; color: var(--cx-accent); font-weight: 600; letter-spacing: 0.04em; }
.cx-xref li span { font-family: var(--cx-serif); font-size: 13px; color: var(--cx-fg-dim); font-style: italic; }

/* Gematria */
.cx-gem-calc { margin-bottom: 14px; padding: 12px; border: 1px solid var(--cx-accent-2); background: rgba(255,196,107,.06); }
.cx-gem-calc-row { display: grid; grid-template-columns: 1fr 88px; gap: 8px; align-items: stretch; }
.cx-gem-calc-row input {
  background: var(--cx-bg);
  border: 1px solid var(--cx-line-strong);
  color: var(--cx-fg);
  font-family: var(--cx-serif);
  font-size: 18px;
  padding: 6px 10px;
  outline: none;
}
.cx-gem-calc-row input:focus { border-color: var(--cx-accent); box-shadow: 0 0 0 1px var(--cx-accent-glow); }
.cx-gem-calc-out {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--cx-accent-2); color: var(--cx-bg);
  padding: 4px;
}
.cx-gem-calc-out span { font-family: var(--cx-mono); font-size: 22px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.cx-gem-calc-out i { font-style: normal; font-family: var(--cx-mono); font-size: 8px; letter-spacing: 0.18em; font-weight: 700; opacity: .7; margin-top: 2px; }

.cx-gem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.cx-gem-cell {
  padding: 10px;
  border: 1px solid var(--cx-line);
  background: var(--cx-bg-2);
  display: flex; flex-direction: column; gap: 2px;
  position: relative;
  overflow: hidden;
}
.cx-gem-cell::before {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--cx-accent), transparent);
}
.cx-gem-term { font-family: var(--cx-serif); font-size: 22px; line-height: 1; color: var(--cx-fg); }
.cx-gem-translit { font-family: var(--cx-mono); font-size: 10px; color: var(--cx-accent); letter-spacing: 0.06em; }
.cx-gem-meaning { font-family: var(--cx-sans); font-size: 11px; color: var(--cx-fg-dim); }
.cx-gem-value { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; padding-top: 6px; border-top: 1px dotted var(--cx-line); }
.cx-gem-value b { font-family: var(--cx-mono); font-size: 20px; color: var(--cx-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.cx-gem-value i { font-style: normal; font-family: var(--cx-mono); font-size: 8px; color: var(--cx-fg-dim); letter-spacing: 0.08em; text-align: right; }

.cx-gem-notes { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--cx-line); }
.cx-gem-notes p { margin: 0 0 6px; font-family: var(--cx-serif); font-size: 13px; line-height: 1.5; color: var(--cx-fg); font-style: italic; }
.cx-gem-notes p::first-letter { color: var(--cx-accent); font-weight: 700; }

/* Gnosis */
.cx-pane.is-gnosis { background: linear-gradient(to bottom, rgba(199,169,255,.06), transparent); }
.cx-pane.is-gnosis .cx-pane-head h3 { color: #c7a9ff; }
.cx-pane.is-gnosis .cx-pane-head-deco .cx-deco-dot,
.cx-pane.is-gnosis .cx-pane-head-deco .cx-deco-dash { background: #c7a9ff; }

.cx-gnosis-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px; margin-bottom: 14px;
  border: 1px solid rgba(199,169,255,.5);
  background: rgba(199,169,255,.06);
  gap: 12px;
}
.cx-gnosis-toggle b { display: block; font-family: var(--cx-mono); font-size: 11px; letter-spacing: 0.12em; color: #c7a9ff; margin-bottom: 4px; }
.cx-gnosis-toggle span { font-family: var(--cx-sans); font-size: 10.5px; color: var(--cx-fg-dim); }

.cx-gnosis-btn {
  appearance: none; cursor: pointer;
  border: 1px solid #c7a9ff; background: transparent;
  color: #c7a9ff; font-family: var(--cx-mono);
  font-size: 10px; letter-spacing: 0.14em; font-weight: 700;
  padding: 8px 12px;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.cx-gnosis-btn-dot { width: 8px; height: 8px; border-radius: 50%; background: #c7a9ff; opacity: .4; }
.cx-gnosis-btn.is-on { background: #c7a9ff; color: var(--cx-bg); }
.cx-gnosis-btn.is-on .cx-gnosis-btn-dot { background: var(--cx-bg); opacity: 1; box-shadow: 0 0 10px #fff; }

.cx-gnosis-list { display: flex; flex-direction: column; gap: 10px; }
.cx-gnosis-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(199,169,255,.3);
  background: linear-gradient(to right, rgba(199,169,255,.04), transparent);
}
.cx-gnosis-sigil {
  display: grid; place-items: center;
  font-size: 28px; color: #c7a9ff;
  border: 1px solid rgba(199,169,255,.4);
  background: var(--cx-bg);
  align-self: stretch;
}
.cx-gnosis-body h4 { margin: 0 0 6px; font-family: var(--cx-mono); font-size: 10.5px; letter-spacing: 0.12em; color: #c7a9ff; font-weight: 700; }
.cx-gnosis-body p { margin: 0; font-family: var(--cx-serif); font-size: 13.5px; line-height: 1.55; color: var(--cx-fg); }

.cx-gnosis-warn {
  margin-top: 12px;
  padding: 8px 10px;
  font-family: var(--cx-mono); font-size: 9.5px; letter-spacing: 0.04em; line-height: 1.5;
  color: var(--cx-fg-dim);
  border: 1px dashed rgba(199,169,255,.4);
  background: rgba(199,169,255,.04);
}

/* ── footer ────────────────────────────────────────────────────────────── */
.cx-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 16px;
  border-top: 1px solid var(--cx-line);
  background: linear-gradient(to top, var(--cx-bg-2), var(--cx-bg));
  gap: 14px;
  position: relative;
  z-index: 5;
}
.cx-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--cx-accent), transparent);
  opacity: .4;
}
.cx-footer-l, .cx-footer-r { display: flex; align-items: center; gap: 16px; }
.cx-footer-r { justify-content: flex-end; }
.cx-footer-c { display: flex; justify-content: center; }

.cx-gnosis-master {
  appearance: none; cursor: pointer;
  border: 1px solid rgba(199,169,255,.5); background: rgba(199,169,255,.05);
  color: #c7a9ff;
  font-family: var(--cx-mono);
  font-size: 10.5px; letter-spacing: 0.18em; font-weight: 700;
  padding: 6px 14px 6px 28px;
  position: relative;
  transition: all .2s;
}
.cx-gnosis-master-ring {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #c7a9ff;
  background: transparent;
}
.cx-gnosis-master.is-on { background: #c7a9ff; color: var(--cx-bg); }
.cx-gnosis-master.is-on .cx-gnosis-master-ring { background: var(--cx-bg); border-color: var(--cx-bg); box-shadow: inset 0 0 0 2px #c7a9ff; }
.cx-gnosis-master:hover { box-shadow: 0 0 16px rgba(199,169,255,.35); }

.cx-sync { color: var(--cx-accent); letter-spacing: 0; font-family: var(--cx-mono); }


/* ── PRIMARY DROPDOWN ─────────────────────────────────────────────────── */
.cx-pdd { position: relative; }
.cx-pdd-btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cx-bg-2); border: 1px solid var(--cx-line-strong);
  color: var(--cx-fg);
  font-family: var(--cx-mono);
  padding: 6px 10px;
  min-width: 0;
}
.cx-pdd-btn:hover { border-color: var(--cx-accent); }
.cx-pdd.is-open .cx-pdd-btn { border-color: var(--cx-accent); background: rgba(126,224,255,.08); }
.cx-pdd-glyph {
  width: 28px; height: 22px;
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  border: 1px solid var(--cx-accent);
  color: var(--cx-accent);
  background: var(--cx-bg);
  flex-shrink: 0;
}
.cx-pdd-name { font-size: 11px; color: var(--cx-fg); font-weight: 600; letter-spacing: 0.02em; }
.cx-pdd-meta { font-size: 9px; color: var(--cx-fg-dim); letter-spacing: 0.06em; }
.cx-pdd-caret { font-size: 11px; color: var(--cx-fg-dim); margin-left: 4px; transition: transform .15s; }
.cx-pdd.is-open .cx-pdd-caret { transform: rotate(180deg); color: var(--cx-accent); }

.cx-pdd-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 200;
  min-width: 280px;
  background: var(--cx-bg-2);
  border: 1px solid var(--cx-accent);
  box-shadow: var(--cx-shadow), 0 0 24px var(--cx-accent-glow);
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.cx-pdd-h {
  font-family: var(--cx-mono); font-size: 9px; letter-spacing: 0.16em;
  color: var(--cx-accent); padding: 6px 8px 4px;
  border-bottom: 1px dashed var(--cx-line); margin-bottom: 2px;
}
.cx-pdd-item {
  appearance: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  background: transparent; border: 1px solid transparent;
  color: var(--cx-fg);
  font-family: var(--cx-mono);
  text-align: left;
}
.cx-pdd-item:hover { background: rgba(126,224,255,.08); border-color: var(--cx-line); }
.cx-pdd-item.is-on { background: rgba(126,224,255,.12); border-color: var(--cx-accent); }
.cx-pdd-item-id { flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.cx-pdd-item-id b { font-family: var(--cx-sans); font-size: 12px; font-weight: 600; color: var(--cx-fg); letter-spacing: 0.01em; }
.cx-pdd-item-id i { font-style: normal; font-size: 9px; color: var(--cx-fg-dim); letter-spacing: 0.06em; }
.cx-pdd-check { color: var(--cx-accent); font-size: 14px; font-weight: 700; }

/* ── SIDE × SIDE toggle ───────────────────────────────────────────────── */
.cx-side-toggle {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--cx-line-strong);
  color: var(--cx-fg-dim);
  font-family: var(--cx-mono); font-size: 9.5px; letter-spacing: 0.12em; font-weight: 600;
  padding: 5px 10px;
}
.cx-side-toggle:hover { color: var(--cx-fg); border-color: var(--cx-accent); }
.cx-side-toggle.is-on { background: var(--cx-accent); color: var(--cx-bg); border-color: var(--cx-accent); }
.cx-side-toggle-icon { display: inline-flex; gap: 1.5px; }
.cx-side-toggle-icon i { display: block; width: 3px; height: 12px; background: currentColor; }


/* ── Typography cluster · size + face, side by side ─────────────────────
   Two slim pills: an Aa size cycler and a face-name toggle. The size pill's
   "Aa" actually renders in the current scripture face, so a glance at the
   cluster is a live preview of how scripture will look. */
.cx-typo-cluster {
  display: inline-flex;
  align-items: stretch;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--cx-line-strong);
  transition: border-color .15s;
}
.cx-typo-cluster:hover { border-color: var(--cx-accent); }
.cx-typo-cluster > .cx-fs-toggle,
.cx-typo-cluster > .cx-face-toggle {
  border: 0;
  border-radius: 0;
}
.cx-typo-cluster > .cx-face-toggle {
  border-left: 1px solid var(--cx-line-strong);
}

.cx-fs-toggle {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 6px;
  background: transparent; border: 1px solid var(--cx-line-strong);
  color: var(--cx-fg-dim);
  padding: 4px 9px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.cx-fs-toggle:hover { color: var(--cx-fg); border-color: var(--cx-accent); }

/* "Aa" in the *current* scripture face — live typography preview. */
.cx-fs-letter {
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.font-serif .cx-fs-letter { font-family: var(--cx-serif); }
.font-mono  .cx-fs-letter { font-family: var(--cx-mono); font-weight: 600; }

.cx-fs-num {
  font-family: var(--cx-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--cx-fg-dim);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  align-self: center;
}
.cx-fs-toggle:hover .cx-fs-num { color: var(--cx-accent); }

/* Face toggle — tiny glyph + face name in mono caps */
.cx-face-toggle {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0;
  color: var(--cx-fg-dim);
  padding: 4px 9px;
  transition: color .15s, background .15s;
}
.cx-face-toggle:hover {
  color: var(--cx-fg);
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
}
.cx-face-glyph {
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.cx-face-toggle.is-serif .cx-face-glyph { font-family: var(--cx-serif); }
.cx-face-toggle.is-mono  .cx-face-glyph { font-family: var(--cx-mono); font-weight: 600; }
.cx-face-lbl {
  font-family: var(--cx-mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cx-fg-dim);
}
.cx-face-toggle:hover .cx-face-lbl { color: var(--cx-accent); }

/* ── Footer cluster — group rail/mode toggles tightly with a thin divider ── */
.cx-footer-cluster {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  background: color-mix(in oklab, var(--cx-fg-dim) 5%, transparent);
  border-radius: 4px;
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 12%, transparent);
}
.cx-footer-sep {
  width: 1px;
  height: 16px;
  background: color-mix(in oklab, var(--cx-fg-dim) 22%, transparent);
  margin: 0 2px;
}
@media (min-width: 881px) {
  /* On desktop the ≣ FAB is hidden — drop the leading separator too */
  .cx-footer-cluster .cx-mobile-fab + .cx-footer-sep { display: none; }
}

/* ── COLS HEAD + ROWS ────────────────────────────────────────────────── */
.cx-cols-head {
  display: grid;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 14px;             /* was 6 — too tight, the glyph badge
                                      visually crowded verse 1 of column */
  border-bottom: 1px solid var(--cx-line);
  position: relative;
  z-index: 2;                      /* keep above any sibling that overflows */
  background: var(--cx-bg);
  align-items: stretch;
}
.cx-col-h {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
  min-width: 0;                    /* let the name text ellipsis-truncate
                                      instead of forcing the badge to wrap
                                      over the next column's content */
  min-height: 32px;
}
.cx-col-h.is-primary { box-shadow: inset 2px 0 0 var(--cx-accent); padding-left: 8px; }
.cx-col-h-glyph {
  display: grid; place-items: center;
  flex: 0 0 30px;                  /* hard-pin so it never collapses or
                                      overflows under sibling text */
  width: 30px; height: 24px;
  font-family: var(--cx-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  border: 1px solid var(--cx-accent); color: var(--cx-accent);
  background: var(--cx-bg);
  overflow: hidden;                /* clip long glyph strings to the box */
}
/* Name + year stack must contain its content. */
.cx-col-h > div { min-width: 0; flex: 1 1 auto; }
.cx-col-h b,
.cx-col-h span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-col-h > div { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.cx-col-h b { font-family: var(--cx-sans); font-size: 11px; color: var(--cx-fg); font-weight: 600; }
.cx-col-h span { font-family: var(--cx-mono); font-size: 8.5px; color: var(--cx-fg-dim); letter-spacing: 0.08em; }

/* Side-by-side mode — lift the single-column 70ch cap so N columns each
   get a fair share of the full reader width instead of ~190px each. */
.cx-reader-body.is-cols { display: flex; flex-direction: column; gap: 4px; }
.cx-reader-body.is-cols > * { max-width: none; }
.cx-reader-body.is-cols > .cx-reader-head { max-width: 70ch; }
.cx-verse-row {
  display: grid;
  gap: 10px;
  padding: 6px 4px;
  border-left: 2px solid transparent;
  margin: 0 -4px;
  cursor: pointer;
  position: relative;           /* anchor the ★ mark button */
  transition: background .15s, border-color .15s;
}
.cx-verse-row:hover { background: rgba(126,224,255,.04); }
.cx-verse-row.is-hl { background: rgba(126,224,255,.08); border-left-color: var(--cx-accent); }
.cx-verse-col {
  padding: 4px 8px 4px 36px !important;
  margin: 0 !important;
  border-left: 1px solid var(--cx-line);
  font-size: calc(var(--cx-fs) * 0.78);
  line-height: 1.5;
  min-width: 0;                /* allow text to wrap within its grid track */
  overflow-wrap: break-word;
  word-break: break-word;
}
.cx-verse-col:first-child { border-left: 0; }
.cx-verse-col.is-primary-col { color: var(--cx-fg); }
.cx-verse-col .cx-vnum { left: 4px; top: 8px; }

/* ── DIVIDER ─────────────────────────────────────────────────────────── */
.cx-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 14px;
  color: var(--cx-accent);
  font-family: var(--cx-mono); font-size: 10px; letter-spacing: 0.2em; font-weight: 700;
  text-transform: uppercase;
}
.cx-divider::before, .cx-divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, var(--cx-accent), transparent);
  opacity: .6;
}
.cx-divider span { padding: 0 4px; white-space: nowrap; }

/* ── RED LETTER ──────────────────────────────────────────────────────── */
.cx-red {
  color: #e34a4a;
  font-weight: 500;
}
.cx-app.is-light .cx-red { color: #c41818; }

/* ── LATIN STYLING ─ same color as primary translation for legibility ── */
.cx-verse.is-latin .cx-vtext,
.cx-verse-col.is-latin .cx-vtext { font-style: italic; color: var(--cx-fg); }
.cx-verse.is-latin.is-hl .cx-vtext,
.cx-verse-col.is-primary-col.is-latin .cx-vtext { color: var(--cx-fg); }

/* ── FOOTER TOGGLES ──────────────────────────────────────────────────── */
.cx-foot-toggle {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--cx-line);
  color: var(--cx-fg-dim);
  font-family: var(--cx-mono); font-size: 9.5px; letter-spacing: 0.12em; font-weight: 600;
  padding: 4px 8px;
  white-space: nowrap;
}
.cx-foot-toggle:hover { color: var(--cx-fg); border-color: var(--cx-line-strong); }
.cx-foot-toggle.is-on { color: var(--cx-fg); border-color: var(--cx-accent); background: rgba(126,224,255,.05); }
.cx-foot-toggle-grid { display: inline-flex; gap: 1px; }
.cx-foot-toggle-grid i { width: 2px; height: 9px; background: currentColor; display: block; }

/* ── MOBILE FAB ─────────────────────────────────────────────────────── */
.cx-mobile-fab {
  display: none;
  appearance: none; cursor: pointer;
  width: 40px; height: 40px;
  background: color-mix(in oklab, var(--cx-fg-dim) 4%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 18%, transparent);
  border-radius: 8px;
  color: var(--cx-fg);
  font-family: var(--cx-mono); font-size: 18px;
  align-items: center; justify-content: center;
  line-height: 1;
  transition: color .15s, background .15s, border-color .15s, transform .12s;
}
.cx-mobile-fab:hover { background: color-mix(in oklab, var(--cx-accent) 10%, transparent); border-color: var(--cx-accent); color: var(--cx-accent); transform: translateY(-1px); }
.cx-mobile-fab:active { transform: translateY(0); }
.cx-rail-close {
  display: none;
  position: absolute; top: 6px; right: 6px;
  appearance: none; cursor: pointer;
  width: 28px; height: 28px;
  background: var(--cx-bg-2); border: 1px solid var(--cx-line-strong);
  color: var(--cx-fg); font-family: var(--cx-mono); font-size: 13px;
  z-index: 10;
}

/* ── READER HEAD wrapping ────────────────────────────────────────────── */
.cx-reader-head { flex-wrap: wrap; row-gap: 12px; }
.cx-reader-titles { min-width: 0; flex: 1 1 300px; }
.cx-reader-titles h1 { text-wrap: balance; }

/* Top translation dropdown row spacing in narrow status bar */
.cx-status { min-height: 56px; }

/* ── RESPONSIVE — TABLET ─────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .cx-grid { grid-template-columns: var(--cx-lrail-w, 200px) minmax(0, 1fr) var(--cx-rrail-w, 340px); gap: 8px; padding: 6px 8px; }
  .cx-sun { width: 280px; }
  .cx-reader-titles h1 { font-size: 26px; }
  .cx-tab-lbl { font-size: 7.5px; letter-spacing: 0.06em; }
  .cx-tab-glyph { font-size: 12px; }
  .cx-pdd-meta { display: none; }
}

/* ── RESPONSIVE — NARROW / PHONE ─────────────────────────────────────── */
@media (max-width: 880px) {
  .cx-hide-narrow { display: none !important; }
  .cx-status { grid-template-columns: 1fr auto; padding: 0 10px; gap: 8px; }
  .cx-status-r { gap: 8px; }
  .cx-status-c { display: none; }
  .cx-clock-date { display: none; }
  /* Theme toggle adapts to narrow viewport — capsule stays compact */
  .cx-theme-toggle { width: 46px; height: 22px; }

  .cx-mobile-fab { display: inline-flex; }
  .cx-hide-mobile { display: none !important; }

  .cx-grid {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
    padding: 6px;
  }
  .cx-rail-l, .cx-rail-r {
    position: fixed; top: 56px; bottom: 36px;
    width: 86vw; max-width: 340px;
    background: var(--cx-bg);
    z-index: 100;
    padding: 8px;
    box-shadow: var(--cx-shadow);
    transform: translateX(-110%);
    transition: transform .25s ease;
    overflow-y: auto;
  }
  .cx-rail-r { right: 0; transform: translateX(110%); }
  .cx-rail-l { left: 0; border-right: 1px solid var(--cx-accent); }
  .cx-rail-r { left: auto; border-left: 1px solid var(--cx-accent); }
  .cx-app.left-open .cx-rail-l { transform: translateX(0); }
  .cx-app.right-open .cx-rail-r { transform: translateX(0); }

  .cx-reader .cx-frame { padding: 22px 14px 14px; }
  .cx-reader-titles h1 { font-size: 22px; }
  .cx-reader-meta { gap: 4px; }
  .cx-reader-meta .cx-pill { font-size: 9px; padding: 2px 6px; }
  .cx-side-toggle { padding: 4px 8px; font-size: 9px; }

  .cx-verse { padding: 6px 6px 6px 38px; }
  .cx-verse-row { grid-template-columns: 1fr !important; }
  .cx-verse-col { border-left: 0; padding-left: 38px !important; padding-top: 6px !important; }
  .cx-cols-head { display: none; }

  .cx-footer { padding: 0 8px; grid-template-columns: auto 1fr auto; gap: 6px; }
  .cx-gnosis-master { padding: 5px 10px 5px 24px; font-size: 9.5px; letter-spacing: 0.1em; }
  .cx-gnosis-master-ring { left: 6px; width: 10px; height: 10px; }
}

@media (max-width: 540px) {
  .cx-status { padding: 0 8px; }
  .cx-logo-txt span { display: none; }
  .cx-logo-txt b { font-size: 12px; }
  .cx-pdd-btn { padding: 5px 8px; gap: 6px; }
  .cx-pdd-name { font-size: 10px; }
  .cx-pdd-glyph { width: 24px; height: 20px; font-size: 8.5px; }
  .cx-pdd-menu { min-width: 240px; }
  .cx-clock { display: none; }
  .cx-gnosis-flag { display: none; }

  .cx-reader-titles h1 { font-size: 20px; }
  .cx-reader-titles p { font-size: 9.5px; }
  .cx-reader .cx-frame { padding: 18px 10px 10px; }
  .cx-verse { font-size: calc(var(--cx-fs) * 0.85); padding: 5px 4px 5px 32px; }
  .cx-vnum { left: 6px; top: 9px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   IPHONE / TOUCH POLISH
   Safe-area for the notch · larger touch targets · no double-tap zoom on
   buttons · rail backdrop · inertial scroll · prevent rubber-band on root.
   ═══════════════════════════════════════════════════════════════════════════ */

html, body {
  /* Stop the page from rubber-banding when the reader scrolls. */
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
  /* Anti-flash on tap. */
  -webkit-tap-highlight-color: transparent;
}
body {
  /* Lock the chrome to the actual visible area (no Safari-bar shrink mid-scroll). */
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;          /* dynamic viewport unit — modern iOS Safari */
  overflow: hidden;
}
.cx-app {
  height: 100dvh;
  /* Honour the iPhone notch + home-indicator. */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  box-sizing: border-box;
}

/* All buttons → 44×44 minimum hit area on touch devices (Apple HIG),
   with no gray default-tap callout, and pointer cursor where appropriate. */
@media (hover: none) and (pointer: coarse) {
  button, .cx-tab, .cx-ltab, .cx-tp-row, .cx-tp-pick, .cx-tp-eye, .cx-tp-rm,
  .cx-side-toggle, .cx-mobile-fab, .cx-quick, .cx-repo-toggle,
  .cx-repo-prov, .cx-repo-add, .cx-vm-row,
  .cx-vmark-btn, .cx-pane-toggle, .cx-vm-hl-swatch, .cx-vm-hl-rm {
    min-height: 44px;
    min-width: 44px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;     /* kill 300ms double-tap delay */
  }
  /* Don't shrink-wrap thin rail items. */
  .cx-tp-row { min-height: 44px; }
  .cx-tp-eye, .cx-tp-rm { min-width: 44px; min-height: 44px; }
  .cx-mobile-fab { width: 44px; height: 44px; }
}

/* Backdrop scrim behind a slid-out rail — taps close the rail. */
.cx-rail-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.cx-app.left-open .cx-rail-scrim,
.cx-app.right-open .cx-rail-scrim {
  opacity: 1;
  pointer-events: auto;
}

/* Inertial scrolling for every scrollable surface on iOS. */
.cx-pane, .cx-reader-body, .cx-reader-cols, .cx-rail-l, .cx-rail-r, .cx-oracle-log,
.cx-tp-list, .cx-repo-results, .cx-lib {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── Near-invisible scrollbars for ALL scrollable surfaces ────────────────
   4px thin, transparent track, subtle thumb that appears on hover.
   Covers right-rail panels, left-rail lists, and any overflow container
   the individual rules above might miss. */
.cx-rail-r *,
.cx-rail-l *,
.cx-bm-list,
.cx-tp-list,
.cx-tp-groups,
.cx-oracle-log,
.cx-rail-flex > .cx-cf-body {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--cx-fg-dim) 25%, transparent) transparent;
}
.cx-rail-r *::-webkit-scrollbar,
.cx-rail-l *::-webkit-scrollbar,
.cx-bm-list::-webkit-scrollbar,
.cx-tp-list::-webkit-scrollbar,
.cx-oracle-log::-webkit-scrollbar,
.cx-rail-flex > .cx-cf-body::-webkit-scrollbar {
  width: 4px; height: 0;
}
.cx-rail-r *::-webkit-scrollbar-track,
.cx-rail-l *::-webkit-scrollbar-track,
.cx-bm-list::-webkit-scrollbar-track,
.cx-tp-list::-webkit-scrollbar-track,
.cx-oracle-log::-webkit-scrollbar-track,
.cx-rail-flex > .cx-cf-body::-webkit-scrollbar-track {
  background: transparent;
}
.cx-rail-r *::-webkit-scrollbar-thumb,
.cx-rail-l *::-webkit-scrollbar-thumb,
.cx-bm-list::-webkit-scrollbar-thumb,
.cx-tp-list::-webkit-scrollbar-thumb,
.cx-oracle-log::-webkit-scrollbar-thumb,
.cx-rail-flex > .cx-cf-body::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--cx-fg-dim) 25%, transparent);
  border-radius: 2px;
}
.cx-rail-r *::-webkit-scrollbar-thumb:hover,
.cx-rail-l *::-webkit-scrollbar-thumb:hover,
.cx-bm-list::-webkit-scrollbar-thumb:hover,
.cx-tp-list::-webkit-scrollbar-thumb:hover,
.cx-oracle-log::-webkit-scrollbar-thumb:hover,
.cx-rail-flex > .cx-cf-body::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--cx-fg-dim) 50%, transparent);
}

/* Prevent iOS zoom-on-focus for inputs (font-size must be ≥ 16px). */
@media (max-width: 880px) {
  .cx-oracle-input input,
  .cx-oracle-key-row input,
  .cx-repo-input,
  .cx-search input {
    font-size: 16px !important;
  }
}

/* Phone layout refinements ─────────────────────────────────────────────── */
@media (max-width: 880px) {
  /* Rails sit beneath the status bar accounting for the notch. */
  .cx-rail-l, .cx-rail-r {
    top: calc(56px + env(safe-area-inset-top));
    bottom: calc(48px + env(safe-area-inset-bottom));
    width: min(86vw, 360px);
    max-width: 360px;
    border-radius: 0 8px 8px 0;
  }
  .cx-rail-r { border-radius: 8px 0 0 8px; }

  /* Status bar gets sane spacing for the notch + larger logo. */
  .cx-status {
    padding-top: env(safe-area-inset-top);
    min-height: calc(56px + env(safe-area-inset-top));
  }

  /* Footer adopts the home-indicator inset. */
  .cx-footer {
    padding-bottom: env(safe-area-inset-bottom);
    min-height: calc(48px + env(safe-area-inset-bottom));
  }

  /* Reader gets full width with comfortable reading padding. */
  .cx-reader { padding: 0; }
  .cx-reader-body { padding: 0 6px; }
  .cx-verse { line-height: 1.55; }

  /* Reader meta wraps onto two lines instead of overflowing. */
  .cx-reader-meta { flex-wrap: wrap; row-gap: 6px; }

  /* The mobile FABs become real iOS-feeling tap targets (44pt HIG). */
  .cx-mobile-fab {
    width: 44px; height: 44px;
    font-size: 20px;
    border-radius: 6px;
  }

  /* Solar strip is a luxury — hide on phones to save vertical real-estate. */
  .cx-sun { display: none; }

  /* Side-toggle (single ↔ side-by-side) — tighter so reader meta fits. */
  .cx-side-toggle .cx-side-toggle-icon { display: none; }

  /* Oracle log scrolls inside the rail; key entry stays visible. */
  .cx-oracle { height: 100%; }
  .cx-oracle-log { flex: 1 1 auto; min-height: 0; }
  .cx-oracle-quick { flex-wrap: wrap; }
  .cx-quick { font-size: 11px; padding: 7px 9px; }

  /* Verse menu (long-press / right-click) gets bigger rows. */
  .cx-vm-row { padding: 12px 14px; }
}

/* iPhone SE / small phones */
@media (max-width: 380px) {
  .cx-reader-titles h1 { font-size: 18px; }
  .cx-side-toggle { font-size: 8.5px; padding: 4px 7px; letter-spacing: 0.08em; }
  .cx-rail-l, .cx-rail-r { width: 92vw; }
}

/* Landscape phone — keep the reader breathable, hide chrome that hogs height. */
@media (max-height: 480px) and (orientation: landscape) {
  .cx-status { min-height: 44px; }
  .cx-footer { min-height: 44px; }
  .cx-reader-titles h1 { font-size: 18px; }
  .cx-reader-titles p { display: none; }
}


/* ─── Left rail tabs ─────────────────────────────── */
.cx-ltabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 8px 8px 0 8px;
}
.cx-ltab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  background: transparent;
  border: 1px solid var(--cx-line);
  color: var(--cx-fg-dim);
  font: 600 9px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 140ms ease;
}
.cx-ltab:hover { color: var(--cx-fg); border-color: var(--cx-fg-dim); }
.cx-ltab.is-active {
  color: var(--cx-accent);
  border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
  box-shadow: 0 0 8px var(--cx-accent-glow);
}
.cx-ltab-glyph { font-size: 14px; line-height: 1; }
.cx-ltab-lbl { font-size: 9px; }
.cx-ltab-badge {
  /* Removed — count is already in the pane head ("MARKED VERSES · 01"),
     and a corner indicator was just visual noise. */
  display: none !important;
}
.cx-rail-flex { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.cx-rail-flex > .cx-cf-body { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* ─── Oracle ─────────────────────────────────────── */
.cx-oracle {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.cx-oracle-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cx-line);
  font: 600 10px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.16em;
  color: var(--cx-fg-dim);
  background: color-mix(in oklab, var(--cx-accent) 4%, transparent);
}
/* Tag block — cyan ◉ + ORACLE caps + soft subtitle. */
.cx-oracle-eye {
  font-size: 12px;
  color: var(--cx-accent);
  text-shadow: 0 0 8px var(--cx-accent-glow);
}
.cx-oracle-id {
  display: flex; flex-direction: column;
  gap: 2px;
  flex: 1; min-width: 0;
}
.cx-oracle-id b {
  font: 700 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.22em;
  color: var(--cx-fg);
  text-shadow: 0 0 6px color-mix(in oklab, var(--cx-accent) 30%, transparent);
}
.cx-oracle-id span {
  font: 500 9px/1.2 "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
  color: var(--cx-fg-dim);
  opacity: 0.75;
  text-transform: uppercase;
}
.cx-oracle-head .cx-oracle-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cx-accent);
  box-shadow: 0 0 6px var(--cx-accent-glow);
  margin-right: 6px;
  vertical-align: middle;
  animation: cx-pulse 2.4s ease-in-out infinite;
}
@keyframes cx-pulse { 0%,100%{opacity:.5} 50%{opacity:1} }
.cx-oracle-clear {
  background: transparent;
  border: 1px solid var(--cx-line);
  color: var(--cx-fg-dim);
  padding: 3px 7px;
  font: 600 8px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
  cursor: pointer;
}
.cx-oracle-clear:hover { color: var(--cx-fg); border-color: var(--cx-fg-dim); }

.cx-oracle-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--cx-fg-dim) 25%, transparent) transparent;
}
.cx-msg {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: start;
  padding: 4px 0;
}
.cx-msg-r {
  font: 700 9.5px/16px "JetBrains Mono", monospace;
  letter-spacing: 0.16em;
  color: var(--cx-fg-dim);
  padding-top: 4px;
  text-align: right;
  position: relative;
}
.cx-msg-r::after {
  content: "▸";
  display: inline-block;
  margin-left: 4px;
  opacity: 0.6;
}
.cx-msg.is-user .cx-msg-r {
  color: var(--cx-accent);
  text-shadow: 0 0 6px color-mix(in oklab, var(--cx-accent) 40%, transparent);
}
.cx-msg.is-oracle .cx-msg-r { color: var(--cx-fg); }

/* The body — full-on terminal: mono, friendly size, generous line-height.
   Size is driven by the --cx-oracle-fs custom property (set from the
   Settings slider; defaults to 14px). */
.cx-msg-t {
  margin: 0;
  font: 500 var(--cx-oracle-fs, 14px)/1.65 "JetBrains Mono", "Menlo", "Consolas", monospace;
  color: var(--cx-fg);
  letter-spacing: 0.005em;
  text-wrap: pretty;
  white-space: pre-wrap;
  word-break: break-word;
}
.cx-msg.is-user .cx-msg-t {
  color: color-mix(in oklab, var(--cx-accent) 70%, var(--cx-fg) 30%);
  font-weight: 500;
}
.cx-msg.is-oracle .cx-msg-t {
  /* Soft scanline overlay only on oracle text — feels like CRT readout. */
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 2px,
      color-mix(in oklab, var(--cx-fg-dim) 4%, transparent) 2px,
      color-mix(in oklab, var(--cx-fg-dim) 4%, transparent) 3px
    );
  padding: 4px 0;
}
.cx-msg.is-err .cx-msg-t { color: #d97a7a; }
.cx-msg-flag {
  grid-column: 2 / 3;
  font: 600 9px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.12em;
  color: var(--cx-accent);
  margin-top: 4px;
}
.cx-think { display: inline-flex; gap: 3px; margin-right: 6px; }
.cx-think i {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--cx-accent);
  animation: cx-think 1s ease-in-out infinite;
}
.cx-think i:nth-child(2) { animation-delay: .15s; }
.cx-think i:nth-child(3) { animation-delay: .3s; }
@keyframes cx-think { 0%,100%{opacity:.3;transform:translateY(0)} 50%{opacity:1;transform:translateY(-2px)} }

.cx-oracle-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  border-top: 1px solid var(--cx-line);
  background: color-mix(in oklab, var(--cx-fg-dim) 4%, transparent);
}
.cx-quick {
  background: transparent;
  border: 1px solid var(--cx-line);
  color: var(--cx-fg-dim);
  padding: 5px 10px;
  font: 500 11px/1.2 "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 120ms ease;
  border-radius: 2px;
}
.cx-quick::before {
  content: "$ ";
  opacity: 0.5;
}
.cx-quick:hover:not(:disabled) {
  color: var(--cx-accent);
  border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 6%, transparent);
}
.cx-quick:disabled { opacity: .4; cursor: not-allowed; }

.cx-oracle-input {
  display: flex;
  gap: 6px;
  padding: 10px 12px 14px 12px;
  border-top: 1px solid var(--cx-line);
  background: color-mix(in oklab, var(--cx-bg-0) 50%, var(--cx-bg) 50%);
}
.cx-oracle-input input {
  flex: 1 1 auto;
  background: var(--cx-bg-0);
  border: 1px solid var(--cx-line);
  color: var(--cx-fg);
  padding: 10px 12px;
  font: 500 13.5px/1.3 "JetBrains Mono", "Menlo", monospace;
  letter-spacing: 0.005em;
  outline: none;
  border-radius: 2px;
  caret-color: var(--cx-accent);
}
.cx-oracle-input input::placeholder {
  color: var(--cx-fg-dim);
  opacity: 0.55;
  font-style: normal;
}
.cx-oracle-input input:focus {
  border-color: var(--cx-accent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--cx-accent) 35%, transparent),
              0 0 12px color-mix(in oklab, var(--cx-accent) 20%, transparent);
}
.cx-oracle-input button {
  background: color-mix(in oklab, var(--cx-accent) 10%, transparent);
  border: 1px solid var(--cx-accent);
  color: var(--cx-accent);
  padding: 10px 14px;
  font: 700 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.18em;
  cursor: pointer;
  border-radius: 2px;
}
.cx-oracle-input button:hover:not(:disabled) {
  background: color-mix(in oklab, var(--cx-accent) 14%, transparent);
}
.cx-oracle-input button:disabled { opacity: .4; cursor: not-allowed; }

/* ── Oracle · API key entry (when server has no key) ─────────────────────── */
.cx-oracle-key {
  padding: 12px;
  border-top: 1px solid var(--cx-line);
  background: color-mix(in oklab, var(--cx-accent-warn) 4%, transparent);
}
.cx-oracle-key-msg {
  margin: 0 0 8px;
  font: 400 10.5px/1.5 var(--cx-mono);
  color: var(--cx-fg-dim);
  letter-spacing: 0.04em;
}
.cx-oracle-key-msg a {
  color: var(--cx-accent);
  text-decoration: none;
  margin-left: 6px;
  border-bottom: 1px dotted var(--cx-accent);
}
.cx-oracle-key-msg a:hover { color: var(--cx-fg); border-bottom-color: var(--cx-fg); }
.cx-oracle-key-row {
  display: flex; gap: 6px;
}
.cx-oracle-key-row input {
  flex: 1 1 auto;
  background: var(--cx-bg);
  border: 1px solid var(--cx-line);
  color: var(--cx-fg);
  padding: 7px 9px;
  font: 400 11px/1.3 var(--cx-mono);
  outline: none;
}
.cx-oracle-key-row input:focus { border-color: var(--cx-accent); }
.cx-oracle-key-row button {
  background: transparent;
  border: 1px solid var(--cx-accent);
  color: var(--cx-accent);
  padding: 7px 10px;
  font: 700 10px/1 var(--cx-mono);
  letter-spacing: 0.12em;
  cursor: pointer;
}
.cx-oracle-key-row button:hover:not(:disabled) {
  background: color-mix(in oklab, var(--cx-accent) 14%, transparent);
}
.cx-oracle-key-row button:disabled { opacity: .4; cursor: not-allowed; }
.cx-oracle-key-err {
  margin: 8px 0 0;
  color: var(--cx-accent-warn);
  font: 400 10px/1.4 var(--cx-mono);
}
.cx-oracle-key-hint {
  margin: 8px 0 0;
  color: var(--cx-fg-dim);
  font: italic 9.5px/1.4 var(--cx-mono);
  opacity: 0.7;
}
.cx-oracle-key-hint code {
  background: color-mix(in oklab, var(--cx-fg-dim) 10%, transparent);
  padding: 1px 4px;
  font-size: 10px;
}


/* ─── Search input (left rail) ─── */
.cx-search {
  display: flex; align-items: center; gap: 6px;
  margin: 8px 8px 6px 8px;
  padding: 6px 8px;
  border: 1px solid var(--cx-line);
  background: var(--cx-bg-0);
}
.cx-search-icon { color: var(--cx-fg-dim); font-size: 12px; }
.cx-search input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: var(--cx-fg);
  font: 400 11px/1.2 "JetBrains Mono", monospace;
}
.cx-search input::placeholder { color: var(--cx-fg-dim); }
.cx-search-x {
  background: transparent; border: 0;
  color: var(--cx-fg-dim);
  font-size: 14px; line-height: 1; cursor: pointer;
  padding: 0 2px;
}
.cx-search-x:hover { color: var(--cx-accent); }

/* ─── Collapsible book section header ─── */
.cx-rail-h-btn {
  width: 100%;
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: 0;
  padding: 6px 10px; margin: 0;
  text-align: left;
  cursor: pointer;
  color: var(--cx-fg-dim);
  font: 600 10px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.18em;
}
.cx-rail-h-btn:hover { color: var(--cx-fg); }
.cx-rail-h-btn i { margin-left: auto; font-style: normal; font-size: 9px; opacity: .7; }
.cx-caret { display: inline-block; width: 10px; color: var(--cx-accent); font-size: 10px; }
.cx-booklist-empty { color: var(--cx-fg-dim); font-size: 11px; padding: 8px 12px; font-style: italic; }

/* ─── Book row (clickable) + chapter grid ─── */
.cx-book-row {
  width: 100%;
  display: grid;
  grid-template-columns: 30px 1fr auto auto;
  gap: 8px; align-items: center;
  background: transparent; border: 0;
  padding: 5px 10px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  border-left: 2px solid transparent;
}
.cx-book-row:hover { background: color-mix(in oklab, var(--cx-accent) 6%, transparent); }
li.is-active > .cx-book-row { border-left-color: var(--cx-accent); color: var(--cx-fg); }
li.is-open > .cx-book-row { background: color-mix(in oklab, var(--cx-accent) 8%, transparent); }
.cx-book-caret { color: var(--cx-fg-dim); }
.cx-chgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  gap: 3px;
  padding: 6px 10px 10px 40px;
  background: color-mix(in oklab, var(--cx-accent) 4%, transparent);
}
.cx-chcell {
  background: var(--cx-bg-0);
  border: 1px solid var(--cx-line);
  color: var(--cx-fg-dim);
  padding: 4px 0;
  font: 600 10px/1 "JetBrains Mono", monospace;
  cursor: pointer;
  transition: all 100ms ease;
}
.cx-chcell:hover { color: var(--cx-accent); border-color: var(--cx-accent); }
.cx-chcell.is-active {
  background: var(--cx-accent);
  color: var(--cx-bg-0);
  border-color: var(--cx-accent);
  box-shadow: 0 0 6px var(--cx-accent-glow);
}

/* ─── Bookmark row · click to open · × to delete ─── */
.cx-bm-li { position: relative; list-style: none; }
.cx-bm-row {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr auto 26px;
  grid-template-areas:
    "idx ref ts del"
    ".   note note del";
  column-gap: 8px; row-gap: 1px;
  padding: 8px 10px;
  background: var(--cx-bg-1);
  border-bottom: 1px solid var(--cx-line);
  cursor: pointer;
}
.cx-bm-row:hover { background: color-mix(in oklab, var(--cx-accent) 6%, var(--cx-bg-1)); }
.cx-bm-idx { grid-area: idx; }
.cx-bm-ref { grid-area: ref; }
.cx-bm-ts  { grid-area: ts; }
.cx-bm-note{ grid-area: note; }
.cx-bm-del {
  grid-area: del;
  background: transparent;
  border: 1px solid var(--cx-line);
  color: var(--cx-fg-dim);
  width: 22px; height: 22px;
  font-size: 16px; line-height: 1;
  cursor: pointer;
  align-self: center;
  justify-self: end;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.cx-bm-del:hover { color: #fff; background: #c63a3a; border-color: #c63a3a; }

/* ─── Reader loading / error states ─── */
.cx-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  padding: 60px 24px;
  color: var(--cx-fg-dim);
  font: 600 11px/1.4 "JetBrains Mono", monospace;
  letter-spacing: 0.12em;
}
.cx-loading.is-err { color: #d97a7a; }
.cx-loading code {
  font: 400 10px/1.4 "JetBrains Mono", monospace;
  color: var(--cx-fg-dim);
  padding: 6px 10px;
  border: 1px dashed var(--cx-line);
  max-width: 480px; text-align: center;
}
.cx-loading-orb {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--cx-line);
  border-top-color: var(--cx-accent);
  animation: cx-spin 1s linear infinite;
}
@keyframes cx-spin { to { transform: rotate(360deg); } }

/* ─── Collapsible right-panel sections ─── */
.cx-fold {
  border-bottom: 1px solid var(--cx-line);
}
.cx-fold-head {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: 0;
  padding: 10px 14px;
  color: var(--cx-fg-dim);
  font: 600 10px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.16em;
  cursor: pointer;
  text-align: left;
}
.cx-fold-head:hover { color: var(--cx-fg); background: color-mix(in oklab, var(--cx-accent) 4%, transparent); }
.cx-fold-head i { margin-left: auto; font-style: normal; font-size: 9px; color: var(--cx-fg-dim); }
.cx-fold-body { padding: 0 14px 14px 14px; }
.cx-fold-body.is-empty { padding: 0; }

/* ─── Oracle export bar ─── */
.cx-oracle-export {
  display: flex; gap: 4px; align-items: center;
  padding: 4px 12px;
  border-top: 1px solid var(--cx-line);
}
.cx-oracle-export span {
  font: 600 8px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.16em;
  color: var(--cx-fg-dim);
  margin-right: 4px;
}
.cx-oracle-export button {
  background: transparent;
  border: 1px solid var(--cx-line);
  color: var(--cx-fg-dim);
  padding: 4px 7px;
  font: 600 9px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.cx-oracle-export button:hover {
  color: var(--cx-accent);
  border-color: var(--cx-accent);
}


/* ─────────────────────────────────────────────────────────────────
   In the name of Jesus Christ, the Word made flesh.
   May this code serve readers of His word in clarity and peace.
   ───────────────────────────────────────────────────────────── */

/* Collapsible sections ─────────────────────────────────────────── */
.cx-coll {
  border: 1px solid var(--cx-line);
  background: var(--cx-bg-2);
  margin-bottom: 8px;
}
.cx-coll-h {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 16px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--cx-fg);
  text-align: left;
  font: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color .12s, background .12s;
}
.cx-coll-h:hover { background: rgba(255,255,255,.02); }
.cx-coll.is-open > .cx-coll-h { border-bottom-color: var(--cx-line); }
.cx-coll-arr {
  display: inline-block;
  font-family: var(--cx-mono); font-size: 11px;
  color: var(--cx-accent);
  transform: rotate(-90deg);
  transition: transform .14s ease-out;
  line-height: 1;
}
.cx-coll.is-open > .cx-coll-h .cx-coll-arr { transform: rotate(0deg); }
.cx-coll-title {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
  font-family: var(--cx-sans); font-size: 12.5px;
  font-weight: 600; letter-spacing: 0.02em;
  color: var(--cx-fg);
}
.cx-coll-title b { font-weight: 600; }
.cx-coll-accent {
  width: 3px; height: 14px; border-radius: 1px;
  background: var(--cx-accent);
}
.cx-coll-count {
  font-family: var(--cx-mono); font-size: 9px; letter-spacing: 0.1em;
  color: var(--cx-fg-dim);
  border: 1px solid var(--cx-line);
  padding: 2px 6px;
  font-variant-numeric: tabular-nums;
}
.cx-coll-sub {
  font-family: var(--cx-mono); font-size: 9.5px; letter-spacing: 0.08em;
  color: var(--cx-fg-dim);
  white-space: nowrap;
  text-overflow: ellipsis; overflow: hidden;
  max-width: 36ch;
}
.cx-coll-body {
  padding: 12px;
  display: none;
}
.cx-coll.is-open > .cx-coll-body { display: block; }

/* Inside collapsibles, suppress double borders from cards */
.cx-coll-body .cx-corpus-row,
.cx-coll-body .cx-talmud-card,
.cx-coll-body .cx-comm-card,
.cx-coll-body .cx-gnosis-card {
  border: 0;
  padding: 0;
  background: transparent;
}
/* Inside a collapsible the sigil already sits in the header row, so the
   card body should occupy the full width — not get pinned into the 48px
   sigil column. */
.cx-coll-body .cx-gnosis-card {
  display: block;
  grid-template-columns: none;
}
.cx-coll-body .cx-corpus-row.is-primary {
  background: transparent;
  box-shadow: none;
}
.cx-coll-body .cx-comm-card + .cx-comm-card { margin-top: 12px; }

/* corpus-row inside collapsible: bring back text+actions layout */
.cx-coll-body .cx-corpus-row {
  display: flex; flex-direction: column; gap: 8px;
}
.cx-coll-body .cx-corpus-text { color: var(--cx-fg); }

/* Talmud heading composition inside collapsible */
.cx-talmud-h-inner { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cx-talmud-h-inner .cx-talmud-heading {
  font-family: var(--cx-sans); font-size: 12.5px; color: var(--cx-fg);
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-talmud-h-inner .cx-talmud-idx {
  font-family: var(--cx-mono); font-size: 9px; color: var(--cx-accent-2);
  letter-spacing: 0.12em;
}

/* Commentary group label inside collapsible */
.cx-comm-grp {
  font-family: var(--cx-mono); font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cx-fg);
}

/* Gnosis heading inside collapsible */
.cx-gnosis-h-inner { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cx-gnosis-h-inner .cx-gnosis-sigil {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid #c7a9ff;
  color: #c7a9ff;
  font-size: 14px;
  background: rgba(199,169,255,.06);
}
.cx-gnosis-h-inner .cx-gnosis-title-txt {
  font-family: var(--cx-sans); font-size: 12.5px;
  color: var(--cx-fg); font-weight: 600;
}
.cx-pane.is-gnosis .cx-coll {
  border-color: rgba(199,169,255,.22);
}
.cx-pane.is-gnosis .cx-coll-arr { color: #c7a9ff; }

/* Translations corpus header layout inside collapsible */
.cx-corpus-h-inner { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cx-corpus-h-inner .cx-corpus-glyph {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid var(--cx-line-strong);
  background: var(--cx-bg);
  font-family: var(--cx-mono); font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--cx-accent);
}
.cx-corpus-h-inner .cx-corpus-id { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.cx-corpus-h-inner .cx-corpus-id b {
  font-family: var(--cx-sans); font-size: 12px; color: var(--cx-fg);
  font-weight: 600; letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-corpus-h-inner .cx-corpus-id span {
  font-family: var(--cx-mono); font-size: 9px; color: var(--cx-fg-dim);
  letter-spacing: 0.06em;
}

/* Cross-references list inside collapsible */
.cx-coll-body ul.cx-xref {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.cx-coll-body ul.cx-xref li {
  display: grid; grid-template-columns: 110px 1fr; gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--cx-line);
  font-family: var(--cx-serif); font-size: 13px;
  color: var(--cx-fg);
}
.cx-coll-body ul.cx-xref li:last-child { border-bottom: 0; }
.cx-coll-body ul.cx-xref li b {
  font-family: var(--cx-mono); font-size: 10.5px;
  letter-spacing: 0.06em; color: var(--cx-accent);
  font-weight: 600;
}

/* Panel status placeholders (loading / error / no cache) ───────── */
.cx-pane-status {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px;
  padding: 18px;
  border: 1px dashed var(--cx-line-strong);
  background: var(--cx-bg-2);
  margin-bottom: 10px;
}
.cx-pane-status b {
  font-family: var(--cx-mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--cx-accent);
  font-weight: 700;
}
.cx-pane-status span {
  font-family: var(--cx-sans); font-size: 12.5px;
  color: var(--cx-fg-dim); line-height: 1.5;
}
.cx-pane-status.is-loading { border-color: var(--cx-accent); }
.cx-pane-status.is-err { border-color: #ff8a8a; }
.cx-pane-status.is-err b { color: #ff8a8a; }

.cx-pane-spin {
  display: inline-flex; gap: 4px;
}
.cx-pane-spin i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--cx-accent);
  animation: cx-spin-pulse 1.1s ease-in-out infinite;
}
.cx-pane-spin i:nth-child(2) { animation-delay: .15s; }
.cx-pane-spin i:nth-child(3) { animation-delay: .3s; }
@keyframes cx-spin-pulse {
  0%, 80%, 100% { opacity: .25; transform: scale(.8); }
  40% { opacity: 1; transform: scale(1.2); }
}

.cx-pane-retry {
  appearance: none;
  margin-top: 4px;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid var(--cx-accent);
  color: var(--cx-accent);
  font: 700 10.5px/1 var(--cx-mono);
  letter-spacing: 0.14em;
  cursor: pointer;
}
.cx-pane-retry:hover {
  background: var(--cx-accent);
  color: var(--cx-bg);
}

/* Redraft mini-button in pane heads */
.cx-regen {
  appearance: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--cx-line-strong);
  background: var(--cx-bg);
  color: var(--cx-fg-dim);
  font: 700 9px/1 var(--cx-mono);
  letter-spacing: 0.14em;
  cursor: pointer;
}
.cx-regen:hover {
  color: var(--cx-accent);
  border-color: var(--cx-accent);
}
.cx-regen-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--cx-accent);
  box-shadow: 0 0 6px var(--cx-accent-glow);
}

/* Gematria calc tweaks inside collapsible */
.cx-coll-body .cx-gem-calc {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RIGHT-RAIL RESIZER  +  TRANSLATIONS PANEL v2
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 881px) {
  .cx-rail-r { position: relative; }
  .cx-rail-l { position: relative; }
}
.cx-rail-resize.is-left { left: auto; right: -6px; }
.cx-rail-resize.is-left::after { left: 3px; }
.cx-rail-resize {
  position: absolute;
  top: 0; bottom: 0; left: -6px;
  width: 10px;
  cursor: ew-resize;
  z-index: 40;
  background: transparent;
  transition: background 120ms ease;
}
.cx-rail-resize::after {
  content: "";
  position: absolute;
  top: 50%; left: 5px;
  width: 2px; height: 36px;
  transform: translateY(-50%);
  background: var(--cx-line);
  border-radius: 2px;
  transition: background 120ms ease, height 120ms ease;
}
.cx-rail-resize:hover::after,
body.cx-resizing .cx-rail-resize::after {
  background: var(--cx-accent);
  height: 60px;
  box-shadow: 0 0 8px var(--cx-accent-glow);
}
body.cx-resizing { cursor: ew-resize; user-select: none; }
body.cx-resizing * { cursor: ew-resize !important; }

@media (max-width: 880px) {
  .cx-rail-resize { display: none; }
}

/* ── Translations panel · compact ─────────────────────────────────────── */
.cx-tp {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.cx-tp-quote { flex: 0 0 auto; }
.cx-tp-groups {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--cx-fg-dim) 25%, transparent) transparent;
}
.cx-tp-groups::-webkit-scrollbar { width: 4px; height: 0; }
.cx-tp-groups::-webkit-scrollbar-track { background: transparent; }
.cx-tp-groups::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--cx-fg-dim) 25%, transparent); border-radius: 2px; }
.cx-tp-groups::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--cx-fg-dim) 50%, transparent); }
.cx-tp-foot { flex: 0 0 auto; }
.cx-tp-quote {
  margin: 10px 14px 4px;
  padding: 10px 12px 12px 36px;
  border-left: 2px solid var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 6%, transparent);
  position: relative;
  font-family: var(--cx-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--cx-fg);
}
.cx-tp-quote-glyph {
  position: absolute; top: 8px; left: 10px;
  font-family: var(--cx-mono);
  font-size: 9.5px; letter-spacing: 0.1em;
  color: var(--cx-accent); opacity: 0.85;
}
.cx-tp-quote-text { display: block; }

.cx-tp-list {
  list-style: none; margin: 0; padding: 0;
}
.cx-tp-row {
  display: grid;
  grid-template-columns: 14px 1fr 28px;
  align-items: stretch;
  border-bottom: 1px solid var(--cx-line);
  transition: background 100ms ease, opacity 120ms ease, transform 120ms ease;
}

/* ── Translation language groups ─────────────────────────────────────────
   Foldable header per language. Drag the header (or the ⋮⋮ on a row) to
   reorder. Body uses the grid 1fr/0fr trick for a smooth height tween
   without measuring. */
.cx-tp-groups { margin-top: 10px; border-top: 1px solid var(--cx-line); }
.cx-tp-group {
  border-bottom: 1px solid var(--cx-line);
  position: relative;
  transition: background 120ms ease;
}
.cx-tp-group.is-drop::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--cx-accent); box-shadow: 0 0 8px var(--cx-accent-glow);
}
.cx-tp-group-h {
  display: grid;
  grid-template-columns: 14px 28px 1fr auto 16px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--cx-accent) 3%, transparent),
    transparent);
  transition: background 120ms ease, color 120ms ease;
}
.cx-tp-group-h:hover { background: color-mix(in oklab, var(--cx-accent) 6%, transparent); }
.cx-tp-group-grip {
  font-size: 10px; line-height: 1; letter-spacing: -2px;
  color: var(--cx-fg-dim); opacity: 0; transition: opacity 120ms ease;
  cursor: grab;
}
.cx-tp-group-h:hover .cx-tp-group-grip { opacity: 0.7; }
.cx-tp-group-h:active .cx-tp-group-grip { cursor: grabbing; }
.cx-tp-group-tag {
  font-family: var(--cx-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 9.5px; letter-spacing: 0.12em;
  color: var(--cx-accent);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 40%, transparent);
  border-radius: 3px;
  padding: 2px 5px;
  text-align: center;
}
.cx-tp-group-name {
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--cx-fg);
}
.cx-tp-group-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--cx-fg-dim);
}
.cx-tp-group-dot {
  width: 6px; height: 6px; border-radius: 50%; display: inline-block;
}
.cx-tp-group-dot.is-p { background: var(--cx-accent); box-shadow: 0 0 4px var(--cx-accent-glow); }
.cx-tp-group-dot.is-c { background: var(--cx-accent-2, var(--cx-accent)); }
.cx-tp-group-count {
  font-family: var(--cx-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 10px;
  min-width: 18px; text-align: right;
}
.cx-tp-group-caret {
  font-size: 10px; color: var(--cx-fg-dim);
  transition: transform 200ms ease;
}
.cx-tp-group.is-folded .cx-tp-group-caret { transform: rotate(0deg); }
.cx-tp-group-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 220ms ease;
}
.cx-tp-group.is-folded .cx-tp-group-body { grid-template-rows: 0fr; }
.cx-tp-group-body > .cx-tp-list {
  overflow: hidden;
  min-height: 0;
}

/* Drag affordances on rows */
.cx-tp-grip {
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1; letter-spacing: -2px;
  color: var(--cx-fg-dim);
  cursor: grab;
  opacity: 0; transition: opacity 120ms ease;
}
.cx-tp-row:hover .cx-tp-grip { opacity: 0.6; }
.cx-tp-row:active .cx-tp-grip { cursor: grabbing; }
.cx-tp-row.is-dragging { opacity: 0.4; }
.cx-tp-row.is-drop {
  box-shadow: inset 0 2px 0 0 var(--cx-accent);
}
.cx-tp-row:hover { background: color-mix(in oklab, var(--cx-accent) 4%, transparent); }
.cx-tp-row.is-primary { background: color-mix(in oklab, var(--cx-accent) 8%, transparent); }
.cx-tp-row.is-compare:not(.is-primary) { background: color-mix(in oklab, var(--cx-accent-2) 5%, transparent); }

.cx-tp-pick {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 9px 14px;
  background: transparent; border: 0;
  text-align: left;
  font-family: var(--cx-sans);
  font-size: 13.5px;
  color: var(--cx-fg-dim);
  cursor: pointer;
  letter-spacing: 0.005em;
}
.cx-tp-pick:hover { color: var(--cx-fg); }
.cx-tp-row.is-primary .cx-tp-pick { color: var(--cx-accent); font-weight: 500; }

.cx-tp-mark {
  width: 10px; height: 10px;
  display: inline-block;
  color: var(--cx-accent);
  font-size: 14px;
  line-height: 1;
  text-align: center;
}
.cx-tp-name { line-height: 1.1; }
.cx-tp-year {
  font-family: var(--cx-mono);
  font-size: 10px;
  color: var(--cx-fg-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.cx-tp-row.is-primary .cx-tp-year { color: var(--cx-accent); opacity: 0.8; }

.cx-tp-eye {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--cx-line);
  color: var(--cx-fg-dim);
  font-size: 13px;
  cursor: pointer;
  transition: color 100ms ease, background 100ms ease;
}
.cx-tp-eye:hover { color: var(--cx-accent); background: color-mix(in oklab, var(--cx-accent) 6%, transparent); }
.cx-tp-eye.is-on { color: var(--cx-accent-2); }

.cx-tp-foot {
  padding: 10px 14px 14px;
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--cx-fg-dim);
  text-align: center;
  opacity: 0.6;
}

/* ── Corpus add · "+ add a corpus" — quiet, library-shelf feel ───────────── */
.cx-repo {
  margin: 4px 14px 12px;
}
.cx-repo-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--cx-fg-dim);
  background: transparent;
  border: none;
  padding: 6px 8px;
  cursor: pointer;
  opacity: 0.55;
  transition: color .15s ease, opacity .15s ease;
}
.cx-repo-toggle:hover { color: var(--cx-fg); opacity: 1; }
.cx-repo.is-open .cx-repo-toggle { color: var(--cx-fg); opacity: 1; }

.cx-repo-panel {
  margin-top: 6px;
  padding: 10px 2px 4px;
  background: transparent;
  border-top: 1px solid var(--cx-line);
}

.cx-repo-providers {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  padding: 0 2px;
  font-family: var(--cx-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
}
.cx-repo-prov {
  padding: 3px 0;
  background: transparent;
  color: var(--cx-fg-dim);
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  opacity: 0.6;
  transition: color .15s ease, opacity .15s ease, border-color .15s ease;
}
.cx-repo-prov:hover { color: var(--cx-fg); opacity: 1; }
.cx-repo-prov.is-on {
  color: var(--cx-fg);
  opacity: 1;
  border-bottom-color: var(--cx-line-strong);
}

.cx-repo-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 2px;
  background: transparent;
  color: var(--cx-fg);
  border: none;
  border-bottom: 1px solid var(--cx-line);
  font-family: var(--cx-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  outline: none;
  transition: border-color .15s ease;
}
.cx-repo-input::placeholder { color: var(--cx-fg-dim); opacity: 0.55; font-style: italic; }
.cx-repo-input:focus { border-bottom-color: var(--cx-line-strong); }

.cx-repo-results {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--cx-fg-dim) 25%, transparent) transparent;
}
.cx-repo-results::-webkit-scrollbar { width: 4px; height: 0; }
.cx-repo-results::-webkit-scrollbar-track { background: transparent; }
.cx-repo-results::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--cx-fg-dim) 25%, transparent); border-radius: 2px; }
.cx-repo-results::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--cx-fg-dim) 50%, transparent); }

.cx-repo-result {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 6px 2px;
  border-bottom: 1px solid color-mix(in oklab, var(--cx-line) 50%, transparent);
}
.cx-repo-result:last-child { border-bottom: none; }
.cx-repo-result:hover .cx-repo-add { opacity: 1; }

.cx-repo-r-name {
  display: flex; flex-direction: column; gap: 1px;
  flex: 1; min-width: 0;
}
.cx-repo-r-name b {
  font-family: var(--cx-sans);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--cx-fg);
  letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-repo-r-name i {
  font-style: normal;
  font-family: var(--cx-mono);
  font-size: 8.5px;
  color: var(--cx-fg-dim);
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.cx-repo-add {
  font-family: var(--cx-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--cx-fg-dim);
  background: transparent;
  border: none;
  padding: 3px 6px;
  cursor: pointer;
  opacity: 0.4;
  transition: color .15s ease, opacity .15s ease;
  white-space: nowrap;
}
.cx-repo-add:hover { color: var(--cx-fg); opacity: 1; }
.cx-repo-add:disabled { opacity: 0.3; cursor: progress; }

.cx-repo-empty {
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--cx-fg-dim);
  text-align: center;
  padding: 14px 6px;
  opacity: 0.5;
  font-style: italic;
}

.cx-repo-err {
  margin: 8px 0 0;
  padding: 4px 0;
  font-family: var(--cx-mono);
  font-size: 9.5px;
  color: var(--cx-accent-warn);
  opacity: 0.85;
}

.cx-repo-hint {
  margin: 8px 0 0;
  font-family: var(--cx-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--cx-fg-dim);
  text-align: center;
  opacity: 0.4;
  line-height: 1.5;
  font-style: italic;
}

/* Remove-corpus chip — only shown on user-added rows. Lives next to the
   compare eye; nearly invisible until hover. */
.cx-tp-rm {
  margin-left: 4px;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--cx-fg-dim);
  border: none;
  font-family: var(--cx-mono);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.3;
  transition: color .14s ease, opacity .14s ease;
}
.cx-tp-row.is-user:hover .cx-tp-rm,
.cx-tp-rm:hover { opacity: 1; }
.cx-tp-rm:hover { color: var(--cx-accent-warn); }

/* ═══════════════════════════════════════════════════════════════════════════
   LIBRARY · v2  — the elegant one.  "Simplicity is the ultimate sophistication."
   One typographic list. No carets, no nested groups, no badges.
   ═══════════════════════════════════════════════════════════════════════════ */

.cx-lib {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  margin: -4px -4px 0;            /* eat the CornerFrame's inner pad */
}

/* — search · a single hairline rule, no icons, vanishes into the page — */
.cx-lib-search {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--cx-line);
  flex: 0 0 auto;
}
.cx-lib-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 10px 0;
  font-family: var(--cx-sans);
  font-size: 13px;
  color: var(--cx-fg);
  letter-spacing: 0.005em;
}
.cx-lib-search input::placeholder {
  color: var(--cx-fg-dim);
  font-style: italic;
  opacity: 0.65;
}
.cx-lib-count {
  font-family: var(--cx-mono);
  font-size: 10px;
  color: var(--cx-fg-dim);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}
.cx-lib-clear {
  background: transparent;
  border: 0;
  color: var(--cx-fg-dim);
  font-size: 16px;
  line-height: 1;
  padding: 0 0 0 6px;
  cursor: pointer;
}
.cx-lib-clear:hover { color: var(--cx-accent); }

/* — scroll body — */
.cx-lib-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0 24px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--cx-fg-dim) 25%, transparent) transparent;
}
.cx-lib-scroll::-webkit-scrollbar { width: 4px; height: 0; }
.cx-lib-scroll::-webkit-scrollbar-track { background: transparent; }
.cx-lib-scroll::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--cx-fg-dim) 25%, transparent); border-radius: 2px; }
.cx-lib-scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--cx-fg-dim) 50%, transparent); }

/* — section dividers · centered small-caps, hairline either side — */
.cx-lib-h {
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cx-fg-dim);
  text-align: center;
  font-weight: 400;
  padding: 22px 0 10px;
  margin: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cx-lib-h::before,
.cx-lib-h::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cx-line), transparent);
}
.cx-lib-h::before { background: linear-gradient(90deg, transparent, var(--cx-line)); }
.cx-lib-h::after  { background: linear-gradient(90deg, var(--cx-line), transparent); }

/* — book row · pure typography, no boxes — */
.cx-lib-book { display: contents; }     /* let chs sit at scroll-root level */

.cx-lib-row {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px 8px 16px;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  color: var(--cx-fg-dim);
  font-family: var(--cx-sans);
  font-size: 14px;
  letter-spacing: 0.005em;
  cursor: pointer;
  text-align: left;
  transition: color 100ms ease, background 100ms ease, border-color 100ms ease, padding 120ms ease;
}
.cx-lib-row:hover {
  color: var(--cx-fg);
  background: color-mix(in oklab, var(--cx-accent) 4%, transparent);
}
.cx-lib-row[data-active="true"] {
  color: var(--cx-fg);
  border-left-color: var(--cx-accent);
}
.cx-lib-row[data-open="true"] {
  color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 7%, transparent);
}
.cx-lib-row[data-active="true"][data-open="true"] { color: var(--cx-accent); }

.cx-lib-name { line-height: 1.2; }
.cx-lib-meta {
  font-family: var(--cx-mono);
  font-size: 10.5px;
  color: inherit;
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.cx-lib-row[data-active="true"] .cx-lib-meta {
  opacity: 0.95;
  color: var(--cx-accent);
}

/* — chapter strip · slides in beneath the open row — */
.cx-lib-chs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  padding: 8px 14px 14px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--cx-accent) 10%, transparent),
    color-mix(in oklab, var(--cx-accent) 2%, transparent) 60%,
    transparent);
  animation: cx-lib-chs-in 180ms ease-out;
}
@keyframes cx-lib-chs-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cx-lib-ch {
  font-family: var(--cx-mono);
  font-size: 11px;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--cx-line) 70%, transparent);
  color: var(--cx-fg-dim);
  padding: 5px 0;
  cursor: pointer;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  border-radius: 2px;
  transition: all 80ms ease;
}
.cx-lib-ch:hover {
  color: var(--cx-accent);
  border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
}
.cx-lib-ch[data-active="true"] {
  background: var(--cx-accent);
  border-color: var(--cx-accent);
  color: var(--cx-bg);
  font-weight: 600;
}

.cx-lib-empty {
  text-align: center;
  color: var(--cx-fg-dim);
  font-style: italic;
  font-size: 12px;
  padding: 40px 14px;
  opacity: 0.6;
}

/* Defeat the legacy .cx-rail-l .cx-frame inner padding so v2 fills cleanly. */
.cx-rail-l .cx-frame:has(.cx-lib) { padding: 12px 4px 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   VERSE CONTEXT MENU  — left-click popover on any verse
   ═══════════════════════════════════════════════════════════════════════════ */
.cx-vm {
  position: fixed;
  z-index: 9999;
  width: 250px;
  /* Solid panel — no transparency. The page must never bleed through. */
  background: var(--cx-bg);
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 35%, transparent);
  border-radius: 4px;
  box-shadow:
    0 1px 0 0 color-mix(in oklab, var(--cx-fg) 8%, transparent) inset,
    0 24px 60px -12px rgba(0,0,0,0.55),
    0 12px 28px -8px rgba(0,0,0,0.45),
    0 0 0 1px color-mix(in oklab, var(--cx-accent) 18%, transparent);
  animation: cx-vm-in 140ms ease-out;
  overflow: hidden;
}
/* Light-mode needs a touch more contrast around the edge */
.cx-app.is-light .cx-vm {
  box-shadow:
    0 24px 60px -12px rgba(0,0,0,0.18),
    0 8px 18px -4px rgba(0,0,0,0.12),
    0 0 0 1px color-mix(in oklab, var(--cx-accent) 25%, transparent);
}
@keyframes cx-vm-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
.cx-vm-left  { transform-origin: right center; }
.cx-vm-right { transform-origin: left  center; }
.cx-vm-below { transform-origin: center top; }

.cx-vm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid var(--cx-line);
  background: color-mix(in oklab, var(--cx-accent) 6%, transparent);
}
.cx-vm-ref {
  font-family: var(--cx-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cx-accent);
}
.cx-vm-x {
  background: transparent; border: 0; color: var(--cx-fg-dim);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 0 0 0 8px;
}
.cx-vm-x:hover { color: var(--cx-fg); }

.cx-vm-body { padding: 4px 0; }
.cx-vm-row {
  width: 100%;
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 4px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--cx-sans);
  color: var(--cx-fg);
  transition: background 80ms ease, color 80ms ease;
}
.cx-vm-row:hover {
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
  color: var(--cx-accent);
}
.cx-vm-row .cx-vm-icon {
  grid-row: 1 / span 2;
  font-family: var(--cx-mono);
  font-size: 13px;
  color: var(--cx-accent);
  text-align: center;
}
.cx-vm-row .cx-vm-lbl {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cx-vm-row .cx-vm-sub {
  font-size: 10.5px;
  color: var(--cx-fg-dim);
  letter-spacing: 0.01em;
  font-style: italic;
}
.cx-vm-row.is-on .cx-vm-icon { color: var(--cx-accent); text-shadow: 0 0 6px var(--cx-accent-glow); }

.cx-vm-translate { padding: 6px 4px 8px; }
.cx-vm-back {
  background: transparent; border: 0; color: var(--cx-fg-dim);
  font-family: var(--cx-mono); font-size: 10px; letter-spacing: 0.12em;
  padding: 4px 12px 8px; cursor: pointer;
}
.cx-vm-back:hover { color: var(--cx-accent); }
.cx-vm-tr {
  width: 100%;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 7px 12px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--cx-fg);
  transition: background 80ms ease;
}
.cx-vm-tr:hover { background: color-mix(in oklab, var(--cx-accent) 7%, transparent); }
.cx-vm-tr:disabled { opacity: 0.35; cursor: not-allowed; }
.cx-vm-tr.is-active { background: color-mix(in oklab, var(--cx-accent) 10%, transparent); }
.cx-vm-tr-glyph {
  font-family: var(--cx-mono); font-size: 10px;
  color: var(--cx-accent); letter-spacing: 0.04em;
}
.cx-vm-tr-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cx-vm-tr-name b {
  font-family: var(--cx-sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.005em;
}
.cx-vm-tr-name i {
  font-style: normal;
  font-family: var(--cx-mono); font-size: 9.5px; letter-spacing: 0.06em;
  color: var(--cx-fg-dim);
}
.cx-vm-tr-on {
  font-family: var(--cx-mono); font-size: 8.5px; letter-spacing: 0.16em;
  color: var(--cx-bg); background: var(--cx-accent);
  padding: 2px 5px;
}

/* ════════════════════════════════════════════════════════════════════════
   Personal-bible highlights · hover actions · color picker · distraction-free
   Added in v4.13 — markings persist in localStorage across sessions.
   ════════════════════════════════════════════════════════════════════════ */

/* Verse highlight affordance — sits in a reserved 28px right gutter so it
   NEVER overlaps text. Quiet at rest, intensifies on hover.
   Each verse already had `padding-right: 10px`; we extend that to 36px so
   the 22-px button has room to breathe at the right edge. */
.cx-verse,
.cx-verse-row { padding-right: 36px; }

.cx-vmark-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: color-mix(in oklab, var(--cx-fg-dim) 55%, transparent);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-family: var(--cx-mono);
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, color .12s, border-color .12s, background .12s, transform .08s;
  z-index: 2;
}
.cx-verse:hover .cx-vmark-btn,
.cx-verse-row:hover .cx-vmark-btn,
.cx-verse:focus-within .cx-vmark-btn,
.cx-verse-row:focus-within .cx-vmark-btn { opacity: 0.55; }
.cx-vmark-btn:hover {
  opacity: 1 !important;
  color: var(--cx-accent);
  border-color: color-mix(in oklab, var(--cx-accent) 60%, transparent);
  background: color-mix(in oklab, var(--cx-accent) 10%, var(--cx-bg) 90%);
}
.cx-vmark-btn:active { transform: translateY(-50%) scale(0.9); }
.cx-vmark-btn.is-on {
  opacity: 1;                  /* always visible when verse is marked */
  color: var(--cx-accent);
  border-color: color-mix(in oklab, var(--cx-accent) 35%, transparent);
}

/* Highlighted-verse hues — subtle, personal-bible feel.
   Each colour: a soft tinted background + a thin colored left bar that does
   NOT shift the text. Coexists with .is-hl (cursor) by stacking. */
.cx-verse.is-marked,
.cx-verse-row.is-marked { background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%); }

.cx-verse[data-mark="amber"],
.cx-verse-row[data-mark="amber"]   { background-color: rgba(255, 196, 107, 0.10); border-left-color: rgba(255, 196, 107, 0.65); }
.cx-verse[data-mark="cyan"],
.cx-verse-row[data-mark="cyan"]    { background-color: rgba(126, 224, 255, 0.10); border-left-color: rgba(126, 224, 255, 0.65); }
.cx-verse[data-mark="violet"],
.cx-verse-row[data-mark="violet"]  { background-color: rgba(199, 169, 255, 0.10); border-left-color: rgba(199, 169, 255, 0.65); }
.cx-verse[data-mark="green"],
.cx-verse-row[data-mark="green"]   { background-color: rgba(141, 232, 168, 0.10); border-left-color: rgba(141, 232, 168, 0.65); }
.cx-verse[data-mark="rose"],
.cx-verse-row[data-mark="rose"]    { background-color: rgba(255, 130, 145, 0.10); border-left-color: rgba(255, 130, 145, 0.65); }

.cx-verse.is-marked,
.cx-verse-row.is-marked { border-left-width: 2px; border-left-style: solid; }

/* Hover keeps highlight visible but slightly intensifies */
.cx-verse[data-mark="amber"]:hover  { background-color: rgba(255, 196, 107, 0.16); }
.cx-verse[data-mark="cyan"]:hover   { background-color: rgba(126, 224, 255, 0.16); }
.cx-verse[data-mark="violet"]:hover { background-color: rgba(199, 169, 255, 0.16); }
.cx-verse[data-mark="green"]:hover  { background-color: rgba(141, 232, 168, 0.16); }
.cx-verse[data-mark="rose"]:hover   { background-color: rgba(255, 130, 145, 0.16); }

/* Light-mode highlights need higher alpha — 10% on cream #ece4d2 is nearly invisible */
.cx-app.is-light .cx-verse[data-mark="amber"],
.cx-app.is-light .cx-verse-row[data-mark="amber"]   { background-color: rgba(180, 130, 30, 0.12); border-left-color: rgba(180, 130, 30, 0.65); }
.cx-app.is-light .cx-verse[data-mark="cyan"],
.cx-app.is-light .cx-verse-row[data-mark="cyan"]    { background-color: rgba(10, 104, 132, 0.10); border-left-color: rgba(10, 104, 132, 0.55); }
.cx-app.is-light .cx-verse[data-mark="violet"],
.cx-app.is-light .cx-verse-row[data-mark="violet"]  { background-color: rgba(74, 45, 168, 0.10); border-left-color: rgba(74, 45, 168, 0.50); }
.cx-app.is-light .cx-verse[data-mark="green"],
.cx-app.is-light .cx-verse-row[data-mark="green"]   { background-color: rgba(11, 92, 42, 0.10); border-left-color: rgba(11, 92, 42, 0.50); }
.cx-app.is-light .cx-verse[data-mark="rose"],
.cx-app.is-light .cx-verse-row[data-mark="rose"]    { background-color: rgba(180, 40, 55, 0.10); border-left-color: rgba(180, 40, 55, 0.55); }
.cx-app.is-light .cx-verse[data-mark="amber"]:hover  { background-color: rgba(180, 130, 30, 0.18); }
.cx-app.is-light .cx-verse[data-mark="cyan"]:hover   { background-color: rgba(10, 104, 132, 0.15); }
.cx-app.is-light .cx-verse[data-mark="violet"]:hover { background-color: rgba(74, 45, 168, 0.15); }
.cx-app.is-light .cx-verse[data-mark="green"]:hover  { background-color: rgba(11, 92, 42, 0.15); }
.cx-app.is-light .cx-verse[data-mark="rose"]:hover   { background-color: rgba(180, 40, 55, 0.15); }

/* Colour picker (in verse menu) */
.cx-vm-hl { padding: 8px 10px 12px; }
.cx-vm-hl-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 8px;
  align-items: center;
}
.cx-vm-hl-swatch {
  appearance: none; border: 2px solid color-mix(in oklab, var(--cx-fg-dim) 25%, transparent);
  width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; color: var(--cx-bg);
  font-family: var(--cx-mono); font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .1s, border-color .1s, box-shadow .15s;
}
.cx-vm-hl-swatch:hover { transform: scale(1.08); border-color: var(--cx-fg); }
.cx-vm-hl-swatch.is-on {
  border-color: var(--cx-fg);
  box-shadow: 0 0 0 2px var(--cx-bg), 0 0 0 4px var(--cx-fg);
}
.cx-vm-hl-clear {
  appearance: none; border: 1px dashed color-mix(in oklab, var(--cx-fg-dim) 50%, transparent);
  background: transparent; color: var(--cx-fg-dim);
  width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: 16px;
}
.cx-vm-hl-clear:hover { color: var(--cx-fg); border-color: var(--cx-fg); }

/* Cross-references — clickable rows */
.cx-xref li.is-clickable {
  cursor: pointer;
  border-radius: 3px;
  padding: 4px 6px;
  margin: 0 -6px;
  transition: background .12s, color .12s;
}
.cx-xref li.is-clickable:hover {
  background: color-mix(in oklab, var(--cx-accent) 10%, transparent);
}
.cx-xref li.is-clickable:hover b { color: var(--cx-accent); }

/* Distraction-free toggle in footer */
.cx-df-toggle {
  appearance: none;
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 35%, transparent);
  background: transparent; color: var(--cx-fg-dim);
  font-family: var(--cx-mono); font-size: 14px; line-height: 1;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 3px; cursor: pointer; margin-right: 6px;
  transition: color .12s, border-color .12s, background .12s;
}
.cx-df-toggle:hover { color: var(--cx-accent); border-color: var(--cx-accent); }
.cx-df-toggle.is-on {
  color: var(--cx-accent); border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 12%, transparent);
}

/* Distraction-free mode: collapse both rails on desktop, expand reader.
   On mobile rails are off-screen anyway; this only kicks in at >= 881px. */
@media (min-width: 881px) {
  .cx-app.is-distraction-free .cx-rail-l,
  .cx-app.is-distraction-free .cx-rail-r { display: none; }
  .cx-app.is-distraction-free .cx-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .cx-app.is-distraction-free .cx-reader {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Mark row swatch — small circle showing the highlight colour for this mark */
.cx-bm-swatch {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--cx-accent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--cx-fg) 12%, transparent);
}

/* On touch devices (no fine pointer) the + button stays softly visible so
   users have an obvious affordance — hover doesn't exist. */
@media (hover: none) {
  .cx-vmark-btn { opacity: 0.4; }
  .cx-verse.is-marked .cx-vmark-btn,
  .cx-verse-row.is-marked .cx-vmark-btn { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════════
   Gnosis inline cards — appear between verses when the layer is engaged.
   Styled to feel like a hushed marginalia entry in a hand-bound codex.
   ════════════════════════════════════════════════════════════════════════ */
.cx-gnosis-inline {
  position: relative;
  /* Match the verse column: same max-width + centered like verse rows.
     The old `margin-left: 50px` left it stuck to the left edge of the
     reader body on wide displays, looking lonely and broken. */
  max-width: 70ch;
  margin: 14px auto;
  padding: 10px 14px 12px 16px;
  border-left: 2px solid #c7a9ff;
  background: linear-gradient(
    to right,
    rgba(199,169,255,0.08),
    rgba(199,169,255,0.02) 60%,
    transparent
  );
  font-family: var(--cx-serif);
  font-size: calc(var(--cx-fs) * 0.82);
  line-height: 1.55;
  color: color-mix(in oklab, #c7a9ff 70%, var(--cx-fg) 30%);
  border-radius: 0 4px 4px 0;
  animation: cx-gnosis-fade .35s ease-out;
}
.cx-gnosis-inline > header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c7a9ff;
}
.cx-gnosis-inline-sigil {
  font-size: 14px;
  text-shadow: 0 0 10px rgba(199,169,255,0.45);
}
.cx-gnosis-inline-title { font-style: normal; }
.cx-gnosis-inline > p {
  margin: 0;
  font-style: italic;
  color: color-mix(in oklab, #d6c6f5 80%, var(--cx-fg) 20%);
}
.cx-app.is-light .cx-gnosis-inline {
  color: #4a2da8;
  background: linear-gradient(to right, rgba(74,45,168,0.05), transparent);
}
.cx-app.is-light .cx-gnosis-inline > header { color: #4a2da8; }
.cx-app.is-light .cx-gnosis-inline > p { color: #4a2da8; }
@keyframes cx-gnosis-fade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 540px) {
  .cx-gnosis-inline { margin-left: 32px; padding: 8px 10px 10px 12px; font-size: calc(var(--cx-fs) * 0.78); }
}

/* Export / import row in Settings — two equal mini-buttons + a one-line hint */
.cx-export-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.cx-export-row .cx-mini-btn { flex: 1; }
.cx-export-hint {
  margin: 6px 0 4px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--cx-fg-dim);
  font-family: var(--cx-mono);
  letter-spacing: 0.02em;
}
.cx-export-hint code {
  font-family: var(--cx-mono);
  background: color-mix(in oklab, var(--cx-fg-dim) 12%, transparent);
  padding: 0 4px; border-radius: 2px;
  color: var(--cx-fg);
}

/* Oracle "memory" message — visual signal that prior turns were folded
   into a single condensed note. Quiet bg, dotted border, mono "MEM" tag. */
.cx-msg.is-memory {
  background: color-mix(in oklab, var(--cx-fg-dim) 8%, transparent);
  border: 1px dashed color-mix(in oklab, var(--cx-fg-dim) 40%, transparent);
  border-radius: 4px;
  padding: 8px 10px 6px;
  margin: 6px 0;
}
.cx-msg.is-memory .cx-msg-r {
  background: color-mix(in oklab, var(--cx-accent) 15%, transparent);
  color: var(--cx-accent);
}
.cx-msg.is-memory .cx-msg-t {
  color: var(--cx-fg-dim);
  font-style: italic;
  font-size: calc(var(--cx-fs) * 0.78);
}
.cx-msg.is-memory .cx-msg-flag {
  display: block;
  margin-top: 4px;
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--cx-fg-dim);
  opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════════════
   Theater / focus mode — YouTube-style. Hides chrome, centers reader.
   F to enter, ESC to exit. The exit button shows on hover near top.
   ════════════════════════════════════════════════════════════════════════ */
.cx-app.is-theater .cx-status,
.cx-app.is-theater .cx-footer,
.cx-app.is-theater .cx-rail-l,
.cx-app.is-theater .cx-rail-r { display: none; }

.cx-app.is-theater .cx-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 1fr;
  height: 100vh;
  height: 100dvh;
  padding: 0;
}
.cx-app.is-theater .cx-reader {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 16px;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
/* When side-by-side is active in theater/focus mode (Studio Display etc.),
   widen the reader so 2-3 columns aren't cramped into 880px. */
.cx-app.is-theater .cx-reader:has(.is-cols) {
  max-width: min(1600px, 95vw);
}
.cx-app.is-theater .cx-frame {
  border: none;
  background: var(--cx-bg);
}
.cx-app.is-theater .cx-corner { display: none; }

/* Subtle exit pill — tucks in top-right, fades in on near-top hover. */
.cx-theater-exit {
  position: fixed;
  top: 12px;
  right: 14px;
  z-index: 9000;
  font-family: var(--cx-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--cx-fg-dim);
  background: color-mix(in oklab, var(--cx-bg) 92%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 30%, transparent);
  padding: 6px 10px;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s ease;
}
.cx-theater-exit:hover { color: var(--cx-accent); border-color: var(--cx-accent); opacity: 1; }
.cx-app.is-theater:hover .cx-theater-exit { opacity: 0.6; }

/* ════════════════════════════════════════════════════════════════════════
   Offline indicator — quiet at rest, an SVG progress ring fills as the
   translation downloads, an "OFFLINE" badge with a subtle glow once complete.
   Restraint by default: shows as a hairline ring with only a tooltip until
   the row is hovered, then a soft "SAVE OFFLINE" label fades in.
   ════════════════════════════════════════════════════════════════════════ */
.cx-tp-offline {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--cx-fg-dim);
  font-family: var(--cx-mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  border-radius: 3px;
  padding: 2px 4px 2px 3px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, opacity .15s;
  opacity: 0.55;
  margin-left: 4px;
}
.cx-tp-row:hover .cx-tp-offline { opacity: 1; }
.cx-tp-offline:hover {
  color: var(--cx-accent);
  border-color: color-mix(in oklab, var(--cx-accent) 50%, transparent);
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
  opacity: 1;
}
.cx-tp-off-ring {
  display: inline-flex;
  width: 18px; height: 18px;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  color: inherit;
}
.cx-tp-off-ring svg { display: block; overflow: visible; }
.cx-tp-off-track {
  stroke: color-mix(in oklab, currentColor 35%, transparent);
  stroke-width: 1.2;
}
.cx-tp-off-fill {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  transition: stroke-dashoffset .35s ease, fill .25s;
}
.cx-tp-off-lbl {
  font-weight: 700;
  white-space: nowrap;
  font-feature-settings: "tnum";
}

/* Downloading — animate a slight breath and the percent stays bright */
.cx-tp-offline.is-dl {
  color: var(--cx-accent);
  border-color: color-mix(in oklab, var(--cx-accent) 60%, transparent);
  background: color-mix(in oklab, var(--cx-accent) 6%, transparent);
  opacity: 1;
  animation: cx-tp-breath 2.6s ease-in-out infinite;
}
@keyframes cx-tp-breath {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--cx-accent) 0%, transparent); }
  50%      { box-shadow: 0 0 0 2px color-mix(in oklab, var(--cx-accent) 22%, transparent); }
}

/* Partially cached at rest (before user starts downloading the rest) */
.cx-tp-offline.is-partial {
  color: color-mix(in oklab, var(--cx-accent) 80%, var(--cx-fg-dim) 20%);
  opacity: 1;
  border-color: color-mix(in oklab, var(--cx-accent) 25%, transparent);
}

/* Fully cached — a quiet, confident "OFFLINE" badge */
.cx-tp-offline.is-full {
  color: var(--cx-accent);
  border-color: color-mix(in oklab, var(--cx-accent) 55%, transparent);
  background: color-mix(in oklab, var(--cx-accent) 10%, transparent);
  opacity: 1;
  text-shadow: 0 0 6px color-mix(in oklab, var(--cx-accent) 40%, transparent);
}
.cx-tp-offline.is-full:hover {
  color: #ff8291;
  border-color: color-mix(in oklab, #ff8291 50%, transparent);
  background: color-mix(in oklab, #ff8291 8%, transparent);
  text-shadow: none;
}
.cx-tp-offline.is-full:hover .cx-tp-off-lbl::after {
  content: " · CLEAR";
  opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════════════
   Verse map — sci-fi modal. Hex-grid coordinate field + info column.
   Cyan accents, scanlines, corner brackets, monospace labels.
   ════════════════════════════════════════════════════════════════════════ */
.cx-map-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: color-mix(in oklab, var(--cx-bg) 85%, black 15%);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: cx-map-fade 220ms ease-out;
}
@keyframes cx-map-fade { from { opacity: 0; } to { opacity: 1; } }

.cx-map {
  position: relative;
  width: 100%;
  max-width: 920px;
  max-height: calc(100vh - 48px);
  background: var(--cx-bg);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 30%, transparent);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.6),
    0 0 0 1px color-mix(in oklab, var(--cx-accent) 18%, transparent),
    0 0 60px color-mix(in oklab, var(--cx-accent) 10%, transparent);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: cx-map-pop 280ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes cx-map-pop {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.cx-map-h {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid color-mix(in oklab, var(--cx-fg-dim) 22%, transparent);
  background: color-mix(in oklab, var(--cx-accent) 4%, transparent);
}
.cx-map-h-tag {
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--cx-accent);
  text-shadow: 0 0 8px color-mix(in oklab, var(--cx-accent) 50%, transparent);
}
.cx-map-h-ref {
  flex: 1;
  font-family: var(--cx-serif);
  font-size: 16px;
  color: var(--cx-fg);
  letter-spacing: 0.01em;
}
.cx-map-x {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--cx-fg-dim);
  font-size: 18px;
  width: 28px; height: 28px;
  cursor: pointer;
  border-radius: 3px;
}
.cx-map-x:hover { color: var(--cx-fg); border-color: color-mix(in oklab, var(--cx-fg-dim) 30%, transparent); }

/* Loading + error states */
.cx-map-loading,
.cx-map-err {
  padding: 60px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--cx-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--cx-fg-dim);
  text-align: center;
}
.cx-map-loading-sub { font-size: 9.5px; opacity: 0.7; letter-spacing: 0.1em; }
.cx-map-spin { display: inline-flex; gap: 4px; }
.cx-map-spin i {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cx-accent);
  box-shadow: 0 0 8px var(--cx-accent-glow);
  animation: cx-mspin 1.1s ease-in-out infinite;
}
.cx-map-spin i:nth-child(2) { animation-delay: 0.12s; }
.cx-map-spin i:nth-child(3) { animation-delay: 0.24s; }
.cx-map-spin i:nth-child(4) { animation-delay: 0.36s; }
@keyframes cx-mspin {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.7); }
  40%           { opacity: 1;   transform: scale(1); }
}
.cx-map-err b { color: #ff8291; letter-spacing: 0.16em; font-size: 11px; }
.cx-map-err code { font-family: var(--cx-mono); font-size: 10px; color: var(--cx-fg-dim); max-width: 500px; }

/* Body — split into map field + info column */
.cx-map-body {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0;
  overflow: hidden;
  flex: 1;
}
@media (max-width: 740px) {
  .cx-map-body { grid-template-columns: 1fr; }
  .cx-map-info { border-left: 0; border-top: 1px solid color-mix(in oklab, var(--cx-fg-dim) 22%, transparent); }
}

.cx-map-field-wrap {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(126,224,255,0.05), transparent 70%),
    var(--cx-bg);
  overflow: hidden;
  color: var(--cx-accent);
}
.cx-map-field {
  display: block;
  width: 100%;
  height: auto;
}
.cx-map-rule line { stroke: currentColor; stroke-opacity: 0.10; stroke-width: 0.5; }
.cx-map-rule text {
  font-family: var(--cx-mono);
  font-size: 7.5px;
  letter-spacing: 0.1em;
  fill: currentColor;
  fill-opacity: 0.5;
}
.cx-map-ref circle { fill: currentColor; fill-opacity: 0.5; }
.cx-map-ref text {
  font-family: var(--cx-mono);
  font-size: 7px;
  letter-spacing: 0.06em;
  fill: currentColor;
  fill-opacity: 0.6;
}
.cx-map-mark-inner { fill: none; stroke: currentColor; stroke-width: 1.2; }
.cx-map-mark-core  { fill: currentColor; }
.cx-map-mark-tick  { stroke: currentColor; stroke-width: 1; opacity: 0.8; }

.cx-map-coords {
  position: absolute;
  bottom: 8px; left: 10px;
  display: flex; gap: 12px;
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--cx-accent);
}
.cx-map-coords b {
  font-weight: 700;
  margin-right: 4px;
  opacity: 0.6;
}
.cx-map-coords-warn {
  color: #ffc46b;
  letter-spacing: 0.12em;
}

/* Info column */
.cx-map-info {
  padding: 16px 18px;
  border-left: 1px solid color-mix(in oklab, var(--cx-fg-dim) 22%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
}
.cx-map-info-place { display: flex; flex-direction: column; gap: 2px; }
.cx-map-info-place h3 {
  margin: 0;
  font-family: var(--cx-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--cx-fg);
  letter-spacing: 0.005em;
}
.cx-map-info-modern,
.cx-map-info-region {
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--cx-fg-dim);
  text-transform: uppercase;
}
.cx-map-info-era {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 8px;
  background: color-mix(in oklab, var(--cx-accent) 6%, transparent);
  border-left: 2px solid var(--cx-accent);
  border-radius: 0 3px 3px 0;
}
.cx-map-info-era-tag {
  font-family: var(--cx-mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: var(--cx-accent);
}
.cx-map-info-era-name {
  font-family: var(--cx-serif);
  font-size: 14px;
  color: var(--cx-fg);
}
.cx-map-info-era-c {
  font-family: var(--cx-mono);
  font-size: 10px;
  color: var(--cx-fg-dim);
  letter-spacing: 0.06em;
}
.cx-map-info-summary {
  margin: 4px 0 6px;
  font-family: var(--cx-serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cx-fg);
}
.cx-map-field-row {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  align-items: baseline;
}
.cx-map-field-lbl {
  font-family: var(--cx-mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  color: var(--cx-fg-dim);
  padding-top: 1px;
}
.cx-map-field-bd {
  font-family: var(--cx-serif);
  color: var(--cx-fg);
  font-size: 12px;
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════════
   Per-rail fold — desktop only. Each rail gets a tiny ◀/▶ button to
   collapse; a thin spine appears at the screen edge for one-click revival.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 881px) {
  .cx-app.is-l-collapsed .cx-rail-l { display: none; }
  .cx-app.is-r-collapsed .cx-rail-r { display: none; }
  .cx-app.is-l-collapsed .cx-grid {
    grid-template-columns: 0 minmax(0,1fr) var(--cx-rrail-w, 380px);
  }
  .cx-app.is-r-collapsed .cx-grid {
    grid-template-columns: var(--cx-lrail-w, 280px) minmax(0,1fr) 0;
  }
  .cx-app.is-l-collapsed.is-r-collapsed .cx-grid {
    grid-template-columns: minmax(0,1fr);
  }
}

.cx-rail-fold {
  position: absolute;
  top: 6px;
  appearance: none;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 28%, transparent);
  color: var(--cx-fg-dim);
  width: 22px; height: 22px;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--cx-mono);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: color .12s, border-color .12s, background .12s;
}
.cx-rail-fold:hover {
  color: var(--cx-accent);
  border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 10%, transparent);
}
/* Per-rail fold (◀/▶ chip on the rail's inner corner) was visually
   intrusive and redundant with the footer's calm-mode (⊟) toggle and the
   edge spines. Hide it on every viewport — collapse via ⊟ or click the
   rail spine to re-expand. */
.cx-rail-fold { display: none !important; }
.cx-rail-fold-l { right: 6px; }
.cx-rail-fold-r { left: 6px; }

.cx-rail-spine {
  display: none;
}
@media (min-width: 881px) {
  .cx-rail-spine {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 18px;
    background: color-mix(in oklab, var(--cx-fg-dim) 6%, transparent);
    border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 18%, transparent);
    border-top: 0; border-bottom: 0;
    color: var(--cx-fg-dim);
    cursor: pointer;
    appearance: none;
    transition: color .15s, background .15s, border-color .15s;
    font-family: var(--cx-mono);
    font-size: 11px;
    align-self: stretch;
  }
  .cx-rail-spine:hover {
    color: var(--cx-accent);
    background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
    border-color: color-mix(in oklab, var(--cx-accent) 35%, transparent);
  }
  .cx-rail-spine-l { border-left: 0; }
  .cx-rail-spine-r { border-right: 0; }
  .cx-rail-spine-glyph {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 14px;
    letter-spacing: 0.18em;
    opacity: 0.85;
  }
  .cx-rail-spine-arr { font-size: 9px; opacity: 0.7; }

  /* Slot the spines into the grid where the rails would have been */
  .cx-app.is-l-collapsed .cx-grid {
    grid-template-columns: 18px minmax(0,1fr) var(--cx-rrail-w, 380px);
  }
  .cx-app.is-r-collapsed .cx-grid {
    grid-template-columns: var(--cx-lrail-w, 280px) minmax(0,1fr) 18px;
  }
  .cx-app.is-l-collapsed.is-r-collapsed .cx-grid {
    grid-template-columns: 18px minmax(0,1fr) 18px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Map polity timeline — slider + active polity card + full list
   ════════════════════════════════════════════════════════════════════════ */
.cx-map-timeline {
  margin-top: 4px;
  padding: 10px 12px 12px;
  border: 1px solid color-mix(in oklab, var(--cx-accent) 22%, transparent);
  border-radius: 4px;
  background: color-mix(in oklab, var(--cx-accent) 4%, transparent);
}
.cx-map-timeline-h {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 6px;
}
.cx-map-timeline-tag {
  font-family: var(--cx-mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: var(--cx-accent);
}
.cx-map-timeline-yr {
  font-family: var(--cx-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--cx-fg);
  letter-spacing: 0.04em;
}
.cx-map-timeline-vy {
  font-family: var(--cx-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--cx-fg-dim);
}
.cx-map-timeline-reset {
  margin-left: auto;
  appearance: none;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 30%, transparent);
  color: var(--cx-fg-dim);
  width: 22px; height: 22px;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--cx-mono);
  font-size: 11px;
}
.cx-map-timeline-reset:hover { color: var(--cx-accent); border-color: var(--cx-accent); }
.cx-map-timeline-active {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
  border-left: 2px solid var(--cx-accent);
  border-radius: 0 3px 3px 0;
  margin-bottom: 8px;
}
.cx-map-timeline-active.is-empty { opacity: 0.6; }
.cx-map-timeline-active-name {
  font-family: var(--cx-serif);
  font-size: 16px;
  color: var(--cx-fg);
}
.cx-map-timeline-active-range {
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--cx-fg-dim);
}
.cx-map-timeline-slider {
  display: block;
  width: 100%;
  margin: 4px 0 2px;
  accent-color: var(--cx-accent);
}
.cx-map-timeline-ticks {
  position: relative;
  height: 12px;
  margin: 0 2px;
}
.cx-map-timeline-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--cx-mono);
  font-size: 8px;
  color: var(--cx-fg-dim);
  letter-spacing: 0.04em;
  opacity: 0.5;
  pointer-events: none;
}
.cx-map-timeline-list,
.cx-map-timeline-theory {
  margin-top: 8px;
  font-family: var(--cx-mono);
  font-size: 10px;
}
.cx-map-timeline-list summary,
.cx-map-timeline-theory summary {
  cursor: pointer;
  letter-spacing: 0.14em;
  color: var(--cx-fg-dim);
  padding: 4px 0;
}
.cx-map-timeline-list summary:hover,
.cx-map-timeline-theory summary:hover { color: var(--cx-accent); }
.cx-map-timeline-list ul,
.cx-map-timeline-theory ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.cx-map-timeline-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--cx-serif);
  font-size: 11.5px;
  color: var(--cx-fg);
  align-items: baseline;
}
.cx-map-timeline-list li:hover {
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
}
.cx-map-timeline-list li.is-active {
  background: color-mix(in oklab, var(--cx-accent) 14%, transparent);
  color: var(--cx-fg);
}
.cx-pl-range {
  font-family: var(--cx-mono);
  font-size: 9px;
  color: var(--cx-fg-dim);
  letter-spacing: 0.06em;
}
.cx-map-timeline-theory li {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px;
  padding: 4px 6px;
  font-size: 10.5px;
  align-items: baseline;
}
.cx-map-timeline-theory li b {
  font-family: var(--cx-mono);
  letter-spacing: 0.1em;
  color: var(--cx-fg-dim);
  font-weight: 700;
}
.cx-map-timeline-theory li span {
  font-family: var(--cx-serif);
  color: var(--cx-fg-dim);
  font-style: italic;
  font-size: 10.5px;
}
.cx-map-upgrade {
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px dashed color-mix(in oklab, var(--cx-fg-dim) 30%, transparent);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--cx-mono);
  font-size: 10px;
  color: var(--cx-fg-dim);
}

/* ════════════════════════════════════════════════════════════════════════
   Verse art — paintings / illustrations / illuminations of the scene.
   Sci-fi gallery: dark frame, image card grid, hover lift.
   ════════════════════════════════════════════════════════════════════════ */
.cx-art-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: color-mix(in oklab, var(--cx-bg) 88%, black 12%);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: cx-map-fade 220ms ease-out;
}
.cx-art {
  position: relative;
  width: 100%;
  max-width: 1080px;
  max-height: calc(100vh - 48px);
  background: var(--cx-bg);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 30%, transparent);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.6),
    0 0 0 1px color-mix(in oklab, var(--cx-accent) 18%, transparent),
    0 0 60px color-mix(in oklab, var(--cx-accent) 10%, transparent);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cx-map-pop 280ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.cx-art-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid color-mix(in oklab, var(--cx-fg-dim) 22%, transparent);
  background: color-mix(in oklab, var(--cx-accent) 4%, transparent);
}
.cx-art-h-tag {
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--cx-accent);
  text-shadow: 0 0 8px color-mix(in oklab, var(--cx-accent) 50%, transparent);
}
.cx-art-h-ref {
  font-family: var(--cx-serif);
  font-size: 16px;
  color: var(--cx-fg);
}
.cx-art-h-scene {
  font-family: var(--cx-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--cx-fg-dim);
  flex: 1;
  min-width: 0;
}
.cx-art-x {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--cx-fg-dim);
  font-size: 18px;
  width: 28px; height: 28px;
  cursor: pointer;
  border-radius: 3px;
  margin-left: auto;
}
.cx-art-x:hover { color: var(--cx-fg); border-color: color-mix(in oklab, var(--cx-fg-dim) 30%, transparent); }

.cx-art-loading,
.cx-art-err {
  padding: 80px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: var(--cx-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--cx-fg-dim);
  text-align: center;
}
.cx-art-loading-sub { font-size: 9.5px; opacity: 0.7; letter-spacing: 0.1em; }
.cx-art-spin { display: inline-flex; gap: 4px; }
.cx-art-spin i {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cx-accent);
  box-shadow: 0 0 8px var(--cx-accent-glow);
  animation: cx-mspin 1.1s ease-in-out infinite;
}
.cx-art-spin i:nth-child(2) { animation-delay: 0.12s; }
.cx-art-spin i:nth-child(3) { animation-delay: 0.24s; }
.cx-art-spin i:nth-child(4) { animation-delay: 0.36s; }
.cx-art-err b { color: #ff8291; letter-spacing: 0.16em; font-size: 11px; }
.cx-art-err code { font-family: var(--cx-mono); font-size: 10px; color: var(--cx-fg-dim); max-width: 500px; }

/* Grid of artwork cards */
.cx-art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  padding: 16px;
  overflow: auto;
}
.cx-art-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: color-mix(in oklab, var(--cx-fg-dim) 4%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 18%, transparent);
  border-radius: 4px;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s, box-shadow .18s;
}
.cx-art-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--cx-accent) 40%, transparent);
  box-shadow: 0 8px 26px -10px rgba(0,0,0,0.4),
              0 0 0 1px color-mix(in oklab, var(--cx-accent) 22%, transparent);
}
.cx-art-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  /* Hard minimum so flex doesn't squash the image area to 0 when an
     ancestor changes intrinsic-size resolution rules. */
  min-height: 160px;
  width: 100%;
  background: color-mix(in oklab, var(--cx-fg-dim) 12%, transparent);
  overflow: hidden;
  flex: 0 0 auto;
}
.cx-art-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: color-mix(in oklab, var(--cx-fg-dim) 8%, transparent);
}
.cx-art-placeholder {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--cx-fg-dim);
}
.cx-art-placeholder-frame {
  width: 56px; height: 56px;
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 35%, transparent);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--cx-accent) 4%, transparent);
}
.cx-art-placeholder-glyph {
  font-size: 20px;
  color: color-mix(in oklab, var(--cx-accent) 70%, var(--cx-fg-dim) 30%);
}
.cx-art-placeholder-l {
  font-family: var(--cx-mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
}

.cx-art-card-meta {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cx-art-card-title {
  margin: 0;
  font-family: var(--cx-serif);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--cx-fg);
  letter-spacing: 0.005em;
  line-height: 1.3;
}
.cx-art-card-attrib {
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cx-fg-dim);
}
.cx-art-card-artist { color: color-mix(in oklab, var(--cx-fg) 70%, var(--cx-fg-dim) 30%); }
.cx-art-card-year   { opacity: 0.7; }
.cx-art-card-tech {
  font-family: var(--cx-mono);
  font-size: 9px;
  color: var(--cx-fg-dim);
  letter-spacing: 0.06em;
  opacity: 0.85;
}
.cx-art-card-summary {
  margin: 4px 0 0;
  font-family: var(--cx-serif);
  font-size: 12.5px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--cx-fg) 78%, var(--cx-fg-dim) 22%);
}
.cx-art-card-themes {
  margin-top: 4px;
  font-family: var(--cx-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--cx-accent);
  opacity: 0.8;
  text-transform: lowercase;
}

.cx-art-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px 14px;
  border-top: 1px solid color-mix(in oklab, var(--cx-fg-dim) 20%, transparent);
  background: color-mix(in oklab, var(--cx-fg-dim) 4%, transparent);
}
.cx-art-foot-count {
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--cx-fg-dim);
}
.cx-art-more {
  appearance: none;
  background: color-mix(in oklab, var(--cx-accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 50%, transparent);
  color: var(--cx-accent);
  padding: 6px 14px;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--cx-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  transition: background .12s, border-color .12s;
}
.cx-art-more:hover {
  background: color-mix(in oklab, var(--cx-accent) 22%, transparent);
  border-color: var(--cx-accent);
}
.cx-art-more:disabled { opacity: 0.5; cursor: wait; }

/* ════════════════════════════════════════════════════════════════════════
   Verse compare — side-by-side translation table modal.
   ════════════════════════════════════════════════════════════════════════ */
.cx-cmp-backdrop {
  position: fixed; inset: 0;
  z-index: 9500;
  background: color-mix(in oklab, var(--cx-bg) 88%, black 12%);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: cx-map-fade 200ms ease-out;
}
.cx-cmp {
  position: relative;
  width: 100%;
  max-width: 1100px;
  max-height: calc(100vh - 48px);
  background: var(--cx-bg);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 30%, transparent);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.6),
    0 0 0 1px color-mix(in oklab, var(--cx-accent) 18%, transparent);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cx-map-pop 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.cx-cmp-h {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid color-mix(in oklab, var(--cx-fg-dim) 22%, transparent);
  background: color-mix(in oklab, var(--cx-accent) 4%, transparent);
}
.cx-cmp-h-tag {
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--cx-accent);
}
.cx-cmp-h-ref {
  font-family: var(--cx-serif);
  font-size: 16px;
  color: var(--cx-fg);
  flex: 1;
}
.cx-cmp-x {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--cx-fg-dim);
  font-size: 18px;
  width: 28px; height: 28px;
  cursor: pointer;
  border-radius: 3px;
}
.cx-cmp-x:hover { color: var(--cx-fg); border-color: color-mix(in oklab, var(--cx-fg-dim) 30%, transparent); }

.cx-cmp-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid color-mix(in oklab, var(--cx-fg-dim) 18%, transparent);
  background: color-mix(in oklab, var(--cx-fg-dim) 4%, transparent);
  flex-wrap: wrap;
}
.cx-cmp-tool {
  appearance: none;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 30%, transparent);
  color: var(--cx-fg-dim);
  font-family: var(--cx-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
}
.cx-cmp-tool:hover { color: var(--cx-accent); border-color: var(--cx-accent); }
.cx-cmp-vlist {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
}
.cx-cmp-vchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--cx-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 30%, transparent);
  padding: 2px 6px;
  border-radius: 3px;
}
.cx-cmp-vchip button {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 10px;
  padding: 0 0 0 2px;
  opacity: 0.6;
}
.cx-cmp-vchip button:hover { opacity: 1; color: #ff8291; }

.cx-cmp-trans-picker { position: relative; }
.cx-cmp-trans-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 5;
  width: 260px;
  max-height: 360px;
  overflow: auto;
  background: var(--cx-bg);
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 30%, transparent);
  border-radius: 4px;
  box-shadow: 0 14px 36px -8px rgba(0,0,0,0.5);
  padding: 6px 0;
}
.cx-cmp-trans-h {
  font-family: var(--cx-mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: var(--cx-fg-dim);
  padding: 6px 10px 8px;
  border-bottom: 1px solid color-mix(in oklab, var(--cx-fg-dim) 18%, transparent);
}
.cx-cmp-trans-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-family: var(--cx-serif);
  font-size: 12px;
}
.cx-cmp-trans-row:hover { background: color-mix(in oklab, var(--cx-accent) 8%, transparent); }
.cx-cmp-trans-glyph {
  font-family: var(--cx-mono);
  font-size: 10px;
  width: 22px; text-align: center;
  color: var(--cx-fg-dim);
}
.cx-cmp-trans-name {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cx-cmp-trans-name b { font-weight: 500; color: var(--cx-fg); font-size: 12px; }
.cx-cmp-trans-name i {
  font-style: normal;
  font-family: var(--cx-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--cx-fg-dim);
}

.cx-cmp-body { overflow: auto; flex: 1; }
.cx-cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--cx-serif);
}
.cx-cmp-table th,
.cx-cmp-table td {
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in oklab, var(--cx-fg-dim) 14%, transparent);
  border-right: 1px solid color-mix(in oklab, var(--cx-fg-dim) 10%, transparent);
}
.cx-cmp-table th {
  background: color-mix(in oklab, var(--cx-fg-dim) 6%, transparent);
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 1;
}
.cx-cmp-th-v, .cx-cmp-td-v {
  width: 36px;
  text-align: center;
  font-family: var(--cx-mono);
  font-size: 10px;
  color: var(--cx-accent);
  letter-spacing: 0.04em;
}
.cx-cmp-th-name {
  display: block;
  font-family: var(--cx-serif);
  font-size: 13px;
  color: var(--cx-fg);
  font-weight: 500;
}
.cx-cmp-th-meta {
  display: block;
  font-family: var(--cx-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--cx-fg-dim);
  margin-top: 2px;
}
.cx-cmp-td {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cx-fg);
  min-width: 220px;
}
.cx-cmp-td-l {
  font-family: var(--cx-mono);
  font-size: 10px;
  color: var(--cx-fg-dim);
}
.cx-cmp-td-e {
  font-family: var(--cx-mono);
  font-size: 10px;
  color: #ff8291;
}

/* ════════════════════════════════════════════════════════════════════════
   Install CODEX — primary settings action. Visually distinct from the
   plain mini-buttons; intended as the most inviting affordance for new
   users to take CODEX offline / onto their device home screen.
   ════════════════════════════════════════════════════════════════════════ */
.cx-install-btn {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  margin-top: 4px;
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--cx-accent) 20%, transparent),
    color-mix(in oklab, var(--cx-accent) 6%, transparent)
  );
  border: 1px solid color-mix(in oklab, var(--cx-accent) 50%, transparent);
  border-radius: 4px;
  color: var(--cx-fg);
  cursor: pointer;
  text-align: left;
  font-family: var(--cx-serif);
  transition: transform .15s ease, border-color .15s, box-shadow .15s, background .15s;
  position: relative;
  overflow: hidden;
}
.cx-install-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, color-mix(in oklab, var(--cx-accent) 18%, transparent) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s ease;
  pointer-events: none;
}
.cx-install-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--cx-accent);
  box-shadow:
    0 4px 14px -4px color-mix(in oklab, var(--cx-accent) 35%, transparent),
    0 0 0 1px color-mix(in oklab, var(--cx-accent) 30%, transparent);
}
.cx-install-btn:hover:not(:disabled)::before { transform: translateX(100%); }
.cx-install-btn:active:not(:disabled) { transform: translateY(0); }

.cx-install-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--cx-accent) 25%, transparent);
  color: var(--cx-accent);
  font-family: var(--cx-mono);
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  text-shadow: 0 0 8px color-mix(in oklab, var(--cx-accent) 50%, transparent);
}
.cx-install-btn span:not(.cx-install-glyph) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.cx-install-btn b {
  font-family: var(--cx-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--cx-fg);
}
.cx-install-btn i {
  font-style: normal;
  font-family: var(--cx-serif);
  font-size: 11.5px;
  color: var(--cx-fg-dim);
  line-height: 1.4;
}

.cx-install-btn.is-installed,
.cx-install-btn:disabled {
  cursor: default;
  background: color-mix(in oklab, var(--cx-fg-dim) 6%, transparent);
  border-color: color-mix(in oklab, var(--cx-fg-dim) 24%, transparent);
}
.cx-install-btn.is-installed .cx-install-glyph {
  background: color-mix(in oklab, #8de8a8 22%, transparent);
  color: #8de8a8;
  text-shadow: 0 0 8px color-mix(in oklab, #8de8a8 50%, transparent);
}
.cx-install-btn.is-installed b { color: var(--cx-fg-dim); }

/* ════════════════════════════════════════════════════════════════════════
   Map cartography — land base, sea fills, river lines, POI markers, and
   the labeled main marker. Cyan-key palette so it slots into the existing
   sci-fi treatment without competing with the verse marker.
   ════════════════════════════════════════════════════════════════════════ */

/* Land base — very subtle warm tone so we have something for seas to sit on */
.cx-map-land {
  fill: color-mix(in oklab, var(--cx-fg-dim) 5%, transparent);
}

/* Sea polygons — soft cyan gradient, thin outline */
.cx-map-sea polygon {
  fill: color-mix(in oklab, var(--cx-accent) 16%, transparent);
  stroke: color-mix(in oklab, var(--cx-accent) 45%, transparent);
  stroke-width: 0.6;
  stroke-linejoin: round;
}
.cx-map-sea-lbl {
  font-family: var(--cx-mono);
  font-size: 6.5px;
  letter-spacing: 0.3em;
  fill: color-mix(in oklab, var(--cx-accent) 60%, var(--cx-fg-dim) 40%);
  fill-opacity: 0.65;
  pointer-events: none;
}

/* Rivers — single-stroke polyline with a hairline glow */
.cx-map-river polyline {
  fill: none;
  stroke: color-mix(in oklab, var(--cx-accent) 65%, transparent);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}

/* POI — circle + label, glyph-prefixed name */
.cx-map-poi circle {
  fill: color-mix(in oklab, var(--cx-accent) 75%, var(--cx-fg) 25%);
  stroke: var(--cx-bg);
  stroke-width: 0.8;
}
.cx-map-poi text {
  font-family: var(--cx-mono);
  font-size: 7px;
  letter-spacing: 0.04em;
  fill: var(--cx-fg);
  fill-opacity: 0.92;
  paint-order: stroke;
  stroke: var(--cx-bg);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}
/* Subtle differentiation by kind so a glance reveals the geography */
.cx-map-poi[data-kind="mountain"] circle { fill: #d6c6f5; }
.cx-map-poi[data-kind="river"]    circle { fill: color-mix(in oklab, var(--cx-accent) 85%, transparent); }
.cx-map-poi[data-kind="lake"]     circle,
.cx-map-poi[data-kind="sea"]      circle { fill: color-mix(in oklab, var(--cx-accent) 90%, transparent); }
.cx-map-poi[data-kind="region"]   circle { fill: #ffc46b; opacity: 0.7; }
.cx-map-poi[data-kind="ruin"]     circle { fill: #ff8291; }

/* Main marker label — sits below the verse's location */
.cx-map-mark-lbl {
  font-family: var(--cx-mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  fill: var(--cx-accent);
  paint-order: stroke;
  stroke: var(--cx-bg);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* In the light theme, soften everything a touch — pure cyan reads loud on cream */
.cx-app.is-light .cx-map-sea polygon  { fill: color-mix(in oklab, var(--cx-accent) 22%, transparent); }
.cx-app.is-light .cx-map-river polyline { opacity: 0.5; }

/* ════════════════════════════════════════════════════════════════════════
   Divine speech shimmer — quoted words of God the Father across all
   translations + Oracle. Subtle gold-on-gold gradient sweep, slow enough
   to never distract from reading.
   ════════════════════════════════════════════════════════════════════════ */
.cx-divine {
  background-image: linear-gradient(
    100deg,
    color-mix(in oklab, #d4a85f 0%,  var(--cx-fg) 100%) 0%,
    color-mix(in oklab, #f5d97a 60%, var(--cx-fg) 40%) 35%,
    #ffe9a3 50%,
    color-mix(in oklab, #f5d97a 60%, var(--cx-fg) 40%) 65%,
    color-mix(in oklab, #d4a85f 0%,  var(--cx-fg) 100%) 100%
  );
  background-size: 220% 100%;
  background-position: 0% 0%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  font-style: italic;
  animation: cx-shimmer 7.5s linear infinite;
  text-shadow: 0 0 18px color-mix(in oklab, #f5d97a 14%, transparent);
}
@keyframes cx-shimmer {
  0%   { background-position: 100% 0%; }
  100% { background-position: -100% 0%; }
}
/* Light-mode shimmer reads better with a slightly warmer tone */
.cx-app.is-light .cx-divine {
  background-image: linear-gradient(
    100deg,
    #5a4416 0%,
    #b8893a 35%,
    #d4a85f 50%,
    #b8893a 65%,
    #5a4416 100%
  );
  text-shadow: 0 0 12px rgba(212, 168, 95, 0.18);
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .cx-divine { animation: none; background-position: 50% 0%; }
}


/* ════════════════════════════════════════════════════════════════════════
   Leaflet field — explorable globe inside the map modal.
   ════════════════════════════════════════════════════════════════════════ */
.cx-map-leaflet {
  width: 100%;
  height: 360px;
  background: var(--cx-bg);
  outline: 1px solid color-mix(in oklab, var(--cx-accent) 18%, transparent);
}
.cx-map-fallback {
  padding: 60px 20px;
  text-align: center;
  font-family: var(--cx-mono);
  font-size: 11px;
  color: var(--cx-fg-dim);
}
@media (max-width: 740px) { .cx-map-leaflet { height: 280px; } }

/* Custom main marker — pulsing crosshair instead of stock pin */
.cx-map-mark-leaflet {
  position: relative;
}
.cx-mark-pulse {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--cx-accent) 70%, transparent) 0%, transparent 70%);
  animation: cx-mark-pulse 2.2s ease-out infinite;
  pointer-events: none;
}
.cx-mark-core {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cx-accent);
  box-shadow:
    0 0 0 2px var(--cx-bg),
    0 0 0 3px var(--cx-accent),
    0 0 12px color-mix(in oklab, var(--cx-accent) 50%, transparent);
}
.cx-mark-lbl {
  position: absolute;
  left: 50%; top: 14px;
  transform: translateX(-50%);
  font-family: var(--cx-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-bg) 92%, transparent);
  padding: 2px 6px;
  white-space: nowrap;
  border: 1px solid color-mix(in oklab, var(--cx-accent) 40%, transparent);
  border-radius: 2px;
  pointer-events: none;
}
@keyframes cx-mark-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

/* POI markers */
.cx-map-poi-leaflet {
  position: relative;
}
.cx-poi-dot {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cx-accent);
  box-shadow: 0 0 0 1.5px var(--cx-bg);
}
.cx-poi-lbl {
  position: absolute;
  left: 50%; top: 8px;
  transform: translateX(-50%);
  font-family: var(--cx-mono);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: var(--cx-fg);
  background: color-mix(in oklab, var(--cx-bg) 88%, transparent);
  padding: 1px 5px;
  white-space: nowrap;
  border-radius: 2px;
  pointer-events: none;
}
.cx-map-poi-leaflet.kind-mountain .cx-poi-dot { background: #c7a9ff; }
.cx-map-poi-leaflet.kind-river    .cx-poi-dot,
.cx-map-poi-leaflet.kind-sea      .cx-poi-dot,
.cx-map-poi-leaflet.kind-lake     .cx-poi-dot { background: color-mix(in oklab, var(--cx-accent) 90%, white 10%); }
.cx-map-poi-leaflet.kind-region   .cx-poi-dot { background: #ffc46b; }
.cx-map-poi-leaflet.kind-ruin     .cx-poi-dot { background: #ff8291; }

/* Tame Leaflet's defaults inside the modal */
.cx-map-leaflet .leaflet-control-zoom a {
  background: color-mix(in oklab, var(--cx-bg) 92%, transparent);
  color: var(--cx-fg);
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 30%, transparent);
}
.cx-map-leaflet .leaflet-control-zoom a:hover { color: var(--cx-accent); }
.cx-map-leaflet .leaflet-control-attribution {
  background: color-mix(in oklab, var(--cx-bg) 92%, transparent);
  color: var(--cx-fg-dim);
  font-family: var(--cx-mono);
  font-size: 8px;
  letter-spacing: 0.04em;
}
.cx-map-leaflet .leaflet-control-attribution a { color: var(--cx-accent); }
.cx-map-leaflet .leaflet-popup-content-wrapper {
  background: var(--cx-bg);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 35%, transparent);
  border-radius: 3px;
  color: var(--cx-fg);
}
.cx-map-leaflet .leaflet-popup-tip { background: var(--cx-bg); }

/* ════════════════════════════════════════════════════════════════════════
   i18n — RTL support for Hebrew, font fallback for non-Latin scripts.
   ════════════════════════════════════════════════════════════════════════ */
html[lang="he"] {
  font-family: "SBL Hebrew", "Cardo", "Frank Ruhl Libre", -apple-system,
               BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
html[lang="hi"] {
  font-family: "Noto Sans Devanagari", "Mangal", -apple-system,
               BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* RTL: flip the major flex/grid containers but keep latin-script content
   (verse text, code blocks, mono labels) reading left-to-right via .cx-vtext
   override, since Bible verses are still in their source language. */
html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .cx-vtext,
html[dir="rtl"] .cx-msg-t,
html[dir="rtl"] .cx-fs-num,
html[dir="rtl"] .cx-vnum,
html[dir="rtl"] .cx-clock-time,
html[dir="rtl"] .cx-clock-date {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}
html[dir="rtl"] .cx-tabs,
html[dir="rtl"] .cx-ltabs,
html[dir="rtl"] .cx-footer,
html[dir="rtl"] .cx-status {
  direction: rtl;
}

/* ════════════════════════════════════════════════════════════════════════
   Mobile space reclamation — tightens every band of vertical padding so
   scripture fills the screen instead of chrome. Targets ≤540px (phones)
   with a softer pass at ≤880px (small tablets / split-screen).
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  /* Status bar — drop the height + center vertically */
  .cx-status { min-height: 40px !important; padding: 4px 8px !important; }
  .cx-status-l, .cx-status-r { gap: 8px !important; }
  .cx-logo-txt b { font-size: 11px !important; letter-spacing: 0.14em; }
  .cx-logo-txt span { display: none !important; }
  .cx-sigil { width: 24px; height: 24px; }
  .cx-clock-time { font-size: 13px; }
  .cx-clock-date { font-size: 8.5px; }
  .cx-theme-toggle { width: 44px !important; height: 20px !important; }

  /* Reader frame — kill the dead vertical band */
  .cx-reader .cx-frame { padding: 10px 12px 8px !important; }
  .cx-frame:has(> .cx-frame-label) { padding-top: 14px !important; }
  .cx-frame-label { font-size: 9px !important; padding: 1px 8px !important; top: 0 !important; }

  /* Reader head — title smaller, meta buttons tighter */
  .cx-reader-head { row-gap: 6px !important; margin-bottom: 8px !important; }
  .cx-reader-titles h1 { font-size: 22px !important; line-height: 1.1 !important; margin: 0 !important; }
  .cx-reader-titles p   { font-size: 9.5px !important; letter-spacing: 0.12em; margin: 2px 0 0 !important; }
  .cx-reader-meta { gap: 4px !important; row-gap: 4px !important; }
  .cx-reader-meta .cx-pill,
  .cx-fs-toggle, .cx-face-toggle,
  .cx-side-toggle {
    padding: 3px 7px !important;
    font-size: 10px !important;
  }
  .cx-fs-letter { font-size: 12px !important; }
  .cx-fs-num    { font-size: 8px !important; }
  .cx-face-glyph { font-size: 11px !important; }
  .cx-face-lbl   { font-size: 7.5px !important; }
  .cx-side-toggle-icon i { height: 9px; }

  /* Verses — tighter padding, less left gutter for verse number */
  .cx-verse { padding: 5px 30px 5px 32px !important; }
  .cx-verse-row { padding-right: 30px !important; }
  .cx-vnum { left: 8px; top: 9px; }

  /* Reader foot — chapter nav with mobile touch targets (44px min) */
  .cx-reader-foot { padding: 8px 0 2px !important; gap: 4px !important; }
  .cx-nav-btn { padding: 8px 4px !important; font-size: 10px !important; min-height: 44px !important; }
  .cx-reader-progress { max-width: none !important; }

  /* Footer — HIG 44pt touch targets */
  .cx-footer { padding: 0 4px !important; min-height: 44px !important; gap: 4px !important; }
  .cx-tick { font-size: 9px !important; padding: 2px 4px; }
  .cx-mobile-fab,
  .cx-df-toggle { width: 44px !important; height: 44px !important; font-size: 16px !important; }
  .cx-footer-cluster { padding: 1px !important; gap: 2px !important; }
  .cx-footer-sep { height: 14px; }
  .cx-gnosis-master-lbl { font-size: 9px !important; letter-spacing: 0.10em !important; }

  /* Verse hover-action button — tighter so it doesn't push text */
  .cx-vmark-btn { width: 18px !important; height: 18px !important; right: 4px !important; font-size: 11px !important; }
}

/* Small phones — even tighter */
@media (max-width: 540px) {
  .cx-status { min-height: 44px !important; padding: 2px 6px !important; }
  .cx-clock-time { font-size: 12px; }
  .cx-clock-date { display: none !important; }
  .cx-logo-txt b { font-size: 10px !important; }

  .cx-reader .cx-frame { padding: 6px 8px 6px !important; }
  .cx-frame:has(> .cx-frame-label) { padding-top: 10px !important; }

  .cx-reader-titles h1 { font-size: 19px !important; }
  .cx-reader-titles p  { font-size: 8.5px !important; }

  /* Drop optional pills on the smallest screens to save a row */
  .cx-reader-meta .cx-pill { display: none !important; }
  /* The face-toggle "SERIF" label is redundant when you can see scripture */
  .cx-face-lbl { display: none !important; }
  /* Hide the SIDE × SIDE button on phones — sideBySide is impractical < 540 */
  .cx-side-toggle { display: none !important; }

  .cx-verse { padding: 4px 24px 4px 28px !important; line-height: 1.5 !important; }
  .cx-vnum { font-size: 9px; left: 6px; top: 8px; }

  .cx-footer { min-height: 44px !important; padding: 0 4px !important; }
  .cx-footer-c .cx-gnosis-master { padding: 3px 8px !important; min-height: 44px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   Settings panel — re-skin the 3rd-party tweaks-panel scoped styles to
   match the CODEX vibe AND make it a proper bottom-sheet drawer on mobile
   (was a 280px box stuck in the corner). Desktop gets a proper themed card.
   ════════════════════════════════════════════════════════════════════════ */

/* Desktop card — wider, themed, accent border, comfortable scroll */
.twk-panel {
  width: 360px !important;
  max-height: calc(100vh - 32px) !important;
  background: var(--cx-bg) !important;
  color: var(--cx-fg) !important;
  border: 1px solid color-mix(in oklab, var(--cx-accent) 35%, transparent) !important;
  border-radius: 4px !important;
  box-shadow:
    0 24px 60px -16px rgba(0, 0, 0, 0.55),
    0 0 0 1px color-mix(in oklab, var(--cx-accent) 18%, transparent),
    0 0 50px color-mix(in oklab, var(--cx-accent) 8%, transparent) !important;
  font-family: var(--cx-mono) !important;
  font-size: 12px !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
.twk-hd {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 12px 10px 12px 16px !important;
  background: color-mix(in oklab, var(--cx-accent) 6%, var(--cx-bg)) !important;
  border-bottom: 1px solid color-mix(in oklab, var(--cx-fg-dim) 22%, transparent) !important;
  cursor: default !important;
}
.twk-hd b {
  font-family: var(--cx-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  color: var(--cx-fg) !important;
  text-transform: uppercase !important;
}
.twk-hd::before {
  content: "⚙";
  margin-right: 8px;
  color: var(--cx-accent);
  font-size: 14px;
  text-shadow: 0 0 6px var(--cx-accent-glow);
}
.twk-x {
  width: 28px !important; height: 28px !important;
  border-radius: 3px !important;
  color: var(--cx-fg-dim) !important;
  font-size: 16px !important;
}
.twk-x:hover {
  background: color-mix(in oklab, var(--cx-fg-dim) 12%, transparent) !important;
  color: var(--cx-fg) !important;
}

.twk-body {
  padding: 14px 16px 18px !important;
  gap: 12px !important;
  scrollbar-color: color-mix(in oklab, var(--cx-fg-dim) 30%, transparent) transparent !important;
}
.twk-body::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--cx-fg-dim) 22%, transparent) !important;
}
.twk-body::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--cx-fg-dim) 35%, transparent) !important;
}

/* Section heading — accent caps, hairline divider above (except first) */
.twk-sect {
  font-family: var(--cx-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--cx-accent) !important;
  padding: 14px 0 4px !important;
  border-top: 1px solid color-mix(in oklab, var(--cx-fg-dim) 18%, transparent) !important;
  margin-top: 4px;
}
.twk-sect:first-child {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0;
}

/* Labels */
.twk-lbl, .twk-lbl > span:first-child {
  color: var(--cx-fg) !important;
  font-family: var(--cx-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.06em !important;
  font-weight: 500 !important;
}
.twk-val {
  color: var(--cx-fg-dim) !important;
  font-family: var(--cx-mono) !important;
}

/* Form fields — themed dark/light bg */
.twk-field, .twk-num {
  height: 30px !important;
  background: color-mix(in oklab, var(--cx-fg-dim) 6%, transparent) !important;
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 25%, transparent) !important;
  color: var(--cx-fg) !important;
  border-radius: 3px !important;
  font-family: var(--cx-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
}
.twk-field:focus, .twk-num:focus-within {
  border-color: var(--cx-accent) !important;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--cx-accent) 30%, transparent) !important;
  background: color-mix(in oklab, var(--cx-accent) 4%, var(--cx-bg)) !important;
}
select.twk-field {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%237ee0ff' d='M0 0h10L5 6z'/></svg>") !important;
}

/* Segmented (radio) — themed thumb */
.twk-seg {
  background: color-mix(in oklab, var(--cx-fg-dim) 8%, transparent) !important;
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 18%, transparent) !important;
  border-radius: 3px !important;
}
.twk-seg-thumb {
  background: var(--cx-accent) !important;
  box-shadow: 0 0 0 1px var(--cx-bg) inset, 0 0 8px color-mix(in oklab, var(--cx-accent) 35%, transparent) !important;
  border-radius: 2px !important;
}
.twk-seg button {
  color: var(--cx-fg-dim) !important;
  font-family: var(--cx-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.06em !important;
}
.twk-seg button[aria-checked="true"] { color: var(--cx-bg) !important; font-weight: 700 !important; }

/* Toggle — accent for "on" */
.twk-toggle {
  background: color-mix(in oklab, var(--cx-fg-dim) 25%, transparent) !important;
}
.twk-toggle[data-on="1"] {
  background: var(--cx-accent) !important;
  box-shadow: 0 0 8px color-mix(in oklab, var(--cx-accent) 40%, transparent) !important;
}
.twk-toggle i { background: var(--cx-bg) !important; }

/* Buttons */
.twk-btn {
  background: color-mix(in oklab, var(--cx-accent) 14%, transparent) !important;
  color: var(--cx-accent) !important;
  border: 1px solid color-mix(in oklab, var(--cx-accent) 50%, transparent) !important;
  border-radius: 3px !important;
  font-family: var(--cx-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  font-weight: 700 !important;
  height: 30px !important;
  text-transform: uppercase !important;
}
.twk-btn:hover {
  background: color-mix(in oklab, var(--cx-accent) 22%, transparent) !important;
  border-color: var(--cx-accent) !important;
}

/* Color swatches (HUD accent + mark colour) */
.twk-swatch {
  width: 36px !important;
  height: 24px !important;
  border-radius: 3px !important;
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 25%, transparent) !important;
}

/* Mobile bottom-sheet — fills the screen, stays scrollable.
   Skipped when the panel runs in fullscreen tabbed mode (.twk-fullscreen);
   tweaks-panel.jsx owns positioning there and the two rule sets were
   fighting at 641-880px, which clipped the tab strip and made trailing
   Settings sections (Modules / Keyboard / Danger zone) appear missing. */
@media (max-width: 880px) {
  .twk-panel:not(.twk-fullscreen) {
    /* override the 280px square in the corner with a proper sheet */
    width: auto !important;
    max-width: 100% !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    top: auto !important;
    max-height: calc(100vh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 8px !important;
    transform: none !important;
    box-shadow:
      0 -8px 40px -8px rgba(0, 0, 0, 0.5),
      0 0 0 1px color-mix(in oklab, var(--cx-accent) 30%, transparent) !important;
  }
  .twk-hd {
    padding: 14px 10px 14px 18px !important;
    /* Drag handle visual cue at top */
    position: sticky;
  }
  .twk-hd::after {
    content: "";
    position: absolute;
    top: 5px; left: 50%;
    transform: translateX(-50%);
    width: 32px; height: 3px;
    border-radius: 2px;
    background: color-mix(in oklab, var(--cx-fg-dim) 35%, transparent);
  }
  .twk-x {
    width: 44px !important; height: 44px !important;
    font-size: 18px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
  }
  .twk-body {
    padding: 12px 16px 24px !important;
    /* Proper momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* ── Apple HIG: 44pt minimum touch targets ── */
  .twk-toggle { width: 44px !important; height: 26px !important; border-radius: 999px !important; }
  .twk-toggle i { width: 22px !important; height: 22px !important; }
  .twk-toggle[data-on="1"] i { transform: translateX(18px) !important; }
  /* Ensure the toggle ROW is tall enough for comfortable tapping */
  /* HIG: rows need 44pt minimum; column-layout rows must stretch children */
  .twk-row { min-height: 44px !important; display: flex !important; align-items: stretch !important; }
  .twk-row.twk-row-h { align-items: center !important; }
  .twk-field, .twk-num { height: 44px !important; font-size: 14px !important; }
  .twk-btn { min-height: 44px !important; font-size: 12px !important; }
  .twk-seg button { min-height: 44px !important; font-size: 12px !important; }
  .twk-sect { padding-top: 16px !important; }
  /* Section labels — HIG minimum legible size */
  .twk-sect-title { font-size: 13px !important; }
  /* Slider thumb — 44pt along the track axis */
  .twk-slider { height: 6px !important; }
  .twk-slider::-webkit-slider-thumb { width: 28px !important; height: 28px !important; }
  .twk-slider::-moz-range-thumb { width: 28px !important; height: 28px !important; }
  /* Clear-marks and other mini-buttons */
  .twk-panel .cx-mini-btn,
  .twk-fullscreen .cx-mini-btn { min-height: 44px !important; font-size: 11px !important; }
}

/* Light-mode overrides */
.cx-app.is-light .twk-panel {
  background: #faf6ec !important;
  color: #29261b !important;
}

/* Re-skin our cx-mini-btn / cx-export-row inside the panel for visual unity */
.twk-panel .cx-mini-btn {
  background: color-mix(in oklab, var(--cx-accent) 12%, transparent) !important;
  color: var(--cx-accent) !important;
  border: 1px solid color-mix(in oklab, var(--cx-accent) 45%, transparent) !important;
  font-family: var(--cx-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  padding: 9px 12px !important;
  border-radius: 3px !important;
  text-transform: uppercase !important;
}
.twk-panel .cx-mini-btn:hover {
  background: color-mix(in oklab, var(--cx-accent) 22%, transparent) !important;
  border-color: var(--cx-accent) !important;
}

/* ── Fullscreen tabbed mode — dark theme overrides ──────────────────── */
/* v148 added a fullscreen tabbed layout (twk-scrim, twk-fullscreen,
   twk-shell, twk-tabs, twk-tab) but the inline __TWEAKS_STYLE defaults
   are light-mode (cream bg, #29261b text, rgba(0,0,0,..) borders).
   Override them here to match the CODEX dark-panel aesthetic.           */

.twk-fullscreen .twk-hd {
  border-bottom-color: color-mix(in oklab, var(--cx-fg-dim) 22%, transparent) !important;
}

.twk-tabs {
  border-right-color: color-mix(in oklab, var(--cx-fg-dim) 18%, transparent) !important;
  background: color-mix(in oklab, var(--cx-accent) 3%, var(--cx-bg)) !important;
}
.twk-tab {
  color: var(--cx-fg-dim) !important;
  font-family: var(--cx-mono) !important;
}
.twk-tab:hover {
  background: color-mix(in oklab, var(--cx-fg-dim) 10%, transparent) !important;
  color: var(--cx-fg) !important;
}
.twk-tab.is-active {
  background: color-mix(in oklab, var(--cx-accent) 12%, transparent) !important;
  color: var(--cx-accent) !important;
}
.twk-tab-icon {
  color: inherit !important;
}
.twk-tab.is-active .twk-tab-icon {
  color: var(--cx-accent) !important;
  opacity: 1 !important;
  text-shadow: 0 0 6px var(--cx-accent-glow);
}
.twk-tab-label {
  font-family: var(--cx-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
}

/* Slider — track barely visible on dark, thumb too plain */
.twk-slider {
  background: color-mix(in oklab, var(--cx-fg-dim) 18%, transparent) !important;
}
.twk-slider::-webkit-slider-thumb {
  background: var(--cx-accent) !important;
  border-color: var(--cx-accent) !important;
  box-shadow: 0 0 6px var(--cx-accent-glow) !important;
}
.twk-slider::-moz-range-thumb {
  background: var(--cx-accent) !important;
  border-color: var(--cx-accent) !important;
  box-shadow: 0 0 6px var(--cx-accent-glow) !important;
}

/* Number input label + unit — hardcoded browns from light theme */
.twk-num-lbl {
  color: var(--cx-fg-dim) !important;
  font-family: var(--cx-mono) !important;
}
.twk-num-unit {
  color: var(--cx-fg-dim) !important;
  font-family: var(--cx-mono) !important;
}

/* Mobile — horizontal scrolling tabs, HIG 44pt touch targets */
@media (max-width: 700px) {
  .twk-tabs {
    border-bottom-color: color-mix(in oklab, var(--cx-fg-dim) 18%, transparent) !important;
    border-right: none !important;
  }
  .twk-tab {
    padding: 10px 14px !important;
    min-height: 44px !important;
  }
  .twk-tab-label {
    font-size: 11px !important;
  }
}

/* Light-mode tab overrides */
.cx-app.is-light .twk-tabs {
  background: color-mix(in oklab, var(--cx-accent) 4%, var(--cx-bg)) !important;
  border-right-color: color-mix(in oklab, var(--cx-fg-dim) 12%, transparent) !important;
}
.cx-app.is-light .twk-tab {
  color: var(--cx-fg-dim) !important;
}
.cx-app.is-light .twk-tab:hover {
  background: color-mix(in oklab, var(--cx-fg-dim) 6%, transparent) !important;
  color: var(--cx-fg) !important;
}
.cx-app.is-light .twk-tab.is-active {
  background: color-mix(in oklab, var(--cx-accent) 10%, transparent) !important;
  color: var(--cx-accent) !important;
}
.cx-app.is-light .twk-slider {
  background: color-mix(in oklab, var(--cx-fg-dim) 15%, transparent) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   Map POI popups — sci-fi card with lazy Wikipedia thumbnail. Triggered
   by clicking a POI marker on the Leaflet map.
   ════════════════════════════════════════════════════════════════════════ */
.leaflet-popup.cx-poi-popup .leaflet-popup-content {
  margin: 0 !important;
  font: inherit !important;
  width: 240px !important;
}
.leaflet-popup.cx-poi-popup .leaflet-popup-content-wrapper {
  padding: 0 !important;
  background: var(--cx-bg) !important;
  border: 1px solid color-mix(in oklab, var(--cx-accent) 40%, transparent) !important;
  border-radius: 4px !important;
  box-shadow:
    0 14px 36px -12px rgba(0,0,0,0.5),
    0 0 0 1px color-mix(in oklab, var(--cx-accent) 20%, transparent) !important;
}
.leaflet-popup.cx-poi-popup .leaflet-popup-tip { background: var(--cx-bg) !important; }

.cx-poi-pop {
  display: flex;
  flex-direction: column;
  background: var(--cx-bg);
  color: var(--cx-fg);
  font-family: var(--cx-serif);
}
.cx-poi-pop-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: color-mix(in oklab, var(--cx-fg-dim) 12%, transparent);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cx-poi-pop-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cx-poi-pop-img[data-pending="1"] {
  background-image: linear-gradient(110deg,
    color-mix(in oklab, var(--cx-fg-dim) 8%, transparent) 0%,
    color-mix(in oklab, var(--cx-accent) 12%, transparent) 50%,
    color-mix(in oklab, var(--cx-fg-dim) 8%, transparent) 100%);
  background-size: 240% 100%;
  animation: cx-shimmer 2.4s linear infinite;
}
.cx-poi-pop-glyph {
  position: absolute;
  font-size: 28px;
  color: color-mix(in oklab, var(--cx-accent) 75%, var(--cx-fg-dim) 25%);
  text-shadow: 0 0 8px color-mix(in oklab, var(--cx-accent) 30%, transparent);
}
.cx-poi-pop-img:not([data-pending]) .cx-poi-pop-glyph { display: none; }
.cx-poi-pop-title {
  margin: 8px 12px 2px;
  font-family: var(--cx-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--cx-fg);
  letter-spacing: 0.005em;
  line-height: 1.25;
}
.cx-poi-pop-meta {
  margin: 0 12px 6px;
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}
.cx-poi-pop-kind, .cx-poi-pop-yr {
  font-family: var(--cx-mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  color: var(--cx-fg-dim);
}
.cx-poi-pop-kind { color: var(--cx-accent); }
.cx-poi-pop-body {
  margin: 0 12px 8px;
  font-family: var(--cx-serif);
  font-size: 11.5px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--cx-fg) 80%, var(--cx-fg-dim) 20%);
}
.cx-poi-pop-more {
  display: block;
  text-align: right;
  margin: 0 12px 10px;
  font-family: var(--cx-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--cx-accent);
  text-decoration: none;
  text-transform: uppercase;
}
.cx-poi-pop-more:hover { text-decoration: underline; }

/* Slight upgrade for art-card placeholder shimmer parity */
.cx-art-card-img:has(.cx-art-placeholder) {
  background-image: linear-gradient(110deg,
    color-mix(in oklab, var(--cx-fg-dim) 8%, transparent) 0%,
    color-mix(in oklab, var(--cx-accent) 10%, transparent) 50%,
    color-mix(in oklab, var(--cx-fg-dim) 8%, transparent) 100%);
  background-size: 240% 100%;
  animation: cx-shimmer 4s linear infinite;
}

/* ════════════════════════════════════════════════════════════════════════
   Oracle scripture reference chips — clickable + hover-preview links for
   any "John 1:1" / "1 Cor 13:4-8" / "Genesis 2" found in Oracle replies.
   Click → jump the reader. Hover → tiny verse preview from local cache.
   ════════════════════════════════════════════════════════════════════════ */
.cx-scripref {
  position: relative;
  display: inline;
  color: var(--cx-accent);
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.005em;
  border-bottom: 1px dashed color-mix(in oklab, var(--cx-accent) 55%, transparent);
  transition: color .12s, border-color .12s, background .12s;
  padding: 0 1px;
}
.cx-scripref:hover,
.cx-scripref:focus-visible {
  color: var(--cx-fg);
  background: color-mix(in oklab, var(--cx-accent) 12%, transparent);
  border-bottom-color: var(--cx-accent);
  outline: none;
}
.cx-scripref::before { content: "↪"; opacity: 0.55; margin-right: 2px; font-size: 0.85em; }

/* Popover — sci-fi card. position:fixed so it floats above anything. */
.cx-scripref-pop {
  position: fixed;
  z-index: 9800;
  width: 280px;
  background: var(--cx-bg);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 40%, transparent);
  border-radius: 4px;
  box-shadow:
    0 16px 36px -12px rgba(0,0,0,0.55),
    0 0 0 1px color-mix(in oklab, var(--cx-accent) 22%, transparent),
    0 0 20px color-mix(in oklab, var(--cx-accent) 10%, transparent);
  font-family: var(--cx-serif);
  white-space: normal;
  font-weight: 400;
  letter-spacing: 0;
  cursor: default;
  animation: cx-vm-in 140ms ease-out;
}
.cx-scripref-pop.is-above { transform-origin: bottom center; }
.cx-scripref-pop.is-below { transform-origin: top center; }
.cx-scripref-pop-h {
  display: block;
  padding: 6px 10px;
  border-bottom: 1px solid color-mix(in oklab, var(--cx-fg-dim) 22%, transparent);
  background: color-mix(in oklab, var(--cx-accent) 5%, transparent);
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cx-accent);
}
.cx-scripref-pop-body {
  display: block;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cx-fg);
  max-height: 180px;
  overflow: auto;
}
.cx-scripref-pop-body sup {
  font-family: var(--cx-mono);
  font-size: 8.5px;
  font-weight: 700;
  color: var(--cx-accent);
  margin-right: 2px;
  letter-spacing: 0.05em;
}
.cx-scripref-pop-l {
  font-family: var(--cx-mono);
  font-size: 10px;
  color: var(--cx-fg-dim);
  letter-spacing: 0.1em;
}
.cx-scripref-pop-e {
  font-family: var(--cx-mono);
  font-size: 10px;
  color: #ff8291;
}

/* ════════════════════════════════════════════════════════════════════════
   Mobile pass #2 — claw back another ~150px of vertical chrome.
   Targets: status bar, left-rail tabs, frame brackets/labels, oracle head,
   oracle quick-prompts (stack → horizontal scroll), input row, footer.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  /* ── Status bar: 56 → 38 ─────────────────────────────── */
  .cx-status { min-height: 32px !important; padding: 0 8px !important; }
  .cx-clock { display: flex; align-items: center; }
  .cx-status-l, .cx-status-r { gap: 6px !important; }
  .cx-theme-toggle { width: 44px !important; height: 20px !important; }
  .cx-pdd-btn { padding: 4px 8px !important; height: 26px; }
  .cx-pdd-meta { display: none !important; }       /* "1611·EN" on tiny mobile is redundant */
  .cx-pdd-name { font-size: 11px !important; }

  /* ── Rail chrome: kill corner brackets + frame-label on mobile ────── */
  .cx-rail-l .cx-frame, .cx-rail-r .cx-frame {
    padding: 0 !important;
    border: 0 !important;
  }
  .cx-rail-l .cx-frame:has(> .cx-frame-label),
  .cx-rail-r .cx-frame:has(> .cx-frame-label) { padding-top: 0 !important; }
  .cx-rail-l .cx-corner, .cx-rail-r .cx-corner { display: none !important; }
  .cx-rail-l .cx-frame-label, .cx-rail-r .cx-frame-label {
    display: none !important;        /* redundant with each panel's own header */
  }
  .cx-rail { padding: 0 !important; }

  /* ── Left-rail tabs: 51 → 34, inline glyph+label ───────────────────── */
  .cx-ltabs { padding: 4px 4px 4px !important; gap: 4px !important; }
  .cx-ltab {
    padding: 4px 6px !important;
    min-height: 28px !important;
    flex-direction: row !important;
    gap: 5px !important;
    align-items: center !important;
  }
  .cx-ltab-glyph { font-size: 12px !important; }
  .cx-ltab-lbl { font-size: 9.5px !important; letter-spacing: 0.1em !important; }
  .cx-ltab-badge { font-size: 8px !important; min-width: 14px; height: 14px; line-height: 14px; padding: 0 4px; }

  /* ── Oracle: tighten head, input, quick prompts ───────────────────── */
  .cx-oracle-head {
    padding: 6px 10px !important;
    gap: 8px !important;
    flex-wrap: nowrap;
  }
  .cx-oracle-eye { font-size: 10px !important; }
  .cx-oracle-id b { font-size: 10px !important; letter-spacing: 0.18em !important; }
  .cx-oracle-id span { display: none !important; }   /* subtitle hidden — caps tag suffices */
  .cx-oracle-head .cx-mini-btn { padding: 4px 7px !important; font-size: 8.5px !important; letter-spacing: 0.14em !important; }
  .cx-oracle-log { padding: 8px 10px !important; gap: 8px !important; }
  .cx-msg { grid-template-columns: 26px 1fr !important; gap: 8px !important; }
  .cx-msg-r { font-size: 8.5px !important; }
  /* Honour user's slider — only fall back to 12.5px on mobile when no var */
  .cx-msg-t { font-size: var(--cx-oracle-fs, 12.5px) !important; line-height: 1.55 !important; }

  /* Quick prompts — flow into a horizontal scroller so the column shrinks */
  .cx-oracle-quick {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 10px !important;
    gap: 5px !important;
    scrollbar-width: thin;
  }
  .cx-oracle-quick::-webkit-scrollbar { height: 0; }
  .cx-quick {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 5px 8px !important;
    font-size: 10px !important;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Input row — slimmer */
  .cx-oracle-input { padding: 6px 10px 10px !important; gap: 5px !important; }
  .cx-oracle-input input { padding: 8px 10px !important; font-size: 12.5px !important; }
  .cx-oracle-input button { padding: 8px 10px !important; font-size: 10px !important; letter-spacing: 0.14em !important; }

  /* ── Marks tab (left rail) — same trim as oracle head ─────────────── */
  .cx-bm-head { padding: 6px 10px !important; font-size: 9px !important; }
  .cx-search { padding: 4px 10px !important; }
  .cx-search input { font-size: 12px !important; padding: 4px 6px !important; }

  /* ── Reader chrome: kill corner brackets on mobile to free 18px ──── */
  .cx-reader .cx-frame { padding: 6px 8px !important; }
  .cx-reader .cx-frame:has(> .cx-frame-label) { padding-top: 12px !important; }
  .cx-reader .cx-corner { display: none !important; }

  /* ── Footer: HIG 44pt touch targets ─────────────────────── */
  .cx-footer { min-height: 44px !important; padding: 0 2px !important; }
  .cx-footer-cluster { padding: 0 !important; gap: 0 !important; border: 0 !important; background: transparent !important; }
  .cx-mobile-fab, .cx-df-toggle { width: 44px !important; height: 44px !important; font-size: 16px !important; border-radius: 2px !important; }
  .cx-footer-sep { display: none; }
  .cx-tick { padding: 2px 3px; font-size: 9px !important; }
  .cx-gnosis-master { padding: 3px 6px !important; min-height: 44px !important; }
  .cx-gnosis-master-lbl { font-size: 8.5px !important; letter-spacing: 0.08em !important; }

  /* Hide BMK count in status — it's already in the MARKS tab badge */
  .cx-status .cx-tick { display: none !important; }
}

/* Even tighter for narrow phones */
@media (max-width: 540px) {
  .cx-status { min-height: 44px !important; padding: 0 6px !important; }
  .cx-logo-txt b { font-size: 9.5px !important; letter-spacing: 0.12em; }
  .cx-clock-time { font-size: 11px; }
  .cx-theme-toggle { width: 42px !important; height: 20px !important; }

  /* Reader title smaller, less padding */
  .cx-reader-titles h1 { font-size: 17px !important; }
  .cx-reader-titles p  { font-size: 8px !important; letter-spacing: 0.08em !important; }
  .cx-reader-head { row-gap: 4px !important; margin-bottom: 6px !important; }

  /* Even smaller chips */
  .cx-fs-toggle, .cx-face-toggle,
  .cx-side-toggle {
    padding: 2px 6px !important;
    font-size: 9.5px !important;
  }
  .cx-fs-letter { font-size: 11px !important; }

  /* Verses — slightly tighter */
  .cx-verse { padding: 3px 22px 3px 26px !important; line-height: 1.45 !important; }
  .cx-vnum { font-size: 8.5px !important; left: 4px; top: 6px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Floating study notes widget — draggable, hidable. Lives at body level
   (rendered via portal) so it floats above every other layer including
   the Oracle, modal popups, and the Leaflet map.
   ════════════════════════════════════════════════════════════════════════ */
.cx-notes {
  position: fixed;
  width: 280px;
  z-index: 9700;
  background: var(--cx-bg);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 35%, transparent);
  border-radius: 4px;
  box-shadow:
    0 18px 44px -16px rgba(0,0,0,0.55),
    0 0 0 1px color-mix(in oklab, var(--cx-accent) 18%, transparent),
    0 0 24px color-mix(in oklab, var(--cx-accent) 8%, transparent);
  display: flex;
  flex-direction: column;
  font-family: var(--cx-mono);
  user-select: none;
}
body.cx-note-dragging * { cursor: grabbing !important; user-select: none !important; }

.cx-notes-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px 8px 12px;
  background: color-mix(in oklab, var(--cx-accent) 6%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--cx-fg-dim) 22%, transparent);
  cursor: grab;
  border-radius: 3px 3px 0 0;
}
.cx-notes-h:active { cursor: grabbing; }
.cx-notes-h-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--cx-accent);
  text-shadow: 0 0 6px color-mix(in oklab, var(--cx-accent) 35%, transparent);
}
.cx-notes-h-ref {
  flex: 1;
  font-family: var(--cx-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--cx-fg-dim);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cx-notes-h-min {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--cx-fg-dim);
  width: 24px; height: 24px;
  border-radius: 3px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.cx-notes-h-min:hover { color: var(--cx-fg); border-color: color-mix(in oklab, var(--cx-fg-dim) 25%, transparent); }

.cx-notes-body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cx-notes-textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  background: color-mix(in oklab, var(--cx-fg-dim) 5%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 22%, transparent);
  border-radius: 3px;
  color: var(--cx-fg);
  font-family: var(--cx-serif);
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 10px;
  outline: none;
  caret-color: var(--cx-accent);
  user-select: text;
}
.cx-notes-textarea::placeholder {
  font-style: italic;
  color: var(--cx-fg-dim);
  opacity: 0.6;
}
.cx-notes-textarea:focus {
  border-color: var(--cx-accent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--cx-accent) 30%, transparent);
}

.cx-notes-actions {
  display: flex;
  gap: 5px;
}
.cx-notes-btn {
  appearance: none;
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 25%, transparent);
  background: transparent;
  color: var(--cx-fg-dim);
  font-family: var(--cx-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  padding: 6px 8px;
  border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase;
}
.cx-notes-btn:hover:not(:disabled) {
  color: var(--cx-accent);
  border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
}
.cx-notes-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.cx-notes-pin {
  flex: 1;
  text-align: left;
  font-size: 9.5px;
  font-family: var(--cx-mono);
  letter-spacing: 0.04em;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cx-notes-save {
  background: color-mix(in oklab, var(--cx-accent) 14%, transparent);
  color: var(--cx-accent);
  border-color: color-mix(in oklab, var(--cx-accent) 50%, transparent);
  font-weight: 700;
}
.cx-notes-save:hover:not(:disabled) {
  background: color-mix(in oklab, var(--cx-accent) 22%, transparent);
  border-color: var(--cx-accent);
  color: var(--cx-accent);
}

.cx-notes-listtoggle {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--cx-fg-dim);
  font-family: var(--cx-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 0 2px;
  cursor: pointer;
  display: flex;
  gap: 6px;
  align-items: center;
}
.cx-notes-listtoggle:hover { color: var(--cx-accent); }
.cx-notes-listtoggle-arr { font-size: 10px; }

.cx-notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  user-select: text;
}
.cx-notes-empty {
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--cx-fg-dim);
  text-align: center;
  padding: 10px 0;
}
.cx-notes-item {
  background: color-mix(in oklab, var(--cx-fg-dim) 5%, transparent);
  border-left: 2px solid color-mix(in oklab, var(--cx-accent) 40%, transparent);
  padding: 6px 8px;
  border-radius: 0 3px 3px 0;
}
.cx-notes-item-h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.cx-notes-item-ref {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--cx-accent);
  font-family: var(--cx-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cx-notes-item-ref:hover:not(:disabled) { text-decoration: underline; }
.cx-notes-item-ref:disabled { color: var(--cx-fg-dim); cursor: default; }
.cx-notes-item-ts {
  font-family: var(--cx-mono);
  font-size: 8px;
  color: var(--cx-fg-dim);
  letter-spacing: 0.04em;
}
.cx-notes-item-del {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--cx-fg-dim);
  width: 18px; height: 18px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 2px;
}
.cx-notes-item-del:hover { color: #ff8291; background: color-mix(in oklab, #ff8291 10%, transparent); }
.cx-notes-item-body {
  margin: 0;
  font-family: var(--cx-serif);
  font-size: 12px;
  line-height: 1.5;
  color: var(--cx-fg);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Hidden state — small floating handle to bring it back */
.cx-notes-handle {
  position: fixed;
  z-index: 9700;
  right: 16px;
  bottom: 60px;
  width: 36px; height: 36px;
  appearance: none;
  border: 1px solid color-mix(in oklab, var(--cx-accent) 45%, transparent);
  background: var(--cx-bg);
  color: var(--cx-accent);
  font-size: 18px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow:
    0 6px 18px -4px rgba(0,0,0,0.35),
    0 0 12px color-mix(in oklab, var(--cx-accent) 18%, transparent);
  transition: transform .12s, box-shadow .12s;
}
.cx-notes-handle:hover {
  transform: scale(1.06);
  box-shadow:
    0 8px 22px -4px rgba(0,0,0,0.4),
    0 0 18px color-mix(in oklab, var(--cx-accent) 30%, transparent);
}
.cx-notes-handle-n {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--cx-accent);
  color: var(--cx-bg);
  font-family: var(--cx-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  min-width: 16px; height: 16px;
  line-height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  text-align: center;
}

/* Mobile — slightly narrower, anchor inset above the footer */
@media (max-width: 540px) {
  .cx-notes { width: calc(100vw - 16px); max-width: 320px; }
  .cx-notes-handle { right: 10px; bottom: 50px; width: 32px; height: 32px; font-size: 15px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Cache visibility — small pill on each panel head showing whether content
   came from local cache (offline-ready, with relative timestamp) or was
   just generated. Plus a browser in Settings → Cache listing every cached
   chapter so users can SEE the offline corpus they've built.
   ════════════════════════════════════════════════════════════════════════ */
.cx-cache-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 2px 6px;
  font-family: var(--cx-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  border-radius: 2px;
  border: 1px solid transparent;
  text-transform: uppercase;
}
.cx-cache-pill.is-cached {
  color: color-mix(in oklab, #8de8a8 80%, var(--cx-fg) 20%);
  border-color: color-mix(in oklab, #8de8a8 35%, transparent);
  background: color-mix(in oklab, #8de8a8 8%, transparent);
}
.cx-cache-pill.is-fresh {
  color: var(--cx-accent);
  border-color: color-mix(in oklab, var(--cx-accent) 45%, transparent);
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
}
.cx-cache-pill.is-seed {
  color: #c7a9ff;
  border-color: color-mix(in oklab, #c7a9ff 35%, transparent);
  background: color-mix(in oklab, #c7a9ff 8%, transparent);
}

/* Cache browser inside Settings */
.cx-cache-browser {
  margin-top: 6px;
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 22%, transparent);
  border-radius: 3px;
  background: color-mix(in oklab, var(--cx-fg-dim) 4%, transparent);
  max-height: 240px;
  overflow-y: auto;
}
.cx-cache-browser-h {
  padding: 6px 10px;
  border-bottom: 1px solid color-mix(in oklab, var(--cx-fg-dim) 16%, transparent);
  font-family: var(--cx-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 5%, transparent);
}
.cx-cache-browser ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cx-cache-row {
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 6px 10px;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid color-mix(in oklab, var(--cx-fg-dim) 8%, transparent);
}
.cx-cache-row:hover { background: color-mix(in oklab, var(--cx-accent) 8%, transparent); }
.cx-cache-row-ref {
  font-family: var(--cx-serif);
  font-size: 13px;
  color: var(--cx-fg);
}
.cx-cache-row-meta {
  font-family: var(--cx-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--cx-fg-dim);
}

/* ════════════════════════════════════════════════════════════════════════
   Gematria calculator extras — per-character chip breakdown + extras row
   ════════════════════════════════════════════════════════════════════════ */
.cx-gem-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  padding: 6px 8px;
  background: color-mix(in oklab, var(--cx-fg-dim) 4%, transparent);
  border-radius: 3px;
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 18%, transparent);
}
.cx-gem-bd-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 28px;
  padding: 3px 5px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--cx-bg) 60%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 18%, transparent);
  font-family: var(--cx-mono);
  line-height: 1.1;
}
.cx-gem-bd-ch {
  font-family: "SBL Hebrew", "Cardo", "Times New Roman", serif;
  font-size: 14px;
  color: var(--cx-fg);
}
.cx-gem-bd-v {
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: var(--cx-accent);
  font-weight: 700;
  margin-top: 1px;
}
.cx-gem-extra {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 4px 2px;
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--cx-fg-dim);
}
.cx-gem-extra b {
  font-family: var(--cx-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cx-fg);
  margin-right: 3px;
  font-size: 12px;
}

/* ════════════════════════════════════════════════════════════════════════
   Offline-readiness panel — at-a-glance confirmation that the app + Bible
   + panels survive without network. Crucial for readers in regions where
   visible network activity carries personal risk.
   ════════════════════════════════════════════════════════════════════════ */
.cx-offline-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0 8px;
  padding: 8px 10px;
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 22%, transparent);
  border-radius: 3px;
  background: color-mix(in oklab, var(--cx-fg-dim) 4%, transparent);
}
.cx-offline-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 8px;
  align-items: baseline;
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
}
.cx-offline-dot {
  width: 7px; height: 7px; border-radius: 50%;
  align-self: center;
  background: var(--cx-fg-dim);
}
.cx-offline-row.is-ok   .cx-offline-dot { background: #8de8a8; box-shadow: 0 0 6px color-mix(in oklab, #8de8a8 50%, transparent); }
.cx-offline-row.is-warn .cx-offline-dot { background: #ffc46b; }
.cx-offline-row.is-dim  .cx-offline-dot { background: var(--cx-fg-dim); opacity: 0.5; }
.cx-offline-lbl {
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cx-accent);
  font-size: 8.5px;
}
.cx-offline-row.is-dim .cx-offline-lbl { color: var(--cx-fg-dim); }
.cx-offline-val {
  color: var(--cx-fg);
  font-family: var(--cx-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════════════════════════════════
   Verse mirror modal — geopolitical / prophetic resonance for any verse.
   Sections colour-coded: cyan history, amber modern news, violet prophecy,
   cyan cross-references. Wikipedia external links + clickable cross-refs.
   ════════════════════════════════════════════════════════════════════════ */
.cx-mirror-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: color-mix(in oklab, var(--cx-bg) 88%, black 12%);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: cx-map-fade 220ms ease-out;
}
.cx-mirror {
  position: relative;
  width: 100%;
  max-width: 920px;
  max-height: calc(100vh - 48px);
  background: var(--cx-bg);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 30%, transparent);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.6),
    0 0 0 1px color-mix(in oklab, var(--cx-accent) 18%, transparent),
    0 0 60px color-mix(in oklab, var(--cx-accent) 10%, transparent);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cx-map-pop 280ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.cx-mirror-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid color-mix(in oklab, var(--cx-fg-dim) 22%, transparent);
  background: color-mix(in oklab, var(--cx-accent) 4%, transparent);
}
.cx-mirror-h-tag {
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--cx-accent);
  text-shadow: 0 0 8px color-mix(in oklab, var(--cx-accent) 50%, transparent);
}
.cx-mirror-h-ref {
  font-family: var(--cx-serif);
  font-size: 16px;
  color: var(--cx-fg);
}
.cx-mirror-h-theme {
  font-family: var(--cx-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--cx-fg-dim);
  flex: 1;
  min-width: 0;
}
.cx-mirror-x {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--cx-fg-dim);
  font-size: 18px;
  width: 28px; height: 28px;
  cursor: pointer;
  border-radius: 3px;
  margin-left: auto;
}
.cx-mirror-x:hover { color: var(--cx-fg); border-color: color-mix(in oklab, var(--cx-fg-dim) 30%, transparent); }

.cx-mirror-loading,
.cx-mirror-err {
  padding: 80px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: var(--cx-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--cx-fg-dim);
  text-align: center;
}
.cx-mirror-loading-sub { font-size: 9.5px; opacity: 0.7; letter-spacing: 0.1em; }
.cx-mirror-spin { display: inline-flex; gap: 4px; }
.cx-mirror-spin i {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cx-accent);
  box-shadow: 0 0 8px var(--cx-accent-glow);
  animation: cx-mspin 1.1s ease-in-out infinite;
}
.cx-mirror-spin i:nth-child(2) { animation-delay: 0.12s; }
.cx-mirror-spin i:nth-child(3) { animation-delay: 0.24s; }
.cx-mirror-spin i:nth-child(4) { animation-delay: 0.36s; }
.cx-mirror-err b { color: #ff8291; letter-spacing: 0.16em; font-size: 11px; }
.cx-mirror-err code { font-family: var(--cx-mono); font-size: 10px; color: var(--cx-fg-dim); max-width: 500px; }

.cx-mirror-body {
  padding: 18px 22px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cx-mirror-summary {
  margin: 0;
  font-family: var(--cx-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--cx-fg);
}

/* Sections — coloured by tag (history/news/prophecy/refs) */
.cx-mirror-sect {
  padding: 12px 14px;
  border-radius: 4px;
  border: 1px solid var(--accent, color-mix(in oklab, var(--cx-accent) 30%, transparent));
  background: color-mix(in oklab, var(--accent, var(--cx-accent)) 4%, transparent);
}
.cx-mirror-sect.is-cyan   { --accent: var(--cx-accent); }
.cx-mirror-sect.is-amber  { --accent: #ffc46b; }
.cx-mirror-sect.is-violet { --accent: #c7a9ff; }
.cx-mirror-sect.is-dim    { --accent: color-mix(in oklab, var(--cx-fg-dim) 60%, transparent); }
.cx-mirror-sect-h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  padding-bottom: 6px;
}
.cx-mirror-sect-tag {
  font-family: var(--cx-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
}
.cx-mirror-sect h3 {
  margin: 0;
  font-family: var(--cx-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--cx-fg);
}

.cx-mirror-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: cxe;
}
.cx-mirror-event {
  position: relative;
  padding: 8px 10px 10px 14px;
  border-left: 2px solid color-mix(in oklab, var(--accent) 50%, transparent);
  background: color-mix(in oklab, var(--accent) 4%, transparent);
}
.cx-mirror-event header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
  font-family: var(--cx-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cx-mirror-event-yr { color: var(--accent); font-weight: 700; }
.cx-mirror-event-place { color: var(--cx-fg); }
.cx-mirror-event-era { color: var(--cx-fg-dim); }
.cx-mirror-event h4 {
  margin: 0 0 4px;
  font-family: var(--cx-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--cx-fg);
  letter-spacing: 0.005em;
}
.cx-mirror-event h4 a {
  color: var(--cx-fg);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in oklab, var(--accent) 60%, transparent);
}
.cx-mirror-event h4 a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.cx-mirror-event p {
  margin: 0;
  font-family: var(--cx-serif);
  font-size: 12.5px;
  line-height: 1.55;
  color: color-mix(in oklab, var(--cx-fg) 80%, var(--cx-fg-dim) 20%);
}

.cx-mirror-prophecy {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 740px) { .cx-mirror-prophecy { grid-template-columns: 1fr; } }
.cx-mirror-prophecy li {
  padding: 8px 10px;
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius: 3px;
  background: color-mix(in oklab, var(--accent) 5%, transparent);
}
.cx-mirror-tradition {
  display: block;
  font-family: var(--cx-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.cx-mirror-prophecy li p {
  margin: 0 0 4px;
  font-family: var(--cx-serif);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cx-fg);
}
.cx-mirror-prophecy li small {
  font-family: var(--cx-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--cx-fg-dim);
  font-style: italic;
}

.cx-mirror-xref {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 740px) { .cx-mirror-xref { grid-template-columns: 1fr; } }
.cx-mirror-xref li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-left: 2px solid color-mix(in oklab, var(--accent) 50%, transparent);
}
.cx-mirror-xref li.is-clickable {
  cursor: pointer;
  border-radius: 0 3px 3px 0;
  transition: background .12s, border-color .12s;
}
.cx-mirror-xref li.is-clickable:hover {
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}
.cx-mirror-xref li b {
  font-family: var(--cx-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.cx-mirror-xref li span {
  font-family: var(--cx-serif);
  font-size: 11.5px;
  color: var(--cx-fg-dim);
  line-height: 1.45;
}

.cx-mirror-caveats {
  list-style: disc;
  margin: 0;
  padding: 0 0 0 18px;
}
.cx-mirror-caveats li {
  font-family: var(--cx-serif);
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--cx-fg-dim);
  margin-bottom: 4px;
}

/* ════════════════════════════════════════════════════════════════════════
   Oracle quick-prompts — now wrapped in a collapsible to claw back room.
   Hidden state shows just a slim toggle bar with the count.
   ════════════════════════════════════════════════════════════════════════ */
.cx-oracle-quick-wrap {
  border-top: 1px solid var(--cx-line);
  background: color-mix(in oklab, var(--cx-fg-dim) 4%, transparent);
}
.cx-oracle-quick-wrap.is-collapsed { background: transparent; }
.cx-oracle-quick-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--cx-fg-dim);
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 12px;
  cursor: pointer;
  text-align: left;
}
.cx-oracle-quick-toggle:hover { color: var(--cx-accent); }
.cx-oracle-quick-arr { font-size: 11px; opacity: 0.7; transition: transform .15s; }
.cx-oracle-quick-wrap.is-collapsed .cx-oracle-quick-arr { transform: none; }
/* When the suggestions are collapsed the toggle bar lives directly above the
   input — drop the wrap's background tint to a hairline only. */
.cx-oracle-quick-wrap.is-collapsed { padding: 0; }

/* When open, our existing .cx-oracle-quick (defined earlier) handles the
   horizontal-scroll prompt strip on mobile. The wrap inherits the same
   border-top so the visual footprint is identical to the old un-collapsible
   version when it's open. */
.cx-oracle-quick-wrap.is-open .cx-oracle-quick { border-top: 0; }

/* ════════════════════════════════════════════════════════════════════════
   Oracle chat bubbles + markdown styling. Subtle rounded panels per
   message, with a hover-revealed ✎ save-to-notes button on each oracle
   reply. Markdown elements (bold / italic / code / list / blockquote /
   heading) styled to fit the terminal aesthetic.
   ════════════════════════════════════════════════════════════════════════ */
.cx-msg-bubble {
  position: relative;
  background: color-mix(in oklab, var(--cx-fg-dim) 5%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 14%, transparent);
  border-radius: 6px;
  padding: 8px 12px;
  min-width: 0;
}
.cx-msg.is-user .cx-msg-bubble {
  background: color-mix(in oklab, var(--cx-accent) 10%, transparent);
  border-color: color-mix(in oklab, var(--cx-accent) 32%, transparent);
}
.cx-msg.is-oracle .cx-msg-bubble {
  background: color-mix(in oklab, var(--cx-fg-dim) 6%, transparent);
  border-color: color-mix(in oklab, var(--cx-fg-dim) 18%, transparent);
}
.cx-msg.is-err .cx-msg-bubble {
  border-color: color-mix(in oklab, #ff8291 35%, transparent);
}

/* Save-to-notes button — top-right of bubble, fades in on hover */
.cx-msg-save {
  position: absolute;
  top: 4px;
  right: 4px;
  appearance: none;
  background: color-mix(in oklab, var(--cx-bg) 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 25%, transparent);
  color: var(--cx-fg-dim);
  width: 22px; height: 22px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .12s, border-color .12s;
  z-index: 2;
}
.cx-msg-bubble:hover .cx-msg-save,
.cx-msg-bubble:focus-within .cx-msg-save { opacity: 1; }
.cx-msg-save:hover {
  color: var(--cx-accent);
  border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 14%, var(--cx-bg) 86%);
}
@media (hover: none) {
  /* Touch devices — keep the save icon softly visible since hover doesn't exist */
  .cx-msg-save { opacity: 0.4; }
}

/* Markdown elements inside oracle messages */
.cx-msg-p { margin: 0; }
.cx-msg-p + .cx-msg-p { margin-top: 8px; }
.cx-msg-list {
  margin: 6px 0 0;
  padding-left: 18px;
  list-style: disc;
}
.cx-msg-list li { margin-bottom: 3px; }
.cx-msg-quote {
  margin: 8px 0 0;
  padding: 4px 10px;
  border-left: 2px solid color-mix(in oklab, var(--cx-accent) 50%, transparent);
  color: var(--cx-fg-dim);
  font-style: italic;
}
.cx-msg-h {
  font-family: var(--cx-mono);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cx-accent);
  margin: 8px 0 4px;
}
.cx-msg-h-1 { font-size: 11px; }
.cx-msg-h-2 { font-size: 10.5px; }
.cx-msg-h-3 { font-size: 10px; opacity: 0.85; }
.cx-msg-h-4 { font-size: 9.5px; opacity: 0.75; }
.cx-msg-code {
  font-family: var(--cx-mono);
  font-size: 0.9em;
  background: color-mix(in oklab, var(--cx-fg-dim) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 18%, transparent);
  padding: 0 4px;
  border-radius: 2px;
}
.cx-msg-bubble strong { font-weight: 700; color: var(--cx-fg); }
.cx-msg-bubble em { font-style: italic; }

/* ════════════════════════════════════════════════════════════════════════
   Panel mark — small ✎ save button inside Talmud / Commentary / Gnosis
   cards. Lets users mark individual readings (not just whole chapters).
   ════════════════════════════════════════════════════════════════════════ */
.cx-panel-mark {
  appearance: none;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--cx-accent) 30%, transparent);
  color: var(--cx-accent);
  font-family: var(--cx-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  cursor: pointer;
  margin-left: auto;
  transition: background .12s, border-color .12s, color .12s;
}
.cx-panel-mark:hover {
  background: color-mix(in oklab, var(--cx-accent) 14%, transparent);
  border-color: var(--cx-accent);
}

/* Footer rows on Talmud / Commentary / Gnosis cards — flex with auto-pushed
   mark button on the right */
.cx-talmud-card footer,
.cx-comm-foot,
.cx-gnosis-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ORACLE · FULLSCREEN
   Click the ⛶ button in the Oracle head to expand the chat over the whole
   viewport. ESC or the ⤢ button restores. We escape the parent rail's
   stacking + clipping with position:fixed and a soft backdrop fade.
   ═══════════════════════════════════════════════════════════════════════ */
body.cx-oracle-fs-lock { overflow: hidden; }
.cx-oracle.is-fullscreen {
  /* Escape the right-rail / parent container so we genuinely fill the
     viewport. Previous "container-relative" approach left a black gap on
     mobile because the right rail itself was width-clamped (see issue
     report from 2026-05-17). position:fixed + dvh handles iOS chrome
     correctly (URL bar + bottom safe-area).  */
  position: fixed; inset: 0;
  z-index: 999;
  width: 100vw; height: 100vh; height: 100dvh;
  max-width: 100vw; max-height: 100dvh;
  border: none;
  border-radius: 0;
  padding: max(env(safe-area-inset-top, 0px), 18px)
           max(env(safe-area-inset-right, 0px), clamp(14px, 5vw, 80px))
           max(env(safe-area-inset-bottom, 0px), 14px)
           max(env(safe-area-inset-left, 0px), clamp(14px, 5vw, 80px));
  display: flex;
  flex-direction: column;
  background: var(--cx-bg, #0a0a0a);
  animation: cx-oracle-fs-in 220ms ease;
}
.cx-oracle.is-fullscreen::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 50% -10%,
      color-mix(in oklab, var(--cx-accent) 8%, transparent), transparent 70%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--cx-accent) 2%, transparent),
      transparent 30%);
}
.cx-oracle.is-fullscreen > * { position: relative; z-index: 1; }
.cx-oracle.is-fullscreen .cx-oracle-head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cx-line);
  margin-bottom: 8px;
}
.cx-oracle.is-fullscreen .cx-oracle-log {
  flex: 1; min-height: 0;
  max-width: 880px; width: 100%; margin: 0 auto;
  padding: 16px 4px;
}
.cx-oracle.is-fullscreen .cx-oracle-input,
.cx-oracle.is-fullscreen .cx-oracle-quick-wrap,
.cx-oracle.is-fullscreen .cx-oracle-key {
  max-width: 880px; width: 100%; margin-left: auto; margin-right: auto;
}
.cx-oracle.is-fullscreen .cx-msg-t { font-size: 14px; line-height: 1.6; }
@keyframes cx-oracle-fs-in {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════
   ORACLE · CONVERSATION TABS  (minimalistic — only renders when 2+ convs)
   ═══════════════════════════════════════════════════════════════════════ */
.cx-oracle-act {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent);
  color: var(--cx-fg-dim);
  width: 22px; height: 22px;
  padding: 0;
  border-radius: 4px;
  font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.cx-oracle-act:hover:not(:disabled) {
  color: var(--cx-accent);
  border-color: color-mix(in oklab, var(--cx-accent) 60%, transparent);
  background: color-mix(in oklab, var(--cx-accent) 6%, transparent);
}
.cx-oracle-act:disabled { opacity: 0.4; cursor: not-allowed; }

.cx-oracle-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 4px 6px 0;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--cx-line);
}
.cx-oracle-tabs::-webkit-scrollbar { height: 2px; }
.cx-oracle-tabs::-webkit-scrollbar-thumb { background: var(--cx-line); }

.cx-oracle-tab {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 0 1 auto; min-width: 0; max-width: 160px;
  padding: 4px 6px 5px 8px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--cx-fg-dim);
  font-size: 10.5px; letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
  border-radius: 4px 4px 0 0;
}
.cx-oracle-tab:hover { color: var(--cx-fg); background: color-mix(in oklab, var(--cx-accent) 4%, transparent); }
.cx-oracle-tab.is-active {
  color: var(--cx-accent);
  border-bottom-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 6%, transparent);
}
.cx-oracle-tab-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: 0.6;
  flex: 0 0 auto;
}
.cx-oracle-tab-lbl {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.cx-oracle-tab-x {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 3px;
  font-size: 12px; line-height: 1;
  opacity: 0.0;
  transition: opacity 120ms ease, background 120ms ease;
}
.cx-oracle-tab:hover .cx-oracle-tab-x,
.cx-oracle-tab.is-active .cx-oracle-tab-x { opacity: 0.6; }
.cx-oracle-tab-x:hover {
  opacity: 1 !important;
  background: color-mix(in oklab, var(--cx-fg) 12%, transparent);
}

/* Polish in fullscreen — keep tabs centered with chat column. */
.cx-oracle.is-fullscreen .cx-oracle-tabs {
  max-width: 880px; width: 100%; margin: 0 auto; padding-top: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════
   KEYBOARD-SHORTCUTS HELP MODAL
   ═══════════════════════════════════════════════════════════════════════ */
.cx-help-backdrop {
  position: fixed; inset: 0; z-index: 1100;
  background: color-mix(in oklab, #000 55%, transparent);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: cx-help-fade 160ms ease;
}
@keyframes cx-help-fade { from { opacity: 0; } to { opacity: 1; } }
.cx-help {
  width: min(440px, 100%);
  background: var(--cx-bg, #0a0a0a);
  border: 1px solid var(--cx-line);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6),
              0 0 0 1px color-mix(in oklab, var(--cx-accent) 15%, transparent);
  overflow: hidden;
  animation: cx-help-pop 200ms cubic-bezier(.2,.8,.2,1);
}
@keyframes cx-help-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cx-help-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--cx-line);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--cx-accent) 4%, transparent), transparent);
}
.cx-help-tag {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--cx-accent);
}
.cx-help-x {
  background: transparent; border: none; cursor: pointer;
  color: var(--cx-fg-dim); font-size: 18px; line-height: 1;
  width: 24px; height: 24px;
}
.cx-help-x:hover { color: var(--cx-fg); }
.cx-help-list {
  list-style: none; margin: 0; padding: 8px 14px;
}
.cx-help-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px dotted color-mix(in oklab, var(--cx-line) 60%, transparent);
}
.cx-help-row:last-child { border-bottom: none; }
.cx-help-keys { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.cx-help-lbl { font-size: 12px; color: var(--cx-fg); }
.cx-help-foot {
  padding: 8px 14px 12px; font-size: 10.5px; color: var(--cx-fg-dim);
  border-top: 1px solid var(--cx-line);
}
.cx-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; padding: 2px 6px;
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10.5px; line-height: 1;
  color: var(--cx-fg);
  background: color-mix(in oklab, var(--cx-accent) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 35%, transparent);
  border-bottom-width: 2px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   CHAT BUBBLE POLISH · 7th revision · for clarity, calm and joy.
   ═══════════════════════════════════════════════════════════════════════ */
.cx-msg + .cx-msg { margin-top: 10px; }
.cx-msg.is-user .cx-msg-bubble,
.cx-msg.is-oracle .cx-msg-bubble {
  border-radius: 10px;
  padding: 10px 12px;
  line-height: 1.55;
}
.cx-msg.is-user .cx-msg-bubble {
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 22%, transparent);
}
.cx-msg.is-oracle .cx-msg-bubble {
  background: color-mix(in oklab, var(--cx-fg) 4%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
   ORACLE · THEATER-MODE FULLSCREEN
   When the Oracle goes fullscreen, we hide every other surface so the
   chat is the only thing on screen — no rails poking through, no status
   bar, no footer. Mirrors the existing .cx-app.is-theater behavior but
   keyed off body.cx-oracle-theater so the user can keep their non-theater
   layout for everything else.
   ═══════════════════════════════════════════════════════════════════════ */
/* True theater mode — instead of overlaying with position:fixed (which
   leaves the Oracle a child of the left rail and produces hit-testing
   weirdness), we collapse the grid so the rail holding the Oracle takes
   the full viewport and hide every other surface. The Oracle stays in
   normal flow; nothing peeks through. */
body.cx-oracle-theater .cx-status,
body.cx-oracle-theater .cx-footer,
body.cx-oracle-theater .cx-rail-spine,
body.cx-oracle-theater .cx-rail-resize,
body.cx-oracle-theater .cx-rail-r,
body.cx-oracle-theater .cx-reader,
body.cx-oracle-theater .cx-rail-fold,
body.cx-oracle-theater .cx-rail-l .cx-ltabs { display: none !important; }
body.cx-oracle-theater .cx-grid {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  gap: 0 !important;
  padding: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
}
body.cx-oracle-theater .cx-app {
  display: block !important;
  height: 100vh !important;
}
body.cx-oracle-theater .cx-rail-l {
  padding: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  width: 100% !important;
  position: static !important;
}
body.cx-oracle-theater .cx-rail-l > .cx-frame { height: 100% !important; }
body.cx-oracle-theater .cx-rail-l .cx-frame { padding: 0 !important; border: none !important; }
body.cx-oracle-theater .cx-rail-l .cx-frame-label,
body.cx-oracle-theater .cx-rail-l .cx-corner { display: none !important; }
.cx-oracle.is-fullscreen {
  background: var(--cx-bg, #0a0a0a) !important;
}

/* ── Welcome-back resume banner ─────────────────────────────────────── */
.cx-oracle-resume {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  margin: 10px 12px 0;
  padding: 12px 14px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--cx-accent) 8%, transparent),
    color-mix(in oklab, var(--cx-accent) 3%, transparent));
  border: 1px solid color-mix(in oklab, var(--cx-accent) 30%, transparent);
  border-radius: 8px;
  animation: cx-help-pop 240ms cubic-bezier(.2,.8,.2,1);
}
.cx-oracle-resume-eye {
  color: var(--cx-accent);
  font-size: 14px; line-height: 1.2;
  text-shadow: 0 0 8px var(--cx-accent-glow);
}
.cx-oracle-resume-msg {
  margin: 0 0 8px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--cx-fg);
}
.cx-oracle-resume-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cx-oracle-resume-btn {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--cx-line) 90%, transparent);
  color: var(--cx-fg-dim);
  padding: 5px 12px;
  font-size: 11px; letter-spacing: 0.06em;
  border-radius: 4px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.cx-oracle-resume-btn:hover {
  color: var(--cx-fg);
  border-color: color-mix(in oklab, var(--cx-accent) 50%, transparent);
}
.cx-oracle-resume-btn.is-primary {
  color: var(--cx-accent);
  border-color: color-mix(in oklab, var(--cx-accent) 60%, transparent);
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
}
.cx-oracle-resume-btn.is-primary:hover {
  background: color-mix(in oklab, var(--cx-accent) 16%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
   HERMENEUTIC DRIFT MODE  (a.k.a. the Easter egg)
   - Theme accent shifts to a phosphor / matrix green across the entire UI
     by overriding the root vars on .cx-app.is-drift, so anything that
     reads var(--cx-accent), --cx-accent-glow, --cx-accent-2 picks it up.
   - The standard sigil hides; an all-seeing-eye triangle appears.
   - Wordmark toggles to a slightly altered glyph string.
   ═══════════════════════════════════════════════════════════════════════ */
.cx-sigil-drift, .cx-logo-drift { display: none; }
.cx-app.is-drift .cx-sigil-std,
.cx-app.is-drift .cx-logo-std { display: none; }
.cx-app.is-drift .cx-sigil-drift { display: block; }
.cx-app.is-drift .cx-logo-drift { display: inline; }
.cx-app.is-drift .cx-sigil-drift { filter: drop-shadow(0 0 4px var(--cx-accent-glow)); }

/* Matrix-green accent palette. We keep --cx-bg / --cx-fg as-is so the
   reader stays legible, but anything accent-tinted (panels, buttons,
   highlights, borders) adopts the phosphor green. */
.cx-app.is-drift {
  --cx-accent: #39ff7a;
  --cx-accent-2: #b8ff3a;
  --cx-accent-warn: #ff5a5a;
  --cx-accent-glow: rgba(57, 255, 122, 0.45);
}
.cx-app.is-drift.is-dark {
  /* Slightly cooler near-black with a green undertone, keeps text
     readable but everything feels CRT-phosphor. */
  --cx-bg: #04100a;
  --cx-fg: #c8ffd8;
  --cx-fg-dim: #5fa37a;
  --cx-line: #144024;
}
/* Subtle scanline tint */
.cx-app.is-drift.has-scan::before,
.cx-app.is-drift.has-scan::after {
  filter: hue-rotate(70deg) saturate(1.3);
}
/* The wordmark's "CODƎX" gets a faint glow so it reads as "off". */
.cx-app.is-drift .cx-logo-name { color: var(--cx-accent); text-shadow: 0 0 6px var(--cx-accent-glow); }

/* ═══════════════════════════════════════════════════════════════════════
   SETTINGS PANEL · CODEX skin
   Overrides the floating glassy iOS-style panel to match the rest of the
   terminal: dark, accent-bordered, mono-flavored labels, corner sigils.
   Every selector is .twk-* with !important so the inline <style> tag in
   tweaks-panel.jsx (which has the same selectors) loses cleanly.
   ═══════════════════════════════════════════════════════════════════════ */
.twk-panel {
  background: color-mix(in oklab, var(--cx-bg) 92%, transparent) !important;
  color: var(--cx-fg) !important;
  border: 1px solid var(--cx-accent) !important;
  border-radius: 6px !important;
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--cx-accent) 25%, transparent) inset,
    0 24px 60px rgba(0,0,0,0.5),
    0 0 22px var(--cx-accent-glow) !important;
  font: 11px/1.45 var(--cx-mono, ui-monospace, SFMono-Regular, monospace) !important;
  width: 320px !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
}
.twk-panel::before, .twk-panel::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--cx-accent);
  opacity: 0.85;
  pointer-events: none;
}
.twk-panel::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.twk-panel::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.twk-hd {
  padding: 12px 10px 12px 14px !important;
  border-bottom: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--cx-accent) 6%, transparent),
    transparent) !important;
}
.twk-hd b {
  font-family: var(--cx-mono, ui-monospace, monospace) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--cx-accent) !important;
  text-shadow: 0 0 6px var(--cx-accent-glow);
}
.twk-x {
  color: var(--cx-fg-dim) !important;
  background: transparent !important;
  border: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent) !important;
}
.twk-x:hover {
  color: var(--cx-fg) !important;
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent) !important;
  border-color: var(--cx-accent) !important;
}
.twk-body {
  padding: 14px 16px !important;
  gap: 14px !important;
  scrollbar-color: var(--cx-line) transparent !important;
}
.twk-body::-webkit-scrollbar-thumb {
  background: var(--cx-line) !important;
  border: none !important;
}
.twk-sect {
  font-family: var(--cx-mono, ui-monospace, monospace) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.18em !important;
  color: var(--cx-accent) !important;
  padding: 10px 0 4px !important;
  border-top: 1px dashed color-mix(in oklab, var(--cx-line) 70%, transparent);
}
.twk-sect:first-of-type, .twk-body > .twk-sect:nth-child(1) { border-top: none; padding-top: 0 !important; }
.twk-lbl {
  color: var(--cx-fg) !important;
  font-size: 11.5px !important;
}
.twk-lbl > span:first-child {
  font-weight: 400 !important;
  letter-spacing: 0.02em;
}
.twk-val { color: var(--cx-fg-dim) !important; }
.twk-field, .twk-num {
  background: color-mix(in oklab, var(--cx-fg) 5%, transparent) !important;
  border: 1px solid color-mix(in oklab, var(--cx-line) 90%, transparent) !important;
  color: var(--cx-fg) !important;
  border-radius: 4px !important;
  height: 28px !important;
  font: inherit !important;
}
.twk-field:focus, .twk-num:focus-within {
  border-color: var(--cx-accent) !important;
  background: color-mix(in oklab, var(--cx-accent) 4%, transparent) !important;
  box-shadow: 0 0 0 1px var(--cx-accent-glow);
}
select.twk-field {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%237ee0ff' d='M0 0h10L5 6z'/></svg>") !important;
}
.twk-num-lbl, .twk-num-unit { color: var(--cx-fg-dim) !important; }
.twk-seg {
  background: color-mix(in oklab, var(--cx-fg) 4%, transparent) !important;
  border: 1px solid color-mix(in oklab, var(--cx-line) 85%, transparent);
  border-radius: 5px !important;
  padding: 3px !important;
}
.twk-seg-thumb {
  background: color-mix(in oklab, var(--cx-accent) 14%, transparent) !important;
  border: 1px solid var(--cx-accent);
  box-shadow: 0 0 8px var(--cx-accent-glow) !important;
  border-radius: 3px !important;
}
.twk-seg button { color: var(--cx-fg-dim) !important; font-size: 11px !important; }
.twk-seg button[data-on="1"] { color: var(--cx-accent) !important; text-shadow: 0 0 4px var(--cx-accent-glow); }
/* CODEX dark-mode toggle — subtle hairline track at rest, faint accent
   wash + glow when on. The chunky iOS look is gone; this reads as a
   terminal switch. Tap area stays 44×44 via parent padding (set in
   tweaks-panel.jsx inline style). */
.twk-toggle {
  background: transparent !important;
  width: 26px !important; height: 12px !important;
  border: 1px solid color-mix(in oklab, var(--cx-line-strong) 60%, transparent) !important;
  box-shadow: none !important;
  opacity: 0.78;
  transition: background .14s ease, border-color .14s ease, opacity .14s ease, box-shadow .14s ease !important;
}
.twk-toggle:hover { opacity: 1; }
.twk-toggle[data-on="1"] {
  background: color-mix(in oklab, var(--cx-accent) 18%, transparent) !important;
  border-color: var(--cx-accent) !important;
  box-shadow: 0 0 6px color-mix(in oklab, var(--cx-accent) 35%, transparent) !important;
  opacity: 1;
}
.twk-toggle i {
  background: color-mix(in oklab, var(--cx-fg-dim) 60%, transparent) !important;
  box-shadow: none !important;
  width: 8px !important; height: 8px !important;
  top: 17px !important; left: 11px !important;
}
.twk-toggle[data-on="1"] i {
  background: var(--cx-accent) !important;
  box-shadow: 0 0 4px color-mix(in oklab, var(--cx-accent) 60%, transparent) !important;
}
.twk-btn {
  background: color-mix(in oklab, var(--cx-accent) 12%, transparent) !important;
  color: var(--cx-accent) !important;
  border: 1px solid var(--cx-accent) !important;
  border-radius: 4px !important;
  font-family: var(--cx-mono, ui-monospace, monospace) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}
.twk-btn:hover {
  background: color-mix(in oklab, var(--cx-accent) 22%, transparent) !important;
  box-shadow: 0 0 10px var(--cx-accent-glow);
}
.twk-btn.secondary {
  background: transparent !important;
  color: var(--cx-fg-dim) !important;
  border-color: color-mix(in oklab, var(--cx-line) 90%, transparent) !important;
}
.twk-chip {
  border-radius: 5px !important;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--cx-line) 80%, transparent) !important;
}
.twk-chip[data-on="1"] {
  box-shadow: 0 0 0 1.5px var(--cx-accent), 0 0 10px var(--cx-accent-glow) !important;
}

/* ── Beautiful language picker (8 pills, 4×2 grid) ────────────────────── */
.cx-langs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.cx-lang {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  padding: 8px 4px 6px;
  background: color-mix(in oklab, var(--cx-fg) 3%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-line) 85%, transparent);
  border-radius: 5px;
  color: var(--cx-fg);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 120ms ease;
}
.cx-lang:hover {
  border-color: color-mix(in oklab, var(--cx-accent) 60%, transparent);
  background: color-mix(in oklab, var(--cx-accent) 6%, transparent);
  transform: translateY(-1px);
}
.cx-lang.is-on {
  border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 12%, transparent);
  box-shadow: 0 0 12px var(--cx-accent-glow);
}
.cx-lang.is-on::after {
  content: "●";
  position: absolute; top: 2px; right: 4px;
  font-size: 7px;
  color: var(--cx-accent);
}
.cx-lang-glyph {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--cx-accent);
}
.cx-lang.is-on .cx-lang-glyph { text-shadow: 0 0 6px var(--cx-accent-glow); }
.cx-lang-name {
  font-size: 9px;
  color: var(--cx-fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── API keys + provider segmented selector ───────────────────────────── */
.cx-api { display: flex; flex-direction: column; gap: 10px; }
.cx-api-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.cx-api-seg-btn {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px;
  background: color-mix(in oklab, var(--cx-fg) 3%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-line) 85%, transparent);
  border-radius: 5px;
  color: var(--cx-fg);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.cx-api-seg-btn:hover {
  border-color: color-mix(in oklab, var(--cx-accent) 60%, transparent);
  background: color-mix(in oklab, var(--cx-accent) 5%, transparent);
}
.cx-api-seg-btn.is-on {
  border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 10%, transparent);
  box-shadow: 0 0 10px var(--cx-accent-glow);
}
.cx-api-seg-glyph {
  color: var(--cx-accent);
  font-size: 14px; line-height: 1;
  text-shadow: 0 0 6px var(--cx-accent-glow);
}
.cx-api-seg-btn span:nth-child(2) {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0; flex: 1;
}
.cx-api-seg-btn b {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: 0.06em;
}
.cx-api-seg-btn i {
  font-style: normal;
  font-size: 9px;
  color: var(--cx-fg-dim);
  line-height: 1.3;
}
.cx-api-field { display: flex; flex-direction: column; gap: 5px; }
.cx-api-lbl {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 9.5px; letter-spacing: 0.08em;
  color: var(--cx-fg-dim);
  text-transform: uppercase;
}
.cx-api-status { font-style: normal; font-size: 10px; }
.cx-api-status.is-ok { color: var(--cx-accent); }
.cx-api-status.is-err { color: var(--cx-accent-warn, #ff5a5a); }
.cx-api-row {
  display: grid;
  grid-template-columns: 1fr 26px auto;
  gap: 4px;
}
.cx-api-input {
  background: color-mix(in oklab, var(--cx-fg) 4%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-line) 90%, transparent);
  color: var(--cx-fg);
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10.5px;
  padding: 6px 8px;
  height: 28px;
  border-radius: 4px;
  outline: none;
  min-width: 0;
}
.cx-api-input:focus {
  border-color: var(--cx-accent);
  box-shadow: 0 0 0 1px var(--cx-accent-glow);
}
.cx-api-eye, .cx-api-save {
  background: color-mix(in oklab, var(--cx-fg) 4%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-line) 85%, transparent);
  color: var(--cx-fg-dim);
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10px;
  padding: 0;
}
.cx-api-eye:hover, .cx-api-save:hover:not(:disabled) {
  color: var(--cx-accent);
  border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
}
.cx-api-save {
  padding: 0 10px;
  letter-spacing: 0.1em;
}
.cx-api-save:disabled { opacity: 0.4; cursor: not-allowed; }
.cx-api-hint {
  margin: 2px 0 0;
  font-size: 9.5px;
  color: var(--cx-fg-dim);
  font-style: italic;
}

.cx-oracle-resume-meta {
  margin: -2px 0 8px;
  font-size: 10.5px;
  color: var(--cx-fg-dim);
  letter-spacing: 0.04em;
  font-family: var(--cx-mono, ui-monospace, monospace);
}
.cx-oracle-resume-drift { color: var(--cx-accent); }

/* ── iOS safe-area for the settings panel ──────────────────────────────
   The panel is bottom-anchored but on iPhone (notch / Dynamic Island)
   it can grow tall enough that its top edge sits under the status bar
   and the title gets eaten. Pad the header by the top inset, clamp the
   bottom anchor by the bottom inset, and shrink max-height to match. */
@supports (padding: env(safe-area-inset-top)) {
  .twk-panel {
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    right:  max(16px, env(safe-area-inset-right))  !important;
    max-height: calc(100vh
      - env(safe-area-inset-top)
      - env(safe-area-inset-bottom)
      - 32px) !important;
  }
  .twk-hd {
    padding-top: calc(12px + env(safe-area-inset-top)) !important;
  }
}

/* ── Reset-factory button · danger-coded, visible without screaming ──── */
.cx-reset-btn {
  width: 100%;
  color: var(--cx-accent-warn, #ff5a5a) !important;
  border: 1px solid color-mix(in oklab, var(--cx-accent-warn, #ff5a5a) 50%, transparent) !important;
  background: color-mix(in oklab, var(--cx-accent-warn, #ff5a5a) 6%, transparent) !important;
  letter-spacing: 0.1em;
}
.cx-reset-btn:hover {
  background: color-mix(in oklab, var(--cx-accent-warn, #ff5a5a) 16%, transparent) !important;
  box-shadow: 0 0 12px color-mix(in oklab, var(--cx-accent-warn, #ff5a5a) 50%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 2 + PHASE 5 — Slim strips · failproof at every viewport
   ═══════════════════════════════════════════════════════════════════════ */

/* Slim status-bar height on desktop & tablet (mouse precision = OK).
   Mobile keeps 44px+ for thumb hit targets. */
@media (min-width: 881px) {
  .cx-status { min-height: 40px !important; padding: 0 14px; }
  .cx-status-l, .cx-status-r { gap: 10px; }
  .cx-logo-txt b { font-size: 12px; }
  .cx-logo-txt span { font-size: 8.5px; }
  .cx-sigil { width: 22px; height: 22px; }
  .cx-clock-time { font-size: 14px; }
  .cx-clock-date { font-size: 8.5px; }
  .cx-status-sep { height: 18px; }
  .cx-footer { min-height: 32px; padding: 0 12px; }
  .cx-footer .cx-pill, .cx-footer .cx-tick { font-size: 9.5px; padding: 2px 6px; }
}

/* ── Failproof horizontal containment — flex children must be allowed
   to shrink below their content. Prevents the chrome from forcing
   the page wider than the viewport on phones <391px. */
.cx-status, .cx-footer { overflow-x: hidden; min-width: 0; }
.cx-status > *, .cx-footer > * { min-width: 0; }
.cx-status-l, .cx-status-r, .cx-footer-l, .cx-footer-r {
  min-width: 0;
  max-width: 100%;
}
.cx-logo-txt, .cx-clock { min-width: 0; }
.cx-logo-txt b, .cx-logo-txt span,
.cx-clock-time, .cx-clock-date {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.cx-app { overflow-x: hidden; }
html, body { overflow-x: hidden; }

/* ── Mobile (≤880px): bigger tap targets + collapse verbose labels ───── */
@media (max-width: 880px) {
  /* Apple HIG 44pt minimum tap targets for chrome controls */
  .cx-mobile-fab,
  .cx-status-fab,
  .cx-df-toggle,
  .cx-pdd-btn,
  .cx-gnosis-master,
  .cx-sq-trigger {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 6px 10px !important;
  }
  /* Theme toggle keeps capsule shape — 44pt tap area via generous padding */
  .cx-theme-toggle {
    min-width: 52px !important;
    min-height: 30px !important;
    padding: 7px 0 !important;
  }
  /* Logo text ≤320 takes too much room — drop the wordmark, keep sigil */
  @media (max-width: 360px) {
    .cx-logo-txt { display: none; }
  }
  /* Primary translation dropdown — show only the glyph (KJV/ASV/etc.),
     drop the long label "King James 1611·EN" that crammed the strip. */
  .cx-pdd-meta { display: none; }
  .cx-pdd-name { display: none; }
  .cx-pdd-glyph { font-size: 11px; }
  /* Footer: hide compare/cache tick on phones — main thrust is the
     toggle cluster + gnosis master + open-rail FAB. */
  .cx-footer .cx-tick { display: none; }
  .cx-footer-l { gap: 4px; }
  .cx-footer-cluster { gap: 2px; }
  /* Footer height stays tap-friendly */
  .cx-footer { min-height: 48px; }
  .cx-status { min-height: 52px; }
}

/* Extra-narrow safety (≤360px e.g. iPhone SE 1st gen) */
@media (max-width: 360px) {
  .cx-status { padding: 0 6px; gap: 4px; }
  .cx-footer { padding: 0 4px; gap: 4px; }
  .cx-status-l, .cx-status-r { gap: 4px; }
}

/* Left rail content overflow — the inner panes were producing horizontal
   scroll when the user dragged the rail narrower. Force shrink. */
.cx-rail-l, .cx-rail-r { min-width: 0; }
.cx-rail-l .cx-frame, .cx-rail-r .cx-frame { min-width: 0; max-width: 100%; }
.cx-rail-l .cx-frame > *, .cx-rail-r .cx-frame > * {
  min-width: 0; max-width: 100%;
}

/* Shrink the inner content of the status bar on desktop so the slim
   40px target actually takes effect (sun strip + dropdown were 44px). */
@media (min-width: 881px) {
  .cx-sun { height: 32px !important; }
  .cx-sun-bar { height: 24px !important; }
  .cx-sun-tick { font-size: 8px; }
  .cx-pdd-btn { padding: 4px 8px; min-height: 28px; }
  .cx-theme-toggle { min-height: 28px; }
  .cx-status > * { align-self: center; }
}

/* Override the hard-coded grid rows on desktop to actually let the slim
   status bar take effect. */
@media (min-width: 881px) {
  .cx-app { grid-template-rows: 40px 1fr 32px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   STAR-IFIED VERSE MARK BUTTON — quieter at rest, fills when marked
   ═══════════════════════════════════════════════════════════════════════ */
.cx-vmark-btn {
  font-size: 13px !important;
  color: var(--cx-fg-dim) !important;
  background: transparent !important;
  border: none !important;
  opacity: 0 !important;
  transition: opacity 160ms ease, color 160ms ease, transform 120ms ease !important;
}
.cx-verse:hover .cx-vmark-btn,
.cx-verse-row:hover .cx-vmark-btn,
.cx-verse:focus-within .cx-vmark-btn { opacity: 0.4 !important; }
.cx-vmark-btn:hover {
  opacity: 1 !important;
  color: var(--cx-accent) !important;
  text-shadow: 0 0 6px var(--cx-accent-glow);
  transform: translateY(-50%) scale(1.15) !important;
  background: transparent !important;
}
.cx-vmark-btn.is-on {
  opacity: 1 !important;
  color: var(--cx-accent) !important;
  text-shadow: 0 0 6px var(--cx-accent-glow);
}

/* ═══════════════════════════════════════════════════════════════════════
   READER VIEW POPOVER — collapses 5 reader-head buttons into one ⊕
   ═══════════════════════════════════════════════════════════════════════ */
.cx-vp { position: relative; display: inline-flex; }
/* Aa view-options trigger — borderless, subtle. Keeps a 44px tap target
   via padding, but the visible footprint is just the glyph; chrome only
   appears on hover/open. */
.cx-vp-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--cx-fg-dim);
  padding: 10px;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--cx-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  transition: color 120ms ease, border-color 200ms ease, background 200ms ease, opacity 120ms ease;
  position: relative;
  opacity: 0.6;
}
.cx-vp-trigger:hover { opacity: 1; color: var(--cx-accent); }
.cx-vp-trigger.is-open {
  opacity: 1;
  color: var(--cx-accent);
  border-color: color-mix(in oklab, var(--cx-accent) 30%, transparent);
  background: color-mix(in oklab, var(--cx-accent) 5%, transparent);
}
.cx-vp-trigger-glyph { font-family: var(--cx-serif, Georgia, serif); font-size: 14px; line-height: 1; font-style: italic; }
.cx-vp-trigger-dot {
  position: absolute; top: 8px; right: 8px;
  width: 4px; height: 4px;
  background: var(--cx-accent);
  box-shadow: 0 0 5px var(--cx-accent-glow);
  border-radius: 50%;
  opacity: 0.85;
}
.cx-vp-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  min-width: 220px;
  background: var(--cx-bg);
  border: 1px solid var(--cx-accent);
  border-radius: 6px;
  box-shadow:
    0 12px 32px rgba(0,0,0,0.45),
    0 0 14px var(--cx-accent-glow);
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
  animation: cx-vp-in 160ms ease;
}
@keyframes cx-vp-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cx-vp-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 6px 4px;
  min-height: 44px;
  border-bottom: 1px dotted color-mix(in oklab, var(--cx-line) 60%, transparent);
}
.cx-vp-row:last-child { border-bottom: none; }
.cx-vp-lbl {
  font-family: var(--cx-mono);
  font-size: 12px;
  color: var(--cx-fg);
  letter-spacing: 0.04em;
}
.cx-vp-toggle {
  position: relative; width: 38px; height: 22px;
  background: color-mix(in oklab, var(--cx-fg) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-line) 90%, transparent);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  transition: background 140ms ease, border-color 140ms ease;
}
.cx-vp-toggle.is-on {
  background: color-mix(in oklab, var(--cx-accent) 22%, transparent);
  border-color: var(--cx-accent);
  box-shadow: 0 0 8px var(--cx-accent-glow);
}
.cx-vp-toggle i {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--cx-fg);
  border-radius: 50%;
  transition: transform 140ms ease, background 140ms ease;
}
.cx-vp-toggle.is-on i {
  transform: translateX(15px);
  background: var(--cx-accent);
}
.cx-vp-stepper {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent);
  color: var(--cx-fg);
  padding: 8px 12px;
  min-height: 44px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--cx-mono);
}
.cx-vp-stepper:hover { border-color: var(--cx-accent); color: var(--cx-accent); }
.cx-vp-stepper-letter { font-family: var(--cx-serif, Georgia, serif); font-size: 13px; }
.cx-vp-stepper-num { font-size: 10.5px; opacity: 0.7; }

/* ═══════════════════════════════════════════════════════════════════════
   MARKS PANE — graceful resize, never break per-character
   ═══════════════════════════════════════════════════════════════════════ */
.cx-bm-empty,
.cx-bm-row,
.cx-bm-li,
.cx-bm-list,
.cx-bm-list * {
  word-break: normal !important;
  overflow-wrap: anywhere;
}
/* Switch the bm-row from a fragile 4-col grid to a forgiving flex layout
   that survives any rail width down to ~150px. Swatch + del bracket the
   text column; ref/note/ts stack vertically inside. */
.cx-bm-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
}
.cx-bm-row > .cx-bm-swatch,
.cx-bm-row > .cx-bm-idx { flex: 0 0 auto; margin-top: 4px; }
.cx-bm-row > .cx-bm-del { flex: 0 0 auto; margin-left: auto; }
.cx-bm-row::after {
  /* spacer so wrapped flex children stack properly */
  content: none;
}
.cx-bm-text {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1 1 auto; min-width: 0;
}
/* Since the JSX likely doesn't wrap ref/note/ts in a .cx-bm-text,
   we let them stack via flex-wrap on the row instead. */
.cx-bm-row { flex-wrap: wrap !important; }
.cx-bm-row > .cx-bm-ref { flex: 1 1 100%; min-width: 0; order: 1; }
.cx-bm-row > .cx-bm-note { flex: 1 1 100%; min-width: 0; order: 2; }
.cx-bm-row > .cx-bm-ts { flex: 0 0 auto; order: 3; }
.cx-bm-row > .cx-bm-del { order: 0; }
.cx-bm-row > .cx-bm-swatch { order: -1; }
.cx-bm-ref, .cx-bm-note, .cx-bm-ts {
  min-width: 0;
  word-break: normal !important;
  overflow-wrap: anywhere;
}
.cx-bm-ref {
  font-size: 11.5px !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  grid-area: unset !important;
  grid-column: unset !important;
}
.cx-bm-note { font-size: 10.5px !important; line-height: 1.4; color: var(--cx-fg-dim) !important; grid-area: unset !important; grid-column: unset !important; }
.cx-bm-ts { font-size: 9px !important; color: var(--cx-fg-dim) !important; opacity: 0.65; grid-area: unset !important; grid-column: unset !important; }

.cx-bm-empty {
  /* Reset the inherited 3-col grid from .cx-bm-list li — otherwise the
     single text node gets shoved into the 24px idx column and breaks
     per-character. Span the whole row and flow as plain block text. */
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-column: 1 / -1 !important;
  border-left: 0 !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  padding: 14px 12px !important;
  text-align: center;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* AI-search chip + reason line ── shown when the Oracle is ranking marks */
.cx-bm-ai-chip {
  display: inline-flex; align-items: center;
  margin-left: 6px;
  padding: 2px 7px;
  font-family: var(--cx-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 45%, transparent);
  border-radius: 3px;
}
.cx-bm-ai-chip.is-loading {
  color: color-mix(in oklab, var(--cx-fg) 70%, var(--cx-accent));
  animation: cx-bm-ai-pulse 1.1s ease-in-out infinite;
}
@keyframes cx-bm-ai-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.cx-bm-ai-note {
  font-family: var(--cx-mono); font-size: 10px;
  color: color-mix(in oklab, var(--cx-fg-dim) 70%, var(--cx-accent));
  letter-spacing: 0.04em;
  padding: 4px 2px 6px;
  border-bottom: 1px dashed color-mix(in oklab, var(--cx-accent) 30%, transparent);
  margin-bottom: 4px;
}
.cx-bm-reason {
  display: block;
  font-family: var(--cx-mono);
  font-size: 10.5px;
  line-height: 1.45;
  color: color-mix(in oklab, var(--cx-fg-dim) 65%, var(--cx-accent));
  font-style: italic;
  margin-top: 2px;
  letter-spacing: 0.01em;
}

/* Marks pane head + search resize gracefully */
.cx-bm-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.cx-bm-head > * { min-width: 0; }
.cx-bm-head > span:first-child {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 10.5px;
}
.cx-search { min-width: 0; }
.cx-search input { min-width: 0; width: 100%; }

/* When the rail is narrow, drop the date column entirely */
@container (max-width: 230px) {
  .cx-bm-ts { display: none; }
}
.cx-rail-l .cx-frame, .cx-rail-r .cx-frame { container-type: inline-size; }

/* The bookmark <li> still has a legacy grid layout from when the children
   sat directly inside it. Now the markup wraps them in .cx-bm-row, so the
   row gets pushed into a single 24px grid column and text breaks per-char.
   Reset the li to a simple block so the row spans full width. */
.cx-bm-list li.cx-bm-li {
  display: block !important;
  grid-template-columns: none !important;
}
.cx-bm-row {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   STAR · even more subtle (ghosted at rest, gentle accent on hover)
   ═══════════════════════════════════════════════════════════════════════ */
.cx-vmark-btn {
  font-size: 11px !important;
  width: 16px !important; height: 16px !important;
  opacity: 0 !important;
}
.cx-verse:hover .cx-vmark-btn,
.cx-verse-row:hover .cx-vmark-btn,
.cx-verse:focus-within .cx-vmark-btn { opacity: 0.22 !important; }
.cx-vmark-btn:hover {
  opacity: 0.95 !important;
  color: var(--cx-accent) !important;
  transform: translateY(-50%) scale(1.2) !important;
}
.cx-vmark-btn.is-on {
  opacity: 0.55 !important;
  color: var(--cx-accent) !important;
  text-shadow: none !important;
}
.cx-vmark-btn.is-on:hover { opacity: 1 !important; text-shadow: 0 0 5px var(--cx-accent-glow) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   TRANSLATION ROW · icon-only offline indicator, robust at narrow widths
   ═══════════════════════════════════════════════════════════════════════ */
.cx-tp-row {
  display: grid !important;
  grid-template-columns: 12px minmax(0, 1fr) 22px 22px auto !important;
  align-items: center;
  gap: 4px !important;
  padding: 6px 8px !important;
  min-width: 0;
}
.cx-tp-pick {
  display: flex; align-items: baseline; gap: 6px;
  min-width: 0; max-width: 100%;
  background: transparent; border: none;
  text-align: left;
  padding: 0;
  cursor: pointer;
  color: var(--cx-fg);
}
.cx-tp-pick > .cx-tp-name {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 12px;
}
.cx-tp-pick > .cx-tp-year {
  flex: 0 0 auto;
  font-size: 9.5px;
  color: var(--cx-fg-dim);
  font-variant-numeric: tabular-nums;
}
.cx-tp-mark { width: 8px; flex: 0 0 auto; color: var(--cx-accent); }

/* Compact eye + offline + remove buttons — all 22×22 hairline icons */
.cx-tp-eye, .cx-tp-offline, .cx-tp-rm {
  width: 22px !important; height: 22px !important;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 4px;
  padding: 0 !important;
  color: var(--cx-fg-dim) !important;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
  opacity: 0.55;
}
.cx-tp-row:hover .cx-tp-eye,
.cx-tp-row:hover .cx-tp-offline,
.cx-tp-row:hover .cx-tp-rm { opacity: 1; }
.cx-tp-eye:hover, .cx-tp-offline:hover, .cx-tp-rm:hover {
  color: var(--cx-accent) !important;
  border-color: color-mix(in oklab, var(--cx-accent) 50%, transparent) !important;
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent) !important;
}
.cx-tp-rm:hover {
  color: var(--cx-accent-warn, #ff5a5a) !important;
  border-color: color-mix(in oklab, var(--cx-accent-warn, #ff5a5a) 50%, transparent) !important;
}
.cx-tp-eye.is-on { color: var(--cx-accent) !important; opacity: 1; }

/* Active states — partial + full caches keep their indicator opacity high */
.cx-tp-offline.is-full,
.cx-tp-offline.is-partial,
.cx-tp-offline.is-dl { opacity: 1; color: var(--cx-accent) !important; }
.cx-tp-offline.is-dl { animation: cx-tp-pulse 1.2s ease-in-out infinite; }
@keyframes cx-tp-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.55; }
}
.cx-tp-off-svg { display: block; }
.cx-tp-off-track { stroke: currentColor; stroke-opacity: 0.25; stroke-width: 1.4; }
.cx-tp-off-fill  { stroke: currentColor; stroke-width: 1.6; }

/* Hide the now-unused inner spans */
.cx-tp-off-ring, .cx-tp-off-lbl { display: none !important; }

/* ── Mark pin button ──────────────────────────────────────────────────── */
.cx-bm-pin {
  background: transparent;
  border: 1px solid transparent;
  color: var(--cx-fg-dim);
  width: 22px; height: 22px;
  border-radius: 4px;
  font-size: 11px; line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease, color 120ms ease, border-color 120ms ease, background 120ms ease;
  margin-left: auto;
  padding: 0;
}
.cx-bm-row:hover .cx-bm-pin { opacity: 0.55; }
.cx-bm-pin:hover {
  opacity: 1 !important;
  color: var(--cx-accent);
  border-color: color-mix(in oklab, var(--cx-accent) 50%, transparent);
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
}
.cx-bm-pin.is-on {
  opacity: 1;
  color: var(--cx-accent);
}
.cx-bm-li.is-pinned .cx-bm-row {
  background: color-mix(in oklab, var(--cx-accent) 5%, transparent);
  box-shadow: inset 2px 0 0 var(--cx-accent);
}
.cx-bm-li.is-pinned + .cx-bm-li:not(.is-pinned)::before {
  content: "";
  display: block;
  border-top: 1px dashed color-mix(in oklab, var(--cx-accent) 40%, transparent);
  margin: 4px 8px 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   GNOSIS MASTER · redesigned from scratch
   Dormant: nearly invisible glyph + label, no border, no fill
   Engaged: glowing ring with pulse, soft purple bloom, fill animation
   ═══════════════════════════════════════════════════════════════════════ */
.cx-gnosis-master,
.cx-gnosis-master.is-on {
  /* Reset all the noisy defaults from the old rule. */
  border: none !important;
  background: transparent !important;
  padding: 4px 12px !important;
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-family: var(--cx-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--cx-fg-dim) !important;
  opacity: 0.45;
  transition: opacity 220ms ease, color 220ms ease, transform 200ms ease, letter-spacing 220ms ease;
  cursor: pointer;
  box-shadow: none !important;
  border-radius: 999px !important;
}
.cx-gnosis-master:hover {
  opacity: 0.9 !important;
  color: #c7a9ff !important;
  box-shadow: none !important;
  transform: scale(1.02);
}
.cx-gnosis-master-ring {
  position: static !important;
  transform: none !important;
  width: 8px !important; height: 8px !important;
  border-radius: 50%;
  border: 1px solid currentColor !important;
  background: transparent !important;
  box-shadow: none !important;
  flex: 0 0 auto;
  transition: all 240ms ease;
}
.cx-gnosis-master-lbl {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
/* The ⟁ glyph in the label is the actual visual anchor — make it dim too. */
.cx-gnosis-master:not(.is-on) .cx-gnosis-master-lbl { opacity: 0.85; }

/* ── ENGAGED · soft shimmer (no strong glow, no big halo) ──────────── */
.cx-gnosis-master.is-on {
  opacity: 1 !important;
  color: #c7a9ff !important;
  letter-spacing: 0.22em;
  background: none !important;
  text-shadow: 0 0 4px rgba(199, 169, 255, 0.25);
  animation: cx-gnosis-shimmer 4s ease-in-out infinite;
}
@keyframes cx-gnosis-shimmer {
  0%, 100% { color: #c7a9ff; text-shadow: 0 0 3px rgba(199,169,255,0.18); }
  50%      { color: #d9c4ff; text-shadow: 0 0 6px rgba(199,169,255,0.35); }
}
.cx-gnosis-master.is-on .cx-gnosis-master-ring {
  width: 8px !important; height: 8px !important;
  border-color: #c7a9ff !important;
  background: radial-gradient(circle, #c7a9ff 40%, transparent 75%) !important;
  box-shadow: 0 0 4px rgba(199, 169, 255, 0.45) !important;
  animation: cx-gnosis-ring-shimmer 3.2s ease-in-out infinite;
}
@keyframes cx-gnosis-ring-shimmer {
  0%, 100% { box-shadow: 0 0 3px rgba(199,169,255,0.3); }
  50%      { box-shadow: 0 0 6px rgba(199,169,255,0.6); }
}
.cx-gnosis-master.is-on:hover {
  transform: scale(1.03);
  text-shadow: 0 0 8px rgba(199, 169, 255, 0.6);
}

/* ═══════════════════════════════════════════════════════════════════════
   MARK CARD · ref as the headline, quote as the byline, tight padding
   ═══════════════════════════════════════════════════════════════════════ */
/* ── Mark card · clean flex layout · ref + note wrapped in .cx-bm-text ── */
.cx-bm-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 32px 8px 10px !important;
  border-bottom: 1px solid color-mix(in oklab, var(--cx-line) 60%, transparent);
  position: relative;
}
.cx-bm-row > .cx-bm-swatch {
  width: 8px !important; height: 8px !important;
  margin: 0 !important;
  flex: 0 0 8px !important;
  align-self: center;
  border-radius: 50% !important;
}
.cx-bm-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.cx-bm-row .cx-bm-ref {
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--cx-fg) !important;
  letter-spacing: 0.005em !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.cx-bm-row .cx-bm-note {
  font-size: 10.5px !important;
  line-height: 1.4 !important;
  color: var(--cx-fg-dim) !important;
  font-style: italic !important;
  min-width: 0 !important;
  margin: 0 !important;
  /* Two-line preview with ellipsis */
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: ellipsis !important;
}
.cx-bm-row > .cx-bm-ts {
  position: absolute !important;
  bottom: 6px !important; right: 8px !important;
  font-size: 8.5px !important;
  color: var(--cx-fg-dim) !important;
  opacity: 0 !important;
  transition: opacity 140ms ease !important;
  pointer-events: none;
}
.cx-bm-row:hover > .cx-bm-ts { opacity: 0.55 !important; }
.cx-bm-row:hover > .cx-bm-ts { opacity: 0.55; }

/* Pin + delete buttons — overlay top-right corner on hover, hidden at rest */
.cx-bm-row > .cx-bm-pin,
.cx-bm-row > .cx-bm-del {
  position: absolute;
  top: 4px;
  width: 18px; height: 18px;
  font-size: 9px;
  border-radius: 3px;
  margin: 0 !important;
  opacity: 0;
}
.cx-bm-row { position: relative; }
.cx-bm-row > .cx-bm-pin {
  right: 26px;
  color: var(--cx-fg-dim) !important;
  background: transparent !important;
}
.cx-bm-row > .cx-bm-pin svg { display: block; }
.cx-bm-row > .cx-bm-del { right: 6px; }
.cx-bm-row:hover > .cx-bm-pin { opacity: 0.4; }
.cx-bm-row:hover > .cx-bm-del { opacity: 0.45; }
.cx-bm-row > .cx-bm-pin.is-on {
  opacity: 0.45 !important;
  color: color-mix(in oklab, var(--cx-fg-dim) 70%, var(--cx-accent)) !important;
}
.cx-bm-row > .cx-bm-pin:hover { opacity: 0.85 !important; color: var(--cx-accent) !important; }
.cx-bm-row > .cx-bm-del:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   SIDE QUESTS · button + dropdown menu
   ═══════════════════════════════════════════════════════════════════════ */
.cx-sq { position: relative; display: inline-flex; }
.cx-sq-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent);
  color: var(--cx-fg-dim);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
  min-height: 28px;
}
.cx-sq-trigger:hover, .cx-sq-trigger.is-open {
  color: var(--cx-accent);
  border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 6%, transparent);
}
.cx-sq-glyph {
  font-size: 13px; line-height: 1;
  /* Force emoji-aware font stack so ⚔ (U+2694) renders as crossed swords
     on every OS — system monos fall back to a tofu/X otherwise. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
}
@media (max-width: 600px) { .cx-sq-lbl { display: none; } }

.cx-sq-menu {
  position: fixed;
  z-index: 1300;
  width: min(360px, calc(100vw - 24px));
  background: var(--cx-bg);
  border: 1px solid var(--cx-accent);
  border-radius: 6px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.5), 0 0 14px var(--cx-accent-glow);
  animation: cx-sq-in 180ms cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}
@keyframes cx-sq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cx-sq-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--cx-line);
  background: linear-gradient(180deg, color-mix(in oklab, var(--cx-accent) 4%, transparent), transparent);
}
.cx-sq-tag {
  font-family: var(--cx-mono);
  font-size: 9.5px; letter-spacing: 0.18em;
  color: var(--cx-accent);
}
.cx-sq-x {
  background: transparent; border: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent);
  color: var(--cx-fg-dim); width: 22px; height: 22px;
  border-radius: 4px; cursor: pointer; font-size: 13px; line-height: 1;
}
.cx-sq-x:hover { color: var(--cx-fg); border-color: var(--cx-accent); background: color-mix(in oklab, var(--cx-accent) 8%, transparent); }
.cx-sq-empty {
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.cx-sq-empty-h {
  margin: 0;
  font-family: var(--cx-mono);
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--cx-fg);
}
.cx-sq-empty-sub {
  margin: 0;
  font-size: 11.5px; line-height: 1.5;
  color: var(--cx-fg-dim);
}
.cx-sq-empty-foot {
  margin: 4px 0 0;
  font-size: 10.5px;
  color: var(--cx-accent);
  font-style: italic;
  opacity: 0.85;
}
.cx-sq-list { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.cx-sq-item { margin: 0; }
.cx-sq-card {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: var(--cx-fg);
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.cx-sq-card:hover {
  background: color-mix(in oklab, var(--cx-accent) 6%, transparent);
  border-color: color-mix(in oklab, var(--cx-accent) 40%, transparent);
}
.cx-sq-card-glyph {
  color: var(--cx-accent);
  font-size: 14px; line-height: 1;
  text-shadow: 0 0 4px var(--cx-accent-glow);
}
.cx-sq-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-sq-card-body b { font-size: 12px; letter-spacing: 0.02em; }
.cx-sq-card-body i { font-style: normal; font-size: 10.5px; color: var(--cx-fg-dim); line-height: 1.4; }

/* Mobile: drop the QUESTS label, keep just the ⚔ glyph */
@media (max-width: 480px) {
  .cx-sq-trigger { padding: 4px 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   VERSE DRAG-TO-NOTES
   While dragging a verse out of the reader, surface a soft hint state on
   the notes textarea. Drop accepts text/plain or application/codex-verse.
   ═══════════════════════════════════════════════════════════════════════ */
.cx-verse[draggable="true"] { cursor: text; }
body.cx-verse-dragging .cx-notes {
  outline: 1.5px dashed color-mix(in oklab, var(--cx-accent) 60%, transparent);
  outline-offset: 4px;
  box-shadow: 0 0 24px var(--cx-accent-glow), var(--cx-shadow);
}
body.cx-verse-dragging .cx-notes-textarea {
  background: color-mix(in oklab, var(--cx-accent) 6%, var(--cx-bg-1)) !important;
}
.cx-notes-textarea.is-drop {
  background: color-mix(in oklab, var(--cx-accent) 12%, var(--cx-bg-1)) !important;
  outline: 1px solid var(--cx-accent);
  outline-offset: -1px;
}
/* Subtle sizing — notes default-docked under the right rail. Match the
   rail width so it visually stacks. */
.cx-notes {
  width: min(var(--cx-rrail-w, 400px), calc(100vw - 32px));
}
@media (max-width: 880px) {
  .cx-notes { width: min(86vw, 360px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   OFFLINE BIBLES · catalog inside Settings
   ═══════════════════════════════════════════════════════════════════════ */
.cx-ob { display: flex; flex-direction: column; gap: 6px; }
.cx-ob-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px;
  background: color-mix(in oklab, var(--cx-fg) 3%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent);
  border-radius: 5px;
  border-left-width: 2px;
}
.cx-ob-row.is-full { border-left-color: var(--cx-accent); }
.cx-ob-row.is-partial { border-left-color: color-mix(in oklab, var(--cx-accent) 50%, transparent); }
.cx-ob-head {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--cx-mono);
  font-size: 11px;
}
.cx-ob-glyph {
  font-size: 9.5px; letter-spacing: 0.08em;
  color: var(--cx-accent);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 40%, transparent);
  padding: 1px 5px;
  border-radius: 3px;
}
.cx-ob-name { color: var(--cx-fg); flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-ob-count { color: var(--cx-fg-dim); font-variant-numeric: tabular-nums; font-size: 10px; }
.cx-ob-status {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 10px;
  color: var(--cx-fg-dim);
  padding: 4px 0 2px;
  border-top: 1px dotted color-mix(in oklab, var(--cx-line) 60%, transparent);
}
.cx-ob-status em { font-style: italic; color: var(--cx-fg); }
.cx-ob-status.is-ok span { color: var(--cx-accent); }
.cx-ob-status.is-warn span { color: var(--cx-accent-warn, #ff5a5a); }
.cx-ob-status small {
  font-size: 9.5px; line-height: 1.4;
  color: var(--cx-fg-dim);
}
.cx-ob-status small.is-ok { color: color-mix(in oklab, var(--cx-accent) 80%, var(--cx-fg)); }
.cx-ob-status small.is-warn { color: var(--cx-accent-warn, #ff5a5a); }
.cx-ob-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.cx-ob-actions .cx-mini-btn { font-size: 9.5px; padding: 4px 8px; }
.cx-ob-rm { color: color-mix(in oklab, var(--cx-fg-dim) 70%, var(--cx-accent-warn, #ff5a5a)) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ORACLE HEAD · fix overlap when rail is narrow
   The b + span tag block was forcing the head to wrap into the action
   buttons. Truncate cleanly and hide the subtitle below the breakpoint
   where the rail can't reasonably show both.
   ═══════════════════════════════════════════════════════════════════════ */
.cx-oracle-head {
  flex-wrap: nowrap !important;
  gap: 6px !important;
  padding: 8px 10px !important;
  min-height: 40px;
}
.cx-oracle-id {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.cx-oracle-id b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}
.cx-oracle-id span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}
/* Action buttons stay on one row; never wrap. */
.cx-oracle-head .cx-oracle-act {
  flex: 0 0 auto;
}
/* Hide subtitle once the rail is narrower than ~340px */
@container (max-width: 340px) {
  .cx-oracle-id span { display: none; }
}
.cx-oracle { container-type: inline-size; }

/* ═══════════════════════════════════════════════════════════════════════
   NOTES · resize grip + format popover
   ═══════════════════════════════════════════════════════════════════════ */
.cx-notes {
  /* Allow JS to set width/height inline. Defaults from below. */
  resize: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  min-height: 160px;
}
.cx-notes-grip {
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  cursor: nwse-resize;
  z-index: 50;
  opacity: 0;
  transition: opacity 140ms ease;
}
.cx-notes:hover .cx-notes-grip { opacity: 0.6; }
.cx-notes-grip:hover { opacity: 1 !important; }
.cx-notes-grip::after {
  content: "";
  position: absolute;
  inset: 2px;
  background:
    linear-gradient(135deg, transparent 50%, var(--cx-accent) 50%, var(--cx-accent) 60%, transparent 60%),
    linear-gradient(135deg, transparent 70%, var(--cx-accent) 70%, var(--cx-accent) 80%, transparent 80%);
  opacity: 0.7;
}
.cx-notes-body {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
.cx-notes-textarea {
  flex: 1 1 auto;
  min-height: 0;
  resize: none !important;
}

/* ── Format & export popover ──────────────────────────────────────── */
.cx-notes-fmt-wrap { position: relative; display: inline-flex; }
.cx-notes-fmt-trigger {
  min-width: 30px;
  padding: 4px 8px !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
.cx-notes-fmt-trigger.is-open {
  color: var(--cx-accent);
  border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
}
.cx-notes-fmt-pop {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  z-index: 60;
  background: var(--cx-bg);
  border: 1px solid var(--cx-accent);
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.45), 0 0 12px var(--cx-accent-glow);
  padding: 8px;
  width: 220px;
  display: flex; flex-direction: column; gap: 6px;
  animation: cx-notes-fmt-in 160ms ease;
}
@keyframes cx-notes-fmt-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cx-notes-fmt-row { display: flex; align-items: center; gap: 6px; }
.cx-notes-fmt-lbl {
  font-family: var(--cx-mono);
  font-size: 8.5px; letter-spacing: 0.18em;
  color: var(--cx-fg-dim);
}
.cx-notes-fmt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.cx-notes-fmt-export { display: flex; gap: 4px; }
.cx-notes-fmt-export .cx-notes-fmt-btn { flex: 1; }
.cx-notes-fmt-btn {
  background: color-mix(in oklab, var(--cx-fg) 4%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent);
  color: var(--cx-fg);
  font-family: var(--cx-mono);
  font-size: 11px;
  padding: 6px 4px;
  height: 28px;
  border-radius: 3px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.cx-notes-fmt-btn:hover {
  color: var(--cx-accent);
  border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 10%, transparent);
}
.cx-notes-fmt-btn b, .cx-notes-fmt-btn i { font-style: inherit; font-weight: inherit; }

/* ═══════════════════════════════════════════════════════════════════════
   INSTALL CODEX BUTTON · simple. Matches .cx-mini-btn aesthetic.
   ═══════════════════════════════════════════════════════════════════════ */
.cx-install-btn {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 7px 12px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 1px solid color-mix(in oklab, var(--cx-line) 90%, transparent) !important;
  border-radius: 4px !important;
  color: var(--cx-fg) !important;
  font-family: var(--cx-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease !important;
  text-align: center !important;
  box-shadow: none !important;
  animation: none !important;
}
.cx-install-btn::before { display: none !important; }
.cx-install-btn:hover:not(:disabled) {
  color: var(--cx-accent) !important;
  border-color: var(--cx-accent) !important;
  background: color-mix(in oklab, var(--cx-accent) 6%, transparent) !important;
  transform: none !important;
  box-shadow: none !important;
}
.cx-install-btn:disabled, .cx-install-btn.is-installed {
  cursor: default !important;
  color: var(--cx-fg-dim) !important;
  border-color: color-mix(in oklab, var(--cx-line) 70%, transparent) !important;
}
.cx-install-glyph {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important; height: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: inherit !important;
  font-family: var(--cx-mono) !important;
  font-size: 12px !important;
  text-shadow: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
}
.cx-install-btn b {
  font-family: var(--cx-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  color: inherit !important;
  text-shadow: none !important;
  background: none !important;
}
.cx-install-btn i { display: none !important; }   /* drop the secondary subtitle */

/* ── Storage diagnostic strip on top of OfflineBiblesPanel ───────────── */
.cx-ob-diag {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  margin-bottom: 4px;
  border: 1px solid color-mix(in oklab, var(--cx-line) 70%, transparent);
  border-radius: 4px;
  background: color-mix(in oklab, var(--cx-fg) 3%, transparent);
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--cx-fg-dim);
}
.cx-ob-diag-l { display: inline-flex; align-items: center; gap: 6px; }
.cx-ob-diag-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cx-fg-dim);
}
.cx-ob-diag-dot.is-ok   { background: var(--cx-accent); box-shadow: 0 0 4px var(--cx-accent-glow); }
.cx-ob-diag-dot.is-warn { background: var(--cx-accent-warn, #ff5a5a); }
.cx-ob-diag-r { font-variant-numeric: tabular-nums; }

.cx-ob-import {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dashed color-mix(in oklab, var(--cx-line) 60%, transparent);
  margin-bottom: 6px;
}
.cx-ob-import label.cx-mini-btn {
  display: inline-flex; align-items: center; cursor: pointer;
  flex: 0 0 auto;
}
.cx-ob-import .cx-export-hint { line-height: 1.4; }

/* ── Mass-action toolbar + updates list ─────────────────────────────── */
.cx-ob-toolbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.cx-ob-toolbar .cx-mini-btn { font-size: 9.5px; padding: 5px 6px; }
.cx-ob-mass-status {
  margin: 0 0 6px;
  font-family: var(--cx-mono);
  font-size: 9.5px;
  color: var(--cx-fg-dim);
  letter-spacing: 0.04em;
  padding: 4px 6px;
  background: color-mix(in oklab, var(--cx-fg) 4%, transparent);
  border-radius: 3px;
}
.cx-ob-updates {
  margin: 4px 0 8px;
  padding: 6px 8px 8px;
  background: color-mix(in oklab, var(--cx-accent) 4%, transparent);
  border: 1px solid var(--cx-accent);
  border-radius: 4px;
}
.cx-ob-updates-h {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--cx-mono);
  font-size: 9.5px; letter-spacing: 0.06em;
  color: var(--cx-accent);
  padding-bottom: 4px;
  border-bottom: 1px solid color-mix(in oklab, var(--cx-accent) 30%, transparent);
}
.cx-ob-updates-h .cx-mini-btn { padding: 0 6px; min-height: 18px; }
.cx-ob-updates-list { list-style: none; margin: 6px 0; padding: 0; max-height: 200px; overflow-y: auto; }
.cx-ob-update-row { padding: 3px 0; }
.cx-ob-update-row label {
  display: grid;
  grid-template-columns: 18px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 6px;
  cursor: pointer;
}
.cx-ob-update-row input { grid-row: 1 / span 2; align-self: center; }
.cx-ob-update-name { font-size: 11px; color: var(--cx-fg); }
.cx-ob-update-meta { font-size: 9px; color: var(--cx-fg-dim); }
.cx-ob-update-row.is-stale .cx-ob-update-name { color: var(--cx-accent); }
.cx-ob-update-row.is-stale .cx-ob-update-meta em { color: color-mix(in oklab, var(--cx-accent) 80%, var(--cx-fg)); font-style: normal; }
.cx-ob-updates-actions { display: flex; justify-content: flex-end; padding-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════════
   SIDE QUEST · Guided tour overlay (Messiah in Prophecy + future quests)
   Full-screen scholarly reading view: sidebar of all cards · current card
   in the middle · debate panel · sticky bottom navigation.
   ═══════════════════════════════════════════════════════════════════════ */
.cx-q-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: grid;
  grid-template-rows: 44px 1fr 52px;
  background: var(--cx-bg, #06080e);
  color: var(--cx-fg);
  font-family: var(--cx-mono, ui-monospace, monospace);
  animation: cx-q-fade 220ms ease;
}
/* Explicit grid placement so extra DOM children (FAB, scrim) don't create implicit rows */
.cx-q-head  { grid-row: 1; }
.cx-q-body  { grid-row: 2; }
.cx-q-foot  { grid-row: 3; }
@keyframes cx-q-fade { from {opacity:0; transform: scale(.99);} to {opacity:1; transform:scale(1);} }

/* ── header ── */
.cx-q-head {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  border-bottom: 1px solid var(--cx-line);
  background: linear-gradient(180deg, color-mix(in oklab, var(--cx-accent) 6%, transparent), transparent);
}
.cx-q-tag {
  font-size: 9px; letter-spacing: 0.18em;
  color: var(--cx-accent);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 50%, transparent);
  padding: 2px 7px;
  border-radius: 3px;
}
.cx-q-title-bar {
  margin: 0;
  font-family: var(--cx-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--cx-fg);
}
.cx-q-progress {
  font-size: 10px; color: var(--cx-fg-dim);
  font-variant-numeric: tabular-nums;
}
.cx-q-close {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent);
  color: var(--cx-fg-dim);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-family: var(--cx-mono);
  font-size: 13px; line-height: 1;
  display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.cx-q-close:hover, .cx-q-close:active {
  color: var(--cx-accent);
  border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 10%, transparent);
}

/* ── body grid ── */
.cx-q-body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}
@media (max-width: 880px) { .cx-q-body { grid-template-columns: 1fr; } .cx-q-sidebar { display: none; } }

/* ── sidebar ── */
.cx-q-sidebar {
  border-right: 1px solid var(--cx-line);
  overflow-y: auto;
  padding: 8px 0;
  background: color-mix(in oklab, var(--cx-fg) 2%, transparent);
}
.cx-q-sect { margin-bottom: 4px; }
.cx-q-sect-h {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-top: 1px solid color-mix(in oklab, var(--cx-line) 60%, transparent);
  color: var(--cx-fg-dim);
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}
.cx-q-sect-h:hover { color: var(--cx-fg); background: color-mix(in oklab, var(--cx-accent) 4%, transparent); }
.cx-q-sect-arr { display: inline-block; width: 10px; color: var(--cx-accent); }
.cx-q-sect-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-q-sect-count { font-size: 9px; color: var(--cx-fg-dim); }
.cx-q-list { list-style: none; margin: 0; padding: 2px 0 6px; }
.cx-q-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 6px 14px 6px 18px;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  color: var(--cx-fg);
  font-family: var(--cx-mono);
  font-size: 11px;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.cx-q-item:hover { background: color-mix(in oklab, var(--cx-accent) 4%, transparent); }
.cx-q-item.is-active {
  background: color-mix(in oklab, var(--cx-accent) 10%, transparent);
  border-left-color: var(--cx-accent);
  color: var(--cx-accent);
}
.cx-q-item.is-studied { color: var(--cx-fg-dim); }
.cx-q-item.is-studied .cx-q-item-title { text-decoration: line-through; opacity: 0.6; }
.cx-q-item-n { font-size: 9.5px; color: var(--cx-fg-dim); font-variant-numeric: tabular-nums; }
.cx-q-item-title { font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-q-item-ref { font-size: 8.5px; color: var(--cx-fg-dim); }
.cx-q-item-check { color: var(--cx-accent); font-size: 10px; }

/* ── main ── */
.cx-q-main {
  overflow-y: auto;
  padding: 32px clamp(20px, 5vw, 64px) 60px;
  background: var(--cx-bg);
}
.cx-q-card {
  max-width: 720px;
  margin: 0 auto;
}
.cx-q-card-h {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--cx-mono);
  font-size: 9.5px; letter-spacing: 0.14em;
  color: var(--cx-fg-dim);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cx-q-card-num {
  color: var(--cx-accent);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 50%, transparent);
  padding: 1px 6px; border-radius: 3px;
}
.cx-q-card-title {
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  font-size: 32px; font-weight: 600;
  color: var(--cx-fg);
  margin: 0 0 18px;
  letter-spacing: 0.005em;
  line-height: 1.2;
}
.cx-q-card-refs {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  background: color-mix(in oklab, var(--cx-fg) 3%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent);
  border-left: 3px solid var(--cx-accent);
  border-radius: 4px;
  margin-bottom: 18px;
}
.cx-q-card-ref-row {
  display: grid; grid-template-columns: 60px 1fr; gap: 12px;
  align-items: baseline;
}
.cx-q-ref-label {
  font-family: var(--cx-mono);
  font-size: 9.5px; letter-spacing: 0.16em;
  color: var(--cx-accent);
  text-transform: uppercase;
}
.cx-q-reflist { font-size: 13px; line-height: 1.5; }
.cx-q-ref {
  color: var(--cx-fg);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in oklab, var(--cx-accent) 60%, transparent);
  cursor: pointer;
  transition: color 120ms ease, border-bottom-color 120ms ease;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 14px;
}
.cx-q-ref:hover {
  color: var(--cx-accent);
  border-bottom-color: var(--cx-accent);
  text-shadow: 0 0 4px var(--cx-accent-glow);
}
.cx-q-sep { color: var(--cx-fg-dim); margin: 0 4px; }
.cx-q-talmud {
  font-size: 11.5px;
  color: var(--cx-fg-dim);
  font-style: italic;
}
.cx-q-card-commentary {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--cx-fg);
  margin: 0 0 28px;
}

/* ── debate ── */
.cx-q-debate {
  max-width: 720px;
  margin: 28px auto 0;
  border: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent);
  border-radius: 4px;
  overflow: hidden;
}
.cx-q-debate-toggle {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: color-mix(in oklab, var(--cx-accent) 4%, transparent);
  border: none;
  color: var(--cx-fg);
  font-family: var(--cx-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}
.cx-q-debate-toggle:hover { background: color-mix(in oklab, var(--cx-accent) 8%, transparent); }
.cx-q-debate-arr { color: var(--cx-accent); width: 14px; }
.cx-q-debate-body {
  padding: 14px 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.cx-q-debate-block h4 {
  margin: 0 0 4px;
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--cx-fg-dim);
  text-transform: uppercase;
}
.cx-q-debate-block p {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 14.5px; line-height: 1.55;
  color: var(--cx-fg);
}
.cx-q-debate-block.is-comeback h4 { color: var(--cx-accent); }
.cx-q-debate-block.is-comeback p {
  border-left: 2px solid var(--cx-accent);
  padding-left: 12px;
}

/* ── footer ── */
.cx-q-foot {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--cx-line);
  background: color-mix(in oklab, var(--cx-bg) 96%, transparent);
}
.cx-q-nav {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent);
  color: var(--cx-fg);
  font-family: var(--cx-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.cx-q-nav:hover:not(:disabled) {
  color: var(--cx-accent);
  border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
}
.cx-q-nav:disabled { opacity: 0.4; cursor: not-allowed; }
.cx-q-mark {
  background: color-mix(in oklab, var(--cx-accent) 6%, transparent);
  border-color: color-mix(in oklab, var(--cx-accent) 40%, transparent);
}
.cx-q-mark.is-on {
  color: var(--cx-accent);
  border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 14%, transparent);
}

/* ── completion screen ── */
.cx-q-completion {
  max-width: 600px; margin: 60px auto 40px;
  text-align: center;
  padding: 40px 20px;
  border: 1px solid var(--cx-accent);
  border-radius: 6px;
  background: color-mix(in oklab, var(--cx-accent) 5%, transparent);
}
.cx-q-completion h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 36px; color: var(--cx-accent);
  margin: 0 0 12px;
}
.cx-q-completion p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16px; line-height: 1.6;
  color: var(--cx-fg);
  margin: 0 0 24px;
}
.cx-q-return {
  background: var(--cx-accent);
  color: var(--cx-bg);
  border: none;
  padding: 10px 24px;
  border-radius: 4px;
  font-family: var(--cx-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.cx-q-return:hover { box-shadow: 0 0 16px var(--cx-accent-glow); }

/* ── Quest mobile + responsive polish ─────────────────────────────── */
.cx-q-side-toggle {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent);
  color: var(--cx-fg-dim);
  width: 32px; height: 32px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px; line-height: 1;
}
.cx-q-side-toggle:hover {
  color: var(--cx-accent);
  border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
}
.cx-q-title-short { display: none; }
.cx-q-title-full  { display: inline; }
/* close button styled at top of file (.cx-q-close) */
/* Mobile/tablet drawer scrim — opaque enough to fully hide the main
   panel content behind the sidebar. The dark theme already has a
   near-black background; a translucent rgba(0,0,0,0.55) reads as a
   dim haze instead of a true modal mask, so we use a near-solid wash
   that snaps the visual focus onto the drawer. */
.cx-q-scrim {
  position: fixed; inset: 0;
  background: color-mix(in oklab, var(--cx-bg) 92%, #000);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1;
  animation: cx-q-fade 160ms ease;
}

/* Desktop: sidebar always shown when is-open (default).
   When closed, hide the sidebar entirely AND collapse the body to a
   single column — otherwise auto-flow places .cx-q-main into the empty
   first track (the sidebar's old slot) and the main column collapses. */
@media (min-width: 881px) {
  .cx-q-overlay:not(.is-side-open) .cx-q-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .cx-q-overlay:not(.is-side-open) .cx-q-sidebar { display: none; }
}

/* Mobile: header collapses, sidebar becomes a slide-in drawer */
@media (max-width: 880px) {
  .cx-q-head { padding: 0 8px; gap: 6px; grid-template-columns: auto auto 1fr auto auto; }
  .cx-q-tag { font-size: 8.5px; padding: 2px 5px; }
  .cx-q-title-bar { font-size: 11px; }
  .cx-q-title-full  { display: none; }
  .cx-q-title-short { display: inline; }
  .cx-q-progress    { font-size: 9.5px; }

  .cx-q-body { grid-template-columns: 1fr !important; }
  .cx-q-sidebar {
    display: none;
    position: fixed;
    top: 44px; bottom: 52px; left: 0;
    width: min(86vw, 320px);
    z-index: 2;
    background: var(--cx-bg);
    border-right: 1px solid var(--cx-accent);
    box-shadow: 8px 0 24px rgba(0,0,0,0.4);
    transform: translateX(-100%);
    transition: transform 220ms ease;
  }
  .cx-q-overlay.is-side-open .cx-q-sidebar {
    display: block;
    transform: translateX(0);
  }
  .cx-q-main {
    padding: 18px clamp(14px, 4vw, 24px) 24px;
  }
  .cx-q-card-title { font-size: 22px; line-height: 1.18; }
  .cx-q-card-commentary { font-size: 15px; }
  .cx-q-card-refs { padding: 10px 12px; }
  .cx-q-card-ref-row { grid-template-columns: 50px 1fr; gap: 8px; }
  .cx-q-ref-label { font-size: 8.5px; }
  .cx-q-reflist { font-size: 12px; }
  .cx-q-ref { font-size: 13px; }
  .cx-q-debate-toggle { font-size: 10px; padding: 12px 14px; }
  .cx-q-debate-block p { font-size: 13.5px; }

  .cx-q-foot {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "mark mark" "prev next";
    gap: 6px;
    padding: 8px 10px env(safe-area-inset-bottom, 8px);
  }
  .cx-q-mark { grid-area: mark; }
  .cx-q-prev { grid-area: prev; }
  .cx-q-next { grid-area: next; }
  .cx-q-nav { min-height: 44px; font-size: 11px; }
}

/* Extra-narrow (320px) */
@media (max-width: 360px) {
  .cx-q-tag { display: none; }
  .cx-q-title-short { font-size: 10.5px; }
}

/* ── Verse drag → Oracle input drop affordance ────────────────────── */
body.cx-verse-dragging .cx-oracle-input {
  outline: 1.5px dashed color-mix(in oklab, var(--cx-accent) 60%, transparent);
  outline-offset: 3px;
  box-shadow: 0 0 16px var(--cx-accent-glow);
}
.cx-oracle-input.is-drop {
  background: color-mix(in oklab, var(--cx-accent) 10%, transparent);
  outline: 1px solid var(--cx-accent);
  outline-offset: -1px;
}

/* ════════════════════════════════════════════════════════════════════════
   iOS Safari polish — applies only on iOS (uses -webkit-touch-callout: none
   feature detection) and to all touch-coarse pointers. Targets:
   · Notch / home-indicator safe areas on full-screen overlays
   · Dynamic viewport so the URL bar collapse doesn't reflow content
   · Rubber-band scroll containment inside modals
   · No font auto-zoom on input focus (font-size ≥16px)
   · Native momentum scrolling on long-list panels
   ═══════════════════════════════════════════════════════════════════════ */

/* Quest overlay — respect notch + home indicator on iPhone */
.cx-q-overlay {
  height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  overscroll-behavior: contain;
}
.cx-q-main, .cx-q-sidebar {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Settings/notes/oracle overlays — same momentum + containment */
.cx-modal, .cx-sheet, .cx-panel, .cx-panes,
.cx-rail-l, .cx-rail-r, .cx-oracle-stream,
.cx-bm-list, .cx-marks-list, .cx-ob-list {
  -webkit-overflow-scrolling: touch;
}

/* Prevent iOS auto-zoom on input focus — Apple zooms any input <16px */
@supports (-webkit-touch-callout: none) {
  input[type="text"], input[type="search"], input[type="password"],
  input[type="email"], input[type="number"], input[type="url"],
  textarea, select {
    font-size: max(16px, 1em);
  }
  /* Quest overlay sits above safe areas — guarantee dynamic viewport */
  .cx-q-overlay { height: -webkit-fill-available; height: 100dvh; }
}

/* Tap targets — iOS Human Interface Guidelines minimum 44×44pt */
@media (hover: none) and (pointer: coarse) {
  .cx-q-close, .cx-q-side-toggle { min-width: 44px; min-height: 44px; }
  .cx-sq-trigger { min-height: 36px; padding: 6px 12px; }
  .cx-sq-glyph { font-size: 14px; }
}

/* QUESTS glyph fallback — ensure ⚔ renders on iOS where mono lacks it */
.cx-sq-card-glyph {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
}

/* ── Linkified Bible references inside panel bodies ───────────────────
   Every match of "Genesis 12:3", "1 Cor 13:4-7" etc. inside Talmud /
   Commentary / Gnosis bodies becomes a clickable jump. Subtle by default,
   accent on hover so it doesn't compete with the prose. */
.cx-pl-ref {
  color: var(--cx-fg);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in oklab, var(--cx-accent) 50%, transparent);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: color 120ms ease, border-bottom-color 120ms ease, text-shadow 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.cx-pl-ref:hover, .cx-pl-ref:active {
  color: var(--cx-accent);
  border-bottom-color: var(--cx-accent);
  text-shadow: 0 0 6px var(--cx-accent-glow);
}

/* ════════════════════════════════════════════════════════════════════════
   Design QA — accessibility + polish that survives any UX-snob audit.
   · Visible focus rings for keyboard users (was missing — :focus-visible
     only, so mouse users still get no halo)
   · Reduced motion support (prefers-reduced-motion)
   · Selection color matches brand accent
   · Caret color uses brand accent
   ═══════════════════════════════════════════════════════════════════════ */

/* Keyboard focus — visible cyan halo on every interactive element. Honors
   the terminal aesthetic: 2px outline, 2px offset, glow on accent color. */
:where(button, a, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
  border-radius: inherit;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--cx-accent) 15%, transparent);
}
/* Inputs already have a border — collapse the offset so it doesn't
   double-stroke. */
:where(input, textarea, select):focus-visible {
  outline-offset: 1px;
}

/* Selection — accent at low alpha keeps contrast on dark theme */
::selection {
  background: color-mix(in oklab, var(--cx-accent) 35%, transparent);
  color: var(--cx-fg);
}

/* Caret — match brand accent on every text input */
input, textarea, [contenteditable] { caret-color: var(--cx-accent); }

/* Reduced motion — disable shimmer, fade, slide animations for users
   who request it (vestibular triggers, accessibility pref) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}



/* ── Install chip · Oracle inline button to install a translation ───── */
.cx-install-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; margin: 0 2px;
  font-family: var(--cx-font-mono, ui-monospace, monospace);
  font-size: 0.78em; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cx-accent, #6db4d6);
  background: color-mix(in oklab, var(--cx-accent, #6db4d6) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-accent, #6db4d6) 45%, transparent);
  border-radius: 4px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  -webkit-tap-highlight-color: transparent;
}
.cx-install-chip:hover {
  background: color-mix(in oklab, var(--cx-accent) 18%, transparent);
  border-color: var(--cx-accent);
  box-shadow: 0 0 8px color-mix(in oklab, var(--cx-accent) 40%, transparent);
}
.cx-install-chip.is-running {
  color: color-mix(in oklab, var(--cx-accent) 70%, var(--cx-fg));
  background: color-mix(in oklab, var(--cx-accent) 12%, transparent);
  cursor: progress;
}
.cx-install-chip.is-done {
  color: color-mix(in oklab, var(--cx-fg) 80%, var(--cx-accent));
  background: transparent;
  border-color: color-mix(in oklab, var(--cx-fg-dim, #88a) 50%, transparent);
  cursor: default;
}
.cx-install-chip.is-err {
  color: color-mix(in oklab, #c66 70%, var(--cx-fg));
  background: color-mix(in oklab, #c66 8%, transparent);
  border-color: color-mix(in oklab, #c66 45%, transparent);
  cursor: default;
}

/* ── Cross-device sync section in Settings ─────────────────────────── */
.cx-sync { display: flex; flex-direction: column; gap: 10px; font-family: var(--cx-mono, ui-monospace, monospace); font-size: 12px; }
.cx-sync-hint { color: var(--cx-fg-dim); margin: 0; line-height: 1.5; font-size: 11.5px; }
.cx-sync-err  { color: #e8775c; margin: 4px 0 0; font-size: 11px; }
.cx-sync-help { font-size: 11px; color: var(--cx-fg-dim); }
.cx-sync-help summary { cursor: pointer; user-select: none; padding: 4px 0; }
.cx-sync-help ol { margin: 6px 0 6px 18px; padding: 0; line-height: 1.55; }
.cx-sync-help code { background: color-mix(in oklab, var(--cx-fg) 8%, transparent); padding: 1px 4px; border-radius: 3px; word-break: break-all; }
.cx-sync-help a { color: var(--cx-accent, #6db4d6); text-decoration: underline; }
.cx-sync-cfg {
  width: 100%; box-sizing: border-box; font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 11px; line-height: 1.45; padding: 8px 10px;
  background: color-mix(in oklab, var(--cx-fg) 4%, transparent);
  color: var(--cx-fg); border: 1px solid var(--cx-line); border-radius: 4px; resize: vertical;
}
.cx-sync-setup, .cx-sync-signin, .cx-sync-active { display: flex; flex-direction: column; gap: 8px; }
.cx-sync-user { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.cx-sync-user b { display: block; font-size: 13px; color: var(--cx-fg); }
.cx-sync-user em { display: block; font-size: 11px; color: var(--cx-fg-dim); font-style: normal; }
.cx-sync-avatar { width: 32px; height: 32px; border-radius: 50%; }
.cx-sync-status { display: flex; gap: 8px; align-items: baseline; font-size: 11.5px; color: var(--cx-fg-dim); }
.cx-sync-status b { color: var(--cx-fg); font-weight: 500; }
.cx-sync-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cx-sync-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--cx-fg-dim); cursor: pointer; user-select: none; }
.cx-sync-auto input { margin: 0; }
.cx-sync-tiny { font-size: 10.5px !important; opacity: 0.75; }

/* personal link row inside connected sync state */
.cx-sync-link { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-top: 1px dashed var(--cx-line); }
.cx-sync-link > span { font-size: 11px; color: var(--cx-fg-dim); }
.cx-sync-link-input {
  width: 100%; box-sizing: border-box; padding: 6px 8px;
  font-family: ui-monospace, monospace; font-size: 11px;
  background: color-mix(in oklab, var(--cx-fg) 4%, transparent);
  color: var(--cx-fg); border: 1px solid var(--cx-line); border-radius: 4px;
}
.cx-sync-help[open] { padding-bottom: 6px; }

/* ── In-app personal-link generator ───────────────────────────────── */
.cx-sync-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.cx-sync-step { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px;
                background: color-mix(in oklab, var(--cx-fg) 3%, transparent);
                border: 1px solid var(--cx-line); border-radius: 6px; }
.cx-sync-step > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cx-sync-step b { font-size: 12px; color: var(--cx-fg); }
.cx-sync-step p { margin: 0; font-size: 11.5px; color: var(--cx-fg-dim); line-height: 1.5; }
.cx-sync-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in oklab, var(--cx-accent, #6db4d6) 22%, transparent);
  color: var(--cx-accent, #6db4d6); font-family: var(--cx-mono);
  font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px;
}
.cx-sync-link-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cx-sync-link-row .cx-sync-link-input { flex: 1; min-width: 200px; }
.cx-sync-join { padding-top: 6px; display: flex; flex-direction: column; gap: 10px; }
.cx-sync-qr-block { display: flex; gap: 14px; align-items: flex-start; }
.cx-sync-qr-block > div { flex: 1; min-width: 0; }
.cx-sync-qr {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  padding: 8px; background: #fff; border: 1px solid var(--cx-line);
  border-radius: 6px; flex-shrink: 0;
}
.cx-sync-qr img { display: block; image-rendering: pixelated; }
.cx-sync-qr-link {
  font-family: ui-monospace, monospace; font-size: 9.5px;
  color: var(--cx-fg-dim); word-break: break-all; text-align: center;
  text-decoration: none; max-width: 180px;
}
.cx-sync-qr-fallback { font-family: ui-monospace, monospace; font-size: 10px; padding: 8px; word-break: break-all; }

/* connected user · link section padding */
.cx-sync-link { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px dashed var(--cx-line); }

/* sync titlebar + help button */
.cx-sync-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cx-sync-titlebar > span { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.55; }
.cx-sync-help-btn {
  appearance: none; border: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in oklab, var(--cx-accent, #6db4d6) 18%, transparent);
  color: var(--cx-accent, #6db4d6);
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 12px; font-weight: 700; line-height: 1;
  cursor: pointer; transition: background 120ms, transform 120ms;
}
.cx-sync-help-btn:hover { background: color-mix(in oklab, var(--cx-accent) 32%, transparent); transform: scale(1.08); }

/* sync help modal */
.cx-syncmod-scrim {
  position: fixed; inset: 0; z-index: 2147483647;
  background: rgba(6, 8, 14, 0.65);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: cx-syncmod-fade 200ms ease;
}
@keyframes cx-syncmod-fade { from { opacity: 0 } to { opacity: 1 } }
.cx-syncmod {
  background: var(--cx-bg, #0a0a0a);
  color: var(--cx-fg, #e7e2d6);
  border: 1px solid var(--cx-line, rgba(255,255,255,0.08));
  border-radius: 14px;
  width: min(640px, 100%);
  max-height: 86dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: cx-syncmod-rise 240ms cubic-bezier(.3,.7,.4,1);
}
@keyframes cx-syncmod-rise { from { opacity: 0; transform: translateY(12px) scale(.985) } to { opacity: 1; transform: none } }
.cx-syncmod-hd {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px 12px 20px;
  border-bottom: 1px solid var(--cx-line);
}
.cx-syncmod-hd b { font-size: 14px; font-weight: 600; letter-spacing: 0.005em; }
.cx-syncmod-x {
  appearance: none; border: 0; background: transparent;
  color: var(--cx-fg-dim, #6b7785); width: 28px; height: 28px;
  border-radius: 6px; cursor: pointer; font-size: 14px;
}
.cx-syncmod-x:hover { background: color-mix(in oklab, var(--cx-fg) 8%, transparent); color: var(--cx-fg); }
.cx-syncmod-body {
  padding: 18px 22px 24px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  font-family: var(--cx-sans, -apple-system, system-ui, sans-serif);
  font-size: 13px; line-height: 1.55;
}
.cx-syncmod-body section { display: flex; flex-direction: column; gap: 4px; }
.cx-syncmod-body h4 {
  margin: 0 0 4px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cx-accent, #6db4d6);
}
.cx-syncmod-body p { margin: 0; color: var(--cx-fg-soft, #c9d4dc); }
.cx-syncmod-body ul, .cx-syncmod-body ol { margin: 4px 0 0 20px; padding: 0; color: var(--cx-fg-soft, #c9d4dc); }
.cx-syncmod-body li { margin-bottom: 4px; }
.cx-syncmod-body code {
  background: color-mix(in oklab, var(--cx-fg) 8%, transparent);
  padding: 1px 5px; border-radius: 3px;
  font-family: ui-monospace, monospace; font-size: 11.5px;
}
.cx-syncmod-aside {
  margin-top: 6px !important;
  padding: 8px 10px;
  background: color-mix(in oklab, var(--cx-accent, #6db4d6) 6%, transparent);
  border-left: 2px solid var(--cx-accent, #6db4d6);
  border-radius: 0 4px 4px 0;
  font-size: 12px;
}
@media (max-width: 700px) {
  .cx-syncmod { border-radius: 12px 12px 0 0; max-height: 92dvh; align-self: flex-end; width: 100%; }
  .cx-syncmod-body { font-size: 14px; padding: 16px 18px 24px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Phase 0.6 — Keyboard navigation
   · Flash highlight when J/K scrolls to a verse
   · Suppress focus ring on mouse click (focus-visible only)
   · Shortcut overlay modal styles
   ═══════════════════════════════════════════════════════════════════════ */

/* Quick accent flash on the verse that just received a J/K scroll. */
.cx-kbd-flash {
  animation: cx-kbd-flash 220ms ease-out;
  border-radius: 4px;
}
@keyframes cx-kbd-flash {
  0%   { background: color-mix(in oklab, var(--cx-accent) 28%, transparent); }
  100% { background: transparent; }
}

/* Suppress outline when focus came from a mouse click — keyboard users
   still get the accent ring from the :focus-visible block earlier. */
:where(button, a, [role="button"]):focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Shortcut overlay (triggered by ?) */
.cx-kbd-overlay {
  position: fixed; inset: 0; z-index: 2147483647;
  background: rgba(6, 8, 14, 0.65);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: cx-kbd-fade 160ms ease;
}
@keyframes cx-kbd-fade { from { opacity: 0 } to { opacity: 1 } }
.cx-kbd-modal {
  background: var(--cx-bg, #0a0a0a);
  color: var(--cx-fg, #e7e2d6);
  border: 1px solid var(--cx-line, rgba(255,255,255,0.08));
  border-radius: 14px;
  width: min(560px, 100%);
  max-height: 86dvh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: cx-kbd-rise 200ms cubic-bezier(.3,.7,.4,1);
}
@keyframes cx-kbd-rise { from { opacity: 0; transform: translateY(8px) scale(.985) } to { opacity: 1; transform: none } }
.cx-kbd-hd {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px 10px 18px;
  border-bottom: 1px solid var(--cx-line);
}
.cx-kbd-hd b { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--cx-accent); }
.cx-kbd-x {
  appearance: none; border: 0; background: transparent;
  color: var(--cx-fg-dim, #6b7785); width: 28px; height: 28px;
  border-radius: 6px; cursor: pointer; font-size: 16px;
}
.cx-kbd-x:hover { background: color-mix(in oklab, var(--cx-fg) 8%, transparent); color: var(--cx-fg); }
.cx-kbd-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 18px;
  padding: 16px 20px;
  overflow-y: auto;
  font-family: var(--cx-sans, -apple-system, system-ui, sans-serif);
  font-size: 13px;
}
.cx-kbd-key {
  display: inline-block;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 8px;
  background: color-mix(in oklab, var(--cx-accent) 12%, transparent);
  color: var(--cx-accent);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 40%, transparent);
  border-radius: 4px;
  min-width: 28px;
  text-align: center;
  white-space: nowrap;
}
.cx-kbd-lbl { color: var(--cx-fg-soft, var(--cx-fg)); align-self: center; }
.cx-kbd-ft {
  padding: 10px 18px 14px;
  border-top: 1px solid var(--cx-line);
  font-size: 11.5px;
  color: var(--cx-fg-dim);
  text-align: center;
}
.cx-kbd-ft .cx-kbd-key { font-size: 10.5px; padding: 1px 6px; }
@media (max-width: 520px) {
  .cx-kbd-modal { border-radius: 12px 12px 0 0; max-height: 92dvh; align-self: flex-end; width: 100%; }
  .cx-kbd-grid { font-size: 14px; padding: 14px 16px; }
}

/* =====================================================================
   Micro-screen support (Phase 0.5) — tiny phones, foldables, embeds
   320px = iPhone SE width. 280px = Galaxy Fold inner.
   ===================================================================== */
@media (max-width: 320px) {
  /* Collapse rails entirely; mobile FABs remain the entry point */
  .cx-rail-l, .cx-rail-r { display: none; }

  /* Reader body: tight horizontal padding */
  .cx-reader-body { padding-left: 8px; padding-right: 8px; }

  /* Nav bar: stack vertically, center nav links */
  .cx-reader-head {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    text-align: center;
  }
  .cx-reader-head a,
  .cx-reader-head .cx-nav,
  .cx-reader-head .cx-nav-links { justify-content: center; text-align: center; }

  /* Font floor for verse text */
  .cx-verse, .cx-verse-row { font-size: clamp(13px, 4.2vw, 16px); }

  /* Verse numbers: smaller */
  .cx-vnum { font-size: 9px; }

  /* Aa popover: full-width minus 16px gutter, aligned to viewport edge */
  .cx-vp-pop {
    left: 8px;
    right: 8px;
    min-width: 0;
    width: auto;
    max-width: calc(100vw - 16px);
  }

  /* Panel tabs: smaller padding, allow horizontal scroll */
  .cx-tab { padding: 4px 6px; }
  .cx-tabs, .cx-tab-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure 44px tap targets */
  button { min-height: 44px; }

  /* Hide decorative trigger dot */
  .cx-vp-trigger-dot { display: none; }
}

@media (max-width: 480px) {
  .cx-tabs { display: flex !important; height: 40px; }
  .cx-tabs .cx-tab-num { display: none; }
  .cx-tabs .cx-tab { flex: 0 0 36px; }
  .cx-tabs .cx-tab.is-active { max-width: 60vw; }
}

@media (max-width: 280px) {
  /* Even tighter padding */
  .cx-reader-body { padding-left: 4px; padding-right: 4px; }

  /* Hide chapter number badge in nav — just book name + arrows */
  .cx-reader-head .cx-chap-badge,
  .cx-reader-head .cx-chapter-badge,
  .cx-chap-num { display: none; }

  /* Font floor */
  .cx-verse, .cx-verse-row { font-size: clamp(12px, 4.5vw, 15px); }

  /* Mobile FABs: shrink to 40x40 (sub-HIG, acceptable at extreme width) */
  .cx-mobile-fab { width: 40px; height: 40px; min-height: 40px; }

  /* Reduce verse spacing */
  .cx-verse + .cx-verse { margin-top: 6px; }
  .cx-verse-row + .cx-verse-row { margin-top: 6px; }
}

/* =====================================================================
   Print stylesheet — readable scripture on paper
   ===================================================================== */
@media print {
  /* Hide all chrome */
  .cx-rail-l,
  .cx-rail-r,
  .cx-pane,
  .cx-vp-pop,
  .cx-mobile-fab,
  .cx-footer,
  .cx-footer-cluster,
  .cx-reader-head,
  .cx-side-toggle,
  .cx-quick,
  .cx-repo-toggle,
  .cx-kbd-modal,
  .cx-kbd-ft,
  .cx-oracle-log,
  .cx-tabs,
  .cx-tab-row,
  .cx-tab-body,
  nav,
  header,
  footer,
  .cx-rail-resize { display: none !important; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-family: Georgia, "Times New Roman", Times, serif;
  }

  .cx-reader-body,
  .cx-reader-body * {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }

  .cx-reader-body {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .cx-verse-row,
  .cx-verse {
    page-break-inside: avoid;
    break-inside: avoid;
    border: none !important;
  }
}

/* ── Help Wiki ─────────────────────────────────────────────────────────────
   Lives inside the Tweaks panel. Dark CODEX aesthetic, monospace badges,
   accent borders, generous whitespace. Color tokens (--cx-accent, etc.)
   come from :root in the dark theme block. Light theme falls through fine
   via the same custom properties. */
.cx-help {
  display: flex; flex-direction: column; gap: 14px;
  font-family: var(--cx-sans);
  color: var(--cx-fg);
  /* Dynamic column width — generous on big displays, sane on phones.
     Was hard-capped at 760px which made the wiki feel claustrophobic
     on a Studio Display. */
  max-width: clamp(560px, 88%, 1080px);
  margin: 0 auto;
  width: 100%;
  /* Fill the parent (.twk-body) so its overflow can take effect.
     Without explicit height/min-height the column can collapse on tall
     panels and content above the fold appears un-scrollable. */
  flex: 1 1 auto;
  min-height: 0;
}
/* When help is mounted inside the tweaks panel body, ensure that body
   itself flexes properly and scroll works. .twk-body already has
   overflow-y:auto + min-height:0 but its child needs to participate. */
.twk-body > .cx-help { height: 100%; }
.cx-help-loading,
.cx-help-error {
  padding: 24px 12px;
  text-align: center;
  color: var(--cx-fg-dim);
  font-family: var(--cx-mono);
  font-size: 12px;
}
.cx-help-error { color: var(--cx-accent-warn, #ff7a7a); }

.cx-help-head {
  display: flex; flex-direction: column; gap: 4px;
  padding: 2px 0 6px;
  border-bottom: .5px solid var(--cx-line);
}
.cx-help-title {
  font-family: var(--cx-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--cx-accent);
}
.cx-help-sub {
  font-family: var(--cx-mono);
  font-size: 10.5px;
  color: var(--cx-fg-dim);
  letter-spacing: .04em;
}

.cx-help-search-wrap {
  display: flex; gap: 8px; align-items: stretch;
}
.cx-help-search {
  flex: 1; min-width: 0;
  appearance: none;
  background: var(--cx-bg-2);
  color: var(--cx-fg);
  border: .5px solid var(--cx-line);
  border-radius: 8px;
  padding: 0 14px;
  height: 40px;
  font-family: var(--cx-sans);
  font-size: 14px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.cx-help-search::placeholder { color: var(--cx-fg-dim); }
.cx-help-search:focus {
  border-color: var(--cx-accent);
  box-shadow: 0 0 0 3px var(--cx-accent-glow, rgba(126,224,255,.15));
}
.cx-help-ask {
  appearance: none;
  background: var(--cx-accent);
  color: var(--cx-bg);
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  height: 40px; min-height: 40px;
  font-family: var(--cx-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  cursor: pointer;
  transition: opacity .12s, transform .08s;
  white-space: nowrap;
}
.cx-help-ask:hover:not(:disabled) { opacity: .9; }
.cx-help-ask:active:not(:disabled) { transform: translateY(1px); }
.cx-help-ask:disabled { opacity: .35; cursor: not-allowed; }

.cx-help-predict {
  list-style: none; margin: 0; padding: 4px;
  background: var(--cx-bg-2);
  border: .5px solid var(--cx-line);
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.cx-help-predict-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0; border-radius: 6px;
  padding: 9px 10px;
  color: var(--cx-fg);
  text-align: left;
  cursor: pointer;
  font-family: var(--cx-sans);
  font-size: 13.5px;
  transition: background .1s;
}
.cx-help-predict-row:hover { background: color-mix(in oklab, var(--cx-accent) 12%, transparent); }
.cx-help-predict-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cx-help-badge {
  display: inline-block;
  font-family: var(--cx-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cx-accent);
  border: .5px solid var(--cx-line-strong);
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.cx-help-badge-sm { font-size: 8.5px; padding: 2px 6px; }
.cx-help-badge-accent {
  color: var(--cx-bg);
  background: var(--cx-accent);
  border-color: var(--cx-accent);
}

.cx-help-oracle {
  border: .5px solid var(--cx-accent);
  border-left-width: 3px;
  background: color-mix(in oklab, var(--cx-accent) 6%, var(--cx-bg-2));
  border-radius: 8px;
  padding: 10px 14px 14px;
  animation: cx-help-fade-in .18s ease-out;
}
.cx-help-oracle.is-error { border-color: var(--cx-accent-warn, #ff7a7a); }
.cx-help-oracle-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.cx-help-oracle-x {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  color: var(--cx-fg-dim); font-size: 14px; padding: 4px 8px;
  border-radius: 4px;
}
.cx-help-oracle-x:hover { color: var(--cx-fg); background: var(--cx-line); }
.cx-help-oracle-body {
  font-family: var(--cx-sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cx-fg);
}
@keyframes cx-help-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.cx-help-browse {
  display: flex; flex-direction: column; gap: 6px;
}
.cx-help-cat {
  border: .5px solid var(--cx-line);
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in oklab, var(--cx-bg-2) 60%, transparent);
}
.cx-help-cat-head {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  appearance: none; background: transparent; border: 0;
  padding: 11px 14px;
  color: var(--cx-fg);
  cursor: pointer;
  text-align: left;
  font-family: var(--cx-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .1s;
}
.cx-help-cat-head:hover { background: color-mix(in oklab, var(--cx-accent) 6%, transparent); }
.cx-help-cat-caret { color: var(--cx-fg-dim); width: 12px; font-size: 10px; }
.cx-help-cat-name { flex: 1; }
.cx-help-cat-count {
  font-family: var(--cx-mono);
  font-size: 10px;
  color: var(--cx-fg-dim);
  font-weight: 500;
  letter-spacing: .05em;
}
.cx-help-cat-list {
  list-style: none; margin: 0; padding: 2px 6px 8px;
  display: flex; flex-direction: column; gap: 1px;
}
.cx-help-row {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%;
  appearance: none; background: transparent; border: 0; border-radius: 6px;
  padding: 9px 12px;
  color: var(--cx-fg);
  cursor: pointer;
  text-align: left;
  transition: background .1s;
}
.cx-help-row:hover { background: color-mix(in oklab, var(--cx-accent) 10%, transparent); }
.cx-help-row-title {
  font-family: var(--cx-sans);
  font-size: 13.5px;
  font-weight: 500;
}
.cx-help-row-tags {
  font-family: var(--cx-mono);
  font-size: 10px;
  color: var(--cx-fg-dim);
  letter-spacing: .03em;
}

.cx-help-bar {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 6px;
  border-bottom: .5px solid var(--cx-line);
}
.cx-help-back {
  appearance: none;
  background: transparent;
  color: var(--cx-accent);
  border: .5px solid var(--cx-line-strong);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: var(--cx-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  cursor: pointer;
  transition: background .1s;
}
.cx-help-back:hover { background: color-mix(in oklab, var(--cx-accent) 12%, transparent); }
.cx-help-article {
  font-family: var(--cx-sans);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--cx-fg);
  max-width: 64ch;
  margin: 0 auto;
  width: 100%;
  padding: 6px 4px 8px;
}
.cx-help-article h1 {
  font-family: var(--cx-serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--cx-fg);
  margin: 12px 0 8px;
  line-height: 1.2;
}
.cx-help-article h2 {
  font-family: var(--cx-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cx-accent);
  margin: 28px 0 8px;
  padding-bottom: 4px;
  border-bottom: .5px solid var(--cx-line);
}
.cx-help-article h3 {
  font-family: var(--cx-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--cx-fg);
  margin: 20px 0 6px;
}
.cx-help-article p { margin: 10px 0; }
.cx-help-article ul,
.cx-help-article ol { margin: 8px 0 12px; padding-left: 22px; }
.cx-help-article li { margin: 4px 0; }
.cx-help-article strong { color: var(--cx-fg); font-weight: 600; }
.cx-help-article em { color: var(--cx-accent-2, var(--cx-fg)); font-style: italic; }
.cx-help-article code {
  font-family: var(--cx-mono);
  font-size: 12.5px;
  background: var(--cx-bg-2);
  border: .5px solid var(--cx-line);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--cx-accent);
}
.cx-help-article a {
  color: var(--cx-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--cx-accent) 40%, transparent);
  text-underline-offset: 2px;
}
.cx-help-article a:hover { text-decoration-color: var(--cx-accent); }

.cx-help-oracle-body h1,
.cx-help-oracle-body h2,
.cx-help-oracle-body h3 {
  font-family: var(--cx-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cx-accent);
  margin: 14px 0 4px;
}
.cx-help-oracle-body p { margin: 6px 0; }
.cx-help-oracle-body ul,
.cx-help-oracle-body ol { margin: 6px 0; padding-left: 20px; }
.cx-help-oracle-body code {
  font-family: var(--cx-mono);
  font-size: 12px;
  background: var(--cx-bg);
  border: .5px solid var(--cx-line);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--cx-accent);
}
.cx-help-oracle-body strong { color: var(--cx-accent); font-weight: 700; }

.cx-help-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 4px 4px;
  border-top: .5px solid var(--cx-line);
  margin-top: 16px;
}
.cx-help-tag {
  font-family: var(--cx-mono);
  font-size: 10px;
  color: var(--cx-fg-dim);
  letter-spacing: .04em;
}

.cx-help-foot {
  text-align: center;
  font-family: var(--cx-mono);
  font-size: 10px;
  color: var(--cx-fg-dim);
  padding: 8px 0 4px;
  letter-spacing: .04em;
}
.cx-help-foot kbd {
  font-family: var(--cx-mono);
  font-size: 9.5px;
  background: var(--cx-bg-2);
  border: .5px solid var(--cx-line);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--cx-fg);
  margin: 0 2px;
}

@media (max-width: 700px) {
  .cx-help-article { font-size: 15px; }
  .cx-help-article h1 { font-size: 24px; }
  .cx-help-search { font-size: 16px; /* prevents iOS zoom on focus */ }
}


/* ===== AI Model Selector (multi-provider) ===== */
.cx-tp-provider { display: flex; flex-direction: column; gap: 8px; }
.cx-tp-provider-seg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  background: var(--cx-bg-dim, rgba(0,0,0,.18));
  border: 1px solid var(--cx-line, rgba(255,255,255,.08));
  border-radius: 8px; padding: 3px;
}
.cx-tp-provider-btn {
  appearance: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 4px; border-radius: 6px;
  background: transparent; color: var(--cx-fg-dim, #9ab);
  font: inherit; line-height: 1.1;
  transition: background .12s, color .12s;
}
.cx-tp-provider-btn b { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.cx-tp-provider-btn i { font-size: 10px; font-style: normal; opacity: .7; }
.cx-tp-provider-btn:hover:not(.is-off) { background: rgba(255,255,255,.05); color: var(--cx-fg, #cde); }
.cx-tp-provider-btn.is-on {
  background: var(--cx-accent-bg, rgba(126,224,255,.16));
  color: var(--cx-accent, #7ee0ff);
  box-shadow: 0 0 0 1px var(--cx-accent, #7ee0ff) inset;
}
.cx-tp-provider-btn.is-off { opacity: .42; cursor: not-allowed; }

.cx-tp-model-row { display: flex; align-items: center; gap: 8px; }
.cx-tp-model-lbl { font-size: 11px; color: var(--cx-fg-dim, #9ab); min-width: 40px; }
.cx-tp-model-sel {
  flex: 1; appearance: none; min-height: 28px; padding: 4px 8px;
  background: var(--cx-bg-dim, rgba(0,0,0,.22));
  border: 1px solid var(--cx-line, rgba(255,255,255,.08));
  border-radius: 6px; color: var(--cx-fg, #cde); font: inherit;
}
.cx-tp-model-sel:disabled { opacity: .5; }

.cx-tp-key { display: flex; flex-direction: column; gap: 4px; }
.cx-tp-key-lbl {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; color: var(--cx-fg-dim, #9ab);
}
.cx-tp-key-msg { font-style: normal; font-size: 10px; }
.cx-tp-key-msg.is-ok  { color: #8de8a8; }
.cx-tp-key-msg.is-err { color: #ff8291; }
.cx-tp-key-row { display: flex; gap: 4px; }
.cx-tp-key-input {
  flex: 1; min-width: 0; min-height: 28px; padding: 4px 8px;
  background: var(--cx-bg-dim, rgba(0,0,0,.22));
  border: 1px solid var(--cx-line, rgba(255,255,255,.08));
  border-radius: 6px; color: var(--cx-fg, #cde); font: inherit;
}
.cx-tp-key-input:focus { outline: none; border-color: var(--cx-accent, #7ee0ff); }
.cx-tp-key-btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 0 12px; min-height: 28px; border-radius: 6px;
  background: var(--cx-accent, #7ee0ff); color: #001018;
  font: inherit; font-weight: 600;
}
.cx-tp-key-btn:disabled { opacity: .5; cursor: not-allowed; }

.cx-tp-test-row { display: flex; align-items: center; gap: 8px; }
.cx-tp-test-btn {
  appearance: none; cursor: pointer;
  padding: 4px 10px; border-radius: 6px;
  background: transparent; color: var(--cx-fg-dim, #9ab);
  border: 1px solid var(--cx-line, rgba(255,255,255,.12));
  font: inherit; font-size: 11px;
}
.cx-tp-test-btn:hover:not(:disabled) { color: var(--cx-fg, #cde); border-color: var(--cx-accent, #7ee0ff); }
.cx-tp-test-btn:disabled { opacity: .4; cursor: not-allowed; }
.cx-tp-test-msg { font-size: 10px; }
.cx-tp-test-msg.is-ok  { color: #8de8a8; }
.cx-tp-test-msg.is-err { color: #ff8291; }

/* Engine badge that appears in the Oracle header */
.cx-tp-engine-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(255,255,255,.06);
  color: var(--cx-fg-dim, #9ab);
  border: 1px solid var(--cx-line, rgba(255,255,255,.08));
}
.cx-tp-engine-anthropic { color: #c7a9ff; border-color: rgba(199,169,255,.3); }
.cx-tp-engine-xai       { color: #7ee0ff; border-color: rgba(126,224,255,.3); }
.cx-tp-engine-ollama    { color: #8de8a8; border-color: rgba(141,232,168,.3); }

/* =====================================================================
   Global subtle scrollbars — kill the chunky native OS bars everywhere.
   Covers any scrollable container we may have missed in targeted rules.
   ===================================================================== */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--cx-fg-dim) 22%, transparent) transparent;
}
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--cx-fg-dim) 22%, transparent);
  border-radius: 2px;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--cx-fg-dim) 50%, transparent);
}
*::-webkit-scrollbar-corner { background: transparent; }

/* Auto-hide scrollbars. scrollbar-gutter: stable was reserving a 4px
   track and showing a phantom vertical line at the right edge on wide
   displays — drop the reservation and instead make the thumb fully
   transparent at rest, fading in only on hover. */
.cx-rail-r, .cx-rail-l, .cx-pane, .cx-reader-body,
.cx-bm-list, .cx-tp-list, .cx-oracle-log, .cx-cf-body,
.cx-help-body, .cx-help-results,
.cx-gnosis-card, .cx-talmud-card, .cx-commentary-card, .cx-gematria-card {
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 200ms ease;
}
.cx-rail-r:hover, .cx-rail-l:hover, .cx-pane:hover, .cx-reader-body:hover,
.cx-bm-list:hover, .cx-tp-list:hover, .cx-oracle-log:hover, .cx-cf-body:hover,
.cx-help-body:hover, .cx-help-results:hover,
.cx-gnosis-card:hover, .cx-talmud-card:hover, .cx-commentary-card:hover, .cx-gematria-card:hover {
  scrollbar-color: color-mix(in oklab, var(--cx-fg-dim) 22%, transparent) transparent;
}
/* Body never scrolls — app is full-viewport */
html, body { overflow: hidden; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ──────────────────────────────────────────────────────────────────────────
 * BEGIN cx-help-trans-* — Help Wiki AI translation UI (appended 2026-05-17)
 * Owned by help.jsx. Safe to delete the entire block below if the translate
 * feature is removed. Do NOT interleave with the .cx-help-* block above.
 * ────────────────────────────────────────────────────────────────────────── */

.cx-help-trans-wrap {
  position: relative;
  margin-left: auto;
}
.cx-help-trans-toggle {
  background: transparent;
  border: 1px solid var(--cx-line, rgba(255,255,255,0.15));
  color: var(--cx-fg, #e9eef6);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.cx-help-trans-toggle:hover {
  border-color: var(--cx-accent, #7fd1ff);
  color: var(--cx-accent, #7fd1ff);
}
.cx-help-trans-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  min-width: 180px;
  background: var(--cx-bg-elev, #0d1320);
  border: 1px solid var(--cx-line, rgba(255,255,255,0.15));
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  max-height: 320px;
  overflow-y: auto;
}
.cx-help-trans-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--cx-fg, #e9eef6);
  font: inherit;
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
}
.cx-help-trans-item:hover { background: rgba(127,209,255,0.08); }
.cx-help-trans-item.is-active { color: var(--cx-accent, #7fd1ff); }
.cx-help-trans-cached {
  color: var(--cx-accent, #7fd1ff);
  font-size: 10px;
  opacity: 0.8;
}

.cx-help-trans-badge {
  font-size: 11px;
  opacity: 0.7;
  margin: 6px 0 12px;
  padding: 4px 8px;
  border-left: 2px solid var(--cx-accent, #7fd1ff);
  background: rgba(127,209,255,0.04);
}
.cx-help-trans-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--cx-accent, #7fd1ff);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
.cx-help-trans-err { color: #ff9b9b; }

.cx-help-trans-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 16px;
  color: var(--cx-fg-dim, rgba(233,238,246,0.6));
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cx-help-trans-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(127,209,255,0.18);
  border-top-color: var(--cx-accent, #7fd1ff);
  border-radius: 50%;
  animation: cx-help-trans-spin 0.9s linear infinite;
}
@keyframes cx-help-trans-spin {
  to { transform: rotate(360deg); }
}

.cx-help-row-langs {
  display: inline-block;
  font-size: 10px;
  opacity: 0.6;
  margin-left: 8px;
  color: var(--cx-accent, #7fd1ff);
}

/* ──────────────────────────────────────────────────────────────────────────
 * END cx-help-trans-*
 * ────────────────────────────────────────────────────────────────────────── */

/* =====================================================================
   Normie Toggle — "translate for normies" button on esoteric Gnosis cards.
   Works across every i18n language. Cached per text+lang.
   ===================================================================== */
.cx-normie { margin-top: 8px; }
.cx-normie-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent;
  border: 1px solid color-mix(in oklab, #c7a9ff 30%, transparent);
  color: color-mix(in oklab, #c7a9ff 80%, var(--cx-fg) 20%);
  padding: 3px 9px;
  font-family: var(--cx-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
  opacity: 0.72;
}
.cx-normie-btn:hover {
  opacity: 1;
  background: color-mix(in oklab, #c7a9ff 8%, transparent);
  border-color: color-mix(in oklab, #c7a9ff 55%, transparent);
}
.cx-normie-btn.is-open {
  opacity: 1;
  background: color-mix(in oklab, #c7a9ff 12%, transparent);
  border-color: color-mix(in oklab, #c7a9ff 70%, transparent);
}
.cx-normie-out {
  margin-top: 8px;
  padding: 10px 12px;
  border-left: 2px solid color-mix(in oklab, #c7a9ff 50%, transparent);
  background: color-mix(in oklab, #c7a9ff 5%, transparent);
  border-radius: 0 4px 4px 0;
  font-family: var(--cx-sans, system-ui);
  font-size: calc(var(--cx-fs) * 0.85);
  line-height: 1.55;
  color: var(--cx-fg);
  animation: cx-normie-in 220ms ease-out;
}
.cx-normie-out p { margin: 0; }
.cx-normie-out em { font-style: italic; opacity: 0.7; }
.cx-normie-err { color: #ff8291; }
@keyframes cx-normie-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ===== Full-text Search (Phase 1.2) ===== */
.cx-search-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  background: color-mix(in oklab, #000 55%, transparent);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 64px 20px 20px;
  animation: cx-search-fade 140ms ease;
}
@keyframes cx-search-fade { from { opacity: 0; } to { opacity: 1; } }
.cx-search-modal {
  width: min(540px, 100%);
  background: var(--cx-bg, #0a0a0a);
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  box-shadow: 0 28px 80px rgba(0,0,0,0.65),
              0 0 0 1px color-mix(in oklab, var(--cx-accent) 15%, transparent);
  overflow: hidden;
  animation: cx-search-pop 220ms cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 100px);
}
@keyframes cx-search-pop {
  from { opacity: 0; transform: translateY(-10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cx-search-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--cx-line);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--cx-accent) 5%, transparent), transparent);
}
.cx-search-prompt {
  font-family: var(--cx-mono, ui-monospace, monospace);
  color: var(--cx-accent);
  font-size: 16px; line-height: 1;
}
.cx-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--cx-fg, #e5e5e5);
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 14px;
  padding: 4px 0;
}
.cx-search-input::placeholder { color: var(--cx-fg-dim, #6b7785); }
.cx-search-kbd {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 9.5px; letter-spacing: 0.18em;
  color: var(--cx-fg-dim);
  border: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent);
  border-radius: 4px;
  padding: 2px 6px;
}
.cx-search-results {
  list-style: none; margin: 0; padding: 4px 0;
  overflow-y: auto;
  flex: 1;
}
.cx-search-row {
  padding: 8px 14px;
  cursor: pointer;
  border-left: 2px solid transparent;
  display: flex; flex-direction: column; gap: 3px;
}
.cx-search-row:hover {
  background: color-mix(in oklab, var(--cx-accent) 5%, transparent);
}
.cx-search-row.is-sel {
  background: color-mix(in oklab, var(--cx-accent) 9%, transparent);
  border-left-color: var(--cx-accent);
}
.cx-search-ref {
  font-size: 12.5px;
  color: var(--cx-fg);
  display: flex; align-items: baseline; gap: 6px;
}
.cx-search-trans {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--cx-accent);
  opacity: 0.85;
}
.cx-search-snippet {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--cx-fg-dim, #97a3b0);
}
.cx-search-snippet mark {
  background: color-mix(in oklab, var(--cx-accent) 35%, transparent);
  color: var(--cx-fg);
  padding: 0 2px;
  border-radius: 2px;
}
.cx-search-empty {
  padding: 22px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--cx-fg-dim);
}
.cx-search-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--cx-line);
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: 0.08em;
  color: var(--cx-fg-dim);
  display: flex; justify-content: space-between; align-items: center;
}
.cx-search-hint { opacity: 0.8; }

/* =====================================================================
   Reels (Phase 2.6) — endless scriptural scroll. TikTok-shape for scripture.
   ===================================================================== */
.cx-reels-pane {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
  position: relative;
}
.cx-reels-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-bottom: .5px solid var(--cx-line);
  font-family: var(--cx-mono); font-size: 10.5px; letter-spacing: .18em;
}
.cx-reels-title { color: var(--cx-fg-dim); }
.cx-reels-fs {
  background: transparent; border: none; color: var(--cx-fg-dim);
  font-size: 14px; cursor: pointer; padding: 6px 10px;
  min-width: 32px; min-height: 32px;
  border-radius: 6px; transition: color 120ms, background 120ms;
}
.cx-reels-fs:hover { color: var(--cx-accent); background: color-mix(in oklab, var(--cx-accent) 8%, transparent); }
.cx-reels-empty {
  padding: 40px 12px; text-align: center;
  color: var(--cx-fg-dim); font-family: var(--cx-mono); font-size: 11px;
  letter-spacing: .1em;
}

.cx-reels {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
.cx-reels.is-fullscreen {
  position: fixed; inset: 0; z-index: 2147483647;
  background: #06080e;
}
.cx-reels-overlay {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  z-index: 2147483646;
  background: #06080e;
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cx-reels-overlay .cx-reels.is-fullscreen {
  position: relative; inset: auto;
  flex: 1 1 auto; width: 100%; height: 100%;
}
.cx-reels-close {
  position: absolute; top: 18px; right: 18px; z-index: 10;
  background: rgba(0,0,0,.5); color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 18px; cursor: pointer; line-height: 1;
}
.cx-reels-scroll {
  flex: 1 1 auto; overflow-y: auto; min-height: 0;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.cx-reels-scroll::-webkit-scrollbar { display: none; }
.cx-reels-slot {
  position: relative;
  scroll-snap-align: start; scroll-snap-stop: always;
  height: 100%; min-height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: stretch;
  padding: 24px 18px 80px;
}
.cx-reels.is-fullscreen .cx-reels-slot { padding: 60px 40px 100px; }
.cx-reel-typebadge {
  position: absolute; top: 16px; left: 16px;
  font-family: var(--cx-mono); font-size: 9.5px;
  letter-spacing: .22em; color: var(--cx-fg-dim);
  text-transform: uppercase; opacity: .8;
  z-index: 5;
}
.cx-reels.is-fullscreen .cx-reel-typebadge { top: 28px; left: 28px; }

.cx-reels-dots {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none; z-index: 5;
}
.cx-reels-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  transition: background 200ms, transform 200ms;
}
.cx-reels-dot.is-on {
  background: var(--cx-accent);
  transform: scale(1.5);
}

.cx-reel {
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  min-height: 0;
}
.cx-reels.is-fullscreen .cx-reel { max-width: 720px; margin: 0 auto; width: 100%; }

/* --- art-verse card --- */
.cx-reel-art { position: relative; }
.cx-reel-hero {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.85;
}
.cx-reel-art-grad {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 40%, rgba(0,0,0,.4) 100%);
}
.cx-reel-art-meta {
  position: absolute; top: 16px; right: 16px;
  text-align: right;
  font-family: var(--cx-mono); font-size: 10px;
  color: rgba(255,255,255,.85); z-index: 2;
}
.cx-reel-art-title { font-weight: 600; letter-spacing: .04em; }
.cx-reel-art-artist { opacity: .65; margin-top: 2px; }
.cx-reel-art-verse {
  position: absolute; bottom: 24px; left: 24px; right: 24px;
  z-index: 2; color: #fff;
}
.cx-reel-art-ref {
  font-family: var(--cx-mono); font-size: 10px;
  letter-spacing: .16em; opacity: .75; margin-bottom: 8px;
}
.cx-reel-art-verse p {
  font-family: var(--cx-serif); font-size: 18px;
  line-height: 1.45; margin: 0;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
}

/* --- light-verse card --- */
.cx-reel-light {
  text-align: center; padding: 40px 24px;
  color: #f0e8d8;
}
.cx-reel-light-text {
  font-family: var(--cx-serif); font-size: clamp(22px, 5vw, 36px);
  line-height: 1.4; white-space: pre-line;
  letter-spacing: .005em;
}
.cx-reel-light-ref {
  margin-top: 24px;
  font-family: var(--cx-mono); font-size: 10px;
  letter-spacing: .22em; opacity: .55;
}

/* --- symbol card --- */
.cx-reel-symbol {
  text-align: center; padding: 40px 24px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--card-hue, #5fa97e) 18%, var(--cx-bg)) 0%,
    var(--cx-bg) 70%);
}
.cx-reel-symbol-glyph {
  font-size: 64px; line-height: 1; margin-bottom: 18px;
  filter: drop-shadow(0 0 24px color-mix(in oklab, var(--card-hue, #5fa97e) 40%, transparent));
}
.cx-reel-symbol-title {
  font-family: var(--cx-serif); font-size: 28px;
  color: var(--card-hue, var(--cx-accent));
  margin-bottom: 12px; font-weight: 500;
}
.cx-reel-symbol-body {
  font-family: var(--cx-serif); font-size: 15px;
  line-height: 1.55; max-width: 50ch; margin: 0 auto;
  color: var(--cx-fg);
}
.cx-reel-symbol-ref {
  margin-top: 18px;
  font-family: var(--cx-mono); font-size: 10px;
  letter-spacing: .16em; opacity: .55;
}

/* --- name-of-god card --- */
.cx-reel-name {
  text-align: center; padding: 40px 24px;
  background: radial-gradient(circle at 50% 30%,
    color-mix(in oklab, var(--card-hue, #7ee0ff) 20%, transparent),
    transparent 70%);
}
.cx-reel-name-hebrew {
  font-family: 'Cardo', 'Times New Roman', serif;
  font-size: clamp(28px, 5.5vw, 44px);
  color: var(--card-hue, var(--cx-accent));
  margin-bottom: 18px;
  text-shadow: 0 0 30px color-mix(in oklab, var(--card-hue, var(--cx-accent)) 35%, transparent);
}
.cx-reel-name-body {
  font-family: var(--cx-serif); font-size: 15px;
  line-height: 1.55; max-width: 50ch; margin: 0 auto;
}
.cx-reel-name-ref {
  margin-top: 18px;
  font-family: var(--cx-mono); font-size: 10px;
  letter-spacing: .16em; opacity: .55;
}

/* --- did-you-know card --- */
.cx-reel-fact {
  padding: 40px 24px;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--card-hue, #e8d6a8) 10%, transparent),
    transparent 60%);
}
.cx-reel-fact-label {
  font-family: var(--cx-mono); font-size: 10px;
  letter-spacing: .26em; color: var(--card-hue, var(--cx-accent));
  margin-bottom: 14px; opacity: .85;
}
.cx-reel-fact-title {
  font-family: var(--cx-serif); font-size: 26px;
  margin-bottom: 14px; font-weight: 500;
}
.cx-reel-fact-body {
  font-family: var(--cx-serif); font-size: 16px;
  line-height: 1.6; margin: 0 0 14px; max-width: 60ch;
}
.cx-reel-fact-ref {
  font-family: var(--cx-mono); font-size: 10px;
  letter-spacing: .16em; opacity: .55;
}

/* --- parable card --- */
.cx-reel-parable {
  padding: 40px 24px;
}
.cx-reel-parable-label {
  font-family: var(--cx-mono); font-size: 9.5px;
  letter-spacing: .26em; color: var(--card-hue, var(--cx-accent));
  margin-bottom: 12px; opacity: .85;
}
.cx-reel-parable-title {
  font-family: var(--cx-serif); font-size: 24px;
  margin-bottom: 16px; font-style: italic;
}
.cx-reel-parable-body {
  font-family: var(--cx-serif); font-size: 17px;
  line-height: 1.6; margin: 0 0 16px; max-width: 56ch;
}
.cx-reel-parable-ref {
  font-family: var(--cx-mono); font-size: 10px;
  letter-spacing: .16em; opacity: .55;
}

/* --- prophecy-pair card --- */
.cx-reel-prophecy {
  padding: 36px 24px;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.cx-reel-prophecy-title {
  font-family: var(--cx-serif); font-size: 22px;
  color: var(--card-hue, var(--cx-accent));
  text-align: center; margin-bottom: 6px;
}
.cx-reel-prophecy-half {
  padding: 14px 16px;
  background: color-mix(in oklab, var(--card-hue, #a06070) 8%, transparent);
  border-left: 2px solid color-mix(in oklab, var(--card-hue, #a06070) 60%, transparent);
  border-radius: 0 6px 6px 0;
}
.cx-reel-prophecy-half.is-fulfilled {
  background: color-mix(in oklab, var(--card-hue, #a06070) 14%, transparent);
}
.cx-reel-prophecy-tag {
  font-family: var(--cx-mono); font-size: 9.5px;
  letter-spacing: .2em; color: var(--card-hue, var(--cx-accent));
  margin-bottom: 8px;
}
.cx-reel-prophecy-half p {
  font-family: var(--cx-serif); font-size: 14.5px;
  line-height: 1.55; margin: 0;
}
.cx-reel-prophecy-arrow {
  text-align: center; font-size: 22px;
  color: var(--card-hue, var(--cx-accent)); opacity: .55;
}

/* --- counting card --- */
.cx-reel-count {
  text-align: center; padding: 40px 24px;
}
.cx-reel-count-num {
  font-family: var(--cx-mono); font-size: clamp(40px, 8vw, 72px);
  color: var(--card-hue, var(--cx-accent));
  font-weight: 600; letter-spacing: .04em;
  margin-bottom: 20px;
  text-shadow: 0 0 30px color-mix(in oklab, var(--card-hue, var(--cx-accent)) 30%, transparent);
}
.cx-reel-count-body {
  font-family: var(--cx-serif); font-size: 16px;
  line-height: 1.6; max-width: 54ch; margin: 0 auto;
}

/* --- question card --- */
.cx-reel-q {
  text-align: center; padding: 40px 24px;
}
.cx-reel-q-label {
  font-family: var(--cx-mono); font-size: 10px;
  letter-spacing: .26em; color: var(--card-hue, var(--cx-accent));
  margin-bottom: 18px; opacity: .85;
}
.cx-reel-q-text {
  font-family: var(--cx-serif); font-size: 22px;
  line-height: 1.4; margin-bottom: 24px; max-width: 40ch; margin-inline: auto;
}
.cx-reel-q-reveal {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--card-hue, var(--cx-accent)) 50%, transparent);
  color: var(--card-hue, var(--cx-accent));
  padding: 10px 22px; border-radius: 999px;
  font-family: var(--cx-mono); font-size: 11px;
  letter-spacing: .1em; cursor: pointer;
  transition: background 120ms, color 120ms;
}
.cx-reel-q-reveal:hover {
  background: color-mix(in oklab, var(--card-hue, var(--cx-accent)) 10%, transparent);
}
.cx-reel-q-answer {
  font-family: var(--cx-serif); font-size: 16px;
  line-height: 1.6; max-width: 50ch; margin: 0 auto;
  animation: cx-reel-fade .3s ease-out;
}
.cx-reel-q-ref {
  margin-top: 18px;
  font-family: var(--cx-mono); font-size: 10px;
  letter-spacing: .16em; opacity: .55;
}

/* --- quest tease card --- */
.cx-reel-quest {
  padding: 40px 24px;
  border-top: 2px solid color-mix(in oklab, var(--card-hue, var(--cx-accent)) 40%, transparent);
  border-bottom: 2px solid color-mix(in oklab, var(--card-hue, var(--cx-accent)) 40%, transparent);
  background: color-mix(in oklab, var(--card-hue, var(--cx-accent)) 5%, transparent);
}
.cx-reel-quest-label {
  font-family: var(--cx-mono); font-size: 10px;
  letter-spacing: .26em; color: var(--card-hue, var(--cx-accent));
  margin-bottom: 14px; opacity: .9;
}
.cx-reel-quest-title {
  font-family: var(--cx-serif); font-size: 26px;
  margin-bottom: 14px; font-weight: 500;
}
.cx-reel-quest-body {
  font-family: var(--cx-serif); font-size: 16px;
  line-height: 1.6; margin: 0 0 14px; max-width: 58ch;
}
.cx-reel-quest-ref {
  font-family: var(--cx-mono); font-size: 10.5px;
  letter-spacing: .18em; color: var(--card-hue, var(--cx-accent));
  font-weight: 600;
}

/* --- bottom action bar --- */
.cx-reel-actions {
  position: absolute; bottom: 16px; left: 24px; right: 24px;
  display: flex; gap: 12px; align-items: center; justify-content: center;
  z-index: 4;
}
.cx-reel-act {
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 18px; cursor: pointer; line-height: 1;
  transition: background 120ms, transform 120ms;
}
.cx-reel-act:hover:not(:disabled) {
  background: rgba(0,0,0,.7);
  transform: scale(1.08);
}
.cx-reel-act:disabled { opacity: .35; cursor: not-allowed; }

@keyframes cx-reel-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ===== Map Magic — Tourist Mode ===== */

/* Controls bar above the leaflet field */
.cx-map-controls {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 8px;
  border-bottom: 1px solid color-mix(in oklab, var(--cx-fg-dim) 18%, transparent);
  background: color-mix(in oklab, var(--cx-bg) 80%, transparent);
  font-family: var(--cx-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
}
.cx-map-ctrl {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 35%, transparent);
  color: var(--cx-fg-dim);
  padding: 4px 9px;
  border-radius: 3px;
  cursor: pointer;
  font: inherit;
  transition: all 140ms;
}
.cx-map-ctrl:hover { color: var(--cx-fg); border-color: var(--cx-accent); }
.cx-map-ctrl-tourist.is-on {
  color: var(--cx-bg);
  background: var(--cx-accent);
  border-color: var(--cx-accent);
  box-shadow: 0 0 12px color-mix(in oklab, var(--cx-accent) 60%, transparent);
  animation: cx-tourist-glow 2.2s ease-in-out infinite;
}
@keyframes cx-tourist-glow {
  0%, 100% { box-shadow: 0 0 8px  color-mix(in oklab, var(--cx-accent) 40%, transparent); }
  50%      { box-shadow: 0 0 18px color-mix(in oklab, var(--cx-accent) 80%, transparent); }
}
.cx-map-ctrl-layers { display: inline-flex; gap: 2px; }
.cx-map-layer {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 25%, transparent);
  color: var(--cx-fg-dim);
  width: 26px; height: 26px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 120ms;
}
.cx-map-layer:hover { color: var(--cx-fg); }
.cx-map-layer.is-on {
  color: var(--cx-accent);
  border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 12%, transparent);
}
.cx-map-discovered {
  margin-left: auto;
  color: var(--cx-accent);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border: 1px dashed color-mix(in oklab, var(--cx-accent) 40%, transparent);
  border-radius: 3px;
}

/* Tourist side panel */
.cx-tourist-panel {
  border-top: 1px solid color-mix(in oklab, var(--cx-fg-dim) 22%, transparent);
  padding: 8px 10px 10px;
  max-height: 320px;
  overflow-y: auto;
  font-size: 12.5px;
  background: color-mix(in oklab, var(--cx-bg) 92%, transparent);
}
.cx-tourist-h {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.cx-tourist-tag {
  font-family: var(--cx-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--cx-accent);
}
.cx-tourist-pos { font-family: var(--cx-mono); font-size: 9.5px; color: var(--cx-fg-dim); }
.cx-tourist-here {
  font-size: 11.5px; color: var(--cx-fg-dim);
  margin-bottom: 8px;
  padding: 4px 6px;
  border-left: 2px solid var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 5%, transparent);
}
.cx-tourist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cx-tourist-list li {
  padding: 7px 9px;
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 18%, transparent);
  border-radius: 4px;
  cursor: pointer;
  transition: all 140ms;
  background: color-mix(in oklab, var(--cx-bg) 96%, transparent);
}
.cx-tourist-list li:hover { border-color: var(--cx-accent); transform: translateX(2px); }
.cx-tourist-list li.is-selected {
  border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
  box-shadow: inset 3px 0 0 var(--cx-accent);
}
.cx-tplace-h { display: flex; justify-content: space-between; align-items: baseline; }
.cx-tplace-name { font-weight: 600; color: var(--cx-fg); }
.cx-tplace-d { font-family: var(--cx-mono); font-size: 10px; color: var(--cx-accent); }
.cx-tplace-era { font-size: 10.5px; color: var(--cx-fg-dim); margin: 2px 0 4px; font-style: italic; }
.cx-tplace-sum { margin: 0 0 4px; font-size: 12px; line-height: 1.42; color: var(--cx-fg); }
.cx-tplace-refs { display: flex; flex-wrap: wrap; gap: 4px; }
.cx-tplace-refs code { font-size: 9.5px; padding: 1px 5px; border-radius: 2px; background: color-mix(in oklab, var(--cx-fg-dim) 15%, transparent); color: var(--cx-fg-dim); }
.cx-tourist-hour, .cx-tourist-hole {
  margin-top: 10px; padding: 7px 9px;
  border-left: 2px solid var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 4%, transparent);
  font-size: 11.5px;
}
.cx-tourist-hour b, .cx-tourist-hole b {
  display: block; font-family: var(--cx-mono);
  font-size: 9.5px; letter-spacing: 0.18em;
  color: var(--cx-accent); margin-bottom: 3px;
}
.cx-tourist-hour p, .cx-tourist-hole p { margin: 0; line-height: 1.45; }
.cx-tourist-empty, .cx-tourist-loading, .cx-tourist-err {
  padding: 16px 10px; text-align: center; color: var(--cx-fg-dim);
  font-size: 12px;
}
.cx-tourist-err p { color: #ff8291; margin: 0 0 8px; }
.cx-tourist-empty button, .cx-tourist-err button {
  background: transparent;
  border: 1px solid var(--cx-accent);
  color: var(--cx-accent);
  padding: 5px 12px;
  border-radius: 3px;
  font-family: var(--cx-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  cursor: pointer;
  margin-top: 6px;
}

/* Leaflet — user GPS marker */
.cx-map-user { position: relative; }
.cx-user-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: #7cf; box-shadow: 0 0 0 2px rgba(0,0,0,0.5);
}
.cx-user-pulse {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: #7cf; opacity: 0.5;
  animation: cx-user-pulse 1.8s ease-out infinite;
}
@keyframes cx-user-pulse {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}
.cx-user-lbl {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  font-family: var(--cx-mono); font-size: 9px; letter-spacing: 0.2em;
  color: #7cf; text-shadow: 0 0 4px rgba(0,0,0,0.9);
  white-space: nowrap;
}

/* Tourist pin */
.cx-map-tourist-pin { position: relative; }
.cx-tpin-glyph {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 16px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}
.cx-tpin-lbl {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  font-family: var(--cx-mono); font-size: 9.5px; font-weight: 600;
  color: var(--cx-fg); text-shadow: 0 0 4px rgba(0,0,0,0.9);
  white-space: nowrap;
}
.cx-tpin-dist {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  font-family: var(--cx-mono); font-size: 8.5px;
  color: var(--cx-accent); text-shadow: 0 0 4px rgba(0,0,0,0.9);
  white-space: nowrap;
}

/* Discoverable (faint dots + pulsing near sites) */
.cx-map-disc .cx-disc-dot {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in oklab, var(--cx-accent) 70%, transparent);
  opacity: 0.45;
}
.cx-map-disc.is-near .cx-disc-pulse {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: gold;
  animation: cx-disc-pulse 1.4s ease-out infinite;
}
@keyframes cx-disc-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.9; box-shadow: 0 0 0 0 rgba(255,215,0,0.7); }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0;   box-shadow: 0 0 0 16px rgba(255,215,0,0); }
}
.cx-disc-lbl {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  font-family: var(--cx-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; color: gold;
  text-shadow: 0 0 6px rgba(0,0,0,0.95);
  white-space: nowrap;
}

/* My discoveries */
.cx-map-mine .cx-mine-flag {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 14px; color: gold;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}
.cx-mine-lbl {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  font-family: var(--cx-mono); font-size: 9px;
  color: gold; text-shadow: 0 0 4px rgba(0,0,0,0.9);
  white-space: nowrap;
}
.cx-mine-pop { font-family: var(--cx-body); font-size: 12px; max-width: 260px; }
.cx-mine-pop b { display: block; font-family: var(--cx-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--cx-accent); margin-bottom: 4px; }
.cx-mine-pop p { margin: 0 0 6px; line-height: 1.45; }
.cx-mine-pop small { color: var(--cx-fg-dim); font-size: 10.5px; }
.cx-mine-tts, .cx-tpop-tts {
  margin-top: 6px;
  background: transparent;
  border: 1px solid var(--cx-accent);
  color: var(--cx-accent);
  padding: 3px 9px;
  border-radius: 3px;
  font-family: var(--cx-mono);
  font-size: 10px; letter-spacing: 0.16em;
  cursor: pointer;
}

/* Manuscript markers */
.cx-map-ms .cx-ms-glyph {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 14px; color: #b88cff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}
.cx-ms-lbl {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  font-family: var(--cx-mono); font-size: 9px;
  color: #b88cff; text-shadow: 0 0 4px rgba(0,0,0,0.9);
  white-space: nowrap;
}

/* Tourist popup */
.cx-tpop { font-family: var(--cx-body); font-size: 12px; max-width: 280px; }
.cx-tpop h4 { margin: 0 0 4px; font-family: var(--cx-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--cx-accent); }
.cx-tpop-meta { font-size: 10px; color: var(--cx-fg-dim); margin-bottom: 6px; font-style: italic; }
.cx-tpop p { margin: 0 0 6px; line-height: 1.42; }
.cx-tpop-things { margin: 4px 0; padding-left: 18px; font-size: 11px; }
.cx-tpop-things li { margin: 2px 0; color: var(--cx-fg-dim); }
.cx-tpop-tip { font-size: 10.5px; color: var(--cx-fg-dim); margin: 3px 0; }
.cx-tpop-tip b { color: var(--cx-fg); }
.cx-tpop-refs { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.cx-tpop-refs code { font-size: 9.5px; padding: 1px 5px; border-radius: 2px; background: color-mix(in oklab, var(--cx-fg-dim) 15%, transparent); }

/* Breadcrumb line (Leaflet adds its own classes; this targets via dashed style) */
.leaflet-interactive.cx-map-breadcrumb { animation: cx-breadcrumb-dash 2s linear infinite; }
@keyframes cx-breadcrumb-dash { to { stroke-dashoffset: -28; } }

/* Timeline ticks — major / minor / boundary */
.cx-map-timeline-ticks {
  position: relative;
  height: 22px;
  margin-top: 6px;
}
.cx-map-timeline-tick {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--cx-mono);
  font-size: 9.5px;
  color: var(--cx-fg-dim);
  letter-spacing: 0.06em;
  white-space: nowrap;
  pointer-events: none;
}
.cx-map-timeline-tick.is-major {
  top: 8px;
  color: var(--cx-fg);
  font-weight: 600;
}
.cx-map-timeline-tick.is-major::before {
  content: "";
  position: absolute;
  left: 50%; top: -8px;
  width: 1px; height: 6px;
  background: var(--cx-fg-dim);
  transform: translateX(-50%);
}
.cx-map-timeline-tick.is-major.is-dim { opacity: 0.4; }
.cx-map-timeline-tick.is-minor {
  top: -2px;
  width: 1px; height: 4px;
  background: color-mix(in oklab, var(--cx-fg-dim) 40%, transparent);
}
.cx-map-timeline-tick.is-boundary {
  top: -4px;
  width: 1px; height: 8px;
  background: var(--cx-accent);
  opacity: 0.55;
}

/* AI year-context badge */
.cx-map-yrctx {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid color-mix(in oklab, var(--cx-accent) 30%, transparent);
  border-left: 3px solid var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 5%, transparent);
  border-radius: 3px;
  font-size: 11.5px;
  display: flex; gap: 8px; align-items: flex-start;
}
.cx-map-yrctx.is-loading { opacity: 0.7; }
.cx-map-yrctx-tag {
  font-family: var(--cx-mono);
  font-size: 9.5px; letter-spacing: 0.22em;
  color: var(--cx-accent);
  flex-shrink: 0;
  padding-top: 1px;
}
.cx-map-yrctx-body { flex: 1; }
.cx-map-yrctx-body b { display: block; color: var(--cx-fg); margin-bottom: 3px; }
.cx-map-yrctx-body ul { margin: 0; padding-left: 16px; font-size: 10.5px; color: var(--cx-fg-dim); }
.cx-map-yrctx-body li { margin: 1px 0; }
.cx-map-yrctx-load { font-family: var(--cx-mono); font-size: 10px; color: var(--cx-fg-dim); }

/* ===== Gematria Intelligence ===== */
.cx-gem-focus { padding: 12px; border: 1px solid var(--cx-accent-2); background: rgba(255,196,107,.06); }
.cx-gem-focus-word { font-family: var(--cx-serif); font-size: 32px; line-height: 1.1; color: var(--cx-fg); text-align: center; margin-bottom: 6px; }
.cx-gem-focus-meta { text-align: center; margin-bottom: 8px; }
.cx-gem-focus-tr { font-family: var(--cx-mono); font-size: 11px; color: var(--cx-accent); letter-spacing: 0.08em; margin-right: 6px; }
.cx-gem-focus-gl { font-family: var(--cx-sans); font-size: 11px; color: var(--cx-fg-dim); font-style: italic; }
.cx-gem-focus-val { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 8px 0; border-top: 1px dotted var(--cx-line); border-bottom: 1px dotted var(--cx-line); margin-bottom: 8px; }
.cx-gem-focus-val b { font-family: var(--cx-mono); font-size: 28px; color: var(--cx-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.cx-gem-focus-val i { font-style: normal; font-family: var(--cx-mono); font-size: 8.5px; letter-spacing: 0.18em; color: var(--cx-fg-dim); }
.cx-gem-focus-sym { margin: 0; font-family: var(--cx-serif); font-size: 12.5px; line-height: 1.5; color: var(--cx-fg); font-style: italic; }

.cx-gem-crosslang { display: flex; gap: 4px; margin: 10px 0; padding: 8px; background: rgba(0,0,0,.18); border: 1px solid var(--cx-line); }
.cx-gem-crosslang span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cx-gem-crosslang i { font-style: normal; font-family: var(--cx-mono); font-size: 8px; letter-spacing: 0.16em; color: var(--cx-fg-dim); }
.cx-gem-crosslang b { font-family: var(--cx-mono); font-size: 16px; color: var(--cx-accent); font-variant-numeric: tabular-nums; }

.cx-gem-sys-grid { display: flex; flex-direction: column; gap: 2px; }
.cx-gem-sys-row { display: flex; justify-content: space-between; padding: 6px 8px; border-bottom: 1px dotted var(--cx-line); cursor: help; }
.cx-gem-sys-row:hover { background: rgba(255,196,107,.05); }
.cx-gem-sys-k { font-family: var(--cx-mono); font-size: 10px; color: var(--cx-fg-dim); letter-spacing: 0.06em; text-transform: uppercase; }
.cx-gem-sys-v { font-family: var(--cx-mono); font-size: 12px; color: var(--cx-accent); font-variant-numeric: tabular-nums; }

.cx-gem-xtabs { display: flex; gap: 4px; margin-bottom: 8px; }
.cx-gem-xtab { flex: 1; padding: 6px 8px; background: transparent; border: 1px solid var(--cx-line); color: var(--cx-fg-dim); font-family: var(--cx-mono); font-size: 9.5px; letter-spacing: 0.12em; cursor: pointer; }
.cx-gem-xtab.is-on { color: var(--cx-accent); border-color: var(--cx-accent-2); background: rgba(255,196,107,.08); }
.cx-gem-xlist { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.cx-gem-xgroup { padding: 6px 0; border-bottom: 1px dashed var(--cx-line); }
.cx-gem-xgh { font-family: var(--cx-mono); font-size: 10px; color: var(--cx-accent-2); margin-bottom: 4px; letter-spacing: 0.08em; }
.cx-gem-xgh b { color: var(--cx-accent); font-size: 13px; margin-right: 6px; }
.cx-gem-xgh i { font-style: normal; color: var(--cx-fg-dim); }
.cx-gem-xrow { display: flex; align-items: baseline; gap: 6px; padding: 5px 6px; cursor: pointer; border-left: 2px solid transparent; }
.cx-gem-xrow:hover { background: rgba(255,196,107,.06); border-left-color: var(--cx-accent); }
.cx-gem-xref { font-family: var(--cx-mono); font-size: 10px; color: var(--cx-accent); letter-spacing: 0.04em; min-width: 90px; text-transform: uppercase; }
.cx-gem-xword { font-family: var(--cx-serif); font-size: 14px; color: var(--cx-fg); }
.cx-gem-xnote { font-family: var(--cx-sans); font-size: 10.5px; color: var(--cx-fg-dim); font-style: italic; }
.cx-gem-empty { font-family: var(--cx-mono); font-size: 10px; color: var(--cx-fg-dim); padding: 8px; text-align: center; font-style: italic; }

.cx-gem-card { padding: 8px 10px; margin-bottom: 6px; background: rgba(0,0,0,.15); border-left: 2px solid var(--cx-accent-2); }
.cx-gem-card-h { font-family: var(--cx-mono); font-size: 11px; color: var(--cx-accent); margin-bottom: 4px; letter-spacing: 0.04em; }
.cx-gem-card-b { margin: 0; font-family: var(--cx-serif); font-size: 12.5px; line-height: 1.5; color: var(--cx-fg); }
.cx-gem-quote { font-style: italic; color: var(--cx-fg-dim); }
.cx-gem-insight p { margin: 0; font-family: var(--cx-serif); font-size: 13px; line-height: 1.6; color: var(--cx-fg); font-style: italic; }
.cx-gem-insight p::first-letter { color: var(--cx-accent); font-weight: 700; font-size: 1.4em; }

/* =====================================================================
   Light Mode Theme Variants (Day Mode Palettes)
   Selected via data-light-theme on .cx-app. Default (no attribute) is
   Parchment — the original light-mode palette already defined above.
   ===================================================================== */

/* ── Vellum — warmer, aged parchment ─────────────────────────────────── */
.cx-app.is-light[data-light-theme="vellum"] {
  --cx-bg: #f4e9cd;
  --cx-bg-2: #e5d6b0;
  --cx-fg: #2a2010;
  --cx-fg-dim: #7a6845;
  --cx-line: rgba(70, 50, 20, 0.22);
  --cx-line-strong: rgba(70, 50, 20, 0.45);
  --cx-panel: rgba(252, 244, 222, 0.88);
  --cx-panel-2: rgba(238, 224, 188, 0.95);
  --cx-accent: #8a4f1a;
  --cx-accent-2: #54310a;
  --cx-accent-glow: rgba(138, 79, 26, 0.22);
  --cx-shadow: 0 8px 24px rgba(80, 55, 20, 0.18);
}

/* ── Linen — bright modern off-white ─────────────────────────────────── */
.cx-app.is-light[data-light-theme="linen"] {
  --cx-bg: #f7f5ee;
  --cx-bg-2: #ebe7da;
  --cx-fg: #161616;
  --cx-fg-dim: #6e6e68;
  --cx-line: rgba(0, 0, 0, 0.12);
  --cx-line-strong: rgba(0, 0, 0, 0.35);
  --cx-panel: rgba(255, 254, 250, 0.92);
  --cx-panel-2: rgba(245, 242, 232, 0.98);
  --cx-accent: #1f5fbf;
  --cx-accent-2: #b4451a;
  --cx-accent-glow: rgba(31, 95, 191, 0.18);
  --cx-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ── Sandstone — warm desert ─────────────────────────────────────────── */
.cx-app.is-light[data-light-theme="sandstone"] {
  --cx-bg: #efd9b8;
  --cx-bg-2: #dcc196;
  --cx-fg: #3a2010;
  --cx-fg-dim: #7e5a32;
  --cx-line: rgba(60, 30, 10, 0.2);
  --cx-line-strong: rgba(60, 30, 10, 0.42);
  --cx-panel: rgba(248, 235, 212, 0.88);
  --cx-panel-2: rgba(230, 208, 172, 0.96);
  --cx-accent: #8c3a14;
  --cx-accent-2: #4a2008;
  --cx-accent-glow: rgba(140, 58, 20, 0.22);
  --cx-shadow: 0 8px 24px rgba(100, 60, 20, 0.18);
}

/* ── Sage — soft green-cream ─────────────────────────────────────────── */
.cx-app.is-light[data-light-theme="sage"] {
  --cx-bg: #e6e8d4;
  --cx-bg-2: #cdd2b3;
  --cx-fg: #1c2418;
  --cx-fg-dim: #5a6448;
  --cx-line: rgba(40, 60, 30, 0.2);
  --cx-line-strong: rgba(40, 60, 30, 0.42);
  --cx-panel: rgba(242, 244, 226, 0.88);
  --cx-panel-2: rgba(222, 228, 200, 0.96);
  --cx-accent: #4a6b30;
  --cx-accent-2: #8a5a14;
  --cx-accent-glow: rgba(74, 107, 48, 0.2);
  --cx-shadow: 0 8px 24px rgba(60, 70, 40, 0.16);
}

/* ── Solarized Light — classic ───────────────────────────────────────── */
.cx-app.is-light[data-light-theme="solarized"] {
  --cx-bg: #fdf6e3;
  --cx-bg-2: #eee8d5;
  --cx-fg: #073642;
  --cx-fg-dim: #657b83;
  --cx-line: rgba(7, 54, 66, 0.18);
  --cx-line-strong: rgba(7, 54, 66, 0.4);
  --cx-panel: rgba(253, 246, 227, 0.92);
  --cx-panel-2: rgba(238, 232, 213, 0.98);
  --cx-accent: #268bd2;
  --cx-accent-2: #cb4b16;
  --cx-accent-glow: rgba(38, 139, 210, 0.2);
  --cx-shadow: 0 4px 14px rgba(7, 54, 66, 0.1);
}

/* ── Slate — cool blue-gray ──────────────────────────────────────────── */
.cx-app.is-light[data-light-theme="slate"] {
  --cx-bg: #e2e6ec;
  --cx-bg-2: #cdd4dc;
  --cx-fg: #1a2230;
  --cx-fg-dim: #5a6478;
  --cx-line: rgba(20, 35, 60, 0.18);
  --cx-line-strong: rgba(20, 35, 60, 0.4);
  --cx-panel: rgba(238, 242, 248, 0.9);
  --cx-panel-2: rgba(218, 226, 236, 0.96);
  --cx-accent: #2a5a8a;
  --cx-accent-2: #6a3e1e;
  --cx-accent-glow: rgba(42, 90, 138, 0.2);
  --cx-shadow: 0 4px 16px rgba(20, 35, 60, 0.1);
}

/* ── Rose — warm pink-cream ──────────────────────────────────────────── */
.cx-app.is-light[data-light-theme="rose"] {
  --cx-bg: #f4e2dc;
  --cx-bg-2: #e2c4ba;
  --cx-fg: #2a1216;
  --cx-fg-dim: #7a4a4a;
  --cx-line: rgba(80, 30, 30, 0.18);
  --cx-line-strong: rgba(80, 30, 30, 0.4);
  --cx-panel: rgba(250, 240, 234, 0.88);
  --cx-panel-2: rgba(234, 210, 200, 0.96);
  --cx-accent: #9c2a4a;
  --cx-accent-2: #5a2010;
  --cx-accent-glow: rgba(156, 42, 74, 0.2);
  --cx-shadow: 0 8px 24px rgba(100, 30, 40, 0.14);
}

/* ── Old Book — high-contrast ink on cream ───────────────────────────── */
.cx-app.is-light[data-light-theme="old-book"] {
  --cx-bg: #f1e8d2;
  --cx-bg-2: #ddd0b0;
  --cx-fg: #0a0608;
  --cx-fg-dim: #4a3820;
  --cx-line: rgba(20, 10, 0, 0.28);
  --cx-line-strong: rgba(20, 10, 0, 0.6);
  --cx-panel: rgba(248, 240, 220, 0.92);
  --cx-panel-2: rgba(232, 220, 192, 0.98);
  --cx-accent: #6a1a08;
  --cx-accent-2: #2a1408;
  --cx-accent-glow: rgba(106, 26, 8, 0.18);
  --cx-shadow: 0 6px 20px rgba(40, 20, 0, 0.18);
}

/* Theme picker styles inside the tweaks panel */
.cx-tp-theme-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px; margin-top: 6px;
}
.cx-tp-theme-swatch {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch;
  border: 1.5px solid var(--cx-line);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  background: transparent;
  transition: border-color 120ms, transform 120ms;
  min-height: 56px;
  min-width: 44px;
}
.cx-tp-theme-swatch:hover { transform: translateY(-1px); border-color: var(--cx-line-strong); }
.cx-tp-theme-swatch.is-active {
  border-color: var(--cx-accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--cx-accent) 22%, transparent);
}
.cx-tp-theme-swatch-preview {
  flex: 1; min-height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-style: italic;
}
.cx-tp-theme-swatch-accent {
  position: absolute; bottom: 6px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%;
}
.cx-tp-theme-swatch-name {
  font-family: var(--cx-mono); font-size: 9px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 6px;
  color: var(--cx-fg-dim);
  background: rgba(0,0,0,.04);
  text-align: center;
}
.cx-app.is-light .cx-tp-theme-swatch-name { background: rgba(0,0,0,.05); }

/* ===== Help Wiki — Beauty Pass ===== */
/* Appended block. Overrides earlier .cx-help-* rules via selector specificity
   and order. Works in dark (default) and light (.cx-app.is-light) modes.
   Respects prefers-reduced-motion. Touch targets ≥44px on mobile. */

/* ── Layout / scroll container for the article reading view ─────────── */
.cx-help.cx-help-reading {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}
.cx-help-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 2px 32px;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  .cx-help-scroll { scroll-behavior: auto; }
}

/* ── Scroll-progress strip ──────────────────────────────────────────── */
.cx-help-progress {
  position: sticky;
  top: 0;
  height: 2px;
  width: 100%;
  background: transparent;
  z-index: 4;
  pointer-events: none;
}
.cx-help-progress-bar {
  height: 100%;
  background: linear-gradient(90deg,
    var(--cx-accent, #79f0ff) 0%,
    color-mix(in oklab, var(--cx-accent, #79f0ff) 70%, white) 100%);
  box-shadow: 0 0 8px color-mix(in oklab, var(--cx-accent, #79f0ff) 50%, transparent);
  transition: width 80ms linear;
}

/* ── Pretty index head ──────────────────────────────────────────────── */
.cx-help-head.cx-help-head-pretty {
  padding: 18px 4px 12px;
  text-align: left;
  border-bottom: 1px solid color-mix(in oklab, var(--cx-line, #2a2a2a) 70%, transparent);
  margin-bottom: 14px;
}
.cx-help-eyebrow {
  font-family: var(--cx-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cx-fg-dim);
  margin-bottom: 6px;
}
.cx-help-title-pretty {
  font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.05;
  color: var(--cx-fg);
  letter-spacing: 0.005em;
  margin: 0 0 6px;
}
.cx-help-head.cx-help-head-pretty .cx-help-sub {
  font-style: italic;
  color: var(--cx-fg-dim);
  font-size: 13.5px;
}

/* ── Search bar polish ──────────────────────────────────────────────── */
.cx-help-search-wrap.cx-help-search-wrap-pretty {
  position: relative;
  align-items: stretch;
  gap: 8px;
}
.cx-help-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--cx-fg-dim);
  font-size: 16px;
  z-index: 1;
}
.cx-help-search-wrap.cx-help-search-wrap-pretty .cx-help-search {
  padding-left: 38px;
  min-height: 44px;
  border-radius: 10px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.cx-help-search-wrap.cx-help-search-wrap-pretty .cx-help-search:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cx-accent) 22%, transparent);
}

.cx-help-ask.cx-help-ask-pretty {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  font-family: var(--cx-mono, ui-monospace, monospace);
  letter-spacing: 0.12em;
  font-size: 11.5px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--cx-accent) 22%, transparent) 0%,
    color-mix(in oklab, var(--cx-accent) 10%, transparent) 100%);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 55%, transparent);
  color: var(--cx-fg);
  position: relative;
  overflow: hidden;
  transition: transform 120ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.cx-help-ask.cx-help-ask-pretty:hover:not(:disabled) {
  border-color: var(--cx-accent);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--cx-accent) 30%, transparent),
    0 6px 18px -6px color-mix(in oklab, var(--cx-accent) 55%, transparent);
  transform: translateY(-1px);
}
.cx-help-ask.cx-help-ask-pretty:active:not(:disabled) { transform: translateY(0); }

/* ── Predictive search rows ─────────────────────────────────────────── */
.cx-help-predict.cx-help-predict-pretty {
  border: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 8px;
  background: color-mix(in oklab, var(--cx-bg, #0c0c10) 60%, transparent);
}
.cx-help-predict.cx-help-predict-pretty li + li {
  border-top: 1px solid color-mix(in oklab, var(--cx-line) 60%, transparent);
}
.cx-help-predict-row.cx-help-predict-row-pretty {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "main hint"
    "snippet hint";
  gap: 4px 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-left: 2px solid transparent;
  background: transparent;
  transition: background 140ms ease, border-color 140ms ease;
  min-height: 56px;
}
.cx-help-predict-row.cx-help-predict-row-pretty:hover,
.cx-help-predict-row.cx-help-predict-row-pretty:focus-visible {
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
  border-left-color: var(--cx-accent);
  outline: none;
}
.cx-help-predict-main {
  grid-area: main;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cx-help-predict-main .cx-help-predict-title {
  font-weight: 600;
  color: var(--cx-fg);
}
.cx-help-predict-snippet {
  grid-area: snippet;
  font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif);
  font-style: italic;
  font-size: 14px;
  color: var(--cx-fg-dim);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cx-help-predict-snippet .cx-help-hl {
  color: var(--cx-fg);
  text-decoration: underline;
  text-decoration-color: var(--cx-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  font-style: normal;
}
.cx-help-predict-hint {
  grid-area: hint;
  align-self: center;
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--cx-fg-dim);
  opacity: 0;
  transition: opacity 140ms ease;
}
.cx-help-predict-row.cx-help-predict-row-pretty:hover .cx-help-predict-hint,
.cx-help-predict-row.cx-help-predict-row-pretty:focus-visible .cx-help-predict-hint {
  opacity: 1;
}

/* ── Browse mode toggle ─────────────────────────────────────────────── */
.cx-help-mode-toggle {
  display: inline-flex;
  gap: 4px;
  margin: 16px 0 10px;
  padding: 3px;
  border: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--cx-bg, #0c0c10) 50%, transparent);
}
.cx-help-mode-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--cx-fg-dim);
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 32px;
  transition: background 160ms ease, color 160ms ease;
}
.cx-help-mode-btn.is-active {
  background: color-mix(in oklab, var(--cx-accent) 22%, transparent);
  color: var(--cx-fg);
}
.cx-help-mode-btn:hover:not(.is-active) {
  color: var(--cx-fg);
}

/* ── Category cards grid ────────────────────────────────────────────── */
.cx-help-catgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.cx-help-catcard {
  appearance: none;
  text-align: left;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--cx-bg, #0c0c10) 70%, transparent) 0%,
    color-mix(in oklab, var(--cx-bg, #0c0c10) 90%, transparent) 100%);
  border: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent);
  border-radius: 14px;
  padding: 16px 14px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 140px;
  position: relative;
  overflow: hidden;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1),
              border-color 180ms ease,
              box-shadow 220ms ease;
}
.cx-help-catcard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 70% at 0% 0%,
    color-mix(in oklab, var(--cx-accent) 14%, transparent) 0%,
    transparent 60%);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.cx-help-catcard:hover,
.cx-help-catcard:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--cx-accent) 55%, var(--cx-line));
  box-shadow: 0 14px 28px -16px color-mix(in oklab, var(--cx-accent) 55%, transparent);
  outline: none;
}
.cx-help-catcard:hover::before,
.cx-help-catcard:focus-visible::before { opacity: 1; }
.cx-help-catcard-icon {
  font-size: 22px;
  line-height: 1;
  color: var(--cx-accent);
  margin-bottom: 2px;
}
.cx-help-catcard-name {
  font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 20px;
  color: var(--cx-fg);
  font-weight: 500;
  letter-spacing: 0.005em;
}
.cx-help-catcard-blurb {
  font-size: 12.5px;
  color: var(--cx-fg-dim);
  line-height: 1.45;
  flex: 1;
}
.cx-help-catcard-count {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cx-accent);
  opacity: 0.7;
  transition: opacity 180ms ease, letter-spacing 220ms ease;
}
.cx-help-catcard:hover .cx-help-catcard-count,
.cx-help-catcard:focus-visible .cx-help-catcard-count {
  opacity: 1;
  letter-spacing: 0.14em;
}

/* ── Category accordion polish ──────────────────────────────────────── */
.cx-help-cat-head.cx-help-cat-head-pretty {
  min-height: 44px;
  gap: 10px;
}
.cx-help-cat-head.cx-help-cat-head-pretty .cx-help-cat-icon {
  color: var(--cx-accent);
  font-size: 14px;
  width: 16px;
  text-align: center;
}
.cx-help-cat-head.cx-help-cat-head-pretty .cx-help-cat-name {
  font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 17px;
  letter-spacing: 0.01em;
}
.cx-help-row.cx-help-row-pretty {
  min-height: 44px;
  padding: 10px 12px;
  transition: background 140ms ease, padding-left 180ms ease, border-color 140ms ease;
  border-left: 2px solid transparent;
}
.cx-help-row.cx-help-row-pretty:hover,
.cx-help-row.cx-help-row-pretty:focus-visible {
  padding-left: 16px;
  border-left-color: var(--cx-accent);
  outline: none;
}

/* ── Article reading: hero ──────────────────────────────────────────── */
.cx-help-hero {
  padding: 22px 4px 14px;
  margin: 4px 0 18px;
}
.cx-help-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cx-fg-dim);
  margin-bottom: 12px;
}
.cx-help-hero-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cx-accent);
}
.cx-help-hero-icon { font-size: 13px; }
.cx-help-hero-dot { opacity: 0.5; }
.cx-help-hero-date { font-style: normal; }
.cx-help-hero-title {
  font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 500;
  font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--cx-fg);
  margin: 0 0 14px;
  text-wrap: balance;
}
.cx-help-hero-rule {
  height: 1px;
  width: 64px;
  background: linear-gradient(90deg,
    var(--cx-accent) 0%,
    transparent 100%);
}

/* ── Article body: pretty typography ────────────────────────────────── */
.cx-help-article.cx-help-article-pretty {
  font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 17px;
  line-height: 1.72;
  color: var(--cx-fg);
  counter-reset: cx-help-section;
  padding: 0 2px;
  max-width: 68ch;
}
/* Hide the redundant H1 inside body — the hero already shows the title */
.cx-help-article.cx-help-article-pretty > h1:first-child {
  display: none;
}
/* Drop-cap on the first paragraph after the (hidden) title */
.cx-help-article.cx-help-article-pretty > h1:first-child + p::first-letter,
.cx-help-article.cx-help-article-pretty > p:first-child::first-letter {
  float: left;
  font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 3.4em;
  line-height: 0.82;
  margin: 6px 10px 0 0;
  color: var(--cx-accent);
  font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
  .cx-help-article.cx-help-article-pretty > p:first-of-type::first-letter {
    /* still styled, no animation needed */
  }
}
.cx-help-article.cx-help-article-pretty p {
  margin: 12px 0;
}
.cx-help-article.cx-help-article-pretty h2 {
  counter-increment: cx-help-section;
  font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--cx-fg);
  margin: 32px 0 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklab, var(--cx-line) 50%, transparent);
  position: relative;
  padding-left: 0;
  text-wrap: balance;
}
.cx-help-article.cx-help-article-pretty h2::before {
  content: "§ " counter(cx-help-section);
  display: block;
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--cx-accent);
  opacity: 0.7;
  margin-bottom: 4px;
}
.cx-help-article.cx-help-article-pretty h3 {
  font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--cx-fg);
  margin: 22px 0 6px;
  letter-spacing: 0.01em;
}
.cx-help-article.cx-help-article-pretty strong {
  color: var(--cx-fg);
  font-weight: 600;
}
.cx-help-article.cx-help-article-pretty em {
  font-style: italic;
  color: color-mix(in oklab, var(--cx-fg) 90%, var(--cx-accent));
}
.cx-help-article.cx-help-article-pretty a {
  color: var(--cx-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--cx-accent) 50%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 160ms ease;
}
.cx-help-article.cx-help-article-pretty a:hover {
  text-decoration-color: var(--cx-accent);
}

/* Inline code as subtle pill */
.cx-help-article.cx-help-article-pretty code {
  font-family: var(--cx-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.86em;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--cx-accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 22%, transparent);
  color: var(--cx-fg);
}

/* Lists */
.cx-help-article.cx-help-article-pretty ul,
.cx-help-article.cx-help-article-pretty ol {
  margin: 10px 0 14px;
  padding-left: 26px;
}
.cx-help-article.cx-help-article-pretty li {
  margin: 6px 0;
  line-height: 1.62;
}
.cx-help-article.cx-help-article-pretty ul li::marker {
  color: var(--cx-accent);
}

/* Pull-quote blockquote */
.cx-help-article.cx-help-article-pretty blockquote.cx-help-quote {
  position: relative;
  margin: 22px 0;
  padding: 8px 8px 8px 28px;
  border-left: 2px solid var(--cx-accent);
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: color-mix(in oklab, var(--cx-fg) 85%, var(--cx-fg-dim));
}
.cx-help-article.cx-help-article-pretty blockquote.cx-help-quote::before {
  content: "\201C"; /* left double quote */
  position: absolute;
  left: 4px;
  top: -6px;
  font-family: var(--cx-serif, Georgia, serif);
  font-size: 48px;
  line-height: 1;
  color: var(--cx-accent);
  opacity: 0.55;
}

/* Fenced code block */
.cx-help-article.cx-help-article-pretty .cx-help-code {
  position: relative;
  margin: 16px 0;
  border: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent);
  border-radius: 10px;
  background: color-mix(in oklab, var(--cx-bg, #0c0c10) 75%, black);
  overflow: hidden;
}
.cx-help-article.cx-help-article-pretty .cx-help-code pre {
  margin: 0;
  padding: 14px 14px 14px 16px;
  overflow-x: auto;
  font-family: var(--cx-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 13px;
  line-height: 1.55;
  color: var(--cx-fg);
}
.cx-help-article.cx-help-article-pretty .cx-help-code pre code {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  color: inherit;
}
.cx-help-code-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  appearance: none;
  background: color-mix(in oklab, var(--cx-bg, #0c0c10) 80%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent);
  color: var(--cx-fg-dim);
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 160ms ease, color 160ms ease, border-color 160ms ease;
}
.cx-help-code:hover .cx-help-code-copy { opacity: 1; }
.cx-help-code-copy:hover {
  color: var(--cx-fg);
  border-color: color-mix(in oklab, var(--cx-accent) 55%, var(--cx-line));
}
.cx-help-code-copy.is-ok {
  color: var(--cx-accent);
  border-color: var(--cx-accent);
  opacity: 1;
}

/* ── Article bar: prev/next pair ────────────────────────────────────── */
.cx-help-nav-pair {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--cx-fg-dim);
}
.cx-help-nav-btn {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--cx-fg-dim);
  padding: 6px 8px;
  min-height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}
.cx-help-nav-btn:hover:not(:disabled) {
  color: var(--cx-fg);
  border-color: color-mix(in oklab, var(--cx-accent) 40%, var(--cx-line));
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
}
.cx-help-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.cx-help-nav-sep { opacity: 0.4; }

/* ── Article tags (chip pills) ──────────────────────────────────────── */
.cx-help-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 22px 0 12px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in oklab, var(--cx-line) 50%, transparent);
}
.cx-help-tags .cx-help-tag {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--cx-fg) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-line) 70%, transparent);
  color: var(--cx-fg-dim);
}

/* ── Related articles ───────────────────────────────────────────────── */
.cx-help-related {
  margin: 28px 0 18px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in oklab, var(--cx-line) 50%, transparent);
}
.cx-help-related-head {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--cx-fg-dim);
  margin-bottom: 12px;
}
.cx-help-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.cx-help-related-card {
  appearance: none;
  text-align: left;
  background: color-mix(in oklab, var(--cx-bg, #0c0c10) 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  min-height: 64px;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.cx-help-related-card:hover,
.cx-help-related-card:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--cx-accent) 55%, var(--cx-line));
  background: color-mix(in oklab, var(--cx-accent) 6%, transparent);
  outline: none;
}
.cx-help-related-title {
  font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 15px;
  color: var(--cx-fg);
  font-weight: 500;
  margin-bottom: 4px;
}
.cx-help-related-tags {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--cx-fg-dim);
  letter-spacing: 0.04em;
}

/* ── Footer prev/next big cards ─────────────────────────────────────── */
.cx-help-foot-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 26px 0 20px;
}
.cx-help-foot-nav-btn {
  appearance: none;
  background: color-mix(in oklab, var(--cx-bg, #0c0c10) 65%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-line) 80%, transparent);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 64px;
  text-align: left;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.cx-help-foot-nav-btn.is-next { text-align: right; align-items: flex-end; }
.cx-help-foot-nav-btn:only-child { grid-column: 2; }
.cx-help-foot-nav-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--cx-accent) 55%, var(--cx-line));
  background: color-mix(in oklab, var(--cx-accent) 6%, transparent);
}
.cx-help-foot-nav-dir {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--cx-accent);
  text-transform: uppercase;
}
.cx-help-foot-nav-title {
  font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 15px;
  color: var(--cx-fg);
}

/* ── Skeleton shimmer ───────────────────────────────────────────────── */
.cx-help-skel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 4px;
}
.cx-help-skel-line {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--cx-fg) 6%, transparent) 0%,
    color-mix(in oklab, var(--cx-fg) 14%, transparent) 50%,
    color-mix(in oklab, var(--cx-fg) 6%, transparent) 100%);
  background-size: 200% 100%;
  animation: cx-help-shimmer 1.4s linear infinite;
}
@keyframes cx-help-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-help-skel-line { animation: none; }
}

.cx-help-trans-loading {
  padding: 4px 0 12px;
}
.cx-help-trans-loading-label {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--cx-fg-dim);
  text-align: center;
  margin-top: 4px;
}

/* ── Light mode tweaks ──────────────────────────────────────────────── */
.cx-app.is-light .cx-help-article.cx-help-article-pretty .cx-help-code {
  background: color-mix(in oklab, white 88%, var(--cx-line));
}
.cx-app.is-light .cx-help-article.cx-help-article-pretty code {
  background: color-mix(in oklab, var(--cx-accent) 10%, white);
}
.cx-app.is-light .cx-help-catcard,
.cx-app.is-light .cx-help-related-card,
.cx-app.is-light .cx-help-foot-nav-btn {
  background: color-mix(in oklab, white 92%, var(--cx-line));
}
.cx-app.is-light .cx-help-predict.cx-help-predict-pretty {
  background: white;
}

/* ── Mobile: stack things, keep touch targets generous ──────────────── */
@media (max-width: 560px) {
  .cx-help-catgrid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .cx-help-catcard { min-height: 130px; padding: 14px 12px; }
  .cx-help-foot-nav { grid-template-columns: 1fr; }
  .cx-help-foot-nav-btn.is-next { text-align: left; align-items: flex-start; }
  .cx-help-hero { padding-top: 12px; }
  .cx-help-hero-title { font-size: 28px; }
  .cx-help-article.cx-help-article-pretty { font-size: 16px; }
  .cx-help-nav-pair { display: none; } /* free up the bar on small screens */
  .cx-help-search-wrap.cx-help-search-wrap-pretty {
    flex-direction: column;
  }
  .cx-help-ask.cx-help-ask-pretty { width: 100%; }
}

/* ===== Gematria — Clickable + Kabbalistic ===== */

/* Generic clickable affordance — used on values, words, refs, and Kabbalah cards. */
.cx-gem-clickable {
  cursor: pointer;
  transition: color 120ms ease, text-shadow 120ms ease, background 120ms ease;
  position: relative;
}
.cx-gem-clickable:hover,
.cx-gem-clickable:focus-visible {
  color: var(--cx-accent, #4ad8e8);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  outline: none;
}
.cx-gem-clickable:focus-visible {
  outline: 1px dashed var(--cx-accent, #4ad8e8);
  outline-offset: 2px;
}
@keyframes cx-gem-flash {
  0%   { background: rgba(74, 216, 232, 0.30); }
  100% { background: transparent; }
}
.cx-gem-clickable:active { animation: cx-gem-flash 320ms ease-out; }

/* Crosslang strip — make each pill feel like a chip */
.cx-gem-crosslang > span.cx-gem-clickable {
  border-radius: 4px;
  padding: 2px 6px;
}

/* ── Value-detail modal ──────────────────────────────────────────── */
.cx-gem-modal-wrap {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.cx-gem-modal {
  background: var(--cx-bg, #0d0d10);
  border: 1px solid var(--cx-accent, #4ad8e8);
  border-radius: 6px;
  max-width: 520px; width: 100%;
  max-height: 80vh; overflow: auto;
  box-shadow: 0 0 60px rgba(74,216,232,0.18);
}
.cx-gem-modal-h {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--cx-fg-dim, #333);
  font-family: var(--cx-mono, monospace);
  letter-spacing: 0.06em;
}
.cx-gem-modal-val b { color: var(--cx-accent, #4ad8e8); font-size: 1.4em; margin-left: 6px; }
.cx-gem-modal-x {
  background: none; border: none; color: var(--cx-fg);
  font-size: 1.4em; cursor: pointer; padding: 0 6px;
}
.cx-gem-modal-x:hover { color: var(--cx-accent, #4ad8e8); }
.cx-gem-modal-meaning {
  padding: 12px 16px; border-bottom: 1px solid var(--cx-fg-dim, #333);
}
.cx-gem-modal-meaning p { margin: 0 0 6px; line-height: 1.45; }
.cx-gem-modal-concept i {
  color: var(--cx-accent, #4ad8e8); margin-right: 6px;
  font-style: normal; font-size: 0.85em; letter-spacing: 0.05em;
}
.cx-gem-modal-hits { padding: 12px 16px; }
.cx-gem-modal-hits h4 {
  margin: 0 0 8px; font-size: 0.75em;
  letter-spacing: 0.1em; color: var(--cx-fg-dim, #888);
}
.cx-gem-modal-list { list-style: none; margin: 0; padding: 0; }
.cx-gem-modal-list li {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 8px; padding: 6px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cx-gem-modal-list li:hover { background: rgba(74,216,232,0.06); }

/* ── Kabbalah section — the hidden compartment ──────────────────── */
.cx-gem-kab {
  margin-top: 8px;
  /* Slightly different aesthetic — purple-leaning vs accent-cyan. */
  --cx-kab-accent: #9b6bd8;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(155,107,216,0.04), transparent 60%),
    transparent;
  border: 1px solid transparent;
  border-image: linear-gradient(135deg, rgba(155,107,216,0.4), rgba(74,216,232,0.2), rgba(155,107,216,0.4)) 1;
}
.cx-gem-kab .cx-coll-h { color: var(--cx-kab-accent); }
.cx-gem-kab-title {
  letter-spacing: 0.12em;
  background: linear-gradient(90deg, #9b6bd8, #4ad8e8, #9b6bd8);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cx-gem-kab-block { padding: 10px 12px; }
.cx-gem-kab-block + .cx-gem-kab-block {
  border-top: 1px dashed rgba(155,107,216,0.25);
}
.cx-gem-kab-block h4 {
  margin: 0 0 8px; font-size: 0.7em;
  letter-spacing: 0.14em; color: var(--cx-kab-accent);
}

.cx-gem-kab-tree {
  display: block;
  max-width: 140px;
  margin: 0 auto 10px;
}
.cx-gem-kab-tree text { font-family: var(--cx-mono, monospace); }

.cx-gem-kab-sefirot {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
}
.cx-gem-kab-card {
  display: grid; gap: 2px; padding: 6px 8px; text-align: left;
  background: rgba(155,107,216,0.04);
  border: 1px solid rgba(155,107,216,0.35);
  border-radius: 4px;
  font: inherit; color: inherit; cursor: pointer;
}
.cx-gem-kab-card:hover,
.cx-gem-kab-card.is-on { background: rgba(155,107,216,0.12); }
.cx-gem-kab-heb { font-size: 1.05em; }
.cx-gem-kab-tr  { color: var(--cx-kab-accent); font-size: 0.85em; letter-spacing: 0.05em; }
.cx-gem-kab-mean { font-size: 0.8em; opacity: 0.8; }
.cx-gem-kab-val  {
  display: inline-block; margin-top: 4px; padding: 1px 6px;
  border-radius: 3px; background: rgba(74,216,232,0.1);
  font-family: var(--cx-mono, monospace); font-weight: bold;
  align-self: start;
}
.cx-gem-kab-note { font-size: 0.78em; opacity: 0.7; margin-top: 2px; }
.cx-gem-kab-detail {
  margin-top: 8px; padding: 8px;
  background: rgba(0,0,0,0.25);
  border-left: 2px solid var(--cx-kab-accent);
  font-size: 0.88em;
}
.cx-gem-kab-detail-body { opacity: 0.85; margin: 4px 0 0; }

.cx-gem-kab-echoes { list-style: none; margin: 0; padding: 0; }
.cx-gem-kab-echoes li {
  display: grid; grid-template-columns: auto auto 1fr;
  gap: 8px; align-items: baseline; padding: 4px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.cx-gem-kab-echo-val {
  background: rgba(74,216,232,0.1); border: 1px solid rgba(74,216,232,0.3);
  border-radius: 3px; padding: 1px 6px; color: inherit;
  font-family: var(--cx-mono, monospace); font-weight: bold; cursor: pointer;
}
.cx-gem-kab-echo-cat {
  font-size: 0.72em; letter-spacing: 0.08em;
  color: var(--cx-kab-accent); text-transform: uppercase;
}
.cx-gem-kab-echo-txt { font-size: 0.88em; opacity: 0.88; }

.cx-gem-kab-luri, .cx-gem-kab-partzuf {
  padding: 8px; border-radius: 4px;
  background: rgba(155,107,216,0.06);
}
.cx-gem-kab-luri-name { font-size: 1.05em; margin-bottom: 4px; }
.cx-gem-kab-luri-name span { margin-left: 8px; color: var(--cx-kab-accent); }
.cx-gem-kab-luri-ai { opacity: 0.85; font-style: italic; }
.cx-gem-kab-src {
  display: block; margin-top: 4px;
  font-size: 0.72em; letter-spacing: 0.06em; opacity: 0.6;
}

.cx-gem-kab-zohar { margin-bottom: 8px; }
.cx-gem-kab-zohar-ref {
  font-family: var(--cx-mono, monospace);
  font-size: 0.78em; color: var(--cx-kab-accent);
  letter-spacing: 0.06em;
}

/* ===== Schizo Mode ===== */
/* Easter-egg numerology overlay. Unlocked by visiting Rev 13:18, toggled
   in Settings → Look. Visuals stay subtle so the app is still readable. */

/* Settings toggle label — faint glitch flicker every ~8s. Easy to miss
   unless you're looking. */
.cx-schizo-toggle .twk-row-lbl,
.cx-schizo-toggle label {
  position: relative;
  animation: cx-schizo-flicker 8s infinite steps(1, end);
}
@keyframes cx-schizo-flicker {
  0%, 96%, 100% { text-shadow: none; }
  96.5% { text-shadow: 0.6px 0 #ff3b3b, -0.6px 0 #00e5ff; }
  97% { text-shadow: -0.6px 0 #ff3b3b, 0.6px 0 #00e5ff; }
  97.5% { text-shadow: 0.6px 0 #00e5ff, -0.6px 0 #ff3b3b; }
  98% { text-shadow: none; }
}

/* Faint floating gematria value in the verse margin. */
.cx-verse, .cx-verse-row { position: relative; }
.cx-schizo-gem {
  position: absolute;
  left: -2.6em; top: 0.55em;
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--cx-fg-dim, rgba(220,220,220,0.45));
  opacity: 0.55;
  pointer-events: auto;
  cursor: help;
  user-select: none;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .cx-schizo-gem { left: 0; top: -0.9em; font-size: 8px; }
}

/* Significant-number glow. Pulses softly. */
.cx-schizo-gem.is-glow {
  opacity: 0.9;
  padding: 0 3px;
  border-radius: 2px;
  animation: cx-schizo-pulse 2.4s ease-in-out infinite;
}
.cx-schizo-gem.is-rev    { color: #ff5b5b; --cx-schizo-glow: rgba(255,91,91,0.55); }
.cx-schizo-gem.is-gold   { color: #ffd66b; --cx-schizo-glow: rgba(255,214,107,0.55); }
.cx-schizo-gem.is-cyan   { color: #7ee0ff; --cx-schizo-glow: rgba(126,224,255,0.55); }
.cx-schizo-gem.is-violet { color: #c7a9ff; --cx-schizo-glow: rgba(199,169,255,0.55); }
.cx-schizo-gem.is-blue   { color: #7fb2ff; --cx-schizo-glow: rgba(127,178,255,0.55); }
.cx-schizo-gem.is-white  { color: #ffffff; --cx-schizo-glow: rgba(255,255,255,0.55); }
.cx-schizo-gem.is-accent { color: #8de8a8; --cx-schizo-glow: rgba(141,232,168,0.45); }
@keyframes cx-schizo-pulse {
  0%, 100% { text-shadow: 0 0 4px var(--cx-schizo-glow), 0 0 1px var(--cx-schizo-glow); }
  50%      { text-shadow: 0 0 10px var(--cx-schizo-glow), 0 0 3px var(--cx-schizo-glow); }
}

/* Visual tone — applied via .cx-app.is-schizo (set in app.jsx). */
.cx-app.is-schizo.is-dark { /* tint marker only; overlay via ::after below */ }
.cx-app.is-schizo .cx-vnum {
  font-family: var(--cx-mono, ui-monospace, monospace);
  letter-spacing: 0.08em;
}
/* Faint matrix-green wash on dark mode. Sits below the existing vignette. */
.cx-app.is-schizo.is-dark::before {
  background:
    radial-gradient(ellipse at top, transparent 60%, rgba(0,0,0,.55) 100%),
    radial-gradient(ellipse at bottom, transparent 70%, rgba(0,0,0,.4) 100%),
    linear-gradient(rgba(0, 255, 130, 0.04), rgba(0, 255, 130, 0.04));
}
/* Faint scanlines even when the regular scanlines tweak is off (~60%
   intensity vs the regular .has-scan overlay). */
.cx-app.is-schizo:not(.has-scan)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 21;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.015) 0,
    rgba(255,255,255,.015) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

/* Corner sigil — small ⚯ glyph indicating mode is active. */
.cx-schizo-sigil {
  position: fixed;
  right: 14px; bottom: 44px;
  z-index: 30;
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 18px;
  color: #8de8a8;
  text-shadow: 0 0 8px rgba(141, 232, 168, 0.55);
  opacity: 0.7;
  pointer-events: none;
  animation: cx-schizo-pulse 3.2s ease-in-out infinite;
  --cx-schizo-glow: rgba(141, 232, 168, 0.5);
}

/* ===== Exegesis + Translation Analysis ===== */
.cx-pane-exeg .cx-exeg-list { display: flex; flex-direction: column; gap: 8px; }
.cx-exeg-terms { display: flex; flex-direction: column; gap: 10px; }
.cx-exeg-term {
  border-left: 2px solid var(--cx-accent, #c9a86a);
  padding: 6px 10px;
  background: rgba(255,255,255,0.02);
  border-radius: 0 4px 4px 0;
}
.cx-exeg-term header {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  margin-bottom: 6px;
}
.cx-exeg-term-en { font-weight: 600; letter-spacing: 0.04em; }
.cx-exeg-term-orig {
  font-family: "SBL Hebrew", "SBL Greek", serif;
  font-size: 1.05em; color: var(--cx-accent, #c9a86a);
}
.cx-exeg-term-tr {
  font-family: var(--cx-mono, monospace);
  font-size: 0.78em; opacity: 0.7;
}
.cx-exeg-term p { margin: 4px 0; font-size: 0.9em; line-height: 1.5; }
.cx-exeg-para { line-height: 1.6; padding: 4px 2px; font-size: 0.92em; }
.cx-exeg-para.is-emph {
  border-left: 2px solid var(--cx-accent, #c9a86a);
  padding-left: 10px; font-style: italic;
}
.cx-exeg-opts { display: flex; flex-direction: column; gap: 8px; }
.cx-exeg-opt {
  padding: 8px 10px; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px; background: rgba(255,255,255,0.015);
}
.cx-exeg-opt h4 {
  margin: 0 0 2px; font-size: 0.9em;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.cx-exeg-scholars {
  font-size: 0.74em; opacity: 0.7; font-style: italic;
  display: block; margin-bottom: 4px;
}
.cx-exeg-opt p { margin: 4px 0 0; font-size: 0.88em; line-height: 1.5; }

/* Translation analysis */
.cx-pane-txan { display: flex; flex-direction: column; gap: 6px; }
.cx-txan-empty, .cx-txan-preview {
  padding: 14px; text-align: left;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 6px; margin: 10px 6px;
}
.cx-txan-empty b { display: block; margin-bottom: 6px; letter-spacing: 0.06em; }
.cx-txan-empty span { font-size: 0.86em; opacity: 0.75; line-height: 1.5; }
.cx-txan-preview-h {
  font-size: 0.72em; letter-spacing: 0.1em;
  text-transform: uppercase; opacity: 0.6; margin-bottom: 6px;
}
.cx-txan-preview ul { list-style: none; padding: 0; margin: 0; }
.cx-txan-preview li {
  padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 0.88em;
}
.cx-txan-preview li:first-child { border-top: none; }
.cx-txan-preview li b { display: block; font-size: 0.78em; opacity: 0.85; }
.cx-txan-prev-text { font-style: italic; opacity: 0.8; }
.cx-txan-table-wrap { overflow-x: auto; }
.cx-txan-table {
  width: 100%; border-collapse: collapse; font-size: 0.82em;
}
.cx-txan-table th, .cx-txan-table td {
  text-align: left; padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: top;
}
.cx-txan-table th {
  font-size: 0.7em; letter-spacing: 0.08em;
  text-transform: uppercase; opacity: 0.65;
}
.cx-txan-text { font-style: italic; min-width: 160px; max-width: 280px; }
.cx-txan-key { font-size: 0.85em; opacity: 0.85; }
.cx-txan-phil {
  display: inline-block; padding: 1px 6px; border-radius: 8px;
  font-size: 0.72em; letter-spacing: 0.05em;
  background: rgba(255,255,255,0.06);
}
.cx-txan-phil.isformal      { background: rgba(110,160,200,0.15); color: #9dc4e6; }
.cx-txan-phil.isdynamic     { background: rgba(180,140,80,0.18);  color: #d4a96b; }
.cx-txan-phil.isparaphrase  { background: rgba(150,90,170,0.18);  color: #c8a0e0; }
.cx-txan-phil.isinterlinear { background: rgba(100,160,120,0.18); color: #9fd4b3; }
.cx-txan-div-list { display: flex; flex-direction: column; gap: 10px; }
.cx-txan-div {
  padding: 8px 10px; border-left: 2px solid var(--cx-accent, #c9a86a);
  background: rgba(255,255,255,0.02); border-radius: 0 4px 4px 0;
}
.cx-txan-div h4 {
  margin: 0 0 4px; font-size: 0.88em;
  letter-spacing: 0.04em;
}
.cx-txan-opts { margin: 4px 0; padding-left: 16px; font-size: 0.85em; }
.cx-txan-opts li { margin: 2px 0; line-height: 1.4; }
.cx-txan-split { margin: 6px 0 0; font-size: 0.82em; opacity: 0.8; }
.cx-txan-recs { list-style: none; padding: 0; margin: 0; }
.cx-txan-recs li {
  padding: 6px 0; font-size: 0.88em; line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.cx-txan-recs li:first-child { border-top: none; }

/* ===== Semantic Search ===== */
/* Mode tabs (TEXT / CONCEPT) at the top of the search modal */
.cx-search-modes {
  display: flex;
  gap: 0;
  padding: 8px 12px 0 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cx-search-mode-tab {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--cx-fg-dim, #8a95a3);
  font-family: var(--cx-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 600;
  padding: 6px 14px 8px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.cx-search-mode-tab:hover { color: var(--cx-fg, #e6e8eb); }
.cx-search-mode-tab.is-active {
  color: var(--cx-accent, #6dd2c7);
  border-bottom-color: var(--cx-accent, #6dd2c7);
}

/* Concept-mode rich result rows */
.cx-search-concept-list { padding-top: 4px; }
.cx-search-concept-row {
  display: block;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.cx-search-concept-row.is-unjumpable { opacity: 0.75; cursor: default; }
.cx-search-concept-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.cx-search-concept-ref {
  font-family: var(--cx-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--cx-accent, #6dd2c7);
}
.cx-search-concept-text {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--cx-fg, #e6e8eb);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cx-search-concept-why {
  margin-top: 4px;
  font-style: italic;
  font-size: 12px;
  color: var(--cx-fg-dim, #8a95a3);
  line-height: 1.4;
}

/* Relevance dots (5 max) */
.cx-search-dots { display: inline-flex; gap: 3px; }
.cx-search-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
}
.cx-search-dot.is-on { background: var(--cx-accent, #6dd2c7); }

/* Skeleton shimmer for loading state */
.cx-search-skel { pointer-events: none; }
.cx-search-skel-line {
  height: 10px;
  border-radius: 3px;
  margin: 6px 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.05) 100%
  );
  background-size: 200% 100%;
  animation: cx-search-shimmer 1.3s linear infinite;
}
.cx-search-skel-ref  { width: 28%; }
.cx-search-skel-text { width: 92%; height: 12px; }
.cx-search-skel-why  { width: 65%; height: 9px; opacity: 0.7; }
@keyframes cx-search-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.cx-search-concept-err {
  padding: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cx-fg-dim, #8a95a3);
}

/* ===== Reading Plans ===== */
.cx-plans { display: flex; flex-direction: column; gap: 14px; padding: 12px 14px 24px; color: #c9d4dc; }
.cx-plans-empty { padding: 24px; opacity: 0.7; font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 12px; }
.cx-plans-head { border-bottom: 1px solid #1f2a36; padding-bottom: 10px; }
.cx-plans-title {
  font-family: "Cormorant Garamond", "Cardo", Georgia, serif;
  font-size: 22px; letter-spacing: 0.14em; color: #e9eef3;
}
.cx-plans-sub { font-size: 11px; opacity: 0.55; margin-top: 2px; letter-spacing: 0.04em; }

.cx-plans-list { display: flex; flex-direction: column; gap: 6px; }
.cx-plan-card {
  text-align: left; background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06); border-left: 3px solid #2a3644;
  color: #c9d4dc; padding: 10px 12px; cursor: pointer;
  font: inherit; transition: background 120ms, border-color 120ms;
}
.cx-plan-card:hover { background: rgba(255,255,255,0.04); }
.cx-plan-card.is-open { border-left-color: #7ee0ff; background: rgba(126,224,255,0.04); }
.cx-plan-card.is-started { border-left-color: #ffc46b; }
.cx-plan-card.is-open.is-started { border-left-color: #ffc46b; }
.cx-plan-card-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cx-plan-card-name {
  font-family: "Cormorant Garamond", "Cardo", Georgia, serif;
  font-size: 16px; font-weight: 500; color: #e9eef3;
}
.cx-plan-badge {
  font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: 0.18em;
  color: #06080e; background: #ffc46b; padding: 2px 6px; border-radius: 2px;
}
.cx-plan-card-meta { font-size: 10px; letter-spacing: 0.1em; opacity: 0.55; margin-top: 2px; text-transform: uppercase; }
.cx-plan-card-desc { font-size: 12px; opacity: 0.75; margin-top: 5px; line-height: 1.45; }

.cx-plan-detail {
  border-top: 1px solid #1f2a36; padding-top: 14px; margin-top: 6px;
  display: flex; flex-direction: column; gap: 14px;
}
.cx-plan-detail-empty { text-align: center; padding: 20px 12px; }
.cx-plan-detail-empty p { margin: 6px 0; font-size: 13px; }
.cx-plan-detail-empty-sub { opacity: 0.6; font-size: 11px; }
.cx-plan-detail-head { display: flex; flex-direction: column; gap: 2px; }
.cx-plan-detail-name {
  font-family: "Cormorant Garamond", "Cardo", Georgia, serif;
  font-size: 18px; color: #e9eef3;
}
.cx-plan-detail-meta { font-size: 11px; opacity: 0.7; }
.cx-plan-streak { color: #ffc46b; margin-left: 4px; }

.cx-plan-catchup {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: rgba(255,196,107,0.08); border: 1px solid rgba(255,196,107,0.25);
  padding: 8px 10px; font-size: 12px;
}

.cx-plan-today-label,
.cx-plan-cal-label {
  font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.22em;
  color: #7ee0ff; margin-bottom: 6px;
}
.cx-plan-today-parshah {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 13px; opacity: 0.8; margin-bottom: 6px;
}
.cx-plan-readings { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.cx-plan-reading { display: flex; align-items: center; gap: 8px; }
.cx-plan-reading.is-done .cx-plan-readlink { text-decoration: line-through; opacity: 0.5; }
.cx-plan-check {
  width: 22px; height: 22px; flex-shrink: 0;
  background: transparent; color: #7ee0ff;
  border: 1px solid #2a3644; cursor: pointer;
  font-size: 13px; font-family: ui-monospace, monospace;
  display: flex; align-items: center; justify-content: center;
}
.cx-plan-reading.is-done .cx-plan-check { background: #7ee0ff; color: #06080e; border-color: #7ee0ff; }
.cx-plan-readlink {
  flex: 1; text-align: left;
  background: transparent; border: none; color: #c9d4dc;
  font: inherit; font-size: 13px; cursor: pointer;
  padding: 4px 6px; border-radius: 2px;
}
.cx-plan-readlink:hover:not(:disabled) { background: rgba(126,224,255,0.06); color: #e9eef3; }
.cx-plan-readlink:disabled { cursor: default; opacity: 0.6; }

.cx-plan-done-all { text-align: center; padding: 20px; }
.cx-plan-done-glyph { font-size: 24px; color: #ffc46b; margin-bottom: 6px; }

.cx-plan-cal-wrap { border-top: 1px solid #1f2a36; padding-top: 12px; }
.cx-plan-cal {
  display: grid; grid-auto-rows: 8px; grid-auto-flow: column;
  gap: 2px; grid-template-rows: repeat(7, 8px);
}
.cx-plan-cell {
  width: 8px; height: 8px; background: #1a2230; border-radius: 1px;
  display: inline-block;
}
.cx-plan-cell.is-done   { background: #7ee0ff; }
.cx-plan-cell.is-miss   { background: #4a2530; }
.cx-plan-cell.is-today  { background: #ffc46b; }
.cx-plan-cell.is-future { background: #1a2230; }
.cx-plan-cal-legend {
  margin-top: 8px; font-size: 10px; letter-spacing: 0.06em; opacity: 0.6;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.cx-plan-cal-legend .cx-plan-cell { margin-right: 2px; margin-left: 8px; }
.cx-plan-cal-legend .cx-plan-cell:first-child { margin-left: 0; }

.cx-plan-actions { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid #1f2a36; padding-top: 12px; }
.cx-plan-btn {
  background: transparent; color: #c9d4dc;
  border: 1px solid #2a3644; cursor: pointer;
  font: inherit; font-size: 11px; letter-spacing: 0.08em;
  padding: 7px 11px; text-transform: uppercase;
}
.cx-plan-btn:hover { background: rgba(126,224,255,0.06); border-color: #7ee0ff; color: #e9eef3; }
.cx-plan-btn-primary { background: #ffc46b; color: #06080e; border-color: #ffc46b; }
.cx-plan-btn-primary:hover { background: #ffd494; color: #06080e; }
.cx-plan-btn-danger:hover { background: rgba(255,107,107,0.08); border-color: #ff6b6b; color: #ff6b6b; }

/* =====================================================================
   Plugin Panel Host — error boundary + crash-safe DOM-mount wrapper.
   ===================================================================== */
.cx-plugin-error {
  padding: 18px 16px;
  margin: 12px;
  border-left: 3px solid #ff8291;
  background: color-mix(in oklab, #ff8291 8%, transparent);
  border-radius: 0 4px 4px 0;
  font-family: var(--cx-sans);
  font-size: 13px;
  color: var(--cx-fg);
}
.cx-plugin-error b {
  display: block;
  margin-bottom: 8px;
  color: #ff8291;
  font-family: var(--cx-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cx-plugin-error pre {
  margin: 4px 0 8px;
  padding: 8px 10px;
  background: rgba(0,0,0,.25);
  border-radius: 3px;
  font-family: var(--cx-mono);
  font-size: 11.5px;
  white-space: pre-wrap;
  word-break: break-word;
}
.cx-plugin-error small {
  display: block;
  opacity: .65;
  font-style: italic;
}
.cx-plugin-mount-dom { min-height: 0; flex: 1; }

/* ===== Passage Guide ===== */
/* Phase 2.3 — single-page chapter synthesis. Self-contained styles.
   Aesthetic: printed study sheet — serif hero, monospaced eyebrows,
   accent-rule dividers. Works inside the standard .cx-pane host. */
.cx-pg {
  font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif);
  color: var(--cx-fg);
  line-height: 1.6;
  padding: 4px 6px 18px;
}
.cx-pg-empty {
  padding: 32px 12px;
  text-align: center;
  color: var(--cx-fg-dim);
  font-style: italic;
  font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif);
}
.cx-pg-error {
  margin: 10px 0;
  padding: 8px 12px;
  border-left: 2px solid var(--cx-warn, #ffc46b);
  background: color-mix(in oklab, var(--cx-warn, #ffc46b) 8%, transparent);
  color: var(--cx-fg);
  font-size: 13px;
  font-family: var(--cx-mono, ui-monospace, monospace);
}

/* Hero */
.cx-pg-hero {
  padding: 18px 4px 12px;
  margin: 2px 0 14px;
}
.cx-pg-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cx-fg-dim);
  margin-bottom: 10px;
}
.cx-pg-hero-cat { color: var(--cx-accent); font-weight: 600; }
.cx-pg-hero-dot { opacity: 0.5; }
.cx-pg-hero-title {
  font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 500;
  font-size: clamp(26px, 3.8vw, 38px);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--cx-fg);
  margin: 0 0 10px;
  text-wrap: balance;
}
.cx-pg-hero-overview {
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--cx-fg);
  opacity: 0.92;
  margin: 4px 0 12px;
  max-width: 56ch;
}
.cx-pg-hero-rule {
  height: 1px;
  width: 64px;
  background: linear-gradient(90deg,
    var(--cx-accent) 0%, transparent 100%);
  margin: 8px 0 10px;
}
.cx-pg-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cx-pg-btn {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  color: var(--cx-accent);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 50%, transparent);
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.cx-pg-btn:hover:not(:disabled) {
  background: color-mix(in oklab, var(--cx-accent) 18%, transparent);
}
.cx-pg-btn:disabled { opacity: 0.55; cursor: default; }
.cx-pg-prov {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cx-fg-dim);
  opacity: 0.7;
}

/* Sections */
.cx-pg-section { margin: 0 0 22px; }
.cx-pg-sec-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  padding: 8px 2px 6px;
  border-top: 1px solid color-mix(in oklab, var(--cx-line, #2a3340) 50%, transparent);
  user-select: none;
  outline: none;
}
.cx-pg-sec-head:focus-visible {
  outline: 1px solid var(--cx-accent);
  outline-offset: 2px;
}
.cx-pg-sec-kind {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--cx-accent);
  opacity: 0.75;
  min-width: 24px;
}
.cx-pg-sec-title {
  font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  color: var(--cx-fg);
  margin: 0;
  flex: 1;
}
.cx-pg-sec-chev {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 14px;
  color: var(--cx-fg-dim);
  opacity: 0.6;
}
.cx-pg-sec-body { padding: 6px 2px 4px; }

/* Outline */
.cx-pg-outline {
  list-style: none;
  counter-reset: cx-pg-out;
  padding: 0; margin: 0;
}
.cx-pg-outline-item {
  counter-increment: cx-pg-out;
  position: relative;
  padding: 8px 0 10px 30px;
  border-bottom: 1px dashed color-mix(in oklab, var(--cx-line, #2a3340) 35%, transparent);
  cursor: pointer;
  transition: padding-left 120ms ease;
}
.cx-pg-outline-item:last-child { border-bottom: none; }
.cx-pg-outline-item::before {
  content: counter(cx-pg-out, upper-roman) ".";
  position: absolute;
  left: 0; top: 9px;
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--cx-accent);
  opacity: 0.8;
}
.cx-pg-outline-item:hover { padding-left: 34px; }
.cx-pg-outline-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.cx-pg-outline-title {
  font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--cx-fg);
}
.cx-pg-outline-range {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--cx-fg-dim);
  letter-spacing: 0.06em;
}
.cx-pg-outline-sum {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cx-fg);
  opacity: 0.86;
}

/* Themes */
.cx-pg-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cx-pg-theme {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: color-mix(in oklab, var(--cx-accent) 9%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 35%, transparent);
  color: var(--cx-fg);
  font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 15px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.cx-pg-theme:hover {
  background: color-mix(in oklab, var(--cx-accent) 22%, transparent);
  transform: translateY(-1px);
}
.cx-pg-theme-name { font-weight: 500; }
.cx-pg-theme-anchor {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--cx-accent);
  opacity: 0.8;
}

/* Cross-refs */
.cx-pg-xrefs { display: flex; flex-direction: column; gap: 10px; }
.cx-pg-xref-group {
  padding: 6px 0;
  border-left: 2px solid color-mix(in oklab, var(--cx-accent) 45%, transparent);
  padding-left: 10px;
}
.cx-pg-xref-theme {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cx-accent);
  opacity: 0.85;
  margin-bottom: 4px;
}
.cx-pg-xref-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px 10px;
}
.cx-pg-xref-btn {
  background: transparent;
  border: 1px dashed color-mix(in oklab, var(--cx-line, #2a3340) 70%, transparent);
  color: var(--cx-fg);
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
}
.cx-pg-xref-btn:hover {
  border-color: var(--cx-accent);
  color: var(--cx-accent);
}
.cx-pg-xref-from {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--cx-fg-dim);
  opacity: 0.6;
  margin-left: 4px;
}

/* Word studies */
.cx-pg-words { list-style: none; padding: 0; margin: 0; }
.cx-pg-word {
  padding: 10px 0;
  border-bottom: 1px dashed color-mix(in oklab, var(--cx-line, #2a3340) 35%, transparent);
}
.cx-pg-word:last-child { border-bottom: none; }
.cx-pg-word-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.cx-pg-word-orig {
  font-family: var(--cx-serif, "Cardo", "Cormorant Garamond", Georgia, serif);
  font-size: 20px;
  color: var(--cx-fg);
  direction: rtl;
  unicode-bidi: plaintext;
}
.cx-pg-word-translit {
  font-style: italic;
  font-size: 14px;
  color: var(--cx-fg-dim);
}
.cx-pg-word-strongs {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  background: color-mix(in oklab, var(--cx-accent) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 40%, transparent);
  color: var(--cx-accent);
  padding: 1px 6px;
  border-radius: 3px;
  cursor: pointer;
}
.cx-pg-word-strongs:hover:not(:disabled) {
  background: color-mix(in oklab, var(--cx-accent) 28%, transparent);
}
.cx-pg-word-strongs:disabled { opacity: 0.5; cursor: default; }
.cx-pg-word-anchor {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10.5px;
  color: var(--cx-fg-dim);
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--cx-line, #2a3340) 60%, transparent);
  padding: 1px 6px;
  border-radius: 3px;
  cursor: pointer;
}
.cx-pg-word-anchor:hover { color: var(--cx-accent); border-color: var(--cx-accent); }
.cx-pg-word-gloss {
  margin-top: 4px;
  font-size: 15px;
  color: var(--cx-fg);
  opacity: 0.9;
}
.cx-pg-word-lex { color: var(--cx-fg-dim); }

/* Numerology */
.cx-pg-num { list-style: none; padding: 0; margin: 0; }
.cx-pg-num-row {
  display: flex;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed color-mix(in oklab, var(--cx-line, #2a3340) 35%, transparent);
}
.cx-pg-num-row:last-child { border-bottom: none; }
.cx-pg-num-val {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 22px;
  font-weight: 600;
  color: var(--cx-accent);
  min-width: 56px;
  text-align: right;
  letter-spacing: 0.04em;
  line-height: 1.1;
  padding-top: 2px;
}
.cx-pg-num-body { flex: 1; }
.cx-pg-num-concept {
  font-size: 15px;
  line-height: 1.5;
  color: var(--cx-fg);
}
.cx-pg-num-cite {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--cx-fg-dim);
}
.cx-pg-num-word {
  font-family: var(--cx-serif, "Cardo", "Cormorant Garamond", Georgia, serif);
  direction: rtl;
  unicode-bidi: plaintext;
}
.cx-pg-num-sys {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Prose blocks */
.cx-pg-prose {
  font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 16px;
  line-height: 1.65;
  color: var(--cx-fg);
  margin: 4px 0;
  max-width: 62ch;
}
.cx-pg-synth {
  font-style: italic;
  font-size: 17px;
  border-left: 2px solid var(--cx-accent);
  padding-left: 12px;
}
.cx-pg-muted {
  color: var(--cx-fg-dim);
  font-style: italic;
  font-size: 14px;
}
.cx-pg-link {
  background: transparent;
  border: none;
  color: var(--cx-accent);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cx-pg-link:hover { opacity: 0.85; }

/* Related */
.cx-pg-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.cx-pg-related-card {
  text-align: left;
  background: color-mix(in oklab, var(--cx-accent) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-line, #2a3340) 70%, transparent);
  border-radius: 4px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.cx-pg-related-card:hover {
  border-color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 14%, transparent);
}
.cx-pg-related-label {
  font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--cx-fg);
  margin-bottom: 2px;
}
.cx-pg-related-sum {
  font-size: 13px;
  color: var(--cx-fg-dim);
  line-height: 1.45;
}

/* Footer */
.cx-pg-foot {
  margin-top: 22px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklab, var(--cx-line, #2a3340) 50%, transparent);
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cx-fg-dim);
  opacity: 0.6;
  text-align: center;
}

/* Skeleton */
.cx-pg-skeleton { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.cx-pg-skel-line {
  height: 12px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--cx-fg-dim) 18%, transparent),
    color-mix(in oklab, var(--cx-fg-dim) 8%, transparent),
    color-mix(in oklab, var(--cx-fg-dim) 18%, transparent));
  background-size: 200% 100%;
  border-radius: 3px;
  animation: cx-pg-shimmer 1.4s linear infinite;
}
@keyframes cx-pg-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-pg-skel-line { animation: none; }
}

/* Mobile: tighten paddings, smaller hero */
@media (max-width: 720px) {
  .cx-pg-hero-title { font-size: clamp(22px, 7vw, 30px); }
  .cx-pg-hero-overview { font-size: 15px; }
  .cx-pg-sec-title { font-size: 18px; }
  .cx-pg-prose, .cx-pg-synth { font-size: 15px; }
  .cx-pg-related { grid-template-columns: 1fr; }
}

/* ===== Sermon Builder ===== */
.cx-builder {
  display: flex; flex-direction: column;
  font-family: var(--cx-font-ui, ui-sans-serif, system-ui);
  font-size: 13px;
  color: var(--cx-fg, #c9d4dc);
  padding: 8px 10px 14px;
  gap: 10px;
}
.cx-builder-hdr {
  border-bottom: 1px solid var(--cx-rule, rgba(126,224,255,0.18));
  padding-bottom: 8px;
}
.cx-builder-titlerow {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85;
}
.cx-builder-glyph { color: var(--cx-accent, #7ee0ff); font-size: 14px; }
.cx-builder-titlerow b { letter-spacing: 0.18em; }
.cx-builder-titlerow .cx-builder-btn { margin-left: auto; }
.cx-builder-studylist { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; max-height: 26vh; overflow: auto; }
.cx-builder-studyrow {
  display: flex; align-items: stretch; gap: 4px;
  border: 1px solid transparent; border-radius: 3px;
}
.cx-builder-studyrow.is-active {
  border-color: var(--cx-accent, #7ee0ff);
  background: rgba(126,224,255,0.06);
}
.cx-builder-studybtn {
  flex: 1; background: transparent; border: 0; padding: 6px 8px;
  text-align: left; color: inherit; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; gap: 2px;
}
.cx-builder-studytitle { font-weight: 600; font-size: 13px; }
.cx-builder-studymeta { font-size: 10px; opacity: 0.55; letter-spacing: 0.06em; }
.cx-builder-del {
  background: transparent; border: 0; color: var(--cx-fg, #c9d4dc);
  opacity: 0.4; cursor: pointer; padding: 0 6px; font-size: 16px; line-height: 1;
}
.cx-builder-del:hover { opacity: 1; color: var(--cx-warn, #ffc46b); }

.cx-builder-active {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px dashed transparent; padding: 4px; border-radius: 4px;
  transition: border-color 150ms ease, background 150ms ease;
}
.cx-builder-active.cx-builder-dropactive {
  border-color: var(--cx-accent, #7ee0ff);
  background: rgba(126,224,255,0.05);
}
.cx-builder-empty {
  opacity: 0.55; font-size: 12px; padding: 12px 6px; text-align: center;
  font-style: italic;
}
.cx-builder-itemempty {
  border: 1px dashed var(--cx-rule, rgba(126,224,255,0.18));
  border-radius: 3px; margin: 4px 0; list-style: none;
}
.cx-builder-title-input {
  background: transparent;
  border: 0; border-bottom: 1px dotted var(--cx-rule, rgba(126,224,255,0.18));
  color: inherit; font-family: "Cormorant Garamond", Cardo, Georgia, serif;
  font-size: 18px; font-weight: 600; padding: 4px 2px;
  outline: none; width: 100%;
}
.cx-builder-title-input:focus { border-bottom-color: var(--cx-accent, #7ee0ff); }

.cx-builder-section {
  border: 1px solid var(--cx-rule, rgba(126,224,255,0.14));
  border-radius: 4px; padding: 6px 8px;
  background: rgba(255,255,255,0.015);
}
.cx-builder-sechead {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.cx-builder-heading-input {
  flex: 1; background: transparent; border: 0;
  border-bottom: 1px dotted transparent;
  color: inherit; font-family: "Cormorant Garamond", Cardo, Georgia, serif;
  font-size: 15px; font-weight: 600; padding: 2px 0; outline: none;
}
.cx-builder-heading-input:focus { border-bottom-color: var(--cx-accent, #7ee0ff); }
.cx-builder-grip {
  cursor: grab; opacity: 0; color: var(--cx-fg, #c9d4dc);
  font-size: 11px; padding: 0 2px;
  transition: opacity 120ms ease;
}
.cx-builder-section:hover .cx-builder-grip,
.cx-builder-item:hover .cx-builder-grip { opacity: 0.5; }
.cx-builder-grip:active { cursor: grabbing; opacity: 1; }

.cx-builder-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cx-builder-item {
  display: flex; align-items: flex-start; gap: 4px;
  padding: 5px 6px;
  border-radius: 3px;
  border-left: 2px solid transparent;
}
.cx-builder-item--verse    { border-left-color: var(--cx-accent, #7ee0ff); background: rgba(126,224,255,0.04); }
.cx-builder-item--note     { border-left-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.02); }
.cx-builder-item--panel    { border-left-color: var(--cx-warn, #ffc46b); background: rgba(255,196,107,0.04); }
.cx-builder-item--crossref { border-left-color: #b48fff; background: rgba(180,143,255,0.04); }
.cx-builder-itembody { flex: 1; min-width: 0; }
.cx-builder-refbadge {
  font-family: var(--cx-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: 11px; font-weight: 600;
  color: var(--cx-accent, #7ee0ff);
  margin-right: 6px;
}
.cx-builder-trbadge {
  font-size: 9px; padding: 1px 4px; border: 1px solid var(--cx-rule, rgba(126,224,255,0.25));
  border-radius: 2px; letter-spacing: 0.1em; opacity: 0.7;
}
.cx-builder-kindbadge {
  font-size: 9px; padding: 1px 4px; border: 1px solid var(--cx-warn, #ffc46b);
  color: var(--cx-warn, #ffc46b);
  border-radius: 2px; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 6px;
}
.cx-builder-srcbadge {
  font-family: var(--cx-font-mono, ui-monospace, monospace);
  font-size: 10px; opacity: 0.7;
}
.cx-builder-verse-text {
  font-family: "Cormorant Garamond", Cardo, Georgia, serif;
  font-size: 14px; line-height: 1.5; margin-top: 3px;
}
.cx-builder-panel-text { font-size: 12px; line-height: 1.5; margin-top: 3px; opacity: 0.92; }
.cx-builder-note {
  width: 100%; background: transparent; border: 0;
  color: inherit; font-family: inherit; font-size: 13px; line-height: 1.5;
  resize: vertical; outline: none;
}
.cx-builder-note:focus { background: rgba(126,224,255,0.04); }
.cx-builder-xrefnote {
  margin-left: 6px; background: transparent; border: 0; border-bottom: 1px dotted var(--cx-rule, rgba(126,224,255,0.18));
  color: inherit; font-family: inherit; font-size: 12px; outline: none; font-style: italic;
}

.cx-builder-sectools { display: flex; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px dotted var(--cx-rule, rgba(126,224,255,0.10)); }
.cx-builder-addsec { display: flex; justify-content: center; padding: 4px 0; }
.cx-builder-btn {
  background: transparent;
  border: 1px solid var(--cx-rule, rgba(126,224,255,0.25));
  color: var(--cx-fg, #c9d4dc);
  padding: 3px 9px;
  font-family: inherit; font-size: 11px;
  letter-spacing: 0.06em; cursor: pointer; border-radius: 3px;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.cx-builder-btn:hover { border-color: var(--cx-accent, #7ee0ff); color: var(--cx-accent, #7ee0ff); background: rgba(126,224,255,0.06); }

.cx-builder-foot {
  margin-top: 4px; padding-top: 8px;
  border-top: 1px solid var(--cx-rule, rgba(126,224,255,0.18));
  display: flex; flex-direction: column; gap: 6px;
}
.cx-builder-exportrow { display: flex; flex-wrap: wrap; gap: 4px; }
.cx-builder-hint { font-size: 10px; opacity: 0.55; letter-spacing: 0.04em; line-height: 1.5; }

/* Toast for cross-panel additions */
.cx-builder-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #06080e; color: var(--cx-accent, #7ee0ff);
  border: 1px solid var(--cx-accent, #7ee0ff);
  padding: 8px 14px; border-radius: 3px;
  font-family: var(--cx-font-ui, ui-sans-serif, system-ui); font-size: 12px;
  letter-spacing: 0.06em; z-index: 99998;
  opacity: 0; transition: opacity 250ms ease, transform 250ms ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  pointer-events: none;
}
.cx-builder-toast--in { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Printable export — hidden in normal flow, revealed only during PDF print */
#cx-builder-printable { display: none; }

@media print {
  body.cx-builder-printing > *:not(#cx-builder-printable) { display: none !important; }
  body.cx-builder-printing #cx-builder-printable {
    display: block !important;
    color: #111; background: #fff;
    font-family: "Cormorant Garamond", Cardo, Georgia, serif;
    font-size: 12pt; line-height: 1.55;
    padding: 0.5in;
  }
  body.cx-builder-printing #cx-builder-printable h1 { font-size: 22pt; margin: 0 0 12pt; }
  body.cx-builder-printing #cx-builder-printable h2 { font-size: 14pt; margin: 18pt 0 6pt; border-bottom: 1px solid #888; padding-bottom: 3pt; }
  body.cx-builder-printing #cx-builder-printable blockquote {
    margin: 6pt 0 6pt 12pt; padding-left: 10pt; border-left: 2pt solid #888; font-style: italic;
  }
  body.cx-builder-printing #cx-builder-printable ul { padding-left: 18pt; }
  body.cx-builder-printing #cx-builder-printable p { margin: 4pt 0; }
}

/* ===== AI Study Quests ===== */
/* Phase 4.6 — AI-generated guided scripture tours. Illuminated manuscript
   aesthetic for cards, full-page serif runner for the quest experience. */

.cx-quest-panel { padding: 18px 16px 24px; color: var(--cx-fg, #c9d4dc); font-family: "Inter Tight", system-ui, sans-serif; }
.cx-quest-panel-h { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(126, 224, 255, 0.12); }
.cx-quest-panel-glyph { font-size: 28px; color: var(--cx-accent, #7ee0ff); filter: drop-shadow(0 0 6px rgba(126, 224, 255, 0.35)); }
.cx-quest-panel-h h3 { margin: 0; font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 500; letter-spacing: 0.01em; }
.cx-quest-panel-sub { margin: 2px 0 0; font-size: 12px; opacity: 0.7; }

.cx-quest-cat-label { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.6; margin: 18px 0 10px; }
.cx-quest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-quest-chip {
  background: linear-gradient(135deg, rgba(126,224,255,0.06), rgba(255,196,107,0.04));
  color: inherit;
  border: 1px solid rgba(126, 224, 255, 0.22);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: all 140ms ease;
  text-align: left;
}
.cx-quest-chip:hover:not(:disabled) { border-color: rgba(126, 224, 255, 0.55); background: rgba(126, 224, 255, 0.1); transform: translateY(-1px); }
.cx-quest-chip:disabled { opacity: 0.45; cursor: not-allowed; }

.cx-quest-gen { margin-top: 18px; }
.cx-quest-gen-label { display: block; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.6; margin-bottom: 8px; }
.cx-quest-gen-row { display: flex; gap: 8px; }
.cx-quest-gen-input {
  flex: 1; min-width: 0;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(126, 224, 255, 0.22);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: inherit; font-size: 13.5px;
  color: inherit;
}
.cx-quest-gen-input:focus { outline: none; border-color: rgba(126, 224, 255, 0.7); }
.cx-quest-gen-btn {
  background: rgba(126, 224, 255, 0.18);
  border: 1px solid rgba(126, 224, 255, 0.45);
  color: var(--cx-accent, #7ee0ff);
  border-radius: 6px; padding: 0 18px;
  font-family: inherit; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
}
.cx-quest-gen-btn:hover:not(:disabled) { background: rgba(126, 224, 255, 0.28); }
.cx-quest-gen-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.cx-quest-skel { margin: 14px 0; display: flex; flex-direction: column; gap: 9px; }
.cx-quest-skel-line {
  height: 12px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(126,224,255,0.05) 0%, rgba(126,224,255,0.18) 50%, rgba(126,224,255,0.05) 100%);
  background-size: 200% 100%;
  animation: cx-quest-shimmer 1.6s ease-in-out infinite;
}
@keyframes cx-quest-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.cx-quest-err { color: #ffc46b; font-size: 13px; margin: 10px 0 0; }

.cx-quest-preview { margin-top: 22px; }
.cx-quest-preview-card {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255, 220, 160, 0.05), rgba(126, 224, 255, 0.04));
  border: 1px solid rgba(255, 196, 107, 0.32);
  border-radius: 8px;
  padding: 22px 22px 18px;
  font-family: "Cormorant Garamond", serif;
  box-shadow: 0 10px 28px rgba(0,0,0,0.32), inset 0 0 0 1px rgba(255, 220, 160, 0.06);
}
.cx-quest-preview-card::before {
  content: ""; position: absolute; inset: 4px; border-radius: 6px;
  border: 1px solid rgba(255, 196, 107, 0.16); pointer-events: none;
}
.cx-quest-preview-tag {
  font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: 0.32em;
  color: var(--cx-accent, #7ee0ff); opacity: 0.85; margin-bottom: 6px;
}
.cx-quest-preview-card h3 { margin: 4px 0 6px; font-size: 24px; font-weight: 500; letter-spacing: 0.005em; }
.cx-quest-preview-blurb { margin: 0 0 8px; font-size: 15px; font-style: italic; opacity: 0.86; }
.cx-quest-preview-meta { display: flex; gap: 14px; font-family: "JetBrains Mono", monospace; font-size: 11px; opacity: 0.6; margin-bottom: 14px; }
.cx-quest-preview-steps {
  margin: 8px 0 14px; padding-left: 20px;
  font-family: "Inter Tight", system-ui, sans-serif; font-size: 13px; line-height: 1.55;
}
.cx-quest-preview-steps li { margin-bottom: 6px; }
.cx-quest-preview-steps b { color: var(--cx-accent, #7ee0ff); font-weight: 600; }
.cx-quest-preview-actions { display: flex; gap: 10px; margin-top: 14px; font-family: "Inter Tight", system-ui, sans-serif; }

.cx-quest-primary {
  background: rgba(126, 224, 255, 0.2);
  border: 1px solid rgba(126, 224, 255, 0.55);
  color: var(--cx-accent, #7ee0ff);
  border-radius: 6px; padding: 10px 22px;
  font-family: inherit; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  cursor: pointer;
}
.cx-quest-primary:hover:not(:disabled) { background: rgba(126, 224, 255, 0.32); }
.cx-quest-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.cx-quest-secondary {
  background: transparent;
  border: 1px solid rgba(126, 224, 255, 0.28);
  color: inherit; opacity: 0.8;
  border-radius: 6px; padding: 10px 18px;
  font-family: inherit; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  cursor: pointer;
}
.cx-quest-secondary:hover { opacity: 1; border-color: rgba(126, 224, 255, 0.55); }
.cx-quest-secondary.is-saved { color: #7eff9b; border-color: rgba(126, 255, 155, 0.45); opacity: 1; }

.cx-quest-saved { margin-top: 28px; }
.cx-quest-saved-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cx-quest-saved-item {
  display: flex; align-items: center; gap: 12px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(126, 224, 255, 0.12);
  border-radius: 6px; padding: 12px 14px;
}
.cx-quest-saved-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cx-quest-saved-body b { font-family: "Cormorant Garamond", serif; font-size: 17px; font-weight: 500; }
.cx-quest-saved-body i { font-size: 12.5px; opacity: 0.75; }
.cx-quest-saved-meta { font-family: "JetBrains Mono", monospace; font-size: 10.5px; opacity: 0.55; margin-top: 2px; }
.cx-quest-saved-actions { display: flex; gap: 6px; }
.cx-quest-mini {
  background: transparent; color: inherit;
  border: 1px solid rgba(126, 224, 255, 0.3);
  border-radius: 4px; padding: 6px 10px;
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  cursor: pointer; opacity: 0.8;
}
.cx-quest-mini:hover { opacity: 1; border-color: rgba(126, 224, 255, 0.6); }
.cx-quest-mini-warn { color: #ffc46b; border-color: rgba(255, 196, 107, 0.3); }

/* ---- Runner overlay (full page) -------------------------------------- */
.cx-quest-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: radial-gradient(120% 80% at 50% 0%, #0b1018 0%, #06080e 60%, #03050a 100%);
  color: #d6dee5;
  display: flex; flex-direction: column;
  font-family: "Cormorant Garamond", "Cardo", serif;
  animation: cx-quest-fade 220ms ease;
}
@keyframes cx-quest-fade { from { opacity: 0; } to { opacity: 1; } }

.cx-quest-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(126, 224, 255, 0.12);
  background: rgba(0,0,0,0.35);
  flex-shrink: 0;
}
.cx-quest-tag {
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.3em;
  color: var(--cx-accent, #7ee0ff); opacity: 0.85;
}
.cx-quest-title-bar {
  flex: 1; min-width: 0;
  margin: 0; font-size: 19px; font-weight: 500; letter-spacing: 0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-quest-progress { font-family: "JetBrains Mono", monospace; font-size: 11px; opacity: 0.7; letter-spacing: 0.12em; }
.cx-quest-close {
  background: transparent; color: inherit;
  border: 1px solid rgba(126, 224, 255, 0.2);
  width: 32px; height: 32px; border-radius: 4px;
  font-size: 14px; cursor: pointer;
}
.cx-quest-close:hover { background: rgba(255, 100, 100, 0.15); border-color: rgba(255, 100, 100, 0.5); color: #ffb4b4; }

.cx-quest-pbar { height: 2px; background: rgba(126, 224, 255, 0.08); flex-shrink: 0; }
.cx-quest-pbar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cx-accent, #7ee0ff), #ffc46b);
  transition: width 300ms ease;
  box-shadow: 0 0 8px rgba(126, 224, 255, 0.55);
}

.cx-quest-body { flex: 1; overflow-y: auto; display: flex; justify-content: center; padding: 48px 22px 80px; }
.cx-quest-body-catalog { padding: 0; display: block; }

.cx-quest-page {
  width: min(720px, 100%);
  display: flex; flex-direction: column; gap: 22px;
  animation: cx-quest-page-in 380ms ease;
}
@keyframes cx-quest-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.cx-quest-step-no {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.3em;
  opacity: 0.55; text-transform: uppercase;
}
.cx-quest-passage { font-size: 16px; }
.cx-quest-passage a.cx-quest-ref {
  font-family: "JetBrains Mono", monospace; font-size: 13px;
  color: var(--cx-accent, #7ee0ff);
  text-decoration: none;
  border: 1px solid rgba(126, 224, 255, 0.32);
  padding: 5px 11px; border-radius: 4px;
  transition: all 140ms ease;
  display: inline-block;
  letter-spacing: 0.05em;
}
.cx-quest-passage a.cx-quest-ref:hover { background: rgba(126, 224, 255, 0.14); border-color: rgba(126, 224, 255, 0.7); }

.cx-quest-intro { margin: 0; font-size: 17px; line-height: 1.65; opacity: 0.88; font-style: italic; }

.cx-quest-q-wrap { border-left: 2px solid rgba(255, 196, 107, 0.5); padding-left: 16px; margin: 4px 0; }
.cx-quest-q-label { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.3em; color: #ffc46b; opacity: 0.85; margin-bottom: 4px; }
.cx-quest-question { margin: 0; font-size: 20px; line-height: 1.45; font-weight: 500; }

.cx-quest-answer {
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(126, 224, 255, 0.2);
  border-radius: 6px;
  color: inherit;
  font-family: "Inter Tight", system-ui, sans-serif;
  font-size: 15px; line-height: 1.55;
  padding: 14px 16px;
  resize: vertical;
  width: 100%;
  box-sizing: border-box;
}
.cx-quest-answer:focus { outline: none; border-color: rgba(126, 224, 255, 0.65); }
.cx-quest-reflection { min-height: 180px; }

.cx-quest-hint-wrap { font-family: "Inter Tight", system-ui, sans-serif; }
.cx-quest-hint-btn {
  background: transparent; color: var(--cx-accent, #7ee0ff);
  border: none; padding: 0; cursor: pointer;
  font-size: 12.5px; letter-spacing: 0.1em; opacity: 0.78;
}
.cx-quest-hint-btn:hover { opacity: 1; }
.cx-quest-hint {
  margin: 8px 0 0; padding: 12px 14px;
  background: rgba(255, 196, 107, 0.06);
  border-left: 2px solid rgba(255, 196, 107, 0.5);
  border-radius: 0 4px 4px 0;
  font-size: 14px; font-style: italic; line-height: 1.55;
}

.cx-quest-synthesis .cx-quest-syn-h { margin: 0 0 6px; font-size: 30px; font-weight: 500; }
.cx-quest-syn-intro { margin: 0 0 10px; font-size: 16px; opacity: 0.85; font-style: italic; line-height: 1.55; }
.cx-quest-syn-actions { display: flex; flex-wrap: wrap; gap: 10px; font-family: "Inter Tight", system-ui, sans-serif; }
.cx-quest-feedback {
  margin-top: 22px; padding: 22px 24px;
  background: linear-gradient(135deg, rgba(126, 224, 255, 0.05), rgba(255, 196, 107, 0.04));
  border: 1px solid rgba(126, 224, 255, 0.22); border-radius: 8px;
}
.cx-quest-feedback h3 {
  margin: 0 0 10px; font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--cx-accent, #7ee0ff); font-weight: 500;
}
.cx-quest-feedback p { margin: 0; font-size: 16px; line-height: 1.7; white-space: pre-wrap; }

.cx-quest-foot {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  border-top: 1px solid rgba(126, 224, 255, 0.12);
  background: rgba(0,0,0,0.4);
  flex-shrink: 0;
  font-family: "Inter Tight", system-ui, sans-serif;
}
.cx-quest-foot-mid { flex: 1; text-align: center; font-size: 12px; opacity: 0.55; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-quest-nav {
  background: rgba(126, 224, 255, 0.1);
  border: 1px solid rgba(126, 224, 255, 0.32);
  color: inherit;
  border-radius: 6px; padding: 10px 22px;
  font-family: inherit; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
}
.cx-quest-nav:hover:not(:disabled) { background: rgba(126, 224, 255, 0.22); border-color: rgba(126, 224, 255, 0.55); }
.cx-quest-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.cx-quest-next { background: rgba(126, 224, 255, 0.22); border-color: rgba(126, 224, 255, 0.55); color: var(--cx-accent, #7ee0ff); }

@media (max-width: 640px) {
  .cx-quest-head { padding: 10px 14px; gap: 10px; }
  .cx-quest-title-bar { font-size: 15px; }
  .cx-quest-body { padding: 28px 16px 64px; }
  .cx-quest-question { font-size: 18px; }
  .cx-quest-synthesis .cx-quest-syn-h { font-size: 24px; }
  .cx-quest-foot { padding: 10px 12px; gap: 8px; }
  .cx-quest-foot-mid { display: none; }
  .cx-quest-nav { padding: 9px 14px; font-size: 11px; }
}

/* ===== Biblical Timeline ===== */
.cx-tl-root {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 14px 18px;
  font-family: var(--cx-sans, "Inter Tight", system-ui, sans-serif);
  color: var(--cx-fg, #d8e0e8);
}
.cx-tl-loading { font-family: var(--cx-mono, ui-monospace, monospace); opacity: 0.6; padding: 28px; text-align: center; }

/* Header */
.cx-tl-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid color-mix(in oklab, var(--cx-line, #2a3340) 60%, transparent);
  padding-bottom: 10px;
}
.cx-tl-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cx-tl-title-main {
  font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cx-tl-title-meta {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cx-fg-dim, #889aaa);
}
.cx-tl-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Zoom segmented control */
.cx-tl-zoom {
  display: inline-flex;
  border: 1px solid var(--cx-line, #2a3340);
  border-radius: 4px;
  overflow: hidden;
}
.cx-tl-zoom-btn {
  background: transparent;
  border: 0;
  padding: 6px 12px;
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--cx-fg-dim, #889aaa);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.cx-tl-zoom-btn:not(:last-child) { border-right: 1px solid var(--cx-line, #2a3340); }
.cx-tl-zoom-btn:hover { color: var(--cx-fg, #d8e0e8); background: color-mix(in oklab, var(--cx-fg-dim) 8%, transparent); }
.cx-tl-zoom-btn.is-on {
  background: var(--cx-accent, #5cd6ff);
  color: var(--cx-bg, #0a0e14);
}

/* Search */
.cx-tl-search {
  background: color-mix(in oklab, var(--cx-fg-dim) 6%, transparent);
  border: 1px solid var(--cx-line, #2a3340);
  border-radius: 4px;
  padding: 6px 10px;
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--cx-fg, #d8e0e8);
  width: 200px;
  max-width: 100%;
}
.cx-tl-search:focus { outline: none; border-color: var(--cx-accent, #5cd6ff); }

/* Filter chips */
.cx-tl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cx-tl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--cx-line, #2a3340);
  border-radius: 999px;
  background: transparent;
  color: var(--cx-fg-dim, #889aaa);
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 120ms ease;
  opacity: 0.45;
}
.cx-tl-chip:hover { opacity: 0.85; }
.cx-tl-chip.is-on { opacity: 1; color: var(--cx-fg, #d8e0e8); border-color: color-mix(in oklab, var(--cx-accent, #5cd6ff) 45%, var(--cx-line)); }
.cx-tl-chip-glyph { font-size: 13px; line-height: 1; }
.cx-tl-chip-lbl { font-size: 10px; text-transform: uppercase; }

/* Scrollable track */
.cx-tl-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--cx-line, #2a3340);
  border-radius: 6px;
  background: color-mix(in oklab, var(--cx-fg-dim) 3%, transparent);
  scrollbar-color: var(--cx-fg-dim) transparent;
}
.cx-tl-scroll::-webkit-scrollbar { height: 10px; }
.cx-tl-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--cx-fg-dim) 35%, transparent);
  border-radius: 6px;
}
.cx-tl-track {
  position: relative;
  height: 220px;
  min-width: 100%;
}

/* Era bands */
.cx-tl-bands {
  position: absolute; inset: 0;
  pointer-events: none;
}
.cx-tl-band {
  position: absolute;
  top: 14px;
  bottom: 14px;
  border: 1px solid;
  border-radius: 8px;
  pointer-events: auto;
}
.cx-tl-band-label {
  position: absolute;
  top: 4px; left: 8px;
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cx-fg-dim, #889aaa);
  opacity: 0.75;
  white-space: nowrap;
  pointer-events: none;
}

/* Central axis */
.cx-tl-axis {
  position: absolute;
  left: 0; right: 0;
  top: 110px;
  height: 1px;
  background: color-mix(in oklab, var(--cx-fg-dim) 30%, transparent);
}

/* Ticks */
.cx-tl-ticks {
  position: absolute; inset: 0;
  pointer-events: none;
}
.cx-tl-tick {
  position: absolute;
  top: 100px;
  transform: translateX(-50%);
}
.cx-tl-tick-mark {
  width: 1px;
  height: 12px;
  margin: 0 auto;
  background: color-mix(in oklab, var(--cx-fg-dim) 50%, transparent);
}
.cx-tl-tick-lbl {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--cx-fg-dim, #889aaa);
  margin-top: 4px;
  white-space: nowrap;
  text-align: center;
}

/* Event markers */
.cx-tl-markers { position: absolute; inset: 0; }
.cx-tl-mark {
  position: absolute;
  top: 30px;
  transform: translateX(-50%);
  background: transparent;
  border: 1px solid transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 120ms ease, filter 120ms ease;
}
.cx-tl-mark:hover { transform: translateX(-50%) translateY(-2px); filter: brightness(1.2); }
.cx-tl-mark-stem {
  width: 1px;
  height: 60px;
  opacity: 0.55;
}
.cx-tl-mark-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  color: #0a0e14;
  border: 1px solid color-mix(in oklab, var(--cx-bg, #0a0e14) 50%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--cx-bg, #0a0e14) 70%, transparent);
}
.cx-tl-mark-lbl {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--cx-fg-dim, #889aaa);
  margin-top: 4px;
  max-width: 110px;
  text-align: center;
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
}
.cx-tl-mark.is-sel .cx-tl-mark-dot {
  box-shadow: 0 0 0 2px var(--cx-accent, #5cd6ff), 0 0 12px var(--cx-accent, #5cd6ff);
}
.cx-tl-mark.is-here .cx-tl-mark-dot {
  animation: cx-tl-pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 2px var(--cx-accent, #5cd6ff), 0 0 14px var(--cx-accent, #5cd6ff);
}
.cx-tl-mark.is-here .cx-tl-mark-lbl { color: var(--cx-accent, #5cd6ff); }
@keyframes cx-tl-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.6); }
}
@media (prefers-reduced-motion: reduce) {
  .cx-tl-mark.is-here .cx-tl-mark-dot { animation: none; }
}

/* Bucket marker (era/century rollup) */
.cx-tl-bucket {
  position: absolute;
  top: 90px;
  transform: translateX(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--cx-accent, #5cd6ff) 20%, var(--cx-bg, #0a0e14));
  border: 1px solid var(--cx-accent, #5cd6ff);
  color: var(--cx-fg, #d8e0e8);
  cursor: pointer;
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.cx-tl-bucket:hover { background: color-mix(in oklab, var(--cx-accent, #5cd6ff) 40%, var(--cx-bg, #0a0e14)); }

/* Hover tooltip */
.cx-tl-tip {
  position: absolute;
  bottom: 6px;
  transform: translateX(-50%);
  background: color-mix(in oklab, var(--cx-bg, #0a0e14) 92%, transparent);
  border: 1px solid var(--cx-line, #2a3340);
  border-radius: 6px;
  padding: 8px 10px;
  max-width: 280px;
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}
.cx-tl-tip-title { font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif); font-size: 15px; font-weight: 600; }
.cx-tl-tip-year { font-family: var(--cx-mono, ui-monospace, monospace); font-size: 10px; color: var(--cx-fg-dim, #889aaa); margin: 2px 0 4px; letter-spacing: 0.12em; }
.cx-tl-tip-sum { font-size: 12px; line-height: 1.4; color: var(--cx-fg, #d8e0e8); }

/* Detail card */
.cx-tl-detail {
  border: 1px solid var(--cx-line, #2a3340);
  border-radius: 6px;
  padding: 14px 16px;
  background: color-mix(in oklab, var(--cx-fg-dim) 4%, transparent);
}
.cx-tl-detail-head { display: flex; align-items: center; gap: 8px; }
.cx-tl-detail-era {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid;
  border-radius: 999px;
}
.cx-tl-detail-cat {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cx-fg-dim, #889aaa);
}
.cx-tl-detail-x {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--cx-line, #2a3340);
  border-radius: 4px;
  color: var(--cx-fg-dim, #889aaa);
  width: 24px; height: 24px;
  cursor: pointer;
  font-size: 12px;
}
.cx-tl-detail-x:hover { color: var(--cx-fg, #d8e0e8); }
.cx-tl-detail-title {
  font-family: var(--cx-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 24px;
  margin: 8px 0 4px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.cx-tl-detail-year {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cx-fg-dim, #889aaa);
}
.cx-tl-detail-range { opacity: 0.7; }
.cx-tl-detail-sum {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cx-fg, #d8e0e8);
}
.cx-tl-detail-refs { margin-top: 12px; }
.cx-tl-detail-refs-h {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cx-fg-dim, #889aaa);
  margin-bottom: 6px;
}
.cx-tl-detail-refs-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-tl-ref {
  background: transparent;
  border: 1px solid var(--cx-line, #2a3340);
  border-radius: 4px;
  padding: 4px 9px;
  color: var(--cx-accent, #5cd6ff);
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 11px;
  cursor: pointer;
  transition: background 120ms ease;
}
.cx-tl-ref:hover {
  background: color-mix(in oklab, var(--cx-accent, #5cd6ff) 18%, transparent);
  border-color: var(--cx-accent, #5cd6ff);
}
.cx-tl-detail-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--cx-fg-dim, #889aaa);
}
.cx-tl-detail-meta-h {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Hint */
.cx-tl-hint {
  font-size: 12px;
  color: var(--cx-fg-dim, #889aaa);
  font-style: italic;
  padding: 8px 4px 0;
}

/* Mobile */
@media (max-width: 720px) {
  .cx-tl-root { padding: 10px; }
  .cx-tl-title-main { font-size: 18px; }
  .cx-tl-search { width: 130px; }
  .cx-tl-track { height: 200px; }
  .cx-tl-detail-title { font-size: 20px; }
}

/* ===== Bible Dictionary ===== */
.cx-dict-pane .cx-dict-body p:first-of-type::first-letter {
  font-family: var(--cx-font-serif, 'Cormorant Garamond', 'Cardo', serif);
  font-size: 2.6em;
  float: left;
  line-height: 0.85;
  padding: 4px 6px 0 0;
  color: var(--cx-accent, #7ee0ff);
}
.cx-dict-pane .cx-dict-body blockquote {
  position: relative;
}
.cx-dict-pane button:hover {
  filter: brightness(1.15);
}
.cx-dict-pane button:focus-visible {
  outline: 1px solid var(--cx-accent, #7ee0ff);
  outline-offset: 1px;
}
.cx-dict-pane input[type="search"]:focus {
  border-color: var(--cx-accent, #7ee0ff);
  box-shadow: 0 0 0 1px var(--cx-accent, #7ee0ff);
}

/* ===== Jewish Study Tools ===== */
.cx-js-pane {
  --cx-js-gold: #d4af5a;
  --cx-js-gold-soft: rgba(212, 175, 90, 0.18);
  padding: 12px 14px 16px;
  color: var(--cx-fg, #c9d4dc);
  font-family: var(--cx-font-ui, ui-sans-serif, system-ui);
  font-size: 13px;
  line-height: 1.5;
}
.cx-js-datestrip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--cx-rule, rgba(126, 224, 255, 0.18));
  text-align: center;
}
.cx-js-hebdate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.cx-js-approx {
  font-size: 11px;
  opacity: 0.55;
  letter-spacing: 0.08em;
}
.cx-js-hebbig {
  font-family: "Cardo", "Times New Roman", serif;
  font-size: 28px;
  line-height: 1.1;
  color: var(--cx-fg, #e6eef5);
  direction: rtl;
}
.cx-js-hebmonth {
  font-family: "Cardo", serif;
}
.cx-js-translit {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.cx-js-gregdate {
  font-size: 12px;
  opacity: 0.75;
}
.cx-js-section-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
  font-weight: 600;
  margin-bottom: 6px;
}
.cx-js-gold {
  color: var(--cx-js-gold);
  opacity: 0.95;
}
.cx-js-parsha {
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--cx-rule, rgba(126, 224, 255, 0.18));
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
  text-align: center;
}
.cx-js-parsha-name {
  font-family: "Cardo", "Times New Roman", serif;
  font-size: 34px;
  line-height: 1.15;
  color: #e6eef5;
  direction: rtl;
  margin: 6px 0 2px;
}
.cx-js-parsha-translit {
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.cx-js-parsha-meaning {
  font-style: italic;
  opacity: 0.75;
}
.cx-js-parsha-readings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  border-top: 1px dotted rgba(255,255,255,0.08);
  border-bottom: 1px dotted rgba(255,255,255,0.08);
  margin-bottom: 10px;
}
.cx-js-reading-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}
.cx-js-reading-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}
.cx-js-ref {
  background: transparent;
  border: 0;
  color: var(--cx-accent, #7ee0ff);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.cx-js-ref:hover { text-decoration: underline; }
.cx-js-ref-lg { font-size: 14px; font-weight: 600; }
.cx-js-parsha-nav {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
.cx-js-pill {
  background: transparent;
  border: 1px solid var(--cx-rule, rgba(126, 224, 255, 0.3));
  color: var(--cx-fg, #c9d4dc);
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 999px;
  font-family: inherit;
}
.cx-js-pill:hover { border-color: var(--cx-accent, #7ee0ff); }
.cx-js-pill-today {
  border-color: var(--cx-js-gold);
  color: var(--cx-js-gold);
}
.cx-js-holiday-card {
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--cx-js-gold);
  border-radius: 6px;
  background: var(--cx-js-gold-soft);
  text-align: center;
  box-shadow: 0 0 0 1px rgba(212, 175, 90, 0.08) inset;
}
.cx-js-holiday-name {
  font-family: "Cardo", serif;
  font-size: 26px;
  direction: rtl;
  color: #f3e5b8;
  margin: 4px 0;
}
.cx-js-holiday-translit {
  font-size: 13px;
  margin-bottom: 10px;
}
.cx-js-holiday-readings {
  border-top: 1px dotted rgba(212, 175, 90, 0.3);
  padding-top: 8px;
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
}
.cx-js-reading-refs { font-size: 12px; }
.cx-js-next-holiday {
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  opacity: 0.85;
  border-left: 2px solid var(--cx-js-gold);
  background: rgba(212, 175, 90, 0.06);
  border-radius: 0 3px 3px 0;
}
.cx-js-daf {
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px dotted var(--cx-rule, rgba(126, 224, 255, 0.2));
  border-radius: 4px;
}
.cx-js-daf-refs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cx-js-daf-ref {
  font-family: var(--cx-font-mono, ui-monospace, monospace);
  font-size: 12px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.cx-js-collapse {
  margin-bottom: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cx-js-collapse-head {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--cx-fg, #c9d4dc);
  padding: 8px 0;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: center;
}
.cx-js-collapse-head:hover { color: var(--cx-accent, #7ee0ff); }
.cx-js-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 8px;
}
.cx-js-table th,
.cx-js-table td {
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px dotted rgba(255,255,255,0.06);
  vertical-align: top;
}
.cx-js-table th {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: 600;
}
.cx-js-heb {
  font-family: "Cardo", "Times New Roman", serif;
  font-size: 16px;
  direction: rtl;
}
.cx-js-dim { opacity: 0.65; }
.cx-js-holiday-list { list-style: none; margin: 0; padding: 0; }
.cx-js-holiday-li {
  padding: 8px 0;
  border-bottom: 1px dotted rgba(255,255,255,0.06);
}
.cx-js-holiday-li-head { margin-bottom: 4px; font-size: 13px; }
.cx-js-status {
  padding: 12px 4px;
  opacity: 0.75;
  font-size: 12px;
}
.cx-js-warn { color: var(--cx-warn, #ffc46b); }
.cx-js-foot {
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--cx-rule, rgba(126, 224, 255, 0.12));
  font-size: 10px;
  opacity: 0.55;
  letter-spacing: 0.04em;
  text-align: center;
}

/* ===== Word Study ===== */
.cx-ws-panel { padding: 0.5rem 0.75rem; font-size: 0.92em; }
.cx-ws-search { display: flex; gap: 0.4rem; margin-bottom: 0.9rem; }
.cx-ws-input {
  flex: 1; padding: 0.4rem 0.55rem; font-family: inherit; font-size: 0.92em;
  background: transparent; border: 1px solid var(--cx-border, #444);
  color: inherit; border-radius: 3px;
}
.cx-ws-go {
  padding: 0.4rem 0.75rem; font: inherit; font-size: 0.85em;
  background: transparent; border: 1px solid var(--cx-border, #444);
  color: inherit; border-radius: 3px; cursor: pointer; letter-spacing: 0.04em;
}
.cx-ws-go:hover { border-color: var(--cx-accent, #7ee0ff); color: var(--cx-accent, #7ee0ff); }
.cx-ws-empty { padding: 0.5rem 0; color: var(--cx-fg-soft, #aaa); font-size: 0.9em; }
.cx-ws-empty code {
  background: rgba(128,128,128,0.12); padding: 0.05em 0.35em; border-radius: 3px; font-size: 0.85em;
}
.cx-ws-section { margin: 0 0 1.1rem; }
.cx-ws-h {
  margin: 0.25rem 0 0.45rem; font-size: 0.78em; text-transform: uppercase;
  letter-spacing: 0.08em; opacity: 0.65; font-weight: 600;
}
.cx-ws-hero {
  text-align: center; padding: 1rem 0.4rem 1.1rem;
  border-bottom: 1px solid var(--cx-border-soft, rgba(128,128,128,0.18));
  margin-bottom: 1.1rem;
}
.cx-ws-hero-word {
  font-family: "Cardo", "Cormorant Garamond", Georgia, serif;
  font-size: 2.4rem; line-height: 1.1; letter-spacing: 0.01em;
  color: var(--cx-accent, #7ee0ff);
}
.cx-ws-hero-heb, .cx-ws-hero-grk { font-size: 2.8rem; }
.cx-ws-hero-translit {
  font-style: italic; opacity: 0.85; margin-top: 0.25rem; font-size: 1.05em;
}
.cx-ws-hero-meta { margin-top: 0.55rem; font-size: 0.88em; opacity: 0.8; }
.cx-ws-strongs {
  background: rgba(128,128,128,0.14); padding: 0.1em 0.45em; border-radius: 3px;
  margin-right: 0.55em; font-size: 0.85em;
}
.cx-ws-gloss { font-weight: 500; }
.cx-ws-srange { list-style: disc; padding-left: 1.1rem; margin: 0; line-height: 1.45; }
.cx-ws-srange li { margin: 0.1em 0; }
.cx-ws-freq-total { margin: 0 0 0.55rem; font-size: 0.9em; }
.cx-ws-bars { list-style: none; padding: 0; margin: 0; }
.cx-ws-bar-row {
  display: grid; grid-template-columns: 7em 1fr 2.5em; gap: 0.55em;
  align-items: center; padding: 0.15rem 0; font-size: 0.85em;
}
.cx-ws-bar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.9; }
.cx-ws-bar-track {
  height: 0.55em; background: rgba(128,128,128,0.13); border-radius: 2px;
  position: relative; overflow: hidden;
}
.cx-ws-bar-fill {
  display: block; height: 100%;
  background: var(--cx-accent, #7ee0ff); opacity: 0.78;
}
.cx-ws-bar-count { text-align: right; opacity: 0.75; font-variant-numeric: tabular-nums; }
.cx-ws-occ { list-style: none; padding: 0; margin: 0; }
.cx-ws-occ-item {
  padding: 0.5rem 0.55rem; margin-bottom: 0.4rem; cursor: pointer;
  border: 1px solid var(--cx-border-soft, rgba(128,128,128,0.18)); border-radius: 3px;
  transition: border-color 0.12s, background 0.12s;
}
.cx-ws-occ-item:hover {
  border-color: var(--cx-accent, #7ee0ff);
  background: rgba(126, 224, 255, 0.05);
}
.cx-ws-occ-ref { font-weight: 600; font-size: 0.82em; opacity: 0.85; margin-bottom: 0.2em; }
.cx-ws-occ-snip { font-size: 0.88em; line-height: 1.4; opacity: 0.9; }
.cx-ws-occ-snip mark {
  background: rgba(126, 224, 255, 0.22); color: inherit; padding: 0 0.1em;
}
.cx-ws-related { display: flex; flex-direction: column; gap: 0.65rem; }
.cx-ws-rel-group {}
.cx-ws-rel-label {
  font-size: 0.72em; letter-spacing: 0.07em; text-transform: uppercase;
  opacity: 0.6; margin-bottom: 0.25rem;
}
.cx-ws-rel-list { list-style: none; padding: 0; margin: 0; }
.cx-ws-rel-item {
  padding: 0.2rem 0; font-size: 0.88em; line-height: 1.4;
  display: flex; flex-wrap: wrap; gap: 0.4em; align-items: baseline;
}
.cx-ws-rel-word { font-weight: 600; }
.cx-ws-rel-strongs {
  font-size: 0.78em; opacity: 0.65;
  background: rgba(128,128,128,0.12); padding: 0.05em 0.3em; border-radius: 2px;
}
.cx-ws-rel-mean { opacity: 0.8; }
.cx-ws-theology {
  font-family: "Cardo", "Cormorant Garamond", Georgia, serif;
  font-size: 1.04em; line-height: 1.55; font-style: italic;
  margin: 0; padding: 0.65rem 0.9rem;
  border-left: 3px solid var(--cx-accent, #7ee0ff);
  background: rgba(126, 224, 255, 0.04);
}
.cx-ws-cite-note { font-size: 0.85em; line-height: 1.45; }

/* ===== Module Marketplace ===== */
.cx-mkt-pane .cx-mkt-card:hover {
  border-color: var(--cx-accent, #7ee0ff) !important;
  transform: translateY(-1px);
}
.cx-mkt-pane .cx-mkt-row:hover {
  border-color: color-mix(in oklab, var(--cx-accent, #7ee0ff) 55%, transparent) !important;
  background: color-mix(in oklab, var(--cx-accent, #7ee0ff) 5%, transparent);
  cursor: pointer;
}
.cx-mkt-pane button:hover {
  filter: brightness(1.12);
}
.cx-mkt-pane button:focus-visible {
  outline: 1px solid var(--cx-accent, #7ee0ff);
  outline-offset: 2px;
}
.cx-mkt-pane input:focus {
  border-color: var(--cx-accent, #7ee0ff) !important;
  box-shadow: 0 0 0 1px var(--cx-accent, #7ee0ff);
  outline: none;
}
.cx-mkt-pane details summary {
  outline: none;
}
.cx-mkt-pane details[open] summary {
  margin-bottom: 4px;
}

/* ===== Comparison Charts ===== */
.cx-cmp-root { padding: 0.75rem 0.9rem 2rem; font-size: 0.92em; max-width: 100%; }
.cx-cmp-header { margin-bottom: 1rem; }
.cx-cmp-title {
  font-family: "Cardo", "Cormorant Garamond", Georgia, serif;
  font-size: 1.55em; margin: 0 0 0.15rem; letter-spacing: 0.01em;
}
.cx-cmp-tag {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.78em;
  color: var(--cx-fg-dim, #888); letter-spacing: 0.04em; text-transform: uppercase;
}
.cx-cmp-section { margin: 1.5rem 0; }
.cx-cmp-h {
  font-family: "Cardo", Georgia, serif; font-size: 1.15em;
  margin: 0 0 0.2rem; color: var(--cx-fg, #ddd);
}
.cx-cmp-sub {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.74em;
  color: var(--cx-fg-dim, #888); margin-bottom: 0.7rem; letter-spacing: 0.03em;
}

/* Hero strip */
.cx-cmp-hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.55rem; margin-bottom: 0.4rem;
}
.cx-cmp-hero-card {
  border: 1px solid var(--cx-accent, #7ee0ff); border-radius: 4px;
  padding: 0.7rem 0.6rem; background: rgba(126, 224, 255, 0.04); text-align: center;
}
.cx-cmp-hero-big {
  font-family: "Cardo", Georgia, serif; font-size: 1.9em; font-weight: 600;
  color: var(--cx-accent, #7ee0ff); line-height: 1;
}
.cx-cmp-hero-lbl { font-size: 0.85em; margin-top: 0.25rem; color: var(--cx-fg, #ddd); }
.cx-cmp-hero-sub {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.7em;
  color: var(--cx-fg-dim, #888); margin-top: 0.2rem;
}

/* Feature matrix */
.cx-cmp-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cx-cmp-matrix {
  border-collapse: collapse; width: 100%; min-width: 640px;
  font-size: 0.85em; table-layout: fixed;
}
.cx-cmp-matrix th, .cx-cmp-matrix td {
  border: 1px solid rgba(128,128,128,0.18); padding: 0.35rem 0.4rem;
  text-align: center; vertical-align: middle;
}
.cx-cmp-matrix thead th {
  background: rgba(128,128,128,0.05); font-family: ui-monospace, Menlo, monospace;
  font-size: 0.95em; font-weight: 600; padding: 0.45rem 0.3rem;
}
.cx-cmp-matrix .cx-cmp-colname {
  font-size: 0.7em; font-weight: 400; color: var(--cx-fg-dim, #888);
  margin-top: 0.15rem; white-space: nowrap;
}
.cx-cmp-rowhead {
  text-align: left !important; font-weight: 500 !important;
  position: sticky; left: 0; background: var(--cx-bg, #0c0c10);
  z-index: 2; min-width: 130px; max-width: 160px;
}
.cx-cmp-codex-col { background: rgba(126, 224, 255, 0.06) !important; }
.cx-cmp-yes { color: var(--cx-accent, #7ee0ff); font-weight: 600; }
.cx-cmp-no { color: var(--cx-fg-dim, #888); opacity: 0.55; }
.cx-cmp-partial { color: #ffd479; }
.cx-cmp-paywall { color: #ff8aa3; font-size: 0.82em; font-family: ui-monospace, Menlo, monospace; }
.cx-cmp-text { color: var(--cx-fg, #ddd); font-family: ui-monospace, Menlo, monospace; font-size: 0.85em; }
.cx-cmp-cell { cursor: help; transition: background 120ms; }
.cx-cmp-cell:hover { background: rgba(126, 224, 255, 0.12) !important; }

/* Price chart */
.cx-cmp-price { display: flex; flex-direction: column; gap: 0.4rem; }
.cx-cmp-price-row { display: grid; grid-template-columns: 130px 1fr; gap: 0.6rem; align-items: center; }
.cx-cmp-price-name { font-size: 0.9em; color: var(--cx-fg, #ddd); text-align: right; }
.cx-cmp-price-track {
  position: relative; height: 26px;
  background: rgba(128,128,128,0.08); border-radius: 3px;
  border: 1px solid rgba(128,128,128,0.12);
}
.cx-cmp-price-bar {
  position: absolute; top: 2px; bottom: 2px;
  border: 1px solid; border-radius: 2px;
  font-family: ui-monospace, Menlo, monospace; font-size: 0.72em;
  display: flex; align-items: center; padding: 0 0.5rem; white-space: nowrap;
  color: var(--cx-bg, #0c0c10); font-weight: 600;
  transition: width 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
  overflow: hidden;
}
.cx-cmp-price-free { color: var(--cx-bg, #0c0c10) !important; }
.cx-cmp-price-codex { box-shadow: 0 0 8px rgba(126,224,255,0.4); }
.cx-cmp-scale {
  display: flex; justify-content: space-between;
  margin: 0.3rem 0 0 138px; font-family: ui-monospace, Menlo, monospace;
  font-size: 0.7em; color: var(--cx-fg-dim, #888);
}

/* Radar */
.cx-cmp-radar-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.cx-cmp-radar { width: 100%; max-width: 480px; height: auto; }
.cx-cmp-radar-legend { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.cx-cmp-legend-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: transparent; border: 1px solid; border-radius: 3px;
  padding: 0.25rem 0.55rem; font-size: 0.78em; cursor: pointer;
  font-family: ui-monospace, Menlo, monospace; transition: opacity 120ms;
}
.cx-cmp-legend-btn:not(.on) { opacity: 0.6; }
.cx-cmp-legend-swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
}

/* Sentiment */
.cx-cmp-sent-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.7rem;
}
.cx-cmp-sent-card {
  border: 1px solid; border-radius: 4px; padding: 0.6rem 0.7rem;
  background: rgba(255,255,255,0.015);
}
.cx-cmp-sent-name {
  font-family: "Cardo", Georgia, serif; font-size: 1.1em; font-weight: 600;
  margin-bottom: 0.4rem;
}
.cx-cmp-sent-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.cx-cmp-sent-col { font-size: 0.82em; }
.cx-cmp-sent-h {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.7em;
  letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.2rem;
}
.cx-cmp-love .cx-cmp-sent-h { color: #9fe3b8; }
.cx-cmp-hate .cx-cmp-sent-h { color: #ffd479; }
.cx-cmp-sent-col ul { list-style: none; padding: 0; margin: 0; }
.cx-cmp-sent-col li { padding: 0.12rem 0; line-height: 1.35; }

/* Roadmap */
.cx-cmp-roadmap {
  border-left: 3px solid var(--cx-accent, #7ee0ff);
  padding-left: 0.8rem; background: rgba(126,224,255,0.03);
  padding-top: 0.4rem; padding-bottom: 0.5rem;
}
.cx-cmp-roadmap-list { list-style: "→ "; padding-left: 1rem; margin: 0.3rem 0 0; }
.cx-cmp-roadmap-list li { padding: 0.18rem 0; line-height: 1.4; font-size: 0.9em; }

/* Share + sources */
.cx-cmp-share { margin: 1.4rem 0 0.8rem; text-align: center; }
.cx-cmp-share-btn {
  background: var(--cx-accent, #7ee0ff); color: var(--cx-bg, #0c0c10);
  border: none; border-radius: 3px; padding: 0.55rem 1.1rem;
  font-family: ui-monospace, Menlo, monospace; font-size: 0.85em;
  cursor: pointer; font-weight: 600; letter-spacing: 0.02em;
  transition: filter 120ms;
}
.cx-cmp-share-btn:hover { filter: brightness(1.1); }
.cx-cmp-share-hint {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.7em;
  color: var(--cx-fg-dim, #888); margin-top: 0.3rem;
}
.cx-cmp-sources {
  font-size: 0.78em; color: var(--cx-fg-dim, #888);
  line-height: 1.5; margin-top: 1rem; padding-top: 0.7rem;
  border-top: 1px dashed rgba(128,128,128,0.2);
}
.cx-cmp-sources code {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.92em;
  background: rgba(128,128,128,0.12); padding: 0.05em 0.3em; border-radius: 2px;
}

@media (max-width: 520px) {
  .cx-cmp-price-row { grid-template-columns: 90px 1fr; }
  .cx-cmp-price-name { font-size: 0.78em; }
  .cx-cmp-scale { margin-left: 98px; }
  .cx-cmp-sent-cols { grid-template-columns: 1fr; }
}

/* ===== BabelForge — Translation Lab ===== */
.bf-root { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px; color: var(--fg, #e8e6df); font-family: var(--font-sans, "Inter Tight", system-ui, sans-serif); }
.bf-header { border-bottom: 1px solid var(--rule, rgba(255,255,255,0.08)); padding-bottom: 10px; }
.bf-title { font-size: 18px; font-weight: 600; letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; }
.bf-glyph { font-family: "Cardo", "Cormorant Garamond", serif; color: var(--accent, #d4a857); font-size: 22px; }
.bf-sub { color: var(--mute, rgba(255,255,255,0.55)); font-weight: 400; font-size: 13px; margin-left: 4px; }
.bf-tagline { color: var(--mute, rgba(255,255,255,0.55)); font-size: 12px; margin-top: 6px; line-height: 1.45; font-style: italic; }

.bf-btn { background: rgba(255,255,255,0.06); color: var(--fg, #e8e6df); border: 1px solid rgba(255,255,255,0.1); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; font-family: inherit; transition: background 0.15s, border-color 0.15s; }
.bf-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); }
.bf-btn.primary { background: var(--accent, #d4a857); color: #1a1614; border-color: var(--accent, #d4a857); font-weight: 500; }
.bf-btn.primary:hover { filter: brightness(1.1); }
.bf-btn.ghost { background: transparent; border-color: rgba(255,255,255,0.12); }
.bf-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.bf-empty { padding: 20px; border: 1px dashed rgba(255,255,255,0.12); border-radius: 8px; text-align: center; color: var(--mute); }
.bf-empty p { margin: 0 0 14px 0; line-height: 1.55; }

.bf-community { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.06); }
.bf-community h4 { margin: 0 0 4px 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); }
.bf-community p { color: var(--mute); font-size: 12px; margin: 0; }

/* Modal wizard */
.bf-modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.bf-modal { background: var(--bg-2, #1c1916); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; width: min(720px, 92vw); max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.bf-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.bf-modal-head h2 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: 0.04em; }
.bf-x { background: transparent; border: 0; color: var(--mute); font-size: 22px; cursor: pointer; line-height: 1; }
.bf-step { flex: 1; overflow-y: auto; padding: 18px; }
.bf-form label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); margin: 12px 0 5px; }
.bf-in, .bf-ta { width: 100%; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.12); border-radius: 5px; padding: 8px 10px; color: var(--fg); font-family: inherit; font-size: 13px; box-sizing: border-box; }
.bf-in:focus, .bf-ta:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.bf-ta { resize: vertical; min-height: 60px; font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 12px; line-height: 1.5; }
.bf-modal-foot { display: flex; gap: 8px; align-items: center; padding: 12px 18px; border-top: 1px solid rgba(255,255,255,0.08); }

/* Voice cards */
.bf-voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.bf-voice-card { text-align: left; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: border-color 0.15s, background 0.15s; color: inherit; font-family: inherit; }
.bf-voice-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); }
.bf-voice-card.selected { border-color: var(--accent); background: rgba(212,168,87,0.08); }
.bf-voice-name { font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.bf-voice-desc { font-size: 11px; color: var(--mute); line-height: 1.4; }
.bf-voice-sample { margin: 8px 0 6px; padding: 6px 8px; background: rgba(0,0,0,0.25); border-left: 2px solid var(--accent); border-radius: 0 4px 4px 0; }
.bf-voice-sample-ref { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.bf-voice-sample-text { font-family: "Cardo", "Cormorant Garamond", serif; font-size: 12px; font-style: italic; margin-top: 2px; }
.bf-voice-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.bf-tag { font-size: 9px; padding: 1px 6px; background: rgba(255,255,255,0.06); border-radius: 8px; color: var(--mute); letter-spacing: 0.04em; }
.bf-voice-custom { border-style: dashed; }

/* Rigor segmented */
.bf-rigor-seg { display: inline-flex; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; overflow: hidden; }
.bf-rigor-btn { background: transparent; border: 0; border-right: 1px solid rgba(255,255,255,0.08); padding: 7px 14px; color: var(--fg); cursor: pointer; font-family: inherit; font-size: 12px; }
.bf-rigor-btn:last-child { border-right: 0; }
.bf-rigor-btn:hover { background: rgba(255,255,255,0.06); }
.bf-rigor-btn.on { background: var(--accent); color: #1a1614; font-weight: 500; }
.bf-rigor-explain { margin-top: 8px; padding: 8px 10px; background: rgba(0,0,0,0.2); border-left: 2px solid var(--accent); border-radius: 0 4px 4px 0; font-size: 12px; color: var(--mute); line-height: 1.45; }

/* Project editor */
.bf-proj-editor { display: flex; flex-direction: column; gap: 12px; }
.bf-proj-head { display: flex; align-items: flex-start; gap: 10px; }
.bf-proj-title { flex: 1; }
.bf-proj-name { font-size: 16px; font-weight: 500; }

/* Editor toolbar */
.bf-editor { display: flex; flex-direction: column; gap: 8px; }
.bf-editor-toolbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 8px 10px; background: rgba(0,0,0,0.2); border-radius: 6px; }
.bf-ref { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: 0.06em; color: var(--accent); padding: 0 8px; }
.bf-err { padding: 8px 12px; background: rgba(220,80,80,0.12); border: 1px solid rgba(220,80,80,0.3); color: #ffb0b0; border-radius: 6px; font-size: 12px; }

/* Three-pane editor */
.bf-three-pane { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 1px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; min-height: 220px; }
@media (max-width: 900px) { .bf-three-pane { grid-template-columns: 1fr; } }
.bf-pane { background: var(--bg, #14110f); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bf-pane-meta { font-size: 10px; color: var(--mute); margin-top: auto; font-style: italic; }
.bf-orig { font-family: "Cardo", "SBL Hebrew", "SBL Greek", serif; font-size: 14px; line-height: 1.6; direction: ltr; }
.bf-base { font-family: "Cardo", "Cormorant Garamond", serif; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.85); }
.bf-draft { width: 100%; min-height: 100px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 8px 10px; color: var(--fg); font-family: "Cardo", "Cormorant Garamond", serif; font-size: 14px; line-height: 1.55; resize: vertical; box-sizing: border-box; }
.bf-draft:focus { outline: 1px solid var(--accent); border-color: var(--accent); }

.bf-notes { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 160px; overflow-y: auto; }
.bf-note { font-size: 11px; padding: 5px 7px; border-radius: 4px; line-height: 1.4; border-left: 2px solid transparent; }
.bf-note-info { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.7); border-left-color: rgba(255,255,255,0.2); }
.bf-note-warn { background: rgba(212,168,87,0.1); color: #ecc97a; border-left-color: #d4a857; }
.bf-note-fail { background: rgba(220,80,80,0.12); color: #ffb0b0; border-left-color: #dc5050; }
.bf-note-kind { font-weight: 600; font-size: 9px; letter-spacing: 0.1em; opacity: 0.75; }

/* Badges */
.bf-badge { font-size: 10px; padding: 2px 7px; border-radius: 10px; letter-spacing: 0.04em; font-weight: 500; }
.bf-badge-ok { background: rgba(120,200,140,0.15); color: #8edca0; }
.bf-badge-warn { background: rgba(212,168,87,0.18); color: #ecc97a; }
.bf-badge-fail { background: rgba(220,80,80,0.15); color: #ffb0b0; }
.bf-badge-none { background: rgba(255,255,255,0.05); color: var(--mute); }

/* Bulk / export */
.bf-bulk { display: flex; gap: 6px; align-items: center; padding-top: 6px; }
.bf-export-tray { display: flex; gap: 6px; padding: 8px; background: rgba(0,0,0,0.2); border-radius: 6px; }

/* ===== VOX — Voice + Prayer ===== */
.cx-vox-panel { font-family: "Inter Tight", system-ui, sans-serif; }

.cx-vox-tab:hover { color: #c9d4dc !important; }
.cx-vox-tab:focus-visible { outline: 1px solid #7ee0ff; outline-offset: 2px; }

.cx-vox-btn { transition: filter 160ms ease, transform 80ms ease; }
.cx-vox-btn:hover:not(:disabled) { filter: brightness(1.18); }
.cx-vox-btn:active:not(:disabled) { transform: translateY(1px); }
.cx-vox-btn:focus-visible { outline: 1px solid #7ee0ff; outline-offset: 2px; }

.cx-vox-btn-primary {
  box-shadow: 0 0 0 1px rgba(126,224,255,0.10), 0 2px 8px rgba(0,0,0,0.4);
}

/* Custom range slider matching the CODEX terminal aesthetic */
input.cx-vox-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: linear-gradient(to right, #2a3a4e, #1a2230);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
input.cx-vox-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #7ee0ff;
  border: 2px solid #0a0f17;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(126,224,255,0.45);
  transition: transform 120ms ease;
}
input.cx-vox-slider::-webkit-slider-thumb:hover { transform: scale(1.18); }
input.cx-vox-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #7ee0ff;
  border: 2px solid #0a0f17;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(126,224,255,0.45);
}

/* Prayer cards hover */
.cx-vox-prayer-card {
  transition: background 180ms ease, border-color 180ms ease, transform 120ms ease;
}
.cx-vox-prayer-card:hover {
  background: #13202e !important;
  border-color: #3a4a5e !important;
  transform: translateY(-1px);
}
.cx-vox-prayer-card:focus-visible {
  outline: 1px solid #7ee0ff;
  outline-offset: 2px;
}

/* Soft pulse on the currently-spoken prayer section */
@keyframes cxVoxPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(126,224,255,0.18); }
  50%      { box-shadow: 0 0 0 2px rgba(126,224,255,0.32); }
}
.cx-vox-panel select:focus,
.cx-vox-panel textarea:focus {
  outline: none;
  border-color: #7ee0ff !important;
  box-shadow: 0 0 0 1px rgba(126,224,255,0.32);
}

/* =====================================================================
   BabelForge — AI Voice Generator (Phase Babel extension)
   Add-on to the existing /* ===== BabelForge ===== */ block.
   ===================================================================== */
.bf-voice-card-wrap { position: relative; }
.bf-voice-card-rm {
  position: absolute; top: 6px; right: 6px;
  background: rgba(0,0,0,.45);
  color: #ff8291;
  border: 1px solid rgba(255,130,145,.25);
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease;
  z-index: 2;
}
.bf-voice-card-wrap:hover .bf-voice-card-rm { opacity: 1; }
.bf-voice-card-rm:hover {
  background: rgba(255,130,145,.18);
  border-color: #ff8291;
}
.bf-voice-card.is-custom {
  border-color: color-mix(in oklab, var(--cx-accent) 45%, transparent);
  background: color-mix(in oklab, var(--cx-accent) 4%, transparent);
}
.bf-voice-badge {
  position: absolute; top: 8px; right: 8px;
  font-family: var(--cx-mono);
  font-size: 8.5px;
  letter-spacing: .14em;
  color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 40%, transparent);
  padding: 1px 6px;
  border-radius: 999px;
}
.bf-voice-card { position: relative; }

/* AI generator panel */
.bf-voicegen {
  padding: 14px 16px;
  background: color-mix(in oklab, var(--cx-accent) 5%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-accent) 28%, transparent);
  border-radius: 8px;
}
.bf-voicegen-h {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 10px;
  font-family: var(--cx-sans);
  font-size: 13px;
  color: var(--cx-fg);
}
.bf-voicegen-icon {
  color: var(--cx-accent);
  font-size: 14px;
}
.bf-voicegen-sub {
  font-family: var(--cx-mono);
  font-size: 10px;
  color: var(--cx-fg-dim);
  letter-spacing: .04em;
  font-style: italic;
}
.bf-voicegen-row {
  display: flex; gap: 8px;
  align-items: stretch;
}
.bf-voicegen-input { flex: 1; min-width: 0; }
.bf-voicegen-err {
  margin-top: 8px;
  font-family: var(--cx-mono);
  font-size: 11px;
  color: #ff8291;
}
.bf-voicegen-ok {
  margin-top: 8px;
  font-family: var(--cx-mono);
  font-size: 11px;
  color: #8de8a8;
  animation: bf-fade-out 2.4s ease forwards;
}
.bf-voicegen-hint {
  margin-top: 10px;
  font-family: var(--cx-sans);
  font-size: 11.5px;
  color: var(--cx-fg-dim);
  font-style: italic;
  opacity: .85;
}
@keyframes bf-fade-out {
  0%, 60% { opacity: 1; }
  100%    { opacity: 0; }
}

/* ── Toast dock — bottom-right, stacks up to 3 ──────────────────────── */
.cx-toast-dock {
  position: fixed; bottom: 64px; right: 18px;
  z-index: 2147483640;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  max-width: min(360px, 90vw);
}
.cx-toast {
  pointer-events: auto;
  background: rgba(10, 14, 22, 0.96);
  color: var(--cx-fg, #d8dee5);
  border: 1px solid var(--cx-line-strong, #2a3340);
  border-left: 3px solid var(--cx-accent, #7ee0ff);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--cx-sans, system-ui), sans-serif;
  font-size: 12.5px; line-height: 1.45;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  animation: cx-toast-in .25s ease, cx-toast-out .35s ease 3.85s forwards;
}
.cx-toast-ok   { border-left-color: #8de8a8; }
.cx-toast-warn { border-left-color: #ffc46b; }
.cx-toast-err  { border-left-color: #ff7e7e; }
@keyframes cx-toast-in  { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes cx-toast-out { to   { transform: translateY(-4px); opacity: 0; } }
@media (max-width: 480px) {
  .cx-toast-dock { right: 10px; left: 10px; max-width: none; bottom: 76px; }
}

/* ── Forge status pill — global in-flight whole-Bible progress ───────── */
.cx-forge-pill {
  position: fixed; top: 12px; right: 64px;
  z-index: 2147483641;
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #1a2a3f, #26334a);
  border: 1px solid #3a4d6a;
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  color: #cfe4ff; font-family: var(--cx-mono, ui-monospace), monospace;
  font-size: 11px; letter-spacing: 0.06em;
  transition: transform .12s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(126, 224, 255, 0.18);
  max-width: min(320px, 60vw);
}
.cx-forge-pill:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(126, 224, 255, 0.28); }
.cx-forge-pill-glyph { font-size: 14px; animation: cx-forge-pulse 1.6s ease-in-out infinite; }
.cx-forge-pill-meta  { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.cx-forge-pill-name  { font-weight: 600; color: #e7f1ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.cx-forge-pill-pct   { opacity: 0.75; font-size: 10px; }
@keyframes cx-forge-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (max-width: 480px) {
  .cx-forge-pill { right: 12px; top: auto; bottom: 76px; max-width: 70vw; }
  .cx-forge-pill-name { max-width: 50vw; }
}

/* ════════════════════════════════════════════════════════════════════
   BabelForge v2 — Award-winning redesign (v194)
   Hero, tiles, refined toolbar, three-pane editor polish.
   ════════════════════════════════════════════════════════════════════ */

/* ── Entrance motion ─────────────────────────────────────────────── */
.bf-fade-in { animation: bf-fade-up 220ms cubic-bezier(.2,.7,.3,1) both; }
@keyframes bf-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Header v2 ───────────────────────────────────────────────────── */
.bf-header-v2 { padding-bottom: 14px; }
.bf-tagline-v2 { font-style: normal; font-size: 12.5px; line-height: 1.5; color: var(--cx-fg-dim, #8a98a8); letter-spacing: 0.005em; }
.bf-tagline-strong { color: var(--cx-fg, #d8dee5); font-weight: 500; }
.bf-tagline-dim { opacity: 0.7; }

/* ── HERO BLOCK ──────────────────────────────────────────────────── */
.bf-hero {
  position: relative; overflow: hidden;
  margin: 6px 0 18px;
  min-height: 184px;
  border-radius: 14px;
  border: 1px solid var(--cx-line, #1f2a36);
  background: radial-gradient(ellipse at 80% 0%, rgba(126,224,255,0.08) 0%, transparent 60%),
              linear-gradient(135deg, #0a1320 0%, #0d1826 100%);
  isolation: isolate;
}
.bf-hero-art { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bf-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(126,224,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,224,255,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at 100% 50%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 100% 50%, black 0%, transparent 75%);
}
.bf-hero-glow {
  position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(126,224,255,0.18) 0%, transparent 70%);
  animation: bf-hero-pulse 6s ease-in-out infinite;
}
@keyframes bf-hero-pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 0.95; } }
.bf-hero-body { position: relative; z-index: 1; padding: 24px 26px; max-width: 78%; }
.bf-hero-eyebrow {
  font-family: var(--cx-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 10px; letter-spacing: 0.22em; color: var(--cx-accent, #7ee0ff);
  opacity: 0.85; margin-bottom: 10px;
}
.bf-hero-title {
  margin: 0 0 6px; font-family: var(--cx-serif, "Cormorant Garamond", "Cardo", serif);
  font-size: 28px; line-height: 1.1; font-weight: 500; letter-spacing: -0.01em;
  color: #f1f6fb;
}
.bf-hero-sub { margin: 0 0 18px; color: #9ab3c9; font-size: 13px; line-height: 1.5; max-width: 460px; }

/* ── Primary CTA ─────────────────────────────────────────────────── */
.bf-cta-primary {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 22px;
  background: linear-gradient(180deg, #8ee8ff 0%, #5ec8e5 100%);
  color: #06121c; font-weight: 600; font-size: 13.5px; letter-spacing: 0.02em;
  border: 0; border-radius: 999px;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 6px 24px rgba(126,224,255,0.28);
  transition: transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .15s, filter .15s;
}
.bf-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 10px 32px rgba(126,224,255,0.42); }
.bf-cta-primary:active { transform: translateY(0); }
.bf-cta-primary:disabled { filter: grayscale(0.5) brightness(0.7); cursor: not-allowed; box-shadow: none; transform: none; }
.bf-cta-sm { height: 40px; padding: 0 18px; font-size: 12.5px; }
.bf-cta-md { height: 44px; padding: 0 20px; font-size: 13px; }
.bf-cta-glyph { font-size: 14px; line-height: 1; }
.bf-cta-arrow { font-weight: 500; opacity: 0.7; transition: transform .15s; }
.bf-cta-primary:hover .bf-cta-arrow { transform: translateX(3px); opacity: 1; }
.bf-spin {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(6,18,28,0.25); border-top-color: #06121c;
  animation: bf-spin 0.7s linear infinite;
}
@keyframes bf-spin { to { transform: rotate(360deg); } }

/* ── Ghost / small buttons ──────────────────────────────────────── */
.bf-btn-ghost-sm {
  background: transparent; color: var(--cx-fg, #d8dee5);
  border: 1px solid var(--cx-line, #1f2a36);
  padding: 8px 14px; min-height: 36px;
  border-radius: 8px; cursor: pointer; font-size: 12px; font-family: inherit;
  letter-spacing: 0.02em;
  transition: border-color .12s, background .12s, color .12s;
}
.bf-btn-ghost-sm:hover { border-color: var(--cx-accent, #7ee0ff); color: #fff; background: rgba(126,224,255,0.04); }
.bf-btn-ghost-sm:disabled { opacity: 0.4; cursor: not-allowed; }

.bf-icon-btn {
  background: transparent; border: 1px solid var(--cx-line, #1f2a36);
  border-radius: 8px; padding: 8px 12px; min-height: 36px;
  color: var(--cx-fg-dim, #8a98a8); cursor: pointer;
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: 0.12em;
  transition: color .12s, border-color .12s, background .12s;
}
.bf-icon-btn:hover { color: var(--cx-accent, #7ee0ff); border-color: var(--cx-accent, #7ee0ff); background: rgba(126,224,255,0.05); }
.bf-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Forge running banner ────────────────────────────────────────── */
.bf-forge-status {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 14px; margin: 0 0 14px;
  background: linear-gradient(180deg, rgba(255,196,107,0.06), rgba(255,196,107,0.02));
  border: 1px solid rgba(255,196,107,0.25); border-radius: 10px;
  font-family: var(--cx-mono, ui-monospace, monospace); font-size: 11px;
  position: relative; overflow: hidden;
}
.bf-forge-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffc46b; box-shadow: 0 0 8px #ffc46b; animation: bf-pulse 1.4s infinite; }
@keyframes bf-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.bf-forge-status-name { color: #ffd599; font-weight: 500; }
.bf-forge-status-meta { color: var(--cx-fg-dim); letter-spacing: 0.04em; }
.bf-forge-status-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,196,107,0.1); }
.bf-forge-status-fill { height: 100%; background: linear-gradient(90deg, #ffc46b, #ffa84a); transition: width 300ms ease; }

/* ── Section heads ───────────────────────────────────────────────── */
.bf-section-head { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 12px; }
.bf-section-title { display: flex; align-items: baseline; gap: 10px; }
.bf-section-eyebrow {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: 0.22em; color: var(--cx-fg-dim, #8a98a8);
}
.bf-section-count {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: 0.1em;
  background: rgba(126,224,255,0.08); color: var(--cx-accent, #7ee0ff);
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(126,224,255,0.18);
}
.bf-section-actions { display: flex; gap: 6px; }

/* ── Empty state ─────────────────────────────────────────────────── */
.bf-empty-card {
  padding: 36px 24px; text-align: center;
  border: 1px dashed var(--cx-line, #1f2a36); border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.bf-empty-glyph { font-size: 32px; color: var(--cx-accent, #7ee0ff); opacity: 0.5; }
.bf-empty-line {
  font-family: var(--cx-serif, serif); font-size: 18px; line-height: 1.3;
  color: var(--cx-fg, #d8dee5); max-width: 380px;
}

/* ── Project tiles ───────────────────────────────────────────────── */
.bf-tile-grid { display: flex; flex-direction: column; gap: 10px; }
.bf-tile {
  position: relative; cursor: pointer;
  padding: 18px 20px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  border: 1px solid var(--cx-line, #1f2a36);
  transition: border-color .14s, transform .14s, background .14s, box-shadow .14s;
}
.bf-tile:hover {
  border-color: rgba(126,224,255,0.35);
  background: linear-gradient(180deg, rgba(126,224,255,0.04), rgba(126,224,255,0.01));
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}
.bf-tile-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.bf-tile-ring { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.bf-tile-ring-pct {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 9.5px; color: var(--cx-fg-dim, #8a98a8); letter-spacing: 0.04em;
}
.bf-tile-main { min-width: 0; }
.bf-tile-name {
  font-family: var(--cx-serif, "Cormorant Garamond", serif);
  font-size: 19px; line-height: 1.2; color: var(--cx-fg, #d8dee5);
  letter-spacing: -0.005em; margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bf-tile-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: 0.08em; color: var(--cx-fg-dim, #8a98a8);
  text-transform: uppercase;
}
.bf-tile-voice { color: var(--cx-accent, #7ee0ff); opacity: 0.85; }
.bf-tile-sep { opacity: 0.4; }
.bf-tile-rm {
  background: transparent; border: 0; color: var(--cx-fg-dim, #8a98a8);
  width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
  font-size: 18px; line-height: 1; opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.bf-tile:hover .bf-tile-rm { opacity: 0.7; }
.bf-tile-rm:hover { opacity: 1; color: #ff7e7e; background: rgba(255,126,126,0.08); }
.bf-tile-sample {
  margin: 14px 0 12px 58px; padding: 0;
  font-family: var(--cx-serif, "Cormorant Garamond", serif);
  font-size: 13.5px; line-height: 1.55; font-style: italic;
  color: var(--cx-fg-dim, #8a98a8); max-height: 0; overflow: hidden;
  transition: max-height .25s ease, color .14s;
}
.bf-tile:hover .bf-tile-sample, .bf-tile:focus-within .bf-tile-sample { max-height: 80px; color: rgba(216,222,229,0.85); }
.bf-tile-foot {
  display: flex; align-items: center; gap: 8px; margin-left: 58px; margin-top: 2px;
  font-family: var(--cx-mono, ui-monospace, monospace); font-size: 10px; letter-spacing: 0.08em;
}
.bf-tile-chip { padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.04); color: var(--cx-fg-dim); border: 1px solid var(--cx-line); }
.bf-tile-chip-ok { color: #8de8a8; border-color: rgba(141,232,168,0.25); background: rgba(141,232,168,0.06); }
.bf-tile-chip-fail { color: #ff7e7e; border-color: rgba(255,126,126,0.25); background: rgba(255,126,126,0.06); }
.bf-tile-open { margin-left: auto; color: var(--cx-fg-dim); opacity: 0.6; transition: color .14s, opacity .14s; }
.bf-tile:hover .bf-tile-open { color: var(--cx-accent, #7ee0ff); opacity: 1; }

/* ── PROJECT EDITOR v2 ───────────────────────────────────────────── */
.bf-proj-head { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 14px; }
.bf-back-btn {
  background: transparent; border: 0; color: var(--cx-fg-dim, #8a98a8);
  padding: 6px 10px 6px 0; cursor: pointer; font-size: 12px;
  font-family: var(--cx-mono, ui-monospace, monospace); letter-spacing: 0.08em;
  transition: color .12s;
}
.bf-back-btn:hover { color: var(--cx-accent, #7ee0ff); }
.bf-proj-title { flex: 1; min-width: 0; }
.bf-proj-eyebrow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: 0.18em; color: var(--cx-fg-dim, #8a98a8);
  margin-bottom: 6px;
}
.bf-proj-glyph { color: var(--cx-accent, #7ee0ff); font-size: 13px; }
.bf-proj-eyebrow-sep { opacity: 0.4; }
.bf-proj-installed { color: #8de8a8; font-weight: 500; }
.bf-proj-name {
  margin: 0; font-family: var(--cx-serif, "Cormorant Garamond", serif);
  font-size: 26px; line-height: 1.15; font-weight: 500; letter-spacing: -0.01em;
  color: var(--cx-fg, #d8dee5);
}

/* ── Stat cards ──────────────────────────────────────────────────── */
.bf-stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.bf-stat-card {
  padding: 12px 14px; border: 1px solid var(--cx-line, #1f2a36);
  border-radius: 10px; background: rgba(255,255,255,0.015);
}
.bf-stat-label {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 9.5px; letter-spacing: 0.18em; color: var(--cx-fg-dim, #8a98a8);
  margin-bottom: 6px;
}
.bf-stat-num {
  font-family: var(--cx-serif, "Cormorant Garamond", serif);
  font-size: 26px; line-height: 1; color: var(--cx-fg, #d8dee5); font-weight: 500;
}
.bf-stat-bar { height: 2px; background: rgba(255,255,255,0.05); margin-top: 8px; border-radius: 1px; overflow: hidden; }
.bf-stat-fill { height: 100%; background: var(--cx-fg-dim, #8a98a8); transition: width 300ms ease; }
.bf-stat-ok   .bf-stat-num { color: #8de8a8; } .bf-stat-ok   .bf-stat-fill { background: #8de8a8; }
.bf-stat-warn .bf-stat-num { color: #ffc46b; } .bf-stat-warn .bf-stat-fill { background: #ffc46b; }
.bf-stat-fail .bf-stat-num { color: #ff7e7e; } .bf-stat-fail .bf-stat-fill { background: #ff7e7e; }

/* ── Toolbar (settings strip) ────────────────────────────────────── */
.bf-toolbar {
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  padding: 14px; margin-bottom: 14px;
  border: 1px solid var(--cx-line, #1f2a36); border-radius: 10px;
  background: rgba(255,255,255,0.015);
}
.bf-tool { display: flex; flex-direction: column; gap: 5px; }
.bf-tool-label {
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 9.5px; letter-spacing: 0.18em; color: var(--cx-fg-dim, #8a98a8);
}
.bf-in-terminal {
  background: transparent !important; border: 1px solid var(--cx-line, #1f2a36) !important;
  border-radius: 6px !important; padding: 8px 10px !important;
  font-family: var(--cx-mono, ui-monospace, monospace) !important;
  font-size: 12px !important; color: var(--cx-fg, #d8dee5) !important;
  transition: border-color .12s, box-shadow .12s;
}
.bf-in-terminal:focus {
  outline: 0 !important; border-color: var(--cx-accent, #7ee0ff) !important;
  box-shadow: 0 0 0 3px rgba(126,224,255,0.12);
}
@media (max-width: 640px) { .bf-toolbar { gap: 10px; } .bf-tool { width: 100%; } .bf-tool select { width: 100% !important; min-width: 0 !important; } }

/* ── Three-pane editor v2 ────────────────────────────────────────── */
.bf-three-pane-v2 {
  display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 10px;
  background: transparent; border: 0; border-radius: 0; overflow: visible;
  min-height: 260px; padding: 0;
}
.bf-three-pane-v2 .bf-pane {
  background: rgba(255,255,255,0.015);
  border: 1px solid var(--cx-line, #1f2a36); border-radius: 10px;
  padding: 16px 18px; gap: 10px; transition: border-color .14s, background .14s;
}
.bf-three-pane-v2 .bf-pane:hover { border-color: rgba(255,255,255,0.12); }
.bf-three-pane-v2 .bf-pane-draft {
  border-top: 2px solid var(--cx-accent, #7ee0ff);
  background: linear-gradient(180deg, rgba(126,224,255,0.04), rgba(126,224,255,0.01));
}
.bf-pane-corner {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--cx-mono, ui-monospace, monospace);
  font-size: 9.5px; letter-spacing: 0.2em; color: var(--cx-fg-dim, #8a98a8);
}
.bf-pane-corner-accent { color: var(--cx-accent, #7ee0ff); }
.bf-pane-rigor {
  margin-left: auto; padding: 2px 8px; border-radius: 999px;
  font-size: 9px; letter-spacing: 0.08em; font-family: var(--cx-mono, monospace);
}
.bf-pane-rigor-ok   { background: rgba(141,232,168,0.1); color: #8de8a8; }
.bf-pane-rigor-warn { background: rgba(255,196,107,0.1); color: #ffc46b; }
.bf-pane-rigor-fail { background: rgba(255,126,126,0.1); color: #ff7e7e; }
.bf-pane-empty { color: var(--cx-fg-dim, #8a98a8); opacity: 0.6; font-style: italic; font-size: 12px; }
.bf-three-pane-v2 .bf-draft {
  background: rgba(0,0,0,0.25); border: 1px solid var(--cx-line, #1f2a36);
  border-radius: 8px; padding: 12px 14px; min-height: 140px;
  font-family: var(--cx-serif, "Cormorant Garamond", serif); font-size: 15px; line-height: 1.55;
}
.bf-three-pane-v2 .bf-draft:focus { outline: 0; border-color: var(--cx-accent, #7ee0ff); box-shadow: 0 0 0 3px rgba(126,224,255,0.12); }
@media (max-width: 900px) {
  .bf-three-pane-v2 { grid-template-columns: 1fr; }
}

/* ── Action ribbon ───────────────────────────────────────────────── */
.bf-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 14px 0 8px;
}

/* ── Full progress card ──────────────────────────────────────────── */
.bf-fullprog-card {
  padding: 14px 16px; border: 1px solid rgba(255,196,107,0.25);
  background: linear-gradient(180deg, rgba(255,196,107,0.04), transparent);
  border-radius: 12px; margin-top: 8px;
}
.bf-fullprog-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.bf-fullprog-radial { flex-shrink: 0; }
.bf-fullprog-meta { flex: 1; min-width: 0; }
.bf-fullprog-num { font-family: var(--cx-serif, serif); font-size: 22px; color: var(--cx-fg); font-weight: 500; line-height: 1.1; }
.bf-fullprog-label {
  font-family: var(--cx-mono, monospace); font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--cx-fg-dim); margin-top: 4px; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bf-fullprog-bar { height: 4px; background: rgba(255,255,255,0.05); border-radius: 2px; overflow: hidden; }
.bf-fullprog-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffc46b, #ffa84a 60%, #ff8a4a);
  background-size: 200% 100%;
  transition: width 200ms ease;
  animation: bf-shimmer 2.4s linear infinite;
}
@keyframes bf-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.bf-fullprog-foot {
  margin-top: 8px; font-family: var(--cx-mono, monospace);
  font-size: 11px; color: var(--cx-fg-dim);
}
.bf-fullprog-err { color: #ff7e7e; }

/* ── Voice book-cover cards ──────────────────────────────────────── */
.bf-voice-card-v2 {
  padding: 0 !important; overflow: hidden;
  border-radius: 10px;
  transition: transform .14s cubic-bezier(.2,.7,.3,1), border-color .14s, box-shadow .14s;
}
.bf-voice-card-v2:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.35); }
.bf-voice-card-v2 .bf-voice-name { padding: 12px 14px 2px; }
.bf-voice-card-v2 .bf-voice-desc { padding: 0 14px; }
.bf-voice-card-v2 .bf-voice-sample { margin: 8px 14px 8px; }
.bf-voice-card-v2 .bf-voice-tags { padding: 0 14px 12px; margin-top: 8px; }
.bf-voice-cover {
  height: 72px; position: relative;
  background: linear-gradient(135deg, #1e2a3d, #0d1623);
  display: grid; place-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bf-voice-cover-glyph {
  font-size: 28px; color: rgba(255,255,255,0.85); opacity: 0.5;
  font-family: var(--cx-serif, serif);
}
.bf-cover-classical .bf-voice-cover { background: linear-gradient(135deg, #2b1f3a, #0f0a18); }
.bf-cover-scholar   .bf-voice-cover { background: linear-gradient(135deg, #1a2a3a, #0a141e); }
.bf-cover-punchy    .bf-voice-cover { background: linear-gradient(135deg, #3a1d22, #1a0a10); }
.bf-cover-kids      .bf-voice-cover { background: linear-gradient(135deg, #2a3a1d, #14200a); }
.bf-cover-poetic    .bf-voice-cover { background: linear-gradient(135deg, #1d3a3a, #0a1c1c); }
.bf-cover-roguish   .bf-voice-cover { background: linear-gradient(135deg, #3a2a1d, #1c1408); }
.bf-cover-custom    .bf-voice-cover { background: linear-gradient(135deg, #2d1d3a, #0f0820); }

/* ── Modal v2 ────────────────────────────────────────────────────── */
.bf-modal-v2 { border-radius: 14px; }
.bf-modal-head-v2 { padding: 18px 20px; }
.bf-modal-eyebrow {
  font-family: var(--cx-mono, monospace); font-size: 10px; letter-spacing: 0.22em;
  color: var(--cx-accent, #7ee0ff); margin-bottom: 4px;
}
.bf-modal-head-v2 h2 {
  font-family: var(--cx-serif, serif); font-size: 20px; font-weight: 500;
  letter-spacing: -0.005em; color: var(--cx-fg, #d8dee5);
}
.bf-modal-preview {
  padding: 12px 20px; border-bottom: 1px solid var(--cx-line, #1f2a36);
  background: rgba(126,224,255,0.03);
}
.bf-modal-preview-eyebrow {
  font-family: var(--cx-mono, monospace); font-size: 9.5px; letter-spacing: 0.18em;
  color: var(--cx-fg-dim); margin-bottom: 4px;
}
.bf-modal-preview-text {
  margin: 0; font-family: var(--cx-serif, serif); font-size: 14px; line-height: 1.5;
  font-style: italic; color: var(--cx-fg);
}
.bf-modal-foot-sticky {
  position: sticky; bottom: 0;
  background: linear-gradient(180deg, transparent, var(--bg-2, #0c1219) 30%);
  backdrop-filter: blur(6px);
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bf-fade-in, .bf-hero-glow, .bf-forge-status-dot,
  .bf-fullprog-fill, .bf-spin { animation: none !important; }
  .bf-tile, .bf-cta-primary, .bf-voice-card-v2 { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE OVERHAUL — v195
   Single source-of-truth phone polish. Scoped strictly to ≤640px / ≤480px.
   Desktop (≥769px) is untouched.
   ════════════════════════════════════════════════════════════════════════ */

/* No horizontal scroll, ever. */
html, body { max-width: 100vw; overflow-x: hidden; }

@media (max-width: 640px) {
  /* ── Reader ───────────────────────────────────────────────────────── */
  .cx-reader .cx-frame { padding: 14px 12px 10px; }
  .cx-reader-head {
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 10px;
  }
  .cx-reader-titles h1 {
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.005em;
  }
  .cx-reader-titles p { font-size: 10.5px; opacity: 0.7; }
  .cx-reader-meta { flex-wrap: wrap; row-gap: 6px; }
  .cx-reader-body {
    padding: 0 2px;
    font-size: 17px;
    line-height: 1.62;
  }
  .cx-reader-body > *,
  .cx-reader-head { max-width: 100%; }
  .cx-verse {
    padding: 8px 6px 8px 34px;
    line-height: 1.62;
    /* Wider tap zone — verses are tappable for the menu. */
    min-height: 44px;
  }
  .cx-vnum {
    left: 4px; top: 9px;
    font-size: 11px;
    width: 26px;
    text-align: right;
  }

  /* Side-by-side is unusable on a phone. Force single pane + banner. */
  .cx-reader-cols,
  .cx-verse-row {
    grid-template-columns: 1fr !important;
  }
  .cx-cols-head { display: none; }
  .cx-side-toggle { display: none !important; }
  .cx-reader-body.is-cols::before {
    content: "Side-by-side hidden on phone — rotate landscape to compare.";
    display: block;
    margin: 0 0 10px;
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--cx-fg-dim);
    border-left: 2px solid var(--cx-accent);
    background: color-mix(in oklab, var(--cx-accent) 6%, transparent);
    border-radius: 0 6px 6px 0;
    font-family: var(--cx-mono, ui-monospace, monospace);
  }

  /* ── Status bar — trim non-essentials ─────────────────────────────── */
  .cx-status {
    grid-template-columns: auto 1fr auto !important;
    padding: 0 10px;
    gap: 6px;
    padding-top: env(safe-area-inset-top);
    min-height: calc(52px + env(safe-area-inset-top));
  }
  .cx-status-c { display: none !important; }

  /* ── Bottom-sheet right rail on phone ─────────────────────────────── */
  .cx-rail-r {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 82vh;
    max-height: 82vh;
    border-radius: 16px 16px 0 0 !important;
    border: 1px solid var(--cx-line-strong);
    border-bottom: 0 !important;
    box-shadow: 0 -20px 60px rgba(0,0,0,0.55);
    transform: translateY(110%) !important;
    transition: transform .28s cubic-bezier(.2,.8,.2,1) !important;
    padding-top: 18px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
  .cx-app.right-open .cx-rail-r { transform: translateY(0) !important; }
  /* Drag handle on the sheet. */
  .cx-rail-r::before {
    content: "";
    position: absolute; top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 44px; height: 4px;
    border-radius: 2px;
    background: color-mix(in oklab, var(--cx-fg-dim) 50%, transparent);
    pointer-events: none;
  }

  /* Left rail keeps drawer pattern, but full-height clean. */
  .cx-rail-l {
    width: min(88vw, 360px) !important;
    max-width: 360px !important;
    border-radius: 0 14px 14px 0 !important;
  }

  /* Pinned tab strip — pull-handle space for the sheet at top. */
  .cx-tabs { padding-top: 4px; }

  /* ── Footer / mobile FAB cluster ─────────────────────────────────── */
  .cx-footer-cluster { gap: 4px; }
  .cx-footer-l > .cx-tick { display: none !important; }
  .cx-mobile-fab {
    width: 44px !important; height: 44px !important;
    font-size: 19px;
  }

  /* Tabs glyph compaction at very small widths. */
  .cx-tab-lbl { font-size: 7.5px; letter-spacing: 0.05em; }

  /* ── Command palette → fullscreen bottom sheet ────────────────────── */
  .cx-palette-scrim { padding: 0 !important; align-items: stretch !important; }
  .cx-palette {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: 0 !important;
  }
  .cx-palette-hd {
    padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
  }
  .cx-palette-input { font-size: 16px !important; min-height: 32px; }
  .cx-palette-grid { grid-template-columns: 1fr !important; }
  .cx-palette-card { min-height: 56px; padding: 14px 12px; }
  .cx-palette-body { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

  /* ── View popover (Aa) — clamp inside viewport, never clip ───────── */
  .cx-vp-pop {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(60px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 14px !important;
  }

  /* ── Verse menu — full-width bottom sheet ────────────────────────── */
  .cx-vm {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    bottom: 0 !important; top: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 16px 16px 0 0 !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    max-height: 75vh;
    overflow-y: auto;
  }
  .cx-vm-row { padding: 13px 16px !important; min-height: 48px; font-size: 14px; }

  /* ── BabelForge mobile redesign ──────────────────────────────────── */
  .bf-root { padding: 10px 10px 14px; gap: 10px; }
  .bf-hero {
    min-height: 132px;
    margin: 4px 0 12px;
    border-radius: 12px;
  }
  .bf-hero-body {
    padding: 16px 16px 18px;
    max-width: 100% !important;
    display: flex; flex-direction: column;
    gap: 4px;
  }
  .bf-hero-glow { width: 200px; height: 200px; right: -80px; opacity: 0.55; }
  .bf-hero-eyebrow { font-size: 9.5px; letter-spacing: 0.2em; margin-bottom: 4px; }
  .bf-hero-title { font-size: 22px; line-height: 1.15; }
  .bf-hero-sub {
    font-size: 12.5px; line-height: 1.45;
    margin: 4px 0 14px; max-width: 100%;
  }
  .bf-hero .bf-cta-primary,
  .bf-cta-primary {
    width: 100%;
    justify-content: center;
    height: 50px;
    font-size: 14px;
  }

  /* Project tiles — full-width single column, larger tap zone. */
  .bf-tile-grid { gap: 8px; }
  .bf-tile {
    padding: 14px 14px;
    border-radius: 12px;
  }
  .bf-tile-row { gap: 10px; }
  .bf-tile-name { font-size: 17px; }
  .bf-tile-sample { margin-left: 0; font-size: 13px; max-height: 60px; color: rgba(216,222,229,0.7); }
  .bf-tile-foot { margin-left: 0; flex-wrap: wrap; }
  .bf-tile-rm { opacity: 0.7 !important; width: 36px; height: 36px; }

  /* Stat cards — 2-column grid on phone instead of 4. */
  .bf-stat-cards { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .bf-stat-num { font-size: 22px; }

  /* Settings strip — vertical stack, full-width inputs. */
  .bf-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px !important;
    padding: 12px;
  }
  .bf-toolbar .bf-tool { width: 100% !important; }
  .bf-toolbar .bf-tool select,
  .bf-toolbar .bf-tool input,
  .bf-toolbar .bf-in-terminal {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px;
    font-size: 16px !important;
  }

  /* Three-pane editor — stacked, breathable, sticky pane corner. */
  .bf-three-pane,
  .bf-three-pane-v2 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    min-height: 0;
  }
  .bf-three-pane-v2 .bf-pane,
  .bf-pane {
    padding: 12px 14px !important;
    border-radius: 10px !important;
  }
  /* Make the pane corner a sticky chip inside the pane so as you scroll
     a long draft you always see "ORIGINAL/BASE/DRAFT". */
  .bf-pane-corner {
    position: sticky; top: 0;
    background: var(--bg-2, #0c1219);
    padding: 6px 0 6px;
    z-index: 2;
    border-bottom: 1px solid var(--cx-line, rgba(255,255,255,0.06));
    margin: -2px 0 4px;
  }
  .bf-three-pane-v2 .bf-draft,
  .bf-draft {
    min-height: 120px;
    font-size: 16px !important;
    padding: 12px !important;
  }
  .bf-orig, .bf-base { font-size: 15px; }

  /* Editor toolbar — wrap cleanly, full-width inputs. */
  .bf-editor-toolbar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
  }
  .bf-editor-toolbar .bf-btn,
  .bf-actions .bf-btn,
  .bf-actions .bf-btn-ghost-sm,
  .bf-actions .bf-icon-btn {
    min-height: 44px;
    padding: 8px 14px;
    font-size: 13px;
  }

  /* Bulk action ribbon — primary CTA gets full row, ghosts wrap. */
  .bf-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .bf-actions .bf-cta-primary {
    flex-basis: 100%;
    order: -1;
  }

  /* Forge modal — fullscreen with sticky head + foot. */
  .bf-modal-bg { align-items: stretch !important; }
  .bf-modal,
  .bf-modal-v2 {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: 0 !important;
  }
  .bf-modal-head,
  .bf-modal-head-v2 {
    position: sticky; top: 0; z-index: 5;
    padding-top: calc(14px + env(safe-area-inset-top)) !important;
    background: var(--bg-2, #1c1916);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .bf-step { padding: 16px 14px; }
  .bf-modal-foot,
  .bf-modal-foot-sticky {
    position: sticky; bottom: 0;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
    background: var(--bg-2, #1c1916);
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-wrap: wrap; gap: 8px;
  }
  .bf-modal-foot .bf-btn,
  .bf-modal-foot-sticky .bf-cta-primary {
    flex: 1 1 100%;
    min-height: 48px;
    justify-content: center;
  }
  .bf-in, .bf-ta { font-size: 16px; }

  /* Voice cards — single column with shorter cover art. */
  .bf-voice-grid { grid-template-columns: 1fr !important; gap: 10px; }
  .bf-voice-cover { height: 54px !important; }
  .bf-voice-cover-glyph { font-size: 22px; }

  /* Progress radial shrink. */
  .bf-fullprog-radial,
  .bf-fullprog-radial svg { width: 64px !important; height: 64px !important; }
  .bf-fullprog-num { font-size: 18px; }

  /* Project head — back button + title stack. */
  .bf-proj-head { flex-direction: column; gap: 8px; padding-bottom: 10px; }
  .bf-proj-name { font-size: 22px; }

  /* Section heads wrap. */
  .bf-section-head { flex-wrap: wrap; gap: 8px; }
}

/* ── Phone (≤480px): footer collapse to compact bottom bar ─────────── */
@media (max-width: 480px) {
  /* Hide footer center gnosis label text, keep the ring. */
  .cx-gnosis-master-lbl { display: none; }
  .cx-gnosis-master {
    padding: 6px 10px;
    min-width: 44px; min-height: 44px;
    display: grid; place-items: center;
  }
  .cx-gnosis-master-ring { position: static; left: auto; }
  .cx-footer {
    grid-template-columns: 1fr auto 1fr !important;
    padding: 0 8px;
    padding-bottom: env(safe-area-inset-bottom);
    min-height: calc(52px + env(safe-area-inset-bottom));
    gap: 4px;
  }
  .cx-footer-l, .cx-footer-r {
    display: flex; align-items: center;
  }
  .cx-footer-r { justify-content: flex-end; }
  /* Drop any auto-cache or compare tick on smallest phones. */
  .cx-footer .cx-tick,
  .cx-footer .cx-auto-cache-tick { display: none !important; }

  /* Tabs more compact. */
  .cx-tab { padding: 4px 6px; }

  /* Reader title even smaller. */
  .cx-reader-titles h1 { font-size: 20px; }
}

/* ── Galaxy Fold inner (≤360px): nuclear compaction ──────────────── */
@media (max-width: 360px) {
  .cx-reader .cx-frame { padding: 12px 8px 8px; }
  .cx-reader-titles h1 { font-size: 18px; }
  .cx-verse { padding: 7px 4px 7px 30px; }
  .cx-vnum { left: 2px; width: 24px; font-size: 10px; }
  .bf-hero-title { font-size: 19px; }
  .bf-hero-body { padding: 14px 12px; }
  .bf-tile-name { font-size: 16px; }
  .cx-mobile-fab { width: 40px !important; height: 40px !important; }
}


/* ── v196 mobile polish — fix the artifacts the user reported ───────── */
@media (max-width: 640px) {
  /* Suppress focus rings from prior taps (the pager's "next" button
     was showing a stuck cyan ring after click). Keep :focus-visible
     for keyboard users. */
  .cx-nav-btn:focus:not(:focus-visible),
  .cx-tab:focus:not(:focus-visible),
  .cx-mobile-fab:focus:not(:focus-visible),
  .cx-status-fab:focus:not(:focus-visible),
  .cx-vp-trigger:focus:not(:focus-visible),
  .cx-palette-btn:focus:not(:focus-visible),
  .bf-btn:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
  }
  .cx-nav-btn { -webkit-tap-highlight-color: transparent; }

  /* Reader title block — tighter, no leftover separators from the
     side-by-side cols-head when single-pane. */
  .cx-reader-head {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid color-mix(in oklab, var(--cx-line) 70%, transparent);
  }
  .cx-reader-titles { text-align: center; flex: 1 1 100%; }
  .cx-reader-titles h1 { margin: 0; font-size: 22px; }
  .cx-reader-titles p { margin: 4px 0 0; font-size: 10.5px; opacity: 0.7; }
  .cx-reader-meta {
    flex: 1 1 100%;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  /* View popover trigger — keep the indicator dot inside the trigger,
     not bleeding above into the title row. */
  .cx-vp-trigger { min-width: 44px; min-height: 36px; }
  .cx-vp-trigger-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--cx-accent);
  }

  /* Top status bar — pad iOS safe area, even spacing, no overlap. */
  .cx-status {
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
    gap: 8px;
  }
  .cx-status-l, .cx-status-r {
    gap: 8px !important;
    align-items: center;
    flex: 0 0 auto;
  }
  .cx-status-c { display: none !important; }
  .cx-status-fab, .cx-mobile-fab {
    width: 40px !important; height: 40px !important;
    border-radius: 10px !important;
  }
  /* The QUESTS pill in the status bar gets too cramped — hide if it
     would force a wrap. Reachable via Library / palette. */
  .cx-status .cx-quest-chip,
  .cx-status .cx-quests-chip { display: none !important; }

  /* Pager — kill the leftover focus highlight on the next-button. */
  .cx-reader-foot { gap: 8px; }
  .cx-nav-btn {
    background: color-mix(in oklab, var(--cx-fg-dim) 4%, transparent);
    border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 16%, transparent);
    border-radius: 10px;
  }
  .cx-nav-btn:hover {
    /* Suppress hover-lift on touch devices to avoid sticky hover. */
    transform: none;
    background: color-mix(in oklab, var(--cx-fg-dim) 8%, transparent);
  }

  /* Suppress reader corner-frame decorations on phone — they look like
     stray ticks on small screens. */
  .cx-reader .cx-corner { display: none !important; }
}

/* Sticky-hover suppression universally on touch devices */
@media (hover: none) {
  .cx-nav-btn:hover,
  .cx-tab:hover,
  .cx-mobile-fab:hover,
  .cx-palette-btn:hover,
  .bf-btn:hover { transform: none !important; }
}

/* ── v197 reclaim wasted header space on phone ─────────────────────── */
@media (max-width: 640px) {
  /* Lose the frame "JUDGES · CH 9 · 1 VV" corner badge — same info
     already sits in the status bar / library nav. */
  .cx-reader .cx-frame-label { display: none !important; }

  /* Tighter frame padding so the reader starts higher. */
  .cx-reader .cx-frame { padding: 8px 10px 6px; }

  /* Header: title + Aa in a single row, sub on its own tight line,
     no extra breathing room. */
  .cx-reader-head {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "title meta" "sub sub";
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid color-mix(in oklab, var(--cx-line) 60%, transparent);
  }
  .cx-reader-titles {
    grid-area: title;
    text-align: left;
    min-width: 0;
  }
  .cx-reader-titles h1 {
    font-size: 19px;
    line-height: 1.15;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cx-reader-titles p {
    grid-area: sub;
    font-size: 9.5px;
    margin: 0;
    opacity: 0.55;
    text-align: left;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cx-reader-meta {
    grid-area: meta;
    flex: 0 0 auto;
    gap: 6px;
    justify-content: flex-end;
  }
  /* Hide the translation pills on phone — already in the right-rail
     translations picker; the Aa view-toggle is what users actually
     need quick access to. */
  .cx-reader-meta .cx-pill { display: none; }
  .cx-vp-trigger {
    min-width: 36px; min-height: 32px;
    padding: 4px 8px;
  }
}

/* Even tighter on very small screens. */
@media (max-width: 380px) {
  .cx-reader-titles h1 { font-size: 17px; }
  .cx-reader-titles p { font-size: 9px; }
  .cx-reader .cx-frame { padding: 6px 8px 4px; }
}

/* ══════════════════════════════════════════════════════════════════════
   READER REVISION — three passes for maximum readability
   ══════════════════════════════════════════════════════════════════════ */

/* ─── PASS 1 ─── Typographic fundamentals.
   Optical sizing, line-height, measure, micro-spacing. */
.cx-reader-body {
  --cx-fs: 21px;
  --cx-reader-lh: 1.62;          /* generous serif leading */
  --cx-reader-color: color-mix(in oklab, var(--cx-fg) 92%, white);
  --cx-reader-measure: 68ch;     /* tightened from 70 — tighter measure
                                    keeps eye-jump natural at 21px */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "onum" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cx-reader-body > *,
.cx-reader-head { max-width: var(--cx-reader-measure); }

.cx-verse {
  /* Hanging indent: text wraps under first character, not the verse num.
     Padding-left big enough for a 2-3 digit number. */
  padding: 6px 12px 6px 44px;
  font-size: var(--cx-fs);
  line-height: var(--cx-reader-lh);
  color: var(--cx-reader-color);
  letter-spacing: 0.003em;       /* subtle micro-tracking */
  word-spacing: 0.015em;         /* serif benefits from a hair more */
  border-left: 2px solid transparent;
}
.font-serif .cx-verse { font-feature-settings: "kern" 1, "liga" 1, "dlig" 1; }

.cx-vnum {
  position: absolute;
  left: 6px; top: 11px;
  width: 32px;
  text-align: right;
  font-family: var(--cx-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--cx-fg-dim) 75%, transparent);
  user-select: none;
  font-variant-numeric: tabular-nums;
}

/* Active verse: replace the heavy accent fill with a quiet left-rule +
   accent number. Lets the eye find your cursor without yelling. */
.cx-verse.is-hl {
  background: transparent;
  border-left-color: var(--cx-accent);
}
.cx-verse.is-hl .cx-vnum { color: var(--cx-accent); }
.cx-verse:hover { background: transparent; }
.cx-verse:focus-visible {
  outline: none;
  background: color-mix(in oklab, var(--cx-accent) 4%, transparent);
}

/* ─── PASS 2 ─── Hierarchy + chrome reduction.
   Strip noise; let the text breathe. */
.cx-reader .cx-frame { padding: 18px 24px 14px; }
.cx-reader-head {
  border-bottom: 1px solid color-mix(in oklab, var(--cx-line) 55%, transparent);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.cx-reader-titles h1 {
  font-family: var(--cx-serif);
  font-weight: 500;              /* serif looks better at 500 */
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.cx-reader-titles p {
  font-family: var(--cx-mono);
  letter-spacing: 0.1em;
  opacity: 0.45;
}

/* Verse rhythm: tighter intra-verse, more inter-verse. Verses are
   discrete units of thought — the page should reflect that. */
.cx-reader-body .cx-verse + .cx-verse { margin-top: 2px; }
/* Stronger break every 5 verses (a soft pericope rhythm). */
.cx-reader-body .cx-verse:nth-of-type(5n+1)::before {
  content: ""; display: block; height: 6px;
}

/* Inline accent words (God, LORD, italicized supplied words) — keep
   typographic emphasis but pull contrast down so they don't out-shout
   the surrounding text. */
.cx-vtext em,
.cx-vtext i {
  font-style: italic;
  color: color-mix(in oklab, var(--cx-fg) 80%, transparent);
}

/* Red-letter mode: cleaner red, italic, no bold. */
.cx-verse-text .cx-jesus,
.cx-vtext .cx-jesus {
  color: #ff8a7a;
  font-style: italic;
  font-weight: 400;
}

/* Side-by-side columns get a hair lighter measure so 2-3 cols fit. */
.cx-reader-body.is-cols { --cx-fs: 19px; --cx-reader-lh: 1.55; }
.cx-reader-body.is-cols > * { max-width: none; }

/* ─── PASS 3 ─── Vertical rhythm + finishing flourishes.
   Tiny moves that elevate the page from "readable" to "comfortable". */

/* Drop cap on the very first verse of a chapter. Serif initial,
   accent-tinted, 2 lines tall. Falls back gracefully if not serif. */
.font-serif .cx-reader-body .cx-verse:first-of-type .cx-vtext::first-letter,
.font-serif .cx-reader-body .cx-verse:first-of-type .cx-verse-text::first-letter {
  font-family: var(--cx-serif);
  font-size: 3.2em;
  line-height: 0.95;
  float: left;
  padding: 4px 8px 0 0;
  font-weight: 500;
  color: color-mix(in oklab, var(--cx-accent) 70%, var(--cx-fg));
  text-shadow: 0 0 18px color-mix(in oklab, var(--cx-accent) 28%, transparent);
}

/* Smooth focus drift — non-cursor verses gently fade so the eye is
   drawn to where you are. Subtle: 100% → 88%. Disabled in compare. */
.cx-reader-body:not(.is-cols) .cx-verse { transition: opacity 280ms ease; }
.cx-reader-body:not(.is-cols):focus-within .cx-verse { opacity: 0.88; }
.cx-reader-body:not(.is-cols):focus-within .cx-verse.is-hl,
.cx-reader-body:not(.is-cols):focus-within .cx-verse:hover { opacity: 1; }

/* Optical scrollbar — disappears entirely until needed. */
.cx-reader-body::-webkit-scrollbar { width: 3px; }
.cx-reader-body { scrollbar-width: none; }
.cx-reader-body:hover { scrollbar-width: thin; }

/* Selection — accent-tinted, soft. */
.cx-reader-body ::selection {
  background: color-mix(in oklab, var(--cx-accent) 22%, transparent);
  color: var(--cx-fg);
}

/* Reduce motion override. */
@media (prefers-reduced-motion: reduce) {
  .cx-verse { transition: none !important; }
}

/* Mobile — keep the three-pass refinements but compressed. */
@media (max-width: 640px) {
  .cx-reader-body {
    --cx-fs: 18px;
    --cx-reader-lh: 1.6;
    --cx-reader-measure: 100%;
    padding-right: 6px;
  }
  .cx-reader .cx-frame { padding: 10px 12px 8px; }
  .cx-verse {
    padding: 7px 8px 7px 38px;
    word-spacing: 0.01em;
  }
  .cx-vnum {
    left: 2px; top: 10px;
    width: 28px;
    font-size: 10.5px;
  }
  /* Drop cap a bit smaller on phone. */
  .font-serif .cx-reader-body .cx-verse:first-of-type .cx-vtext::first-letter,
  .font-serif .cx-reader-body .cx-verse:first-of-type .cx-verse-text::first-letter {
    font-size: 2.7em;
    padding: 2px 6px 0 0;
  }
}

/* ── v200 scroll fix — translations panel was non-scrollable when the
   list overflowed the rail height (especially in the mobile bottom-sheet
   where the 82vh container's flex chain wasn't propagating min-height:0
   all the way down). Lock the chain explicitly. */
.cx-tab-body { display: flex; flex-direction: column; min-height: 0; }
.cx-tab-body > .cx-pane { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* TranslationsPanel: the scroll context is .cx-tp-groups, NOT the outer
   .cx-pane.cx-tp. We previously double-stacked overflow:auto on both
   (creating nested scroll containers that confused touch gestures and
   left the user "scrolling" the outer with no effect). The outer pane
   stays a flex column; the inner groups list is the single scroller. */
.cx-pane.cx-tp { overflow: hidden !important; }
.cx-tp-groups {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Allow vertical pan to win the gesture race over the row drag
     handlers so touch-scroll actually works on mobile. */
  touch-action: pan-y;
}
/* Make the scrollbar actually visible — 4px was invisible. */
.cx-tp-groups::-webkit-scrollbar { width: 8px !important; }
.cx-tp-groups::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--cx-fg-dim) 45%, transparent) !important;
  border-radius: 4px !important;
}
.cx-tp-groups { scrollbar-width: auto; }
/* Row drag handles take pointer events; the rest of the row stays
   pan-able. */
.cx-tp-list, .cx-tp-row { touch-action: pan-y; }
.cx-tp-grip, .cx-tp-group-grip { touch-action: none; cursor: grab; }

@media (max-width: 640px) {
  .cx-rail-r {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .cx-rail-r > .cx-frame,
  .cx-rail-r .cx-frame {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .cx-rail-r .cx-tab-body { flex: 1 1 auto; min-height: 0; }
  .cx-rail-r .cx-pane {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* Translations panel: outer is a column, inner .cx-tp-groups is the
     single scroller (touch + visible scrollbar). */
  .cx-rail-r .cx-pane.cx-tp { overflow: hidden !important; }
  .cx-rail-r .cx-tp-groups {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
}

/* ── First-run welcome tour (v2) ───────────────────────────────────────
   Full-viewport terminal-style intro. Four steps: hero (CODEX + Logos) →
   keystrokes → wake the oracle → begin. The content sits directly on a
   black backdrop with scanlines + vignette — no glassy card. */
.cx-welcome-backdrop {
  position: fixed; inset: 0;
  z-index: 9999;
  background: #06080e;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 32px 72px;
  color: var(--cx-fg);
  overflow: hidden;
  animation: cxWelcomeFade 320ms cubic-bezier(.22,1,.36,1) both;
}
.cx-welcome-scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(126, 224, 255, 0.018) 0,
    rgba(126, 224, 255, 0.018) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: screen;
  z-index: 1;
}
.cx-welcome-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 50%, transparent 45%, rgba(0,0,0,0.7) 100%);
  z-index: 1;
}
@keyframes cxWelcomeFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes cxWelcomeRise {
  from { opacity: 0; transform: translateY(16px) }
  to   { opacity: 1; transform: translateY(0) }
}
@keyframes cxWelcomeCaret {
  0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 }
}

.cx-welcome-skip {
  position: absolute; top: 20px; right: 24px;
  z-index: 10;
  background: transparent; border: 0;
  color: var(--cx-fg-dim, #6b7280);
  font-family: var(--cx-mono);
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  cursor: pointer; padding: 6px 10px;
  transition: color .15s ease;
}
.cx-welcome-skip:hover { color: var(--cx-fg); }

.cx-welcome-shell {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 640px;
  padding: 32px 40px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 60vh;
}

.cx-welcome-stage {
  width: 100%;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 18px;
}
.cx-welcome-stage > * {
  opacity: 0;
  animation: cxWelcomeRise 280ms cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--cx-w-i, 0) * 80ms);
}

.cx-welcome-eyebrow {
  margin: 0;
  font-family: var(--cx-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cx-fg-dim, #6b7280);
}

/* Step 1 — Hero */
.cx-welcome-stage--hero { gap: 28px; }
.cx-welcome-wordmark {
  margin: 0;
  font-family: var(--cx-serif, "Cormorant Garamond", "Cormorant", Georgia, serif);
  font-weight: 500;
  font-size: 96px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--cx-fg);
  text-shadow: 0 0 60px color-mix(in oklab, var(--cx-accent) 20%, transparent);
}
.cx-welcome-scripture {
  display: flex; flex-direction: column;
  gap: 8px;
  margin: 8px 0 0;
}
.cx-welcome-scripture-greek {
  margin: 0;
  font-family: "Cardo", var(--cx-serif), Georgia, serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.3;
  color: color-mix(in oklab, var(--cx-accent) 70%, var(--cx-fg));
  letter-spacing: 0.01em;
}
.cx-welcome-scripture-en {
  margin: 0;
  font-family: var(--cx-serif, Georgia, serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  color: var(--cx-fg-dim, #9aa3b2);
}
.cx-welcome-prompt {
  margin: 20px 0 0;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--cx-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cx-fg-dim, #6b7280);
}
.cx-welcome-prompt kbd {
  font-family: var(--cx-mono);
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid color-mix(in oklab, var(--cx-accent) 35%, var(--cx-line, #2a2f3a));
  border-radius: 3px;
  color: var(--cx-fg);
  background: transparent;
  letter-spacing: 0;
}
.cx-welcome-caret {
  display: inline-block;
  color: var(--cx-accent);
  animation: cxWelcomeCaret 1.05s steps(1) infinite;
  margin-left: 2px;
}

/* Shared headings for steps 2/3/4 */
.cx-welcome-headline2 {
  margin: 0;
  font-family: var(--cx-serif, Georgia, serif);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--cx-fg);
}
.cx-welcome-headline2--lg { font-size: 56px; }
.cx-welcome-sub {
  margin: 0;
  font-family: var(--cx-sans, "Inter Tight", system-ui, sans-serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--cx-fg-dim, #9aa3b2);
  max-width: 480px;
}
.cx-welcome-sub--lg { font-size: 17px; max-width: 540px; }

/* Step 2 — keystrokes grid */
.cx-welcome-keylist {
  list-style: none;
  padding: 0; margin: 8px 0 0;
  width: 100%;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 28px;
  row-gap: 14px;
  text-align: left;
}
.cx-welcome-keylist li {
  display: contents;
}
.cx-welcome-keys-cell {
  display: inline-flex; gap: 4px; align-items: center;
  justify-self: end;
}
.cx-welcome-keys-cell kbd {
  font-family: var(--cx-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  min-width: 26px;
  padding: 4px 9px;
  text-align: center;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--cx-fg) 18%, transparent);
  border-radius: 3px;
  color: var(--cx-fg);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.cx-welcome-keylist li:hover .cx-welcome-keys-cell kbd {
  border-color: color-mix(in oklab, var(--cx-accent) 55%, transparent);
  background: color-mix(in oklab, var(--cx-accent) 8%, transparent);
  color: var(--cx-accent);
}
.cx-welcome-keys-desc {
  font-family: var(--cx-serif, Georgia, serif);
  font-size: 17px;
  line-height: 1.4;
  color: color-mix(in oklab, var(--cx-fg) 88%, transparent);
  align-self: center;
}

/* Step 3 — locked features list */
.cx-welcome-locked {
  list-style: none; padding: 0; margin: 4px 0 8px;
  display: flex; flex-wrap: wrap; gap: 6px 8px;
  justify-content: center;
  max-width: 520px;
}
.cx-welcome-locked li {
  font-family: var(--cx-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid color-mix(in oklab, var(--cx-fg) 14%, transparent);
  border-radius: 99px;
  color: var(--cx-fg-dim, #9aa3b2);
}

/* Buttons */
.cx-welcome-pair {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 12px;
}
.cx-welcome-pair--center { justify-content: center; }
.cx-welcome-btn {
  font-family: var(--cx-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 11px 20px;
  border-radius: 3px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.cx-welcome-btn--lg { padding: 14px 28px; font-size: 12px; }
.cx-welcome-btn--primary {
  background: var(--cx-accent);
  color: #06080e;
  border: 1px solid var(--cx-accent);
}
.cx-welcome-btn--primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px color-mix(in oklab, var(--cx-accent) 30%, transparent);
}
.cx-welcome-btn--ghost {
  background: transparent;
  color: var(--cx-fg-dim, #9aa3b2);
  border: 1px solid color-mix(in oklab, var(--cx-fg) 14%, transparent);
}
.cx-welcome-btn--ghost:hover {
  color: var(--cx-fg);
  border-color: color-mix(in oklab, var(--cx-fg) 28%, transparent);
}

/* Bottom nav (dots + arrows) */
.cx-welcome-nav {
  position: absolute;
  right: 24px; bottom: 28px;
  z-index: 3;
  display: flex; align-items: center; gap: 18px;
}
.cx-welcome-dots {
  display: flex; gap: 8px; align-items: center;
}
.cx-welcome-dot {
  width: 6px; height: 6px; border-radius: 99px;
  background: color-mix(in oklab, var(--cx-fg) 18%, transparent);
  transition: background .2s ease, transform .2s ease, width .2s ease;
}
.cx-welcome-dot.is-done { background: color-mix(in oklab, var(--cx-accent) 55%, transparent); }
.cx-welcome-dot.is-active {
  background: var(--cx-accent);
  width: 18px;
}
.cx-welcome-arrows {
  display: flex; gap: 4px; align-items: center;
}
.cx-welcome-arrow {
  background: transparent; border: 0;
  font-family: var(--cx-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cx-fg-dim, #6b7280);
  padding: 8px 12px;
  cursor: pointer;
  transition: color .15s ease;
}
.cx-welcome-arrow:hover { color: var(--cx-fg); }
.cx-welcome-arrow--next { color: var(--cx-accent); }
.cx-welcome-arrow--next:hover { color: var(--cx-fg); }
.cx-welcome-arrow--ghost { visibility: hidden; }

/* Bottom-of-viewport progress line */
.cx-welcome-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: color-mix(in oklab, var(--cx-fg) 8%, transparent);
  z-index: 3;
}
.cx-welcome-progress-fill {
  height: 100%;
  background: var(--cx-accent);
  box-shadow: 0 0 12px color-mix(in oklab, var(--cx-accent) 60%, transparent);
  transition: width .35s cubic-bezier(.22,1,.36,1);
}

/* Mobile */
@media (max-width: 640px) {
  .cx-welcome-backdrop { padding: 24px 20px 64px; }
  .cx-welcome-shell { padding: 16px 4px; min-height: 55vh; max-width: 100%; }
  .cx-welcome-wordmark { font-size: 56px; }
  .cx-welcome-scripture-greek { font-size: 18px; }
  .cx-welcome-scripture-en { font-size: 15px; }
  .cx-welcome-headline2 { font-size: 32px; }
  .cx-welcome-headline2--lg { font-size: 38px; }
  .cx-welcome-sub { font-size: 14.5px; }
  .cx-welcome-sub--lg { font-size: 15.5px; }
  .cx-welcome-keylist {
    grid-template-columns: 1fr;
    row-gap: 6px;
    text-align: center;
  }
  .cx-welcome-keylist li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; border-bottom: 1px solid color-mix(in oklab, var(--cx-fg) 8%, transparent); }
  .cx-welcome-keys-cell { justify-self: center; }
  .cx-welcome-keys-desc { font-size: 15px; }
  .cx-welcome-dot { width: 12px; height: 12px; }
  .cx-welcome-dot.is-active { width: 24px; }
  .cx-welcome-nav { right: 50%; transform: translateX(50%); bottom: 18px; gap: 10px; flex-direction: column-reverse; }
  .cx-welcome-skip { top: 14px; right: 16px; }
}
@media (max-width: 380px) {
  .cx-welcome-wordmark { font-size: 44px; }
  .cx-welcome-scripture { gap: 4px; }
  .cx-welcome-headline2 { font-size: 26px; }
  .cx-welcome-headline2--lg { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-welcome-backdrop,
  .cx-welcome-stage > *,
  .cx-welcome-progress-fill,
  .cx-welcome-caret { animation: none !important; transition: none !important; opacity: 1 !important; }
}

/* ── Offline pill in footer ─────────────────────────────────────────── */
.cx-offline-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  font-family: var(--cx-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase;
  background: color-mix(in oklab, #ffc46b 14%, transparent);
  color: #ffc46b;
  border: 1px solid color-mix(in oklab, #ffc46b 50%, transparent);
  border-radius: 3px;
}
.cx-offline-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #ffc46b; opacity: 0.85;
}

/* ── Footer "?" shortcut chip ────────────────────────────────────────── */
.cx-kbd-chip {
  background: transparent; color: var(--cx-fg-dim);
  border: 1px solid var(--cx-line);
  padding: 2px 8px; min-width: 22px;
  font-family: var(--cx-mono); font-size: 11px;
  cursor: pointer; border-radius: 3px;
  transition: color .15s ease, border-color .15s ease;
}
.cx-kbd-chip:hover { color: var(--cx-accent); border-color: var(--cx-accent); }

/* ── Oracle inline "key rejected" recovery card ─────────────────────── */
.cx-msg-keyfix {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px dashed color-mix(in oklab, var(--cx-accent) 55%, transparent);
  border-radius: 4px;
  font-family: var(--cx-mono); font-size: 11px;
  background: color-mix(in oklab, var(--cx-accent) 6%, transparent);
}
.cx-msg-keyfix button {
  background: transparent; color: var(--cx-accent);
  border: 1px solid var(--cx-accent);
  padding: 4px 10px; font-family: inherit; font-size: inherit;
  cursor: pointer; border-radius: 3px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.cx-msg-keyfix button:hover { background: color-mix(in oklab, var(--cx-accent) 22%, transparent); }
.cx-msg-retry {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px;
  background: transparent; color: var(--cx-fg-dim);
  border: 1px solid var(--cx-line);
  padding: 3px 8px;
  font-family: var(--cx-mono); font-size: 10.5px; letter-spacing: 0.1em;
  cursor: pointer; border-radius: 3px;
}
.cx-msg-retry:hover { color: var(--cx-accent); border-color: var(--cx-accent); }

/* ── Notes / Tweaks filter input ─────────────────────────────────────── */
.cx-notes-filter, .twk-filter {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--cx-line);
  background: var(--cx-bg);
  font-family: var(--cx-mono);
}
.cx-notes-filter input, .twk-filter input {
  flex: 1; background: transparent; color: var(--cx-fg);
  border: 1px solid var(--cx-line);
  padding: 4px 8px;
  font-family: inherit; font-size: 11px;
  border-radius: 3px;
}
.cx-notes-filter input:focus, .twk-filter input:focus { outline: none; border-color: var(--cx-accent); }
.twk-filter { position: sticky; top: 0; z-index: 5; }
.twk-row.twk-hidden, .twk-sect.twk-hidden { display: none !important; }

/* ── Mobile compare carousel ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .cx-reader-body.is-cols.is-carousel {
    display: flex !important;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .cx-reader-body.is-cols.is-carousel > .cx-carousel-page {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-width: 100%;
  }
  .cx-carousel-dots {
    display: flex; gap: 6px; justify-content: center;
    padding: 8px 0;
  }
  .cx-carousel-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--cx-line);
    border: 0; padding: 0; cursor: pointer;
  }
  .cx-carousel-dot.is-on { background: var(--cx-accent); }
}

/* ── Library smart-search dropdown ────────────────────────────────── */
.cx-lib-search { position: relative; }
.cx-lib-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  z-index: 60;
  background: var(--cx-bg);
  border: 1px solid var(--cx-line-strong);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px var(--cx-line);
  padding: 4px;
  max-height: 60vh;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px;
}
.cx-lib-suggest-h {
  padding: 6px 10px 2px;
  font-family: var(--cx-mono);
  font-size: 9px; letter-spacing: 0.18em; font-weight: 600;
  color: color-mix(in oklab, var(--cx-accent) 70%, transparent);
  text-transform: uppercase;
}
.cx-lib-suggest-row {
  appearance: none; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  background: transparent; border: 0;
  padding: 8px 10px;
  border-radius: 6px;
  text-align: left;
  color: var(--cx-fg);
  font-family: inherit;
  transition: background 80ms;
}
.cx-lib-suggest-row:hover,
.cx-lib-suggest-row.is-active {
  background: color-mix(in oklab, var(--cx-accent) 10%, transparent);
}
.cx-lib-suggest-lbl {
  font-size: 13px; font-weight: 500;
  color: var(--cx-fg);
}
.cx-lib-suggest-row.is-active .cx-lib-suggest-lbl { color: var(--cx-accent); }
.cx-lib-suggest-sub {
  font-size: 10.5px;
  color: var(--cx-fg-dim);
  font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.cx-lib-suggest-empty {
  padding: 10px 12px;
  font-size: 11px;
  color: var(--cx-fg-dim);
  font-style: italic;
}
.cx-lib-search .cx-lib-count {
  font-family: var(--cx-mono);
  font-size: 10px;
  color: var(--cx-fg-dim);
  opacity: 0.5;
  cursor: help;
}
@media (max-width: 640px) {
  .cx-lib-suggest { max-height: 50vh; }
  .cx-lib-suggest-row { padding: 10px 12px; }
  .cx-lib-suggest-lbl { font-size: 14px; }
}

/* ── Verse number = tap-to-highlight (one-click instead of menu) ──── */
.cx-vnum {
  cursor: pointer;
  /* Bigger invisible tap target — verse text is read-only, the number
     is the only interaction surface. */
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 4px;
  transition: background 120ms, color 120ms;
  -webkit-tap-highlight-color: transparent;
}
.cx-vnum:hover,
.cx-vnum:focus-visible {
  background: color-mix(in oklab, var(--cx-accent) 14%, transparent);
  color: var(--cx-accent);
  outline: none;
}
.cx-verse.is-marked .cx-vnum { color: var(--cx-fg); }
@media (max-width: 640px) {
  .cx-vnum { padding: 4px 6px; margin: -4px -6px; min-width: 28px; min-height: 28px; display: inline-flex; align-items: center; justify-content: flex-end; }
}

/* ── Reader body — swipe nav hint. Subtle horizontal-edge gradient
   when user is mid-drag (relies on JS toggling .is-swiping on body
   if we want; for now, just ensure pan-x doesn't fight nested scroll. */
.cx-reader-body { touch-action: pan-y; overscroll-behavior-x: contain; }

/* ── Quick translation switcher (clickable pill in reader header) ── */
.cx-qts { position: relative; display: inline-flex; }
.cx-qts-trigger {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: color-mix(in oklab, var(--cx-fg-dim) 5%, transparent);
  border: 1px solid color-mix(in oklab, var(--cx-fg-dim) 15%, transparent);
  border-radius: 6px;
  color: var(--cx-fg);
  font-family: var(--cx-mono);
  font-size: 10px; letter-spacing: 0.06em;
  transition: border-color 120ms, background 120ms, color 120ms;
}
.cx-qts-trigger:hover,
.cx-qts-trigger.is-open {
  border-color: var(--cx-accent);
  color: var(--cx-accent);
  background: color-mix(in oklab, var(--cx-accent) 10%, transparent);
}
.cx-qts-glyph { font-weight: 700; font-size: 11px; }
.cx-qts-sub { opacity: 0.7; font-size: 9.5px; }
.cx-qts-caret { font-size: 8px; opacity: 0.6; }
.cx-qts-pop {
  position: absolute; top: calc(100% + 6px); right: 0;
  z-index: 200;
  min-width: 260px; max-width: 320px;
  max-height: 50vh; overflow-y: auto;
  background: var(--cx-bg);
  border: 1px solid var(--cx-line-strong);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  padding: 6px;
}
.cx-qts-filter {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px;
  margin-bottom: 4px;
  background: color-mix(in oklab, var(--cx-fg-dim) 6%, transparent);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--cx-fg);
  font-family: var(--cx-mono);
  font-size: 13px;
  outline: none;
}
.cx-qts-filter:focus { border-color: var(--cx-accent); }
.cx-qts-list { display: flex; flex-direction: column; gap: 1px; }
.cx-qts-lang {
  padding: 6px 8px 2px;
  font-family: var(--cx-mono);
  font-size: 8.5px; letter-spacing: 0.18em; font-weight: 600;
  color: color-mix(in oklab, var(--cx-accent) 70%, transparent);
  text-transform: uppercase;
}
.cx-qts-row {
  appearance: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: transparent; border: 0;
  border-radius: 6px;
  color: var(--cx-fg);
  font-family: inherit; text-align: left;
  transition: background 80ms;
}
.cx-qts-row:hover { background: color-mix(in oklab, var(--cx-accent) 10%, transparent); }
.cx-qts-row.is-current { background: color-mix(in oklab, var(--cx-accent) 18%, transparent); color: var(--cx-accent); }
.cx-qts-row-glyph { font-family: var(--cx-mono); font-size: 10px; font-weight: 700; min-width: 36px; opacity: 0.8; }
.cx-qts-row-name { flex: 1; font-size: 12px; }
.cx-qts-row-year { font-family: var(--cx-mono); font-size: 9.5px; opacity: 0.5; }
.cx-qts-empty { padding: 10px 12px; font-size: 11px; color: var(--cx-fg-dim); font-style: italic; }

/* ── Reader title is now a button (no visible chrome change) ─────── */
.cx-reader-titles h1[role="button"] { cursor: pointer; }
.cx-reader-titles h1[role="button"]:hover { color: var(--cx-accent); }

/* ── Pager center → chapter grid popover (button styled like text) ── */
.cx-reader-progress {
  appearance: none; cursor: pointer;
  background: transparent; border: 0;
  font: inherit; color: inherit;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 120ms, color 120ms;
}
.cx-reader-progress:hover { background: color-mix(in oklab, var(--cx-accent) 8%, transparent); color: var(--cx-accent); }
.cx-pager-grid-pop {
  background: var(--cx-bg);
  border: 1px solid var(--cx-line-strong);
  border-radius: 10px;
  padding: 10px;
  width: min(320px, 92vw);
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
}
.cx-pager-grid-h {
  font-family: var(--cx-mono);
  font-size: 9.5px; letter-spacing: 0.18em; font-weight: 600;
  color: color-mix(in oklab, var(--cx-accent) 70%, transparent);
  text-transform: uppercase;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--cx-line);
}
.cx-pager-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 4px;
}
.cx-pager-grid-ch {
  appearance: none; cursor: pointer;
  min-height: 36px;
  background: color-mix(in oklab, var(--cx-fg-dim) 5%, transparent);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--cx-fg);
  font-family: var(--cx-mono);
  font-size: 11px;
  transition: background 80ms, border-color 80ms, color 80ms;
}
.cx-pager-grid-ch:hover { background: color-mix(in oklab, var(--cx-accent) 12%, transparent); color: var(--cx-accent); border-color: var(--cx-accent); }
.cx-pager-grid-ch.is-current { background: var(--cx-accent); color: var(--cx-bg); border-color: var(--cx-accent); font-weight: 700; }

/* ── DISARM panel — weaponized readings + textual rebuttals ──────────── */
.cx-disarm-list { display: flex; flex-direction: column; gap: 14px; }
.cx-disarm-card {
  padding: 14px;
  border: 1px solid var(--cx-line);
  background: linear-gradient(to bottom right, rgba(255,196,107,.05), transparent);
  border-left: 3px solid #ffc46b;
  position: relative;
}
.cx-disarm-card:hover {
  border-color: color-mix(in oklab, #ffc46b 35%, var(--cx-line));
}
.cx-disarm-h {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.cx-disarm-idx {
  font-family: var(--cx-mono); font-size: 9px; letter-spacing: 0.14em;
  color: #ffc46b;
}
.cx-disarm-verse {
  font-family: var(--cx-mono); font-size: 9px; letter-spacing: 0.08em;
  color: var(--cx-muted);
  padding: 1px 6px;
  border: 1px dashed rgba(255,196,107,.4);
}
.cx-disarm-eyebrow {
  margin: 0 0 10px;
  font-family: var(--cx-sans); font-weight: 600; font-size: 13px;
  line-height: 1.35;
  color: #ffc46b;
  letter-spacing: 0.005em;
}
.cx-disarm-quote {
  margin: 0 0 6px;
  padding: 4px 0 4px 12px;
  position: relative;
  display: flex; gap: 10px; align-items: stretch;
}
.cx-disarm-quote-bar {
  flex: 0 0 2px;
  background: rgba(255,196,107,.55);
}
.cx-disarm-quote-text {
  font-family: var(--cx-serif); font-style: italic; font-size: 13.5px;
  line-height: 1.5;
  color: var(--cx-fg);
}
.cx-disarm-source {
  font-family: var(--cx-mono); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cx-muted);
  margin: 0 0 10px;
}
.cx-disarm-sep {
  border: none;
  border-top: 1px dashed var(--cx-line);
  margin: 10px 0;
}
.cx-disarm-rebut {
  display: flex; flex-direction: column; gap: 4px;
}
.cx-disarm-rebut-lbl {
  font-family: var(--cx-mono); font-size: 9px; letter-spacing: 0.18em;
  color: var(--cx-accent);
  text-transform: uppercase;
}
.cx-disarm-rebut-body {
  margin: 0;
  font-family: var(--cx-serif); font-size: 14px; line-height: 1.55;
  color: var(--cx-fg);
}
.cx-disarm-foot {
  display: flex; gap: 6px;
  margin-top: 8px;
}
.cx-disarm-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 16px;
  color: var(--cx-muted);
  text-align: center;
}
.cx-disarm-empty-glyph {
  font-size: 22px;
  color: #ffc46b;
  opacity: 0.65;
}
.cx-disarm-empty p {
  margin: 0;
  font-family: var(--cx-serif); font-size: 13.5px; line-height: 1.5;
  max-width: 32ch;
}


/* Placeholder translations (registry-known but not bundled) — dim
   them so users see "coming soon" instead of accidentally picking
   one and getting the empty-text fallback verse. */
.cx-tp-row.is-placeholder { opacity: 0.55; }
.cx-tp-row.is-placeholder .cx-tp-pick { cursor: help; }
.cx-tp-row.is-placeholder .cx-tp-eye,
.cx-tp-row.is-placeholder .cx-tp-forge { opacity: 0.3; }
.cx-tp-coming {
  font-style: italic;
  font-size: 0.78em;
  letter-spacing: 0.06em;
  color: var(--cx-accent);
  opacity: 0.7;
  margin-left: 4px;
}