/* ═══════════════════════════════════════════════
   Goodness Web App — stylesheet
   ═══════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────── */
:root {
  --gold: #b87c3e;
  --gold-hover: #a06830;
  --gold-dim: #8a5e28;
  --gold-bright: #cf9a55;
  --gold-grad: linear-gradient(135deg, #cf9a55 0%, #b87c3e 55%, #9c6526 100%);
  --gold-bg: #faf1e2;
  --bg: #faf8f3;
  --bg2: #f1ebe0;
  --card: #ffffff;
  --border: #eae1d0;
  --border-solid: #dcd1bc;
  --text: #241c10;
  --text2: #6d6353;
  --text3: #978b79;
  --sidebar-bg: #120d06;
  --sidebar-text: #c8bfaf;
  --sidebar-act: #d9a860;
  --sidebar-w: 248px;
  --topbar-h: 56px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(64, 45, 20, .05), 0 3px 14px rgba(64, 45, 20, .07);
  --shadow-md: 0 2px 6px rgba(64, 45, 20, .07), 0 10px 30px rgba(64, 45, 20, .12);
  --shadow-lg: 0 12px 44px rgba(50, 34, 14, .16), 0 2px 8px rgba(50, 34, 14, .08);
  --shadow-gold: 0 4px 18px rgba(184, 124, 62, .32);
  --transition: .18s ease;
}

[data-theme="dark"] {
  --gold: #d9a860;
  --gold-hover: #e6bc7d;
  --gold-dim: #c99a55;
  --gold-bright: #ecc98d;
  --gold-grad: linear-gradient(135deg, #c89252 0%, #ab7433 55%, #8f5c20 100%);
  --gold-bg: #251a09;
  --bg: #120d06;
  --bg2: #1d1509;
  --card: #1a1309;
  --border: rgba(217, 168, 96, .16);
  --border-solid: #322716;
  --text: #efe6d6;
  --text2: #a99b85;
  --text3: #7c7060;
  --shadow: 0 2px 12px rgba(0, 0, 0, .45);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, .55);
  --shadow-lg: 0 12px 44px rgba(0, 0, 0, .65);
  --shadow-gold: 0 4px 18px rgba(120, 82, 35, .5);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  font: inherit;
  border: none;
  background: none;
}

img {
  max-width: 100%;
  display: block;
}

input,
textarea,
select {
  font: inherit;
  border: 1.5px solid var(--border-solid);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  padding: .6rem .9rem;
  width: 100%;
  outline: none;
  transition: border var(--transition), box-shadow var(--transition);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 124, 62, .2);
}

/* ── Topbar (mobile) ────────────────────────── */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  background: var(--sidebar-bg);
  border-bottom: 1px solid rgba(217, 168, 96, .12);
  z-index: 200;
  display: flex;
  align-items: center;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 1rem;
  gap: .5rem;
}

.topbar-title {
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  flex: 1;
  text-align: center;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  flex-shrink: 0;
  transition: background var(--transition);
}

.icon-btn:hover {
  background: rgba(255, 255, 255, .1);
}

.topbar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

/* ── App shell ──────────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
  padding-top: var(--topbar-h);
}

.main {
  flex: 1;
  min-width: 0;
  padding: 1.5rem 1rem 6rem;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
}

/* ── Sidebar ────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: linear-gradient(175deg, #1a1208 0%, #120d06 45%, #0c0803 100%);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 300;
  transform: translateX(-100%);
  transition: transform .25s ease;
  padding-top: var(--topbar-h);
}

.sidebar.open {
  transform: translateX(0);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 299;
  backdrop-filter: blur(2px);
}

.sidebar-overlay.visible {
  display: block;
}

/* Desktop sidebar always visible */
@media (min-width: 900px) {
  .topbar {
    left: var(--sidebar-w);
  }

  .sidebar {
    transform: translateX(0);
    padding-top: 0;
  }

  .sidebar-overlay {
    display: none !important;
  }

  .app-shell {
    padding-left: var(--sidebar-w);
  }

  .main {
    padding: 2rem 2rem 4rem;
  }

  #menuBtn {
    display: none;
  }
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.25rem 1rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.sidebar-logo {
  width: 142px;
  border-radius: 9px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  margin: 0 auto;
}

.sidebar-logo-text {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: #fff;
  font-size: 1.1rem;
}

