/* Functioning Faith — "Rustic Silver / Wood" theme.
   Aged parchment + weathered walnut + brushed pewter, with forest-green and
   hearth-gold accents. Illuminated-manuscript display type (Cinzel) over a
   readable serif body (Spectral). Textures are inline SVG data-URIs — no
   external image assets, so nothing depends on a CDN. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Late afternoon in a farming country: sunlit oat and cream rather than the
     grey-brown of aged vellum. Everything here is warm; nothing is neutral. */
  --parch-0: #e9e0c6;   /* page — sun on a barley field */
  --parch-1: #f6efdc;   /* card — cream, freshly churned */
  --parch-2: #fdf8ea;   /* raised — the lit face of a thing */
  --parch-sink: #ddd2b4;/* recessed wells — shadow in the grass */
  /* Ink is warm brown, never black. Nothing in a hobbit-hole is printed. */
  --ink: #33251a;
  --ink-soft: #61503c;
  --muted: #8d7a5f;
  /* meadow + hearth: the two lights this whole theme is lit by */
  --meadow: #6f8f43;
  --meadow-2: #87a854;
  --meadow-deep: #48632f;
  --hearth: #d99a3f;
  --hearth-soft: #f0c477;
  --brass: #b08d46;
  /* wood */
  --walnut-0: #3a2a1a;
  --walnut-1: #2b1e12;
  --walnut-edge: #52402c;
  /* metal */
  --silver-0: #9a9ea6;
  --silver-1: #c6cad0;
  --silver-2: #eef0f2;
  --hairline: rgba(74,58,40,0.22);   /* engraved line on parchment */
  --hairline-soft: rgba(74,58,40,0.12);
  /* accents — kept under their old names so nothing downstream breaks, but
     retuned from forest/emerald to pasture and hedgerow. */
  --forest: #4f7239;
  --forest-2: #6f8f43;
  --emerald: #7ba84f;        /* the green of a tended field, not a screen */
  --emerald-2: #9bc46a;
  --emerald-glow: rgba(123,168,79,0.40);
  --gold: #b08d46;
  --gold-2: #d9ab55;
  --seal: #a2472f;      /* sealing wax, still */
  --accent: var(--meadow);
  --accent2: var(--seal);
  --accent3: var(--hearth);
  /* Round doors. The single most Shire thing available to a stylesheet. */
  --radius: 20px;
  --radius-sm: 14px;
  --radius-round: 999px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  color: var(--ink);
  background-color: var(--parch-0);
  /* parchment fibre grain + warm hearth glow */
  background-image:
    /* linen weave, finer and warmer than the old parchment fibre */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.30 0 0 0 0 0.24 0 0 0 0 0.14 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)'/%3E%3C/svg%3E"),
    /* two green hills rising along the bottom of every screen */
    radial-gradient(120% 42% at 12% 108%, rgba(111,143,67,0.30), transparent 62%),
    radial-gradient(110% 38% at 88% 112%, rgba(72,99,47,0.26), transparent 60%),
    /* a low sun off to one side, and hearth-light spilling from the other */
    radial-gradient(900px 520px at 84% -12%, rgba(240,196,119,0.34), transparent 66%),
    radial-gradient(700px 420px at 8% -6%, rgba(217,154,63,0.16), transparent 62%);
  background-attachment: fixed;
  min-height: 100vh;
  font-size: 16px;
  line-height: 1.5;
}

#app { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 82px; position: relative;
  box-shadow: 0 0 60px rgba(43,30,18,0.18); }

