:root {
  --doorway-overlay-bg: rgba(4, 20, 31, .88);
  --doorway-surface: linear-gradient(150deg, #fdfbf4 0%, #f4eee0 100%);
  --doorway-surface-text: #163748;
  --doorway-heading: #0c4a6e;
  --doorway-body-text: #405864;
  --doorway-scripture-text: #213e4d;
  --doorway-border: rgba(200,168,75,.34);
  --doorway-divider: rgba(12,74,110,.15);
  --doorway-muted: #536a74;
  --doorway-label: #9a7623;
  --doorway-reference: #0e7490;
  --doorway-translation: #7b6a3c;
  --doorway-button-border: rgba(12,74,110,.22);
  --doorway-primary: var(--skin-accent);
  --doorway-primary-text: #fff;
  --doorway-display-font: 'Playfair Display', serif;
  --doorway-body-font: var(--skin-font);
  --doorway-card-radius: 24px;
  --doorway-context-radius: 18px;
  --doorway-card-shadow: 0 28px 80px rgba(0,0,0,.42);
}

html[data-theme="social"] {
  --doorway-overlay-bg: rgba(250,250,250,.92);
  --doorway-surface: var(--skin-invite-bg);
  --doorway-surface-text: var(--skin-ai-bubble-text);
  --doorway-heading: var(--skin-header-text);
  --doorway-body-text: #262626;
  --doorway-scripture-text: #262626;
  --doorway-border: #dbdbdb;
  --doorway-divider: #dbdbdb;
  --doorway-muted: #8e8e8e;
  --doorway-label: var(--skin-accent);
  --doorway-reference: var(--skin-accent-strong);
  --doorway-translation: #8e8e8e;
  --doorway-button-border: var(--skin-input-border);
  --doorway-display-font: var(--skin-font);
  --doorway-card-radius: var(--card-radius);
  --doorway-context-radius: var(--card-radius);
  --doorway-card-shadow: 0 12px 36px rgba(0,0,0,.12);
}

html[data-theme="stream"] {
  --doorway-overlay-bg: rgba(0,0,0,.94);
  --doorway-surface: var(--skin-invite-bg);
  --doorway-surface-text: var(--skin-ai-bubble-text);
  --doorway-heading: var(--skin-header-text);
  --doorway-body-text: #e7e9ea;
  --doorway-scripture-text: #e7e9ea;
  --doorway-border: #2f3336;
  --doorway-divider: #2f3336;
  --doorway-muted: #71767b;
  --doorway-label: var(--skin-accent);
  --doorway-reference: var(--skin-accent);
  --doorway-translation: #71767b;
  --doorway-button-border: var(--skin-input-border);
  --doorway-display-font: var(--skin-font);
  --doorway-card-radius: var(--card-radius);
  --doorway-context-radius: var(--card-radius);
  --doorway-card-shadow: none;
}

.doorway-open { overflow: hidden; }
.doorway { position: fixed; inset: 0; z-index: 8500; display: grid; place-items: center; padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); background: var(--doorway-overlay-bg); backdrop-filter: blur(12px); font-family: var(--doorway-body-font); }
/* touch-action: pan-y — kept after the 2026-09-09 swipe-navigation removal.
   Originally added so the browser could handle vertical scroll natively
   while JS tracked horizontal pointer movement for swipe; that JS is gone,
   but pan-y is still a correct, deliberate statement that this card must
   always allow native vertical panning (ordinary mobile scroll) — an
   explicit guarantee, not a leftover requirement. Removing it would fall
   back to the browser default (touch-action: auto), which also permits
   scrolling, so this is a "keep it, it's still correct" choice, not a
   "still needed for swipe" one. */
.doorway-card { position: relative; width: min(620px, 100%); max-height: 100%; overflow: auto; box-sizing: border-box; padding: clamp(28px, 6vw, 52px); border: 1px solid var(--doorway-border); border-radius: var(--doorway-card-radius); background: var(--doorway-surface); box-shadow: var(--doorway-card-shadow); color: var(--doorway-surface-text); transition: background .18s ease, border-color .18s ease, color .18s ease; touch-action: pan-y; }
.doorway-close { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; color: var(--doorway-muted); font-family: var(--doorway-body-font); font-size: 1.6rem; cursor: pointer; }
.doorway-label,.doorway-conversation-label { color: var(--doorway-label); font: 700 .68rem/1.2 var(--doorway-body-font); letter-spacing: .18em; text-transform: uppercase; }
.doorway h2 { margin: 14px 0 22px; font: 600 clamp(1.45rem,5vw,2.2rem)/1.18 var(--doorway-display-font); color: var(--doorway-heading); }
.doorway-observation { margin: 0 0 12px; font: 400 .96rem/1.55 var(--doorway-body-font); color: var(--doorway-body-text); }
.doorway-bible-bridge { margin: 0 0 18px; font: 600 .88rem/1.45 var(--doorway-body-font); color: var(--doorway-heading); }
.doorway blockquote { margin: 0; padding: 18px 0; border-top: 1px solid var(--doorway-divider); border-bottom: 1px solid var(--doorway-divider); font: italic 1.08rem/1.7 var(--doorway-display-font); color: var(--doorway-scripture-text); }
.doorway-reference { margin-top: 11px; font: 700 .84rem/1.4 var(--doorway-body-font); color: var(--doorway-reference); }
.doorway-reference span { margin-left: 6px; color: var(--doorway-translation); font-size: .7rem; letter-spacing: .08em; }
.doorway-actions { display: grid; gap: 9px; margin-top: 22px; }
.doorway-actions button { min-height: 45px; padding: 11px 18px; border: 1px solid var(--doorway-button-border); border-radius: 999px; background: transparent; color: var(--doorway-reference); font: 700 .78rem/1.2 var(--doorway-body-font); cursor: pointer; }
.doorway-actions button:disabled { cursor: wait; opacity: .62; }
.doorway-actions .doorway-primary { background: var(--doorway-primary); border-color: var(--doorway-primary); color: var(--doorway-primary-text); }
.doorway-conversation-context { margin: 18px auto 4px; width: min(620px,calc(100% - 28px)); box-sizing: border-box; padding: 22px; border: 1px solid var(--doorway-border); border-radius: var(--doorway-context-radius); background: var(--doorway-surface); color: var(--doorway-surface-text); font-family: var(--doorway-body-font); }
.doorway-conversation-moment { margin: 9px 0 10px; font: 600 1.15rem/1.35 var(--doorway-display-font); color: var(--doorway-heading); }
.doorway-conversation-observation { margin: 0 0 8px; font: 400 .88rem/1.5 var(--doorway-body-font); color: var(--doorway-body-text); }
.doorway-conversation-bridge { margin: 0 0 12px; font: 600 .82rem/1.45 var(--doorway-body-font); color: var(--doorway-heading); }
.doorway-conversation-context blockquote { margin: 0; font: italic .96rem/1.6 var(--doorway-display-font); color: var(--doorway-scripture-text); }
.doorway-conversation-ref { margin-top: 10px; color: var(--doorway-reference); font: 700 .72rem/1.3 var(--doorway-body-font); }
@media (max-height: 680px) { .doorway-card { padding: 24px; } .doorway h2 { margin: 8px 0 12px; } .doorway-observation { margin-bottom: 8px; } .doorway-bible-bridge { margin-bottom: 10px; } .doorway-actions { margin-top: 12px; } }

/* Jabbok brand lockup (2026-10-07): quiet subtitle under the name in the Doorway label. */
.doorway-label-sub { display: block; margin-top: 3px; font-size: .52rem; font-weight: 600; letter-spacing: .16em; opacity: .85; }