.sidebar-auth {
  padding: .75rem .75rem 0;
}

.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .65rem;
  border-radius: var(--radius-sm);
  width: 100%;
  transition: background var(--transition);
  text-align: left;
}

.sidebar-user-card:hover {
  background: rgba(255, 255, 255, .08);
}

.sidebar-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-email {
  display: block;
  font-size: .72rem;
  color: var(--sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-auth-out {
  padding: .25rem 0;
}

.btn-auth-sidebar {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .6rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--gold-grad);
  color: #fff;
  font-size: .83rem;
  font-weight: 700;
  transition: filter var(--transition), box-shadow var(--transition);
  letter-spacing: .01em;
}


.btn-auth-sidebar:hover {
  filter: brightness(1.08);
  box-shadow: var(--shadow-gold);
}

.sidebar-nav {
  flex: 1;
  padding: .75rem .6rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.sidebar-section-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .28);
  padding: .8rem .5rem .28rem;
  display: block;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .58rem .65rem;
  border-radius: var(--radius-sm);
  font-size: .855rem;
  color: var(--sidebar-text);
  transition: background var(--transition), color var(--transition);
  position: relative;
}

.nav-item:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

.nav-item.active {
  background: rgba(217, 168, 96, .12);
  color: var(--sidebar-act);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: -0.6rem;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #e6bc7d, #b87c3e);
}

.nav-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.nav-lock {
  margin-left: auto;
  color: rgba(255, 255, 255, .28);
}

.sidebar-footer {
  padding: .75rem .85rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}

.theme-label {
  font-size: .8rem;
  color: var(--sidebar-text);
}

.toggle-switch {
  width: 42px;
  height: 24px;
  background: rgba(255, 255, 255, .15);
  border-radius: 12px;
  position: relative;
  transition: background var(--transition);
}

.toggle-switch.on {
  background: var(--gold);
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--transition);
}

.toggle-switch.on .toggle-thumb {
  transform: translateX(18px);
}

.sidebar-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .06);
  margin: .5rem 0;
}

.sign-out-btn,
.back-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: var(--sidebar-text);
  padding: .4rem .25rem;
  transition: color var(--transition);
}

.sign-out-btn:hover,
.back-link:hover {
  color: #fff;
}

/* ── Avatar initials ────────────────────────── */
.avatar {
  object-fit: cover;
  border-radius: 50%;
}

.avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-grad);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Cards & sections ───────────────────────── */
.card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
}

.card:hover {
  border-color: rgba(184, 124, 62, .4);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card {
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}

.page-header {
  margin-bottom: 1.5rem;
}

.page-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.72rem;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--text);
}

.page-subtitle {
  font-size: .9rem;
  color: var(--text2);
  margin-top: .25rem;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}

.section-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}

/* ── Buttons ────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .6rem 1.35rem;
  border-radius: var(--radius-pill);
  font-size: .88rem;
  font-weight: 600;
  transition: all var(--transition);
  cursor: pointer;
}

.btn-primary {
  background: var(--gold-grad);
  color: #fff;
  font-weight: 700;
  letter-spacing: .01em;
}

.btn-primary:hover {
  filter: brightness(1.07);
  box-shadow: var(--shadow-gold);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  filter: brightness(.97);
}

.btn-primary:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-ghost {
  background: var(--bg2);
  color: var(--text);
}

.btn-ghost:hover {
  background: var(--border-solid);
}

.btn-danger {
  background: #dc3545;
  color: #fff;
}

.btn-danger:hover {
  background: #c82333;
}

.btn-sm {
  padding: .35rem .8rem;
  font-size: .8rem;
}

.btn-link {
  background: none;
  color: var(--gold-dim);
  font-size: .83rem;
  font-weight: 600;
  padding: 0;
}

.btn-link:hover {
  color: var(--gold);
  text-decoration: underline;
}

.btn-block {
  width: 100%;
}

/* ── Flash & Toast ──────────────────────────── */
.flash {
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  font-size: .875rem;
  font-weight: 500;
}

.flash-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.flash-error {
  background: #fde8ea;
  color: #7c1d2a;
  border: 1px solid #f5c6cb;
}

[data-theme="dark"] .flash-success {
  background: #1a3320;
  color: #6fcf97;
  border-color: #2d5a3d;
}

[data-theme="dark"] .flash-error {
  background: #3a1520;
  color: #f1a1a1;
  border-color: #5a2d30;
}

