/* Imani PWA shell — dark-first, matching the blueprint palette */
:root{
  --paper:#12151c; --raised:#191d26; --ink:#e8e9e2; --ink-soft:#a3a8b8;
  --line:#2b3040; --accent:#4fb0ac; --accent-deep:#1f6e77; --warn:#d9a45c;
  /* Fixed bottom tab bar's own height + safe area, referenced by anything
     else fixed to the bottom (the watch card's content, its action rail)
     so nothing sits underneath it unreadably. */
  --bottomnav-h:calc(56px + env(safe-area-inset-bottom, 0px));
}
@media (prefers-color-scheme: light){
  :root{
    --paper:#f4f5f0; --raised:#ffffff; --ink:#1c2130; --ink-soft:#545a6b;
    --line:#dadcd2; --accent:#1f6e77; --accent-deep:#1f6e77; --warn:#a06b1f;
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:system-ui, "Segoe UI", Roboto, sans-serif; line-height:1.55;
}
.top{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--line);
}
.brand{display:flex; flex-direction:column; align-items:center; gap:2px; font-weight:700; line-height:1.1}
.brand img{border-radius:7px}
.brand span{font-size:.62rem; letter-spacing:.04em; color:var(--ink-soft); font-weight:600; text-transform:uppercase}
.credits{
  font-size:.78rem; color:var(--ink-soft); background:var(--raised); border:1px solid var(--line);
  border-radius:999px; padding:5px 9px; cursor:pointer; font-family:inherit;
  font-variant-numeric:tabular-nums;
}
.credits:hover{border-color:var(--accent); color:var(--ink)}
/* Low balance is a real "you're about to be blocked" moment, not a passive
   number — the badge itself should say so wherever it's visible, not wait
   for the user to hit a paywall to find out (2026-08-30). */
