/* PathLight — design tokens (matched from the original app) */
:root {
  --font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;

  /* ---- Theme tokens (default theme: Midnight Navy) ----
     A church picks one of 5 named themes (see the Admin "Site Theme" section / THEMES in
     app.js); picking one just swaps a `data-theme="<id>"` attribute on <html>, which the
     [data-theme] blocks below override. Every rule in this file reads from these tokens —
     or from rgba(var(--color-ink-rgb)/--color-primary-rgb), never a hardcoded hex/rgb — so
     a theme switch recolors the whole app at once with no per-page changes needed. */
  --color-background: #f2f5f8;
  --color-foreground: #142033;
  --color-ink-rgb: 20,32,51; /* == --color-foreground as r,g,b, for the rgba() borders/shadows/tints below */
  --color-surface: #fbfcfd;
  --color-card: #fbfcfd;
  --color-card-foreground: #142033;
  --color-muted: #e3eaf1;
  --color-muted-foreground: #5c6b7c;
  --color-primary: #1a2c45;
  --color-primary-rgb: 26,44,69; /* == --color-primary as r,g,b */
  --color-primary-foreground: #f2f5f8;
  --color-secondary: #e3eaf1;
  --color-secondary-foreground: #1a2c45;
  --color-border: #d0dae4;
  --color-input: #d0dae4;
  --color-ring: #1a2c45;
  --color-destructive: #8b3a3a;
  --color-success: #2f6b4f;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-border: 0 0 0 1px rgba(var(--color-ink-rgb),0.07), 0 1px 2px -1px rgba(var(--color-ink-rgb),0.07), 0 2px 4px rgba(var(--color-ink-rgb),0.04);
  --shadow-border-hover: 0 0 0 1px rgba(var(--color-ink-rgb),0.1), 0 1px 2px -1px rgba(var(--color-ink-rgb),0.09), 0 2px 4px rgba(var(--color-ink-rgb),0.06);
  --shadow-bevel: inset 0 1px 0 rgba(255,255,255,0.88), inset 0 -1px 0 rgba(var(--color-primary-rgb),0.14), 0 1px 1px rgba(var(--color-primary-rgb),0.08), 0 8px 20px -8px rgba(var(--color-primary-rgb),0.34), 0 2px 0 rgba(var(--color-primary-rgb),0.12);

  /* Gradients — derived from this theme's two brand tones (dark primary / near-white) so
     every screen reads as one system rather than introducing new colors. The warm gold
     accent glow in --shadow-badge / --shadow-nav-active is kept constant across all 5
     themes on purpose — one shared "family resemblance" trim regardless of main color. */
  --gradient-primary: linear-gradient(155deg, #24406a 0%, #142033 100%);
  --gradient-header: linear-gradient(120deg, #27426e 0%, #1a2c45 55%, #0f1a2a 100%);
  --gradient-card: linear-gradient(165deg, #ffffff 0%, #fbfcfd 55%, #f3f6f9 100%);
  --gradient-badge: linear-gradient(155deg, #2c4870 0%, #142033 100%);
  --gradient-nav-active: linear-gradient(155deg, #3f6199 0%, #1a2c45 100%);
  --gradient-welcome-bg: radial-gradient(120% 85% at 50% 6%, #2d4568 0%, #1a2c45 48%, #0f1a2a 100%);
  --shadow-badge: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -6px 10px rgba(0,0,0,0.22), 0 4px 10px -4px rgba(var(--color-ink-rgb),0.4);
  --shadow-nav-active: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -5px 8px rgba(0,0,0,0.2), 0 0 0 2px rgba(var(--color-primary-rgb),0.12), 0 3px 10px -3px rgba(216,180,110,0.45);
}

/* ---- Alternate themes ----
   Only the brand hue changes between themes (cards stay crisp near-white, and the
   destructive/success semantic colors and the gold accent glow stay constant everywhere
   so error/success and the "family trim" always mean the same thing). */
:root[data-theme="forest"] {
  --color-background: #f1f6f3; --color-foreground: #13271f; --color-ink-rgb: 19,39,31;
  --color-muted: #e0ece5; --color-muted-foreground: #5c7268; --color-card-foreground: #13271f;
  --color-primary: #1a4433; --color-primary-rgb: 26,68,51;
  --color-secondary: #e0ece5; --color-secondary-foreground: #1a4433; --color-ring: #1a4433;
  --color-border: #cfe0d6; --color-input: #cfe0d6;
  --gradient-primary: linear-gradient(155deg, #2d6a4f 0%, #13271f 100%);
  --gradient-header: linear-gradient(120deg, #2f704f 0%, #1a4433 55%, #0c1c15 100%);
  --gradient-badge: linear-gradient(155deg, #337a58 0%, #13271f 100%);
  --gradient-nav-active: linear-gradient(155deg, #4a9370 0%, #1a4433 100%);
  --gradient-welcome-bg: radial-gradient(120% 85% at 50% 6%, #2f6b4d 0%, #1a4433 48%, #0c1c15 100%);
}
:root[data-theme="burgundy"] {
  --color-background: #f8f1f2; --color-foreground: #2a1219; --color-ink-rgb: 42,18,25;
  --color-muted: #efdfe2; --color-muted-foreground: #7c5c62; --color-card-foreground: #2a1219;
  --color-primary: #5c1f2e; --color-primary-rgb: 92,31,46;
  --color-secondary: #efdfe2; --color-secondary-foreground: #5c1f2e; --color-ring: #5c1f2e;
  --color-border: #e0c9ce; --color-input: #e0c9ce;
  --gradient-primary: linear-gradient(155deg, #7d3145 0%, #2a1219 100%);
  --gradient-header: linear-gradient(120deg, #833549 0%, #5c1f2e 55%, #200d13 100%);
  --gradient-badge: linear-gradient(155deg, #8a3b50 0%, #2a1219 100%);
  --gradient-nav-active: linear-gradient(155deg, #a15068 0%, #5c1f2e 100%);
  --gradient-welcome-bg: radial-gradient(120% 85% at 50% 6%, #7a3346 0%, #5c1f2e 48%, #200d13 100%);
}
:root[data-theme="slate"] {
  --color-background: #f3f5f6; --color-foreground: #1c2226; --color-ink-rgb: 28,34,38;
  --color-muted: #e4e9eb; --color-muted-foreground: #626e75; --color-card-foreground: #1c2226;
  --color-primary: #35434c; --color-primary-rgb: 53,67,76;
  --color-secondary: #e4e9eb; --color-secondary-foreground: #35434c; --color-ring: #35434c;
  --color-border: #d3dade; --color-input: #d3dade;
  --gradient-primary: linear-gradient(155deg, #52646e 0%, #1c2226 100%);
  --gradient-header: linear-gradient(120deg, #56676f 0%, #35434c 55%, #161b1e 100%);
  --gradient-badge: linear-gradient(155deg, #5c707a 0%, #1c2226 100%);
  --gradient-nav-active: linear-gradient(155deg, #74848c 0%, #35434c 100%);
  --gradient-welcome-bg: radial-gradient(120% 85% at 50% 6%, #51626b 0%, #35434c 48%, #161b1e 100%);
}
:root[data-theme="charcoal"] {
  --color-background: #f7f4f0; --color-foreground: #241d16; --color-ink-rgb: 36,29,22;
  --color-muted: #ece4da; --color-muted-foreground: #75695b; --color-card-foreground: #241d16;
  --color-primary: #4a3a29; --color-primary-rgb: 74,58,41;
  --color-secondary: #ece4da; --color-secondary-foreground: #4a3a29; --color-ring: #4a3a29;
  --color-border: #ddd0c0; --color-input: #ddd0c0;
  --gradient-primary: linear-gradient(155deg, #6b5439 0%, #241d16 100%);
  --gradient-header: linear-gradient(120deg, #705a3c 0%, #4a3a29 55%, #15100b 100%);
  --gradient-badge: linear-gradient(155deg, #7a6142 0%, #241d16 100%);
  --gradient-nav-active: linear-gradient(155deg, #91744e 0%, #4a3a29 100%);
  --gradient-welcome-bg: radial-gradient(120% 85% at 50% 6%, #6a5338 0%, #4a3a29 48%, #15100b 100%);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body {
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  line-height: 1.5;
  min-height: 100dvh;
}
h1, h2, h3 {
  font-family: var(--font-serif);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }

.app-shell { min-height: 100dvh; display: flex; flex-direction: column; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--gradient-header);
  color: var(--color-primary-foreground);
  box-shadow: 0 1px 0 rgba(0,0,0,0.1), 0 10px 24px -18px rgba(0,0,0,0.6);
}
.header-inner {
  max-width: 48rem; margin: 0 auto;
  min-height: 4.5rem; display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.5rem 0.75rem; row-gap: 0.4rem;
  padding: 0.6rem 1rem;
}
.brand { display: flex; align-items: center; gap: 0.75rem; min-width: 6.5rem; flex: 1; }
.brand-icon {
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(242,245,248,0.22), 0 4px 14px -5px rgba(0,0,0,0.55), 0 0 16px -5px rgba(216,180,110,0.4);
  flex-shrink: 0; background: rgba(242,245,248,0.05);
}
.brand-icon img { width: 100%; height: 100%; object-fit: cover; }
.brand-text { min-width: 0; }
.brand-name {
  display: block; font-family: var(--font-serif); font-weight: 600;
  font-size: 1.125rem; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-tagline {
  display: block; font-size: 0.8rem; color: rgba(242,245,248,0.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; row-gap: 0.4rem; justify-content: flex-end; flex-shrink: 0; max-width: 100%; }
/* Once the brand + all three header-action pills can no longer share one row (brand has
   already shrunk to its min-width), give header-actions the full row width to itself so ITS
   OWN flex-wrap can lay the pills out on one or two sub-lines within that width, rather than
   the pills overflowing past the right edge of a box that's still sized to fit them unwrapped. */
@media (max-width: 40rem) {
  .header-actions { flex-basis: 100%; }
}
.pill-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.75rem; padding: 0 0.9rem; border-radius: 999px;
  border: 1px solid rgba(242,245,248,0.35);
  font-size: 0.8rem; font-weight: 600; white-space: nowrap;
}
.lang-switch {
  display: inline-flex; align-items: center; height: 2.75rem; padding: 0.15rem;
  border-radius: 999px; border: 1px solid rgba(242,245,248,0.35);
}
.lang-btn {
  height: 2.4rem; min-width: 2.4rem; padding: 0 0.6rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; color: rgba(242,245,248,0.75);
}
.lang-btn.active { background: var(--color-primary-foreground); color: var(--color-primary); }
/* Very narrow phones (≤352px, e.g. an older iPhone SE): brand name + the pill buttons +
   language switch don't all fit at their normal size, so trim the header chrome down a bit
   to leave the brand name legible instead of clipped to one letter. */
@media (max-width: 22rem) {
  .header-inner { gap: 0.4rem; }
  .brand-icon { width: 2.1rem; height: 2.1rem; }
  .brand-tagline { display: none; }
  .header-actions .pill-btn { padding: 0 0.55rem; font-size: 0.72rem; }
  .lang-switch .lang-btn { min-width: 1.9rem; padding: 0 0.3rem; }
}

/* "Use This App for Your Ministry" — always the platform signup CTA (see
   PLATFORM_SIGNUP_EMAIL in app.js). Styled as a plain .pill-btn, same size/shape/font as the
   Admin pill right next to it, just wide enough for its own (longer) label — not a big banner
   button. Sits in .header-actions with Admin + the language switch; that row wraps onto its
   own line under the brand (see .header-inner/.header-actions flex-wrap) if all three don't
   fit on very narrow phones, so nothing overflows horizontally. */
.join-cta-btn { gap: 0.4rem; background: rgba(242,245,248,0.14); }
.join-cta-btn:hover { background: rgba(242,245,248,0.22); }
.join-cta-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.join-cta-icon svg { width: 100%; height: 100%; }

/* Share The Gospel! icon (Home hero button + the #/welcome share-prompt card's Share
   button — both call shareStudyLink() in app.js). Sized to sit inline with a .btn's text. */
.share-btn-icon { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.share-btn-icon svg { width: 100%; height: 100%; }

/* Generic production toast (e.g. "Link copied" when the Web Share API isn't available and
   the invite link is copied to the clipboard instead) — modeled on the preview-only toast
   in build_preview.js, but this one is real and ships with the site. */
.pl-toast {
  position: fixed; left: 50%; bottom: calc(5rem + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(0.5rem); opacity: 0; pointer-events: none;
  background: var(--color-primary); color: var(--color-primary-foreground);
  padding: 0.65rem 1rem; border-radius: var(--radius-md); font-size: 0.85rem;
  max-width: 88vw; text-align: center; box-shadow: var(--shadow-bevel);
  transition: opacity 0.25s ease, transform 0.25s ease; z-index: 100;
}
.pl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Last-resort share fallback (no Web Share API and clipboard write failed/blocked) — a
   selectable link inside the existing .confirm-card dialog pattern. */
.share-link-input {
  width: 100%; margin-top: 0.25rem; padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-foreground); font-size: 0.85rem;
}

/* Main */
.app-main {
  flex: 1; width: 100%; max-width: 48rem; margin: 0 auto;
  padding: 1.25rem 1rem calc(6rem + env(safe-area-inset-bottom));
}

/* Bottom nav */
.bottom-nav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -10px 22px -18px rgba(var(--color-ink-rgb),0.35);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav ul {
  max-width: 48rem; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr);
}
.bottom-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.15rem; min-height: 3.5rem; padding: 0.25rem; font-size: 0.7rem; font-weight: 500;
  color: var(--color-muted-foreground);
}
.bottom-nav a.active { color: var(--color-primary); }
.nav-icon {
  width: 2rem; height: 2rem; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-badge); color: var(--color-primary-foreground);
  box-shadow: var(--shadow-badge);
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.nav-icon svg { width: 56%; height: 56%; }
.bottom-nav a.active .nav-icon {
  background: var(--gradient-nav-active);
  box-shadow: var(--shadow-nav-active);
  transform: translateY(-1px);
}

/* Generic building blocks */
.stack { display: flex; flex-direction: column; gap: 2rem; }
.stack-sm { display: flex; flex-direction: column; gap: 0.75rem; }
.card {
  background: var(--gradient-card); color: var(--color-card-foreground);
  border: 1px solid rgba(var(--color-ink-rgb),0.05);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-border);
  padding: 1.25rem;
}
.tile {
  border-radius: var(--radius-xl); box-shadow: var(--shadow-border);
  background: var(--gradient-card); border: 1px solid rgba(var(--color-ink-rgb),0.05);
  display: flex; align-items: center; gap: 1rem; padding: 1rem;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.tile:hover { box-shadow: var(--shadow-border-hover); transform: translateY(-2px); }
.tile-icon {
  width: 3.5rem; height: 3.5rem; border-radius: var(--radius-lg); overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-badge); color: var(--color-primary-foreground);
  box-shadow: var(--shadow-badge);
  transition: transform 150ms ease;
}
.tile-icon svg { width: 52%; height: 52%; }
.tile:hover .tile-icon { transform: scale(1.06); }
.tile-title { display: block; font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.tile-desc { display: block; margin-top: 0.2rem; font-size: 0.875rem; color: var(--color-muted-foreground); }
.tile-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .tile-grid { grid-template-columns: 1fr 1fr; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 2.75rem; padding: 0 1.25rem; border-radius: 999px;
  font-weight: 600; font-size: 0.9rem; white-space: nowrap;
  transition: transform 100ms ease, filter 150ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--gradient-primary); color: var(--color-primary-foreground);
  box-shadow: var(--shadow-bevel);
}
.btn-primary:hover { filter: brightness(1.12); }
.btn-outline { border: 1px solid var(--color-border); background: var(--color-surface); }
.btn-ghost { color: var(--color-primary); }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
@media (min-width: 640px) { .btn-row { flex-wrap: nowrap; } }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

.hero h1 { font-size: 1.75rem; font-weight: 600; white-space: pre-line; }
.hero .ref { margin-top: 0.35rem; font-size: 0.875rem; color: var(--color-muted-foreground); }
.hero .actions { margin-top: 1.5rem; }

.verse-card {
  position: relative; overflow: hidden;
  background: var(--gradient-primary); color: var(--color-primary-foreground);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-bevel);
  padding: 1.25rem;
}
.verse-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 12% -12%, rgba(255,255,255,0.16), transparent 60%);
}
.verse-card > * { position: relative; z-index: 1; }
.verse-card .kicker { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(242,245,248,0.7); }
.verse-card blockquote { margin: 0.75rem 0 0; font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.4; }
.verse-card .ref { margin-top: 0.75rem; font-size: 0.875rem; color: rgba(242,245,248,0.75); }

.page-header { margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.75rem; font-weight: 600; }
.page-header .subtitle { margin-top: 0.35rem; font-size: 0.9rem; color: var(--color-muted-foreground); }
.back-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.875rem; font-weight: 600; color: var(--color-muted-foreground);
  margin-bottom: 0.5rem;
}

/* Footer — logo + ministry line, both centered (icon sits under the text) */
footer.site-footer {
  border-top: 1px solid var(--color-border); padding-top: 1rem; margin-top: 1rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center;
}
footer.site-footer img { width: 3rem; height: 3rem; border-radius: var(--radius-sm); background: var(--color-card); box-shadow: var(--shadow-border); object-fit: contain; padding: 2px; }
footer.site-footer .ministry-line { font-size: 0.8rem; color: var(--color-muted-foreground); line-height: 1.4; max-width: 22rem; }
footer.site-footer .footer-privacy-line { font-size: 0.75rem; color: var(--color-muted-foreground); }
footer.site-footer .footer-privacy-line a { color: var(--color-primary); text-decoration: underline; }
footer.site-footer .ministry-link { font-size: 0.75rem; color: var(--color-muted-foreground); }
footer.site-footer .ministry-link a { color: var(--color-primary); text-decoration: underline; }
footer.site-footer.admin-footer { margin-top: 2.5rem; }
footer.site-footer .admin-feedback-line {
  font-size: 0.75rem; color: var(--color-muted-foreground); line-height: 1.5; max-width: 26rem;
  padding-top: 0.6rem; border-top: 1px solid var(--color-border);
}
footer.site-footer .admin-feedback-line a { color: var(--color-primary); font-weight: 600; }
.admin-logout-bar { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.admin-signed-in-as { font-size: 0.8rem; color: var(--color-ink-soft, #666); opacity: 0.85; }
.admin-logout-btn { font-size: 0.8rem; padding: 0.35rem 0.9rem; }

/* FAQ */
.faq-item {
  background: var(--gradient-card); border: 1px solid rgba(var(--color-ink-rgb),0.05);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-border);
  padding: 1rem;
}
.faq-item summary {
  cursor: pointer; list-style: none; font-family: var(--font-serif);
  font-size: 1.08rem; font-weight: 600; display: flex; justify-content: space-between; gap: 0.75rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus { color: var(--color-muted-foreground); transition: transform 150ms ease; flex-shrink: 0; }
.faq-item[open] summary .plus { transform: rotate(45deg); }
.faq-item .answer { margin-top: 0.75rem; font-size: 0.95rem; line-height: 1.6; color: rgba(var(--color-ink-rgb),0.9); }

/* Tracts / studies lists */
.list-tile { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.list-tile h2 { font-size: 1.05rem; font-weight: 600; }
.list-tile .go { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--color-primary); flex-shrink: 0; }
.tract-files { display: flex; gap: 0.5rem; margin-top: 0.35rem; }
.tract-file-link { font-size: 0.75rem; font-weight: 600; color: var(--color-primary); text-decoration: underline; }

/* Bible */
.bible-testament-heading {
  font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600;
  margin: 0.5rem 0 -0.25rem;
}
.bible-book-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.6rem;
}
.bible-book-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 0.3rem; padding: 0.85rem 0.75rem;
  background: var(--gradient-card); border: 1px solid rgba(var(--color-ink-rgb),0.05);
  border-radius: var(--radius-md); box-shadow: var(--shadow-border);
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.bible-book-cell:hover { box-shadow: var(--shadow-border-hover); background: var(--color-secondary); transform: translateY(-1px); }
.bible-book-cell .book-name { font-family: var(--font-serif); font-weight: 600; font-size: 0.9rem; line-height: 1.25; }
.bible-book-cell .book-tagline {
  font-size: 0.72rem; line-height: 1.3; color: var(--color-muted-foreground);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Topics — seeker questions that jump straight to relevant scripture */
.topics-section { display: flex; flex-direction: column; gap: 0.5rem; }
.topics-kicker {
  margin: 0; padding: 0.85rem 1rem; border-radius: var(--radius-lg);
  background: var(--color-muted); font-family: var(--font-serif); font-style: italic;
  font-size: 0.95rem; line-height: 1.5; color: var(--color-card-foreground);
}
.topics-kicker-ref { display: block; margin-top: 0.35rem; font-style: normal; font-size: 0.8rem; color: var(--color-muted-foreground); }
.topics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.6rem; }
.topic-btn {
  display: block; background: var(--gradient-card); border: 1px solid rgba(var(--color-ink-rgb),0.05);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-border);
  padding: 0.85rem 1rem; font-family: var(--font-serif); font-weight: 600; font-size: 0.9rem; line-height: 1.3;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.topic-btn:hover { box-shadow: var(--shadow-border-hover); background: var(--color-secondary); transform: translateY(-1px); }
.topic-blurb { line-height: 1.65; font-size: 1rem; }
.topic-verse-card { display: flex; flex-direction: column; gap: 0.4rem; }
.topic-verse-ref { font-family: var(--font-serif); font-weight: 600; color: var(--color-primary); font-size: 0.9rem; }
.topic-verse-text { font-family: var(--font-serif); line-height: 1.6; font-size: 1rem; }
.topic-help-card { text-align: left; }
.topic-help-card .actions { margin-top: 0.75rem; }
.bible-chapter-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: 0.6rem;
}
.bible-chapter-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--gradient-card); border: 1px solid rgba(var(--color-ink-rgb),0.05);
  border-radius: var(--radius-md); box-shadow: var(--shadow-border);
  font-weight: 600; font-family: var(--font-serif);
}
.bible-chapter-cell:hover { box-shadow: var(--shadow-border-hover); background: var(--color-secondary); }
.bible-reader-card { min-height: 8rem; }
.bible-loading { color: var(--color-muted-foreground); text-align: center; padding: 1.5rem 0; }
.bible-passage {
  font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.85; color: var(--color-card-foreground);
}
.btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.bible-vnum {
  font-family: var(--font-sans); font-weight: 700; color: var(--color-primary);
  font-size: 0.7rem; margin-right: 0.15rem; vertical-align: super;
}

/* Admin dashboard (design preview) */
.admin-preview-note {
  background: var(--color-muted); color: var(--color-secondary-foreground);
  border-radius: var(--radius-md); padding: 0.75rem 1rem; font-size: 0.85rem; line-height: 1.5;
}
.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.75rem; }
.admin-stat-tile {
  position: relative;
  background: var(--gradient-card); border: 1px solid rgba(var(--color-ink-rgb),0.05);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-border);
  padding: 1rem; display: flex; flex-direction: column; gap: 0.2rem;
}
.admin-stat-n { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.admin-stat-label { font-size: 0.78rem; color: var(--color-muted-foreground); }
.admin-stat-reset {
  position: absolute; top: 0.5rem; right: 0.5rem;
  font-size: 0.65rem; font-weight: 600; color: var(--color-muted-foreground);
  background: transparent; border: none; padding: 0.2rem 0.5rem; border-radius: 999px;
  cursor: pointer; transition: background 120ms ease, color 120ms ease;
}
.admin-stat-reset:hover { background: var(--color-muted); color: var(--color-primary); }
.admin-stat-reset:active { transform: scale(0.95); }
.admin-engage-row {
  background: var(--gradient-card); border: 1px solid rgba(var(--color-ink-rgb),0.05);
  border-radius: var(--radius-md); box-shadow: var(--shadow-border);
  padding: 0.85rem 1rem;
}
.admin-engage-head { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.85rem; margin-bottom: 0.5rem; }
.admin-engage-right { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.admin-engage-counts { color: var(--color-muted-foreground); font-variant-numeric: tabular-nums; }
.admin-engage-reset {
  font-size: 0.65rem; font-weight: 600; color: var(--color-muted-foreground);
  background: transparent; border: none; padding: 0.15rem 0.5rem; border-radius: 999px;
  cursor: pointer; transition: background 120ms ease, color 120ms ease; flex-shrink: 0;
}
.admin-engage-reset:hover { background: var(--color-muted); color: var(--color-primary); }
.admin-engage-reset:active { transform: scale(0.95); }
.admin-activity-card { padding: 0.25rem 1.25rem; }
.admin-activity-row {
  display: flex; align-items: center; gap: 0.65rem; padding: 0.8rem 0;
  border-bottom: 1px solid var(--color-border); font-size: 0.88rem;
}
.admin-activity-row:last-child { border-bottom: none; }
.admin-activity-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; flex-shrink: 0; }
.admin-activity-contact { background: var(--color-primary); }
.admin-activity-study { background: var(--color-success); }
.admin-activity-gp { background: #a8853f; }
.admin-activity-text { flex: 1; }
.admin-activity-when { color: var(--color-muted-foreground); font-size: 0.78rem; flex-shrink: 0; }

/* Site Theme picker (Admin — foundation for the future per-tenant theme setting) */
.theme-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.75rem; }
.theme-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  padding: 0.9rem 0.6rem; border-radius: var(--radius-lg);
  background: var(--gradient-card); border: 1px solid rgba(var(--color-ink-rgb),0.05); box-shadow: var(--shadow-border);
  font-size: 0.78rem; font-weight: 600; text-align: center; line-height: 1.3;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.theme-swatch:hover { box-shadow: var(--shadow-border-hover); transform: translateY(-1px); }
.theme-swatch.active { box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-border-hover); }
.theme-swatch-dot { width: 2.5rem; height: 2.5rem; border-radius: 999px; box-shadow: var(--shadow-bevel); flex-shrink: 0; }

.study-progress { font-size: 0.85rem; color: var(--color-muted-foreground); margin-bottom: 0.5rem; }
.progress-track { height: 6px; border-radius: 999px; background: var(--color-muted); overflow: hidden; margin-bottom: 1.25rem; }
.progress-fill { height: 100%; background: var(--gradient-primary); border-radius: 999px; }
.study-list-item {
  display: flex; align-items: center; gap: 0.9rem;
  background: var(--gradient-card); border: 1px solid rgba(var(--color-ink-rgb),0.05);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-border);
  padding: 0.9rem 1rem; transition: box-shadow 150ms ease, transform 150ms ease;
}
.study-list-item:hover { box-shadow: var(--shadow-border-hover); transform: translateY(-1px); }
.study-num {
  width: 2.25rem; height: 2.25rem; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: var(--color-muted); color: var(--color-muted-foreground); font-weight: 700; flex-shrink: 0; font-size: 0.9rem;
}
.study-list-item.done .study-num { background: var(--gradient-primary); color: var(--color-primary-foreground); }
.study-list-item.locked { opacity: 0.55; }
.study-list-item .title { font-weight: 600; }

/* Study reader */
.study-block-p { line-height: 1.7; margin-bottom: 0.9rem; }
.study-block-h { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; margin: 1.25rem 0 0.6rem; }
.blank-verse {
  background: var(--gradient-card); border: 1px solid rgba(var(--color-ink-rgb),0.05);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-border);
  padding: 1rem; margin: 1rem 0;
}
.blank-verse .ref { font-size: 0.75rem; font-weight: 600; color: var(--color-muted-foreground); margin-bottom: 0.5rem; }
.blank-verse .verse-text { line-height: 1.6; }
.blank-input {
  display: inline-block; min-width: 5rem; border: none; border-bottom: 2px solid var(--color-primary);
  background: transparent; font: inherit; padding: 0 0.25rem; color: var(--color-primary); font-weight: 600;
}
.blank-input.correct { border-color: var(--color-success); color: var(--color-success); }
.blank-input.incorrect { border-color: var(--color-destructive); color: var(--color-destructive); }
.blank-feedback { margin-top: 0.5rem; font-size: 0.85rem; font-weight: 600; }
.blank-feedback.correct { color: var(--color-success); }
.blank-feedback.incorrect { color: var(--color-destructive); }
.study-nav-row { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
/* Guards against horizontal overflow on very narrow phones, where "Previous Chapter" /
   "Next Chapter" labels at the default padding can be wider than half the viewport. */
@media (max-width: 380px) {
  .study-nav-row .btn { padding: 0 0.7rem; font-size: 0.82rem; }
}
.page-dots { display: flex; gap: 0.35rem; justify-content: center; margin: 1rem 0; }
.page-dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--color-border); }
.page-dots span.active { background: var(--color-primary); }

/* Contact form */
.field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.9rem; }
.field label { font-size: 0.85rem; font-weight: 600; }
.field input, .field textarea {
  border: 1px solid var(--color-input); border-radius: var(--radius-sm);
  background: var(--color-surface); padding: 0.6rem 0.75rem; font: inherit; color: inherit;
}
.field textarea { resize: vertical; min-height: 6rem; }
.form-note { font-size: 0.85rem; color: var(--color-muted-foreground); margin-top: 0.5rem; }
.form-note.error { color: var(--color-destructive); font-weight: 600; }

/* "Use This App for Your Ministry" signup modal — reuses .confirm-overlay for the backdrop */
.join-card {
  max-width: 26rem; width: 100%; background: var(--gradient-card); color: var(--color-card-foreground);
  border-radius: var(--radius-xl); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.45); padding: 1.5rem;
  max-height: 90vh; overflow-y: auto;
}
.join-card h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem; }
.join-card > p { font-size: 0.88rem; line-height: 1.55; color: var(--color-muted-foreground); margin-bottom: 1.1rem; }
.join-success-icon {
  width: 3.5rem; height: 3.5rem; border-radius: 999px; margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-primary); color: var(--color-primary-foreground); box-shadow: var(--shadow-bevel);
}
.join-success-icon svg { width: 55%; height: 55%; }

/* Admin login modal — reuses .confirm-overlay for the backdrop, styled like .join-card/.confirm-card */
.login-card {
  max-width: 24rem; width: 100%; background: var(--gradient-card); color: var(--color-card-foreground);
  border-radius: var(--radius-xl); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.45); padding: 1.5rem;
  max-height: 90vh; overflow-y: auto;
}
.login-card h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem; }
.login-card > p { font-size: 0.88rem; line-height: 1.55; color: var(--color-muted-foreground); margin-bottom: 1.1rem; }
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  background: #ffffff; color: #142033; border: 1px solid var(--color-border);
  box-shadow: none;
}
.google-btn:hover { filter: brightness(0.97); }
.login-divider {
  display: flex; align-items: center; text-align: center; gap: 0.75rem;
  margin: 1.1rem 0; font-size: 0.78rem; color: var(--color-muted-foreground); text-transform: uppercase; letter-spacing: 0.04em;
}
.login-divider::before, .login-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--color-border);
}

/* Review Their Site (Ministry Accounts detail) */
.review-site-note { font-size: 0.85rem; line-height: 1.55; color: var(--color-muted-foreground); }

/* Placeholder / coming soon */
.coming-soon { text-align: center; padding: 2.5rem 1rem; color: var(--color-muted-foreground); }

.admin-page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.admin-page-header h1 { flex-shrink: 0; }

/* Visitor landing page (#/welcome) — a standalone splash, no app chrome, for someone
   arriving from a tract QR code or an ad link, distinct from the normal in-app Home. */
body.landing-page .site-header,
body.landing-page .bottom-nav { display: none; }
body.landing-page .app-main { padding: 0; max-width: none; }

.welcome-screen {
  min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--gradient-welcome-bg);
  color: var(--color-primary-foreground);
  padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
}
.welcome-btn-primary {
  background: linear-gradient(180deg, #ffffff 0%, var(--color-primary-foreground) 100%);
  color: var(--color-primary); box-shadow: var(--shadow-bevel);
}
.welcome-btn-primary:hover { filter: brightness(0.97); }

/* Loading splash — plays once each time a visitor lands on #/welcome */
.welcome-loading { position: relative; align-items: center; justify-content: center; }
.welcome-loading-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.welcome-loading-icon-wrap {
  width: 6.5rem; height: 6.5rem; border-radius: 999px; overflow: hidden;
  animation: pl-flicker 3.5s ease-in-out 1 forwards;
}
.welcome-loading-icon { width: 100%; height: 100%; object-fit: cover; }
.welcome-loading-path { width: 3.1rem; height: 3.7rem; margin-top: -0.35rem; opacity: 0; }
.welcome-loading-path svg { width: 100%; height: 100%; overflow: visible; }
.welcome-loading-path-line {
  stroke: rgba(242,245,248,0.95); stroke-width: 1.4; stroke-linecap: round; fill: none;
}
.welcome-loading-path-fill { fill: url(#wlPathFill); stroke: none; }
.welcome-loading-path { animation: pl-flicker-path 3.5s ease-in-out 1 forwards; }
.welcome-loading-name { font-family: var(--font-serif); font-weight: 600; font-size: 1.7rem; letter-spacing: 0.02em; }
.welcome-loading-tagline { font-size: 1.05rem; color: rgba(242,245,248,0.7); }
/* One-shot (not looping): the lamp flashes a few times, then on roughly the third flash it
   settles bright and stays that way for the rest of the ~3.5s loading window (matches
   WELCOME_LOADING_MS in app.js — keep both in sync if either changes). */
@keyframes pl-flicker {
  0% { opacity: 0.2; filter: drop-shadow(0 0 2px rgba(242,245,248,0.1)); }
  6% { opacity: 1; filter: drop-shadow(0 0 18px rgba(242,245,248,0.6)); }
  12% { opacity: 0.22; filter: drop-shadow(0 0 2px rgba(242,245,248,0.1)); }
  22% { opacity: 1; filter: drop-shadow(0 0 18px rgba(242,245,248,0.6)); }
  28% { opacity: 0.25; filter: drop-shadow(0 0 2px rgba(242,245,248,0.1)); }
  40%, 100% { opacity: 1; filter: drop-shadow(0 0 18px rgba(242,245,248,0.6)); }
}
/* Kept on the same timeline as pl-flicker above: hidden by default, briefly visible with
   each of the lamp's first flashes, then — once the lamp settles bright at 40% — stays
   visible for good, right along with it. */
@keyframes pl-flicker-path {
  0% { opacity: 0; }
  4% { opacity: 0; }
  6% { opacity: 1; }
  8% { opacity: 0; }
  20% { opacity: 0; }
  22% { opacity: 1; }
  24% { opacity: 0; }
  38% { opacity: 0; }
  40%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-loading-icon-wrap { animation: none; }
  .welcome-loading-path { animation: none; opacity: 1; }
}

/* Interactive study — one question at a time, each replacing the last */
.welcome-study { justify-content: center; }
.welcome-topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.5rem; }
.welcome-exit { font-size: 0.95rem; font-weight: 600; color: rgba(242,245,248,0.8); }
.welcome-loading .welcome-exit { position: absolute; top: 1.5rem; left: 1.25rem; }
.welcome-lang {
  display: inline-flex; align-items: center; padding: 0.15rem;
  border-radius: 999px; border: 1px solid rgba(242,245,248,0.35);
}
.welcome-lang .lang-btn {
  height: 2.4rem; min-width: 2.4rem; padding: 0 0.65rem; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; color: rgba(242,245,248,0.75);
}
.welcome-lang .lang-btn.active { background: var(--color-primary-foreground); color: var(--color-primary); }
.dialogue-card {
  max-width: 27rem; margin: 0 auto; width: 100%;
  background: linear-gradient(165deg, rgba(242,245,248,0.09), rgba(242,245,248,0.02));
  border: 1px solid rgba(242,245,248,0.14);
  border-radius: var(--radius-xl);
  padding: 1.75rem 1.35rem;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.5);
  opacity: 1; transform: translateY(0) scale(1);
  transition: opacity 260ms ease, transform 260ms ease;
}
.dialogue-card.entering { opacity: 0; transform: translateY(10px) scale(0.98); }
.dialogue-card.leaving { opacity: 0; transform: translateY(-10px) scale(0.98); }
.dialogue-prompt {
  font-family: var(--font-serif); font-size: clamp(1.4rem, 5.2vw, 1.65rem); line-height: 1.4; font-weight: 600;
  text-align: center; margin-bottom: 1.5rem;
}
.dialogue-options { display: flex; flex-direction: column; gap: 0.7rem; }
.dialogue-option {
  display: block; width: 100%; text-align: left; padding: 1rem 1.15rem; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(242,245,248,0.13), rgba(242,245,248,0.05));
  border: 1px solid rgba(242,245,248,0.25);
  font-size: 1.04rem; line-height: 1.45; color: var(--color-primary-foreground);
  transition: background 150ms ease, border-color 150ms ease;
}
.dialogue-option:hover { background: linear-gradient(180deg, rgba(242,245,248,0.2), rgba(242,245,248,0.09)); }
.dialogue-option.selected {
  background: linear-gradient(180deg, #ffffff, var(--color-primary-foreground));
  color: var(--color-primary); border-color: transparent; font-weight: 600;
}
.dialogue-option.selected.correct {
background: linear-gradient(180deg, #eafff0, #d2f8dd);
color: #1a7a3c; border-color: transparent; font-weight: 600;
box-shadow: 0 0 0 2px rgba(46,160,90,0.55);
}
.dialogue-option.correct:not(.selected) {
border-color: rgba(46,160,90,0.65);
box-shadow: 0 0 0 2px rgba(46,160,90,0.35);
}
.dialogue-option.selected.incorrect {
background: linear-gradient(180deg, #fff0ee, #ffe1dc);
color: #a3311c; border-color: transparent; font-weight: 600;
box-shadow: 0 0 0 2px rgba(214,69,42,0.55);
}
.dialogue-correct-badge {
margin-top: 1.25rem; margin-bottom: -0.5rem;
font-weight: 700; font-size: 1rem; color: #3ddc84;
display: flex; align-items: center; gap: 0.4rem;
}
.dialogue-correct-badge::before { content: "\2713"; font-size: 1.1rem; }
.dialogue-correct-reveal {
margin-top: 1rem; padding: 1rem 1.1rem; border-radius: var(--radius-lg);
background: linear-gradient(165deg, rgba(61,220,132,0.16), rgba(61,220,132,0.06));
border: 1px solid rgba(61,220,132,0.35);
}
.dialogue-correct-reveal-label {
font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
font-weight: 700; color: #3ddc84; margin: 0 0 0.35rem;
}
.dialogue-correct-reveal-text {
font-size: 1.02rem; line-height: 1.55; color: rgba(242,245,248,0.94); margin: 0;
}
.dialogue-feedback {
  margin-top: 1.25rem; padding: 1.1rem; border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(242,245,248,0.15), rgba(242,245,248,0.05));
  font-size: 1.02rem; line-height: 1.6;
  color: rgba(242,245,248,0.94);
}
.dialogue-verse {
  margin: 1rem 0 0; padding: 0.9rem 1.1rem; border-left: 3px solid rgba(242,245,248,0.45);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: linear-gradient(90deg, rgba(242,245,248,0.08), rgba(242,245,248,0));
  font-family: var(--font-serif); font-style: italic; font-size: 1.08rem; line-height: 1.55;
}
.dialogue-verse cite { display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.82rem; color: rgba(242,245,248,0.7); }
.dialogue-card > .btn { margin-top: 1.5rem; min-height: 3.15rem; font-size: 1.02rem; width: 100%; }
.welcome-closing-links { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.5rem; }
.welcome-closing-links .btn-outline { background: transparent; border-color: rgba(242,245,248,0.4); color: var(--color-primary-foreground); }
.welcome-closing-links .btn { min-height: 3.1rem; font-size: 1rem; }
.welcome-restart {
  display: block; margin: 1.5rem auto 0; font-size: 0.82rem; color: rgba(242,245,248,0.6);
  text-decoration: underline; text-underline-offset: 2px;
}

@media print {
  .site-header, .bottom-nav { display: none; }
}

/* ---------- Ministry Accounts (master-admin) ---------- */
.admin-accounts-link { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.tenant-pending-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem;
  padding: 0 0.4rem; border-radius: 999px; background: var(--color-destructive); color: #fff;
  font-size: 0.75rem; font-weight: 700; line-height: 1;
}
.tenant-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.9rem 1.1rem; background: var(--gradient-card); border: 1px solid rgba(var(--color-ink-rgb),0.05);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-border);
}
.tenant-row:hover { box-shadow: var(--shadow-border-hover); transform: translateY(-1px); }
.tenant-row-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.tenant-row-church { font-weight: 600; }
.tenant-row-sub { font-size: 0.8rem; color: var(--color-muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenant-status {
  flex-shrink: 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.3rem 0.6rem; border-radius: 999px; white-space: nowrap;
}
.tenant-status-pending { background: rgba(168,133,63,0.16); color: #8a6d1f; }
.tenant-status-active { background: rgba(47,107,79,0.14); color: var(--color-success); }
.tenant-status-offline { background: var(--color-muted); color: var(--color-muted-foreground); }
.tenant-status-rejected, .tenant-status-banned { background: rgba(139,58,58,0.14); color: var(--color-destructive); }
.tenant-detail-card { display: flex; flex-direction: column; gap: 0.85rem; }
.tenant-field { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 0.92rem; }
.tenant-field-label { color: var(--color-muted-foreground); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0; }
.btn-danger { background: var(--color-destructive); color: #fff; }
.btn-danger:hover { filter: brightness(1.1); }

/* Simple confirm dialog — replaces native window.confirm() for every destructive Admin action */
.confirm-overlay {
  position: fixed; inset: 0; background: rgba(15,26,42,0.55); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
}
.confirm-card {
  max-width: 24rem; width: 100%; background: var(--gradient-card); color: var(--color-card-foreground);
  border-radius: var(--radius-xl); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.45); padding: 1.5rem;
}
.confirm-card h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.6rem; }
.confirm-card p { font-size: 0.92rem; line-height: 1.55; color: var(--color-muted-foreground); }
.confirm-actions { display: flex; gap: 0.6rem; margin-top: 1.4rem; }
.confirm-actions .btn { flex: 1; }

/* ---------- QR code (Admin) ---------- */
.qr-card { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; text-align: center; padding: 1.5rem 1.25rem; }
.qr-image { width: 12rem; height: 12rem; image-rendering: pixelated; border-radius: var(--radius-md); background: #fff; padding: 0.6rem; box-shadow: var(--shadow-border); }
.qr-link-label { font-size: 0.8rem; color: var(--color-muted-foreground); word-break: break-all; }
.qr-link-label span { font-weight: 600; color: var(--color-card-foreground); }

/* Print-friendly QR: clicking "Print QR Code" adds .printing-qr to <body> just for the
   print pass (removed again on the browser's afterprint event — see app.js) so only the
   QR card itself ends up on paper, not the rest of the Admin dashboard. */
@media print {
  body.printing-qr .app-shell > *:not(.app-main) { display: none !important; }
  body.printing-qr #app > .stack > *:not(#qr-print-card) { display: none !important; }
  body.printing-qr #qr-print-card { box-shadow: none; border: none; padding: 2rem 0; }
  body.printing-qr .qr-print-hide { display: none !important; }
  body.printing-qr .qr-image { width: 16rem; height: 16rem; }
}

/* ---------- Edit Site Content (Admin) ---------- */
.edit-hub-note { font-size: 0.85rem; line-height: 1.55; color: var(--color-muted-foreground); padding: 0 0.25rem; }
.edit-hub-badge {
  display: inline-flex; align-items: center; justify-content: center; margin-left: 0.5rem;
  padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700;
  background: rgba(47,107,79,0.14); color: var(--color-success);
}
.edit-card { display: flex; flex-direction: column; gap: 0.75rem; }
.edit-step-heading { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-muted-foreground); }
.edit-field { display: flex; flex-direction: column; gap: 0.3rem; }
.edit-field label { font-size: 0.78rem; font-weight: 600; color: var(--color-muted-foreground); }
.edit-field textarea, .edit-field input[type="text"] {
  border: 1px solid var(--color-input); border-radius: var(--radius-sm);
  background: var(--color-surface); padding: 0.6rem 0.75rem; font: inherit; color: inherit;
  resize: vertical; min-height: 4.5rem; line-height: 1.5; width: 100%; box-sizing: border-box;
}
.edit-field input[type="text"] { min-height: 0; resize: none; }
.edit-field-clickwrap { position: relative; }
.edit-field-target[readonly] { cursor: pointer; padding-right: 2.2rem; }
.edit-field-target[readonly]:hover, .edit-field-target[readonly]:focus { border-color: var(--color-primary); outline: none; }
.edit-field-icon { position: absolute; right: 0.6rem; top: 0.55rem; font-size: 0.95rem; color: var(--color-primary); pointer-events: none; }
.edit-field textarea.edit-field-target[readonly] { min-height: 2.6rem; }
.field-edit-card { max-width: 32rem; }
.field-edit-card h3 { font-size: 1.05rem; }
.field-edit-textarea { width: 100%; box-sizing: border-box; min-height: 12rem; margin-top: 0.8rem; border: 1px solid var(--color-input); border-radius: var(--radius-sm); background: var(--color-surface); padding: 0.7rem 0.85rem; font: inherit; color: inherit; line-height: 1.5; resize: vertical; }
.pill-btn.signed-in-pill { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; background: rgba(120,200,150,0.22); border-color: rgba(120,200,150,0.55); }
.pill-btn.signed-in-pill::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 999px; background: #4caf7d; margin-right: 0.4rem; flex-shrink: 0; }
.edit-option-block {
  border-top: 1px solid var(--color-border); padding-top: 0.75rem; margin-top: 0.25rem;
  display: flex; flex-direction: column; gap: 0.65rem;
}
.edit-option-heading { font-size: 0.85rem; font-weight: 700; color: var(--color-primary); }
.edit-checkbox { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; }
.edit-checkbox input { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.edit-verse-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.edit-verse-row input {
  border: 1px solid var(--color-input); border-radius: var(--radius-sm);
  background: var(--color-surface); padding: 0.5rem 0.6rem; font: inherit; color: inherit;
}
.edit-verse-book { width: 4.5rem; text-transform: uppercase; }
.edit-verse-num { width: 3.5rem; }
.edit-actions { margin-top: 0.25rem; }
.edit-save-status { font-size: 0.8rem; font-weight: 600; color: var(--color-success); }
.edit-ref-display { font-size: 0.8rem; color: var(--color-muted-foreground); font-weight: 600; }
.edit-section-link { display: flex; align-items: center; justify-content: space-between; }

/* ---------- First-time admin onboarding tour ---------- */
.tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--color-ink-rgb), 0.6);
  z-index: 9000;
  animation: tour-fade-in 0.2s ease-out;
}

.tour-spotlight-active {
  position: relative !important;
  z-index: 9001 !important;
  box-shadow: 0 0 0 4px var(--color-background), 0 0 0 8px rgba(216, 180, 110, 0.85), 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  border-radius: var(--radius-md);
}

.tour-bubble {
  position: fixed;
  z-index: 9002;
  width: min(320px, calc(100vw - 32px));
  background: var(--color-card);
  color: var(--color-card-foreground);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-bevel), var(--shadow-border);
  padding: 20px 20px 16px;
  animation: tour-fade-in 0.2s ease-out;
}

.tour-bubble h3 {
  margin: 4px 28px 8px 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
}

.tour-bubble p {
  margin: 0 0 16px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-card-foreground);
  opacity: 0.85;
}

.tour-bubble-step {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 4px;
}

.tour-bubble-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-card-foreground);
  opacity: 0.5;
  padding: 4px;
}