.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: #241a0f;
  color: #f3ead9;
  border: 1px solid rgba(217, 168, 96, .28);
  padding: .65rem 1.35rem;
  border-radius: 40px;
  font-size: .85rem;
  font-weight: 500;
  z-index: 9999;
  white-space: nowrap;
  animation: slideUp .25s ease;
  box-shadow: var(--shadow-md);
}

.toast-error {
  background: #dc3545;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
}

/* ── Forms ──────────────────────────────────── */
.form-group {
  margin-bottom: 1.1rem;
}

.form-label {
  display: block;
  font-size: .83rem;
  font-weight: 600;
  margin-bottom: .35rem;
  color: var(--text2);
}

.form-error {
  font-size: .8rem;
  color: #dc3545;
  margin-top: .3rem;
}

.form-hint {
  font-size: .78rem;
  color: var(--text3);
  margin-top: .3rem;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

/* ── Auth pages ─────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(90% 60% at 85% -10%, rgba(207, 154, 85, .16), transparent 60%),
    linear-gradient(145deg, #faf1e2 0%, #faf8f3 55%, #f2ece0 100%);
}

[data-theme="dark"] .auth-page {
  background: var(--bg);
}

.auth-card {
  background: var(--card);
  border-radius: 20px;
  border: 1px solid var(--border);
  padding: 2.25rem 2rem 2.75rem;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
}

.auth-logo {
  text-align: center;
  margin-bottom: 1.5rem;
}

.auth-logo img {
  width: 55%;
  height: auto;
  border-radius: 12px;
  margin: 0 auto .75rem;
}

.auth-logo h1 {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 700;
}

.auth-logo p {
  font-size: .85rem;
  color: var(--text2);
  margin-top: .25rem;
}

.auth-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .4rem;
  line-height: 1.2;
}

.auth-subtitle {
  font-size: .92rem;
  color: var(--text2);
  margin-bottom: 1.75rem;
  line-height: 1.5;
}

.auth-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: .83rem;
  color: var(--text2);
}

.auth-footer a {
  color: var(--gold-dim);
  font-weight: 600;
}

/* OTP input — big centered digits */
input[inputmode="numeric"] {
  text-align: center;
  font-size: 2.2rem;
  letter-spacing: .65rem;
  font-family: 'Inter', monospace;
  font-weight: 700;
  padding: .85rem .5rem;
  border-radius: var(--radius-sm);
}

/* ── VOTD Hero ──────────────────────────────── */
.votd-hero {
  position: relative;
  min-height: 420px;
  background: #0c0803;
  overflow: hidden;
  margin: -1.5rem -1rem 2rem;
  border-radius: 0 0 20px 20px;
}
@media (min-width: 768px) {
  .votd-hero {
    margin: -2rem -2rem 2.25rem;
    border-radius: 0 0 24px 24px;
    min-height: 460px;
  }
}

.votd-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* cover, not `100% auto`. The latter sizes the photo to the card's WIDTH and
     lets its height land wherever the aspect ratio puts it — which on a narrow
     screen is far short of the card's fixed 420px, leaving a band of bare
     .votd-hero background below the image. A 16:9 photo on a 390px-wide phone
     came out 219px tall, so roughly half the card was empty; wide viewports
     happened to overshoot and looked fine, which is why it only showed on some
     screens. cover guarantees both axes are filled at every aspect ratio and
     crops the overflow instead. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Softer than before (.45) so the photo reads as texture behind the verse
     rather than competing with it. This is now the ONLY thing dimming the
     photo — .votd-overlay no longer paints a gradient — so it is also what
     keeps the verse legible. Raising it much past .35 starts to cost contrast. */
  opacity: .28;
  transition: opacity .8s ease;
}

/* Kept as a positioned layer so .votd-inner still stacks above the photo, but
   it no longer paints anything of its own — the darkening gradient was removed
   deliberately, so the card now reads on the .votd-bg image alone. */
.votd-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.votd-inner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 1.75rem 1.5rem 2rem;
}

.votd-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.4rem;
}

.votd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(184, 124, 62, .13);
  border: 1px solid rgba(184, 124, 62, .3);
  padding: .28rem .7rem .28rem .55rem;
  border-radius: 40px;
}

.votd-date {
  font-size: .72rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .4);
  letter-spacing: .02em;
}