/* ---- Top bar: weathered walnut plank with a brushed-silver base rail ---- */
header.topbar {
  position: sticky; top: 0; z-index: 20;
  padding: 16px 18px 14px;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--parch-2);
  background-color: var(--walnut-0);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='60'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.11' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.10 0 0 0 0 0.07 0 0 0 0 0.04 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='200' height='60' filter='url(%23w)'/%3E%3C/svg%3E");
  border-bottom: 1px solid rgba(201,162,74,0.4);
  box-shadow: 0 6px 18px rgba(43,30,18,0.35);
  position: sticky;
}
/* Futuristic luminous rail beneath the wood header — emerald→gold sheen. */
header.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--emerald) 20%, var(--gold-2) 55%, var(--emerald-2) 80%, transparent);
  box-shadow: 0 0 10px var(--emerald-glow);
  opacity: 0.9;
}
header.topbar .brand { display:flex; align-items:center; gap:9px; font-family:'Cinzel', serif; font-weight:700; font-size:1.2rem; letter-spacing:0.06em; }
header.topbar .brand-word {
  background: linear-gradient(180deg, var(--silver-2), var(--gold-2) 120%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
header.topbar .brand-mark { display:inline-flex; color: var(--gold-2); }
header.topbar .brand-mark svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
header.topbar .muted { color: rgba(243,234,214,0.7); }

main { flex: 1; padding: 16px 16px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---- Card surfaces: parchment panels bordered like tooled leather / pewter ---- */
.glass {
  background-color: var(--parch-1);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.30 0 0 0 0 0.23 0 0 0 0 0.14 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23c)'/%3E%3C/svg%3E");
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 6px 16px rgba(43,30,18,0.14);
}
.card { padding: 16px; margin-bottom: 14px; }
.card:active { transform: scale(0.998); }

/* ---- Stories row ---- */
.stories { display:flex; gap:14px; overflow-x:auto; padding: 4px 2px 16px; scrollbar-width:none; }
.stories::-webkit-scrollbar { display:none; }
.story { display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; }
.story-ring { width:60px; height:60px; border-radius:50%; padding:2.5px;
  background: conic-gradient(from 210deg, var(--silver-0), var(--emerald), var(--silver-2), var(--gold-2), var(--emerald-2), var(--silver-0));
  box-shadow: 0 2px 6px rgba(43,30,18,0.25), 0 0 10px var(--emerald-glow); }
.story { cursor: pointer; }
.story-avatar { width:100%; height:100%; border-radius:50%; background: var(--parch-2); color: var(--walnut-0); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'Cinzel',serif; border: 2px solid var(--parch-1); }
.story-label { font-size:0.7rem; color: var(--muted); max-width:64px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.story { border:0; background:transparent; padding:0; }
.story-create .story-ring { display:flex; align-items:center; justify-content:center; border:2px dashed rgba(70,192,127,.5); background:rgba(70,192,127,.08); }
.story-plus { font-size:1.65rem; color:var(--forest); line-height:1; }
.story-unread .story-ring { box-shadow:0 0 0 2px var(--forest), 0 4px 14px rgba(43,30,18,.15); }
.moment-launch { margin-top:8px; font-size:.76rem; }
.moment-layer { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:18px; }
.moment-backdrop { position:absolute; inset:0; background:rgba(15,11,8,.76); backdrop-filter:blur(8px); }
.moment-viewer, .moment-composer { position:relative; z-index:1; width:min(100%,460px); max-height:min(88vh,720px); overflow:auto; padding:18px; border:1px solid rgba(255,255,255,.18); border-radius:24px; color:var(--ink); background:var(--parch-1); box-shadow:0 24px 70px rgba(0,0,0,.35); }
.moment-composer { width:min(100%,520px); }
.moment-viewer-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.moment-viewer-head .ghost { padding:7px 10px; }
.moment-photo { display:block; width:100%; max-height:52vh; object-fit:cover; border-radius:16px; margin:8px 0 14px; }
.moment-copy { font-size:1.08rem; line-height:1.5; white-space:pre-wrap; }
.moment-reactions { display:flex; align-items:center; gap:7px; margin-top:14px; }
.moment-reaction { width:40px; height:40px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.62); cursor:pointer; font-size:1.1rem; transition:transform .12s ease, background .12s ease, border-color .12s ease; }
.moment-reaction:hover { transform:translateY(-2px); }
.moment-reaction.is-active { background:rgba(70,192,127,.18); border-color:var(--forest); box-shadow:0 0 0 2px rgba(70,192,127,.12); }
.moment-reaction:focus-visible { outline:2px solid var(--forest); outline-offset:2px; }
.moment-photo-preview img { display:block; width:100%; max-height:230px; object-fit:cover; border-radius:14px; margin:10px 0; }
.moment-radio { display:block; margin:5px 0; font-size:.82rem; }
.moment-viewer-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }

/* ---- Feed post ---- */
.post-head { display:flex; align-items:center; gap:10px; margin-bottom: 10px; }
.avatar-sm { width:38px; height:38px; border-radius:50%; background: linear-gradient(145deg, var(--walnut-edge), var(--walnut-0)); color: var(--gold-2); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'Cinzel',serif; font-size:0.85rem; flex-shrink:0; border:1px solid var(--gold); }
.post-author { font-weight: 700; font-size: 0.98rem; color: var(--ink); }
.post-time { font-size: 0.74rem; color: var(--muted); }
.post-content { margin-bottom: 10px; font-size: 1rem; line-height:1.45; color: var(--ink-soft); }

.route-banner {
  height: 110px; border-radius: 12px; margin-bottom: 10px; position: relative; overflow:hidden;
  background: linear-gradient(160deg, #40342a, #2b2118);
  border: 1px solid var(--walnut-edge);
}
.route-banner svg { width:100%; height:100%; }
.route-banner .badge-overlay { position:absolute; top:8px; left:10px; font-size:0.66rem; font-weight:700; padding:3px 9px; border-radius:6px; background: rgba(20,14,8,0.6); color: var(--gold-2); text-transform:uppercase; letter-spacing:0.06em; border:1px solid rgba(201,162,74,0.4); }

.stat-row { display:grid; grid-template-columns: repeat(4,1fr); gap:6px; margin-bottom:10px; }
.stat { text-align:center; background: var(--parch-sink); border:1px solid var(--hairline-soft); border-radius:8px; padding:8px 4px; }
.stat .v { font-weight:700; font-size:0.98rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat .l { font-size:0.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; }

/* ---- Scripture: the illuminated centrepiece ---- */
.verse-card {
  background: linear-gradient(180deg, var(--parch-2), var(--parch-1));
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold);
  border-radius: 10px; padding: 13px 14px; font-size: 0.95rem;
  box-shadow: 0 2px 8px rgba(43,30,18,0.10) inset;
}
.verse-ref { color: var(--forest); font-family:'Cinzel',serif; font-weight: 700; font-size:0.8rem; letter-spacing:0.04em; margin-bottom: 4px; }
.verse-text { font-style: italic; color: var(--ink); line-height:1.55; }

.action-row { display:flex; align-items:center; gap:18px; margin-top:12px; padding-top:10px; border-top:1px solid var(--hairline-soft); }
.action-btn { display:flex; align-items:center; gap:5px; background:none; border:none; color: var(--muted); font-size:0.85rem; font-family:inherit; cursor:pointer; padding:4px; }
.action-btn.liked { color: var(--seal); }
.action-btn.saved { color: var(--forest); background: rgba(70,192,127,.08); }
.saved-post-card .action-btn { margin-top: 10px; }
.action-btn .n { font-weight:600; }

.comments { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.comment { font-size: 0.88rem; color: var(--ink-soft); }
.comment b { margin-right: 5px; color: var(--ink); }
.comment-with-action { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.comment-like { border:0; background:transparent; color:var(--muted); cursor:pointer; padding:4px 5px; border-radius:8px; white-space:nowrap; }
.comment-like:hover, .comment-like.liked { color:var(--seal); background:rgba(211,92,72,.08); }
.comment-like:focus-visible { outline:2px solid var(--forest); outline-offset:2px; }
.comment-input-row { display:flex; gap:8px; margin-top:10px; }
.comment-input-row input { flex:1; background: var(--parch-2); border:1px solid var(--hairline); border-radius:20px; padding:8px 14px; color:var(--ink); font-family:inherit; font-size:0.86rem; }
.comment-input-row button { background: var(--forest); border:1px solid var(--forest-2); color:var(--parch-2); border-radius:20px; padding:8px 16px; font-size:0.82rem; font-weight:600; cursor:pointer; }

/* ---- Tab bar: carved walnut rail with brushed-silver top edge ---- */
nav.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px;
  display: flex; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  color: var(--parch-2);
  background-color: var(--walnut-0);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='60'%3E%3Cfilter id='wb'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.11' numOctaves='3' seed='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.10 0 0 0 0 0.07 0 0 0 0 0.04 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='200' height='60' filter='url(%23wb)'/%3E%3C/svg%3E");
  border-top: 2px solid var(--silver-0);
  box-shadow: 0 -1px 0 rgba(201,162,74,0.35), 0 -6px 18px rgba(43,30,18,0.35);
  z-index: 30;
}
nav.tabbar button { flex: 1; background: none; border: none; color: rgba(243,234,214,0.6); padding: 7px 0 5px; font-size: 0.66rem; font-family:'Cinzel',serif; letter-spacing:0.03em; cursor: pointer; display:flex; flex-direction:column; align-items:center; gap:4px; border-radius:10px; transition: color .15s; }
nav.tabbar button .icon svg { width: 23px; height: 23px; }
nav.tabbar button.active { color: var(--emerald-2); }
nav.tabbar button.active .icon svg { filter: drop-shadow(0 0 7px var(--emerald-glow)); }

/* ---- Buttons ---- */
button.primary { background: linear-gradient(180deg, var(--emerald), var(--forest)); color: #eafff2; border: 1px solid rgba(70,192,127,0.5); border-radius: 12px; padding: 12px 18px; font-family:'Cinzel',serif; font-weight: 600; letter-spacing:0.03em; cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 4px 14px rgba(47,107,69,0.35), 0 0 0 0 var(--emerald-glow); transition: box-shadow .2s, filter .2s; }
button.primary:hover { filter: brightness(1.06); box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 4px 14px rgba(47,107,69,0.4), 0 0 16px var(--emerald-glow); }
button.primary:disabled { opacity: 0.5; cursor: default; }
button.ghost { background: var(--parch-2); border: 1px solid var(--hairline); color: var(--ink); border-radius: 12px; padding: 10px 14px; cursor: pointer; font-family:inherit; font-weight:600; }
button.ghost:hover { background: var(--parch-1); border-color: var(--gold); }

/* ---- Workout screen ---- */
.workout-screen { display:flex; flex-direction:column; align-items:center; padding: 20px 4px; gap: 14px; }
.hr-ring { width:220px; height:220px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: radial-gradient(circle at 32% 22%, rgba(201,162,74,0.22), transparent 60%), var(--parch-1);
  border: 2px solid var(--silver-0); box-shadow: 0 0 0 6px var(--parch-2), 0 10px 30px rgba(43,30,18,0.2); }
.hr-display { font-size: 3.4rem; font-weight: 700; font-family:'Cinzel',serif; color: var(--seal); font-variant-numeric: tabular-nums; letter-spacing:-0.02em; }
.hr-label { color: var(--muted); font-size: 0.7rem; letter-spacing:0.1em; text-transform:uppercase; }
.timer-display { font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.start-stop-btn { width: 110px; height: 110px; border-radius: 50%; border: 3px solid var(--parch-2); font-family:'Cinzel',serif; font-size: 1rem; font-weight: 600; color: var(--parch-2); cursor: pointer; box-shadow: 0 8px 22px rgba(43,30,18,0.3); }
.start-stop-btn.start { background: linear-gradient(180deg, var(--forest-2), var(--forest)); }
.start-stop-btn.stop { background: linear-gradient(180deg, #a5493a, var(--seal)); }
.start-stop-btn.start-degraded { background: linear-gradient(180deg, #c88d32, #9d6721); border-color: #f3c568; }
.start-stop-btn:disabled { opacity: .52; cursor: wait; filter: saturate(.55); box-shadow: none; }
.gps-gate { margin: 10px 0; padding: 10px 14px; border-color: rgba(217,154,63,.35); background: rgba(217,154,63,.10); }

/* ---- Breathing ---- */
.breathe-circle {
  width: 180px; height: 180px; border-radius: 50%; margin: 20px auto;
  background: radial-gradient(circle, rgba(61,90,69,0.55), rgba(169,129,47,0.35));
  color: var(--parch-2); display:flex; align-items:center; justify-content:center; font-family:'Cinzel',serif; font-weight:600; font-size:1.05rem;
  transition: transform 4s ease-in-out;
  border: 2px solid var(--silver-1);
  box-shadow: 0 0 40px rgba(61,90,69,0.3);
}
.breathe-circle.in { transform: scale(1.35); }
.breathe-circle.out { transform: scale(0.8); }

/* ---- Motivation ---- */
.quote-card { text-align:center; padding: 28px 22px; }
.quote-card .q { font-size: 1.18rem; font-style: italic; line-height:1.55; margin-bottom:12px; color: var(--ink); }
.quote-card .a { color: var(--forest); font-family:'Cinzel',serif; font-weight:600; font-size:0.82rem; letter-spacing:0.03em; }

/* ---- Podcasts ---- */
.podcast-row { display:flex; align-items:center; gap:12px; padding: 10px 0; border-bottom: 1px solid var(--hairline-soft); }
.podcast-art { width:52px; height:52px; border-radius:10px; background: linear-gradient(145deg, var(--walnut-edge), var(--walnut-0)); color: var(--gold-2); flex-shrink:0; display:flex;align-items:center;justify-content:center; font-size:1.3rem; border:1px solid var(--gold); }
.podcast-meta { flex:1; }
.podcast-title { font-weight:700; font-size:0.92rem; color: var(--ink); }
.podcast-sub { font-size:0.75rem; color:var(--muted); }
.play-btn { width:36px; height:36px; border-radius:50%; background: var(--parch-2); border:1px solid var(--silver-0); color:var(--forest); display:flex;align-items:center;justify-content:center; cursor:pointer; }
.episode { padding:10px 0; border-top:1px solid var(--hairline-soft); }
.episode-title { font-weight:600; font-size:0.9rem; color: var(--ink); line-height:1.35; }
.episode-meta { font-size:0.74rem; color: var(--muted); margin-top:2px; }
.episode audio { height:34px; filter: sepia(0.25) saturate(0.9); }

/* ---- Profile ---- */
.profile-header { display:flex; align-items:center; gap: 14px; margin-bottom: 14px; }
.avatar { width: 66px; height: 66px; border-radius: 50%; background: linear-gradient(145deg, var(--walnut-edge), var(--walnut-0)); color: var(--gold-2); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'Cinzel',serif; font-size:1.5rem; border:2px solid var(--gold); box-shadow: 0 6px 18px rgba(43,30,18,0.3); }
.profile-stats { display:flex; gap:18px; margin-top:6px; }
.profile-stats div { text-align:left; }
.profile-stats .v { font-weight:700; color: var(--ink); }
.profile-stats .l { font-size:0.7rem; color:var(--muted); }
.profile-stat-button { border:0; padding:0; text-align:left; color:inherit; background:transparent; cursor:pointer; }
.profile-stat-button:hover .v { color:var(--forest); }
.profile-stat-button:focus-visible { outline:2px solid var(--forest); outline-offset:4px; border-radius:6px; }
.member-list { display:flex; flex-direction:column; gap:8px; }
.member-list-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:15px; background:var(--card); cursor:pointer; }
.member-list-row:hover { border-color:var(--forest); transform:translateY(-1px); }
.member-list-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.member-list-copy .muted { font-size:.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.badge-row { display:flex; gap: 8px; flex-wrap: wrap; }
.badge-pill { background: var(--parch-2); border: 1px solid var(--gold); color: var(--ink-soft); border-radius: 20px; padding: 6px 12px; font-size: 0.8rem; }
.accomplishments-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.accomplishments-head h3 { margin:0 0 2px; font-size:.94rem; }
.badge-shelf { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.accomplishment { display:flex; align-items:flex-start; gap:9px; min-width:0; padding:10px; border-radius:15px; border:1px solid rgba(51,37,26,.10); background:rgba(255,252,242,.62); }
.accomplishment.locked { opacity:.62; filter:saturate(.55); }
.accomplishment-icon { flex:0 0 32px; width:32px; height:32px; display:grid; place-items:center; border-radius:11px; background:rgba(217,171,85,.18); font-size:1.1rem; }
.accomplishment-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.accomplishment-copy strong { font-size:.76rem; line-height:1.2; }
.accomplishment-copy span { color:var(--muted); font-size:.65rem; line-height:1.25; }
.accomplishment-copy small { color:var(--muted); font-size:.6rem; }
.earned-label { color:var(--forest) !important; font-weight:800; }
.badge-progress { height:5px; margin-top:4px; overflow:hidden; border-radius:999px; background:rgba(51,37,26,.10); }
.badge-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--meadow),var(--hearth)); }
.toggle-row { display:flex; justify-content:space-between; align-items:center; padding: 12px 0; border-bottom: 1px solid var(--hairline-soft); }
.switch { position:relative; width:44px; height:26px; flex-shrink:0; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; inset:0; background:var(--parch-sink); border:1px solid var(--hairline); border-radius:24px; transition:.2s; }
.slider:before { content:""; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:var(--silver-2); border-radius:50%; transition:.2s; box-shadow:0 1px 2px rgba(0,0,0,0.3); }
input:checked + .slider { background: var(--forest); border-color: var(--forest-2); }
input:checked + .slider:before { transform: translateX(18px); }

select, input[type=text] { background: var(--parch-2); border:1px solid var(--hairline); color:var(--ink); border-radius:10px; padding:10px; width:100%; margin-bottom:8px; font-family: inherit; font-size:0.95rem; }
.muted { color: var(--muted); font-size: 0.82rem; }
h2 { font-family:'Cinzel', serif; font-size: 1.08rem; margin: 6px 0 12px; font-weight: 600; letter-spacing:0.01em; color: var(--ink); }
.section-tabs { display:flex; gap:8px; margin-bottom:14px; }
.section-tabs button { flex:1; padding:9px 0; border-radius:10px; border:1px solid var(--hairline); background: var(--parch-2); color:var(--muted); font-family:inherit; font-weight:600; font-size:0.84rem; cursor:pointer; }
.section-tabs button.active { background: linear-gradient(180deg, var(--emerald), var(--forest)); color:#eafff2; border-color:transparent; box-shadow: 0 0 12px var(--emerald-glow); }

.field-label { display:block; margin-top:12px; margin-bottom:4px; font-size:0.85rem; color: var(--ink-soft); }
#p-verse, .card.glass input[type="text"], .card.glass input[type="number"] {
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--hairline);
  background: var(--parch-2); color:var(--ink); font-family:inherit; font-size:0.95rem;
}
.verse-preview { background: var(--parch-2); border:1px solid var(--hairline-soft); border-radius:10px; padding:12px; font-size:0.92rem; line-height:1.5; }

/* Auth form */
.input { width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--hairline);
  background: var(--parch-2); color:var(--ink); font-size:0.95rem; font-family:inherit; margin-bottom:2px; }
.input:focus { outline:none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,74,0.18); }
.form-error { color: var(--seal); font-size:0.85rem; margin-top:10px; margin-bottom:0; }
.auth-divider { display:flex; align-items:center; text-align:center; color:var(--muted); font-size:0.8rem; margin:16px 0; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--hairline); }
.auth-divider span { padding:0 12px; }
a { color: var(--forest); text-decoration:none; font-weight:600; }
a:hover { color: var(--gold); }

/* ---- OAuth / SSO buttons ---- */
.oauth-row { display:flex; flex-direction:column; gap:8px; margin-bottom:4px; }
.oauth-btn { display:flex; align-items:center; justify-content:center; text-align:center; font-weight:600; }
.oauth-btn:hover { color: var(--ink); }

/* ---- Social: follow buttons, suggestions rail, profiles ---- */
.follow-btn {
  background: linear-gradient(180deg, var(--emerald), var(--forest)); color:#eafff2;
  border:1px solid rgba(70,192,127,0.5); border-radius:20px; padding:6px 16px;
  font-family:'Cinzel',serif; font-size:0.76rem; font-weight:600; letter-spacing:0.02em; cursor:pointer;
  box-shadow: 0 0 10px var(--emerald-glow); transition: box-shadow .2s, filter .2s;
}
.follow-btn:hover { filter:brightness(1.08); box-shadow:0 0 16px var(--emerald-glow); }
.follow-btn.following { background: var(--parch-2); color: var(--forest); border-color: var(--forest); box-shadow:none; }

.suggest-card { padding: 14px 14px 10px; }
.suggest-head { font-family:'Cinzel',serif; font-size:0.92rem; color: var(--ink); margin-bottom:10px; }
.suggest-rail { display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }
.suggest-rail::-webkit-scrollbar { display:none; }
.home-explore-rail { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding-bottom:10px; }
.home-explore-rail::-webkit-scrollbar { display:none; }
.home-explore-tile { flex:0 0 130px; height:110px; display:flex; flex-direction:column; justify-content:flex-end; gap:2px;
  text-align:left; background:var(--parch-2); border:1px solid var(--hairline); border-radius:12px; padding:10px;
  cursor:pointer; transition:box-shadow .2s, border-color .2s; font:inherit; color:inherit; }
.home-explore-tile:hover { border-color:var(--gold,#d9ab55); box-shadow:0 2px 10px rgba(0,0,0,.08); }
.home-explore-tile-icon { font-size:1.1rem; }
.home-explore-tile-label { font-weight:700; font-size:.8rem; line-height:1.2; }
.home-explore-tile-sub { font-size:.68rem; color:var(--muted); line-height:1.25; }
.home-explore-tile-reel { background-color:#2b1e14; color:#fdf8ea; }
.home-explore-tile-reel .home-explore-tile-label, .home-explore-tile-reel .home-explore-tile-icon { color:#fdf8ea; }
.suggest-item { flex:0 0 132px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  background: var(--parch-2); border:1px solid var(--hairline); border-radius:12px; padding:14px 10px; cursor:pointer; transition: box-shadow .2s, border-color .2s; }
.suggest-item:hover { border-color: var(--emerald); box-shadow: 0 0 14px var(--emerald-glow); }
.suggest-avatar { width:52px; height:52px; font-size:1.05rem; }
.suggest-name { font-weight:700; font-size:0.86rem; color: var(--ink); line-height:1.2; }
.suggest-sub { font-size:0.72rem; color: var(--muted); }
.suggest-item .follow-btn { margin-top:2px; }

.post-user { cursor:pointer; }
.post-author.post-user:hover { color: var(--forest); }
.back-btn { margin-bottom:12px; padding:8px 14px; }

/* Interactive cards get a faint emerald edge + hover lift — the "futuristic" sheen. */
.card.glass { position: relative; transition: box-shadow .2s; }
.card.glass::before {
  content: ''; position:absolute; inset:0; border-radius: var(--radius); pointer-events:none;
  box-shadow: inset 0 1px 0 rgba(111,230,165,0.18);
}

/* ---- Analytics: Stats dashboard ---- */
.streak-banner { display:flex; justify-content:space-around; text-align:center; padding:18px 10px; }
.streak-num { font-family:'Cinzel',serif; font-size:1.7rem; font-weight:700; color: var(--forest); text-shadow: 0 0 10px var(--emerald-glow); }
.stats-period-head { font-family:'Cinzel',serif; font-size:0.86rem; color: var(--ink); margin-bottom:8px; }
.stat-tiles { display:grid; grid-template-columns: repeat(4,1fr); gap:8px; }
.stat-tile { background: var(--parch-sink); border:1px solid var(--hairline-soft); border-radius:10px; padding:10px 4px; text-align:center; }
.stat-tile-v { font-weight:700; font-size:1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-tile-l { font-size:0.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em; margin-top:2px; }
.pr-grid { display:flex; flex-direction:column; gap:8px; }
.pr { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--hairline-soft); font-size:0.88rem; }
.pr:last-child { border-bottom:none; }
.pr-l { color: var(--ink-soft); }
.pr-v { font-weight:700; color: var(--forest); }
.act-row { display:flex; align-items:center; gap:10px; padding:8px 0; }
.act-name { flex: 0 0 88px; font-size:0.82rem; color: var(--ink); }
.act-bar { flex:1; height:8px; background: var(--parch-sink); border-radius:6px; overflow:hidden; }
.act-bar span { display:block; height:100%; background: linear-gradient(90deg, var(--forest), var(--emerald-2)); box-shadow: 0 0 6px var(--emerald-glow); }
.act-count { flex:0 0 auto; font-size:0.74rem; color: var(--muted); white-space:nowrap; }

/* ---- For-you recommendations ---- */
.foryou-card { border-left: 3px solid var(--emerald); }
.foryou-head { font-family:'Cinzel',serif; color: var(--forest); font-size:0.9rem; margin-bottom:10px; }
.foryou-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.foryou-item { background: var(--parch-2); border:1px solid var(--hairline); border-radius:10px; padding:10px; }
.foryou-label { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color: var(--muted); margin-bottom:4px; }
.foryou-title { font-weight:700; font-size:0.84rem; color: var(--ink); line-height:1.3; }
@media (max-width: 380px) { .foryou-grid { grid-template-columns: 1fr; } }

/* ---- Challenges ---- */
.challenge-card.done { border-left: 3px solid var(--emerald); }
.challenge-hd { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:6px; }
.challenge-name { font-family:'Cinzel',serif; font-weight:600; font-size:0.98rem; color: var(--ink); }
.challenge-ref { font-size:0.72rem; color: var(--forest); margin-top:2px; }
.challenge-flavor { font-size:0.86rem; color: var(--ink-soft); font-style:italic; margin-bottom:10px; line-height:1.4; }
.challenge-track { height:9px; background: var(--parch-sink); border-radius:6px; overflow:hidden; }
.challenge-track span { display:block; height:100%; background: linear-gradient(90deg, var(--forest), var(--emerald-2)); box-shadow: 0 0 6px var(--emerald-glow); transition: width .3s; }
.challenge-row { padding:8px 0; }
.challenge-top { display:flex; justify-content:space-between; font-size:0.86rem; margin-bottom:4px; }
.challenge-row.done .challenge-name { color: var(--forest); }
.section-tabs-scroll { overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; }
.section-tabs-scroll::-webkit-scrollbar { display:none; }
.section-tabs-scroll button { flex: 0 0 auto; padding:9px 14px; }

/* ---- Notifications bell + dropdown panel ---- */
.notif-bell { position:relative; padding:8px; border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background: var(--parch-2); border:1px solid var(--hairline); color: var(--ink-soft); cursor:pointer; }
.notif-bell svg { width:19px; height:19px; }
.notif-badge { position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; padding:0 3px; border-radius:9px; background: var(--seal); color:#fff; font-size:0.62rem; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1; box-shadow: 0 0 0 2px var(--parch-0); }
/* position:fixed (not absolute) so the panel stays anchored to the viewport
   regardless of scroll position.
   Uses #notif-panel (ID) rather than a class: the panel also carries
   .card.glass, whose `.card.glass { position: relative }` rule has HIGHER
   specificity than a single class selector and would otherwise win regardless
   of source order — an ID selector guarantees this wins.
   `color` is set EXPLICITLY (not inherited): this panel used to live inside
   header.topbar, which sets a light cream color for its dark wood background —
   that made the panel's text invisible against its own light parchment card.
   z-index must clear nav.tabbar (30); the panel is now a sibling of the header
   rather than nested inside its stacking context, so this value actually wins. */
#notif-panel {
  position:fixed !important; top:60px; width:320px; max-width:88vw;
  max-height:min(420px, 70vh); overflow-y:auto; z-index:80; padding:10px;
  color: var(--ink);
  /* Anchor to the right edge of the centered 480px app column, not the viewport
     edge — otherwise on a wide desktop the panel floats far away from the app. */
  right: max(12px, calc(50vw - 228px));
}
.notif-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.notif-panel-head h3 { margin:0; font-size:0.9rem; color: var(--ink); font-family:'Cinzel',serif; }
.notif-panel-head button { background:none; border:none; color: var(--forest); font-size:0.74rem; cursor:pointer; font-weight:600; }
.notif-item { display:flex; gap:9px; align-items:flex-start; padding:9px 6px; border-bottom:1px solid var(--hairline-soft); font-size:0.82rem; cursor:pointer; border-left:2px solid transparent; }
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background: rgba(70,192,127,0.06); }
.notif-item.unread { background: rgba(70,192,127,0.10); border-left-color: var(--emerald); }
.reminder-divider{height:1px;background:var(--hairline-soft);margin:16px 0 14px}.reminder-form{display:flex;flex-direction:column;gap:7px}.reminder-form-row{display:grid;grid-template-columns:1.2fr .8fr;gap:7px}.reminder-form button{width:100%}.reminder-list{margin-top:12px}.reminder-row{display:flex;justify-content:space-between;gap:8px;padding:9px 0;border-top:1px solid var(--hairline-soft)}.reminder-row.disabled{opacity:.55}.reminder-row .muted{font-size:.72rem;line-height:1.35;margin-top:2px}.reminder-actions{display:flex;gap:5px;align-items:flex-start;flex-shrink:0}.reminder-actions button{font-size:.7rem;padding:6px 8px}
.notif-icon { flex:0 0 auto; font-size:1rem; line-height:1.3; }
.notif-body { flex:1; min-width:0; }
.notif-text { color: var(--ink); line-height:1.35; }
.notif-item .notif-time { font-size:0.7rem; color: var(--muted); margin-top:2px; }
.notif-empty { padding:14px 8px; text-align:center; color: var(--muted); font-size:0.82rem; }

/* ---- Leaderboard rows ---- */
.lb-row { display:flex; align-items:center; gap:12px; padding:12px 16px; margin-bottom:10px; transition: transform .15s; }
.lb-row:hover { transform: translateX(2px); }
.lb-rank { width:26px; flex-shrink:0; text-align:center; font-weight:700; color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-top .lb-rank { font-size:1.1rem; }
.lb-me { border-left:3px solid var(--emerald); background: linear-gradient(180deg, var(--parch-2), var(--parch-1)); box-shadow: 0 0 12px var(--emerald-glow), 0 6px 16px rgba(43,30,18,0.14); }
.lb-name { flex:1; font-weight:500; color: var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-me .lb-name { font-weight:700; }
.lb-value { font-weight:700; font-variant-numeric: tabular-nums; color: var(--forest); white-space:nowrap; }

/* ---- Connected accounts / church-finder rows: quieter than a full card ---- */
.toggle-row a.ghost, .toggle-row button.ghost { padding:6px 12px; font-size:0.8rem; }
#church-current, #church-results .card, #yt-results .card { font-size:0.88rem; }

/* ---- Toast banner (OAuth/Strava redirect confirmations) ---- */
.toast-banner {
  position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:200;
  padding:11px 20px; border-radius:var(--radius); font-size:0.85rem; font-weight:600;
  box-shadow:0 6px 20px rgba(43,30,18,0.3); color:#eafff2;
  background: linear-gradient(180deg, var(--emerald), var(--forest));
  border:1px solid rgba(70,192,127,0.5);
  animation: toast-in .25s ease both;
}
.toast-banner.toast-error { background: linear-gradient(180deg, #a5493a, var(--seal)); border-color: rgba(142,59,46,0.5); }
.toast-banner.toast-out { animation: toast-out .25s ease both; }
@keyframes toast-in { from { opacity:0; transform: translate(-50%, -8px); } to { opacity:1; transform: translate(-50%, 0); } }
@keyframes toast-out { from { opacity:1; transform: translate(-50%, 0); } to { opacity:0; transform: translate(-50%, -8px); } }

/* Restrained, deliberate entrances — a gentle page turn rather than snappy micro-motion. */
@media (prefers-reduced-motion: no-preference) {
  main > * { animation: rise .4s ease both; }
  @keyframes rise { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }
}

/* ---- Journeys: virtual routes advanced by real workouts (appended) ---- */
.journey-group {
  font-family: 'Cinzel', serif; font-size: 0.82rem; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--muted);
  margin: 20px 2px 8px; padding-bottom: 6px; border-bottom: 1px solid var(--hairline-soft);
}
.journey-card { cursor: pointer; padding-top: 0; overflow: hidden; transition: transform .16s, box-shadow .16s; }
.journey-card:hover { transform: translateY(-2px); box-shadow: 0 0 18px var(--emerald-glow); }
.journey-card.done { border-color: var(--gold); }

.journey-map-wrap {
  margin: 0 -16px 12px; height: 96px; background: var(--parch-sink);
  border-bottom: 1px solid var(--hairline-soft);
}
.journey-map-wrap.tall { height: 168px; border-radius: 10px; border: 1px solid var(--hairline-soft); margin: 4px 0 8px; }
.journey-map { display: block; width: 100%; height: 100%; }

.journey-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.journey-name, .journey-title {
  font-family: 'Cinzel', serif; font-weight: 700; color: var(--ink);
  font-size: 1.02rem; line-height: 1.25; margin: 0;
}
.journey-title { font-size: 1.22rem; }
.journey-sub { font-size: 0.78rem; color: var(--muted); margin-top: 3px; }
.journey-world {
  flex: none; font-family: 'Cinzel', serif; font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--forest); background: var(--parch-2);
  border: 1px solid var(--hairline); border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.journey-meta { font-size: 0.74rem; color: var(--muted); margin-top: 8px; }
.journey-legend {
  font-size: 0.7rem; color: var(--muted); letter-spacing: 0.04em;
  text-align: center; margin-bottom: 10px;
}
.journey-flavor { font-family: 'Spectral', serif; color: var(--ink-soft); line-height: 1.55; margin-top: 8px; font-size: 0.9rem; }
.journey-ref {
  font-family: 'Cinzel', serif; font-size: 0.74rem; letter-spacing: 0.05em;
  color: var(--forest); margin-top: 6px;
}
.journey-hero .challenge-track { margin-top: 14px; }
.journey-progress { font-size: 0.76rem; color: var(--muted); margin-top: 5px; }
.journey-progress.big { font-family: 'Cinzel', serif; font-size: 0.9rem; color: var(--ink); letter-spacing: 0.03em; }
.journey-next { font-size: 0.82rem; color: var(--forest-2); margin-top: 4px; margin-bottom: 12px; }
.journey-hero .follow-btn { width: 100%; }

.journey-wp { border-left: 3px solid var(--hairline); }
.journey-wp.unlocked { border-left-color: var(--gold); }
.journey-wp.locked { opacity: 0.5; padding-top: 12px; padding-bottom: 12px; }
.journey-wp-hd { display: flex; align-items: baseline; gap: 10px; }
.journey-wp-km {
  flex: none; font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.06em;
  color: var(--muted); min-width: 58px;
}
.journey-wp-title { font-family: 'Cinzel', serif; font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.journey-wp-narrative {
  font-family: 'Spectral', serif; color: var(--ink-soft); line-height: 1.62;
  margin: 8px 0 10px; font-size: 0.92rem;
}
.journey-wp .verse-card { margin-bottom: 0; }
/* ---- Scripture as conversation (verse threads) ---- */
.verse-tappable { cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.verse-tappable:hover { border-color: var(--emerald-2); transform: translateY(-1px); }
.verse-convo {
  margin-top: 8px;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--emerald-2);
}
.verse-thread-row { cursor: pointer; margin-bottom: 8px; }
.verse-thread-row:hover { border-color: var(--emerald-2); }
.verse-prompt {
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 2px solid var(--gold);
  background: var(--parch-sink);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  color: var(--ink);
}
.reflection { display: block; }
.reflection-reply {
  margin-left: 18px;
  padding-left: 10px;
  border-left: 1px solid var(--hairline-soft);
}
.reflection-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.reflection-actions .action-btn { padding: 2px 6px; font-size: 0.76rem; }
.reply-box { margin-top: 6px; }

/* ---- "From your church" home-feed videos (click-to-embed) ---- */
.church-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.church-video { cursor: pointer; }
.church-video-frame {
  position: relative;
  padding-top: 56.25%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--parch-sink);
}
.church-video-frame img,
.church-video-frame iframe,
.church-video-blank {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.church-video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--parch-0);
  background: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  pointer-events: none;
}
.church-video-frame iframe ~ .church-video-play { display: none; }
.church-video-title {
  margin-top: 4px;
  font-size: 0.74rem;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Journey live mode: 3D world + session HUD ---- */
.live-wrap { display:flex; flex-direction:column; gap:12px; }
.live-canvas-wrap { position:relative; width:100%; height:min(46vh, 320px); border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--hairline); background: var(--parch-sink); }
.live-minimap{z-index:3;top:58px;width:112px;right:9px}.live-minimap .journey-map{height:54px}
.live-canvas-wrap canvas { width:100%; height:100%; display:block; }
.live-3d-fallback { position:absolute; inset:0; overflow:auto; background: var(--parch-1); }

.live-hud { position:absolute; top:0; left:0; right:0; display:flex; align-items:flex-start;
  justify-content:space-between; padding:10px 12px; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,14,8,0.45), transparent); color:#f6efe0; }
.live-hud-speed { font-family:'Cinzel',serif; font-size:2rem; font-weight:700; line-height:1;
  text-shadow:0 1px 6px rgba(0,0,0,0.5); }
.live-hud-speed small { font-size:0.62rem; margin-left:4px; opacity:0.85; }
.live-hud-right { text-align:right; font-variant-numeric:tabular-nums; text-shadow:0 1px 6px rgba(0,0,0,0.5); }
.live-hud-right span { font-weight:700; font-size:1.05rem; }
.live-hud-right small { opacity:0.85; font-size:0.72rem; }
.live-hud-src { font-size:0.68rem; opacity:0.9; margin-top:2px; }

/* Live race state is deliberately compact: the road stays the focus, while a
   nearby real ghost gives the rider one legible reason to push on. */
.live-race-banner{position:absolute;z-index:4;left:10px;top:64px;display:flex;flex-direction:column;gap:1px;
  max-width:calc(100% - 148px);padding:6px 9px;border-radius:10px;color:#fff7df;
  background:rgba(20,14,10,.64);border:1px solid rgba(255,224,155,.22);backdrop-filter:blur(7px);
  box-shadow:0 5px 18px rgba(0,0,0,.16);pointer-events:none}
.live-race-banner strong{font-size:.58rem;letter-spacing:.13em;color:#ffe09b}
.live-race-banner span{font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-race-banner.is-overtake{animation:raceOvertake 1.2s ease both;background:rgba(41,117,72,.86);border-color:#a6f1c1}
@keyframes raceOvertake{0%{transform:translateX(-8px);opacity:0}25%{transform:none;opacity:1}100%{opacity:.84}}

/* Waypoint reveal, over the world, when you cross a real km mark. */
.live-waypoint { position:absolute; left:10px; right:10px; bottom:10px; padding:10px 12px;
  border-radius:12px; background:rgba(249,242,226,0.96); border:1px solid var(--gold);
  box-shadow:0 8px 24px rgba(43,30,18,0.35); animation:rise .35s ease both; max-height:60%; overflow:auto; }
.live-wp-km { font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); }
.live-wp-title { font-family:'Cinzel',serif; font-weight:700; color:var(--ink); margin:2px 0 4px; }
.live-wp-narrative { font-size:0.84rem; line-height:1.45; color:var(--ink-soft); margin-bottom:6px; }

.live-panel { padding:14px 16px; }
.live-sources { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0; }
.live-sources button { font-size:0.78rem; padding:9px 8px; }
.live-note { font-size:0.76rem; line-height:1.4; }
.live-controls { display:flex; gap:8px; margin-top:12px; }
.live-controls button { flex:1; }
.journey-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.journey-ride-btn { flex:1; min-width:150px; }
@media (max-width:380px) { .live-sources { grid-template-columns:1fr; } }
.jp-row { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  text-align:left; margin-bottom:8px; padding:11px 13px; }
.jp-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
.jp-name { font-weight:700; color:var(--ink); }
.jp-sub { font-size:0.74rem; color:var(--muted); }
.jp-pct { font-weight:700; color:var(--forest); font-variant-numeric:tabular-nums; flex:0 0 auto; }


/* The journey world. A journey IS the 3D route, so the world is the hero of
   the detail screen; the flat SVG map only appears when WebGL is unavailable. */
.journey-world-wrap{position:relative;border-radius:14px;overflow:hidden;margin:10px 0 12px;
  aspect-ratio:16/9;min-height:200px;background:var(--parch-2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.journey-world-wrap canvas{display:block;width:100%;height:100%}
.journey-world-hud{position:absolute;left:10px;bottom:10px;padding:5px 10px;border-radius:999px;
  background:rgba(20,14,10,.62);color:#fff;font-weight:700;font-size:.95rem;letter-spacing:.02em}
.journey-world-hud small{font-weight:500;opacity:.8}
.jw-live-label{font-size:.58rem;letter-spacing:.1em;color:#ffe19b;margin-right:8px;vertical-align:2px}
.jw-live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#46c07f;box-shadow:0 0 9px #46c07f;margin:0 5px 2px 0;animation:jwPulse 1.8s infinite}
@keyframes jwPulse{50%{opacity:.35;transform:scale(.75)}}
.journey-world-stats{position:absolute;right:10px;bottom:10px;display:flex;gap:6px}
.journey-world-stats span{display:flex;flex-direction:column;align-items:flex-end;padding:5px 8px;border-radius:10px;background:rgba(20,14,10,.58);color:#fff;text-transform:uppercase;font-size:.65rem;letter-spacing:.05em;backdrop-filter:blur(5px)}
.journey-world-stats b{font-size:.78rem;color:#ffe19b}.journey-world-stats small{font-size:.55rem;opacity:.75}
.journey-minimap,.live-minimap{position:absolute;right:10px;top:10px;width:136px;padding:5px;border-radius:11px;background:rgba(20,14,10,.64);border:1px solid rgba(255,230,176,.28);backdrop-filter:blur(6px);box-shadow:0 5px 16px rgba(0,0,0,.22)}
.journey-minimap .journey-map,.live-minimap .journey-map{height:66px;display:block}.journey-minimap-label{color:#ffe19b;font-size:.52rem;letter-spacing:.12em;font-weight:800;padding:2px 4px 1px}
.journey-next-card{display:flex;align-items:center;gap:8px;margin-top:10px;padding:9px 11px;border-radius:12px;background:linear-gradient(100deg,rgba(70,192,127,.11),rgba(201,162,74,.12));border:1px solid rgba(70,192,127,.2)}
.journey-next-card strong{font-size:.86rem}.journey-next-card span:last-child{margin-left:auto;font-size:.7rem;color:var(--muted)}.jw-next-kicker{font-size:.54rem;color:var(--forest);font-weight:850;letter-spacing:.08em}
.journey-world-fallback .journey-map-wrap{margin:0}


/* Developer webhooks panel */
.wh-row{padding:10px 0;border-top:1px solid rgba(0,0,0,.08)}
.wh-row:first-child{border-top:0}
.wh-row.off{opacity:.55}
.wh-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;word-break:break-all}
.wh-meta{font-size:.78rem;opacity:.72;margin-top:2px}
.wh-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.wh-actions button{font-size:.78rem;padding:5px 9px}
.wh-actions .danger{color:#a33}
.wh-new{display:flex;gap:8px;margin-top:12px}
.wh-new input{flex:1;min-width:0}
.wh-note{font-size:.78rem;margin-top:8px;line-height:1.45}
.wh-note code{font-size:.76rem;background:rgba(0,0,0,.07);padding:1px 4px;border-radius:4px}


/* Live HUD: heart rate sits beside speed, and reads '--' whenever no monitor
   is streaming. Nothing in this app substitutes an estimate for a measurement. */
.live-hud-hr{text-align:right;font-weight:800;font-size:1.35rem;line-height:1}
.live-hud-hr small{font-size:.62rem;font-weight:600;opacity:.75;margin-left:2px}
.live-hud-zone{font-size:.68rem;font-weight:700;opacity:.85;letter-spacing:.06em;margin-top:2px}
.live-rider-tag{font-size:.68rem;font-weight:800;letter-spacing:.04em;color:#ffe3a0;margin-bottom:4px}

/* The moment card: what the app thinks is happening, why it thinks so, and the
   verse for it. The 'why' line is always shown so the read stays inspectable. */
.live-moment{position:absolute;left:10px;right:10px;bottom:10px;padding:12px 14px;border-radius:14px;
  background:rgba(20,14,10,.82);color:#f6efe4;backdrop-filter:blur(6px);animation:momentIn .5s ease}
@keyframes momentIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.live-moment-hd{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-weight:800;font-size:.95rem}
.live-moment-src{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  opacity:.7;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:2px 7px}
.live-moment-why{font-size:.76rem;opacity:.75;margin-top:3px}
.live-moment-verse{display:block;width:100%;text-align:left;margin-top:9px;background:rgba(255,255,255,.08);
  border:0;border-radius:10px;padding:10px 12px;color:inherit;cursor:pointer;font:inherit}
.live-moment-verse:hover{background:rgba(255,255,255,.14)}
.live-moment-verse .verse-ref{font-weight:800;font-size:.8rem;opacity:.9}
.live-moment-verse .verse-text{font-size:.86rem;line-height:1.45;margin-top:3px}
.live-moment-tap{font-size:.72rem;opacity:.7;margin-top:6px}

/* ---- Modern social shell --------------------------------------------------
   Keeps the parchment / walnut / forest palette, but uses the visual language
   of current social apps: translucent chrome, generous radii, compact metadata,
   floating navigation, and quiet borders instead of engraved panels. */
:root { --radius: 18px; --surface-shadow: 0 12px 34px rgba(43,30,18,.10); }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(900px 560px at 8% -8%, rgba(201,162,74,.22), transparent 65%),
    radial-gradient(760px 560px at 100% 22%, rgba(70,192,127,.13), transparent 68%),
    var(--parch-0);
  font-size: 15px;
  letter-spacing: -.005em;
}
#app {
  max-width: 560px;
  background: rgba(243,234,214,.42);
  box-shadow: 0 0 70px rgba(43,30,18,.12);
}
header.topbar {
  padding: 13px 18px;
  background: rgba(43,30,18,.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: rgba(201,162,74,.28);
  box-shadow: 0 8px 24px rgba(43,30,18,.2);
}
header.topbar .brand { font-size: 1.05rem; letter-spacing: .045em; }
header.topbar .brand-mark svg { width: 23px; height: 23px; }
main { padding: 18px 14px 28px; }
.glass {
  background: rgba(249,242,226,.84);
  background-image: none;
  border: 1px solid rgba(74,58,40,.14);
  border-radius: 20px;
  box-shadow: var(--surface-shadow), inset 0 1px 0 rgba(255,255,255,.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.card { padding: 17px; margin-bottom: 13px; }
.card.glass::before { display:none; }
.stories { gap: 12px; padding: 2px 2px 17px; }
.story-ring { width: 58px; height: 58px; box-shadow: 0 4px 14px rgba(43,30,18,.15), 0 0 10px rgba(70,192,127,.16); }
.story-label { font-family: inherit; font-size: .68rem; color: var(--ink-soft); }
.post-head { margin-bottom: 13px; }
.avatar-sm { width: 40px; height: 40px; border: 2px solid rgba(201,162,74,.72); }
.post-author { font-size: .92rem; }
.post-time { font-size: .7rem; }
.post-content { font-size: .94rem; line-height: 1.5; }
.route-banner { height: 132px; border-radius: 16px; margin-left: -2px; margin-right: -2px; }
.stat-row { gap: 7px; }
.stat { border-radius: 12px; padding: 9px 4px; background: rgba(224,212,186,.56); }
.action-row { gap: 8px; justify-content: space-between; }
.action-btn { border-radius: 999px; padding: 7px 10px; font-size: .78rem; }
.action-btn:hover { background: rgba(70,192,127,.09); color: var(--forest); }
.verse-card { border-radius: 14px; padding: 14px 15px; background: rgba(249,242,226,.9); }
nav.tabbar {
  bottom: 12px;
  width: calc(100% - 24px);
  max-width: 536px;
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
  border: 1px solid rgba(201,162,74,.36);
  border-top: 1px solid rgba(201,162,74,.36);
  border-radius: 24px;
  background: rgba(43,30,18,.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 34px rgba(43,30,18,.28), 0 0 0 1px rgba(255,255,255,.05) inset;
}
nav.tabbar button { border-radius: 16px; padding: 7px 4px 6px; font-family: inherit; font-size: .62rem; gap: 3px; }
nav.tabbar button.active { background: rgba(70,192,127,.16); color: var(--emerald-2); }
nav.tabbar button .icon svg { width: 21px; height: 21px; }
button.primary { border-radius: 14px; padding: 12px 17px; font-family: inherit; font-size: .88rem; box-shadow: 0 7px 18px rgba(47,107,69,.23); }
button.ghost { border-radius: 14px; background: rgba(249,242,226,.75); border-color: rgba(74,58,40,.15); font-family: inherit; font-size: .86rem; }
button.ghost:hover { background: var(--parch-2); transform: translateY(-1px); }
.follow-btn { font-family: inherit; box-shadow: 0 5px 14px rgba(70,192,127,.18); }
.section-tabs { gap: 7px; padding: 4px; border-radius: 15px; background: rgba(224,212,186,.45); }
.section-tabs button { border: 0; border-radius: 11px; font-family: inherit; }
.section-tabs button.active { box-shadow: 0 4px 12px rgba(47,107,69,.2); }
.section-tabs-scroll { padding: 4px; margin: -3px -4px 14px; }
.section-tabs-scroll button { padding: 9px 13px; }
select, input[type=text], .input, #p-verse, .card.glass input[type=text], .card.glass input[type=number] {
  border-radius: 13px; border-color: rgba(74,58,40,.16); background: rgba(249,242,226,.88); padding: 11px 13px;
}
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(70,192,127,.14); }
h2 { font-family: inherit; font-size: 1.22rem; font-weight: 750; letter-spacing: -.025em; }
.journey-group { font-family: inherit; font-size: .7rem; letter-spacing: .1em; font-weight: 800; color: var(--forest); border-bottom: 0; margin: 22px 3px 9px; }
.journey-card { border-radius: 20px; }
.journey-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(43,30,18,.13), 0 0 0 1px rgba(70,192,127,.18); }
.journey-map-wrap { margin: 0 -17px 14px; height: 110px; }
.journey-cover { position:relative; height:156px; margin:0 -17px 14px; overflow:hidden; background:var(--forest); }
.journey-cover img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.96) contrast(1.03); transition:transform .35s ease, filter .35s ease; }
.journey-card:hover .journey-cover img { transform:scale(1.045); filter:saturate(1.1) contrast(1.06); }
.journey-cover-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(17,36,27,.45),transparent 38%,rgba(22,26,20,.78)); pointer-events:none; }
.journey-cover-top, .journey-cover-bottom { position:absolute; left:14px; right:14px; display:flex; align-items:center; justify-content:space-between; gap:8px; color:#fff8df; font-size:.64rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; text-shadow:0 1px 8px rgba(0,0,0,.35); }
.journey-cover-top { top:12px; }
.journey-cover-top span:first-child { padding:5px 8px; border:1px solid rgba(255,241,192,.35); border-radius:999px; background:rgba(19,47,34,.54); backdrop-filter:blur(8px); }
.journey-cover-bottom { bottom:12px; font-size:.68rem; letter-spacing:.03em; text-transform:none; }
.journey-cover-bottom span:last-child { color:#ffe29a; font-size:.72rem; }
.journey-world { font-family: inherit; font-weight: 750; letter-spacing: .06em; }
.journey-name, .journey-title, .journey-wp-title { font-family: inherit; }
.journey-flavor, .journey-wp-narrative { font-family: inherit; font-size: .88rem; }
.suggest-item, .foryou-item, .stat-tile { border-radius: 15px; border-color: rgba(74,58,40,.13); }
.suggest-item:hover { box-shadow: 0 10px 20px rgba(70,192,127,.14); }
.premium-progress-card { background: linear-gradient(145deg, rgba(248,242,225,.96), rgba(235,225,199,.74)); }
.premium-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.premium-badge { flex:none; border:1px solid rgba(169,129,47,.42); border-radius:999px; padding:5px 8px; color:var(--walnut); font-size:.58rem; font-weight:850; letter-spacing:.1em; }
.load-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:15px 0 14px; }
.load-grid > div { padding:10px 8px; border:1px solid rgba(74,58,40,.1); border-radius:14px; background:rgba(255,250,235,.58); text-align:center; }
.load-grid b { display:block; color:var(--forest); font-size:1.18rem; letter-spacing:-.04em; }
.load-grid span { display:block; margin-top:2px; color:var(--muted); font-size:.62rem; }
.training-log { display:grid; grid-template-columns:repeat(28,1fr); gap:4px; margin-top:8px; }
.training-day { aspect-ratio:1; min-width:0; border-radius:4px; background:rgba(74,58,40,.1); }
.training-day i { display:block; width:100%; height:100%; border-radius:inherit; }
.training-day.level-1 i { background:rgba(70,192,127,.27); }
.training-day.level-2 i { background:rgba(70,192,127,.48); }
.training-day.level-3 i { background:rgba(47,142,90,.7); }
.training-day.level-4 i { background:var(--forest); box-shadow:0 0 8px rgba(47,107,69,.25); }
.training-log-legend { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:9px; font-size:.62rem; color:var(--muted); }
.training-log-legend i { display:inline-block; width:9px; height:9px; margin-right:3px; border-radius:3px; vertical-align:-1px; background:rgba(74,58,40,.1); }
.training-log-legend i.level-2 { background:rgba(70,192,127,.48); }
.training-log-legend i.level-4 { background:var(--forest); }
.goal-row { padding:12px 0 4px; border-bottom:1px solid rgba(74,58,40,.1); }
.goal-row:last-of-type { border-bottom:0; }
.goal-row-head, .goal-row-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.goal-row-head strong { font-size:.84rem; color:var(--ink); }
.goal-row-meta { margin:4px 0 7px; color:var(--muted); font-size:.68rem; }
.icon-btn { border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:1.1rem; line-height:1; }
.icon-btn:hover { color:var(--walnut); }
.goal-form { margin-top:13px; padding-top:13px; border-top:1px solid rgba(74,58,40,.12); }
.goal-form-grid { display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:7px; margin-top:7px; }
.goal-form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:9px; }
.segment-panel { margin-top:12px; }
.segment-row { padding:12px 0; border-bottom:1px solid rgba(74,58,40,.1); }
.segment-row:last-child { border-bottom:0; }
.segment-row-head { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.78rem; }
.segment-row-head span { color:var(--muted); font-size:.66rem; }
.segment-row-meta { color:var(--forest); font-size:.68rem; margin-top:4px; }
.segment-mini-board { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.segment-mini-board span { border-radius:999px; padding:5px 8px; color:var(--ink-soft); background:rgba(70,192,127,.1); font-size:.62rem; }
.segment-mini-board b { color:var(--forest); }
.profile-header { padding: 4px 0 8px; }
.profile-stats { gap: 24px; }
.badge-pill { border-radius: 999px; padding: 6px 11px; font-size: .74rem; }
.workout-screen { padding: 12px 4px 20px; }
.hr-ring { width: 204px; height: 204px; border: 1px solid rgba(169,129,47,.6); box-shadow: 0 0 0 7px rgba(249,242,226,.76), 0 15px 34px rgba(43,30,18,.16); }
.start-stop-btn { box-shadow: 0 10px 25px rgba(43,30,18,.2); }
@media (min-width: 600px) {
  #app { margin-top: 14px; min-height: calc(100vh - 28px); border-radius: 28px 28px 0 0; overflow: clip; }
  header.topbar { border-radius: 28px 28px 0 0; }
  nav.tabbar { bottom: 18px; }
}

/* Second-pass home surface: more editorial, more social, and immediately
   actionable without losing the warm Functioning Faith identity. */
.home-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:8px 3px 14px; }
.home-kicker { color:var(--forest); font-size:.66rem; font-weight:850; letter-spacing:.14em; }
.home-hero h1 { margin:5px 0 4px; color:var(--ink); font-size:1.7rem; line-height:1.08; letter-spacing:-.045em; }
.home-hero p { margin:0; max-width:285px; color:var(--muted); font-size:.82rem; line-height:1.45; }
.home-hero-mark { width:46px; height:46px; display:flex; align-items:center; justify-content:center; flex:none; border-radius:16px; color:#fff0c5; font-size:1.4rem; background:linear-gradient(145deg,var(--forest),var(--walnut-0)); box-shadow:0 8px 18px rgba(47,107,69,.22); transform:rotate(8deg); }
.home-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:20px; }
.home-action { display:grid; grid-template-columns:27px 1fr; grid-template-rows:auto auto; column-gap:8px; align-items:center; min-height:72px; text-align:left; padding:11px 12px; border:1px solid rgba(74,58,40,.13); border-radius:17px; color:var(--ink); background:rgba(249,242,226,.7); box-shadow:0 7px 18px rgba(43,30,18,.06); cursor:pointer; font-family:inherit; transition:transform .16s,box-shadow .16s,border-color .16s; }
.home-action:hover { transform:translateY(-2px); border-color:rgba(70,192,127,.45); box-shadow:0 10px 22px rgba(43,30,18,.11); }
.mission-card { position:relative; overflow:hidden; border-color:rgba(169,129,47,.32); background:linear-gradient(145deg,rgba(249,242,226,.98),rgba(233,223,197,.83)); }
.mission-card::after { content:'✦'; position:absolute; right:-10px; top:-22px; color:rgba(169,129,47,.12); font-size:9rem; line-height:1; pointer-events:none; }
.mission-kicker { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; color:var(--forest); font-size:.62rem; font-weight:850; letter-spacing:.11em; }
.mission-live { padding:4px 7px; border-radius:999px; color:var(--walnut); background:rgba(201,162,74,.18); font-size:.56rem; }
.mission-card h2 { position:relative; z-index:1; margin:9px 0 10px; font-size:1.18rem; }
.mission-verse { position:relative; z-index:1; padding:11px 12px; border-left:3px solid var(--gold-2); border-radius:0 12px 12px 0; background:rgba(255,251,238,.64); }
.mission-verse .verse-text { margin-top:4px; font-size:.9rem; line-height:1.45; }
.mission-prompt { position:relative; z-index:1; margin:11px 0; color:var(--ink-soft); font-size:.79rem; line-height:1.5; }
.mission-actions { position:relative; z-index:1; display:flex; gap:8px; flex-wrap:wrap; }
.mission-actions button, .mission-read { text-decoration:none; }
.mission-read { display:inline-flex; align-items:center; justify-content:center; }
.mission-grounding { position:relative; z-index:1; margin-top:10px; color:var(--muted); font-size:.61rem; line-height:1.35; }
.home-action span { grid-row:1 / span 2; width:27px; height:27px; display:flex; align-items:center; justify-content:center; border-radius:9px; color:var(--forest); background:rgba(70,192,127,.14); font-size:1.15rem; }
.home-action b { font-size:.78rem; line-height:1.1; }
.home-action small { color:var(--muted); font-size:.64rem; line-height:1.2; }
.home-action-primary { color:#effff5; background:linear-gradient(145deg,var(--forest-2),var(--forest)); border-color:transparent; box-shadow:0 8px 20px rgba(47,107,69,.22); }
.home-action-primary span { color:#effff5; background:rgba(255,255,255,.16); }
.home-action-primary small { color:rgba(239,255,245,.76); }
.social-section-label { display:flex; justify-content:space-between; align-items:center; margin:0 3px 7px; color:var(--ink); font-size:.76rem; font-weight:800; }
.social-section-label span:last-child { color:var(--muted); font-size:.66rem; font-weight:600; }
.video-hero { margin:0 2px 15px; padding:18px; border-radius:21px; color:#f5fff8; background:radial-gradient(circle at 88% 12%,rgba(201,162,74,.45),transparent 32%),linear-gradient(145deg,var(--walnut-0),var(--forest)); box-shadow:0 12px 25px rgba(43,30,18,.18); }
.video-hero h2 { margin:3px 0 6px; color:#fff8e7; font-size:1.35rem; letter-spacing:-.035em; }
.video-hero p { margin:0; max-width:390px; color:rgba(245,255,248,.78); font-size:.8rem; line-height:1.45; }
.video-kicker { font-size:.64rem; font-weight:850; letter-spacing:.14em; color:#ffe3a0; }
.video-source-note { margin:0 3px 10px; color:var(--muted); font-size:.68rem; font-weight:650; }
#videos-list .card { padding:12px; }
#videos-list .video-thumb-wrap { border-radius:15px !important; background:var(--walnut-0); box-shadow:0 6px 16px rgba(43,30,18,.16); }
#videos-list .video-thumb-wrap img { aspect-ratio:16/9; object-fit:cover; }
#videos-list .video-thumb-wrap > div { background:linear-gradient(180deg,transparent,rgba(20,14,8,.24)); }
#videos-list .video-thumb-wrap iframe { border:0; border-radius:15px; }
#videos-list b { font-size:.92rem; line-height:1.25; }
.video-audience { display:inline-flex; padding:4px 8px; border-radius:999px; color:var(--forest); background:rgba(70,192,127,.11); font-size:.65rem; font-weight:750; }
.reels-hero { margin:0 2px 12px; padding:18px; border-radius:21px; color:#f5fff8; background:linear-gradient(145deg,var(--forest),var(--walnut-0)); box-shadow:0 12px 25px rgba(43,30,18,.18); }
.reels-hero h2 { margin:3px 0 6px; color:#fff8e7; font-size:1.35rem; letter-spacing:-.035em; }
.reels-hero p { margin:0; color:rgba(245,255,248,.78); font-size:.8rem; line-height:1.45; }
.reels-filters { margin-bottom:12px; position:relative; z-index:2; }
.reels-feed-note { margin-top:10px; color:rgba(245,255,248,.72); font-size:.68rem; font-weight:700; }
.reel-create-btn { margin-top:12px; border:1px solid rgba(255,255,255,.28); border-radius:12px; padding:9px 12px; color:var(--forest); background:#fff8e7; font:inherit; font-size:.76rem; font-weight:850; cursor:pointer; }
.reel-create-btn:hover { transform:translateY(-1px); box-shadow:0 5px 14px rgba(0,0,0,.18); }
.reel-view-switch { display:flex; gap:5px; margin-top:12px; padding:3px; width:max-content; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(0,0,0,.18); }
.reel-view-switch button { border:0; border-radius:999px; padding:7px 13px; color:rgba(255,255,255,.72); background:transparent; font-size:.72rem; font-weight:800; cursor:pointer; }
.reel-view-switch button.active { color:var(--forest); background:#fff8e7; }
.reel-view-switch button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
#reels-list { height:calc(100svh - 248px); min-height:430px; display:flex; flex-direction:column; gap:0; overflow-y:auto; overscroll-behavior-y:contain; scroll-snap-type:y mandatory; border-radius:22px; scrollbar-width:none; background:#160f0b; }
#reels-list::-webkit-scrollbar { display:none; }
.reel-card { position:relative; flex:0 0 100%; min-height:100%; scroll-snap-align:start; scroll-snap-stop:always; overflow:hidden; cursor:pointer; background:#160f0b; }
.reel-frame { position:absolute; inset:0; overflow:hidden; background:linear-gradient(155deg,var(--forest),var(--walnut-0)); }
.reel-frame img, .reel-frame iframe, .reel-frame video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; display:block; }
.reel-frame:after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,transparent 38%,rgba(0,0,0,.82) 100%); }
.reel-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:2.5rem; text-shadow:0 2px 12px rgba(0,0,0,.65); pointer-events:none; opacity:.88; }
/* A real two-way control now, not a one-way "tap for sound" label: it sits
   above the player, is big enough to hit on a phone, and says which state it
   is in rather than only what tapping would do. */
.reel-sound { position:absolute; right:14px; top:14px; z-index:3; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer;
  border:1px solid rgba(255,255,255,.22); border-radius:999px; color:#fff;
  background:rgba(0,0,0,.42); backdrop-filter:blur(8px); font-size:1rem; line-height:1;
  -webkit-tap-highlight-color:transparent; transition:background .15s ease, transform .1s ease; }
.reel-sound:hover { background:rgba(0,0,0,.62); }
.reel-sound:active { transform:scale(.92); }
.reel-sound:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.reel-actions { position:absolute; z-index:4; right:12px; bottom:86px; display:flex; flex-direction:column; align-items:center; gap:9px; }
.reel-action { min-width:44px; min-height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:5px 7px; border:1px solid rgba(255,255,255,.2); border-radius:15px; color:#fff; background:rgba(0,0,0,.42); backdrop-filter:blur(9px); cursor:pointer; font-size:.62rem; font-weight:800; line-height:1; transition:transform .14s ease, background .14s ease, color .14s ease; }
.reel-action:hover, .reel-action:focus-visible { background:rgba(0,0,0,.68); }
.reel-action:active { transform:scale(.92); }
.reel-action.is-active { color:#ffb29e; background:rgba(87,39,28,.78); border-color:rgba(255,178,158,.6); }
.reel-action.is-confirmed { color:#b6f2ce; border-color:#b6f2ce; }
.reel-not-interested { font-size:.56rem; color:rgba(255,255,255,.86); }
.reel-not-interested:hover, .reel-not-interested:focus-visible { color:#fff; }
.reel-action-icon { font-size:1.2rem; line-height:1; }
.reel-action:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.reel-overlay { position:absolute; z-index:2; left:16px; right:16px; bottom:18px; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.55); }
.reel-overlay .muted { color:rgba(255,255,255,.75); margin-top:5px; }
.reel-overlay .video-audience { color:#fff; background:rgba(70,192,127,.8); text-shadow:none; }
.reel-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.reel-source { display:inline-flex; align-items:center; min-height:22px; padding:3px 7px; border:1px solid rgba(255,255,255,.2); border-radius:999px; color:rgba(255,255,255,.9); background:rgba(20,14,10,.38); font-size:.62rem; font-weight:750; text-shadow:none; }
.reel-title { margin-top:9px; font-size:1.04rem; font-weight:850; line-height:1.28; }
.reel-scripture { display:flex; align-items:center; gap:6px; margin-top:9px; padding:6px 9px; border:1px solid rgba(255,227,160,.5); border-radius:10px; color:#fff3cf; background:rgba(43,30,18,.5); font:inherit; font-size:.71rem; font-weight:800; text-shadow:none; cursor:pointer; }
.reel-scripture:hover, .reel-scripture:focus-visible { background:rgba(43,30,18,.76); border-color:#ffe3a0; }
.reel-scripture:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.reel-discussion-backdrop { position:fixed; z-index:100; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:16px; background:rgba(20,14,10,.66); backdrop-filter:blur(7px); }
.reel-discussion { width:min(100%,520px); max-height:calc(100svh - 32px); overflow:auto; padding:18px; border-radius:24px; color:var(--ink); background:var(--parch); box-shadow:0 20px 56px rgba(0,0,0,.35); }
.reel-discussion h2 { margin:2px 0 0; }
.reel-discussion-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.reel-discussion-head .ghost { min-width:42px; min-height:42px; padding:0; font-size:1.35rem; }
.reel-discussion-list { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.reel-comment { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:10px 11px; border-radius:14px; background:rgba(43,30,18,.055); }
.reel-comment b, .reel-comment span, .reel-comment small { display:block; }
.reel-comment b { font-size:.78rem; }
.reel-comment span { margin-top:2px; font-size:.86rem; line-height:1.4; white-space:pre-wrap; }
.reel-comment small { margin-top:4px; color:var(--muted); font-size:.67rem; }
.reel-comment-delete { flex:0 0 auto; min-width:34px; min-height:34px; padding:0; }
.reel-discussion-empty { padding:14px; border:1px dashed var(--line); border-radius:14px; color:var(--muted); font-size:.82rem; line-height:1.4; text-align:center; }
.reel-comment-form { display:flex; gap:8px; margin-top:4px; }
.reel-comment-form input { min-width:0; flex:1; border:1px solid var(--line); border-radius:12px; padding:10px 11px; color:var(--ink); background:#fffdf7; font:inherit; }
.reel-comment-form button { flex:0 0 auto; min-height:42px; padding:8px 12px; }
.group-location-optin { display:flex; align-items:center; gap:8px; margin:-2px 0 10px; }
.group-location-optin .ghost { flex:0 0 auto; padding:7px 9px; font-size:.73rem; }
.group-location-optin .muted { font-size:.7rem; line-height:1.35; }
.group-lookup-row { display:flex; gap:8px; }
.group-lookup-row input { min-width:0; flex:1; }
.group-lookup-row button { flex:0 0 auto; }
.group-lookup-result { width:100%; display:flex; flex-direction:column; gap:3px; padding:10px; border:1px solid rgba(70,192,127,.3); border-radius:12px; color:var(--ink); background:rgba(70,192,127,.08); font:inherit; text-align:left; cursor:pointer; }
.group-lookup-result span { color:var(--muted); font-size:.74rem; }
.group-event-calendar { margin-left:auto; white-space:nowrap; }
.reel-card.is-active .reel-play { display:none; }
.reel-studio-backdrop { position:fixed; z-index:100; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:16px; background:rgba(20,14,10,.66); backdrop-filter:blur(7px); }
.reel-studio { width:min(100%,520px); max-height:calc(100svh - 32px); overflow:auto; padding:18px; border-radius:24px; color:var(--ink); background:var(--parch); box-shadow:0 20px 56px rgba(0,0,0,.35); }
.reel-studio h2 { margin:2px 0 0; }
.reel-studio-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.reel-studio-head .ghost { min-width:42px; min-height:42px; padding:0; font-size:1.35rem; }
.reel-studio-actions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:12px 0; }
.reel-studio-actions button { min-height:44px; padding:7px; font-size:.75rem; }
.reel-studio-preview { margin:10px 0; border-radius:14px; overflow:hidden; background:#160f0b; }
.reel-studio-preview video { width:100%; max-height:42svh; display:block; background:#000; }
.reel-studio-preview .muted { padding:7px 9px; font-size:.7rem; color:rgba(255,255,255,.76); }
.reel-studio .field-label { display:block; margin-top:12px; }
.integration-list { display:flex; flex-direction:column; gap:8px; margin:10px 0; }
.integration-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.integration-row strong { font-size:.88rem; }
.integration-row .ghost { white-space:nowrap; padding:7px 10px; font-size:.74rem; text-decoration:none; }
.wearable-callout { padding:10px 12px; border-radius:14px; background:rgba(70,192,127,.09); border:1px solid rgba(70,192,127,.2); font-size:.8rem; line-height:1.4; }
@media (min-width:700px) {
  #reels-list { max-width:440px; height:calc(100vh - 230px); margin:0 auto; box-shadow:0 16px 38px rgba(43,30,18,.22); }
}


/* Live HUD additions: gradient, live gaps to the real riders on this road,
   and the split panel shown when a timed segment closes. */
.live-hud-grade{font-size:.72rem;font-weight:800;opacity:.9;margin-top:2px;letter-spacing:.04em}

.live-gaps{position:absolute;right:10px;top:70px;display:flex;flex-direction:column;gap:3px;
  background:rgba(20,14,10,.55);border-radius:10px;padding:6px 8px;backdrop-filter:blur(4px)}
.live-gap-row{display:flex;gap:10px;justify-content:space-between;font-size:.72rem;color:#f6efe4}
.live-gap-row.self{font-weight:700}
.live-gap-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-gap-delta{font-variant-numeric:tabular-nums}
.live-gap-delta.ahead{color:#ff9f8a}   /* they are up the road on you */
.live-gap-delta.behind{color:#8fe3b0}  /* you are up the road on them */

.live-split{position:absolute;left:10px;right:10px;top:10px;padding:10px 14px;border-radius:14px;
  background:rgba(20,14,10,.85);color:#f6efe4;text-align:center;backdrop-filter:blur(6px);
  animation:momentIn .4s ease}
.live-split-hd{font-size:.78rem;opacity:.8}
.live-split-time{font-size:1.7rem;font-weight:800;line-height:1.1;margin:2px 0;
  font-variant-numeric:tabular-nums}
.live-split-note{font-size:.74rem;opacity:.85}


/* Explore index: the whole catalogue at a glance, one tap into any section. */
.explore-hero{margin:2px 0 14px}
.explore-hero h2{margin:0 0 2px}
.explore-hero p{margin:0;font-size:.86rem}

.explore-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.explore-tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:14px;border-radius:16px;text-align:left;font:inherit;color:var(--ink);cursor:pointer;
  background:var(--parch);border:1px solid rgba(0,0,0,.10);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.explore-tile:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.11);
  border-color:var(--emerald-2,rgba(0,0,0,.22))}
.explore-tile:active{transform:translateY(0)}
.explore-tile-icon{display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:11px;margin-bottom:4px;
  background:rgba(0,0,0,.055);color:var(--emerald-2,#46c07f)}
.explore-tile-icon svg{width:21px;height:21px}
.explore-tile-name{font-weight:700;font-size:.96rem;line-height:1.2}
.explore-tile-blurb{font-size:.76rem;opacity:.72;line-height:1.35}

/* Breadcrumb back to the index from inside a section. */
.explore-crumb{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.explore-crumb-name{font-weight:700;font-size:.95rem}
.explore-crumb .back-btn{margin:0}

@media (max-width:380px){
  .explore-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .explore-tile{padding:12px}
}


/* Live workout figures. Anything not actually measured reads '--'. */
.live-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin:12px 0 4px}
.lm-cell{background:var(--parch);border:1px solid rgba(0,0,0,.09);border-radius:12px;
  padding:9px 6px;text-align:center}
.lm-value{font-size:1.35rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
.lm-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;opacity:.62;margin-top:2px}
.lm-value.zone-1{color:#6c8fb3}.lm-value.zone-2{color:#4e9e6a}.lm-value.zone-3{color:#c9a227}
.lm-value.zone-4{color:#d2762c}.lm-value.zone-5{color:#c0392b}

.lm-splits{width:100%;margin-top:6px}
.lm-splits-head{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;opacity:.6;margin-bottom:4px}
.lm-split{display:flex;justify-content:space-between;font-size:.84rem;padding:4px 8px;
  border-radius:8px;font-variant-numeric:tabular-nums}
.lm-split:nth-child(odd){background:rgba(0,0,0,.035)}
.lm-split.best{font-weight:700;color:var(--emerald-2,#46c07f)}


/* Creator overlay panel */
.ov-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem;word-break:break-all;
  background:rgba(0,0,0,.06);border-radius:8px;padding:8px 10px}
.ov-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ov-actions button{font-size:.78rem;padding:5px 9px}
.ov-actions .danger{color:#a33}
.ov-hint{font-size:.75rem;margin-top:8px;line-height:1.45}


/* Search */
.topbar-icon-btn{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border-radius:10px;color:var(--parch-2);vertical-align:middle}
.topbar-icon-btn svg{width:19px;height:19px}
.topbar-icon-btn:hover{background:rgba(255,255,255,.10)}

.search-head{margin-bottom:6px}
.search-field{position:relative;margin-bottom:14px}
.search-field .input{padding-left:38px;font-size:1rem}
.search-field-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;opacity:.5;pointer-events:none}
.search-hint{font-size:.85rem;line-height:1.5;padding:6px 2px}

.search-group{margin-bottom:16px}
.search-group-head{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;
  opacity:.6;margin-bottom:6px;padding-left:2px}
.search-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:9px 11px;border-radius:12px;background:var(--parch);color:var(--ink);
  border:1px solid rgba(0,0,0,.07);margin-bottom:5px;cursor:pointer;font:inherit;
  transition:transform .12s ease,border-color .12s ease}
.search-row:hover{transform:translateX(2px);border-color:var(--emerald-2,rgba(0,0,0,.22))}
.search-row-icon{flex:none;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:9px;background:rgba(0,0,0,.055);color:var(--emerald-2,#46c07f)}
.search-row-icon svg{width:17px;height:17px}
.search-row-main{min-width:0;display:flex;flex-direction:column}
.search-row-title{font-weight:650;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-row-sub{font-size:.76rem;opacity:.66;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}


/* ---------------------------------------------------------------------------
   The Shire pass.
   Round doors, hedgerows and hearth-light. The rule followed throughout: warm
   over cool, round over square, and soft shadow over hard edges — a place that
   is tended rather than designed.
   --------------------------------------------------------------------------- */

/* Cards read as things sitting in sunlight, not panels floating in space. */
.card {
  border-radius: var(--radius);
  box-shadow: 0 2px 3px rgba(74,58,40,.07), 0 10px 26px rgba(74,58,40,.10);
}

/* Round doors: primary actions and the tab bar go fully round. */
button, .btn, .primary, .ghost, .follow-btn, input, select, textarea, .input {
  border-radius: var(--radius-sm);
}
.primary, .start-stop-btn, .follow-btn { border-radius: var(--radius-round); }

.primary {
  background: linear-gradient(180deg, var(--meadow-2), var(--meadow));
  border: 1px solid var(--meadow-deep);
  color: #fdf8ea;
  box-shadow: 0 2px 0 var(--meadow-deep), 0 6px 14px rgba(72,99,47,.28);
}
.primary:hover { filter: brightness(1.05); }
.primary:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--meadow-deep); }

/* The top bar as a beam of dark oak over a lit room. */
header.topbar {
  border-bottom: 1px solid rgba(45,32,20,.35);
  box-shadow: 0 3px 14px rgba(51,37,26,.22);
}

/* The tab bar sits like a row of round doors along the bottom. */
nav.tabbar { border-top: 1px solid var(--hairline); }
nav.tabbar button { border-radius: var(--radius-round); }
nav.tabbar button.active { background: rgba(123,168,79,.18); }

/* Section chips and pills, rounded off. */
.section-tabs button, .chip, .badge, .premium-badge, .journey-world { border-radius: var(--radius-round); }

/* Verse cards: a page from something kept on a shelf, not a UI panel. */
.verse-card {
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--hearth);
  background: linear-gradient(180deg, var(--parch-2), var(--parch-1));
}

/* Explore tiles pick up the hearth glow on hover. */
.explore-tile { border-radius: var(--radius); }
.explore-tile:hover { border-color: var(--meadow-2); box-shadow: 0 8px 20px rgba(72,99,47,.16); }
.explore-tile-icon { background: rgba(123,168,79,.14); color: var(--meadow-deep); }

/* --- Guided breathing ------------------------------------------------------ */
.breathe-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.breathe-card {
  text-align: left; font: inherit; color: var(--ink); cursor: pointer; padding: 14px;
  background: var(--parch-1); border: 1px solid var(--hairline-soft);
  border-radius: var(--radius); transition: transform .14s ease, box-shadow .14s ease;
}
.breathe-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(72,99,47,.16); }
.breathe-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.breathe-card-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: .98rem; }
.breathe-card-rate { font-size: .7rem; opacity: .6; white-space: nowrap; }
.breathe-card-tag { font-size: .8rem; opacity: .75; margin-top: 2px; }
/* A little diagram of the pattern: bar widths are the phase lengths. */
.breathe-card-shape { display: flex; gap: 3px; margin-top: 10px; height: 18px; }
.bp { display: flex; align-items: center; justify-content: center; border-radius: 6px;
      font-size: .6rem; color: #fdf8ea; }
.bp-in { background: var(--meadow); }
.bp-hold { background: var(--brass); }
.bp-out { background: var(--meadow-deep); }

.breathe-stage { text-align: center; }
.breathe-title { font-family: 'Cinzel', serif; margin: 8px 0 2px; }
.breathe-sub { font-size: .84rem; max-width: 44ch; margin: 0 auto 6px; line-height: 1.5; }
.breathe-orb-wrap { display: flex; align-items: center; justify-content: center;
                    height: 300px; margin: 4px 0; }
.breathe-orb {
  width: 210px; height: 210px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 34% 30%, var(--hearth-soft), var(--meadow-2) 62%, var(--meadow-deep));
  box-shadow: 0 0 0 10px rgba(123,168,79,.13), 0 0 60px rgba(217,154,63,.34),
              inset 0 -12px 30px rgba(72,99,47,.4);
  color: #fdf8ea; will-change: transform;
}
.breathe-orb.hold { box-shadow: 0 0 0 14px rgba(176,141,70,.18), 0 0 70px rgba(217,154,63,.42),
                                inset 0 -12px 30px rgba(72,99,47,.4); }
.breathe-orb-inner { text-align: center; }
.breathe-phase { font-family: 'Cinzel', serif; font-size: 1.12rem; font-weight: 700;
                 text-shadow: 0 1px 3px rgba(45,32,20,.4); }
.breathe-count { font-size: 2.1rem; font-weight: 700; line-height: 1.1;
                 font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px rgba(45,32,20,.45); }
.breathe-meta { display: flex; justify-content: center; gap: 22px; font-size: .82rem;
                opacity: .7; font-variant-numeric: tabular-nums; }
.breathe-controls { margin: 14px 0 6px; }
.breathe-controls .primary { min-width: 180px; }
.breathe-verse { text-align: left; margin-top: 14px; }

@media (max-width: 420px) {
  .breathe-orb-wrap { height: 250px; }
  .breathe-orb { width: 175px; height: 175px; }
}


/* ---------------------------------------------------------------------------
   Shire: specificity corrections.
   The base sheet styles buttons as `button.primary` and re-declares --radius in
   a later :root, both of which outrank the plain `.primary` and earlier :root
   used above. These rules match that specificity so the theme actually lands
   rather than only appearing to.
   --------------------------------------------------------------------------- */
:root {
  --radius: 20px;          /* round doors, restated after the later override */
  --radius-sm: 14px;
  --radius-round: 999px;
}

button.primary {
  background: linear-gradient(180deg, var(--meadow-2), var(--meadow));
  border: 1px solid var(--meadow-deep);
  color: #fdf8ea;
  border-radius: var(--radius-round);
  font-family: 'Cinzel', serif;
  box-shadow: 0 2px 0 var(--meadow-deep), 0 7px 18px rgba(72,99,47,.26);
}
button.primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 2px 0 var(--meadow-deep), 0 9px 22px rgba(72,99,47,.32);
}
button.primary:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--meadow-deep); }

button.follow-btn, button.start-stop-btn { border-radius: var(--radius-round); }
button.ghost { border-radius: var(--radius-sm); }

/* The hearth-gold accents the old theme spent on emerald. */
.card { border-radius: var(--radius); }
.breathe-card { border-radius: var(--radius); }


/* ---------------------------------------------------------------------------
   Modern pass.
   Same Shire light — warm oat, meadow green, hearth amber — executed the way a
   current app is built: a clean sans for interface text, generous space, one
   hairline instead of a heavy shadow, and restraint about ornament. Serif is
   kept for the two places it earns its keep: the brand, and scripture.
   Rules here match the base sheet's specificity (`button.primary`, `header.topbar`)
   because plain class selectors lose to it.
   --------------------------------------------------------------------------- */

:root {
  --ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Cinzel', Georgia, serif;
  --reading: 'Spectral', Georgia, serif;
  --line: rgba(51,37,26,.10);      /* the one hairline used everywhere */
  --line-strong: rgba(51,37,26,.16);
  --lift: 0 1px 2px rgba(51,37,26,.05), 0 6px 20px rgba(51,37,26,.07);
  --lift-hover: 0 2px 4px rgba(51,37,26,.06), 0 12px 30px rgba(51,37,26,.10);
  --space: 16px;
}

body {
  font-family: var(--ui);
  font-size: 15.5px;
  line-height: 1.55;
  letter-spacing: -0.006em;         /* modern sans wants a touch of negative tracking */
  -webkit-font-smoothing: antialiased;
}

/* The page grain was doing too much work. Keep a hint of warmth, drop the fuzz. */
body { background-blend-mode: normal; }
body::before { content: none; }

h1, h2, h3 { font-family: var(--display); letter-spacing: .01em; line-height: 1.25; }
h2 { font-size: 1.22rem; margin: 0 0 10px; }
h3 { font-size: 1rem; }
.muted { color: var(--muted); }

/* Scripture keeps the serif — it should read like a book, not like chrome. */
.verse-text, .verse-card .verse-text, .journey-wp-narrative, .breathe-sub { font-family: var(--reading); }

/* The reading space should feel quiet, intentional, and clearly separate from
   public discussion. Its progress indicator is orientation, never a streak. */
.scripture-practice { margin-bottom: 14px; border-color: color-mix(in srgb, var(--accent) 27%, transparent); }
.practice-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.practice-kicker, .practice-focus { font-size:.7rem; letter-spacing:.1em; font-weight:800; color:var(--accent); }
.scripture-practice h3 { margin:3px 0 5px; }
.scripture-practice p { margin:7px 0; }
.practice-count { border-radius:999px; padding:5px 9px; background:rgba(231,126,72,.13); font-size:.76rem; font-weight:700; white-space:nowrap; }
.practice-progress { height:6px; overflow:hidden; background:rgba(21,38,55,.10); border-radius:99px; margin:12px 0; }
.practice-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),#e7ba68); transition:width .3s ease; }
.practice-day { padding:13px; border-radius:14px; background:linear-gradient(135deg,rgba(255,255,255,.74),rgba(235,201,129,.16)); }
.practice-day .verse-ref { margin-top:8px; }
.practice-day .verse-text { font-size:1.04rem; line-height:1.55; }
.practice-prompt { font-family:var(--reading); font-style:italic; }
.practice-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
.practice-rest { color:var(--muted); }

.admin-moderation-actions { display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; align-self:center; }
.admin-moderation-actions .ghost { padding:5px 8px; font-size:.76rem; }
@media (max-width: 520px) { .admin-moderation-actions { justify-content:flex-start; margin-top:8px; } }

/* --- surfaces --------------------------------------------------------------
   One hairline and a soft lift, rather than layered borders and hard shadow. */
.card, .card.glass {
  background: var(--parch-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: var(--space);
  backdrop-filter: none;
}
.card + .card { margin-top: 12px; }

/* --- top bar ---------------------------------------------------------------
   Search sits to the left of the bell; they were stacking because this was
   never a flex row. */
#topbar-right { display: flex; align-items: center; gap: 8px; }

header.topbar {
  background: var(--walnut-1);
  border-bottom: 1px solid rgba(0,0,0,.25);
  box-shadow: none;
  padding: 10px 16px;
}
header.topbar::after { display: none; }
header.topbar .brand { font-family: var(--display); letter-spacing: .04em; }

.topbar-icon-btn, .notif-bell {
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--parch-2);
  transition: background .16s ease, transform .16s ease;
}
.topbar-icon-btn:hover, .notif-bell:hover { background: rgba(255,255,255,.18); }
.topbar-icon-btn:active, .notif-bell:active { transform: scale(.94); }
.topbar-icon-btn svg, .notif-bell svg { width: 18px; height: 18px; }

/* Top-bar actions are primary touch targets: give each icon a larger, clearer
   home without changing the compact header layout. */
#topbar-right { gap: 10px; }
#topbar-right .topbar-icon-btn,
#topbar-right .notif-bell { width: 44px; height: 44px; }
#topbar-right .topbar-icon-btn svg,
#topbar-right .notif-bell svg { width: 23px; height: 23px; stroke-width: 1.8; }
#topbar-right .notif-badge { top: -4px; right: -4px; min-width: 19px; height: 19px; font-size: .68rem; }

/* iOS-inspired controls across the app: soft raised surfaces, generous hit
   areas, quiet borders, and a clear pressed state for every choice. */
button, .btn, .primary, .ghost, .follow-btn, select, input, textarea, .input {
  -webkit-tap-highlight-color: transparent;
}
button, .btn, .primary, .ghost, .follow-btn { transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; }
button:not(:disabled):active, .btn:not(:disabled):active, .primary:not(:disabled):active, .ghost:not(:disabled):active, .follow-btn:not(:disabled):active { transform: scale(.975); }
input, select, textarea, .input {
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(51,37,26,.13);
  background: rgba(255,252,242,.82);
  color: var(--ink);
  box-shadow: inset 0 1px 1px rgba(51,37,26,.035), 0 1px 1px rgba(255,255,255,.5);
  padding: 11px 13px;
  font-family: var(--ui);
  font-size: .92rem;
}
select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 19px, calc(100% - 12px) 19px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
input::placeholder, textarea::placeholder { color: rgba(97,80,60,.58); }
input:focus, select:focus, textarea:focus, .input:focus { border-color: rgba(123,168,79,.72); box-shadow: 0 0 0 4px rgba(123,168,79,.14), inset 0 1px 1px rgba(51,37,26,.035); }
button.primary { border-radius: 15px; min-height: 44px; }
button.ghost { border-radius: 14px; min-height: 42px; background: rgba(255,252,242,.72); border-color: rgba(51,37,26,.12); box-shadow: 0 1px 2px rgba(51,37,26,.04); }
button.ghost:hover { box-shadow: 0 5px 14px rgba(51,37,26,.09); }
.card, .card.glass { border-radius: 22px; box-shadow: 0 1px 2px rgba(51,37,26,.04), 0 10px 28px rgba(51,37,26,.07); }
.section-tabs, .section-tabs-scroll, .profile-nav-tabs { padding: 4px; border-radius: 16px; background: rgba(51,37,26,.055); }
.section-tabs button, .section-tabs-scroll button, .profile-nav-tab { min-height: 40px; border: 0; border-radius: 12px; background: transparent; }
.section-tabs button.active, .section-tabs-scroll button.active, .profile-nav-tab.active { background: var(--parch-2); color: var(--ink); box-shadow: 0 3px 10px rgba(51,37,26,.10); }
.switch { width: 50px; height: 30px; }
.slider:before { height: 22px; width: 22px; left: 3px; bottom: 3px; }
input:checked + .slider:before { transform: translateX(20px); }
.toggle-row { min-height: 52px; }

/* --- tab bar --------------------------------------------------------------- */
nav.tabbar {
  background: var(--walnut-1);
  border-top: 1px solid rgba(0,0,0,.25);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
nav.tabbar button {
  font-family: var(--ui); font-size: .68rem; font-weight: 500;
  letter-spacing: .01em; color: rgba(253,248,234,.62);
  border-radius: 14px; padding: 6px 4px; transition: color .16s ease, background .16s ease;
}
nav.tabbar button .icon svg { width: 21px; height: 21px; }
nav.tabbar button.active { color: #fdf8ea; background: rgba(255,255,255,.10); }

/* --- controls -------------------------------------------------------------- */
button, .btn, input, select, textarea, .input { font-family: var(--ui); }

button.primary {
  font-family: var(--ui); font-weight: 600; font-size: .92rem;
  letter-spacing: 0; padding: 12px 22px;
  background: var(--meadow); border: 0; color: #fdf8ea;
  box-shadow: 0 1px 2px rgba(72,99,47,.22), 0 6px 16px rgba(72,99,47,.20);
  transition: background .16s ease, box-shadow .16s ease, transform .12s ease;
}
button.primary:hover { background: var(--meadow-2); box-shadow: 0 2px 4px rgba(72,99,47,.24), 0 10px 24px rgba(72,99,47,.24); }
button.primary:active { transform: translateY(1px); }

button.ghost {
  font-family: var(--ui); font-weight: 500; font-size: .86rem;
  background: var(--parch-2); border: 1px solid var(--line-strong);
  color: var(--ink-soft); border-radius: var(--radius-sm); padding: 9px 14px;
  transition: background .16s ease, border-color .16s ease;
}
button.ghost:hover { background: #fff; border-color: var(--meadow-2); color: var(--ink); }

.input, input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=url], select, textarea {
  background: var(--parch-2); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 11px 13px; color: var(--ink); font-size: .95rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.input:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--meadow-2);
  box-shadow: 0 0 0 3px rgba(123,168,79,.20);
}

/* Section chips: a modern segmented control rather than ornate pills. */
.section-tabs { gap: 6px; }
.section-tabs button {
  font-family: var(--ui); font-size: .82rem; font-weight: 500;
  padding: 7px 14px; border-radius: var(--radius-round);
  background: transparent; border: 1px solid var(--line-strong); color: var(--ink-soft);
}
.section-tabs button.active {
  background: var(--meadow); border-color: var(--meadow); color: #fdf8ea; font-weight: 600;
}

/* --- feed ------------------------------------------------------------------ */
.post-card { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--lift); }
.explore-tile { border: 1px solid var(--line); box-shadow: var(--lift); }
.explore-tile:hover { box-shadow: var(--lift-hover); }
.explore-tile-name, .search-row-title, .breathe-card-name { font-family: var(--ui); font-weight: 600; }
.breathe-card { border: 1px solid var(--line); box-shadow: var(--lift); }
.breathe-card:hover { box-shadow: var(--lift-hover); }
.search-row { border: 1px solid var(--line); }

/* Numbers should read as data: tabular, tight, unfussy. */
.lm-value, .fig-v, .stat-value, .breathe-count, .seg-time {
  font-family: var(--ui); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}

/* Respect a reduced-motion preference across everything added here. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}


/* ---------------------------------------------------------------------------
   XP ring.
   A progress arc around every avatar: how far through the current level you
   are, drawn with a conic gradient so it costs one element and no SVG. The
   tier colour changes at thresholds, so a long-standing account reads as
   different at a glance rather than just being further round the same circle.
   Rings start empty and are filled by a batch lookup — a level is never guessed.
   --------------------------------------------------------------------------- */
.xp-ring {
  --xp-pct: 0%;
  --ring: var(--meadow);
  --track: rgba(51,37,26,.12);
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(var(--ring) 0 var(--xp-pct), var(--track) var(--xp-pct) 100%);
  transition: background .5s ease;
}
/* The gap that turns a filled disc into a ring. */
.xp-ring::before {
  content: ''; position: absolute; inset: 2px;
  border-radius: 50%; background: var(--parch-1);
}
.xp-ring > * { position: relative; z-index: 1; }

.xp-ring[data-tier="new"]    { --ring: var(--silver-0); }
.xp-ring[data-tier="meadow"] { --ring: var(--meadow); }
.xp-ring[data-tier="brass"]  { --ring: var(--brass); }
.xp-ring[data-tier="gold"]   { --ring: var(--gold-2); }
.xp-ring[data-tier="legend"] {
  /* Past level 25 the ring is no longer one colour. */
  background: conic-gradient(from -90deg,
    var(--gold-2) 0 var(--xp-pct), var(--track) var(--xp-pct) 100%);
  box-shadow: 0 0 0 1px rgba(217,171,85,.5), 0 0 14px rgba(217,171,85,.45);
}

/* The level number, sitting where a notch would be on a badge. */
.xp-level {
  position: absolute; z-index: 2; right: -2px; bottom: -2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--meadow); color: #fdf8ea;
  font-family: var(--ui, sans-serif); font-size: .62rem; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1;
  border: 2px solid var(--parch-1);
}
.xp-ring[data-tier="new"]    .xp-level { background: var(--silver-0); color: #33251a; }
.xp-ring[data-tier="brass"]  .xp-level { background: var(--brass); }
.xp-ring[data-tier="gold"]   .xp-level { background: var(--gold-2); color: #33251a; }
.xp-ring[data-tier="legend"] .xp-level { background: linear-gradient(140deg, var(--gold-2), var(--hearth)); color: #33251a; }

/* Small faces in feeds do not need a number, only the arc. */
.xp-ring:has(.avatar-sm) .xp-level { min-width: 14px; height: 14px; font-size: .55rem; border-width: 1.5px; }
.xp-ring:has(.story-avatar) .xp-level { display: none; }

/* On the dark top bar and tab bar the gap must match that surface, not the page. */
header.topbar .xp-ring::before, nav.tabbar .xp-ring::before { background: var(--walnut-1); }


/* Direct messages */
.dm-row { display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:10px 12px;
  border-radius:var(--radius-sm); background:var(--parch-1); border:1px solid var(--line);
  margin-bottom:6px; cursor:pointer; font:inherit; color:var(--ink); }
.dm-row:hover { background:#fff; }
.dm-row.unread .dm-row-name { font-weight:700; }
.dm-row.unread .dm-row-last { color:var(--ink); font-weight:500; }
.dm-row-main { min-width:0; flex:1; display:flex; flex-direction:column; }
.dm-row-top { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.dm-row-name { font-weight:600; font-size:.92rem; }
.dm-row-time { font-size:.72rem; opacity:.55; white-space:nowrap; }
.dm-row-last { font-size:.82rem; opacity:.68; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-unread { min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--meadow);
  color:#fdf8ea; font-size:.68rem; font-weight:700; display:grid; place-items:center; }
.dm-invite { min-height:36px !important; padding:7px 11px !important; font-size:.76rem !important; }
.workout-invite-modal { position:fixed; inset:0; z-index:120; display:grid; place-items:end center; padding:16px; background:rgba(31,23,15,.42); backdrop-filter:blur(8px); }
.workout-invite-sheet { width:min(100%, 460px); max-height:92vh; overflow:auto; margin:0; animation:inviteSheetIn .22s ease both; }
@keyframes inviteSheetIn { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:4px; }
.modal-head h2 { margin:2px 0 10px; }
.modal-close { min-width:40px; padding:5px 10px !important; font-size:1.25rem !important; }
.workout-invite-message { max-width:88%; }
.workout-invite-card { padding:12px 13px; border:1px solid rgba(123,168,79,.3); border-left:3px solid var(--meadow); border-radius:16px; background:linear-gradient(145deg, rgba(255,252,242,.98), rgba(239,242,218,.82)); color:var(--ink); }
.workout-invite-card strong { display:block; font-size:1rem; margin-top:3px; }
.workout-invite-meta { margin-top:4px; color:var(--muted); font-size:.76rem; }
.workout-invite-note { margin-top:8px; font-family:var(--reading); font-size:.86rem; }
.workout-invite-actions { display:flex; gap:7px; margin-top:10px; }
.workout-invite-actions button { min-height:34px; padding:6px 10px; font-size:.76rem; }
.profile-message, .profile-invite { margin-top:8px; }

.dm-head { display:flex; align-items:center; gap:10px; padding:4px 0 10px; border-bottom:1px solid var(--line); }
.dm-head-name { font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-head .back-btn { margin:0; padding:8px 12px; }
.dm-block { font-size:.75rem !important; padding:6px 10px !important; }

.dm-scroll { height:calc(100vh - 290px); min-height:220px; overflow-y:auto; padding:12px 2px; display:flex;
  flex-direction:column; gap:8px; }
.dm-msg { max-width:78%; align-self:flex-start; }
.dm-msg.mine { align-self:flex-end; }
.dm-bubble { padding:9px 13px; border-radius:16px 16px 16px 4px; background:var(--parch-1);
  border:1px solid var(--line); font-size:.92rem; line-height:1.45; word-wrap:break-word; }
.dm-msg.mine .dm-bubble { background:var(--meadow); border-color:var(--meadow); color:#fdf8ea;
  border-radius:16px 16px 4px 16px; }
.dm-meta { font-size:.66rem; opacity:.5; margin-top:3px; padding:0 4px; }
.dm-msg.mine .dm-meta { text-align:right; }

.dm-compose { display:flex; gap:8px; padding-top:10px; border-top:1px solid var(--line); }
.dm-compose .input { flex:1; min-width:0; }
.dm-compose .primary { padding:11px 20px; }
.dm-blocked-note { text-align:center; padding:14px; font-size:.85rem; }
.dm-verse { padding:6px 10px !important; font-size:.74rem !important; }
.verse-share-actions, .verse-dm-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.verse-share-actions .ghost { padding:6px 9px; font-size:.7rem; }
.verse-dm-card { padding:13px 14px; border-radius:16px; background:linear-gradient(145deg,#fffdf4,#eef2da); border:1px solid rgba(123,168,79,.28); border-left:3px solid var(--gold-2); }
.verse-dm-card .verse-ref { margin-top:5px; }
.verse-dm-card .verse-text { margin-top:6px; font-family:var(--reading); line-height:1.45; }
.verse-dm-actions button { min-height:32px; padding:6px 10px; font-size:.72rem; }


/* Publishing a route is opt-in, and the control says why. */
.share-route { margin-top: 12px; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--parch-2); }
.share-route-toggle { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: .9rem; cursor: pointer; }
.share-route-toggle input { width: 17px; height: 17px; accent-color: var(--meadow); }
.share-route-preview:not(:empty) { margin-top: 10px; }
.share-route-preview .route-banner { height: 130px; border-radius: var(--radius-sm); background: var(--parch-1); }
.share-route-note { font-size: .76rem; margin-top: 8px; line-height: 1.45; }


/* ---------------------------------------------------------------------------
   Community strip: one ring, and it means something.

   Two problems came in with the XP ring:

   1. `.story-avatar` is the only avatar that takes its size from its parent
      (width/height 100%). The XP ring wrapper was inserted between it and the
      60px `.story-ring`, so that 100% resolved against a box with no size of
      its own and the face collapsed.

   2. `.story-ring` was already a decorative conic gradient. Now that a ring
      around an avatar carries information -- level progress -- a second purely
      ornamental ring around it is noise competing with the real one.

   So the strip keeps its container for sizing and shadow, drops the ornament,
   and lets the XP ring be the ring.
   --------------------------------------------------------------------------- */
.story-ring {
  background: none;
  box-shadow: none;
  padding: 0;
}
.story-ring .xp-ring {
  width: 100%;
  height: 100%;
  padding: 3px;
  box-shadow: 0 2px 6px rgba(43,30,18,.18);
}
/* The gap that makes it a ring has to match the padding above, or the arc is
   drawn under the face instead of around it. */
.story-ring .xp-ring::before { inset: 3px; }
.story-ring .xp-ring > .story-avatar { width: 100%; height: 100%; }


/* Your own avatar is the one place the badge is really read, so the ring and
   its level are scaled up to match. */
.xp-ring-lg { padding: 4px; }
.xp-ring-lg::before { inset: 3px; }
.xp-ring-lg .xp-level {
  min-width: 23px; height: 23px; font-size: .74rem;
  right: 0; bottom: 0; border-width: 2.5px;
}


/* Held at the start line until GPS is actually usable. */
.live-gps-gate { display:flex; align-items:center; gap:9px; margin-top:10px; padding:10px 12px;
  border-radius: var(--radius-sm); background: rgba(217,154,63,.12);
  border:1px solid rgba(217,154,63,.35); font-size:.84rem; color: var(--ink-soft); }
.gps-spinner { width:14px; height:14px; flex:none; border-radius:50%;
  border:2px solid rgba(217,154,63,.35); border-top-color: var(--hearth);
  animation: gpsSpin .9s linear infinite; }
@keyframes gpsSpin { to { transform: rotate(360deg); } }
button.primary:disabled { opacity:.55; cursor:not-allowed; filter:saturate(.6); }


/* GPS acquisition bar: red while the fix is not usable, green the moment it is,
   then it removes itself. Sits under the top bar and pushes nothing around. */
.gps-bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 7px 14px;
  background: #b3402f; color: #fff;
  font-family: var(--ui, system-ui, sans-serif); font-size: .78rem; font-weight: 600;
  letter-spacing: .01em; text-align: center;
  transform: translateY(-100%);
  transition: transform .3s cubic-bezier(.2,.8,.3,1), background-color .45s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
}
.gps-bar.shown { transform: translateY(0); }
.gps-bar.ready { background: #3f8a3f; }
.gps-bar::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.9); flex: none;
  animation: gpsPulse 1.1s ease-in-out infinite;
}
.gps-bar.ready::before { animation: none; }
@keyframes gpsPulse { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .gps-bar { transition: none; }
  .gps-bar::before { animation: none; }
}


/* Your own training log */
.wlog-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; font:inherit;
  color:var(--ink); cursor:pointer; padding:11px 13px; margin-bottom:6px;
  background:var(--parch-1); border:1px solid var(--line); border-radius:var(--radius-sm);
  transition:transform .12s ease, border-color .12s ease; }
.wlog-row:hover { transform:translateX(2px); border-color:var(--meadow-2); }
.wlog-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.wlog-top { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.wlog-type { font-weight:650; font-size:.94rem; }
.wlog-when { font-size:.74rem; opacity:.6; white-space:nowrap; }
.wlog-stats { font-size:.8rem; opacity:.72; font-variant-numeric:tabular-nums; }
.wlog-flags { display:flex; align-items:center; gap:5px; flex:none; }
.wlog-flag { font-size:.8rem; opacity:.5; }
.wlog-zone { font-size:.66rem; font-weight:700; padding:2px 6px; border-radius:999px;
  background:rgba(0,0,0,.06); }
.wlog-zone.z1{color:#6c8fb3}.wlog-zone.z2{color:#4e9e6a}.wlog-zone.z3{color:#c9a227}
.wlog-zone.z4{color:#d2762c}.wlog-zone.z5{color:#c0392b}

/* One workout in detail */
.wd-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:6px; }
.wd-note { font-size:.9rem; opacity:.8; margin-bottom:10px; }
.wd-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:10px 0 14px; }
.wd-stat { text-align:center; padding:9px 4px; background:var(--parch-2);
  border:1px solid var(--line); border-radius:12px; }
.wd-stat-v { font-size:1.2rem; font-weight:800; font-variant-numeric:tabular-nums; }
.wd-stat-l { font-size:.64rem; text-transform:uppercase; letter-spacing:.07em; opacity:.6; margin-top:2px; }
.wd-route { height:150px; border-radius:var(--radius-sm); background:var(--parch-2); }
.wd-sub { font-size:.9rem; margin:14px 0 6px; }
.wd-none { font-size:.82rem; padding:8px 0; }
.hr-trace { width:100%; height:64px; display:block; }
.hr-trace-scale { display:flex; justify-content:space-between; font-size:.66rem; opacity:.55;
  font-variant-numeric:tabular-nums; }
.zone-bars { margin-top:10px; display:flex; flex-direction:column; gap:4px; }
.zone-bar-row { display:flex; align-items:center; gap:8px; font-size:.76rem; }
.zone-bar-label { width:1.6em; opacity:.6; font-weight:600; }
.zone-bar-track { flex:1; height:8px; border-radius:999px; background:rgba(0,0,0,.07); overflow:hidden; }
.zone-bar-fill { display:block; height:100%; border-radius:999px; }
.zone-bar-fill.z1{background:#6c8fb3}.zone-bar-fill.z2{background:#4e9e6a}.zone-bar-fill.z3{background:#c9a227}
.zone-bar-fill.z4{background:#d2762c}.zone-bar-fill.z5{background:#c0392b}
.zone-bar-val { width:2.6em; text-align:right; opacity:.65; font-variant-numeric:tabular-nums; }
.wd-partners { display:flex; flex-wrap:wrap; gap:6px; }
.wd-partner { font-size:.82rem; background:var(--parch-2); border:1px solid var(--line);
  border-radius:999px; padding:4px 10px; }
.wd-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; }
.wd-actions .danger { color:#a33; }


/* Reading a verse in another translation. */
.yv-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px;
  padding-top:9px; border-top:1px solid var(--line); }
.yv-label { font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; opacity:.6; }
.yv-select { flex:1; min-width:150px; font-size:.8rem; padding:6px 8px;
  border-radius:10px; border:1px solid var(--line-strong); background:var(--parch-2); color:var(--ink); }
.yv-select:disabled { opacity:.55; }
.yv-open { font-size:.76rem; font-weight:600; color:var(--meadow-deep); text-decoration:none;
  white-space:nowrap; }
.yv-open:hover { text-decoration:underline; }
.yv-note { font-size:.72rem; margin-top:5px; min-height:1em; }


/* ---------------------------------------------------------------------------
   The mark.
   Two-tone by design: one half of the ring and the f in the darker tone, the
   other half of the ring and the cross in hearth gold. The tones are variables
   so the same markup works on the dark top bar and on parchment.
   --------------------------------------------------------------------------- */
:root {
  --logo-ink: var(--ink);          /* on light surfaces */
  --logo-gold: var(--gold-2);
}
/* On the dark bar the navy of the original would vanish, so its role is taken
   by the cream the bar already uses for type. */
header.topbar { --logo-ink: var(--parch-2); --logo-gold: var(--hearth-soft); }

header.topbar .brand-mark { display: inline-flex; }
header.topbar .brand-mark-image {
  width: 34px; height: 34px;
  display: block;
  border-radius: 10px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
/* The mark is the brand now; nothing needs to sit beside it. */
header.topbar .brand { gap: 0; }

/* Available to assistive technology, invisible on screen. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

@media (max-width: 420px) {
  header.topbar .brand-mark-image { width: 30px; height: 30px; }
}

/* ---------------------------------------------------------------------------
   The scripture companion.
   Set apart from the human reflections around it, deliberately: a member should
   never be unsure whether they are reading a neighbour or a machine.
   --------------------------------------------------------------------------- */
.companion {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line, rgba(0,0,0,.14));
}
.companion-row { display: flex; gap: 8px; }
.companion-row input { flex: 1; min-width: 0; }
.companion-hint { font-size: .72rem; margin-top: 6px; line-height: 1.35; }

.companion-answer {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--parch-2, #fdf8ea);
  border: 1px solid var(--line, rgba(0,0,0,.10));
  /* The gold edge marks machine-written prose wherever it appears. */
  border-left: 3px solid var(--gold-2, #d9ab55);
}
.companion-answer p { margin: 0; line-height: 1.5; }
.companion-q { font-weight: 600; font-size: .84rem; margin-bottom: 6px; opacity: .75; }

/* A cited cross-reference: real text, fetched, never model-written. */
.companion-ref {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(0,0,0,.035);
}
.companion-ref .verse-ref { font-size: .76rem; letter-spacing: .04em; opacity: .8; }
.companion-ref .verse-text { font-size: .88rem; line-height: 1.45; }
.companion-meta { font-size: .7rem; margin-top: 8px; }

/* The one model-written line on a live session card. */
.moment-note {
  margin-top: 8px;
  padding-left: 9px;
  border-left: 3px solid var(--gold-2, #d9ab55);
  font-size: .86rem;
  line-height: 1.4;
  opacity: .92;
}

/* The heart check: a measurement, presented as one. */
.heart-check { margin-top: 16px; }
.hc-read { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hc-num { font-variant-numeric: tabular-nums; font-size: 1.3rem; font-weight: 600; }

/* A newly issued API key: shown once, selectable, impossible to miss. */
.ak-reveal { margin-bottom: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--parch-2, #fdf8ea); border: 1px solid var(--line, rgba(0,0,0,.12));
  border-left: 3px solid var(--gold-2, #d9ab55); }
.ak-reveal input { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem; }
.ak-reveal-actions { display:flex; gap:8px; align-items:center; }
.ak-reveal-actions input { flex:1; min-width:0; }
.ak-reveal-actions button { flex:0 0 auto; }

/* Profile is a small hub now: the overview stays light, while settings and
   integrations collect the deeper account controls behind one predictable tab row. */
.profile-nav { padding:14px 16px 10px; position:sticky; top:8px; z-index:4; }
.profile-nav-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.profile-nav-heading h2 { margin:2px 0 0; font-size:1.15rem; }
.profile-nav-heading > .muted { text-align:right; font-size:.75rem; }
.eyebrow { color:var(--gold-2, #a77b29); font-size:.65rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.profile-nav-tabs { display:flex; gap:6px; margin-top:12px; overflow:auto; }
.profile-nav-tab { flex:1; min-width:104px; border:0; border-radius:999px; padding:9px 12px; background:rgba(0,0,0,.045); color:var(--muted); font:inherit; font-size:.8rem; font-weight:750; cursor:pointer; }
.profile-nav-tab.active { background:var(--ink, #2d2013); color:var(--parch-2, #fdf8ea); box-shadow:0 5px 14px rgba(43,30,18,.14); }
.profile-panel[hidden] { display:none !important; }
@media (max-width:480px) {
  .profile-nav-heading { display:block; }
  .profile-nav-heading > .muted { text-align:left; margin-top:4px; }
  .profile-nav { top:4px; }
}

/* Start is available on a poor fix, but it should not look like a clean one. */
button.start-degraded { background: var(--hearth, #b8863b); }
.gps-gate-note { display:block; margin-top:3px; font-size:.72rem; opacity:.85; }
/* Store-ready legal pages share the product shell without loading the app. */
.legal-page { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
.legal-page > .ghost { display: inline-block; margin-bottom: 14px; text-decoration: none; }
.legal-page h1 { margin: 4px 0 8px; }
.legal-page h2 { margin: 24px 0 7px; font-size: 1.05rem; }
.legal-page p { line-height: 1.65; }
.settings-danger-zone { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(92,57,31,.18); display: grid; gap: 7px; }
.settings-danger-zone .danger { justify-self: start; color: #9b4037; border-color: rgba(155,64,55,.35); }
.home-composer { margin: 14px 0; }
.composer-heading, .composer-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.composer-spark { color: var(--hearth, #d99a3f); font-size:1.35rem; }
.home-composer textarea { width:100%; resize:vertical; margin:10px 0 8px; }
.feed-switch { display:flex; gap:4px; padding:4px; margin:8px 0 12px; background:rgba(78,58,37,.08); border-radius:12px; }
.feed-switch button { flex:1; border:0; border-radius:9px; padding:8px 10px; background:transparent; color:inherit; cursor:pointer; font:inherit; }
.feed-switch button.active { background:var(--paper,#f6efdf); box-shadow:0 2px 8px rgba(43,30,20,.08); font-weight:700; }
.feed-more-btn { width:100%; margin:12px 0 24px; }
.profile-safety { display:flex; gap:8px; margin:12px 0; flex-wrap:wrap; }
.profile-safety button { font-size:.76rem; }
.weekly-recap-card { border:1px solid rgba(217,154,63,.28); }
.recap-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:14px 0 10px; }
.recap-grid div { padding:9px 6px; border-radius:10px; background:rgba(78,58,37,.07); text-align:center; }
.recap-grid b, .recap-grid span { display:block; }
.recap-grid b { font-size:1.15rem; }
.recap-grid span { color:var(--muted); font-size:.68rem; }
.recap-copy { margin:8px 0; }
.recap-actions { display:flex; align-items:center; gap:10px; }
@media (max-width:420px) { .recap-grid { gap:4px; } .recap-grid b { font-size:1rem; } }
.composer-footer select { flex:1; min-width:0; }
.composer-footer button { white-space:nowrap; }
#home-post-status { min-height:1.1em; margin-top:6px; font-size:.74rem; }
.terms-check { display:flex; gap:10px; align-items:flex-start; margin-top:12px; padding:12px; border:1px solid rgba(45,32,19,.14); border-radius:14px; background:rgba(255,255,255,.38); font-size:.82rem; line-height:1.4; }
.terms-check input { width:20px; height:20px; flex:0 0 auto; margin:0; accent-color:var(--gold,#d9ab55); }
.settings-subsection { margin-top:16px; padding-top:14px; border-top:1px solid rgba(45,32,19,.12); }
.developer-checklist { padding-left:22px; font-size:.84rem; color:var(--muted); }
#developer-verification-card details, #pending-church-card { margin-top:12px; }
#developer-verification-card input:not([type=checkbox]), #developer-verification-card textarea, #pending-church-card input { width:100%; margin-top:8px; }
.verified-mark { display:inline-grid; place-items:center; width:17px; height:17px; margin-left:4px; border-radius:50%; background:#2f6f5d; color:white; font-size:.68rem; font-weight:800; vertical-align:1px; }
.dm-link-warning { margin-top:5px; padding:7px 9px; border-radius:10px; background:#fff0cf; color:#6b4300; font-size:.7rem; line-height:1.35; }
.dm-e2e-tag { font-size:.62rem; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3,#8a7a5e); margin-bottom:3px; opacity:.75; }
.group-pulse-card { overflow:hidden; }
.pulse-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0 10px; }
.pulse-options button { min-height:44px; }
.group-pulse-card > .action-row { align-items:center; justify-content:space-between; }
.group-pulse-item { display:grid; gap:5px; margin-top:10px; padding:12px; border:1px solid rgba(45,32,19,.12); border-radius:14px; background:rgba(255,255,255,.32); }
.group-pulse-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pulse-encourage { justify-self:start; margin-top:3px; padding:7px 10px; }
@media (max-width:430px) { .pulse-options { grid-template-columns:1fr; } .group-pulse-card > .action-row { align-items:flex-start; flex-direction:column; } }


/* ---------------------------------------------------------------------------
   FF polish slice 2026-08: responsive product framing and interaction states.
   Kept at the end intentionally so the new system wins over legacy overrides.
   --------------------------------------------------------------------------- */
:root {
  --ff-space-1: 4px;
  --ff-space-2: 8px;
  --ff-space-3: 12px;
  --ff-space-4: 16px;
  --ff-space-5: 20px;
  --ff-space-6: 24px;
  --ff-space-7: 32px;
  --ff-content-max: 1180px;
  --ff-reading-max: 720px;
  --ff-focus: #255f46;
  --ff-focus-ring: 0 0 0 3px rgba(37,95,70,.24);
  --ff-ease: cubic-bezier(.22,.61,.36,1);
}

body {
  background-attachment: scroll;
  text-rendering: optimizeLegibility;
}

#app {
  width: 100%;
  max-width: var(--ff-content-max);
  min-height: 100svh;
  background: color-mix(in srgb, var(--parch-0) 92%, transparent);
}

main {
  width: 100%;
  max-width: var(--ff-reading-max);
  margin-inline: auto;
  padding: clamp(16px, 3vw, 28px) clamp(14px, 3vw, 28px) 28px;
}

header.topbar {
  width: 100%;
  padding-inline: max(18px, calc((100% - var(--ff-content-max)) / 2 + 20px));
}

nav.tabbar {
  width: min(100%, var(--ff-content-max));
  max-width: var(--ff-content-max);
  padding-inline: max(8px, calc((100% - var(--ff-content-max)) / 2 + 8px));
}

button, .btn, .primary, .ghost, .follow-btn, input, select, textarea, .input {
  min-height: 44px;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ff-focus);
  outline-offset: 3px;
  box-shadow: var(--ff-focus-ring);
}

nav.tabbar button {
  min-height: 52px;
  padding-block: 8px 7px;
  font-family: var(--ui, Inter, system-ui, sans-serif);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .01em;
  transition: color .18s var(--ff-ease), background-color .18s var(--ff-ease), transform .18s var(--ff-ease);
}

nav.tabbar button:hover { color: var(--parch-2); background: rgba(255,255,255,.08); }
nav.tabbar button:active { transform: scale(.97); }
nav.tabbar button.active,
nav.tabbar button[aria-current="page"] {
  color: var(--parch-2);
  background: linear-gradient(180deg, rgba(217,171,85,.18), rgba(111,143,67,.14));
  box-shadow: inset 0 0 0 1px rgba(240,196,119,.2), 0 4px 12px rgba(0,0,0,.14);
}
nav.tabbar button .icon { display: grid; place-items: center; min-height: 24px; }

.card, .home-action, .explore-tile {
  transition: transform .22s var(--ff-ease), box-shadow .22s var(--ff-ease), border-color .22s ease;
}

@media (min-width: 900px) {
  #app {
    margin-block: 20px;
    min-height: calc(100svh - 40px);
    border: 1px solid rgba(74,58,40,.12);
    border-radius: 28px;
    overflow: clip;
    box-shadow: 0 24px 80px rgba(43,30,18,.18);
  }
  header.topbar { position: sticky; }
  main { min-height: calc(100svh - 164px); }
  nav.tabbar { position: sticky; left: auto; bottom: 0; transform: none; margin-inline: auto; }
}

@media (max-width: 899px) {
  #app { max-width: 680px; }
  main { max-width: 680px; }
}

@media (max-width: 480px) {
  #app { border-radius: 0; }
  main { padding-inline: 14px; }
  header.topbar { padding-inline: 14px; }
  nav.tabbar { padding-inline: 6px; }
}

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

@media (forced-colors: active) {
  button, a, input, select, textarea { forced-color-adjust: auto; }
  nav.tabbar button[aria-current="page"] { outline: 2px solid CanvasText; }
}


/* Creator provenance in the reels overlay. Originals are a product tier, not
   an indistinguishable source mixed into the catalog. */
.reel-original-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 6px 0 4px;
  padding: 4px 8px;
  border: 1px solid rgba(240,196,119,.48);
  border-radius: 999px;
  background: rgba(43,30,18,.72);
  color: var(--hearth-soft, #f0c477);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.reel-external-link {
  display: inline-flex;
  width: fit-content;
  margin-top: 7px;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  color: #fff;
  font-size: .7rem;
  font-weight: 650;
  text-decoration: none;
}
.reel-external-link:hover { background: rgba(0,0,0,.48); }
/* ---- Moments (24-hour ephemeral rail + viewer) ---- */
.stories-rail { display:flex; gap:12px; overflow-x:auto; padding:12px 2px 4px; margin-bottom:4px; scrollbar-width:none; }
.stories-rail::-webkit-scrollbar { display:none; }
.story-bubble { flex:0 0 auto; background:none; border:0; padding:0; display:grid; gap:5px; justify-items:center; cursor:pointer; width:66px; }
.story-ring { display:grid; place-items:center; width:62px; height:62px; border-radius:50%;
  background:conic-gradient(from 210deg, var(--hearth), var(--brass), var(--meadow-2), var(--hearth)); padding:3px; }
.story-ring-seen { background:var(--parch-sink); }
.story-ring-new { background:var(--parch-sink); }
.story-ring > * { width:56px; height:56px; border-radius:50%; border:2px solid var(--parch-1); background:var(--parch-2); object-fit:cover; }
.story-avatar { font-size:1.1rem; }
.story-plus { display:grid; place-items:center; width:56px; height:56px; border-radius:50%; border:2px dashed var(--brass);
  background:var(--parch-2); color:var(--brass); font-size:1.5rem; line-height:1; }
.story-name { font-size:.68rem; color:var(--ink-soft); max-width:66px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.story-viewer { position:fixed; inset:0; z-index:9000; background:#120d07; display:grid; place-items:center; }
.story-stage { position:relative; width:100%; height:100%; max-width:520px; display:grid;
  grid-template-rows:auto auto 1fr auto auto auto; background:linear-gradient(160deg,#2b1e14,#120d07); overflow:hidden; }
.story-progress { display:flex; gap:4px; padding:10px 12px 0; }
.story-progress-bar { flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.28); overflow:hidden; }
.story-progress-bar i { display:block; height:100%; background:#fff; width:0; }
@keyframes storyFill { from { width:0 } to { width:100% } }
.story-topbar { display:flex; align-items:center; gap:9px; padding:10px 12px; color:#fdf8ea; }
.story-topbar .avatar-sm, .story-topbar img { width:32px; height:32px; border-radius:50%; }
.story-topbar-name { flex:1; font-weight:600; font-size:.86rem; display:grid; }
.story-topbar-name span { font-weight:400; font-size:.7rem; opacity:.7; }
.story-x { background:none; border:0; color:#fdf8ea; font-size:1.05rem; cursor:pointer; padding:4px 6px; }
.story-photo { grid-row:3; width:100%; height:100%; object-fit:contain; }
.story-text { grid-row:3; align-self:center; padding:24px; color:#fdf8ea; font-size:1.2rem; line-height:1.5; text-align:center; }
.story-text-over { grid-row:3; align-self:end; font-size:1rem; text-align:left;
  background:linear-gradient(0deg,rgba(18,13,7,.85),transparent); padding:40px 18px 18px; }
.story-nav { position:absolute; top:56px; bottom:128px; width:32%; cursor:pointer; }
.story-nav-back { left:0; } .story-nav-fwd { right:0; }
.story-reactions { grid-row:4; display:flex; gap:8px; justify-content:center; padding:14px; position:relative; z-index:2; }
.story-react { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:999px;
  font-size:1.25rem; padding:6px 11px; cursor:pointer; transition:transform .12s; }
.story-react:hover { transform:scale(1.12); }
.story-react.active { background:rgba(217,171,85,.4); border-color:var(--hearth); }
.story-reactions-count { color:#fdf8ea; font-size:.8rem; opacity:.8; }
.story-reply { grid-row:5; position:relative; z-index:3; display:flex; gap:7px; padding:0 14px 4px; }
.story-reply input { min-width:0; flex:1; border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:10px 12px; color:#fff; background:rgba(0,0,0,.28); font:inherit; }
.story-reply input::placeholder { color:rgba(255,255,255,.7); }
.story-reply button { border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:8px 12px; color:#25180f; background:#f7e2a5; font:inherit; font-weight:800; cursor:pointer; }
.story-reply button:disabled { opacity:.65; cursor:wait; }
.story-reply-status { grid-row:6; min-height:18px; padding:0 16px 8px; color:rgba(255,255,255,.8); font-size:.72rem; text-align:center; position:relative; z-index:3; }
.story-reply-dm-context { margin:0 0 5px; color:var(--muted); font-size:.7rem; line-height:1.35; }

.story-composer-wrap { position:fixed; inset:0; z-index:9000; background:rgba(18,13,7,.6); display:grid; place-items:center; padding:16px; }
.story-composer { width:100%; max-width:420px; }
.story-composer textarea { width:100%; resize:vertical; }
.story-composer-row { display:flex; gap:8px; align-items:center; margin-top:8px; }
.story-composer-row select { flex:1; }

/* ---- Standalone composer ---- */
.composer-card { padding:12px; }
.composer-prompt { display:flex; align-items:center; gap:10px; width:100%; background:none; border:0; padding:6px 2px; cursor:pointer;
  text-align:left; color:var(--muted); font-size:.9rem; }
.composer-prompt > *:first-child { flex:0 0 auto; }
.composer-card textarea { width:100%; resize:vertical; }
.composer-row { display:flex; gap:8px; align-items:center; margin-top:8px; }
.composer-row select { flex:1; }
.composer-cats { display:flex; flex-wrap:wrap; gap:10px; font-size:.8rem; }
.composer-cats label { display:flex; align-items:center; gap:4px; }
.profile-safety-note { font-size:.72rem; flex-basis:100%; margin-top:6px; line-height:1.45; }

/* ---- Topics ---- */
.hashtag { color:var(--brass); text-decoration:none; font-weight:600; }
.hashtag:hover { text-decoration:underline; }
.tag-rail { display:flex; flex-wrap:wrap; gap:8px; }
.tag-chip { background:var(--parch-2); border:1px solid rgba(45,32,19,.14); border-radius:999px;
  padding:6px 12px; font-size:.8rem; cursor:pointer; color:var(--ink); }
.tag-chip:hover { border-color:var(--brass); }

/* ---- Bright, calm momentum ---------------------------------------------
   Colour communicates meaning and progress; it is never used to manufacture
   urgency. These cues remain subtle, respect reduced-motion preferences, and
   make the next useful action easier to spot. */
:root {
  --sky: #5c9ed8;
  --sky-soft: #dceefb;
  --berry: #b96073;
  --berry-soft: #fae1e6;
  --sun: #e9b94e;
  --sun-soft: #fff0bd;
  --mint: #72b98d;
  --mint-soft: #dcf4e4;
}

main > * { animation: ff-arrive .26s ease both; }
@keyframes ff-arrive { from { opacity:.01; transform:translateY(5px); } to { opacity:1; transform:none; } }

/* A clean, consistent interaction language: the important next action gets
   colour, secondary actions stay calm, and keyboard focus is never hidden. */
button.primary, .follow-btn, .start-stop-btn.start {
  background: linear-gradient(135deg, var(--meadow), var(--mint));
  border-color: rgba(72,99,47,.28);
}
button.primary:hover, .follow-btn:hover { background: linear-gradient(135deg, var(--meadow-2), var(--mint)); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(92,158,216,.55); outline-offset: 3px;
}

/* Colour-coded but readable discovery tiles keep a dense Explore screen
   scannable at a glance. The cycle works regardless of tile order. */
.explore-tile:nth-child(4n+1), .home-explore-tile:nth-child(4n+1) { background:linear-gradient(145deg,var(--mint-soft),var(--parch-2) 72%); border-color:rgba(114,185,141,.36); }
.explore-tile:nth-child(4n+2), .home-explore-tile:nth-child(4n+2) { background:linear-gradient(145deg,var(--sky-soft),var(--parch-2) 72%); border-color:rgba(92,158,216,.34); }
.explore-tile:nth-child(4n+3), .home-explore-tile:nth-child(4n+3) { background:linear-gradient(145deg,var(--sun-soft),var(--parch-2) 72%); border-color:rgba(233,185,78,.40); }
.explore-tile:nth-child(4n+4), .home-explore-tile:nth-child(4n+4) { background:linear-gradient(145deg,var(--berry-soft),var(--parch-2) 72%); border-color:rgba(185,96,115,.30); }
.explore-tile:nth-child(4n+2) .explore-tile-icon { background:rgba(92,158,216,.16); color:#397db8; }
.explore-tile:nth-child(4n+3) .explore-tile-icon { background:rgba(233,185,78,.19); color:#9d7315; }
.explore-tile:nth-child(4n+4) .explore-tile-icon { background:rgba(185,96,115,.14); color:#944255; }

/* Small, earned-feeling feedback for real states: completed, saved, and
   active—not random prompts or infinite reward loops. */
.badge, .premium-badge, .reel-original-badge { box-shadow:0 2px 8px rgba(51,37,26,.10); }
.action-btn.liked { color:var(--berry); }
.action-btn.saved { color:#397a57; background:var(--mint-soft); border-radius:999px; padding-inline:9px; }
.stat-tile { position:relative; overflow:hidden; background:linear-gradient(155deg,rgba(255,255,255,.78),var(--parch-2)); }
.stat-tile:nth-child(3n+1)::after, .stat:nth-child(3n+1)::after { background:var(--mint); }
.stat-tile:nth-child(3n+2)::after, .stat:nth-child(3n+2)::after { background:var(--sky); }
.stat-tile:nth-child(3n)::after, .stat:nth-child(3n)::after { background:var(--sun); }
.stat-tile::after, .stat::after { content:''; position:absolute; inset:auto 0 0; height:3px; opacity:.72; }

/* The bottom navigation is the site's constant decision point. A brighter
   active capsule, clear labels, and a restrained halo make it effortless to
   orient without adding distracting animation. */
nav.tabbar button { min-height:51px; color:rgba(253,248,234,.72); }
nav.tabbar button.active { color:#fffdf4; background:linear-gradient(135deg,rgba(114,185,141,.48),rgba(92,158,216,.34)); box-shadow:0 2px 10px rgba(0,0,0,.18); }
nav.tabbar button.active .icon svg { filter:drop-shadow(0 0 5px rgba(255,255,255,.5)); }

.section-tabs button.active, .section-tabs-scroll button.active, .profile-nav-tab.active {
  background:linear-gradient(135deg,var(--mint-soft),var(--sky-soft)); border-color:rgba(92,158,216,.24); color:var(--ink);
}
.journey-card, .journey-world, .reel-card { box-shadow:0 10px 24px rgba(51,37,26,.10); }

@media (prefers-reduced-motion: reduce) { main > * { animation:none; } }

/* Mobile install shortcut. It is a quiet utility in the header, then a clear,
   dismissible explanation when a person asks for it—not an automatic prompt. */
.a2hs-button svg { width:20px; height:20px; }
.a2hs-sheet-wrap { position:fixed; z-index:10020; inset:0; display:grid; place-items:end center; padding:16px; }
.a2hs-backdrop { position:absolute; inset:0; background:rgba(28,20,13,.56); backdrop-filter:blur(4px); }
.a2hs-sheet { position:relative; width:min(100%,460px); padding:22px; border:1px solid rgba(255,255,255,.48); border-radius:24px; color:var(--ink); background:linear-gradient(150deg,var(--parch-2),var(--sky-soft)); box-shadow:0 24px 64px rgba(25,17,10,.34); }
.a2hs-sheet h2 { margin:10px 0 4px; }
.a2hs-sheet p { margin:0; color:var(--ink-soft); line-height:1.48; }
.a2hs-app-icon { width:52px; height:52px; overflow:hidden; border-radius:14px; box-shadow:0 5px 14px rgba(43,30,18,.18); }
.a2hs-app-icon img { width:100%; height:100%; display:block; }
.a2hs-close { position:absolute; top:12px; right:12px; min-width:38px; min-height:38px; padding:0; font-size:1.25rem; }
.a2hs-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }

/* A single, explicit encouragement action—not a score chase. */
.home-workout-card { flex:0 0 152px; display:flex; flex-direction:column; gap:6px; }
.home-workout-card .home-explore-tile { flex:1; width:100%; }
.workout-kudos { min-height:34px; border:1px solid rgba(72,99,47,.20); border-radius:999px; color:var(--meadow-deep); background:var(--mint-soft); font:600 .72rem var(--ui,inherit); cursor:pointer; transition:transform .16s ease,background .16s ease,box-shadow .16s ease; }
.workout-kudos:hover { transform:translateY(-1px); box-shadow:0 4px 10px rgba(72,99,47,.16); }
.workout-kudos.given { color:#7f5330; background:var(--sun-soft); border-color:rgba(233,185,78,.44); }
.workout-encourage { min-height:32px; border:1px solid rgba(43,89,100,.18); border-radius:999px; color:var(--ink); background:rgba(255,255,255,.62); font:600 .7rem var(--ui,inherit); cursor:pointer; transition:transform .16s ease,background .16s ease; }
.workout-encourage:hover { transform:translateY(-1px); background:var(--sky-soft); }
.workout-activity-link { min-height:30px; border:0; padding:4px 8px; color:var(--meadow-deep); background:transparent; font:600 .7rem var(--ui,inherit); text-decoration:underline; cursor:pointer; }
.workout-encouragement-sheet { padding:18px; }
.workout-encouragement-sheet p { margin:0 0 12px; font-size:.83rem; line-height:1.45; }
.workout-encouragement-choices { display:grid; gap:8px; }
.workout-encouragement-choice { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 13px; border:1px solid rgba(72,99,47,.22); border-radius:14px; color:var(--ink); background:var(--mint-soft); text-align:left; font:inherit; cursor:pointer; }
.workout-encouragement-choice:hover { border-color:rgba(72,99,47,.48); background:#e3efdf; }
.workout-encouragement-choice:disabled { opacity:.58; cursor:wait; }
.workout-encouragement-choice span { color:var(--meadow-deep); font-size:.78rem; font-weight:700; white-space:nowrap; }
#workout-encouragement-status { min-height:1.25em; margin-top:10px; font-size:.8rem; }
.shared-workout-detail { padding:16px; }
.shared-workout-author { display:flex; align-items:center; gap:9px; width:100%; margin:0 0 12px; padding:0; border:0; color:var(--ink); background:transparent; text-align:left; font:inherit; cursor:pointer; }
.shared-workout-author span { display:grid; gap:2px; }
.shared-workout-author small { color:var(--muted); font-size:.76rem; }
.shared-workout-audience { padding:4px 8px; border-radius:999px; color:var(--meadow-deep); background:var(--mint-soft); font-size:.7rem; font-weight:700; }
.shared-workout-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; }
.shared-workout-privacy { margin:12px 0 0; color:var(--muted); font-size:.73rem; line-height:1.4; }
.verse-share-actions [data-verse-save].saved, #verse-save-detail.saved, .saved-verse-actions .saved { color:#7f5330; background:var(--sun-soft); border-color:rgba(233,185,78,.44); }
.saved-verse-card { padding:14px; }
.saved-verse-meta { display:flex; gap:8px; justify-content:space-between; margin-top:10px; color:var(--muted); font-size:.73rem; }
.saved-verse-actions { display:flex; gap:8px; margin-top:10px; }
.offline-scripture-note { margin:0 0 10px; padding:9px 11px; border:1px solid rgba(91,126,100,.28); border-radius:12px; color:var(--forest); background:rgba(224,238,220,.7); font-size:.78rem; line-height:1.4; }
.offline-verse-reading .offline-scripture-note { margin-bottom:14px; }
.group-announce { border-left:3px solid var(--hearth); }
.group-announce textarea { width:100%; resize:vertical; }