/* Hindi Library — one narrow reading column, saffron on ivory by day, warm ink at night. */
:root {
	--paper: #faf4e8;
	--surface: #f3e7d2;
	--ink: #2a1c10;
	--ink-2: #6d5643;
	--accent: #ad4f0b;
	--accent-ink: #fff8ee;
	--wash: #f5dfc0;
	--rule: #e6d5b9;
	--glow: rgba(236, 140, 48, 0.20);
	--shadow: rgba(84, 46, 10, 0.14);
	--scrim: rgba(42, 28, 16, 0.32);
	--bead: #dcc6a0;

	--f-sa: "Tiro Devanagari Sanskrit", "Noto Serif Devanagari", "Kohinoor Devanagari", "Devanagari Sangam MN", "Mangal", serif;
	--f-hi: "Noto Serif Devanagari", "Tiro Devanagari Hindi", "Kohinoor Devanagari", "Devanagari Sangam MN", "Mangal", serif;
	--f-lat: "Gentium Book Plus", "Noto Serif", "Charis SIL", Georgia, serif;
	--f-ui: "Hind", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--scale: 1;
	--dev-size: clamp(1.22rem, 1rem + .85vw, 1.5rem);
	--hi-size: clamp(1.06rem, .96rem + .4vw, 1.2rem);
	--lat-size: clamp(1rem, .92rem + .3vw, 1.1rem);
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="sepia"]) {
		--paper: #0d111e;
		--surface: #171c2d;
		--ink: #eee3cd;
		--ink-2: #a79d8b;
		--accent: #f0a24a;
		--accent-ink: #1b1206;
		--wash: #2b2433;
		--rule: #262c40;
		--glow: rgba(240, 162, 74, 0.11);
		--shadow: rgba(0, 0, 0, 0.45);
		--scrim: rgba(3, 5, 12, 0.6);
		--bead: #394058;
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--paper: #0d111e;
	--surface: #171c2d;
	--ink: #eee3cd;
	--ink-2: #a79d8b;
	--accent: #f0a24a;
	--accent-ink: #1b1206;
	--wash: #2b2433;
	--rule: #262c40;
	--glow: rgba(240, 162, 74, 0.11);
	--shadow: rgba(0, 0, 0, 0.45);
	--scrim: rgba(3, 5, 12, 0.6);
	--bead: #394058;
	color-scheme: dark;
}
/* sepia: warmer and lower glare than light; text colours keep WCAG AA contrast on this paper */
:root[data-theme="sepia"] {
	--paper: #f1e4c8;
	--surface: #e8d7b4;
	--ink: #3b2a17;
	--ink-2: #5e4329;
	--accent: #8e2f14;
	--accent-ink: #fbf1dc;
	--wash: #e3cb9c;
	--rule: #d6bf94;
	--glow: rgba(160, 82, 30, 0.14);
	--shadow: rgba(70, 40, 10, 0.16);
	--scrim: rgba(40, 26, 12, 0.32);
	--bead: #cdb388;
	color-scheme: light;
}
/* line spacing from the Aa menu */
:root { --lhk: 1; }
:root[data-spacing="relaxed"] { --lhk: 1.12; }
:root[data-spacing="loose"] { --lhk: 1.25; }

* { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	background: var(--paper);
}
body {
	margin: 0;
	min-height: 100vh;
	background: var(--paper);
	background-image: radial-gradient(130% 520px at 50% -140px, var(--glow), transparent 70%);
	background-repeat: no-repeat;
	color: var(--ink);
	font-family: var(--f-ui);
	font-size: 16px;
	line-height: 1.55;
	-webkit-tap-highlight-color: transparent;
	overflow-x: hidden;
}
button { font: inherit; color: inherit; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- top bar ---------- */
.topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	padding-top: env(safe-area-inset-top, 0px);
	background: color-mix(in srgb, var(--paper) 90%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: 1px solid var(--rule);
}
.bar {
	max-width: 42rem;
	margin: 0 auto;
	padding: 6px 12px;
	display: flex;
	align-items: center;
	gap: 4px;
	min-height: 56px;
}
.brand {
	display: flex; align-items: baseline; gap: .5rem;
	text-decoration: none; color: var(--ink);
	min-width: 0; flex: 1;
	padding: 4px;
}
.brand b { font-family: var(--f-hi); font-weight: 600; font-size: 1.15rem; white-space: nowrap; }
.brand span { font-size: .8rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ibtn {
	appearance: none; border: 0; background: transparent; cursor: pointer;
	min-width: 44px; height: 44px; border-radius: 12px;
	display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
	color: var(--ink); padding: 0 .55rem; font-size: .9rem; text-decoration: none;
}
.ibtn:hover { background: var(--wash); }
.ibtn svg { width: 21px; height: 21px; flex: none; }
.ibtn[aria-pressed="true"] { background: var(--wash); color: var(--accent); }

/* ---------- page column ---------- */
.wrap {
	max-width: 42rem;
	margin: 0 auto;
	padding: 0 16px 8rem;
}
.hero { padding: 2.2rem 0 1rem; }
.eyebrow {
	margin: 0 0 .7rem;
	font-size: .74rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent);
	font-weight: 600;
}
.hero h1 {
	margin: 0;
	font-family: var(--f-hi);
	font-weight: 500;
	font-size: clamp(1.9rem, 7.5vw, 2.8rem);
	line-height: 1.35;
	text-wrap: balance;
	overflow-wrap: anywhere;
}
.hero h1.sa { font-family: var(--f-sa); font-weight: 400; }
.hero .sub { margin: .5rem 0 0; color: var(--ink-2); font-size: 1rem; }
.hero .sub .lat { font-family: var(--f-lat); font-style: italic; }
.lede { margin: 1rem 0 0; color: var(--ink-2); max-width: 36rem; }

h2.shelf {
	margin: 2.4rem 0 .6rem;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-2);
	font-weight: 600;
}