.tour-bubble-close:hover {
  opacity: 0.9;
}

.tour-bubble-actions {
  display: flex;
  justify-content: flex-end;
}

@keyframes tour-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 480px) {
  .tour-bubble {
    width: calc(100vw - 32px);
    padding: 16px 16px 14px;
  }
}

/* =====================================================================
   Ministry brand: Instituto Educativo Cristiano (Misión Bautista Vida Nueva, /c/mbvn/)
   Applied only when js/brands.js gives a site bodyClass "brand-iec". Royal navy + candle gold
   on warm parchment, drawn from the I.E.C. logo (open Bible, candle, light of the Gospel).
   ===================================================================== */
body.brand-iec {
  --color-background: #f7f3ea;
  --color-foreground: #17203d;
  --color-ink-rgb: 23,32,61;
  --color-surface: #fffdf8;
  --color-card: #fffdf8;
  --color-card-foreground: #17203d;
  --color-muted: #eee7d7;
  --color-muted-foreground: #5f6479;
  --color-primary: #1d2b57;
  --color-primary-rgb: 29,43,87;
  --color-primary-foreground: #fdf8ec;
  --color-secondary: #eee7d7;
  --color-secondary-foreground: #1d2b57;
  --color-border: #e4dac3;
  --color-input: #dcd1b8;
  --color-ring: #c9921a;
  --iec-gold: #d69e1b;
  --iec-gold-light: #f4c64e;
  --iec-gold-deep: #9a6a05;
  --gradient-primary: linear-gradient(155deg, #2b3f7d 0%, #17224a 100%);
  --gradient-header: linear-gradient(115deg, #26386f 0%, #1b2855 50%, #111a3a 100%);
  --gradient-card: linear-gradient(165deg, #ffffff 0%, #fffdf8 60%, #fbf6ea 100%);
  --gradient-badge: linear-gradient(155deg, #2e4382 0%, #17224a 100%);
  --gradient-nav-active: linear-gradient(155deg, #f2c04a 0%, #c98e12 100%);
  --gradient-welcome-bg: radial-gradient(120% 85% at 50% 6%, #2f437f 0%, #1b2855 48%, #0e1633 100%);
  --shadow-nav-active: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -5px 8px rgba(120,70,0,0.25), 0 0 0 2px rgba(214,158,27,0.18), 0 4px 12px -3px rgba(214,158,27,0.6);
  background:
    radial-gradient(900px 420px at 50% -120px, rgba(244,198,78,0.16), transparent 70%),
    var(--color-background);
  background-attachment: fixed;
}

/* Header: logo tile, full name, gold tagline, gold hairline */
body.brand-iec .site-header { border-bottom: 2px solid rgba(214,158,27,0.75); }
body.brand-iec .header-inner { min-height: 4.75rem; }
body.brand-iec .brand { gap: 0.8rem; }
body.brand-iec .brand-icon {
  width: 3.1rem; height: 3.1rem; border-radius: 14px; background: #fffaf0; padding: 3px;
  box-shadow: 0 0 0 2px rgba(244,198,78,0.7), 0 6px 16px -6px rgba(0,0,0,0.6), 0 0 22px -4px rgba(255,208,90,0.55);
}
body.brand-iec .brand-icon img { object-fit: contain; }
body.brand-iec .brand-name { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.005em; white-space: normal; }
body.brand-iec .brand-tagline {
  color: var(--iec-gold-light); font-size: 0.74rem; font-weight: 500; line-height: 1.3;
  white-space: normal; margin-top: 0.1rem;
}
body.brand-iec .header-actions .pill-btn { height: 2.3rem; font-size: 0.75rem; border-color: rgba(244,198,78,0.45); }
body.brand-iec .header-actions .pill-btn:hover { background: rgba(244,198,78,0.14); }
@media (max-width: 40rem) {
  body.brand-iec .header-actions { flex-basis: auto; }
  body.brand-iec .brand { flex-basis: 0; }
}
@media (max-width: 26rem) {
  body.brand-iec .brand-name { font-size: 1rem; }
  body.brand-iec .brand-tagline { font-size: 0.68rem; }
  body.brand-iec .brand-icon { width: 2.7rem; height: 2.7rem; }
}
@media (max-width: 22rem) { body.brand-iec .brand-tagline { display: block; } }
body.lang-locked .lang-switch, body.lang-locked .welcome-lang { display: none !important; }

/* Home hero */
body.brand-iec .brand-hero {
  position: relative; overflow: hidden; text-align: center; color: #fdf8ec;
  border-radius: 28px; padding: 2.1rem 1.25rem 1.6rem;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(255,214,102,0.34), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(214,158,27,0.16), transparent 70%),
    linear-gradient(170deg, #26396f 0%, #18244d 55%, #0f1735 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 22px 44px -26px rgba(17,26,58,0.85), 0 0 0 1px rgba(214,158,27,0.28);
}
body.brand-iec .brand-hero::after {
  content: ""; position: absolute; inset: 10px; border-radius: 20px; pointer-events: none;
  border: 1px solid rgba(244,198,78,0.22);
}
body.brand-iec .brand-hero > * { position: relative; z-index: 1; }
body.brand-iec .brand-hero-logo {
  width: 8.5rem; height: 8.5rem; margin: 0 auto; border-radius: 30px; background: #fffaf0; padding: 0.55rem;
  box-shadow: 0 0 0 3px rgba(244,198,78,0.6), 0 0 48px 4px rgba(255,208,90,0.35), 0 14px 26px -12px rgba(0,0,0,0.6);
}
body.brand-iec .brand-hero-name {
  margin-top: 1.1rem; font-size: clamp(1.55rem, 6vw, 2.2rem); font-weight: 700; color: #fff; letter-spacing: -0.015em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
body.brand-iec .brand-hero-tagline {
  margin: 0.45rem auto 0; max-width: 30rem; color: var(--iec-gold-light);
  font-size: 0.98rem; font-weight: 600; line-height: 1.4;
}
body.brand-iec .brand-hero-rule {
  display: block; width: 4.5rem; height: 2px; margin: 1.1rem auto 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--iec-gold-light), transparent);
}
body.brand-iec .brand-hero-verse {
  margin: 1rem auto 0; max-width: 30rem; white-space: pre-line;
  font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; line-height: 1.45; color: rgba(253,248,236,0.93);
}
body.brand-iec .brand-hero-verse span {
  display: block; margin-top: 0.4rem; font-family: var(--font-sans); font-style: normal;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(253,248,236,0.62);
}
body.brand-iec .brand-hero .actions { margin-top: 1.4rem; justify-content: center; }
body.brand-iec .btn-gold {
  background: linear-gradient(180deg, #f7cd5c 0%, #dfa322 100%); color: #2a1c00;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 8px 18px -8px rgba(214,158,27,0.9);
}
body.brand-iec .btn-gold:hover { filter: brightness(1.06); }
body.brand-iec .btn-glass {
  background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.32);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
body.brand-iec .btn-glass:hover { background: rgba(255,255,255,0.16); }
@media (max-width: 30rem) {
  body.brand-iec .brand-hero .actions .btn { flex: 1 1 100%; }
  body.brand-iec .brand-hero-logo { width: 7.25rem; height: 7.25rem; border-radius: 26px; }
}

/* Verse of the day: parchment card with a gold edge */
body.brand-iec .verse-card {
  background: var(--gradient-card); color: var(--color-foreground);
  border: 1px solid var(--color-border); border-left: 5px solid var(--iec-gold);
  box-shadow: 0 10px 26px -18px rgba(var(--color-ink-rgb),0.5);
}
body.brand-iec .verse-card::before { background: radial-gradient(90% 120% at 100% 0%, rgba(244,198,78,0.14), transparent 60%); }
body.brand-iec .verse-card .kicker { color: var(--iec-gold-deep); }
body.brand-iec .verse-card blockquote { color: var(--color-primary); }
body.brand-iec .verse-card .ref { color: var(--color-muted-foreground); font-weight: 600; }

/* Section title + resource tiles */
body.brand-iec .brand-section-title {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: -1.1rem;
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--iec-gold-deep);
}
body.brand-iec .brand-section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(214,158,27,0.5), transparent); }
body.brand-iec .tile {
  position: relative; padding: 0.95rem 2.4rem 0.95rem 0.95rem;
  border: 1px solid rgba(var(--color-ink-rgb),0.07);
  box-shadow: 0 1px 2px rgba(var(--color-ink-rgb),0.06), 0 10px 22px -18px rgba(var(--color-ink-rgb),0.55);
}
body.brand-iec .tile::after {
  content: ""; position: absolute; right: 1.1rem; top: 50%; width: 0.55rem; height: 0.55rem; margin-top: -0.3rem;
  border-top: 2px solid var(--iec-gold); border-right: 2px solid var(--iec-gold); transform: rotate(45deg);
  transition: transform 150ms ease;
}
body.brand-iec .tile:hover { box-shadow: 0 0 0 1px rgba(214,158,27,0.45), 0 14px 26px -16px rgba(var(--color-ink-rgb),0.55); }
body.brand-iec .tile:hover::after { transform: translateX(3px) rotate(45deg); }
body.brand-iec .tile-title { font-size: 1.1rem; font-weight: 700; color: var(--color-primary); }
body.brand-iec .tile-icon { border-radius: 16px; }
body.brand-iec .tile[data-icon="start"] .tile-icon { background: linear-gradient(155deg, #f4c64e 0%, #c98e12 100%); color: #fffaf0; }
body.brand-iec .tile[data-icon="bible"] .tile-icon { background: linear-gradient(155deg, #2e4382 0%, #17224a 100%); }
body.brand-iec .tile[data-icon="preaching"] .tile-icon { background: linear-gradient(155deg, #c6423a 0%, #8a1c1c 100%); }
body.brand-iec .tile[data-icon="tracts"] .tile-icon { background: linear-gradient(155deg, #2a8a7f 0%, #135049 100%); }
body.brand-iec .tile[data-icon="studies"] .tile-icon { background: linear-gradient(155deg, #5a4bb0 0%, #2f2670 100%); }
body.brand-iec .tile[data-icon="chat"] .tile-icon { background: linear-gradient(155deg, #3c7fc4 0%, #1c4a82 100%); }
body.brand-iec .tile[data-icon="faq"] .tile-icon { background: linear-gradient(155deg, #b8773f 0%, #74411a 100%); }
body.brand-iec .tile[data-icon="kids"] .tile-icon { background: linear-gradient(155deg, #f39a3d 0%, #c4620c 100%); }
body.brand-iec .tile[data-icon="games"] .tile-icon { background: linear-gradient(155deg, #3f9a55 0%, #1e5e30 100%); }
body.brand-iec .tile[data-icon] .tile-icon svg [fill="var(--color-primary)"] { fill: rgba(0,0,0,0.28); }

/* Buttons + nav + footer */
body.brand-iec .bottom-nav { border-top: 1px solid var(--color-border); background: linear-gradient(180deg, #fffdf8 0%, #fbf6ea 100%); }
body.brand-iec .bottom-nav a.active { color: var(--iec-gold-deep); font-weight: 700; }
body.brand-iec .bottom-nav .nav-icon { color: #fffaf0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 3px 8px -3px rgba(var(--color-ink-rgb),0.45); }
body.brand-iec .bottom-nav .nav-icon svg [fill="var(--color-primary)"] { fill: rgba(0,0,0,0.28); }
body.brand-iec .bottom-nav .nav-icon svg [stroke="var(--color-primary)"] { stroke: rgba(0,0,0,0.28); }
body.brand-iec .bottom-nav a[data-nav="/"] .nav-icon { background: linear-gradient(155deg, #f4c64e 0%, #c98e12 100%); }
body.brand-iec .bottom-nav a[data-nav="/bible"] .nav-icon { background: linear-gradient(155deg, #2e4382 0%, #17224a 100%); }
body.brand-iec .bottom-nav a[data-nav="/tracts"] .nav-icon { background: linear-gradient(155deg, #2a8a7f 0%, #135049 100%); }
body.brand-iec .bottom-nav a[data-nav="/studies"] .nav-icon { background: linear-gradient(155deg, #5a4bb0 0%, #2f2670 100%); }
body.brand-iec .bottom-nav a[data-nav="/contact"] .nav-icon { background: linear-gradient(155deg, #3c7fc4 0%, #1c4a82 100%); }
body.brand-iec .bottom-nav a.active .nav-icon { box-shadow: 0 0 0 2px #fffdf8, 0 0 0 3.5px var(--iec-gold), 0 4px 10px -3px rgba(var(--color-ink-rgb),0.5); }
/* Bottom-bar buttons use the same pictures as the matching home-menu tiles (Inicio = the I.E.C. logo). */
body.brand-iec .bottom-nav .nav-icon { overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; }
body.brand-iec .bottom-nav .nav-icon svg { display: none; }
body.brand-iec .bottom-nav a[data-nav="/"] .nav-icon { background: #fffaf0 url(/brands/mbvn/logo.svg) center / 88% no-repeat; box-shadow: 0 0 0 1.5px rgba(214,158,27,0.55), 0 3px 8px -3px rgba(var(--color-ink-rgb),0.45); }
body.brand-iec .bottom-nav a[data-nav="/bible"] .nav-icon { background: #dfe9f0 url(/c/mbvn/tile-bible.jpg) center / cover no-repeat; }
body.brand-iec .bottom-nav a[data-nav="/tracts"] .nav-icon { background: #dfe9f0 url(/c/mbvn/tile-tracts.jpg) center / cover no-repeat; }
body.brand-iec .bottom-nav a[data-nav="/studies"] .nav-icon { background: #dfe9f0 url(/c/mbvn/tile-study.jpg) center / cover no-repeat; }
body.brand-iec .bottom-nav a[data-nav="/contact"] .nav-icon { background: #dfe9f0 url(/c/mbvn/tile-chat.jpg) center / cover no-repeat; }
/* Iglesia Bautista Verdadero Norte (/c/tnbcpanama/) uses the same look with its own logo. */
html body.brand-tnbcp .bottom-nav a[data-nav="/bible"] .nav-icon { background: #eef2ea url(/brands/tnbcpanama/tile-bible.svg?v=3) center / cover no-repeat; }
html body.brand-tnbcp .bottom-nav a[data-nav="/tracts"] .nav-icon { background: #eef2ea url(/brands/tnbcpanama/tile-tracts.svg?v=3) center / cover no-repeat; }
html body.brand-tnbcp .bottom-nav a[data-nav="/studies"] .nav-icon { background: #eef2ea url(/brands/tnbcpanama/tile-studies.svg?v=3) center / cover no-repeat; }
html body.brand-tnbcp .bottom-nav a[data-nav="/contact"] .nav-icon { background: #eef2ea url(/brands/tnbcpanama/tile-chat.svg?v=3) center / cover no-repeat; }
html body.brand-tnbcp .bottom-nav a[data-nav="/"] .nav-icon { background: #fbfcf8 url(/brands/tnbcpanama/mark-mb.png) center / 92% no-repeat; }
html.pl-hide-admin .site-header a.pill-btn[href="#/admin"] { display: none !important; }
/* The full round logo (with its lettering) gets a round, larger frame so the words stay readable. */
html body.brand-tnbcp .brand-hero-logo { width: 11.5rem; height: 11.5rem; border-radius: 50%; padding: 0.3rem; }
@media (max-width: 30rem) { html body.brand-tnbcp .brand-hero-logo { width: 10rem; height: 10rem; border-radius: 50%; } }
html body.brand-tnbcp .welcome-loading-icon-wrap { width: 9.5rem; height: 9.5rem; background: #fbfcf8; padding: 0.25rem; }
html body.brand-tnbcp .welcome-loading-icon { object-fit: contain; }
/* "Read our testimonies" square in the home box (brand testimonies). */
.hero-sq[hidden], .hero-read[hidden] { display: none !important; }
/* Reading row under the home-box squares: Salvation Testimonies + Our Doctrine, side by side. */
body.brand-iec .hero-read-row { display: flex; justify-content: center; gap: 0.5rem; margin: 0.55rem auto 0; width: 100%; max-width: 20.2rem; }
body.brand-iec .hero-read {
  flex: 1 1 0; min-width: 0; min-height: 3.1rem; display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.5rem 0.7rem; border-radius: 14px; text-decoration: none; font-weight: 700; font-size: 0.8rem; line-height: 1.2; text-align: left;
  color: #fff; background: linear-gradient(180deg, #2f7d4f 0%, #1f5a39 100%); box-shadow: inset 0 0 0 2px #e9b949, 0 8px 16px -10px rgba(0,0,0,0.6);
}
body.brand-iec .hero-read svg { width: 22px; height: 22px; flex: none; color: #f4c64e; }
body.brand-iec .hero-read:active { transform: scale(0.98); }
@media (min-width: 40rem) { body.brand-iec .hero-read-row { max-width: 27rem; } body.brand-iec .hero-read { font-size: 0.88rem; } }
/* A ministry's own photo (brand heroPhoto) in the home page's main box. */
.brand-hero-photo {
  display: block; width: 100%; max-width: 26rem; height: auto; margin: 1.1rem auto 0.2rem;
  border-radius: 18px; border: 4px solid #fffaf0; box-shadow: 0 12px 28px -14px rgba(0,0,0,0.55);
}
body.brand-iec .bottom-nav a[data-nav="/"].active .nav-icon { box-shadow: 0 0 0 2px #fffdf8, 0 0 0 3.5px var(--iec-gold), 0 4px 10px -3px rgba(var(--color-ink-rgb),0.5); }
body.brand-iec footer.site-footer.brand-footer { margin-top: 0.5rem; padding-top: 1.5rem; gap: 0.7rem; border-top: 1px solid var(--color-border); }
body.brand-iec footer.site-footer img.brand-footer-logo {
  width: 5rem; height: 5rem; border-radius: 20px; background: #fffaf0; padding: 0.35rem;
  box-shadow: 0 0 0 2px rgba(214,158,27,0.45), 0 8px 18px -10px rgba(var(--color-ink-rgb),0.6);
}
body.brand-iec footer.site-footer .ministry-line { font-size: 0.88rem; font-weight: 600; color: var(--color-primary); max-width: 20rem; }
body.brand-iec .back-link { color: var(--iec-gold-deep); }
body.brand-iec .welcome-loading-name { letter-spacing: -0.01em; }
html.pl-branding body:not(.brand-site) .site-header .brand,
html.pl-branding body:not(.brand-site) .site-header .header-actions { visibility: hidden; }
body.brand-iec .brand-hero .brand-hero-kids { margin-top: 0.65rem; }
body.brand-iec .btn-kids-share { border-color: rgba(244,198,78,0.65); color: #ffe7a3; }
body.brand-iec .btn-kids-share:hover { background: rgba(244,198,78,0.14); }

/* Ministry YouTube videos (brand home page, between the verse of the day and the menu tiles) */
.yt-section { display: flex; flex-direction: column; gap: 0.8rem; }
.yt-head .brand-section-title { margin-bottom: 0; }
.yt-frame {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; padding: 0; border: 0;
  border-radius: 20px; background: #0f1735;
  box-shadow: 0 0 0 1px rgba(214,158,27,0.35), 0 18px 34px -22px rgba(17,26,58,0.85);
}
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-poster { cursor: pointer; text-align: left; color: #fff; }
.yt-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.yt-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,16,40,0) 45%, rgba(10,16,40,0.85) 100%); }
.yt-poster:hover img { transform: scale(1.03); }
.yt-play { position: absolute; left: 50%; top: 45%; width: 4.2rem; transform: translate(-50%, -50%); z-index: 2; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45)); transition: transform 150ms ease; }
.yt-poster:hover .yt-play { transform: translate(-50%, -50%) scale(1.08); }
.yt-play svg { display: block; width: 100%; height: auto; }
.yt-badge {
  position: absolute; top: 0.8rem; left: 0.8rem; z-index: 2; padding: 0.3rem 0.7rem; border-radius: 999px;
  background: linear-gradient(180deg, #f7cd5c, #dfa322); color: #2a1c00; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.yt-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; }
.yt-cap strong { font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.3; text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-cap em { font-style: normal; font-size: 0.78rem; opacity: 0.8; }
.yt-now { font-family: var(--font-serif); font-weight: 600; color: var(--color-primary); line-height: 1.3; }
.yt-now span { display: block; font-family: var(--font-sans); font-weight: 500; font-size: 0.78rem; color: var(--color-muted-foreground); }
.yt-skel { background: linear-gradient(100deg, #e9e2d1 30%, #f6f1e5 50%, #e9e2d1 70%); background-size: 200% 100%; animation: ytShimmer 1.4s linear infinite; }
@keyframes ytShimmer { to { background-position: -200% 0; } }
.yt-rail-wrap { position: relative; }
.yt-rail { display: flex; gap: 0.7rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.15rem 0.1rem 0.6rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.yt-card {
  flex: 0 0 11.5rem; scroll-snap-align: start; display: flex; flex-direction: column; gap: 0.3rem; text-align: left; padding: 0;
  border-radius: 14px; color: var(--color-foreground);
}
.yt-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #d9d1bd; box-shadow: 0 1px 2px rgba(var(--color-ink-rgb),0.12); }
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.yt-card.on .yt-thumb { box-shadow: 0 0 0 3px var(--iec-gold, #d69e1b); }
.yt-card-title { font-size: 0.84rem; font-weight: 600; line-height: 1.3; color: var(--color-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-card-date { font-size: 0.72rem; color: var(--color-muted-foreground); margin-top: -0.15rem; }
.yt-nav {
  display: none; position: absolute; top: 2.4rem; z-index: 3; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--color-card); color: var(--color-primary); font-size: 1.5rem; line-height: 1;
  box-shadow: 0 0 0 1px rgba(214,158,27,0.45), 0 6px 14px -6px rgba(var(--color-ink-rgb),0.6);
}
.yt-prev { left: -0.9rem; } .yt-next { right: -0.9rem; }
@media (hover: hover) and (pointer: fine) { .yt-nav { display: flex; align-items: center; justify-content: center; } }
.yt-all { align-self: flex-end; margin-top: -0.3rem; font-size: 0.85rem; font-weight: 600; color: var(--iec-gold-deep, #9a6a05); }
/* A ministry's YouTube Shorts (brand youtube.shorts): tall covers in a row, played inline above it. */
.yts-section { gap: 0.6rem; }
.yts-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.yts-head .brand-section-title { margin-bottom: 0; }
.yts-head .yt-all { align-self: auto; margin: 0; white-space: nowrap; }
.yts-rail { gap: 0.6rem; padding-bottom: 0.5rem; }
.yts-card {
  position: relative; flex: 0 0 8.6rem; aspect-ratio: 9 / 16; scroll-snap-align: start; overflow: hidden; padding: 0; border: 0;
  border-radius: 16px; background: var(--color-primary); color: #fff; text-align: left; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(214,158,27,0.35), 0 12px 22px -16px rgba(var(--color-ink-rgb),0.8);
}
@media (min-width: 40rem) { .yts-card { flex-basis: 9.6rem; } }
.yts-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.yts-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.78) 100%); }
.yts-card:hover img { transform: scale(1.04); }
.yts-card.on { box-shadow: 0 0 0 3px var(--iec-gold, #d69e1b), 0 12px 22px -16px rgba(var(--color-ink-rgb),0.8); }
.yts-card .yt-badge { top: 0.55rem; left: 0.55rem; font-size: 0.64rem; padding: 0.22rem 0.55rem; }
.yts-play {
  position: absolute; left: 50%; top: 44%; z-index: 2; width: 2.8rem; height: 2.8rem; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(0,0,0,0.45); color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.85);
}
.yts-play svg { width: 1.35rem; height: 1.35rem; margin-left: 0.15rem; }
.yts-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0.6rem 0.65rem; font-size: 0.8rem; font-weight: 600; line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.yts-cap > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.yts-skel { cursor: default; background: linear-gradient(100deg, #e9e2d1 30%, #f6f1e5 50%, #e9e2d1 70%); background-size: 200% 100%; animation: ytShimmer 1.4s linear infinite; box-shadow: none; }
.yts-skel::after { display: none; }
.yts-stage[hidden] { display: none; }
.yts-stage { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; scroll-margin-top: 4.5rem; }
.yts-frame {
  position: relative; width: min(100%, 22rem, calc((100vh - 11rem) * 9 / 16)); aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 20px; background: #000; box-shadow: 0 0 0 1px rgba(214,158,27,0.4), 0 18px 34px -22px rgba(0,0,0,0.85);
}
.yts-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yts-now { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: min(100%, 22rem); }
.yts-now p { margin: 0; font-family: var(--font-serif); font-weight: 600; color: var(--color-primary); line-height: 1.3; }
.yts-now p span { display: block; font-family: var(--font-sans); font-weight: 500; font-size: 0.76rem; color: var(--color-muted-foreground); }
.yts-close {
  flex: none; padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid var(--color-border);
  background: var(--color-card); color: var(--color-primary); font-weight: 600; font-size: 0.82rem; cursor: pointer;
}

.tile-icon { position: relative; }
.tile-icon .tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Ministry logo on the visitor-study opening screen: the candle's flame and light flicker on
   the same one-shot timeline as the PathLight lantern (pl-flicker), then settle bright. */
.welcome-loading-logo {
  width: 10rem; height: 10rem; box-sizing: border-box; padding: 0.65rem; border-radius: 34px; background: #fffaf0;
  animation: wl-medallion 3.5s ease-in-out 1 forwards;
}
.welcome-loading-logo svg { display: block; width: 100%; height: 100%; }
.welcome-loading-logo ~ .welcome-loading-path { display: none; }
.welcome-loading-logo .wl-halo, .welcome-loading-logo .wl-flame { animation: wl-candle 3.5s ease-in-out 1 forwards; }
.welcome-loading-logo .wl-flame path { transform-box: fill-box; transform-origin: 50% 100%; animation: wl-flutter 1.6s ease-in-out infinite; }
@keyframes wl-candle {
  0% { opacity: 0.08; } 6% { opacity: 1; } 12% { opacity: 0.12; }
  22% { opacity: 1; } 28% { opacity: 0.15; } 40%, 100% { opacity: 1; }
}
@keyframes wl-medallion {
  0% { box-shadow: 0 0 0 3px rgba(244,198,78,0.35), 0 0 0 0 rgba(255,208,90,0); }
  6% { box-shadow: 0 0 0 3px rgba(244,198,78,0.7), 0 0 48px 6px rgba(255,208,90,0.5); }
  12% { box-shadow: 0 0 0 3px rgba(244,198,78,0.35), 0 0 6px 0 rgba(255,208,90,0.1); }
  22% { box-shadow: 0 0 0 3px rgba(244,198,78,0.7), 0 0 48px 6px rgba(255,208,90,0.5); }
  28% { box-shadow: 0 0 0 3px rgba(244,198,78,0.35), 0 0 6px 0 rgba(255,208,90,0.1); }
  40%, 100% { box-shadow: 0 0 0 3px rgba(244,198,78,0.7), 0 0 56px 8px rgba(255,208,90,0.5); }
}
@keyframes wl-flutter {
  0%, 100% { transform: scale(1, 1) rotate(0deg); }
  25% { transform: scale(0.96, 1.05) rotate(-2deg); }
  50% { transform: scale(1.03, 0.97) rotate(1.5deg); }
  75% { transform: scale(0.98, 1.03) rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-loading-logo, .welcome-loading-logo .wl-halo, .welcome-loading-logo .wl-flame, .welcome-loading-logo .wl-flame path { animation: none; }
}
body.brand-iec .welcome-loading-inner { text-align: center; padding: 0 1rem; }
body.brand-iec .welcome-loading-tagline { max-width: 20rem; color: #f4c64e; }

/* Indigenous-language Bible links (Bible reader, brand flag indigenousBibles) */
.ib-section { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
.ib-intro { margin: 0; font-size: 0.85rem; color: var(--color-muted-foreground); line-height: 1.45; }
.ib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.6rem; }
.ib-card {
  display: flex; flex-direction: column; gap: 0.3rem; padding: 0.8rem 0.9rem;
  background: var(--gradient-card); border: 1px solid rgba(var(--color-ink-rgb),0.05);
  border-radius: var(--radius-md); box-shadow: var(--shadow-border);
}
.ib-name { font-family: var(--font-serif); font-weight: 600; font-size: 0.98rem; line-height: 1.25; }
.ib-people { font-size: 0.78rem; color: var(--color-muted-foreground); line-height: 1.35; }
.ib-links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
.ib-link {
  display: inline-block; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  background: var(--color-primary); color: var(--color-primary-foreground); text-decoration: none;
}
.ib-link:hover { opacity: 0.9; }
.ib-section { scroll-margin-top: 5.5rem; }
/* "Bible in another language?" pointer at the top of #/bible that scrolls down to .ib-section */
.ib-jump {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left; cursor: pointer;
  padding: 0.75rem 0.9rem; font: inherit; color: var(--color-foreground);
  background: rgba(214,158,27,0.10); border: 1px solid rgba(214,158,27,0.55); border-left: 4px solid #d69e1b;
  border-radius: var(--radius-md);
}
.ib-jump:hover { background: rgba(214,158,27,0.16); }
.ib-jump:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.ib-jump-icon { font-size: 1.5rem; line-height: 1; flex: none; }
.ib-jump-text { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
.ib-jump-text strong { font-family: var(--font-serif); font-size: 1rem; color: var(--color-primary); }
.ib-jump-text span { font-size: 0.82rem; color: var(--color-muted-foreground); line-height: 1.35; }
.ib-jump-arrow {
  flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-primary); color: #f4c64e; font-weight: 700; font-size: 1.05rem;
  animation: ib-bob 1.8s ease-in-out infinite;
}
@keyframes ib-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .ib-jump-arrow { animation: none; } }

/* IEC: the visitor study (#/welcome) on warm parchment in the site's navy and gold, with an
   illustration at the top of each step (brands.js studyArt). The opening candle screen
   (.welcome-loading) keeps its navy night look. */
body.brand-iec .welcome-study {
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(244,198,78,0.22), transparent 70%),
    linear-gradient(180deg, #fbf7ee 0%, #f3ecdc 100%);
  color: var(--color-foreground);
}
body.brand-iec .welcome-study .welcome-exit { color: var(--iec-gold-deep); }
body.brand-iec .welcome-study .dialogue-card {
  background: var(--gradient-card); border: 1px solid var(--color-border); color: var(--color-foreground);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 22px 50px -28px rgba(29,43,87,0.45), 0 0 0 1px rgba(214,158,27,0.14);
}
body.brand-iec .welcome-study .dialogue-card.has-art { max-width: 32rem; padding-top: 0; overflow: hidden; }
body.brand-iec .dialogue-art {
  margin: 0 -1.35rem 1.35rem; aspect-ratio: 800 / 420; background: #1d2b57;
  border-bottom: 3px solid var(--iec-gold);
}
body.brand-iec .dialogue-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.brand-iec .welcome-study .dialogue-prompt { color: var(--color-primary); }
body.brand-iec .welcome-study .dialogue-option {
  background: #fffdf8; border: 1px solid var(--color-border); color: var(--color-foreground);
  box-shadow: 0 1px 2px rgba(29,43,87,0.06);
}
body.brand-iec .welcome-study .dialogue-option:hover { background: #fbf6ea; border-color: rgba(214,158,27,0.55); }
body.brand-iec .welcome-study .dialogue-option.selected { background: var(--gradient-primary); color: #fdf8ec; border-color: transparent; }
body.brand-iec .welcome-study .dialogue-option.selected.correct {
  background: linear-gradient(180deg, #eafff0, #d2f8dd); color: #1a7a3c; box-shadow: 0 0 0 2px rgba(46,160,90,0.55);
}
body.brand-iec .welcome-study .dialogue-option.selected.incorrect {
  background: linear-gradient(180deg, #fff0ee, #ffe1dc); color: #a3311c; box-shadow: 0 0 0 2px rgba(214,69,42,0.55);
}
body.brand-iec .welcome-study .dialogue-option.correct:not(.selected) {
  border-color: rgba(46,160,90,0.65); box-shadow: 0 0 0 2px rgba(46,160,90,0.35);
}
body.brand-iec .welcome-study .dialogue-correct-badge { color: #1a7a3c; }
body.brand-iec .welcome-study .dialogue-correct-reveal { background: rgba(46,160,90,0.08); border-color: rgba(46,160,90,0.35); }
body.brand-iec .welcome-study .dialogue-correct-reveal-label { color: #1a7a3c; }
body.brand-iec .welcome-study .dialogue-correct-reveal-text { color: var(--color-foreground); }
body.brand-iec .welcome-study .dialogue-feedback {
  background: #f3ecdc; color: #2a3150; border-left: 3px solid var(--iec-gold);
}
body.brand-iec .welcome-study .dialogue-verse {
  border-left-color: var(--iec-gold); color: var(--color-primary);
  background: linear-gradient(90deg, rgba(214,158,27,0.12), rgba(214,158,27,0));
}
body.brand-iec .welcome-study .dialogue-verse cite { color: var(--color-muted-foreground); }
body.brand-iec .welcome-study .welcome-btn-primary {
  background: var(--gradient-primary); color: #fdf8ec; box-shadow: 0 8px 18px -10px rgba(29,43,87,0.8);
}
body.brand-iec .welcome-study .welcome-closing-links .btn-outline { border-color: rgba(29,43,87,0.3); color: var(--color-primary); }
body.brand-iec .welcome-study .welcome-restart { color: var(--color-muted-foreground); }

/* IEC: correspondence studies (#/study/...) with a picture on each page (brands.js studyPageArt)
   and a little more color: gold-ruled headings, a drop cap, and warm verse boxes. */
body.brand-iec .study-art {
  margin: 1rem 0 1.35rem; border-radius: 14px; overflow: hidden; aspect-ratio: 800 / 420; background: #1d2b57;
  border-bottom: 3px solid var(--iec-gold);
  box-shadow: 0 12px 26px -16px rgba(29,43,87,0.65), 0 0 0 1px rgba(214,158,27,0.3);
}
body.brand-iec .study-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.brand-iec .card:has(.study-nav-row) > h2 {
  color: var(--color-primary); padding-bottom: 0.5rem; border-bottom: 2px solid rgba(214,158,27,0.5);
}
body.brand-iec .card:has(.study-nav-row) > h2 + .study-block-p::first-letter {
  float: left; font-family: var(--font-serif); font-size: 2.7em; line-height: 0.85; font-weight: 700;
  padding: 0.08em 0.12em 0 0; color: var(--iec-gold-deep);
}
body.brand-iec .study-block-h {
  color: var(--color-primary); border-left: 4px solid var(--iec-gold); padding: 0.1rem 0 0.1rem 0.65rem;
}
body.brand-iec .blank-verse {
  background: linear-gradient(165deg, #fffaf0 0%, #f6eedc 100%); border: 1px solid var(--color-border);
  border-left: 4px solid var(--iec-gold);
}
body.brand-iec .blank-verse .ref { color: var(--iec-gold-deep); font-size: 0.8rem; letter-spacing: 0.02em; }
body.brand-iec .blank-verse .verse-text { font-family: var(--font-serif); font-size: 1.05rem; color: var(--color-primary); }
body.brand-iec .page-dots span.active { background: var(--iec-gold); }

/* ---------- Session 29: next-step cards, WhatsApp, study answers, spacing ---------- */
.field select {
  border: 1px solid var(--color-input); border-radius: var(--radius-sm);
  background: var(--color-surface); padding: 0.6rem 0.75rem; font: inherit; color: inherit;
}
.cta-card {
  padding: 1.1rem 1.1rem 1.2rem; border-radius: var(--radius-md);
  background: var(--color-card); box-shadow: var(--shadow-border);
  border-top: 4px solid #d69e1b;
}
.cta-title { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; color: var(--color-primary); margin: 0 0 0.35rem; }
.cta-text { margin: 0 0 0.9rem; font-size: 0.92rem; line-height: 1.5; color: var(--color-muted-foreground); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cta-actions .btn { flex: 1 1 12rem; }
.cta-wa, .wa-share-btn { background: #1d8f4e; color: #fff; }
.cta-wa:hover, .wa-share-btn:hover { filter: brightness(1.08); }
.cta-wa svg, .wa-share-btn svg, .wa-banner-ic svg, .footer-wa-line svg { width: 20px; height: 20px; flex: none; }
.wa-share-btn { align-self: flex-start; }
.wa-banner {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1rem; border-radius: var(--radius-md);
  background: rgba(29,143,78,0.08); border: 1px solid rgba(29,143,78,0.45); color: inherit; text-decoration: none;
}
.wa-banner-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #1d8f4e; color: #fff; display: grid; place-items: center; }
.wa-banner-text { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.wa-banner-text strong { color: var(--color-primary); }
.wa-banner-text span { font-size: 0.88rem; color: var(--color-muted-foreground); }
.wa-banner-go { font-size: 1.5rem; color: #1d8f4e; font-weight: 700; }
.footer-wa-line a { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.answers-card { border-top: 4px solid #d69e1b; }
.answers-title { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; color: var(--color-primary); margin: 0 0 0.35rem; }
.answers-text { margin: 0 0 0.9rem; font-size: 0.92rem; line-height: 1.5; color: var(--color-muted-foreground); }
/* IEC: tighter space between a page's back link, title and first content (was 2rem + 1.5rem). */
body.brand-iec .stack > .page-header { margin-top: -1rem; margin-bottom: -0.9rem; }
body.brand-iec .stack > .page-header + .lib-intro, body.brand-iec .stack > .lib-intro { margin-top: 0; }
/* Branded site: keep the default English bottom-bar labels hidden until the brand's words are in. */
html.pl-branding body:not(.brand-site) .bottom-nav a > span:last-child { visibility: hidden; }
body.brand-iec .disc-page .disc-banner { margin-bottom: -0.8rem; }

/* ---------- Verse tools (brand flag mobileReaders): tap to select, copy, highlight, share ---------- */
.bv-list { font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.75; }
.bv { cursor: pointer; border-radius: 4px; padding: 0.05em 0.1em; -webkit-tap-highlight-color: transparent; transition: background-color 120ms; }
.bv.hl-y { background: #fff1a8; }
.bv.hl-g { background: #cdeec9; }
.bv.hl-b { background: #cfe4fb; }
.bv.hl-p { background: #f9d3e3; }
.bv.sel { text-decoration: underline dotted #b08a3e; text-decoration-thickness: 2px; text-underline-offset: 4px; background-color: rgba(214,158,27,0.16); }
.bv-list.phone .bv { display: block; margin: 0 0 0.55em; padding: 0.15em 0.3em; }
.bv-list.phone .bible-vnum { font-family: system-ui, sans-serif; font-weight: 800; color: #9a6a05; font-size: 0.68em; margin-right: 0.35em; vertical-align: 0.35em; }
.bv-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(4.6rem + env(safe-area-inset-bottom)); z-index: 60;
  width: min(34rem, calc(100% - 20px)); background: #16224a; color: #fff; border-radius: 16px; padding: 0.6rem 0.7rem 0.7rem;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.bv-bar[hidden] { display: none; }
.bv-bar.phone { position: absolute; bottom: 0; left: 0; right: 0; transform: none; width: auto; border-radius: 16px 16px 0 0; padding-bottom: max(0.7rem, env(safe-area-inset-bottom)); }
.bv-bar-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.bv-bar-ref { font-weight: 700; color: #f3dca6; font-size: 0.95rem; }
.bv-x { background: none; border: 0; color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; padding: 0 0.3rem; }
.bv-bar-row { display: flex; gap: 0.4rem; }
.bv-bar-row + .bv-bar-row { margin-top: 0.5rem; }
.bv-bar-row > button:not(.dot) { flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.1); color: #fff; font: inherit; font-weight: 700; font-size: 0.92rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; cursor: pointer; }
.bv-bar-row > button.wa { background: #1d8f4e; border-color: #1d8f4e; }
.bv-bar-row > button svg { width: 18px; height: 18px; }
.bv-bar-row.hl { align-items: center; }
.bv-bar-row.hl span { font-size: 0.85rem; color: rgba(255,255,255,0.8); margin-right: 0.2rem; }
.bv-bar .dot { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.7); cursor: pointer; padding: 0; }
.bv-bar .dot.hl-y { background: #fff1a8; } .bv-bar .dot.hl-g { background: #cdeec9; } .bv-bar .dot.hl-b { background: #cfe4fb; } .bv-bar .dot.hl-p { background: #f9d3e3; }
.bv-bar .dot.none { background: transparent; color: #fff; font-size: 1rem; }

/* Phone: a Bible chapter as a full-screen reading page */
.br-m { position: fixed; inset: 0; z-index: 9000; background: #fbf7ee; color: #1d1a14; display: flex; flex-direction: column; }
.br-m-top { flex: none; display: flex; align-items: center; gap: 0.25rem; padding: 0.35rem 0.4rem; padding-top: max(0.35rem, env(safe-area-inset-top)); background: #16224a; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.br-m-ic { flex: none; min-width: 46px; height: 46px; border: 0; border-radius: 12px; background: transparent; color: #fff; font: inherit; font-weight: 800; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.br-m-ic.on, .br-m-ic:active { background: rgba(255,255,255,0.16); }
.br-m-ic svg { width: 22px; height: 22px; }
.br-m-tt { flex: 1; min-width: 0; text-align: center; font-weight: 800; font-size: 1.05rem; color: #f3dca6; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-m-panel { flex: none; background: #fff; border-bottom: 1px solid rgba(0,0,0,0.1); padding: 0.6rem 0.8rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: center; }
.br-m-panel[hidden] { display: none; }
.br-m-size { display: inline-flex; border: 2px solid #16224a; border-radius: 999px; overflow: hidden; }
.br-m-size button { min-width: 58px; min-height: 46px; border: 0; background: #fff; color: #16224a; font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer; }
.br-m-size button + button { border-left: 2px solid #16224a; }
.br-m-hint { font-size: 0.82rem; color: #6b6356; text-align: center; }
.br-m-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 1.1rem 1.05rem 2.5rem; position: relative; }
.br-m-h { font-family: var(--font-serif); font-size: 1.5em; font-weight: 800; color: #16224a; margin: 0; line-height: 1.15; }
.br-m-h span { color: #b08a3e; }
.br-m-tr { font-size: 0.66em; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: #8a6a2c; margin: 0.2em 0 1em; }
.br-m-body .bv-list { font-size: 1em; line-height: 1.7; }
.br-m-bot { flex: none; display: flex; gap: 0.4rem; padding: 0.45rem; padding-bottom: max(0.45rem, env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid rgba(0,0,0,0.12); }
.br-m-bot[hidden] { display: none; }
.br-m-bot a { flex: 1; min-height: 50px; border-radius: 12px; border: 2px solid #16224a; color: #16224a; font-weight: 800; font-size: 0.92rem; display: flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; padding: 0 0.3rem; }
.br-m-bot a.main { background: #16224a; color: #fff; }
.br-m-bot a.off { visibility: hidden; }
.br-m .bv-bar.phone { position: relative; flex: none; }

/* ---------- IEC home hero: one row of four square buttons (WhatsApp, question, share Gospel, share Aprende) ---------- */
body.brand-iec .hero-sq-row { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.25rem; width: 100%; }
body.brand-iec .hero-sq {
  flex: 1 1 0; min-width: 0; max-width: 6.4rem; aspect-ratio: 1 / 1; border: 0; border-radius: 16px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  padding: 0.35rem 0.15rem; text-align: center; text-decoration: none; font: inherit; font-weight: 700; font-size: 0.64rem; line-height: 1.15; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 16px -10px rgba(0,0,0,0.6);
}
body.brand-iec .hero-sq svg { width: 26px; height: 26px; flex: none; }
body.brand-iec .hero-sq span { display: block; overflow-wrap: normal; hyphens: none; }
body.brand-iec .hero-sq:active { transform: scale(0.97); }
body.brand-iec .hero-sq-wa { background: #1d8f4e; }
body.brand-iec .hero-sq-ask { background: linear-gradient(180deg, #f7cd5c 0%, #dfa322 100%); color: #2a1c00; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 8px 16px -10px rgba(214,158,27,0.9); }
body.brand-iec .hero-sq-gospel { background: #fdf8ec; color: #1d2b57; }
body.brand-iec .hero-sq-kids { background: #3f7fd6; }
@media (min-width: 40rem) { body.brand-iec .hero-sq { font-size: 0.75rem; } body.brand-iec .hero-sq svg { width: 30px; height: 30px; } }

/* ---------- IEC footer: logo, ministry line and privacy link together in one compact block ---------- */
body.brand-iec footer.site-footer.brand-footer-compact {
  flex-direction: row; align-items: center; justify-content: center; gap: 0.75rem; text-align: left;
  padding: 1rem 0 0.5rem; margin-top: 0.25rem;
}
body.brand-iec footer.site-footer.brand-footer-compact img.brand-footer-logo { width: 2.9rem; height: 2.9rem; border-radius: 12px; padding: 0.2rem; flex: none; }
body.brand-iec footer.site-footer.brand-footer-compact .brand-footer-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
body.brand-iec footer.site-footer.brand-footer-compact .ministry-line { font-size: 0.8rem; max-width: 17rem; margin: 0; line-height: 1.3; }
body.brand-iec footer.site-footer.brand-footer-compact .footer-privacy-line { margin: 0; font-size: 0.72rem; }

/* ---------- Header: day/night button ---------- */
.mode-btn { width: 2.3rem; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
.mode-btn svg { width: 18px; height: 18px; }

/* =====================================================================
   IEC night mode (html.iec-dark, set by brands.js / the header's moon button).
   Deep navy background, warm cream text, gold accents; the header stays navy.
   ===================================================================== */
html.iec-dark { color-scheme: dark; }
html.iec-dark body.brand-iec {
  --color-background: #0d1224;
  --color-foreground: #ece5d3;
  --color-ink-rgb: 0,0,0;
  --color-surface: #161d36;
  --color-card: #172039;
  --color-card-foreground: #ece5d3;
  --color-muted: #222b49;
  --color-muted-foreground: #aab0c6;
  --color-primary: #3d5aa9;
  --color-primary-rgb: 61,90,169;
  --color-primary-foreground: #fdf8ec;
  --color-secondary: #222b49;
  --color-secondary-foreground: #ece5d3;
  --color-border: #2c3658;
  --color-input: #3a456b;
  --iec-gold-deep: #e2b44a;
  --gradient-primary: linear-gradient(155deg, #4262b5 0%, #26397a 100%);
  --gradient-card: linear-gradient(165deg, #1b2442 0%, #172039 60%, #141b33 100%);
  --shadow-border: 0 0 0 1px rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,0.35);
  --shadow-bevel: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 1px rgba(0,0,0,0.3), 0 8px 20px -8px rgba(0,0,0,0.6);
  background: radial-gradient(900px 420px at 50% -120px, rgba(244,198,78,0.08), transparent 70%), var(--color-background);
  color: var(--color-foreground);
}
/* Text that used the brand navy on a light page reads in cream/gold at night */
html.iec-dark body.brand-iec :is(h1, h2, h3, .page-header h1, .tile-title, .cta-title, .answers-title, .brand-section-title, .ib-jump-text strong, .wa-banner-text strong,
  .verse-card blockquote, .lib-title, .study-block-h, .br-m-h, .hy-m-title, .hy-t, .disc-card h3, .lib-open-text strong):not(.welcome-study *):not(.kids-page *) { color: #f1e6c8; }
html.iec-dark body.brand-iec :is(.btn-outline, .lib-btn.ghost, .disc-btn.ghost, .hy-btn.ghost, .disc-more, .disc-body a, .lib-stats b, .lib-cat, .disc-badge,
  .footer-privacy-line a, .ministry-line, .hy-grp, .hy-chip, .back-link) { color: #f0d995; }
html.iec-dark body.brand-iec :is(.btn-outline, .lib-btn.ghost, .disc-btn.ghost, .hy-btn.ghost, .hy-chip) { border-color: rgba(240,217,149,0.45); background: transparent; }
html.iec-dark body.brand-iec :is(.hy-chip.on, .lib-chip.on) { background: #d69e1b; border-color: #d69e1b; color: #1a1300; }
html.iec-dark body.brand-iec .lib-chip { background: var(--color-card); color: var(--color-foreground); border-color: var(--color-border); }
/* Light-colored boxes and inputs */
html.iec-dark body.brand-iec :is(input, textarea, select):not(.kids-page *):not(.welcome-study *) { background-color: #0f1630 !important; color: #ece5d3 !important; border-color: #3a456b !important; }
html.iec-dark body.brand-iec :is(input, textarea)::placeholder { color: #8189a3; }
html.iec-dark body.brand-iec :is(.hy-grp, .hy-grp:hover, .hy-size button, .hy-m-size button, .br-m-size button) { background: var(--color-card); }
html.iec-dark body.brand-iec .hy-num { background: #2f4a96; }
html.iec-dark body.brand-iec :is(.hy-disc, .lib-q-warn) { color: #e8d8ae; background: rgba(214,158,27,0.12); }
html.iec-dark body.brand-iec :is(.lib-ic, .disc-file-ic) { background: #e9e4d6; }
html.iec-dark body.brand-iec .disc-file { background: rgba(255,255,255,0.05); }
html.iec-dark body.brand-iec :is(.disc-tools, .disc-linkrow) { background: #222b49; }
html.iec-dark body.brand-iec .disc-editor { background: #0f1630; color: #ece5d3; }
html.iec-dark body.brand-iec .disc-clamp:after { background: linear-gradient(rgba(23,32,57,0), var(--color-card)); }
html.iec-dark body.brand-iec .bottom-nav { background: #0f1530; border-top-color: #2c3658; }
html.iec-dark body.brand-iec .bottom-nav a { color: #c9cde0; }
html.iec-dark body.brand-iec .bottom-nav a.active { color: #f0d995; }
html.iec-dark body.brand-iec .verse-card { background: var(--gradient-card); }
html.iec-dark body.brand-iec .ib-jump { background: rgba(214,158,27,0.1); color: var(--color-foreground); }
html.iec-dark body.brand-iec .wa-banner { background: rgba(29,143,78,0.14); }
html.iec-dark body.brand-iec footer.site-footer.brand-footer { border-top-color: #2c3658; }
/* Bible verses: highlights stay readable (dark text on the soft color) */
html.iec-dark body.brand-iec .bv:is(.hl-y, .hl-g, .hl-b, .hl-p) { color: #1d1a14; }
html.iec-dark body.brand-iec .bv:is(.hl-y, .hl-g, .hl-b, .hl-p) .bible-vnum { color: #7a5200; }
html.iec-dark body.brand-iec .bv.sel { background-color: rgba(214,158,27,0.22); }
html.iec-dark body.brand-iec .bible-vnum { color: #e2b44a; }
/* Phone reading pages (Bible chapter, hymn) */
html.iec-dark body.brand-iec :is(.br-m, .hy-m) { background: #0d1224; color: #ece5d3; }
html.iec-dark body.brand-iec :is(.br-m-top, .hy-m-top) { background: #070b1a; }
html.iec-dark body.brand-iec :is(.br-m-panel, .hy-m-panel, .hy-m-find, .br-m-bot, .hy-m-bot) { background: #141b33; border-color: #2c3658; }
html.iec-dark body.brand-iec :is(.br-m-bot a, .hy-m-bot a, .hy-m-bot button) { background: transparent; color: #f0d995; border-color: rgba(240,217,149,0.5); }
html.iec-dark body.brand-iec :is(.br-m-bot a.main, .hy-m-bot .main) { background: #d69e1b; color: #1a1300; border-color: #d69e1b; }
html.iec-dark body.brand-iec :is(.br-m-size, .hy-m-size) { border-color: #f0d995; }
html.iec-dark body.brand-iec :is(.br-m-size button, .hy-m-size button) { color: #f0d995; }
html.iec-dark body.brand-iec :is(.br-m-size button + button, .hy-m-size button + button) { border-left-color: #f0d995; }
html.iec-dark body.brand-iec .br-m-hint { color: #aab0c6; }
html.iec-dark body.brand-iec .br-m-tr { color: #e2b44a; }
html.iec-dark body.brand-iec .br-m-h span { color: #e2b44a; }
html.iec-dark body.brand-iec .hy-m-title .n { background: #d69e1b; color: #1a1300; }
html.iec-dark body.brand-iec .hy-m-vn { background: #2f4a96; color: #f3dca6; }
html.iec-dark body.brand-iec .hy-m-cat { color: #e2b44a; }
html.iec-dark body.brand-iec .hy-m-c { background: rgba(214,158,27,0.14); box-shadow: inset 0 0 0 1px rgba(214,158,27,0.35); }
html.iec-dark body.brand-iec .hy-m-c .hy-m-lines div { color: #f6e3ae; }
html.iec-dark body.brand-iec .hy-m-cl { color: #e2b44a; }
html.iec-dark body.brand-iec .hy-m-res a { background: #1b2442; }
html.iec-dark body.brand-iec .hy-m-res .s { color: #aab0c6; }
html.iec-dark body.brand-iec .hy-part.c { background: rgba(214,158,27,0.12); }
html.iec-dark body.brand-iec .hy-m-find input { border-color: #d69e1b !important; }

/* "A new version of the site is available" bar (app.js checkForUpdate) */
.update-bar {
  position: fixed; left: 50%; transform: translateX(-50%); top: calc(0.6rem + env(safe-area-inset-top)); z-index: 9800;
  display: flex; align-items: center; gap: 0.7rem; width: min(30rem, calc(100% - 20px));
  background: #16224a; color: #fff; border: 2px solid #d69e1b; border-radius: 14px; padding: 0.55rem 0.6rem 0.55rem 0.9rem;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35); font-size: 0.9rem; font-weight: 600;
}
.update-bar span { flex: 1; }
.update-bar button { flex: none; min-height: 40px; padding: 0 1rem; border: 0; border-radius: 999px; background: #d69e1b; color: #1a1300; font: inherit; font-weight: 800; cursor: pointer; }

html.iec-dark body.brand-iec .hy-search input { filter: none; background-blend-mode: normal; }
html.iec-dark body.brand-iec .hy-search { background: var(--color-background); }
html.iec-dark body.brand-iec .hy-search input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0d995' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 0.9rem 50% !important; background-size: 22px 22px !important; }

/* Bible page: other languages + offline together in one compact box */
.bible-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); border: 1px solid rgba(214,158,27,0.55); border-radius: 14px; overflow: hidden; background: rgba(214,158,27,0.08); }
.bt-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; min-height: 3.2rem; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bt-item + .bt-item { border-left: 1px solid rgba(214,158,27,0.45); }
.bt-item:hover { background: rgba(214,158,27,0.12); }
.bt-ic { font-size: 1.2rem; flex: none; }
.bt-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.bt-tx strong { font-size: 0.9rem; color: var(--color-primary); }
.bt-tx span { font-size: 0.76rem; color: var(--color-muted-foreground); }
html.iec-dark body.brand-iec .bt-tx strong { color: #f1e6c8; }

/* ---------- Centro de Juegos (js/games.js) ---------- */
.gm-page { --gm-gold: #c98e12; --gm-gold-soft: rgba(214,158,27,0.14); --gm-ok: #2f7d4f; --gm-bad: #b3412f; gap: 1rem; }
.gm-head h1 { font-family: var(--font-serif); font-size: 1.6rem; margin: 0; color: var(--color-primary); }
.gm-head p { margin: .25rem 0 0; color: var(--color-muted-foreground); font-size: .92rem; }
.gm-hero { text-align: center; padding: 1.4rem 1rem 1.2rem; border-radius: var(--radius-xl); color: #fdf8ec;
  background: radial-gradient(circle at 50% 0%, rgba(255,214,102,0.28), transparent 60%), linear-gradient(160deg, #26397a 0%, #141f45 100%); }
.gm-hero-ic { display: block; color: #f0c65a; font-size: 1.6rem; line-height: 1; }
.gm-hero h1 { font-family: var(--font-serif); margin: .35rem 0 .2rem; font-size: 1.75rem; color: #fff; }
.gm-hero p { margin: 0; color: #e4dcc6; }
.gm-hero .gm-hero-v { margin-top: .7rem; font-family: var(--font-serif); font-style: italic; font-size: .95rem; color: #f5e7bd; }
.gm-hero-v span { display: block; font-style: normal; font-family: var(--font-sans); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #d9b75c; margin-top: .2rem; }
.gm-feature { display: flex; align-items: center; gap: .85rem; padding: 1rem; border-radius: var(--radius-lg); text-decoration: none; color: inherit;
  background: linear-gradient(150deg, #fff7df 0%, #f6e3ad 100%); border: 1px solid #e2c070; box-shadow: var(--shadow-border); }
.gm-feature-ic { font-size: 2.2rem; line-height: 1; flex: none; }
.gm-feature-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.gm-feature-txt strong { font-family: var(--font-serif); font-size: 1.2rem; color: #1d2b57; }
.gm-feature-txt span { font-size: .85rem; color: #5b4a22; }
.gm-go { margin-left: auto; font-size: 1.8rem; color: var(--gm-gold); }
.gm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
@media (min-width: 720px) { .gm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gm-card { display: flex; flex-direction: column; gap: .25rem; padding: .9rem .8rem; border-radius: var(--radius-lg); text-decoration: none; color: inherit;
  background: var(--color-card); box-shadow: var(--shadow-border); border-top: 3px solid var(--gm-gold); }
.gm-card:hover { box-shadow: var(--shadow-border-hover); }
.gm-card-ic { font-size: 1.7rem; line-height: 1.1; }
.gm-card-t { font-weight: 700; color: var(--color-primary); font-size: .98rem; line-height: 1.2; }
.gm-card-d { font-size: .78rem; color: var(--color-muted-foreground); line-height: 1.3; flex: 1; }
.gm-stars { color: rgba(var(--color-ink-rgb),0.18); letter-spacing: .05em; font-size: .95rem; }
.gm-stars .on { color: #e2a915; }
.gm-stars.big { font-size: 2.2rem; }
.gm-foot { font-size: .78rem; color: var(--color-muted-foreground); text-align: center; margin: 0; }
.gm-note { padding: .8rem 1rem; border-radius: var(--radius-md); background: var(--gm-gold-soft); color: var(--color-foreground); }
.gm-loading { color: var(--color-muted-foreground); text-align: center; }
.gm-body { display: flex; flex-direction: column; gap: .9rem; }
.gm-bar { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .85rem; color: var(--color-muted-foreground); }
.gm-ref { font-weight: 700; color: var(--gm-gold); }
.gm-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 46px; padding: .6rem 1.1rem; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; text-decoration: none; border: 2px solid transparent; }
.gm-btn.primary { background: linear-gradient(155deg, #2e4382 0%, #17224a 100%); color: #fdf8ec; }
.gm-btn.ghost { background: transparent; color: var(--color-primary); border-color: rgba(var(--color-primary-rgb),0.35); }
.gm-link { background: none; border: 0; color: var(--color-primary); text-decoration: underline; font: inherit; font-size: .85rem; cursor: pointer; padding: .3rem; }
.gm-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.gm-levels { display: grid; gap: .7rem; }
.gm-done, .gm-reveal { text-align: center; display: flex; flex-direction: column; gap: .6rem; align-items: center; padding: 1rem; border-radius: var(--radius-lg); background: var(--color-card); box-shadow: var(--shadow-border); }
.gm-done h2, .gm-reveal h2 { margin: 0; font-family: var(--font-serif); color: var(--color-primary); font-size: 1.3rem; }
.gm-done p, .gm-reveal p { margin: 0; }
.gm-verse { font-family: var(--font-serif); font-size: 1.12rem; line-height: 1.5; }
/* tap-in-order puzzle */
.gm-slots { min-height: 64px; padding: .6rem; border-radius: var(--radius-md); border: 2px dashed rgba(var(--color-primary-rgb),0.3); display: flex; flex-wrap: wrap; gap: .4rem; align-content: flex-start; background: var(--color-card); }
.gm-slots-hint { color: var(--color-muted-foreground); font-size: .88rem; align-self: center; }
.gm-pool { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
.gm-slots.rows, .gm-pool.rows { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.gm-chip { font: inherit; font-size: 1rem; padding: .55rem .8rem; border-radius: 10px; border: 1px solid #e2c070; background: #fff8e4; color: #2a2412; cursor: pointer; min-height: 44px; text-align: left; line-height: 1.3; }
.gm-chip-n { display: inline-flex; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #1d2b57; color: #fff; font-size: .78rem; align-items: center; justify-content: center; margin-right: .5rem; }
.gm-pool .gm-chip-n { display: none; }
.gm-chip.ok { background: #e3f3e8; border-color: var(--gm-ok); }
.gm-chip.bad { background: #fbe4df; border-color: var(--gm-bad); animation: gm-shake .4s; }
@keyframes gm-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* memorama */
.gm-memo { display: grid; gap: .5rem; }
.gm-memo.cols3 { grid-template-columns: repeat(3, 1fr); max-width: 360px; margin: 0 auto; width: 100%; }
.gm-memo.cols4 { grid-template-columns: repeat(4, 1fr); max-width: 460px; margin: 0 auto; width: 100%; }
.gm-mc { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; border: 0; padding: .2rem; cursor: pointer; font: inherit;
  background: linear-gradient(155deg, #2e4382 0%, #17224a 100%); color: #f0c65a; box-shadow: var(--shadow-border); transition: transform .25s; }
.gm-mc-back { font-size: 1.6rem; }
.gm-mc-face { display: none; font-weight: 700; font-size: .82rem; line-height: 1.15; color: #1d2b57; word-break: break-word; }
.gm-mc-face.pic { font-size: 2rem; }
.gm-mc.up { background: #fff8e4; transform: rotateY(0deg) scale(1.02); box-shadow: 0 0 0 2px #e2c070; }
.gm-mc.up .gm-mc-back { display: none; }
.gm-mc.up .gm-mc-face { display: block; }
.gm-mc.done { background: #e3f3e8; box-shadow: 0 0 0 2px var(--gm-ok); }
/* sopa de letras */
.gm-sopa { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; width: 100%; max-width: 440px; margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none;
  background: #e2c070; padding: 2px; border-radius: 10px; }
.gm-sc { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: #fffaf0; color: #1d2b57; font-weight: 700; font-size: clamp(.85rem, 4.2vw, 1.15rem); cursor: pointer; }
.gm-sc:first-child { border-top-left-radius: 8px; }
.gm-sc.sel { background: #f6d77a; }
.gm-sc.found { color: #fff; }
.gm-sc.f1 { background: #3d7fc4; } .gm-sc.f2 { background: #3f9a55; } .gm-sc.f3 { background: #b8773f; }
.gm-sc.f4 { background: #7a5bb8; } .gm-sc.f5 { background: #c6423a; } .gm-sc.f6 { background: #2a8a7f; }
.gm-sc.found.sel { background: #f6d77a; color: #1d2b57; }
.gm-words { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem .8rem; justify-content: center; font-weight: 700; font-size: .9rem; color: var(--color-primary); }
.gm-words li.got { text-decoration: line-through; opacity: .45; }
/* candle */
.gm-vela { display: flex; gap: 1rem; align-items: center; }
.gm-vela { gap: .6rem; }
.gm-vela-art { flex: none; width: 66px; }
.gm-candle { width: 66px; height: auto; display: block; }
.gm-flame { transform-origin: 40px 60%; animation: gm-flick 1.6s ease-in-out infinite alternate; }
@keyframes gm-flick { from { transform: scaleY(1) skewX(0); } to { transform: scaleY(1.06) skewX(2deg); } }
.gm-smoke { animation: gm-smoke 2s ease-out forwards; }
@keyframes gm-smoke { from { opacity: .9; } to { opacity: 0; transform: translateY(-10px); } }
.gm-vela-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.gm-hint { margin: 0; font-size: .95rem; }
.gm-word { display: flex; flex-wrap: nowrap; gap: .2rem; }
.gm-word span { flex: 1 1 0; min-width: 0; max-width: 1.9rem; height: 2.2rem; border-bottom: 3px solid #1d2b57; display: flex; align-items: flex-end; justify-content: center; font-weight: 800; font-size: clamp(.9rem, 4.6vw, 1.3rem); color: var(--color-primary); }
.gm-word span.miss { color: var(--gm-bad); }
.gm-left { margin: 0; font-size: .82rem; color: var(--color-muted-foreground); }
.gm-kb { display: grid; grid-template-columns: repeat(9, 1fr); gap: .3rem; max-width: 460px; margin: 0 auto; width: 100%; }
.gm-kb button { min-height: 42px; border-radius: 8px; border: 1px solid rgba(var(--color-primary-rgb),0.25); background: var(--color-card); color: var(--color-primary); font: inherit; font-weight: 700; cursor: pointer; padding: 0; }
.gm-kb button.ok { background: #e3f3e8; border-color: var(--gm-ok); color: var(--gm-ok); }
.gm-kb button.bad { background: #fbe4df; border-color: var(--gm-bad); color: var(--gm-bad); opacity: .7; }
/* quién soy / trivia options */
.gm-clues { margin: 0; padding: .8rem 1rem .8rem 2.2rem; background: #fff8e4; border-left: 4px solid #d69e1b; border-radius: 10px; color: #2a2412; display: flex; flex-direction: column; gap: .35rem; font-size: 1rem; }
.gm-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.gm-opt { min-height: 54px; padding: .55rem .7rem; border-radius: 12px; border: 2px solid rgba(var(--color-primary-rgb),0.22); background: var(--color-card); color: var(--color-foreground);
  font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; line-height: 1.25; }
.gm-opt:not(:disabled):hover { border-color: #d69e1b; }
.gm-opt.picked { border-color: #d69e1b; }
.gm-opt.ok { background: #e3f3e8; border-color: var(--gm-ok); color: #174a2c; }
.gm-opt.bad { background: #fbe4df; border-color: var(--gm-bad); color: #7a2618; }
.gm-opt:disabled { cursor: default; }
@media (max-width: 380px) { .gm-opts { grid-template-columns: 1fr; } }
/* antiguo o nuevo */
.gm-book { text-align: center; padding: 1.6rem 1rem; border-radius: var(--radius-lg); background: #fff8e4; border: 2px solid #e2c070; display: flex; flex-direction: column; gap: .4rem; }
.gm-book-n { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: #1d2b57; }
.gm-book-fb { min-height: 1.3em; font-weight: 700; color: #5b4a22; }
.gm-book.ok { background: #e3f3e8; border-color: var(--gm-ok); }
.gm-book.bad { background: #fbe4df; border-color: var(--gm-bad); }
.gm-tt { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.gm-tt .gm-btn { border-radius: 14px; min-height: 64px; color: #fff; }
.gm-tt .at { background: linear-gradient(155deg, #b8773f 0%, #74411a 100%); }
.gm-tt .nt { background: linear-gradient(155deg, #2e4382 0%, #17224a 100%); }
/* trivia */
.gm-tlevels { display: grid; gap: .6rem; }
.gm-tl { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: .85rem 1rem; border-radius: var(--radius-lg); border: 0; cursor: pointer; font: inherit; text-align: left; color: #fff; }
.gm-tl strong { font-size: 1.15rem; }
.gm-tl span { font-size: .85rem; opacity: .9; }
.gm-tl em { font-style: normal; font-size: .78rem; background: rgba(255,255,255,0.18); padding: .1rem .5rem; border-radius: 999px; margin-top: .2rem; }
.gm-tl.l1 { background: linear-gradient(155deg, #3f9a55 0%, #1e5e30 100%); }
.gm-tl.l2 { background: linear-gradient(155deg, #2e4382 0%, #17224a 100%); }
.gm-tl.l3 { background: linear-gradient(155deg, #a83a32 0%, #6b1a16 100%); }
.gm-board { padding: 1rem; border-radius: var(--radius-lg); background: var(--color-card); box-shadow: var(--shadow-border); border-top: 3px solid #d69e1b; display: flex; flex-direction: column; gap: .6rem; }
.gm-board h2 { margin: 0; font-family: var(--font-serif); font-size: 1.25rem; color: var(--color-primary); }
.gm-tabs { display: flex; gap: .3rem; flex-wrap: wrap; }
.gm-tabs button { flex: 1; min-height: 38px; border-radius: 999px; border: 1px solid rgba(var(--color-primary-rgb),0.25); background: transparent; color: var(--color-primary); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.gm-tabs button.on { background: #1d2b57; border-color: #1d2b57; color: #fff; }
.gm-tabs.pd button.on { background: #d69e1b; border-color: #d69e1b; color: #1a1300; }
.gm-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.gm-rank li { display: flex; align-items: center; gap: .6rem; padding: .5rem .2rem; border-bottom: 1px solid var(--color-border); }
.gm-rank li:last-child { border-bottom: 0; }
.gm-rk { width: 1.8rem; text-align: center; font-weight: 700; color: var(--color-muted-foreground); flex: none; }
.gm-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gm-sc2 { font-weight: 800; color: var(--gm-gold); }
.gm-del { border: 0; background: none; color: var(--gm-bad); cursor: pointer; font-size: 1rem; padding: .2rem .4rem; }
.gm-rank .gm-empty, .gm-rank .gm-loading { justify-content: center; color: var(--color-muted-foreground); font-size: .88rem; text-align: center; }
.gm-timer { height: 6px; border-radius: 99px; background: rgba(var(--color-primary-rgb),0.12); overflow: hidden; }
.gm-timer span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #d69e1b, #f0c65a); }
.gm-question { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.35; margin: 0; color: var(--color-foreground); }
.gm-fb { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; justify-content: center; text-align: center; min-height: 1.5em; }
.gm-fb p { margin: 0; width: 100%; }
.gm-good { color: var(--gm-ok); }
.gm-big { font-size: 3rem; font-weight: 800; color: var(--gm-gold); line-height: 1; }
.gm-sub { color: var(--color-muted-foreground); font-size: .9rem; }
.gm-save { display: flex; flex-direction: column; gap: .4rem; width: 100%; max-width: 340px; text-align: left; }
.gm-save label { font-weight: 700; font-size: .9rem; }
.gm-save input { min-height: 46px; border-radius: 10px; border: 1px solid var(--color-input); padding: 0 .8rem; font: inherit; font-size: 1rem; }
.gm-save .gm-foot { text-align: left; }
.gm-err { color: var(--gm-bad); font-size: .85rem; min-height: 0; margin: 0; }
.gm-saved { padding: .7rem 1rem; border-radius: var(--radius-md); background: #e3f3e8; color: #174a2c; font-weight: 600; margin: 0; }
/* night mode */
html.iec-dark body.brand-iec .gm-feature { background: linear-gradient(150deg, #2c2a1c 0%, #3a3217 100%); border-color: #6b5520; }
html.iec-dark body.brand-iec .gm-feature-txt strong { color: #f5e7bd; }
html.iec-dark body.brand-iec .gm-feature-txt span { color: #d9ccaa; }
html.iec-dark body.brand-iec :is(.gm-card-t, .gm-head h1, .gm-done h2, .gm-reveal h2, .gm-board h2, .gm-words, .gm-word span) { color: #f1e6c8; }
html.iec-dark body.brand-iec .gm-word span { border-bottom-color: #d9b75c; }
html.iec-dark body.brand-iec .gm-stars { color: rgba(255,255,255,0.18); }
html.iec-dark body.brand-iec .gm-stars .on { color: #f0c65a; }
html.iec-dark body.brand-iec :is(.gm-chip, .gm-clues, .gm-book, .gm-sc, .gm-mc.up) { background: #26304f; color: #f1e6c8; border-color: #6b5520; }
html.iec-dark body.brand-iec :is(.gm-mc-face, .gm-book-n) { color: #f1e6c8; }
html.iec-dark body.brand-iec .gm-book-fb { color: #e8d8ae; }
html.iec-dark body.brand-iec .gm-sopa { background: #6b5520; }
html.iec-dark body.brand-iec .gm-sc.found { color: #fff; }
html.iec-dark body.brand-iec .gm-sc.sel { background: #d69e1b; color: #1a1300; }
html.iec-dark body.brand-iec :is(.gm-chip.ok, .gm-opt.ok, .gm-book.ok, .gm-mc.done, .gm-kb button.ok) { background: #1f4a31; color: #d8f2e0; border-color: #3f9a55; }
html.iec-dark body.brand-iec :is(.gm-chip.bad, .gm-opt.bad, .gm-book.bad, .gm-kb button.bad) { background: #4d231d; color: #f6d3cb; border-color: #c6423a; }
html.iec-dark body.brand-iec :is(.gm-btn.ghost, .gm-link, .gm-kb button, .gm-tabs button) { color: #f1e6c8; border-color: rgba(240,217,149,0.4); }
html.iec-dark body.brand-iec .gm-btn.primary { background: linear-gradient(155deg, #4262b5 0%, #26397a 100%); }
html.iec-dark body.brand-iec .gm-tabs.lv button.on { background: #3d5aa9; border-color: #3d5aa9; }
html.iec-dark body.brand-iec .gm-tabs.pd button.on { color: #1a1300; }
html.iec-dark body.brand-iec .gm-chip-n { background: #d69e1b; color: #1a1300; }
html.iec-dark body.brand-iec .gm-saved { background: #1f4a31; color: #d8f2e0; }

/* Centro de Juegos illustrations (brand gamesArt) */
.gm-head.has-art { display: flex; align-items: center; gap: .8rem; }
.gm-head-art { width: 96px; height: 72px; object-fit: cover; border-radius: 12px; flex: none; box-shadow: var(--shadow-border); border: 2px solid #e2c070; }
.gm-card.has-art { padding: 0 0 .8rem; overflow: hidden; }
.gm-card.has-art > :not(.gm-card-art) { padding: 0 .8rem; }
.gm-card-art { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 2px solid #e2c070; margin-bottom: .35rem; background: #cdeefb; }
.gm-feature-art { width: 96px; height: 72px; object-fit: cover; border-radius: 12px; flex: none; border: 2px solid #e2c070; }
html.iec-dark body.brand-iec :is(.gm-card-art, .gm-head-art, .gm-feature-art) { border-color: #6b5520; filter: brightness(.92); }

/* ---------- Hymn corrections (js/hymnal.js, site admin only) ---------- */
.hy-adm { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.hy-adm-panel { flex-direction: column; align-items: stretch; padding: .8rem; border-radius: 14px; border: 1.5px dashed #d69e1b; background: rgba(214,158,27,0.07); }
.hy-adm-h { font-weight: 800; color: var(--color-primary); }
.hy-adm-h span { font-weight: 500; font-size: .8rem; color: var(--color-muted-foreground); }
.hy-adm-bar { display: flex; align-items: center; gap: .6rem; font-size: .88rem; }
.hy-adm-prog { flex: 1; height: 8px; border-radius: 99px; background: rgba(var(--color-primary-rgb),0.12); overflow: hidden; }
.hy-adm-prog i { display: block; height: 100%; background: linear-gradient(90deg, #3f9a55, #7cc242); }
.hy-adm-panel .hy-cats { margin: 0; }
.hy-adm-miss { margin: 0; font-size: .85rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.hy-adm-num { border: 1px solid #d69e1b; background: transparent; color: var(--color-primary); border-radius: 8px; padding: .1rem .5rem; font: inherit; font-weight: 700; cursor: pointer; }
.hy-adm-panel > .hy-btn { align-self: flex-start; }
.hy-adm-hymn { margin: .2rem 0 .6rem; }
.hy-adm-why { margin: 0; width: 100%; font-size: .8rem; color: #9a5b00; }
.hy-adm-ok { color: #2f7d4f; font-weight: 800; }
.hy-btn.ok { background: #e3f3e8; color: #174a2c; border: 1.5px solid #2f7d4f; }
html.hy-ed-open, html.hy-ed-open body { overflow: hidden; }
.hy-ed-ov { position: fixed; inset: 0; z-index: 9800; background: rgba(10,14,30,0.55); display: flex; align-items: flex-start; justify-content: center; padding: 3vh 12px; overflow-y: auto; }
.hy-ed { width: 100%; max-width: 640px; background: var(--color-card, #fff); color: var(--color-foreground); border-radius: 16px; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
.hy-ed h2 { margin: 0; font-family: var(--font-serif); font-size: 1.3rem; color: var(--color-primary); }
.hy-ed label { display: flex; flex-direction: column; gap: .25rem; font-weight: 700; font-size: .85rem; }
.hy-ed-row { display: flex; gap: .6rem; }
.hy-ed-n { width: 6.5rem; flex: none; }
.hy-ed-t { flex: 1; min-width: 0; }
.hy-ed input, .hy-ed textarea { font: inherit; font-weight: 400; font-size: 1rem; border: 1px solid var(--color-input); border-radius: 10px; padding: .55rem .65rem; background: var(--color-surface, #fff); color: var(--color-foreground); width: 100%; box-sizing: border-box; }
.hy-ed textarea { min-height: 42vh; line-height: 1.45; resize: vertical; }
.hy-ed-help { margin: 0; font-size: .8rem; color: var(--color-muted-foreground); }
.hy-ed-sum { margin: 0; font-size: .85rem; font-weight: 700; color: #2f7d4f; min-height: 1em; }
.hy-ed-err { margin: 0; color: #b3412f; font-size: .88rem; font-weight: 600; min-height: 0; }
.hy-ed-btns { display: flex; gap: .5rem; }
.hy-ed-btns .hy-btn { flex: 1; min-height: 46px; }
.hy-ed-more { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.hy-link { background: none; border: 0; color: var(--color-primary); text-decoration: underline; font: inherit; font-size: .85rem; cursor: pointer; padding: .3rem 0; }
.hy-link.danger { color: #b3412f; margin-left: auto; }
@media (max-width: 600px) { .hy-ed-ov { padding: 0; } .hy-ed { border-radius: 0; min-height: 100%; } .hy-ed textarea { min-height: 50vh; } }
html.iec-dark body.brand-iec .hy-adm-h, html.iec-dark body.brand-iec .hy-ed h2, html.iec-dark body.brand-iec .hy-adm-num, html.iec-dark body.brand-iec .hy-link:not(.danger) { color: #f1e6c8; }
html.iec-dark body.brand-iec .hy-adm-why { color: #f0c65a; }
html.iec-dark body.brand-iec .hy-btn.ok { background: #1f4a31; color: #d8f2e0; border-color: #3f9a55; }
html.iec-dark body.brand-iec .hy-ed-sum { color: #8fd6a4; }
.hy-adm-panel { min-width: 0; }
.hy-adm-panel .hy-cats { flex-wrap: wrap; overflow: visible; white-space: normal; }
.hy-adm-bar { flex-wrap: wrap; }
.hy-adm-bar b { white-space: nowrap; }
.hy-adm-prog { min-width: 120px; }

/* ---------- Juego en vivo (js/live.js) ---------- */
.gm-feature.live { background: linear-gradient(150deg, #e7f0ff 0%, #c9dbf7 100%); border-color: #8fb0e3; }
html.iec-dark body.brand-iec .gm-feature.live { background: linear-gradient(150deg, #1c2a4f 0%, #22346a 100%); border-color: #3d5aa9; }
.lv-box { padding: 1rem; border-radius: var(--radius-lg); background: var(--color-card); box-shadow: var(--shadow-border); display: flex; flex-direction: column; gap: .6rem; }
.lv-box h2 { margin: 0; font-family: var(--font-serif); font-size: 1.25rem; color: var(--color-primary); }
.lv-box h3 { margin: .4rem 0 .1rem; font-size: 1rem; color: var(--color-primary); }
.lv-box h3 small { font-weight: 400; font-size: .75rem; color: var(--color-muted-foreground); }
.lv-join { border-top: 3px solid #3f9a55; }
.lv-host { border-top: 3px solid #d69e1b; }
.lv-row { display: flex; gap: .5rem; }
.lv-code { flex: 1; min-width: 0; min-height: 52px; font: inherit; font-size: 1.6rem; font-weight: 800; letter-spacing: .25em; text-align: center; border-radius: 12px; border: 2px solid var(--color-input); }
.lv-note { margin: 0; font-size: .88rem; color: var(--color-muted-foreground); }
.lv-opts { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.lv-opts .gm-tabs { flex: 1 1 220px; }
.lv-n { display: flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 600; }
.lv-n select, .lv-edmeta select { font: inherit; min-height: 38px; border-radius: 8px; border: 1px solid var(--color-input); padding: 0 .4rem; background: var(--color-surface); color: var(--color-foreground); }
.lv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.lv-list li { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: 12px; border: 1px solid var(--color-border); }
.lv-list .gm-btn { min-height: 38px; padding: .3rem .8rem; font-size: .85rem; }
.lv-qt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lv-qt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-qt small { color: var(--color-muted-foreground); font-size: .75rem; }
.lv-new { align-self: flex-start; }
.lv-msg { text-align: center; align-items: center; padding: 2rem 1rem; }
.lv-msg p { margin: 0; }
.lv-pulse { font-size: 2rem; color: #d69e1b; animation: lv-pulse 1.6s ease-in-out infinite; }
@keyframes lv-pulse { 50% { transform: scale(1.25); opacity: .6; } }
.lv-tt { font-size: .85rem; color: var(--color-muted-foreground); }
.lv-joinform input { min-height: 48px; border-radius: 10px; border: 1px solid var(--color-input); padding: 0 .8rem; font: inherit; font-size: 1.05rem; }
.lv-joinform label { font-weight: 700; }
.lv-qhead { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; color: var(--color-muted-foreground); }
.lv-cd { min-width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #1d2b57; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; }
.lv-qtext { font-family: var(--font-serif); font-size: 1.2rem; margin: .2rem 0 .4rem; color: var(--color-foreground); }
.lv-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.lv-btns button { min-height: 120px; border: 0; border-radius: 16px; color: #fff; font: inherit; font-weight: 700; font-size: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; padding: .6rem; cursor: pointer; box-shadow: inset 0 -5px 0 rgba(0,0,0,0.22); line-height: 1.2; }
.lv-btns button:disabled { opacity: .35; }
.lv-btns button.picked { opacity: 1; outline: 4px solid #1d2b57; outline-offset: 2px; }
.lv-btns .lv-sh { font-size: 1.8rem; line-height: 1; }
.lv-res { text-align: center; align-items: center; padding: 1.6rem 1rem; }
.lv-res.ok { background: #e3f3e8; }
.lv-res.bad { background: #fbe4df; }
.lv-res h2 { font-size: 1.7rem; }
.lv-res.ok h2 { color: #1e6b3c; } .lv-res.bad h2 { color: #9a2f22; }
.lv-res p { margin: 0; }
.lv-pts { font-size: 2.2rem; font-weight: 800; color: #1e6b3c; }
.lv-rank { font-size: .95rem; }
.lv-big { font-size: 1.6rem; font-weight: 800; color: var(--color-primary); }
.lv-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; width: 100%; max-width: 420px; }
.lv-top li { display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem; border-radius: 10px; background: rgba(var(--color-primary-rgb),0.06); }
.lv-top li span { width: 1.8rem; text-align: center; font-weight: 800; }
.lv-top li b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-top li em { font-style: normal; font-weight: 800; color: #c98e12; }
/* host / big screen */
.lv-hostpage { background: #101a3a; color: #fff; border-radius: 18px; overflow: hidden; min-height: 78vh; display: flex; flex-direction: column; }
.lv-hostpage:fullscreen { border-radius: 0; min-height: 100vh; }
.lv-hbar { display: flex; align-items: center; gap: .8rem; padding: .5rem .9rem; background: rgba(255,255,255,0.06); font-size: .9rem; }
.lv-hback { color: #f0c65a; text-decoration: none; font-weight: 700; }
.lv-htitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d8def0; }
.lv-fs { background: none; border: 1px solid rgba(255,255,255,0.35); color: #fff; border-radius: 8px; padding: .25rem .6rem; font: inherit; font-size: .8rem; cursor: pointer; }
.lv-stage { flex: 1; display: flex; flex-direction: column; padding: clamp(.8rem, 2.5vw, 2rem); }
.lv-stage .gm-foot { color: #aeb7d3; }
.lv-hmsg { margin: auto; text-align: center; }
.lv-lobby { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.5rem; align-items: start; }
@media (max-width: 760px) { .lv-lobby { grid-template-columns: 1fr; } }
.lv-joininfo { text-align: center; background: #fff; color: #1d2b57; border-radius: 16px; padding: 1rem; }
.lv-joininfo p { margin: .2rem 0; }
.lv-qr { width: min(240px, 60vw); image-rendering: pixelated; }
.lv-url { font-size: .85rem; color: #4a5575; }
.lv-codelbl { font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: #8a6a14; }
.lv-bigcode { font-size: clamp(3rem, 9vw, 5.5rem); font-weight: 900; letter-spacing: .12em; line-height: 1; color: #1d2b57; }
.lv-players h2 { margin: 0 0 .6rem; font-family: var(--font-serif); color: #fff; }
.lv-chips { display: flex; flex-wrap: wrap; gap: .45rem; min-height: 60px; margin-bottom: 1rem; }
.lv-chip { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: .4rem .9rem; font: inherit; font-weight: 700; font-size: clamp(.9rem, 1.6vw, 1.15rem); cursor: pointer; animation: lv-in .35s ease-out; }
@keyframes lv-in { from { transform: scale(.6); opacity: 0; } }
.lv-wait { color: #aeb7d3; }
.lv-start { font-size: 1.15rem; min-height: 56px; padding: .6rem 1.6rem; background: linear-gradient(155deg, #3f9a55 0%, #1e5e30 100%) !important; }
.lv-hq { display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.lv-hqtop { display: flex; justify-content: space-between; gap: 1rem; color: #cfd6ec; font-size: clamp(.9rem, 1.5vw, 1.15rem); }
.lv-ref { color: #f0c65a; font-weight: 700; }
.lv-hqtext { margin: 0; text-align: center; font-family: var(--font-serif); font-size: clamp(1.4rem, 3.4vw, 2.6rem); line-height: 1.2; background: #fff; color: #1d2b57; border-radius: 14px; padding: .8rem 1rem; }
.lv-hmid { display: flex; justify-content: center; }
.lv-ring { width: clamp(70px, 9vw, 110px); height: clamp(70px, 9vw, 110px); border-radius: 50%; background: #d69e1b; display: flex; align-items: center; justify-content: center; }
.lv-ring .lv-cd { background: none; font-size: clamp(1.8rem, 4vw, 3rem); width: auto; height: auto; }
.lv-hans { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.lv-ha { position: relative; border-radius: 14px; padding: clamp(.7rem, 1.6vw, 1.2rem) 1rem; display: flex; align-items: center; gap: .8rem; font-weight: 700; font-size: clamp(1rem, 2.2vw, 1.7rem); min-height: clamp(64px, 10vh, 110px); box-shadow: inset 0 -6px 0 rgba(0,0,0,0.2); transition: opacity .3s; }
.lv-ha .lv-sh { font-size: 1.4em; }
.lv-ha .lv-ht { flex: 1; min-width: 0; }
.lv-ha.dim { opacity: .35; }
.lv-ha.right { outline: 5px solid #fff; }
.lv-check { font-size: 1.6em; }
.lv-cnt { display: flex; align-items: center; gap: .4rem; width: 28%; min-width: 70px; }
.lv-cnt i { display: block; height: 12px; border-radius: 6px; background: rgba(255,255,255,0.85); min-width: 4px; }
.lv-hact { display: flex; justify-content: center; }
.lv-hact .gm-btn.ghost, .lv-hend .gm-btn.ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
.lv-hbottom { display: flex; gap: 1rem; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.lv-htop { flex: 1; min-width: 240px; }
.lv-htop h3 { margin: 0 0 .4rem; color: #f0c65a; }
.lv-htop .lv-top li { background: rgba(255,255,255,0.1); font-size: clamp(.95rem, 1.6vw, 1.2rem); }
.lv-next { font-size: 1.1rem; min-height: 56px; }
.lv-hend { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.lv-hend h2 { margin: 0; font-family: var(--font-serif); font-size: clamp(1.8rem, 4vw, 3rem); color: #f0c65a; }
.lv-podium { display: flex; align-items: flex-end; gap: .8rem; }
.lv-pod { width: clamp(90px, 16vw, 180px); display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.lv-pod b { font-size: clamp(1rem, 2vw, 1.5rem); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-pod em { font-style: normal; color: #f0c65a; font-weight: 800; }
.lv-block { width: 100%; border-radius: 10px 10px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: .4rem; font-size: 2rem; font-weight: 900; color: #fff; }
.lv-pod.p1 .lv-block { height: 150px; background: #d69e1b; }
.lv-pod.p2 .lv-block { height: 105px; background: #9fb3c8; }
.lv-pod.p3 .lv-block { height: 75px; background: #c47a3f; }
.lv-rest { max-width: 420px; }
.lv-rest li { background: rgba(255,255,255,0.1); }
/* quiz writer */
.lv-ed { display: flex; flex-direction: column; gap: .8rem; }
.lv-ed label { display: flex; flex-direction: column; gap: .25rem; font-weight: 700; font-size: .88rem; }
.lv-ed input[type=text], .lv-ed textarea, .lv-edt input, .lv-edr { font: inherit; font-weight: 400; font-size: 1rem; border: 1px solid var(--color-input); border-radius: 10px; padding: .5rem .6rem; background: var(--color-surface); color: var(--color-foreground); width: 100%; box-sizing: border-box; }
.lv-edqs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.lv-edq { padding: .8rem; border-radius: var(--radius-lg); background: var(--color-card); box-shadow: var(--shadow-border); border-left: 4px solid #d69e1b; display: flex; flex-direction: column; gap: .5rem; }
.lv-edqh { display: flex; justify-content: space-between; align-items: center; color: var(--color-primary); }
.lv-edos { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
@media (max-width: 520px) { .lv-edos { grid-template-columns: 1fr; } }
.lv-edo { flex-direction: row !important; align-items: center; gap: .35rem !important; padding: .25rem .35rem; border-radius: 10px; background: var(--c); }
.lv-edo .lv-sh { color: #fff; font-size: 1rem; width: 1.2rem; text-align: center; }
.lv-edo input[type=radio] { width: 22px; height: 22px; accent-color: #fff; flex: none; margin: 0; }
.lv-edo input[type=text] { border: 0; }
.lv-edhint { margin: 0; font-size: .75rem; color: var(--color-muted-foreground); }
.lv-edmeta { display: flex; gap: .6rem; flex-wrap: wrap; }
.lv-edmeta label { flex-direction: row; align-items: center; gap: .35rem; font-weight: 600; }
.lv-edmeta .lv-edr { width: 11rem; }
.lv-feat { flex-direction: row !important; align-items: center; gap: .5rem !important; font-weight: 600 !important; }
.lv-ed .hy-link.danger { align-self: flex-end; }
html.iec-dark body.brand-iec :is(.lv-box h2, .lv-box h3, .lv-big, .lv-edqh) { color: #f1e6c8; }
html.iec-dark body.brand-iec .lv-res.ok { background: #1f4a31; } html.iec-dark body.brand-iec .lv-res.bad { background: #4d231d; }
html.iec-dark body.brand-iec .lv-res.ok h2, html.iec-dark body.brand-iec .lv-pts { color: #8fd6a4; } html.iec-dark body.brand-iec .lv-res.bad h2 { color: #f6b1a4; }
html.iec-dark body.brand-iec .lv-hostpage { background: #0a1230; }
html.iec-dark body.brand-iec .lv-edo input[type=text] { background-color: rgba(0,0,0,0.25) !important; border: 0 !important; }
.lv-hostpage { width: calc(100vw - 24px); max-width: 1500px; position: relative; left: 50%; transform: translateX(-50%); }
.lv-hostpage:fullscreen { width: 100vw; max-width: none; left: 0; transform: none; }
body:has(.lv-hostpage) { overflow-x: clip; }
.lv-bigcode { font-size: clamp(2.4rem, 6.5vw, 5.5rem); letter-spacing: .06em; }
.lv-joininfo { overflow: hidden; }
.lv-edo:has(input[type=radio]:checked) { outline: 3px solid #1d2b57; outline-offset: 1px; }
html.iec-dark body.brand-iec .lv-edo:has(input[type=radio]:checked) { outline-color: #f0c65a; }
html.iec-dark body.brand-iec .lv-hqtext, html.iec-dark body.brand-iec .lv-joininfo .lv-bigcode { color: #1d2b57 !important; }
html.iec-dark body.brand-iec .lv-players h2 { color: #fff !important; }
html.iec-dark body.brand-iec .lv-hend h2 { color: #f0c65a !important; }

/* ---------- Bible presentation mode (js/bible-present.js) ---------- */
.page-header.has-present { position: relative; padding-right: 8.5rem; }
.bp-toggle { position: absolute; right: 0; top: .2rem; display: inline-flex; align-items: center; gap: .35rem; border: 1.5px solid #d69e1b; background: transparent; color: var(--color-primary); border-radius: 999px; padding: .35rem .8rem; font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; }
.bp-toggle svg, .br-m-ic svg { width: 18px; height: 18px; }
html.iec-dark body.brand-iec .bp-toggle { color: #f1e6c8; }
html.bp-open, html.bp-open body { overflow: hidden; }
.bp-ov { position: fixed; inset: 0; z-index: 9900; background: #070b1c; color: #f6f1e3; display: flex; flex-direction: column; font-family: var(--font-serif, Georgia, serif); }
.bp-stage { position: relative; flex: 1; min-height: 0; }
.bp-text { position: absolute; inset: 0; overflow-y: auto; padding: 3vh 6vw 40vh; line-height: 1.38; }
.bp-h { font-size: .62em; font-weight: 700; color: #f0c65a; margin: 0 0 .6em; display: flex; align-items: baseline; gap: .6em; letter-spacing: .01em; }
.bp-h span { font-size: .55em; font-family: var(--font-sans, sans-serif); color: #9aa3c4; font-weight: 600; letter-spacing: .1em; }
.bp-v { margin: 0 0 .45em; padding: .12em .35em; border-radius: .25em; cursor: pointer; transition: background .2s, color .2s; }
.bp-v sup { font-family: var(--font-sans, sans-serif); font-size: .5em; font-weight: 800; color: #f0c65a; margin-right: .35em; vertical-align: .55em; }
.bp-v.on { background: #f3d36b; color: #111; box-shadow: 0 0 0 .15em #f3d36b; }
.bp-v.on sup { color: #7a4a00; }
.bp-black { position: absolute; inset: 0; background: #000; z-index: 2; }
.bp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .45rem .6rem; background: #111a38; border-top: 1px solid #26335e; font-family: var(--font-sans, sans-serif); font-size: .85rem; }
.bp-bar button { background: #1d2a55; color: #eef1fb; border: 1px solid #33427a; border-radius: 8px; padding: .4rem .65rem; font: inherit; font-weight: 600; cursor: pointer; min-height: 36px; }
.bp-bar button:hover { background: #283a74; }
.bp-bar button.on { background: #d69e1b; border-color: #d69e1b; color: #1a1300; }
.bp-bar .bp-x { margin-left: auto; background: #5a1f1f; border-color: #7a2c2c; }
.bp-go { flex: 1 1 200px; max-width: 320px; }
.bp-go input { width: 100%; min-height: 36px; border-radius: 8px; border: 1.5px solid #d69e1b; background: #0b1230; color: #fff; padding: 0 .7rem; font: inherit; font-size: .95rem; box-sizing: border-box; }
.bp-sep { width: 1px; height: 24px; background: #33427a; margin: 0 .2rem; }
.bp-pos { min-width: 4.5rem; text-align: center; color: #cfd6ec; font-weight: 600; white-space: nowrap; }
.bp-lc { color: #f0c65a; }
.bp-panel { position: absolute; left: 0; right: 0; bottom: 56px; max-height: 70vh; overflow-y: auto; background: #111a38; border-top: 2px solid #d69e1b; padding: .8rem 1rem 1rem; font-family: var(--font-sans, sans-serif); z-index: 3; box-shadow: 0 -10px 30px rgba(0,0,0,0.5); }
.bp-panel h3 { margin: 0 0 .5rem; color: #f0c65a; font-size: 1rem; display: flex; align-items: center; gap: .5rem; }
.bp-panel button { background: #1d2a55; color: #eef1fb; border: 1px solid #33427a; border-radius: 8px; padding: .4rem .55rem; font: inherit; font-size: .85rem; cursor: pointer; }
.bp-panel button:hover { background: #283a74; }
.bp-books { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 700px) { .bp-books { grid-template-columns: 1fr; } }
.bp-bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .3rem; }
.bp-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr)); gap: .3rem; }
.bp-cgrid button { font-size: 1rem; font-weight: 700; min-height: 44px; }
.bp-list textarea { width: 100%; box-sizing: border-box; border-radius: 8px; border: 1px solid #33427a; background: #0b1230; color: #fff; padding: .5rem .6rem; font: inherit; font-size: .95rem; }
.bp-note { margin: 0 0 .5rem; color: #aeb7d3; font-size: .85rem; }
.bp-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; }
.bp-chip.bad { border-color: #c6423a; color: #f6b1a4; }
.bp-chip.cur { background: #d69e1b; border-color: #d69e1b; color: #1a1300; }
.bp-row { display: flex; gap: .5rem; }
.bp-panel .bp-gold { background: #d69e1b; border-color: #d69e1b; color: #1a1300; font-weight: 700; }
.bp-toast { position: absolute; left: 50%; top: 1rem; transform: translateX(-50%); background: #f3d36b; color: #111; padding: .5rem 1rem; border-radius: 10px; font-family: var(--font-sans, sans-serif); font-weight: 600; z-index: 5; max-width: 90vw; }
.bp-ov:fullscreen .bp-bar { opacity: .12; transition: opacity .3s; }
.bp-ov:fullscreen .bp-bar:hover, .bp-ov:fullscreen .bp-bar:focus-within { opacity: 1; }
.bp-display .bp-text { cursor: default; padding-bottom: 50vh; }
.bp-display .bp-v { cursor: default; }
.bp-wait { font-family: var(--font-sans, sans-serif); font-size: 1.1rem; color: #9aa3c4; }
.bp-hint { position: absolute; right: .8rem; bottom: .5rem; font: 600 .75rem var(--font-sans, sans-serif); color: #4a5578; }
.bp-display:fullscreen .bp-hint { display: none; }
@media (max-width: 760px) {
  .page-header.has-present { padding-right: 3rem; }
  .bp-toggle span { display: none; }
  .bp-text { padding: 2vh 4vw 40vh; }
  .bp-bar { font-size: .8rem; }
  .bp-go { flex-basis: 100%; max-width: none; }
}
@media (max-width: 760px) { .bp-bar [data-a="win"] { display: none; } }

/* ---------- Palabras de Vida (js/wordgame.js) ---------- */
.wg { display: flex; flex-direction: column; gap: .6rem; max-width: 560px; margin: 0 auto; width: 100%; }
.wg-top { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.wg-pl-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; background: var(--color-card); box-shadow: var(--shadow-border); font-size: .88rem; }
.wg-pl-chip em { font-style: normal; font-weight: 800; color: #c98e12; }
.wg-pl-chip.turn { outline: 2.5px solid #3f9a55; }
.wg-pl-chip.out { opacity: .45; text-decoration: line-through; }
.wg-bag { margin-left: auto; font-size: .85rem; color: var(--color-muted-foreground); }
.wg-board { display: grid; grid-template-columns: repeat(11, 1fr); gap: 2px; background: #1d2b57; padding: 3px; border-radius: 10px; touch-action: manipulation; }
.wg-c { aspect-ratio: 1; border: 0; padding: 0; margin: 0; background: #f4efe2; border-radius: 3px; display: flex; align-items: center; justify-content: center; font: inherit; cursor: pointer; position: relative; min-width: 0; color: #1d2b57; }
.wg-c.p-tp { background: #c6423a; } .wg-c.p-dp { background: #e9a3ad; } .wg-c.p-tl { background: #2e6fc4; } .wg-c.p-dl { background: #9cc8ec; }
.wg-c.star { background: #e9a3ad; color: #8a1c2c; font-size: clamp(.8rem, 3.5vw, 1.2rem); }
.wg-pl { font-size: clamp(.42rem, 1.9vw, .62rem); font-weight: 800; color: #fff; letter-spacing: .02em; font-family: var(--font-sans, sans-serif); }
.wg-c.p-dl .wg-pl, .wg-c.p-dp .wg-pl { color: #1d2b57; }
.wg-t { position: absolute; inset: 1px; border-radius: 4px; background: linear-gradient(160deg, #fff4d2, #f2d98f); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center; color: #2a2412; }
.wg-l { font-weight: 800; font-size: clamp(.8rem, 3.8vw, 1.35rem); font-family: var(--font-sans, sans-serif); }
.wg-v { position: absolute; right: 2px; bottom: 0; font-size: clamp(.4rem, 1.6vw, .6rem); font-weight: 700; }
.wg-t.blank .wg-l { color: #2e6fc4; }
.wg-c.pend .wg-t { background: linear-gradient(160deg, #fff, #ffe38a); box-shadow: 0 0 0 2px #d69e1b; }
.wg-c.last .wg-t { box-shadow: 0 0 0 2px #3f9a55; }
.wg-msg { min-height: 1.3em; font-size: .9rem; text-align: center; }
.wg-msg.bad { color: #b3412f; } .wg-msg.ok { color: #2f7d4f; } .wg-msg.hint { color: var(--color-muted-foreground); }
.wg-bib { color: #c98e12; font-weight: 700; }
.wg-rack { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; max-width: 420px; margin: 0 auto; width: 100%; }
.wg-rt { position: relative; aspect-ratio: 1; border: 0; padding: 0; background: none; cursor: pointer; transition: transform .15s; }
.wg-rt .wg-t { inset: 0; border-radius: 8px; }
.wg-rt .wg-l { font-size: clamp(1.1rem, 5.5vw, 1.6rem); }
.wg-rt .wg-v { font-size: .65rem; right: 4px; bottom: 2px; }
.wg-rt.sel { transform: translateY(-8px); }
.wg-rt.sel .wg-t { box-shadow: 0 0 0 3px #d69e1b, 0 6px 12px rgba(0,0,0,0.2); }
.wg-rt.used { opacity: .2; }
.wg-rt.swap .wg-t { box-shadow: 0 0 0 3px #c6423a; }
.wg-btns { display: flex; gap: .4rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.wg-btns .gm-btn { min-height: 44px; }
.wg-play { min-width: 8rem; }
.wg-more { position: relative; }
.wg-more summary { list-style: none; }
.wg-more summary::-webkit-details-marker { display: none; }
.wg-more > div { position: absolute; right: 0; bottom: 110%; background: var(--color-card); box-shadow: 0 8px 24px rgba(0,0,0,0.25); border-radius: 12px; padding: .4rem; display: flex; flex-direction: column; gap: .3rem; z-index: 5; min-width: 11rem; }
.wg-more > div button { border: 0; background: rgba(var(--color-primary-rgb),0.07); color: var(--color-foreground); border-radius: 8px; padding: .55rem .7rem; font: inherit; text-align: left; cursor: pointer; }
.wg-more > div button:disabled { opacity: .4; }
.wg-log { list-style: none; margin: 0; padding: 0; font-size: .85rem; color: var(--color-muted-foreground); display: flex; flex-direction: column; gap: .15rem; }
.wg-log em { font-style: normal; font-weight: 800; color: #c98e12; }
.wg-blank { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.wg-blank > div { background: var(--color-card); border-radius: 14px; padding: 1rem; max-width: 360px; display: flex; flex-direction: column; gap: .6rem; }
.wg-blank p { margin: 0; font-weight: 700; }
.wg-blank-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.wg-blank-g button { aspect-ratio: 1; border: 0; border-radius: 8px; background: #f2d98f; font: inherit; font-weight: 800; font-size: 1.1rem; cursor: pointer; }
.wg-bnote { position: relative; padding: .7rem 2rem .7rem .9rem; border-radius: 12px; background: #fff8e4; border: 1.5px solid #e2c070; color: #2a2412; }
.wg-bnote p { margin: .3rem 0 0; font-family: var(--font-serif); font-size: .95rem; }
.wg-bx { position: absolute; right: .4rem; top: .3rem; border: 0; background: none; font-size: 1rem; cursor: pointer; color: #8a6a14; }
.wg-dl .wg-bar { height: 10px; border-radius: 99px; background: rgba(var(--color-primary-rgb),0.12); overflow: hidden; }
.wg-dl .wg-bar i { display: block; height: 100%; width: 0; background: #3f9a55; transition: width .2s; }
.wg-myturn { border-color: #3f9a55 !important; background: rgba(63,154,85,0.07); }
.wg-new, .wg-join { display: flex; flex-direction: column; gap: .5rem; }
.wg-new label, .wg-join label { display: flex; flex-direction: column; gap: .25rem; font-weight: 700; font-size: .88rem; }
.wg-new input, .wg-join input, .wg-new select { min-height: 44px; border-radius: 10px; border: 1px solid var(--color-input); padding: 0 .7rem; font: inherit; font-size: 1rem; background: var(--color-surface); color: var(--color-foreground); }
.wg-lv { margin: .2rem 0; }
.wg-again { margin-top: .4rem; }
html.iec-dark body.brand-iec .wg-c { background: #2a3456; color: #f1e6c8; }
html.iec-dark body.brand-iec .wg-c.p-tp { background: #a8352e; } html.iec-dark body.brand-iec .wg-c.p-dp, html.iec-dark body.brand-iec .wg-c.star { background: #b8707b; } html.iec-dark body.brand-iec .wg-c.p-tl { background: #2a5aa0; } html.iec-dark body.brand-iec .wg-c.p-dl { background: #4f7fa8; }
html.iec-dark body.brand-iec .wg-board { background: #0a1230; }
html.iec-dark body.brand-iec .wg-bnote { background: #2c2a1c; color: #f1e6c8; border-color: #6b5520; }
.gm-badge { display: inline-block; align-self: flex-start; font-size: .7rem; font-weight: 800; padding: .12rem .5rem; border-radius: 999px; background: rgba(214,158,27,0.16); color: #8a6a14; letter-spacing: .01em; margin-bottom: .15rem; font-family: var(--font-sans, sans-serif); }
.gm-badge.mp { background: rgba(63,154,85,0.16); color: #1e6b3c; }
.gm-card.has-art > .gm-badge { padding: .12rem .5rem; margin-left: .8rem; }
html.iec-dark body.brand-iec .gm-badge { color: #f0c65a; } html.iec-dark body.brand-iec .gm-badge.mp { color: #8fd6a4; }
.gm-howto { border-radius: var(--radius-lg); background: rgba(63,154,85,0.08); border: 1px solid rgba(63,154,85,0.35); padding: .6rem .9rem; font-size: .9rem; }
.gm-howto summary { cursor: pointer; font-weight: 700; color: var(--color-primary); }
.gm-howto ol { margin: .5rem 0 .1rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
html.iec-dark body.brand-iec .gm-howto summary { color: #f1e6c8; }

/* ---------- Centro de Juegos: every game is the same square tile ---------- */
.gm-sq { position: relative; display: flex; flex-direction: column; aspect-ratio: 1 / 1; min-width: 0; overflow: hidden; border-radius: var(--radius-lg); text-decoration: none; color: inherit;
  background: var(--color-card); box-shadow: var(--shadow-border); border-top: 3px solid var(--gm-gold, #d69e1b); transition: transform .12s ease, box-shadow .12s ease; }
.gm-sq:hover { box-shadow: var(--shadow-border-hover); transform: translateY(-1px); }
.gm-sq:active { transform: scale(.98); }
.gm-sq-pic { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: #cdeefb; border-bottom: 2px solid #e2c070; }
.gm-sq-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gm-sq-ic { font-size: 2.4rem; line-height: 1; }
.gm-sq-tag, .gm-sq-pic .gm-stars { position: absolute; top: .4rem; left: .4rem; max-width: calc(100% - .8rem); padding: .12rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 800; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255,255,255,.93); color: #1e6b3c; box-shadow: 0 1px 3px rgba(0,0,0,.2); font-family: var(--font-sans, sans-serif); }
.gm-sq-tag.gold { color: #8a6a14; }
.gm-sq-pic .gm-stars { font-size: .8rem; letter-spacing: .04em; color: rgba(0,0,0,.2); }
.gm-sq-pic .gm-stars .on { color: #e2a915; }
.gm-sq-txt { flex: none; display: flex; flex-direction: column; gap: .1rem; padding: .45rem .65rem .55rem; }
.gm-sq .gm-card-t { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-sq .gm-card-d { flex: none; font-size: .75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 480px) { .gm-sq .gm-card-d { display: none; } .gm-sq .gm-card-t { font-size: .88rem; } .gm-sq-txt { padding: .4rem .55rem .5rem; } }
html.iec-dark body.brand-iec .gm-sq-pic { border-color: #6b5520; }
html.iec-dark body.brand-iec .gm-sq-pic img { filter: brightness(.92); }
html.iec-dark body.brand-iec :is(.gm-sq-tag, .gm-sq-pic .gm-stars) { background: rgba(20,26,48,.9); color: #8fd6a4; }
html.iec-dark body.brand-iec .gm-sq-tag.gold { color: #f0c65a; }
html.iec-dark body.brand-iec .gm-sq-pic .gm-stars { color: rgba(255,255,255,.25); }
html.iec-dark body.brand-iec .gm-sq-pic .gm-stars .on { color: #f0c65a; }

/* Home hero: the longer "¡Comparte Aprende con Jesús!" label is a little smaller so it fits its square */
body.brand-iec .hero-sq-kids span { font-size: 0.86em; line-height: 1.12; }

/* ---------- Mapa de distribución (js/distmap.js) ---------- */
.dm-page { --dm-navy: #1d2b57; --dm-gold: #d69e1b; --dm-gold-soft: #f6e3ad; }
.dm-head h1 { font-family: var(--font-serif, Georgia, serif); color: var(--dm-navy); margin: 0 0 .25rem; font-size: 1.55rem; }
.dm-head p { margin: 0; color: var(--color-muted-foreground, #5b6475); font-size: .92rem; line-height: 1.45; }
.dm-body { display: flex; flex-direction: column; gap: .8rem; }
.dm-loading, .dm-note { color: var(--color-muted-foreground, #5b6475); font-size: .92rem; margin: .4rem 0; }
.dm-years { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .15rem; -webkit-overflow-scrolling: touch; }
.dm-year { flex: none; padding: .35rem .9rem; border-radius: 999px; font-weight: 700; font-size: .9rem; text-decoration: none;
  color: var(--dm-navy); background: var(--color-card, #fff); box-shadow: inset 0 0 0 1.5px #e2c070; }
.dm-year.on { background: var(--dm-navy); color: #f5e7bd; box-shadow: none; }
.dm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.4rem, 1fr)); gap: .5rem; }
.dm-stat { background: var(--color-card, #fff); border-radius: 14px; padding: .6rem .5rem; text-align: center; box-shadow: var(--shadow-border, 0 0 0 1px rgba(0,0,0,.08));
  border-top: 3px solid var(--dm-gold); display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.dm-stat b { font-size: 1.35rem; color: var(--dm-navy); font-family: var(--font-serif, Georgia, serif); line-height: 1.1; }
.dm-stat span { font-size: .74rem; color: var(--color-muted-foreground, #5b6475); line-height: 1.2; overflow-wrap: anywhere; }
.dm-stat.big { background: linear-gradient(160deg, #22346a 0%, #1d2b57 100%); border-top-color: #f0c65a; }
.dm-stat.big b { color: #f5e7bd; } .dm-stat.big span { color: #e7cf8c; }
.dm-map { height: 58vh; min-height: 300px; max-height: 560px; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-border, 0 0 0 1px rgba(0,0,0,.08));
  border: 2px solid #e2c070; background: #dbe8f3; z-index: 0; }
.dm-map.off, .dm-pickmap.off { height: auto; min-height: 0; padding: .8rem 1rem; background: var(--color-card, #fff); }
.dm-pin { background: none; border: 0; }
.dm-pin-dot { display: block; width: 24px; height: 24px; margin: 1px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: radial-gradient(circle at 50% 50%, #fff7df 0 4px, #d69e1b 5px); border: 2px solid #1d2b57; box-shadow: 0 2px 5px rgba(0,0,0,.35); }
.dm-pin.pending .dm-pin-dot { background: radial-gradient(circle at 50% 50%, #fff 0 4px, #9aa3b5 5px); border-style: dashed; }
.dm-pop { font-family: var(--font-sans, sans-serif); min-width: 150px; }
.dm-pop strong { display: block; color: #1d2b57; font-size: .95rem; }
.dm-pop-date { display: block; color: #8a6a14; font-size: .8rem; font-weight: 700; margin-bottom: .25rem; }
.dm-pop ul { margin: 0; padding: 0; list-style: none; font-size: .85rem; }
.dm-pop-note { margin: .35rem 0 0; font-size: .8rem; color: #5b4a22; font-style: italic; }
.dm-pop-pend { margin: .35rem 0 0; font-size: .75rem; color: #9a3412; }
/* Activity map (distMapMode "activity"): a colored chip per activity type, matching its pins. */
.dm-kind-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; line-height: 1.4;
  color: #fff; background: var(--k, #d69e1b); vertical-align: middle; }
.dm-kind-chip b { font-weight: 800; opacity: .9; }
.dm-row-date .dm-kind-chip { margin-left: .35rem; font-size: .7rem; }
.dm-legend { display: flex; flex-wrap: wrap; gap: .4rem; }
.dm-pop-kind { display: inline-block; margin-bottom: .3rem; padding: .08rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #fff; background: var(--k, #d69e1b); }
.dm-kinds { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.dm-kinds legend { font-weight: 700; font-size: .9rem; margin-bottom: .45rem; padding: 0; }
.dm-kind-opt { position: relative; cursor: pointer; }
.dm-kind-opt input { position: absolute; opacity: 0; pointer-events: none; }
.dm-kind-opt span { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: 999px; font-weight: 600; font-size: .9rem;
  border: 2px solid var(--k, #d69e1b); color: var(--color-foreground, #1d2b57); background: var(--color-card, #fff); }
.dm-kind-opt span::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--k, #d69e1b); }
.dm-kind-opt input:checked + span { background: var(--k, #d69e1b); color: #fff; }
.dm-kind-opt input:checked + span::before { background: #fff; }
.dm-kind-opt input:focus-visible + span { outline: 3px solid var(--color-ring, #c9921a); outline-offset: 2px; }
.dm-list { display: flex; flex-direction: column; gap: .45rem; }
.dm-list-h { font-size: 1.05rem; margin: .3rem 0 .1rem; color: var(--dm-navy); font-family: var(--font-serif, Georgia, serif); }
.dm-list-h small { font-family: var(--font-sans, sans-serif); color: var(--color-muted-foreground, #5b6475); font-weight: 500; font-size: .8rem; }
.dm-row { background: var(--color-card, #fff); border-radius: 12px; box-shadow: var(--shadow-border, 0 0 0 1px rgba(0,0,0,.08)); border-left: 4px solid var(--dm-gold); }
.dm-row.pending { border-left-color: #9aa3b5; border-left-style: dashed; }
.dm-row-main { display: flex; flex-direction: column; gap: .1rem; width: 100%; text-align: left; background: none; border: 0; padding: .6rem .8rem; cursor: pointer; font: inherit; color: inherit; }
.dm-row-date { font-size: .75rem; font-weight: 800; color: #8a6a14; text-transform: uppercase; letter-spacing: .03em; }
.dm-row-place { font-weight: 700; color: var(--dm-navy); }
.dm-row-q { font-size: .85rem; color: var(--color-muted-foreground, #5b6475); }
.dm-row-note { font-size: .82rem; font-style: italic; color: #5b4a22; }
.dm-row-pend { font-size: .78rem; color: #9a3412; font-weight: 600; }
.dm-row-tools { display: flex; gap: 1rem; padding: 0 .8rem .55rem; }
.dm-link { background: none; border: 0; padding: 0; font: inherit; font-size: .85rem; font-weight: 600; color: #1f5fbf; cursor: pointer; text-decoration: underline; }
.dm-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .55rem .8rem; border-top: 1px solid rgba(0,0,0,.08); font-size: .88rem; }
.dm-admin { display: flex; flex-wrap: wrap; gap: .5rem; }
.dm-pending { margin: 0; padding: .55rem .8rem; border-radius: 10px; background: #fff4e5; color: #7a3e0a; font-size: .88rem; }
.dm-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.6rem; padding: .5rem 1rem; border-radius: 12px; border: 0;
  font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; text-decoration: none; }
.dm-btn.primary { background: linear-gradient(180deg, #f7cd5c 0%, #dfa322 100%); color: #2a1c00; }
.dm-btn.ghost { background: var(--color-card, #fff); color: var(--dm-navy); box-shadow: inset 0 0 0 1.5px #c9b27a; }
.dm-btn.danger { background: #b42318; color: #fff; }
.dm-btn.gps { background: var(--dm-navy); color: #f5e7bd; }
.dm-btn.big { min-height: 3rem; font-size: 1rem; flex: 1 1 auto; }
.dm-btn:disabled { opacity: .6; cursor: default; }
.dm-panel { background: var(--color-card, #fff); border-radius: 14px; padding: .9rem 1rem; box-shadow: var(--shadow-border, 0 0 0 1px rgba(0,0,0,.08)); border-top: 3px solid var(--dm-gold);
  display: flex; flex-direction: column; gap: .6rem; }
.dm-panel h2 { margin: 0; font-size: 1.1rem; color: var(--dm-navy); }
.dm-help { margin: 0; font-size: .82rem; color: var(--color-muted-foreground, #5b6475); }
.dm-msg { margin: 0; font-size: .9rem; font-weight: 600; color: var(--dm-navy); min-height: 1.2em; }
.dm-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.dm-types { display: flex; flex-direction: column; gap: .4rem; }
.dm-type-row, .dm-add-type { display: flex; gap: .4rem; align-items: center; }
.dm-type-row input, .dm-add-type input { flex: 1; min-width: 0; }
.dm-icon { width: 2.4rem; height: 2.4rem; border-radius: 10px; border: 0; background: rgba(29,43,87,.08); color: var(--dm-navy); font-size: .9rem; cursor: pointer; }
.dm-icon:disabled { opacity: .3; }
.dm-page input[type=text], .dm-page input[type=date], .dm-page input[type=number], .dm-page textarea, .dm-page select {
  font: inherit; font-size: 16px; padding: .6rem .7rem; border-radius: 10px; border: 1.5px solid #cfc3a0; background: #fff; color: #14203f; width: 100%; box-sizing: border-box; }
.dm-form { display: flex; flex-direction: column; gap: .9rem; }
.dm-field { display: flex; flex-direction: column; gap: .3rem; font-weight: 700; color: var(--dm-navy); font-size: .9rem; }
.dm-field input[type=date] { min-height: 2.9rem; }
.dm-qty { border: 0; margin: 0; padding: .8rem; border-radius: 14px; background: var(--color-card, #fff); box-shadow: var(--shadow-border, 0 0 0 1px rgba(0,0,0,.08)); display: flex; flex-direction: column; gap: .5rem; }
.dm-qty legend { font-weight: 700; color: var(--dm-navy); font-size: .9rem; padding: 0; margin-bottom: .3rem; float: left; width: 100%; }
.dm-q { display: grid; grid-template-columns: 1fr 2.8rem 5.2rem 2.8rem; gap: .35rem; align-items: center; }
.dm-q-name { font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.dm-q input { text-align: center; font-weight: 700; padding: .55rem .2rem !important; }
.dm-step { height: 2.8rem; border-radius: 10px; border: 0; background: var(--dm-navy); color: #f5e7bd; font-size: 1.3rem; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.dm-where { display: flex; flex-wrap: wrap; gap: .5rem; }
.dm-where .dm-btn { flex: 1 1 10rem; }
.dm-loc-msg { margin: -.3rem 0 0; font-size: .85rem; color: #1e6b3c; font-weight: 600; min-height: 1em; }
.dm-results { display: flex; flex-direction: column; gap: .3rem; }
.dm-results[hidden] { display: none; }
.dm-loc-msg:empty { display: none; }
.dm-res { text-align: left; font: inherit; font-size: .85rem; padding: .55rem .7rem; border-radius: 10px; border: 1px solid #e2c070; background: #fffaf0; color: #14203f; cursor: pointer; }
.dm-pickmap { height: 280px; border-radius: 14px; overflow: hidden; border: 2px solid #e2c070; background: #dbe8f3; z-index: 0; }
.dm-pickmap + .dm-help { margin-top: -.5rem; }
/* night mode */
html.iec-dark body.brand-iec .dm-head h1, html.iec-dark body.brand-iec .dm-list-h, html.iec-dark body.brand-iec .dm-row-place,
html.iec-dark body.brand-iec .dm-stat b, html.iec-dark body.brand-iec .dm-panel h2, html.iec-dark body.brand-iec .dm-field,
html.iec-dark body.brand-iec .dm-qty legend, html.iec-dark body.brand-iec .dm-msg { color: #f1e6c8; }
html.iec-dark body.brand-iec .dm-year { color: #f1e6c8; box-shadow: inset 0 0 0 1.5px #6b5520; }
html.iec-dark body.brand-iec .dm-year.on { background: #d69e1b; color: #1a1300; }
html.iec-dark body.brand-iec .dm-row-date { color: #f0c65a; }
html.iec-dark body.brand-iec .dm-row-note { color: #d9ccaa; }
html.iec-dark body.brand-iec .dm-link { color: #8ab4f8; }
html.iec-dark body.brand-iec .dm-btn.ghost { color: #f1e6c8; box-shadow: inset 0 0 0 1.5px #6b5520; }
html.iec-dark body.brand-iec .dm-icon { background: rgba(255,255,255,.08); color: #f1e6c8; }
html.iec-dark body.brand-iec .dm-map, html.iec-dark body.brand-iec .dm-pickmap { border-color: #6b5520; }
html.iec-dark body.brand-iec .dm-pending { background: #3a2a14; color: #f3d6a5; }
html.iec-dark body.brand-iec .dm-loc-msg { color: #8fd6a4; }
html.iec-dark body.brand-iec .dm-res { background: #1c2440; color: #f1e6c8; border-color: #6b5520; }
html.iec-dark body.brand-iec .dm-page input, html.iec-dark body.brand-iec .dm-page textarea, html.iec-dark body.brand-iec .dm-page select {
  background: #141a30; color: #f1e6c8; border-color: #4a4230; color-scheme: dark; }
html.iec-dark body.brand-iec :is(.dm-stat:not(.big), .dm-row, .dm-panel, .dm-qty, .dm-year:not(.on), .dm-btn.ghost, .dm-map.off, .dm-pickmap.off) { background: #182142; }
html.iec-dark body.brand-iec :is(.dm-row-q, .dm-stat span, .dm-help, .dm-note, .dm-head p) { color: #b9b3a2; }
html.iec-dark body.brand-iec .dm-q-name { color: #f1e6c8; }
.dm-admin .dm-btn.primary { flex: 1 1 100%; }
.dm-admin .dm-btn.ghost { flex: 1 1 0; }
html.iec-dark body.brand-iec .dm-step { background: #d69e1b; color: #1a1300; }
/* home page map section */
.dm-home-card { background: var(--color-card, #fff); border-radius: 16px; padding: .75rem; box-shadow: var(--shadow-border, 0 0 0 1px rgba(0,0,0,.08)); border-top: 3px solid #d69e1b; display: flex; flex-direction: column; gap: .6rem; }
.dm-home-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .86rem; color: var(--color-muted-foreground, #5b6475); line-height: 1.35; }
.dm-home-top b { color: #1d2b57; font-weight: 800; }
.dm-home-year { flex: none; background: #1d2b57; color: #f5e7bd; font-weight: 800; font-size: .8rem; padding: .15rem .6rem; border-radius: 999px; }
.dm-map.dm-map-home { height: 300px; min-height: 0; max-height: none; border-radius: 12px; }
.dm-home-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.dm-home-more { font-weight: 700; font-size: .9rem; color: #1f5fbf; text-decoration: none; }
.dm-home-add { min-height: 2.3rem; padding: .35rem .85rem; font-size: .85rem; }
.dm-home-off { margin: 0; font-size: .8rem; color: #7a3e0a; }
html.iec-dark body.brand-iec .dm-home-card { background: #182142; border-top-color: #d69e1b; }
html.iec-dark body.brand-iec .dm-home-top { color: #b9b3a2; }
html.iec-dark body.brand-iec .dm-home-top b { color: #f1e6c8; }
html.iec-dark body.brand-iec .dm-home-year { background: #d69e1b; color: #1a1300; }
html.iec-dark body.brand-iec .dm-home-more { color: #8ab4f8; }
html.iec-dark body.brand-iec .dm-home-off { color: #f3d6a5; }

/* ===== Misión Bautista Verdadero Norte: "Salvia y Marino" natural look (hand-written; brand flag softLook) =====
   Paper grain, a top section that ends in the logo's volcanoes and palms, a tilted family "print",
   buttons below the box, an unboxed verse with a brush stroke, resources as a quiet list, gentle motion.
   `html body.brand-tnbcp` / `:root.iec-dark body.brand-tnbcp` so these win over the generated palette below. */
html body.brand-tnbcp {
  --sl-navy: #1f2f46; --sl-navy-2: #2c405e; --sl-sage: #8fb08b; --sl-sage-deep: #3f6b3d; --sl-sage-soft: #e1e9dd;
  --sl-ink: #1d2a3a; --sl-paper: #fdfdfa; --sl-hill1: #4d6690; --sl-hill2: #2e4262;
  background-color: var(--color-background);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .12  0 0 0 0 .16  0 0 0 0 .22  0 0 0 .075 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}
:root.iec-dark body.brand-tnbcp {
  --sl-sage-soft: #24303a; --sl-ink: #e6eae2; --sl-paper: #f4f6f1; --sl-hill1: #2c3d57; --sl-hill2: #1f2c40;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
html body.brand-tnbcp .site-header { border-bottom: 0; box-shadow: 0 6px 18px -14px rgba(10,18,30,0.6); }

/* Top section: soft navy with morning light, no inner frame; ends in hills that melt into the page. */
html body.brand-tnbcp .brand-hero {
  border-radius: 26px 26px 0 0; padding: 2rem 1.25rem 0; box-shadow: none;
  background: radial-gradient(80% 60% at 50% -10%, rgba(214,228,210,0.22), transparent 70%), linear-gradient(176deg, #34496b 0%, #26374f 58%, #1f2f46 100%);
}
:root.iec-dark body.brand-tnbcp .brand-hero { background: radial-gradient(80% 60% at 50% -10%, rgba(214,228,210,0.12), transparent 70%), linear-gradient(176deg, #24344c 0%, #1a2638 60%, #152030 100%); }
html body.brand-tnbcp .brand-hero::after { display: none; }
html body.brand-tnbcp .brand-hero-logo { background: #fbfcf8; box-shadow: 0 12px 30px -14px rgba(0,0,0,0.6); }
html body.brand-tnbcp .brand-hero-name { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.01em; text-shadow: none; }
html body.brand-tnbcp .brand-hero-tagline { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.02rem; color: #dbe6d6; }
html body.brand-tnbcp .brand-hero-photo {
  position: relative; z-index: 2; width: min(84%, 21rem); max-width: none; margin: 1.3rem auto -2rem;
  border: 7px solid #fdfdf8; border-bottom-width: 26px; border-radius: 3px; transform: rotate(-2.2deg);
  box-shadow: 0 18px 32px -16px rgba(0,0,0,0.65), 0 2px 6px rgba(0,0,0,0.18);
}
html body.brand-tnbcp .hero-hills { position: relative; z-index: 1; display: block; width: calc(100% + 2.5rem); height: 7rem; margin: 0 -1.25rem -1px; }
html body.brand-tnbcp .hero-hills .hh1 { fill: var(--sl-hill1); }
html body.brand-tnbcp .hero-hills .hh2 { fill: var(--sl-hill2); }
html body.brand-tnbcp .hero-hills .hhp { fill: none; stroke: var(--sl-hill2); stroke-width: 3; stroke-linecap: round; }
html body.brand-tnbcp .hero-hills .hhb { fill: var(--color-background); }

/* Buttons below the top section: one main WhatsApp button, two quiet outline ones, two reading cards. */
html body.brand-tnbcp .brand-hero-actions { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.4rem; }
html body.brand-tnbcp .brand-hero-actions .hero-sq-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 0; max-width: none; }
html body.brand-tnbcp .brand-hero-actions .hero-sq {
  max-width: none; aspect-ratio: auto; min-height: 3rem; flex-direction: row; gap: 0.5rem; padding: 0.55rem 0.9rem;
  border-radius: 999px; font-size: 0.82rem; line-height: 1.2; color: var(--sl-ink); background: var(--color-card);
  box-shadow: inset 0 0 0 1.5px var(--sl-navy-2); transition: transform 160ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
:root.iec-dark body.brand-tnbcp .brand-hero-actions .hero-sq { box-shadow: inset 0 0 0 1.5px #5b7090; }
html body.brand-tnbcp .brand-hero-actions .hero-sq svg { width: 19px; height: 19px; }
html body.brand-tnbcp .brand-hero-actions .hero-sq-wa {
  grid-column: 1 / -1; min-height: 3.3rem; font-size: 1rem; font-weight: 800;
  background: var(--sl-sage); color: #12221a; box-shadow: 0 12px 22px -16px rgba(20,40,30,0.75);
}
html body.brand-tnbcp .brand-hero-actions .hero-sq:hover { background: var(--sl-sage-soft); }
html body.brand-tnbcp .brand-hero-actions .hero-sq-wa:hover { background: #9dbb98; }
html body.brand-tnbcp .brand-hero-actions .hero-sq:active { transform: scale(0.975); }
html body.brand-tnbcp .brand-hero-actions .hero-read-row { max-width: none; margin: 0; gap: 0.6rem; }
html body.brand-tnbcp .brand-hero-actions .hero-read {
  min-height: 3.5rem; border-radius: 16px; color: var(--sl-ink); background: var(--sl-sage-soft); box-shadow: none;
  font-size: 0.86rem; transition: transform 160ms ease, background-color 200ms ease;
}
html body.brand-tnbcp .brand-hero-actions .hero-read svg { color: var(--sl-navy-2); }
:root.iec-dark body.brand-tnbcp .brand-hero-actions .hero-read svg { color: var(--sl-sage); }
html body.brand-tnbcp .brand-hero-actions .hero-read:active { transform: scale(0.98); }

/* Verse of the day: on the page itself, not in a box, with a hand-drawn stroke. */
html body.brand-tnbcp .verse-card { background: none; border: 0; box-shadow: none; border-radius: 0; text-align: center; padding: 0.5rem 1rem; }
html body.brand-tnbcp .verse-card::before { display: none; }
:root.iec-dark body.brand-tnbcp .verse-card { background: none; border: 0; box-shadow: none; }
html body.brand-tnbcp .verse-card .kicker { font-weight: 800; letter-spacing: 0.16em; color: var(--sl-sage-deep); }
:root.iec-dark body.brand-tnbcp .verse-card .kicker { color: var(--sl-sage); }
html body.brand-tnbcp .verse-card blockquote { font-size: 1.5rem; line-height: 1.32; color: var(--sl-ink); }
html body.brand-tnbcp .verse-card blockquote::after {
  content: ""; display: block; width: 7.5rem; height: 12px; margin: 0.55rem auto 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'><path d='M3 8 C26 3 48 10 70 6 C88 3 104 5 117 7' stroke='%238fb08b' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") center / contain no-repeat;
}

/* Section titles: a quiet serif heading instead of spaced capitals and a gold rule. */
html body.brand-tnbcp .brand-section-title { font-family: var(--font-serif); font-size: 1.32rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--sl-ink); margin-bottom: -1rem; }
html body.brand-tnbcp .dm-home .brand-section-title { margin-bottom: 0.7rem; }
html body.brand-tnbcp .dm-map { border-color: #c9d6c5; }
:root.iec-dark body.brand-tnbcp .dm-map { border-color: #34404f; }
html body.brand-tnbcp .brand-section-title::after { background: linear-gradient(90deg, rgba(143,176,139,0.6), transparent); }

/* Resources: a calm list with round pictures, not a wall of boxes. */
html body.brand-tnbcp .tile-grid { gap: 0; column-gap: 2rem; }
html body.brand-tnbcp .tile {
  background: none; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; box-shadow: none;
  padding: 0.75rem 2.2rem 0.75rem 0.15rem; gap: 0.9rem;
}
html body.brand-tnbcp .tile:hover { background: rgba(143,176,139,0.09); box-shadow: none; transform: none; }
html body.brand-tnbcp .tile:active { background: rgba(143,176,139,0.16); }
html body.brand-tnbcp .tile::after { border-color: var(--color-muted-foreground); width: 0.5rem; height: 0.5rem; }
html body.brand-tnbcp .tile-icon { width: 2.9rem; height: 2.9rem; border-radius: 50%; box-shadow: none; }
html body.brand-tnbcp .tile-title { font-family: var(--font-sans); font-size: 1.02rem; font-weight: 700; color: var(--sl-ink); }

/* Other home sections, softened to match. */
html body.brand-tnbcp .dm-home-card { border-top: 0; box-shadow: 0 10px 26px -20px rgba(10,20,35,0.55), 0 0 0 1px rgba(31,47,70,0.06); }
:root.iec-dark body.brand-tnbcp .dm-home-card { border-top: 0; }
html body.brand-tnbcp .bottom-nav a[data-nav="/bible"] .nav-icon,
html body.brand-tnbcp .bottom-nav a[data-nav="/tracts"] .nav-icon,
html body.brand-tnbcp .bottom-nav a[data-nav="/studies"] .nav-icon,
html body.brand-tnbcp .bottom-nav a[data-nav="/contact"] .nav-icon { background-color: #eef2ea; }

/* Gentle motion: sections ease up as they come into view (js softReveal; off for "reduce motion"). */
.sl-rise { opacity: 0; transform: translateY(16px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.2,1); }
.sl-rise.sl-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sl-rise { opacity: 1; transform: none; transition: none; } }
/* ===== end Salvia y Marino natural look ===== */

/* ===== Iglesia Bautista Verdadero Norte palette (generated) ===== */
/* Same look as the I.E.C. brand, recolored "Salvia y Marino": navy -> slate navy, gold -> sage, cream -> linen.
   Regenerate with tools/recolor-tnbcpanama.py after changing brand-iec styles. */
body.brand-tnbcp { --color-background: #f1f3ee; --color-foreground: #1f2835; --color-ink-rgb: 31,40,53; --color-surface: #fcfcfb; --color-card: #fcfcfb; --color-card-foreground: #1f2835; --color-muted: #e4e8dd; --color-muted-foreground: #646a74; --color-primary: #29374b; --color-primary-rgb: 41,55,75; --color-primary-foreground: #f5f7f2; --color-secondary: #e4e8dd; --color-secondary-foreground: #29374b; --color-border: #c7d2c6; --color-input: #c8d2c6; --color-ring: #76a86e; --iec-gold: #7ead77; --iec-gold-light: #adcca9; --iec-gold-deep: #446b3f; --gradient-primary: linear-gradient(155deg, #3b4f6d 0%, #212d40 100%); --gradient-header: linear-gradient(115deg, #354660 0%, #273549 50%, #192332 100%); --gradient-card: linear-gradient(165deg, #ffffff 0%, #fcfcfb 60%, #f3f5f0 100%); --gradient-badge: linear-gradient(155deg, #3f5371 0%, #212d40 100%); --gradient-nav-active: linear-gradient(155deg, #aacaa5 0%, #70a668 100%); --gradient-welcome-bg: radial-gradient(120% 85% at 50% 6%, #3f526f 0%, #273549 48%, #151e2c 100%); --shadow-nav-active: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -5px 8px rgba(53,82,48,0.25), 0 0 0 2px rgba(126,173,119,0.18), 0 4px 12px -3px rgba(126,173,119,0.6); background:
    radial-gradient(900px 420px at 50% -120px, rgba(173,204,169,0.16), transparent 70%),
    var(--color-background); background-attachment: fixed; }
body.brand-tnbcp .site-header { border-bottom: 2px solid rgba(126,173,119,0.75); }
body.brand-tnbcp .brand-icon { width: 3.1rem; height: 3.1rem; border-radius: 14px; background: #f8f9f6; padding: 3px; box-shadow: 0 0 0 2px rgba(173,204,169,0.7), 0 6px 16px -6px rgba(0,0,0,0.6), 0 0 22px -4px rgba(187,213,183,0.55); }
body.brand-tnbcp .header-actions .pill-btn { height: 2.3rem; font-size: 0.75rem; border-color: rgba(173,204,169,0.45); }
body.brand-tnbcp .header-actions .pill-btn:hover { background: rgba(173,204,169,0.14); }
body.brand-tnbcp .brand-hero { position: relative; overflow: hidden; text-align: center; color: #f5f7f2; border-radius: 28px; padding: 2.1rem 1.25rem 1.6rem; background:
    radial-gradient(70% 55% at 50% 0%, rgba(194,217,191,0.34), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(126,173,119,0.16), transparent 70%),
    linear-gradient(170deg, #354660 0%, #232f42 55%, #17202d 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 22px 44px -26px rgba(25,35,50,0.85), 0 0 0 1px rgba(126,173,119,0.28); }
body.brand-tnbcp .brand-hero::after { content: ""; position: absolute; inset: 10px; border-radius: 20px; pointer-events: none; border: 1px solid rgba(173,204,169,0.22); }
body.brand-tnbcp .brand-hero-logo { width: 8.5rem; height: 8.5rem; margin: 0 auto; border-radius: 30px; background: #f8f9f6; padding: 0.55rem; box-shadow: 0 0 0 3px rgba(173,204,169,0.6), 0 0 48px 4px rgba(187,213,183,0.35), 0 14px 26px -12px rgba(0,0,0,0.6); }
body.brand-tnbcp .brand-hero-verse { margin: 1rem auto 0; max-width: 30rem; white-space: pre-line; font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; line-height: 1.45; color: rgba(245,247,242,0.93); }
body.brand-tnbcp .brand-hero-verse span { display: block; margin-top: 0.4rem; font-family: var(--font-sans); font-style: normal; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,247,242,0.62); }
body.brand-tnbcp .btn-gold { background: linear-gradient(180deg, #b8d3b3 0%, #88b282 100%); color: #0d1d12; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 8px 18px -8px rgba(126,173,119,0.9); }
body.brand-tnbcp .verse-card::before { background: radial-gradient(90% 120% at 100% 0%, rgba(173,204,169,0.14), transparent 60%); }
body.brand-tnbcp .brand-section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(126,173,119,0.5), transparent); }
body.brand-tnbcp .tile:hover { box-shadow: 0 0 0 1px rgba(126,173,119,0.45), 0 14px 26px -16px rgba(var(--color-ink-rgb),0.55); }
body.brand-tnbcp .tile[data-icon="start"] .tile-icon { background: linear-gradient(155deg, #adcca9 0%, #70a668 100%); color: #f8f9f6; }
body.brand-tnbcp .tile[data-icon="bible"] .tile-icon { background: linear-gradient(155deg, #3f5371 0%, #212d40 100%); }
body.brand-tnbcp .tile[data-icon="studies"] .tile-icon { background: linear-gradient(155deg, #5f779c 0%, #354761 100%); }
body.brand-tnbcp .tile[data-icon="chat"] .tile-icon { background: linear-gradient(155deg, #5778a9 0%, #31496d 100%); }
body.brand-tnbcp .tile[data-icon="kids"] .tile-icon { background: linear-gradient(155deg, #a3c69d 0%, #6aa261 100%); }
body.brand-tnbcp .bottom-nav { border-top: 1px solid var(--color-border); background: linear-gradient(180deg, #fcfcfb 0%, #f3f5f0 100%); }
body.brand-tnbcp .bottom-nav .nav-icon { color: #f8f9f6; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 3px 8px -3px rgba(var(--color-ink-rgb),0.45); }
body.brand-tnbcp .bottom-nav a[data-nav="/"] .nav-icon { background: linear-gradient(155deg, #adcca9 0%, #70a668 100%); }
body.brand-tnbcp .bottom-nav a[data-nav="/bible"] .nav-icon { background: linear-gradient(155deg, #3f5371 0%, #212d40 100%); }
body.brand-tnbcp .bottom-nav a[data-nav="/studies"] .nav-icon { background: linear-gradient(155deg, #5f779c 0%, #354761 100%); }
body.brand-tnbcp .bottom-nav a[data-nav="/contact"] .nav-icon { background: linear-gradient(155deg, #5778a9 0%, #31496d 100%); }
body.brand-tnbcp .bottom-nav a.active .nav-icon { box-shadow: 0 0 0 2px #fcfcfb, 0 0 0 3.5px var(--iec-gold), 0 4px 10px -3px rgba(var(--color-ink-rgb),0.5); }
body.brand-tnbcp .bottom-nav a[data-nav="/"] .nav-icon { background: #f8f9f6 url(/brands/mbvn/logo.svg) center / 88% no-repeat; box-shadow: 0 0 0 1.5px rgba(126,173,119,0.55), 0 3px 8px -3px rgba(var(--color-ink-rgb),0.45); }
body.brand-tnbcp .bottom-nav a[data-nav="/bible"] .nav-icon { background: #e2e6ed url(/c/mbvn/tile-bible.jpg) center / cover no-repeat; }
body.brand-tnbcp .bottom-nav a[data-nav="/tracts"] .nav-icon { background: #e2e6ed url(/c/mbvn/tile-tracts.jpg) center / cover no-repeat; }
body.brand-tnbcp .bottom-nav a[data-nav="/studies"] .nav-icon { background: #e2e6ed url(/c/mbvn/tile-study.jpg) center / cover no-repeat; }
body.brand-tnbcp .bottom-nav a[data-nav="/contact"] .nav-icon { background: #e2e6ed url(/c/mbvn/tile-chat.jpg) center / cover no-repeat; }
body.brand-tnbcp .hero-read { flex: 1 1 0; min-width: 0; min-height: 3.1rem; display: flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.5rem 0.7rem; border-radius: 14px; text-decoration: none; font-weight: 700; font-size: 0.8rem; line-height: 1.2; text-align: left; color: #fff; background: linear-gradient(180deg, #2f7d4f 0%, #1f5a39 100%); box-shadow: inset 0 0 0 2px #a4c69f, 0 8px 16px -10px rgba(0,0,0,0.6); }
body.brand-tnbcp .hero-read svg { width: 22px; height: 22px; flex: none; color: #adcca9; }
body.brand-tnbcp .bottom-nav a[data-nav="/"].active .nav-icon { box-shadow: 0 0 0 2px #fcfcfb, 0 0 0 3.5px var(--iec-gold), 0 4px 10px -3px rgba(var(--color-ink-rgb),0.5); }
body.brand-tnbcp footer.site-footer img.brand-footer-logo { width: 5rem; height: 5rem; border-radius: 20px; background: #f8f9f6; padding: 0.35rem; box-shadow: 0 0 0 2px rgba(126,173,119,0.45), 0 8px 18px -10px rgba(var(--color-ink-rgb),0.6); }
body.brand-tnbcp .btn-kids-share { border-color: rgba(173,204,169,0.65); color: #c2d9bf; }
body.brand-tnbcp .btn-kids-share:hover { background: rgba(173,204,169,0.14); }
body.brand-tnbcp .welcome-loading-tagline { max-width: 20rem; color: #adcca9; }
body.brand-tnbcp .welcome-study { background:
    radial-gradient(120% 55% at 50% 0%, rgba(173,204,169,0.22), transparent 70%),
    linear-gradient(180deg, #f5f7f2 0%, #e9ede2 100%); color: var(--color-foreground); }
body.brand-tnbcp .welcome-study .dialogue-card { background: var(--gradient-card); border: 1px solid var(--color-border); color: var(--color-foreground); box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 22px 50px -28px rgba(41,55,75,0.45), 0 0 0 1px rgba(126,173,119,0.14); }
body.brand-tnbcp .dialogue-art { margin: 0 -1.35rem 1.35rem; aspect-ratio: 800 / 420; background: #29374b; border-bottom: 3px solid var(--iec-gold); }
body.brand-tnbcp .welcome-study .dialogue-option { background: #fcfcfb; border: 1px solid var(--color-border); color: var(--color-foreground); box-shadow: 0 1px 2px rgba(41,55,75,0.06); }
body.brand-tnbcp .welcome-study .dialogue-option:hover { background: #f3f5f0; border-color: rgba(126,173,119,0.55); }
body.brand-tnbcp .welcome-study .dialogue-option.selected { background: var(--gradient-primary); color: #f5f7f2; border-color: transparent; }
body.brand-tnbcp .welcome-study .dialogue-feedback { background: #e9ede2; color: #323b48; border-left: 3px solid var(--iec-gold); }
body.brand-tnbcp .welcome-study .dialogue-verse { border-left-color: var(--iec-gold); color: var(--color-primary); background: linear-gradient(90deg, rgba(126,173,119,0.12), rgba(126,173,119,0)); }
body.brand-tnbcp .welcome-study .welcome-btn-primary { background: var(--gradient-primary); color: #f5f7f2; box-shadow: 0 8px 18px -10px rgba(41,55,75,0.8); }
body.brand-tnbcp .welcome-study .welcome-closing-links .btn-outline { border-color: rgba(41,55,75,0.3); color: var(--color-primary); }
body.brand-tnbcp .study-art { margin: 1rem 0 1.35rem; border-radius: 14px; overflow: hidden; aspect-ratio: 800 / 420; background: #29374b; border-bottom: 3px solid var(--iec-gold); box-shadow: 0 12px 26px -16px rgba(41,55,75,0.65), 0 0 0 1px rgba(126,173,119,0.3); }
body.brand-tnbcp .card:has(.study-nav-row) > h2 { color: var(--color-primary); padding-bottom: 0.5rem; border-bottom: 2px solid rgba(126,173,119,0.5); }
body.brand-tnbcp .blank-verse { background: linear-gradient(165deg, #f8f9f6 0%, #ebeee4 100%); border: 1px solid var(--color-border); border-left: 4px solid var(--iec-gold); }
body.brand-tnbcp .hero-sq-ask { background: linear-gradient(180deg, #b8d3b3 0%, #88b282 100%); color: #0d1d12; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 8px 16px -10px rgba(126,173,119,0.9); }
body.brand-tnbcp .hero-sq-gospel { background: #f5f7f2; color: #29374b; }
body.brand-tnbcp .hero-sq-kids { background: #5e82b7; }
html.iec-dark body.brand-tnbcp { --color-background: #12171f; --color-foreground: #e1e5da; --color-ink-rgb: 0,0,0; --color-surface: #1c2430; --color-card: #1e2632; --color-card-foreground: #e1e5da; --color-muted: #2a3341; --color-muted-foreground: #b0b6c0; --color-primary: #536d93; --color-primary-rgb: 83,109,147; --color-primary-foreground: #f5f7f2; --color-secondary: #2a3341; --color-secondary-foreground: #e1e5da; --color-border: #353f4f; --color-input: #445061; --iec-gold-deep: #a2c29d; --gradient-primary: linear-gradient(155deg, #59759e 0%, #374b69 100%); --gradient-card: linear-gradient(165deg, #232c3a 0%, #1e2632 60%, #1a222d 100%); --shadow-border: 0 0 0 1px rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,0.35); --shadow-bevel: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 1px rgba(0,0,0,0.3), 0 8px 20px -8px rgba(0,0,0,0.6); background: radial-gradient(900px 420px at 50% -120px, rgba(173,204,169,0.08), transparent 70%), var(--color-background); color: var(--color-foreground); }
html.iec-dark body.brand-tnbcp :is(h1, h2, h3, .page-header h1, .tile-title, .cta-title, .answers-title, .brand-section-title, .ib-jump-text strong, .wa-banner-text strong,
  .verse-card blockquote, .lib-title, .study-block-h, .br-m-h, .hy-m-title, .hy-t, .disc-card h3, .lib-open-text strong):not(.welcome-study *):not(.kids-page *) { color: #dfe4d5; }
html.iec-dark body.brand-tnbcp :is(.btn-outline, .lib-btn.ghost, .disc-btn.ghost, .hy-btn.ghost, .disc-more, .disc-body a, .lib-stats b, .lib-cat, .disc-badge,
  .footer-privacy-line a, .ministry-line, .hy-grp, .hy-chip, .back-link) { color: #c3d8c0; }
html.iec-dark body.brand-tnbcp :is(.btn-outline, .lib-btn.ghost, .disc-btn.ghost, .hy-btn.ghost, .hy-chip) { border-color: rgba(195,216,192,0.45); background: transparent; }
html.iec-dark body.brand-tnbcp :is(.hy-chip.on, .lib-chip.on) { background: #7ead77; border-color: #7ead77; color: #08120b; }
html.iec-dark body.brand-tnbcp :is(input, textarea, select):not(.kids-page *):not(.welcome-study *) { background-color: #161e29 !important; color: #e1e5da !important; border-color: #445061 !important; }
html.iec-dark body.brand-tnbcp :is(input, textarea)::placeholder { color: #88909c; }
html.iec-dark body.brand-tnbcp .hy-num { background: #445c81; }
html.iec-dark body.brand-tnbcp :is(.hy-disc, .lib-q-warn) { color: #c5d5c3; background: rgba(126,173,119,0.12); }
html.iec-dark body.brand-tnbcp :is(.lib-ic, .disc-file-ic) { background: #e1e4db; }
html.iec-dark body.brand-tnbcp :is(.disc-tools, .disc-linkrow) { background: #2a3341; }
html.iec-dark body.brand-tnbcp .disc-editor { background: #161e29; color: #e1e5da; }
html.iec-dark body.brand-tnbcp .disc-clamp:after { background: linear-gradient(rgba(30,38,50,0), var(--color-card)); }
html.iec-dark body.brand-tnbcp .bottom-nav { background: #161e29; border-top-color: #353f4f; }
html.iec-dark body.brand-tnbcp .bottom-nav a { color: #ced3db; }
html.iec-dark body.brand-tnbcp .bottom-nav a.active { color: #c3d8c0; }
html.iec-dark body.brand-tnbcp .ib-jump { background: rgba(126,173,119,0.1); color: var(--color-foreground); }
html.iec-dark body.brand-tnbcp footer.site-footer.brand-footer { border-top-color: #353f4f; }
html.iec-dark body.brand-tnbcp .bv:is(.hl-y, .hl-g, .hl-b, .hl-p) { color: #161b18; }
html.iec-dark body.brand-tnbcp .bv:is(.hl-y, .hl-g, .hl-b, .hl-p) .bible-vnum { color: #355331; }
html.iec-dark body.brand-tnbcp .bv.sel { background-color: rgba(126,173,119,0.22); }
html.iec-dark body.brand-tnbcp .bible-vnum { color: #a2c29d; }
html.iec-dark body.brand-tnbcp :is(.br-m, .hy-m) { background: #12171f; color: #e1e5da; }
html.iec-dark body.brand-tnbcp :is(.br-m-top, .hy-m-top) { background: #0b0f16; }
html.iec-dark body.brand-tnbcp :is(.br-m-panel, .hy-m-panel, .hy-m-find, .br-m-bot, .hy-m-bot) { background: #1a222d; border-color: #353f4f; }
html.iec-dark body.brand-tnbcp :is(.br-m-bot a, .hy-m-bot a, .hy-m-bot button) { background: transparent; color: #c3d8c0; border-color: rgba(195,216,192,0.5); }
html.iec-dark body.brand-tnbcp :is(.br-m-bot a.main, .hy-m-bot .main) { background: #7ead77; color: #08120b; border-color: #7ead77; }
html.iec-dark body.brand-tnbcp :is(.br-m-size, .hy-m-size) { border-color: #c3d8c0; }
html.iec-dark body.brand-tnbcp :is(.br-m-size button, .hy-m-size button) { color: #c3d8c0; }
html.iec-dark body.brand-tnbcp :is(.br-m-size button + button, .hy-m-size button + button) { border-left-color: #c3d8c0; }
html.iec-dark body.brand-tnbcp .br-m-hint { color: #b0b6c0; }
html.iec-dark body.brand-tnbcp .br-m-tr { color: #a2c29d; }
html.iec-dark body.brand-tnbcp .br-m-h span { color: #a2c29d; }
html.iec-dark body.brand-tnbcp .hy-m-title .n { background: #7ead77; color: #08120b; }
html.iec-dark body.brand-tnbcp .hy-m-vn { background: #445c81; color: #c3d8c0; }
html.iec-dark body.brand-tnbcp .hy-m-cat { color: #a2c29d; }
html.iec-dark body.brand-tnbcp .hy-m-c { background: rgba(126,173,119,0.14); box-shadow: inset 0 0 0 1px rgba(126,173,119,0.35); }
html.iec-dark body.brand-tnbcp .hy-m-c .hy-m-lines div { color: #c2d9bf; }
html.iec-dark body.brand-tnbcp .hy-m-cl { color: #a2c29d; }
html.iec-dark body.brand-tnbcp .hy-m-res a { background: #232c3a; }
html.iec-dark body.brand-tnbcp .hy-m-res .s { color: #b0b6c0; }
html.iec-dark body.brand-tnbcp .hy-part.c { background: rgba(126,173,119,0.12); }
html.iec-dark body.brand-tnbcp .hy-m-find input { border-color: #7ead77 !important; }
html.iec-dark body.brand-tnbcp .bt-tx strong { color: #dfe4d5; }
html.iec-dark body.brand-tnbcp .gm-feature { background: linear-gradient(150deg, #202823 0%, #293427 100%); border-color: #41573e; }
html.iec-dark body.brand-tnbcp .gm-feature-txt strong { color: #c3d8c0; }
html.iec-dark body.brand-tnbcp .gm-feature-txt span { color: #c7d2c6; }
html.iec-dark body.brand-tnbcp :is(.gm-card-t, .gm-head h1, .gm-done h2, .gm-reveal h2, .gm-board h2, .gm-words, .gm-word span) { color: #dfe4d5; }
html.iec-dark body.brand-tnbcp .gm-word span { border-bottom-color: #a9c3a5; }
html.iec-dark body.brand-tnbcp .gm-stars .on { color: #b2cfae; }
html.iec-dark body.brand-tnbcp :is(.gm-chip, .gm-clues, .gm-book, .gm-sc, .gm-mc.up) { background: #2e3847; color: #dfe4d5; border-color: #41573e; }
html.iec-dark body.brand-tnbcp :is(.gm-mc-face, .gm-book-n) { color: #dfe4d5; }
html.iec-dark body.brand-tnbcp .gm-book-fb { color: #c5d5c3; }
html.iec-dark body.brand-tnbcp .gm-sopa { background: #41573e; }
html.iec-dark body.brand-tnbcp .gm-sc.sel { background: #7ead77; color: #08120b; }
html.iec-dark body.brand-tnbcp :is(.gm-btn.ghost, .gm-link, .gm-kb button, .gm-tabs button) { color: #dfe4d5; border-color: rgba(195,216,192,0.4); }
html.iec-dark body.brand-tnbcp .gm-btn.primary { background: linear-gradient(155deg, #59759e 0%, #374b69 100%); }
html.iec-dark body.brand-tnbcp .gm-tabs.lv button.on { background: #536d93; border-color: #536d93; }
html.iec-dark body.brand-tnbcp .gm-tabs.pd button.on { color: #08120b; }
html.iec-dark body.brand-tnbcp .gm-chip-n { background: #7ead77; color: #08120b; }
html.iec-dark body.brand-tnbcp :is(.gm-card-art, .gm-head-art, .gm-feature-art) { border-color: #41573e; filter: brightness(.92); }
html.iec-dark body.brand-tnbcp .hy-adm-h, html.iec-dark body.brand-tnbcp .hy-ed h2, html.iec-dark body.brand-tnbcp .hy-adm-num, html.iec-dark body.brand-tnbcp .hy-link:not(.danger) { color: #dfe4d5; }
html.iec-dark body.brand-tnbcp .hy-adm-why { color: #b2cfae; }
html.iec-dark body.brand-tnbcp .gm-feature.live { background: linear-gradient(150deg, #263245 0%, #30425c 100%); border-color: #536d93; }
html.iec-dark body.brand-tnbcp :is(.lv-box h2, .lv-box h3, .lv-big, .lv-edqh) { color: #dfe4d5; }
html.iec-dark body.brand-tnbcp .lv-hostpage { background: #121b28; }
html.iec-dark body.brand-tnbcp .lv-edo:has(input[type=radio]:checked) { outline-color: #b2cfae; }
html.iec-dark body.brand-tnbcp .lv-hqtext, html.iec-dark body.brand-tnbcp .lv-joininfo .lv-bigcode { color: #29374b !important; }
html.iec-dark body.brand-tnbcp .lv-hend h2 { color: #b2cfae !important; }
html.iec-dark body.brand-tnbcp .bp-toggle { color: #dfe4d5; }
html.iec-dark body.brand-tnbcp .wg-c { background: #333d4d; color: #dfe4d5; }
html.iec-dark body.brand-tnbcp .wg-c.p-tl { background: #425e88; }
html.iec-dark body.brand-tnbcp .wg-c.p-dl { background: #617696; }
html.iec-dark body.brand-tnbcp .wg-board { background: #121b28; }
html.iec-dark body.brand-tnbcp .wg-bnote { background: #202823; color: #dfe4d5; border-color: #41573e; }
html.iec-dark body.brand-tnbcp .gm-badge { color: #b2cfae; }
html.iec-dark body.brand-tnbcp .gm-howto summary { color: #dfe4d5; }
html.iec-dark body.brand-tnbcp .gm-sq-pic { border-color: #41573e; }
html.iec-dark body.brand-tnbcp :is(.gm-sq-tag, .gm-sq-pic .gm-stars) { background: rgba(26,32,42,.9); color: #8fd6a4; }
html.iec-dark body.brand-tnbcp .gm-sq-tag.gold { color: #b2cfae; }
html.iec-dark body.brand-tnbcp .gm-sq-pic .gm-stars .on { color: #b2cfae; }
html.iec-dark body.brand-tnbcp .dm-head h1, html.iec-dark body.brand-tnbcp .dm-list-h, html.iec-dark body.brand-tnbcp .dm-row-place, html.iec-dark body.brand-tnbcp .dm-stat b, html.iec-dark body.brand-tnbcp .dm-panel h2, html.iec-dark body.brand-tnbcp .dm-field, html.iec-dark body.brand-tnbcp .dm-qty legend, html.iec-dark body.brand-tnbcp .dm-msg { color: #dfe4d5; }
html.iec-dark body.brand-tnbcp .dm-year { color: #dfe4d5; box-shadow: inset 0 0 0 1.5px #41573e; }
html.iec-dark body.brand-tnbcp .dm-year.on { background: #7ead77; color: #08120b; }
html.iec-dark body.brand-tnbcp .dm-row-date { color: #b2cfae; }
html.iec-dark body.brand-tnbcp .dm-row-note { color: #c7d2c6; }
html.iec-dark body.brand-tnbcp .dm-link { color: #a9bcd9; }
html.iec-dark body.brand-tnbcp .dm-btn.ghost { color: #dfe4d5; box-shadow: inset 0 0 0 1.5px #41573e; }
html.iec-dark body.brand-tnbcp .dm-icon { background: rgba(255,255,255,.08); color: #dfe4d5; }
html.iec-dark body.brand-tnbcp .dm-map, html.iec-dark body.brand-tnbcp .dm-pickmap { border-color: #41573e; }
html.iec-dark body.brand-tnbcp .dm-pending { background: #273325; color: #c3d8c0; }
html.iec-dark body.brand-tnbcp .dm-res { background: #232c39; color: #dfe4d5; border-color: #41573e; }
html.iec-dark body.brand-tnbcp .dm-page input, html.iec-dark body.brand-tnbcp .dm-page textarea, html.iec-dark body.brand-tnbcp .dm-page select { background: #1a202a; color: #dfe4d5; border-color: #4a4230; color-scheme: dark; }
html.iec-dark body.brand-tnbcp :is(.dm-stat:not(.big), .dm-row, .dm-panel, .dm-qty, .dm-year:not(.on), .dm-btn.ghost, .dm-map.off, .dm-pickmap.off) { background: #202a3a; }
html.iec-dark body.brand-tnbcp .dm-q-name { color: #dfe4d5; }
html.iec-dark body.brand-tnbcp .dm-step { background: #7ead77; color: #08120b; }
html.iec-dark body.brand-tnbcp .dm-home-card { background: #202a3a; border-top-color: #7ead77; }
html.iec-dark body.brand-tnbcp .dm-home-top b { color: #dfe4d5; }
html.iec-dark body.brand-tnbcp .dm-home-year { background: #7ead77; color: #08120b; }
html.iec-dark body.brand-tnbcp .dm-home-more { color: #a9bcd9; }
html.iec-dark body.brand-tnbcp .dm-home-off { color: #c3d8c0; }
/* ===== end Verdadero Norte palette ===== */

/* Ministry Updates written as a letter (discipleship.js cfg.letter): sections opened by their verse. */
.disc-body.ltr { font-size: 1.02rem; }
.ltr-sec + .ltr-sec { margin-top: 1.6rem; }
.ltr-sec.ltr-photos { margin-top: 1.4rem; }
.ltr-head { text-align: center; margin: 0 0 1rem; }
.ltr-h { margin: 0 0 .55rem; font: 800 .74rem/1.2 var(--font-sans, inherit); letter-spacing: .16em; text-transform: uppercase; color: var(--sl-sage-deep, var(--color-primary)); }
.ltr-v { margin: 0 auto; padding: 0 0 .85rem; border: 0; max-width: 34rem; position: relative; background: none; }
.ltr-v p { margin: 0 0 .35rem; font-family: var(--font-serif, Georgia, serif); font-style: italic; font-size: 1.08rem; line-height: 1.5; color: var(--sl-navy-2, var(--color-foreground)); }
.ltr-v cite { font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sl-sage-deep, var(--color-muted-foreground)); }
.ltr-v::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 64px; height: 6px; margin-left: -32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cpath d='M3 6 C26 2 48 9 70 5 C88 2 104 4 117 6' fill='none' stroke='%238fb08b' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.ltr-devo > p.ltr-cap::first-letter { float: left; font-family: var(--font-serif, Georgia, serif); font-weight: 700; font-size: 3.1rem; line-height: .82; margin: .3rem .45rem 0 0; color: var(--sl-sage, var(--color-primary)); }
/* Browsers that can (Safari, Chrome, Edge): the drop cap spans exactly two lines — its top level with the
   first line's capitals, its foot on the second line's baseline. Others keep the floated letter above. */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .ltr-devo > p.ltr-cap::first-letter { float: none; font-size: inherit; line-height: inherit; margin: 0 .5rem 0 0; -webkit-initial-letter: 2; initial-letter: 2; }
}
.ltr-pray { list-style: none; padding: 0; margin: 0 auto; max-width: 34rem; }
.ltr-pray li { position: relative; padding: .55rem .2rem .55rem 1.6rem; border-bottom: 1px solid rgba(var(--color-ink-rgb, 30,40,50), .08); }
.ltr-pray li:last-child { border-bottom: 0; }
.ltr-pray li::before { content: ""; position: absolute; left: .35rem; top: 1.05rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--sl-sage, var(--color-primary)); }
/* editor */
.ltr-field { position: relative; padding: 1rem .9rem .9rem; border-radius: 14px; background: rgba(var(--color-ink-rgb, 30,40,50), .035); }
.ltr-field .ltr-num { position: absolute; top: .7rem; left: .8rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: .8rem; color: #fff; background: var(--sl-sage-deep, var(--color-primary)); }
.ltr-field .ltr-head { margin-bottom: .7rem; padding: 0 1.4rem; }
.ltr-field .ltr-v p { font-size: .95rem; }
.ltr-field textarea { width: 100%; box-sizing: border-box; }
.ltr-field > .disc-field { margin: 0; }
:root.iec-dark .ltr-field { background: rgba(255,255,255,.04); }
:root.iec-dark .ltr-v p { color: #dfe6da; }
/* letter verses: unboxed, centred (over the site's usual quote box, incl. its brand recolouring) */
html body .disc-body blockquote.ltr-v, html body .ltr-sec blockquote.ltr-v, html body .ltr-field blockquote.ltr-v {
  margin: 0 auto; padding: 0 .5rem .85rem; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: center; font-size: inherit; }
html body .disc-body.ltr .ltr-devo > p:first-of-type { margin-top: .2rem; }
/* letter sections: title and verse sit on the left (user's choice), brush stroke under them on the left */
html body .ltr-head { text-align: left; }
html body .disc-body blockquote.ltr-v, html body .ltr-sec blockquote.ltr-v, html body .ltr-field blockquote.ltr-v { margin: 0; padding: 0 0 .85rem; max-width: none; text-align: left; }
html body .ltr-v::after { left: 0; margin-left: 0; }
html body .ltr-field .ltr-head { padding: 0 0 0 2.2rem; }
html body .ltr-pray { margin: 0; max-width: none; }
/* Home-page photo slideshow (brand flag photoAlbum; app.js brandPhotosSection) */
.ph-section { margin: 1.4rem 0 .4rem; }
.ph-frame { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #1f2f46;
  box-shadow: 0 18px 34px -24px rgba(20, 30, 45, .7); }
.ph-slides { position: absolute; inset: 0; touch-action: pan-y; }
.ph-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s ease; }
.ph-slide.on { opacity: 1; }
.ph-blur { position: absolute; inset: -24px; background: center / cover no-repeat; filter: blur(22px) brightness(.72) saturate(1.1); }
.ph-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ph-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.82); color: #1f2f46; font-size: 1.6rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 6px 14px -8px rgba(0,0,0,.6); }
.ph-prev { left: .6rem; } .ph-next { right: .6rem; }
.ph-dots { position: absolute; left: 0; right: 0; bottom: .6rem; display: flex; justify-content: center; gap: .35rem; }
.ph-dots button { width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.55); cursor: pointer; }
.ph-dots button.on { background: #fff; width: 1.2rem; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .ph-slide { transition: none; } }
/* slideshow: a shorter strip (user found 4:3 too big) */
html body .ph-frame { aspect-ratio: 16 / 9; max-height: 240px; border-radius: 16px; }
@media (max-width: 480px) { html body .ph-frame { max-height: 200px; } }
html body .ph-nav { width: 2rem; height: 2rem; font-size: 1.35rem; }
/* Slideshow + newest Short side by side, same height (app.js addShortTile) */
.ph-combo .yts-head { gap: .8rem; }
.ph-combo .yts-head .yt-all + .yt-all { margin-left: .2rem; }
.ph-row { display: flex; gap: .6rem; height: 200px; }
@media (min-width: 481px) { .ph-row { height: 240px; } }
html body .ph-row .ph-frame { flex: 1 1 auto; min-width: 0; height: 100%; aspect-ratio: auto; max-height: none; }
.ph-short { position: relative; flex: 0 0 auto; height: 100%; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #0d141e;
  box-shadow: 0 18px 34px -24px rgba(20, 30, 45, .7); }
.ph-short iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ph-short-play { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.ph-short-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-short-play .yts-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ph-short-badge { position: absolute; top: .45rem; left: .45rem; padding: .1rem .45rem; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: .68rem; font-weight: 700; pointer-events: none; }
.ph-short-nav { position: absolute; left: 0; right: 0; bottom: .35rem; display: flex; align-items: center; justify-content: center; gap: .3rem; color: #fff; font-size: .7rem; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.ph-short-nav button { width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); color: #1f2f46; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.ph-short-close { position: absolute; top: .35rem; right: .35rem; width: 1.7rem; height: 1.7rem; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 1.1rem; cursor: pointer; z-index: 2; }
/* One-time invitation to get notifications (app.js setupPush), shown only inside the saved app */
.push-invite { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 9500;
  max-width: 460px; margin: 0 auto; display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1rem .9rem;
  border-radius: 18px; background: #fff; color: #1f2f46; box-shadow: 0 18px 40px -16px rgba(20, 30, 45, .55); animation: pushIn .35s ease; }
.push-bell { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: #e1e9dd; color: #3f6b3d; }
.push-bell svg { width: 1.25rem; height: 1.25rem; }
.push-txt { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; line-height: 1.4; }
.push-txt strong { font-size: 1rem; }
.push-btns { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .55rem; }
.push-btns button { border: 0; border-radius: 999px; padding: .55rem 1rem; font: inherit; font-weight: 700; cursor: pointer; }
.push-yes { background: #1f2f46; color: #fff; }
.push-no { background: transparent; color: #5b6573; }
:root.iec-dark .push-invite { background: #1c2533; color: #e6eae2; }
:root.iec-dark .push-no { color: #b7c0b4; }
@keyframes pushIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* Header logo as in the app icon: the round logo on navy (user chose design B) */
html body.brand-tnbcp .site-header .brand-icon { background: #1f2f46; padding: 2px; box-shadow: 0 0 0 1.5px rgba(241, 243, 238, .55); }

/* ---------- Activity Map: Check in, update text, photos (js/distmap.js) ---------- */
.dm-fab { position: fixed; right: 14px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 900; display: inline-flex; align-items: center; gap: .4rem;
  padding: .8rem 1.15rem; border-radius: 999px; background: #1f2f46; color: #fff; font-weight: 800; font-size: 1rem; text-decoration: none;
  box-shadow: 0 10px 24px -10px rgba(10,20,35,.6), 0 0 0 3px rgba(255,255,255,.85); }
.dm-fab:active { transform: scale(.97); }
.dm-ci-page .dm-head h1 { margin-bottom: .2rem; }
.dm-ci { gap: 1rem; }
.dm-ci-where { display: flex; flex-direction: column; gap: .55rem; }
.dm-ci-loc { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .92rem; font-weight: 600; color: #2c3f2a; background: #e6eee2; border-radius: 12px; padding: .55rem .8rem; }
.dm-ci-map { height: 170px; }
.dm-ci .dm-kinds { display: flex; flex-wrap: wrap; gap: .45rem; }
.dm-ci-text textarea, .dm-form .dm-ci-text textarea { width: 100%; font-size: 1.05rem; line-height: 1.45; }
.dm-ci-text label, .dm-ci-photos > span { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .3rem; }
.dm-dict { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .45rem; }
.dm-mic { display: inline-flex; align-items: center; gap: .45rem; border: 0; border-radius: 999px; padding: .6rem 1rem; font: inherit; font-weight: 700; cursor: pointer;
  background: #1f2f46; color: #fff; }
.dm-mic-ic { font-size: 1.15rem; line-height: 1; }
.dm-mic.on { background: #b42318; animation: dm-pulse 1.3s ease-in-out infinite; }
@keyframes dm-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(180,35,24,.45); } 50% { box-shadow: 0 0 0 8px rgba(180,35,24,0); } }
.dm-dict-lang { display: inline-flex; border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 1.5px #b9c6b5; }
.dm-dict-lang button { border: 0; background: transparent; padding: .45rem .7rem; font: inherit; font-size: .8rem; font-weight: 800; color: #5b6573; cursor: pointer; }
.dm-dict-lang button.on { background: #8fb08b; color: #10200f; }
.dm-dict-msg { flex: 1 1 100%; margin: 0; font-size: .8rem; color: #5b6573; }
.dm-dict-msg:empty { display: none; }
.dm-pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.dm-pick-t { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #e6eee2; }
.dm-pick-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-pick-t button { position: absolute; top: 4px; right: 4px; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 0; background: rgba(15,22,32,.72); color: #fff; font-size: .9rem; cursor: pointer; }
.dm-pick-add { aspect-ratio: 1; border-radius: 12px; border: 2px dashed #b9c6b5; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  font: inherit; font-size: .8rem; font-weight: 700; color: #3f5a3c; cursor: pointer; }
.dm-pick-add span:first-child { font-size: 1.5rem; }
.dm-pick-msg { margin: .3rem 0 0; font-size: .8rem; color: #9a3412; }
.dm-pick-msg:empty { display: none; }
.dm-ci-more { border-radius: 12px; background: rgba(31,47,70,.04); padding: .55rem .8rem; }
.dm-ci-more summary { cursor: pointer; font-weight: 700; font-size: .9rem; color: #3f5a3c; }
.dm-ci-more[open] { display: flex; flex-direction: column; gap: .7rem; }
.dm-pop-text { margin: .35rem 0 0; font-size: .86rem; line-height: 1.4; color: #24303d; white-space: normal; }
.dm-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: .45rem; }
.dm-photos.n1 { grid-template-columns: 1fr; }
.dm-photos.n2 { grid-template-columns: 1fr 1fr; }
.dm-ph { padding: 0; border: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: #e6eee2; cursor: zoom-in; }
.dm-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-row .dm-photos { flex: 1 1 100%; max-width: 330px; margin: .1rem 0 .3rem .2rem; }
.dm-row-text { display: block; font-size: .88rem; line-height: 1.4; color: #2b3644; margin-top: .2rem; }
.dm-row.focus { box-shadow: 0 0 0 2px #8fb08b; }
.dm-viewer { position: fixed; inset: 0; z-index: 10000; background: rgba(8,12,18,.94); display: flex; align-items: center; justify-content: center; }
.dm-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dm-viewer button { position: absolute; border: 0; background: rgba(255,255,255,.14); color: #fff; width: 2.8rem; height: 2.8rem; border-radius: 50%; font-size: 1.4rem; cursor: pointer; }
.dm-v-x { top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; }
.dm-v-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.dm-v-next { right: 10px; top: 50%; transform: translateY(-50%); }
html.iec-dark body.brand-tnbcp .dm-ci-loc { background: #273325; color: #c3d8c0; }
html.iec-dark body.brand-tnbcp .dm-ci-more { background: rgba(255,255,255,.05); }
html.iec-dark body.brand-tnbcp .dm-ci-more summary, html.iec-dark body.brand-tnbcp .dm-pick-add { color: #b2cfae; }
html.iec-dark body.brand-tnbcp .dm-pop-text { color: #24303d; }
html.iec-dark body.brand-tnbcp .dm-row-text { color: #dfe4d5; }
html.iec-dark body.brand-tnbcp .dm-ci-text label, html.iec-dark body.brand-tnbcp .dm-ci-photos > span { color: #dfe4d5; }
html.iec-dark body.brand-tnbcp .dm-mic:not(.on) { background: #8fb08b; color: #10200f; }
html.iec-dark body.brand-tnbcp .dm-fab { background: #8fb08b; color: #10200f; box-shadow: 0 10px 24px -10px rgba(0,0,0,.7), 0 0 0 3px rgba(20,26,36,.9); }

/* Notification choices (app.js openPushCard) */
.push-topics { display: flex; flex-direction: column; gap: .4rem; margin-top: .45rem; }
.push-topic { display: flex; align-items: flex-start; gap: .55rem; cursor: pointer; }
.push-topic input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: #1f2f46; flex: 0 0 auto; }
.push-topic span { display: flex; flex-direction: column; }
.push-topic small { font-size: .8rem; color: #5b6573; }
.push-msg { margin: .3rem 0 0; font-size: .8rem; color: #9a3412; }
.push-msg:empty { display: none; }
.push-set-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem; border: 0; border-radius: 999px; padding: .45rem .9rem;
  font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; background: #e1e9dd; color: #2c3f2a; }
.push-set-holder > .push-set-btn { margin: 0 0 .6rem; }
:root.iec-dark .push-topic small { color: #aab3be; }
:root.iec-dark .push-set-btn { background: #273325; color: #c3d8c0; }
/* Panama: map action buttons in the site's navy (sage at night), not the gold of the delivery map. */
html body.brand-tnbcp .dm-btn.primary { background: #1f2f46; color: #fff; }
html.iec-dark body.brand-tnbcp .dm-btn.primary { background: #8fb08b; color: #10200f; }
.dm-pop .dm-photos, .dm-pop .dm-photos.n1, .dm-pop .dm-photos.n2 { grid-template-columns: repeat(3, 1fr); }
.dm-pop .dm-ph { aspect-ratio: 1; }
.leaflet-popup-scrolled { border-top: 0; border-bottom: 0; }
.dm-ci-find { align-self: flex-start; font-size: .88rem; }
.dm-sat-btn { border: 0; border-radius: 999px; padding: .4rem .8rem; font: 700 .8rem/1.2 var(--font-sans, system-ui, sans-serif); cursor: pointer;
  background: rgba(255,255,255,.94); color: #1f2f46; box-shadow: 0 2px 8px rgba(10,20,35,.25); }
.dm-sat-btn[aria-pressed="true"] { background: #1f2f46; color: #fff; }

/* ---------- Verse of the day in the family photo's frame (app.js votdPhotoPanel; brand votdPhoto) ---------- */
/* The frame (white border, tilt, shadow) moves from the photo to its holder so photo and verse share it. */
html body.brand-tnbcp .hero-photo-swap { position: relative; z-index: 2; width: min(84%, 21rem); margin: 1.3rem auto -2rem; transform: rotate(-2.2deg);
  border: 7px solid #fdfdf8; border-bottom-width: 26px; border-radius: 3px; background: #fdfdf8;
  box-shadow: 0 18px 32px -16px rgba(0,0,0,0.65), 0 2px 6px rgba(0,0,0,0.18); }
html body.brand-tnbcp .hero-photo-swap .brand-hero-photo { width: 100%; margin: 0; border: 0; border-radius: 0; transform: none; box-shadow: none; cursor: pointer; transition: opacity 1s ease; }
.hero-votd { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45em; text-align: center;
  padding: 7% 8%; overflow: hidden; text-decoration: none; font-size: 17px; line-height: 1.38; opacity: 0; pointer-events: none; transition: opacity 1s ease;
  background: #feedd0; color: #12305a; }
.hero-votd-k { font-family: var(--font-sans, system-ui, sans-serif); font-size: .6em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #4a6b45; }
.hero-votd-v { font-family: var(--font-serif, Georgia, serif); font-style: italic; }
.hero-votd-r { font-family: var(--font-sans, system-ui, sans-serif); font-size: .68em; font-weight: 800; color: #4a6b45; }
.hero-photo-swap.show-verse .hero-votd { opacity: 1; pointer-events: auto; }
.hero-photo-swap.show-verse .brand-hero-photo { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hero-votd, html body.brand-tnbcp .hero-photo-swap .brand-hero-photo { transition: none; } }
.brand-footer-logo-link { display: inline-flex; flex: none; border-radius: 20px; }
/* Footer: the sending church's logo (brands.js footerLogo), wide, on a white tile. */
.brand-footer-church { display: block; width: 7.5rem; height: auto; border-radius: 12px; background: #fff; padding: .45rem .55rem; box-shadow: 0 0 0 1px rgba(31,47,70,.12), 0 8px 18px -10px rgba(10,20,35,.45); }

/* ---------- Email sign-up for the update letters (app.js emailSignupBox / subscribersCard) ---------- */
.sub-box { display: flex; gap: .8rem; align-items: flex-start; margin: 1.2rem 0 .4rem; padding: 1rem 1.05rem; border-radius: 16px; background: #fbfaf4;
  box-shadow: 0 0 0 1px rgba(31,47,70,.08), 0 10px 24px -18px rgba(10,20,35,.5); }
.sub-ic { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: #e1e9dd; color: #2f4a2c; }
.sub-ic svg { width: 1.25rem; height: 1.25rem; }
.sub-body { flex: 1 1 auto; min-width: 0; }
.sub-h { margin: .1rem 0 .2rem; font-size: 1.05rem; color: #1f2f46; }
.sub-p { margin: 0 0 .6rem; font-size: .88rem; line-height: 1.4; color: #4b5563; }
.sub-form { display: flex; gap: .45rem; flex-wrap: wrap; }
.sub-form input { flex: 1 1 11rem; min-width: 0; font: inherit; font-size: 1rem; padding: .6rem .75rem; border-radius: 10px; border: 1.5px solid #c9d3c6; background: #fff; color: #1f2a22; }
.sub-form button { flex: 0 0 auto; border: 0; border-radius: 10px; padding: .6rem 1rem; font: inherit; font-weight: 800; background: #1f2f46; color: #fff; cursor: pointer; }
.sub-form button:disabled { opacity: .6; }
.sub-msg { margin: .45rem 0 0; font-size: .86rem; color: #2f4a2c; font-weight: 600; }
.sub-msg:empty { display: none; }
:root.iec-dark .sub-box { background: #1c2533; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
:root.iec-dark .sub-h { color: #e6eae2; }
:root.iec-dark .sub-p { color: #aab3be; }
:root.iec-dark .sub-ic { background: #273325; color: #c3d8c0; }
:root.iec-dark .sub-form input { background: #141a24; color: #e6eae2; border-color: #3a4656; }
:root.iec-dark .sub-form button { background: #8fb08b; color: #10200f; }
:root.iec-dark .sub-msg { color: #b2cfae; }
.subs-count { margin: 0; font-size: .95rem; }
.subs-row { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid rgba(31,47,70,.1); font-size: .9rem; }
.subs-email { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subs-st { font-size: .75rem; font-weight: 800; padding: .1rem .5rem; border-radius: 999px; background: #e1e9dd; color: #2f4a2c; }
.subs-st.wait { background: #f3ecd9; color: #7a5b12; }
.subs-del { border: 0; background: none; color: #b42318; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }

/* Family photo (brands.js heroPhoto): any photo fills the same frame shape (the verse of the day shares it),
   trimmed at the edges and kept a little high so heads stay in. The admin preview uses the same frame. */
html body.brand-tnbcp .brand-hero-photo { aspect-ratio: 900 / 782; object-fit: cover; object-position: 50% 28%; height: auto; }
.hp-frame { width: min(100%, 17rem); margin: .2rem auto .6rem; background: #fdfdf8; border: 6px solid #fdfdf8; border-bottom-width: 20px; border-radius: 3px; transform: rotate(-2deg);
  box-shadow: 0 14px 26px -16px rgba(0,0,0,.6), 0 0 0 1px rgba(31,47,70,.08); }
.hp-img { display: block; width: 100%; aspect-ratio: 900 / 782; object-fit: cover; object-position: 50% 28%; background: #e9ece5; }
.hp-btns { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Main-site home: tactile look (2026-10-26) ----------
   Only active on the main PathLight site's home page: render() in app.js adds body.th-on
   for "/" when there is no BRAND, and viewHomeTactile() builds the .th-home markup.
   Ministry sites never get body.th-on, so nothing here touches them. */
body.th-on {
  background-color: #F4EEE2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E");
}
body.th-on .site-header { background: #13223A; box-shadow: none; }
body.th-on .app-main { padding-top: 0; }

.th-home {
  max-width: 34rem; margin: 0 auto;
  font-family: "Atkinson Hyperlegible Next", var(--font-sans);
  color: #15202E;
  display: flex; flex-direction: column;
}
.th-home a { color: inherit; text-decoration: none; }
.th-home a:focus-visible, .th-home button:focus-visible { outline: 3px solid #2F6B4F; outline-offset: 3px; }
.th-hand { font-family: "Caveat", cursive; font-weight: 600; }

/* Raised buttons: one light source (top left), a visible bottom edge, and they press down. */
.th-btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  border: 0; cursor: pointer; font: inherit; font-weight: 800;
  border-radius: 16px; padding: 1.05rem 1.2rem; font-size: 1.1rem;
  transition: transform .08s ease-out, box-shadow .08s ease-out;
}
.th-btn:active { transform: translateY(4px); }
.th-btn-block { display: flex; width: 100%; box-sizing: border-box; }
.th-btn-sm { padding: .55rem .9rem; font-size: .85rem; border-radius: 10px; }
.th-btn-gold { background: #F2B33D; color: #15202E !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.08), 0 5px 0 #B47A12, 0 14px 22px -8px rgba(0,0,0,.45); }
.th-btn-gold:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 0 #B47A12, 0 4px 8px -4px rgba(0,0,0,.4); }
.th-btn-green { background: #2F6B4F; color: #fff !important; font-size: 1rem; padding: .95rem; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 5px 0 #1C4532, 0 14px 22px -8px rgba(28,69,50,.5); }

/* 1. Navy lantern box (continues the navy header). */
.th-hero {
  background: #13223A; color: #F4EEE2;
  margin: 0 -1rem; padding: 0 0 2.6rem;
  border-radius: 0 0 28px 28px;
  box-shadow: 0 10px 24px -12px rgba(11,22,38,.6);
}
.th-lantern { position: relative; height: 15rem; display: flex; justify-content: center; align-items: center; }
.th-glow { position: absolute; width: 16rem; height: 16rem; border-radius: 50%; background: radial-gradient(circle, rgba(242,179,61,.45) 0%, rgba(242,179,61,.12) 40%, rgba(242,179,61,0) 70%); }
.th-l { position: relative; width: 96px; height: 172px; }
.th-l i, .th-l b { position: absolute; display: block; }
.th-ring { left: 33px; top: 0; width: 30px; height: 26px; border: 4px solid #3A4A63; border-bottom: 0; border-radius: 16px 16px 0 0; box-sizing: border-box; }
.th-cap { left: 14px; top: 24px; width: 68px; height: 20px; background: #3A4A63; clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.th-glass { left: 10px; top: 44px; width: 76px; height: 112px; border-radius: 6px; background: radial-gradient(circle at 50% 60%, #FFE7A8 0%, #F2B33D 32%, rgba(242,179,61,.35) 64%, rgba(242,179,61,.15) 100%); box-shadow: inset 0 0 0 4px #3A4A63, inset 0 0 0 5px rgba(255,255,255,.15), 0 0 40px rgba(242,179,61,.55); }
.th-bar-v { left: 36px; top: 0; bottom: 0; width: 4px; background: #3A4A63; }
.th-bar-h { left: 0; right: 0; top: 52px; height: 4px; background: #3A4A63; }
.th-flame { left: 31px; top: 46px; width: 14px; height: 24px; border-radius: 50% 50% 45% 45%; background: #FFF6D8; box-shadow: 0 0 14px #FFE7A8; }
.th-base { left: 6px; top: 156px; width: 84px; height: 16px; background: #3A4A63; border-radius: 3px; box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 4px 6px rgba(0,0,0,.4); }
.th-hero-text { padding: 0 1.5rem; }
.th-hand-gold { color: #F2B33D; font-size: 1.5rem; margin: 0 0 .2rem; transform: rotate(-2deg); transform-origin: left; }
.th-h1 { font-family: "Libre Caslon Display", Georgia, serif; font-weight: 400; font-size: clamp(2.6rem, 11vw, 3.6rem); line-height: .98; margin: 0 0 1.1rem; color: #F4EEE2; }
.th-lead { font-size: 1.125rem; line-height: 1.55; margin: 0 0 1.6rem; color: #C9D3E0; }
.th-hero-share {
  display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  margin-top: 1.1rem; padding: .7rem; background: transparent; border: 0; cursor: pointer;
  color: #F2C46D; font: inherit; font-weight: 700; font-size: 1rem;
}

/* 2. Peek at the study. */
.th-peek-wrap { padding: 3rem .9rem 1rem; }
.th-peek {
  position: relative; display: block; background: #FFFDF8; border-radius: 6px; padding: 1.4rem 1.25rem 1.25rem;
  transform: rotate(-2.2deg);
  box-shadow: inset 0 1px 0 #fff, 0 18px 30px -16px rgba(26,44,69,.5), 0 2px 4px rgba(26,44,69,.12);
}
.th-tape { position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; margin-left: -46px; background: rgba(242,179,61,.55); transform: rotate(3deg); }
.th-peek-k { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8C2F39; margin-bottom: .5rem; }
.th-peek-q { display: block; font-family: "Libre Caslon Text", Georgia, serif; font-size: 1.25rem; line-height: 1.3; margin-bottom: .8rem; }
.th-opt { display: flex; align-items: flex-start; gap: .6rem; padding: .65rem .75rem; border-radius: 10px; background: #F4EEE2; box-shadow: inset 0 1px 2px rgba(26,44,69,.18); font-size: .95rem; line-height: 1.35; margin-top: .5rem; }
.th-radio { flex: 0 0 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 2px solid #8A8577; box-sizing: border-box; }
.th-opt-on { background: #E7F0EA; box-shadow: inset 0 0 0 2px #2F6B4F; font-weight: 700; }
.th-opt-on .th-radio { border: 5px solid #2F6B4F; }
.th-peek-note { font-size: 1.4rem; color: #5B5546; text-align: right; margin: .9rem .25rem 0; }

/* 3. Objects to pick up. */
.th-pick { padding: 1.6rem 0 .5rem; }
.th-h2 { font-family: "Libre Caslon Text", Georgia, serif; font-weight: 700; font-size: 1.625rem; margin: 0 0 .25rem; padding: 0 .25rem; }
.th-h3 { font-family: "Libre Caslon Text", Georgia, serif; font-weight: 700; font-size: 1.3rem; margin: 0 0 .75rem; }
.th-sub { font-size: .95rem; color: #5B5546; margin: 0 0 1.1rem; padding: 0 .25rem; }
.th-tray {
  display: block; position: relative; background: #FFFDF8; border: 1px solid #E3D8C3; border-radius: 20px;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #DCCFB8, 0 16px 28px -14px rgba(26,44,69,.45);
  transition: transform .08s ease-out, box-shadow .08s ease-out;
}
.th-tray:active { transform: translateY(4px); box-shadow: inset 0 1px 0 #fff, 0 0 0 #DCCFB8, 0 6px 12px -8px rgba(26,44,69,.4); }
.th-tray-t { display: block; font-family: "Libre Caslon Text", Georgia, serif; font-weight: 700; font-size: 1.2rem; line-height: 1.2; margin-bottom: .3rem; }
.th-tray-d { display: block; font-size: .9rem; line-height: 1.45; color: #5B5546; }
.th-tray-go { display: block; margin-top: .6rem; font-size: .875rem; font-weight: 800; color: #8C2F39; }

.th-tray-bible { display: flex; align-items: center; gap: 1.1rem; padding: 1.4rem 1.1rem 1.4rem 1.4rem; margin-bottom: 1rem; }
.th-tray-bible .th-tray-t { font-size: 1.375rem; }
.th-book { position: relative; flex: 0 0 100px; height: 138px; transform: rotate(-5deg); }
.th-book i, .th-book b { position: absolute; display: block; }
.th-pages { left: 6px; top: 5px; width: 96px; height: 134px; border-radius: 3px 8px 8px 3px; background: repeating-linear-gradient(0deg, #F6EEDF 0 2px, #E1D4BC 2px 3px); }
.th-cover { left: 0; top: 0; width: 96px; height: 134px; border-radius: 4px 8px 8px 4px; background: #1A2C45; box-shadow: inset 9px 0 8px -4px rgba(0,0,0,.45), inset -1px 0 0 rgba(255,255,255,.12), 0 6px 10px -4px rgba(0,0,0,.4); }
.th-foil { left: 16px; right: 9px; top: 10px; bottom: 10px; border: 1px solid #C9A24A; border-radius: 2px; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-family: "Libre Caslon Text", Georgia, serif; color: #E2C374; }
.th-foil-s { font-size: 9px; letter-spacing: .18em; }
.th-foil-b { font-size: 13px; font-weight: 700; letter-spacing: .12em; }
.th-ribbon { left: 62px; top: 126px; width: 10px; height: 34px; background: #8C2F39; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }

.th-row { display: flex; gap: .9rem; margin-bottom: 1rem; }
.th-tray-sm { flex: 1 1 0; min-width: 0; padding: 1.1rem .85rem; }
.th-tray-sm .th-tray-t { font-size: clamp(.9rem, 3.9vw, 1.15rem); }
.th-tracts, .th-notebook { position: relative; display: block; height: 112px; margin-bottom: .75rem; }
.th-tracts i, .th-notebook i, .th-notebook b { position: absolute; display: block; }
.th-tr1 { left: 12%; top: 14px; width: 72px; height: 96px; background: #E9DFCB; border-radius: 2px; transform: rotate(-11deg); box-shadow: 0 3px 6px rgba(26,44,69,.18); }
.th-tr2 { left: 26%; top: 8px; width: 72px; height: 96px; background: #D9E4EE; border-radius: 2px; transform: rotate(4deg); box-shadow: 0 3px 6px rgba(26,44,69,.18); }
.th-tr3 { left: 38%; top: 4px; width: 72px; height: 96px; background: #FFFDF8; border-radius: 2px; transform: rotate(12deg); box-shadow: 0 4px 8px rgba(26,44,69,.25); padding: 12px 8px; box-sizing: border-box; }
.th-tr3 b { display: block; height: 3px; background: #D9D0BE; margin-bottom: 6px; }
.th-tr3 b:first-child { height: 5px; background: #1A2C45; width: 70%; margin-bottom: 9px; }
.th-tr3 b:nth-child(3) { width: 80%; }
.th-tr3 b:last-child { width: 55%; }
.th-nb { left: 10%; top: 6px; width: 104px; height: 100px; border-radius: 4px; transform: rotate(-3deg); background: repeating-linear-gradient(180deg, #fff 0 15px, #C9D8E8 15px 16px); box-shadow: 0 4px 8px rgba(26,44,69,.22); }
.th-nb-spine { left: 0; top: 0; bottom: 0; width: 12px; background: #1A2C45; border-radius: 4px 0 0 4px; }
.th-nb-margin { left: 26px; top: 0; bottom: 0; width: 1px; background: #D98C8C; }
.th-nb-check { left: 40px; top: 30px; font-family: "Caveat", cursive; font-size: 30px; color: #2F6B4F; }

.th-tray-ask { padding: 1.25rem 1.1rem; }
.th-ask-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; }
.th-ask-badge { flex: 0 0 44px; height: 44px; border-radius: 50%; background: #1A2C45; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 0 #0B1626; }
.th-ask-badge img { width: 100%; height: 100%; object-fit: cover; }
.th-ask-t { display: block; font-weight: 800; font-size: 1rem; }
.th-ask-s { font-size: .8rem; color: #5B5546; }
.th-bubbles { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.th-bub { max-width: 80%; padding: .55rem .75rem; font-size: .9rem; line-height: 1.35; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.th-bub-me { align-self: flex-end; background: #DCEFE2; border-radius: 14px 14px 4px 14px; }
.th-bub-them { align-self: flex-start; background: #F4EEE2; border-radius: 14px 14px 14px 4px; }

/* 4. More, as raised keys. */
.th-more { padding: 1.6rem .25rem .5rem; }
.th-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.th-key {
  display: flex; align-items: center; gap: .65rem; padding: .85rem .8rem; background: #FFFDF8; border: 1px solid #E3D8C3; border-radius: 14px;
  font-weight: 800; font-size: .9rem; line-height: 1.25;
  box-shadow: inset 0 1px 0 #fff, 0 4px 0 #D2C4AA, 0 10px 14px -10px rgba(26,44,69,.5);
  transition: transform .08s ease-out, box-shadow .08s ease-out;
}
.th-key:active { transform: translateY(4px); box-shadow: inset 0 1px 0 #fff, 0 0 0 #D2C4AA; }
.th-key-icon { flex: 0 0 36px; height: 36px; border-radius: 10px; background: #1A2C45; color: #F4EEE2; display: flex; align-items: center; justify-content: center; }
.th-key-icon svg { width: 20px; height: 20px; }

/* 5. Verse of the day. */
.th-votd-wrap { padding: 2rem .4rem .5rem; }
.th-votd {
  background: #1A2C45; color: #F4EEE2; border-radius: 6px; padding: 1.7rem 1.4rem 1.5rem;
  box-shadow: inset 0 0 0 6px #1A2C45, inset 0 0 0 7px #C9A24A, 0 18px 30px -16px rgba(11,22,38,.6);
}
.th-votd-k { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #E2C374; margin: 0 0 .6rem; }
.th-votd-v { display: block; font-family: "Libre Caslon Text", Georgia, serif; font-style: italic; font-size: 1.3rem; line-height: 1.45; margin-bottom: .9rem; color: #F4EEE2 !important; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.th-votd-foot { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.th-votd-r { font-size: .875rem; font-weight: 800; color: #E2C374; letter-spacing: .04em; }

/* 6. Share chips. */
.th-share { padding: 2rem .4rem .5rem; }
.th-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.th-chip {
  display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: .6rem 1rem; cursor: pointer;
  background: #FFFDF8; border: 1px solid #E3D8C3; border-radius: 12px; font: inherit; font-weight: 800; font-size: .9rem; color: #15202E;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #D2C4AA, 0 6px 10px -6px rgba(26,44,69,.35);
  transition: transform .08s ease-out, box-shadow .08s ease-out;
}
.th-chip:active { transform: translateY(3px); box-shadow: inset 0 1px 0 #fff, 0 0 0 #D2C4AA; }
.th-home > .site-footer { margin-top: 2.2rem; background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .th-btn, .th-tray, .th-key, .th-chip { transition: none; }
}

/* ---------- Main-site tactile look: header, bottom bar, footer, inner pages, computer layout (2026-10-26) ----------
   body.th-site is set by render() in app.js on the main PathLight site only (no BRAND), except on
   the admin pages; the visitor study (#/welcome, body.landing-page) keeps its own look.
   Ministry sites never get body.th-site, so nothing here touches them. */
body.th-site {
  background-color: #F4EEE2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E");
  color: #15202E;
  overflow-x: clip;
}
body.th-site .app-main { font-family: "Atkinson Hyperlegible Next", var(--font-sans); }

/* Header */
body.th-site .site-header { background: #13223A; box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 10px 22px -18px rgba(0,0,0,.6); }
body.th-on .site-header { box-shadow: none; }
body.th-site .brand-name { font-family: "Libre Caslon Text", Georgia, serif; font-weight: 700; font-size: 1.15rem; letter-spacing: 0; }
body.th-site .brand-tagline { font-family: "Caveat", cursive; font-size: 1rem; color: #F2C46D; opacity: 1; }
body.th-site .brand-icon { border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 0 #0B1626, 0 0 18px -4px rgba(242,179,61,.45); }
body.th-site .pill-btn {
  border: 1px solid rgba(244,238,226,.18); background: #1D3050; color: #F4EEE2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 #0B1626; transition: transform .08s ease-out, box-shadow .08s ease-out;
}
body.th-site .pill-btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 #0B1626; }
body.th-site .join-cta-btn { background: #F2B33D; color: #15202E; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 3px 0 #B47A12; }
body.th-site .join-cta-btn:hover { background: #F5BF55; }
body.th-site .join-cta-btn:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 #B47A12; }
body.th-site .lang-switch { border: 0; background: #0B1626; box-shadow: inset 0 2px 3px rgba(0,0,0,.55); }
body.th-site .lang-btn { color: #AEB9C9; font-weight: 800; }
body.th-site .lang-btn.active { background: #F4EEE2; color: #15202E; box-shadow: inset 0 1px 0 #fff, 0 2px 3px rgba(0,0,0,.4); }

/* Top menu (computers only; copied from the bottom bar by ensureTopNav() in app.js) */
.th-topnav { display: none; }
body.th-site .th-topnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .4rem; }
body.th-site .th-topnav a {
  display: flex; align-items: center; gap: .5rem; height: 2.75rem; padding: 0 .9rem 0 .45rem; border-radius: 12px;
  color: #DCE3EC; font-weight: 700; font-size: .92rem; text-decoration: none;
  transition: background .12s, transform .08s ease-out, box-shadow .08s ease-out;
}
body.th-site .th-topnav a:hover { background: rgba(244,238,226,.08); color: #fff; }
body.th-site .th-topnav a .nav-icon { width: 1.9rem; height: 1.9rem; border-radius: 9px; background: #1D3050; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 0 #0B1626; }
body.th-site .th-topnav a.active { background: #F4EEE2; color: #15202E; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #B9AC93; }
body.th-site .th-topnav a.active .nav-icon { background: #13223A; color: #F2B33D; }
body.th-site .th-topnav a:active { transform: translateY(2px); }

/* Bottom bar (phones and tablets) */
body.th-site .bottom-nav { background: #FFFDF8; border-top: 1px solid #E3D8C3; box-shadow: 0 -10px 22px -18px rgba(26,44,69,.45); }
body.th-site .bottom-nav a { color: #5B5546; font-weight: 700; }
body.th-site .bottom-nav .nav-icon { background: #1A2C45; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 3px 0 #0B1626; border-radius: 11px; }
body.th-site .bottom-nav a.active { color: #15202E; }
body.th-site .bottom-nav a.active .nav-icon { background: #F2B33D; color: #13223A; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 0 #B47A12; transform: translateY(-2px); }

/* Footer: a navy band */
body.th-site .site-footer {
  position: relative; margin-top: 3rem; border: 0; color: #C9D3E0;
  background: #13223A; padding: 2.2rem 1.25rem 2.4rem;
  margin-left: -1rem; margin-right: -1rem; border-radius: 28px 28px 0 0;
}
body.th-site .site-footer .ministry-line { color: #DCE3EC; font-size: .95rem; max-width: 26rem; }
body.th-site .site-footer img { width: 4rem; height: 4rem; padding: 4px; background: #FFFDF8; border-radius: 12px; box-shadow: 0 3px 0 #0B1626, 0 10px 18px -8px rgba(0,0,0,.6); }
body.th-site .site-footer a { color: #F2C46D; }
body.th-site .site-footer .footer-privacy-line { font-size: .85rem; }
body.th-site .app-main:has(> * > .site-footer) { padding-bottom: calc(3.6rem + env(safe-area-inset-bottom)); }

/* Inner pages */
body.th-site:not(.landing-page) .page-header h1 { font-family: "Libre Caslon Display", Georgia, serif; font-weight: 400; font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.05; color: #15202E; }
body.th-site:not(.landing-page) .page-header .subtitle { color: #5B5546; font-size: 1rem; }
body.th-site:not(.landing-page) .back-link {
  color: #15202E; background: #FFFDF8; border: 1px solid #E3D8C3; border-radius: 999px; padding: .45rem .9rem; margin-bottom: 1rem;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #D2C4AA; transition: transform .08s ease-out, box-shadow .08s ease-out;
}
body.th-site:not(.landing-page) .back-link:active { transform: translateY(3px); box-shadow: inset 0 1px 0 #fff, 0 0 0 #D2C4AA; }

body.th-site:not(.landing-page) .app-main .card,
body.th-site:not(.landing-page) .faq-item,
body.th-site:not(.landing-page) .study-list-item,
body.th-site:not(.landing-page) .bible-book-cell,
body.th-site:not(.landing-page) .bible-chapter-cell,
body.th-site:not(.landing-page) .topic-btn,
body.th-site:not(.landing-page) .lib-item,
body.th-site:not(.landing-page) .app-main .tile {
  background: #FFFDF8; border: 1px solid #E3D8C3; color: #15202E;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #DCCFB8, 0 14px 24px -16px rgba(26,44,69,.45);
}
body.th-site:not(.landing-page) .study-list-item,
body.th-site:not(.landing-page) .bible-book-cell,
body.th-site:not(.landing-page) .bible-chapter-cell,
body.th-site:not(.landing-page) .topic-btn,
body.th-site:not(.landing-page) .app-main .tile { transition: transform .08s ease-out, box-shadow .08s ease-out; }
body.th-site:not(.landing-page) .study-list-item:hover,
body.th-site:not(.landing-page) .bible-book-cell:hover,
body.th-site:not(.landing-page) .bible-chapter-cell:hover,
body.th-site:not(.landing-page) .topic-btn:hover,
body.th-site:not(.landing-page) .app-main .tile:hover { background: #FFFFFF; transform: translateY(-1px); }
body.th-site:not(.landing-page) .study-list-item:active,
body.th-site:not(.landing-page) .bible-book-cell:active,
body.th-site:not(.landing-page) .bible-chapter-cell:active,
body.th-site:not(.landing-page) .topic-btn:active,
body.th-site:not(.landing-page) .app-main .tile:active { transform: translateY(3px); box-shadow: inset 0 1px 0 #fff, 0 0 0 #DCCFB8, 0 6px 12px -8px rgba(26,44,69,.4); }
body.th-site:not(.landing-page) .bible-book-cell .book-name,
body.th-site:not(.landing-page) .topic-btn,
body.th-site:not(.landing-page) .faq-item summary,
body.th-site:not(.landing-page) .study-list-item .title { font-family: "Libre Caslon Text", Georgia, serif; font-weight: 700; }
body.th-site:not(.landing-page) .bible-book-cell .book-tagline { color: #5B5546; }
body.th-site:not(.landing-page) .bible-testament-heading { font-family: "Libre Caslon Text", Georgia, serif; font-weight: 700; color: #15202E; }
body.th-site:not(.landing-page) .topics-kicker { font-family: "Libre Caslon Text", Georgia, serif; font-style: italic; color: #15202E; }
body.th-site:not(.landing-page) .topics-kicker-ref { font-family: "Atkinson Hyperlegible Next", sans-serif; font-style: normal; font-weight: 800; color: #8C2F39; }
body.th-site:not(.landing-page) .study-num { background: #1A2C45; color: #F4EEE2; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 0 #0B1626; }
body.th-site:not(.landing-page) .study-list-item.done .study-num { background: #2F6B4F; }
body.th-site:not(.landing-page) .faq-item .plus { color: #8C2F39; }
body.th-site:not(.landing-page) .faq-item .answer { color: #3D4654; }
body.th-site:not(.landing-page) .topic-verse-text,
body.th-site:not(.landing-page) .bible-passage { font-family: "Libre Caslon Text", Georgia, serif; color: #15202E; }
body.th-site:not(.landing-page) .bible-passage { font-size: 1.15rem; line-height: 1.85; }
body.th-site:not(.landing-page) .bible-vnum { color: #8C2F39; font-family: "Atkinson Hyperlegible Next", sans-serif; font-weight: 800; }
body.th-site:not(.landing-page) .topic-verse-ref { color: #8C2F39; font-weight: 800; }

/* Buttons and form fields on inner pages */
body.th-site:not(.landing-page) .app-main .btn { border-radius: 14px; font-weight: 800; transition: transform .08s ease-out, box-shadow .08s ease-out; }
body.th-site:not(.landing-page) .app-main .btn:active { transform: translateY(4px); }
body.th-site:not(.landing-page) .app-main .btn-primary { background: #1A2C45; color: #F4EEE2; border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 5px 0 #0B1626, 0 14px 22px -10px rgba(11,22,38,.5); filter: none; }
body.th-site:not(.landing-page) .app-main .btn-primary:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 0 #0B1626; }
body.th-site:not(.landing-page) .app-main .btn-outline { background: #FFFDF8; color: #15202E; border: 1px solid #E3D8C3; box-shadow: inset 0 1px 0 #fff, 0 4px 0 #D2C4AA; }
body.th-site:not(.landing-page) .app-main .btn-outline:active { box-shadow: inset 0 1px 0 #fff, 0 0 0 #D2C4AA; }
body.th-site:not(.landing-page) .field input,
body.th-site:not(.landing-page) .field textarea,
body.th-site:not(.landing-page) .field select,
body.th-site:not(.landing-page) .lib-search {
  background: #F4EEE2; border: 1px solid #DCCFB8; border-radius: 12px; box-shadow: inset 0 2px 3px rgba(26,44,69,.14); color: #15202E;
}
body.th-site:not(.landing-page) .field input:focus,
body.th-site:not(.landing-page) .field textarea:focus,
body.th-site:not(.landing-page) .field select:focus { outline: 3px solid rgba(47,107,79,.45); outline-offset: 1px; background: #FFFDF8; }
body.th-site:not(.landing-page) .field label { font-weight: 800; color: #15202E; }

@media (prefers-reduced-motion: reduce) {
  body.th-site .pill-btn, body.th-site .th-topnav a, body.th-site:not(.landing-page) .app-main .btn,
  body.th-site:not(.landing-page) .study-list-item, body.th-site:not(.landing-page) .bible-book-cell,
  body.th-site:not(.landing-page) .topic-btn, body.th-site:not(.landing-page) .app-main .tile { transition: none; }
}

/* ---- Tablets: a little more room ---- */
@media (min-width: 720px) {
  body.th-site:not(.landing-page) .app-main { max-width: 60rem; padding-left: 1.5rem; padding-right: 1.5rem; }
  body.th-site .header-inner { max-width: 60rem; }
  body.th-site .site-footer { margin-left: -1.5rem; margin-right: -1.5rem; }
  body.th-site .th-hero { margin-left: -1.5rem; margin-right: -1.5rem; }
  body.th-site:not(.landing-page) .stack-sm:has(> .study-list-item),
  body.th-site:not(.landing-page) .stack-sm:has(> .faq-item) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; align-items: start; }
}

/* ---- Computers: full width (the bottom bar stays as the menu) ---- */
@media (min-width: 1024px) {
  body.th-site:not(.landing-page) .app-main { max-width: 76rem; padding: 2rem 2.5rem 4rem; }
  body.th-site.th-on:not(.landing-page) .app-main { padding-top: 0; }
  body.th-site .header-inner { max-width: 76rem; padding: .7rem 2.5rem; flex-wrap: nowrap; }
  body.th-site .header-actions { margin-left: auto; flex-wrap: nowrap; }
  body.th-site .site-footer { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; padding: 2.6rem 2.5rem 3rem; flex-direction: row; justify-content: center; gap: 1.5rem; }

  /* Inner pages: wide grids, comfortable reading width */
  body.th-site:not(.landing-page) .page-header { max-width: 48rem; }
  body.th-site:not(.landing-page) .bible-book-grid { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
  body.th-site:not(.landing-page) .topics-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
  body.th-site:not(.landing-page) .bible-chapter-grid { grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); }
  body.th-site:not(.landing-page) .bible-reader-card,
  body.th-site:not(.landing-page) .study-nav-row { max-width: 48rem; margin-left: auto; margin-right: auto; width: 100%; }
  body.th-site:not(.landing-page) .bible-reader-card { padding: 2.2rem 2.6rem; }
  body.th-site:not(.landing-page) .stack-sm:has(> .study-list-item),
  body.th-site:not(.landing-page) .stack-sm:has(> .faq-item) { gap: 1.1rem; }
  body.th-site:not(.landing-page) .lib-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  body.th-site:not(.landing-page) .app-main form,
  body.th-site:not(.landing-page) .app-main .card:has(form) { max-width: 40rem; }

  /* Home: full-width lantern banner, then two columns */
  body.th-on .th-home {
    max-width: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 3.5rem; align-items: start;
  }
  body.th-on .th-hero {
    grid-column: 1 / -1; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center;
    padding: 2.5rem max(2.5rem, calc(50vw - 38rem + 2.5rem)) 3.5rem; border-radius: 0 0 40px 40px;
  }
  body.th-on .th-lantern { height: 22rem; transform: scale(1.35); }
  body.th-on .th-hero-text { padding: 0; max-width: 36rem; }
  body.th-on .th-h1 { font-size: 4.2rem; }
  body.th-on .th-lead { font-size: 1.25rem; }
  body.th-on .th-hero .th-btn-block { display: inline-flex; width: auto; padding-left: 2.2rem; padding-right: 2.2rem; }
  body.th-on .th-hero-share { display: inline-flex; width: auto; margin: 0 0 0 1rem; vertical-align: middle; }
  body.th-on .th-peek-wrap { grid-column: 1; grid-row: 2; padding: 3.5rem 1rem 1rem; }
  body.th-on .th-pick { grid-column: 2; grid-row: 2 / span 3; padding-top: 3rem; }
  body.th-on .th-votd-wrap { grid-column: 1; grid-row: 3; padding: 2.5rem 0 0; }
  body.th-on .th-more { grid-column: 1; grid-row: 4; padding: 2.5rem 0 0; align-self: start; }
  body.th-on .th-share { grid-column: 2; grid-row: 5; padding: 2rem 0 0; }
  body.th-on .th-home > .site-footer { grid-column: 1 / -1; margin-top: 3.5rem; }
  body.th-on .th-tray-sm .th-tray-t { font-size: 1.2rem; }
  body.th-on .th-tray-bible { padding: 1.8rem; }
}

/* Main-site tactile look: fixes after preview check */
body.th-site:not(.landing-page) .back-link { display: inline-flex; align-self: flex-start; width: max-content; max-width: 100%; }
body.th-site:not(.landing-page) .topics-kicker { background: #FFFDF8; border: 1px solid #E3D8C3; border-left: 4px solid #F2B33D; border-radius: 12px; box-shadow: 0 2px 0 #E3D8C3; }
body.th-site:not(.landing-page) .stack-sm > li { list-style: none; }
@media (min-width: 720px) {
  body.th-site:not(.landing-page) .stack-sm:has(> li > .study-list-item),
  body.th-site:not(.landing-page) .stack-sm:has(> li > .faq-item) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; align-items: start; }
  body.th-site:not(.landing-page) .stack-sm > li > .study-list-item { height: 100%; }
}
@media (min-width: 1024px) {
  body.th-site:not(.landing-page) .stack-sm:has(> li > .study-list-item),
  body.th-site:not(.landing-page) .stack-sm:has(> li > .faq-item) { gap: 1.1rem; }
  body.th-site:not(.landing-page) .bible-reader-card,
  body.th-site:not(.landing-page) .study-nav-row { margin-left: 0; margin-right: 0; }
}

/* ---------- Main-site tactile look: interactive visitor study (#/welcome) (2026-10-26) ----------
   Scoped to body.th-site.landing-page: body.th-site is only ever set on the main PathLight site
   (never when a ministry BRAND is active), so ministry sites keep their own study looks. */
/* Opening lantern screen: stays a navy night, now in the site's fonts and gold */
body.th-site.landing-page .welcome-loading { background: radial-gradient(90% 55% at 50% 42%, rgba(242,179,61,.16), transparent 70%), #13223A; }
body.th-site.landing-page .welcome-loading-icon-wrap { box-shadow: 0 0 0 4px #F4EEE2, 0 0 46px 6px rgba(242,179,61,.45); }
body.th-site.landing-page .welcome-loading-name { font-family: "Libre Caslon Display", Georgia, serif; font-weight: 400; font-size: 2.3rem; color: #F4EEE2; }
body.th-site.landing-page .welcome-loading-tagline { font-family: "Caveat", cursive; font-size: 1.45rem; color: #F2C46D; }
body.th-site.landing-page .welcome-loading .welcome-exit { color: #DCE3EC; }

/* Study screen: paper page under a navy band */
body.th-site.landing-page .welcome-study {
  background: transparent; color: #15202E; justify-content: flex-start;
  font-family: "Atkinson Hyperlegible Next", var(--font-sans);
}
body.th-site.landing-page .welcome-topbar {
  margin: -1.5rem -1.25rem 2.25rem; padding: calc(.9rem + env(safe-area-inset-top)) 1.25rem 1.6rem;
  background: radial-gradient(70% 140% at 50% 0%, rgba(242,179,61,.14), transparent 70%), #13223A;
  border-radius: 0 0 26px 26px; box-shadow: 0 10px 22px -16px rgba(11,22,38,.7);
}
body.th-site.landing-page .welcome-study .welcome-exit {
  display: inline-flex; align-items: center; height: 2.5rem; padding: 0 1rem; border-radius: 999px;
  background: #1D3050; color: #F4EEE2; border: 1px solid rgba(244,238,226,.18); text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 #0B1626; transition: transform .08s ease-out, box-shadow .08s ease-out;
}
body.th-site.landing-page .welcome-study .welcome-exit:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 #0B1626; }
body.th-site.landing-page .welcome-lang { border: 0; background: #0B1626; box-shadow: inset 0 2px 3px rgba(0,0,0,.55); }

/* The question card: a taped paper card */
body.th-site.landing-page .dialogue-card {
  position: relative; max-width: 30rem; margin: auto auto 0;
  background: #FFFDF8; color: #15202E; border: 0; border-radius: 8px; padding: 2rem 1.35rem 1.5rem;
  box-shadow: inset 0 1px 0 #fff, 0 22px 34px -18px rgba(26,44,69,.5), 0 2px 4px rgba(26,44,69,.12);
}
body.th-site.landing-page .welcome-study .dialogue-card::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 26px; margin-left: -48px;
  background: rgba(242,179,61,.55); transform: rotate(-2deg);
}
body.th-site.landing-page .th-progress { height: 6px; border-radius: 999px; background: #EDE5D4; box-shadow: inset 0 1px 2px rgba(26,44,69,.2); margin: 0 0 1.3rem; overflow: hidden; }
body.th-site.landing-page .th-progress span { display: block; height: 100%; border-radius: 999px; background: #F2B33D; transition: width .3s ease; }
body.th-site.landing-page .dialogue-prompt {
  font-family: "Libre Caslon Text", Georgia, serif; font-weight: 400; font-size: clamp(1.35rem, 5vw, 1.6rem); line-height: 1.35; color: #15202E;
}

/* Answers: raised paper keys with a radio dot */
body.th-site.landing-page .dialogue-options { gap: .75rem; }
body.th-site.landing-page .dialogue-option {
  display: flex; align-items: flex-start; gap: .75rem; padding: .95rem 1rem; border-radius: 12px;
  background: #FFFDF8; color: #15202E; border: 1px solid #E3D8C3; font-size: 1.03rem; line-height: 1.45;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #D2C4AA; transition: transform .08s ease-out, box-shadow .08s ease-out, background .12s;
}
body.th-site.landing-page .dialogue-option::before {
  content: ""; flex: 0 0 18px; height: 18px; margin-top: 3px; border-radius: 50%; border: 2px solid #8A8577; box-sizing: border-box; background: #fff;
}
body.th-site.landing-page .dialogue-option:hover { background: #FFF8E8; }
body.th-site.landing-page .dialogue-option:active { transform: translateY(3px); box-shadow: inset 0 1px 0 #fff, 0 0 0 #D2C4AA; }
body.th-site.landing-page .dialogue-option.selected { background: #FFF3D6; color: #15202E; border-color: #E2B65A; font-weight: 700; transform: translateY(2px); box-shadow: inset 0 1px 2px rgba(26,44,69,.15), 0 1px 0 #D2C4AA; }
body.th-site.landing-page .dialogue-option.selected::before { border: 5px solid #15202E; }
body.th-site.landing-page .dialogue-option.selected.correct { background: #E7F0EA; color: #1F4D37; border-color: #2F6B4F; box-shadow: inset 0 0 0 1px #2F6B4F; }
body.th-site.landing-page .dialogue-option.selected.correct::before { border: 5px solid #2F6B4F; }
body.th-site.landing-page .dialogue-option.correct:not(.selected) { border-color: #2F6B4F; box-shadow: inset 0 0 0 1px #2F6B4F, 0 3px 0 #B9CDBF; }
body.th-site.landing-page .dialogue-option.selected.incorrect { background: #F7E6E4; color: #7A2630; border-color: #8C2F39; box-shadow: inset 0 0 0 1px #8C2F39; }
body.th-site.landing-page .dialogue-option.selected.incorrect::before { border: 5px solid #8C2F39; }

/* Feedback, the revealed answer and the verse */
body.th-site.landing-page .dialogue-correct-badge { color: #2F6B4F; font-weight: 800; }
body.th-site.landing-page .dialogue-feedback {
  background: #F4EEE2; color: #15202E; border-radius: 10px; box-shadow: inset 0 1px 3px rgba(26,44,69,.18); line-height: 1.6;
}
body.th-site.landing-page .dialogue-correct-reveal { background: #E7F0EA; border: 1px solid #2F6B4F; border-radius: 10px; }
body.th-site.landing-page .dialogue-correct-reveal-label { color: #2F6B4F; }
body.th-site.landing-page .dialogue-correct-reveal-text { color: #15202E; }
body.th-site.landing-page .dialogue-verse {
  margin-top: 1.1rem; padding: 1.35rem 1.3rem 1.15rem; border: 0; border-radius: 6px;
  background: #1A2C45; color: #F4EEE2;
  box-shadow: inset 0 0 0 5px #1A2C45, inset 0 0 0 6px #C9A24A, 0 14px 24px -14px rgba(11,22,38,.6);
  font-family: "Libre Caslon Text", Georgia, serif; font-size: 1.12rem; line-height: 1.5;
}
body.th-site.landing-page .dialogue-verse cite { color: #E2C374; font-family: "Atkinson Hyperlegible Next", sans-serif; font-weight: 800; letter-spacing: .04em; font-size: .85rem; }

/* Buttons: gold raised primary, paper raised secondary */
body.th-site.landing-page .welcome-btn-primary {
  background: #F2B33D; color: #15202E; border: 0; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 0 #B47A12; transition: transform .08s ease-out, box-shadow .08s ease-out;
}
body.th-site.landing-page .welcome-btn-primary:hover { filter: none; background: #F5BF55; }
body.th-site.landing-page .welcome-btn-primary:active { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 #B47A12; }
body.th-site.landing-page .welcome-closing-links .btn-outline {
  background: #FFFDF8; color: #15202E; border: 1px solid #E3D8C3; font-weight: 700;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #D2C4AA; transition: transform .08s ease-out, box-shadow .08s ease-out;
}
body.th-site.landing-page .welcome-closing-links .btn-outline:active { transform: translateY(3px); box-shadow: inset 0 1px 0 #fff, 0 0 0 #D2C4AA; }
body.th-site.landing-page .welcome-restart { color: #5B5546; margin-bottom: auto; }

@media (min-width: 720px) {
  body.th-site.landing-page .welcome-topbar { padding-left: max(1.5rem, calc(50% - 30rem)); padding-right: max(1.5rem, calc(50% - 30rem)); }
  body.th-site.landing-page .dialogue-card { max-width: 36rem; padding: 2.4rem 2.2rem 2rem; }
  body.th-site.landing-page .dialogue-prompt { font-size: 1.75rem; }
}
/* Pop-up cards (share-link fallback, confirmations) on the main site */
body.th-site .confirm-card { background: #FFFDF8; color: #15202E; border-radius: 10px; box-shadow: inset 0 1px 0 #fff, 0 24px 40px -18px rgba(11,22,38,.6); }
body.th-site .confirm-card h3 { font-family: "Libre Caslon Text", Georgia, serif; color: #15202E; }
body.th-site .confirm-card p { color: #5B5546; }
body.th-site .confirm-card .share-link-input { background: #F4EEE2; border: 1px solid #E3D8C3; border-radius: 8px; box-shadow: inset 0 1px 3px rgba(26,44,69,.18); color: #15202E; }
body.th-site .confirm-card .btn-primary { background: #1A2C45; color: #F4EEE2; border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 0 #0B1626; transition: transform .08s ease-out, box-shadow .08s ease-out; }
body.th-site .confirm-card .btn-primary:active { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 0 #0B1626; }
body.th-site .confirm-card .btn-outline { background: #FFFDF8; color: #15202E; border: 1px solid #E3D8C3; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #D2C4AA; }

/* ---------- Main-site tactile look: admin pages + bottom bar on computers (2026-10-26) ----------
   body.th-site now covers the main site's admin pages too (never ministry sites or a ministry admin
   whose brand is loaded). The header menu was removed: the bottom bar is the menu on every screen. */
@media (min-width: 1024px) {
  body.th-site .bottom-nav ul { max-width: 40rem; margin-left: auto; margin-right: auto; }
}
body.th-site:not(.landing-page) .admin-page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
body.th-site:not(.landing-page) .admin-preview-note {
  background: #F4EEE2; color: #5B5546; border: 0; border-left: 4px solid #F2B33D; border-radius: 10px;
  box-shadow: inset 0 1px 3px rgba(26,44,69,.15); padding: .8rem 1rem; line-height: 1.5;
}
body.th-site:not(.landing-page) .admin-accounts-link { justify-content: space-between; text-align: left; }
body.th-site:not(.landing-page) .tenant-pending-badge { background: #8C2F39; color: #FFFDF8; border-radius: 999px; font-weight: 800; box-shadow: 0 2px 0 #5E1F27; }
body.th-site:not(.landing-page) .admin-stat-tile,
body.th-site:not(.landing-page) .admin-engage-row,
body.th-site:not(.landing-page) .tenant-row,
body.th-site:not(.landing-page) .admin-account-card,
body.th-site:not(.landing-page) .qr-card {
  background: #FFFDF8; color: #15202E; border: 1px solid #E3D8C3; border-radius: 12px;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #D2C4AA;
}
body.th-site:not(.landing-page) .admin-stat-n { font-family: "Libre Caslon Text", Georgia, serif; font-weight: 700; color: #15202E; }
body.th-site:not(.landing-page) .admin-stat-label { color: #5B5546; font-weight: 700; }
body.th-site:not(.landing-page) .admin-stat-reset,
body.th-site:not(.landing-page) .admin-engage-reset {
  background: #F4EEE2; color: #5B5546; border: 1px solid #E3D8C3; border-radius: 999px; box-shadow: 0 2px 0 #D2C4AA;
}
body.th-site:not(.landing-page) .progress-track { background: #EDE5D4; box-shadow: inset 0 1px 2px rgba(26,44,69,.2); border-radius: 999px; }
body.th-site:not(.landing-page) .progress-fill { background: #F2B33D; border-radius: 999px; }
body.th-site:not(.landing-page) .admin-activity-row { border-color: #EDE5D4; }
body.th-site:not(.landing-page) .admin-activity-when { color: #8A8577; }
body.th-site:not(.landing-page) .tenant-row-church { font-family: "Libre Caslon Text", Georgia, serif; font-weight: 700; }
body.th-site:not(.landing-page) .tenant-row-sub { color: #5B5546; }
body.th-site:not(.landing-page) .qr-link-label { color: #5B5546; }
body.th-site:not(.landing-page) .approve-btn { background: #2F6B4F; color: #fff; border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 3px 0 #1F4D37; }
body.th-site:not(.landing-page) .reject-btn,
body.th-site:not(.landing-page) .revoke-btn,
body.th-site:not(.landing-page) .delete-btn,
body.th-site:not(.landing-page) .tract-delete-btn { color: #8C2F39; }
body.th-site:not(.landing-page) input[type="text"],
body.th-site:not(.landing-page) input[type="email"],
body.th-site:not(.landing-page) input[type="password"],
body.th-site:not(.landing-page) input[type="url"],
body.th-site:not(.landing-page) input[type="search"],
body.th-site:not(.landing-page) select,
body.th-site:not(.landing-page) textarea {
  background: #FFFDF8; color: #15202E; border: 1px solid #D9CDB5; border-radius: 10px; box-shadow: inset 0 1px 3px rgba(26,44,69,.15);
}
body.th-site:not(.landing-page) input:focus, body.th-site:not(.landing-page) select:focus, body.th-site:not(.landing-page) textarea:focus {
  outline: 2px solid #F2B33D; outline-offset: 1px; border-color: #C9A24A;
}
body.th-site .confirm-card input[type="email"], body.th-site .confirm-card input[type="password"], body.th-site .confirm-card input[type="text"] {
  background: #FFFDF8; border: 1px solid #D9CDB5; border-radius: 10px; box-shadow: inset 0 1px 3px rgba(26,44,69,.15);
}
@media (min-width: 1024px) {
  body.th-site:not(.landing-page) .admin-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.th-site:not(.landing-page) .admin-accounts-link { max-width: 40rem; }
}

/* Main-site footer (2026-10-26): church logo, then the ministry line under it, then the privacy link, all centered */
body.th-site .site-footer { flex-direction: column !important; align-items: center; justify-content: center; text-align: center; gap: .8rem; }
body.th-site .site-footer > a { order: 1; }
body.th-site .site-footer .ministry-line { order: 2; margin: 0; }
body.th-site .site-footer .footer-privacy-line { order: 3; margin: 0; }