/* NPC Media web app (installable on iPhone via Add to Home Screen).
   Same design system as the Android app: iOS system colours, large titles,
   grouped lists, tab bar, mini player. */
:root {
  --bg: #F2F2F7; --surface: #FFFFFF; --surface-2: #F2F2F7;
  --label: #000; --label-2: rgba(60,60,67,.6); --label-3: rgba(60,60,67,.3);
  --separator: rgba(60,60,67,.29); --fill: rgba(120,120,128,.12);
  --accent: #007AFF; --red: #FF3B30; --green: #34C759; --orange: #FF9500; --indigo: #5856D6; --pink: #FF2D55;
  --bar: rgba(249,249,249,.82); --thumb: #fff; --shadow: 0 10px 30px rgba(0,0,0,.08);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #000; --surface: #1C1C1E; --surface-2: #2C2C2E;
  --label: #fff; --label-2: rgba(235,235,245,.6); --label-3: rgba(235,235,245,.3);
  --separator: rgba(84,84,88,.6); --fill: rgba(118,118,128,.24);
  --accent: #0A84FF; --red: #FF453A; --green: #30D158; --orange: #FF9F0A; --indigo: #5E5CE6; --pink: #FF375F;
  --bar: rgba(22,22,24,.78); --thumb: #636366; --shadow: 0 10px 30px rgba(0,0,0,.5);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow-x: clip; }
body { font-family: var(--font); background: var(--bg); color: var(--label); font-size: 17px; line-height: 1.4; letter-spacing: -.02em; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
img { display: block; max-width: 100%; }
input, textarea { font: inherit; color: var(--label); }
.hidden { display: none !important; }

/* -------- layout */
#view { padding-bottom: calc(64px + var(--safe-bottom)); min-height: 100%; }
body.has-mini #view { padding-bottom: calc(136px + var(--safe-bottom)); }
.page { animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }
.large-title { padding: calc(var(--safe-top) + 8px) 20px 8px; }
.large-title .actions { display: flex; justify-content: flex-end; gap: 10px; height: 44px; align-items: center; }
.large-title .eyebrow { font-size: 13px; color: var(--label-2); text-transform: uppercase; letter-spacing: .02em; }
.large-title h1 { font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: .01em; }
.navbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; height: calc(44px + var(--safe-top)); padding: var(--safe-top) 8px 0; background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: .5px solid var(--separator); }
.navbar .back { display: flex; align-items: center; color: var(--accent); padding: 8px; font-size: 17px; }
.navbar .back svg { width: 22px; height: 22px; }
.navbar h2 { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; max-width: 55%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.section-title { display: flex; justify-content: space-between; align-items: center; padding: 28px 20px 12px; }
.section-title h2 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.section-title a, .section-title button { color: var(--accent); font-size: 17px; }

/* -------- controls */
.circle-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--fill); color: var(--accent); display: grid; place-items: center; flex: none; }
.circle-btn svg { width: 20px; height: 20px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px; border-radius: 14px; background: var(--accent); color: #fff; font-weight: 600; width: 100%; }
.btn.tint { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.btn.sm { min-height: 36px; border-radius: 18px; width: auto; font-size: 15px; padding: 0 16px; }
.btn:disabled { opacity: .5; }
.btn:active, .press:active { transform: scale(.97); opacity: .8; }
.segmented { position: relative; display: flex; background: var(--fill); border-radius: 9px; padding: 2px; height: 32px; margin: 0 16px 12px; }
.segmented button { flex: 1; position: relative; z-index: 1; font-size: 13px; font-weight: 500; }
.segmented button.on { font-weight: 600; }
.segmented .thumb { position: absolute; top: 2px; bottom: 2px; left: 2px; border-radius: 7px; background: var(--thumb); box-shadow: 0 2px 6px rgba(0,0,0,.12); transition: transform .3s cubic-bezier(.3,.8,.3,1); }

/* -------- cards & lists */
.card { background: var(--surface); border-radius: 18px; }
.group { margin: 0 16px; background: var(--surface); border-radius: 12px; overflow: hidden; }
.group-header { font-size: 13px; color: var(--label-2); text-transform: uppercase; padding: 0 32px 6px; margin-top: 24px; }
.group-footer { font-size: 13px; color: var(--label-2); padding: 6px 32px 0; }
.row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; min-height: 46px; position: relative; width: 100%; text-align: left; }
.row + .row::before { content: ""; position: absolute; top: 0; right: 0; left: var(--inset, 16px); height: .5px; background: var(--separator); }
.row .grow { flex: 1; min-width: 0; }
.row .t { font-size: 16px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row .s { font-size: 13px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.playing .t { color: var(--accent); }
.tile-icon { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: #fff; flex: none; }
.tile-icon svg { width: 18px; height: 18px; }
.chev { color: var(--label-3); width: 20px; height: 20px; flex: none; }
.art { border-radius: 8px; overflow: hidden; background: var(--fill); flex: none; position: relative; }
.art img { width: 100%; height: 100%; object-fit: cover; }
.art .eq { position: absolute; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; color: #fff; }

/* -------- home */
.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: calc(100% - 40px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px; scroll-padding: 0 20px; scrollbar-width: none; }
.carousel::-webkit-scrollbar, .shelf::-webkit-scrollbar { display: none; }
.feature { position: relative; aspect-ratio: 16/10; border-radius: 18px; overflow: hidden; scroll-snap-align: start; box-shadow: var(--shadow); text-align: left; }
.feature img { width: 100%; height: 100%; object-fit: cover; }
.feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 25%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.92)); }
.feature .txt { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; color: #fff; }
.feature .k { font-size: 12px; font-weight: 600; letter-spacing: .06em; opacity: .8; }
.feature .h { font-size: 20px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.radio-card { margin: 20px 16px 0; height: 132px; border-radius: 18px; overflow: hidden; position: relative; display: flex; align-items: center; padding: 18px; color: #fff; background: #111 center/cover; width: calc(100% - 32px); text-align: left; }
.radio-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.35)); }
.radio-card > * { position: relative; }
.live { display: inline-flex; align-items: center; gap: 5px; background: #FF3B30; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 3px 7px; border-radius: 6px; }
.live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.playing-live .live i { animation: pulse 1s infinite alternate; }
@keyframes pulse { to { opacity: .3; } }
.radio-card .play { margin-left: auto; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; flex: none; }
.radio-card .play svg { width: 28px; height: 28px; }
.devo-card { margin: 16px 16px 0; padding: 18px; width: calc(100% - 32px); text-align: left; display: block; }
.devo-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--orange); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.devo-badge { width: 28px; height: 28px; border-radius: 7px; background: var(--orange); display: grid; place-items: center; }
.devo-badge svg { width: 17px; height: 17px; fill: #fff; }
.verse-card { margin: 16px 16px 0; padding: 18px 22px 22px; border-radius: 22px; position: relative; overflow: hidden; border: .5px solid var(--separator);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, var(--surface)), color-mix(in srgb, var(--indigo) 9%, var(--surface))); }
.verse-card::before { content: "\201C"; position: absolute; right: 12px; top: -52px; font: 700 190px/1 Georgia, serif; color: var(--accent); opacity: .18; }
.shelf { display: grid; grid-auto-flow: column; gap: 14px; overflow-x: auto; padding: 0 20px; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; }
.shelf.video { grid-auto-columns: 270px; }
.shelf.square { grid-auto-columns: 150px; }
.shelf .item { scroll-snap-align: start; text-align: left; }
.shelf .art { width: 100%; border-radius: 12px; }
.shelf.video .art { aspect-ratio: 16/9; }
.shelf.square .art { aspect-ratio: 1; }
.shelf .tt { font-size: 15px; font-weight: 600; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.shelf.square .tt { -webkit-line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; display: block; overflow: hidden; }
.shelf .st { font-size: 13px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* -------- sermons video */
.yt { position: relative; aspect-ratio: 16/9; background: #000; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hero-audio { display: flex; gap: 16px; padding: 12px 20px; align-items: center; }
.hero-audio .art { width: 112px; height: 112px; border-radius: 12px; box-shadow: var(--shadow); }
.hero-actions { display: flex; gap: 10px; padding: 0 20px 14px; }
.hero-actions .btn { flex: 1; min-height: 44px; }

/* -------- devotional */
.devo-title { font-size: 28px; line-height: 1.15; font-weight: 700; padding: 8px 20px; }
.scripture { margin: 12px 16px; background: var(--surface); border-radius: 16px; display: flex; overflow: hidden; }
.scripture::before { content: ""; width: 4px; background: var(--accent); flex: none; }
.scripture div { padding: 16px 18px; }
.scripture .ref { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--accent); text-transform: uppercase; margin-bottom: 8px; }
.scripture p { font-weight: 500; line-height: 1.6; }
.reflection p { padding: 8px 20px; line-height: 1.65; color: color-mix(in srgb, var(--label) 88%, transparent); }
.prayer { margin: 16px; padding: 20px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 9%, transparent); }
.prayer h3 { color: var(--accent); font-size: 17px; margin-bottom: 8px; }

/* -------- stories */
.stories { position: fixed; inset: 0; background: #000; z-index: 30; overflow-y: auto; scroll-snap-type: y mandatory; }
.story { height: 100vh; height: 100dvh; scroll-snap-align: start; position: relative; display: grid; place-items: center; }
.story video { width: 100%; height: 100%; object-fit: cover; }
.story .cap { position: absolute; left: 16px; bottom: calc(80px + var(--safe-bottom)); max-width: 70%; padding: 12px; border-radius: 14px; background: rgba(0,0,0,.4); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.story .like { position: absolute; right: 16px; bottom: calc(80px + var(--safe-bottom)); width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,.4); color: #fff; display: grid; place-items: center; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.story .like svg { width: 28px; height: 28px; }
.story .sound { position: absolute; top: calc(var(--safe-top) + 64px); left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.45); color: #fff; padding: 8px 14px; border-radius: 18px; font-size: 14px; }
.stories-top { position: fixed; top: calc(var(--safe-top) + 10px); right: 12px; z-index: 31; }
.pill-glass { background: rgba(0,0,0,.4); color: #fff; padding: 8px 14px; border-radius: 20px; font-size: 14px; font-weight: 600; border: .5px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* -------- forms */
.field { display: block; width: 100%; border: 0; background: transparent; padding: 12px 16px; min-height: 46px; outline: none; }
.field + .field { border-top: .5px solid var(--separator); }
textarea.field { min-height: 140px; resize: vertical; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px; scrollbar-width: none; }
.chip { padding: 8px 16px; border-radius: 18px; background: var(--surface); font-size: 15px; font-weight: 600; white-space: nowrap; }
.chip.on { background: var(--accent); color: #fff; }
.status { margin: 14px 16px; padding: 12px 14px; border-radius: 12px; background: var(--surface); font-size: 15px; }
.status.err { color: var(--red); } .status.ok { color: var(--green); }
.toggle { position: relative; width: 51px; height: 31px; border-radius: 16px; background: var(--fill); flex: none; transition: background .2s; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .2s; }
.toggle.on { background: var(--green); } .toggle.on::after { transform: translateX(20px); }

/* -------- tab bar + mini player */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; padding-bottom: var(--safe-bottom); background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: .5px solid var(--separator); }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 52px; color: color-mix(in srgb, var(--label) 45%, transparent); font-size: 10px; font-weight: 500; gap: 2px; }
.tabbar a.on { color: var(--accent); }
.tabbar svg { width: 26px; height: 26px; fill: currentColor; }
body.on-stories .tabbar { background: rgba(0,0,0,.6); border-top-color: rgba(255,255,255,.15); }
body.on-stories .tabbar a:not(.on) { color: rgba(255,255,255,.6); }
.mini { position: fixed; left: 10px; right: 10px; bottom: calc(60px + var(--safe-bottom)); z-index: 39; height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 8px; border-radius: 16px; background: var(--surface); box-shadow: 0 8px 28px rgba(0,0,0,.18); border: .5px solid var(--separator); }
:root[data-theme="dark"] .mini { background: var(--surface-2); }
.mini .art { width: 44px; height: 44px; }
.mini .grow { flex: 1; min-width: 0; text-align: left; }
.mini .t { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .s { font-size: 13px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .s.livetxt { color: var(--red); }
.mini button svg { width: 28px; height: 28px; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; }

/* -------- full player */
.player { position: fixed; inset: 0; z-index: 60; color: #fff; background: #1c1c1e; transform: translateY(100%); transition: transform .38s cubic-bezier(.2,.9,.3,1); display: flex; flex-direction: column; padding: calc(var(--safe-top) + 8px) 28px calc(var(--safe-bottom) + 16px); overflow: hidden; }
.player.open { transform: none; }
.player .bg { position: absolute; inset: -40px; background: center/cover; filter: blur(50px) saturate(1.3); opacity: .7; z-index: -2; }
.player::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.72)); z-index: -1; }
.player .grab { width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.45); margin: 4px auto 10px; }
.player .top { display: flex; align-items: center; justify-content: space-between; }
.player .top span { font-size: 12px; letter-spacing: .06em; opacity: .65; }
.player .cover { margin: auto 0; width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.5); background: #2c2c2e; transition: transform .4s cubic-bezier(.3,.6,.3,1.3); }
.player .cover img { width: 100%; height: 100%; object-fit: cover; }
.player.paused .cover { transform: scale(.86); }
.player h3 { font-size: 20px; font-weight: 600; margin-top: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .artist { opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .artist.livetxt { color: #FF6961; opacity: 1; }
.player input[type=range] { width: 100%; margin-top: 18px; accent-color: #fff; }
.player .times { display: flex; justify-content: space-between; font-size: 12px; opacity: .6; }
.player .ctrls { display: flex; justify-content: space-evenly; align-items: center; margin: 14px 0 6px; }
.player .ctrls button svg { width: 38px; height: 38px; fill: #fff; }
.player .ctrls .pp svg { width: 64px; height: 64px; }
.player .ctrls button:disabled { opacity: .3; }
.player .bottom { display: flex; justify-content: space-between; margin-top: 10px; }
.player .bottom svg { width: 24px; height: 24px; fill: rgba(255,255,255,.65); }

/* -------- sheets */
.sheet-wrap { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .25s; display: flex; align-items: flex-end; }
.sheet-wrap.open { opacity: 1; pointer-events: auto; }
.sheet { width: 100%; max-height: 92vh; overflow-y: auto; background: var(--bg); border-radius: 14px 14px 0 0; padding: 8px 0 calc(var(--safe-bottom) + 24px); transform: translateY(100%); transition: transform .35s cubic-bezier(.2,.9,.3,1); }
.sheet-wrap.open .sheet { transform: none; }
.sheet .grab { width: 36px; height: 5px; border-radius: 3px; background: var(--label-3); margin: 0 auto 14px; }
.toast { position: fixed; left: 50%; bottom: calc(140px + var(--safe-bottom)); transform: translateX(-50%) translateY(20px); background: rgba(30,30,32,.92); color: #fff; padding: 10px 18px; border-radius: 20px; font-size: 15px; opacity: 0; transition: .25s; z-index: 80; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%); }
.install-banner { margin: 12px 16px 0; padding: 14px 16px; display: flex; gap: 12px; align-items: center; }
.install-banner svg { width: 22px; height: 22px; fill: var(--accent); flex: none; }
.empty { text-align: center; padding: 48px 32px; color: var(--label-2); }
.empty h3 { color: var(--label); font-size: 20px; margin-bottom: 6px; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--fill); border-top-color: var(--accent); animation: spin .8s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 700px) {
  #view, .tabbar, .mini { max-width: 680px; margin-left: auto; margin-right: auto; }
  .mini { left: 50%; transform: translateX(-50%); width: calc(100% - 20px); max-width: 660px; }
  .carousel { grid-auto-columns: 520px; }
}

/* Android visitors: only a pointer to Google Play (see the gate at the top of app.js). */
.android-gate { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 28px calc(32px + var(--safe-bottom)); }
.android-gate > img:first-child { height: 72px; width: auto; margin-bottom: 28px; }
.android-gate h1 { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; max-width: 16ch; }
.android-gate p { color: var(--label-2); margin: 12px 0 28px; max-width: 34ch; }
.android-gate .badge { height: 60px; width: auto; }