.credits.low{color:var(--warn); border-color:var(--warn); font-weight:700}
.topup-packages{display:flex; flex-direction:column; gap:10px; margin-bottom:8px}
.topup-pkg{
  display:flex; justify-content:space-between; align-items:center; width:100%;
  background:var(--raised); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; cursor:pointer; color:var(--ink); font-family:inherit; text-align:left;
}
.topup-pkg:hover{border-color:var(--accent)}
.topup-pkg.selected{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--raised))}
.topup-pkg .amount{font-weight:700}
.topup-pkg .credits-amt{color:var(--ink-soft); font-size:.85rem}
.top-right{display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.lang-select{
  width:auto; background:var(--raised); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:6px 8px; font-size:.85rem;
}
.icon-btn{
  width:auto; background:var(--raised); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:6px 9px; font-size:1rem; line-height:1; cursor:pointer;
}
.icon-btn:hover{border-color:var(--accent)}
a.icon-btn{text-decoration:none; display:inline-flex; align-items:center; justify-content:center}
/* A heading with a help icon parked at its right edge — Create and Discover,
   the two views a first-time user actually needs guidance on — instead of
   one ❓ living permanently in the crowded top bar for every view. */
.view-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px}
.view-head h1{margin:0}
main{max-width:560px; margin:0 auto; padding:24px 18px calc(24px + var(--bottomnav-h))}
.guest-hero{padding:14px 0 8px}.guest-hero h1{font-size:clamp(2rem,8vw,3.2rem);line-height:1.05;margin:.2rem 0 .8rem}
.eyebrow{color:var(--accent);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.pillar-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0}
.pillar-card{min-height:116px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;background:var(--raised);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:15px}
.pillar-card:hover,.pillar-card.active{border-color:var(--accent);transform:translateY(-1px)}.pillar-card b{font-size:1rem}.pillar-card span{font-size:.82rem;color:var(--ink-soft)}
.explore-tools{display:flex;flex-direction:column;gap:9px}.explore-tools .row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}.explore-heading{display:flex;align-items:center;justify-content:space-between;margin-top:24px}.explore-heading h2{font-size:1.15rem}
.explore-results{display:flex;flex-direction:column;gap:10px}.explore-card{display:grid;grid-template-columns:76px 1fr;gap:12px;padding:10px;background:var(--raised);border:1px solid var(--line);border-radius:13px}.explore-card img{width:76px;height:76px;object-fit:cover;border-radius:9px;background:var(--paper)}.explore-card-copy{min-width:0}.explore-card h3{font-size:1rem;margin:0 0 3px}.explore-meta{font-size:.75rem;color:var(--ink-soft);margin:0 0 8px}.explore-actions{display:flex;gap:8px;align-items:center}.explore-actions button,.explore-actions a{width:auto;font-size:.8rem;padding:6px 10px}.series-link{color:var(--accent);text-decoration:none}
.mini-player{position:fixed;z-index:40;left:50%;transform:translateX(-50%);bottom:calc(var(--bottomnav-h) + 8px);width:min(540px,calc(100vw - 20px));background:var(--raised);border:1px solid var(--accent);border-radius:14px;padding:10px;box-shadow:0 12px 40px rgba(0,0,0,.35);display:grid;grid-template-columns:1fr auto;gap:7px 10px}.mini-player-copy{display:flex;flex-direction:column;min-width:0}.mini-player-copy b,.mini-player-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mini-player-copy span{font-size:.72rem;color:var(--ink-soft)}.mini-player audio{width:100%;grid-column:1/-1;height:38px}.mini-player>button{width:auto;grid-column:2;grid-row:1}.mini-player-transcript{grid-column:1/-1;max-height:28vh;overflow:auto;border-top:1px solid var(--line);padding-top:8px;font-size:.9rem;line-height:1.55}
.today-section{margin:20px 0}.today-section h2,#view-today>h2{font-size:1.05rem}.today-card,.journey-card,.pack-card,.ritual-card{background:var(--raised);border:1px solid var(--line);border-radius:13px;padding:14px}.today-card h3,.journey-card h3,.pack-card h3{margin:0 0 5px;font-size:1rem}.today-card p,.journey-card p,.pack-card p{margin:4px 0;color:var(--ink-soft)}.empty-card{border:1px dashed var(--line);border-radius:13px;padding:18px;text-align:center}.kids-end{padding:20px;text-align:center;border:1px solid var(--accent);border-radius:14px}.offline-size{font-size:.78rem;color:var(--ink-soft)}
body[data-view="view-guest"] .mini-player{bottom:10px}@media(max-width:480px){.pillar-grid{grid-template-columns:1fr 1fr}.explore-tools .row{grid-template-columns:1fr 1fr}.explore-tools .row button{grid-column:1/-1}.explore-card{grid-template-columns:64px 1fr}.explore-card img{width:64px;height:64px}}
.profile-links{margin:14px 0 18px}

/* Primary navigation (2026-09-22): four thumb-reachable, labeled
   destinations fixed to the bottom of the screen, replacing the old
   unlabeled icon strip in the header — every screen (including the
   fullscreen Watch feed, z-index 20) sits underneath this. */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex;
  height:var(--bottomnav-h); padding-bottom:env(safe-area-inset-bottom, 0px);
  background:color-mix(in srgb, var(--raised) 88%, transparent); border-top:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.bottom-nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; background:none; border:0; border-radius:0; color:var(--ink-soft);
  font:inherit; padding:6px 4px 0; cursor:pointer;
}
.bottom-nav-item .nav-ico{display:grid; place-items:center; width:44px; height:28px; border-radius:14px; line-height:1; transition:background .18s, transform .18s}
.bottom-nav-item .nav-ico svg{display:block}
.bottom-nav-item small{font-size:.66rem; font-weight:600}
.bottom-nav-item.active{color:var(--accent)}
.bottom-nav-item.active .nav-ico:not(.nav-ico-create){background:color-mix(in srgb, var(--accent) 16%, transparent)}
/* Create is the primary action: a filled pill, like the centre button in the sample feeds */
.bottom-nav-item .nav-ico-create{background:var(--accent-deep); color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.28)}
.bottom-nav-item:active .nav-ico{transform:scale(.92)}
.bottom-nav-item:hover{color:var(--ink)}
h1{font-size:1.5rem; margin:0 0 6px}
.sub{color:var(--ink-soft); margin:0 0 20px}
.stack{display:flex; flex-direction:column; gap:10px; margin-top:14px}
label{font-size:.85rem; color:var(--ink-soft)}
input,select,textarea{
  background:var(--raised); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:11px 12px; font:inherit; width:100%;
}
textarea{resize:vertical}
button{
  background:var(--accent-deep); color:#fff; border:none; border-radius:8px;
  padding:12px 16px; font:inherit; font-weight:600; cursor:pointer;
}
button:hover{filter:brightness(1.1)}
button.secondary{background:var(--raised); color:var(--ink); border:1px solid var(--line)}
/* :not(.link-btn) so this never collides with the .link-btn.danger text
   variant (btn-delete-account uses both classes deliberately — a subtle
   entry point, same as Sign Out) — same-specificity same-property clash
   otherwise left red text on a red background, invisible (2026-08-30). */
