/* Śrīmad Bhāgavatam — pārāyaṇa web app. Calm paper palette, serif Devanāgarī. */
:root{
  --bg:#fbf7ef; --surface:#ffffff; --ink:#2b2018; --muted:#8a7d6b; --rule:#e7ddca;
  --accent:#a4502b; --accent-soft:#f3ead6; --verse:#33271b; --prose:#5b4a36;
  --topicbg:#f5ecd9; --synbg:#f8f2e4; --bar:#fffdf8;
  --fs:19px; --maxw:740px; --read:20px;
}
/* dark palette: applied ONLY when [data-theme=dark] is set via the toggle. Default is light
   everywhere (welcome + all pages) — the app does NOT auto-follow the OS dark preference. */
:root[data-theme="dark"]{--bg:#14110d;--surface:#1c1813;--ink:#ece2d2;--muted:#9c8f7c;--rule:#2e271d;
  --accent:#d98a5c;--accent-soft:#2a2118;--verse:#ece2d2;--prose:#c9bba6;
  --topicbg:#241d14;--synbg:#1f1a12;--bar:#1a160f;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-size:var(--fs);line-height:1.75;
  font-family:"Noto Serif Devanagari","Noto Serif Kannada","Noto Serif Telugu","Noto Serif Tamil",
  "Noto Serif Malayalam","Noto Serif Bengali","Noto Serif Gujarati","Noto Serif Gurmukhi",
  "Noto Serif Oriya","Tiro Devanagari Sanskrit","Kohinoor Devanagari",Georgia,serif;
  -webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:var(--accent);text-decoration:none}

/* ── app shell ───────────────────────────────────────────────────────────── */
#app{min-height:100%;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:var(--bar);border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:10px;min-height:50px;
  padding:calc(9px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 9px calc(14px + env(safe-area-inset-left));
  transition:transform .25s; backdrop-filter:saturate(1.2) blur(6px)}
.topbar.hide{transform:translateY(-100%)}
.topbar .title{font-size:17px;color:var(--accent);font-weight:600;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .back{font-size:20px;color:var(--accent);padding:2px 6px}
.iconbtn{font-size:18px;color:var(--muted);padding:4px 7px;border-radius:8px}
.iconbtn:hover{background:var(--accent-soft);color:var(--accent)}
.fontbtn{font-weight:600;line-height:1}
.fontbtn span{font-size:12px}
.view{flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:14px 16px 120px}

/* ── lists (skandha / adhyāya / generic rows) ────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:14px 16px;margin:9px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;
  transition:transform .08s, box-shadow .15s}
.card:active{transform:scale(.99)}
.card:hover{box-shadow:0 3px 14px #0001}
.card .lead{font-size:21px;color:var(--ink)}
.card .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.card .meta{font-size:12px;color:var(--muted);white-space:nowrap}
.sectionhdr{text-align:center;color:var(--accent);font-size:25px;margin:26px 0 2px}
.sectionsub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:12px}

/* ── reader (continuous scroll, pārāyaṇa) ────────────────────────────────── */
.reader{padding-bottom:40px}
.r-heading{text-align:center;color:var(--accent);font-size:23px;margin:6px 0 14px}
.r-syn{background:var(--synbg);border-left:3px solid var(--rule);border-radius:0 8px 8px 0;
  padding:10px 14px;margin:14px 0;font-size:15px;color:var(--muted)}
.r-syn .lbl{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin-bottom:6px}
.r-syn a.syn-line{display:flex;gap:7px;align-items:baseline;margin:4px 0;line-height:1.5;
  color:inherit;text-decoration:none;padding:2px 0}
.r-syn a.syn-line:hover{color:var(--accent)}
.r-syn a.syn-line .rng{flex-shrink:0}
.r-syn .rng{display:inline-block;background:var(--accent);color:#fff;border-radius:9px;
  padding:0 7px;font-size:11px;margin-right:6px;vertical-align:1px}
.r-topic{display:flex;gap:9px;align-items:baseline;margin:24px 0 6px;color:var(--prose);font-size:14.5px}
.r-topic .rng{background:var(--accent);color:#fff;border-radius:11px;padding:0 9px;font-size:12px;white-space:nowrap}
/* each śloka is a standalone, tappable card; .active = currently playing */
.v{position:relative;margin:11px 0;padding:15px 16px;border-radius:13px;
  background:var(--surface);border:1px solid var(--rule);scroll-margin-top:70px;cursor:pointer;
  transition:border-color .15s, box-shadow .18s, background .15s}
.v.verse{text-align:center;color:var(--verse)}
.v.prose{text-align:justify;color:var(--prose)}
.v:hover{box-shadow:0 3px 16px #0001}
.v.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 2px 18px #0002}
.v .num{position:absolute;left:13px;top:9px;font-size:11px;color:var(--accent);font-feature-settings:"tnum"}
.v .body{font-size:var(--read);padding:8px 2px 0}
.v.active .ln.now{color:var(--accent)}     /* now-playing line: text colour only, active verse only */
.v .playind{position:absolute;right:9px;bottom:8px;width:16px;height:16px;color:var(--accent);
  opacity:0;transition:opacity .12s}
.v:hover .playind{opacity:.6}
.v.active .playind{opacity:1}
.v .playind svg{width:16px;height:16px;display:block;fill:var(--accent)}
.r-colophon{text-align:center;color:var(--muted);font-style:italic;font-size:15px;
  margin:22px 0 6px;border-top:1px dotted var(--rule);padding-top:10px}
.v .star{position:absolute;right:9px;top:8px;font-size:15px;color:var(--accent);opacity:0;
  transition:opacity .12s;padding:2px}
.v:hover .star,.v .star.on{opacity:1}
.v .star.on{color:#e0a200}

/* ── bottom tab bar ──────────────────────────────────────────────────────── */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--bar);
  border-top:1px solid var(--rule);display:flex;padding:6px 4px env(safe-area-inset-bottom) 4px}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;
  color:var(--muted);font-size:11px}
.tab .i{font-size:20px;line-height:1}
.tab.on{color:var(--accent)}

/* ── audio player bar ────────────────────────────────────────────────────── */
.player{position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom));z-index:24;display:none;
  background:var(--bar);border-top:1px solid var(--rule);align-items:center;gap:8px;padding:8px 14px}