.votd-quote {
  font-family: 'Playfair Display', serif;
  font-size: 1.22rem;
  font-style: italic;
  font-weight: 400;
  color: #f8f4ec;
  line-height: 1.62;
  margin: 0 0 1.5rem;
  padding-left: 1rem;
  border-left: 2.5px solid var(--gold);
  text-shadow: 0 1px 20px rgba(0, 0, 0, .55);
}
@media (min-width: 768px) {
  .votd-quote { font-size: 1.4rem; }
}

.votd-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
}

.votd-citation {
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .78);
  font-style: normal;
}

.votd-version {
  color: var(--gold);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.votd-actions {
  display: flex;
  gap: .4rem;
}

.btn-glass {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .9rem;
  border-radius: 40px;
  font-size: .78rem;
  font-weight: 600;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  transition: background var(--transition);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, .24);
}

.btn-glass.gold {
  background: rgba(184, 124, 62, .65);
  border-color: rgba(184, 124, 62, .45);
  color: #fff;
}

/* ── Quick grid ─────────────────────────────── */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 480px) {
  .quick-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.quick-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem .75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
}

.quick-card:hover {
  border-color: var(--gold);
  box-shadow: 0 4px 20px rgba(184, 124, 62, .2);
  transform: translateY(-2px);
}

.quick-card svg {
  color: var(--gold);
}

/* ── Community post card ────────────────────── */
.post-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  overflow: hidden;
  transition: box-shadow var(--transition);
}

.post-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(184, 124, 62, .35);
}

.post-card-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1rem .75rem;
}

.post-author-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.post-author-meta {
  flex: 1;
}

.post-author-name {
  font-size: .85rem;
  font-weight: 600;
}

.post-meta-line {
  font-size: .75rem;
  color: var(--text3);
  display: flex;
  gap: .4rem;
  align-items: center;
}

.post-type-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .12rem .5rem;
  border-radius: 40px;
  background: var(--gold-bg);
  color: var(--gold-dim);
}

.post-body-wrap {
  padding: 0 1rem .25rem;
}

.post-title {
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: .35rem;
}

.post-body {
  font-size: .875rem;
  color: var(--text2);
  line-height: 1.55;
}

/* ── Post image slider ──────────────────────── */
.post-slider {
  position: relative;
  background: #000;
  overflow: hidden;
}

.post-slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.post-slider-track::-webkit-scrollbar { display: none; }

.post-slide {
  min-width: 100%;
  scroll-snap-align: start;
  position: relative;
  cursor: zoom-in;
  overflow: hidden;
}

.post-slide img {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}

.post-slide:hover img { transform: scale(1.02); }

.post-slide-yt { cursor: pointer; }

.slide-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.s-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background var(--transition);
}

.s-btn:hover { background: rgba(0,0,0,.7); }

.s-prev { left: 10px; }
.s-next { right: 10px; }

.s-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 2;
}

.s-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.s-dot.active {
  background: #fff;
  transform: scale(1.3);
}

/* ── Lightbox ───────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.96);
  display: none;
  align-items: center;
  justify-content: center;
}

.lightbox.open { display: flex; }

.lb-content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100vw;
  max-height: 100dvh;
}

#lb-img {
  max-width: 100vw;
  max-height: 92dvh;
  object-fit: contain;
  display: block;
  border-radius: 4px;
}

#lb-video {
  display: none;
  width: min(640px, 95vw);
  aspect-ratio: 16/9;
}

#lb-video iframe {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.lb-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: rgba(255,255,255,.12);
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: background var(--transition);
}

.lb-close:hover { background: rgba(255,255,255,.25); }

.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.12);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.lb-nav:hover { background: rgba(255,255,255,.25); }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }

.lb-count {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.7);
  font-size: .8rem;
  letter-spacing: .05em;
  pointer-events: none;
}

.post-actions {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .6rem 1rem;
  border-top: 1px solid var(--border);
}

.like-btn {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .7rem;
  border-radius: 40px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text2);
  transition: all var(--transition);
}

.like-btn:hover {
  background: var(--bg2);
  color: var(--text);
}

.like-btn.liked {
  color: #e0545a;
}

.post-time {
  margin-left: auto;
  font-size: .75rem;
  color: var(--text3);
}

.post-delete-btn {
  padding: .35rem .6rem;
  font-size: .75rem;
  color: var(--text3);
  border-radius: 6px;
}

.post-delete-btn:hover {
  color: #dc3545;
  background: rgba(220, 53, 69, .08);
}

/* ── Prayer wall ────────────────────────────── */
.prayer-grid {
  display: grid;
  gap: .85rem;
}