button.danger:not(.link-btn){background:#b3261e; color:#fff}
button.danger:not(.link-btn):disabled{background:var(--raised); color:var(--ink-soft)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
.studio-row{display:flex; gap:8px}
.discover-filter{position:relative; flex:none}
.discover-filter .post-menu-dropdown{right:0; left:auto; min-width:160px; max-width:calc(100vw - 24px)}
.discover-filter-item.active{color:var(--accent); font-weight:700}
.studio{flex:1; background:var(--raised); color:var(--ink); border:1px solid var(--line)}
.studio.active{border-color:var(--accent); color:var(--accent)}

/* Record-first entry point (2026-09-22) — same weight as the existing
   write-and-narrate flow, not a secondary/buried option. */
.create-mode-row{display:flex; gap:8px; margin:16px 0 4px}
.create-mode{
  flex:1; background:var(--raised); color:var(--ink-soft); border:1px solid var(--line);
  font-weight:600; padding:10px 12px;
}
.create-mode.active{border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--raised))}
/* Height-driven, not width-driven — a 9:16 box sized from a 100%-wide
   container can run taller than the viewport and push Record/Use-this
   controls below the fold (2026-09-22 review). Capping height and letting
   width follow keeps the controls on-screen at any viewport size. */
.camera-wrap{
  position:relative; width:auto; height:min(52vh, 480px); max-width:100%; aspect-ratio:9/16;
  margin:14px auto 0; background:#0b0f14; border-radius:12px; overflow:hidden;
}
.camera-video{width:100%; height:100%; object-fit:cover; display:block}
.camera-timer{
  position:absolute; top:10px; left:10px; z-index:6; background:rgba(0,0,0,.55); color:#fff;
  font-variant-numeric:tabular-nums; font-size:.82rem; font-weight:700;
  padding:4px 9px; border-radius:999px;
}
.teleprompter-setup{margin:10px 0}
.teleprompter-setup textarea{width:100%; box-sizing:border-box; resize:vertical; margin:6px 0}
.teleprompter{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; pointer-events:none;
}
.teleprompter-scroll{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; max-height:62%;
  background:linear-gradient(180deg, rgba(0,0,0,.74), rgba(0,0,0,.58) 65%, transparent);
  /* Top padding clears .camera-timer (top:10px, ~26px tall) which renders
     at the same time as this during an actual recording — the two
     otherwise visibly collide right where the text starts. */
  padding:44px 16px 14px; box-sizing:border-box;
  /* Reading pace varies per person — a fixed auto-scroll speed is never
     going to match everyone, so this is draggable directly (2026-09-23),
     not just adjustable via the speed buttons. pointer-events:auto here
     overrides .teleprompter's own none, scoped to just this text banner —
     the transparent area around it still passes touches through to the
     camera underneath. */
  pointer-events:auto;
}
.teleprompter-scroll p{
  margin:0; color:#fff; font-size:1.05rem; line-height:1.6;
  text-shadow:0 2px 8px rgba(0,0,0,.85); white-space:pre-wrap;
}
.teleprompter-controls{pointer-events:auto; display:flex; gap:8px; justify-content:center; padding:8px 0}
.teleprompter-btn{
  width:32px; height:32px; border-radius:50%; border:0; background:rgba(0,0,0,.5);
  color:#fff; font-size:.95rem; line-height:1; cursor:pointer; display:grid; place-items:center;
}
#camera-done-row{margin-top:10px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.row{display:flex; gap:8px; flex-wrap:wrap}
.row button{flex:1}
.hint{font-size:.82rem; color:var(--ink-soft); margin:4px 0 0}
.or-divider{text-align:center; text-transform:uppercase; letter-spacing:.04em; margin:14px 0 8px}
#google-signin-btn{display:flex; justify-content:center; margin-bottom:8px}
.status{color:var(--warn); min-height:1.2em; font-size:.9rem; display:flex; align-items:center; gap:8px}
.status.busy{color:var(--ink-soft)}
/* A working request should never be silently invisible: every long-running
   action pairs a disabled control with this spinner + a status message,
   and the message only clears once the action is genuinely finished. */