.player .loop.on{color:var(--accent)}
.player.on{display:flex}
.player .pp{font-size:24px;color:var(--accent)}
.player .ref{font-size:13px;color:var(--muted);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .ctl{font-size:18px;color:var(--muted);padding:2px 5px}
.player .spd{font-size:12px;color:var(--accent);border:1px solid var(--rule);border-radius:8px;padding:1px 7px}
.player .tan{font-size:18px;color:var(--muted);opacity:.6}
.player .tan.on{color:var(--accent);opacity:1}
.player .tanvol{font-size:18px;color:var(--accent);padding:2px 4px}
.player .tanvol svg{width:18px;height:18px;display:block}

/* ── search ──────────────────────────────────────────────────────────────── */
.searchbox{display:flex;gap:8px;margin:4px 0 12px}
.searchbox input{flex:1;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--rule);
  border-radius:10px;background:var(--surface);color:var(--ink)}
.qnorm{font-size:11.5px;color:var(--muted);margin:2px 2px 10px}
.chips{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.chip{font-size:12px;background:var(--accent-soft);color:var(--prose);border-radius:11px;padding:2px 9px}
.chip.on{background:var(--accent);color:#fff}
.hit{padding:10px 4px;border-bottom:1px solid var(--rule)}
.hit .r{font-size:11px;color:var(--accent);font-weight:600}
.hit .t2{font-size:10px;color:#b06;float:right}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:9px;overflow:hidden}
.seg button{padding:5px 12px;font-size:13px;color:var(--muted)}
.seg button.on{background:var(--accent);color:#fff}

/* welcome + acknowledgement */
.welcome{max-width:560px;margin:0 auto;text-align:center;
  padding:calc(20px + env(safe-area-inset-top)) 16px calc(22px + env(safe-area-inset-bottom));
  min-height:100dvh;display:flex;flex-direction:column;align-items:center}
.welcome.about{display:block;min-height:auto;position:relative;padding-top:18px}
.w-pic{width:148px;height:185px;object-fit:cover;object-position:50% 14%;border-radius:15px;
  border:1px solid var(--rule);box-shadow:0 6px 26px #0004;margin-bottom:11px}
.w-pic.small{width:116px;height:146px;box-shadow:0 5px 20px #0003}
.w-title{color:var(--accent);font-size:35px;margin:2px 0 0;line-height:1.1;font-weight:600}
.w-name{color:var(--prose);font-size:17px;font-weight:600;margin-top:1px}
.w-script{color:var(--muted);font-size:15px;margin-top:4px}
.w-invoke{color:var(--accent);font-size:16px;margin:10px 0 4px}
.w-credit{color:var(--muted);font-size:12px;line-height:1.55}
.w-credit a,.ack-section a{color:var(--accent);text-decoration:none}
.w-prompt{color:var(--muted);font-size:13px;margin:16px 0 10px}
.scriptlist{width:100%;flex:1;display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:1fr;
  gap:9px;max-height:430px;margin-bottom:10px}
.scriptcard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:var(--surface);border:1px solid var(--rule);border-radius:13px;padding:10px 5px;
  text-align:center;transition:border-color .12s, box-shadow .15s}
.scriptcard:hover{border-color:var(--accent);box-shadow:0 3px 14px #0001}
.scriptcard:active{transform:scale(.98)}
.sc-native{font-size:15px;color:var(--ink);line-height:1.2;overflow-wrap:anywhere}
.sc-eng{font-size:10px;color:var(--muted);line-height:1.15}
.w-ack{margin-top:16px;color:var(--accent);font-size:13px;background:none;border:none;
  text-decoration:underline;cursor:pointer}
.ack-section{margin:22px auto;max-width:430px}
.ack-h{color:var(--accent);font-size:11px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:9px}
.ack-section p{color:var(--ink);font-size:15.5px;line-height:1.72;margin:0}
.back-link{position:absolute;left:6px;top:10px;color:var(--accent);font-size:24px;
  background:none;border:none;cursor:pointer;line-height:1}
.w-loading{color:var(--muted);font-size:14px;padding:18px 0;text-align:center}


/* continue-reading card */
.card.cont{border-color:var(--accent);background:var(--accent-soft)}
.card.cont .ci{color:var(--accent);display:flex;align-items:center;margin-right:2px}
.card.cont .ci svg{width:20px;height:20px}
.card.cont .lead{color:var(--accent)}

/* verse share icon + go-to-verse hit */
.v .vshare{position:absolute;right:34px;top:9px;color:var(--accent);opacity:0;transition:opacity .12s;
  cursor:pointer;padding:2px}
.v:hover .vshare,.v.active .vshare{opacity:.75}
.v .vshare svg{width:16px;height:16px;display:block}
.hit.gohit{display:block;background:var(--accent-soft);border:1px solid var(--rule);border-radius:10px;
  padding:12px 14px;margin-bottom:10px}
.hit.gohit .r{color:var(--accent);font-weight:600}
.spin{display:flex;height:70vh;align-items:center;justify-content:center;color:var(--muted);font-size:15px}
.empty{color:var(--muted);text-align:center;padding:30px;font-size:14px}

/* ── My Lists (native): reader toolbar, select mode, selection bar, sheet ─── */
.tab{white-space:nowrap;font-size:10px;min-width:0;overflow:hidden}
.tab .tl{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.r-tools{display:flex;gap:8px;margin:2px 0 12px;flex-wrap:wrap}
.rtool{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--accent);
  background:var(--accent-soft);border:1px solid var(--rule);border-radius:20px;padding:6px 13px}
.rtool svg{width:15px;height:15px}
.rtool.on{background:var(--accent);color:#fff}
.rtool.on svg{stroke:#fff}
body.selecting .v{cursor:pointer}
body.selecting .v .star{display:none}
.v.sel{background:var(--accent-soft);box-shadow:inset 0 0 0 1.6px var(--accent)}
@keyframes flash{0%{background:var(--accent-soft)}100%{background:transparent}}
.v.flash{animation:flash 1.6s ease-out}

.selbar{position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom));z-index:26;display:none;
  background:var(--bar);border-top:1px solid var(--rule);align-items:center;gap:12px;padding:9px 16px}
.selbar.on{display:flex}
.selcount{flex:1;font-size:14px;color:var(--ink)}
.selact{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;
  border-radius:20px;padding:7px 15px;font-size:14px;white-space:nowrap}
.selact svg{width:16px;height:16px;stroke:#fff}
.selbar .ctl{color:var(--muted);padding:2px 5px}
.selbar .ctl svg{width:20px;height:20px;display:block}

.newlist{display:flex;gap:8px;margin:6px 0 14px}
.newlist input{flex:1;font:inherit;font-size:15px;padding:9px 12px;border:1px solid var(--rule);
  border-radius:10px;background:var(--surface);color:var(--ink)}
.nl-top{margin-top:2px}

.sheet-ov{position:fixed;inset:0;z-index:40;background:#0006;display:flex;align-items:flex-end;
  justify-content:center;animation:ovin .15s}
.sheet{width:100%;max-width:var(--maxw);background:var(--surface);border-radius:16px 16px 0 0;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -6px 30px #0004;
  animation:sheetin .2s ease-out}
@keyframes sheetin{from{transform:translateY(30px)}to{transform:translateY(0)}}
.sheet-h{font-size:15px;color:var(--muted);margin-bottom:12px}
.sheet-rows{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto;margin-bottom:12px}
.sheet-row{display:flex;justify-content:space-between;align-items:center;
  background:var(--accent-soft);border:1px solid var(--rule);border-radius:10px;padding:11px 14px;font-size:16px;color:var(--ink)}
.sheet-row .ct{font-size:12px;color:var(--muted)}
.sheet-empty{color:var(--muted);font-size:13px;text-align:center;padding:10px}

/* ── language selector (named options, not letters) ──────────────────────── */
.langbtn{font-size:13px;color:var(--accent);background:var(--accent-soft);border:1px solid var(--rule);
  border-radius:16px;padding:4px 13px;white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis}
.langbtn:hover{border-color:var(--accent)}
.menu-ov{position:fixed;inset:0;z-index:40;background:#0005;animation:ovin .12s}
@keyframes ovin{from{opacity:0}to{opacity:1}}
.langmenu{position:absolute;top:54px;right:10px;background:var(--surface);border:1px solid var(--rule);
  border-radius:12px;box-shadow:0 8px 30px #0003;padding:6px;min-width:200px;max-height:80vh;overflow:auto;
  animation:menuin .14s ease-out}
@keyframes menuin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.menu-h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 10px 6px}
.lang-item{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;
  padding:10px 12px;border-radius:8px;font-size:16px;color:var(--ink);text-align:left}
.lang-item:hover{background:var(--accent-soft)}
.lang-item.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.lang-item .gl{font-size:14.5px;color:var(--muted)}
.lang-item.on .gl{color:var(--accent)}

/* ── Anukramaṇikā (śloka index) ───────────────────────────────────────────── */
.anu-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 12px;flex-wrap:wrap}
.anu-n{font-size:12px;color:var(--muted)}
.anu-letters{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px;position:sticky;top:50px;
  background:var(--bg);padding:6px 0;z-index:5}
.ltr{font-size:18px;min-width:30px;text-align:center;background:var(--accent-soft);color:var(--prose);
  border-radius:7px;padding:3px 7px;cursor:pointer;line-height:1.25}
.ltr.on{background:var(--accent);color:#fff}
.tindex-row{display:flex;gap:9px;align-items:baseline;padding:8px 2px;border-bottom:1px solid var(--rule);
  color:var(--ink);font-size:15.5px;line-height:1.5}
.tindex-row .rng{background:var(--accent);color:#fff;border-radius:10px;padding:0 8px;font-size:11px;
  white-space:nowrap;flex-shrink:0}
.pada{border-bottom:1px solid var(--rule)}
.pada-w{display:flex;justify-content:space-between;align-items:center;width:100%;gap:10px;
  padding:11px 4px;font-size:18px;color:var(--ink);text-align:left}
.pada-w:hover,.pada-w.open{color:var(--accent)}
.pada-w .ct{font-size:12px;color:var(--muted);background:var(--accent-soft);border-radius:10px;
  padding:1px 9px;flex-shrink:0;font-feature-settings:"tnum"}
.pada-w.open .ct{background:var(--accent);color:#fff}
.pada-hit{display:flex;gap:8px;align-items:baseline;padding:7px 4px 7px 14px;font-size:14.5px;
  color:var(--prose);border-top:1px dotted var(--rule)}
.pada-hit .r{color:var(--accent);font-size:11px;font-weight:600;flex-shrink:0;font-feature-settings:"tnum"}

/* ── icons (SVG, inherit currentColor) ───────────────────────────────────── */
.tab .i{height:23px;display:flex;align-items:center}
.tab .i svg{width:23px;height:23px;display:block}
.player .pp svg{width:27px;height:27px;display:block}
.player .ctl svg{width:21px;height:21px;display:block}
.iconbtn svg{width:19px;height:19px;display:block}
.v .star{width:18px;height:18px}
.v .star svg{width:16px;height:16px;display:block;stroke:var(--accent)}
.v .star.on svg{fill:#e0a200;stroke:#e0a200}