.prayer-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  transition: box-shadow var(--transition);
}

.prayer-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(184, 124, 62, .35);
  transform: translateY(-1px);
}

.prayer-card-header {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .7rem;
}

.prayer-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: .03em;
}

.prayer-author-info { flex: 1; min-width: 0; }

.prayer-author-name {
  font-size: .85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
}

.prayer-place {
  font-size: .95rem;
  line-height: 1;
}

.prayer-time {
  font-size: .72rem;
  color: var(--text3);
  margin-top: .1rem;
}

.prayer-anon {
  font-size: .82rem;
  color: var(--text3);
  font-style: italic;
}

.prayer-text {
  font-size: .9rem;
  line-height: 1.6;
  margin-bottom: .75rem;
  color: var(--text);
}

.prayer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pray-btn {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .8rem;
  border-radius: 40px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text2);
  border: 1.5px solid var(--border-solid);
  transition: all var(--transition);
}

.pray-btn:hover {
  background: var(--gold-bg);
  border-color: var(--gold);
  color: var(--gold-dim);
}

.pray-btn.prayed {
  background: var(--gold-bg);
  border-color: var(--gold);
  color: var(--gold-dim);
}

/* ── Journal ────────────────────────────────── */
.journal-entry {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: .85rem;
}

.journal-verse-tag {
  font-size: .75rem;
  color: var(--gold-dim);
  font-weight: 600;
  margin-bottom: .4rem;
}

.journal-title {
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: .35rem;
}

.journal-body {
  font-size: .87rem;
  color: var(--text2);
  line-height: 1.55;
}

.journal-meta {
  font-size: .75rem;
  color: var(--text3);
  margin-top: .6rem;
  display: flex;
  justify-content: space-between;
}

.journal-actions {
  display: flex;
  gap: .5rem;
  margin-top: .6rem;
}

/* ── Bookmarks ──────────────────────────────── */
.bookmark-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: .75rem;
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}

.bookmark-ref {
  font-weight: 700;
  font-size: .8rem;
  color: var(--gold-dim);
  margin-bottom: .35rem;
  white-space: nowrap;
}

.bookmark-text {
  font-family: 'Playfair Display', serif;
  font-size: .9rem;
  font-style: italic;
  line-height: 1.55;
  flex: 1;
}

.bookmark-remove {
  color: var(--text3);
  padding: .25rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.bookmark-remove:hover {
  color: #dc3545;
}

/* ── Devotion cards ─────────────────────────── */
.devotion-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: .85rem;
  transition: box-shadow var(--transition), border-color var(--transition);
}

.devotion-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(184, 124, 62, .4);
  transform: translateY(-1px);
}

/* Devotions carry no image column, so the card leads with an icon badge
   rather than a 70x70 faux-image tile (which also had a meaningless
   object-fit: cover on a div). Same proportions as .feat-icon. */
.devotion-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-bg);
  border-radius: var(--radius-sm);
  color: var(--gold);
}

.devotion-body {
  flex: 1;
  min-width: 0;
}

.devotion-title {
  font-weight: 700;
  font-size: .92rem;
  margin-bottom: .3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.devotion-excerpt {
  font-size: .83rem;
  color: var(--text2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.devotion-date {
  font-size: .74rem;
  color: var(--text3);
  margin-top: .45rem;
}

/* ── Watch ──────────────────────────────────── */
.watch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.watch-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}

.watch-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.watch-thumb {
  aspect-ratio: 16/9;
  background: #111;
  position: relative;
  cursor: pointer;
}

.watch-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.watch-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .35);
}

.watch-play-icon svg {
  color: #fff;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, .5));
}

.watch-info {
  padding: .75rem;
}

.watch-title {
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: .25rem;
}

.watch-cat {
  font-size: .73rem;
  color: var(--text3);
}

.cat-tabs {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  margin-bottom: 1rem;
}

.cat-tabs::-webkit-scrollbar {
  display: none;
}

.cat-tab {
  padding: .4rem 1rem;
  border-radius: 40px;
  font-size: .82rem;
  font-weight: 600;
  border: 1.5px solid var(--border-solid);
  color: var(--text2);
  white-space: nowrap;
  transition: all var(--transition);
}