/* book cards */
.books { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .2rem 1rem;
	align-items: center;
	padding: 1rem 1.1rem;
	border-radius: 16px;
	background: var(--surface);
	border: 1px solid var(--rule);
	text-decoration: none;
	color: var(--ink);
	transition: transform .15s, box-shadow .15s;
}
a.card:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -14px var(--shadow); }
.card .t { font-family: var(--f-hi); font-size: 1.3rem; line-height: 1.35; font-weight: 500; }
.card .t.sa { font-family: var(--f-sa); font-weight: 400; }
.card .e { font-size: .9rem; color: var(--ink-2); }
.card .d { grid-column: 1 / -1; font-size: .88rem; color: var(--ink-2); margin-top: .2rem; }
.card .go { color: var(--accent); font-size: 1.4rem; grid-row: 1 / span 2; grid-column: 2; }
.card.soon { opacity: .62; }
.pill {
	display: inline-block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
	padding: .1rem .5rem; border-radius: 999px; background: var(--wash); color: var(--ink-2);
	font-weight: 600; vertical-align: middle; margin-left: .3rem;
}
.puranas { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 6px; list-style: none; padding: 0; margin: 0; }
.pchip {
	display: flex; align-items: baseline; justify-content: space-between; gap: .4rem;
	padding: .35rem .7rem; border-radius: 10px; border: 1px solid var(--rule); background: var(--surface);
	text-decoration: none; color: var(--ink); white-space: nowrap; overflow: hidden;
}
.pchip .sa { font-family: var(--f-sa); font-size: .95rem; }
.pchip small { font-size: .66rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
a.pchip { border-color: var(--accent); }
a.pchip small { color: var(--accent); }
.pchip.soon { opacity: .6; }

/* home: wide, compact */
.wrap.wide { max-width: 72rem; }
.hero.home { padding: 1.1rem 0 .4rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; }
.hero.home h1 { font-size: 1.5rem; }
.hero.home .lede { margin: 0; font-size: .95rem; }
.home-top { display: grid; gap: 10px; margin: .6rem 0 0; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.home-top .resume { margin: 0; align-self: start; }
.home-top .votd { margin: 0; padding: .7rem .9rem; }
.home-top .votd .eyebrow { margin: 0 0 .3rem; }
.home-top .votd .sa-text { font-size: calc(1.1rem * var(--scale)); line-height: 1.6; margin: 0 0 .3rem; }
.home-top .votd-hi { font-size: .88rem; line-height: 1.55; margin: 0 0 .3rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-top .votd a { font-size: .82rem; }
.bar { max-width: 72rem !important; }
.home-top .resume > span { display: grid; gap: .05rem; min-width: 0; }
.home-top .resume small { font-size: .72rem; color: var(--ink-2); letter-spacing: .04em; }
.home-top .resume b { font-family: var(--f-hi); font-weight: 600; }
.home-top .resume span span { font-size: .88rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wide h2.shelf { margin: 1.2rem 0 .5rem; }
.wide .books { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 8px; }
@media (min-width: 700px) { .wide .books { grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 10px; } }
.wide .card { grid-template-columns: 1fr; padding: .65rem .8rem; gap: .1rem; align-content: start; height: 100%; box-sizing: border-box; }
.wide .card .t { font-size: 1.08rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wide .card .e { font-size: .8rem; }
.wide .card .d { font-size: .82rem; margin: .15rem 0 0; line-height: 1.45; }
@media (max-width: 520px) { .wide .card .d { display: none; } .hero.home h1 { display: none; } .hero.home { padding-top: .8rem; } }
main:focus { outline: none; }

/* contents list */
.toc { margin: 1.4rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.toc li { border-bottom: 1px solid var(--rule); }
.toc a {
	display: grid;
	grid-template-columns: 2.4rem minmax(0, 1fr) auto;
	align-items: baseline;
	gap: .2rem .6rem;
	padding: .75rem .1rem;
	min-height: 52px;
	text-decoration: none;
	color: var(--ink);
}
.toc .n { color: var(--accent); font-variant-numeric: tabular-nums; font-size: .9rem; text-align: right; }
.toc .nm { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .05rem .6rem; }
.toc .nm .dv { font-family: var(--f-hi); font-size: 1.12rem; }
.toc.sa .nm .dv { font-family: var(--f-sa); }
.toc .nm .tr { font-family: var(--f-lat); font-style: italic; font-size: .9rem; color: var(--ink-2); }
.toc .nm .fl { font-family: var(--f-hi); font-size: .92rem; color: var(--ink-2); flex-basis: 100%; }
.toc .ct { font-size: .8rem; color: var(--ink-2); white-space: nowrap; }
.toc a:hover .dv { color: var(--accent); }
.toc li.here a .dv::after { content: " •"; color: var(--accent); }

.resume {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	margin: 1.2rem 0 0; padding: .8rem 1rem; border-radius: 14px;
	background: var(--wash); color: var(--ink); text-decoration: none;
}
.resume b { color: var(--accent); }

/* ---------- reader ---------- */
.chap-head { padding: 1.8rem 0 .8rem; border-bottom: 1px solid var(--rule); margin-bottom: .4rem; }
.chap-head h1 { margin: 0; font-family: var(--f-hi); font-weight: 500; font-size: clamp(1.5rem, 5.4vw, 2rem); line-height: 1.4; text-wrap: balance; }
.chap-head h1.sa { font-family: var(--f-sa); font-weight: 400; }
.chap-head .tr { font-family: var(--f-lat); font-style: italic; color: var(--ink-2); margin: .2rem 0 0; }
.chap-head .crumbs { font-size: .85rem; margin: 0 0 .6rem; }
.chap-head .crumbs a { text-decoration: none; }

.layers { display: flex; flex-wrap: wrap; gap: 6px; margin: .9rem 0 0; }
.chip {
	appearance: none; cursor: pointer;
	border: 1px solid var(--rule); background: transparent; color: var(--ink-2);
	border-radius: 999px; min-height: 36px; padding: .2rem .85rem; font-size: .88rem;
}
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip.ghost { border-style: dashed; }

/* "Hide meaning until I tap" */
.reveal { display: none; margin-top: .7rem; }
body[data-tap="1"] .reveal:not(.done) { display: inline-block; }
body[data-tap="1"] .mwrap:not(.open) { display: none; }

/* Go to chapter / verse */
.goto { display: flex; gap: 6px; margin: .9rem 0 0; }
.goto select, .goto input {
	min-height: 40px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); color: var(--ink);
	font: inherit; font-size: .92rem; padding: 0 .6rem; min-width: 0;
}
.goto select { flex: 1 1 0; min-width: 0; max-width: 20rem; font-family: var(--f-hi); }
body.lang-en .goto select { font-family: var(--f-ui); }
.goto input { flex: 0 0 8.5rem; }
.goto input[aria-invalid="true"] { border-color: #c0392b; }
.rc-goto { max-width: 42rem; width: 100%; margin: 0 auto; padding: 0 12px 8px; }
.rc-goto .goto { margin: 0; }

/* About this text */
details.about { margin: 1.1rem 0 0; border: 1px solid var(--rule); border-radius: 14px; padding: .2rem 1rem; background: var(--surface); }
details.about summary { cursor: pointer; padding: .6rem 0; font-size: .85rem; letter-spacing: .06em; font-weight: 600; color: var(--ink-2); }
details.about p { margin: 0 0 .8rem; font-size: .95rem; }
details.about p[lang="en"] { font-family: var(--f-lat); }

.verse {
	padding: 1.1rem 0 1.2rem;
	border-bottom: 1px solid var(--rule);
	scroll-margin-top: 80px;
	transition: background-color 1.2s ease;
}
.verse.flash { background-color: var(--wash); transition: none; }
.vhead { display: flex; align-items: center; gap: .5rem; min-height: 32px; margin-bottom: .2rem; }
.vnum { font-size: .8rem; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; text-decoration: none; }
.speaker { font-family: var(--f-sa); color: var(--accent); font-size: calc(1rem * var(--scale)); }
.vtools { margin-left: auto; display: flex; gap: 2px; }
.vtools .ibtn { min-width: 44px; height: 44px; color: var(--ink-2); border-radius: 10px; }
.vtools .ibtn svg { width: 18px; height: 18px; }
.vtools .ibtn[aria-pressed="true"] { color: var(--accent); background: transparent; }

.sa-text {
	font-family: var(--f-sa);
	font-size: calc(var(--dev-size) * var(--scale));
	line-height: calc(1.95 * var(--lhk));
	margin: 0;
}
.sa-text.hi { font-family: var(--f-hi); }
.sa-text .ln, .tr-text .ln { display: block; padding-left: 1.1em; text-indent: -1.1em; }
.tr-text {
	font-family: var(--f-lat);
	font-size: calc(var(--lat-size) * var(--scale));
	line-height: calc(1.7 * var(--lhk));
	color: var(--ink-2);
	margin: .35rem 0 0;
	overflow-wrap: anywhere;
}
.meaning {
	font-family: var(--f-hi);
	font-size: calc(var(--hi-size) * var(--scale));
	line-height: calc(1.95 * var(--lhk));
	margin: .7rem 0 0;
	padding: .55rem 0 0 .9rem;
	border-left: 3px solid var(--wash);
}
.meaning.en { font-family: var(--f-lat); line-height: calc(1.7 * var(--lhk)); }
.meaning .mlabel { display: block; font-family: var(--f-ui); font-size: .75rem; letter-spacing: .06em; color: var(--ink-2); margin-bottom: .1rem; }
.meaning .mlabel a { color: var(--ink-2); }
.meaning.ref { color: var(--ink-2); font-size: calc(.95rem * var(--scale)); }
.note { font-size: calc(.92rem * var(--scale)); color: var(--ink-2); margin: .5rem 0 0 .9rem; }

.prose p {
	font-family: var(--f-hi);
	font-size: calc(var(--hi-size) * 1.04 * var(--scale));
	line-height: calc(2 * var(--lhk));
	margin: 0 0 1.1em;
	text-align: start;
	hyphens: manual;
}
.prose h3 { font-family: var(--f-hi); font-weight: 600; font-size: calc(1.2rem * var(--scale)); margin: 1.6em 0 .6em; text-align: center; }
.prose blockquote, .prose .poem { font-family: var(--f-hi); font-size: calc(var(--hi-size) * var(--scale)); line-height: 1.9; margin: 0 0 1.1em; padding-left: 1rem; border-left: 3px solid var(--wash); white-space: pre-line; }

body[data-hide-text="1"] .sa-text { display: none; }
body[data-hide-tr="1"] .tr-text { display: none; }
body[data-hide-hi="1"] .meaning:not(.en) { display: none; }
body[data-hide-en="1"] .meaning.en { display: none; }
body[data-hide-note="1"] .note { display: none; }

.ocr-note {
	margin: 1rem 0 0; padding: .7rem .9rem; border-radius: 12px;
	background: var(--surface); border: 1px solid var(--rule);
	font-size: .86rem; color: var(--ink-2);
}

.pager {
	display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 2rem 0 0;
}
.pager a {
	display: grid; gap: .1rem; padding: .8rem 1rem; border-radius: 14px;
	background: var(--surface); border: 1px solid var(--rule);
	text-decoration: none; color: var(--ink); min-height: 60px;
}
.pager a.next { text-align: right; grid-column: 2; }
.pager small { font-size: .75rem; color: var(--ink-2); letter-spacing: .05em; text-transform: uppercase; }
.pager span { font-family: var(--f-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- sources page ---------- */
.doc h2 { font-family: var(--f-hi); font-weight: 600; font-size: 1.3rem; margin: 2rem 0 .4rem; }
.doc p, .doc li { color: var(--ink); }
.doc .src { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.doc .src h3 { margin: 0 0 .3rem; font-size: 1.05rem; font-family: var(--f-hi); }
.doc .src p { margin: .25rem 0; font-size: .95rem; }
.doc .lic { display: inline-block; font-size: .78rem; font-weight: 600; padding: .05rem .5rem; border-radius: 999px; background: var(--wash); }

/* ---------- settings sheet ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 60; }
.sheet {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
	margin: 0 auto; max-width: 30rem; max-height: 85vh; overflow-y: auto;
	background: var(--surface); border: 1px solid var(--rule);
	border-radius: 20px 20px 0 0;
	padding: 1rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -12px 40px -12px var(--shadow);
}
.sheet h2 { margin: .2rem 0 1rem; font-size: 1.05rem; }
.row { display: grid; gap: .5rem; margin: 0 0 1.2rem; }
.row > span { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.seg { display: flex; gap: 4px; padding: 4px; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; }
.seg button {
	appearance: none; border: 0; flex: 1; min-height: 42px; border-radius: 10px; cursor: pointer; background: transparent; color: var(--ink-2);
}
.seg button[aria-pressed="true"] { background: var(--wash); color: var(--ink); font-weight: 600; }

/* ---------- recite mode ---------- */
.recite {
	position: fixed; inset: 0; z-index: 50; background: var(--paper);
	height: 100vh; height: 100dvh;
	display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
	padding-top: env(safe-area-inset-top, 0px);
}
.recite > * { min-width: 0; }
.rc-top {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 6px 12px;
	max-width: 60rem; width: 100%; margin: 0 auto;
}
.rc-top .ibtn { min-width: 40px; height: 40px; }
.rc-top .where {
	flex: 1 1 10rem; min-width: 0; display: flex; flex-direction: column; line-height: 1.25;
	text-decoration: none; color: var(--ink); white-space: nowrap; overflow: hidden;
}
.rc-top .where b { font-family: var(--f-hi); font-weight: 600; font-size: .98rem; overflow: hidden; text-overflow: ellipsis; }
.rc-top .where b.sa { font-family: var(--f-sa); font-weight: 400; }
.rc-top .where span { font-size: .8rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.rc-top .goto { margin: 0; flex: 0 1 26rem; min-width: 0; }
.rc-top .goto select, .rc-top .goto input { min-height: 36px; }
.rc-top .goto input { flex-basis: 6.5rem; }
@media (max-width: 700px) { .rc-top .goto { order: 9; flex: 1 1 100%; max-width: none; } .rc-top .goto select { max-width: none; } }
.rc-bar { height: 3px; background: var(--rule); }
.rc-bar i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .25s; }
.rc-body { overflow-y: auto; display: flex; flex-direction: column; padding: 1rem 16px; touch-action: pan-y; overscroll-behavior: contain; }
.rc-card { max-width: 46rem; width: 100%; margin: auto; text-align: center; }
.rc-card .verse { border: 0; padding: 0; }
.rc-card .sa-text { font-size: calc(var(--dev-size) * 1.18 * var(--scale)); }
.rc-card .sa-text .ln, .rc-card .tr-text .ln { padding-left: 0; text-indent: 0; }
.rc-card .meaning { text-align: start; }
.rc-card .vhead { justify-content: center; }
.rc-src { font-size: .74rem; color: var(--ink-2); margin: .8rem 0 0; font-family: var(--f-ui); }
@media (min-width: 900px) and (min-height: 640px) {
	.rc-card .sa-text { font-size: calc(var(--dev-size) * 1.4 * var(--scale)); }
	.rc-card .tr-text, .rc-card .meaning { font-size: calc(var(--hi-size) * 1.12 * var(--scale)); }
}
.vend { white-space: nowrap; color: var(--accent); font-size: .9em; }
.tr-text .vend { color: inherit; }
.rc-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 8px max(16px, calc((100% - 46rem) / 2)) calc(8px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--rule); background: var(--surface);
}
.rc-mid { display: flex; align-items: center; justify-content: center; gap: 4px 10px; flex-wrap: wrap; min-width: 0; }
.rc-pos { font-size: .88rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-tools { display: flex; gap: 2px; }
.rc-tools .ibtn { min-width: 40px; height: 40px; color: var(--ink-2); }
.rc-tools .ibtn[aria-pressed="true"] { color: var(--accent); }
.rc-tools .ibtn.mark[aria-pressed="true"] svg { fill: currentColor; }
.rc-nav {
	appearance: none; border: 1px solid var(--rule); background: var(--paper); cursor: pointer; flex: none;
	height: 48px; min-width: 48px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
	justify-content: center; color: var(--ink); font: inherit; font-size: .95rem;
}
.rc-nav svg { width: 22px; height: 22px; }
.rc-nav:disabled { opacity: .35; cursor: default; }
@media (max-width: 520px) { .rc-nav .w { display: none; } .rc-nav { padding: 0; width: 52px; } }

/* prose, page by page */
.pg-view { overflow: hidden; min-height: 0; }
.pg-cols {
	--pw: 100vw;
	height: 100%; box-sizing: border-box;
	column-width: calc(var(--pw) - 2 * var(--pad)); column-gap: calc(2 * var(--pad)); column-fill: auto;
	--pad: max(20px, calc((var(--pw) - 40rem) / 2));
	padding: 1.2rem var(--pad);
	font-family: var(--f-hi); font-size: calc(var(--hi-size) * 1.05 * var(--scale)); line-height: 1.85;
}
.pg-cols p { margin: 0 0 .9em; text-align: justify; hyphens: auto; }
body.lang-en .pg-cols p { text-align: start; }
body.lang-en .pg-cols .verse.prose-en { padding: 0; border: 0; }
.pg-cols .pg-title { font-size: 1.6em; font-weight: 500; margin: 0 0 .6em; line-height: 1.35; }
.pg-cols .sec-h { text-align: center; color: var(--ink-2); font-size: 1em; margin: 1em 0 .6em; break-after: avoid; }

.mala { display: grid; justify-items: center; gap: .2rem; }
.mala-btn {
	appearance: none; border: 0; background: transparent; cursor: pointer; padding: 0;
	width: 96px; height: 96px; position: relative; border-radius: 999px;
}
.mala-btn svg { width: 100%; height: 100%; display: block; }
.mala-btn .bead { fill: var(--bead); transition: fill .15s; }
.mala-btn .bead.on { fill: var(--accent); }
.mala-btn .meru { fill: var(--accent); }
.mala-btn .core { fill: var(--surface); stroke: var(--rule); }
.mala-btn:active .core { fill: var(--wash); }
.mala-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.mala-num b { font-size: 1.5rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.mala-num small { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-top: .2rem; }
.mala-meta { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.linkish { appearance: none; border: 0; background: none; color: var(--accent); cursor: pointer; padding: .2rem; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }

.toast {
	position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
	z-index: 80; background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: 999px;
	font-size: .9rem; box-shadow: 0 8px 24px -8px var(--shadow); pointer-events: none; max-width: calc(100vw - 32px);
}
.empty { color: var(--ink-2); padding: 2rem 0; }
.toc li.grp { font-family: var(--f-hi); font-weight: 600; color: var(--accent); padding: 1.2rem 0 .3rem; border: 0; }

/* search and saved verses */
.searchbox { display: flex; gap: 6px; margin: .4rem 0 .6rem; }
.searchbox input {
	flex: 1; min-width: 0; min-height: 44px; padding: 0 .9rem; border-radius: 14px; border: 1px solid var(--rule);
	background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem;
}
.results { list-style: none; margin: .4rem 0 2rem; padding: 0; }
.results li { border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: .5rem; }
.results li > a { flex: 1; min-width: 0; display: grid; gap: .15rem; padding: .8rem 0; text-decoration: none; color: var(--ink); }
.results .rb { font-size: .8rem; color: var(--accent); }
.results .rt { font-family: var(--f-hi); font-size: calc(1rem * var(--scale)); line-height: 1.6; overflow-wrap: anywhere; }
.results li.empty { display: block; border: 0; }
.vtools .ibtn[aria-pressed="true"] { color: var(--accent); }
.vtools .ibtn.mark[aria-pressed="true"] svg { fill: currentColor; }

/* verse of the day */
.votd { margin: .4rem 0 1.4rem; padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); }
.votd .eyebrow { margin: 0 0 .5rem; }
.votd .sa-text { white-space: pre-line; margin: 0 0 .6rem; }
.votd-hi { font-family: var(--f-hi); color: var(--ink-2); margin: 0 0 .6rem; font-size: calc(.98rem * var(--scale)); line-height: 1.7; }
.votd a { font-size: .9rem; }
.loading { color: var(--ink-2); padding: 3rem 0; text-align: center; }
footer.site { max-width: 42rem; margin: 0 auto; padding: 0 16px 3rem; font-size: .85rem; color: var(--ink-2); }
footer.site a { color: var(--ink-2); }

@media (max-width: 420px) {
	.brand span { display: none; }
	.rc-foot { gap: 10px; }
	.mala-btn { width: 84px; height: 84px; }
}

/* language switch in the header */
.langsw { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); flex: none; }
.langsw button {
	appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--ink-2);
	min-height: 38px; min-width: 44px; padding: 0 .7rem; border-radius: 999px; font-size: .86rem;
}
.langsw button[lang="hi"] { font-family: var(--f-hi); }
.langsw button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* English mode: the Roman transliteration is the main text, so it gets the main size and colour */
body.lang-en .brand b { font-family: var(--f-ui); }
body.lang-en .hero h1, body.lang-en .chap-head h1, body.lang-en .card .t, body.lang-en .toc .nm .dv, body.lang-en .pg-title { font-family: var(--f-lat); font-weight: 600; }
body.lang-en .tr-text { color: var(--ink); font-size: calc(var(--lat-size) * 1.12 * var(--scale)); line-height: calc(1.75 * var(--lhk)); margin-top: .2rem; }
body.lang-en .rc-card .tr-text { font-size: calc(var(--lat-size) * 1.25 * var(--scale)); }
body.lang-en .tr-text.prose-tr { font-size: calc(var(--lat-size) * 1.05 * var(--scale)); line-height: calc(1.85 * var(--lhk)); margin: 0 0 1.1em; }
body.lang-en .speaker { font-family: var(--f-lat); font-style: italic; }
body.lang-en .sec-h { font-family: var(--f-lat); }
body.lang-en .meaning.en { font-family: var(--f-lat); }
body.lang-en .puranas .pchip span { font-family: var(--f-ui); }

/* ---------- easier reading for everyone ---------- */
/* header: the brand gives way to the switch and buttons on small phones */
.brand { overflow: hidden; }
.brand b { overflow: hidden; text-overflow: ellipsis; }
.ibtn.aa { font-family: var(--f-lat); font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
@media (max-width: 480px) {
	.bar { gap: 2px; padding: 6px 8px; }
	.langsw button { padding: 0 .5rem; min-width: 40px; }
	.langsw .long { display: none; }
	.brand b { font-size: 1rem; }
}
@media (min-width: 481px) { .langsw .short { display: none; } }

/* home: a welcome, one clear first step, search in view */
.hero.home { padding-top: 1.4rem; display: block; max-width: 46rem; }
.hero.home h1 { font-size: clamp(1.7rem, 4vw, 2.2rem); margin: 0; }
.hero.home .lede { margin-top: .4rem; font-size: 1rem; }
.hero.home .resume { margin-top: 1rem; min-height: 64px; max-width: 32rem; }
.hero.home .home-search { max-width: 32rem; }
.resume .go { font-size: 1.4rem; color: var(--accent); }
.resume.start { background: var(--accent); color: var(--accent-ink); }
.resume.start b, .resume.start .go, .resume.start small, .resume.start span span { color: var(--accent-ink) !important; }
.hero.home .resume > span { display: grid; gap: .05rem; min-width: 0; }
.hero.home .resume small { font-size: .78rem; color: var(--ink-2); }
.hero.home .resume b { font-weight: 600; font-size: 1.1rem; }
.hero.home .resume span span { font-size: .9rem; color: var(--ink-2); }
.home-search { display: flex; gap: 8px; margin: .9rem 0 0; }
.home-search input, .searchbox input {
	flex: 1; min-width: 0; min-height: 48px; padding: .5rem .9rem; border-radius: 12px;
	border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: inherit; font-size: 1rem;
}
.home-search .chip { min-height: 48px; padding: 0 1.1rem; }
.shelf-note { margin: -.2rem 0 .6rem; font-size: .88rem; color: var(--ink-2); }

/* book cards: title, one-line description, size and reading time */
.card .m { grid-column: 1 / -1; font-size: .8rem; color: var(--ink-2); margin-top: .25rem; font-variant-numeric: tabular-nums; }
.wide .card .d { display: block !important; }
@media (max-width: 520px) {
	.wide .books { grid-template-columns: 1fr; gap: 10px; }
	.wide .card { padding: .8rem 1rem; }
	.wide .card .t { font-size: 1.15rem; white-space: normal; }
	.hero.home h1 { display: block !important; font-size: 1.7rem; }
}
.card .t.en { font-family: var(--f-lat); font-weight: 600; }

/* the one-time tip */
.tip { margin: 1rem 0 0; padding: .9rem 1.1rem; border-radius: 16px; border: 1px solid var(--accent); background: var(--surface); }
.tip h2 { margin: 0 0 .4rem; font-size: 1rem; }
.tip ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; font-size: .92rem; }
.tip-actions { display: flex; align-items: center; gap: 1rem; margin: .7rem 0 0; }
.tip-actions .chip { min-height: 44px; padding: 0 1.2rem; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* inside a book: breadcrumb, position, a big sticky pager on phones */
.crumbs { display: flex; flex-wrap: wrap; gap: .1rem .4rem; align-items: center; }
.crumbs a { min-height: 32px; display: inline-flex; align-items: center; }
.crumbs .sep { color: var(--ink-2); }
.chap-pos { margin: .3rem 0 0; font-size: .85rem; color: var(--ink-2); }
.chap-progress { height: 4px; background: var(--rule); border-radius: 4px; margin: .5rem 0 0; overflow: hidden; }
.chap-progress i { display: block; height: 100%; background: var(--accent); }
.pager a { min-height: 64px; align-content: center; }
@media (max-width: 700px) {
	.pager { position: sticky; bottom: 0; z-index: 15; margin: 1.5rem -16px 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--paper) 94%, transparent); border-top: 1px solid var(--rule); }
	.pager a { min-height: 56px; padding: .5rem .8rem; }
}
.rc-top .where .pos { font-variant-numeric: tabular-nums; }
.rc-nav { min-width: 56px; min-height: 56px; }

/* help page and the link in the Aa sheet */
.nobr { white-space: nowrap; }
/* verse labels: the source's own number beside a position number */
.vsrc { font-size: .75rem; color: var(--ink-2); }
.en-missing { font-size: calc(.9rem * var(--scale)); color: var(--ink-2); margin: .6rem 0 0; }
/* Google Translate links */
.gt { margin: .6rem 0 0; font-size: .85rem; color: var(--ink-2); line-height: 1.5; }
.gt a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.gt-chapter { margin-top: .8rem; }
.pg-cols .gt-chapter { break-inside: avoid; }
.rc-card .gt { text-align: start; }
/* a chapter's English translation given as one passage (Vishnu Purana) */
.en-chapter { margin: 1rem 0 0; padding: .6rem .9rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); }
.en-chapter summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.en-chapter p, .en-sheet p { font-family: var(--f-lat); font-size: calc(var(--lat-size) * var(--scale)); line-height: calc(1.75 * var(--lhk)); }
.en-sheet { max-width: 42rem; }
.rc-top .en-btn { min-height: 40px; }
.help h2 { font-size: 1.12rem; margin: 1.6rem 0 .3rem; }
.help p { line-height: 1.7; }
.sheet-help { margin: 0 0 1rem; font-size: .92rem; }

/* comfortable line length and visible focus everywhere */
.chap-head, .verses, .prose { max-width: 40rem; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.chip, .langsw button, .ibtn, .linkish { min-height: 44px; }
.linkish { display: inline-flex; align-items: center; }

/* respect "reduce motion" */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
	a.card:hover { transform: none; }
}

/* while the reader covers the screen, the page behind it takes no space */
body.rc-open > main, body.rc-open > footer.site, body.rc-open > header.topbar { display: none; }

/* machine-written English chapter summary */
.en-summary { margin: .6rem 0 .8rem; padding: 0 .9rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); line-height: 1.6; }
.en-summary summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.en-summary p { margin: .3rem 0; }
.en-summary .mlabel { font-size: .8rem; color: var(--ink-2); }

/* chapter page: labelled show/hide switches, a tick on the ones that are on */
.show-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: .9rem 0 0; }
.show-row .layers { margin: 0; }
.show-lab { font-size: .88rem; color: var(--ink-2); }
.layers .chip[aria-pressed="true"]::before { content: "✓ "; }
.layers .chip[aria-pressed="false"] { text-decoration: line-through; text-decoration-color: var(--ink-2); }

/* folded boxes (notes, summary, English chapter) show an arrow so they read as "tap to open" */
details.notes { margin: 1rem 0 0; padding: 0 .9rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); font-size: .88rem; color: var(--ink-2); }
details.notes p { margin: 0 0 .7rem; }
details.notes summary, .en-summary summary, .en-chapter summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: .5rem; }
details.notes summary::-webkit-details-marker, .en-summary summary::-webkit-details-marker, .en-chapter summary::-webkit-details-marker { display: none; }
details.notes summary::before, .en-summary summary::before, .en-chapter summary::before { content: "▸"; color: var(--accent); transition: transform .15s; }
details[open].notes summary::before, details[open].en-summary summary::before, details[open].en-chapter summary::before { transform: rotate(90deg); }
details.notes summary::after { content: "ⓘ"; margin-left: auto; color: var(--ink-2); }
/* wide letter spacing suits English capitals, but breaks up Devanagari words */
html[lang="hi"] h2.shelf, html[lang="hi"] .eyebrow { letter-spacing: .02em; font-size: .9rem; }
.meaning[lang="hi"] .mlabel { letter-spacing: 0; }