:root { --border:#e5e7eb; }
:root { --keyboard-offset: 0px; } /* how far to lift chat bar above keyboard */
:root {
  /* slightly shorter nav + smaller gap above it */
  --nav-height: 52px;
  --nav-safe: env(safe-area-inset-bottom, 0px);
  --nav-space: calc(var(--nav-height) + var(--nav-safe) + 4px);
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  margin:0; color:#111; background:#f9fafb;
}

/* Top bar */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; justify-content:center; align-items:center;
  padding:6px 12px 8px; background:#fff; border-bottom:1px solid var(--border);
}
.brand{ font-weight:700; } .muted{ color:#6b7280; }

/* Layout */
#appMain{ padding-bottom: var(--nav-space); }              /* space for master nav */
/* Each app view will flex and scroll (WKWebView-safe) */
.view{
  flex: 1;
  min-height: 0;                 /* critical for iOS */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 960px;
  margin: 0 auto;                /* balanced margins on both sides */
  padding: 16px 14px;
  width: 100%;
  box-sizing: border-box;
}
.view[hidden]{ display:none !important; }
.view-account #vaultCard { display:block !important; }
#vaultCard { display:none; }
.body:not(.view-account) #vaultCard { display:none !important; }
body.view-account #vaultCard { display:block !important; }

/* Book/Chapter controls */
.controls{ display:flex; gap:10px; align-items:end; margin:8px 0 12px; }
.control{ display:grid; gap:4px; font-size:14px; }
.control span{ color:#6b7280; }
select{ font-size:16px; }

/* Verses: tighter packing */
.verses{ display:grid; gap:1px; }             /* << tighter (was 6/2px) */
.verse{
  display:flex; gap:4px; align-items:flex-start;
  padding:5px 8px;                             /* << tighter (was 8–12px) */
  margin:1px 0;                                /* << tighter (was 4–6/2px) */
  border-radius:8px; border:1px solid #e2e8f0; background:#fff; cursor:pointer;
}
.verse-number{ font-weight:600; color:#475569; min-width:2.2ch; }
.verse-text{ flex:1; }
.verse.selected{
  background:#fff3c4;           /* brighter highlight for light themes */
  border-color:#f59e0b;
  box-shadow: 0 0 0 2px rgba(245,158,11,0.25) inset;
}

/* ---------- BOTTOM SHEET (panel dock) ---------- */
/* Backdrop above page content, below the sheet */
.sheet-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.25); backdrop-filter:blur(2px);
  z-index:900; /* below sheet (1000), above nav (800) */
}

/* Sheet is anchored ABOVE the master nav (56px high) */
.sheet{
  position:fixed; left:0; right:0; bottom:var(--nav-space);   /* sits above master nav */
  height:66vh; background:#fff;
  border-top-left-radius:16px; border-top-right-radius:16px;
  border:1px solid #e2e8f0;
  box-shadow:0 -14px 40px rgba(0,0,0,.18);
  z-index:1000;                                    /* force overlay */
  transform:translateY(100%); transition:transform .22s ease;
  will-change: transform;                          /* smoother on mobile */
}

/* Ensure sheet is fully hidden when aria-hidden=true */
.sheet[aria-hidden="true"]{ display:none; }
.sheet.open{ transform:translateY(0); }            /* expanded (2/3 screen) */

.sheet-handle{
  width:60px; height:26px;
  position:absolute;
  left:50%; top:6px;
  transform: translateX(-50%);
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
  z-index:2;
}
.sheet-handle::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:34px; height:34px;
  border-left:4px solid #4b5563;
  border-top:4px solid #4b5563;
  transform: translate(-50%,-30%) rotate(45deg);
  border-radius:6px;
}
.sheet-header{
  position:relative;
  display:grid; grid-template-columns: auto 1fr auto;
  align-items:center;
  padding:12px 14px 8px;
  background: linear-gradient(135deg, rgba(14,165,233,0.16), rgba(99,102,241,0.14)), radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18), transparent 38%);
  border-top-left-radius:16px;
  border-top-right-radius:16px;
}
.sheet-title{ font-weight:700; }