.cat-tab.active,
.cat-tab:hover {
  background: var(--gold-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 10px rgba(184, 124, 62, .25);
}

/* ── Bible reader ───────────────────────────── */
.bible-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .bible-layout {
    grid-template-columns: 220px 1fr;
  }
}

.bible-picker {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.bible-picker select {
  background: var(--card);
}

.verse-list {
  list-style: none;
}

.verse-item {
  display: flex;
  gap: .6rem;
  padding: .6rem .5rem;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
  border-radius: 6px;
  transition: background var(--transition);
}

.verse-item:hover {
  background: var(--gold-bg);
}

.verse-num {
  font-size: .72rem;
  font-weight: 700;
  color: var(--gold-dim);
  min-width: 24px;
  padding-top: .15rem;
}

.verse-text {
  font-family: 'Playfair Display', serif;
  font-size: .95rem;
  line-height: 1.65;
  flex: 1;
}

.save-verse-btn {
  opacity: 0;
  font-size: .75rem;
  color: var(--text3);
  padding: .2rem .4rem;
  border-radius: 4px;
  transition: opacity var(--transition), color var(--transition);
}

.verse-item:hover .save-verse-btn {
  opacity: 1;
}

.save-verse-btn:hover {
  color: var(--gold-dim);
}

.save-verse-btn.saved {
  opacity: 1;
  color: var(--gold-dim);
}

.bible-loading {
  text-align: center;
  padding: 3rem;
  color: var(--text3);
}

/* ── Search ─────────────────────────────────── */
.search-bar {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.25rem;
}

.search-bar input {
  flex: 1;
}

.search-result {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .9rem 1rem;
  margin-bottom: .6rem;
}

.search-result-ref {
  font-size: .8rem;
  font-weight: 700;
  color: var(--gold-dim);
  margin-bottom: .35rem;
}

.search-result-text {
  font-size: .9rem;
  line-height: 1.55;
}

/* ── Profile ────────────────────────────────── */
.profile-hero {
  text-align: center;
  margin-bottom: 2rem;
}

.profile-big-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  font-size: 2rem;
}

.profile-name {
  font-size: 1.3rem;
  font-weight: 700;
}

.profile-email {
  font-size: .85rem;
  color: var(--text2);
}

.profile-country {
  font-size: .82rem;
  color: var(--text3);
}

.profile-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.profile-section h3 {
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .78rem;
}

/* ── Empty state ────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text3);
}

.empty-state svg {
  margin-bottom: .75rem;
  opacity: .35;
}

.empty-state p {
  font-size: .9rem;
}

/* ── Modal ──────────────────────────────────── */
.modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 500;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(3px);
}

.modal-bg.open {
  display: flex;
}

@media (min-width: 600px) {
  .modal-bg {
    align-items: center;
  }
}

.modal {
  background: var(--card);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 540px;
  padding: 1.5rem;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

@media (min-width: 600px) {
  .modal {
    border-radius: 20px;
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.modal-title {
  font-weight: 700;
  font-size: 1.1rem;
}

.modal-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── "Do this in the app" prompt ─────────────── */
/* Shown wherever an add button used to write to the database. Built on .modal
   so it inherits the panel, backdrop and open/close behaviour; only the inner
   layout is new. Store buttons stack on narrow screens and sit side by side
   once there is room — there are two of them the moment iOS is enabled. */
.app-modal {
  max-width: 420px;
  text-align: center;
}

.app-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.app-modal-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg2);
  color: var(--gold);
  margin-bottom: .35rem;
}

.app-modal-lead {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
}

.app-modal-sub {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: .5rem;
}

.app-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  width: 100%;
}

.app-modal-store {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: 1 1 100%;
  justify-content: center;
}

@media (min-width: 420px) {
  /* Two buttons share the row; a lone button does not stretch edge to edge. */
  .app-modal-store { flex: 0 1 auto; }
}

.app-modal-none {
  font-size: .85rem;
  color: var(--muted);
}

.app-modal-later {
  margin-top: .35rem;
}

/* ── Pagination ─────────────────────────────── */
.pagination {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.page-btn {
  padding: .4rem .8rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-solid);
  font-size: .83rem;
  font-weight: 600;
  color: var(--text2);
  transition: all var(--transition);
}