.spinner{
  flex:none; width:14px; height:14px; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .spinner{ animation:none; border-top-color:var(--line) } }
/* Estimated progress (2026-08-31) — driven by real historical job timing
   (server/src/routes/jobStats.ts), not a guess baked into the client. The
   fill is capped at 92% by JS until the action actually finishes, so the
   bar can never visually claim "done" before it's true; the striped
   overtime state (past the estimate, still running) says "still working,
   just taking longer than usual" instead of looking stuck or broken. */
.progress-bar{
  height:6px; border-radius:999px; background:var(--line); overflow:hidden; margin-top:6px;
}
.progress-bar-fill{
  height:100%; border-radius:999px; background:var(--accent);
  transition:width .3s ease-out;
}
.progress-bar-fill--overtime{
  background:repeating-linear-gradient(
    45deg, var(--accent) 0 10px, var(--accent-deep) 10px 20px
  );
  background-size:28px 28px;
  animation:progress-stripe 1s linear infinite;
}
@keyframes progress-stripe{ to{ background-position:28px 0; } }
@media (prefers-reduced-motion: reduce){ .progress-bar-fill--overtime{ animation:none } }
.progress-estimate-label{font-size:.78rem; color:var(--ink-soft); margin-top:2px}
button:disabled{opacity:.55; cursor:progress}
button:disabled:hover{filter:none}
.audio-loading{
  display:flex; align-items:center; gap:8px; color:var(--ink-soft); font-size:.85rem;
  padding:10px 0;
}
/* A freshly-set <audio src> reports "0:00" until its metadata loads — dim it
   instead of letting that read as a broken/finished render. */
audio.audio-pending{opacity:.4; pointer-events:none; filter:grayscale(.4)}
/* Shown only while playback has actually stalled waiting for more data
   (the <audio> "waiting" event) — without this, a slow connection makes
   the play button look broken instead of just buffering. */
.audio-buffering-hint{
  display:flex; align-items:center; gap:8px; color:var(--ink-soft); font-size:.85rem;
  margin:6px 0 0;
}
.audio-buffering-hint::before{
  content:""; flex:none; width:12px; height:12px; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .audio-buffering-hint::before{ animation:none; border-top-color:var(--line) } }
/* The default reading view — one continuous script, not a stack of parts.
   Segments still exist underneath for the pipeline; the reader never needs
   to know that. */
.script-flow{
  font-size:1.05rem; line-height:1.75; margin:18px 0 14px;
  max-width:70ch;
}
.script-flow p{margin:0 0 14px}
.script-flow p:last-child{margin-bottom:0}
.script-flow p.beat-break{margin-top:20px}
.script-flow span.seg{
  cursor:text; border-radius:3px; transition:background .15s;
}
.script-flow span.seg:hover{background:var(--raised)}

/* Tertiary text actions (Back, Sign out, Manage voice clones, ...) — a
   default underline reads as a stray hyperlink, not an app control (a
   professional-app pattern check, 2026-08-30). Weight carries the "this is
   clickable" affordance instead; an in-app action never underlines even on
   hover, while an <a> that actually leaves the app (the guide links) gets
   an underline on hover as a "you're navigating away" cue. */
