/* ─────────────────────────────────────────
   Desire of Ages Devotionals — Week page
   ───────────────────────────────────────── */

/* ── Tokens ── */
:root {
  --gold:   #e8b84b;
  --gold2:  #f5d580;
  --glow:   rgba(232,184,75,0.55);
  --dark:   #080603;
  --card:   rgba(10,7,2,0.78);
  --text:   #f0e4cc;
  --muted:  rgba(240,228,204,0.60);
  --border: rgba(232,184,75,0.16);
}

/* ── Org banner ── */
.dept-banner {
  position: relative; z-index: 9999; width: 100%;
  background: linear-gradient(90deg, #9c7420 0%, #c9962e 20%, #e8b84b 40%, #f5d580 50%, #e8b84b 60%, #c9962e 80%, #9c7420 100%);
  padding: 7px 20px;
  text-align: center;
  box-shadow: 0 2px 16px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.22);
  overflow: hidden;
  max-height: 50px;
  transition: max-height 0.32s cubic-bezier(0.4,0,0.2,1),
              padding   0.32s cubic-bezier(0.4,0,0.2,1),
              opacity   0.25s ease,
              box-shadow 0.25s ease;
}
.dept-banner.banner-hidden {
  max-height: 0; padding-top: 0; padding-bottom: 0;
  opacity: 0; box-shadow: none;
}
.dept-banner-inner {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: Georgia, serif;
  font-size: 0.62rem; letter-spacing: 0.24em;
  font-weight: 700; color: #1c0e03;
}
.dept-ornament { font-size: 0.45rem; opacity: 0.55; }

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%; overflow: hidden;
  background: var(--dark);
  color: var(--text);
  font-family: Georgia, 'Times New Roman', serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
}

#bg { position: fixed; inset: 0; z-index: 0; }

.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 28%, rgba(8,6,3,0.68) 100%);
}
.bg-glow {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(232,184,75,0.12) 0%, transparent 62%);
  animation: glowIn 2s ease 0.4s forwards;
}
@keyframes glowIn { to { opacity: 1; } }

/* ── Shell ── */
.shell {
  position: relative; z-index: 2;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
}

/* ── Header ── */
.header {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 26px 24px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(8,6,3,0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  gap: 6px;
  position: relative;
}

.week-badge {
  display: inline-flex; align-items: center; gap: 10px;
  opacity: 0; animation: fadeUp 0.65s ease 0.2s forwards;
}
.week-badge-inner {
  font-size: 0.58rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}
.badge-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); opacity: 0.6; flex-shrink: 0;
}

.ch-title {
  font-size: clamp(1.3rem, 2.8vw, 2.1rem);
  font-style: italic; font-weight: 400; letter-spacing: 0.03em;
  color: var(--text); line-height: 1.2;
  opacity: 0; animation: fadeUp 0.65s ease 0.42s forwards;
  text-align: center;
}
.ch-title em { color: var(--gold); font-style: italic; }

.header-sub {
  display: flex; align-items: center; gap: 18px;
  opacity: 0; animation: fadeUp 0.65s ease 0.6s forwards;
}
.date-range {
  font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
}
.header-rule { width: 1px; height: 12px; background: var(--border); }
.scripture-ref {
  font-size: 0.65rem; letter-spacing: 0.14em; color: var(--muted); font-style: italic;
}

.header-back {
  position: absolute; top: 22px; left: 32px;
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color 0.2s;
  display: flex; align-items: center; gap: 5px;
}
.header-back:hover { color: var(--gold); }
.header-back::before { content: '←'; font-style: normal; }

/* ── Language toggle ── */
.lang-toggle {
  position: absolute; top: 50%; right: 32px; transform: translateY(-50%);
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  user-select: none;
}
.lang-lbl {
  font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); transition: color 0.2s, font-weight 0.2s;
  font-weight: 400;
}
.en-lbl { color: var(--gold); font-weight: 700; }
.lang-track {
  width: 44px; height: 24px; border-radius: 12px;
  background: rgba(232,184,75,0.1); border: 1px solid rgba(232,184,75,0.35);
  position: relative; transition: border-color 0.2s;
}
.lang-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 1px 5px rgba(0,0,0,0.55);
  transition: transform 0.25s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ── Language visibility ── */
.ceb-title { display: none; }
.ceb { display: none; }

[data-lang="ceb"] .en-title  { display: none; }
[data-lang="ceb"] .ceb-title { display: inline; }
[data-lang="ceb"] .en        { display: none !important; }
[data-lang="ceb"] .ceb       { display: block; }
[data-lang="ceb"] .lang-thumb  { transform: translateX(20px); }
[data-lang="ceb"] .en-lbl  { color: var(--muted); font-weight: 400; }
[data-lang="ceb"] .ceb-lbl { color: var(--gold);  font-weight: 700; }
[data-lang="ceb"] .ceb-pending { display: block; }