.page-btn:hover,
.page-btn.active {
  background: var(--gold-grad);
  border-color: transparent;
  color: #fff;
}

/* ── Misc ───────────────────────────────────── */
.text-gold {
  color: var(--gold-dim);
}

.text-muted {
  color: var(--text2);
}

.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.d-flex { display: flex; }
.gap-1 { gap: .5rem; }

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border-solid);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Polish layer ───────────────────────────── */
::selection {
  background: rgba(184, 124, 62, .28);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-solid);
  border-radius: 8px;
  border: 2px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border-color: transparent;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Account menu (topbar avatar dropdown) ──────────────────────
   Replaces the sidebar user card + sidebar sign-out row: one place
   to reach Profile and Sign Out, present on every app screen. */
.user-menu { position: relative; }

.user-menu-trigger {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  line-height: 0;
}
.user-menu-trigger[aria-expanded="true"] {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.user-menu-panel {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  min-width: 218px;
  max-width: calc(100vw - 1.5rem);
  padding: .4rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 120;             /* above .topbar */
}
.user-menu-panel[hidden] { display: none; }

.user-menu-head {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .55rem .7rem .6rem;
  margin-bottom: .35rem;
  border-bottom: 1px solid var(--border);
}
.user-menu-name  { font-size: .88rem; font-weight: 600; color: var(--text); }
.user-menu-email {
  font-size: .74rem;
  color: var(--text3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .7rem;
  border-radius: var(--radius-sm);
  font-size: .87rem;
  color: var(--text2);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.user-menu-item:hover,
.user-menu-item:focus-visible { background: var(--bg2); color: var(--text); }
.user-menu-item--danger:hover,
.user-menu-item--danger:focus-visible { color: #b4462f; }

/* Sidebar logo fallback — replaces an inline onerror style write. */
.sidebar-logo.is-hidden { display: none; }

/* ── Shop ───────────────────────────────────────────────────────
   Same card language as .watch-card / .devotion-card: bordered
   surface, --radius, lift on hover. */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.shop-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.shop-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(184, 124, 62, .4);
  transform: translateY(-1px);
}

.shop-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg2);
}
.shop-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.shop-thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  background: var(--gold-bg);
}

.shop-badge {
  position: absolute;
  top: .5rem;
  left: .5rem;
  padding: .18rem .5rem;
  border-radius: var(--radius-pill);
  background: var(--gold-grad);
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.shop-info {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .8rem .85rem 1rem;
  flex: 1;
}
.shop-name {
  font-weight: 600;
  font-size: .87rem;
  line-height: 1.35;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shop-excerpt {
  font-size: .76rem;
  line-height: 1.45;
  color: var(--text3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shop-price-row {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin-top: .1rem;
}
.shop-price     { font-weight: 700; font-size: .95rem; color: var(--gold); }
.shop-old-price { font-size: .78rem; color: var(--text3); text-decoration: line-through; }

.shop-buy {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}

@media (max-width: 480px) {
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
}

/* Visually hidden but read by assistive tech. Used for the home screen's
   heading: every other app screen has exactly one <h1> via .page-title, and
   home led with the Verse of the Day hero and no heading at all. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Icon system ────────────────────────────────────────────────
   Inline SVGs had accumulated 14 different pixel sizes and 5 stroke
   widths, with round joins on only 9 of 68 — so controls that should
   look identical rendered subtly differently, and sharp mitre joins
   spiked on angled paths. Size and stroke now come from the control
   rather than each SVG's own attributes (CSS beats presentation
   attributes), so a newly pasted icon inherits the right treatment
   without being hand-tuned.
   Deliberately NOT global: .nav-icon, .empty-state and the media play
   overlays keep their own scale. */
.btn svg,
.modal-close svg,
.post-delete-btn svg,
.bookmark-remove svg,
.auth-linkbtn svg,
.btn-link svg,
.back-link svg,
.page-btn svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
  flex: none;
}

/* Compact buttons take a proportionally smaller glyph. */
.btn-sm svg { width: 13px; height: 13px; }

/* Icon-only controls stay a comfortable touch target. */
.icon-btn svg { width: 20px; height: 20px; stroke-width: 2; }

/* Empty states lead with a large, light-stroked glyph. */
.empty-state svg { width: 40px; height: 40px; stroke-width: 1.5; }

/* Sidebar navigation. */
.nav-icon { width: 20px; height: 20px; stroke-width: 1.75; }

/* Round joins and caps everywhere in the app shell — purely visual, and
   harmless on the fill-only shapes (play triangles, dots). */
.app-shell svg,
.topbar svg,
.auth-card svg { stroke-linecap: round; stroke-linejoin: round; }

/* ── Events ─────────────────────────────────────────────────────
   Same card language as .devotion-card: bordered surface, --radius,
   an icon-scale block on the left and text on the right. */
.section-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: .6rem;
}
.section-label--spaced { margin-top: 2rem; }

.event-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: .85rem;
  transition: box-shadow .18s, border-color .18s;
}
.event-card:hover { box-shadow: var(--shadow-md); border-color: rgba(184, 124, 62, .4); }
.event-card.is-past { opacity: .62; }

.event-date {
  width: 54px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .45rem 0;
  background: var(--gold-bg);
  border-radius: var(--radius-sm);
  color: var(--gold);
  line-height: 1.1;
}
.event-day   { font-size: 1.25rem; font-weight: 700; }
.event-month { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

.event-body { flex: 1; min-width: 0; }
.event-title {
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.35;
  color: var(--text);
  margin-bottom: .2rem;
}
.event-desc {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text2);
  margin-bottom: .3rem;
}
.event-full-date { font-size: .74rem; color: var(--text3); }

.event-locale { padding: .35rem .6rem; width: auto; }

/* ── Notifications ──────────────────────────────────────────────
   Card language matches .event-card / .devotion-card. */
.notif-card {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .95rem 1rem;
  margin-bottom: .7rem;
  color: inherit;
  transition: box-shadow .18s, border-color .18s;
}
a.notif-card:hover { box-shadow: var(--shadow-md); border-color: rgba(184, 124, 62, .4); }

.notif-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-bg);
  border-radius: var(--radius-sm);
  color: var(--gold);
}
.notif-icon svg { width: 18px; height: 18px; stroke-width: 1.75; }