.link-btn{
  background:none; border:none; color:var(--ink-soft); font:inherit;
  font-size:.85rem; font-weight:600; text-decoration:none;
  cursor:pointer; padding:4px 0; margin-bottom:8px; width:auto;
  display:inline-flex; align-items:center; gap:4px;
}
.link-btn:hover{color:var(--accent)}
a.link-btn:hover{text-decoration:underline; text-underline-offset:2px}
.link-btn.danger{color:#b3261e}
.link-btn.danger:hover{color:#8c1d17}

.segments{display:flex; flex-direction:column; gap:10px; margin:16px 0}
.segment{
  background:var(--raised); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px;
}
.series-card{cursor:pointer}
.take-row{display:flex; align-items:center; justify-content:space-between; padding:9px 14px}
.take-row .danger{background:none; border:0; width:auto; padding:4px 8px; font-size:1rem}
.series-card:hover{border-color:var(--accent)}

.clone-passage{
  margin:8px 0 14px; padding:12px 14px; background:var(--paper);
  border-left:3px solid var(--accent); border-radius:4px;
  font-size:.95rem; line-height:1.6; color:var(--ink);
}
button.recording{background:var(--warn); animation:mic-pulse 1.2s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){ button.recording{animation:none} }
#clone-preview{width:100%}
.clone-status-pending{color:var(--warn)}
.clone-status-active{color:var(--accent)}
.clone-status-revoked{color:var(--ink-soft); text-decoration:line-through}

.challenge-leaderboard{
  margin-top:10px; padding:10px 12px; background:var(--paper);
  border-radius:6px; font-size:.88rem;
}
.challenge-leaderboard p{margin:2px 0}
.block-title{font-size:1.05rem; margin:20px 0 8px; font-weight:600}
.block-title.danger-title{color:#b3261e}

.voice-field{position:relative}
.voice-field textarea{padding-right:52px}
.mic-btn{
  position:absolute; right:8px; bottom:8px; width:36px; height:36px;
  border-radius:50%; background:var(--raised); border:1px solid var(--line);
  color:var(--ink); font-size:1.1rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.mic-btn:hover{border-color:var(--accent)}
.mic-btn.recording{
  background:var(--warn); border-color:var(--warn); color:#fff;
  animation:mic-pulse 1.2s ease-in-out infinite;
}
.mic-btn.busy{opacity:.6; cursor:wait; animation:none}
@keyframes mic-pulse{
  0%, 100%{box-shadow:0 0 0 0 rgba(217,164,92,.5)}
  50%{box-shadow:0 0 0 8px rgba(217,164,92,0)}
}
@media (prefers-reduced-motion: reduce){
  .mic-btn.recording{animation:none}
}
.studio-field{display:none}
.studio-field.visible{display:block}
.checkbox-field label{display:flex; align-items:center; gap:8px; font-size:.95rem; color:var(--ink); margin-top:22px}
.checkbox-field input{width:auto}

.citation{
  margin-top:8px; padding:8px 10px; background:var(--paper); border-left:3px solid var(--accent);
  border-radius:4px; font-size:.85rem; color:var(--ink-soft);
}
.citation strong{color:var(--accent)}

/* Imani Watch — real Scene MP4 when a creation has one, narrated art card
   as a full visual canvas when it doesn't, so this surface stays valuable
   before every creation has a rendered video. */
.watch-view{
  position:fixed; inset:0; z-index:20; background:#071316; color:#fff;
  overflow:hidden;
}
.watch-topbar{
  position:absolute; z-index:2; inset:0 0 auto; display:flex; align-items:center;
  justify-content:space-between; padding:calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
  background:linear-gradient(180deg,rgba(0,0,0,.58),transparent); pointer-events:none;
}
.watch-topbar button{pointer-events:auto}
.watch-back,.watch-create,.watch-tab{
  border:0; color:#fff; background:rgba(0,0,0,.28); font:inherit; cursor:pointer;
}
.watch-back,.watch-create{width:38px; height:38px; border-radius:50%; font-size:1.4rem}
.watch-tabs{display:flex; gap:16px; flex:1; min-width:0; overflow-x:auto}
.watch-tabs{gap:6px; scrollbar-width:none}
.watch-tabs::-webkit-scrollbar{display:none}
.watch-tab{padding:8px 11px; border-radius:999px; opacity:.8; font-weight:700; font-size:.8rem; white-space:nowrap;
  background:rgba(255,255,255,.1); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.12); transition:background .18s, color .18s}
.watch-tab.active{opacity:1; background:#fff; color:#0b1a1c; border-color:#fff}
.watch-tab:disabled{cursor:default}
/* The studio-filter dropdown (shared with the rest of the app via
   .icon-btn/.post-menu-dropdown) is reused here rather than duplicated —
   these overrides just restyle it for Watch's always-dark immersive shell,
   which doesn't follow the app's light/dark theme tokens. */
.watch-topbar .discover-filter{flex-shrink:0}
.watch-topbar .icon-btn{
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.14); border-radius:50%;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  width:40px; height:40px; padding:0; display:grid; place-items:center; font-size:.95rem;
}
.watch-topbar .post-menu-dropdown{
  background:#16211f; border:1px solid rgba(255,255,255,.14); color:#fff;
}
.watch-topbar .post-menu-item{color:#fff}
.watch-topbar .discover-filter-item.active{color:#7fd9cf}
#discover-feed-panel{height:100%}
.watch-feed{height:100%; overflow-y:auto; scroll-snap-type:y mandatory; overscroll-behavior-y:contain}
.watch-card{
  position:relative; min-height:100%; scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:100px 84px calc(46px + var(--bottomnav-h)) 20px;
  box-sizing:border-box; isolation:isolate;
}
.watch-art{position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center; filter:saturate(1.05)}
.watch-art-fallback{background:radial-gradient(circle at 25% 20%,#277e79,transparent 42%),linear-gradient(155deg,#1d2635,#091113 72%)}
.watch-video{position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; background:#000}
.watch-copy{max-width:520px; text-shadow:0 2px 16px rgba(0,0,0,.74)}
.watch-meta{margin:0 0 8px; display:flex; align-items:center; gap:8px; font-size:.78rem; opacity:.95}
.watch-chip{padding:3px 10px; border-radius:999px; background:rgba(255,255,255,.18); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-weight:700; letter-spacing:.04em; text-transform:capitalize}
.watch-creator{opacity:.85; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.watch-full-link{display:inline-flex; align-items:center; margin-top:10px; padding:8px 14px; min-height:36px; border-radius:999px; box-sizing:border-box;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:#fff; font-size:.86rem; font-weight:700; text-decoration:none; text-shadow:none}
.watch-full-link:hover{background:rgba(255,255,255,.26)}
.watch-copy h2{margin:0; font-size:clamp(1.45rem,5vw,2.25rem); line-height:1.08}
.watch-description{margin:9px 0 0; font-size:.94rem; line-height:1.42; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.watch-actions{position:absolute; right:12px; bottom:calc(64px + var(--bottomnav-h)); display:flex; flex-direction:column; gap:16px; align-items:center}
.watch-action{border:0; padding:0; color:#fff; background:transparent; display:flex; flex-direction:column; align-items:center; gap:4px; font:inherit; cursor:pointer; text-shadow:0 2px 10px rgba(0,0,0,.8)}
.watch-action .wa-ico{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:transform .15s, background .18s}
.watch-action:active .wa-ico{transform:scale(.9)}
.watch-action small{font-size:.7rem; font-weight:600}
.watch-action.liked .wa-ico{color:#ff4d6d; background:rgba(255,77,109,.2); border-color:rgba(255,77,109,.5)}
.watch-action.saved .wa-ico{color:#7fd9cf; background:rgba(127,217,207,.2); border-color:rgba(127,217,207,.5)}
.watch-action:disabled{opacity:1; cursor:default}
.watch-action.pop .wa-ico{animation:like-pop .32s ease-out}
@keyframes like-pop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.watch-action.pop .wa-ico{animation:none}}
.watch-audio{width:100%; max-width:520px; height:36px; margin-top:16px; filter:contrast(.95) brightness(1.18)}
.watch-replay{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.46); color:#fff; font-size:1.8rem; display:grid; place-items:center;
}
.watch-empty{
  position:absolute; inset:0 0 var(--bottomnav-h); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; padding:60px 32px; text-align:center; color:#d6e6e5;
}
.watch-empty .link-btn{color:#7fd9cf; font-weight:700}
/* Challenges is a different kind of content (a list + leaderboard, not a
   swipeable feed) living inside the same immersive shell — a scrollable
   panel rather than a snap-scroll deck, with the shared .segment/.hint/
   .block-title components restyled for Watch's dark ground. */
.watch-challenges-panel{
  position:absolute; inset:0; overflow-y:auto; color:#fff;
  padding:calc(env(safe-area-inset-top,0px) + 70px) 20px calc(24px + var(--bottomnav-h));
  box-sizing:border-box;
}
.watch-challenges-panel .block-title{color:#fff}
.watch-challenges-panel .segment{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:#fff}
.watch-challenges-panel .hint{color:rgba(255,255,255,.62)}
.watch-challenges-panel .link-btn{color:#7fd9cf}
.watch-challenges-panel .studio{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); color:#fff}
.watch-challenges-panel .studio.active{border-color:#7fd9cf; color:#7fd9cf}
.watch-challenges-panel .challenge-leaderboard{background:rgba(255,255,255,.07); color:#fff}
@media (min-width:720px){
  .watch-card{max-width:520px; margin:auto; border-left:1px solid rgba(255,255,255,.12); border-right:1px solid rgba(255,255,255,.12)}
  .watch-topbar{max-width:520px; left:50%; right:auto; width:100%; transform:translateX(-50%); box-sizing:border-box}
  .watch-challenges-panel{max-width:520px; left:50%; transform:translateX(-50%); right:auto; width:100%}
}
@media (prefers-reduced-motion:reduce){.watch-feed{scroll-behavior:auto}}

.segment .tags{display:flex; gap:6px; margin-bottom:6px}
.tag{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
  padding:2px 8px; border-radius:999px; background:var(--paper); color:var(--accent);
  border:1px solid var(--line);
}
.segment p{margin:0}
.script-head{margin-bottom:8px}
.full-audio{
  background:var(--raised); border:1px solid var(--accent); border-radius:10px;
  padding:14px; margin:14px 0; display:flex; flex-direction:column; gap:8px;
}
.art-card{width:100%; max-width:280px; aspect-ratio:1; border-radius:10px; display:block; margin:0 auto 10px; object-fit:cover}
.full-audio audio{width:100%}
.full-audio video{width:100%; max-height:480px; border-radius:10px; background:#111; object-fit:contain}
.full-audio .hint a{color:var(--accent)}

.share-area{display:flex; flex-direction:column; gap:8px; margin-top:4px}
.share-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:#fff; border:none; border-radius:8px;
  padding:12px 16px; font:inherit; font-weight:600; cursor:pointer; width:auto;
}
.share-btn:hover{filter:brightness(1.08)}
.share-fallback{display:flex; gap:8px; flex-wrap:wrap}
.share-chip{
  background:var(--raised); color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:7px 14px; font:inherit; font-size:.88rem;
  text-decoration:none; cursor:pointer; width:auto;
}
.share-chip:hover{border-color:var(--accent); color:var(--accent)}
#share-link-text{word-break:break-all; user-select:all}
@media (max-width:480px){ .grid2{grid-template-columns:1fr} }

/* Public post detail page (web/post.js) — Quora-style layout: author row,
   optional image, full text, action row, comments. Lives outside the SPA
   but shares this stylesheet's tokens, so it matches the app automatically
   in both themes. */
.post-card{
  background:var(--raised); border:1px solid var(--line); border-radius:14px;
  padding:20px; display:flex; flex-direction:column; gap:14px;
}
.post-author{display:flex; align-items:center; gap:10px}
.post-avatar{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:var(--accent-deep); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.post-author-text{display:flex; flex-direction:column; gap:1px; min-width:0}
.post-author-name{font-weight:700}
.post-author-meta{font-size:.78rem; color:var(--ink-soft); text-transform:capitalize}
.post-image{width:100%; max-height:360px; object-fit:cover; border-radius:10px}
.post-video{width:100%; max-height:520px; border-radius:10px; background:#111; object-fit:contain; display:block}
.post-title{font-size:1.3rem; margin:0}
.post-body-wrap{display:flex; flex-direction:column; align-items:flex-start; gap:6px}
.post-body{margin:0; font-size:1.02rem; line-height:1.7; white-space:pre-wrap}
.post-more-btn{
  background:none; border:none; color:var(--accent); font:inherit; font-weight:600;
  font-size:.85rem; cursor:pointer; padding:0; width:auto;
}
.post-audio{width:100%}
.post-actions{display:flex; align-items:center; gap:6px; flex-wrap:wrap; position:relative}
.post-action-btn{
  background:var(--paper); color:var(--ink-soft); border:1px solid var(--line);
  border-radius:999px; padding:7px 13px; font:inherit; font-size:.88rem;
  cursor:pointer; width:auto;
}
.post-action-btn:hover{border-color:var(--accent)}
.post-action-btn.active{color:var(--accent); border-color:var(--accent)}
.post-menu{position:relative}
.post-menu-dropdown{
  position:absolute; top:110%; right:0; z-index:5; min-width:140px;
  background:var(--raised); border:1px solid var(--line); border-radius:10px;
  padding:6px; display:flex; flex-direction:column; box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.post-menu-item{
  background:none; border:none; color:var(--ink); font:inherit; text-align:left;
  padding:8px 10px; border-radius:6px; cursor:pointer; width:100%;
}
.post-menu-item:hover{background:var(--paper)}
.post-report-form{display:flex; flex-direction:column; gap:8px}
.post-report-form textarea{width:100%}
.post-report-form button{width:auto; align-self:flex-start}
.post-divider{border:none; border-top:1px solid var(--line); margin:0}
.post-comments{display:flex; flex-direction:column; gap:12px}
.post-comments-title{font-size:1.05rem; margin:0}
.post-comment-composer{display:flex; flex-direction:column; gap:8px}
.post-comment-composer textarea{width:100%}
.post-comment-composer button{width:auto; align-self:flex-start}
.post-comment-signin{margin:0}
.comment-list{display:flex; flex-direction:column; gap:10px}
.comment-item{
  background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  display:flex; flex-direction:column; gap:4px;
}
.comment-header{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.comment-author{font-weight:700; font-size:.9rem}
.comment-time{font-size:.75rem; color:var(--ink-soft); flex-shrink:0}
.comment-body{margin:0; font-size:.95rem; line-height:1.5}
.comment-actions{display:flex; gap:14px}
.comment-like-btn, .comment-remove-btn{
  background:none; border:none; color:var(--ink-soft); font:inherit; font-size:.8rem;
  font-weight:600; cursor:pointer; padding:0; width:auto;
}
.comment-like-btn:hover, .comment-remove-btn:hover{color:var(--accent)}
.comment-like-btn.active{color:var(--accent)}
.post-cta{
  display:block; text-align:center; background:var(--accent); color:#fff; font-weight:600;
  text-decoration:none; padding:12px 16px; border-radius:8px;
}
.post-cta:hover{filter:brightness(1.08)}
.post-back-link{
  display:inline-block; margin-bottom:12px; color:var(--ink-soft); font-weight:600;
  font-size:.9rem; text-decoration:none;
}
.post-back-link:hover{color:var(--accent)}
.sermonette-context{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:8px}.sermonette-context h3{font-size:1rem;margin:8px 0 0}.source-card,.practice-card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px}.source-card summary{cursor:pointer;font-weight:700}.practice-card button{width:auto}

/* Support chat (third-party widget, injected by initSupportWidget()). Its round launcher used to float over the
   bottom nav's Profile tab on every screen. It now shows on the Create screen only (where people get stuck
   and need help), sitting above the nav. app.js sets body[data-view]. !important because the widget's own
   stylesheet is injected after ours. */
body:not([data-view="view-create"]) .ssw-launcher,
body:not([data-view="view-create"]) .ssw-panel{display:none !important}
body[data-view="view-create"] .ssw-launcher{bottom:calc(var(--bottomnav-h) + 16px + env(safe-area-inset-bottom, 0px)) !important; right:16px !important}
body[data-view="view-create"] .ssw-panel{bottom:calc(var(--bottomnav-h) + 84px + env(safe-area-inset-bottom, 0px)) !important; right:16px !important; max-width:calc(100vw - 32px)}