/* Home view responsive wrapper */
#homeView{
  max-width: 960px;
  margin: 0 auto;
  padding: 8px 14px 90px;
  box-sizing: border-box;
}
.icon-btn{ background:transparent; border:none; font-size:20px; cursor:pointer; color:#6b7280; }
.icon-btn.min-btn{
  width:24px; height:14px;
  display:grid; place-items:center;
  border:1px solid #d1d5db;
  border-radius:10px;
  background: rgba(226,232,240,0.9);
  color:transparent;
  box-shadow: none;
  font-size:0;
}
.icon-btn.min-btn::before{
  content:"";
  width:16px; height:5px;
  background:#4b5563;
  border-radius:6px;
}
.icon-btn.min-btn:hover{ background: linear-gradient(135deg, #c7d2fe, #e0e7ff); }

.sheet-tabs{
  display:flex; gap:6px; padding:6px 10px 8px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  background: linear-gradient(135deg, rgba(14,165,233,0.12), rgba(99,102,241,0.12));
  border-top:1px solid rgba(255,255,255,0.18);
}
.tab{ appearance:none; border:1px solid #d1d5db; background:#f8fafc; padding:6px 8px; border-radius:8px; font-weight:600; flex:0 0 auto; font-size:13px; }
.tab.active{ background:#eef2ff; border-color:#c7d2fe; }

/* Scrollable commentary area INSIDE the sheet */
.panel-content{
  padding:18px 20px;
  max-height:calc(66vh - 120px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  border-top:1px solid #e5e7eb;
  background:#ffffff;
  color:#111827;
  border-bottom-left-radius:16px;
  border-bottom-right-radius:16px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.05);
  filter: none !important;
}
.panel-content .prose{
  font-family: "Times New Roman", Times, serif;
  font-size:16px;
  line-height:1.0;
  letter-spacing:0.01em;
  max-width: 860px;
  margin: 0 auto;
  color:#111827;
  text-align: justify;
}
.panel-content .prose p{ margin: 0; }
.hc-loading{ padding:8px 0 4px; }
.typing-indicator{
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 12px;
  border-radius:999px;
  background: rgba(15,23,42,0.08);
  border:1px solid rgba(148,163,184,0.3);
  font-size:12px; color:#1f2937;
}
.typing-label{
  letter-spacing:0.04em;
  text-transform:uppercase;
  opacity:0.8;
}
.typing-indicator .dot{
  width:6px; height:6px; border-radius:999px;
  background: currentColor;
  opacity:0.25;
  animation: typing-bounce 1s infinite ease-in-out;
}
.typing-indicator .dot:nth-child(2){ animation-delay:0.2s; }
.typing-indicator .dot:nth-child(3){ animation-delay:0.4s; }
@keyframes typing-bounce{
  0%,80%,100%{ transform: translateY(0) scale(0.6); opacity:0.25; }
  40%{ transform: translateY(-1px) scale(1); opacity:1; }
}
.skeleton{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.skeleton-line{
  height:10px;
  border-radius:999px;
  background: rgba(15,23,42,0.06);
  overflow:hidden;
  position:relative;
}
.skeleton-line::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(148,163,184,0.25), transparent);
  transform: translateX(-100%);
  animation: skeleton-shimmer 1.4s infinite;
}
@keyframes skeleton-shimmer{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(100%); }
}
.panel-content .prose h3,
.panel-content .prose strong{
  display:block;
  margin: 10px 0 6px 0;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1f2937;
}
.panel-content .refs{
  margin-top: 12px;
  padding: 10px 12px;
  border-top: 2px solid #e5e7eb;
  color: #111827;
  background: #f5f7fb;
  border-radius: 10px;
  font-size: 85%;
  line-height: 1.4;
  font-family: "Times New Roman", Times, serif;
}
.panel-content .refs div{ margin-bottom:6px; }
.panel-content .xref-line{
  padding:6px 0;
  border-bottom:1px solid rgba(0,0,0,0.08);
  color:#111827;
}

/* Collapsed mode: just the tabs bar (no backdrop) */
.sheet.collapsed{
  bottom:var(--nav-space); transform:translateY(0);
  height:auto; padding-bottom:8px;
}
.sheet.collapsed .panel-content{ display:none; } /* no content area yet */

/* ---------- MASTER BOTTOM NAV ---------- */
.master-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  /* let content define height, just ensure a minimum */
  min-height: var(--nav-height);
  height: auto;

  background: linear-gradient(135deg, rgba(15,23,42,0.9), rgba(30,64,175,0.82));
  backdrop-filter: blur(10px);
  border-top:1px solid rgba(59,130,246,0.35);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.16);
  z-index:800;

  display:flex;
  justify-content:space-around;
  align-items:flex-end;

  /* only a tiny cushion above the device’s bottom safe area */
  padding: 4px 10px calc(var(--nav-safe) + 4px);
}
.master-nav button{
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  font-weight:700; font-size:15px;
  padding:9px 14px; border-radius:12px;
  color:#e5e7eb;
  transition: all 0.18s ease;
}
.master-nav button:hover{
  background: rgba(255,255,255,0.14);
  color:#fff;
}
.master-nav button.active{
  background: linear-gradient(135deg, #60a5fa 0%, #22d3ee 100%);
  border:1px solid rgba(255,255,255,0.35);
  box-shadow: 0 6px 16px rgba(34,211,238,0.35);
  color:#0b1021;
}
body.dark .master-nav{
  background: linear-gradient(135deg, rgba(15,23,42,0.94), rgba(30,64,175,0.9));
  border-top-color:rgba(59,130,246,0.4);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.4);
}
body.dark .master-nav button{
  background: rgba(255,255,255,0.08);
  color:#e5e7eb;
}
body.dark .master-nav button:hover{
  background: rgba(255,255,255,0.14);
  color:#f8fafc;
}
body.dark .master-nav button.active{
  background: linear-gradient(135deg, #60a5fa 0%, #22d3ee 100%);
  border:1px solid rgba(255,255,255,0.35);
  box-shadow: 0 6px 18px rgba(34,211,238,0.45);
  color:#0b1021;
}

/* ---------- HOME ---------- */
.home-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:12px 0; }
.tile{ background:#fff; border:.3px solid #e2e8f0; border-radius:12px; padding:14px; font-weight:700; }
.card{ background:#fff; border:.3px solid #e2e8f0; border-radius:12px; padding:14px; margin-top:12px; }

/* ---------- ASK (chat) ---------- */
/* ASK (chat) — input at bottom, log scrolls above */
.chat{
  display:flex;
  flex-direction:column;
  min-height: calc(100vh - var(--nav-space));
  gap: 12px;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.chat-log{
  flex:1;
  overflow:auto;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
body.dark .chat-log{
  background:#0f172a;
  border-color:#334155;
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
}

/* Form pinned toward bottom */
.chat-form{
  order: 2;
  position: sticky;
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
  z-index: 20;
  display:flex; gap:8px;
  padding: 12px;
  background: rgba(255,255,255,0.92);                     /* light mode */
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
body.dark .chat-form{
  background: rgba(15,23,42,0.92);                   /* dark surface */
  border-color:#334155;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* Input + button sizing */
.chat-form input{
  flex:1; padding:10px;
  border:1px solid #d1d5db;
  border-radius:8px; font-size:16px;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  text-overflow: clip;
  -webkit-overflow-scrolling: touch;
}
.chat-form input::placeholder{
  font-size:12px;
  white-space:pre-line;
}

body.dark .chat-form input{
  background:#0b1220; color:#e5e7eb; border-color:#334155;
}

.chat-hint{
  font-size: 12px;
  color: #475569;
  margin: 4px 2px 8px;
  line-height: 1.35;
}
body.dark .chat-hint{ color:#cbd5e1; }

/* Keep master nav text visible in dark mode (you added this already, OK to keep) */
body.dark .master-nav button { color: #e5e7eb; }
body.dark .master-nav button.active {
  background:#172554; border:1px solid #1d4ed8; color:#fff;
}
.chat-form input{ flex:1; padding:10px; border:1px solid #d1d5db; border-radius:8px; font-size:16px; }
.btn{ appearance:none; border:1px solid #1f2937; background:#1f2937; color:#fff; padding:10px 14px; border-radius:10px; font-weight:700; min-height:44px; }
.chat-msg{ padding:8px 10px; margin:6px 0; border-radius:8px; }
.chat-msg.user{ background:#eef2ff; }
.chat-msg.bot{ background:#f3f4f6; }
.chat-tag{
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #475569;
  margin-bottom: 4px;
}
.chat-body{
  white-space: pre-wrap;
}

.chat-footer{
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

.chat-share-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: #4b5563;
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 999px;
  cursor: pointer;
}

.chat-share-btn:hover{
  background: rgba(148, 163, 184, 0.15);
}

.chat-share-icon svg{
  width: 16px;
  height: 16px;
  display: block;
  fill: currentColor;
}

body.dark .chat-share-btn{
  color: #9ca3af;
}
body.dark .chat-share-btn:hover{
  background: rgba(55, 65, 81, 0.6);
}



/* ---------- Mobile font size (smaller but readable) ---------- */
@media (max-width:480px){
  html,body{ font-size:15px; line-height:1.45; } /* smaller than default */
}
/* References block (smaller, grey, with a top gap) */
.refs{
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
  font-size: 0.5em;          /* smaller than main text */
  color: #6b7280;            /* slate-ish grey */
  line-height: 1.4;
  font-family: "Times New Roman", Times, serif;
}
.refs > div{ margin: 3px 0; }

/* Cross-references: one per line */
.xref-line{
  margin: 4px 0;
  line-height: 1.45;
}
/* ---------- Tiny buttons (toolbar) ---------- */
.tiny-btn{
  border:1px solid #d1d5db; background:#f8fafc; color:#111;
  padding:6px 8px; border-radius:8px; font-size:13px; cursor:pointer;
}
.tiny-btn:hover{ background:#eef2ff; }

/* Header tools line-up */
.sheet-header{ gap:10px; }
.sheet-tools{ display:flex; gap:6px; align-items:center; }

/* Search input basic style */
#refSearch{
  padding:8px 10px; border:1px solid #d1d5db; border-radius:8px; font-size:14px;
  min-width:180px;
}

/* Make reference links inside commentary look tappable */
.ref-link{ text-decoration:underline; cursor:pointer; }

/* ---------- Dark mode ---------- */
body.dark{ background:#0b1220; color:#e5e7eb; }
body.dark .topbar{ background:#0f172a; border-bottom-color:#1f2937; }
body.dark .brand .muted, body.dark .muted{ color:#94a3b8; }
body.dark .view{ }
body.dark .controls span{ color:#94a3b8; }
body.dark select, body.dark #refSearch{
  background:#0f172a; color:#e5e7eb; border-color:#334155;
}
body.dark .verses{ }
body.dark .verse{
  background:#0f172a; border-color:#334155; color:#e5e7eb;
}
body.dark .verse.selected{ background:#1f2937; border-color:#475569; }
body.dark .sheet{
  background:#0f172a; box-shadow:0 -10px 30px rgba(0,0,0,.6);
}
body.dark .tab{
  background:#0b1220; color:#e5e7eb; border-color:#334155;
}
body.dark .tab.active{
  background:#172554; border-color:#1d4ed8;
}
body.dark .panel-content{ color:#e5e7eb; }
body.dark .refs{
  border-top-color:#334155; color:#94a3b8;
}
body.dark .xref-line{
  color:#e5e7eb;
  border-bottom:1px solid #334155;
}
body.dark .ref-link{
  color:#bfdbfe;
}
body.dark .master-nav{
  background:#0f172a; border-top-color:#334155;
}
body.dark .tiny-btn{
  background:#0b1220; color:#e5e7eb; border-color:#334155;
}
/* Dark mode: make inactive nav buttons visible */
body.dark .master-nav button {
  color: #e5e7eb;          /* light gray text */
}

body.dark .master-nav button.active {
  background: #172554;     /* bluish background for active */
  border: 1px solid #1d4ed8;
  color: #ffffff;          /* white text for active */
}

/* Dark mode: fix Daily Context card */
body.dark .card {
  background: #0f172a;      /* dark background, same as sheet/nav */
  border-color: #334155;    /* slate border */
  color: #e5e7eb;           /* light text */
}

/* Dark mode: ensure generated prose text is light */
body.dark .prose {
  color: #e5e7eb;
}


/* Tiny label inside Theme button */
.tiny-label{ font-size:12px; margin-left:6px; opacity:.8; }

/* Header buttons line-up */
.icon-btn{ background:transparent; border:none; font-size:20px; cursor:pointer; color:#6b7280; }
.sheet-header{ display:flex; align-items:center; justify-content:space-between; padding:6px 12px 0; gap:10px; }

/* Remove any leftover spacing from old sheet title */
.sheet-title{ display:none !important; }

/* Theme toggle */
/* Ensure sheet is fully hidden when aria-hidden=true */
.sheet[aria-hidden="true"]{ display:none; }

/* Keep the tab bar always visible at the top of the sheet */
.sheet-tabs{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1002;        /* above panel-content */
  display:flex; gap:8px; padding:8px 12px;
  border-top:1px solid var(--border);
}
body.dark .sheet-tabs{ background:#0f172a; }

/* Guard: ensure the sheet is truly fixed and above content */
.sheet{
  position: fixed !important;
  z-index: 1000 !important;
}

/* Just in case: make verses container not overlap the sheet layer */
.verses{ z-index: 1; position: relative; }







/* ===== FORCE VISIBLE CHAT TEXT IN DARK MODE (iOS/WebKit safe) ===== */

/* Input (typing area) — text, caret, bg, border */
body.dark .chat-form input,
body.dark .chat-form input:focus {
  background-color: #0b1220 !important;   /* dark surface */
  color: #e5e7eb !important;              /* light text */
  -webkit-text-fill-color: #e5e7eb !important;  /* WebKit text color */
  caret-color: #e5e7eb !important;
  border-color: #334155 !important;
  outline: none !important;
  appearance: none;
  -webkit-appearance: none;
  background-clip: padding-box;           /* avoid odd WebKit shading */
}

/* Placeholder (faint but readable) */
body.dark .chat-form input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;                  /* Safari sometimes reduces it */
}

/* Safari/iOS autofill: keep dark bg and light text */
body.dark .chat-form input:-webkit-autofill,
body.dark .chat-form input:-webkit-autofill:hover,
body.dark .chat-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #e5e7eb !important;
  box-shadow: 0 0 0 1000px #0b1220 inset !important;
  -webkit-box-shadow: 0 0 0 1000px #0b1220 inset !important;
  caret-color: #e5e7eb !important;
}

/* Chat log text (messages) */
body.dark .chat-log {
  color: #e5e7eb !important;
}

/* Ensure both user & bot bubbles are readable in dark mode */
body.dark .chat-msg.user,
body.dark .chat-msg.bot {
  color: #e5e7eb !important;
}

/* (Optional) different subtle backgrounds for contrast */
body.dark .chat-msg.user { background: #111827 !important; }
body.dark .chat-msg.bot  { background: #0f172a !important; }


#homeView {
  min-height: 100vh;
  background:
    url('stars-overlay.png') repeat,
    linear-gradient(to top, #4ea9bf 0%, #011627 0%, #202b2e 70% );
  background-size: auto, cover;
  color: #fff;
}


/* ===== Home cards (2×2 grid in top half of screen) ===== */
.home-cards{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 12px;
  height: 30vh;              /* occupy top half of the screen */
  padding: 8px 0;
}

/* Tappable card */
.home-card{
  display:flex;
  align-items:flex-end;       /* text near bottom edge */
  justify-content:flex-start;
  border:none;
  border-radius:16px;
  padding:16px;
  font-weight:800;
  font-size:18px;
  color:#ffffff;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.home-card:active{ transform: scale(.98); box-shadow: 0 6px 18px rgba(0,0,0,.20); }
.home-card span{ pointer-events:none; } /* prevent text from blocking the click */

/* Solid color themes (adjust as you like) */
.card-bible  { background: #2563eb; }                 /* royal blue */
.card-daily  { background: #f59e0b; color:#111; }     /* amber; dark text */
.card-plan   { background: #10b981; }                 /* emerald */
.card-sunday { background: #8b5cf6; }                 /* violet */

/* Dark mode card contrast */
body.dark .home-card           { color:#e5e7eb; }
body.dark .card-daily          { background:#f59e0b; color:#0b1220; } /* amber still readable in dark */


/* Optional: Home gradient background */
#homeView{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(245,158,11,.25), transparent 60%),
              radial-gradient(1200px 600px at 90% 20%, rgba(34,197,94,.25), transparent 60%),
              radial-gradient(1200px 600px at 50% 80%, rgba(99,102,241,.28), transparent 60%),
              linear-gradient(to top, #0b1220 0%, #1e293b 40%, #f8fafc 100%);
  border-radius: 12px;
}
body.dark #homeView{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(245,158,11,.15), transparent 60%),
              radial-gradient(1200px 600px at 90% 20%, rgba(34,197,94,.15), transparent 60%),
              radial-gradient(1200px 600px at 50% 80%, rgba(99,102,241,.18), transparent 60%),
              linear-gradient(to top, #0b1220 0%, #0f172a 40%, #111827 100%);
}

/* ===== Icon-first cards ===== */
.home-card{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:16px;
  padding:16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  overflow: hidden; /* keep label inside rounded corners */
}
.home-card:active{ transform: scale(.98); box-shadow: 0 6px 18px rgba(0,0,0,.20); }

/* Big icon in the center */
.card-icon{
  font-size: 200px;           /* tweak to taste (40–56 looks good) */
  line-height: 1;
  opacity: .99;
  transform: translateY(-6px); /* slight lift so label has room */
}

/* Label pinned to the bottom-center for readability */
.card-label{
  position: absolute;
  center: 14px;
  bottom: 12px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .2px;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,.3);
  pointer-events: none; /* click passes through to the card */
}

/* Colors you already use (kept here for clarity) */
.card-bible  { background: #2563eb; }                 /* royal blue */
.card-daily  { background: #f59e0b; color:#111; }     /* amber; label stays white via .card-label */
.card-plan   { background: #10b981; }                 /* emerald */
.card-sunday { background: #8b5cf6; }                 /* violet */

/* Dark mode contrast */
body.dark .home-card           { color:#e5e7eb; }
body.dark .card-daily          { background:#f59e0b; } /* amber still fine in dark */





/* ===== SVG Icon-first card layout ===== */
.home-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  overflow: hidden; /* keeps label inside rounded corners */
}

.home-card:active {
  transform: scale(.98);
  box-shadow: 0 6px 18px rgba(0,0,0,.20);
}

/* Icon area (SVG or emoji) */
.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;          /* if emoji is ever used */
  width: 56px;
  height: 56px;
  opacity: .95;
}

/* Ensure inline SVG scales nicely */
.card-icon svg {
  width: 56px;
  height: 56px;
  display: block;
}

/* Label pinned to bottom-left for readability */
.card-label {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .2px;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,.3);
  pointer-events: none; /* lets click pass through */
}

/* Dark mode contrast */
body.dark .card-label { color: #e5e7eb; }


/* ===== Icons-only Home (2×2 grid) ===== */

/* Change this to scale all icons & frames globally */
:root { --icon-size: 48px; }   /* try 48px / 64px / 72px if you prefer */

/* 2×2 icons, centered in the page */
.home-icons{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px;
  min-height: 0;
  padding: 4px 0 8px;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  justify-items: center;
  align-content: center;
}


.icon-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
}

/* Framed icon that scales with --icon-size */
.icon-wrap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: calc(var(--icon-size) * 0.28);         /* frame thickness scales */
  border: 2px solid rgba(17,17,17,.18);           /* light-mode frame */
  border-radius: calc(var(--icon-size) * 0.38);   /* roundness scales */
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.icon{ 
  font-size: var(--icon-size);
  line-height: 1;
}

.icon-btn:active .icon-wrap{
  transform: scale(.97);
  box-shadow: 0 6px 16px rgba(0,0,0,.14);
}

/* Label under icon */
.icon-label{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;
  color: #111;
}

/* Focus ring (keyboard / accessibility) */
.icon-btn:focus-visible .icon-wrap{
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

/* Dark mode adjustments */
body.dark .icon-label{ color:#e5e7eb; }
body.dark .icon-wrap{
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* ===== Daily Context: light-mode visibility fix ===== */
body:not(.dark) #dailyCard {
  background: #ffffff;           /* solid white card */
  border: 1px solid #e5e7f0;
  color: #111 !important;        /* default text color */
}

body:not(.dark) #dailyCard .prose {
  color: #111 !important;        /* ensure generated text is dark */
}

body:not(.dark) #dailyCard h3 {
  color: #111 !important;
}

/* ===== Per-icon controls (size & position) =====
   Set these as inline styles on each <button>:
   --icon-size:       size of the emoji/SVG inside the frame (default from :root)
   --btn-offset-y:    nudge whole button (frame + label) up/down
   --btn-offset-x:    nudge whole button left/right
   --icon-shift-y:    nudge the emoji/SVG inside the frame (label stays put)
   --icon-shift-x:    nudge emoji/SVG horizontally
   --label-shift-y:   nudge label up/down
   --label-shift-x:   nudge label left/right
   --frame-pad-extra: add extra padding around the icon inside the frame
   --label-size:      font size of the label
*/

.icon-btn{
  margin-top:    var(--btn-offset-y, 0px);
  margin-left:   var(--btn-offset-x, 0px);
  /* you can also use --btn-offset-b / --btn-offset-r if needed */
  margin-bottom: var(--btn-offset-b, 0px);
  margin-right:  var(--btn-offset-r, 0px);
}

.icon-wrap{
  /* frame thickness grows with icon-size; add extra with --frame-pad-extra */
  padding: calc(var(--icon-size, 56px) * 0.28 + var(--frame-pad-extra, 0px));
  border-radius: calc(var(--icon-size, 56px) * 0.38);
}

.icon{
  font-size: var(--icon-size, 56px);
  line-height: 1;
  transform: translate(
    var(--icon-shift-x, 0px),
    var(--icon-shift-y, 0px)
  );
}

.icon-label{
  font-size: var(--label-size, 14px);
  left:  calc(14px + var(--label-shift-x, 0px));
  bottom: calc(12px + var(--label-shift-y, 0px));
}

/* ===== Daily Context Archive ===== */

/* Horizontal chips list */
.dc-strip{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 2px 14px;
  margin-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.dc-chip{
  white-space: nowrap;
  border: 1px solid #d1d5db;
  background: #f8fafc;
  color:#111;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}
.dc-chip:active{ transform: scale(.98); }
body.dark .dc-chip{ background:#0b1220; color:#e5e7eb; border-color:#334155; }

/* Modal */
.dc-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  z-index: 1100; backdrop-filter: blur(2px);
}
.dc-modal{
  position: fixed; left: 50%; top: 10%;
  transform: translateX(-50%);
  width: min(92vw, 820px);
  max-height: 80vh;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  z-index: 1110;
  display: none;
  overflow: hidden;
}
.dc-modal[aria-hidden="false"]{
  display: grid;
  grid-template-rows: auto 1fr;
}
.dc-modal-head{
  display:flex; justify-content:space-between; align-items:center;
  padding: 10px 12px; border-bottom: 1px solid #e5e7eb;
}
.dc-modal-title{ font-weight: 800; }
.dc-modal-body{
  padding: 12px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Dark mode modal */
body.dark .dc-modal{ background:#0f172a; color:#e5e7eb; }
body.dark .dc-modal-head{ border-bottom-color:#334155; }

/* Better chips contrast on very small screens */
@media (max-width: 480px){
  .dc-chip{ font-size: 14px; padding: 7px 10px; }
}

/* ===== Home Chatbox (transparent over background) ===== */
.home-chat{
  width: min(88vw, 680px);
  margin: 0 auto;
  /* push roughly to the middle area; tweak as desired */
  margin-top: 8vh;
  margin-bottom: 4vh;

  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;

  /* solid card for legibility */
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.home-chat-input{
  background: transparent;
  border: 0;
  outline: 0;
  padding: 10px 12px;
  font-size: 16px;
  color: #111;
  white-space: nowrap;
  overflow-x: auto;
  text-overflow: clip;
  -webkit-overflow-scrolling: touch;
}
.home-chat-input::placeholder{
  font-size:12px;
  white-space:pre-line;
}

.home-chat-input::placeholder{
  color: rgba(17,17,17,.65);
}

.home-chat-btn{
  appearance: none;
  border: 1px solid #1f2937;
  background: #1f2937;
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  min-height: 44px;
  cursor: pointer;
}

/* Dark theme: transparent panel but readable text */
body.dark .home-chat{
  background: rgba(15,23,42,0.35);        /* #0f172a with alpha */
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
}
body.dark .home-chat-input{
  color: #e5e7eb;
}
body.dark .home-chat-input::placeholder{
  color: #94a3b8;
}
body.dark .home-chat-btn{
  background: #2563eb;
  border-color: #1d4ed8;
}

/* Fake idle caret so input looks ready without raising mobile keyboards */
.idle-caret{
  position: relative;
  caret-color: transparent;
}
.idle-caret:not(:focus)::after{
  content:'';
  position:absolute;
  left:12px;
  top:50%;
  width:1px;
  height:1.2em;
  background: currentColor;
  opacity:0.65;
  transform: translateY(-50%);
  animation: idleCaretBlink 1s steps(1) infinite;
  pointer-events:none;
}
@keyframes idleCaretBlink{ 50%{ opacity:0; } }

/* ===== Themes chips ===== */
.themes-section { margin: 12px auto; width: 100%; max-width: 980px; padding: 0 12px; }
.themes-header{
  display:flex; justify-content:space-between; align-items:center;
  margin: 6px 0 10px;
  font-weight: 800;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.themes-grid{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-start;
  padding: 0 0 6px;
  max-height: none; /* allow page scroll for more */
}
.theme-chip{
  font-size: 11px; line-height: 1.1; font-weight: 700;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: #0f172a;
  background: #e0f2fe;           /* light blue */
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.theme-chip.c2{ background:#fde68a; color:#111; } /* amber */
.theme-chip.c3{ background:#bbf7d0; }            /* green */
.theme-chip.c4{ background:#ddd6fe; }            /* violet */
.theme-chip.c5{ background:#fecaca; }            /* rose */
.theme-chip:active{ transform: scale(.98); }
body.dark .theme-chip{ color:#0b1220; }


/* ===== Themes plate ===== */
.themes-plate{
  width: min(92vw, 820px);
  margin: 8px auto 16px;
  background: rgba(255,255,255,0.28);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  overflow: hidden;            /* collapsed clips (good) */
  max-height: 420px;           /* allow ~10 lines preview */
  transition: max-height .25s ease;
  margin-bottom: 88px;         /* keep clear of bottom nav on phones */
}

/* When expanded, stop clipping and remove height cap */
.themes-plate.expanded{
  max-height: none;
  overflow: visible;           /* <-- the key fix */
}

.themes-header{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding: 10px 12px 6px; font-weight:800;
  gap: 12px;
}

.theme-controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}
.theme-controls input{
  flex:1;
  min-width: 180px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,0.45);
  border-radius:8px;
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(6px);
  color: #0f172a;
  transition: border-color .2s, box-shadow .2s;
}
.theme-controls input::placeholder{
  color: rgba(15,23,42,0.6);
}
.theme-controls input:focus{
  outline:none;
  border-color: rgba(37,99,235,0.6);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}
body.dark .theme-controls input{
  background: rgba(15,23,42,0.45);
  border-color: rgba(255,255,255,0.25);
  color: #e5e7eb;
}
body.dark .theme-controls input::placeholder{
  color: #cbd5e1;
}
.theme-cats{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:6px 0 10px;
}
.theme-cat{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #e2e8f0;
  background:#f8fafc;
  cursor:pointer;
  font-weight:700;
  font-size:12px;
}
.theme-cat.active{
  background:#e0e7ff;
  border-color:#c7d2fe;
  color:#1f2937;
}

.themes-grid{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-start;
  padding: 8px 12px 4px;
}
.themes-grid::after{
  content:'';
  flex:auto;
}
.themes-shell{
  position: relative;
  max-height: 360px;           /* ~10 rows of chips */
  overflow: auto;              /* scrollable without tapping See More */
  padding-bottom: 8px;
}
.themes-shell.expanded{
  max-height: 360px;
  overflow: auto;
}
.themes-fade{ display:none; }
.themes-footer{ display:none; }

/* Chips (small readable) */
.theme-chip{
  font-size: 10px; line-height: 1.05; font-weight: 700;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: #0f172a;
  background: #e0f2fe;           /* light blue */
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  flex: 0 0 auto;                /* size by content */
  min-width: 80px;
}
.theme-chip.c2{ background:#fde68a; color:#111; }
.theme-chip.c3{ background:#bbf7d0; }
.theme-chip.c4{ background:#ddd6fe; }
.theme-chip.c5{ background:#fecaca; }
.theme-chip:active{ transform: scale(.98); }

body.dark .themes-plate{
  background: rgba(15,23,42,0.35);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
}
body.dark .theme-chip{ color:#0b1220; }

/* Light-mode modal content visibility */
body:not(.dark) .dc-modal { color:#111; }
body:not(.dark) .dc-modal .prose { color:#111; }


.sheet[aria-hidden="true"] { display: none !important; }
.sheet-backdrop[hidden]   { display: none !important; }
#appMain { padding-bottom: var(--nav-space); }

/* ----- iOS WebView scroll: give each view its own scroll context ----- */

/* Make the app use one viewport-height frame (no body scroll),
   and let each "view" scroll within it. */
html, body {
  height: 100%;
  overflow: hidden;                     /* prevent double scroll on iOS */
}

/* The app frame = full dynamic viewport minus bottom nav */
#appMain {
  display: flex;                  /* NEW: flex container */
  flex-direction: column;         /* stack views vertically */
  height: calc(100dvh - var(--nav-space));
  overflow: hidden;               /* the scrolling happens inside .view */
}


/* Each top-level view scrolls independently */
.view {
  height: 100%;
  min-height: 0;                        /* critical for flex/grid children on iOS */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;    /* momentum scrolling */
  overscroll-behavior: contain;         /* avoid rubber-band passing to parent */
}

/* Home view content can be taller than 50vh — ensure it can scroll */
#homeView { min-height: 0; }

/* Bible view: space for sheets & bottom nav so last verses remain reachable */
#bibleView .verses {
  padding-bottom: 140px;                /* room for sheet + master nav */
}

/* ===== ASK VIEW: keep chat input at the bottom above the nav ===== */
#askView{
  padding: 0 max(12px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-right));
}
#askView .chat {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--nav-space)); /* fills the view above bottom nav */
  gap: 10px;
}

/* Chat log fills all available space above the input */
#askView .chat-log {
  order: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  margin: 0;
}
body.dark #askView .chat-log{
  background:#0f172a;
  border-color:#334155;
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
}

/* Input bar is always at the bottom of the Ask view */
#askView .chat-form {
  order: 2;
  position: sticky;
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  margin-top: auto;
  z-index: 20;
  background: rgba(255,255,255,0.96);
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
#askView .chat-form input{
  padding: 14px 16px;
  border-radius: 12px;
}
#askView .chat-form .btn{
  min-height: 56px;
  padding: 14px 18px;
  border-radius: 12px;
}
body.dark #askView .chat-form {
  background: rgba(15,23,42,0.92);
  border-color:#334155;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* If any overlay is "hidden", truly remove it from hit-testing */
.sheet[aria-hidden="true"] { display: none !important; }
.sheet-backdrop[hidden]    { display: none !important; }

/* Collapsed sheet should not fill the screen; content area stays off */
.sheet.collapsed { max-height: none; }
.sheet.collapsed .panel-content { display: none !important; }

/* (Optional) If your Home icons grid had a fixed height, allow extra content below to scroll */
.home-icons { max-height: 50svh; }  /* limits grid height without blocking page scroll */


/* ===== Auth modal ===== */
.auth-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px); z-index: 1000;
}
.auth-modal[aria-hidden="true"] { display: none; }
.auth-modal {
  position: fixed; inset: 0; display: grid; place-items: center; z-index: 1001;
}
.auth-card {
  width: min(92vw, 420px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.20);
  padding: 16px;
}
.auth-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.auth-form { display:grid; gap: 10px; margin-top: 8px; }
.auth-form label { display:grid; gap:4px; font-size:14px; }
.auth-form input {
  padding: 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 16px;
}
.auth-links { display:flex; justify-content:space-between; margin-top:10px; }
.linkish { background:transparent; border:none; color:#2563eb; font-weight:700; cursor:pointer; }
body.dark .auth-card{ background:#0f172a; color:#e5e7eb; border-color:#334155; }
body.dark .auth-form input{ background:#0b1220; color:#e5e7eb; border-color:#334155; }

/* Offer list layout */
.offer-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.offer-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 12px;
  border: 1px solid #e5e7eb; border-radius: 10px; background: #fff;
}
.offer-title { font-weight: 700; }
.offer-price { font-weight: 800; }
body.dark .offer-card { background:#0f172a; border-color:#334155; }

#accountView .card { margin-top: 10px; }
#acctPlan { font-weight: 700; }

/* Daily Context Calendar */
.dc-cal-head { display:flex; align-items:center; justify-content:center; gap:8px; margin:8px 0; }
.dc-cal-grid { max-width: 800px; margin: 0 auto; }
.dc-cal-dow  { display:inline-block; width: calc(100% / 7); text-align:center; font-weight:700; color:#475569; }
.dc-cal-body { display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; }
.dc-day {
  min-height: 64px; border:1px solid #e5e7eb; border-radius:8px; padding:6px;
  display:flex; align-items:flex-start; justify-content:flex-start; position:relative;
  background:#fff;
}
.dc-day .num { font-weight:700; font-size:12px; color:#475569; }
.dc-day.has   { cursor:pointer; background:#f0f9ff; border-color:#bae6fd; }
.dc-day.has:hover { background:#e0f2fe; }
.dc-day.empty { background:transparent; border-color:transparent; }

body.dark .dc-cal-dow { color:#94a3b8; }
body.dark .dc-day { background:#0f172a; border-color:#334155; }
body.dark .dc-day.has { background:#10253a; border-color:#1d4ed8; }
body.dark .dc-day.has:hover { background:#0f2a4a; }


/* ===== Reader variables ===== */
:root{
  --reader-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --reader-size: 16px;
  --reader-line: 1.5;
}

/* Apply to Bible text */
#bibleView .verses{
  font-family: var(--reader-font);
  font-size: var(--reader-size);
  line-height: var(--reader-line);
}

/* ===== Theme presets (light is default via existing CSS) ===== */
body.theme-light      { background:#f9fafb; color:#111; }
body.theme-light      .verse{ background:#fff; border-color:#e5e7eb; }

body.theme-light-cream{ background:#f8f5e7; color:#1f2937; }
body.theme-light-cream .verse{ background:#fffaf2; border-color:#e8e0c6; }

body.theme-light-gray { background:#f3f4f6; color:#111; }
body.theme-light-gray .verse{ background:#ffffff; border-color:#e5e7eb; }

body.theme-gray       { background:#e5e7eb; color:#111; }
body.theme-gray       .verse{ background:#f8fafc; border-color:#cbd5e1; }

body.theme-light-blue { background:#eef6ff; color:#0f172a; }
body.theme-light-blue .verse{ background:#ffffff; border-color:#cfe1ff; }

body.theme-sepia      { background:#f7f0e5; color:#1f2937; }
body.theme-sepia      .verse{ background:#fff8ec; border-color:#e0d4c2; }

body.theme-sand       { background:#f2e9de; color:#1f2937; }
body.theme-sand       .verse{ background:#fffaf2; border-color:#e4d8c7; }

body.theme-olive      { background:#eef3ea; color:#1f2937; }
body.theme-olive      .verse{ background:#ffffff; border-color:#d4dec6; }

body.theme-dusk       { background:#0f172a; color:#e5e7eb; }
body.theme-dusk       .verse{ background:#111827; border-color:#1f2937; color:#e5e7eb; }

body.theme-contrast   { background:#0b0b0b; color:#f8fafc; }
body.theme-contrast   .verse{ background:#ffffff; border-color:#111827; color:#0b1220; }

/* Dark already supported in your CSS via body.dark — keep it;
   add a theme alias so settings can toggle it consistently. */
body.theme-dark { }
body.theme-dark .verse{ }

/* Theme-aware surfaces (sheet + weekly card) */
.sheet, .panel-content, #dailyCard {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body.theme-light .sheet,
body.theme-light .panel-content,
body.theme-light #dailyCard { background:#fff; color:#111; border-color:#e5e7eb; }

body.theme-light-cream .sheet,
body.theme-light-cream .panel-content,
body.theme-light-cream #dailyCard { background:#fffaf2; color:#1f2937; border-color:#e8e0c6; }

body.theme-light-gray .sheet,
body.theme-light-gray .panel-content,
body.theme-light-gray #dailyCard { background:#ffffff; color:#111; border-color:#e5e7eb; }

body.theme-gray .sheet,
body.theme-gray .panel-content,
body.theme-gray #dailyCard { background:#f8fafc; color:#111; border-color:#cbd5e1; }

body.theme-light-blue .sheet,
body.theme-light-blue .panel-content,
body.theme-light-blue #dailyCard { background:#ffffff; color:#0f172a; border-color:#cfe1ff; }

body.theme-sepia .sheet,
body.theme-sepia .panel-content,
body.theme-sepia #dailyCard { background:#fff8ec; color:#1f2937; border-color:#e0d4c2; }

body.theme-sand .sheet,
body.theme-sand .panel-content,
body.theme-sand #dailyCard { background:#fffaf2; color:#1f2937; border-color:#e4d8c7; }

body.theme-olive .sheet,
body.theme-olive .panel-content,
body.theme-olive #dailyCard { background:#ffffff; color:#1f2937; border-color:#d4dec6; }

body.theme-dusk .sheet,
body.theme-dusk .panel-content,
body.theme-dusk #dailyCard { background:#111827; color:#e5e7eb; border-color:#1f2937; }

body.theme-contrast .sheet,
body.theme-contrast .panel-content,
body.theme-contrast #dailyCard { background:#0b0b0b; color:#f8fafc; border-color:#111827; }

body.theme-dark .sheet,
body.theme-dark .panel-content,
body.theme-dark #dailyCard { background:#0f172a; color:#e5e7eb; border-color:#334155; }

/* ===== Settings swatches ===== */
.theme-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:6px;
}
.swatch-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  font-size:11px;
  color:#475569;
  min-width:52px;
}
.swatch{
  width:28px; height:28px; border-radius:6px; border:1px solid #d1d5db; cursor:pointer;
}
.swatch-wrap span{ pointer-events:none; }
.swatch[data-theme="light"]       { background:#ffffff; }
.swatch[data-theme="light-cream"] { background:#f8f5e7; }
.swatch[data-theme="light-gray"]  { background:#f3f4f6; }
.swatch[data-theme="gray"]        { background:#e5e7eb; }
.swatch[data-theme="light-blue"]  { background:#eef6ff; }
.swatch[data-theme="sepia"]       { background:#f7f0e5; }
.swatch[data-theme="sand"]        { background:#f2e9de; }
.swatch[data-theme="olive"]       { background:#eef3ea; }
.swatch[data-theme="dusk"]        { background:#0f172a; border-color:#334155; }
.swatch[data-theme="contrast"]    { background:#0b0b0b; border-color:#000; }
.swatch[data-theme="dark"]        { background:#0b1220; border-color:#334155; }
body.dark .swatch-wrap span{ color:#cbd5e1; }

/* In dark mode, keep modal readable (you already themed auth-card) */


/* ===== Verse of the Day (postcard) ===== */
.vod-card{
  width:100%; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;
  background:#000; margin:12px 0; box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.vod-image{
  position:relative; width:100%; aspect-ratio: var(--vod-aspect, 16 / 9);
  background:#000 center/cover no-repeat;
  overflow:hidden;
}
.vod-image::before{
  content:'';
  position:absolute; inset:0;
  background-image: var(--vod-img-url);
  background-size:cover;
  background-position:center;
  filter: blur(var(--vod-img-blur, 0px));
  transform: scale(1.05);
}
.vod-image>*{ position: relative; z-index: 1; }
.vod-image::before{ z-index:0; }
.vod-image::after{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.05), transparent 45%);
  z-index:1;
}
.vod-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding:12px;
  background: linear-gradient(to top, rgba(0,0,0,var(--vod-plate-opacity,0.55)), rgba(0,0,0,calc(var(--vod-plate-opacity,0.55) * 0.3)) 65%, transparent);
}
.vod-ref{ color:#fff; font-weight:800; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.vod-text{ color:#f8fafc; margin-top:4px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.vod-actions{
  display:flex; gap:10px; margin-top:10px;
}
.vod-btn{
  appearance:none; background: rgba(255,255,255,.12); color:#fff;
  border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:6px 10px; font-weight:700; cursor:pointer;
}
.vod-btn:hover{ background: rgba(255,255,255,.22); }

/* Fullscreen “reel” */
.vod-fullscreen[aria-hidden="true"]{ display:none; }
.vod-fullscreen{
  position:fixed; inset:0; z-index:1100; display:grid; place-items:center;
}
.vod-fs-image{
  position:relative; width:100%; height:100%;
  background:#000 center/cover no-repeat;
  overflow:hidden;
}
.vod-fs-image::before{
  content:'';
  position:absolute; inset:0;
  background-image: var(--vod-img-url);
  background-size:cover;
  background-position:center;
  filter: blur(var(--vod-img-blur, 0px));
  transform: scale(1.05);
}
.vod-fs-image>*{ position: relative; z-index:1; }
.vod-fs-gradient{
  position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,var(--vod-plate-opacity,0.65)), rgba(0,0,0,calc(var(--vod-plate-opacity,0.65) * 0.2)) 50%, transparent);
}
.vod-fs-top{
  position:absolute;
  top: 28px;                  /* drop below status bar/notch */
  left: 12px;                 /* anchor to the left */
  right: 12px;                /* keep close button visible on the right */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.vod-fs-ref{ color:#fff; font-weight:900; font-size:18px; margin-bottom:6px; }
.vod-fs-text{ color:#f1f5f9; font-size:16px; }
.vod-fs-actions{
  position:absolute; left:0; right:0; bottom:18px; display:flex; justify-content:center; gap:12px;
}

/* Quick menu */
.vod-menu{
  position:fixed; z-index:3000; min-width:220px;
  background:linear-gradient(135deg, #eef2ff, #f8fafc);
  border:1px solid #e0e7ff;
  border-radius:14px;
  box-shadow:0 18px 46px rgba(0,0,0,.18);
  overflow:hidden;
}
.vod-menu[hidden]{ display:none; }
.vod-menu button{
  display:flex; align-items:center; gap:10px;
  width:100%; text-align:left;
  background:rgba(255,255,255,.9);
  border:none;
  padding:12px 14px;
  font-weight:700; cursor:pointer;
  color:#0f172a;
}
.vod-menu button:hover{ background:rgba(255,255,255,1); }

body.dark .vod-menu{
  background:linear-gradient(135deg, #0f172a, #111827);
  border-color:#1f2937;
  box-shadow:0 18px 46px rgba(0,0,0,.42);
}
body.dark .vod-menu button{
  background:rgba(15,23,42,.82);
  color:#e5e7eb;
}
body.dark .vod-menu button:hover{ background:rgba(30,41,59,.95); }

body.dark .vod-card{ border-color:#334155; }
body.dark .vod-menu{ background:#0f172a; border-color:#334155; color:#e5e7eb; }
body.dark .vod-menu button:hover{ background:#0b1220; }

/* VOD design controls (image chooser modal) */
.vod-design-controls{
  display:grid;
  gap:10px;
  margin: 0 0 12px 0;
}
.vod-design-controls label{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-weight:700;
  font-size:13px;
}
.vod-design-controls input,
.vod-design-controls select{
  padding:8px 10px;
  border:1px solid #d1d5db;
  border-radius:8px;
  font-size:14px;
}
.vod-aspect{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.vod-aspect-buttons{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.vod-aspect-buttons button{
  padding:8px 10px;
  border-radius:8px;
  border:1px solid #d1d5db;
  background:#f8fafc;
  cursor:pointer;
  font-weight:700;
}
.vod-aspect-buttons button.active{
  background:#2563eb;
  border-color:#1d4ed8;
  color:#fff;
}
body.dark .vod-design-controls input,
body.dark .vod-design-controls select,
body.dark .vod-aspect-buttons button{
  background:#0b1220;
  border-color:#334155;
  color:#e5e7eb;
}
body.dark .vod-aspect-buttons button.active{
  background:#2563eb;
  border-color:#1d4ed8;
  color:#fff;
}

/* Keep the quick menu above fullscreen reel */
.vod-fullscreen, #vodFs, #vodFsBackdrop{
  z-index: 2500;
}



/* Back button in fullscreen */
.vod-back-btn{
  appearance:none; background:rgba(255,255,255,.15); color:#fff;
  border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:6px 12px;
  margin-right:8px; font-weight:800; cursor:pointer;
}

/* Larger, easier-to-tap close button on the reel */
#vodFsClose{
  font-size:60px;             /* 3x the base 20px icon-btn size */
  line-height:1;
  color:#fff;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.25);
  border-radius:14px;
  padding:6px 10px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}

/* Counts above actions */
.vod-action{ position:relative; display:flex; align-items:center; }
.vod-count{
  position:absolute; top:-12px; right:-8px;
  background:#111827; color:#fff; border-radius:999px; padding:1px 6px; font-size:10px; font-weight:800;
  border:1px solid rgba(255,255,255,.25);
}
body.dark .vod-count{ background:#0b1220; }

/* Comments sheet */
.vod-comments[aria-hidden="true"]{ display:none; }
.vod-comments{
  position:fixed; left:0; right:0; bottom:0; z-index:1150;
  background:#fff; border-top-left-radius:16px; border-top-right-radius:16px;
  box-shadow:0 -10px 30px rgba(0,0,0,.25); max-height:70vh; display:flex; flex-direction:column;
  padding-top: max(12px, env(safe-area-inset-top, 0px) + 12px);
}
.vod-comments-header{ display:flex; justify-content:space-between; align-items:center; padding:14px 12px; border-bottom:1px solid #e5e7eb; font-weight:800; }
.vod-comments-list{ overflow:auto; padding:10px 12px; }
.vod-comment{ padding:8px 0; border-bottom:1px solid #f1f5f9; }
.vod-comment .meta{ font-size:12px; color:#64748b; margin-bottom:2px; }
.vod-comments-form{ display:flex; gap:8px; padding:8px 12px; border-top:1px solid #e5e7eb; }
.vod-comments-form input{ flex:1; padding:10px; border:1px solid #d1d5db; border-radius:8px; font-size:16px; }
.vod-comments-header #vodCClose{
  width:36px; height:36px;
  display:grid; place-items:center;
  font-size:24px;
  border:1px solid rgba(15,23,42,0.15);
  border-radius:10px;
  background: rgba(0,0,0,0.05);
}
body.dark .vod-comments{ background:#0f172a; border-color:#334155; color:#e5e7eb; }
body.dark .vod-comments-header{ border-bottom-color:#334155; }
body.dark .vod-comments-list .vod-comment{ border-bottom-color:#334155; }
body.dark .vod-comments-form{ border-top-color:#334155; }
body.dark .vod-comments-form input{ background:#0b1220; color:#e5e7eb; border-color:#334155; }

/* Past daily list — bookshelf grid of postcard screenshots */
.vod-past-hero{
  display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px;
  background:linear-gradient(135deg, #fef9e7, #f5efe3); border:1px solid #e5e7eb; border-radius:16px; padding:12px 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.vod-past-title{ margin:0; }
.vod-past-legend{ display:flex; align-items:center; gap:8px; font-weight:700; color:#0f172a; }
.vod-past-legend .dot{ width:10px; height:10px; border-radius:999px; display:inline-block; }
.vod-past-legend .dot.live{ background:#f97316; box-shadow:0 0 0 4px rgba(249,115,22,.18); }
.vod-past-legend .dot.archive{ background:#94a3b8; box-shadow:0 0 0 4px rgba(148,163,184,.18); }
.vod-past-legend .icon-btn{
  margin-left:auto;
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.12);
  border-radius:12px;
  padding:6px 10px;
}

.vod-past-list{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  padding-bottom:12vh;
}

.vod-past-card{
  position:relative;
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:linear-gradient(180deg, #0f172a 0%, #1f2937 100%);
  box-shadow:0 16px 36px rgba(0,0,0,.18);
  overflow:hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.vod-past-card:hover{
  transform: translateY(-4px);
  box-shadow:0 20px 42px rgba(0,0,0,.22);
}

.vod-past-frame{
  position:relative;
  border-radius:16px;
  margin:10px;
  overflow:hidden;
  background:#111;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.vod-past-image{
  width:100%;
  aspect-ratio: 9 / 16;
  background:#000 center/cover no-repeat;
  position:relative;
}
.vod-past-gradient{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.25) 40%, rgba(0,0,0,.05));
}
.vod-past-chip{
  position:absolute; top:12px; left:12px;
  background:rgba(255,255,255,.15);
  color:#fff; font-size:12px; padding:6px 10px; border-radius:999px;
  backdrop-filter: blur(4px);
  border:1px solid rgba(255,255,255,.25);
}
.vod-past-chip.is-live{
  background:rgba(249,115,22,.9);
  border-color:rgba(255,255,255,.4);
  box-shadow:0 8px 18px rgba(249,115,22,.35);
}
.vod-past-ref{
  position:absolute; left:12px; right:12px; bottom:66px;
  color:#fff; font-weight:800; font-size:18px; text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.vod-past-text{
  position:absolute; left:12px; right:12px; bottom:16px;
  color:#e2e8f0; font-size:14px; line-height:1.4; text-shadow:0 1px 6px rgba(0,0,0,.45);
  max-height:60px; overflow:hidden;
}

.vod-past-footer{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.12));
  border-top:1px solid rgba(255,255,255,.12);
}
.vod-past-meta{
  color:#e2e8f0; font-size:12px; letter-spacing:.02em;
}
.vod-past-actions{ display:flex; gap:8px; }
.vod-past-actions .vod-btn{
  min-width:0;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  padding:8px 10px;
  border-radius:12px;
  color:#f8fafc;
}

body.dark .vod-past-hero{ background:linear-gradient(135deg, #1f2937, #0b1220); border-color:#334155; color:#e5e7eb; }
body.dark .vod-past-legend{ color:#e5e7eb; }
body.dark .vod-past-card{ border-color:#334155; }

.weekly-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:6px;
}

/* make sure the VOD panel sheet shows above the fullscreen image */
#vodPanelSheet { z-index: 1300; position: fixed; left: 0; right: 0; bottom: 56px; }

/* center the full verse in the reel and remove truncation */
.vod-fs-body{
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 14px;
  max-height: 70vh;
  overflow: visible;         /* CHANGED from auto */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.vod-fs-text{
  white-space: normal;        /* no truncation */
}

/* if menu is still tall, let it scroll */
.vod-menu{
  max-height: 50vh;
  overflow: auto;
}

/* Ensure VOD text is readable on bright images */
#vodText, #vodFsText {
  display: inline;
  background: rgba(0,0,0,0.45); /* soft dark overlay */
  color: #fff;
  padding: 6px 10px;
  border-radius: 10px;
  line-height: 1.5;
}

/* Optional: give the reference a small chip style too */
#vodRef, #vodFsRef {
  background: rgba(0,0,0,0.30);
  color: #fff;
  padding: 4px 8px;
  border-radius: 8px;
}


/* Ensure VOD overlays sit above the fullscreen reel */
#vodPastView,
#vodPanelSheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 1300; /* higher than the reel backdrop */
}

/* Ensure reel itself is below overlays */
#vodFs,
#vodFsBackdrop {
  z-index: 1500;
}

/* VOD overlays (context sheet + past list) should sit above the reel */
#vodPanelSheet,
#vodPastView {
  position: fixed;
  inset: 0;
  z-index: 1300;             /* reel is ~1200; this stays above */
}

/* Reel and its backdrop sit below those overlays */
#vodFs,
#vodFsBackdrop {
  z-index: 1500;
}




/* --------- VOD caption plates (card + reel) --------- */
/* You can tune these variables any time */
:root{
  --vod-card-font: 16px;        /* postcard font size */
  --vod-reel-font: 20px;        /* reel font size (slightly larger) */
  --vod-card-caption-y: 0;      /* move caption on the card (e.g., -10px / 10px) */
  --vod-reel-caption-y: -6vh;   /* move caption on the reel (negative = up) */
  --vod-text-align: center;     /* center | left | right */
  --vod-card-font-family: "Times New Roman", Times, serif;
  --vod-plate-opacity: 0.55;
  --vod-img-blur: 0px;
  --vod-aspect: 16 / 9;
  --vod-img-url: none;
}

#vodFsText {
  background: transparent;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

#vodText{
  font-size: var(--vod-card-font);
  position: relative;
  top: var(--vod-card-caption-y);
  font-family: var(--vod-card-font-family);
}

#vodFsText{
  display: block;                       /* ADD THIS */
  font-size: var(--vod-reel-font);
  position: relative;
  top: 0;
  font-family: var(--vod-card-font-family);
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
  background: rgba(0,0,0,0.4);          /* ADD solid background */
  color: #fff;
  padding: 12px 16px;                   /* MORE padding */
  border-radius: 12px;                  /* LARGER radius */
  max-width: 85vw;
  margin: 0 auto;                       /* ADD centering */
  text-align: center;
  word-wrap: break-word;                /* ADD proper wrapping */
  overflow-wrap: break-word;            /* ADD overflow handling */
  line-height: 1.6;                     /* ADD line height */
}

/* small style for the inline reference appended at the end */
#vodFsText .vod-ref{
  opacity: .9;
  font-weight: 600;
  white-space: nowrap;
}

/* We no longer show the separate ref element on the reel */
#vodFsRef{ display:none; }



/* ===== COMPLETELY HIDE COMING SOON FEATURES ===== */
#iconPlan,
#iconSundy,
#cardPlan,
#cardSunday,
.icon-btn.is-disabled,
.home-card.is-disabled {
  display: none !important;
}

/* ===== PULL HOME VIEW CONTENT HIGHER ===== */

/* Reduce extra top breathing room on Home */
#homeView {
  padding-top: 32px;            /* was larger via defaults */
}

/* Icons block: occupy less height and sit closer to the top */
.home-icons {
  height: 26vh;                /* was ~50vh; try 30–36vh as you prefer */
  margin-top: 0px;             /* small nudge up */
}

/* If you still show 2x2 color cards anywhere */
.home-cards {
  height: 28vh;
  margin-top: 4px;
}

/* Verse-of-the-Day card: tighten gaps above/below */
.vod-card {
  margin-top: 4px;             /* was 12px */
  margin-bottom: 4px;          /* was 12px */
}

/* Chat box: closer to the VOD card */
.home-chat {
  margin-top: 8px;             /* was 5vh */
  margin-bottom: 8px;          /* was 2vh */
}

/* Themes plate: tuck it up */
.themes-plate {
  margin-top: 6px;             /* was 8px */
  margin-bottom: 64px;         /* keep above master dock */
}

/* Optional: compress the section header row a bit */
.themes-header { margin: 2px 0 6px; }

/* ===== (Optional) slightly smaller chip gaps to fit more above the fold ===== */
.themes-grid { gap: 6px; }

/* ===== Keep postcard & reel text readable on any image (already added) ===== */
/* Adjust font and vertical position from one place */
:root{
  --vod-card-font: 16px;      /* postcard size */
  --vod-reel-font: 20px;      /* reel size */
  --vod-card-caption-y: 0px;  /* move caption up/down on postcard */
  --vod-reel-caption-y: -6vh; /* move caption up/down on reel */
  --vod-text-align: center;   /* center | left | right */
}

/* You already have these rules; keep them here so you can tweak fast */
#vodText{
  font-size: var(--vod-card-font);
  position: relative;
  top: var(--vod-card-caption-y);
  text-align: var(--vod-text-align);
  font-family: var(--vod-card-font-family);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(1.45em * 3);
}
#vodFsText{
  font-size: var(--vod-reel-font);
  position: relative;
  top: var(--vod-reel-caption-y);
  text-align: var(--vod-text-align);
  font-family: var(--vod-card-font-family);
}

@media (max-width: 520px){
  :root{
    --vod-card-font: 15px;
  }
  #vodText{
    -webkit-line-clamp: 3;
    max-height: calc(1.4em * 3);
  }
  .vod-ref{ font-size:14px; }
}


/* Home icons should size to content; no fixed height */
.home-icons {
  height: auto !important;
  max-height: none !important;
  align-content: start;     /* stop vertical centering that creates big gaps */
  padding: 8px 0;
}

/* If you want the FIRST icons row to be taller, give it its own class */
.home-icons--top {
  /* optional look: remove if you want auto here too */
  /* Example: slightly larger spacing without forcing viewport height */
  padding-top: 4px;
  padding-bottom: 8px;
}

/* Hide a grid if all children are hidden (empty after disabling buttons) */
.home-icons:empty {
  display: none;
}

/* If the grid contains only hidden children, Safari might still keep whitespace.
   This prevents the “empty spacer” even when nodes exist but are display:none. */

/* Ensure the icons row is a 2-col grid that sizes to its content */
#homeView .home-icons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 14px;
  height: auto !important;         /* override earlier 26vh / 50vh */
  max-height: none !important;      /* override 50svh cap */
  align-content: start;             /* no vertical centering gaps */
  padding: 8px 0;
}

/* Grid items must remain items (undo any prior 'display: contents') */
#homeView .home-icons > .icon-btn {
  display: flex !important;
}

/* dvh fallback for older iOS Safari (pre‑iOS 16) */
@supports not (height: 100dvh) {
  #appMain { height: calc(100vh - var(--nav-space)); }
}

/* Force the first Home icons row to be a 2‑column grid */
#homeView .home-icons:first-of-type {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-auto-rows: auto;
  gap: 14px;
  width: min(92vw, 680px);
  margin: 0 auto;
  padding: 8px 0;
  height: auto !important;        /* undo earlier 26vh/50vh */
  max-height: none !important;    /* undo 50svh caps */
  align-content: start;
}

/* Ensure items don’t span full width */
#homeView .home-icons:first-of-type > * {
  grid-column: auto !important;
}

/* Each icon remains a normal element (not contents) */
#homeView .home-icons:first-of-type > .icon-btn {
  display: flex !important;
}


/* Show header on Bible and Account views */
.topbar { display: none; }
body.view-bible .topbar,
body.view-account .topbar,
body.view-ask .topbar { display: flex; }

/* Bible toolbar layout */
.bible-toolbar {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.account-toolbar {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
body.view-account #accountToolbar { display:flex; }
body.view-account #bibleToolbar { display:none; }
body.view-bible #accountToolbar { display:none; }

.ask-toolbar {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
body.view-ask #askToolbar { display:flex; }
body.view-ask #bibleToolbar { display:none; }
body.view-ask #accountToolbar { display:none; }
.bible-toolbar .bt-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bible-toolbar .bt-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bt-version {
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 8px;
  background: #eef2ff;
  color: #1f2937;
  border: 1px solid #c7d2fe;
}
body.dark .bt-version {
  background: #172554;
  color: #e5e7eb;
  border-color: #1d4ed8;
}

/* Hide legacy header items globally (if still in DOM for compatibility) */
.topbar .brand,
#authBar,
#btnOpenPaywall { display: none !important; }


/* Make top bar safe-area aware and sticky, with slight offset from notch */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;

  /* Safe-area padding to avoid iPhone clock/notch overlap */
  padding-top: max(2px, calc(env(safe-area-inset-top) + 1px));
  padding-bottom: 2px;
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
}

body.dark .topbar {
  background: #0f172a;
  border-bottom-color: #334155;
}

/* Toolbar layout inside topbar */
.bible-toolbar {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Left: Version + selects */
.bible-toolbar .bt-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Right: icon-only buttons */
.bible-toolbar .bt-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bible-toolbar .bt-right .tiny-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 18px;   /* emoji size */
  line-height: 1;
}

/* Version chip */
.bt-version {
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 8px;
  background: #eef2ff;
  color: #1f2937;
  border: 1px solid #c7d2fe;
}
body.dark .bt-version {
  background: #172554;
  color: #e5e7eb;
  border-color: #1d4ed8;
}

/* Hide the inline Bible controls and inline settings button (we use the top bar now) */
#bibleView .controls { display: none !important; }

/* Reader settings quick links */
.reader-settings-row{
  display:flex;
  justify-content:flex-end;
  margin: 4px 0 10px;
}

.bible-toolbar .bt-right .tiny-btn {
  height: 36px;               /* tweak 34–40px */
  width: 36px;
  display: grid;
  place-items: center;
  padding: 0;
}

.bt-version { margin-top: 2px; } /* small visual alignment nudge */


/* ===== SAFE AREA FIX FOR ALL NON-BIBLE VIEWS ===== */

/* Default padding for all views - accounts for iPhone notch/status bar */
.view {
  padding-top: max(48px, env(safe-area-inset-top) + 48px) !important;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  padding-bottom: 16px;
}

/* Bible view has its own top bar, so less padding needed */
body.view-bible .view {
  padding-top: 16px !important;
}

/* Individual view adjustments (if you need to fine-tune further) */
#homeView {
  /* Additional spacing if needed beyond the base .view padding */
  /* padding-top is already handled by .view rule above */
}

.vod-card {
  margin-top: 0;
  margin-bottom: 8px;
}

#accountView {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 160px; /* keep clear of master nav */
}

/* Tighten the Ask view so the chat log sits right under the header */
body.view-ask #askView {
  padding-top: 0 !important;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
}

/* When keyboard is up, keep the form sticky and give the log breathing room */
body.keyboard-up #askView .chat-form{
  position: sticky;
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  margin-top: auto;
}
body.keyboard-up #askView .chat-log{
  padding-bottom: 140px; /* extra space so last messages aren't hidden */
}

/* Home icons: auto-size to content, no fixed height */
.home-icons {
  height: auto !important;
  max-height: none !important;
  margin-top: 0px;           /* lift up */
  padding: 4px 0 8px;
}

/* VOD card spacing */
.vod-card {
  margin-top: 0;
  margin-bottom: 16px; /* doubled gap to chatbox */
}

/* ===== HOME CHATBOX SIZING ===== */
/* Adjust --chatbox-width to control the width (try 50vw - 95vw, or fixed like 500px) */
/* Adjust --chatbox-max to set the maximum width (try 400px - 900px) */
/* Adjust --chatbox-padding to control height/thickness (try 6px - 14px) */
:root {
  --chatbox-width: 88vw;      /* percentage of viewport width */
  --chatbox-max: 680px;       /* maximum width on larger screens */
  --chatbox-padding: 6px;     /* smaller = narrower height, larger = taller */
}

.home-chat {
  width: min(var(--chatbox-width), var(--chatbox-max));
  margin: 20px auto;          /* doubled space below VOD */
  padding: var(--chatbox-padding);  /* controls the height/thickness */
}

/* Input field height adjustment */
.home-chat-input {
  padding: 8px 12px;          /* reduce first number (8px) to make input shorter */
  font-size: 16px;
}

/* Button height matches input */
.home-chat-btn {
  padding: 8px 14px;          /* reduce first number to match input height */
  min-height: 40px;           /* adjust this for overall button height (try 36-48px) */
}

/* Themes plate */
.themes-plate {
  margin-top: 24px;           /* doubled gap below chat */
  margin-bottom: 80px;         /* keep above master dock */
}



/* Comments modal always above reel/postcard */
#vodComments {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  overflow: auto;
}

#vodCBackdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  background: rgba(0,0,0,0.35);
}

/* Generic modal shell (used by VOD image gallery) */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 2600; /* above VOD fullscreen (2500) */
}
.modal-backdrop[hidden] { display: none; }

.modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(94vw, 980px);
  max-height: 90vh;
  height: 66vh; /* fill about 2/3 of screen */
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
  z-index: 2610; /* above VOD fullscreen (2500) */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal[aria-hidden="true"] { display: none; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
}
.modal-body {
  padding: 16px;
  overflow: auto;
  background: #f3f4f6; /* soft gray backdrop for gallery */
}
.close-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
}
body.dark .modal { background: #0f172a; color: #e5e7eb; border: 1px solid #334155; }
body.dark .modal-header { border-bottom-color: #334155; }
body.dark .close-btn { color: #e5e7eb; }
body.dark .modal-backdrop { background: rgba(0,0,0,0.65); }
body.dark .modal-body { background: #0b1220; }


.weekly-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 8px 0 18px;
}

.weekly-item {
  position: relative;
  border: 1px solid rgba(15,23,42,0.12);
  background: #fdfaf5;
  text-align: left;
  font-size: 0.96rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}
.weekly-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.14);
}
.weekly-item.current-week{
  box-shadow: 0 16px 36px rgba(37,99,235,0.22);
}

.weekly-list.newsletter-mode{
  display:block;
  max-width: 980px;
  width:100%;
  padding:0 0 12px;
  margin: 0 auto;
}

.weekly-cover{
  position: relative;
  height: 160px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 8px 18px rgba(0,0,0,0.14);
  background: #fffaf0;
  border: 1px solid rgba(15,23,42,0.08);
}
.weekly-ref{
  color: #1f2937;
  font-weight: 800;
  text-shadow: none;
  font-size: 14px;
  font-family: "Times New Roman", Times, serif;
}
.weekly-meta{
  margin-top: 10px;
  padding: 0 2px 10px 2px;
  font-family: "Times New Roman", Times, serif;
}
.weekly-range{
  font-weight: 800;
  font-size: 13px;
  color: #111827;
}
.weekly-title{
  font-size: 12px;
  color: #374151;
  margin-top: 4px;
  line-height: 1.4;
}

.settings-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:8px 0;
}
.settings-group{
  border:1px solid rgba(15,23,42,0.08);
  border-radius:12px;
  padding:10px 12px;
  margin-bottom:10px;
  background:rgba(255,255,255,0.08);
}
.settings-plate{
  border:1px solid rgba(15,23,42,0.08);
  border-radius:12px;
  padding:10px 12px;
  margin-bottom:10px;
}
.vod-plate{ background: linear-gradient(135deg, rgba(14,165,233,0.08), rgba(14,165,233,0.02)); }
.weekly-plate{ background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(99,102,241,0.02)); }
.settings-heading{
  font-weight:800;
  margin-bottom:6px;
}
.settings-label{ font-weight:700; }
.settings-controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.settings-controls label{ display:flex; align-items:center; gap:6px; font-weight:600; }
.settings-controls select{ padding:6px 8px; border:1px solid #d1d5db; border-radius:8px; }
.settings-controls input[type="time"]{ padding:6px 8px; border:1px solid #d1d5db; border-radius:8px; }
.vault-content{ margin-top:10px; display:grid; gap:10px; }
.vault-content .vault-section{
  border:1px solid rgba(15,23,42,0.08);
  border-radius:10px;
  padding:10px 12px;
  background:rgba(255,255,255,0.08);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.vault-content .vault-section:hover{ transform: translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,0.12); }
.vault-content .vault-section h4{ margin:0 0 6px; display:flex; justify-content:space-between; align-items:center; }
.vault-content ul{ margin:0; padding-left:18px; }

/* Verse actions flyout */
.verse-actions{
  position: fixed;
  top: 20%;
  right: 10px;
  width: 120px;
  max-height: 260px;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(5px);
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
  padding: 8px;
  z-index: 1300;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.verse-actions[aria-hidden="true"]{ display:none; }
.verse-actions.fade-in{ opacity:1; transform: translateY(0); }
.va-title{ font-weight:800; margin-bottom:4px; display:flex; align-items:center; justify-content:space-between; gap:6px; }
.va-toggle{
  appearance:none;
  border:1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color:#e5e7eb;
  border-radius:6px;
  padding:2px 6px;
  cursor:pointer;
}
.va-body{
  background: rgba(15,23,42,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.va-body.collapsed{ display:none; }
.va-buttons{ display:flex; flex-direction:column; gap:6px; }
.va-buttons button{
  appearance:none; border:1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.12);
  color:#e5e7eb; border-radius:8px; padding:6px 8px; font-weight:700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  cursor:pointer;
}
.va-buttons button:hover{ background: rgba(255,255,255,0.15); }
.va-colors{ display:flex; flex-wrap:wrap; gap:6px; justify-content: center; }
.va-color{
  width:22px; height:22px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.6);
  cursor:pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.va-close{ background:rgba(255,255,255,0.18) !important; }

/* Highlight legibility across themes */
.verse .verse-text.is-highlighted{
  color: #0b172a !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
  mix-blend-mode: normal;
}
body.dark .verse .verse-text.is-highlighted{
  color: #0b172a !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}

.weekly-item:hover {
  background: #eaeaea;
}

.current-week {
  background: #e0f7fa;
  border-color: #26c6da;
  font-weight: 600;
}



/* Image Gallery */
.gallery-card {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  border-radius: 10px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 2px solid #e5e7eb;
}

.gallery-card:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.gallery-card::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  background: #3b82f6;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

/* Show checkmark for whichever card has the selected border */
.gallery-card[style*="border: 3px solid"]::after {
  display: flex;
}

/* ---------- Weekly Newsletter layout ---------- */
.newsletter-page{
  background: linear-gradient(135deg, #fff7ed, #fff1e6);
  padding: 14px;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  font-family: "Times New Roman", Times, serif;
  width: 100%;
  max-width: 940px;
  margin: 0;
  box-sizing: border-box;
  position: relative;
}
.newsletter-hero{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:16px;
}
.newsletter-hero-icon{
  width:44px; height:44px;
  display:grid; place-items:center;
  background:#ea580c; color:#fff;
  border-radius:12px;
  font-size:20px;
}
.newsletter-eyebrow{
  font-size:12px; text-transform:uppercase;
  letter-spacing:0.08em; color:#9a3412; font-weight:700;
}
.newsletter-page h2{ margin:4px 0; font-size:22px; color:#7c2d12; }
.newsletter-page p{ margin:0; color:#9a3412; }
.newsletter-card{
  background:#fff;
  border-radius:20px;
  padding:12px 16px 16px;
  box-shadow:0 16px 40px rgba(0,0,0,0.08);
  border-left:4px solid #ea580c;
  margin:0 auto 16px;
  position: relative;
  font-family: "Times New Roman", Times, serif;
  width: 100%;
  box-sizing: border-box;
}
.newsletter-card.featured{ border-left-color:#ea580c; }
.newsletter-card-badge{
  display:inline-block;
  background:#ea580c; color:#fff;
  padding:4px 10px; border-radius:999px;
  font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
  float: right;
  margin-left:8px;
}
.newsletter-tools{
  position:absolute;
  top:8px;
  right:8px;
  display:flex;
  gap:8px;
}
.newsletter-tools .newsletter-icon{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid #fed7aa;
  background:#fff7ed;
  display:grid;
  place-items:center;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
}
.newsletter-card-date{ margin:6px 0 10px; color:#7c2d12; font-weight:600; float:right; }
.newsletter-card h3{ margin:4px 0 6px; color:#1f2937; font-size:20px; clear:both; }
.newsletter-subtitle{ color:#7c2d12; font-weight:600; margin:2px 0 12px; font-style: italic; }
.newsletter-passage{ color:#ea580c; font-weight:700; margin:6px 0 10px; }
.newsletter-verse-box{
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border-left:4px solid #f59e0b;
  padding:10px; border-radius:12px; margin-bottom:10px;
}
.newsletter-verse-box .verse-ref{ font-size:13px; font-weight:700; color:#7c2d12; }
.newsletter-verse-box .verse-text{ font-size:14px; color:#374151; font-style:italic; }
.newsletter-verse-box.toggle{ cursor:pointer; }
.newsletter-takeaways{
  background:#fff7ed;
  border:1px solid #fde68a;
  border-radius:12px;
  padding:10px 12px;
  margin:6px 0 12px;
}
.newsletter-takeaways .nt-title{
  font-weight:800;
  color:#92400e;
  margin-bottom:6px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.02em;
}
.newsletter-takeaways ul{
  margin:0;
  padding-left:18px;
  color:#374151;
  line-height:1.5;
  font-size:14px;
}
.newsletter-excerpt{ color:#4b5563; line-height:1.6; }
.newsletter-questions{
  background:#fffaf5;
  border:1px solid #fde68a;
  border-radius:12px;
  padding:10px 12px;
  margin:10px 0 12px;
}
.newsletter-questions .nq-title{
  font-weight:800;
  color:#92400e;
  margin-bottom:6px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.02em;
}
.newsletter-questions ol{
  margin:0;
  padding-left:18px;
  color:#374151;
  line-height:1.5;
  font-size:14px;
}
.newsletter-guide{
  background:#fffaf5;
  border:1px solid #fde68a;
  border-radius:12px;
  padding:10px 12px;
  margin:10px 0 12px;
}
.newsletter-guide .ng-title{
  font-weight:800;
  color:#92400e;
  margin-bottom:6px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.02em;
}
.newsletter-guide .ng-body{ color:#374151; line-height:1.5; font-size:14px; }
.newsletter-tags{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.newsletter-tags span{
  background:#fef3c7; color:#92400e;
  padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:600;
}
.newsletter-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.newsletter-actions.inline{
  margin-top: 0;
}
.newsletter-btn{
  border:none; cursor:pointer; border-radius:12px;
  padding:12px 14px; font-weight:700; font-size:14px;
  font-family: "Times New Roman", Times, serif;
}
.newsletter-btn.primary{
  background:#ea580c; color:#fff; flex:1; text-align:center;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.newsletter-btn.primary:hover{ background:#c2410c; }
.newsletter-actions.inline .newsletter-btn.primary{
  flex: 0 1 66%;
  min-width: 240px;
  max-width: 70%;
}
.newsletter-btn.ghost{
  background: linear-gradient(135deg, #fff7ed, #ffe8d2);
  color:#9a3412;
  border:1px solid #f5c28b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 12px rgba(0,0,0,0.08);
}
.newsletter-btn.ghost.small{
  padding:8px 12px;
  font-size:13px;
  margin:4px 0;
}
.newsletter-btn.ghost:hover{ background:#ffedd5; }
.newsletter-meta{ color:#6b7280; font-size:13px; }
.newsletter-meta.below{ margin-top:12px; }
.newsletter-collapsibles{ display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 8px; }
.newsletter-collapse[hidden]{ display:none; }
.newsletter-icon-row{ display:flex; gap:8px; align-items:center; }
.newsletter-icon{
  border:none;
  background: #f4f5f7;
  color:#1f2937;
  width:46px; height:46px;
  border-radius:12px;
  display:grid; place-items:center;
  font-size:18px;
  cursor:pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.newsletter-icon:hover{ background:#ffedd5; }
.newsletter-icon svg{
  width:22px; height:22px;
}
.newsletter-icon.active{
  color:#e11d48;
}

/* Cream vs Navy themes */
.newsletter-previous{ background:#fff; border-radius:16px; padding:12px; box-shadow:0 10px 30px rgba(0,0,0,0.06); }
.newsletter-prev-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.newsletter-prev-head h4{ margin:0; font-size:16px; color:#1f2937; }
.newsletter-prev-list{ display:grid; gap:10px; }
.newsletter-prev-card{
  border:1px solid #f3f4f6; border-radius:12px;
  padding:10px; background:#fff; cursor:pointer;
  transition: all .2s ease;
  font-family: "Times New Roman", Times, serif;
}
.newsletter-prev-card:hover{ border-color:#fb923c; box-shadow:0 12px 24px rgba(234,88,12,0.12); }
.newsletter-prev-card .prev-top{ display:flex; gap:8px; align-items:center; justify-content:space-between; color:#6b7280; font-size:12px; }
.newsletter-prev-card .prev-title{ font-weight:700; color:#1f2937; margin:6px 0; }
.newsletter-prev-card .prev-subtitle{ color:#4b5563; font-weight:600; margin:-2px 0 6px; }
.newsletter-prev-card .prev-verse{ color:#c2410c; font-weight:700; font-size:13px; }
.newsletter-prev-card .prev-excerpt{ color:#4b5563; font-size:13px; }
.newsletter-full{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid #f3f4f6;
}
.newsletter-full.prev{
  margin-top:8px;
  padding-top:8px;
}
.newsletter-body{ color:#1f2937; line-height:1.7; margin:6px 0 10px; }
.newsletter-viewall{
  text-align:center;
  margin: 18px 0 6px;
}
.newsletter-btn.ghost{
  background: transparent;
  color: #ea580c;
  border: 1px solid #fed7aa;
}
.newsletter-btn.ghost:hover{
  background: #fff7ed;
}

body.dark .newsletter-page{ background: linear-gradient(135deg, #0f172a, #111827); box-shadow:0 10px 40px rgba(0,0,0,0.35); }
body.dark .newsletter-hero-icon{ background:#f97316; }
body.dark .newsletter-eyebrow, body.dark .newsletter-page h2, body.dark .newsletter-page p{ color:#fde68a; }
body.dark .newsletter-card, body.dark .newsletter-previous{ background:#0f172a; border-color:#334155; }
body.dark .newsletter-card h3, body.dark .newsletter-prev-card .prev-title{ color:#e5e7eb; }
body.dark .newsletter-card-date, body.dark .newsletter-excerpt, body.dark .newsletter-prev-card .prev-excerpt{ color:#cbd5e1; }
body.dark .newsletter-verse-box{ background: linear-gradient(135deg, #1f2937, #111827); border-left-color:#f59e0b; }
body.dark .newsletter-verse-box .verse-text{ color:#e5e7eb; }

/* Prevent horizontal scroll */
html, body{
  overflow-x: hidden;
}
body.dark .newsletter-takeaways{
  background:#0b1220;
  border-color:#f59e0b;
}
body.dark .newsletter-takeaways .nt-title{ color:#fbbf24; }
body.dark .newsletter-takeaways ul{ color:#e5e7eb; }
body.dark .newsletter-questions{
  background:#0b1220;
  border-color:#f59e0b;
}
body.dark .newsletter-guide{
  background:#0b1220;
  border-color:#f59e0b;
}
body.dark .newsletter-guide .ng-title{ color:#fbbf24; }
body.dark .newsletter-guide .ng-body{ color:#e5e7eb; }
body.dark .newsletter-questions .nq-title{ color:#fbbf24; }
body.dark .newsletter-questions ol{ color:#e5e7eb; }
body.dark .newsletter-prev-card{ background:#0f172a; border-color:#334155; }
body.dark .newsletter-prev-card:hover{ border-color:#f59e0b; box-shadow:0 10px 20px rgba(245,158,11,0.25); }
body.dark .newsletter-tags span{ background:#f59e0b; color:#0f172a; }
body.dark .newsletter-btn.primary{ background:#f59e0b; color:#111827; }
body.dark .newsletter-prev-card .prev-verse{ color:#fb923c; }
body.dark .newsletter-prev-card .prev-subtitle{ color:#cbd5e1; }
body.dark .newsletter-btn.ghost{
  color:#fbbf24;
  border-color:#f59e0b;
  background: transparent;
}
body.dark .newsletter-btn.ghost:hover{
  background: rgba(245,158,11,0.12);
}