.notif-body  { flex: 1; min-width: 0; }
.notif-title { font-weight: 600; font-size: .9rem; color: var(--text); margin-bottom: .15rem; }
.notif-text  { font-size: .82rem; line-height: 1.5; color: var(--text2); margin-bottom: .3rem; }
.notif-meta  { display: flex; align-items: center; gap: .5rem; font-size: .72rem; color: var(--text3); }
.notif-tag {
  padding: .1rem .45rem;
  border-radius: var(--radius-pill);
  background: var(--gold-bg);
  color: var(--gold);
  font-weight: 600;
  text-transform: capitalize;
}

/* ── Community feed width ───────────────────────────────────────
   .main is 860px so a post stretched the full column and long lines
   were tiring to read. Posts now sit in a narrower centred column,
   closer to a comfortable measure, while the page header and
   pagination keep the full width. */
.post-card {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Prayer card: preview + full view ───────────────────────────
   The wall shows a three-line preview; the whole request opens on
   its own screen. The link wraps only the text, not the card, so the
   delete button inside the card stays reachable. */
.prayer-open {
  display: block;
  color: inherit;
}
.prayer-text--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: .4rem;
}
.prayer-more {
  display: inline-block;
  font-size: .76rem;
  font-weight: 600;
  color: var(--gold);
}
.prayer-open:hover .prayer-more { color: var(--gold-hover); text-decoration: underline; }

/* Detail screen: full text, comfortable measure. */
.prayer-card--full { max-width: 620px; margin: 0 auto; }
.prayer-text--full { white-space: pre-line; margin-bottom: 0; }

/* ── Back link on a content screen ──────────────────────────────
   Distinct from .back-link, which is the sidebar's and paints with
   --sidebar-text for the dark rail — reusing it on a light page gave
   a washed-out link. */
.page-back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: 1rem;
  font-size: .83rem;
  font-weight: 500;
  color: var(--text2);
  transition: color var(--transition);
}
.page-back:hover { color: var(--gold); }
.page-back svg { width: 14px; height: 14px; stroke-width: 2; flex: none; }

/* ── Preference row (settings toggles) ──────────────────────────
   Same shape as the sidebar's theme row, in a content section. */
.pref-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.pref-copy  { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pref-title { font-size: .88rem; font-weight: 600; color: var(--text); }
.pref-desc  { font-size: .78rem; line-height: 1.5; color: var(--text3); }