/* ── Day nav ── */
.day-nav {
  flex-shrink: 0;
  display: flex; gap: 6px; justify-content: center; align-items: center;
  padding: 14px 20px;
  overflow-x: auto; background: rgba(8,6,3,0.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  opacity: 0; animation: fadeUp 0.65s ease 0.8s forwards;
}
.day-nav::-webkit-scrollbar { display: none; }

.day-pill {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 14px; border-radius: 40px; cursor: pointer;
  background: rgba(232,184,75,0.04); border: 1px solid rgba(232,184,75,0.16);
  transition: all 0.22s ease; user-select: none;
}
.day-pill:hover  { background: rgba(232,184,75,0.12); border-color: rgba(232,184,75,0.4); }
.day-pill.active { background: var(--gold); border-color: var(--gold); }

.pill-name {
  font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); transition: color 0.22s;
}
.day-pill.active .pill-name { color: #0c0800; }
.day-pill:hover  .pill-name { color: var(--gold2); }

.pill-date {
  font-size: 0.76rem; font-style: italic; color: var(--text);
  transition: color 0.22s; font-weight: 400;
}
.day-pill.active .pill-date { color: #0c0800; font-weight: 700; }

/* ── Content ── */
.content-wrap { flex: 1; overflow: hidden; position: relative; }
.content-area {
  height: 100%; overflow-y: auto;
  padding: 36px clamp(20px, 7vw, 140px) 20px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.content-area::-webkit-scrollbar       { width: 4px; }
.content-area::-webkit-scrollbar-track { background: transparent; }
.content-area::-webkit-scrollbar-thumb { background: rgba(232,184,75,0.22); border-radius: 2px; }

/* ── Day panel ── */
.day-panel { display: none; max-width: 740px; margin: 0 auto; }
.day-panel.active {
  display: block;
  animation: panelIn 0.4s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.panel-eyebrow {
  font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.panel-heading {
  font-size: clamp(1.6rem, 3vw, 2.5rem); font-style: italic; font-weight: 400;
  line-height: 1.2; margin-bottom: 8px;
}
.panel-heading em { color: var(--gold); }
.panel-scripture {
  font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 26px;
}
.panel-rule {
  width: 60px; height: 1px; margin-bottom: 28px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.day-panel p {
  font-size: var(--fz, 1rem);
  line-height: 2; color: var(--text);
  text-indent: 2em; text-align: justify; margin-bottom: 22px;
}
.day-panel p:first-of-type { text-indent: 0; }
.day-panel p:last-of-type  { margin-bottom: 0; }

.pg {
  font-size: 0.6rem; color: rgba(232,184,75,0.4);
  vertical-align: super; margin: 0 2px; font-style: normal;
  letter-spacing: 0;
}

/* ── Reflection ── */
.reflection {
  margin-top: 28px;
  padding: 36px 32px 32px;
  background: rgba(30, 20, 4, 0.85);
  border: 1px solid rgba(232,184,75,0.30);
  border-radius: 20px;
  position: relative;
  box-shadow: 0 4px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(232,184,75,0.08);
}
.reflection::before {
  content: '\201C';
  position: absolute; top: 12px; left: 20px;
  font-size: 5rem; line-height: 1;
  color: var(--gold); opacity: 0.55;
  font-family: Georgia, serif; pointer-events: none;
}
.reflection::after {
  content: '\201D';
  position: absolute; bottom: 4px; right: 22px;
  font-size: 5rem; line-height: 1;
  color: var(--gold); opacity: 0.55;
  font-family: Georgia, serif; pointer-events: none;
}
.reflection-tag {
  font-size: 0.52rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: 16px;
}
.reflection p {
  font-size: 1rem; line-height: 2; font-style: italic;
  color: #f5e8cc; text-indent: 0 !important; margin-bottom: 0;
  padding: 0 10px;
}

/* ── Reflection answer area ── */
.reflection-answer-area {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(232,184,75,0.18);
}
.reflection-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(232,184,75,0.22);
  border-radius: 12px;
  color: #f0e4cc;
  font-family: Georgia, serif;
  font-size: 0.88rem;
  line-height: 1.75;
  padding: 12px 14px;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.reflection-input::placeholder { color: rgba(240,228,204,0.35); }
.reflection-input:focus {
  border-color: rgba(232,184,75,0.5);
  background: rgba(255,255,255,0.08);
}
.reflection-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.reflection-save-btn {
  padding: 9px 22px;
  border-radius: 22px;
  border: 1px solid rgba(232,184,75,0.5);
  background: transparent;
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.reflection-save-btn:hover {
  background: var(--gold);
  color: #0c0800;
  border-color: var(--gold);
}
.reflection-save-btn.saved {
  background: rgba(114,201,138,0.15);
  border-color: #72c98a;
  color: #72c98a;
}
.reflection-save-btn:disabled { opacity: 0.6; cursor: default; }

/* Sign-in prompt that appears when user tries to save unauthenticated */
.reflection-signin-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(232,184,75,0.10);
  border: 1px solid rgba(232,184,75,0.28);
  border-radius: 12px;
  flex-wrap: wrap;
}
.reflection-signin-prompt span {
  flex: 1;
  font-size: 0.82rem;
  color: #f0e4cc;
  font-style: italic;
  min-width: 140px;
}
.reflection-signin-btn {
  padding: 7px 18px;
  border-radius: 20px;
  background: var(--gold);
  color: #0c0800;
  font-family: Georgia, serif;
  font-size: 0.78rem;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.reflection-signin-btn:hover { background: #f5d580; }
.reflection-signin-close {
  background: none; border: none;
  color: rgba(240,228,204,0.45); font-size: 0.85rem;
  cursor: pointer; padding: 4px; line-height: 1;
  transition: color 0.15s;
}
.reflection-signin-close:hover { color: #f0e4cc; }

/* ── Daily T/F quiz ── */
/* ── Quiz trigger card (inline, opens modal) ── */
.quiz-trigger {
  margin-top: 28px;
  padding: 36px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  border: 1px solid rgba(232,184,75,0.35);
  border-radius: 20px;
  background-image: linear-gradient(160deg, rgba(8,5,0,0.52) 0%, rgba(8,5,0,0.68) 100%);
  background-color: #1a1008;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.2s, box-shadow 0.25s;
  box-shadow: 0 6px 28px rgba(0,0,0,0.45);
}
.quiz-trigger::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at top left, rgba(232,184,75,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.quiz-trigger:hover {
  border-color: rgba(232,184,75,0.65);
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(0,0,0,0.5), 0 0 0 1px rgba(232,184,75,0.2);
}
.quiz-trigger:active { transform: translateY(0); }
[data-theme="light"] .quiz-trigger {
  background:
    linear-gradient(160deg, rgba(8,5,0,0.45) 0%, rgba(8,5,0,0.60) 100%)
    center/cover no-repeat;
  border-color: rgba(200,155,42,0.4);
}
[data-theme="light"] .quiz-trigger:hover { border-color: #e8b84b; box-shadow: 0 10px 36px rgba(0,0,0,0.4); }

/* ── Per-day quiz card photos ── */
#qtrig-sunday  { background-image: linear-gradient(160deg,rgba(8,5,0,0.50) 0%,rgba(8,5,0,0.68) 100%), url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=800&q=80'); background-size: cover; background-position: center; }
#qtrig-monday  { background-image: linear-gradient(160deg,rgba(8,5,0,0.50) 0%,rgba(8,5,0,0.68) 100%), url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=800&q=80'); background-size: cover; background-position: center; }
#qtrig-tuesday { background-image: linear-gradient(160deg,rgba(8,5,0,0.48) 0%,rgba(8,5,0,0.65) 100%), url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=800&q=80'); background-size: cover; background-position: center; }
#qtrig-wednesday { background-image: linear-gradient(160deg,rgba(8,5,0,0.52) 0%,rgba(8,5,0,0.70) 100%), url('https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&fit=crop&w=800&q=80'); background-size: cover; background-position: center; }
#qtrig-thursday  { background-image: linear-gradient(160deg,rgba(8,5,0,0.50) 0%,rgba(8,5,0,0.68) 100%), url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=800&q=80'); background-size: cover; background-position: center; }
#qtrig-friday    { background-image: linear-gradient(160deg,rgba(8,5,0,0.48) 0%,rgba(8,5,0,0.65) 100%), url('https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=800&q=80'); background-size: cover; background-position: center; }
#qtrig-saturday  { background-image: linear-gradient(160deg,rgba(8,5,0,0.55) 0%,rgba(8,5,0,0.72) 100%), url('https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=800&q=80'); background-size: cover; background-position: center; }

.qtrig-left { display: flex; flex-direction: column; gap: 6px; }
.qtrig-eyebrow {
  font-size: 0.60rem; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--gold); font-family: inherit; font-weight: 700;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}
.qtrig-day {
  font-family: Georgia, serif; font-size: 1.55rem; color: #fff;
  line-height: 1.15; font-weight: normal;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.qtrig-hint {
  font-size: 0.68rem; color: rgba(255,255,255,0.65); margin-top: 2px;
}
/* Done state */
.quiz-trigger.qtrig-done .qtrig-hint { color: #72c98a; }
.quiz-trigger.qtrig-done { border-color: rgba(114,201,138,0.3); }

/* ── Locked quiz state ── */
.quiz-trigger.qtrig-locked {
  opacity: 0.55; cursor: default; pointer-events: auto;
  border-color: rgba(232,184,75,0.12);
}
.quiz-trigger.qtrig-locked .qtrig-cta {
  background: rgba(232,184,75,0.18); color: rgba(232,184,75,0.55);
  box-shadow: none;
}
.quiz-trigger.qtrig-locked:hover { transform: none; box-shadow: none; border-color: rgba(232,184,75,0.12); }
.quiz-trigger.qtrig-locked:hover .qtrig-cta { background: rgba(232,184,75,0.18); transform: none; }

/* ── Lock toast ── */
.quiz-lock-toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(10px);
  background: rgba(14,10,3,0.97); border: 1px solid rgba(232,184,75,0.35);
  border-radius: 10px; padding: 11px 20px;
  color: rgba(240,225,195,0.85); font-size: 0.82rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5); white-space: nowrap;
  z-index: 9990; opacity: 0; pointer-events: none;
  transition: opacity 0.22s, transform 0.22s;
}
.quiz-lock-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.qtrig-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 26px; border-radius: 28px;
  background: var(--gold); color: #0c0800;
  font-family: Georgia, serif; font-size: 0.85rem; font-weight: bold;
  letter-spacing: 0.04em; white-space: nowrap;
  transition: background 0.18s, transform 0.15s;
  box-shadow: 0 2px 12px rgba(232,184,75,0.35);
}
.quiz-trigger:hover .qtrig-cta { background: #f5d580; transform: translateX(2px); }

/* Bilingual inline overrides — only override display in CEB mode (EN hides via global rule) */
[data-lang="ceb"] .qtrig-eyebrow .ceb,
[data-lang="ceb"] .qtrig-cta .ceb,
[data-lang="ceb"] .qmsp-btn .ceb { display: inline; }

/* ═══════════════════════════════════
   Pull-quote cards — 5 style variants
   ═══════════════════════════════════ */

/* ── Base ── */
.day-pullquote {
  margin: 34px 0 28px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(232,184,75,0.18);
  background: rgba(10,6,1,0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 36px rgba(0,0,0,0.32);
  position: relative;
}
/* Default left gold stripe */
.day-pullquote::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 3px; height: 100%;
  background: linear-gradient(to bottom, var(--gold), rgba(232,184,75,0.10));
  border-radius: 3px 0 0 3px;
  z-index: 1;
}
.pq-content {
  flex: 1; padding: 24px 28px 22px 30px; min-width: 0; position: relative;
}
.pq-mark {
  font-size: 3.4rem; line-height: 0.75;
  color: var(--gold); font-family: Georgia, serif;
  display: block; margin-bottom: 12px; opacity: 0.82;
  user-select: none;
}
.day-pullquote .pq-text {
  font-size: 1.05rem; line-height: 1.70; font-style: italic;
  font-family: Georgia, serif; color: rgba(240,225,195,0.92);
  text-indent: 0 !important; text-align: left !important; margin-bottom: 0;
}
.pq-attr {
  display: block; margin-top: 13px;
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(232,184,75,0.50); font-style: normal; font-family: Georgia, serif;
}
.pq-carousel-nav {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
}
.pq-c-prev, .pq-c-next {
  background: none; border: 1px solid rgba(232,184,75,0.35);
  color: #e8b84b; border-radius: 50%; width: 28px; height: 28px;
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.pq-c-prev:hover, .pq-c-next:hover {
  background: rgba(232,184,75,0.12); border-color: rgba(232,184,75,0.6);
}
.pq-c-dots { display: flex; gap: 5px; align-items: center; }
.pq-c-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(232,184,75,0.22); transition: background .18s;
}
.pq-c-dot.active { background: #e8b84b; }
.day-pullquote .pq-text { transition: opacity .12s; }

/* ── Art panel (base) ── */
.pq-art {
  flex-shrink: 0; display: none;
  width: 155px;
  background-size: cover; background-position: center; position: relative;
}
/* Directional fade overlay per art div */
.pq-art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(8,5,0,0.58) 0%, rgba(8,5,0,0.06) 100%);
  pointer-events: none;
}

/* Photo IDs — pure images, fade handled by ::after */
#pqa-sunday    { background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=400&q=80'); }
#pqa-monday    { background-image: url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=400&q=80'); }
#pqa-tuesday   { background-image: url('https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=400&q=80'); }
#pqa-wednesday { background-image: url('https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&fit=crop&w=400&q=80'); }
#pqa-thursday  { background-image: url('https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?auto=format&fit=crop&w=400&q=80'); }
#pqa-friday    { background-image: url('https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=800&q=80'); }
#pqa-saturday  { background-image: url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=400&q=80'); }

/* Default: art panel shows on wider screens */
@media (min-width: 500px) { .pq-art { display: block; } }


/* ── VARIANT A: pq-flip — image on LEFT, text on right ── */
.day-pullquote.pq-flip { flex-direction: row; }
.day-pullquote.pq-flip .pq-art {
  order: -1; /* art first = left side */
  display: block; /* always show */
}
.day-pullquote.pq-flip .pq-art::after {
  background: linear-gradient(to left, rgba(8,5,0,0.58) 0%, rgba(8,5,0,0.06) 100%);
}
.day-pullquote.pq-flip::before {
  left: auto; right: 0; border-radius: 0 3px 3px 0;
  background: linear-gradient(to bottom, rgba(232,184,75,0.10), var(--gold));
}


/* ── VARIANT B: pq-stack — image on TOP, text below ── */
.day-pullquote.pq-stack {
  flex-direction: column;
  overflow: hidden;
}
.day-pullquote.pq-stack::before {
  width: 100%; height: 3px; top: 0; left: 0;
  background: linear-gradient(to right, var(--gold), rgba(232,184,75,0.15));
  border-radius: 0; /* flat top bar */
}
.day-pullquote.pq-stack .pq-art {
  display: block; order: -1;
  width: 100%; height: 170px;
}
.day-pullquote.pq-stack .pq-art::after {
  background: linear-gradient(to top, rgba(8,5,0,0.70) 0%, rgba(8,5,0,0.06) 60%);
}
.day-pullquote.pq-stack .pq-mark { font-size: 2.8rem; margin-bottom: 8px; }
.day-pullquote.pq-stack .pq-content { padding: 18px 26px 22px; }


/* ── VARIANT C: pq-big-type — oversized watermark quote mark, text only ── */
.day-pullquote.pq-big-type .pq-art { display: none !important; }
.day-pullquote.pq-big-type .pq-content {
  padding: 32px 36px 30px 36px;
  overflow: hidden;
}
.day-pullquote.pq-big-type .pq-mark {
  font-size: 10rem; line-height: 0.65;
  opacity: 0.10;
  position: absolute; top: -6px; left: 10px;
  margin-bottom: 0; z-index: 0; pointer-events: none;
}
.day-pullquote.pq-big-type .pq-text {
  font-size: 1.22rem !important;
  line-height: 1.72 !important;
  position: relative; z-index: 1;
}
.day-pullquote.pq-big-type .pq-attr {
  position: relative; z-index: 1;
}


/* ── VARIANT D: pq-full-bg — full bleed background image ── */
.day-pullquote.pq-full-bg {
  border-color: transparent;
  min-height: 180px;
  background-size: cover; background-position: center;
}
.day-pullquote.pq-full-bg::before { display: none; }
.day-pullquote.pq-full-bg .pq-art { display: none !important; }
/* Overlay div sits behind content */
.pq-overlay {
  position: absolute; inset: 0; border-radius: 16px;
  background: linear-gradient(135deg, rgba(5,3,0,0.86) 0%, rgba(5,3,0,0.50) 100%);
  pointer-events: none;
}
.day-pullquote.pq-full-bg .pq-content {
  position: relative; z-index: 1;
  padding: 32px 36px 30px 38px;
  display: flex; flex-direction: column; justify-content: center;
}
.day-pullquote.pq-full-bg .pq-text {
  color: rgba(255,245,220,0.95) !important;
  font-size: 1.12rem !important;
}
.day-pullquote.pq-full-bg .pq-mark { opacity: 0.78; }


/* ── VARIANT E: pq-centered — centered large text, no image ── */
.day-pullquote.pq-centered { justify-content: center; }
.day-pullquote.pq-centered::before { display: none; }
.day-pullquote.pq-centered .pq-art { display: none !important; }
.day-pullquote.pq-centered .pq-content {
  text-align: center;
  padding: 34px 40px 30px;
}
.day-pullquote.pq-centered .pq-mark {
  font-size: 4.5rem; display: block;
  margin-bottom: 16px;
  opacity: 0.75;
}
.day-pullquote.pq-centered .pq-text {
  font-size: 1.18rem !important;
  text-align: center !important;
  line-height: 1.72 !important;
  max-width: 560px; margin: 0 auto;
}
.day-pullquote.pq-centered .pq-attr { text-align: center; }
/* Top + bottom gold bars instead of left stripe */
.day-pullquote.pq-centered::after {
  content: ''; position: absolute; bottom: 0; left: 20%; right: 20%;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(232,184,75,0.40), transparent);
  border-radius: 2px;
}


/* ── Light mode ── */
[data-theme="light"] .day-pullquote {
  background: rgba(255,252,245,0.96);
  border-color: rgba(200,155,42,0.20);
  box-shadow: 0 4px 20px rgba(160,120,20,0.12);
}
[data-theme="light"] .day-pullquote .pq-text { color: rgba(28,16,4,0.82); }
[data-theme="light"] .pq-mark { color: #b07810; opacity: 0.90; }
[data-theme="light"] .pq-attr { color: rgba(150,110,18,0.60); }
[data-theme="light"] .day-pullquote.pq-big-type .pq-mark { opacity: 0.07; color: #9a6800; }
[data-theme="light"] .pq-overlay { background: linear-gradient(135deg, rgba(8,5,0,0.82) 0%, rgba(8,5,0,0.56) 100%); }
[data-theme="light"] .day-pullquote.pq-full-bg .pq-text { color: rgba(28,16,4,0.82) !important; }
[data-theme="light"] .pq-overlay { opacity: 0; }

/* ── Pull-quote share button ── */
.pq-share-btn {
  position: absolute; top: 11px; right: 11px;
  width: 34px; height: 34px; border-radius: 50%; padding: 0;
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(232,184,75,0.26);
  color: rgba(232,184,75,0.65);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5; flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pq-share-btn:hover {
  background: rgba(232,184,75,0.18);
  border-color: rgba(232,184,75,0.70);
  color: #e8b84b; transform: scale(1.08);
}
.pq-share-btn.pq-shared {
  color: #72c98a; border-color: rgba(114,201,138,0.55);
}
[data-theme="light"] .pq-share-btn {
  background: rgba(255,255,255,0.62);
  border-color: rgba(180,130,20,0.28);
  color: rgba(140,95,8,0.72);
}
[data-theme="light"] .pq-share-btn:hover {
  background: rgba(232,184,75,0.14); border-color: #e8b84b; color: #a06a08;
}

/* ── Share popup menu ── */
.pq-share-popup {
  position: fixed; z-index: 9990;
  background: rgba(14, 10, 3, 0.97);
  border: 1px solid rgba(232,184,75,0.28); border-radius: 14px; overflow: hidden;
  min-width: 220px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  animation: pqPopIn 0.16s cubic-bezier(0.25,0.46,0.45,0.94);
}
@keyframes pqPopIn {
  from { opacity: 0; transform: scale(0.88) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.pq-share-popup-btn {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 16px; border: none; width: 100%;
  background: transparent; cursor: pointer;
  color: rgba(240,225,195,0.90);
  font-family: inherit; font-size: 0.84rem; text-align: left;
  border-bottom: 1px solid rgba(232,184,75,0.08);
  transition: background 0.14s;
}
.pq-share-popup-btn:last-child { border-bottom: none; }
.pq-share-popup-btn:hover, .pq-share-popup-btn:active { background: rgba(232,184,75,0.10); }
.pq-spp-icon { font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; }
.pq-spp-text strong { display: block; font-weight: 600; }
.pq-spp-text small { display: block; font-size: 0.68rem; color: rgba(232,184,75,0.45); margin-top: 2px; font-style: italic; }

/* ── Share toast ── */
.pq-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(14,10,3,0.97);
  border: 1px solid rgba(232,184,75,0.28); border-radius: 10px;
  color: rgba(240,225,195,0.92);
  font-family: inherit; font-size: 0.84rem;
  padding: 12px 22px; z-index: 9999;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s, transform 0.22s;
  box-shadow: 0 4px 24px rgba(0,0,0,0.55);
  max-width: calc(100vw - 40px); text-align: center; line-height: 1.5;
}
.pq-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Quiz overlay backdrop ── */
.quiz-overlay {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(14px) saturate(0.7);
  -webkit-backdrop-filter: blur(14px) saturate(0.7);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.quiz-overlay.open { opacity: 1; pointer-events: all; }

/* ── Quiz modal — always dark regardless of page theme ── */
.quiz-modal {
  background: linear-gradient(160deg, #1e1609 0%, #14100a 55%, #0e0b06 100%);
  border: 1px solid rgba(232,184,75,0.22);
  border-radius: 24px;
  width: 100%; max-width: 660px;
  box-shadow:
    0 40px 120px rgba(0,0,0,0.85),
    0 6px 30px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(232,184,75,0.08);
  transform: scale(0.93) translateY(16px);
  transition: transform 0.32s cubic-bezier(0.34,1.24,0.64,1);
  overflow: hidden;
}
.quiz-overlay.open .quiz-modal { transform: scale(1) translateY(0); }

/* Light mode modal */
[data-theme="light"] .quiz-modal {
  background: linear-gradient(160deg, #fffdf8 0%, #faf6ed 60%, #f5f0e4 100%);
  border-color: rgba(200,155,42,0.25);
  box-shadow: 0 40px 120px rgba(100,65,0,0.14), 0 6px 30px rgba(100,65,0,0.09),
              inset 0 1px 0 rgba(232,184,75,0.10);
}

/* Gold accent stripe */
.quiz-modal::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #e8b84b 0%, #f5d580 45%, rgba(245,213,128,0) 100%);
}

/* Header */
.qm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 30px 16px;
  border-bottom: 1px solid rgba(232,184,75,0.09);
}
[data-theme="light"] .qm-header { border-bottom-color: rgba(200,155,42,0.14); }

.qm-tag {
  font-size: 0.65rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: #e8b84b;
}
[data-theme="light"] .qm-tag { color: #b07a14; }

.qm-close {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  color: rgba(220,200,155,0.45); font-size: 0.9rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; flex-shrink: 0;
}
[data-theme="light"] .qm-close { background: rgba(200,155,42,0.07); border-color: rgba(200,155,42,0.18); color: rgba(120,80,10,0.45); }
.qm-close:hover { background: rgba(232,184,75,0.14); color: #e8b84b; border-color: rgba(232,184,75,0.28); }
[data-theme="light"] .qm-close:hover { background: rgba(200,155,42,0.14); color: #b07a14; }

/* Progress */
.qm-progress-row {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 30px 4px;
}
.qm-prog-bar {
  flex: 1; height: 2px; background: rgba(232,184,75,0.10); border-radius: 2px; overflow: hidden;
}
.qm-prog-fill {
  height: 100%; background: #e8b84b; border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}
.qm-prog-lbl {
  font-size: 0.58rem; letter-spacing: 0.1em; color: rgba(220,195,140,0.38); white-space: nowrap;
}
[data-theme="light"] .qm-prog-bar { background: rgba(200,155,42,0.14); }
[data-theme="light"] .qm-prog-lbl { color: rgba(120,80,10,0.38); }

/* Question */
.qm-question {
  padding: 28px 30px 22px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.28rem; line-height: 1.76;
  color: rgba(240,225,195,0.92);
  min-height: 80px;
}
[data-theme="light"] .qm-question { color: #1e1300; }

/* Choice buttons */
.qm-choices {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; padding: 0 30px 26px;
}
.qm-choice {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 16px; border-radius: 14px;
  border: 1.5px solid rgba(232,184,75,0.14);
  background: rgba(255,255,255,0.02);
  color: rgba(230,210,165,0.65);
  font-family: Georgia, serif; font-size: 1.2rem; font-weight: bold; letter-spacing: 0.04em;
  cursor: pointer; transition: all 0.2s;
}
[data-theme="light"] .qm-choice {
  border-color: rgba(200,155,42,0.22);
  background: rgba(200,155,42,0.04);
  color: rgba(100,65,10,0.60);
}
.qm-choice:not(:disabled):hover {
  border-color: rgba(232,184,75,0.52);
  background: rgba(232,184,75,0.09);
  color: #e8b84b;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
[data-theme="light"] .qm-choice:not(:disabled):hover {
  color: #1e1300; background: rgba(200,155,42,0.12);
  box-shadow: 0 4px 14px rgba(100,65,0,0.12);
}
.qm-choice-mark { font-size: 1.1rem; min-height: 1.3rem; display: flex; align-items: center; }
.qm-choice:disabled { cursor: not-allowed; transform: none !important; }
.qm-choice.qm-correct {
  border-color: rgba(70,200,95,0.55) !important;
  background: rgba(30,110,50,0.22) !important;
  color: #82efA0 !important;
  box-shadow: 0 0 0 1px rgba(70,200,95,0.15) !important;
}
[data-theme="light"] .qm-choice.qm-correct {
  background: rgba(30,130,60,0.10) !important;
  color: #1a6f38 !important;
  box-shadow: none !important;
}
.qm-choice.qm-wrong {
  border-color: rgba(220,55,55,0.50) !important;
  background: rgba(130,20,20,0.22) !important;
  color: #f8a0a0 !important;
}
[data-theme="light"] .qm-choice.qm-wrong {
  background: rgba(200,30,30,0.08) !important;
  color: #a01818 !important;
}

/* Feedback */
@keyframes qmFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.qm-after { padding: 0 30px 26px; }
.qm-feedback {
  padding: 18px 20px; border-radius: 12px;
  font-size: 0.95rem; line-height: 1.74;
  font-style: normal;
  animation: qmFadeIn 0.28s ease;
}
.qm-feedback-label {
  display: block;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; font-style: normal; margin-bottom: 10px;
  font-family: inherit;
}
.qm-feedback.qm-fb-correct {
  background: rgba(25,90,40,0.45);
  border: 1px solid rgba(70,200,95,0.28);
  color: #c0f0cc;
}
.qm-feedback.qm-fb-correct .qm-feedback-label { color: #82efa0; }
.qm-feedback.qm-fb-wrong {
  background: rgba(100,15,15,0.45);
  border: 1px solid rgba(220,55,55,0.28);
  color: #fac8c8;
}
.qm-feedback.qm-fb-wrong .qm-feedback-label { color: #f8a0a0; }

/* Light mode feedback */
[data-theme="light"] .qm-feedback.qm-fb-correct {
  background: rgba(25,120,55,0.09);
  border-color: rgba(40,160,75,0.28);
  color: #1a6035;
}
[data-theme="light"] .qm-feedback.qm-fb-correct .qm-feedback-label { color: #1a7040; }
[data-theme="light"] .qm-feedback.qm-fb-wrong {
  background: rgba(180,25,25,0.08);
  border-color: rgba(200,40,40,0.25);
  color: #8a1515;
}
[data-theme="light"] .qm-feedback.qm-fb-wrong .qm-feedback-label { color: #a01818; }

.qm-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }

/* Try Again button */
.qm-retry-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; border-radius: 22px;
  background: transparent;
  border: 1px solid rgba(232,184,75,0.35);
  color: rgba(232,200,130,0.80);
  font-family: Georgia, serif; font-size: 0.9rem;
  cursor: pointer; transition: all 0.18s;
}
.qm-retry-btn:hover {
  border-color: #e8b84b;
  color: #e8b84b;
  background: rgba(232,184,75,0.08);
}
[data-theme="light"] .qm-retry-btn {
  border-color: rgba(180,130,20,0.35);
  color: rgba(130,85,10,0.75);
}
[data-theme="light"] .qm-retry-btn:hover {
  border-color: #b07a14; color: #b07a14;
  background: rgba(180,130,20,0.08);
}

.qm-next-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 13px 32px; border-radius: 24px;
  background: #e8b84b; border: none; color: #0c0800;
  font-family: Georgia, serif; font-size: 1rem; font-weight: bold;
  letter-spacing: 0.05em; cursor: pointer; transition: background 0.18s, transform 0.15s;
}
.qm-next-btn:hover { background: #f5d580; transform: translateY(-1px); }
.qm-next-btn:active { transform: none; }

/* Save prompt */
.qm-save-prompt {
  margin: 0 30px 28px;
  padding: 16px 18px; border-radius: 14px;
  border: 1px solid rgba(232,184,75,0.22);
  background: rgba(232,184,75,0.06);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  animation: qmFadeIn 0.3s ease;
}
.qmsp-icon { font-size: 1.6rem; flex-shrink: 0; }
.qmsp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qmsp-body strong { font-size: 0.88rem; color: #e8b84b; font-family: Georgia, serif; }
.qmsp-body span { font-size: 0.76rem; color: rgba(220,195,140,0.55); }
[data-theme="light"] .qm-save-prompt { background: rgba(200,155,42,0.07); border-color: rgba(200,155,42,0.22); }
[data-theme="light"] .qmsp-body strong { color: #b07a14; }
[data-theme="light"] .qmsp-body span { color: rgba(120,80,10,0.55); }
.qmsp-btns { display: flex; gap: 8px; flex-shrink: 0; }
.qmsp-btn {
  display: inline-flex; align-items: center;
  padding: 8px 18px; border-radius: 22px;
  font-family: Georgia, serif; font-size: 0.78rem; font-weight: bold;
  letter-spacing: 0.06em; text-decoration: none; cursor: pointer;
  transition: all 0.18s;
  background: #e8b84b; color: #0c0800; border: none;
}
.qmsp-btn:hover { background: #f5d580; }
.qmsp-outline {
  background: transparent; color: #e8b84b;
  border: 1px solid rgba(232,184,75,0.38);
}
.qmsp-outline:hover { background: rgba(232,184,75,0.10); }

/* ── CEB pending placeholder ── */
.ceb-pending {
  font-size: 0.8rem; font-style: italic; line-height: 1.72;
  color: rgba(232,184,75,0.28);
  border: 1px dashed rgba(232,184,75,0.14);
  padding: 10px 14px; border-radius: 6px;
  text-indent: 0 !important; margin-bottom: 22px;
  display: none;
}

/* ── Theme toggle ── */
.theme-toggle {
  position: absolute; top: 50%; left: 32px; transform: translateY(-50%);
  display: flex; align-items: center; gap: 7px;
  padding: 7px 16px;
  background: rgba(232,184,75,0.08);
  border: 1px solid rgba(232,184,75,0.30);
  border-radius: 50px;
  cursor: pointer; outline: none;
  color: var(--muted);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.56rem; letter-spacing: 0.20em; text-transform: uppercase;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
  z-index: 10;
}
.theme-toggle:hover {
  background: rgba(232,184,75,0.16);
  border-color: rgba(232,184,75,0.50);
  color: var(--gold);
}
.theme-toggle .t-icon { font-size: 0.85rem; line-height: 1; }

/* ── Audio strip ── */
.audio-strip {
  flex-shrink: 0;
  display: flex; flex-direction: row; align-items: center; gap: 14px;
  padding: 10px 20px;
  background: rgba(8,6,3,0.50); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.audio-strip audio { display: none; }
.audio-track-btns { display: flex; gap: 6px; flex-shrink: 0; }
.audio-track-btn {
  padding: 5px 14px; border-radius: 30px; cursor: pointer;
  background: rgba(232,184,75,0.06); border: 1px solid rgba(232,184,75,0.22);
  color: var(--muted); font-family: Georgia, serif;
  font-size: 0.54rem; letter-spacing: 0.18em; text-transform: uppercase;
  transition: all 0.2s; white-space: nowrap;
}
.audio-track-btn:hover  { background: rgba(232,184,75,0.14); color: var(--gold2); }
.audio-track-btn.active { background: rgba(232,184,75,0.18); border-color: var(--gold); color: var(--gold); }

/* ── Custom audio player ── */
.audio-player {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  flex: 1;
  padding-left: 14px;
  border-left: 1px solid var(--border);
}
.ap-btn {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; line-height: 1;
  transition: background 0.18s, border-color 0.18s;
}
.ap-play {
  width: 34px; height: 34px; font-size: 0.75rem;
  background: rgba(232,184,75,0.10); border: 1px solid rgba(232,184,75,0.35);
  color: var(--gold);
}
.ap-play:hover { background: rgba(232,184,75,0.22); border-color: var(--gold); }
.ap-mute {
  width: 27px; height: 27px; font-size: 0.7rem;
  background: transparent; border: 1px solid rgba(232,184,75,0.16);
  color: var(--muted);
}
.ap-mute:hover  { border-color: rgba(232,184,75,0.40); color: var(--gold); }
.ap-mute.muted  { opacity: 0.35; }
.ap-time {
  flex-shrink: 0; font-family: Georgia, serif;
  font-size: 0.57rem; letter-spacing: 0.04em;
  color: var(--muted); min-width: 28px; text-align: center;
}
.ap-dur { color: rgba(240,228,204,0.38); }
.ap-progress {
  flex: 1; min-width: 0; height: 3px; border-radius: 2px;
  background: rgba(232,184,75,0.14);
  position: relative; cursor: pointer;
}
.ap-progress::before { content: ''; position: absolute; inset: -7px 0; }
.ap-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  border-radius: 2px; width: 0%; transition: width 0.18s linear;
}
.ap-thumb {
  position: absolute; top: 50%; left: 0%;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold2); transform: translate(-50%, -50%);
  box-shadow: 0 0 7px rgba(232,184,75,0.55);
  opacity: 0; transition: opacity 0.15s;
  pointer-events: none;
}
.ap-progress:hover .ap-thumb { opacity: 1; }
.audio-dl-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 50%;
  background: rgba(232,184,75,0.08); border: 1px solid rgba(232,184,75,0.26);
  color: var(--gold); font-size: 0.9rem; text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  line-height: 1;
}
.audio-dl-btn:hover { background: rgba(232,184,75,0.22); border-color: var(--gold); transform: translateY(1px); }

/* ── Audio section inside combined mini bar ── */
.rmh-audio {
  display: flex; align-items: center; gap: 9px; flex-shrink: 0;
}
.rmh-audio .rab-progress {
  width: clamp(60px, 10vw, 120px); flex: none;
}
.rab-play {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(232,184,75,0.10); border: 1px solid rgba(232,184,75,0.30);
  color: var(--gold); font-size: 0.62rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.18s; line-height: 1;
}
.rab-play:hover { background: rgba(232,184,75,0.22); }
.rab-progress {
  flex: 1; min-width: 0; height: 2px; border-radius: 2px;
  background: rgba(232,184,75,0.12); position: relative; cursor: pointer;
}
.rab-progress::before { content: ''; position: absolute; inset: -6px 0; }
.rab-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  border-radius: 2px; width: 0%; transition: width 0.18s linear;
}
.rab-time {
  flex-shrink: 0; font-family: Georgia, serif;
  font-size: 0.55rem; letter-spacing: 0.04em;
  color: var(--muted); min-width: 30px; text-align: right;
}
/* ── Font size bar ── */
.font-size-bar {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 7px 20px;
  background: rgba(8,6,3,0.38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.fz-label {
  font-size: 0.52rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); user-select: none;
}
.fz-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(232,184,75,0.06); border: 1px solid rgba(232,184,75,0.22);
  color: var(--gold); cursor: pointer;
  font-family: Georgia, serif; font-size: 0.85rem; font-weight: bold;
  transition: background 0.2s, border-color 0.2s; line-height: 1;
}
.fz-btn:hover    { background: rgba(232,184,75,0.18); border-color: rgba(232,184,75,0.50); }
.fz-btn:disabled { opacity: 0.28; cursor: default; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Settings FAB ── */
.sfab-wrap {
  position: fixed; bottom: 24px; right: 20px; z-index: 200;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: none; /* wrap itself never blocks touches */
}
.sfab-btn {
  pointer-events: auto; /* button always tappable */
  width: 58px; height: 50px; border-radius: 14px;
  background: rgba(8,6,3,0.92); border: 1px solid var(--gold);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.55), 0 0 0 1px rgba(232,184,75,0.08);
  transition: background 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.sfab-btn:hover { background: rgba(232,184,75,0.14); box-shadow: 0 6px 28px rgba(0,0,0,0.6), 0 0 14px rgba(232,184,75,0.12); }
.sfab-btn.open  { background: rgba(232,184,75,0.16); }

/* Hamburger → X */
.sfab-hamburger {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 5px;
  width: 22px;
}
.sfab-hamburger span {
  display: block; height: 2px; border-radius: 1px;
  background: var(--gold);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1),
              opacity 0.2s ease, width 0.24s ease;
}
.sfab-hamburger span:nth-child(1) { width: 22px; }
.sfab-hamburger span:nth-child(2) { width: 16px; }
.sfab-hamburger span:nth-child(3) { width: 22px; }
.sfab-btn.open .sfab-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sfab-btn.open .sfab-hamburger span:nth-child(2) { opacity: 0; width: 0; }
.sfab-btn.open .sfab-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Settings panel */
.sfab-panel {
  background: rgba(8,6,3,0.95); border: 1px solid rgba(232,184,75,0.22);
  border-radius: 14px; overflow: hidden;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(232,184,75,0.06);
  min-width: 270px;
  opacity: 0; transform: translateY(8px) scale(0.94); pointer-events: none;
  transform-origin: bottom right;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34,1.2,0.64,1);
}
.sfab-panel.open {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}

/* Panel rows */
.sfab-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(232,184,75,0.08);
  transition: background 0.15s; cursor: pointer;
}
.sfab-row:last-child { border-bottom: none; }
.sfab-row:hover      { background: rgba(232,184,75,0.07); }
.sfab-row-fz         { cursor: default; }
.sfab-row-fz:hover   { background: transparent; }
.sfab-row-lang       { cursor: default; }
.sfab-row-lang:hover { background: transparent; }
.sfab-icon {
  flex-shrink: 0; width: 26px; text-align: center;
  font-size: 0.85rem; color: var(--gold); font-family: Georgia, serif;
  font-style: normal; line-height: 1;
}
.sfab-lbl {
  flex: 1; font-family: Georgia, serif;
  font-size: 0.70rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text);
}
.sfab-arr  { color: var(--muted); font-size: 1.2rem; line-height: 1; flex-shrink: 0; }
.sfab-fz   { display: flex; gap: 8px; flex-shrink: 0; }
.sfab-sep  { height: 1px; background: rgba(232,184,75,0.12); }

/* Lang toggle inside FAB panel — override header's absolute positioning */
.sfab-lang {
  position: static; transform: none; top: auto; right: auto;
  flex-shrink: 0;
}

/* Share popover — now anchored to sfab-wrap (bottom-right) */
.sfab-wrap .share-popover {
  position: absolute; bottom: calc(100% + 10px); right: 0; left: auto;
}

/* Install btn always hidden (JS still references the id) */
#installBtn { display: none !important; }

/* ── iOS / generic install overlay ── */
.ios-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: none; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: 0 16px 24px;
}
.ios-overlay.show { display: flex; }
.ios-sheet {
  width: 100%; max-width: 420px;
  background: rgba(14,10,3,0.97); border: 1px solid rgba(232,184,75,0.22);
  border-radius: 18px; padding: 24px 24px 28px;
  box-shadow: 0 -8px 48px rgba(0,0,0,0.7);
  animation: sheetUp 0.3s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
@keyframes sheetUp { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.ios-sheet-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.ios-sheet-title {
  font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold); font-family: Georgia, serif;
}
.ios-sheet-close {
  background: rgba(232,184,75,0.1); border: 1px solid rgba(232,184,75,0.2);
  border-radius: 50%; width: 26px; height: 26px; cursor: pointer;
  color: var(--muted); font-size: 0.75rem; display: flex;
  align-items: center; justify-content: center;
}
.ios-step { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.ios-step-num {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(232,184,75,0.12); border: 1px solid rgba(232,184,75,0.3);
  color: var(--gold); font-size: 0.7rem; font-family: Georgia, serif;
  display: flex; align-items: center; justify-content: center;
}
.ios-step p {
  font-size: 0.85rem; line-height: 1.7; color: var(--muted);
  font-family: Georgia, serif; margin: 0; padding-top: 2px;
}
.ios-step p strong   { color: var(--text); font-weight: 600; }
.ios-step p .share-icon { font-size: 1.1em; vertical-align: middle; }
.gen-platform-label {
  font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(232,184,75,0.45); font-family: Georgia, serif;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(232,184,75,0.1);
}

/* ── Share popover (now inside .sfab-wrap) ── */
.share-popover {
  position: absolute; bottom: calc(100% + 10px); right: 0; left: auto;
  background: rgba(14,10,3,0.97); border: 1px solid rgba(232,184,75,0.22);
  border-radius: 12px; padding: 6px;
  display: none; flex-direction: column; gap: 2px;
  min-width: 184px; box-shadow: 0 -6px 32px rgba(0,0,0,0.65);
  z-index: 210; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.share-popover.show { display: flex; pointer-events: auto; }
.share-popover-label {
  font-size: 0.52rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); padding: 5px 14px 6px;
  border-bottom: 1px solid var(--border); margin-bottom: 2px;
}
.share-option {
  display: flex; align-items: center;
  padding: 9px 14px; border-radius: 7px;
  background: transparent; border: none; outline: none;
  color: var(--text); font-family: Georgia, serif; font-size: 0.82rem;
  cursor: pointer; text-decoration: none;
  transition: background 0.18s, color 0.18s; white-space: nowrap;
}
.share-option:hover { background: rgba(232,184,75,0.1); color: var(--gold); }
.share-copy-confirm {
  text-align: center; font-size: 0.62rem; letter-spacing: 0.14em;
  color: #72c98a; padding: 5px 14px 4px;
  border-top: 1px solid var(--border); margin-top: 2px; display: none;
}
.share-copy-confirm.show { display: block; }

/* ── Light mode ── */
[data-theme="light"] {
  --text:   #1c0e03;
  --muted:  rgba(80,40,5,0.65);
  --border: rgba(160,100,10,0.20);
  --card:   rgba(245,235,215,0.85);
}
body[data-theme="light"]           { background: #ede8df; color: #1c0e03; }
[data-theme="light"] #bg           { opacity: 0.06; }
[data-theme="light"] .vignette     { background: radial-gradient(ellipse at 50% 42%, transparent 30%, rgba(220,208,185,0.50) 100%); }
[data-theme="light"] .bg-glow      { opacity: 0.3; }
[data-theme="light"] .header       { background: rgba(245,235,215,0.88); border-bottom-color: rgba(160,100,10,0.20); }
[data-theme="light"] .day-nav      { background: rgba(240,230,210,0.80); border-bottom-color: rgba(160,100,10,0.18); }
[data-theme="light"] .day-pill     { background: rgba(160,100,10,0.06); border-color: rgba(160,100,10,0.18); }
[data-theme="light"] .day-pill:hover  { background: rgba(160,100,10,0.14); border-color: rgba(160,100,10,0.40); }
[data-theme="light"] .day-pill.active { background: #b8780e; border-color: #b8780e; }
[data-theme="light"] .pill-name    { color: rgba(80,40,5,0.65); }
[data-theme="light"] .pill-date    { color: #1c0e03; }
[data-theme="light"] .day-pill.active .pill-name,
[data-theme="light"] .day-pill.active .pill-date { color: #fff8ee; }
[data-theme="light"] .content-area { color: #1c0e03; }
[data-theme="light"] .day-panel p  { color: #1c0e03; }
[data-theme="light"] .reflection   { background: #2a1a04; border-color: rgba(200,155,42,0.35); }
[data-theme="light"] .reflection::before,
[data-theme="light"] .reflection::after { color: #e8b84b; opacity: 0.6; }
[data-theme="light"] .reflection p { color: #f5e8cc; }
[data-theme="light"] .header-back        { color: rgba(80,40,5,0.60); }
[data-theme="light"] .header-back:hover  { color: #b8780e; }
[data-theme="light"] .theme-toggle { background: rgba(160,100,10,0.08); border-color: rgba(160,100,10,0.28); color: rgba(80,40,5,0.65); }
[data-theme="light"] .content-area::-webkit-scrollbar-thumb { background: rgba(160,100,10,0.28); }
[data-theme="light"] .audio-strip        { background: rgba(245,235,215,0.80); border-bottom-color: rgba(160,100,10,0.18); }
[data-theme="light"] .audio-track-btn   { background: rgba(160,100,10,0.06); border-color: rgba(160,100,10,0.22); color: rgba(80,40,5,0.60); }
[data-theme="light"] .audio-track-btn:hover  { background: rgba(160,100,10,0.14); color: #b8780e; }
[data-theme="light"] .audio-track-btn.active { background: rgba(160,100,10,0.18); border-color: #b8780e; color: #b8780e; }
[data-theme="light"] .ap-play  { background: rgba(160,100,10,0.08); border-color: rgba(160,100,10,0.30); color: #b8780e; }
[data-theme="light"] .ap-play:hover { background: rgba(160,100,10,0.18); }
[data-theme="light"] .ap-mute  { border-color: rgba(160,100,10,0.18); color: rgba(80,40,5,0.55); }
[data-theme="light"] .ap-mute:hover { color: #b8780e; border-color: rgba(160,100,10,0.40); }
[data-theme="light"] .ap-time  { color: rgba(80,40,5,0.55); }
[data-theme="light"] .ap-dur   { color: rgba(80,40,5,0.32); }
[data-theme="light"] .ap-progress { background: rgba(160,100,10,0.12); }
[data-theme="light"] .ap-fill  { background: linear-gradient(90deg, #b8780e, #d4a03c); }
[data-theme="light"] .ap-thumb { background: #b8780e; }
[data-theme="light"] .audio-dl-btn      { background: rgba(160,100,10,0.08); border-color: rgba(160,100,10,0.28); color: #b8780e; }
[data-theme="light"] .audio-dl-btn:hover { background: rgba(160,100,10,0.20); border-color: #b8780e; }
[data-theme="light"] .rab-play { background: rgba(160,100,10,0.08); border-color: rgba(160,100,10,0.28); color: #b8780e; }
[data-theme="light"] .rab-play:hover { background: rgba(160,100,10,0.18); }
[data-theme="light"] .rab-progress { background: rgba(160,100,10,0.12); }
[data-theme="light"] .rab-fill { background: linear-gradient(90deg, #b8780e, #d4a03c); }
[data-theme="light"] .rab-time { color: rgba(80,40,5,0.55); }
[data-theme="light"] .font-size-bar { background: rgba(240,230,210,0.80); border-bottom-color: rgba(160,100,10,0.18); }
[data-theme="light"] .fz-btn        { background: rgba(160,100,10,0.06); border-color: rgba(160,100,10,0.22); color: #b8780e; }
[data-theme="light"] .fz-btn:hover  { background: rgba(160,100,10,0.18); border-color: #b8780e; }
[data-theme="light"] .ios-sheet     { background: rgba(245,238,225,0.98); border-color: rgba(160,100,10,0.22); }
[data-theme="light"] .ios-step p    { color: rgba(80,40,5,0.7); }
[data-theme="light"] .ios-step p strong { color: #1c0e03; }
[data-theme="light"] .sfab-btn      { background: rgba(245,238,225,0.96); border-color: #b8780e; }
[data-theme="light"] .sfab-btn:hover { background: rgba(232,184,75,0.18); }
[data-theme="light"] .sfab-hamburger span { background: #b8780e; }
[data-theme="light"] .sfab-panel    { background: rgba(245,235,215,0.98); border-color: rgba(160,100,10,0.22); box-shadow: 0 8px 40px rgba(0,0,0,0.2); }
[data-theme="light"] .sfab-row      { border-bottom-color: rgba(160,100,10,0.10); }
[data-theme="light"] .sfab-row:hover { background: rgba(160,100,10,0.06); }
[data-theme="light"] .sfab-icon     { color: #b8780e; }
[data-theme="light"] .sfab-lbl      { color: #1c0e03; }
[data-theme="light"] .sfab-arr      { color: rgba(80,40,5,0.45); }
[data-theme="light"] .sfab-sep      { background: rgba(160,100,10,0.12); }
[data-theme="light"] .share-popover { background: rgba(245,238,225,0.98); border-color: rgba(160,100,10,0.22); box-shadow: 0 -6px 32px rgba(0,0,0,0.15); }
[data-theme="light"] .share-option  { color: #1c0e03; }
[data-theme="light"] .share-option:hover { background: rgba(160,100,10,0.08); color: #b8780e; }
[data-theme="light"] .share-copy-confirm { color: #2c6e3f; border-top-color: rgba(160,100,10,0.14); }

/* ── Floating Auth Modal ── */
.fam-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.fam-overlay.fam-open {
  opacity: 1; pointer-events: auto;
}
.fam-card {
  display: flex;
  width: 100%; max-width: 680px;
  min-height: 420px;
  border-radius: 24px;
  overflow: hidden;
  background: #faf6ef;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.25,0.46,0.45,0.94);
}
.fam-overlay.fam-open .fam-card {
  transform: translateY(0) scale(1);
}

/* Left illustration panel */
.fam-left {
  width: 42%;
  flex-shrink: 0;
  position: relative;
  background:
    url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=600&q=80')
    center/cover no-repeat;
}
.fam-left-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(232,184,75,0.25) 0%, rgba(30,12,0,0.45) 100%);
}

/* Right form panel */
.fam-right {
  flex: 1;
  padding: 36px 32px 32px;
  display: flex; flex-direction: column;
  position: relative;
  background: #faf6ef;
  color: #1e1300;
  overflow-y: auto;
}
.fam-close {
  position: absolute; top: 16px; right: 18px;
  background: none; border: none;
  font-size: 1.1rem; color: rgba(30,19,0,0.40);
  cursor: pointer; padding: 4px 6px; line-height: 1;
  transition: color 0.15s;
}
.fam-close:hover { color: #1e1300; }

.fam-eyebrow {
  font-size: 0.52rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: #c8902a; margin-bottom: 10px; font-family: Georgia, serif;
}
.fam-title {
  font-family: Georgia, serif;
  font-size: 1.45rem; font-weight: 400; line-height: 1.25;
  color: #1e1300; margin-bottom: 8px;
}
.fam-sub {
  font-size: 0.82rem; color: rgba(30,19,0,0.55); margin-bottom: 22px; line-height: 1.5;
}

.fam-tabs {
  display: flex; gap: 4px;
  background: rgba(30,19,0,0.07); border-radius: 10px;
  padding: 4px; margin-bottom: 20px;
}
.fam-tab {
  flex: 1; padding: 8px; border-radius: 7px; border: none;
  background: transparent; color: rgba(30,19,0,0.55);
  font-family: Georgia, serif; font-size: 0.82rem; cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.fam-tab.fam-tab--active {
  background: #fff; color: #1e1300;
  box-shadow: 0 1px 6px rgba(0,0,0,0.10);
}

.fam-error {
  font-size: 0.78rem; color: #c0392b;
  background: rgba(192,57,43,0.08); border-radius: 8px;
  padding: 0; max-height: 0; overflow: hidden;
  transition: padding 0.2s, max-height 0.2s;
}
.fam-error.fam-error--show {
  padding: 9px 12px; max-height: 60px; margin-bottom: 12px;
}

.fam-input {
  width: 100%; padding: 11px 14px;
  border: 1px solid rgba(30,19,0,0.18); border-radius: 10px;
  background: #fff; color: #1e1300;
  font-family: Georgia, serif; font-size: 0.88rem;
  outline: none; margin-bottom: 10px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.fam-input::placeholder { color: rgba(30,19,0,0.35); }
.fam-input:focus {
  border-color: #c8902a;
  box-shadow: 0 0 0 3px rgba(200,144,42,0.12);
}

.fam-pw-wrap { position: relative; margin-bottom: 0; }
.fam-pw-wrap .fam-input { padding-right: 42px; margin-bottom: 10px; }
.fam-pw-eye {
  position: absolute; right: 12px; top: calc(50% - 5px); transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: rgba(30,19,0,0.35); font-size: 0.95rem; padding: 4px;
  transition: color 0.15s; line-height: 1;
}
.fam-pw-eye:hover { color: #c8902a; }

.fam-signup-only { display: none; }
.fam-overlay.fam-signup .fam-signup-only { display: block; }
.fam-overlay.fam-signup .fam-signin-only { display: none; }

.fam-btn {
  width: 100%; padding: 13px;
  border: none; border-radius: 12px;
  background: #e8b84b; color: #1a0f00;
  font-family: Georgia, serif; font-size: 0.92rem; font-weight: bold;
  cursor: pointer; margin-top: 4px; margin-bottom: 14px;
  transition: background 0.18s, transform 0.15s;
}
.fam-btn:hover { background: #f5d580; }
.fam-btn:active { transform: scale(0.98); }
.fam-btn:disabled { opacity: 0.6; cursor: default; }

.fam-forgot {
  background: none; border: none;
  font-size: 0.78rem; color: rgba(30,19,0,0.45);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
  transition: color 0.15s; align-self: center;
}
.fam-forgot:hover { color: #c8902a; }
.fam-field-hint {
  font-size: 0.70rem; color: rgba(30,19,0,0.45); margin-top: -4px; margin-bottom: 4px;
  font-style: italic; text-align: center;
}

/* Hide left panel on small screens */
@media (max-width: 500px) {
  .fam-left { display: none; }
  .fam-right { padding: 32px 24px 28px; }
}

/* ── Mobile layout ── */
@media (max-width: 640px) {

  /* Header: flex-wrap row — controls on row 1, title/meta rows below */
  .header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 12px 12px;
    gap: 5px;
  }
  .header-back {
    position: static;
    order: 1;
    font-size: 0.56rem;
  }
  .theme-toggle {
    position: static;
    order: 2;
    transform: none;
    top: auto; left: auto; right: auto;
    font-size: 0.48rem; letter-spacing: 0.12em;
    padding: 5px 9px;
  }
  .theme-toggle .t-icon { font-size: 0.75rem; }
  .lang-toggle {
    position: static;
    order: 3;
    transform: none;
    top: auto; right: auto;
    margin-left: auto;
  }
  .week-badge { order: 4; width: 100%; justify-content: center; }
  .week-badge-inner { font-size: 0.5rem; letter-spacing: 0.18em; }
  .ch-title   { order: 5; width: 100%; font-size: clamp(1rem, 5.5vw, 1.45rem); }
  .header-sub { order: 6; width: 100%; flex-wrap: wrap; justify-content: center; gap: 5px 10px; }
  .header-rule { display: none; }
  .date-range, .scripture-ref { font-size: 0.58rem; }

  /* Day nav */
  .day-nav  { padding: 10px 10px; gap: 4px; }
  .day-pill { padding: 5px 10px; }
  .pill-name { font-size: 0.48rem; letter-spacing: 0.16em; }
  .pill-date { font-size: 0.7rem; }

  /* Audio */
  .audio-strip { padding: 8px 14px; gap: 8px; flex-wrap: wrap; }
  .audio-track-btns { flex-shrink: 1; }
  .audio-player { flex: 1; min-width: 200px; padding-left: 10px; }
  /* Content */
  .content-area  { padding: 24px 18px 20px; }
  .panel-heading { font-size: clamp(1.4rem, 6vw, 2rem); }
  .day-panel p   { font-size: var(--fz, 0.9rem); line-height: 1.9; }

  /* Settings FAB / iOS sheet */
  .sfab-wrap { bottom: 20px; right: 14px; }
  .sfab-btn  { width: 52px; height: 44px; border-radius: 12px; }
  .ios-sheet { padding: 20px 18px 24px; }

  /* Reading mini header */
  .reading-mini-header { padding: 8px 14px; }
  .rmh-audio .rab-progress { width: 70px; }
  .rmh-eyebrow         { font-size: 0.44rem; letter-spacing: 0.16em; }
  .rmh-title           { font-size: 0.74rem; }
}

/* ── Focus / reading mode — top controls collapse ── */
.top-controls {
  flex-shrink: 0;
  overflow: hidden;
  max-height: 420px;
  opacity: 1;
  /* Restore: space opens first, content fades in after */
  transition:
    max-height 0.40s cubic-bezier(0, 0, 0.2, 1),
    opacity    0.30s ease-out 0.10s;
}
.shell.reading-mode .top-controls {
  max-height: 0;
  opacity: 0;
  /* Hide: fade out fast, collapse space after a beat */
  transition:
    opacity    0.16s ease-in,
    max-height 0.46s cubic-bezier(0.4, 0, 0.8, 1) 0.10s;
}

/* ── Reading mini header — audio + title in one compact bar ── */
.reading-mini-header {
  position: fixed;
  top: 0; left: 0; right: 0; z-index: 220;
  display: flex; align-items: center; gap: 10px;
  padding: 9px clamp(16px, 5vw, 80px);
  background: rgba(8, 6, 3, 0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(232,184,75,0.14);
  opacity: 0; transform: translateY(-100%); pointer-events: none;
  transition: opacity 0.16s ease, transform 0.20s cubic-bezier(0.4,0,1,1);
}
.shell.reading-mode .reading-mini-header {
  opacity: 1; transform: translateY(0); pointer-events: auto;
  transition: opacity 0.28s ease-out 0.28s, transform 0.34s cubic-bezier(0,0,0.2,1) 0.24s;
}

/* Vertical divider between audio and title */
.rmh-divider {
  width: 1px; height: 14px; flex-shrink: 0;
  background: rgba(232,184,75,0.22);
  margin: 0 2px;
}

/* Tappable text area — exits reading mode */
.rmh-text {
  display: flex; align-items: center; min-width: 0; flex: 1;
  overflow: hidden; cursor: pointer;
}
.rmh-eyebrow {
  font-size: 0.50rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap; flex-shrink: 0;
}
.rmh-sep {
  color: rgba(232,184,75,0.38); font-size: 0.75rem; margin: 0 4px; flex-shrink: 0;
}
.rmh-title {
  font-size: 0.82rem; font-style: italic; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
[data-theme="light"] .reading-mini-header {
  background: rgba(245, 235, 215, 0.96);
  border-bottom-color: rgba(160, 100, 10, 0.18);
}
[data-theme="light"] .rmh-divider { background: rgba(160,100,10,0.22); }
[data-theme="light"] .rmh-title  { color: #1c0e03; }
[data-theme="light"] .rmh-sep    { color: rgba(160, 100, 10, 0.32); }

/* ── Reading spacer — pushes day heading below fixed bars ── */
.reading-spacer {
  height: 0; flex-shrink: 0; pointer-events: none;
  /* Delay matches the reading-audio-bar slide-in so they land together */
  transition: height 0.38s cubic-bezier(0, 0, 0.2, 1) 0.32s;
}
.shell.reading-mode .reading-spacer { height: 50px; }

/* ── Text highlights ── */
mark.hl { border-radius: 3px; color: inherit; }
mark.hl-yellow { background: rgba(232,184,75,0.38); }
mark.hl-pink   { background: rgba(230,80,80,0.28); }
mark.hl-blue   { background: rgba(80,140,230,0.32); }
mark.hl-green  { background: rgba(60,185,80,0.30); }
[data-theme="light"] mark.hl-yellow { background: rgba(232,184,75,0.50); }
[data-theme="light"] mark.hl-pink   { background: rgba(220,60,60,0.22); }
[data-theme="light"] mark.hl-blue   { background: rgba(60,120,220,0.22); }
[data-theme="light"] mark.hl-green  { background: rgba(40,160,60,0.22); }

/* ── Highlight toolbar ── */
.hl-toolbar {
  position: fixed; display: none; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: rgba(14,10,3,0.97);
  border: 1px solid rgba(232,184,75,0.28); border-radius: 999px;
  box-shadow: 0 4px 28px rgba(0,0,0,0.65);
  z-index: 9998;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  animation: pqPopIn 0.14s ease;
}
.hl-dot {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.18);
  cursor: pointer; padding: 0; flex-shrink: 0;
  transition: transform 0.12s, border-color 0.12s;
}
.hl-dot:hover, .hl-dot:active { transform: scale(1.22); border-color: rgba(255,255,255,0.55); }
.hl-dot-yellow { background: #e8b84b; }
.hl-dot-pink   { background: #e06060; }
.hl-dot-blue   { background: #5090e0; }
.hl-dot-green  { background: #44b85c; }
.hl-dot-clear {
  background: transparent; border-color: rgba(240,225,195,0.28);
  color: rgba(240,225,195,0.65); font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center;
}
.hl-dot-clear:hover { color: #e06060; border-color: #e06060; }
.hl-share-btn {
  width: 30px; height: 30px; border-radius: 50%;
  background: transparent; border: 1.5px solid rgba(240,225,195,0.28);
  color: rgba(240,225,195,0.75); font-size: 1.1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s; flex-shrink: 0;
  margin-left: 2px;
}
.hl-share-btn:hover { background: rgba(232,184,75,0.15); border-color: #e8b84b; color: #e8b84b; }
/* ── Quote selector modal ────────────────────────────────────────────────── */
.hl-quote-modal { display: none; position: fixed; inset: 0; z-index: 3000; }
.hl-quote-modal.open { display: block; }
.hl-qm-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(5px);
}
.hl-qm-sheet {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, 92vw);
  max-height: 86vh;
  display: flex; flex-direction: column;
  background: #141008; border-radius: 22px;
  border: 1px solid rgba(232,184,75,0.22);
  padding: 18px 18px 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.75);
  animation: qmSlideIn .22s ease;
  overflow: hidden;
}
@keyframes qmSlideIn { from { opacity:0; transform: translate(-50%,-46%); } to { opacity:1; transform: translate(-50%,-50%); } }
.hl-qm-close {
  position: absolute; top: 14px; right: 16px;
  background: rgba(255,255,255,0.06); border: none; border-radius: 50%;
  width: 28px; height: 28px; color: rgba(240,220,180,0.5);
  font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.hl-qm-close:hover { background: rgba(255,255,255,0.12); color: #f0ddb0; }
.hl-qm-label {
  font-size: 0.7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(232,184,75,0.55); margin-bottom: 12px; text-align: center; flex-shrink: 0;
}
.hl-qm-card {
  background: linear-gradient(135deg, #1c1408, #0d0902);
  border: 1px solid rgba(232,184,75,0.15); border-radius: 14px;
  padding: 14px 16px 12px 20px; position: relative;
  border-left: 3px solid #e8b84b; cursor: grab; user-select: none;
  flex: 1; min-height: 0; overflow-y: auto;
}
.hl-qm-qmark {
  font-size: 2rem; color: rgba(232,184,75,0.7); font-family: Georgia, serif;
  line-height: 1; margin-bottom: 4px;
}
.hl-qm-text {
  font-style: italic; font-size: 0.92rem; line-height: 1.55;
  color: #f0ddb0; font-family: Georgia, serif;
  transition: opacity .18s;
}
.hl-qm-footer {
  margin-top: 10px; font-size: 0.64rem; font-weight: 600;
  letter-spacing: .1em; color: rgba(232,184,75,0.5);
}
.hl-qm-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 12px 0 10px; flex-shrink: 0;
}
.hl-qm-prev, .hl-qm-next {
  background: rgba(232,184,75,0.1); border: 1px solid rgba(232,184,75,0.22);
  border-radius: 50%; width: 36px; height: 36px; color: #e8b84b;
  font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.hl-qm-prev:hover, .hl-qm-next:hover { background: rgba(232,184,75,0.22); }
.hl-qm-dots { display: flex; gap: 7px; align-items: center; }
.hl-qm-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(232,184,75,0.22); cursor: pointer; transition: all .18s;
}
.hl-qm-dot.active { background: #e8b84b; transform: scale(1.3); }
.hl-qm-share-btn {
  width: 100%; padding: 12px; border-radius: 11px;
  background: #e8b84b; color: #1a0f00; border: none;
  font-size: 0.88rem; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: background .15s; flex-shrink: 0;
}
.hl-qm-share-btn:hover { background: #f5d580; }
.hl-qm-share-btn:disabled { opacity: .55; cursor: not-allowed; }

.hl-share-toast {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: #1c1508; border: 1px solid rgba(232,184,75,0.35); border-radius: 10px;
  color: #f0ddb0; font-size: 13px; font-weight: 500; padding: 11px 22px;
  z-index: 9999; opacity: 0; pointer-events: none; white-space: nowrap;
  transition: opacity .22s, transform .22s; box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.hl-share-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Toolbar bottom-sheet on mobile (avoids iOS native menu overlap) ── */
.hl-toolbar--bottom {
  top: auto !important; left: 0 !important; right: 0 !important;
  bottom: 0 !important; width: 100% !important;
  border-radius: 16px 16px 0 0 !important;
  border-left: none !important; border-right: none !important; border-bottom: none !important;
  justify-content: center !important;
  gap: 20px !important;
  padding: 18px 24px calc(18px + env(safe-area-inset-bottom)) !important;
  animation: hlSlideUp 0.22s cubic-bezier(0,0,0.2,1) !important;
}
@keyframes hlSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.hl-toolbar--bottom .hl-dot { width: 30px; height: 30px; }

/* ── Highlight sign-in nudge card ── */
.hl-signin-card {
  position: fixed; display: none; flex-direction: column; gap: 10px;
  padding: 13px 32px 13px 16px;
  background: rgba(14,10,3,0.97);
  border: 1px solid rgba(232,184,75,0.38); border-radius: 14px;
  box-shadow: 0 6px 32px rgba(0,0,0,0.7);
  z-index: 9998; min-width: 240px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  animation: pqPopIn 0.15s ease;
}
.hl-si-body { display: flex; align-items: center; gap: 8px; }
.hl-si-lock { font-size: 1rem; line-height: 1; }
.hl-si-msg  { font-size: 0.80rem; color: rgba(240,225,195,0.80); line-height: 1.35; }
.hl-si-actions { display: flex; gap: 8px; }
.hl-si-btn {
  flex: 1; padding: 6px 0; border-radius: 20px;
  background: var(--gold); color: #1c0e03;
  border: none; font-size: 0.74rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: opacity 0.15s;
}
.hl-si-btn:hover { opacity: 0.82; }
.hl-si-btn--outline {
  background: transparent; color: var(--gold);
  border: 1.5px solid rgba(232,184,75,0.55);
}
.hl-si-btn--outline:hover { border-color: var(--gold); opacity: 1; }
.hl-si-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; color: rgba(240,225,195,0.4);
  font-size: 0.70rem; cursor: pointer; padding: 2px 4px; line-height: 1;
}
.hl-si-close:hover { color: rgba(240,225,195,0.8); }

/* ── Browse Weeks sheet ── */
.week-link {
  display: flex; flex-direction: column; gap: 4px;
  padding: 11px 14px; border-radius: 10px;
  color: var(--text); text-decoration: none;
  transition: background 0.18s; margin-bottom: 3px;
}
.week-link:hover { background: rgba(232,184,75,0.08); }
.week-link-meta {
  font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); font-family: Georgia, serif;
}
.week-link-title {
  font-size: 0.87rem; font-style: italic;
  color: var(--text); font-family: Georgia, serif; line-height: 1.35;
}
.week-link.current { background: rgba(232,184,75,0.1); }
.week-link.current .week-link-meta { color: var(--gold); }
.week-link.current .week-link-title { color: var(--gold); }
[data-theme="light"] .week-link:hover { background: rgba(160,100,10,0.06); }
[data-theme="light"] .week-link.current { background: rgba(160,100,10,0.08); }
[data-theme="light"] .week-link.current .week-link-meta,
[data-theme="light"] .week-link.current .week-link-title { color: #b8780e; }
.week-link.locked {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}
.week-link.locked .week-link-meta::after {
  content: ' · 🔒';
}